@calcom/atoms 2.7.2 → 2.8.1

package/src/booker/components/instant-booking.tsx

@@ -1,74 +0,0 @@
-// @ts-nocheck — loose BookerEvent / user contracts
-"use client";
-
-import { Button } from "../../components/ui/button";
-import { Tooltip } from "../../components/ui/tooltip";
-import { UserAvatarGroupWithOrg } from "../../components/ui/user-avatar-group-with-org";
-import type { BookerEvent } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-interface IInstantBookingProps {
-  onConnectNow: () => void;
-  event: Pick<BookerEvent, "entity" | "schedulingType"> & {
-    subsetOfUsers: Array<{
-      name?: string | null;
-      username?: string | null;
-      avatarUrl?: string | null;
-      bookerUrl: string;
-    }>;
-  };
-  cooldownMs?: number;
-}
-
-export const InstantBooking = ({ onConnectNow, event, cooldownMs = 0 }: IInstantBookingProps) => {
-  const { t } = useLocale();
-  const disabled = cooldownMs > 0;
-
-  return (
-    <div className=" bg-default border-subtle mx-2 block items-center gap-3 rounded-xl border p-[6px] text-sm shadow-sm delay-1000 sm:flex">
-      <div className="flex items-center gap-3 ps-1">
-        <div className="relative">
-          <UserAvatarGroupWithOrg
-            size="sm"
-            className="border-muted"
-            organization={{
-              slug: event.entity.orgSlug,
-              name: event.entity.name || "",
-              logoUrl: event.entity.logoUrl ?? null,
-            }}
-            users={event.subsetOfUsers.slice(0, 2)}
-            disableHref
-          />
-          <div className="border-muted absolute -bottom-0.5 -right-1 h-2 w-2 rounded-full border bg-green-500" />
-        </div>
-        <div>{t("dont_want_to_wait")}</div>
-      </div>
-      <div className="mt-2 flex items-center gap-3 sm:mt-0">
-        {disabled ? (
-          <Tooltip content={t("just_connected_description")}>
-            <span className="inline-flex">
-              <Button
-                disabled={disabled}
-                color="primary"
-                onClick={() => onConnectNow()}
-                size="sm"
-                className="w-full justify-center rounded-lg sm:w-auto"
-              >
-                {t("connect_now")}
-              </Button>
-            </span>
-          </Tooltip>
-        ) : (
-          <Button
-            color="primary"
-            onClick={() => onConnectNow()}
-            size="sm"
-            className="w-full justify-center rounded-lg sm:w-auto"
-          >
-            {t("connect_now")}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/booker/components/out-of-office-in-slots.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import { Button } from "../../components/ui/button";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import ServerTrans from "../../vendor/server-trans";
-
-type OutOfOfficeUser =
-  | {
-      id?: number | null;
-      username?: string | null;
-      displayName?: string | null;
-    }
-  | null
-  | undefined;
-
-interface IOutOfOfficeInSlotsProps {
-  date: string;
-  fromUser?: OutOfOfficeUser;
-  toUser?: OutOfOfficeUser;
-  emoji?: string;
-  reason?: string;
-  notes?: string | null;
-  showNotePublicly?: boolean;
-  borderDashed?: boolean;
-  className?: string;
-}
-
-export const OutOfOfficeInSlots = (props: IOutOfOfficeInSlotsProps) => {
-  const { t } = useLocale();
-  const {
-    fromUser,
-    toUser,
-    emoji = "🏝️",
-    reason,
-    borderDashed = true,
-    date,
-    className,
-    notes,
-    showNotePublicly,
-  } = props;
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const isHoliday = !fromUser && reason;
-
-  if (!isHoliday && !fromUser) return null;
-
-  return (
-    <div className={cn("relative h-full pb-5", className)}>
-      <div
-        className={cn(
-          "flex h-full flex-col items-center justify-start rounded-md border bg-white px-4 py-4 font-normal dark:bg-transparent",
-          borderDashed && "border-dashed"
-        )}
-      >
-        <div className="bg-emphasis flex h-14 w-14 flex-col items-center justify-center rounded-full">
-          <span className="m-auto text-center text-lg">{emoji}</span>
-        </div>
-        <div className="stack-y-2 max-h-[300px] w-full overflow-y-auto text-center">
-          {isHoliday ? (
-            <>
-              <p className="mt-2 text-base font-bold">{reason}</p>
-              <p className="text-subtle text-center text-sm">{t("holiday_no_availability")}</p>
-            </>
-          ) : (
-            <>
-              <p className="mt-2 text-base font-bold">
-                {t("ooo_user_is_ooo", { displayName: fromUser?.displayName })}
-              </p>
-
-              {notes && showNotePublicly && (
-                <p className="text-subtle mt-2 max-h-[120px] overflow-y-auto break-words px-2 text-center text-sm italic">
-                  {notes}
-                </p>
-              )}
-
-              {fromUser?.displayName && toUser?.displayName && (
-                <p className="text-center text-sm">
-                  <ServerTrans
-                    t={t}
-                    i18nKey="ooo_slots_returning"
-                    values={{ displayName: toUser.displayName }}
-                    components={[<strong key="username">username</strong>]}
-                  />
-                </p>
-              )}
-            </>
-          )}
-        </div>
-        {!isHoliday && toUser?.id && (
-          <Button
-            className="mt-8 max-w-[90%]"
-            variant="button"
-            color="secondary"
-            onClick={() => {
-              const month = searchParams?.get("month");
-              const layout = searchParams?.get("layout");
-              const targetDate = searchParams?.get("date") || date;
-              router.push(
-                `/${toUser.username}?${month ? `month=${month}&` : ""}date=${targetDate}${
-                  layout ? `&layout=${layout}` : ""
-                }`
-              );
-            }}
-          >
-            <span className="block overflow-hidden text-ellipsis whitespace-nowrap">
-              {t("ooo_slots_book_with", { displayName: toUser.displayName })}
-            </span>
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/booker/components/overlay-calendar/overlay-calendar-continue-modal.tsx

@@ -1,47 +0,0 @@
-// @ts-nocheck — Radix dialog prop-pick narrowing
-"use client";
-
-import { Button } from "../../../components/ui/button";
-import { Dialog } from "../../../components/ui/controlled-dialog";
-import {
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../../../components/ui/dialog";
-import { APP_NAME } from "../../../constants/app";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-
-interface IOverlayCalendarContinueModalProps {
-  open?: boolean;
-  onClose?: (state: boolean) => void;
-  onContinue: () => void;
-}
-
-export function OverlayCalendarContinueModal(props: IOverlayCalendarContinueModalProps) {
-  const { t } = useLocale();
-  return (
-    <Dialog open={props.open} onOpenChange={props.onClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t("overlay_my_calendar")}</DialogTitle>
-          <DialogDescription>{t("overlay_my_calendar_toc")}</DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-2">
-          <Button
-            data-testid="overlay-calendar-continue-button"
-            onClick={() => props.onContinue()}
-            className="gap w-full items-center justify-center font-semibold"
-            StartIcon="calendar-search"
-          >
-            {t("continue_with", { appName: APP_NAME })}
-          </Button>
-        </div>
-        <DialogFooter>
-          <></>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/booker/components/overlay-calendar/overlay-calendar-settings-modal.tsx

@@ -1,129 +0,0 @@
-// @ts-nocheck — Radix dialog prop-pick + loose connected-calendar payload
-"use client";
-
-import Image from "next/image";
-import Link from "next/link";
-import { Fragment } from "react";
-import { Alert } from "../../../components/ui/alert";
-import { Dialog } from "../../../components/ui/controlled-dialog";
-import {
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "../../../components/ui/dialog";
-import { EmptyScreen } from "../../../components/ui/empty-screen";
-import { SkeletonContainer, SkeletonText } from "../../../components/ui/skeleton";
-import { Switch } from "../../../components/ui/switch";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { useConnectedCalendars } from "../../../hooks/use-connected-calendars";
-import { cn } from "../../../lib/utils";
-
-type IOverlayCalendarSettingsModalProps = {
-  open?: boolean;
-  onClose?: (state: boolean) => void;
-  onClickNoCalendar?: () => void;
-  onToggleConnectedCalendar: (externalCalendarId: string, credentialId: number) => void;
-  checkIsCalendarToggled: (externalCalendarId: string, credentialId: number) => boolean;
-  isPlatform?: boolean;
-};
-
-const SkeletonLoader = (): JSX.Element => (
-  <SkeletonContainer>
-    <div className="stack-y-4 mt-3 rounded-xl border border-subtle px-4 py-4">
-      <SkeletonText className="h-4 w-full" />
-      <SkeletonText className="h-4 w-full" />
-      <SkeletonText className="h-4 w-full" />
-      <SkeletonText className="h-4 w-full" />
-    </div>
-  </SkeletonContainer>
-);
-
-export function OverlayCalendarSettingsModal({
-  open,
-  onClose,
-  onClickNoCalendar,
-  onToggleConnectedCalendar,
-  checkIsCalendarToggled,
-  isPlatform = false,
-}: IOverlayCalendarSettingsModalProps): JSX.Element {
-  const { t } = useLocale();
-  const { data, isLoading } = useConnectedCalendars({ enabled: !!open });
-
-  let content: React.ReactNode;
-  if (isLoading) {
-    content = <SkeletonLoader />;
-  } else if (data?.connectedCalendars?.length === 0) {
-    content = (
-      <EmptyScreen
-        Icon="calendar"
-        headline={t("no_calendar_installed")}
-        description={t("no_calendar_installed_description")}
-        buttonText={t("add_a_calendar")}
-        buttonOnClick={onClickNoCalendar}
-      />
-    );
-  } else {
-    content = (data?.connectedCalendars ?? []).map((item) => (
-      <Fragment key={item.credentialId}>
-        {item.error && !item.calendars && <Alert severity="error" title={item.error.message} />}
-        {item?.error === undefined && item.calendars && (
-          <div className="flex-col rounded-md border-subtle border p-4 mt-3">
-            <div className="flex w-full flex-1 items-center space-x-3 pb-4 rtl:space-x-reverse">
-              {item.integration.logo && (
-                <Image
-                  className={cn("h-10 w-10", item.integration.logo.includes("-dark") && "dark:invert")}
-                  width={40}
-                  height={40}
-                  src={isPlatform ? `https://app.cal.com${item.integration.logo}` : item.integration.logo}
-                  alt={`${item.integration.title} logo`}
-                />
-              )}
-              <div className="grow truncate pl-2">
-                <h3 className="space-x-2 rtl:space-x-reverse text-emphasis text-base font-semibold">
-                  <Link href={`/apps/${item.integration.slug}`}>
-                    {item.integration.name || item.integration.title}
-                  </Link>
-                </h3>
-                <p className="text-subtle text-sm">{item.primary?.email}</p>
-              </div>
-            </div>
-            <div className="border-subtle w-full border-t pt-4">
-              <ul className="stack-y-4">
-                {item.calendars.map((cal, index) => {
-                  const id = cal.integrationTitle ?? `calendar-switch-${index}`;
-                  return (
-                    <li className="flex gap-3" key={id}>
-                      <Switch
-                        id={id}
-                        label={cal.name}
-                        checked={checkIsCalendarToggled(cal.externalId, item.credentialId)}
-                        onCheckedChange={() => onToggleConnectedCalendar(cal.externalId, item.credentialId)}
-                      />
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          </div>
-        )}
-      </Fragment>
-    ));
-  }
-
-  return (
-    <Dialog isPlatform={isPlatform} open={open} onOpenChange={onClose}>
-      <DialogContent className="pb-4">
-        <DialogHeader>
-          <DialogTitle>{t("calendar_settings")}</DialogTitle>
-          <DialogDescription>{t("view_overlay_calendar_events")}</DialogDescription>
-        </DialogHeader>
-        <div className="no-scrollbar max-h-full overflow-y-scroll">{content}</div>
-        <div className="mt-4 flex gap-2 self-end">
-          <DialogClose>{t("done")}</DialogClose>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/booker/components/overlay-calendar/overlay-calendar-switch.tsx

@@ -1,73 +0,0 @@
-// @ts-nocheck — Radix switch prop-pick narrowing
-"use client";
-
-import { useEffect } from "react";
-import { Button } from "../../../components/ui/button";
-import { Switch } from "../../../components/ui/switch";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import { useBookerStoreContext } from "../../booker-store-provider";
-import { useOverlayCalendarStore } from "./store";
-
-interface OverlayCalendarSwitchProps {
-  enabled?: boolean;
-  hasSession: boolean;
-  onStateChange: (state: boolean) => void;
-}
-
-export function OverlayCalendarSwitch({ enabled, hasSession, onStateChange }: OverlayCalendarSwitchProps) {
-  const { t } = useLocale();
-  const setContinueWithProvider = useOverlayCalendarStore((state) => state.setContinueWithProviderModal);
-  const setCalendarSettingsOverlay = useOverlayCalendarStore(
-    (state) => state.setCalendarSettingsOverlayModal
-  );
-  const layout = useBookerStoreContext((state) => state.layout);
-  const switchEnabled = enabled;
-
-  useEffect(() => {
-    if (!hasSession && switchEnabled) {
-      onStateChange(false);
-      setContinueWithProvider(true);
-    }
-  }, [hasSession, switchEnabled, setContinueWithProvider, onStateChange]);
-
-  return (
-    <div
-      className={cn(
-        "hidden gap-2",
-        layout === "week_view" || layout === "column_view" ? "xl:flex" : "md:flex"
-      )}
-    >
-      <div className="flex items-center gap-2 pr-2">
-        <Switch
-          data-testid="overlay-calendar-switch"
-          checked={switchEnabled}
-          id="overlayCalendar"
-          onCheckedChange={(state) => {
-            if (!hasSession) {
-              setContinueWithProvider(state);
-            } else {
-              onStateChange(state);
-            }
-          }}
-        />
-        <label
-          htmlFor="overlayCalendar"
-          className="text-emphasis text-sm font-medium leading-none hover:cursor-pointer"
-        >
-          {t("overlay_my_calendar")}
-        </label>
-      </div>
-      {hasSession && (
-        <Button
-          size="base"
-          data-testid="overlay-calendar-settings-button"
-          variant="icon"
-          color="secondary"
-          StartIcon="settings"
-          onClick={() => setCalendarSettingsOverlay(true)}
-        />
-      )}
-    </div>
-  );
-}

package/src/booker/components/overlay-calendar/overlay-calendar.tsx

@@ -1,80 +0,0 @@
-// @ts-nocheck — loose calendars payload contract
-"use client";
-
-import { useEffect } from "react";
-
-import { useOverlayCalendar } from "../../hooks/use-overlay-calendar";
-import { OverlayCalendarContinueModal } from "./overlay-calendar-continue-modal";
-import { OverlayCalendarSettingsModal } from "./overlay-calendar-settings-modal";
-import { OverlayCalendarSwitch } from "./overlay-calendar-switch";
-
-type OverlayCalendarProps = {
-  connectedCalendars: Array<{
-    calendars?: Array<{ externalId: string; primary: boolean | null }>;
-    credentialId: number;
-    [key: string]: unknown;
-  }>;
-  overlayBusyDates?: Array<{ start: Date | string; end: Date | string; [k: string]: unknown }>;
-  onToggleCalendar: (calendarsToLoad: Set<{ credentialId: number; externalId: string }>) => void;
-  isOverlayCalendarEnabled: boolean;
-  handleClickNoCalendar: () => void;
-  hasSession: boolean;
-  handleClickContinue: () => void;
-  handleSwitchStateChange: (state: boolean) => void;
-  isPlatform?: boolean;
-};
-
-export const OverlayCalendar = ({
-  connectedCalendars,
-  overlayBusyDates,
-  onToggleCalendar,
-  isOverlayCalendarEnabled,
-  handleClickNoCalendar,
-  handleSwitchStateChange,
-  handleClickContinue,
-  hasSession,
-  isPlatform = false,
-}: OverlayCalendarProps): JSX.Element | null => {
-  const {
-    handleCloseContinueModal,
-    handleCloseSettingsModal,
-    isOpenOverlayContinueModal,
-    isOpenOverlaySettingsModal,
-    handleToggleConnectedCalendar,
-    checkIsCalendarToggled,
-  } = useOverlayCalendar({ connectedCalendars, overlayBusyDates, onToggleCalendar });
-
-  useEffect(() => {
-    if (isOverlayCalendarEnabled) {
-      handleCloseContinueModal(false);
-    }
-  }, [isOverlayCalendarEnabled, handleCloseContinueModal]);
-
-  // On platform we don't handle connecting to third-party calendar via the booker yet.
-  if (isPlatform && connectedCalendars?.length === 0) return null;
-
-  return (
-    <>
-      <OverlayCalendarSwitch
-        enabled={isOverlayCalendarEnabled}
-        hasSession={hasSession}
-        onStateChange={handleSwitchStateChange}
-      />
-      {!isPlatform && (
-        <OverlayCalendarContinueModal
-          open={isOpenOverlayContinueModal && !isOverlayCalendarEnabled}
-          onClose={handleCloseContinueModal}
-          onContinue={handleClickContinue}
-        />
-      )}
-      <OverlayCalendarSettingsModal
-        open={isOpenOverlaySettingsModal}
-        onClose={handleCloseSettingsModal}
-        onToggleConnectedCalendar={handleToggleConnectedCalendar}
-        onClickNoCalendar={() => handleClickNoCalendar()}
-        checkIsCalendarToggled={checkIsCalendarToggled}
-        isPlatform={isPlatform}
-      />
-    </>
-  );
-};

package/src/booker/components/overlay-calendar/store.ts

@@ -1,27 +0,0 @@
-import { createWithEqualityFn } from "zustand/traditional";
-
-import type { EventBusyDate } from "../../../contracts";
-
-interface IOverlayCalendarStore {
-  overlayBusyDates: EventBusyDate[] | undefined;
-  setOverlayBusyDates: (busyDates: EventBusyDate[]) => void;
-  continueWithProviderModal: boolean;
-  setContinueWithProviderModal: (value: boolean) => void;
-  calendarSettingsOverlayModal: boolean;
-  setCalendarSettingsOverlayModal: (value: boolean) => void;
-}
-
-export const useOverlayCalendarStore = createWithEqualityFn<IOverlayCalendarStore>((set) => ({
-  overlayBusyDates: undefined,
-  setOverlayBusyDates: (busyDates: EventBusyDate[]) => {
-    set({ overlayBusyDates: busyDates });
-  },
-  calendarSettingsOverlayModal: false,
-  setCalendarSettingsOverlayModal: (value: boolean) => {
-    set({ calendarSettingsOverlayModal: value });
-  },
-  continueWithProviderModal: false,
-  setContinueWithProviderModal: (value: boolean) => {
-    set({ continueWithProviderModal: value });
-  },
-}));

package/src/booker/components/pay-icon.tsx

@@ -1,6 +0,0 @@
-import { CreditCardIcon, ZapIcon } from "../../components/ui/icons";
-
-export function PayIcon(props: { currency: string; className?: string }) {
-  const { className, currency } = props;
-  return currency !== "BTC" ? <CreditCardIcon className={className} /> : <ZapIcon className={className} />;
-}

package/src/booker/components/price.tsx

@@ -1,13 +0,0 @@
-import type { EventPrice } from "../../contracts";
-import { formatPrice } from "../../vendor/currency";
-
-/**
- * atoms-local Price — the features/ original wires Alby (Bitcoin sats)
- * via a dynamic app-store import. The SDK doesn't need the extra
- * dynamic bundle, so BTC just falls through to the plain `${price} sats`
- * output that formatPrice already produces.
- */
-export const Price = ({ price, currency }: EventPrice) => {
-  if (price === 0) return null;
-  return <>{formatPrice(price, currency)}</>;
-};