feat(ras-acc): update otp email template #3032

chickenn00dle · 2024-04-03T16:51:28Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

PR 1 of 4

This PR updates the OTP signin email with:

A new footer per RAS-ACC email designs
Use of primary and secondary color backgrounds
Some alignment updates

Screen.Recording.2024-04-04.at.15.01.16.mov

Note: Dynamic text color and FAQ sections added in #3033 and #3034

Note: I am only updating the OTP email for now. Once all of the kinks are worked out it should be pretty simple to update the others.

How to test the changes in this Pull Request:

Go to the WP Customizer and set a custom primary and secondary color
With these changes checked out, go to Newspack > Engagment > Show Advanced Settings and select the one-time password email under Transactional Email Content section:
Trash the post (so that we can force our updated template to be used on next otp sign in attempt)
As a logged out user, select the sign in link and attempt to login via email to trigger an otp email
Check the otp email and confirm the above points are implemented in the email design

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1205668937699542

chickenn00dle · 2024-04-04T19:16:21Z

I'm gonna mark this one ready for review despite more work needing to be done to match the designs to hopefully help make review a bit simpler.

I should also note that there is a bug in the newsletters plugin (which it seems the main plugin emails rely on to generate email html) which causes the editor to force buttons to be centered. So our default OTP template will have a correctly left aligned button, but if you go into the post editor for the email template, make any changes, and save then the button will become centered. Similarly, if you send yourself a test email via the post editor, the button will also be centered.

I spent a bunch of time trying to figure out why this is happening, but had no luck as of now. I will tackle this, as well as some of the other email designs in another PR.

chickenn00dle · 2024-04-04T19:18:49Z

assets/other-scripts/emails/style.scss

+.editor-styles-wrapper .block-editor-block-list__layout .wp-block-button {
+	margin-left: 0 !important;
+	margin-right: 0 !important;
+}


Added these styles to resolve an issue where the button block was forced to be centered in the editor. This overrides the behavior in the editor, but actual emails will still see centered buttons for some reason. (Aside from our updated OTP default template)

adekbadek

Trash the post (so that we can force our updated template to be used on next otp sign in attempt)

How will migration work for the sites out in the wild?
How will the template be updated in the event of site colors update?

chickenn00dle · 2024-04-05T14:00:48Z

Great questions @adekbadek

How will migration work for the sites out in the wild?

I think we want to avoid forcing sites to migrate since many publishers have likely put in some work on updating these emails on their end. My thought was to add an option to reset templates for those that would like to use our new designs. We might also want to add a similar reset link to each email template next to the edit link in the Transactional Email Content section:

That said, I was hoping to focus this PR strictly on the design portion of this and tackle these issues in a follow up PR. Happy to add this in here as well if you prefer though!

How will the template be updated in the event of site colors update?

This one is a bit tricky for publishers that have spent time customizing their email templates. Again, I'd avoid forcing these publishers to fall back to our designs on color update, and leave it up to them to "reset" via the links mentioned above, OR manually update their custom emails on their end.

I'm definitely open to other suggestions for both of these questions too if you have any thoughts!

adekbadek · 2024-04-08T07:44:53Z

I think we want to avoid forcing sites to migrate since many publishers have likely put in some work on updating these emails on their end

I agree. But publishers who had not touched the templates should have them updated automatically.

How will the template be updated in the event of site colors update?

I'd avoid forcing these publishers to fall back to our designs on color update, and leave it up to them to "reset" via the links mentioned above, OR manually update their custom emails on their end.

As a publisher, I'd expect brand colors to be updated in the emails if they are updated for the site, even if email copy has changes.

chickenn00dle · 2024-04-08T14:39:43Z

I agree. But publishers who had not touched the templates should have them updated automatically.

As a publisher, I'd expect brand colors to be updated in the emails if they are updated for the site, even if email copy has changes.

Sure! I'm happy to address this in a follow up PR, unless you feel it needs to be implemented here. My thought was to keep this PR and some follow-ups focused on the email redesign and handle the reset/update functionality separately.

adekbadek

Approving pending one small change requested and keeping in mind that the migration strategy should be addressed (as discussed above) before merging the epic branch.

adekbadek · 2024-04-09T07:41:46Z

includes/util.php

