From 74d09c3d81a2f1fa29b734a53877983bc4ed6b9c Mon Sep 17 00:00:00 2001
From: RyanAquino <ryan.aquino7110@gmail.com>
Date: Fri, 24 Dec 2021 21:12:53 +0800
Subject: [PATCH] ZDL-95: Integrate sending of email after order

---
 .gitignore                            |   1 -
 README.md                             |   5 +
 orders/models.py                      |  25 ++
 orders/tests/test_orders_api.py       |   3 +
 orders/views.py                       |  55 ++-
 requirements.txt                      |   8 +-
 static/images/zadala-logo.png         | Bin 0 -> 13417 bytes
 templates/invoice_email_template.html | 560 ++++++++++++++++++++++++++
 zadalaAPI/settings.py                 |  19 +-
 zadala_config.py                      |   6 +
 10 files changed, 660 insertions(+), 22 deletions(-)
 create mode 100644 static/images/zadala-logo.png
 create mode 100644 templates/invoice_email_template.html

diff --git a/.gitignore b/.gitignore
index 374dc3f..5baf72a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -145,4 +145,3 @@ dmypy.json
 .pytype/
 
 # End of https://www.toptal.com/developers/gitignore/api/django
-static
\ No newline at end of file
diff --git a/README.md b/README.md
index 5113b40..ceb564b 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,11 @@ python manage.py createsuperuser
 python manage.py runserver
 ```
 
+#### Access on browser
+```
+http://localhost:8000/api-docs
+```
+
 ### Setup with Docker (Alternative)
 ```
 docker-compose up -d
diff --git a/orders/models.py b/orders/models.py
index a3c185d..c11a71b 100644
--- a/orders/models.py
+++ b/orders/models.py
@@ -1,7 +1,15 @@
+from typing import Dict
+
+from django.conf import settings
+from django.core.mail import send_mail
 from django.db import models
 from django.db.models.signals import post_delete
 from django.dispatch import receiver
+from django.template.loader import render_to_string
 from django.utils import timezone
+from django.utils.html import strip_tags
+from pydantic import EmailStr
+from validate_email import validate_email
 
 from authentication.models import User
 from products.models import Product
@@ -43,6 +51,23 @@ def get_cart_items(self):
         total = sum([item.quantity for item in items])
         return total
 
+    @staticmethod
+    def send_email_notification(
+        customer_email: EmailStr, template: str, subject: str, context_data: Dict
+    ):
+        if validate_email(email_address=customer_email, check_smtp=False):
+            html_message = render_to_string(template, context_data)
+            plain_message = strip_tags(html_message)
+
+            send_mail(
+                subject,
+                plain_message,
+                settings.EMAIL_HOST_USER,
+                [customer_email, settings.EMAIL_HOST_USER],
+                fail_silently=False,
+                html_message=html_message,
+            )
+
 
 class OrderItem(models.Model):
     product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True)
diff --git a/orders/tests/test_orders_api.py b/orders/tests/test_orders_api.py
index 529e1fd..8b82b9f 100644
--- a/orders/tests/test_orders_api.py
+++ b/orders/tests/test_orders_api.py
@@ -1,4 +1,5 @@
 from datetime import datetime
+from unittest.mock import patch
 
 import pytest
 
@@ -149,6 +150,8 @@ def test_update_cart(logged_in_client):
 
 
 @pytest.mark.django_db
