@calcom/atoms 2.8.0 → 2.8.1

package/src/booker/components/available-times.tsx

@@ -1,359 +0,0 @@
-// @ts-nocheck — loose BookerEvent / Slots / OOO contract
-"use client";
-
-import * as HoverCard from "@radix-ui/react-hover-card";
-import { AnimatePresence, m } from "framer-motion";
-import { useMemo } from "react";
-import { Button } from "../../components/ui/button";
-import { Icon } from "../../components/ui/icon";
-import { SkeletonText } from "../../components/ui/skeleton";
-import type { BookerEvent } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import dayjs from "../../vendor/dayjs";
-import { getPaymentAppData } from "../../vendor/payments";
-import { getQueryParam } from "../../vendor/query-param";
-import { TimeFormat } from "../../vendor/time-format";
-import { localStorage } from "../../vendor/webstorage";
-import { useBookerStoreContext } from "../booker-store-provider";
-import { useBookerTime } from "../hooks/use-booker-time";
-import type { IUseBookingLoadingStates } from "../hooks/use-bookings-types";
-import { useCheckOverlapWithOverlay } from "../hooks/use-check-overlap-with-overlay";
-import type { Slot } from "../types";
-
-import { OutOfOfficeInSlots } from "./out-of-office-in-slots";
-import { SeatsAvailabilityText } from "./seats-availability-text";
-
-type TOnTimeSelect = (
-  time: string,
-  attendees: number,
-  seatsPerTimeSlot?: number | null,
-  bookingUid?: string
-) => void;
-
-type TOnTentativeTimeSelect = ({
-  time,
-  attendees,
-  seatsPerTimeSlot,
-  bookingUid,
-}: {
-  time: string;
-  attendees: number;
-  seatsPerTimeSlot?: number | null;
-  bookingUid?: string;
-}) => void;
-
-export type AvailableTimesProps = {
-  slots: Slot[];
-  showTimeFormatToggle?: boolean;
-  className?: string;
-  onTentativeTimeSelect?: TOnTentativeTimeSelect;
-  unavailableTimeSlots?: string[];
-  isPlatform?: boolean;
-} & Omit<SlotItemProps, "slot">;
-
-type SlotItemProps = {
-  slot: Slot;
-  seatsPerTimeSlot?: number | null;
-  selectedSlots?: string[];
-  onTimeSelect?: TOnTimeSelect;
-  onTentativeTimeSelect?: TOnTentativeTimeSelect;
-  showAvailableSeatsCount?: boolean | null;
-  event: {
-    data?: Pick<BookerEvent, "length" | "bookingFields" | "price" | "currency" | "metadata"> | null;
-  };
-  customClassNames?: string;
-  confirmStepClassNames?: {
-    confirmButton?: string;
-  };
-  loadingStates?: IUseBookingLoadingStates;
-  isVerificationCodeSending?: boolean;
-  renderConfirmNotVerifyEmailButtonCond?: boolean;
-  skipConfirmStep?: boolean;
-  shouldRenderCaptcha?: boolean;
-  watchedCfToken?: string;
-  unavailableTimeSlots?: string[];
-  confirmButtonDisabled?: boolean;
-  handleSlotClick?: (slot: Slot, isOverlapping: boolean) => void;
-};
-
-const SlotItem = ({
-  slot,
-  seatsPerTimeSlot,
-  selectedSlots,
-  onTimeSelect,
-  showAvailableSeatsCount,
-  event,
-  customClassNames,
-  loadingStates,
-  renderConfirmNotVerifyEmailButtonCond,
-  isVerificationCodeSending,
-  skipConfirmStep,
-  shouldRenderCaptcha,
-  watchedCfToken,
-  handleSlotClick,
-  onTentativeTimeSelect,
-  unavailableTimeSlots = [],
-  confirmButtonDisabled,
-  confirmStepClassNames,
-}: SlotItemProps) => {
-  const { t } = useLocale();
-
-  const { data: eventData } = event;
-
-  const isPaidEvent = useMemo(() => {
-    if (!eventData?.price) return false;
-    const paymentAppData = getPaymentAppData(eventData);
-    return eventData?.price > 0 && !Number.isNaN(paymentAppData.price) && paymentAppData.price > 0;
-  }, [eventData]);
-
-  const overlayCalendarToggled =
-    getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
-
-  const { timeFormat, timezone } = useBookerTime();
-  const bookingData = useBookerStoreContext((state) => state.bookingData);
-  const layout = useBookerStoreContext((state) => state.layout);
-  const hasTimeSlots = !!seatsPerTimeSlot;
-  const computedDateWithUsersTimezone = dayjs.utc(slot.time).tz(timezone);
-
-  const bookingFull = !!(hasTimeSlots && slot.attendees && slot.attendees >= seatsPerTimeSlot);
-  const isHalfFull = slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.5;
-  const isNearlyFull = slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.83;
-  const colorClass = isNearlyFull ? "bg-rose-600" : isHalfFull ? "bg-yellow-500" : "bg-emerald-400";
-
-  const nowDate = dayjs();
-  const usersTimezoneDate = nowDate.tz(timezone);
-
-  const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;
-
-  const selectedTimeslot = useBookerStoreContext((state) => state.selectedTimeslot);
-
-  const { isOverlapping, overlappingTimeEnd, overlappingTimeStart } = useCheckOverlapWithOverlay({
-    start: computedDateWithUsersTimezone,
-    selectedDuration: eventData?.length ?? 0,
-    offset,
-  });
-
-  const onButtonClick = () => {
-    if (handleSlotClick) {
-      handleSlotClick(slot, isOverlapping);
-    }
-    if (onTentativeTimeSelect) {
-      onTentativeTimeSelect({
-        time: slot.time,
-        attendees: slot.attendees || 0,
-        seatsPerTimeSlot,
-      });
-    }
-  };
-
-  const isTimeslotUnavailable = unavailableTimeSlots.includes(slot.time);
-  return (
-    <AnimatePresence>
-      <div className="flex gap-2">
-        <Button
-          key={slot.time}
-          disabled={
-            bookingFull ||
-            !!(slot.bookingUid && slot.bookingUid === bookingData?.uid) ||
-            loadingStates?.creatingBooking ||
-            loadingStates?.creatingRecurringBooking ||
-            isVerificationCodeSending ||
-            loadingStates?.creatingInstantBooking ||
-            (skipConfirmStep && !!shouldRenderCaptcha && !watchedCfToken) ||
-            isTimeslotUnavailable
-          }
-          data-testid="time"
-          data-disabled={bookingFull}
-          data-time={slot.time}
-          onClick={onButtonClick}
-          className={cn(
-            `hover:border-brand-default min-h-9 mb-2 flex h-auto w-full grow flex-col justify-center py-2`,
-            selectedSlots?.includes(slot.time) && "border-brand-default",
-            `${customClassNames}`
-          )}
-          color="secondary"
-        >
-          <div className="flex items-center gap-2">
-            {!hasTimeSlots && overlayCalendarToggled && (
-              <span
-                className={cn(
-                  "inline-block h-2 w-2 rounded-full",
-                  isOverlapping ? "bg-rose-600" : "bg-emerald-400"
-                )}
-              />
-            )}
-            <span
-              className={cn(
-                "tabular-nums text-center",
-                timeFormat === TimeFormat.TWELVE_HOUR && "min-w-[4rem] "
-              )}
-            >
-              {computedDateWithUsersTimezone.format(timeFormat)}
-            </span>
-          </div>
-          {bookingFull && <p className="text-sm">{t("booking_full")}</p>}
-          {hasTimeSlots && !bookingFull && (
-            <p className="flex items-center text-sm">
-              <span className={cn(colorClass, "mr-1 inline-block h-2 w-2 rounded-full")} aria-hidden />
-              <SeatsAvailabilityText
-                showExact={!!showAvailableSeatsCount}
-                totalSeats={seatsPerTimeSlot}
-                bookedSeats={slot.attendees || 0}
-              />
-            </p>
-          )}
-        </Button>
-        {!!slot.showConfirmButton && (
-          <HoverCard.Root>
-            <HoverCard.Trigger asChild>
-              <m.div key={slot.time} initial={{ width: 0 }} animate={{ width: "auto" }} exit={{ width: 0 }}>
-                <Button
-                  variant={layout === "column_view" ? "icon" : "button"}
-                  StartIcon={layout === "column_view" ? "chevron-right" : undefined}
-                  type="button"
-                  className={confirmStepClassNames?.confirmButton}
-                  onClick={() =>
-                    onTimeSelect &&
-                    onTimeSelect(slot.time, slot?.attendees || 0, seatsPerTimeSlot, slot.bookingUid)
-                  }
-                  data-testid="skip-confirm-book-button"
-                  disabled={
-                    isTimeslotUnavailable ||
-                    (!!shouldRenderCaptcha && !watchedCfToken) ||
-                    loadingStates?.creatingBooking ||
-                    loadingStates?.creatingRecurringBooking ||
-                    isVerificationCodeSending ||
-                    loadingStates?.creatingInstantBooking ||
-                    confirmButtonDisabled
-                  }
-                  color="primary"
-                  loading={
-                    (selectedTimeslot === slot.time && loadingStates?.creatingBooking) ||
-                    loadingStates?.creatingRecurringBooking ||
-                    isVerificationCodeSending ||
-                    loadingStates?.creatingInstantBooking
-                  }
-                >
-                  {(() => {
-                    if (layout === "column_view") return "";
-                    if (isTimeslotUnavailable) return t("timeslot_unavailable_short");
-                    if (!renderConfirmNotVerifyEmailButtonCond) return t("verify_email_button");
-                    return isPaidEvent ? t("pay_and_book") : t("confirm");
-                  })()}
-                </Button>
-              </m.div>
-            </HoverCard.Trigger>
-            {isOverlapping && (
-              <HoverCard.Portal>
-                <HoverCard.Content side="top" align="end" sideOffset={2}>
-                  <div className="text-emphasis bg-inverted w-(--booker-timeslots-width) rounded-md p-3">
-                    <div className="flex items-center gap-2">
-                      <p>Busy</p>
-                    </div>
-                    <p className="text-muted">
-                      {overlappingTimeStart} - {overlappingTimeEnd}
-                    </p>
-                  </div>
-                </HoverCard.Content>
-              </HoverCard.Portal>
-            )}
-          </HoverCard.Root>
-        )}
-      </div>
-    </AnimatePresence>
-  );
-};
-
-export const AvailableTimes = ({
-  slots,
-  showTimeFormatToggle = true,
-  className,
-  isPlatform = false,
-  ...props
-}: AvailableTimesProps) => {
-  const { t } = useLocale();
-
-  const oooAllDay = slots.every((slot) => slot.away);
-  if (oooAllDay) {
-    return <OOOSlot {...slots[0]} isPlatform={isPlatform} />;
-  }
-
-  const oooBeforeSlots = slots[0] && slots[0].away;
-  const oooAfterSlots = slots[slots.length - 1] && slots[slots.length - 1].away;
-
-  return (
-    <div className={cn("text-default flex flex-col", className)}>
-      <div className="h-full pb-4">
-        {!slots.length && (
-          <div
-            data-testId="no-slots-available"
-            className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent"
-          >
-            <Icon name="calendar-x-2" className="text-muted mb-2 h-4 w-4" />
-            <p className={cn("text-muted", showTimeFormatToggle ? "-mt-1 text-lg" : "text-sm")}>
-              {t("all_booked_today")}
-            </p>
-          </div>
-        )}
-        {oooBeforeSlots && !oooAfterSlots && <OOOSlot {...slots[0]} isPlatform={isPlatform} />}
-        {slots.map((slot) => {
-          if (slot.away) return null;
-          return <SlotItem key={slot.time} slot={slot} {...props} />;
-        })}
-        {oooAfterSlots && !oooBeforeSlots && (
-          <OOOSlot {...slots[slots.length - 1]} className="pb-0" isPlatform={isPlatform} />
-        )}
-      </div>
-    </div>
-  );
-};
-
-interface IOOOSlotProps {
-  fromUser?: Slot["fromUser"];
-  toUser?: Slot["toUser"];
-  reason?: string;
-  emoji?: string;
-  notes?: string | null;
-  showNotePublicly?: boolean;
-  time?: string;
-  className?: string;
-  isPlatform?: boolean;
-}
-
-const OOOSlot: React.FC<IOOOSlotProps> = (props) => {
-  const {
-    fromUser,
-    toUser,
-    reason,
-    emoji,
-    notes,
-    showNotePublicly,
-    time,
-    className = "",
-    isPlatform = false,
-  } = props;
-
-  if (isPlatform) return <></>;
-  return (
-    <OutOfOfficeInSlots
-      fromUser={fromUser}
-      toUser={toUser}
-      date={dayjs(time).format("YYYY-MM-DD")}
-      reason={reason}
-      emoji={emoji}
-      notes={notes}
-      showNotePublicly={showNotePublicly}
-      borderDashed
-      className={className}
-    />
-  );
-};
-
-export const AvailableTimesSkeleton = () => (
-  <div className="flex w-[20%] flex-col only:w-full">
-    {Array.from({ length: Math.floor(Math.random() * 6) + 1 }).map((_, i) => (
-      <SkeletonText className="mb-4 h-6 w-full" key={i} />
-    ))}
-  </div>
-);

