[Draft] Email improvements

app/assets/stylesheets/mail/all.scss

@@ -1,3 +1,4 @@
 @import '../../../webpacker/css/admin/globals/palette.scss';
 @import 'email';
 @import 'payments_list';
+@import '../../../webpacker/css/darkswarm/style.scss';

app/assets/stylesheets/mail/email.scss

@@ -55,18 +55,52 @@ p.callout {
   color: #0096ad;
 }
 
+.detail {
+  & .callout {
+    margin-top: 40px;
+    padding: 10px;
+  }
+
+  & p.callout + p {
+    padding-left: 5px;
+  }
+
+  & .subsection {
+    margin-left: 10px;
+  }
+
+  & .subsection:last-child {
+    margin-bottom: 15px;
+  }
+}
+
+p.footer, p.footer_icons a {
+  color: #999;
+}
+
+p.signoff_icons, p.footer_icons {
+  font-size: 0px;
+
+  a {
+    text-decoration: none;
+    margin-right: 5px;
+  }
+}
+
+p.signoff_icons a:not(.ofn-i_image) {
+  font-size: 24px;
+}
+
+p.footer_icons a:not(.ofn-i_image) {
+  font-size: 20px;
+}
+
 p.notice {
   font-style: italic;
   font-size: 12px;
   margin-top: 20px;
 }
 
