Download page

[oddball-lindsay]

Issue Description

The Download page instructs users to download, print and sign their form. The Review page will be available to all users:

1. Authenticated and unauthenticated Veteran users
2. Authenticated and unauthenticated non-Veteran users
3. 21-22 and 21-22a forms

Content is dynamic based on:

1. If the user is a Veteran, the h2 should reference "Chapter 5". If the user is a non-Veteran the h2 should reference "Chapter 6".
2. If the user selects a VSO for representation, they will see "VA Form 21-22" at the top of the page. If the user selects an attorney/claims agent for representation, they will see "VA Form 21-22a" at the top of the page.

Implementation note: If a user has entered an email address, engage VA Notify when they select "Continue"(See #90325 for our approach)

URL: ~/download~ /confirmation Note: Had to update the URL here because the forms library requires the last page of the form experience (following the Review page) to be /confirmation.

Previous path:

1. /review

Next paths:

1. /next-steps

MVP Planning Mural

Designs

Prototype, Canvas, Annotations + Desktop design

---

Tasks

• [x] Create the Download page based on the designs above
• [x] Set up the proper logic for displaying the page, as well as the content within
• [x] Set up routing to the proper form fields

Acceptance Criteria

• [ ] A Download page has been implemented, with the specs outlined above.

[holdenhinkle]

I'll pick this up tomorrow, Thursday, August 29th.

[holdenhinkle]

From https://depo-platform-documentation.scrollhelp.site/developer-docs/va-forms-library-overview

Forms Library general flow:

Introduction Page → Form Pages Start → Form Pages → Review Page → Submission → Confirmation Page

---

Submission happens on the 'Review Page'.

It seems that the 'Download' page is the 'Confirmation' page in Forms Library.

Here are the options for and related to submit:

col 1	col 2	col 3	col 4
submitUrl	string	Path to vets-api controller for form submission.	submitUrl: ${environment.API_URL}/v0/health_care_applications
submit	function	Function that’s called upon form submission.Optional: If a custom submit isn’t provided, there’s a system default that runs.	submit: (form, formConfig) => {}
transformForSubmit	function	Called during form submission to transform submitted schema data (Optional).Calling transformForSubmit in platform/forms-system/src/js/helpers will remove view fields from the schema data.	transformForSubmit: (formConfig, form) => {}
errorText	component	Component used as part of the default error message if submission of the form fails.	errorText: ErrorText
submissionError	function	Component that replaces the default error message component if submission of the form fails.	submissionError: ({ form }) => {}

Here's the info on the 'Confirmation' page:

col 1	col 2	col 3	col 4
confirmation	component	The confirmation page component that will render after the user successfully submits the form.	confirmation: ConfirmationPage

[holdenhinkle]

https://github.com/department-of-veterans-affairs/vets-website/pull/31678

This is 99% done:

I’m trying to force the h2 to look like an h3 using the vads-font-size-heading-level-3 class found here and it’s not working - https://design.va.gov/foundation/typography

I don’t see any classes being used that start with vads-font-size on vets-website.

I asked Colin if I'm using it correctly.

[oddball-lindsay]

Per the annotations it seems like the "Download, print, and sign your form" is an h3.

...but I think that's because the progress stepper was h2.

Now that we're removing the progress stepper, I wonder if h2 is actually correct in which case there'd be no need to force it to h3. @mtri what do you think?

[mtri]

It can be an h2 without restyling it. I don't think there's any problem with that. I'll update in Figma as well.

[holdenhinkle]

This is done and is in review.

[holdenhinkle]

@mtri Can you please QA this page? Thanks!

[holdenhinkle]

I just saw this:

It can be an h2 without restyling it. I don't think there's any problem with that. I'll update in Figma as well.

Yes, it has to be h2. But I made it look like h3 to match the (original?) design. Should it look like a normal h2?

[oddball-lindsay]

@holdenhinkle yes h2! Michael updated the annotation to reflect that.

[mtri]

• Very small thing 🙂, can we increase the space here here so the download action and the checkbox action have some visual separation?

  

• I don't mind the h3 styling as is since it has a kind of visual consistency with the previous page, but we did swap to the h2 styled as h2 which has its own benefits (It's good when an h2 looks like an h2) so we should probably go that route. Sorry for the back and forth there.

Thanks!

[oddball-lindsay]

Also need to add in the "Need help" section at the bottom.