@juspay-tech/react-hyper-js 1.0.1 → 1.1.0

package/src/Index.bs.js

@@ -1,317 +1,97 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Curry from "rescript/lib/es6/curry.js";
 import * as React from "react";
+import * as CardCVC from "./components/CardCVC.bs.js";
 import * as Context from "./Context.bs.js";
-import * as Js_promise from "rescript/lib/es6/js_promise.js";
-
-function Index$Elements2(Props) {
-  var children = Props.children;
-  var stripe = Props.stripe;
-  var options = Props.options;
-  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 () {
-          Js_promise.then_((function (switchInstance) {
-                  var orcaElementsConfig = Curry._1(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 newSwitchVal_clientSecret = elementOptions.clientSecret;
-                  var newSwitchVal_confirmPayment = switchInstance.confirmPayment;
-                  var newSwitchVal_confirmCardPayment = switchInstance.confirmCardPayment;
-                  var newSwitchVal_retrievePaymentIntent = switchInstance.retrievePaymentIntent;
-                  var newSwitchVal_paymentRequest = switchInstance.paymentRequest;
-                  var switchValClone_clientSecret = elementOptions.clientSecret;
-                  var switchValClone_confirmPayment = newSwitchVal_confirmPayment;
-                  var switchValClone_confirmCardPayment = newSwitchVal_confirmCardPayment;
-                  var switchValClone_retrievePaymentIntent = newSwitchVal_retrievePaymentIntent;
-                  var switchValClone_paymentRequest = newSwitchVal_paymentRequest;
-                  var switchValClone = {
-                    clientSecret: switchValClone_clientSecret,
-                    confirmPayment: switchValClone_confirmPayment,
-                    confirmCardPayment: switchValClone_confirmCardPayment,
-                    retrievePaymentIntent: switchValClone_retrievePaymentIntent,
-                    paymentRequest: switchValClone_paymentRequest
-                  };
-                  Curry._1(setSwitchState, (function (param) {
-                          return switchValClone;
-                        }));
-                  Curry._1(setElementsState, (function (param) {
-                          return newElemValues;
-                        }));
-                  return Promise.resolve(switchValClone);
-                }), stripe);
-        }), []);
-  return React.createElement(Context.SwitchContextProvider.make, Context.SwitchContextProvider.makeProps(match[0], React.createElement(Context.ElementsContextProvider.make, Context.ElementsContextProvider.makeProps(match$1[0], children, undefined)), undefined));
-}
-
-function Index$HyperElements2(Props) {
-  var children = Props.children;
-  var hyper = Props.hyper;
-  var options = Props.options;
-  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 () {
-          Js_promise.then_((function (switchInstance) {
-                  var orcaElementsConfig = Curry._1(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 newSwitchVal_clientSecret = elementOptions.clientSecret;
-                  var newSwitchVal_confirmPayment = switchInstance.confirmPayment;
-                  var newSwitchVal_confirmCardPayment = switchInstance.confirmCardPayment;
-                  var newSwitchVal_retrievePaymentIntent = switchInstance.retrievePaymentIntent;
-                  var newSwitchVal_paymentRequest = switchInstance.paymentRequest;
-                  var switchValClone_clientSecret = elementOptions.clientSecret;
-                  var switchValClone_confirmPayment = newSwitchVal_confirmPayment;
-                  var switchValClone_confirmCardPayment = newSwitchVal_confirmCardPayment;
-                  var switchValClone_retrievePaymentIntent = newSwitchVal_retrievePaymentIntent;
-                  var switchValClone_paymentRequest = newSwitchVal_paymentRequest;
-                  var switchValClone = {
-                    clientSecret: switchValClone_clientSecret,
-                    confirmPayment: switchValClone_confirmPayment,
-                    confirmCardPayment: switchValClone_confirmCardPayment,
-                    retrievePaymentIntent: switchValClone_retrievePaymentIntent,
-                    paymentRequest: switchValClone_paymentRequest
-                  };
-                  Curry._1(setSwitchState, (function (param) {
-                          return switchValClone;
-                        }));
-                  Curry._1(setElementsState, (function (param) {
-                          return newElemValues;
-                        }));
-                  return Promise.resolve(switchValClone);
-                }), hyper);
-        }), []);
-  return React.createElement(Context.SwitchContextProvider.make, Context.SwitchContextProvider.makeProps(match[0], React.createElement(Context.ElementsContextProvider.make, Context.ElementsContextProvider.makeProps(match$1[0], children, undefined)), undefined));
-}
-
-function useHyper(param) {
+import * as Elements from "./components/Elements.bs.js";
+import * as CardExpiry from "./components/CardExpiry.bs.js";
+import * as CardNumber from "./components/CardNumber.bs.js";
+import * as CardElement from "./components/CardElement.bs.js";
+import * as HyperElements from "./components/HyperElements.bs.js";
+import * as PayPalElement from "./components/PayPalElement.bs.js";
+import * as PaymentElement from "./components/PaymentElement.bs.js";
+import * as ApplePayElement from "./components/ApplePayElement.bs.js";
+import * as GooglePayElement from "./components/GooglePayElement.bs.js";
+import * as ExpressCheckoutElement from "./components/ExpressCheckoutElement.bs.js";
+import * as HyperManagementElements from "./components/HyperManagementElements.bs.js";
+import * as PaymentMethodsManagementElement from "./components/PaymentMethodsManagementElement.bs.js";
+
+function useHyper() {
   return React.useContext(Context.switchContext);
 }
 
-function useStripe(param) {
+function useStripe() {
   console.warn("useStripe() is deprecated. Use useHyper() instead");
   return React.useContext(Context.switchContext);
 }
 
-function useWidgets(param) {
+function useWidgets() {
   return React.useContext(Context.elementsContext);
 }
 
-function useElements(param) {
+function useElements() {
   console.warn("useElements() is deprecated. Use useWidgets() instead");
   return React.useContext(Context.elementsContext);
 }
 
-function Index$PaymentElementsWrapper(Props) {
-  var idOpt = Props.id;
-  var options = Props.options;
-  var onChange = Props.onChange;
-  var onReady = Props.onReady;
-  var componentType = Props.componentType;
-  var onFocus = Props.onFocus;
-  var onBlur = Props.onBlur;
-  var onClick = Props.onClick;
-  var id = idOpt !== undefined ? idOpt : "payment-Element";
-  var hyperSwitch = React.useContext(Context.switchContext);
-  var elementsState = React.useContext(Context.elementsContext);
-  var divRef = React.useRef(null);
-  var paymentElement = Curry._2(elementsState.create, componentType, options);
-  React.useEffect((function () {
-          var paymentElement = Curry._2(elementsState.create, componentType, options);
-          Curry._1(paymentElement.mount, "#orca-elements-payment-element-" + id + "");
-        }), [
-        divRef,
-        elementsState
-      ]);
-  React.useEffect((function () {
-          Curry._2(paymentElement.on, "ready", onReady);
-          Curry._2(paymentElement.on, "focus", onFocus);
-          Curry._2(paymentElement.on, "blur", onBlur);
-          Curry._2(paymentElement.on, "clickTriggered", onClick);
-          Curry._2(paymentElement.on, "change", onChange);
-        }), [
-        elementsState,
-        hyperSwitch
-      ]);
-  return React.createElement("div", {
-              ref: divRef,
-              id: "orca-elements-payment-element-" + id + ""
-            });
-}
+var Elements$1 = Elements.make;
 
-function Index$PaymentElement2(Props) {
-  var id = Props.id;
-  var options = Props.options;
-  var onChange = Props.onChange;
-  var onReady = Props.onReady;
-  var onFocus = Props.onFocus;
-  var onBlur = Props.onBlur;
-  var onClick = Props.onClick;
-  return React.createElement(Index$PaymentElementsWrapper, {
-              id: id,
-              options: options,
-              onChange: onChange,
-              onReady: onReady,
-              componentType: "payment",
-              onFocus: onFocus,
-              onBlur: onBlur,
-              onClick: onClick
-            });
-}
+var HyperElements$1 = HyperElements.make;
 
-function Index$CardElement2(Props) {
-  var id = Props.id;
-  var options = Props.options;
-  var onChange = Props.onChange;
-  var onReady = Props.onReady;
-  var onFocus = Props.onFocus;
-  var onBlur = Props.onBlur;
-  var onClick = Props.onClick;
-  return React.createElement(Index$PaymentElementsWrapper, {
-              id: id,
-              options: options,
-              onChange: onChange,
-              onReady: onReady,
-              componentType: "card",
-              onFocus: onFocus,
-              onBlur: onBlur,
-              onClick: onClick
-            });
-}
+var PaymentElement$1 = PaymentElement.make;
 
-function Index$CardNumber2(Props) {
-  var id = Props.id;
-  var options = Props.options;
-  var onChange = Props.onChange;
-  var onReady = Props.onReady;
-  var onFocus = Props.onFocus;
-  var onBlur = Props.onBlur;
-  var onClick = Props.onClick;
-  return React.createElement(Index$PaymentElementsWrapper, {
-              id: id,
-              options: options,
-              onChange: onChange,
-              onReady: onReady,
-              componentType: "cardNumber",
-              onFocus: onFocus,
-              onBlur: onBlur,
-              onClick: onClick
-            });
-}
+var UnifiedCheckout = PaymentElement.make;
 
-function Index$CardCVC2(Props) {
-  var id = Props.id;
-  var options = Props.options;
-  var onChange = Props.onChange;
-  var onReady = Props.onReady;
-  var onFocus = Props.onFocus;
-  var onBlur = Props.onBlur;
-  var onClick = Props.onClick;
-  return React.createElement(Index$PaymentElementsWrapper, {
-              id: id,
-              options: options,
-              onChange: onChange,
-              onReady: onReady,
-              componentType: "cardCvc",
-              onFocus: onFocus,
-              onBlur: onBlur,
-              onClick: onClick
-            });
-}
+var CardElement$1 = CardElement.make;
 
-function Index$CardExpiry2(Props) {
-  var id = Props.id;
-  var options = Props.options;
-  var onChange = Props.onChange;
-  var onReady = Props.onReady;
-  var onFocus = Props.onFocus;
-  var onBlur = Props.onBlur;
-  var onClick = Props.onClick;
-  return React.createElement(Index$PaymentElementsWrapper, {
-              id: id,
-              options: options,
-              onChange: onChange,
-              onReady: onReady,
-              componentType: "cardExpiry",
-              onFocus: onFocus,
-              onBlur: onBlur,
-              onClick: onClick
-            });
-}
+var CardWidget = CardElement.make;
 
-var Elements = Index$Elements2;
+var CardNumberElement = CardNumber.make;
 
-var HyperElements = Index$HyperElements2;
+var CardNumberWidget = CardNumber.make;
 
-var PaymentElement = Index$PaymentElement2;
+var CardCVCElement = CardCVC.make;
 
-var UnifiedCheckout = Index$PaymentElement2;
+var CardCVCWidget = CardCVC.make;
 
-var CardElement = Index$CardElement2;
+var CardExpiryElement = CardExpiry.make;
 
-var CardWidget = Index$CardElement2;
+var CardExpiryWidget = CardExpiry.make;
 
-var CardNumberElement = Index$CardNumber2;
+var GooglePayElement$1 = GooglePayElement.make;
 
-var CardNumberWidget = Index$CardNumber2;
+var ApplePayElement$1 = ApplePayElement.make;
 
-var CardExpiryElement = Index$CardExpiry2;
+var PayPalElement$1 = PayPalElement.make;
 
-var CardExpiryWidget = Index$CardExpiry2;
+var ExpressCheckoutElement$1 = ExpressCheckoutElement.make;
 
-var CardCVCElement = Index$CardCVC2;
+var HyperManagementElements$1 = HyperManagementElements.make;
 
-var CardCVCWidget = Index$CardCVC2;
+var PaymentMethodsManagementElement$1 = PaymentMethodsManagementElement.make;
 
 export {
-  Elements ,
-  HyperElements ,
-  PaymentElement ,
+  useHyper ,
+  useStripe ,
+  useWidgets ,
+  useElements ,
+  Elements$1 as Elements,
+  HyperElements$1 as HyperElements,
+  PaymentElement$1 as PaymentElement,
   UnifiedCheckout ,
-  CardElement ,
+  CardElement$1 as CardElement,
   CardWidget ,
   CardNumberElement ,
   CardNumberWidget ,
-  CardExpiryElement ,
-  CardExpiryWidget ,
   CardCVCElement ,
   CardCVCWidget ,
-  useStripe ,
-  useHyper ,
-  useElements ,
-  useWidgets ,
+  CardExpiryElement ,
+  CardExpiryWidget ,
+  GooglePayElement$1 as GooglePayElement,
+  ApplePayElement$1 as ApplePayElement,
+  PayPalElement$1 as PayPalElement,
+  ExpressCheckoutElement$1 as ExpressCheckoutElement,
+  HyperManagementElements$1 as HyperManagementElements,
+  PaymentMethodsManagementElement$1 as PaymentMethodsManagementElement,
 }
 /* react Not a pure module */

package/src/Index.res

@@ -8,202 +8,49 @@ type eventData = {
   newClassType: string,
 }
 
-module Elements2 = {
-  @react.component
-  let make = (~children, ~stripe: Js.Promise.t<OrcaJs.switchInstance>, ~options: Js.Json.t) => {
-    let elementOptions = options->Context.elementsOptionObjMapper
-    let (switchState, setSwitchState) = React.useState(() => Context.defaultSwitchContext)
-    let (elementsState, setElementsState) = React.useState(() => Context.defaultElementsContext)
-
-    React.useEffect0(() => {
-      stripe->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 newSwitchVal: Context.switchContextType = {
-          confirmPayment: switchInstance.confirmPayment,
-          confirmCardPayment: switchInstance.confirmCardPayment,
-          retrievePaymentIntent: switchInstance.retrievePaymentIntent,
-          clientSecret: elementOptions.clientSecret,
-          paymentRequest: switchInstance.paymentRequest,
-        }
-
-        let switchValClone = {...newSwitchVal, clientSecret: elementOptions.clientSecret}
-        setSwitchState(_ => switchValClone)
-        setElementsState(_ => newElemValues)
-        Js.Promise.resolve(switchValClone)
-      }, _)->ignore
-      None
-    })
-
-    <Context.SwitchContextProvider value={switchState}>
-      <Context.ElementsContextProvider value={elementsState}>
-        {children}
-      </Context.ElementsContextProvider>
-    </Context.SwitchContextProvider>
-  }
-}
-
-module HyperElements2 = {
-  @react.component
-  let make = (~children, ~hyper: Js.Promise.t<OrcaJs.switchInstance>, ~options: Js.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 newSwitchVal: Context.switchContextType = {
-          confirmPayment: switchInstance.confirmPayment,
-          confirmCardPayment: switchInstance.confirmCardPayment,
-          retrievePaymentIntent: switchInstance.retrievePaymentIntent,
-          clientSecret: elementOptions.clientSecret,
-          paymentRequest: switchInstance.paymentRequest,
-        }
-
-        let switchValClone = {...newSwitchVal, clientSecret: elementOptions.clientSecret}
-        setSwitchState(_ => switchValClone)
-        setElementsState(_ => newElemValues)
-        Js.Promise.resolve(switchValClone)
-      }, _)->ignore
-      None
-    })
-
-    <Context.SwitchContextProvider value={switchState}>
-      <Context.ElementsContextProvider value={elementsState}>
-        {children}
-      </Context.ElementsContextProvider>
-    </Context.SwitchContextProvider>
-  }
-}
-
-let \"Elements" = Elements2.make
-
-let \"HyperElements" = HyperElements2.make
-
 let useHyper = () => {
   React.useContext(Context.switchContext)
 }
 
 let useStripe = () => {
-  Js.Console.warn("useStripe() is deprecated. Use useHyper() instead")
+  Console.warn("useStripe() is deprecated. Use useHyper() instead")
   useHyper()
 }
 let useWidgets = () => {
   React.useContext(Context.elementsContext)
 }
 let useElements = () => {
-  Js.Console.warn("useElements() is deprecated. Use useWidgets() instead")
+  Console.warn("useElements() is deprecated. Use useWidgets() instead")
   useWidgets()
 }
 
