The 'error' message to check the new email address is alarming

[adriannelee]

Description

As a Sender, I need to be able to check how Notify formatted the Sender email address that I inputted without being alarmed

WHY are we building?
Currently, when you try to create a Sender email address with bad formatting, Notify will correct the formatting and prompt you to check. However, the prompt is in red and looks like an error.

WHAT are we building?
A less alarming 'error' message

VALUE created by our solution
Better UX

Documentation and Artifacts

Good docs, figma mockups, ADRs, screenshots etc.

Acceptance Criteria

Given some context, when (X) action occurs, then (Y) outcome is achieved

• When a new Sender is creating a new service and they input the Sender email address with bad formatting, they're not alarmed by the 'check' message
• Generate appropriate log messages so that executions of this feature can be tracked
• Can misuse of this feature cause harm? If yes, create an alert
• Update the status of related findings, insights, and hypotheses on the Research Airtable
• Once change/fix/feature is implemented, link relevant Airtable records to design artifacts (Figma)

• A11y
• Bilingualism
• Privacy considerations
• Security controls in place
• Measuring success and metrics

Related Research Airtable records

• The message to check again was interpreted as an error

QA Steps

• Tested in a realistic production scenario

[yaelberger-commits]

Hey team! Please add your planning poker estimate with Zenhub @amazingphilippe @YedidaZalik

[YedidaZalik]

Starting working on this

One of the main concerns was the red. I started trying out the flow and the error message I get is not in red, so maybe we already fixed this?
(I would still suggest changing "Make sure" to "Check" which is actually the word we use in Figma)

[yaelberger-commits]

@YedidaZalik did some validation testing and found the red box is no longer appearing. We should ask @andrewleith to check and make sure it's been changed. Also we should use "Check" instead of "Make sure" as per Yedida's suggestion and that's what's in the Figma mockups.

[smcmurtry]

I took a look at this since Andrew is on vacation.

This change to remove the red error message and to use the grey box was made 8 months ago in this PR and this card.

The page now uses the "confirmation" design pattern (grey box) instead of the error pattern.

I can change the copy to "Check that your email address is formatted correctly" but I don's see a french translation for this in Figma.

[YedidaZalik]

@smcmurtry thanks for taking care of this!
I think I found the French translation here: https://www.figma.com/design/1ccAvKpMboyDmnUliunnBY/Onboarding-and-set-up-%7C-Embarquement-et-configuration?node-id=2598-4775&p=f&t=C6g164vgkKZuQukR-0

[smcmurtry]

PR: cds-snc/notification-admin#2024

[yaelberger-commits]

Once merged to Staging we'll do QA

[smcmurtry]

merged and ready for QA

[YedidaZalik]

QA'd in staging - LGTM!

[YedidaZalik]

QA'd in staging - LGTM in both languages!