Integrate rails mailers with mailboxer

app/assets/stylesheets/notifications.scss.erb

@@ -30,7 +30,7 @@ $unread_notifications_dot_size: 8px;
     margin-top: 1em + $menu_bar_height;
     font-family: 'din-regular', Sans-Serif;
 
-    & > .title {
+    & > .notification-title {
       border-bottom: 1px solid #eee;
       padding-bottom: 0.25em;
       margin-bottom: 0.5em;
@@ -42,7 +42,7 @@ $unread_notifications_dot_size: 8px;
   }
 
 
-  .notification {
+  .notificationsPage .notification {
     .notification-subject {
       width: 25%;
     }
@@ -68,4 +68,10 @@ $unread_notifications_dot_size: 8px;
       }
     }
   }
+
+  .notificationPage .notification-body {
+    p, div {
+      margin: 1em auto;
+    }
+  }
 }

app/controllers/access_controller.rb

@@ -22,12 +22,10 @@ class AccessController < ApplicationController
     request = AccessRequest.create(user: current_user, map: @map)
     # what about push notification to map owner?
     mail = MapMailer.access_request_email(request, @map)
-    @map.user.notify(mail.subject, mail.body.parts[1].body.to_s)
+    @map.user.notify(mail.subject, 'access request', request, true, MAILBOXER_CODE_ACCESS_REQUEST)
 
     respond_to do |format|
-      format.json do
+      format.json { head :ok }
-        head :ok
-      end
     end
   end
 
@@ -38,16 +36,13 @@ class AccessController < ApplicationController
     @map.add_new_collaborators(user_ids).each do |user_id|
       # add_new_collaborators returns array of added users,
       # who we then send an email to
-      user = User.find(user_id)
       mail = MapMailer.invite_to_edit_email(@map, current_user, User.find(user_id))
-      user.notify(mail.subject, mail.body.parts[1].body.to_s)
+      user.notify(mail.subject, 'invite to edit', UserMap.find_by(user_id: user_id, map: @map), true, MAILBOXER_CODE_INVITED_TO_EDIT)
     end
     @map.remove_old_collaborators(user_ids)
 
     respond_to do |format|
-      format.json do
+      format.json { head :ok }
-        head :ok
-      end
     end
   end
 

app/helpers/application_helper.rb

@@ -38,18 +38,9 @@ module ApplicationHelper
     "#{request.base_url}/join" + (current_user ? "?code=#{current_user.code}" : '')
   end
 
-  def user_has_unread_notifications?
-    return @user_has_unread_notifications unless @user_has_unread_notifications.nil?
-    return (@user_has_unread_notifications = false) if current_user.nil?
-    current_user.mailboxer_notification_receipts.each do |receipt|
-      return (@user_has_unread_notifications = true) if receipt.is_read == false
-    end
-    @user_has_unread_notifications = false
-  end
-
   def user_unread_notification_count
     return 0 if current_user.nil?
-    current_user.mailboxer_notification_receipts.reduce(0) do |total, receipt|
+    @user_unread_notification_count ||= current_user.mailboxer_notification_receipts.reduce(0) do |total, receipt|
       receipt.is_read ? total : total + 1
     end
   end

app/mailers/application_mailer.rb

@@ -6,4 +6,16 @@ class ApplicationMailer < ActionMailer::Base
   def deliver
     raise NotImplementedError('Please use Mailboxer to send your emails.')
   end
+
+  class << self
+    def mail_for_notification(notification)
+      if notification.notification_code == MAILBOXER_CODE_ACCESS_REQUEST
+        request = notification.notified_object
+        MapMailer.access_request_email(request, request.map)
+      elsif notification.notification_code == MAILBOXER_CODE_INVITED_TO_EDIT
+        user_map = notification.notified_object
+        MapMailer.invite_to_edit_email(user_map.map, user_map.map.user, user_map.user)
+      end
+    end
+  end
 end

app/views/layouts/_mobilemenu.html.erb

@@ -3,7 +3,7 @@
     <%= yield(:mobile_title) %>
   </div>
   <div id="menu_icon">
