feat(subscribers): add subscribers management UX prototype

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Adds a design prototype for the new Subscribers management experience, intended for internal review and feedback. The prototype is a hidden wizard (not surfaced in the admin menu) that ships with mock data so reviewers can explore the full flow end-to-end without needing a populated WooCommerce store.

Scope of the prototype:

• Subscriber list (L0) — DataViews-based list with filters, sort, search, pagination, and status badges.
• Subscriber profile (L1) — Two-column layout with current status, alerts, subscriptions, payment methods, and order/refund history. Actions are surfaced contextually per subscription and per payment method.
• Flows (L2) — Modal flows for refund/cancel, plan change, resubscribe (with branching for "has payment method / send link / enter card / grant free access"), payment method add/update, and a guided fix for flagged subscribers. Each flow uses Core's HStack/VStack and the compact button size for consistency. Notices use WordPress core's Notice (from @wordpress/components) rather than the Newspack one, to keep the prototype aligned with the broader WordPress admin look without touching shared components. Informational copy inside modals is now plain paragraphs rather than info-level Notices, reserving Notice styling for things that genuinely warrant attention (warnings, errors).
• Private notes — Admins can attach private notes to a subscriber via the kebab menu → "Add private note" modal (textarea). Notes render as gray-100 Cards above the alerts/section content with Edit (tertiary) and Delete (tertiary destructive) actions. Add / edit / delete fire a transient Snackbar rather than a persistent success Notice. Storage is localStorage for the prototype only (flagged with a code comment) — production needs a REST endpoint backed by user/post meta or an option so notes are shared across every admin viewing the same subscriber.
• Tags (new) — Admins can attach short admin-only tags to a subscriber via the kebab menu → "Manage tags" modal (FormTokenField with vip, valued-reader, met-in-person as suggestions; free input allowed and normalized to lowercase). Tags render as Badge level="info" chips in the profile header under the email/status-summary lines. Tags are filterable on L0 (isAny operator) and available as an opt-in column. Same localStorage caveat as private notes.
• Newsletters (new) — A new "Newsletters" Row on the profile (between Subscriptions and Payment methods) shows a Card with a ToggleControl for each newsletter (Daily Brief, Weekend Read, Arts & Culture, Breaking News). Toggling fires a transient Snackbar and persists immediately. Newsletter membership is filterable on L0 (isAny operator) and available as an opt-in column. Same localStorage caveat as private notes.
• Mock data covering the edge cases highlighted during design review: lapsed with failed payment, multi-plan (digital + print), mixed active/cancelled subscriptions, multiple payment methods, cancelled with no card on file. Hand-crafted fixtures and the 42 random extras are now seeded with tags and newsletter subscriptions so the L0 filters are populated from the first load.

The prototype is reachable at admin.php?page=newspack-subscribers-demo when the plugin is active. Card brand icons are copied from WooCommerce's payment-methods-cards assets. The shared Notice component in packages/components/src/notice/ is intentionally untouched.

The full design spec for the tags + newsletters additions lives at docs/superpowers/specs/2026-05-01-subscribers-tags-newsletters-design.md.

How to test the changes in this Pull Request:

1. Check out this branch, run n ci-build newspack-plugin, and reload wp-admin.
2. Navigate to /wp-admin/admin.php?page=newspack-subscribers-demo. Confirm the list renders with ~45 subscribers across mixed statuses.
3. Use the DataViews filters to filter by status (Active / Lapsed / Cancelled) and by plan. Search by name or email. Sort by "Last payment" and "Member since". Confirm pagination works.
4. Open Matt Moore (id 1, active single digital): confirm header shows name, Active badge, email, and a "Next billing" summary. Expand the kebab menu in the wizard header — confirm the order is: View in WooCommerce / Edit WordPress user / Manage tags / Add private note / View raw subscription data.
5. Private notes: from Matt's profile, open the kebab menu → "Add private note". Confirm the modal title is "Add a private note", the textarea has the help text "This is only visible to admins.", and "Save note" is disabled until you type something. Save a note — confirm a Snackbar appears at the bottom-left and the note renders as a gray-100 Card with rounded corners above the Subscriptions row. Add a second note and confirm both stack. Click Edit on one — modal reopens with the existing text and a "Save changes" button. Click Delete — the card disappears and a "Private note deleted." Snackbar fires. Reload the page and confirm notes persist (localStorage, prototype only).
6. Tags — header display: Open Priya Patel (id 3) and confirm two info-level Badges (vip, valued-reader) render under the email/status summary lines in the profile header. Open Matt and confirm a single valued-reader Badge appears. Open Oscar Rivera (id 4) and confirm no tag chips render (he has no tags).
7. Tags — Manage tags modal: From Priya's profile, open the kebab menu → "Manage tags". Confirm the modal title is "Manage tags", the FormTokenField is pre-populated with vip and valued-reader, and the three known suggestions (vip, valued-reader, met-in-person) appear when focused. Confirm Save is disabled until you change the list. Type VIP and press Enter — confirm it normalizes to vip and dedupes (no duplicate token added). Type a brand-new tag (e.g. champion) and save — confirm a "Tags updated." Snackbar fires, the new chip appears in the header, and the modal closes. Reload the page and confirm tags persist (localStorage, prototype only).
8. Newsletters — Card and toggles: From Matt's profile, scroll to the new "Newsletters" Row between Subscriptions and Payment methods. Confirm a single Card with four ToggleControl rows: Daily Brief and Weekend Read are on; Arts & Culture and Breaking News are off. Toggle Arts & Culture on — confirm a "Subscribed to Arts & Culture." Snackbar fires. Toggle Daily Brief off — confirm "Unsubscribed from Daily Brief." Snackbar fires. Reload the page and confirm the new state persists.
9. L0 — Tags filter and column: From the subscriber list, open the column control and enable the "Tags" column — confirm chips render in the cell for fixture rows (Matt, Priya, Aisha) and any seeded extras. Apply the Tags filter with vip selected — confirm Priya appears (plus any random extras seeded with vip). Switch the filter to met-in-person — confirm Aisha appears.
10. L0 — Newsletters filter and column: From the column control, enable the "Newsletters" column — confirm comma-separated newsletter names render in the cell. Apply the Newsletters filter with breaking selected — confirm Aisha appears (plus any random extras seeded with breaking). Both Tags and Newsletters columns should be hidden by default.
11. Open Jane Chen (id 2, lapsed with failed payment): confirm the red WordPress-style notice at the top with a "Fix this" action. Click it and verify the Guided Fix modal opens with "Send payment link" and "Update payment method". Send the link — confirm a WP snackbar appears at the bottom-left of #wpbody and the modal closes.
12. Open Priya Patel (id 3, digital + print, two payment methods): confirm both cards render with brand icons (Mastercard default + Visa), and that "Make default" / "Remove" toggle correctly.
13. Open Aisha Khan (id 5, active digital + cancelled print): confirm both subscriptions appear, the cancelled one shows a "Resubscribe" button while the active one shows "Refund / Cancel" (destructive styling) and "Change plan".
14. Open Oscar Rivera (id 4, cancelled, no payment method): click "Resubscribe" and confirm the branching modal offers "Grant free access" (tertiary), "Enter card details", and "Send resubscribe link" all on one row.
15. Exercise each modal flow (Refund / Cancel, Change plan, Resubscribe → comp, Resubscribe → enter card, Add payment method, Update payment method, Guided fix). Confirm informational copy renders as plain paragraphs (not info-level Notices), warnings still use Notices, and that all modals use VStack spacing, compact buttons, and a footer HStack right-aligned with Cancel on the left.
16. Regression: load an existing wizard that uses the Newspack Notice (e.g. Setup, Reader Activation) and confirm Notices render exactly as before — the shared component is untouched.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable? Prototype only — not intended for merge as-is.
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

