@open-mercato/core 0.5.1-develop.2949.009dcdd2d5 → 0.5.1-develop.2954.610bab2d08

package/dist/modules/catalog/backend/catalog/products/create/page.js

@@ -14,6 +14,14 @@ import { TagsInput } from "@open-mercato/ui/backend/inputs/TagsInput";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { Input } from "@open-mercato/ui/primitives/input";
 import { Label } from "@open-mercato/ui/primitives/label";
+import { RadioGroup, Radio } from "@open-mercato/ui/primitives/radio";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
 import { cn } from "@open-mercato/shared/lib/utils";
 import {
   Plus,
@@ -1294,201 +1302,201 @@ function ProductBuilder({
         ) }) : null
       ] }) : null,
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[900px] table-fixed border-collapse text-sm", children: [
-          /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t(
-              "catalog.products.create.variantsBuilder.defaultOption",
-              "Default option"
-            ) }),
-            /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t("catalog.products.form.variants", "Variant title") }),
-            /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t("catalog.products.create.variantsBuilder.sku", "SKU") }),
-            /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t(
-              "catalog.products.create.variantsBuilder.vatColumn",
-              "Tax class"
-            ) }),
-            priceKinds.map((kind) => /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx("span", { children: t(
-                  "catalog.products.create.variantsBuilder.priceColumn",
-                  "Price {{title}}"
-                ).replace("{{title}}", kind.title) }),
-                /* @__PURE__ */ jsx(
-                  "small",
-                  {
-                    title: kind.displayMode === "including-tax" ? t(
-                      "catalog.priceKinds.form.displayMode.include",
-                      "Including tax"
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            className: "contents",
+            name: "defaultVariant",
+            value: (Array.isArray(values.variants) ? values.variants : []).find((v) => v.isDefault)?.id ?? "",
+            onValueChange: (next) => markDefaultVariant(next),
+            children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[900px] table-fixed border-collapse text-sm", children: [
+              /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t(
+                  "catalog.products.create.variantsBuilder.defaultOption",
+                  "Default option"
+                ) }),
+                /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t("catalog.products.form.variants", "Variant title") }),
+                /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t("catalog.products.create.variantsBuilder.sku", "SKU") }),
+                /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: t(
+                  "catalog.products.create.variantsBuilder.vatColumn",
+                  "Tax class"
+                ) }),
+                priceKinds.map((kind) => /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx("span", { children: t(
+                      "catalog.products.create.variantsBuilder.priceColumn",
+                      "Price {{title}}"
+                    ).replace("{{title}}", kind.title) }),
+                    /* @__PURE__ */ jsx(
+                      "small",
+                      {
+                        title: kind.displayMode === "including-tax" ? t(
+                          "catalog.priceKinds.form.displayMode.include",
+                          "Including tax"
+                        ) : t(
+                          "catalog.priceKinds.form.displayMode.exclude",
+                          "Excluding tax"
+                        ),
+                        className: "text-xs text-muted-foreground",
+                        children: kind.displayMode === "including-tax" ? "\u24C9" : "\u24C3"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: kind.currencyCode?.toUpperCase() ?? t(
+                    "catalog.products.create.variantsBuilder.currencyMissing",
+                    "Currency missing"
+                  ) })
+                ] }) }, kind.id)),
+                /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-center", children: t(
+                  "catalog.products.create.variantsBuilder.manageInventory",
+                  "Managed inventory"
+                ) }),
+                /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-center", children: t(
+                  "catalog.products.create.variantsBuilder.allowBackorder",
+                  "Allow backorder"
+                ) }),
+                /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-center", children: t(
+                  "catalog.products.create.variantsBuilder.inventoryKit",
+                  "Has inventory kit"
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: (Array.isArray(values.variants) && values.variants.length ? values.variants : [
+                createVariantDraft(values.taxRateId ?? null, {
+                  isDefault: true
+                })
+              ]).map((variant) => /* @__PURE__ */ jsxs("tr", { className: "border-t", children: [
+                /* @__PURE__ */ jsxs("td", { className: "px-3 py-2", children: [
+                  /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-1 text-xs", children: [
+                    /* @__PURE__ */ jsx(Radio, { value: variant.id }),
+                    variant.isDefault ? t(
+                      "catalog.products.create.variantsBuilder.defaultLabel",
+                      "Default option value"
                     ) : t(
-                      "catalog.priceKinds.form.displayMode.exclude",
-                      "Excluding tax"
+                      "catalog.products.create.variantsBuilder.makeDefault",
+                      "Set as default"
+                    )
+                  ] }),
+                  values.hasVariants && variant.optionValues ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: Object.values(variant.optionValues).join(" / ") }) : null
+                ] }),
+                /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: variant.title,
+                    onChange: (event) => setVariantField(
+                      variant.id,
+                      "title",
+                      event.target.value
                     ),
