@nextblock-cms/ecom 0.20.1 → 0.21.0

package/lib/components/ProductDetailsLayout.es.js

@@ -1,407 +1,408 @@
-'use client';
-import { jsxs as a, jsx as t, Fragment as te } from "react/jsx-runtime";
-import re, { useState as F, useEffect as A, useMemo as V } from "react";
-import { Download as ae, Package as se, ShieldCheck as ie } from "lucide-react";
-import { Badge as O } from "@nextblock-cms/ui/badge";
-import { Button as ce } from "@nextblock-cms/ui/button";
-import { Label as ne } from "@nextblock-cms/ui/label";
+"use client";
+import { isDigitalProduct as e } from "../types.es.js";
+import { resolveEffectivePriceForCurrency as t } from "../currency.es.js";
+import { useCurrency as n } from "../CurrencyProvider.es.js";
+import { usePriceFormatter as r } from "../use-price-formatter.es.js";
+import { getTrialSummary as i } from "../trials.es.js";
+import { applyVariantSelection as a, chooseInitialVariantSelections as o, findMatchingVariant as s, getAvailableTermIdsForAttribute as c, normalizeSelectionsToAvailableVariants as l, resolveTranslatedText as u } from "../variation-utils.es.js";
+import { AddToCartButton as d } from "./AddToCartButton.es.js";
+import { ProductGallery as f } from "./ProductGallery.es.js";
+import { SimpleTiptapRenderer as ee } from "./SimpleTiptapRenderer.es.js";
+import { ShortDescription as te } from "./ShortDescription.es.js";
+import { SubscriptionSelector as ne } from "./SubscriptionSelector.es.js";
+import { useProduct as re } from "../product-context.es.js";
+import { Badge as p } from "@nextblock-cms/ui/badge";
+import { Button as ie } from "@nextblock-cms/ui/button";
+import m, { useEffect as h, useMemo as g, useState as _ } from "react";
+import { Download as ae, Package as oe, ShieldCheck as se } from "lucide-react";
+import { cn as v, useTranslations as y } from "@nextblock-cms/utils";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Label as ce } from "@nextblock-cms/ui/label";
 import { Separator as le } from "@nextblock-cms/ui/separator";
