@open-mercato/core 0.8.1-develop.7296.1.2111d779db → 0.9.0

package/src/modules/customers/components/detail/DealForm.tsx

@@ -23,9 +23,81 @@ import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customF
 import { useCurrencyDictionary } from './hooks/useCurrencyDictionary'
 import { DictionaryEntrySelect } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
 import { normalizeCustomFieldSubmitValue } from './customFieldUtils'
+import { DealOwnerSelect, type DealOwnerOption } from './DealOwnerSelect'
+import { useCurrentUserId } from '@open-mercato/ui/backend/utils/useCurrentUserId'
+
+/**
+ * Owner control for the deal form. On a create form it self-assigns to the current user once
+ * that id resolves, matching the pipeline quick-create dialog so a new deal does not start
+ * unowned. The ref guard makes that a one-shot: it never overwrites a choice the user has
+ * already made, and never runs at all in edit mode (autoAssignUserId is empty there).
+ */
+function DealOwnerFieldControl({
+  value,
+  setValue,
+  initialOption,
+  disabled,
+  autoAssignUserId,
+}: {
+  value: string | null
+  setValue: (next: string) => void
+  initialOption: DealOwnerOption | null
+  disabled: boolean
+  autoAssignUserId: string
+}) {
+  const seeded = React.useRef(false)
+  React.useEffect(() => {
+    if (seeded.current || !autoAssignUserId) return
+    seeded.current = true
+    if (!value) setValue(autoAssignUserId)
+    // `value` is read but intentionally not a dependency: the ref makes this a one-shot seed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoAssignUserId, setValue])
+
+  return (
+    <DealOwnerSelect
+      value={value && value.length ? value : null}
+      onChange={(next) => {
+        // The current-user id resolves asynchronously. Burn the one-shot here too, so a user
+        // who clears the picker before it arrives is not silently re-assigned by the effect.
+        seeded.current = true
+        setValue(next ?? '')
+      }}
+      initialOption={initialOption}
+      disabled={disabled}
+    />
+  )
+}
+
+/**
+ * Create-mode wrapper. The current-user lookup is a network round-trip, so it lives here
+ * rather than in DealForm itself — an edit form (the deal detail page, the common case)
+ * never self-assigns and must not pay for the request.
+ */
+function DealOwnerCreateField(props: {
+  value: string | null
+  setValue: (next: string) => void
+  initialOption: DealOwnerOption | null
+  disabled: boolean
+}) {
+  const t = useT()
+  const currentUserId = useCurrentUserId()
+  // The self-assigned id may not be on the assignable roster (an admin who is not a staff
+  // team member, or any user when the optional `staff` module is off). Seed it so the field
+  // names whoever it just assigned instead of rendering blank while holding their id.
+  const initialOption = React.useMemo<DealOwnerOption | null>(
+    () => props.initialOption
+      ?? (currentUserId
+        ? { id: currentUserId, name: t('customers.filters.currentUser', 'Current user') }
+        : null),
+    [currentUserId, props.initialOption, t],
+  )
+  return <DealOwnerFieldControl {...props} initialOption={initialOption} autoAssignUserId={currentUserId} />
+}
 
 export type DealFormBaseValues = {
   title: string
+  ownerUserId?: string | null
   status?: string | null
   pipelineStage?: string | null
   pipelineId?: string | null
@@ -70,6 +142,12 @@ export type DealFormProps = {
   showCancelAction?: boolean
   initialPipelineOptions?: PipelineOption[]
   initialPipelineStageOptions?: PipelineStageOption[]
+  /**
+   * The deal's current owner, so the owner picker shows a name immediately instead of
+   * waiting for the assignable-staff roster — and keeps showing one when that owner sits
+   * outside the fetched page or has left the roster.
+   */
+  initialOwnerOption?: DealOwnerOption | null
   /**
    * Injection spot id for the form-scoped record_locks widget (e.g.
    * `customers.deal`). Mirrors how people-v2/companies-v2 mount their save-time
@@ -274,6 +352,7 @@ const schema = z.object({
     .string()
     .max(DEAL_DESCRIPTION_MAX_LENGTH, 'customers.people.detail.deals.descriptionTooLong')
     .optional(),
+  ownerUserId: z.string().trim().optional(),
   personIds: z.array(z.string().trim().min(1)).optional(),
   companyIds: z.array(z.string().trim().min(1)).optional(),
 }).passthrough()
@@ -764,6 +843,7 @@ export function DealForm({
   showCancelAction = true,
   initialPipelineOptions,
   initialPipelineStageOptions,
+  initialOwnerOption,
   injectionSpotId,
   optimisticLockUpdatedAt,
 }: DealFormProps) {
@@ -1028,6 +1108,23 @@ export function DealForm({
       type: 'date',
       layout: 'half',
     },
+    {
+      id: 'ownerUserId',
+      label: t('customers.deals.fields.owner', 'Owner'),
+      type: 'custom',
+      layout: 'half',
+      component: ({ value, setValue }) => {
+        const controlProps = {
+          value: typeof value === 'string' ? value : null,
+          setValue: (next: string) => setValue(next),
+          initialOption: initialOwnerOption ?? null,
+          disabled,
+        }
+        return mode === 'create'
+          ? <DealOwnerCreateField {...controlProps} />
+          : <DealOwnerFieldControl {...controlProps} autoAssignUserId="" />
+      },
+    } as CrudField,
     {
       id: 'description',
       label: t('customers.people.detail.deals.fields.description', 'Description'),
@@ -1074,7 +1171,7 @@ export function DealForm({
         />
       ),
     } as CrudField,
-  ], [currencyDictionaryLabels, fetchCurrencyOptions, resolvedCurrencyError, pipelines, pipelineStages, loadStagesForPipeline, dictionaryLabels.status, disabled, fetchCompaniesByIds, fetchPeopleByIds, searchCompanies, searchPeople, t])
+  ], [currencyDictionaryLabels, fetchCurrencyOptions, resolvedCurrencyError, pipelines, pipelineStages, loadStagesForPipeline, dictionaryLabels.status, disabled, fetchCompaniesByIds, fetchPeopleByIds, initialOwnerOption, mode, searchCompanies, searchPeople, t])
 
   const groups = React.useMemo<CrudFormGroup[]>(() => {
     const nextGroups: CrudFormGroup[] = [
@@ -1082,7 +1179,7 @@ export function DealForm({
         id: 'details',
         title: t('customers.people.detail.deals.form.details', 'Deal details'),
         column: 1,
-        fields: ['title', 'status', 'pipelineId', 'pipelineStageId', 'valueAmount', 'valueCurrency', 'probability', 'expectedCloseAt', 'description'],
+        fields: ['title', 'status', 'pipelineId', 'pipelineStageId', 'valueAmount', 'valueCurrency', 'probability', 'expectedCloseAt', 'ownerUserId', 'description'],
       },
       ...(showAssociationsGroup
         ? [{
@@ -1140,6 +1237,10 @@ export function DealForm({
       probability: normalizeNumber(initialValues?.probability ?? null),
       expectedCloseAt: toDateInputValue(initialValues?.expectedCloseAt ?? null),
       description: initialValues?.description ?? '',
+      // Seeded explicitly: this object is an allow-list, so an owner left out here is
+      // dropped before it ever reaches the form and the picker starts empty on a deal
+      // that actually has an owner.
+      ownerUserId: typeof initialValues?.ownerUserId === 'string' ? initialValues.ownerUserId : '',
       personIds: sanitizeIdList(initialValues?.personIds ?? resolveIdsFromSource(initialValues?.people)),
       companyIds: sanitizeIdList(initialValues?.companyIds ?? resolveIdsFromSource(initialValues?.companies)),
       ...Object.fromEntries(
@@ -1180,6 +1281,14 @@ export function DealForm({
           description: parsed.data.description && parsed.data.description.length
             ? parsed.data.description
             : undefined,
+          // `base` is an explicit allow-list: a field omitted here never reaches the API.
+          // An empty picker sends `null` rather than being omitted, because clearing an owner
+          // is supported (spec D5) and the update command distinguishes the two — an explicit
+          // null clears the column, an absent key leaves it untouched
+          // (`commands/deals.ts:862`). Both create and update schemas accept null.
+          ownerUserId: parsed.data.ownerUserId && parsed.data.ownerUserId.length
+            ? parsed.data.ownerUserId
+            : null,
           personIds,
           companyIds,
         }

package/src/modules/customers/components/detail/DealOwnerSelect.tsx

@@ -0,0 +1,161 @@
+"use client"
+
+import * as React from 'react'
+import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs/LookupSelect'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { translateWithFallback } from '@open-mercato/shared/lib/i18n/translate'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+import { useCurrentOrganization } from '@open-mercato/ui/backend/BackendChromeProvider'
+import { fetchAssignableStaffMembers } from '../../lib/assignableStaff'
+
+const logger = createLogger('customers')
+
+const ROSTER_PAGE_SIZE = 20
+
+export type DealOwnerOption = {
+  id: string
+  name?: string | null
+  email?: string | null
+}
+
+export type DealOwnerSelectProps = {
+  value: string | null
+  onChange: (next: string | null) => void
+  /** Aborts an in-flight roster fetch, matching the other assignable-staff callers. */
+  signal?: AbortSignal
+  /**
+   * The already-known owner, so the picker shows a name immediately instead of waiting for
+   * the roster — and keeps showing one when that owner falls outside the fetched page or has
+   * since left the assignable roster.
+   */
+  initialOption?: DealOwnerOption | null
+  disabled?: boolean
+}
+
+function toLookupItem(id: string, name?: string | null, email?: string | null): LookupSelectItem {
+  const trimmedName = typeof name === 'string' ? name.trim() : ''
+  const trimmedEmail = typeof email === 'string' ? email.trim() : ''
+  // Callers fall back to the e-mail when a user has no name (the deal detail route sends
+  // `name: owner.name ?? owner.email`), so without this guard the card showed the same address
+  // as both title and subtitle — "admin@acme.com / admin@acme.com" (#6857).
+  const hasDistinctName = Boolean(trimmedName) && trimmedName !== trimmedEmail
+  return {
+    id,
+    title: trimmedName || trimmedEmail || id,
+    subtitle: hasDistinctName && trimmedEmail ? trimmedEmail : null,
+  }
+}
+
+/**
+ * Single-owner picker shared by every deal surface that assigns ownership (the detail form,
+ * both create forms, and the list's bulk reassign dialog).
+ *
+ * Clearing is supported (spec D5): `LookupSelect`'s clear control emits `null`, which the
+ * single-record forms send as `ownerUserId: null` to return a deal to the unowned state the
+ * API has always accepted. The bulk dialog treats a null as "no target chosen" and keeps its
+ * confirm disabled, so a bulk unassignment still cannot be sent.
+ */
+export function DealOwnerSelect({
+  value,
+  onChange,
+  initialOption,
+  disabled = false,
+  signal,
+}: DealOwnerSelectProps): React.ReactElement {
+  const t = useT()
+  // Scopes the roster to the active organization. Without it the staff-module-absent
+  // fallback omits `scopeToActiveOrganization`, which lists users across every
+  // organization — every other deal-owner picker passes this.
+  const activeOrgId = useCurrentOrganization()?.id ?? null
+
+  // The roster is the authority on a user's display name. Once it has resolved the selected
+  // value we keep that entry, so the picker stops falling back to `initialOption` — whose label
+  // may be a placeholder ("Current user") or an e-mail standing in for a missing name (#6857).
+  const resolvedForValue = React.useRef<LookupSelectItem | null>(null)
+  // The last roster we actually received, kept in state rather than a ref because it is also
+  // handed back to `LookupSelect` as `options`.
+  //
+  // `LookupSelect` resets its list to `options` whenever it is not searching, and it does not
+  // refetch on a plain re-render. After saving the deal the form re-rendered, that reset ran,
+  // and `options` held only the single seeded owner — so the field collapsed to one card and
+  // stayed that way until reload, with no network request in sight (#6857).
+  const [lastRoster, setLastRoster] = React.useState<LookupSelectItem[]>([])
+  const lastRosterRef = React.useRef<LookupSelectItem[]>([])
+
+  const seededOptions = React.useMemo<LookupSelectItem[]>(
+    () => (initialOption?.id ? [toLookupItem(initialOption.id, initialOption.name, initialOption.email)] : []),
+    [initialOption?.email, initialOption?.id, initialOption?.name],
+  )
+
+  // What `LookupSelect` falls back to when it is not searching: the roster we already know,
+  // with the seeded owner kept only if the roster does not contain them.
+  const fallbackOptions = React.useMemo<LookupSelectItem[]>(() => {
+    const seeded = seededOptions[0]
+    if (seeded && !lastRoster.some((item) => item.id === seeded.id)) return [seeded, ...lastRoster]
+    return lastRoster.length ? lastRoster : seededOptions
+  }, [lastRoster, seededOptions])
+
+
+  const searchOwners = React.useCallback(async (query: string): Promise<LookupSelectItem[]> => {
+    let items: LookupSelectItem[] = []
+    let fetchFailed = false
+    try {
+      // The assignable roster belongs to the optional `staff` module; when it is disabled the
+      // helper turns the 404 into an empty page, so this resolves to "no candidates" rather
+      // than an error state.
+      const members = await fetchAssignableStaffMembers(query, {
+        pageSize: ROSTER_PAGE_SIZE,
+        activeOrgId,
+        ...(signal ? { signal } : {}),
+      })
+      items = members.map((member) => toLookupItem(member.userId, member.displayName, member.email))
+    } catch (error) {
+      logger.error('customers.deals.searchOwners failed', { err: error })
+      items = []
+      fetchFailed = true
+    }
+
+    const isUnfiltered = query.trim().length === 0
+    if (items.length === 0 && (fetchFailed || isUnfiltered) && lastRosterRef.current.length > 0) {
+      // Keep showing what we last knew rather than collapsing to the seed alone.
+      items = lastRosterRef.current
+    } else if (items.length > 0 && isUnfiltered) {
+      lastRosterRef.current = items
+      setLastRoster(items)
+    }
+
+    const fromRoster = items.find((item) => item.id === value)
+    if (fromRoster) resolvedForValue.current = fromRoster
+
+    // `LookupSelect` only falls back to its `options` prop when it is NOT searching. A set
+    // `value` makes it search, so the fetch result replaces that seed — which would leave an
+    // owner outside the roster (a departed user, or anyone when the `staff` module is off)
+    // rendering as no selection at all. Merge the seed back in so the current value always
+    // has a matching, named item.
+    // Prefer the roster's own entry for the current value over the caller's seed.
+    const resolved = resolvedForValue.current
+    const seeded = resolved && resolved.id === value ? resolved : seededOptions[0]
+    if (seeded && seeded.id === value && !items.some((item) => item.id === seeded.id)) {
+      return [seeded, ...items]
+    }
+    return items
+  }, [activeOrgId, seededOptions, signal, value])
+
+  return (
+    <LookupSelect
+      value={value}
+      onChange={onChange}
+      fetchItems={searchOwners}
+      options={fallbackOptions}
+      disabled={disabled}
+      placeholder={translateWithFallback(
+        t,
+        'customers.deals.owner.searchPlaceholder',
+        'Search by name or email…',
+      )}
+      emptyLabel={translateWithFallback(t, 'customers.deals.owner.empty', 'No staff members found.')}
+    />
+  )
+}
+
+export default DealOwnerSelect

package/src/modules/customers/components/detail/DealsSection.tsx

@@ -759,6 +759,11 @@ export function DealsSection({
           probability: typeof base.probability === 'number' ? base.probability : undefined,
           expectedCloseAt: base.expectedCloseAt ?? undefined,
           description: base.description ?? undefined,
+          // This payload is an explicit allow-list, so an omitted field never reaches the API.
+          // `base.ownerUserId` is `null` when the picker is empty and a uuid otherwise; both are
+          // valid on `dealCreateSchema` (validators.ts:183) and `createDealCommand` maps null to
+          // null. Leaving it out created every deal from this flow unowned, silently.
+          ownerUserId: base.ownerUserId ?? null,
           personIds,
           companyIds,
         }
@@ -896,20 +901,9 @@ export function DealsSection({
   )
 
   React.useEffect(() => {
-    if (!onActionChange) return
-    const disabled = !scope || isLoading || pendingAction !== null
-    const action: SectionAction = {
-      label: addActionLabel,
-      onClick: () => {
-        if (!disabled) openCreateDialog()
-      },
-      disabled,
-    }
-    onActionChange(action)
-    return () => {
-      onActionChange(null)
-    }
-  }, [addActionLabel, isLoading, onActionChange, openCreateDialog, pendingAction, scope])
+    onActionChange?.(null)
+    return () => onActionChange?.(null)
+  }, [onActionChange])
 
   const isFormPending = pendingAction?.kind === 'create'
 

package/src/modules/customers/components/detail/PersonEmailShareControl.tsx

@@ -0,0 +1,273 @@
+'use client'
+
+import * as React from 'react'
+import { Users } from 'lucide-react'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { surfaceRecordConflict } from '@open-mercato/ui/backend/conflicts'
+import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type SharedByEntry = {
+  userId: string
+  userName: string | null
+  sharedAt: string | null
+}
+
+type ShareState = {
+  sharedByMe: boolean
+  canShare: boolean
+  updatedAt: string | null
+  sharedBy: SharedByEntry[]
+}
+
+type PersonEmailShareControlProps = {
+  personId: string
+  /**
+   * Bumped by the host whenever it re-reads the thread list, so this control
+   * re-reads with it.
+   *
+   * Required because `canShare` only turns true once the caller owns a private
+   * email interaction with this Person, and that row is written by a queue
+   * worker after the send completes — so the mount-time read is always too
+   * early on a first send, and the switch stayed hidden until a manual page
+   * refresh (#6455). The host's post-send burst poll covers that window; this
+   * control follows it rather than running a second timer of its own.
+   */
+  reloadToken?: number
+  /** Called after a successful flip so the thread list can refetch. */
+  onChanged?: () => void
+}
+
+const CONTEXT_ID = 'customers-person-email-share'
+
+const EMPTY_STATE: ShareState = {
+  sharedByMe: false,
+  canShare: false,
+  updatedAt: null,
+  sharedBy: [],
+}
+
+/**
+ * Owner-facing switch that hands the caller's whole email conversation with this
+ * Person to the team, plus the teammate-facing "Shared by <name>" badge.
+ *
+ * Rendered above `EmailThreadsPanel` rather than inside it so the shared UI
+ * package's panel contract stays untouched.
+ */
+export function PersonEmailShareControl({
+  personId,
+  reloadToken,
+  onChanged,
+}: PersonEmailShareControlProps) {
+  const t = useT()
+  const [state, setState] = React.useState<ShareState>(EMPTY_STATE)
+  const [busy, setBusy] = React.useState(false)
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    resourceId: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: CONTEXT_ID,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  const load = React.useCallback(async () => {
+    try {
+      const response = await apiCall<ShareState>(
+        `/api/customers/people/${encodeURIComponent(personId)}/email-share`,
+        {
+          method: 'GET',
+          // Polled alongside the thread list: degrade quietly rather than
+          // hijacking the page with a login redirect on an expired session.
+          headers: { 'x-om-forbidden-redirect': '0', 'x-om-unauthorized-redirect': '0' },
+        },
+      )
+      if (!response.ok || !response.result) {
+        setState(EMPTY_STATE)
+        return
+      }
+      const result = response.result
+      setState({
+        sharedByMe: !!result.sharedByMe,
+        canShare: !!result.canShare,
+        updatedAt: typeof result.updatedAt === 'string' ? result.updatedAt : null,
+        sharedBy: Array.isArray(result.sharedBy) ? result.sharedBy : [],
+      })
+    } catch {
+      // The control is additive — hide it rather than break the Emails tab.
+      setState(EMPTY_STATE)
+    }
+  }, [personId])
+
+  // Kept in a ref so a flip in progress does not itself retrigger the reload.
+  const busyRef = React.useRef(false)
+  React.useEffect(() => {
+    busyRef.current = busy
+  }, [busy])
+
+  React.useEffect(() => {
+    // A poll landing mid-flip would paint the pre-flip state for a moment and
+    // make the switch appear to bounce back; `onToggle` re-reads once the write
+    // settles, so skipping here loses nothing.
+    if (busyRef.current) return
+    void load()
+  }, [load, reloadToken])
+
+  const applyShared = React.useCallback(
+    async (nextShared: boolean) => {
+      const operation = async () => {
+        const response = await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(state.updatedAt),
+          () =>
+            apiCall<{ ok?: boolean }>(
+              `/api/customers/people/${encodeURIComponent(personId)}/email-share`,
+              {
+                method: 'PUT',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ shared: nextShared }),
+              },
+            ),
+        )
+        if (!response.ok) {
+          const err = response.result as { error?: string } | null
+          throw new Error(
+            err?.error ??
+              t('customers.email.conversationShare.errors.updateFailed', 'Could not update sharing'),
+          )
+        }
+        return true
+      }
+
+      return runMutation({
+        operation,
+        context: {
+          formId: CONTEXT_ID,
+          resourceKind: 'customers.email_conversation_share',
+          resourceId: personId,
+          retryLastMutation,
+        },
+        mutationPayload: { shared: nextShared },
+      })
+    },
+    [personId, state.updatedAt, runMutation, retryLastMutation, t],
+  )
+
+  const onToggle = React.useCallback(
+    async (nextShared: boolean) => {
+      if (busy) return
+      // Only the privacy-widening direction needs a confirmation; un-sharing is
+      // the safe direction and should stay one click.
+      if (nextShared) {
+        const confirmed = await confirm({
+          title: t('customers.email.conversationShare.confirm.title', 'Share this conversation?'),
+          text: t(
+            'customers.email.conversationShare.confirm.text',
+            'Your colleagues will be able to read your email history with this person, including messages already received. You can stop sharing at any time.',
+          ),
+          confirmText: t('customers.email.conversationShare.confirm.cta', 'Share with team'),
+        })
+        if (!confirmed) return
+      }
+
+      setBusy(true)
+      try {
+        const result = await applyShared(nextShared)
+        if (!result) return
+        flash(
+          nextShared
+            ? t('customers.email.conversationShare.flash.shared', 'Conversation shared with your team')
+            : t('customers.email.conversationShare.flash.unshared', 'Conversation is private again'),
+          'success',
+        )
+        await load()
+        onChanged?.()
+      } catch (err) {
+        if (surfaceRecordConflict(err, t)) return
+        flash(
+          err instanceof Error
+            ? err.message
+            : t('customers.email.conversationShare.errors.updateFailed', 'Could not update sharing'),
+          'error',
+        )
+      } finally {
+        setBusy(false)
+      }
+    },
+    [busy, confirm, applyShared, load, onChanged, t],
+  )
+
+  const sharedByLabel = React.useMemo(() => {
+    if (state.sharedBy.length === 0) return null
+    const names = state.sharedBy
+      .map((entry) => entry.userName)
+      .filter((name): name is string => !!name)
+    if (names.length === 0) {
+      return t('customers.email.conversationShare.sharedByTeammate', 'Shared by a teammate')
+    }
+    return t('customers.email.conversationShare.sharedBy', 'Shared by {{names}}', {
+      names: names.join(', '),
+    })
+  }, [state.sharedBy, t])
+
+  if (!state.canShare && !sharedByLabel) return null
+
+  return (
+    <div className="mb-3 flex flex-wrap items-center justify-between gap-3 rounded-md border border-border bg-muted/40 px-3 py-2">
+      <div className="flex items-center gap-2">
+        <Users className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+        <div className="flex flex-col">
+          {state.canShare ? (
+            <span className="text-sm font-medium">
+              {t(
+                'customers.email.conversationShare.label',
+                'Share this conversation with my team',
+              )}
+            </span>
+          ) : null}
+          {sharedByLabel ? (
+            <Badge variant="secondary" className="w-fit">
+              {sharedByLabel}
+            </Badge>
+          ) : null}
+          {state.canShare ? (
+            <span className="text-xs text-muted-foreground">
+              {state.sharedByMe
+                ? t(
+                    'customers.email.conversationShare.hint.on',
+                    'Colleagues can read your email history with this person.',
+                  )
+                : t(
+                    'customers.email.conversationShare.hint.off',
+                    'Only you can read your email with this person.',
+                  )}
+            </span>
+          ) : null}
+        </div>
+      </div>
+      {state.canShare ? (
+        <Switch
+          checked={state.sharedByMe}
+          disabled={busy}
+          onCheckedChange={(next) => {
+            void onToggle(next)
+          }}
+          aria-label={t(
+            'customers.email.conversationShare.label',
+            'Share this conversation with my team',
+          )}
+        />
+      ) : null}
+      {ConfirmDialogElement}
+    </div>
+  )
+}
+
+export default PersonEmailShareControl