[Web Component] Use the <va-button>web component for the homepage email signup form

[FranECross]

Status

[2024-08-19] [Fran] I believe the DST code was merged and this can now be worked on (if not, it can go back to Blocked/Backlog).
Before we can pick up and work this ticket, we need to carefully consider exactly how each of the links are constructed and our technical approach to converting them to web components, if possible.

• [2024-07-18] Still blocked; see note below.
• [2024-07-11] The original DST ticket is closed, but there's still a PR open for the changes and it hasn't been released. I commented on the PR to Jami and Andrew asking for a status.
• [2024-07-02] Code hasn't actually been merged. Still blocked.
• [2024-06-05] This ticket is un-blocked. The DST ticket 2379 is in has been released & closed
• [2024-05-30] This ticket is still blocked. The DST ticket 2379 is in progress
• [2024-05-21] Still blocked by #2379
• [2024-05-15] Still blocked by #2379
• Blocked by The submit prop does not work for va-button #2379

Description

New story carved off of #17568 for the web component's submit property, because it doesn't work yet, and wasn't submitting the form data. @laflannery discovered an existing DST issue that describes this problem: department-of-veterans-affairs/vets-design-system-documentation#2379.

History:

As part of this ticket: #17277 we attempted to convert the email signup form on the homepage to design system web components. Unfortunately, the simple implementation caused the form not to submit. We will need to explore further how to use the design system components to implement this form.

User story

End User's Point of View
AS A Veteran, or their family member, caregiver or survivor
I WANT the email sign up form to submit correctly
SO THAT I can get the latest updates from the VA without errors

PO/PM Point of View
AS A PO/PM responsible for the sign up form on the VA.gov home page
I WANT the email sign up form to utilize web components
AND to submit correctly
SO THAT we are in alignment with the Design Team's current requests, as well as so that Veterans, their caregivers, family members and survivors can get the latest updates from the VA without errors

Engineering notes / background

This email form is an integration of the GovDelivery platform. Submissions are sent to GovDelivery via the form action https://public.govdelivery.com/accounts/USVACHOOSE/subscribers/qualify and hidden input fields.

Most recently modified here: #11389

Quality / testing notes

Acceptance criteria
AC1: Veteran, their family member, caregiver or survivor successfully signs up for VA updates
GIVEN: A Veteran, their family member, caregiver or survivor has entered their email address in the form in order to receive updates from the VA
WHEN: I click the 'Sign up' button
THEN: I want the form to submit my email address successfully so that I then receive updates accordingly

Acceptance critera

• Sign-up button is converted to a va-button component
• Baked-in component analytics is enabled
• Custom analytics are disabled
• If any duplicate events exist, they've been deleted. or N/A

[randimays]

@FranECross This ticket is still blocked by department-of-veterans-affairs/vets-design-system-documentation#2379.

[FranECross]

@FranECross check progress and move back to blocked.

[randimays]

Pulling in as stretch for sprint 6.

[randimays]

The original DST ticket is closed, but there's still a PR open for the changes and it hasn't been released.

In the DST ticket:

Putting this ticket back into blocked, and we'll need to track the above PR for when we can unblock.

[randimays]

@FranECross We have custom analytics events on the sign up button:

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

and

event: 'homepage-email-sign-up'
action: 'Homepage email sign up'

When we convert this to a va-button, we will get the URL of the current page, the type of button ("primary") and the text of the button ("Sign up"). Is this sufficient to replace the two custom events above?

Whether we decide to keep the custom events and disable va-button analytics, or remove the custom events and use baked-in analytics, could you please add acceptance criteria for that decision to this ticket?

[FranECross]

@randimays AC added to indicate (1) update to component, (2) enable baked-in analytics, (3) remove custom analytics, and (4) if there are any duplicate events, remove or N/A. Thanks!

[FranECross]

The work in this ticket will be done in 19516. Fran to ensure details in this ticket will be in 19516.