From e38df305c4284689749c3ae6c394649ad758c55d Mon Sep 17 00:00:00 2001
From: PCoder <purple.coder@yahoo.co.uk>
Date: Sat, 2 Sep 2017 22:08:25 +0530
Subject: [PATCH] New VM email template updated

---
 hosting/locale/de/LC_MESSAGES/django.po       |  31 +++-
 .../hosting/emails/new_booked_vm.html         | 151 ++----------------
 .../hosting/emails/new_booked_vm.txt          | 150 ++---------------
 hosting/views.py                              |  10 +-
 4 files changed, 59 insertions(+), 283 deletions(-)

diff --git a/hosting/locale/de/LC_MESSAGES/django.po b/hosting/locale/de/LC_MESSAGES/django.po
index 8ee04632..86af85f3 100644
--- a/hosting/locale/de/LC_MESSAGES/django.po
+++ b/hosting/locale/de/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-09-02 11:16+0000\n"
+"POT-Creation-Date: 2017-09-02 15:26+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -193,6 +193,31 @@ msgstr "Meine Einstellungen"
 msgid "Support / Contact"
 msgstr "Support / Kontakt"
 
+#, python-format
+msgid ""
+"You have ordered a new virtual machine!<br/>\n"
+"Your order of [%(vm.name)s] has been charged.<br/><br/>\n"
+"You can view your invoice by clicking the button below.<br/><br/>\n"
+msgstr ""
+"Du hast eine neue virtuelle Maschine bestellt!<br/>\n"
+"Deine Bestellung von [%(vm.name)s] wurde erhoben.<br/><br/>\n"
+"Um die Rechnung zu sehen, klicke auf den Button unten.<br/><br/>\n"
+
+msgid "View Invoice"
+msgstr "Zur Rechnung"
+
+#, python-format
+msgid ""
+"You have ordered a new virtual machine!\n"
+"Your order of [%(vm.name)s] has been charged.\n"
+"\n"
+"You can view your invoice by clicking the link below.\n"
+"\n"
+msgstr ""
+"Du hast eine neue virtuelle Maschine bestellt!\n"
+"Deine Bestellung von [%(vm.name)s] wurde erhoben.\n\n"
+"Um die Rechnung zu sehen, klicke auf den Button unten.\n\n"
+
 msgid "Password Reset"
 msgstr "Passwort zurücksetzen"
 
@@ -535,6 +560,10 @@ msgstr ""
 msgid "Invalid credit card"
 msgstr "Ungültige Kreditkarte"
 
+#, python-brace-format
+msgid "Your New VM {vm_name} at Data Center Light"
+msgstr "Deine neue VM {vm_name} bei Data Center Light"
+
 msgid "Confirm Order"
 msgstr "Bestellung Bestätigen"
 
diff --git a/hosting/templates/hosting/emails/new_booked_vm.html b/hosting/templates/hosting/emails/new_booked_vm.html
index 0f9b4f6e..34a500bb 100644
--- a/hosting/templates/hosting/emails/new_booked_vm.html
+++ b/hosting/templates/hosting/emails/new_booked_vm.html
@@ -1,140 +1,13 @@
-{% load static from staticfiles %}
-<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Oxygen Invoice</title>
-</head>
-<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
-<style type="text/css">
-@media only screen and (max-width: 480px) {
-  table[class*="container-for-gmail-android"] {
-    min-width: 290px !important; width: 100% !important;
-  }
-  img[class="force-width-gmail"] {
-    display: none !important; width: 0 !important; height: 0 !important;
-  }
-  table[class="w320"] {
-    width: 320px !important;
-  }
-  td[class*="mobile-header-padding-left"] {
-    width: 160px !important; padding-left: 0 !important;
-  }
-  td[class*="mobile-header-padding-right"] {
-    width: 160px !important; padding-right: 0 !important;
-  }
-  td[class="header-lg"] {
-    font-size: 24px !important; padding-bottom: 5px !important;
-  }
-  td[class="content-padding"] {
-    padding: 5px 0 5px !important;
-  }
-  td[class="button"] {
-    padding: 5px 5px 30px !important;
-  }
-  td[class*="free-text"] {
-    padding: 10px 18px 30px !important;
-  }
-  td[class~="mobile-hide-img"] {
-    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
-  }
-  td[class~="item"] {
-    width: 140px !important; vertical-align: top !important;
-  }
-  td[class~="quantity"] {
-    width: 50px !important;
-  }
-  td[class~="price"] {
-    width: 90px !important;
-  }
-  td[class="item-table"] {
-    padding: 30px 20px !important;
-  }
-  td[class="mini-container-left"] {
-    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
-  }
-  td[class="mini-container-right"] {
-    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
-  }
-}
-</style>
-<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
-      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
-            <!--[if gte mso 9]>
-            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
-              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
-              <v:textbox inset="0,0,0,0">
-            <![endif]-->
-              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
-                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static "hosting/img/logo_black.png" %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
-                    </td>
-                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
-                    </td>
-                  </tr></table>
-</center>
-              <!--[if gte mso 9]>
-              </v:textbox>
-            </v:rect>
-            <![endif]-->
-            </td>
-          </tr></table>
-</center>
-    </td>
-  </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
-      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
-              You have booked a virtual machine!
-            </td>
-          </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
-             Your virtual machine {{vm.name}} subscription has been charged, 
-             <br/>
-             we are going to contact you as soon your virtual machine has been activated.
-             <br/> 
-             You can view your invoice clicking on the button below. 
-            </td>
-          </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
-              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<!--[if mso]>
-                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
-                  <w:anchorlock/>
-                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
-                </v:roundrect>
-              <![endif]--><a href="{{ base_url }}{% url 'hosting:orders' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">View Invoice</a>
+{% extends "datacenterlight/emails/base_email_datacenterlight.html" %}
+{% load i18n %}
+{% block email_head %}{{page_header}}{% endblock %}
+{% block email_body %}
+{% url 'hosting:orders' order.id as order_url %}
+{% blocktrans %}You have ordered a new virtual machine!<br/>
+Your order of [{{vm.name}}] has been charged.<br/><br/>
+You can view your invoice by clicking the button below.<br/><br/>
+{% endblocktrans %}
+<div class="button" style="border-collapse: collapse; font-family: 'Lato', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+    <a href="{{ base_url }}{{order_url}}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">{% trans 'View Invoice' %}</a>
 </div>