+ */
+function newspack_get_theme_colors() {
+	$primary_color   = get_theme_mod( 'primary_color_hex', '#3366ff' );
+	$secondary_color = get_theme_mod( 'secondary_color_hex', '#f0f0f0' );


Newspack Theme functions should be used (like here).

Nice! I've fixed this in cc2f298

matticbot · 2024-04-09T15:10:55Z

🎉 This PR is included in version 3.6.0-epic-ras-acc.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

chickenn00dle · 2024-04-09T20:03:49Z

keeping in mind that the migration strategy should be addressed

As a heads up @adekbadek, I've got some additional PRs up to tackle:

Migrating unmodified transactional emails: feat(ras-acc): migrate transactional emails to updated templates #3054
Triggering transactional email updates on theme color change: feat(ras-acc): automatically update transactional email templates on theme color update #3052
Adding a link to manually reset transactional email templates: feat(ras-acc): add option to reset ras acc transactional email templates #3049

These three PRs should collectively address migration concerns.

matticbot · 2024-04-25T13:57:20Z

🎉 This PR is included in version 3.9.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot · 2024-05-29T16:25:13Z

🎉 This PR is included in version 4.1.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot · 2024-06-05T16:44:14Z

🎉 This PR is included in version 4.2.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot · 2024-06-12T16:21:36Z

🎉 This PR is included in version 4.4.0-epic-ras-acc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

chickenn00dle added 4 commits April 3, 2024 12:49

feat(ras-acc): update otp email template

bc127e1

feat(ras-acc): add social icons footer to transactional emails

4c74789

fix(ras-acc): fix otp email formatting and translations

8980dc7

fix(ras-acc): email template bg color newsletter conflict

d589b17

chickenn00dle added the [Status] Needs Review The issue or pull request needs to be reviewed label Apr 4, 2024

chickenn00dle marked this pull request as ready for review April 4, 2024 19:16

chickenn00dle requested a review from a team as a code owner April 4, 2024 19:16

chickenn00dle commented Apr 4, 2024

View reviewed changes

chickenn00dle changed the title ~~feat(ras-acc): update transactional emails templates~~ feat(ras-acc): update otp email template Apr 4, 2024

This was referenced Apr 4, 2024

feat(ras-acc): dynamically set otp email text color #3033

Merged

feat(ras-acc): add faq section to otp email #3034

Merged

adekbadek requested changes Apr 5, 2024

View reviewed changes

chickenn00dle mentioned this pull request Apr 6, 2024

Feat/update transactional emails all templates #3038

Closed

6 tasks

adekbadek approved these changes Apr 9, 2024

View reviewed changes

github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Apr 9, 2024

chickenn00dle force-pushed the feat/update-transaction-email-colors branch from 1a81695 to 9531069 Compare April 9, 2024 14:45

fix: use newspack theme color functions

cc2f298

chickenn00dle force-pushed the feat/update-transaction-email-colors branch from 9531069 to cc2f298 Compare April 9, 2024 14:48

chickenn00dle merged commit 75ffa1d into epic/ras-acc Apr 9, 2024
6 checks passed

matticbot added the released on @epic/ras-acc label Apr 9, 2024

chickenn00dle deleted the feat/update-transaction-email-colors branch April 9, 2024 15:11

chickenn00dle mentioned this pull request Apr 20, 2024

Feat/update all transactional email templates #3075

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ras-acc): update otp email template #3032

feat(ras-acc): update otp email template #3032

chickenn00dle commented Apr 3, 2024 •

edited

Loading

chickenn00dle commented Apr 4, 2024

chickenn00dle Apr 4, 2024

adekbadek left a comment

chickenn00dle commented Apr 5, 2024

adekbadek commented Apr 8, 2024

chickenn00dle commented Apr 8, 2024

adekbadek left a comment

adekbadek Apr 9, 2024

chickenn00dle Apr 9, 2024 •

edited

Loading

matticbot commented Apr 9, 2024

chickenn00dle commented Apr 9, 2024

matticbot commented Apr 25, 2024

matticbot commented May 29, 2024

matticbot commented Jun 5, 2024

matticbot commented Jun 12, 2024

feat(ras-acc): update otp email template #3032

feat(ras-acc): update otp email template #3032

Conversation

chickenn00dle commented Apr 3, 2024 • edited Loading

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

chickenn00dle commented Apr 4, 2024

chickenn00dle Apr 4, 2024

Choose a reason for hiding this comment

adekbadek left a comment

Choose a reason for hiding this comment

chickenn00dle commented Apr 5, 2024

adekbadek commented Apr 8, 2024

chickenn00dle commented Apr 8, 2024

adekbadek left a comment

Choose a reason for hiding this comment

adekbadek Apr 9, 2024

Choose a reason for hiding this comment

chickenn00dle Apr 9, 2024 • edited Loading

Choose a reason for hiding this comment

matticbot commented Apr 9, 2024

chickenn00dle commented Apr 9, 2024

matticbot commented Apr 25, 2024

matticbot commented May 29, 2024

matticbot commented Jun 5, 2024

matticbot commented Jun 12, 2024

chickenn00dle commented Apr 3, 2024 •

edited

Loading

chickenn00dle Apr 9, 2024 •

edited

Loading