@calcom/atoms 2.8.0 → 2.8.2

package/src/event-types/components/team-assignment/assign-all-managed-warning-dialog.tsx

@@ -1,43 +0,0 @@
-// @ts-nocheck — Radix dialog prop-pick
-"use client";
-
-import { ConfirmationDialogContent } from "../../../components/ui/confirmation-dialog-content";
-import { Dialog } from "../../../components/ui/controlled-dialog";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-
-interface AssignAllManagedWarningDialogProps {
-  isOpen: boolean;
-  eventTypeSlug: string;
-  onConfirm: () => void;
-  onClose: () => void;
-}
-
-const AssignAllManagedWarningDialog = ({
-  isOpen,
-  eventTypeSlug,
-  onConfirm,
-  onClose,
-}: AssignAllManagedWarningDialogProps) => {
-  const { t } = useLocale();
-
-  return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) onClose();
-      }}
-    >
-      <ConfirmationDialogContent
-        variety="warning"
-        title={t("assign_all_managed_warning_title")}
-        confirmBtnText={t("confirm")}
-        cancelBtnText={t("go_back")}
-        onConfirm={onConfirm}
-      >
-        <p className="mt-5">{t("assign_all_managed_warning_description", { slug: eventTypeSlug })}</p>
-      </ConfirmationDialogContent>
-    </Dialog>
-  );
-};
-
-export default AssignAllManagedWarningDialog;

package/src/event-types/components/team-assignment/children-event-types-list.tsx

@@ -1,43 +0,0 @@
-// @ts-nocheck — loose ChildrenEventType contract + Radix prop-pick
-"use client";
-
-import type { ComponentProps } from "react";
-import type { Options } from "react-select";
-import { Label } from "../../../components/ui/label";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import type { ChildrenEventTypeSelectCustomClassNames } from "../children-event-type-select";
-import ChildrenEventTypeSelect from "../children-event-type-select";
-import type { mapMemberToChildrenOption } from "./event-team-assignment-tab";
-
-export const ChildrenEventTypesList = ({
-  options = [],
-  value,
-  onChange,
-  customClassNames,
-  ...rest
-}: {
-  value: ReturnType<typeof mapMemberToChildrenOption>[];
-  onChange?: (options: ReturnType<typeof mapMemberToChildrenOption>[]) => void;
-  options?: Options<ReturnType<typeof mapMemberToChildrenOption>>;
-  customClassNames?: ChildrenEventTypeSelectCustomClassNames;
-} & Omit<Partial<ComponentProps<typeof ChildrenEventTypeSelect>>, "onChange" | "value">) => {
-  const { t } = useLocale();
-  return (
-    <div className={cn("stack-y-5 flex flex-col", customClassNames?.assignToSelect?.container)}>
-      <div>
-        <Label className={customClassNames?.assignToSelect?.label}>{t("assign_to")}</Label>
-        <ChildrenEventTypeSelect
-          aria-label="assignment-dropdown"
-          data-testid="assignment-dropdown"
-          onChange={(selected) => onChange && onChange([...selected])}
-          value={value}
-          options={options.filter((opt) => !value.find((val) => val.owner.id === opt.owner.id))}
-          controlShouldRenderValue={false}
-          customClassNames={customClassNames}
-          {...rest}
-        />
-      </div>
-    </div>
-  );
-};

package/src/event-types/components/team-assignment/children-event-types.tsx

