feat: Angular fixes (#86)

* feat: fix build bug, remove environmentId requirement and stop deleting spaces * feat: cleanup * feat: update dependencies
FlatFilers · Apr 12, 2024 · a9c6d6e · a9c6d6e
1 parent d426165
commit a9c6d6e
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 184 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -18,10 +18,10 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
-    "@flatfile/api": "^1.6.7",
-    "@flatfile/embedded-utils": "1.1.14",
-    "@flatfile/listener": "1.0.1",
-    "@flatfile/plugin-record-hook": "1.4.1",
+    "@flatfile/api": "^1.7.11",
+    "@flatfile/embedded-utils": "^1.1.15",
+    "@flatfile/listener": "^1.0.2",
+    "@flatfile/plugin-record-hook": "^1.4.1",
     "rxjs": "~7.8.0",
     "symbol-observable": "^4.0.0",
     "tslib": "^2.3.0",

diff --git a/packages/angular/projects/spaces/package-lock.json b/packages/angular/projects/spaces/package-lock.json
diff --git a/packages/angular/projects/spaces/package.json b/packages/angular/projects/spaces/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flatfile/angular-sdk",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "homepage": "https://flatfile.com/",
   "description": "Angular flatfile sdk",
   "license": "MIT",
@@ -17,7 +17,7 @@
     "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
   },
   "dependencies": {
-    "@flatfile/embedded-utils": "1.1.14",
+    "@flatfile/embedded-utils": "1.1.15",
     "@flatfile/hooks": "^1.3.2",
     "tslib": "^2.3.0"
   },

diff --git a/packages/angular/projects/spaces/src/lib/space/space-frame/spaceFrame.component.ts b/packages/angular/projects/spaces/src/lib/space/space-frame/spaceFrame.component.ts
@@ -1,19 +1,19 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { ISpace, SimpleOnboarding } from "@flatfile/embedded-utils";
-import { Browser, FlatfileEvent } from '@flatfile/listener';
-
-import addSpaceInfo from '../../../utils/addSpaceInfo';
-import authenticate from "../../../utils/authenticate";
-import createSimpleListener from "../../../utils/createSimpleListener";
-import { SpaceCloseModalPropsType } from "../space-close-modal/spaceCloseModal.component";
-import { getContainerStyles, getIframeStyles } from "./embeddedStyles";
-
-export type SpaceFramePropsType = ISpace & { 
-  spaceId: string; 
-  spaceUrl: string; 
-  localAccessToken: string;
-  handleCloseInstance: () => void;
-  closeInstance: boolean;
+import { Component, Input, OnInit } from '@angular/core'
+import { ISpace, SimpleOnboarding } from '@flatfile/embedded-utils'
+import { Browser, FlatfileEvent } from '@flatfile/listener'
+
+import addSpaceInfo from '../../../utils/addSpaceInfo'
+import authenticate from '../../../utils/authenticate'
+import createSimpleListener from '../../../utils/createSimpleListener'
+import { SpaceCloseModalPropsType } from '../space-close-modal/spaceCloseModal.component'
+import { getContainerStyles, getIframeStyles } from './embeddedStyles'
+
+export type SpaceFramePropsType = ISpace & {
+  spaceId: string
+  spaceUrl: string
+  localAccessToken: string
+  handleCloseInstance: () => void
+  closeInstance: boolean
 }
 
 @Component({
@@ -28,21 +28,28 @@ export class SpaceFrame implements OnInit {
     {} as SpaceCloseModalPropsType
   iframeWrapperStyle = {}
   iframeStyle = {}
-  handlePostMessageInstance: ((event: MessageEvent<{ flatfileEvent: FlatfileEvent }>) => void) = () => {}
+  handlePostMessageInstance: (
+    event: MessageEvent<{ flatfileEvent: FlatfileEvent }>
+  ) => void = () => {}
 
-  @Input({required: true}) spaceFrameProps: SpaceFramePropsType  = {} as SpaceFramePropsType
-  @Input({required: true}) loading: boolean = false
+  @Input({ required: true }) spaceFrameProps: SpaceFramePropsType =
+    {} as SpaceFramePropsType
+  @Input({ required: true }) loading: boolean = false
 
   async created() {
-    const { listener, apiUrl, closeSpace, workbook } = this.spaceFrameProps;
+    const { listener, apiUrl, closeSpace, workbook } = this.spaceFrameProps
     const accessToken = this.spaceFrameProps.localAccessToken
 
     const simpleListenerSlug = workbook?.sheets?.[0].slug || 'slug'
-    const listenerInstance = listener || createSimpleListener({
-      onRecordHook: (this.spaceFrameProps as SimpleOnboarding).onRecordHook,
-      onSubmit: (this.spaceFrameProps as SimpleOnboarding).onSubmit,
-      slug: simpleListenerSlug,
-    })
+    const listenerInstance =
+      listener ||
+      createSimpleListener({
+        onRecordHook: (this.spaceFrameProps as SimpleOnboarding).onRecordHook,
+        onSubmit: (this.spaceFrameProps as SimpleOnboarding).onSubmit,
+        submitSettings: (this.spaceFrameProps as SimpleOnboarding)
+          .submitSettings,
+        slug: simpleListenerSlug,
+      })
 
     if (listenerInstance && typeof apiUrl === 'string') {
       listenerInstance.mount(
@@ -57,13 +64,15 @@ export class SpaceFrame implements OnInit {
     const dispatchEvent = (event: any) => {
       if (!event) return
 
-      const eventPayload = event.src ? event.src : event
+      const eventPayload = event.src || event
       const eventInstance = new FlatfileEvent(eventPayload, accessToken, apiUrl)
 
       return listenerInstance?.dispatchEvent(eventInstance)
     }
 
-    const handlePostMessage = (event: MessageEvent<{ flatfileEvent:FlatfileEvent }>) => {
+    const handlePostMessage = (
+      event: MessageEvent<{ flatfileEvent: FlatfileEvent }>
+    ) => {
       const { flatfileEvent } = event.data
       if (!flatfileEvent) return
       if (
@@ -91,24 +100,27 @@ export class SpaceFrame implements OnInit {
       sidebarConfig,
       userInfo,
       spaceId,
-      apiUrl = "https://platform.flatfile.com/api"
-    } = this.spaceFrameProps;
-
-    const accessToken = this.spaceFrameProps.localAccessToken;
-
-    if(publishableKey) {
-      const fullAccessApi = authenticate(accessToken, apiUrl);
-      await addSpaceInfo({
-        publishableKey,
-        workbook, 
-        environmentId, 
-        document, 
-        themeConfig, 
-        sidebarConfig, 
-        userInfo
-      }, spaceId, fullAccessApi);
+      apiUrl = 'https://platform.flatfile.com/api',
+    } = this.spaceFrameProps
+
+    const accessToken = this.spaceFrameProps.localAccessToken
+
+    if (publishableKey) {
+      const fullAccessApi = authenticate(accessToken, apiUrl)
+      await addSpaceInfo(
+        {
+          publishableKey,
+          workbook,
+          environmentId,
+          document,
+          themeConfig,
+          sidebarConfig,
+          userInfo,
+        },
+        spaceId,
+        fullAccessApi
+      )
     }
-
   }
 
   openCloseModalDialog() {

diff --git a/packages/angular/projects/spaces/src/lib/space/space.component.ts b/packages/angular/projects/spaces/src/lib/space/space.component.ts
@@ -5,7 +5,7 @@ import useInitializeSpace from '../../utils/useInitializeSpace';
 import { SpaceFramePropsType } from './space-frame/spaceFrame.component';
 import { SpaceService } from './space.service';
 
-type ReusedOrObording = ReusedSpaceWithAccessToken | SimpleOnboarding
+type ReusedOrOnboarding = ReusedSpaceWithAccessToken | SimpleOnboarding
 
 @Component({
   selector: 'flatfile-space',
@@ -43,7 +43,7 @@ export class Space implements OnInit{
     this.closeInstance = true;
   }
 
-  initSpace = async (spaceProps: ReusedOrObording) => {
+  initSpace = async (spaceProps: ReusedOrOnboarding) => {
     this.closeInstance = false
     const { space, initializeSpace } = useInitializeSpace(spaceProps as SimpleOnboarding);
 

diff --git a/packages/angular/projects/spaces/src/utils/addSpaceInfo.ts b/packages/angular/projects/spaces/src/utils/addSpaceInfo.ts
@@ -23,7 +23,7 @@ const addSpaceInfo = async (
     if (workbook) {
       const localWorkbook = await api.workbooks.create({
         spaceId,
-        environmentId,
+        ...(environmentId ? { environmentId } : {}),
         ...workbook,
       })
       if (!localWorkbook || !localWorkbook.data || !localWorkbook.data.id) {
@@ -32,7 +32,7 @@ const addSpaceInfo = async (
     }
 
     const updatedSpace = await api.spaces.update(spaceId, {
-      environmentId,
+      ...(environmentId ? { environmentId } : {}),
       metadata: {
         theme: themeConfig,
         sidebarConfig: sidebarConfig || { showSidebar: false },

diff --git a/packages/angular/projects/spaces/src/utils/createSimpleListener.ts b/packages/angular/projects/spaces/src/utils/createSimpleListener.ts
@@ -1,5 +1,6 @@
-import api from '@flatfile/api'
+import { FlatfileClient } from '@flatfile/api'
 import {
+  DefaultSubmitSettings,
   JobHandler,
   SheetHandler,
   SimpleOnboarding,
@@ -9,27 +10,33 @@ import { FlatfileEvent, FlatfileListener } from '@flatfile/listener'
 import { recordHook } from '@flatfile/plugin-record-hook'
 
 interface SimpleListenerType
-  extends Pick<SimpleOnboarding, 'onRecordHook' | 'onSubmit'> {
+  extends Pick<
+    SimpleOnboarding,
+    'onRecordHook' | 'onSubmit' | 'submitSettings'
+  > {
   slug: string
 }
 
+const api = new FlatfileClient()
+
 const createSimpleListener = ({
   onRecordHook,
   onSubmit,
   slug,
+  submitSettings,
 }: SimpleListenerType) =>
   FlatfileListener.create((client: FlatfileListener) => {
     if (onRecordHook) {
       client.use(
         recordHook(
           slug,
           async (record: FlatfileRecord, event?: FlatfileEvent) =>
-            // @ts-ignore - something weird with the `data` prop and the types upstream in the packages being declared in different places, but overall this is fine
             onRecordHook(record, event)
         )
       )
     }
     if (onSubmit) {
+      const onSubmitSettings = { ...DefaultSubmitSettings, ...submitSettings }
       client.filter(
         { job: 'workbook:simpleSubmitAction' },
         (configure: FlatfileListener) => {
@@ -46,21 +53,22 @@ const createSimpleListener = ({
               // this assumes we are only allowing 1 sheet here (which we've talked about doing initially)
               const sheet = new SheetHandler(workbookSheets[0].id)
 
-              await onSubmit({ job, sheet })
+              if (onSubmit) {
+                await onSubmit({ job, sheet, event })
+              }
 
               await api.jobs.complete(jobId, {
                 outcome: {
                   message: 'complete',
                 },
               })
-              await api.spaces.delete(spaceId)
+              if (onSubmitSettings.deleteSpaceAfterSubmit) {
+                await api.spaces.archiveSpace(spaceId)
+              }
             } catch (error: any) {
               if (jobId) {
                 await api.jobs.cancel(jobId)
               }
-              if (spaceId) {
-                await api.spaces.delete(spaceId)
-              }
               console.error('Error:', error.stack)
             }
           })

diff --git a/packages/angular/projects/spaces/src/utils/useInitializeSpace.ts b/packages/angular/projects/spaces/src/utils/useInitializeSpace.ts
@@ -38,10 +38,6 @@ const useInitializeSpace = (
         throw new Error('Missing required publishable key')
       }
 
-      if (!environmentId) {
-        throw new Error('Missing required environment id')
-      }
-
       const limitedAccessApi = authenticate(publishableKey, apiUrl)
       const spaceRequestBody = {
         name,
@@ -60,7 +56,7 @@ const useInitializeSpace = (
 
       try {
         space = await limitedAccessApi.spaces.create({
-          environmentId,
+          ...(environmentId ? { environmentId } : {}),
           ...spaceRequestBody,
         })
       } catch (error) {