Merge branch 'main' into klarna-checkout

CHANGELOG.md

@@ -1,3 +1,19 @@
+## [0.106.16](https://github.com/juspay/hyperswitch-web/compare/v0.106.15...v0.106.16) (2024-12-25)
+
+## [0.106.15](https://github.com/juspay/hyperswitch-web/compare/v0.106.14...v0.106.15) (2024-12-23)
+
+
+### Bug Fixes
+
+* saved cards screen cards validity issue ([#849](https://github.com/juspay/hyperswitch-web/issues/849)) ([ef1bd85](https://github.com/juspay/hyperswitch-web/commit/ef1bd8521a58be3e61e088cf60c9e4a88b7e82fc))
+
+## [0.106.14](https://github.com/juspay/hyperswitch-web/compare/v0.106.13...v0.106.14) (2024-12-23)
+
+
+### Bug Fixes
+
+* display saved method screen condition and dynamic fields values updation issue in saved card screen ([#848](https://github.com/juspay/hyperswitch-web/issues/848)) ([aa0d088](https://github.com/juspay/hyperswitch-web/commit/aa0d088c7c56425ff815564cf79e740996649751))
+
 ## [0.106.13](https://github.com/juspay/hyperswitch-web/compare/v0.106.12...v0.106.13) (2024-12-19)
 
 ## [0.106.12](https://github.com/juspay/hyperswitch-web/compare/v0.106.11...v0.106.12) (2024-12-18)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.106.13",
+  "version": "0.106.16",
   "main": "index.js",
   "private": true,
   "dependencies": {
@@ -17,10 +17,14 @@
   },
   "scripts": {
     "build": "webpack --config webpack.common.js",
+    "build:v2": "cross-env SDK_VERSION=v2 webpack --config webpack.common.js",
     "build:integ": "cross-env sdkEnv=integ webpack --config webpack.common.js",
-    "build:playground": "npm run setup:playground && npm run build",
-    "build:prod": "cross-env sdkEnv=prod webpack --config webpack.common.js",
+    "build:playground": "npm run setup:playground && webpack --config webpack.common.js",
     "build:sandbox": "cross-env sdkEnv=sandbox webpack --config webpack.common.js",
+    "build:prod": "cross-env sdkEnv=prod webpack --config webpack.common.js",
+    "build:integ:v2": "cross-env sdkEnv=integ SDK_VERSION=v2 webpack --config webpack.common.js",
+    "build:sandbox:v2": "cross-env sdkEnv=sandbox SDK_VERSION=v2 webpack --config webpack.common.js",
+    "build:prod:v2": "cross-env sdkEnv=prod SDK_VERSION=v2 webpack --config webpack.common.js",
     "deploy-to-s3": "node ./scripts/pushToS3.js",
     "postinstall": "cd Hyperswitch-React-Demo-App && npm i",
     "prepare": "husky install",

src/Components/DynamicFields.res

@@ -269,6 +269,7 @@ let make = (
     ~cardNumber,
     ~cardExpiry,
     ~cvcNumber,
+    ~isSavedCardFlow,
   )
 
   useSetInitialRequiredFields(
@@ -328,7 +329,7 @@ let make = (
 
   let spacedStylesForBiilingDetails = isSpacedInnerLayout ? "p-2" : "my-2"
 
-  <RenderIf condition={fieldsArr->Array.length > 0}>
+  <RenderIf condition={!isSavedCardFlow && fieldsArr->Array.length > 0}>
     {<>
       {dynamicFieldsToRenderOutsideBilling
       ->Array.mapWithIndex((item, index) => {

src/Components/SavedCardItem.res

@@ -37,6 +37,7 @@ let make = (
   ~savedCardlength,
   ~cvcProps,
   ~paymentType,
+  ~setRequiredFieldsBody,
 ) => {
   let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let {hideExpiredPaymentMethods, displayDefaultSavedPaymentIcon} = Recoil.useRecoilValueFromAtom(
@@ -207,6 +208,14 @@ let make = (
                 </div>
               </RenderIf>
               <RenderIf condition={isActive}>
+                <DynamicFields
+                  paymentType
+                  paymentMethod=paymentItem.paymentMethod
+                  paymentMethodType
+                  setRequiredFieldsBody
+                  isSavedCardFlow=true
+                  savedMethod=paymentItem
+                />
                 <Surcharge
                   paymentMethod=paymentItem.paymentMethod
                   paymentMethodType

src/Components/SavedMethods.res

@@ -16,7 +16,7 @@ let make = (
   let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
   let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsValid)
   let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(RecoilAtoms.isManualRetryEnabled)
-  let (requiredFieldsBody, _) = React.useState(_ => Dict.make())
+  let (requiredFieldsBody, setRequiredFieldsBody) = React.useState(_ => Dict.make())
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let setUserError = message => {
     postFailedSubmitResponse(~errortype="validation_error", ~message)
@@ -60,6 +60,7 @@ let make = (
           savedCardlength
           cvcProps
           paymentType
+          setRequiredFieldsBody
         />
       )
       ->React.array}

src/GlobalVars.res

@@ -10,6 +10,7 @@
 @val external enableLogging: bool = "enableLogging"
 @val external loggingLevelStr: string = "loggingLevel"
 @val external maxLogsPushedPerEventName: int = "maxLogsPushedPerEventName"
+@val external sdkVersion: string = "sdkVersion"
 let targetOrigin: string = "*"
 let isInteg = sdkUrl === "https://dev.hyperswitch.io"
 let isSandbox = sdkUrl === "https://beta.hyperswitch.io" || sdkUrl === "http://localhost:9050"

src/PaymentElement.res

@@ -100,7 +100,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
             ? NoResult(isGuestCustomer)
             : LoadedSavedCards(finalSavedPaymentMethods, isGuestCustomer)
         )
-        setShowFields(prev => finalSavedPaymentMethods->Array.length == 0 || prev)
+        setShowFields(_ => finalSavedPaymentMethods->Array.length == 0)
       }
     | (_, NoResult(isGuestCustomer)) => {
         setLoadSavedCards(_ => NoResult(isGuestCustomer))

src/Utilities/DynamicFieldsUtils.res

@@ -134,6 +134,7 @@ let useRequiredFieldsEmptyAndValid = (
   ~cardNumber,
   ~cardExpiry,
   ~cvcNumber,
+  ~isSavedCardFlow,
 ) => {
   let email = Recoil.useRecoilValueFromAtom(userEmailAddress)
   let vpaId = Recoil.useRecoilValueFromAtom(userVpaId)
@@ -208,7 +209,7 @@ let useRequiredFieldsEmptyAndValid = (
       | _ => true
       }
     })
-    setAreRequiredFieldsValid(_ => areRequiredFieldsValid)
+    setAreRequiredFieldsValid(_ => isSavedCardFlow || areRequiredFieldsValid)
 
     let areRequiredFieldsEmpty = fieldsArrWithBillingAddress->Array.reduce(false, (
       acc,

webpack.common.js

@@ -19,11 +19,21 @@ const envSdkUrl = getEnvVariable("ENV_SDK_URL", "");
 const envBackendUrl = getEnvVariable("ENV_BACKEND_URL", "");
 const envLoggingUrl = getEnvVariable("ENV_LOGGING_URL", "");
 
+/*
+* SDK Version Compatibility:
+
+* v0: Compatible with API v1
+* v1: Compatible with API v1
+* v2: Compatible with API v2
+
+* The default SDK version is "v1".
+*/
+const sdkVersion = getEnvVariable("SDK_VERSION", "v1");
+
 const repoVersion = require("./package.json").version;
-const majorVersion = "v" + repoVersion.split(".")[0];
 const repoName = require("./package.json").name;
 const repoPublicPath =
-  sdkEnv === "local" ? "" : `/web/${repoVersion}/${majorVersion}`;
+  sdkEnv === "local" ? "" : `/web/${repoVersion}/${sdkVersion}`;
 
 const getSdkUrl = (env, customUrl) => {
   if (customUrl) return customUrl;
@@ -81,6 +91,7 @@ module.exports = (publicPath = "auto") => {
     enableLogging: ENABLE_LOGGING,
     loggingLevel: JSON.stringify(loggingLevel),
     maxLogsPushedPerEventName: JSON.stringify(maxLogsPushedPerEventName),
+    sdkVersion: JSON.stringify(sdkVersion),
   };
 
   const plugins = [
@@ -137,7 +148,7 @@ module.exports = (publicPath = "auto") => {
     output: {
       path:
         sdkEnv && sdkEnv !== "local"
-          ? path.resolve(__dirname, "dist", sdkEnv)
+          ? path.resolve(__dirname, "dist", sdkEnv, sdkVersion)
           : path.resolve(__dirname, "dist"),
       clean: true,
       publicPath: `${repoPublicPath}/`,