@parafin/react 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+## @parafin/react
+
+Please refer to the [Parafin docs](https://docs.parafin.com/capital/present-offers/elements/reference) for more details.

package/index.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react'
+import { openParafinDashboard } from '@parafin/core'
+
+export { openParafinDashboard } from '@parafin/core'
+
+export type OptInFields = {
+  businessExternalId: string
+  legalBusinessName: string
+  dbaName?: string
+  ownerFirstName: string
+  ownerLastName: string
+  accountManagers?: {
+    name: string
+    email: string
+  }[]
+  routingNumber?: string
+  accountNumberLastFour: string
+  email: string
+  phoneNumber: string
+  address: {
+    addressLine1: string
+    addressLine2?: string
+    city: string
+    state: string
+    postalCode: string
+    country: string
+  }
+}
+
+export const ParafinWidget = (props: {
+  token: string
+  product: 'capital' | 'banking'
+  externalBusinessId?: string
+  onExit?: () => void
+  onOptIn?: () => Promise<OptInFields>
+  environment?: string
+}) => {
+  try {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const [iframeKey, setIframeKey] = useState(0)
+    const [iframeHeight, setIframeHeight] = useState('200px')
+    const [borderColor, setBorderColor] = useState('#E8E8E8')
+    const [borderRadius, setBorderRadius] = useState('16px')
+
+    const getBaseUrl = () => {
+      switch (props.environment) {
+        case 'local':
+          return 'http://localhost:9090'
+        case 'development':
+          return 'https://widget.dev.parafin.com'
+        default:
+          return 'https://widget.parafin.com'
+      }
+    }
+
+    const baseUrl = getBaseUrl()
+    const token = `?token=${props.token}`
+    const product = `&product=${props.product}`
+    const hasOptIn = `&hasOptIn=${props.onOptIn ? 'true' : 'false'}`
+    const host = `&host=${window.location.origin}`
+    const externalBusinessId = props.externalBusinessId
+      ? `&external_business_id=${props.externalBusinessId}`
+      : ''
+
+    const messageListener = async ({ data, origin }: MessageEvent) => {
+      if (origin === baseUrl) {
+        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: () => {
+                setIframeKey((key) => key + 1)
+                props.onExit?.()
+              },
+            })
+            break
+          case 'opt-in':
+            if (props.onOptIn) {
+              const optInFields = await props.onOptIn()
+              iframeRef?.current?.contentWindow?.postMessage(
+                { message: 'opt-in', optInFields: optInFields },
+                baseUrl
+              )
+            }
+            break
+          case 'set-height':
+            if (data?.height) setIframeHeight(data.height)
+            break
+        }
+      }
+    }
+
+    useEffect(() => {
+      window.addEventListener('message', messageListener)
+      return () => window.removeEventListener('message', messageListener)
+    }, [])
+
+    return (
+      <iframe
+        key={iframeKey}
+        ref={iframeRef}
+        id={`parafin-${product}-widget`}
+        src={`${baseUrl}${token}${product}${hasOptIn}${host}${externalBusinessId}`}
+        style={{
+          width: '100%',
+          height: iframeHeight,
+          backgroundColor: '#fff',
+          border: `1px solid ${borderColor}`,
+          borderRadius: borderRadius,
+          boxSizing: 'border-box',
+        }}
+      />
+    )
+  } catch {
+    console.error('Error loading Parafin widget')
+  }
+}

package/out/index.d.ts

@@ -0,0 +1,32 @@
+export { openParafinDashboard } from '@parafin/core';
+export type OptInFields = {
+    businessExternalId: string;
+    legalBusinessName: string;
+    dbaName?: string;
+    ownerFirstName: string;
+    ownerLastName: string;
+    accountManagers?: {
+        name: string;
+        email: string;
+    }[];
+    routingNumber?: string;
+    accountNumberLastFour: string;
+    email: string;
+    phoneNumber: string;
+    address: {
+        addressLine1: string;
+        addressLine2?: string;
+        city: string;
+        state: string;
+        postalCode: string;
+        country: string;
+    };
+};
+export declare const ParafinWidget: (props: {
+    token: string;
+    product: 'capital' | 'banking';
+    externalBusinessId?: string;
+    onExit?: () => void;
+    onOptIn?: () => Promise<OptInFields>;
+    environment?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/out/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { openParafinDashboard } from '@parafin/core';
+export { openParafinDashboard } from '@parafin/core';
+export const ParafinWidget = (props) => {
+    try {
+        const iframeRef = useRef(null);
+        const [iframeKey, setIframeKey] = useState(0);
+        const [iframeHeight, setIframeHeight] = useState('200px');
+        const [borderColor, setBorderColor] = useState('#E8E8E8');
+        const [borderRadius, setBorderRadius] = useState('16px');
+        const getBaseUrl = () => {
+            switch (props.environment) {
+                case 'local':
+                    return 'http://localhost:9090';
+                case 'development':
+                    return 'https://widget.dev.parafin.com';
+                default:
+                    return 'https://widget.parafin.com';
+            }
+        };
+        const baseUrl = getBaseUrl();
+        const token = `?token=${props.token}`;
+        const product = `&product=${props.product}`;
+        const hasOptIn = `&hasOptIn=${props.onOptIn ? 'true' : 'false'}`;
+        const host = `&host=${window.location.origin}`;
+        const externalBusinessId = props.externalBusinessId
+            ? `&external_business_id=${props.externalBusinessId}`
+            : '';
+        const messageListener = async ({ data, origin }) => {
+            if (origin === baseUrl) {
+                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: () => {
+                                setIframeKey((key) => key + 1);
+                                props.onExit?.();
+                            },
+                        });
+                        break;
+                    case 'opt-in':
+                        if (props.onOptIn) {
+                            const optInFields = await props.onOptIn();
+                            iframeRef?.current?.contentWindow?.postMessage({ message: 'opt-in', optInFields: optInFields }, baseUrl);
+                        }
+                        break;
+                    case 'set-height':
+                        if (data?.height)
+                            setIframeHeight(data.height);
+                        break;
+                }
+            }
+        };
+        useEffect(() => {
+            window.addEventListener('message', messageListener);
+            return () => window.removeEventListener('message', messageListener);
+        }, []);
+        return (_jsx("iframe", { ref: iframeRef, id: `parafin-${product}-widget`, src: `${baseUrl}${token}${product}${hasOptIn}${host}${externalBusinessId}`, style: {
+                width: '100%',
+                height: iframeHeight,
+                backgroundColor: '#fff',
+                border: `1px solid ${borderColor}`,
+                borderRadius: borderRadius,
+                boxSizing: 'border-box',
+            } }, iframeKey));
+    }
+    catch {
+        console.error('Error loading Parafin widget');
+    }
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@parafin/react",
+  "version": "0.0.1",
+  "description": "Parafin React widget",
+  "author": "Parafin (https://www.parafin.com)",
+  "module": "out/index.js",
+  "types": "out/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "typescript": "^4.9.5"
+  },
+  "dependencies": {
+    "@parafin/core": "^1.0.0",
+    "react": "^18.2.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "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"]
+}