From 06a64774cbf90d3a998a7d30915225aad931dede Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Thu, 23 Nov 2023 15:53:16 +0530 Subject: [PATCH 01/13] SDK Changes --- public/hyperswitch/assets/BlurrySDK.svg | 110 +++++++++ .../hyperswitch/HyperSwitchApp.res | 1 + src/screens/HyperSwitch/Home/HomeUtils.res | 230 +----------------- src/screens/HyperSwitch/Home/HomeV2.res | 13 +- .../Home/QuickStart/TestPayment.res | 89 +++++-- .../HyperSwitch/Order/OrderUIUtils.res | 13 +- src/screens/HyperSwitch/Order/Orders.res | 3 +- .../HyperSwitch/SDKPayment/Payment.res | 210 ++++++++-------- .../HyperSwitch/SDKPayment/SDKPage.res | 207 ++++++++++++++++ .../SDKPayment/TestCredentials.res | 10 +- src/screens/HyperSwitch/SDKPayment/WebSDK.res | 4 +- .../Utils/MilestoneAchievedCard.res | 14 +- tailwindHyperSwitch.config.js | 11 +- 13 files changed, 509 insertions(+), 406 deletions(-) create mode 100644 public/hyperswitch/assets/BlurrySDK.svg create mode 100644 src/screens/HyperSwitch/SDKPayment/SDKPage.res diff --git a/public/hyperswitch/assets/BlurrySDK.svg b/public/hyperswitch/assets/BlurrySDK.svg new file mode 100644 index 000000000..642f6e806 --- /dev/null +++ b/public/hyperswitch/assets/BlurrySDK.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res index 279f38ef7..5473fdcfd 100644 --- a/src/entryPoints/hyperswitch/HyperSwitchApp.res +++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res @@ -330,6 +330,7 @@ let make = () => { | list{"profile"} => | list{"settings", "profile"} => | list{"recon"} => + | list{"sdk"} => | list{"3ds"} => | list{"quick-start"} => determineQuickStartPageState() | list{"woocommerce"} => determineWooCommerce() diff --git a/src/screens/HyperSwitch/Home/HomeUtils.res b/src/screens/HyperSwitch/Home/HomeUtils.res index 6c14c935e..e87ce358c 100644 --- a/src/screens/HyperSwitch/Home/HomeUtils.res +++ b/src/screens/HyperSwitch/Home/HomeUtils.res @@ -164,7 +164,7 @@ module MerchantAuthInfo = { module InputText = { @react.component - let make = (~setAmount, ~isSDKOpen) => { + let make = (~setAmount) => { let (value, setValue) = React.useState(_ => "100") let showPopUp = PopUpState.useShowPopUp() let input: ReactFinalForm.fieldRenderPropsInput = { @@ -194,239 +194,20 @@ module InputText = { } } -module SDKOverlay = { - @react.component - let make = ( - ~merchantDetailsValue, - ~overlayPaymentModal, - ~setOverlayPaymentModal, - ~isConfigureConnector, - ~customBackButtonRoute="home", - ) => { - open HSwitchMerchantAccountUtils - let hyperswitchMixPanel = HSMixPanel.useSendEvent() - let url = RescriptReactRouter.useUrl() - let urlHeaderName = url.path->LogicUtils.getListHead - let filtersFromUrl = url.search->LogicUtils.getDictFromUrlSearchParams - let (currency, setCurrency) = React.useState(() => "US,USD") - let (isSDKOpen, setIsSDKOpen) = React.useState(_ => false) - - let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) - let defaultBusinessProfile = businessProfiles->getValueFromBusinessProfile - let arrayOfBusinessProfile = businessProfiles->getArrayOfBusinessProfile - - let (profile, setProfile) = React.useState(_ => defaultBusinessProfile.profile_id) - let (amount, setAmount) = React.useState(() => 10000) - let isSmallDevice = MatchMedia.useMatchMedia("(max-width: 800px)") - - let dropDownOptions = countries->Js.Array2.map((item): SelectBox.dropdownOption => { - { - label: `${item.countryName} (${item.currency})`, - value: `${item.isoAlpha2},${item.currency}`, - } - }) - - let inputCurrency: ReactFinalForm.fieldRenderPropsInput = { - name: `input`, - onBlur: _ev => (), - onChange: ev => { - let value = ev->formEventToStr - setCurrency(_ => value) - }, - onFocus: _ev => (), - value: {currency->Js.Json.string}, - checked: true, - } - - let inputProfileId: ReactFinalForm.fieldRenderPropsInput = { - name: `input`, - onBlur: _ev => (), - onChange: ev => { - let value = ev->formEventToStr - setProfile(_ => value) - }, - onFocus: _ev => (), - value: {profile->Js.Json.string}, - checked: true, - } - - let inputProfileName: ReactFinalForm.fieldRenderPropsInput = { - name: `input`, - onBlur: _ev => (), - onChange: ev => { - let value = ev->formEventToStr - setProfile(_ => value) - }, - onFocus: _ev => (), - value: {profile->Js.Json.string}, - checked: true, - } - - let disableSelectionForProfile = arrayOfBusinessProfile->isDefaultBusinessProfile - - let rightHeadingComponent = -
-
-
-
-
- {"Select Profile"->React.string} -
- businessProfileNameDropDownOption} - input=inputProfileName - deselectDisable=true - searchable=true - buttonText="Profile Name" - disableSelect={isSDKOpen || disableSelectionForProfile} - customButtonStyle={isSmallDevice ? "!w-[50vw]" : "!w-[16vw]"} - textStyle={isSmallDevice ? "w-[40vw]" : "w-[14vw]"} - allowButtonTextMinWidth=false - ellipsisOnly=true - /> -
-
-
- {"Select Profile Id"->React.string} -
- businessProfileIdDropDownOption} - input=inputProfileId - deselectDisable=true - searchable=true - buttonText="Profile Id" - disableSelect={isSDKOpen || disableSelectionForProfile} - customButtonStyle={isSmallDevice ? "!w-[50vw]" : "!w-[16vw]"} - textStyle={isSmallDevice ? "w-[40vw]" : "w-[14vw]"} - allowButtonTextMinWidth=false - ellipsisOnly=true - /> -
-
-
-
-
- {"Select Currency"->React.string} -
- -
-
-
- {"Enter amount"->React.string} -
- -
-
-
-
- - React.useEffect1(() => { - let paymentIntentOptional = filtersFromUrl->Js.Dict.get("payment_intent_client_secret") - if paymentIntentOptional->Belt.Option.isSome { - setOverlayPaymentModal(_ => true) - setIsSDKOpen(_ => true) - } - None - }, [filtersFromUrl]) - - React.useEffect1(() => { - if !overlayPaymentModal { - setIsSDKOpen(_ => false) - } - None - }, [overlayPaymentModal]) - - - { - setOverlayPaymentModal(_ => false) - RescriptReactRouter.push(`/${customBackButtonRoute}`) - }} - rightHeading={isSDKOpen || isSmallDevice ? React.null : rightHeadingComponent} - headingClass="!bg-transparent dark:!bg-jp-gray-lightgray_background border-b-2 border-jp-gray-940 border-opacity-75 dark:border-jp-gray-960 rounded-xl" - headerTextClass="flex flex-col md:flex-row !text-2xl font-semibold justify-between h-fit border-b-2" - showModal={overlayPaymentModal} - customHeight="!h-full" - childClass={`flex flex-col md:flex-row justify-center items-center ${isSmallDevice - ? "" - : "my-10"} w-full ${isSDKOpen ? isSmallDevice ? "" : "h-3/4" : "h-3/4"}`} - closeOnOutsideClick=true - setShowModal={setOverlayPaymentModal} - onCloseClickCustomFun={_ => { - if urlHeaderName->pathToVariantMapper === PAYMENTS { - RescriptReactRouter.push("/payments") - Window.Location.reload() - } else { - RescriptReactRouter.push("/home") - } - }} - paddingClass="!p-0" - modalClass="w-full h-full dark:!bg-jp-gray-lightgray_background overflow-scroll"> - - - - - - } -} - module CheckoutCard = { @react.component - let make = (~merchantDetailsValue) => { + let make = () => { let url = RescriptReactRouter.useUrl() let fetchApi = AuthHooks.useApiFetcher() let showPopUp = PopUpState.useShowPopUp() let hyperswitchMixPanel = HSMixPanel.useSendEvent() let (_authStatus, setAuthStatus) = React.useContext(AuthInfoProvider.authStatusContext) let isPlayground = HSLocalStorage.getIsPlaygroundFromLocalStorage() - let (overlayPaymentModal, setOverlayPaymentModal) = React.useState(_ => false) let isConfigureConnector = ListHooks.useListCount(~entityName=CONNECTOR) > 0 let urlPath = url.path->Belt.List.toArray->Js.Array2.joinWith("_") @@ -456,7 +237,7 @@ module CheckoutCard = { ~actionName="tryitout", (), ) - setOverlayPaymentModal(_ => true) + RescriptReactRouter.replace("/sdk") } } @@ -478,9 +259,6 @@ module CheckoutCard = { text="Try it out" buttonType={Secondary} buttonSize={Small} onClick={handleOnClick} /> - } } @@ -565,7 +343,7 @@ module ControlCenter = { - + } diff --git a/src/screens/HyperSwitch/Home/HomeV2.res b/src/screens/HyperSwitch/Home/HomeV2.res index c1da01cfa..d86819a7b 100644 --- a/src/screens/HyperSwitch/Home/HomeV2.res +++ b/src/screens/HyperSwitch/Home/HomeV2.res @@ -274,14 +274,6 @@ module RecipesAndPlugins = { module Resources = { @react.component let make = () => { - let merchantDetailsValue = useMerchantDetailsValue() - let (overlayPaymentModal, setOverlayPaymentModal) = React.useState(_ => false) - let connectorListJson = HyperswitchAtom.connectorListAtom->Recoil.useRecoilValueFromAtom - let isConfigureConnector = - connectorListJson - ->LogicUtils.safeParse - ->ConnectorTableUtils.getArrayOfConnectorListPayloadType - ->Js.Array2.length > 0 let elements: array = [ { id: "tryTheDemo", @@ -320,7 +312,7 @@ module Resources = { } else if item.id === "developerdocs" { "https://hyperswitch.io/docs"->Window._open } else if item.id === "tryTheDemo" { - setOverlayPaymentModal(_ => true) + RescriptReactRouter.replace("/sdk") } }}> @@ -338,9 +330,6 @@ module Resources = { ->React.array} - } } diff --git a/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res b/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res index f397e236d..5a771fed7 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res +++ b/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res @@ -10,6 +10,12 @@ let make = ( ~currency="USD", ~onProceed: (~paymentId: string) => promise, ~profileId=?, + ~sdkWidth="w-[60%]", + ~isTestCredsNeeded=true, + ~customTryAgain=?, + ~customWidth="w-full md:w-1/2", + ~paymentStatusStyles="p-11", + ~successButtonText="Proceed", ) => { open APIUtils open LogicUtils @@ -77,15 +83,25 @@ let make = ( getClientSecret()->ignore } -
+ let buttonOnClick = _ => + if customTryAgain->Belt.Option.isSome { + switch customTryAgain { + | Some(fun) => fun() + | None => () + } + } else { + tryPaymentAgain() + } + +
{switch paymentStatus { | SUCCESS => onProceed(~paymentId)->ignore} - customWidth="w-full md:w-1/2" + customWidth bgColor="bg-green-success_page_bg" /> @@ -94,8 +110,8 @@ let make = ( iconName="account-setup-failed" statusText="Payment Failed" buttonText="Try Again" - buttonOnClick={_ => tryPaymentAgain()} - customWidth="w-full md:w-1/2" + buttonOnClick + customWidth bgColor="bg-red-failed_page_bg" /> | CHECKCONFIGURATION => @@ -103,8 +119,8 @@ let make = ( iconName="processing" statusText="Check your Configurations" buttonText="Try Again" - buttonOnClick={_ => tryPaymentAgain()} - customWidth="w-full md:w-1/2" + buttonOnClick + customWidth bgColor="bg-yellow-pending_page_bg" /> @@ -113,33 +129,52 @@ let make = ( iconName="processing" statusText="Payment Pending" buttonText="Try Again" - buttonOnClick={_ => tryPaymentAgain()} - customWidth="w-full md:w-1/2" + buttonOnClick + customWidth bgColor="bg-yellow-pending_page_bg" /> | _ => React.null }} {switch clientSecret { | Some(val) => -
-
- + if isTestCredsNeeded { +
+
+ +
+
- -
+ } else { + + } | None => React.null }}
diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res index cd70101fc..fe82677d6 100644 --- a/src/screens/HyperSwitch/Order/OrderUIUtils.res +++ b/src/screens/HyperSwitch/Order/OrderUIUtils.res @@ -80,7 +80,7 @@ module GenerateSampleDataButton = { module NoData = { @react.component - let make = (~isConfigureConnector, ~merchantDetailsValue, ~paymentModal, ~setPaymentModal) => { + let make = (~isConfigureConnector, ~paymentModal, ~setPaymentModal) => { let {testLiveMode} = HyperswitchAtom.featureFlagAtom ->Recoil.useRecoilValueFromAtom @@ -101,13 +101,10 @@ module NoData = { ? "paymentops_makeapayment" : "payemntops_connectaconnector"} onClickUrl={isConfigureConnector ? "" : `${HSwitchGlobalVars.hyperSwitchFEPrefix}/connectors`} - onClickElement={} + onClickElement={ + RescriptReactRouter.replace("/sdk") + React.null + } /> } } diff --git a/src/screens/HyperSwitch/Order/Orders.res b/src/screens/HyperSwitch/Order/Orders.res index 81b906486..403c79bd5 100644 --- a/src/screens/HyperSwitch/Order/Orders.res +++ b/src/screens/HyperSwitch/Order/Orders.res @@ -12,7 +12,6 @@ let make = (~previewOnly=false) => { let (filters, setFilters) = React.useState(_ => None) let (paymentModal, setPaymentModal) = React.useState(_ => false) let isConfigureConnector = ListHooks.useListCount(~entityName=CONNECTOR) > 0 - let merchantDetailsValue = useMerchantDetailsValue() let (widthClass, heightClass) = React.useMemo1(() => { previewOnly ? ("w-full", "max-h-96") : ("w-full", "") @@ -84,7 +83,7 @@ let make = (~previewOnly=false) => { let customTitleStyle = previewOnly ? "py-0 !pt-0" : "" - let customUI = + let customUI =
diff --git a/src/screens/HyperSwitch/SDKPayment/Payment.res b/src/screens/HyperSwitch/SDKPayment/Payment.res index 86222dd8a..6f3dc91a3 100644 --- a/src/screens/HyperSwitch/SDKPayment/Payment.res +++ b/src/screens/HyperSwitch/SDKPayment/Payment.res @@ -240,7 +240,7 @@ fields: { } `) - let returnUrl = `${hyperSwitchFEPrefix}/home` + let returnUrl = `${hyperSwitchFEPrefix}/sdk` let paymentElementOptions = getOptionReturnUrl(returnUrl) @@ -300,124 +300,114 @@ fields: { } None }) -
- -
- {switch paymentStatus { - | SUCCESS => - <> -
- -
- {"Your payment has been completed."->React.string} -
-
-
-
-
-
- - | FAILED(err) => -
- -
- {showTestMode - ? "For Payments to work you need to configure your first connector"->React.string - : "Your payment has been failed"->React.string} -
-
{`Error Message - ${err}`->React.string}
-
- | PROCESSING => -
- -
- {"Your Payment is still pending."->React.string} -
-
- | CHECKCONFIGURATION => -
- -
- {"Please check your Configurations."->React.string} -
-
- | _ => React.null - }} - {switch clientSecret { - | Some(val) => - + | FAILED(err) => +
+ +
+ {showTestMode + ? "For Payments to work you need to configure your first connector"->React.string + : "Your payment has been failed"->React.string} +
+
{`Error Message - ${err}`->React.string}
+
+ | PROCESSING => +
+ +
+ {"Your Payment is still pending."->React.string} +
+
+ | CHECKCONFIGURATION => +
+ +
+ {"Please check your Configurations."->React.string} +
+
+
+ | CUSTOMSTATE => +
+ +
+

{"Something Went Wrong."->React.string}

+

+ {"Issue in Connector Configurations"->React.string} +

+
+
+
+
+ | _ => React.null + }} + {switch clientSecret { + | Some(val) => + + | None => React.null + }}
} diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res new file mode 100644 index 000000000..fe52c8974 --- /dev/null +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -0,0 +1,207 @@ +let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ()) +@react.component +let make = () => { + open HSwitchMerchantAccountUtils + open HomeUtils + let hyperswitchMixPanel = HSMixPanel.useSendEvent() + let url = RescriptReactRouter.useUrl() + let filtersFromUrl = url.search->LogicUtils.getDictFromUrlSearchParams + let (currency, setCurrency) = React.useState(() => "USD") + let (isSDKOpen, setIsSDKOpen) = React.useState(_ => false) + let (key, setKey) = React.useState(_ => "") + let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) + let defaultBusinessProfile = businessProfiles->getValueFromBusinessProfile + let arrayOfBusinessProfile = businessProfiles->getArrayOfBusinessProfile + + let (profile, setProfile) = React.useState(_ => defaultBusinessProfile.profile_id) + let (amount, setAmount) = React.useState(() => 10000) + + let dropDownOptions = countries->Js.Array2.map((item): SelectBox.dropdownOption => { + { + label: `${item.countryName} (${item.currency})`, + value: item.currency, + } + }) + + let inputCurrency: ReactFinalForm.fieldRenderPropsInput = { + name: `input`, + onBlur: _ev => (), + onChange: ev => { + let value = ev->formEventToStr + setCurrency(_ => value) + }, + onFocus: _ev => (), + value: {currency->Js.Json.string}, + checked: true, + } + + let inputProfileId: ReactFinalForm.fieldRenderPropsInput = { + name: `input`, + onBlur: _ev => (), + onChange: ev => { + let value = ev->formEventToStr + setProfile(_ => value) + }, + onFocus: _ev => (), + value: {profile->Js.Json.string}, + checked: true, + } + + let inputProfileName: ReactFinalForm.fieldRenderPropsInput = { + name: `input`, + onBlur: _ev => (), + onChange: ev => { + let value = ev->formEventToStr + setProfile(_ => value) + }, + onFocus: _ev => (), + value: {profile->Js.Json.string}, + checked: true, + } + + let disableSelectionForProfile = arrayOfBusinessProfile->isDefaultBusinessProfile + + React.useEffect1(() => { + let paymentIntentOptional = filtersFromUrl->Js.Dict.get("payment_intent_client_secret") + if paymentIntentOptional->Belt.Option.isSome { + setIsSDKOpen(_ => true) + } + None + }, [filtersFromUrl]) + + let onProceed = async (~paymentId as _) => { + let paymentId = + filtersFromUrl + ->Js.Dict.get("payment_intent_client_secret") + ->Belt.Option.getWithDefault("") + ->Js.String2.split("_") + + let id = `${paymentId->Belt.Array.get(0)->Belt.Option.getWithDefault("")}_${paymentId + ->Belt.Array.get(1) + ->Belt.Option.getWithDefault("")}` + + RescriptReactRouter.replace(`/payments/${id}`) + } + + let customTryAgain = () => { + RescriptReactRouter.replace("/sdk") + setIsSDKOpen(_ => false) + } + + <> + +
+
+
+

{"Setup test checkout"->React.string}

+
+
+
+
+
+
+ {"Select Profile"->React.string} +
+ businessProfileNameDropDownOption} + input=inputProfileName + deselectDisable=true + searchable=true + buttonText="Profile Name" + disableSelect={disableSelectionForProfile} + allowButtonTextMinWidth=true + ellipsisOnly=true + customButtonStyle={"!w-58 !px-2"} + /> +
+
+
+ {"Select Profile Id"->React.string} +
+ businessProfileIdDropDownOption} + input=inputProfileId + deselectDisable=true + searchable=true + buttonText="Profile Id" + disableSelect={disableSelectionForProfile} + allowButtonTextMinWidth=true + ellipsisOnly=true + customButtonStyle={"!w-58 !px-2"} + /> +
+
+
+ {"Select Currency"->React.string} +
+ +
+
+
+ {"Enter amount"->React.string} +
+ +
+
+
+ +
+
+
+
+

{"Preview"->React.string}

+
+ {if isSDKOpen { +
+ +
+ } else { +
+ +
+ }} +
+
+ +} diff --git a/src/screens/HyperSwitch/SDKPayment/TestCredentials.res b/src/screens/HyperSwitch/SDKPayment/TestCredentials.res index c110dce49..80878a989 100644 --- a/src/screens/HyperSwitch/SDKPayment/TestCredentials.res +++ b/src/screens/HyperSwitch/SDKPayment/TestCredentials.res @@ -2,11 +2,11 @@ let make = () => { let initialValues = Js.Dict.empty() Js.Dict.set(initialValues, "dummy_card_number", "4242 4242 4242 4242"->Js.Json.string) -
+
-

- {"Use below card details for testing Stripe and test processors"->React.string} +

+ {"For Testing Stripe & Dummy Connectors"->React.string}

@@ -46,11 +46,11 @@ let make = () => {
-

{"For Testing Apple Pay"->React.string}

+

{"For Testing Apple Pay"->React.string}

-

+

{"Apple Pay cannot be tested from the dashboard as it is registered with merchant domain name and not app.hyperswitch. Please test using merchant SDK - refer the "->React.string}

diff --git a/src/screens/HyperSwitch/SDKPayment/WebSDK.res b/src/screens/HyperSwitch/SDKPayment/WebSDK.res index d594048ea..2f0bce98a 100644 --- a/src/screens/HyperSwitch/SDKPayment/WebSDK.res +++ b/src/screens/HyperSwitch/SDKPayment/WebSDK.res @@ -241,7 +241,7 @@ module CheckoutForm = { | LOADING => | INCOMPLETE =>
-
+
{switch sdkType { | ELEMENT => | WIDGET => @@ -251,7 +251,7 @@ module CheckoutForm = { loadingText="Please wait..." buttonState=btnState buttonType={Primary} - customButtonStyle={`p-1 mt-2 w-full rounded-full ${primaryColor}`} + customButtonStyle={`p-1 mt-2 w-full rounded-md ${primaryColor}`} onClick={_ => { setBtnState(_ => Button.Loading) {isConfigureConnector ? handleSubmit() : defaultHandleSubmit()} diff --git a/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res b/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res index d0b55e52c..199ed4d66 100644 --- a/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res +++ b/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res @@ -1,5 +1,4 @@ open LottieFiles -open HSwitchUtils let confettiJson = "successConfetti.json" @react.component let make = ( @@ -12,9 +11,7 @@ let make = ( let url = RescriptReactRouter.useUrl() let hyperswitchMixPanel = HSMixPanel.useSendEvent() let currentPageName = url.path->LogicUtils.getListHead - let (paymentModal, setPaymentModal) = React.useState(_ => false) - let isConfigureConnector = ListHooks.useListCount(~entityName=CONNECTOR) > 0 - let merchantDetailsValue = useMerchantDetailsValue() + let (_paymentModal, setPaymentModal) = React.useState(_ => false)
@@ -54,15 +51,6 @@ let make = ( /> | None => React.null }} - - -
diff --git a/tailwindHyperSwitch.config.js b/tailwindHyperSwitch.config.js index cbcbc8c53..a84b4e18b 100644 --- a/tailwindHyperSwitch.config.js +++ b/tailwindHyperSwitch.config.js @@ -14,10 +14,13 @@ module.exports = { desktop: "118.75rem", }, width: { + 58: "14.6875rem", 94: "26.5rem", 100: "25rem", 120: "27rem", + 128: "31.25rem", 133: "35rem", + 135: "35.625rem", "1.1-rem": "1.125rem", "45-vw": "45vw", "77-rem": "77rem", @@ -66,6 +69,11 @@ module.exports = { maxWidth: { fixedPageWidth: "85rem", }, + padding: { + 1: "4px", + 3.75: "15px", + 11.25: "45px", + }, animation: { "spin-slow": "spin 3s linear infinite", slideUp: "slideUp 200ms ease-out forwards", @@ -320,7 +328,7 @@ module.exports = { 400: "#DAECFF", 500: "#BED4F0", 550: "#BED4F0", - 600: "#BED4F0", + 600: "#006DF9CC", 650: "#BED4F0", 700: "#006DF9", 750: "#006DF9", @@ -479,6 +487,7 @@ module.exports = { divider_gray: "#B7B7B7", border_gray: "#E8E8E8", secondary_hover: "#EEEEEE", + test_credentials_bg: "#D9D9D959" }, hyperswitch_dark_bg: "#212E46", hyperswitch_blue_bg: "#212E46", From 1659e4530041e830d8ed9c614b43a40f5dafc057 Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Thu, 23 Nov 2023 16:11:28 +0530 Subject: [PATCH 02/13] Added a check for connector label not empty --- .../Connectors/ConnectorAccountDetails.res | 2 ++ .../HyperSwitch/Connectors/ConnectorPreview.res | 4 +++- .../HyperSwitch/Connectors/ConnectorUtils.res | 15 +++++++++++++++ .../Home/CommonConnectorFlow/SetupConnector.res | 2 ++ .../SetupConnectorCredentials.res | 3 +++ 5 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res index cf505252b..0e23df457 100644 --- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res +++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res @@ -310,6 +310,7 @@ let make = ( connectorMetaDataFields, isVerifyConnector, connectorWebHookDetails, + connectorLabelDetailField, ) = getConnectorFields(connectorDetails) let (showModal, setShowModal) = React.useState(_ => false) @@ -441,6 +442,7 @@ let make = ( connectorMetaDataFields, connectorWebHookDetails, errors->Js.Json.object_, + connectorLabelDetailField, ) } diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res index 82c969c12..2123eeab2 100644 --- a/src/screens/HyperSwitch/Connectors/ConnectorPreview.res +++ b/src/screens/HyperSwitch/Connectors/ConnectorPreview.res @@ -123,7 +123,9 @@ module ConnectorSummaryGrid = { } } }, [connector]) - let (_, connectorAccountFields, _, _, _) = ConnectorUtils.getConnectorFields(connectorDetails) + let (_, connectorAccountFields, _, _, _, _) = ConnectorUtils.getConnectorFields( + connectorDetails, + ) let webhooksUrl = ConnectorUtils.getWebhooksUrl(~connectorName=connector, ~merchantId)
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res index e159332f5..6e6be54bc 100644 --- a/src/screens/HyperSwitch/Connectors/ConnectorUtils.res +++ b/src/screens/HyperSwitch/Connectors/ConnectorUtils.res @@ -878,6 +878,7 @@ let validateConnectorRequiredFields = ( connectorMetaDataFields, connectorWebHookDetails, errors, + connectorLabelDetailField, ) => { open LogicUtils let newDict = getDictFromJsonObject(errors) @@ -935,6 +936,16 @@ let validateConnectorRequiredFields = ( Js.Dict.set(newDict, key, `Please enter ${errorKey}`->Js.Json.string) } }) + + connectorLabelDetailField + ->Js.Dict.keys + ->Js.Array2.forEach(fieldName => { + let errorKey = connectorLabelDetailField->LogicUtils.getString(fieldName, "") + let value = valuesFlattenJson->LogicUtils.getString(fieldName, "") + if value->Js.String2.length === 0 { + Js.Dict.set(newDict, fieldName, `Please enter ${errorKey}`->Js.Json.string) + } + }) newDict->Js.Json.object_ } @@ -990,12 +1001,16 @@ let getConnectorFields = connectorDetails => { connectorDetails ->LogicUtils.getDictFromJsonObject ->LogicUtils.getDictfromDict("connector_webhook_details") + let connectorLabelDetailField = Js.Dict.fromArray([ + ("connector_label", "Connector label"->Js.Json.string), + ]) ( bodyType, connectorAccountFields, connectorMetaDataFields, isVerifyConnector, connectorWebHookDetails, + connectorLabelDetailField, ) } diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res index 70ce635d5..ab24f95ab 100644 --- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res +++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res @@ -71,6 +71,7 @@ module ConfigureProcessor = { connectorMetaDataFields, _, connectorWebHookDetails, + connectorLabelDetailField, ) = getConnectorFields(connectorDetails) let onSubmit = async (values, _) => { @@ -103,6 +104,7 @@ module ConfigureProcessor = { connectorMetaDataFields, connectorWebHookDetails, errors->Js.Json.object_, + connectorLabelDetailField, ) } let backButton = isBackButtonVisible diff --git a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res index a93104f38..db1ddc085 100644 --- a/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res +++ b/src/screens/HyperSwitch/SelfServe/HSwitchProdOnboarding/SetupConnectorCredentials.res @@ -23,6 +23,7 @@ module ConnectorDetailsForm = { connectorMetaDataFields, _, connectorWebHookDetails, + _, ) = getConnectorFields(connectorDetails) let connectorVariant = connectorName->getConnectorNameTypeFromString @@ -110,6 +111,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => { connectorMetaDataFields, isVerifyConnector, connectorWebHookDetails, + connectorLabelDetailField, ) = getConnectorFields(connectorDetails) let (suggestedAction, suggestedActionExists) = getSuggestedAction( @@ -222,6 +224,7 @@ let make = (~selectedConnector, ~pageView, ~setPageView, ~setConnectorID) => { connectorMetaDataFields, connectorWebHookDetails, errors->Js.Json.object_, + connectorLabelDetailField, ) } From f3c64b073bc65db3d00db738a63813e399d2dcb8 Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Thu, 23 Nov 2023 16:13:40 +0530 Subject: [PATCH 03/13] Bug fixes --- .../HyperSwitch/Connectors/ConnectorAccountDetails.res | 1 + .../HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res | 5 +++-- .../HSwitchProdOnboarding/SetupConnectorCredentials.res | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res index 0e23df457..b46e9eda3 100644 --- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res +++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res @@ -538,6 +538,7 @@ let make = ( connectorWebHookDetails bodyType isUpdateFlow + connectorLabelDetailField />
diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res index 72986ddf8..d883b1a18 100644 --- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res +++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res @@ -189,9 +189,10 @@ module ConnectorConfigurationFields = { ~connectorWebHookDetails, ~bodyType: string, ~isUpdateFlow=false, + ~connectorLabelDetailField, ) => { open ConnectorUtils - let dict = Js.Dict.fromArray([("connector_label", "Connector label"->Js.Json.string)]) +
{if bodyType->mapAuthType == #CurrencyAuthKey { let dict = connectorAccountFields->getAuthKeyMapFromConnectorAccountFields @@ -206,7 +207,7 @@ module ConnectorConfigurationFields = { /> }} getConnectorNameTypeFromString @@ -44,6 +44,7 @@ module ConnectorDetailsForm = { connectorMetaDataFields connectorWebHookDetails bodyType + connectorLabelDetailField /> Date: Tue, 28 Nov 2023 11:49:15 +0530 Subject: [PATCH 04/13] Changes for SDK --- .../ConfigureConnector.res | 1 + .../Home/QuickStart/TestPayment.res | 9 +- .../HyperSwitch/SDKPayment/SDKPage.res | 231 ++++++++---------- .../StripePlusPaypalUIUtils.res | 8 +- 4 files changed, 115 insertions(+), 134 deletions(-) diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res index 43abc4c1a..71845184b 100644 --- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res +++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res @@ -259,6 +259,7 @@ let make = (~connectProcessorValue: connectProcessor) => { amount=100 returnUrl={`${HSwitchGlobalVars.hyperSwitchFEPrefix}/quick-start`} onProceed={updateTestPaymentEnum} + keyValue="" />
diff --git a/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res b/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res index 5a771fed7..4741ae78f 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res +++ b/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res @@ -16,6 +16,7 @@ let make = ( ~customWidth="w-full md:w-1/2", ~paymentStatusStyles="p-11", ~successButtonText="Proceed", + ~keyValue, ) => { open APIUtils open LogicUtils @@ -60,7 +61,7 @@ let make = ( } } - React.useEffect0(() => { + React.useEffect1(() => { let status = filtersFromUrl->Js.Dict.get("status")->Belt.Option.getWithDefault("")->Js.String2.toLowerCase if status === "succeeded" { @@ -72,11 +73,11 @@ let make = ( } else { setPaymentStatus(_ => INCOMPLETE) } - if status->Js.String2.length <= 0 { + if status->Js.String2.length <= 0 && keyValue->Js.String2.length > 0 { getClientSecret()->ignore } None - }) + }, [keyValue]) let tryPaymentAgain = () => { RescriptReactRouter.replace("/quick-start") @@ -153,7 +154,6 @@ let make = ( isConfigureConnector={true} amount setClientSecret - bgColor="bg-blue-600" />
@@ -172,7 +172,6 @@ let make = ( isConfigureConnector={true} amount setClientSecret - bgColor="bg-blue-600" /> } | None => React.null diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index fe52c8974..38347f747 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -1,8 +1,81 @@ let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ()) + +module SDKConfifiguarationFields = { + open HSwitchMerchantAccountUtils + @react.component + let make = () => { + let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) + let arrayOfBusinessProfile = businessProfiles->getArrayOfBusinessProfile + let disableSelectionForProfile = arrayOfBusinessProfile->HomeUtils.isDefaultBusinessProfile + + let dropDownOptions = HomeUtils.countries->Js.Array2.map((item): SelectBox.dropdownOption => { + { + label: `${item.countryName} (${item.currency})`, + value: item.currency, + } + }) + + let selectProfileField = FormRenderer.makeFieldInfo( + ~label="Business profile", + ~name="profile_id", + ~placeholder="", + ~customInput=InputFields.selectInput( + ~deselectDisable=true, + ~options={arrayOfBusinessProfile->businessProfileNameDropDownOption}, + ~buttonText="Select Profile", + ~disableSelect=disableSelectionForProfile, + ~fullLength=true, + (), + ), + (), + ) + let selectProfileId = FormRenderer.makeFieldInfo( + ~label="Profile Id", + ~name="profile_id", + ~placeholder="", + ~customInput=InputFields.selectInput( + ~deselectDisable=true, + ~options=arrayOfBusinessProfile->businessProfileIdDropDownOption, + ~buttonText="Select Profile Id", + ~disableSelect=disableSelectionForProfile, + ~fullLength=true, + (), + ), + (), + ) + let selectCurrencyField = FormRenderer.makeFieldInfo( + ~name="currency", + ~placeholder="", + ~customInput=InputFields.selectInput( + ~options=dropDownOptions, + ~buttonText="Select Currency", + ~deselectDisable=true, + ~fullLength=true, + (), + ), + (), + ) + let enterAmountField = FormRenderer.makeFieldInfo( + ~label="Enter amount", + ~name="amount", + ~placeholder="Enter amount", + ~customInput=InputFields.textInput(~isDisabled=false, ~customStyle="w-full", ()), + (), + ) + + <> + + + + + + + } +} + @react.component let make = () => { open HSwitchMerchantAccountUtils - open HomeUtils let hyperswitchMixPanel = HSMixPanel.useSendEvent() let url = RescriptReactRouter.useUrl() let filtersFromUrl = url.search->LogicUtils.getDictFromUrlSearchParams @@ -11,56 +84,17 @@ let make = () => { let (key, setKey) = React.useState(_ => "") let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) let defaultBusinessProfile = businessProfiles->getValueFromBusinessProfile - let arrayOfBusinessProfile = businessProfiles->getArrayOfBusinessProfile + + let initialDict = + [ + ("currency", "USD"->Js.Json.string), + ("amount", "100"->Js.Json.string), + ("profile_id", defaultBusinessProfile.profile_id->Js.Json.string), + ]->Js.Dict.fromArray let (profile, setProfile) = React.useState(_ => defaultBusinessProfile.profile_id) let (amount, setAmount) = React.useState(() => 10000) - let dropDownOptions = countries->Js.Array2.map((item): SelectBox.dropdownOption => { - { - label: `${item.countryName} (${item.currency})`, - value: item.currency, - } - }) - - let inputCurrency: ReactFinalForm.fieldRenderPropsInput = { - name: `input`, - onBlur: _ev => (), - onChange: ev => { - let value = ev->formEventToStr - setCurrency(_ => value) - }, - onFocus: _ev => (), - value: {currency->Js.Json.string}, - checked: true, - } - - let inputProfileId: ReactFinalForm.fieldRenderPropsInput = { - name: `input`, - onBlur: _ev => (), - onChange: ev => { - let value = ev->formEventToStr - setProfile(_ => value) - }, - onFocus: _ev => (), - value: {profile->Js.Json.string}, - checked: true, - } - - let inputProfileName: ReactFinalForm.fieldRenderPropsInput = { - name: `input`, - onBlur: _ev => (), - onChange: ev => { - let value = ev->formEventToStr - setProfile(_ => value) - }, - onFocus: _ev => (), - value: {profile->Js.Json.string}, - checked: true, - } - - let disableSelectionForProfile = arrayOfBusinessProfile->isDefaultBusinessProfile - React.useEffect1(() => { let paymentIntentOptional = filtersFromUrl->Js.Dict.get("payment_intent_client_secret") if paymentIntentOptional->Belt.Option.isSome { @@ -87,6 +121,25 @@ let make = () => { RescriptReactRouter.replace("/sdk") setIsSDKOpen(_ => false) } + let onSubmit = (values, _) => { + open LogicUtils + let valueDict = values->getDictFromJsonObject + setKey(_ => Js.Date.now()->Js.Float.toString) + setCurrency(_ => valueDict->getString("currency", "USD")) + setAmount(_ => + valueDict->getString("amount", "")->Belt.Int.fromString->Belt.Option.getWithDefault(100) * 100 + ) + setProfile(_ => valueDict->getString("profile_id", "")) + setIsSDKOpen(_ => true) + RescriptReactRouter.push("/sdk") + hyperswitchMixPanel( + ~pageName=url.path->LogicUtils.getListHead, + ~contextName="sdk", + ~actionName="proceed", + (), + ) + Js.Nullable.null->Promise.resolve + } <> {

{"Setup test checkout"->React.string}

-
-
-
-
-
- {"Select Profile"->React.string} -
- businessProfileNameDropDownOption} - input=inputProfileName - deselectDisable=true - searchable=true - buttonText="Profile Name" - disableSelect={disableSelectionForProfile} - allowButtonTextMinWidth=true - ellipsisOnly=true - customButtonStyle={"!w-58 !px-2"} - /> -
-
-
- {"Select Profile Id"->React.string} -
- businessProfileIdDropDownOption} - input=inputProfileId - deselectDisable=true - searchable=true - buttonText="Profile Id" - disableSelect={disableSelectionForProfile} - allowButtonTextMinWidth=true - ellipsisOnly=true - customButtonStyle={"!w-58 !px-2"} - /> -
-
-
- {"Select Currency"->React.string} -
- -
-
-
- {"Enter amount"->React.string} -
- -
-
-
+
+
Js.Json.object_} + formClass="grid grid-cols-2 gap-x-8 gap-y-4" + onSubmit> + +
@@ -182,7 +167,6 @@ let make = () => { {if isSDKOpen {
{ customWidth="!w-full !h-full" paymentStatusStyles="" successButtonText="Go to Payment" + keyValue={key} />
} else { diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res index 08f15d6db..3f998c05f 100644 --- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res +++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res @@ -69,12 +69,7 @@ module SelectPaymentMethods = { metadata: metaData, } let body = ConnectorUtils.constructConnectorRequestBody(obj, initialValues) - let connectorUrl = APIUtils.getURL( - ~entityName=CONNECTOR, - ~methodType=Post, - ~id=None, - (), - ) + let connectorUrl = APIUtils.getURL(~entityName=CONNECTOR, ~methodType=Post, ~id=None, ()) let response = await updateAPIHook(connectorUrl, body, Post) let _updatedConnectorList = await fetchUpdatedConnectorList() @@ -175,6 +170,7 @@ module TestPayment = { amount=100 returnUrl={`${HSwitchGlobalVars.hyperSwitchFEPrefix}/stripe-plus-paypal`} onProceed={sptestPaymentProceed} + keyValue="" /> } From 1592a3f8a22a74dc859e921127663b8171ecaeed Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Tue, 28 Nov 2023 12:39:31 +0530 Subject: [PATCH 05/13] Removed unwated file --- src/screens/HyperSwitch/Home/HomeV2.res | 7 +- .../HyperSwitch/Order/OrderUIUtils.res | 12 +- .../HyperSwitch/SDKPayment/Payment.res | 413 ------------------ .../HyperSwitch/SDKPayment/SDKPage.res | 3 +- .../QuickStart => SDKPayment}/TestPayment.res | 28 +- 5 files changed, 16 insertions(+), 447 deletions(-) delete mode 100644 src/screens/HyperSwitch/SDKPayment/Payment.res rename src/screens/HyperSwitch/{Home/QuickStart => SDKPayment}/TestPayment.res (91%) diff --git a/src/screens/HyperSwitch/Home/HomeV2.res b/src/screens/HyperSwitch/Home/HomeV2.res index d86819a7b..5dc1d32f4 100644 --- a/src/screens/HyperSwitch/Home/HomeV2.res +++ b/src/screens/HyperSwitch/Home/HomeV2.res @@ -140,12 +140,13 @@ module QuickStart = { processorName: firstConnectorValue.connector_name, } - let _isMultipleConnectorSetup = - await Boolean(true)->usePostEnumDetails(#IsMultipleConfiguration) + let _isMultipleConnectorSetup = await ConnectorChoice({ + isMultipleConfiguration: true, + })->usePostEnumDetails(#IsMultipleConfiguration) let _firstEnumSetupValues = await ProcesorType(bodyOfFirstConnector)->usePostEnumDetails(#FirstProcessorConnected) let _res = updateEnumInRecoil([ - (Boolean(true), #IsMultipleConfiguration), + (ConnectorChoice({isMultipleConfiguration: true}), #IsMultipleConfiguration), (ProcesorType(bodyOfFirstConnector), #FirstProcessorConnected), ]) setQuickStartPageState(_ => ConnectProcessor(CONFIGURE_SECONDARY)) diff --git a/src/screens/HyperSwitch/Order/OrderUIUtils.res b/src/screens/HyperSwitch/Order/OrderUIUtils.res index fe82677d6..c84381ed3 100644 --- a/src/screens/HyperSwitch/Order/OrderUIUtils.res +++ b/src/screens/HyperSwitch/Order/OrderUIUtils.res @@ -93,18 +93,16 @@ module NoData = { : "There are no payments as of now. Try making a test payment and visualise the checkout experience." : "Connect to a connector like Stripe, Adyen or Hyperswitch provided test connector to make your first payment."} buttonText={isConfigureConnector ? "Make a payment" : "Connect a connector"} - moduleName=" " + moduleName="" paymentModal setPaymentModal - showRedirectCTA={testLiveMode} + showRedirectCTA={!testLiveMode} mixPanelEventName={isConfigureConnector ? "paymentops_makeapayment" : "payemntops_connectaconnector"} - onClickUrl={isConfigureConnector ? "" : `${HSwitchGlobalVars.hyperSwitchFEPrefix}/connectors`} - onClickElement={ - RescriptReactRouter.replace("/sdk") - React.null - } + onClickUrl={isConfigureConnector + ? "/sdk" + : `${HSwitchGlobalVars.hyperSwitchFEPrefix}/connectors`} /> } } diff --git a/src/screens/HyperSwitch/SDKPayment/Payment.res b/src/screens/HyperSwitch/SDKPayment/Payment.res deleted file mode 100644 index 6f3dc91a3..000000000 --- a/src/screens/HyperSwitch/SDKPayment/Payment.res +++ /dev/null @@ -1,413 +0,0 @@ -open HyperSwitchTypes -open HSwitchGlobalVars - -@react.component -let make = ( - ~isConfigureConnector, - ~setOnboardingModal, - ~countryCurrency, - ~profile_id, - ~merchantDetailsValue, - ~amount, -) => { - let countryData = Js.String2.split(countryCurrency, ",") - let currency = countryData->Belt.Array.get(1)->Belt.Option.getWithDefault("USD") - - let detail = merchantDetailsValue->HSwitchMerchantAccountUtils.getMerchantDetails - - // Needed for Business Unit Label to Business Profile Change - // let businessProfileValue = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) - - // let activeBusinessProfile = - // businessProfileValue->HSwitchMerchantAccountUtils.getValueFromBusinessProfile - - let paymentJson = { - // "profile_id": activeBusinessProfile.profile_id, - "amount": amount, - "currency": currency, - "capture_method": "automatic", - "amount_to_capture": amount, - "customer_id": "hs-dashboard-user", - "email": "guest@example.com", - "name": "John Doe", - "phone": "999999999", - "phone_country_code": "+65", - "description": "Its my first payment request", - "authentication_type": "no_three_ds", - "return_url": sandboxURL, - "profile_id": profile_id, - "shipping": { - "address": { - "line1": "1467", - "line2": "Harrison Street", - "line3": "Harrison Street", - "city": "San Fransico", - "state": "California", - "zip": "94122", - "country": countryData->Belt.Array.get(0)->Belt.Option.getWithDefault("US"), - "first_name": "John", - "last_name": "Doe", - }, - "phone": { - "number": "1234567890", - "country_code": "+1", - }, - }, - "billing": { - "address": { - "line1": "1467", - "line2": "Harrison Street", - "line3": "Harrison Street", - "city": "San Fransico", - "state": "California", - "zip": "94122", - "country": countryData->Belt.Array.get(0)->Belt.Option.getWithDefault("US"), - "first_name": "John", - "last_name": "Doe", - }, - "phone": { - "number": "1234567890", - "country_code": "+1", - }, - }, - "metadata": { - "order_details": { - "product_name": "Apple iphone 15", - "quantity": 1, - "amount": amount, - }, - }, - } - let showTestMode = !isConfigureConnector - - let defaultPubKey = "pk_snd_f00d7746423c412f9d49627501ddc64b" - let defualtApiKey = "snd_S1xH1M7RzPBTFzfahUiVLw8F7qFmg0vlnSZVxWFFe9ZAvc7kwldMfRiQw67XXZcV" - - let defaultPubIntegKey = "pk_snd_3cbadca4c57c4abfb8eda333d825fb99" - let defualtApiIntegKey = "snd_o9l9pF42nJRML0SrFAgZnPw3ybcY6NPnVampRGUEpI1KCAHqlrYUfuZvFRBzpY0Y" - - let publishableKey = if detail.publishable_key->Js.String2.length <= 0 || showTestMode { - if GlobalVars.isLocalhost { - defaultPubIntegKey - } else { - defaultPubKey - } - } else { - detail.publishable_key - } - - let apiKey = if detail.publishable_key->Js.String2.length <= 0 || showTestMode { - if GlobalVars.isLocalhost { - defualtApiIntegKey - } else { - defualtApiKey - } - } else { - "" - } - - let (clientSecret, setClientSecret) = React.useState(_ => None) - let fetchApi = AuthHooks.useApiFetcher() - let url = RescriptReactRouter.useUrl() - let searchParams = url.search - let filtersFromUrl = LogicUtils.getDictFromUrlSearchParams(searchParams) - let (currentPaymentId, setCurrentPaymentId) = React.useState(_ => "") - let (paymentStatus, setPaymentStatus) = React.useState(_ => INCOMPLETE) - let getOption = %raw(` - function (clientSecret) { - return { - clientSecret, - appearance: { - theme: "charcoal", - variables: { - colorPrimary: "#006DF9", - colorBackground: "transparent", - spacingUnit: "13px", - }, - rules: { - ".Input": { - borderRadius: "8px", - border: "1px solid #D6D9E0", - }, - ".Tab": { - borderRadius: "0px", - display: "flex", - gap: "8px", - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - }, - ".Tab:hover": { - display: "flex", - gap: "8px", - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - padding: "15px 32px", - background: "rgba(0, 109, 249, 0.1)", - border: "1px solid #006DF9", - borderRadius: "112px", - color: "#0c0b0b", - fontWeight: "700", - }, - ".Tab--selected": { - display: "flex", - gap: "8px", - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - padding: "15px 32px", - background: "rgba(0, 109, 249, 0.1)", - border: "1px solid #006DF9", - borderRadius: "112px", - color: "#0c0b0b", - fontWeight: "700", - }, - ".Label": { - color: "rgba(45, 50, 65, 0.5)", - marginBottom: "3px", - }, - ".CheckboxLabel": { - color: "rgba(45, 50, 65, 0.5)", - }, - ".TabLabel": { - overflowWrap: "break-word", - }, - ".Tab--selected:hover": { - display: "flex", - gap: "8px", - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - padding: "15px 32px", - background: "rgba(0, 109, 249, 0.1)", - border: "1px solid #006DF9", - borderRadius: "112px", - color: "#0c0b0b", - fontWeight: "700", - }, - }, - }, - fonts: [ - { - cssSrc: - "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap", - }, - { - cssSrc: - "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Qwitcher+Grypen:wght@400;700&display=swap", - }, - { - cssSrc: "https://fonts.googleapis.com/css2?family=Combo&display=swap", - }, - { - family: "something", - src: "https://fonts.gstatic.com/s/combo/v21/BXRlvF3Jh_fIhj0lDO5Q82f1.woff2", - weight: "700", - }, - ], - locale: "en", - loader: "always", - };}`) - let getOptionReturnUrl = %raw(` - function (returnUrl){ - return { -fields: { - billingDetails: { - address: { - country: "auto", - city: "auto", - }, - }, - }, - layout: { - type: "tabs", - defaultCollapsed: false, - radios: true, - spacedAccordionItems: false, - }, - wallets: { - walletReturnUrl: returnUrl, - applePay: "auto", - googlePay: "auto", - style: { - theme: "dark", - type: "default", - height: 48, - }, - }, - } -} - `) - - let returnUrl = `${hyperSwitchFEPrefix}/sdk` - - let paymentElementOptions = getOptionReturnUrl(returnUrl) - - let elementOptions = getOption(clientSecret) - - React.useEffect0(() => { - let status = - filtersFromUrl->Js.Dict.get("status")->Belt.Option.getWithDefault("")->Js.String2.toLowerCase - let paymentId = - filtersFromUrl - ->Js.Dict.get("payment_intent_client_secret") - ->Belt.Option.getWithDefault("") - ->Js.String2.split("_secret_") - ->Belt.Array.get(0) - ->Belt.Option.getWithDefault("") - setCurrentPaymentId(_ => paymentId) - - if status === "succeeded" { - setPaymentStatus(_ => SUCCESS) - } else if status === "failed" { - setPaymentStatus(_ => FAILED("")) - } else if status === "processing" { - setPaymentStatus(_ => PROCESSING) - } else { - setPaymentStatus(_ => INCOMPLETE) - } - - if status == "" { - open Promise - - fetchApi( - `${hyperSwitchApiPrefix}/payments`, - ~headers=[("Content-Type", "application/json"), ("api-key", apiKey)]->Js.Dict.fromArray, // Need to be refactor - ~bodyStr=paymentJson->Js.Json.stringifyAny->Belt.Option.getWithDefault(""), - ~method_=Fetch.Post, - (), - ) - ->then(resp => { - let status = resp->Fetch.Response.status - if status == 401 || status == 422 || status == 500 { - setPaymentStatus(_ => CHECKCONFIGURATION) - } - Fetch.Response.json(resp) - }) - ->then(json => { - // get the client secret - let resDict = json->Js.Json.decodeObject->Belt.Option.getWithDefault(Js.Dict.empty()) - let cl = resDict->Js.Dict.get("client_secret")->Belt.Option.flatMap(Js.Json.decodeString) - setClientSecret(_ => cl) - - resolve() - }) - ->catch(_err => { - resolve() - }) - ->ignore - } - None - }) -
- {switch paymentStatus { - | SUCCESS => -
- -
- {"Your payment has been completed."->React.string} -
-
-
-
-
-
- | FAILED(err) => -
- -
- {showTestMode - ? "For Payments to work you need to configure your first connector"->React.string - : "Your payment has been failed"->React.string} -
-
{`Error Message - ${err}`->React.string}
-
- | PROCESSING => -
- -
- {"Your Payment is still pending."->React.string} -
-
- | CHECKCONFIGURATION => -
- -
- {"Please check your Configurations."->React.string} -
-
- | CUSTOMSTATE => -
- -
-

{"Something Went Wrong."->React.string}

-

- {"Issue in Connector Configurations"->React.string} -

-
-
-
-
- | _ => React.null - }} - {switch clientSecret { - | Some(val) => - - | None => React.null - }} -
-} diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index 38347f747..ff696ed19 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -44,7 +44,7 @@ module SDKConfifiguarationFields = { (), ) let selectCurrencyField = FormRenderer.makeFieldInfo( - ~name="currency", + ~name="Currency", ~placeholder="", ~customInput=InputFields.selectInput( ~options=dropDownOptions, @@ -174,7 +174,6 @@ let make = () => { profileId=profile sdkWidth="!w-[100%]" isTestCredsNeeded=false - customTryAgain customWidth="!w-full !h-full" paymentStatusStyles="" successButtonText="Go to Payment" diff --git a/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res similarity index 91% rename from src/screens/HyperSwitch/Home/QuickStart/TestPayment.res rename to src/screens/HyperSwitch/SDKPayment/TestPayment.res index 4741ae78f..3cd235c9d 100644 --- a/src/screens/HyperSwitch/Home/QuickStart/TestPayment.res +++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res @@ -12,7 +12,6 @@ let make = ( ~profileId=?, ~sdkWidth="w-[60%]", ~isTestCredsNeeded=true, - ~customTryAgain=?, ~customWidth="w-full md:w-1/2", ~paymentStatusStyles="p-11", ~successButtonText="Proceed", @@ -79,21 +78,6 @@ let make = ( None }, [keyValue]) - let tryPaymentAgain = () => { - RescriptReactRouter.replace("/quick-start") - getClientSecret()->ignore - } - - let buttonOnClick = _ => - if customTryAgain->Belt.Option.isSome { - switch customTryAgain { - | Some(fun) => fun() - | None => () - } - } else { - tryPaymentAgain() - } -
{switch paymentStatus { | SUCCESS => @@ -110,8 +94,8 @@ let make = ( onProceed(~paymentId)->ignore} customWidth bgColor="bg-red-failed_page_bg" /> @@ -119,8 +103,8 @@ let make = ( onProceed(~paymentId)->ignore} customWidth bgColor="bg-yellow-pending_page_bg" /> @@ -129,8 +113,8 @@ let make = ( onProceed(~paymentId)->ignore} customWidth bgColor="bg-yellow-pending_page_bg" /> From a11170ae0940d529ac21624eb65a9e327afaf38d Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Tue, 28 Nov 2023 13:04:47 +0530 Subject: [PATCH 06/13] Minor Ui changes and bugfixes --- .../Home/CommonConnectorFlow/ConfigureConnector.res | 3 ++- src/screens/HyperSwitch/SDKPayment/SDKPage.res | 4 ---- src/screens/HyperSwitch/SDKPayment/TestPayment.res | 2 +- .../HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res | 3 ++- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res index 71845184b..45c53c56c 100644 --- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res +++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res @@ -259,7 +259,8 @@ let make = (~connectProcessorValue: connectProcessor) => { amount=100 returnUrl={`${HSwitchGlobalVars.hyperSwitchFEPrefix}/quick-start`} onProceed={updateTestPaymentEnum} - keyValue="" + keyValue={Js.Date.now()->Js.Float.toString} + sdkWidth="w-full" />
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index ff696ed19..66907c565 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -117,10 +117,6 @@ let make = () => { RescriptReactRouter.replace(`/payments/${id}`) } - let customTryAgain = () => { - RescriptReactRouter.replace("/sdk") - setIsSDKOpen(_ => false) - } let onSubmit = (values, _) => { open LogicUtils let valueDict = values->getDictFromJsonObject diff --git a/src/screens/HyperSwitch/SDKPayment/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res index 3cd235c9d..dc9e9b8ea 100644 --- a/src/screens/HyperSwitch/SDKPayment/TestPayment.res +++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res @@ -123,7 +123,7 @@ let make = ( {switch clientSecret { | Some(val) => if isTestCredsNeeded { -
+
Js.Float.toString} + sdkWidth="w-full" /> } From 5b2dbb78346c38dbb3a701c45dfb9e77a9135a8b Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Tue, 28 Nov 2023 14:26:06 +0530 Subject: [PATCH 07/13] Changes for multiple currency value --- src/screens/HyperSwitch/SDKPayment/SDKPage.res | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index 66907c565..0777e0bd9 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -11,7 +11,7 @@ module SDKConfifiguarationFields = { let dropDownOptions = HomeUtils.countries->Js.Array2.map((item): SelectBox.dropdownOption => { { label: `${item.countryName} (${item.currency})`, - value: item.currency, + value: `${item.countryName}-${item.currency}`, } }) @@ -44,7 +44,8 @@ module SDKConfifiguarationFields = { (), ) let selectCurrencyField = FormRenderer.makeFieldInfo( - ~name="Currency", + ~label="Currency", + ~name="currency", ~placeholder="", ~customInput=InputFields.selectInput( ~options=dropDownOptions, @@ -69,6 +70,7 @@ module SDKConfifiguarationFields = { + } } @@ -87,7 +89,7 @@ let make = () => { let initialDict = [ - ("currency", "USD"->Js.Json.string), + ("currency", "United States-USD"->Js.Json.string), ("amount", "100"->Js.Json.string), ("profile_id", defaultBusinessProfile.profile_id->Js.Json.string), ]->Js.Dict.fromArray @@ -121,7 +123,15 @@ let make = () => { open LogicUtils let valueDict = values->getDictFromJsonObject setKey(_ => Js.Date.now()->Js.Float.toString) - setCurrency(_ => valueDict->getString("currency", "USD")) + + let currencyValue = + valueDict + ->getString("currency", "United States-USD") + ->Js.String2.split("-") + ->Belt.Array.get(1) + ->Belt.Option.getWithDefault("USD") + ->Js.String2.trim + setCurrency(_ => currencyValue) setAmount(_ => valueDict->getString("amount", "")->Belt.Int.fromString->Belt.Option.getWithDefault(100) * 100 ) From 001cf8cc0b348b566a1664d78babed58e393c1be Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Tue, 28 Nov 2023 15:27:34 +0530 Subject: [PATCH 08/13] Re-render SDK when value changed --- src/screens/HyperSwitch/SDKPayment/SDKPage.res | 1 + 1 file changed, 1 insertion(+) diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index 0777e0bd9..fe3a7f3a9 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -173,6 +173,7 @@ let make = () => { {if isSDKOpen {
Date: Tue, 28 Nov 2023 15:54:04 +0530 Subject: [PATCH 09/13] removed form value spy --- src/screens/HyperSwitch/SDKPayment/SDKPage.res | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index fe3a7f3a9..2aacb6a74 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -70,7 +70,6 @@ module SDKConfifiguarationFields = { - } } From 30199dea12d01083b7b25c9ac3fab44834dac41e Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Tue, 28 Nov 2023 16:08:01 +0530 Subject: [PATCH 10/13] Removed unused code --- src/screens/HyperSwitch/SDKPayment/TestPayment.res | 2 -- src/screens/HyperSwitch/SDKPayment/WebSDK.res | 11 +---------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/src/screens/HyperSwitch/SDKPayment/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res index dc9e9b8ea..d21667b6a 100644 --- a/src/screens/HyperSwitch/SDKPayment/TestPayment.res +++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res @@ -135,7 +135,6 @@ let make = ( elementOptions paymentElementOptions returnUrl - isConfigureConnector={true} amount setClientSecret /> @@ -153,7 +152,6 @@ let make = ( elementOptions paymentElementOptions returnUrl - isConfigureConnector={true} amount setClientSecret /> diff --git a/src/screens/HyperSwitch/SDKPayment/WebSDK.res b/src/screens/HyperSwitch/SDKPayment/WebSDK.res index 2f0bce98a..bb2be9d4f 100644 --- a/src/screens/HyperSwitch/SDKPayment/WebSDK.res +++ b/src/screens/HyperSwitch/SDKPayment/WebSDK.res @@ -33,7 +33,6 @@ module CheckoutForm = { ~layout="", ~methodsOrder=[], ~returnUrl, - ~isConfigureConnector, ~saveViewToSdk=false, ~publishableKey, ~isSpaceAccordion=false, @@ -215,12 +214,6 @@ module CheckoutForm = { }) ->ignore } - let defaultHandleSubmit = () => { - setPaymentStatus(_ => LOADING) - Js.Global.setTimeout(() => { - setPaymentStatus(_ => SUCCESS) - }, 1000)->ignore - } React.useEffect1(() => { let id = Js.String2.split(clientSecret, "_secret_")[0]->Belt.Option.getWithDefault("") switch Some(id) { @@ -254,7 +247,7 @@ module CheckoutForm = { customButtonStyle={`p-1 mt-2 w-full rounded-md ${primaryColor}`} onClick={_ => { setBtnState(_ => Button.Loading) - {isConfigureConnector ? handleSubmit() : defaultHandleSubmit()} + handleSubmit() hyperswitchMixPanel( ~pageName=`${url.path->LogicUtils.getListHead}`, ~contextName="sdk", @@ -298,7 +291,6 @@ let make = ( ~fontFamily="", ~fontSizeBase="", ~paymentElementOptions, - ~isConfigureConnector, ~returnUrl, ~layout="", ~methodsOrder=[], @@ -328,7 +320,6 @@ let make = ( methodsOrder layout returnUrl - isConfigureConnector saveViewToSdk publishableKey isSpaceAccordion From 2553b5ae18e2917f06b49ee412a38b974030f8f9 Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja <1805317@kiit.ac.in> Date: Tue, 28 Nov 2023 18:22:15 +0530 Subject: [PATCH 11/13] Warnings and Unnecessry code removal --- .../WooCommerce/WooCommerceUIUtils.res | 9 +-------- .../CommonConnectorFlow/SetupConnector.res | 3 +-- .../StripePlusPaypalUIUtils.res | 2 -- .../Utils/MilestoneAchievedCard.res | 20 ++++++++----------- .../HSwitchLoginFlow/HyperSwitchAuthUtils.res | 5 ----- 5 files changed, 10 insertions(+), 29 deletions(-) diff --git a/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res b/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res index 05add1692..a723901a0 100644 --- a/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res +++ b/src/entryPoints/hyperswitch/WooCommerce/WooCommerceUIUtils.res @@ -55,7 +55,6 @@ module SelectPaymentMethods = { let showToast = ToastState.useShowToast() let postEnumDetails = EnumVariantHook.usePostEnumDetails() let connectorName = selectedConnector->ConnectorUtils.getConnectorNameString - let fetchUpdatedConnectorList = ConnectorUtils.useFetchConnectorList() let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ => Js.Dict.empty()->Js.Json.object_->ConnectorUtils.getPaymentMethodEnabled @@ -104,15 +103,9 @@ module SelectPaymentMethods = { metadata: metaData, } let body = ConnectorUtils.constructConnectorRequestBody(obj, initialValues) - let connectorUrl = APIUtils.getURL( - ~entityName=CONNECTOR, - ~methodType=Post, - ~id=None, - (), - ) + let connectorUrl = APIUtils.getURL(~entityName=CONNECTOR, ~methodType=Post, ~id=None, ()) let response = await updateAPIHook(connectorUrl, body, Post) - let _updatedConnectorList = await fetchUpdatedConnectorList() setInitialValues(_ => response) response->LogicUtils.getDictFromJsonObject->updateEnumForConnector->ignore setConnectorConfigureState(_ => Summary) diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res index a30bc20b9..621364994 100644 --- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res +++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/SetupConnector.res @@ -174,7 +174,6 @@ module SelectPaymentMethods = { let showToast = ToastState.useShowToast() let usePostEnumDetails = EnumVariantHook.usePostEnumDetails() let connectorName = selectedConnector->ConnectorUtils.getConnectorNameString - let fetchUpdatedConnectorList = ConnectorUtils.useFetchConnectorList() let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ => Js.Dict.empty()->Js.Json.object_->ConnectorUtils.getPaymentMethodEnabled @@ -211,7 +210,7 @@ module SelectPaymentMethods = { let connectorUrl = APIUtils.getURL(~entityName=CONNECTOR, ~methodType=Post, ~id=None, ()) let response = await updateAPIHook(connectorUrl, body, Post) - let _updatedConnectorList = await fetchUpdatedConnectorList() + setInitialValues(_ => response) connectorArray->Array.push(connectorName) setConnectorArray(_ => connectorArray) diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res index 10d457d9b..fd3a99646 100644 --- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res +++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res @@ -18,7 +18,6 @@ module SelectPaymentMethods = { let showToast = ToastState.useShowToast() let postEnumDetails = EnumVariantHook.usePostEnumDetails() let connectorName = selectedConnector->ConnectorUtils.getConnectorNameString - let fetchUpdatedConnectorList = ConnectorUtils.useFetchConnectorList() let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ => Js.Dict.empty()->Js.Json.object_->ConnectorUtils.getPaymentMethodEnabled @@ -72,7 +71,6 @@ module SelectPaymentMethods = { let connectorUrl = APIUtils.getURL(~entityName=CONNECTOR, ~methodType=Post, ~id=None, ()) let response = await updateAPIHook(connectorUrl, body, Post) - let _updatedConnectorList = await fetchUpdatedConnectorList() setInitialValues(_ => response) response->LogicUtils.getDictFromJsonObject->updateEnumForConnector->ignore setConnectorConfigureState(_ => Summary) diff --git a/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res b/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res index 199ed4d66..c36b52bac 100644 --- a/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res +++ b/src/screens/HyperSwitch/Utils/MilestoneAchievedCard.res @@ -11,7 +11,6 @@ let make = ( let url = RescriptReactRouter.useUrl() let hyperswitchMixPanel = HSMixPanel.useSendEvent() let currentPageName = url.path->LogicUtils.getListHead - let (_paymentModal, setPaymentModal) = React.useState(_ => false)
@@ -34,18 +33,15 @@ let make = ( onClick={_ => { if Js.String.startsWith("https", customBackButtonRoute) { Window._open(customBackButtonRoute) - } else { - setPaymentModal(_ => true) - if currentPageName->Js.String2.length > 0 { - [currentPageName, "global"]->Js.Array2.forEach(ele => - hyperswitchMixPanel( - ~pageName=ele, - ~contextName="milestoneachieved", - ~actionName="makeapayment", - (), - ) + } else if currentPageName->Js.String2.length > 0 { + [currentPageName, "global"]->Js.Array2.forEach(ele => + hyperswitchMixPanel( + ~pageName=ele, + ~contextName="milestoneachieved", + ~actionName="makeapayment", + (), ) - } + ) } }} /> diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res index 37ca2bede..d5b98a866 100644 --- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res +++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthUtils.res @@ -251,11 +251,6 @@ module ToggleLiveTestMode = { open HSwitchGlobalVars @react.component let make = (~authType, ~mode, ~setMode, ~setAuthType, ~customClass="") => { - let {testLiveToggle} = - HyperswitchAtom.featureFlagAtom - ->Recoil.useRecoilValueFromAtom - ->LogicUtils.safeParse - ->FeatureFlagUtils.featureFlagType let liveButtonRedirectUrl = switch hostType { | Live | Sandbox => liveURL | Local => localURL From 660d353782cccb6c0265c064d9da2f63a99e6ba2 Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Wed, 29 Nov 2023 12:51:40 +0530 Subject: [PATCH 12/13] Changes for Typed values --- .../ConfigureConnector.res | 11 +++++- .../HyperSwitch/SDKPayment/SDKPage.res | 38 ++++--------------- .../SDKPayment/SDKPaymentTypes.res | 5 +++ .../SDKPayment/SDKPaymentUtils.res | 27 +++++++++++++ .../HyperSwitch/SDKPayment/TestPayment.res | 28 ++++++-------- .../StripePlusPaypalUIUtils.res | 13 ++++++- 6 files changed, 71 insertions(+), 51 deletions(-) create mode 100644 src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res create mode 100644 src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res diff --git a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res index 45c53c56c..e593a671b 100644 --- a/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res +++ b/src/screens/HyperSwitch/Home/CommonConnectorFlow/ConfigureConnector.res @@ -11,6 +11,7 @@ let make = (~connectProcessorValue: connectProcessor) => { let {quickStartPageState, setQuickStartPageState, setDashboardPageState} = React.useContext( GlobalProvider.defaultContext, ) + let (key, setKey) = React.useState(_ => "") let enumDetails = Recoil.useRecoilValueFromAtom(HyperswitchAtom.enumVariantAtom) let typedEnumValue = enumDetails->LogicUtils.safeParse->getTypedValueFromDict let activeBusinessProfile = @@ -152,6 +153,11 @@ let make = (~connectProcessorValue: connectProcessor) => { } } + React.useEffect0(() => { + setKey(_ => Js.Date.now()->Js.Float.toString) + None + }) + <> {switch connectProcessorValue { | LANDING => @@ -256,11 +262,12 @@ let make = (~connectProcessorValue: connectProcessor) => { onClick={_ => updateTestPaymentEnum(~paymentId="pay_default")->ignore} />}> SDKPaymentUtils.initialValueForForm} returnUrl={`${HSwitchGlobalVars.hyperSwitchFEPrefix}/quick-start`} onProceed={updateTestPaymentEnum} - keyValue={Js.Date.now()->Js.Float.toString} + keyValue=key sdkWidth="w-full" + paymentStatusStyles="p-0" />
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index 2aacb6a74..842e18229 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -1,4 +1,5 @@ let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ()) +external toJson: 'a => Js.Json.t = "%identity" module SDKConfifiguarationFields = { open HSwitchMerchantAccountUtils @@ -80,22 +81,13 @@ let make = () => { let hyperswitchMixPanel = HSMixPanel.useSendEvent() let url = RescriptReactRouter.useUrl() let filtersFromUrl = url.search->LogicUtils.getDictFromUrlSearchParams - let (currency, setCurrency) = React.useState(() => "USD") let (isSDKOpen, setIsSDKOpen) = React.useState(_ => false) let (key, setKey) = React.useState(_ => "") let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) let defaultBusinessProfile = businessProfiles->getValueFromBusinessProfile - - let initialDict = - [ - ("currency", "United States-USD"->Js.Json.string), - ("amount", "100"->Js.Json.string), - ("profile_id", defaultBusinessProfile.profile_id->Js.Json.string), - ]->Js.Dict.fromArray - - let (profile, setProfile) = React.useState(_ => defaultBusinessProfile.profile_id) - let (amount, setAmount) = React.useState(() => 10000) - + let (initialValues, setInitialValues) = React.useState(_ => + defaultBusinessProfile.profile_id->SDKPaymentUtils.initialValueForForm + ) React.useEffect1(() => { let paymentIntentOptional = filtersFromUrl->Js.Dict.get("payment_intent_client_secret") if paymentIntentOptional->Belt.Option.isSome { @@ -119,22 +111,8 @@ let make = () => { } let onSubmit = (values, _) => { - open LogicUtils - let valueDict = values->getDictFromJsonObject setKey(_ => Js.Date.now()->Js.Float.toString) - - let currencyValue = - valueDict - ->getString("currency", "United States-USD") - ->Js.String2.split("-") - ->Belt.Array.get(1) - ->Belt.Option.getWithDefault("USD") - ->Js.String2.trim - setCurrency(_ => currencyValue) - setAmount(_ => - valueDict->getString("amount", "")->Belt.Int.fromString->Belt.Option.getWithDefault(100) * 100 - ) - setProfile(_ => valueDict->getString("profile_id", "")) + setInitialValues(_ => values->SDKPaymentUtils.getTypedValueForPayment) setIsSDKOpen(_ => true) RescriptReactRouter.push("/sdk") hyperswitchMixPanel( @@ -157,7 +135,7 @@ let make = () => {
Js.Json.object_} + initialValues={initialValues->toJson} formClass="grid grid-cols-2 gap-x-8 gap-y-4" onSubmit> @@ -173,17 +151,15 @@ let make = () => {
} else { diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res b/src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res new file mode 100644 index 000000000..126925f82 --- /dev/null +++ b/src/screens/HyperSwitch/SDKPayment/SDKPaymentTypes.res @@ -0,0 +1,5 @@ +type paymentType = { + amount: string, + currency: string, + profile_id: string, +} diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res new file mode 100644 index 000000000..0982099cf --- /dev/null +++ b/src/screens/HyperSwitch/SDKPayment/SDKPaymentUtils.res @@ -0,0 +1,27 @@ +let initialValueForForm: string => SDKPaymentTypes.paymentType = profileId => { + amount: "100", + currency: "United States-USD", + profile_id: profileId, +} + +let getTypedValueForPayment: Js.Json.t => SDKPaymentTypes.paymentType = values => { + open LogicUtils + let dictOfValues = values->getDictFromJsonObject + { + amount: dictOfValues->getString("amount", ""), + currency: dictOfValues->getString("currency", "United States-USD"), + profile_id: dictOfValues->getString("profile_id", ""), + } +} + +let convertAmountToCents = (amount: string) => { + amount->Belt.Int.fromString->Belt.Option.getWithDefault(100) * 100 +} + +let getCurrencyValue = (countryCurrency: string) => { + countryCurrency + ->Js.String2.split("-") + ->Belt.Array.get(1) + ->Belt.Option.getWithDefault("USD") + ->Js.String2.trim +} diff --git a/src/screens/HyperSwitch/SDKPayment/TestPayment.res b/src/screens/HyperSwitch/SDKPayment/TestPayment.res index d21667b6a..6426605ed 100644 --- a/src/screens/HyperSwitch/SDKPayment/TestPayment.res +++ b/src/screens/HyperSwitch/SDKPayment/TestPayment.res @@ -5,17 +5,15 @@ let highlightedText = "text-base font-normal text-blue-700 underline" @react.component let make = ( - ~amount=100, ~returnUrl, - ~currency="USD", ~onProceed: (~paymentId: string) => promise, - ~profileId=?, ~sdkWidth="w-[60%]", ~isTestCredsNeeded=true, ~customWidth="w-full md:w-1/2", ~paymentStatusStyles="p-11", ~successButtonText="Proceed", ~keyValue, + ~initialValues: SDKPaymentTypes.paymentType, ) => { open APIUtils open LogicUtils @@ -32,23 +30,21 @@ let make = ( let url = RescriptReactRouter.useUrl() let searchParams = url.search let filtersFromUrl = getDictFromUrlSearchParams(searchParams) - let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) - let defaultBusinessProfile = - businessProfiles->HSwitchMerchantAccountUtils.getValueFromBusinessProfile let getClientSecret = async () => { try { let url = `${HSwitchGlobalVars.hyperSwitchApiPrefix}/payments` let body = Js.Dict.fromArray([ - ("currency", currency->Js.Json.string), - ("amount", amount->Belt.Int.toFloat->Js.Json.number), + ("currency", initialValues.currency->SDKPaymentUtils.getCurrencyValue->Js.Json.string), ( - "profile_id", - profileId - ->Belt.Option.getWithDefault(defaultBusinessProfile.profile_id) - ->Js.Json.string, + "amount", + initialValues.amount + ->SDKPaymentUtils.convertAmountToCents + ->Belt.Int.toFloat + ->Js.Json.number, ), + ("profile_id", initialValues.profile_id->Js.Json.string), ])->Js.Json.object_ let response = await updateDetails(url, body, Post) let clientSecret = response->getDictFromJsonObject->getOptionString("client_secret") @@ -130,12 +126,12 @@ let make = ( publishableKey sdkType=ELEMENT paymentStatus - currency + currency={initialValues.currency->SDKPaymentUtils.getCurrencyValue} setPaymentStatus elementOptions paymentElementOptions returnUrl - amount + amount={initialValues.amount->SDKPaymentUtils.convertAmountToCents} setClientSecret />
@@ -147,12 +143,12 @@ let make = ( publishableKey sdkType=ELEMENT paymentStatus - currency + currency={initialValues.currency->SDKPaymentUtils.getCurrencyValue} setPaymentStatus elementOptions paymentElementOptions returnUrl - amount + amount={initialValues.amount->SDKPaymentUtils.convertAmountToCents} setClientSecret /> } diff --git a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res index 10d457d9b..5d77ebb2d 100644 --- a/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res +++ b/src/screens/HyperSwitch/StripePlusPaypal/StripePlusPaypalUIUtils.res @@ -140,6 +140,10 @@ module TestPayment = { @react.component let make = (~setStepInView) => { let postEnumDetails = EnumVariantHook.usePostEnumDetails() + let (key, setKey) = React.useState(_ => "") + let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom) + let defaultBusinessProfile = + businessProfiles->HSwitchMerchantAccountUtils.getValueFromBusinessProfile let updateTestPaymentEnum = async _ => { try { @@ -153,6 +157,10 @@ module TestPayment = { setStepInView(_ => COMPLETED_STRIPE_PAYPAL) updateTestPaymentEnum()->ignore } + React.useEffect0(() => { + setKey(_ => Js.Date.now()->Js.Float.toString) + None + }) }> SDKPaymentUtils.initialValueForForm} returnUrl={`${HSwitchGlobalVars.hyperSwitchFEPrefix}/stripe-plus-paypal`} onProceed={sptestPaymentProceed} - keyValue={Js.Date.now()->Js.Float.toString} + keyValue={key} sdkWidth="w-full" + paymentStatusStyles="p-0" /> } From eca2eda74159b40f74a18c66ee34f26ac8b58a7d Mon Sep 17 00:00:00 2001 From: Riddhi Agrawal Date: Wed, 29 Nov 2023 13:15:13 +0530 Subject: [PATCH 13/13] Css changes --- src/screens/HyperSwitch/SDKPayment/SDKPage.res | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res index 842e18229..eebf916f8 100644 --- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res +++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res @@ -133,7 +133,7 @@ let make = () => {

{"Setup test checkout"->React.string}

-
+
toJson} formClass="grid grid-cols-2 gap-x-8 gap-y-4"