From bf7663b5ca5e7308f8813a71434bba685ad6ae64 Mon Sep 17 00:00:00 2001 From: drummer83 Date: Sun, 4 Feb 2024 18:09:23 +0100 Subject: [PATCH] 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 --- app/assets/stylesheets/mail/email.scss | 57 +++++++++++----- .../stylesheets/mail/payments_list.scss | 11 +++- .../mailers}/_order_summary.html.haml | 3 +- .../spree/order_mailer/_shipping.html.haml | 65 +++++++++---------- .../_special_instructions.html.haml | 11 ++-- .../spree/order_mailer/cancel_email.html.haml | 10 +-- .../cancel_email_for_shop.html.haml | 17 ++++- .../confirm_email_for_customer.html.haml | 13 ++-- .../confirm_email_for_shop.html.haml | 23 ++++--- .../order_mailer/invoice_email.html.haml | 2 +- app/views/spree/shared/_payment.html.haml | 9 +-- config/locales/en.yml | 40 +++++++----- 12 files changed, 159 insertions(+), 102 deletions(-) rename app/views/{spree/order_mailer => shared/mailers}/_order_summary.html.haml (97%) diff --git a/app/assets/stylesheets/mail/email.scss b/app/assets/stylesheets/mail/email.scss index 5542c3d4c7..96976e1c06 100644 --- 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 { diff --git a/app/assets/stylesheets/mail/payments_list.scss b/app/assets/stylesheets/mail/payments_list.scss index 1cce0b3426..e2764f244e 100644 --- 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 { diff --git a/app/views/spree/order_mailer/_order_summary.html.haml b/app/views/shared/mailers/_order_summary.html.haml similarity index 97% rename from app/views/spree/order_mailer/_order_summary.html.haml rename to app/views/shared/mailers/_order_summary.html.haml index 34e9d861e2..d6e6420824 100644 --- a/app/views/spree/order_mailer/_order_summary.html.haml +++ b/app/views/shared/mailers/_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   diff --git a/app/views/spree/order_mailer/_shipping.html.haml b/app/views/spree/order_mailer/_shipping.html.haml index 094dda03c2..f9d12f85a8 100644 --- 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   - - - 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   - + #{@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   - - - 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)} diff --git a/app/views/spree/order_mailer/_special_instructions.html.haml b/app/views/spree/order_mailer/_special_instructions.html.haml index 79036103bb..39c10de9e9 100644 --- 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} diff --git a/app/views/spree/order_mailer/cancel_email.html.haml b/app/views/spree/order_mailer/cancel_email.html.haml index 49f2d336e7..2da4589246 100755 --- 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   -%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? diff --git a/app/views/spree/order_mailer/cancel_email_for_shop.html.haml b/app/views/spree/order_mailer/cancel_email_for_shop.html.haml index 4b100a2248..d9c8d92213 100644 --- 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' diff --git a/app/views/spree/order_mailer/confirm_email_for_customer.html.haml b/app/views/spree/order_mailer/confirm_email_for_customer.html.haml index 5933dc64bb..cc51a7eb8c 100644 --- 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' diff --git a/app/views/spree/order_mailer/confirm_email_for_shop.html.haml b/app/views/spree/order_mailer/confirm_email_for_shop.html.haml index d3795f7792..27f0d41547 100644 --- 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   = render 'shared/mailers/signoff_instance' = render 'shared/mailers/social_and_contact' diff --git a/app/views/spree/order_mailer/invoice_email.html.haml b/app/views/spree/order_mailer/invoice_email.html.haml index 161a7a1edc..5419f244ea 100644 --- 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' diff --git a/app/views/spree/shared/_payment.html.haml b/app/views/spree/shared/_payment.html.haml index 9e6540a26c..0c93eafa7e 100644 --- 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 diff --git a/config/locales/en.yml b/config/locales/en.yml index 9462fc1122..dd31b6dd53 100644 --- 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 %{distributor} 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: "Order Summary #%{number} [CANCELED]" - 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: "Order Summary %{number} [CANCELED]" + 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 %{number} at %{distributor}." + view_cancelled_order: "To view the cancelled order click the link below." + link_label: "View order ยป" + order_summary_canceled_html: "Order Summary %{number} [CANCELED]" + 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 %{distributor}!" @@ -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 %{distributor}!" + 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 %{distributor}." - 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 %{number} at %{distributor}." 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}"