@calcom/atoms 2.7.2 → 2.8.1

package/src/booker/components/booker-section.tsx

@@ -1,49 +0,0 @@
-import type { MotionProps } from "framer-motion";
-import { m } from "framer-motion";
-import { forwardRef } from "react";
-
-import type { BookerAreas, BookerLayout } from "../../contracts";
-import { cn } from "../../lib/utils";
-import { useBookerStoreContext } from "../booker-store-provider";
-
-type GridArea = BookerAreas | ({ [key in BookerLayout]?: BookerAreas } & { default: BookerAreas });
-
-type BookerSectionProps = {
-  children: React.ReactNode;
-  area: GridArea;
-  visible?: boolean;
-  className?: string;
-} & MotionProps;
-
-// These string keys let Tailwind see all potential classnames (scanning
-// source statically). Concatenating them at runtime would prevent
-// generation.
-const gridAreaClassNameMap: { [key in BookerAreas]: string } = {
-  calendar: "[grid-area:calendar]",
-  main: "[grid-area:main]",
-  meta: "[grid-area:meta]",
-  timeslots: "[grid-area:timeslots]",
-  header: "[grid-area:header]",
-};
-
-export const BookerSection = forwardRef<HTMLDivElement, BookerSectionProps>(function BookerSection(
-  { children, area, visible, className, ...props },
-  ref
-) {
-  const layout = useBookerStoreContext((state) => state.layout);
-  let gridClassName: string;
-
-  if (typeof area === "string") {
-    gridClassName = gridAreaClassNameMap[area];
-  } else {
-    gridClassName = gridAreaClassNameMap[area[layout] || area.default];
-  }
-
-  if (!visible && typeof visible !== "undefined") return null;
-
-  return (
-    <m.div ref={ref} className={cn(gridClassName, className)} layout {...props}>
-      {children}
-    </m.div>
-  );
-});

