Improve order mails

Move order summary table to a shared folder to use it in other mailers as well, e.g. shipment mailer. Don't see reason to use fixed width of 25 % for price column in order summary table. Introduce class 'subsection' to allow for easier styling of shipping/pick-up information and special customer instructions (notes during checkout). Introduce class 'detail' to allow styling of the payments list in emails without affecting the payments list in invoices. Display section 'Payment method description' only if there is a description available. Order confirmation email for shop: Add customer info headline and rearrange customer info Order cancellation email for shop: Add distributor to intro. Add order summary table (I think this can be useful in case of cancellations.) Invoice email: Add order number to intro Order cancellation email: Rephrase wording
2026-03-19 04:49:15 +00:00 · 2024-02-04 18:09:23 +01:00
parent d5b0f1330a
commit bf7663b5ca
12 changed files with 159 additions and 102 deletions
--- a/app/assets/stylesheets/mail/email.scss
+++ b/app/assets/stylesheets/mail/email.scss
@@ -55,6 +55,25 @@ 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;
 }
@@ -94,20 +113,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;
    }
  }

@@ -118,8 +138,8 @@ table.order-summary {
    }

    tr td {
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 10px;
+      padding-right: 10px;
    }
  }
 }
@@ -244,7 +264,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;
 }

@@ -266,18 +285,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 {
@@ -300,12 +322,17 @@ p, ul {

 p {
  &.lead {
-    font-size: 17px;
+    font-size: 16px;
  }

  &.last {
    margin-bottom: 0px;
  }
+
+  &.small {
+    font-size: 12px;
+    margin: 5px;
+  }
 }

 ul {
--- a/app/assets/stylesheets/mail/payments_list.scss
+++ b/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 {
--- a/app/views/spree/order_mailer/_order_summary.html.haml
+++ b/app/views/spree/order_mailer/_order_summary.html.haml
@@ -10,7 +10,7 @@
      %th{align: "right"}
        %h4
          = t('.quantity')
-      %th{align: "right", width: "25%"}
+      %th{align: "right"}
        %h4
          = t('.price')
  %tbody
@@ -59,4 +59,3 @@
          = t('.includes_tax')
        %td{align: "right"}
          = display_checkout_tax_total(@order)
-%p &nbsp;
--- a/app/views/spree/order_mailer/_shipping.html.haml
+++ b/app/views/spree/order_mailer/_shipping.html.haml
@@ -7,26 +7,24 @@
      - else
        = t('.delivery_details')

-  - if @order.order_cycle&.pickup_time_for(@order.distributor)
-    %h4
-      = t('.delivery_time')
-      %strong #{@order.order_cycle.pickup_time_for(@order.distributor)}
-    - if @order.shipping_method&.description
+  .subsection
+    - if @order.order_cycle&.pickup_time_for(@order.distributor)
+      %h4
+        = t('.delivery_time')
+        #{@order.order_cycle.pickup_time_for(@order.distributor)}
+      - if @order.shipping_method&.description
+        %p
+          #{@order.shipping_method.description.html_safe}
+
+    - if @order.ship_address
+      %h4
+        = t('.delivery_address')
      %p
-        %em #{@order.shipping_method.description.html_safe}
-    %br &nbsp;
-
-  - if @order.ship_address
-    %h4
-      = t('.delivery_address')
-    %p
-      #{@order.ship_address.full_name}
-      %br
-      #{@order.ship_address.full_address}
-      %br
-      #{@order.ship_address.phone}
-      %br &nbsp;
-
+        #{@order.ship_address.full_name}
+        %br
+        #{@order.ship_address.full_address}
+        %br
+        #{@order.ship_address.phone}

 - else
  / Collection details
@@ -36,20 +34,19 @@
        #{@order.shipping_method.name.html_safe}
      - else
        = t('.collection_details')
+  .subsection
+    - if @order.order_cycle&.pickup_time_for(@order.distributor).present?
+      %h4
+        = t('.collection_time')
+        #{@order.order_cycle.pickup_time_for(@order.distributor)}

-  - if @order.order_cycle&.pickup_time_for(@order.distributor).present?
-    %h4
-      = t('.collection_time')
-      %strong #{@order.order_cycle.pickup_time_for(@order.distributor)}
+    - if @order.shipping_method&.description.present?
+      %p
+        #{@order.shipping_method.description.html_safe}

-  - if @order.shipping_method&.description.present?
-    %p
-      %em #{@order.shipping_method.description.html_safe}
-      %br &nbsp;
-
-  - if @order.order_cycle&.pickup_instructions_for(@order.distributor).present?
-    %p
-      %strong
-        = t('.collection_instructions')
-      %br
-      #{@order.order_cycle.pickup_instructions_for(@order.distributor)}
+    - if @order.order_cycle&.pickup_instructions_for(@order.distributor).present?
+      %p
+        %strong
+          = t('.collection_instructions')
+        %br
+        #{@order.order_cycle.pickup_instructions_for(@order.distributor)}
--- a/app/views/spree/order_mailer/_special_instructions.html.haml
+++ b/app/views/spree/order_mailer/_special_instructions.html.haml
@@ -1,8 +1,7 @@
 - if @order.special_instructions.present?
-  %br
-  %p
-    %small
-      %strong
-        = t('.special_instructions')
-      %br
+  %p.callout
+    %strong
+      = t('.special_instructions')
+  .subsection
+    %p
      #{@order.special_instructions}
--- a/app/views/spree/order_mailer/cancel_email.html.haml
+++ b/app/views/spree/order_mailer/cancel_email.html.haml
@@ -10,15 +10,17 @@
                   enterprise_for_logo: @enterprise_for_logo }

 %p.callout
-  = t(".dont_cancel", email: @order.distributor.contact.email)
+  = t(".dont_cancel")
+  %br
+  %a{:href => "mailto:#{@order.distributor.contact.email}", :target => "_blank"}
+    = @order.distributor.contact.email

-%p &nbsp;
-%h4
+%h3
  = t(".order_summary_canceled_html", number: @order.number)
 %p
  = t(".details")

-= render 'order_summary'
+= render 'shared/mailers/order_summary'

 %p
  - if @order.paid?
--- a/app/views/spree/order_mailer/cancel_email_for_shop.html.haml
+++ b/app/views/spree/order_mailer/cancel_email_for_shop.html.haml
@@ -2,13 +2,24 @@
  - @enterprise_for_logo = @order.distributor

 - greeting_key = "mailers_shared.enterprise_greeting"
- intro_key = ".intro"
+- intro_key = ".intro_html"

 = render partial: 'shared/mailers/greeting_and_intro',
         locals: { greeting: t(greeting_key, name: @order.distributor.contact_name),
-                   intro: t(intro_key, number: @order.number),
+                   intro: t(intro_key, number: @order.number, distributor: @order.distributor.name),
                   enterprise_for_logo: @enterprise_for_logo }

-= link_to t('.view_cancelled_order'), spree.edit_admin_order_url(@order)
+%p.callout
+  = t(".view_cancelled_order")
+  %br
+  %a{:href => spree.edit_admin_order_url(@order), :target => "_blank"}
+    = t(".link_label")
+
+%h3
+  = t(".order_summary_canceled_html", number: @order.number)
+%p
+  = t(".details")
+
+= render 'shared/mailers/order_summary'

 = render 'shared/mailers/signoff_instance'
--- a/app/views/spree/order_mailer/confirm_email_for_customer.html.haml
+++ b/app/views/spree/order_mailer/confirm_email_for_customer.html.haml
@@ -9,13 +9,16 @@
                   intro: t(intro_key, distributor: @order.distributor.name),
                   enterprise_for_logo: @enterprise_for_logo }

-%h4
+%h3
  = t('mailers_shared.order_confirmation_html', number: @order.number)
 %p
  = t('.details_html', distributor: @order.distributor.name)

-= render 'order_summary'
-= render 'spree/shared/payment'
-= render 'shipping'
-= render 'special_instructions'
+= render 'shared/mailers/order_summary'
+
+.detail
+  = render 'spree/shared/payment'
+  = render 'shipping'
+  = render 'special_instructions'
+
 = render 'shared/mailers/signoff_distributor'
--- a/app/views/spree/order_mailer/confirm_email_for_shop.html.haml
+++ b/app/views/spree/order_mailer/confirm_email_for_shop.html.haml
@@ -9,18 +9,23 @@
                   intro: t(intro_key, distributor: @order.distributor.name),
                   enterprise_for_logo: @enterprise_for_logo }

-%h4
+%h3
  = t('mailers_shared.order_confirmation_html', number: @order.number)
-%h5
-  %strong= "#{@order.bill_address.firstname} #{@order.bill_address.lastname}"
-  = " <#{@order.email}>" if @order.email
+%h4
+  = t('.customer_info')
+%p
+  = "#{@order.bill_address.firstname} #{@order.bill_address.lastname}"
+  %br
+  = "#{@order.email}" if @order.email
+  %br
  = @order.bill_address.phone if @order.bill_address.phone

-= render 'order_summary'
-= render 'spree/shared/payment'
-= render 'shipping'
-= render 'special_instructions'
+= render 'shared/mailers/order_summary'
+
+.detail
+  = render 'spree/shared/payment'
+  = render 'shipping'
+  = render 'special_instructions'

-%p &nbsp;
 = render 'shared/mailers/signoff_instance'
 = render 'shared/mailers/social_and_contact'
--- a/app/views/spree/order_mailer/invoice_email.html.haml
+++ b/app/views/spree/order_mailer/invoice_email.html.haml
@@ -6,7 +6,7 @@

 = render partial: 'shared/mailers/greeting_and_intro',
         locals: { greeting: t(greeting_key, name: @order.bill_address.firstname),
-                   intro: t(intro_key, distributor: @order.distributor.name),
+                   intro: t(intro_key, number: @order.number, distributor: @order.distributor.name),
                   enterprise_for_logo: @enterprise_for_logo }

 = render 'shared/mailers/signoff_distributor'
--- a/app/views/spree/shared/_payment.html.haml
+++ b/app/views/spree/shared/_payment.html.haml
@@ -14,7 +14,8 @@
 - if @order.payments.any?
  = render partial: 'spree/shared/payments_list', locals: { payments: @order.payments }
  - if last_payment_method(@order).present?
-    %p.callout{style: "margin-top: 40px"}
-      %strong
-        = t('.email_description')
-    %p{style: "margin: 5px"}= last_payment_method(@order).description
+    -if last_payment_method(@order).description.present?
+      %p.callout{style: "margin-top: 40px"}
+        %strong
+          = t('.email_description')
+      %p{style: "margin: 5px"}= last_payment_method(@order).description
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -497,6 +497,14 @@ See the %{link} to find out more about %{sitename}'s features and to start using
      social_and_contact:
        social: "Connect with Us:"
        contact: "Email us:"
+      order_summary:
+        item: "Item"
+        sku: "SKU"
+        quantity: "Qty"
+        price: "Price"
+        subtotal: "Subtotal:"
+        total: "Total:"
+        includes_tax: "(includes tax):"

  provider_settings: "Provider settings"

@@ -3907,16 +3915,19 @@ See the %{link} to find out more about %{sitename}'s features and to start using
      cancel_email:
        subject: "Cancellation of order %{number} at %{distributor}"
        instructions_html: "Your order with <strong>%{distributor}</strong> has been CANCELED. Please retain this cancellation information for your records."
-        dont_cancel: "If you have changed your mind or don't wish to cancel this order please contact %{email}"
-        order_summary_canceled_html: "<strong>Order Summary #%{number} [CANCELED]</strong>"
-        details: "Here are the details of what you ordered:"
-        paid_order: "Your order was paid so %{distributor} has refunded the full amount"
-        unpaid_order: "Your order was unpaid so no refund has been made"
-        credit_order: "Your order was paid so your account has been credited" # Is this used anywhere?
+        dont_cancel: "If you have questions please click the link below to send an email."
+        order_summary_canceled_html: "<strong>Order Summary %{number} [CANCELED]</strong>"
+        details: "Here are the details of your cancelled order:"
+        paid_order: "Your order was paid so %{distributor} has refunded the full amount."
+        unpaid_order: "Your order was unpaid so no refund has been made."
+        credit_order: "Your order was paid so your account has been credited." # Is this used anywhere?
      cancel_email_for_shop:
        subject: "Cancellation of order %{number} at %{distributor}"
-        intro: "A customer has cancelled their order #%{number}."
-        view_cancelled_order: "View cancelled order"
+        intro_html: "A customer has cancelled their order <strong>%{number}</strong> at <strong>%{distributor}</strong>."
+        view_cancelled_order: "To view the cancelled order click the link below."
+        link_label: "View order »"
+        order_summary_canceled_html: "<strong>Order Summary %{number} [CANCELED]</strong>"
+        details: "Here are the details of the cancelled order:"
      confirm_email_for_customer:
        subject: "Order confirmation %{number} at %{distributor}"
        intro_html: "Thanks for shopping at <strong>%{distributor}</strong>!"
@@ -3924,17 +3935,10 @@ See the %{link} to find out more about %{sitename}'s features and to start using
      confirm_email_for_shop:
        subject: "Incoming order %{number} for %{distributor}"
        intro_html: "Well done! You have a new order for <strong>%{distributor}</strong>!"
+        customer_info: "Customer information:"
      invoice_email:
        subject: "Invoice for order %{number} at %{distributor}"
-        intro_html: "Please find attached an invoice for your recent order from <strong>%{distributor}</strong>."
-      order_summary:
-        item: "Item"
-        sku: "SKU"
-        quantity: "Qty"
-        price: "Price"
-        subtotal: "Subtotal:"
-        total: "Total:"
-        includes_tax: "(includes tax):"
+        intro_html: "Please find attached an invoice for your recent order <strong>%{number}</strong> at <strong>%{distributor}</strong>."
      shipping:
        delivery_details: "Delivery details"
        delivery_time: "Delivery on:"
@@ -3943,7 +3947,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
        collection_time: "Ready for collection:"
        collection_instructions: "Collection instructions:"
      special_instructions:
-        special_instructions: "Your notes:"
+        special_instructions: "Special notes"
    shipment_mailer:
      shipped_email:
        subject: "Shipment notification of order %{number} at %{distributor}"