@open-mercato/core 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6121.1.5797a901b3

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

@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from 'react'
+import { differenceInCalendarDays } from 'date-fns/differenceInCalendarDays'
+import { format } from 'date-fns/format'
+import { AlertTriangle, ChevronDown, Clock } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@open-mercato/ui/primitives/popover'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { CalendarItem, UpcomingCard, UpcomingCardsProps } from './types'
+
+function formatTimeRange(item: CalendarItem, allDayLabel: string): string {
+  if (item.allDay) return allDayLabel
+  return `${format(item.start, 'h:mm a')} – ${format(item.end, 'h:mm a')}`
+}
+
+function canJoin(item: CalendarItem): boolean {
+  return item.locationKind === 'url' || item.locationKind === 'platform'
+}
+
+type CardCallbacks = Pick<UpcomingCardsProps, 'canManage' | 'onJoin' | 'onSeeConflict' | 'onOpen' | 'onEdit' | 'onCancel'>
+
+function UpcomingCardStatus({
+  card,
+  onJoin,
+  onSeeConflict,
+}: {
+  card: UpcomingCard
+  onJoin: UpcomingCardsProps['onJoin']
+  onSeeConflict: UpcomingCardsProps['onSeeConflict']
+}) {
+  const t = useT()
+  const { item, kind, conflictCount } = card
+
+  if (kind === 'today') {
+    return (
+      <div className="flex w-full items-center gap-1.5 rounded-lg bg-status-success-bg py-2 pl-2 pr-3">
+        <Clock className="size-4 shrink-0 text-status-success-icon" aria-hidden="true" />
+        <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+          {t('customers.calendar.cards.today', 'Today')}
+        </span>
+        {canJoin(item) ? (
+          <LinkButton
+            variant="gray"
+            size="sm"
+            underline="always"
+            onClick={() => onJoin(item)}
+            className="shrink-0"
+          >
+            {t('customers.calendar.cards.join', 'Join Meeting')}
+          </LinkButton>
+        ) : null}
+      </div>
+    )
+  }
+
+  if (kind === 'conflicted') {
+    return (
+      <div className="flex w-full items-center gap-1.5 rounded-lg bg-status-warning-bg py-2 pl-2 pr-3">
+        <AlertTriangle className="size-4 shrink-0 text-status-warning-icon" aria-hidden="true" />
+        <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+          {t('customers.calendar.cards.conflictedCount', '{count} Conflicted', {
+            count: conflictCount,
+          })}
+        </span>
+        <LinkButton
+          variant="gray"
+          size="sm"
+          underline="always"
+          onClick={() => onSeeConflict(item)}
+          className="shrink-0"
+        >
+          {t('customers.calendar.cards.seeConflict', 'See Conflict')}
+        </LinkButton>
+      </div>
+    )
+  }
+
+  if (kind === 'cancelled') {
+    return (
+      <div className="flex w-full items-center gap-1.5 rounded-lg bg-status-error-bg py-2 pl-2 pr-3">
+        <Clock className="size-4 shrink-0 text-status-error-icon" aria-hidden="true" />
+        <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+          {t('customers.calendar.cards.cancelled', 'Cancelled')}
+        </span>
+        <span className="shrink-0 text-xs text-muted-foreground">
+          {format(item.start, 'MMM dd, yyyy')}
+        </span>
+      </div>
+    )
+  }
+
+  const daysLater = Math.max(0, differenceInCalendarDays(item.start, new Date()))
+  return (
+    <div className="flex w-full items-center gap-1.5 rounded-lg bg-muted py-2 pl-2 pr-3">
+      <Clock className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+      <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+        {daysLater === 1
+          ? t('customers.calendar.cards.dayLater', '1 day later')
+          : t('customers.calendar.cards.daysLater', '{days} days later', { days: daysLater })}
+      </span>
+      <span className="shrink-0 text-xs text-muted-foreground">
+        {format(item.start, 'MMM dd, yyyy')}
+      </span>
+    </div>
+  )
+}
+
+function UpcomingCardItem({
+  card,
+  canManage,
+  onJoin,
+  onSeeConflict,
+  onOpen,
+  onEdit,
+  onCancel,
+}: { card: UpcomingCard } & CardCallbacks) {
+  const t = useT()
+  const { item } = card
+
+  return (
+    <article className="flex w-[260px] shrink-0 snap-start flex-col gap-3 rounded-xl border bg-card px-2 pb-2 pt-4 shadow-xs sm:w-auto sm:shrink">
+      <div className="flex items-start gap-2 px-2">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <p className="truncate text-sm font-medium text-foreground">{item.title}</p>
+          <p className="truncate text-xs text-muted-foreground">
+            {formatTimeRange(item, t('customers.calendar.cards.allDay', 'All day'))}
+          </p>
+        </div>
+        <Popover>
+          <PopoverTrigger asChild>
+            <IconButton
+              variant="outline"
+              size="xs"
+              fullRadius
+              aria-label={t('customers.calendar.cards.menu.label', 'Event actions')}
+            >
+              <ChevronDown aria-hidden="true" />
+            </IconButton>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-40 min-w-0 p-1">
+            <PopoverClose asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="w-full justify-start"
+                onClick={() => onOpen(item)}
+              >
+                {t('customers.calendar.cards.menu.open', 'Open')}
+              </Button>
+            </PopoverClose>
+            {canManage ? (
+              <PopoverClose asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start"
+                  onClick={() => onEdit(item)}
+                >
+                  {t('customers.calendar.cards.menu.edit', 'Edit')}
+                </Button>
+              </PopoverClose>
+            ) : null}
+            {canManage ? (
+              <PopoverClose asChild>
+                <Button
+                  type="button"
+                  variant="destructive-ghost"
+                  size="sm"
+                  className="w-full justify-start"
+                  onClick={() => onCancel(item)}
+                >
+                  {t('customers.calendar.cards.menu.cancel', 'Cancel')}
+                </Button>
+              </PopoverClose>
+            ) : null}
+          </PopoverContent>
+        </Popover>
+      </div>
+      <UpcomingCardStatus card={card} onJoin={onJoin} onSeeConflict={onSeeConflict} />
+    </article>
+  )
+}
+
+export function UpcomingCards({
+  cards,
+  canManage = true,
+  onJoin,
+  onSeeConflict,
+  onOpen,
+  onEdit,
+  onCancel,
+}: UpcomingCardsProps) {
+  if (cards.length === 0) return null
+  return (
+    <div className="flex snap-x snap-mandatory gap-3 overflow-x-auto pb-1 sm:grid sm:snap-none sm:grid-cols-2 sm:gap-4 sm:overflow-visible sm:pb-0 xl:grid-cols-4">
+      {cards.map((card) => (
+        <UpcomingCardItem
+          key={card.item.id}
+          card={card}
+          canManage={canManage}
+          onJoin={onJoin}
+          onSeeConflict={onSeeConflict}
+          onOpen={onOpen}
+          onEdit={onEdit}
+          onCancel={onCancel}
+        />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from 'react'
+import { ChevronDown } 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 { categoryPillStyle, CONTROL_BORDER, DROPDOWN_PANEL_CLASS, UppercaseBadge } from './inputs'
+
+export function CategoryField({
+  label,
+  value,
+  options,
+  colors,
+  onChange,
+}: {
+  label: string
+  value: string
+  options: Array<{ value: string; label: string }>
+  colors: Record<string, string | null>
+  onChange(next: string): void
+}) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const selected = options.find((option) => option.value === value) ?? { value, label: value }
+
+  return (
+    <div
+      className="relative w-full"
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false)
+      }}
+    >
+      <Button
+        type="button"
+        variant="outline"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={label}
+        onClick={() => setOpen((previous) => !previous)}
+        className={cn(
+          'h-9 w-full justify-between bg-background px-3 shadow-none',
+          CONTROL_BORDER,
+        )}
+      >
+        <UppercaseBadge style={categoryPillStyle(colors[selected.value] ?? null)}>{selected.label}</UppercaseBadge>
+        <span className="flex shrink-0 items-center">
+          <span aria-hidden className="h-px w-2" />
+          <ChevronDown aria-hidden className="size-4 opacity-60" />
+        </span>
+      </Button>
+      {open ? (
+        <div role="listbox" aria-label={label} className={DROPDOWN_PANEL_CLASS}>
+          {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}
+          {options.map((option) => (
+            <Button
+              key={option.value}
+              type="button"
+              variant="ghost"
+              role="option"
+              aria-selected={option.value === value}
+              onClick={() => {
+                onChange(option.value)
+                setOpen(false)
+              }}
+              className="h-auto w-full justify-start px-2 py-1.5 text-left"
+            >
+              <UppercaseBadge style={categoryPillStyle(colors[option.value] ?? null)}>{option.label}</UppercaseBadge>
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from 'react'
+import { MapPin } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Field } from './inputs'
+
+export function LocationField({
+  variant,
+  value,
+  onChange,
+}: {
+  variant: 'location' | 'phoneLink'
+  value: string
+  onChange(next: string): void
+}) {
+  const t = useT()
+  const label = variant === 'phoneLink'
+    ? t('customers.calendar.editor.phoneLink', 'Phone / link')
+    : t('customers.calendar.editor.location', 'Location')
+  const placeholder = variant === 'phoneLink'
+    ? t('customers.calendar.editor.phoneLinkPlaceholder', 'Add a phone number or link…')
+    : t('customers.calendar.editor.locationPlaceholder', 'Add a location or link…')
+  return (
+    <Field label={label}>
+      <Input
+        type="text"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        aria-label={label}
+        leftIcon={<MapPin />}
+      />
+    </Field>
+  )
+}

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

@@ -0,0 +1,148 @@
+"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 { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import type { EditorParticipant } from '../../../lib/calendar/editorPayload'
+import { searchPeopleOptions, type PersonOption } from './lookups'
+import { CONTROL_BORDER, DROPDOWN_PANEL_CLASS, PersonChip, UppercaseBadge } from './inputs'
+
+export function PeopleField({
+  mode,
+  placeholder,
+  ariaLabel,
+  value,
+  onChange,
+  includeCustomers,
+}: {
+  mode: 'multi' | 'single'
+  placeholder: string
+  ariaLabel: string
+  value: EditorParticipant[]
+  onChange(next: EditorParticipant[]): void
+  includeCustomers: boolean
+}) {
+  const t = useT()
+  const [query, setQuery] = React.useState('')
+  const [open, setOpen] = React.useState(false)
+  const [options, setOptions] = React.useState<PersonOption[]>([])
+  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 results = await searchPeopleOptions(query.trim(), { includeCustomers, signal: controller.signal })
+        if (cancelled) return
+        setOptions(results)
+      } catch {
+        if (!cancelled) setOptions([])
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, 250)
+    return () => {
+      cancelled = true
+      controller.abort()
+      window.clearTimeout(timer)
+    }
+  }, [open, query, includeCustomers])
+
+  const selectedIds = new Set(value.map((participant) => participant.userId))
+  const visibleOptions = options.filter((option) => !selectedIds.has(option.userId))
+
+  const customerBadge = (
+    <UppercaseBadge className="bg-status-info-bg text-status-info-text">
+      {t('customers.calendar.editor.customerBadge', 'Customer')}
+    </UppercaseBadge>
+  )
+
+  return (
+    <div
+      className="relative w-full"
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false)
+      }}
+    >
+      <div
+        className={cn(
+          'flex w-full flex-wrap content-center items-center gap-2 rounded-md bg-background px-2.5 py-2',
+          mode === 'multi' ? 'min-h-24' : 'min-h-14',
+          CONTROL_BORDER,
+        )}
+      >
+        {value.map((participant) => (
+          <PersonChip
+            key={participant.userId}
+            name={participant.name}
+            badge={participant.isCustomer ? customerBadge : undefined}
+            onRemove={() => onChange(value.filter((entry) => entry.userId !== participant.userId))}
+            removeLabel={t('customers.calendar.editor.removePerson', 'Remove {name}', { name: participant.name })}
+          />
+        ))}
+        <Input
+          type="text"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onFocus={() => setOpen(true)}
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          role="combobox"
+          aria-expanded={open}
+          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"
+        />
+      </div>
+      {open ? (
+        <div role="listbox" aria-label={ariaLabel} className={DROPDOWN_PANEL_CLASS}>
+          {loading ? (
+            <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+              {t('customers.calendar.editor.searching', 'Searching…')}
+            </p>
+          ) : null}
+          {!loading && visibleOptions.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
+            ? visibleOptions.map((option) => (
+                <Button
+                  key={`${option.isCustomer ? 'customer' : 'staff'}:${option.userId}`}
+                  type="button"
+                  variant="ghost"
+                  role="option"
+                  aria-selected={false}
+                  onClick={() => {
+                    const participant: EditorParticipant = {
+                      userId: option.userId,
+                      name: option.name,
+                      email: option.email ?? undefined,
+                      isCustomer: option.isCustomer,
+                    }
+                    onChange(mode === 'single' ? [participant] : [...value, participant])
+                    setQuery('')
+                    if (mode === 'single') setOpen(false)
+                  }}
+                  className="h-auto w-full justify-start gap-2 whitespace-normal px-2 py-1.5 text-left text-sm font-normal text-foreground"
+                >
+                  <Avatar size="xs" label={option.name} />
+                  <span className="min-w-0 flex-1 truncate">
+                    {option.name}
+                    {option.email ? <span className="ml-1.5 text-xs text-muted-foreground">{option.email}</span> : null}
+                  </span>
+                  {option.isCustomer ? customerBadge : null}
+                </Button>
+              ))
+            : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}