Update email templates and invitation flow

jjmata commented 7 years ago

This work is already started, so opening an issue to track it.

I deployed the tileo-rebrand/email-templates branch to production and saw the following:

So three things I can spot on this one email (haven't tested the others):

[x] The invitation view still has the old copy in English.
[x] We're still missing some strings (that live elsewhere?)
[x] The logo seems to be borked as well (saw it was linked as http://http://tileo-mailing-assets.s3.amazonaws.com= /tileo-logo.png in the message source)
[ ] The invitation link 404s (goes to https://smartrural.tileo.co/user/smartrural/signup?email=jjmata%40tileo.co&invitation_token=be69172f0b48ff2d7a0d9426bc9c6edcd56c40f5)

jjmata commented 7 years ago

Email source, not that it helps too much:

Received-SPF: pass (google.com: domain of bounce+3cb4ac.d93cc5-jjmata=tileo.co@beta.tileo.co designates 184.173.153.199 as permitted sender) client-ip=184.173.153.199;
DomainKey-Signature: a=rsa-sha1; c=nofws; d=beta.tileo.co; s=smtp;
 q=dns; h=Sender: Date: From: To: Message-ID: Subject: Mime-Version:
 Content-Type: Content-Transfer-Encoding;
 b=OzAQ1XQa7tPfT7JQU6w98mYH2dnx8B6b+my6a6E33NfExBPK0EQYY+jGkcy0HFwi6jdFH5
 CVx6sI+ng2qPEzwG3P0ZqoSt1ZZEnmmcuwzvLIU/O8Nb+ITHKsnKp+LiygKQK7oUB0Vou9uM
 EgLqbWa8n80K9d+CxngVL6k3acoxE=
Sender: support=tileo.co@beta.tileo.co
Date: Wed, 12 Jul 2017 07:09:32 +0000
From: Tileo Support <support@tileo.co>
To: jjmata@tileo.co
Message-ID: <5965cb2cccfcb_2be975599020995@023291837d86.mail>
Subject: You are invited to join the smartrural organization at CARTO
Mime-Version: 1.0
Content-Type: text/html;
 charset=UTF-8
Content-Transfer-Encoding: quoted-printable

<html lang=3D"en">
<head>
  <title>You are invited to join the smartrural organization at CARTO </t=
itle>
  <!--

    SALTED | A RESPONSIVE EMAIL TEMPLATE
    =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D

    Based on code used and tested by Litmus (@litmusapp)
    Originally developed by Kevin Mandeville (@KEVINgotbounce)
    Cleaned up by Jason Rodriguez (@rodriguezcommaj)
    Presented by A List Apart (@alistapart)

    Email is surprisingly hard. While this has been thoroughly tested, yo=
ur mileage may vary.
    It's highly recommended that you test using a service like Litmus and=
 your own devices.

    Enjoy!

   -->
  <meta charset=3D"utf-8">
  <meta name=3D"viewport" content=3D"width=3Ddevice-width">
  <style type=3D"text/css">
    /* CLIENT-SPECIFIC STYLES */
    #outlook a{padding:0;} /* Force Outlook to provide a "view in browser=
" message */
    .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmai=
l to display emails at full width */
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass=
 font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Forc=
e Hotmail to display normal line spacing */
    body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjus=
t:100%;} /* Prevent WebKit and Windows mobile changing default text sizes=
 */
    table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spac=
ing between tables in Outlook 2007 and up */
    img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of r=
esized image in Internet Explorer */

    /* RESET STYLES */
    body{margin:0; padding:0;}
    img{border:0; height:auto; line-height:100%; outline:none; text-decor=
ation:none;}
    table{border-collapse:collapse !important;}
    body{height:100% !important; margin:0; padding:0; width:100% !importa=
nt;}

    /* iOS BLUE LINKS */
    .appleBody a {color:#68440a; text-decoration: none;}
    .appleFooter a {color:#999999; text-decoration: none;}

    /* MOBILE STYLES */
    @media screen and (max-width: 525px) {

      /* ADJUSTS LAYOUT OF LOGO IMAGE */
      td[class=3D"logo"]{
        text-align: left;
        padding: 20px 0 20px 0 !important;
      }

      td[class=3D"logo"] img{
        margin:0 auto!important;
      }

      /* FULL-WIDTH TABLES */
      table[class=3D"responsive-table"]{
        width:100%!important;
      }
    }
  </style>
</head>

<body style=3D"margin: 0; padding: 0;">

  <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"100%">=

  <tr>
    <td bgcolor=3D"#ffffff">
      <div align=3D"center" style=3D"padding: 0px 15px 0px 15px;">
        <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"=
100%" style=3D"max-width: 620px; width: 100% !important;">
          <tr>
            <td style=3D"padding: 20px 0px 65px 0px;" class=3D"logo">
              <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" wid=
th=3D"100%">
                <tr>
                  <td bgcolor=3D"#ffffff" width=3D"40" align=3D"left"><im=
g alt=3D"Logo" src=3D"http://http://tileo-mailing-assets.s3.amazonaws.com=
/tileo-logo.png" width=3D"82" height=3D"32" style=3D"display: block;" bor=
der=3D"0"></td>
                  <td bgcolor=3D"#ffffff" width=3D"560" align=3D"right">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>

</table>

  <!-- MESSAGE CONTENT -->
  <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"100%">=

    <tr>
      <td bgcolor=3D"#ffffff" align=3D"center" style=3D"padding: 0px 15px=
 72px 15px;">
        <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"=
100%" style=3D"max-width: 620px; width: 100% !important;">
          <tr>
            <td>
              <table width=3D"100%" border=3D"0" cellspacing=3D"0" cellpa=
dding=3D"0" style=3D"background-color: #ffffff; border-collapse: separate=
 !important; width: 100% !important;">

                <tr>
  <td align=3D"left" style=3D"padding-bottom: 32px;">
    <p style=3D"margin: 0; padding: 0; font-weight: bold; text-transform:=
 uppercase; font-size: 22px; font-family: 'Montserrat', Helvetica, Arial,=
 sans-serif; color: #2E3C43;">You are invited to join the smartrural orga=
nization at CARTO </p>
  </td>
</tr>

                <tr>
  <td align=3D"left" style=3D"font-size: 14px; line-height: 25px; font-fa=
mily: 'Open Sans', Helvetica, Arial, sans-serif; color: #647083;">
    <p>=C2=A1Hola y bienvenido/a!</p>
    <p>=C3=9Anete a la organizaci=C3=B3n smartrural en Tileo. Es tan senc=
illo como <a href=3D"https://smartrural.tileo.co/user/smartrural/signup?e=
mail=3Djjmata%40tileo.co&amp;invitation_token=3Dbe69172f0b48ff2d7a0d9426b=
c9c6edcd56c40f5" target=3D"_blank" style=3D"color: #1785FB">crear tu cuen=
ta</a>.</p>

    <p>Aqu=C3=AD tienes un mensaje personalizado por el/la administrador/=
a de la organizaci=C3=B3n:</p>
  </td>

</tr>

<tr>
  <td align=3D"left" style=3D"font-size: 14px; line-height: 25px; font-fa=
mily: 'Open Sans', Helvetica, Arial, sans-serif; color: #647083;">
    <p><i><p>I'd like to invite you to my CARTO organization,
<br />Best regards</p></i></p>
  </td>
</tr>

<tr>
  <td align=3D"left" style=3D"font-size: 14px; line-height: 25px; font-fa=
mily: 'Open Sans', Helvetica, Arial, sans-serif; color: #647083;">
    <p>=C2=A1Hasta pronto!</p>
  </td>

</tr>

              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"100%">=

  <tr>
    <td bgcolor=3D"#f9f9f9" align=3D"center">
      <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"10=
0%" align=3D"center" style=3D"max-width: 620px; width: 100% !important;">=

        <tr>
          <td style=3D"padding: 64px 15px 64px 15px;">
            <table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=
=3D"100%">
              <tr>
                <td align=3D"left" valign=3D"middle" style=3D"font-size: =
13px; line-height: 20px; font-family: 'Open Sans', Helvetica, Arial, sans=
-serif; color: #979EA1;">
                  =C2=A9 2017 Tileo, Inc.
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

</body>
</html>

MariaCheca commented 7 years ago

The invitation link to login is broken due to conflicts with the subdomains configuration. We must fix that first in order to generate the proper urls.

jjmata commented 7 years ago

I see you checked most of the boxes above, @MariaCheca (this is all in https://github.com/splashblot/dronedb/commit/a178196a39350e05c957a5df95a4411a98157db2 right?)

Let's go ahead and deploy those yourself at smartrural.tileo.co and take the invite link out for now! 💪

jjmata commented 7 years ago

I hear this got deployed today, update please @MariaCheca?

MariaCheca commented 7 years ago

Yes! Closing Issue.

jjmata commented 7 years ago

Did the last task in the list get addressed as well? I think we decided to remove the invitation flow for now until we have deployed in subdomain mode, right?

If not just rename this issue and open a new one to track the remaining bits.

MariaCheca commented 7 years ago

Yes, I hid the button to invite users until the feature flow is restored again :)

jjmata commented 7 years ago

OK, I saw that in today's deploy! 👍

Can you split that part (the invitation flow that requires subdomains) out into a new issue then, @MariaCheca?

splashblot / dronedb

Update email templates and invitation flow #45