@clink/emails 1.2.4 → 1.2.6

package/dist/layouts/base.mjml

@@ -1,132 +1,132 @@
-<mjml>
-  <mj-head>
-    <mj-font name="Arial" />
-    <mj-attributes>
-      <mj-all
-        font-family="Arial, sans-serif"
-        line-height="24px"
-        font-size="16px"
-        color="#222730"
-      />
-      <mj-wrapper background-color="#ffffff" />
-      <mj-divider
-        border-width="1px"
-        border-color="#dadada"
-        padding="16px 0px 8px 0px"
-      />
-      <mj-section padding="0px" />
-      <!-- <mj-text padding="0px 16px" /> -->
-      <mj-text padding="0px 24px" />
-      <!-- <mj-image padding="0px 16px" /> -->
-      <mj-image padding="0px 0px" />
-      <mj-table padding="0px 24px" />
-      <mj-button
-        border-radius="999px"
-        background-color="#FA3232"
-        color="#ffffff"
-        align="left"
-        font-size="16px"
-      />
-      <mj-accordion border="none" padding="1px" />
-      <mj-accordion-element
-        icon-wrapped-url="https://i.imgur.com/Xvw0vjq.png"
-        icon-unwrapped-url="https://i.imgur.com/KKHenWa.png"
-        icon-height="24px"
-        icon-width="24px"
-      />
-      <mj-accordion-title
-        font-family="Roboto, Open Sans, Helvetica, Arial, sans-serif"
-        background-color="#fff"
-        color="#031017"
-        padding="15px"
-        font-size="18px"
-      />
-      <mj-accordion-text
-        font-family="Open Sans, Helvetica, Arial, sans-serif"
-        background-color="#fafafa"
-        padding="15px"
-        color="#505050"
-        font-size="14px"
-      />
-    </mj-attributes>
-    <mj-style inline="inline">
-      .btn-link a { display: block; padding: 16px 24px; border-radius: 8px;
-      background-color: #FA3232; font-size: 16px; align: left; color: #ffffff; }
-    </mj-style>
-    <mj-style inline="inline">
-      .no-href-style a { text-decoration: none; color: inherit; }
-    </mj-style>
-    <mj-style inline="inline">
-      a, p, u, i, b, em, small, strong { line-height: 24px; } p { margin: 16px
-      0px; } p.small { line-height: 1; } p.big { line-height: 2; } a {
-      text-decoration: underline; } h1 { font-size: 39px; line-height: 110%;
-      font-weight: 700; margin: 0px 0px 24px; } h2 { font-size: 31px;
-      line-height: 110%; font-weight: 700; margin: 24px 0px 0px; } h3 {
-      font-size: 25px; line-height: 110%; font-weight: 700; margin: 24px 0px
-      0px; } h4 { font-size: 20px; line-height: 110%; font-weight: 700; margin:
-      24px 0px 0px; } h5 { font-size: 16px; line-height: 110%; font-weight: 700;
-      margin: 24px 0px 0px; } .table-header { margin-top: "8px" } .menuComment
-      p{ margin-top: 4px; margin-bottom: 4px; } .menuComment p:first-of-type. {
-      margin-top: 0px; } .menuComment p:last-of-type { margin-bottom: 0px; }
-      .bordered-col { box-shadow: 0 0 0 1px #E4EBF2; border-radius: 4px; }
-    </mj-style>
-    <mj-style>
-      .body-bordered { border-radius: 24px; max-width: 600px; margin: 0 auto;
-      outline: none; /* Ensure the border is visible */ } @media (min-width:
-      600px) { .body-bordered { border-radius: 24px; max-width: 600px; margin: 0
-      auto; margin-top: 40px; outline: 1px solid #D6D6D6 !important; } }
-      .discountBox div { border-width: 1px; border-style: dashed; border-color:
-      #FCBC42; }
-    </mj-style>
-  </mj-head>
-
-  <mj-body css-class="body-bordered" background-color: #FFFFFF>
-    <mj-wrapper padding="12px 0px">
-      <mj-section padding="24px 0px 0px">
-        <mj-column>
-          <mj-image
-            width="40px"
-            height="40px"
-            align="left"
-            src="https://ik.imagekit.io/nuento/logo/Logomark_Uj47FzOvV.png"
-            padding="0px 24px 8px"
-            alt="Nuento"
-          />
-        </mj-column>
-      </mj-section>
-
-      %CONTENT%
-
-      <mj-section>
-        <mj-column>
-          <mj-divider />
-        </mj-column>
-      </mj-section>
-
-      <mj-section>
-        <mj-column>
-          <mj-text padding="24px 24px 0px">
-            <b>[[strings.sentFrom]]</b>
-            <br />
-            Nuento Denmark ApS, CVR 39000725
-            <br />
-            Lundeborgvej 4, 9220 Aalborg
-          </mj-text>
-        </mj-column>
-      </mj-section>
-
-      <mj-section padding="32px 0px 0px">
-        <mj-column>
-          <mj-image
-            width="118px"
-            height="40px"
-            align="left"
-            src="https://ik.imagekit.io/nuento/logo/logo-40_5iYF6s3Jp.png"
-            padding="0px 24px 24px"
-            alt="Nuento"
-          />
-        </mj-column>
-      </mj-section>
-    </mj-wrapper>
-  </mj-body>
-</mjml>
+<mjml>
+  <mj-head>
+    <mj-font name="Arial" />
+    <mj-attributes>
+      <mj-all
+        font-family="Arial, sans-serif"
+        line-height="24px"
+        font-size="16px"
+        color="#222730"
+      />
+      <mj-wrapper background-color="#ffffff" />
+      <mj-divider
+        border-width="1px"
+        border-color="#dadada"
+        padding="16px 0px 8px 0px"
+      />
+      <mj-section padding="0px" />
+      <!-- <mj-text padding="0px 16px" /> -->
+      <mj-text padding="0px 24px" />
+      <!-- <mj-image padding="0px 16px" /> -->
+      <mj-image padding="0px 0px" />
+      <mj-table padding="0px 24px" />
+      <mj-button
+        border-radius="999px"
+        background-color="#FA3232"
+        color="#ffffff"
+        align="left"
+        font-size="16px"
+      />
+      <mj-accordion border="none" padding="1px" />
+      <mj-accordion-element
+        icon-wrapped-url="https://i.imgur.com/Xvw0vjq.png"
+        icon-unwrapped-url="https://i.imgur.com/KKHenWa.png"
+        icon-height="24px"
+        icon-width="24px"
+      />
+      <mj-accordion-title
+        font-family="Roboto, Open Sans, Helvetica, Arial, sans-serif"
+        background-color="#fff"
+        color="#031017"
+        padding="15px"
+        font-size="18px"
+      />
+      <mj-accordion-text
+        font-family="Open Sans, Helvetica, Arial, sans-serif"
+        background-color="#fafafa"
+        padding="15px"
+        color="#505050"
+        font-size="14px"
+      />
+    </mj-attributes>
+    <mj-style inline="inline">
+      .btn-link a { display: block; padding: 16px 24px; border-radius: 8px;
+      background-color: #FA3232; font-size: 16px; align: left; color: #ffffff; }
+    </mj-style>
+    <mj-style inline="inline">
+      .no-href-style a { text-decoration: none; color: inherit; }
+    </mj-style>
+    <mj-style inline="inline">
+      a, p, u, i, b, em, small, strong { line-height: 24px; } p { margin: 16px
+      0px; } p.small { line-height: 1; } p.big { line-height: 2; } a {
+      text-decoration: underline; } h1 { font-size: 39px; line-height: 110%;
+      font-weight: 700; margin: 0px 0px 24px; } h2 { font-size: 31px;
+      line-height: 110%; font-weight: 700; margin: 24px 0px 0px; } h3 {
+      font-size: 25px; line-height: 110%; font-weight: 700; margin: 24px 0px
+      0px; } h4 { font-size: 20px; line-height: 110%; font-weight: 700; margin:
+      24px 0px 0px; } h5 { font-size: 16px; line-height: 110%; font-weight: 700;
+      margin: 24px 0px 0px; } .table-header { margin-top: "8px" } .menuComment
+      p{ margin-top: 4px; margin-bottom: 4px; } .menuComment p:first-of-type. {
+      margin-top: 0px; } .menuComment p:last-of-type { margin-bottom: 0px; }
+      .bordered-col { box-shadow: 0 0 0 1px #E4EBF2; border-radius: 4px; }
+    </mj-style>
+    <mj-style>
+      .body-bordered { border-radius: 24px; max-width: 600px; margin: 0 auto;
+      outline: none; /* Ensure the border is visible */ } @media (min-width:
+      600px) { .body-bordered { border-radius: 24px; max-width: 600px; margin: 0
+      auto; margin-top: 40px; outline: 1px solid #D6D6D6 !important; } }
+      .discountBox div { border-width: 1px; border-style: dashed; border-color:
+      #FCBC42; }
+    </mj-style>
+  </mj-head>
+
+  <mj-body css-class="body-bordered" background-color: #FFFFFF>
+    <mj-wrapper padding="12px 0px">
+      <mj-section padding="24px 0px 0px">
+        <mj-column>
+          <mj-image
+            width="40px"
+            height="40px"
+            align="left"
+            src="https://ik.imagekit.io/nuento/logo/Logomark_Uj47FzOvV.png"
+            padding="0px 24px 8px"
+            alt="Nuento"
+          />
+        </mj-column>
+      </mj-section>
+
+      %CONTENT%
+
+      <mj-section>
+        <mj-column>
+          <mj-divider />
+        </mj-column>
+      </mj-section>
+
+      <mj-section>
+        <mj-column>
+          <mj-text padding="24px 24px 0px">
+            <b>[[strings.sentFrom]]</b>
+            <br />
+            [[strings.companyName]]
+            <br />
+            [[strings.companyAddress]]
+          </mj-text>
+        </mj-column>
+      </mj-section>
+
+      <mj-section padding="32px 0px 0px">
+        <mj-column>
+          <mj-image
+            width="118px"
+            height="40px"
+            align="left"
+            src="https://ik.imagekit.io/nuento/logo/logo-40_5iYF6s3Jp.png"
+            padding="0px 24px 24px"
+            alt="Nuento"
+          />
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+  </mj-body>
+</mjml>

package/dist/layouts/da.json

@@ -1,4 +1,6 @@
-{
-  "strings.sentFrom": "Sendt fra",
-  "urls.root": "https://nuento.dk"
-}
+{
+  "strings.sentFrom": "Sendt fra",
+  "strings.companyName": "Nuento Denmark ApS, CVR 39000725",
+  "strings.companyAddress": "Lundeborgvej 4, 9220 Aalborg",
+  "urls.root": "https://nuento.dk"
+}

package/dist/layouts/en.json

@@ -1,4 +1,6 @@
-{
-  "strings.sentFrom": "Sent from",
-  "urls.root": "https://nuento.co.uk"
-}
+{
+  "strings.sentFrom": "Sent from",
+  "strings.companyName": "Nuento · nuento.co.uk",
+  "strings.companyAddress": "Operated by Nuento Denmark",
+  "urls.root": "https://nuento.co.uk"
+}

package/dist/templates/buyer/checkout-link/da.json

@@ -1,7 +1,8 @@
 {
   "subject": "Bestillingslink fra {{collection.title}}",
-  "greeting": "Hej {{ user.name }},",
-  "body": "{{collection.title}} har sendt dig et bestillingslink. Klik på knappen nedenfor for at gennemføre din bestilling.",
-  "button_order": "Gå til bestilling",
-  "contact_text": "Har du spørgsmål? Kontakt leverandøren på tlf."
+  "intro": "Du modtager, efter aftale med {{{ collection.title }}}, et link til bestilling.",
+  "go_to_order_button": "Gå til bestilling",
+  "checkout_description": "På dette link kan du gennemføre din bestilling.",
+  "questions_heading": "Har du spørgsmål til bestillingen?",
+  "questions_body": "Så giv mig et kald på tlf. <a href=\"tel:{{supplier.phone}}\">{{supplier.phoneFormatted}}</a>."
 }

package/dist/templates/buyer/checkout-link/en.json

@@ -1,7 +1,8 @@
 {
   "subject": "Order link from {{collection.title}}",
-  "greeting": "Hi {{ user.name }},",
-  "body": "{{collection.title}} has sent you an order link. Click the button below to complete your order.",
-  "button_order": "Go to order",
-  "contact_text": "Have questions? Contact the supplier at"
+  "intro": "As agreed with {{{ collection.title }}}, you are receiving a link to place your order.",
+  "go_to_order_button": "Go to order",
+  "checkout_description": "You can complete your order using this link.",
+  "questions_heading": "Do you have questions about the order?",
+  "questions_body": "Give me a call on tel. <a href=\"tel:{{supplier.phone}}\">{{supplier.phoneFormatted}}</a>."
 }

package/dist/templates/buyer/checkout-link/template.mjml

@@ -1,24 +1,43 @@
-<mj-section padding-bottom="10px">
+<mj-section padding-top="20px">
+    <mj-column>
+        <mj-text>
+            <p>[[intro]]</p>
+        </mj-text>
+    </mj-column>
+</mj-section>
+
+<mj-section>
   <mj-column>
-    <mj-text>
-      <p>[[greeting]]</p>
-      <p>[[body]]</p>
-    </mj-text>
+    <mj-button css-class="btn-link" align="left" font-size="18px" font-weight="bold" color="#ffffff" background-color="#11141A" href="{{{ checkoutLink }}}">
+      [[go_to_order_button]]
+    </mj-button>
   </mj-column>
 </mj-section>
 
+<mj-section>
+    <mj-column>
+        <mj-text>
+            <p>[[checkout_description]]</p>
+        </mj-text>
+    </mj-column>
+</mj-section>
+
 <mj-section>
   <mj-column>
-    <mj-button css-class="btn-link" href="{{{ checkoutLink }}}">
-      [[button_order]]
-    </mj-button>
+    <mj-divider />
   </mj-column>
 </mj-section>
 
-<mj-section padding-top="10px">
+
+<mj-section padding-top="10px" padding-bottom="10px">
   <mj-column>
     <mj-text>
-      <p>[[contact_text]] <a href="tel:{{ supplier.phone }}">{{ supplier.phoneFormatted }}</a></p>
+      <p>
+        <font size="4"><b>[[questions_heading]]</b></font>
+      </p>
+      <p>
+        [[questions_body]]
+      </p>
     </mj-text>
   </mj-column>
 </mj-section>

package/dist/templates/buyer/deposit-captured/da.json

@@ -1,14 +1,13 @@
 {
   "subject": "Depositum trukket – {{place.title}}",
-  "greeting": "Hej {{ user.firstName }},",
-  "body": "Depositummet for din booking hos {{place.title}} er blevet trukket.",
-  "booking_label": "Booking",
-  "checkin_label": "Check-in:",
-  "checkout_label": "Check-ud:",
-  "deposit_captured_label": "Trukket beløb:",
-  "deposit_total_label": "Depositum i alt:",
-  "date_label": "Dato:",
-  "card_label": "Betalingskort:",
-  "reason_label": "Begrundelse",
-  "contact_text": "Har du spørgsmål? Kontakt udlejeren:"
+  "greeting": "Hej {{ host_firstname }},",
+  "intro": "{{ place_title }} har pr. {{ deposit_collected_date }} opkrævet betaling via et reserveret depositum. Se information nedenfor.",
+  "booking_id_label": "Booking ID:",
+  "check_in": "Check ind",
+  "check_out": "Check ud",
+  "amount_collected": "Beløb opkrævet:",
+  "payout_info": "Beløbet vil fremgå af din næste udbetalingsopgørelse.",
+  "contact_info": "Har du spørgsmål til denne opkrævning; kontakt Andreas på tlf. <a href=\"tel:+4520275781\">20 27 57 81</a>.",
+  "regards": "Venlig hilsen",
+  "team_name": "Nuento-teamet"
 }

package/dist/templates/buyer/deposit-captured/en.json

@@ -1,14 +1,13 @@
 {
   "subject": "Deposit captured – {{place.title}}",
-  "greeting": "Hi {{ user.firstName }},",
-  "body": "The deposit for your booking at {{place.title}} has been captured.",
-  "booking_label": "Booking",
-  "checkin_label": "Check-in:",
-  "checkout_label": "Check-out:",
-  "deposit_captured_label": "Amount captured:",
-  "deposit_total_label": "Total deposit:",
-  "date_label": "Date:",
-  "card_label": "Payment card:",
-  "reason_label": "Reason",
-  "contact_text": "Have questions? Contact the host:"
+  "greeting": "Hi {{ host_firstname }},",
+  "intro": "{{ place_title }} has as of {{ deposit_collected_date }} collected payment via a reserved deposit. See details below.",
+  "booking_id_label": "Booking ID:",
+  "check_in": "Check in",
+  "check_out": "Check out",
+  "amount_collected": "Amount collected:",
+  "payout_info": "The amount will appear on your next payout statement.",
+  "contact_info": "If you have questions about this charge, contact Andreas at tel. <a href=\"tel:+4520275781\">20 27 57 81</a>.",
+  "regards": "Kind regards",
+  "team_name": "The Nuento team"
 }

package/dist/templates/buyer/deposit-captured/template.mjml

@@ -1,61 +1,46 @@
-<mj-section padding-bottom="10px">
-  <mj-column>
-    <mj-text>
-      <p>[[greeting]]</p>
-      <p>[[body]]</p>
-    </mj-text>
-  </mj-column>
+<mj-section padding-bottom="20px">
+    <mj-column>
+        <mj-text>
+             <p><font size="3"><b>[[greeting]]</b></font></p>
+            <p>[[intro]]</p>
+        </mj-text>
+    </mj-column>
 </mj-section>
 
-<mj-section padding-bottom="10px">
-  <mj-column>
-    <mj-text>
-      <p><b>[[booking_label]]</b> #{{ booking.id }}<br>
-      <b>[[checkin_label]]</b> {{ booking.checkinDate }}<br>
-      <b>[[checkout_label]]</b> {{ booking.checkoutDate }}</p>
-    </mj-text>
-  </mj-column>
+<mj-section background-color="#4170d4" padding-top="10px" padding-bottom="10px">
+    <mj-column>
+        <mj-text color="#ffffff">
+            <h3>{{ guest_full_name }}</h3>
+            <p>[[booking_id_label]] {{ booking_id }}</p>
+        </mj-text>
+        <mj-table color="#ffffff">
+          <tr>
+            <td>[[check_in]]</td>
+            <td>[[check_out]]</td>
+          </tr>
+          <tr>
+            <td><font size="4"><b>{{ booking_checkin_date }}</b></font></td>
+            <td><font size="4"><b>{{ booking_checkout_date }}</b></font></td>
+          </tr>
+          <tr>
+            <td>{{ booking_checkin_time }}</td>
+            <td>{{ booking_checkout_time }}</td>
+          </tr>
+        </mj-table>
+        <mj-text color="#ffffff">
+            <p>[[amount_collected]] <strong>{{ booking_deposit_collected_amount }}</strong></p>
+        </mj-text>
+    </mj-column>
 </mj-section>
 
-<mj-section>
-  <mj-column>
-    <mj-divider />
-  </mj-column>
-</mj-section>
-
-<mj-section padding-top="10px" padding-bottom="10px">
-  <mj-column>
-    <mj-text>
-      <p><b>[[deposit_captured_label]]</b> {{ invoice_transaction.depositCapturedAmount }}<br>
-      <b>[[deposit_total_label]]</b> {{ invoice_transaction.depositAmount }}<br>
-      <b>[[date_label]]</b> {{ invoice_transaction.createdAtDate }}<br>
-      <b>[[card_label]]</b> {{ booking.paymentCard }}</p>
-    </mj-text>
-  </mj-column>
-</mj-section>
-
-<mj-raw>{{#if depositReason}}</mj-raw>
-<mj-section padding-bottom="10px">
-  <mj-column>
-    <mj-text>
-      <p><b>[[reason_label]]</b><br>{{{ depositReason }}}</p>
-    </mj-text>
-  </mj-column>
-</mj-section>
-<mj-raw>{{/if}}</mj-raw>
-
-<mj-section>
-  <mj-column>
-    <mj-divider />
-  </mj-column>
-</mj-section>
+<mj-section padding-top="20px" padding-bottom="20px">
+    <mj-column>
+        <mj-text>
+            <p>[[payout_info]]</p>
+            <p>[[contact_info]]</p>
+            <p style="margin-top: 30px; margin-bottom: 0">[[regards]]</p>
+            <p>[[team_name]]</p>
+        </mj-text>
 
-<mj-section padding-top="10px">
-  <mj-column>
-    <mj-text>
-      <p>[[contact_text]]<br>
-      {{ collection.phone }}<br>
-      {{ collection.email }}</p>
-    </mj-text>
-  </mj-column>
+    </mj-column>
 </mj-section>

package/dist/templates/buyer/deposit-not-reserved/da.json

@@ -1,10 +1,9 @@
 {
   "subject": "Depositum kunne ikke reserveres – {{collection.title}}",
   "greeting": "Hej {{ user.name }},",
-  "body": "Vi kunne desværre ikke reservere depositummet for din booking hos {{collection.title}}. Kontrollér venligst, at dit betalingskort er gyldigt og har tilstrækkelig dækning.",
-  "amount_label": "Depositum:",
-  "card_label": "Betalingskort:",
-  "date_label": "Dato:",
-  "checkin_label": "Check-in:",
-  "contact_text": "Har du spørgsmål? Kontakt udlejeren:"
+  "intro": "I forbindelse med din booking hos {{collection.title}} den {{order_place.checkInAtDate}} har vi i dag forsøgt at reservere et depositum på dit anvendte betalingskort. Denne reservation er fejlet.",
+  "deposit_failed_heading": "Reservation af depositum mislykkedes \u274c",
+  "contact_supplier_notice": "Du bedes hurtigst muligt kontakte {{collection.title}} for at lave en ny aftale vedrørende medbringelse depositum.",
+  "contact_person_heading": "Kontaktperson",
+  "phone_label": "Tlf."
 }

package/dist/templates/buyer/deposit-not-reserved/en.json

@@ -1,10 +1,9 @@
 {
   "subject": "Deposit could not be reserved – {{collection.title}}",
   "greeting": "Hi {{ user.name }},",
-  "body": "Unfortunately, we were unable to reserve the deposit for your booking at {{collection.title}}. Please check that your payment card is valid and has sufficient funds.",
-  "amount_label": "Deposit:",
-  "card_label": "Payment card:",
-  "date_label": "Date:",
-  "checkin_label": "Check-in:",
-  "contact_text": "Have questions? Contact the host:"
+  "intro": "In connection with your booking at {{collection.title}} on {{order_place.checkInAtDate}}, we attempted to reserve a deposit on your payment card today. This reservation has failed.",
+  "deposit_failed_heading": "Deposit reservation failed \u274c",
+  "contact_supplier_notice": "Please contact {{collection.title}} as soon as possible to make a new arrangement regarding the deposit.",
+  "contact_person_heading": "Contact person",
+  "phone_label": "Tel."
 }

package/dist/templates/buyer/deposit-not-reserved/template.mjml

@@ -1,36 +1,49 @@
 <mj-section padding-bottom="10px">
-  <mj-column>
-    <mj-text>
-      <p>[[greeting]]</p>
-      <p>[[body]]</p>
-    </mj-text>
-  </mj-column>
+    <mj-column>
+        <mj-text>
+             <p><font size="3"><b>[[greeting]]</b></font></p>
+            <p>[[intro]]</p>
+        </mj-text>
+    </mj-column>
 </mj-section>
 
-<mj-section padding-bottom="10px">
+<mj-section background-color="#FFE5EB" padding-top="10px">
   <mj-column>
     <mj-text>
-      <p><b>[[amount_label]]</b> {{ order.depositAmount }}<br>
-      <b>[[card_label]]</b> {{ paymentCard }}<br>
-      <b>[[date_label]]</b> {{ order.depositDate }}<br>
-      <b>[[checkin_label]]</b> {{ order_place.checkInAtDate }}</p>
+      <p>
+        <font size="3"><b>[[deposit_failed_heading]]</b></font>
+      </p>
     </mj-text>
   </mj-column>
 </mj-section>
 
-<mj-section>
+<mj-section background-color="#FFE5EB" padding-bottom="20px">
   <mj-column>
-    <mj-divider />
+    <mj-table font-size="14px">
+      <tr>
+        <td align="left" width="50%">
+          {{ paymentCard }}
+        </td>
+        <td align="right" width="50%">
+            <b>{{ order.depositAmount }}</b>
+        </td>
+      </tr>
+      <tr>
+        <td align="left">{{ order.depositDate }}</td>
+      </tr>
+    </mj-table>
   </mj-column>
 </mj-section>
 
-<mj-section padding-top="10px">
-  <mj-column>
-    <mj-text>
-      <p>[[contact_text]]<br>
-      {{ collection.contact.name }}<br>
-      {{ collection.contact.phone }}<br>
-      {{ collection.contact.email }}</p>
-    </mj-text>
-  </mj-column>
+<mj-section padding-bottom="10px" padding-top="10px">
+    <mj-column>
+        <mj-text>
+            <p><b>[[contact_supplier_notice]]</b></p>
+            <h3>[[contact_person_heading]]</h3>
+            <p>{{collection.contact.name}}
+            <br>[[phone_label]] {{collection.contact.phone}}
+            <br>{{collection.contact.email}}</p>
+        </mj-text>
+    </mj-column>
 </mj-section>
+