wire-emails

Templates for sending emails, based on Foundation for Emails.

Visit wireapp.github.io/wire-emails/dist for the latest ✨ Live Preview ⭐️

Help translate our emails via the Crowdin project.

IMPORTANT NOTES

• Only ever update stuff under /src/. Other changes may get overwritten.
• Only translate languages supported here: https://github.com/wireapp/wire-emails/blob/master/bin/translate.js#L24-L31

For Designers

• Find and edit the template in src/pages/en.
• To update shared text modules like headers, footers or signatures, edit the corresponding files in the src/partials/en folder.
• Commit your changes to master.
• Continue in Section "Otto builds" below.

For Copywriters

• Find the things you want to edit in the same places as designers (see above).
• Commit your changes to a branch and create a pull request.
• Otto will now automatically upload your English changes to the Crowdin project.
• Continue in Section "For Translators" below.

For Translators

• All translations are located in the Crowdin project.
• When the original (English) email copy is changed via the GitHub UI or in a local clone and submitted via a pull request, the modified source text is uploaded to Crowdin for translation. Translators use the Crowdin UI to update the localized text strings.
• When the translators are done, merge the pull request to master.
• The 'Subject' keyword in the translations should not be translated as it is used to split that section into an email subject. The text after the colon should be translated as normal. Example at line 2
• Additionally the 'Layout' keyword as well as the text after it should also not be translated as it refers to a source language file name Example at line 2.
• Continue in Section "Otto builds" below.

If you changed Crowdin content without any changes on github (eg., to fix a translation error), you can try to re-run the travis job that is otherwise triggered automatically on every change on master.

Otto builds

When you commit to master, Otto will tell Travis to generate the new email templates and add an Otto build message to the commits list. The absense of the Otto build will indicate an error as seen in the screenshot below:

Advanced

We recommend you set up the wire-emails repo to run locally on your computer so you can verify your changes before pushing them to the live site.

The instructions below assume you're on a Mac with Homebrew installed.

Installation

1. Install the yarn JavaScript package manager via Homebrew:

   brew install yarn

2. Clone this repository and run yarn from the root directory of your clone to install the necessary dependencies:

   yarn global add foundation-cli
   yarn

Start the local preview

This repository provides a local preview, so you can see what the final messages will look like.

To start the preview, run yarn start and check the results at localhost:3000.

A table of contents appears with links to each message. Click a link to display the rendered message content.

Update

When you update the HTML files in the src folder, the results should be reflected automatically in the browser.

If not, make sure the local preview server is running or check the console for errors.

Build

Run yarn build to inline your CSS into your HTML along with the rest of the build process.

Import changes to wire-server

Find the tag you want to update to from here, or from the repo in a shell:

cd ~/src/wire-emails
export TAG=$(git tag  -l --sort v:refname | tail -1)

The update the tag in wire-server, run a script to pull the updates, and commit everything to a branch:

cd ~/src/wire-server
git checkout develop && git checkout -b email-templates-$TAG
echo $TAG > ./services/brig/deb/opt/brig/template-version
./services/brig/deb/opt/brig/bin/fetch.py
git commit -m "Update email templates to $TAG."

Now make a PR like you always do.

There are two issues for automating this process a little further: https://github.com/zinfra/backend-issues/issues/720, https://github.com/zinfra/backend-issues/issues/1130, but both are labelled P4 at the time of writing this.