diff --git a/components/calendar/__tests__/calendar-app.test.tsx b/components/calendar/__tests__/calendar-app.test.tsx index c9e67b2fb..b48778c2b 100644 --- a/components/calendar/__tests__/calendar-app.test.tsx +++ b/components/calendar/__tests__/calendar-app.test.tsx @@ -6,6 +6,8 @@ import { useAuthStore } from '@/stores/auth-store'; import { useSettingsStore } from '@/stores/settings-store'; import { useToastStore } from '@/stores/toast-store'; import { useTaskStore } from '@/stores/task-store'; +import { usePolicyStore } from '@/stores/policy-store'; +import { DEFAULT_ORGANISATION_POLICY } from '@/lib/admin/organisation-policy'; // The whole calendar page, with the shell around it stubbed out and the // stores holding a fixed set of calendars and events. @@ -842,3 +844,23 @@ describe('CalendarApp day view tasks', () => { } }); }); + +describe('CalendarApp company calendars on a phone', () => { + it('lists them in the toolbar\'s calendar list, where hiding one is the synced choice', async () => { + media.mobile = true; + media.desktop = false; + const policy = usePolicyStore.getState().policy; + usePolicyStore.setState({ policy: { ...policy, organisation: { ...DEFAULT_ORGANISATION_POLICY, calendars: { feeds: [{ id: 'hol', name: 'Holidays', url: '', urlHeld: true, color: '#16a34a', refreshMinutes: 60 }], freeBusyGroup: '' } } } }); + useSettingsStore.setState({ hiddenCompanyCalendars: [] } as never); + try { + renderApp(); + // The toolbar's list (the sidebar heading has the same words). + fireEvent.click(document.querySelector('button[aria-label="my_calendars"]')!); + const list = (await screen.findByRole('heading', { name: 'my_calendars' })).parentElement!; + fireEvent.click(within(list).getByRole('button', { name: 'Holidays' })); + expect(useSettingsStore.getState().hiddenCompanyCalendars).toEqual(['hol']); + } finally { + usePolicyStore.setState({ policy }); + } + }); +}); diff --git a/components/calendar/calendar-app.tsx b/components/calendar/calendar-app.tsx index f69e87802..b38a7d574 100644 --- a/components/calendar/calendar-app.tsx +++ b/components/calendar/calendar-app.tsx @@ -1719,6 +1719,12 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps = return expandRecurringEvents(company.events.filter((e) => !Object.keys(e.calendarIds).some((id) => hidden.has(id))), dateRange.start, dateRange.end); }, [company.events, company.hiddenIds, dateRange]); + // The phone toolbar's calendar list: the user's own and the company calendars. + const toolbarCalendars = useMemo( + () => (company.calendars.length > 0 ? [...displayCalendars, ...company.calendars] : displayCalendars), + [displayCalendars, company.calendars], + ); + const allCalendars = useMemo(() => { const withBirthdays = showBirthdayCalendar ? [...displayCalendars, createBirthdayCalendar(birthdayCalendarName, birthdayCalendarColor)] @@ -2061,9 +2067,9 @@ export function CalendarApp({ linkSegments: routeSegments }: CalendarAppProps = onPrint={() => { void requestPrint({ kind: "calendar-view" }); }} isMobile={isMobile} onNavigateBack={isMobile && mobileReturnToMonth && normalizedViewMode === "day" ? navigateBackToMonth : undefined} - calendars={displayCalendars} - selectedCalendarIds={selectedCalendarIds} - onToggleVisibility={toggleCalendarVisibility} + calendars={toolbarCalendars} + selectedCalendarIds={shownCalendarIds} + onToggleVisibility={toggleShownCalendar} enableCalendarTasks={enableCalendarTasks} onMenuClick={isNarrow ? () => setNarrowSidebarOpen(true) : isMobile ? undefined : toggleSidebarCollapsed} sidebarOpen={isNarrow ? narrowSidebarOpen : !sidebarCollapsed}