@calcom/atoms 2.8.0 → 2.8.2

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

@@ -1,292 +0,0 @@
-// @ts-nocheck — loose BookerEvent + translations + TimezoneSelect contract
-"use client";
-
-import { m } from "framer-motion";
-import { type ComponentType, memo, useEffect } from "react";
-import { shallow } from "zustand/shallow";
-import type { BookerEvent } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { markdownToSafeHTMLClient } from "../../lib/markdown-to-safe-html-client";
-import { useTimePreferences } from "../../vendor/time-preferences";
-import { CURRENT_TIMEZONE } from "../../vendor/timezone-constants";
-import { useBookerStoreContext } from "../booker-store-provider";
-import { fadeInUp } from "../config";
-import { useBookerTime } from "../hooks/use-booker-time";
-import type { Timezone } from "../types";
-import { FromToTime } from "../utils/dates";
-
-import { EventDetails, EventMetaBlock } from "./event-meta/details";
-import { EventMembers } from "./event-meta/members";
-import { EventMetaSkeleton } from "./event-meta/skeleton";
-import { EventTitle } from "./event-meta/title";
-import { ScrollableWithGradients } from "./scrollable-with-gradients";
-import { SeatsAvailabilityText } from "./seats-availability-text";
-
-type EventTypeTranslation = {
-  field: string;
-  targetLocale: string;
-  translatedText: string;
-};
-
-enum EventTypeAutoTranslatedField {
-  DESCRIPTION = "DESCRIPTION",
-  TITLE = "TITLE",
-}
-
-const getTranslatedField = (
-  translations: Array<EventTypeTranslation>,
-  field: EventTypeAutoTranslatedField,
-  userLocale: string,
-  supportedLocales: string[]
-) => {
-  return translations?.find(
-    (trans) =>
-      trans.field === field &&
-      supportedLocales.includes(trans.targetLocale) &&
-      (userLocale === trans.targetLocale || userLocale.split("-")[0] === trans.targetLocale)
-  )?.translatedText;
-};
-
-export const EventMeta = memo(
-  ({
-    event,
-    isPending,
-    isPlatform = true,
-    TimezoneSelect: TimezoneSelectProp,
-    isPrivateLink,
-    classNames,
-    locale,
-    timeZones,
-    children,
-    selectedTimeslot,
-    roundRobinHideOrgAndTeam,
-    hideOrgTeamAvatar,
-    hideEventTypeDetails = false,
-    supportedLocales = [],
-  }: {
-    event?: Pick<
-      BookerEvent,
-      | "lockTimeZoneToggleOnBookingPage"
-      | "lockedTimeZone"
-      | "schedule"
-      | "seatsPerTimeSlot"
-      | "subsetOfUsers"
-      | "length"
-      | "schedulingType"
-      | "profile"
-      | "entity"
-      | "description"
-      | "title"
-      | "metadata"
-      | "locations"
-      | "currency"
-      | "requiresConfirmation"
-      | "recurringEvent"
-      | "price"
-      | "isDynamic"
-      | "fieldTranslations"
-      | "autoTranslateDescriptionEnabled"
-      | "enablePerHostLocations"
-    > | null;
-    isPending: boolean;
-    isPrivateLink: boolean;
-    isPlatform?: boolean;
-    TimezoneSelect?: ComponentType<Record<string, unknown>>;
-    classNames?: {
-      eventMetaContainer?: string;
-      eventMetaTitle?: string;
-      eventMetaTimezoneSelect?: string;
-      eventMetaChildren?: string;
-    };
-    locale?: string | null;
-    timeZones?: Timezone[];
-    children?: React.ReactNode;
-    selectedTimeslot: string | null;
-    roundRobinHideOrgAndTeam?: boolean;
-    hideOrgTeamAvatar?: boolean;
-    hideEventTypeDetails?: boolean;
-    supportedLocales?: string[];
-  }) => {
-    const { timeFormat, timezone } = useBookerTime();
-    const [setTimezone] = useTimePreferences((state) => [state.setTimezone]);
-    const [setBookerStoreTimezone] = useBookerStoreContext((state) => [state.setTimezone], shallow);
-    const selectedDuration = useBookerStoreContext((state) => state.selectedDuration);
-    const bookerState = useBookerStoreContext((state) => state.state);
-    const bookingData = useBookerStoreContext((state) => state.bookingData);
-    const rescheduleUid = useBookerStoreContext((state) => state.rescheduleUid);
-    const [seatedEventData, setSeatedEventData] = useBookerStoreContext(
-      (state) => [state.seatedEventData, state.setSeatedEventData],
-      shallow
-    );
-    const { i18n, t } = useLocale();
-    const TimezoneSelect = TimezoneSelectProp;
-
-    useEffect(() => {
-      if (event?.lockTimeZoneToggleOnBookingPage) {
-        const tz = event.lockedTimeZone || event.schedule?.timeZone;
-        if (tz) {
-          setTimezone(tz);
-        }
-      }
-    }, [event, setTimezone]);
-
-    if (hideEventTypeDetails) {
-      return null;
-    }
-    const bookingSeatAttendeesQty = seatedEventData?.attendees || bookingData?.attendees?.length;
-    const eventTotalSeats = seatedEventData?.seatsPerTimeSlot || event?.seatsPerTimeSlot;
-
-    const isHalfFull =
-      bookingSeatAttendeesQty && eventTotalSeats && bookingSeatAttendeesQty / eventTotalSeats >= 0.5;
-    const isNearlyFull =
-      bookingSeatAttendeesQty && eventTotalSeats && bookingSeatAttendeesQty / eventTotalSeats >= 0.83;
-
-    const colorClass = isNearlyFull
-      ? "text-rose-600"
-      : isHalfFull
-        ? "text-yellow-500"
-        : "text-bookinghighlight";
-    const userLocale = locale ?? (typeof navigator !== "undefined" ? navigator.language : "en");
-    const translatedDescription = getTranslatedField(
-      event?.fieldTranslations ?? [],
-      EventTypeAutoTranslatedField.DESCRIPTION,
-      userLocale,
-      supportedLocales
-    );
-    const translatedTitle = getTranslatedField(
-      event?.fieldTranslations ?? [],
-      EventTypeAutoTranslatedField.TITLE,
-      userLocale,
-      supportedLocales
-    );
-
-    return (
-      <div className={`${classNames?.eventMetaContainer || ""} relative z-10 p-6`} data-testid="event-meta">
-        {isPending && (
-          <m.div {...fadeInUp} initial="visible" layout>
-            <EventMetaSkeleton />
-          </m.div>
-        )}
-        {!isPending && !!event && (
-          <m.div {...fadeInUp} layout transition={{ ...fadeInUp.transition, delay: 0.3 }}>
-            <EventMembers
-              schedulingType={event.schedulingType}
-              users={event.subsetOfUsers}
-              profile={event.profile}
-              entity={event.entity}
-              isPrivateLink={isPrivateLink}
-              roundRobinHideOrgAndTeam={roundRobinHideOrgAndTeam}
-              hideOrgTeamAvatar={hideOrgTeamAvatar}
-            />
-            <EventTitle className={`${classNames?.eventMetaTitle} my-2`}>
-              {translatedTitle ?? event?.title}
-            </EventTitle>
-            {(event.description || translatedDescription) && (
-              <EventMetaBlock data-testid="event-meta-description" contentClassName="mb-8">
-                <ScrollableWithGradients
-                  className="wrap-break-word scroll-bar max-h-[180px] max-w-full overflow-y-auto pr-4"
-                  ariaLabel={t("description")}
-                >
-                  {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTMLClient */}
-                  <div
-                    dangerouslySetInnerHTML={{
-                      __html: markdownToSafeHTMLClient(translatedDescription ?? event.description),
-                    }}
-                  />
-                </ScrollableWithGradients>
-              </EventMetaBlock>
-            )}
-            <div className="stack-y-4 font-medium rtl:-mr-2">
-              {rescheduleUid && bookingData && (
-                <EventMetaBlock icon="calendar">
-                  {t("former_time")}
-                  <br />
-                  <span className="line-through" data-testid="former_time_p">
-                    <FromToTime
-                      date={bookingData.startTime.toString()}
-                      duration={null}
-                      timeFormat={timeFormat}
-                      timeZone={timezone}
-                      language={i18n.language}
-                    />
-                  </span>
-                </EventMetaBlock>
-              )}
-              {selectedTimeslot && (
-                <EventMetaBlock icon="calendar">
-                  <FromToTime
-                    date={selectedTimeslot}
-                    duration={selectedDuration || event.length}
-                    timeFormat={timeFormat}
-                    timeZone={timezone}
-                    language={i18n.language}
-                  />
-                </EventMetaBlock>
-              )}
-              <EventDetails event={event} />
-              {TimezoneSelect && (
-                <EventMetaBlock
-                  className="cursor-pointer [&_.current-timezone:before]:focus-within:opacity-100 [&_.current-timezone:before]:hover:opacity-100"
-                  contentClassName="relative max-w-[90%]"
-                  icon="globe"
-                >
-                  {bookerState === "booking" ? (
-                    <>{timezone}</>
-                  ) : (
-                    <span
-                      className={`current-timezone before:bg-subtle min-w-32 -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:bottom-[-3px] before:left-[-30px] before:top-[-3px] before:w-[calc(100%+35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity ${
-                        event.lockTimeZoneToggleOnBookingPage ? "cursor-not-allowed" : ""
-                      }`}
-                      data-testid="event-meta-current-timezone"
-                    >
-                      <TimezoneSelect
-                        timeZones={timeZones}
-                        menuPosition="absolute"
-                        timezoneSelectCustomClassname={classNames?.eventMetaTimezoneSelect}
-                        classNames={{
-                          control: () =>
-                            "min-h-0! p-0 w-full border-0 bg-transparent focus-within:ring-0 shadow-none!",
-                          menu: () => "w-64! max-w-[90vw] mb-1 ",
-                          singleValue: () => "text-text py-1",
-                          indicatorsContainer: () => "ml-auto",
-                          container: () => "max-w-full",
-                        }}
-                        value={
-                          event.lockTimeZoneToggleOnBookingPage
-                            ? event.lockedTimeZone || CURRENT_TIMEZONE
-                            : timezone
-                        }
-                        onChange={({ value }: { value: string }) => {
-                          setTimezone(value);
-                          setBookerStoreTimezone(value);
-                        }}
-                        isDisabled={event.lockTimeZoneToggleOnBookingPage}
-                      />
-                    </span>
-                  )}
-                </EventMetaBlock>
-              )}
-              {bookerState === "booking" && eventTotalSeats && bookingSeatAttendeesQty ? (
-                <EventMetaBlock icon="user" className={`${colorClass}`}>
-                  <div className="text-bookinghighlight flex items-start text-sm">
-                    <p>
-                      <SeatsAvailabilityText
-                        showExact={!!seatedEventData?.showAvailableSeatsCount}
-                        totalSeats={eventTotalSeats}
-                        bookedSeats={bookingSeatAttendeesQty || 0}
-                        variant="fraction"
-                      />
-                    </p>
-                  </div>
-                </EventMetaBlock>
-              ) : null}
-            </div>
-            {children && <div className={classNames?.eventMetaChildren}>{children}</div>}
-          </m.div>
-        )}
-      </div>
-    );
-  }
-);
-
-EventMeta.displayName = "EventMeta";

