@parafin/core 2.3.0 → 3.0.0

package/index.ts

@@ -34,23 +34,31 @@ export const openParafinDashboard = (
     )
     const route = 'route' in props ? props.route : '/'
 
-    const addPropIfExists = (key: string) => {
-      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),
     }
 
@@ -58,12 +66,12 @@ export const openParafinDashboard = (
 
     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 =
@@ -107,17 +115,26 @@ export const openParafinDashboard = (
       }
     }
 
+    let cleanedUp = false
+    const cleanup = ({ withOnExit }: { withOnExit: boolean }) => {
+      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: MessageEvent) => {
       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) {
@@ -133,8 +150,115 @@ export const openParafinDashboard = (
     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
+  }
+}
+
+export 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' as const,
+}
+
+export type WidgetEvent = 'opted_in' | 'opted_out'
+
+export type WidgetProps = {
+  token: string
+  product: 'capital' | 'spend_card' | 'cash_account'
+  externalBusinessId?: string
+  onEvent?: (eventType: WidgetEvent) => Promise<void> | void
+  onExit?: () => void
+  openInNewTab?: boolean
+  onLinkOpened?: (url: string, metadata: LinkOpenedMetadata) => void
+  inWebView?: boolean
+}
+
+export const initializeParafinWidget = (
+  iframe: HTMLIFrameElement,
+  props: WidgetProps
+) => {
+  // @ts-ignore
+  const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com')
+  const query = {
+    token: props.token,
+    product: props.product,
+    host: window.location.origin,
+    externalBusinessId: props.externalBusinessId ?? '',
+    ...Object.fromEntries(url.searchParams),
+  }
+  const iframeSrc = `${url.origin}?${new URLSearchParams(query).toString()}`
+
+  iframe.id = `parafin-${props.product}-widget`
+  iframe.src = iframeSrc
+
+  const sendMessage = (message: any) => {
+    iframe.contentWindow?.postMessage(message, url.origin)
   }
+
+  const messageListener = async ({ data, origin }: MessageEvent) => {
+    if (origin === url.origin && data?.product === props.product) {
+      switch (data?.message) {
+        case 'set-border':
+          if (data?.borderColor) {
+            iframe.style.border = `1px solid ${data.borderColor}`
+          }
+          if (data?.borderRadius) {
+            iframe.style.borderRadius = data.borderRadius
+          }
+          break
+        case 'open-dashboard':
+          openParafinDashboard({
+            ...props,
+            route: data?.route,
+            onExit: () => {
+              iframe.src = iframeSrc
+              props.onExit?.()
+            },
+          })
+          break
+        case 'person-opt-in':
+          if (props.onEvent) {
+            try {
+              await props.onEvent('opted_in')
+              sendMessage({ message: 'person-opt-in', state: 'success' })
+            } catch {
+              sendMessage({ message: 'person-opt-in', state: 'error' })
+            }
+          } else {
+            sendMessage({ message: 'person-opt-in', state: 'noop' })
+          }
+          break
+        case 'person-opt-out':
+          if (props.onEvent) {
+            try {
+              await props.onEvent('opted_out')
+              sendMessage({ message: 'person-opt-out', state: 'success' })
+            } catch {
+              sendMessage({ message: 'person-opt-out', state: 'error' })
+            }
+          } else {
+            sendMessage({ message: 'person-opt-out', state: 'noop' })
+          }
+          break
+        case 'set-height':
+          if (data?.height) {
+            iframe.style.height = data.height
+          }
+          break
+      }
+    }
+  }
+
+  window.addEventListener('message', messageListener)
+
+  return () => window.removeEventListener('message', messageListener)
 }

package/out/index.d.ts

@@ -24,5 +24,26 @@ type BNPLProps = {
     lineOfCreditApplicationId?: string;
     onExit?: (id?: string) => Promise<void> | void;
 };
-export declare const openParafinDashboard: (props: BaseProps & (CapitalOrSpendProps | BNPLProps)) => void;
+export declare const openParafinDashboard: (props: BaseProps & (CapitalOrSpendProps | BNPLProps)) => () => void;
+export declare const defaultWidgetStyles: {
+    width: string;
+    height: string;
+    backgroundColor: string;
+    border: string;
+    borderRadius: string;
+    transition: string;
+    boxSizing: "border-box";
+};
+export type WidgetEvent = 'opted_in' | 'opted_out';
+export type WidgetProps = {
+    token: string;
+    product: 'capital' | 'spend_card' | 'cash_account';
+    externalBusinessId?: string;
+    onEvent?: (eventType: WidgetEvent) => Promise<void> | void;
+    onExit?: () => void;
+    openInNewTab?: boolean;
+    onLinkOpened?: (url: string, metadata: LinkOpenedMetadata) => void;
+    inWebView?: boolean;
+};
+export declare const initializeParafinWidget: (iframe: HTMLIFrameElement, props: WidgetProps) => () => void;
 export {};

package/out/index.js

@@ -4,33 +4,41 @@ export 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) {
@@ -69,17 +77,25 @@ export 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) {
@@ -94,9 +110,96 @@ export 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
     }
 };
+export 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',
+};
+export const initializeParafinWidget = (iframe, props) => {
+    // @ts-ignore
+    const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com');
+    const query = {
+        token: props.token,
+        product: props.product,
+        host: window.location.origin,
+        externalBusinessId: props.externalBusinessId ?? '',
+        ...Object.fromEntries(url.searchParams),
+    };
+    const iframeSrc = `${url.origin}?${new URLSearchParams(query).toString()}`;
+    iframe.id = `parafin-${props.product}-widget`;
+    iframe.src = iframeSrc;
+    const sendMessage = (message) => {
+        iframe.contentWindow?.postMessage(message, url.origin);
+    };
+    const messageListener = async ({ data, origin }) => {
+        if (origin === url.origin && data?.product === props.product) {
+            switch (data?.message) {
+                case 'set-border':
+                    if (data?.borderColor) {
+                        iframe.style.border = `1px solid ${data.borderColor}`;
+                    }
+                    if (data?.borderRadius) {
+                        iframe.style.borderRadius = data.borderRadius;
+                    }
+                    break;
+                case 'open-dashboard':
+                    openParafinDashboard({
+                        ...props,
+                        route: data?.route,
+                        onExit: () => {
+                            iframe.src = iframeSrc;
+                            props.onExit?.();
+                        },
+                    });
+                    break;
+                case 'person-opt-in':
+                    if (props.onEvent) {
+                        try {
+                            await props.onEvent('opted_in');
+                            sendMessage({ message: 'person-opt-in', state: 'success' });
+                        }
+                        catch {
+                            sendMessage({ message: 'person-opt-in', state: 'error' });
+                        }
+                    }
+                    else {
+                        sendMessage({ message: 'person-opt-in', state: 'noop' });
+                    }
+                    break;
+                case 'person-opt-out':
+                    if (props.onEvent) {
+                        try {
+                            await props.onEvent('opted_out');
+                            sendMessage({ message: 'person-opt-out', state: 'success' });
+                        }
+                        catch {
+                            sendMessage({ message: 'person-opt-out', state: 'error' });
+                        }
+                    }
+                    else {
+                        sendMessage({ message: 'person-opt-out', state: 'noop' });
+                    }
+                    break;
+                case 'set-height':
+                    if (data?.height) {
+                        iframe.style.height = data.height;
+                    }
+                    break;
+            }
+        }
+    };
+    window.addEventListener('message', messageListener);
+    return () => window.removeEventListener('message', messageListener);
+};

package/package.json

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