feat: crypto currency network added (#403)

Co-authored-by: Pritish Budhiraja <[email protected]>
juspay · Jun 11, 2024 · 24f7297 · 24f7297
1 parent 78ba856
commit 24f7297
Show file tree

Hide file tree

Showing 26 changed files with 109 additions and 54 deletions.
diff --git a/src/Components/CryptoCurrencyNetworks.res b/src/Components/CryptoCurrencyNetworks.res
@@ -0,0 +1,41 @@
+@react.component
+let make = () => {
+  open DropdownField
+  let currencyVal = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCurrency)
+  let {config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let (cryptoCurrencyNetworks, setCryptoCurrencyNetworks) = Recoil.useRecoilState(
+    RecoilAtoms.cryptoCurrencyNetworks,
+  )
+
+  let dropdownOptions =
+    Utils.currencyNetworksDict
+    ->Dict.get(currencyVal)
+    ->Option.getOr([])
+    ->Array.map(item => {
+      label: Utils.toSpacedUpperCase(~str=item, ~delimiter="_"),
+      value: item,
+    })
+
+  let initialValue = (
+    dropdownOptions
+    ->Array.get(0)
+    ->Option.getOr({
+      label: "",
+      value: "",
+    })
+  ).value
+
+  React.useEffect(() => {
+    setCryptoCurrencyNetworks(_ => initialValue)
+    None
+  }, [initialValue])
+
+  <DropdownField
+    appearance=config.appearance
+    fieldName=localeString.currencyNetwork
+    value=cryptoCurrencyNetworks
+    setValue=setCryptoCurrencyNetworks
+    disabled=false
+    options=dropdownOptions
+  />
+}
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -326,7 +326,6 @@ let make = (
           key={`outside-billing-${index->Int.toString}`}
           className="flex flex-col w-full place-content-between"
           style={
-            marginTop: index !== 0 || paymentMethod === "card" ? themeObj.spacingGridColumn : "",
             gridColumnGap: themeObj.spacingGridRow,
           }>
           {switch item {
@@ -457,6 +456,7 @@ let make = (
                 optionalRequiredFields={Some(requiredFields)}
               />
             </>
+          | CryptoCurrencyNetworks => <CryptoCurrencyNetworks />
           | Email
           | InfoElement
           | Country
@@ -760,6 +760,7 @@ let make = (
                 | ShippingAddressPincode
                 | ShippingAddressState
                 | ShippingAddressCountry(_)
+                | CryptoCurrencyNetworks
                 | None => React.null
                 }}
               </div>

diff --git a/src/LocaleStrings/ArabicLocale.res b/src/LocaleStrings/ArabicLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `انتهت صلاحية هذه البطاقة`,
   cardHeader: `معلومات البطاقة`,
   cardBrandConfiguredErrorText: str => `${str} غير مدعوم في الوقت الحالي.`,
+  currencyNetwork: `شبكات العملات`,
 }
diff --git a/src/LocaleStrings/CatalanLocale.res b/src/LocaleStrings/CatalanLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Aquesta targeta ha caducat`,
   cardHeader: `Informació de la targeta`,
   cardBrandConfiguredErrorText: str => `${str} no està suportat en aquest moment.`,
+  currencyNetwork: `Xarxes de Monedes`,
 }
diff --git a/src/LocaleStrings/DeutschLocale.res b/src/LocaleStrings/DeutschLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Diese Karte ist abgelaufen`,
   cardHeader: `Kartendaten`,
   cardBrandConfiguredErrorText: str => `${str} wird derzeit nicht unterstützt.`,
+  currencyNetwork: `Währungsnetzwerke`,
 }
diff --git a/src/LocaleStrings/DutchLocale.res b/src/LocaleStrings/DutchLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Deze kaart is verlopen`,
   cardHeader: `Kaartinformatie`,
   cardBrandConfiguredErrorText: str => `${str} wordt op dit moment niet ondersteund.`,
+  currencyNetwork: `Valutanetwerken`,
 }
diff --git a/src/LocaleStrings/EnglishGBLocale.res b/src/LocaleStrings/EnglishGBLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
+  currencyNetwork: `Currency Networks`,
 }
diff --git a/src/LocaleStrings/EnglishLocale.res b/src/LocaleStrings/EnglishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
+  currencyNetwork: `Currency Networks`,
 }
diff --git a/src/LocaleStrings/FrenchBelgiumLocale.res b/src/LocaleStrings/FrenchBelgiumLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
+  currencyNetwork: `Réseaux Monétaires`,
 }
diff --git a/src/LocaleStrings/FrenchLocale.res b/src/LocaleStrings/FrenchLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
+  currencyNetwork: `Réseaux Monétaires`,
 }
diff --git a/src/LocaleStrings/HebrewLocale.res b/src/LocaleStrings/HebrewLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `הכרטיס הזה פג תוקף`,
   cardHeader: `מידע כרטיס`,
   cardBrandConfiguredErrorText: str => `${str} לא נתמך כרגע.`,
+  currencyNetwork: `רשתות מטבעות`,
 }
diff --git a/src/LocaleStrings/ItalianLocale.res b/src/LocaleStrings/ItalianLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Questa carta è scaduta`,
   cardHeader: `Informazioni sulla carta`,
   cardBrandConfiguredErrorText: str => `${str} non è supportato al momento.`,
+  currencyNetwork: `Reti Valutarie`,
 }
diff --git a/src/LocaleStrings/JapaneseLocale.res b/src/LocaleStrings/JapaneseLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `このカードは期限切れです`,
   cardHeader: `カード情報`,
   cardBrandConfiguredErrorText: str => `${str} は現在サポートされていません。`,
+  currencyNetwork: `通貨ネットワーク`,
 }