package/src/booker/components/external-redirect-interstitial.tsx

@@ -1,78 +0,0 @@
-// @ts-nocheck — Radix Dialog prop narrowing
-"use client";
-
-import { useRef } from "react";
-import { Button } from "../../components/ui/button";
-import { Dialog, DialogContent } from "../../components/ui/dialog";
-import { Icon } from "../../components/ui/icon";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-interface ExternalRedirectInterstitialProps {
-  isOpen: boolean;
-  redirectUrl: string;
-  onContinue: () => void;
-  onGoBack: () => void;
-}
-
-function getHostname(url: string): string {
-  try {
-    return new URL(url).hostname || url;
-  } catch {
-    return url;
-  }
-}
-
-function getDisplayUrl(url: string): string {
-  try {
-    const parsed = new URL(url);
-    if (!parsed.hostname) return url;
-    return `${parsed.hostname}${parsed.pathname}`.replace(/\/$/, "");
-  } catch {
-    return url;
-  }
-}
-
-export function ExternalRedirectInterstitial({
-  isOpen,
-  redirectUrl,
-  onContinue,
-  onGoBack,
-}: ExternalRedirectInterstitialProps) {
-  const { t } = useLocale();
-  const stableUrlRef = useRef(redirectUrl);
-  if (redirectUrl) stableUrlRef.current = redirectUrl;
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onGoBack()}>
-      <DialogContent enableOverflow preventCloseOnOutsideClick>
-        <div className="flex">
-          <div className="mt-0.5 ltr:mr-3">
-            <div className="mx-auto rounded-full bg-attention p-2 text-center">
-              <Icon name="alert-circle" className="h-5 w-5 text-orange-600" />
-            </div>
-          </div>
-          <div className="w-full">
-            <h2 className="mt-1 font-heading text-2xl text-emphasis">{t("external_redirect_title")}</h2>
-            <p className="mt-2 text-sm text-subtle">{t("external_redirect_warning")}</p>
-            <p className="mt-4 font-medium text-sm text-subtle">
-              {t("host_redirecting_to", { hostname: getHostname(stableUrlRef.current) })}
-            </p>
-            <div className="mt-1 rounded-md bg-subtle px-3 py-2">
-              <p className="break-all font-mono text-emphasis text-sm">
-                {getDisplayUrl(stableUrlRef.current)}
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="my-5 flex flex-row-reverse gap-x-2 sm:my-8">
-          <Button color="primary" onClick={onContinue} EndIcon="arrow-right">
-            {t("continue")}
-          </Button>
-          <Button color="secondary" onClick={onGoBack}>
-            {t("go_back")}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}