@calcom/atoms 2.6.0 → 2.7.1

package/src/event-types/components/bulk-edit-default-for-events-modal.tsx

@@ -0,0 +1,129 @@
+// @ts-nocheck — Radix dialog prop-pick narrowing
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "../../components/ui/button";
+import { CheckboxField } from "../../components/ui/checkbox";
+import { Dialog } from "../../components/ui/controlled-dialog";
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
+import { Form } from "../../components/ui/form";
+import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
+
+export const BulkUpdateEventSchema = z.object({
+  eventTypeIds: z.array(z.number()),
+});
+
+export type BulkUpdatParams = { eventTypeIds: number[]; callback: () => void };
+export type EventTypes = Array<{ id: number; title: string }>;
+
+export function BulkEditDefaultForEventsModal({
+  eventTypes,
+  isEventTypesFetching,
+  isPlatform = false,
+  ...props
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  bulkUpdateFunction: (params: BulkUpdatParams) => void;
+  isPending: boolean;
+  description: string;
+  isEventTypesFetching?: boolean;
+  eventTypes?: EventTypes;
+  handleBulkEditDialogToggle: () => void;
+  isPlatform?: boolean;
+}) {
+  const { t } = useLocale();
+
+  const form = useForm({
+    resolver: zodResolver(BulkUpdateEventSchema),
+    defaultValues: {
+      eventTypeIds: eventTypes?.map((e) => e.id) ?? [],
+    },
+  });
+
+  const eventTypesSelected = form.watch("eventTypeIds");
+  const isButtonDisabled = eventTypesSelected.length === 0;
+
+  if (isEventTypesFetching || !props.open || !eventTypes) return null;
+
+  return (
+    <Dialog
+      isPlatform={isPlatform}
+      name="Bulk Default Location Update"
+      open={props.open}
+      onOpenChange={props.setOpen}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("default_conferencing_bulk_title")}</DialogTitle>
+          <DialogDescription>{props.description}</DialogDescription>
+        </DialogHeader>
+        <Form
+          form={form}
+          handleSubmit={(values) => {
+            props.bulkUpdateFunction({
+              eventTypeIds: values.eventTypeIds,
+              callback: () => props.setOpen(false),
+            });
+          }}
+        >
+          <div className="flex flex-col stack-y-2">
+            {eventTypes.length > 0 && (
+              <div className="flex items-center space-x-2 rounded-md px-3 pb-2.5 pt-1">
+                <CheckboxField
+                  description={t("select_all")}
+                  descriptionAsLabel
+                  onChange={(e) => {
+                    form.setValue("eventTypeIds", e.target.checked ? eventTypes.map((e) => e.id) : []);
+                  }}
+                  checked={eventTypesSelected.length === eventTypes.length}
+                />
+              </div>
+            )}
+            {eventTypes.map((eventType) => (
+              <div
+                key={eventType.id}
+                className="bg-cal-muted flex items-center space-x-2 rounded-md px-3 py-2.5"
+              >
+                <CheckboxField
+                  description={eventType.title}
+                  descriptionAsLabel
+                  checked={eventTypesSelected.includes(eventType.id)}
+                  onChange={(e) => {
+                    form.setValue(
+                      "eventTypeIds",
+                      e.target.checked
+                        ? [...eventTypesSelected, eventType.id]
+                        : eventTypesSelected.filter((id) => id !== eventType.id)
+                    );
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+          <DialogFooter className="mt-10">
+            <DialogClose
+              onClick={() => {
+                props.handleBulkEditDialogToggle();
+              }}
+            />
+            <Button type="submit" color="primary" loading={props.isPending} disabled={isButtonDisabled}>
+              {t("update")}
+            </Button>
+          </DialogFooter>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default BulkEditDefaultForEventsModal;

package/src/event-types/components/children-event-type-select.tsx

@@ -0,0 +1,223 @@
+// @ts-nocheck — loose ChildrenEventType contract + Radix prop-pick
+"use client";
+
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import type { Props } from "react-select";
+import { Avatar } from "../../components/ui/avatar";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { ButtonGroup } from "../../components/ui/button-group";
+import { Select } from "../../components/ui/select";
+import { Switch } from "../../components/ui/switch";
+import { Tooltip } from "../../components/ui/tooltip";
+import type { ChildrenEventType } from "../../contracts";
+import { MembershipRole } from "../../contracts";
+import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
+import { cn } from "../../lib/utils";
+import { getBookerBaseUrlSync } from "../../vendor/booker-url";
+
+export type ChildrenEventTypeSelectCustomClassNames = {
+  assignToSelect?: {
+    select?: string;
+    innerClassNames?: Record<string, unknown>;
+  };
+  selectedChildrenList?: {
+    container?: string;
+    listItem?: {
+      container?: string;
+      avatar?: string;
+      name?: string;
+      ownerBadge?: string;
+      memberBadge?: string;
+      hiddenBadge?: string;
+      badgeContainer?: string;
+      eventLink?: string;
+      showOnProfileTooltip?: string;
+      previewEventTypeTooltip?: string;
+      previewEventTypeButton?: string;
+      deleteEventTypeTooltip?: string;
+      deleteEventTypeButton?: string;
+    };
+  };
+};
+
+export const ChildrenEventTypeSelect = ({
+  options = [],
+  value = [],
+  customClassNames,
+  ...props
+}: Omit<Props<ChildrenEventType, true>, "value" | "onChange"> & {
+  value?: ChildrenEventType[];
+  onChange: (value: readonly ChildrenEventType[]) => void;
+  customClassNames?: ChildrenEventTypeSelectCustomClassNames;
+}) => {
+  const { t } = useLocale();
+  const [animationRef] = useAutoAnimate<HTMLUListElement>();
+
+  // Mirrors features-side dedup logic. Without this, selecting an option
+  // bypasses the de-duplication and the existing children list, calling the
+  // outer `onChange` with react-select's raw `newValue` array.
+  const handleSelectChange = (newValue, actionMeta) => {
+    const nextValue =
+      actionMeta?.action === "select-option" && actionMeta.option
+        ? Array.from(new Map([...value, actionMeta.option].map((item) => [item.owner.id, item])).values())
+        : [...newValue];
+    props.onChange(nextValue);
+  };
+
+  return (
+    <>
+      <Select
+        name={props.name}
+        placeholder={t("select")}
+        options={options}
+        className={customClassNames?.assignToSelect?.select}
+        innerClassNames={customClassNames?.assignToSelect?.innerClassNames}
+        value={value}
+        isMulti
+        {...props}
+        onChange={handleSelectChange}
+      />
+      <ul
+        className={cn(
+          "border-subtle divide-subtle mt-3 divide-y rounded-md",
+          value.length >= 1 && "border",
+          customClassNames?.selectedChildrenList?.container
+        )}
+        ref={animationRef}
+      >
+        {value.map((children, index) => (
+          <li key={index}>
+            <div
+              className={cn(
+                "flex flex-row items-center gap-3 p-3",
+                customClassNames?.selectedChildrenList?.listItem?.container
+              )}
+            >
+              <Avatar
+                size="mdLg"
+                className={cn("overflow-visible", customClassNames?.selectedChildrenList?.listItem?.avatar)}
+                imageSrc={children.owner.avatar as string | undefined}
+                alt={children.owner.name || children.owner.email || ""}
+              />
+              <div className="flex w-full flex-row justify-between">
+                <div className="flex flex-col">
+                  <span
+                    className={cn(
+                      "text text-sm font-semibold leading-none",
+                      customClassNames?.selectedChildrenList?.listItem?.name
+                    )}
+                  >
+                    {children.owner.name || children.owner.email}
+                    <div
+                      className={cn(
+                        "flex flex-row gap-1",
+                        customClassNames?.selectedChildrenList?.listItem?.badgeContainer
+                      )}
+                    >
+                      {children.owner.membership === MembershipRole.OWNER ? (
+                        <Badge
+                          variant="gray"
+                          className={customClassNames?.selectedChildrenList?.listItem?.ownerBadge}
+                        >
+                          {t("owner")}
+                        </Badge>
+                      ) : (
+                        <Badge
+                          variant="gray"
+                          className={customClassNames?.selectedChildrenList?.listItem?.memberBadge}
+                        >
+                          {t("member")}
+                        </Badge>
+                      )}
+                      {children.hidden && (
+                        <Badge
+                          variant="gray"
+                          className={customClassNames?.selectedChildrenList?.listItem?.hiddenBadge}
+                        >
+                          {t("hidden")}
+                        </Badge>
+                      )}
+                    </div>
+                  </span>
+                  {children.owner.username && (
+                    <small
+                      className={cn(
+                        "text-subtle font-normal leading-normal",
+                        customClassNames?.selectedChildrenList?.listItem?.eventLink
+                      )}
+                    >
+                      {`/${children.owner.username}/${children.slug}`}
+                    </small>
+                  )}
+                </div>
+                <div className={cn("flex flex-row items-center gap-2")}>
+                  <Tooltip
+                    className={customClassNames?.selectedChildrenList?.listItem?.showOnProfileTooltip}
+                    content={t("show_eventtype_on_profile")}
+                  >
+                    <div className="self-center rounded-md p-2">
+                      <Switch
+                        name="Hidden"
+                        checked={!children.hidden}
+                        onCheckedChange={(checked) => {
+                          const newData = value.map((item) =>
+                            item.owner.id === children.owner.id ? { ...item, hidden: !checked } : item
+                          );
+                          props.onChange(newData);
+                        }}
+                      />
+                    </div>
+                  </Tooltip>
+                  <ButtonGroup combined>
+                    {children.created && children.owner.username && (
+                      <Tooltip
+                        className={customClassNames?.selectedChildrenList?.listItem?.previewEventTypeTooltip}
+                        content={t("preview")}
+                      >
+                        <Button
+                          data-testid="preview-button"
+                          color="secondary"
+                          target="_blank"
+                          variant="icon"
+                          className={customClassNames?.selectedChildrenList?.listItem?.previewEventTypeButton}
+                          href={`${getBookerBaseUrlSync(
+                            (
+                              children.owner.profile as
+                                | { organization?: { slug?: string | null } }
+                                | undefined
+                            )?.organization?.slug ?? null
+                          )}/${children.owner?.username}/${children.slug}`}
+                          StartIcon="external-link"
+                        />
+                      </Tooltip>
+                    )}
+                    <Tooltip
+                      className={customClassNames?.selectedChildrenList?.listItem?.deleteEventTypeTooltip}
+                      content={t("delete")}
+                    >
+                      <Button
+                        color="secondary"
+                        target="_blank"
+                        variant="icon"
+                        className={customClassNames?.selectedChildrenList?.listItem?.deleteEventTypeButton}
+                        onClick={() =>
+                          props.onChange(value.filter((item) => item.owner.id !== children.owner.id))
+                        }
+                        StartIcon="x"
+                      />
+                    </Tooltip>
+                  </ButtonGroup>
+                </div>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export type { ChildrenEventType };
+
+export default ChildrenEventTypeSelect;

package/src/event-types/components/create-event-type-form.tsx

@@ -0,0 +1,160 @@
+// @ts-nocheck — loose event-type form contract + Radix prop-pick
+"use client";
+
+import type { ReactNode } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { Form } from "../../components/ui/form";
+import { TextAreaField, TextField } from "../../components/ui/text-field";
+import { Tooltip } from "../../components/ui/tooltip";
+import { MAX_EVENT_DURATION_MINUTES, MIN_EVENT_DURATION_MINUTES } from "../../constants/app";
+import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
+import { slugify } from "../../vendor/slugify";
+
+type CreateEventTypeFormValues = {
+  title?: string;
+  slug?: string;
+  description?: string;
+  length?: number;
+  [key: string]: unknown;
+};
+
+export default function CreateEventTypeForm({
+  form,
+  isManagedEventType,
+  handleSubmit,
+  pageSlug,
+  isPending,
+  urlPrefix,
+  SubmitButton,
+  isPlatform = false,
+  /**
+   * Override the description input. Useful for webapp callers that want
+   * to render a rich-text editor (markdown) instead of the default
+   * TextAreaField. Atoms ships a plain textarea because shipping the
+   * full @calcom/ui Editor is out of the SDK surface.
+   */
+  descriptionSlot,
+}: {
+  form: UseFormReturn<CreateEventTypeFormValues>;
+  isManagedEventType: boolean;
+  handleSubmit: (values: CreateEventTypeFormValues) => void;
+  pageSlug?: string;
+  isPending: boolean;
+  urlPrefix?: string;
+  SubmitButton: (isPending: boolean) => ReactNode;
+  isPlatform?: boolean;
+  descriptionSlot?: ReactNode;
+}) {
+  const { t } = useLocale();
+  const { register } = form;
+
+  return (
+    <Form
+      form={form}
+      handleSubmit={(values: CreateEventTypeFormValues) => {
+        handleSubmit(values);
+      }}
+    >
+      <div className="mt-3 stack-y-6 pb-11">
+        <TextField
+          label={t("title")}
+          placeholder={t("quick_chat")}
+          data-testid="event-type-quick-chat"
+          {...register("title")}
+          onChange={(e) => {
+            form.setValue("title", e?.target.value);
+            if (form.formState.touchedFields["slug"] === undefined) {
+              form.setValue("slug", slugify(e?.target.value));
+            }
+          }}
+        />
+
+        {urlPrefix && urlPrefix.length >= 21 ? (
+          <div>
+            <TextField
+              label={isPlatform ? "Slug" : `${t("url")}: ${urlPrefix}`}
+              required
+              addOnLeading={
+                !isPlatform ? (
+                  <span className="max-w-24 md:max-w-56 overflow-hidden text-ellipsis whitespace-nowrap min-w-0">
+                    {`/${!isManagedEventType ? pageSlug : t("username_placeholder")}/`}
+                  </span>
+                ) : undefined
+              }
+              containerClassName="[&>div]:gap-0"
+              className="pl-0"
+              {...register("slug")}
+              onChange={(e) => {
+                form.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
+              }}
+            />
+            {isManagedEventType && !isPlatform && (
+              <p className="mt-2 text-sm text-gray-600">{t("managed_event_url_clarification")}</p>
+            )}
+          </div>
+        ) : (
+          <div>
+            <TextField
+              label={isPlatform ? "Slug" : t("url")}
+              required
+              addOnLeading={
+                !isPlatform ? (
+                  <Tooltip
+                    content={`${urlPrefix}/${!isManagedEventType ? pageSlug : t("username_placeholder")}/`}
+                  >
+                    <span className="max-w-24 md:max-w-56 overflow-hidden text-ellipsis whitespace-nowrap min-w-0">
+                      {`${urlPrefix}/${!isManagedEventType ? pageSlug : t("username_placeholder")}/`}
+                    </span>
+                  </Tooltip>
+                ) : undefined
+              }
+              containerClassName="[&>div]:gap-0"
+              className="pl-0"
+              {...register("slug")}
+              onChange={(e) => {
+                form.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
+              }}
+            />
+            {isManagedEventType && !isPlatform && (
+              <p className="mt-2 text-sm text-gray-600">{t("managed_event_url_clarification")}</p>
+            )}
+          </div>
+        )}
+        {descriptionSlot ?? (
+          <TextAreaField
+            name="description"
+            label={t("description")}
+            placeholder={t("quick_video_meeting")}
+            {...register("description")}
+          />
+        )}
+        <div className="relative">
+          <TextField
+            type="number"
+            required
+            min={MIN_EVENT_DURATION_MINUTES}
+            max={MAX_EVENT_DURATION_MINUTES}
+            placeholder="15"
+            label={t("duration")}
+            className="pr-4"
+            {...register("length", {
+              valueAsNumber: true,
+              min: {
+                value: MIN_EVENT_DURATION_MINUTES,
+                message: t("duration_min_error", { min: MIN_EVENT_DURATION_MINUTES }),
+              },
+              max: {
+                value: MAX_EVENT_DURATION_MINUTES,
+                message: t("duration_max_error", { max: MAX_EVENT_DURATION_MINUTES }),
+              },
+            })}
+            addOnSuffix={t("minutes").toLowerCase()}
+          />
+        </div>
+      </div>
+      {SubmitButton(isPending)}
+    </Form>
+  );
+}
+
+export { CreateEventTypeForm };

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

@@ -0,0 +1,9 @@
+// Re-export so pre-existing atoms wrappers that import this path get the
+// canonical team-assignment implementation instead of the old no-op stub.
+export {
+  default,
+  EventTeamAssignmentTab,
+  type EventTeamAssignmentTabBaseProps,
+  type EventTeamAssignmentTabCustomClassNames,
+  mapMemberToChildrenOption,
+} from "./team-assignment/event-team-assignment-tab";

package/src/event-types/components/event-type-list-item.tsx

@@ -0,0 +1,153 @@
+// @ts-nocheck — atoms wrapper/hook over loose contracts + Radix 1.x
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { ConfirmationDialogContent } from "../../components/ui/confirmation-dialog-content";
+import { Dialog } from "../../components/ui/dialog";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown";
+import { showToast } from "../../components/ui/show-toast";
+import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
+import { formatEventTypeDuration } from "../lib/format-event-type-duration";
+import type { AtomEventTypeListItem } from "../types";
+
+const EventTypeContent = ({ eventType }: { eventType: AtomEventTypeListItem }) => {
+  return (
+    <div>
+      <div className="space-x-2 rtl:space-x-reverse">
+        <span className="text-emphasis truncate font-medium">{eventType.title}</span>
+      </div>
+      <div className="text-subtle mt-1">
+        {eventType.description && <span className="block">{eventType.description}</span>}
+        <Badge variant="gray" className="text-xs">
+          {formatEventTypeDuration(eventType.length)}
+        </Badge>
+      </div>
+    </div>
+  );
+};
+
+type EventTypeActionsProps = {
+  eventType: AtomEventTypeListItem;
+  isDeletable: boolean;
+  getEventTypeUrl?: (eventTypeId: number) => string;
+  deleteFunction: ({ eventTypeId }: { eventTypeId: number }) => void;
+};
+
+const EventTypeActions = ({
+  eventType,
+  isDeletable,
+  getEventTypeUrl,
+  deleteFunction,
+}: EventTypeActionsProps) => {
+  const { t } = useLocale();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  return (
+    <>
+      <Dropdown>
+        <DropdownMenuTrigger asChild>
+          <Button
+            data-testid={`event-type-options-${eventType.id}`}
+            type="button"
+            variant="icon"
+            color="secondary"
+            StartIcon="ellipsis"
+            aria-label={t("options")}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {getEventTypeUrl && (
+            <DropdownMenuItem className="min-w-40 focus:ring-muted">
+              <DropdownItem type="button" StartIcon="pencil" href={getEventTypeUrl(eventType.id)}>
+                {t("edit")}
+              </DropdownItem>
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="min-w-40 focus:ring-muted">
+            <DropdownItem
+              type="button"
+              color="destructive"
+              StartIcon="trash"
+              data-testid={`delete-event-type-${eventType.id}`}
+              className="rounded-t-none"
+              onClick={() => {
+                if (!isDeletable) {
+                  showToast(t("cannot_delete_event_type"), "error");
+                  return;
+                }
+                setIsDeleteDialogOpen(true);
+              }}
+            >
+              {t("delete")}
+            </DropdownItem>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </Dropdown>
+
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <ConfirmationDialogContent
+          variety="danger"
+          title={t("delete_event_type")}
+          confirmBtnText={t("delete")}
+          onConfirm={() => {
+            deleteFunction({ eventTypeId: eventType.id });
+            setIsDeleteDialogOpen(false);
+          }}
+        >
+          {t("delete_event_type_confirmation")}
+        </ConfirmationDialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+type EventTypeListItemProps = {
+  eventType: AtomEventTypeListItem;
+  deleteFunction: ({ eventTypeId }: { eventTypeId: number }) => void;
+  isDeletable?: boolean;
+  getEventTypeUrl?: (eventTypeId: number) => string;
+};
+
+export function EventTypeListItem({
+  eventType,
+  deleteFunction,
+  isDeletable = true,
+  getEventTypeUrl,
+}: EventTypeListItemProps) {
+  const Wrapper: React.ElementType = getEventTypeUrl ? Link : "div";
+  const wrapperProps = getEventTypeUrl
+    ? {
+        href: getEventTypeUrl(eventType.id),
+        title: eventType.title,
+      }
+    : {};
+
+  return (
+    <li key={eventType.id}>
+      <div className="hover:bg-muted flex items-center justify-between px-3 py-5 transition sm:px-4">
+        <div className="group flex w-full items-center justify-between">
+          <Wrapper className="flex-grow truncate text-sm" {...wrapperProps}>
+            <EventTypeContent eventType={eventType} />
+          </Wrapper>
+        </div>
+        <EventTypeActions
+          eventType={eventType}
+          isDeletable={isDeletable}
+          getEventTypeUrl={getEventTypeUrl}
+          deleteFunction={deleteFunction}
+        />
+      </div>
+    </li>
+  );
+}