From f97ae984152bc7d731b379d26a8e2f4910320e0b Mon Sep 17 00:00:00 2001 From: Arush Date: Tue, 16 Jan 2024 12:16:15 +0530 Subject: [PATCH] feat: HS-181: Fixed card number icon not changing and resolving comments --- src/CardUtils.res | 22 ++--- src/Components/DynamicFields.res | 68 +------------- src/Components/SavedMethods.res | 21 +++-- src/Payment.res | 12 ++- src/Payments/CardPayment.res | 2 +- src/Utilities/DynamicFieldsUtils.res | 135 +++++++++++++++------------ src/Utilities/RecoilAtoms.res | 2 +- 7 files changed, 113 insertions(+), 149 deletions(-) diff --git a/src/CardUtils.res b/src/CardUtils.res index 17224062..43bb270b 100644 --- a/src/CardUtils.res +++ b/src/CardUtils.res @@ -642,18 +642,18 @@ let getCvcDetailsFromCvcProps = cvcProps => { } let setRightIconForCvc = (~cardEmpty, ~cardInvalid, ~color, ~cardComplete) => { - if cardEmpty { - - } else if cardInvalid { -
- -
- } else if cardComplete { - - } else { - - } + if cardEmpty { + + } else if cardInvalid { +
+ +
+ } else if cardComplete { + + } else { + } +} let getCardDetailsHook = (~cvcNumber, ~isCvcValidValue, ~isCVCValid) => { React.useMemo3(() => { diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res index 9b5777bf..3082c058 100644 --- 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,29 +229,14 @@ let make = ( DynamicFieldsUtils.requiredFieldsEmptyAndValidHook( ~fieldsArr, - ~country, ~countryNames, - ~selectedBank, ~bankNames, - ~currency, - ~email, - ~fullName, - ~billingName, - ~line1, - ~line2, - ~phone, - ~state, - ~city, - ~postalCode, - ~blikCode, ~isCardValid, ~isExpiryValid, ~isCVCValid, ~cardNumber, ~cardExpiry, ~cvcNumber, - ~setAreRequiredFieldsValid, - ~setAreRequiredFieldsEmpty, ) let requiredFieldsType = @@ -271,52 +247,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 index f92f84c2..ce33cab9 100644 --- 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) ) {
} else { - + }} Js.Array.length !== 0}> - +
{ - setShowFeilds(._ => true) + setShowFields(._ => true) }}> - {React.string(localeString.addNewCard)} + + {React.string(localeString.addNewCard)}
diff --git a/src/Payment.res b/src/Payment.res index d1ab5200..74baac97 100644 --- 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 index 05d69151..0ba15cfa 100644 --- 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) diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res index 926e7f16..9d14c1a4 100644 --- a/src/Utilities/DynamicFieldsUtils.res +++ b/src/Utilities/DynamicFieldsUtils.res @@ -1,29 +1,30 @@ let requiredFieldsEmptyAndValidHook = ( ~fieldsArr: Js.Array2.t, - ~country, ~countryNames, - ~selectedBank, ~bankNames, - ~currency, - ~email: RecoilAtomTypes.field, - ~fullName: RecoilAtomTypes.field, - ~billingName: RecoilAtomTypes.field, - ~line1: RecoilAtomTypes.field, - ~line2: RecoilAtomTypes.field, - ~phone: RecoilAtomTypes.field, - ~state: RecoilAtomTypes.field, - ~city: RecoilAtomTypes.field, - ~postalCode: RecoilAtomTypes.field, - ~blikCode: RecoilAtomTypes.field, ~isCardValid, ~isExpiryValid, ~isCVCValid, ~cardNumber, ~cardExpiry, ~cvcNumber, - ~setAreRequiredFieldsValid, - ~setAreRequiredFieldsEmpty, ) => { + let email = Recoil.useRecoilValueFromAtom(RecoilAtoms.userEmailAddress) + let fullName = Recoil.useRecoilValueFromAtom(RecoilAtoms.userFullName) + let billingName = Recoil.useRecoilValueFromAtom(RecoilAtoms.userBillingName) + let line1 = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressline1) + let line2 = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressline2) + let phone = Recoil.useRecoilValueFromAtom(RecoilAtoms.userPhoneNumber) + let state = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressState) + let city = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressCity) + let postalCode = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressPincode) + let blikCode = Recoil.useRecoilValueFromAtom(RecoilAtoms.userBlikCode) + let country = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCountry) + let selectedBank = Recoil.useRecoilValueFromAtom(RecoilAtoms.userBank) + let currency = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCurrency) + let setAreRequiredFieldsValid = Recoil.useSetRecoilState(RecoilAtoms.areRequiredFieldsValid) + let setAreRequiredFieldsEmpty = Recoil.useSetRecoilState(RecoilAtoms.areRequiredFieldsEmpty) + React.useEffect7(() => { let areRequiredFieldsValid = fieldsArr->Js.Array2.reduce((acc, paymentMethodFields) => { acc && @@ -130,34 +131,51 @@ let requiredFieldsEmptyAndValidHook = ( let setInitialRequiredFieldsHook = ( ~requiredFieldsType: Js.Array2.t, - ~email: RecoilAtomTypes.field, - ~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 ) => { + let logger = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom) + let (email, setEmail) = Recoil.useLoggedRecoilState(RecoilAtoms.userEmailAddress, "email", logger) + let (fullName, setFullName) = Recoil.useLoggedRecoilState( + RecoilAtoms.userFullName, + "fullName", + logger, + ) + let (billingName, setBillingName) = Recoil.useLoggedRecoilState( + RecoilAtoms.userBillingName, + "billingName", + logger, + ) + let (line1, setLine1) = Recoil.useLoggedRecoilState(RecoilAtoms.userAddressline1, "line1", logger) + let (line2, setLine2) = Recoil.useLoggedRecoilState(RecoilAtoms.userAddressline2, "line2", logger) + let (phone, setPhone) = Recoil.useLoggedRecoilState(RecoilAtoms.userPhoneNumber, "phone", logger) + let (state, setState) = Recoil.useLoggedRecoilState(RecoilAtoms.userAddressState, "state", logger) + let (city, setCity) = Recoil.useLoggedRecoilState(RecoilAtoms.userAddressCity, "city", logger) + let (postalCode, setPostalCode) = Recoil.useLoggedRecoilState( + RecoilAtoms.userAddressPincode, + "postal_code", + logger, + ) + let (blikCode, setBlikCode) = Recoil.useLoggedRecoilState( + RecoilAtoms.userBlikCode, + "blikCode", + logger, + ) + let (country, setCountry) = Recoil.useLoggedRecoilState( + RecoilAtoms.userCountry, + "country", + logger, + ) + let (selectedBank, setSelectedBank) = Recoil.useLoggedRecoilState( + RecoilAtoms.userBank, + "selectedBank", + logger, + ) + let (currency, setCurrency) = Recoil.useLoggedRecoilState( + RecoilAtoms.userCurrency, + "currency", + logger, + ) + React.useEffect0(() => { let getNameValue = (item: PaymentMethodsRecord.required_fields) => { requiredFieldsType @@ -224,7 +242,7 @@ let setInitialRequiredFieldsHook = ( ->Js.Array2.filter(item => item.isoAlpha2 === value) ->Belt.Array.get(0) ->Belt.Option.getWithDefault(Country.defaultTimeZone) - setCountry(_ => countryCode.countryName) + setCountry(. _ => countryCode.countryName) } } | AddressState => setFields(setState, state, requiredField, false) @@ -241,15 +259,15 @@ let setInitialRequiredFieldsHook = ( ->Js.Array2.filter(item => item.isoAlpha2 === value) ->Belt.Array.get(0) ->Belt.Option.getWithDefault(Country.defaultTimeZone) - setCountry(_ => defaultCountry.countryName) + setCountry(. _ => defaultCountry.countryName) } | Currency(_) => if value !== "" && currency === "" { - setCurrency(_ => value) + setCurrency(. _ => value) } | Bank => if value !== "" && selectedBank === "" { - setSelectedBank(_ => value) + setSelectedBank(. _ => value) } | StateAndCity | CountryAndPincode(_) @@ -270,19 +288,6 @@ let setInitialRequiredFieldsHook = ( let requiredFieldsBodyHook = ( ~requiredFieldsType: Js.Array2.t, - ~email: RecoilAtomTypes.field, - ~fullName: RecoilAtomTypes.field, - ~billingName: RecoilAtomTypes.field, - ~line1: RecoilAtomTypes.field, - ~line2: RecoilAtomTypes.field, - ~phone: RecoilAtomTypes.field, - ~state: RecoilAtomTypes.field, - ~city: RecoilAtomTypes.field, - ~postalCode: RecoilAtomTypes.field, - ~blikCode: RecoilAtomTypes.field, - ~currency, - ~country, - ~selectedBank, ~paymentMethodType, ~cardNumber, ~cardExpiry, @@ -291,6 +296,20 @@ let requiredFieldsBodyHook = ( ~isAllStoredCardsHaveName, ~setRequiredFieldsBody, ) => { + let email = Recoil.useRecoilValueFromAtom(RecoilAtoms.userEmailAddress) + let fullName = Recoil.useRecoilValueFromAtom(RecoilAtoms.userFullName) + let billingName = Recoil.useRecoilValueFromAtom(RecoilAtoms.userBillingName) + let line1 = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressline1) + let line2 = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressline2) + let phone = Recoil.useRecoilValueFromAtom(RecoilAtoms.userPhoneNumber) + let state = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressState) + let city = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressCity) + let postalCode = Recoil.useRecoilValueFromAtom(RecoilAtoms.userAddressPincode) + let blikCode = Recoil.useRecoilValueFromAtom(RecoilAtoms.userBlikCode) + let country = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCountry) + let selectedBank = Recoil.useRecoilValueFromAtom(RecoilAtoms.userBank) + let currency = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCurrency) + React.useEffect1(() => { let getName = (item: PaymentMethodsRecord.required_fields, field: RecoilAtomTypes.field) => { let fieldNameArr = field.value->Js.String2.split(" ") diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res index 7018702e..90ccfe50 100644 --- a/src/Utilities/RecoilAtoms.res +++ b/src/Utilities/RecoilAtoms.res @@ -13,7 +13,7 @@ let isConfirmBlocked = Recoil.atom(. "isConfirmBlocked", false) let switchToCustomPod = Recoil.atom(. "switchToCustomPod", false) let selectedOptionAtom = Recoil.atom(. "selectedOption", "") let paymentTokenAtom = Recoil.atom(. "paymentToken", ("", "")) -let showCardFeildsAtom = Recoil.atom(. "showCardFeilds", false) +let showCardFieldsAtom = Recoil.atom(. "showCardFields", false) let phoneJson = Recoil.atom(. "phoneJson", Loading) let cardBrand = Recoil.atom(. "cardBrand", "")