diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx index 54a0bb0d21..e9ba661766 100644 --- a/apps/web/pages/settings/my-account/appearance.tsx +++ b/apps/web/pages/settings/my-account/appearance.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import type { z } from "zod"; import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector"; import ThemeLabel from "@calcom/features/settings/ThemeLabel"; @@ -9,6 +10,7 @@ import { checkWCAGContrastColor } from "@calcom/lib/getBrandColours"; import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { validateBookerLayouts } from "@calcom/lib/validateBookerLayouts"; +import type { userMetadata } from "@calcom/prisma/zod-utils"; import { trpc } from "@calcom/trpc/react"; import { Alert, @@ -64,7 +66,7 @@ const AppearanceView = () => { brandColor: user?.brandColor || "#292929", darkBrandColor: user?.darkBrandColor || "#fafafa", hideBranding: user?.hideBranding, - defaultBookerLayouts: user?.defaultBookerLayouts, + metadata: user?.metadata as z.infer, }, }); @@ -99,7 +101,7 @@ const AppearanceView = () => {
{ - const layoutError = validateBookerLayouts(values.defaultBookerLayouts || null); + const layoutError = validateBookerLayouts(values?.metadata?.defaultBookerLayouts || null); if (layoutError) throw new Error(t(layoutError)); mutation.mutate({ diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index e3036c388c..44a2598efb 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -5,9 +5,8 @@ import StickyBox from "react-sticky-box"; import { shallow } from "zustand/shallow"; import classNames from "@calcom/lib/classNames"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; import useMediaQuery from "@calcom/lib/hooks/useMediaQuery"; -import { BookerLayouts, bookerLayoutOptions } from "@calcom/prisma/zod-utils"; +import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils"; import { AvailableTimeSlots } from "./components/AvailableTimeSlots"; import { BookEventForm } from "./components/BookEventForm"; @@ -35,7 +34,6 @@ const BookerComponent = ({ rescheduleBooking, hideBranding = false, }: BookerProps) => { - const { t } = useLocale(); const isMobile = useMediaQuery("(max-width: 768px)"); const isTablet = useMediaQuery("(max-width: 1024px)"); const timeslotsRef = useRef(null); @@ -51,10 +49,7 @@ const BookerComponent = ({ shallow ); const extraDays = layout === BookerLayouts.COLUMN_VIEW ? (isTablet ? 2 : 4) : 0; - const bookerLayouts = event.data?.profile?.bookerLayouts || { - defaultLayout: BookerLayouts.MONTH_VIEW, - enabledLayouts: bookerLayoutOptions, - }; + const bookerLayouts = event.data?.profile?.bookerLayouts || defaultBookerLayoutSettings; const animationScope = useBookerResizeAnimation(layout, bookerState); diff --git a/packages/features/settings/BookerLayoutSelector.tsx b/packages/features/settings/BookerLayoutSelector.tsx index 59176b86f9..a623ef510d 100644 --- a/packages/features/settings/BookerLayoutSelector.tsx +++ b/packages/features/settings/BookerLayoutSelector.tsx @@ -7,7 +7,7 @@ import { Controller, useFormContext } from "react-hook-form"; import { useFlagMap } from "@calcom/features/flags/context/provider"; import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { BookerLayouts } from "@calcom/prisma/zod-utils"; +import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils"; import { bookerLayoutOptions, type BookerLayoutSettings } from "@calcom/prisma/zod-utils"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import { Label, Checkbox, Button } from "@calcom/ui"; @@ -85,19 +85,28 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayo // Converts the settings array into a boolean object, which can be used as form values. const toggleValues: BookerLayoutState = bookerLayoutOptions.reduce((layouts, layout) => { layouts[layout] = !shownSettings?.enabledLayouts - ? true + ? defaultBookerLayoutSettings.enabledLayouts.indexOf(layout) > -1 : shownSettings.enabledLayouts.indexOf(layout) > -1; return layouts; }, {} as BookerLayoutState); const onLayoutToggleChange = useCallback( (changedLayout: BookerLayouts, checked: boolean) => { + const newEnabledLayouts = Object.keys(toggleValues).filter((layout) => { + if (changedLayout === layout) return checked === true; + return toggleValues[layout as BookerLayouts] === true; + }) as BookerLayouts[]; + + const isDefaultLayoutToggledOff = newEnabledLayouts.indexOf(defaultLayout) === -1; + const firstEnabledLayout = newEnabledLayouts[0]; + onChange({ - enabledLayouts: Object.keys(toggleValues).filter((layout) => { - if (changedLayout === layout) return checked === true; - return toggleValues[layout as BookerLayouts] === true; - }) as BookerLayouts[], - defaultLayout, + enabledLayouts: newEnabledLayouts, + // If default layout is toggled off, we set the default layout to the first enabled layout + // if there's none enabled, we set it to month view. + defaultLayout: isDefaultLayoutToggledOff + ? firstEnabledLayout || BookerLayouts.MONTH_VIEW + : defaultLayout, }); }, [defaultLayout, onChange, toggleValues] @@ -149,6 +158,7 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayo ))}