-import { useTranslations as oe, cn as de } from "@nextblock-cms/utils";
-import { usePriceFormatter as me } from "../use-price-formatter.es.js";
-import { useProduct as ue } from "../product-context.es.js";
-import { ProductGallery as pe } from "./ProductGallery.es.js";
-import { AddToCartButton as he } from "./AddToCartButton.es.js";
-import { SubscriptionSelector as fe } from "./SubscriptionSelector.es.js";
-import { SimpleTiptapRenderer as ge } from "./SimpleTiptapRenderer.es.js";
-import { ShortDescription as xe } from "./ShortDescription.es.js";
-import { chooseInitialVariantSelections as M, normalizeSelectionsToAvailableVariants as ve, findMatchingVariant as _e, resolveTranslatedText as be, getAvailableTermIdsForAttribute as Ne, applyVariantSelection as ye } from "../variation-utils.es.js";
-import { useCurrency as we } from "../CurrencyProvider.es.js";
-import { resolveEffectivePriceForCurrency as J } from "../currency.es.js";
-import { isDigitalProduct as ke } from "../types.es.js";
-import { getTrialSummary as Se } from "../trials.es.js";
-function U(d, v, P, E) {
-  const C = {
-    kind: "product-field",
-    field: v,
-    input: P,
-    label: E
-  }, e = typeof window < "u" ? window.location.origin : process.env.NEXT_PUBLIC_URL || process.env.TARGET_URL || (process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "") || "http://localhost:3000";
-  let g = (typeof window < "u" ? window.location.origin : process.env.NEXT_PUBLIC_URL || process.env.TARGET_URL || (process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "") || "http://localhost:3000").replace(/\/+$/, "");
-  try {
-    (g.startsWith("http://") || g.startsWith("https://")) && (g = new URL(g).hostname);
-  } catch {
-  }
-  const y = process.env.NEXTBLOCK_VERCEL_PROJECT_ID || process.env.VERCEL_PROJECT_ID, m = process.env.NEXTBLOCK_VERCEL_WORKSPACE_ID || process.env.VERCEL_ORG_ID, _ = {
-    origin: g,
-    editUrl: `${e}/cms/products/${d.id}/edit`,
-    data: {
-      parentType: "product",
-      parentId: d.id,
-      slug: d.slug,
-      languageId: d.language_id,
-      draftId: null,
-      target: C
-    }
-  };
-  return y && (_.projectId = y), m && (_.workspaceId = m), {
-    "data-vercel-edit-info": JSON.stringify(_),
-    "data-vercel-edit-target": JSON.stringify(C),
-    "data-nextblock-visual-edit": `product:${v}`
-  };
+//#region libs/ecommerce/src/lib/components/ProductDetailsLayout.tsx
+function C(e, t, n, r) {
+	let i = {
+		kind: "product-field",
+		field: t,
+		input: n,
+		label: r
+	}, a = typeof window < "u" ? window.location.origin : process.env.NEXT_PUBLIC_URL || process.env.TARGET_URL || (process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "") || "http://localhost:3000", o = (typeof window < "u" ? window.location.origin : process.env.NEXT_PUBLIC_URL || process.env.TARGET_URL || (process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "") || "http://localhost:3000").replace(/\/+$/, "");
+	try {
+		(o.startsWith("http://") || o.startsWith("https://")) && (o = new URL(o).hostname);
+	} catch {}
+	let s = process.env.NEXTBLOCK_VERCEL_PROJECT_ID || process.env.VERCEL_PROJECT_ID, c = process.env.NEXTBLOCK_VERCEL_WORKSPACE_ID || process.env.VERCEL_ORG_ID, l = {
+		origin: o,
+		editUrl: `${a}/cms/products/${e.id}/edit`,
+		data: {
+			parentType: "product",
+			parentId: e.id,
+			slug: e.slug,
+			languageId: e.language_id,
+			draftId: null,
+			target: i
+		}
+	};
+	return s && (l.projectId = s), c && (l.workspaceId = c), {
+		"data-vercel-edit-info": JSON.stringify(l),
+		"data-vercel-edit-target": JSON.stringify(i),
+		"data-nextblock-visual-edit": `product:${t}`
+	};
 }
-const Ke = ({
-  visualEditingEnabled: d = !1,
-  descriptionNode: v,
-  reviewsNode: P,
-  canPurchase: E = !0,
-  purchaseFallbackNode: C
-}) => {
-  const e = ue(), { t: n, lang: g } = oe(), y = me(), { activeCurrencyCode: m, currencies: _ } = we(), G = d ? U(
-    e,
-    "title",
-    "plain-text",
-    "Product title"
-  ) : void 0, K = d ? U(
-    e,
-    "short_description",
-    "plain-text",
-    "Short description"
-  ) : void 0, X = d ? U(
-    e,
-    "description_json",
-    "tiptap",
-    "Product description"
-  ) : void 0, o = (s, l, p) => {
-    const h = n(s, p);
-    return h === s ? l : h;
-  }, R = e.images && e.images.length > 0 ? e.images : e.image_url ? [{ url: e.image_url, alt: e.title }] : [], b = e.custom_props?.provider === "freemius" || ke(e), j = Se(e, n), c = !b && !!(e.has_variants && e.attributes?.length && e.variants?.length), x = e.attributes || [], u = e.variants || [], [w, T] = F(() => M(x, u)), [q, I] = F(1);
-  A(() => {
-    I(1);
-  }, [e.id]), A(() => {
-    c && T(M(x, u));
-  }, [x, c, e.id, u]);
-  const N = V(() => c ? ve(
-    x,
-    u,
-    w
-  ) : w, [x, c, w, u]);
-  A(() => {
-    JSON.stringify(N) !== JSON.stringify(w) && T(N);
-  }, [N, w]);
-  const r = V(() => c ? _e(u, N) : null, [c, N, u]), $ = J({
-    prices: e.prices,
-    salePrices: e.sale_prices,
-    fallbackPrice: e.price,
-    fallbackSalePrice: e.sale_price,
-    saleStartAt: e.sale_start_at,
-    saleEndAt: e.sale_end_at,
-    scheduledPrice: e.scheduled_price,
-    scheduledPrices: e.scheduled_prices,
-    scheduledPriceAt: e.scheduled_price_at,
-    currencyCode: m,
-    currencies: _
-  }), B = c && r ? J({
-    prices: r.prices,
-    salePrices: r.sale_prices,
-    fallbackPrice: r.price,
-    fallbackSalePrice: r.sale_price,
-    saleStartAt: r.sale_start_at,
-    saleEndAt: r.sale_end_at,
-    scheduledPrice: r.scheduled_price,
-    scheduledPrices: r.scheduled_prices,
-    scheduledPriceAt: r.scheduled_price_at,
-    currencyCode: m,
-    currencies: _
-  }) : null, k = B?.price ?? $.price, S = B?.sale_price ?? $.sale_price, i = c ? r?.stock_quantity ?? 0 : e.stock ?? null, L = i === null || i > 0, f = i === null ? q : Math.max(1, Math.min(q, Math.max(i, 1))), z = V(() => {
-    if (!r?.image_url)
-      return R;
-    const s = {
-      url: r.image_url,
-      alt: `${e.title} ${r.label}`
-    }, l = R.filter(
-      (p) => p.url !== r.image_url
-    );
-    return [s, ...l];
-  }, [R, e.title, r]), Q = typeof S == "number" && k > 0 ? Math.round(
-    (k - S) / k * 100
-  ) : 0, W = c && r ? {
-    ...e,
-    sku: r.sku,
-    price: r.price,
-    prices: r.prices,
-    sale_price: typeof r.sale_price == "number" ? r.sale_price : null,
-    sale_prices: r.sale_prices,
-    // The variant's own sale window and scheduled price, not the parent product's.
-    sale_start_at: r.sale_start_at,
-    sale_end_at: r.sale_end_at,
-    scheduled_price: r.scheduled_price,
-    scheduled_prices: r.scheduled_prices,
-    scheduled_price_at: r.scheduled_price_at,
-    image_url: r.image_url || e.image_url,
-    stock: r.stock_quantity,
-    variant_id: r.id,
-    variant_label: r.label,
-    selected_options: r.selected_options,
-    currency_code: m
-  } : {
-    ...e,
-    currency_code: m
-  }, H = (s, l) => {
-    T(
-      (p) => ye(x, u, p, s, l)
-    );
-  }, Y = i === null ? o("ecommerce.in_stock_untracked", "In stock") : o("ecommerce.in_stock", `${i} in stock`, {
-    count: String(i)
-  }), D = o(
-    "ecommerce.out_of_stock",
-    "Out of stock"
-  ), Z = o(
-    "ecommerce.select_options",
-    "Select Options"
-  ), ee = o(
-    "ecommerce.variant_selection_required",
-    "Select one term from every dropdown to resolve a variation."
-  );
-  return /* @__PURE__ */ a("div", { className: "w-full animate-in fade-in slide-in-from-bottom-4 duration-700 ease-out", children: [
-    /* @__PURE__ */ t("div", { className: "container mx-auto px-4 md:px-6 py-12", children: /* @__PURE__ */ a("div", { className: "grid gap-12 lg:grid-cols-[2fr_3fr] items-start", children: [
-      /* @__PURE__ */ t("div", { className: "w-full max-w-2xl mx-auto lg:max-w-none", children: /* @__PURE__ */ t(pe, { images: z, className: "w-full" }) }),
-      /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 pb-2 max-w-xl mx-auto lg:mx-0 lg:max-w-none", children: [
-        /* @__PURE__ */ t("div", { className: "space-y-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ t(
-            "h1",
-            {
-              className: "text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-foreground leading-[1.1] lg:mt-0",
-              ...G,
-              children: e.title
-            }
-          ),
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mt-2", children: /* @__PURE__ */ a(
-            "a",
-            {
-              href: "#reviews-section",
-              className: "flex items-center gap-1.5 group hover:opacity-85 transition-opacity",
-              children: [
-                /* @__PURE__ */ t("div", { className: "flex items-center text-amber-500", children: Array.from({ length: 5 }).map((s, l) => /* @__PURE__ */ t(
-                  "svg",
-                  {
-                    className: de(
-                      "h-4 w-4 fill-current",
-                      l < Math.round(e.average_rating || 0) ? "text-amber-500" : "text-slate-300 dark:text-slate-700"
-                    ),
-                    viewBox: "0 0 20 20",
-                    fill: "currentColor",
-                    children: /* @__PURE__ */ t("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
-                  },
-                  l
-                )) }),
-                e.total_reviews && e.total_reviews > 0 ? /* @__PURE__ */ a(te, { children: [
-                  /* @__PURE__ */ t("span", { className: "text-sm font-semibold text-slate-700 dark:text-slate-300", children: e.average_rating?.toFixed(1) }),
-                  /* @__PURE__ */ a("span", { className: "text-sm text-muted-foreground underline decoration-dotted group-hover:text-primary", children: [
-                    "(",
-                    e.total_reviews === 1 ? n("reviews.review_count_one", { count: e.total_reviews }) : n("reviews.review_count_other", { count: e.total_reviews }),
-                    ")"
-                  ] })
-                ] }) : /* @__PURE__ */ t("span", { className: "text-xs text-muted-foreground group-hover:text-primary underline decoration-dotted", children: n("reviews.be_the_first") })
-              ]
-            }
-          ) }),
-          e.categories && e.categories.length > 0 && /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-1.5 text-xs font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400", children: e.categories.map((s, l) => {
-            const p = be(
-              s.name,
-              s.name_translations,
-              g
-            );
-            return /* @__PURE__ */ a(re.Fragment, { children: [
-              l > 0 && /* @__PURE__ */ t("span", { className: "text-muted-foreground/30", children: "•" }),
-              /* @__PURE__ */ t("span", { children: p })
-            ] }, s.id);
-          }) }),
-          /* @__PURE__ */ t(
-            "div",
-            {
-              className: "prose prose-neutral dark:prose-invert max-w-none text-muted-foreground leading-relaxed text-left",
-              ...K,
-              children: e.short_description ? /* @__PURE__ */ t(
-                xe,
-                {
-                  value: e.short_description,
-                  className: "text-lg mb-4 leading-relaxed"
-                }
-              ) : d ? /* @__PURE__ */ t("p", { className: "text-lg mb-4 italic text-muted-foreground", children: "Add a short product description." }) : null
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-            typeof S == "number" && /* @__PURE__ */ t(
-              O,
-              {
-                variant: "destructive",
-                className: "px-2.5 py-1 text-xs font-bold uppercase tracking-wide animate-pulse shadow-sm",
-                children: n("ecommerce.sale_badge", {
-                  percent: String(Q)
-                })
-              }
-            ),
-            !b && i !== null && i > 0 && i < 10 && /* @__PURE__ */ t(
-              O,
-              {
-                variant: "outline",
-                className: "text-amber-600 border-amber-200 bg-amber-50",
-                children: n("ecommerce.low_stock", {
-                  count: String(i)
-                })
-              }
-            ),
-            j && /* @__PURE__ */ t(
-              O,
-              {
-                variant: "secondary",
-                className: "border border-emerald-200 bg-emerald-50 text-emerald-800",
-                children: j.label
-              }
-            )
-          ] })
-        ] }) }),
-        /* @__PURE__ */ a("div", { className: "p-5 rounded-2xl bg-card border border-border/80 shadow-md space-y-4", children: [
-          E ? b ? /* @__PURE__ */ t(fe, { product: e }) : /* @__PURE__ */ a("div", { className: "space-y-3.5", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-4", children: [
-              /* @__PURE__ */ a("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ t("span", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-widest", children: o("ecommerce.price", "Price") }),
-                /* @__PURE__ */ a("div", { className: "flex items-baseline gap-2.5", children: [
-                  /* @__PURE__ */ t("span", { className: "text-3xl font-extrabold text-foreground", children: y(
-                    S ?? k,
-                    m
-                  ) }),
-                  typeof S == "number" && /* @__PURE__ */ t("span", { className: "text-lg text-muted-foreground line-through decoration-destructive/20 decoration-1", children: y(k, m) })
-                ] })
-              ] }),
-              !b && (r || !c) && /* @__PURE__ */ a("div", { className: "text-right space-y-1", children: [
-                /* @__PURE__ */ a("span", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-widest block", children: [
-                  !c && e.sku && /* @__PURE__ */ a("span", { className: "mr-2 font-normal lowercase normal-case text-muted-foreground/70", children: [
-                    o("ecommerce.sku", "SKU"),
-                    ": ",
-                    e.sku
-                  ] }),
-                  o("ecommerce.status", "Status")
-                ] }),
-                /* @__PURE__ */ t("div", { className: L ? "text-emerald-600 dark:text-emerald-400 font-semibold text-sm" : "text-destructive font-semibold text-sm", children: L ? Y : D })
-              ] })
-            ] }),
-            c && /* @__PURE__ */ t("div", { className: "space-y-3", children: /* @__PURE__ */ t("div", { className: "grid gap-3 sm:grid-cols-2", children: x.map((s, l) => {
-              const p = Ne(
-                u,
-                s.id,
-                {}
-              );
-              return /* @__PURE__ */ a("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ t(
-                    ne,
-                    {
-                      htmlFor: `attribute-${s.id}`,
-                      className: "text-[11px] font-semibold text-muted-foreground uppercase tracking-wider",
-                      children: s.name
-                    }
-                  ),
-                  l === 0 && r?.sku && /* @__PURE__ */ t("span", { className: "text-[10px] text-muted-foreground font-mono", children: r.sku })
-                ] }),
-                /* @__PURE__ */ t(
-                  "select",
-                  {
-                    id: `attribute-${s.id}`,
-                    className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
-                    value: N[s.id] || "",
-                    onChange: (h) => H(
-                      s.id,
-                      h.target.value
-                    ),
-                    children: s.terms.map((h) => /* @__PURE__ */ t(
-                      "option",
-                      {
-                        value: h.id,
-                        disabled: !p.has(h.id),
-                        children: h.value
-                      },
-                      h.id
-                    ))
-                  }
-                )
-              ] }, s.id);
-            }) }) }),
-            c && !r && /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground italic pt-1", children: ee }),
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-3 pt-1", children: [
-              !b && L && /* @__PURE__ */ a(
-                "div",
-                {
-                  role: "group",
-                  "aria-label": o("ecommerce.quantity", "Quantity"),
-                  className: "flex items-center border rounded-lg h-12 bg-background border-input select-none",
-                  children: [
-                    /* @__PURE__ */ t(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => I(Math.max(1, f - 1)),
-                        "aria-label": o("ecommerce.decrease_quantity", "Decrease quantity"),
-                        className: "px-3 h-full flex items-center justify-center rounded-l-lg text-muted-foreground hover:text-foreground active:scale-95 transition-colors text-lg font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
-                        disabled: f <= 1,
-                        children: /* @__PURE__ */ t("span", { "aria-hidden": "true", children: "-" })
-                      }
-                    ),
-                    /* @__PURE__ */ t("span", { "aria-live": "polite", "aria-atomic": "true", className: "w-8 text-center text-sm font-semibold tabular-nums", children: f }),
-                    /* @__PURE__ */ t(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => I(
-                          i !== null && f >= i ? f : f + 1
-                        ),
-                        "aria-label": o("ecommerce.increase_quantity", "Increase quantity"),
-                        className: "px-3 h-full flex items-center justify-center rounded-r-lg text-muted-foreground hover:text-foreground active:scale-95 transition-colors text-lg font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
-                        disabled: i !== null && f >= i,
-                        children: /* @__PURE__ */ t("span", { "aria-hidden": "true", children: "+" })
-                      }
-                    )
-                  ]
-                }
-              ),
-              c && (!r || !L) ? /* @__PURE__ */ t(
-                ce,
-                {
-                  disabled: !0,
-                  className: "flex-1 h-12 text-md font-bold shadow-md",
-                  children: r ? D : Z
-                }
-              ) : /* @__PURE__ */ t(
-                he,
-                {
-                  product: W,
-                  quantity: f,
-                  className: "flex-1 h-12 text-base font-bold shadow-md transition-shadow hover:shadow-lg active:scale-[0.98]"
-                }
-              )
-            ] })
-          ] }) : C,
-          /* @__PURE__ */ t(le, { className: "opacity-60 my-0.5" }),
-          /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-4 text-center text-[11px] font-medium text-muted-foreground pt-1", children: [
-            /* @__PURE__ */ t("div", { className: "flex items-center justify-center gap-2", children: b ? /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-              /* @__PURE__ */ t(ae, { className: "h-3.5 w-3.5" }),
-              n("ecommerce.instant_digital_delivery")
-            ] }) : /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-              /* @__PURE__ */ t(se, { className: "h-3.5 w-3.5" }),
-              n("ecommerce.free_shipping")
-            ] }) }),
-            /* @__PURE__ */ t("div", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
-              /* @__PURE__ */ t(ie, { className: "h-3.5 w-3.5" }),
-              n("ecommerce.secure_checkout")
-            ] }) })
-          ] })
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ t("div", { className: "min-w-0 w-full", ...v ? void 0 : X, children: v || (e.description_json ? /* @__PURE__ */ t("div", { className: "container mx-auto px-4 md:px-6 pb-12 prose prose-neutral dark:prose-invert max-w-none leading-relaxed", children: /* @__PURE__ */ t(ge, { content: e.description_json }) }) : /* @__PURE__ */ t("div", { className: "container mx-auto px-4 md:px-6 pb-12", children: /* @__PURE__ */ t("p", { className: "italic text-sm text-muted-foreground", children: n("ecommerce.no_description") }) })) }),
-    P && /* @__PURE__ */ t("div", { id: "reviews-section", className: "border-t border-border mt-12 pt-12", children: P })
-  ] });
-};
-export {
-  Ke as ProductDetailsLayout
+var w = ({ visualEditingEnabled: w = !1, descriptionNode: T, reviewsNode: E, canPurchase: ue = !0, purchaseFallbackNode: de }) => {
+	let D = re(), { t: O, lang: fe } = y(), k = r(), { activeCurrencyCode: A, currencies: j } = n(), pe = w ? C(D, "title", "plain-text", "Product title") : void 0, me = w ? C(D, "short_description", "plain-text", "Short description") : void 0, M = w ? C(D, "description_json", "tiptap", "Product description") : void 0, N = (e, t, n) => {
+		let r = O(e, n);
+		return r === e ? t : r;
+	}, P = D.images && D.images.length > 0 ? D.images : D.image_url ? [{
+		url: D.image_url,
+		alt: D.title
+	}] : [], F = D.custom_props?.provider === "freemius" || e(D), I = i(D, O), L = !F && !!(D.has_variants && D.attributes?.length && D.variants?.length), R = D.attributes || [], z = D.variants || [], [B, V] = _(() => o(R, z)), [H, U] = _(1);
+	h(() => {
+		U(1);
+	}, [D.id]), h(() => {
+		L && V(o(R, z));
+	}, [
+		R,
+		L,
+		D.id,
+		z
+	]);
+	let W = g(() => L ? l(R, z, B) : B, [
+		R,
+		L,
+		B,
+		z
+	]);
+	h(() => {
+		JSON.stringify(W) !== JSON.stringify(B) && V(W);
+	}, [W, B]);
+	let G = g(() => L ? s(z, W) : null, [
+		L,
+		W,
+		z
+	]), K = t({
+		prices: D.prices,
+		salePrices: D.sale_prices,
+		fallbackPrice: D.price,
+		fallbackSalePrice: D.sale_price,
+		saleStartAt: D.sale_start_at,
+		saleEndAt: D.sale_end_at,
+		scheduledPrice: D.scheduled_price,
+		scheduledPrices: D.scheduled_prices,
+		scheduledPriceAt: D.scheduled_price_at,
+		currencyCode: A,
+		currencies: j
+	}), q = L && G ? t({
+		prices: G.prices,
+		salePrices: G.sale_prices,
+		fallbackPrice: G.price,
+		fallbackSalePrice: G.sale_price,
+		saleStartAt: G.sale_start_at,
+		saleEndAt: G.sale_end_at,
+		scheduledPrice: G.scheduled_price,
+		scheduledPrices: G.scheduled_prices,
+		scheduledPriceAt: G.scheduled_price_at,
+		currencyCode: A,
+		currencies: j
+	}) : null, J = q?.price ?? K.price, Y = q?.sale_price ?? K.sale_price, X = L ? G?.stock_quantity ?? 0 : D.stock ?? null, Z = X === null || X > 0, Q = X === null ? H : Math.max(1, Math.min(H, Math.max(X, 1))), he = g(() => G?.image_url ? [{
+		url: G.image_url,
+		alt: `${D.title} ${G.label}`
+	}, ...P.filter((e) => e.url !== G.image_url)] : P, [
+		P,
+		D.title,
+		G
+	]), ge = typeof Y == "number" && J > 0 ? Math.round((J - Y) / J * 100) : 0, _e = L && G ? {
+		...D,
+		sku: G.sku,
+		price: G.price,
+		prices: G.prices,
+		sale_price: typeof G.sale_price == "number" ? G.sale_price : null,
+		sale_prices: G.sale_prices,
+		sale_start_at: G.sale_start_at,
+		sale_end_at: G.sale_end_at,
+		scheduled_price: G.scheduled_price,
+		scheduled_prices: G.scheduled_prices,
+		scheduled_price_at: G.scheduled_price_at,
+		image_url: G.image_url || D.image_url,
+		stock: G.stock_quantity,
+		variant_id: G.id,
+		variant_label: G.label,
+		selected_options: G.selected_options,
+		currency_code: A
+	} : {
+		...D,
+		currency_code: A
+	}, ve = (e, t) => {
+		V((n) => a(R, z, n, e, t));
+	}, ye = X === null ? N("ecommerce.in_stock_untracked", "In stock") : N("ecommerce.in_stock", `${X} in stock`, { count: String(X) }), $ = N("ecommerce.out_of_stock", "Out of stock"), be = N("ecommerce.select_options", "Select Options"), xe = N("ecommerce.variant_selection_required", "Select one term from every dropdown to resolve a variation.");
+	return /* @__PURE__ */ S("div", {
+		className: "w-full animate-in fade-in slide-in-from-bottom-4 duration-700 ease-out",
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "container mx-auto px-4 md:px-6 py-12",
+				children: /* @__PURE__ */ S("div", {
+					className: "grid gap-12 lg:grid-cols-[2fr_3fr] items-start",
+					children: [/* @__PURE__ */ x("div", {
+						className: "w-full max-w-2xl mx-auto lg:max-w-none",
+						children: /* @__PURE__ */ x(f, {
+							images: he,
+							className: "w-full"
+						})
+					}), /* @__PURE__ */ S("div", {
+						className: "flex flex-col gap-4 pb-2 max-w-xl mx-auto lg:mx-0 lg:max-w-none",
+						children: [/* @__PURE__ */ x("div", {
+							className: "space-y-6",
+							children: /* @__PURE__ */ S("div", {
+								className: "space-y-4",
+								children: [
+									/* @__PURE__ */ x("h1", {
+										className: "text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-foreground leading-[1.1] lg:mt-0",
+										...pe,
+										children: D.title
+									}),
+									/* @__PURE__ */ x("div", {
+										className: "flex items-center gap-2 mt-2",
+										children: /* @__PURE__ */ S("a", {
+											href: "#reviews-section",
+											className: "flex items-center gap-1.5 group hover:opacity-85 transition-opacity",
+											children: [/* @__PURE__ */ x("div", {
+												className: "flex items-center text-amber-500",
+												children: Array.from({ length: 5 }).map((e, t) => /* @__PURE__ */ x("svg", {
+													className: v("h-4 w-4 fill-current", t < Math.round(D.average_rating || 0) ? "text-amber-500" : "text-slate-300 dark:text-slate-700"),
+													viewBox: "0 0 20 20",
+													fill: "currentColor",
+													children: /* @__PURE__ */ x("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+												}, t))
+											}), D.total_reviews && D.total_reviews > 0 ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("span", {
+												className: "text-sm font-semibold text-slate-700 dark:text-slate-300",
+												children: D.average_rating?.toFixed(1)
+											}), /* @__PURE__ */ S("span", {
+												className: "text-sm text-muted-foreground underline decoration-dotted group-hover:text-primary",
+												children: [
+													"(",
+													D.total_reviews === 1 ? O("reviews.review_count_one", { count: D.total_reviews }) : O("reviews.review_count_other", { count: D.total_reviews }),
+													")"
+												]
+											})] }) : /* @__PURE__ */ x("span", {
+												className: "text-xs text-muted-foreground group-hover:text-primary underline decoration-dotted",
+												children: O("reviews.be_the_first")
+											})]
+										})
+									}),
+									D.categories && D.categories.length > 0 && /* @__PURE__ */ x("div", {
+										className: "flex flex-wrap items-center gap-1.5 text-xs font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400",
+										children: D.categories.map((e, t) => {
+											let n = u(e.name, e.name_translations, fe);
+											return /* @__PURE__ */ S(m.Fragment, { children: [t > 0 && /* @__PURE__ */ x("span", {
+												className: "text-muted-foreground/30",
+												children: "•"
+											}), /* @__PURE__ */ x("span", { children: n })] }, e.id);
+										})
+									}),
+									/* @__PURE__ */ x("div", {
+										className: "prose prose-neutral dark:prose-invert max-w-none text-muted-foreground leading-relaxed text-left",
+										...me,
+										children: D.short_description ? /* @__PURE__ */ x(te, {
+											value: D.short_description,
+											className: "text-lg mb-4 leading-relaxed"
+										}) : w ? /* @__PURE__ */ x("p", {
+											className: "text-lg mb-4 italic text-muted-foreground",
+											children: "Add a short product description."
+										}) : null
+									}),
+									/* @__PURE__ */ S("div", {
+										className: "flex items-center gap-3",
+										children: [
+											typeof Y == "number" && /* @__PURE__ */ x(p, {
+												variant: "destructive",
+												className: "px-2.5 py-1 text-xs font-bold uppercase tracking-wide animate-pulse shadow-sm",
+												children: O("ecommerce.sale_badge", { percent: String(ge) })
+											}),
+											!F && X !== null && X > 0 && X < 10 && /* @__PURE__ */ x(p, {
+												variant: "outline",
+												className: "text-amber-600 border-amber-200 bg-amber-50",
+												children: O("ecommerce.low_stock", { count: String(X) })
+											}),
+											I && /* @__PURE__ */ x(p, {
+												variant: "secondary",
+												className: "border border-emerald-200 bg-emerald-50 text-emerald-800",
+												children: I.label
+											})
+										]
+									})
+								]
+							})
+						}), /* @__PURE__ */ S("div", {
+							className: "p-5 rounded-2xl bg-card border border-border/80 shadow-md space-y-4",
+							children: [
+								ue ? F ? /* @__PURE__ */ x(ne, { product: D }) : /* @__PURE__ */ S("div", {
+									className: "space-y-3.5",
+									children: [
+										/* @__PURE__ */ S("div", {
+											className: "flex items-center justify-between gap-4",
+											children: [/* @__PURE__ */ S("div", {
+												className: "space-y-1",
+												children: [/* @__PURE__ */ x("span", {
+													className: "text-[10px] font-bold text-muted-foreground uppercase tracking-widest",
+													children: N("ecommerce.price", "Price")
+												}), /* @__PURE__ */ S("div", {
+													className: "flex items-baseline gap-2.5",
+													children: [/* @__PURE__ */ x("span", {
+														className: "text-3xl font-extrabold text-foreground",
+														children: k(Y ?? J, A)
+													}), typeof Y == "number" && /* @__PURE__ */ x("span", {
+														className: "text-lg text-muted-foreground line-through decoration-destructive/20 decoration-1",
+														children: k(J, A)
+													})]
+												})]
+											}), !F && (G || !L) && /* @__PURE__ */ S("div", {
+												className: "text-right space-y-1",
+												children: [/* @__PURE__ */ S("span", {
+													className: "text-[10px] font-bold text-muted-foreground uppercase tracking-widest block",
+													children: [!L && D.sku && /* @__PURE__ */ S("span", {
+														className: "mr-2 font-normal lowercase normal-case text-muted-foreground/70",
+														children: [
+															N("ecommerce.sku", "SKU"),
+															": ",
+															D.sku
+														]
+													}), N("ecommerce.status", "Status")]
+												}), /* @__PURE__ */ x("div", {
+													className: Z ? "text-emerald-600 dark:text-emerald-400 font-semibold text-sm" : "text-destructive font-semibold text-sm",
+													children: Z ? ye : $
+												})]
+											})]
+										}),
+										L && /* @__PURE__ */ x("div", {
+											className: "space-y-3",
+											children: /* @__PURE__ */ x("div", {
+												className: "grid gap-3 sm:grid-cols-2",
+												children: R.map((e, t) => {
+													let n = c(z, e.id, {});
+													return /* @__PURE__ */ S("div", {
+														className: "space-y-1",
+														children: [/* @__PURE__ */ S("div", {
+															className: "flex items-center justify-between",
+															children: [/* @__PURE__ */ x(ce, {
+																htmlFor: `attribute-${e.id}`,
+																className: "text-[11px] font-semibold text-muted-foreground uppercase tracking-wider",
+																children: e.name
+															}), t === 0 && G?.sku && /* @__PURE__ */ x("span", {
+																className: "text-[10px] text-muted-foreground font-mono",
+																children: G.sku
+															})]
+														}), /* @__PURE__ */ x("select", {
+															id: `attribute-${e.id}`,
+															className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+															value: W[e.id] || "",
+															onChange: (t) => ve(e.id, t.target.value),
+															children: e.terms.map((e) => /* @__PURE__ */ x("option", {
+																value: e.id,
+																disabled: !n.has(e.id),
+																children: e.value
+															}, e.id))
+														})]
+													}, e.id);
+												})
+											})
+										}),
+										L && !G && /* @__PURE__ */ x("p", {
+											className: "text-xs text-muted-foreground italic pt-1",
+											children: xe
+										}),
+										/* @__PURE__ */ S("div", {
+											className: "flex items-center gap-3 pt-1",
+											children: [!F && Z && /* @__PURE__ */ S("div", {
+												role: "group",
+												"aria-label": N("ecommerce.quantity", "Quantity"),
+												className: "flex items-center border rounded-lg h-12 bg-background border-input select-none",
+												children: [
+													/* @__PURE__ */ x("button", {
+														type: "button",
+														onClick: () => U(Math.max(1, Q - 1)),
+														"aria-label": N("ecommerce.decrease_quantity", "Decrease quantity"),
+														className: "px-3 h-full flex items-center justify-center rounded-l-lg text-muted-foreground hover:text-foreground active:scale-95 transition-colors text-lg font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+														disabled: Q <= 1,
+														children: /* @__PURE__ */ x("span", {
+															"aria-hidden": "true",
+															children: "-"
+														})
+													}),
+													/* @__PURE__ */ x("span", {
+														"aria-live": "polite",
+														"aria-atomic": "true",
+														className: "w-8 text-center text-sm font-semibold tabular-nums",
+														children: Q
+													}),
+													/* @__PURE__ */ x("button", {
+														type: "button",
+														onClick: () => U(X !== null && Q >= X ? Q : Q + 1),
+														"aria-label": N("ecommerce.increase_quantity", "Increase quantity"),
+														className: "px-3 h-full flex items-center justify-center rounded-r-lg text-muted-foreground hover:text-foreground active:scale-95 transition-colors text-lg font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+														disabled: X !== null && Q >= X,
+														children: /* @__PURE__ */ x("span", {
+															"aria-hidden": "true",
+															children: "+"
+														})
+													})
+												]
+											}), L && (!G || !Z) ? /* @__PURE__ */ x(ie, {
+												disabled: !0,
+												className: "flex-1 h-12 text-md font-bold shadow-md",
+												children: G ? $ : be
+											}) : /* @__PURE__ */ x(d, {
+												product: _e,
+												quantity: Q,
+												className: "flex-1 h-12 text-base font-bold shadow-md transition-shadow hover:shadow-lg active:scale-[0.98]"
+											})]
+										})
+									]
+								}) : de,
+								/* @__PURE__ */ x(le, { className: "opacity-60 my-0.5" }),
+								/* @__PURE__ */ S("div", {
+									className: "grid grid-cols-2 gap-4 text-center text-[11px] font-medium text-muted-foreground pt-1",
+									children: [/* @__PURE__ */ x("div", {
+										className: "flex items-center justify-center gap-2",
+										children: F ? /* @__PURE__ */ S("span", {
+											className: "inline-flex items-center gap-1.5",
+											children: [/* @__PURE__ */ x(ae, { className: "h-3.5 w-3.5" }), O("ecommerce.instant_digital_delivery")]
+										}) : /* @__PURE__ */ S("span", {
+											className: "inline-flex items-center gap-1.5",
+											children: [/* @__PURE__ */ x(oe, { className: "h-3.5 w-3.5" }), O("ecommerce.free_shipping")]
+										})
+									}), /* @__PURE__ */ x("div", {
+										className: "flex items-center justify-center gap-2",
+										children: /* @__PURE__ */ S("span", {
+											className: "inline-flex items-center gap-1.5",
+											children: [/* @__PURE__ */ x(se, { className: "h-3.5 w-3.5" }), O("ecommerce.secure_checkout")]
+										})
+									})]
+								})
+							]
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "min-w-0 w-full",
+				...T ? void 0 : M,
+				children: T || (D.description_json ? /* @__PURE__ */ x("div", {
+					className: "container mx-auto px-4 md:px-6 pb-12 prose prose-neutral dark:prose-invert max-w-none leading-relaxed",
+					children: /* @__PURE__ */ x(ee, { content: D.description_json })
+				}) : /* @__PURE__ */ x("div", {
+					className: "container mx-auto px-4 md:px-6 pb-12",
+					children: /* @__PURE__ */ x("p", {
+						className: "italic text-sm text-muted-foreground",
+						children: O("ecommerce.no_description")
+					})
+				}))
+			}),
+			E && /* @__PURE__ */ x("div", {
+				id: "reviews-section",
+				className: "border-t border-border mt-12 pt-12",
+				children: E
+			})
+		]
+	});
 };
+//#endregion
+export { w as ProductDetailsLayout };