Chef-specific Referral path (#37271)

GitOrigin-RevId: 87b556eafcad3a350e5e0571b1be2286b69e5916

Author: thomasballinger

npm-packages/dashboard/next.config.js

@@ -56,6 +56,18 @@ const nextConfig = {
   swcMinify: true,
   transpilePackages: [],
   reactStrictMode: true,
+  async rewrites() {
+    return [
+      {
+        source: "/try-chef/:code",
+        destination: "/referral/:code",
+      },
+      {
+        source: "/try-chef/:code/apply",
+        destination: "/referral/:code/apply",
+      },
+    ];
+  },
   async headers() {
     return [
       {

npm-packages/dashboard/src/components/referral/RedeemReferralForm.stories.tsx

@@ -48,6 +48,7 @@ const meta = {
     teamEligibility: { eligible: true },
     onShowTeamSelector: () => {},
     isTeamSelectorShown: false,
+    isChef: false,
   },
 } satisfies Meta<typeof RedeemReferralForm>;
 

npm-packages/dashboard/src/components/referral/RedeemReferralForm.tsx

@@ -23,6 +23,7 @@ export function RedeemReferralForm({
   isTeamSelectorShown,
   onShowTeamSelector,
   teamEligibility,
+  isChef,
 }: {
   referralCode:
     | {
@@ -44,6 +45,7 @@ export function RedeemReferralForm({
     | undefined
     | { eligible: true }
     | { eligible: false; reason: TeamEligibilityError };
+  isChef: boolean;
 }) {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -59,6 +61,7 @@ export function RedeemReferralForm({
           <CodeError
             title="Invalid referral code"
             description="Oh no, the code you used is invalid."
+            isChef={isChef}
           />
         ) : referralCode.exhausted ? (
           <CodeError
@@ -70,6 +73,7 @@ export function RedeemReferralForm({
                 longer valid.
               </>
             }
+            isChef={isChef}
           />
         ) : (
           <>
@@ -155,7 +159,9 @@ export function RedeemReferralForm({
                     disabled={!selectedTeam || !teamEligibility?.eligible}
                     loading={isSubmitting || teamEligibility === undefined}
                   >
-                    Get my free resources
+                    {isChef
+                      ? "Get my free Chef tokens and Convex resources"
+                      : "Get my free resources"}
                   </Button>
                 </div>
               </form>
@@ -185,9 +191,11 @@ function teamEligibilityErrorMessage(error: TeamEligibilityError) {
 function CodeError({
   title,
   description,
+  isChef,
 }: {
   title: string;
   description: React.ReactNode;
+  isChef: boolean;
 }) {
   return (
     <>
@@ -207,7 +215,11 @@ function CodeError({
       </p>
 
       <div>
-        <Button href="/">Start Building</Button>
+        {isChef ? (
+          <Button href="https://chef.convex.dev">Start Building</Button>
+        ) : (
+          <Button href="/">Start Building</Button>
+        )}
       </div>
     </>
   );

npm-packages/dashboard/src/components/referral/RedeemReferralLanding.stories.tsx

@@ -6,6 +6,7 @@ const meta = {
   args: {
     title: "Someone thinks you’d like Convex!",
     code: "CONVEX123",
+    isChef: false,
   },
 } satisfies Meta<typeof RedeemReferralLanding>;
 

npm-packages/dashboard/src/components/referral/RedeemReferralLanding.test.tsx

@@ -11,7 +11,9 @@ describe("RedeemReferralLanding", () => {
   // button to ensure there is no regression on the click behavior.
   it("has a link that becomes disabled when clicked", async () => {
     const code = "TEST123";
-    render(<RedeemReferralLanding title="Test Title" code={code} />);
+    render(
+      <RedeemReferralLanding title="Test Title" code={code} isChef={false} />,
+    );
 
     const link = screen.getByRole("link", { name: "Sign up with GitHub" });
     expect(link).toHaveAttribute(

npm-packages/dashboard/src/components/referral/RedeemReferralLanding.tsx

@@ -8,24 +8,28 @@ import { useState } from "react";
 export function RedeemReferralLanding({
   title,
   code,
+  isChef,
 }: {
   title: string;
   code: string;
+  isChef: boolean;
 }) {
   return (
     <div className="relative mt-10 max-w-lg">
       <Sheet>
         <DisplayH1>{title}</DisplayH1>
 
         <DisplayP>
-          Convex is the open-source reactive database for app developers.
+          {isChef
+            ? "Chef is an app builder powered by Convex, the open-source reactive database for app developers."
+            : "Convex is the open-source reactive database for app developers."}
         </DisplayP>
 
         <DisplayP>
           Accept this referral to double your free account quota.
         </DisplayP>
 
-        <LogInButton code={code} />
+        <LogInButton code={code} isChef={isChef} />
       </Sheet>
     </div>
   );
@@ -53,7 +57,7 @@ function DisplayP({ children }: React.PropsWithChildren) {
   );
 }
 
-function LogInButton({ code }: { code: string }) {
+function LogInButton({ code, isChef }: { code: string; isChef: boolean }) {
   const [clicked, setClicked] = useState(false);
 
   return (
@@ -65,9 +69,11 @@ function LogInButton({ code }: { code: string }) {
         !clicked && "hover:shadow-[rgba(111,0,255,0.5)]",
         clicked && "opacity-80 cursor-progress",
       )}
-      href={`/api/auth/login?returnTo=${encodeURIComponent(`/referral/${code}/apply`)}`}
+      href={`/api/auth/login?returnTo=${encodeURIComponent(isChef ? `/try-chef/${code}/apply` : `/referral/${code}/apply`)}`}
       onClick={() => {
-        logEvent("clicked “Sign up with GitHub” through referral landing");
+        logEvent(
+          `clicked “Sign up with GitHub” through ${isChef ? "Chef " : ""}referral landing`,
+        );
         setClicked(true);
       }}
       aria-disabled={clicked}

npm-packages/dashboard/src/pages/referral/[code].tsx

@@ -2,16 +2,23 @@ import { GetServerSideProps } from "next";
 import { auth0 } from "server/auth0";
 import { Flourish } from "layouts/LoginLayout";
 import Head from "next/head";
-import { useParams } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import Background from "components/login/images/background.svg";
 import { ConvexLogo } from "@common/elements/ConvexLogo";
 import { RedeemReferralLanding } from "components/referral/RedeemReferralLanding";
 
+/**
+ *  This page powers two routes via Next.js rewrites in next.config.js:
+ *  - /referral/THOMAS898
+ *  - /try-chef/THOMAS898
+ * */
+
 export const getServerSideProps: GetServerSideProps = async ({
   req,
   res,
   query,
 }) => {
+  const isChef = req.url?.includes("try-chef");
   try {
     // Check if user is authenticated without forcing login
     const session = await auth0().getSession(req, res);
@@ -20,7 +27,9 @@ export const getServerSideProps: GetServerSideProps = async ({
     if (session?.user) {
       return {
         redirect: {
-          destination: `/referral/${query.code}/apply`,
+          destination: isChef
+            ? `/try-chef/${query.code}/apply`
+            : `/referral/${query.code}/apply`,
           permanent: false,
         },
       };
@@ -35,12 +44,17 @@ export const getServerSideProps: GetServerSideProps = async ({
   }
 };
 
-const title = "Someone thinks you’d like Convex!";
-const description = "Get Convex resources for free with this referral code.";
-const ogImage = `https://www.convex.dev/api/og?title=${encodeURIComponent(title)}`;
-
 export default function ReferralLandingPage() {
   const { code } = useParams<{ code: string }>();
+  const isChef = usePathname().includes("try-chef");
+
+  const title = isChef
+    ? "Someone thinks you'd like Chef!"
+    : "Someone thinks you’d like Convex!";
+  const description = isChef
+    ? "Get additional Chef tokens and Convex resources for free with this referral code."
+    : "Get Convex resources for free with this referral code.";
+  const ogImage = `https://www.convex.dev/api/og?title=${encodeURIComponent(title)}`;
 
   return (
     <div className="flex h-screen w-full flex-col items-center bg-background-brand">
@@ -56,7 +70,7 @@ export default function ReferralLandingPage() {
         <meta property="og:site_name" content="Convex" />
         <meta
           property="og:url"
-          content={`https://dashboard.convex.dev/referral/${code}`}
+          content={`https://dashboard.convex.dev/${isChef ? "try-chef" : "referral"}/${code}`}
         />
         <meta property="og:image" content={ogImage} />
 
@@ -76,7 +90,7 @@ export default function ReferralLandingPage() {
         <Background className="stroke-[#D7D7D7] dark:hidden" />
       </div>
 
-      <RedeemReferralLanding title={title} code={code} />
+      <RedeemReferralLanding title={title} code={code} isChef={isChef} />
     </div>
   );
 }

npm-packages/dashboard/src/pages/referral/[code]/apply.tsx

@@ -5,16 +5,24 @@ import { LoginLayout } from "layouts/LoginLayout";
 import { useTeamOrbSubscription } from "api/billing";
 import { RedeemReferralForm } from "components/referral/RedeemReferralForm";
 import { withAuthenticatedPage } from "lib/withAuthenticatedPage";
-import { useParams } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { useState } from "react";
 import { Team } from "generatedApi";
 import { useApplyReferralCode, useReferralCode } from "api/referrals";
 import { useProfile } from "api/profile";
 import { logEvent } from "convex-analytics";
 
+/**
+ *  This page powers two routes via Next.js rewrites in next.config.js:
+ *  - /referral/THOMAS898/apply
+ *  - /try-chef/THOMAS898/apply
+ * */
+
 export { getServerSideProps } from "lib/ssr";
 
 function RedeemReferralCodePage() {
+  const isChef = usePathname().includes("try-chef");
+
   const { code } = useParams<{ code: string }>();
 
   const { selectedTeamSlug: defaultTeamSlug, teams } = useTeams();
@@ -50,9 +58,14 @@ function RedeemReferralCodePage() {
 
             logEvent("redeemed referral code");
 
-            void router.push(`/t/${selectedTeam.slug}`);
+            if (isChef) {
+              window.location.href = "https://chef.convex.dev";
+            } else {
+              void router.push(`/t/${selectedTeam.slug}`);
+            }
           }}
           teamEligibility={teamEligibility}
+          isChef={isChef}
         />
       </LoginLayout>
     </div>