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

[gina-yamada]

🎫 Ticket

• Pull Request to address comments in PR# 10816 that were made after the pull request had been merged into main
• Later also discovered (while testing on staging) that the images on my email did not display (even though they displayed locally on email template)

Original ticket: LG-13196 Implementation: EIPP "You're ready to verify in person" Barcode email

🛠 Summary of changes

• Delete deprecated width attribute on td and replaced it with CSS style="width:xxpx" to achieve the same layout
  (I had not previously modified reset_password_instructions but it used the same deprecated attribute so I fixed it.)
• Round down on image width where a decimal was used
• Used USWDS class
• For each SVG image in the mailer- I make a png version. The Ready to Verify mailer is now using the png image. The SVG images did not get deleted because they are still being used on the Ready to Verify view.

📜 Testing Plan

1. Create an EIPP Enrollment by starting up Sinatra.
2. Inspect the Ready To Verify Email Template (EIPP Version). Layout/style should not have changed and should match mocks. Confirm Ready to Verify is not affected just because it is just one more click.
3. If you prefer not to run through the entire EIPP flow you can jump to rails/mailer view once you get the sever going:

• http://localhost:3000/rails/mailers/user_mailer/in_person_ready_to_verify
• http://localhost:3000/rails/mailers/user_mailer/in_person_ready_to_verify_enhanced_ipp_enabled
• http://localhost:3000/rails/mailers/user_mailer/reset_password_instructions

4. Once this is merged into staging- run through and create an EIPP enrollment. Open the email from staging that got delivered and confirm you can see the icons

👀 Screenshots

[aduth]

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)

[gina-yamada]

@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.

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.

[aduth]

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.

[gina-yamada]

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.

[aduth]

LGTM! 👍

[rutvigupta-design]

This LGTM! 🎉

[WilliamBirdsall]

LGTM as well!

[gina-yamada]

I just confirmed icons in the Ready to Verify email in staging display.