@@ -1,62 +0,0 @@
-// @ts-nocheck — loose FormValues contract
-"use client";
-
-import { Controller } from "react-hook-form";
-import type { FormValues } from "../../../contracts";
-import { cn } from "../../../lib/utils";
-import AssignAllTeamMembers from "../assign-all-team-members";
-import type { ChildrenEventTypeSelectCustomClassNames } from "../children-event-type-select";
-import { ChildrenEventTypesList } from "./children-event-types-list";
-import type { mapMemberToChildrenOption } from "./event-team-assignment-tab";
-
-export type ChildrenEventTypesCustomClassNames = {
-  container?: string;
-  assignAllTeamMembers?: {
-    container?: string;
-    label?: string;
-    description?: string;
-  };
-  childrenEventTypesList?: ChildrenEventTypeSelectCustomClassNames;
-};
-
-export const ChildrenEventTypes = ({
-  childrenEventTypeOptions,
-  assignAllTeamMembers,
-  setAssignAllTeamMembers,
-  customClassNames,
-}: {
-  childrenEventTypeOptions: ReturnType<typeof mapMemberToChildrenOption>[];
-  assignAllTeamMembers: boolean;
-  setAssignAllTeamMembers: (value: boolean) => void;
-  customClassNames?: ChildrenEventTypesCustomClassNames;
-}) => {
-  return (
-    <div
-      className={cn(
-        "border-subtle stack-y-5 mt-6 rounded-lg border px-4 py-6 sm:px-6",
-        customClassNames?.container
-      )}
-    >
-      <div className="flex flex-col gap-4">
-        <AssignAllTeamMembers
-          assignAllTeamMembers={assignAllTeamMembers}
-          setAssignAllTeamMembers={setAssignAllTeamMembers}
-          customClassNames={customClassNames?.assignAllTeamMembers}
-        />
-        {!assignAllTeamMembers ? (
-          <Controller<FormValues>
-            name="children"
-            render={({ field: { onChange, value } }) => (
-              <ChildrenEventTypesList
-                value={value}
-                options={childrenEventTypeOptions}
-                onChange={onChange}
-                customClassNames={customClassNames?.childrenEventTypesList}
-              />
-            )}
-          />
-        ) : null}
-      </div>
-    </div>
-  );
-};

package/src/event-types/components/team-assignment/event-team-assignment-tab.tsx

