feat: HS-197: Added Address Element (#109)

juspay · Jan 22, 2024 · dd4a18a · dd4a18a
1 parent 303ba00
commit dd4a18a
Show file tree

Hide file tree

Showing 12 changed files with 465 additions and 361 deletions.
diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res
@@ -53,6 +53,7 @@ let make = (
             ~fontWeight=themeObj.fontWeightNormal,
             ~fontSize=themeObj.fontSizeLg,
             ~marginBottom="5px",
+            ~opacity="0.6",
             (),
           )}>
           {React.string(fieldName)}
@@ -90,6 +91,7 @@ let make = (
               ~fontSize={
                 inputFocused || value->Js.String2.length > 0 ? themeObj.fontSizeXs : ""
               },
+              ~opacity="0.6",
               (),
             )}>
             {React.string(fieldName)}

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -18,6 +18,8 @@ let make = (
     None
   }, [paymentMethodType])
 
+  let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
+
   //<...>//
   let paymentMethodTypes =
     PaymentMethodsRecord.getPaymentMethodTypeFromList(
@@ -26,29 +28,25 @@ let make = (
       ~paymentMethodType,
     )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType)
 
-  let requiredFields = if paymentMethod === "card" {
+  let requiredFieldsWithBillingDetails = if paymentMethod === "card" {
     let creditPaymentMethodsRecord =
       PaymentMethodsRecord.getPaymentMethodTypeFromList(
         ~list,
         ~paymentMethod,
         ~paymentMethodType="credit",
       )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType)
-    paymentMethodTypes.required_fields
-    ->Utils.getDictFromJson
-    ->Js.Dict.entries
-    ->Js.Array2.concat(
-      creditPaymentMethodsRecord.required_fields->Utils.getDictFromJson->Js.Dict.entries,
-    )
-    ->Js.Dict.fromArray
-    ->Js.Json.object_
+    paymentMethodTypes.required_fields->Js.Array2.concat(creditPaymentMethodsRecord.required_fields)
   } else if (
     PaymentMethodsRecord.dynamicFieldsEnabledPaymentMethods->Js.Array2.includes(paymentMethodType)
   ) {
     paymentMethodTypes.required_fields
   } else {
-    Js.Json.null
+    []
   }
 
+  let requiredFields =
+    requiredFieldsWithBillingDetails->DynamicFieldsUtils.removeBillingDetailsIfUseBillingAddress
+
   let isAllStoredCardsHaveName = React.useMemo1(() => {
     PaymentType.getIsAllStoredCardsHaveName(savedCards)
   }, [savedCards])
@@ -60,22 +58,16 @@ let make = (
       requiredFields,
       ~isSavedCardFlow,
       ~isAllStoredCardsHaveName,
-      ~isBancontact,
       (),
     )
-    ->Utils.removeDuplicate
-    ->Js.Array2.filter(item => item !== None)
-    ->PaymentUtils.updateDynamicFields()
+    ->DynamicFieldsUtils.updateDynamicFields()
     ->Belt.SortArray.stableSortBy(PaymentMethodsRecord.sortPaymentMethodFields)
   //<...>//
 
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
 
   let logger = Recoil.useRecoilValueFromAtom(loggerAtom)
 
-  let setAreRequiredFieldsValid = Recoil.useSetRecoilState(areRequiredFieldsValid)
-  let setAreRequiredFieldsEmpty = Recoil.useSetRecoilState(areRequiredFieldsEmpty)
-
   let (line1, setLine1) = Recoil.useLoggedRecoilState(userAddressline1, "line1", logger)
   let (line2, setLine2) = Recoil.useLoggedRecoilState(userAddressline2, "line2", logger)
   let (city, setCity) = Recoil.useLoggedRecoilState(userAddressCity, "city", logger)
@@ -239,18 +231,15 @@ let make = (
     ~cvcNumber,
   )
 
