Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DO NOT MERGE] Contact / Help App #5649

Open
wants to merge 55 commits into
base: develop
Choose a base branch
from
Open

Conversation

rfultz
Copy link
Contributor

@rfultz rfultz commented Mar 8, 2023

Summary

Overhauling the Contact page

Required reviewers

  • UX
  • 1-2 front-end
  • 1+ content

Impacted areas of the application

The contact page

Screenshots

image

Related PRs

None

How to test

  • Pull the branch
  • npm i
  • npm run build
  • Contact page
    • I know who
      • RAD - link to their form?
      • EFO - committee ID works, too?
      • Public records - right text and fields?
      • Press office - right text and fields?
      • Congressional affairs - right text and links?
      • OIG - right text and links?
      • Info
        • correct information (summary, contact info)
        • anything but 'Send me a copy'
          • fields work okay?
        • 'Send me a copy'
          • The publications interface works correctly
    • I need help
      • All but 'None of these' should link to that team's summary and contact information/fields, with the right choice pre-selected
      • 'None of these' should link to another page of topics, which should behave like the first list of topics.
    • pages with fields
      • error messages work correctly
    • App navigation
      • Back appears after the intro and functions correctly the entire time
      • Next or Submit appear ghosted when they're going to be available
      • Next or Submit are enabled when fields are valid
      • Restart only appears on the submission confirmation screens

@rfultz rfultz self-assigned this Mar 8, 2023
@rfultz rfultz changed the title Contact / Help App [DO NOT MERGE] Contact / Help App Mar 8, 2023
Copy link
Member

@patphongs patphongs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rfultz Really great work on this contact app so far. I have a few things that I noticed during my QA.

<div
@click="handleButtonClick(item.actionId, $event)"
class="card card--neutral">
<div class="card__image__container">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the card isn't wrapped in an anchor, I think we lost the cursor:pointer effect. It's helpful to have them so that users know they can click on the cards.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be part of the next push

Comment on lines +1738 to +1740
headline: 'Unable to send your message at this time.',
message: `<strong>Submitting your message has failed.</strong> You’re welcome to try again, call the FEC offices,
or use the content below to send your message through another platform.<br><br>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if we should add phone number to the failure message and perhaps the success message as well? The reason is because we specifically give the option for the user to call if they want. Having the number readily available with their email would help them so they wouldn't have to go back through the form to retrieve it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call! The failure handler and response was just me throwing something together. I wonder how much it hurt UX and Content :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we comfortable with the phone number that remains on the page? Or still add it into the success/failure message to a specific office?

Comment on lines 1050 to 1057
congress: {
name: 'Congressional Affairs',
summary: 'Congressional Affairs responds to inquiries from other agencies and Congressional representatives',
formPrompt: 'Contact Congressional Affairs via telephone.',
phoneExt: '1006',
ePrefix: 'congress',
fields: ''
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should a disabled submit button appear if they only have the option to call or email? In these instances, they don't have an option to fill out a form anyways.

Screen Shot 2023-03-28 at 10 50 48 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good find! I knew I needed to hide the recaptcha (currently the testing radios) there but hiding submit is a good call. I think it should be the Start over button

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be the "Start over" button for all offices that don't have a form.
Example:
Screen Shot 2023-03-30 at 8 38 12 AM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would there be a way to make this contact app a Wagtail component, so that we can add it when needed on the contact page? This would be a similar implementation to the AF calculator. The reason I ask is because we'd need to keep the COVID snippet above the contact form and I don't see a clear way to do that if the contact app is automatically inserting itself and wiping the rest of the content there. The other advantage to this is that we wouldn't really need to feature flag the contact app, we can add it as an option to the contact page template but not actually add the component for use yet. What do you think?

Screen Shot 2023-03-28 at 11 01 48 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call! Lemme dig into that. I definitely don't want it to be in a modal like the calculator is but I didn't think about making it a kind of Django/Wagtail widget/component/etc

:k${'e'}y="link_index"
class="contact-item contact-item--question-bubble">
<div class="contact-item__content">
<a href="{{link.href}}">{{link.label}}</a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

headline: 'Unable to send your message at this time.',
message: `<strong>Submitting your message has failed.</strong> You’re welcome to try again, call the FEC offices,
or use the content below to send your message through another platform.<br><br>
<strong>To:</strong> ${recipient}<br><br>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think public records' or electronic filing email is coming through correctly. If I chose public records, I should be getting the public records email, but instead I see the info email.

Comment on lines 623 to 628
<ul
v-if="submissionMessages.emailLinks"
class="list--buttons">
<li v-for="(link, link_index) in submissionMessages.emailLinks"
><a class="button--standard" :href="link.href" target="_blank">{{link.label}}</a></li>
</ul>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There seems to be empty buttons being generated for electronic filing success messages. I don't believe they're necessary right?

Screen Shot 2023-03-28 at 11 24 04 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

d'oh!
This will be fixed with the next commit

@patphongs patphongs mentioned this pull request Mar 28, 2023
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Develop FEC contact form
4 participants