Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thomasguillot merged 1 commit into from
Apr 30, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/my-account-v2-prototype-devlog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,3 +542,9 @@ A flat list of decisions that span phases or that future-you will want to find w
| 2026-04-30 | Fake-data status alignment: `paid` → `completed` everywhere in the demo. v1's `_subscriptions.scss` lines 129–150 colour `--order-status-label.<wc-status>` for the canonical WC order statuses (`completed` / `refunded` → success-50 green; `processing` / `pending` / `on-hold` → warning-50; `cancelled` / `failed` → error-50) — `paid` isn't a WC status, so detail-page billing-history dots fell through to the default neutral-60 grey for every "Paid" row. The Phase 3 donation-details template hid this with a custom `$status_dot` helper, but once `donation-details.php` was rewritten onto the v1 `--order-status-label` system the grey-dot regression surfaced. (Subscription billing history had been showing the same grey "Paid" dot since Phase 4 — same root cause, just unnoticed.) Fix: source the fake data on canonical WC statuses (`completed` instead of `paid`) and translate to the Figma display label "Paid" inside the per-template `$status_label` switches. Affects `class-my-account-v2-demo.php` (21 fixture rows), `donation-details.php` + `subscription-details.php` (status-label switches), and `donations.php` list page (inline `$status_dot` helper + `$status_label` switch + the one_time fallback). Fits the brief §2.1.1 reflex order — sourcing fixtures on real WC names also matches the productionisation shape (real `WC_Order::get_status()` returns `completed`, the customer label "Paid" comes from the display layer). | Donation detail rebuild |
| 2026-04-30 | Donation detail rebuild — `donation-details.php` retro-fitted to the v1-class-names-first reflex (brief §2.1.1) it predated. Phase 3 had shipped the page as a hand-rolled `__stack--horizontal` header (inline SVG chevron, `__font--xl` h1, custom More dropdown), hand-rolled stacks for the Amount breakdown and date+payment rows, and a custom `__billing-table` table with an inline color-span dot helper. By the time Phase 4 codified the v1-class-names-first reflex, subscription-details had been rebuilt onto v1's `newspack-my-account__subscription--header / --title / --back-link / --actions / --actions-container / --actions-dropdown` chrome plus `<table class="shop_table order_details">` / `<table class="shop_table subscription_details">` / `<table class="shop_table … woocommerce-orders-table--orders">` — but donation-details was never retro-fitted, and it showed (Thomas: "from the chevron to how the page is organised, everything feels off"). Same shape as the Phase 4 subscription rewrite + the Phase 6 → PR #4690 payment-information rebuild: header reuses v1's classes plus `Newspack_UI_Icons::print_svg('chevronLeft' \| 'more')`, h1+`__font--xl` → h2+`__font--m`, three actions in `--actions-container` (Edit donation / Update payment method / Cancel donation) duplicated into `--actions-dropdown` for mobile (excluding Edit, mirroring how subscription drops Change), Amount breakdown becomes `<table class="shop_table order_details">` with `tr.order-total` for the bold Total row, First/Latest/Next + Payment method rows become `<table class="shop_table subscription_details">`, billing history becomes the WCS canonical `<table class="shop_table shop_table_responsive my_account_orders woocommerce-orders-table woocommerce-MyAccount-orders woocommerce-orders-table--orders">` with `tr.order woocommerce-orders-table__row woocommerce-orders-table__row--status-<status>` and `.newspack-my-account__subscription--order-status-label.<status>` empty-span dots. The custom `$status_dot` PHP helper and `__billing-table` table class are retired; `style.scss` stays wrapper-only on this surface. No fake-data shape changes, no JS dispatcher changes (`data-newspack-my-account-v2-demo="donation-details"` + `data-action` + `data-donation-id` all preserved). | Donation detail rebuild |
| 2026-04-30 | New surface: homepage drawer overlay gated by the same `?my-account-v2-demo` flag that drives every other v2 surface. (Originally landed as a separate `?my-account-v2-demo` flag layered on top of the existing `?my-account-v2-demo` flag — collapsed to a single unified flag immediately after for consistency: same flag on the homepage and inside `/my-account/` is easier to document and easier to teach.) Auto-opens on page load when the flag is present and the visitor is a logged-in admin. Mirrors the my-account-v2-demo my-account menu via `wc_get_account_menu_items()` + adds a placeholder secondary nav (FAQ / Contact us / Privacy Policy / Terms of Service) and Sign out footer. Same secondary list is also injected into the v1 sidebar footer on every `?my-account-v2-demo` page through the existing `newspack_my_account_navigation_footer_items` filter — single source helper `get_secondary_links()` feeds both. Markup injection follows the `?ui-demo` shape: `wp_footer` priority 100 + admin gate. Body-class scope is its own (`newspack-my-account--my-account-v2-demo-homepage`) so the existing `style.scss` rules cannot leak. The drawer pattern needed custom CSS (fixed-position full-viewport backdrop + 300px right-aligned panel + slide-in transition) because newspack-ui has no drawer primitive — first JS-driven non-modal overlay in the prototype, and the file `src/my-account-v2-demo-homepage/style.scss` is roughly 80 lines. Greeting word ("morning"/"afternoon"/"evening") is computed JS-side from `Date.getHours()` so it reflects the reader's local time, not the server's. The v1 sidebar's "Back to Homepage" link now goes through a new `newspack_my_account_back_to_homepage_url` filter (added to `templates/v1/navigation.php`) so the flag survives a round-trip back to the homepage drawer. Productionisation: drop the gate, wire the masthead "My Account" link to toggle the drawer, swap the secondary nav placeholders for theme-defined links. | Homepage overlay |
| 2026-04-30 | Subscriptions list typography migrated to the polished pattern donations + newsletters got earlier today (against Figma `2636:46117`). Section h2 dropped `__font--l __font--bold` → `__font--m __font--bold` (Figma 20/32; `--font-size-m` clamps 18-20px and resolves to 20px at desktop, line-height-m = 1.6 = 32px exactly). Plan-name + price line dropped `__font--m __font--bold` → `__font--s __font--bold` (Figma 16/24 SemiBold; `__font--bold` is `--font-weight-strong` = 600). Subtext gained `__font--normal` for explicit weight parity with donations. The h2 + box-margin-bottom scoped pins from the existing `donations h2` / `donations .newspack-ui__box` block were extended to `subscriptions` via comma-list rather than duplicated. Subscriptions list was the only Phase 2-7 list surface that hadn't been touched by today's typography sweep — gap was visible (h2 read at upper bound of `__font--l` ≈ 24px; plan-name read at upper bound of `__font--m` ≈ 20px). | Subscriptions list polish |
| 2026-04-30 | Outer subscriptions list wrapper bumped `__stack--gap-9` (48px) → `__stack--gap-11` (64px). Two wins in one change: matches Figma's 64px section gap exactly, AND 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 stack gap (prior cascade was producing ~112px between Active and Previous, since the v1 selector — specificity 0,3,1 — beat the `__stack--vertical > :where(...)` margin-zeroing rule at 0,1,0). Donations works around the same v1 rule with a scoped `section + section { margin-top: 0 }` override; subscriptions sidesteps it cleanly by satisfying the `:not()` selector's exclusion path. Cheaper fix when the wrapper gap is already meant to be 64px. | Subscriptions list polish |
| 2026-04-30 | New `.newspack-my-account-v2-demo__separator` primitive — `1px × 1em` vertical hairline (`var(--newspack-ui-color-border)` background, `display: inline-block`, `vertical-align: middle`, `margin: 0 var(--newspack-ui-spacer-1)`). Replaces the literal `\|` glyph that subscription cards (active + previous) had been using between plan name and price; Figma `2636:46117` renders this as a `1px × 16px #ddd` div, not a character. Page-agnostic (lives directly under the outer `.newspack-my-account-v2-demo` wrapper rather than a page-specific block) so future cards / headers can reuse without per-page duplication. `1em` height keeps the separator proportional in any font context — at `__font--s` (16px) it resolves to 16px matching Figma; in a larger header context it scales naturally without per-context overrides. newspack-ui has no vertical-divider primitive (`<hr>` is horizontal-only via `_dividers.scss`) so this is a prototype-local addition; if a third caller appears in v1 it should graduate to `_dividers.scss` proper. | Subscriptions list polish |
| 2026-04-30 | Sidebar menu item relabelled "Payment methods" → "Payment information" in `My_Account_V2_Demo::menu_items()`. Matches Figma `2636:46117`'s sidebar copy and v1's `payment-information.php` shell (which has labelled the surface as "Payment information" since well before this prototype). The slug stays `payment-methods` (WC core's name; URL routing unchanged). The inner page's first section heading still reads "Payment methods" because that names the sub-section, not the surface — Figma's hierarchy is page = "Payment information", first sub-section = "Payment methods", second = "Addresses". No template-file changes needed. | Subscriptions list polish |
| 2026-04-30 | `subscription-details.php` `expired` variant wired (no dedicated Figma frame; mirrors the `cancelled` shape since both are terminal states reachable from the Previous list). New `$is_expired = 'expired' === $subscription_status` joins the existing branch flags. EXPIRED badge slot renders `__badge--error` + "Expired" parallel to cancelled. Renew subscription button branch extends `$is_cancelled \| \| $is_expiring` → `$is_cancelled \| \| $is_expired \| \| $is_expiring` (header action + modal-load branches both updated). The expiring-only inline cancellation notice ("Your subscription has been cancelled. Subscription remains active until X. ... renew now") stays guarded on `$is_expiring` only — "ends on X" copy doesn't apply to a subscription that has already ended. Prior to this fix, hitting `/my-account/subscriptions/sub-expired/?my-account-v2-demo=1` rendered with no header badge and no actions — `$is_expired` was an undeclared fall-through case reachable any time a reader clicked an Expired card in Previous. | Subscriptions list polish |
| 2026-04-30 | Subscription-details detail-page audit (Figma `2636:46149`) came back clean: header h2 already pinned to `--font-size-m` (matches Figma 20/32), kv tables (`order_details` / `subscription_details`) already pinned to `--font-size-s` (matches Figma 16/24), Billing history h2 already pinned to `--font-size-s`. No further pinning needed this pass. The kv-table row padding (`spacer-3 0` = 32px vertical = 56px row height) is denser than Figma's `gap-[8px]` rhythm (~32px row pitch), but the difference is shared by donation-details which just shipped today; deferring any density tightening to a separate cross-page review pass rather than touching freshly-merged work. | Subscriptions list polish |
14 changes: 7 additions & 7 deletions includes/plugins/woocommerce/my-account/class-my-account-v2-demo.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -506,24 +506,24 @@ public static function menu_items( $items ) {
// label so the menu order is consistent on sites with and without WCS.
unset( $items['subscriptions'] );

// v1 relabels `payment-methods` to "Payment information" — pluck it
// here too so we can reinsert with the v2 label "Payment methods" in
// our preferred slot, regardless of what v1 (or anything else) named
// it. WC core registers the slug for any logged-in customer.
// Pluck `payment-methods` (WC core registers the slug for any logged-in
// customer) so we can reinsert with our preferred label and slot
// regardless of what v1 (or anything else) named it. The v2 label
// follows Figma 2636:46117 + v1's `payment-information.php` shell.
unset( $items['payment-methods'] );

// v1 already removed `customer-logout` and `edit-address`. Insert v2
// items between `edit-account` and the rest, in the order they appear
// in the Figma sidebar: Newsletters → Donations → Subscriptions →
// Payment methods.
// Payment information.
$ordered = [];
foreach ( $items as $slug => $label ) {
$ordered[ $slug ] = $label;
if ( 'edit-account' === $slug ) {
$ordered['newsletters'] = __( 'Newsletters', 'newspack-plugin' );
$ordered['donations'] = __( 'Donations', 'newspack-plugin' );
$ordered['subscriptions'] = __( 'Subscriptions', 'newspack-plugin' );
$ordered['payment-methods'] = __( 'Payment methods', 'newspack-plugin' );
$ordered['payment-methods'] = __( 'Payment information', 'newspack-plugin' );
}
}
// Fallbacks: if `edit-account` was removed upstream, append.
Expand All @@ -537,7 +537,7 @@ public static function menu_items( $items ) {
$ordered['subscriptions'] = __( 'Subscriptions', 'newspack-plugin' );
}
if ( ! isset( $ordered['payment-methods'] ) ) {
$ordered['payment-methods'] = __( 'Payment methods', 'newspack-plugin' );
$ordered['payment-methods'] = __( 'Payment information', 'newspack-plugin' );
}
return $ordered;
}
Expand Down
19 changes: 14 additions & 5 deletions ...udes/plugins/woocommerce/my-account/templates/my-account-v2-demo/subscription-details.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/**
* My Account v2 prototype — single subscription detail page.
*
* One template, five functional variants driven by the data:
* One template, six functional variants driven by the data:
* - active (Figma 2636:46149) — Title = product name. Change
* subscription + More dropdown (Update payment /
* Cancel subscription).
Expand All @@ -11,6 +11,10 @@
* - cancelled (Figma 2636:46177) — CANCELLED badge next to title.
* Only "Renew subscription" button. Next payment row
* is em-dash.
* - expired — EXPIRED badge next to title. Only "Renew subscription"
* button. Next payment row em-dash. (No dedicated Figma
* frame; mirrors the cancelled treatment since both are
* terminal states reachable from the Previous list.)
* - expiring (Figma 2636:46232) — inline error notice above Amount.
* Only "Renew subscription" button. Next payment em-dash.
* - renewed (Figma 2636:46204) — visually identical to active.
Expand Down Expand Up @@ -40,6 +44,7 @@
$subscription_status = isset( $subscription['status'] ) ? (string) $subscription['status'] : '';
$is_active = 'active' === $subscription_status || 'renewed' === $subscription_status;
$is_cancelled = 'cancelled' === $subscription_status;
$is_expired = 'expired' === $subscription_status;
$is_expiring = 'expiring' === $subscription_status;
$fees_covered = ! empty( $subscription['fees_covered'] );

Expand Down Expand Up @@ -130,6 +135,10 @@ class="newspack-my-account__subscription--back-link newspack-ui__button newspack
<span class="newspack-ui__badge newspack-ui__badge--error">
<?php esc_html_e( 'Cancelled', 'newspack-plugin' ); ?>
</span>
<?php elseif ( $is_expired ) : ?>
<span class="newspack-ui__badge newspack-ui__badge--error">
<?php esc_html_e( 'Expired', 'newspack-plugin' ); ?>
</span>
<?php endif; ?>
</div>
<div class="newspack-my-account__subscription--actions">
Expand Down Expand Up @@ -159,7 +168,7 @@ class="newspack-ui__button newspack-my-account__subscription--action-link cancel
>
<?php esc_html_e( 'Cancel subscription', 'newspack-plugin' ); ?>
</a>
<?php elseif ( $is_cancelled || $is_expiring ) : ?>
<?php elseif ( $is_cancelled || $is_expired || $is_expiring ) : ?>
<?php // Renew subscription stays flat-visible — no `--action-link` class so v1's desktop hide rule doesn't fire. Mirrors donation's Restart. ?>
<a
href="#"
Expand Down Expand Up @@ -413,10 +422,10 @@ class="newspack-ui__button newspack-ui__button--ghost cancel newspack-ui__button
);
}

// Renew subscription modal — rendered for cancelled / expiring subs (the
// header Renew button) and reused by the expiring variant's inline
// Renew subscription modal — rendered for cancelled / expired / expiring subs
// (the header Renew button) and reused by the expiring variant's inline
// "renew now" anchor inside the error notice.
if ( $is_cancelled || $is_expiring ) {
if ( $is_cancelled || $is_expired || $is_expiring ) {
load_template(
__DIR__ . '/partials/renew-subscription-modal.php',
false,
Expand Down
18 changes: 9 additions & 9 deletions includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/subscriptions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
};
?>
<div
class="newspack-my-account-v2-demo-subscriptions newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-9"
class="newspack-my-account-v2-demo-subscriptions newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-11"
data-newspack-my-account-v2-demo="subscriptions"
>
<?php if ( empty( $active ) && empty( $previous ) ) : ?>
Expand All @@ -122,7 +122,7 @@ class="newspack-my-account-v2-demo-subscriptions newspack-ui__stack newspack-ui_
<?php endif; ?>
<?php if ( ! empty( $active ) ) : ?>
<section class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-5" data-section-id="active">
<h2 class="newspack-ui__font--l newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<h2 class="newspack-ui__font--m newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php
echo esc_html(
_n(
Expand Down Expand Up @@ -195,15 +195,15 @@ class="newspack-ui__box newspack-ui__box--border newspack-ui__stack newspack-ui_
<?php endif; ?>
<div class="newspack-ui__stack newspack-ui__stack--horizontal newspack-ui__stack--gap-5 newspack-ui__stack--align-center newspack-ui__stack--justify-between">
<div class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-1">
<div class="newspack-ui__font--m newspack-ui__font--bold">
<div class="newspack-ui__font--s newspack-ui__font--bold">
<?php if ( $product ) : ?>
<span><?php echo esc_html( $product ); ?></span>
<span aria-hidden="true" class="newspack-ui__color--neutral-30"> | </span>
<span aria-hidden="true" class="newspack-my-account-v2-demo__separator"></span>
<?php endif; ?>
<span><?php echo esc_html( $amount_per ); ?></span>
</div>
<?php if ( $subtext ) : ?>
<span class="newspack-ui__font--xs <?php echo esc_attr( $subtext_cls ); ?>">
<span class="newspack-ui__font--xs newspack-ui__font--normal <?php echo esc_attr( $subtext_cls ); ?>">
<?php echo esc_html( $subtext ); ?>
</span>
<?php endif; ?>
Expand All @@ -225,7 +225,7 @@ class="newspack-ui__button newspack-ui__button--secondary"

<?php if ( ! empty( $previous ) ) : ?>
<section class="newspack-ui__stack newspack-ui__stack--vertical newspack-ui__stack--gap-5" data-section-id="previous">
<h2 class="newspack-ui__font--l newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<h2 class="newspack-ui__font--m newspack-ui__font--bold newspack-ui__spacing-top--0 newspack-ui__spacing-bottom--0">
<?php
echo esc_html(
_n(
Expand Down Expand Up @@ -269,15 +269,15 @@ class="newspack-ui__box newspack-ui__box--border newspack-ui__stack newspack-ui_
data-subscription-status="<?php echo esc_attr( $subscription_status ); ?>"
aria-label="<?php echo esc_attr( $row_label ); ?>"
>
<div class="newspack-ui__font--m newspack-ui__font--bold">
<div class="newspack-ui__font--s newspack-ui__font--bold">
<?php if ( $product ) : ?>
<span><?php echo esc_html( $product ); ?></span>
<span aria-hidden="true" class="newspack-ui__color--neutral-30"> | </span>
<span aria-hidden="true" class="newspack-my-account-v2-demo__separator"></span>
<?php endif; ?>
<span><?php echo esc_html( $amount_per ); ?></span>
</div>
<?php if ( $meta_text ) : ?>
<span class="newspack-ui__font--xs <?php echo esc_attr( $meta_color ); ?>">
<span class="newspack-ui__font--xs newspack-ui__font--normal <?php echo esc_attr( $meta_color ); ?>">
<?php echo esc_html( $meta_text ); ?>
</span>
<?php endif; ?>
Expand Down
Loading
Loading