-            </td>
-          </tr>
-</table>
-</center>
-    </td>
-  </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
-      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
-              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-</td>
-          </tr></table>
-</center>
-    </td>
-  </tr>
-</table>
-</body>
-</html>
-
+{% endblock %}
diff --git a/hosting/templates/hosting/emails/new_booked_vm.txt b/hosting/templates/hosting/emails/new_booked_vm.txt
index 0f9b4f6e..1e7f8aac 100644
--- a/hosting/templates/hosting/emails/new_booked_vm.txt
+++ b/hosting/templates/hosting/emails/new_booked_vm.txt
@@ -1,140 +1,12 @@
-{% load static from staticfiles %}
-<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Oxygen Invoice</title>
-</head>
-<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
-<style type="text/css">
-@media only screen and (max-width: 480px) {
-  table[class*="container-for-gmail-android"] {
-    min-width: 290px !important; width: 100% !important;
-  }
-  img[class="force-width-gmail"] {
-    display: none !important; width: 0 !important; height: 0 !important;
-  }
-  table[class="w320"] {
-    width: 320px !important;
-  }
-  td[class*="mobile-header-padding-left"] {
-    width: 160px !important; padding-left: 0 !important;
-  }
-  td[class*="mobile-header-padding-right"] {
-    width: 160px !important; padding-right: 0 !important;
-  }
-  td[class="header-lg"] {
-    font-size: 24px !important; padding-bottom: 5px !important;
-  }
-  td[class="content-padding"] {
-    padding: 5px 0 5px !important;
-  }
-  td[class="button"] {
-    padding: 5px 5px 30px !important;
-  }
-  td[class*="free-text"] {
-    padding: 10px 18px 30px !important;
-  }
-  td[class~="mobile-hide-img"] {
-    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
-  }
-  td[class~="item"] {
-    width: 140px !important; vertical-align: top !important;
-  }
-  td[class~="quantity"] {
-    width: 50px !important;
-  }
-  td[class~="price"] {
-    width: 90px !important;
-  }
-  td[class="item-table"] {
-    padding: 30px 20px !important;
-  }
-  td[class="mini-container-left"] {
-    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
-  }
-  td[class="mini-container-right"] {
-    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
-  }
-}
-</style>
-<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
-      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
-            <!--[if gte mso 9]>
-            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
-              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
-              <v:textbox inset="0,0,0,0">
-            <![endif]-->
-              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
-                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static "hosting/img/logo_black.png" %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
-                    </td>
-                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
-                    </td>
-                  </tr></table>
-</center>
-              <!--[if gte mso 9]>
-              </v:textbox>
-            </v:rect>
-            <![endif]-->
-            </td>
-          </tr></table>
-</center>
-    </td>
-  </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
-      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
-              You have booked a virtual machine!
-            </td>
-          </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
-             Your virtual machine {{vm.name}} subscription has been charged, 
-             <br/>
-             we are going to contact you as soon your virtual machine has been activated.
-             <br/> 
-             You can view your invoice clicking on the button below. 
-            </td>
-          </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
-              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<!--[if mso]>
-                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
-                  <w:anchorlock/>
-                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
-                </v:roundrect>
-              <![endif]--><a href="{{ base_url }}{% url 'hosting:orders' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">View Invoice</a>
-</div>
-            </td>
-          </tr>
-</table>
-</center>
-    </td>
-  </tr>
-<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
-      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
-              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-</td>
-          </tr></table>
-</center>
-    </td>
-  </tr>
-</table>
-</body>
-</html>
+{% extends "datacenterlight/emails/base_email_datacenterlight.txt" %}
+{% load i18n %}
+{% block email_head %}{{page_header}}{% endblock %}
+{% block email_body %}
+{% blocktrans %}You have ordered a new virtual machine!
+Your order of [{{vm.name}}] has been charged.
 
+You can view your invoice by clicking the link below.
+
+{% endblocktrans %}
+{{ base_url }}{{order_url}}
+{% endblock %}
diff --git a/hosting/views.py b/hosting/views.py
index a5743e44..d24f18f9 100644
--- a/hosting/views.py
+++ b/hosting/views.py
@@ -652,16 +652,18 @@ class PaymentVMView(LoginRequiredMixin, FormView):
 
             vm = VirtualMachineSerializer(manager.get_vm(vm_id)).data
 
-            # Send notification to ungleich as soon as VM has been booked
+            # Send notification to the user as soon as VM has been booked
             context = {
                 'vm': vm,
                 'order': order,
                 'base_url': "{0}://{1}".format(request.scheme,
-                                               request.get_host())
-
+                                               request.get_host()),
+                'page_header': _(
+                    'Your New VM {vm_name} at Data Center Light'.format(
+                        vm_name=vm.name))
             }
             email_data = {
-                'subject': 'New VM request',
+                'subject': context.get('page_header'),
                 'to': request.user.email,
                 'context': context,
                 'template_name': 'new_booked_vm',