LG-6343: Implement email template for "Ready to verify" by aduth · Pull Request #6585 · 18F/identity-idp

aduth · 2022-07-14T15:34:58Z

Why: As a public user trying to proof online I want to see the details of my newly scheduled in-person proofing visit to the USPS as an email so that I can reference it later.

Testing Instructions:

Go to http://localhost:3000/rails/mailers/user_mailer/in_person_ready_to_verify

Screenshot:

app/components/barcode_component.html.erb

aduth · 2022-07-18T14:34:30Z

Test real email sends in sandbox environment (see how it looks in a real email client)

This came through in pretty good shape to both Gmail and Apple Mail. The one stand-out was a missing icon for the alert banner in Gmail, since apparently SVG images are not well-supported. This is probably not critical, though I could just create a raster version of the icon to use in the email template.

Better email support See included README.md See: #6585 (comment)

aduth · 2022-07-18T15:17:09Z

Marking this as ready to review, though for design review consideration I want to acknowledge that there are some limitations of overall email support and our email templates which means that the template may not be a 1-to-1 match with the approved designs. Some of these can be fine-tuned (e.g. margins and paddings), and some cannot (no custom font support in emails). A lot of this is also inherited from the existing default email styling, so it could be worth considering consistency or a more holistic approach to certain adjustments (e.g. paragraph spacing or heading stylings). Let me know what kinds of improvements we'd be most interested in making (if any), and I'll try to judge how best to approach them.

aduth · 2022-07-18T15:20:42Z

Also, the preview from the screenshot is just that: a preview. Email clients have notoriously inconsistent rendering for email messages. I have this set up in my sandbox environment to trigger a real email message and I can forward that along to anyone if it's helpful.

kellular

Given the styling limitations that Andrew mentioned, I think the email looks okay and even better if we can address the two comments I added.

kellular · 2022-07-18T21:07:59Z

app/views/user_mailer/in_person_ready_to_verify.html.erb

+  <%= t('user_mailer.in_person_ready_to_verify.intro') %>
+</p>
+
+<table class="info-alert margin-y-4">


Is it possible to make the alert heading:

the same font size as the alert body copy

bolded

I think this is one way to introduce some consistency in style between the email and the Login page.

The font size difference is present in the Figma designs (18px for bolded heading, 16px for unbolded text). It'd be easy enough for me to standardize them as the same body font size though if that's what we want.

I can see how it's a bit more noticeable a difference to control these font sizes in the email template though, since the default body font size is 13px in the emails (vs. 16px elsewhere in the app).

I can see how it's a bit more noticeable a difference to control these font sizes in the email template though, since the default body font size is 13px in the emails (vs. 16px elsewhere in the app).

This is a good point. Might be worth the design team looking at the email styling after pilot.

kellular · 2022-07-18T21:09:23Z

app/views/user_mailer/in_person_ready_to_verify.html.erb

+    <%= @presenter.selected_location_details['state'] %>
+    <%= @presenter.selected_location_details['zip5'] %>-<%= @presenter.selected_location_details['zip4'] %>
+  </div>
+  <h3 class="font-sans-sm margin-y-0 text-normal text-bold"><%= t('in_person_proofing.body.barcode.retail_hours') %></h3>


Could we update "Retail hours" so that:

the font size is the same as our body copy

bolded

Could we update "Retail hours" so that:

the font size is the same as our body copy

bolded

@kellular Similar to my previous comment, this is also how it's designed in the Figma document. I can also change this one to use standard body font size.

changelog: Upcoming Features, In-Person Proofing, Implement "Ready to verify" email notification

Should have same semantics in supported browsers Resources: - https://www.caniemail.com/features/html-semantics/ - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/figure_role See: https://github.com/18F/identity-idp/pull/6585/files#r922457944

Semantics would be nice, but won't want to risk content being hidden due to lack of support

Better email support See included README.md See: #6585 (comment)

See: - #6585 (comment) - #6585 (comment)

aduth · 2022-07-26T15:03:49Z

@kellular I updated the font sizes in 52b2795 to standardize the alert and "Retail hours" headings with surrounding body copy. Note that I applied this to both the email template, as well as the "Ready to verify" page (since the inconsistency was there as well).

Can you take another look and let me know if this looks alright now?

Screen	Before	After
Email
Page

tomas-nava

approve!

But I've made a bunch of suggestions that will make the work merge more cleanly with #6624

app/presenters/idv/in_person/ready_to_verify_presenter.rb

tomas-nava · 2022-07-26T15:36:52Z

spec/mailers/previews/user_mailer_preview.rb

