From 0ad26e991d492e2754475a4e6afa8ab3381b56e0 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Thu, 25 Apr 2024 19:56:30 +0700
Subject: [PATCH] Update invitation acceptance UI for clarity

Updated the invitation acceptance interface components. The 'Join Team' button text has been changed to reflect the user's email. This provides the user more clarity about which account they are accepting the invitation for. Other minor adjustments were made to the layout and heading level for consistency and improved readability.
---
 apps/web/app/join/page.tsx                             |  3 +++
 apps/web/public/locales/en/teams.json                  |  2 +-
 .../invitations/accept-invitation-container.tsx        | 10 +++++++---
 .../invitations/invitation-submit-button.tsx           |  8 ++++++--
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/join/page.tsx b/apps/web/app/join/page.tsx
index 6acf94a7f..3b8212d71 100644
--- a/apps/web/app/join/page.tsx
+++ b/apps/web/app/join/page.tsx
@@ -94,8 +94,11 @@ async function JoinTeamAccountPage({ searchParams }: Context) {
     invitation.account.slug,
   );
 
+  const email = auth.data.email ?? '';
+
   return (
     <AcceptInvitationContainer
+      email={email}
       inviteToken={token}
       invitation={invitation}
       paths={{
diff --git a/apps/web/public/locales/en/teams.json b/apps/web/public/locales/en/teams.json
index 079d7b2cb..1a7dcae74 100644
--- a/apps/web/public/locales/en/teams.json
+++ b/apps/web/public/locales/en/teams.json
@@ -152,7 +152,7 @@
   "signInWithDifferentAccountDescription": "If you wish to accept the invitation with a different account, please sign out and back in with the account you wish to use.",
   "acceptInvitationHeading": "Accept Invitation to join {{accountName}}",
   "acceptInvitationDescription": "You have been invited to join the team {{accountName}}. If you wish to accept the invitation, please click the button below.",
-  "joinTeam": "Join {{accountName}}",
+  "continueAs": "Continue as {{email}}",
   "joinTeamAccount": "Join Team",
   "joiningTeam": "Joining team...",
   "leaveTeamInputLabel": "Please type LEAVE to confirm leaving the team.",
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 16e57291d..8cc49d1a0 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
@@ -11,6 +11,7 @@ import { SignOutInvitationButton } from './sign-out-invitation-button';
 
 export function AcceptInvitationContainer(props: {
   inviteToken: string;
+  email: string;
 
   invitation: {
     id: string;
@@ -29,7 +30,7 @@ export function AcceptInvitationContainer(props: {
 }) {
   return (
     <div className={'flex flex-col items-center space-y-4'}>
-      <Heading className={'text-center'} level={5}>
+      <Heading className={'text-center'} level={4}>
         <Trans
           i18nKey={'teams:acceptInvitationHeading'}
           values={{
@@ -59,7 +60,7 @@ export function AcceptInvitationContainer(props: {
         />
       </div>
 
-      <div className={'flex flex-col space-y-2.5'}>
+      <div className={'flex flex-col space-y-4'}>
         <form
           data-test={'join-team-form'}
           className={'w-full'}
@@ -73,7 +74,10 @@ export function AcceptInvitationContainer(props: {
             value={props.paths.accountHome}
           />
 
-          <InvitationSubmitButton accountName={props.invitation.account.name} />
+          <InvitationSubmitButton
+            email={props.email}
+            accountName={props.invitation.account.name}
+          />
         </form>
 
         <Separator />
diff --git a/packages/features/team-accounts/src/components/invitations/invitation-submit-button.tsx b/packages/features/team-accounts/src/components/invitations/invitation-submit-button.tsx
index ea65f65c9..17a74c5ec 100644
--- a/packages/features/team-accounts/src/components/invitations/invitation-submit-button.tsx
+++ b/packages/features/team-accounts/src/components/invitations/invitation-submit-button.tsx
@@ -5,15 +5,19 @@ import { useFormStatus } from 'react-dom';
 import { Button } from '@kit/ui/button';
 import { Trans } from '@kit/ui/trans';
 
-export function InvitationSubmitButton(props: { accountName: string }) {
+export function InvitationSubmitButton(props: {
+  accountName: string;
+  email: string;
+}) {
   const { pending } = useFormStatus();
 
   return (
     <Button type={'submit'} className={'w-full'} disabled={pending}>
       <Trans
-        i18nKey={pending ? 'teams:joiningTeam' : 'teams:joinTeam'}
+        i18nKey={pending ? 'teams:joiningTeam' : 'teams:continueAs'}
         values={{
           accountName: props.accountName,
+          email: props.email,
         }}
       />
     </Button>