@open-mercato/core 0.8.1-develop.7452.1.5e211edd51 → 0.8.1-develop.7455.1.8f7e53badb

package/dist/modules/customers/components/calendar/CalendarEventEditor.js

@@ -8,25 +8,27 @@ import { apiCallOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
 import { extractOptimisticLockConflict } from "@open-mercato/ui/backend/utils/optimisticLock";
 import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
 import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
 import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
+import { useInjectionWidgets } from "@open-mercato/ui/backend/injection/InjectionSpot";
+import { projectCalendarCustomValues, useCalendarCustomFields, validateCalendarCustomValues } from "./editor/useCalendarCustomFields.js";
 import { collectCustomFieldValues } from "@open-mercato/ui/backend/utils/customFieldValues";
 import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { Dialog, DialogContent, DialogTitle } from "@open-mercato/ui/primitives/dialog";
 import { IconButton } from "@open-mercato/ui/primitives/icon-button";
 import { Input } from "@open-mercato/ui/primitives/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { calendarDayEndInstant, calendarDayStartInstant, calendarWallTimeToInstant, calendarTimezoneOptions, defaultCalendarTimezone, isCalendarTimezone } from "../../lib/calendar/timezone.js";
 import { Textarea } from "@open-mercato/ui/primitives/textarea";
 import { useDialogKeyHandler } from "@open-mercato/ui/hooks/useDialogKeyHandler";
 import { E } from "../../../../generated/entities.ids.generated.js";
 import {
-  buildEditorTypeOptions,
+  buildRecurrenceRule,
   buildInteractionPayload,
   computeDurationMinutes,
   createDefaultFormState,
-  defaultRepeatDaysForDateInput,
-  editorKindOfInteractionType,
-  KIND_CONFIG,
   parseItemToFormState,
   resolveSavedOwnerUserId
 } from "../../lib/calendar/editorPayload.js";
@@ -34,21 +36,12 @@ import { renderDictionaryIcon } from "@open-mercato/core/modules/dictionaries/co
 import { normalizeCustomFieldSubmitValue } from "../detail/customFieldUtils.js";
 import { EDITOR_SCROLL_EVENT, Field } from "./editor/inputs.js";
 import { SegmentGroup } from "./editor/SegmentGroup.js";
-import { PriorityField } from "./editor/PriorityField.js";
 import { RelatedToField } from "./editor/RelatedToField.js";
-import { RepeatField } from "./editor/RepeatField.js";
-import { PeopleField } from "./editor/PeopleField.js";
-import { ResourcesField } from "./editor/ResourcesField.js";
-import { ScheduleSection } from "./editor/ScheduleSection.js";
-import { LocationField } from "./editor/LocationField.js";
 import { useConflictProbe, useEditorLabelResolution } from "./editor/hooks.js";
+import { EventTypePanel } from "./editor/EventTypePanel.js";
+import { eventTypeConfig, eventTypeOptions, isSelectableEventType, selectedEventType, useEventTypeCatalog } from "./editor/useEventTypeCatalog.js";
 const FORM_ID = "customers-calendar-event-editor";
-const INTERACTION_ENTITY_IDS = [E.customers.customer_interaction];
-const PEOPLE_FIELD_TEXT = {
-  attendees: { labelKey: "customers.calendar.editor.attendees", label: "Attendees", placeholderKey: "customers.calendar.editor.addPeoplePlaceholder", placeholder: "Add staff or customer\u2026" },
-  participants: { labelKey: "customers.calendar.editor.participants", label: "Participants", placeholderKey: "customers.calendar.editor.addPeoplePlaceholder", placeholder: "Add staff or customer\u2026" },
-  to: { labelKey: "customers.calendar.editor.to", label: "To", placeholderKey: "customers.calendar.editor.addRecipientPlaceholder", placeholder: "Add recipient\u2026" }
-};
+const INTERACTION_INJECTION_SPOT = `crud-form:${E.customers.customer_interaction.replace(/:/g, ".")}`;
 function formStateOfValues(values) {
   return values;
 }
@@ -59,46 +52,94 @@ function customFieldInitialValues(item) {
     Object.entries(customValues).map(([key, value]) => [`cf_${key}`, value])
   );
 }
