Revert "refactor: moved Card Number, Cvc and Expiry to Dynamic Fields…

… for Card Payment method"

This reverts commit 1b92d44.

src/Components/DynamicFields.res

@@ -70,13 +70,7 @@ let make = (
       ~isAllStoredCardsHaveName,
       (),
     )
-    ->DynamicFieldsUtils.updateDynamicFields(
-      billingAddress,
-      ~paymentMethodListValue,
-      ~paymentMethod,
-      ~isSavedCardFlow,
-      (),
-    )
+    ->DynamicFieldsUtils.updateDynamicFields(billingAddress, ())
     ->Belt.SortArray.stableSortBy(PaymentMethodsRecord.sortPaymentMethodFields)
     //<...>//
   }, (requiredFields, isAllStoredCardsHaveName, isSavedCardFlow))
@@ -166,7 +160,7 @@ let make = (
     cardRef,
     icon,
     cardError,
-    setCardError,
+    _,
     maxCardLength,
   ) = switch cardProps {
   | Some(cardProps) => cardProps
@@ -182,7 +176,7 @@ let make = (
     expiryRef,
     _,
     expiryError,
-    setExpiryError,
+    _,
   ) = switch expiryProps {
   | Some(expiryProps) => expiryProps
   | None => defaultExpiryProps
@@ -198,7 +192,7 @@ let make = (
     cvcRef,
     _,
     cvcError,
-    setCvcError,
+    _,
   ) = switch cvcProps {
   | Some(cvcProps) => cvcProps
   | None => defaultCvcProps
@@ -293,17 +287,9 @@ let make = (
     ~isSavedCardFlow,
     ~isAllStoredCardsHaveName,
     ~setRequiredFieldsBody,
-    ~paymentMethodListValue,
   )
 
-  let submitCallback = DynamicFieldsUtils.useSubmitCallback(
-    ~cardNumber,
-    ~setCardError,
-    ~cardExpiry,
-    ~setExpiryError,
-    ~cvcNumber,
-    ~setCvcError,
-  )
+  let submitCallback = DynamicFieldsUtils.useSubmitCallback()
   useSubmitPaymentData(submitCallback)
 
   let bottomElement = <InfoElement />
@@ -351,7 +337,7 @@ let make = (
           key={`outside-billing-${index->Int.toString}`}
           className="flex flex-col w-full place-content-between"
           style={ReactDOMStyle.make(
-            ~marginTop=index !== 0 ? themeObj.spacingGridColumn : "",
+            ~marginTop=index !== 0 || paymentMethod === "card" ? themeObj.spacingGridColumn : "",
             ~gridColumnGap=themeObj.spacingGridRow,
             (),
           )}>

src/Payment.res

@@ -228,6 +228,13 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
       checkCardExpiry(getCardElementValue(iframeId, "card-expiry"))
     | _ => true
     }
+    let cardNetwork = {
+      if cardBrand != "" {
+        [("card_network", cardNumber->CardUtils.getCardBrand->JSON.Encode.string)]
+      } else {
+        []
+      }
+    }
     if validFormat {
       let body = switch paymentMode->getPaymentMode {
       | Card =>
@@ -239,7 +246,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
           ~year,
           ~cardHolderName="",
           ~cvcNumber,
-          ~cardBrand,
+          ~cardBrand=cardNetwork,
           (),
         )
       | CardNumberElement =>
@@ -251,7 +258,7 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
           ~year,
           ~cardHolderName="",
           ~cvcNumber=localCvcNumber,
-          ~cardBrand,
+          ~cardBrand=cardNetwork,
           (),
         )
       | _ => []

src/Payments/CardPayment.res

@@ -14,22 +14,59 @@ let make = (
   open Utils
   open UtilityHooks
 
-  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let {innerLayout} = config.appearance
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
 
   let (nickname, setNickname) = React.useState(_ => "")
 
-  let (_, _, cardNumber, _, _, _, _, _, _, _) = cardProps
+  let (
+    isCardValid,
+    setIsCardValid,
+    cardNumber,
+    changeCardNumber,
+    handleCardBlur,
+    cardRef,
+    icon,
+    cardError,
+    setCardError,
+    maxCardLength,
+  ) = cardProps
 
   let cardBrand = React.useMemo(() => {
     cardNumber->CardUtils.getCardBrand
   }, [cardNumber])
 
+  let (
+    isExpiryValid,
+    setIsExpiryValid,
+    cardExpiry,
+    changeCardExpiry,
+    handleExpiryBlur,
+    expiryRef,
+    _,
+    expiryError,
+    setExpiryError,
+  ) = expiryProps
+
+  let (
+    isCVCValid,
+    setIsCVCValid,
+    cvcNumber,
+    _,
+    changeCVCNumber,
+    handleCVCBlur,
+    cvcRef,
+    _,
+    cvcError,
+    setCvcError,
+  ) = cvcProps
   let {displaySavedPaymentMethodsCheckbox} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
   let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
+  let setComplete = Recoil.useSetRecoilState(RecoilAtoms.fieldsComplete)
   let (isSaveCardsChecked, setIsSaveCardsChecked) = React.useState(_ => false)
 
   let setUserError = message => {
@@ -39,15 +76,23 @@ let make = (
   let (requiredFieldsBody, setRequiredFieldsBody) = React.useState(_ => Dict.make())
 
   let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsValid)
-  let areRequiredFieldsEmpty = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsEmpty)
 
-  useHandlePostMessages(
-    ~complete=areRequiredFieldsValid,
-    ~empty=areRequiredFieldsEmpty,
-    ~paymentType="card",
-  )
+  let complete = isAllValid(isCardValid, isCVCValid, isExpiryValid, true, "payment")
+  let empty = cardNumber == "" || cardExpiry == "" || cvcNumber == ""
+  React.useEffect(() => {
+    setComplete(_ => complete)
+    None
+  }, [complete])
+
+  useHandlePostMessages(~complete=complete && areRequiredFieldsValid, ~empty, ~paymentType="card")
 
   let isGuestCustomer = useIsGuestCustomer()
+  let isCvcValidValue = CardUtils.getBoolOptionVal(isCVCValid)
+  let (cardEmpty, cardComplete, cardInvalid) = CardUtils.useCardDetails(
+    ~cvcNumber,
+    ~isCVCValid,
+    ~isCvcValidValue,
+  )
 
   let isCustomerAcceptanceRequired = useIsCustomerAcceptanceRequired(
     ~displaySavedPaymentMethodsCheckbox,
@@ -58,17 +103,38 @@ let make = (
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn
     let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
+    let (month, year) = CardUtils.getExpiryDates(cardExpiry)
 
     let onSessionBody = [("customer_acceptance", PaymentBody.customerAcceptanceBody)]
-    let defaultCardBody = PaymentBody.dynamicCardPaymentBody(~cardBrand, ~nickname, ())
+    let cardNetwork = {
+      if cardBrand != "" {
+        [("card_network", cardBrand->JSON.Encode.string)]
+      } else {
+        []
+      }
+    }
+    let defaultCardBody = PaymentBody.cardPaymentBody(
+      ~cardNumber,
+      ~month,
+      ~year,
+      ~cardHolderName="",
+      ~cvcNumber,
+      ~cardBrand=cardNetwork,
+      ~nickname,
+      (),
+    )
     let banContactBody = PaymentBody.bancontactBody()
     let cardBody = if isCustomerAcceptanceRequired {
       defaultCardBody->Array.concat(onSessionBody)
     } else {
       defaultCardBody
     }
     if confirm.doSubmit {
-      let validFormat = areRequiredFieldsValid
+      let validFormat =
+        (isBancontact ||
+        (isCVCValid->Option.getOr(false) &&
+        isCardValid->Option.getOr(false) &&
+        isExpiryValid->Option.getOr(false))) && areRequiredFieldsValid
       if validFormat && (showFields || isBancontact) {
         intent(
           ~bodyArr={
@@ -83,11 +149,32 @@ let make = (
           ~handleUserError=false,
           (),
         )
-      } else if !validFormat {
-        setUserError(localeString.enterValidDetailsText)
+      } else {
+        if cardNumber === "" {
+          setCardError(_ => localeString.cardNumberEmptyText)
+          setUserError(localeString.enterFieldsText)
+        }
+        if cardExpiry === "" {
+          setExpiryError(_ => localeString.cardExpiryDateEmptyText)
+          setUserError(localeString.enterFieldsText)
+        }
+        if !isBancontact && cvcNumber === "" {
+          setCvcError(_ => localeString.cvcNumberEmptyText)
+          setUserError(localeString.enterFieldsText)
+        }
+        if !validFormat {
+          setUserError(localeString.enterValidDetailsText)
+        }
       }
     }
-  }, (areRequiredFieldsValid, requiredFieldsBody, isCustomerAcceptanceRequired, nickname))
+  }, (
+    areRequiredFieldsValid,
+    requiredFieldsBody,
+    empty,
+    complete,
+    isCustomerAcceptanceRequired,
+    nickname,
+  ))
   useSubmitPaymentData(submitCallback)
 
   let paymentMethod = isBancontact ? "bank_redirect" : "card"
@@ -101,12 +188,114 @@ let make = (
 
   let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5"
 
+  let compressedLayoutStyleForCvcError =
+    innerLayout === Compressed && cvcError->String.length > 0 ? "!border-l-0" : ""
+
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
       <div
         className="flex flex-col"
         style={ReactDOMStyle.make(~gridGap=themeObj.spacingGridColumn, ())}>
         <div className="w-full">
+          <RenderIf condition={innerLayout === Compressed}>
+            <div
+              style={ReactDOMStyle.make(
+                ~marginBottom="5px",
+                ~fontSize=themeObj.fontSizeLg,
+                ~opacity="0.6",
+                (),
+              )}>
+              {React.string(localeString.cardHeader)}
+            </div>
+          </RenderIf>
+          <RenderIf condition={!isBancontact}>
+            <PaymentInputField
+              fieldName=localeString.cardNumberLabel
+              isValid=isCardValid
+              setIsValid=setIsCardValid
+              value=cardNumber
+              onChange=changeCardNumber
+              onBlur=handleCardBlur
+              rightIcon={icon}
+              errorString=cardError
+              paymentType
+              type_="tel"
+              appearance=config.appearance
+              maxLength=maxCardLength
+              inputRef=cardRef
+              placeholder="1234 1234 1234 1234"
+              className={innerLayout === Compressed && cardError->String.length > 0
+                ? "border-b-0"
+                : ""}
+            />
+            <div
+              className="flex flex-row w-full place-content-between"
+              style={ReactDOMStyle.make(
+                ~marginTop={
+                  innerLayout === Spaced ? themeObj.spacingGridColumn : ""
+                },
+                ~gridColumnGap={innerLayout === Spaced ? themeObj.spacingGridRow : ""},
+                (),
+              )}>
+              <div className={innerLayout === Spaced ? "w-[45%]" : "w-[50%]"}>
+                <PaymentInputField
+                  fieldName=localeString.validThruText
+                  isValid=isExpiryValid
+                  setIsValid=setIsExpiryValid
+                  value=cardExpiry
+                  onChange=changeCardExpiry
+                  onBlur=handleExpiryBlur
+                  errorString=expiryError
+                  paymentType
+                  type_="tel"
+                  appearance=config.appearance
+                  maxLength=7
+                  inputRef=expiryRef
+                  placeholder="MM / YY"
+                />
+              </div>
+              <div className={innerLayout === Spaced ? "w-[45%]" : "w-[50%]"}>
+                <PaymentInputField
+                  fieldName=localeString.cvcTextLabel
+                  isValid=isCVCValid
+                  setIsValid=setIsCVCValid
+                  value=cvcNumber
+                  onChange=changeCVCNumber
+                  onBlur=handleCVCBlur
+                  errorString=cvcError
+                  paymentType
+                  rightIcon={CardUtils.setRightIconForCvc(
+                    ~cardComplete,
+                    ~cardEmpty,
+                    ~cardInvalid,
+                    ~color=themeObj.colorIconCardCvcError,
+                  )}
+                  appearance=config.appearance
+                  type_="tel"
+                  className={`tracking-widest w-full ${compressedLayoutStyleForCvcError}`}
+                  maxLength=4
+                  inputRef=cvcRef
+                  placeholder="123"
+                />
+              </div>
+            </div>
+            <RenderIf
+              condition={cardError->String.length > 0 ||
+              cvcError->String.length > 0 ||
+              expiryError->String.length > 0}>
+              <div
+                className="Error pt-1"
+                style={ReactDOMStyle.make(
+                  ~color=themeObj.colorDangerText,
+                  ~fontSize=themeObj.fontSizeSm,
+                  ~alignSelf="start",
+                  ~textAlign="left",
+                  (),
+                )}>
+                {React.string("Invalid input")}
+              </div>
+            </RenderIf>
+          </RenderIf>
           <DynamicFields
             paymentType
             paymentMethod