@open-mercato/core 0.6.6-develop.6205.1.109e4b6a84 → 0.6.6-develop.6228.1.cf483c68b5

package/src/modules/customers/backend/config/customers/pipeline-stages/page.tsx

@@ -5,6 +5,7 @@ import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
 import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
@@ -66,6 +67,31 @@ export default function PipelineStagesPage() {
   const [stageIcon, setStageIcon] = React.useState<string | null>(null)
   const [saving, setSaving] = React.useState(false)
 
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: 'customers-pipeline-stages-page',
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+  const pipelineMutationContext = React.useMemo(
+    () => ({
+      formId: 'customers-pipeline-stages-page',
+      resourceKind: 'customers.pipeline',
+      retryLastMutation,
+    }),
+    [retryLastMutation],
+  )
+  const stageMutationContext = React.useMemo(
+    () => ({
+      formId: 'customers-pipeline-stages-page',
+      resourceKind: 'customers.pipeline_stage',
+      retryLastMutation,
+    }),
+    [retryLastMutation],
+  )
+
   const selectedPipeline = React.useMemo(
     () => pipelines.find((p) => p.id === selectedPipelineId) ?? null,
     [pipelines, selectedPipelineId],
@@ -135,30 +161,54 @@ export default function PipelineStagesPage() {
     setSaving(true)
     try {
       if (pipelineDialog?.mode === 'create') {
-        const result = await apiCall<{ id: string }>('/api/customers/pipelines', {
-          method: 'POST',
-          body: JSON.stringify({ name: pipelineName.trim(), isDefault: pipelineIsDefault }),
-          headers: { 'Content-Type': 'application/json' },
-        })
-        if (!result.ok) {
-          flash(t('customers.config.pipelineStages.errorCreatePipeline', 'Failed to create pipeline'), 'error')
+        let newId: string | null = null
+        try {
+          await runMutation({
+            operation: async () => {
+              const result = await apiCall<{ id: string }>('/api/customers/pipelines', {
+                method: 'POST',
+                body: JSON.stringify({ name: pipelineName.trim(), isDefault: pipelineIsDefault }),
+                headers: { 'Content-Type': 'application/json' },
+              })
+              if (!result.ok) {
+                throw new Error(t('customers.config.pipelineStages.errorCreatePipeline', 'Failed to create pipeline'))
+              }
+              newId = result.result?.id ?? null
+            },
+            context: pipelineMutationContext,
+            mutationPayload: { action: 'create', name: pipelineName.trim(), isDefault: pipelineIsDefault },
+          })
+        } catch (err) {
+          const msg = err instanceof Error && err.message ? err.message : t('customers.config.pipelineStages.errorCreatePipeline', 'Failed to create pipeline')
+          flash(msg, 'error')
           return
         }
         flash(t('customers.config.pipelineStages.createdPipeline', 'Pipeline created'), 'success')
-        const newId = result.result?.id ?? null
         await loadPipelines()
         if (newId) setSelectedPipelineId(newId)
       } else if (pipelineDialog?.mode === 'edit') {
-        const result = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(pipelineDialog.pipeline.updatedAt),
-          () => apiCall('/api/customers/pipelines', {
-            method: 'PUT',
-            body: JSON.stringify({ id: pipelineDialog.pipeline.id, name: pipelineName.trim(), isDefault: pipelineIsDefault }),
-            headers: { 'Content-Type': 'application/json' },
-          }),
-        )
-        if (!result.ok) {
-          flash(t('customers.config.pipelineStages.errorUpdatePipeline', 'Failed to update pipeline'), 'error')
+        const targetPipeline = pipelineDialog.pipeline
+        try {
+          await runMutation({
+            operation: async () => {
+              const result = await withScopedApiRequestHeaders(
+                buildOptimisticLockHeader(targetPipeline.updatedAt),
+                () => apiCall('/api/customers/pipelines', {
+                  method: 'PUT',
+                  body: JSON.stringify({ id: targetPipeline.id, name: pipelineName.trim(), isDefault: pipelineIsDefault }),
+                  headers: { 'Content-Type': 'application/json' },
+                }),
+              )
+              if (!result.ok) {
+                throw new Error(t('customers.config.pipelineStages.errorUpdatePipeline', 'Failed to update pipeline'))
+              }
+            },
+            context: pipelineMutationContext,
+            mutationPayload: { action: 'update', id: targetPipeline.id, name: pipelineName.trim(), isDefault: pipelineIsDefault },
+          })
+        } catch (err) {
+          const msg = err instanceof Error && err.message ? err.message : t('customers.config.pipelineStages.errorUpdatePipeline', 'Failed to update pipeline')
+          flash(msg, 'error')
           return
         }
         flash(t('customers.config.pipelineStages.updatedPipeline', 'Pipeline updated'), 'success')
@@ -181,17 +231,28 @@ export default function PipelineStagesPage() {
       variant: 'destructive',
     })
     if (!confirmed) return
-    const result = await withScopedApiRequestHeaders(
-      buildOptimisticLockHeader(pipeline.updatedAt),
-      () => apiCall('/api/customers/pipelines', {
-        method: 'DELETE',
-        body: JSON.stringify({ id: pipeline.id }),
-        headers: { 'Content-Type': 'application/json' },
-      }),
-    )
-    if (!result.ok) {
-      const error = (result.result as { error?: string })?.error
-      flash(error ?? t('customers.config.pipelineStages.errorDeletePipeline', 'Failed to delete pipeline'), 'error')
+    try {
+      await runMutation({
+        operation: async () => {
+          const result = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(pipeline.updatedAt),
+            () => apiCall('/api/customers/pipelines', {
+              method: 'DELETE',
+              body: JSON.stringify({ id: pipeline.id }),
+              headers: { 'Content-Type': 'application/json' },
+            }),
+          )
+          if (!result.ok) {
+            const error = (result.result as { error?: string })?.error
+            throw new Error(error ?? t('customers.config.pipelineStages.errorDeletePipeline', 'Failed to delete pipeline'))
+          }
+        },
+        context: pipelineMutationContext,
+        mutationPayload: { action: 'delete', id: pipeline.id },
+      })
+    } catch (err) {
+      const msg = err instanceof Error && err.message ? err.message : t('customers.config.pipelineStages.errorDeletePipeline', 'Failed to delete pipeline')
+      flash(msg, 'error')
       return
     }
     flash(t('customers.config.pipelineStages.deletedPipeline', 'Pipeline deleted'), 'success')
@@ -222,27 +283,50 @@ export default function PipelineStagesPage() {
           ...(stageColor !== null ? { color: stageColor } : {}),
           ...(stageIcon !== null ? { icon: stageIcon } : {}),
         }
-        const result = await apiCall('/api/customers/pipeline-stages', {
-          method: 'POST',
-          body: JSON.stringify({ pipelineId: selectedPipelineId, label: stageName.trim(), ...appearancePayload }),
-          headers: { 'Content-Type': 'application/json' },
-        })
-        if (!result.ok) {
-          flash(t('customers.config.pipelineStages.errorCreateStage', 'Failed to create stage'), 'error')
+        try {
+          await runMutation({
+            operation: async () => {
+              const result = await apiCall('/api/customers/pipeline-stages', {
+                method: 'POST',
+                body: JSON.stringify({ pipelineId: selectedPipelineId, label: stageName.trim(), ...appearancePayload }),
+                headers: { 'Content-Type': 'application/json' },
+              })
+              if (!result.ok) {
+                throw new Error(t('customers.config.pipelineStages.errorCreateStage', 'Failed to create stage'))
+              }
+            },
+            context: stageMutationContext,
+            mutationPayload: { action: 'create', pipelineId: selectedPipelineId, label: stageName.trim(), ...appearancePayload },
+          })
+        } catch (err) {
+          const msg = err instanceof Error && err.message ? err.message : t('customers.config.pipelineStages.errorCreateStage', 'Failed to create stage')
+          flash(msg, 'error')
           return
         }
         flash(t('customers.config.pipelineStages.createdStage', 'Stage created'), 'success')
       } else if (stageDialog?.mode === 'edit') {
-        const result = await withScopedApiRequestHeaders(
-          buildOptimisticLockHeader(stageDialog.stage.updatedAt),
-          () => apiCall('/api/customers/pipeline-stages', {
-            method: 'PUT',
-            body: JSON.stringify({ id: stageDialog.stage.id, label: stageName.trim(), color: stageColor, icon: stageIcon }),
-            headers: { 'Content-Type': 'application/json' },
-          }),
-        )
-        if (!result.ok) {
-          flash(t('customers.config.pipelineStages.errorUpdateStage', 'Failed to update stage'), 'error')
+        const targetStage = stageDialog.stage
+        try {
+          await runMutation({
+            operation: async () => {
+              const result = await withScopedApiRequestHeaders(
+                buildOptimisticLockHeader(targetStage.updatedAt),
+                () => apiCall('/api/customers/pipeline-stages', {
+                  method: 'PUT',
+                  body: JSON.stringify({ id: targetStage.id, label: stageName.trim(), color: stageColor, icon: stageIcon }),
+                  headers: { 'Content-Type': 'application/json' },
+                }),
+              )
+              if (!result.ok) {
+                throw new Error(t('customers.config.pipelineStages.errorUpdateStage', 'Failed to update stage'))
+              }
+            },
+            context: stageMutationContext,
+            mutationPayload: { action: 'update', id: targetStage.id, label: stageName.trim(), color: stageColor, icon: stageIcon },
+          })
+        } catch (err) {
+          const msg = err instanceof Error && err.message ? err.message : t('customers.config.pipelineStages.errorUpdateStage', 'Failed to update stage')
+          flash(msg, 'error')
           return
         }
         flash(t('customers.config.pipelineStages.updatedStage', 'Stage updated'), 'success')
@@ -265,17 +349,28 @@ export default function PipelineStagesPage() {
       variant: 'destructive',
     })
     if (!confirmed) return
-    const result = await withScopedApiRequestHeaders(
-      buildOptimisticLockHeader(stage.updatedAt),
-      () => apiCall('/api/customers/pipeline-stages', {
-        method: 'DELETE',
-        body: JSON.stringify({ id: stage.id }),
-        headers: { 'Content-Type': 'application/json' },
-      }),
-    )
-    if (!result.ok) {
-      const error = (result.result as { error?: string })?.error
-      flash(error ?? t('customers.config.pipelineStages.errorDeleteStage', 'Failed to delete stage'), 'error')
+    try {
+      await runMutation({
+        operation: async () => {
+          const result = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(stage.updatedAt),
+            () => apiCall('/api/customers/pipeline-stages', {
+              method: 'DELETE',
+              body: JSON.stringify({ id: stage.id }),
+              headers: { 'Content-Type': 'application/json' },
+            }),
+          )
+          if (!result.ok) {
+            const error = (result.result as { error?: string })?.error
+            throw new Error(error ?? t('customers.config.pipelineStages.errorDeleteStage', 'Failed to delete stage'))
+          }
+        },
+        context: stageMutationContext,
+        mutationPayload: { action: 'delete', id: stage.id },
+      })
+    } catch (err) {
+      const msg = err instanceof Error && err.message ? err.message : t('customers.config.pipelineStages.errorDeleteStage', 'Failed to delete stage')
+      flash(msg, 'error')
       return
     }
     flash(t('customers.config.pipelineStages.deletedStage', 'Stage deleted'), 'success')
@@ -293,13 +388,25 @@ export default function PipelineStagesPage() {
     const updated = reordered.map((stage, i) => ({ ...stage, order: i }))
     setStages(updated)
 
-    const result = await apiCall('/api/customers/pipeline-stages/reorder', {
-      method: 'POST',
-      body: JSON.stringify({ stages: updated.map((s) => ({ id: s.id, order: s.order })) }),
-      headers: { 'Content-Type': 'application/json' },
-    })
-    if (!result.ok) {
-      flash(t('customers.config.pipelineStages.errorReorder', 'Failed to reorder stages'), 'error')
+    const orderedStages = updated.map((s) => ({ id: s.id, order: s.order }))
+    try {
+      await runMutation({
+        operation: async () => {
+          const result = await apiCall('/api/customers/pipeline-stages/reorder', {
+            method: 'POST',
+            body: JSON.stringify({ stages: orderedStages }),
+            headers: { 'Content-Type': 'application/json' },
+          })
+          if (!result.ok) {
+            throw new Error(t('customers.config.pipelineStages.errorReorder', 'Failed to reorder stages'))
+          }
+        },
+        context: stageMutationContext,
+        mutationPayload: { action: 'reorder', stages: orderedStages },
+      })
+    } catch (err) {
+      const msg = err instanceof Error && err.message ? err.message : t('customers.config.pipelineStages.errorReorder', 'Failed to reorder stages')
+      flash(msg, 'error')
       if (selectedPipelineId) await loadStages(selectedPipelineId)
     }
   }

package/src/modules/customers/components/AddressFormatSettings.tsx

@@ -5,9 +5,12 @@ import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { RadioGroup, Radio } from '@open-mercato/ui/primitives/radio'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import type { AddressFormatStrategy } from '../utils/addressFormat'
 
+const SAVE_CONTEXT_ID = 'customers-address-format-settings'
+
 type Option = {
   id: AddressFormatStrategy
   title: string
@@ -21,6 +24,15 @@ export function AddressFormatSettings() {
   const [pending, setPending] = React.useState<AddressFormatStrategy | null>(null)
   const [error, setError] = React.useState<string | null>(null)
 
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: SAVE_CONTEXT_ID,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
   const options = React.useMemo<Option[]>(
     () => [
       {
@@ -87,25 +99,33 @@ export function AddressFormatSettings() {
       setPending(next)
       setError(null)
       try {
-        // optimistic-lock-exempt: single-row tenant address-format preference toggle — no per-record version / concurrent record edit
-        const call = await apiCall<Record<string, unknown>>(
-          '/api/customers/settings/address-format',
-          {
-            method: 'PUT',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify({ addressFormat: next }),
+        await runMutation({
+          // optimistic-lock-exempt: single-row tenant address-format preference toggle — no per-record version / concurrent record edit
+          operation: async () => {
+            const call = await apiCall<Record<string, unknown>>(
+              '/api/customers/settings/address-format',
+              {
+                method: 'PUT',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ addressFormat: next }),
+              },
+            )
+            const payload = call.result ?? {}
+            if (!call.ok) {
+              const message =
+                typeof payload?.error === 'string'
+                  ? payload.error
+                  : t('customers.config.addressFormat.errorSave', 'Failed to update address settings')
+              throw new Error(message)
+            }
           },
-        )
-        const payload = call.result ?? {}
-        if (!call.ok) {
-          const message =
-            typeof payload?.error === 'string'
-              ? payload.error
-              : t('customers.config.addressFormat.errorSave', 'Failed to update address settings')
-          setError(message)
-          flash(message, 'error')
-          return
-        }
+          context: {
+            formId: SAVE_CONTEXT_ID,
+            resourceKind: 'customers.settings',
+            retryLastMutation,
+          },
+          mutationPayload: { addressFormat: next },
+        })
         setFormat(next)
         flash(t('customers.config.addressFormat.success', 'Address format updated'), 'success')
       } catch (err) {
@@ -119,7 +139,7 @@ export function AddressFormatSettings() {
         setPending(null)
       }
     },
-    [format, t]
+    [format, retryLastMutation, runMutation, t]
   )
 
   return (

package/src/modules/customers/components/DictionarySettings.tsx

@@ -10,6 +10,7 @@ import {
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCallOrThrow, readApiResultOrThrow, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
 import { buildOptimisticLockHeader } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
@@ -128,6 +129,24 @@ function CustomerDictionarySection({ kind, title, description }: CustomerDiction
   const [dialog, setDialog] = React.useState<DialogState | null>(null)
   const [submitting, setSubmitting] = React.useState(false)
 
+  const saveContextId = `customers-dictionary-${kind}`
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: saveContextId,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+  const mutationContext = React.useMemo(
+    () => ({
+      formId: saveContextId,
+      resourceKind: 'customers.dictionary',
+      retryLastMutation,
+    }),
+    [retryLastMutation, saveContextId],
+  )
+
   const inheritedActionBlocked = t('customers.config.dictionaries.inherited.blocked', 'Inherited entries can only be edited from the parent organization.')
   const inheritedTooltip = t('customers.config.dictionaries.inherited.tooltip', 'Managed in parent organization')
   const inheritedLabel = t('customers.config.dictionaries.inherited.label', 'Inherited')
@@ -221,13 +240,18 @@ function CustomerDictionarySection({ kind, title, description }: CustomerDiction
     })
     if (!confirmed) return
     try {
-      await withScopedApiRequestHeaders(buildOptimisticLockHeader(entry.updatedAt), () =>
-        apiCallOrThrow(
-          `/api/customers/dictionaries/${kind}/${encodeURIComponent(entry.id)}`,
-          { method: 'DELETE' },
-          { errorMessage: errorDelete },
-        ),
-      )
+      await runMutation({
+        operation: () =>
+          withScopedApiRequestHeaders(buildOptimisticLockHeader(entry.updatedAt), () =>
+            apiCallOrThrow(
+              `/api/customers/dictionaries/${kind}/${encodeURIComponent(entry.id)}`,
+              { method: 'DELETE' },
+              { errorMessage: errorDelete },
+            ),
+          ),
+        context: mutationContext,
+        mutationPayload: { action: 'delete', id: entry.id, kind },
+      })
       flash(successDelete, 'success')
       await loadEntries()
     } catch (err) {
@@ -245,7 +269,7 @@ function CustomerDictionarySection({ kind, title, description }: CustomerDiction
       const messageValue = err instanceof Error ? err.message : errorDelete
       flash(messageValue, 'error')
     }
-  }, [confirm, deleteConfirmTemplate, errorDelete, formatCountMessage, inheritedActionBlocked, kind, loadEntries, roleTypeDeleteBlockedText, roleTypeDeleteBlockedTitle, successDelete, t])
+  }, [confirm, deleteConfirmTemplate, errorDelete, formatCountMessage, inheritedActionBlocked, kind, loadEntries, mutationContext, roleTypeDeleteBlockedText, roleTypeDeleteBlockedTitle, runMutation, successDelete, t])
 
   const submitForm = React.useCallback(async (values: DictionaryFormValues) => {
     const payload = {
@@ -257,15 +281,20 @@ function CustomerDictionarySection({ kind, title, description }: CustomerDiction
     setSubmitting(true)
     try {
       if (!dialog || dialog.mode === 'create') {
-        await apiCallOrThrow(
-          `/api/customers/dictionaries/${kind}`,
-          {
-            method: 'POST',
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify(payload),
-          },
-          { errorMessage: errorSave },
-        )
+        await runMutation({
+          operation: () =>
+            apiCallOrThrow(
+              `/api/customers/dictionaries/${kind}`,
+              {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(payload),
+              },
+              { errorMessage: errorSave },
+            ),
+          context: mutationContext,
+          mutationPayload: { action: 'create', kind, ...payload },
+        })
         flash(successSave, 'success')
       } else if (dialog.mode === 'edit') {
         const target = dialog.entry
@@ -284,17 +313,22 @@ function CustomerDictionarySection({ kind, title, description }: CustomerDiction
           closeDialog()
           return
         }
-        await withScopedApiRequestHeaders(buildOptimisticLockHeader(target.updatedAt), () =>
-          apiCallOrThrow(
-            `/api/customers/dictionaries/${kind}/${encodeURIComponent(target.id)}`,
-            {
-              method: 'PATCH',
-              headers: { 'content-type': 'application/json' },
-              body: JSON.stringify(body),
-            },
-            { errorMessage: errorSave },
-          ),
-        )
+        await runMutation({
+          operation: () =>
+            withScopedApiRequestHeaders(buildOptimisticLockHeader(target.updatedAt), () =>
+              apiCallOrThrow(
+                `/api/customers/dictionaries/${kind}/${encodeURIComponent(target.id)}`,
+                {
+                  method: 'PATCH',
+                  headers: { 'content-type': 'application/json' },
+                  body: JSON.stringify(body),
+                },
+                { errorMessage: errorSave },
+              ),
+            ),
+          context: mutationContext,
+          mutationPayload: { action: 'update', id: target.id, kind, ...body },
+        })
         flash(successSave, 'success')
       }
       closeDialog()
@@ -305,7 +339,7 @@ function CustomerDictionarySection({ kind, title, description }: CustomerDiction
     } finally {
       setSubmitting(false)
     }
-  }, [closeDialog, dialog, errorSave, inheritedActionBlocked, kind, loadEntries, successSave])
+  }, [closeDialog, dialog, errorSave, inheritedActionBlocked, kind, loadEntries, mutationContext, runMutation, successSave])
 
   const currentValues = React.useMemo<DictionaryFormValues>(() => {
     if (dialog && dialog.mode === 'edit') {