CHAL-53 #done - Implement election reminders page

[dvorakjt]

Checklist

• Include the corresponding Jira issue key and #done in the PR title, like so: "JRA-123 #done Migrate Election Reminders"
• Verify that the code compiles (npm run dev)
• Verify that the project builds (npm run build)
• Verify that all tests pass
• Verify that unit tests cover 100% of the code
• Create Storybook stories for visual components
• Verify that any visual components match the Figma
• Test with a screen reader (if applicable)
• Document your code with TSDoc comments
• Format your code with Prettier

Overview

This PR implements the Election Reminders page by executing a script provided by Rock the Vote. To style the form itself, I provided a stylesheet to RTV via the partner dashboard. I was not able to preview the election reminders page via the dashboard (the only form you can preview is the registration form), so I performed tests locally by copying the body element rendered by the RTV script, pasting it into an html file and styling that. I also experimented with editing the styles for different elements within the form live in the browser. These approaches had their limitations though, and I have had to submit the stylesheet for approval several times now. Additionally, getting the labels to float up (and remain floated) once the user interacted with a field was tricky. The approach that I took was to apply an animation to all the labels with an iteration count of 1 and a fill mode of forwards and set the animation-play-state property to paused. I then used the :focus pseudo-class to set animation-play-state to running.

Despite my best efforts, there are a few remaining issues with the styles. These include:

• When the user submits the form and there are invalid fields, the page is reloaded cause the floating labels to occupy the same space as their now filled-in input elements.
• When the user fills out the form with autofill, floating labels do not float up.
• When the user successfully submits the form, a new page is briefly shown before the user is redirected by our app. Content on this page should be hidden so all the user sees is a loading wheel.
• I forgot to remove the margin from the body element.

I did come up with and test solutions for these problems. These issues will be resolved once RTV has approved my latest stylesheet submission, so the PR itself is ok to merge regardless. It's the weekend now, so I expect they should approve that Monday or Tuesday.

Another issue is that the RTV script uses the document.write() function to create its content. External scripts that use this function in a React app must have document.open() explictly called before they execute. To get around this issue and render the form, I rendered it in an IFrame and passing in the code that renders the form via the srcdoc property.

Because the RTV script renders the form it creates in a cross-origin IFrame (this is not the IFrame I created, but rather an IFrame inside my IFrame), our application can't access any information about what is going on inside the IFrame. The only way that I can determine if the form has been successfully submitted is actually the scrollHeight of the contentWindow.document.body of the outer IFrame--the completed page is much smaller in height than the page that displays the form. I was able to use a ResizeObserver to watch for this change, and when the form has been successfully submitted, the user's record is updated and a badge is awarded.

All told, I had to use a lot of little tricks to get the election reminders page to do what it's supposed to--display the RTV form with styles that match the rest of the app and award the user a badge when the form is completed--but the end result is good and reliable. Hopefully in the future, RTV adds an API endpoint like they have for registrations so that this can all be done with Fully Formed instead.

Here is a screencast for reference:
https://www.awesomescreenshot.com/video/31780627?key=ec7e86b4205f8b2bc9ee7f925bb1f1b2

Test Plan

100% of the code is covered by unit tests.

Follow ups

We will need to verify the styles once more once approved by RTV. In the future, it would be nice if we could accomplish this more simply, such as with an API and Fully Formed.

[ty730]

Everything looks good. Nice that the iframe handles loading well and is responsive.