feat: mifinity wallet addition (#451)

Co-authored-by: Pritish Budhiraja <pritish.budhiraja@juspay.in>
juspay · Jun 20, 2024 · 283af60 · 283af60
1 parent aef951c
commit 283af60
Show file tree

Hide file tree

Showing 25 changed files with 499 additions and 57 deletions.
diff --git a/public/icons/orca.svg b/public/icons/orca.svg
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
@@ -457,6 +457,7 @@ let make = (
               />
             </>
           | CryptoCurrencyNetworks => <CryptoCurrencyNetworks />
+          | DateOfBirth => <DateOfBirth />
           | Email
           | InfoElement
           | Country
@@ -761,6 +762,7 @@ let make = (
                 | ShippingAddressState
                 | ShippingAddressCountry(_)
                 | CryptoCurrencyNetworks
+                | DateOfBirth
                 | None => React.null
                 }}
               </div>

diff --git a/src/LocaleStrings/ArabicLocale.res b/src/LocaleStrings/ArabicLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} غير مدعوم في الوقت الحالي.`,
   currencyNetwork: `شبكات العملات`,
   expiryPlaceholder: `MM / YY`,
+  dateOfBirth: `تاريخ الميلاد`,
 }
diff --git a/src/LocaleStrings/CatalanLocale.res b/src/LocaleStrings/CatalanLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} no està suportat en aquest moment.`,
   currencyNetwork: `Xarxes de Monedes`,
   expiryPlaceholder: `MM / AA`,
+  dateOfBirth: `Data de naixement`,
 }
diff --git a/src/LocaleStrings/DeutschLocale.res b/src/LocaleStrings/DeutschLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} wird derzeit nicht unterstützt.`,
   currencyNetwork: `Währungsnetzwerke`,
   expiryPlaceholder: `MM / JJ`,
+  dateOfBirth: `Geburtsdatum`,
 }
diff --git a/src/LocaleStrings/DutchLocale.res b/src/LocaleStrings/DutchLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} wordt op dit moment niet ondersteund.`,
   currencyNetwork: `Valutanetwerken`,
   expiryPlaceholder: `MM / JJ`,
+  dateOfBirth: `Geboortedatum`,
 }
diff --git a/src/LocaleStrings/EnglishGBLocale.res b/src/LocaleStrings/EnglishGBLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
   currencyNetwork: `Currency Networks`,
   expiryPlaceholder: `MM / YY`,
+  dateOfBirth: `Date of Birth`,
 }
diff --git a/src/LocaleStrings/EnglishLocale.res b/src/LocaleStrings/EnglishLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
   currencyNetwork: `Currency Networks`,
   expiryPlaceholder: `MM / YY`,
+  dateOfBirth: `Date of Birth`,
 }
diff --git a/src/LocaleStrings/FrenchBelgiumLocale.res b/src/LocaleStrings/FrenchBelgiumLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
   currencyNetwork: `Réseaux Monétaires`,
   expiryPlaceholder: `MM / AA`,
+  dateOfBirth: `Date de naissance`,
 }
diff --git a/src/LocaleStrings/FrenchLocale.res b/src/LocaleStrings/FrenchLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
   currencyNetwork: `Réseaux Monétaires`,
   expiryPlaceholder: `MM / AA`,
+  dateOfBirth: `Date de naissance`,
 }
diff --git a/src/LocaleStrings/HebrewLocale.res b/src/LocaleStrings/HebrewLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} לא נתמך כרגע.`,
   currencyNetwork: `רשתות מטבעות`,
   expiryPlaceholder: `MM / YY`,
+  dateOfBirth: `תאריך לידה`,
 }
diff --git a/src/LocaleStrings/ItalianLocale.res b/src/LocaleStrings/ItalianLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} non è supportato al momento.`,
   currencyNetwork: `Reti Valutarie`,
   expiryPlaceholder: `MM / AA`,
+  dateOfBirth: `Data di nascita`,
 }
diff --git a/src/LocaleStrings/JapaneseLocale.res b/src/LocaleStrings/JapaneseLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} は現在サポートされていません。`,
   currencyNetwork: `通貨ネットワーク`,
   expiryPlaceholder: `MM / YY`,
+  dateOfBirth: `生年月日`,
 }
diff --git a/src/LocaleStrings/LocaleStringTypes.res b/src/LocaleStrings/LocaleStringTypes.res
@@ -75,4 +75,5 @@ type localeStrings = {
   cardBrandConfiguredErrorText: string => string,
   currencyNetwork: string,
   expiryPlaceholder: string,
+  dateOfBirth: string,
 }
diff --git a/src/LocaleStrings/PolishLocale.res b/src/LocaleStrings/PolishLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} nie jest obecnie obsługiwany.`,
   currencyNetwork: `Sieci Walutowe`,
   expiryPlaceholder: `MM / RR`,
+  dateOfBirth: `Data urodzenia`,
 }
