Fix: Apply taggedElement to improve iframe height resizing in v3 forms

[JoshuaHungDinh]

Resolves GIVE-1429

Description

This includes the heightCalculation prop on the Iframe-Resizer-react component for v3 forms. The taggedElement used can be found in the DonationFormViewModel.php class. The element can be found via id="root-givewp-donation-form" . taggedElements are denoted via data-iframe-height

I also noticed the parent page script for the iframe-resizer JS package in embed.ts was enqueued for v3 forms. It is targeting an iframe via iframe[data-givewp-embed] which does not align with the iframe currently used to render v3 forms.

The iframe-resizer-react documents do not explicitly mention to load the parent page script. So I have removed the script from enqueuing. Reference: https://www.npmjs.com/package/iframe-resizer-react/v/1.1.0

Additional Context

• In an earlier NextGen version the BlockRenderController rendered an iframe with the data attributedata-givewp-embed
  Reference: Pull Request
  File: src/NextGen/DonationForm/Blocks/DonationFormBlock/Controllers/BlockRenderController.php
• v2 forms have there own implementation of iframe-resizer that is passed via the window object.

Affects

v3 forms on the frontend, including confirmation pages.

Visuals

Testing v3 Forms

testing.v3.forms.mov

Testing v3 Forms as a Block & Shortcode

testing.block.and.shortcodes.mov

Testing v2 Forms

testing-v2-forms.mov

Testing Instructions

• Create a v3 form to easily view the dynamic changes in height add some simple text fields to the second section.
• Use the MultiStep forms and navigate the pages, we are testing mainly the previous button functionality to ensure the iframe not only expands but reduces height as well.
• Ensure all three forms continue to display as expected.
• Process a donation verify the Confirmation page continues to load in an iframe with the taggedElement.
• Verify v2 form templates also continue to resize dynamically.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Self Review of code and UX completed

[jonwaldstein]

This script is also used in the confirmation page, let's just make sure there are no side effects there (I believe it's loaded seperately)

[JoshuaHungDinh]

Yes! The videos up top are actually me just testing via different form rendering. At the very end I inspect the Iframe on the confirmation page & you can see the taggedElement and the iframe rendered which does not hold the data-givewp-embed so it's not being targeted by the file.

[jonwaldstein]

I revisited the original embed file and remembered that I added the iframe resizer to look for the data attribute data-givewp-embed. Is that still at thing?

[JoshuaHungDinh]

After looking a bit further , I found this is still very much a thing 😄.

embed.ts is required for the Confirmation Page. Without it the v3 confirmation page does not size properly.

In the console I can see the iframe using data-givewp-embed.

[jonwaldstein]

Okay so if i'm understanding correctly, we don't need the embed script for the donation form because we are using the react version, but the confirmation page does not use that so we still need the vanilla embed script. That sound right?

[JoshuaHungDinh]

Yes, the confirmation page displayed through the standard form submission process still uses the React version. However, confirmation pages generated through other methods, such as shortcodes, will still require the embed script to function properly.

[jonwaldstein]

@JoshuaHungDinh nice job!

[rickalday]

Passed manual QA tests.