From 83259397ae8f9a188939f775167deaa204f526d4 Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Wed, 4 Oct 2023 19:05:08 +0530
Subject: [PATCH 1/3] - added support to have customNames - bugfix dropdown
 names

---
 src/Components/Accordion.res          | 14 ++++++++---
 src/PaymentOptions.res                | 34 ++++++++++++++++++++-------
 src/Payments/PaymentMethodsRecord.res |  6 +++++
 src/TabCard.res                       | 10 ++++++--
 src/Types/PaymentType.res             | 20 ++++++++++++++++
 src/Utilities/PaymentUtils.res        | 14 +++++++++++
 6 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/Components/Accordion.res b/src/Components/Accordion.res
index 1fe4dda1a..162e39ff0 100644
--- a/src/Components/Accordion.res
+++ b/src/Components/Accordion.res
@@ -7,8 +7,8 @@ let make = (
   ~borderBottom: bool,
   ~borderRadiusStyle,
 ) => {
-  let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
-  let {layout} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {layout, customMethodNames} = Recoil.useRecoilValueFromAtom(optionAtom)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom)
   let (
@@ -53,7 +53,15 @@ let make = (
         }}
       </div>
       <div className={`AccordionItemLabel ${accordionItemLabelClass} flex items-center`}>
-        {React.string(paymentOption.displayName)}
+        {React.string(
+          paymentOption.paymentMethodName === "card"
+            ? localeString.card
+            : PaymentUtils.getDisplayName(
+                customMethodNames,
+                paymentOption.paymentMethodName,
+                paymentOption.displayName,
+              ),
+        )}
       </div>
     </div>
     <RenderIf condition={selectedOption == paymentOption.paymentMethodName}>
