diff --git a/apps/web/lib/video/[uid]/getServerSideProps.ts b/apps/web/lib/video/[uid]/getServerSideProps.ts index aa75fb5490..c12cfa44e6 100644 --- a/apps/web/lib/video/[uid]/getServerSideProps.ts +++ b/apps/web/lib/video/[uid]/getServerSideProps.ts @@ -7,6 +7,7 @@ import { updateMeetingTokenIfExpired, } from "@calcom/app-store/dailyvideo/lib/VideoApiAdapter"; import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; +import { FeaturesRepository } from "@calcom/features/flags/features.repository"; import { getCalVideoReference } from "@calcom/features/get-cal-video-reference"; import { CAL_VIDEO_MEETING_LINK_FOR_TESTING } from "@calcom/lib/constants"; import { isENVDev } from "@calcom/lib/env"; @@ -135,6 +136,11 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { const videoReference = getCalVideoReference(bookingObj.references); + const featureRepo = new FeaturesRepository(); + const displayLogInOverlay = profile?.organizationId + ? await featureRepo.checkIfTeamHasFeature(profile.organizationId, "cal-video-log-in-overlay") + : false; + return { props: { meetingUrl: videoReference.meetingUrl ?? "", @@ -153,6 +159,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { }, hasTeamPlan: !!hasTeamPlan, calVideoLogo, + displayLogInOverlay, + loggedInUserName: sessionUserId ? session?.user?.name : undefined, }, }; } diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx index 858088f61d..280de021e4 100644 --- a/apps/web/modules/videos/views/videos-single-view.tsx +++ b/apps/web/modules/videos/views/videos-single-view.tsx @@ -7,12 +7,15 @@ import { useState, useEffect, useRef } from "react"; import dayjs from "@calcom/dayjs"; import { WEBSITE_URL } from "@calcom/lib/constants"; +import { WEBAPP_URL } from "@calcom/lib/constants"; import { TRANSCRIPTION_STOPPED_ICON, RECORDING_DEFAULT_ICON } from "@calcom/lib/constants"; import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; import type { inferSSRProps } from "@calcom/types/inferSSRProps"; import classNames from "@calcom/ui/classNames"; +import { Button } from "@calcom/ui/components/button"; +import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; import { Icon } from "@calcom/ui/components/icon"; import type { getServerSideProps } from "@lib/video/[uid]/getServerSideProps"; @@ -22,7 +25,15 @@ import { CalAiTranscribe } from "~/videos/ai/ai-transcribe"; export type PageProps = inferSSRProps; export default function JoinCall(props: PageProps) { - const { meetingUrl, meetingPassword, booking, hasTeamPlan, calVideoLogo } = props; + const { + meetingUrl, + meetingPassword, + booking, + hasTeamPlan, + calVideoLogo, + displayLogInOverlay, + loggedInUserName, + } = props; const [daily, setDaily] = useState(null); useEffect(() => { @@ -50,6 +61,7 @@ export default function JoinCall(props: PageProps) { height: "100%", }, url: meetingUrl, + userName: loggedInUserName ? loggedInUserName ?? undefined : undefined, ...(typeof meetingPassword === "string" && { token: meetingPassword }), ...(hasTeamPlan && { customTrayButtons: { @@ -112,6 +124,8 @@ export default function JoinCall(props: PageProps) { /> )} + {displayLogInOverlay && } + ); @@ -187,6 +201,58 @@ function ProgressBar(props: ProgressBarProps) { ); } +interface LogInOverlayProps { + isLoggedIn: boolean; + bookingUid: string; +} + +export function LogInOverlay(props: LogInOverlayProps) { + const { t } = useLocale(); + const { isLoggedIn, bookingUid } = props; + const [open, setOpen] = useState(!isLoggedIn); + + return ( + + +
+
+ + + {/* Divider */} +
+
+ +
+
+ {t("or")} +
+
+ +
+

{t("sign_in_to_cal_com")}

+

{t("track_your_meetings")}

+ +
+
+
+ + + ); +} + interface VideoMeetingInfo { booking: PageProps["booking"]; } diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index ecda2c17dd..eabe5fc2bf 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -620,6 +620,7 @@ "your_full_name": "Your full name", "no_name": "No name", "enter_number_between_range": "Please enter a number between 1 and {{maxOccurences}}", + "continue_as_guest_description": "Quick and easy - no account required. Perfect for one-time meetings.", "email_address": "Email address", "enter_valid_email": "Please enter a valid email", "please_schedule_future_call": " Please schedule a future call if we're not available in {{seconds}} seconds", @@ -629,6 +630,7 @@ "in_person_attendee_address": "In Person (Attendee Address)", "somewhere_else": "Somewhere Else", "custom_attendee_location": "Custom attendee location", + "continue_as_guest": "Continue as Guest", "any_location": "Any location", "yes": "Yes", "no": "No", @@ -1297,6 +1299,11 @@ "event_cancelled_trigger": "when event is canceled", "after_hosts_cal_video_no_show": "After hosts didn't join cal video", "after_guests_cal_video_no_show": "After guests didn't join cal video", + "join_video_call": "Join the video call", + "sign_in_to_cal_com": "Sign in to your Cal.com account", + "log_in_to_cal_com": "Log in to Cal.com", + "track_your_meetings": "Track your meetings, get notifications, and manage your schedule more effectively.", + "choose_how_you_d_like_to_join_call": "Choose how you'd like to join this call", "new_event_trigger": "when new event is booked", "email_host_action": "send email to host", "email_attendee_action": "send email to attendees", diff --git a/packages/features/flags/config.ts b/packages/features/flags/config.ts index 5b83cfd34c..5a03e67618 100644 --- a/packages/features/flags/config.ts +++ b/packages/features/flags/config.ts @@ -18,4 +18,5 @@ export type AppFlags = { "organizer-request-email-v2": boolean; "delegation-credential": boolean; "salesforce-crm-tasker": boolean; + "cal-video-log-in-overlay": boolean; }; diff --git a/packages/features/flags/hooks/index.ts b/packages/features/flags/hooks/index.ts index 556363af24..4f10d5d8fc 100644 --- a/packages/features/flags/hooks/index.ts +++ b/packages/features/flags/hooks/index.ts @@ -17,6 +17,7 @@ const initialData: AppFlags = { "organizer-request-email-v2": false, "delegation-credential": false, "salesforce-crm-tasker": false, + "cal-video-log-in-overlay": false, }; if (process.env.NEXT_PUBLIC_IS_E2E) { diff --git a/packages/prisma/migrations/20250502154530900_add_login_overlay/migration.sql b/packages/prisma/migrations/20250502154530900_add_login_overlay/migration.sql new file mode 100644 index 0000000000..0fb8270445 --- /dev/null +++ b/packages/prisma/migrations/20250502154530900_add_login_overlay/migration.sql @@ -0,0 +1,9 @@ +INSERT INTO + "Feature" (slug, enabled, description, "type") +VALUES + ( + 'cal-video-log-in-overlay', + false, + 'Enable Log In Overlay - Allows system to show a log in overlay on the Cal Video page.', + 'OPERATIONAL' + ) ON CONFLICT (slug) DO NOTHING; \ No newline at end of file