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

Merge pull request #369 from calendso/fancy-emails

Browse source 
Redesign invitee confirmation email
This commit is contained in:
Bailey Pumfleet 2021-07-16 22:09:01 +01:00 committed by GitHub
commit abde03818f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lib/CalEventParser.ts
View file

@ -37,11 +37,7 @@ export default class CalEventParser {
* Returns a footer section with links to change the event (as HTML). * Returns a footer section with links to change the event (as HTML).
*/ */
public getChangeEventFooterHtml(): string { public getChangeEventFooterHtml(): string {
return `<br /> return `<p style="color: #4b5563; margin-top: 20px;">Need to make a change? <a href="${this.getCancelLink()}" style="color: #161e2e;">Cancel</a> or <a href="${this.getRescheduleLink()}" style="color: #161e2e;">reschedule</a>.</p>`;
<strong>Need to change this event?</strong><br />
Cancel: <a href="${this.getCancelLink()}">${this.getCancelLink()}</a><br />
Reschedule: <a href="${this.getRescheduleLink()}">${this.getRescheduleLink()}</a>
`;
} }
/** /**

90
lib/emails/EventAttendeeMail.ts
View file

@ -18,24 +18,76 @@ export default class EventAttendeeMail extends EventMail {
protected getHtmlRepresentation(): string { protected getHtmlRepresentation(): string {
return ( return (
` `
<div> <body style="background: #f4f5f7; font-family: Helvetica, sans-serif">
Hi ${this.calEvent.attendees[0].name},<br /> <div
<br /> style="
Your ${this.calEvent.type} with ${this.calEvent.organizer.name} at ${this.getInviteeStart().format( margin: 0 auto;
"h:mma" max-width: 450px;
)} background: white;
(${this.calEvent.attendees[0].timeZone}) on ${this.getInviteeStart().format( border-radius: 0.75rem;
"dddd, LL" border: 1px solid #e5e7eb;
)} is scheduled.<br /> padding: 2rem 2rem 2rem 2rem;
<br />` + text-align: center;
margin-top: 40px;
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
style="height: 60px; width: 60px; color: #31c48d"
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;">Your meeting has been booked</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.organizer.name}<br /><small>${this.calEvent.organizer.email}</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() + this.getAdditionalBody() +
"<br />" + "<br />" +
`<strong>Additional notes:</strong><br /> `
${this.calEvent.description}<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>
` `
); );
} }
@ -47,7 +99,7 @@ export default class EventAttendeeMail 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) {
@ -60,16 +112,14 @@ export default class EventAttendeeMail 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()}
`;
} }
/** /**