Skip to content

fix(my-account): v2 demo subscriptions polish + expired variant#4692

Merged
thomasguillot merged 1 commit into
prototype/my-account-demofrom
prototype/my-account-demo-subscriptions-polish
Apr 30, 2026
Merged

fix(my-account): v2 demo subscriptions polish + expired variant#4692
thomasguillot merged 1 commit into
prototype/my-account-demofrom
prototype/my-account-demo-subscriptions-polish

Conversation

@thomasguillot
Copy link
Copy Markdown
Contributor

Polish pass on the v2-demo subscriptions list against Figma 2636:46117, plus a small fix to the detail-page expired variant. Targets prototype/my-account-demo (umbrella tracker #4679). Devlog rows tagged Subscriptions list polish capture the why for each call.

Summary

Subscriptions list (Figma 2636:46117):

  • Section h2 __font--l __font--bold__font--m __font--bold (Figma 20/32; matches the typography migration donations + newsletters got earlier today).
  • Plan-name + price __font--m __font--bold__font--s __font--bold (Figma 16/24 SemiBold).
  • Subtext gains __font--normal for explicit weight parity with donations.
  • Outer wrapper __stack--gap-9 (48px) → __stack--gap-11 (64px). Side benefit: satisfies v1's :not(.__stack--gap-11) section + section { margin-top: spacer-11 } exclusion so the second section's 64px margin-top stops compounding on top of the gap (prior cascade was producing ~112px between Active and Previous).
  • New .newspack-my-account-v2-demo__separator primitive — 1px × 1em vertical hairline — replaces the literal | glyph between plan name and price (Figma renders this as a 1px × 16px #ddd div, not a character). Page-agnostic so future cards / headers can reuse without per-page rule duplication.

Sidebar:

  • "Payment methods" → "Payment information". Matches Figma + v1's payment-information.php shell. Slug stays payment-methods (URL routing unchanged); only the display label changes.

Subscription detail (/sub-expired/):

  • $is_expired was an undeclared fall-through — the page rendered with no header badge and no actions any time a reader clicked an Expired card in Previous.
  • EXPIRED badge added (mirrors cancelled, same __badge--error).
  • Renew subscription button + renew-subscription modal partial extended to the expired branch.
  • File docblock updated to list all six functional variants.

Subscription detail audit (Figma 2636:46149): came back clean — existing scoped CSS already pins header h2 to --font-size-m, kv tables to --font-size-s, Billing history h2 to --font-size-s. No further pinning needed this pass.

Test plan

  • /my-account/subscriptions/?my-account-v2-demo=1 — section titles drop a notch, "Member · £71.16 / year" reads at 16/24 SemiBold, the gap between Active and Previous opens to 64px (no more compounded margin), the | glyph is replaced with a thin gray vertical hairline.
  • Sidebar reads "Payment information" (last item).
  • /my-account/subscriptions/sub-expired/?my-account-v2-demo=1 — header shows EXPIRED badge next to product name + a Renew subscription button. Clicking Renew opens the renew-subscription modal.
  • /my-account/subscriptions/sub-cancelled/?my-account-v2-demo=1 — unchanged (Cancelled badge + Renew, sanity check that the elseif didn't break the cancelled branch).
  • /my-account/subscriptions/sub-001/?my-account-v2-demo=1 — detail page renders unchanged (audit confirmed no changes needed).
  • Non-demo admin and anonymous-with-flag both see v1 unchanged.
  • Lint clean (:php, :scss); build green.

@thomasguillot thomasguillot marked this pull request as ready for review April 30, 2026 16:09
@thomasguillot thomasguillot requested a review from a team as a code owner April 30, 2026 16:09
@thomasguillot thomasguillot merged commit 5100d84 into prototype/my-account-demo Apr 30, 2026
5 checks passed
@thomasguillot thomasguillot deleted the prototype/my-account-demo-subscriptions-polish branch April 30, 2026 16:09
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.

1 participant