+          'name' => 'BALTIMORE — Post Office™',
+          'streetAddress' => '900 E FAYETTE ST RM 118',
+          'city' => 'BALTIMORE',
+          'state' => 'MD',
+          'zip5' => '21233',
+          'zip4' => '9715',
+          'phone' => '555-123-6409',
+          'hours' => [
+            {
+              'weekdayHours' => '8:30 AM - 4:30 PM',
+            },
+            {
+              'saturdayHours' => '9:00 AM - 12:00 PM',
+            },
+            {
+              'sundayHours' => 'Closed',
+            },
+          ],


Suggested change

'name' => 'BALTIMORE — Post Office™',

'streetAddress' => '900 E FAYETTE ST RM 118',

'city' => 'BALTIMORE',

'state' => 'MD',

'zip5' => '21233',

'zip4' => '9715',

'phone' => '555-123-6409',

'hours' => [

{

'weekdayHours' => '8:30 AM - 4:30 PM',

},

{

'saturdayHours' => '9:00 AM - 12:00 PM',

},

{

'sundayHours' => 'Closed',

},

],

'name' => 'BALTIMORE',

'streetAddress' => '900 E FAYETTE ST RM 118',

'addressLine2' => 'BALTIMORE, MD 21233-9715',

'phone' => '555-123-6409',

'weekdayHours' => '8:30 AM - 4:30 PM',

'saturdayHours' => '9:00 AM - 12:00 PM',

'sundayHours' => 'Closed',

This is the format you can expect from selected_location_details, as of #6624

tomas-nava · 2022-07-26T15:44:03Z

app/views/user_mailer/in_person_ready_to_verify.html.erb

+    <%= @presenter.selected_location_details['city'] %>,
+    <%= @presenter.selected_location_details['state'] %>
+    <%= @presenter.selected_location_details['zip5'] %>-<%= @presenter.selected_location_details['zip4'] %>


Suggested change

<%= @presenter.selected_location_details['city'] %>,

<%= @presenter.selected_location_details['state'] %>

<%= @presenter.selected_location_details['zip5'] %>-<%= @presenter.selected_location_details['zip4'] %>

<%= @presenter.selected_location_details['addressLine2'] %>

With the difference in selected_location_details noted in my last comment. I've made the same change to the page view here in #6624.

tomas-nava · 2022-07-26T15:48:01Z

app/presenters/idv/in_person/ready_to_verify_presenter.rb

-        EnrollmentCodeFormatter.format(enrollment_code)
-      end
-
      def selected_location_hours(prefix)


The body of this method should change to the below, to accommodate the difference in format of selected_location_details noted in previous comments.

hours = selected_location_details["#{prefix}Hours"] return localized_hours(hours) if hours

This is also done here in PR #6624.

Hm, if I make those changes here before #6624 is merged, then it would break the page rendering for "Ready to verify"? 🤔

I guess I can plug the same changes noted previously into this code:

identity-idp/app/controllers/api/verify/password_confirm_controller.rb

Lines 101 to 120 in 17d7e30

selected_location_details: {

'name' => 'BALTIMORE — Post Office™',

'streetAddress' => '900 E FAYETTE ST RM 118',

'city' => 'BALTIMORE',

'state' => 'MD',

'zip5' => '21233',

'zip4' => '9715',

'phone' => '555-123-6409',

'hours' => [

{

'weekdayHours' => '8:30 AM - 4:30 PM',

},

{

'saturdayHours' => '9:00 AM - 12:00 PM',

},

{

'sundayHours' => 'Closed',

},

],

},

@tomas-nava Yeah, there's a lot from #6624 that I'd have to pull into this branch to be able to use the updated selected location shape. Could we merge this without those and update #6624? Or, conversely, merge #6624 and I'll update this one?

I'm fine with merging this first and updating in #6624 @aduth

app/views/user_mailer/in_person_ready_to_verify.html.erb

app/presenters/idv/in_person/ready_to_verify_presenter.rb

See: https://github.com/18F/identity-idp/pull/6585/files#r930104152

https://github.com/18F/identity-idp/pull/6585/files#r930142047

kellular

hi @aduth the updates look good to me! Thanks for looking into the font sizes. I can reconcile any differences in Figma after pilot launch

GitLab crashing again

aduth force-pushed the aduth-lg-verify-content branch from f308b5f to d488d81 Compare July 14, 2022 19:23

aduth mentioned this pull request Jul 14, 2022

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

Merged

aduth force-pushed the aduth-lg-6343-verify-email branch from 4b3b578 to 87fa839 Compare July 14, 2022 20:49

aduth force-pushed the aduth-lg-verify-content branch from 59b74d6 to ac07bc6 Compare July 15, 2022 18:35

Base automatically changed from aduth-lg-verify-content to main July 15, 2022 19:12

aduth force-pushed the aduth-lg-6343-verify-email branch from 87fa839 to 536dc49 Compare July 15, 2022 19:16