-.powered-by-ofn {
-  background-color: #ebebeb;
-  padding: .5em;
-  text-align: center;
-}
-
 table.social {
   background-color: #ebebeb;
 
@@ -83,20 +117,21 @@ table.social {
 table.order-summary {
   border-collapse: separate;
   border-spacing: 0px 10px;
+  font-size: 14px;
 
   tbody tr td {
-    padding-left: 5px;
-    padding-right: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 
   thead tr th {
     background-color: #f2f2f2;
     border-bottom: 1px solid black;
-    padding-left: 5px;
-    padding-right: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
 
     h4 {
-      margin-top: 15px;
+      margin-top: 10px;
     }
   }
 
@@ -107,8 +142,8 @@ table.order-summary {
     }
 
     tr td {
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 10px;
+      padding-right: 10px;
     }
   }
 }
@@ -121,6 +156,10 @@ table.order-summary {
   text-align: right;
 }
 
+.middle {
+  vertical-align: middle;
+}
+
 .social .soc-btn {
   padding: 3px 7px;
   font-size: 12px;
@@ -166,18 +205,23 @@ a {
 img.float-right {
   float: right;
   display: block;
+  max-width: 100px;
+  max-height: 100px;
+  margin-bottom: 15px;
+  margin-left: 15px;
 }
 
 del.quantity_was {
   color: #757575;
 }
 
 /* -------------------------------------
- *		HEADER
+ *		HEADER & FOOTER
  *------------------------------------- */
 
-table.head-wrap {
+.wrap {
   width: 100%;
+  background-color: #f2f2f2;
 }
 
 .header.container table td {
@@ -224,7 +268,6 @@ table {
 h1, h2, h3, h4, h5, h6 {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   line-height: 1.1;
-  margin-bottom: 15px;
   color: #000;
 }
 
@@ -246,18 +289,21 @@ h2 {
 }
 
 h3 {
-  font-weight: 500;
-  font-size: 27px;
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 15px;
 }
 
 h4 {
-  font-weight: 500;
-  font-size: 23px;
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 5px;
 }
 
 h5 {
-  font-weight: 900;
-  font-size: 17px;
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: 5px;
 }
 
 h6 {
@@ -271,7 +317,7 @@ h6 {
   margin: 0 !important;
 }
 
-p, ul {
+p, ul, span.signoff {
   margin-bottom: 10px;
   font-weight: normal;
   font-size: 14px;
@@ -280,12 +326,17 @@ p, ul {
 
 p {
   &.lead {
-    font-size: 17px;
+    font-size: 16px;
   }
 
   &.last {
     margin-bottom: 0px;
   }
+
+  &.small {
+    font-size: 12px;
+    margin: 5px;
+  }
 }
 
 ul {
@@ -363,6 +414,10 @@ ul {
   }
 }
 
+.greeting_and_intro {
+  overflow: hidden;
+}
+
 /* Let's make sure tables in the content area are 100% wide */
 
 /* Odds and ends */
@@ -429,6 +484,7 @@ ul {
 
   img.float-right {
     float: none !important;
+    margin: 0px auto 15px;
   }
 }
 

app/assets/stylesheets/mail/payments_list.scss

@@ -28,9 +28,18 @@
     text-align: left;
   }
 
+  th, td {
+    &:first-child {
+      padding-left: 10px;
+    }
+
+    &:last-child {
+      padding-right: 10px;
+    }
+  }
+
   .amount {
     text-align: right;
-    padding-right: 15px;
   }
 
   .payment-state {

app/helpers/mailer_helper.rb

@@ -1,16 +1,6 @@
 # frozen_string_literal: true
 
 module MailerHelper
-  def footer_ofn_link
-    ofn = I18n.t("shared.mailers.powered_by.open_food_network")
-
-    if ContentConfig.footer_email.present?
-      mail_to ContentConfig.footer_email, ofn
-    else
-      link_to ofn, "https://www.openfoodnetwork.org"
-    end
-  end
-
   def order_reply_email(order)
     order.distributor.email_address.presence || order.distributor.contact.email
   end

app/mailers/enterprise_mailer.rb

@@ -8,7 +8,7 @@ class EnterpriseMailer < ApplicationMailer
   def welcome(enterprise)
     @enterprise = enterprise
     I18n.with_locale valid_locale(@enterprise.owner) do
-      subject = t('enterprise_mailer.welcome.subject',
+      subject = t('.subject',
                   enterprise: @enterprise.name,
                   sitename: Spree::Config[:site_name])
       mail(to: enterprise.contact.email,
@@ -21,9 +21,11 @@ def manager_invitation(enterprise, user)
     @instance = Spree::Config[:site_name]
 
     I18n.with_locale valid_locale(@enterprise.owner) do
-      subject = t('enterprise_mailer.invite_manager.subject', enterprise: @enterprise.name)
+      subject = t('.subject',
+                  enterprise: @enterprise.name)
       mail(to: user.email,
-           subject:)
+           subject:,
+           reply_to: @enterprise.contact.email)
     end
   end
 

app/mailers/payment_mailer.rb

@@ -2,22 +2,31 @@
 
 class PaymentMailer < ApplicationMailer
   include I18nHelper
+  helper MailerHelper
+  helper 'checkout'
 
   def authorize_payment(payment)
     @payment = payment
-    subject = I18n.t('spree.payment_mailer.authorize_payment.subject',
-                     distributor: @payment.order.distributor.name)
+    @order = @payment.order
+    @hide_ofn_navigation = @payment.order.distributor.hide_ofn_navigation
     I18n.with_locale valid_locale(@payment.order.user) do
-      mail(to: payment.order.email, subject:)
+      subject = t('.subject',
+                  number: @order.number,
+                  distributor: @order.distributor.name)
+      mail(to: @order.email,
+           subject:,
+           reply_to: @order.distributor.contact.email)
     end
   end
 
   def authorization_required(payment)
     @payment = payment
+    @order = @payment.order
     shop_owner = @payment.order.distributor.owner
-    subject = I18n.t('spree.payment_mailer.authorization_required.subject',
-                     order: @payment.order)
     I18n.with_locale valid_locale(shop_owner) do
+      subject = t('.subject',
+                  number: @order.number,
+                  distributor: @order.distributor.name)
       mail(to: shop_owner.email,
            subject:)
     end

app/mailers/producer_mailer.rb

@@ -9,7 +9,7 @@
 
     load_data
 
-    I18n.with_locale(owner_locale) do
+    I18n.with_locale valid_locale(@producer.owner) do
       return unless orders?(order_cycle, producer)
 
       mail(
@@ -23,10 +23,6 @@
 
   private
 
-  def owner_locale
-    valid_locale(@producer.owner)
-  end
-
   def load_data
     @coordinator = @order_cycle.coordinator
 
@@ -41,8 +37,10 @@
   end
 
   def subject
-    order_cycle_subject = I18n.t('producer_mailer.order_cycle.subject', producer: @producer.name)
-    "[#{Spree::Config.site_name}] #{order_cycle_subject}"
+    order_cycle_subject = I18n.t('producer_mailer.order_cycle_report.subject',
+                                  coordinator: @coordinator.name,
+                                  producer: @producer.name)
+    "#{order_cycle_subject}"
   end
 
   def orders?(order_cycle, producer)