From 98a4684a2b8608d1db3f9289ef4d933a92a598a3 Mon Sep 17 00:00:00 2001 From: Leo Giovanetti Date: Tue, 13 Dec 2022 10:25:30 -0300 Subject: [PATCH] Impl (#5993) Co-authored-by: Peer Richelsen Co-authored-by: Bailey Pumfleet --- apps/web/pages/api/email.ts | 22 +- apps/web/public/emails/teamCircle@2x.png | Bin 0 -> 2468 bytes apps/web/public/static/locales/en/common.json | 5 +- .../emails/src/components/V2BaseEmailHtml.tsx | 191 ++++++++++++++++++ packages/emails/src/components/index.ts | 1 + .../emails/src/templates/TeamInviteEmail.tsx | 44 +++- 6 files changed, 234 insertions(+), 29 deletions(-) create mode 100644 apps/web/public/emails/teamCircle@2x.png create mode 100644 packages/emails/src/components/V2BaseEmailHtml.tsx diff --git a/apps/web/pages/api/email.ts b/apps/web/pages/api/email.ts index 04c25824a0..950cbbfb75 100644 --- a/apps/web/pages/api/email.ts +++ b/apps/web/pages/api/email.ts @@ -32,18 +32,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { timeZone: "America/Chihuahua", language, }, - { - email: "pro@example.com", - name: "pro@example.com", - timeZone: "America/Chihuahua", - language, - }, - { - email: "pro@example.com", - name: "pro@example.com", - timeZone: "America/Chihuahua", - language, - }, ], location: "Zoom video", destinationCalendar: null, @@ -60,10 +48,12 @@ 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("DisabledAppEmail", { - appName: "Stripe", - appType: ["payment"], - t, + renderEmail("TeamInviteEmail", { + language: t, + from: "From", + to: "To", + teamName: "Team name", + joinLink: "Join link", }) ); res.end(); diff --git a/apps/web/public/emails/teamCircle@2x.png b/apps/web/public/emails/teamCircle@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..1e65560d2cc7087fb338acf068039070e8f767ee GIT binary patch literal 2468 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 ihWl;p@_t$b?&N19grwO|NM3>f0000 ( + <> + + {props.children} + +); + +export const V2BaseEmailHtml = (props: { + children: React.ReactNode; + callToAction?: React.ReactNode; + subject: string; + title?: string; + subtitle?: React.ReactNode; + headerType?: BodyHeadType; +}) => { + return ( + + + +
+ + + + {props.headerType && } + {props.title && } + {(props.headerType || props.title || props.subtitle) && } + +
`} + /> +
+ +
+
`} + /> +
`} + /> +
+ +
+ + + + + + + + {props.callToAction && } +
`} + /> +
+ +
+
+ {props.children} +
+
`} + /> + +
+ +
+ + + + + + + + + + + )} + + + + + + + + + + ); +}; diff --git a/packages/emails/src/components/index.ts b/packages/emails/src/components/index.ts index a01f573d69..32a5906b46 100644 --- a/packages/emails/src/components/index.ts +++ b/packages/emails/src/components/index.ts @@ -1,4 +1,5 @@ export { BaseEmailHtml } from "./BaseEmailHtml"; +export { V2BaseEmailHtml } from "./V2BaseEmailHtml"; export { CallToAction } from "./CallToAction"; export { CallToActionTable } from "./CallToActionTable"; export { CustomInputs } from "./CustomInputs"; diff --git a/packages/emails/src/templates/TeamInviteEmail.tsx b/packages/emails/src/templates/TeamInviteEmail.tsx index 3d4b6d6838..03332e173b 100644 --- a/packages/emails/src/templates/TeamInviteEmail.tsx +++ b/packages/emails/src/templates/TeamInviteEmail.tsx @@ -1,8 +1,8 @@ import type { TFunction } from "next-i18next"; -import { APP_NAME } from "@calcom/lib/constants"; +import { APP_NAME, BASE_URL, IS_PRODUCTION } from "@calcom/lib/constants"; -import { BaseEmailHtml, CallToAction } from "../components"; +import { V2BaseEmailHtml, CallToAction } from "../components"; type TeamInvite = { language: TFunction; @@ -12,15 +12,36 @@ type TeamInvite = { joinLink: string; }; -export const TeamInviteEmail = (props: TeamInvite & Partial>) => { +export const TeamInviteEmail = ( + props: TeamInvite & Partial> +) => { return ( - -

+ +

<> {props.language("user_invited_you", { user: props.from, @@ -30,21 +51,22 @@ export const TeamInviteEmail = (props: TeamInvite & Partial

-

+

<>{props.language("calcom_explained", { appName: APP_NAME })}

-
-

+

+

<> {props.language("have_any_questions")}{" "} - <>{props.language("contact_our_support_team")} - + <>{props.language("contact")} + {" "} + {props.language("our_support_team")}

- + ); };
`} + /> + {props.callToAction && ( +
+ +
+ {props.callToAction} +
+
+