Pull request #248: suuport for custom name

Merge in EXC/orca-elements from praful/supportToCustomNames to master

* commit 'eb0ac11bd0950d87bdff8d4ff8dc565a77a8302d':
  naming convention change
  block custom name support for except cashtocode
  - added support to have customNames - bugfix dropdown names

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}>

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,16 +117,32 @@ 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) => {
               <option
                 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}

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 />

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>

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),
   }

src/Utilities/PaymentUtils.res

@@ -173,3 +173,19 @@ let getPaymentDetails = (arr: array<string>) => {
   ->ignore
   finalArr
 }
+let getDisplayName = (
+  customNames: PaymentType.customMethodNames,
+  paymentMethodName,
+  defaultName,
+) => {
+  let customNameObj =
+    customNames
+    ->Js.Array2.filter((item: PaymentType.alias) => {
+      item.paymentMethodName === paymentMethodName
+    })
+    ->Belt.Array.get(0)
+  switch customNameObj {
+  | Some(val) => val.paymentMethodName === "classic" ? val.aliasName : defaultName
+  | None => defaultName
+  }
+}