feat(my-account): build v2 prototype payment methods (Phase 6)

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

Phase 6 of the My Account v2 prototype. Reproduces WC core's /my-account/payment-methods/ page byte-for-byte under the ?v2-demo=1 flag, fed by fake card data instead of wc_get_customer_saved_methods_list(). Admin-only, gated behind the same is_demo_active() helper every prior phase uses; production users on /my-account/payment-methods/ continue to see v1's existing card-based "Payment information" surface.

The template_redirect-priority-8 takeover (mirroring Phase 4's subscriptions takeover) drops both WC core's default woocommerce_account_payment_methods callback and v1's wc_get_template swap to payment-information.php in one move, and re-adds our renderer so the v2 template is the sole handler. Sidebar gains a new "Payment methods" entry between Subscriptions and the rest. Make default / Delete / Add new are snackbar-only stubs — no modals this phase.

ENDPOINTS_VERSION is bumped 4 → 5 so the auto-flush guard re-runs once on the next admin visit. No new rewrite endpoint is registered (payment-methods is owned by WC core); the bump exists to keep rewrite rules clean and the audit trail consistent across phases.

Devlog entry + cross-phase decision rows added in the same change. See docs/my-account-v2-prototype-devlog.md Phase 6 for the full design log.

This PR targets prototype/my-account-demo (not trunk); the umbrella tracker is #4679.

How to test the changes in this Pull Request:

1. Pull this branch and run npm run build (or npm start for watch mode).
2. One-time on dev/staging environments only (production deploys clear opcache automatically): the ENDPOINTS_VERSION bump combined with PHP opcache can leave the takeover registered before the new code is loaded. Run:

   docker exec newspack_dev sh -c \"wp eval 'opcache_reset();' --allow-root && wp option delete newspack_my_account_v2_demo_endpoints_version --allow-root && wp rewrite flush --allow-root\"

3. Log in as an administrator.
4. Visit `/my-account/payment-methods/?v2-demo=1`. Expected:
   • Body class includes `newspack-my-account--v2-demo`.
   • A `<table class="shop_table account-payment-methods-table">` renders with two rows.
   • Visa ending in 4242 has a small `Default` badge inline and a single `Delete` button.
   • MasterCard ending in 5454 has `Make default` + `Delete` buttons.
   • A trailing `Add payment method` button appears below the table.
   • The sidebar order is Account settings → Newsletters → Donations → Subscriptions → Payment methods.
5. Click each action button (Make default / Delete / Add payment method). A snackbar should appear in the top-right; the URL should not change.
6. Visit `/my-account/payment-methods/` (without the flag). Expected: v1's existing card-based "Payment information" surface renders, no v2 body class, no v2 table.
7. Open a private/incognito window (anonymous, no admin session). Visit `/my-account/payment-methods/?v2-demo=1`. Expected: standard WC sign-in screen renders, no v2 body class, no v2 bundle enqueued.
8. From a non-admin role (e.g. Subscriber), visit `/my-account/payment-methods/?v2-demo=1`. Expected: v1's surface renders, the demo gate stays closed.
9. Click around the v2 sidebar (Newsletters → Donations → Subscriptions → Payment methods → and back). Every internal link should preserve `?v2-demo=1` in the URL.
10. Run `npm run lint:php`, `npm run lint:js -- src/my-account/v2-demo/`, and `npm run lint:scss -- 'src/my-account/v2-demo/**/*.scss'` — all should pass clean (project-wide pre-existing warnings excluded).

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?

[Copilot]

Pull request overview

Adds Phase 6 of the My Account v2 demo prototype by taking over WooCommerce’s /my-account/payment-methods/ endpoint under ?v2-demo=1 (admin-only), rendering a WC-core-shaped table backed by fake card data and wiring the action links to snackbar-only stubs.

Changes:

• Introduces a new v2-demo Payment Methods template and fake-data slice, plus a template_redirect takeover to make it the sole renderer in demo mode.
• Adds client-side click interception for “Make default / Delete / Add payment method” to show snackbars (no real mutations).
• Updates v2-demo sidebar ordering to include “Payment methods” and documents Phase 6 decisions in the devlog.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/my-account/v2-demo/payment-methods.js	Adds snackbar-only click handling for payment-method actions via data-action.
src/my-account/v2-demo/index.js	Loads the new payment-methods client module into the v2-demo bundle.
includes/plugins/woocommerce/my-account/templates/v2-demo/payment-methods.php	New WC-core-structured payment-methods table template driven by fake data + data-action hooks.
includes/plugins/woocommerce/my-account/class-my-account-ui-v2-demo.php	Adds endpoint renderer + takeover logic, bumps endpoint version, inserts “Payment methods” into menu, and adds fake payment-method data.
docs/my-account-v2-prototype-devlog.md	Records Phase 6 implementation details and cross-phase decisions.

---

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