fix(modal-checkout): better iframe sizing

[dkoo]

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:

Improves the sizing of the modal checkout iframe and its content wrapper element to allow fixed-position elements and scrollTo methods to work inside the iframe content.

The max-height of a Newspack UI modal element is 90% of its fixed full-viewport parent element, effectively 90vh or 90% of the total viewport height. The height of the iframe should not exceed this height, minus the height of the modal's header element, if present, to allow for proper content scrolling and positioning behavior inside the iframe's content window.

See also: Automattic/newspack-plugin#3741

How to test the changes in this Pull Request:

1. On trunk, connect reCAPTCHA v2 and set up a shippable product that can be purchased via Checkout Button.
2. As a reader, start a modal checkout transaction for the shippable product.
3. Observe the following behavior:

• When checking or unchecking the "Ship to a different address?" checkbox, the modal will scroll near (but not all the way to) the top of the iframe content window
• When rendering the reCAPTCHA v2 widget upon clicking "Complete transaction", the widget appears at the top of the page, and the modal will scroll near (but not all the way to) the top of the iframe content window, to bring it into view

4. Check out this branch and fix(recaptcha): no need to scroll to top when showing v2 widget newspack-plugin#3741.
5. Refresh your site and start a new modal checkout transaction again. This time confirm the following behavior:

• When checking or unchecking the "Ship to a different address?" checkbox, the modal will NOT scroll away from the checkbox
• When transitioning between screens of the modal checkout form, the modal checkout WILL scroll all the way to the top of the iframe content window
• When rendering the reCAPTCHA v2 widget upon clicking "Complete transaction", the widget appears directly over the button, and the modal will NOT scroll away from the "Complete transaction" button
• After completing the transaction, the modal will still properly resize to contain the success message

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 looks really nice, @dkoo! It works as described, and also fixes the weird 'hop up' that happens on when you toggle on and off the option to cover the transaction fees when the Transaction Details table is already visible (like for monthly donations) 🎉

[github-actions]

Hey @dkoo, 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 📦🚀