fix: disable sdk button changes

src/Components/PayNowButton.res

@@ -14,103 +14,46 @@ module Loader = {
   }
 }
 @react.component
-let make = (
-  ~cvcProps: CardUtils.cvcProps,
-  ~cardProps: CardUtils.cardProps,
-  ~expiryProps: CardUtils.expiryProps,
-  ~selectedOption: PaymentModeType.payment,
-  ~savedMethods: array<PaymentType.customerMethods>,
-  ~paymentToken,
-) => {
+let make = () => {
   open RecoilAtoms
-  let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
-  let (isDisabled, setIsDisabled) = React.useState(() => false)
   let (showLoader, setShowLoader) = React.useState(() => false)
-  let areRequiredFieldsValidValue = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
-  let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
-  let showFields = Recoil.useRecoilValueFromAtom(showCardFieldsAtom)
 
-  let (isCVCValid, _, cvcNumber, _, _, _, _, _, _, _) = cvcProps
-  let (isCardValid, _, _, _, _, _, _, _, _, _) = cardProps
-  let (isExpiryValid, _, _, _, _, _, _, _, _) = expiryProps
-
-  let (token, _) = paymentToken
-  let customerMethod =
-    savedMethods
-    ->Array.filter(savedMethod => {
-      savedMethod.paymentToken === token
-    })
-    ->Array.get(0)
-    ->Option.getOr(PaymentType.defaultCustomerMethods)
-  let isCardPaymentMethod = customerMethod.paymentMethod === "card"
-  let complete = switch isCVCValid {
-  | Some(val) => token !== "" && val
-  | _ => false
-  }
-  let empty = cvcNumber == ""
-  let isSavedMethodCheck =
-    areRequiredFieldsValidValue && (!isCardPaymentMethod || (complete && !empty))
-
-  let validFormat =
-    isCardValid->Option.getOr(false) &&
-    isCVCValid->Option.getOr(false) &&
-    isExpiryValid->Option.getOr(false) &&
-    areRequiredFieldsValidValue
+  let {themeObj, localeString} = configAtom->Recoil.useRecoilValueFromAtom
+  let {sdkHandleConfirmPayment} = optionAtom->Recoil.useRecoilValueFromAtom
+  let (isPayNowButtonDisable, setIsPayNowButtonDisable) = payNowButtonDisable->Recoil.useRecoilState
 
   let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton
+  let buttonText = sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton)
 
   let handleMessage = (event: Types.event) => {
     let json = event.data->eventToJson->OrcaUtils.getStringfromjson("")->OrcaUtils.safeParse
     let dict = json->Utils.getDictFromJson
     switch dict->Dict.get("submitSuccessful") {
     | Some(_) =>
-      setIsDisabled(_ => false)
+      setIsPayNowButtonDisable(_ => false)
       setShowLoader(_ => false)
     | None => ()
     }
   }
 
   let handleOnClick = _ => {
-    setIsDisabled(_ => true)
+    setIsPayNowButtonDisable(_ => true)
     setShowLoader(_ => true)
     EventListenerManager.addSmartEventListener("message", handleMessage, "onSubmitSuccessful")
     Utils.handlePostMessage([("handleSdkConfirm", confirmPayload)])
   }
 
-  let buttonText = sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton)
-
-  React.useEffect(() => {
-    if showFields {
-      if selectedOption === Card {
-        setIsDisabled(_ => !validFormat)
-      } else {
-        setIsDisabled(_ => !areRequiredFieldsValidValue)
-      }
-    } else if !customerMethod.requiresCvv {
-      setIsDisabled(_ => customerMethod.requiresCvv)
-    } else {
-      setIsDisabled(_ => !isSavedMethodCheck)
-    }
-    None
-  }, (
-    validFormat,
-    areRequiredFieldsValidValue,
-    selectedOption,
-    isSavedMethodCheck,
-    customerMethod.requiresCvv,
-  ))
-
   <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
