Merge branch 'main' into email_phone_in_confirm_call

juspay · Sep 26, 2024 · d3c9d0d · d3c9d0d
2 parents f8deb8b + 0ac07a2
commit d3c9d0d
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+## [0.90.1](https://github.com/juspay/hyperswitch-web/compare/v0.90.0...v0.90.1) (2024-09-26)
+
+# [0.90.0](https://github.com/juspay/hyperswitch-web/compare/v0.89.2...v0.90.0) (2024-09-26)
+
+
+### Features
+
+* customMessageForCardTerms prop added ([#705](https://github.com/juspay/hyperswitch-web/issues/705)) ([c30558f](https://github.com/juspay/hyperswitch-web/commit/c30558f8d772e54d7bf68aaff89d52dad89e73e9))
+
+## [0.89.2](https://github.com/juspay/hyperswitch-web/compare/v0.89.1...v0.89.2) (2024-09-25)
+
+
+### Bug Fixes
+
+* styling issues ([#696](https://github.com/juspay/hyperswitch-web/issues/696)) ([764d526](https://github.com/juspay/hyperswitch-web/commit/764d526c69b7b9ec9b79b084fa0b6a50aab8e86a))
+
 ## [0.89.1](https://github.com/juspay/hyperswitch-web/compare/v0.89.0...v0.89.1) (2024-09-24)
 
 # [0.89.0](https://github.com/juspay/hyperswitch-web/compare/v0.88.5...v0.89.0) (2024-09-24)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.89.1",
+  "version": "0.90.1",
   "main": "index.js",
   "private": true,
   "dependencies": {

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -317,7 +317,6 @@ let make = (
       (dynamicFieldsToRenderInsideBilling->Array.length > 1 || !isOnlyInfoElementPresent)
 
   let spacedStylesForBiilingDetails = isSpacedInnerLayout ? "p-2" : "my-2"
-  let spacedStylesForCity = isSpacedInnerLayout ? "p-2" : ""
 
   <RenderIf condition={fieldsArr->Array.length > 0}>
     {<>
@@ -511,9 +510,10 @@ let make = (
             {React.string(localeString.billingDetailsText)}
           </div>
           <div
-            className={`${spacedStylesForCity} flex flex-col ${isSpacedInnerLayout
-                ? "gap-2"
-                : ""}`}>
+            className={`flex flex-col`}
+            style={
+              gap: isSpacedInnerLayout ? themeObj.spacingGridRow : "",
+            }>
             {dynamicFieldsToRenderInsideBilling
             ->Array.mapWithIndex((item, index) => {
               <div
@@ -524,15 +524,15 @@ let make = (
                 | Email => <EmailPaymentInput paymentType />
                 | PhoneNumber => <PhoneNumberPaymentInput />
                 | StateAndCity =>
-                  <div className={`flex ${isSpacedInnerLayout ? "gap-1" : ""}`}>
+                  <div className={`flex ${isSpacedInnerLayout ? "gap-4" : ""}`}>
                     <PaymentField
                       fieldName=localeString.cityLabel
                       setValue={setCity}
                       value=city
                       onChange={ev => {
                         let value = ReactEvent.Form.target(ev)["value"]
                         setCity(prev => {
-                          isValid: value !== "" ? Some(true) : Some(false),
+                          isValid: Some(value !== ""),
                           value,
                           errorString: value !== "" ? "" : prev.errorString,
                         })
@@ -569,7 +569,7 @@ let make = (
                 | CountryAndPincode(countryArr) =>
                   let updatedCountryArray =
                     countryArr->DropdownField.updateArrayOfStringToOptionsTypeArray
-                  <div className={`flex ${isSpacedInnerLayout ? "gap-1" : ""}`}>
+                  <div className={`flex ${isSpacedInnerLayout ? "gap-4" : ""}`}>
                     <DropdownField
                       appearance=config.appearance
                       fieldName=localeString.countryLabel
@@ -606,7 +606,7 @@ let make = (
                     onChange={ev => {
                       let value = ReactEvent.Form.target(ev)["value"]
                       setLine1(prev => {
-                        isValid: value !== "" ? Some(true) : Some(false),
+                        isValid: Some(value !== ""),
                         value,
                         errorString: value !== "" ? "" : prev.errorString,
                       })
@@ -633,7 +633,7 @@ let make = (
                     onChange={ev => {
                       let value = ReactEvent.Form.target(ev)["value"]
                       setLine2(prev => {
-                        isValid: value !== "" ? Some(true) : Some(false),
+                        isValid: Some(value !== ""),
                         value,
                         errorString: value !== "" ? "" : prev.errorString,
                       })
@@ -659,7 +659,7 @@ let make = (
                     onChange={ev => {
                       let value = ReactEvent.Form.target(ev)["value"]
                       setCity(prev => {
-                        isValid: value !== "" ? Some(true) : Some(false),
+                        isValid: Some(value !== ""),
                         value,
                         errorString: value !== "" ? "" : prev.errorString,
                       })

diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
@@ -2,7 +2,7 @@
 let make = (~isChecked, ~setIsChecked) => {
   let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
-  let {business} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+  let {business, customMessageForCardTerms} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
 
   let css = `.container {
   display: flex;
@@ -50,6 +50,8 @@ let make = (~isChecked, ~setIsChecked) => {
 
   let saveCardCheckboxLabel = if showFields {
     localeString.saveCardDetails
+  } else if customMessageForCardTerms->String.length > 0 {
+    customMessageForCardTerms
   } else {
     localeString.cardTerms(business.name)
   }

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
@@ -46,24 +46,24 @@ let make = (
   let {paymentToken: paymentTokenVal, customerId} = paymentToken
 
   let bottomElement = {
-    savedMethods
-    ->Array.mapWithIndex((obj, i) => {
-      let brandIcon = obj->getPaymentMethodBrand
-      let isActive = paymentTokenVal == obj.paymentToken
-      <SavedCardItem
-        key={i->Int.toString}
-        setPaymentToken
-        isActive
-        paymentItem=obj
-        brandIcon
-        index=i
-        savedCardlength
-        cvcProps
-        paymentType
-        setRequiredFieldsBody
-      />
-    })
-    ->React.array
+    <div className="PickerItemContainer">
+      {savedMethods
+      ->Array.mapWithIndex((obj, i) =>
+        <SavedCardItem
+          key={i->Int.toString}
+          setPaymentToken
+          isActive={paymentTokenVal == obj.paymentToken}
+          paymentItem=obj
+          brandIcon={obj->getPaymentMethodBrand}
+          index=i
+          savedCardlength
+          cvcProps
+          paymentType
+          setRequiredFieldsBody
+        />
+      )
+      ->React.array}
+    </div>
   }
 
   let (isCVCValid, _, cvcNumber, _, _, _, _, _, _, setCvcError) = cvcProps
@@ -160,7 +160,11 @@ let make = (
         | Some("apple_pay") =>
           switch applePayToken {
           | ApplePayTokenOptional(optToken) =>
-            ApplePayHelpers.handleApplePayButtonClicked(~sessionObj=optToken, ~componentName, ~paymentMethodListValue)
+            ApplePayHelpers.handleApplePayButtonClicked(
+              ~sessionObj=optToken,
+              ~componentName,
+              ~paymentMethodListValue,
+            )
           | _ =>
             // TODO - To be replaced with proper error message
             intent(

diff --git a/src/Components/Terms.res b/src/Components/Terms.res
@@ -1,18 +1,18 @@
-open PaymentModeType
-open PaymentType
-
 @react.component
-let make = (~mode) => {
-  let {localeString, themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+let make = (~mode: PaymentModeType.payment) => {
+  open RecoilAtoms
+  let {localeString, themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {customMessageForCardTerms, business, terms} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let cardTermsValue =
+    customMessageForCardTerms->String.length > 0
+      ? customMessageForCardTerms
+      : localeString.cardTerms(business.name)
+
   let terms = switch mode {
-  | ACHBankDebit => (
-      localeString.achBankDebitTerms(options.business.name),
-      options.terms.usBankAccount,
-    )
-  | SepaBankDebit => (localeString.sepaDebitTerms(options.business.name), options.terms.sepaDebit)
-  | BecsBankDebit => (localeString.becsDebitTerms, options.terms.auBecsDebit)
-  | Card => (localeString.cardTerms(options.business.name), options.terms.card)
+  | ACHBankDebit => (localeString.achBankDebitTerms(business.name), terms.usBankAccount)
+  | SepaBankDebit => (localeString.sepaDebitTerms(business.name), terms.sepaDebit)
+  | BecsBankDebit => (localeString.becsDebitTerms, terms.auBecsDebit)
+  | Card => (cardTermsValue, terms.card)
   | _ => ("", Auto)
   }
   let (termsText, showTerm) = terms

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -262,7 +262,7 @@ let make = (
               style={
                 gridColumnGap: {innerLayout === Spaced ? themeObj.spacingGridRow : ""},
               }>
-              <div className={innerLayout === Spaced ? "w-[45%]" : "w-[50%]"}>
+              <div className={innerLayout === Spaced ? "w-[47%]" : "w-[50%]"}>
                 <PaymentInputField
                   fieldName=localeString.validThruText
                   isValid=isExpiryValid
@@ -280,7 +280,7 @@ let make = (
                   name=TestUtils.expiryInputTestId
                 />
               </div>
-              <div className={innerLayout === Spaced ? "w-[45%]" : "w-[50%]"}>
+              <div className={innerLayout === Spaced ? "w-[47%]" : "w-[50%]"}>
                 <PaymentInputField
                   fieldName=localeString.cvcTextLabel
                   isValid=isCVCValid

diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
@@ -47,6 +47,13 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
     () => getPaymentSessionObj(sessionObj.sessionsToken, Paypal),
     [sessionObj],
   )
+  let paypalPaymentMethodExperience = React.useMemo(() => {
+    PaymentMethodsRecord.getPaymentExperienceTypeFromPML(
+      ~paymentMethodList=paymentMethodListValue,
+      ~paymentMethodName="wallet",
+      ~paymentMethodType="paypal",
+    )
+  }, [paymentMethodListValue])
   let gPayToken = getPaymentSessionObj(sessionObj.sessionsToken, Gpay)
   let applePaySessionObj = itemToObjMapper(dict, ApplePayObject)
   let applePayToken = getPaymentSessionObj(applePaySessionObj.sessionsToken, ApplePay)
@@ -60,6 +67,8 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
   let klarnaTokenObj = SessionsType.getPaymentSessionObj(sessionObj.sessionsToken, Klarna)
 
   let {clientSecret} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
+  let isPaypalSDKFlow = paypalPaymentMethodExperience->Array.includes(InvokeSDK)
+  let isPaypalRedirectFlow = paypalPaymentMethodExperience->Array.includes(RedirectToURL)
 
   <div className="flex flex-col gap-2 h-auto w-full">
     {walletOptions
@@ -99,11 +108,15 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
               <SessionPaymentWrapper type_={Wallet}>
                 {switch paypalToken {
                 | OtherTokenOptional(optToken) =>
-                  switch optToken {
-                  | Some(token) => <PaypalSDKLazy sessionObj=token paymentType />
-                  | None => <PayPalLazy />
+                  switch (optToken, isPaypalSDKFlow, isPaypalRedirectFlow) {
+                  | (Some(token), true, _) => <PaypalSDKLazy sessionObj=token paymentType />
+                  | (_, _, true) => <PayPalLazy />
+                  | _ => React.null
                   }
-                | _ => <PayPalLazy />
+                | _ =>
+                  <RenderIf condition={isPaypalRedirectFlow}>
+                    <PayPalLazy />
+                  </RenderIf>
                 }}
               </SessionPaymentWrapper>
             | ApplePayWallet =>

diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
@@ -172,6 +172,7 @@ type options = {
   hideExpiredPaymentMethods: bool,
   displayDefaultSavedPaymentIcon: bool,
   hideCardNicknameField: bool,
+  customMessageForCardTerms: string,
 }
 
 type payerDetails = {
@@ -316,6 +317,7 @@ let defaultOptions = {
   hideExpiredPaymentMethods: false,
   displayDefaultSavedPaymentIcon: true,
   hideCardNicknameField: false,
+  customMessageForCardTerms: "",
 }
 
 let getLayout = (str, logger) => {
@@ -1016,6 +1018,7 @@ let itemToObjMapper = (dict, logger) => {
       "branding",
       "displayDefaultSavedPaymentIcon",
       "hideCardNicknameField",
+      "customMessageForCardTerms",
     ],
     dict,
     "options",
@@ -1060,6 +1063,7 @@ let itemToObjMapper = (dict, logger) => {
     hideExpiredPaymentMethods: getBool(dict, "hideExpiredPaymentMethods", false),
     displayDefaultSavedPaymentIcon: getBool(dict, "displayDefaultSavedPaymentIcon", true),
     hideCardNicknameField: getBool(dict, "hideCardNicknameField", false),
+    customMessageForCardTerms: getString(dict, "customMessageForCardTerms", ""),
   }
 }