@juspay-tech/react-hyper-js 1.0.2 → 1.1.1

package/src/components/ExpressCheckoutElement.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function ExpressCheckoutElement(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "expressCheckout",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = ExpressCheckoutElement;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/ExpressCheckoutElement.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="expressCheckout"
+  />
+}

package/src/components/GooglePayElement.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function GooglePayElement(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "googlePay",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = GooglePayElement;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/GooglePayElement.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="googlePay"
+  />
+}

package/src/components/HyperElements.bs.js

@@ -0,0 +1,71 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Context from "../Context.bs.js";
+import * as Js_promise from "rescript/lib/es6/js_promise.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function HyperElements(props) {
+  var options = props.options;
+  var hyper = props.hyper;
+  var elementOptions = Context.elementsOptionObjMapper(options);
+  var match = React.useState(function () {
+        return Context.defaultSwitchContext;
+      });
+  var setSwitchState = match[1];
+  var match$1 = React.useState(function () {
+        return Context.defaultElementsContext;
+      });
+  var setElementsState = match$1[1];
+  React.useEffect((function () {
+          ((function (__x) {
+                  return Js_promise.then_((function (switchInstance) {
+                                var orcaElementsConfig = switchInstance.elements(options);
+                                var newElemValues_update = orcaElementsConfig.update;
+                                var newElemValues_getElement = orcaElementsConfig.getElement;
+                                var newElemValues_fetchUpdates = orcaElementsConfig.fetchUpdates;
+                                var newElemValues_create = orcaElementsConfig.create;
+                                var newElemValues = {
+                                  options: elementOptions,
+                                  update: newElemValues_update,
+                                  getElement: newElemValues_getElement,
+                                  fetchUpdates: newElemValues_fetchUpdates,
+                                  create: newElemValues_create
+                                };
+                                var switchValClone_clientSecret = elementOptions.clientSecret;
+                                var switchValClone_confirmPayment = switchInstance.confirmPayment;
+                                var switchValClone_confirmCardPayment = switchInstance.confirmCardPayment;
+                                var switchValClone_retrievePaymentIntent = switchInstance.retrievePaymentIntent;
+                                var switchValClone_paymentRequest = switchInstance.paymentRequest;
+                                var switchValClone = {
+                                  clientSecret: switchValClone_clientSecret,
+                                  confirmPayment: switchValClone_confirmPayment,
+                                  confirmCardPayment: switchValClone_confirmCardPayment,
+                                  retrievePaymentIntent: switchValClone_retrievePaymentIntent,
+                                  paymentRequest: switchValClone_paymentRequest
+                                };
+                                setSwitchState(function (param) {
+                                      return switchValClone;
+                                    });
+                                setElementsState(function (param) {
+                                      return newElemValues;
+                                    });
+                                return Promise.resolve(switchValClone);
+                              }), __x);
+                })(hyper));
+        }), []);
+  return JsxRuntime.jsx(Context.SwitchContextProvider.make, {
+              value: match[0],
+              children: JsxRuntime.jsx(Context.ElementsContextProvider.make, {
+                    value: match$1[0],
+                    children: props.children
+                  })
+            });
+}
+
+var make = HyperElements;
+
+export {
+  make ,
+}
+/* react Not a pure module */

package/src/components/HyperElements.res

@@ -0,0 +1,39 @@
+@react.component
+let make = (~children, ~hyper: Promise.t<OrcaJs.switchInstance>, ~options: JSON.t) => {
+  let elementOptions = options->Context.elementsOptionObjMapper
+  let (switchState, setSwitchState) = React.useState(() => Context.defaultSwitchContext)
+  let (elementsState, setElementsState) = React.useState(() => Context.defaultElementsContext)
+
+  React.useEffect0(() => {
+    hyper
+    ->(Js.Promise.then_((switchInstance: OrcaJs.switchInstance) => {
+      let orcaElementsConfig = switchInstance.elements(options)
+      let newElemValues: Context.elementsType = {
+        options: elementOptions,
+        update: orcaElementsConfig.update,
+        getElement: orcaElementsConfig.getElement,
+        fetchUpdates: orcaElementsConfig.fetchUpdates,
+        create: orcaElementsConfig.create,
+      }
+      let switchValClone: Context.switchContextType = {
+        confirmPayment: switchInstance.confirmPayment,
+        confirmCardPayment: switchInstance.confirmCardPayment,
+        retrievePaymentIntent: switchInstance.retrievePaymentIntent,
+        clientSecret: elementOptions.clientSecret,
+        paymentRequest: switchInstance.paymentRequest,
+      }
+
+      setSwitchState(_ => switchValClone)
+      setElementsState(_ => newElemValues)
+      Promise.resolve(switchValClone)
+    }, _))
+    ->ignore
+    None
+  })
+
+  <Context.SwitchContextProvider value={switchState}>
+    <Context.ElementsContextProvider value={elementsState}>
+      {children}
+    </Context.ElementsContextProvider>
+  </Context.SwitchContextProvider>
+}

