From df64e4218ba6e0cdfdf3023bde1eac84ce8608aa Mon Sep 17 00:00:00 2001
From: Sanskar Atrey <sanskaratrey22@gmail.com>
Date: Tue, 17 Sep 2024 14:28:37 +0530
Subject: [PATCH] refactor: review comments addressed

---
 src/CardSchemeComponent.res          | 15 +++++----------
 src/Components/PaymentInputField.res |  3 +--
 src/Payments/CardPayment.res         |  3 ---
 src/Utilities/RecoilAtoms.res        |  1 -
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/CardSchemeComponent.res b/src/CardSchemeComponent.res
index 521ce1da4..dee03adf6 100644
--- a/src/CardSchemeComponent.res
+++ b/src/CardSchemeComponent.res
@@ -11,9 +11,7 @@ module CoBadgeCardSchemeDropDown = {
       <option disabled=true> {"Select a card brand"->React.string} </option>
       {eligibleCardSchemes
       ->Array.mapWithIndex((item, i) => {
-        <option key={Int.toString(i)} value=item className="opacity-0 w-0 h-0">
-          {item->React.string}
-        </option>
+        <option key={Int.toString(i)} value=item> {item->React.string} </option>
       })
       ->React.array}
     </select>
@@ -24,8 +22,6 @@ module CoBadgeCardSchemeDropDown = {
 let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand) => {
   let cardType = React.useMemo1(_ => cardBrand->CardUtils.getCardType, [cardBrand])
   let animate = cardType == NOTFOUND ? "animate-slideLeft" : "animate-slideRight"
-  let isCardCoBadged = Recoil.useRecoilValueFromAtom(RecoilAtoms.isCardCoBadged)
-  let setIsCardCoBadged = Recoil.useSetRecoilState(RecoilAtoms.isCardCoBadged)
   let cardBrandIcon = React.useMemo1(
     _ => CardUtils.getCardBrandIcon(cardType, paymentType),
     [cardBrand],
@@ -42,12 +38,11 @@ let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand) => {
     ~enabledCardSchemes,
   )
 
-  React.useEffect1(() => {
-    setIsCardCoBadged(_ => eligibleCardSchemes->Array.length > 1)
-    None
-  }, [[eligibleCardSchemes]])
+  let isCardCoBadged = eligibleCardSchemes->Array.length > 1
 
-  <div className={`${animate} flex items-center`}>
+  let marginLeft = isCardCoBadged ? "-ml-2" : ""
+
+  <div className={`${animate} flex items-center ${marginLeft} hellow-rodl`}>
     cardBrandIcon
     <RenderIf condition={isCardCoBadged}>
       <CoBadgeCardSchemeDropDown eligibleCardSchemes setCardBrand />
diff --git a/src/Components/PaymentInputField.res b/src/Components/PaymentInputField.res
index 27913c92c..7c8b5540b 100644
--- a/src/Components/PaymentInputField.res
+++ b/src/Components/PaymentInputField.res
@@ -20,7 +20,6 @@ let make = (
   ~placeholder="",
   ~appearance: CardThemeType.appearance,
   ~className="",
-  ~rightIconClassName="-ml-10",
   ~inputRef,
 ) => {
   let {themeObj, config} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -132,7 +131,7 @@ let make = (
           </div>
         </RenderIf>
       </div>
-      <div className={`relative flex ${rightIconClassName} items-center`}> {rightIcon} </div>
+      <div className="relative flex -ml-10 items-center"> {rightIcon} </div>
     </div>
     <RenderIf condition={innerLayout === Spaced}>
       {switch errorString {
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index c1508adf5..bdb3a5071 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -20,7 +20,6 @@ let make = (
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
-  let isCardCoBadged = Recoil.useRecoilValueFromAtom(RecoilAtoms.isCardCoBadged)
 
   let (nickname, setNickname) = React.useState(_ => "")
 
@@ -219,7 +218,6 @@ let make = (
     !isBancontact
 
   let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5"
-  let cardInputRightIconClassName = isCardCoBadged ? "-ml-12" : "-ml-10"
 
   let compressedLayoutStyleForCvcError =
     innerLayout === Compressed && cvcError->String.length > 0 ? "!border-l-0" : ""
@@ -258,7 +256,6 @@ let make = (
                 ? "border-b-0"
                 : ""}
               name=TestUtils.cardNoInputTestId
-              rightIconClassName=cardInputRightIconClassName
             />
             <div
               className="flex flex-row w-full place-content-between"
diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
index 37d8de175..26752e0f4 100644
--- a/src/Utilities/RecoilAtoms.res
+++ b/src/Utilities/RecoilAtoms.res
@@ -73,7 +73,6 @@ let userVpaId = Recoil.atom("userVpaId", defaultFieldValues)
 let userPixKey = Recoil.atom("userPixKey", defaultFieldValues)
 let userPixCPF = Recoil.atom("userPixCPF", defaultFieldValues)
 let userPixCNPJ = Recoil.atom("userPixCNPJ", defaultFieldValues)
-let isCardCoBadged = Recoil.atom("isCardCoBadged", false)
 
 type areOneClickWalletsRendered = {
   isGooglePay: bool,