feat: added upi collect payment method type (#491)

src/Components/DynamicFields.res

@@ -458,6 +458,7 @@ let make = (
             </>
           | CryptoCurrencyNetworks => <CryptoCurrencyNetworks />
           | DateOfBirth => <DateOfBirth />
+          | VpaId => <VpaIdPaymentInput paymentType />
           | Email
           | InfoElement
           | Country
@@ -765,6 +766,7 @@ let make = (
                 | CryptoCurrencyNetworks
                 | DateOfBirth
                 | PhoneCountryCode
+                | VpaId
                 | None => React.null
                 }}
               </div>

src/Components/VpaIdPaymentInput.res

@@ -0,0 +1,61 @@
+open RecoilAtoms
+open Utils
+
+@react.component
+let make = (~paymentType) => {
+  let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
+  let (vpaId, setVpaId) = Recoil.useLoggedRecoilState(userVpaId, "vpaId", loggerState)
+
+  let vpaIdRef = React.useRef(Nullable.null)
+
+  let changeVpaId = ev => {
+    let val: string = ReactEvent.Form.target(ev)["value"]
+    setVpaId(prev => {
+      value: val,
+      isValid: val->isVpaIdValid,
+      errorString: val->isVpaIdValid->Option.getOr(false) ? "" : prev.errorString,
+    })
+  }
+  let onBlur = ev => {
+    let val = ReactEvent.Focus.target(ev)["value"]
+    let isValid = val->isVpaIdValid
+    let errorString = switch isValid {
+    | Some(val) => val ? "" : localeString.vpaIdInvalidText
+    | None => ""
+    }
+
+    setVpaId(prev => {
+      ...prev,
+      isValid,
+      errorString,
+    })
+  }
+
+  let submitCallback = React.useCallback((ev: Window.event) => {
+    let json = ev.data->JSON.parseExn
+    let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
+    if confirm.doSubmit {
+      if vpaId.value == "" {
+        setVpaId(prev => {
+          ...prev,
+          errorString: localeString.vpaIdEmptyText,
+        })
+      }
+    }
+  }, [vpaId])
+  useSubmitPaymentData(submitCallback)
+
+  <PaymentField
+    fieldName=localeString.vpaIdLabel
+    setValue={setVpaId}
+    value=vpaId
+    onChange=changeVpaId
+    onBlur
+    paymentType
+    type_="text"
+    name="vpaId"
+    inputRef=vpaIdRef
+    placeholder="Eg: johndoe@upi"
+  />
+}

src/LocaleStrings/ArabicLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `شبكات العملات`,
   expiryPlaceholder: `MM / YY`,
   dateOfBirth: `تاريخ الميلاد`,
+  vpaIdLabel: `معرف VPA`,
+  vpaIdEmptyText: `لا يمكن أن يكون معرف Vpa فارغًا`,
+  vpaIdInvalidText: `معرف Vpa غير صالح`,
 }

src/LocaleStrings/CatalanLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Xarxes de Monedes`,
   expiryPlaceholder: `MM / AA`,
   dateOfBirth: `Data de naixement`,
+  vpaIdLabel: `Vpa Id`,
+  vpaIdEmptyText: `L'identificador de Vpa no pot estar buit`,
+  vpaIdInvalidText: `Identificador de VPA no vàlid`,
 }

src/LocaleStrings/DeutschLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Währungsnetzwerke`,
   expiryPlaceholder: `MM / JJ`,
   dateOfBirth: `Geburtsdatum`,
+  vpaIdLabel: `Vpa-ID`,
+  vpaIdEmptyText: `Die VPA-ID darf nicht leer sein`,
+  vpaIdInvalidText: `Ungültige VPA-ID`,
 }

src/LocaleStrings/DutchLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Valutanetwerken`,
   expiryPlaceholder: `MM / JJ`,
   dateOfBirth: `Geboortedatum`,
+  vpaIdLabel: `Vpa-id`,
+  vpaIdEmptyText: `Vpa-ID mag niet leeg zijn`,
+  vpaIdInvalidText: `Ongeldige Vpa-ID`,
 }

src/LocaleStrings/EnglishGBLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Currency Networks`,
   expiryPlaceholder: `MM / YY`,
   dateOfBirth: `Date of Birth`,
+  vpaIdLabel: `Vpa Id`,
+  vpaIdEmptyText: `Vpa Id cannot be empty`,
+  vpaIdInvalidText: `Invalid Vpa Id address`,
 }

src/LocaleStrings/EnglishLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Currency Networks`,
   expiryPlaceholder: `MM / YY`,
   dateOfBirth: `Date of Birth`,
+  vpaIdLabel: "Vpa Id",
+  vpaIdEmptyText: "Vpa Id cannot be empty",
+  vpaIdInvalidText: "Invalid Vpa Id address",
 }

