@calcom/atoms 2.8.0 → 2.8.1

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

@@ -1,99 +0,0 @@
-// @ts-nocheck — loose BookerEvent / profile / user contract
-
-import { AvatarGroup } from "../../../components/ui/avatar-group";
-import type { BookerEvent } from "../../../contracts";
-import { SchedulingType } from "../../../contracts/event-types";
-import { getUserAvatarUrl } from "../../../vendor/avatar-url";
-import { getBookerBaseUrlSync, getTeamUrlSync } from "../../../vendor/booker-url";
-import { useIsEmbed } from "../../hooks/embed-stubs";
-import { useBookerStore } from "../../store";
-
-export interface EventMembersProps {
-  schedulingType: BookerEvent["schedulingType"];
-  users: BookerEvent["subsetOfUsers"];
-  profile: BookerEvent["profile"];
-  entity: BookerEvent["entity"];
-  isPrivateLink: boolean;
-  roundRobinHideOrgAndTeam?: boolean;
-  hideOrgTeamAvatar?: boolean;
-  isPlatform?: boolean;
-}
-
-export const EventMembers = ({
-  schedulingType,
-  users,
-  profile,
-  entity,
-  isPrivateLink,
-  roundRobinHideOrgAndTeam,
-  hideOrgTeamAvatar,
-  isPlatform = false,
-}: EventMembersProps) => {
-  const username = useBookerStore((state) => state.username);
-  const isDynamic = !!(username && username.indexOf("+") > -1);
-  const isEmbed = useIsEmbed();
-
-  const showMembers = schedulingType !== SchedulingType.ROUND_ROBIN;
-  const shownUsers = showMembers ? users : [];
-  const showOnlyProfileName =
-    (profile.name && schedulingType === SchedulingType.ROUND_ROBIN) ||
-    !users.length ||
-    (profile.name !== users[0].name && schedulingType === SchedulingType.COLLECTIVE);
-
-  if (schedulingType === SchedulingType.ROUND_ROBIN && roundRobinHideOrgAndTeam) {
-    return <div className="h-6" />;
-  }
-
-  if (schedulingType === SchedulingType.ROUND_ROBIN && hideOrgTeamAvatar) {
-    return <p className="text-subtle pt-6 text-sm font-semibold">{profile.name}</p>;
-  }
-
-  const orgOrTeamAvatarItem =
-    hideOrgTeamAvatar || isDynamic || (!profile.image && !entity.logoUrl) || !entity.teamSlug
-      ? []
-      : [
-          {
-            href:
-              isEmbed || isPlatform || isPrivateLink || entity.hideProfileLink
-                ? null
-                : entity.teamSlug
-                  ? getTeamUrlSync({ orgSlug: entity.orgSlug, teamSlug: entity.teamSlug })
-                  : getBookerBaseUrlSync(entity.orgSlug),
-            image: entity.logoUrl ?? profile.image ?? "",
-            alt: entity.name ?? profile.name ?? "",
-            title: entity.name ?? profile.name ?? "",
-          },
-        ];
-
-  return (
-    <>
-      <AvatarGroup
-        size="sm"
-        className="border-muted"
-        items={[
-          ...orgOrTeamAvatarItem,
-          ...shownUsers.map((user) => ({
-            href:
-              isPlatform || isPrivateLink || entity.hideProfileLink
-                ? null
-                : `${getBookerBaseUrlSync(user.profile?.organization?.slug ?? null)}/${
-                    user.profile?.username
-                  }?redirect=false`,
-            alt: user.name || "",
-            title: user.name || "",
-            image: getUserAvatarUrl(user),
-          })),
-        ]}
-      />
-
-      <p className="text-subtle mt-2 text-sm font-semibold">
-        {showOnlyProfileName
-          ? profile.name
-          : shownUsers
-              .map((user) => user.name)
-              .filter((name) => name)
-              .join(", ")}
-      </p>
-    </>
-  );
-};

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