aduth commented Jul 15, 2022

View reviewed changes

app/components/barcode_component.html.erb Outdated Show resolved Hide resolved

aduth added a commit that referenced this pull request Jul 18, 2022

Use raster version of info icon

f960468

Better email support See included README.md See: #6585 (comment)

aduth marked this pull request as ready for review July 18, 2022 15:11

aduth requested review from a team and WheresHJ and removed request for a team July 18, 2022 15:17

kellular self-requested a review July 18, 2022 21:02

kellular requested changes Jul 18, 2022

View reviewed changes

aduth added 12 commits July 26, 2022 10:55

Allow SAMEORIGIN frames for environments with mailer previews enabled

9112edb

LG-6343: Implement email template for "Ready to verify"

84694a0

changelog: Upcoming Features, In-Person Proofing, Implement "Ready to verify" email notification

Add BarcodeComponent

d96c0bb

Use BarcodeComponent in "ready to verify" views

f4fc75e

Add label to table element

b1e676e

Remove unnecessary require statements from presenter

edb81b2

Fix table spacing in web display

fbffdd6

Sync markup to ready_to_verify controller

44a4518

Add translations for ready to verify email

9682e9e

Use distinct header for ready to verify email

5235e05

Parameterize greeting name

b748e3b

aduth added 8 commits July 26, 2022 10:55

Add Spanish intro text for ready to verify email

f4650ba

Delete specs for removed methods

854aced

Add specs for BarcodeComponent

63f44c0

Simplify email markup for template

7830f02

Semantics would be nice, but won't want to risk content being hidden due to lack of support

Adjust heading styles

6684730

Tighten up padding

8bb5a45

Use raster version of info icon

4dbc911

Better email support See included README.md See: #6585 (comment)

Standardize font size for alert, retail hours headings

52b2795

See: - #6585 (comment) - #6585 (comment)

aduth force-pushed the aduth-lg-6343-verify-email branch from f960468 to 52b2795 Compare July 26, 2022 14:55

aduth requested a review from kellular July 26, 2022 15:03

tomas-nava approved these changes Jul 26, 2022

View reviewed changes

tomas-nava mentioned this pull request Jul 26, 2022

LG-6089 Add location page to in-person flow #6624

Merged

svalexander reviewed Jul 26, 2022

View reviewed changes

app/presenters/idv/in_person/ready_to_verify_presenter.rb Show resolved Hide resolved

aduth added 2 commits July 26, 2022 12:56

Remove unused/redundant enrollment delegate

a781e96

See: https://github.com/18F/identity-idp/pull/6585/files#r930104152

Hide selected location when absent

946d268

https://github.com/18F/identity-idp/pull/6585/files#r930142047

kellular approved these changes Jul 26, 2022

View reviewed changes

aduth added 3 commits July 26, 2022 14:53

Try nudging parallelization

269cd09

GitLab crashing again

Parallelize 8

240183c

turn it up to 11

cdc01c5

aduth merged commit c8a185b into main Jul 27, 2022

aduth deleted the aduth-lg-6343-verify-email branch July 27, 2022 01:07

solipet mentioned this pull request Aug 9, 2022

Deploy RC 202 to Prod #6688

Merged

This was referenced Aug 12, 2022

LG-7180: Fix printed appearance of Barcode #6732

Merged

LG-7080: Show in-person enrollment barcode on white background with padding #6731

Merged

aduth mentioned this pull request Mar 17, 2023

Add email support test case to mailer shared examples #8017

Merged

zachmargolis mentioned this pull request Nov 6, 2023

Fix icon in report mailer email #9548

Merged

aduth mentioned this pull request Jul 16, 2024

Add spec to ensure mailers don't include SVG #10949

Merged

	selected_location_details: {
	'name' => 'BALTIMORE — Post Office™',
	'streetAddress' => '900 E FAYETTE ST RM 118',
	'city' => 'BALTIMORE',
	'state' => 'MD',
	'zip5' => '21233',
	'zip4' => '9715',
	'phone' => '555-123-6409',
	'hours' => [
	{
	'weekdayHours' => '8:30 AM - 4:30 PM',
	},
	{
	'saturdayHours' => '9:00 AM - 12:00 PM',
	},
	{
	'sundayHours' => 'Closed',
	},
	],
	},

Conversation

aduth commented Jul 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

aduth commented Jul 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aduth commented Jul 18, 2022

Uh oh!

aduth commented Jul 18, 2022

Uh oh!

kellular left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth commented Jul 26, 2022

Uh oh!

tomas-nava left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kellular left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

aduth commented Jul 14, 2022 •

edited

Loading

aduth commented Jul 18, 2022 •

edited

Loading