Feature: Donation form now renders within iframe

[jonwaldstein]

Resolves #16

Description

This updates the NextGen donation form to live inside an iframe. Instead of all the render logic happening inside the block render_callback - we will not just return an iframe. The iframe url is a registered route inside our framework that will load all the necessary scripts and render the form.

The iframe url will look like this:

/?givewp-view=donation-form&form-id={formId}&form-template-id=classic

Extra Notes

iframe loading
The iframe is pretty basic at this point, just using the iframe-resizer library. Eventually the loading process will be more appealing as well as its transitions. There's just a few things to think through there that are out of scope here.

formTemplateId
Notice throughout the render process we are specifying the id of the formTemplate. This is purposeful to keep things agnostic at this point. The logic will change slightly when we have a Form model and a default formTemplateId - in which the template we are specifying in the iframe route could act as an override.

sessions
Turns out we were relying on a previous session to be stored which allows the legacy receipt to be displayed properly. This logic was updated in the DonateController. Eventually this will be cleaned up when we figure out how we want to handle NextGen receipts & redirects.

web component
To get this workflow setup, there's some contextual scripts needed for the iframe to work & resize correctly. We have talked about introducing a web component in the near future to make this way easier to setup and understand.

embed wording
Notice I used the word "embed" to describe the iframe resizing scripts. This was purposeful to position our iframe's terminology as it relates to the goal of what were rendering (an embedded form).

Affects

• The donation form block js folders have been moved into a resources folder to clean things up. Those paths were updated in the build process
• Everything else should basically work the same.

Testing Instructions

• Pull the branch, run composer and build scripts.
• Make sure to create a NextGen form
• View the form on the front-end using the NextGen form block
• It should (mostly) look and function the same just in an iframe now.

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

[github-actions]

A build of this branch is available at https://impress-org.github.io/givewp-next-gen/feature/iframe-form-render

[jonwaldstein]

@JasonTheAdams this is ready for review. Please read the PR description for all my notes. Lmk if you have any questions or run into any troubles.

cc: @kjohnson

[JasonTheAdams]

@kjohnson Please review this as well (code and user test).

[JasonTheAdams]

Excellent work, @jonwaldstein! We have so much more work to do. Hahah! But this is a really solid start. Great foundation. 💪

[jonwaldstein]

@JasonTheAdams all comments addressed. The scope for this PR was to just move all the form rendering inside an iframe and keep the existing functionality the same. We'll clean up the form repository in the model PR.

[JasonTheAdams]

Another big step in the right direction. 🥾

[github-actions]

A build of this branch is available at https://impress-org.github.io/givewp-next-gen/develop