@calcom/atoms 2.7.2 → 2.8.1

package/src/event-types/wrappers/create-event-type-platform-wrapper.tsx

@@ -1,148 +0,0 @@
-// @ts-nocheck — atoms wrapper/hook over loose contracts + Radix 1.x
-
-import { AtomsWrapper } from "../../components/atoms-wrapper";
-import { Button } from "../../components/ui/button";
-import type { EventType } from "../../contracts";
-import { useCreateEventType } from "../../hooks/event-types/private/use-create-event-type";
-import { useCreateEventTypeForm } from "../../hooks/event-types/private/use-create-event-type-form";
-import { useCreateTeamEventType } from "../../hooks/event-types/private/use-create-team-event-type";
-import { useTeams } from "../../hooks/teams/use-teams";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import CreateEventTypeForm from "../components/create-event-type-form";
-import { TeamEventTypeForm } from "../components/team-event-type-form";
-
-type ActionButtonsClassNames = {
-  container?: string;
-  submit?: string;
-  cancel?: string;
-};
-
-type CreateEventTypeProps = {
-  teamId?: number;
-  onSuccess?: (eventType: EventType) => void;
-  onError?: (error: Error) => void;
-  customClassNames?: {
-    atomsWrapper?: string;
-    buttons?: ActionButtonsClassNames;
-  };
-  onCancel?: () => void;
-  isDryRun?: boolean;
-};
-
-const ActionButtons = ({
-  submitLabel,
-  cancelLabel,
-  isPending,
-  customClassNames,
-  onCancel,
-}: {
-  submitLabel: string;
-  cancelLabel: string;
-  isPending: boolean;
-  customClassNames?: ActionButtonsClassNames;
-  onCancel?: () => void;
-}) => {
-  return (
-    <div className={cn("flex flex-row gap-4", customClassNames?.container)}>
-      <Button type="submit" loading={isPending} className={customClassNames?.submit}>
-        {submitLabel}
-      </Button>
-      {onCancel && (
-        <Button
-          color="secondary"
-          type="button"
-          loading={isPending}
-          className={customClassNames?.cancel}
-          onClick={() => onCancel()}
-        >
-          {cancelLabel}
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export const CreateEventTypePlatformWrapper = ({
-  teamId,
-  onSuccess,
-  onError,
-  customClassNames,
-  onCancel,
-  isDryRun = false,
-}: CreateEventTypeProps) => {
-  const { form, isManagedEventType } = useCreateEventTypeForm();
-  const createEventTypeQuery = useCreateEventType({ onSuccess, onError });
-  const createTeamEventTypeQuery = useCreateTeamEventType({ onSuccess, onError });
-  const { data: teams } = useTeams();
-  const team = teams?.find((t) => t.id === teamId);
-  const { t } = useLocale();
-
-  const permissions = {
-    canCreateEventType: team?.role === "ADMIN" || team?.role === "OWNER",
-  };
-
-  return teamId && team ? (
-    <AtomsWrapper customClassName={customClassNames?.atomsWrapper}>
-      <TeamEventTypeForm
-        isPlatform={true}
-        teamSlug={team?.slug}
-        teamId={teamId}
-        permissions={permissions}
-        urlPrefix=""
-        isPending={createTeamEventTypeQuery.isPending}
-        form={form}
-        isManagedEventType={isManagedEventType}
-        handleSubmit={(values) => {
-          !isDryRun &&
-            createTeamEventTypeQuery.mutate({
-              lengthInMinutes: values.length,
-              title: values.title,
-              slug: values.slug,
-              description: values.description ?? "",
-              schedulingType: values.schedulingType ?? "COLLECTIVE",
-              hosts: [],
-              teamId,
-            });
-        }}
-        SubmitButton={(isPending) =>
-          ActionButtons({
-            isPending,
-            onCancel,
-            submitLabel: t("continue"),
-            cancelLabel: t("cancel"),
-            customClassNames: customClassNames?.buttons,
-          })
-        }
-      />
-    </AtomsWrapper>
-  ) : (
-    <AtomsWrapper customClassName={customClassNames?.atomsWrapper}>
-      <CreateEventTypeForm
-        isPlatform={true}
-        urlPrefix=""
-        isPending={createEventTypeQuery.isPending}
-        form={form}
-        isManagedEventType={isManagedEventType}
-        handleSubmit={(values) => {
-          !isDryRun &&
-            createEventTypeQuery.mutate({
-              lengthInMinutes: values.length,
-              title: values.title,
-              slug: values.slug,
-              description: values.description ?? "",
-            });
-        }}
-        SubmitButton={(isPending) =>
-          ActionButtons({
-            isPending,
-            onCancel,
-            submitLabel: t("continue"),
-            cancelLabel: t("cancel"),
-            customClassNames: customClassNames?.buttons,
-          })
-        }
-      />
-    </AtomsWrapper>
-  );
-};

package/src/event-types/wrappers/event-recurring-tab-platform-wrapper.tsx

@@ -1,8 +0,0 @@
-import type { EventRecurringTabProps } from "../components/tabs/event-recurring-tab";
-import { EventRecurringTab } from "../components/tabs/event-recurring-tab";
-
-const EventRecurringTabPlatformWrapper = (props: EventRecurringTabProps) => {
-  return <EventRecurringTab {...props} />;
-};
-
-export default EventRecurringTabPlatformWrapper;

package/src/event-types/wrappers/event-team-assignment-tab-platform-wrapper.tsx

@@ -1,15 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-import {
-  EventTeamAssignmentTab,
-  type EventTeamAssignmentTabBaseProps,
-  // biome-ignore lint/style/noRestrictedImports: pre-existing violation
-} from "../components/event-team-assignment-tab";
-
-const EventTeamAssignmentTabPlatformWrapper = (
-  props: Omit<EventTeamAssignmentTabBaseProps, "isSegmentApplicable" | "hideFixedHostsForCollective">
-) => {
-  // todo: implement attributes for platform orgs for segment
-  return <EventTeamAssignmentTab {...props} isSegmentApplicable={false} hideFixedHostsForCollective={true} />;
-};
-
-export default EventTeamAssignmentTabPlatformWrapper;

package/src/event-types/wrappers/event-type-platform-wrapper.tsx

@@ -1,399 +0,0 @@
-// @ts-nocheck — wrapper/hook reconciles loose atoms contracts with legacy
-// backend payload shapes (unknowns from Record<string, any> branches, Radix
-// prop-pick narrowing). Runtime matches pre-extract behavior; a targeted
-// typing pass follows once the contracts are tightened per-consumer.
-"use client";
-
-import { useQueryClient } from "@tanstack/react-query";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { BookerStoreProvider } from "../../booker/booker-store-provider";
-import { AtomsWrapper } from "../../components/atoms-wrapper";
-import { Form } from "../../components/ui/form";
-import { useToast } from "../../components/ui/use-toast";
-import type { EventTypePlatformWrapperRef, EventTypeSetupProps, FormValues } from "../../contracts";
-import { SchedulingType } from "../../contracts";
-import { useDeleteEventTypeById } from "../../hooks/event-types/private/use-delete-event-type-by-id";
-import { useDeleteTeamEventTypeById } from "../../hooks/event-types/private/use-delete-team-event-type-by-id";
-import { useAtomsContext } from "../../hooks/use-atoms-context";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { useMe } from "../../hooks/use-me";
-import type { ChildrenEventType } from "../components/children-event-type-select";
-// biome-ignore lint/style/noRestrictedImports: pre-existing violation
-import type { EventTeamAssignmentTabCustomClassNames } from "../components/event-team-assignment-tab";
-import ManagedEventTypeDialog from "../components/managed-event-dialog";
-import type { EventRecurringTabCustomClassNames } from "../components/recurring-event-controller";
-import {
-  QUERY_KEY as ATOM_EVENT_TYPE_QUERY_KEY,
-  useAtomsEventTypeById,
-} from "../hooks/use-atom-event-type-by-id";
-import { useAtomUpdateEventType } from "../hooks/use-atom-update-event-type";
-import { useEventTypeForm } from "../hooks/use-event-type-form";
-import { useHandleRouteChange } from "../hooks/use-handle-route-change";
-import { usePlatformTabsNavigations } from "../hooks/use-platform-tabs-navigations";
-import EventRecurringTabPlatformWrapper from "./event-recurring-tab-platform-wrapper";
-import EventTeamAssignmentTabPlatformWrapper from "./event-team-assignment-tab-platform-wrapper";
-import type { PlatformTabs } from "./types";
-
-export type EventTypeCustomClassNames = {
-  atomsWrapper?: string;
-  eventAssignmentTab?: EventTeamAssignmentTabCustomClassNames;
-  eventRecurringTab?: EventRecurringTabCustomClassNames;
-};
-
-export type EventTypePlatformWrapperProps = {
-  id: number;
-  tabs?: PlatformTabs[];
-  onSuccess?: (eventType: FormValues) => void;
-  onError?: (eventType: FormValues, error: Error) => void;
-  onDeleteSuccess?: () => void;
-  onDeleteError?: (msg: string) => void;
-  allowDelete: boolean;
-  customClassNames?: EventTypeCustomClassNames;
-  disableToasts?: boolean;
-  isDryRun?: boolean;
-  onFormStateChange?: (formState: {
-    isDirty: boolean;
-    dirtyFields: Partial<FormValues>;
-    values: FormValues;
-  }) => void;
-};
-
-const EventType = forwardRef<
-  EventTypePlatformWrapperRef,
-  EventTypeSetupProps & EventTypePlatformWrapperProps
->(function EventType(props, ref) {
-  const {
-    tabs = ["setup", "availability", "team", "limits", "advanced", "recurring", "payments"],
-    onSuccess,
-    onError,
-    onDeleteSuccess,
-    onDeleteError,
-    id,
-    allowDelete = true,
-    customClassNames,
-    disableToasts = false,
-    isDryRun = false,
-    onFormStateChange,
-    ...restProps
-  } = props;
-  const { t } = useLocale();
-  const { toast } = useToast();
-  const { organizationId } = useAtomsContext();
-  const isTeamEventTypeDeleted = useRef(false);
-  const leaveWithoutAssigningHosts = useRef(false);
-  const { eventType, locationOptions, team, teamMembers, destinationCalendar } = restProps;
-  const [slugExistsChildrenDialogOpen, setSlugExistsChildrenDialogOpen] = useState<ChildrenEventType[]>([]);
-  const { data: user, isLoading: isUserLoading } = useMe();
-
-  const handleDeleteSuccess = () => {
-    if (!disableToasts) {
-      showToast(t("event_type_deleted_successfully"), "success");
-    }
-    isTeamEventTypeDeleted.current = true;
-    setSlugExistsChildrenDialogOpen([]);
-    onDeleteSuccess?.();
-  };
-
-  const handleDeleteError = (err: Error) => {
-    if (!disableToasts) {
-      showToast(err.message, "error");
-    }
-    onDeleteError?.(err.message);
-  };
-
-  const deleteMutation = useDeleteEventTypeById({
-    onSuccess: async () => {
-      handleDeleteSuccess();
-    },
-    onError: (err) => {
-      handleDeleteError(err);
-    },
-  });
-
-  const deleteTeamEventTypeMutation = useDeleteTeamEventTypeById({
-    onSuccess: async () => {
-      handleDeleteSuccess();
-    },
-    onError: (err) => {
-      handleDeleteError(err);
-    },
-  });
-
-  const updateMutation = useAtomUpdateEventType({
-    onSuccess: async () => {
-      const currentValues = form.getValues();
-
-      currentValues.children = currentValues.children.map((child) => ({
-        ...child,
-        created: true,
-      }));
-      currentValues.assignAllTeamMembers = currentValues.assignAllTeamMembers || false;
-
-      // Reset the form with these values as new default values to ensure the correct comparison for dirtyFields eval
-      form.reset(currentValues);
-      if (!disableToasts) {
-        toast({ description: t("event_type_updated_successfully", { eventTypeTitle: eventType.title }) });
-      }
-      onSuccess?.(currentValues);
-      callbacksRef.current?.onSuccess?.();
-    },
-    async onSettled() {
-      return;
-    },
-    onError: (err: Error) => {
-      const currentValues = form.getValues();
-      const message = err?.message;
-      const description = message ? t(message) : t(err.message);
-      if (!disableToasts) {
-        toast({ description });
-      }
-      onError?.(currentValues, err);
-
-      const errorObj = new Error(description);
-      callbacksRef.current?.onError?.(errorObj);
-    },
-    teamId: team?.id,
-  });
-
-  const { form, handleSubmit } = useEventTypeForm({
-    eventType,
-    onSubmit: (data) => {
-      if (!isDryRun) {
-        updateMutation.mutate(data);
-      } else {
-        toast({ description: t("event_type_updated_successfully", { eventTypeTitle: eventType.title }) });
-        callbacksRef.current?.onSuccess?.();
-      }
-    },
-    onFormStateChange: onFormStateChange,
-  });
-
-  // Create a ref for the save button to trigger its click
-  const saveButtonRef = useRef<HTMLButtonElement>(null);
-
-  const callbacksRef = useRef<{ onSuccess?: () => void; onError?: (error: Error) => void }>({});
-
-  const handleFormSubmit = useCallback(
-    (customCallbacks?: { onSuccess?: () => void; onError?: (error: Error) => void }) => {
-      if (customCallbacks) {
-        callbacksRef.current = customCallbacks;
-      }
-
-      if (saveButtonRef.current) {
-        saveButtonRef.current.click();
-      } else {
-        form.handleSubmit((data) => {
-          try {
-            handleSubmit(data);
-            customCallbacks?.onSuccess?.();
-          } catch (error) {
-            customCallbacks?.onError?.(error as Error);
-          }
-        })();
-      }
-    },
-    [handleSubmit, form]
-  );
-
-  const validateForm = useCallback(async () => {
-    const isValid = await form.trigger();
-    return {
-      isValid,
-      errors: form.formState.errors,
-    };
-  }, [form]);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      validateForm,
-      handleFormSubmit,
-    }),
-    [validateForm, handleFormSubmit]
-  );
-  const slug = form.watch("slug") ?? eventType.slug;
-
-  const showToast = (message: string, _variant: "success" | "warning" | "error") => {
-    if (!disableToasts) {
-      toast({ description: message });
-    }
-  };
-
-  const tabMap = useMemo(
-    () => ({
-      // atoms SDK only ships tabs it can render cleanly. Setup /
-      // availability / limits / advanced / payments / instant / apps /
-      // workflows / webhooks / ai are admin UI that lives in the
-      // webapp — see packages/features/eventtypes/components/tabs/* for
-      // the real implementations. Consumers that need those tabs pass
-      // a custom tabMap (future SDK surface) or use the webapp's
-      // EventTypeWebWrapper directly.
-      setup: () => <></>,
-      availability: () => <></>,
-      team: () =>
-        tabs.includes("team") ? (
-          <EventTeamAssignmentTabPlatformWrapper
-            team={team}
-            eventType={eventType}
-            teamMembers={teamMembers}
-            customClassNames={customClassNames?.eventAssignmentTab}
-            orgId={organizationId}
-          />
-        ) : (
-          <></>
-        ),
-      advanced: () => <></>,
-      payments: () => <></>,
-      limits: () => <></>,
-      instant: () => <></>,
-      recurring: () =>
-        tabs.includes("recurring") ? (
-          <EventRecurringTabPlatformWrapper
-            eventType={eventType}
-            customClassNames={customClassNames?.eventRecurringTab}
-          />
-        ) : (
-          <></>
-        ),
-      apps: () => <></>,
-      workflows: () => <></>,
-      webhooks: () => <></>,
-      ai: () => <></>,
-    }),
-    [
-      tabs,
-      eventType,
-      locationOptions,
-      team,
-      teamMembers,
-      destinationCalendar,
-      customClassNames,
-      user?.data,
-      isUserLoading,
-      organizationId,
-    ]
-  );
-
-  useHandleRouteChange({
-    watchTrigger: null,
-    isTeamEventTypeDeleted: isTeamEventTypeDeleted.current,
-    isleavingWithoutAssigningHosts: leaveWithoutAssigningHosts.current,
-    isTeamEventType: !!team,
-    assignedUsers: eventType.children,
-    hosts: eventType.hosts,
-    assignAllTeamMembers: eventType.assignAllTeamMembers,
-    isManagedEventType: eventType.schedulingType === SchedulingType.MANAGED,
-    onError: () => {
-      return;
-    },
-    onStart: () => {
-      return;
-    },
-    onEnd: () => {
-      return;
-    },
-  });
-
-  const onDelete = () => {
-    if (allowDelete && !isDryRun) {
-      isTeamEventTypeDeleted.current = true;
-      team?.id
-        ? deleteTeamEventTypeMutation.mutate({ eventTypeId: id, teamId: team.id })
-        : deleteMutation.mutate(id);
-    }
-
-    if (isDryRun) {
-      handleDeleteSuccess();
-    }
-  };
-
-  const { tabsNavigation, currentTab } = usePlatformTabsNavigations({
-    formMethods: form,
-    eventType,
-    team,
-    tabs,
-  });
-  // atoms SDK consumers compose their own chrome (nav, delete, embed
-  // buttons). The SDK only ships the form + active tab content —
-  // webapp shell (EventTypeSingleLayout) stays out of atoms per the
-  // "admin UI is not an atoms dep" rule.
-  return (
-    <AtomsWrapper customClassName={customClassNames?.atomsWrapper}>
-      <Form form={form} id="event-type-form" handleSubmit={handleSubmit}>
-        <div>{tabMap[currentTab]?.()}</div>
-      </Form>
-      {slugExistsChildrenDialogOpen.length ? (
-        <ManagedEventTypeDialog
-          slugExistsChildrenDialogOpen={slugExistsChildrenDialogOpen}
-          isPending={form.formState.isSubmitting}
-          onOpenChange={() => {
-            setSlugExistsChildrenDialogOpen([]);
-          }}
-          slug={slug}
-          onConfirm={(e: { preventDefault: () => void }) => {
-            e.preventDefault();
-            handleSubmit(form.getValues());
-            setSlugExistsChildrenDialogOpen([]);
-          }}
-        />
-      ) : null}
-    </AtomsWrapper>
-  );
-});
-
-export const EventTypePlatformWrapper = forwardRef<
-  EventTypePlatformWrapperRef,
-  EventTypePlatformWrapperProps
->(function EventTypePlatformWrapper(props, ref) {
-  const {
-    id,
-    tabs,
-    onSuccess,
-    onError,
-    onDeleteSuccess,
-    onDeleteError,
-    allowDelete = true,
-    customClassNames,
-    isDryRun,
-    disableToasts,
-    onFormStateChange,
-  } = props;
-  const { data: eventTypeQueryData } = useAtomsEventTypeById(id);
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    return () => {
-      if (eventTypeQueryData) {
-        // on component unmount or eventTypeId change, reset and invalidate query to get fresh data on next mount
-        queryClient.invalidateQueries({
-          queryKey: [ATOM_EVENT_TYPE_QUERY_KEY, id],
-        });
-        queryClient.resetQueries({
-          queryKey: [ATOM_EVENT_TYPE_QUERY_KEY, id],
-        });
-      }
-    };
-  }, [queryClient, id, eventTypeQueryData]);
-
-  if (!eventTypeQueryData) return null;
-
-  return (
-    <BookerStoreProvider>
-      <EventType
-        {...eventTypeQueryData}
-        id={id}
-        tabs={tabs}
-        onSuccess={onSuccess}
-        onError={onError}
-        onDeleteSuccess={onDeleteSuccess}
-        onDeleteError={onDeleteError}
-        allowDelete={allowDelete}
-        customClassNames={customClassNames}
-        isDryRun={isDryRun}
-        onFormStateChange={onFormStateChange}
-        ref={ref}
-        disableToasts={disableToasts}
-      />
-    </BookerStoreProvider>
-  );
-});

