@parafin/react 5.1.0 → 6.0.0-alpha.1

package/index.tsx

@@ -1,194 +1,23 @@
-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>
-) => {
+import { useEffect, useRef } from 'react'
+import {
+  initializeWidget,
+  defaultWidgetStyles,
+  WidgetProps,
+  OptInFields,
+} from '@parafin/widget'
+
+const ParafinWidget = (props: WidgetProps) => {
   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'
+    if (frameRef.current) {
+      const cleanup = initializeWidget(frameRef.current, props)
+      return cleanup
+    }
+  }, [props])
 
-type Address = {
-  addressLine1: string
-  addressLine2?: string
-  city: string
-  state: USStates | USTerritories | CanadianProvinces | CanadianTerritories
-  postalCode: string
-  country: 'US' | 'CA'
+  return <iframe ref={frameRef} style={defaultWidgetStyles} />
 }
 
-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 }
+export type { OptInFields }

package/package.json

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

package/rollup.config.js

@@ -0,0 +1,34 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
+  input: './index.tsx',
+  output: [
+    {
+      file: './out/index.js',
+      format: 'esm',
+      sourcemap: false,
+    },
+  ],
+  external: ['react', 'react-dom'],
+  plugins: [
+    peerDepsExternal(),
+    resolve({
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    }),
+    commonjs(),
+    typescript({
+      tsconfig: `${__dirname}/tsconfig.json`,
+      declaration: true,
+      declarationDir: './out',
+      rootDir: './',
+    }),
+  ],
+}

package/tsconfig.json

@@ -9,7 +9,11 @@
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "outDir": "./out",
-    "declarationDir": "./out"
+    "declarationDir": "./out",
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "strict": true
   },
   "include": ["./index.tsx"]
 }

package/out/index.d.ts

@@ -1,49 +0,0 @@
-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';
-    };
-};

package/out/index.js

@@ -1,65 +0,0 @@
-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');
-    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 }) => {
-        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 (_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));
-};
-export { ParafinWidget };