refactor: apply suggested changes

Author: aritro2002

src/CardSchemeComponent.res

@@ -22,7 +22,13 @@ module CoBadgeCardSchemeDropDown = {
 }
 
 @react.component
-let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand) => {
+let make = (
+  ~cardNumber,
+  ~paymentType,
+  ~cardBrand,
+  ~setCardBrand,
+  ~isCoBadgedCardDetectedOnce: React.ref<bool>,
+) => {
   let cardType = React.useMemo1(_ => cardBrand->CardUtils.getCardType, [cardBrand])
   let animate = cardType == NOTFOUND ? "animate-slideLeft" : "animate-slideRight"
   let cardBrandIcon = React.useMemo1(
@@ -46,7 +52,6 @@ let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand) => {
   let marginLeft = isCardCoBadged ? "-ml-2" : ""
 
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
-  let isCoBadgedCardDetectedOnce = React.useRef(false)
   let shouldShowCoBadgeCardSchemeDropDown =
     isCardCoBadged && cardNumber->CardUtils.clearSpaces->String.length >= 16
 

src/Hooks/CommonCardProps.res

@@ -27,6 +27,8 @@ let useCardForm = (~logger, ~paymentType) => {
   let expiryRef = React.useRef(Nullable.null)
   let cvcRef = React.useRef(Nullable.null)
   let zipRef = React.useRef(Nullable.null)
+  let isCoBadgedCardDetectedOnce = React.useRef(false)
+  let prevCardBrandRef = React.useRef("")
 
   let (isCardValid, setIsCardValid) = React.useState(_ => None)
   let (isExpiryValid, setIsExpiryValid) = React.useState(_ => None)
@@ -84,10 +86,13 @@ let useCardForm = (~logger, ~paymentType) => {
   }, [showPaymentMethodsScreen])
 
   React.useEffect(() => {
-    setCvcNumber(_ => "")
-    setCardExpiry(_ => "")
-    setIsExpiryValid(_ => None)
-    setIsCVCValid(_ => None)
+    if !isCoBadgedCardDetectedOnce.current {
+      setCvcNumber(_ => "")
+      setCardExpiry(_ => "")
+      setIsExpiryValid(_ => None)
+      setIsCVCValid(_ => None)
+    }
+    prevCardBrandRef.current = cardBrand
     None
   }, [cardBrand])
 
@@ -120,7 +125,7 @@ let useCardForm = (~logger, ~paymentType) => {
       setDisplayPincode(_ => false)
     }
     setCardNumber(_ => card)
-    if card->String.length == 0 {
+    if card->String.length == 0 && prevCardBrandRef.current !== "" {
       setCvcNumber(_ => "")
       setCardExpiry(_ => "")
       setIsExpiryValid(_ => None)
@@ -293,7 +298,7 @@ let useCardForm = (~logger, ~paymentType) => {
   }, [cardNumber])
 
   let icon = React.useMemo(() => {
-    <CardSchemeComponent cardNumber paymentType cardBrand setCardBrand />
+    <CardSchemeComponent cardNumber paymentType cardBrand setCardBrand isCoBadgedCardDetectedOnce />
   }, (cardType, paymentType, cardBrand, cardNumber))
 
   let cardProps: CardUtils.cardProps = {