From 697b3fa5a828632a71616b731ee6afdb969407f8 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 20 Feb 2023 08:43:00 +0100
Subject: [PATCH] Refactor the email template HTML structure

---
 .../views/emails/account_recovery_email.php   |  16 ++-
 .../emails/appointment_deleted_email.php      | 103 ++++++++++++----
 .../views/emails/appointment_saved_email.php  | 110 +++++++++++++-----
 3 files changed, 174 insertions(+), 55 deletions(-)

diff --git a/application/views/emails/account_recovery_email.php b/application/views/emails/account_recovery_email.php
index b9dfd0ae..dc717624 100644
--- a/application/views/emails/account_recovery_email.php
+++ b/application/views/emails/account_recovery_email.php
@@ -21,16 +21,24 @@
     </div>
 
     <div id="content" style="padding: 10px 15px;">
-        <h2><?= $email_title ?></h2>
-        <p><?= $email_message ?></p>
+        <h2>
+            <?= $email_title ?>
+        </h2>
+        <p>
+            <?= $email_message ?>
+        </p>
     </div>
 
     <div id="footer" style="padding: 10px; text-align: center; margin-top: 10px;
                 border-top: 1px solid #EEE; background: #FAFAFA;">
         Powered by
-        <a href="https://easyappointments.org" style="text-decoration: none;">Easy!Appointments</a>
+        <a href="https://easyappointments.org" style="text-decoration: none;">
+            Easy!Appointments
+        </a>
         |
-        <a href="<?= $company_link ?>" style="text-decoration: none;"><?= $company_name ?></a>
+        <a href="<?= $company_link ?>" style="text-decoration: none;">
+            <?= $company_name ?>
+        </a>
     </div>
 </div>
 </body>
diff --git a/application/views/emails/appointment_deleted_email.php b/application/views/emails/appointment_deleted_email.php
index 0213f932..ee3dc292 100644
--- a/application/views/emails/appointment_deleted_email.php
+++ b/application/views/emails/appointment_deleted_email.php
@@ -29,63 +29,116 @@
     </div>
 
     <div id="content" style="padding: 10px 15px;">
-        <h2><?= lang('appointment_cancelled_title') ?></h2>
-        <p><?= lang('appointment_removed_from_schedule') ?></p>
+        <h2>
+            <?= lang('appointment_cancelled_title') ?>
+        </h2>
+        
+        <p>
+            <?= lang('appointment_removed_from_schedule') ?>
+        </p>
 
-        <h2><?= lang('appointment_details_title') ?></h2>
+        <h2>
+            <?= lang('appointment_details_title') ?>
+        </h2>
+        
         <table id="appointment-details">
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('service') ?></td>
-                <td style="padding: 3px;"><?= $appointment_service ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('service') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_service ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('provider') ?></td>
-                <td style="padding: 3px;"><?= $appointment_provider ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('provider') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_provider ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('start') ?></td>
-                <td style="padding: 3px;"><?= $appointment_date ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('start') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_date ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('duration') ?></td>
-                <td style="padding: 3px;"><?= $appointment_duration ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('duration') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_duration ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('timezone') ?></td>
-                <td style="padding: 3px;"><?= $appointment_timezone ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('timezone') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_timezone ?>
+                </td>
             </tr>
         </table>
 
         <h2><?= lang('customer_details_title') ?></h2>
         <table id="customer-details">
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('name') ?></td>
-                <td style="padding: 3px;"><?= $customer_name ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('name') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_name ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('email') ?></td>
-                <td style="padding: 3px;"><?= $customer_email ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('email') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_email ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('phone_number') ?></td>
-                <td style="padding: 3px;"><?= $customer_phone ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('phone_number') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_phone ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('address') ?></td>
-                <td style="padding: 3px;"><?= $customer_address ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('address') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_address ?>
+                </td>
             </tr>
         </table>
 
-        <h2><?= lang('reason') ?></h2>
-        <p><?= $reason ?></p>
+        <h2>
+            <?= lang('reason') ?>
+        </h2>
+        
+        <p>
+            <?= $reason ?>
+        </p>
     </div>
 
     <div id="footer" style="padding: 10px; text-align: center; margin-top: 10px;
                 border-top: 1px solid #EEE; background: #FAFAFA;">
         Powered by
