feat(my-account): build v2 prototype scenarios + polish (Phase 7)

[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:

Phase 7 of the My Account v2 prototype — scenario fixtures + polish. Targets prototype/my-account-demo; umbrella tracker is #4679. See the brief and the devlog for the full context.

Scenario fixtures (?v2-demo=<scenario>)

A SCENARIOS allow-list constant + get_scenario() reader + apply_scenario() switch dispatcher merge a small set of overrides on top of the base happy-path fixture. Eleven scenarios:

Scenario	What it does	Closes
cancelled-sub	Active slot becomes the cancelled card; previous shrinks to one row	Phase 4 list-init-2 follow-up
expiring	Active slot becomes the expiring card with inline error notice	Phase 4 list-init-2 (Figma 2636:46133)
renewed	Active slot becomes the recently-renewed card	Phase 4
no-fees	Active slot becomes a fees-covered card; Amount section collapses	Phase 4
billing-history	Donations list bottom flips from Button Card to embedded billing-history table	Phase 3 (Figma 3619:292407)
no-categories	Newsletters flatten to a single ungrouped 11-row list	Phase 2 (Figma 4645:19732)
expired-payment	Non-default card's expiry rewritten to a past month; inline Expired badge appears next to the brand	Phase 6
empty	Donations + subscriptions + payment methods all empty	New
no-donations	Donations slice empty	New
no-subscriptions	Subscriptions slice empty	New
no-payment-methods	Payment methods slice empty	New

Empty scenarios surface a __notice "You have no subscriptions / donations yet" on the matching list page; payment-methods reuses WC core's existing wc_print_notice( 'No saved methods found.' ).

Internal refactor — fixture registry replaces the extras bucket

get_fake_subscriptions() previously held three arrays (active, previous, extras) with row literals duplicated across them. Phase 7 extracts a get_subscription_fixtures() registry keyed by id (sub-001 / sub-cancelled / sub-expired / sub-expiring / sub-renewed / sub-active-no-fees); the default arrangement plus every scenario's swap pulls from the same pool. find_subscription_by_id now only searches active + previous since scenarios surface every variant via the active slot.

Polish sweep — closes the open-question carryover from Phases 3–6

• Hash-fragment scrubbing: inline modal-trigger anchors (#change-subscription, #cancel-subscription, #renew-subscription, #update-payment-method, #renew, #billing-history) all collapsed to href="#". URL bar stays clean; JS handlers already preventDefault.
• The News Paper hardcode swept to get_bloginfo('name') across the four modal partials (change-subscription, modify-donation, renew-subscription, restart-donation) and the renew success copy. Real site name in the demo on any environment.

Brief: roadmap addition — Phase 8 (Documentation pass)

Adds a Phase 8 entry to brief §10 + a §12 definition-of-done bullet. Phase 8 produces docs/my-account-v2-prototype-guide.md covering reader's guide / architectural map / productionisation playbook. Total estimate moves from ~8–8.5 to ~8.5–9 dev-days. No code in this PR; the doc itself is Phase 8 work.

Cross-repo impact: none. The class + templates are gated behind current_user_can('manage_options') && isset($_GET['v2-demo']) and behind is_account_page(). Non-admin readers see v1 unchanged.

How to test the changes in this Pull Request:

1. Pull this branch: git fetch && git checkout prototype/my-account-demo-phase-7. Run composer dump-autoload && npm run build in repos/newspack-plugin.
2. Log in as an administrator on the local site (https://localhost).
3. Happy-path regression: Visit /my-account/?v2-demo=1, confirm sidebar is Dashboard → Edit account → Newsletters → Donations → Subscriptions → Payment methods and every section renders as on Phase 6.
4. Subscription scenarios: Visit each, confirm the active card swaps and the matching detail variant is reachable from "Manage subscription":
   • /my-account/subscriptions/?v2-demo=expiring — active card has the inline error notice + "Expires on Sep 16, 2026" subtext + Renew button.
   • /my-account/subscriptions/?v2-demo=cancelled-sub — active card shows the cancelled state; previous section has a single Expired card.
   • /my-account/subscriptions/?v2-demo=renewed — active card shows the renewed state (visually identical to active; data differs).
   • /my-account/subscriptions/?v2-demo=no-fees — detail page Amount breakdown collapses to a single Total row.
5. Donations: /my-account/donations/?v2-demo=billing-history — the Button Card at the bottom is replaced by an inline billing-history table.
6. Newsletters: /my-account/newsletters/?v2-demo=no-categories — three sections flatten to one ungrouped 11-row list.
7. Payment methods: /my-account/payment-methods/?v2-demo=expired-payment — Mastercard row's expiry is in the past; an inline Expired badge appears next to the brand name (alongside the existing inline Default badge on Visa).
8. Empty states: visit each, confirm the matching slice renders empty and shows a "You have no … yet" notice on the list page (or "No saved methods found." for payment methods):
   • /my-account/subscriptions/?v2-demo=no-subscriptions
   • /my-account/donations/?v2-demo=no-donations
   • /my-account/payment-methods/?v2-demo=no-payment-methods
   • /my-account/?v2-demo=empty (visit each subpage; all three slices empty).
9. Modal copy uses real site name: open any flow that surfaces a payment form (e.g. /my-account/subscriptions/sub-001/?v2-demo=1 → "Change subscription" → confirm the cover-fees helper text reads "…so that receives 100% of your payment."). Repeat for the modify donation / renew subscription / restart donation modals. Renew success copy: "Thank you for supporting !".
10. Hash hrefs are clean: open DevTools, hover a Cancel / Change / Update payment method / Renew anchor, confirm the URL bar preview shows # (not #change-subscription etc.).
11. Allow-list defends against bad input: visit /my-account/?v2-demo=foo-bar-not-real — page renders the happy-path fixture (acts like ?v2-demo=1).
12. Non-admin and anonymous gating still works: log out (or switch to a subscriber) and visit /my-account/subscriptions/?v2-demo=expiring — bounces to v1 / /edit-account/. No demo body class, no demo bundle in Network tab.
13. Lint: run n npm run lint:php and n npm run lint:js -- src/my-account/v2-demo/ and n npm run lint:scss -- 'src/my-account/v2-demo/**/*.scss'. All clean.
14. Build: run n npm run build. Should complete with no v2-demo warnings.

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 is admin-gated and fake-data; no automated tests.
• Have you successfully ran tests with your changes locally? — Verified all 11 scenarios via wp eval-file; lint + build pass.

[Copilot]

Pull request overview

Adds Phase 7 scenario fixtures and polish for the My Account v2 demo prototype (?v2-demo=<scenario>), enabling deterministic fake-data variants for stakeholder review while keeping the default happy-path unchanged.

Changes:

• Introduces an allow-listed scenario system (SCENARIOS, get_scenario(), apply_scenario()) and refactors subscription fixtures into a registry to support scenario swaps without duplication.
• Adds empty-state UX for subscriptions/donations, plus an “Expired” badge for payment methods (to support the expired-payment scenario).
• Polishes demo UI by scrubbing hash-fragment hrefs and replacing hardcoded site name copy with get_bloginfo( 'name' ).

Reviewed changes

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

Show a summary per file

File	Description
src/my-account/v2-demo/subscriptions.js	Updates wiring docstring to reflect Phase 7 scenario-driven expiring variant behavior.
src/my-account/v2-demo/donations.js	Updates billing-history Button Card stub comment to match Phase 7 scenario behavior.
includes/plugins/woocommerce/my-account/templates/v2-demo/subscriptions.php	Adds subscriptions empty-state notice; scrubs renew anchor hash to #.
includes/plugins/woocommerce/my-account/templates/v2-demo/subscription-details.php	Scrubs action-trigger hash hrefs to # for modal-trigger anchors.
includes/plugins/woocommerce/my-account/templates/v2-demo/payment-methods.php	Adds expired-card detection + inline “Expired” badge next to brand.
includes/plugins/woocommerce/my-account/templates/v2-demo/partials/restart-donation-modal.php	Replaces hardcoded site name with get_bloginfo('name') in fee-cover helper text.
includes/plugins/woocommerce/my-account/templates/v2-demo/partials/renew-subscription-modal.php	Replaces hardcoded site name with get_bloginfo('name') in fee-cover helper + success copy.
includes/plugins/woocommerce/my-account/templates/v2-demo/partials/modify-donation-modal.php	Replaces hardcoded site name with get_bloginfo('name') in fee-cover helper text.
includes/plugins/woocommerce/my-account/templates/v2-demo/partials/change-subscription-modal.php	Replaces hardcoded site name with get_bloginfo('name') in fee-cover helper text.
includes/plugins/woocommerce/my-account/templates/v2-demo/donations.php	Adds donations empty-state notice; scrubs billing-history anchor hash to #.
includes/plugins/woocommerce/my-account/class-my-account-ui-v2-demo.php	Implements scenario allow-list + scenario application; refactors subscription fixtures; adds empty-slice helpers.
docs/my-account-v2-prototype-devlog.md	Adds Phase 7 devlog entry and decision-log items covering scenarios/polish.
docs/my-account-v2-prototype-brief.md	Adds Phase 8 documentation-pass roadmap entry and definition-of-done bullet.

---

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