-function EditorBody({
-  ctx,
+function typeChangeDiscardFields(error) {
+  if (!error || typeof error !== "object") return null;
+  const details = error;
+  if (details.status !== 409 || details.code !== "calendar_type_change_confirmation_required") return null;
+  if (!Array.isArray(details.fields) || details.fields.length === 0 || !details.fields.every((field) => typeof field === "string" && field.length > 0)) return null;
+  return details.fields;
+}
+function CatalogStatusAlert({ error, onRetry }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Alert, { status: error ? "error" : "information", className: "rounded-lg lg:col-span-2", children: [
+    /* @__PURE__ */ jsx(AlertDescription, { children: error ? t("customers.calendar.editor.catalogLoadFailed") : t("customers.calendar.editor.catalogLoading") }),
+    error ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onRetry, children: t("customers.calendar.errors.retry") }) : null
+  ] });
+}
+const TimezoneField = React.memo(function TimezoneField2({
+  value,
+  error,
+  disabled,
+  onChange
+}) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const timezone = value ?? defaultCalendarTimezone();
+  const options = React.useMemo(() => open ? calendarTimezoneOptions(timezone) : [timezone], [open, timezone]);
+  const items = React.useMemo(
+    () => options.map((timezone2) => /* @__PURE__ */ jsx(SelectItem, { value: timezone2, children: timezone2 }, timezone2)),
+    [options]
+  );
+  return /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.timezone", "Time zone"), error, children: /* @__PURE__ */ jsxs(Select, { value: timezone, onValueChange: onChange, disabled, open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": t("customers.calendar.editor.timezone", "Time zone"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+    /* @__PURE__ */ jsx(SelectContent, { children: items })
+  ] }) });
+});
+const TypeSwitcher = React.memo(SegmentGroup);
+const NO_RESOURCES = [];
+const MemoRelatedToField = React.memo(RelatedToField);
+const EditorBody = React.memo(function EditorBody2({
+  values,
+  errors,
+  setValue,
   open,
   isEdit,
   item,
-  typeLabels,
-  typeIcons,
   conflictScope,
   currentUserId,
   resourcesEnabled,
-  staffEnabled
+  staffEnabled,
+  saving,
+  catalogItems,
+  catalogReady,
+  catalogError,
+  onRetryCatalog,
+  onSelectedTypeChange
 }) {
   const t = useT();
-  const { setValue, errors } = ctx;
-  const form = formStateOfValues(ctx.values);
-  const config = KIND_CONFIG[form.kind];
+  const form = formStateOfValues(values);
+  const selectedType = form.category ?? form.kind;
+  const definition = selectedEventType(catalogItems, selectedType);
+  const config = eventTypeConfig(definition);
   const update = React.useCallback(
     (patch) => {
       for (const [key, value] of Object.entries(patch)) setValue(key, value);
     },
     [setValue]
   );
+  const updateTimezone = React.useCallback((timezone) => setValue("timezone", timezone), [setValue]);
+  const selectType = React.useCallback((type) => {
+    const nextDefinition = selectedEventType(catalogItems, type);
+    update({ kind: nextDefinition.behavior.baseKind, category: type });
+    onSelectedTypeChange(type);
+  }, [catalogItems, update, onSelectedTypeChange]);
+  const updateRelatedTo = React.useCallback((relatedTo) => update({ relatedTo }), [update]);
+  const updateDeal = React.useCallback(
+    (deal2) => update({ dealId: deal2?.id ?? null, dealLabel: deal2?.label ?? null }),
+    [update]
+  );
+  const deal = React.useMemo(
+    () => form.dealId && form.dealLabel ? { id: form.dealId, label: form.dealLabel } : null,
+    [form.dealId, form.dealLabel]
+  );
+  const capabilities = React.useMemo(() => ({ resourcesEnabled, staffEnabled }), [resourcesEnabled, staffEnabled]);
   useEditorLabelResolution(open, form, update);
   const draftOwnerUserId = resolveSavedOwnerUserId(config, form, isEdit, item?.ownerUserId ?? null);
-  const conflict = useConflictProbe(open, form, config, isEdit && item ? item.raw.id : null, draftOwnerUserId, conflictScope, currentUserId);
-  const kindLabels = React.useMemo(
-    () => ({
-      meeting: t("customers.calendar.editor.types.meeting", "meeting"),
-      call: t("customers.calendar.editor.types.call", "call"),
-      email: t("customers.calendar.editor.types.email", "email"),
-      note: t("customers.calendar.editor.types.note", "note"),
-      event: t("customers.calendar.editor.types.event", "event"),
-      task: t("customers.calendar.editor.types.task", "task")
-    }),
-    [t]
-  );
-  const selectedType = form.category ?? form.kind;
+  const draftResources = resourcesEnabled && definition.behavior.fields.resources ? form.resources : NO_RESOURCES;
+  const conflict = useConflictProbe(open, form, config, isEdit && item ? item.raw.id : null, draftOwnerUserId, conflictScope, currentUserId, draftResources);
   const typeOptions = React.useMemo(
-    () => buildEditorTypeOptions({ typeLabels, typeIcons, selectedValue: selectedType, kindLabels }),
-    [typeLabels, typeIcons, selectedType, kindLabels]
+    () => eventTypeOptions(catalogItems, selectedType, t),
+    [catalogItems, selectedType, t]
   );
   const typeSwitcherOptions = React.useMemo(
     () => typeOptions.map((option) => ({
@@ -108,182 +149,79 @@ function EditorBody({
     })),
     [typeOptions]
   );
-  const phoneContactIds = React.useMemo(() => {
-    const ids = [];
-    if (form.relatedTo && form.relatedTo.kind !== "company") ids.push(form.relatedTo.id);
-    for (const participant of form.participants) {
-      if (participant.isCustomer && participant.userId) ids.push(participant.userId);
-    }
-    return Array.from(new Set(ids));
-  }, [form.relatedTo, form.participants]);
   const titleLabel = form.kind === "email" ? t("customers.calendar.editor.titleLabel.email", "Subject") : form.kind === "note" ? t("customers.calendar.editor.titleLabel.note", "Note") : t("customers.calendar.editor.titleLabel.generic", "Title");
-  return (
-    // Single column on phones (full-screen sheet). On lg+ the dialog widens and
-    // the fields group into two thematic columns: WHEN (schedule + repeat) on
-    // the left, CONTEXT (related record, category, location) on the right;
-    // people/resources and the task fields pair up below; title, description
-    // and the type switcher span both columns.
-    /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-start gap-4 lg:grid-cols-2 lg:gap-x-6", children: [
-      conflict ? /* @__PURE__ */ jsxs(Alert, { status: "warning", className: "rounded-lg lg:col-span-2", children: [
-        /* @__PURE__ */ jsx(AlertTitle, { children: t("customers.calendar.editor.conflictTitle", "Calendar conflict") }),
-        /* @__PURE__ */ jsx(AlertDescription, { children: conflict })
-      ] }) : null,
-      /* @__PURE__ */ jsx("div", { className: "w-full lg:col-span-2", children: /* @__PURE__ */ jsx(
-        SegmentGroup,
-        {
-          ariaLabel: t("customers.calendar.editor.typeSwitcher", "Event type"),
-          value: selectedType,
-          onChange: (type) => update({ kind: editorKindOfInteractionType(type), category: type }),
-          options: typeSwitcherOptions
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Field, { label: titleLabel, error: errors.title, className: "lg:col-span-2", children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "text",
-          value: form.title,
-          onChange: (event) => update({ title: event.target.value }),
-          placeholder: t("customers.calendar.editor.titlePlaceholder", "Add a title\u2026"),
-          "aria-label": titleLabel,
-          autoFocus: true,
-          size: "lg"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
-        /* @__PURE__ */ jsx(
-          ScheduleSection,
-          {
-            dateLabel: config.dateLabel,
-            hasAllDay: config.hasAllDay,
-            hasEnd: config.hasEnd,
-            allDay: form.allDay,
-            date: form.date,
-            startTime: form.startTime,
-            endDate: form.endDate,
-            endTime: form.endTime,
-            endsError: errors.ends,
-            onAllDayChange: (allDay) => update({ allDay }),
-            onDateChange: (date) => {
-              const untouchedDefault = JSON.stringify(form.repeatDays) === JSON.stringify(defaultRepeatDaysForDateInput(form.date));
-              update(
-                untouchedDefault ? { date, repeatDays: defaultRepeatDaysForDateInput(date) } : { date }
-              );
-            },
-            onStartTimeChange: (startTime) => update({ startTime }),
-            onEndDateChange: (endDate) => update({ endDate }),
-            onEndTimeChange: (endTime) => update({ endTime })
-          }
-        ),
-        config.hasRepeat ? /* @__PURE__ */ jsx(
-          RepeatField,
-          {
-            freq: form.repeatFreq,
-            days: form.repeatDays,
-            endType: form.repeatEndType,
-            count: form.repeatCount,
-            untilDate: form.repeatUntilDate,
-            onFreqChange: (repeatFreq) => update(
-              repeatFreq === "weekly" ? { repeatFreq, repeatDays: defaultRepeatDaysForDateInput(form.date) } : { repeatFreq }
-            ),
-            onToggleDay: (index) => update({ repeatDays: form.repeatDays.map((active, dayIndex) => dayIndex === index ? !active : active) }),
-            onEndTypeChange: (repeatEndType) => update({ repeatEndType }),
-            onCountChange: (repeatCount) => update({ repeatCount }),
-            onUntilDateChange: (repeatUntilDate) => update({ repeatUntilDate })
-          }
-        ) : null,
-        config.people && config.people !== "assignee" ? /* @__PURE__ */ jsx(Field, { label: t(PEOPLE_FIELD_TEXT[config.people].labelKey, PEOPLE_FIELD_TEXT[config.people].label), children: /* @__PURE__ */ jsx(
-          PeopleField,
-          {
-            mode: "multi",
-            includeCustomers: true,
-            includeStaff: staffEnabled,
-            placeholder: t(PEOPLE_FIELD_TEXT[config.people].placeholderKey, PEOPLE_FIELD_TEXT[config.people].placeholder),
-            ariaLabel: t(PEOPLE_FIELD_TEXT[config.people].labelKey, PEOPLE_FIELD_TEXT[config.people].label),
-            value: form.participants,
-            onChange: (participants) => update({ participants })
-          }
-        ) }) : null,
-        config.people === "assignee" && staffEnabled ? /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.assignee", "Assignee"), error: errors.assignee, children: /* @__PURE__ */ jsx(
-          PeopleField,
-          {
-            mode: "single",
-            includeCustomers: false,
-            includeStaff: true,
-            placeholder: t("customers.calendar.editor.assigneePlaceholder", "Assign to a team member\u2026"),
-            ariaLabel: t("customers.calendar.editor.assignee", "Assignee"),
-            value: form.assigneeUserId ? [{ userId: form.assigneeUserId, name: form.assigneeName ?? form.assigneeUserId, isCustomer: false }] : [],
-            onChange: (entries) => {
-              const next = entries[entries.length - 1] ?? null;
-              update({ assigneeUserId: next?.userId ?? null, assigneeName: next?.name ?? null });
-            }
-          }
-        ) }) : null
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
-        /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.relatedTo", "Related to"), error: errors.relatedTo, children: /* @__PURE__ */ jsx(
-          RelatedToField,
-          {
-            label: t("customers.calendar.editor.relatedTo", "Related to"),
-            value: form.relatedTo,
-            deal: form.dealId && form.dealLabel ? { id: form.dealId, label: form.dealLabel } : null,
-            onChange: (relatedTo) => update({ relatedTo }),
-            onDealChange: (deal) => update({ dealId: deal?.id ?? null, dealLabel: deal?.label ?? null }),
-            error: errors.relatedTo
-          }
-        ) }),
-        config.location ? /* @__PURE__ */ jsx(
-          LocationField,
-          {
-            variant: config.location,
-            value: form.location,
-            onChange: (location) => update({ location }),
-            phoneContactIds
-          }
-        ) : null,
-        resourcesEnabled ? /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.resources", "Resources"), children: /* @__PURE__ */ jsx(
-          ResourcesField,
-          {
-            placeholder: t("customers.calendar.editor.resourcesPlaceholder", "Add a resource\u2026"),
-            ariaLabel: t("customers.calendar.editor.resources", "Resources"),
-            value: form.resources,
-            onChange: (resources) => update({ resources })
-          }
-        ) }) : null,
-        config.hasPriority ? /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.priority.label", "Priority"), children: /* @__PURE__ */ jsx(
-          PriorityField,
-          {
-            value: form.priority,
-            ariaLabel: t("customers.calendar.editor.priority.label", "Priority"),
-            labels: {
-              low: t("customers.calendar.editor.priority.low", "Low"),
-              medium: t("customers.calendar.editor.priority.medium", "Medium"),
-              high: t("customers.calendar.editor.priority.high", "High")
-            },
-            onChange: (priority) => update({ priority })
-          }
-        ) }) : null
-      ] }),
-      /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.description", "Description"), className: "lg:col-span-2", children: /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          value: form.description,
-          onChange: (event) => update({ description: event.target.value }),
-          placeholder: t("customers.calendar.editor.descriptionPlaceholder", "Add details\u2026"),
-          "aria-label": t("customers.calendar.editor.description", "Description"),
-          className: "h-20 resize-none"
-        }
-      ) })
-    ] })
-  );
-}
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 items-start gap-4 lg:grid-cols-2 lg:gap-x-6", children: [
+    conflict ? /* @__PURE__ */ jsxs(Alert, { status: "warning", className: "rounded-lg lg:col-span-2", children: [
+      /* @__PURE__ */ jsx(AlertTitle, { children: t("customers.calendar.editor.conflictTitle", "Calendar conflict") }),
+      /* @__PURE__ */ jsx(AlertDescription, { children: conflict })
+    ] }) : null,
+    !catalogReady ? /* @__PURE__ */ jsx(CatalogStatusAlert, { error: catalogError, onRetry: onRetryCatalog }) : null,
+    catalogReady && (definition.historical || catalogItems.some((item2) => item2.key === selectedType && !item2.selectable)) ? /* @__PURE__ */ jsx(Alert, { status: "warning", className: "rounded-lg lg:col-span-2", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("customers.calendar.editor.historicalType") }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "w-full lg:col-span-2", children: /* @__PURE__ */ jsx(
+      TypeSwitcher,
+      {
+        ariaLabel: t("customers.calendar.editor.typeSwitcher", "Event type"),
+        value: selectedType,
+        onChange: selectType,
+        disabled: !catalogReady,
+        options: typeSwitcherOptions
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Field, { label: titleLabel, error: errors.title, className: "lg:col-span-2", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        value: form.title,
+        onChange: (event) => update({ title: event.target.value }),
+        placeholder: t("customers.calendar.editor.titlePlaceholder", "Add a title\u2026"),
+        "aria-label": titleLabel,
+        autoFocus: true,
+        size: "lg"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TimezoneField, { value: form.timezone, error: errors.timezone, disabled: saving, onChange: updateTimezone }),
+    /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.relatedTo", "Related to"), error: errors.relatedTo, children: /* @__PURE__ */ jsx(
+      MemoRelatedToField,
+      {
+        label: t("customers.calendar.editor.relatedTo", "Related to"),
+        value: form.relatedTo,
+        deal,
+        onChange: updateRelatedTo,
+        onDealChange: updateDeal,
+        error: errors.relatedTo
+      }
+    ) }) }),
+    catalogReady ? /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsx(
+      EventTypePanel,
+      {
+        definition,
+        panelKey: definition.panelKey,
+        mode: isEdit ? "edit" : "create",
+        values,
+        errors,
+        disabled: saving,
+        capabilities,
+        setValue
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx(Field, { label: t("customers.calendar.editor.description", "Description"), className: "lg:col-span-2", children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: form.description,
+        onChange: (event) => update({ description: event.target.value }),
+        placeholder: t("customers.calendar.editor.descriptionPlaceholder", "Add details\u2026"),
+        "aria-label": t("customers.calendar.editor.description", "Description"),
+        className: "h-20 resize-none"
+      }
+    ) })
+  ] });
+});
 function CalendarEventEditor({
   open,
   mode,
   item,
   defaultDate,
   defaultRange,
-  typeLabels,
-  typeIcons,
   conflictScope,
   currentUserId,
   resourcesEnabled,
@@ -293,14 +231,58 @@ function CalendarEventEditor({
 }) {
   const t = useT();
   const [saving, setSaving] = React.useState(false);
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const dirtyRef = React.useRef(false);
+  const closeConfirmPendingRef = React.useRef(false);
+  const [closePromptOpen, setClosePromptOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (!closePromptOpen) return;
+    const swallowSubmitShortcut = (event) => {
+      if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+    window.addEventListener("keydown", swallowSubmitShortcut, true);
+    return () => window.removeEventListener("keydown", swallowSubmitShortcut, true);
+  }, [closePromptOpen]);
+  const requestClose = React.useCallback(async () => {
+    if (saving || closeConfirmPendingRef.current) return;
+    if (dirtyRef.current) {
+      closeConfirmPendingRef.current = true;
+      setClosePromptOpen(true);
+      try {
+        const confirmed = await confirm({
+          title: t("ui.forms.confirmUnsavedChanges", "You have unsaved changes. Are you sure you want to leave?"),
+          confirmText: t("customers.deals.detail.unsavedConfirm", "Discard changes"),
+          cancelText: t("customers.deals.detail.unsavedCancel", "Keep editing"),
+          variant: "destructive"
+        });
+        if (!confirmed) return;
+      } finally {
+        closeConfirmPendingRef.current = false;
+        setClosePromptOpen(false);
+      }
+    }
+    onOpenChange(false);
+  }, [confirm, onOpenChange, saving, t]);
+  const handleDirtyChange = React.useCallback((dirty) => {
+    dirtyRef.current = dirty;
+  }, []);
+  React.useEffect(() => {
+    if (!open) dirtyRef.current = false;
+  }, [open]);
   const isEdit = mode === "edit" && Boolean(item?.id);
+  const catalog = useEventTypeCatalog(open);
+  const { items: catalogItems, status: catalogStatus, retry: retryCatalog } = catalog;
+  const [selectedTypeKey, setSelectedTypeKey] = React.useState(() => isEdit && item ? item.interactionType : "meeting");
+  const autoSelectedCreateType = !isEdit && catalog.status === "ready" && !isSelectableEventType(catalog.items, "meeting") ? catalog.items.find((entry) => entry.selectable && !entry.historical) ?? null : null;
   const [openSeq, setOpenSeq] = React.useState(0);
   const wasOpenRef = React.useRef(false);
   React.useEffect(() => {
     if (open && !wasOpenRef.current) setOpenSeq((seq) => seq + 1);
     wasOpenRef.current = open;
   }, [open]);
-  const formKey = `${mode}:${item?.id ?? "new"}:${openSeq}`;
+  const formKey = `${mode}:${item?.id ?? "new"}:${openSeq}:${autoSelectedCreateType?.key ?? "default"}`;
   const initialValues = React.useMemo(() => {
     if (isEdit && item) {
       return {
@@ -310,20 +292,55 @@ function CalendarEventEditor({
         updatedAt: item.updatedAt ?? void 0
       };
     }
-    return { ...createDefaultFormState(defaultDate ?? null, void 0, defaultRange ?? null) };
-  }, [isEdit, item, defaultDate, defaultRange, openSeq]);
+    const defaults = createDefaultFormState(defaultDate ?? null, void 0, defaultRange ?? null);
+    if (!autoSelectedCreateType) return { ...defaults };
+    return {
+      ...defaults,
+      kind: autoSelectedCreateType.behavior.baseKind,
+      category: autoSelectedCreateType.key
+    };
+  }, [isEdit, item, defaultDate, defaultRange, openSeq, autoSelectedCreateType]);
+  const initialTypeKey = String(initialValues.category ?? initialValues.kind ?? "meeting");
+  React.useEffect(() => {
+    setSelectedTypeKey(initialTypeKey);
+  }, [initialTypeKey, formKey]);
+  const selectedDefinition = selectedEventType(catalog.items, selectedTypeKey);
+  const customFields = useCalendarCustomFields(open, E.customers.customer_interaction, selectedDefinition.behavior.customFieldsetIds);
+  const injectionWidgets = useInjectionWidgets(INTERACTION_INJECTION_SPOT);
+  const canCreateType = isSelectableEventType(catalog.items, selectedTypeKey);
+  const formReady = isEdit || catalog.status === "ready";
   const handleSubmit = React.useCallback(
     async (values) => {
       const form = formStateOfValues(values);
-      const config = KIND_CONFIG[form.kind];
+      if (catalogStatus !== "ready" || customFields.status !== "ready" || injectionWidgets.loading || injectionWidgets.error) {
+        throw createCrudFormError(t("customers.calendar.editor.catalogLoadFailed"));
+      }
+      const definition = selectedEventType(catalogItems, form.category ?? form.kind);
+      const selectedKey = form.category ?? form.kind;
+      if ((mode === "create" || selectedKey !== initialTypeKey) && !isSelectableEventType(catalogItems, selectedKey)) {
+        throw createCrudFormError(t("customers.calendar.editor.typeUnavailable"));
+      }
+      const config = eventTypeConfig(definition);
       const fieldErrors = {};
+      const timezone = form.timezone ?? defaultCalendarTimezone();
+      const startTime = form.allDay && config.hasAllDay ? "00:00" : form.startTime;
+      if (!isCalendarTimezone(timezone)) fieldErrors.timezone = t("customers.calendar.editor.validation.timezoneInvalid", "Choose a valid time zone");
+      else if (!(form.allDay && config.hasAllDay ? calendarDayStartInstant(form.date, timezone) : calendarWallTimeToInstant(form.date, startTime, timezone))) {
+        fieldErrors[form.allDay && config.hasAllDay ? "date" : "startTime"] = t("customers.calendar.editor.validation.timezoneGap", "This local time does not exist in the selected time zone");
+      }
+      if (config.hasEnd && !form.allDay && isCalendarTimezone(timezone) && !calendarWallTimeToInstant(form.endDate, form.endTime, timezone)) {
+        fieldErrors.ends = t("customers.calendar.editor.validation.timezoneGap", "This local time does not exist in the selected time zone");
+      }
+      if (config.hasRepeat && form.repeatFreq !== "none" && isCalendarTimezone(timezone) && form.repeatEndType === "date" && form.repeatUntilDate && !calendarDayEndInstant(form.repeatUntilDate, timezone)) {
+        fieldErrors.repeatUntilDate = t("customers.calendar.editor.validation.timezoneGap", "This local time does not exist in the selected time zone");
+      }
       if (!form.title.trim()) {
         fieldErrors.title = t("customers.calendar.editor.validation.titleRequired", "Title is required");
       }
       if (!form.relatedTo) {
         fieldErrors.relatedTo = t("customers.calendar.editor.validation.relatedToRequired", "Select a person or company to link this event");
       }
-      if (config.hasEnd && !form.allDay && computeDurationMinutes(form) === null) {
+      if (!fieldErrors.ends && !fieldErrors.startTime && !fieldErrors.date && config.hasEnd && !form.allDay && computeDurationMinutes(form) === null) {
         fieldErrors.ends = t("customers.calendar.editor.validation.endsBeforeStarts", "End must be after start");
       }
       if (config.people === "assignee" && staffEnabled !== false && !form.assigneeUserId) {
@@ -332,23 +349,81 @@ function CalendarEventEditor({
       if (Object.keys(fieldErrors).length > 0) {
         throw createCrudFormError(Object.values(fieldErrors)[0], fieldErrors);
       }
+      const customValidation = validateCalendarCustomValues(values, customFields.definitions);
+      if (!customValidation.ok) {
+        const translatedErrors = Object.fromEntries(Object.entries(customValidation.fieldErrors).map(([key, message]) => [key, t(message, message)]));
+        throw createCrudFormError(Object.values(translatedErrors)[0], translatedErrors);
+      }
       setSaving(true);
       try {
-        const payload = buildInteractionPayload(form, {
+        const payload = buildInteractionPayload({ ...form, timezone }, {
+          config,
           mode,
           id: item?.id,
           resourcesEnabled: resourcesEnabled === true,
           staffEnabled: staffEnabled !== false
         });
-        const custom = collectCustomFieldValues(values, {
+        payload.enforceSelectableType = true;
+        const applicable = definition.behavior.fields;
+        const time = form.allDay && applicable.allDay ? "00:00" : form.startTime;
+        payload.time = time;
+        payload.scheduledAt = (form.allDay && applicable.allDay ? calendarDayStartInstant(form.date, timezone) : calendarWallTimeToInstant(form.date, time, timezone)).toISOString();
+        payload.timezone = timezone;
+        payload.allDay = applicable.allDay ? form.allDay : null;
+        payload.durationMinutes = applicable.endTime && !(form.allDay && applicable.allDay) ? computeDurationMinutes(form) : null;
+        payload.location = applicable.location === "none" ? null : form.location.trim() || null;
+        const recurrenceRule = applicable.recurrence ? buildRecurrenceRule(form) : null;
+        payload.recurrenceRule = recurrenceRule;
+        payload.recurrenceEnd = recurrenceRule && form.repeatEndType === "date" && form.repeatUntilDate ? calendarDayEndInstant(form.repeatUntilDate, timezone).toISOString() : null;
+        payload.participants = applicable.people !== "none" && applicable.people !== "assignee" && form.participants.length ? form.participants.map((participant) => ({
+          userId: participant.userId,
+          name: participant.name,
+          email: participant.email,
+          status: participant.isCustomer ? "customer" : "pending"
+        })) : null;
+        if (applicable.people === "assignee" && staffEnabled !== false) payload.ownerUserId = form.assigneeUserId ?? null;
+        else delete payload.ownerUserId;
+        if (applicable.priority) payload.priority = form.priority === "low" ? 10 : form.priority === "high" ? 90 : 50;
+        else delete payload.priority;
+        if (!applicable.resources) delete payload.linkedEntities;
+        const custom = collectCustomFieldValues(projectCalendarCustomValues(values, customFields.definitions), {
           transform: (value) => normalizeCustomFieldSubmitValue(value)
         });
         for (const [key, value] of Object.entries(custom)) payload[`cf_${key}`] = value;
-        await apiCallOrThrow("/api/customers/interactions", {
+        const submitInteraction = (confirmDiscardInapplicableValues) => apiCallOrThrow("/api/customers/interactions", {
           method: isEdit ? "PUT" : "POST",
           headers: { "content-type": "application/json" },
-          body: JSON.stringify(payload)
+          body: JSON.stringify(confirmDiscardInapplicableValues ? { ...payload, confirmDiscardInapplicableValues: true } : payload)
         });
+        try {
+          await submitInteraction(false);
+        } catch (error) {
+          const fields = typeChangeDiscardFields(error);
+          if (!fields) throw error;
+          const approved = await confirm({
+            title: t("customers.calendar.editor.discardTitle"),
+            text: `${t("customers.calendar.editor.discardDescription")} ${t("customers.calendar.editor.discardFields")} ${fields.map((field) => {
+              const definition2 = customFields.allDefinitions.find((entry) => `cf_${entry.key}` === field);
+              if (definition2?.label) return definition2.label;
+              const labelKeys = {
+                location: "customers.calendar.editor.location",
+                participants: "customers.calendar.editor.attendees",
+                linkedEntities: "customers.calendar.editor.resources",
+                allDay: "customers.calendar.editor.allDay",
+                durationMinutes: "customers.calendar.editor.dates.ends",
+                priority: "customers.calendar.editor.priority.label",
+                recurrenceRule: "customers.calendar.editor.repeat.label",
+                recurrenceEnd: "customers.calendar.editor.repeat.ends"
+              };
+              return t(labelKeys[field] ?? "customers.calendar.editor.discardUnknownField");
+            }).join(", ")}`,
+            confirmText: t("customers.calendar.editor.discardConfirm"),
+            cancelText: t("customers.calendar.editor.cancel"),
+            variant: "destructive"
+          });
+          if (!approved) return;
+          await submitInteraction(true);
+        }
         flash(t("customers.calendar.editor.saved", "Event saved"), "success");
         onOpenChange(false);
         requestAnimationFrame(() => {
@@ -365,7 +440,7 @@ function CalendarEventEditor({
         setSaving(false);
       }
     },
-    [isEdit, item?.id, mode, onOpenChange, onSaved, resourcesEnabled, staffEnabled, t]
+    [catalogItems, catalogStatus, customFields.status, customFields.definitions, customFields.allDefinitions, injectionWidgets.loading, injectionWidgets.error, confirm, initialTypeKey, isEdit, item?.id, mode, onOpenChange, onSaved, resourcesEnabled, staffEnabled, t]
   );
   const groups = React.useMemo(
     () => [
@@ -375,108 +450,127 @@ function CalendarEventEditor({
         component: (ctx) => /* @__PURE__ */ jsx(
           EditorBody,
           {
-            ctx,
+            values: ctx.values,
+            errors: ctx.errors,
+            setValue: ctx.setValue,
             open,
             isEdit,
             item,
-            typeLabels,
-            typeIcons: typeIcons ?? {},
             conflictScope: conflictScope ?? "all",
             currentUserId: currentUserId ?? null,
             resourcesEnabled: resourcesEnabled === true,
-            staffEnabled: staffEnabled !== false
+            staffEnabled: staffEnabled !== false,
+            saving,
+            catalogItems,
+            catalogReady: catalogStatus === "ready",
+            catalogError: catalogStatus === "error",
+            onRetryCatalog: retryCatalog,
+            onSelectedTypeChange: setSelectedTypeKey
           }
         )
       },
-      { id: "customFields", kind: "customFields" }
+      ...customFields.fields.length ? [{ id: "customFields", title: t("entities.customFields.title"), fields: customFields.fields.map((field) => field.id) }] : []
     ],
-    [open, isEdit, item, typeLabels, typeIcons, conflictScope, currentUserId, resourcesEnabled, staffEnabled]
+    [open, isEdit, item, conflictScope, currentUserId, resourcesEnabled, staffEnabled, saving, catalogItems, catalogStatus, retryCatalog, customFields.fields, t]
   );
   const handleKeyDown = useDialogKeyHandler({
+    onCancel: () => {
+      void requestClose();
+    },
     onConfirm: () => {
       const formElement = document.getElementById(FORM_ID);
       if (formElement instanceof HTMLFormElement) formElement.requestSubmit();
     },
-    disabled: saving
+    disabled: saving || customFields.status !== "ready" || injectionWidgets.loading || !!injectionWidgets.error || catalog.status !== "ready" || mode === "create" && !canCreateType
   });
   const dialogTitle = isEdit ? t("customers.calendar.editor.title.edit", "Edit event") : t("customers.calendar.editor.title.create", "New event");
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      onKeyDown: handleKeyDown,
-      onInteractOutside: (event) => {
-        const target = event.detail.originalEvent.target;
-        if (target?.closest("[data-dialog-content]") || target?.closest("[data-radix-popper-content-wrapper]")) {
-          event.preventDefault();
-        }
-      },
-      "aria-describedby": void 0,
-      dismissible: false,
-      className: "flex h-dvh max-h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-xl sm:h-auto sm:max-h-[calc(100dvh-4rem)] sm:w-full sm:max-w-lg sm:rounded-2xl sm:border-0 lg:max-w-3xl",
-      children: [
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialogTitle }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 border-b border-border bg-background py-4 pl-5 pr-4", children: [
-          /* @__PURE__ */ jsx(Calendar, { "aria-hidden": true, className: "size-6 shrink-0 text-foreground", strokeWidth: 1.75 }),
-          /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-sm font-medium leading-5 text-foreground", children: dialogTitle }),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              variant: "ghost",
-              size: "sm",
-              onClick: () => onOpenChange(false),
-              "aria-label": t("customers.calendar.editor.close", "Close"),
-              className: "shrink-0 text-muted-foreground",
-              children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex-1 overflow-y-auto",
-            onScroll: () => {
-              document.dispatchEvent(new CustomEvent(EDITOR_SCROLL_EVENT));
-            },
-            children: /* @__PURE__ */ jsx("div", { className: "px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsx(
-              CrudForm,
-              {
-                formId: FORM_ID,
-                embedded: true,
-                hideFooterActions: true,
-                customFieldsManageMode: "page",
-                fields: [],
-                groups,
-                initialValues,
-                entityIds: INTERACTION_ENTITY_IDS,
-                onSubmit: handleSubmit
-              },
-              formKey
-            ) })
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: (nextOpen) => {
+    if (nextOpen) onOpenChange(true);
+    else void requestClose();
+  }, children: [
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        onKeyDown: handleKeyDown,
+        onInteractOutside: (event) => {
+          const target = event.detail.originalEvent.target;
+          if (target?.closest("[data-dialog-content]") || target?.closest("[data-radix-popper-content-wrapper]") || target?.closest("dialog")) {
+            event.preventDefault();
           }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-3 border-t border-border bg-background px-5 py-4", children: [
+        },
+        "aria-describedby": void 0,
+        dismissible: false,
+        className: "flex h-dvh max-h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-xl sm:h-auto sm:max-h-[calc(100dvh-4rem)] sm:w-full sm:max-w-lg sm:rounded-2xl sm:border-0 lg:max-w-3xl",
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialogTitle }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 border-b border-border bg-background py-4 pl-5 pr-4", children: [
+            /* @__PURE__ */ jsx(Calendar, { "aria-hidden": true, className: "size-6 shrink-0 text-foreground", strokeWidth: 1.75 }),
+            /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-sm font-medium leading-5 text-foreground", children: dialogTitle }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => {
+                  void requestClose();
+                },
+                "aria-label": t("customers.calendar.editor.close", "Close"),
+                className: "shrink-0 text-muted-foreground",
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-5" })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
-            Button,
+            "div",
             {
-              type: "button",
-              variant: "outline",
-              onClick: () => onOpenChange(false),
-              children: t("customers.calendar.editor.cancel", "Cancel")
+              className: "flex-1 overflow-y-auto",
+              onScroll: () => {
+                document.dispatchEvent(new CustomEvent(EDITOR_SCROLL_EVENT));
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "px-4 py-4 sm:px-6 sm:py-5", children: formReady ? /* @__PURE__ */ jsx(
+                CrudForm,
+                {
+                  formId: FORM_ID,
+                  embedded: true,
+                  trackDirtyWhenEmbedded: true,
+                  onDirtyChange: handleDirtyChange,
+                  hideFooterActions: true,
+                  customFieldsManageMode: "page",
+                  fields: customFields.fields,
+                  groups,
+                  initialValues,
+                  injectionSpotId: INTERACTION_INJECTION_SPOT,
+                  onSubmit: handleSubmit
+                },
+                formKey
+              ) : /* @__PURE__ */ jsx(CatalogStatusAlert, { error: catalog.status === "error", onRetry: catalog.retry }) })
             }
           ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "submit",
-              form: FORM_ID,
-              disabled: saving,
-              children: saving ? t("customers.calendar.editor.saving", "Saving\u2026") : t("customers.calendar.editor.save", "Save event")
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-3 border-t border-border bg-background px-5 py-4", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: () => onOpenChange(false),
+                children: t("customers.calendar.editor.cancel", "Cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                form: FORM_ID,
+                disabled: saving || customFields.status !== "ready" || injectionWidgets.loading || !!injectionWidgets.error || catalog.status !== "ready" || mode === "create" && !canCreateType,
+                children: saving ? t("customers.calendar.editor.saving", "Saving\u2026") : t("customers.calendar.editor.save", "Save event")
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    ConfirmDialogElement
+  ] });
 }
 export {
   CalendarEventEditor