[Homepage email signup] Create React widget for homepage email signup form and add new error handling states

[randimays]

Description

On VA.gov at the bottom of the homepage, there is a section titled "Sign up to get the latest VA updates" with an input for an email address.

There is currently no error handling in place for this form. If the form fails to reach the GovDelivery service, the user will be directed to a browser error page (404). There is also no input validation on the form, allowing a user to submit the form with a blank email address or with any combination of characters.

We need to address these gaps in error handling, but we want to avoid adding a lot of Javascript (client-side code) to content-build. Since the form currently lives exclusively in content-build, we need to create a React widget in vets-website for the form and implement it on the homepage in content-build.

Example of an existing vets-website widget:

• Language toggle - vets-website
• Widget implementation (empty div) - content-build

Email signup form, present and future

Existing design (production)

#### Mobile #### Desktop

New design

In #19314, DaveP created the error state for when the GovDelivery service rejects our request or the server response fails for any reason. Figma: https://www.figma.com/design/60PPoOSpKiXwmNHT01C09J/Home-Page-Updates?node-id=38-3849 #### Input validation states - desktop and mobile #### Server issues - mobile #### Server issues - desktop

Summary of the tasks for this ticket

• Remove the GovDelivery / email signup HTML form and all its functionality from content-build
  • Replace with an empty div pointing to a new React widget in vets-website
• Create a React widget in vets-website for the form to include:
  • Input validation built in from the web component(s)
  • Input validation messaging aligning with the Figma design in New design above
  • Server error handling (pink banner) per the Figma design
• Add unit and/or e2e tests for the new React widget as appropriate / capable

User story

AS A Veteran or other user when on the VA.gov home page signing up for emailed VA updates I WANT to know if I make a mistake when entering or submitting my email address SO THAT I can correct the mistakes and there isn't a 'silent' failure of my signup, thus resulting in my not receiving email updates.

Engineering notes / background

It may be helpful to read the technical notes put together as part of the Zero Silent Failures SPIKE for this component: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/19242#issuecomment-2372312641

Analytics considerations

// ~TODO~ DONE (see below) @FranECross: We currently have a custom event on the submit button for this form. It logs two events:

{
  event: 'cta-button-click',
  'button-type': 'primary',
  'button-click-label': 'Sign up'
}

{
  event: 'homepage-email-sign-up',
  action: 'Homepage email signup'
}

If we choose to use the Design System analytics for this button, we'll get this one event:

{
  type: 'primary',
  label: 'Sign up'
}

@FranECross: The custom event clearly has more detail, but do you want to change anything about it as part of this ticket? OR keep the custom event as-is? Fran: Let's keep the custom event, unchanged. Thanks!

Testing & QA

Scope / Impact analysis

What, if anything, could break as a result of this change? Engineer should assess this when approaching PR.

Roles / assignments

After functional testing, code review, accessibility review, and design review can happen in parallel.

• [ ] Functional testing: Fran Cross (if needed)
• [ ] Code review:
• [ ] Design review:
• [ ] Accessibility review:
• [ ] Product acceptance: Fran Cross

Acceptance criteria

_ACs should capture expected behavior, to inform test plans. Consider devices, documentation updates including KBs, change management, and content model when applicable._

• [ ] Remove the GovDelivery / email signup HTML form and all its functionality from content-build
  • [ ] Replace with an empty div pointing to a new React widget in vets-website
• [ ] Create a React widget in vets-website for the form to include:
  • [ ] Input validation built in from the web component(s)
  • [ ] Input validation messaging aligning with the Figma design in New design above
  • [ ] Server error handling (pink banner) per the Figma design
• [ ] Add unit and/or e2e tests for the new React widget as appropriate / capable
• [ ] Accessibility review
• [ ] Design review
• [ ] Impact analysis is filled out and QA test plan is updated accordingly
• [ ] Does this product have an existing regression test plan?
  • [ ] Yes, link:
  • [X] No, regression test plan will be created by Fran Cross as part of the work / points in this ticket

[FranECross]

@randimays I've answered the analytics question, added names to the roles, and also ticked the box for no current regression test, but indicated that I will create one for this issue. I'll get it done before the work begins.