-      disabled=isDisabled
+      disabled=isPayNowButtonDisable
       onClick=handleOnClick
       className={`w-full flex flex-row justify-center items-center`}
       style={ReactDOMStyle.make(
         ~borderRadius=themeObj.buttonBorderRadius,
         ~backgroundColor=themeObj.buttonBackgroundColor,
         ~height=themeObj.buttonHeight,
-        ~cursor={isDisabled ? "not-allowed" : "pointer"},
-        ~opacity={isDisabled ? "0.6" : "1"},
+        ~cursor={isPayNowButtonDisable ? "not-allowed" : "pointer"},
+        ~opacity={isPayNowButtonDisable ? "0.6" : "1"},
         ~width=themeObj.buttonWidth,
         ~borderColor=themeObj.buttonBorderColor,
         (),

src/Components/SavedMethods.res

@@ -83,22 +83,14 @@ let make = (
   let isCardPaymentMethod = customerMethod.paymentMethod === "card"
   let isCardPaymentMethodValid = !customerMethod.requiresCvv || (complete && !empty)
 
-  React.useEffect(() => {
-    let customerMethod =
-      savedMethods
-      ->Array.filter(savedMethod => {
-        savedMethod.paymentToken === token
-      })
-      ->Array.get(0)
-      ->Option.getOr(PaymentType.defaultCustomerMethods)
-    let complete =
-      areRequiredFieldsValid &&
-      !isUnknownPaymentMethod &&
-      (!isCardPaymentMethod || isCardPaymentMethodValid)
-    let paymentType = customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
-    handlePostMessageEvents(~complete, ~empty, ~paymentType, ~loggerState, ~savedMethod=true)
-    None
-  }, (areRequiredFieldsValid, empty, customerMethod, isCardPaymentMethodValid))
+  let complete =
+    areRequiredFieldsValid &&
+    !isUnknownPaymentMethod &&
+    (!isCardPaymentMethod || isCardPaymentMethodValid)
+
+  let paymentType = customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
+
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn

src/Hooks/UtilityHooks.res

@@ -9,3 +9,15 @@ let useIsGuestCustomer = () => {
     }
   }, [customerPaymentMethods])
 }
+
+let useHandlePostMessages = (~complete, ~empty, ~paymentType, ~savedMethod=false) => {
+  let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+  let setIsPayNowButtonDisable = RecoilAtoms.payNowButtonDisable->Recoil.useSetRecoilState
+
+  React.useEffect(() => {
+    let isCompletelyFilled = complete && paymentType !== ""
+    setIsPayNowButtonDisable(_ => !isCompletelyFilled)
+    Utils.handlePostMessageEvents(~complete, ~empty, ~paymentType, ~loggerState, ~savedMethod)
+    None
+  }, (complete, empty, paymentType))
+}

src/PaymentElement.res

@@ -468,14 +468,7 @@ let make = (
     </RenderIf>
     <RenderIf condition={sdkHandleConfirmPayment.handleConfirm}>
       <div className="mt-4">
-        <PayNowButton
-          cvcProps
-          cardProps
-          expiryProps
-          selectedOption={selectedOption->PaymentModeType.paymentMode}
-          savedMethods
-          paymentToken
-        />
+        <PayNowButton />
       </div>
     </RenderIf>
     <PoweredBy />

src/Payments/ACHBankDebit.res

@@ -50,10 +50,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     modalData->Option.isSome
   let empty = email.value == "" || fullName.value != ""
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="ach_bank_debit", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="ach_bank_debit")
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn

src/Payments/ACHBankTransfer.res

