@tryfinch/react-connect 2.8.1 → 3.1.0

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@tryfinch/react-connect",
-  "version": "2.8.1",
+  "version": "3.1.0",
   "description": "Finch SDK for embedding Finch Connect in API React Single Page Applications (SPA)",
+  "keywords": [
+    "finch",
+    "sdk",
+    "payroll",
+    "react",
+    "oauth"
+  ],
+  "homepage": "https://tryfinch.com/",
   "author": "",
   "license": "MIT",
-  "repository": "Finch-API/react-finch-connect",
+  "repository": "Finch-API/react-connect",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.es.js",
@@ -14,9 +22,8 @@
     "npm": ">=5"
   },
   "scripts": {
-    "test": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
     "build": "rollup -c",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
     "start": "rollup -c -w",
     "prepare": "npm run build",
     "predeploy": "cd example && npm install && npm run build"
@@ -25,54 +32,18 @@
     "react": ">=16.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-proposal-do-expressions": "^7.0.0",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-proposal-function-bind": "^7.0.0",
-    "@babel/plugin-proposal-function-sent": "^7.0.0",
-    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "@testing-library/react-hooks": "^3.2.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^5.2.0",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@types/react": "^16.14.40",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "eslint-plugin-standard": "^3.1.0",
-    "gh-pages": "^2.0.1",
-    "prettier": "^2.0.5",
     "react": "^16.9.0",
-    "react-scripts": "^5.0.1",
-    "react-test-renderer": "^16.9.0",
     "rollup": "^2.75.7",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-dts": "^4.0.1",
-    "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-url": "^2.1.0"
+    "typescript": "^4.9.5"
   }
 }

package/rollup.config.js

@@ -1,49 +1,20 @@
-import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
-import dts from 'rollup-plugin-dts';
 import external from 'rollup-plugin-peer-deps-external';
-import resolve from 'rollup-plugin-node-resolve';
-import url from 'rollup-plugin-url';
 import replace from '@rollup/plugin-replace';
+import typescript from '@rollup/plugin-typescript';
 
 import pkg from './package.json';
 
