Fix: Modal rendering across different Iframe contexts

[JoshuaHungDinh]

Resolves: GIVE-810

Description

This PR addresses the issues related to the Consent field modal rendering within different contexts on the donation forms.

Originally the modal was rendered with react.createPortal('document.body). This limits the modal to its own iframe. Depending on how to the donation form is being viewed the modal placement will have different positions. To help with this concern our original implementation had scrolled to the middle of the form and rendered the modal. However this was not the modal ideal UI/UX.

To further address the issue we have implemented the following changes:

Updated portal element:

react.createPortal('window.top.document.body) ensures that the modal is inserted at the Top-Level document above all other Iframes. While displayed in either a donation-form-block, the Frontend, in WP editor or on the VisualFormBuilder the form size is different, the element scrolling the form can change and these cause different scroll positions for the modal . By inserting the element above all other documents we can ensure consistent styling across multiple views..

Iframe Handling:

Because the modal is now being inserted at the Top-Level document I created a new utility function createIframePortal() to handle rendering of child elements within an Iframe. It acts as a wrapper around react.createPortal(). It will create a new Iframe around the modal and copy the existing Iframe's stylesheets prior to inserting it at the Top-Level. This ensures stylesheets provided by users are still applicable to the Consent field modal & that styling conflicts do not arise from rendering in a new document context.

UI/UX improvements

• Editing the "Show terms" link text when you choose “modal” as the display type is now allowed.
• The styles for the "Accept" button in the modal has been updated

Affects

The terms & conditions block.
The Consent block.

Visuals

Testing Instructions

• Create a v3 form and include a T&C block & a Consent Block.
• Set the blocks to be viewed in a modal through the inspector controls while in the Visual Form Builder.
• You will need to open each block to verify the modal is always centered on the screen regardless of where the element sits on the form or your scroll position.
• Verify the above in each context:
  • The Visual Form Builder - Design mode.
  • The Frontend page.
  • The WP block editor
  • When the donation-form-block is rendered on the frontend.
• Update & verify the link text for each modal.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[pauloiankoski]

Really nice approach! 👏🏻👏🏻👏🏻

[rickalday]

Passed manual QA tests.