@parafin/core 2.3.1 → 3.0.0

package/index.ts

@@ -158,3 +158,107 @@ export const openParafinDashboard = (
     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

@@ -25,4 +25,25 @@ type BNPLProps = {
     onExit?: (id?: string) => Promise<void> | 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

@@ -118,3 +118,88 @@ export const openParafinDashboard = (props) => {
         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.1",
+  "version": "3.0.0",
   "description": "Parafin embedded core",
   "author": "Parafin (https://www.parafin.com)",
   "module": "out/index.js",