From b4ecd1d2310e7534b0961ec41dd779676ea89f31 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Thu, 28 Mar 2024 20:48:41 +0800
Subject: [PATCH] Refactor invitation system and update UI layout

Updated invitation link generation logic to use 'invitePath' instead of 'siteURL' improving the overall invitation system. The changes also entailed multiple updates to the UI ranging from layout modifications to enhanced alerts and descriptions. Additionally, the text and styling of several components, such as the team account settings container and the layout of personal account settings page, were significantly adjusted.
---
 .../(dashboard)/home/(user)/settings/page.tsx | 17 +++---
 .../home/[account]/settings/page.tsx          |  2 +-
 apps/web/public/locales/en/teams.json         |  3 +-
 .../components/sign-up-methods-container.tsx  | 11 ++++
 .../accept-invitation-container.tsx           |  2 +-
 .../settings/team-account-danger-zone.tsx     | 55 ++++++++-----------
 .../services/account-invitations.service.ts   |  2 +-
 7 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/apps/web/app/(dashboard)/home/(user)/settings/page.tsx b/apps/web/app/(dashboard)/home/(user)/settings/page.tsx
index 1a0500742..0bf3be672 100644
--- a/apps/web/app/(dashboard)/home/(user)/settings/page.tsx
+++ b/apps/web/app/(dashboard)/home/(user)/settings/page.tsx
@@ -1,4 +1,5 @@
 import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
