From 3aa8c3d607bcacf2d4af8c850cc1471ae145284e Mon Sep 17 00:00:00 2001 From: Arush Date: Thu, 7 Dec 2023 07:17:29 +0530 Subject: [PATCH] feat: HS-146 Added Universal Hyperswitch SDK /demo-store url --- .../hyperswitch/assets/hyperswitchSDK/cap.png | Bin 0 -> 6246 bytes .../assets/hyperswitchSDK/powder.png | Bin 0 -> 2864 bytes .../assets/hyperswitchSDK/shirt.png | Bin 0 -> 7501 bytes .../icons/hyperswitchSDK/authentication.svg | 1 + .../icons/hyperswitchSDK/tickMarkWhite.svg | 3 + public/hyperswitch/icons/solid.svg | 264 ++++++++++++++++ src/components/HyperSwitchAuthWrapper.res | 9 +- src/components/Icon.res | 2 + src/components/Icon.resi | 1 + .../hyperswitch/EntryPointUtils.res | 6 +- src/libraries/Window.res | 20 ++ .../HSwitchDemoAppPreview.res | 152 +++++++++ .../HSwitchSdkPreview.res | 48 +++ .../HyperswitchSDK.res | 100 ++++++ .../UniversalHyperswitchSDK.res | 63 ++++ .../components/HSwitchCardData.res | 65 ++++ .../components/HSwitchCheckoutForm.res | 154 +++++++++ .../components/HSwitchExtraFeatures.res | 30 ++ .../components/HSwitchFilterData.res | 33 ++ .../components/HSwitchFilterDropdown.res | 63 ++++ .../components/HSwitchFilterTab.res | 104 +++++++ .../components/HSwitchFilters.res | 14 + .../components/HSwitchHeader.res | 37 +++ .../components/HSwitchModal.res | 54 ++++ .../HSwitchPaymentCompletePopup.res | 89 ++++++ .../components/HSwitchProduct.res | 50 +++ .../components/HSwitchSDK.res | 12 + .../components/HSwitchTermsAndPrivacy.res | 34 ++ .../components/HSwitchTestCards.res | 48 +++ .../HSwitchUpdateProductQuantity.res | 93 ++++++ .../components/HSwitchViewProducts.res | 50 +++ .../components/PoweredBy.res | 10 + .../libraries/HyperSwitch/HSwitchSDKTypes.res | 40 +++ .../libraries/HyperSwitch/HSwitchTypes.res | 36 +++ .../utilities/HSwitchRecoilAtoms.res | 10 + .../utilities/HSwitchSDKUtils.res | 294 ++++++++++++++++++ .../HyperSwitchAuthScreen.res | 6 +- tailwindHyperSwitch.config.js | 69 ++++ 38 files changed, 2058 insertions(+), 6 deletions(-) create mode 100644 public/hyperswitch/assets/hyperswitchSDK/cap.png create mode 100644 public/hyperswitch/assets/hyperswitchSDK/powder.png create mode 100644 public/hyperswitch/assets/hyperswitchSDK/shirt.png create mode 100644 public/hyperswitch/icons/hyperswitchSDK/authentication.svg create mode 100644 public/hyperswitch/icons/hyperswitchSDK/tickMarkWhite.svg create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchDemoAppPreview.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchSdkPreview.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/HyperswitchSDK.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/UniversalHyperswitchSDK.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCardData.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCheckoutForm.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchExtraFeatures.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterData.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterDropdown.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterTab.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilters.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchHeader.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchModal.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchPaymentCompletePopup.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchProduct.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchSDK.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTermsAndPrivacy.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTestCards.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchUpdateProductQuantity.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchViewProducts.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/components/PoweredBy.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchSDKTypes.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchTypes.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchRecoilAtoms.res create mode 100644 src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchSDKUtils.res diff --git a/public/hyperswitch/assets/hyperswitchSDK/cap.png b/public/hyperswitch/assets/hyperswitchSDK/cap.png new file mode 100644 index 0000000000000000000000000000000000000000..51073481cb983a5e5bcc8213bd49e97b2ece0815 GIT binary patch literal 6246 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 XW*Hk>WI0u?00000NkvXXu0mjfC_S \ No newline at end of file diff --git a/public/hyperswitch/icons/hyperswitchSDK/tickMarkWhite.svg b/public/hyperswitch/icons/hyperswitchSDK/tickMarkWhite.svg new file mode 100644 index 000000000..4445195e1 --- /dev/null +++ b/public/hyperswitch/icons/hyperswitchSDK/tickMarkWhite.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg index 6920b90d2..a44b4150a 100644 --- a/public/hyperswitch/icons/solid.svg +++ b/public/hyperswitch/icons/solid.svg @@ -8798,4 +8798,268 @@ License) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/HyperSwitchAuthWrapper.res b/src/components/HyperSwitchAuthWrapper.res index ee0d30017..6be78d5ad 100644 --- a/src/components/HyperSwitchAuthWrapper.res +++ b/src/components/HyperSwitchAuthWrapper.res @@ -37,10 +37,11 @@ let make = (~children) => {
- {switch currentAuthState { - | LoggedOut => - | LoggedIn(_token) => children - | CheckingAuthStatus => + {switch (currentAuthState, url.path) { + | (_, list{"demo-store"}) => + | (LoggedOut, _) => + | (LoggedIn(_token), _) => children + | (CheckingAuthStatus, _) => }}
diff --git a/src/components/Icon.res b/src/components/Icon.res index 5d28cac6e..3cb37e0d2 100644 --- a/src/components/Icon.res +++ b/src/components/Icon.res @@ -9,6 +9,7 @@ let make = ( ~customIconColor="", ~customWidth=?, ~customHeight=?, + ~id=?, ) => { let urlPrefix = "" @@ -31,6 +32,7 @@ let make = ( | None => "flex flex-col justify-center" }}> React.element diff --git a/src/entryPoints/hyperswitch/EntryPointUtils.res b/src/entryPoints/hyperswitch/EntryPointUtils.res index 5b67e4f6d..67003d110 100644 --- a/src/entryPoints/hyperswitch/EntryPointUtils.res +++ b/src/entryPoints/hyperswitch/EntryPointUtils.res @@ -42,10 +42,14 @@ let renderDashboardApp = (~uiConfig=UIConfig.defaultUIConfig, children) => { | Some(container) => open ReactDOM.Client open ReactDOM.Client.Root + open Window let root = createRoot(container) + let windowUrl = urlSearch(location.href) + let isDemoStore = windowUrl.href->Js.String2.includes("demo-store") + let demoStoreClass = isDemoStore ? "overflow-scroll bg-[#f6f8fb]" : "overflow-hidden" root->render( -
+
children
, ) diff --git a/src/libraries/Window.res b/src/libraries/Window.res index 8a326afbb..738b74681 100644 --- a/src/libraries/Window.res +++ b/src/libraries/Window.res @@ -206,3 +206,23 @@ type boundingClient = {x: int, y: int, width: int, height: int} type env = {apiBaseUrl?: string, sdkBaseUrl?: string} @val @scope("window") external env: env = "_env_" + +type searchParams = {set: (. string, string) => unit, get: (. string) => Js.Json.t} +type url = {searchParams: searchParams, href: string} +@new external urlSearch: string => url = "URL" + +@val @scope("document") external createElement: string => Dom.element = "createElement" + +type location = {replace: (. string) => unit, href: string} +@val @scope("window") external location: location = "location" + +@set external elementSrc: (Dom.element, string) => unit = "src" +@set external elementOnload: (Dom.element, unit => unit) => unit = "onload" +@set external elementOnerror: (Dom.element, exn => unit) => unit = "onerror" + +type body + +@val @scope("document") +external body: body = "body" + +@send external appendChild: (body, Dom.element) => unit = "appendChild" diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchDemoAppPreview.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchDemoAppPreview.res new file mode 100644 index 000000000..8c89faf4a --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchDemoAppPreview.res @@ -0,0 +1,152 @@ +@react.component +let make = (~isShowFilters, ~isShowTestCards, ~children=React.null) => { + let (shirtQuantity, setShirtQuantity) = React.useState(() => 1) + let (capQuantity, setCapQuantity) = React.useState(() => 2) + let isModalOpen = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.isModalOpen) + + let renderSDK = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.renderSDK) + let theme = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme) + let isDesktop = HSwitchSDKUtils.getIsDesktop( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.size), + ) + + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme(theme) + let setSize = Recoil.useSetRecoilState(HSwitchRecoilAtoms.size) + let setIsMobileScreen = Recoil.useSetRecoilState(HSwitchRecoilAtoms.isMobileScreen) + let isMobileScreen = MatchMedia.useMatchMedia("(max-width: 1100px)") + + let (amount, setAmount) = Recoil.useRecoilState(HSwitchRecoilAtoms.amount) + + let mobileWrapperClass = "w-[336px] rounded-[48px] p-2 mx-auto h-[760px] shadow-websiteShadow" + let desktopWrapperClass = "rounded-[8px] shadow-websiteShadow" + + let mobileHeaderWrapperClass = "relative h-full rounded-[40px] overflow-hidden bg-white shadow-mobileHeaderShadow" + + React.useEffect1(() => { + if isMobileScreen { + setSize(._ => "Mobile") + setIsMobileScreen(._ => true) + } else { + setIsMobileScreen(._ => false) + } + + None + }, [isMobileScreen]) + + React.useEffect2(() => { + setAmount(._ => HSwitchSDKUtils.amountToDisplay(~shirtQuantity, ~capQuantity)) + None + }, (shirtQuantity, capQuantity)) + + let getMobileFrameButtonElement = className => { +
+ } + +
+ +
+
+ + {getMobileFrameButtonElement("left-0 top-[7.5rem] h-10 rounded-tl-md rounded-bl-md")} + {getMobileFrameButtonElement("left-0 top-48 h-16 rounded-tl-md rounded-bl-md")} + {getMobileFrameButtonElement("left-0 top-[17rem] h-16 rounded-tl-md rounded-bl-md")} + {getMobileFrameButtonElement("right-0 top-52 h-24 rounded-tr-md rounded-br-md")} + +
+
+
+
+ +
+ +
+
+ +
+ {React.string("Hyperswitch Demo Store")} +
+
+ {React.string(isDesktop ? "Test Mode" : "Test")} +
+
+
+ + + +
+ {React.string("Pay Hyperswitch")} +
+
+ {React.string("US$")} + {React.string(amount)} +
+
+ + + + +
+
+ {children} +
+ + + +
+
+
+
+
+
+
+ + + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchSdkPreview.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchSdkPreview.res new file mode 100644 index 000000000..691ba3976 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/HSwitchSdkPreview.res @@ -0,0 +1,48 @@ +@react.component +let make = (~isShowFilters, ~isShowTestCards, ~children=React.null) => { + let renderSDK = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.renderSDK) + let theme = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme) + let isDesktop = HSwitchSDKUtils.getIsDesktop( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.size), + ) + let setIsMobileScreen = Recoil.useSetRecoilState(HSwitchRecoilAtoms.isMobileScreen) + let isMobileScreen = MatchMedia.useMatchMedia("(max-width: 1100px)") + + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme(theme) + + let setSize = Recoil.useSetRecoilState(HSwitchRecoilAtoms.size) + + React.useEffect1(() => { + if isMobileScreen { + setSize(._ => "Mobile") + setIsMobileScreen(._ => true) + } else { + setIsMobileScreen(._ => false) + } + + None + }, [isMobileScreen]) + +
+ + + +
+ +
+
+ {children} +
+
+
+ + + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/HyperswitchSDK.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/HyperswitchSDK.res new file mode 100644 index 000000000..bed3e3e0e --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/HyperswitchSDK.res @@ -0,0 +1,100 @@ +open Promise + +@react.component +let make = (~viewType) => { + let setViewType = Recoil.useSetRecoilState(HSwitchRecoilAtoms.viewType) + let amountToShow = + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.amount) + ->Belt.Float.fromString + ->Belt.Option.getWithDefault(100.0) *. 100.0 + let amount = amountToShow->Belt.Int.fromFloat->Belt.Int.toString + let fetchApi = AuthHooks.useApiFetcher() + let (options, setOptions) = React.useState(_ => None) + let (selectedMenu, setSelectedMenu) = React.useState(_ => "") + + let theme = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme)->Js.String2.toLowerCase + let customerLocation = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.customerLocation) + let currency = HSwitchSDKUtils.getCurrencyFromCustomerLocation(customerLocation) + let country = HSwitchSDKUtils.getCountryFromCustomerLocation(customerLocation) + let countryCode = country + + let hyperSwitchToken = LocalStorage.getItem("login")->Js.Nullable.toOption + let fetchDetails = APIUtils.useGetMethod() + let (merchantPublishableKey, setPublishableAPIKey) = React.useState(_ => "") + + let fetchMerchantInfo = async () => { + try { + let accountUrl = APIUtils.getURL(~entityName=MERCHANT_ACCOUNT, ~methodType=Get, ()) + let merchantDetailsJSON = await fetchDetails(accountUrl) + let merchantDetails = merchantDetailsJSON->HSwitchMerchantAccountUtils.getMerchantDetails + setPublishableAPIKey(_ => merchantDetails.publishable_key) + } catch { + | Js.Exn.Error(e) => + let _err = Js.Exn.message(e)->Belt.Option.getWithDefault("Failed to Fetch!") + } + } + + React.useEffect0(() => { + fetchMerchantInfo()->ignore + setViewType(._ => viewType) + None + }) + + React.useEffect1(() => { + let body = HSwitchSDKUtils.getDefaultPayload(amount, currency, country, countryCode) + + let headers = switch hyperSwitchToken { + | Some(key) => + switch key { + | "" => [("Content-Type", "application/json"), ("api-key", HSwitchSDKUtils.defaultAPIKey)] + | key => [ + ("Content-Type", "application/json"), + ("Api-Key", "hyperswitch"), + ("Authorization", `Bearer ${key}`), + ] + } + | None => [("Content-Type", "application/json"), ("api-key", HSwitchSDKUtils.defaultAPIKey)] + } + + fetchApi( + HSwitchSDKUtils.backendEndpointUrl, + ~method_=Fetch.Post, + ~bodyStr=body->Js.Json.stringify, + ~headers=headers->Js.Dict.fromArray, + (), + ) + ->then(resp => { + Fetch.Response.json(resp) + }) + ->then(json => { + let clientSecret = + json + ->Js.Json.decodeObject + ->Belt.Option.flatMap(x => x->Js.Dict.get("client_secret")) + ->Belt.Option.flatMap(Js.Json.decodeString) + ->Belt.Option.getWithDefault("") + setOptions(_ => Some(HSwitchSDKUtils.getOptions(clientSecret, theme))) + json->resolve + }) + ->ignore + None + }, [theme]) + + let hyperPromise = switch merchantPublishableKey { + | "" => HSwitchSDKUtils.loadHyper(HSwitchSDKUtils.defaultPublishableKey) + | key => HSwitchSDKUtils.loadHyper(key) + } + +
+ {switch options { + | Some(val) => + + | None => React.null + }} +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/UniversalHyperswitchSDK.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/UniversalHyperswitchSDK.res new file mode 100644 index 000000000..cca3900b8 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/UniversalHyperswitchSDK.res @@ -0,0 +1,63 @@ +open Window + +@react.component +let make = () => { + let (viewType, setViewType) = React.useState(_ => HSwitchSDKUtils.DemoApp) + let (isShowFilters, setIsShowFilters) = React.useState(_ => true) + let (isShowTestCards, setIsShowTestCards) = React.useState(_ => true) + + React.useEffect1(() => { + let windowUrl = urlSearch(location.href) + + let paramViewType = windowUrl.searchParams.get(. "viewType")->Js.Json.decodeString + let paramIsShowFilters = windowUrl.searchParams.get(. "isShowFilters")->Js.Json.decodeString + let paramIsShowTestCards = windowUrl.searchParams.get(. "isShowTestCards")->Js.Json.decodeString + + switch paramViewType { + | Some(val) => + switch val->Js.String2.toLowerCase { + | "demoapp" => setViewType(_ => HSwitchSDKUtils.DemoApp) + | "sdkpreview" => setViewType(_ => HSwitchSDKUtils.SdkPreview) + | _ => setViewType(_ => HSwitchSDKUtils.DemoApp) + } + | None => () + } + + switch paramIsShowFilters { + | Some(val) => + switch val->Js.String2.toLowerCase { + | "true" => setIsShowFilters(_ => true) + | "false" => setIsShowFilters(_ => false) + | _ => setIsShowFilters(_ => true) + } + | None => () + } + + switch paramIsShowTestCards { + | Some(val) => + switch val->Js.String2.toLowerCase { + | "true" => setIsShowTestCards(_ => true) + | "false" => setIsShowTestCards(_ => false) + | _ => setIsShowTestCards(_ => true) + } + | None => () + } + + None + }, [location.href]) + +
+ + {switch viewType { + | HSwitchSDKUtils.DemoApp => + + + + | HSwitchSDKUtils.SdkPreview => + + + + }} + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCardData.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCardData.res new file mode 100644 index 000000000..3c77b16db --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCardData.res @@ -0,0 +1,65 @@ +@val @scope(("navigator", "clipboard")) +external writeText: string => unit = "writeText" + +@react.component +let make = (~icon, ~label, ~number, ~color) => { + let (isCopied, setIsCopied) = React.useState(_ => false) + + let handleIsCopied = () => { + setIsCopied(_ => true) + writeText(number) + } + + let handleMouseLeave = () => { + setIsCopied(_ => false) + } + + let cardClass = "flex min-h-[38px] justify-between items-center p-[10px] bg-white rounded-md cursor-pointer font-bold text-xs border border-solid border-[rgba(60,66,87,.12)] w-full mb-2 relative shadow-testCardsShadow" + let cardAfterClass = `after:opacity-0 after:content-['Copy'] after:absolute after:bg-[rgba(86,86,86,.85)] after:text-white after:font-bold after:text-sm after:h-full after:w-full after:-m-[10px] after:rounded-md after:flex after:justify-center after:items-center after:transition-opacity after:duration-150 after:ease-in-out` + let cardCopiedAfter = "hover:after:content-['Copied'] after:bg-no-repeat bgUrl" + + let cardDotElement = +
+ + let css = ".bgPosition:hover::after { + background-position: 60px; + } + .bgUrl::after { + background-image: url('icons/hyperswitchSDK/tickMarkWhite.svg') + } + " + + <> + + + +} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCheckoutForm.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCheckoutForm.res new file mode 100644 index 000000000..c1a33a2d0 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchCheckoutForm.res @@ -0,0 +1,154 @@ +open HSwitchSDKTypes +open HSwitchTypes +open Promise + +@react.component +let make = (~customerPaymentMethods) => { + let hyper = useHyper() + let theme = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme) + let setPaymentStatus = Recoil.useSetRecoilState(HSwitchRecoilAtoms.paymentStatus) + let amountToShow = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.amount) + + let (isPaymentProcessing, setIsPaymentProcessing) = React.useState(_ => false) + let (errorMsg, setErrorMsg) = React.useState(_ => None) + + let layout = switch Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.layout) { + | "Tabs" => "tabs" + | "Accordion" => "accordion" + | "Spaced Accordion" => "spaced" + | _ => "tabs" + } + + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme), + ) + + let options = HSwitchSDKUtils.getOptionsPayload(customerPaymentMethods, layout, theme) + + let handleFormSubmit = event => { + event->ReactEvent.Form.preventDefault + setIsPaymentProcessing(_ => true) + + let confirmParams = + [ + ( + "confirmParams", + [("return_url", HSwitchSDKUtils.redirectUrl->Js.Json.string)] + ->Js.Dict.fromArray + ->Js.Json.object_, + ), + ] + ->Js.Dict.fromArray + ->Js.Json.object_ + + hyper.confirmPayment(confirmParams) + ->then(val => { + let resDict = val->Js.Json.decodeObject->Belt.Option.getWithDefault(Js.Dict.empty()) + let status = + resDict + ->Js.Dict.get("status") + ->Belt.Option.flatMap(Js.Json.decodeString) + ->Belt.Option.getWithDefault("") + + setIsPaymentProcessing(_ => false) + setPaymentStatus(._ => status) + + resolve() + }) + ->ignore + } + + let css = `.spinner, + .spinner:before, + .spinner:after { + border-radius: 50%; + } + + .spinner { + color: #ffffff; + font-size: 22px; + text-indent: -99999px; + margin: 0px auto; + position: relative; + width: 20px; + height: 20px; + box-shadow: inset 0 0 0 2px; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + } + + .spinner:before, + .spinner:after { + position: absolute; + content: ''; + } + + .spinner:before { + width: 10.4px; + height: 20.4px; + background: ${"rgb(25,37,82)"}; + border-radius: 20.4px 0 0 20.4px; + top: -0.2px; + left: -0.2px; + -webkit-transform-origin: 10.4px 10.2px; + transform-origin: 10.4px 10.2px; + -webkit-animation: loading 2s infinite ease 1.5s; + animation: loading 2s infinite ease 1.5s; + } + + .spinner:after { + width: 10.4px; + height: 10.2px; + background: ${"rgb(25,37,82)"}; + border-radius: 0 10.2px 10.2px 0; + top: -0.1px; + left: 10.2px; + -webkit-transform-origin: 0px 10.2px; + transform-origin: 0px 10.2px; + -webkit-animation: loading 2s infinite ease; + animation: loading 2s infinite ease; + } + + @keyframes loading { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + }` + + let errorDiv = error => { +
{React.string(error)}
+ } + + let errorHandlingClass = errorMsg->Belt.Option.isSome ? "mt-1" : "mt-4" + +
+ +
handleFormSubmit(event)}> + + {switch errorMsg { + | Some(error) => errorDiv(error) + | None => React.null + }} + + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchExtraFeatures.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchExtraFeatures.res new file mode 100644 index 000000000..cc8393fb9 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchExtraFeatures.res @@ -0,0 +1,30 @@ +@react.component +let make = (~isShowFilters) => { + let isMobileScreen = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.isMobileScreen) + +
+
+
+ + {React.string("Hyperswitch")} + + +
{React.string("Explore Hyperswitch")}
+ + + +
+
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterData.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterData.res new file mode 100644 index 000000000..6c97c73f2 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterData.res @@ -0,0 +1,33 @@ +type tabName = CustomerLocation | Size | Theme | Layout + +let getStringFromTabName = name => { + switch name { + | CustomerLocation => "Customer Location" + | Size => "Size" + | Theme => "Theme" + | Layout => "Layout" + } +} + +let customerLocations = [ + "United Arab Emirates (AED)", + "Australia (AUD)", + "Brazil (BRL)", + "China (CNY)", + "Germany (EUR)", + "United Kingdom (GBP)", + "Indonesia (IDR)", + "Japan (JPY)", + "Mexico (MXN)", + "Malaysia (MYR)", + "Poland (PLN)", + "Singapore (SGD)", + "Thailand (THB)", + "United States (USD)", +] + +let sizes = ["Desktop", "Mobile"] + +let themes = ["Default", "Brutal", "Midnight", "Soft", "Charcoal"] + +let layouts = ["Tabs", "Accordion", "Spaced Accordion"] diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterDropdown.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterDropdown.res new file mode 100644 index 000000000..80a0b600e --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterDropdown.res @@ -0,0 +1,63 @@ +@react.component +let make = ( + ~list, + ~selectedValue, + ~setSelectedValue, + ~showExtra, + ~extraTitle, + ~extraDesc, + ~extraWidth, + ~isShowFlag, +) => { + let setRenderSDK = Recoil.useSetRecoilState(HSwitchRecoilAtoms.renderSDK) + let isDesktop = HSwitchSDKUtils.getIsDesktop( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.size), + ) + let isMobileScreen = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.isMobileScreen) + + let handleChange = name => { + setSelectedValue(._ => name) + + setRenderSDK(._ => false) + let _ = Js.Global.setTimeout(() => { + setRenderSDK(._ => true) + }, 500) + } + +
+
+ +
+
+ {list + ->Js.Array2.map(name => { + let iconName = name->HSwitchSDKUtils.getCountryFromCustomerLocation->Js.String2.toLowerCase + + }) + ->React.array} + +
+
+ +
{React.string(extraTitle)}
+
+
{React.string(extraDesc)}
+
+ +
+
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterTab.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterTab.res new file mode 100644 index 000000000..fa000167b --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilterTab.res @@ -0,0 +1,104 @@ +open HSwitchRecoilAtoms + +@react.component +let make = (~tabName: HSwitchFilterData.tabName) => { + let (isShowFilterDropdown, setIsShowFilterDropdown) = React.useState(_ => false) + let isMobileScreen = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.isMobileScreen) + + let list = switch tabName { + | CustomerLocation => HSwitchFilterData.customerLocations + | Size => HSwitchFilterData.sizes + | Theme => HSwitchFilterData.themes + | Layout => HSwitchFilterData.layouts + } + + let (selectedValue, setSelectedValue) = switch tabName { + | CustomerLocation => Recoil.useRecoilState(customerLocation) + | Size => Recoil.useRecoilState(size) + | Theme => Recoil.useRecoilState(theme) + | Layout => Recoil.useRecoilState(layout) + } + + let showExtra = switch tabName { + | CustomerLocation + | Theme => true + | _ => false + } + + let extraTitle = switch tabName { + | CustomerLocation => HSwitchSDKUtils.customerLocationExtraTitle + | Theme => HSwitchSDKUtils.themeExtraTitle + | _ => "" + } + + let extraDesc = switch tabName { + | CustomerLocation => HSwitchSDKUtils.customerLocationExtraDesc + | Theme => HSwitchSDKUtils.themeExtraDesc + | _ => "" + } + + let extraWidth = switch tabName { + | CustomerLocation => "250px" + | Theme => "185px" + | _ => "185px" + } + + let isShowFlag = tabName === CustomerLocation + let isSize = tabName === Size + + let iconName = + selectedValue->HSwitchSDKUtils.getCountryFromCustomerLocation->Js.String2.toLowerCase + + let tabNameString = tabName->HSwitchFilterData.getStringFromTabName + let filterId = `filter-btn-${tabNameString->Js.String2.replace(" ", "_")}` + + React.useLayoutEffect0(() => { + Window.addEventListener("click", ev => { + let targetId = ReactEvent.Mouse.target(ev)["id"] + if targetId !== filterId && targetId !== filterId->Js.String2.concat("-arrow") { + setIsShowFilterDropdown(_ => false) + } + }) + Some( + () => { + Window.removeEventListener("click", ev => { + let targetId = ReactEvent.Mouse.target(ev)["id"] + if targetId !== filterId && targetId !== filterId->Js.String2.concat("-arrow") { + setIsShowFilterDropdown(_ => false) + } + }) + }, + ) + }) + +
+
+ {React.string(tabName->HSwitchFilterData.getStringFromTabName)} +
+
{React.string("|")}
+
setIsShowFilterDropdown(_ => true)}> + + + + + Js.String2.toLowerCase}-hs`} className="mr-1" /> + + {React.string(selectedValue)} + Js.String2.concat("-arrow")} + name="arrow-down-hs" + size=9 + className="ml-1 text-[#5d5d5d]" + /> +
+ + + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilters.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilters.res new file mode 100644 index 000000000..33efd2b1b --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchFilters.res @@ -0,0 +1,14 @@ +@react.component +let make = () => { + let isMobileView = MatchMedia.useMatchMedia("(max-width: 830px)") + +
+ + + + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchHeader.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchHeader.res new file mode 100644 index 000000000..822f53178 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchHeader.res @@ -0,0 +1,37 @@ +@react.component +let make = () => { + let isDesktop = HSwitchSDKUtils.getIsDesktop( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.size), + ) + + let desktopHeaderClass = "rounded-lg py-[6px] px-3" + + let mobileDomainClass = "p-4" + let desktopDomainClass = "bg-[rgba(236,242,247,.4)] rounded-xl" + + let windowControlElement =
+ +
+ +
+ {windowControlElement} + {windowControlElement} + {windowControlElement} +
+ +
+
    +
  • + +
    {React.string(HSwitchSDKUtils.websiteDomain)}
    +
    • +
+
+
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchModal.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchModal.res new file mode 100644 index 000000000..3680a2ac3 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchModal.res @@ -0,0 +1,54 @@ +@react.component +let make = (~isModalOpen, ~setIsModalOpen, ~children) => { + let setIsGlobalModalOpen = Recoil.useSetRecoilState(HSwitchRecoilAtoms.isModalOpen) + + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme), + ) + let isDesktop = HSwitchSDKUtils.getIsDesktop( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.size), + ) + + let handleModalClose = () => { + if !isDesktop { + setIsModalOpen(_ => false) + setIsGlobalModalOpen(._ => false) + } + } + + React.useLayoutEffect0(() => { + Window.addEventListener("click", ev => { + let targetId = ReactEvent.Mouse.target(ev)["id"] + if targetId === "modal-wrapper" { + handleModalClose() + } + }) + Some( + () => { + Window.addEventListener("click", ev => { + let targetId = ReactEvent.Mouse.target(ev)["id"] + if targetId === "modal-wrapper" { + handleModalClose() + } + }) + }, + ) + }) + + + + +} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchPaymentCompletePopup.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchPaymentCompletePopup.res new file mode 100644 index 000000000..3d37065ec --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchPaymentCompletePopup.res @@ -0,0 +1,89 @@ +open Window + +@react.component +let make = () => { + let (isModalOpen, setIsModalOpen) = React.useState(_ => false) + let (paymentStatus, setPaymentStatus) = React.useState(_ => "") + let (paymentMsg, setPaymentMsg) = React.useState(_ => "") + let (iconName, setIconName) = React.useState(_ => "") + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme), + ) + let paymentStatusState = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.paymentStatus) + let (isClicked, setIsClicked) = React.useState(_ => false) + + React.useEffect1(() => { + let windowUrl = urlSearch(location.href) + let status = windowUrl.searchParams.get(. "status")->Js.Json.decodeString + + let finalStatus = + status === None && paymentStatusState !== "" ? Some(paymentStatusState) : status + + switch finalStatus { + | Some(val) => { + switch val { + | "succeeded" => { + setPaymentStatus(_ => val) + setPaymentMsg(_ => HSwitchSDKUtils.successPaymentMsg) + setIconName(_ => "circle-tick") + } + | "failed" => + setPaymentStatus(_ => val) + setPaymentMsg(_ => HSwitchSDKUtils.failurePaymentMsg) + setIconName(_ => "circle-cross") + | _ => { + setPaymentStatus(_ => "processing") + setPaymentMsg(_ => HSwitchSDKUtils.processingPaymentMsg) + setIconName(_ => "circle-tick") + } + } + setIsModalOpen(_ => true) + } + | None => () + } + + None + }, [paymentStatusState]) + + let handleRedirect = () => { + if !isClicked { + setIsClicked(_ => true) + let url = urlSearch(HSwitchSDKUtils.redirectUrl) + location.replace(. url.href) + } + } + + let redirectMsg = isClicked ? "Restarting Demo..." : "Restart Demo" + +
+ +
+ +
+ {React.string(`Payment ${paymentStatus}`)} +
+
{React.string(paymentMsg)}
+ +
+ +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchProduct.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchProduct.res new file mode 100644 index 000000000..2698a46c1 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchProduct.res @@ -0,0 +1,50 @@ +@react.component +let make = (~productImg, ~productTitle, ~productAmount, ~productQuantity, ~setProductQuantity) => { + let setIsGlobalModalOpen = Recoil.useSetRecoilState(HSwitchRecoilAtoms.isModalOpen) + let (isModalOpen, setIsModalOpen) = React.useState(_ => false) + + let theme = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme) + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme(theme) + + let handleModalOpen = () => { + setIsModalOpen(_ => true) + setIsGlobalModalOpen(._ => true) + } + +
+ +
+
+
{React.string(productTitle)}
+
+ {React.string( + `US$ ${(productAmount *. productQuantity->Belt.Int.toFloat) + ->Js.Float.toFixedWithPrecision(~digits=2)}`, + )} +
+
+
+
handleModalOpen()}> +
{React.string(`Qty ${productQuantity->Belt.Int.toString}`)}
+ +
+ 1}> +
+ {React.string(`US $${productAmount->Js.Float.toFixedWithPrecision(~digits=2)} each`)} +
+ +
+
+ + + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchSDK.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchSDK.res new file mode 100644 index 000000000..095305712 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchSDK.res @@ -0,0 +1,12 @@ +external objToJson: {..} => Js.Json.t = "%identity" + +open HSwitchSDKTypes + +@react.component +let make = (~options, ~selectedMenu, ~customerPaymentMethods, ~hyperPromise) => { +
+ objToJson} hyper={hyperPromise}> + + +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTermsAndPrivacy.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTermsAndPrivacy.res new file mode 100644 index 000000000..36fcb4809 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTermsAndPrivacy.res @@ -0,0 +1,34 @@ +@react.component +let make = (~className="") => { + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme), + ) + let isDesktop = HSwitchSDKUtils.getIsDesktop( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.size), + ) + + let aTagClassName = `mr-3 underline decoration-dotted decoration-[${themeColors.textSecondaryColor}] text-[${themeColors.textSecondaryColor}] text-xs cursor-pointer` + + let css = `.desktopWrapperClass { + position: absolute; + bottom: 7%; + }` + + <> + + + +} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTestCards.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTestCards.res new file mode 100644 index 000000000..832aebd98 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchTestCards.res @@ -0,0 +1,48 @@ +@react.component +let make = () => { + let (isToggle, setIsToggle) = React.useState(_ => false) + + let handleToggleClick = () => { + setIsToggle(prev => !prev) + } + + React.useEffect0(() => { + handleToggleClick() + Js.Global.setTimeout(() => { + handleToggleClick() + }, 1500)->ignore + None + }) + +
+
handleToggleClick()}> +
+ +
{React.string("Test Cards")}
+
+ +
+
+ + + +
+
+ {React.string(HSwitchSDKUtils.testCardsInfo)} +
+
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchUpdateProductQuantity.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchUpdateProductQuantity.res new file mode 100644 index 000000000..e6dcb7fed --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchUpdateProductQuantity.res @@ -0,0 +1,93 @@ +@react.component +let make = (~setIsModalOpen, ~productQuantity, ~setProductQuantity) => { + let setIsGlobalModalOpen = Recoil.useSetRecoilState(HSwitchRecoilAtoms.isModalOpen) + let (quantity, setQuantity) = React.useState(_ => productQuantity) + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme), + ) + + let handleClose = () => { + setIsModalOpen(_ => false) + setIsGlobalModalOpen(._ => false) + } + + let handleDec = () => { + if quantity > 1 { + setQuantity(prev => prev - 1) + } + } + + let handleInc = () => { + if quantity < 10 { + setQuantity(prev => prev + 1) + } + } + + let handleChange = ev => { + let val = ReactEvent.Form.target(ev)["value"] + switch val->Belt.Int.fromString { + | Some(num) => + if num > 0 && num <= 99 { + setQuantity(_ => num) + } + | None => () + } + } + + let handleUpdate = () => { + setProductQuantity(_ => quantity) + handleClose() + } + + let counterBtnClass = "text-sm font-normal mx-[15px] p-[10px] rounded-[20px] text-center w-8 h-8 flex items-center justify-center cursor-pointer" + + <> +
+
+ +
+
+ {React.string("Update Quantity")} +
+
+ {React.string("The Pure Set")} +
+
+
+ handleClose()} /> +
+
+ + Belt.Int.toString} + onChange={handleChange} + /> + +
+ + +} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchViewProducts.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchViewProducts.res new file mode 100644 index 000000000..972107773 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/HSwitchViewProducts.res @@ -0,0 +1,50 @@ +@react.component +let make = (~shirtQuantity, ~setShirtQuantity, ~capQuantity, ~setCapQuantity) => { + let isDesktop = HSwitchSDKUtils.getIsDesktop( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.size), + ) + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme( + Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme), + ) + + let totalAmount = HSwitchSDKUtils.getTotalAmount(~shirtQuantity, ~capQuantity) + let taxAmount = HSwitchSDKUtils.getTaxAmount(~shirtQuantity, ~capQuantity) + let amountToDisplay = HSwitchSDKUtils.amountToDisplay(~shirtQuantity, ~capQuantity) + + let dividerElement =
+ +
+ + + {dividerElement} +
+
{React.string("Subtotal")}
+
{React.string(`US$ ${totalAmount}`)}
+
+
+
{React.string("Tax")}
+
{React.string(`US$ ${taxAmount}`)}
+
+
+
{React.string("Shipping")}
+
{React.string(`Free`)}
+
+ {dividerElement} +
+
{React.string("Total")}
+
{React.string(`US$ ${amountToDisplay}`)}
+
+
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/PoweredBy.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/PoweredBy.res new file mode 100644 index 000000000..c820702e2 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/components/PoweredBy.res @@ -0,0 +1,10 @@ +@react.component +let make = (~className="pt-4") => { + let theme = Recoil.useRecoilValueFromAtom(HSwitchRecoilAtoms.theme) + let themeColors = HSwitchSDKUtils.getThemeColorsFromTheme(theme) +
+ +
+} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchSDKTypes.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchSDKTypes.res new file mode 100644 index 000000000..c67fba1e0 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchSDKTypes.res @@ -0,0 +1,40 @@ +open HSwitchTypes + +@module("@juspay-tech/hyper-js") +external loadHyper: string => hyperPromise = "loadHyper" + +@module("@juspay-tech/react-hyper-js") +external useHyper: unit => hyperType = "useHyper" + +module HyperElements = { + @module("@juspay-tech/react-hyper-js") @react.component + external make: ( + ~options: Js.Json.t, + ~hyper: Js.Promise.t, + ~children: React.element, + ) => React.element = "HyperElements" +} + +module PaymentElement = { + @module("@juspay-tech/react-hyper-js") @react.component + external make: (~id: string, ~options: Js.Json.t) => React.element = "PaymentElement" +} + +module CardWidget = { + @module("@juspay-tech/react-hyper-js") @react.component + external make: (~id: string, ~options: options2) => React.element = "CardWidget" +} + +module ElementsTest = { + @module("@juspay-tech/react-hyper-js") @react.component + external make: ( + ~options: optionsTest, + ~stripe: hyperPromise, + ~children: React.element, + ) => React.element = "Elements" +} + +module PaymentElementTest = { + @module("@juspay-tech/react-hyper-js") @react.component + external make: (~id: string, ~options: options2) => React.element = "PaymentElement" +} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchTypes.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchTypes.res new file mode 100644 index 000000000..eecc00254 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/libraries/HyperSwitch/HSwitchTypes.res @@ -0,0 +1,36 @@ +type hyperPromise +type sdkType = ELEMENT | WIDGET +type paymentStatus = + SUCCESS | INCOMPLETE | FAILED | LOADING | PROCESSING | CHECKCONFIGURATION | CUSTOMSTATE +type confirmParamType = {return_url: string} +type confirmPaymentObj = {confirmParams: confirmParamType} +type appearanceType = {theme: string} +type options +type options2 +type options1 +type dataValueType +type dataType = { + elementType: string, + complete: bool, + empty: bool, + collapsed: bool, + value: dataValueType, +} +type hyperType = { + clientSecret: string, + confirmPayment: Js.Json.t => Promise.t, + retrievePaymentIntent: string => Promise.t, + paymentRequest: Js.Json.t => Js.Json.t, +} +type appearanceTestType = {theme: string} +type optionsTest = { + clientSecret: string, + appearance: appearanceTestType, + hideIcon: bool, +} +type country = { + isoAlpha3: string, + currency: string, + countryName: string, + isoAlpha2: string, +} diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchRecoilAtoms.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchRecoilAtoms.res new file mode 100644 index 000000000..e5a2720c2 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchRecoilAtoms.res @@ -0,0 +1,10 @@ +let amount = Recoil.atom(. "amount", "20000") +let customerLocation = Recoil.atom(. "customerLocation", "United States (USD)") +let size = Recoil.atom(. "size", "Desktop") +let theme = Recoil.atom(. "theme", "Default") +let layout = Recoil.atom(. "layout", "Tabs") +let renderSDK = Recoil.atom(. "renderSDK", true) +let isModalOpen = Recoil.atom(. "isModalOpen", false) +let viewType = Recoil.atom(. "viewType", HSwitchSDKUtils.DemoApp) +let isMobileScreen = Recoil.atom(. "isMobileScreen", false) +let paymentStatus = Recoil.atom(. "paymentStatus", "") diff --git a/src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchSDKUtils.res b/src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchSDKUtils.res new file mode 100644 index 000000000..c13414355 --- /dev/null +++ b/src/screens/HyperSwitch/UniversalHyperswitchSDK/utilities/HSwitchSDKUtils.res @@ -0,0 +1,294 @@ +external objToJson: {..} => Js.Json.t = "%identity" +@val @scope("window") external hyper: string => HSwitchTypes.hyperPromise = "Hyper" + +let loadHyper = str => { + Js.Promise.make((~resolve, ~reject) => { + let scriptURL = "https://beta.hyperswitch.io/v1/HyperLoader.js" + let script = Window.createElement("script") + script->Window.elementSrc(scriptURL) + script->Window.elementOnload(() => resolve(. hyper(str))) + script->Window.elementOnerror(err => { + reject(. err) + }) + Window.body->Window.appendChild(script) + }) +} + +let getCurrencyFromCustomerLocation = customerLocation => { + customerLocation->Js.String2.slice(~from=-4, ~to_=-1) +} + +let getCountryFromCustomerLocation = customerLocation => { + switch customerLocation { + | "Germany (EUR)" => "DE" + | _ => customerLocation->Js.String2.slice(~from=-4, ~to_=-2) + } +} + +type themeColor = { + backgroundColor: string, + color: string, + hyperswitchHeaderColor: string, + payHeaderColor: string, + boxShadowClassForSDK: string, + textSecondaryColor: string, + tabLabelColor: string, + checkoutButtonClass: string, + checkoutButtonShimmerClass: string, + amountColor: string, + backgroundSecondaryClass: string, + modalBackgroundColor: string, + counterButtonClass: string, + plusIcon: string, + inputClass: string, + productBorderClass: string, + productDividerClass: string, +} + +let defaultThemeColor = { + backgroundColor: "#fff", + color: "#000", + hyperswitchHeaderColor: "rgba(26,26,26,0.9)", + payHeaderColor: "rgba(26,26,26,0.6)", + boxShadowClassForSDK: "before:shadow-defaultBoxShadowClassForSDKShadow", + textSecondaryColor: "rgba(26,26,26,0.5)", + tabLabelColor: "", + checkoutButtonClass: "text-white border-none bg-[rgb(0,109,249)]", + checkoutButtonShimmerClass: "bg-default_theme_button_shimmer", + amountColor: "", + backgroundSecondaryClass: "bg-[rgba(26,26,26,0.05)]", + modalBackgroundColor: "#fff", + counterButtonClass: "bg-[rgba(0,0,0,0.03)] text-[rgba(26,26,26,0.6)]", + plusIcon: "plus", + inputClass: "border-none shadow-defaultModalInputShadow focus:border focus:border-solid focus:border-[#006df9] focus:shadow-defaultModalInputFocusShadow", + productBorderClass: "border-b-[rgba(26,26,26,0.1)]", + productDividerClass: "bg-[rgb(230,230,230)]", +} + +let getThemeColorsFromTheme = theme => { + switch theme { + | "Default" => defaultThemeColor + | "Brutal" => { + ...defaultThemeColor, + hyperswitchHeaderColor: "rgba(0,0,0,0.9)", + payHeaderColor: "rgba(0,0,0,0.6)", + textSecondaryColor: "rgba(0,0,0,0.5)", + backgroundColor: "rgba(124,255,112,0.54)", + tabLabelColor: "#000000", + checkoutButtonClass: "shadow-brutalButtonShadow text-[#000000] border-[0.17em] border-solid border-black bg-[#f5fb1f] active:translate-x-[0.05em] active:translate-y-[0.05em] active:shadow-brutalButtonActiveShadow", + checkoutButtonShimmerClass: "bg-brutal_theme_button_shimmer", + backgroundSecondaryClass: "shadow-brutalButtonShadow border-[0.17em] border-solid border-black bg-white active:translate-x-[0.05em] active:translate-y-[0.05em] active:shadow-brutalButtonActiveShadow", + counterButtonClass: "border-[0.17em] border-solid border-black shadow-brutalButtonShadow text-black active:translate-x-[0.05em] active:translate-y-[0.05em] active:shadow-brutalButtonActiveShadow", + plusIcon: "plusBlack", + inputClass: "shadow-brutalModalInputShadow border-[0.1em] border-solid border-black focus:translate-x-[0.05em] focus:translate-y-[0.05em] focus:shadow-brutalModalInputFocusShadow", + productDividerClass: "bg-[rgb(86,97,134)]", + } + | "Midnight" => { + backgroundColor: "rgb(26, 31, 54)", + color: "#fff", + hyperswitchHeaderColor: "rgba(229,229,229,0.9)", + payHeaderColor: "rgba(229,229,229,0.6)", + boxShadowClassForSDK: "before:shadow-midnightBoxShadowClassForSDKShadow", + textSecondaryColor: "rgba(229,229,229,0.5)", + tabLabelColor: "#000000", + checkoutButtonClass: "bg-[#85d996]", + checkoutButtonShimmerClass: "bg-midnight_theme_button_shimmer", + amountColor: "#85d996", + backgroundSecondaryClass: "bg-[rgba(229,229,229,0.05)]", + modalBackgroundColor: "#30313d", + counterButtonClass: "bg-[rgba(255,255,255,0.03)] text-[rgb(229,229,229)]", + plusIcon: "plusWhite", + inputClass: "border border-solid border-[#424353] text-white bg-[rgb(48,49,61)] shadow-midnightModalInputShadow focus-visible:border focus-visible:border-solid focus-visible:border-[#85d996] focus-visible:shadow-midnightModalInputFocusShadow", + productBorderClass: "border-b-[rgba(229,229,229,0.1)]", + productDividerClass: "bg-[rgb(66,67,83)]", + } + | "Soft" => { + ...defaultThemeColor, + color: "rgb(224,224,224)", + hyperswitchHeaderColor: "rgba(224,224,224,0.9)", + payHeaderColor: "rgba(224,224,224,0.6)", + textSecondaryColor: "rgba(224,224,224,0.5)", + boxShadowClassForSDK: "before:shadow-midnightBoxShadowClassForSDKShadow", + backgroundColor: "rgb(62, 62, 62)", + checkoutButtonClass: "shadow-softButtonShadow text-[rgb(125,143,255)]", + checkoutButtonShimmerClass: "bg-soft_theme_button_shimmer", + amountColor: "#7d8fff", + backgroundSecondaryClass: "shadow-softButtonShadow", + modalBackgroundColor: "rgb(62, 62, 62)", + counterButtonClass: "shadow-softButtonShadow", + inputClass: "bg-[rgb(60,61,62)] text-[#e0e0e0] shadow-softModalInputShadow", + plusIcon: "plusWhite", + productDividerClass: "bg-[rgb(86,97,134)]", + } + | "Charcoal" => { + ...defaultThemeColor, + backgroundColor: "rgba(221, 216, 216, 0.07)", + checkoutButtonClass: "bg-black text-white", + checkoutButtonShimmerClass: "bg-charcoal_theme_button_shimmer", + inputClass: "border-none shadow-charcoalModalInputShadow focus:border focus:border-solid focus:border-black focus:shadow-charcoalModalInputFocusShadow", + productDividerClass: "bg-black", + } + | _ => defaultThemeColor + } +} + +let getTextColorFromTheme = theme => { + switch theme { + | "Default" => "#000" + | "Brutal" => "#000" + | "Midnight" => "rgb(255, 255, 255)" + | "Soft" + | "Charcoal" => "rgba(221, 216, 216, 0.07)" + | _ => "#fff" + } +} + +let getIsDesktop = size => { + size === "Desktop" +} + +let getSizeIconFromSize = size => { + if getIsDesktop(size) { + "desktop" + } else { + "desktop" + } +} + +let redirectUrl = "https://hyperswitch-demo-store.netlify.app" + +let hyperswitchDocsUrl = "https://hyperswitch.io/docs" +let hyperswitchRegisterUrl = "https://app.hyperswitch.io/register" +let hyperswitchTermsOfServiceUrl = "https://hyperswitch.io/terms-of-services" +let hyperswitchPrivacyPolicyUrl = "https://hyperswitch.io/privacyPolicy" + +let successTestCardNumber = "4242424242424242" +let authenticationTestCardNumber = "4000000000003220" +let declineTestCardNumber = "4000000000000002" + +let testCardsInfo = "Click to copy the card number. Use any future expiration date and three-number CVC." + +let customerLocationExtraTitle = "Every country pays differently" +let customerLocationExtraDesc = "The Payment Element supports 135+ currencies. Only a sample is shown here. Hyperswitch automatically reorders payment methods to increase potential conversion." +let themeExtraTitle = "Customize it" +let themeExtraDesc = "Create a theme to match your brand with the Appearance API." + +let websiteDomain = "checkout.hyperswitch.io" + +let successPaymentMsg = "After a successful payment, the customer returns to your website" +let failurePaymentMsg = "After a failed payment, the customer returns to your website" +let processingPaymentMsg = "If the payment status is processing, the customer will be redirected to your website and you will receive webhooks on the payment status" + +let getDefaultPayload = (amount, currency, country, countryCode) => + { + "amount": amount->Belt.Int.fromString->Belt.Option.getWithDefault(20000), + "currency": currency, + "shipping": { + "address": { + "country": country, + "state": "test", + "zip": "571201", + "line1": "test line 1", + "city": "test city", + "first_name": "Bopanna", + "last_name": "MJ", + }, + "phone": { + "number": "+918105528927", + "counrty_code": countryCode, + }, + }, + "order_details": [ + { + "product_name": "Apple iphone 15", + "quantity": 1, + "amount": amount->Belt.Int.fromString->Belt.Option.getWithDefault(20000), + }, + ], + "billing": { + "address": { + "country": country, + }, + }, + "authentication_type": "no_three_ds", + "customer_id": "Bopanna17", + }->objToJson + +let defaultAPIKey = "" +let defaultPublishableKey = "" + +let getOptions = (clientSecret, theme) => { + { + "clientSecret": clientSecret, + "appearance": { + "theme": theme, + }, + "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", + }, + ], + "locale": "", + "loader": "always", + } +} + +let backendEndpointUrl = "https://sandbox.hyperswitch.io/payments" + +let getLayoutPayload = layout => { + { + "type": layout === "spaced" ? "accordion" : layout, + "defaultCollapsed": false, + "radios": true, + "spacedAccordionItems": layout === "spaced", + } +} + +let getOptionsPayload = (customerPaymentMethods, layout, theme) => { + { + "customerPaymentMethods": customerPaymentMethods, + "layout": getLayoutPayload(layout), + "wallets": { + "walletReturnUrl": redirectUrl, + "applePay": "auto", + "googlePay": "auto", + "style": { + "theme": switch theme { + | "Default" + | "Charcoal" => "dark" + | _ => "light" + }, + }, + }, + }->objToJson +} + +type viewType = DemoApp | SdkPreview +type sizeType = Mobile | Desktop + +let getTotalAmountFloat = (~shirtQuantity, ~capQuantity) => { + 65.00 *. shirtQuantity->Belt.Int.toFloat +. 32.00 *. capQuantity->Belt.Int.toFloat +} + +let getTotalAmount = (~shirtQuantity, ~capQuantity) => { + getTotalAmountFloat(~shirtQuantity, ~capQuantity)->Js.Float.toFixedWithPrecision(~digits=2) +} + +let getTaxAmountFloat = (~shirtQuantity, ~capQuantity) => { + getTotalAmountFloat(~shirtQuantity, ~capQuantity) *. 0.1 +} + +let getTaxAmount = (~shirtQuantity, ~capQuantity) => { + getTaxAmountFloat(~shirtQuantity, ~capQuantity)->Js.Float.toFixedWithPrecision(~digits=2) +} + +let amountToDisplay = (~shirtQuantity, ~capQuantity) => { + (getTotalAmountFloat(~shirtQuantity, ~capQuantity) +. + getTaxAmountFloat(~shirtQuantity, ~capQuantity))->Js.Float.toFixedWithPrecision(~digits=2) +} diff --git a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res index ed749027e..5191c6090 100644 --- a/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res +++ b/src/screens/login/HSwitchLoginFlow/HyperSwitchAuthScreen.res @@ -92,7 +92,11 @@ let make = (~setAuthStatus: HyperSwitchAuthTypes.authStatus => unit) => { | list{"register", ..._}, ) => () // to prevent duplicate push | (LoginWithPassword | LoginWithEmail, _) => - `${HSwitchGlobalVars.hyperSwitchFEPrefix}/login`->RescriptReactRouter.replace + let loginUrl = HSwitchGlobalVars.hyperSwitchFEPrefix->Js.String2.concat("/login") + + ( + url.search === "" ? loginUrl : loginUrl->Js.String2.concat(`?${url.search}`) + )->RescriptReactRouter.replace | (SignUP, list{"register", ..._}) => () // to prevent duplicate push | (SignUP, _) => "register"->RescriptReactRouter.push | (ForgetPassword | ForgetPasswordEmailSent, list{"forget-password", ..._}) => () // to prevent duplicate push diff --git a/tailwindHyperSwitch.config.js b/tailwindHyperSwitch.config.js index 5a4b223e9..6f61314da 100644 --- a/tailwindHyperSwitch.config.js +++ b/tailwindHyperSwitch.config.js @@ -76,6 +76,7 @@ module.exports = { }, animation: { "spin-slow": "spin 3s linear infinite", + spin: "spin 1s linear infinite", slideUp: "slideUp 200ms ease-out forwards", fade: "fadeOut 1s ease-in-out forwards", secondsOnes: "secondsOnes 10s 0s 18 reverse", // format keyframe, duration, delay, iteration-count, direction @@ -92,6 +93,7 @@ module.exports = { ripple: "ripple 10s ease-in-out", horizontalShaking: "horizontalShaking 0.5s 1s", horizontalShakingDelay: "horizontalShaking 0.5s 4s", + shimmerMove: "shimmerMove 3s infinite ease", }, transitionDelay: { 12: "12000ms", @@ -314,6 +316,17 @@ module.exports = { }, "100%": { transform: "translateX(0%)" }, }, + spin: { + "100%": { transform: "rotate(1turn)" }, + }, + shimmerMove: { + "0%": { + transform: "translateX(calc(150%*-1));", + }, + "100%": { + transform: "translateX(150%)", + }, + }, }), fontSize: { body: "1rem", @@ -358,6 +371,7 @@ module.exports = { 850: "#151A1F", 900: "#333333", 950: "#212830", + mobile_frame: "#404040c9", }, green: { 50: "#EFF4EF", @@ -544,6 +558,29 @@ module.exports = { "ardra-purple": "#7984E6", statusArdra: "#E6A779", statusCreated: "#5C6073", + "jb-black": { + DEFAULT: "#000000", + 50: "#F3F3F3", + 100: "#DADADA", + 200: "#C0C0C0", + 300: "#A8A8A8", + 400: "#909090", + 500: "#787878", + 600: "#626262", + 700: "#4C4C4C", + 800: "#373737", + 900: "#242424", + }, + default_theme_button_shimmer: + "linear-gradient(to_right,rgba(0,109,249,0)_0%,rgb(43,136,255)_50%,rgba(0,109,249,0)_100%)", + brutal_theme_button_shimmer: + "linear-gradient(to_right,rgba(245,251,31,0)_0%,rgb(251,252,198)_50%,rgba(245,251,31,0)_100%)", + midnight_theme_button_shimmer: + "linear-gradient(to_right,rgba(133,217,150,0)_0%,rgb(176,222,185)_50%,rgba(133,217,150,0)_100%)", + soft_theme_button_shimmer: + "linear-gradient(to_right,rgba(62,62,62,0)_0%,rgb(70,70,70)_50%,rgba(62,62,62,0)_100%)", + charcoal_theme_button_shimmer: + "linear-gradient(to_right,rgba(0,0,0,0)_0%,rgb(70,70,70)_50%,rgba(0,0,0,0)_100%)", }, fontSize: { "fs-10": "10px", @@ -575,6 +612,38 @@ module.exports = { boxShadowMultiple: "2px -2px 24px 0px rgba(0, 0, 0, 0.04), -2px 2px 24px 0px rgba(0, 0, 0, 0.02)", homePageBoxShadow: "0px 2px 16px 2px rgba(51, 51, 51, 0.16)", + websiteShadow: + "0 20px 44px rgba(50, 50, 93, .12), 0 -1px 32px rgba(50, 50, 93, .06), 0 3px 12px rgba(0, 0, 0, .08)", + mobileHeaderShadow: "0 0 2px rgba(10, 37, 64, .1)", + mobileFrameShadow: + "0 20px 44px rgba(50, 50, 93, .12), 0 -1px 32px rgba(50, 50, 93, .06), 0 3px 12px rgba(0, 0, 0, .08), inset 0 -2px 5px rgba(10, 37, 64, .35)", + testCardsShadow: + "0 2px 5px rgba(60, 66, 87, .12), 0 1px 1px rgba(0, 0, 0, .08)", + filterDropdownShadow: + "0 0 0 1px rgba(136, 152, 170, .1), 0 15px 35px 0 rgba(49, 49, 93, .1), 0 5px 15px 0 rgba(0, 0, 0, .08)", + filterExtraShadow: "rgb(227, 232, 238) 0px 1px 0px 0px inset", + websiteHeaderShadow: "0 0.5px 0 #ecf2f7", + modalShadow: + "rgba(0,0,0,0.2)_0px_40px_100px_0px,rgba(0,0,0,0.03)_0px_6px_12px_0px", + defaultBoxShadowClassForSDKShadow: "rgba(0,0,0,0.18)_15px_0px_30px_0px", + midnightBoxShadowClassForSDKShadow: + "rgba(0,0,0,0.82)_15px_0px_30px_0px", + defaultModalInputShadow: + "rgb(224,224,224)_0px_0px_0px_1px,rgba(0,0,0,0.07)_0px_2px_4px_0px,rgba(0,0,0,0.05)_0px_1px_1.5px_0px", + defaultModalInputFocusShadow: "#006df94c_0px_0px_0px_3px", + brutalModalInputShadow: "0.12em_0.12em", + brutalModalInputFocusShadow: "0.02em_0.02em", + midnightModalInputShadow: + "0px_2px_4px_rgb(0,0,0,0.5),0px_1px_6px_rgba(0,0,0,0.25)", + midnightModalInputFocusShadow: "#85d9964c_0px_0p_0px_3px", + softModalInputShadow: + "inset_4px_4px_5px_#353637,inset_-4px_-3px_7px_#434445", + charcoalModalInputShadow: + "rgb(224,224,224)_0px_0px_0px_1px,rgba(0,0,0,0.07)_0px_2px_4px_0px,rgba(0,0,0,0.05)_0px_1px_1.5px_0px", + charcoalModalInputFocusShadow: "#0000004c_0px_0px_0px_3px", + brutalButtonShadow: "0.15em_0.15em", + brutalButtonActiveShadow: "0.02em_0.02em", + softButtonShadow: "4px_4px_5px_#353637,-4px_-4px_5px_#434445", }, gridTemplateColumns: { 6: "repeat(6, minmax(0, 1fr))",