From 86968510ef7155247698f0512a9099ada6c03019 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Wed, 4 Sep 2024 12:49:40 -0600
Subject: [PATCH 01/10] feat: fix multiple Workbook onSubmit bug

---
 packages/react/src/components/Workbook.tsx | 31 +++++++++++++++-------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Workbook.tsx b/packages/react/src/components/Workbook.tsx
index 821e32b1..b1ee6c9c 100644
--- a/packages/react/src/components/Workbook.tsx
+++ b/packages/react/src/components/Workbook.tsx
@@ -72,16 +72,29 @@ export const Workbook = (props: WorkbookProps) => {
   // Accept a workbook onSubmit function and add it to the workbook actions
 
   useDeepCompareEffect(() => {
-    // adds workbook action if onSubmit is passed along
-    updateWorkbook(
-      onSubmit
-        ? {
-            ...config,
-            actions: [workbookOnSubmitAction(), ...(config?.actions || [])],
-          }
-        : config
+    const submitAction = workbookOnSubmitAction()
+    const existingActions = createSpace.workbook?.actions || []
+    const hasSubmitAction = existingActions.some(
+      (action: Flatfile.Action) => action.operation === submitAction.operation
     )
-  }, [config])
+
+    let updatedActions = existingActions
+
+    if (onSubmit) {
+      if (hasSubmitAction) {
+        updatedActions = existingActions.map((action: Flatfile.Action) =>
+          action.operation === submitAction.operation ? submitAction : action
+        )
+      } else {
+        updatedActions = [submitAction, ...existingActions]
+      }
+    }
+
+    updateWorkbook({
+      ...config,
+      actions: updatedActions,
+    })
+  }, [config, onSubmit, createSpace.workbook?.actions])
 
   usePlugin(
     (client) => {

From 0b1febd4341b8370973e5788006c6773aaccf339 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Wed, 4 Sep 2024 12:51:03 -0600
Subject: [PATCH 02/10] chore: changeset and .gitignore

---
 .changeset/tall-dolphins-laugh.md | 5 +++++
 .gitignore                        | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-dolphins-laugh.md

diff --git a/.changeset/tall-dolphins-laugh.md b/.changeset/tall-dolphins-laugh.md
new file mode 100644
index 00000000..27e94e2f
--- /dev/null
+++ b/.changeset/tall-dolphins-laugh.md
@@ -0,0 +1,5 @@
+---
+'@flatfile/react': patch
+---
+
+Fix bug with Workbook onSubmit
diff --git a/.gitignore b/.gitignore
index 2d8273bb..5f347843 100644
--- a/.gitignore
+++ b/.gitignore
@@ -135,4 +135,5 @@ dist
 .flatfile
 .flatfilerc.json
 
-*.code-workspace
\ No newline at end of file
+*.code-workspace
+.aider*

From b633d3b6c6ace5f6efedda55b72c84802d2cc3b1 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Wed, 4 Sep 2024 13:31:34 -0600
Subject: [PATCH 03/10] feat: simplify logic

---
 packages/react/src/components/Workbook.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Workbook.tsx b/packages/react/src/components/Workbook.tsx
index b1ee6c9c..59b747a1 100644
--- a/packages/react/src/components/Workbook.tsx
+++ b/packages/react/src/components/Workbook.tsx
@@ -80,21 +80,19 @@ export const Workbook = (props: WorkbookProps) => {
 
     let updatedActions = existingActions
 
-    if (onSubmit) {
-      if (hasSubmitAction) {
-        updatedActions = existingActions.map((action: Flatfile.Action) =>
-          action.operation === submitAction.operation ? submitAction : action
-        )
-      } else {
-        updatedActions = [submitAction, ...existingActions]
-      }
+    if (hasSubmitAction) {
+      updatedActions = existingActions.map((action: Flatfile.Action) =>
+        action.operation === submitAction.operation ? submitAction : action
+      )
+    } else if (onSubmit) {
+      updatedActions = [submitAction, ...existingActions]
     }
 
     updateWorkbook({
       ...config,
       actions: updatedActions,
     })
-  }, [config, onSubmit, createSpace.workbook?.actions])
+  }, [config])
 
   usePlugin(
     (client) => {

From 22b9fa52cbadd2a5ed86df8c5a7a33714b5db470 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Fri, 13 Sep 2024 13:46:31 -0600
Subject: [PATCH 04/10] feat: stop sending empty actions array

---
 packages/react/src/components/Workbook.tsx              | 2 +-
 packages/react/src/components/_tests_/Workbook.spec.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Workbook.tsx b/packages/react/src/components/Workbook.tsx
index 59b747a1..c6df82e0 100644
--- a/packages/react/src/components/Workbook.tsx
+++ b/packages/react/src/components/Workbook.tsx
@@ -90,7 +90,7 @@ export const Workbook = (props: WorkbookProps) => {
 
     updateWorkbook({
       ...config,
-      actions: updatedActions,
+      actions: updatedActions.length > 0 ? updatedActions : undefined,
     })
   }, [config])
 
diff --git a/packages/react/src/components/_tests_/Workbook.spec.tsx b/packages/react/src/components/_tests_/Workbook.spec.tsx
index 80cbdb03..ec16a817 100644
--- a/packages/react/src/components/_tests_/Workbook.spec.tsx
+++ b/packages/react/src/components/_tests_/Workbook.spec.tsx
@@ -39,6 +39,7 @@ const mockCreateSpace = {
 
 const mockConfig: Flatfile.CreateWorkbookConfig = {
   name: 'Test Workbook',
+  // actions: [],
   sheets: [
     {
       name: 'Test Sheet',

From 7d095799e1fe1b3a84b4a82c1340a22b3ebd726b Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Fri, 13 Sep 2024 14:12:18 -0600
Subject: [PATCH 05/10] chore: remove comment

---
 packages/react/src/components/_tests_/Workbook.spec.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/_tests_/Workbook.spec.tsx b/packages/react/src/components/_tests_/Workbook.spec.tsx
index ec16a817..80cbdb03 100644
--- a/packages/react/src/components/_tests_/Workbook.spec.tsx
+++ b/packages/react/src/components/_tests_/Workbook.spec.tsx
@@ -39,7 +39,6 @@ const mockCreateSpace = {
 
 const mockConfig: Flatfile.CreateWorkbookConfig = {
   name: 'Test Workbook',
-  // actions: [],
   sheets: [
     {
       name: 'Test Sheet',

From 4e46f230c8c32874b1d54f4bb950b0ef496a3863 Mon Sep 17 00:00:00 2001
From: "Alex Rock (aider)" <hi@lxrck.com>
Date: Mon, 16 Sep 2024 11:17:39 -0600
Subject: [PATCH 06/10] feat: add reuse-space-example

---
 .../ReusableSpaceExample.tsx                  | 43 +++++++++++++++++++
 apps/react/app/reuse-space-example/index.tsx  |  3 ++
 2 files changed, 46 insertions(+)
 create mode 100644 apps/react/app/reuse-space-example/ReusableSpaceExample.tsx
 create mode 100644 apps/react/app/reuse-space-example/index.tsx

diff --git a/apps/react/app/reuse-space-example/ReusableSpaceExample.tsx b/apps/react/app/reuse-space-example/ReusableSpaceExample.tsx
new file mode 100644
index 00000000..2436e771
--- /dev/null
+++ b/apps/react/app/reuse-space-example/ReusableSpaceExample.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import { useSpace } from '@flatfile/react'
+
+const ReusableSpaceExample: React.FC = () => {
+  const [spaceId, setSpaceId] = useState<string | null>(null)
+  const { space, loading, error } = useSpace({
+    name: 'Reusable Space Example',
+    publishableKey: 'YOUR_PUBLISHABLE_KEY',
+    environmentId: 'YOUR_ENVIRONMENT_ID',
+    spaceId: spaceId,
+  })
+
+  const handleCreateSpace = async () => {
+    if (space) {
+      const newSpace = await space.create()
+      setSpaceId(newSpace.id)
+    }
+  }
+
+  const handleOpenSpace = () => {
+    if (space) {
+      space.open()
+    }
+  }
+
+  if (loading) return <div>Loading...</div>
+  if (error) return <div>Error: {error.message}</div>
+
+  return (
+    <div>
+      <h1>Reusable Space Example</h1>
+      <button onClick={handleCreateSpace} disabled={!!spaceId}>
+        Create Space
+      </button>
+      <button onClick={handleOpenSpace} disabled={!spaceId}>
+        Open Space
+      </button>
+      {spaceId && <p>Space ID: {spaceId}</p>}
+    </div>
+  )
+}
+
+export default ReusableSpaceExample
diff --git a/apps/react/app/reuse-space-example/index.tsx b/apps/react/app/reuse-space-example/index.tsx
new file mode 100644
index 00000000..d5d124d8
--- /dev/null
+++ b/apps/react/app/reuse-space-example/index.tsx
@@ -0,0 +1,3 @@
+import ReusableSpaceExample from './ReusableSpaceExample'
+
+export default ReusableSpaceExample

From 25e1d34d14738acde0aafca4bb6d76ddd4024dd7 Mon Sep 17 00:00:00 2001
From: "Alex Rock (aider)" <hi@lxrck.com>
Date: Mon, 16 Sep 2024 11:17:51 -0600
Subject: [PATCH 07/10] feat: Add script to run reuse-space example

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 97eb32d0..1b154eac 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "format": "prettier --ignore-path .gitignore --write \"**/*.{js,jsx,ts,tsx,md}\"",
     "changeset": "changeset",
     "changeset-apply": "changeset version",
-    "release": "turbo run build && changeset publish"
+    "release": "turbo run build && changeset publish",
+    "example:reuse-space": "cd apps/react/app && npm run dev"
   },
   "devDependencies": {
     "@changesets/cli": "^2.23.0",

From 30b5c844c06be5b5a357c64c01c8d87105916be2 Mon Sep 17 00:00:00 2001
From: "Alex Rock (aider)" <hi@lxrck.com>
Date: Mon, 16 Sep 2024 11:18:59 -0600
Subject: [PATCH 08/10] feat: add example:reuse-space script to
 apps/react/app/package.json

---
 apps/react/app/package.json | 23 +++++++++++++++++++++++
 package.json                |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 apps/react/app/package.json

diff --git a/apps/react/app/package.json b/apps/react/app/package.json
new file mode 100644
index 00000000..a80d9523
--- /dev/null
+++ b/apps/react/app/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "react-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "example:reuse-space": "next dev"
+  },
+  "dependencies": {
+    "@flatfile/react": "^7.3.1",
+    "next": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "typescript": "^4.8.4"
+  }
+}
diff --git a/package.json b/package.json
index 1b154eac..68ec96e2 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "changeset": "changeset",
     "changeset-apply": "changeset version",
     "release": "turbo run build && changeset publish",
-    "example:reuse-space": "cd apps/react/app && npm run dev"
+    "example:reuse-space": "npm run example:reuse-space -w apps/react/app"
   },
   "devDependencies": {
     "@changesets/cli": "^2.23.0",

From fff1d5c44e12f21fce2a83db3a5537fd1113b7c8 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Mon, 16 Sep 2024 18:05:39 -0600
Subject: [PATCH 09/10] feat: simplify update workbook onSubmit action

---
 packages/react/src/components/Workbook.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/Workbook.tsx b/packages/react/src/components/Workbook.tsx
index c6df82e0..c393929a 100644
--- a/packages/react/src/components/Workbook.tsx
+++ b/packages/react/src/components/Workbook.tsx
@@ -74,18 +74,11 @@ export const Workbook = (props: WorkbookProps) => {
   useDeepCompareEffect(() => {
     const submitAction = workbookOnSubmitAction()
     const existingActions = createSpace.workbook?.actions || []
-    const hasSubmitAction = existingActions.some(
-      (action: Flatfile.Action) => action.operation === submitAction.operation
-    )
+    
+    let updatedActions = [...existingActions, ...(config?.actions || [])]
 
-    let updatedActions = existingActions
-
-    if (hasSubmitAction) {
-      updatedActions = existingActions.map((action: Flatfile.Action) =>
-        action.operation === submitAction.operation ? submitAction : action
-      )
-    } else if (onSubmit) {
-      updatedActions = [submitAction, ...existingActions]
+    if (!updatedActions.some(action => action.operation === submitAction.operation) && onSubmit) {
+      updatedActions = [submitAction, ...updatedActions]
     }
 
     updateWorkbook({

From 3ea96cbffe2b4206ef1646c9287ea8867deada9a Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Mon, 16 Sep 2024 18:32:32 -0600
Subject: [PATCH 10/10] feat: first pass at adding configuration options to the
 onSubmit handler

---
 apps/react/app/App.tsx                        |  9 ++++--
 .../react/src/components/FlatfileProvider.tsx |  5 +++-
 packages/react/src/components/Sheet.tsx       | 30 +++++++++++++------
 packages/react/src/components/Workbook.tsx    | 24 ++++++++++++---
 packages/react/src/utils/constants.ts         | 18 +++++++++--
 5 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/apps/react/app/App.tsx b/apps/react/app/App.tsx
index f1ec1bfb..bec1e0ab 100644
--- a/apps/react/app/App.tsx
+++ b/apps/react/app/App.tsx
@@ -132,8 +132,13 @@ const App = () => {
               record.set('email', 'SHEET 3 RECORDHOOK')
               return record
             }}
-            onSubmit={async (sheet) => {
-              console.log('onSubmit from Sheet 3', { sheet })
+            onSubmit={{
+              handler: async (sheet) => {
+                console.log('onSubmit from Sheet 3', { sheet })
+              },
+              config: {
+                label: 'Sheet 3 Submit',
+              },
             }}
           />
           <Sheet
diff --git a/packages/react/src/components/FlatfileProvider.tsx b/packages/react/src/components/FlatfileProvider.tsx
index de45e589..d176ae51 100644
--- a/packages/react/src/components/FlatfileProvider.tsx
+++ b/packages/react/src/components/FlatfileProvider.tsx
@@ -52,6 +52,7 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
   const [internalAccessToken, setInternalAccessToken] = useState<
     string | undefined | null
   >(accessToken)
+
   const [listener, setListener] = useState(new FlatfileListener())
   const [open, setOpen] = useState<boolean>(false)
   const [sessionSpace, setSessionSpace] = useState<
@@ -166,7 +167,9 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
         defaultPage.current = undefined
       }
 
-      const sheetWorkbookAction = workbookOnSubmitAction(sheetToRemove.slug)
+      const sheetWorkbookAction = workbookOnSubmitAction({
+        sheetSlug: sheetToRemove.slug,
+      })
 
       const updatedWorkbookActions = prevSpace.workbook?.actions?.filter(
         (action) => action.operation !== sheetWorkbookAction.operation
diff --git a/packages/react/src/components/Sheet.tsx b/packages/react/src/components/Sheet.tsx
index 2967b4fb..e81dea9b 100644
--- a/packages/react/src/components/Sheet.tsx
+++ b/packages/react/src/components/Sheet.tsx
@@ -10,10 +10,11 @@ import { useEvent, usePlugin } from '../hooks'
 import { OnSubmitAction, workbookOnSubmitAction } from '../utils/constants'
 import { useDeepCompareEffect } from '../utils/useDeepCompareEffect'
 import FlatfileContext from './FlatfileContext'
+import { OnSubmitActionWithConfig } from './Workbook'
 
 type SheetProps = {
   config: Flatfile.SheetConfig
-  onSubmit?: SimpleOnboarding['onSubmit']
+  onSubmit?: SimpleOnboarding['onSubmit'] | OnSubmitActionWithConfig
   submitSettings?: SimpleOnboarding['submitSettings']
   onRecordHook?: SimpleOnboarding['onRecordHook']
   defaultPage?: boolean
@@ -68,16 +69,20 @@ export const Sheet: React.FC<SheetProps> = (props: SheetProps) => {
   const { addSheet, updateWorkbook, createSpace, setDefaultPage, removeSheet } =
     useContext(FlatfileContext)
   const sheetRef = useRef<Flatfile.SheetConfig>()
-  
+
   useDeepCompareEffect(() => {
     const updateSheetConfig = () => {
       sheetRef.current = config
-      if (onSubmit && !createSpace.workbook?.actions?.some(
-        (action: Flatfile.Action) =>
-          action.operation === workbookOnSubmitAction(config.slug).operation
-      )) {
+      if (
+        onSubmit &&
+        !createSpace.workbook?.actions?.some(
+          (action: Flatfile.Action) =>
+            action.operation ===
+            workbookOnSubmitAction({ sheetSlug: config.slug, config: 'config' in onSubmit ? onSubmit.config : undefined  }).operation
+        )
+      ) {
         updateWorkbook({
-          actions: [workbookOnSubmitAction(config.slug)],
+          actions: [workbookOnSubmitAction({ sheetSlug: config.slug, config: 'config' in onSubmit ? onSubmit.config : undefined  })],
         })
       }
       addSheet(config)
@@ -90,7 +95,10 @@ export const Sheet: React.FC<SheetProps> = (props: SheetProps) => {
       }
     }
 
-    if (!sheetRef.current || (sheetRef.current.slug && sheetRef.current.slug !== config.slug)) {
+    if (
+      !sheetRef.current ||
+      (sheetRef.current.slug && sheetRef.current.slug !== config.slug)
+    ) {
       if (sheetRef.current?.slug) {
         removeSheet(sheetRef.current.slug)
       }
@@ -120,7 +128,11 @@ export const Sheet: React.FC<SheetProps> = (props: SheetProps) => {
 
   useEvent(
     'job:ready',
-    { job: `workbook:${workbookOnSubmitAction(config.slug).operation}` },
+    {
+      job: `workbook:${
+        workbookOnSubmitAction({ sheetSlug: config.slug }).operation
+      }`,
+    },
     onSubmit
       ? OnSubmitAction(onSubmit, {
           ...DefaultSubmitSettings,
diff --git a/packages/react/src/components/Workbook.tsx b/packages/react/src/components/Workbook.tsx
index c393929a..8c949325 100644
--- a/packages/react/src/components/Workbook.tsx
+++ b/packages/react/src/components/Workbook.tsx
@@ -21,9 +21,14 @@ type HookConfig<T> = [string, onRecordHook<T>] | [onRecordHook<T>]
 
 export type onRecordHooks<T> = HookConfig<T>[]
 
+export type OnSubmitActionWithConfig = {
+  handler: SimpleOnboarding['onSubmit']
+  config: Partial<Flatfile.Action>
+}
+
 type WorkbookProps = Partial<{
   config: Flatfile.CreateWorkbookConfig
-  onSubmit: SimpleOnboarding['onSubmit']
+  onSubmit: SimpleOnboarding['onSubmit'] | OnSubmitActionWithConfig
   submitSettings: SimpleOnboarding['submitSettings']
   onRecordHooks: onRecordHooks<FlatfileRecord<TRecordDataWithLinks<TPrimitive>>>
   children: React.ReactNode
@@ -74,10 +79,15 @@ export const Workbook = (props: WorkbookProps) => {
   useDeepCompareEffect(() => {
     const submitAction = workbookOnSubmitAction()
     const existingActions = createSpace.workbook?.actions || []
-    
+
     let updatedActions = [...existingActions, ...(config?.actions || [])]
 
-    if (!updatedActions.some(action => action.operation === submitAction.operation) && onSubmit) {
+    if (
+      !updatedActions.some(
+        (action) => action.operation === submitAction.operation
+      ) &&
+      onSubmit
+    ) {
       updatedActions = [submitAction, ...updatedActions]
     }
 
@@ -121,7 +131,13 @@ export const Workbook = (props: WorkbookProps) => {
 
   useEvent(
     'job:ready',
-    { job: `workbook:${workbookOnSubmitAction().operation}` },
+    {
+      job: `workbook:${
+        workbookOnSubmitAction(
+          onSubmit && 'config' in onSubmit ? { config: onSubmit.config } : {}
+        ).operation
+      }`,
+    },
     onSubmit
       ? OnSubmitAction(onSubmit, {
           ...DefaultSubmitSettings,
diff --git a/packages/react/src/utils/constants.ts b/packages/react/src/utils/constants.ts
index fce2b643..13924acd 100644
--- a/packages/react/src/utils/constants.ts
+++ b/packages/react/src/utils/constants.ts
@@ -5,8 +5,15 @@ import {
   SimpleOnboarding,
 } from '@flatfile/embedded-utils'
 import { FlatfileEvent } from '@flatfile/listener'
+import { OnSubmitActionWithConfig } from '../components'
 
-export const workbookOnSubmitAction = (sheetSlug?: string): Flatfile.Action => {
+export const workbookOnSubmitAction = ({
+  sheetSlug,
+  config,
+}: {
+  sheetSlug?: string
+  config?: Partial<Flatfile.Action>
+} = {}): Flatfile.Action => {
   const operation = sheetSlug
     ? `sheetSubmitAction-${sheetSlug}`
     : 'workbookSubmitAction'
@@ -16,11 +23,12 @@ export const workbookOnSubmitAction = (sheetSlug?: string): Flatfile.Action => {
     label: 'Submit',
     description: 'Action for handling data inside of onSubmit',
     primary: true,
+    ...config,
   }
 }
 
 export const OnSubmitAction = (
-  onSubmit: SimpleOnboarding['onSubmit'],
+  onSubmit: SimpleOnboarding['onSubmit'] | OnSubmitActionWithConfig,
   onSubmitSettings: SimpleOnboarding['submitSettings']
 ) => {
   return async (event: FlatfileEvent) => {
@@ -41,7 +49,11 @@ export const OnSubmitAction = (
       const sheet = new SheetHandler(workbookSheets[0].id)
 
       if (onSubmit) {
-        await onSubmit({ job, sheet, event })
+        if (typeof onSubmit === 'function') {
+          await onSubmit({ job, sheet, event })
+        } else if (typeof onSubmit.handler === 'function') {
+          await onSubmit.handler({ job, sheet, event })
+        }
       }
 
       await FlatfileAPI.jobs.complete(jobId, {