Skip to content

fix(my-account): v2 demo donation detail rebuild #4691

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 donation detail rebuild #4691

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
3 changes: 3 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 @@ -538,4 +538,7 @@ A flat list of decisions that span phases or that future-you will want to find w
| 2026-04-30 | Mirroring Figma's two-icon-button affordance (edit pencil + red trash) was rejected in favour of v1's More-dropdown pattern — `__dropdown__toggle` + `__dropdown__content > ul`. Reason: v1's `_my-account.scss` already styles `#payment-methods .newspack-ui__dropdown:has(ul > li:only-child .disabled) { display: none }` and `.payment-method .newspack-ui__box__actions:not(:has(.newspack-ui__box__badges)) { justify-content: flex-end }` — switching to two inline icon buttons would have orphaned both rules and required new SCSS. v1's dropdown is what the user already sees and called out as "the correct style"; Figma's two-icon arrangement is treated as a design-system decision separate from this prototype. | Payment information rebuild |
| 2026-04-30 | Figma's Edit / Add payment method modals show a secondary "Add new payment method" CTA directly under the primary "Update / Save payment method" button. Treated as a Figma artifact (v1's `add_payment_method_modal` doesn't render the duplicate, and the secondary CTA's purpose is unclear in context). The v2-demo modals ship the primary + ghost Cancel only; flagging here so the productionising engineer can confirm with the design team whether the duplicate is intentional. | Payment information rebuild |
| 2026-04-30 | Modal dispatcher in `payment-methods.js` rebuilt as a trigger→modal-id map keyed off the v1 hook classes (`.newspack-my-account__add-payment-method`, `…__edit-payment-method[data-payment-method]`, `…__delete-payment-method[data-payment-method]`, `…__edit-address[data-address-type]`, `…__delete-address[data-address-type]`). Same shape as v1's `setupModalHandlers` but rebuilt as event-delegated listeners on `#payment-methods` + `#addresses` so dynamic re-renders (future productionisation) wire without a re-init. Confirm buttons (`[data-action="confirm"]`) snackbar with the message keyed by the modal's `data-newspack-my-account-v2-demo` slug, then close via `data-state="closed"` (newspack-ui's `modals.js` dispatches `closeModal` on the state flip). Triggers without a corresponding modal in the DOM (e.g. Edit address on a slot that was emptied client-side) fall through to a generic "available soon" snackbar so clicks never feel broken. | Payment information rebuild |
| 2026-04-30 | Detail-page table polish on donation + subscription pages, scoped to both detail wrappers in `style.scss`. Three issues caught against Figma `2636:46488` / `2636:46512`: (a) the Amount breakdown (`shop_table.order_details`) inherited 4px row padding from v1 — Figma reads more breathing room — bumped to spacer-3 (12px) and dropped the inherited `tr` border-bottom (already zeroed by v1 on cell `th,td` but the row-level border still rendered); (b) the dates+payment block (`shop_table.subscription_details`) got the same spacer-3 padding + border drop for parity; (c) the billing-history table (`woocommerce-orders-table--orders`) inherited `_my-account.scss`'s uniform `tr { border-bottom: 1px solid #ddd }` rule on every row, which Figma renders as a heavier border under thead only and a lighter `neutral-5` hairline between tbody rows — overridden to mirror the existing list-page `__previous-table` rule (spacer-2 thead padding, spacer-3 tbody padding, `--color-border` thead divider, `neutral-5` tbody divider). Also dropped the `<small>` wrapper around the "Exp. MM/YY" line on both detail templates so the expiry renders at the same body size as the brand line. Subscription detail picks up the same polish for free since it shares the SCSS scope. | Donation detail rebuild |
| 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 |
42 changes: 21 additions & 21 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 @@ -1225,31 +1225,31 @@ private static function get_fake_donations() {
[
'order' => '#890',
'date' => '2026-04-14',
'status' => 'paid',
'status' => 'completed',
'amount' => 10.00,
],
[
'order' => '#731',
'date' => '2026-03-14',
'status' => 'paid',
'status' => 'completed',
'amount' => 10.00,
],
[
'order' => '#684',
'date' => '2026-02-14',
'status' => 'paid',
'status' => 'completed',
'amount' => 10.00,
],
[
'order' => '#603',
'date' => '2026-01-14',
'status' => 'paid',
'status' => 'completed',
'amount' => 10.00,
],
[
'order' => '#562',
'date' => '2025-12-14',
'status' => 'paid',
'status' => 'completed',
'amount' => 10.00,
],
],
Expand Down Expand Up @@ -1284,13 +1284,13 @@ private static function get_fake_donations() {
[
'order' => '#820',
'date' => '2025-02-14',
'status' => 'paid',
'status' => 'completed',
'amount' => 153.00,
],
[
'order' => '#640',
'date' => '2024-02-14',
'status' => 'paid',
'status' => 'completed',
'amount' => 153.00,
],
],
Expand All @@ -1299,7 +1299,7 @@ private static function get_fake_donations() {
'one_time' => [
[
'id' => 'don-onetime-1',
'status' => 'paid',
'status' => 'completed',
'amount' => 25.00,
'subtotal' => 20.83,
'vat' => 4.17,
Expand All @@ -1316,14 +1316,14 @@ private static function get_fake_donations() {
[
'order' => '#946',
'date' => '2025-11-30',
'status' => 'paid',
'status' => 'completed',
'amount' => 25.00,
],
],
],
[
'id' => 'don-onetime-2',
'status' => 'paid',
'status' => 'completed',
'amount' => 40.00,
'subtotal' => 33.33,
'vat' => 6.67,
Expand All @@ -1340,7 +1340,7 @@ private static function get_fake_donations() {
[
'order' => '#312',
'date' => '2024-01-01',
'status' => 'paid',
'status' => 'completed',
'amount' => 40.00,
],
],
Expand Down Expand Up @@ -1401,7 +1401,7 @@ private static function get_subscription_fixtures() {
[
'order' => '#854',
'date' => '2026-03-16',
'status' => 'paid',
'status' => 'completed',
'amount' => 71.16,
],
[
Expand Down Expand Up @@ -1451,13 +1451,13 @@ private static function get_subscription_fixtures() {
[
'order' => '#680',
'date' => '2022-02-19',
'status' => 'paid',
'status' => 'completed',
'amount' => 101.70,
],
[
'order' => '#102',
'date' => '2021-02-19',
'status' => 'paid',
'status' => 'completed',
'amount' => 101.70,
],
],
Expand Down Expand Up @@ -1495,13 +1495,13 @@ private static function get_subscription_fixtures() {
[
'order' => '#445',
'date' => '2023-05-01',
'status' => 'paid',
'status' => 'completed',
'amount' => 5.00,
],
[
'order' => '#410',
'date' => '2023-04-01',
'status' => 'paid',
'status' => 'completed',
'amount' => 5.00,
],
],
Expand Down Expand Up @@ -1540,7 +1540,7 @@ private static function get_subscription_fixtures() {
[
'order' => '#854',
'date' => '2025-03-16',
'status' => 'paid',
'status' => 'completed',
'amount' => 71.16,
],
[
Expand Down Expand Up @@ -1585,7 +1585,7 @@ private static function get_subscription_fixtures() {
[
'order' => '#955',
'date' => '2023-11-02',
'status' => 'paid',
'status' => 'completed',
'amount' => 101.70,
],
[
Expand All @@ -1597,13 +1597,13 @@ private static function get_subscription_fixtures() {
[
'order' => '#680',
'date' => '2022-02-19',
'status' => 'paid',
'status' => 'completed',
'amount' => 101.70,
],
[
'order' => '#102',
'date' => '2021-02-19',
'status' => 'paid',
'status' => 'completed',
'amount' => 101.70,
],
],
Expand Down Expand Up @@ -1632,7 +1632,7 @@ private static function get_subscription_fixtures() {
[
'order' => '#854',
'date' => '2026-03-16',
'status' => 'paid',
'status' => 'completed',
'amount' => 71.16,
],
[
Expand Down
Loading
Loading