feat: toggle transaction details

[laurelfulford]

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:

This PR makes the Transaction Details section of the Modal Checkout collapsed by default, and makes it toggle opened/closed.

I originally tried to approach this within the Newspack UI code (Automattic/newspack-plugin#3734 and Automattic/newspack-plugin#3734), but the way we destroy/re-add this table made it hard to get that approach playing nicely and not re-collapsing/requiring a bit of a rewrite.

This approach is strictly tied to the markup in the modal checkout, but let me know if the original approach would've been better!

See 1200550061930446-as-1208982074785832

How to test the changes in this Pull Request:

1. Apply this PR and run npm run build.
2. Under Reader Revenue settings, enable the option to cover the transaction fees, but leave it unselected by default.
3. Run through a checkout using monthly or annual Donation product.
4. On the second screen, confirm you see the Transaction Details heading with a chevron:

5. Inspect the heading (which should actually be a button) and confirm it has the attribute aria-expanded set to false, and the attribute aria-controls set to the ID that holds the transaction details table (order_review_content).
6. Click the header and confirm that the table expands nicely.
7. Inspect the heading and confirm the aria-expanded attribute has switched to true.

8. Try checking/unchecking the transaction fees checkbox, and confirm the table remains visible, and that the aria-expanded attribute on the heading stays as true.
9. Trying clicking the 'Back' then 'Continue' button to go to the first screen of the checkout and back again, and confirm the table remains visible, and that the aria-expanded attribute remain true.
10. Toggle the Transaction Details closed again, and repeat some of the above (toggling the transaction fees, clicking 'Back' and 'Continue) to make sure the aria-expanded attribute remains false.
11. Run through a new checkout using the One-Time donation product.
12. On the second screen, confirm that the Transaction Details are not visible by default.
13. Toggle on the option to cover transaction fees, and confirm the Transaction Details heading appears.
14. Click the Transaction Details header and confirm the table opens, and that it has the attribute aria-expanded set to true.
15. Try toggling off and on the transaction fee coverage and confirm the section disappears, but when it reappears the table is still open and that the heading's aria-expanded attribute is still true.
16. Trying clicking the 'Back' then 'Continue' button to go to the first screen of the checkout and back again, and confirm the table remains visible, and that the aria-expanded attribute is still true.
17. Toggle the Transaction Details closed again, and repeat some of the above (toggling the transaction fees, clicking 'Back' and 'Continue) to make sure the aria-expanded attribute remains false.

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?

[laurelfulford]

This is nearly done, I just need to make it accessible then I'll mark it ready for review!

[laurelfulford]

This should be ready to go!

@thomasguillot I've included you for a design review just to make sure things look as expected (especially with how the animation feels!).

[thomasguillot]

I've slightly tweaked the transitions. 797c458

My main worry is how the scroll behaves. It's quite bouncy. I wonder if the user clicks this they are automatically scrolled down to the #transaction-details... Anyway it's not a blocker at all, just some I've noticed.

[dkoo]

I think the bounciness will be fixed by this PR: #2052

There's currently a resize listener on the iframe element that attempts to scroll to to the top of the content whenever the iframe resizes. I think the intention is to scroll to the top of the page when transitioning between modal checkout screens, but it ends up getting triggered by anything that could cause a resize, including things like accordions.

[laurelfulford]

Thanks @thomasguillot and @dkoo!

#2052 has been merged, so I've updated this PR from trunk and it's definitely helped with the weird jerkiness -- in my testing, the modal's scroll position is staying put as you toggle open and closed the transaction details, and toggle on and off covering fees.

[chickenn00dle]

Looks good. Great work @laurelfulford!

[github-actions]

Hey @laurelfulford, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[matticbot]

🎉 This PR is included in version 4.7.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