-                    className: "text-xs text-muted-foreground",
-                    children: kind.displayMode === "including-tax" ? "\u24C9" : "\u24C3"
+                    placeholder: t(
+                      "catalog.products.create.variantsBuilder.titlePlaceholder",
+                      "Variant title"
+                    )
                   }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: kind.currencyCode?.toUpperCase() ?? t(
-                "catalog.products.create.variantsBuilder.currencyMissing",
-                "Currency missing"
-              ) })
-            ] }) }, kind.id)),
-            /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-center", children: t(
-              "catalog.products.create.variantsBuilder.manageInventory",
-              "Managed inventory"
-            ) }),
-            /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-center", children: t(
-              "catalog.products.create.variantsBuilder.allowBackorder",
-              "Allow backorder"
-            ) }),
-            /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-center", children: t(
-              "catalog.products.create.variantsBuilder.inventoryKit",
-              "Has inventory kit"
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: (Array.isArray(values.variants) && values.variants.length ? values.variants : [
-            createVariantDraft(values.taxRateId ?? null, {
-              isDefault: true
-            })
-          ]).map((variant) => /* @__PURE__ */ jsxs("tr", { className: "border-t", children: [
-            /* @__PURE__ */ jsxs("td", { className: "px-3 py-2", children: [
-              /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-1 text-xs", children: [
-                /* @__PURE__ */ jsx(
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: variant.sku,
+                    onChange: (event) => setVariantField(
+                      variant.id,
+                      "sku",
+                      event.target.value
+                    ),
+                    placeholder: t(
+                      "catalog.products.create.variantsBuilder.skuPlaceholder",
+                      "e.g., SKU-001"
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    value: variant.taxRateId || void 0,
+                    onValueChange: (value) => setVariantField(variant.id, "taxRateId", value || null),
+                    disabled: !taxRates.length,
+                    children: [
+                      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(
+                        SelectValue,
+                        {
+                          placeholder: defaultTaxRateLabel ? t(
+                            "catalog.products.create.variantsBuilder.vatOptionDefault",
+                            "Use product tax class ({{label}})"
+                          ).replace("{{label}}", defaultTaxRateLabel) : t(
+                            "catalog.products.create.variantsBuilder.vatOptionNone",
+                            "No tax class"
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(SelectContent, { children: taxRates.map((rate) => /* @__PURE__ */ jsx(SelectItem, { value: rate.id, children: formatTaxRateLabel(rate) }, rate.id)) })
+                    ]
+                  }
+                ) }),
+                priceKinds.map((kind) => /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: kind.currencyCode ?? "\u2014" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "number",
+                      value: variant.prices?.[kind.id]?.amount ?? "",
+                      onChange: (event) => setVariantPrice(
+                        variant.id,
+                        kind.id,
+                        event.target.value
+                      ),
+                      placeholder: "0.00",
+                      min: 0
+                    }
+                  )
+                ] }) }, kind.id)),
+                /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-center", children: /* @__PURE__ */ jsx(
                   "input",
                   {
-                    type: "radio",
-                    name: "defaultVariant",
-                    checked: variant.isDefault,
-                    onChange: () => markDefaultVariant(variant.id)
+                    type: "checkbox",
+                    className: "h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50",
+                    checked: variant.manageInventory,
+                    onChange: (event) => setVariantField(
+                      variant.id,
+                      "manageInventory",
+                      event.target.checked
+                    ),
+                    disabled: true,
+                    title: inventoryDisabledHint
                   }
-                ),
-                variant.isDefault ? t(
-                  "catalog.products.create.variantsBuilder.defaultLabel",
-                  "Default option value"
-                ) : t(
-                  "catalog.products.create.variantsBuilder.makeDefault",
-                  "Set as default"
-                )
-              ] }),
-              values.hasVariants && variant.optionValues ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: Object.values(variant.optionValues).join(" / ") }) : null
-            ] }),
-            /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: variant.title,
-                onChange: (event) => setVariantField(
-                  variant.id,
-                  "title",
-                  event.target.value
-                ),
-                placeholder: t(
-                  "catalog.products.create.variantsBuilder.titlePlaceholder",
-                  "Variant title"
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: variant.sku,
-                onChange: (event) => setVariantField(
-                  variant.id,
-                  "sku",
-                  event.target.value
-                ),
-                placeholder: t(
-                  "catalog.products.create.variantsBuilder.skuPlaceholder",
-                  "e.g., SKU-001"
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs(
-              "select",
-              {
-                className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                value: variant.taxRateId ?? "",
-                onChange: (event) => setVariantField(
-                  variant.id,
-                  "taxRateId",
-                  event.target.value || null
-                ),
-                disabled: !taxRates.length,
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: defaultTaxRateLabel ? t(
-                    "catalog.products.create.variantsBuilder.vatOptionDefault",
-                    "Use product tax class ({{label}})"
-                  ).replace("{{label}}", defaultTaxRateLabel) : t(
-                    "catalog.products.create.variantsBuilder.vatOptionNone",
-                    "No tax class"
-                  ) }),
-                  taxRates.map((rate) => /* @__PURE__ */ jsx("option", { value: rate.id, children: formatTaxRateLabel(rate) }, rate.id))
-                ]
-              }
-            ) }),
-            priceKinds.map((kind) => /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: kind.currencyCode ?? "\u2014" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "number",
-                  className: "w-full rounded-md border px-2 py-1",
-                  value: variant.prices?.[kind.id]?.amount ?? "",
-                  onChange: (event) => setVariantPrice(
-                    variant.id,
-                    kind.id,
-                    event.target.value
-                  ),
-                  placeholder: "0.00",
-                  min: 0
-                }
-              )
-            ] }) }, kind.id)),
-            /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-center", children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                className: "h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50",
-                checked: variant.manageInventory,
-                onChange: (event) => setVariantField(
-                  variant.id,
-                  "manageInventory",
-                  event.target.checked
-                ),
-                disabled: true,
-                title: inventoryDisabledHint
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-center", children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                className: "h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50",
-                checked: variant.allowBackorder,
-                onChange: (event) => setVariantField(
-                  variant.id,
-                  "allowBackorder",
-                  event.target.checked
-                ),
-                disabled: true,
-                title: inventoryDisabledHint
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-center", children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                className: "h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50",
-                checked: variant.hasInventoryKit,
-                onChange: (event) => setVariantField(
-                  variant.id,
-                  "hasInventoryKit",
-                  event.target.checked
-                ),
-                disabled: true,
-                title: inventoryDisabledHint
-              }
-            ) })
-          ] }, variant.id)) })
-        ] }) }),
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-center", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50",
+                    checked: variant.allowBackorder,
+                    onChange: (event) => setVariantField(
+                      variant.id,
+                      "allowBackorder",
+                      event.target.checked
+                    ),
+                    disabled: true,
+                    title: inventoryDisabledHint
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-center", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50",
+                    checked: variant.hasInventoryKit,
+                    onChange: (event) => setVariantField(
+                      variant.id,
+                      "hasInventoryKit",
+                      event.target.checked
+                    ),
+                    disabled: true,
+                    title: inventoryDisabledHint
+                  }
+                ) })
+              ] }, variant.id)) })
+            ] }) })
+          }
+        ),
         !priceKinds.length ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t px-4 py-3 text-sm text-muted-foreground", children: [
           /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
           t(
@@ -1637,13 +1645,12 @@ function ProductMetaSection({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx(Label, { children: t("catalog.products.form.productType", "Product type") }),
-      /* @__PURE__ */ jsx(
-        "select",
+      /* @__PURE__ */ jsxs(
+        Select,
         {
-          className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           value: values.productType || "simple",
-          onChange: (event) => {
-            const nextType = event.target.value;
+          onValueChange: (value) => {
+            const nextType = value;
             setValue("productType", nextType);
             const nextIsConfigurable = isConfigurableProductType(nextType);
             if (nextIsConfigurable && !values.hasVariants) {
@@ -1652,24 +1659,16 @@ function ProductMetaSection({
               setValue("hasVariants", false);
             }
           },
-          children: CATALOG_PRODUCT_TYPES.map((type) => {
-            const isDisabled = type === "bundle" || type === "grouped";
-            return /* @__PURE__ */ jsxs(
-              "option",
-              {
-                value: type,
-                disabled: isDisabled,
-                children: [
-                  t(
-                    `catalog.products.types.${type}`,
-                    type
-                  ),
-                  isDisabled ? ` (${t("common.comingSoon", "Coming soon")})` : ""
-                ]
-              },
-              type
-            );
-          })
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: CATALOG_PRODUCT_TYPES.map((type) => {
+              const isDisabled = type === "bundle" || type === "grouped";
+              return /* @__PURE__ */ jsxs(SelectItem, { value: type, disabled: isDisabled, children: [
+                t(`catalog.products.types.${type}`, type),
+                isDisabled ? ` (${t("common.comingSoon", "Coming soon")})` : ""
+              ] }, type);
+            }) })
+          ]
         }
       ),
       errors.productType ? /* @__PURE__ */ jsx("p", { className: "text-xs text-red-600", children: errors.productType }) : null
@@ -1708,21 +1707,19 @@ function ProductMetaSection({
         )
       ] }),
       /* @__PURE__ */ jsxs(
-        "select",
+        Select,
         {
-          className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          value: values.taxRateId ?? "",
-          onChange: (event) => setValue("taxRateId", event.target.value || null),
+          value: values.taxRateId || void 0,
+          onValueChange: (value) => setValue("taxRateId", value || null),
           disabled: !taxRates.length,
           children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: taxRates.length ? t(
-              "catalog.products.create.taxRates.noneSelected",
-              "No tax class selected"
-            ) : t(
-              "catalog.products.create.taxRates.emptyOption",
-              "No tax classes available"
+            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(
+              SelectValue,
+              {
+                placeholder: taxRates.length ? t("catalog.products.create.taxRates.noneSelected", "No tax class selected") : t("catalog.products.create.taxRates.emptyOption", "No tax classes available")
+              }
             ) }),
-            taxRates.map((rate) => /* @__PURE__ */ jsx("option", { value: rate.id, children: formatTaxRateLabel(rate) }, rate.id))
+            /* @__PURE__ */ jsx(SelectContent, { children: taxRates.map((rate) => /* @__PURE__ */ jsx(SelectItem, { value: rate.id, children: formatTaxRateLabel(rate) }, rate.id)) })
           ]
         }
       ),