@open-mercato/ui 0.8.1-develop.7261.1.5d42353f61 → 0.8.1-develop.7266.1.8e520bbe03

package/src/backend/__tests__/CrudForm.hiddenGroups.test.tsx

@@ -0,0 +1,428 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+// Coverage for `hiddenGroupIds` (#5876): a host may omit declared groups by their
+// stable id. Hiding is presentation-only — the fields of a hidden group keep their
+// values and are still submitted, so a smaller form can never silently clear data.
+let injectedGroupWidgets: unknown[] = []
+let injectedFieldWidgets: Array<{ fields: unknown[] }> = []
+const fetchCustomFieldFormStructureMock = jest.fn()
+const buildFormFieldFromCustomFieldDefMock = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: () => {} }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: injectedGroupWidgets, loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn(async () => ({ ok: true, data: {} })) }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: injectedFieldWidgets, isLoading: false, error: null }),
+}))
+// Passes through to the real hook so the persisted-order assertions exercise its
+// actual localStorage writes; the spy only captures what CrudForm hands it.
+let mockCapturedReorder: ((fromIndex: number, toIndex: number) => void) | null = null
+jest.mock('../crud/useGroupOrder', () => {
+  const actual = jest.requireActual('../crud/useGroupOrder')
+  return {
+    __esModule: true,
+    useGroupOrder: (pageType: string, defaultGroupIds: string[]) => {
+      const result = actual.useGroupOrder(pageType, defaultGroupIds)
+      mockCapturedReorder = result.reorder
+      return result
+    },
+  }
+})
+jest.mock('../utils/customFieldForms', () => ({
+  __esModule: true,
+  buildFormFieldFromCustomFieldDef: (...args: unknown[]) => buildFormFieldFromCustomFieldDefMock(...args),
+  buildFormFieldsFromCustomFields: jest.fn(() => []),
+  fetchCustomFieldFormStructure: (...args: unknown[]) => fetchCustomFieldFormStructureMock(...args),
+}))
+
+import * as React from 'react'
+import { act, fireEvent, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const fields: CrudField[] = [
+  { id: 'name', label: 'Name', type: 'text' },
+  { id: 'legalName', label: 'Legal name', type: 'text' },
+  { id: 'note', label: 'Note', type: 'text' },
+]
+
+const groups: CrudFormGroup[] = [
+  { id: 'details', title: 'Details', column: 1, fields: ['name'] },
+  { id: 'profile', title: 'Profile', column: 1, fields: ['legalName'] },
+  { id: 'notes', title: 'Notes', column: 2, fields: ['note'] },
+]
+
+const initialValues = { name: 'Acme', legalName: 'Acme Sp. z o.o.', note: 'hello' }
+
+type RenderOptions = {
+  hiddenGroupIds?: readonly string[]
+  onSubmit?: (values: unknown) => void
+  formGroups?: CrudFormGroup[]
+  formFields?: CrudField[]
+  formInitialValues?: Record<string, unknown>
+  noGroups?: boolean
+  entityId?: string
+  collapsibleGroups?: boolean
+  sortableGroups?: boolean | { pageType: string }
+}
+
+const ORDER_PAGE_TYPE = 'company-form'
+const ORDER_STORAGE_KEY = `om:group-order:${ORDER_PAGE_TYPE}`
+
+// One column, so the rendered card order is the persisted order rather than a
+// column split.
+const singleColumnGroups: CrudFormGroup[] = [
+  { id: 'details', title: 'Details', column: 1, fields: ['name'] },
+  { id: 'profile', title: 'Profile', column: 1, fields: ['legalName'] },
+  { id: 'notes', title: 'Notes', column: 1, fields: ['note'] },
+]
+
+function renderForm(options: RenderOptions = {}) {
+  return renderWithProviders(
+    <CrudForm
+      title="Company"
+      fields={options.formFields ?? fields}
+      groups={options.noGroups ? undefined : (options.formGroups ?? groups)}
+      entityId={options.entityId}
+      initialValues={options.formInitialValues ?? initialValues}
+      hiddenGroupIds={options.hiddenGroupIds}
+      collapsibleGroups={options.collapsibleGroups}
+      sortableGroups={options.sortableGroups}
+      onSubmit={options.onSubmit ?? (() => {})}
+    />,
+  )
+}
+
+// Group cards render their title in a `text-sm font-medium` div; every rendered
+// field control is wrapped in a `data-crud-field-id` node.
+function groupTitles(container: HTMLElement): string[] {
+  return Array.from(container.querySelectorAll('div.text-sm.font-medium'))
+    .map((node) => node.textContent?.trim() ?? '')
+    .filter(Boolean)
+}
+
+function fieldIds(container: HTMLElement): string[] {
+  return Array.from(container.querySelectorAll('[data-crud-field-id]'))
+    .map((node) => node.getAttribute('data-crud-field-id') ?? '')
+    .filter(Boolean)
+}
+
+function submitForm(container: HTMLElement) {
+  fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+}
+
+describe('CrudForm hiddenGroupIds', () => {
+  afterEach(() => {
+    injectedGroupWidgets = []
+    injectedFieldWidgets = []
+    mockCapturedReorder = null
+    window.localStorage.clear()
+    fetchCustomFieldFormStructureMock.mockReset()
+    buildFormFieldFromCustomFieldDefMock.mockReset()
+  })
+
+  describe('absence preserves existing behavior', () => {
+    it('renders every declared group when the prop is omitted', () => {
+      const { container } = renderForm()
+      expect(groupTitles(container)).toEqual(expect.arrayContaining(['Details', 'Profile', 'Notes']))
+      expect(fieldIds(container)).toEqual(['name', 'legalName', 'note'])
+    })
+
+    it('renders identically for an omitted prop and an empty array', () => {
+      // React's useId yields a fresh form id per render, so normalize it away —
+      // everything else must match byte for byte.
+      const normalize = (html: string) => html.replace(/_r_[0-9a-z]+_/g, '_r_id_')
+      const omitted = normalize(renderForm().container.innerHTML)
+      const empty = normalize(renderForm({ hiddenGroupIds: [] }).container.innerHTML)
+      expect(empty).toBe(omitted)
+    })
+
+    it('still uses the flat layout for a form that declares no groups at all', () => {
+      const { container } = renderForm({ noGroups: true })
+      expect(fieldIds(container)).toEqual(['name', 'legalName', 'note'])
+      expect(groupTitles(container)).not.toContain('Details')
+    })
+  })
+
+  describe('hiding by stable id', () => {
+    it('removes only the named group and leaves its siblings untouched', () => {
+      const { container } = renderForm({ hiddenGroupIds: ['profile'] })
+      const titles = groupTitles(container)
+      expect(titles).toEqual(expect.arrayContaining(['Details', 'Notes']))
+      expect(titles).not.toContain('Profile')
+      expect(fieldIds(container)).toEqual(['name', 'note'])
+    })
+
+    it('hides several groups at once', () => {
+      const { container } = renderForm({ hiddenGroupIds: ['profile', 'notes'] })
+      const titles = groupTitles(container)
+      expect(titles).toContain('Details')
+      expect(titles).not.toContain('Profile')
+      expect(titles).not.toContain('Notes')
+      expect(fieldIds(container)).toEqual(['name'])
+    })
+
+    it('ignores an id that matches no declared group', () => {
+      const { container } = renderForm({ hiddenGroupIds: ['does-not-exist'] })
+      expect(groupTitles(container)).toEqual(expect.arrayContaining(['Details', 'Profile', 'Notes']))
+      expect(fieldIds(container)).toEqual(['name', 'legalName', 'note'])
+    })
+
+    it('does not fall back to the flat field list when every group is hidden', () => {
+      const { container } = renderForm({ hiddenGroupIds: ['details', 'profile', 'notes'] })
+      expect(fieldIds(container)).toEqual([])
+      const titles = groupTitles(container)
+      expect(titles).not.toContain('Details')
+      expect(titles).not.toContain('Profile')
+      expect(titles).not.toContain('Notes')
+    })
+
+    it('drops the secondary column when the only column-2 group is hidden', () => {
+      const findSidebarGrid = (root: HTMLElement) =>
+        Array.from(root.querySelectorAll('div')).find((node) => node.className.includes('7fr_3fr'))
+
+      expect(findSidebarGrid(renderForm().container)).toBeTruthy()
+      expect(findSidebarGrid(renderForm({ hiddenGroupIds: ['notes'] }).container)).toBeUndefined()
+    })
+  })
+
+  describe('interaction with other group features', () => {
+    it('excludes hidden groups from the sortable drag handles', () => {
+      const visible = renderForm({ sortableGroups: true, collapsibleGroups: true }).container
+      expect(visible.querySelectorAll('button[aria-label="Drag to reorder"]').length).toBe(2)
+
+      const { container } = renderForm({
+        hiddenGroupIds: ['profile'],
+        sortableGroups: true,
+        collapsibleGroups: true,
+      })
+      expect(container.querySelectorAll('button[aria-label="Drag to reorder"]').length).toBe(1)
+    })
+
+    // Hiding is presentation-only, so it must not mutate the user's stored
+    // preference: `useGroupOrder` drops every saved id missing from the defaults it
+    // is given and writes the pruned list back on the next reorder.
+    it('keeps a hidden group in the persisted order when another card is reordered', async () => {
+      window.localStorage.setItem(ORDER_STORAGE_KEY, JSON.stringify(['profile', 'notes', 'details']))
+      const { container } = renderForm({
+        formGroups: singleColumnGroups,
+        hiddenGroupIds: ['profile'],
+        sortableGroups: { pageType: ORDER_PAGE_TYPE },
+      })
+      await waitFor(() => expect(groupTitles(container)).toEqual(['Notes', 'Details']))
+
+      act(() => { mockCapturedReorder?.(0, 1) })
+
+      expect(JSON.parse(window.localStorage.getItem(ORDER_STORAGE_KEY) as string))
+        .toEqual(['notes', 'profile', 'details'])
+    })
+
+    it('restores a hidden group to its saved position once it is shown again', async () => {
+      window.localStorage.setItem(ORDER_STORAGE_KEY, JSON.stringify(['profile', 'notes', 'details']))
+      const hidden = renderForm({
+        formGroups: singleColumnGroups,
+        hiddenGroupIds: ['profile'],
+        sortableGroups: { pageType: ORDER_PAGE_TYPE },
+      })
+      await waitFor(() => expect(groupTitles(hidden.container)).toEqual(['Notes', 'Details']))
+      act(() => { mockCapturedReorder?.(0, 1) })
+
+      const shown = renderForm({
+        formGroups: singleColumnGroups,
+        sortableGroups: { pageType: ORDER_PAGE_TYPE },
+      })
+      await waitFor(() => expect(groupTitles(shown.container)).toEqual(['Notes', 'Profile', 'Details']))
+    })
+
+    it('renders no collapsible header or control for a hidden group', () => {
+      const { container } = renderForm({ hiddenGroupIds: ['profile'], collapsibleGroups: true })
+      expect(groupTitles(container)).not.toContain('Profile')
+      expect(fieldIds(container)).not.toContain('legalName')
+    })
+
+    it('hides an injected widget group card addressed by its widget: id', async () => {
+      injectedGroupWidgets = [
+        {
+          widgetId: 'customer_accounts.injection.company-users',
+          placement: { kind: 'group', column: 1, groupLabel: 'Portal users', priority: 200 },
+          module: {
+            metadata: { title: 'Portal users', description: '' },
+            Widget: () => <div data-testid="portal-users-widget">portal users</div>,
+          },
+        },
+      ]
+
+      const { container: shown } = renderForm()
+      await waitFor(() => {
+        expect(shown.querySelector('[data-testid="portal-users-widget"]')).toBeTruthy()
+      })
+
+      const { container } = renderForm({
+        hiddenGroupIds: ['widget:customer_accounts.injection.company-users'],
+      })
+      expect(container.querySelector('[data-testid="portal-users-widget"]')).toBeNull()
+      // the rest of the form is untouched
+      expect(fieldIds(container)).toEqual(['name', 'legalName', 'note'])
+    })
+
+    it('does not gate submit on an injected field that fell back into a hidden group', async () => {
+      // A definition whose target group does not exist is appended to the LAST
+      // declared group; when that group is hidden the field renders nowhere, so
+      // it must not block submit either.
+      injectedFieldWidgets = [
+        {
+          fields: [
+            {
+              id: 'injectedOnly',
+              label: 'Injected only',
+              type: 'text',
+              group: 'no-such-group',
+              required: true,
+            },
+          ],
+        },
+      ]
+      const onSubmit = jest.fn()
+
+      const { container } = renderForm({
+        formFields: [fields[0]],
+        formGroups: [
+          { id: 'details', title: 'Details', column: 1, fields: ['name'] },
+          { id: 'profile', title: 'Profile', column: 1, fields: [] },
+        ],
+        formInitialValues: { name: 'Acme' },
+        hiddenGroupIds: ['profile'],
+        onSubmit,
+      })
+
+      await waitFor(() => {
+        expect(fieldIds(container)).not.toContain('injectedOnly')
+      })
+
+      submitForm(container)
+
+      await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    })
+
+    it('hides a customFields group card together with its resolved custom fields', async () => {
+      fetchCustomFieldFormStructureMock.mockResolvedValue({
+        definitions: [
+          {
+            key: 'segment',
+            entityId: 'customers:company',
+            label: 'Segment',
+            kind: 'text',
+            formEditable: true,
+          },
+        ],
+        metadata: { items: [], fieldsetsByEntity: {}, entitySettings: {} },
+      })
+      buildFormFieldFromCustomFieldDefMock.mockImplementation(
+        (definition: { key: string; label?: string }) => ({
+          id: `cf_${definition.key}`,
+          label: definition.label ?? definition.key,
+          type: 'text',
+        }),
+      )
+
+      const withCustomFields: CrudFormGroup[] = [
+        groups[0],
+        { id: 'customFields', column: 2, kind: 'customFields' },
+      ]
+
+      const { container: shown } = renderForm({
+        formGroups: withCustomFields,
+        entityId: 'customers:company',
+        formInitialValues: { name: 'Acme' },
+        formFields: [fields[0]],
+      })
+      await waitFor(() => {
+        expect(fieldIds(shown)).toContain('cf_segment')
+      })
+
+      const { container } = renderForm({
+        formGroups: withCustomFields,
+        entityId: 'customers:company',
+        formInitialValues: { name: 'Acme' },
+        formFields: [fields[0]],
+        hiddenGroupIds: ['customFields'],
+      })
+      await waitFor(() => {
+        expect(fetchCustomFieldFormStructureMock).toHaveBeenCalled()
+      })
+      expect(fieldIds(container)).toEqual(['name'])
+      expect(fieldIds(container)).not.toContain('cf_segment')
+    })
+  })
+
+  describe('submission semantics', () => {
+    it('submits the values of a hidden group unchanged', async () => {
+      const onSubmit = jest.fn()
+      const { container } = renderForm({ hiddenGroupIds: ['profile'], onSubmit })
+
+      submitForm(container)
+
+      await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+      expect(onSubmit.mock.calls[0][0]).toEqual(
+        expect.objectContaining({ name: 'Acme', legalName: 'Acme Sp. z o.o.', note: 'hello' }),
+      )
+    })
+
+    it('does not block submit on a required field that lives only in a hidden group', async () => {
+      const onSubmit = jest.fn()
+
+      const { container } = renderForm({
+        formFields: [
+          { id: 'name', label: 'Name', type: 'text' },
+          { id: 'legalName', label: 'Legal name', type: 'text', required: true },
+        ],
+        formGroups: [
+          { id: 'details', title: 'Details', column: 1, fields: ['name'] },
+          { id: 'profile', title: 'Profile', column: 1, fields: ['legalName'] },
+        ],
+        formInitialValues: { name: 'Acme', legalName: '' },
+        hiddenGroupIds: ['profile'],
+        onSubmit,
+      })
+      expect(fieldIds(container)).toEqual(['name'])
+
+      submitForm(container)
+
+      await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    })
+
+    it('still blocks submit when that required field is also placed in a visible group', async () => {
+      const onSubmit = jest.fn()
+
+      const { container } = renderForm({
+        formFields: [{ id: 'legalName', label: 'Legal name', type: 'text', required: true }],
+        formGroups: [
+          { id: 'details', title: 'Details', column: 1, fields: ['legalName'] },
+          { id: 'profile', title: 'Profile', column: 1, fields: ['legalName'] },
+        ],
+        formInitialValues: { legalName: '' },
+        hiddenGroupIds: ['profile'],
+        onSubmit,
+      })
+      expect(fieldIds(container)).toEqual(['legalName'])
+
+      submitForm(container)
+
+      await waitFor(() => {
+        expect(container.querySelector('[data-crud-field-id="legalName"]')).toBeTruthy()
+      })
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/backend/messages/__tests__/useMessageComposeOperations.test.tsx

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { renderHook } from '@testing-library/react'
+import { useComposeSendOperation } from '../useMessageComposeOperations'
+import type { MessageTypeItem } from '../message-composer.types'
+
+const messageType: MessageTypeItem = {
+  type: 'note',
+  module: 'messages',
+  labelKey: 'messages.types.note',
+  icon: 'message',
+  allowReply: true,
+  allowForward: true,
+}
+
+const t = (_key: string, fallback: string) => fallback
+
+function buildParams(overrides: Partial<Parameters<typeof useComposeSendOperation>[0]> = {}) {
+  return {
+    t,
+    messageType: 'note',
+    createableMessageTypes: [messageType],
+    priority: 'normal' as const,
+    visibility: 'internal' as const,
+    externalEmail: '',
+    recipientIds: ['user-1'],
+    subject: 'Subject',
+    body: 'Body',
+    bodyFormat: 'text' as const,
+    sendViaEmail: false,
+    contextObject: null,
+    defaultValues: undefined,
+    contextActionOptions: [],
+    normalizedRequiredActionMode: 'none' as const,
+    shouldShowContextActions: false,
+    contextActionRequired: false,
+    contextActionType: '',
+    ...overrides,
+  }
+}
+
+describe('useComposeSendOperation payload sendViaEmail', () => {
+  it('preserves an explicit false toggle for a public message', () => {
+    const { result } = renderHook(() =>
+      useComposeSendOperation(
+        buildParams({ visibility: 'public', externalEmail: 'user@example.com', sendViaEmail: false }),
+      ),
+    )
+
+    const request = result.current.buildRequest({ attachmentIds: [] })
+    expect(request.payload.sendViaEmail).toBe(false)
+  })
+
+  it('preserves an explicit true toggle for a public message', () => {
+    const { result } = renderHook(() =>
+      useComposeSendOperation(
+        buildParams({ visibility: 'public', externalEmail: 'user@example.com', sendViaEmail: true }),
+      ),
+    )
+
+    const request = result.current.buildRequest({ attachmentIds: [] })
+    expect(request.payload.sendViaEmail).toBe(true)
+  })
+
+  it('preserves the toggle for an internal message', () => {
+    const { result } = renderHook(() =>
+      useComposeSendOperation(buildParams({ visibility: 'internal', sendViaEmail: false })),
+    )
+
+    const request = result.current.buildRequest({ attachmentIds: [] })
+    expect(request.payload.sendViaEmail).toBe(false)
+  })
+})

package/src/backend/messages/useMessageComposeOperations.ts

@@ -142,7 +142,7 @@ function buildComposePayload(
     sourceEntityId: sourceEntityId ?? undefined,
     objects: contextObjects,
     attachmentIds: input.attachmentIds.length > 0 ? input.attachmentIds : undefined,
-    sendViaEmail: publicMessage ? true : params.sendViaEmail,
+    sendViaEmail: params.sendViaEmail,
     isDraft: input.isDraft,
   }
 }

package/src/backend/notifications/NotificationDispatcher.ts

@@ -11,6 +11,7 @@ import type {
 } from '@open-mercato/shared/modules/notifications/handler'
 import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
 import { createLogger } from '@open-mercato/shared/lib/logger'
+import { localizeNotificationCopy } from './localizeNotification'
 
 const logger = createLogger('ui').child({ component: 'notifications' })
 
@@ -106,6 +107,7 @@ class NotificationDispatcher {
 
       let handlerRan = false
       let hadFeatureBlockedHandler = false
+      const localized = localizeNotificationCopy(notification, runtime.t)
 
       for (const entry of sortedEntries) {
         const handler = entry.handler
@@ -117,7 +119,7 @@ class NotificationDispatcher {
         if (this.shouldDebounce(handler, notification.id)) continue
         handlerRan = true
         try {
-          void Promise.resolve(handler.handle(notification, context))
+          void Promise.resolve(handler.handle(localized, context))
         } catch (error) {
           logger.error('Notification handler failed', { handlerId: handler.id, err: error })
         }

package/src/backend/notifications/__tests__/NotificationDispatcher.localize.test.tsx

@@ -0,0 +1,118 @@
+import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
+import { registerNotificationHandlers } from '@open-mercato/shared/lib/notifications/handler-registry'
+import {
+  __resetNotificationDispatcherForTests,
+  dispatchNotificationHandlers,
+  subscribeNotificationEffects,
+} from '../NotificationDispatcher'
+
+const flash = jest.fn()
+jest.mock('@open-mercato/ui/backend/FlashMessages', () => ({
+  flash: (...args: unknown[]) => flash(...args),
+}))
+
+const TITLE_KEY = 'communication_channels.notifications.channel_requires_reauth.title'
+const BODY_KEY = 'communication_channels.notifications.channel_requires_reauth.body'
+
+const dictionary: Record<string, string> = {
+  [TITLE_KEY]: 'Channel needs reconnection',
+  [BODY_KEY]: 'Authentication expired. Reconnect {{channel}} to resume sending and receiving messages.',
+}
+
+function translate(key: string, fallback?: string, variables?: Record<string, string>): string {
+  const template = dictionary[key] ?? fallback ?? key
+  return Object.entries(variables ?? {}).reduce(
+    (text, [name, value]) => text.replaceAll(`{{${name}}}`, value),
+    template,
+  )
+}
+
+function makeNotification(overrides: Partial<NotificationDto> = {}): NotificationDto {
+  return {
+    id: 'n1',
+    type: 'communication_channels.channel.requires_reauth',
+    title: TITLE_KEY,
+    body: BODY_KEY,
+    titleKey: TITLE_KEY,
+    bodyKey: BODY_KEY,
+    bodyVariables: { channel: 'Sales inbox' },
+    severity: 'warning',
+    status: 'unread',
+    actions: [],
+    createdAt: new Date().toISOString(),
+    ...overrides,
+  }
+}
+
+function runtime(t?: typeof translate) {
+  return {
+    features: [],
+    currentPath: '/backend',
+    t,
+    refreshNotifications: jest.fn(),
+    navigate: jest.fn(),
+    markAsRead: jest.fn(async () => {}),
+    dismiss: jest.fn(async () => {}),
+  }
+}
+
+describe('NotificationDispatcher — handler copy localization (#6099)', () => {
+  beforeEach(() => {
+    __resetNotificationDispatcherForTests()
+    flash.mockReset()
+    registerNotificationHandlers([
+      {
+        moduleId: 'test',
+        handlers: [
+          {
+            id: 'test.toast',
+            notificationType: 'communication_channels.channel.requires_reauth',
+            handle(notification, context) {
+              context.toast({ title: notification.title, body: notification.body ?? undefined, severity: 'warning' })
+            },
+          },
+        ],
+      },
+    ])
+  })
+
+  afterAll(() => {
+    registerNotificationHandlers([])
+  })
+
+  it('hands handlers the translated title and body (with variables) instead of the dictionary keys', () => {
+    dispatchNotificationHandlers([makeNotification()], runtime(translate))
+
+    expect(flash).toHaveBeenCalledTimes(1)
+    expect(flash).toHaveBeenCalledWith(
+      'Channel needs reconnection: Authentication expired. Reconnect Sales inbox to resume sending and receiving messages.',
+      'warning',
+    )
+  })
+
+  it('leaves a notification without keys untouched', () => {
+    dispatchNotificationHandlers(
+      [makeNotification({ title: 'Plain title', body: 'Plain body', titleKey: null, bodyKey: null, bodyVariables: null })],
+      runtime(translate),
+    )
+
+    expect(flash).toHaveBeenCalledWith('Plain title: Plain body', 'warning')
+  })
+
+  it('falls back to the stored copy when no translator is available', () => {
+    dispatchNotificationHandlers([makeNotification()], runtime(undefined))
+
+    expect(flash).toHaveBeenCalledWith(`${TITLE_KEY}: ${BODY_KEY}`, 'warning')
+  })
+
+  it('does not rewrite the DTO seen by effect subscribers', () => {
+    const seen: NotificationDto[] = []
+    const unsubscribe = subscribeNotificationEffects('communication_channels.*', (item) => seen.push(item))
+
+    dispatchNotificationHandlers([makeNotification({ id: 'n2' })], runtime(translate))
+    unsubscribe()
+
+    expect(seen).toHaveLength(1)
+    expect(seen[0].title).toBe(TITLE_KEY)
+  })
+})

package/src/backend/notifications/localizeNotification.ts

@@ -0,0 +1,35 @@
+import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
+
+export type NotificationTranslate = (
+  key: string,
+  fallback?: string,
+  variables?: Record<string, string>,
+) => string
+
+/**
+ * Give reactive handlers display copy instead of dictionary keys.
+ *
+ * `buildBaseNotificationFields` persists `title` / `body` as the type's
+ * `titleKey` / `bodyKey`; the bell panel translates them through
+ * `NotificationItem`, but a handler that forwards `notification.title` to
+ * `context.toast(...)` would show the raw key. Resolving here, once per
+ * dispatch, keeps every handler's toast/popup localized without each one
+ * having to remember the translator (#6099).
+ *
+ * Without a translator (dispatch outside an `I18nProvider`) the DTO is
+ * returned untouched, so the previous behaviour is the fallback.
+ */
+export function localizeNotificationCopy(
+  notification: NotificationDto,
+  t: NotificationTranslate | undefined,
+): NotificationDto {
+  if (!t) return notification
+  const title = notification.titleKey
+    ? t(notification.titleKey, notification.title, notification.titleVariables ?? undefined)
+    : notification.title
+  const body = notification.bodyKey
+    ? t(notification.bodyKey, notification.body ?? notification.bodyKey, notification.bodyVariables ?? undefined)
+    : notification.body
+  if (title === notification.title && body === notification.body) return notification
+  return { ...notification, title, body }
+}