Skip to content

feat(my-account): build v2 prototype subscriptions (Phase 4)#4680

Merged
thomasguillot merged 2 commits into
prototype/my-account-demofrom
prototype/my-account-demo-phase-4
Apr 28, 2026
Merged

feat(my-account): build v2 prototype subscriptions (Phase 4)#4680
thomasguillot merged 2 commits into
prototype/my-account-demofrom
prototype/my-account-demo-phase-4

Conversation

@thomasguillot
Copy link
Copy Markdown
Contributor

Summary

Phase 4 of the My Account v2 prototype — Subscriptions list + 5 detail variants + Change subscription modal flow. Admin-only behind ?v2-demo=1. Pure newspack-ui composition + v1 class names so existing _subscriptions.scss paints v2-demo pages.

  • List page (templates/v2-demo/subscriptions.php) — Active section + Previous section with Cancelled/Expired meta strings. Matches Figma init 1.
  • Detail page (templates/v2-demo/subscription-details.php) — single template, 5 variants driven by status + fees_covered: active, active-no-fees, cancelled, expiring (inline error notice), renewed. Header uses v1's subscription-header.php conventions verbatim (--header / --title / --back-link / --actions-container / --actions-dropdown + Newspack_UI_Icons::print_svg('chevronLeft')). Body uses v1/WCS canonical tables: shop_table.order_details (Amount), shop_table.subscription_details (kv pairs), woocommerce-orders-table--orders (Billing history) with .newspack-my-account__subscription--order-status-label colour dots.
  • Change subscription modal (templates/v2-demo/partials/change-subscription-modal.php) — pulled forward from Phase 5. Two visual steps (select / transaction) cover the four Figma frames (init / Monthly selected / Plan selected / Transaction). Tier picker uses v1's <label class="newspack-ui__input-card current"> shape. Transaction step uses Newspack-Blocks' modal-checkout markup conventions (wc_payment_methods, payment_method_stripe, payment_box, form-row form-row-first/last/wide).
  • Plumbing — registers subscriptions rewrite endpoint, bumps ENDPOINTS_VERSION to 4, takes over woocommerce_account_subscriptions_endpoint via template_redirect + remove_all_actions when demo is active (suppresses WCS' renderer + Newspack's memberships table). Conditional bounce in redirect_non_demo_v2_endpoints (only fires when WCS not installed). Inserts "Subscriptions" sidebar item after "Donations".
  • Other 5 modal flows (Cancel / Renew subscription, Modify / Cancel / Restart donation, Update payment method) still ship as Phase 5 stubs per brief §10.
  • Devlog Phase 4 entry + 7 cross-phase decision log rows. Brief §2.1.1 added: "Reuse v1's class names" guardrail with non-exhaustive index of "v1 already has this".
  • Workflow change — first phase to ship as its own PR targeting prototype/my-account-demo rather than stacking on the cumulative draft (feat(my-account): v2 prototype #4679 becomes umbrella tracker).

Known polish items (deferred for follow-up)

  • Detail-page typography is still off vs Figma — body sections feel cramped, "Member" header reads smaller than Figma's. Brief §6 utility-class composition + v1 SCSS adjacency rules need a closer pass; flagged in devlog Open questions.
  • Cancellation/expiring inline notice text styling matches Figma but the "renew now" anchor is a <a href="#renew"> intercepted by JS — should become a no-op once Phase 5 wires the real Renew modal.
  • extras bucket on fake data is a Phase 4 holding pen; Phase 6 scenario fixtures will collapse it into ?v2-demo=expiring etc.

Test plan

  • Visit /my-account/subscriptions/?v2-demo=1 as admin — Active section shows sub-001 (Member), Previous section shows sub-cancelled (Patron, "Cancelled on Jan 17, 2023") + sub-expired (Supporter, "Expired on Jun 1, 2023").
  • Click sub-001 → detail page renders Amount table + First/Latest/Next payment + Payment method + Billing history.
  • Direct URLs all resolve: /sub-001/, /sub-cancelled/, /sub-expiring/, /sub-renewed/, /sub-active-no-fees/.
  • Each variant shows the right buttons: active/renewed = Change subscription + More dropdown; cancelled/expiring = Renew subscription only; cancelled = CANCELLED badge; expiring = inline error notice; no-fees = Amount section collapses to single Total row.
  • On sub-001, click Change subscription → modal opens. Switch tab between Annually/Monthly — current Member tier preselected on Annually with CURRENT badge. Pick Patron → Change button enables. Click Change → transaction step shows summary "Patron: $100.00 / year" with Edit/Pay now + billing details + Stripe payment form. Click Pay now → modal closes + "Subscription changed." snackbar.
  • Sidebar nav order: Account settings → Newsletters → Donations → Subscriptions.
  • Every internal /my-account/... link preserves ?v2-demo=1.
  • Anonymous + admin-without-flag both leave the v2 markup absent.
  • On the dev box: after deploy, may need wp eval 'opcache_reset();' && wp option delete newspack_my_account_v2_demo_endpoints_version && wp rewrite flush once for the endpoint version bump (per Phase 3 devlog).

Adds the Subscriptions list and detail surfaces for the My Account v2
prototype, behind the admin-only `?v2-demo` gate. Registers a custom
`subscriptions` endpoint, bumps ENDPOINTS_VERSION to 4, and takes over
WC Subscriptions' default rendering when the demo is active by removing
all handlers from `woocommerce_account_subscriptions_endpoint` and
re-adding our own. Detail template covers all five Figma variants
(active, active no-fees, cancelled, expiring, renewed) from a single
file, branched on `status` + `fees_covered`. Pure newspack-ui
composition. Devlog + cross-phase decision log updated.
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Phase 4 of the My Account v2 demo adds the Subscriptions surface (list + detail variants) and a Change subscription modal, gated behind ?v2-demo=1 for admins and designed to reuse v1/WCS classnames so existing styling applies.

Changes:

  • Register/wire a subscriptions rewrite endpoint, including demo-only takeover of the WCS subscriptions renderer.
  • Add v2-demo Subscriptions list + detail templates (5 variants driven by fake data), plus the Change subscription modal partial.
  • Add client-side wiring for subscriptions pages (modal flow + stub snackbars) and update docs/devlog for Phase 4.

Reviewed changes

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

Show a summary per file
File Description
src/my-account/v2-demo/subscriptions.js Adds JS wiring for subscriptions list/detail and Change subscription modal flow.
src/my-account/v2-demo/index.js Imports subscriptions wiring into the v2-demo bundle.
includes/plugins/woocommerce/my-account/templates/v2-demo/subscriptions.php New v2-demo subscriptions list endpoint template.
includes/plugins/woocommerce/my-account/templates/v2-demo/subscription-details.php New v2-demo subscription detail template supporting multiple variants.
includes/plugins/woocommerce/my-account/templates/v2-demo/partials/change-subscription-modal.php New modal partial for the Change subscription flow.
includes/plugins/woocommerce/my-account/class-my-account-ui-v2-demo.php Registers endpoint, adds menu item, redirects non-demo visitors, and takes over WCS rendering during demo.
docs/my-account-v2-prototype-devlog.md Adds Phase 4 devlog entry and cross-phase decisions.
docs/my-account-v2-prototype-brief.md Codifies “reuse v1 classnames” rule and reference index.

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

- Update $previous_meta docblock in subscriptions.php to reflect actual
  behaviour (no list_meta override; $format_date is captured via use, not a
  callable param).
- Thread currency_symbol into change-subscription-modal partial via $args
  so it stays in lockstep with the list/detail templates instead of
  hard-coding '$' in the modal.
- Drop the unused $status_dot closure in subscription-details.php; the
  billing-history table renders status dots via the v1
  `.newspack-my-account__subscription--order-status-label` SCSS class.
@thomasguillot thomasguillot marked this pull request as ready for review April 28, 2026 15:42
@thomasguillot thomasguillot requested a review from a team as a code owner April 28, 2026 15:42
@thomasguillot thomasguillot merged commit e46dc9c into prototype/my-account-demo Apr 28, 2026
13 checks passed
@thomasguillot thomasguillot deleted the prototype/my-account-demo-phase-4 branch April 28, 2026 15:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants