@calcom/atoms 2.8.0 → 2.8.2

package/src/booker/components/form-builder/form-builder-field.tsx

@@ -1,390 +0,0 @@
-// @ts-nocheck — react-hook-form value/setter union narrowing + @hookform/error-message render prop
-"use client";
-
-import { ErrorMessage } from "@hookform/error-message";
-import { Controller, useFormContext } from "react-hook-form";
-import type { z } from "zod";
-import { Icon } from "../../../components/ui/icon";
-import { InfoBadge } from "../../../components/ui/info-badge";
-import { Label } from "../../../components/ui/label";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { markdownToSafeHTML } from "../../../lib/markdown-to-safe-html";
-import { cn } from "../../../lib/utils";
-import type { fieldsSchema } from "../../../vendor/form-builder/base-schema";
-import { fieldTypesConfigMap } from "../../../vendor/form-builder/field-types";
-import { fieldsThatSupportLabelAsSafeHtml } from "../../../vendor/form-builder/fields-that-support-label-as-safe-html";
-import {
-  getFieldNameFromErrorMessage,
-  useShouldBeDisabledDueToPrefill,
-} from "../../../vendor/form-builder/use-should-be-disabled-due-to-prefill";
-import { getTranslatedConfig as getTranslatedVariantsConfig } from "../../../vendor/form-builder/utils/variants-config";
-
-import { Components, isValidValueProp } from "./components";
-
-type TFunction = (key: string, options?: Record<string, unknown>) => string;
-
-const renderLabel = (field: Partial<RhfFormField>) => {
-  if (field.labelAsSafeHtml) {
-    return (
-      // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML
-      <span dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(field.labelAsSafeHtml) }} />
-    );
-  }
-  return <span>{field.label}</span>;
-};
-
-type RhfForm = {
-  fields: z.infer<typeof fieldsSchema>;
-};
-
-type RhfFormFields = RhfForm["fields"];
-
-type RhfFormField = RhfFormFields[number];
-
-type ValueProps =
-  | {
-      value: string[];
-      setValue: (value: string[]) => void;
-    }
-  | {
-      value: string;
-      setValue: (value: string) => void;
-    }
-  | {
-      value: {
-        value: string;
-        optionValue: string;
-      };
-      setValue: (value: { value: string; optionValue: string }) => void;
-    }
-  | {
-      value: boolean;
-      setValue: (value: boolean) => void;
-    };
-
-export const FormBuilderField = ({
-  field,
-  readOnly,
-  className,
-  onValueChange,
-}: {
-  field: RhfFormFields[number];
-  readOnly: boolean;
-  className: string;
-  onValueChange?: (args: { name: string; value: unknown; prevValue: unknown }) => void;
-}) => {
-  const { t } = useLocale();
-  const { control, formState } = useFormContext();
-
-  const { hidden, placeholder, label, noLabel, translatedDefaultLabel } = getAndUpdateNormalizedValues(
-    field,
-    t
-  );
-
-  const shouldBeDisabled = useShouldBeDisabledDueToPrefill(field);
-  return (
-    <div data-fob-field-name={field.name} className={cn(className, hidden ? "hidden" : "")}>
-      <Controller
-        control={control}
-        name={`responses.${field.name}`}
-        render={({ field: { value, onChange }, fieldState: { error } }) => {
-          const setAndNotify = (val: unknown) => {
-            onChange(val);
-            onValueChange?.({ name: field.name, value: val, prevValue: value });
-          };
-
-          return (
-            <div>
-              <ComponentForField
-                field={{ ...field, label, placeholder, hidden }}
-                value={value}
-                readOnly={readOnly || shouldBeDisabled}
-                setValue={setAndNotify}
-                noLabel={noLabel}
-                translatedDefaultLabel={translatedDefaultLabel}
-              />
-              <ErrorMessage
-                name="responses"
-                errors={formState.errors}
-                render={({ message }: { message: string | undefined }) => {
-                  message = message || "";
-                  const name = getFieldNameFromErrorMessage(message);
-                  const isResponsesErrorForThisField = name === field.name;
-                  if (!isResponsesErrorForThisField && !error) {
-                    return null;
-                  }
-
-                  message = message.replace(/\{[^}]+\}(.*)/, "$1").trim();
-
-                  if (hidden) {
-                    console.error(`Error message for hidden field:${field.name} => ${message}`);
-                  }
-
-                  return (
-                    <div
-                      data-testid={`error-message-${field.name}`}
-                      className="mt-2 flex items-center text-sm text-red-700 "
-                    >
-                      <Icon name="info" size={12} className="ltr:mr-2 rtl:ml-2" />
-                      <p>{t(message || "invalid_input")}</p>
-                    </div>
-                  );
-                }}
-              />
-            </div>
-          );
-        }}
-      />
-    </div>
-  );
-};
-
-function assertUnreachable(arg: never) {
-  throw new Error(`Don't know how to handle ${JSON.stringify(arg)}`);
-}
-
-const WithLabel = ({
-  field,
-  children,
-  readOnly,
-  htmlFor,
-  noLabel = false,
-}: {
-  field: Partial<RhfFormField>;
-  readOnly: boolean;
-  children: React.ReactNode;
-  noLabel?: boolean;
-  htmlFor: string;
-}) => {
-  const { t } = useLocale();
-
-  return (
-    <div>
-      {noLabel
-        ? null
-        : field.type !== "boolean" &&
-          field.type !== "multiemail" &&
-          field.label && (
-            <div className="mb-2 flex items-center">
-              <Label className="mb-0! flex items-center" htmlFor={htmlFor}>
-                {renderLabel(field)}
-                <span className="text-emphasis -mb-1 ltr:ml-1 rtl:mr-1 text-sm font-medium leading-none">
-                  {!readOnly && field.required ? "*" : ""}
-                </span>
-                {field.type === "phone" && <InfoBadge content={t("number_in_international_format")} />}
-              </Label>
-            </div>
-          )}
-      {children}
-      {field.name === "smsReminderNumber" && (
-        <div className="text-sm text-gray-500">{t("sms_workflow_consent")}</div>
-      )}
-    </div>
-  );
-};
-
-function getAndUpdateNormalizedValues(field: RhfFormFields[number], t: TFunction) {
-  let noLabel = false;
-  let hidden = !!field.hidden;
-  if (field.type === "radioInput") {
-    const options = field.options;
-
-    if (options?.length === 1) {
-      if (!field.optionsInputs) {
-        throw new Error("radioInput must have optionsInputs");
-      }
-      if (field.optionsInputs[options[0].value]) {
-        noLabel = true;
-      } else {
-        hidden = true;
-      }
-    }
-  }
-
-  if (fieldsThatSupportLabelAsSafeHtml.includes(field.type) && field.labelAsSafeHtml === undefined) {
-    throw new Error(`${field.name}:${field.type} type must have labelAsSafeHtml set`);
-  }
-
-  const translatedDefaultLabel = t(field.defaultLabel || "");
-  const label = field.labelAsSafeHtml || field.label || translatedDefaultLabel;
-  const placeholder = field.placeholder || t(field.defaultPlaceholder || "");
-
-  if (field.variantsConfig?.variants) {
-    Object.entries(field.variantsConfig.variants).forEach(([variantName, variant]) => {
-      variant.fields.forEach((variantField) => {
-        const fieldTypeVariantsConfig = fieldTypesConfigMap[field.type]?.variantsConfig;
-        const defaultVariantFieldLabel =
-          fieldTypeVariantsConfig?.variants?.[variantName]?.fieldsMap[variantField.name]?.defaultLabel;
-
-        variantField.label = variantField.label || t(defaultVariantFieldLabel || "");
-      });
-    });
-  }
-
-  return { hidden, placeholder, label, noLabel, translatedDefaultLabel };
-}
-
-export const ComponentForField = ({
-  field,
-  value,
-  setValue,
-  readOnly,
-  noLabel,
-  translatedDefaultLabel,
-}: {
-  field: Omit<RhfFormField, "editable" | "label"> & {
-    label?: string;
-  };
-  readOnly: boolean;
-  noLabel?: boolean;
-  translatedDefaultLabel?: string;
-} & ValueProps) => {
-  const fieldType = field.type || "text";
-  const componentConfig = Components[fieldType];
-  const { t } = useLocale();
-
-  const isValueOfPropsType = (val: unknown, propsType: typeof componentConfig.propsType) => {
-    const isValid = isValidValueProp[propsType](val);
-    return isValid;
-  };
-
-  if (value !== undefined && !isValueOfPropsType(value, componentConfig.propsType)) {
-    throw new Error(
-      `Value ${value} is not valid for type ${componentConfig.propsType} for field ${field.name}`
-    );
-  }
-
-  if (componentConfig.propsType === "text") {
-    return (
-      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
-        <componentConfig.factory
-          placeholder={field.placeholder}
-          minLength={field.minLength}
-          maxLength={field.maxLength}
-          name={field.name}
-          label={field.label}
-          readOnly={readOnly}
-          value={value as string}
-          setValue={setValue as (arg: typeof value) => void}
-        />
-      </WithLabel>
-    );
-  }
-
-  if (componentConfig.propsType === "boolean") {
-    return (
-      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
-        <componentConfig.factory
-          name={field.name}
-          label={field.label}
-          readOnly={readOnly}
-          value={value as boolean}
-          setValue={setValue as (arg: typeof value) => void}
-          placeholder={field.placeholder}
-        />
-      </WithLabel>
-    );
-  }
-
-  if (componentConfig.propsType === "textList") {
-    return (
-      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
-        <componentConfig.factory
-          placeholder={field.placeholder}
-          name={field.name}
-          label={field.label}
-          readOnly={readOnly}
-          value={value as string[]}
-          setValue={setValue as (arg: typeof value) => void}
-        />
-      </WithLabel>
-    );
-  }
-
-  if (componentConfig.propsType === "select") {
-    if (!field.options) {
-      throw new Error("Field options is not defined");
-    }
-
-    return (
-      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
-        <componentConfig.factory
-          readOnly={readOnly}
-          value={value as string}
-          name={field.name}
-          placeholder={field.placeholder}
-          setValue={setValue as (arg: typeof value) => void}
-          options={field.options.map((o) => ({ ...o, title: o.label }))}
-        />
-      </WithLabel>
-    );
-  }
-
-  if (componentConfig.propsType === "multiselect") {
-    if (!field.options) {
-      throw new Error("Field options is not defined");
-    }
-    return (
-      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
-        <componentConfig.factory
-          placeholder={field.placeholder}
-          name={field.name}
-          readOnly={readOnly}
-          value={value as string[]}
-          setValue={setValue as (arg: typeof value) => void}
-          options={field.options.map((o) => ({ ...o, title: o.label }))}
-        />
-      </WithLabel>
-    );
-  }
-
-  if (componentConfig.propsType === "objectiveWithInput") {
-    if (!field.options) {
-      throw new Error("Field options is not defined");
-    }
-    if (!field.optionsInputs) {
-      throw new Error("Field optionsInputs is not defined");
-    }
-
-    const options = field.options;
-
-    return field.options.length ? (
-      <WithLabel field={field} htmlFor={field.name} readOnly={readOnly} noLabel={noLabel}>
-        <componentConfig.factory
-          placeholder={field.placeholder}
-          readOnly={readOnly}
-          name={field.name}
-          label={field.label}
-          value={value as { value: string; optionValue: string }}
-          setValue={setValue as (arg: typeof value) => void}
-          optionsInputs={field.optionsInputs}
-          options={options}
-          required={field.required}
-          translatedDefaultLabel={translatedDefaultLabel}
-        />
-      </WithLabel>
-    ) : null;
-  }
-
-  if (componentConfig.propsType === "variants") {
-    const translatedVariantsConfig = getTranslatedVariantsConfig(field, t);
-    if (!translatedVariantsConfig) {
-      return null;
-    }
-
-    return (
-      <componentConfig.factory
-        placeholder={field.placeholder}
-        readOnly={readOnly}
-        name={field.name}
-        variant={field.variant}
-        value={value as { value: string; optionValue: string }}
-        setValue={setValue as (arg: Record<string, string> | string) => void}
-        variants={translatedVariantsConfig.variants}
-      />
-    );
-  }
-
-  assertUnreachable(componentConfig);
-  return null;
-};

