@nextblock-cms/ecom 0.20.1 → 0.21.0

package/lib/pages/cms/products/components/VariationsEditor.es.js

@@ -1,408 +1,399 @@
-'use client';
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import F from "next/link";
-import { useState as R, useMemo as E, useEffect as v } from "react";
-import { Badge as D, Button as z, Label as P, Input as U } from "@nextblock-cms/ui";
-import { extractSelectedTermsByAttribute as re, resolveTermValue as L, resolveAttributeName as q, generateVariantDrafts as ne } from "../../../../variation-utils.es.js";
-import { CurrencyPriceFields as oe } from "./CurrencyPriceFields.es.js";
-import { SaleScheduleFields as se } from "./SaleScheduleFields.es.js";
-import { normalizeSalePriceMap as ie, normalizePriceMap as de, convertMinorUnitAmount as I } from "../../../../currency.es.js";
-import { sanitizeVariantDraftsForStoreManagedCurrencies as K, getStoreManagedPriceCurrencyCodes as ce, resolveEditorCurrencyPriceMaps as le } from "../product-price-sync.es.js";
-import { majorUnitAmountToMinor as X, minorUnitAmountToMajor as G } from "@nextblock-cms/utils";
-const O = process.env.NEXT_PUBLIC_R2_BASE_URL || "", Q = process.env.NEXT_PUBLIC_SUPABASE_URL || "", ae = (c) => c.startsWith("http") ? c : O ? `${O.replace(/\/+$/, "")}/${c.replace(/^\/+/, "")}` : Q ? `${Q.replace(/\/+$/, "")}/storage/v1/object/public/media/${c.replace(/^\/+/, "")}` : c;
-function W(c, m = "USD") {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: m
-  }).format(c);
+"use client";
+import { convertMinorUnitAmount as e, normalizePriceMap as t, normalizeSalePriceMap as n } from "../../../../currency.es.js";
+import { extractSelectedTermsByAttribute as r, generateVariantDrafts as i, resolveAttributeName as a, resolveTermValue as o } from "../../../../variation-utils.es.js";
+import { CurrencyPriceFields as s } from "./CurrencyPriceFields.es.js";
+import { SaleScheduleFields as c } from "./SaleScheduleFields.es.js";
+import { getStoreManagedPriceCurrencyCodes as l, resolveEditorCurrencyPriceMaps as u, sanitizeVariantDraftsForStoreManagedCurrencies as d } from "../product-price-sync.es.js";
+import f from "next/link";
+import { useEffect as p, useMemo as m, useState as h } from "react";
+import { majorUnitAmountToMinor as g, minorUnitAmountToMajor as _ } from "@nextblock-cms/utils";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Badge as b, Button as x, Input as S, Label as C } from "@nextblock-cms/ui";
+//#region libs/ecommerce/src/lib/pages/cms/products/components/VariationsEditor.tsx
+var w = process.env.NEXT_PUBLIC_R2_BASE_URL || "", T = process.env.NEXT_PUBLIC_SUPABASE_URL || "", E = (e) => e.startsWith("http") ? e : w ? `${w.replace(/\/+$/, "")}/${e.replace(/^\/+/, "")}` : T ? `${T.replace(/\/+$/, "")}/storage/v1/object/public/media/${e.replace(/^\/+/, "")}` : e;
+function D(e, t = "USD") {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: t
+	}).format(e);
 }
