@parafin/react 6.0.0-alpha.1 → 6.0.0-alpha.3

package/out/index.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,146 @@
+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,
+        product: props.product,
+        hasOptIn: props.onOptIn ? 'true' : 'false',
+        host: window.location.origin,
+        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) {
+                        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: () => {
+                            resetIframe();
+                            props.onExit?.();
+                        },
+                    });
+                    break;
+                case 'opt-in':
+                    if (props.onOptIn) {
+                        const optInFields = await props.onOptIn();
+                        iframe.contentWindow?.postMessage({ message: 'opt-in', optInFields }, url.origin);
+                    }
+                    break;
+                case 'set-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(() => {
+        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,24 +1,27 @@
 {
   "name": "@parafin/react",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.3",
   "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": "npx rollup -c",
-    "dev": "npx rollup -c -w"
+    "dev": "npx rollup -c -w",
+    "prepublishOnly": "yarn build"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
     "@types/react": ">=16.8.0",
-    "typescript": "^4.9.5"
-  },
-  "dependencies": {
+    "typescript": "^4.9.5",
     "@parafin/widget": "*"
-  }
+  },
+  "dependencies": {}
 }

package/index.tsx

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from 'react'
-import {
-  initializeWidget,
-  defaultWidgetStyles,
-  WidgetProps,
-  OptInFields,
-} from '@parafin/widget'
-
-const ParafinWidget = (props: WidgetProps) => {
-  const frameRef = useRef<HTMLIFrameElement>(null)
-
-  useEffect(() => {
-    if (frameRef.current) {
-      const cleanup = initializeWidget(frameRef.current, props)
-      return cleanup
-    }
-  }, [props])
-
-  return <iframe ref={frameRef} style={defaultWidgetStyles} />
-}
-
-export { ParafinWidget }
-export type { OptInFields }

package/rollup.config.js

@@ -1,34 +0,0 @@
-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

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