@tryfinch/react-connect 3.1.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.1.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

@@ -23,7 +23,7 @@ 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;