style: Order receipt design tweaks (#2833)

* style: Order receipt design tweaks
mitodl · Dec 11, 2023 · 06a151a · 06a151a
1 parent 484a9fb
commit 06a151a
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 62 deletions.
diff --git a/ecommerce/mail_api_test.py b/ecommerce/mail_api_test.py
@@ -264,6 +264,7 @@ def test_send_ecommerce_order_receipt(mocker, receipt_data):
                     "total_paid": "100.00",
                     "tax_paid": "0.00",
                     "discount": "0.00",
+                    "total_before_tax": "100.00",
                     "price": "100.00",
                     "readable_id": get_readable_id(
                         line.product_version.product.content_object

diff --git a/ecommerce/serializers.py b/ecommerce/serializers.py
@@ -986,7 +986,7 @@ def get_lines(self, instance):
             total_price = product_price_and_tax["price"] * line.quantity
             total_paid = Decimal(total_price + tax_paid).quantize(Decimal(".01"))
             discount = (line.product_version.price * line.quantity) - total_price
-
+            total_before_tax = Decimal(total_paid - tax_paid).quantize(Decimal(".01"))
             dates = CourseRunEnrollment.objects.filter(
                 order_id=instance.id, change_status__isnull=True
             ).aggregate(
@@ -1018,13 +1018,13 @@ def get_lines(self, instance):
                     ):
                         CEUs = override.value.get("CEUs")
                         break
-
             lines.append(
                 dict(
                     quantity=line.quantity,
                     total_paid=str(total_paid),
                     tax_paid=str(tax_paid),
                     discount=str(discount),
+                    total_before_tax=str(total_before_tax),
                     CEUs=str(CEUs) if CEUs else None,
                     **BaseProductVersionSerializer(line.product_version).data,
                     start_date=dates["start_date"],

diff --git a/ecommerce/serializers_test.py b/ecommerce/serializers_test.py
@@ -460,6 +460,7 @@ def test_serialize_order_receipt(receipt_data):
                 "price": str(product_version.price),
                 "total_paid": str(line.quantity * product_version.price),
                 "tax_paid": "0.00",
+                "total_before_tax": str(line.quantity * product_version.price),
                 "quantity": line.quantity,
                 "CEUs": product_version.product.content_object.course.page.certificate_page.CEUs,
             }

diff --git a/mail/templates/email_base.html b/mail/templates/email_base.html
@@ -238,9 +238,11 @@
 		        <!-- Email Header : BEGIN -->
 	            <tr>
 	                <td style="padding: 20px;">
+                      {% block pre-logo-text %}{% endblock %}
                       {% block logo %}
                       <img src="{{ base_url }}/static/images/mitx-pro-logo.png" width="160" height="80" alt="{{ site_name }}" style="height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #A31F34; margin-bottom: -10px;  margin-right: 10px;"/>
                       {% endblock %}
+                      {% block post-logo-text %}{% endblock %}
 	                </td>
 	            </tr>
 		        <!-- Email Header : END -->

diff --git a/mail/templates/product_order_receipt/body.html b/mail/templates/product_order_receipt/body.html
@@ -1,19 +1,46 @@
 {% extends "email_base.html" %}
 {% load format_discount %}
 
+{% block pre-logo-text %}
+<div class="rec-head" style="color: rgba(0,0,0,0.85); font: 14px/20px 'Arial', sans-serif; max-width: 696px; ">
+    <p style="font-weight: normal; margin: 0 0 20px;">Dear {{ purchaser.name }},</p>
+    <p style="font-weight: normal; margin: 0 0 20px;">You have been enrolled {% if content_title %} in {{ content_title }}{% endif %}.
+        The course should now appear on your MIT xPRO <a href="{{ base_url }}{% url 'user-dashboard' %}" style="color: #0070DA">dashboard</a>. You can also access your receipt by <a style="color: #0070DA" href="{{ base_url }}/receipt/{{order.id }}">clicking here</a>.
+    </p>
+    <p style="font-weight: normal; margin: 0 0 20px;">Below you will find a copy of your receipt:</p>
+
+</div>
+{% endblock %}
+
+{% block post-logo-text %}
+<div className="receipt-mit-info">
+    <p>
+      600 Technology Square
+      <br />
+      NE49-2000
+      <br />
+      Cambridge, MA 02139 USA
+      <br />
+      {% if enable_taxes_display %}
+      GSTIN: Pending
+      <br />
+      {% endif %}
+      Support: 
+      <a href="mailto:[email protected]">
+        [email protected]
+      </a>
+      <br />
+    </p>
+  </div>
+
+{% endblock %}
+
+
 {% block content %}
 <tr class="receipt-new-wrapper" style="font: 14px/22px 'Arial', sans-serif; margin: 0 auto; padding: 0 20px">
     <table style="margin: 0 20px !important;">
-    <td class="rec-head" style="color: rgba(0,0,0,0.85); font: 14px/20px 'Arial', sans-serif; max-width: 696px; ">
-        <p style="font-weight: normal; margin: 0 0 20px;">Dear {{ purchaser.name }},</p>
-        <p style="font-weight: normal; margin: 0 0 20px;">You have been enrolled {% if content_title %} in {{ content_title }}{% endif %}.
-            The course should now appear on your MIT xPRO <a href="{{ base_url }}{% url 'user-dashboard' %}" style="color: #0070DA">dashboard</a>. You can also access your receipt by <a style="color: #0070DA" href="{{ base_url }}/receipt/{{order.id }}">clicking here</a>.
-        </p>
-        <p style="font-weight: normal; margin: 0 0 20px;">Below you will find a copy of your receipt:</p>
-    </td>
     <tr>
         <td>
-            <h1 style="color: #000000; font-size: 24px; font-weight: 700; line-height: 26px; margin: 0 0 24px;">MIT xPRO</h1>
             <h2 style="color: #000000; font-size: 22px; font-weight: 700; line-height: 24px; margin: 0 0 22px;">Receipt</h2>
             <h3 style="color: #000000; font-size: 16px; font-weight: 700; line-height: 18px; margin: 0 0 20px;">Order Information</h3>
             <p>
@@ -24,6 +51,9 @@ <h3 style="color: #000000; font-size: 16px; font-weight: 700; line-height: 18px;
             {% for line in lines %}
             <p>
                 <strong style="font-weight: 700;">Order Item:</strong> {{ line.content_title }}<br>
+                {% if enable_taxes_display %}
+                <strong style="font-weight: 700;">HSN:</strong> 9992<br>
+                {% endif %}
                 <strong style="font-weight: 700;">Product Number:</strong> {{ line.readable_id }}<br>
                 <strong style="font-weight: 700;">Dates:</strong>   {{ line.start_date|date:"F j, Y" }} - {{ line.end_date|date:"F j, Y" }}
             </p>
@@ -32,7 +62,8 @@ <h3 style="color: #000000; font-size: 16px; font-weight: 700; line-height: 18px;
                 <strong style="font-weight: 700;">Unit Price:</strong> ${{ line.price }}<br>
                 <strong style="font-weight: 700;">Discount:</strong> {{ line.discount|format_discount }}<br>
                 {% if enable_taxes_display %}
-                    <strong style="font-weight: 700;">Tax ({{ order.tax_rate|floatformat:"-2" }}%):</strong> ${{ line.tax_paid|floatformat:2 }}<br>
+                <strong style="font-weight: 700;">Total Before Tax:</strong> ${{ line.total_before_tax|floatformat:2 }}<br>
+                <strong style="font-weight: 700;">Tax ({{ order.tax_rate|floatformat:"-2" }}%):</strong> ${{ line.tax_paid|floatformat:2 }}<br>
                 {% endif %}
                 <strong style="font-weight: 700;">Total Paid:</strong> ${{ line.total_paid|floatformat:2 }}
             </p>

diff --git a/static/images/receipts/signature_only.png b/static/images/receipts/signature_only.png
diff --git a/static/js/components/forms/CheckoutForm.js b/static/js/components/forms/CheckoutForm.js
@@ -351,7 +351,7 @@ export class InnerCheckoutForm extends React.Component<InnerProps, InnerState> {
                   <div>
                     <div className="bar" />
                     <div className="flex-row total-before-tax-row">
-                      <span>Total before tax:</span>
+                      <span>Total Before Tax:</span>
                       <span>{formatPrice(calculatePrice(item, coupon))}</span>
                     </div>
                     <div className="flex-row tax-row">

diff --git a/static/js/components/forms/CheckoutForm_test.js b/static/js/components/forms/CheckoutForm_test.js
@@ -150,7 +150,7 @@ describe("CheckoutForm", () => {
 
       assert.equal(
         inner.find(".total-before-tax-row").text(),
-        `Total before tax:${formatPrice(calculatePrice(basketItem, hasCoupon ? coupon : null))}`
+        `Total Before Tax:${formatPrice(calculatePrice(basketItem, hasCoupon ? coupon : null))}`
       )
     })
   })

diff --git a/static/js/containers/pages/ReceiptPage.js b/static/js/containers/pages/ReceiptPage.js
@@ -12,7 +12,7 @@ import { pathOr } from "ramda"
 
 import queries from "../../lib/queries"
 import { formatPrettyDate, parseDateString } from "../../lib/util"
-import { formatNumber, formatDiscount } from "../../lib/ecommerce"
+import { formatNumber, formatDiscount, formatPrice } from "../../lib/ecommerce"
 import type Moment from "moment"
 import type { Match } from "react-router"
 import type { OrderReceiptResponse } from "../../flow/ecommerceTypes"
@@ -111,25 +111,17 @@ export class ReceiptPage extends React.Component<Props> {
                         NE49-2000
                         <br />
                         Cambridge, MA 02139 USA
-                        <br />
+                        {SETTINGS.enable_taxes_display ? <div>GSTIN: Pending</div> : null}
                         Support:{" "}
-                        <a href="mailto:[email protected]">
-                          [email protected]
-                        </a>
-                        <br />
-                        <a
-                          target="_blank"
-                          href="https://xpro.mit.edu"
-                          rel="noreferrer"
-                        >
-                          xpro.mit.edu
+                        <a href={`mailto:${SETTINGS.support_email}`}>
+                          { SETTINGS.support_email }
                         </a>
                       </p>
                     </div>
                   </div>
                   <div className="receipt-col p-t-50">
                     <dl>
-                      <dt>Order Number:</dt>
+                      <dt>Invoice Number:</dt>
                       <dd id="orderNumber">
                         {orderReceipt.order.reference_number}
                       </dd>
@@ -254,6 +246,7 @@ export class ReceiptPage extends React.Component<Props> {
                         <th>Quantity</th>
                         <th>Unit Price</th>
                         <th>Discount</th>
+                        {SETTINGS.enable_taxes_display ? <th>Total Before Tax</th> : null}
                         {SETTINGS.enable_taxes_display ? <th>Tax ({formatNumber(orderReceipt.order.tax_rate)}%)</th> : null}
                         <th>Total Paid</th>
                       </tr>
@@ -265,6 +258,7 @@ export class ReceiptPage extends React.Component<Props> {
                         return (
                           <tr key={line.readable_id}>
                             <td>
+                              <p>Title</p>
                               <div>
                                 {line.content_title} <br />
                                 {line.readable_id} <br />
@@ -278,28 +272,46 @@ export class ReceiptPage extends React.Component<Props> {
                               </div>
                             </td>
                             <td>
+                              <p>Quantity</p>
                               <div>{line.quantity}</div>
                             </td>
                             <td>
+                              <p>Unit Price</p>
                               <div>${line.price}</div>
                             </td>
                             <td>
+                              <p>Discount</p>
                               <div>{formatDiscount(line.discount)}</div>
                             </td>
                             {SETTINGS.enable_taxes_display ? (
                               <td>
+                                <p>Total Before Tax</p>
+                                <div>{formatPrice(line.total_before_tax)}</div>
+                              </td>
+                            ) : null}
+
+                            {SETTINGS.enable_taxes_display ? (
+                              <td>
+                                <p>Tax ({formatNumber(orderReceipt.order.tax_rate)}%)</p>
                                 <div>${line.tax_paid}</div>
                               </td>
                             ) : null}
                             <td>
+                              <p>Total Paid</p>
                               <div>${line.total_paid}</div>
                             </td>
                           </tr>
                         )
                       })}
                     </tbody>
                   </table>
+                  {SETTINGS.enable_taxes_display ? <div className="receipt-hsn">HSN: 9992</div> : null}
                 </div>
+                { SETTINGS.enable_taxes_display ? <div className="footnote-signature">
+                  <img src="static/images/receipts/signature_only.png" alt=""></img>
+                  <small>Bryan Adkison</small>
+                  <small>MIT Open Learning - A/R Manager</small>
+                </div> : null }
               </div>
             )}
           </div>

diff --git a/static/js/flow/ecommerceTypes.js b/static/js/flow/ecommerceTypes.js
@@ -124,6 +124,7 @@ export type OrderLine = {
   quantity: number,
   total_paid: string,
   tax_paid: string,
+  total_before_tax: string,
   discount: string,
   content_title: string,
   readable_id: string,

diff --git a/static/scss/receipt.scss b/static/scss/receipt.scss
@@ -124,6 +124,18 @@ $label-color: #8a8b8c;
   }
 }
 
+.footnote-signature {
+  padding-top: 10px;
+  text-align: center;
+
+  small {
+    display: block;
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
+
+
 .receipt-mit-info {
   max-width: 226px;
   font-size: 16px;
@@ -186,7 +198,7 @@ $label-color: #8a8b8c;
         width: 100%;
       }
 
-      &:before {
+      p {
         display: none;
         color: black;
         white-space: nowrap;
@@ -203,43 +215,14 @@ $label-color: #8a8b8c;
       div {
         overflow: hidden;
       }
-
-      &:nth-child(1) {
-
-        &:before {
-          content: "Title";
-        }
-      }
-
-      &:nth-child(2) {
-
-        &:before {
-          content: "Quantity";
-        }
-      }
-
-      &:nth-child(3) {
-
-        &:before {
-          content: "Unit Price";
-        }
-      }
-
-      &:nth-child(4) {
-
-        &:before {
-          content: "Discount";
-        }
-      }
-
-      &:nth-child(5) {
-
-        &:before {
-          content: "Total Paid";
-        }
-      }
     }
   }
+
+  .receipt-hsn {
+    padding: 5px 15px;
+    text-align: left;
+    color: black;
+  }
 }
 
 @media print {