src/LocaleStrings/FrenchBelgiumLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Réseaux Monétaires`,
   expiryPlaceholder: `MM / AA`,
   dateOfBirth: `Date de naissance`,
+  vpaIdLabel: `Identifiant Vpa`,
+  vpaIdEmptyText: `L'identifiant Vpa ne peut pas être vide`,
+  vpaIdInvalidText: `Identifiant Vpa invalide`,
 }

src/LocaleStrings/FrenchLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Réseaux Monétaires`,
   expiryPlaceholder: `MM / AA`,
   dateOfBirth: `Date de naissance`,
+  vpaIdLabel: `Identifiant Vpa`,
+  vpaIdEmptyText: `L'identifiant Vpa ne peut pas être vide`,
+  vpaIdInvalidText: `Identifiant Vpa invalide`,
 }

src/LocaleStrings/HebrewLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `רשתות מטבעות`,
   expiryPlaceholder: `MM / YY`,
   dateOfBirth: `תאריך לידה`,
+  vpaIdLabel: `מזהה VPA`,
+  vpaIdEmptyText: `מזהה VPA לא יכול להיות ריק`,
+  vpaIdInvalidText: `מזהה VPA לא חוקי`,
 }

src/LocaleStrings/ItalianLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Reti Valutarie`,
   expiryPlaceholder: `MM / AA`,
   dateOfBirth: `Data di nascita`,
+  vpaIdLabel: `Codice Vpa`,
+  vpaIdEmptyText: `L'ID Vpa non può essere vuoto`,
+  vpaIdInvalidText: `ID Vpa non valido`,
 }

src/LocaleStrings/JapaneseLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `通貨ネットワーク`,
   expiryPlaceholder: `MM / YY`,
   dateOfBirth: `生年月日`,
+  vpaIdLabel: `VPA ID`,
+  vpaIdEmptyText: `VPA ID を空にすることはできません`,
+  vpaIdInvalidText: `無効な VPA ID`,
 }

src/LocaleStrings/LocaleStringTypes.res

@@ -76,4 +76,7 @@ type localeStrings = {
   currencyNetwork: string,
   expiryPlaceholder: string,
   dateOfBirth: string,
+  vpaIdLabel: string,
+  vpaIdEmptyText: string,
+  vpaIdInvalidText: string,
 }

src/LocaleStrings/PolishLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Sieci Walutowe`,
   expiryPlaceholder: `MM / RR`,
   dateOfBirth: `Data urodzenia`,
+  vpaIdLabel: `Identyfikator Vpa`,
+  vpaIdEmptyText: `Identyfikator Vpa nie może być pusty`,
+  vpaIdInvalidText: `Nieprawidłowy identyfikator Vpa`,
 }

src/LocaleStrings/PortugueseLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Redes de Moeda`,
   expiryPlaceholder: `MM / AA`,
   dateOfBirth: `Data de nascimento`,
+  vpaIdLabel: `ID VPA`,
+  vpaIdEmptyText: `O ID Vpa não pode ficar vazio`,
+  vpaIdInvalidText: `ID Vpa inválido`,
 }

src/LocaleStrings/RussianLocale.res

@@ -89,4 +89,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Валютные сети`,
   expiryPlaceholder: `MM / ГГ`,
   dateOfBirth: `Дата рождения`,
+  vpaIdLabel: `Идентификатор ВПА`,
+  vpaIdEmptyText: `Идентификатор VPA не может быть пустым.`,
+  vpaIdInvalidText: `Неверный идентификатор VPA`,
 }

src/LocaleStrings/SpanishLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Redes de Divisas`,
   expiryPlaceholder: `MM / AA`,
   dateOfBirth: `Fecha de nacimiento`,
+  vpaIdLabel: `Identificación de Vpa`,
+  vpaIdEmptyText: `El ID de Vpa no puede estar vacío`,
+  vpaIdInvalidText: `ID de Vpa no válido`,
 }

src/LocaleStrings/SwedishLocale.res

@@ -85,4 +85,7 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   currencyNetwork: `Valutanätverk`,
   expiryPlaceholder: `MM / ÅÅ`,
   dateOfBirth: `Födelsedatum`,
+  vpaIdLabel: `Vpa-id`,
+  vpaIdEmptyText: `Vpa-id får inte vara tomt`,
+  vpaIdInvalidText: `Ogiltigt Vpa-ID`,
 }

src/Payments/PaymentMethodsRecord.res

@@ -37,6 +37,7 @@ type paymentMethodsFields =
   | ShippingAddressCountry(array<string>)
   | CryptoCurrencyNetworks
   | DateOfBirth
