@asantemedia-org/edwardsvacuum-design-system 1.6.32 → 1.6.34

package/dist/index.esm.js

@@ -239,6 +239,8 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+// Debug mode - set to true to enable console logging
+var DEBUG_ACCORDION = typeof window !== 'undefined' && window.__DEBUG_ACCORDION__;
 var AccordionSection = function (_a) {
   var title = _a.title,
     children = _a.children,
@@ -256,13 +258,20 @@ var AccordionSection = function (_a) {
     hasBeenOpened = _f[0],
     setHasBeenOpened = _f[1];
   var toggleAccordion = useCallback(function () {
+    if (DEBUG_ACCORDION) {
+      console.time("[AccordionSection] Toggle \"".concat(title, "\""));
+      console.log("[AccordionSection] Toggle clicked for \"".concat(title, "\", lazyLoad=").concat(lazyLoad, ", hasBeenOpened=").concat(hasBeenOpened));
+    }
     setIsOpen(function (prev) {
       if (!prev && !hasBeenOpened) {
         setHasBeenOpened(true);
       }
+      if (DEBUG_ACCORDION) {
+        console.timeEnd("[AccordionSection] Toggle \"".concat(title, "\""));
+      }
       return !prev;
     });
-  }, [hasBeenOpened]);
+  }, [hasBeenOpened, title, lazyLoad]);
   var handleKeyDown = useCallback(function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -313,14 +322,22 @@ var cardSizeMapping = function (size) {
   }
   return classSrting;
 };
-// Static placeholder URL - avoid dynamic require() which freezes in AEM
-var PLACEHOLDER_IMAGE = "/assets/edwards-webshop-placeholder.png";
-var getImageUrl = function (imageUrl, placeholder) {
+var getImageUrl = function (imageUrl) {
   if (imageUrl) {
-    return imageUrl;
+    return imageUrl; // If an image URL is provided, use it.
+  }
+  try {
+    // Try loading from local assets (works in Storybook)
+    return require("../../../assets/edwards-webshop-placeholder.png").default.src;
+  } catch (error) {
+    // If that fails, load from node_modules (works in host app)
+    try {
+      return require("@asantemedia-org/edwardsvacuum-design-system/dist/assets/edwards-webshop-placeholder.png").default;
+    } catch (error) {
+      console.error("Placeholder image not found in either local assets or node_modules.", error);
+      return ""; // Fallback empty string if no image is found
+    }
   }
-  // Use provided placeholder or default static path
-  return PLACEHOLDER_IMAGE;
 };
 var Card = function (_a) {
   var contentCategoryLabel = _a.contentCategoryLabel,
@@ -421,7 +438,10 @@ var ProductCard = function (_a) {
     icon: faArrowRight
   }))))));
 };
+// Debug mode - set to true to enable console logging
+var DEBUG_CARD = typeof window !== 'undefined' && window.__DEBUG_ACCORDION__;
 var ProductDetailsCard = function (_a) {
+  var _b;
   var className = _a.className,
     title = _a.title;
     _a.imageUrl;
@@ -430,6 +450,40 @@ var ProductDetailsCard = function (_a) {
     _a.onClick;
     var hit = _a.hit,
     facets = _a.facets;
+  if (DEBUG_CARD) {
+    console.log("[ProductDetailsCard] Rendering, spares count: ".concat(((_b = hit === null || hit === void 0 ? void 0 : hit.spares) === null || _b === void 0 ? void 0 : _b.length) || 0));
+  }
+  // Memoize spares rendering to prevent re-computation
+  var renderSpares = function () {
+    if (!(hit === null || hit === void 0 ? void 0 : hit.spares) || hit.spares.length === 0) return null;
+    if (DEBUG_CARD) {
+      console.time('[ProductDetailsCard] Rendering spares');
+    }
+    var result = /*#__PURE__*/React.createElement("ul", {
+      className: "folding-spares-list"
+    }, hit.spares.map(function (spare, index) {
+      if (DEBUG_CARD && index === 0) {
+        console.log("[ProductDetailsCard] First spare:", spare);
+      }
+      return /*#__PURE__*/React.createElement("li", {
+        key: spare.objectID || spare.code || index
+      }, /*#__PURE__*/React.createElement(ProductCard, {
+        cardStyle: "type-card-product",
+        className: "cmp-card",
+        title: spare.name,
+        imageUrl: spare['img-product'] || spare.image,
+        imageAlt: spare.name,
+        productPrice: spare.priceValue || spare.price,
+        showProductPrice: false,
+        cardLink: spare.url || spare.link,
+        cta: "Go to webshop"
+      }));
+    }));
+    if (DEBUG_CARD) {
+      console.timeEnd('[ProductDetailsCard] Rendering spares');
+    }
+    return result;
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement("div", {
@@ -463,23 +517,7 @@ var ProductDetailsCard = function (_a) {
     title: "Spares & Parts",
     className: "folding-spares-holder",
     lazyLoad: true
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "folding-spares-list"
-  }, hit.spares.map(function (spare, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: spare.objectID || spare.code || index
-    }, /*#__PURE__*/React.createElement(ProductCard, {
-      cardStyle: "type-card-product",
-      className: "cmp-card",
-      title: spare.name,
-      imageUrl: spare['img-product'] || spare.image,
-      imageAlt: spare.name,
-      productPrice: spare.priceValue || spare.price,
-      showProductPrice: false,
-      cardLink: spare.url || spare.link,
-      cta: "Go to webshop"
-    }));
-  })))));
+  }, renderSpares())));
 };
 
 function _extends() {