diff --git a/src/LocaleStrings/PortugueseLocale.res b/src/LocaleStrings/PortugueseLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} não é suportado no momento.`,
   currencyNetwork: `Redes de Moeda`,
   expiryPlaceholder: `MM / AA`,
+  dateOfBirth: `Data de nascimento`,
 }
diff --git a/src/LocaleStrings/RussianLocale.res b/src/LocaleStrings/RussianLocale.res
@@ -88,4 +88,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
     `${str} в данный момент не поддерживается.`,
   currencyNetwork: `Валютные сети`,
   expiryPlaceholder: `MM / ГГ`,
+  dateOfBirth: `Дата рождения`,
 }
diff --git a/src/LocaleStrings/SpanishLocale.res b/src/LocaleStrings/SpanishLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} no está soportado en este momento.`,
   currencyNetwork: `Redes de Divisas`,
   expiryPlaceholder: `MM / AA`,
+  dateOfBirth: `Fecha de nacimiento`,
 }
diff --git a/src/LocaleStrings/SwedishLocale.res b/src/LocaleStrings/SwedishLocale.res
@@ -84,4 +84,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardBrandConfiguredErrorText: str => `${str} stöds inte för tillfället.`,
   currencyNetwork: `Valutanätverk`,
   expiryPlaceholder: `MM / ÅÅ`,
+  dateOfBirth: `Födelsedatum`,
 }
diff --git a/src/Payments/DateOfBirth.res b/src/Payments/DateOfBirth.res
@@ -0,0 +1,79 @@
+%%raw(`import ("react-datepicker/dist/react-datepicker.css")`)
+
+let months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+]
+
+let startYear = 1900
+let currentYear = Date.getFullYear(Date.make())
+let years = Array.fromInitializer(~length=currentYear - startYear, i => currentYear - i)
+
+@react.component
+let make = () => {
+  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let (selectedDate, setSelectedDate) = Recoil.useRecoilState(RecoilAtoms.dateOfBirth)
+
+  <div className="flex flex-col gap-1">
+    <div
+      className={`Label`}
+      style={
+        fontWeight: themeObj.fontWeightNormal,
+        fontSize: themeObj.fontSizeLg,
+        opacity: "0.6",
+      }>
+      {React.string(localeString.dateOfBirth)}
+    </div>
+    <DatePicker
+      showIcon=true
+      icon={<Icon name="calander" size=13 className="!px-[6px] !py-[10px]" />}
+      className="w-full border border-gray-300 rounded p-2"
+      selected={selectedDate}
+      onChange={date => setSelectedDate(_ => date)}
+      dateFormat="dd-MM-yyyy"
+      wrapperClassName="datepicker"
+      renderCustomHeader={val => {
+        <div className="flex gap-4 items-center justify-center m-2">
+          <select
+            className="p-1"
+            value={val.date->Date.getFullYear->Int.toString}
+            onChange={ev => {
+              let value = {ev->ReactEvent.Form.target}["value"]
+              val.changeYear(value)
+            }}>
+            {years
+            ->Array.map(option =>
+              <option key={option->Int.toString} value={option->Int.toString}>
+                {option->React.int}
+              </option>
+            )
+            ->React.array}
+          </select>
+          <select
+            className="p-1"
+            value={months[val.date->Date.getMonth]->Option.getOr("January")}
+            onChange={ev => {
+              let value = {ev->ReactEvent.Form.target}["value"]
+              val.changeMonth(months->Array.indexOf(value))
+            }}>
+            {months
+            ->Array.map(option =>
+              <option key={option} value={option}> {option->React.string} </option>
+            )
+            ->React.array}
+          </select>
+        </div>
+      }}
+    />
+  </div>
+}
diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
@@ -35,6 +35,7 @@ type paymentMethodsFields =
   | ShippingAddressState
   | ShippingAddressCountry(array<string>)
   | CryptoCurrencyNetworks
