New email to link users back to a service download page immediately after they've subscribed

[johngruen]

Requirements here

[shane-tomlinson]

@johngruen no access to the linked doc

[philbooth]

@johngruen, will the service icons for this email all be a standard width and height, or might they vary on a case-by-case basis? If the former, do we know what that width and height are?

[philbooth]

Taking my face off this as I'm not going to finish it today and I'm on PTO from tomorrow.

[clouserw]

@johngruen to comment

[johngruen]

let's say 64px x 64px

[philbooth]

@lmorchard, Will mentioned you might want to pick this up for your daytime, so here's an overview.

I have an in-progress branch for it in #1791, although it's very refactory and descends quite deeply into our email-sending internals so you may or may not want to get involved with it.

If you do, it might be worth starting by familiarising yourself with some of my gripes from #1779, which hopefully explain why I've done what I've done. What I've done is to create a kind of parallel email framework alongside the existing stuff in the auth server, with the long-term of objective of moving the existing stuff to this new framework when we have more time.

The structural parts of that framework are working correctly in #1791, and the easiest way to test it quickly is by running:

node scripts/write-emails-to-disk all

...from the auth server directory. That will dump rendered versions of the email templates into a subdirectory called .mail_output, in .html and .txt files named according to the subject line for each email. For this issue, they're called Welcome_to_Firefox_VPN!.html and .txt.

So the next thing to work on is styling. This all lives under lib/senders/subscription-templates in the auth server. There are layouts in the layouts/ subdirectory, partials in partials/ and the templates for this issue are called downloadSubscription.html and .txt. Hopefully it's pretty straightforward.

The markup that is in there right now is just copy/pasted from the FxA emails so it can all change as required. Nothing is sacred, feel free to scrap it all and start from scratch if that's best.

[philbooth]

node scripts/write-emails-to-disk all

You can also just generate them for these specific templates fwiw:

node scripts/write-emails-to-disk downloadSubscriptionEmail

[lmorchard]

Digging into things here, got some catch up to do but I can successfully generate the emails. Just to confirm, is this the design for the email? /cc @johngruen

https://app.zeplin.io/project/5d13e5c151e1e056b3f68fa7/screen/5cddfbc639f2e51e01e5c39c

[lmorchard]

Also, do we have some pre-existing implementation for these email template styles to jump off from? I eem to remember there were / are going to be a bunch of transaction emails coming out of another system. Would be nice to reuse or at least stay consistent with the general template of those.

[lmorchard]

Tried doing some more digging, came up with more questions & notes:

• Can we reuse HTML source from the other salesforce emails? If so, where do we get that source / who has it? Would be nice not to have different inconsistent implementations

• Where do images go for emails? If we haven't got them somewhere already, it looks like we'll need at least 1) a new logo-and-wordmark, 2) a subscription product icon, and 3) "M" mozilla logo somewhere.

• Apropos of the last - I'm not sure how / where URLs like these are hosted if we need to upload new images - https://image.e.mozilla.org/lib/fe9915707361037e75/m/4/11c1e411-7dfe-4e04-914c-0f098edac96c.png

• "Cancel subscription" and "Update billing information" links will go to the same place - they're both on the same payment-server page.

• Also, we need to tweak the content-server token-generating redirect page from issue Create stable URL that will redirect to the payments page #926 to support linking to "cancel subscription" / "update billing information"

[philbooth]

I'm not sure how / where URLs like these are hosted if we need to upload new images

Fwiw, this one is straightforward once we have final images, it's just a request to another team.

[shane-tomlinson]

If we want these to look like Marketing emails, could we have the Marketing team create and send them and remove this work from our list?

[lmorchard]

• Also, we need to tweak the content-server token-generating redirect page from issue Create stable URL that will redirect to the payments page #926 to support linking to "cancel subscription" / "update billing information"

Filed #1850 for this - we'll need it for all the other emails, too, regardless of by who or how they're implemented.

[lmorchard]

• Can we reuse HTML source from the other salesforce emails? If so, where do we get that source / who has it? Would be nice not to have different inconsistent implementations

Got a copy of the source of one of the invoice emails, will try to massage this into something useful for the download email.

[philbooth]

Got a copy of the source of one of the invoice emails, will try to massage this into something useful for the download email.

Hey @lmorchard, I tried following this link but it just takes me to the subplat channel and I don't see anything specifically related to this email. Maybe I'm holding it wrong. Can you paste it somewhere or maybe email it if it contains anything sensitive? Ta.

[philbooth]

Hey @juliastarkov, are you the right person to ask about getting a production asset for this Firefox VPN icon?

[lmorchard]

Maybe I'm holding it wrong. Can you paste it somewhere or maybe email it if it contains anything sensitive? Ta.

Sure, I just copied it into a gist - it was just pasted into a Slack convo: https://gist.github.com/lmorchard/942d7458ad8b943d044f58d3daaa71b8

Oh, and this was my attempt to adapt that HTML for this issue: 487909c

Haven't gotten back to using the link supported since #1850 though

[juliastarkov]

@philbooth The first product will actually be Secure Proxy (not the VPN). The product team will be in charge of the icon and I'm pretty positive that's not ready on their end yet. For now, can you use a placeholder?