From 63c5277629452cb4e8d73734f8bb4302ef263bd0 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 21 Nov 2024 23:40:49 +0000
Subject: [PATCH] Update Nebula Waitlist Page UI and invite link (#5485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `NebulaWaitListPageUI` and related components by adding a `teamId` prop to improve link sharing functionality. It modifies how the invite link is generated and displayed, allowing users to share a personalized link tied to their team.

### Detailed summary
- Updated `Story` to pass `teamId="foo"` to `NebulaWaitListPageUI`.
- Modified `NebulaWaitListPageUI` to accept `teamId` as a prop.
- Enhanced `ShareButton` to accept `teamId` and generate a personalized invite link.
- Changed tooltip label for the share button to "Copy Invite Link".
- Updated footer in `NebulaWaitListPageUI` to include the personalized `ShareButton` and a message encouraging sharing.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../components/nebula-waitlist-page-ui.client.tsx  | 14 +++++++++++---
 .../nebula/components/nebula-waitlist-page.tsx     |  2 +-
 .../nebula/components/nebula-waitlist.stories.tsx  |  2 +-
 .../nebula/components/share-button.client.tsx      | 11 ++++++++---
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
index 970c8ae98d4..3a693f15c54 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
@@ -3,7 +3,7 @@ import { OrbitIcon } from "lucide-react";
 import Link from "next/link";
 import { ShareButton } from "./share-button.client";
 
-export function NebulaWaitListPageUI() {
+export function NebulaWaitListPageUI(props: { teamId: string }) {
   return (
     <div className="flex grow flex-col">
       {/* Header */}
@@ -22,7 +22,15 @@ export function NebulaWaitListPageUI() {
         <CenteredCard
           title="You're on the waitlist"
           description="You should receive access to Nebula soon!"
-          footer={<ShareButton />}
+          footer={
+            <div className="flex flex-col items-center gap-3">
+              <ShareButton teamId={props.teamId} />
+              <p className="text-balance text-center text-muted-foreground">
+                Share this invite link and get moved up the list when your
+                friends sign up!
+              </p>
+            </div>
+          }
         />
       </div>
     </div>
@@ -82,7 +90,7 @@ function CenteredCard(props: {
               {props.description}
             </p>
 
-            <div className="h-6" />
+            <div className="h-10" />
 
             {props.footer}
           </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx
index 19b7ba6e4f7..faedc079f7d 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx
@@ -39,7 +39,7 @@ export async function NebulaWaitListPage(props: {
     }
   }
 
-  return <NebulaWaitListPageUI />;
+  return <NebulaWaitListPageUI teamId={team.id} />;
 }
 
 function UnexpectedErrorPage(props: {
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist.stories.tsx
index a007238a06d..f15abed772a 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist.stories.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist.stories.tsx
@@ -29,5 +29,5 @@ export const Mobile: Story = {
 };
 
 function Story() {
-  return <NebulaWaitListPageUI />;
+  return <NebulaWaitListPageUI teamId="foo" />;
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/share-button.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/share-button.client.tsx
index 33001a1c19b..a5ef6a71ac5 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/share-button.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/share-button.client.tsx
@@ -5,16 +5,21 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { CheckIcon, ShareIcon } from "lucide-react";
 import { useState } from "react";
 
-export function ShareButton() {
+export function ShareButton(props: {
+  teamId: string;
+}) {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
-    <ToolTipLabel label="Copy link for joining waitlist">
+    <ToolTipLabel label="Copy Invite Link">
       <Button
         variant="outline"
         className="gap-2"
         onClick={() => {
-          navigator.clipboard.writeText("https://thirdweb.com/team/~/~/nebula");
+          const url = new URL("https://thirdweb.com/nebula");
+          url.searchParams.append("utm_content", props.teamId);
+          url.searchParams.append("utm_campaign", "nebula");
+          navigator.clipboard.writeText(url.href);
           setIsCopied(true);
           setTimeout(() => setIsCopied(false), 1000);
         }}