dd: feat: capacity-check (#478)

* dd: feat: capacity check

* remove debug value

* added debug flag

* polish

* explore capacity wall

* copy + ui changes

* copy

* copy + fixes + css

* hubspot integration

Author: gioelecerati

apps/app/app/(main)/BentoGrids.tsx

@@ -35,13 +35,15 @@ export interface BentoGridsProps {
   isOverlayMode?: boolean;
   onTryPrompt?: (prompt: string) => void;
   onClipsLoaded?: (clips: any[]) => void;
+  hasCapacity?: boolean;
 }
 
 export function BentoGrids({
   initialClips,
   isOverlayMode = false,
   onTryPrompt,
   onClipsLoaded,
+  hasCapacity = true,
 }: BentoGridsProps) {
   const { clips, loading, hasMore, fetchClips, page } =
     useClipsFetcher(initialClips);
@@ -194,6 +196,7 @@ export function BentoGrids({
                     overallIndex={overallIndex}
                     isOverlayMode={isOverlayMode}
                     onTryPrompt={onTryPrompt}
+                    hasCapacity={hasCapacity}
                   />
                 );
               })}
@@ -234,6 +237,7 @@ function GridItem({
   overallIndex,
   isOverlayMode = false,
   onTryPrompt,
+  hasCapacity,
 }: {
   clipId: string;
   src: string;
@@ -249,6 +253,7 @@ function GridItem({
   isOverlayMode?: boolean;
   authorDetails?: Record<string, any>;
   onTryPrompt?: (prompt: string) => void;
+  hasCapacity?: boolean;
 }) {
   const href = slug ? `/clip/${slug}` : `/clip/id/${clipId}`;
   const { isPreviewOpen } = usePreviewStore();
@@ -266,20 +271,11 @@ function GridItem({
   };
 
   return (
-    <TrackedLink
-      href={href}
-      trackingEvent="explore_clip_clicked"
-      trackingProperties={{
-        clip_id: clipId,
-        clip_slug: slug,
-        clip_author_name: authorName,
-        location: isOverlayMode ? "overlay_bento_grid" : "explore_bento_grid",
-      }}
+    <div
       className={cn(
         "relative aspect-square lg:min-h-[300px] lg:aspect-auto block",
         className,
       )}
-      onClick={isOverlayMode ? handleClick : undefined}
     >
       {isDebug && (
         <div className="absolute top-1 left-1 z-40 bg-black/60 text-white text-xs font-mono px-1.5 py-0.5 rounded">
@@ -302,11 +298,12 @@ function GridItem({
           remixCount={remixCount}
           isOverlayMode={isOverlayMode}
           onTryPrompt={onTryPrompt}
+          hasCapacity={hasCapacity}
         />
       </div>
 
       <div className="pointer-events-none absolute inset-px rounded-xl shadow ring-1 ring-black/5 z-30"></div>
-    </TrackedLink>
+    </div>
   );
 }
 

apps/app/app/(main)/Header.tsx

@@ -4,14 +4,21 @@ import { Logo } from "@/components/sidebar";
 import { TrackedButton } from "@/components/analytics/TrackedButton";
 import { usePreviewStore } from "@/hooks/usePreviewStore";
 import { cn } from "@repo/design-system/lib/utils";
-import Link from "next/link";
 import { useEffect, useState } from "react";
 import { DiscordLogoIcon } from "@radix-ui/react-icons";
 import VideoAISparkles from "components/daydream/CustomIcons/VideoAISparkles";
+import { useCapacityCheck } from "@/hooks/useCapacityCheck";
+import { CapacityNotificationModal } from "@/components/modals/capacity-notification-modal";
+import { useRouter } from "next/navigation";
+import track from "@/lib/track";
+import Link from "next/link";
 
 export default function Header() {
   const { isPreviewOpen } = usePreviewStore();
   const [scrolled, setScrolled] = useState(false);
+  const { hasCapacity } = useCapacityCheck();
+  const [isCapacityModalOpen, setIsCapacityModalOpen] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -24,6 +31,17 @@ export default function Header() {
     };
   }, []);
 
+  const handleCreateClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    if (!hasCapacity) {
+      track("capacity_create_blocked", { location: "header" });
+      setIsCapacityModalOpen(true);
+    } else {
+      router.push("/create");
+    }
+  };
+
   return (
     <>
       {/* Custom style to override alwaysAnimatedButton for the circular floating button */}
@@ -46,26 +64,33 @@ export default function Header() {
 
       <header
         className={cn(
-          "bg-transparent sticky top-0 z-40 transition-colors duration-300 ease-in-out",
+          "bg-transparent sticky top-0 z-50 transition-colors duration-300 ease-in-out",
           scrolled && "backdrop-filter backdrop-blur-xl bg-opacity-50",
         )}
       >
         <nav
           aria-label="Global"
-          className="mx-auto flex items-center justify-between py-4 px-4 sm:px-6 lg:px-8"
+          className="mx-auto flex items-center justify-between py-4 px-6 lg:px-8"
         >
           <div className="flex flex-1 items-center">
             <a href="#" className="-m-1.5 p-1.5 flex items-center">
               <span className="sr-only">Daydream by Livepeer</span>
               <Logo />
             </a>
           </div>
-          
+
           {/* Centered Beta Badge */}
           <div className="flex-1 flex justify-center items-center">
-            <a href="https://livepeer.notion.site/15f0a348568781aab037c863d91b05e2" target="_blank" rel="noopener noreferrer" className="flex items-center px-4 py-1 rounded-full border border-blue-200 bg-white/70 backdrop-blur-sm text-blue-600 text-sm font-medium gap-2 shadow-sm hover:bg-white/90 transition-colors">
+            <a
+              href="https://livepeer.notion.site/15f0a348568781aab037c863d91b05e2"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center px-4 py-1 rounded-full border border-blue-200 bg-white/70 backdrop-blur-sm text-blue-600 text-sm font-medium gap-2 shadow-sm hover:bg-white/90 transition-colors"
+            >
               <span className="inline-block w-2 h-2 rounded-full bg-blue-500"></span>
-              <span className="sm:inline hidden">We&apos;re in beta. Send us your feedback and ideas →</span>
+              <span className="sm:inline hidden">
+                We&apos;re in beta. Send us your feedback and ideas →
+              </span>
               <span className="sm:hidden inline">Beta</span>
             </a>
           </div>
@@ -88,7 +113,7 @@ export default function Header() {
               <span className="hidden sm:inline ml-2">Join Discord</span>
             </TrackedButton>
             {/* Desktop-only Create button */}
-            <Link href="/create" className="hidden sm:block ml-4">
+            <div className="hidden sm:block ml-4" onClick={handleCreateClick}>
               <TrackedButton
                 trackingEvent="explore_header_start_creating_clicked"
                 trackingProperties={{ location: "explore_header" }}
@@ -102,17 +127,16 @@ export default function Header() {
                 <VideoAISparkles className={cn("text-black !w-10 !h-10")} />{" "}
                 Create
               </TrackedButton>
-            </Link>
+            </div>
           </div>
         </nav>
       </header>
 
       {/* Mobile-only floating Create button */}
-      <Link
-        href="/create"
+      <div
         className={cn(
           "fixed bottom-6 right-6 sm:hidden z-50",
-          isPreviewOpen && "opacity-0 pointer-events-none",
+          (isPreviewOpen || !hasCapacity) && "opacity-0 pointer-events-none",
         )}
       >
         <div className="rounded-full floating-shadow">
@@ -121,15 +145,21 @@ export default function Header() {
             trackingProperties={{ location: "explore_header_mobile_fab" }}
             size="lg"
             className={cn(
-              "!rounded-full h-16 w-16 text-black flex items-center justify-center p-0",
+              "!rounded-full h-20 w-20 text-black flex items-center justify-center p-0",
               "alwaysAnimatedButton circular-animated-button forced-white-bg",
               isPreviewOpen && "opacity-0 pointer-events-none",
             )}
+            onClick={handleCreateClick}
           >
-            <VideoAISparkles className={cn("text-black !w-12 !h-12")} />
+            <VideoAISparkles className={cn("text-black !w-16 !h-16")} />
           </TrackedButton>
         </div>
-      </Link>
+      </div>
+
+      <CapacityNotificationModal
+        isOpen={isCapacityModalOpen}
+        onClose={() => setIsCapacityModalOpen(false)}
+      />
     </>
   );
 }

apps/app/app/(main)/MainLayoutClient.tsx

@@ -1,17 +1,32 @@
 "use client";
 
-import { usePathname } from "next/navigation";
 import { BentoGrids, BentoGridsProps } from "./BentoGrids";
 import { PageViewTracker } from "@/components/analytics/PageViewTracker";
+import { CapacityToast } from "@/components/modals/capacity-toast";
+import { useCapacityCheck } from "@/hooks/useCapacityCheck";
+import { useCapacityToastStore } from "@/hooks/useCapacityToast";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
 
 export default function MainLayoutClient({
   initialClips,
   children,
 }: BentoGridsProps & { children: React.ReactNode }) {
+  const { hasCapacity } = useCapacityCheck();
+  const pathname = usePathname();
+  const { resetToastState } = useCapacityToastStore();
+
+  useEffect(() => {
+    if (pathname === "/") {
+      resetToastState();
+    }
+  }, [pathname, resetToastState]);
+
   return (
     <>
       <PageViewTracker eventName="explore_page_viewed" />
-      <BentoGrids initialClips={initialClips} />
+      <CapacityToast path="/" hasCapacity={hasCapacity} />
+      <BentoGrids initialClips={initialClips} hasCapacity={hasCapacity} />
       {children}
     </>
   );