+@patch("django.core.mail.send_mail", lambda **kwargs: kwargs)
+@patch("validate_email.validate_email", lambda z, x: x)
 def test_process_order(logged_in_client, logged_in_user):
     """
     Test process order
diff --git a/orders/views.py b/orders/views.py
index d86ee41..d397064 100644
--- a/orders/views.py
+++ b/orders/views.py
@@ -1,4 +1,5 @@
-import datetime
+from datetime import datetime
+from uuid import uuid4
 
 from rest_condition import Or
 from rest_framework import mixins, status, viewsets
@@ -105,7 +106,8 @@ def update_cart(self, request):
     )
     def process_order(self, request):
         request_data = self.get_serializer(data=request.data)
-        transaction_id = datetime.datetime.now().timestamp()
+        transaction_id = str(uuid4())
+        transaction_timestamp = datetime.now().strftime("%b %d, %Y %H:%M")
         customer = request.user
         self.check_object_permissions(self.request, customer)
 
@@ -116,18 +118,37 @@ def process_order(self, request):
         order.complete = True
         order.save()
 
-        if order.shipping:
-            shipping = ShippingAddress.objects.create(
-                customer=customer,
-                order=order,
-                address=request_data.validated_data["address"],
-                city=request_data.validated_data["city"],
-                state=request_data.validated_data["state"],
-                zipcode=request_data.validated_data["zipcode"],
-            )
-            shipping.save()
-
-            return Response(
-                ShippingAddressSerializer(shipping).data, status=status.HTTP_201_CREATED
-            )
-        return Response("Order not found", status=status.HTTP_400_BAD_REQUEST)
+        if not order.shipping:
+            return Response("Order not found", status=status.HTTP_400_BAD_REQUEST)
+
+        shipping = ShippingAddress.objects.create(
+            customer=customer,
+            order=order,
+            address=request_data.validated_data["address"],
+            city=request_data.validated_data["city"],
+            state=request_data.validated_data["state"],
+            zipcode=request_data.validated_data["zipcode"],
+        )
+        shipping.save()
+
+        Order.send_email_notification(
+            customer.email,
+            "invoice_email_template.html",
+            f"Order Being Processed: {order.transaction_id}",
+            {
+                "user_first_name": customer.first_name,
+                "user_last_name": customer.last_name,
+                "shipping_address": shipping.address,
+                "shipping_city": shipping.city,
+                "shipping_state": shipping.state,
+                "shipping_zipcode": shipping.zipcode,
+                "invoice_code": transaction_id,
+                "order_items": order.order_items,
+                "order": order,
+                "date_ordered": transaction_timestamp,
+            },
+        )
+
+        return Response(
+            ShippingAddressSerializer(shipping).data, status=status.HTTP_201_CREATED
+        )
diff --git a/requirements.txt b/requirements.txt
index 1e4cf70..707d0fc 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -5,6 +5,7 @@ attrs==19.3.0
 black==20.8b1
 certifi==2020.6.20
 chardet==3.0.4
+charset-normalizer==2.0.9
 click==7.1.2
 colorama==0.4.4
 coreapi==2.3.3
@@ -14,12 +15,14 @@ Django==3.0.8
 django-cors-headers==3.7.0
 djangorestframework==3.11.0
 djangorestframework-simplejwt==4.4.0
+dnspython==2.1.0
 drf-yasg==1.17.1
 factory-boy==3.2.0
 Faker==8.8.0
+filelock==3.4.0
 flake8==3.8.3
 gunicorn==20.0.4
-idna==2.10
+idna==3.0
 importlib-metadata==1.7.0
 inflection==0.5.1
 iniconfig==1.0.1
@@ -37,6 +40,7 @@ Pillow==7.2.0
 pluggy==0.13.1
 psycopg2-binary==2.8.6
 py==1.9.0
+py3-validate-email==1.0.5
 pycodestyle==2.6.0
 pydantic==1.6.1
 pyflakes==2.2.0
@@ -48,7 +52,7 @@ pytest-django==3.9.0
 python-dateutil==2.8.1
 pytz==2020.1
 regex==2020.7.14
-requests==2.24.0
+requests==2.26.0
 rest-condition==1.0.3
 ruamel.yaml==0.16.12
 ruamel.yaml.clib==0.2.2
diff --git a/static/images/zadala-logo.png b/static/images/zadala-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..e66a466a9d2e207a82bd3426fb472431051d5c98
GIT binary patch
literal 13417
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

literal 0
HcmV?d00001

diff --git a/templates/invoice_email_template.html b/templates/invoice_email_template.html
new file mode 100644
index 0000000..faee9f5
--- /dev/null
+++ b/templates/invoice_email_template.html
@@ -0,0 +1,560 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+<!--[if gte mso 9]>
+<xml>
+  <o:OfficeDocumentSettings>
+    <o:AllowPNG/>
+    <o:PixelsPerInch>96</o:PixelsPerInch>
+  </o:OfficeDocumentSettings>
+</xml>
+<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="x-apple-disable-message-reformatting">
+  <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
+  <title></title>
+  
+    <style type="text/css">
+      table, td { color: #000000; } @media only screen and (min-width: 620px) {
+  .u-row {
+    width: 600px !important;
+  }
+  .u-row .u-col {
+    vertical-align: top;
+  }
+
+  .u-row .u-col-33p33 {
+    width: 199.98px !important;
+  }
+
+  .u-row .u-col-50 {
+    width: 300px !important;
+  }
+
+  .u-row .u-col-66p67 {
+    width: 400.02px !important;
+  }
+
+  .u-row .u-col-100 {
+    width: 600px !important;
+  }
+
+}
+
+@media (max-width: 620px) {
+  .u-row-container {
+    max-width: 100% !important;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+  .u-row .u-col {
+    min-width: 320px !important;
+    max-width: 100% !important;
+    display: block !important;
+  }
+  .u-row {
+    width: calc(100% - 40px) !important;
+  }
+  .u-col {
+    width: 100% !important;
+  }
+  .u-col > div {
+    margin: 0 auto;
+  }
+}
+body {
+  margin: 0;
+  padding: 0;
+}
+
+table,
+tr,
+td {
+  vertical-align: top;
+  border-collapse: collapse;
+}
+
+p {
+  margin: 0;
+}
+
+.ie-container table,
+.mso-container table {
+  table-layout: fixed;
+}
+
+* {
+  line-height: inherit;
+}
+
+a[x-apple-data-detectors='true'] {
+  color: inherit !important;
+  text-decoration: none !important;
+}
+
+</style>
+  
+  
+
+<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet" type="text/css"><!--<![endif]-->
+
+</head>
+
+<body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #707070;color: #000000">
+  <!--[if IE]><div class="ie-container"><![endif]-->
+  <!--[if mso]><div class="mso-container"><![endif]-->
+  <table style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #707070;width:100%" cellpadding="0" cellspacing="0">
+  <tbody>
+  <tr style="vertical-align: top">
+    <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
+    <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #707070;"><![endif]-->
+    
+
+<div class="u-row-container" style="padding: 29px 10px 0px;background-color: rgba(255,255,255,0)">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #17c297;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 29px 10px 0px;background-color: rgba(255,255,255,0);" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #17c297;"><![endif]-->
+      
+<!--[if (mso)|(IE)]><td align="center" width="200" style="width: 200px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-33p33" style="max-width: 320px;min-width: 200px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+  
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:20px;font-family:'Lato',sans-serif;" align="left">
+        
+<table width="100%" cellpadding="0" cellspacing="0" border="0">
+  <tr>
+    <td style="padding-right: 0px;padding-left: 0px;" align="center">
+      <img align="center" border="0" src="https://zadala-api.herokuapp.com/images/zadala-logo.png" alt="Logo image" title="Logo image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 160px;" width="160"/>
+      
+    </td>
+  </tr>
+</table>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+<!--[if (mso)|(IE)]><td align="center" width="400" style="width: 400px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-66p67" style="max-width: 320px;min-width: 400px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+  
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:44px 20px 20px;font-family:'Lato',sans-serif;" align="left">
+        
+  <div style="color: #ffffff; line-height: 120%; text-align: right; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 120%;">Hello {{ user_first_name }} {{ user_last_name }}!</p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+
+<div class="u-row-container" style="padding: 0px 10px;background-color: rgba(255,255,255,0)">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #f5f5f5;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 10px;background-color: rgba(255,255,255,0);" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #f5f5f5;"><![endif]-->
+      
+<!--[if (mso)|(IE)]><td align="center" width="300" style="width: 300px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-50" style="max-width: 320px;min-width: 300px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+  
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:35px 20px 10px;font-family:'Lato',sans-serif;" align="left">
+        
+  <div style="line-height: 120%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 24px; line-height: 28.8px; color: #18c197;"><strong>Shipping Address</strong></span></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:10px 20px 30px;font-family:'Lato',sans-serif;" align="left">
+        
+  <div style="color: #757575; line-height: 160%; text-align: left; word-wrap: break-word;">
+<p style="font-size: 14px; line-height: 160%;"><span style="font-size: 14px; line-height: 22.4px;">{{ shipping_address }}, {{ shipping_city }}</span></p>
+<p style="font-size: 14px; line-height: 160%;"><span style="font-size: 14px; line-height: 22.4px;">{{ shipping_state }}, Philippines {{ shipping_zipcode }}</span></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+<!--[if (mso)|(IE)]><td align="center" width="300" style="width: 300px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-50" style="max-width: 320px;min-width: 300px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+  
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:35px 20px 10px;font-family:'Lato',sans-serif;" align="left">
+        
+  <div style="color: #333333; line-height: 120%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 120%;"><strong><span style="font-size: 24px; line-height: 28.8px;">Invoice Code</span></strong></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:10px 20px 30px;font-family:'Lato',sans-serif;" align="left">
+        
+  <div style="color: #333333; line-height: 120%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 20px; line-height: 24px;"><strong>#{{ invoice_code }}</strong></span></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+
+<div class="u-row-container" style="padding: 0px 10px;background-color: rgba(255,255,255,0)">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #ffffff;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 10px;background-color: rgba(255,255,255,0);" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]-->
+      
+<!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+  
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:30px 20px 20px;font-family:'Lato',sans-serif;" align="left">
+        
+  <div style="color: #333333; line-height: 120%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 120%;"><strong><span style="font-size: 24px; line-height: 28.8px;">Purchased Items</span></strong></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:0px;font-family:'Lato',sans-serif;" align="left">
+        
+  <table height="0px" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 1px solid #e3e3e3;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+    <tbody>
+      <tr style="vertical-align: top">
+        <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+          <span>&#160;</span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+{% for order_item in order_items %}
+<div class="u-row-container" style="padding: 0px 10px;background-color: rgba(255,255,255,0)">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #ffffff;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 10px;background-color: rgba(255,255,255,0);" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]-->
+
+<!--[if (mso)|(IE)]><td align="center" width="400" style="width: 400px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-66p67" style="max-width: 320px;min-width: 400px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:28px 20px 20px;font-family:'Lato',sans-serif;" align="left">
+
+  <div style="color: #333333; line-height: 140%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 140%;"><span style="font-size: 18px; line-height: 25.2px;">{{ order_item.product.name }}</span></p>
+<p style="font-size: 14px; line-height: 140%;"><span style="font-size: 16px; line-height: 22.4px; color: #17c297;">Quantity : {{ order_item.quantity }} x ₱{{ order_item.product.price }}</span></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+<!--[if (mso)|(IE)]><td align="center" width="200" style="width: 200px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-33p33" style="max-width: 320px;min-width: 200px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:40px 20px 20px;font-family:'Lato',sans-serif;" align="left">
+
+  <div style="color: #333333; line-height: 120%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 24px; line-height: 28.8px;"><strong><span style="line-height: 28.8px; font-size: 24px;">₱{{ order_item.total }}</span></strong></span></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+{% endfor %}
+<!-- total -->
+<div class="u-row-container" style="padding: 0px 10px;background-color: rgba(255,255,255,0)">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #ffffff;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 10px;background-color: rgba(255,255,255,0);" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]-->
+
+<!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:0px;font-family:'Lato',sans-serif;" align="left">
+
+  <table height="0px" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 1px solid #e3e3e3;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+    <tbody>
+      <tr style="vertical-align: top">
+        <td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%">
+          <span>&#160;</span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+
+
+<div class="u-row-container" style="padding: 0px 10px;background-color: rgba(255,255,255,0)">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #ffffff;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 10px;background-color: rgba(255,255,255,0);" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]-->
+
+<!--[if (mso)|(IE)]><td align="center" width="400" style="width: 400px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-66p67" style="max-width: 320px;min-width: 400px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:28px 20px 25px;font-family:'Lato',sans-serif;" align="left">
+
+  <div style="color: #333333; line-height: 140%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 140%;"><span style="font-size: 24px; line-height: 33.6px;"><strong><span style="line-height: 33.6px; font-size: 24px;">Grand Total</span></strong></span></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+<!--[if (mso)|(IE)]><td align="center" width="200" style="width: 200px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-33p33" style="max-width: 320px;min-width: 200px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:35px 20px 20px;font-family:'Lato',sans-serif;" align="left">
+
+  <div style="color: #333333; line-height: 120%; text-align: left; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 120%;"><strong><span style="font-size: 30px; line-height: 36px;">₱{{ order.get_cart_total }}</span></strong></p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+
+<div class="u-row-container" style="padding: 0px 10px 20px;background-color: rgba(255,255,255,0)">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #17c297;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px 10px 20px;background-color: rgba(255,255,255,0);" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #17c297;"><![endif]-->
+
+<!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:30px 20px;font-family:'Lato',sans-serif;" align="left">
+
+  <div style="color: #ffffff; line-height: 140%; text-align: center; word-wrap: break-word;">
+    <p style="font-size: 14px; line-height: 140%;">We received your order on {{ date_ordered }} and you’ll be paying for this via Cash on delivery. We wish you enjoy shopping with us and hope to see you again real soon!</p>
+    <p style="font-size: 14px; line-height: 140%;">&nbsp;</p>
+    <p style="font-size: 14px; line-height: 140%;">zadala.herokuapp.com</p>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+
+<div class="u-row-container" style="padding: 30px;background-color: #f0f0f0">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
+    <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
+      <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 30px;background-color: #f0f0f0;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: transparent;"><![endif]-->
+      
+<!--[if (mso)|(IE)]><td align="center" width="600" style="width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
+<div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
+  <div style="width: 100% !important;">
+  <!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
+  
+<table style="font-family:'Lato',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
+  <tbody>
+    <tr>
+      <td style="overflow-wrap:break-word;word-break:break-word;padding:20px;font-family:'Lato',sans-serif;" align="left">
+        
+  <div style="line-height: 120%; text-align: left; word-wrap: break-word;">
+    <div style="font-family: arial, helvetica, sans-serif; text-align: center"><span style="font-size: 12px; color: #999999; line-height: 14.4px;">You received this email because you signed up for Zadala Inc.</span></div>
+<div style="font-family: arial, helvetica, sans-serif;">&nbsp;</div>
+  </div>
+
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+  <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
+  </div>
+</div>
+<!--[if (mso)|(IE)]></td><![endif]-->
+      <!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
+    </div>
+  </div>
+</div>
+
+
+    <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
+    </td>
+  </tr>
+  </tbody>
+  </table>
+  <!--[if mso]></div><![endif]-->
+  <!--[if IE]></div><![endif]-->
+</body>
+
+</html>
diff --git a/zadalaAPI/settings.py b/zadalaAPI/settings.py
index b551436..d7d9ae2 100644
--- a/zadalaAPI/settings.py
+++ b/zadalaAPI/settings.py
@@ -12,7 +12,14 @@
 import datetime
 import os
 
-from zadala_config import ZADALA_SECRET_KEY, database
+from zadala_config import (
+    EMAIL_HOST_PASSWORD,
+    EMAIL_HOST_PORT,
+    EMAIL_HOST_PROVIDER,
+    EMAIL_HOST_USER,
+    ZADALA_SECRET_KEY,
+    database,
+)
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
@@ -68,11 +75,12 @@
 STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
 
 ROOT_URLCONF = "zadalaAPI.urls"
+TEMPLATE_ROOT = os.path.join(BASE_DIR, "templates")
 
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [],
+        "DIRS": [TEMPLATE_ROOT],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
@@ -181,3 +189,10 @@
 STATIC_URL = "/static/"
 MEDIA_ROOT = os.path.join(BASE_DIR, "static/images")
 STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
+
+EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
+EMAIL_HOST = os.environ.get("EMAIL_HOST_PROVIDER", EMAIL_HOST_PROVIDER)
+EMAIL_PORT = os.environ.get("EMAIL_HOST_PORT", EMAIL_HOST_PORT)
+EMAIL_HOST_USER = os.environ.get("EMAIL_HOST_USER", EMAIL_HOST_USER)
+EMAIL_HOST_PASSWORD = os.environ.get("EMAIL_HOST_PASSWORD", EMAIL_HOST_PASSWORD)
+EMAIL_USE_TLS = True
diff --git a/zadala_config.py b/zadala_config.py
index 6aca6b7..7b30fc6 100644
--- a/zadala_config.py
+++ b/zadala_config.py
@@ -8,3 +8,9 @@
 }
 
 ZADALA_SECRET_KEY = "my-secret"
+
+
+EMAIL_HOST_PROVIDER = "smtp.gmail.com"
+EMAIL_HOST_PORT = 587
+EMAIL_HOST_USER = "gmail email"
+EMAIL_HOST_PASSWORD = "gmail password"