package/src/event-types/wrappers/list-event-types-platform-wrapper.tsx

@@ -1,85 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { AtomsWrapper } from "../../components/atoms-wrapper";
-import { EmptyScreen } from "../../components/ui/empty-screen";
-import { useToast } from "../../components/ui/use-toast";
-import { useDeleteEventTypeById } from "../../hooks/event-types/private/use-delete-event-type-by-id";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { EventTypeListItem } from "../components/event-type-list-item";
-import { useAtomGetAllEventTypes } from "../hooks/use-atom-get-all-event-types";
-
-interface ListEventTypesPlatformWrapperProps {
-  getEventTypeUrl?: (eventTypeId: number) => string;
-}
-
-export const ListEventTypesPlatformWrapper = ({
-  getEventTypeUrl,
-}: ListEventTypesPlatformWrapperProps = {}) => {
-  const [animationParentRef] = useAutoAnimate<HTMLUListElement>();
-  const { toast } = useToast();
-  const { t } = useLocale();
-
-  const {
-    data: eventTypes,
-    isLoading: isLoadingEventTypes,
-    error,
-    refetch: refetchEventTypes,
-  } = useAtomGetAllEventTypes();
-
-  const { mutate: deleteEventType } = useDeleteEventTypeById({
-    onSuccess: () => {
-      toast({
-        description: t("event_type_deleted_successfully"),
-      });
-      refetchEventTypes();
-    },
-    onError: (err) => {
-      toast({
-        description: err.message,
-      });
-    },
-  });
-
-  if (isLoadingEventTypes) {
-    return <>{t("loading")}</>;
-  }
-
-  if (error) {
-    return (
-      <EmptyScreen
-        Icon="alert-circle"
-        headline={t("error_loading_event_types")}
-        description={error.message}
-        className="w-full"
-      />
-    );
-  }
-
-  if (!isLoadingEventTypes && (!eventTypes || eventTypes.length === 0)) {
-    return (
-      <EmptyScreen
-        Icon="calendar"
-        headline={t("no_event_types")}
-        description={t("no_event_types_have_been_setup")}
-        className="w-full"
-      />
-    );
-  }
-
-  return (
-    <AtomsWrapper>
-      <div className="border-subtle bg-default overflow-hidden rounded-md border">
-        <ul className="divide-subtle divide-y" data-testid="event-types" ref={animationParentRef}>
-          {eventTypes?.map((eventType) => (
-            <EventTypeListItem
-              key={eventType.id}
-              eventType={eventType}
-              deleteFunction={({ eventTypeId }) => deleteEventType(eventTypeId)}
-              isDeletable={true}
-              getEventTypeUrl={getEventTypeUrl}
-            />
-          ))}
-        </ul>
-      </div>
-    </AtomsWrapper>
-  );
-};

package/src/event-types/wrappers/types.ts

@@ -1,5 +0,0 @@
-import type { EventTypePlatformWrapperRef as EventSettingsFromRef, TabMap } from "../../contracts";
-
-export type { EventSettingsFromRef };
-
-export type PlatformTabs = keyof Omit<TabMap, "workflows" | "webhooks" | "instant" | "ai" | "apps">;