@parafin/react 5.1.0 → 6.0.0-alpha.2

package/out/index.d.ts

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

package/out/index.js

@@ -1,12 +1,74 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { openParafinDashboard } from '@parafin/core';
-const ParafinWidget = (props) => {
-    const frameRef = useRef(null);
-    const [frameKey, setFrameKey] = useState(0);
-    const [frameHeight, setFrameHeight] = useState('258px');
-    const [borderColor, setBorderColor] = useState('#E8E8E8');
-    const [borderRadius, setBorderRadius] = useState('16px');
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+
+const openParafinDashboard = (props) => {
+    try {
+        const { origin, searchParams } = new URL(
+        // @ts-ignore
+        props.dashboardUrlOverride ?? 'https://app.parafin.com');
+        const route = 'route' in props ? props.route : '/';
+        const query = {
+            product: props.product,
+            referrer: 'partner',
+            ...('token' in props && { token: props.token }),
+            ...('externalBusinessId' in props && {
+                externalBusinessId: props.externalBusinessId,
+            }),
+            ...('orderId' in props && { orderId: props.orderId }),
+            ...('orderAmount' in props && {
+                orderAmount: props.orderAmount.toString(),
+            }),
+            ...('additionalQueryParams' in props && props.additionalQueryParams),
+            ...Object.fromEntries(searchParams),
+        };
+        const url = `${origin}${route}?${new URLSearchParams(query).toString()}`;
+        if ('openInNewTab' in props && props.openInNewTab) {
+            window.open(url, '_blank');
+            return;
+        }
+        const existingParafinDashboard = document.getElementById('parafin-dashboard');
+        if (existingParafinDashboard) {
+            document.removeChild(existingParafinDashboard);
+        }
+        const frame = document.createElement('iframe');
+        frame.id = 'parafin-dashboard';
+        frame.style.position = 'fixed';
+        frame.style.top = '0';
+        frame.style.left = '0';
+        frame.style.width = '100%';
+        frame.style.height = '100%';
+        frame.style.border = 'none';
+        frame.style.zIndex = '2147483647';
+        frame.style.backgroundColor = '#fff';
+        frame.style.opacity = '0';
+        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));
+                }
+                else {
+                    props.onExit?.();
+                }
+                window.removeEventListener('message', closeParafinDashboard);
+                frame.style.opacity = '0';
+                setTimeout(() => document.body.removeChild(frame), 200);
+            }
+        };
+        window.addEventListener('message', closeParafinDashboard);
+        document.body.appendChild(frame);
+        setTimeout(() => (frame.style.opacity = '1'), 1);
+    }
+    catch (error) {
+        console.error('Error loading Parafin dashboard', error);
+    }
+};
+
+const initializeWidget = (iframe, props) => {
+    // @ts-ignore
     const url = new URL(props.widgetUrlOverride ?? 'https://widget.parafin.com');
     const query = {
         token: props.token,
@@ -16,21 +78,29 @@ const ParafinWidget = (props) => {
         externalBusinessId: props.externalBusinessId ?? '',
         ...Object.fromEntries(url.searchParams),
     };
+    iframe.id = `parafin-${props.product}-widget`;
+    iframe.src = `${url.origin}?${new URLSearchParams(query).toString()}`;
+    const resetIframe = () => {
+        iframe.src = `${url.origin}?${new URLSearchParams(query).toString()}`;
+    };
+    // Message handler
     const messageListener = async ({ data, origin }) => {
         if (origin === url.origin && data?.product === props.product) {
             switch (data?.message) {
                 case 'set-border':
-                    if (data?.borderColor)
-                        setBorderColor(data.borderColor);
-                    if (data?.borderRadius)
-                        setBorderRadius(data.borderRadius);
+                    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: () => {
-                            setFrameKey((key) => key + 1);
+                            resetIframe();
                             props.onExit?.();
                         },
                     });
@@ -38,28 +108,39 @@ const ParafinWidget = (props) => {
                 case 'opt-in':
                     if (props.onOptIn) {
                         const optInFields = await props.onOptIn();
-                        frameRef?.current?.contentWindow?.postMessage({ message: 'opt-in', optInFields: optInFields }, url.origin);
+                        iframe.contentWindow?.postMessage({ message: 'opt-in', optInFields }, url.origin);
                     }
                     break;
                 case 'set-height':
-                    if (data?.height)
-                        setFrameHeight(data.height);
+                    if (data?.height) {
+                        iframe.style.height = data.height;
+                    }
                     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(() => {
-        window.addEventListener('message', messageListener);
-        return () => window.removeEventListener('message', messageListener);
-    }, []);
-    return (_jsx("iframe", { ref: frameRef, id: `parafin-${props.product}-widget`, src: `${url.origin}?${new URLSearchParams(query).toString()}`, style: {
-            width: '100%',
-            height: frameHeight,
-            backgroundColor: '#fff',
-            border: `1px solid ${borderColor}`,
-            borderRadius: borderRadius,
-            transition: 'border 0.2s, border-radius 0.2s',
-            boxSizing: 'border-box',
-        } }, frameKey));
+        if (frameRef.current) {
+            const cleanup = initializeWidget(frameRef.current, props);
+            return cleanup;
+        }
+    }, [props]);
+    return jsx("iframe", { ref: frameRef, style: defaultWidgetStyles });
 };
+
 export { ParafinWidget };

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@parafin/react",
-  "version": "5.1.0",
+  "version": "6.0.0-alpha.2",
   "description": "Parafin React widget",
   "author": "Parafin (https://www.parafin.com)",
   "module": "out/index.js",
   "types": "out/index.d.ts",
+  "type": "module",
   "license": "MIT",
+  "files": [
+    "out"
+  ],
   "scripts": {
-    "build": "tsc"
+    "build": "npx rollup -c",
+    "dev": "npx rollup -c -w",
+    "prepublishOnly": "yarn build"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -17,6 +23,6 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@parafin/core": "^1.0.12"
+    "@parafin/widget": "*"
   }
 }

