Design updates for digest emails

[TylerHendrickson]

Task: Update the templates used when building digest notification emails to align with the designs from Figma

DOD: Email design for "New Grants Digest" email notification type is updated.

Acceptance Criteria:

• Header content updated to include [USDR logo] referenced in the Figma designs
• at top of email: [Search Name] - [X] New Grants
• bi-line: DD MONTH YYYY`
• Update to content on New grants
  • Title: [grant name]; wrap when long (title links to grants.gov with that grant details view opened)
  • Update UI according to designs
• Add new grant info field to all grants for Status
• View on Grants.gov on all grants should open the specific grant on grants.gov
• See all new grants always visible at the bottom of the grants digest; opens the Grant Finder to Browse Grants tab
  • Digest content should be responsive and viewable on mobile devices
  • Digest should be viewable in both light and dark themes with minimal readability issues (theming is determined by device)
  • Note ticket 853 relates - ideally we can test display on outlook as well

Implementation details:

• The "New Grants Digest" email is currently sent according to a JS cron schedule defined here.
• The sendGrantDigestForAgency() function in packages/server/src/lib/email.js is called per-agency and is responsible for building the email content and sending it to each recipient for that agency.
• You will likely need to set up nodemailer in order to test rendering in a mail client. Setup steps are documented in our "GMail Setup" documentation.
• Figma designs are available here: https://www.figma.com/file/HIINnuujheHbdbDesH8mKE/Notifications?type=design&node-id=17-1160&mode=design&t=DxbxHlq7Qa83RxtN-4

Subtask of:

• 934

[TylerHendrickson]

logo out of date

[ClaireValdivia]

ready for eng

[ClaireValdivia]

Feedback from NJ - once Category of Funding Activity and Funding Department name are incorporated into search, this is key info they would like to see on digest

[caitlinwinner]

@ClaireValdivia I'm going to do a design pass on this.

[ClaireValdivia]

@caitlinwinner one inconsistency between this ticket and new design file is where "view grant details" goes. also seems like button text doesn't match between ticket and designs and not sure which is correct

[caitlinwinner]

ready for eng, slack me for questions :)

[ClaireValdivia]

@caitlinwinner I just updated the acceptance criteria to match the designs - can you give it a quick review and confirm that it matches your understanding?

[caitlinwinner]

@ClaireValdivia Yes, looks good! the only thing I didn't address was the content in the grant summary. We've heard some partners request additional bulleted info in the summary, which we could add in if you think important.

[ClaireValdivia]

Caitlin and i connected; ticket is ready for eng!

[ClaireValdivia]

@as1729 thoughts on how I can test the notification updates?

[caitlinwinner]

Design notes:

Left Align Federal Grant Finder string with logo

USDR Logo should click through to grant finder not USDR.org

[caitlinwinner]

@TylerHendrickson do we have control over the "From" field? If we could say USDR Federal Grant Finder instead of grants-notifications, I think that would be ideal.

Email title: Search Name

body text preview: # new grants, title of first grant...

[ClaireValdivia]

@caitlinwinner I created this issue with the items you referenced above. is it correct that these are not blockers to the current updates going live? #2353