← Tous les designs

gauth-0002-library-programs-broadcasts-notes · frontend/src

Spec — Unified Program Library v2

Implementation spec for Program Library v2 (current).dc.html (design) and Program Library v2 - AntD code.dc.html (antd composition).

Audience: a developer or Claude Code working in RandomCoffee/randomcoffee, branch master, under frontend/src/.

---

1. What this feature is

Today the template library is a flat grid of use cases at frontend/src/pages/account/admin/campaigns/templates.tsx (UseCaseLibrary), reachable from the sidebar as Campaigns → Use Cases Library.

v2 turns it into a single unified library that serves two program types:

• Coffee Connect — the classic randomized-intro program (what every existing use case is today)
• Mentoring — a new program type, sold as a paid add-on

Both types live in one library, browsable along two independent axes:

Everything else stays: creating from scratch, previewing before use, creating the campaign from a template.

---

2. What changes vs. the existing code

2.1 Keep as-is

These already work and v2 does not change their contract:

• dispatch({ type: 'company/getUseCases', language }) and the company.usecases selector
• campaigns/createFromTemplate and the redirect to /account/${slug}/admin/campaigns/details/${id}
• getBilling() (isOnFree(), canCreateCampaign()), getPermissions().hasCreateProgramsPermission()
• UpgradeButton, PermissionAction, Tags, EmptyPage from @/components
• All tracking events: usecases:preview:click, usecases:modal:next:click,

campaign:created:from-template, usecases:cancel:click, campaigns:add:own:campaign

• The ConfigProvider theme in layouts/config.tsx — v2 introduces no new design tokens

2.2 Changes to existing files

**pages/account/admin/campaigns/templates.tsx**

• PrgramFilters (note: existing typo in the name) currently renders a Search + a multi-select of

tags. v2 replaces it with a left filter rail: a Menu mode="inline" for program type and a second Menu mode="inline" for category. The search moves into the library header, horizontally centered.

• UseCaseLibrary's filter predicate gains a program-type condition alongside the existing

search + selected (categories) conditions.

• TemplateItem's Card gains a cover (image) and actions, and shows program type as a

colored Tag. The Button type="primary" block>Preview in the card footer is replaced by a Use template → action; preview becomes the whole-card click.

• The existing Alert that hosts CreateCampaignButton in its action slot is kept, restyled as

the "Start from scratch" row pinned above the grid.

**pages/account/admin/campaigns/template-modal.tsx**

• Unchanged in structure (Row gutter={[32,32]}, two Col md={12}, TagsBlock / AboutBlock /

SetupBlock / OptionsBlock on the left, Segmented optin/match + email preview on the right, footer [Alert, Back to programs, UpgradeButton]).

• v2 adds a locked variant: when the template's type is Mentoring and the workspace has no

Mentoring add-on, the modal body is replaced by the add-on pitch and the footer's primary action becomes Unlock Mentoring instead of Use this program.

**layouts/sidebar.tsx** — no change. v2 lives entirely under the existing templates key.

2.3 New files to create

pages/account/admin/campaigns/library/
  index.tsx            # page shell: header (search) + filter rail + results
  filters.tsx          # ProgramTypeMenu + CategoryMenu
  template-card.tsx    # card with cover, type Tag, category Tag, actions
  start-choice.tsx     # "from scratch" vs "use a template" entry step
  locked-card.tsx      # greyscale cover + "Add-on" Badge.Ribbon + Unlock action
  unlock-modal.tsx     # Mentoring add-on upsell

---

3. Screens and their components

All eight screens are on the canvas in reading order. Component names below are the actual antd components used — see Program Library v2 - AntD code.dc.html for the exact composition.

① Programs list (context only)

Existing page. Entry point is the Create program primary Button in the page header. Wrap in <PageLayout title={gettext('Programs')} actions={[...]}> per layouts/page.tsx (Title level={3}).

② Start choice — "How do you want to start?"

New step shown when the user clicks Create program.

Left card → history.push('/account/${slug}/admin/campaigns/new') (existing route). Right card → the library (③).

③ Library — default view, all types

The core screen.

Default state matters: "All types" is selected on arrival and shows both program types interleaved. Do not default to a single type.

④ Coffee Connect — filtered

Same shell, type menu on coffee, results title and count follow the filter. Confirms the filter is a filter, not a mode switch.

⑤ Detail panel — a template selected

Grid narrows to Col span={12}; a 340px panel opens on the right.

Note: the product's own preview is a 1200px Modal (template-modal.tsx). This side panel is a new, lighter affordance for scanning; the full modal stays available behind "Preview program". Decide with design whether both survive or the panel replaces the modal.

⑥ Mentoring add-on not included

Same library, degraded for entitlement.

Rules

• Mentoring templates stay visible and browsable — never hidden. Discovery is the point.
• Available cards must carry no ribbon at all.
• Copy is plan-agnostic: say "add-on", never "upgrade to Pro". The same wording has to work on

every plan.

⑦ Unlock modal

Modal width={460} centered with a LockOutlined title, a short pitch, a List of the five Mentoring capabilities, and footer [Maybe later, Unlock Mentoring].

The five capabilities are fixed copy, identical everywhere they appear:

1. Custom program architecture and funnels
2. All Mentoring use cases library unlocked
3. Mentor / Mentee advanced matching rules
4. Goals and milestones per mentor-mentee pairing
5. Mentor / Mentee shared space

⑧ Template detail — prebuilt assets

Sells what ships with a template: Row of four Card size="small", each with a Tag color="green" Included in extra.

Right rail: Descriptions at-a-glance + Alert "Fully customizable after creating the campaign" (the existing product string from template-modal.tsx's footer).

---

4. Data and API work required

This is the part the design cannot fake. The use-case payload behind company/getUseCases needs:

Sort options need backend or client support for most_used (uses_count desc) and recent.

Entitlement

Add-on access is not isOnFree(). It needs its own check, e.g. getBilling().hasAddon('mentoring'). Gate three things with it:

1. the Mentoring item in the type Menu (disabled)
2. the card treatment (locked vs normal)
3. the modal's primary action (Unlock Mentoring vs Use this program)

Creating a Mentoring campaign must also be refused server-side — the client gate is UX, not security.

---

5. Suggested build order

1. Backend: program_type on use cases + backfill; expose uses_count.
2. library/index.tsx shell with the two filter Menus, reusing the existing getUseCases data and

client-side filtering. Ship it behind the existing templates route.

1. template-card.tsx with cover + type/category tags, replacing TemplateItem.
2. Entitlement helper + ⑥/⑦ locked states.
3. start-choice.tsx (②) in front of campaigns/new.
4. ⑤ detail panel and ⑧ prebuilt-assets view.
5. cover_image and ratings once the content team has assets.

Steps 1–3 are shippable on their own and already deliver the unified library.

---

6. Prototype-only details — do not copy

The antd file runs in a browser canvas, so three things there are scaffolding:

• dc-props={{...}} passes dataSource / renderItem / style. In the app write

dataSource={...} and style={...} normally.

• Frame ⑦ sets contain:paint and transitionName="" / maskTransitionName="" to keep the inline

Modal (getContainer={false}) inside its frame. In the app use a normal portal Modal with default motion.

• antd is loaded from a CDN global. In the app it is import { ... } from 'antd'.

The bespoke 56px page headers on ③–⑧ exist to frame the canvas. In the app these screens wrap in <PageLayout title={...} actions={[...]}>.