Fixes: Collection creation notification email
Added: Unsubscribe option to notification email footers Added: Two new notification types (emails not written yet) Fixed: Validation added to notification setting events
This commit is contained in:
Tom Moor
parent
cc8dacba32
commit
9ca0038d39
|
|
@ -2,10 +2,12 @@
|
|||
import * as React from 'react';
|
||||
import { debounce } from 'lodash';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import styled from 'styled-components';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import PageTitle from 'components/PageTitle';
|
||||
import HelpText from 'components/HelpText';
|
||||
import NotificationListItem from './components/NotificationListItem';
|
||||
import Notice from 'shared/components/Notice';
|
||||
|
||||
import UiStore from 'stores/UiStore';
|
||||
import NotificationSettingsStore from 'stores/NotificationSettingsStore';
|
||||
|
|
@ -31,6 +33,20 @@ const options = [
|
|||
title: 'Collection created',
|
||||
description: 'Receive a notification whenever a new collection is created',
|
||||
},
|
||||
{
|
||||
separator: true,
|
||||
},
|
||||
{
|
||||
event: 'emails.onboarding',
|
||||
title: 'Getting started',
|
||||
description:
|
||||
'Tips on getting started with Outline`s features and functionality',
|
||||
},
|
||||
{
|
||||
event: 'emails.features',
|
||||
title: 'New features',
|
||||
description: 'Receive an email when new features of note are added',
|
||||
},
|
||||
];
|
||||
|
||||
@observer
|
||||
|
|
@ -60,9 +76,16 @@ class Notifications extends React.Component<Props> {
|
|||
|
||||
render() {
|
||||
const { notificationSettings } = this.props;
|
||||
const showSuccessNotice = window.location.search === '?success';
|
||||
|
||||
return (
|
||||
<CenteredContent>
|
||||
{showSuccessNotice && (
|
||||
<Notice>
|
||||
Unsubscription successful. Your notification settings were updated
|
||||
</Notice>
|
||||
)}
|
||||
|
||||
<PageTitle title="Notifications" />
|
||||
<h1>Notifications</h1>
|
||||
|
||||
|
|
@ -71,6 +94,8 @@ class Notifications extends React.Component<Props> {
|
|||
</HelpText>
|
||||
|
||||
{options.map(option => {
|
||||
if (option.separator) return <Separator />;
|
||||
|
||||
const setting = notificationSettings.getByEvent(option.event);
|
||||
|
||||
return (
|
||||
|
|
@ -90,4 +115,8 @@ class Notifications extends React.Component<Props> {
|
|||
}
|
||||
}
|
||||
|
||||
const Separator = styled.hr`
|
||||
padding-bottom: 12px;
|
||||
`;
|
||||
|
||||
export default inject('notificationSettings', 'ui')(Notifications);
|
||||
|
|
|
|||
|
|
@ -57,4 +57,21 @@ router.post('notificationSettings.delete', auth(), async ctx => {
|
|||
};
|
||||
});
|
||||
|
||||
router.post('notificationSettings.unsubscribe', async ctx => {
|
||||
const { id, token } = ctx.body;
|
||||
ctx.assertPresent(id, 'id is required');
|
||||
ctx.assertPresent(token, 'token is required');
|
||||
|
||||
const setting = await NotificationSetting.findById(id);
|
||||
if (setting) {
|
||||
if (token !== setting.unsubscribeToken) {
|
||||
ctx.redirect(`${process.env.URL}?notice=invalid-auth`);
|
||||
}
|
||||
|
||||
await setting.destroy();
|
||||
}
|
||||
|
||||
ctx.redirect(`${process.env.URL}/settings/notifications?success`);
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export type Props = {
|
|||
actor: User,
|
||||
collection: Collection,
|
||||
eventName: string,
|
||||
unsubscribeUrl: string,
|
||||
};
|
||||
|
||||
export const collectionNotificationEmailText = ({
|
||||
|
|
@ -20,7 +21,7 @@ export const collectionNotificationEmailText = ({
|
|||
collection,
|
||||
eventName = 'created',
|
||||
}: Props) => `
|
||||
"${document.title}" ${eventName}
|
||||
${collection.name}
|
||||
|
||||
${actor.name} ${eventName} the collection "${collection.name}"
|
||||
|
||||
|
|
@ -31,17 +32,16 @@ export const CollectionNotificationEmail = ({
|
|||
actor,
|
||||
collection,
|
||||
eventName = 'created',
|
||||
unsubscribeUrl,
|
||||
}: Props) => {
|
||||
return (
|
||||
<EmailTemplate>
|
||||
<Header />
|
||||
|
||||
<Body>
|
||||
<Heading>
|
||||
"{collection.name}" {eventName}
|
||||
</Heading>
|
||||
<Heading>{collection.name}</Heading>
|
||||
<p>
|
||||
{actor.name} {eventName} the collection "{collection.title}".
|
||||
{actor.name} {eventName} the collection "{collection.name}".
|
||||
</p>
|
||||
<EmptySpace height={10} />
|
||||
<p>
|
||||
|
|
@ -51,7 +51,7 @@ export const CollectionNotificationEmail = ({
|
|||
</p>
|
||||
</Body>
|
||||
|
||||
<Footer />
|
||||
<Footer unsubscribeUrl={unsubscribeUrl} />
|
||||
</EmailTemplate>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export type Props = {
|
|||
document: Document,
|
||||
collection: Collection,
|
||||
eventName: string,
|
||||
unsubscribeUrl: string,
|
||||
};
|
||||
|
||||
export const documentNotificationEmailText = ({
|
||||
|
|
@ -36,6 +37,7 @@ export const DocumentNotificationEmail = ({
|
|||
document,
|
||||
collection,
|
||||
eventName = 'published',
|
||||
unsubscribeUrl,
|
||||
}: Props) => {
|
||||
return (
|
||||
<EmailTemplate>
|
||||
|
|
@ -60,7 +62,7 @@ export const DocumentNotificationEmail = ({
|
|||
</p>
|
||||
</Body>
|
||||
|
||||
<Footer />
|
||||
<Footer unsubscribeUrl={unsubscribeUrl} />
|
||||
</EmailTemplate>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,14 +4,24 @@ import { Table, TBody, TR, TD } from 'oy-vey';
|
|||
import { twitterUrl, spectrumUrl } from '../../../shared/utils/routeHelpers';
|
||||
import theme from '../../../shared/styles/theme';
|
||||
|
||||
export default () => {
|
||||
const style = {
|
||||
type Props = {
|
||||
unsubscribeUrl?: string,
|
||||
};
|
||||
|
||||
export default ({ unsubscribeUrl }: Props) => {
|
||||
const footerStyle = {
|
||||
padding: '20px 0',
|
||||
borderTop: `1px solid ${theme.smokeDark}`,
|
||||
color: theme.slate,
|
||||
fontSize: '14px',
|
||||
};
|
||||
|
||||
const unsubStyle = {
|
||||
padding: '0',
|
||||
color: theme.slate,
|
||||
fontSize: '14px',
|
||||
};
|
||||
|
||||
const linkStyle = {
|
||||
color: theme.slate,
|
||||
fontWeight: 500,
|
||||
|
|
@ -29,7 +39,7 @@ export default () => {
|
|||
<Table width="100%">
|
||||
<TBody>
|
||||
<TR>
|
||||
<TD style={style}>
|
||||
<TD style={footerStyle}>
|
||||
<a href={process.env.URL} style={linkStyle}>
|
||||
Outline
|
||||
</a>
|
||||
|
|
@ -41,6 +51,15 @@ export default () => {
|
|||
</a>
|
||||
</TD>
|
||||
</TR>
|
||||
{unsubscribeUrl && (
|
||||
<TR>
|
||||
<TD style={unsubStyle}>
|
||||
<a href={unsubscribeUrl} style={linkStyle}>
|
||||
Unsubscribe from these emails
|
||||
</a>
|
||||
</TD>
|
||||
</TR>
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// @flow
|
||||
import crypto from 'crypto';
|
||||
import { DataTypes, sequelize } from '../sequelize';
|
||||
|
||||
const NotificationSetting = sequelize.define(
|
||||
|
|
@ -11,14 +12,42 @@ const NotificationSetting = sequelize.define(
|
|||
},
|
||||
event: {
|
||||
type: DataTypes.STRING,
|
||||
validate: {
|
||||
isIn: [
|
||||
[
|
||||
'documents.publish',
|
||||
'documents.update',
|
||||
'collections.create',
|
||||
'emails.onboarding',
|
||||
'emails.features',
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
timestamps: true,
|
||||
updatedAt: false,
|
||||
getterMethods: {
|
||||
unsubscribeUrl: function() {
|
||||
const token = NotificationSetting.getUnsubscribeToken(this.userId);
|
||||
return `${process.env.URL}/api/notificationSettings.unsubscribe?token=${
|
||||
token
|
||||
}&id=${this.id}`;
|
||||
},
|
||||
unsubscribeToken: function() {
|
||||
return NotificationSetting.getUnsubscribeToken(this.userId);
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
NotificationSetting.getUnsubscribeToken = userId => {
|
||||
const hash = crypto.createHash('sha256');
|
||||
hash.update(`${userId}-${process.env.SECRET_KEY}`);
|
||||
return hash.digest('hex');
|
||||
};
|
||||
|
||||
NotificationSetting.associate = models => {
|
||||
NotificationSetting.belongsTo(models.User, {
|
||||
as: 'user',
|
||||
|
|
|
|||
|
|
@ -133,16 +133,24 @@ User.beforeCreate(setRandomJwtSecret);
|
|||
User.afterCreate(user => sendEmail('welcome', user.email));
|
||||
|
||||
// By default when a user signs up we subscribe them to email notifications
|
||||
// when documents they created are edited by other team members.
|
||||
User.afterCreate((user, options) =>
|
||||
NotificationSetting.findOrCreate({
|
||||
// when documents they created are edited by other team members and onboarding
|
||||
User.afterCreate(async (user, options) => {
|
||||
await NotificationSetting.findOrCreate({
|
||||
where: {
|
||||
userId: user.id,
|
||||
teamId: user.teamId,
|
||||
event: 'documents.update',
|
||||
},
|
||||
transaction: options.transaction,
|
||||
})
|
||||
);
|
||||
});
|
||||
await NotificationSetting.findOrCreate({
|
||||
where: {
|
||||
userId: user.id,
|
||||
teamId: user.teamId,
|
||||
event: 'emails.onboarding',
|
||||
},
|
||||
transaction: options.transaction,
|
||||
});
|
||||
});
|
||||
|
||||
export default User;
|
||||
|
|
|
|||
|
|
@ -61,12 +61,21 @@ export default class Notifications {
|
|||
document,
|
||||
collection,
|
||||
actor: document.updatedBy,
|
||||
unsubscribeUrl: setting.unsubscribeUrl,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async collectionCreated(event: Event) {
|
||||
const collection = await Collection.findById(event.model.id);
|
||||
const collection = await Collection.findById(event.model.id, {
|
||||
include: [
|
||||
{
|
||||
model: User,
|
||||
required: true,
|
||||
as: 'user',
|
||||
},
|
||||
],
|
||||
});
|
||||
if (!collection) return;
|
||||
|
||||
const notificationSettings = await NotificationSetting.findAll({
|
||||
|
|
@ -92,7 +101,8 @@ export default class Notifications {
|
|||
to: setting.user.email,
|
||||
eventName: 'created',
|
||||
collection,
|
||||
actor: collection.createdBy,
|
||||
actor: collection.user,
|
||||
unsubscribeUrl: setting.unsubscribeUrl,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue