From d607d9ee7feedca8bdc52c704b16bb0b8ca95547 Mon Sep 17 00:00:00 2001
From: Sanskar Atrey <sanskaratrey22@gmail.com>
Date: Mon, 26 Aug 2024 13:42:36 +0530
Subject: [PATCH] refactor: comments resolution

---
 src/CardSchemeComponent.res   | 8 +++++---
 src/Payment.res               | 4 ++--
 src/Payments/CardPayment.res  | 4 +++-
 src/Utilities/RecoilAtoms.res | 1 +
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/CardSchemeComponent.res b/src/CardSchemeComponent.res
index b52179e67..8bf13dc96 100644
--- a/src/CardSchemeComponent.res
+++ b/src/CardSchemeComponent.res
@@ -2,7 +2,7 @@ module CoBadgeCardSchemeDropDown = {
   @react.component
   let make = (~cardNumber, ~setCardBrand) => {
     <select
-      className="w-[15px]"
+      className="w-4"
       onChange={ev => {
         let target = ev->ReactEvent.Form.target
         let value = target["value"]
@@ -11,7 +11,7 @@ module CoBadgeCardSchemeDropDown = {
       <option disabled=true> {"Select a card brand"->React.string} </option>
       {cardNumber
       ->CardUtils.getCoBadgesCardSchemes
-      ->Array.mapWithIndex((item: string, i) => {
+      ->Array.mapWithIndex((item, i) => {
         <option key={Int.toString(i)} value=item className="opacity-0 w-0 h-0">
           {item->React.string}
         </option>
@@ -32,6 +32,8 @@ let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand, ~isCardCoBadge
   )
   <div className={`${animate} flex items-center`}>
     cardBrandIcon
-    {isCardCoBadged ? <CoBadgeCardSchemeDropDown cardNumber setCardBrand /> : React.null}
+    <RenderIf condition={isCardCoBadged}>
+      <CoBadgeCardSchemeDropDown cardNumber setCardBrand />
+    </RenderIf>
   </div>
 }
diff --git a/src/Payment.res b/src/Payment.res
index 1bf952480..623fd2772 100644
--- a/src/Payment.res
+++ b/src/Payment.res
@@ -18,6 +18,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(isManualRetryEnabled)
   let paymentToken = Recoil.useRecoilValueFromAtom(paymentTokenAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+  let isCardCoBadged = Recoil.useRecoilValueFromAtom(isCardCoBadged)
 
   let {iframeId} = keys
 
@@ -352,13 +353,12 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   }, (isExpiryValid, isExpiryComplete(cardExpiry)))
 
   React.useEffect(() => {
-    // Console.log("changing card brand" ++ cardBrand ++ cardNumber)
     setCardBrand(_ => cardNumber->CardUtils.getCardBrand)
     None
   }, [cardNumber])
 
   let icon = React.useMemo(() => {
-    <CardSchemeComponent cardNumber paymentType cardBrand setCardBrand isCardCoBadged=true />
+    <CardSchemeComponent cardNumber paymentType cardBrand setCardBrand isCardCoBadged />
   }, (cardType, paymentType, cardBrand, cardNumber))
 
   let cardProps: CardUtils.cardProps = (
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index eee784376..c1508adf5 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -20,6 +20,7 @@ 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(_ => "")
 
@@ -218,6 +219,7 @@ 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" : ""
@@ -256,7 +258,7 @@ let make = (
                 ? "border-b-0"
                 : ""}
               name=TestUtils.cardNoInputTestId
-              rightIconClassName="-ml-12"
+              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 96f3be110..7396cba86 100644
--- a/src/Utilities/RecoilAtoms.res
+++ b/src/Utilities/RecoilAtoms.res
@@ -66,6 +66,7 @@ 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,