package/src/components/HyperManagementElements.bs.js

@@ -0,0 +1,65 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Context from "../Context.bs.js";
+import * as Js_promise from "rescript/lib/es6/js_promise.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function HyperManagementElements(props) {
+  var options = props.options;
+  var hyper = props.hyper;
+  var paymentMethodsManagementElementOptions = Context.paymentMethodsManagementElementsOptionObjMapper(options);
+  var match = React.useState(function () {
+        return Context.defaultPaymentMethodsManagementSwitchContext;
+      });
+  var setSwitchState = match[1];
+  var match$1 = React.useState(function () {
+        return Context.defaultPaymentMethodsManagementElementsContext;
+      });
+  var setElementsState = match$1[1];
+  React.useEffect((function () {
+          ((function (__x) {
+                  return Js_promise.then_((function (switchInstance) {
+                                var orcaElementsConfig = switchInstance.paymentMethodsManagementElements(options);
+                                var newElemValues_update = orcaElementsConfig.update;
+                                var newElemValues_getElement = orcaElementsConfig.getElement;
+                                var newElemValues_fetchUpdates = orcaElementsConfig.fetchUpdates;
+                                var newElemValues_create = orcaElementsConfig.create;
+                                var newElemValues = {
+                                  options: paymentMethodsManagementElementOptions,
+                                  update: newElemValues_update,
+                                  getElement: newElemValues_getElement,
+                                  fetchUpdates: newElemValues_fetchUpdates,
+                                  create: newElemValues_create
+                                };
+                                var switchValClone_ephemeralKey = paymentMethodsManagementElementOptions.ephemeralKey;
+                                var switchValClone_paymentRequest = switchInstance.paymentRequest;
+                                var switchValClone = {
+                                  ephemeralKey: switchValClone_ephemeralKey,
+                                  paymentRequest: switchValClone_paymentRequest
+                                };
+                                setSwitchState(function (param) {
+                                      return switchValClone;
+                                    });
+                                setElementsState(function (param) {
+                                      return newElemValues;
+                                    });
+                                return Promise.resolve(switchValClone);
+                              }), __x);
+                })(hyper));
+        }), []);
+  return JsxRuntime.jsx(Context.PaymentMethodsManagementSwitchContextProvider.make, {
+              value: match[0],
+              children: JsxRuntime.jsx(Context.PaymentMethodsManagementElementsContextProvider.make, {
+                    value: match$1[0],
+                    children: props.children
+                  })
+            });
+}
+
+var make = HyperManagementElements;
+
+export {
+  make ,
+}
+/* react Not a pure module */

package/src/components/HyperManagementElements.res

