diff --git a/apps/web/public/emails/calendar-email-hero.png b/apps/web/public/emails/calendar-email-hero.png new file mode 100644 index 0000000000..8e22e31f69 Binary files /dev/null and b/apps/web/public/emails/calendar-email-hero.png differ diff --git a/apps/web/public/emails/calendar@2x.png b/apps/web/public/emails/calendar@2x.png new file mode 100644 index 0000000000..77561d880e Binary files /dev/null and b/apps/web/public/emails/calendar@2x.png differ diff --git a/apps/web/public/emails/choose-username@2x.png b/apps/web/public/emails/choose-username@2x.png new file mode 100644 index 0000000000..282a93f210 Binary files /dev/null and b/apps/web/public/emails/choose-username@2x.png differ diff --git a/apps/web/public/emails/clock@2x.png b/apps/web/public/emails/clock@2x.png new file mode 100644 index 0000000000..0255e51a68 Binary files /dev/null and b/apps/web/public/emails/clock@2x.png differ diff --git a/apps/web/public/emails/linkIcon.png b/apps/web/public/emails/linkIcon.png index a07de65203..853a93c2e7 100644 Binary files a/apps/web/public/emails/linkIcon.png and b/apps/web/public/emails/linkIcon.png differ diff --git a/apps/web/public/emails/linkIcon.svg b/apps/web/public/emails/linkIcon.svg index 6f3751ebd9..f0732e7e6e 100644 --- a/apps/web/public/emails/linkIcon.svg +++ b/apps/web/public/emails/linkIcon.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/apps/web/public/emails/user-check@2x.png b/apps/web/public/emails/user-check@2x.png new file mode 100644 index 0000000000..262c1a2473 Binary files /dev/null and b/apps/web/public/emails/user-check@2x.png differ diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 3673aae687..46ff40932c 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -7,6 +7,7 @@ "upgrade_now": "Upgrade now", "accept_invitation": "Accept Invitation", "calcom_explained": "{{appName}} provides scheduling infrastructure for absolutely everyone.", + "calcom_explained_new_user": "Finish setting up your {{appName}} account! You’re just a few steps away from solving all your scheduling problems.", "have_any_questions": "Have questions? We're here to help.", "reset_password_subject": "{{appName}}: Reset password instructions", "event_declined_subject": "Declined: {{title}} at {{date}}", @@ -1536,5 +1537,15 @@ "delete_sso_configuration": "Delete {{connectionType}} configuration", "delete_sso_configuration_confirmation": "Yes, delete {{connectionType}} configuration", "delete_sso_configuration_confirmation_description": "Are you sure you want to delete the {{connectionType}} configuration? Your team members who use {{connectionType}} login will no longer be able to access Cal.com.", + "email_no_user_cta":"Create your account", + "email_user_cta":"View Invitation", + "email_no_user_invite_heading":"You’ve been invited to join a team on {{appName}}", + "email_no_user_invite_subheading":"{{invitedBy}} has invited you to join their team on {{appName}}. {{appName}} is the event-juggling scheduler that enables you and your team to schedule meetings without the email tennis.", + "email_no_user_invite_steps_intro":"We’ll walk you through a few short steps and you’ll be enjoying stress free scheduling with your team in no time.", + "email_no_user_step_one":"Choose your username", + "email_no_user_step_two":"Connect your calendar account", + "email_no_user_step_three":"Set your Availability", + "email_no_user_step_four":"Join {{teamName}}", + "email_no_user_signoff":"Happy Scheduling from the {{appName}} team", "impersonation_user_tip": "You are about to impersonate a user, which means you can make changes on their behalf. Please be careful." } diff --git a/packages/emails/src/components/CallToAction.tsx b/packages/emails/src/components/CallToAction.tsx index 31276d89f3..0ba00f1b96 100644 --- a/packages/emails/src/components/CallToAction.tsx +++ b/packages/emails/src/components/CallToAction.tsx @@ -14,7 +14,7 @@ export const CallToAction = (props: { label: string; href: string; secondary?: b margin: 0, textDecoration: "none", textTransform: "none", - padding: "10px 16px", + padding: "16px 24px", // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore msoPaddingAlt: "0px", diff --git a/packages/emails/src/components/V2BaseEmailHtml.tsx b/packages/emails/src/components/V2BaseEmailHtml.tsx index bd040217b3..5e4c90e7c4 100644 --- a/packages/emails/src/components/V2BaseEmailHtml.tsx +++ b/packages/emails/src/components/V2BaseEmailHtml.tsx @@ -26,8 +26,8 @@ export const V2BaseEmailHtml = (props: { return ( - -
+ +
`} /> diff --git a/packages/emails/src/templates/TeamInviteEmail.tsx b/packages/emails/src/templates/TeamInviteEmail.tsx index 03332e173b..14a0cbc0eb 100644 --- a/packages/emails/src/templates/TeamInviteEmail.tsx +++ b/packages/emails/src/templates/TeamInviteEmail.tsx @@ -1,6 +1,7 @@ import type { TFunction } from "next-i18next"; +import { ReactNode } from "react"; -import { APP_NAME, BASE_URL, IS_PRODUCTION } from "@calcom/lib/constants"; +import { APP_NAME, WEBAPP_URL, IS_PRODUCTION } from "@calcom/lib/constants"; import { V2BaseEmailHtml, CallToAction } from "../components"; @@ -10,6 +11,7 @@ type TeamInvite = { to: string; teamName: string; joinLink: string; + isCalcomMember: boolean; }; export const TeamInviteEmail = ( @@ -22,39 +24,100 @@ export const TeamInviteEmail = ( team: props.teamName, appName: APP_NAME, })}> +

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

-

- <> - {props.language("user_invited_you", { - user: props.from, - team: props.teamName, - appName: APP_NAME, - })} - ! - +

+ <>{props.language("email_no_user_invite_subheading", { invitedBy: props.from, appName: APP_NAME })}

-

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

+ +
+

+ <>{props.language("email_no_user_invite_steps_intro")}

- + + {!props.isCalcomMember && ( +
+ + + + +
+ )} + +
+

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

+

@@ -70,3 +133,34 @@ export const TeamInviteEmail = ( ); }; + +const EmailStep = (props: { translationString: string; iconsrc: string }) => { + return ( +

+
+ # +
+

+ <>{props.translationString} +

+
+ ); +}; diff --git a/packages/emails/templates/team-invite-email.ts b/packages/emails/templates/team-invite-email.ts index e8461f644b..be70399e71 100644 --- a/packages/emails/templates/team-invite-email.ts +++ b/packages/emails/templates/team-invite-email.ts @@ -11,6 +11,7 @@ export type TeamInvite = { to: string; teamName: string; joinLink: string; + isCalcomMember: boolean; }; export default class TeamInviteEmail extends BaseEmail { diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx index ccd98e2f32..3b2c47401a 100644 --- a/packages/features/ee/teams/components/MemberInvitationModal.tsx +++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx @@ -153,7 +153,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps) color="primary" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" data-testid="invite-new-member-button"> - {t("invite_new_member")} + {t("invite")} diff --git a/packages/trpc/server/routers/viewer/teams.tsx b/packages/trpc/server/routers/viewer/teams.tsx index 4f47189e13..5787b42b10 100644 --- a/packages/trpc/server/routers/viewer/teams.tsx +++ b/packages/trpc/server/routers/viewer/teams.tsx @@ -279,8 +279,6 @@ export const viewerTeamsRouter = router({ }, }); - let inviteeUserId: number | undefined = invitee?.id; - if (!invitee) { // liberal email match @@ -291,7 +289,7 @@ export const viewerTeamsRouter = router({ }); // valid email given, create User and add to team - const user = await ctx.prisma.user.create({ + await ctx.prisma.user.create({ data: { email: input.usernameOrEmail, invitedTo: input.teamId, @@ -303,7 +301,6 @@ export const viewerTeamsRouter = router({ }, }, }); - inviteeUserId = user.id; const token: string = randomBytes(32).toString("hex"); @@ -314,7 +311,6 @@ export const viewerTeamsRouter = router({ expires: new Date(new Date().setHours(168)), // +1 week }, }); - if (ctx?.user?.name && team?.name) { await sendTeamInviteEmail({ language: translation, @@ -322,6 +318,7 @@ export const viewerTeamsRouter = router({ to: input.usernameOrEmail, teamName: team.name, joinLink: `${WEBAPP_URL}/signup?token=${token}&callbackUrl=/teams`, + isCalcomMember: false, }); } } else { @@ -357,6 +354,7 @@ export const viewerTeamsRouter = router({ to: sendTo, teamName: team.name, joinLink: WEBAPP_URL + "/settings/teams", + isCalcomMember: true, }); } }