feat: add transcription as attachment (#18740)

* feat: add transcription as attachment

* fix: change style

apps/web/public/static/locales/en/common.json

@@ -1544,6 +1544,7 @@
   "download_transcript": "Download Transcript",
   "recording_from_your_recent_call": "A recording from your recent call on {{appName}} is ready for download",
   "transcript_from_previous_call": "Transcript from your recent call on {{appName}} is ready to download. Links are valid only for 1 Hour",
+  "you_can_download_transcript_from_attachments": "You can also download transcript from attachments",
   "link_valid_for_12_hrs": "Note: The download link is valid only for 12 hours. You can generate new download link by following instructions <1>here</1>.",
   "create_your_first_form": "Create your first form",
   "create_your_first_form_description": "With Routing Forms you can ask qualifying questions and route to the correct person or event type.",

packages/emails/src/templates/DailyVideoDownloadTranscriptEmail.tsx

@@ -1,8 +1,8 @@
 import type { TFunction } from "next-i18next";
 
-import { WEBAPP_URL, APP_NAME, COMPANY_NAME } from "@calcom/lib/constants";
+import { WEBAPP_URL, COMPANY_NAME } from "@calcom/lib/constants";
 
-import { V2BaseEmailHtml, CallToAction } from "../components";
+import { V2BaseEmailHtml } from "../components";
 
 interface DailyVideoDownloadTranscriptEmailProps {
   language: TFunction;
@@ -55,13 +55,13 @@ export const DailyVideoDownloadTranscriptEmail = (
         <>{props.language("hi_user_name", { name: props.name })},</>
       </p>
       <p style={{ fontWeight: 400, lineHeight: "24px", marginBottom: "40px" }}>
-        <>{props.language("transcript_from_previous_call", { appName: APP_NAME })}</>
+        <>{props.language("you_can_download_transcript_from_attachments")}</>
       </p>
 
-      {props.transcriptDownloadLinks.map((downloadLink, index) => {
+      {props.transcriptDownloadLinks.map((_, index) => {
         return (
           <div
-            key={downloadLink}
+            key={`transcript-${index}`}
             style={{
               backgroundColor: "#F3F4F6",
               padding: "32px",
@@ -87,7 +87,6 @@ export const DailyVideoDownloadTranscriptEmail = (
               }}>
               {props.date} Transcript {index + 1}
             </p>
-            <CallToAction label={props.language("download_transcript")} href={downloadLink} />
           </div>
         );
       })}

packages/emails/templates/attendee-daily-video-download-transcript-email.ts

@@ -21,6 +21,18 @@ export default class AttendeeDailyVideoDownloadTranscriptEmail extends BaseEmail
     this.t = attendee.language.translate;
   }
   protected async getNodeMailerPayload(): Promise<Record<string, unknown>> {
+    const attachments = await Promise.all(
+      this.transcriptDownloadLinks.map(async (url, index) => {
+        const response = await fetch(url);
+        const buffer = await response.arrayBuffer();
+        return {
+          filename: `transcript-${index + 1}.vtt`,
+          content: Buffer.from(buffer),
+          contentType: "text/vtt",
+        };
+      })
+    );
+
     return {
       to: `${this.attendee.name} <${this.attendee.email}>`,
       from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
@@ -36,6 +48,7 @@ export default class AttendeeDailyVideoDownloadTranscriptEmail extends BaseEmail
         language: this.t,
         name: this.attendee.name,
       }),
+      attachments,
     };
   }
 

packages/emails/templates/organizer-daily-video-download-transcript-email.ts

@@ -20,6 +20,18 @@ export default class OrganizerDailyVideoDownloadTranscriptEmail extends BaseEmai
     this.t = this.calEvent.organizer.language.translate;
   }
   protected async getNodeMailerPayload(): Promise<Record<string, unknown>> {
+    const attachments = await Promise.all(
+      this.transcriptDownloadLinks.map(async (url, index) => {
+        const response = await fetch(url);
+        const buffer = await response.arrayBuffer();
+        return {
+          filename: `transcript-${index + 1}.vtt`,
+          content: Buffer.from(buffer),
+          contentType: "text/vtt",
+        };
+      })
+    );
+
     return {
       to: `${this.calEvent.organizer.email}>`,
       from: `${EMAIL_FROM_NAME} <${this.getMailerOptions().from}>`,
@@ -35,6 +47,7 @@ export default class OrganizerDailyVideoDownloadTranscriptEmail extends BaseEmai
         language: this.t,
         name: this.calEvent.organizer.name,
       }),
+      attachments,
     };
   }