Clarify team invitation emails and errors (#7325)

* Clarify team invitation emails

* Clarify team invitation errors

Author: ComputelessComputer

apps/web/src/components/shared-note-viewer.tsx

@@ -188,12 +188,18 @@ function SharedNoteMeetingMetadata({
   );
 }
 
-export function SharedNoteLoading() {
+export function SharedNoteLoading({
+  headerLabel = "Shared with Anarlog",
+  loadingLabel = "Loading shared note",
+}: {
+  headerLabel?: string;
+  loadingLabel?: string;
+} = {}) {
   return (
-    <SharedNoteShell>
+    <SharedNoteShell headerLabel={headerLabel}>
       <div
         className="surface border-color-subtle rounded-3xl border px-6 py-8 sm:px-10"
-        aria-label="Loading shared note"
+        aria-label={loadingLabel}
       >
         <CircleNotch
           className="text-color-muted mb-6 size-5 animate-spin"
@@ -240,16 +246,18 @@ export function SharedNoteTransientError({ retry }: { retry?: () => void }) {
 export function SharedNotePrompt({
   actions,
   description,
+  headerLabel = "Shared with Anarlog",
   icon,
   title,
 }: {
   actions?: React.ReactNode;
   description: string;
+  headerLabel?: string;
   icon?: React.ReactNode;
   title: string;
 }) {
   return (
-    <SharedNoteShell>
+    <SharedNoteShell headerLabel={headerLabel}>
       <section className="surface border-color-subtle rounded-3xl border px-6 py-12 text-center sm:px-10">
         {icon && (
           <div className="text-color-muted mx-auto mb-4 flex justify-center">
@@ -272,9 +280,11 @@ export function SharedNotePrompt({
 
 function SharedNoteShell({
   children,
+  headerLabel = "Shared with Anarlog",
   topActions,
 }: {
   children: React.ReactNode;
+  headerLabel?: string;
   topActions?: React.ReactNode;
 }) {
   const headerHidden = useSyncExternalStore(
@@ -296,7 +306,7 @@ function SharedNoteShell({
           <AnarlogLogo className="h-7 w-auto" />
         </a>
         {topActions ?? (
-          <span className="text-xs text-stone-500">Shared with Anarlog</span>
+          <span className="text-xs text-stone-500">{headerLabel}</span>
         )}
       </header>
       <div

apps/web/src/routes/team/invite/$invitationId.tsx

@@ -1,9 +1,11 @@
 import {
+  ArrowsClockwise,
   CheckCircle,
   Clock,
   EnvelopeOpen,
   Prohibit,
   SignIn,
+  WarningCircle,
 } from "@phosphor-icons/react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { ClientOnly, createFileRoute } from "@tanstack/react-router";
@@ -15,8 +17,6 @@ import {
   sharedSecondaryButtonClassName,
   SharedNoteLoading,
   SharedNotePrompt,
-  SharedNoteTransientError,
-  SharedNoteUnavailable,
 } from "@/components/shared-note-viewer";
 import { fetchUser } from "@/functions/auth";
 import { clearShareRouteContinuation } from "@/functions/share-route-continuation";
@@ -48,15 +48,15 @@ export const Route = createFileRoute("/team/invite/$invitationId")({
     ],
   }),
   headers: () => privateShareHeaders,
-  pendingComponent: SharedNoteLoading,
+  pendingComponent: WorkspaceInvitationLoading,
   component: Component,
 });
 
 function Component() {
   const { user } = Route.useLoaderData();
   const { invitationId } = Route.useParams();
   return (
-    <ClientOnly fallback={<SharedNoteLoading />}>
+    <ClientOnly fallback={<WorkspaceInvitationLoading />}>
       <InvitationClient invitationId={invitationId} signedIn={Boolean(user)} />
     </ClientOnly>
   );
@@ -116,12 +116,12 @@ function InvitationClient({
   });
 
   if (continuation.isPending) {
-    return <SharedNoteLoading />;
+    return <WorkspaceInvitationLoading />;
   }
 
   if (continuation.isError) {
     return (
-      <SharedNoteTransientError
+      <WorkspaceInvitationTransientError
         retry={() => {
           void continuation.retry();
         }}
@@ -130,7 +130,7 @@ function InvitationClient({
   }
 
   if (!continuation.token || !parsedInvitationId) {
-    return <SharedNoteUnavailable />;
+    return <WorkspaceInvitationUnavailable />;
   }
 
   if (!signedIn) {
@@ -140,6 +140,7 @@ function InvitationClient({
     });
     return (
       <SharedNotePrompt
+        headerLabel="Team invitation"
         icon={<SignIn className="size-6" aria-hidden="true" />}
         title="Sign in to accept this invitation"
         description="Use the email address this workspace invitation was sent to. Your invitation stays in this browser tab while you sign in."
@@ -156,7 +157,17 @@ function InvitationClient({
   }
 
   if (invitationQuery.isPending) {
-    return <SharedNoteLoading />;
+    return <WorkspaceInvitationLoading />;
+  }
+
+  if (invitationQuery.isError || invitationQuery.data?.status === "error") {
+    return (
+      <WorkspaceInvitationTransientError
+        retry={() => {
+          void invitationQuery.refetch();
+        }}
+      />
+    );
   }
 
   const invitationFailure = getInvitationRouteFailure({
@@ -168,14 +179,15 @@ function InvitationClient({
     invitationFailure === "unavailable" ||
     invitationQuery.data?.status !== "ready"
   ) {
-    return <SharedNoteUnavailable />;
+    return <WorkspaceInvitationUnavailable />;
   }
 
   const invitation = invitationQuery.data.invitation;
 
   if (invitation.status === "accepted" || acceptMutation.isSuccess) {
     return (
       <SharedNotePrompt
+        headerLabel="Team invitation"
         icon={<CheckCircle className="size-6" aria-hidden="true" />}
         title={`You've joined ${invitation.workspaceName}`}
         description="Open Anarlog on your computer to start collaborating in this workspace."
@@ -191,6 +203,7 @@ function InvitationClient({
   if (invitation.status === "revoked") {
     return (
       <SharedNotePrompt
+        headerLabel="Team invitation"
         icon={<Prohibit className="size-6" aria-hidden="true" />}
         title="This invitation was revoked"
         description="Ask a workspace admin to send a new invitation."
@@ -201,6 +214,7 @@ function InvitationClient({
   if (invitation.status === "expired") {
     return (
       <SharedNotePrompt
+        headerLabel="Team invitation"
         icon={<Clock className="size-6" aria-hidden="true" />}
         title="This invitation has expired"
         description="Ask a workspace admin to send a new invitation."
@@ -210,6 +224,7 @@ function InvitationClient({
 
   return (
     <SharedNotePrompt
+      headerLabel="Team invitation"
       icon={<EnvelopeOpen className="size-6" aria-hidden="true" />}
       title={`Join ${invitation.workspaceName}`}
       description="Accept the invitation to become a member of this Anarlog workspace."
@@ -245,6 +260,47 @@ function InvitationClient({
   );
 }
 
+function WorkspaceInvitationLoading() {
+  return (
+    <SharedNoteLoading
+      headerLabel="Team invitation"
+      loadingLabel="Loading team invitation"
+    />
+  );
+}
+
+function WorkspaceInvitationUnavailable() {
+  return (
+    <SharedNotePrompt
+      headerLabel="Team invitation"
+      icon={<WarningCircle className="size-6" aria-hidden="true" />}
+      title="This team invitation isn’t available"
+      description="Sign in with the email address that received this invitation, or ask the workspace admin for a new invitation."
+    />
+  );
+}
+
+function WorkspaceInvitationTransientError({ retry }: { retry: () => void }) {
+  return (
+    <SharedNotePrompt
+      headerLabel="Team invitation"
+      icon={<WarningCircle className="size-6" aria-hidden="true" />}
+      title="We couldn’t load this team invitation"
+      description="Anarlog had a temporary problem loading the invitation. Please try again."
+      actions={
+        <button
+          type="button"
+          className={sharedPrimaryButtonClassName}
+          onClick={retry}
+        >
+          <ArrowsClockwise className="mr-2 size-4" aria-hidden="true" />
+          Try again
+        </button>
+      }
+    />
+  );
+}
+
 async function clearInvitationContinuation(pathname: string) {
   clearShareRouteToken(pathname);
   await clearShareRouteContinuation({ data: pathname }).catch(() => undefined);

crates/api-sync/src/shared_notes/email_delivery.rs

@@ -188,9 +188,9 @@ impl EmailDelivery {
                 recipient,
                 owner_email,
                 &sender_name,
-                format!("{sender_name} invited you to {workspace_name}"),
+                format!("You're invited to join the \"{workspace_name}\" team in Anarlog"),
                 format!(
-                    "{} invited you to join \"{}\" in Anarlog.\n\nAccept the invitation:\n{}\n\nReply to this email to contact {}.",
+                    "{} invited you to join \"{}\", a team in Anarlog.\n\nAccept the invitation:\n{}\n\nReply to this email to contact {}.",
                     sender_name,
                     workspace_name,
                     invitation_url,

crates/api-sync/src/shared_notes/tests.rs

@@ -177,8 +177,8 @@ async fn verifies_and_sends_a_workspace_invitation_email() {
             "from": "Owner via Anarlog <notes@send.anarlog.so>",
             "to": "invitee@example.com",
             "reply_to": "owner@example.com",
-            "subject": "Owner invited you to Fastrepl",
-            "text": "Owner invited you to join \"Fastrepl\" in Anarlog.\n\nAccept the invitation:\nhttps://anarlog.so/team/invite/66666666-6666-4666-8666-666666666666/#token=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\n\nReply to this email to contact Owner."
+            "subject": "You're invited to join the \"Fastrepl\" team in Anarlog",
+            "text": "Owner invited you to join \"Fastrepl\", a team in Anarlog.\n\nAccept the invitation:\nhttps://anarlog.so/team/invite/66666666-6666-4666-8666-666666666666/#token=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\n\nReply to this email to contact Owner."
         })))
         .respond_with(ResponseTemplate::new(200).set_body_json(json!({ "id": "email-id" })))
         .expect(1)