@open-mercato/ui 0.6.6-develop.6416.1.888fffc007 → 0.6.6-develop.6422.1.b3d024f05c

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

@@ -5,12 +5,15 @@
 import * as React from 'react'
 import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { OPTIMISTIC_LOCK_HEADER_NAME } from '@open-mercato/shared/lib/crud/optimistic-lock-headers'
 import { MessageComposer } from '../MessageComposer'
-import { apiCall } from '../../utils/apiCall'
+import { apiCall, withScopedApiRequestHeaders } from '../../utils/apiCall'
 import { flash } from '../../FlashMessages'
+import { dismissRecordConflict, getRecordConflictForTest } from '../../conflicts'
 
 jest.mock('../../utils/apiCall', () => ({
   apiCall: jest.fn(),
+  withScopedApiRequestHeaders: jest.fn((_headers: Record<string, string>, run: () => unknown) => run()),
 }))
 
 jest.mock('../../FlashMessages', () => ({
@@ -59,6 +62,10 @@ describe('MessageComposer draft flow', () => {
 
   beforeEach(() => {
     jest.resetAllMocks()
+    dismissRecordConflict()
+    ;(withScopedApiRequestHeaders as jest.Mock).mockImplementation(
+      (_headers: Record<string, string>, run: () => unknown) => run(),
+    )
     ;(apiCall as jest.Mock).mockImplementation((url: string, options?: { method?: string, body?: string }) => {
       if (url.startsWith('/api/messages/types')) {
         return Promise.resolve({
@@ -156,6 +163,172 @@ describe('MessageComposer draft flow', () => {
     expect(flash).toHaveBeenCalledWith('Message sent.', 'success')
   })
 
+  it('attaches the optimistic-lock header when sending an existing draft', async () => {
+    const expectedUpdatedAt = '2026-02-24T10:00:00.000Z'
+
+    renderWithProviders(
+      <MessageComposer
+        inline
+        variant="compose"
+        messageId="draft-1"
+        expectedUpdatedAt={expectedUpdatedAt}
+        defaultValues={{
+          recipients: ['11111111-1111-4111-8111-111111111111'],
+          subject: 'Existing draft',
+          body: 'Existing draft body',
+        }}
+      />,
+      { dict: {} },
+    )
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Send' }))
+
+    await waitFor(() => {
+      expect(apiCall).toHaveBeenCalledWith(
+        '/api/messages/draft-1',
+        expect.objectContaining({ method: 'PATCH' }),
+      )
+    })
+
+    expect(withScopedApiRequestHeaders).toHaveBeenCalledWith(
+      { [OPTIMISTIC_LOCK_HEADER_NAME]: expectedUpdatedAt },
+      expect.any(Function),
+    )
+  })
+
+  it('surfaces a 409 optimistic-lock conflict on the shared banner instead of a generic flash', async () => {
+    const expectedUpdatedAt = '2026-02-24T10:00:00.000Z'
+
+    ;(apiCall as jest.Mock).mockImplementation((url: string, options?: { method?: string }) => {
+      if (url.startsWith('/api/messages/types')) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          result: {
+            items: [{
+              type: 'default',
+              module: 'messages',
+              labelKey: 'messages.types.default',
+              icon: 'mail',
+              allowReply: true,
+              allowForward: true,
+            }],
+          },
+          response: { status: 200 },
+        })
+      }
+
+      if (url === '/api/messages/draft-1' && options?.method === 'PATCH') {
+        return Promise.resolve({
+          ok: false,
+          status: 409,
+          result: {
+            error: 'record_modified',
+            code: 'optimistic_lock_conflict',
+            currentUpdatedAt: '2026-02-24T11:00:00.000Z',
+            expectedUpdatedAt,
+          },
+          response: { status: 409 },
+        })
+      }
+
+      return Promise.resolve({ ok: true, status: 200, result: { items: [] }, response: { status: 200 } })
+    })
+
+    renderWithProviders(
+      <MessageComposer
+        inline
+        variant="compose"
+        messageId="draft-1"
+        expectedUpdatedAt={expectedUpdatedAt}
+        defaultValues={{
+          recipients: ['11111111-1111-4111-8111-111111111111'],
+          subject: 'Existing draft',
+          body: 'Existing draft body',
+        }}
+      />,
+      { dict: {} },
+    )
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Send' }))
+
+    await waitFor(() => {
+      const conflict = getRecordConflictForTest()
+      expect(conflict).not.toBeNull()
+      expect(conflict?.currentUpdatedAt).toBe('2026-02-24T11:00:00.000Z')
+    })
+
+    expect(flash).not.toHaveBeenCalledWith('Failed to send message.', 'error')
+  })
+
+  it('closes the compose dialog on a 409 conflict so the shared banner is not hidden behind it (TC-007)', async () => {
+    const expectedUpdatedAt = '2026-02-24T10:00:00.000Z'
+    const onOpenChange = jest.fn()
+
+    ;(apiCall as jest.Mock).mockImplementation((url: string, options?: { method?: string }) => {
+      if (url.startsWith('/api/messages/types')) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          result: {
+            items: [{
+              type: 'default',
+              module: 'messages',
+              labelKey: 'messages.types.default',
+              icon: 'mail',
+              allowReply: true,
+              allowForward: true,
+            }],
+          },
+          response: { status: 200 },
+        })
+      }
+
+      if (url === '/api/messages/draft-1' && options?.method === 'PATCH') {
+        return Promise.resolve({
+          ok: false,
+          status: 409,
+          result: {
+            error: 'record_modified',
+            code: 'optimistic_lock_conflict',
+            currentUpdatedAt: '2026-02-24T11:00:00.000Z',
+            expectedUpdatedAt,
+          },
+          response: { status: 409 },
+        })
+      }
+
+      return Promise.resolve({ ok: true, status: 200, result: { items: [] }, response: { status: 200 } })
+    })
+
+    renderWithProviders(
+      <MessageComposer
+        open
+        variant="compose"
+        messageId="draft-1"
+        expectedUpdatedAt={expectedUpdatedAt}
+        onOpenChange={onOpenChange}
+        defaultValues={{
+          recipients: ['11111111-1111-4111-8111-111111111111'],
+          subject: 'Existing draft',
+          body: 'Existing draft body',
+        }}
+      />,
+      { dict: {} },
+    )
+
+    const dialog = await screen.findByRole('dialog')
+    const sendButtons = within(dialog).getAllByRole('button', { name: 'Send' })
+    fireEvent.click(sendButtons[sendButtons.length - 1] as HTMLButtonElement)
+
+    await waitFor(() => {
+      expect(getRecordConflictForTest()).not.toBeNull()
+    })
+    // The page-level conflict banner is hidden behind the modal, so the dialog
+    // must close to reveal it (and its Refresh action) to the user.
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
   it('saves an existing draft via PATCH without a draft transition flag', async () => {
     renderWithProviders(
       <MessageComposer

package/src/backend/messages/message-composer.types.ts

@@ -60,6 +60,12 @@ export type MessageComposerProps = {
   contextObject?: MessageComposerContextObject | null
   requiredActionConfig?: MessageComposerRequiredActionConfig | null
   contextPreview?: React.ReactNode
+  /**
+   * Expected `updated_at` of the existing draft being edited. When present, the
+   * composer attaches the OSS optimistic-lock header to the draft save/send
+   * PATCH so a stale tab cannot silently overwrite a concurrently-changed draft.
+   */
+  expectedUpdatedAt?: string | null
   defaultValues?: {
     type?: string
     recipients?: string[]

package/src/backend/messages/useMessageCompose.ts

@@ -2,7 +2,9 @@ import * as React from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { flash } from '../FlashMessages'
-import { apiCall } from '../utils/apiCall'
+import { apiCall, withScopedApiRequestHeaders } from '../utils/apiCall'
+import { buildOptimisticLockHeader } from '../utils/optimisticLock'
+import { surfaceRecordConflict } from '../conflicts'
 import type {
   AttachmentListResponse,
   MessageComposerProps,
@@ -127,6 +129,7 @@ export function useMessageCompose({
   requiredActionConfig = null,
   contextPreview = null,
   defaultValues,
+  expectedUpdatedAt = null,
   onSuccess,
   onCancel,
 }: UseMessageComposeParams): UseMessageComposeResult {
@@ -614,16 +617,37 @@ export function useMessageCompose({
       if (!shouldReturnFalse) {
         const { endpoint, method, payload } = operation.buildRequest({ attachmentIds: nextAttachmentIds })
 
-        const call = await apiCall<{ id?: string }>(endpoint, {
-          method,
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        })
+        // Editing an existing draft is a PATCH on the message aggregate, so carry
+        // the OSS optimistic-lock header to reject a stale overwrite. New
+        // compose/reply/forward writes create fresh records and never lock.
+        const lockHeaders = isEditingExistingDraft
+          ? buildOptimisticLockHeader(expectedUpdatedAt)
+          : {}
+
+        const call = await withScopedApiRequestHeaders(lockHeaders, () =>
+          apiCall<{ id?: string }>(endpoint, {
+            method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+          }),
+        )
 
         if (!call.ok) {
-          const message = toErrorMessage(call.result) ?? t('messages.errors.sendFailed', 'Failed to send message.')
-          setSubmitError(message)
-          flash(message, 'error')
+          if (surfaceRecordConflict({ status: call.status, body: call.result }, t)) {
+            setSubmitError(
+              t('ui.forms.flash.recordModified', 'This record was modified by someone else. Refresh and try again.'),
+            )
+            // The shared conflict banner renders at page level, so it is hidden
+            // behind the compose modal. Close the dialog to reveal it (with its
+            // Refresh action); the stale draft must be reloaded anyway (#3260 QA).
+            if (!inline) {
+              onOpenChange?.(false)
+            }
+          } else {
+            const message = toErrorMessage(call.result) ?? t('messages.errors.sendFailed', 'Failed to send message.')
+            setSubmitError(message)
+            flash(message, 'error')
+          }
           shouldReturnFalse = true
         } else {
           flash(operation.successMessage, 'success')
@@ -665,6 +689,7 @@ export function useMessageCompose({
     attachmentIds,
     composeDraftOperation,
     composeSendOperation,
+    expectedUpdatedAt,
     forwardOperation,
     inline,
     loadAttachmentIds,