Skip to content

fix(modal-checkout): always show deal-accurate order details#453

Open
miguelpeixe wants to merge 10 commits into
mainfrom
fix/modal-checkout-price-card
Open

fix(modal-checkout): always show deal-accurate order details#453
miguelpeixe wants to merge 10 commits into
mainfrom
fix/modal-checkout-price-card

Conversation

@miguelpeixe

Copy link
Copy Markdown
Member

All Submissions:

Changes proposed in this Pull Request:

The modal checkout showed a static price summary at the top that did not reflect dynamic-pricing deals, while the real order total was tucked behind a collapsible "Transaction details" toggle. This PR makes the modal present the real, deal-accurate order summary inline and always visible:

  • Removes the static price-summary cards — the fixed top price (in both the checkout form and the registration/auth modal) that ignored applied deals. The hidden product-details data carrier is preserved, so Reader Activation's checkout_completed analytics still fire.
  • Always renders the order-details table — including simple single-item carts (e.g. a one-off donation), which previously displayed nothing at all. The amount shown is the real cart total, with any deal or coupon applied.
  • Removes the "Transaction details" heading and the collapse/expand toggle — the order summary now renders inline and is always visible: no title, no chevron, nothing to click.

How to test the changes in this Pull Request:

  1. On a site with WooCommerce + Newspack reader revenue, open a page with a donation block or a checkout-button and trigger the modal checkout.
  2. Confirm there is no static price box at the top of the modal (previously a fixed "Product: $X" line that ignored deals).
  3. Confirm the order summary renders inline and is always visible — no "Transaction details" heading, no chevron, no click required — for a simple single-item cart (one donation/product). Previously this case showed nothing.
  4. Confirm the displayed total reflects any applied dynamic-pricing deal or coupon (the real cart total), not a static price.
  5. Complete the checkout and confirm the order completes normally, and that shipping / gift-subscription fields still render where applicable.
  6. Confirm Reader Activation's checkout_completed event still fires with product details (the hidden #modal-checkout-product-details carrier).
  7. Regression: test a multi-item cart and a cart with a coupon — confirm the order-details table still renders correctly.

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 run tests with your changes locally?

Copilot AI review requested due to automatic review settings June 29, 2026 20:41

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Newspack Blocks modal checkout UI so the user always sees the real (deal-/coupon-accurate) WooCommerce order review inline, instead of a static price summary plus a collapsible “Transaction details” section.

Changes:

  • Removes the “Transaction details” collapse/expand UI and always renders the WooCommerce order review table inline.
  • Removes the static price summary injection in the Reader Activation auth/registration modal flow.
  • Keeps a hidden #modal-checkout-product-details carrier and adjusts JS insertion points to anchor to it.

Reviewed changes

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

Show a summary per file
File Description
plugins/newspack-blocks/src/modal-checkout/templates/form-checkout.php Removes the “Transaction details” toggle markup and renders order review directly.
plugins/newspack-blocks/src/modal-checkout/modal.js Stops injecting the static price summary into the auth/registration modal.
plugins/newspack-blocks/src/modal-checkout/index.js Removes toggle logic and anchors checkout-details rendering after #modal-checkout-product-details.
plugins/newspack-blocks/src/modal-checkout/checkout.scss Removes collapse/expand styles and adds spacing for always-visible order review.
plugins/newspack-blocks/includes/class-modal-checkout.php Makes order details always eligible to render for non-empty carts; replaces the visible summary card with a hidden data carrier.

Comment thread plugins/newspack-blocks/includes/class-modal-checkout.php Outdated
Comment thread plugins/newspack-blocks/includes/class-modal-checkout.php
Comment thread plugins/newspack-blocks/includes/class-modal-checkout.php Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

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

Comment thread plugins/newspack-blocks/includes/class-modal-checkout.php Outdated
Comment thread plugins/newspack-blocks/includes/class-modal-checkout.php Outdated
Comment thread plugins/newspack-blocks/src/modal-checkout/index.js Outdated
@miguelpeixe
miguelpeixe marked this pull request as ready for review June 30, 2026 13:45
@miguelpeixe
miguelpeixe requested a review from a team as a code owner June 30, 2026 13:45
@miguelpeixe miguelpeixe self-assigned this Jun 30, 2026
@miguelpeixe
miguelpeixe requested a review from dkoo July 2, 2026 18:32
Resolve conflicts with PR #264 (repeat-trial pricing sync) in
class-modal-checkout.php and modal-checkout/index.js:

- render_before_checkout_form(): keep this PR's hidden data-carrier
  (visible price-summary card removed); main's tested
  get_cart_product_summary* helpers + backend repeat-trial fix retained.
- index.js: drop the now-obsolete static-summary sync and the removed
  Transaction Details toggle; preserve getCheckoutPostData(), which the
  retained Place Order total sync depends on.

@dkoo dkoo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@miguelpeixe Reviewed + manually QA'd on an integrated env (WCS 9.0 + Stripe test, #453 built into newspack-blocks). Approving — the core change is sound: the stale, non-deal-aware price-summary card is gone, and the real WooCommerce order-review table is now always shown for any non-empty cart (including the single-item/donation case that previously showed nothing), with amounts driven by the cart total so they reflect the actual charged amount (engine deal or coupon).

On the deal disclosure (the thing I most wanted to confirm): it's preserved. The always-visible order-review table is WooCommerce's standard review-order.php, which fires the same woocommerce_cart_item_name / woocommerce_cart_item_subtotal filters the engine uses — so the rule name + regular→adjusted strikethrough render right there. Verified live (a publicized deal on a subscription shows the badge + ~~$10.00~~ $4.00 in the modal). Removing the card doesn't lose the disclosure.

A few non-blocking follow-ups (none gate merge):

  • Dead price_summary plumbingmodal.js:171 still assigns checkoutData.price_summary to a <strong> that no longer exists (still built at :339); the engine's newspack_modal_checkout_price_summary bridge is now a no-op for the modal. Worth removing the dead JS/PHP and letting the engine side know.
  • Pre-existing escaping gapthankyou.php (not touched by this PR) emits data-checkout via raw wp_json_encode with no esc_attr in a single-quoted attribute, so an apostrophe in a product name breaks it. This PR added data_checkout_attr() (esc_attr + ENT_QUOTES) for exactly this — worth applying it to that caller too.
  • Nits: an orphaned woocommerce_checkout_before_order_review_heading hook; and the new escaping helper could use a test.
  • #446 coupling: both PRs edit checkout-button/view.php — likely a merge conflict to resolve, but the behavior composes fine.

Nice cleanup — the always-visible order table is a real improvement. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Status] Approved Pull request has been approved

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants