Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx

@@ -1,12 +1,16 @@
+'use client';
+
 import Image from 'next/image';
 
+import { useAction } from 'next-safe-action/hooks';
+
+import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
 import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 
 import { acceptInvitationAction } from '../../server/actions/team-invitations-server-actions';
-import { InvitationSubmitButton } from './invitation-submit-button';
 import { SignOutInvitationButton } from './sign-out-invitation-button';
 
 export function AcceptInvitationContainer(props: {
@@ -28,11 +32,13 @@ export function AcceptInvitationContainer(props: {
     nextPath: string;
   };
 }) {
+  const { execute, isPending } = useAction(acceptInvitationAction);
+
   return (
     <div className={'flex flex-col items-center space-y-4'}>
       <Heading className={'text-center'} level={4}>
         <Trans
-          i18nKey={'teams:acceptInvitationHeading'}
+          i18nKey={'teams.acceptInvitationHeading'}
           values={{
             accountName: props.invitation.account.name,
           }}
@@ -53,7 +59,7 @@ export function AcceptInvitationContainer(props: {
 
       <div className={'text-muted-foreground text-center text-sm'}>
         <Trans
-          i18nKey={'teams:acceptInvitationDescription'}
+          i18nKey={'teams.acceptInvitationDescription'}
           values={{
             accountName: props.invitation.account.name,
           }}
@@ -64,20 +70,24 @@ export function AcceptInvitationContainer(props: {
         <form
           data-test={'join-team-form'}
           className={'w-full'}
-          action={acceptInvitationAction}
+          onSubmit={(e) => {
+            e.preventDefault();
+
+            execute({
+              inviteToken: props.inviteToken,
+              nextPath: props.paths.nextPath,
+            });
+          }}
         >
-          <input type="hidden" name={'inviteToken'} value={props.inviteToken} />
-
-          <input
-            type={'hidden'}
-            name={'nextPath'}
-            value={props.paths.nextPath}
-          />
-
-          <InvitationSubmitButton
-            email={props.email}
-            accountName={props.invitation.account.name}
-          />
+          <Button type={'submit'} className={'w-full'} disabled={isPending}>
+            <Trans
+              i18nKey={isPending ? 'teams.joiningTeam' : 'teams.continueAs'}
+              values={{
+                accountName: props.invitation.account.name,
+                email: props.email,
+              }}
+            />
+          </Button>
         </form>
 
         <Separator />
@@ -85,7 +95,7 @@ export function AcceptInvitationContainer(props: {
         <SignOutInvitationButton nextPath={props.paths.signOutNext} />
 
         <span className={'text-muted-foreground text-center text-xs'}>
-          <Trans i18nKey={'teams:signInWithDifferentAccountDescription'} />
+          <Trans i18nKey={'teams.signInWithDifferentAccountDescription'} />
         </span>
       </div>
     </div>