call stripe logout when logging out of Furever (#103)

* add logout

* use context to retrieve connect instance

client/components/NavBar.tsx

@@ -18,11 +18,14 @@ import {useSession} from '../hooks/SessionProvider';
 import {useDisplayShortName} from '../hooks/useDisplayName';
 import {OnboardingNotice} from './OnboardingNotice';
 import {RouterLink} from './RouterLink';
+import {useConnectJSContext} from '../hooks/ConnectJSProvider';
 
 const useLogout = () => {
   const {search} = useLocation();
+  const connectJSContext = useConnectJSContext();
 
   return useMutation<void, Error>('logout', async () => {
+    await connectJSContext.connectInstance?.logout();
     const response = await fetch('/api/logout', {
       method: 'POST',
     });

client/hooks/ConnectJSProvider.tsx

@@ -0,0 +1,27 @@
+import React, {createContext, useContext} from 'react';
+import {StripeConnectInstance} from '@stripe/connect-js';
+
+type IConnectJSContext = {
+  connectInstance?: StripeConnectInstance;
+};
+
+const ConnectJSContext = createContext<IConnectJSContext>({});
+
+export const useConnectJSContext = () => {
+  const context = useContext(ConnectJSContext);
+  return context;
+};
+
+export const ConnectJSProvider = ({
+  children,
+  connectInstance,
+}: {
+  children: React.ReactNode;
+  connectInstance?: StripeConnectInstance;
+}) => {
+  return (
+    <ConnectJSContext.Provider value={{connectInstance}}>
+      {children}
+    </ConnectJSContext.Provider>
+  );
+};

client/hooks/ConnectJsWrapper.tsx

@@ -5,6 +5,7 @@ import {
   loadConnectAndInitialize,
 } from '@stripe/connect-js';
 import {ConnectComponentsProvider} from '@stripe/react-connect-js';
+import {ConnectJSProvider} from './ConnectJSProvider';
 import {useSession} from './SessionProvider';
 import {FullScreenLoading} from '../components/FullScreenLoading';
 import {ErrorState} from '../components/ErrorState';
@@ -107,7 +108,9 @@ export const ConnectJsWrapper = ({children}: {children: React.ReactNode}) => {
 
   return (
     <ConnectComponentsProvider connectInstance={connectInstance}>
-      {children}
+      <ConnectJSProvider connectInstance={connectInstance}>
+        {children}
+      </ConnectJSProvider>
     </ConnectComponentsProvider>
   );
 };