feat: added support for cobadged cards

src/CardSchemeComponent.res

@@ -0,0 +1,51 @@
+module CoBadgeCardSchemeDropDown = {
+  @react.component
+  let make = (~eligibleCardSchemes, ~setCardBrand) => {
+    <select
+      className="w-4"
+      onChange={ev => {
+        let target = ev->ReactEvent.Form.target
+        let value = target["value"]
+        setCardBrand(_ => value)
+      }}>
+      <option disabled=true> {"Select a card brand"->React.string} </option>
+      {eligibleCardSchemes
+      ->Array.mapWithIndex((item, i) => {
+        <option key={Int.toString(i)} value=item> {item->React.string} </option>
+      })
+      ->React.array}
+    </select>
+  }
+}
+
+@react.component
+let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand) => {
+  let cardType = React.useMemo1(_ => cardBrand->CardUtils.getCardType, [cardBrand])
+  let animate = cardType == NOTFOUND ? "animate-slideLeft" : "animate-slideRight"
+  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,
+  )
+
+  let isCardCoBadged = eligibleCardSchemes->Array.length > 1
+
+  let marginLeft = isCardCoBadged ? "-ml-2" : ""
+
+  <div className={`${animate} flex items-center ${marginLeft} hellow-rodl`}>
+    cardBrandIcon
+    <RenderIf condition={isCardCoBadged}>
+      <CoBadgeCardSchemeDropDown eligibleCardSchemes setCardBrand />
+    </RenderIf>
+  </div>
+}

src/CardUtils.res

@@ -26,6 +26,7 @@ type cardProps = (
   string,
   (string => string) => unit,
   int,
+  string,
 )
 
 type expiryProps = (
@@ -655,3 +656,18 @@ let getPaymentMethodBrand = (customerMethod: PaymentType.customerMethods) => {
     )
   }
 }
+
+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/Components/DynamicFields.res

@@ -109,6 +109,7 @@ let make = (
     "",
     _ => (),
     0,
+    "",
   )
 
   let defaultExpiryProps = (
@@ -163,6 +164,7 @@ let make = (
     cardError,
     _,
     maxCardLength,
+    cardScheme,
   ) = switch cardProps {
   | Some(cardProps) => cardProps
   | None => defaultCardProps

src/Components/PaymentInputField.res

@@ -131,7 +131,7 @@ let make = (
           </div>
         </RenderIf>
       </div>
-      <div className={`relative flex -ml-10 items-center`}> {rightIcon} </div>
+      <div className="relative flex -ml-10 items-center"> {rightIcon} </div>
     </div>
     <RenderIf condition={innerLayout === Spaced}>
       {switch errorString {

src/Payment.res

@@ -47,13 +47,15 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   let (isZipValid, setIsZipValid) = React.useState(_ => None)
   let (isCardSupported, setIsCardSupported) = React.useState(_ => None)
 
-  let (cardBrand, maxCardLength) = React.useMemo(() => {
-    let brand = getCardBrand(cardNumber)
-    let maxLength = getMaxLength(cardNumber)
-    let isNotBancontact = selectedOption !== "bancontact_card" && brand == ""
-    !showFields && isNotBancontact ? (cardScheme, maxLength) : (brand, maxLength)
+  let maxCardLength = React.useMemo(() => {
+    getMaxLength(cardNumber)
   }, (cardNumber, cardScheme, showFields))
 
+  let cardBrand = getCardBrand(cardNumber)
+  let isNotBancontact = selectedOption !== "bancontact_card" && cardBrand == ""
+  let (cardBrand, setCardBrand) = React.useState(_ =>
+    !showFields && isNotBancontact ? cardScheme : cardBrand
+  )
   let supportedCardBrands = React.useMemo(() => {
     paymentMethodListValue->PaymentUtils.getSupportedCardBrands
   }, [paymentMethodListValue])
@@ -219,7 +221,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     }
     let cardNetwork = {
       if cardBrand != "" {
-        [("card_network", cardNumber->CardUtils.getCardBrand->JSON.Encode.string)]
+        [("card_network", cardBrand->JSON.Encode.string)]
       } else {
         []
       }
@@ -350,11 +352,14 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     None
   }, (isExpiryValid, isExpiryComplete(cardExpiry)))
 
+  React.useEffect(() => {
+    setCardBrand(_ => cardNumber->CardUtils.getCardBrand)
+    None
+  }, [cardNumber])
+
   let icon = React.useMemo(() => {
-    let animate = cardType == NOTFOUND ? "animate-slideLeft" : "animate-slideRight"
-    let cardBrandIcon = getCardBrandIcon(cardType, paymentType)
-    <div className=animate> cardBrandIcon </div>
-  }, (cardType, paymentType))
+    <CardSchemeComponent cardNumber paymentType cardBrand setCardBrand />
+  }, (cardType, paymentType, cardBrand, cardNumber))
 
   let cardProps: CardUtils.cardProps = (
     isCardValid,
@@ -368,6 +373,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     cardError,
     setCardError,
     maxCardLength,
+    cardBrand,
   )
 
   let expiryProps: CardUtils.expiryProps = (

src/Payments/CardPayment.res

@@ -35,12 +35,9 @@ let make = (
     cardError,
     setCardError,
     maxCardLength,
+    cardBrand,
   ) = cardProps
 
-  let cardBrand = React.useMemo(() => {
-    cardNumber->CardUtils.getCardBrand
-  }, [cardNumber])
-
   let (
     isExpiryValid,
     setIsExpiryValid,
@@ -207,6 +204,7 @@ let make = (
     nickname,
     isCardBrandValid,
     isManualRetryEnabled,
+    cardProps,
   ))
   useSubmitPaymentData(submitCallback)
 

src/RenderPaymentMethods.res

@@ -24,6 +24,7 @@ let make = (
     _,
     _,
     maxCardLength,
+    _,
   ) = cardProps
 
   let (

src/SingleLineCardPayment.res

@@ -26,6 +26,7 @@ let make = (
     _,
     _,
     maxCardLength,
+    _,
   ) = cardProps
 
   let (