feat: HS-181: Fixed card number icon not changing and resolving comments

juspay · Jan 12, 2024 · 5a697b3 · 5a697b3
1 parent 143dabd
commit 5a697b3
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 145 deletions.
diff --git a/src/CardUtils.res b/src/CardUtils.res
@@ -642,18 +642,18 @@ let getCvcDetailsFromCvcProps = cvcProps => {
 }
 
 let setRightIconForCvc = (~cardEmpty, ~cardInvalid, ~color, ~cardComplete) => {
-    if cardEmpty {
-      <Icon size=28 name="cvc-empty" />
-    } else if cardInvalid {
-      <div style={ReactDOMStyle.make(~color, ())}>
-        <Icon size=28 name="cvc-invalid" />
-      </div>
-    } else if cardComplete {
-      <Icon size=28 name="cvc-complete" />
-    } else {
-      <Icon size=28 name="cvc-empty" />
-    }
+  if cardEmpty {
+    <Icon size=28 name="cvc-empty" />
+  } else if cardInvalid {
+    <div style={ReactDOMStyle.make(~color, ())}>
+      <Icon size=28 name="cvc-invalid" />
+    </div>
+  } else if cardComplete {
+    <Icon size=28 name="cvc-complete" />
+  } else {
+    <Icon size=28 name="cvc-empty" />
   }
+}
 
 let getCardDetailsHook = (~cvcNumber, ~isCvcValidValue, ~isCVCValid) => {
   React.useMemo3(() => {

diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -76,7 +76,6 @@ let make = (
   let setAreRequiredFieldsValid = Recoil.useSetRecoilState(areRequiredFieldsValid)
   let setAreRequiredFieldsEmpty = Recoil.useSetRecoilState(areRequiredFieldsEmpty)
 
-  let (email, setEmail) = Recoil.useLoggedRecoilState(userEmailAddress, "email", logger)
   let (line1, setLine1) = Recoil.useLoggedRecoilState(userAddressline1, "line1", logger)
   let (line2, setLine2) = Recoil.useLoggedRecoilState(userAddressline2, "line2", logger)
   let (city, setCity) = Recoil.useLoggedRecoilState(userAddressCity, "city", logger)
@@ -87,15 +86,7 @@ let make = (
     logger,
   )
   let (postalCodes, setPostalCodes) = React.useState(_ => [PostalCodeType.defaultPostalCode])
-  let (fullName, setFullName) = Recoil.useLoggedRecoilState(userFullName, "fullName", logger)
-  let (blikCode, setBlikCode) = Recoil.useLoggedRecoilState(userBlikCode, "blikCode", logger)
-  let (phone, setPhone) = Recoil.useLoggedRecoilState(userPhoneNumber, "phone", logger)
   let (currency, setCurrency) = Recoil.useLoggedRecoilState(userCurrency, "currency", logger)
-  let (billingName, setBillingName) = Recoil.useLoggedRecoilState(
-    userBillingName,
-    "billingName",
-    logger,
-  )
   let line1Ref = React.useRef(Js.Nullable.null)
   let line2Ref = React.useRef(Js.Nullable.null)
   let cityRef = React.useRef(Js.Nullable.null)
@@ -238,21 +229,8 @@ let make = (
 
   DynamicFieldsUtils.requiredFieldsEmptyAndValidHook(
     ~fieldsArr,
-    ~country,
     ~countryNames,
-    ~selectedBank,
     ~bankNames,
-    ~currency,
-    ~email,
-    ~fullName,
-    ~billingName,
-    ~line1,
-    ~line2,
-    ~phone,
-    ~state,
-    ~city,
-    ~postalCode,
-    ~blikCode,
     ~isCardValid,
     ~isExpiryValid,
     ~isCVCValid,
@@ -271,52 +249,10 @@ let make = (
       item->Utils.getDictFromJson->PaymentMethodsRecord.getRequiredFieldsFromJson(isBancontact)
     )
 
-  DynamicFieldsUtils.setInitialRequiredFieldsHook(
-    ~requiredFieldsType,
-    ~email,
-    ~setEmail,
-    ~fullName,
-    ~setFullName,
-    ~line1,
-    ~setLine1,
-    ~line2,
-    ~setLine2,
-    ~state,
-    ~setState,
-    ~city,
-    ~setCity,
-    ~postalCode,
-    ~setPostalCode,
-    ~country,
-    ~setCountry,
-    ~paymentMethodType,
-    ~phone,
-    ~setPhone,
-    ~blikCode,
-    ~setBlikCode,
-    ~billingName,
-    ~setBillingName,
-    ~currency,
-    ~setCurrency,
-    ~selectedBank,
-    ~setSelectedBank,
-  )
+  DynamicFieldsUtils.setInitialRequiredFieldsHook(~requiredFieldsType, ~paymentMethodType)
 
   DynamicFieldsUtils.requiredFieldsBodyHook(
     ~requiredFieldsType,
-    ~email,
-    ~fullName,
-    ~billingName,
-    ~line1,
-    ~line2,
-    ~phone,
-    ~state,
-    ~city,
-    ~postalCode,
-    ~blikCode,
-    ~currency,
-    ~country,
-    ~selectedBank,
     ~paymentMethodType,
     ~cardNumber,
     ~cardExpiry,

diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
@@ -11,7 +11,7 @@ let make = (
   ~setRequiredFieldsBody,
 ) => {
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let (showFeilds, setShowFeilds) = Recoil.useRecoilState(RecoilAtoms.showCardFeildsAtom)
+  let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
   let (token, _) = paymentToken
   let savedCardlength = savedMethods->Js.Array2.length
   let bottomElement = {
@@ -46,7 +46,7 @@ let make = (
       className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow"
       style={ReactDOMStyle.make(~padding="5px", ())}>
       {if (
-        savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFeilds)
+        savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields)
       ) {
         <div
           className="Label flex flex-row gap-3 items-end cursor-pointer"
@@ -67,16 +67,22 @@ let make = (
           </PaymentElementShimmer.Shimmer>
         </div>
       } else {
-        <RenderIf condition={!showFeilds}>
+        <RenderIf condition={!showFields}>
           <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
+          paymentType
+          list
+          paymentMethod="card"
+          paymentMethodType="debit"
+          setRequiredFieldsBody
+          isSavedCardFlow=true
+          savedCards=savedMethods
         />
       </RenderIf>
-      <RenderIf condition={!showFeilds}>
+      <RenderIf condition={!showFields}>
         <div
           className="Label flex flex-row gap-3 items-end cursor-pointer"
           style={ReactDOMStyle.make(
@@ -89,9 +95,10 @@ let make = (
             (),
           )}
           onClick={_ => {
-            setShowFeilds(._ => true)
+            setShowFields(._ => true)
           }}>
-          <Icon name="circle-plus" size=22 /> {React.string(localeString.addNewCard)}
+          <Icon name="circle-plus" size=22 />
+          {React.string(localeString.addNewCard)}
         </div>
       </RenderIf>
     </div>

diff --git a/src/Payment.res b/src/Payment.res
@@ -13,7 +13,8 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let keys = Recoil.useRecoilValueFromAtom(keys)
   let cardScheme = Recoil.useRecoilValueFromAtom(RecoilAtoms.cardBrand)
-  let showFeilds = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFeildsAtom)
+  let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
+  let selectedOption = Recoil.useRecoilValueFromAtom(selectedOptionAtom)
   let paymentToken = Recoil.useRecoilValueFromAtom(RecoilAtoms.paymentTokenAtom)
   let (token, _) = paymentToken
 
@@ -47,8 +48,11 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   let (cardBrand, maxCardLength) = React.useMemo3(() => {
     let brand = getCardBrand(cardNumber)
     let maxLength = getMaxLength(cardNumber)
-    (brand == "" && !showFeilds) || !showFeilds ? (cardScheme, maxLength) : (brand, maxLength)
-  }, (cardNumber, cardScheme, showFeilds))
+    let isNotBancontact = selectedOption !== "bancontact_card" && brand == ""
+    ((brand == "" && !showFields) || !showFields) && isNotBancontact
+      ? (cardScheme, maxLength)
+      : (brand, maxLength)
+  }, (cardNumber, cardScheme, showFields))
 
   let clientTimeZone = dateTimeFormat(.).resolvedOptions(.).timeZone
   let clientCountry = Utils.getClientCountry(clientTimeZone)
@@ -209,7 +213,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     setCardError(_ => "")
     setExpiryError(_ => "")
     None
-  }, (token, showFeilds))
+  }, (token, showFields))
 
   let submitValue = (_ev, confirmParam) => {
     let validFormat = switch paymentMode->getPaymentMode {

diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -62,7 +62,7 @@ let make = (
   )
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let (savedMethods, setSavedMethods) = React.useState(_ => [])
-  let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFeildsAtom)
+  let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
   let (paymentToken, setPaymentToken) = Recoil.useRecoilState(RecoilAtoms.paymentTokenAtom)
   let (token, _) = paymentToken
   let setComplete = Recoil.useSetRecoilState(RecoilAtoms.fieldsComplete)