@@ -0,0 +1,41 @@
+@react.component
+let make = (~children, ~hyper: Promise.t<OrcaJs.switchInstance>, ~options: JSON.t) => {
+  let paymentMethodsManagementElementOptions =
+    options->Context.paymentMethodsManagementElementsOptionObjMapper
+  let (switchState, setSwitchState) = React.useState(() =>
+    Context.defaultPaymentMethodsManagementSwitchContext
+  )
+  let (elementsState, setElementsState) = React.useState(() =>
+    Context.defaultPaymentMethodsManagementElementsContext
+  )
+
+  React.useEffect0(() => {
+    hyper
+    ->(Js.Promise.then_((switchInstance: OrcaJs.switchInstance) => {
+      let orcaElementsConfig = switchInstance.paymentMethodsManagementElements(options)
+      let newElemValues: Context.paymentMethodsManagementElementsType = {
+        options: paymentMethodsManagementElementOptions,
+        update: orcaElementsConfig.update,
+        getElement: orcaElementsConfig.getElement,
+        fetchUpdates: orcaElementsConfig.fetchUpdates,
+        create: orcaElementsConfig.create,
+      }
+
+      let switchValClone: Context.paymentMethodsManagementSwitchContextType = {
+        paymentRequest: switchInstance.paymentRequest,
+        ephemeralKey: paymentMethodsManagementElementOptions.ephemeralKey,
+      }
+      setSwitchState(_ => switchValClone)
+      setElementsState(_ => newElemValues)
+      Promise.resolve(switchValClone)
+    }, _))
+    ->ignore
+    None
+  })
+
+  <Context.PaymentMethodsManagementSwitchContextProvider value={switchState}>
+    <Context.PaymentMethodsManagementElementsContextProvider value={elementsState}>
+      {children}
+    </Context.PaymentMethodsManagementElementsContextProvider>
+  </Context.PaymentMethodsManagementSwitchContextProvider>
+}

package/src/components/PayPalElement.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function PayPalElement(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "payPal",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = PayPalElement;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/PayPalElement.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="payPal"
+  />
+}

package/src/components/PaymentElement.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function PaymentElement(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "payment",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = PaymentElement;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/PaymentElement.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="payment"
+  />
+}

package/src/components/PaymentElementsWrapper.bs.js

@@ -0,0 +1,50 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Context from "../Context.bs.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function PaymentElementsWrapper(props) {
+  var onClick = props.onClick;
+  var onBlur = props.onBlur;
+  var onFocus = props.onFocus;
+  var componentType = props.componentType;
+  var onReady = props.onReady;
+  var onChange = props.onChange;
+  var options = props.options;
+  var __id = props.id;
+  var id = __id !== undefined ? __id : "payment-Element";
+  var hyperSwitch = React.useContext(Context.switchContext);
+  var elementsState = React.useContext(Context.elementsContext);
+  var divRef = React.useRef(null);
+  var paymentElement = elementsState.create(componentType, options);
+  React.useEffect((function () {
+          var paymentElement = elementsState.create(componentType, options);
+          paymentElement.mount("#orca-elements-payment-element-" + id);
+        }), [
+        divRef,
+        elementsState
+      ]);
+  React.useEffect((function () {
+          paymentElement.on("ready", onReady);
+          paymentElement.on("focus", onFocus);
+          paymentElement.on("blur", onBlur);
+          paymentElement.on("clickTriggered", onClick);
+          paymentElement.on("change", onChange);
+        }), [
+        elementsState,
+        hyperSwitch
+      ]);
+  return JsxRuntime.jsx("div", {
+              ref: Caml_option.some(divRef),
+              id: "orca-elements-payment-element-" + id
+            });
+}
+
+var make = PaymentElementsWrapper;
+
+export {
+  make ,
+}
+/* react Not a pure module */

package/src/components/PaymentElementsWrapper.res

@@ -0,0 +1,34 @@
+@react.component
+let make = (
+  ~id="payment-Element",
+  ~options: JSON.t,
+  ~onChange,
+  ~onReady,
+  ~componentType: string,
+  ~onFocus,
+  ~onBlur,
+  ~onClick,
+) => {
+  let hyperSwitch = React.useContext(Context.switchContext)
+  let elementsState = React.useContext(Context.elementsContext)
+  let divRef = React.useRef(Js.Nullable.null)
+
+  let paymentElement = elementsState.create(componentType, options)
+
+  React.useEffect2(() => {
+    let paymentElement = elementsState.create(componentType, options)
+    paymentElement.mount(`#orca-elements-payment-element-${id}`)
+    None
+  }, (divRef, elementsState))
+
+  React.useEffect2(() => {
+    paymentElement.on("ready", onReady)
+    paymentElement.on("focus", onFocus)
+    paymentElement.on("blur", onBlur)
+    paymentElement.on("clickTriggered", onClick)
+    paymentElement.on("change", onChange)
+    None
+  }, (elementsState, hyperSwitch))
+
+  <div ref={divRef->ReactDOM.Ref.domRef} id={`orca-elements-payment-element-${id}`} />
+}

package/src/components/PaymentMethodsManagementElement.bs.js

