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>
<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>
<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>
</tr>
</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.
http://localhost:3000/dashboard
http://example.com/dashboard
",
"to": "user@example.com",
}

View File

@ -8,7 +8,11 @@ import Header from './components/Header';
import Footer from './components/Footer';
import EmptySpace from './components/EmptySpace';
export const welcomeEmailText = `
export type Props = {
teamUrl: string,
};
export const welcomeEmailText = ({ teamUrl }: Props) => `
Welcome to Outline!
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.
${process.env.URL}/dashboard
${teamUrl}/dashboard
`;
export const WelcomeEmail = () => {
export const WelcomeEmail = ({ teamUrl }: Props) => {
return (
<EmailTemplate>
<Header />
@ -39,9 +43,7 @@ export const WelcomeEmail = () => {
</p>
<EmptySpace height={10} />
<p>
<Button href={`${process.env.URL}/dashboard`}>
View my dashboard
</Button>
<Button href={`${teamUrl}/dashboard`}>View my dashboard</Button>
</p>
</Body>

View File

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

View File

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

View File

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

View File

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

View File

@ -6,7 +6,7 @@ import subMinutes from 'date-fns/sub_minutes';
import { DataTypes, sequelize, encryptedFields } from '../sequelize';
import { publicS3Endpoint, uploadToS3FromUrl } from '../utils/s3';
import { sendEmail } from '../mailer';
import { Star, Collection, NotificationSetting, ApiKey } from '.';
import { Star, Team, Collection, NotificationSetting, ApiKey } from '.';
const User = sequelize.define(
'user',
@ -158,7 +158,10 @@ User.beforeDestroy(checkLastAdmin);
User.beforeDestroy(removeIdentifyingInfo);
User.beforeSave(uploadAvatar);
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
// when documents they created are edited by other team members and onboarding