[Events] Provide an FE design to expose the CMS field (registration required checked) to the FE

[wesrowe]

Description

Needs refining – discovered this issue/defect(?) in #13329. Documented in a comment on 13329, FE engineer may respond do that comment.

User story

AS AN Event Editor
I WANT any selections I make in the drupal UI be reflected in the Veteran-facing product
SO THAT Veterans get complete and accurate information about events.

###Design

• Outreach and events Sketch file (FE design)
• Events Figma file (BE design)

Background

We need to know how/if the "registration required" checkbox in the Event UI is used by the FE template. At the moment, it doesn't appear to change anything on the front-end.

Example:

• https://www.va.gov/outreach-and-events/events/61560/
• https://www.va.gov/outreach-and-events/events/61560/

The Event Editor checked the box for required, but I don't see anything in the FE that indicates that:

Engineering notes

• The 'registration is required' field is called field_event_registrationrequired
• It is NOT used in the FE template. Instead, the field_event_cta field is used to determine if registration is in place, and if so, render the type of registration based on the field_event_cta field value. The field_event_registrationrequired is not used anywhere in the FE.

FE code

        {% if fieldLink or fieldEventCta or fieldAdditionalInformationAbo %}
          <div class="registration vads-u-margin-top--4 vads-u-margin-bottom--1">
            {% if start_timestamp < current_timestamp %}
              <p class="vads-u-margin--0 vads-u-color--secondary vads-u-font-weight--bold">This event already happened.</p>
            {% else %}
              {% if fieldLink %}
                <p class="vads-u-margin--0">
                  <a class="vads-c-action-link--green" href="{{ fieldLink.url.path }}">
                    {% if fieldEventCta %}
                      {{ fieldEventCta | removeUnderscores | capitalize }}
                    {% else %}
                      More details
                    {% endif %}
                  </a>
                </p>
              {% endif %}

              {% if fieldAdditionalInformationAbo %}
                <p class="vads-u-margin--0">{{ fieldAdditionalInformationAbo.processed | phoneLinks }}</p>
              {% endif %}
            {% endif %}
          </div>
        {% endif %}

Analytics considerations

Quality / testing notes

Acceptance criteria (Sprint 98 - 3 points)

• Worked with BE engineer to find out what field is set by the "registration required" checkbox
• Verified with FE engineer whether the FE template queries the "registration required" field
• Spelunked any existing assets to determine what the original intent of this field was – github, Figma/Sketch, Slack, etc
• Made recommendation to PM/PO about what to do to make the FE match the BE
• Make design illustrating what the behavior should be in the FE based on CMS choices

Acceptance criteria (Sprint 99 - 3 points)

• Review with Accessibility
• Requested UX Lead review
• Review with Engineers

Acceptance criteria (Sprint 100 - 2 points)

• Implement any feedback
• Ticketed FE implementation (ping Fran to write ticket)
  • Keep Tim Cosgrove in the loop - events in this case..
• Ticketed BE implementation (ping Fran to write ticket)

[wesrowe]

assigned to Jordan for pre-finement.

[randimays]

