Feat: Add "Add to Calendar" Section to Registered Event Email Template (#49)

* feat: Add Add to Calendar Section

* fix: improve design of add to calendar section

Author: surajmaity1

app/schemas/email.py

@@ -49,7 +49,7 @@ def check_body_for_id(cls, body: dict, values: ValidationInfo) -> dict:
             2: {"url"},
             3: {"query", "response"},
             4: {"email", "magicLink"},
-            5: {"name", "eventName", "badgeNumber", "ticketLink"},
+            5: {"name", "eventName", "badgeNumber", "ticketLink", "googleCalendarLink", "iCalendarLink", "outlookCalendarLink"},
             6: {"eventName", "updatesText", "updatesLink"},
             7: {"inviteeName", "eventName", "inviteText", "inviteLink"},
             8: {"url","email"},

templates/rsvp/ticket.html

@@ -83,6 +83,78 @@
                         </tr>
                       </tbody>
                     </table>
+                    <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+                      <tbody>
+                        <tr>
+                          <td height="16" style="line-height: 16px; font-size: 0;">&nbsp;</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin-top: 0; margin-bottom: 16px;">
+                      <tbody>
+                        <tr>
+                          <td style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); padding: 10px 20px; text-align: center; border-radius: 20px 20px 0 0;">
+                            <span style="color: white; font-size: 14px;">Add to Calendar</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="background-color: #1a1a1b; padding: 0; border-radius: 0 0 20px 20px;">
+                            <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+                              <tbody>
+                                <tr>
+                                  <td style="padding: 10px 20px; border-bottom: 1px solid #2d2d2f;">
+                                    <a href="{{googleCalendarLink}}" target="_blank" style="text-decoration: none; display: block;">
+                                      <table border="0" cellpadding="0" cellspacing="0" width="200" align="center">
+                                        <tr>
+                                          <td style="width: 32px; text-align: center; vertical-align: middle;">
+                                            <img width="24" height="24" src="https://img.icons8.com/color/48/google-calendar--v2.png" style="display: inline-block;"/>
+                                          </td>
+                                          <td style="vertical-align: middle; text-align: left; padding-left: 12px;">
+                                            <span style="color: #e5e5e7; font-size: 14px; font-weight: 500;">Google</span>
+                                          </td>
+                                        </tr>
+                                      </table>
+                                    </a>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td style="padding: 10px 20px; border-bottom: 1px solid #2d2d2f;">
+                                    <a href="{{iCalendarLink}}" target="_blank" style="text-decoration: none; display: block;">
+                                      <table border="0" cellpadding="0" cellspacing="0" width="200" align="center">
+                                        <tr>
+                                          <td style="width: 32px; text-align: center; vertical-align: middle;">
+                                            <img width="24" height="24" src="https://img.icons8.com/color/48/calendar-app.png" style="display: inline-block;"/>
+                                          </td>
+                                          <td style="vertical-align: middle; text-align: left; padding-left: 12px;">
+                                            <span style="color: #e5e5e7; font-size: 14px; font-weight: 500;">iCal</span>
+                                          </td>
+                                        </tr>
+                                      </table>
+                                    </a>
+                                  </td>
+                                </tr>
+                                <tr>
+                                  <td style="padding: 10px 20px; border-radius: 0 0 20px 20px;">
+                                    <a href="{{outlookCalendarLink}}" target="_blank" style="text-decoration: none; display: block;">
+                                      <table border="0" cellpadding="0" cellspacing="0" width="200" align="center">
+                                        <tr>
+                                          <td style="width: 32px; text-align: center; vertical-align: middle;">
+                                            <img width="24" height="24" src="https://img.icons8.com/fluency/48/windows-calendar.png" style="display: inline-block;"/>
+                                          </td>
+                                          <td style="vertical-align: middle; text-align: left; padding-left: 12px;">
+                                            <span style="color: #e5e5e7; font-size: 14px; font-weight: 500;">Outlook</span>
+                                          </td>
+                                        </tr>
+                                      </table>
+                                    </a>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
                     <p
                       style="font-size: 1.125rem; line-height: 1.75rem; margin: 16px 0 1.5rem 0; color: rgb(255, 255, 255);"
                     >