Implement email notifications unsubscribe

client/components/user-settings/Info.vue

@@ -41,6 +41,21 @@
         outlined
         class="required" />
     </validation-provider>
+    <validation-provider>
+      <v-checkbox
+        v-model="userData.notifications.assignment"
+        label="Assignment notifications"
+        color="primary darken-3"
+        class="ma-0"
+        hide-details />
+    </validation-provider>
+    <validation-provider>
+      <v-checkbox
+        v-model="userData.notifications.comment"
+        label="Comment notifications"
+        color="primary darken-3"
+        hide-details />
+    </validation-provider>
     <div class="d-flex justify-end">
       <v-btn @click="resetForm" :disabled="!hasChanges" text>
         Cancel
@@ -58,22 +73,25 @@
 
 <script>
 import { mapActions, mapState } from 'vuex';
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 
-const ATTRIBUTES = ['firstName', 'lastName', 'email'];
+const ATTRIBUTES = ['firstName', 'lastName', 'email', 'notifications'];
 
 const resetUser = () => ({
   firstName: null,
   lastName: null,
-  email: null
+  email: null,
+  notifications: {}
 });
 
 export default {
   name: 'user-info',
   data: () => ({ userData: resetUser() }),
   computed: {
     ...mapState({ user: state => state.auth.user }),
-    hasChanges: vm => ATTRIBUTES.some(key => vm.userData[key] !== vm.user[key])
+    hasChanges: vm => !isEqual(vm.userData, pick(vm.user, ATTRIBUTES))
   },
   methods: {
     ...mapActions(['updateInfo']),
@@ -86,7 +104,7 @@ export default {
         .catch(() => this.$snackbar.error('Something went wrong!'));
     },
     resetForm() {
-      Object.assign(this.userData, pick(this.user, ATTRIBUTES));
+      Object.assign(this.userData, cloneDeep(pick(this.user, ATTRIBUTES)));
       this.$refs.form.reset();
     }
   },
@@ -95,3 +113,11 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.v-input ::v-deep {
+  label {
+    margin-bottom: 0;
+  }
+}
+</style>

server/activity/status.hooks.js

@@ -37,7 +37,8 @@ exports.add = (ActivityStatus, Hooks, { Activity }) => {
     });
     const isUnchanged = previousStatus.assigneeId === status.assigneeId;
     const isSelfAssign = status.assigneeId === userId;
-    if (isUnchanged || isSelfAssign) return;
+    const isDisabled = !status.assignee.notifications.assignment;
+    if (isUnchanged || isSelfAssign || isDisabled) return;
     sendEmailNotification(activity);
   }
 

server/comment/hooks.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const mail = require('../shared/mail');
-const map = require('lodash/map');
 const pick = require('lodash/pick');
 const { schema } = require('@tailor-cms/config');
 const sse = require('../shared/sse');
@@ -80,7 +79,10 @@ exports.add = (Comment, Hooks, db) => {
       action: isCreate ? 'left' : 'updated',
       ...pick(comment, ['id', 'content', 'createdAt'])
     };
-    const collaborators = map(repository.repositoryUsers, 'user.email');
+    const collaborators = repository.repositoryUsers.reduce((acc, { user }) => {
+      if (user.notifications.comment) acc.push(user.email);
+      return acc;
+    }, []);
     const recipients = without(collaborators, author.email);
     if (recipients.length) mail.sendCommentNotification(recipients, data);
   }

server/shared/database/migrations/20210614092852-alter-user-add-notifications.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const TABLE_NAME = 'user';
+const COLUMN_NAME = 'notifications';
+
+module.exports = {
+  up: (queryInterface, { JSONB }) => {
+    return queryInterface.addColumn(TABLE_NAME, COLUMN_NAME, {
+      type: JSONB,
+      defaultValue: { comment: true, assignment: true }
+    });
+  },
+  down: queryInterface => {
+    return queryInterface.removeColumn(TABLE_NAME, COLUMN_NAME);
+  }
+};

server/shared/mail/index.js

@@ -30,6 +30,7 @@ const elementUrl = ({ repositoryId, activityId, elementUid }) => {
   const query = `${activityId}?elementId=${elementUid}`;
   return urlJoin(origin, '/#/repository', `${repositoryId}/editor`, query);
 };
