Program lander

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invite-partner-sheet.tsx

@@ -52,7 +52,7 @@ function InvitePartnerSheetContent({ setIsOpen }: InvitePartnerSheetProps) {
       setIsOpen(false);
     },
     onError({ error }) {
-      toast.error(error.serverError?.serverError);
+      toast.error(error.serverError);
     },
   });
 

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/page-client.tsx

@@ -56,7 +56,7 @@ export default function IntegrationPageClient({
       window.location.href = data.url;
     },
     onError: ({ error }) => {
-      toast.error(error.serverError?.serverError);
+      toast.error(error.serverError);
     },
   });
 

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/[appId]/page-client.tsx

@@ -36,7 +36,7 @@ export default function OAuthAppManagePageClient({ appId }: { appId: string }) {
         toast.success("New client secret generated.");
       },
       onError: ({ error }) => {
-        toast.error(error.serverError?.serverError);
+        toast.error(error.serverError);
       },
     },
   );

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/payouts/compliance-button.tsx

@@ -25,7 +25,7 @@ export const ComplianceButton = () => {
       });
     },
     onError({ error }) {
-      toast.error(error.serverError?.serverError);
+      toast.error(error.serverError);
     },
   });
 

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/referrals/generate-button.tsx

@@ -19,7 +19,7 @@ export function GenerateButton() {
         toast.success("Referral link generated.");
       },
       onError: ({ error }) => {
-        toast.error(error.serverError?.serverError);
+        toast.error(error.serverError);
       },
     },
   );

apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/application/form.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { createProgramApplicationAction } from "@/lib/actions/partners/create-program-application";
+import { Button, useMediaQuery } from "@dub/ui";
+import { cn } from "@dub/utils";
+import { Program } from "@prisma/client";
+import { useSession } from "next-auth/react";
+import { useAction } from "next-safe-action/hooks";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import ReactTextareaAutosize from "react-textarea-autosize";
+import { toast } from "sonner";
+
+type FormData = {
+  name: string;
+  email: string;
+  website?: string;
+  proposal: string;
+  comments?: string;
+};
+
+export function ProgramApplicationForm({
+  program,
+}: {
+  program: Pick<Program, "id" | "slug" | "name">;
+}) {
+  const { isMobile } = useMediaQuery();
+  const router = useRouter();
+  const { data: session } = useSession();
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    setValue,
+    formState: { errors, isSubmitting, isSubmitSuccessful },
+  } = useForm<FormData>();
+
+  useEffect(() => {
+    if (session?.user) {
+      setValue("name", session.user.name ?? "");
+      setValue("email", session.user.email ?? "");
+    }
+  }, [session?.user, setValue]);
+
+  const { executeAsync, isExecuting } = useAction(
+    createProgramApplicationAction,
+    {
+      async onSuccess({ data }) {
+        if (!data) {
+          toast.error("Failed to submit application. Please try again.");
+          return;
+        }
+
+        toast.success("Your application submitted successfully.");
+
+        const { programApplicationId, programEnrollmentId } = data;
+
+        const searchParams = new URLSearchParams({
+          applicationId: programApplicationId,
+          ...(programEnrollmentId && {
+            enrollmentId: programEnrollmentId,
+          }),
+        });
+
+        router.push(
+          `/apply/${program.slug}/application/success?${searchParams.toString()}`,
+        );
+      },
+      onError({ error }) {
+        toast.error(error.serverError);
+
+        setError("root.serverError", {
+          message: error.serverError,
+        });
+      },
+    },
+  );
+
+  const isLoading = isSubmitting || isSubmitSuccessful || isExecuting;
+
+  return (
+    <form
+      onSubmit={handleSubmit(async (data) => {
+        await executeAsync({
+          ...data,
+          programId: program.id,
+        });
+      })}
+      className="flex flex-col gap-6"
+    >
+      <label>
+        <span className="text-sm font-medium text-gray-800">Name</span>
+        <input
+          type="text"
+          className={cn(
+            "mt-2 block w-full rounded-md focus:outline-none sm:text-sm",
+            errors.name
+              ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
+              : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
+          )}
+          placeholder="Acme, Inc."
+          autoFocus={!isMobile}
+          {...register("name", {
+            required: true,
+          })}
+        />
+      </label>
+
+      <label>
+        <span className="text-sm font-medium text-gray-800">Email</span>
+        <input
+          type="email"
+          className={cn(
+            "mt-2 block w-full rounded-md focus:outline-none sm:text-sm",
+            errors.email
+              ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
+              : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
+          )}
+          placeholder="panic@thedis.co"
+          {...register("email", {
+            required: true,
+          })}
+        />
+      </label>
+
+      <label>
+        <span className="text-sm font-medium text-gray-800">
+          Website / Social media channel
+          <span className="font-normal text-neutral-500"> (optional)</span>
+        </span>
+        <input
+          type="text"
+          className={cn(
+            "mt-2 block w-full rounded-md focus:outline-none sm:text-sm",
+            errors.website
+              ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
+              : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
+          )}
+          placeholder="https://example.com"
+          {...register("website")}
+        />
+      </label>
+
+      <label>
+        <span className="text-sm font-medium text-gray-800">
+          How do you plan to promote {program.name}?
+        </span>
+        <ReactTextareaAutosize
+          className={cn(
+            "mt-2 block max-h-48 min-h-12 w-full rounded-md focus:outline-none sm:text-sm",
+            errors.proposal
+              ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
+              : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
+          )}
+          placeholder=""
+          minRows={3}
+          {...register("proposal", { required: true })}
+        />
+      </label>
+
+      <label>
+        <span className="text-sm font-medium text-gray-800">
+          Any additional questions or comments?
+          <span className="font-normal text-neutral-500"> (optional)</span>
+        </span>
+        <ReactTextareaAutosize
+          className={cn(
+            "mt-2 block max-h-48 min-h-12 w-full rounded-md focus:outline-none sm:text-sm",
+            errors.comments
+              ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
+              : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
+          )}
+          placeholder=""
+          minRows={3}
+          {...register("comments")}
+        />
+      </label>
+
+      <Button
+        text="Submit application"
+        className="mt-4 enabled:border-[var(--brand)] enabled:bg-[var(--brand)] enabled:hover:bg-[var(--brand)] enabled:hover:ring-[var(--brand-ring)]"
+        loading={isLoading}
+      />
+    </form>
+  );
+}

apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/application/page.tsx

@@ -0,0 +1,61 @@
+import { getProgram } from "@/lib/fetchers/get-program";
+import { notFound } from "next/navigation";
+import { CSSProperties } from "react";
+import { DetailsGrid } from "../details-grid";
+import { Header } from "../header";
+import { ProgramApplicationForm } from "./form";
+
+export default async function ApplicationPage({
+  params: { programSlug },
+}: {
+  params: { programSlug: string };
+}) {
+  const program = await getProgram({ slug: programSlug });
+
+  if (!program) {
+    notFound();
+  }
+
+  return (
+    <div
+      className="relative"
+      style={
+        {
+          "--brand": program.brandColor || "#3b82f6",
+          "--brand-ring": "rgb(from var(--brand) r g b / 0.2)",
+        } as CSSProperties
+      }
+    >
+      <Header
+        program={{
+          logo: program.logo,
+          wordmark: program.wordmark,
+        }}
+        slug={programSlug}
+        showApply={false}
+      />
+      <div className="p-6">
+        {/* Hero section */}
+        <div className="grid grid-cols-1 gap-5 sm:pt-20">
+          <p className="font-mono text-xs font-medium uppercase text-[var(--brand)]">
+            Affiliate Program
+          </p>
+          <h1 className="text-4xl font-semibold">{program.name} application</h1>
+          <p className="text-base text-neutral-700">
+            Submit your application to join the affiliate program.
+          </p>
+        </div>
+
+        {/* Program details grid */}
+        <DetailsGrid program={program} className="mt-10" />
+
+        {/* Application form */}
+        <div className="mt-10">
+          <ProgramApplicationForm
+            program={{ id: program.id, name: program.name, slug: program.slug }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/application/success/cta-buttons.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Button } from "@dub/ui";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+
+export function CTAButtons() {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+
+  return (
+    <>
+      <Button
+        type="button"
+        text={
+          status === "authenticated"
+            ? "Continue to Dub Partners"
+            : "Create your Dub Partners account"
+        }
+        className="border-[var(--brand)] bg-[var(--brand)] hover:bg-[var(--brand)] hover:ring-[var(--brand-ring)]"
+        onClick={() =>
+          router.push(status === "authenticated" ? "/" : "/register")
+        }
+      />
+      {status === "unauthenticated" && (
+        <Button
+          type="button"
+          variant="secondary"
+          text="Log in to Dub Partners"
+          onClick={() => router.push("/login")}
+        />
+      )}
+    </>
+  );
+}