@tryfinch/react-connect 3.1.0 → 3.3.0

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,13 +1,17 @@
 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>',
@@ -19,14 +23,31 @@ const App = () => {
     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.1.0",
+  "version": "3.3.0",
   "description": "Finch SDK for embedding Finch Connect in API React Single Page Applications (SPA)",
   "keywords": [
     "finch",

package/src/index.ts

@@ -19,11 +19,19 @@ export type ConnectOptions = {
   onClose: () => void;
   payrollProvider: string | null;
   products: string[];
-  sandbox: boolean;
+  sandbox:
+    | 'provider' /** This is to enable the new Provider Sandbox */
+    /**
+     * The old sandbox flag retained for backwards compatibility.
+     * It's defaults to the Provider Sandbox
+     */
+    | boolean;
   zIndex: number;
 };
 
-type OpenFn = (overrides?: Partial<Pick<ConnectOptions, 'products'>>) => void;
+type OpenFn = (
+  overrides?: Partial<Pick<ConnectOptions, 'products' | 'state' | 'payrollProvider'>>
+) => void;
 
 const POST_MESSAGE_NAME = 'finch-auth-message' as const;
 
@@ -95,16 +103,26 @@ const DEFAULT_OPTIONS: Omit<ConnectOptions, 'clientId'> = {
   zIndex: 999,
 };
 
+let isUseFinchConnectInitialized = false;
+
 export const useFinchConnect = (options: Partial<ConnectOptions>): { open: OpenFn } => {
   if (!options.clientId) throw new Error('must specify clientId in options for useFinchConnect');
 
+  if (isUseFinchConnectInitialized) {
+    console.error(
+      'One useFinchConnect hook has already been registered. Please ensure to only call useFinchConnect once to avoid your event callbacks getting called more than once. You can pass in override options to the open function if you so require.'
+    );
+  } else {
+    isUseFinchConnectInitialized = true;
+  }
+
   const combinedOptions: ConnectOptions = {
     clientId: '',
     ...DEFAULT_OPTIONS,
     ...options,
   };
 
-  const open: OpenFn = (overrides?: Partial<Pick<ConnectOptions, 'products'>>) => {
+  const open: OpenFn = (overrides) => {
     const openOptions: ConnectOptions = {
       ...combinedOptions,
       ...overrides,
@@ -168,7 +186,10 @@ export const useFinchConnect = (options: Partial<ConnectOptions>): { open: OpenF
     }
 
     window.addEventListener('message', handleFinchAuth);
-    return () => window.removeEventListener('message', handleFinchAuth);
+    return () => {
+      window.removeEventListener('message', handleFinchAuth);
+      isUseFinchConnectInitialized = false;
+    };
   }, [combinedOptions.onClose, combinedOptions.onError, combinedOptions.onSuccess]);
 
   return {