refactor: minor refactor

src/Components/PayNowButton.res

@@ -16,6 +16,7 @@ let make = () => {
   let (showLoader, setShowLoader) = React.useState(() => false)
   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)
@@ -27,28 +28,31 @@ let make = () => {
     switch dict->Dict.get("submitSuccessful") {
     | Some(submitSuccessfulVal) =>
       if !(submitSuccessfulVal->JSON.Decode.bool->Option.getOr(false)) {
+        setIsPayNowButtonDisable(_ => false)
         setShowLoader(_ => false)
       }
     | None => ()
     }
   }
 
   let handleOnClick = _ => {
+    setIsPayNowButtonDisable(_ => true)
     setShowLoader(_ => true)
     EventListenerManager.addSmartEventListener("message", handleMessage, "onSubmitSuccessful")
     handlePostMessage([("handleSdkConfirm", confirmPayload)])
   }
 
   <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
+      disabled=isPayNowButtonDisable
       onClick=handleOnClick
       className={`w-full flex flex-row justify-center items-center`}
       style={
         borderRadius: themeObj.buttonBorderRadius,
         backgroundColor: themeObj.buttonBackgroundColor,
         height: themeObj.buttonHeight,
-        cursor: "pointer",
-        opacity: "1",
+        cursor: {isPayNowButtonDisable ? "not-allowed" : "pointer"},
+        opacity: {isPayNowButtonDisable ? "0.6" : "1"},
         width: themeObj.buttonWidth,
         border: `${themeObj.buttonBorderWidth} solid ${themeObj.buttonBorderColor}`,
       }>

src/Utilities/RecoilAtoms.res

@@ -22,6 +22,7 @@ let paymentTokenAtom = Recoil.atom(
 let showCardFieldsAtom = Recoil.atom("showCardFields", false)
 let phoneJson = Recoil.atom("phoneJson", Loading)
 let cardBrand = Recoil.atom("cardBrand", "")
+let payNowButtonDisable = Recoil.atom("payNowButtonDisable", false)
 let paymentMethodCollectOptionAtom = Recoil.atom(
   "paymentMethodCollectOptions",
   PaymentMethodCollectUtils.defaultPaymentMethodCollectOptions,