@open-mercato/core 0.6.4-develop.4382.1.6b4f656b77 → 0.6.4

package/src/modules/catalog/backend/catalog/products/[id]/page.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import Link from "next/link";
-import dynamic from "next/dynamic";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
 import { ErrorMessage, RecordNotFoundState } from "@open-mercato/ui/backend/detail";
 import {
@@ -18,6 +17,7 @@ import {
 import { createCrudFormError } from "@open-mercato/ui/backend/utils/serverErrors";
 import { collectCustomFieldValues } from "@open-mercato/ui/backend/utils/customFieldValues";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import MarkdownField from "@open-mercato/ui/backend/inputs/MarkdownField";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { Input } from "@open-mercato/ui/primitives/input";
 import { Label } from "@open-mercato/ui/primitives/label";
@@ -37,7 +37,10 @@ import { Spinner } from "@open-mercato/ui/primitives/spinner";
 import {
   apiCall,
   readApiResultOrThrow,
+  withScopedApiRequestHeaders,
 } from "@open-mercato/ui/backend/utils/apiCall";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
+import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 import { E } from "#generated/entities.ids.generated";
@@ -68,6 +71,8 @@ import {
   createLocalId,
   slugify,
   formatTaxRateLabel,
+  normalizeTaxRateSummary,
+  mergeTaxRateSummaries,
   buildOptionSchemaDefinition,
   convertSchemaToProductOptions,
   normalizePriceKindSummary,
@@ -126,20 +131,6 @@ import {
 } from "@open-mercato/ui/primitives/dialog";
 import { SendObjectMessageDialog } from "@open-mercato/ui/backend/messages/SendObjectMessageDialog.tsx";
 
-const MarkdownEditor = dynamic(() => import("@uiw/react-md-editor"), {
-  ssr: false,
-  loading: () => (
-    <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
-      <Spinner />
-    </div>
-  ),
-}) as unknown as React.ComponentType<{
-  value?: string;
-  height?: number;
-  onChange?: (value?: string) => void;
-  previewOptions?: { remarkPlugins?: unknown[] };
-}>;
-
 type ProductResponse = {
   items?: Array<Record<string, unknown>>;
 };
@@ -157,6 +148,8 @@ type VariantSummaryApi = {
   default_media_id?: string | null;
   defaultMediaId?: string | null;
   metadata?: Record<string, unknown> | null;
+  updated_at?: string | null;
+  updatedAt?: string | null;
 };
 
 type AttachmentListResponse = {
@@ -181,6 +174,7 @@ type VariantSummary = {
   defaultMediaId: string | null;
   prices: VariantPriceSummary[];
   optionValues: Record<string, string> | null;
+  updatedAt: string | null;
 };
 
 type VariantPriceListResponse = {
@@ -221,6 +215,7 @@ type OfferSnapshot = {
   isActive: boolean;
   channelName: string | null;
   channelCode: string | null;
+  updatedAt: string | null;
 };
 
 function mapVariantPriceSummary(
@@ -273,7 +268,7 @@ function readProductConversionRows(
 ): ProductUnitConversionDraft[] {
   const rows = Array.isArray(items) ? items : [];
   return rows
-    .map((item) => {
+    .map((item): ProductUnitConversionDraft | null => {
       const id = toTrimmedOrNull(item.id);
       const unitCode = canonicalizeUnitCode(item.unit_code ?? item.unitCode);
       const factor = toPositiveNumberOrNull(
@@ -298,6 +293,12 @@ function readProductConversionRows(
         toBaseFactor: String(factor),
         sortOrder: String(sortOrderRaw),
         isActive,
+        updatedAt:
+          typeof item.updated_at === "string"
+            ? item.updated_at
+            : typeof item.updatedAt === "string"
+              ? item.updatedAt
+              : null,
       } satisfies ProductUnitConversionDraft;
     })
     .filter((entry): entry is ProductUnitConversionDraft => Boolean(entry));
@@ -339,6 +340,41 @@ export default function EditCatalogProductPage({
     VariantMediaGroup[]
   >([]);
 
+  const parseTaxRateSummary = React.useCallback(
+    (item: Record<string, unknown>) =>
+      normalizeTaxRateSummary(
+        item,
+        t("catalog.products.create.taxRates.unnamed", "Untitled tax rate"),
+      ),
+    [t],
+  );
+
+  const fetchTaxRateById = React.useCallback(
+    async (taxRateId: string): Promise<TaxRateSummary | null> => {
+      const payload = await readApiResultOrThrow<{
+        items?: Array<Record<string, unknown>>;
+      }>(
+        `/api/sales/tax-rates?id=${encodeURIComponent(taxRateId)}&pageSize=1`,
+        undefined,
+        {
+          errorMessage: t(
+            "catalog.products.create.taxRates.error",
+            "Failed to load tax rates.",
+          ),
+          fallback: { items: [] },
+        },
+      );
+      const items = Array.isArray(payload.items) ? payload.items : [];
+      return (
+        items
+          .map((item) => parseTaxRateSummary(item))
+          .find((item): item is TaxRateSummary => item?.id === taxRateId) ??
+        null
+      );
+    },
+    [parseTaxRateSummary, t],
+  );
+
   const loadVariants = React.useCallback(async (id: string) => {
     try {
       const [variantsRes, pricesRes] = await Promise.all([
@@ -405,6 +441,12 @@ export default function EditCatalogProductPage({
                   : null,
             prices: priceMap[variantId] ?? [],
             optionValues,
+            updatedAt:
+              typeof variant.updatedAt === "string"
+                ? variant.updatedAt
+                : typeof variant.updated_at === "string"
+                  ? variant.updated_at
+                  : null,
           };
         })
         .filter((entry): entry is VariantSummary => Boolean(entry));
@@ -501,34 +543,9 @@ export default function EditCatalogProductPage({
         });
         const items = Array.isArray(payload.items) ? payload.items : [];
         setTaxRates(
-          items.map((item) => {
-            const rawRate =
-              typeof item.rate === "number"
-                ? item.rate
-                : Number(item.rate ?? Number.NaN);
-            return {
-              id: String(item.id),
-              name:
-                typeof item.name === "string" && item.name.trim().length
-                  ? item.name
-                  : t(
-                      "catalog.products.create.taxRates.unnamed",
-                      "Untitled tax rate",
-                    ),
-              code:
-                typeof item.code === "string" && item.code.trim().length
-                  ? item.code
-                  : null,
-              rate: Number.isFinite(rawRate) ? rawRate : null,
-              isDefault: Boolean(
-                typeof item.isDefault === "boolean"
-                  ? item.isDefault
-                  : typeof item.is_default === "boolean"
-                    ? item.is_default
-                    : false,
-              ),
-            };
-          }),
+          items
+            .map((item) => parseTaxRateSummary(item))
+            .filter((item): item is TaxRateSummary => item !== null),
         );
       } catch (err) {
         console.error("sales.tax-rates.fetch failed", err);
@@ -536,7 +553,17 @@ export default function EditCatalogProductPage({
       }
     };
     loadTaxRates().catch(() => {});
-  }, [t]);
+  }, [parseTaxRateSummary, t]);
+
+  React.useEffect(() => {
+    const taxRateId = initialValues?.taxRateId
+    if (!taxRateId || taxRates.some((rate) => rate.id === taxRateId)) return
+    fetchTaxRateById(taxRateId)
+      .then((selected) => {
+        setTaxRates((current) => mergeTaxRateSummaries(current, selected))
+      })
+      .catch(() => {})
+  }, [fetchTaxRateById, initialValues?.taxRateId, taxRates])
 
   React.useEffect(() => {
     if (!productId) {
@@ -712,6 +739,12 @@ export default function EditCatalogProductPage({
           categoryIds,
           channelIds,
           tags: tagValues,
+          updatedAt:
+            typeof record.updatedAt === "string"
+              ? record.updatedAt
+              : typeof record.updated_at === "string"
+                ? record.updated_at
+                : null,
         };
         if (!cancelled) {
           setInitialValues({ ...initial, ...customValues });
@@ -1225,12 +1258,18 @@ export default function EditCatalogProductPage({
         try {
           for (const offer of removedOffers) {
             if (!offer.id) continue;
-            await deleteCrud("catalog/offers", offer.id, {
-              errorMessage: t(
-                "catalog.products.edit.offers.deleteError",
-                "Failed to remove sales channel offer.",
-              ),
-            });
+            const offerId = offer.id;
+            // Send the offer's own version, overriding the product header the
+            // parent CrudForm submit scope put on the stack (#2055).
+            await withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(offer.updatedAt),
+              () => deleteCrud("catalog/offers", offerId, {
+                errorMessage: t(
+                  "catalog.products.edit.offers.deleteError",
+                  "Failed to remove sales channel offer.",
+                ),
+              }),
+            );
           }
         } catch (err) {
           console.error("catalog.products.edit.offers.delete", err);
@@ -1248,6 +1287,15 @@ export default function EditCatalogProductPage({
           .map((entry) => toTrimmedOrNull(entry.id))
           .filter((id): id is string => Boolean(id)),
       );
+      // Loaded conversion id → version, so the sync sends each row's own
+      // optimistic-lock version (overriding the product header leaked by the
+      // parent CrudForm submit scope onto the catalog/product-unit-conversions
+      // guard) (#2055).
+      const conversionVersions = new Map<string, string | null>();
+      for (const entry of initialConversionsRef.current) {
+        const cid = toTrimmedOrNull(entry.id);
+        if (cid) conversionVersions.set(cid, entry.updatedAt ?? null);
+      }
       const nextConversionIds = new Set(
         conversionInputs
           .map((entry) =>
@@ -1259,23 +1307,30 @@ export default function EditCatalogProductPage({
         (id) => !nextConversionIds.has(id),
       );
       for (const conversionId of removedConversionIds) {
-        await deleteCrud("catalog/product-unit-conversions", conversionId, {
-          errorMessage: t(
-            "catalog.products.uom.errors.sync",
-            "Failed to synchronize product conversions.",
-          ),
-        });
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(conversionVersions.get(conversionId) ?? null),
+          () => deleteCrud("catalog/product-unit-conversions", conversionId, {
+            errorMessage: t(
+              "catalog.products.uom.errors.sync",
+              "Failed to synchronize product conversions.",
+            ),
+          }),
+        );
       }
       const persistedConversions: ProductUnitConversionDraft[] = [];
       for (const conversion of conversionInputs) {
         if (conversion.id) {
-          await updateCrud("catalog/product-unit-conversions", {
-            id: conversion.id,
-            unitCode: conversion.unitCode,
-            toBaseFactor: conversion.toBaseFactor,
-            sortOrder: conversion.sortOrder,
-            isActive: conversion.isActive,
-          });
+          const conversionId = conversion.id;
+          await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(conversionVersions.get(conversionId) ?? null),
+            () => updateCrud("catalog/product-unit-conversions", {
+              id: conversionId,
+              unitCode: conversion.unitCode,
+              toBaseFactor: conversion.toBaseFactor,
+              sortOrder: conversion.sortOrder,
+              isActive: conversion.isActive,
+            }),
+          );
           persistedConversions.push({
             id: conversion.id,
             unitCode: conversion.unitCode,
@@ -1541,17 +1596,10 @@ function ProductDetailsSection({
           </Button>
         </div>
         {values.useMarkdown ? (
-          <div
-            data-color-mode="light"
-            className="overflow-hidden rounded-md border"
-          >
-            <MarkdownEditor
-              value={values.description}
-              height={260}
-              onChange={(val) => setValue("description", val ?? "")}
-              previewOptions={{ remarkPlugins: [] }}
-            />
-          </div>
+          <MarkdownField
+            value={values.description}
+            onChange={(val) => setValue("description", val ?? "")}
+          />
         ) : (
           <Textarea
             className="min-h-[180px]"
@@ -1766,23 +1814,29 @@ function ProductOptionsSection({ values, setValue }: ProductFormGroupProps) {
 
   const handleDeleteSchema = React.useCallback(
     async (id: string) => {
+      const target = schemaTemplates.find((entry) => entry.id === id);
+      const lockVersion = target?.updatedAt ?? target?.updated_at ?? null;
       try {
-        await deleteCrud("catalog/option-schemas", id, {
-          errorMessage: t(
-            "catalog.products.edit.schemas.deleteError",
-            "Failed to delete schema.",
-          ),
-        });
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(lockVersion),
+          () => deleteCrud("catalog/option-schemas", id, {
+            errorMessage: t(
+              "catalog.products.edit.schemas.deleteError",
+              "Failed to delete schema.",
+            ),
+          }),
+        );
         flash(
           t("catalog.products.edit.schemas.deleted", "Schema deleted."),
           "success",
         );
         void loadSchemas();
       } catch (err) {
+        if (surfaceRecordConflict(err, t)) { void loadSchemas(); return; }
         console.error("catalog.option-schemas.delete failed", err);
       }
     },
-    [loadSchemas, t],
+    [loadSchemas, schemaTemplates, t],
   );
 
   const handleSaveSchema = React.useCallback(
@@ -1814,8 +1868,25 @@ function ProductOptionsSection({ values, setValue }: ProductFormGroupProps) {
         isActive: true,
       };
       if (schemaToEdit?.id) payload.id = schemaToEdit.id;
-      if (schemaToEdit?.id) await updateCrud("catalog/option-schemas", payload);
-      else await createCrud("catalog/option-schemas", payload);
+      try {
+        if (schemaToEdit?.id) {
+          const lockVersion = schemaToEdit.updatedAt ?? schemaToEdit.updated_at ?? null;
+          await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(lockVersion),
+            () => updateCrud("catalog/option-schemas", payload),
+          );
+        } else {
+          await createCrud("catalog/option-schemas", payload);
+        }
+      } catch (err) {
+        if (surfaceRecordConflict(err, t)) {
+          setSaveSchemaOpen(false);
+          setSchemaToEdit(null);
+          void loadSchemas();
+          return;
+        }
+        throw err;
+      }
       flash(
         t("catalog.products.edit.schemas.saved", "Schema saved."),
         "success",
@@ -2138,18 +2209,23 @@ function ProductVariantsSection({
       if (!confirmed) return;
       setDeletingId(variant.id);
       try {
-        await deleteCrud("catalog/variants", variant.id, {
-          errorMessage: t(
-            "catalog.variants.form.deleteError",
-            "Failed to delete variant.",
-          ),
-        });
+        await withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(variant.updatedAt),
+          () =>
+            deleteCrud("catalog/variants", variant.id, {
+              errorMessage: t(
+                "catalog.variants.form.deleteError",
+                "Failed to delete variant.",
+              ),
+            }),
+        );
         flash(
           t("catalog.variants.form.deleted", "Variant deleted."),
           "success",
         );
         onVariantDeleted(variant.id);
       } catch (err) {
+        if (surfaceRecordConflict(err, t)) return;
         console.error("catalog.products.edit.variants.delete", err);
         flash(
           t("catalog.variants.form.deleteError", "Failed to delete variant."),
@@ -2388,6 +2464,9 @@ function ProductMetaSection({
   const autoHandleEnabledRef = React.useRef(handleValue.trim().length === 0);
   const autoHandleInitializedRef = React.useRef(false);
   const previousTitleRef = React.useRef(titleSource);
+  const selectedTaxRate = values.taxRateId
+    ? taxRates.find((rate) => rate.id === values.taxRateId) ?? null
+    : null;
 
   React.useEffect(() => {
     if (isLoadingProduct) return;
@@ -2584,7 +2663,9 @@ function ProductMetaSection({
                   ? t("catalog.products.create.taxRates.noneSelected", "No tax class selected")
                   : t("catalog.products.create.taxRates.emptyOption", "No tax classes available")
               }
-            />
+            >
+              {selectedTaxRate ? formatTaxRateLabel(selectedTaxRate) : undefined}
+            </SelectValue>
           </SelectTrigger>
           <SelectContent>
             {taxRates.map((rate) => (
@@ -2767,6 +2848,7 @@ function readOfferSnapshots(record: Record<string, unknown>): OfferSnapshot[] {
         getString(offer.channelName) ?? getString(offer.channel_name),
       channelCode:
         getString(offer.channelCode) ?? getString(offer.channel_code),
+      updatedAt: getString(offer.updatedAt) ?? getString(offer.updated_at) ?? null,
     });
   }
   return snapshots;
@@ -2867,6 +2949,7 @@ function mergeOfferSnapshots(
       isActive: entry.isActive ?? previous?.isActive ?? true,
       channelName: previous?.channelName ?? null,
       channelCode: previous?.channelCode ?? null,
+      updatedAt: previous?.updatedAt ?? null,
     };
   });
 }