@parafin/react 6.4.1 → 7.1.0

package/out/index.d.ts

@@ -1,58 +1,3 @@
+import { LinkOpenedMetadata, WidgetProps, WidgetEvent, WidgetEventMetadata } from '@parafin/core';
 declare const ParafinWidget: (props: WidgetProps) => import("react/jsx-runtime").JSX.Element;
-export { ParafinWidget };
-export type WidgetEvent = 'opted_in' | 'opted_out';
-export type LinkOpenedMetadata = {
-    type: 'auth' | 'document' | 'webpage' | 'phone' | 'email';
-};
-export type WidgetProps = {
-    token: string;
-    product: 'capital' | 'spend_card' | 'cash_account';
-    externalBusinessId?: string;
-    onEvent?: (eventType: WidgetEvent) => Promise<void> | void;
-    onExit?: () => void;
-    /** @deprecated Use onEvent with 'opted_in' event type instead */
-    onOptIn?: () => Promise<OptInFields>;
-    openInNewTab?: boolean;
-    onLinkOpened?: (url: string, metadata: LinkOpenedMetadata) => void;
-    inWebView?: boolean;
-};
-type USStates = 'AL' | 'AK' | 'AZ' | 'AR' | 'CA' | 'CO' | 'CT' | 'DE' | 'DC' | 'FL' | 'GA' | 'HI' | 'ID' | 'IL' | 'IN' | 'IA' | 'KS' | 'KY' | 'LA' | 'ME' | 'MD' | 'MA' | 'MI' | 'MN' | 'MS' | 'MO' | 'MT' | 'NE' | 'NV' | 'NH' | 'NJ' | 'NM' | 'NY' | 'NC' | 'ND' | 'OH' | 'OK' | 'OR' | 'PA' | 'RI' | 'SC' | 'SD' | 'TN' | 'TX' | 'UT' | 'VT' | 'VA' | 'WA' | 'WV' | 'WI' | 'WY';
-type USTerritories = 'AS' | 'GU' | 'MP' | 'PR' | 'VI';
-type CanadianProvinces = 'AB' | 'BC' | 'MB' | 'NB' | 'NL' | 'NS' | 'QC' | 'ON' | 'PE' | 'SK';
-type CanadianTerritories = 'NT' | 'NU' | 'YT';
-type Address = {
-    addressLine1: string;
-    addressLine2?: string;
-    city: string;
-    state: USStates | USTerritories | CanadianProvinces | CanadianTerritories;
-    postalCode: string;
-    country: 'US' | 'CA';
-};
-export type OptInFields = {
-    businessExternalId: string;
-    accountManagers?: {
-        name: string;
-        email: string;
-    }[];
-    owner: {
-        firstName: string;
-        lastName: string;
-        email: string;
-        phoneNumber?: string;
-        /** yyyy-mm-dd */
-        dateOfBirth?: string;
-        address?: Address;
-    };
-    business: {
-        legalName: string;
-        dbaName?: string;
-        address?: Address;
-        /** yyyy-mm-dd */
-        dateEstablished?: string;
-    };
-    bank?: {
-        routingNumber?: string;
-        accountNumberLastFour?: string;
-        currencyCode?: 'USD' | 'CAD';
-    };
-};
+export { ParafinWidget, type WidgetEvent, type WidgetEventMetadata, type WidgetProps, type LinkOpenedMetadata, };

package/out/index.js

@@ -7,33 +7,41 @@ const openParafinDashboard = (props) => {
         // @ts-ignore
         props.dashboardUrlOverride ?? 'https://app.parafin.com');
         const route = 'route' in props ? props.route : '/';
-        const addPropIfExists = (key) => {
-            if (key in props && props[key] !== undefined && props[key] !== null) {
-                return { [key]: props[key] };
-            }
-            else {
-                return {};
-            }
-        };
         const query = {
             product: props.product,
             referrer: 'partner',
-            ...addPropIfExists('token'),
-            ...addPropIfExists('partner'),
-            ...addPropIfExists('externalBusinessId'),
-            ...addPropIfExists('orderId'),
-            ...addPropIfExists('lineOfCreditApplicationId'),
-            ...addPropIfExists('inWebView'),
+            ...('token' in props &&
+                props.token !== undefined &&
+                props.token !== null && { token: props.token }),
+            ...('partner' in props &&
+                props.partner !== undefined &&
+                props.partner !== null && { partner: props.partner }),
+            ...('externalBusinessId' in props &&
+                props.externalBusinessId !== undefined &&
+                props.externalBusinessId !== null && {
+                externalBusinessId: props.externalBusinessId,
+            }),
+            ...('orderId' in props &&
+                props.orderId !== undefined &&
+                props.orderId !== null && { orderId: props.orderId }),
+            ...('lineOfCreditApplicationId' in props &&
+                props.lineOfCreditApplicationId !== undefined &&
+                props.lineOfCreditApplicationId !== null && {
+                lineOfCreditApplicationId: props.lineOfCreditApplicationId,
+            }),
+            ...('inWebView' in props &&
+                props.inWebView !== undefined &&
+                props.inWebView !== null && { inWebView: props.inWebView.toString() }),
             ...Object.fromEntries(searchParams),
         };
         const url = `${origin}${route}?${new URLSearchParams(query).toString()}`;
         if ('openInNewTab' in props && props.openInNewTab) {
             window.open(url, '_blank');
-            return;
+            return () => { }; // noop
         }
         if ('mode' in props && props.mode === 'redirect') {
             window.location.href = url;
-            return;
+            return () => { }; // noop
         }
         const existingParafinDashboard = document.getElementById('parafin-dashboard');
         if (existingParafinDashboard) {
@@ -72,17 +80,25 @@ const openParafinDashboard = (props) => {
                 props.onExit?.();
             }
         };