@@ -0,0 +1,58 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Context from "../Context.bs.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function PaymentMethodsManagementElement(props) {
+  var onClick = props.onClick;
+  var onBlur = props.onBlur;
+  var onFocus = props.onFocus;
+  var __componentType = props.componentType;
+  var onReady = props.onReady;
+  var onChange = props.onChange;
+  var options = props.options;
+  var __id = props.id;
+  var id = __id !== undefined ? __id : "payment-management";
+  var componentType = __componentType !== undefined ? __componentType : "paymentMethodsManagement";
+  var hyperSwitch = React.useContext(Context.paymentMethodsManagementSwitchContext);
+  var paymentMethodsManagementState = React.useContext(Context.paymentMethodsManagementElementsContext);
+  var divRef = React.useRef(null);
+  var paymentElement = paymentMethodsManagementState.create(componentType, options);
+  React.useEffect((function () {
+          var paymentElement = paymentMethodsManagementState.create(componentType, options);
+          paymentElement.mount("#orca-elements-payment-management-" + id);
+        }), [
+        divRef,
+        paymentMethodsManagementState
+      ]);
+  React.useEffect((function () {
+          paymentElement.on("ready", onReady);
+          paymentElement.on("focus", onFocus);
+          paymentElement.on("blur", onBlur);
+          paymentElement.on("clickTriggered", onClick);
+          paymentElement.on("change", onChange);
+          return (function () {
+                    paymentElement.on("ready", undefined);
+                    paymentElement.on("focus", undefined);
+                    paymentElement.on("blur", undefined);
+                    paymentElement.on("clickTriggered", undefined);
+                    paymentElement.on("change", undefined);
+                  });
+        }), [
+        paymentMethodsManagementState,
+        hyperSwitch
+      ]);
+  return JsxRuntime.jsx("div", {
+              ref: Caml_option.some(divRef),
+              id: "orca-elements-payment-management-" + id
+            });
+}
+
+var make = PaymentMethodsManagementElement;
+
+export {
+  make ,
+}
+/* react Not a pure module */

package/src/components/PaymentMethodsManagementElement.res

@@ -0,0 +1,45 @@
+@react.component
+let make = (
+  ~id="payment-management",
+  ~options: JSON.t,
+  ~onChange,
+  ~onReady,
+  ~componentType="paymentMethodsManagement",
+  ~onFocus,
+  ~onBlur,
+  ~onClick,
+) => {
+  let hyperSwitch = React.useContext(Context.paymentMethodsManagementSwitchContext)
+  let paymentMethodsManagementState = React.useContext(
+    Context.paymentMethodsManagementElementsContext,
+  )
+  let divRef = React.useRef(Nullable.null)
+
+  let paymentElement = paymentMethodsManagementState.create(componentType, options)
+
+  React.useEffect(() => {
+    let paymentElement = paymentMethodsManagementState.create(componentType, options)
+    paymentElement.mount(`#orca-elements-payment-management-${id}`)
+    None
+  }, (divRef, paymentMethodsManagementState))
+
+  React.useEffect2(() => {
+    paymentElement.on("ready", onReady)
+    paymentElement.on("focus", onFocus)
+    paymentElement.on("blur", onBlur)
+    paymentElement.on("clickTriggered", onClick)
+    paymentElement.on("change", onChange)
+
+    Some(
+      () => {
+        paymentElement.on("ready", None)
+        paymentElement.on("focus", None)
+        paymentElement.on("blur", None)
+        paymentElement.on("clickTriggered", None)
+        paymentElement.on("change", None)
+      },
+    )
+  }, (paymentMethodsManagementState, hyperSwitch))
+
+  <div ref={divRef->ReactDOM.Ref.domRef} id={`orca-elements-payment-management-${id}`} />
+}

package/bsconfig.json

@@ -1,19 +0,0 @@
-{
-  "name": "react-orca-js",
-  "sources": [
-    {
-      "dir": "src", 
-      "subdirs": true
-    }
-  ],
-  "package-specs": [
-    {
-      "module": "es6",
-      "in-source": true
-    }
-  ],
-  "suffix": ".bs.js",
-  "reason": { "react-jsx": 3 },
-  "bs-dependencies": ["@rescript/react","@ryyppy/rescript-promise", "bs-fetch"]
-
-}