@parafin/core 3.0.0 → 3.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1 @@
+$ tsc

package/index.ts

@@ -169,13 +169,29 @@ export const defaultWidgetStyles = {
   boxSizing: 'border-box' as const,
 }
 
-export type WidgetEvent = 'opted_in' | 'opted_out'
+export type WidgetEvent =
+  | 'opted_in'
+  | 'opted_out'
+  | 'dashboard_opened'
+  | 'widget_loaded'
+  | 'widget_error'
+
+export type WidgetEventMetadata = {
+  timeToLoadInMs: number | null
+}
+
+const emptyMetadata: WidgetEventMetadata = {
+  timeToLoadInMs: null,
+}
 
 export type WidgetProps = {
   token: string
   product: 'capital' | 'spend_card' | 'cash_account'
   externalBusinessId?: string
-  onEvent?: (eventType: WidgetEvent) => Promise<void> | void
+  onEvent?: (
+    eventType: WidgetEvent,
+    metadata: WidgetEventMetadata
+  ) => Promise<void> | void
   onExit?: () => void
   openInNewTab?: boolean
   onLinkOpened?: (url: string, metadata: LinkOpenedMetadata) => void
@@ -186,6 +202,8 @@ export const initializeParafinWidget = (
   iframe: HTMLIFrameElement,
   props: WidgetProps
 ) => {
+  const initStartTime = Date.now()
+
   // @ts-ignore
   const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com')
   const query = {
@@ -216,6 +234,9 @@ export const initializeParafinWidget = (
           }
           break
         case 'open-dashboard':
+          if (props.onEvent) {
+            props.onEvent('dashboard_opened', emptyMetadata)
+          }
           openParafinDashboard({
             ...props,
             route: data?.route,
@@ -228,7 +249,7 @@ export const initializeParafinWidget = (
         case 'person-opt-in':
           if (props.onEvent) {
             try {
-              await props.onEvent('opted_in')
+              await props.onEvent('opted_in', emptyMetadata)
               sendMessage({ message: 'person-opt-in', state: 'success' })
             } catch {
               sendMessage({ message: 'person-opt-in', state: 'error' })
@@ -240,7 +261,7 @@ export const initializeParafinWidget = (
         case 'person-opt-out':
           if (props.onEvent) {
             try {
-              await props.onEvent('opted_out')
+              await props.onEvent('opted_out', emptyMetadata)
               sendMessage({ message: 'person-opt-out', state: 'success' })
             } catch {
               sendMessage({ message: 'person-opt-out', state: 'error' })
@@ -254,6 +275,17 @@ export const initializeParafinWidget = (
             iframe.style.height = data.height
           }
           break
+        case 'widget-error':
+          if (props.onEvent) {
+            props.onEvent('widget_error', emptyMetadata)
+          }
+          break
+        case 'widget-load-complete':
+          if (props.onEvent) {
+            const timeToLoadInMs = Date.now() - initStartTime
+            props.onEvent('widget_loaded', { timeToLoadInMs })
+          }
+          break
       }
     }
   }

package/out/index.d.ts

@@ -34,12 +34,15 @@ export declare const defaultWidgetStyles: {
     transition: string;
     boxSizing: "border-box";
 };
-export type WidgetEvent = 'opted_in' | 'opted_out';
+export type WidgetEvent = 'opted_in' | 'opted_out' | 'dashboard_opened' | 'widget_loaded' | 'widget_error';
+export type WidgetEventMetadata = {
+    timeToLoadInMs: number | null;
+};
 export type WidgetProps = {
     token: string;
     product: 'capital' | 'spend_card' | 'cash_account';
     externalBusinessId?: string;
-    onEvent?: (eventType: WidgetEvent) => Promise<void> | void;
+    onEvent?: (eventType: WidgetEvent, metadata: WidgetEventMetadata) => Promise<void> | void;
     onExit?: () => void;
     openInNewTab?: boolean;
     onLinkOpened?: (url: string, metadata: LinkOpenedMetadata) => void;

package/out/index.js

@@ -127,7 +127,11 @@ export const defaultWidgetStyles = {
     transition: 'border 0.2s, border-radius 0.2s',
     boxSizing: 'border-box',
 };
+const emptyMetadata = {
+    timeToLoadInMs: null,
+};
 export const initializeParafinWidget = (iframe, props) => {
+    const initStartTime = Date.now();
     // @ts-ignore
     const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com');
     const query = {
@@ -155,6 +159,9 @@ export const initializeParafinWidget = (iframe, props) => {
                     }
                     break;
                 case 'open-dashboard':
+                    if (props.onEvent) {
+                        props.onEvent('dashboard_opened', emptyMetadata);
+                    }
                     openParafinDashboard({
                         ...props,
                         route: data?.route,
@@ -167,7 +174,7 @@ export const initializeParafinWidget = (iframe, props) => {
                 case 'person-opt-in':
                     if (props.onEvent) {
                         try {
-                            await props.onEvent('opted_in');
+                            await props.onEvent('opted_in', emptyMetadata);
                             sendMessage({ message: 'person-opt-in', state: 'success' });
                         }
                         catch {
@@ -181,7 +188,7 @@ export const initializeParafinWidget = (iframe, props) => {
                 case 'person-opt-out':
                     if (props.onEvent) {
                         try {
-                            await props.onEvent('opted_out');
+                            await props.onEvent('opted_out', emptyMetadata);
                             sendMessage({ message: 'person-opt-out', state: 'success' });
                         }
                         catch {
@@ -197,6 +204,17 @@ export const initializeParafinWidget = (iframe, props) => {
                         iframe.style.height = data.height;
                     }
                     break;
+                case 'widget-error':
+                    if (props.onEvent) {
+                        props.onEvent('widget_error', emptyMetadata);
+                    }
+                    break;
+                case 'widget-load-complete':
+                    if (props.onEvent) {
+                        const timeToLoadInMs = Date.now() - initStartTime;
+                        props.onEvent('widget_loaded', { timeToLoadInMs });
+                    }
+                    break;
             }
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parafin/core",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Parafin embedded core",
   "author": "Parafin (https://www.parafin.com)",
   "module": "out/index.js",