+        let cleanedUp = false;
+        const cleanup = ({ withOnExit }) => {
+            if (cleanedUp)
+                return; // noop
+            cleanedUp = true;
+            window.removeEventListener('message', messageListener);
+            frame.style.opacity = '0';
+            setTimeout(() => {
+                if (withOnExit)
+                    onExit();
+                dashboardTargetElement.removeChild(frame);
+                document.body.style.removeProperty('overflow');
+            }, 200);
+        };
         const messageListener = async (event) => {
             if (event.origin === origin) {
                 switch (event.data?.message) {
                     case 'close-dashboard':
-                        window.removeEventListener('message', messageListener);
-                        frame.style.opacity = '0';
-                        setTimeout(() => {
-                            onExit();
-                            dashboardTargetElement.removeChild(frame);
-                            document.body.style.removeProperty('overflow');
-                        }, 200);
+                        cleanup({ withOnExit: true });
                         break;
                     case 'link-opened':
                         if (props.onLinkOpened && event.data?.url && event.data?.metadata) {
@@ -97,20 +113,33 @@ const openParafinDashboard = (props) => {
         setTimeout(() => {
             frame.style.opacity = '1';
             document.body.style.overflow = 'hidden';
-        }, 1);
+        }, 0);
+        return () => cleanup({ withOnExit: false });
     }
     catch (error) {
         console.error('Error loading Parafin dashboard', error);
+        return () => { }; // noop
     }
 };
-
-const initializeWidget = (iframe, props) => {
+const defaultWidgetStyles = {
+    width: '100%',
+    height: '258px',
+    backgroundColor: '#fff',
+    border: '1px solid #E8E8E8',
+    borderRadius: '16px',
+    transition: 'border 0.2s, border-radius 0.2s',
+    boxSizing: 'border-box',
+};
+const emptyMetadata = {
+    timeToLoadInMs: null,
+};
+const initializeParafinWidget = (iframe, props) => {
+    const initStartTime = Date.now();
     // @ts-ignore
     const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com');
     const query = {
         token: props.token,
         product: props.product,
-        hasOptIn: props.onOptIn ? 'true' : 'false',
         host: window.location.origin,
         externalBusinessId: props.externalBusinessId ?? '',
         ...Object.fromEntries(url.searchParams),
@@ -133,6 +162,9 @@ const initializeWidget = (iframe, props) => {
                     }
                     break;
                 case 'open-dashboard':
+                    if (props.onEvent) {
+                        props.onEvent('dashboard_opened', emptyMetadata);
+                    }
                     openParafinDashboard({
                         ...props,
                         route: data?.route,
@@ -142,24 +174,10 @@ const initializeWidget = (iframe, props) => {
                         },
                     });
                     break;
-                case 'opt-in':
-                    if (props.onOptIn) {
-                        try {
-                            const optInFields = await props.onOptIn();
-                            sendMessage({ message: 'opt-in', optInFields });
-                        }
-                        catch {
-                            sendMessage({ message: 'opt-in', optInFields: undefined });
-                        }
-                    }
-                    else {
-                        sendMessage({ message: 'opt-in', optInFields: undefined });
-                    }
-                    break;
                 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 {
@@ -173,7 +191,7 @@ const initializeWidget = (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 {
@@ -189,27 +207,29 @@ const initializeWidget = (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;
             }
         }
     };
     window.addEventListener('message', messageListener);
     return () => window.removeEventListener('message', messageListener);
 };
-const defaultWidgetStyles = {
-    width: '100%',
-    height: '258px',
-    backgroundColor: '#fff',
-    border: '1px solid #E8E8E8',
-    borderRadius: '16px',
-    transition: 'border 0.2s, border-radius 0.2s',
-    boxSizing: 'border-box',
-};
 
 const ParafinWidget = (props) => {
     const frameRef = useRef(null);
     useEffect(() => {
         if (frameRef.current) {
-            const cleanup = initializeWidget(frameRef.current, props);
+            const cleanup = initializeParafinWidget(frameRef.current, props);
             return cleanup;
         }
     }, [props]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parafin/react",
-  "version": "6.4.1",
+  "version": "7.1.0",
   "description": "Parafin React widget",
   "author": "Parafin (https://www.parafin.com)",
   "module": "out/index.js",
@@ -23,8 +23,9 @@
   },
   "devDependencies": {
     "@types/react": ">=16.8.0",
-    "typescript": "^4.9.5",
-    "@parafin/widget": "*"
+    "typescript": "^4.9.5"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@parafin/core": "^3.1.0"
+  }
 }