LG-9026: Phone finder failure screen updates

[matthinz]

🎫 Ticket

LG-9026

🛠 Summary of changes

Update phone finder warning and rate limiting screens with new language and more prominent links to verify by mail.

📜 Testing Plan

Provide a checklist of steps to confirm the changes.

• Start identity verification and use the "bad" test phone to verify your identity (703-555-5555)
• Be warned that your phone number did not work. Observe that you can try verifying by mail instead.
• Persist in your folly; attempt verifying with the bad phone number 4 more times until you are rate limited. Observe that even from the rate limiting error screen you can proceed to verify by mail.

👀 Screenshots

⚠️ Warning Screen

English
Before	After
Spanish
Before	After
French
Before	After

❌ Rate limited screen

English
Before	After
Spanish
Before	After
French
Before	After

[soniaconnolly]

A couple of translation issues that need attention, now going back to read the code and try it out.

[matthinz]

This language was previously shared between ID verification and phone/address verification throttles, leading to some confusion (see LG-9260).

[soniaconnolly]

Code looks good, and works as described.

I noticed when trying it that when I go back to retry with a different phone number, the "you have successfully verified your identity" banner still shows up at the top. That's confusing when I'm coming from an error screen. Also, we're still pre-filling the number even though we want them to try a different one.

[soniaconnolly]

My understanding from UX shareout was that this could be a list of phone numbers if they fail with multiple ones. Is that included in this ticket?

[artfulaction]

The banner shouldn't be there when going back to retry, so I'm thinking that needs to be fixed. I think it would also be good to avoid pre-filling the number, but those two things weren't explicitly included in the ticket. @benjaminchait should we do this here or create a new ticket for this work?

And the list of phone numbers isn't included on this ticket.

[matthinz]

I think that is a separate ticket. The designs for this only have the 1 number.

[benjaminchait]

@artfulaction - Let's do a new story! I think the idea of a "list of phone numbers" is separate from the idea of what a users sees when they "go back to retry". I created https://cm-jira.usa.gov/browse/LG-9373 to capture the "go back to retry" experience with some questions. Let's consider these with UX, and then bring to the larger team in the next few weeks?

[matthinz]

Also, we're still pre-filling the number even though we want them to try a different one.

Yeah, I noticed this as well. I could see an argument either way:

• It's confusing to pre-fill it, since we just told the user that this number won't work.
• It's helpful to pre-fill it, since the user can see (and edit) the number that didn't work.

I think some of the work we've seen at UX shareouts around warning the user if they're entering a number they already tried will be helpful here.

[matthinz]

I noticed when trying it that when I go back to retry with a different phone number, the "you have successfully verified your identity" banner still shows up at the top.

Hmm. Looks like this is not a new behavior (that banner is hardcoded into that template). I'm going to take a quick look and see if this is an easy fix on this branch and file a ticket if it is not.

[solipet]

Looks great!

[solipet]

nit - one param per line if multi-line

[aduth]

Couple thoughts:

• If top and bottom margins are the same, you could also use margin-y-5 in place of the two classes
• button_or_link_to is useful if you're not certain whether you'll want a button or a link based on the desired HTTP method of the navigation, but this seems like most definitely a plain link, so link_to would suffice
• ButtonComponent is available to abstract some of the behaviors with the specific appearance styling. It's a little clunky with custom link action behaviors, but an option to consider.

Suggested change

	<div class="margin-top-5 margin-bottom-5">
	<%= button_or_link_to(
	t('idv.failure.phone.rate_limited.gpo.button'),
	idv_gpo_path,
	class: 'usa-button usa-button--big usa-button--wide',
	) %>
	</div>
	<div class="margin-y-5">
	<%= render ButtonComponent.new(
	action: ->(**tag_options, &block) { link_to(idv_gpo_path, **tag_options, &block) },
	big: true,
	wide: true,
	).with_content(t('idv.failure.phone.rate_limited.gpo.button')) %>
	</div>