@@ -1,142 +0,0 @@
-// @ts-nocheck — loose BookerEvent recurringEvent contract
-"use client";
-
-import { useEffect, useState } from "react";
-import { Alert } from "../../../components/ui/alert";
-import { Badge } from "../../../components/ui/badge";
-import { Input } from "../../../components/ui/text-field";
-import { Tooltip } from "../../../components/ui/tooltip";
-import type { BookerEvent } from "../../../contracts";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { parseRecurringDates } from "../../../vendor/parse-dates";
-import { getRecurringFreq } from "../../../vendor/recurring";
-import { getFirstShiftFlags, getTimeShiftFlags } from "../../../vendor/time-shift";
-import { useBookerStoreContext } from "../../booker-store-provider";
-import { useBookerTime } from "../../hooks/use-booker-time";
-
-export const EventOccurences = ({ event }: { event: Pick<BookerEvent, "recurringEvent"> }) => {
-  const maxOccurences = event.recurringEvent?.count || null;
-  const { t, i18n } = useLocale();
-  const [
-    setRecurringEventCount,
-    recurringEventCount,
-    setRecurringEventCountQueryParam,
-    recurringEventCountQueryParam,
-  ] = useBookerStoreContext((state) => [
-    state.setRecurringEventCount,
-    state.recurringEventCount,
-    state.setRecurringEventCountQueryParam,
-    state.recurringEventCountQueryParam,
-  ]);
-  const selectedTimeslot = useBookerStoreContext((state) => state.selectedTimeslot);
-  const bookerState = useBookerStoreContext((state) => state.state);
-  const { timezone, timeFormat } = useBookerTime();
-  const [warning, setWarning] = useState(false);
-
-  const validateAndSetRecurringEventCount = (value: number | string) => {
-    const inputValue = parseInt(value as string);
-    const isValid =
-      !isNaN(inputValue) && inputValue >= 1 && maxOccurences !== null && inputValue <= maxOccurences;
-
-    if (isValid) {
-      setRecurringEventCount(inputValue);
-      setWarning(false);
-    } else {
-      setRecurringEventCount(maxOccurences);
-      setWarning(true);
-    }
-  };
-
-  useEffect(() => {
-    if (!event.recurringEvent?.count) return;
-
-    if (recurringEventCountQueryParam) {
-      validateAndSetRecurringEventCount(recurringEventCountQueryParam);
-    } else {
-      setRecurringEventCount(maxOccurences);
-      setRecurringEventCountQueryParam(maxOccurences);
-    }
-  }, [setRecurringEventCount, event.recurringEvent, recurringEventCount, recurringEventCountQueryParam]);
-
-  if (!event.recurringEvent) return null;
-
-  if (bookerState === "booking" && recurringEventCount && selectedTimeslot) {
-    const [recurringStrings, recurringDates] = parseRecurringDates(
-      {
-        startDate: selectedTimeslot,
-        timeZone: timezone,
-        recurringEvent: event.recurringEvent,
-        recurringCount: recurringEventCount,
-        selectedTimeFormat: timeFormat,
-      },
-      i18n.language
-    );
-    const shiftFlags = getTimeShiftFlags({ dates: recurringDates, timezone });
-    const displayFlags = getFirstShiftFlags(shiftFlags);
-    return (
-      <div data-testid="recurring-dates">
-        {recurringStrings.slice(0, 5).map((timeFormatted, key) => (
-          <p key={key}>
-            {timeFormatted}
-            {displayFlags[key] && (
-              <>
-                {" "}
-                <Badge variant="orange" size="sm">
-                  {t("time_shift")}
-                </Badge>
-              </>
-            )}
-          </p>
-        ))}
-        {recurringStrings.length > 5 && (
-          <Tooltip
-            content={recurringStrings.slice(5).map((timeFormatted, key) => (
-              <p key={key}>
-                {timeFormatted}
-                {displayFlags[key + 5] && (
-                  <>
-                    {" "}
-                    <Badge variant="orange" size="sm">
-                      {t("time_shift")}
-                    </Badge>
-                  </>
-                )}
-              </p>
-            ))}
-          >
-            <p className=" text-sm">+ {t("plus_more", { count: recurringStrings.length - 5 })}</p>
-          </Tooltip>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {getRecurringFreq({ t, recurringEvent: event.recurringEvent })}
-      <br />
-      <Input
-        className="my-1 mr-3 inline-flex h-[26px] w-[46px] px-1 py-0"
-        type="number"
-        min="1"
-        max={event.recurringEvent.count}
-        defaultValue={recurringEventCountQueryParam || event.recurringEvent.count}
-        data-testid="occurrence-input"
-        onChange={(e) => {
-          const inputValue = parseInt(e.target.value);
-          setRecurringEventCountQueryParam(inputValue);
-          validateAndSetRecurringEventCount(e.target.value);
-        }}
-      />
-
-      {t("occurrence", {
-        count: recurringEventCount || event.recurringEvent.count,
-      })}
-      {warning && (
-        <div className="-ml-4 mr-4 mt-2 flex">
-          <Alert severity="warning" title={t("enter_number_between_range", { maxOccurences })} />
-        </div>
-      )}
-    </>
-  );
-};

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

@@ -1,65 +0,0 @@
-import type { SVGProps } from "react";
-import { forwardRef } from "react";
-
-import { Icon } from "../../../components/ui/icon";
-
-const SatSymbol = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(function SatSymbol(props, ref) {
-  return (
-    <svg
-      ref={ref}
-      className={props.className}
-      id="Layer_1"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 360 360"
-    >
-      <title>Satoshis</title>
-      <rect
-        fill="currentColor"
-        x="201.48"
-        y="37.16"
-        width="23.49"
-        height="40.14"
-        transform="translate(21.82 -52.79) rotate(14.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="135.03"
-        y="287.5"
-        width="23.49"
-        height="40.14"
-        transform="translate(83.82 -27.36) rotate(14.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="184.27"
-        y="38.29"
-        width="23.49"
-        height="167.49"
-        transform="translate(364.26 -36.11) rotate(104.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="168.36"
-        y="98.26"
-        width="23.49"
-        height="167.49"
-        transform="translate(402.22 54.61) rotate(104.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="152.89"
-        y="156.52"
-        width="23.49"
-        height="167.49"
-        transform="translate(439.1 142.78) rotate(104.87)"
-      />
-    </svg>
-  );
-});
-
-export function PriceIcon(props: { currency: string; className?: string }) {
-  const { className, currency } = props;
-  if (currency !== "BTC") return <Icon name="credit-card" className={className} />;
-  return <SatSymbol className={className} />;
-}

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

@@ -1,103 +0,0 @@
-"use client";
-
-import { fiat } from "@getalby/lightning-tools";
-import type { SVGProps } from "react";
-import { forwardRef, useEffect, useState } from "react";
-import { Tooltip } from "../../../components/ui/tooltip";
-import { formatPrice } from "../../../vendor/currency";
-
-const SatSymbol = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(function SatSymbol(props, ref) {
-  return (
-    <svg ref={ref} className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
-      <rect
-        fill="currentColor"
-        x="201.48"
-        y="37.16"
-        width="23.49"
-        height="40.14"
-        transform="translate(21.82 -52.79) rotate(14.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="135.03"
-        y="287.5"
-        width="23.49"
-        height="40.14"
-        transform="translate(83.82 -27.36) rotate(14.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="184.27"
-        y="38.29"
-        width="23.49"
-        height="167.49"
-        transform="translate(364.26 -36.11) rotate(104.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="168.36"
-        y="98.26"
-        width="23.49"
-        height="167.49"
-        transform="translate(402.22 54.61) rotate(104.87)"
-      />
-      <rect
-        fill="currentColor"
-        x="152.89"
-        y="156.52"
-        width="23.49"
-        height="167.49"
-        transform="translate(439.1 142.78) rotate(104.87)"
-      />
-    </svg>
-  );
-});
-
-function AlbyPriceComponent({
-  displaySymbol,
-  price,
-  formattedPrice,
-}: {
-  displaySymbol: boolean;
-  price: number;
-  formattedPrice: string;
-}) {
-  const [fiatValue, setFiatValue] = useState<string>("loading...");
-  useEffect(() => {
-    (async () => {
-      const unformattedFiatValue = await fiat.getFiatValue({ satoshi: price, currency: "USD" });
-      setFiatValue(`$${unformattedFiatValue.toFixed(2)}`);
-    })();
-  }, [price]);
-
-  return (
-    <Tooltip content={fiatValue}>
-      <div className="inline-flex items-center justify-center">
-        {displaySymbol && <SatSymbol className="h-4 w-4" />}
-        {formattedPrice}
-      </div>
-    </Tooltip>
-  );
-}
-
-export type EventPrice = {
-  price: number;
-  currency: string;
-  displayAlternateSymbol?: boolean;
-};
-
-export const Price = ({ price, currency, displayAlternateSymbol = true }: EventPrice) => {
-  if (price === 0) return null;
-
-  const formattedPrice = formatPrice(price, currency);
-
-  return currency !== "BTC" ? (
-    <>{formattedPrice}</>
-  ) : (
-    <AlbyPriceComponent
-      displaySymbol={displayAlternateSymbol}
-      price={price}
-      formattedPrice={formattedPrice}
-    />
-  );
-};

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

@@ -1,19 +0,0 @@
-import { SkeletonText } from "../../../components/ui/skeleton";
-import { cn } from "../../../lib/utils";
-
-export const EventMetaSkeleton = () => (
-  <div className="flex flex-col">
-    <SkeletonText className="h-6 w-6 rounded-full" />
-    <SkeletonText className="mt-2 h-5 w-32" />
-    <SkeletonText className="mt-2 h-8 w-48" />
-
-    <div className="mt-8">
-      {Array.from({ length: 4 }).map((_, i) => (
-        <div className="mb-2 flex flex-row items-center" key={i}>
-          <SkeletonText className="mr-3 h-5 w-5 rounded-full" />
-          <SkeletonText className={cn("h-6", i > 1 ? "w-24" : "w-32")} />
-        </div>
-      ))}
-    </div>
-  </div>
-);

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

@@ -1,18 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../../../lib/utils";
-
-interface EventTitleProps {
-  children: ReactNode;
-  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-  className?: string;
-}
-
-export const EventTitle = ({ children, as, className }: EventTitleProps) => {
-  const El = as || "h1";
-  return (
-    <El data-testid="event-title" className={cn("text-text break-words text-xl font-semibold", className)}>
-      {children}
-    </El>
-  );
-};