Title

AI Logo Creator – Premium Paywall (match Brand Kit modal)

Goal

Gate premium features on /brand-development/ai-logo-creator with a modal identical in look/feel to the Brand Kit paywall. Non-premium users see the modal; premium users pass through without friction.

Behavior

Trigger: Show the paywall when a non-premium user:

Clicks Generate or Customize Logo, or

Lands on the page (optional; if Brand Kit gates on action, mirror that).

Dismiss: “Maybe Later” closes the modal and keeps the user in limited mode.

Upgrade: “Upgrade to Premium” routes to our upgrade flow (/pricing or existing billing portal).

Persistence: If the user clicks Maybe Later, store a timestamp in localStorage (aiLogoPaywallDismissedAt) and suppress the modal for 24 hours unless they click Customize Logo again (then show it).

Plan detection: Use the same isPremium source as Brand Kit
(Auth custom claim or users/{uid}.plan). Fallback to false if not loaded yet.

Brand: Use the existing Brand Kit paywall component/styles for visual parity.

UI Copy (match screenshot)

Header: Upgrade to Premium
Body: Generate complete brand kits with logos, colors, fonts, and slogans. Get access to brand kit generation with a premium subscription.

Card title: Premium Benefits
Bullets:

Up to 8 AI-generated options instead of 1

Advanced tone and style options

Export to PDF, DOCX, and Google Docs

Save and organize your creations

Priority support and early access features

Buttons:

Left: Maybe Later

Right (primary, gradient): Upgrade to Premium

Implementation Notes

Reuse the Brand Kit paywall component if it exists (e.g., PremiumModal).

If not, create AiLogoPremiumModal.tsx by copying the Brand Kit modal and swapping copy.

Where to hook:

Page: client/src/pages/business-development/AILogoCreator.tsx

Intercept the actions: Generate and Customize Logo.

If !isPremium, setShowPaywall(true) and do not proceed with the action until upgraded or dismissed.

Limited mode (on Maybe Later):

Allow 1 AI generation per session (or whatever Brand Kit uses).

Keep Customize Logo available only for the generated draft (no multi-option grid).

Micro-diffs (examples – adapt to actual component names)

1) AILogoCreator.tsx – gate actions

--- a/client/src/pages/business-development/AILogoCreator.tsx
+++ b/client/src/pages/business-development/AILogoCreator.tsx
@@ -1,6 +1,9 @@
 import { useLocation } from "wouter";
+import { useUserPlan } from "@/hooks/useUserPlan"; // same hook Brand Kit uses, or equivalent
+import AiLogoPremiumModal from "@/components/paywalls/AiLogoPremiumModal"; // reuse or copy Brand Kit modal
 ...
 export default function AILogoCreator() {
   const [, navigate] = useLocation();
+  const { isPremium } = useUserPlan() ?? { isPremium: false };
+  const [showPaywall, setShowPaywall] = React.useState(false);

   const onGenerateClick = () => {
-    doGenerate();
+    if (!isPremium) return setShowPaywall(true);
+    doGenerate();
   };

   const handleCustomize = (svg: string) => {
-    proceedToComposer(svg);
+    if (!isPremium) return setShowPaywall(true);
+    proceedToComposer(svg);
   };

   return (
     <>
       {/* existing UI */}
+      <AiLogoPremiumModal
+        open={showPaywall}
+        onClose={() => setShowPaywall(false)}
+        onUpgrade={() => navigate("/pricing")} />
     </>
   );
 }


2) Reuse Brand Kit modal or create one (copy)

If Brand Kit has a generic PremiumModal, pass props:

title, subtitle, bullets[], onUpgrade, onDismiss.

If creating a new file: client/src/components/paywalls/AiLogoPremiumModal.tsx
(clone Brand Kit modal markup, replace copy with UI Copy above).

3) Dismiss persistence (optional, ≤8 lines)

--- a/client/src/pages/business-development/AILogoCreator.tsx
+++ b/client/src/pages/business-development/AILogoCreator.tsx
@@ -20,6 +20,12 @@
+React.useEffect(() => {
+  const ts = localStorage.getItem("aiLogoPaywallDismissedAt");
+  if (ts && Date.now() - Number(ts) < 24*60*60*1000) setShowPaywall(false);
+}, []);
+
+const onDismissPaywall = () => { localStorage.setItem("aiLogoPaywallDismissedAt", String(Date.now())); setShowPaywall(false); };


Wire onClose={onDismissPaywall} on the modal.

Acceptance Criteria

Non-premium → paywall shows on Generate/Customize attempts.

Maybe Later closes modal, allows limited use; persists for 24h.

Upgrade to Premium sends user to /pricing (or billing portal).

Premium users never see the paywall.

Styling perfectly matches the Brand Kit modal (icons, gradient box, buttons).

QA

Log in as non-premium:

Click Generate → modal appears → Maybe Later → can generate 1 option.

Click Customize Logo → modal appears again (unless you choose to allow after one generation).

Log in as premium: no modal, normal flow.

Refresh with Maybe Later recorded → modal suppressed until 24h or user re-clicks gated actions (depending on your chosen rule).

Mobile: modal is responsive and scrollable.