+const settingsUrl = () => urlJoin(origin, '/#/settings');
 
 module.exports = {
   send,
@@ -81,6 +82,7 @@ function sendCommentNotification(users, comment) {
   const data = {
     href,
     origin,
+    unsubscribeLink: settingsUrl(),
     getInitials: () => (text, render) => render(text).substr(0, 2).toUpperCase(),
     ...comment
   };
@@ -101,6 +103,7 @@ function sendAssigneeNotification(assignee, activity) {
   const data = {
     ...activity,
     origin,
+    unsubscribeLink: settingsUrl(),
     href: activityStatusUrl(activity.repositoryId, activity.id)
   };
   const html = renderHtml(path.join(templatesDir, 'assignee.mjml'), data);

server/shared/mail/templates/assignee.mjml

@@ -27,5 +27,16 @@
         </mj-button>
       </mj-column>
     </mj-section>
+    <mj-section padding="20px 10px 0">
+      <mj-column>
+        <mj-text align="center">
+          You can
+          <a href="{{unsubscribeLink}}">
+            Unsubscribe
+          </a>
+          from assignment notifications in the profile page.
+        </mj-text>
+      </mj-column>
+    </mj-section>
   </mj-body>
 </mjml>

server/shared/mail/templates/assignee.txt

@@ -9,5 +9,9 @@ View the {{label}} status by visiting the link:
 
 Or copy and paste this URL into your browser.
 
+You can unsubscribe from assignment notifications in the profile page by visiting the link:
+
+{{unsubscribeLink}}
+
 
 -------------------------------------------------

server/shared/mail/templates/comment.mjml

@@ -62,5 +62,16 @@
         </mj-button>
       </mj-column>
     </mj-section>
+    <mj-section padding="20px 10px 0">
+      <mj-column>
+        <mj-text align="center">
+          You can
+          <a href="{{unsubscribeLink}}">
+            Unsubscribe
+          </a>
+          from comment notifications in the profile page.
+        </mj-text>
+      </mj-column>
+    </mj-section>
   </mj-body>
 </mjml>

server/shared/mail/templates/comment.txt

@@ -11,4 +11,8 @@ View {{activityLabel}} by clicking the URL below:
 
 Or copy and paste this URL into your browser.
 
+You can unsubscribe from comment notifications in the profile page by visiting the link:
+
+{{unsubscribeLink}}
+
 -------------------------------------------------

server/user/user.controller.js

@@ -48,8 +48,8 @@ function getProfile({ user, authData }, res) {
 }
 
 function updateProfile({ user, body }, res) {
-  const { email, firstName, lastName, imgUrl } = body;
-  return user.update({ email, firstName, lastName, imgUrl })
+  const { email, firstName, lastName, imgUrl, notifications } = body;
+  return user.update({ email, firstName, lastName, imgUrl, notifications })
     .then(({ profile }) => res.json({ user: profile }))
     .catch(() => validationError(CONFLICT));
 }

server/user/user.model.js

@@ -18,7 +18,7 @@ const { user: { ADMIN, USER, INTEGRATION } } = roles;
 const gravatarConfig = { size: 130, default: 'identicon' };
 
 class User extends Model {
-  static fields({ DATE, ENUM, STRING, TEXT, UUID, UUIDV4, VIRTUAL }) {
+  static fields({ DATE, ENUM, JSONB, STRING, TEXT, UUID, UUIDV4, VIRTUAL }) {
     return {
       uid: {
         type: UUID,
@@ -73,12 +73,16 @@ class User extends Model {
           return imgUrl || gravatar.url(this.email, gravatarConfig, true /* https */);
         }
       },
+      notifications: {
+        type: JSONB,
+        defaultValue: { assignment: true, comment: true }
+      },
       profile: {
         type: VIRTUAL,
         get() {
           return pick(this, [
             'id', 'email', 'role', 'firstName', 'lastName', 'fullName', 'label',
-            'imgUrl', 'createdAt', 'updatedAt', 'deletedAt'
+            'imgUrl', 'notifications', 'createdAt', 'updatedAt', 'deletedAt'
           ]);
         }
       },