feat: Waitlist referrers (typehero#470)

* Added waitlist referrers * Added referrer to schema * format fix --------- Co-authored-by: typesafegh <[email protected]> Co-authored-by: PickleNik <[email protected]>
GutsyLaoChampUpdates · Aug 28, 2023 · 40878a0 · 40878a0
1 parent 2179d68
commit 40878a0
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 7 deletions.
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -11,13 +11,13 @@ export const metadata: Metadata = {
     'Connect, collaborate, and grow with a community of TypeScript developers. Elevate your skills through interactive coding challenges, discussions, and knowledge sharing',
 };
 
-export default async function Index() {
+export default async function Index({ searchParams }: { searchParams: Record<string, string> }) {
   return (
     <>
       <Hero />
       <Features />
       <Community />
-      <Waitlist />
+      <Waitlist referrer={searchParams.ref} />
       <Footsies />
     </>
   );

diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
@@ -7,6 +7,7 @@ import { Balancer } from 'react-wrap-balancer';
 import { Button } from '@repo/ui';
 import { HeroChallengeCard } from '~/components/landing/hero-challenge-card';
 import { useIsMobile } from '~/utils/useIsMobile';
+import { useSearchParams } from 'next/navigation';
 
 function TypeHeroLogo() {
   return (
@@ -36,6 +37,11 @@ function TypeHeroLogo() {
 
 function Hero() {
   const isMobile = useIsMobile();
+  let waitlistUrl = '/waitlist';
+  const ref = useSearchParams().get('ref');
+  const urlSearchParams = new URLSearchParams(ref ? { ref } : undefined).toString();
+  if (urlSearchParams.length > 0) waitlistUrl += `?${urlSearchParams}`;
+
   return (
     <section className="-mt-[56px] min-h-[calc(100vh)] overflow-hidden lg:min-h-0 lg:pt-[56px]">
       <div className="container grid min-h-screen items-center justify-center lg:min-h-0 lg:grid-cols-2">
@@ -68,7 +74,7 @@ function Hero() {
               asChild
               className="hero-join-button group relative mx-auto w-fit overflow-hidden rounded-xl p-[2px] font-bold transition-all duration-300 hover:bg-transparent hover:shadow-[0_0_2rem_-0.5rem_#3178c6] dark:hidden md:mr-0 lg:mr-auto"
             >
-              <Link href="/waitlist">
+              <Link href={waitlistUrl}>
                 <span className="inline-flex h-full w-fit items-center gap-1 rounded-[10px] bg-white px-4 py-2 text-[#3178c6] transition-all duration-300">
                   <Mail className="mr-1 h-4 w-4 stroke-[3]" />
                   Join the Waitlist
@@ -79,7 +85,7 @@ function Hero() {
               asChild
               className="hero-join-button-dark group relative mx-auto hidden w-fit overflow-hidden rounded-xl p-[1px] font-bold transition-all duration-300 dark:block dark:hover:shadow-[0_0_2rem_-0.5rem_#fff8] md:mr-0 lg:mr-auto"
             >
-              <Link href="/waitlist">
+              <Link href={waitlistUrl}>
                 <span className="inline-flex h-full w-fit items-center gap-1 rounded-xl px-4 py-2 transition-all duration-300 dark:bg-neutral-900 dark:text-white group-hover:dark:bg-black">
                   <Mail className="mr-1 h-4 w-4 stroke-[3]" />
                   Join the Waitlist

diff --git a/apps/web/src/components/landing/waitlist/banner.tsx b/apps/web/src/components/landing/waitlist/banner.tsx
@@ -5,7 +5,13 @@ import { Balancer } from 'react-wrap-balancer';
 import { Button } from '@repo/ui';
 import styles from '~/components/landing/waitlist/waitlist.module.css';
 
-function Waitlist() {
+interface WaitlistProps {
+  referrer?: string;
+}
+function Waitlist({ referrer }: WaitlistProps) {
+  let waitlistUrl = '/waitlist';
+  const urlSearchParams = new URLSearchParams(referrer ? { ref: referrer } : undefined).toString();
+  if (urlSearchParams.length > 0) waitlistUrl += `?${urlSearchParams}`;
   return (
     <section className={clsx(styles.backdrop, 'relative overflow-hidden')}>
       <div className="container relative grid grid-cols-1 items-center justify-center py-[64px] md:grid-cols-2">
@@ -26,7 +32,7 @@ function Waitlist() {
           asChild
           className="group relative w-fit overflow-hidden rounded-xl bg-gradient-to-bl from-indigo-400 via-blue-400 to-emerald-400 p-[2px] font-bold transition-all duration-300 hover:rounded-3xl active:rounded-xl active:duration-150 sm:mx-16 md:mx-auto md:mr-0 lg:mr-auto lg:scale-[1.5] lg:hover:scale-[1.6] lg:active:scale-[1.5]"
         >
-          <Link href="/waitlist">
+          <Link href={waitlistUrl}>
             <span className="inline-flex h-full w-fit items-center gap-1 rounded-[10px] bg-white/90 px-4 py-2 text-black transition-all duration-300 group-hover:rounded-3xl group-hover:bg-white/0 group-hover:text-white dark:bg-black/80 dark:text-white group-hover:dark:bg-black/0 dark:group-hover:text-black">
               <Mail className="mr-1 h-4 w-4 stroke-[3]" />
               Join the Waitlist

diff --git a/apps/web/src/components/landing/waitlist/create.action.ts b/apps/web/src/components/landing/waitlist/create.action.ts
@@ -44,6 +44,7 @@ export async function uploadWaitlistEntry(data: WaitlistFormSchema) {
       name: data.name,
       email: data.email,
       intention: isUser ? 'USER' : isBuilder ? 'BUILDER' : 'BOTH',
+      referrer: data.referrer,
     },
   });
 

diff --git a/apps/web/src/components/landing/waitlist/waitlist-form.tsx b/apps/web/src/components/landing/waitlist/waitlist-form.tsx
@@ -22,25 +22,28 @@ import {
   SelectValue,
 } from '@repo/ui';
 import { uploadWaitlistEntry } from '~/components/landing/waitlist/create.action';
+import { useSearchParams } from 'next/navigation';
 
 const waitlistFormSchema = z.object({
   name: z.string().min(1, 'Please enter your name'),
   email: z.string().email(),
   intention: z.string(),
+  referrer: z.string().optional(),
 });
 
 export type WaitlistFormSchema = z.infer<typeof waitlistFormSchema>;
 
 export function WaitlistForm() {
   const [state, setState] = useState<'error' | 'idle' | 'submitting' | 'success'>('idle');
-
+  const referrer = useSearchParams().get('ref') || undefined;
   const isSubmitting = state === 'submitting';
 
   const form = useForm<WaitlistFormSchema>({
     resolver: zodResolver(waitlistFormSchema),
     defaultValues: {
       email: '',
       name: '',
+      referrer,
     },
   });
 
@@ -60,6 +63,7 @@ export function WaitlistForm() {
     <div className="w-full md:w-[350px]">
       <Form {...form}>
         <form className="flex flex-col" onSubmit={form.handleSubmit(onSubmit)}>
+          <input type="hidden" name="referrer" value={referrer} />
           <FormField
             control={form.control}
             name="name"

diff --git a/packages/db/schema.prisma b/packages/db/schema.prisma
@@ -370,6 +370,7 @@ model Waitlist {
   name      String
   email     String
   intention WaitlistIntention
+  referrer  String?
 }
 
 model ImageUpload {