Add express login link to furever (#211)

* Add express login link to furever

* Refactor to use hook

* Clean up imports

app/(dashboard)/settings/layout.tsx

@@ -3,15 +3,20 @@
 import {signOut} from 'next-auth/react';
 import SubNav from '@/app/components/SubNav';
 import {Button} from '@/components/ui/button';
-import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
 import {useConnectJSContext} from '@/app/hooks/EmbeddedComponentProvider';
+import {ExternalLink} from 'lucide-react';
+import {useExpressDashboardLoginLink} from '@/app/hooks/useExpressDashboardLoginLink';
 
 export default function SettingsLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const connectJSContext = useConnectJSContext();
+
+  const {hasExpressDashboardAccess, expressDashboardLoginLink} =
+    useExpressDashboardLoginLink();
+
   return (
     <>
       <header className="flex flex-col justify-between md:flex-row">
@@ -27,6 +32,21 @@ export default function SettingsLayout({
               {path: '/settings/tax', label: 'Tax'},
             ]}
           />
+          {hasExpressDashboardAccess && (
+            <div>
+              <Button
+                className="text-md ml-2 self-end p-2 hover:bg-white/80 hover:text-primary"
+                variant="ghost"
+                onClick={async () => {
+                  window.open(expressDashboardLoginLink, '_blank');
+                }}
+                aria-label="Open Stripe Express Dashboard"
+              >
+                Express Dashboard &nbsp;
+                <ExternalLink color="var(--subdued)" size={20} />
+              </Button>
+            </div>
+          )}
           <div>
             <Button
               className="text-md ml-2 self-end p-2 hover:bg-white/80 hover:text-primary"

app/api/login_link/route.ts

@@ -0,0 +1,42 @@
+import {getServerSession} from 'next-auth/next';
+import {authOptions} from '@/lib/auth';
+import {stripe} from '@/lib/stripe';
+
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+
+    const stripeAccount = session?.user?.stripeAccount?.id;
+    if (!stripeAccount) {
+      console.error('No connected account found for user');
+      return new Response('No connected account found for user', {
+        status: 400,
+      });
+    }
+
+    if (
+      session.user.stripeAccount.controller?.stripe_dashboard?.type !==
+      'express'
+    ) {
+      console.error('User does not have access to Express dashboard');
+      return new Response('User does not have access to Express dashboard.', {
+        status: 400,
+      });
+    }
+
+    const link = await stripe.accounts.createLoginLink(stripeAccount);
+
+    return new Response(
+      JSON.stringify({
+        url: link.url,
+      }),
+      {status: 200, headers: {'Content-Type': 'application/json'}}
+    );
+  } catch (error: any) {
+    console.error(
+      'An error occurred when calling the Stripe API to create a login link',
+      error
+    );
+    return new Response(error.message, {status: 500});
+  }
+}

app/hooks/useExpressDashboardLoginLink.tsx

@@ -0,0 +1,25 @@
+import {useSession} from 'next-auth/react';
+import {useEffect, useState} from 'react';
+
+export const useExpressDashboardLoginLink = () => {
+  const {data: session} = useSession();
+
+  const hasExpressDashboardAccess =
+    session?.user?.stripeAccount?.controller?.stripe_dashboard?.type ===
+    'express';
+
+  const [expressDashboardLoginLink, setExpressDashboardLoginLink] =
+    useState<string>();
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      const res = await fetch('/api/login_link');
+      const data = await res.json();
+      setExpressDashboardLoginLink(data.url);
+    };
+
+    fetchLink();
+  }, []);
+
+  return {hasExpressDashboardAccess, expressDashboardLoginLink};
+};