@parafin/react 6.1.0 → 6.2.1-alpha.0

package/out/index.d.ts

@@ -1,4 +1,50 @@
-import { WidgetProps, OptInFields } from '@parafin/widget';
 declare const ParafinWidget: (props: WidgetProps) => import("react/jsx-runtime").JSX.Element;
 export { ParafinWidget };
-export type { OptInFields };
+export type WidgetProps = {
+    token: string;
+    product: 'capital' | 'spend_card' | 'cash_account';
+    externalBusinessId?: string;
+    onExit?: () => void;
+    onOptIn?: () => Promise<OptInFields>;
+    openInNewTab?: 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';
+    };
+};

package/out/index.js

@@ -11,12 +11,13 @@ const openParafinDashboard = (props) => {
             product: props.product,
             referrer: 'partner',
             ...('token' in props && { token: props.token }),
+            ...('partner' in props && { partner: props.partner }),
             ...('externalBusinessId' in props && {
                 externalBusinessId: props.externalBusinessId,
             }),
             ...('orderId' in props && { orderId: props.orderId }),
-            ...('orderAmount' in props && {
-                orderAmount: props.orderAmount.toString(),
+            ...('lineOfCreditApplicationId' in props && {
+                lineOfCreditApplicationId: props.lineOfCreditApplicationId,
             }),
             ...('additionalQueryParams' in props && props.additionalQueryParams),
             ...Object.fromEntries(searchParams),
@@ -26,6 +27,10 @@ const openParafinDashboard = (props) => {
             window.open(url, '_blank');
             return;
         }
+        if ('mode' in props && props.mode === 'redirect') {
+            window.location.href = url;
+            return;
+        }
         const existingParafinDashboard = document.getElementById('parafin-dashboard');
         if (existingParafinDashboard) {
             document.removeChild(existingParafinDashboard);
@@ -44,11 +49,13 @@ const openParafinDashboard = (props) => {
         frame.style.transition = 'opacity 0.2s';
         frame.src = url;
         frame.allow = 'accelerometer; gyroscope; clipboard-read; clipboard-write';
-        const parse = (message) => (message ? JSON.parse(message) : undefined);
         const closeParafinDashboard = (e) => {
             if (e.origin === origin && e.data?.message === 'close-dashboard') {
-                if (props.product === 'bnpl' && props.flow === 'checkout') {
-                    props.onExit(parse(e.data.order));
+                if ('orderId' in props) {
+                    props.onExit?.(props.orderId);
+                }
+                else if ('lineOfCreditApplicationId' in props) {
+                    props.onExit?.(props.lineOfCreditApplicationId);
                 }
                 else {
                     props.onExit?.();
@@ -78,12 +85,12 @@ const initializeWidget = (iframe, props) => {
         externalBusinessId: props.externalBusinessId ?? '',
         ...Object.fromEntries(url.searchParams),
     };
+    const iframeSrc = `${url.origin}?${new URLSearchParams(query).toString()}`;
     iframe.id = `parafin-${props.product}-widget`;
-    iframe.src = `${url.origin}?${new URLSearchParams(query).toString()}`;
-    const resetIframe = () => {
-        iframe.src = `${url.origin}?${new URLSearchParams(query).toString()}`;
+    iframe.src = iframeSrc;
+    const sendMessageToWidget = (message, data) => {
+        iframe.contentWindow?.postMessage({ message, data }, url.origin);
     };
-    // Message handler
     const messageListener = async ({ data, origin }) => {
         if (origin === url.origin && data?.product === props.product) {
             switch (data?.message) {
@@ -100,7 +107,7 @@ const initializeWidget = (iframe, props) => {
                         ...props,
                         route: data?.route,
                         onExit: () => {
-                            resetIframe();
+                            iframe.src = iframeSrc;
                             props.onExit?.();
                         },
                     });
@@ -108,7 +115,38 @@ const initializeWidget = (iframe, props) => {
                 case 'opt-in':
                     if (props.onOptIn) {
                         const optInFields = await props.onOptIn();
-                        iframe.contentWindow?.postMessage({ message: 'opt-in', optInFields }, url.origin);
+                        sendMessageToWidget('opt-in', optInFields);
+                    }
+                    else {
+                        sendMessageToWidget('opt-in', undefined);
+                    }
+                    break;
+                case 'person-opt-in':
+                    if (props.onEvent) {
+                        try {
+                            await props.onEvent('opted_in');
+                            sendMessageToWidget('person-opt-in', { state: 'success' });
+                        }
+                        catch {
+                            sendMessageToWidget('person-opt-in', { state: 'error' });
+                        }
+                    }
+                    else {
+                        sendMessageToWidget('person-opt-in', { state: 'noop' });
+                    }
+                    break;
+                case 'person-opt-out':
+                    if (props.onEvent) {
+                        try {
+                            await props.onEvent?.('opted_out');
+                            sendMessageToWidget('person-opt-out', { state: 'success' });
+                        }
+                        catch {
+                            sendMessageToWidget('person-opt-out', { state: 'error' });
+                        }
+                    }
+                    else {
+                        sendMessageToWidget('person-opt-out', { state: 'noop' });
                     }
                     break;
                 case 'set-height':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parafin/react",
-  "version": "6.1.0",
+  "version": "6.2.1-alpha.0",
   "description": "Parafin React widget",
   "author": "Parafin (https://www.parafin.com)",
   "module": "out/index.js",