Project Brief — Infographic Templates (Replicate Cover & Divider system)
0) Summary

Replace the current Infographic AI page with a Gallery + Picker flow:

Users browse infographic slides (single-slide items).

Each card has a checkbox; users can pick up to 4 slides (can be 1–4, price is always $14.99).

“Buy Now” creates a single checkout; on success, deliver an instant download (zip of the selected slides) compatible with PowerPoint, Keynote, Google Slides.

Reuse the exact billing/ownership/download patterns we shipped for Cover & Divider.

1) What to Reuse (from Cover & Divider)

Watermarked gallery (thumbnails and modal preview).

Filters: Top-tier industry (FIG, TMT, Healthcare/Pharma, General), sub-categories (list below), search, price range.

Creator upload → admin approve → active → gallery pipeline.

Stripe global single-price product flow + webhook to mark purchases paid.

Ownership → instant download endpoint and auto-download on return (polling).

My Purchases list and secure downloads.

2) New UX/Behavior (Infographics)

Page title: Infographic Templates.

Each card = one infographic slide (not a set).

Card UI: thumbnail, title, top-tier badge, subcat tag(s), formats text, price reference (“Included in $14.99 bundle”).

Checkbox on each card (top-left) → selection state persists while browsing.

Selection tray (sticky footer) shows: Selected: N / 4 + “Buy Now” button.

Limit: hard cap at 4 (disable additional checks; toast: “You can select up to 4 infographics”).

Clicking card body opens lightbox preview (same interactions as stock photos); check/uncheck remains available on the card.

Remove any custom design CTA (no AI prompt, no custom work).

3) Taxonomy / Filters

Top-tier industries (exact labels):

Financial Institutions Group (FIG)

Technology, Media, and Telecom (TMT)

Healthcare/Pharmaceutical

General

Sub-categories (exact labels):

Manufacturing

Healthcare

Finance & Insurance

Retail Trade

Information Technology (IT) / Information

Professional, Scientific, & Technical Services

Construction

Real Estate

Accommodation & Food Services

Transportation & Warehousing

Utilities

Agriculture, Forestry, Fishing, & Hunting

Public Administration

Entertainment

Filters UI:

Search (title)

Top-tier (select)

Category (simple style grouping: business/professional/creative/modern) — same as Covers

Sub-category (select from list above)

Price min/max (optional; keep for parity)

4) Data Model (mirror Covers with lighter fields)

Create a new table (or reuse existing table with a type='infographic' discriminator—your call). Minimal new table:

infographic_templates

id (PK)

creator_id (nullable)

title (text)

top_tier (enum: FIG, TMT, Healthcare/Pharma, General)

subcategories (text[]) – from the list above

category (text) – style: business|professional|creative|modern

price_cents (int) – store MSRP but UI charges via bundle price

currency (text, default “usd”)

preview_image_url (thumbnail)

Formats (one or more): pptx_url, keynote_url, gslides_url, or download_bundle_url (zip)

is_active (bool)

approval_status (pending|approved|rejected)

created_at (timestamp)

Purchases (bundle of selected items)

Reuse existing cover_purchases pattern or create a new infographic_purchases table:

id, user_id, status, download_url, stripe_session_id, stripe_payment_intent, amount_cents, currency, created_at

Add selected_ids (text[]) to store the 1–4 template IDs selected at checkout (or use a join table infographic_purchase_items (purchase_id, template_id)).

Note: File delivery should produce one ZIP containing the selected items (see §6).

5) API Requirements

Gallery/Filters

GET /api/infographics → list with filters: q, toptier, category, subcat, min, max.

GET /api/infographics/:id → detail for modal preview.

Creator Upload

POST /api/creator/infographics (auth)
Body: title, top_tier, subcategories[], category, preview_image_url, pptx_url?, keynote_url?, gslides_url?, download_bundle_url?
Stored as approval_status='pending', is_active=false.

Admin Approve

PATCH /api/admin/infographics/:id/activate { active: boolean } and/or update approval_status.

Checkout (Bundle of up to 4)

POST /api/infographics/checkout (auth)
Body: { selectedIds: string[] } (1–4 items)
Server:

Validate selected IDs exist and are approved & active.

Create pending purchase (record selected_ids).

Create Stripe Checkout for a single global price ($14.99) regardless of count (1–4).

success_url includes purchase=<id> (for auto-download polling).

Return { checkoutUrl, purchaseId }.

Ownership / Download