@wesrowe @thejordanwood The registration required field is available to this template (I checked, and it's coming out true), but it is not used.

[thejordanwood]

What I found while spelunking:

1. No FE design in this Sketch file. I found the CMS design for this in Figma.
2. This slack thread mentions a FE defect where events hosted online fail to display on published event pages (ticket 11346) and a defect with the call to action conditional field values (ticket 9410). In that thread the "registration is required" field was mentioned but I don't believe it was tied to either of these defects.

From a design standpoint, I can't find an answer to if "registration is required for this event" was intended show on the FE or not. My opinion is that it should show only if the Registration call to action is selected. The other call to actions (Apply and RSVP) imply that a next step is required and the More Details call to action should have no requirements.

[jilladams]

We talked about this briefly in FE refinement, and the next step seems like: let's get a comp together to propose what shoul d happen between CMS <>FE so Editors can tell Veterans to Register. Queing to refine more with UX.

[jilladams]

Rereading I think we are down to:

• We could expose it to the Front-end, just need to decide where.
• We could hide it or remove it from Drupal.

If there are any events where the box is checked (Drupal could audit and tell us that), that indicates it's true for some events, and we should consider exposing it to the FE, near the CTA.

[thejordanwood]

@jilladams I do believe that there are some events where this is checked, so we may need to show it on the FE.

[jilladams]

This ticket has been updated to cover providing a FE design to expose that CMS field to the FE.
We'll need a FE implementation ticket, once the design is done, noted in the ACs.

Calling this refined, but if we wind up with more questions during the work or need to add/update ACs, just holler.

[thejordanwood]

End of sprint update:

I added the design to the Outreach and events Sketch file, but haven't had time to get feedback this sprint. I added ACs to the ticket to show who I need to get feedback from.

[thejordanwood]

After thinking this through more, I believe this will need a change in Drupal to provide a better UX experience.

• The FE design can be found in this Sketch file. My proposal is that we add a sentence under the CTA that states "Registration is required for this event."
• The Drupal design can be found on the Registration page in this Figma file. I believe we should move the "Registration is required for this event" checkbox below the Call to action dropdown and have it show conditionally.
• It should not show when an editor selects More Details. It should show when an editor selects Registration.
• Should it show when an editor selects Apply or RSVP? To me, these labels imply that they're required, but I'm wondering if that isn't so obvious.

[laflannery]

@thejordanwood

• For the front end, I have 2 comments:
  • I think the sentence should be above the CTA as this seems a bit more logical. Someone is reading the page, they get to the Register link, go by is, then they find out registration is required now they have to go back up vs they read that registration is required, then the next thing they encounter is the registration link.
  • However, I am also a little concerned that simply having this as plain text (above or below), not associated at all to the Register link, is going to get missed. I'm thinking we might want to add a aria-describedby attribute so that the link would be read as "Register link Registration is required for this event".
• I like your Drupal solution, I agree that this should change to be conditional depending on if folks choose the "Register" CTA.
• To answer you question on if it should show for Apply/RSVP, I think this would depend on what happens when those options are selected.
  • For example, if an event has "Apply" chosen, and it's required that the user Apply/Register/whatever, I think it's important that the FE text matches the FE CTA. "Apply link It is required to apply for this event".

[jilladams]

I agree with Laura in general that I think the " is required" field uses Registration in a more general sense, where Apply / RSVP/ Registration CTAs are the specific flavors of Registration that may be required. But: we could vet that with Amanda? (Was thinking to myself: ideally we'd have a business owner to verify that with, but Events straddle everything (VEO, VAMCs, Vet Centers, Regional Offices), so need to be abstracted and I don't think anyone but Dave or Amanda could really give us this guidance.)

[thejordanwood]

@jilladams @aklausmeier @laflannery I now show what this would look like on the FE and in Drupal if we say "Registration/RSVP/Application is required for this event."

[jilladams]

@aklausmeier I missed this one in our review earlier but it's in the same state -- mockup is ready and review requested.

@thejordanwood @FranECross and Amanda: FYI that I updated ACs per the new guidance for requesting review, and added a couple Sprint 100 ACs that should close this out once Amanda has time to review. Feel free to update points as needed.

[laflannery]

@thejordanwood I definitely think it makes more sense to break it up like this, so the sentences are more specific. My last comment, and it's more on the nitpicky side is that "RSVP is required for this event" sounds odd to me. Would it sound more natural is we swapped the word order to be "It is required to RSVP for this event"? And if it's easier to have the same structure for all versions it could work for everything (It is required to register/apply/RSVP for this event). So that's my last thought but @aklausmeier might have an idea on this.

[aklausmeier]

@thejordanwood Drupal design looks good to me. TY for showing each flow. Having the required verbiage stay consistent is the best UX for our editors.

For FE design, I'm thinking for better scanability for Veterans, we pop the required verbiage up to the details above and only show when required is selected in Drupal.

Quick mockup to show what I'm thinking:

[thejordanwood]

@aklausmeier I've updated the Sketch file to reflect those changes. The copy will now say:

• Registration: Required
• RSVP: Required
• Application: Required

I want to note that the FE desktop mockups were a bit inaccurate and that social media links will display between the required line and the CTA. I still think this looks good though!

@laflannery Feel free to look over again and provide any additional feedback if needed.

@FranECross I believe we're ready to create FE and BE tickets for this work.

[FranECross]

Thanks, @thejordanwood ! I'll get the tickets created. 🎉

[FranECross]

@thejordanwood @jilladams Here are the two tickets!

• BE work
• FE work

[jilladams]

@aklausmeier @laflannery Let us know if you have any other notes -- if y'all are in alignment, this ticket is ready to close.

[laflannery]

No more notes from me!

[aklausmeier]

No additional notes from me