From 4fee41f821fd06a63c577d34fe925b21de7de9d5 Mon Sep 17 00:00:00 2001 From: ArushKapoorJuspay <121166031+ArushKapoorJuspay@users.noreply.github.com> Date: Mon, 22 Jan 2024 18:17:55 +0530 Subject: [PATCH] fix: HS-180: Added check on last name for Dynamic Fields (#71) --- src/Components/BillingNamePaymentInput.res | 13 ++- src/Components/DynamicFields.res | 9 ++- src/Components/FullNamePaymentInput.res | 13 ++- src/Utilities/DynamicFieldsUtils.res | 93 +++++++++++++--------- 4 files changed, 87 insertions(+), 41 deletions(-) diff --git a/src/Components/BillingNamePaymentInput.res b/src/Components/BillingNamePaymentInput.res index c29b23b13..238fc0796 100644 --- a/src/Components/BillingNamePaymentInput.res +++ b/src/Components/BillingNamePaymentInput.res @@ -3,7 +3,7 @@ open PaymentType open Utils @react.component -let make = (~paymentType, ~customFieldName=None) => { +let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None, ()) => { let {localeString} = Recoil.useRecoilValueFromAtom(configAtom) let {fields} = Recoil.useRecoilValueFromAtom(optionAtom) let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom) @@ -39,6 +39,17 @@ let make = (~paymentType, ~customFieldName=None) => { ...prev, errorString: `Please provide your ${fieldName}`, }) + } else { + switch optionalRequiredFields { + | Some(requiredFields) => + if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, BillingName, billingName) { + setBillingName(.prev => { + ...prev, + errorString: `Please provide your complete ${fieldName}`, + }) + } + | None => () + } } } }, [billingName]) diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res index ebb9c5dfd..c384c85be 100644 --- a/src/Components/DynamicFields.res +++ b/src/Components/DynamicFields.res @@ -220,6 +220,7 @@ let make = ( } DynamicFieldsUtils.useRequiredFieldsEmptyAndValid( + ~requiredFields, ~fieldsArr, ~countryNames, ~bankNames, @@ -449,11 +450,15 @@ let make = ( {switch item { | FullName => getCustomFieldName} + paymentType + customFieldName={item->getCustomFieldName} + optionalRequiredFields={Some(requiredFields)} /> | BillingName => getCustomFieldName} + paymentType + customFieldName={item->getCustomFieldName} + optionalRequiredFields={Some(requiredFields)} /> | Email => | PhoneNumber => diff --git a/src/Components/FullNamePaymentInput.res b/src/Components/FullNamePaymentInput.res index b0fc66982..34c221abc 100644 --- a/src/Components/FullNamePaymentInput.res +++ b/src/Components/FullNamePaymentInput.res @@ -3,7 +3,7 @@ open PaymentType open Utils @react.component -let make = (~paymentType, ~customFieldName=None) => { +let make = (~paymentType, ~customFieldName=None, ~optionalRequiredFields=None) => { let {localeString} = Recoil.useRecoilValueFromAtom(configAtom) let {fields} = Recoil.useRecoilValueFromAtom(optionAtom) let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom) @@ -35,6 +35,17 @@ let make = (~paymentType, ~customFieldName=None) => { ...prev, errorString: `Please provide your ${fieldName}`, }) + } else { + switch optionalRequiredFields { + | Some(requiredFields) => + if !DynamicFieldsUtils.checkIfNameIsValid(requiredFields, FullName, fullName) { + setFullName(.prev => { + ...prev, + errorString: `Please provide your complete ${fieldName}`, + }) + } + | None => () + } } } }, [fullName]) diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res index e9897e405..be003fbcd 100644 --- a/src/Utilities/DynamicFieldsUtils.res +++ b/src/Utilities/DynamicFieldsUtils.res @@ -71,7 +71,29 @@ let addBillingAddressIfUseBillingAddress = fieldsArr => { } } +let checkIfNameIsValid = ( + requiredFieldsType: array, + paymentMethodFields, + field: RecoilAtomTypes.field, +) => { + requiredFieldsType + ->Js.Array2.filter(required_field => required_field.field_type === paymentMethodFields) + ->Js.Array2.reduce((acc, item) => { + let fieldNameArr = field.value->Js.String2.split(" ") + let requiredFieldsArr = item.required_field->Js.String2.split(".") + let fieldValue = switch requiredFieldsArr + ->Belt.Array.get(requiredFieldsArr->Belt.Array.length - 1) + ->Belt.Option.getWithDefault("") { + | "first_name" => fieldNameArr->Belt.Array.get(0)->Belt.Option.getWithDefault("") + | "last_name" => fieldNameArr->Belt.Array.get(1)->Belt.Option.getWithDefault("") + | _ => field.value + } + acc && fieldValue !== "" + }, true) +} + let useRequiredFieldsEmptyAndValid = ( + ~requiredFields, ~fieldsArr: Js.Array2.t, ~countryNames, ~bankNames, @@ -101,43 +123,40 @@ let useRequiredFieldsEmptyAndValid = ( let fieldsArrWithBillingAddress = fieldsArr->addBillingAddressIfUseBillingAddress React.useEffect7(() => { - let areRequiredFieldsValid = - fieldsArrWithBillingAddress->Js.Array2.reduce((acc, paymentMethodFields) => { - acc && - switch paymentMethodFields { - | Email => email.isValid - | FullName => Some(fullName.value !== "") - | Country => Some(country !== "" || countryNames->Belt.Array.length === 0) - | AddressCountry(countryArr) => Some(country !== "" || countryArr->Belt.Array.length === 0) - | BillingName => Some(billingName.value !== "") - | AddressLine1 => Some(line1.value !== "") - | AddressLine2 => Some(line2.value !== "") - | Bank => Some(selectedBank !== "" || bankNames->Belt.Array.length === 0) - | PhoneNumber => Some(phone.value !== "") - | StateAndCity => Some(state.value !== "" && city.value !== "") - | CountryAndPincode(countryArr) => - Some( - (country !== "" || countryArr->Belt.Array.length === 0) && - postalCode.isValid->Belt.Option.getWithDefault(false), - ) - | AddressCity => Some(city.value !== "") - | AddressPincode => postalCode.isValid - | AddressState => Some(state.value !== "") - | BlikCode => Some(blikCode.value !== "") - | Currency(currencyArr) => Some(currency !== "" || currencyArr->Belt.Array.length === 0) - | CardNumber => isCardValid - | CardExpiryMonth - | CardExpiryYear - | CardExpiryMonthAndYear => isExpiryValid - | CardCvc => isCVCValid - | CardExpiryAndCvc => - Some( - isExpiryValid->Belt.Option.getWithDefault(false) && - isCVCValid->Belt.Option.getWithDefault(false), - ) - | _ => Some(true) - }->Belt.Option.getWithDefault(false) - }, true) + let areRequiredFieldsValid = fieldsArr->Js.Array2.reduce((acc, paymentMethodFields) => { + acc && + switch paymentMethodFields { + | Email => email.isValid->Belt.Option.getWithDefault(false) + | FullName => checkIfNameIsValid(requiredFields, paymentMethodFields, fullName) + | Country => country !== "" || countryNames->Belt.Array.length === 0 + | AddressCountry(countryArr) => country !== "" || countryArr->Belt.Array.length === 0 + | BillingName => checkIfNameIsValid(requiredFields, paymentMethodFields, billingName) + | AddressLine1 => line1.value !== "" + | AddressLine2 => line2.value !== "" + | Bank => selectedBank !== "" || bankNames->Belt.Array.length === 0 + | PhoneNumber => phone.value !== "" + | StateAndCity => state.value !== "" && city.value !== "" + | CountryAndPincode(countryArr) => + (country !== "" || countryArr->Belt.Array.length === 0) && + postalCode.isValid->Belt.Option.getWithDefault(false) + + | AddressCity => city.value !== "" + | AddressPincode => postalCode.isValid->Belt.Option.getWithDefault(false) + | AddressState => state.value !== "" + | BlikCode => blikCode.value !== "" + | Currency(currencyArr) => currency !== "" || currencyArr->Belt.Array.length === 0 + | CardNumber => isCardValid->Belt.Option.getWithDefault(false) + | CardExpiryMonth + | CardExpiryYear + | CardExpiryMonthAndYear => + isExpiryValid->Belt.Option.getWithDefault(false) + | CardCvc => isCVCValid->Belt.Option.getWithDefault(false) + | CardExpiryAndCvc => + isExpiryValid->Belt.Option.getWithDefault(false) && + isCVCValid->Belt.Option.getWithDefault(false) + | _ => true + } + }, true) setAreRequiredFieldsValid(._ => areRequiredFieldsValid) let areRequiredFieldsEmpty =