+  | VpaId
 
 let getPaymentMethodsFieldsOrder = paymentMethodField => {
   switch paymentMethodField {
@@ -524,6 +525,13 @@ let paymentMethodsFields = [
     displayName: "Mifinity",
     miniIcon: None,
   },
+  {
+    paymentMethodName: "upi_collect",
+    fields: [InfoElement],
+    icon: Some(icon("bhim_upi", ~size=19)),
+    displayName: "UPI Collect",
+    miniIcon: None,
+  },
 ]
 
 type required_fields = {
@@ -560,6 +568,7 @@ let getPaymentMethodsFieldTypeFromString = (str, isBancontact) => {
   | ("user_crypto_currency_network", _) => CryptoCurrencyNetworks
   | ("user_date_of_birth", _) => DateOfBirth
   | ("user_phone_number_country_code", _) => PhoneCountryCode
+  | ("user_vpa_id", _) => VpaId
   | _ => None
   }
 }
@@ -637,6 +646,7 @@ let dynamicFieldsEnabledPaymentMethods = [
   "local_bank_transfer_transfer",
   "afterpay_clearpay",
   "mifinity",
+  "upi_collect",
 ]
 
 let getIsBillingField = requiredFieldType => {

src/Utilities/DynamicFieldsUtils.res

@@ -110,6 +110,7 @@ let useRequiredFieldsEmptyAndValid = (
   ~cvcNumber,
 ) => {
   let email = Recoil.useRecoilValueFromAtom(userEmailAddress)
+  let vpaId = Recoil.useRecoilValueFromAtom(userVpaId)
   let fullName = Recoil.useRecoilValueFromAtom(userFullName)
   let billingName = Recoil.useRecoilValueFromAtom(userBillingName)
   let line1 = Recoil.useRecoilValueFromAtom(userAddressline1)
@@ -165,6 +166,7 @@ let useRequiredFieldsEmptyAndValid = (
         | Some(val) => val->Utils.checkIs18OrAbove
         | None => false
         }
+      | VpaId => vpaId.isValid->Option.getOr(false)
       | _ => true
       }
     })
@@ -225,6 +227,7 @@ let useRequiredFieldsEmptyAndValid = (
     dateOfBirth,
     (
       email,
+      vpaId,
       line2.value,
       selectedBank,
       phone.value,
@@ -412,6 +415,7 @@ let useSetInitialRequiredFields = (
       | ShippingAddressPincode
       | ShippingAddressState
       | ShippingAddressCountry(_)
+      | VpaId
       | None => ()
       }
     })
@@ -430,6 +434,7 @@ let useRequiredFieldsBody = (
   ~setRequiredFieldsBody,
 ) => {
   let email = Recoil.useRecoilValueFromAtom(userEmailAddress)
+  let vpaId = Recoil.useRecoilValueFromAtom(userVpaId)
   let fullName = Recoil.useRecoilValueFromAtom(userFullName)
   let billingName = Recoil.useRecoilValueFromAtom(userBillingName)
   let line1 = Recoil.useRecoilValueFromAtom(userAddressline1)
@@ -488,6 +493,7 @@ let useRequiredFieldsBody = (
       | None => ""
       }
     | CardCvc => cvcNumber
+    | VpaId => vpaId.value
     | StateAndCity
     | CountryAndPincode(_)
     | SpecialField(_)
@@ -565,6 +571,7 @@ let useRequiredFieldsBody = (
   }, (
     fullName.value,
     email.value,
+    vpaId.value,
     line1.value,
     line2.value,
     city.value,
@@ -596,7 +603,8 @@ let isFieldTypeToRenderOutsideBilling = (fieldType: PaymentMethodsRecord.payment
   | CardExpiryAndCvc
   | CryptoCurrencyNetworks
   | DateOfBirth
-  | Currency(_) => true
+  | Currency(_)
+  | VpaId => true
   | _ => false
   }
 }

src/Utilities/RecoilAtoms.res

@@ -63,6 +63,7 @@ let areRequiredFieldsValid = Recoil.atom("areRequiredFieldsValid", true)
 let areRequiredFieldsEmpty = Recoil.atom("areRequiredFieldsEmpty", false)
 let dateOfBirth = Recoil.atom("dateOfBirth", Nullable.null)
 let userBillingName = Recoil.atom("userBillingName", defaultFieldValues)
+let userVpaId = Recoil.atom("userVpaId", defaultFieldValues)
 
 type areOneClickWalletsRendered = {
   isGooglePay: bool,

src/Utilities/Utils.res

@@ -393,6 +393,15 @@ let isEmailValid = email => {
   }
 }
 
+let isVpaIdValid = vpaId => {
+  switch vpaId->String.match(
+    %re("/^[a-zA-Z0-9]([a-zA-Z0-9.-]{1,50})[a-zA-Z0-9]@[a-zA-Z0-9]{2,}$/"),
+  ) {
+  | Some(_match) => Some(true)
+  | None => vpaId->String.length > 0 ? Some(false) : None
+  }
+}
+
 let checkEmailValid = (
   email: RecoilAtomTypes.field,
   fn: (RecoilAtomTypes.field => RecoilAtomTypes.field) => unit,