+const plugins = [external(), replace({ SDK_VERSION: pkg.version }), typescript()];
+
 export default [
   {
-    input: 'src/index.js',
-    output: [
-      {
-        file: pkg.main,
-        format: 'cjs',
-        sourcemap: true,
-      },
-      {
-        file: pkg.module,
-        format: 'es',
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      external(),
-      url({ exclude: ['**/*.svg'] }),
-      babel({
-        exclude: 'node_modules/**',
-      }),
-      resolve(),
-      commonjs(),
-      replace({
-        SDK_VERSION: JSON.stringify(pkg.version), // has to be stringified somehow
-      }),
-    ],
+    input: 'src/index.ts',
+    output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
+    plugins,
   },
   {
-    input: 'src/index.d.ts',
-    output: [
-      {
-        file: pkg.types,
-        format: 'es',
-      },
-    ],
-    plugins: [dts()],
+    input: 'src/index.ts',
+    output: [{ file: pkg.module, format: 'es', sourcemap: true }],
+    plugins,
   },
 ];

package/src/index.ts

@@ -0,0 +1,177 @@
+import { useEffect } from 'react';
+
+export type SuccessEvent = {
+  code: string;
+  state?: string;
+};
+
+export type ErrorEvent = {
+  errorMessage: string;
+};
+
+export type ConnectOptions = {
+  category: string | null;
+  clientId: string;
+  manual: boolean;
+  state: string | null;
+  onSuccess: (e: SuccessEvent) => void;
+  onError: (e: ErrorEvent) => void;
+  onClose: () => void;
+  payrollProvider: string | null;
+  products: string[];
+  sandbox: boolean;
+  zIndex: number;
+};
+
+type OpenFn = (overrides?: Partial<Pick<ConnectOptions, 'products'>>) => void;
+
+const POST_MESSAGE_NAME = 'finch-auth-message' as const;
+
+type FinchConnectAuthMessage = { name: typeof POST_MESSAGE_NAME } & (
+  | {
+      kind: 'closed';
+    }
+  | {
+      kind: 'success';
+      code: string;
+      state?: string;
+    }
+  | {
+      kind: 'error';
+      error: string;
+    }
+);
+
+interface FinchConnectPostMessage {
+  data: FinchConnectAuthMessage;
+  origin: string;
+}
+
+const BASE_FINCH_CONNECT_URI = 'https://connect.tryfinch.com';
+const DEFAULT_FINCH_REDIRECT_URI = 'https://tryfinch.com';
+const FINCH_CONNECT_IFRAME_ID = 'finch-connect-iframe';
+const FINCH_AUTH_MESSAGE_NAME = 'finch-auth-message';
+
+const constructAuthUrl = ({
+  clientId,
+  payrollProvider,
+  category,
+  products,
+  manual,
+  sandbox,
+  state,
+}: Partial<ConnectOptions>) => {
+  const authUrl = new URL(`${BASE_FINCH_CONNECT_URI}/authorize`);
+  if (clientId) authUrl.searchParams.append('client_id', clientId);
+  if (payrollProvider) authUrl.searchParams.append('payroll_provider', payrollProvider);
+  if (category) authUrl.searchParams.append('category', category);
+  authUrl.searchParams.append('products', (products ?? []).join(' '));
+  authUrl.searchParams.append('app_type', 'spa');
+  authUrl.searchParams.append('redirect_uri', DEFAULT_FINCH_REDIRECT_URI);
+  authUrl.searchParams.append('mode', 'employer');
+  if (manual) authUrl.searchParams.append('manual', String(manual));
+  if (sandbox) authUrl.searchParams.append('sandbox', String(sandbox));
+  if (state) authUrl.searchParams.append('state', state);
+  // replace with actual SDK version by rollup
+  authUrl.searchParams.append('sdk_version', 'react-SDK_VERSION');
+
+  return authUrl.href;
+};
+
+const noop = () => {
+  // intentionally empty
+};
+
+const DEFAULT_OPTIONS: Omit<ConnectOptions, 'clientId'> = {
+  category: null,
+  manual: false,
+  onSuccess: noop,
+  onError: noop,
+  onClose: noop,
+  payrollProvider: null,
+  products: [],
+  sandbox: false,
+  state: null,
+  zIndex: 999,
+};
+
+export const useFinchConnect = (options: Partial<ConnectOptions>): { open: OpenFn } => {
+  if (!options.clientId) throw new Error('must specify clientId in options for useFinchConnect');
+
+  const combinedOptions: ConnectOptions = {
+    clientId: '',
+    ...DEFAULT_OPTIONS,
+    ...options,
+  };
+
+  const open: OpenFn = (overrides?: Partial<Pick<ConnectOptions, 'products'>>) => {
+    const openOptions: ConnectOptions = {
+      ...combinedOptions,
+      ...overrides,
+    };
+
+    if (!document.getElementById(FINCH_CONNECT_IFRAME_ID)) {
+      const iframe = document.createElement('iframe');
+      iframe.src = constructAuthUrl(openOptions);
+      iframe.frameBorder = '0';
+      iframe.id = FINCH_CONNECT_IFRAME_ID;
+      iframe.style.position = 'fixed';
+      iframe.style.zIndex = openOptions.zIndex.toString();
+      iframe.style.height = '100%';
+      iframe.style.width = '100%';
+      iframe.style.top = '0';
+      iframe.style.backgroundColor = 'none transparent';
+      iframe.style.border = 'none';
+      document.body.prepend(iframe);
+      document.body.style.overflow = 'hidden';
+    }
+  };
+
+  const close = () => {
+    const frameToRemove = document.getElementById(FINCH_CONNECT_IFRAME_ID);
+    if (frameToRemove) {
+      frameToRemove.parentNode?.removeChild(frameToRemove);
+      document.body.style.overflow = 'inherit';
+    }
+  };
+
+  useEffect(() => {
+    function handleFinchAuth(event: FinchConnectPostMessage) {
+      if (!event.data) return;
+      if (event.data.name !== FINCH_AUTH_MESSAGE_NAME) return;
+      if (!event.origin.startsWith(BASE_FINCH_CONNECT_URI)) return;
+
+      close();
+
+      switch (event.data.kind) {
+        case 'closed':
+          combinedOptions.onClose();
+          break;
+        case 'error':
+          combinedOptions.onError({ errorMessage: event.data.error });
+          break;
+        case 'success':
+          combinedOptions.onSuccess({
+            code: event.data.code,
+            state: event.data.state,
+          });
+          break;
+        default: {
+          // This case should never happen, if it does it should be reported to us
+          combinedOptions.onError({
+            errorMessage: `Report to developers@tryfinch.com: unable to handle window.postMessage for:  ${JSON.stringify(
+              event.data
+            )}`,
+          });
+        }
+      }
+    }
+
+    window.addEventListener('message', handleFinchAuth);
+    return () => window.removeEventListener('message', handleFinchAuth);
+  }, [combinedOptions.onClose, combinedOptions.onError, combinedOptions.onSuccess]);
+
+  return {
+    open,
+  };
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "esnext",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "example/**/*"]
+}

package/.babelrc

@@ -1,9 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", {
-      "modules": false
-    }],
-    "@babel/preset-react"
-  ],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
-}