package/src/booker/components/dry-run-message.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { InfoIcon } from "../../components/ui/icons";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-export const DryRunMessage = ({ isEmbed }: { isEmbed?: boolean }) => {
-  const { t } = useLocale();
-  const [isVisible, setIsVisible] = useState(true);
-
-  if (!isVisible) return null;
-
-  return (
-    <div
-      data-testid="dry-run-banner"
-      onClick={() => setIsVisible(false)}
-      className={`bg-default border-subtle fixed left-1/2 ${
-        !isEmbed ? "top-4" : "top-0"
-      } z-50 -translate-x-1/2 transform cursor-pointer items-center gap-3 rounded-xl border p-3 text-sm shadow-md`}
-    >
-      <div className="flex items-center gap-3">
-        <div className="relative">
-          <InfoIcon className="h-5 w-5 text-orange-500" />
-        </div>
-        <div className="text-emphasis font-medium" data-testid="dry-run-msg">
-          {t("dry_run_mode_active")}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/booker/components/event-meta/available-event-locations.tsx

@@ -1,121 +0,0 @@
-import { Icon } from "../../../components/ui/icon";
-import { Tooltip } from "../../../components/ui/tooltip";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import invertLogoOnDark from "../../../vendor/invert-logo-on-dark";
-import {
-  type DefaultEventLocationType,
-  type EventLocationTypeFromApp,
-  getEventLocationType,
-  getTranslatedLocation,
-  type LocationObject,
-} from "../../../vendor/locations";
-
-const excludeNullValues = (value: unknown) => !!value;
-
-function RenderIcon({
-  eventLocationType,
-  isTooltip,
-  isPlatform = false,
-}: {
-  eventLocationType: DefaultEventLocationType | EventLocationTypeFromApp;
-  isTooltip: boolean;
-  isPlatform?: boolean;
-}) {
-  return (
-    <img
-      src={`${isPlatform && typeof process !== "undefined" ? (process.env?.NEXT_PUBLIC_WEBAPP_URL ?? "") : ""}${eventLocationType.iconUrl}`}
-      className={cn(invertLogoOnDark(eventLocationType?.iconUrl, isTooltip), "me-[10px] h-4 w-4")}
-      alt={`${eventLocationType.label} icon`}
-    />
-  );
-}
-
-function RenderLocationTooltip({
-  locations,
-  isPlatform = false,
-}: {
-  locations: LocationObject[];
-  isPlatform?: boolean;
-}) {
-  const { t } = useLocale();
-
-  return (
-    <div className="my-2 me-2 flex w-full flex-col stack-y-3 wrap-break-word">
-      <p>{t("select_on_next_step")}</p>
-      {locations.map((location, index) => {
-        const eventLocationType = getEventLocationType(location.type);
-        if (!eventLocationType) {
-          return null;
-        }
-        const translatedLocation =
-          location.customLabel || getTranslatedLocation(location, eventLocationType, t);
-        return (
-          <div key={`${location.type}-${index}`} className="font-sm flex flex-row items-center">
-            <RenderIcon eventLocationType={eventLocationType} isTooltip isPlatform={isPlatform} />
-            <p className="line-clamp-1">{translatedLocation}</p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export function AvailableEventLocations({
-  locations,
-  isPlatform = false,
-}: {
-  locations: LocationObject[];
-  isPlatform?: boolean;
-}) {
-  const { t } = useLocale();
-
-  const renderLocations = locations.map((location, index) => {
-    const eventLocationType = getEventLocationType(location.type);
-    if (!eventLocationType) {
-      return null;
-    }
-
-    const locationName = location?.customLabel || getTranslatedLocation(location, eventLocationType, t);
-
-    return (
-      <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
-        {eventLocationType.iconUrl === "/link.svg" ? (
-          <Icon name="external-link" className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-        ) : (
-          <RenderIcon eventLocationType={eventLocationType} isTooltip={false} isPlatform={isPlatform} />
-        )}
-        <Tooltip content={locationName}>
-          <p className="line-clamp-1">{locationName}</p>
-        </Tooltip>
-      </div>
-    );
-  });
-
-  const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
-
-  return filteredLocations.length > 1 ? (
-    <div className="flex flex-row items-center text-sm font-medium">
-      {isPlatform ? (
-        <Icon name="map-pin" className={cn("me-[10px] h-4 w-4 opacity-70 dark:invert")} />
-      ) : (
-        <img
-          src="/map-pin-dark.svg"
-          className={cn("me-[10px] h-4 w-4 opacity-70 dark:invert")}
-          alt="map-pin"
-        />
-      )}
-      <Tooltip content={<RenderLocationTooltip locations={locations} isPlatform={isPlatform} />}>
-        <p className="line-clamp-1">
-          {t("location_options", {
-            locationCount: filteredLocations.length,
-          })}
-        </p>
-      </Tooltip>
-    </div>
-  ) : filteredLocations.length === 1 ? (
-    <div className="text-default mr-6 flex w-full flex-col stack-y-4 wrap-break-word text-sm rtl:mr-2">
-      {filteredLocations}
-    </div>
-  ) : null;
-}

package/src/booker/components/event-meta/details.tsx

@@ -1,187 +0,0 @@
-// @ts-nocheck — loose BookerEvent / locations contract
-"use client";
-
-import React, { Fragment } from "react";
-import { Icon, type IconName } from "../../../components/ui/icon";
-import type { BookerEvent } from "../../../contracts";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import { getPaymentAppData } from "../../../vendor/payments";
-import { useBookerStore } from "../../store";
-
-import { AvailableEventLocations } from "./available-event-locations";
-import { EventDuration } from "./duration";
-import { EventOccurences } from "./occurences";
-import { Price } from "./price";
-import { PriceIcon } from "./price-icon";
-
-export enum EventDetailBlocks {
-  DURATION = "DURATION",
-  LOCATION = "LOCATION",
-  REQUIRES_CONFIRMATION = "REQUIRES_CONFIRMATION",
-  OCCURENCES = "OCCURENCES",
-  PRICE = "PRICE",
-}
-
-type EventDetailsPropsBase = {
-  event: Pick<
-    BookerEvent,
-    | "currency"
-    | "price"
-    | "locations"
-    | "enablePerHostLocations"
-    | "requiresConfirmation"
-    | "recurringEvent"
-    | "length"
-    | "metadata"
-    | "isDynamic"
-  >;
-  className?: string;
-};
-
-type EventDetailDefaultBlock = {
-  blocks?: EventDetailBlocks[];
-};
-
-type EventDetailCustomBlock = {
-  blocks?: React.FC[];
-  name: string;
-};
-
-type EventDetailsProps = EventDetailsPropsBase & (EventDetailDefaultBlock | EventDetailCustomBlock);
-
-interface EventMetaProps extends React.HTMLAttributes<HTMLDivElement> {
-  customIcon?: React.ReactNode;
-  icon?: IconName;
-  iconUrl?: string;
-  highlight?: boolean;
-  contentClassName?: string;
-  isDark?: boolean;
-}
-
-const defaultEventDetailsBlocks = [
-  EventDetailBlocks.REQUIRES_CONFIRMATION,
-  EventDetailBlocks.DURATION,
-  EventDetailBlocks.OCCURENCES,
-  EventDetailBlocks.LOCATION,
-  EventDetailBlocks.PRICE,
-];
-
-export const EventMetaBlock = ({
-  customIcon,
-  icon,
-  iconUrl,
-  children,
-  highlight,
-  contentClassName,
-  className,
-  isDark,
-  ...rest
-}: EventMetaProps) => {
-  if (!React.Children.count(children)) return null;
-
-  return (
-    <div
-      className={cn(
-        "flex items-start justify-start text-sm",
-        highlight ? "text-emphasis" : "text-text",
-        className
-      )}
-      {...rest}
-    >
-      {iconUrl ? (
-        <img
-          src={iconUrl}
-          alt=""
-          className={cn(
-            "mr-2 mt-[2px] h-4 w-4 shrink-0",
-            isDark === undefined && "filter-[invert(0.5)_brightness(0.5)]",
-            (isDark === undefined || isDark) && "dark:filter-[invert(0.65)_brightness(0.9)]"
-          )}
-        />
-      ) : (
-        <>
-          {customIcon ||
-            (!!icon && (
-              <Icon name={icon} className="relative z-20 mr-2 mt-[2px] h-4 w-4 shrink-0 rtl:ml-2" />
-            ))}
-        </>
-      )}
-      <div className={cn("relative z-10 max-w-full wrap-break-word", contentClassName)}>{children}</div>
-    </div>
-  );
-};
-
-export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: EventDetailsProps) => {
-  const { t } = useLocale();
-  const rescheduleUid = useBookerStore((state) => state.rescheduleUid);
-  const isInstantMeeting = useBookerStore((store) => store.isInstantMeeting);
-
-  return (
-    <>
-      {blocks.map((block) => {
-        if (typeof block === "function") {
-          return <Fragment key={block.name}>{block(event)}</Fragment>;
-        }
-
-        switch (block) {
-          case EventDetailBlocks.DURATION:
-            return (
-              <EventMetaBlock key={block} icon="clock" className="items-center">
-                <EventDuration event={event} />
-              </EventMetaBlock>
-            );
-
-          case EventDetailBlocks.LOCATION:
-            if (!event?.locations?.length || isInstantMeeting || event.enablePerHostLocations) return null;
-            return (
-              <EventMetaBlock key={block}>
-                <AvailableEventLocations locations={event.locations} />
-              </EventMetaBlock>
-            );
-
-          case EventDetailBlocks.REQUIRES_CONFIRMATION:
-            if (!event.requiresConfirmation) return null;
-            return (
-              <EventMetaBlock key={block} icon="square-check">
-                {t("requires_confirmation")}
-              </EventMetaBlock>
-            );
-
-          case EventDetailBlocks.OCCURENCES:
-            if (!event.recurringEvent || rescheduleUid) return null;
-            return (
-              <EventMetaBlock key={block} icon="refresh-ccw">
-                <EventOccurences event={event} />
-              </EventMetaBlock>
-            );
-
-          case EventDetailBlocks.PRICE: {
-            const paymentAppData = getPaymentAppData(event);
-            if (event.price <= 0 || paymentAppData.price <= 0) return null;
-            return (
-              <EventMetaBlock
-                key={block}
-                customIcon={
-                  <PriceIcon
-                    className="relative z-20 mr-2 mt-[2px] h-4 w-4 shrink-0 rtl:ml-2"
-                    currency={event.currency}
-                  />
-                }
-              >
-                <Price
-                  price={paymentAppData.price}
-                  currency={event.currency}
-                  displayAlternateSymbol={false}
-                />
-              </EventMetaBlock>
-            );
-          }
-
-          default:
-            return null;
-        }
-      })}
-    </>
-  );
-};

package/src/booker/components/event-meta/duration.tsx

@@ -1,141 +0,0 @@
-// @ts-nocheck — loose BookerEvent / multipleDuration contract
-"use client";
-
-import { useEffect, useRef } from "react";
-import { Icon } from "../../../components/ui/icon";
-import type { BookerEvent } from "../../../contracts";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import { useBookerStoreContext } from "../../booker-store-provider";
-import { useIsEmbed } from "../../hooks/embed-stubs";
-import { useShouldShowArrows } from "../../hooks/use-should-show-arrows";
-
-type TFunction = (key: string, options?: Record<string, unknown>) => string;
-
-export const getDurationFormatted = (mins: number | undefined, t: TFunction) => {
-  if (!mins) return null;
-
-  const hours = Math.floor(mins / 60);
-  mins %= 60;
-  let minStr = "";
-  if (mins > 0) {
-    minStr =
-      mins === 1
-        ? t("minute_one_short", { count: 1 })
-        : t("multiple_duration_timeUnit_short", { count: mins, unit: "minute" });
-  }
-  let hourStr = "";
-  if (hours > 0) {
-    hourStr =
-      hours === 1
-        ? t("hour_one_short", { count: 1 })
-        : t("multiple_duration_timeUnit_short", { count: hours, unit: "hour" });
-  }
-
-  if (hourStr && minStr) return `${hourStr} ${minStr}`;
-  return hourStr || minStr;
-};
-
-export const EventDuration = ({
-  event,
-  isPlatform = false,
-}: {
-  event: Pick<BookerEvent, "length" | "metadata" | "isDynamic">;
-  isPlatform?: boolean;
-}) => {
-  const { t } = useLocale();
-  const itemRefs = useRef<(HTMLLIElement | null)[]>([]);
-  const [selectedDuration, setSelectedDuration, bookerState] = useBookerStoreContext((state) => [
-    state.selectedDuration,
-    state.setSelectedDuration,
-    state.state,
-  ]);
-
-  const { ref, calculateScroll, leftVisible, rightVisible } = useShouldShowArrows();
-
-  const handleLeft = () => {
-    if (ref.current) {
-      ref.current.scrollLeft -= 100;
-    }
-  };
-
-  const handleRight = () => {
-    if (ref.current) {
-      ref.current.scrollLeft += 100;
-    }
-  };
-
-  const isDynamicEvent = "isDynamic" in event && event.isDynamic;
-  const isEmbed = useIsEmbed();
-  useEffect(() => {
-    const isRescheduling = !!new URLSearchParams(window.location.search).get("rescheduleUid");
-    if (!selectedDuration && !isRescheduling && (event.metadata?.multipleDuration || isDynamicEvent))
-      setSelectedDuration(event.length);
-  }, [selectedDuration, setSelectedDuration, event.metadata?.multipleDuration, event.length, isDynamicEvent]);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (isEmbed) return;
-      if (selectedDuration && itemRefs.current[selectedDuration]) {
-        itemRefs.current[selectedDuration]?.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-          inline: "center",
-        });
-      }
-    }, 100);
-    return () => clearTimeout(timeout);
-  }, [selectedDuration, isEmbed]);
-
-  if (!event?.metadata?.multipleDuration && !isDynamicEvent)
-    return <>{getDurationFormatted(event.length, t)}</>;
-
-  const durations = event?.metadata?.multipleDuration || [15, 30, 60, 90];
-  const hideDurationSelector = event?.metadata?.hideDurationSelectorInBookingPage;
-
-  if (hideDurationSelector || bookerState === "booking") {
-    return <>{getDurationFormatted(selectedDuration || event.length, t)}</>;
-  }
-
-  return selectedDuration ? (
-    <div className="border-default relative mr-5 flex flex-row items-center justify-between rounded-md border">
-      {leftVisible && (
-        <button onClick={handleLeft} className="absolute bottom-0 left-0 flex">
-          <div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
-            <Icon name="chevron-left" className="text-subtle h-4 w-4" />
-          </div>
-          <div className="to-default flex h-9 w-5 bg-linear-to-l from-transparent" />
-        </button>
-      )}
-      <ul
-        className="bg-default no-scrollbar flex max-w-full items-center gap-0.5 overflow-x-auto rounded-md p-1"
-        onScroll={(e) => calculateScroll(e)}
-        ref={ref}
-      >
-        {durations.map((duration, index) => (
-          <li
-            data-testId={`multiple-choice-${duration}mins`}
-            data-active={selectedDuration === duration ? "true" : "false"}
-            key={index}
-            onClick={() => setSelectedDuration(duration)}
-            ref={(el) => (itemRefs.current[duration] = el)}
-            className={cn(
-              selectedDuration === duration ? "bg-emphasis" : "hover:text-emphasis",
-              "text-default cursor-pointer rounded-[4px] px-3 py-1.5 text-sm leading-tight transition"
-            )}
-          >
-            <div className="w-max">{getDurationFormatted(duration, t)}</div>
-          </li>
-        ))}
-      </ul>
-      {rightVisible && (
-        <button onClick={handleRight} className="absolute bottom-0 right-0 flex">
-          <div className="to-default flex h-9 w-5 bg-linear-to-r from-transparent" />
-          <div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
-            <Icon name="chevron-right" className="text-subtle h-4 w-4" />
-          </div>
-        </button>
-      )}
-    </div>
-  ) : null;
-};

package/src/booker/components/event-meta/index.ts

@@ -1,6 +0,0 @@
-export { EventDetailBlocks, EventDetails, EventMetaBlock } from "./details";
-export { EventMembers } from "./members";
-export { Price } from "./price";
-export { PriceIcon } from "./price-icon";
-export { EventMetaSkeleton } from "./skeleton";
-export { EventTitle } from "./title";

package/src/booker/components/event-meta/locations.tsx

@@ -1,71 +0,0 @@
-// @ts-nocheck — loose BookerEvent locations contract
-
-import { Tooltip } from "../../../components/ui/tooltip";
-import type { BookerEvent } from "../../../contracts";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import { getEventLocationType, getTranslatedLocation } from "../../../vendor/locations";
-
-import { EventMetaBlock } from "./details";
-
-export const EventLocations = ({ event }: { event: BookerEvent }) => {
-  const { t } = useLocale();
-  const locations = event.locations;
-
-  if (!locations?.length) return null;
-
-  const getLocationToDisplay = (location: BookerEvent["locations"][number]) => {
-    const eventLocationType = getEventLocationType(location.type);
-    return getTranslatedLocation(location, eventLocationType, t);
-  };
-  const eventLocationType = getEventLocationType(locations[0].type);
-  const iconUrl = locations.length > 1 || !eventLocationType?.iconUrl ? undefined : eventLocationType.iconUrl;
-  const icon = locations.length > 1 || !eventLocationType?.iconUrl ? "map-pin" : undefined;
-
-  return (
-    <EventMetaBlock iconUrl={iconUrl} icon={icon} isDark={eventLocationType?.iconUrl?.includes("-dark")}>
-      {locations.length === 1 && (
-        <Tooltip content={getLocationToDisplay(locations[0])}>
-          <div className="" key={locations[0].type}>
-            {getLocationToDisplay(locations[0])}
-          </div>
-        </Tooltip>
-      )}
-      {locations.length > 1 && (
-        <div
-          key={locations[0].type}
-          className="before:bg-subtle relative before:pointer-events-none before:absolute before:inset-0 before:bottom-[-5px] before:left-[-30px] before:top-[-5px] before:w-[calc(100%+35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity hover:before:opacity-100"
-        >
-          <Tooltip
-            content={
-              <>
-                <p className="mb-2">{t("select_on_next_step")}</p>
-                <ul className="pl-1">
-                  {locations.map((location, index) => (
-                    <li key={`${location.type}-${index}`} className="mt-1">
-                      <div className="flex flex-row items-center">
-                        <img
-                          src={getEventLocationType(location.type)?.iconUrl}
-                          className={cn(
-                            "h-3 w-3 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
-                            !getEventLocationType(location.type)?.iconUrl?.startsWith("/app-store")
-                              ? "dark:invert-[.65]"
-                              : ""
-                          )}
-                          alt={`${getEventLocationType(location.type)?.label} icon`}
-                        />
-                        <span>{getLocationToDisplay(location)}</span>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </>
-            }
-          >
-            <span className="relative z-2 py-2">{t("num_locations", { num: locations.length })}</span>
-          </Tooltip>
-        </div>
-      )}
-    </EventMetaBlock>
-  );
-};