feat: HS-162: Added Custom CashToCode svg (#16)

juspay · Nov 16, 2023 · fff1a54 · fff1a54
1 parent 90b211d
commit fff1a54
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 34 deletions.
diff --git a/public/icons/orca.svg b/public/icons/orca.svg
diff --git a/src/Components/Accordion.res b/src/Components/Accordion.res
@@ -28,6 +28,12 @@ let make = (
         : ("", "", "", false),
     [isActive],
   )
+  let (displayName, icon) = PaymentUtils.getDisplayNameAndIcon(
+    customMethodNames,
+    paymentOption.paymentMethodName,
+    paymentOption.displayName,
+    paymentOption.icon,
+  )
   <div
     className={`AccordionItem flex flex-col`}
     style={ReactDOMStyle.make(
@@ -47,21 +53,13 @@ let make = (
       style={ReactDOMStyle.make(~columnGap=themeObj.spacingUnit, ())}>
       <RenderIf condition=layoutClass.radios> <Radio checked=radioClass /> </RenderIf>
       <div className={`AccordionItemIcon ${accordionItemIconClass} flex items-center`}>
-        {switch paymentOption.icon {
+        {switch icon {
         | Some(ele) => ele
         | None => React.string("<icon>")
         }}
       </div>
       <div className={`AccordionItemLabel ${accordionItemLabelClass} flex items-center`}>
-        {React.string(
-          paymentOption.paymentMethodName === "card"
-            ? localeString.card
-            : PaymentUtils.getDisplayName(
-                customMethodNames,
-                paymentOption.paymentMethodName,
-                paymentOption.displayName,
-              ),
-        )}
+        {React.string(paymentOption.paymentMethodName === "card" ? localeString.card : displayName)}
       </div>
     </div>
     <RenderIf condition={selectedOption == paymentOption.paymentMethodName}>

diff --git a/src/PaymentOptions.res b/src/PaymentOptions.res
@@ -103,7 +103,6 @@ let make = (
   let displayIcon = ele => {
     <span className={`scale-90 animate-slowShow ${toggleIconElement ? "hidden" : ""}`}> ele </span>
   }
-
   <div className="w-full">
     <div
       ref={payOptionsRef->ReactDOM.Ref.domRef}
@@ -161,11 +160,15 @@ let make = (
               {React.string(
                 selectedPaymentOption.displayName === "Card"
                   ? localeString.card
-                  : PaymentUtils.getDisplayName(
-                      customMethodNames,
-                      selectedPaymentOption.paymentMethodName,
-                      selectedPaymentOption.displayName,
-                    ),
+                  : {
+                      let (name, _) = PaymentUtils.getDisplayNameAndIcon(
+                        customMethodNames,
+                        selectedPaymentOption.paymentMethodName,
+                        selectedPaymentOption.displayName,
+                        selectedPaymentOption.icon,
+                      )
+                      name
+                    },
               )}
             </option>
             {dropDownOptionsDetails
@@ -177,11 +180,15 @@ let make = (
                 {React.string(
                   item.displayName === "card"
                     ? localeString.card
-                    : PaymentUtils.getDisplayName(
-                        customMethodNames,
-                        item.paymentMethodName,
-                        item.displayName,
-                      ),
+                    : {
+                        let (name, _) = PaymentUtils.getDisplayNameAndIcon(
+                          customMethodNames,
+                          item.paymentMethodName,
+                          item.displayName,
+                          item.icon,
+                        )
+                        name
+                      },
                 )}
               </option>
             })

diff --git a/src/TabCard.res b/src/TabCard.res
@@ -8,6 +8,12 @@ let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: b
     () => isActive ? ("Tab--selected", "TabLabel--selected", "TabIcon--selected") : ("", "", ""),
     [isActive],
   )
+  let (displayName, icon) = PaymentUtils.getDisplayNameAndIcon(
+    customMethodNames,
+    paymentOption.paymentMethodName,
+    paymentOption.displayName,
+    paymentOption.icon,
+  )
   <button
     className={`Tab ${tabClass} flex flex-col animate-slowShow`}
     type_="button"
@@ -22,21 +28,13 @@ let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: b
     )}
     onClick={_ => setSelectedOption(._ => paymentOption.paymentMethodName)}>
     <div className={`TabIcon ${tabIconClass}`}>
-      {switch paymentOption.icon {
+      {switch icon {
       | Some(ele) => ele
       | None => <Icon name="default-card" size=19 />
       }}
     </div>
     <div className={`TabLabel ${tabLabelClass}`}>
-      {React.string(
-        paymentOption.paymentMethodName === "card"
-          ? localeString.card
-          : PaymentUtils.getDisplayName(
-              customMethodNames,
-              paymentOption.paymentMethodName,
-              paymentOption.displayName,
-            ),
-      )}
+      {React.string(paymentOption.paymentMethodName === "card" ? localeString.card : displayName)}
     </div>
   </button>
 }
diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
@@ -173,10 +173,11 @@ let getPaymentDetails = (arr: array<string>) => {
   ->ignore
   finalArr
 }
-let getDisplayName = (
+let getDisplayNameAndIcon = (
   customNames: PaymentType.customMethodNames,
   paymentMethodName,
   defaultName,
+  defaultIcon,
 ) => {
   let customNameObj =
     customNames
@@ -185,7 +186,21 @@ let getDisplayName = (
     })
     ->Belt.Array.get(0)
   switch customNameObj {
-  | Some(val) => val.paymentMethodName === "classic" ? val.aliasName : defaultName
-  | None => defaultName
+  | Some(val) =>
+    val.paymentMethodName === "classic"
+      ? {
+          let id = val.aliasName->Js.String2.split(" ")
+          (
+            val.aliasName,
+            Some(
+              PaymentMethodsRecord.icon(
+                id->Belt.Array.get(0)->Belt.Option.getWithDefault(""),
+                ~size=19,
+              ),
+            ),
+          )
+        }
+      : (defaultName, defaultIcon)
+  | None => (defaultName, defaultIcon)
   }
 }