From 71a33749305ddacae0edef294fbcbd3fc53ed639 Mon Sep 17 00:00:00 2001 From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Date: Sun, 12 Mar 2023 23:09:46 +0530 Subject: [PATCH] fix: add confirm and reject icon in email (#7457) * fix: add confirm and reject icon in email Signed-off-by: Udit Takkar * fix: remove is_production Signed-off-by: Udit Takkar * wip Signed-off-by: Udit Takkar * style: calltoAction Signed-off-by: Udit Takkar * fix: brightness Signed-off-by: Udit Takkar * fix: styling of button Signed-off-by: Udit Takkar --------- Signed-off-by: Udit Takkar Co-authored-by: Peer Richelsen --- apps/web/pages/api/email.ts | 2 +- apps/web/public/emails/confirmIcon.png | Bin 0 -> 228 bytes apps/web/public/emails/confirmIcon.svg | 3 + apps/web/public/emails/rejectIcon.png | Bin 0 -> 485 bytes apps/web/public/emails/rejectIcon.svg | 3 + .../emails/src/components/CallToAction.tsx | 107 ++++++++++++------ .../src/components/CallToActionIcon.tsx | 27 +++++ packages/emails/src/components/LinkIcon.tsx | 11 -- .../emails/src/components/LocationInfo.tsx | 4 +- packages/emails/src/components/index.ts | 2 +- .../AttendeeAwaitingPaymentEmail.tsx | 2 +- .../AttendeeWasRequestedToRescheduleEmail.tsx | 2 +- .../src/templates/OrganizerRequestEmail.tsx | 6 +- .../emails/src/templates/TeamInviteEmail.tsx | 1 + 14 files changed, 119 insertions(+), 51 deletions(-) create mode 100644 apps/web/public/emails/confirmIcon.png create mode 100644 apps/web/public/emails/confirmIcon.svg create mode 100644 apps/web/public/emails/rejectIcon.png create mode 100644 apps/web/public/emails/rejectIcon.svg create mode 100644 packages/emails/src/components/CallToActionIcon.tsx delete mode 100644 packages/emails/src/components/LinkIcon.tsx diff --git a/apps/web/pages/api/email.ts b/apps/web/pages/api/email.ts index e353dfa4c6..6e99a6e77e 100644 --- a/apps/web/pages/api/email.ts +++ b/apps/web/pages/api/email.ts @@ -60,7 +60,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { res.setHeader("Content-Type", "text/html"); res.setHeader("Cache-Control", "no-cache, no-store, private, must-revalidate"); res.write( - renderEmail("OrganizerScheduledEmail", { + renderEmail("OrganizerRequestEmail", { calEvent: evt, attendee: evt.organizer, }) diff --git a/apps/web/public/emails/confirmIcon.png b/apps/web/public/emails/confirmIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..d20ec56445e5afbf53e05cf138b0eb763540f6b1 GIT binary patch literal 228 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjY)RhkE)4%caKYZ?lYt^LJzX3_ zJUZWAI>_7PAmSQ0U17^Y-x&$Q>((?T9chb*Xgem9<8Zdnm^(?K?ZkZz{h3#N-u?ag zS*+XAUiit1iLRVdHXHjI@`e5gFvdUX(LTj-(9m~(Z^QrFSsM=V?&g2LiY5P;-_(aK zzbCM;>b(?M%p&X1&Hl~y`~B@{9!8nj_f!?vI^O&_*~~ZIm+AdPiMz8VPLitZNbt*u Z + + diff --git a/apps/web/public/emails/rejectIcon.png b/apps/web/public/emails/rejectIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..da190511777dc74ade5709ecbdb4a1b75a672445 GIT binary patch literal 485 zcmVIU3{iN+0Rg)6WFv=Ehb z7rOH$5X+unQD&ihK~?ve7(;UE+(Y3#?`kSab3bu#+XIiAdj5 zZUNN*rUqO%rk9y~il78sd(-gJJ^Ryl+Zbq*a)W01Wfm3xGPe~^JCfccJxIDYvq7%N b7jFFkzr;FA(TkJ600000NkvXXu0mjfJ&w=R literal 0 HcmV?d00001 diff --git a/apps/web/public/emails/rejectIcon.svg b/apps/web/public/emails/rejectIcon.svg new file mode 100644 index 0000000000..bd2446ce30 --- /dev/null +++ b/apps/web/public/emails/rejectIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/emails/src/components/CallToAction.tsx b/packages/emails/src/components/CallToAction.tsx index 0ba00f1b96..04007623c7 100644 --- a/packages/emails/src/components/CallToAction.tsx +++ b/packages/emails/src/components/CallToAction.tsx @@ -1,33 +1,76 @@ -import { LinkIcon } from "./LinkIcon"; +import { CallToActionIcon } from "./CallToActionIcon"; -export const CallToAction = (props: { label: string; href: string; secondary?: boolean }) => ( -

- - {props.label} - - -

-); +export const CallToAction = (props: { + label: string; + href: string; + secondary?: boolean; + startIconName?: string; + endIconName?: string; +}) => { + const { label, href, secondary, startIconName, endIconName } = props; + + const calculatePadding = () => { + const paddingTop = "0.625rem"; + const paddingBottom = "0.625rem"; + let paddingLeft = "1rem"; + let paddingRight = "1rem"; + + if (startIconName) { + paddingLeft = "0.875rem"; + } else if (endIconName) { + paddingRight = "0.875rem"; + } + + return `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`; + }; + + return ( +

+ + {startIconName && ( + + )} + {label} + {endIconName && } + +

+ ); +}; diff --git a/packages/emails/src/components/CallToActionIcon.tsx b/packages/emails/src/components/CallToActionIcon.tsx new file mode 100644 index 0000000000..c90be53867 --- /dev/null +++ b/packages/emails/src/components/CallToActionIcon.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +import { WEBAPP_URL } from "@calcom/lib/constants"; + +export const CallToActionIcon = ({ + secondary, + iconName, + style, +}: { + secondary?: boolean; + iconName: string; + style?: React.CSSProperties; +}) => ( + +); diff --git a/packages/emails/src/components/LinkIcon.tsx b/packages/emails/src/components/LinkIcon.tsx deleted file mode 100644 index 190da6aee0..0000000000 --- a/packages/emails/src/components/LinkIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { BASE_URL, IS_PRODUCTION } from "@calcom/lib/constants"; - -export const LinkIcon = ({ secondary }: { secondary?: boolean }) => ( - -); diff --git a/packages/emails/src/components/LocationInfo.tsx b/packages/emails/src/components/LocationInfo.tsx index b8bf8d7c54..fe69bf5813 100644 --- a/packages/emails/src/components/LocationInfo.tsx +++ b/packages/emails/src/components/LocationInfo.tsx @@ -5,8 +5,8 @@ import { getVideoCallUrl } from "@calcom/lib/CalEventParser"; import logger from "@calcom/lib/logger"; import type { CalendarEvent } from "@calcom/types/Calendar"; +import { CallToActionIcon } from "./CallToActionIcon"; import { Info } from "./Info"; -import { LinkIcon } from "./LinkIcon"; export function LocationInfo(props: { calEvent: CalendarEvent; t: TFunction }) { const { t } = props; @@ -40,7 +40,7 @@ export function LocationInfo(props: { calEvent: CalendarEvent; t: TFunction }) { title={t("meeting_url")} style={{ color: "#101010" }} rel="noreferrer"> - {providerName || "Link"} + {providerName || "Link"} } extraInfo={ diff --git a/packages/emails/src/components/index.ts b/packages/emails/src/components/index.ts index bfbe24f865..de16cac108 100644 --- a/packages/emails/src/components/index.ts +++ b/packages/emails/src/components/index.ts @@ -4,7 +4,7 @@ export { CallToAction } from "./CallToAction"; export { CallToActionTable } from "./CallToActionTable"; export { UserFieldsResponses } from "./UserFieldsResponses"; export { Info } from "./Info"; -export { LinkIcon } from "./LinkIcon"; +export { CallToActionIcon } from "./CallToActionIcon"; export { LocationInfo } from "./LocationInfo"; export { ManageLink } from "./ManageLink"; export { default as RawHtml } from "./RawHtml"; diff --git a/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx b/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx index 4a593f5970..a02408cd22 100644 --- a/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx +++ b/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx @@ -8,7 +8,7 @@ function ManageLink(props: React.ComponentProps) return ( - + ); } diff --git a/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx b/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx index 763057d74e..256e77596b 100644 --- a/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx +++ b/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx @@ -17,7 +17,7 @@ export const AttendeeWasRequestedToRescheduleEmail = ( subject="rescheduled_event_type_subject" callToAction={ - + } {...props} diff --git a/packages/emails/src/templates/OrganizerRequestEmail.tsx b/packages/emails/src/templates/OrganizerRequestEmail.tsx index ab441b27dc..9454aaf1c6 100644 --- a/packages/emails/src/templates/OrganizerRequestEmail.tsx +++ b/packages/emails/src/templates/OrganizerRequestEmail.tsx @@ -1,7 +1,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants"; import { symmetricEncrypt } from "@calcom/lib/crypto"; -import { CallToAction, CallToActionTable, Separator } from "../components"; +import { CallToAction, Separator, CallToActionTable } from "../components"; import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail"; export const OrganizerRequestEmail = (props: React.ComponentProps) => { @@ -21,13 +21,15 @@ export const OrganizerRequestEmail = (props: React.ComponentProps diff --git a/packages/emails/src/templates/TeamInviteEmail.tsx b/packages/emails/src/templates/TeamInviteEmail.tsx index f6e0a5c92e..a99b805c51 100644 --- a/packages/emails/src/templates/TeamInviteEmail.tsx +++ b/packages/emails/src/templates/TeamInviteEmail.tsx @@ -55,6 +55,7 @@ export const TeamInviteEmail = (