- Set explicit default=None for jitsi_room_id field to ensure consistent null handling - Update rejection logic to use None instead of empty strings for Jitsi fields, maintaining database consistency with nullable field definitions - Add login instructions to appointment confirmation email directing users to join 15 minutes early - Remove outdated "self-guided resources" option from rejection email - Add styling for new login-info section in scheduled appointment template This ensures proper null value handling in the database and improves user communication for appointment workflows.
297 lines
6.7 KiB
HTML
297 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Appointment Confirmed</title>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.email-header {
|
|
background-image: linear-gradient(to right, #e11d48, #db2777, #f97316);
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.email-header h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.email-header p {
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.header-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.email-body {
|
|
padding: 40px 30px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 30px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.confirmation-card {
|
|
background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
margin: 25px 0;
|
|
border: 2px dashed #38a169;
|
|
}
|
|
|
|
.confirmation-title {
|
|
font-size: 24px;
|
|
color: #22543d;
|
|
margin-bottom: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.appointment-time {
|
|
font-size: 28px;
|
|
color: #22543d;
|
|
font-weight: 700;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.therapist-info {
|
|
color: #2d3748;
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.details-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.detail-card {
|
|
background: #f7fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.detail-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.detail-label {
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.detail-value {
|
|
color: #2d3748;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preparation {
|
|
background: #fffaf0;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
margin: 25px 0;
|
|
border-left: 4px solid #ed8936;
|
|
}
|
|
|
|
.prep-title {
|
|
font-weight: 600;
|
|
color: #744210;
|
|
margin-bottom: 15px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.prep-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.prep-list li {
|
|
margin-bottom: 10px;
|
|
padding-left: 25px;
|
|
position: relative;
|
|
color: #475569;
|
|
}
|
|
|
|
.prep-list li:before {
|
|
content: "✓";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #48bb78;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.contact-info {
|
|
background: #edf2f7;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
color: #475569;
|
|
}
|
|
|
|
.action-section {
|
|
text-align: center;
|
|
margin: 35px 0;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
background-image: linear-gradient(to right, #e11d48, #db2777, #f97316);
|
|
color: white;
|
|
padding: 16px 32px;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.login-info {
|
|
color: #2d3748;
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.email-footer {
|
|
background-image: linear-gradient(to right, #e11d48, #db2777, #f97316);
|
|
padding: 30px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.copyright {
|
|
font-size: 12px;
|
|
margin-top: 15px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.email-container {
|
|
margin: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.email-header,
|
|
.email-body,
|
|
.email-footer {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.details-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.confirmation-card {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.appointment-time {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.header-icon {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="email-container">
|
|
<div class="email-header">
|
|
<h1>Appointment Confirmed!</h1>
|
|
<p>Your therapy session has been scheduled</p>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="email-body">
|
|
<div class="greeting">
|
|
Hello <strong>{{ appointment.full_name }}</strong>,<br />
|
|
Great news! Your appointment request has been confirmed. We're looking
|
|
forward to seeing you.
|
|
</div>
|
|
|
|
<!-- Confirmation Card -->
|
|
<div class="confirmation-card">
|
|
<div class="confirmation-title">Your Appointment Details</div>
|
|
<div class="appointment-time">{{ scheduled_datetime }}</div>
|
|
<div class="therapist-info">With: Nathalie (Therapist)</div>
|
|
<div class="login-info">
|
|
On the day of your appointment, please login to your account at www.AttuneHeartTherapy.com 15 minutes early to join your Therapy Session.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="email-footer">
|
|
<div class="company-name">{{ settings.SITE_NAME|default:"Attune Heart Therapy" }}</div>
|
|
<p class="support-info">
|
|
Need help? Contact our support team at
|
|
<a
|
|
href="mailto:admin@attunehearttherapy.com"
|
|
style="color: #fff; text-decoration: none"
|
|
>admin@attunehearttherapy.com</a
|
|
>
|
|
</p>
|
|
<p class="copyright">
|
|
© {% now "Y" %} {{ settings.SITE_NAME|default:"Attune Heart Therapy" }}. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|