-        <a href="https://easyappointments.org" style="text-decoration: none;">Easy!Appointments</a>
+        <a href="https://easyappointments.org" style="text-decoration: none;">
+            Easy!Appointments
+        </a>
         |
-        <a href="<?= $company_link ?>" style="text-decoration: none;"><?= $company_name ?></a>
+        <a href="<?= $company_link ?>" style="text-decoration: none;">
+            <?= $company_name ?>
+        </a>
     </div>
 </div>
 </body>
diff --git a/application/views/emails/appointment_saved_email.php b/application/views/emails/appointment_saved_email.php
index f32cecba..b3039e9c 100644
--- a/application/views/emails/appointment_saved_email.php
+++ b/application/views/emails/appointment_saved_email.php
@@ -32,63 +32,121 @@
     </div>
 
     <div id="content" style="padding: 10px 15px;">
-        <h2><?= $email_title ?></h2>
-        <p><?= $email_message ?></p>
+        <h2>
+            <?= $email_title ?>
+        </h2>
+        
+        <p>
+            <?= $email_message ?>
+        </p>
 
-        <h2><?= lang('appointment_details_title') ?></h2>
+        <h2>
+            <?= lang('appointment_details_title') ?>
+        </h2>
+        
         <table id="appointment-details">
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('service') ?></td>
-                <td style="padding: 3px;"><?= $appointment_service ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('service') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_service ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('provider') ?></td>
-                <td style="padding: 3px;"><?= $appointment_provider ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('provider') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_provider ?>
+                    
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('start') ?></td>
-                <td style="padding: 3px;"><?= $appointment_start_date ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('start') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_start_date ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('end') ?></td>
-                <td style="padding: 3px;"><?= $appointment_end_date ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('end') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_end_date ?>
+                    
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('timezone') ?></td>
-                <td style="padding: 3px;"><?= $appointment_timezone ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('timezone') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $appointment_timezone ?>
+                </td>
             </tr>
         </table>
 
-        <h2><?= lang('customer_details_title') ?></h2>
+        <h2>
+            <?= lang('customer_details_title') ?>
+        </h2>
+        
         <table id="customer-details">
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('name') ?></td>
-                <td style="padding: 3px;"><?= $customer_name ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('name') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_name ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('email') ?></td>
-                <td style="padding: 3px;"><?= $customer_email ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('email') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_email ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('phone_number') ?></td>
-                <td style="padding: 3px;"><?= $customer_phone ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('phone_number') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_phone ?>
+                </td>
             </tr>
             <tr>
-                <td class="label" style="padding: 3px;font-weight: bold;"><?= lang('address') ?></td>
-                <td style="padding: 3px;"><?= $customer_address ?></td>
+                <td class="label" style="padding: 3px;font-weight: bold;">
+                    <?= lang('address') ?>
+                </td>
+                <td style="padding: 3px;">
+                    <?= $customer_address ?>
+                </td>
             </tr>
         </table>
 
-        <h2><?= lang('appointment_link_title') ?></h2>
-        <a href="<?= $appointment_link ?>" style="width: 600px;"><?= $appointment_link ?></a>
+        <h2>
+            <?= lang('appointment_link_title') ?>
+        </h2>
+        
+        <a href="<?= $appointment_link ?>" style="width: 600px;">
+            <?= $appointment_link ?>
+        </a>
     </div>
 
     <div id="footer" style="padding: 10px; text-align: center; margin-top: 10px;
                 border-top: 1px solid #EEE; background: #FAFAFA;">
         Powered by
-        <a href="https://easyappointments.org" style="text-decoration: none;">Easy!Appointments</a>
+        <a href="https://easyappointments.org" style="text-decoration: none;">
+            Easy!Appointments
+        </a>
         |
-        <a href="<?= $company_link ?>" style="text-decoration: none;"><?= $company_name ?></a>
+        <a href="<?= $company_link ?>" style="text-decoration: none;">
+            <?= $company_name ?>
+        </a>
     </div>
 </div>
 </body>