feat: add professional HTML email notification templates
Add three email templates for tenant notifications with consistent branding
and professional design:
1. email-validation-email.html - Email verification request
2. rent-due-email.html - Rent payment due reminder
3. utility-bills-due-email.html - Utility bills ready notification
All templates feature:
- Responsive 3-column layout with center content area
- rezije.app branding with logo and color scheme (#0070F3 blue, #3c3c3d header)
- Email client compatible table-based layouts with inline CSS
- Template variables for dynamic content (tenant name, location, amounts, etc.)
- Unsubscribe links and footer information
- Professional typography and spacing
Templates use ${variable} syntax for server-side replacement.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Knee Cola
143
sprints/email-validation-email.html
Normal file
143
sprints/email-validation-email.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Verify Your Email - rezije.app</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4;">
|
||||
<!-- Wrapper Table -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f4f4f4;">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<!-- Main Container Table (3 columns) -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
|
||||
<tr>
|
||||
<!-- Left Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
|
||||
<!-- Center Content Column -->
|
||||
<td width="80%" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
|
||||
<!-- Header with Logo -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 20px; background-color: #3c3c3d; border-radius: 8px 8px 0 0;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="width: 80px; vertical-align: middle; padding-right: 15px;">
|
||||
<img src="https://rezije.app/icon4.png" alt="rezije.app logo" style="display: block; border: none; max-width: 100%;">
|
||||
</td>
|
||||
<td style="vertical-align: middle; text-align: left;">
|
||||
<h1 style="margin: 0; font-size: 28px; color: #ffffff; font-weight: bold;">
|
||||
rezije.app
|
||||
</h1>
|
||||
<p style="margin: 5px 0 0 0; font-size: 14px; color: #BAE6FD;">
|
||||
Property Management Made Easy
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Content -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 30px 20px 30px;">
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Hello <strong>${location.tenantName}</strong>,
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
You have received this email because your landlord <strong>${ownerName}</strong> wants to us to send you rent and utility bills invoices for <strong>${location.name}</strong> each month.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
<strong>What is this all about?</strong><br>
|
||||
<strong>rezije.app</strong> is an online app which helps property owners manage expenses related to properties they lease.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
By sending rent and utility bills invoices via email, your landlord can ensure that you receive accurate and timely notifications about your payments, making it easier for both of you to keep track of your financial obligations.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
<strong>How many e-mails will I receive?</strong><br>
|
||||
E-mails are sent two times a month at most: once the rent is due, and once when all the utility bills ready.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
<strong>We need your confirmation</strong><br>
|
||||
Before we start sending you any bills via email, we would ask you for your permission.
|
||||
If you accept, please click the button below:
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="text-align: center; padding: 0 0 30px 0;">
|
||||
<a href="https://rezije.app/email/verify/${shareId}"
|
||||
style="display: inline-block; padding: 14px 40px; background-color: #5b5ba6 ; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: bold; border-radius: 6px; border: none;">
|
||||
I accept
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; line-height: 22px; color: #666666; text-align: center;">
|
||||
Or copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 0 0 20px 0; font-size: 13px; line-height: 20px; color: #0070F3; text-align: center; word-break: break-all;">
|
||||
https://rezije.app/email/verify/${shareId}
|
||||
</p>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<div style="border-top: 1px solid #E5E7EB;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 14px; line-height: 22px; color: #666666;">
|
||||
<strong>Don't want to receive these emails?</strong><br>
|
||||
You can ignore this email if you don't want to receive notifications. You can also unsubscribe at any time using the link included in every notification email.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Thank you!
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Footer -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 30px; text-align: center; background-color: #F9FAFB; border-radius: 0 0 8px 8px;">
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666;">
|
||||
<a href="https://rezije.app" target="_blank" style="color: #0070F3; text-decoration: none; font-weight: bold;">
|
||||
Visit rezije.app
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 12px; color: #999999;">
|
||||
© 2025 rezije.app. All rights reserved.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
|
||||
<!-- Right Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
145
sprints/rent-due-email.html
Normal file
145
sprints/rent-due-email.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rent Payment Due - rezije.app</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4;">
|
||||
<!-- Wrapper Table -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f4f4f4;">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<!-- Main Container Table (3 columns) -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
|
||||
<tr>
|
||||
<!-- Left Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
|
||||
<!-- Center Content Column -->
|
||||
<td width="80%" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
|
||||
<!-- Header with Logo -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 20px; background-color: #3c3c3d; border-radius: 8px 8px 0 0;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="width: 80px; vertical-align: middle; padding-right: 15px;">
|
||||
<img src="https://rezije.app/icon4.png" alt="rezije.app logo" style="display: block; border: none; max-width: 100%;">
|
||||
</td>
|
||||
<td style="vertical-align: middle; text-align: left;">
|
||||
<h1 style="margin: 0; font-size: 28px; color: #ffffff; font-weight: bold;">
|
||||
rezije.app
|
||||
</h1>
|
||||
<p style="margin: 5px 0 0 0; font-size: 14px; color: #BAE6FD;">
|
||||
Property Management Made Easy
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Content -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 30px 20px 30px;">
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Hello <strong>${location.tenantName}</strong>,
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 30px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
This is a friendly reminder that your rent payment for <strong>${location.name}</strong> is due on <strong>${rentDueDate}</strong>.
|
||||
</p>
|
||||
|
||||
<!-- Rent Amount Box -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 30px;">
|
||||
<tr>
|
||||
<td style="background-color: #F0F9FF; border-left: 4px solid #0070F3; padding: 20px; border-radius: 4px;">
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666; text-transform: uppercase; letter-spacing: 0.5px;">
|
||||
Amount Due
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 32px; font-weight: bold; color: #0070F3;">
|
||||
${rentAmount} ${currency}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 30px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
To view payment details and attach your proof of payment, please click the button below:
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="text-align: center; padding: 0 0 30px 0;">
|
||||
<a href="https://rezije.app/share/location/${shareId}"
|
||||
style="display: inline-block; padding: 14px 40px; background-color: #5b5ba6; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: bold; border-radius: 6px; border: none;">
|
||||
View Payment Details
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; line-height: 22px; color: #666666; text-align: center;">
|
||||
Or copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 0 0 20px 0; font-size: 13px; line-height: 20px; color: #0070F3; text-align: center; word-break: break-all;">
|
||||
https://rezije.app/share/location/${shareId}
|
||||
</p>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<div style="border-top: 1px solid #E5E7EB;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 14px; line-height: 22px; color: #666666;">
|
||||
If you have any questions or concerns about this payment, please contact your landlord <strong>${ownerName}</strong> directly.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Thank you!
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Footer -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 30px; text-align: center; background-color: #F9FAFB; border-radius: 0 0 8px 8px;">
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666;">
|
||||
<a href="https://rezije.app/email/unsubscribe/${shareId}" target="_blank" style="color: #0070F3; text-decoration: none; font-weight: bold;">
|
||||
Unsubscribe from these emails
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666;">
|
||||
<a href="https://rezije.app" target="_blank" style="color: #0070F3; text-decoration: none; font-weight: bold;">
|
||||
Visit rezije.app
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 12px; color: #999999;">
|
||||
© 2025 rezije.app. All rights reserved.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
|
||||
<!-- Right Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
145
sprints/utility-bills-due-email.html
Normal file
145
sprints/utility-bills-due-email.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Utility Bills Available - rezije.app</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4;">
|
||||
<!-- Wrapper Table -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f4f4f4;">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<!-- Main Container Table (3 columns) -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
|
||||
<tr>
|
||||
<!-- Left Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
|
||||
<!-- Center Content Column -->
|
||||
<td width="80%" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
|
||||
<!-- Header with Logo -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 20px; background-color: #3c3c3d; border-radius: 8px 8px 0 0;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="width: 80px; vertical-align: middle; padding-right: 15px;">
|
||||
<img src="https://rezije.app/icon4.png" alt="rezije.app logo" style="display: block; border: none; max-width: 100%;">
|
||||
</td>
|
||||
<td style="vertical-align: middle; text-align: left;">
|
||||
<h1 style="margin: 0; font-size: 28px; color: #ffffff; font-weight: bold;">
|
||||
rezije.app
|
||||
</h1>
|
||||
<p style="margin: 5px 0 0 0; font-size: 14px; color: #BAE6FD;">
|
||||
Property Management Made Easy
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Content -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 30px 20px 30px;">
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Hello <strong>${location.tenantName}</strong>,
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 30px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
All utility bills for <strong>${location.name}</strong> are now due.
|
||||
</p>
|
||||
|
||||
<!-- Notification Box -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 30px;">
|
||||
<tr>
|
||||
<td style="background-color: #F0F9FF; border-left: 4px solid #0070F3; padding: 20px; border-radius: 4px;">
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666; text-transform: uppercase; letter-spacing: 0.5px;">
|
||||
Total Amount Due
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 32px; font-weight: bold; color: #0070F3;">
|
||||
${totalAmount} ${currency}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 30px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
To view bills and payment information, please click the button below:
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="text-align: center; padding: 0 0 30px 0;">
|
||||
<a href="https://rezije.app/share/location/${shareId}"
|
||||
style="display: inline-block; padding: 14px 40px; background-color: #5b5ba6; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: bold; border-radius: 6px; border: none;">
|
||||
View Payment Details
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; line-height: 22px; color: #666666; text-align: center;">
|
||||
Or copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 0 0 20px 0; font-size: 13px; line-height: 20px; color: #0070F3; text-align: center; word-break: break-all;">
|
||||
https://rezije.app/share/location/${shareId}
|
||||
</p>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<div style="border-top: 1px solid #E5E7EB;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 14px; line-height: 22px; color: #666666;">
|
||||
If you have any questions or concerns, please contact your landlord <strong>${ownerName}</strong> directly.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Thank you!
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Footer -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 30px; text-align: center; background-color: #F9FAFB; border-radius: 0 0 8px 8px;">
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666;">
|
||||
<a href="https://rezije.app/email/unsubscribe/${shareId}" target="_blank" style="color: #0070F3; text-decoration: none; font-weight: bold;">
|
||||
Unsubscribe from these emails
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666;">
|
||||
<a href="https://rezije.app" target="_blank" style="color: #0070F3; text-decoration: none; font-weight: bold;">
|
||||
Visit rezije.app
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 12px; color: #999999;">
|
||||
© 2025 rezije.app. All rights reserved.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
|
||||
<!-- Right Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user