-module PaymentElementsWrapper = {
-  @react.component
-  let make = (
-    ~id="payment-Element",
-    ~options: Js.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))
+let \"Elements" = Elements.make
 
-    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}`} />
-  }
-}
+let \"HyperElements" = HyperElements.make
 
-module PaymentElement2 = {
-  @react.component
-  let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
-    <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="payment"
-    />
-  }
-}
-let \"PaymentElement" = PaymentElement2.make
+let \"PaymentElement" = PaymentElement.make
+let \"UnifiedCheckout" = PaymentElement.make
 
-let \"UnifiedCheckout" = PaymentElement2.make
+let \"CardElement" = CardElement.make
+let \"CardWidget" = CardElement.make
 
-module CardElement2 = {
-  @react.component
-  let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
-    <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="card"
-    />
-  }
-}
-let \"CardElement" = CardElement2.make
+let \"CardNumberElement" = CardNumber.make
+let \"CardNumberWidget" = CardNumber.make
 
-let \"CardWidget" = CardElement2.make
+let \"CardCVCElement" = CardCVC.make
+let \"CardCVCWidget" = CardCVC.make
 
-module CardNumber2 = {
-  @react.component
-  let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
-    <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="cardNumber"
-    />
-  }
-}
-let \"CardNumberElement" = CardNumber2.make
+let \"CardExpiryElement" = CardExpiry.make
+let \"CardExpiryWidget" = CardExpiry.make
 
-let \"CardNumberWidget" = CardNumber2.make
+let \"GooglePayElement" = GooglePayElement.make
 
-module CardCVC2 = {
-  @react.component
-  let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
-    <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="cardCvc"
-    />
-  }
-}
-let \"CardCVCElement" = CardCVC2.make
+let \"ApplePayElement" = ApplePayElement.make
 
-let \"CardCVCWidget" = CardCVC2.make
+let \"PayPalElement" = PayPalElement.make
 
-module CardExpiry2 = {
-  @react.component
-  let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
-    <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="cardExpiry"
-    />
-  }
-}
-let \"CardExpiryElement" = CardExpiry2.make
+let \"ExpressCheckoutElement" = ExpressCheckoutElement.make
 
-let \"CardExpiryWidget" = CardExpiry2.make
+let \"HyperManagementElements" = HyperManagementElements.make
 
+let \"PaymentMethodsManagementElement" = PaymentMethodsManagementElement.make