@open-mercato/core 0.9.0 → 0.9.1-develop.7459.1.99e3accd30

package/src/modules/customers/components/calendar/CalendarSettingsModal.tsx

@@ -1,65 +1,43 @@
 "use client"
 
 import * as React from 'react'
-import { Info, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 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 { Switch } from '@open-mercato/ui/primitives/switch'
-import { TagInput } from '@open-mercato/ui/primitives/tag-input'
-import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
 import { useDialogKeyHandler } from '@open-mercato/ui/hooks/useDialogKeyHandler'
-import {
-  CalendarPreferences,
-  ConflictScope,
-  MAX_ACTIVITY_TYPES,
-  MAX_EVENT_CATEGORIES,
-} from '../../lib/calendar/preferences'
+import { CalendarPreferences, ConflictScope } from '../../lib/calendar/preferences'
+import { getCustomerDictionaryManageHref } from '../../lib/dictionaries'
 import { SegmentGroup } from './editor/SegmentGroup'
 
 export type CalendarSettingsModalProps = {
   open: boolean
   preferences: CalendarPreferences
-  seedActivityTypes: string[]
+  /** @deprecated Activity types are loaded from the scoped catalog. */
+  seedActivityTypes?: string[]
   onOpenChange(open: boolean): void
   onSave(next: CalendarPreferences): void
 }
 
 type ToggleKey = 'showCrmActivities' | 'aiSummaries' | 'conflictWarnings' | 'showWeekends'
 
-// An empty Activity Types list is an intentional floor meaning "surface all
-// dictionary types" rather than "surface none". When the stored list is empty
-// the modal seeds the dictionary types for display. NOTE: since the editor's
-// Category quick-pick was removed (owner feedback, #3552) these lists no longer
-// affect the event editor — the type switcher always shows the full dictionary.
-function buildDraft(preferences: CalendarPreferences, seedActivityTypes: string[]): CalendarPreferences {
-  return {
-    ...preferences,
-    eventCategories: [...preferences.eventCategories],
-    activityTypes:
-      preferences.activityTypes.length > 0
-        ? [...preferences.activityTypes]
-        : seedActivityTypes.slice(0, MAX_ACTIVITY_TYPES),
-  }
-}
-
 export function CalendarSettingsModal({
   open,
   preferences,
-  seedActivityTypes,
   onOpenChange,
   onSave,
 }: CalendarSettingsModalProps) {
   const t = useT()
-  const [draft, setDraft] = React.useState<CalendarPreferences>(() => buildDraft(preferences, seedActivityTypes))
+  const [draft, setDraft] = React.useState<CalendarPreferences>(preferences)
   const openRef = React.useRef(false)
 
   React.useEffect(() => {
-    if (open && !openRef.current) setDraft(buildDraft(preferences, seedActivityTypes))
+    if (open && !openRef.current) setDraft(preferences)
     openRef.current = open
-  }, [open, preferences, seedActivityTypes])
+  }, [open, preferences])
 
   const handleSave = React.useCallback(() => {
     onSave(draft)
@@ -78,11 +56,6 @@ export function CalendarSettingsModal({
   ]
 
   const title = t('customers.calendar.settings.title', 'Customization')
-  const removeTagLabel = React.useCallback(
-    (tag: string) => t('customers.calendar.settings.removeTag', 'Remove {tag}', { tag }),
-    [t],
-  )
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
@@ -113,32 +86,16 @@ export function CalendarSettingsModal({
         </div>
 
         <div className="flex flex-col gap-4 p-5">
-          <SettingsTagInput
-            label={t('customers.calendar.settings.eventCategories', 'Event Categories')}
-            maxLabel={t('customers.calendar.settings.max', '(max. {count})', { count: MAX_EVENT_CATEGORIES })}
-            hint={t(
-              'customers.calendar.settings.eventCategoriesHint',
-              'Your own grouping labels (e.g. Team Meeting, Sales Call). Offered when creating an event.',
-            )}
-            placeholder={t('customers.calendar.settings.addCategory', 'Add a category…')}
-            value={draft.eventCategories}
-            maxTags={MAX_EVENT_CATEGORIES}
-            removeTagLabel={removeTagLabel}
-            onChange={(eventCategories) => setDraft((current) => ({ ...current, eventCategories }))}
-          />
-          <SettingsTagInput
-            label={t('customers.calendar.settings.activityTypes', 'Activity Types')}
-            maxLabel={t('customers.calendar.settings.max', '(max. {count})', { count: MAX_ACTIVITY_TYPES })}
-            hint={t(
-              'customers.calendar.settings.activityTypesHint',
-              'The activity types your calendar surfaces when creating an event. Seeded from your workspace dictionary.',
-            )}
-            placeholder={t('customers.calendar.settings.addType', 'Add a type…')}
-            value={draft.activityTypes}
-            maxTags={MAX_ACTIVITY_TYPES}
-            removeTagLabel={removeTagLabel}
-            onChange={(activityTypes) => setDraft((current) => ({ ...current, activityTypes }))}
-          />
+          <div className="flex items-center justify-between gap-3">
+            <span className="text-sm text-foreground">
+              {t('customers.calendar.settings.activityTypes', 'Activity Types')}
+            </span>
+            <Button type="button" variant="outline" size="sm" asChild>
+              <a href={getCustomerDictionaryManageHref('activity-types')}>
+                {t('customers.calendar.settings.manageActivityTypes', 'Manage activity types')}
+              </a>
+            </Button>
+          </div>
           {toggleRows.map((row) => (
             <React.Fragment key={row.key}>
               <div className="flex items-center gap-2">
@@ -184,38 +141,3 @@ export function CalendarSettingsModal({
     </Dialog>
   )
 }
-
-type SettingsTagInputProps = {
-  label: string
-  maxLabel: string
-  hint: string
-  placeholder: string
-  value: string[]
-  maxTags: number
-  removeTagLabel: (tag: string) => string
-  onChange(value: string[]): void
-}
-
-function SettingsTagInput({ label, maxLabel, hint, placeholder, value, maxTags, removeTagLabel, onChange }: SettingsTagInputProps) {
-  return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-center gap-1">
-        <span className="text-sm font-medium leading-5 text-foreground">{label}</span>
-        <span className="text-sm leading-5 text-muted-foreground">{maxLabel}</span>
-        <SimpleTooltip content={hint}>
-          <span className="inline-flex text-muted-foreground" tabIndex={0} role="img" aria-label={hint}>
-            <Info aria-hidden className="size-4" />
-          </span>
-        </SimpleTooltip>
-      </div>
-      <TagInput
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        maxTags={maxTags}
-        aria-label={label}
-        removeTagLabel={removeTagLabel}
-      />
-    </div>
-  )
-}

package/src/modules/customers/components/calendar/TimeGrid.tsx

@@ -175,6 +175,11 @@ export function TimeGrid({
   const anchorMs = anchor.getTime()
   const [selectedId, setSelectedId] = React.useState<string | null>(null)
   const [drag, setDrag] = React.useState<DragState | null>(null)
+  const dragRef = React.useRef<DragState | null>(null)
+  const updateDrag = (next: DragState | null) => {
+    dragRef.current = next
+    setDrag(next)
+  }
 
   const dayStarts = React.useMemo(() => {
     const rangeStart = getVisibleRange(days === 7 ? 'week' : 'day', new Date(anchorMs), 0).from
@@ -257,32 +262,29 @@ export function TimeGrid({
       // Pointer capture is best-effort; ignore environments that reject it.
     }
     setSelectedId(null)
-    setDrag({ dayMs: dayStart.getTime(), startMin: minute, endMin: minute, moved: false })
+    updateDrag({ dayMs: dayStart.getTime(), startMin: minute, endMin: minute, moved: false })
   }
 
   const moveDrag = (event: React.PointerEvent<HTMLDivElement>) => {
-    // Read the layer rect synchronously: `event.currentTarget` is only valid during
-    // event dispatch, but the setDrag updater below runs later during re-render.
+    const previous = dragRef.current
+    if (!previous) return
     const rect = event.currentTarget.getBoundingClientRect()
     const minute = offsetYToMinutes(event.clientY - rect.top, HOUR_HEIGHT_PX)
-    setDrag((previous) => {
-      if (!previous) return previous
-      return {
-        ...previous,
-        endMin: minute,
-        moved: previous.moved || Math.abs(minute - previous.startMin) >= DRAG_SNAP_MINUTES,
-      }
+    if (minute === previous.endMin) return
+    updateDrag({
+      ...previous,
+      endMin: minute,
+      moved: previous.moved || Math.abs(minute - previous.startMin) >= DRAG_SNAP_MINUTES,
     })
   }
 
   const endDrag = (dayStart: Date) => {
-    setDrag((previous) => {
-      if (previous && previous.moved && onCreateRange) {
-        const range = buildDragRange(dayStart, previous.startMin, previous.endMin)
-        onCreateRange(range.start, range.end)
-      }
-      return null
-    })
+    const previous = dragRef.current
+    updateDrag(null)
+    if (previous && previous.moved && onCreateRange) {
+      const range = buildDragRange(dayStart, previous.startMin, previous.endMin)
+      onCreateRange(range.start, range.end)
+    }
   }
 
   return (
@@ -428,7 +430,7 @@ export function TimeGrid({
                     onPointerDown={(event) => beginDrag(event, dayStart)}
                     onPointerMove={moveDrag}
                     onPointerUp={() => endDrag(dayStart)}
-                    onPointerCancel={() => setDrag(null)}
+                    onPointerCancel={() => updateDrag(null)}
                     aria-hidden
                   />
                 ) : null}

package/src/modules/customers/components/calendar/editor/EventTypePanel.tsx

@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from 'react'
+import { z } from 'zod'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { registerComponent } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '@open-mercato/ui/backend/injection/useRegisteredComponent'
+import type { CalendarEventTypePanelProps, EffectiveCalendarEventType } from '../../../calendar-event-types'
+import { defaultRepeatDaysForDateInput, type EditorFormState } from '../../../lib/calendar/editorPayload'
+import { extensionPoints } from '../../../extension-points'
+import { Field } from './inputs'
+import { LocationField } from './LocationField'
+import { PeopleField } from './PeopleField'
+import { PriorityField } from './PriorityField'
+import { RepeatField } from './RepeatField'
+import { ResourcesField } from './ResourcesField'
+import { ScheduleSection } from './ScheduleSection'
+import { eventTypeConfig } from './useEventTypeCatalog'
+
+const PEOPLE_FIELD_TEXT = {
+  attendees: { labelKey: 'customers.calendar.editor.attendees', label: 'Attendees', placeholderKey: 'customers.calendar.editor.addPeoplePlaceholder', placeholder: 'Add staff or customer…' },
+  participants: { labelKey: 'customers.calendar.editor.participants', label: 'Participants', placeholderKey: 'customers.calendar.editor.addPeoplePlaceholder', placeholder: 'Add staff or customer…' },
+  to: { labelKey: 'customers.calendar.editor.to', label: 'To', placeholderKey: 'customers.calendar.editor.addRecipientPlaceholder', placeholder: 'Add recipient…' },
+} as const
+
+const MemoScheduleSection = React.memo(ScheduleSection)
+const MemoRepeatField = React.memo(RepeatField)
+const MemoPeopleField = React.memo(PeopleField)
+const MemoLocationField = React.memo(LocationField)
+const MemoResourcesField = React.memo(ResourcesField)
+const MemoPriorityField = React.memo(PriorityField)
+
+export function DefaultEventTypePanel({ definition, values, errors, disabled, capabilities, setValue }: CalendarEventTypePanelProps) {
+  const t = useT()
+  const form = values as unknown as EditorFormState
+  const config = eventTypeConfig(definition)
+  // The handlers read the latest draft through a ref so their identities depend
+  // only on `setValue`. Every field below is memoized, so a keystroke in an
+  // unrelated field (title, description) re-renders none of them.
+  const formRef = React.useRef(form)
+  formRef.current = form
+  const handlers = React.useMemo(() => {
+    const update = (patch: Partial<EditorFormState>) => {
+      for (const [key, value] of Object.entries(patch)) setValue(key, value)
+    }
+    return {
+      allDay: (allDay: boolean) => update({ allDay }),
+      date: (date: string) => {
+        const current = formRef.current
+        const untouchedDefault = JSON.stringify(current.repeatDays) === JSON.stringify(defaultRepeatDaysForDateInput(current.date))
+        update(untouchedDefault ? { date, repeatDays: defaultRepeatDaysForDateInput(date) } : { date })
+      },
+      startTime: (startTime: string) => update({ startTime }),
+      endDate: (endDate: string) => update({ endDate }),
+      endTime: (endTime: string) => update({ endTime }),
+      repeatFreq: (repeatFreq: EditorFormState['repeatFreq']) => update(repeatFreq === 'weekly'
+        ? { repeatFreq, repeatDays: defaultRepeatDaysForDateInput(formRef.current.date) }
+        : { repeatFreq }),
+      repeatDay: (index: number) => update({
+        repeatDays: formRef.current.repeatDays.map((active, dayIndex) => dayIndex === index ? !active : active),
+      }),
+      repeatEndType: (repeatEndType: EditorFormState['repeatEndType']) => update({ repeatEndType }),
+      repeatCount: (repeatCount: number) => update({ repeatCount }),
+      repeatUntilDate: (repeatUntilDate: string) => update({ repeatUntilDate }),
+      participants: (participants: EditorFormState['participants']) => update({ participants }),
+      assignee: (entries: EditorFormState['participants']) => {
+        const next = entries[entries.length - 1] ?? null
+        update({ assigneeUserId: next?.userId ?? null, assigneeName: next?.name ?? null })
+      },
+      location: (location: string) => update({ location }),
+      resources: (resources: EditorFormState['resources']) => update({ resources }),
+      priority: (priority: EditorFormState['priority']) => update({ priority }),
+    }
+  }, [setValue])
+  const phoneContactIds = React.useMemo(() => {
+    const ids: string[] = []
+    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 assigneeValue = React.useMemo(
+    () => form.assigneeUserId
+      ? [{ userId: form.assigneeUserId, name: form.assigneeName ?? form.assigneeUserId, isCustomer: false }]
+      : [],
+    [form.assigneeUserId, form.assigneeName],
+  )
+  const priorityLabels = React.useMemo(() => ({
+    low: t('customers.calendar.editor.priority.low', 'Low'),
+    medium: t('customers.calendar.editor.priority.medium', 'Medium'),
+    high: t('customers.calendar.editor.priority.high', 'High'),
+  }), [t])
+
+  return (
+    <fieldset disabled={disabled} className="grid min-w-0 grid-cols-1 items-start gap-4 border-0 p-0 lg:grid-cols-2 lg:gap-x-6">
+      <div className="flex w-full flex-col gap-4">
+        <MemoScheduleSection
+          dateLabel={config.dateLabel}
+          hasAllDay={config.hasAllDay}
+          hasEnd={config.hasEnd}
+          allDay={form.allDay}
+          date={form.date}
+          startTime={form.startTime}
+          endDate={form.endDate}
+          endTime={form.endTime}
+          startError={errors.startTime ?? errors.date}
+          endsError={errors.ends}
+          disabled={disabled}
+          onAllDayChange={handlers.allDay}
+          onDateChange={handlers.date}
+          onStartTimeChange={handlers.startTime}
+          onEndDateChange={handlers.endDate}
+          onEndTimeChange={handlers.endTime}
+        />
+        {config.hasRepeat ? (
+          <MemoRepeatField
+            freq={form.repeatFreq}
+            days={form.repeatDays}
+            endType={form.repeatEndType}
+            count={form.repeatCount}
+            untilDate={form.repeatUntilDate}
+            untilError={errors.repeatUntilDate}
+            disabled={disabled}
+            onFreqChange={handlers.repeatFreq}
+            onToggleDay={handlers.repeatDay}
+            onEndTypeChange={handlers.repeatEndType}
+            onCountChange={handlers.repeatCount}
+            onUntilDateChange={handlers.repeatUntilDate}
+          />
+        ) : null}
+        {config.people && config.people !== 'assignee' ? (
+          <Field label={t(PEOPLE_FIELD_TEXT[config.people].labelKey, PEOPLE_FIELD_TEXT[config.people].label)}>
+            <MemoPeopleField
+              mode="multi"
+              includeCustomers
+              includeStaff={capabilities.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={handlers.participants}
+              disabled={disabled}
+            />
+          </Field>
+        ) : null}
+        {config.people === 'assignee' && capabilities.staffEnabled ? (
+          <Field label={t('customers.calendar.editor.assignee', 'Assignee')} error={errors.assignee}>
+            <MemoPeopleField
+              mode="single"
+              includeCustomers={false}
+              includeStaff
+              placeholder={t('customers.calendar.editor.assigneePlaceholder', 'Assign to a team member…')}
+              ariaLabel={t('customers.calendar.editor.assignee', 'Assignee')}
+              value={assigneeValue}
+              onChange={handlers.assignee}
+              disabled={disabled}
+            />
+          </Field>
+        ) : null}
+      </div>
+      <div className="flex w-full flex-col gap-4">
+        {config.location ? (
+          <MemoLocationField
+            variant={config.location}
+            value={form.location}
+            onChange={handlers.location}
+            phoneContactIds={phoneContactIds}
+            disabled={disabled}
+          />
+        ) : null}
+        {capabilities.resourcesEnabled && definition.behavior.fields.resources ? (
+          <Field label={t('customers.calendar.editor.resources', 'Resources')}>
+            <MemoResourcesField
+              placeholder={t('customers.calendar.editor.resourcesPlaceholder', 'Add a resource…')}
+              ariaLabel={t('customers.calendar.editor.resources', 'Resources')}
+              value={form.resources}
+              onChange={handlers.resources}
+              disabled={disabled}
+            />
+          </Field>
+        ) : null}
+        {config.hasPriority ? (
+          <Field label={t('customers.calendar.editor.priority.label', 'Priority')}>
+            <MemoPriorityField
+              value={form.priority}
+              ariaLabel={t('customers.calendar.editor.priority.label', 'Priority')}
+              labels={priorityLabels}
+              onChange={handlers.priority}
+              disabled={disabled}
+            />
+          </Field>
+        ) : null}
+      </div>
+    </fieldset>
+  )
+}
+
+const callbackSchema = z.custom<CalendarEventTypePanelProps['setValue']>(
+  (value) => typeof value === 'function',
+  { message: '[internal] expected a field setter' },
+)
+
+const eventTypePanelPropsSchema: z.ZodType<CalendarEventTypePanelProps> = z.object({
+  definition: z.custom<EffectiveCalendarEventType>((value) => value !== null && typeof value === 'object'),
+  panelKey: z.string().optional(),
+  mode: z.enum(['create', 'edit']),
+  values: z.record(z.string(), z.unknown()),
+  errors: z.record(z.string(), z.string().optional()),
+  disabled: z.boolean(),
+  capabilities: z.object({ resourcesEnabled: z.boolean(), staffEnabled: z.boolean() }),
+  setValue: callbackSchema,
+})
+
+registerComponent<CalendarEventTypePanelProps>({
+  id: extensionPoints.hosts.calendarEventTypePanel.componentId,
+  component: DefaultEventTypePanel,
+  metadata: {
+    module: 'customers',
+    description: 'Calendar event editor type-specific panel.',
+    propsSchema: eventTypePanelPropsSchema,
+  },
+})
+
+export function EventTypePanel(props: CalendarEventTypePanelProps) {
+  const Resolved = useRegisteredComponent<CalendarEventTypePanelProps>(
+    extensionPoints.hosts.calendarEventTypePanel.componentId,
+    DefaultEventTypePanel,
+  )
+  return <Resolved {...props} />
+}

package/src/modules/customers/components/calendar/editor/LocationField.tsx

@@ -14,9 +14,11 @@ import { fetchPeoplePhones, type ContactPhone } from './lookups'
 function PhoneSuggestions({
   contactIds,
   onPick,
+  disabled,
 }: {
   contactIds: string[]
   onPick(phone: string): void
+  disabled?: boolean
 }) {
   const t = useT()
   const [contacts, setContacts] = React.useState<ContactPhone[]>([])
@@ -47,6 +49,7 @@ function PhoneSuggestions({
           key={contact.id}
           type="button"
           onClick={() => onPick(contact.phone)}
+          disabled={disabled}
           title={t('customers.calendar.editor.phoneSuggestion.use', 'Use {name}’s number', { name: contact.name })}
           className="inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
         >
@@ -65,12 +68,14 @@ export function LocationField({
   value,
   onChange,
   phoneContactIds,
+  disabled,
 }: {
   variant: 'location' | 'phoneLink'
   value: string
   onChange(next: string): void
   /** Person ids whose phone can be suggested (Call variant only). */
   phoneContactIds?: string[]
+  disabled?: boolean
 }) {
   const t = useT()
   const label = variant === 'phoneLink'
@@ -89,10 +94,11 @@ export function LocationField({
         onChange={(event) => onChange(event.target.value)}
         placeholder={placeholder}
         aria-label={label}
+        disabled={disabled}
         leftIcon={variant === 'phoneLink' ? <Phone /> : <MapPin />}
       />
       {showSuggestions ? (
-        <PhoneSuggestions contactIds={phoneContactIds ?? []} onPick={(phone) => onChange(phone)} />
+        <PhoneSuggestions contactIds={phoneContactIds ?? []} onPick={(phone) => onChange(phone)} disabled={disabled} />
       ) : null}
     </Field>
   )

package/src/modules/customers/components/calendar/editor/PeopleField.tsx

@@ -30,6 +30,7 @@ export function PeopleField({
   onChange,
   includeCustomers,
   includeStaff = true,
+  disabled,
 }: {
   mode: 'multi' | 'single'
   placeholder: string
@@ -39,6 +40,7 @@ export function PeopleField({
   includeCustomers: boolean
   /** Pass false when the staff module is not loaded — customer-only options. */
   includeStaff?: boolean
+  disabled?: boolean
 }) {
   const t = useT()
   const activeOrgId = useCurrentOrganization()?.id ?? null
@@ -134,6 +136,7 @@ export function PeopleField({
             badge={participant.isCustomer ? customerBadge : participant.userId ? undefined : guestBadge}
             onRemove={() => onChange(value.filter((_, entryIndex) => entryIndex !== index))}
             removeLabel={t('customers.calendar.editor.removePerson', 'Remove {name}', { name: participant.name })}
+            disabled={disabled}
           />
         ))}
         <Input
@@ -145,6 +148,7 @@ export function PeopleField({
           aria-label={ariaLabel}
           role="combobox"
           aria-expanded={open}
+          disabled={disabled}
           className="min-w-36 flex-1 border-0 bg-transparent px-0 shadow-none hover:bg-transparent focus-within:border-transparent focus-within:shadow-none"
           inputClassName="text-sm text-foreground placeholder:text-muted-foreground"
         />

package/src/modules/customers/components/calendar/editor/PriorityField.tsx

@@ -23,11 +23,13 @@ export function PriorityField({
   labels,
   ariaLabel,
   onChange,
+  disabled,
 }: {
   value: EditorPriority
   labels: Record<EditorPriority, string>
   ariaLabel: string
   onChange(next: EditorPriority): void
+  disabled?: boolean
 }) {
   const [open, setOpen] = React.useState(false)
   const close = React.useCallback(() => setOpen(false), [])
@@ -49,6 +51,7 @@ export function PriorityField({
         aria-haspopup="listbox"
         aria-expanded={open}
         aria-label={ariaLabel}
+        disabled={disabled}
         onClick={() => setOpen((previous) => !previous)}
         className={cn('h-9 w-full justify-between bg-background px-3 font-normal shadow-none', CONTROL_BORDER)}
       >

package/src/modules/customers/components/calendar/editor/RepeatField.tsx

@@ -26,6 +26,8 @@ export function RepeatField({
   endType,
   count,
   untilDate,
+  untilError,
+  disabled,
   onFreqChange,
   onToggleDay,
   onEndTypeChange,
@@ -37,6 +39,8 @@ export function RepeatField({
   endType: EditorRepeatEndType
   count: number
   untilDate: string
+  untilError?: string | null
+  disabled?: boolean
   onFreqChange(next: EditorRepeatFreq): void
   onToggleDay(index: number): void
   onEndTypeChange(next: EditorRepeatEndType): void
@@ -51,6 +55,7 @@ export function RepeatField({
       <Select
         value={freq}
         onValueChange={(value) => onFreqChange(value as EditorRepeatFreq)}
+        disabled={disabled}
       >
         <SelectTrigger aria-label={freqLabel}>
           <SelectValue />
@@ -72,6 +77,7 @@ export function RepeatField({
                 variant={isActive ? 'default' : 'outline'}
                 aria-pressed={isActive}
                 aria-label={t(day.ariaKey, day.ariaFallback)}
+                disabled={disabled}
                 onClick={() => onToggleDay(index)}
                 className={cn(
                   'size-9 px-0 text-xs font-medium',
@@ -91,6 +97,7 @@ export function RepeatField({
             ariaLabel={t('customers.calendar.editor.repeat.ends', 'Ends')}
             value={endType}
             onChange={onEndTypeChange}
+            disabled={disabled}
             options={[
               { value: 'never', label: t('customers.calendar.editor.repeat.never', 'Never') },
               { value: 'date', label: t('customers.calendar.editor.repeat.onDate', 'On date') },
@@ -103,8 +110,10 @@ export function RepeatField({
               value={untilDate || ''}
               onChange={onUntilDateChange}
               ariaLabel={t('customers.calendar.editor.repeat.onDate', 'On date')}
+              disabled={disabled}
             />
           ) : null}
+          {endType === 'date' && untilError ? <p className="w-full text-xs text-status-error-text">{untilError}</p> : null}
           {endType === 'count' ? (
             <span className="flex items-center gap-2">
               <Input
@@ -117,6 +126,7 @@ export function RepeatField({
                   if (Number.isInteger(next) && next >= 1) onCountChange(next)
                 }}
                 aria-label={t('customers.calendar.editor.repeat.after', 'After')}
+                disabled={disabled}
                 className="h-9 w-20"
               />
               <span className={LABEL_CLASS}>{t('customers.calendar.editor.repeat.times', 'times')}</span>

package/src/modules/customers/components/calendar/editor/ResourcesField.tsx

@@ -25,11 +25,13 @@ export function ResourcesField({
   ariaLabel,
   value,
   onChange,
+  disabled,
 }: {
   placeholder: string
   ariaLabel: string
   value: EditorResource[]
   onChange(next: EditorResource[]): void
+  disabled?: boolean
 }) {
   const t = useT()
   const [query, setQuery] = React.useState('')
@@ -128,6 +130,7 @@ export function ResourcesField({
                 onChange(value.filter((entry) => entry.id !== resource.id))
               }}
               aria-label={t('customers.calendar.editor.removeResource', 'Remove {name}', { name: resource.label })}
+              disabled={disabled}
               className="size-5 shrink-0"
             >
               <Plus aria-hidden className="size-3.5 rotate-45 opacity-50" />
@@ -143,6 +146,7 @@ export function ResourcesField({
           aria-label={ariaLabel}
           role="combobox"
           aria-expanded={open}
+          disabled={disabled}
           className="min-w-36 flex-1 border-0 bg-transparent px-0 shadow-none hover:bg-transparent focus-within:border-transparent focus-within:shadow-none"
           inputClassName="text-sm text-foreground placeholder:text-muted-foreground"
         />