Fixes: Welcome email dashboard location (#886)

* Fixes: Welcome email dashboard location
Updated logo in email

* 💚
This commit is contained in:
Tom Moor 2019-01-27 12:30:53 +00:00 committed by GitHub
parent 1a6a7d04e5
commit 476bab9333
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 25 additions and 17 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -43,7 +43,7 @@ Object {
<tr> <tr>
<td align=\\"center\\"> <td align=\\"center\\">
<span style=\\"display: none !important; color: #FFFFFF; margin:0; padding:0; font-size:1px; line-height:1px;\\">Outline is a place for your team to build and share knowledge.</span> <span style=\\"display: none !important; color: #FFFFFF; margin:0; padding:0; font-size:1px; line-height:1px;\\">Outline is a place for your team to build and share knowledge.</span>
<table width=\\"550\\" padding=\\"40\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td align=\\"left\\"><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><img alt=\\"Outline\\" src=\\"http://localhost:3000/email/header-logo.png\\" height=\\"55\\" width=\\"32\\"/></td></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"20px\\" style=\\"line-height:20px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><span style=\\"font-weight:500;font-size:18px\\">Welcome to Outline!</span></p><p>Outline is a place for your team to build and share knowledge.</p><p>To get started, head to your dashboard and try creating a collection to help document your workflow, create playbooks or help with team onboarding.</p><p>You can also import existing Markdown documents by dragging and dropping them to your collections.</p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"10px\\" style=\\"line-height:10px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><a href=\\"http://localhost:3000/dashboard\\" style=\\"display:inline-block;padding:10px 20px;color:#FFFFFF;background:#000000;border-radius:4px;font-weight:500;text-decoration:none;cursor:pointer\\">View my dashboard</a></p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table></td></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td style=\\"padding:20px 0;border-top:1px solid #E8EBED;color:#9BA6B2;font-size:14px\\"><a href=\\"http://localhost:3000\\" style=\\"color:#9BA6B2;font-weight:500;text-decoration:none;margin-right:10px\\">Outline</a><a href=\\"https://twitter.com/outlinewiki\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Twitter</a><a href=\\"https://spectrum.chat/outline\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Spectrum</a></td></tr></tbody></table></td></tr></tbody></table> <table width=\\"550\\" padding=\\"40\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td align=\\"left\\"><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><img alt=\\"Outline\\" src=\\"http://localhost:3000/email/header-logo.png\\" height=\\"48\\" width=\\"48\\"/></td></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"10px\\" style=\\"line-height:10px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><span style=\\"font-weight:500;font-size:18px\\">Welcome to Outline!</span></p><p>Outline is a place for your team to build and share knowledge.</p><p>To get started, head to your dashboard and try creating a collection to help document your workflow, create playbooks or help with team onboarding.</p><p>You can also import existing Markdown documents by dragging and dropping them to your collections.</p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"10px\\" style=\\"line-height:10px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table><p><a href=\\"http://example.com/dashboard\\" style=\\"display:inline-block;padding:10px 20px;color:#FFFFFF;background:#000000;border-radius:4px;font-weight:500;text-decoration:none;cursor:pointer\\">View my dashboard</a></p><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td width=\\"100%\\" height=\\"40px\\" style=\\"line-height:40px;font-size:1px;mso-line-height-rule:exactly\\">&nbsp;</td></tr></tbody></table></td></tr></tbody></table><table width=\\"100%\\" border=\\"0\\" cellSpacing=\\"0\\" cellPadding=\\"0\\"><tbody><tr><td style=\\"padding:20px 0;border-top:1px solid #E8EBED;color:#9BA6B2;font-size:14px\\"><a href=\\"http://localhost:3000\\" style=\\"color:#9BA6B2;font-weight:500;text-decoration:none;margin-right:10px\\">Outline</a><a href=\\"https://twitter.com/outlinewiki\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Twitter</a><a href=\\"https://spectrum.chat/outline\\" style=\\"color:#9BA6B2;text-decoration:none;margin:0 10px\\">Spectrum</a></td></tr></tbody></table></td></tr></tbody></table>
</td> </td>
</tr> </tr>
</table> </table>
@ -61,7 +61,7 @@ To get started, head to your dashboard and try creating a collection to help doc
You can also import existing Markdown documents by dragging and dropping them to your collections. You can also import existing Markdown documents by dragging and dropping them to your collections.
http://localhost:3000/dashboard http://example.com/dashboard
", ",
"to": "user@example.com", "to": "user@example.com",
} }

View File