+  | DateOfBirth
 
 let getPaymentMethodsFieldsOrder = paymentMethodField => {
   switch paymentMethodField {
@@ -515,6 +516,13 @@ let paymentMethodsFields = [
     displayName: "Local Bank Transfer",
     miniIcon: None,
   },
+  {
+    paymentMethodName: "mifinity",
+    fields: [InfoElement],
+    icon: Some(icon("mifinity")),
+    displayName: "Mifinity",
+    miniIcon: None,
+  },
 ]
 
 type required_fields = {
@@ -549,6 +557,7 @@ let getPaymentMethodsFieldTypeFromString = (str, isBancontact) => {
   | ("user_shipping_address_pincode", _) => ShippingAddressPincode
   | ("user_shipping_address_state", _) => ShippingAddressState
   | ("user_crypto_currency_network", _) => CryptoCurrencyNetworks
+  | ("user_date_of_birth", _) => DateOfBirth
   | _ => None
   }
 }
@@ -625,6 +634,7 @@ let dynamicFieldsEnabledPaymentMethods = [
   "giropay",
   "local_bank_transfer_transfer",
   "afterpay_clearpay",
+  "mifinity",
 ]
 
 let getIsBillingField = requiredFieldType => {
@@ -706,8 +716,6 @@ type paymentMethod =
   Cards | Wallets | PayLater | BankRedirect | BankTransfer | BankDebit | Crypto | Voucher | NONE
 
 type cardType = Credit | Debit
-type paymentMethodType =
-  Card(cardType) | Klarna | Affirm | AfterPay | Gpay | Paypal | ApplePay | CryptoCurrency | NONE
 
 type paymentExperience = {
   payment_experience_type: paymentFlow,
@@ -802,19 +810,6 @@ let getMethod = str => {
   }
 }
 
-let getPaymentMethodType = str => {
-  switch str {
-  | "afterpay_clearpay" => AfterPay
-  | "klarna" => Klarna
-  | "affirm" => Affirm
-  | "apple_pay" => ApplePay
-  | "google_pay" => Gpay
-  | "credit" => Card(Credit)
-  | "debit" => Card(Debit)
-  | "crypto_currency" => CryptoCurrency
-  | _ => NONE
-  }
-}
 let getPaymentExperienceType = str => {
   switch str {
   | "redirect_to_url" => RedirectToURL

diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
@@ -267,6 +267,7 @@ let useSetInitialRequiredFields = (
   let (cryptoCurrencyNetworks, setCryptoCurrencyNetworks) = Recoil.useRecoilState(
     cryptoCurrencyNetworks,
   )
+  let (dateOfBirth, setDateOfBirth) = Recoil.useRecoilState(dateOfBirth)
 
   React.useEffect(() => {
     let getNameValue = (item: PaymentMethodsRecord.required_fields) => {
@@ -363,6 +364,10 @@ let useSetInitialRequiredFields = (
         if value !== "" && cryptoCurrencyNetworks === "" {
           setCryptoCurrencyNetworks(_ => value)
         }
+      | DateOfBirth =>
+        if value !== "" && dateOfBirth->Date.toDateString === "" {
+          setDateOfBirth(_ => dateOfBirth)
+        }
       | SpecialField(_)
       | InfoElement
       | CardNumber
@@ -410,6 +415,7 @@ let useRequiredFieldsBody = (
   let currency = Recoil.useRecoilValueFromAtom(userCurrency)
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
   let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
+  let dateOfBirth = Recoil.useRecoilValueFromAtom(dateOfBirth)
 
   let getFieldValueFromFieldType = (fieldType: PaymentMethodsRecord.paymentMethodsFields) => {
     switch fieldType {
@@ -446,6 +452,7 @@ let useRequiredFieldsBody = (
       let (_, year) = CardUtils.getExpiryDates(cardExpiry)
       year
     | CryptoCurrencyNetworks => cryptoCurrencyNetworks
+    | DateOfBirth => dateOfBirth->Date.toISOString->String.slice(~start=0, ~end=10)
     | CardCvc => cvcNumber
     | StateAndCity
     | CountryAndPincode(_)
@@ -521,7 +528,7 @@ let useRequiredFieldsBody = (
 
     setRequiredFieldsBody(_ => requiredFieldsBody)
     None
-  }, [
+  }, (
     fullName.value,
     email.value,
     line1.value,
@@ -539,7 +546,8 @@ let useRequiredFieldsBody = (
     cvcNumber,
     selectedBank,
     cryptoCurrencyNetworks,
-  ])
+    dateOfBirth,
+  ))
 }
 
 let isFieldTypeToRenderOutsideBilling = (fieldType: PaymentMethodsRecord.paymentMethodsFields) => {
@@ -552,6 +560,7 @@ let isFieldTypeToRenderOutsideBilling = (fieldType: PaymentMethodsRecord.payment
   | CardCvc
   | CardExpiryAndCvc
   | CryptoCurrencyNetworks
+  | DateOfBirth
   | Currency(_) => true
   | _ => false
   }

diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
@@ -25,6 +25,7 @@ let paymentListLookupNew = (
     "momo",
     "touch_n_go",
     "samsung_pay",
+    "mifinity",
   ]
   let otherPaymentList = []
 

diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
@@ -57,6 +57,7 @@ let cryptoCurrencyNetworks = Recoil.atom("cryptoCurrencyNetworks", "")
 let isShowOrPayUsing = Recoil.atom("isShowOrPayUsing", false)
 let areRequiredFieldsValid = Recoil.atom("areRequiredFieldsValid", true)
 let areRequiredFieldsEmpty = Recoil.atom("areRequiredFieldsEmpty", false)
+let dateOfBirth = Recoil.atom("dateOfBirth", Date.make())
 let userBillingName = Recoil.atom("userBillingName", defaultFieldValues)
 
 type areOneClickWalletsRendered = {

diff --git a/src/libraries/DatePicker.res b/src/libraries/DatePicker.res
@@ -28,5 +28,7 @@ external make: (
   ~renderCustomHeader: customHeaderProps => React.element=?,
   ~showWeekNumbers: bool=?,
   ~placeholderText: string=?,
+  ~className: string=?,
   ~wrapperClassName: string=?,
+  ~closeOnScroll: bool=?,
 ) => React.element = "default"