Redesign invitee confirmation email
Bailey Pumfleet
parent
b27ba5123c
commit
f9da8eb12c
|
|
@ -37,11 +37,7 @@ export default class CalEventParser {
|
|||
* Returns a footer section with links to change the event (as HTML).
|
||||
*/
|
||||
public getChangeEventFooterHtml(): string {
|
||||
return `<br />
|
||||
<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>
|
||||
`;
|
||||
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>`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -18,24 +18,76 @@ export default class EventAttendeeMail extends EventMail {
|
|||
protected getHtmlRepresentation(): string {
|
||||
return (
|
||||
`
|
||||
<div>
|
||||
Hi ${this.calEvent.attendees[0].name},<br />
|
||||
<br />
|
||||
Your ${this.calEvent.type} with ${this.calEvent.organizer.name} at ${this.getInviteeStart().format(
|
||||
"h:mma"
|
||||
)}
|
||||
(${this.calEvent.attendees[0].timeZone}) on ${this.getInviteeStart().format(
|
||||
"dddd, LL"
|
||||
)} is scheduled.<br />
|
||||
<br />` +
|
||||
<body style="background: #f4f5f7; font-family: Helvetica, sans-serif">
|
||||
<div
|
||||
style="
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 2rem 2rem 2rem 2rem;
|
||||
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() +
|
||||
"<br />" +
|
||||
`<strong>Additional notes:</strong><br />
|
||||
${this.calEvent.description}<br />
|
||||
` +
|
||||
`
|
||||
<hr />
|
||||
` +
|
||||
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 {
|
||||
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) {
|
||||
|
|
@ -60,16 +112,14 @@ export default class EventAttendeeMail extends EventMail {
|
|||
})
|
||||
.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 {
|
||||
return `
|
||||
${this.getLocation()}
|
||||
`;
|
||||
return ``;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue