diff --git a/.changeset/slow-masks-film.md b/.changeset/slow-masks-film.md new file mode 100644 index 00000000..e80e5281 --- /dev/null +++ b/.changeset/slow-masks-film.md @@ -0,0 +1,5 @@ +--- +'@flatfile/react': minor +--- + +include new methods - setAccessToken and setPublishableKey - exposed via the useFlatfileHook to allow updates to keys when supporting both create and re-use space scenarios diff --git a/packages/react/src/components/FlatfileContext.tsx b/packages/react/src/components/FlatfileContext.tsx index d9c99005..4d7e1e3b 100644 --- a/packages/react/src/components/FlatfileContext.tsx +++ b/packages/react/src/components/FlatfileContext.tsx @@ -42,6 +42,7 @@ export interface FlatfileContextType { listener: FlatfileListener setListener: (listener: FlatfileListener) => void accessToken?: string + setPublishableKey: (publishableKey?: string | null) => void setAccessToken: (accessToken?: string | null) => void addSheet: (config: any) => void removeSheet: (sheetSlug: string) => void @@ -75,6 +76,7 @@ export const FlatfileContext = createContext({ listener: new FlatfileListener(), setListener: () => {}, accessToken: undefined, + setPublishableKey: () => {}, setAccessToken: () => {}, addSheet: () => {}, removeSheet: () => {}, diff --git a/packages/react/src/components/FlatfileProvider.tsx b/packages/react/src/components/FlatfileProvider.tsx index 3dc26308..3feef351 100644 --- a/packages/react/src/components/FlatfileProvider.tsx +++ b/packages/react/src/components/FlatfileProvider.tsx @@ -47,6 +47,9 @@ export const FlatfileProvider: React.FC = ({ }) => { const onClose = useRef void)>() useAttachStyleSheet(config?.styleSheetOptions) + const [internalPublishableKey, setInternalPublishableKey] = useState< + string | undefined | null + >(publishableKey) const [internalAccessToken, setInternalAccessToken] = useState< string | undefined | null >(accessToken) @@ -90,20 +93,17 @@ export const FlatfileProvider: React.FC = ({ const [ready, setReady] = useState(false) const handleCreateSpace = async () => { - if (!publishableKey) { + if (!internalPublishableKey) { return } // autoConfigure if no workbook or workbook.sheets are provided as they should be handled in the listener space:configure event const autoConfigure = !createSpace.workbook?.sheets const createSpaceConfig = { apiUrl, - publishableKey, + publishableKey: internalPublishableKey, space: { ...createSpace.space, autoConfigure }, workbook: createSpace.workbook, document: createSpace.document, - ...(config?.externalActorId - ? { externalActorId: config.externalActorId } - : {}), } debugLogger('Created space:', { createSpaceConfig }) const { data: createdSpace } = await createSpaceInternal(createSpaceConfig) @@ -129,7 +129,6 @@ export const FlatfileProvider: React.FC = ({ const { data: reUsedSpace } = await getSpace({ space: { id: createSpace.space.id, accessToken: internalAccessToken }, apiUrl, - spaceUrl: config?.spaceUrl, }) debugLogger('Found space:', { reUsedSpace }) @@ -361,9 +360,9 @@ export const FlatfileProvider: React.FC = ({ useEffect(() => { if (ready && open) { const createOrUpdateSpace = async () => { - if (publishableKey && !internalAccessToken) { + if (internalPublishableKey && !internalAccessToken) { await handleCreateSpace() - } else if (internalAccessToken && !publishableKey) { + } else if (internalAccessToken && !internalPublishableKey) { await handleReUseSpace() } } @@ -371,9 +370,43 @@ export const FlatfileProvider: React.FC = ({ } }, [ready, open]) + + /** + * Some customer simultaneously support creating new spaces, and re-using existing spaces. + * When creating a NEW space, the expectation is that the publishableKey is set, but the accessToken is not. + * (see the useEffect above for selecting between createSpace and handleReUseSpace) + * + * This function allows the consumer to override the publishableKey when needed via the useFlatfile hook. + * + * @param publishableKey + */ + const handleOverridePublishableKey = (publishableKey?: string | null) => { + if (internalAccessToken) { + setInternalAccessToken(null) + } + setInternalPublishableKey(publishableKey) + } + + + /** + * Some customer simultaneously support creating new spaces, and re-using existing spaces. + * For re-using an EXISTING space, the expectation is that the accessToken is set, but the publishableKey is not. + * (see the useEffect above for selecting between createSpace and handleReUseSpace) + * + * This function allows the consumer to override the accessToken when needed via the useFlatfile hook. + * + * @param accessToken + */ + const handleOverrideAccessToken = (accessToken?: string | null) => { + if (internalPublishableKey) { + setInternalPublishableKey(null) + } + setInternalAccessToken(accessToken) + } + const providerValue = useMemo( (): FlatfileContextType => ({ - ...(publishableKey ? { publishableKey } : {}), + ...(internalPublishableKey ? { publishableKey: internalPublishableKey } : {}), ...(internalAccessToken ? { accessToken: internalAccessToken } : {}), apiUrl, environmentId, @@ -384,7 +417,8 @@ export const FlatfileProvider: React.FC = ({ setSessionSpace, setListener, listener, - setAccessToken: setInternalAccessToken, + setPublishableKey: handleOverridePublishableKey, + setAccessToken: handleOverrideAccessToken, addSheet, updateSheet, removeSheet, @@ -401,7 +435,7 @@ export const FlatfileProvider: React.FC = ({ iframe, }), [ - publishableKey, + internalPublishableKey, internalAccessToken, apiUrl, environmentId, diff --git a/packages/react/src/hooks/useFlatfile.ts b/packages/react/src/hooks/useFlatfile.ts index 98544a82..b8f3f86b 100644 --- a/packages/react/src/hooks/useFlatfile.ts +++ b/packages/react/src/hooks/useFlatfile.ts @@ -25,7 +25,7 @@ export const useFlatfile: (useFlatfileOptions?: UseFlatfileOptions) => { } }, [context.onClose.current, useFlatfileOptions.onClose]) - const { open, setOpen, setListener, listener, apiUrl, resetSpace, ready } = + const { open, setOpen, setListener, listener, apiUrl, resetSpace, ready, setAccessToken, setPublishableKey } = context const openPortal = useCallback(() => { @@ -41,6 +41,8 @@ export const useFlatfile: (useFlatfileOptions?: UseFlatfileOptions) => { ) return { + setAccessToken, + setPublishableKey, openPortal, closePortal, open,