Add group management and event-specific invitation onboarding

apps/web/src/app/invitations/[token]/page.tsx

@@ -1,4 +1,3 @@
-import { redirect } from "next/navigation";
 import { headers } from "next/headers";
 import Link from "next/link";
 import { auth } from "@/server/auth";
@@ -13,6 +12,8 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 
+export const metadata = { title: "Invitation", robots: { index: false, follow: false }, referrer: "no-referrer" as const };
+
 export default async function InvitationPage({
   params,
 }: {
@@ -37,25 +38,26 @@ export default async function InvitationPage({
     );
   }
 
-  if (!session) {
-    redirect(`/sign-up?invite=${encodeURIComponent(token)}`);
-  }
+  const callback = `/invitations/${encodeURIComponent(token)}`;
+  const role = preview.eventRole ?? preview.groupRole;
+  const roleLabel = role ? role.charAt(0).toUpperCase() + role.slice(1) : "team member";
 
   return (
     <main className="page-pad mx-auto max-w-md py-16">
       <Card>
+        {preview.bannerUrl ? <img src={preview.bannerUrl} alt="" width={1200} height={450} className="aspect-[8/3] w-full rounded-t-xl object-cover" /> : null}
         <CardHeader>
-          <CardTitle className="text-2xl font-semibold tracking-tight">Join this event</CardTitle>
+          <CardTitle className="text-2xl font-semibold tracking-tight">{preview.eventTitle ? `Help out with ${preview.eventTitle}` : `Join ${preview.groupName ?? "the team"}`}</CardTitle>
           <CardDescription>
-            {preview.eventRole
-              ? `You'll join as event ${preview.eventRole}.`
-              : preview.groupRole
-                ? `You'll join the group as ${preview.groupRole}.`
-                : "This invite grants access."}
+            You’ve been invited to join as a {roleLabel}. {session ? "Accept below to join the team." : "Create an account or sign in to accept your invitation. Use the email address that received the invite."}
           </CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-3">
-          <RedeemInviteButton token={token} />
+          <p className="text-sm text-muted-foreground">This invitation grants team access, not a guest RSVP. Your assigned role controls what you can view and manage.</p>
+          {session ? <RedeemInviteButton token={token} /> : <>
+            <Button asChild><Link href={`/sign-up?invite=${encodeURIComponent(token)}&callbackURL=${encodeURIComponent(callback)}`}>Create account to accept</Link></Button>
+            <Button asChild variant="outline"><Link href={`/sign-in?callbackURL=${encodeURIComponent(callback)}`}>Already have an account? Sign in</Link></Button>
+          </>}
           <Button asChild variant="ghost">
             <Link href="/dashboard">Skip</Link>
           </Button>