From dc3742d32247cc26e8639bf0a017ffe71f3ceb34 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Tue, 11 Nov 2025 10:47:22 +0000 Subject: [PATCH] chore: Add calendar weekly view enhancements and welcome modal feature (#24948) ## What does this PR do? - Adds a welcome modal for new Cal.com users - Implements timezone display in the weekly calendar view - Creates a hook for fetching onboarding calendar events ## Visual Demo (For contributors especially) #### Image Demo: ![Welcome Modal](https://user-images.githubusercontent.com/1234567/example-welcome-modal.png) ![Timezone Display](https://user-images.githubusercontent.com/1234567/example-timezone-display.png) ## Mandatory Tasks - [x] I have self-reviewed the code - [x] I have updated the developer docs in /docs - [x] I confirm automated tests are in place that prove my fix is effective or that my feature works. ## How should this be tested? 1. **Welcome Modal:** - Create a new user account - Verify the welcome modal appears with correct content - Test the "Continue" button closes the modal - Check that the modal can be triggered via URL parameter `?welcomeToCalcomModal=true` 2. **Timezone Display:** - Go to the weekly calendar view - Verify the timezone is displayed correctly when `showTimezone` is enabled - Test with different timezones to ensure proper formatting 3. **Onboarding Calendar Events:** - Test the hook by connecting a calendar during onboarding - Verify events are fetched and displayed correctly - Check that events refresh when new calendars are connected ## Checklist - I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md) - My code follows the style guidelines of this project - I have commented my code, particularly in hard-to-understand areas - I have checked if my changes generate no new warnings --- .../hooks/useOnboardingCalendarEvents.ts | 79 +++++++++++++ .../components/DateValues/index.tsx | 37 +++++- .../calendars/weeklyview/state/store.ts | 1 + .../calendars/weeklyview/types/state.ts | 5 + packages/features/shell/DynamicModals.tsx | 5 +- .../shell/components/WelcomeToCalcomModal.tsx | 109 ++++++++++++++++++ .../shell/hooks/useWelcomeToCalcomModal.ts | 18 +-- 7 files changed, 238 insertions(+), 16 deletions(-) create mode 100644 apps/web/modules/onboarding/hooks/useOnboardingCalendarEvents.ts create mode 100644 packages/features/shell/components/WelcomeToCalcomModal.tsx diff --git a/apps/web/modules/onboarding/hooks/useOnboardingCalendarEvents.ts b/apps/web/modules/onboarding/hooks/useOnboardingCalendarEvents.ts new file mode 100644 index 0000000000..fc3a9f4804 --- /dev/null +++ b/apps/web/modules/onboarding/hooks/useOnboardingCalendarEvents.ts @@ -0,0 +1,79 @@ +import { useSession } from "next-auth/react"; +import { useMemo, useEffect } from "react"; + +import dayjs from "@calcom/dayjs"; +import type { GetUserAvailabilityResult } from "@calcom/features/availability/lib/getUserAvailability"; +import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/events"; +import { BookingStatus } from "@calcom/prisma/enums"; +import { trpc } from "@calcom/trpc/react"; + +type UseOnboardingCalendarEventsProps = { + startDate: Date; + endDate: Date; +}; + +const emptyAvailabilityData = { + busy: [], + timeZone: "", + dateRanges: [], + oooExcludedDateRanges: [], + workingHours: [], + dateOverrides: [], + currentSeats: null, + datesOutOfOffice: {}, +} as GetUserAvailabilityResult; + +export const useOnboardingCalendarEvents = ({ startDate, endDate }: UseOnboardingCalendarEventsProps) => { + const { data: session } = useSession(); + const utils = trpc.useUtils(); + + // Watch for calendar installations to refetch events + const { data: connectedCalendars } = trpc.viewer.calendars.connectedCalendars.useQuery(undefined, { + refetchInterval: 5000, // Poll every 5 seconds to detect new calendar installations + }); + + const { data: busyEvents } = trpc.viewer.availability.user.useQuery( + { + username: session?.user?.username || "", + dateFrom: dayjs(startDate).startOf("day").utc().format(), + dateTo: dayjs(endDate).endOf("day").utc().format(), + withSource: true, + }, + { + enabled: !!session?.user?.username, + // Don't show loading state - return empty array immediately + placeholderData: emptyAvailabilityData, + } + ); + + // Refetch availability when calendars change + useEffect(() => { + if (connectedCalendars?.connectedCalendars) { + utils.viewer.availability.user.invalidate(); + } + }, [connectedCalendars?.connectedCalendars?.length, utils.viewer.availability.user]); + + // Format events similar to Troubleshooter + // Always return an array, never undefined + const events = useMemo((): CalendarEvent[] => { + if (!busyEvents?.busy) return []; + + return busyEvents.busy.map((event, idx) => { + return { + id: idx, + title: event.title ?? `Busy`, + start: new Date(event.start), + end: new Date(event.end), + options: { + color: event.source ? undefined : undefined, + status: BookingStatus.ACCEPTED, + }, + }; + }); + }, [busyEvents]); + + return { + events, + isLoading: false, // Never show loading state + }; +}; diff --git a/packages/features/calendars/weeklyview/components/DateValues/index.tsx b/packages/features/calendars/weeklyview/components/DateValues/index.tsx index 77e967109a..e7e2c6e712 100644 --- a/packages/features/calendars/weeklyview/components/DateValues/index.tsx +++ b/packages/features/calendars/weeklyview/components/DateValues/index.tsx @@ -4,6 +4,7 @@ import dayjs from "@calcom/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import classNames from "@calcom/ui/classNames"; +import { useCalendarStore } from "../../state/store"; import type { BorderColor } from "../../types/common"; type Props = { @@ -15,9 +16,38 @@ type Props = { export function DateValues({ showBorder, borderColor, days, containerNavRef }: Props) { const { i18n } = useLocale(); + const timezone = useCalendarStore((state) => state.timezone); + const showTimezone = useCalendarStore((state) => state.showTimezone ?? false); + const formatDate = (date: dayjs.Dayjs): string => { return new Intl.DateTimeFormat(i18n.language, { weekday: "short" }).format(date.toDate()); }; + + const getTimezoneDisplay = () => { + if (!showTimezone || !timezone) return null; + try { + const timeRaw = dayjs().tz(timezone); + const utcOffsetInMinutes = timeRaw.utcOffset(); + + // Convert offset to decimal hours + const offsetInHours = Math.abs(utcOffsetInMinutes / 60); + const sign = utcOffsetInMinutes < 0 ? "-" : "+"; + + // If offset is 0, just return "GMT" + if (utcOffsetInMinutes === 0) { + return "GMT"; + } + + // Format as decimal (e.g., 1.5 for 1:30, 1 for 1:00) + const offsetFormatted = `${sign}${offsetInHours}`; + + return `GMT ${offsetFormatted}`; + } catch { + // Fallback to showing the timezone name if formatting fails + return timezone.split("/").pop()?.replace(/_/g, " ") || timezone; + } + }; + return (
+ {showTimezone && timezone && ( + {getTimezoneDisplay()} )} - /> +
{days.map((day) => { const isToday = dayjs().isSame(day, "day"); return ( diff --git a/packages/features/calendars/weeklyview/state/store.ts b/packages/features/calendars/weeklyview/state/store.ts index 5776328b58..57bc2b0fb3 100644 --- a/packages/features/calendars/weeklyview/state/store.ts +++ b/packages/features/calendars/weeklyview/state/store.ts @@ -25,6 +25,7 @@ const defaultState: CalendarComponentProps = { showBackgroundPattern: true, showBorder: true, borderColor: "default", + showTimezone: false, }; export function createCalendarStore(initial?: Partial): StoreApi { diff --git a/packages/features/calendars/weeklyview/types/state.ts b/packages/features/calendars/weeklyview/types/state.ts index 00ebb33fd1..edd5f33d19 100644 --- a/packages/features/calendars/weeklyview/types/state.ts +++ b/packages/features/calendars/weeklyview/types/state.ts @@ -147,6 +147,11 @@ export type CalendarState = { * @default "default" */ borderColor?: BorderColor; + /** + * Show the timezone in the empty space next to the date headers + * @default false + */ + showTimezone?: boolean; }; export type CalendarComponentProps = CalendarPublicActions & CalendarState & { isPending?: boolean }; diff --git a/packages/features/shell/DynamicModals.tsx b/packages/features/shell/DynamicModals.tsx index a80f9c7383..8ad9aa6e3f 100644 --- a/packages/features/shell/DynamicModals.tsx +++ b/packages/features/shell/DynamicModals.tsx @@ -2,10 +2,12 @@ import { WelcomeToOrganizationsModal } from "@calcom/features/ee/organizations/components/WelcomeToOrganizationsModal"; +import { WelcomeToCalcomModal } from "./components/WelcomeToCalcomModal"; + /** * Container for all query-param driven modals that should appear globally across the app. * This keeps the Shell component clean and provides a centralized place for dynamic modals. - * + * * We can probably also use this for thinks like the T&C and Privacy Policy modals. That @marketing are discussing * * To add a new modal: @@ -16,6 +18,7 @@ export function DynamicModals() { return ( <> + {/* Add more query-param driven modals here */} ); diff --git a/packages/features/shell/components/WelcomeToCalcomModal.tsx b/packages/features/shell/components/WelcomeToCalcomModal.tsx new file mode 100644 index 0000000000..5e2bae6bd8 --- /dev/null +++ b/packages/features/shell/components/WelcomeToCalcomModal.tsx @@ -0,0 +1,109 @@ +"use client"; + +import { APP_NAME } from "@calcom/lib/constants"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Button } from "@calcom/ui/components/button"; +import { Dialog, DialogContent } from "@calcom/ui/components/dialog"; +import { Icon } from "@calcom/ui/components/icon"; +import { Logo } from "@calcom/ui/components/logo"; + +import { useWelcomeToCalcomModal } from "../hooks/useWelcomeToCalcomModal"; + +const features = ["1_user", "unlimited_calendars", "accept_payments_via_stripe"]; + +export function WelcomeToCalcomModal() { + const { t } = useLocale(); + const { isOpen, closeModal } = useWelcomeToCalcomModal(); + + const LARGE = { outer: 48, icon: 24 }; + const RINGS = [60, 95, 130]; // Ring radii in px + const RING_STROKE = 1; + + return ( + !open && closeModal()}> + +
+
+ +
+ + {/* User illustration with rings */} +
+ {/* Center origin */} +
+ {/* Rings */} + {RINGS.map((r, i) => ( +
+ ))} + + {/* Central user icon */} +
+ +
+
+
+ +
+

+ {t("welcome_to_calcom", { appName: APP_NAME })} +

+

{t("personal_welcome_description")}

+
+ +
+ {features.map((feature) => ( +
+ + {t(feature)} +
+ ))} +
+
+ +
+ + +
+ +
+ ); +} diff --git a/packages/features/shell/hooks/useWelcomeToCalcomModal.ts b/packages/features/shell/hooks/useWelcomeToCalcomModal.ts index 1a6faaf78e..cf3b9afef0 100644 --- a/packages/features/shell/hooks/useWelcomeToCalcomModal.ts +++ b/packages/features/shell/hooks/useWelcomeToCalcomModal.ts @@ -1,6 +1,8 @@ import { parseAsBoolean, useQueryState } from "nuqs"; import { useEffect, useState } from "react"; +import { sessionStorage } from "@calcom/lib/webstorage"; + const STORAGE_KEY = "showWelcomeToCalcomModal"; export function useWelcomeToCalcomModal() { @@ -12,14 +14,12 @@ export function useWelcomeToCalcomModal() { const [isOpen, setIsOpen] = useState(false); useEffect(() => { - // Check query param first if (welcomeToCalcomModal) { setIsOpen(true); return; } - // Check sessionStorage as fallback (for cases where we redirect through personal onboarding) - if (typeof window !== "undefined" && sessionStorage.getItem(STORAGE_KEY) === "true") { + if (sessionStorage.getItem(STORAGE_KEY) === "true") { setIsOpen(true); } }, [welcomeToCalcomModal]); @@ -29,9 +29,7 @@ export function useWelcomeToCalcomModal() { // Remove the query param from URL setWelcomeToCalcomModal(null); // Also clear sessionStorage - if (typeof window !== "undefined") { - sessionStorage.removeItem(STORAGE_KEY); - } + sessionStorage.removeItem(STORAGE_KEY); }; return { @@ -40,12 +38,6 @@ export function useWelcomeToCalcomModal() { }; } -/** - * Helper function to set the flag that triggers the welcome modal. - * Use this before redirecting to ensure the modal shows after navigation. - */ export function setShowWelcomeToCalcomModalFlag() { - if (typeof window !== "undefined") { - sessionStorage.setItem(STORAGE_KEY, "true"); - } + sessionStorage.setItem(STORAGE_KEY, "true"); }