refactor: card scheme filtering logic update

src/CardSchemeComponent.res

@@ -1,6 +1,6 @@
 module CoBadgeCardSchemeDropDown = {
   @react.component
-  let make = (~cardNumber, ~setCardBrand) => {
+  let make = (~eligibleCardSchemes, ~setCardBrand) => {
     <select
       className="w-4"
       onChange={ev => {
@@ -9,8 +9,7 @@ module CoBadgeCardSchemeDropDown = {
         setCardBrand(_ => value)
       }}>
       <option disabled=true> {"Select a card brand"->React.string} </option>
-      {cardNumber
-      ->CardUtils.getCoBadgesCardSchemes
+      {eligibleCardSchemes
       ->Array.mapWithIndex((item, i) => {
         <option key={Int.toString(i)} value=item className="opacity-0 w-0 h-0">
           {item->React.string}
@@ -22,18 +21,36 @@ module CoBadgeCardSchemeDropDown = {
 }
 
 @react.component
-let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand, ~isCardCoBadged=false) => {
+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],
   )
+
+  let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+  let enabledCardSchemes =
+    paymentMethodListValue->PaymentUtils.getSupportedCardBrands->Option.getOr([])
+
+  let matchedCardSchemes = cardNumber->CardUtils.getAllMatchedCardSchemes
+
+  let eligibleCardSchemes = CardUtils.getEligibleCoBadgedCardSchemes(
+    ~matchedCardSchemes,
+    ~enabledCardSchemes,
+  )
+
+  React.useEffect1(() => {
+    setIsCardCoBadged(_ => eligibleCardSchemes->Array.length > 1)
+    None
+  }, [[eligibleCardSchemes]])
+
   <div className={`${animate} flex items-center`}>
     cardBrandIcon
     <RenderIf condition={isCardCoBadged}>
-      <CoBadgeCardSchemeDropDown cardNumber setCardBrand />
+      <CoBadgeCardSchemeDropDown eligibleCardSchemes setCardBrand />
     </RenderIf>
   </div>
 }

src/CardUtils.res

@@ -657,11 +657,17 @@ let getPaymentMethodBrand = (customerMethod: PaymentType.customerMethods) => {
   }
 }
 
-let getCoBadgesCardSchemes = cardNumber => {
+let getAllMatchedCardSchemes = cardNumber => {
   CardPattern.cardPatterns->Array.reduce([], (acc, item) => {
     if String.match(cardNumber, item.pattern)->Option.isSome {
       acc->Array.push(item.issuer)
     }
     acc
   })
 }
+
+let getEligibleCoBadgedCardSchemes = (~matchedCardSchemes, ~enabledCardSchemes) => {
+  matchedCardSchemes->Array.filter(ele => {
+    enabledCardSchemes->Array.includes(ele->String.toLowerCase)
+  })
+}

src/Payment.res

@@ -18,7 +18,6 @@ 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
 
@@ -359,7 +358,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   }, [cardNumber])
 
   let icon = React.useMemo(() => {
-    <CardSchemeComponent cardNumber paymentType cardBrand setCardBrand isCardCoBadged />
+    <CardSchemeComponent cardNumber paymentType cardBrand setCardBrand />
   }, (cardType, paymentType, cardBrand, cardNumber))
 
   let cardProps: CardUtils.cardProps = (