package/src/booker/components/book-event-form/book-event-form.tsx

@@ -1,344 +0,0 @@
-// @ts-nocheck — loose event + useBookingForm + error-shape contract
-"use client";
-
-import { useMemo, useState } from "react";
-import type { FieldError } from "react-hook-form";
-import { Alert } from "../../../components/ui/alert";
-import { Button } from "../../../components/ui/button";
-import { EmptyScreen } from "../../../components/ui/empty-screen";
-import { Form } from "../../../components/ui/form";
-import { APP_NAME, WEBSITE_PRIVACY_POLICY_URL, WEBSITE_TERMS_URL } from "../../../constants/app";
-import type { BookerEvent } from "../../../contracts";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { ErrorCode } from "../../../vendor/error-codes";
-import { getPaymentAppData } from "../../../vendor/payments";
-import ServerTrans from "../../../vendor/server-trans";
-import type { TimeFormat } from "../../../vendor/time-format";
-import { useBookerStoreContext } from "../../booker-store-provider";
-import { useBookerTime } from "../../hooks/use-booker-time";
-import type { UseBookingFormReturnType } from "../../hooks/use-booking-form";
-import type { IUseBookingErrors, IUseBookingLoadingStates } from "../../hooks/use-bookings-types";
-import { formatEventFromTime } from "../../utils/dates";
-
-import { BookingFields } from "./booking-fields";
-import { FormSkeleton } from "./skeleton";
-
-type TFunction = (key: string, options?: Record<string, unknown>) => string;
-
-type BookEventFormProps = {
-  onCancel?: () => void;
-  onSubmit: () => void;
-  errorRef: React.RefObject<HTMLDivElement>;
-  errors: UseBookingFormReturnType["errors"] & IUseBookingErrors;
-  loadingStates: IUseBookingLoadingStates;
-  children?: React.ReactNode;
-  bookingForm: UseBookingFormReturnType["bookingForm"];
-  renderConfirmNotVerifyEmailButtonCond: boolean;
-  extraOptions: Record<string, string | string[]>;
-  isPlatform?: boolean;
-  isPlatformBookerEmbed?: boolean;
-  isVerificationCodeSending: boolean;
-  isTimeslotUnavailable: boolean;
-  shouldRenderCaptcha?: boolean;
-  confirmButtonDisabled?: boolean;
-  classNames?: {
-    confirmButton?: string;
-    backButton?: string;
-  };
-  timeslot: string | null;
-};
-
-export const BookEventForm = ({
-  onCancel,
-  eventQuery,
-  onSubmit,
-  errorRef,
-  errors,
-  loadingStates,
-  renderConfirmNotVerifyEmailButtonCond,
-  bookingForm,
-  children,
-  extraOptions,
-  isVerificationCodeSending,
-  isPlatform = false,
-  isPlatformBookerEmbed = false,
-  isTimeslotUnavailable,
-  shouldRenderCaptcha,
-  confirmButtonDisabled,
-  classNames,
-  timeslot,
-}: Omit<BookEventFormProps, "event"> & {
-  eventQuery: {
-    isError: boolean;
-    isPending: boolean;
-    data?: Pick<BookerEvent, "price" | "currency" | "metadata" | "bookingFields" | "locations"> | null;
-  };
-}) => {
-  const eventType = eventQuery.data;
-  const setFormValues = useBookerStoreContext((state) => state.setFormValues);
-  const bookingData = useBookerStoreContext((state) => state.bookingData);
-  const rescheduleUid = useBookerStoreContext((state) => state.rescheduleUid);
-  const username = useBookerStoreContext((state) => state.username);
-  const isInstantMeeting = useBookerStoreContext((state) => state.isInstantMeeting);
-  const { timeFormat, timezone } = useBookerTime();
-
-  const [responseVercelIdHeader] = useState<string | null>(null);
-  const { t, i18n } = useLocale();
-
-  const isPaidEvent = useMemo(() => {
-    if (!eventType?.price) return false;
-    const paymentAppData = getPaymentAppData(eventType);
-    return eventType?.price > 0 && !Number.isNaN(paymentAppData.price) && paymentAppData.price > 0;
-  }, [eventType]);
-
-  const paymentCurrency = useMemo(() => {
-    if (!eventType) return "USD";
-    return getPaymentAppData(eventType)?.currency || "USD";
-  }, [eventType]);
-
-  if (eventQuery.isError) return <Alert severity="warning" message={t("error_booking_event")} />;
-  if (eventQuery.isPending || !eventQuery.data) return <FormSkeleton />;
-  if (!timeslot)
-    return (
-      <EmptyScreen
-        headline={t("timeslot_missing_title")}
-        description={t("timeslot_missing_description")}
-        Icon="calendar"
-        buttonText={t("timeslot_missing_cta")}
-        buttonOnClick={onCancel}
-      />
-    );
-
-  if (!eventType) {
-    console.warn("No event type found for event", extraOptions);
-    return <Alert severity="warning" message={t("error_booking_event")} />;
-  }
-
-  const watchedCfToken = bookingForm.watch("cfToken");
-
-  return (
-    <div className="flex flex-col h-full">
-      <Form
-        className="flex flex-col h-full"
-        onChange={() => {
-          const values = bookingForm.getValues();
-          setFormValues(values);
-        }}
-        form={bookingForm}
-        handleSubmit={onSubmit}
-        noValidate
-      >
-        <BookingFields
-          isDynamicGroupBooking={!!(username && username.indexOf("+") > -1)}
-          fields={eventType.bookingFields}
-          locations={eventType.locations}
-          rescheduleUid={rescheduleUid || undefined}
-          bookingData={bookingData}
-          isPaidEvent={isPaidEvent}
-          paymentCurrency={paymentCurrency}
-        />
-        {errors.hasFormErrors || errors.hasDataErrors ? (
-          <div data-testid="booking-fail">
-            <Alert
-              ref={errorRef}
-              className="my-2"
-              severity="info"
-              title={rescheduleUid ? t("reschedule_fail") : t("booking_fail")}
-              message={getError({
-                globalError: errors.formErrors,
-                dataError: errors.dataErrors,
-                t,
-                responseVercelIdHeader,
-                timeFormat,
-                timezone,
-                language: i18n.language,
-              })}
-            />
-          </div>
-        ) : isTimeslotUnavailable ? (
-          <div data-testid="slot-not-allowed-to-book">
-            <Alert
-              severity="info"
-              title={t("unavailable_timeslot_title")}
-              message={
-                <ServerTrans
-                  t={t}
-                  i18nKey="timeslot_unavailable_book_a_new_time"
-                  components={[
-                    <button
-                      key="please-select-a-new-time-button"
-                      type="button"
-                      className="underline"
-                      onClick={onCancel}
-                    >
-                      Please select a new time
-                    </button>,
-                  ]}
-                />
-              }
-            />
-          </div>
-        ) : null}
-
-        {!isPlatform && (
-          <div className="my-3 w-full text-xs text-subtle">
-            <ServerTrans
-              t={t}
-              i18nKey="signing_up_terms"
-              values={{ appName: APP_NAME }}
-              components={[
-                <a
-                  className="text-emphasis hover:underline"
-                  key="terms"
-                  href={`${WEBSITE_TERMS_URL}`}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Terms
-                </a>,
-                <a
-                  className="text-emphasis hover:underline"
-                  key="privacy"
-                  href={`${WEBSITE_PRIVACY_POLICY_URL}`}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Privacy Policy.
-                </a>,
-              ]}
-            />
-          </div>
-        )}
-
-        {isPlatformBookerEmbed && (
-          <div className="my-3 w-full text-xs text-subtle">
-            {t("proceeding_agreement")}{" "}
-            <a
-              className="text-emphasis hover:underline"
-              key="terms"
-              href={`${WEBSITE_TERMS_URL}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t("terms")}
-            </a>{" "}
-            {t("and")}{" "}
-            <a
-              className="text-emphasis hover:underline"
-              key="privacy"
-              href={`${WEBSITE_PRIVACY_POLICY_URL}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t("privacy_policy")}
-            </a>
-            .
-          </div>
-        )}
-        <div className="flex justify-end mt-auto space-x-2 modalsticky rtl:space-x-reverse">
-          {isInstantMeeting ? (
-            <Button type="submit" color="primary" loading={loadingStates.creatingInstantBooking}>
-              {isPaidEvent ? t("pay_and_book") : t("confirm")}
-            </Button>
-          ) : (
-            <>
-              {!!onCancel && (
-                <Button
-                  color="minimal"
-                  type="button"
-                  onClick={onCancel}
-                  data-testid="back"
-                  className={classNames?.backButton}
-                >
-                  {t("back")}
-                </Button>
-              )}
-
-              <Button
-                type="submit"
-                color="primary"
-                disabled={
-                  (!!shouldRenderCaptcha && !watchedCfToken) || isTimeslotUnavailable || confirmButtonDisabled
-                }
-                loading={
-                  loadingStates.creatingBooking ||
-                  loadingStates.creatingRecurringBooking ||
-                  isVerificationCodeSending
-                }
-                className={classNames?.confirmButton}
-                data-testid={
-                  rescheduleUid && bookingData ? "confirm-reschedule-button" : "confirm-book-button"
-                }
-              >
-                {rescheduleUid && bookingData
-                  ? t("reschedule")
-                  : renderConfirmNotVerifyEmailButtonCond
-                    ? isPaidEvent
-                      ? t("pay_and_book")
-                      : t("confirm")
-                    : t("verify_email_button")}
-              </Button>
-            </>
-          )}
-        </div>
-      </Form>
-      {children}
-    </div>
-  );
-};
-
-const getError = ({
-  globalError,
-  dataError,
-  t,
-  responseVercelIdHeader,
-  timeFormat,
-  timezone,
-  language,
-}: {
-  globalError: FieldError | undefined;
-  dataError: any;
-  t: TFunction;
-  responseVercelIdHeader: string | null;
-  timeFormat: TimeFormat;
-  timezone: string;
-  language: string;
-}) => {
-  if (globalError) return globalError?.message;
-
-  const error = dataError;
-
-  let date = "";
-  let count = 0;
-
-  if (error?.message === ErrorCode.BookerLimitExceededReschedule) {
-    const formattedDate = formatEventFromTime({
-      date: error.data.startTime,
-      timeFormat,
-      timeZone: timezone,
-      language,
-    });
-    date = `${formattedDate.date} ${formattedDate.time}`;
-  }
-
-  if (error?.message === ErrorCode.BookerLimitExceeded && error.data?.count) {
-    count = error.data.count;
-  }
-
-  const messageKey =
-    error?.message === ErrorCode.BookerLimitExceeded ? "booker_upcoming_limit_reached" : error?.message;
-
-  return error?.message ? (
-    <>
-      {responseVercelIdHeader ?? ""} {t(messageKey, { date, count })}
-      {error.data?.traceId && (
-        <div className="mt-2 text-xs text-subtle">
-          <span className="font-medium">{t("trace_reference_id")}:</span>
-          <code className="ml-1 font-mono break-all select-all">{error.data.traceId}</code>
-        </div>
-      )}
-    </>
-  ) : (
-    <>{t("can_you_try_again")}</>
-  );
-};