diff --git a/src/PaymentOptions.res b/src/PaymentOptions.res
index 518daa8ca..72107d3fb 100644
--- a/src/PaymentOptions.res
+++ b/src/PaymentOptions.res
@@ -49,8 +49,8 @@ let make = (
   ~checkoutEle: React.element,
   ~cardShimmerCount: int,
 ) => {
-  let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
-  let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {readOnly, customMethodNames} = Recoil.useRecoilValueFromAtom(optionAtom)
   let payOptionsRef = React.useRef(Js.Nullable.null)
   let selectRef = React.useRef(Js.Nullable.null)
   let (winW, winH) = Utils.useWindowSize()
@@ -75,9 +75,9 @@ let make = (
 
   let dropDownOptionsDetails = dropDownOptions->PaymentMethodsRecord.getPaymentDetails
   let selectedPaymentOption =
-    PaymentDetails.details
-    ->Js.Array2.find(item => item.type_ == selectedOption)
-    ->Belt.Option.getWithDefault(PaymentDetails.defaultPaymentDetails)
+    PaymentMethodsRecord.paymentMethodsFields
+    ->Js.Array2.find(item => item.paymentMethodName == selectedOption)
+    ->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodFields)
   <div className="w-full">
     <div
       ref={payOptionsRef->ReactDOM.Ref.domRef}
@@ -101,7 +101,7 @@ let make = (
         <div className="flex relative h-auto justify-center">
           <div className="absolute mt-3"> <Icon size=10 name="arrow-down" /> </div>
           <select
-            value=selectedPaymentOption.type_
+            value=selectedPaymentOption.paymentMethodName
             ref={selectRef->ReactDOM.Ref.domRef}
             className={`TabMore place-items-start outline-none`}
             onChange=handleChange
@@ -117,8 +117,16 @@ let make = (
               ~color="transparent",
               (),
             )}>
-            <option value=selectedPaymentOption.type_ disabled={true}>
-              {React.string(selectedPaymentOption.displayName)}
+            <option value=selectedPaymentOption.paymentMethodName disabled={true}>
+              {React.string(
+                selectedPaymentOption.displayName === "Card"
+                  ? localeString.card
+                  : PaymentUtils.getDisplayName(
+                      customMethodNames,
+                      selectedPaymentOption.paymentMethodName,
+                      selectedPaymentOption.displayName,
+                    ),
+              )}
             </option>
             {dropDownOptionsDetails
             ->Js.Array2.mapi((item, i) => {
@@ -126,7 +134,15 @@ let make = (
                 key={string_of_int(i)}
                 value=item.paymentMethodName
                 style={ReactDOMStyle.make(~color=themeObj.colorPrimary, ())}>
-                {React.string(item.displayName)}
+                {React.string(
+                  item.displayName === "card"
+                    ? localeString.card
+                    : PaymentUtils.getDisplayName(
+                        customMethodNames,
+                        item.paymentMethodName,
+                        item.displayName,
+                      ),
+                )}
               </option>
             })
             ->React.array}
diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
index fc1e4c980..255dc1968 100644
--- a/src/Payments/PaymentMethodsRecord.res
+++ b/src/Payments/PaymentMethodsRecord.res
@@ -47,6 +47,12 @@ let defaultPaymentMethodContent = {
   methodType: "",
   bankNames: [],
 }
+let defaultPaymentMethodFields = {
+  paymentMethodName: "",
+  fields: [],
+  icon: None,
+  displayName: "",
+}
 
 let icon = (~size=22, ~width=size, name) => {
   <Icon size width name />
diff --git a/src/TabCard.res b/src/TabCard.res
index 9dbe177c3..d34213241 100644
--- a/src/TabCard.res
+++ b/src/TabCard.res
@@ -2,7 +2,7 @@ open RecoilAtoms
 @react.component
 let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: bool) => {
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
-  let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let {readOnly, customMethodNames} = Recoil.useRecoilValueFromAtom(optionAtom)
   let setSelectedOption = Recoil.useSetRecoilState(selectedOptionAtom)
   let (tabClass, tabLabelClass, tabIconClass) = React.useMemo1(
     () => isActive ? ("Tab--selected", "TabLabel--selected", "TabIcon--selected") : ("", "", ""),
@@ -29,7 +29,13 @@ let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: b
     </div>
     <div className={`TabLabel ${tabLabelClass}`}>
       {React.string(
-        paymentOption.paymentMethodName === "card" ? localeString.card : paymentOption.displayName,
+        paymentOption.paymentMethodName === "card"
+          ? localeString.card
+          : PaymentUtils.getDisplayName(
+              customMethodNames,
+              paymentOption.paymentMethodName,
+              paymentOption.displayName,
+            ),
       )}
     </div>
   </button>
diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
index eb1cfa7b3..bb90b77f0 100644
--- a/src/Types/PaymentType.res
+++ b/src/Types/PaymentType.res
@@ -12,6 +12,11 @@ type showAddress = {
   country: showType,
   postal_code: showType,
 }
+type alias = {
+  paymentMethodName: string,
+  aliasName: string,
+}
+type customMethodNames = array<alias>
 type address = {
   line1: string,
   line2: string,
@@ -128,6 +133,7 @@ type options = {
   readOnly: bool,
   terms: terms,
   wallets: wallets,
+  customMethodNames: customMethodNames,
   branding: showType,
   payButtonStyle: style,
   showCardFormByDefault: bool,
@@ -238,6 +244,7 @@ let defaultOptions = {
   branding: Auto,
   wallets: defaultWallets,
   payButtonStyle: defaultStyle,
+  customMethodNames: [],
   showCardFormByDefault: true,
 }
 let getLayout = (str, logger) => {
@@ -793,6 +800,18 @@ let getCustomerMethods = (dict, str) => {
   }
 }
 
+let getCustomMethodNames = (dict, str) => {
+  dict
+  ->Js.Dict.get(str)
+  ->Belt.Option.flatMap(Js.Json.decodeArray)
+  ->Belt.Option.getWithDefault([])
+  ->Belt.Array.keepMap(Js.Json.decodeObject)
+  ->Js.Array2.map(json => {
+    paymentMethodName: getString(json, "paymentMethodName", ""),
+    aliasName: getString(json, "aliasName", ""),
+  })
+}
+
 let itemToObjMapper = (dict, logger) => {
   unknownKeysWarning(
     [
@@ -827,6 +846,7 @@ let itemToObjMapper = (dict, logger) => {
     readOnly: getBoolWithWarning(dict, "readOnly", false, ~logger),
     terms: getTerms(dict, "terms", logger),
     wallets: getWallets(dict, "wallets", logger),
+    customMethodNames: getCustomMethodNames(dict, "customMethodNames"),
     payButtonStyle: getStyle(dict, "payButtonStyle", logger),
     showCardFormByDefault: getBool(dict, "showCardFormByDefault", true),
   }
diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
index 36b341c3e..92bc53b2b 100644
--- a/src/Utilities/PaymentUtils.res
+++ b/src/Utilities/PaymentUtils.res
@@ -173,3 +173,17 @@ let getPaymentDetails = (arr: array<string>) => {
   ->ignore
   finalArr
 }
+let getDisplayName = (customNames: PaymentType.customMethodNames, str, default) => {
+  let customName =
+    customNames
+    ->Js.Array2.filter((item: PaymentType.alias) => {
+      item.paymentMethodName === str
+    })
+    ->Belt.Array.get(0)
+  customName->Belt.Option.isSome
+    ? switch customName {
+      | Some(val) => val.aliasName
+      | None => default
+      }
+    : default
+}

From 2caf295dd85aa5c1b971a44254f7b33eecf6ef38 Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Fri, 6 Oct 2023 09:42:01 +0530
Subject: [PATCH 2/3] block custom name support for except cashtocode

---
 src/Utilities/PaymentUtils.res | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
index 92bc53b2b..27a5ab7ad 100644
--- a/src/Utilities/PaymentUtils.res
+++ b/src/Utilities/PaymentUtils.res
@@ -174,15 +174,15 @@ let getPaymentDetails = (arr: array<string>) => {
   finalArr
 }
 let getDisplayName = (customNames: PaymentType.customMethodNames, str, default) => {
-  let customName =
+  let customNameObj =
     customNames
     ->Js.Array2.filter((item: PaymentType.alias) => {
       item.paymentMethodName === str
     })
     ->Belt.Array.get(0)
-  customName->Belt.Option.isSome
-    ? switch customName {
-      | Some(val) => val.aliasName
+  customNameObj->Belt.Option.isSome
+    ? switch customNameObj {
+      | Some(val) => val.paymentMethodName === "classic" ? val.aliasName : default
       | None => default
       }
     : default

From eb0ac11bd0950d87bdff8d4ff8dc565a77a8302d Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <praful.koppalkar@juspay.in>
Date: Tue, 10 Oct 2023 14:46:50 +0530
Subject: [PATCH 3/3] naming convention change

---
 src/Utilities/PaymentUtils.res | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
index 27a5ab7ad..b9acf14ad 100644
--- a/src/Utilities/PaymentUtils.res
+++ b/src/Utilities/PaymentUtils.res
@@ -173,17 +173,19 @@ let getPaymentDetails = (arr: array<string>) => {
   ->ignore
   finalArr
 }
-let getDisplayName = (customNames: PaymentType.customMethodNames, str, default) => {
+let getDisplayName = (
+  customNames: PaymentType.customMethodNames,
+  paymentMethodName,
+  defaultName,
+) => {
   let customNameObj =
     customNames
     ->Js.Array2.filter((item: PaymentType.alias) => {
-      item.paymentMethodName === str
+      item.paymentMethodName === paymentMethodName
     })
     ->Belt.Array.get(0)
-  customNameObj->Belt.Option.isSome
-    ? switch customNameObj {
-      | Some(val) => val.paymentMethodName === "classic" ? val.aliasName : default
-      | None => default
-      }
-    : default
+  switch customNameObj {
+  | Some(val) => val.paymentMethodName === "classic" ? val.aliasName : defaultName
+  | None => defaultName
+  }
 }