@ -8,7 +8,11 @@ import Header from './components/Header';
import Footer from './components/Footer'; import Footer from './components/Footer';
import EmptySpace from './components/EmptySpace'; import EmptySpace from './components/EmptySpace';
export const welcomeEmailText = ` export type Props = {
teamUrl: string,
};
export const welcomeEmailText = ({ teamUrl }: Props) => `
Welcome to Outline! Welcome to Outline!
Outline is a place for your team to build and share knowledge. Outline is a place for your team to build and share knowledge.
@ -17,10 +21,10 @@ To get started, head to your dashboard and try creating a collection to help doc
You can also import existing Markdown documents by dragging and dropping them to your collections. You can also import existing Markdown documents by dragging and dropping them to your collections.
${process.env.URL}/dashboard ${teamUrl}/dashboard
`; `;
export const WelcomeEmail = () => { export const WelcomeEmail = ({ teamUrl }: Props) => {
return ( return (
<EmailTemplate> <EmailTemplate>
<Header /> <Header />
@ -39,9 +43,7 @@ export const WelcomeEmail = () => {
</p> </p>
<EmptySpace height={10} /> <EmptySpace height={10} />
<p> <p>
<Button href={`${process.env.URL}/dashboard`}> <Button href={`${teamUrl}/dashboard`}>View my dashboard</Button>
View my dashboard
</Button>
</p> </p>
</Body> </Body>

View File

@ -14,7 +14,7 @@ export default ({ children }: Props) => {
<TBody> <TBody>
<TR> <TR>
<TD> <TD>
<EmptySpace height={20} /> <EmptySpace height={10} />
{children} {children}
<EmptySpace height={40} /> <EmptySpace height={40} />
</TD> </TD>

View File

@ -13,8 +13,8 @@ export default () => {
<img <img
alt="Outline" alt="Outline"
src={`${process.env.URL}/email/header-logo.png`} src={`${process.env.URL}/email/header-logo.png`}
height="55" height="48"
width="32" width="48"
/> />
</TD> </TD>
</TR> </TR>

View File

@ -83,14 +83,14 @@ export class Mailer {
} }
}; };
welcome = async (opts: { to: string }) => { welcome = async (opts: { to: string, teamUrl: string }) => {
this.sendMail({ this.sendMail({
to: opts.to, to: opts.to,
title: 'Welcome to Outline', title: 'Welcome to Outline',
previewText: previewText:
'Outline is a place for your team to build and share knowledge.', 'Outline is a place for your team to build and share knowledge.',
html: <WelcomeEmail />, html: <WelcomeEmail {...opts} />,
text: welcomeEmailText, text: welcomeEmailText(opts),
}); });
}; };

View File

@ -16,7 +16,10 @@ describe('Mailer', () => {
}); });
test('#welcome', () => { test('#welcome', () => {
fakeMailer.welcome({ to: 'user@example.com' }); fakeMailer.welcome({
to: 'user@example.com',
teamUrl: 'http://example.com',
});
expect(sendMailOutput).toMatchSnapshot(); expect(sendMailOutput).toMatchSnapshot();
}); });
}); });

View File

@ -6,7 +6,7 @@ import subMinutes from 'date-fns/sub_minutes';
import { DataTypes, sequelize, encryptedFields } from '../sequelize'; import { DataTypes, sequelize, encryptedFields } from '../sequelize';
import { publicS3Endpoint, uploadToS3FromUrl } from '../utils/s3'; import { publicS3Endpoint, uploadToS3FromUrl } from '../utils/s3';
import { sendEmail } from '../mailer'; import { sendEmail } from '../mailer';
import { Star, Collection, NotificationSetting, ApiKey } from '.'; import { Star, Team, Collection, NotificationSetting, ApiKey } from '.';
const User = sequelize.define( const User = sequelize.define(
'user', 'user',
@ -158,7 +158,10 @@ User.beforeDestroy(checkLastAdmin);
User.beforeDestroy(removeIdentifyingInfo); User.beforeDestroy(removeIdentifyingInfo);
User.beforeSave(uploadAvatar); User.beforeSave(uploadAvatar);
User.beforeCreate(setRandomJwtSecret); User.beforeCreate(setRandomJwtSecret);
User.afterCreate(user => sendEmail('welcome', user.email)); User.afterCreate(async user => {
const team = await Team.findById(user.teamId);
sendEmail('welcome', user.email, { teamUrl: team.url });
});
// By default when a user signs up we subscribe them to email notifications // By default when a user signs up we subscribe them to email notifications
// when documents they created are edited by other team members and onboarding // when documents they created are edited by other team members and onboarding