Program onboarding flow

apps/web/app/api/mock/rewardful/campaigns/route.ts

@@ -62,7 +62,7 @@ export async function GET() {
       visitors: 150,
       leads: 39,
       conversions: 7,
-      affiliates: 12,
+      affiliates: 45,
     },
   ];
 

apps/web/app/api/programs/rewardful/campaigns/route.ts

@@ -0,0 +1,20 @@
+import { DubApiError } from "@/lib/api/errors";
+import { withWorkspace } from "@/lib/auth";
+import { RewardfulApi } from "@/lib/rewardful/api";
+import { rewardfulImporter } from "@/lib/rewardful/importer";
+import { NextResponse } from "next/server";
+
+// GET /api/programs/rewardful/campaigns - list rewardful campaigns
+export const GET = withWorkspace(async ({ workspace }) => {
+  if (!workspace.partnersEnabled) {
+    throw new DubApiError({
+      code: "forbidden",
+      message: "Partners are not enabled for this workspace",
+    });
+  }
+
+  const { token } = await rewardfulImporter.getCredentials(workspace.id);
+  const rewardfulApi = new RewardfulApi({ token });
+
+  return NextResponse.json(await rewardfulApi.listCampaigns());
+});

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/(new)/layout.tsx

@@ -0,0 +1,20 @@
+import RootProviders from "app/providers";
+import { FormWrapper } from "./new/form-wrapper";
+import { Header } from "./new/header";
+import { Steps } from "./new/steps";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <RootProviders>
+      <FormWrapper>
+        <div className="min-h-screen bg-white">
+          <Header />
+          <div className="md:grid md:grid-cols-[240px_minmax(0,1fr)]">
+            <Steps />
+            <main className="px-4 py-6 md:px-8">{children}</main>
+          </div>
+        </div>
+      </FormWrapper>
+    </RootProviders>
+  );
+}

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/(new)/new/connect/form.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import useWorkspace from "@/lib/swr/use-workspace";
+import { Shopify } from "@/ui/layout/sidebar/conversions/icons/shopify";
+import { Stripe } from "@/ui/layout/sidebar/conversions/icons/stripe";
+import { Button } from "@dub/ui";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+const GUIDES = [
+  {
+    name: "Connecting to Stripe",
+    icon: Stripe,
+    href: "https://d.to/stripe",
+  },
+  {
+    name: "Connecting to Shopify",
+    icon: Shopify,
+    href: "https://d.to/shopify",
+  },
+] as const;
+
+export function Form() {
+  const router = useRouter();
+  const [isPending, setIsPending] = useState(false);
+  const { id: workspaceId, slug: workspaceSlug } = useWorkspace();
+
+  const onClick = async () => {
+    if (!workspaceId) return;
+    setIsPending(true);
+    router.push(`/${workspaceSlug}/programs/new/overview`);
+  };
+
+  return (
+    <div className="space-y-10">
+      <div className="space-y-6">
+        <p className="text-sm text-neutral-600">
+          Ensuring your program is connect is simple, select the best guide that
+          suits your connection setup or something else.
+        </p>
+
+        <div className="flex flex-col gap-4">
+          {GUIDES.map(({ name, icon: Icon, href }) => (
+            <div
+              key={name}
+              className="flex items-center justify-between rounded-lg border border-neutral-200 bg-neutral-50 p-4"
+            >
+              <div className="flex items-center gap-3">
+                <Icon className="size-8" />
+                <span className="text-sm font-medium text-neutral-900">
+                  {name}
+                </span>
+              </div>
+              <Link href={href} target="_blank" rel="noopener noreferrer">
+                <Button
+                  type="button"
+                  text="Read guide"
+                  variant="secondary"
+                  className="h-8 w-fit px-3"
+                />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Button
+        text="Continue"
+        className="w-full"
+        loading={isPending}
+        type="button"
+        onClick={onClick}
+      />
+    </div>
+  );
+}

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/(new)/new/connect/page.tsx

@@ -0,0 +1,10 @@
+import { StepPage } from "../step-page";
+import { Form } from "./form";
+
+export default async function Page() {
+  return (
+    <StepPage title="Connecting Dub">
+      <Form />
+    </StepPage>
+  );
+}

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/(new)/new/form-wrapper.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useWorkspaceStore } from "@/lib/swr/use-workspace-store";
+import { ProgramData } from "@/lib/zod/schemas/program-onboarding";
+import { FormProvider, useForm } from "react-hook-form";
+
+export function FormWrapper({ children }: { children: React.ReactNode }) {
+  const [programOnboarding] =
+    useWorkspaceStore<ProgramData>("programOnboarding");
+
+  const methods = useForm<ProgramData>({
+    defaultValues: {
+      ...programOnboarding,
+      linkType: programOnboarding?.linkType ?? "short",
+      programType: programOnboarding?.programType ?? "new",
+      type: programOnboarding?.type ?? "flat",
+      amount: programOnboarding?.amount ?? null,
+      partners: programOnboarding?.partners?.length
+        ? programOnboarding.partners
+        : [{ email: "", key: "" }],
+    },
+  });
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+}