@@ -13,10 +13,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
   let complete = email.value != "" && email.isValid->Option.getOr(false)
   let empty = email.value == ""
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="bank_transfer", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="bank_transfer")
 
   React.useEffect(() => {
     setComplete(_ => complete)

src/Payments/BacsBankDebit.res

@@ -64,10 +64,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     country.value == "" ||
     state.value == ""
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="bacs_bank_debit", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="bacs_bank_debit")
 
   React.useEffect(() => {
     setComplete(_ => complete)

src/Payments/BacsBankTransfer.res

@@ -18,10 +18,7 @@ let default = (props: props) => {
   let complete = email.value != "" && fullName.value != "" && email.isValid->Option.getOr(false)
   let empty = email.value == "" || fullName.value == ""
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="bank_transfer", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="bank_transfer")
 
   React.useEffect(() => {
     setComplete(_ => complete)

src/Payments/BecsBankDebit.res

@@ -43,10 +43,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     | None => true
     }
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="becs_bank_debit", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="becs_bank_debit")
 
   React.useEffect(() => {
     setComplete(_ => complete)

src/Payments/Boleto.res

@@ -44,10 +44,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     )
   }, [socialSecurityNumber])
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="boleto", ~loggerState)
-    None
-  }, (complete, empty))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="boleto")
 
   React.useEffect(() => {
     setComplete(_ => complete)

src/Payments/CardPayment.res

@@ -81,10 +81,11 @@ let make = (
     None
   }, [complete])
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="card", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(
+    ~complete=complete && areRequiredFieldsValid,
+    ~empty,
+    ~paymentType="card",
+  )
 
   let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
   let isCvcValidValue = CardUtils.getBoolOptionVal(isCVCValid)

src/Payments/KlarnaPayment.res

@@ -30,10 +30,9 @@ let make = (~paymentType, ~countryProps, ~list: PaymentMethodsRecord.list) => {
 
   let complete = email.value != "" && fullName.value != "" && email.isValid->Option.getOr(false)
   let empty = email.value == "" || fullName.value == ""
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="klarna", ~loggerState)
-    None
-  }, (empty, complete))
+
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="klarna")
+
   React.useEffect(() => {
     setComplete(_ => complete)
     None

src/Payments/PaymentMethodsWrapper.res

@@ -52,15 +52,11 @@ let make = (
 
   let empty = areRequiredFieldsEmpty
 
-  React.useEffect(() => {
-    handlePostMessageEvents(
-      ~complete,
-      ~empty,
-      ~paymentType=paymentMethodDetails.paymentMethodName,
-      ~loggerState,
-    )
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(
+    ~complete,
+    ~empty,
+    ~paymentType=paymentMethodDetails.paymentMethodName,
+  )
 
   let submitCallback = React.useCallback((ev: Window.event) => {
     let json = ev.data->JSON.parseExn

src/Payments/SepaBankDebit.res

@@ -37,10 +37,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list)
     | None => true
     }
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="sepa_bank_debit", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="sepa_bank_debit")
 
   React.useEffect(() => {
     setComplete(_ => complete)

src/Payments/SepaBankTransfer.res

@@ -28,10 +28,8 @@ let make = (
   let complete = email.value != "" && fullName.value != "" && email.isValid->Option.getOr(false)
   let empty = email.value == "" || fullName.value == ""
 
-  React.useEffect(() => {
-    handlePostMessageEvents(~complete, ~empty, ~paymentType="bank_transfer", ~loggerState)
-    None
-  }, (empty, complete))
+  UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="bank_transfer")
+
   React.useEffect(() => {
     setComplete(_ => complete)
     None

src/TabCard.res

@@ -4,6 +4,7 @@ let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: b
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {readOnly, customMethodNames} = Recoil.useRecoilValueFromAtom(optionAtom)
   let setSelectedOption = Recoil.useSetRecoilState(selectedOptionAtom)
+  let setIsPayNowButtonDisable = Recoil.useSetRecoilState(payNowButtonDisable)
   let (tabClass, tabLabelClass, tabIconClass) = React.useMemo(
     () => isActive ? ("Tab--selected", "TabLabel--selected", "TabIcon--selected") : ("", "", ""),
     [isActive],
@@ -14,6 +15,10 @@ let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: b
     paymentOption.displayName,
     paymentOption.icon,
   )
+  let onClick = _ => {
+    setIsPayNowButtonDisable(_ => true)
+    setSelectedOption(_ => paymentOption.paymentMethodName)
+  }
   <button
     className={`Tab ${tabClass} flex flex-col animate-slowShow`}
     type_="button"
@@ -26,7 +31,7 @@ let make = (~paymentOption: PaymentMethodsRecord.paymentFieldsInfo, ~isActive: b
       ~cursor="pointer",
       (),
     )}
-    onClick={_ => setSelectedOption(_ => paymentOption.paymentMethodName)}>
+    onClick>
     <div className={`TabIcon ${tabIconClass}`}>
       {switch icon {
       | Some(ele) => ele

src/Utilities/RecoilAtoms.res

@@ -16,6 +16,7 @@ let paymentTokenAtom = Recoil.atom("paymentToken", ("", ""))
 let showCardFieldsAtom = Recoil.atom("showCardFields", false)
 let phoneJson = Recoil.atom("phoneJson", Loading)
 let cardBrand = Recoil.atom("cardBrand", "")
+let payNowButtonDisable = Recoil.atom("payNowButtonDisable", true)
 
 open RecoilAtomTypes