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

Merge branch 'main' into bugfix/unify-email-sending

Browse source
This commit is contained in:
nicolas 2021-07-18 15:12:57 +02:00
commit 270e6b2d4f
4 changed files with 156 additions and 53 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>
`;
} }
/** /**

86
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()}
`;
} }
/** /**

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);
}
} }

8
pages/index.tsx
View file

@ -101,8 +101,8 @@ export default function Home(props) {
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">
{props.eventTypes.map((type) => ( {props.eventTypes.map((type) => (
<li key={type.id}> <li key={type.id} className="flex">
<div className="px-4 py-4 flex items-center sm:px-6"> <div className="px-4 py-4 flex items-center sm:px-6 w-2/3">
<div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between"> <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
<div className="truncate"> <div className="truncate">
<div className="flex text-sm"> <div className="flex text-sm">
@ -121,9 +121,9 @@ export default function Home(props) {
</div> </div>
</div> </div>
</div> </div>
<div className="ml-5 flex-shrink-0"> <div className="ml-5 w-1/3 text-right pt-5 pr-4">
<Link href={"/availability/event/" + type.id}> <Link href={"/availability/event/" + type.id}>
<a className="text-blue-600 hover:text-blue-900 mr-2 font-medium">Edit</a> <a className="text-gray-400 hover:text-gray-900 mr-4 font-medium">Edit</a>
</Link> </Link>
<Link href={"/" + session.user.username + "/" + type.slug}> <Link href={"/" + session.user.username + "/" + type.slug}>
<a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2 font-medium"> <a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2 font-medium">