-  let requiredFieldsType =
-    requiredFields
-    ->Utils.getDictFromJson
-    ->Js.Dict.values
-    ->Js.Array2.map(item =>
-      item->Utils.getDictFromJson->PaymentMethodsRecord.getRequiredFieldsFromJson(isBancontact)
-    )
-
-  DynamicFieldsUtils.useSetInitialRequiredFields(~requiredFieldsType, ~paymentMethodType)
+  DynamicFieldsUtils.useSetInitialRequiredFields(
+    ~requiredFields={
+      billingAddress.usePrefilledValues === Auto ? requiredFieldsWithBillingDetails : requiredFields
+    },
+    ~paymentMethodType,
+  )
 
   DynamicFieldsUtils.useRequiredFieldsBody(
-    ~requiredFieldsType,
+    ~requiredFields,
     ~paymentMethodType,
     ~cardNumber,
     ~cardExpiry,
@@ -264,7 +253,7 @@ let make = (
 
   let getCustomFieldName = (item: PaymentMethodsRecord.paymentMethodsFields) => {
     if (
-      requiredFieldsType
+      requiredFields
       ->Js.Array2.filter(requiredFieldType =>
         requiredFieldType.field_type === item &&
           requiredFieldType.display_name === "card_holder_name"
@@ -279,12 +268,12 @@ let make = (
 
   let dynamicFieldsToRenderOutsideBilling =
     fieldsArr->Js.Array2.filter(field =>
-      PaymentMethodsRecord.dynamicFieldsToRenderOutsideBilling->Js.Array2.includes(field)
+      field->DynamicFieldsUtils.isFieldTypeToRenderOutsideBilling
     )
 
   let dynamicFieldsToRenderInsideBilling =
     fieldsArr->Js.Array2.filter(field =>
-      !(PaymentMethodsRecord.dynamicFieldsToRenderOutsideBilling->Js.Array2.includes(field))
+      !(field->DynamicFieldsUtils.isFieldTypeToRenderOutsideBilling)
     )
 
   let isInfoElementPresent = dynamicFieldsToRenderInsideBilling->Js.Array2.includes(InfoElement)
@@ -410,6 +399,15 @@ let make = (
                     placeholder="123"
                   />
                 </div>
+              | Currency(currencyArr) =>
+                <DropdownField
+                  appearance=config.appearance
+                  fieldName=localeString.currencyLabel
+                  value=currency
+                  setValue=setCurrency
+                  disabled=false
+                  options=currencyArr
+                />
               | Email
               | FullName
               | InfoElement
@@ -427,8 +425,7 @@ let make = (
               | BlikCode
               | SpecialField(_)
               | CountryAndPincode(_)
-              | AddressCountry(_)
-              | Currency(_) => React.null
+              | AddressCountry(_) => React.null
               }}
             </div>
           })
@@ -596,15 +593,6 @@ let make = (
                         placeholder=localeString.postalCodeLabel
                       />
                     | BlikCode => <BlikCodePaymentInput />
-                    | Currency(currencyArr) =>
-                      <DropdownField
-                        appearance=config.appearance
-                        fieldName=localeString.currencyLabel
-                        value=currency
-                        setValue=setCurrency
-                        disabled=false
-                        options=currencyArr
-                      />
                     | Country =>
                       <DropdownField
                         appearance=config.appearance
@@ -648,6 +636,7 @@ let make = (
                     | CardExpiryMonthAndYear
                     | CardCvc
                     | CardExpiryAndCvc
+                    | Currency(_)
                     | None => React.null
                     }}
                   </div>

diff --git a/src/Components/PaymentDropDownField.res b/src/Components/PaymentDropDownField.res
@@ -77,6 +77,7 @@ let make = (
             ~fontWeight=themeObj.fontWeightNormal,
             ~fontSize=themeObj.fontSizeLg,
             ~marginBottom="5px",
+            ~opacity="0.6",
             (),
           )}>
           {React.string(fieldName)}
@@ -114,21 +115,7 @@ let make = (
               ~fontSize={
                 inputFocused || value.value->Js.String2.length > 0 ? themeObj.fontSizeXs : ""
               },
-              (),
-            )}>
-            {React.string(fieldName)}
-          </div>
-        </RenderIf>
-        <RenderIf condition={config.appearance.labels == Floating}>
-          <div
-            className={`Label ${floatinglabelClass} absolute bottom-0 ml-3 ${focusClass}`}
-            style={ReactDOMStyle.make(
-              ~marginBottom={
-                inputFocused || value.value->Js.String2.length > 0 ? "" : themeObj.spacingUnit
-              },
-              ~fontSize={
-                inputFocused || value.value->Js.String2.length > 0 ? themeObj.fontSizeXs : ""
-              },
+              ~opacity="0.6",
               (),
             )}>
             {React.string(fieldName)}

diff --git a/src/Components/PaymentField.res b/src/Components/PaymentField.res
@@ -84,6 +84,7 @@ let make = (
           ~fontWeight=themeObj.fontWeightNormal,
           ~fontSize=themeObj.fontSizeLg,
           ~marginBottom="5px",
+          ~opacity="0.6",
           (),
         )}>
         {React.string(fieldName)}
@@ -124,6 +125,7 @@ let make = (
               ~fontSize={
                 inputFocused || value.value->Js.String2.length > 0 ? themeObj.fontSizeXs : ""
               },
+              ~opacity="0.6",
               (),
             )}>
             {React.string(fieldName)}

