@tryfinch/react-connect 3.0.0 → 3.1.1

package/example/package.json

@@ -5,11 +5,11 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@tryfinch/react-connect": "file:..",
     "@types/react": "^17.0.37",
     "prop-types": "^15.6.2",
     "react": "file:../node_modules/react",
-    "react-dom": "^16.9.0",
-    "react-finch-connect": "file:.."
+    "react-dom": "^16.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

package/example/src/App.css

@@ -1,14 +1,49 @@
-.App {
+.container {
   text-align: center;
-}
-
-.App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: calc(7px + 2vmin);
+  color: white;
+}
+
+a {
   color: white;
 }
+
+.actions {
+  background-color: #4f4f4f;
+  padding: 1em;
+  border-radius: 10px;
+  margin: 1em 0;
+}
+
+.cta {
+  font-size: calc(7px + 2vmin);
+  padding: .5em;
+}
+
+.row {
+  margin: 2em 0;
+}
+
+.top-label {
+  display: block;
+  margin-bottom: .2em;
+}
+
+input[type=checkbox] {
+  width: 2em;
+  height: 2em;
+}
+
+.results {
+  background-color: #4f4f4f;
+  padding: 1em;
+  border-radius: 10px;
+  text-align: left;
+  margin: 1em 0;
+}

package/example/src/App.tsx

@@ -1,32 +1,53 @@
 import React, { useState } from 'react';
-import { useFinchConnect, SuccessEvent, ErrorEvent } from 'react-finch-connect';
+import { useFinchConnect, SuccessEvent, ErrorEvent } from '@tryfinch/react-connect';
+
+import Result, { ResultContainer } from './Result';
+
 import './App.css';
 
 const App = () => {
-  const [code, setCode] = useState<string>();
+  const [sendState, setSendState] = useState<boolean>(false);
+  const [result, setResult] = useState<ResultContainer>();
 
-  const onSuccess = ({ code }: SuccessEvent) => setCode(code);
-  const onError = ({ errorMessage }: ErrorEvent) => console.error(errorMessage);
-  const onClose = () => console.log('User exited Finch Connect');
+  const onSuccess = (value: SuccessEvent) => setResult({ kind: 'success', value });
+  const onError = (value: ErrorEvent) => setResult({ kind: 'error', value });
+  const onClose = () => setResult({ kind: 'closed' });
 
   const { open } = useFinchConnect({
-    clientId: '<your-client-id>',
+    clientId: 'c90b78c6-2151-4ca3-8fea-ccb708ffc5d9',
     products: ['company', 'directory', 'individual', 'employment'],
-    // sandbox: false,
+    sandbox: true,
     // payrollProvider: '<payroll-provider-id>',
     onSuccess,
     onError,
     onClose,
   });
 
+  const submissionHandler: React.FormEventHandler<HTMLFormElement>  = (e) => {
+    e.preventDefault();
+    open({
+      ...(sendState ? { state: new Date().toISOString() } : undefined),
+    })
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>Code: {code}</p>
-        <button type="button" onClick={() => open()}>
-          Open Finch Connect
-        </button>
-      </header>
+    <div className="container">
+      <h2><a href="https://www.npmjs.com/package/@tryfinch/react-connect">@tryfinch/react-connect</a> Example App</h2>
+      <form className="actions" onSubmit={submissionHandler}>
+        <div className="row">
+          <label className="top-label">Include State:</label>
+          <input type="checkbox" checked={sendState} onChange={() => setSendState(prev => !prev)} />
+        </div>
+        <div className="row">
+          <button className="cta" type="submit">
+            Open Finch Connect
+          </button>
+        </div>
+      </form>
+      <div className="results">
+          { !result && <p>Complete a Finch Connect session and the success event will be displayed here</p> }
+          { result && <Result result={result} /> }
+      </div>
     </div>
   );
 };

package/example/src/Result.tsx

@@ -0,0 +1,26 @@
+import { SuccessEvent, ErrorEvent } from '@tryfinch/react-connect';
+
+export type ResultContainer = {
+  kind: 'success';
+  value: SuccessEvent;
+} | {
+  kind: 'error';
+  value: ErrorEvent; 
+} | {
+  kind: 'closed', 
+};
+
+const Result = ({ result }: { result: ResultContainer }) => {
+  if (result.kind === 'closed') {
+    return <>
+      <p>Closed!</p>
+    </>;
+  }
+
+  return <>
+    <p>{ result.kind === 'error' ? 'Error' : 'Success' }:</p>
+    <pre>{ JSON.stringify(result.value, null, 2) }</pre>
+  </>;
+};
+
+export default Result

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryfinch/react-connect",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "Finch SDK for embedding Finch Connect in API React Single Page Applications (SPA)",
   "keywords": [
     "finch",

package/src/index.ts

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 export type SuccessEvent = {
   code: string;
+  state?: string;
 };
 
 export type ErrorEvent = {
@@ -12,6 +13,7 @@ export type ConnectOptions = {
   category: string | null;
   clientId: string;
   manual: boolean;
+  state: string | null;
   onSuccess: (e: SuccessEvent) => void;
   onError: (e: ErrorEvent) => void;
   onClose: () => void;
@@ -21,15 +23,27 @@ export type ConnectOptions = {
   zIndex: number;
 };
 
-type OpenFn = (overrides?: Partial<Pick<ConnectOptions, 'products'>>) => void;
+type OpenFn = (overrides?: Partial<Pick<ConnectOptions, 'products' | 'state'>>) => 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: {
-    name: string;
-    code?: string;
-    error?: string;
-    closed?: boolean;
-  };
+  data: FinchConnectAuthMessage;
   origin: string;
 }
 
@@ -45,9 +59,9 @@ const constructAuthUrl = ({
   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);
@@ -57,6 +71,7 @@ const constructAuthUrl = ({
   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');
 
@@ -76,6 +91,7 @@ const DEFAULT_OPTIONS: Omit<ConnectOptions, 'clientId'> = {
   payrollProvider: null,
   products: [],
   sandbox: false,
+  state: null,
   zIndex: 999,
 };
 
@@ -121,21 +137,34 @@ export const useFinchConnect = (options: Partial<ConnectOptions>): { open: OpenF
 
   useEffect(() => {
     function handleFinchAuth(event: FinchConnectPostMessage) {
-      const handleFinchAuthSuccess = (code: string) => combinedOptions.onSuccess({ code });
-      const handleFinchAuthError = (error: string) =>
-        combinedOptions.onError({ errorMessage: error });
-      const handleFinchAuthClose = () => combinedOptions.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();
+
+      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);