Skip to content

LG-13196 Enhanced IPP Ready to Verify Email - Take Two #10839

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.

Sign up for GitHub

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

Merged
gina-yamada merged 6 commits into from
Jun 21, 2024
Merged

LG-13196 Enhanced IPP Ready to Verify Email - Take Two #10839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb5791b
clean up deprecated width, use USWDS class
gina-yamada Jun 20, 2024
934956a
clean up deprecated width
gina-yamada Jun 20, 2024
b57ea33
changelog: Internal, Enhanced IPP, Addressed additional code comments…
gina-yamada Jun 20, 2024
4d47dcd
Remove extra forward arrow
gina-yamada Jun 20, 2024
90166ce
Add png images for Ready To Verify email
gina-yamada Jun 20, 2024
7e26543
Merge branch 'main' of github.com:18F/identity-idp into yamada/LG-131…
gina-yamada Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added app/assets/images/email/real-id.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/email/state-id-and-fair-evidence-documents.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/email/state-id-and-military-id.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/email/state-id-and-passport.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions app/assets/stylesheets/email.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,8 @@ h6 {
@include u-border(1px);
}

.border-top-width-0 {
border-top: 0;
.border-top-0 {
@include u-border-top(0);
}

.border-primary-light {
Expand Down
2 changes: 1 addition & 1 deletion app/views/user_mailer/reset_password_instructions.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<table>
<tbody>
<tr>
<td width="140">
<td style="width:140px;">
<%= image_tag('email/letter-warning.png', width: 140, height: 140, alt: '') %>
</td>
<td class="padding-left-3">
Expand Down
42 changes: 21 additions & 21 deletions app/views/user_mailer/shared/_in_person_ready_to_verify.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<% if @presenter.outage_message_enabled? %>
<table class="warning-alert margin-y-4">
<tr>
<td width="16">
<td style="width:16px;">
<%= image_tag('email/warning.png', width: 16, height: 16, alt: '') %>
</td>
<td>
Expand All @@ -28,7 +28,7 @@
<%# Alert box %>
<table class="info-alert margin-y-4 radius-lg">
<tr>
<td width="16">
<td style="width:16px;">
<%= image_tag('email/info.png', width: 16, height: 16, alt: '') %>
</td>
<td>
Expand All @@ -51,17 +51,17 @@
<table>
<tbody>
<tr>
<td align="left" width="110.46px">
<td align="left" style="width:110px;">
<%= image_tag(
asset_url('idv/real-id.svg'),
asset_url('email/real-id.png'),
width: 110,
height: 80,
alt: t('in_person_proofing.process.eipp_bring_id.image_alt_text'),
role: 'img',
class: 'margin-bottom-3',
) %>
</td>
<td width="24px">
<td style="width:24px;">
</td>
<td>
<p class="margin-bottom-3"><%= t('in_person_proofing.process.eipp_bring_id.info') %></p>
Expand All @@ -70,7 +70,7 @@
</tbody>
</table>
</div>
<hr class="margin-bottom-3 border-primary-light border-top-width-0 margin-top-0">
<hr class="margin-bottom-3 border-primary-light border-top-0 margin-top-0">

<%# Option 2: Bring a standard State ID... %>
<h3 class="margin-bottom-2"><%= t('in_person_proofing.process.eipp_what_to_bring.heading') %></h3>
Expand All @@ -80,16 +80,16 @@
<table class="margin-bottom-3">
<tbody>
<tr>
<td align="left" width="110.46px">
<td align="left" style="width:110px;">
Copy link
Copy Markdown
Contributor

@aduth aduth Jun 20, 2024

Choose a reason for hiding this comment

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

I'm sorta curious if it's necessary to specify the width at all, or would the cell grow automatically to accommodate the image's defined dimensions? The only things that gives me pause here is:

  1. Usually style attributes won't work in production due to CSP style-src, but that's probably not an issue for emails, particularly given the second point below.
  2. Rails mailers will automagically inline CSS styling as style attribute, but I'm not sure how it works if we also specify our own style attribute value.

(This isn't a blocker)

Copy link
Copy Markdown
Contributor Author

@gina-yamada gina-yamada Jun 20, 2024

Choose a reason for hiding this comment

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

@aduth Thanks for the comments here. I need to dig a little more but here is what I know so far...

The cell does not grow to accommodate the images defined dimensions. When I removed style="width:110px; on line 54- you can see the Real ID image below Option 1 shrunk.

Screenshot 2024-06-20 at 2 00 30 PM

Screenshot 2024-06-20 at 1 53 24 PM

Worth mentioning- I created an enrollment in staging and the email I received did not have working images on it. (This EIPP email is only in staging.) I was thinking it was the decimal pixels but am wondering (and will look into) CSP.

Copy link
Copy Markdown
Contributor

@aduth aduth Jun 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Ohhhh, I know what it is. You're trying to use SVG images but those aren't broadly supported in email:

https://www.caniemail.com/features/image-svg/

This is also why we have app/assets/images/email folder, which includes copies of images specifically because of this support limitation (noted also in folder README):

https://github.com/18F/identity-idp/tree/main/app/assets/images/email

This folder contains images for exclusive use by mailer templates. This includes email-specific imagery, and also variants of existing assets.

For example, since SVG images are not well-supported in all email clients, this folder may include rasterized versions of common SVG images.

Copy link
Copy Markdown
Contributor Author

@gina-yamada gina-yamada Jun 20, 2024

Choose a reason for hiding this comment

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

Great tip! Okay, each image on the email template is pointing at a png file inside app/assets/images/email. I did not delete the svg files because they each are being used in app/views/idv/in_person/ready_to_verify/show.html.erb.

<%= image_tag(
asset_url('idv/state-id-and-passport.svg'),
width: 110.46,
height: 129.11,
asset_url('email/state-id-and-passport.png'),
width: 110,
height: 129,
alt: t('in_person_proofing.process.eipp_state_id_passport.image_alt_text'),
role: 'img',
) %>
</td>
<td width="24px">
<td style="width:24px;">
</td>
<td>
<p class="text-bold margin-bottom-0"><%= t('in_person_proofing.process.eipp_state_id_passport.heading') %></p>
Expand All @@ -98,22 +98,22 @@
</tr>
</tbody>
</table>
<hr class="margin-bottom-3 border-primary-light border-top-width-0 margin-top-0">
<hr class="margin-bottom-3 border-primary-light border-top-0 margin-top-0">

<%# B. State ID + Military ID %>
<table class="margin-bottom-3">
<tbody>
<tr>
<td align="left" width="110.46px">
<td align="left" style="width:110px;">
<%= image_tag(
asset_url('idv/state-id-and-military-id.svg'),
width: 110.46,
asset_url('email/state-id-and-military-id.png'),
width: 110,
height: 93,
alt: t('in_person_proofing.process.eipp_state_id_military_id.image_alt_text'),
role: 'img',
) %>
</td>
<td width="24px">
<td style="width:24px;">
</td>
<td>
<p class="text-bold margin-bottom-0"><%= t('in_person_proofing.process.eipp_state_id_military_id.heading') %></p>
Expand All @@ -122,22 +122,22 @@
</tr>
</tbody>
</table>
<hr class="margin-bottom-3 border-primary-light border-top-width-0 margin-top-0">
<hr class="margin-bottom-3 border-primary-light border-top-0 margin-top-0">

<%# C. State ID + two supporting documents %>
<table class="margin-bottom-2">
<tbody>
<tr>
<td align="left" width="110.46px">
<td align="left" style="width:110px;">
<%= image_tag(
asset_url('idv/state-id-and-fair-evidence-documents.svg'),
width: 110.46,
asset_url('email/state-id-and-fair-evidence-documents.png'),
width: 110,
height: 107,
alt: t('in_person_proofing.process.eipp_state_id_supporting_docs.image_alt_text'),
role: 'img',
) %>
</td>
<td width="24px">
<td style="width:24px;">
</td>
<td>
<p class="text-bold margin-bottom-0"><%= t('in_person_proofing.process.eipp_state_id_supporting_docs.heading') %></p>
Expand Down