feat: add support for ref.current.tokenize

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "main": "dist/bundle.js",
   "files": [
     "dist/",

src/Context.res

@@ -86,6 +86,7 @@ type switchContextType = {
   completeUpdateIntent: string => promise<JSON.t>,
   initiateUpdateIntent: unit => promise<JSON.t>,
   confirmTokenization: JSON.t => Promise.t<JSON.t>,
+  tokenize: JSON.t => Promise.t<JSON.t>,
 }
 
 type paymentMethodsManagementSwitchContextType = {
@@ -131,6 +132,7 @@ let defaultSwitchContext = {
   completeUpdateIntent: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
   initiateUpdateIntent: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
   confirmTokenization: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
+  tokenize: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
 }
 
 let switchContext = React.createContext(defaultSwitchContext)

src/Index.resi

@@ -188,13 +188,4 @@ let \"HyperManagementElements": HyperManagementElements.props<
   RescriptCore.Promise.t<OrcaJs.switchInstance>,
   RescriptCore.JSON.t,
 > => React.element
-let \"PaymentMethodsManagementElement": PaymentMethodsManagementElement.props<
-  string,
-  RescriptCore.JSON.t,
-  option<option<RescriptCore.JSON.t> => unit>,
-  option<option<RescriptCore.JSON.t> => unit>,
-  string,
-  option<option<RescriptCore.JSON.t> => unit>,
-  option<option<RescriptCore.JSON.t> => unit>,
-  option<option<RescriptCore.JSON.t> => unit>,
-> => Jsx.element
+let \"PaymentMethodsManagementElement": React.component<OrcaJs.paymentMethodsManagementElementProps>

src/OrcaJs.res

@@ -129,6 +129,7 @@ type switchInstance = {
   completeUpdateIntent: string => promise<JSON.t>,
   initiateUpdateIntent: unit => promise<JSON.t>,
   confirmTokenization: JSON.t => Promise.t<JSON.t>,
+  tokenize: JSON.t => Promise.t<JSON.t>,
   initPaymentMethodSession: JSON.t => initPaymentMethodSession,
 }
 
@@ -145,6 +146,21 @@ type paymentElementProps = {
 }
 
 type paymentElementHandle = {confirmPayment: JSON.t => Promise.t<JSON.t>}
+type paymentMethodsManagementElementHandle = {
+  confirmTokenization: JSON.t => Promise.t<JSON.t>,
+  tokenize: JSON.t => Promise.t<JSON.t>,
+}
+
+type paymentMethodsManagementElementProps = {
+  id: option<string>,
+  options: JSON.t,
+  onChange: option<option<JSON.t> => unit>,
+  onReady: option<option<JSON.t> => unit>,
+  componentType: option<string>,
+  onFocus: option<option<JSON.t> => unit>,
+  onBlur: option<option<JSON.t> => unit>,
+  onClick: option<option<JSON.t> => unit>,
+}
 type cardFormHandle = {
   confirmPayment: unit => Promise.t<JSON.t>,
   tokenize: unit => Promise.t<JSON.t>,

src/components/Elements.res

@@ -28,6 +28,14 @@ let make = (~children, ~stripe: Promise.t<OrcaJs.switchInstance>, ~options: JSON
         completeUpdateIntent: switchInstance.completeUpdateIntent,
         initiateUpdateIntent: switchInstance.initiateUpdateIntent,
         confirmTokenization: switchInstance.confirmTokenization,
+        tokenize: _ =>
+          Promise.resolve(
+            OrcaJs.unsupportedOnSurfaceError(
+              ~method="tokenize",
+              ~surface="payments",
+              ~alternative="confirmPayment",
+            ),
+          ),
       }
       setSwitchState(_ => switchValClone)
       setElementsState(_ => newElemValues)

src/components/HyperElements.res

@@ -31,6 +31,14 @@ let make = (~children, ~hyper: Promise.t<OrcaJs.switchInstance>, ~options: 'a) =
         completeUpdateIntent: switchInstance.completeUpdateIntent,
         initiateUpdateIntent: switchInstance.initiateUpdateIntent,
         confirmTokenization: switchInstance.confirmTokenization,
+        tokenize: _ =>
+          Promise.resolve(
+            OrcaJs.unsupportedOnSurfaceError(
+              ~method="tokenize",
+              ~surface="payments",
+              ~alternative="confirmPayment",
+            ),
+          ),
       }
 
       let paymentSession = switchInstance.initPaymentSession(resolvedOptions)

src/components/HyperManagementElements.res

@@ -29,6 +29,7 @@ let make = (~children, ~hyper: Promise.t<OrcaJs.switchInstance>, ~options: JSON.
         completeUpdateIntent: switchInstance.completeUpdateIntent,
         initiateUpdateIntent: switchInstance.initiateUpdateIntent,
         confirmTokenization: switchInstance.confirmTokenization,
+        tokenize: switchInstance.tokenize,
       }
       setSwitchState(_ => switchValClone)
       setElementsState(_ => newElemValues)

src/components/PaymentMethodsManagementElement.res

@@ -1,45 +1,27 @@
-@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))
+open OrcaJs
 
-  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}`} />
-}
+let make = React.forwardRef((
+  {
+    id,
+    options,
+    onChange,
+    onReady,
+    componentType,
+    onFocus,
+    onBlur,
+    onClick,
+  }: paymentMethodsManagementElementProps,
+  imperativeRef,
+) => {
+  <PaymentMethodsManagementElementWrapper
+    ?id
+    options
+    onChange
+    onReady
+    ?componentType
+    onFocus
+    onBlur
+    onClick
+    imperativeRef
+  />
+})