-function me(c) {
-  return Object.entries(c).filter(([, m]) => m.length > 0).map(([m, _]) => ({ attribute_id: m, term_ids: _ }));
+function O(e) {
+	return Object.entries(e).filter(([, e]) => e.length > 0).map(([e, t]) => ({
+		attribute_id: e,
+		term_ids: t
+	}));
 }
-function Ne({
-  globalAttributes: c,
-  currentLanguageCode: m,
-  baseSku: _,
-  basePrice: $,
-  basePrices: M,
-  baseSalePrice: w,
-  baseSalePrices: A,
-  currencies: d,
-  availableVariantImages: x = [],
-  initialVariationAttributes: b,
-  initialVariants: T,
-  onChange: B
-}) {
-  const [g, H] = R(() => b && b.length > 0 ? b.reduce((e, r) => (e[r.attribute_id] = r.term_ids, e), {}) : re(T || [])), [h, f] = R(
-    K(
-      T || [],
-      d
-    )
-  ), y = E(
-    () => c.map((e) => ({
-      attribute_id: e.id,
-      attribute_name: q(e, m),
-      terms: e.terms.filter((r) => (g[e.id] || []).includes(r.id)).map((r) => ({
-        ...r,
-        value: L(r, m)
-      }))
-    })).filter((e) => e.terms.length > 0),
-    [m, c, g]
-  );
-  v(() => {
-    if (y.length === 0) {
-      f([]);
-      return;
-    }
-    f(
-      (e) => K(
-        ne({
-          baseSku: _,
-          basePrice: $,
-          basePrices: de(M),
-          baseSalePrice: w,
-          baseSalePrices: ie(A),
-          selectedAttributes: y,
-          previousVariants: e
-        }),
-        d
-      )
-    );
-  }, [$, M, w, A, _, d, y]), v(() => {
-    B({
-      variationAttributes: me(g),
-      variants: h
-    });
-  }, [B, g, h]);
-  const J = h.reduce(
-    (e, r) => e + (r.stock_quantity || 0),
-    0
-  ), k = d.find((e) => e.is_default) ?? d[0], N = E(
-    () => ce(d),
-    [d]
-  ), Y = (e, r) => {
-    H((t) => {
-      const n = new Set(t[e] || []);
-      return n.has(r) ? n.delete(r) : n.add(r), {
-        ...t,
-        [e]: [...n]
-      };
-    });
-  }, C = (e, r, t) => {
-    f(
-      (n) => n.map((s) => {
-        if (s.combination_key !== e)
-          return s;
-        if (r === "sku")
-          return {
-            ...s,
-            sku: t
-          };
-        if (r === "upc")
-          return {
-            ...s,
-            upc: t
-          };
-        if (r === "sale_price" && t === "")
-          return {
-            ...s,
-            sale_price: null
-          };
-        if (r === "prices" || r === "sale_prices")
-          return s;
-        const l = t === "" ? 0 : Number(t);
-        return {
-          ...s,
-          [r]: Number.isFinite(l) ? l : 0
-        };
-      })
-    );
-  }, Z = (e, r, t) => {
-    f(
-      (n) => n.map(
-        (s) => s.combination_key === e ? { ...s, [r]: t } : s
-      )
-    );
-  }, V = (e, r, t, n) => {
-    const s = d.find((l) => l.is_default) ?? d[0];
-    f(
-      (l) => l.map((p) => {
-        if (p.combination_key !== e)
-          return p;
-        const u = {
-          ...t === "prices" ? p.prices : p.sale_prices,
-          [r]: n
-        };
-        return {
-          ...p,
-          [t]: u,
-          ...r === s?.code ? t === "prices" ? { price: n ?? 0 } : { sale_price: n } : {}
-        };
-      })
-    );
-  }, ee = (e) => {
-    const r = d.find((n) => n.is_default) ?? d[0], t = new Set(N);
-    r && f(
-      (n) => n.map((s) => {
-        if (s.combination_key !== e)
-          return s;
-        const l = d.reduce((u, a) => {
-          if (a.code !== r.code && t.has(a.code))
-            return u;
-          const S = I({
-            amount: X(s.price, r.code),
-            fromCurrencyCode: r.code,
-            toCurrencyCode: a.code,
-            currencies: d,
-            applyRounding: !0
-          });
-          return u[a.code] = G(S, a.code), u;
-        }, {}), p = d.reduce(
-          (u, a) => {
-            if (a.code !== r.code && t.has(a.code))
-              return u;
-            if (typeof s.sale_price != "number")
-              return u[a.code] = null, u;
-            const S = I({
-              amount: X(s.sale_price, r.code),
-              fromCurrencyCode: r.code,
-              toCurrencyCode: a.code,
-              currencies: d,
-              applyRounding: !0
-            });
-            return u[a.code] = G(S, a.code), u;
-          },
-          {}
-        );
-        return {
-          ...s,
-          prices: l,
-          sale_prices: p
-        };
-      })
-    );
-  }, te = (e, r) => {
-    const t = x.find((l) => l.media_id === r);
-    if (!t)
-      return;
-    const n = t.file_path, s = ae(n);
-    f(
-      (l) => l.map(
-        (p) => p.combination_key === e ? {
-          ...p,
-          main_media_id: t.media_id,
-          main_image_url: s
-        } : p
-      )
-    );
-  }, j = (e) => {
-    f(
-      (r) => r.map(
-        (t) => t.combination_key === e ? {
-          ...t,
-          main_media_id: null,
-          main_image_url: null
-        } : t
-      )
-    );
-  };
-  return c.length === 0 ? /* @__PURE__ */ i("div", { className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground", children: [
-    "No global attributes have been created yet. Create them first in",
-    " ",
-    /* @__PURE__ */ o(F, { href: "/cms/products/attributes", className: "font-medium text-primary underline-offset-4 hover:underline", children: "Attribute Management" }),
-    "."
-  ] }) : /* @__PURE__ */ i("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ i("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ o("span", { className: "text-xs uppercase font-bold text-muted-foreground tracking-wider leading-none", children: "Attributes" }),
-          /* @__PURE__ */ i(D, { variant: "outline", className: "text-[10px] px-1.5 h-4", children: [
-            h.length,
-            " variants"
-          ] }),
-          /* @__PURE__ */ i(D, { variant: "secondary", className: "text-[10px] px-1.5 h-4", children: [
-            "Stock: ",
-            J
-          ] })
-        ] }),
-        /* @__PURE__ */ o(z, { asChild: !0, variant: "outline", size: "sm", className: "h-7 text-xs px-3", children: /* @__PURE__ */ o(F, { href: "/cms/products/attributes", children: "Manage" }) })
-      ] }),
-      /* @__PURE__ */ o("div", { className: "grid gap-2 lg:grid-cols-2", children: c.map((e) => {
-        const r = g[e.id] || [];
-        return /* @__PURE__ */ i("div", { className: "flex items-center gap-3 rounded border p-2.5", children: [
-          /* @__PURE__ */ i("div", { className: "shrink-0 w-[100px]", children: [
-            /* @__PURE__ */ o("span", { className: "text-sm font-bold block leading-tight", children: q(e, m) }),
-            /* @__PURE__ */ i("span", { className: "text-[10px] text-muted-foreground leading-none", children: [
-              r.length,
-              " selected"
-            ] })
-          ] }),
-          /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-1.5 flex-1", children: e.terms.map((t) => {
-            const n = r.includes(t.id);
-            return /* @__PURE__ */ o(
-              "button",
-              {
-                type: "button",
-                onClick: () => Y(e.id, t.id),
-                className: `rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${n ? "border-primary bg-primary/10 text-primary" : "border-border bg-background text-foreground hover:border-primary/40"}`,
-                children: L(t, m)
-              },
-              t.id
-            );
-          }) })
-        ] }, e.id);
-      }) })
-    ] }),
-    h.length === 0 ? /* @__PURE__ */ o("div", { className: "rounded border border-dashed p-3 text-xs text-muted-foreground text-center", children: "Select terms above to generate variations." }) : /* @__PURE__ */ o("div", { className: "space-y-2", children: h.map((e) => {
-      const r = le({
-        currencies: d,
-        prices: e.prices || {},
-        salePrices: e.sale_prices || {},
-        fallbackPrice: e.price,
-        fallbackSalePrice: e.sale_price
-      });
-      return /* @__PURE__ */ i("div", { className: "rounded border p-3 space-y-2", children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ o("span", { className: "text-sm font-bold", children: e.label }),
-            /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: e.selected_options.map((t) => `${t.attribute_name}: ${t.term_value}`).join(" · ") })
-          ] }),
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ i("span", { children: [
-              "Reg: ",
-              W(e.price, k?.code || "USD")
-            ] }),
-            /* @__PURE__ */ i("span", { children: [
-              "Sale:",
-              " ",
-              e.sale_price !== null && e.sale_price !== void 0 ? W(e.sale_price, k?.code || "USD") : "—"
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ i("div", { className: "grid grid-cols-3 gap-2.5", children: [
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ o(P, { htmlFor: `variant-sku-${e.combination_key}`, className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0", children: "SKU" }),
-            /* @__PURE__ */ o(
-              U,
-              {
-                id: `variant-sku-${e.combination_key}`,
-                value: e.sku,
-                onChange: (t) => C(e.combination_key, "sku", t.target.value),
-                placeholder: "SKU",
-                className: "h-8 text-sm font-mono"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ o(P, { htmlFor: `variant-upc-${e.combination_key}`, className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0", children: "UPC" }),
-            /* @__PURE__ */ o(
-              U,
-              {
-                id: `variant-upc-${e.combination_key}`,
-                value: e.upc ?? "",
-                onChange: (t) => C(e.combination_key, "upc", t.target.value),
-                placeholder: "—",
-                className: "h-8 text-sm font-mono"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ o(P, { htmlFor: `variant-stock-${e.combination_key}`, className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0", children: "Qty" }),
-            /* @__PURE__ */ o(
-              U,
-              {
-                id: `variant-stock-${e.combination_key}`,
-                type: "number",
-                min: "0",
-                value: e.stock_quantity,
-                onChange: (t) => C(
-                  e.combination_key,
-                  "stock_quantity",
-                  t.target.value
-                ),
-                className: "h-8 text-sm font-mono w-20"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ o(
-          oe,
-          {
-            idPrefix: `variant-${e.combination_key}`,
-            currencies: d,
-            prices: r.prices,
-            salePrices: r.salePrices,
-            managedCurrencyCodes: N,
-            onPriceChange: (t, n) => V(
-              e.combination_key,
-              t,
-              "prices",
-              n
-            ),
-            onSalePriceChange: (t, n) => V(
-              e.combination_key,
-              t,
-              "sale_prices",
-              n
-            ),
-            onAutoFill: () => ee(e.combination_key),
-            helperText: N.length > 0 ? `Store-managed currencies derive from ${k?.code || "the base currency"}.` : void 0,
-            trailing: /* @__PURE__ */ o(
-              se,
-              {
-                idPrefix: `variant-${e.combination_key}`,
-                startAt: e.sale_start_at,
-                endAt: e.sale_end_at,
-                onChange: (t, n) => Z(e.combination_key, t, n),
-                bare: !0
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-3 pt-1.5 border-t border-muted/30", children: [
-          e.main_image_url && /* @__PURE__ */ o("div", { className: "h-9 w-9 overflow-hidden rounded border bg-background shrink-0", children: /* @__PURE__ */ o(
-            "img",
-            {
-              src: e.main_image_url,
-              alt: `${e.label} image`,
-              className: "h-full w-full object-cover"
-            }
-          ) }),
-          /* @__PURE__ */ o("span", { className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0", children: "Image" }),
-          x.length > 0 ? /* @__PURE__ */ i(
-            "select",
-            {
-              className: "flex h-8 rounded-md border border-input bg-background px-2 py-1 text-sm min-w-[180px]",
-              value: e.main_media_id ?? "",
-              onChange: (t) => {
-                if (!t.target.value) {
-                  j(e.combination_key);
-                  return;
-                }
-                te(e.combination_key, t.target.value);
-              },
-              children: [
-                /* @__PURE__ */ o("option", { value: "", children: "Use parent image" }),
-                x.map((t, n) => /* @__PURE__ */ o("option", { value: t.media_id, children: t.alt?.trim() || `Gallery image ${n + 1}` }, t.media_id))
-              ]
-            }
-          ) : /* @__PURE__ */ o("span", { className: "text-xs text-muted-foreground", children: "Add gallery images first." }),
-          e.main_media_id && /* @__PURE__ */ o(
-            z,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              className: "h-7 text-xs px-2 text-muted-foreground hover:text-destructive",
-              onClick: () => j(e.combination_key),
-              children: "Remove"
-            }
-          )
-        ] })
-      ] }, e.combination_key);
-    }) })
-  ] });
+function k({ globalAttributes: w, currentLanguageCode: T, baseSku: k, basePrice: A, basePrices: j, baseSalePrice: M, baseSalePrices: N, currencies: P, availableVariantImages: F = [], initialVariationAttributes: I, initialVariants: L, onChange: R }) {
+	let [z, B] = h(() => I && I.length > 0 ? I.reduce((e, t) => (e[t.attribute_id] = t.term_ids, e), {}) : r(L || [])), [V, H] = h(d(L || [], P)), U = m(() => w.map((e) => ({
+		attribute_id: e.id,
+		attribute_name: a(e, T),
+		terms: e.terms.filter((t) => (z[e.id] || []).includes(t.id)).map((e) => ({
+			...e,
+			value: o(e, T)
+		}))
+	})).filter((e) => e.terms.length > 0), [
+		T,
+		w,
+		z
+	]);
+	p(() => {
+		if (U.length === 0) {
+			H([]);
+			return;
+		}
+		H((e) => d(i({
+			baseSku: k,
+			basePrice: A,
+			basePrices: t(j),
+			baseSalePrice: M,
+			baseSalePrices: n(N),
+			selectedAttributes: U,
+			previousVariants: e
+		}), P));
+	}, [
+		A,
+		j,
+		M,
+		N,
+		k,
+		P,
+		U
+	]), p(() => {
+		R({
+			variationAttributes: O(z),
+			variants: V
+		});
+	}, [
+		R,
+		z,
+		V
+	]);
+	let W = V.reduce((e, t) => e + (t.stock_quantity || 0), 0), G = P.find((e) => e.is_default) ?? P[0], K = m(() => l(P), [P]), q = (e, t) => {
+		B((n) => {
+			let r = new Set(n[e] || []);
+			return r.has(t) ? r.delete(t) : r.add(t), {
+				...n,
+				[e]: [...r]
+			};
+		});
+	}, J = (e, t, n) => {
+		H((r) => r.map((r) => {
+			if (r.combination_key !== e) return r;
+			if (t === "sku") return {
+				...r,
+				sku: n
+			};
+			if (t === "upc") return {
+				...r,
+				upc: n
+			};
+			if (t === "sale_price" && n === "") return {
+				...r,
+				sale_price: null
+			};
+			if (t === "prices" || t === "sale_prices") return r;
+			let i = n === "" ? 0 : Number(n);
+			return {
+				...r,
+				[t]: Number.isFinite(i) ? i : 0
+			};
+		}));
+	}, Y = (e, t, n) => {
+		H((r) => r.map((r) => r.combination_key === e ? {
+			...r,
+			[t]: n
+		} : r));
+	}, X = (e, t, n, r) => {
+		let i = P.find((e) => e.is_default) ?? P[0];
+		H((a) => a.map((a) => {
+			if (a.combination_key !== e) return a;
+			let o = {
+				...n === "prices" ? a.prices : a.sale_prices,
+				[t]: r
+			};
+			return {
+				...a,
+				[n]: o,
+				...t === i?.code ? n === "prices" ? { price: r ?? 0 } : { sale_price: r } : {}
+			};
+		}));
+	}, Z = (t) => {
+		let n = P.find((e) => e.is_default) ?? P[0], r = new Set(K);
+		n && H((i) => i.map((i) => {
+			if (i.combination_key !== t) return i;
+			let a = P.reduce((t, a) => {
+				if (a.code !== n.code && r.has(a.code)) return t;
+				let o = e({
+					amount: g(i.price, n.code),
+					fromCurrencyCode: n.code,
+					toCurrencyCode: a.code,
+					currencies: P,
+					applyRounding: !0
+				});
+				return t[a.code] = _(o, a.code), t;
+			}, {}), o = P.reduce((t, a) => {
+				if (a.code !== n.code && r.has(a.code)) return t;
+				if (typeof i.sale_price != "number") return t[a.code] = null, t;
+				let o = e({
+					amount: g(i.sale_price, n.code),
+					fromCurrencyCode: n.code,
+					toCurrencyCode: a.code,
+					currencies: P,
+					applyRounding: !0
+				});
+				return t[a.code] = _(o, a.code), t;
+			}, {});
+			return {
+				...i,
+				prices: a,
+				sale_prices: o
+			};
+		}));
+	}, Q = (e, t) => {
+		let n = F.find((e) => e.media_id === t);
+		if (!n) return;
+		let r = n.file_path, i = E(r);
+		H((t) => t.map((t) => t.combination_key === e ? {
+			...t,
+			main_media_id: n.media_id,
+			main_image_url: i
+		} : t));
+	}, $ = (e) => {
+		H((t) => t.map((t) => t.combination_key === e ? {
+			...t,
+			main_media_id: null,
+			main_image_url: null
+		} : t));
+	};
+	return w.length === 0 ? /* @__PURE__ */ y("div", {
+		className: "rounded-lg border border-dashed p-6 text-sm text-muted-foreground",
+		children: [
+			"No global attributes have been created yet. Create them first in",
+			" ",
+			/* @__PURE__ */ v(f, {
+				href: "/cms/products/attributes",
+				className: "font-medium text-primary underline-offset-4 hover:underline",
+				children: "Attribute Management"
+			}),
+			"."
+		]
+	}) : /* @__PURE__ */ y("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ y("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ y("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ y("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ v("span", {
+							className: "text-xs uppercase font-bold text-muted-foreground tracking-wider leading-none",
+							children: "Attributes"
+						}),
+						/* @__PURE__ */ y(b, {
+							variant: "outline",
+							className: "text-[10px] px-1.5 h-4",
+							children: [V.length, " variants"]
+						}),
+						/* @__PURE__ */ y(b, {
+							variant: "secondary",
+							className: "text-[10px] px-1.5 h-4",
+							children: ["Stock: ", W]
+						})
+					]
+				}), /* @__PURE__ */ v(x, {
+					asChild: !0,
+					variant: "outline",
+					size: "sm",
+					className: "h-7 text-xs px-3",
+					children: /* @__PURE__ */ v(f, {
+						href: "/cms/products/attributes",
+						children: "Manage"
+					})
+				})]
+			}), /* @__PURE__ */ v("div", {
+				className: "grid gap-2 lg:grid-cols-2",
+				children: w.map((e) => {
+					let t = z[e.id] || [];
+					return /* @__PURE__ */ y("div", {
+						className: "flex items-center gap-3 rounded border p-2.5",
+						children: [/* @__PURE__ */ y("div", {
+							className: "shrink-0 w-[100px]",
+							children: [/* @__PURE__ */ v("span", {
+								className: "text-sm font-bold block leading-tight",
+								children: a(e, T)
+							}), /* @__PURE__ */ y("span", {
+								className: "text-[10px] text-muted-foreground leading-none",
+								children: [t.length, " selected"]
+							})]
+						}), /* @__PURE__ */ v("div", {
+							className: "flex flex-wrap gap-1.5 flex-1",
+							children: e.terms.map((n) => {
+								let r = t.includes(n.id);
+								return /* @__PURE__ */ v("button", {
+									type: "button",
+									onClick: () => q(e.id, n.id),
+									className: `rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${r ? "border-primary bg-primary/10 text-primary" : "border-border bg-background text-foreground hover:border-primary/40"}`,
+									children: o(n, T)
+								}, n.id);
+							})
+						})]
+					}, e.id);
+				})
+			})]
+		}), V.length === 0 ? /* @__PURE__ */ v("div", {
+			className: "rounded border border-dashed p-3 text-xs text-muted-foreground text-center",
+			children: "Select terms above to generate variations."
+		}) : /* @__PURE__ */ v("div", {
+			className: "space-y-2",
+			children: V.map((e) => {
+				let t = u({
+					currencies: P,
+					prices: e.prices || {},
+					salePrices: e.sale_prices || {},
+					fallbackPrice: e.price,
+					fallbackSalePrice: e.sale_price
+				});
+				return /* @__PURE__ */ y("div", {
+					className: "rounded border p-3 space-y-2",
+					children: [
+						/* @__PURE__ */ y("div", {
+							className: "flex items-center justify-between gap-3",
+							children: [/* @__PURE__ */ y("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ v("span", {
+									className: "text-sm font-bold",
+									children: e.label
+								}), /* @__PURE__ */ v("span", {
+									className: "text-xs text-muted-foreground",
+									children: e.selected_options.map((e) => `${e.attribute_name}: ${e.term_value}`).join(" · ")
+								})]
+							}), /* @__PURE__ */ y("div", {
+								className: "flex items-center gap-3 text-xs text-muted-foreground",
+								children: [/* @__PURE__ */ y("span", { children: ["Reg: ", D(e.price, G?.code || "USD")] }), /* @__PURE__ */ y("span", { children: [
+									"Sale:",
+									" ",
+									e.sale_price !== null && e.sale_price !== void 0 ? D(e.sale_price, G?.code || "USD") : "—"
+								] })]
+							})]
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "grid grid-cols-3 gap-2.5",
+							children: [
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ v(C, {
+										htmlFor: `variant-sku-${e.combination_key}`,
+										className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0",
+										children: "SKU"
+									}), /* @__PURE__ */ v(S, {
+										id: `variant-sku-${e.combination_key}`,
+										value: e.sku,
+										onChange: (t) => J(e.combination_key, "sku", t.target.value),
+										placeholder: "SKU",
+										className: "h-8 text-sm font-mono"
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ v(C, {
+										htmlFor: `variant-upc-${e.combination_key}`,
+										className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0",
+										children: "UPC"
+									}), /* @__PURE__ */ v(S, {
+										id: `variant-upc-${e.combination_key}`,
+										value: e.upc ?? "",
+										onChange: (t) => J(e.combination_key, "upc", t.target.value),
+										placeholder: "—",
+										className: "h-8 text-sm font-mono"
+									})]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ v(C, {
+										htmlFor: `variant-stock-${e.combination_key}`,
+										className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0",
+										children: "Qty"
+									}), /* @__PURE__ */ v(S, {
+										id: `variant-stock-${e.combination_key}`,
+										type: "number",
+										min: "0",
+										value: e.stock_quantity,
+										onChange: (t) => J(e.combination_key, "stock_quantity", t.target.value),
+										className: "h-8 text-sm font-mono w-20"
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ v(s, {
+							idPrefix: `variant-${e.combination_key}`,
+							currencies: P,
+							prices: t.prices,
+							salePrices: t.salePrices,
+							managedCurrencyCodes: K,
+							onPriceChange: (t, n) => X(e.combination_key, t, "prices", n),
+							onSalePriceChange: (t, n) => X(e.combination_key, t, "sale_prices", n),
+							onAutoFill: () => Z(e.combination_key),
+							helperText: K.length > 0 ? `Store-managed currencies derive from ${G?.code || "the base currency"}.` : void 0,
+							trailing: /* @__PURE__ */ v(c, {
+								idPrefix: `variant-${e.combination_key}`,
+								startAt: e.sale_start_at,
+								endAt: e.sale_end_at,
+								onChange: (t, n) => Y(e.combination_key, t, n),
+								bare: !0
+							})
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "flex items-center gap-3 pt-1.5 border-t border-muted/30",
+							children: [
+								e.main_image_url && /* @__PURE__ */ v("div", {
+									className: "h-9 w-9 overflow-hidden rounded border bg-background shrink-0",
+									children: /* @__PURE__ */ v("img", {
+										src: e.main_image_url,
+										alt: `${e.label} image`,
+										className: "h-full w-full object-cover"
+									})
+								}),
+								/* @__PURE__ */ v("span", {
+									className: "text-xs uppercase font-bold text-muted-foreground tracking-wider shrink-0",
+									children: "Image"
+								}),
+								F.length > 0 ? /* @__PURE__ */ y("select", {
+									className: "flex h-8 rounded-md border border-input bg-background px-2 py-1 text-sm min-w-[180px]",
+									value: e.main_media_id ?? "",
+									onChange: (t) => {
+										if (!t.target.value) {
+											$(e.combination_key);
+											return;
+										}
+										Q(e.combination_key, t.target.value);
+									},
+									children: [/* @__PURE__ */ v("option", {
+										value: "",
+										children: "Use parent image"
+									}), F.map((e, t) => /* @__PURE__ */ v("option", {
+										value: e.media_id,
+										children: e.alt?.trim() || `Gallery image ${t + 1}`
+									}, e.media_id))]
+								}) : /* @__PURE__ */ v("span", {
+									className: "text-xs text-muted-foreground",
+									children: "Add gallery images first."
+								}),
+								e.main_media_id && /* @__PURE__ */ v(x, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									className: "h-7 text-xs px-2 text-muted-foreground hover:text-destructive",
+									onClick: () => $(e.combination_key),
+									children: "Remove"
+								})
+							]
+						})
+					]
+				}, e.combination_key);
+			})
+		})]
+	});
 }
-export {
-  Ne as VariationsEditor
-};
+//#endregion
+export { k as VariationsEditor };