diff --git a/Hyperswitch-React-Demo-App/src/Payment.js b/Hyperswitch-React-Demo-App/src/Payment.js index 3e34ac890..20414a048 100644 --- a/Hyperswitch-React-Demo-App/src/Payment.js +++ b/Hyperswitch-React-Demo-App/src/Payment.js @@ -101,7 +101,6 @@ function Payment() { ? clientSecretQueryParam : clientSecret, appearance: { - // theme: "midnight", labels: "floating", }, }} diff --git a/src/App.res b/src/App.res index dbcd1557b..eec095614 100644 --- a/src/App.res +++ b/src/App.res @@ -17,7 +17,7 @@ let make = () => { }, [logger]) React.useEffect0(() => { - let handleApplePayMessages = (ev: Window.event) => { + let handleMetaDataPostMessage = (ev: Window.event) => { let json = ev.data->Utils.safeParse let dict = json->Utils.getDictFromJson @@ -43,21 +43,9 @@ let make = () => { | None => () } } - - // if dict->Dict.get("fullScreenIframeMounted")->Option.isSome { - // let metadata = dict->getJsonObjectFromDict("metadata") - // setStateMetadata(_ => metadata) - // let metaDataDict = metadata->JSON.Decode.object->Option.getOr(Dict.make()) - - // let metadata = dict->getJsonObjectFromDict("metadata") - // if dict-> } - Window.addEventListener("message", handleApplePayMessages) - Some( - () => { - Window.removeEventListener("message", handleApplePayMessages) - }, - ) + Window.addEventListener("message", handleMetaDataPostMessage) + Some(() => Window.removeEventListener("message", handleMetaDataPostMessage)) }) let renderFullscreen = switch paymentMode { diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res index 9efcc0387..55c73b11c 100644 --- a/src/Components/PayNowButton.res +++ b/src/Components/PayNowButton.res @@ -21,7 +21,7 @@ let make = (~onClickHandler=?, ~label=?) => { let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton let buttonText = switch label { | Some(val) => val - | _ => sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton) + | None => sdkHandleConfirmPayment.buttonText->Option.getOr(localeString.payNowButton) } let handleMessage = (event: Types.event) => { diff --git a/src/Payments/BankDebitModal.res b/src/Payments/BankDebitModal.res index 0b003f8f7..86e9a6d88 100644 --- a/src/Payments/BankDebitModal.res +++ b/src/Payments/BankDebitModal.res @@ -116,11 +116,7 @@ let make = (~setModalData, ~paymentType: CardThemeType.mode) => { let {themeObj, config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) let (accountType, setAccountType) = React.useState(() => "Savings") - let {config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) - let (requiredFieldsBody, setRequiredFieldsBody) = React.useState(_ => Dict.make()) - let areRequiredFieldsValid = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsValid) - let areRequiredFieldsEmpty = Recoil.useRecoilValueFromAtom(RecoilAtoms.areRequiredFieldsEmpty) let (openModal, setOpenModal) = React.useState(_ => false) @@ -202,34 +198,103 @@ let make = (~setModalData, ~paymentType: CardThemeType.mode) => { Modal.close(setOpenModal) } - -
-
- {if isSepaDebit { - <> - - - - } else { - <> -
- {React.string(localeString.billingDetailsText)} -
-
- -
+ let dynamicFieldsModalBody = + <> + + + + + let nonDynamicFieldsModalBody = + <> +
+ {React.string(localeString.billingDetailsText)} +
+
+ +
+
+ {React.string("Bank Details")} +
+
+ {React.string("Account Holder Name")} +
+ setInputFocus(_ => NONE)} + /> + +
+ {React.string("IBAN")} +
+ +
+
+ +
- {React.string("Bank Details")} + className={`Label mb-1 mt-5`} + style={ + fontWeight: themeObj.fontWeightNormal, + fontSize: themeObj.fontSizeLg, + color: themeObj.colorText, + marginBottom: "5px", + }> + {React.string("Routing number")}
+ setInputFocus(_ => Routing)} + /> +
+
+ +
{ color: themeObj.colorText, marginBottom: "5px", }> - {React.string("Account Holder Name")} + {React.string("Account number")}
setInputFocus(_ => Account)} onBlur={_ => setInputFocus(_ => NONE)} /> - -
- {React.string("IBAN")} -
- -
-
- -
-
- {React.string("Routing number")} -
- setInputFocus(_ => Routing)} - /> -
-
- -
-
- {React.string("Account number")} -
- setInputFocus(_ => Account)} - onBlur={_ => setInputFocus(_ => NONE)} - /> -
-
-
- -
- -
-
- -
- {React.string("BSB")} -
- -
-
+
+
+ +
+ +
+
+ +
+ {React.string("BSB")} +
+ +
+