package/index.tsx

@@ -1,194 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { openParafinDashboard } from '@parafin/core'
-
-const ParafinWidget = (
-  props: {
-    token: string
-    product: 'capital' | 'spend'
-    externalBusinessId?: string
-    onExit?: () => void
-    onOptIn?: () => Promise<OptInFields>
-    openInNewTab?: boolean
-  } & Record<string, any>
-) => {
-  const frameRef = useRef<HTMLIFrameElement>(null)
-  const [frameKey, setFrameKey] = useState(0)
-  const [frameHeight, setFrameHeight] = useState('258px')
-  const [borderColor, setBorderColor] = useState('#E8E8E8')
-  const [borderRadius, setBorderRadius] = useState('16px')
-
-  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),
-  }
-
-  const messageListener = async ({ data, origin }: MessageEvent) => {
-    if (origin === url.origin && data?.product === props.product) {
-      switch (data?.message) {
-        case 'set-border':
-          if (data?.borderColor) setBorderColor(data.borderColor)
-          if (data?.borderRadius) setBorderRadius(data.borderRadius)
-          break
-        case 'open-dashboard':
-          openParafinDashboard({
-            ...props,
-            route: data?.route,
-            onExit: () => {
-              setFrameKey((key) => key + 1)
-              props.onExit?.()
-            },
-          })
-          break
-        case 'opt-in':
-          if (props.onOptIn) {
-            const optInFields = await props.onOptIn()
-            frameRef?.current?.contentWindow?.postMessage(
-              { message: 'opt-in', optInFields: optInFields },
-              url.origin
-            )
-          }
-          break
-        case 'set-height':
-          if (data?.height) setFrameHeight(data.height)
-          break
-      }
-    }
-  }
-
-  useEffect(() => {
-    window.addEventListener('message', messageListener)
-    return () => window.removeEventListener('message', messageListener)
-  }, [])
-
-  return (
-    <iframe
-      key={frameKey}
-      ref={frameRef}
-      id={`parafin-${props.product}-widget`}
-      src={`${url.origin}?${new URLSearchParams(query).toString()}`}
-      style={{
-        width: '100%',
-        height: frameHeight,
-        backgroundColor: '#fff',
-        border: `1px solid ${borderColor}`,
-        borderRadius: borderRadius,
-        transition: 'border 0.2s, border-radius 0.2s',
-        boxSizing: 'border-box',
-      }}
-    />
-  )
-}
-
-export { OptInFields, ParafinWidget }
-
-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'
-}
-
-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/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "declaration": true,
-    "outDir": "./out",
-    "declarationDir": "./out"
-  },
-  "include": ["./index.tsx"]
-}