diff --git a/src/LocaleStrings/LocaleStringTypes.res b/src/LocaleStrings/LocaleStringTypes.res
@@ -73,4 +73,5 @@ type localeStrings = {
   cardExpiredText: string,
   cardHeader: string,
   cardBrandConfiguredErrorText: string => string,
+  currencyNetwork: string,
 }
diff --git a/src/LocaleStrings/PolishLocale.res b/src/LocaleStrings/PolishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Ta karta wygasła`,
   cardHeader: `Informacje o karcie`,
   cardBrandConfiguredErrorText: str => `${str} nie jest obecnie obsługiwany.`,
+  currencyNetwork: `Sieci Walutowe`,
 }
diff --git a/src/LocaleStrings/PortugueseLocale.res b/src/LocaleStrings/PortugueseLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Este cartão expirou`,
   cardHeader: `Informações do cartão`,
   cardBrandConfiguredErrorText: str => `${str} não é suportado no momento.`,
+  currencyNetwork: `Redes de Moeda`,
 }
diff --git a/src/LocaleStrings/RussianLocale.res b/src/LocaleStrings/RussianLocale.res
@@ -86,4 +86,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHeader: `Информация о карте`,
   cardBrandConfiguredErrorText: str =>
     `${str} в данный момент не поддерживается.`,
+  currencyNetwork: `Валютные сети`,
 }
diff --git a/src/LocaleStrings/SpanishLocale.res b/src/LocaleStrings/SpanishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Esta tarjeta ha caducado`,
   cardHeader: `Información de la tarjeta`,
   cardBrandConfiguredErrorText: str => `${str} no está soportado en este momento.`,
+  currencyNetwork: `Redes de Divisas`,
 }
diff --git a/src/LocaleStrings/SwedishLocale.res b/src/LocaleStrings/SwedishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Detta kort har gått ut`,
   cardHeader: `Kortinformation`,
   cardBrandConfiguredErrorText: str => `${str} stöds inte för tillfället.`,
