program details improvements

Author: pepeladeira

apps/web/app/app.dub.co/marketplace/[[...slug]]/page.tsx

@@ -1,3 +1,4 @@
+import { getNetworkProgram } from "@/lib/fetchers/get-network-program";
 import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
 import { MarketplaceExternalRouter } from "@/ui/partners/program-marketplace/external/marketplace-external-router";
 import {
@@ -37,8 +38,21 @@ export async function generateMetadata(props: {
   if (segments.length === 1 && segments[0] === "all") {
     title = "All Programs";
     description = "Browse all partner programs on Dub.";
-  } else if (segments.length === 1) {
-    title = "Program Details";
+  } else if (
+    segments.length === 1 &&
+    segments[0] !== "all" &&
+    segments[0] !== "popular"
+  ) {
+    const program = await getNetworkProgram({ slug: segments[0] });
+
+    if (program) {
+      title = program.name;
+      description =
+        program.description ||
+        `Join the ${program.name} affiliate program on Dub's Partner Network.`;
+    } else {
+      title = "Program Details";
+    }
   } else if (segments.length === 2 && segments[0] === "c") {
     const category = Object.values(Category).find(
       (value) => categoryToSlug(value) === segments[1],

apps/web/ui/partners/program-marketplace/external/marketplace-external-header.tsx

@@ -1,8 +1,29 @@
+"use client";
+
 import { Button, Wordmark } from "@dub/ui";
 import { APP_DOMAIN, PARTNERS_DOMAIN, cn } from "@dub/utils";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { MARKETPLACE_RESERVED_SLUGS } from "../utils/category-slug";
+
+function getPartnersLoginHref(pathname: string) {
+  const segments = pathname.split("/").filter(Boolean);
+
+  if (
+    segments[0] === "marketplace" &&
+    segments.length === 2 &&
+    !MARKETPLACE_RESERVED_SLUGS.has(segments[1])
+  ) {
+    return `${PARTNERS_DOMAIN}/login?next=${encodeURIComponent(`/marketplace/${segments[1]}`)}`;
+  }
+
+  return `${PARTNERS_DOMAIN}/login`;
+}
 
 export function MarketplaceExternalHeader() {
+  const pathname = usePathname();
+  const loginHref = getPartnersLoginHref(pathname);
+
   return (
     <header className="border-border-subtle border-b bg-white">
       <div className="mx-auto flex h-16 w-full max-w-screen-xl items-center justify-between px-4 sm:px-6 lg:px-8">
@@ -19,7 +40,7 @@ export function MarketplaceExternalHeader() {
 
         <div className="flex items-center gap-2">
           <Link
-            href={`${PARTNERS_DOMAIN}/login`}
+            href={loginHref}
             className="text-content-default hover:text-content-emphasis px-3 py-2 text-sm font-medium transition-colors"
           >
             Log in

apps/web/ui/partners/program-marketplace/external/marketplace-external-program-page.tsx

@@ -1,23 +1,14 @@
 import { getNetworkProgram } from "@/lib/fetchers/get-network-program";
 import { ApplicationAnalytics } from "@/ui/application-analytics";
-import { BLOCK_COMPONENTS } from "@/ui/partners/lander/blocks";
-import { LanderHero } from "@/ui/partners/lander/lander-hero";
-import { LanderRewards } from "@/ui/partners/lander/lander-rewards";
-import { ProgramEligibilityCard } from "@/ui/partners/program-eligibility-card";
 import {
   getMarketplaceHref,
-  getMarketplaceProgramHref,
+  getMarketplacePublicApplyHref,
 } from "@/ui/partners/program-marketplace/get-marketplace-href";
-import { ProgramCategory } from "@/ui/partners/program-marketplace/program-category";
-import { ProgramRewardsDisplay } from "@/ui/partners/program-marketplace/program-rewards-display";
-import { Button, ChevronRight, Shop, Tooltip } from "@dub/ui";
-import { Globe } from "@dub/ui/icons";
-import {
-  OG_AVATAR_URL,
-  PARTNERS_DOMAIN,
-  cn,
-  getDomainWithoutWWW,
-} from "@dub/utils";
+import { MarketplaceProgramBackLink } from "@/ui/partners/program-marketplace/marketplace-program-back-link";
+import { MarketplaceProgramDetailBody } from "@/ui/partners/program-marketplace/marketplace-program-detail-body";
+import { MarketplaceProgramDetailsLayout } from "@/ui/partners/program-marketplace/marketplace-program-details-layout";
+import { MarketplaceProgramHero } from "@/ui/partners/program-marketplace/marketplace-program-hero";
+import { Button } from "@dub/ui";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { MarketplaceExternalShell } from "./marketplace-external-shell";
@@ -35,220 +26,31 @@ export async function MarketplaceExternalProgramPage({
     redirect(getMarketplaceHref());
   }
 
-  const isDarkImage = program.marketplaceHeaderImage?.includes("dark");
-  const applyHref = `${PARTNERS_DOMAIN}${getMarketplaceProgramHref(program.slug)}`;
-
   return (
     <>
       <ApplicationAnalytics />
       <MarketplaceExternalShell variant="none">
-        <div className="mx-auto max-w-screen-md">
-          <div className="mb-6 flex items-center gap-1.5">
-            <Link
-              href={getMarketplaceHref()}
-              className="bg-bg-subtle hover:bg-bg-emphasis flex size-8 shrink-0 items-center justify-center rounded-lg transition-[transform,background-color] duration-150 active:scale-95"
-            >
-              <Shop className="text-content-default size-4" />
-            </Link>
-            <ChevronRight className="text-content-subtle size-2.5 shrink-0 [&_*]:stroke-2" />
-            <span className="text-content-emphasis text-lg font-semibold">
-              {program.name}
-            </span>
-          </div>
-
-          <div className="mb-6 flex justify-end">
-            <Link href={applyHref}>
-              <Button text="Apply on Dub Partners" className="h-9 rounded-lg" />
-            </Link>
-          </div>
-
-          <div
-            className={cn(
-              "relative",
-              program.featuredOnMarketplaceAt &&
-                "border-border-subtle overflow-hidden rounded-xl border",
-            )}
-          >
-            {program.featuredOnMarketplaceAt &&
-              program.marketplaceHeaderImage && (
-                <>
-                  <img
-                    src={program.marketplaceHeaderImage}
-                    alt={program.name}
-                    className="absolute inset-0 size-full object-cover"
-                  />
-                  {!isDarkImage && (
-                    <div className="absolute inset-0 size-full bg-gradient-to-t from-white via-white/75 to-transparent" />
-                  )}
-                </>
-              )}
-            <div className="relative px-4 py-8 sm:px-0">
-              <img
-                src={program.logo || `${OG_AVATAR_URL}${program.name}`}
-                alt={program.name}
-                className="size-16 rounded-full border border-white/20"
-              />
-
-              <div className="mt-6 flex flex-col">
-                <span
-                  className={cn(
-                    "text-3xl font-semibold",
-                    isDarkImage && "text-content-inverted",
-                  )}
-                >
-                  {program.name}
-                </span>
-
-                <div
-                  className={cn(
-                    "mt-2 flex max-w-md items-center gap-1",
-                    isDarkImage && "text-content-inverted/90",
-                  )}
+        <MarketplaceProgramDetailsLayout
+          header={<MarketplaceProgramBackLink />}
+          hero={
+            <MarketplaceProgramHero
+              program={program}
+              applySlot={
+                <Link
+                  href={getMarketplacePublicApplyHref(program.slug)}
+                  className="inline-block w-fit"
                 >
-                  {program.description ||
-                    `${program.name} is a program in the Dub Partner Network. Join the network to start partnering with them.`}
-                </div>
-              </div>
-
-              <div className="mt-6 flex gap-8">
-                {Boolean(program.rewards?.length || program.discount) && (
-                  <div>
-                    <span
-                      className={cn(
-                        "block text-xs font-medium",
-                        isDarkImage
-                          ? "text-content-inverted"
-                          : "text-neutral-400",
-                      )}
-                    >
-                      Rewards
-                    </span>
-                    <ProgramRewardsDisplay
-                      rewards={program.rewards}
-                      discount={program.discount}
-                      isDarkImage={isDarkImage}
-                      className="mt-1"
-                      descriptionClassName="max-w-[240px]"
-                    />
-                  </div>
-                )}
-                {Boolean(program.categories?.length) && (
-                  <div className="min-w-0">
-                    <span
-                      className={cn(
-                        "block text-xs font-medium",
-                        isDarkImage
-                          ? "text-content-inverted"
-                          : "text-neutral-400",
-                      )}
-                    >
-                      Category
-                    </span>
-                    <div className="mt-1 flex items-center gap-1.5">
-                      {program.categories
-                        .slice(0, 1)
-                        ?.map((category) => (
-                          <ProgramCategory
-                            key={category}
-                            category={category}
-                            className={cn(
-                              isDarkImage && "text-content-inverted",
-                            )}
-                          />
-                        ))}
-                      {program.categories.length > 1 && (
-                        <Tooltip
-                          content={
-                            <div className="flex flex-col gap-0.5 p-2">
-                              {program.categories.slice(1).map((category) => (
-                                <ProgramCategory
-                                  key={category}
-                                  category={category}
-                                  className={cn(
-                                    isDarkImage && "text-content-inverted",
-                                  )}
-                                />
-                              ))}
-                            </div>
-                          }
-                        >
-                          <div
-                            className={cn(
-                              "-ml-1.5 flex size-6 items-center justify-center rounded-md text-xs font-medium",
-                              isDarkImage && "text-content-inverted/70",
-                            )}
-                          >
-                            +{program.categories.length - 1}
-                          </div>
-                        </Tooltip>
-                      )}
-                    </div>
-                  </div>
-                )}
-                {program.url && (
-                  <div className="min-w-0">
-                    <span className="block text-xs font-medium text-neutral-400">
-                      Website
-                    </span>
-                    <Link
-                      href={program.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className={cn(
-                        "mt-1 flex max-w-[220px] items-center gap-1.5 text-sm font-medium",
-                        isDarkImage
-                          ? "text-content-inverted/90 hover:text-content-inverted"
-                          : "text-content-default hover:text-content-emphasis",
-                      )}
-                    >
-                      <Globe className="size-4 shrink-0" />
-                      <span className="truncate">
-                        {getDomainWithoutWWW(program.url)} ↗
-                      </span>
-                    </Link>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <LanderHero
-            program={program}
-            landerData={program.landerData || {}}
-            showLabel={false}
-            className="mt-8 sm:mt-8"
-            heading="h2"
-            titleClassName="text-2xl"
-          />
-
-          <LanderRewards
-            className="mt-4"
-            rewards={program.rewards || []}
-            discount={program.discount || null}
-            bounties={program.bounties}
-          />
-
-          {program.applicationRequirements?.length ? (
-            <ProgramEligibilityCard
-              requirements={program.applicationRequirements}
-            />
-          ) : null}
-
-          {program.landerData && (
-            <div className="mt-16 grid grid-cols-1 gap-10">
-              {program.landerData.blocks.map((block, idx) => {
-                const Component = BLOCK_COMPONENTS[block.type];
-                return Component ? (
-                  <Component
-                    key={idx}
-                    block={block}
-                    group={{ logo: program.logo }}
+                  <Button
+                    text="Apply"
+                    className="h-10 w-fit rounded-lg px-6 text-sm font-medium"
                   />
-                ) : null;
-              })}
-            </div>
-          )}
-        </div>
+                </Link>
+              }
+            />
+          }
+        >
+          <MarketplaceProgramDetailBody program={program} />
+        </MarketplaceProgramDetailsLayout>
       </MarketplaceExternalShell>
     </>
   );

apps/web/ui/partners/program-marketplace/get-marketplace-href.ts

@@ -119,3 +119,7 @@ export function getMarketplaceCanonicalUrl(pathname: string) {
 export function getMarketplacePartnersProgramUrl(programSlug: string) {
   return `https://partners.dub.co${getMarketplaceProgramHref(programSlug)}`;
 }
+
+export function getMarketplacePublicApplyHref(programSlug: string) {
+  return getMarketplacePartnersProgramUrl(programSlug);
+}

apps/web/ui/partners/program-marketplace/marketplace-program-back-link.tsx

@@ -0,0 +1,15 @@
+import { getMarketplaceAllHref } from "@/ui/partners/program-marketplace/get-marketplace-href";
+import { ChevronLeft } from "@dub/ui";
+import Link from "next/link";
+
+export function MarketplaceProgramBackLink() {
+  return (
+    <Link
+      href={getMarketplaceAllHref()}
+      className="group inline-flex items-center gap-1 text-xs font-medium text-neutral-800 transition-colors hover:text-neutral-500"
+    >
+      <ChevronLeft className="size-[10px] text-neutral-500 transition-transform group-hover:-translate-x-0.5" />
+      All Programs
+    </Link>
+  );
+}