Adds an internal-only “Subscribers Demo” wizard to prototype a new subscriber management UX (list → profile → modal flows) using seeded mock data, plus small backward-compatible component updates to support the prototype.

Changes:

• Introduces a hidden Subscribers Demo wizard (PHP + JS entry) reachable via admin.php?page=newspack-subscribers-demo.
• Implements the prototype UI: DataViews-based subscriber list, profile view, and modal flows (refund/cancel, plan change, resubscribe, payment update, guided fix) powered by mock data.
• Adds backward-compatible UI component touches: Notice gains an optional noMargin prop; Footer gains an optional subscribers_demo link.

Reviewed changes

Copilot reviewed 17 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/wizards/subscribersDemo/index.js	Mounts a Wizard with list + profile routes for the demo UX.
src/wizards/subscribersDemo/screens/SubscriberList.jsx	Implements L0 DataViews list with filters/sort/search/pagination and row navigation to profiles.
src/wizards/subscribersDemo/screens/PersonProfile.jsx	Implements L1 profile layout with subscriptions, payment methods, order history, and modal flow entry points.
src/wizards/subscribersDemo/screens/style.scss	Adds demo-specific styling (profile spacing tweaks, snackbar positioning, table paddings).
src/wizards/subscribersDemo/flows/RefundFlow.jsx	Implements refund/cancel modal flow with mock mutation behavior.
src/wizards/subscribersDemo/flows/PlanChangeFlow.jsx	Implements plan change modal flow with mock mutation behavior.
src/wizards/subscribersDemo/flows/ResubscribeFlow.jsx	Implements resubscribe flow with branching for payment-method presence and comping.
src/wizards/subscribersDemo/flows/PaymentUpdateFlow.jsx	Implements add/update payment method modal flow with mock validation and mutation.
src/wizards/subscribersDemo/flows/GuidedFixFlow.jsx	Implements guided-fix modal + snackbar notification helper for alerts.
src/wizards/subscribersDemo/data/mock-subscribers.js	Provides deterministic mock subscribers/plans and helper accessors for the demo.
src/wizards/subscribersDemo/assets/cards/visa.svg	Card brand icon asset used in payment method UI.
src/wizards/subscribersDemo/assets/cards/mastercard.svg	Card brand icon asset used in payment method UI.
src/wizards/subscribersDemo/assets/cards/amex.svg	Card brand icon asset used in payment method UI.
src/wizards/subscribersDemo/assets/cards/discover.svg	Card brand icon asset used in payment method UI.
src/wizards/subscribersDemo/assets/cards/jcb.svg	Card brand icon asset used in payment method UI.
packages/components/src/notice/index.js	Adds noMargin prop to Notice to support tighter layouts in VStacks.
packages/components/src/notice/style.scss	Adds .newspack-notice__no-margin styling hook.
packages/components/src/footer/index.js	Adds optional “Subscribers Demo” footer link when URL is present.
includes/wizards/class-wizard.php	Exposes subscribers_demo URL in debug mode for Footer to optionally render the link.
includes/wizards/class-subscribers-demo.php	Registers/enqueues the Subscribers Demo wizard assets and keeps it hidden from menus.
includes/class-wizards.php	Instantiates/registers the new Subscribers_Demo wizard.
includes/class-newspack.php	Includes the new wizard class file in plugin bootstrap.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.