GET /api/infographics/purchases/:id (auth) → returns purchase row (status, download_url).

GET /api/infographics/:id/my-status is not needed per-item (ownership is for the bundle purchase). Optional to expose a “My purchases” list:

GET /api/me/infographic-purchases → list for Account page.

GET /api/infographics/purchases/:id/download (auth) → verifies paid, redirects to the signed ZIP URL (or streams).

Webhook

Reuse the existing Stripe webhook route; recognize new product (below) and mark infographic purchase as paid, then set the purchase’s download_url to the assembled ZIP (see §6).

6) Download Assembly (ZIP for selected items)

MVP behavior:

On checkout create: store selected_ids with the purchase.

On webhook (session completed):

Build a ZIP containing the selected slides:

Prefer the format hierarchy: if download_bundle_url present use that item’s folder/zip; else include the best available source (pptx_url OR keynote_url OR gslides_url as a link.txt inside the zip).

Upload the ZIP to storage (S3 or your CDN) and set purchase download_url to that ZIP.

On success return, the page polls GET /api/infographics/purchases/:id until status==='paid' and download_url is set; then auto-start download.

If ZIP building is heavy, you can defer: set download_url to a dynamic endpoint that zips on demand and streams (caches result by purchase_id).

7) Stripe (single, global price)

New product for infographics so reporting is clean:

Product ID: ibrandbiz_infographic_bundle

Price lookup_key: ibrandbiz_infographic_bundle_price_v1

Amount: 1499 (USD)

Checkout always uses quantity: 1 and the global price (even if user selected 1–4 slides).

Keep the webhook and env pattern you used for Cover & Divider. (Optional: same Pro coupon path.)

ENV

INFOGRAPHIC_BUNDLE_PRICE_CENTS=1499
INFOGRAPHIC_BUNDLE_CURRENCY=usd

8) Frontend Requirements

Route: /business-assets/templates/infographics (replace/remove the current Infographic AI route).

Gallery Grid:

Card with thumbnail, top-tier badge, 1–2 subcat chips, small formats text (“PPTX / Keynote / Slides”), and a checkbox (top-left).

Clicking image opens lightbox (zoomed, watermarked). Checkbox changes don’t open lightbox.

Disabled checkbox when 4 already selected.

Selection Tray (fixed bottom on scroll):

Left: “Selected: N / 4”

Right: Button “Buy Now – $14.99” (disabled if N=0)

On click → POST /api/infographics/checkout with the selectedIds.

Success Return:

Recognize ?success=true&purchase=<id> → poll /api/infographics/purchases/:id for up to ~20s → auto-download ZIP when ready → toast fallback if delayed.

My Purchases:

Show past infographic purchases with a Download button (calls /api/infographics/purchases/:id/download).

Watermark

Same overlay CSS as Covers (gallery + lightbox).

Accessibility

Checkbox is keyboard-focusable; button has clear focus ring; lightbox closes via ESC.

9) Contributor Upload (mirror Covers)

Add an “Upload Infographic Template” page mirroring the Covers creator form:

Fields: title, top_tier, subcategories[], category, preview_image_url, (pptx_url | keynote_url | gslides_url | zip)

Submit to /api/creator/infographics → pending

Admin toggles approval_status='approved', is_active=true.

Monetization: reuse existing creator payouts logic (same as other marketplace assets).

10) Sidebar & Navigation

Under Business Assets → Templates → Infographic Templates.

Remove the old Infographic AI page/entry and route.

11) Acceptance Criteria (must pass)

Gallery loads active, approved infographic items with watermark overlay.

Filters work (search, top-tier, category, sub-category, price).

Checkboxes: user can select 1–4 items; the 5th attempt is blocked with a toast.

Selection tray shows N/4 and Buy Now – $14.99; disabled when N=0.

Buy Now launches Stripe Checkout (single global price).

On success redirect, auto-download begins (ZIP of selected items).

“My Purchases” lists prior bundles; Download works only when paid.

Creator upload → admin approve → item appears in gallery.

Old Infographic AI UI/route removed.

Mobile/desktop responsive; keyboard accessible; no console errors.

12) Edge Cases

If an item becomes inactive after it was selected but before checkout → backend should validate and return a clear error: “One or more items are unavailable. Please reselect.”

If the user opens success URL before webhook finishes → poll until paid, then download; after timeout show toast.

If any selected item has only a Google Slides link → include a small README.txt and links.txt inside the ZIP pointing to the Slides file(s).