package/src/index.d.ts

@@ -1,25 +0,0 @@
-declare module 'react-finch-connect' {
-  export type SuccessEvent = {
-    code: string;
-  };
-
-  export type ErrorEvent = {
-    errorMessage: string;
-  };
-
-  export type ConnectOptions = {
-    clientId: string;
-    products?: string[];
-    mode?: string;
-    manual?: boolean;
-    payrollProvider?: string;
-    sandbox?: boolean;
-    category?: string;
-    onSuccess?: (e: SuccessEvent) => void;
-    onError?: (e: ErrorEvent) => void;
-    onClose?: () => void;
-    zIndex?: bigint | string;
-  };
-
-  export function useFinchConnect(opts: ConnectOptions): { open: () => void };
-}

package/src/index.js

@@ -1,97 +0,0 @@
-import { useEffect } from 'react';
-
-const BASE_FINCH_CONNECT_URI = 'https://connect.tryfinch.com';
-const DEFAULT_FINCH_REDIRECT_URI = 'https://tryfinch.com';
-const FINCH_CONNECT_IFRAME_ID = 'finch-connect-iframe';
-const FINCH_AUTH_MESSAGE_NAME = 'finch-auth-message';
-
-const noop = () => {};
-
-// eslint-disable-next-line import/prefer-default-export
-export const useFinchConnect = (options = {}) => {
-  const {
-    clientId,
-    products = [],
-    mode = 'employer',
-    category,
-    manual = false,
-    payrollProvider = null,
-    sandbox = false,
-    onSuccess = noop,
-    onError = noop,
-    onClose = noop,
-    zIndex = 999,
-  } = options;
-
-  const _constructAuthUrl = (clientId, products) => {
-    const authUrl = new URL(`${BASE_FINCH_CONNECT_URI}/authorize`);
-
-    if (clientId) authUrl.searchParams.append('client_id', clientId);
-    if (payrollProvider) authUrl.searchParams.append('payroll_provider', payrollProvider);
-    if (category) authUrl.searchParams.append('category', category);
-    authUrl.searchParams.append('products', products.join(' '));
-    authUrl.searchParams.append('app_type', 'spa');
-    authUrl.searchParams.append('redirect_uri', DEFAULT_FINCH_REDIRECT_URI);
-    authUrl.searchParams.append('mode', mode);
-    if (manual) authUrl.searchParams.append('manual', manual);
-    if (sandbox) authUrl.searchParams.append('sandbox', sandbox);
-    /* global SDK_VERSION */
-    if (SDK_VERSION) authUrl.searchParams.append('sdk_version', `react-${SDK_VERSION}`);
-
-    return authUrl.href;
-  };
-
-  const open = () => {
-    if (document.getElementById(FINCH_CONNECT_IFRAME_ID)) {
-      return null;
-    }
-
-    const iframe = document.createElement('iframe');
-    iframe.src = _constructAuthUrl(clientId, products);
-    iframe.frameBorder = '0';
-    iframe.id = FINCH_CONNECT_IFRAME_ID;
-    iframe.style.position = 'fixed';
-    iframe.style.zIndex = zIndex.toString();
-    iframe.style.height = '100%';
-    iframe.style.width = '100%';
-    iframe.style.top = '0';
-    iframe.style.backgroundColor = 'none transparent';
-    iframe.style.border = 'none';
-    document.body.prepend(iframe);
-    document.body.style.overflow = 'hidden';
-  };
-
-  const close = () => {
-    const frameToRemove = document.getElementById(FINCH_CONNECT_IFRAME_ID);
-    if (frameToRemove) {
-      frameToRemove.parentNode.removeChild(frameToRemove);
-      document.body.style.overflow = 'inherit';
-    }
-  };
-
-  useEffect(() => {
-    function handleFinchAuth(event) {
-      const handleFinchAuthSuccess = (code) => onSuccess({ code });
-      const handleFinchAuthError = (error) => onError({ errorMessage: error });
-      const handleFinchAuthClose = () => onClose();
-
-      if (!event.data) return;
-      if (event.data.name !== FINCH_AUTH_MESSAGE_NAME) return;
-      if (!event.origin.startsWith(BASE_FINCH_CONNECT_URI)) return;
-
-      const { code, error, closed } = event.data;
-
-      close();
-      if (code) handleFinchAuthSuccess(code);
-      else if (error) handleFinchAuthError(error);
-      else if (closed) handleFinchAuthClose();
-    }
-
-    window.addEventListener('message', handleFinchAuth);
-    return () => window.removeEventListener('message', handleFinchAuth);
-  }, [onClose, onError, onSuccess]);
-
-  return {
-    open,
-  };
-};