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 0000000000..1e65560d2c Binary files /dev/null and b/apps/web/public/emails/teamCircle@2x.png differ diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 7b49fd0350..9bc0537c58 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -6,7 +6,7 @@ "second_other": "{{count}} seconds", "upgrade_now": "Upgrade now", "accept_invitation": "Accept Invitation", - "calcom_explained": "{{appName}} is the open source Calendly alternative putting you in control of your own data, workflow and appearance.", + "calcom_explained": "{{appName}} provides scheduling infrastructure for absolutely everyone.", "have_any_questions": "Have questions? We're here to help.", "reset_password_subject": "{{appName}}: Reset password instructions", "event_declined_subject": "Declined: {{eventType}} with {{name}} at {{date}}", @@ -385,7 +385,8 @@ "go_to_billing_portal": "Go to the billing portal", "need_anything_else": "Need anything else?", "further_billing_help": "If you need any further help with billing, our support team are here to help.", - "contact_our_support_team": "Contact our support team", + "contact": "Contact", + "our_support_team": "our support team", "uh_oh": "Uh oh!", "no_event_types_have_been_setup": "This user hasn't set up any event types yet.", "edit_logo": "Edit logo", diff --git a/packages/emails/src/components/V2BaseEmailHtml.tsx b/packages/emails/src/components/V2BaseEmailHtml.tsx new file mode 100644 index 0000000000..bd040217b3 --- /dev/null +++ b/packages/emails/src/components/V2BaseEmailHtml.tsx @@ -0,0 +1,191 @@ +/* eslint-disable @next/next/no-head-element */ +import BaseTable from "./BaseTable"; +import EmailBodyLogo from "./EmailBodyLogo"; +import EmailHead from "./EmailHead"; +import EmailScheduledBodyHeaderContent from "./EmailScheduledBodyHeaderContent"; +import EmailSchedulingBodyDivider from "./EmailSchedulingBodyDivider"; +import EmailSchedulingBodyHeader, { BodyHeadType } from "./EmailSchedulingBodyHeader"; +import RawHtml from "./RawHtml"; +import Row from "./Row"; + +const Html = (props: { children: React.ReactNode }) => ( + <> + + {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} +
+
+