refactor: comments resolution

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

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 = (

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"

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,