From 18529a6eb24ae5e6468a6048779a40c8f061982f Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Mon, 11 Mar 2024 15:37:28 +0530
Subject: [PATCH] feat: implemented 3rd method changes

---
 src/BrutalTheme.res                      |  2 +-
 src/CharcoalTheme.res                    |  2 +-
 src/Components/PayNowButton.res          | 56 ++++++++++++++----------
 src/DefaultTheme.res                     |  2 +-
 src/LoaderController.res                 |  9 ++--
 src/MidnightTheme.res                    |  2 +-
 src/NoTheme.res                          |  2 +-
 src/PaymentElement.res                   |  4 +-
 src/SoftTheme.res                        |  2 +-
 src/Types/PaymentType.res                | 20 ++++-----
 src/Types/ThemeImporter.res              |  2 +-
 src/orca-loader/Elements.res             |  2 -
 src/orca-loader/LoaderPaymentElement.res |  8 ----
 13 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/src/BrutalTheme.res b/src/BrutalTheme.res
index 21104d434..5ba3b8d0d 100644
--- a/src/BrutalTheme.res
+++ b/src/BrutalTheme.res
@@ -171,7 +171,7 @@ let default = brutal
 let defaultRules = brutalRules
 
 let defaultButtonRules = {
-  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  ...PaymentType.defaultSdkHandleConfirmPayment,
   backgroundColor: default.colorPrimary,
   borderColor: default.borderColor,
   textColor: default.colorBackgroundText,
diff --git a/src/CharcoalTheme.res b/src/CharcoalTheme.res
index 51e6972e1..4c4ff7811 100644
--- a/src/CharcoalTheme.res
+++ b/src/CharcoalTheme.res
@@ -171,7 +171,7 @@ let default = charcoal
 let defaultRules = charcoalRules
 
 let defaultButtonRules = {
-  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  ...PaymentType.defaultSdkHandleConfirmPayment,
   backgroundColor: default.colorPrimary,
   borderColor: default.colorPrimary,
   textColor: default.colorBackgroundText,
diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res
index cd42a7563..783a42cb0 100644
--- a/src/Components/PayNowButton.res
+++ b/src/Components/PayNowButton.res
@@ -1,6 +1,6 @@
-@send external postMessage: (Window.window, Js.Json.t, string) => unit = "postMessage"
+@send external postMessage: (Window.window, JSON.t, string) => unit = "postMessage"
 
-external eventToJson: ReactEvent.Mouse.t => Js.Json.t = "%identity"
+external eventToJson: ReactEvent.Mouse.t => JSON.t = "%identity"
 
 module Loader = {
   @react.component
@@ -14,31 +14,41 @@ module Loader = {
   }
 }
 @react.component
-let make = () => {
+let make = (~cvcProps, ~cardProps, ~expiryProps) => {
   open RecoilAtoms
   let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let (isDisabled, setIsDisabled) = React.useState(() => false)
   let (showLoader, setShowLoader) = React.useState(() => false)
-  let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
-  let {sdkHandleConfirmPaymentProps} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let areRequiredFieldsValidValue = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
+  let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
+
+  let (isCVCValid, _, _, _, _, _, _, _, _, _) = cvcProps
+  let (isCardValid, _, _, _, _, _, _, _, _, _) = cardProps
+  let (isExpiryValid, _, _, _, _, _, _, _, _) = expiryProps
+
+  let validFormat =
+    isCVCValid->Option.getOr(false) &&
+    isCardValid->Option.getOr(false) &&
+    isExpiryValid->Option.getOr(false) &&
+    areRequiredFieldsValidValue
 
   let buttonText =
-    sdkHandleConfirmPaymentProps.buttonText->Js.String2.length > 0
-      ? sdkHandleConfirmPaymentProps.buttonText
+    sdkHandleConfirmPayment.buttonText->String.length > 0
+      ? sdkHandleConfirmPayment.buttonText
       : localeString.payNowButton
 
   let confirmPayload =
     [
-      ("redirect", "always"->Js.Json.string),
+      ("redirect", "always"->JSON.Encode.string),
       (
         "confirmParams",
-        [("return_url", sdkHandleConfirmPaymentProps.confirmParams.return_url->Js.Json.string)]
-        ->Js.Dict.fromArray
-        ->Js.Json.object_,
+        [("return_url", sdkHandleConfirmPayment.confirmParams.return_url->JSON.Encode.string)]
+        ->Dict.fromArray
+        ->JSON.Encode.object,
       ),
     ]
-    ->Js.Dict.fromArray
-    ->Js.Json.object_
+    ->Dict.fromArray
+    ->JSON.Encode.object
 
   let handleOnClick = _ => {
     setIsDisabled(_ => true)
@@ -46,9 +56,9 @@ let make = () => {
     Utils.handlePostMessage([("handleSdkConfirm", confirmPayload)])
   }
   React.useEffect1(() => {
-    setIsDisabled(_ => !areRequiredFieldsValid)
+    setIsDisabled(_ => !validFormat)
     None
-  }, [areRequiredFieldsValid])
+  }, [validFormat])
 
   <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
@@ -56,21 +66,21 @@ let make = () => {
       onClick=handleOnClick
       className={`w-full flex flex-row justify-center items-center`}
       style={ReactDOMStyle.make(
-        ~borderRadius=sdkHandleConfirmPaymentProps.borderRadius,
-        ~backgroundColor=sdkHandleConfirmPaymentProps.backgroundColor,
-        ~height=sdkHandleConfirmPaymentProps.buttonHeight,
+        ~borderRadius=sdkHandleConfirmPayment.borderRadius,
+        ~backgroundColor=sdkHandleConfirmPayment.backgroundColor,
+        ~height=sdkHandleConfirmPayment.buttonHeight,
         ~cursor={isDisabled ? "not-allowed" : "pointer"},
         ~opacity={isDisabled ? "0.6" : "1"},
-        ~width=sdkHandleConfirmPaymentProps.buttonWidth,
-        ~borderColor=sdkHandleConfirmPaymentProps.borderColor,
+        ~width=sdkHandleConfirmPayment.buttonWidth,
+        ~borderColor=sdkHandleConfirmPayment.borderColor,
         (),
       )}>
       <span
         id="button-text"
         style={ReactDOMStyle.make(
-          ~color=sdkHandleConfirmPaymentProps.textColor,
-          ~fontSize=sdkHandleConfirmPaymentProps.textFontSize,
-          ~fontWeight=sdkHandleConfirmPaymentProps.textFontWeight,
+          ~color=sdkHandleConfirmPayment.textColor,
+          ~fontSize=sdkHandleConfirmPayment.textFontSize,
+          ~fontWeight=sdkHandleConfirmPayment.textFontWeight,
           (),
         )}>
         {if showLoader {
diff --git a/src/DefaultTheme.res b/src/DefaultTheme.res
index 23150a4ec..58d5a0bc3 100644
--- a/src/DefaultTheme.res
+++ b/src/DefaultTheme.res
@@ -183,7 +183,7 @@ let default = default
 let defaultRules = defaultRules
 
 let defaultButtonRules = {
-  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  ...PaymentType.defaultSdkHandleConfirmPayment,
   backgroundColor: default.colorPrimary,
   borderColor: default.colorBackground,
   textColor: default.colorBackground,
diff --git a/src/LoaderController.res b/src/LoaderController.res
index 5ac933ac5..cacac82ed 100644
--- a/src/LoaderController.res
+++ b/src/LoaderController.res
@@ -111,16 +111,14 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
     let appearance =
       optionsAppearance == CardTheme.defaultAppearance ? config.appearance : optionsAppearance
 
-    let sdkHandleConfirmPaymentProps = mergeJsons(
+    let sdkHandleConfirmPayment = mergeJsons(
       defaultButtonRules->toJson,
-      optionsDict
-      ->Js.Dict.get("sdkHandleConfirmPaymentProps")
-      ->Belt.Option.getWithDefault(Js.Json.null),
+      optionsDict->Dict.get("sdkHandleConfirmPayment")->Option.getOr(JSON.Encode.null),
     )
 
     setOptionsPayment(.prev => {
       ...prev,
-      sdkHandleConfirmPaymentProps: sdkHandleConfirmPaymentProps
+      sdkHandleConfirmPayment: sdkHandleConfirmPayment
       ->Utils.getDictFromJson
       ->PaymentType.getSdkHandleConfirmPaymentProps,
     })
@@ -291,7 +289,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
                 ("iframeId", "no-element"->Js.Json.string),
                 ("publishableKey", ""->Js.Json.string),
                 ("parentURL", "*"->Js.Json.string),
-                ("sdkHandleConfirmPayment", false->Js.Json.boolean),
                 ("sdkHandleOneClickConfirmPayment", true->Js.Json.boolean),
               ]->Js.Array2.forEach(keyPair => {
                 dict->CommonHooks.updateKeys(keyPair, setKeys)
diff --git a/src/MidnightTheme.res b/src/MidnightTheme.res
index 14415a55e..2e5107ede 100644
--- a/src/MidnightTheme.res
+++ b/src/MidnightTheme.res
@@ -192,7 +192,7 @@ let default = midnight
 let defaultRules = midnightRules
 
 let defaultButtonRules = {
-  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  ...PaymentType.defaultSdkHandleConfirmPayment,
   backgroundColor: default.colorPrimary,
   borderColor: default.colorPrimary,
   textColor: default.colorPrimaryText,
diff --git a/src/NoTheme.res b/src/NoTheme.res
index 064eb468d..007c33f2f 100644
--- a/src/NoTheme.res
+++ b/src/NoTheme.res
@@ -46,4 +46,4 @@ let nakedValuesRules = _ => Js.Dict.empty()->Js.Json.object_
 let default = nakedValues
 let defaultRules = nakedValuesRules
 
-let defaultButtonRules = PaymentType.defaultValueSdkHandleConfirmPaymentProps
+let defaultButtonRules = PaymentType.defaultSdkHandleConfirmPayment
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index daba5a8ee..767b2b6d8 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -381,9 +381,9 @@ let make = (
         }}
       </div>
     </RenderIf>
-    <RenderIf condition={sdkHandleConfirmPayment}>
+    <RenderIf condition={sdkHandleConfirmPayment.handleConfirm}>
       <div className="mt-4">
-        <PayNowButton />
+        <PayNowButton cvcProps cardProps expiryProps />
       </div>
     </RenderIf>
     <PoweredBy />
diff --git a/src/SoftTheme.res b/src/SoftTheme.res
index 8e1cddd3c..4d40423b8 100644
--- a/src/SoftTheme.res
+++ b/src/SoftTheme.res
@@ -178,7 +178,7 @@ let default = soft
 let defaultRules = softRules
 
 let defaultButtonRules = {
-  ...PaymentType.defaultValueSdkHandleConfirmPaymentProps,
+  ...PaymentType.defaultSdkHandleConfirmPayment,
   backgroundColor: default.colorBackground,
   borderColor: default.colorPrimary,
   textColor: default.colorPrimary,
diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
index 6e5c6c3bc..e9b3d81f9 100644
--- a/src/Types/PaymentType.res
+++ b/src/Types/PaymentType.res
@@ -130,7 +130,8 @@ type billingAddress = {
   usePrefilledValues: showType,
 }
 
-type sdkHandleConfirmPaymentProps = {
+type sdkHandleConfirmPayment = {
+  handleConfirm: bool,
   buttonText: string,
   backgroundColor: string,
   buttonHeight: string,
@@ -159,8 +160,7 @@ type options = {
   payButtonStyle: style,
   showCardFormByDefault: bool,
   billingAddress: billingAddress,
-  sdkHandleConfirmPayment: bool,
-  sdkHandleConfirmPaymentProps: sdkHandleConfirmPaymentProps,
+  sdkHandleConfirmPayment: sdkHandleConfirmPayment,
 }
 let defaultCardDetails = {
   scheme: None,
@@ -261,7 +261,8 @@ let defaultBillingAddress = {
   usePrefilledValues: Auto,
 }
 
-let defaultValueSdkHandleConfirmPaymentProps = {
+let defaultSdkHandleConfirmPayment = {
+  handleConfirm: false,
   buttonText: "Pay Now",
   backgroundColor: "",
   buttonHeight: "48px",
@@ -290,8 +291,7 @@ let defaultOptions = {
   customMethodNames: [],
   showCardFormByDefault: true,
   billingAddress: defaultBillingAddress,
-  sdkHandleConfirmPayment: false,
-  sdkHandleConfirmPaymentProps: defaultValueSdkHandleConfirmPaymentProps,
+  sdkHandleConfirmPayment: defaultSdkHandleConfirmPayment,
 }
 let getLayout = (str, logger) => {
   switch str {
@@ -899,6 +899,7 @@ let getConfirmParams = dict => {
 }
 
 let getSdkHandleConfirmPaymentProps = dict => {
+  handleConfirm: dict->getBool("handleConfirm", false),
   buttonText: dict->getString("buttonText", "Pay Now"),
   backgroundColor: dict->getString("backgroundColor", ""),
   buttonHeight: dict->getString("buttonHeight", ""),
@@ -928,7 +929,6 @@ let itemToObjMapper = (dict, logger) => {
       "sdkHandleOneClickConfirmPayment",
       "showCardFormByDefault",
       "sdkHandleConfirmPayment",
-      "sdkHandleConfirmPaymentProps",
     ],
     dict,
     "options",
@@ -953,9 +953,9 @@ let itemToObjMapper = (dict, logger) => {
     payButtonStyle: getStyle(dict, "payButtonStyle", logger),
     showCardFormByDefault: getBool(dict, "showCardFormByDefault", true),
     billingAddress: getBillingAddress(dict, "billingAddress", logger),
-    sdkHandleConfirmPayment: getBool(dict, "sdkHandleConfirmPayment", false),
-    sdkHandleConfirmPaymentProps: dict
-    ->getDictfromDict("sdkHandleConfirmPaymentProps")
+    // sdkHandleConfirmPayment: getBool(dict, "sdkHandleConfirmPayment", false),
+    sdkHandleConfirmPayment: dict
+    ->getDictfromDict("sdkHandleConfirmPayment")
     ->getSdkHandleConfirmPaymentProps,
   }
 }
diff --git a/src/Types/ThemeImporter.res b/src/Types/ThemeImporter.res
index 58f3400ce..26360881a 100644
--- a/src/Types/ThemeImporter.res
+++ b/src/Types/ThemeImporter.res
@@ -1,7 +1,7 @@
 type themeDataModule = {
   default: CardThemeType.themeClass,
   defaultRules: CardThemeType.themeClass => Js.Json.t,
-  defaultButtonRules: PaymentType.sdkHandleConfirmPaymentProps,
+  defaultButtonRules: PaymentType.sdkHandleConfirmPayment,
 }
 
 @val
diff --git a/src/orca-loader/Elements.res b/src/orca-loader/Elements.res
index 6ccb392e5..af45ea9f8 100644
--- a/src/orca-loader/Elements.res
+++ b/src/orca-loader/Elements.res
@@ -218,7 +218,6 @@ let make = (
       let mountPostMessage = (
         mountedIframeRef,
         selectorString,
-        sdkHandleConfirmPayment,
         sdkHandleOneClickConfirmPayment,
         disableSaveCards,
       ) => {
@@ -245,7 +244,6 @@ let make = (
             ("publishableKey", publishableKey->Js.Json.string),
             ("endpoint", endpoint->Js.Json.string),
             ("sdkSessionId", sdkSessionId->Js.Json.string),
-            ("sdkHandleConfirmPayment", sdkHandleConfirmPayment->Js.Json.boolean),
             ("blockConfirm", blockConfirm->Js.Json.boolean),
             ("switchToCustomPod", switchToCustomPod->Js.Json.boolean),
             ("endpoint", endpoint->Js.Json.string),
diff --git a/src/orca-loader/LoaderPaymentElement.res b/src/orca-loader/LoaderPaymentElement.res
index f69d2bbb2..7a20a4d23 100644
--- a/src/orca-loader/LoaderPaymentElement.res
+++ b/src/orca-loader/LoaderPaymentElement.res
@@ -19,13 +19,6 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
       setIframeRef(ref)
     }
 
-    let sdkHandleConfirmPayment =
-      options
-      ->Js.Json.decodeObject
-      ->Belt.Option.flatMap(x => x->Js.Dict.get("sdkHandleConfirmPayment"))
-      ->Belt.Option.flatMap(Js.Json.decodeBoolean)
-      ->Belt.Option.getWithDefault(false)
-
     let sdkHandleOneClickConfirmPayment =
       options
       ->Js.Json.decodeObject
@@ -307,7 +300,6 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
           mountPostMessage(
             Window.querySelector(`#orca-payment-element-iframeRef-${localSelectorString}`),
             localSelectorString,
-            sdkHandleConfirmPayment,
             sdkHandleOneClickConfirmPayment,
             disableSaveCards,
           )