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

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

A polish pass on the My Account v2 demo prototype, mostly focused on retro-fitting the donation detail page onto the v1-class-names-first reflex (brief §2.1.1) it predated. Stacks on top of prototype/my-account-demo (umbrella PR #4679).

Donation detail rebuild (Figma 2636:46488 / 2636:46512 / 2636:46661)

• donation-details.php rewritten to mirror subscription-details.php (Phase 4 shape): v1's newspack-my-account__subscription--header / --title / --back-link / --actions / --actions-container / --actions-dropdown chrome with 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.
• Amount breakdown rebuilt as <table class="shop_table order_details"> with tr.order-total for the bold Total row.
• First / Latest / Next + Payment method block rebuilt as <table class="shop_table subscription_details"> with simple <tr><td><td>.
• Billing history rebuilt as 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.
• Custom $status_dot PHP helper + __billing-table class retired.

Fake-data status alignment

• paid → completed everywhere (21 fixture rows + the donations list $status_dot helper + per-template $status_label switches). v1's _subscriptions.scss colours --order-status-label.<wc-status> for the canonical WC statuses (completed / refunded → green; processing / pending / on-hold → warning; cancelled / failed → error). Sourcing fixtures on real WC names gets the green "Paid" dot for free on the detail-page billing history (and incidentally repairs a latent grey "Paid" dot on the subscription detail too) while the display label "Paid" is still rendered via the per-template label switches.

processing status dot

• v1 ships --order-status-label.processing { background: var(--newspack-ui-color-warning-50) } but --newspack-ui-color-warning-50 doesn't exist in _colors.scss (the warning scale is 0/5/30/40 only) — so the dot silently falls back to neutral-60 grey. Latent v1 bug. Override scoped to the demo wrappers under .newspack-my-account.newspack-my-account-v2-demo (5-class chain matches v1's specificity; v2-demo CSS enqueues at priority 12 vs v1's 11 so cascade order picks ours) sets background: var(--newspack-ui-color-warning-30) (token warning-300).

Detail-page table polish (donation + subscription)

• shop_table.order_details + subscription_details: drop the inherited tr border, even spacer-3 padding across rows, font-size-s for tabular content density, vertical-align top so the multi-line "Payment method" cell sits flush with its label.
• Billing history table: heavier --color-border divider under thead, lighter neutral-5 hairline between tbody rows, spacer-2 thead / spacer-3 tbody padding (mirrors the existing list-page __previous-table recipe).
• Page-title <h2 class="newspack-ui__font--m"> size pinned at the scoped wrapper because the utility's (0,2,0) specificity gets out-ranked by some themes' .entry-content h2 rules.
• "Billing history" h2 dropped to font-size-s with zeroed theme margin and a spacer-2 bottom margin to separate from the table.
• <small> wrapper around the "Exp. MM/YY" line dropped on both detail templates so the expiry renders at body size next to the brand line.

Action button visibility (donation + subscription)

• Edit donation (active recurring) + Restart donation (cancelled recurring) both lost their --action-link class so v1's desktop hide rule (@media (min-width: 768px) { .newspack-my-account__subscription--action-link { display: none } }) doesn't kill them. Same fix applied to subscription's Renew button (cancelled / expiring states), which had the same parallel bug since Phase 4.

Modify donation modal layout (Figma 2983:16128)

• __modal__content re-painted as a flex column with spacer-5 (24px) gap; direct-child margins zeroed so the gap is the only spacing between Frequency / Amount / Cover transaction fees / Recurring totals / action buttons.
• Frequency wrapper: full-width tabs (align-items: stretch + flex: 1 1 100% on the segment buttons) and spacer-1 (8px) label-to-control gap.
• Amount wrapper (h3 + __currency-input): spacer-1 (8px) label-to-input gap.
• Recurring totals box: margin-top: calc(spacer-2 * -1) on the inner table to absorb the thead's inherited _my-account.scss .shop_table { padding-top: spacer-2 } so the heading sits at the box's spacer-5 padding-top instead of stacking to 36px.
• Cover transaction fees: collapse the stacked label.checkbox margin-bottom + __helper-text margin-top so the helper text reads tight against the checkbox row.
• Action buttons wrapped in a new __actions div with spacer-2 (12px) gap between Confirm and Cancel.
• Annually next-date: $next_dates now always carries both month and year entries — the donation's own next_payment for the current frequency, and today + 1 [unit] projected for the alternative — so flipping tabs yields a real date instead of an empty string.

How to test the changes in this Pull Request:

Log in as administrator. All surfaces live behind the demo flag.

1. Visit /my-account/donations/don-001/?my-account-v2-demo=1. Verify: header chrome matches the subscription detail page (back chevron, h2 + font-m title, no badge, three buttons next to More dropdown); Amount table reads as a borderless, evenly-spaced breakdown with a bold Total row; First / Latest / Next + Payment method block reads similarly with "Visa ending in 4242" + "Exp. 02/27" both at body size on the same multi-line cell; "Payment method" label sits flush with the brand line (vertical-align top); billing history table has a heavier --color-border divider under thead and lighter neutral-5 hairlines between rows; Paid rows show a green dot, Processing rows show a warning-300 dot, Cancelled / Failed rows show a red dot.
2. Visit /my-account/donations/don-cancelled/?my-account-v2-demo=1. Verify: the Restart donation button is visible flat (not just the More dropdown — the bug fix). Click it; the existing Restart donation modal opens.
3. Visit /my-account/donations/don-onetime-1/?my-account-v2-demo=1. Verify: no action buttons in the header (one-time donations have nothing to edit / cancel / restart); a single "Donation date" row replaces First / Latest / Next.
4. Visit /my-account/donations/?my-account-v2-demo=billing-history. Previous donations table still renders correctly with the green "Paid" dot.
5. From /my-account/donations/don-001/, click "Edit donation". Verify the modal layout matches Figma 2983:16128: full-width Frequency tabs with 8px gap from the label; 8px gap between the Amount label and currency input; checkbox + helper text sit tight; Recurring totals box has consistent 24px top + bottom padding; Confirm / Cancel buttons sit 12px apart with 24px from the Recurring totals box. Switch the Frequency tab from Monthly to Annually — the "Next donation:" date updates to a projected today + 1 year date (instead of going blank).
6. Visit /my-account/subscriptions/sub-001/?my-account-v2-demo=1. Verify the same table polish carries over to the subscription detail (it shares the same SCSS scope). The "Paid" dots in billing history are now green; "Processing" rows show warning-300.
7. Visit /my-account/subscriptions/sub-cancelled/ and /sub-expiring/. Verify the Renew subscription button is visible flat (not only via dropdown).
8. Sanity-check non-demo flows: /my-account/donations/don-001/ (no flag) → falls through / 404; /my-account/subscriptions/ without admin gate → v1 unchanged.

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?
• Have you successfully ran tests with your changes locally?