+import { PageBody } from '@kit/ui/page';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -14,13 +15,15 @@ const paths = {
 
 function PersonalAccountSettingsPage() {
   return (
-    <div
-      className={
-        'container mx-auto flex max-w-2xl flex-1 flex-col items-center'
-      }
-    >
-      <PersonalAccountSettingsContainer features={features} paths={paths} />
-    </div>
+    <PageBody>
+      <div
+        className={
+          'container mx-auto flex max-w-2xl flex-1 flex-col items-center'
+        }
+      >
+        <PersonalAccountSettingsContainer features={features} paths={paths} />
+      </div>
+    </PageBody>
   );
 }
 
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
index 4d9967afc..154bfc61c 100644
--- a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
@@ -45,7 +45,7 @@ async function TeamAccountSettingsPage(props: Props) {
       <PageBody>
         <div
           className={
-            'container mx-auto flex w-full max-w-4xl flex-1 flex-col items-center'
+            'container mx-auto flex max-w-2xl flex-1 flex-col items-center'
           }
         >
           <TeamAccountSettingsContainer
diff --git a/apps/web/public/locales/en/teams.json b/apps/web/public/locales/en/teams.json
index 5a44ba639..ebeb293a7 100644
--- a/apps/web/public/locales/en/teams.json
+++ b/apps/web/public/locales/en/teams.json
@@ -107,7 +107,8 @@
   "deleteTeamInputField": "Type the name of the team to confirm",
   "leaveTeam": "Leave Team",
   "leavingTeamModalHeading": "Leaving Team",
-  "leaveTeamDescription": "You will no longer have access to this team.",
+  "leavingTeamModalDescription": "You are about to leave this team. You will no longer have access to it.",
+  "leaveTeamDescription": "Click the button below to leave the team. Remember, you will no longer have access to it and will need to be re-invited to join.",
   "deleteTeamDisclaimer": "You are deleting the team {{ teamName }}. This action cannot be undone.",
   "leaveTeamDisclaimer": "You are leaving the team {{ teamName }}. You will no longer have access to it.",
   "deleteTeamErrorHeading": "Sorry, we couldn't delete your team.",
diff --git a/packages/features/auth/src/components/sign-up-methods-container.tsx b/packages/features/auth/src/components/sign-up-methods-container.tsx
index 6e510f6ae..8cccb62a7 100644
--- a/packages/features/auth/src/components/sign-up-methods-container.tsx
+++ b/packages/features/auth/src/components/sign-up-methods-container.tsx
@@ -3,6 +3,7 @@
 import type { Provider } from '@supabase/supabase-js';
 
 import { isBrowser } from '@kit/shared/utils';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { If } from '@kit/ui/if';
 import { Separator } from '@kit/ui/separator';
 
@@ -28,6 +29,16 @@ export function SignUpMethodsContainer(props: {
 
   return (
     <>
+      <If condition={props.inviteToken}>
+        <Alert variant={'info'}>
+          <AlertTitle>You have been invited to join a team</AlertTitle>
+          <AlertDescription>
+            Please sign up to continue with the invitation and create your
+            account.
+          </AlertDescription>
+        </Alert>
+      </If>
+
       <If condition={props.providers.password}>
         <EmailPasswordSignUpContainer emailRedirectTo={redirectUrl} />
       </If>
diff --git a/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx b/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
index ead04bbfc..740583a2e 100644
--- a/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
+++ b/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
@@ -28,7 +28,7 @@ export function AcceptInvitationContainer(props: {
   };
 }) {
   return (
-    <div className={'flex flex-col items-center space-y-8'}>
+    <div className={'flex flex-col items-center space-y-4'}>
       <Heading className={'text-center'} level={5}>
         <Trans
           i18nKey={'teams:acceptInvitationHeading'}
diff --git a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx b/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
index 771d7346e..c136e0836 100644
--- a/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
+++ b/packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx
@@ -232,7 +232,7 @@ function LeaveTeamContainer(props: {
 }) {
   return (
     <div className={'flex flex-col space-y-4'}>
-      <p>
+      <p className={'text-muted-foreground text-sm'}>
         <Trans
           i18nKey={'teams:leaveTeamDescription'}
           values={{
@@ -241,9 +241,9 @@ function LeaveTeamContainer(props: {
         />
       </p>
 
-      <div>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <div>
             <Button
               data-test={'leave-team-button'}
               type={'button'}
@@ -251,34 +251,25 @@ function LeaveTeamContainer(props: {
             >
               <Trans i18nKey={'teams:leaveTeam'} />
             </Button>
-          </AlertDialogTrigger>
+          </div>
+        </AlertDialogTrigger>
 
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>
-                <Trans i18nKey={'teams:leavingTeamModalHeading'} />
-              </AlertDialogTitle>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              <Trans i18nKey={'teams:leavingTeamModalHeading'} />
+            </AlertDialogTitle>
 
-              <AlertDialogDescription>
-                <Trans i18nKey={'teams:leavingTeamModalDescription'} />
-              </AlertDialogDescription>
-            </AlertDialogHeader>
+            <AlertDialogDescription>
+              <Trans i18nKey={'teams:leavingTeamModalDescription'} />
+            </AlertDialogDescription>
+          </AlertDialogHeader>
 
-            <ErrorBoundary fallback={<LeaveTeamErrorAlert />}>
-              <form action={leaveTeamAccountAction}>
-                <input type={'hidden'} value={props.account.id} name={'id'} />
-
-                <div className={'my-2 flex flex-col space-y-4'}>
-                  <Trans
-                    i18nKey={'teams:leaveTeamDisclaimer'}
-                    values={{
-                      teamName: props.account?.name,
-                    }}
-                  />
-                </div>
-              </form>
-            </ErrorBoundary>
-          </AlertDialogContent>
+          <ErrorBoundary fallback={<LeaveTeamErrorAlert />}>
+            <form action={leaveTeamAccountAction}>
+              <input type={'hidden'} value={props.account.id} name={'id'} />
+            </form>
+          </ErrorBoundary>
 
           <AlertDialogFooter>
             <AlertDialogCancel>
@@ -287,8 +278,8 @@ function LeaveTeamContainer(props: {
 
             <LeaveTeamSubmitButton />
           </AlertDialogFooter>
-        </AlertDialog>
-      </div>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
@@ -302,7 +293,7 @@ function LeaveTeamSubmitButton() {
       disabled={pending}
       variant={'destructive'}
     >
-      <Trans i18nKey={'teams:leaveOrganization'} />
+      <Trans i18nKey={'teams:leaveTeam'} />
     </Button>
   );
 }
diff --git a/packages/features/team-accounts/src/server/services/account-invitations.service.ts b/packages/features/team-accounts/src/server/services/account-invitations.service.ts
index d28f9ff6d..a9dde6141 100644
--- a/packages/features/team-accounts/src/server/services/account-invitations.service.ts
+++ b/packages/features/team-accounts/src/server/services/account-invitations.service.ts
@@ -238,6 +238,6 @@ export class AccountInvitationsService {
   }
 
   private getInvitationLink(token: string) {
-    return new URL(env.siteURL, env.siteURL).href + `?invite_token=${token}`;
+    return new URL(env.invitePath, env.siteURL).href + `?invite_token=${token}`;
   }
 }