@@ -1,300 +0,0 @@
-// @ts-nocheck — loose EventTypeSetupProps/FormValues contracts
-"use client";
-
-import { useCallback } from "react";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
-import { Label } from "../../../components/ui/label";
-import { RadioAreaGroup, RadioArea as RadioAreaItem } from "../../../components/ui/radio-area-group";
-import { Select } from "../../../components/ui/select";
-import { SettingsToggle } from "../../../components/ui/settings-toggle";
-import { Tooltip } from "../../../components/ui/tooltip";
-import type { EventTypeSetupProps, FormValues } from "../../../contracts";
-import { RRTimestampBasis, SchedulingType } from "../../../contracts";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import { useTeamEventAssignment } from "../../hooks/use-team-event-assignment";
-import AssignAllManagedWarningDialog from "./assign-all-managed-warning-dialog";
-import type { ChildrenEventTypesCustomClassNames } from "./children-event-types";
-import { ChildrenEventTypes } from "./children-event-types";
-import type { HostsCustomClassNames } from "./hosts";
-import { Hosts } from "./hosts";
-
-export type EventTeamAssignmentTabCustomClassNames = {
-  assignmentType?: {
-    container?: string;
-    label?: string;
-    description?: string;
-    schedulingTypeSelect?: {
-      container?: string;
-      label?: string;
-      select?: string;
-      innerClassNames?: Record<string, unknown>;
-    };
-  };
-  hosts?: HostsCustomClassNames;
-  childrenEventTypes?: ChildrenEventTypesCustomClassNames;
-};
-
-export type EventTeamAssignmentTabBaseProps = Pick<
-  EventTypeSetupProps,
-  "teamMembers" | "team" | "eventType"
-> & {
-  customClassNames?: EventTeamAssignmentTabCustomClassNames;
-  orgId: number | null;
-  isSegmentApplicable: boolean;
-  hideFixedHostsForCollective?: boolean;
-  /**
-   * Optional slot for the RAQB-driven weights editor sheet
-   * (EditWeightsForAllTeamMembers — webapp-only, out of atoms surface).
-   */
-  weightsEditorSlot?: React.ReactNode;
-};
-
-export const mapMemberToChildrenOption = (
-  member: {
-    id: number;
-    name?: string | null;
-    email: string;
-    username?: string | null;
-    avatar: string;
-    membership?: string;
-    eventTypes?: string[];
-    // Use Record<string, unknown> instead of `unknown` so the inferred
-    // return type stays assignable to features-side ChildrenEventType
-    // (whose owner.profile is `UserProfile | Record<string, unknown>`).
-    // `unknown` is the top type and won't narrow into the union without
-    // a cast at every call site.
-    profile?: Record<string, unknown>;
-  },
-  slug: string,
-  pendingString: string
-) => {
-  return {
-    slug,
-    hidden: false,
-    created: false,
-    owner: {
-      id: member.id,
-      name: member.name ?? "",
-      email: member.email,
-      username: member.username ?? "",
-      membership: member.membership,
-      eventTypeSlugs: member.eventTypes ?? [],
-      avatar: member.avatar,
-      profile: member.profile,
-    },
-    value: `${member.id ?? ""}`,
-    label: `${member.name || member.email || ""}${!member.username ? ` (${pendingString})` : ""}`,
-  };
-};
-
-export const EventTeamAssignmentTab = ({
-  team,
-  teamMembers,
-  eventType,
-  customClassNames,
-  orgId,
-  isSegmentApplicable,
-  hideFixedHostsForCollective = false,
-  weightsEditorSlot,
-}: EventTeamAssignmentTabBaseProps) => {
-  const { t } = useLocale();
-  const { control, setValue } = useFormContext<FormValues>();
-
-  const {
-    assignAllTeamMembers,
-    attemptSetAssignAll,
-    childrenEventTypeOptions,
-    teamMembersOptions,
-    eventTypeSlug,
-    isManagedEventType,
-    resetAssignAll,
-    warningDialog,
-  } = useTeamEventAssignment({ eventType, teamMembers });
-
-  const schedulingTypeOptions: { value: SchedulingType; label: string }[] = [
-    { value: SchedulingType.COLLECTIVE, label: t("collective") },
-    { value: SchedulingType.ROUND_ROBIN, label: t("round_robin") },
-  ];
-
-  const handleSchedulingTypeChange = useCallback(
-    (schedulingType: SchedulingType | undefined, onChange: (value: SchedulingType | undefined) => void) => {
-      if (schedulingType) {
-        onChange(schedulingType);
-        setValue("assignRRMembersUsingSegment", false, { shouldDirty: true });
-        resetAssignAll();
-      }
-    },
-    [resetAssignAll, setValue]
-  );
-
-  const handleMaxLeadThresholdChange = (val: string, onChange: (value: number | null) => void) => {
-    onChange(val === "loadBalancing" ? 3 : null);
-  };
-
-  const schedulingType = useWatch({ control, name: "schedulingType" });
-  const hostGroups = (useWatch({ control, name: "hostGroups" }) as Array<unknown>) ?? [];
-
-  return (
-    <div>
-      {team && !isManagedEventType && (
-        <>
-          <div
-            className={cn(
-              "border-subtle flex flex-col rounded-md",
-              customClassNames?.assignmentType?.container
-            )}
-          >
-            <div className="border-subtle rounded-t-md border p-6 pb-5">
-              <Label className={cn("mb-1 text-sm font-semibold", customClassNames?.assignmentType?.label)}>
-                {t("assignment")}
-              </Label>
-              <p
-                className={cn(
-                  "text-subtle wrap-break-word max-w-full text-sm leading-tight",
-                  customClassNames?.assignmentType?.description
-                )}
-              >
-                {t("assignment_description")}
-              </p>
-            </div>
-            <div
-              className={cn(
-                "border-subtle rounded-b-md border border-t-0 p-6",
-                customClassNames?.assignmentType?.schedulingTypeSelect?.container
-              )}
-            >
-              <Label className={customClassNames?.assignmentType?.schedulingTypeSelect?.label}>
-                {t("scheduling_type")}
-              </Label>
-              <Controller<FormValues>
-                name="schedulingType"
-                render={({ field: { value, onChange } }) => (
-                  <Select
-                    options={schedulingTypeOptions}
-                    value={schedulingTypeOptions.find((opt) => opt.value === value)}
-                    className={cn("w-full", customClassNames?.assignmentType?.schedulingTypeSelect?.select)}
-                    innerClassNames={customClassNames?.assignmentType?.schedulingTypeSelect?.innerClassNames}
-                    onChange={(val) => handleSchedulingTypeChange(val?.value, onChange)}
-                  />
-                )}
-              />
-            </div>
-          </div>
-          {schedulingType === SchedulingType.ROUND_ROBIN && (
-            <div className="border-subtle mt-4 flex flex-col rounded-md">
-              <div className="border-subtle rounded-t-md border p-6 pb-5">
-                <Label className="mb-1 text-sm font-semibold">{t("rr_distribution_method")}</Label>
-                <p className="text-subtle wrap-break-word max-w-full text-sm leading-tight">
-                  {t("rr_distribution_method_description")}
-                </p>
-              </div>
-              <div className="border-subtle rounded-b-md border border-t-0 p-6">
-                <Controller
-                  name="maxLeadThreshold"
-                  render={({ field: { value, onChange } }) => (
-                    <RadioAreaGroup
-                      onValueChange={(val) => handleMaxLeadThresholdChange(val, onChange)}
-                      className="mt-1 flex flex-col gap-4"
-                    >
-                      <RadioAreaItem
-                        value="maximizeAvailability"
-                        checked={value === null}
-                        className="w-full text-sm"
-                        classNames={{ container: "w-full" }}
-                      >
-                        <strong className="mb-1 block">
-                          {t("rr_distribution_method_availability_title")}
-                        </strong>
-                        <p>{t("rr_distribution_method_availability_description")}</p>
-                      </RadioAreaItem>
-                      {(eventType.team?.rrTimestampBasis &&
-                        eventType.team?.rrTimestampBasis !== RRTimestampBasis.CREATED_AT) ||
-                      hostGroups.length > 1 ? (
-                        <Tooltip
-                          content={
-                            eventType.team?.rrTimestampBasis &&
-                            eventType.team?.rrTimestampBasis !== RRTimestampBasis.CREATED_AT
-                              ? t("rr_load_balancing_disabled")
-                              : t("rr_load_balancing_disabled_with_groups")
-                          }
-                        >
-                          <div className="w-full">
-                            <RadioAreaItem
-                              value="loadBalancing"
-                              checked={value !== null}
-                              className="text-sm"
-                              disabled={true}
-                              classNames={{ container: "w-full" }}
-                            >
-                              <strong className="mb-1">{t("rr_distribution_method_balanced_title")}</strong>
-                              <p>{t("rr_distribution_method_balanced_description")}</p>
-                            </RadioAreaItem>
-                          </div>
-                        </Tooltip>
-                      ) : (
-                        <div className="w-full">
-                          <RadioAreaItem
-                            value="loadBalancing"
-                            checked={value !== null}
-                            className="text-sm"
-                            classNames={{ container: "w-full" }}
-                          >
-                            <strong className="mb-1">{t("rr_distribution_method_balanced_title")}</strong>
-                            <p>{t("rr_distribution_method_balanced_description")}</p>
-                          </RadioAreaItem>
-                        </div>
-                      )}
-                    </RadioAreaGroup>
-                  )}
-                />
-                <div className="mt-4">
-                  <Controller
-                    name="includeNoShowInRRCalculation"
-                    render={({ field: { value, onChange } }) => (
-                      <SettingsToggle
-                        title={t("include_no_show_in_rr_calculation")}
-                        labelClassName="mt-1.5"
-                        checked={value}
-                        onCheckedChange={(val) => onChange(val)}
-                      />
-                    )}
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-          <Hosts
-            orgId={orgId}
-            isSegmentApplicable={isSegmentApplicable}
-            teamId={team.id}
-            assignAllTeamMembers={assignAllTeamMembers}
-            setAssignAllTeamMembers={attemptSetAssignAll}
-            teamMembers={teamMembersOptions}
-            customClassNames={customClassNames?.hosts}
-            hideFixedHostsForCollective={hideFixedHostsForCollective}
-            weightsEditorSlot={weightsEditorSlot}
-          />
-        </>
-      )}
-      {team && isManagedEventType && (
-        <>
-          <ChildrenEventTypes
-            assignAllTeamMembers={assignAllTeamMembers}
-            setAssignAllTeamMembers={attemptSetAssignAll}
-            childrenEventTypeOptions={childrenEventTypeOptions}
-            customClassNames={customClassNames?.childrenEventTypes}
-          />
-          <AssignAllManagedWarningDialog
-            isOpen={warningDialog.isOpen}
-            eventTypeSlug={eventTypeSlug}
-            onConfirm={warningDialog.onConfirm}
-            onClose={warningDialog.onClose}
-          />
-        </>
-      )}
-    </div>
-  );
-};
-
-export default EventTeamAssignmentTab;

package/src/event-types/components/team-assignment/fixed-hosts.tsx

@@ -1,170 +0,0 @@
-// @ts-nocheck — loose FormValues/Host/TeamMember + Radix prop-pick
-"use client";
-
-import Link from "next/link";
-import { useCallback, useState } from "react";
-import { useFormContext } from "react-hook-form";
-import type { AddMembersWithSwitchCustomClassNames } from "../../../add-members-switch/add-members-with-switch";
-import AddMembersWithSwitch from "../../../add-members-switch/add-members-with-switch";
-import { Label } from "../../../components/ui/label";
-import { SettingsToggle } from "../../../components/ui/settings-toggle";
-import type { FormValues, Host, TeamMember } from "../../../contracts";
-import { useAtomsLocale as useLocale } from "../../../hooks/use-atoms-locale";
-import { cn } from "../../../lib/utils";
-import ServerTrans from "../../../vendor/server-trans";
-
-type TranslationFunction = (key: string, options?: Record<string, unknown>) => string;
-
-const FixedHostHelper = ({ t }: { t: TranslationFunction }) => (
-  <ServerTrans
-    t={t}
-    i18nKey="fixed_host_helper"
-    components={[
-      <Link
-        key="fixed_host_helper"
-        className="underline underline-offset-2"
-        target="_blank"
-        href="https://cal.com/docs/enterprise-features/teams/round-robin-scheduling#fixed-hosts"
-      >
-        Learn more
-      </Link>,
-    ]}
-  />
-);
-
-export type FixedHostsCustomClassNames = {
-  container?: string;
-  label?: string;
-  description?: string;
-  children?: string;
-  addMembers?: AddMembersWithSwitchCustomClassNames;
-};
-
-export const FixedHosts = ({
-  teamId,
-  teamMembers,
-  value,
-  onChange,
-  assignAllTeamMembers,
-  setAssignAllTeamMembers,
-  isRoundRobinEvent = false,
-  customClassNames,
-}: {
-  teamId: number;
-  value: Host[];
-  onChange: (hosts: Host[]) => void;
-  teamMembers: TeamMember[];
-  assignAllTeamMembers: boolean;
-  setAssignAllTeamMembers: (value: boolean) => void;
-  isRoundRobinEvent?: boolean;
-  customClassNames?: FixedHostsCustomClassNames;
-}) => {
-  const { t } = useLocale();
-  const { getValues, setValue } = useFormContext<FormValues>();
-
-  const hasActiveFixedHosts = isRoundRobinEvent && getValues("hosts").some((host) => host.isFixed);
-  const [isDisabled, setIsDisabled] = useState(hasActiveFixedHosts);
-
-  const handleFixedHostsActivation = useCallback(() => {
-    const currentHosts = getValues("hosts");
-    setValue(
-      "hosts",
-      teamMembers.map((teamMember: TeamMember) => {
-        const host = currentHosts.find((h: Host) => h.userId === parseInt(teamMember.value, 10));
-        return {
-          isFixed: true,
-          userId: parseInt(teamMember.value, 10),
-          priority: host?.priority ?? 2,
-          weight: host?.weight ?? 100,
-          avatar: host?.avatar ?? teamMember.avatar,
-          name: host?.name ?? teamMember.label,
-          scheduleId: host?.scheduleId || teamMember.defaultScheduleId,
-          groupId: host?.groupId || null,
-        };
-      }),
-      { shouldDirty: true }
-    );
-  }, [getValues, setValue, teamMembers]);
-
-  const handleFixedHostsToggle = useCallback(
-    (checked: boolean) => {
-      if (!checked) {
-        const rrHosts = getValues("hosts")
-          .filter((host: Host) => !host.isFixed)
-          .sort((a: Host, b: Host) => (b.priority ?? 2) - (a.priority ?? 2));
-        setValue("hosts", rrHosts, { shouldDirty: true });
-      }
-      setIsDisabled(checked);
-    },
-    [getValues, setValue]
-  );
-
-  return (
-    <div className={cn("mt-5 rounded-lg", customClassNames?.container)}>
-      {!isRoundRobinEvent ? (
-        <>
-          <div className={cn("border-subtle mt-5 rounded-t-md border p-6 pb-5", customClassNames?.container)}>
-            <Label className={cn("mb-1 text-sm font-semibold", customClassNames?.label)}>
-              {t("fixed_hosts")}
-            </Label>
-            <p
-              className={cn(
-                "text-subtle wrap-break-word max-w-full text-sm leading-tight",
-                customClassNames?.description
-              )}
-            >
-              <FixedHostHelper t={t} />
-            </p>
-          </div>
-          <div className="border-subtle rounded-b-md border border-t-0 px-6">
-            <AddMembersWithSwitch
-              teamId={teamId}
-              groupId={null}
-              teamMembers={teamMembers}
-              value={value}
-              onChange={onChange}
-              assignAllTeamMembers={assignAllTeamMembers}
-              setAssignAllTeamMembers={setAssignAllTeamMembers}
-              automaticAddAllEnabled={!isRoundRobinEvent}
-              isFixed={true}
-              customClassNames={customClassNames?.addMembers}
-              onActive={handleFixedHostsActivation}
-            />
-          </div>
-        </>
-      ) : (
-        <SettingsToggle
-          data-testid="fixed-hosts-switch"
-          toggleSwitchAtTheEnd={true}
-          title={t("fixed_hosts")}
-          description={<FixedHostHelper t={t} />}
-          checked={isDisabled && !assignAllTeamMembers}
-          hideSwitch={assignAllTeamMembers}
-          labelClassName={cn("text-sm", customClassNames?.label)}
-          descriptionClassName={cn("text-sm text-subtle", customClassNames?.description)}
-          switchContainerClassName={customClassNames?.container}
-          onCheckedChange={handleFixedHostsToggle}
-          childrenClassName={cn("lg:ml-0", customClassNames?.children)}
-        >
-          <div className="border-subtle flex flex-col gap-6 rounded-bl-md rounded-br-md border border-t-0 px-6">
-            <AddMembersWithSwitch
-              data-testid="fixed-hosts-select"
-              groupId={null}
-              placeholder={t("add_a_member")}
-              teamId={teamId}
-              teamMembers={teamMembers}
-              customClassNames={customClassNames?.addMembers}
-              value={value}
-              onChange={onChange}
-              assignAllTeamMembers={assignAllTeamMembers}
-              setAssignAllTeamMembers={setAssignAllTeamMembers}
-              automaticAddAllEnabled={!isRoundRobinEvent}
-              isFixed={true}
-              onActive={handleFixedHostsActivation}
-            />
-          </div>
-        </SettingsToggle>
-      )}
-    </div>
-  );
-};