@methodfi/opal-react 1.1.0 → 1.3.0

package/dist/index.d.ts

@@ -1,26 +1,34 @@
 import { ReactNode } from 'react';
 
 type OpalEnvironment = 'local' | 'dev' | 'sandbox' | 'production';
-type OpalMode = 'opal' | 'card_connect' | 'account_verification' | string;
-type OpalEventObject = 'session' | 'card' | 'account' | 'bank' | string;
-type OpalEventAction = 'started' | 'errored' | 'exited' | 'verified' | 'completed' | string;
+declare const OpalMode: {
+    readonly CONNECT: "connect";
+    readonly CARD_CONNECT: "card_connect";
+    readonly ACCOUNT_VERIFICATION: "account_verification";
+    readonly IDENTITY: "identity";
+};
+type OpalMode = (typeof OpalMode)[keyof typeof OpalMode];
 declare const OpalEventType: {
-    readonly SESSION_STARTED: "opal.session.started";
-    readonly SESSION_ERRORED: "opal.session.errored";
-    readonly SESSION_EXITED: "opal.session.exited";
-    readonly SESSION_COMPLETED: "opal.session.completed";
+    readonly SESSION_STARTED: "opal.started";
+    readonly SESSION_ERRORED: "opal.errored";
+    readonly SESSION_EXITED: "opal.exited";
+    readonly SESSION_COMPLETED: "opal.completed";
+    readonly FLOW_STARTED: "flow.started";
+    readonly FLOW_COMPLETED: "flow.completed";
+    readonly STEP_STARTED: "step.started";
+    readonly STEP_COMPLETED: "step.completed";
 };
-type OpalEventType = 'opal.session.started' | 'opal.session.errored' | 'opal.session.exited' | 'opal.session.completed';
+type OpalEventType = (typeof OpalEventType)[keyof typeof OpalEventType];
 /**
  * Structured event object matching Method's Opal event format
- * Types follow the pattern: <mode>.<object>.<action>, which is
+ * Types follow the pattern: <object>.<action>, which is
  * also split up into those properties for convenience.
  */
 interface OpalEvent {
     type: OpalEventType;
     mode: OpalMode;
-    object: OpalEventObject;
-    action: OpalEventAction;
+    object: string;
+    action: string;
     timestamp: string;
     data?: OpalEventData | null;
 }
@@ -143,4 +151,4 @@ declare function OpalProvider({ children }: OpalProviderProps): JSX.Element;
  */
 declare function useOpal(config?: OpalConfig): UseOpalReturn;
 
-export { OpalEventType, OpalProvider, useOpal };
+export { OpalEventType, OpalMode, OpalProvider, useOpal };

package/dist/index.js

@@ -1,12 +1,23 @@
 'use client';
 import React, { useState, createContext, useEffect, useRef, useCallback, useContext } from 'react';
 
+// Opal modes supported by the SDK
+const OpalMode = {
+    CONNECT: 'connect',
+    CARD_CONNECT: 'card_connect',
+    ACCOUNT_VERIFICATION: 'account_verification',
+    IDENTITY: 'identity'
+};
 // Common Opal event types - supports card_connect and account_verification modes
 const OpalEventType = {
-    SESSION_STARTED: 'opal.session.started',
-    SESSION_ERRORED: 'opal.session.errored',
-    SESSION_EXITED: 'opal.session.exited',
-    SESSION_COMPLETED: 'opal.session.completed'
+    SESSION_STARTED: 'opal.started',
+    SESSION_ERRORED: 'opal.errored',
+    SESSION_EXITED: 'opal.exited',
+    SESSION_COMPLETED: 'opal.completed',
+    FLOW_STARTED: 'flow.started',
+    FLOW_COMPLETED: 'flow.completed',
+    STEP_STARTED: 'step.started',
+    STEP_COMPLETED: 'step.completed'
 };
 
 const OPAL_URLS = {
@@ -177,8 +188,8 @@ function OpalIframe({ token, opalUrl, onMessage, style }) {
             }
         } catch (error) {
             onMessage({
-                type: 'opal.session.errored',
-                mode: 'opal',
+                type: 'opal.errored',
+                mode: event.data.mode,
                 object: 'session',
                 action: 'errored',
                 timestamp: new Date().toISOString(),
@@ -209,4 +220,4 @@ function OpalIframe({ token, opalUrl, onMessage, style }) {
     });
 }
 
-export { OpalEventType, OpalProvider, useOpal };
+export { OpalEventType, OpalMode, OpalProvider, useOpal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@methodfi/opal-react",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "React SDK for Opal integration",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,4 +26,4 @@
     "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   }
-}
+}