@blackcode_sa/metaestetics-api 1.14.60 → 1.14.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -695,7 +695,15 @@ var NotificationsAdmin = class {
695
695
  data: {
696
696
  notificationId: notification.id,
697
697
  notificationType: notification.notificationType,
698
- userId: notification.userId
698
+ userId: notification.userId,
699
+ // Deep linking data
700
+ type: notification.appointmentId ? "appointment" : "system",
701
+ appointmentId: notification.appointmentId,
702
+ // Explicit deep link for navigation
703
+ deepLink: notification.appointmentId ? {
704
+ screen: "AppointmentDetail",
705
+ params: { appointmentId: notification.appointmentId }
706
+ } : void 0
699
707
  }
700
708
  }));
701
709
  }
@@ -2370,295 +2378,172 @@ var appointmentCancelledTemplate = `
2370
2378
  <meta charset="UTF-8">
2371
2379
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
2372
2380
  <title>Appointment Cancelled</title>
2373
- <style>
2374
- body {
2375
- margin: 0;
2376
- padding: 0;
2377
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
2378
- background: linear-gradient(135deg, #d4736c 0%, #b85450 100%);
2379
- min-height: 100vh;
2380
- }
2381
- .email-container {
2382
- max-width: 600px;
2383
- margin: 0 auto;
2384
- background: #ffffff;
2385
- border-radius: 20px;
2386
- overflow: hidden;
2387
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
2388
- margin-top: 40px;
2389
- margin-bottom: 40px;
2390
- }
2391
- .header {
2392
- background: linear-gradient(135deg, #d4736c 0%, #b85450 100%);
2393
- padding: 40px 30px;
2394
- text-align: center;
2395
- color: white;
2396
- }
2397
- .header h1 {
2398
- margin: 0;
2399
- font-size: 28px;
2400
- font-weight: 300;
2401
- letter-spacing: 1px;
2402
- }
2403
- .header .subtitle {
2404
- margin: 10px 0 0 0;
2405
- font-size: 16px;
2406
- opacity: 0.9;
2407
- font-weight: 300;
2408
- }
2409
- .content {
2410
- padding: 40px 30px;
2411
- }
2412
- .greeting {
2413
- font-size: 18px;
2414
- color: #333;
2415
- margin-bottom: 25px;
2416
- font-weight: 400;
2417
- }
2418
- .cancellation-notice {
2419
- background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
2420
- border-radius: 15px;
2421
- padding: 25px;
2422
- margin: 25px 0;
2423
- border-left: 5px solid #d4736c;
2424
- }
2425
- .cancellation-notice p {
2426
- margin: 0;
2427
- color: #c62828;
2428
- font-size: 15px;
2429
- font-weight: 500;
2430
- line-height: 1.6;
2431
- }
2432
- .cancelled-by-info {
2433
- background: #fafafa;
2434
- border-radius: 10px;
2435
- padding: 15px 20px;
2436
- margin-top: 15px;
2437
- }
2438
- .cancelled-by-info .label {
2439
- font-size: 12px;
2440
- color: #757575;
2441
- text-transform: uppercase;
2442
- letter-spacing: 0.5px;
2443
- margin-bottom: 5px;
2444
- }
2445
- .cancelled-by-info .value {
2446
- font-size: 14px;
2447
- color: #424242;
2448
- font-weight: 500;
2449
- }
2450
- .reason-box {
2451
- background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
2452
- border-radius: 15px;
2453
- padding: 20px;
2454
- margin: 20px 0;
2455
- border-left: 5px solid #ffa000;
2456
- }
2457
- .reason-box .label {
2458
- font-size: 14px;
2459
- font-weight: 600;
2460
- color: #e65100;
2461
- margin-bottom: 8px;
2462
- }
2463
- .reason-box .reason-text {
2464
- font-size: 15px;
2465
- color: #424242;
2466
- line-height: 1.6;
2467
- font-style: italic;
2468
- }
2469
- .appointment-card {
2470
- background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
2471
- border-radius: 15px;
2472
- padding: 30px;
2473
- margin: 25px 0;
2474
- border-left: 5px solid #9e9e9e;
2475
- opacity: 0.9;
2476
- }
2477
- .appointment-title {
2478
- font-size: 20px;
2479
- color: #757575;
2480
- margin-bottom: 20px;
2481
- font-weight: 600;
2482
- }
2483
- .appointment-details {
2484
- display: grid;
2485
- gap: 15px;
2486
- }
2487
- .detail-row {
2488
- display: flex;
2489
- align-items: center;
2490
- padding: 8px 0;
2491
- }
2492
- .detail-label {
2493
- font-weight: 600;
2494
- color: #757575;
2495
- min-width: 120px;
2496
- font-size: 14px;
2497
- }
2498
- .detail-value {
2499
- color: #616161;
2500
- font-size: 16px;
2501
- font-weight: 500;
2502
- text-decoration: line-through;
2503
- }
2504
- .procedure-name {
2505
- color: #757575;
2506
- font-weight: 600;
2507
- }
2508
- .clinic-name {
2509
- color: #9e9e9e;
2510
- font-weight: 600;
2511
- }
2512
- .rebook-section {
2513
- background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
2514
- border-radius: 15px;
2515
- padding: 25px;
2516
- margin: 30px 0;
2517
- text-align: center;
2518
- border-left: 5px solid #4caf50;
2519
- }
2520
- .rebook-section h3 {
2521
- margin: 0 0 15px 0;
2522
- color: #2e7d32;
2523
- font-weight: 600;
2524
- font-size: 18px;
2525
- }
2526
- .rebook-section p {
2527
- margin: 0;
2528
- color: #555;
2529
- font-size: 15px;
2530
- line-height: 1.6;
2531
- }
2532
- .support-section {
2533
- background: #f8f9fa;
2534
- border-radius: 15px;
2535
- padding: 20px;
2536
- margin: 25px 0;
2537
- text-align: center;
2538
- }
2539
- .support-section h4 {
2540
- margin: 0 0 10px 0;
2541
- color: #555;
2542
- font-weight: 600;
2543
- font-size: 16px;
2544
- }
2545
- .support-section p {
2546
- margin: 0;
2547
- color: #757575;
2548
- font-size: 14px;
2549
- line-height: 1.6;
2550
- }
2551
- .footer {
2552
- background: #f8f9fa;
2553
- padding: 25px 30px;
2554
- text-align: center;
2555
- color: #666;
2556
- font-size: 14px;
2557
- border-top: 1px solid #eee;
2558
- }
2559
- .logo {
2560
- font-size: 24px;
2561
- font-weight: 700;
2562
- color: white;
2563
- margin-bottom: 5px;
2564
- }
2565
- .divider {
2566
- height: 2px;
2567
- background: linear-gradient(90deg, #d4736c, #b85450);
2568
- margin: 25px 0;
2569
- border-radius: 1px;
2570
- }
2571
- .icon {
2572
- text-align: center;
2573
- margin: 20px 0;
2574
- font-size: 48px;
2575
- }
2576
- </style>
2381
+ <!--[if mso]>
2382
+ <noscript>
2383
+ <xml>
2384
+ <o:OfficeDocumentSettings>
2385
+ <o:PixelsPerInch>96</o:PixelsPerInch>
2386
+ </o:OfficeDocumentSettings>
2387
+ </xml>
2388
+ </noscript>
2389
+ <![endif]-->
2577
2390
  </head>
2578
- <body>
2579
- <div class="email-container">
2580
- <div class="header">
2581
- <div class="logo">MetaEstetics</div>
2582
- <h1>Appointment Cancelled</h1>
2583
- <div class="subtitle">We're Sorry to See This Change</div>
2584
- </div>
2391
+ <body style="margin: 0; padding: 0; background-color: #f8f6f5; font-family: Georgia, 'Times New Roman', serif;">
2392
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f8f6f5;">
2393
+ <tr>
2394
+ <td align="center" style="padding: 40px 20px;">
2395
+ <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; background-color: #ffffff; border-radius: 2px; box-shadow: 0 1px 3px rgba(103, 87, 74, 0.08);">
2585
2396
 
2586
- <div class="content">
2587
- <div class="icon">&#10060;</div>
2397
+ <!-- Header -->
2398
+ <tr>
2399
+ <td style="padding: 48px 48px 32px 48px; border-bottom: 1px solid #f0ebe6;">
2400
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
2401
+ <tr>
2402
+ <td>
2403
+ <h1 style="margin: 0; font-size: 24px; font-weight: 400; color: #67574A; letter-spacing: 2px; text-transform: uppercase; font-family: Georgia, 'Times New Roman', serif;">MetaEstetics</h1>
2404
+ </td>
2405
+ </tr>
2406
+ </table>
2407
+ </td>
2408
+ </tr>
2588
2409
 
2589
- <div class="greeting">
2590
- Dear <strong>{{recipientName}}</strong>,
2591
- </div>
2410
+ <!-- Cancellation Banner -->
2411
+ <tr>
2412
+ <td style="padding: 0;">
2413
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #fa003f;">
2414
+ <tr>
2415
+ <td style="padding: 20px 48px;">
2416
+ <p style="margin: 0; font-size: 13px; font-weight: 600; color: #ffffff; letter-spacing: 1.5px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Appointment Cancelled</p>
2417
+ </td>
2418
+ </tr>
2419
+ </table>
2420
+ </td>
2421
+ </tr>
2592
2422
 
2593
- <div class="cancellation-notice">
2594
- <p><strong>Your appointment has been cancelled.</strong> We wanted to let you know that the following appointment is no longer scheduled.</p>
2595
- <div class="cancelled-by-info">
2596
- <div class="label">Cancelled By</div>
2597
- <div class="value">{{cancelledByDisplay}}</div>
2598
- </div>
2599
- </div>
2423
+ <!-- Main Content -->
2424
+ <tr>
2425
+ <td style="padding: 40px 48px;">
2600
2426
 
2601
- {{#if cancellationReason}}
2602
- <div class="reason-box">
2603
- <div class="label">Reason for Cancellation</div>
2604
- <div class="reason-text">"{{cancellationReason}}"</div>
2605
- </div>
2606
- {{/if}}
2427
+ <!-- Greeting -->
2428
+ <p style="margin: 0 0 24px 0; font-size: 17px; color: #333333; line-height: 1.6; font-family: Georgia, 'Times New Roman', serif;">
2429
+ Dear {{recipientName}},
2430
+ </p>
2607
2431
 
2608
- <div class="appointment-card">
2609
- <div class="appointment-title">Cancelled Appointment Details</div>
2610
- <div class="appointment-details">
2611
- <div class="detail-row">
2612
- <div class="detail-label">Procedure:</div>
2613
- <div class="detail-value procedure-name">{{procedureName}}</div>
2614
- </div>
2615
- <div class="detail-row">
2616
- <div class="detail-label">Date:</div>
2617
- <div class="detail-value">{{appointmentDate}}</div>
2618
- </div>
2619
- <div class="detail-row">
2620
- <div class="detail-label">Time:</div>
2621
- <div class="detail-value">{{appointmentTime}}</div>
2622
- </div>
2623
- <div class="detail-row">
2624
- <div class="detail-label">Practitioner:</div>
2625
- <div class="detail-value">{{practitionerName}}</div>
2626
- </div>
2627
- <div class="detail-row">
2628
- <div class="detail-label">Location:</div>
2629
- <div class="detail-value clinic-name">{{clinicName}}</div>
2630
- </div>
2631
- </div>
2632
- </div>
2432
+ <p style="margin: 0 0 32px 0; font-size: 16px; color: #555555; line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
2433
+ We regret to inform you that your appointment has been cancelled. Please see the details below.
2434
+ </p>
2633
2435
 
2634
- <div class="divider"></div>
2436
+ <!-- Cancelled By Info -->
2437
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 24px;">
2438
+ <tr>
2439
+ <td style="padding: 16px 20px; background-color: #fef2f2; border-left: 3px solid #fa003f;">
2440
+ <p style="margin: 0 0 4px 0; font-size: 11px; font-weight: 600; color: #868686; letter-spacing: 1px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Cancelled By</p>
2441
+ <p style="margin: 0; font-size: 15px; color: #333333; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{cancelledByDisplay}}</p>
2442
+ </td>
2443
+ </tr>
2444
+ </table>
2635
2445
 
2636
- <div class="rebook-section">
2637
- <h3>Would You Like to Reschedule?</h3>
2638
- <p>
2639
- We'd love to see you! If you'd like to book a new appointment,
2640
- simply open the MetaEstetics app and browse available times that work for you.
2641
- </p>
2642
- </div>
2446
+ {{#if cancellationReason}}
2447
+ <!-- Cancellation Reason -->
2448
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px;">
2449
+ <tr>
2450
+ <td style="padding: 20px 24px; background-color: #faf9f7; border-left: 3px solid #a48a76;">
2451
+ <p style="margin: 0 0 8px 0; font-size: 11px; font-weight: 600; color: #868686; letter-spacing: 1px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Reason</p>
2452
+ <p style="margin: 0; font-size: 15px; color: #555555; line-height: 1.6; font-style: italic; font-family: Georgia, 'Times New Roman', serif;">"{{cancellationReason}}"</p>
2453
+ </td>
2454
+ </tr>
2455
+ </table>
2456
+ {{/if}}
2643
2457
 
2644
- <div class="support-section">
2645
- <h4>Need Assistance?</h4>
2646
- <p>
2647
- If you have any questions about this cancellation or need help rebooking,
2648
- please contact {{clinicName}} directly through the app or reach out to our support team.
2649
- </p>
2650
- </div>
2651
- </div>
2458
+ <!-- Cancelled Appointment Details -->
2459
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px; background-color: #f5f5f5; border-left: 3px solid #cccccc;">
2460
+ <tr>
2461
+ <td style="padding: 24px;">
2462
+ <p style="margin: 0 0 16px 0; font-size: 12px; font-weight: 600; color: #999999; letter-spacing: 1px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Cancelled Appointment</p>
2652
2463
 
2653
- <div class="footer">
2654
- <p style="margin: 0 0 10px 0;">
2655
- <strong>MetaEstetics</strong> - Premium Aesthetic Services
2656
- </p>
2657
- <p style="margin: 0; font-size: 12px; color: #999;">
2658
- This is an automated message. Please do not reply to this email.
2659
- </p>
2660
- </div>
2661
- </div>
2464
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
2465
+ <tr>
2466
+ <td style="padding-bottom: 12px;">
2467
+ <p style="margin: 0 0 2px 0; font-size: 11px; color: #999999; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Procedure</p>
2468
+ <p style="margin: 0; font-size: 15px; color: #888888; text-decoration: line-through; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{procedureName}}</p>
2469
+ </td>
2470
+ </tr>
2471
+ <tr>
2472
+ <td style="padding-bottom: 12px;">
2473
+ <p style="margin: 0 0 2px 0; font-size: 11px; color: #999999; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Date & Time</p>
2474
+ <p style="margin: 0; font-size: 15px; color: #888888; text-decoration: line-through; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{appointmentDate}} at {{appointmentTime}}</p>
2475
+ </td>
2476
+ </tr>
2477
+ <tr>
2478
+ <td style="padding-bottom: 12px;">
2479
+ <p style="margin: 0 0 2px 0; font-size: 11px; color: #999999; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Practitioner</p>
2480
+ <p style="margin: 0; font-size: 15px; color: #888888; text-decoration: line-through; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{practitionerName}}</p>
2481
+ </td>
2482
+ </tr>
2483
+ <tr>
2484
+ <td>
2485
+ <p style="margin: 0 0 2px 0; font-size: 11px; color: #999999; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Location</p>
2486
+ <p style="margin: 0; font-size: 15px; color: #888888; text-decoration: line-through; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{clinicName}}</p>
2487
+ </td>
2488
+ </tr>
2489
+ </table>
2490
+ </td>
2491
+ </tr>
2492
+ </table>
2493
+
2494
+ <!-- Divider -->
2495
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px;">
2496
+ <tr>
2497
+ <td style="height: 1px; background-color: #e8e4df;"></td>
2498
+ </tr>
2499
+ </table>
2500
+
2501
+ <!-- Rebook Section -->
2502
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px; background-color: #f0faf4; border-left: 3px solid #00BB38;">
2503
+ <tr>
2504
+ <td style="padding: 28px;">
2505
+ <p style="margin: 0 0 12px 0; font-size: 15px; font-weight: 600; color: #00BB38; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Book a New Appointment</p>
2506
+ <p style="margin: 0 0 20px 0; font-size: 14px; color: #555555; line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
2507
+ We'd love to see you. Open the MetaEstetics app to browse available times and book a new appointment.
2508
+ </p>
2509
+ <table role="presentation" cellspacing="0" cellpadding="0" border="0">
2510
+ <tr>
2511
+ <td style="background-color: #67574A; border-radius: 2px;">
2512
+ <a href="#" style="display: inline-block; padding: 14px 32px; font-size: 13px; font-weight: 600; color: #ffffff; text-decoration: none; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Book New Appointment</a>
2513
+ </td>
2514
+ </tr>
2515
+ </table>
2516
+ </td>
2517
+ </tr>
2518
+ </table>
2519
+
2520
+ <!-- Support Info -->
2521
+ <p style="margin: 0; font-size: 13px; color: #868686; line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
2522
+ If you have any questions about this cancellation, please contact {{clinicName}} directly through the app.
2523
+ </p>
2524
+
2525
+ </td>
2526
+ </tr>
2527
+
2528
+ <!-- Footer -->
2529
+ <tr>
2530
+ <td style="padding: 32px 48px; background-color: #faf9f7; border-top: 1px solid #f0ebe6;">
2531
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
2532
+ <tr>
2533
+ <td>
2534
+ <p style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500; color: #67574A; font-family: Georgia, 'Times New Roman', serif;">{{clinicName}}</p>
2535
+ <p style="margin: 0 0 16px 0; font-size: 13px; color: #868686; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Premium Aesthetic Services</p>
2536
+ <p style="margin: 0; font-size: 11px; color: #aaaaaa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">This is an automated message from MetaEstetics. Please do not reply directly to this email.</p>
2537
+ </td>
2538
+ </tr>
2539
+ </table>
2540
+ </td>
2541
+ </tr>
2542
+
2543
+ </table>
2544
+ </td>
2545
+ </tr>
2546
+ </table>
2662
2547
  </body>
2663
2548
  </html>
2664
2549
  `;