-    <% if user_has_unread_notifications? %>
+    <% if user_unread_notification_count > 0 %>
       <div class="unread-notifications-dot"></div>
     <% end %>
   </div>
@@ -55,7 +55,7 @@
       </li>
       <li class="notifications">
         <%= link_to "Notifications", notifications_path %>
-        <% if user_has_unread_notifications? %>
+        <% if user_unread_notification_count > 0 %>
           <div class="unread-notifications-dot"></div>
         <% end %>
       </li>

app/views/layouts/_upperelements.html.erb

@@ -76,11 +76,11 @@
   </script>
   <% if current_user.present? %>
     <span id="notification_icon">
-      <%= link_to notifications_path, class: "notificationsIcon upperRightEl upperRightIcon #{user_has_unread_notifications? ? 'unread' : 'read'}" do %>
+      <%= link_to notifications_path, class: "notificationsIcon upperRightEl upperRightIcon #{user_unread_notification_count > 0 ? 'unread' : 'read'}" do %>
         <div class="tooltipsUnder">
-          Notifications
+          Notifications (<%= user_unread_notification_count %> unread)
         </div>
-        <% if user_has_unread_notifications? %>
+        <% if user_unread_notification_count > 0 %>
           <div class="unread-notifications-dot"></div>
         <% end %>
       <% end %>

app/views/mailboxer/notification_mailer/new_notification_email.html.erb

@@ -1,9 +1,4 @@
 <!DOCTYPE html>
-<html>
+<% mail = ApplicationMailer.mail_for_notification(@notification) %>
-  <head>
+<% @notification.update(body: mail.html_part&.body&.decoded) %>
-    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+<%= raw mail.html_part&.body&.decoded %>
-  </head>
-  <body>
-    <%= raw @notification.body %>
-  </body>
-</html>

app/views/mailboxer/notification_mailer/new_notification_email.text.erb

@@ -1 +1,2 @@
-<%= @notification.body.html_safe? ? @notification.body : strip_tags(@notification.body) %>
+<% mail = ApplicationMailer.mail_for_notification(@notification) %>
+<%= mail.text_part&.body&.decoded %>

app/views/notifications/show.html.erb

@@ -3,12 +3,16 @@
 
 <div id="yield">
   <div class="centerContent notificationPage">
-    <h2 class="title"><%= @notification.subject %></h4>
+    <h2 class="notification-title"><%= @notification.subject %></h4>
-    <%= raw @notification.body %>
+    <div class="notification-body">
-    <div class="back">
+      <%= raw @notification.body %>
-      <%= link_to 'Back', notifications_path %>
     </div>
   </div>
+
+  <div class="centerContent back">
+    <%= link_to 'Back', notifications_path %>
+  </div>
+
   <%= render partial: 'shared/back_to_mapping' %>
 </div>
 

config/initializers/mailboxer.rb

@@ -1,4 +1,15 @@
 # frozen_string_literal: true
+
+# notification codes to differentiate different types of notifications
+# e.g. a notification might have {
+#   notified_object_type: 'Map',
+#   notified_object_id: 1,
+#   notification_code: MAILBOXER_CODE_ACCESS_REQUEST
+# },
+# which would imply that this is an access request to Map.find(1)
+MAILBOXER_CODE_ACCESS_REQUEST = 'ACCESS_REQUEST'
+MAILBOXER_CODE_INVITED_TO_EDIT = 'INVITED_TO_EDIT'
+
 Mailboxer.setup do |config|
   # Configures if your application uses or not email sending for Notifications and Messages
   config.uses_emails = true

frontend/src/components/NotificationIcon.js

@@ -20,7 +20,7 @@ class NotificationIcon extends Component {
     return (
       <a className={linkClasses} href="/notifications">
         <div className="tooltipsUnder">
-          Notifications
+          Notifications ({this.props.unreadNotificationsCount} unread)
         </div>
         {this.props.unreadNotificationsCount === 0 ? null : (
           <div className="unread-notifications-dot"></div>