From fff1a546f887111bb60138d8d00ab8e752b1822e Mon Sep 17 00:00:00 2001
From: Praful Koppalkar <126236898+prafulkoppalkar@users.noreply.github.com>
Date: Tue, 14 Nov 2023 11:31:42 +0530
Subject: [PATCH] feat: HS-162: Added Custom CashToCode svg (#16)

---
 public/icons/orca.svg          |  6 ++++++
 src/Components/Accordion.res   | 18 ++++++++----------
 src/PaymentOptions.res         | 29 ++++++++++++++++++-----------
 src/TabCard.res                | 18 ++++++++----------
 src/Utilities/PaymentUtils.res | 21 ++++++++++++++++++---
 5 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/public/icons/orca.svg b/public/icons/orca.svg
index 66c5162e0..55031a0df 100644
--- a/public/icons/orca.svg
+++ b/public/icons/orca.svg
@@ -1098,4 +1098,10 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
   <symbol id="star" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5,0l-2,5h-5l4,3.5l-2,6l5-3.5&#xA;&#x9;l5,3.5l-2-6l4-3.5h-5L7.5,0z" />
   </symbol>
+  <symbol id="ReloadHero" width="50" height="50" viewBox="2000 500 1000 4000">
+    <g transform="translate(0.000000,2553.000000) scale(0.100000,-0.100000)" fill="red" stroke="none">
+    <path d="M10250 19623 c-1386 -111 -2547 -1090 -2884 -2431 -34 -137 -1413 -7926 -1443 -8152 -19 -145 -13 -489 11 -630 21 -122 59 -271 97 -385 41 -119 173 -387 246 -500 372 -567 976 -941 1649 -1020 106 -12 297 -15 1097 -15 l969 0 -6 -27 c-27 -128 -476 -2706 -472 -2710 3 -3 29 20 58 51 29 30 856 875 1838 1876 982 1002 1786 1825 1788 1831 2 5 -511 950 -1140 2099 -824 1507 -1145 2086 -1150 2073 -4 -10 -129 -711 -278 -1558 -149 -847 -273 -1552 -276 -1568 l-6 -27 -952 0 c-592 0 -974 4 -1007 10 -241 45 -416 289 -379 528 55 347 1365 7736 1381 7788 31 102 110 248 183 340 116 148 281 265 460 329 194 70 36 66 2641 62 2475 -3 2382 -2 2609 -48 501 -104 796 -381 898 -844 26 -118 35 -416 18 -581 -12 -123 -453 -2656 -515 -2960 -168 -828 -496 -1220 -1157 -1383 -227 -56 -554 -88 -810 -79 -76 3 -136 2 -134 -1 45 -93 2423 -4431 2428 -4431 14 0 238 222 318 315 322 376 543 799 663 1270 33 127 1299 7270 1327 7485 31 238 23 585 -21 845 -109 657 -464 1291 -966 1728 -431 374 -925 602 -1518 700 l-130 22 -2695 1 c-1482 0 -2715 -1 -2740 -3z"/>
+    <path d="M11596 15603 c-3 -16 -87 -489 -186 -1053 -99 -564 -183 -1037 -186 -1052 l-6 -28 974 0 c1094 0 1048 -3 1110 70 19 21 42 63 51 92 9 29 84 454 167 943 156 919 163 973 127 1013 -38 41 -56 42 -1070 42 l-975 0 -6 -27z"/>
+    </g>
+  </symbol>
 </svg>
\ No newline at end of file
diff --git a/src/Components/Accordion.res b/src/Components/Accordion.res
index 7299251b7..1b35b0d07 100644
--- 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
index 0843023fa..a6873afcd 100644
--- 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
index d34213241..61b97937e 100644
--- 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
index b9acf14ad..f8530a0f0 100644
--- 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)
   }
 }