feat: redesign modal checkout

[miguelpeixe]

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:

1205234045751551-as-1205933702651188

Implements a redesigned and new 2-step strategy for the modal checkout.

The modal checkout class no longer performs form validation, it now uses woocommerce_checkout_update_totals so it validates through Woo without having to place the order. By validating through Woo, the modal checkout should natively support any custom field combination Woo and its extensions may use. This new strategy also uses XHR instead of a regular form submission, which should provide a better and faster experience for the reader.

To also increase support for core Woo checkout functionality, the functional aspects of the modal checkout were moved from the template file to hooks. This allows the template file to be modified/updated without impacting the requirements that allow the checkout to function in a modal. The new src/modal-checkout/templates/form-checkout.php is now intentionally very similar to Woo's original template file.

A significant part of the work here has been around src/modal-checkout/index.js, to allow the new 2-step approach to work as the design proposes. Some important parts are:

• When in the first step (editing billing/shipping fields), the original form event handlers are replaced so the form submission performs our ajax request (which adds the woocommerce_checkout_update_totals parameter).
• A custom error handler for the 1st step identifies whether the incoming errors are field-related or generic and appends the error message to the field or at the top accordingly.

Known issues

• The coupon form is inconsistent. When applying a coupon the form disappears, which can be considered fine because it reappears after removing the coupon. It's not ok when applying an inexistent coupon, which shows you an error message and the coupon form disappears, becoming irrecoverable. (PR: feat(modal-checkout): custom coupon form #1629)
• Linter is accusing a CSS kebab-case issue even though the line has /* stylelint-disable-line */. Not sure how to deal with this.

Subscription

One-time donation

Recurring donation

Recurring donation (known customer with known card)

Shippable product

Field validation

How to test the changes in this Pull Request:

1. Checkout this branch and feat: modal checkout redesign tweaks newspack-plugin#2805
2. If you don't have any, setup a shipping zone in Woo:
   1. Visit WooCommerce -> Settings -> Shipping
   2. Click "Add shipping zone"
   3. Give it a name (the country name)
   4. Set the "Zone region" to your country
   5. Click "Add shipping method" and leave it as "Flat rate"
   6. Save changes
3. Make sure you have coupons enabled and have a valid coupon
4. Create a product that can be shipped
5. Create a regular custom subscription
6. Create a page with a Checkout Button block for each of the created products
7. Also add a Donate Block to the page
8. Visit the page, click to buy the shippable product
9. Confirm billing and shipping fields render as expected
10. Attempt to "Continue" without entering all required fields
11. Confirm validation errors render for each field
12. Enter a zipcode that you know to be an invalid format
13. Confirm it errors with "Billing ZIP Code is not a valid postcode / ZIP."
14. Now enter valid fields and confirm you are able to go to the next step
15. Confirm the second step renders a summary of the "Billing details" and "Shipping details"
16. Click "Back" and confirm you are able to edit the fields again
17. Scroll down and toggle "Ship to a different address?"
18. Modify the address and click "Continue"
19. Confirm the summary reflects the different address
20. Apply the coupon and confirm the order review table renders with the coupon information
21. Click to remove the coupon and confirm the order review table is no longer visible
22. Re-apply the coupon so we can confirm the coupon persists while placing the order
23. Submit and confirm the order is placed with the applied coupon
24. Leave the modal and click to purchase the custom subscription
25. Confirm the billing fields reflect the selection from "Newspack -> Reader Revenue"
26. Go through the entire flow and confirm the order is placed without issues
27. Leave the modal and click to donate
28. In the second step, confirm the coupon form is not available
29. Confirm the button to place the order says "Donate now" instead of "Complete transaction"
30. Click to donate and confirm the order is placed

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?

[dkoo]

@miguelpeixe let's base redesign work from the epic/ras-acc branch so we can control the release.

[dkoo]

Getting started with testing and reviewing this (finally! sorry for the delay). But I have an answer to one of your questions!

Linter is accusing a CSS kebab-case issue even though the line has /* stylelint-disable-line */. Not sure how to deal with this.

I ran into this same issue on #1626. The fix is to put both CSS selectors on the same line, like this.

#checkout_continue, #place_order { /* stylelint-disable-line */

[dkoo]

I went through all testing steps and everything is mostly working! 🙌

Before I do a more thorough code review I ran into a couple of minor things so far:

• When checking the "I’d like to cover the 3.6% transaction fee" option, the transaction total is updated at the top of the modal, but not in the Transaction Details summary's total (the order amount is correct once placed, though).
• If taxes are not enabled and no coupons are applied, when purchasing a shippable product with either multiple available shipping methods and/or only paid shipping methods, the Transaction Details summary is not shown. This results in a strange modal state where the totals don't match up (this should be fixed by feat(ras-acc): support shipping, custom fields, and order notes in modal checkout #1626, though, so maybe there's nothing needed for this PR):

More testing and a line-by-line code review to come!

[miguelpeixe]

Thank you for taking this review, @dkoo!

When checking the "I’d like to cover the 3.6% transaction fee" option, the transaction total is updated at the top of the modal, but not in the Transaction Details summary's total (the order amount is correct once placed, though).

Fixed in the Automattic/newspack-plugin#2805 (Automattic/newspack-plugin@6ff7dd0).

If taxes are not enabled and no coupons are applied, when purchasing a shippable product with either multiple available shipping methods and/or only paid shipping methods, the Transaction Details summary is not shown.

The mentioned PR doesn't seem to tweak the rules for when to render the order review table, so I added in e00793f

I ran into this same issue on #1626. The fix is to put both CSS selectors on the same line, like this.

😌 updated in fc748a2

[miguelpeixe]

Update regarding the cover fee issue: Automattic/newspack-plugin#2805 (comment)

[dkoo]

The mentioned PR doesn't seem to tweak the rules for when to render the order review table, so I added in e00793f

It does: https://github.com/Automattic/newspack-blocks/pull/1626/files#diff-74a92f16c32d2a94751337aaff7d24de10881675f81809bae9d09e79cc47e10eR645

But it uses $cart->needs_shipping_address() instead of just $cart->needs_shipping(), so maybe it would need to be tweaked.

[miguelpeixe]

Ah, I missed that. I think my brain was looking for a one-liner 😅 . I'll revert my change and allow your PR to handle those requirements.

[dkoo]

Looking good! Issues and solutions in separate PRs noted. I think this is a fantastic foundation for the redesigned modal checkout experience, and it lays the foundation for a lot of great work to come!

Tested with one-time donations, recurring donations, non-donation purchases (one-time and subscriptions), variable subscriptions, and shippable products. Couldn't break it.

[matticbot]

🎉 This PR is included in version 3.0.0-epic-ras-acc.1 🎉

The release is available on:

• npm package (@epic/ras-acc dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.1.0-epic-ras-acc.1 🎉

The release is available on:

• npm package (@epic/ras-acc dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.2.0-epic-ras-acc.1 🎉

The release is available on:

• npm package (@epic/ras-acc dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 3.3.0-epic-ras-acc.1 🎉

The release is available on:

• npm package (@epic/ras-acc dist-tag)
• GitHub release

Your semantic-release bot 📦🚀