cal.pub0.org/packages/features/settings/BookerLayoutSelector.tsx

230 lines
8.9 KiB
TypeScript

import * as RadioGroup from "@radix-ui/react-radio-group";
import { Trans } from "next-i18next";
import Link from "next/link";
import { useCallback, useState } from "react";
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, 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, CheckboxField, Button } from "@calcom/ui";
import SectionBottomActions from "./SectionBottomActions";
type BookerLayoutSelectorProps = {
title?: string;
description?: string;
name?: string;
/**
* If this boolean is set, it will show the user settings if the event does not have any settings (is null).
* In that case it also will NOT register itself in the form, so that way when submitting the form, the
* values won't be overridden. Because as long as the event's value is null, it will fallback to the user's
* settings.
*/
fallbackToUserSettings?: boolean;
/**
* isDark boolean should be passed in when the user selected 'dark mode' in the theme settings in profile/appearance.
* So it's not based on the user's system settings, but on the user's preference for the booker.
* This boolean is then used to show a dark version of the layout image. It's only easthetic, no functionality is attached
* to this boolean.
*/
isDark?: boolean;
isDisabled?: boolean;
};
const defaultFieldName = "metadata.bookerLayouts";
export const BookerLayoutSelector = ({
title,
description,
name,
fallbackToUserSettings,
isDark,
isDisabled = false,
}: BookerLayoutSelectorProps) => {
const { control, getValues } = useFormContext();
const { t } = useLocale();
// Only fallback if event current does not have any settings, and the fallbackToUserSettings boolean is set.
const shouldShowUserSettings = (fallbackToUserSettings && !getValues(name || defaultFieldName)) || false;
const flags = useFlagMap();
if (flags["booker-layouts"] !== true) return null;
return (
<>
<div className="border-subtle rounded-t-xl border p-6">
<Label className="mb-0 text-base font-semibold">{title ? title : t("layout")}</Label>
<p className="text-subtle max-w-full break-words py-1 text-sm">
{description ? description : t("bookerlayout_description")}
</p>
</div>
<Controller
// If the event does not have any settings, we don't want to register this field in the form.
// That way the settings won't get saved into the event on save, but remain null. Thus keep using
// the global user's settings.
control={shouldShowUserSettings ? undefined : control}
name={name || defaultFieldName}
render={({ field: { value, onChange } }) => (
<>
<BookerLayoutFields
showUserSettings={shouldShowUserSettings}
settings={value}
onChange={onChange}
isDark={isDark}
/>
<SectionBottomActions align="end">
<Button type="submit" disabled={isDisabled} color="primary">
{t("update")}
</Button>
</SectionBottomActions>
</>
)}
/>
</>
);
};
type BookerLayoutFieldsProps = {
settings: BookerLayoutSettings;
onChange: (settings: BookerLayoutSettings) => void;
showUserSettings: boolean;
isDark?: boolean;
};
type BookerLayoutState = { [key in BookerLayouts]: boolean };
const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: BookerLayoutFieldsProps) => {
const { t } = useLocale();
const { isLoading: isUserLoading, data: user } = useMeQuery();
const [isOverridingSettings, setIsOverridingSettings] = useState(false);
const disableFields = showUserSettings && !isOverridingSettings;
const shownSettings = disableFields ? user?.defaultBookerLayouts : settings;
const defaultLayout = shownSettings?.defaultLayout || BookerLayouts.MONTH_VIEW;
// 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
? 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: 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]
);
const onDefaultLayoutChange = useCallback(
(newDefaultLayout: BookerLayouts) => {
onChange({
enabledLayouts: Object.keys(toggleValues).filter(
(layout) => toggleValues[layout as BookerLayouts] === true
) as BookerLayouts[],
defaultLayout: newDefaultLayout,
});
},
[toggleValues, onChange]
);
const onOverrideSettings = () => {
setIsOverridingSettings(true);
// Sent default layout settings to form, otherwise it would still have 'null' as it's value.
if (user?.defaultBookerLayouts) onChange(user.defaultBookerLayouts);
};
return (
<div className="border-subtle space-y-5 border-x px-6 py-8">
<div
className={classNames(
"flex flex-col gap-5 transition-opacity sm:flex-row sm:gap-3",
disableFields && "pointer-events-none opacity-40",
disableFields && isUserLoading && "animate-pulse"
)}>
{bookerLayoutOptions.map((layout) => (
<div className="w-full" key={layout}>
<label>
<img
className="mb-3 w-full max-w-none cursor-pointer"
src={`/bookerlayout_${layout}${isDark ? "_dark" : ""}.svg`}
alt="Layout preview"
/>
<CheckboxField
value={layout}
name={`bookerlayout_${layout}`}
description={t(`bookerlayout_${layout}`)}
checked={toggleValues[layout]}
onChange={(ev) => onLayoutToggleChange(layout, ev.target.checked)}
/>
</label>
</div>
))}
</div>
<div
hidden={Object.values(toggleValues).filter((value) => value === true).length <= 1}
className={classNames(
"transition-opacity",
disableFields && "pointer-events-none opacity-40",
disableFields && isUserLoading && "animate-pulse"
)}>
<Label>{t("bookerlayout_default_title")}</Label>
<RadioGroup.Root
key={defaultLayout}
className="border-default flex w-full gap-2 rounded-md border p-1"
defaultValue={defaultLayout}
onValueChange={(layout: BookerLayouts) => onDefaultLayoutChange(layout)}>
{bookerLayoutOptions.map((layout) => (
<RadioGroup.Item
className="aria-checked:bg-emphasis hover:[&:not(:disabled)]:bg-subtle focus:[&:not(:disabled)]:bg-subtle w-full rounded-[4px] p-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
disabled={toggleValues[layout] === false}
key={layout}
value={layout}>
{t(`bookerlayout_${layout}`)}
<RadioGroup.Indicator />
</RadioGroup.Item>
))}
</RadioGroup.Root>
</div>
{disableFields && (
<p className="text-sm">
<Trans i18nKey="bookerlayout_override_global_settings">
You can manage this for all your event types in{" "}
<Link href="/settings/my-account/appearance" className="underline">
settings / appearance
</Link>{" "}
or{" "}
<Button
onClick={onOverrideSettings}
color="minimal"
className="p-0 font-normal underline hover:bg-transparent focus-visible:bg-transparent">
override for this event only
</Button>
.
</Trans>
</p>
)}
</div>
);
};