mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Redesign organizer confirmation email

Browse source
This commit is contained in:
Bailey Pumfleet 2021-07-16 22:23:29 +01:00
parent f9da8eb12c
commit 5ccefac758
1 changed files with 81 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
lib/emails/EventOrganizerMail.ts
View file

@ -54,28 +54,78 @@ export default class EventOrganizerMail extends EventMail {
protected getHtmlRepresentation(): string { protected getHtmlRepresentation(): string {
return ( return (
` `
<div> <body style="background: #f4f5f7; font-family: Helvetica, sans-serif">
Hi ${this.calEvent.organizer.name},<br /> <div
<br /> style="
A new event has been scheduled.<br /> margin: 0 auto;
<br /> max-width: 450px;
<strong>Event Type:</strong><br /> background: white;
${this.calEvent.type}<br /> border-radius: 0.75rem;
<br /> border: 1px solid #e5e7eb;
<strong>Invitee Email:</strong><br /> padding: 2rem 2rem 2rem 2rem;
<a href="mailto:${this.calEvent.attendees[0].email}">${this.calEvent.attendees[0].email}</a><br /> text-align: center;
<br />` + margin-top: 40px;
this.getAdditionalBody() + "
`<strong>Invitee Time Zone:</strong><br /> >
${this.calEvent.attendees[0].timeZone}<br /> <svg
<br /> xmlns="http://www.w3.org/2000/svg"
<strong>Additional notes:</strong><br /> style="height: 60px; width: 60px; color: #31c48d"
${this.calEvent.description} fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<h1 style="font-weight: 500; color: #161e2e;">A new event has been scheduled.</h1>
<p style="color: #4b5563; margin-bottom: 30px;">You and any other attendees have been emailed with this information.</p>
<hr />
<table style="border-spacing: 20px; color: #161e2e; margin-bottom: 10px;">
<colgroup>
<col span="1" style="width: 40%;">
<col span="1" style="width: 60%;">
</colgroup>
<tr>
<td>What</td>
<td>${this.calEvent.type}</td>
</tr>
<tr>
<td>When</td>
<td>${this.getInviteeStart().format("dddd, LL")}<br>${this.getInviteeStart().format("h:mma")} (${
this.calEvent.attendees[0].timeZone
})</td>
</tr>
<tr>
<td>Who</td>
<td>${this.calEvent.attendees[0].name}<br /><small><a href="mailto:${
this.calEvent.attendees[0].email
}">${this.calEvent.attendees[0].email}</a></small></td>
</tr>
<tr>
<td>Where</td>
<td>${this.getLocation()}</td>
</tr>
<tr>
<td>Notes</td>
<td>${this.calEvent.description}</td>
</tr>
</table>
` + ` +
this.getAdditionalBody() +
"<br />" + "<br />" +
`
<hr />
` +
this.getAdditionalFooter() + this.getAdditionalFooter() +
` `
</div> </div>
<div style="text-align: center; margin-top: 20px; color: #ccc; font-size: 12px;">
<img style="opacity: 0.25; width: 120px;" src="https://app.calendso.com/calendso-logo-word.svg" alt="Calendso Logo"></div>
</body>
` `
); );
} }
@ -87,7 +137,7 @@ export default class EventOrganizerMail extends EventMail {
*/ */
protected getLocation(): string { protected getLocation(): string {
if (this.additionInformation?.hangoutLink) { if (this.additionInformation?.hangoutLink) {
return `<strong>Location:</strong> <a href="${this.additionInformation?.hangoutLink}">${this.additionInformation?.hangoutLink}</a><br />`; return `<a href="${this.additionInformation?.hangoutLink}">${this.additionInformation?.hangoutLink}</a><br />`;
} }
if (this.additionInformation?.entryPoints && this.additionInformation?.entryPoints.length > 0) { if (this.additionInformation?.entryPoints && this.additionInformation?.entryPoints.length > 0) {
@ -100,16 +150,14 @@ export default class EventOrganizerMail extends EventMail {
}) })
.join("<br />"); .join("<br />");
return `<strong>Locations:</strong><br /> ${locations}`; return `${locations}`;
} }
return this.calEvent.location ? `<strong>Location:</strong> ${this.calEvent.location}<br /><br />` : ""; return this.calEvent.location ? `${this.calEvent.location}<br /><br />` : "";
} }
protected getAdditionalBody(): string { protected getAdditionalBody(): string {
return ` return ``;
${this.getLocation()}
`;
} }
/** /**
* Returns the payload object for the nodemailer. * Returns the payload object for the nodemailer.
@ -137,4 +185,13 @@ export default class EventOrganizerMail extends EventMail {
protected printNodeMailerError(error: string): void { protected printNodeMailerError(error: string): void {
console.error("SEND_NEW_EVENT_NOTIFICATION_ERROR", this.calEvent.organizer.email, error); console.error("SEND_NEW_EVENT_NOTIFICATION_ERROR", this.calEvent.organizer.email, error);
} }
/**
* Returns the inviteeStart value used at multiple points.
*
* @private
*/
protected getInviteeStart(): Dayjs {
return <Dayjs>dayjs(this.calEvent.startTime).tz(this.calEvent.attendees[0].timeZone);
}
} }