package/src/booker/components/having-trouble-finding-time.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Icon } from "../../components/ui/icon";
-import { InfoIcon } from "../../components/ui/icons";
-import { BOOKER_NUMBER_OF_DAYS_TO_LOAD } from "../../constants/app";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-type Props = {
-  onButtonClick: () => void;
-  dayCount: number | null;
-  visible: boolean;
-  isScheduleLoading: boolean;
-};
-
-export function HavingTroubleFindingTime(props: Props) {
-  const { t } = useLocale();
-  const [internalClick, setInternalClick] = useState(false);
-
-  if (!props.visible) return null;
-
-  if (
-    (process.env.NEXT_PUBLIC_BOOKER_NUMBER_OF_DAYS_TO_LOAD == "0" && BOOKER_NUMBER_OF_DAYS_TO_LOAD == 0) ||
-    !process.env.NEXT_PUBLIC_BOOKER_NUMBER_OF_DAYS_TO_LOAD
-  )
-    return null;
-
-  if (internalClick && !props.isScheduleLoading) return null;
-  if (props.isScheduleLoading || !props.dayCount) return null;
-
-  return (
-    <div className="bg-default border-subtle mt-6 flex w-1/2 min-w-0 items-center justify-between rounded-[32px] border p-3 text-sm leading-none shadow-sm lg:w-1/3">
-      <div className="flex items-center gap-2 overflow-x-hidden">
-        <InfoIcon className="text-default h-4 w-4" />
-        <p className="w-full leading-none">{t("having_trouble_finding_time")}</p>
-      </div>
-      <button
-        className="inline-flex items-center gap-2 font-medium"
-        onClick={(e) => {
-          e.preventDefault();
-          props.onButtonClick();
-          setInternalClick(true);
-        }}
-      >
-        {t("show_more")} <Icon name="arrow-right" className="h-4 w-4" />
-      </button>
-    </div>
-  );
-}

package/src/booker/components/header.tsx

@@ -1,261 +0,0 @@
-"use client";
-
-import { useCallback, useMemo } from "react";
-import { shallow } from "zustand/shallow";
-import { Button } from "../../components/ui/button";
-import { ButtonGroup } from "../../components/ui/button-group";
-import { CalendarIcon, Columns3Icon, Grid3x3Icon } from "../../components/ui/icons";
-import { ToggleGroup } from "../../components/ui/toggle-group";
-import { Tooltip } from "../../components/ui/tooltip";
-import type { BookerLayout } from "../../contracts";
-import { BookerLayouts } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import dayjs from "../../vendor/dayjs";
-import { formatDateTime } from "../../vendor/format-date-time";
-import { useBookerStoreContext } from "../booker-store-provider";
-import { useIsEmbed } from "../hooks/embed-stubs";
-import { useInitializeWeekStart } from "../hooks/use-initialize-week-start";
-import { TimeFormatToggle } from "./time-format-toggle";
-
-export function Header({
-  extraDays,
-  isMobile,
-  enabledLayouts,
-  nextSlots,
-  eventSlug,
-  isMyLink,
-  renderOverlay,
-  isCalendarView,
-  isPlatform = false,
-  webappUrl,
-}: {
-  extraDays: number;
-  isMobile: boolean;
-  // Optional + widened to accept plain string arrays. Webapp callers derive
-  // enabledLayouts from team/event settings where the value can be `string[]`
-  // or `undefined`; the runtime already short-circuits on `!enabledLayouts`.
-  enabledLayouts?: readonly (BookerLayouts | string)[];
-  nextSlots: number;
-  eventSlug: string;
-  isMyLink: boolean;
-  renderOverlay?: () => JSX.Element | null;
-  isCalendarView?: boolean;
-  isPlatform?: boolean;
-  /**
-   * Base URL for the troubleshoot link shown to link owners. Consumers that
-   * don't need the link can omit this — the tooltip disappears with it.
-   */
-  webappUrl?: string;
-}) {
-  const { t, i18n } = useLocale();
-  const isEmbed = useIsEmbed();
-  const [layout, setLayout] = useBookerStoreContext((state) => [state.layout, state.setLayout], shallow);
-  const selectedDateString = useBookerStoreContext((state) => state.selectedDate);
-  const setSelectedDate = useBookerStoreContext((state) => state.setSelectedDate);
-  const addToSelectedDate = useBookerStoreContext((state) => state.addToSelectedDate);
-  const isMonthView = isCalendarView !== undefined ? !isCalendarView : layout === BookerLayouts.MONTH_VIEW;
-  const today = dayjs();
-  const selectedDate = selectedDateString ? dayjs(selectedDateString) : today;
-  const selectedDateMin3DaysDifference = useMemo(() => {
-    const diff = today.diff(selectedDate, "days");
-    return diff > 3 || diff < -3;
-  }, [today, selectedDate]);
-
-  useInitializeWeekStart(isPlatform, isCalendarView ?? false);
-
-  const onLayoutToggle = useCallback(
-    (newLayout: string) => {
-      if (layout === newLayout || !newLayout) return;
-      setLayout(newLayout as BookerLayout);
-    },
-    [setLayout, layout]
-  );
-
-  if (isMobile || !enabledLayouts) return null;
-
-  if (isMonthView) {
-    return (
-      <div className="flex gap-2">
-        {isMyLink && !isEmbed && webappUrl ? (
-          <Tooltip content={t("troubleshooter_tooltip")} side="bottom">
-            <Button
-              color="primary"
-              target="_blank"
-              href={`${webappUrl}/availability/troubleshoot?eventType=${eventSlug}`}
-            >
-              {t("need_help")}
-            </Button>
-          </Tooltip>
-        ) : (
-          renderOverlay?.()
-        )}
-        <LayoutToggleWithData
-          layout={layout}
-          enabledLayouts={enabledLayouts}
-          onLayoutToggle={onLayoutToggle}
-          isPlatform={isPlatform}
-        />
-      </div>
-    );
-  }
-  const endDate = selectedDate.add(layout === BookerLayouts.COLUMN_VIEW ? extraDays : extraDays - 1, "days");
-
-  const isSameMonth = () => selectedDate.format("MMM") === endDate.format("MMM");
-  const isSameYear = () => selectedDate.format("YYYY") === endDate.format("YYYY");
-  const formatMonthLabel = (date: Date) =>
-    formatDateTime(date, { locale: i18n.language ?? "en", month: "short" });
-
-  const FormattedSelectedDateRange = () => (
-    <h3 className="min-w-[150px] text-base font-semibold leading-4">
-      {formatMonthLabel(selectedDate.toDate())} {selectedDate.format("D")}
-      {!isSameYear() && <span className="text-subtle">, {selectedDate.format("YYYY")} </span>}-{" "}
-      {!isSameMonth() && formatMonthLabel(endDate.toDate())} {endDate.format("D")},{" "}
-      <span className="text-subtle">
-        {isSameYear() ? selectedDate.format("YYYY") : endDate.format("YYYY")}
-      </span>
-    </h3>
-  );
-
-  return (
-    <div className="border-default relative z-10 flex h-full border-b px-5 py-4">
-      <div className="flex items-center gap-5 rtl:grow">
-        <FormattedSelectedDateRange />
-        <ButtonGroup>
-          <Button
-            className="group rtl:ml-1 rtl:rotate-180"
-            variant="icon"
-            color="minimal"
-            StartIcon="chevron-left"
-            aria-label="Previous Day"
-            onClick={() => addToSelectedDate(layout === BookerLayouts.COLUMN_VIEW ? -nextSlots : -extraDays)}
-          />
-          <Button
-            className="group rtl:mr-1 rtl:rotate-180"
-            variant="icon"
-            color="minimal"
-            StartIcon="chevron-right"
-            aria-label="Next Day"
-            onClick={() => addToSelectedDate(layout === BookerLayouts.COLUMN_VIEW ? nextSlots : extraDays)}
-          />
-          {selectedDateMin3DaysDifference && (
-            <Button
-              className="capitalize ltr:ml-2 rtl:mr-2"
-              color="secondary"
-              onClick={() => {
-                const selected = (isCalendarView ? today.startOf("week") : today).format("YYYY-MM-DD");
-                setSelectedDate({ date: selected });
-              }}
-            >
-              {t("today")}
-            </Button>
-          )}
-        </ButtonGroup>
-      </div>
-      <div className="ml-auto flex gap-2">
-        {renderOverlay?.()}
-        <TimeFormatToggle />
-        <div className="fixed top-4 ltr:right-4 rtl:left-4">
-          <LayoutToggleWithData
-            layout={layout}
-            enabledLayouts={enabledLayouts}
-            onLayoutToggle={onLayoutToggle}
-            isPlatform={isPlatform}
-          />
-        </div>
-        <div className="pointer-events-none opacity-0" aria-hidden>
-          <LayoutToggleWithData
-            layout={layout}
-            enabledLayouts={enabledLayouts}
-            onLayoutToggle={onLayoutToggle}
-            isPlatform={isPlatform}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const LayoutToggle = ({
-  onLayoutToggle,
-  layout,
-  enabledLayouts,
-  isPlatform = false,
-}: {
-  onLayoutToggle: (layout: string) => void;
-  layout: string;
-  enabledLayouts?: readonly (BookerLayouts | string)[];
-  isPlatform?: boolean;
-}) => {
-  const isEmbed = useIsEmbed();
-  const { t } = useLocale();
-
-  const layoutOptions = useMemo(
-    () =>
-      [
-        {
-          value: BookerLayouts.MONTH_VIEW,
-          label: (
-            <>
-              <CalendarIcon className="h-4 w-4" />
-              <span className="sr-only">${t("switch_monthly")}</span>
-            </>
-          ),
-          tooltip: t("switch_monthly"),
-        },
-        {
-          value: BookerLayouts.WEEK_VIEW,
-          label: (
-            <>
-              <Grid3x3Icon className="h-4 w-4" />
-              <span className="sr-only">${t("switch_weekly")}</span>
-            </>
-          ),
-          tooltip: t("switch_weekly"),
-        },
-        {
-          value: BookerLayouts.COLUMN_VIEW,
-          label: (
-            <>
-              <Columns3Icon className="h-4 w-4" />
-              <span className="sr-only">${t("switch_columnview")}</span>
-            </>
-          ),
-          tooltip: t("switch_columnview"),
-        },
-      ].filter((layout) => enabledLayouts?.includes(layout.value as BookerLayouts)),
-    [t, enabledLayouts]
-  );
-
-  if (isEmbed) return null;
-  if (isPlatform) return null;
-
-  return (
-    <ToggleGroup
-      onValueChange={onLayoutToggle}
-      defaultValue={layout}
-      aria-label={t("layout")}
-      options={layoutOptions}
-    />
-  );
-};
-
-const LayoutToggleWithData = ({
-  enabledLayouts,
-  onLayoutToggle,
-  layout,
-  isPlatform = false,
-}: {
-  enabledLayouts: readonly (BookerLayouts | string)[];
-  onLayoutToggle: (layout: string) => void;
-  layout: string;
-  isPlatform?: boolean;
-}) => {
-  return enabledLayouts.length <= 1 ? null : (
-    <LayoutToggle
-      onLayoutToggle={onLayoutToggle}
-      layout={layout}
-      enabledLayouts={enabledLayouts}
-      isPlatform={isPlatform}
-    />
-  );
-};