LG-6348: Implement "Ready to verify" page content

[aduth]

Why: So that a user has the instructions they need to proof their identity in person.

Testing Instructions:

1. Go to http://localhost:3000
2. Sign in
3. Go to http://localhost:3000/verify
4. Complete proofing flow up to document capture
5. Submit with failing document as image upload
6. Use troubleshooting option to verify in person
7. Complete proofing flow
8. Observe page as shown in screenshot below

Screenshot:

[aduth]

Question: Will we want to reformat these keys to match snake_case conventions?

As-is, this matches what we receive from USPS (example).

[tomas-nava]

Yes, we will most likely be storing the address data in a custom format; that's being worked out in LG-6089 & LG-6872, and I've added notes to those tickets to make sure to update this page when it's established.

[aduth]

As I'm beginning to work on LG-6343 (email notification) which is also meant to include an image of the barcode, I may plan to revise the output, since data URLs are not well-supported in email clients ([1][2][3]). The Barby gem supports a number of "Outputters", and the HTML outputter seems to be the most promising for email compatibility, and wouldn't be a big lift to swap in to use in the web layout for consistency.

I probably won't change it here now, but will revisit with the pull request for LG-6343.

[aduth]

(A preview of this rework can be seen at #6585)

[lizzieamanning]

Looks good overall! A few thoughts:

1. Quick question on the display of the stepper in mobile- is there a way to set the position to the last 3 steps so the user doesn't have to scroll? Right now we show this:

but it would be more accurate to show this:

2. I agree with your comment in Figma- it would be better for accessibility to write out the full name of the day of the week. Is that feasible? Asking because we would also rather not show the text in all caps, but we are getting this information from USPS and decided not to mess with formatting for MVP.

3. In testing the ACs, a few things were off, but let me know if they are out of scope for this ticket:

• When selecting either option ("I have a different address on my ID" or "This address is on my state-issued ID") the proof of address requirements were displayed, but they should only display if the user selects the option: "I have a different address on my ID"

• When I tested logging out and back in, I was either taken to my account page or the page that says "Your identity has already been verified," but I should see this page "You are ready to verify"

[aduth]

Thanks for the great feedback @lizzieamanning !

Quick question on the display of the stepper in mobile- is there a way to set the position to the last 3 steps so the user doesn't have to scroll? Right now we show this:

I'll take a look at this. It should automatically be working the way you'd hoped for. One caveat is that it only scrolls to the step if it was scrollable when the page first loaded, and not if you resize the screen down. Just noting in case that's how you'd tested it, but I'll take a closer look regardless.

I agree with your comment in Figma- it would be better for accessibility to write out the full name of the day of the week. Is that feasible? Asking because we would also rather not show the text in all caps, but we are getting this information from USPS and decided not to mess with formatting for MVP.

Yeah, I think so. I'd already implemented localization for some of the USPS labels like "Closed", so I can do something similar for the days of the week. I'll work on that this afternoon.

In testing the ACs, a few things were off, but let me know if they are out of scope for this ticket:

Ah, sorry, that's on me. I should have clarified there was some missing pieces here due to other dependencies, but I'll elaborate on your specific comments:

• When selecting either option ("I have a different address on my ID" or "This address is on my state-issued ID") the proof of address requirements were displayed, but they should only display if the user selects the option: "I have a different address on my ID"

  • You're right, this isn't working yet, since it depends on the work in LG-6708 Add additional columns to in_person_enrollments table #6556 (LG-6708) to record the "current address matches ID" field selected earlier in the flow. In this current iteration, it's always showing as being required. I've set up the code so it should be an easy swap-in once that other work is ready.

• When I tested logging out and back in, I was either taken to my account page or the page that says "Your identity has already been verified," but I should see this page "You are ready to verify"

  • This will depend on the work in LG-6868 to mark the profile as pending, since currently it's activating the profile (hence the "Your identity has already been verified" message). That being said, we may want to create a separate ticket to track the user experience of logging in with a pending in-person profile, if one doesn't exist already. Do you know if there is one, or could you point me to the Figma designs for the expected interaction?

[aduth]

I'll take a look at this. It should automatically be working the way you'd hoped for. One caveat is that it only scrolls to the step if it was scrollable when the page first loaded, and not if you resize the screen down. Just noting in case that's how you'd tested it, but I'll take a closer look regardless.

Following-up, this seems to work as expected for me (screenshot), except for the scenario of reducing screen size after the page is already loaded. @lizzieamanning Could you confirm if you recall seeing this on the initial page load and, if so, what device / browser you were using for testing?

[aduth]

Yeah, I think so. I'd already implemented localization for some of the USPS labels like "Closed", so I can do something similar for the days of the week. I'll work on that this afternoon.

This was a bit easier than I expected, since this wasn't part of the USPS data and instead fully within our control. I updated it in f308b5f.

Before	After

Testing it again with the screen reader, the readability is definitely improved, but it doesn't indicate the range as "Monday to Friday" as I might have hoped. Instead, it reads as "Monday Friday", which is certainly better than "Monfry", but not perfect, since I could see this being misinterpreted as "Monday, Friday[, and not any other days of the week]".

• Before: "Monfry"
• After: "Monday Friday"
• Ideal: "Monday to Friday"

I was hopeful that using the correct punctuation (an endash "–" instead of a hyphen "-") would be interpreted by the screen reader, but based on a related resource, it doesn't seem that screen readers have very good support for it.

A couple ideas for next steps:

• Leave it as is
• Or: Change the text from "Monday–Friday" to "Monday to Friday", both visually and for assistive technology
• Or: Use visually-hidden screen reader text to customize the text for assistive technology ("Monday–Friday" visually, "Monday to Friday" for assistive technology)

@lizzieamanning Would you have any preference among these options?

[lizzieamanning]

• Confirming that on mobile, the stepper loads correctly moving as the user moves through the flow- you were right that what I saw initially came from resizing- apologies!
• In terms of a pending profile page, our intent was to have the user see this "ready to verify screen" whenever they log in until they complete IPP at the Post Office, after which they'd see the success or failure screen based on their result. Does that track with your understanding? I might have incorrectly assumed that would be handled in this ticket, but can break that out, just let me know!
• Thanks so much for thinking through options for the "Mon-Fri" text. Changing the text from "Monday–Friday" to "Monday to Friday seems like the best option to me. I just checked the translation doc and I don't see this chunk of content translated yet, so I will do some digging to determine if we'd need to order additional translations for this.

[aduth]

In terms of a pending profile page, our intent was to have the user see this "ready to verify screen" whenever they log in until they complete IPP at the Post Office, after which they'd see the success or failure screen based on their result. Does that track with your understanding? I might have incorrectly assumed that would be handled in this ticket, but can break that out, just let me know!

I might be inclined to split out a separate ticket for this, since it'll be blocked by LG-6868 and/or LG-6872 (depending on timing of that work). I'm happy to write that up.

One clarifying question around logging in: Since a user could want to go straight to https://secure.login.gov and access their account dashboard, or log in through another service provider at IAL1 (no identity verification required), am I correct in assuming we'd only want to show this page if they're trying to sign in with a service provider which requires a proofed identity?

Thanks so much for thinking through options for the "Mon-Fri" text. Changing the text from "Monday–Friday" to "Monday to Friday seems like the best option to me. I just checked the translation doc and I don't see this chunk of content translated yet, so I will do some digging to determine if we'd need to order additional translations for this.

I also checked to see if we might have some text in the code we could reuse, but it doesn't appear that we do.

[tomas-nava]

I might be inclined to split out a separate ticket for this, since it'll be blocked by LG-6868 and/or LG-6872 (depending on timing of that work). I'm happy to write that up.

I was just thinking of the need for this ticket, thank you Andrew!

One clarifying around logging in: Since a user could want to go straight to https://secure.login.gov/ and access their account dashboard, or log in through another service provider at IAL1 (no identity verification required), am I correct in assuming we'd only want to show this page if they're trying to sign in with a service provider which requires a proofed identity?

Yes, I believe that's a safe assumption.

[lizzieamanning]

@aduth is it ok to google translate "Monday to Friday," ? I recall us mentioning that in stand up since its just days of the week, but let me know if you think we should send it through Gengo and I'll do that

[tomas-nava]

approve! Once you wrap up the issues you've noted in comments, I think this is good to go.

[aduth]

@aduth is it ok to google translate "Monday to Friday," ? I recall us mentioning that in stand up since its just days of the week, but let me know if you think we should send it through Gengo and I'll do that

@lizzieamanning and I synced on Slack and decided to get professional translations for these day ranges, which is updated as of 4d8c8ee.

Once you wrap up the issues you've noted in comments

This was addressed (see #6580 (comment)).

In terms of a pending profile page, our intent was to have the user see this "ready to verify screen" whenever they log in until they complete IPP at the Post Office, after which they'd see the success or failure screen based on their result. Does that track with your understanding? I might have incorrectly assumed that would be handled in this ticket, but can break that out, just let me know!

I might be inclined to split out a separate ticket for this, since it'll be blocked by LG-6868 and/or LG-6872 (depending on timing of that work). I'm happy to write that up.

The new ticket for this is LG-6882.