@salla.sa/twilight-theme-engine 1.0.0-beta.4

package/dist/chunk-RH32IGQD.js

@@ -0,0 +1,372 @@
+import { registry } from './chunk-G7ALL4BC.js';
+import { useMoney, useNumber } from './chunk-GLM3RPCP.js';
+import { useAsset } from './chunk-Z653O7MX.js';
+import { useWishlist } from './chunk-GBWCXUPD.js';
+import { useTranslation } from './chunk-VVRYP6IL.js';
+import { Image } from './chunk-2KF5JJU6.js';
+import { LazyImageModal } from './chunk-3DCZJDDK.js';
+import { useTwilight } from './chunk-BWFBVXT3.js';
+import { lazy, memo, useCallback, useMemo, useState, useEffect, Suspense } from 'react';
+import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SallaSlider } from '@salla.sa/twilight-components-react/slider';
+
+var LazyProductDetails = lazy(
+  () => import('./ProductDetails-KTY4ZSFM.js').then((m) => ({ default: m.ProductDetails }))
+);
+var LazyAddToCartForm = lazy(
+  () => import('./AddToCartForm-HOWNKCKX.js').then((m) => ({ default: m.AddToCartForm }))
+);
+var PRODUCT_CARD_KEY = "product:card";
+var ProductCardContent = memo(function ProductCardContent2({
+  product,
+  layout = "vertical",
+  className = "",
+  withShadow = false,
+  withQuantity = false,
+  withoutAddButton = false,
+  index = 0,
+  imagePriority = false
+}) {
+  const { format } = useMoney();
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const wishlist = useWishlist();
+  const { isPlaceholder } = useAsset();
+  const { format: formatNumber } = useNumber();
+  const isVertical = layout === "vertical";
+  const isHorizontal = layout === "horizontal";
+  const isFullImage = layout === "fullImage";
+  const isMinimal = layout === "minimal";
+  const isSpecial = layout === "special";
+  const productInWishlist = wishlist.has(product.id);
+  const handleWishlistToggle = useCallback(() => {
+    wishlist.toggle(product.id);
+  }, [wishlist, product.id]);
+  const fitImageHeight = store?.settings?.product?.fit_type;
+  const getProductBadge = () => {
+    if (product?.preorder?.label && typeof product.preorder.label === "string") {
+      return /* @__PURE__ */ jsx("div", { className: "s-product-card-promotion-title", children: product.preorder.label });
+    }
+    if (product.promotion_title) {
+      return /* @__PURE__ */ jsx("div", { className: "s-product-card-promotion-title", children: product.promotion_title });
+    }
+    if (withQuantity && product?.quantity) {
+      const formattedQty = formatNumber(product.quantity);
+      return /* @__PURE__ */ jsxs("div", { className: "s-product-card-quantity", children: [
+        t("pages.products.remained", "Remained"),
+        " ",
+        formattedQty
+      ] });
+    }
+    if (withQuantity && product?.is_out_of_stock) {
+      return /* @__PURE__ */ jsx("div", { className: "s-product-card-out-badge", children: t("pages.products.out_of_stock", "Out of Stock") });
+    }
+    return null;
+  };
+  const getProductPrice = () => {
+    if (product.is_on_sale && product.sale_price) {
+      return /* @__PURE__ */ jsxs("div", { className: "s-product-card-sale-price", children: [
+        /* @__PURE__ */ jsx("h4", { children: format(product.sale_price) }),
+        product.regular_price && /* @__PURE__ */ jsx("span", { children: format(product.regular_price) })
+      ] });
+    }
+    if (product.starting_price) {
+      return /* @__PURE__ */ jsxs("div", { className: "s-product-card-starting-price", children: [
+        /* @__PURE__ */ jsx("p", { children: t("pages.products.starting_price", "Starting from") }),
+        /* @__PURE__ */ jsx("h4", { children: format(product.starting_price) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("h4", { className: "s-product-card-price", children: format(product.price) });
+  };
+  const cardClassName = [
+    "s-product-card",
+    "s-product-card-entry",
+    isVertical ? "s-product-card-vertical" : "",
+    isHorizontal ? "s-product-card-horizontal" : "",
+    fitImageHeight && isVertical ? `s-product-card-fit-height` : "",
+    isSpecial ? "s-product-card-special" : "",
+    isFullImage ? "s-product-card-full-image" : "",
+    isMinimal ? "s-product-card-minimal" : "",
+    product?.donation ? "s-product-card-donation" : "",
+    withShadow ? "s-product-card-shadow" : "",
+    product?.is_out_of_stock ? "s-product-card-out-of-stock" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const isProductPlaceholder = isPlaceholder(product.image?.url);
+  const imageFitClass = isProductPlaceholder ? "contain" : fitImageHeight || "cover";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: `product-card-${product.id}`,
+      className: cardClassName,
+      "data-product-id": product.id,
+      style: {
+        animationDelay: `${index * 100}ms`
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: isFullImage ? "s-product-card-image-full" : "s-product-card-image", children: [
+          /* @__PURE__ */ jsxs("a", { href: product.url, "aria-label": product.image?.alt || product.name, children: [
+            /* @__PURE__ */ jsx(
+              Image,
+              {
+                className: `s-product-card-image-${imageFitClass}`,
+                src: product.image?.url,
+                alt: product.image?.alt ?? product.name,
+                width: 300,
+                height: 300,
+                aspectRatio: "1/1",
+                priority: imagePriority
+              }
+            ),
+            !isFullImage && !isMinimal && getProductBadge()
+          ] }),
+          isFullImage && /* @__PURE__ */ jsx("a", { href: product.url, "aria-label": product.name, className: "s-product-card-overlay" }),
+          !isHorizontal && !isFullImage && /* @__PURE__ */ jsx(
+            SallaButton,
+            {
+              shape: "icon",
+              fill: "outline",
+              color: "light",
+              ariaLabel: t("pages.wishlist.toggle", "Add or remove to wishlist"),
+              className: `s-product-card-wishlist-btn animated ${productInWishlist ? "s-product-card-wishlist-added pulse-anime" : "not-added un-favorited"}`,
+              onClick: handleWishlistToggle,
+              "data-id": product.id,
+              children: /* @__PURE__ */ jsx("i", { className: "sicon-heart" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "s-product-card-content", children: [
+          isSpecial && product?.quantity && /* @__PURE__ */ jsxs("div", { className: "s-product-card-content-pie", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("b", { children: formatNumber(product.quantity) }),
+              t("pages.products.remained", "Remained")
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "-2 -1 36 34",
+                className: "s-product-card-content-pie-svg",
+                children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "15.9155", className: "s-product-card-content-pie-svg-base" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "15.9155", className: "s-product-card-content-pie-svg-bar" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `s-product-card-content-main ${isSpecial ? "s-product-card-content-extra-padding" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("h3", { className: "s-product-card-content-title", children: /* @__PURE__ */ jsx("a", { href: product.url, children: product.name }) }),
+                product.subtitle && !isMinimal && /* @__PURE__ */ jsx("p", { className: "s-product-card-content-subtitle opacity-80", children: product.subtitle })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `s-product-card-content-sub ${isSpecial ? "s-product-card-content-extra-padding" : ""}`,
+              children: [
+                !product?.donation?.can_donate && getProductPrice(),
+                product.rating?.stars && /* @__PURE__ */ jsxs("div", { className: "s-product-card-rating", children: [
+                  /* @__PURE__ */ jsx("i", { className: "sicon-star2 before:text-orange-300" }),
+                  /* @__PURE__ */ jsx("span", { children: product.rating.stars })
+                ] })
+              ]
+            }
+          ),
+          !withoutAddButton && /* @__PURE__ */ jsxs("div", { className: "s-product-card-content-footer gap-2", children: [
+            /* @__PURE__ */ jsx(
+              SallaAddProductButton,
+              {
+                fill: "outline",
+                width: "wide",
+                productId: product.id,
+                productStatus: product.status,
+                productType: product.type,
+                hasPreOrder: product.has_preorder_campaign
+              }
+            ),
+            (isHorizontal || isFullImage) && /* @__PURE__ */ jsx(
+              SallaButton,
+              {
+                shape: "icon",
+                fill: "outline",
+                color: "light",
+                ariaLabel: t("pages.wishlist.toggle", "Add or remove to wishlist"),
+                className: `s-product-card-wishlist-btn animated ${productInWishlist ? "s-product-card-wishlist-added pulse-anime" : "not-added un-favorited"}`,
+                onClick: handleWishlistToggle,
+                "data-id": product.id,
+                children: /* @__PURE__ */ jsx("i", { className: "sicon-heart" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+var ProductCard = memo(function ProductCard2(props) {
+  const Component = useMemo(() => {
+    const hasOverride = registry.getOriginal(PRODUCT_CARD_KEY) !== null;
+    if (hasOverride) {
+      return registry.resolve(PRODUCT_CARD_KEY);
+    }
+    return null;
+  }, []);
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  }
+  return /* @__PURE__ */ jsx(ProductCardContent, { ...props });
+});
+function ProductGallery({ product }) {
+  const { t } = useTranslation();
+  const { theme } = useTwilight();
+  const sliderId = `details-slider-${product.id}`;
+  const objectFit = theme.settings.slider_background_size ?? "cover";
+  const [preview, setPreview] = useState(null);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      const el = document.getElementById(sliderId);
+      if (!el?.parentElement) return;
+      const { parentElement, nextSibling } = el;
+      parentElement.removeChild(el);
+      parentElement.insertBefore(el, nextSibling);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [product.id, sliderId]);
+  const images = product.images && product.images.length > 0 ? product.images : product.image?.url ? [product.image] : [];
+  const hasManyImages = images.length > 1;
+  return /* @__PURE__ */ jsxs("div", { className: "sidebar md:sticky top-24 w-full md:!w-2/4 rtl:ml-8 ltr:mr-8 pb-8 md:pb-16 overflow-hidden shrink-0", children: [
+    /* @__PURE__ */ jsxs(
+      SallaSlider,
+      {
+        id: sliderId,
+        className: "details-slider rounded-md image-slider",
+        type: "thumbs",
+        loop: false,
+        autoHeight: true,
+        listenToThumbnailsOption: true,
+        showThumbsControls: false,
+        sliderConfig: { watchOverflow: true, autoHeight: true },
+        children: [
+          product.promotion_title && /* @__PURE__ */ jsx("div", { className: "promotion-title", children: product.promotion_title }),
+          product.calories && /* @__PURE__ */ jsxs("div", { className: "absolute z-[2] top-4 rtl:left-4 ltr:right-4 bg-white shadow-sm flex flex-col justify-center items-center rounded-full w-20 h-20 md:w-24 md:h-24", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-red-500 text-xl leading-none font-bold", children: product.calories }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: t("pages.products.calories", "Calories") })
+          ] }),
+          /* @__PURE__ */ jsx("div", { slot: "items", children: images.map((image, index) => /* @__PURE__ */ jsx(
+            ImageSlide,
+            {
+              image,
+              product,
+              index,
+              objectFit,
+              onPreview: setPreview
+            },
+            image.id ?? index
+          )) }),
+          hasManyImages && /* @__PURE__ */ jsx("div", { slot: "thumbs", children: images.map((image, index) => /* @__PURE__ */ jsx(ThumbSlide, { image, index }, image.id ?? index)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LazyImageModal,
+      {
+        isOpen: !!preview,
+        onClose: () => setPreview(null),
+        src: preview?.src ?? "",
+        alt: preview?.alt
+      }
+    ) })
+  ] });
+}
+function ImageSlide({
+  image,
+  product,
+  index,
+  objectFit,
+  onPreview
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const isVideo = Boolean(image.video_url);
+  if (image.three_d_image_url) {
+    return /* @__PURE__ */ jsx(
+      "model-viewer",
+      {
+        style: { minHeight: "500px" },
+        className: "swiper-slide model-entry w-full h-full",
+        loading: "lazy",
+        "camera-controls": true,
+        "touch-action": "pan-y",
+        "auto-rotate": true,
+        poster: image.url || void 0,
+        src: image.three_d_image_url,
+        "shadow-intensity": "1",
+        alt: image.alt
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "data-fslightbox": `product_${product.id}`,
+      "data-img-id": image.id,
+      "data-slid-index": index,
+      ...image.video_url ? { "data-video-src": image.video_url } : {},
+      "data-caption": image.alt,
+      "data-infinite": "false",
+      "data-type": image.video_url ? "youtube" : "image",
+      href: image.video_url || image.url,
+      ...isVideo ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      onClick: (event) => {
+        if (isVideo || !image.url) return;
+        event.preventDefault();
+        onPreview({ src: image.url, alt: image.alt || product.name });
+      },
+      "aria-label": product.name,
+      className: `swiper-slide magnify-wrapper homeslider__slide ${image.video_url ? "video-entry" : ""}`,
+      children: /* @__PURE__ */ jsx("div", { className: `w-full ${loaded ? "" : "aspect-square bg-gray-100 animate-pulse"}`, children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          id: String(image.id),
+          src: image.url,
+          alt: image.alt || product.name,
+          className: `h-full w-full object-${objectFit}`,
+          aspectRatio: "1/1",
+          priority: index === 0,
+          noWrapper: true,
+          onLoad: () => setLoaded(true)
+        }
+      ) })
+    }
+  );
+}
+function ThumbSlide({ image, index }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `slide--one-fourth ${image.video_url ? "video-entry" : ""} ${image.three_d_image_url ? "model-entry" : ""}`,
+      "data-caption": image.alt,
+      children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: image.url,
+          alt: image.alt || "",
+          className: "object-cover w-full h-full bg-gray-100 rounded-md overflow-hidden",
+          title: image.alt,
+          priority: index < 5,
+          noWrapper: true
+        }
+      )
+    }
+  );
+}
+
+export { LazyAddToCartForm, LazyProductDetails, ProductCard, ProductGallery };
+//# sourceMappingURL=chunk-RH32IGQD.js.map
+//# sourceMappingURL=chunk-RH32IGQD.js.map

package/dist/chunk-RH32IGQD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/product/lazy.ts","../src/components/product/ProductCard.tsx","../src/components/product/ProductGallery.tsx"],"names":["ProductCardContent","ProductCard","jsxs","jsx"],"mappings":"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","file":"chunk-RH32IGQD.js","sourcesContent":["import { lazy } from 'react';\n\nexport const LazyProductDetails = lazy(() =>\n  import('./ProductDetails').then((m) => ({ default: m.ProductDetails }))\n);\n\nexport const LazyAddToCartForm = lazy(() =>\n  import('./AddToCartForm').then((m) => ({ default: m.AddToCartForm }))\n);\n","import { memo, useCallback, useMemo } from 'react';\nimport { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';\nimport { SallaButton } from '@salla.sa/twilight-components-react/button';\nimport { useMoney } from '../../hooks/useMoney';\nimport { useTranslation } from '../../providers/i18n';\nimport { useTwilight } from '../../providers/TwilightProvider';\nimport { useWishlist } from '../../hooks/useWishlist';\nimport { useAsset } from '../../hooks/useAsset';\nimport { useNumber } from '../../hooks/useNumber';\nimport { registry } from '../ComponentRegistry';\nimport { Image } from '../common';\nimport type { Product } from '../../types';\n\nconst PRODUCT_CARD_KEY = 'product:card';\n\n/** Product card layout variants - mutually exclusive */\nexport type ProductCardLayout = 'vertical' | 'horizontal' | 'fullImage' | 'minimal' | 'special';\n\nexport interface ProductCardProps {\n  product: Product;\n  layout?: ProductCardLayout;\n  className?: string;\n  withShadow?: boolean;\n  withQuantity?: boolean;\n  withoutAddButton?: boolean;\n  index?: number;\n  imagePriority?: boolean;\n}\n\n/**\n * ProductCard - Displays a product in various layouts\n *\n * Layouts:\n * - vertical: Default card with image top, content bottom\n * - horizontal: Side-by-side image and content\n * - fullImage: Full bleed image with overlay content\n * - minimal: Compact version with reduced info\n * - special: Featured card with quantity pie chart\n *\n * Features:\n * - Native lazy loading for images\n * - Product badges (promotion, preorder, quantity, out of stock)\n * - Wishlist toggle button\n * - Price display (sale, starting, regular)\n * - Rating display\n * - Add to cart button via SallaAddProductButton (handles labels internally)\n */\nconst ProductCardContent = memo(function ProductCardContent({\n  product,\n  layout = 'vertical',\n  className = '',\n  withShadow = false,\n  withQuantity = false,\n  withoutAddButton = false,\n  index = 0,\n  imagePriority = false,\n}: ProductCardProps) {\n  const { format } = useMoney();\n  const { t } = useTranslation();\n  const { store } = useTwilight();\n  const wishlist = useWishlist();\n  const { isPlaceholder } = useAsset();\n  const { format: formatNumber } = useNumber();\n\n  // Layout flags\n  const isVertical = layout === 'vertical';\n  const isHorizontal = layout === 'horizontal';\n  const isFullImage = layout === 'fullImage';\n  const isMinimal = layout === 'minimal';\n  const isSpecial = layout === 'special';\n\n  // Wishlist status\n  const productInWishlist = wishlist.has(product.id);\n  const handleWishlistToggle = useCallback(() => {\n    wishlist.toggle(product.id);\n  }, [wishlist, product.id]);\n\n  // Get image fit type from store settings\n  const fitImageHeight = store?.settings?.product?.fit_type;\n\n  // Product badge component\n  const getProductBadge = () => {\n    if (product?.preorder?.label && typeof product.preorder.label === 'string') {\n      return <div className=\"s-product-card-promotion-title\">{product.preorder.label}</div>;\n    }\n    if (product.promotion_title) {\n      return <div className=\"s-product-card-promotion-title\">{product.promotion_title}</div>;\n    }\n    if (withQuantity && product?.quantity) {\n      const formattedQty = formatNumber(product.quantity);\n      return (\n        <div className=\"s-product-card-quantity\">\n          {t('pages.products.remained', 'Remained')} {formattedQty}\n        </div>\n      );\n    }\n    if (withQuantity && product?.is_out_of_stock) {\n      return (\n        <div className=\"s-product-card-out-badge\">\n          {t('pages.products.out_of_stock', 'Out of Stock')}\n        </div>\n      );\n    }\n    return null;\n  };\n\n  // Price display component\n  const getProductPrice = () => {\n    if (product.is_on_sale && product.sale_price) {\n      return (\n        <div className=\"s-product-card-sale-price\">\n          <h4>{format(product.sale_price)}</h4>\n          {product.regular_price && <span>{format(product.regular_price)}</span>}\n        </div>\n      );\n    }\n    if (product.starting_price) {\n      return (\n        <div className=\"s-product-card-starting-price\">\n          <p>{t('pages.products.starting_price', 'Starting from')}</p>\n          <h4>{format(product.starting_price)}</h4>\n        </div>\n      );\n    }\n    return <h4 className=\"s-product-card-price\">{format(product.price)}</h4>;\n  };\n\n  // Build card class names\n  const cardClassName = [\n    's-product-card',\n    's-product-card-entry',\n    isVertical ? 's-product-card-vertical' : '',\n    isHorizontal ? 's-product-card-horizontal' : '',\n    fitImageHeight && isVertical ? `s-product-card-fit-height` : '',\n    isSpecial ? 's-product-card-special' : '',\n    isFullImage ? 's-product-card-full-image' : '',\n    isMinimal ? 's-product-card-minimal' : '',\n    product?.donation ? 's-product-card-donation' : '',\n    withShadow ? 's-product-card-shadow' : '',\n    product?.is_out_of_stock ? 's-product-card-out-of-stock' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Image fit class\n  const isProductPlaceholder = isPlaceholder(product.image?.url);\n  const imageFitClass = isProductPlaceholder ? 'contain' : fitImageHeight || 'cover';\n\n  return (\n    <div\n      id={`product-card-${product.id}`}\n      className={cardClassName}\n      data-product-id={product.id}\n      style={{\n        animationDelay: `${index * 100}ms`,\n      }}\n    >\n      <div className={isFullImage ? 's-product-card-image-full' : 's-product-card-image'}>\n        <a href={product.url} aria-label={product.image?.alt || product.name}>\n          <Image\n            className={`s-product-card-image-${imageFitClass}`}\n            src={product.image?.url}\n            alt={product.image?.alt ?? product.name}\n            width={300}\n            height={300}\n            aspectRatio=\"1/1\"\n            priority={imagePriority}\n          />\n          {!isFullImage && !isMinimal && getProductBadge()}\n        </a>\n        {isFullImage && (\n          <a href={product.url} aria-label={product.name} className=\"s-product-card-overlay\" />\n        )}\n        {!isHorizontal && !isFullImage && (\n          <SallaButton\n            shape=\"icon\"\n            fill=\"outline\"\n            color=\"light\"\n            ariaLabel={t('pages.wishlist.toggle', 'Add or remove to wishlist')}\n            className={`s-product-card-wishlist-btn animated ${productInWishlist ? 's-product-card-wishlist-added pulse-anime' : 'not-added un-favorited'}`}\n            onClick={handleWishlistToggle}\n            data-id={product.id}\n          >\n            <i className=\"sicon-heart\" />\n          </SallaButton>\n        )}\n      </div>\n      <div className=\"s-product-card-content\">\n        {/* Special card: quantity pie */}\n        {isSpecial && product?.quantity && (\n          <div className=\"s-product-card-content-pie\">\n            <span>\n              <b>{formatNumber(product.quantity)}</b>\n              {t('pages.products.remained', 'Remained')}\n            </span>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"-2 -1 36 34\"\n              className=\"s-product-card-content-pie-svg\"\n            >\n              <circle cx=\"16\" cy=\"16\" r=\"15.9155\" className=\"s-product-card-content-pie-svg-base\" />\n              <circle cx=\"16\" cy=\"16\" r=\"15.9155\" className=\"s-product-card-content-pie-svg-bar\" />\n            </svg>\n          </div>\n        )}\n\n        <div\n          className={`s-product-card-content-main ${isSpecial ? 's-product-card-content-extra-padding' : ''}`}\n        >\n          <h3 className=\"s-product-card-content-title\">\n            <a href={product.url}>{product.name}</a>\n          </h3>\n          {product.subtitle && !isMinimal && (\n            <p className=\"s-product-card-content-subtitle opacity-80\">{product.subtitle}</p>\n          )}\n        </div>\n\n        <div\n          className={`s-product-card-content-sub ${isSpecial ? 's-product-card-content-extra-padding' : ''}`}\n        >\n          {!product?.donation?.can_donate && getProductPrice()}\n          {product.rating?.stars && (\n            <div className=\"s-product-card-rating\">\n              <i className=\"sicon-star2 before:text-orange-300\" />\n              <span>{product.rating.stars}</span>\n            </div>\n          )}\n        </div>\n\n        {!withoutAddButton && (\n          <div className=\"s-product-card-content-footer gap-2\">\n            <SallaAddProductButton\n              fill=\"outline\"\n              width=\"wide\"\n              productId={product.id}\n              productStatus={product.status}\n              productType={product.type}\n              hasPreOrder={product.has_preorder_campaign}\n            />\n            {(isHorizontal || isFullImage) && (\n              <SallaButton\n                shape=\"icon\"\n                fill=\"outline\"\n                color=\"light\"\n                ariaLabel={t('pages.wishlist.toggle', 'Add or remove to wishlist')}\n                className={`s-product-card-wishlist-btn animated ${productInWishlist ? 's-product-card-wishlist-added pulse-anime' : 'not-added un-favorited'}`}\n                onClick={handleWishlistToggle}\n                data-id={product.id}\n              >\n                <i className=\"sicon-heart\" />\n              </SallaButton>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport const ProductCard = memo(function ProductCard(props: ProductCardProps) {\n  const Component = useMemo(() => {\n    const hasOverride = registry.getOriginal<ProductCardProps>(PRODUCT_CARD_KEY) !== null;\n    if (hasOverride) {\n      return registry.resolve<ProductCardProps>(PRODUCT_CARD_KEY);\n    }\n    return null;\n  }, []);\n\n  if (Component) {\n    return <Component {...props} />;\n  }\n\n  return <ProductCardContent {...props} />;\n});\n\nexport default ProductCard;\n","import { Suspense, useEffect, useState } from 'react';\nimport { useTranslation } from '../../providers/i18n';\nimport { useTwilight } from '../../providers';\nimport { SallaSlider } from '@salla.sa/twilight-components-react/slider';\nimport { Image } from '../common/Image';\nimport { ImageModal } from '../modal';\nimport type { Product, ProductImage } from '../../types';\n\ninterface ProductGalleryProps {\n  product: Product;\n}\n\ntype ImagePreview = { src: string; alt: string };\n\nexport function ProductGallery({ product }: ProductGalleryProps) {\n  const { t } = useTranslation();\n  const { theme } = useTwilight();\n  const sliderId = `details-slider-${product.id}`;\n  const objectFit = theme.settings.slider_background_size ?? 'cover';\n\n  // Clicking an image opens an in-app lightbox instead of navigating to the CDN URL.\n  const [preview, setPreview] = useState<ImagePreview | null>(null);\n\n  useEffect(() => {\n    const raf = requestAnimationFrame(() => {\n      const el = document.getElementById(sliderId);\n      if (!el?.parentElement) return;\n      const { parentElement, nextSibling } = el;\n      parentElement.removeChild(el);\n      parentElement.insertBefore(el, nextSibling);\n    });\n    return () => cancelAnimationFrame(raf);\n  }, [product.id, sliderId]);\n\n  // The product-details API only returns `image` (singular).\n  // Fall back so the main image always renders even without the full gallery array.\n  const images: ProductImage[] =\n    product.images && product.images.length > 0\n      ? product.images\n      : product.image?.url\n        ? [product.image]\n        : [];\n\n  const hasManyImages = images.length > 1;\n\n  return (\n    <div className=\"sidebar md:sticky top-24 w-full md:!w-2/4 rtl:ml-8 ltr:mr-8 pb-8 md:pb-16 overflow-hidden shrink-0\">\n      <SallaSlider\n        id={sliderId}\n        className=\"details-slider rounded-md image-slider\"\n        type=\"thumbs\"\n        loop={false}\n        autoHeight\n        listenToThumbnailsOption\n        showThumbsControls={false}\n        sliderConfig={{ watchOverflow: true, autoHeight: true }}\n      >\n        {product.promotion_title && (\n          <div className=\"promotion-title\">{product.promotion_title}</div>\n        )}\n\n        {product.calories && (\n          <div className=\"absolute z-[2] top-4 rtl:left-4 ltr:right-4 bg-white shadow-sm flex flex-col justify-center items-center rounded-full w-20 h-20 md:w-24 md:h-24\">\n            <span className=\"text-red-500 text-xl leading-none font-bold\">{product.calories}</span>\n            <span className=\"text-xs text-gray-500\">\n              {t('pages.products.calories', 'Calories')}\n            </span>\n          </div>\n        )}\n\n        <div slot=\"items\">\n          {images.map((image, index) => (\n            <ImageSlide\n              key={image.id ?? index}\n              image={image}\n              product={product}\n              index={index}\n              objectFit={objectFit}\n              onPreview={setPreview}\n            />\n          ))}\n        </div>\n\n        {hasManyImages && (\n          <div slot=\"thumbs\">\n            {images.map((image, index) => (\n              <ThumbSlide key={image.id ?? index} image={image} index={index} />\n            ))}\n          </div>\n        )}\n      </SallaSlider>\n\n      <Suspense fallback={null}>\n        <ImageModal\n          isOpen={!!preview}\n          onClose={() => setPreview(null)}\n          src={preview?.src ?? ''}\n          alt={preview?.alt}\n        />\n      </Suspense>\n    </div>\n  );\n}\n\nfunction ImageSlide({\n  image,\n  product,\n  index,\n  objectFit,\n  onPreview,\n}: {\n  image: ProductImage;\n  product: Product;\n  index: number;\n  objectFit: 'cover' | 'contain';\n  onPreview: (preview: ImagePreview) => void;\n}) {\n  const [loaded, setLoaded] = useState(false);\n  const isVideo = Boolean(image.video_url);\n\n  if (image.three_d_image_url) {\n    return (\n      <model-viewer\n        style={{ minHeight: '500px' }}\n        className=\"swiper-slide model-entry w-full h-full\"\n        loading=\"lazy\"\n        camera-controls\n        touch-action=\"pan-y\"\n        auto-rotate\n        poster={image.url || undefined}\n        src={image.three_d_image_url}\n        shadow-intensity=\"1\"\n        alt={image.alt}\n      ></model-viewer>\n    );\n  }\n\n  return (\n    <a\n      data-fslightbox={`product_${product.id}`}\n      data-img-id={image.id}\n      data-slid-index={index}\n      {...(image.video_url ? { 'data-video-src': image.video_url } : {})}\n      data-caption={image.alt}\n      data-infinite=\"false\"\n      data-type={image.video_url ? 'youtube' : 'image'}\n      href={image.video_url || image.url}\n      // FsLightbox isn't loaded in this React theme, so the bare href would leave the SPA.\n      // Open images in an in-app lightbox; let videos open in a new tab.\n      {...(isVideo ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n      onClick={(event) => {\n        if (isVideo || !image.url) return;\n        event.preventDefault();\n        onPreview({ src: image.url, alt: image.alt || product.name });\n      }}\n      aria-label={product.name}\n      className={`swiper-slide magnify-wrapper homeslider__slide ${image.video_url ? 'video-entry' : ''}`}\n    >\n      <div className={`w-full ${loaded ? '' : 'aspect-square bg-gray-100 animate-pulse'}`}>\n        <Image\n          id={String(image.id)}\n          src={image.url}\n          alt={image.alt || product.name}\n          className={`h-full w-full object-${objectFit}`}\n          aspectRatio=\"1/1\"\n          priority={index === 0}\n          noWrapper\n          onLoad={() => setLoaded(true)}\n        />\n      </div>\n    </a>\n  );\n}\n\nfunction ThumbSlide({ image, index }: { image: ProductImage; index: number }) {\n  return (\n    <div\n      className={`slide--one-fourth ${image.video_url ? 'video-entry' : ''} ${image.three_d_image_url ? 'model-entry' : ''}`}\n      data-caption={image.alt}\n    >\n      <Image\n        src={image.url}\n        alt={image.alt || ''}\n        className=\"object-cover w-full h-full bg-gray-100 rounded-md overflow-hidden\"\n        title={image.alt}\n        priority={index < 5}\n        noWrapper\n      />\n    </div>\n  );\n}\n"]}

package/dist/chunk-RUHSV4Z6.js

@@ -0,0 +1,12 @@
+// src/utils/sanitize.ts
+var UNSAFE_TAGS = /<(script|iframe|object|embed|form|input|textarea|select|button|link|meta|base)\b[^>]*>/gi;
+var CLOSING_UNSAFE_TAGS = /<\/(script|iframe|object|embed|form|input|textarea|select|button|link|meta|base)>/gi;
+var EVENT_HANDLERS = /\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi;
+var JS_PROTOCOL = /href\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi;
+function stripUnsafeHtml(html) {
+  return html.replace(UNSAFE_TAGS, "").replace(CLOSING_UNSAFE_TAGS, "").replace(EVENT_HANDLERS, "").replace(JS_PROTOCOL, "");
+}
+
+export { stripUnsafeHtml };
+//# sourceMappingURL=chunk-RUHSV4Z6.js.map
+//# sourceMappingURL=chunk-RUHSV4Z6.js.map

package/dist/chunk-RUHSV4Z6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/sanitize.ts"],"names":[],"mappings":";AAAA,IAAM,WAAA,GACJ,0FAAA;AACF,IAAM,mBAAA,GACJ,qFAAA;AACF,IAAM,cAAA,GAAiB,8CAAA;AACvB,IAAM,WAAA,GAAc,wDAAA;AAEb,SAAS,gBAAgB,IAAA,EAAsB;AACpD,EAAA,OAAO,IAAA,CACJ,OAAA,CAAQ,WAAA,EAAa,EAAE,EACvB,OAAA,CAAQ,mBAAA,EAAqB,EAAE,CAAA,CAC/B,QAAQ,cAAA,EAAgB,EAAE,CAAA,CAC1B,OAAA,CAAQ,aAAa,EAAE,CAAA;AAC5B","file":"chunk-RUHSV4Z6.js","sourcesContent":["const UNSAFE_TAGS =\n  /<(script|iframe|object|embed|form|input|textarea|select|button|link|meta|base)\\b[^>]*>/gi;\nconst CLOSING_UNSAFE_TAGS =\n  /<\\/(script|iframe|object|embed|form|input|textarea|select|button|link|meta|base)>/gi;\nconst EVENT_HANDLERS = /\\s+on\\w+\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s>]*)/gi;\nconst JS_PROTOCOL = /href\\s*=\\s*(?:\"javascript:[^\"]*\"|'javascript:[^']*')/gi;\n\nexport function stripUnsafeHtml(html: string): string {\n  return html\n    .replace(UNSAFE_TAGS, '')\n    .replace(CLOSING_UNSAFE_TAGS, '')\n    .replace(EVENT_HANDLERS, '')\n    .replace(JS_PROTOCOL, '');\n}\n"]}

package/dist/chunk-RYBA3JDM.js

@@ -0,0 +1,33 @@
+import { HookSlot } from './chunk-25SSLQAJ.js';
+import { useTwilight } from './chunk-BWFBVXT3.js';
+import { useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function pushEqualHeightConfig(settings) {
+  const isEnabled = settings["products::card.equal-height.enabled"];
+  if (isEnabled === void 0 || isEnabled === null) return;
+  window.dataLayer = window.dataLayer ?? [];
+  window.dataLayer.push({
+    equalHeight: {
+      isEnabled: Boolean(isEnabled),
+      max: Number(settings["products::card.equal-height.max-pixel"] ?? 300),
+      classType: String(settings["products::card.equal-height.type"] ?? "min")
+    }
+  });
+}
+function WidgetHead() {
+  const { store } = useTwilight();
+  useEffect(() => {
+    const settings = store.settings ?? {};
+    pushEqualHeightConfig(settings);
+  }, [store.id, store.settings]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(HookSlot, { name: "head:start", ssr: true }),
+    /* @__PURE__ */ jsx(HookSlot, { name: "head", ssr: true }),
+    /* @__PURE__ */ jsx(HookSlot, { name: "head:end", ssr: true })
+  ] });
+}
+
+export { WidgetHead, pushEqualHeightConfig };
+//# sourceMappingURL=chunk-RYBA3JDM.js.map
+//# sourceMappingURL=chunk-RYBA3JDM.js.map

package/dist/chunk-RYBA3JDM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/WidgetHead.tsx"],"names":[],"mappings":";;;;;AAUO,SAAS,sBAAsB,QAAA,EAAyC;AAC7E,EAAA,MAAM,SAAA,GAAY,SAAS,qCAAqC,CAAA;AAChE,EAAA,IAAI,SAAA,KAAc,MAAA,IAAa,SAAA,KAAc,IAAA,EAAM;AAEnD,EAAA,MAAA,CAAO,SAAA,GAAY,MAAA,CAAO,SAAA,IAAa,EAAC;AACxC,EAAA,MAAA,CAAO,UAAU,IAAA,CAAK;AAAA,IACpB,WAAA,EAAa;AAAA,MACX,SAAA,EAAW,QAAQ,SAAS,CAAA;AAAA,MAC5B,GAAA,EAAK,MAAA,CAAO,QAAA,CAAS,uCAAuC,KAAK,GAAG,CAAA;AAAA,MACpE,SAAA,EAAW,MAAA,CAAO,QAAA,CAAS,kCAAkC,KAAK,KAAK;AAAA;AACzE,GACD,CAAA;AACH;AAcO,SAAS,UAAA,GAAa;AAC3B,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,WAAA,EAAY;AAG9B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAA,GAAY,KAAA,CAAM,QAAA,IAAmD,EAAC;AAC5E,IAAA,qBAAA,CAAsB,QAAQ,CAAA;AAAA,EAChC,GAAG,CAAC,KAAA,CAAM,EAAA,EAAI,KAAA,CAAM,QAAQ,CAAC,CAAA;AAE7B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,YAAA,EAAa,GAAA,EAAG,IAAA,EAAC,CAAA;AAAA,oBAChC,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,MAAA,EAAO,KAAG,IAAA,EAAC,CAAA;AAAA,oBAC1B,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,UAAA,EAAW,KAAG,IAAA,EAAC;AAAA,GAAA,EAChC,CAAA;AAEJ","file":"chunk-RYBA3JDM.js","sourcesContent":["import { useEffect } from 'react';\nimport { useTwilight } from '../../providers/twilight-context';\nimport { HookSlot } from '../../hooks/HookSlot';\n\n/**\n * Pushes the equal-height product card configuration to the GTM dataLayer.\n * Mirrors PHP `HeadWidget::run()` -> `GoogleTagManager::set('equalHeight', ...)`.\n *\n * @param settings - Flat settings map from the store (keyed by dot-path strings).\n */\nexport function pushEqualHeightConfig(settings: Record<string, unknown>): void {\n  const isEnabled = settings['products::card.equal-height.enabled'];\n  if (isEnabled === undefined || isEnabled === null) return;\n\n  window.dataLayer = window.dataLayer ?? [];\n  window.dataLayer.push({\n    equalHeight: {\n      isEnabled: Boolean(isEnabled),\n      max: Number(settings['products::card.equal-height.max-pixel'] ?? 300),\n      classType: String(settings['products::card.equal-height.type'] ?? 'min'),\n    },\n  });\n}\n\n/**\n * WidgetHead - Client-side head infrastructure widget.\n *\n * Handles runtime-only head operations that cannot be done in SSR head():\n * - Pushes `equalHeight` config to GTM dataLayer (requires window).\n * - Exposes `head:start`, `head`, and `head:end` HookSlots for theme customisation.\n *\n * Static head elements (favicon, msapplication tiles, theme colors, hreflang, custom CSS/JS)\n * are handled in __root.tsx head() function.\n *\n * Renders no visible UI.\n */\nexport function WidgetHead() {\n  const { store } = useTwilight();\n\n  // ── equalHeight → GTM dataLayer ───────────────────────────────────────────\n  useEffect(() => {\n    const settings = (store.settings as unknown as Record<string, unknown>) ?? {};\n    pushEqualHeightConfig(settings);\n  }, [store.id, store.settings]);\n\n  return (\n    <>\n      <HookSlot name=\"head:start\" ssr />\n      <HookSlot name=\"head\" ssr />\n      <HookSlot name=\"head:end\" ssr />\n    </>\n  );\n}\n"]}

package/dist/chunk-SBIXBX6J.js

@@ -0,0 +1,29 @@
+import { orThrow } from './chunk-GO34DE35.js';
+import { api } from './chunk-2TB2LTL2.js';
+import { queryOptions } from '@tanstack/react-query';
+
+var brand = {
+  list: async () => {
+    const { data } = await api.get("brands").json();
+    return data ?? {};
+  },
+  find: async (id) => {
+    const { data } = await api.get(`brands/${id}`).json();
+    return data;
+  },
+  findOrThrow: (id) => orThrow(brand.find(id)),
+  queries: {
+    list: () => queryOptions({
+      queryKey: ["brands", "list"],
+      queryFn: () => brand.list()
+    }),
+    detail: (id) => queryOptions({
+      queryKey: ["brands", "detail", id],
+      queryFn: () => brand.find(id)
+    })
+  }
+};
+
+export { brand };
+//# sourceMappingURL=chunk-SBIXBX6J.js.map
+//# sourceMappingURL=chunk-SBIXBX6J.js.map

package/dist/chunk-SBIXBX6J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/api/brands.ts"],"names":[],"mappings":";;;;AAKO,IAAM,KAAA,GAAQ;AAAA,EACnB,MAAM,YAAkC;AACtC,IAAA,MAAM,EAAE,MAAK,GAAI,MAAM,IAAI,GAAA,CAAI,QAAQ,EAAE,IAAA,EAA4B;AACrE,IAAA,OAAO,QAAQ,EAAC;AAAA,EAClB,CAAA;AAAA,EAEA,IAAA,EAAM,OAAO,EAAA,KAA+B;AAC1C,IAAA,MAAM,EAAE,IAAA,EAAK,GAAI,MAAM,GAAA,CAAI,IAAI,CAAA,OAAA,EAAU,EAAE,CAAA,CAAE,CAAA,CAAE,IAAA,EAAsB;AACrE,IAAA,OAAO,IAAA;AAAA,EACT,CAAA;AAAA,EAEA,aAAa,CAAC,EAAA,KAA+B,QAAQ,KAAA,CAAM,IAAA,CAAK,EAAE,CAAC,CAAA;AAAA,EAEnE,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,MACJ,YAAA,CAAa;AAAA,MACX,QAAA,EAAU,CAAC,QAAA,EAAU,MAAM,CAAA;AAAA,MAC3B,OAAA,EAAS,MAAM,KAAA,CAAM,IAAA;AAAK,KAC3B,CAAA;AAAA,IACH,MAAA,EAAQ,CAAC,EAAA,KACP,YAAA,CAAa;AAAA,MACX,QAAA,EAAU,CAAC,QAAA,EAAU,QAAA,EAAU,EAAE,CAAA;AAAA,MACjC,OAAA,EAAS,MAAM,KAAA,CAAM,IAAA,CAAK,EAAE;AAAA,KAC7B;AAAA;AAEP","file":"chunk-SBIXBX6J.js","sourcesContent":["import { queryOptions } from '@tanstack/react-query';\nimport { api } from './client';\nimport type { Brand, BrandsGroup } from '../routes/brands/types';\nimport { orThrow } from '../providers';\n\nexport const brand = {\n  list: async (): Promise<BrandsGroup> => {\n    const { data } = await api.get('brands').json<{ data: BrandsGroup }>();\n    return data ?? {};\n  },\n\n  find: async (id: string): Promise<Brand> => {\n    const { data } = await api.get(`brands/${id}`).json<{ data: Brand }>();\n    return data;\n  },\n\n  findOrThrow: (id: string): Promise<Brand> => orThrow(brand.find(id)),\n\n  queries: {\n    list: () =>\n      queryOptions({\n        queryKey: ['brands', 'list'],\n        queryFn: () => brand.list(),\n      }),\n    detail: (id: string) =>\n      queryOptions({\n        queryKey: ['brands', 'detail', id],\n        queryFn: () => brand.find(id),\n      }),\n  },\n};\n"]}

package/dist/chunk-SSRNIBVV.js

@@ -0,0 +1,75 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+// src/hooks/useProduct.ts
+function useProduct(initialProduct) {
+  const [product, setProduct] = useState(initialProduct);
+  const initialProductRef = useRef(initialProduct);
+  useEffect(() => {
+    initialProductRef.current = initialProduct;
+  });
+  const reload = useCallback(async () => {
+    const salla = window.salla;
+    if (!salla?.api?.product?.getDetails) return;
+    try {
+      const response = await salla.api.product.getDetails(String(product.id), [
+        "images",
+        "category"
+      ]);
+      if (response?.success && response.data) {
+        setProduct(response.data);
+      }
+    } catch {
+    }
+  }, [product.id]);
+  useEffect(() => {
+    setProduct(initialProductRef.current);
+  }, [initialProduct.id]);
+  useEffect(() => {
+    const salla = window.salla;
+    if (!salla?.event?.on) return;
+    salla.event.on("product:options.updated", reload);
+    return () => {
+      salla.event?.off?.("product:options.updated", reload);
+    };
+  }, [reload]);
+  useEffect(() => {
+    const salla = window.salla;
+    if (!salla?.product?.event?.onPriceUpdated) return;
+    const handlePriceUpdated = (res) => {
+      const data = res.data;
+      if (!data) return;
+      setProduct((prev) => ({
+        ...prev,
+        price: data.price ?? prev.price,
+        sale_price: data.sale_price ?? prev.sale_price,
+        regular_price: data.regular_price ?? prev.regular_price,
+        is_on_sale: data.has_sale_price ?? prev.is_on_sale,
+        weight: data.weight ?? prev.weight,
+        is_out_of_stock: false
+      }));
+    };
+    salla.product.event.onPriceUpdated(handlePriceUpdated);
+    return () => {
+      salla.event?.off?.(
+        "product::price.updated",
+        handlePriceUpdated
+      );
+    };
+  }, []);
+  useEffect(() => {
+    const salla = window.salla;
+    if (!salla?.event?.on) return;
+    const handlePriceFailed = () => {
+      setProduct((prev) => ({ ...prev, is_out_of_stock: true }));
+    };
+    salla.event.on("product::price.updated.failed", handlePriceFailed);
+    return () => {
+      salla.event?.off?.("product::price.updated.failed", handlePriceFailed);
+    };
+  }, []);
+  return { product, reload };
+}
+
+export { useProduct };
+//# sourceMappingURL=chunk-SSRNIBVV.js.map
+//# sourceMappingURL=chunk-SSRNIBVV.js.map

package/dist/chunk-SSRNIBVV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useProduct.ts"],"names":[],"mappings":"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","file":"chunk-SSRNIBVV.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { Product } from '../types';\n\n/**\n * UseProductResult - Return type for useProduct hook\n */\nexport interface UseProductResult {\n  /** Current product state (updates on option changes) */\n  product: Product;\n  /** Reload product data from API */\n  reload: () => Promise<void>;\n}\n\n/**\n * useProduct - Hook for managing product state with live updates\n *\n * Provides reactive product data with automatic updates for price, stock,\n * and variant changes. Handles manual reloads (e.g., after add-to-cart)\n * and subscribes to Salla SDK events for real-time price updates.\n *\n * Stock status is reflected in `product.is_out_of_stock` which updates\n * when price calculations succeed or fail (e.g., unavailable option combinations).\n *\n * @param initialProduct - The initial product object (typically from loader/SSR)\n *\n * @returns Object with product and reload function\n *\n * @example\n * ```tsx\n * function ProductDetails({ product }) {\n *   const { product: updatedProduct, reload } = useProduct(product);\n *\n *   const handleAddToCart = async () => {\n *     await addToCart(updatedProduct.id);\n *     await reload(); // Refresh product state after cart update\n *   };\n *\n *   return (\n *     <div>\n *       <h1>{updatedProduct.name}</h1>\n *       <p>Price: {formatMoney(updatedProduct.price)}</p>\n *       {updatedProduct.is_out_of_stock && <p>Currently out of stock</p>}\n *       <button onClick={handleAddToCart}>Add to Cart</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useProduct(initialProduct: Product): UseProductResult {\n  const [product, setProduct] = useState<Product>(initialProduct);\n\n  // Always keep a ref to the latest initialProduct so the re-seed effect below\n  // can read it without adding the full object to the dependency array.\n  const initialProductRef = useRef<Product>(initialProduct);\n  useEffect(() => {\n    initialProductRef.current = initialProduct;\n  });\n\n  const reload = useCallback(async () => {\n    const salla = window.salla;\n    if (!salla?.api?.product?.getDetails) return;\n    try {\n      const response = await salla.api.product.getDetails(String(product.id), [\n        'images',\n        'category',\n      ]);\n      if (response?.success && response.data) {\n        setProduct(response.data as Product);\n      }\n    } catch {\n      // silently ignore network errors during reload\n    }\n  }, [product.id]);\n\n  // Re-seed state when the loader navigates to a different product.\n  // We read from the ref (not the prop directly) so the dep array only declares\n  // the actual trigger — the id — without needing an eslint-disable comment.\n  useEffect(() => {\n    setProduct(initialProductRef.current);\n  }, [initialProduct.id]);\n\n  // Subscribe to Salla option-change events so price/stock stays in sync\n  useEffect(() => {\n    const salla = window.salla;\n    if (!salla?.event?.on) return;\n\n    salla.event.on('product:options.updated', reload);\n    return () => {\n      salla.event?.off?.('product:options.updated', reload);\n    };\n  }, [reload]);\n\n  // Subscribe to price update events (matches product.js registerEvents)\n  useEffect(() => {\n    const salla = window.salla;\n    if (!salla?.product?.event?.onPriceUpdated) return;\n\n    const handlePriceUpdated = (res: { data?: Record<string, unknown> }) => {\n      const data = res.data;\n      if (!data) return;\n\n      setProduct((prev) => ({\n        ...prev,\n        price: (data.price as number) ?? prev.price,\n        sale_price: (data.sale_price as number) ?? prev.sale_price,\n        regular_price: (data.regular_price as number) ?? prev.regular_price,\n        is_on_sale: (data.has_sale_price as boolean) ?? prev.is_on_sale,\n        weight: (data.weight as string) ?? prev.weight,\n        is_out_of_stock: false,\n      }));\n    };\n\n    salla.product.event.onPriceUpdated(handlePriceUpdated);\n    return () => {\n      salla.event?.off?.(\n        'product::price.updated',\n        handlePriceUpdated as (...args: unknown[]) => void\n      );\n    };\n  }, []);\n\n  // Subscribe to price update failed events (matches product.js)\n  useEffect(() => {\n    const salla = window.salla;\n    if (!salla?.event?.on) return;\n\n    const handlePriceFailed = () => {\n      setProduct((prev) => ({ ...prev, is_out_of_stock: true }));\n    };\n\n    salla.event.on('product::price.updated.failed', handlePriceFailed);\n    return () => {\n      salla.event?.off?.('product::price.updated.failed', handlePriceFailed);\n    };\n  }, []);\n\n  return { product, reload };\n}\n"]}