@open-mercato/core 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6126.1.0b9392fdae

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

@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from 'react'
+import { Building2, ChevronDown, User, X } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import type { EditorRelatedTo } from '../../../lib/calendar/editorPayload'
+import {
+  fetchDealsForEntity,
+  searchRelatedEntities,
+  type DealOption,
+  type RelatedEntityOption,
+} from './lookups'
+import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge } from './inputs'
+
+const OPTION_ROW_CLASS =
+  'h-auto w-full justify-start gap-2 whitespace-normal px-2 py-1.5 text-left text-sm font-normal text-foreground'
+
+export function RelatedToField({
+  label,
+  value,
+  deal,
+  onChange,
+  onDealChange,
+  error,
+}: {
+  label: string
+  value: EditorRelatedTo | null
+  deal: DealOption | null
+  onChange(next: EditorRelatedTo | null): void
+  onDealChange(next: DealOption | null): void
+  error?: string | null
+}) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const [options, setOptions] = React.useState<RelatedEntityOption[]>([])
+  const [deals, setDeals] = React.useState<DealOption[]>([])
+  const [loading, setLoading] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!open) return
+    const controller = new AbortController()
+    let cancelled = false
+    const timer = window.setTimeout(async () => {
+      setLoading(true)
+      try {
+        const trimmed = query.trim()
+        const [people, companies] = await Promise.all([
+          searchRelatedEntities('person', trimmed, controller.signal),
+          searchRelatedEntities('company', trimmed, controller.signal),
+        ])
+        if (cancelled) return
+        setOptions([...people, ...companies])
+      } catch {
+        if (!cancelled) setOptions([])
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, 200)
+    return () => {
+      cancelled = true
+      controller.abort()
+      window.clearTimeout(timer)
+    }
+  }, [open, query])
+
+  React.useEffect(() => {
+    if (!open || !value || value.kind === 'unknown') {
+      setDeals([])
+      return
+    }
+    const controller = new AbortController()
+    let cancelled = false
+    fetchDealsForEntity({ id: value.id, kind: value.kind }, controller.signal)
+      .then((items) => { if (!cancelled) setDeals(items) })
+      .catch(() => { if (!cancelled) setDeals([]) })
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [open, value])
+
+  const kindLabel = (kind: RelatedEntityOption['kind']) =>
+    kind === 'person'
+      ? t('customers.deals.detail.tabs.peopleSingular', 'Person')
+      : t('customers.deals.detail.tabs.companySingular', 'Company')
+
+  return (
+    <div
+      className="relative w-full"
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false)
+      }}
+    >
+      <div
+        className={cn(
+          'flex h-10 w-full items-center rounded-md bg-background pl-2.5 pr-3',
+          error ? 'border border-status-error-border' : CONTROL_BORDER,
+        )}
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          aria-label={label}
+          onClick={() => setOpen((previous) => !previous)}
+          className="h-full min-w-0 flex-1 justify-between rounded-none bg-transparent p-0 text-left shadow-none hover:bg-transparent"
+        >
+          <span className="flex min-w-0 items-center gap-2">
+            {value ? (
+              <PersonChip
+                compact
+                name={value.label || value.id}
+              />
+            ) : (
+              <span className="truncate text-sm text-muted-foreground">
+                {t('customers.calendar.editor.relatedToPlaceholder', 'Search people or companies…')}
+              </span>
+            )}
+          </span>
+          <span className="flex shrink-0 items-center">
+            {deal ? (
+              <UppercaseBadge className="h-7 bg-status-info-bg text-status-info-text">
+                {t('customers.calendar.editor.dealBadge', '{name} · Deal', { name: deal.label })}
+              </UppercaseBadge>
+            ) : null}
+            <span aria-hidden className="h-px w-2" />
+            <ChevronDown aria-hidden className="size-4 opacity-60" />
+          </span>
+        </Button>
+        {value ? (
+          <IconButton
+            variant="ghost"
+            size="xs"
+            onClick={() => {
+              onChange(null)
+              onDealChange(null)
+            }}
+            aria-label={t('customers.calendar.editor.removeRelated', 'Clear related record')}
+            className="ms-1 shrink-0 text-muted-foreground"
+          >
+            <X aria-hidden className="size-3.5" />
+          </IconButton>
+        ) : null}
+      </div>
+      {open ? (
+        <div role="listbox" aria-label={label} className={DROPDOWN_PANEL_CLASS}>
+          <Input
+            type="text"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={t('customers.calendar.editor.relatedToPlaceholder', 'Search people or companies…')}
+            aria-label={t('customers.calendar.editor.relatedToPlaceholder', 'Search people or companies…')}
+            autoFocus
+            size="sm"
+            className="mb-1"
+          />
+          {loading ? (
+            <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+              {t('customers.calendar.editor.searching', 'Searching…')}
+            </p>
+          ) : null}
+          {!loading && options.length === 0 ? (
+            <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+              {t('customers.calendar.editor.noResults', 'No results')}
+            </p>
+          ) : null}
+          {!loading
+            ? options.map((option) => (
+                <Button
+                  key={`${option.kind}:${option.id}`}
+                  type="button"
+                  variant="ghost"
+                  role="option"
+                  aria-selected={value?.id === option.id}
+                  onClick={() => {
+                    onChange({ id: option.id, kind: option.kind, label: option.label })
+                    if (value?.id !== option.id) onDealChange(null)
+                    setQuery('')
+                  }}
+                  className={OPTION_ROW_CLASS}
+                >
+                  {option.kind === 'company'
+                    ? <Building2 aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
+                    : <User aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />}
+                  <span className="min-w-0 flex-1 truncate">
+                    {option.label}
+                    {option.subtitle ? <span className="ml-1.5 text-xs text-muted-foreground">{option.subtitle}</span> : null}
+                  </span>
+                  <span className="shrink-0 text-xs text-muted-foreground">{kindLabel(option.kind)}</span>
+                </Button>
+              ))
+            : null}
+          {value && deals.length > 0 ? (
+            <>
+              <p className="px-2 pb-1 pt-2 text-overline font-medium uppercase text-muted-foreground">
+                {t('customers.calendar.editor.dealsSection', 'Deals')}
+              </p>
+              <Button
+                type="button"
+                variant="ghost"
+                role="option"
+                aria-selected={deal === null}
+                onClick={() => {
+                  onDealChange(null)
+                  setOpen(false)
+                }}
+                className={OPTION_ROW_CLASS}
+              >
+                {t('customers.calendar.editor.dealNone', 'No deal')}
+              </Button>
+              {deals.map((option) => (
+                <Button
+                  key={option.id}
+                  type="button"
+                  variant="ghost"
+                  role="option"
+                  aria-selected={deal?.id === option.id}
+                  onClick={() => {
+                    onDealChange(option)
+                    setOpen(false)
+                  }}
+                  className={OPTION_ROW_CLASS}
+                >
+                  <span className="min-w-0 flex-1 truncate">{option.label}</span>
+                  <UppercaseBadge className="bg-status-info-bg text-status-info-text">
+                    {t('customers.calendar.editor.dealBadgeSuffix', 'Deal')}
+                  </UppercaseBadge>
+                </Button>
+              ))}
+            </>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import type { EditorRepeatEndType, EditorRepeatFreq } from '../../../lib/calendar/editorPayload'
+import { DateControl, LABEL_CLASS } from './inputs'
+import { SegmentGroup } from './SegmentGroup'
+
+const DAY_LABEL_KEYS = [
+  { letterKey: 'customers.calendar.editor.repeat.days.mon', letterFallback: 'M', ariaKey: 'customers.calendar.day.mon', ariaFallback: 'MON' },
+  { letterKey: 'customers.calendar.editor.repeat.days.tue', letterFallback: 'T', ariaKey: 'customers.calendar.day.tue', ariaFallback: 'TUE' },
+  { letterKey: 'customers.calendar.editor.repeat.days.wed', letterFallback: 'W', ariaKey: 'customers.calendar.day.wed', ariaFallback: 'WED' },
+  { letterKey: 'customers.calendar.editor.repeat.days.thu', letterFallback: 'T', ariaKey: 'customers.calendar.day.thu', ariaFallback: 'THU' },
+  { letterKey: 'customers.calendar.editor.repeat.days.fri', letterFallback: 'F', ariaKey: 'customers.calendar.day.fri', ariaFallback: 'FRI' },
+  { letterKey: 'customers.calendar.editor.repeat.days.sat', letterFallback: 'S', ariaKey: 'customers.calendar.day.sat', ariaFallback: 'SAT' },
+  { letterKey: 'customers.calendar.editor.repeat.days.sun', letterFallback: 'S', ariaKey: 'customers.calendar.day.sun', ariaFallback: 'SUN' },
+]
+
+export function RepeatField({
+  freq,
+  days,
+  endType,
+  count,
+  untilDate,
+  locale,
+  onFreqChange,
+  onToggleDay,
+  onEndTypeChange,
+  onCountChange,
+  onUntilDateChange,
+}: {
+  freq: EditorRepeatFreq
+  days: boolean[]
+  endType: EditorRepeatEndType
+  count: number
+  untilDate: string
+  locale: string
+  onFreqChange(next: EditorRepeatFreq): void
+  onToggleDay(index: number): void
+  onEndTypeChange(next: EditorRepeatEndType): void
+  onCountChange(next: number): void
+  onUntilDateChange(next: string): void
+}) {
+  const t = useT()
+  const freqLabel = t('customers.calendar.editor.repeat.label', 'Repeat')
+  return (
+    <div className="flex w-full flex-col gap-2.5">
+      <span className={LABEL_CLASS}>{freqLabel}</span>
+      <Select
+        value={freq}
+        onValueChange={(value) => onFreqChange(value as EditorRepeatFreq)}
+      >
+        <SelectTrigger aria-label={freqLabel}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="none">{t('customers.calendar.editor.repeat.freq.none', 'Does not repeat')}</SelectItem>
+          <SelectItem value="daily">{t('customers.calendar.editor.repeat.freq.daily', 'Daily')}</SelectItem>
+          <SelectItem value="weekly">{t('customers.calendar.editor.repeat.freq.weekly', 'Weekly')}</SelectItem>
+        </SelectContent>
+      </Select>
+      {freq === 'weekly' ? (
+        <div className="flex items-start gap-1.5">
+          {DAY_LABEL_KEYS.map((day, index) => {
+            const isActive = Boolean(days[index])
+            return (
+              <Button
+                key={day.ariaKey}
+                type="button"
+                variant={isActive ? 'default' : 'outline'}
+                aria-pressed={isActive}
+                aria-label={t(day.ariaKey, day.ariaFallback)}
+                onClick={() => onToggleDay(index)}
+                className={cn(
+                  'size-9 px-0 text-xs font-medium',
+                  !isActive && 'text-muted-foreground',
+                )}
+              >
+                {t(day.letterKey, day.letterFallback)}
+              </Button>
+            )
+          })}
+        </div>
+      ) : null}
+      {freq !== 'none' ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <span className={LABEL_CLASS}>{t('customers.calendar.editor.repeat.ends', 'Ends')}</span>
+          <SegmentGroup
+            ariaLabel={t('customers.calendar.editor.repeat.ends', 'Ends')}
+            value={endType}
+            onChange={onEndTypeChange}
+            options={[
+              { value: 'never', label: t('customers.calendar.editor.repeat.never', 'Never') },
+              { value: 'date', label: t('customers.calendar.editor.repeat.onDate', 'On date') },
+              { value: 'count', label: t('customers.calendar.editor.repeat.after', 'After') },
+            ]}
+          />
+          {endType === 'date' ? (
+            <DateControl
+              className="w-44"
+              value={untilDate || ''}
+              onChange={onUntilDateChange}
+              ariaLabel={t('customers.calendar.editor.repeat.onDate', 'On date')}
+              locale={locale}
+            />
+          ) : null}
+          {endType === 'count' ? (
+            <span className="flex items-center gap-2">
+              <Input
+                type="number"
+                min={1}
+                max={365}
+                value={count}
+                onChange={(event) => {
+                  const next = Number(event.target.value)
+                  if (Number.isInteger(next) && next >= 1) onCountChange(next)
+                }}
+                aria-label={t('customers.calendar.editor.repeat.after', 'After')}
+                className="h-9 w-20"
+              />
+              <span className={LABEL_CLASS}>{t('customers.calendar.editor.repeat.times', 'times')}</span>
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { EditorDateLabel } from '../../../lib/calendar/editorPayload'
+import { AllDayToggle, DateControl, LABEL_CLASS, TimeControl } from './inputs'
+
+const DATE_LABEL_TEXT: Record<EditorDateLabel, { key: string; fallback: string }> = {
+  starts: { key: 'customers.calendar.editor.dates.starts', fallback: 'Starts' },
+  when: { key: 'customers.calendar.editor.dates.when', fallback: 'When' },
+  sent: { key: 'customers.calendar.editor.dates.sent', fallback: 'Sent' },
+  logged: { key: 'customers.calendar.editor.dates.logged', fallback: 'Logged' },
+  due: { key: 'customers.calendar.editor.dates.due', fallback: 'Due' },
+}
+
+function DateTimeRow({
+  label,
+  date,
+  time,
+  showTime,
+  locale,
+  onDateChange,
+  onTimeChange,
+}: {
+  label: string
+  date: string
+  time: string
+  showTime: boolean
+  locale: string
+  onDateChange(next: string): void
+  onTimeChange(next: string): void
+}) {
+  return (
+    <div className="flex w-full items-end gap-2.5">
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        <span className={LABEL_CLASS}>{label}</span>
+        <DateControl value={date} onChange={onDateChange} ariaLabel={label} locale={locale} />
+      </div>
+      {showTime ? <TimeControl value={time} onChange={onTimeChange} ariaLabel={label} /> : null}
+    </div>
+  )
+}
+
+export function ScheduleSection({
+  dateLabel,
+  hasAllDay,
+  hasEnd,
+  allDay,
+  date,
+  startTime,
+  endDate,
+  endTime,
+  locale,
+  endsError,
+  onAllDayChange,
+  onDateChange,
+  onStartTimeChange,
+  onEndDateChange,
+  onEndTimeChange,
+}: {
+  dateLabel: EditorDateLabel
+  hasAllDay: boolean
+  hasEnd: boolean
+  allDay: boolean
+  date: string
+  startTime: string
+  endDate: string
+  endTime: string
+  locale: string
+  endsError?: string | null
+  onAllDayChange(next: boolean): void
+  onDateChange(next: string): void
+  onStartTimeChange(next: string): void
+  onEndDateChange(next: string): void
+  onEndTimeChange(next: string): void
+}) {
+  const t = useT()
+  const showTime = !(hasAllDay && allDay)
+  return (
+    <div className="flex w-full flex-col gap-2.5">
+      {hasAllDay ? (
+        <div className="flex w-full items-center justify-between">
+          <span className={LABEL_CLASS}>{t('customers.calendar.editor.allDay', 'All day')}</span>
+          <AllDayToggle checked={allDay} onCheckedChange={onAllDayChange} label={t('customers.calendar.editor.allDay', 'All day')} />
+        </div>
+      ) : null}
+      <DateTimeRow
+        label={t(DATE_LABEL_TEXT[dateLabel].key, DATE_LABEL_TEXT[dateLabel].fallback)}
+        date={date}
+        time={startTime}
+        showTime={showTime}
+        locale={locale}
+        onDateChange={onDateChange}
+        onTimeChange={onStartTimeChange}
+      />
+      {hasEnd ? (
+        <DateTimeRow
+          label={t('customers.calendar.editor.dates.ends', 'Ends')}
+          date={endDate}
+          time={endTime}
+          showTime={showTime}
+          locale={locale}
+          onDateChange={onEndDateChange}
+          onTimeChange={onEndTimeChange}
+        />
+      ) : null}
+      {endsError ? <p className="text-xs text-status-error-text">{endsError}</p> : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+
+export type SegmentOption<T extends string> = { value: T; label: string }
+
+export function SegmentGroup<T extends string>({
+  options,
+  value,
+  onChange,
+  size = 'sm',
+  ariaLabel,
+}: {
+  options: Array<SegmentOption<T>>
+  value: T
+  onChange(next: T): void
+  size?: 'sm' | 'md'
+  ariaLabel: string
+}) {
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className="inline-flex max-w-full items-start overflow-x-auto rounded-md border border-border bg-background"
+    >
+      {options.map((option, index) => {
+        const isActive = option.value === value
+        return (
+          <Button
+            key={option.value}
+            type="button"
+            variant="ghost"
+            aria-pressed={isActive}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              'h-auto rounded-none border-0 text-sm font-medium leading-5 shadow-none',
+              size === 'md' ? 'px-4 py-2' : 'px-3.5 py-1.5',
+              index > 0 && 'border-l border-border',
+              isActive ? 'bg-muted text-foreground hover:bg-muted' : 'bg-background text-muted-foreground',
+            )}
+          >
+            {option.label}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}