Merge branch 'main' of github.com:juspay/hyperswitch-web into loader-…

…changes

CHANGELOG.md

@@ -1,3 +1,38 @@
+## [0.65.1](https://github.com/juspay/hyperswitch-web/compare/v0.65.0...v0.65.1) (2024-06-13)
+
+
+### Bug Fixes
+
+* transforming billing and shipping country code to touppercase for applepay ([#441](https://github.com/juspay/hyperswitch-web/issues/441)) ([4745fa2](https://github.com/juspay/hyperswitch-web/commit/4745fa259ef3398fd0c9a39b12fe622b29a824ca))
+
+# [0.65.0](https://github.com/juspay/hyperswitch-web/compare/v0.64.0...v0.65.0) (2024-06-13)
+
+
+### Features
+
+* added prop for displayDefaultSavedPaymentIcon ([#434](https://github.com/juspay/hyperswitch-web/issues/434)) ([b141aed](https://github.com/juspay/hyperswitch-web/commit/b141aedf07e8eff9d6653440631aa193e72db712))
+
+# [0.64.0](https://github.com/juspay/hyperswitch-web/compare/v0.63.0...v0.64.0) (2024-06-13)
+
+
+### Features
+
+* added confirm and get handler for last used payment ([#428](https://github.com/juspay/hyperswitch-web/issues/428)) ([5e46da0](https://github.com/juspay/hyperswitch-web/commit/5e46da0924977fa00ccd5ce716c1ed494076ae7f))
+
+# [0.63.0](https://github.com/juspay/hyperswitch-web/compare/v0.62.3...v0.63.0) (2024-06-13)
+
+
+### Features
+
+* log href without including search params ([#439](https://github.com/juspay/hyperswitch-web/issues/439)) ([ad43a5c](https://github.com/juspay/hyperswitch-web/commit/ad43a5cbe8a53ca06aff77b852d76d84f2b1df05))
+
+## [0.62.3](https://github.com/juspay/hyperswitch-web/compare/v0.62.2...v0.62.3) (2024-06-13)
+
+
+### Bug Fixes
+
+* removed fallback in case of sessions call fail based on payment experience ([#440](https://github.com/juspay/hyperswitch-web/issues/440)) ([8f2e408](https://github.com/juspay/hyperswitch-web/commit/8f2e4085a65aff510ae49b416bc987aa2ca5b4da))
+
 ## [0.62.2](https://github.com/juspay/hyperswitch-web/compare/v0.62.1...v0.62.2) (2024-06-11)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.62.2",
+  "version": "0.65.1",
   "main": "index.js",
   "private": true,
   "dependencies": {

src/Components/SavedCardItem.res

@@ -11,7 +11,9 @@ let make = (
   ~setRequiredFieldsBody,
 ) => {
   let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let {hideExpiredPaymentMethods} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+  let {hideExpiredPaymentMethods, displayDefaultSavedPaymentIcon} = Recoil.useRecoilValueFromAtom(
+    RecoilAtoms.optionAtom,
+  )
   let (cardBrand, setCardBrand) = Recoil.useRecoilState(RecoilAtoms.cardBrand)
   let (
     isCVCValid,
@@ -116,7 +118,9 @@ let make = (
                         </div>
                       </div>
                     : <div> {React.string(paymentMethodType->Utils.snakeToTitleCase)} </div>}
-                  <RenderIf condition={paymentItem.defaultPaymentMethodSet}>
+                  <RenderIf
+                    condition={displayDefaultSavedPaymentIcon &&
+                    paymentItem.defaultPaymentMethodSet}>
                     <Icon size=18 name="checkmark" style={color: themeObj.colorPrimary} />
                   </RenderIf>
                 </div>

src/LoaderController.res

@@ -270,7 +270,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
               setLaunchTime(_ => newLaunchTime)
               let initLoadlatency = Date.now() -. newLaunchTime
               logger.setLogInfo(
-                ~value=Window.href,
+                ~value=Window.hrefWithoutSearch,
                 ~eventName=APP_RENDERED,
                 ~latency=initLoadlatency,
                 (),

src/PaymentElement.res

@@ -45,8 +45,6 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     setLoadSavedCards: (savedCardsLoadState => savedCardsLoadState) => unit,
   ) = React.useState(_ => LoadingSavedCards)
 
-  let isKlarnaRedirectFlow = PaymentUtils.getIsKlarnaRedirectFlow(sessions)
-
   React.useEffect(() => {
     switch (displaySavedPaymentMethods, customerPaymentMethods) {
     | (false, _) => {
@@ -68,6 +66,10 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
         | None => savedCardsWithoutDefaultPaymentMethod
         }
 
+        finalSavedPaymentMethods->Array.sort((a, b) =>
+          compareLogic(Date.fromString(a.lastUsedAt), Date.fromString(b.lastUsedAt))
+        )
+
         setSavedMethods(_ => finalSavedPaymentMethods)
         setLoadSavedCards(_ =>
           finalSavedPaymentMethods->Array.length == 0
@@ -246,11 +248,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       {switch selectedOption->PaymentModeType.paymentMode {
       | Card => <CardPayment cardProps expiryProps cvcProps paymentType />
       | Klarna =>
-        <RenderIf condition={isKlarnaRedirectFlow}>
-          <React.Suspense fallback={loader()}>
-            <KlarnaPaymentLazy paymentType />
-          </React.Suspense>
-        </RenderIf>
+        <React.Suspense fallback={loader()}>
+          <KlarnaPaymentLazy paymentType />
+        </React.Suspense>
       | ACHTransfer =>
         <React.Suspense fallback={loader()}>
           <ACHBankTransferLazy paymentType />

src/Payments/CardPayment.res

@@ -78,10 +78,7 @@ let make = (
     let cardPaymentMethod =
       paymentMethodListValue.payment_methods
       ->Array.find(ele => ele.payment_method === "card")
-      ->Option.getOr({
-        payment_method: "card",
-        payment_method_types: [],
-      })
+      ->Option.getOr(PaymentMethodsRecord.defaultMethods)
 
     let cardNetworks = cardPaymentMethod.payment_method_types->Array.map(ele => ele.card_networks)
 

src/Payments/PaymentMethodsRecord.res

@@ -742,6 +742,11 @@ type methods = {
   payment_method_types: array<paymentMethodTypes>,
 }
 
+let defaultMethods = {
+  payment_method: "card",
+  payment_method_types: [],
+}
+
 type mandateType = {
   amount: int,
   currency: string,
@@ -1049,10 +1054,7 @@ let getPaymentMethodTypeFromList = (
     ->Array.find(item => {
       item.payment_method == paymentMethod
     })
-    ->Option.getOr({
-      payment_method: "card",
-      payment_method_types: [],
-    })
+    ->Option.getOr(defaultMethods)
   ).payment_method_types->Array.find(item => {
     item.payment_method_type == paymentMethodType
   })
@@ -1064,3 +1066,24 @@ let getCardNetwork = (~paymentMethodType, ~cardBrand) => {
   ->Array.get(0)
   ->Option.getOr(defaultCardNetworks)
 }
+
+let getPaymentExperienceTypeFromPML = (
+  ~paymentMethodList: paymentMethodList,
+  ~paymentMethodName,
+  ~paymentMethodType,
+) => {
+  paymentMethodList.payment_methods
+  ->Array.filter(paymentMethod => paymentMethod.payment_method === paymentMethodName)
+  ->Array.get(0)
+  ->Option.flatMap(method =>
+    method.payment_method_types
+    ->Array.filter(methodTypes => methodTypes.payment_method_type === paymentMethodType)
+    ->Array.get(0)
+  )
+  ->Option.flatMap(paymentMethodTypes =>
+    paymentMethodTypes.payment_experience
+    ->Array.map(paymentExperience => paymentExperience.payment_experience_type)
+    ->Some
+  )
+  ->Option.getOr([])
+}

src/Types/PaymentType.res

@@ -128,6 +128,7 @@ type customerMethods = {
   paymentMethodType: option<string>,
   defaultPaymentMethodSet: bool,
   requiresCvv: bool,
+  lastUsedAt: string,
 }
 type savedCardsLoadState =
   LoadingSavedCards | LoadedSavedCards(array<customerMethods>, bool) | NoResult(bool)
@@ -164,6 +165,7 @@ type options = {
   paymentMethodsHeaderText?: string,
   savedPaymentMethodsHeaderText?: string,
   hideExpiredPaymentMethods: bool,
+  displayDefaultSavedPaymentIcon: bool,
 }
 let defaultCardDetails = {
   scheme: None,
@@ -183,6 +185,7 @@ let defaultCustomerMethods = {
   paymentMethodType: None,
   defaultPaymentMethodSet: false,
   requiresCvv: true,
+  lastUsedAt: "",
 }
 let defaultLayout = {
   defaultCollapsed: false,
@@ -295,6 +298,7 @@ let defaultOptions = {
   billingAddress: defaultBillingAddress,
   sdkHandleConfirmPayment: defaultSdkHandleConfirmPayment,
   hideExpiredPaymentMethods: false,
+  displayDefaultSavedPaymentIcon: true,
 }
 let getLayout = (str, logger) => {
   switch str {
@@ -875,6 +879,7 @@ let createCustomerObjArr = dict => {
         paymentMethodType: getPaymentMethodType(dict),
         defaultPaymentMethodSet: getBool(dict, "default_payment_method_set", false),
         requiresCvv: getBool(dict, "requires_cvv", true),
+        lastUsedAt: getString(dict, "last_used_at", ""),
       }
     })
   LoadedSavedCards(customerPaymentMethods, isGuestCustomer)
@@ -897,6 +902,7 @@ let getCustomerMethods = (dict, str) => {
           paymentMethodType: getPaymentMethodType(dict),
           defaultPaymentMethodSet: getBool(dict, "default_payment_method_set", false),
           requiresCvv: getBool(dict, "requires_cvv", true),
+          lastUsedAt: getString(dict, "last_used_at", ""),
         }
       })
     LoadedSavedCards(customerPaymentMethods, false)
@@ -979,6 +985,7 @@ let itemToObjMapper = (dict, logger) => {
       "savedPaymentMethodsHeaderText",
       "hideExpiredPaymentMethods",
       "branding",
+      "displayDefaultSavedPaymentIcon",
     ],
     dict,
     "options",
@@ -1020,6 +1027,7 @@ let itemToObjMapper = (dict, logger) => {
     paymentMethodsHeaderText: ?getOptionString(dict, "paymentMethodsHeaderText"),
     savedPaymentMethodsHeaderText: ?getOptionString(dict, "savedPaymentMethodsHeaderText"),
     hideExpiredPaymentMethods: getBool(dict, "hideExpiredPaymentMethods", false),
+    displayDefaultSavedPaymentIcon: getBool(dict, "displayDefaultSavedPaymentIcon", true),
   }
 }
 

src/Utilities/DynamicFieldsUtils.res

@@ -818,6 +818,9 @@ let getApplePayRequiredFields = (
       addressLines->Array.get(index)->Option.getOr("")
     }
 
+    let billingCountryCode = billingContact.countryCode->String.toUpperCase
+    let shippingCountryCode = shippingContact.countryCode->String.toUpperCase
+
     let fieldVal = switch item.field_type {
     | FullName
     | BillingName =>
@@ -833,11 +836,10 @@ let getApplePayRequiredFields = (
       Utils.getStateNameFromStateCodeAndCountry(
         statesList,
         billingContact.administrativeArea,
-        billingContact.countryCode,
+        billingCountryCode,
       )
     | Country
-    | AddressCountry(_) =>
-      billingContact.countryCode
+    | AddressCountry(_) => billingCountryCode
     | AddressPincode => billingContact.postalCode
     | Email => shippingContact.emailAddress
     | PhoneNumber => shippingContact.phoneNumber
@@ -849,9 +851,9 @@ let getApplePayRequiredFields = (
       Utils.getStateNameFromStateCodeAndCountry(
         statesList,
         shippingContact.administrativeArea,
-        shippingContact.countryCode,
+        shippingCountryCode,
       )
-    | ShippingAddressCountry(_) => shippingContact.countryCode
+    | ShippingAddressCountry(_) => shippingCountryCode
     | ShippingAddressPincode => shippingContact.postalCode
     | _ => ""
     }

src/Utilities/PaymentUtils.res

@@ -5,7 +5,8 @@ let paymentListLookupNew = (
   ~order,
   ~isShowPaypal,
   ~isShowKlarnaOneClick,
-  ~isKlarnaRedirectFlow,
+  ~isKlarnaSDKFlow,
+  ~paymentMethodListValue: PaymentMethodsRecord.paymentMethodList,
 ) => {
   let pmList = list->PaymentMethodsRecord.buildFromPaymentList
   let walletsList = []
@@ -43,8 +44,21 @@ let paymentListLookupNew = (
     } else if item.methodType == "reward" {
       otherPaymentList->Array.push(item.paymentMethodName)->ignore
     } else if item.methodType == "pay_later" {
-      if item.paymentMethodName === "klarna" && !isKlarnaRedirectFlow && isShowKlarnaOneClick {
-        walletsList->Array.push(item.paymentMethodName)->ignore
+      if item.paymentMethodName === "klarna" {
+        let klarnaPaymentMethodExperience = PaymentMethodsRecord.getPaymentExperienceTypeFromPML(
+          ~paymentMethodList=paymentMethodListValue,
+          ~paymentMethodName=item.methodType,
+          ~paymentMethodType=item.paymentMethodName,
+        )
+
+        let isInvokeSDKExperience = klarnaPaymentMethodExperience->Array.includes(InvokeSDK)
+        let isRedirectExperience = klarnaPaymentMethodExperience->Array.includes(RedirectToURL)
+
+        if isKlarnaSDKFlow && isShowKlarnaOneClick && isInvokeSDKExperience {
+          walletsList->Array.push(item.paymentMethodName)->ignore
+        } else if isRedirectExperience {
+          otherPaymentList->Array.push(item.paymentMethodName)->ignore
+        }
       } else {
         otherPaymentList->Array.push(item.paymentMethodName)->ignore
       }
@@ -265,13 +279,13 @@ let useAreAllRequiredFieldsPrefilled = (
   })
 }
 
-let getIsKlarnaRedirectFlow = sessions => {
+let getIsKlarnaSDKFlow = sessions => {
   let dict = sessions->Utils.getDictFromJson
   let sessionObj = SessionsType.itemToObjMapper(dict, Others)
   let klarnaTokenObj = SessionsType.getPaymentSessionObj(sessionObj.sessionsToken, Klarna)
   switch klarnaTokenObj {
-  | OtherTokenOptional(optToken) => optToken->Option.isNone
-  | _ => true
+  | OtherTokenOptional(optToken) => optToken->Option.isSome
+  | _ => false
   }
 }
 
@@ -286,13 +300,7 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
 
   let paymentOrder = paymentMethodOrder->getOptionalArr->removeDuplicate
 
-  let isKlarnaRedirectFlow = getIsKlarnaRedirectFlow(sessions)
-
-  let filterPaymentMethods = (paymentOptionsList: array<string>, ~isKlarnaRedirectFlow) => {
-    paymentOptionsList->Array.filter(paymentOptionsName =>
-      !(paymentOptionsName === "klarna" && !isKlarnaRedirectFlow)
-    )
-  }
+  let isKlarnaSDKFlow = getIsKlarnaSDKFlow(sessions)
 
   React.useMemo(() => {
     switch methodslist {
@@ -305,14 +313,30 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
           ~order=paymentOrder,
           ~isShowPaypal=optionAtomValue.wallets.payPal === Auto,
           ~isShowKlarnaOneClick=optionAtomValue.wallets.klarna === Auto,
-          ~isKlarnaRedirectFlow,
+          ~isKlarnaSDKFlow,
+          ~paymentMethodListValue=plist,
         )
+
+      let klarnaPaymentMethodExperience = PaymentMethodsRecord.getPaymentExperienceTypeFromPML(
+        ~paymentMethodList=plist,
+        ~paymentMethodName="pay_later",
+        ~paymentMethodType="klarna",
+      )
+
+      let isKlarnaInvokeSDKExperience = klarnaPaymentMethodExperience->Array.includes(InvokeSDK)
+
+      let filterPaymentMethods = (paymentOptionsList: array<string>) => {
+        paymentOptionsList->Array.filter(paymentOptionsName =>
+          !(paymentOptionsName === "klarna" && isKlarnaSDKFlow && isKlarnaInvokeSDKExperience)
+        )
+      }
+
       (
         wallets->removeDuplicate->Utils.getWalletPaymentMethod(paymentType),
         paymentOptions
         ->Array.concat(otherOptions)
         ->removeDuplicate
-        ->filterPaymentMethods(~isKlarnaRedirectFlow),
+        ->filterPaymentMethods,
         otherOptions,
       )
     | SemiLoaded =>
@@ -327,7 +351,7 @@ let useGetPaymentMethodList = (~paymentOptions, ~paymentType, ~sessions) => {
     optionAtomValue.wallets.payPal,
     optionAtomValue.wallets.klarna,
     paymentType,
-    isKlarnaRedirectFlow,
+    isKlarnaSDKFlow,
   ))
 }