+  currencyNetwork: `Valutanätverk`,
 }
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
@@ -229,7 +229,7 @@ let make = (
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
       <div className="flex flex-col" style={gridGap: themeObj.spacingGridColumn}>
-        <div className="w-full">
+        <div className="flex flex-col w-full" style={gridGap: themeObj.spacingGridColumn}>
           <RenderIf condition={innerLayout === Compressed}>
             <div
               style={
@@ -263,9 +263,6 @@ let make = (
             <div
               className="flex flex-row w-full place-content-between"
               style={
-                marginTop: {
-                  innerLayout === Spaced ? themeObj.spacingGridColumn : ""
-                },
                 gridColumnGap: {innerLayout === Spaced ? themeObj.spacingGridRow : ""},
               }>
               <div className={innerLayout === Spaced ? "w-[45%]" : "w-[50%]"}>

diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
@@ -34,6 +34,7 @@ type paymentMethodsFields =
   | ShippingAddressPincode
   | ShippingAddressState
   | ShippingAddressCountry(array<string>)
+  | CryptoCurrencyNetworks
 
 let getPaymentMethodsFieldsOrder = paymentMethodField => {
   switch paymentMethodField {
@@ -47,10 +48,11 @@ let getPaymentMethodsFieldsOrder = paymentMethodField => {
   | AddressLine2 => 5
   | AddressCity => 6
   | AddressState => 7
-  | AddressCountry(_) => 8
-  | AddressPincode => 9
   | StateAndCity => 7
+  | AddressCountry(_) => 8
   | CountryAndPincode(_) => 8
+  | AddressPincode => 9
+  | CryptoCurrencyNetworks => 10
   | InfoElement => 99
   | _ => 3
   }
@@ -546,6 +548,7 @@ let getPaymentMethodsFieldTypeFromString = (str, isBancontact) => {
   | ("user_shipping_address_city", _) => ShippingAddressCity
   | ("user_shipping_address_pincode", _) => ShippingAddressPincode
   | ("user_shipping_address_state", _) => ShippingAddressState
+  | ("user_crypto_currency_network", _) => CryptoCurrencyNetworks
   | _ => None
   }
 }
@@ -1061,40 +1064,3 @@ let getCardNetwork = (~paymentMethodType, ~cardBrand) => {
   ->Array.get(0)
   ->Option.getOr(defaultCardNetworks)
 }
-
-let paymentMethodFieldToStrMapper = (field: paymentMethodsFields) => {
-  switch field {
-  | Email => "Email"
-  | FullName => "FullName"
-  | InfoElement => "InfoElement"
-  | Country => "Country"
-  | Bank => "Bank"
-  | SpecialField(_) => "SpecialField"
-  | None => "None"
-  | BillingName => "BillingName"
-  | PhoneNumber => "PhoneNumber"
-  | AddressLine1 => "AddressLine1"
-  | AddressLine2 => "AddressLine2"
-  | AddressCity => "AddressCity"
-  | StateAndCity => "StateAndCity"
-  | CountryAndPincode(_) => "CountryAndPincode"
-  | AddressPincode => "AddressPincode"
-  | AddressState => "AddressState"
-  | AddressCountry(_) => "AddressCountry"
-  | BlikCode => "BlikCode"
-  | Currency(_) => "Currency"
-  | CardNumber => "CardNumber"
-  | CardExpiryMonth => "CardExpiryMonth"
-  | CardExpiryYear => "CardExpiryYear"
-  | CardExpiryMonthAndYear => "CardExpiryMonthAndYear"
-  | CardCvc => "CardCvc"
-  | CardExpiryAndCvc => "CardExpiryAndCvc"
-  | ShippingName => "ShippingName"
-  | ShippingAddressLine1 => "ShippingAddressLine1"
-  | ShippingAddressLine2 => "ShippingAddressLine2"
-  | ShippingAddressCity => "ShippingAddressCity"
-  | ShippingAddressPincode => "ShippingAddressPincode"
-  | ShippingAddressState => "ShippingAddressState"
-  | ShippingAddressCountry(_) => "ShippingAddressCountry"
-  }
-}
diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res
@@ -83,7 +83,6 @@ let make = (~paymentType: CardThemeType.mode, ~paymentMethodName: string) => {
               phoneNumber.countryCode->Option.getOr("") ++ phoneNumber.value,
             ),
             ~paymentExperience=paymentFlow,
-            ~currency,
           )
           ->Dict.fromArray
           ->JSON.Encode.object

diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
@@ -125,6 +125,7 @@ let useRequiredFieldsEmptyAndValid = (
   let setAreRequiredFieldsValid = Recoil.useSetRecoilState(areRequiredFieldsValid)
   let setAreRequiredFieldsEmpty = Recoil.useSetRecoilState(areRequiredFieldsEmpty)
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
 
   let fieldsArrWithBillingAddress = fieldsArr->addBillingAddressIfUseBillingAddress(billingAddress)
 
@@ -149,6 +150,7 @@ let useRequiredFieldsEmptyAndValid = (
       | AddressPincode => postalCode.value !== ""
       | AddressState => state.value !== ""
       | BlikCode => blikCode.value !== ""
+      | CryptoCurrencyNetworks => cryptoCurrencyNetworks !== ""
       | Currency(currencyArr) => currency !== "" || currencyArr->Array.length === 0
       | CardNumber => isCardValid->Option.getOr(false)
       | CardExpiryMonth
@@ -185,6 +187,7 @@ let useRequiredFieldsEmptyAndValid = (
       | AddressPincode => postalCode.value === ""
       | AddressState => state.value === ""
       | BlikCode => blikCode.value === ""
+      | CryptoCurrencyNetworks => cryptoCurrencyNetworks === ""
       | Currency(currencyArr) => currency === "" && currencyArr->Array.length > 0
       | CardNumber => cardNumber === ""
       | CardExpiryMonth =>
@@ -261,6 +264,9 @@ let useSetInitialRequiredFields = (
     logger,
   )
   let (currency, setCurrency) = Recoil.useLoggedRecoilState(userCurrency, "currency", logger)
+  let (cryptoCurrencyNetworks, setCryptoCurrencyNetworks) = Recoil.useRecoilState(
+    cryptoCurrencyNetworks,
+  )
 
   React.useEffect(() => {
     let getNameValue = (item: PaymentMethodsRecord.required_fields) => {
@@ -353,6 +359,10 @@ let useSetInitialRequiredFields = (
         if value !== "" && selectedBank === "" {
           setSelectedBank(_ => value)
         }
+      | CryptoCurrencyNetworks =>
+        if value !== "" && cryptoCurrencyNetworks === "" {
+          setCryptoCurrencyNetworks(_ => value)
+        }
       | SpecialField(_)
       | InfoElement
       | CardNumber
@@ -399,6 +409,7 @@ let useRequiredFieldsBody = (
   let selectedBank = Recoil.useRecoilValueFromAtom(userBank)
   let currency = Recoil.useRecoilValueFromAtom(userCurrency)
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
 
   let getFieldValueFromFieldType = (fieldType: PaymentMethodsRecord.paymentMethodsFields) => {
     switch fieldType {
@@ -434,6 +445,7 @@ let useRequiredFieldsBody = (
     | CardExpiryYear =>
       let (_, year) = CardUtils.getExpiryDates(cardExpiry)
       year
+    | CryptoCurrencyNetworks => cryptoCurrencyNetworks
     | CardCvc => cvcNumber
     | StateAndCity
     | CountryAndPincode(_)
@@ -526,6 +538,7 @@ let useRequiredFieldsBody = (
     cardExpiry,
     cvcNumber,
     selectedBank,
+    cryptoCurrencyNetworks,
   ])
 }
 
@@ -538,6 +551,7 @@ let isFieldTypeToRenderOutsideBilling = (fieldType: PaymentMethodsRecord.payment
   | CardExpiryMonthAndYear
   | CardCvc
   | CardExpiryAndCvc
+  | CryptoCurrencyNetworks
   | Currency(_) => true
   | _ => false
   }

diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
@@ -547,16 +547,11 @@ let applePayThirdPartySdkBody = (~connectors) => [
   ),
 ]
 
-let cryptoBody = (~currency) => [
+let cryptoBody = [
   ("payment_method", "crypto"->JSON.Encode.string),
   ("payment_method_type", "crypto_currency"->JSON.Encode.string),
   ("payment_experience", "redirect_to_url"->JSON.Encode.string),
-  (
-    "payment_method_data",
-    [
-      ("crypto", [("pay_currency", currency->JSON.Encode.string)]->Utils.getJsonFromArrayOfJson),
-    ]->Utils.getJsonFromArrayOfJson,
-  ),
+  ("payment_method_data", []->Utils.getJsonFromArrayOfJson),
 ]
 
 let afterpayRedirectionBody = () => [
@@ -1055,11 +1050,10 @@ let getPaymentBody = (
   ~blikCode,
   ~paymentExperience: PaymentMethodsRecord.paymentFlow=RedirectToURL,
   ~phoneNumber,
-  ~currency,
 ) =>
   switch paymentMethodType {
   | "afterpay_clearpay" => afterpayRedirectionBody()
-  | "crypto_currency" => cryptoBody(~currency)
+  | "crypto_currency" => cryptoBody
   | "sofort" => sofortBody(~country, ~name=fullName, ~email)
   | "ideal" => iDealBody(~name=fullName, ~bankName=bank)
   | "eps" => epsBody(~name=fullName, ~bankName=bank)

diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
@@ -53,6 +53,7 @@ let userBlikCode = Recoil.atom("userBlikCode", defaultFieldValues)
 let fieldsComplete = Recoil.atom("fieldsComplete", false)
 let isManualRetryEnabled = Recoil.atom("isManualRetryEnabled", false)
 let userCurrency = Recoil.atom("userCurrency", "")
+let cryptoCurrencyNetworks = Recoil.atom("cryptoCurrencyNetworks", "")
 let isShowOrPayUsing = Recoil.atom("isShowOrPayUsing", false)
 let areRequiredFieldsValid = Recoil.atom("areRequiredFieldsValid", true)
 let areRequiredFieldsEmpty = Recoil.atom("areRequiredFieldsEmpty", false)