monacousa-portal/server/templates/dues-due-soon.hbs

249 lines
19 KiB
Handlebars
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
2025-08-15 15:13:47 +02:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Annual Dues Payment Reminder - MonacoUSA</title>
</head>
2025-08-15 15:13:47 +02:00
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4;">
<!-- Main Container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; padding: 20px 0;">
<tr>
<td align="center">
<!-- Email Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
<!-- Header with Monaco Red Background -->
<tr>
<td style="background-color: #a31515; padding: 30px; text-align: center;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="{{logoUrl}}" alt="MonacoUSA" width="80" height="80" style="border-radius: 8px; margin-bottom: 15px;">
<h1 style="color: #ffffff; font-size: 28px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA</h1>
<p style="color: #ffffff; font-size: 16px; margin: 0; opacity: 0.9;">Annual Dues Payment Reminder</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Main Content -->
<tr>
<td style="padding: 40px 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<!-- Alert Banner -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 20px; border-radius: 4px;">
<h3 style="color: #856404; font-size: 18px; font-weight: bold; margin: 0 0 10px 0;">⏰ Payment Due Soon!</h3>
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
Your annual membership dues will be due in <strong>{{daysUntilDue}} days</strong>.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Greeting -->
<tr>
<td style="padding-bottom: 20px;">
<h2 style="color: #a31515; font-size: 20px; font-weight: bold; margin: 0;">Dear {{memberName}},</h2>
</td>
</tr>
<!-- Message -->
<tr>
<td style="padding-bottom: 30px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
This is a friendly reminder that your annual MonacoUSA membership dues will be due soon.
To ensure uninterrupted access to MonacoUSA benefits and avoid any service disruption,
please submit your payment before the due date.
</p>
</td>
</tr>
<!-- Member Information Box -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px;">
<tr>
<td style="padding: 25px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="text-align: center; padding-bottom: 15px;">
<span style="background-color: #17a2b8; color: #ffffff; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 14px;">📋 Member Information</span>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%" style="vertical-align: top; padding-right: 10px; padding-bottom: 10px;">
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Name:</p>
<p style="margin: 0; color: #a31515; font-weight: bold; font-size: 16px;">{{memberName}}</p>
</td>
<td width="50%" style="vertical-align: top; padding-left: 10px; padding-bottom: 10px;">
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Member ID:</p>
<p style="margin: 0; color: #a31515; font-weight: bold; font-size: 16px;">{{memberId}}</p>
</td>
</tr>
<tr>
<td width="50%" style="vertical-align: top; padding-right: 10px; padding-bottom: 10px;">
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Email:</p>
<p style="margin: 0; color: #333333; font-size: 14px;">{{memberEmail}}</p>
</td>
<td width="50%" style="vertical-align: top; padding-left: 10px; padding-bottom: 10px;">
<p style="margin: 0 0 5px 0; color: #333333; font-weight: bold;">Member Since:</p>
<p style="margin: 0; color: #333333; font-size: 14px;">{{memberSince}}</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Amount Due Section -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #e3f2fd; border-left: 4px solid #2196f3; padding: 25px; border-radius: 4px; text-align: center;">
<h3 style="color: #1976d2; font-size: 24px; font-weight: bold; margin: 0 0 10px 0;">Annual Dues: {{amount}}</h3>
<p style="color: #333333; font-size: 16px; margin: 0;">
<strong>Due Date:</strong> {{dueDate}}
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Payment Information -->
<tr>
<td style="padding-bottom: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #d1ecf1; border-left: 4px solid #17a2b8; padding: 20px; border-radius: 4px;">
<h3 style="color: #0c5460; font-size: 18px; font-weight: bold; margin: 0 0 15px 0;">💳 Payment Information</h3>
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
Membership fee is {{amount}}/yr per person, paid using the IBAN below:
</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 5px 0;">
<p style="margin: 0; color: #333333; font-weight: bold;">IBAN Euro:</p>
<p style="margin: 0; color: #333333; font-family: 'Courier New', monospace; font-size: 16px; background-color: #ffffff; padding: 8px; border-radius: 4px; border: 1px solid #dee2e6;">{{paymentIban}}</p>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<p style="margin: 0; color: #333333; font-weight: bold;">Account Holder:</p>
<p style="margin: 0; color: #333333; font-size: 16px;">{{accountHolder}}</p>
</td>
</tr>
<tr>
<td style="padding: 5px 0;">
<p style="margin: 0; color: #333333; font-weight: bold;">Payment Reference:</p>
<p style="margin: 0; color: #a31515; font-family: 'Courier New', monospace; font-size: 16px; font-weight: bold; background-color: #ffffff; padding: 8px; border-radius: 4px; border: 1px solid #dee2e6;">{{memberId}} - Annual Dues</p>
</td>
</tr>
</table>
<p style="color: #666666; font-size: 14px; font-style: italic; margin: 15px 0 0 0;">
<strong>Important:</strong> Please include your member ID ({{memberId}}) in the payment reference to ensure proper credit to your account.
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Help Message -->
<tr>
<td style="padding-bottom: 20px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
If you have already made your payment, please disregard this reminder.
If you have any questions about your membership or payment, please contact us at
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-weight: bold;">info@monacousa.org</a>.
</p>
</td>
</tr>
<!-- Closing -->
<tr>
<td style="padding-bottom: 20px;">
<p style="color: #333333; font-size: 16px; line-height: 1.6; margin: 0;">
Thank you for your continued membership with MonacoUSA!
</p>
<p style="color: #333333; font-size: 16px; margin: 15px 0 0 0;">
Best regards,<br>
<strong>The MonacoUSA Team</strong>
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f8f9fa; padding: 30px; text-align: center; border-top: 1px solid #e9ecef;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h4 style="color: #333333; font-size: 18px; font-weight: bold; margin: 0 0 8px 0;">MonacoUSA Association</h4>
<p style="color: #666666; font-size: 14px; margin: 0 0 15px 0;">Connecting Monaco and the United States</p>
<!-- Links -->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td style="padding: 0 10px;">
<a href="{{portalUrl}}" style="color: #a31515; text-decoration: none; font-size: 14px;">Portal</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="mailto:info@monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Contact Us</a>
</td>
<td style="padding: 0 10px; color: #cccccc;">|</td>
<td style="padding: 0 10px;">
<a href="https://monacousa.org" style="color: #a31515; text-decoration: none; font-size: 14px;">Website</a>
</td>
</tr>
</table>
<!-- Email Info -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 20px;">
<tr>
<td style="padding-top: 15px; border-top: 1px solid #dddddd;">
<p style="color: #999999; font-size: 12px; margin: 0;">
This is an automated message from MonacoUSA. Please do not reply to this email.<br>
© {{currentYear}} MonacoUSA. All rights reserved.<br>
If you no longer wish to receive these reminders, please contact us at info@monacousa.org
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>