finalize

steven-tey · steven-tey · commit e7bdc60c089b · 2026-05-07T23:10:23.000-07:00
diff --git a/apps/web/app/api/domains/route.ts b/apps/web/app/api/domains/route.ts
@@ -207,6 +207,9 @@ export const POST = withWorkspace(
             slug: slug,
             projectId: workspace.id,
             primary: totalDomains === 0,
+            ...(slug.endsWith(".dub.link") && {
+              verified: true,
+            }),
             ...(placeholder && { placeholder }),
             expiredUrl,
             notFoundUrl,
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/products/product-selector.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/products/product-selector.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { MarkdownDescription } from "@/ui/shared/markdown-description";
-import { Button, Crown, DubProductIcon, type Icon } from "@dub/ui";
+import { Button, DubProductIcon } from "@dub/ui";
 import { capitalize } from "@dub/utils";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
@@ -10,20 +10,16 @@ import { useOnboardingProgress } from "../../use-onboarding-progress";
 
 const products = {
   partners: {
-    image: "https://assets.dub.co/cms/trophy.webp",
+    image: "https://assets.dub.co/icons/trophy.webp",
     title: "Dub Partners",
     href: "https://dub.co/partners",
-    planLabel: "Paid plan required",
-    planIcon: Crown,
     description:
       "Modern [affiliate programs](https://dub.co/partners) with [global payouts](https://dub.co/help/article/partner-payouts) and [accurate attribution](https://dub.co/help/article/program-analytics).",
   },
   links: {
-    image: "https://assets.dub.co/cms/link.webp",
+    image: "https://assets.dub.co/icons/link.webp",
     title: "Dub Links",
     href: "https://dub.co/links",
-    planLabel: "Free plan available",
-    planIcon: undefined,
     description:
       "[Short links](https://dub.co/help/category/link-management), [QR codes](https://dub.co/help/article/custom-qr-codes), [real-time analytics](https://dub.co/help/article/dub-analytics), and [conversion tracking](https://dub.co/docs/conversions/quickstart).",
   },
@@ -37,8 +33,6 @@ export function ProductSelector() {
           key={key}
           product={key as "links" | "partners"}
           icon={product.image}
-          planLabel={product.planLabel}
-          planIcon={product.planIcon}
           title={
             <a
               href={product.href}
@@ -63,63 +57,53 @@ export function ProductSelector() {
 function ProductOption({
   product,
   icon,
-  planLabel,
-  planIcon: PlanIcon,
   title,
   description,
   cta,
 }: {
   product: "links" | "partners";
   icon: string;
-  planLabel: string;
-  planIcon?: Icon;
   title: ReactNode;
   description: string;
   cta: string;
 }) {
   const { continueTo, isLoading, isSuccessful } = useOnboardingProgress();
   const plausible = usePlausible();
   return (
-    <div className="relative flex h-full flex-col items-center rounded-xl border border-neutral-200 bg-white p-3 transition-all">
-      <div className="relative flex h-52 w-full items-center justify-center rounded-xl bg-neutral-50">
-        <div className="absolute inset-x-2 top-2 flex h-6 items-center justify-center gap-2 rounded-lg border border-neutral-200 bg-white text-xs font-semibold text-neutral-600">
-          {PlanIcon && <PlanIcon className="size-3.5 text-neutral-900" />}
-          {planLabel}
-        </div>
-        <div className="relative mt-8 size-32">
-          <Image
-            src={icon}
-            alt=""
-            fill
-            className="object-contain"
-            fetchPriority="high"
-          />
-        </div>
+    <div className="relative flex h-full flex-col items-center gap-6 rounded-xl border border-neutral-300 p-6 pt-12 transition-all">
+      <div className="relative size-36">
+        <Image
+          src={icon}
+          alt=""
+          fill
+          className="object-contain"
+          fetchPriority="high"
+        />
+      </div>
+      <div className="space-y-2 text-center">
+        <span className="text-base font-semibold text-neutral-900">
+          {title}
+        </span>
+        <MarkdownDescription className="text-sm text-neutral-500">
+          {description}
+        </MarkdownDescription>
       </div>
-      <div className="p-2">
-        <div className="mt-2 space-y-3 text-center">
-          <span className="text-base font-semibold text-neutral-900">{title}</span>
-          <MarkdownDescription className="text-sm leading-snug text-neutral-500">
-            {description}
-          </MarkdownDescription>
-        </div>
-        <div className="mt-6 flex w-full grow flex-col justify-end">
-          <Button
-            type="button"
-            variant="primary"
-            className="h-10 rounded-lg text-sm"
-            onClick={() => {
-              plausible("Selected Product", {
-                props: {
-                  product: capitalize(product),
-                },
-              });
-              continueTo("domain", { params: { product } });
-            }}
-            loading={isLoading || isSuccessful}
-            text={cta}
-          />
-        </div>
+      <div className="flex w-full grow flex-col justify-end gap-2">
+        <Button
+          type="button"
+          variant="primary"
+          className="rounded-lg"
+          onClick={() => {
+            plausible("Selected Product", {
+              props: {
+                product: capitalize(product),
+              },
+            });
+            continueTo("domain", { params: { product } });
+          }}
+          loading={isLoading || isSuccessful}
+          text={cta}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/ui/partners/program-link-configuration.tsx b/apps/web/ui/partners/program-link-configuration.tsx
@@ -18,13 +18,21 @@ import {
   Wordmark,
 } from "@dub/ui";
 import { ArrowTurnRight2, ChevronRight, LoadingSpinner } from "@dub/ui/icons";
-import { cn, fetcher, getApexDomain, getPrettyUrl, truncate } from "@dub/utils";
+import {
+  cn,
+  fetcher,
+  getApexDomain,
+  getPrettyUrl,
+  isWorkspaceBillingTrialActive,
+  truncate,
+} from "@dub/utils";
 import { AnimatePresence, motion } from "motion/react";
 import { FormEvent, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import useSWRImmutable from "swr/immutable";
 import { useDebounce } from "use-debounce";
 import { useAddEditDomainModal } from "../modals/add-edit-domain-modal";
+import { useRegisterDomainModal } from "../modals/register-domain-modal";
 
 type DomainProps = {
   domain: string | null;
@@ -131,9 +139,10 @@ export function ProgramLinkConfiguration({
 }
 
 function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
-  const { slug } = useWorkspace();
+  const { slug, trialEndsAt } = useWorkspace();
   const { allWorkspaceDomains: domains, loading: isLoadingDomains } =
     useDomains();
+  const trialActive = isWorkspaceBillingTrialActive(trialEndsAt);
 
   const [state, setState] = useState<"idle" | "select">(
     domain ? "select" : "idle",
@@ -148,6 +157,15 @@ function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
       },
     });
 
+  const { RegisterDomainModal, setShowRegisterDomainModal } =
+    useRegisterDomainModal({
+      onSuccess: (domain) => {
+        onDomainChange(domain);
+        setState("select");
+      },
+      setRegisteredParam: false,
+    });
+
   const idleOptions = useMemo(
     () => [
       {
@@ -163,25 +181,38 @@ function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
         },
         loading: isLoadingDomains,
       },
-      {
-        icon: <Wordmark className="h-3 text-neutral-900" />,
-        title: "Use .dub.link subdomain",
-        badge: "Instant setup",
-        badgeClassName: "bg-bg-inverted/10 text-neutral-800",
-        description: "A fast way to launch. Switch to a custom domain later.",
-        onSelect: () => setShowSubdomainModal(true),
-      },
+      trialActive
+        ? {
+            icon: <Wordmark className="h-3 text-neutral-900" />,
+            title: "Use .dub.link subdomain",
+            badge: "Instant setup",
+            badgeClassName: "bg-bg-inverted/10 text-neutral-800",
+            description:
+              "A fast way to launch. Switch to a custom domain later.",
+            onSelect: () => setShowSubdomainModal(true),
+          }
+        : {
+            icon: "https://assets.dub.co/icons/crown.webp",
+            title: "Claim a free .link domain",
+            badge: "No setup",
+            badgeClassName: "bg-green-100 text-green-800",
+            description: "Free for one year with your paid account.",
+            onSelect: () => setShowRegisterDomainModal(true),
+          },
     ],
     [
       domains,
       isLoadingDomains,
+      trialActive,
       setShowAddEditDomainModal,
+      setShowRegisterDomainModal,
       setShowSubdomainModal,
     ],
   );
 
   return (
     <>
+      <RegisterDomainModal />
       <AddEditDomainModal />
       <Modal
         showModal={showSubdomainModal}
@@ -250,9 +281,17 @@ function DomainOnboarding({ domain, onDomainChange }: DomainProps) {
                       >
                         <div className="flex items-center gap-3">
                           <div className="bg-bg-inverted/5 flex size-10 items-center justify-center rounded-lg">
-                            <div className="transition-transform ease-out group-hover:scale-105">
-                              {option.icon}
-                            </div>
+                            {typeof option.icon === "string" ? (
+                              <img
+                                src={option.icon}
+                                alt=""
+                                className="size-7 object-contain transition-transform ease-out group-hover:scale-105"
+                              />
+                            ) : (
+                              <div className="transition-transform ease-out group-hover:scale-105">
+                                {option.icon}
+                              </div>
+                            )}
                           </div>
                           <div className="flex flex-col">
                             <div className="flex items-center gap-1">
@@ -548,7 +587,6 @@ function DubLinkSubdomainForm({
 function DomainOnboardingSelection({
   domain,
   onDomainChange,
-  onBack,
 }: DomainProps & { onBack: () => void }) {
   const { id: workspaceId } = useWorkspace();
 
@@ -570,7 +608,7 @@ function DomainOnboardingSelection({
       />
 
       <p className="mt-2 text-xs font-normal text-neutral-500">
-        This domain will be used for your program’s referral links
+        This domain will be used for your program's referral links
       </p>
 
       <AnimatePresence>