@@ -2668,324 +2553,160 @@ var appointmentRescheduledProposalTemplate = `
2668
2553
  <head>
2669
2554
  <meta charset="UTF-8">
2670
2555
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
2671
- <title>Appointment Reschedule Proposal</title>
2672
- <style>
2673
- body {
2674
- margin: 0;
2675
- padding: 0;
2676
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
2677
- background: linear-gradient(135deg, #a48a76 0%, #67574A 100%);
2678
- min-height: 100vh;
2679
- }
2680
- .email-container {
2681
- max-width: 600px;
2682
- margin: 0 auto;
2683
- background: #ffffff;
2684
- border-radius: 20px;
2685
- overflow: hidden;
2686
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
2687
- margin-top: 40px;
2688
- margin-bottom: 40px;
2689
- }
2690
- .header {
2691
- background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
2692
- padding: 40px 30px;
2693
- text-align: center;
2694
- color: white;
2695
- }
2696
- .header h1 {
2697
- margin: 0;
2698
- font-size: 28px;
2699
- font-weight: 300;
2700
- letter-spacing: 1px;
2701
- }
2702
- .header .subtitle {
2703
- margin: 10px 0 0 0;
2704
- font-size: 16px;
2705
- opacity: 0.9;
2706
- font-weight: 300;
2707
- }
2708
- .content {
2709
- padding: 40px 30px;
2710
- }
2711
- .greeting {
2712
- font-size: 18px;
2713
- color: #333;
2714
- margin-bottom: 25px;
2715
- font-weight: 400;
2716
- }
2717
- .info-box {
2718
- background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
2719
- border-radius: 15px;
2720
- padding: 25px;
2721
- margin: 25px 0;
2722
- border-left: 5px solid #ff9800;
2723
- }
2724
- .info-box p {
2725
- margin: 0;
2726
- color: #e65100;
2727
- font-size: 15px;
2728
- font-weight: 500;
2729
- line-height: 1.6;
2730
- }
2731
- .time-comparison {
2732
- display: grid;
2733
- gap: 20px;
2734
- margin: 25px 0;
2735
- }
2736
- .time-card {
2737
- background: linear-gradient(135deg, #f8f6f5 0%, #f5f3f2 100%);
2738
- border-radius: 15px;
2739
- padding: 25px;
2740
- border-left: 5px solid #a48a76;
2741
- }
2742
- .time-card.old-time {
2743
- border-left-color: #9e9e9e;
2744
- opacity: 0.8;
2745
- }
2746
- .time-card.new-time {
2747
- border-left-color: #ff9800;
2748
- background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%);
2749
- }
2750
- .time-label {
2751
- font-size: 14px;
2752
- font-weight: 600;
2753
- color: #666;
2754
- text-transform: uppercase;
2755
- letter-spacing: 0.5px;
2756
- margin-bottom: 10px;
2757
- }
2758
- .time-label.old {
2759
- color: #757575;
2760
- }
2761
- .time-label.new {
2762
- color: #f57c00;
2763
- }
2764
- .appointment-card {
2765
- background: linear-gradient(135deg, #f8f6f5 0%, #f5f3f2 100%);
2766
- border-radius: 15px;
2767
- padding: 30px;
2768
- margin: 25px 0;
2769
- border-left: 5px solid #a48a76;
2770
- }
2771
- .appointment-title {
2772
- font-size: 20px;
2773
- color: #a48a76;
2774
- margin-bottom: 20px;
2775
- font-weight: 600;
2776
- }
2777
- .appointment-details {
2778
- display: grid;
2779
- gap: 15px;
2780
- }
2781
- .detail-row {
2782
- display: flex;
2783
- align-items: center;
2784
- padding: 8px 0;
2785
- }
2786
- .detail-label {
2787
- font-weight: 600;
2788
- color: #555;
2789
- min-width: 120px;
2790
- font-size: 14px;
2791
- }
2792
- .detail-value {
2793
- color: #333;
2794
- font-size: 16px;
2795
- font-weight: 500;
2796
- }
2797
- .procedure-name {
2798
- color: #67574A;
2799
- font-weight: 600;
2800
- }
2801
- .clinic-name {
2802
- color: #a48a76;
2803
- font-weight: 600;
2804
- }
2805
- .action-section {
2806
- background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
2807
- border-radius: 15px;
2808
- padding: 30px;
2809
- margin: 30px 0;
2810
- text-align: center;
2811
- border-left: 5px solid #4caf50;
2812
- }
2813
- .action-section h3 {
2814
- margin: 0 0 15px 0;
2815
- color: #2e7d32;
2816
- font-weight: 600;
2817
- font-size: 18px;
2818
- }
2819
- .action-section p {
2820
- margin: 0 0 20px 0;
2821
- color: #555;
2822
- font-size: 15px;
2823
- line-height: 1.6;
2824
- }
2825
- .action-required-box {
2826
- background: linear-gradient(135deg, #fff3e0 0%, #ffecb3 100%);
2827
- border: 2px solid #ff9800;
2828
- border-radius: 15px;
2829
- padding: 25px;
2830
- margin: 25px 0;
2831
- text-align: center;
2832
- }
2833
- .action-required-box h3 {
2834
- margin: 0 0 15px 0;
2835
- color: #e65100;
2836
- font-weight: 700;
2837
- font-size: 18px;
2838
- }
2839
- .action-required-box p {
2840
- margin: 0 0 12px 0;
2841
- color: #bf360c;
2842
- font-size: 15px;
2843
- line-height: 1.6;
2844
- }
2845
- .action-required-box p:last-child {
2846
- margin-bottom: 0;
2847
- }
2848
- .pending-notice {
2849
- background: #fff8e1;
2850
- border-radius: 8px;
2851
- padding: 12px 15px;
2852
- margin-top: 15px;
2853
- display: inline-block;
2854
- }
2855
- .pending-notice p {
2856
- margin: 0;
2857
- color: #f57c00;
2858
- font-size: 14px;
2859
- font-weight: 600;
2860
- }
2861
- .footer {
2862
- background: #f8f9fa;
2863
- padding: 25px 30px;
2864
- text-align: center;
2865
- color: #666;
2866
- font-size: 14px;
2867
- border-top: 1px solid #eee;
2868
- }
2869
- .logo {
2870
- font-size: 24px;
2871
- font-weight: 700;
2872
- color: white;
2873
- margin-bottom: 5px;
2874
- }
2875
- .divider {
2876
- height: 2px;
2877
- background: linear-gradient(90deg, #a48a76, #67574A);
2878
- margin: 25px 0;
2879
- border-radius: 1px;
2880
- }
2881
- .icon {
2882
- text-align: center;
2883
- margin: 20px 0;
2884
- font-size: 48px;
2885
- }
2886
- .arrow {
2887
- text-align: center;
2888
- font-size: 32px;
2889
- color: #ff9800;
2890
- margin: 10px 0;
2891
- }
2892
- </style>
2556
+ <title>Appointment Reschedule Request</title>
2557
+ <!--[if mso]>
2558
+ <noscript>
2559
+ <xml>
2560
+ <o:OfficeDocumentSettings>
2561
+ <o:PixelsPerInch>96</o:PixelsPerInch>
2562
+ </o:OfficeDocumentSettings>
2563
+ </xml>
2564
+ </noscript>
2565
+ <![endif]-->
2893
2566
  </head>
2894
- <body>
2895
- <div class="email-container">
2896
- <div class="header">
2897
- <div class="logo">MetaEstetics</div>
2898
- <h1>Appointment Reschedule Proposal</h1>
2899
- <div class="subtitle">Action Required</div>
2900
- </div>
2901
-
2902
- <div class="content">
2903
- <div class="icon">\u{1F4C5}</div>
2904
-
2905
- <div class="greeting">
2906
- Dear <strong>{{patientName}}</strong>,
2907
- </div>
2908
-
2909
- <p style="color: #555; font-size: 16px; line-height: 1.6; margin-bottom: 25px;">
2910
- We hope this message finds you well. We need to propose a new time for your upcoming appointment. Please review the details below and confirm if the new time works for you.
2911
- </p>
2912
-
2913
- <div class="info-box">
2914
- <p><strong>\u26A0\uFE0F Important:</strong> Please respond to this reschedule proposal as soon as possible. Your appointment will remain pending until you confirm or reject the new time.</p>
2915
- </div>
2916
-
2917
- <div class="appointment-card">
2918
- <div class="appointment-title">\u{1F4CB} Appointment Details</div>
2919
- <div class="appointment-details">
2920
- <div class="detail-row">
2921
- <div class="detail-label">Procedure:</div>
2922
- <div class="detail-value procedure-name">{{procedureName}}</div>
2923
- </div>
2924
- <div class="detail-row">
2925
- <div class="detail-label">Practitioner:</div>
2926
- <div class="detail-value">{{practitionerName}}</div>
2927
- </div>
2928
- <div class="detail-row">
2929
- <div class="detail-label">Location:</div>
2930
- <div class="detail-value clinic-name">{{clinicName}}</div>
2931
- </div>
2932
- </div>
2933
- </div>
2934
-
2935
- <div class="time-comparison">
2936
- <div class="time-card old-time">
2937
- <div class="time-label old">Previous Time</div>
2938
- <div style="font-size: 18px; font-weight: 600; color: #424242; margin-bottom: 8px;">{{previousDate}}</div>
2939
- <div style="font-size: 16px; color: #616161;">{{previousTime}}</div>
2940
- </div>
2941
-
2942
- <div class="arrow">\u2193</div>
2943
-
2944
- <div class="time-card new-time">
2945
- <div class="time-label new">Proposed New Time</div>
2946
- <div style="font-size: 18px; font-weight: 600; color: #e65100; margin-bottom: 8px;">{{newDate}}</div>
2947
- <div style="font-size: 16px; color: #f57c00; font-weight: 500;">{{newTime}}</div>
2948
- </div>
2949
- </div>
2950
-
2951
- <div class="divider"></div>
2567
+ <body style="margin: 0; padding: 0; background-color: #f8f6f5; font-family: Georgia, 'Times New Roman', serif;">
2568
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f8f6f5;">
2569
+ <tr>
2570
+ <td align="center" style="padding: 40px 20px;">
2571
+ <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; background-color: #ffffff; border-radius: 2px; box-shadow: 0 1px 3px rgba(103, 87, 74, 0.08);">
2952
2572
 
2953
- <div class="action-required-box">
2954
- <h3>Your Response is Required</h3>
2955
- <p>
2956
- <strong>Missed our notification?</strong> Please open the MetaEstetics app to confirm or reject this reschedule request.
2957
- </p>
2958
- <p>
2959
- Please respond as soon as possible so we can finalize your appointment.
2960
- </p>
2961
- <div class="pending-notice">
2962
- <p>Your appointment will remain pending until you respond.</p>
2963
- </div>
2964
- </div>
2573
+ <!-- Header -->
2574
+ <tr>
2575
+ <td style="padding: 48px 48px 32px 48px; border-bottom: 1px solid #f0ebe6;">
2576
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
2577
+ <tr>
2578
+ <td>
2579
+ <h1 style="margin: 0; font-size: 24px; font-weight: 400; color: #67574A; letter-spacing: 2px; text-transform: uppercase; font-family: Georgia, 'Times New Roman', serif;">MetaEstetics</h1>
2580
+ </td>
2581
+ </tr>
2582
+ </table>
2583
+ </td>
2584
+ </tr>
2965
2585
 
2966
- <div class="action-section">
2967
- <h3>How to Respond</h3>
2968
- <p>
2969
- Open the MetaEstetics app and navigate to your appointments.
2970
- If the new time works for you, simply tap "Accept Reschedule".
2971
- If not, you can reject it and we'll work with you to find an alternative time.
2972
- </p>
2973
- </div>
2586
+ <!-- Action Required Banner -->
2587
+ <tr>
2588
+ <td style="padding: 0;">
2589
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #a48a76;">
2590
+ <tr>
2591
+ <td style="padding: 20px 48px;">
2592
+ <p style="margin: 0; font-size: 13px; font-weight: 600; color: #ffffff; letter-spacing: 1.5px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Action Required</p>
2593
+ </td>
2594
+ </tr>
2595
+ </table>
2596
+ </td>
2597
+ </tr>
2974
2598
 
2975
- <p style="color: #555; font-size: 14px; line-height: 1.6; margin-top: 25px;">
2976
- <strong>Need Help?</strong> If you have any questions or concerns about this reschedule, please contact us directly through the app or reach out to {{clinicName}}.
2977
- </p>
2978
- </div>
2979
-
2980
- <div class="footer">
2981
- <p style="margin: 0 0 10px 0;">
2982
- <strong>MetaEstetics</strong> - Premium Aesthetic Services
2983
- </p>
2984
- <p style="margin: 0; font-size: 12px; color: #999;">
2985
- This is an automated message. Please do not reply to this email.
2986
- </p>
2987
- </div>
2988
- </div>
2599
+ <!-- Main Content -->
2600
+ <tr>
2601
+ <td style="padding: 40px 48px;">
2602
+
2603
+ <!-- Greeting -->
2604
+ <p style="margin: 0 0 24px 0; font-size: 17px; color: #333333; line-height: 1.6; font-family: Georgia, 'Times New Roman', serif;">
2605
+ Dear {{patientName}},
2606
+ </p>
2607
+
2608
+ <p style="margin: 0 0 32px 0; font-size: 16px; color: #555555; line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
2609
+ {{clinicName}} has proposed a new time for your upcoming appointment. Please review the details below and respond at your earliest convenience.
2610
+ </p>
2611
+
2612
+ <!-- Appointment Info Card -->
2613
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px; background-color: #faf9f7; border-left: 3px solid #a48a76;">
2614
+ <tr>
2615
+ <td style="padding: 24px;">
2616
+ <p style="margin: 0 0 4px 0; font-size: 11px; font-weight: 600; color: #868686; letter-spacing: 1px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Procedure</p>
2617
+ <p style="margin: 0 0 16px 0; font-size: 18px; color: #67574A; font-weight: 500; font-family: Georgia, 'Times New Roman', serif;">{{procedureName}}</p>
2618
+
2619
+ <p style="margin: 0 0 4px 0; font-size: 11px; font-weight: 600; color: #868686; letter-spacing: 1px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Practitioner</p>
2620
+ <p style="margin: 0; font-size: 15px; color: #333333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{practitionerName}}</p>
2621
+ </td>
2622
+ </tr>
2623
+ </table>
2624
+
2625
+ <!-- Time Comparison -->
2626
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px;">
2627
+ <!-- Original Time (Strikethrough) -->
2628
+ <tr>
2629
+ <td style="padding: 20px 24px; background-color: #f5f5f5; border-left: 3px solid #cccccc;">
2630
+ <p style="margin: 0 0 4px 0; font-size: 11px; font-weight: 600; color: #999999; letter-spacing: 1px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Original Appointment</p>
2631
+ <p style="margin: 0; font-size: 16px; color: #999999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-decoration: line-through;">{{previousDate}}</p>
2632
+ <p style="margin: 4px 0 0 0; font-size: 14px; color: #999999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-decoration: line-through;">{{previousTime}}</p>
2633
+ </td>
2634
+ </tr>
2635
+
2636
+ <!-- Spacer -->
2637
+ <tr>
2638
+ <td style="height: 12px;"></td>
2639
+ </tr>
2640
+
2641
+ <!-- New Proposed Time -->
2642
+ <tr>
2643
+ <td style="padding: 24px; background-color: #f8f6f5; border-left: 3px solid #00BB38;">
2644
+ <p style="margin: 0 0 4px 0; font-size: 11px; font-weight: 600; color: #00BB38; letter-spacing: 1px; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Proposed New Time</p>
2645
+ <p style="margin: 0; font-size: 18px; color: #333333; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{newDate}}</p>
2646
+ <p style="margin: 4px 0 0 0; font-size: 15px; color: #67574A; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">{{newTime}}</p>
2647
+ </td>
2648
+ </tr>
2649
+ </table>
2650
+
2651
+ <!-- Divider -->
2652
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px;">
2653
+ <tr>
2654
+ <td style="height: 1px; background-color: #e8e4df;"></td>
2655
+ </tr>
2656
+ </table>
2657
+
2658
+ <!-- Response Instructions -->
2659
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px; background-color: #faf9f7;">
2660
+ <tr>
2661
+ <td style="padding: 28px;">
2662
+ <p style="margin: 0 0 16px 0; font-size: 15px; font-weight: 600; color: #67574A; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">How to Respond</p>
2663
+ <p style="margin: 0 0 16px 0; font-size: 14px; color: #555555; line-height: 1.7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
2664
+ Open the MetaEstetics app to accept or decline this reschedule request. Your appointment will remain pending until you respond.
2665
+ </p>
2666
+ <table role="presentation" cellspacing="0" cellpadding="0" border="0">
2667
+ <tr>
2668
+ <td style="background-color: #67574A; border-radius: 2px;">
2669
+ <a href="#" style="display: inline-block; padding: 14px 32px; font-size: 13px; font-weight: 600; color: #ffffff; text-decoration: none; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Open App</a>
2670
+ </td>
2671
+ </tr>
2672
+ </table>
2673
+ </td>
2674
+ </tr>
2675
+ </table>
2676
+
2677
+ <!-- Pending Notice -->
2678
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
2679
+ <tr>
2680
+ <td style="padding: 16px 20px; background-color: #fff8f0; border: 1px solid #f0e6d9; border-radius: 2px;">
2681
+ <p style="margin: 0; font-size: 13px; color: #a48a76; line-height: 1.6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
2682
+ <strong>Status:</strong> Pending your response. Please respond as soon as possible so we can confirm your appointment.
2683
+ </p>
2684
+ </td>
2685
+ </tr>
2686
+ </table>
2687
+
2688
+ </td>
2689
+ </tr>
2690
+
2691
+ <!-- Footer -->
2692
+ <tr>
2693
+ <td style="padding: 32px 48px; background-color: #faf9f7; border-top: 1px solid #f0ebe6;">
2694
+ <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
2695
+ <tr>
2696
+ <td>
2697
+ <p style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500; color: #67574A; font-family: Georgia, 'Times New Roman', serif;">{{clinicName}}</p>
2698
+ <p style="margin: 0 0 16px 0; font-size: 13px; color: #868686; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">Premium Aesthetic Services</p>
2699
+ <p style="margin: 0; font-size: 11px; color: #aaaaaa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">This is an automated message from MetaEstetics. Please do not reply directly to this email.</p>
2700
+ </td>
2701
+ </tr>
2702
+ </table>
2703
+ </td>
2704
+ </tr>
2705
+
2706
+ </table>
2707
+ </td>
2708
+ </tr>
2709
+ </table>
2989
2710
  </body>
2990
2711
  </html>
2991
2712
  `;