From 8bb5200dd8f485f2e926de80e12e33667d349138 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Wed, 17 Apr 2024 08:30:14 -0400
Subject: [PATCH] fix: add new styling for emoji links (#14481)

---
 .../bookings/views/bookings-single-view.tsx   | 12 +++++-----
 .../reminders/providers/sendgridProvider.ts   | 22 ++++++++++++++++-
 .../templates/emailRatingTemplate.ts          | 24 +++++++++----------
 packages/ui/components/editor/ExampleTheme.ts |  1 +
 .../editor/plugins/ToolbarPlugin.tsx          |  7 +++++-
 .../ui/components/editor/stylesEditor.css     | 16 +++++++++----
 6 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 606a649b79..8cad538ed3 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -877,10 +877,10 @@ export default function Success(props: PageProps) {
                     </>
                   ) : (
                     <>
-                      <div className="my-3 flex justify-end">
+                      <div className="my-3 flex justify-center space-x-1">
                         <button
                           className={classNames(
-                            "m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
+                            "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
                             rateValue === 1
                               ? "border-focus bg-emphasis"
                               : "border-muted bg-default opacity-50"
@@ -891,7 +891,7 @@ export default function Success(props: PageProps) {
                         </button>
                         <button
                           className={classNames(
-                            "m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
+                            "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
                             rateValue === 2
                               ? "border-focus bg-emphasis"
                               : "border-muted bg-default opacity-50"
@@ -902,7 +902,7 @@ export default function Success(props: PageProps) {
                         </button>
                         <button
                           className={classNames(
-                            "m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
+                            "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
                             rateValue === 3
                               ? "border-focus bg-emphasis"
                               : " border-muted bg-default opacity-50"
@@ -913,7 +913,7 @@ export default function Success(props: PageProps) {
                         </button>
                         <button
                           className={classNames(
-                            "m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
+                            "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
                             rateValue === 4
                               ? "border-focus bg-emphasis"
                               : "border-muted bg-default opacity-50"
@@ -924,7 +924,7 @@ export default function Success(props: PageProps) {
                         </button>
                         <button
                           className={classNames(
-                            "m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
+                            "flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
                             rateValue === 5
                               ? "border-focus bg-emphasis"
                               : "border-muted bg-default opacity-50"
diff --git a/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts b/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
index b09bc046a3..c22ae466f6 100644
--- a/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
+++ b/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
@@ -1,6 +1,7 @@
 import client from "@sendgrid/client";
 import type { MailData } from "@sendgrid/helpers/classes/mail";
 import sgMail from "@sendgrid/mail";
+import { JSDOM } from "jsdom";
 
 import { SENDER_NAME } from "@calcom/lib/constants";
 import { setTestEmail } from "@calcom/lib/testEmails";
@@ -70,7 +71,7 @@ export function sendSendgridMail(
       name: addData.sender || SENDER_NAME,
     },
     subject: mailData.subject,
-    html: mailData.html || "",
+    html: addHTMLStyles(mailData.html),
     batchId: mailData.batchId,
     replyTo: mailData.replyTo || senderEmail,
     attachments: mailData.attachments,
@@ -109,3 +110,22 @@ export function deleteScheduledSend(referenceId: string | null) {
     method: "DELETE",
   });
 }
+
+function addHTMLStyles(html?: string) {
+  if (!html) {
+    return "";
+  }
+  const dom = new JSDOM(html);
+  const document = dom.window.document;
+
+  // Select all <a> tags inside <h6> elements --> only used for emojis in rating template
+  const links = document.querySelectorAll("h6 a");
+
+  links.forEach((link) => {
+    const htmlLink = link as HTMLElement;
+    htmlLink.style.fontSize = "20px";
+    htmlLink.style.textDecoration = "none";
+  });
+
+  return dom.serialize();
+}
diff --git a/packages/features/ee/workflows/lib/reminders/templates/emailRatingTemplate.ts b/packages/features/ee/workflows/lib/reminders/templates/emailRatingTemplate.ts
index bd33798d41..734fb01b80 100644
--- a/packages/features/ee/workflows/lib/reminders/templates/emailRatingTemplate.ts
+++ b/packages/features/ee/workflows/lib/reminders/templates/emailRatingTemplate.ts
@@ -50,28 +50,28 @@ const emailRatingTemplate = ({
     endTime = dayjs(endTime).tz(timeZone).format(currentTimeFormat);
   }
 
-  const emailSubject = `How was your recent experience?: ${eventName}`;
+  const emailSubject = `How was your recent experience? ${eventName}`;
 
-  const introHtml = `<body>Hi${
+  const introHtml = `<p>Hi${
     name ? ` ${name}` : ""
-  },<br><br>We're always looking to improve our customer's experience. How satisfied were you with your recent meeting?<br><br>`;
+  },<br><br>We're always looking to improve our customer's experience. How satisfied were you with your recent meeting?<br></p>`;
 
-  const ratingHtml = `<a href="${ratingUrl}=1">😠</a> <a href="${ratingUrl}=2">🙁</a> <a href="${ratingUrl}=3">😐</a> <a href="${ratingUrl}=4">😄</a> <a href="${ratingUrl}=5">😍</a><br><br>`;
+  const ratingHtml = `<h6><a href="${ratingUrl}=1">😠 </a> <a href="${ratingUrl}=2">🙁 </a> <a href="${ratingUrl}=3">😐 </a> <a href="${ratingUrl}=4">😄 </a> <a href="${ratingUrl}=5">😍</a></h6>`;
 
-  const noShowHtml = `<div><a href="${noShowUrl}">${organizer} didn't join the meeting</a></div><br><br>`;
+  const noShowHtml = `${organizer} didn't join the meeting?<a href="${noShowUrl}"> Reschedule here</a><br><br>`;
 
-  const eventHtml = `<div><strong class="editor-text-bold">Event: </strong></div>${eventName}<br><br>`;
+  const eventHtml = `<strong>Event: </strong>${eventName}<br><br>`;
 
-  const dateTimeHtml = `<div><strong class="editor-text-bold">Date & Time: </strong></div>${eventDate} - ${endTime} (${timeZone})<br><br>`;
+  const dateTimeHtml = `<strong>Date & Time: </strong>${eventDate} - ${endTime} (${timeZone})<br><br>`;
 
-  const attendeeHtml = `<div><strong class="editor-text-bold">Attendees: </strong></div>You & ${organizer}<br><br>`;
+  const attendeeHtml = `<strong>Attendees: </strong>You & ${organizer}<br><br>`;
 
-  const branding = !isBrandingDisabled && !isEditingMode ? `<br><br>_<br><br>Scheduling by ${APP_NAME}` : "";
+  const branding =
+    !isBrandingDisabled && !isEditingMode ? `<div>_<br><br>Scheduling by ${APP_NAME}</div>` : "";
 
-  const endingHtml = `This survey was triggered by a Workflow in Cal.${branding}</body>`;
+  const endingHtml = `This survey was triggered by a Workflow in Cal.${branding}`;
 
-  const emailBody =
-    introHtml + ratingHtml + noShowHtml + eventHtml + dateTimeHtml + attendeeHtml + endingHtml;
+  const emailBody = `<body>${introHtml}${ratingHtml}<p>${noShowHtml}${eventHtml}${dateTimeHtml}${attendeeHtml}${endingHtml}</p></body>`;
 
   return { emailSubject, emailBody };
 };
diff --git a/packages/ui/components/editor/ExampleTheme.ts b/packages/ui/components/editor/ExampleTheme.ts
index c08b06cbc7..1971de2dd7 100644
--- a/packages/ui/components/editor/ExampleTheme.ts
+++ b/packages/ui/components/editor/ExampleTheme.ts
@@ -4,6 +4,7 @@ const exampleTheme = {
   heading: {
     h1: "editor-heading-h1",
     h2: "editor-heading-h2",
+    h6: "editor-heading-h6",
   },
   list: {
     nested: {
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index 225cb82501..5b30d90a7a 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -376,7 +376,12 @@ export default function ToolbarPlugin(props: TextEditorProps) {
         editor.registerUpdateListener(({ editorState, prevEditorState }) => {
           editorState.read(() => {
             const textInHtml = $generateHtmlFromNodes(editor).replace(/&lt;/g, "<").replace(/&gt;/g, ">");
-            props.setText(textInHtml);
+            props.setText(
+              textInHtml.replace(
+                /<p\s+class="editor-paragraph"[^>]*>\s*<br>\s*<\/p>/g,
+                "<p class='editor-paragraph'></p>"
+              )
+            );
           });
           if (!prevEditorState._selection) editor.blur();
         });
diff --git a/packages/ui/components/editor/stylesEditor.css b/packages/ui/components/editor/stylesEditor.css
index 2ac72e23a5..9ceb5dd828 100644
--- a/packages/ui/components/editor/stylesEditor.css
+++ b/packages/ui/components/editor/stylesEditor.css
@@ -1,7 +1,3 @@
-.editor a {
-  text-decoration: underline;
-  font-size: 14px;
-}
 
 .editor li {
   padding-left: 1.28571429em;
@@ -56,9 +52,18 @@
   font-style: italic;
 }
 
+// h6 is only used for emoji links
+.editor-heading-h6 {
+}
+
+h6 a {
+  font-size: 20px !important;
+  text-decoration: none !important;
+}
+
 .editor-link {
   color: rgb(33, 111, 219);
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 .editor-tokenFunction {
@@ -67,6 +72,7 @@
 
 .editor-paragraph {
   margin: 0;
+  margin-top:14px;
   position: relative;
   color: var(--cal-text);
 }