monacousa-portal/supabase/migrations/015_fix_email_template_styling.sql

-- Monaco USA Portal 2026 - Fix Email Template Styling
-- Update all email templates with proper text centering and styling

-- ============================================
-- UPDATE DUES REMINDER TEMPLATES
-- ============================================

-- 30 days before due reminder
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Dear {{first_name}},</p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">This is a friendly reminder that your Monaco USA membership dues will be due on <strong>{{due_date}}</strong>.</p>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #334155; font-size: 14px; font-weight: 600;">Payment Details:</p>
  <p style="margin: 0 0 4px 0; color: #334155; font-size: 14px;"><strong>Amount Due:</strong> {{amount}}</p>
  <p style="margin: 0 0 4px 0; color: #334155; font-size: 14px;"><strong>Due Date:</strong> {{due_date}}</p>
  <p style="margin: 0 0 4px 0; color: #334155; font-size: 14px;"><strong>Member ID:</strong> {{member_id}}</p>
</div>
<div style="background: #dbeafe; border: 1px solid #93c5fd; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #1e40af; font-size: 14px; font-weight: 600;">Bank Transfer Details:</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Account Holder:</strong> {{account_holder}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Bank:</strong> {{bank_name}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>IBAN:</strong> {{iban}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Reference:</strong> {{member_id}}</p>
</div>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">You can also view your payment status and history in the member portal:</p>
<p style="margin: 0 0 20px 0; text-align: center;">
  <a href="{{portal_url}}" style="display: inline-block; background: #CE1126; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;">View My Account</a>
</p>
<p style="margin: 0; color: #64748b; font-size: 14px; text-align: center;">Thank you for being a valued member of Monaco USA!</p>'
WHERE template_key = 'dues_reminder_30';

-- 7 days before due reminder
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Dear {{first_name}},</p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Your Monaco USA membership dues will be due in <strong>7 days</strong> on {{due_date}}.</p>
<div style="background: #fef3c7; border: 1px solid #fcd34d; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #92400e; font-size: 14px; font-weight: 600;">Payment Information:</p>
  <p style="margin: 0 0 4px 0; color: #78350f; font-size: 14px;"><strong>Amount:</strong> {{amount}}</p>
  <p style="margin: 0 0 4px 0; color: #78350f; font-size: 14px;"><strong>Due Date:</strong> {{due_date}}</p>
</div>
<div style="background: #dbeafe; border: 1px solid #93c5fd; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #1e40af; font-size: 14px; font-weight: 600;">Bank Transfer Details:</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Account Holder:</strong> {{account_holder}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Bank:</strong> {{bank_name}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>IBAN:</strong> {{iban}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Reference:</strong> {{member_id}}</p>
</div>
<p style="margin: 0 0 20px 0; text-align: center;">
  <a href="{{portal_url}}" style="display: inline-block; background: #CE1126; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;">Pay Now</a>
</p>
<p style="margin: 0; color: #64748b; font-size: 14px; text-align: center;">Questions? Contact us at contact@monacousa.org</p>'
WHERE template_key = 'dues_reminder_7';

-- 1 day before due reminder
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Dear {{first_name}},</p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;"><strong style="color: #dc2626;">Your Monaco USA membership dues are due tomorrow ({{due_date}}).</strong></p>
<div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #991b1b; font-size: 14px; font-weight: 600;">Payment Required:</p>
  <p style="margin: 0 0 4px 0; color: #7f1d1d; font-size: 14px;"><strong>Amount:</strong> {{amount}}</p>
</div>
<div style="background: #dbeafe; border: 1px solid #93c5fd; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #1e40af; font-size: 14px; font-weight: 600;">Bank Transfer Details:</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Account Holder:</strong> {{account_holder}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Bank:</strong> {{bank_name}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>IBAN:</strong> {{iban}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Reference:</strong> {{member_id}}</p>
</div>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">To maintain your active membership status and continued access to member benefits, please ensure payment is made by the due date.</p>
<p style="margin: 0 0 20px 0; text-align: center;">
  <a href="{{portal_url}}" style="display: inline-block; background: #dc2626; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;">Pay Now</a>
</p>'
WHERE template_key = 'dues_reminder_1';

-- Overdue notice
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Dear {{first_name}},</p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Your Monaco USA membership dues are now <strong style="color: #dc2626;">{{days_overdue}} days overdue</strong>.</p>
<div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #991b1b; font-size: 14px; font-weight: 600;">Overdue Payment:</p>
  <p style="margin: 0 0 4px 0; color: #7f1d1d; font-size: 14px;"><strong>Amount:</strong> {{amount}}</p>
  <p style="margin: 0 0 4px 0; color: #7f1d1d; font-size: 14px;"><strong>Original Due Date:</strong> {{due_date}}</p>
  <p style="margin: 0 0 4px 0; color: #7f1d1d; font-size: 14px;"><strong>Days Overdue:</strong> {{days_overdue}}</p>
</div>
<div style="background: #fffbeb; border: 1px solid #fcd34d; border-radius: 12px; padding: 16px; margin: 0 0 20px 0;">
  <p style="margin: 0; color: #92400e; font-size: 14px;"><strong>Grace Period:</strong> You have {{grace_days_remaining}} days remaining in your grace period. After this, your membership status will be changed to inactive.</p>
</div>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Please remit payment as soon as possible to maintain your membership benefits.</p>
<div style="background: #dbeafe; border: 1px solid #93c5fd; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #1e40af; font-size: 14px; font-weight: 600;">Bank Transfer Details:</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Account Holder:</strong> {{account_holder}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Bank:</strong> {{bank_name}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>IBAN:</strong> {{iban}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Reference:</strong> {{member_id}}</p>
</div>
<p style="margin: 0 0 20px 0; text-align: center;">
  <a href="{{portal_url}}" style="display: inline-block; background: #dc2626; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;">Pay Now</a>
</p>'
WHERE template_key = 'dues_overdue';

-- Grace period warning
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Dear {{first_name}},</p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;"><strong style="color: #dc2626;">Your grace period ends in {{grace_days_remaining}} days.</strong></p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Your membership dues of <strong>{{amount}}</strong> were due on {{due_date}} and are now {{days_overdue}} days overdue.</p>
<div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0; color: #991b1b; font-size: 14px;"><strong>If payment is not received by {{grace_end_date}}, your membership status will automatically change to INACTIVE and you will lose access to member benefits.</strong></p>
</div>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Please make your payment immediately to avoid interruption:</p>
<div style="background: #dbeafe; border: 1px solid #93c5fd; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #1e40af; font-size: 14px; font-weight: 600;">Bank Transfer Details:</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Account Holder:</strong> {{account_holder}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Bank:</strong> {{bank_name}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>IBAN:</strong> {{iban}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Reference:</strong> {{member_id}}</p>
</div>
<p style="margin: 0 0 20px 0; text-align: center;">
  <a href="{{portal_url}}" style="display: inline-block; background: #dc2626; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;">Pay Now - Urgent</a>
</p>'
WHERE template_key = 'dues_grace_warning';

-- Inactive notice
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Dear {{first_name}},</p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Due to non-payment of membership dues, your Monaco USA membership has been marked as <strong style="color: #dc2626;">INACTIVE</strong>.</p>
<div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #991b1b; font-size: 14px; font-weight: 600;">Status Change:</p>
  <p style="margin: 0 0 4px 0; color: #7f1d1d; font-size: 14px;"><strong>Previous Status:</strong> Active</p>
  <p style="margin: 0 0 4px 0; color: #7f1d1d; font-size: 14px;"><strong>New Status:</strong> Inactive</p>
  <p style="margin: 0 0 4px 0; color: #7f1d1d; font-size: 14px;"><strong>Outstanding Amount:</strong> {{amount}}</p>
</div>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">As an inactive member, you will no longer have access to:</p>
<ul style="margin: 0 0 16px 0; padding-left: 20px; color: #334155;">
  <li>Member-only events</li>
  <li>Member directory</li>
  <li>Member communications</li>
  <li>Voting rights</li>
</ul>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">To reactivate your membership, please pay your outstanding dues:</p>
<div style="background: #dbeafe; border: 1px solid #93c5fd; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #1e40af; font-size: 14px; font-weight: 600;">Bank Transfer Details:</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Account Holder:</strong> {{account_holder}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Bank:</strong> {{bank_name}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>IBAN:</strong> {{iban}}</p>
  <p style="margin: 0 0 4px 0; color: #1e3a8a; font-size: 14px;"><strong>Reference:</strong> {{member_id}}</p>
</div>
<p style="margin: 0 0 20px 0; text-align: center;">
  <a href="{{portal_url}}" style="display: inline-block; background: #CE1126; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;">Reactivate My Membership</a>
</p>
<p style="margin: 0; color: #64748b; font-size: 14px; text-align: center;">If you believe this is an error or have questions, please contact us at contact@monacousa.org</p>'
WHERE template_key = 'dues_inactive_notice';

-- ============================================
-- UPDATE EVENT REMINDER TEMPLATE
-- ============================================
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Hi {{first_name}},</p>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">This is a friendly reminder that <strong>{{event_title}}</strong> is happening tomorrow!</p>
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #334155; font-size: 14px; font-weight: 600;">Event Details:</p>
  <p style="margin: 0 0 4px 0; color: #334155; font-size: 14px;"><strong>Date:</strong> {{event_date}}</p>
  <p style="margin: 0 0 4px 0; color: #334155; font-size: 14px;"><strong>Time:</strong> {{event_time}}</p>
  <p style="margin: 0 0 4px 0; color: #334155; font-size: 14px;"><strong>Location:</strong> {{event_location}}</p>
  {{#if guest_count}}
  <p style="margin: 8px 0 0 0; color: #64748b; font-size: 14px;"><em>You''re bringing {{guest_count}} guest(s)</em></p>
  {{/if}}
</div>
<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">We look forward to seeing you there!</p>
<p style="margin: 0 0 20px 0; text-align: center;">
  <a href="{{portal_url}}" style="display: inline-block; background: #CE1126; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;">View Event Details</a>
</p>
<p style="margin: 0; color: #64748b; font-size: 12px; text-align: center;">Can''t make it? Please update your RSVP so we can offer your spot to someone on the waitlist.</p>'
WHERE template_key = 'event_reminder_24hr';

-- ============================================
-- UPDATE RSVP CONFIRMATION TEMPLATE (content-only version)
-- ============================================
-- Note: The original is a full HTML template, so we'll create a content-only version
-- that works with wrapInMonacoTemplate

-- Update waitlist promotion to be content-only with proper styling
UPDATE public.email_templates
SET body_html = '<p style="margin: 0 0 16px 0; color: #334155; line-height: 1.6;">Dear {{first_name}},</p>
<p style="margin: 0 0 20px 0; color: #334155; line-height: 1.6;">Great news! A spot has opened up for <strong>{{event_title}}</strong> and you have been moved from the waitlist to confirmed!</p>
<div style="background: #f8fafc; border-radius: 12px; padding: 20px; margin: 0 0 20px 0;">
  <p style="margin: 0 0 8px 0; color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;">Event Details</p>
  <p style="margin: 0 0 8px 0; color: #334155;"><strong>Date:</strong> {{event_date}}</p>
  <p style="margin: 0; color: #334155;"><strong>Location:</strong> {{event_location}}</p>
</div>
<p style="margin: 0 0 20px 0; color: #334155; line-height: 1.6;">We look forward to seeing you there!</p>
<p style="margin: 0; color: #334155; text-align: center;">Best regards,<br><strong style="color: #CE1126;">The Monaco USA Team</strong></p>'
WHERE template_key = 'waitlist_promotion';