diff --git a/src/Components/PaymentInputField.res b/src/Components/PaymentInputField.res
@@ -83,6 +83,7 @@ let make = (
           ~fontWeight=themeObj.fontWeightNormal,
           ~fontSize=themeObj.fontSizeLg,
           ~marginBottom="5px",
+          ~opacity="0.6",
           (),
         )}>
         {React.string(fieldName)}
@@ -120,6 +121,7 @@ let make = (
                 inputFocused || value->Js.String2.length > 0 ? "" : themeObj.spacingUnit
               },
               ~fontSize={inputFocused || value->Js.String2.length > 0 ? themeObj.fontSizeXs : ""},
+              ~opacity="0.6",
               (),
             )}>
             {React.string(fieldName)}

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
@@ -71,17 +71,15 @@ let make = (
           <Block bottomElement padding="px-4 py-1" className="max-h-[309px] overflow-auto" />
         </RenderIf>
       }}
-      <RenderIf condition={list.payment_methods->Js.Array.length !== 0}>
-        <DynamicFields
-          paymentType
-          list
-          paymentMethod="card"
-          paymentMethodType="debit"
-          setRequiredFieldsBody
-          isSavedCardFlow=true
-          savedCards=savedMethods
-        />
-      </RenderIf>
+      <DynamicFields
+        paymentType
+        list
+        paymentMethod="card"
+        paymentMethodType="debit"
+        setRequiredFieldsBody
+        isSavedCardFlow=true
+        savedCards=savedMethods
+      />
       <RenderIf condition={!showFields}>
         <div
           className="Label flex flex-row gap-3 items-end cursor-pointer"

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -315,19 +315,17 @@ let make = (
               </div>
             </div>
           </RenderIf>
-          <RenderIf condition={list.payment_methods->Js.Array.length !== 0}>
-            <DynamicFields
-              paymentType
-              list
-              paymentMethod
-              paymentMethodType
-              setRequiredFieldsBody
-              cardProps={Some(cardProps)}
-              expiryProps={Some(expiryProps)}
-              cvcProps={Some(cvcProps)}
-              isBancontact
-            />
-          </RenderIf>
+          <DynamicFields
+            paymentType
+            list
+            paymentMethod
+            paymentMethodType
+            setRequiredFieldsBody
+            cardProps={Some(cardProps)}
+            expiryProps={Some(expiryProps)}
+            cvcProps={Some(cvcProps)}
+            isBancontact
+          />
           <RenderIf condition={!isBancontact && !options.disableSaveCards}>
             <div className="pt-4 pb-2 flex items-center justify-start">
               <AnimatedCheckbox isChecked=isSaveCardsChecked setIsChecked=setIsSaveCardsChecked />