@crystaldesign/widget-library 25.8.0-beta.5 → 25.8.0-beta.7

package/build/esm/index.js

@@ -1,12 +1,12 @@
-import { useEffect, useMemo, useState, forwardRef, useRef } from 'react';
+import { useEffect, useMemo, useCallback, useState, useRef, forwardRef } from 'react';
 import { useDivaCore, getLogger, DivaError, useTranslation } from '@crystaldesign/diva-core';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { Navigation, Thumbs, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { useLayer, Arrow } from 'react-laag';
@@ -80,20 +80,234 @@ function useConfiguration(type, componentSettings) {
   return settings;
 }
 
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var LOG$2 = getLogger('DivaWidget', 'useGlobalCache');
+
+// Global cache for shared data between widgets
+
+// Initialize global cache if not exists
+if (typeof window !== 'undefined' && !window.__divaWidgetCache) {
+  window.__divaWidgetCache = {
+    cache: new Map()
+  };
+}
+
+/**
+ * Global cache for shared data between widgets of a website
+ * Simple implementation with request deduplication
+ */
+function useGlobalCache(_ref) {
+  var uniqueWidgetId = _ref.uniqueWidgetId,
+    widgetType = _ref.widgetType;
+  var getOrFetch = useCallback(function (key, fetcher) {
+    LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] getOrFetch called for key: ").concat(key));
+    if (typeof window === 'undefined' || !window.__divaWidgetCache) {
+      LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] No global cache available, fetching directly for key: ").concat(key));
+      return fetcher();
+    }
+    var cache = window.__divaWidgetCache.cache;
+    var entry = cache.get(key);
+
+    // If we have cached data, return it immediately
+    if (entry !== null && entry !== void 0 && entry.data) {
+      LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache hit for key: ").concat(key, ", returning cached data"));
+      return Promise.resolve(entry.data);
+    }
+
+    // If there's already a pending request, return that promise (deduplication)
+    if (entry !== null && entry !== void 0 && entry.promise) {
+      LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache hit for pending request, returning existing promise for key: ").concat(key));
+      return entry.promise;
+    }
+    LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache miss for key: ").concat(key, ", creating new request"));
+
+    // Create new entry or reset existing one
+    var newEntry = {
+      data: null,
+      promise: null,
+      error: null,
+      timestamp: Date.now()
+    };
+
+    // Create new request
+    var promise = fetcher().then(function (data) {
+      LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Request successful for key: ").concat(key, ", updating cache with ").concat(data.length, " items"));
+      var currentEntry = cache.get(key);
+      if (currentEntry) {
+        currentEntry.data = data;
+        currentEntry.promise = null;
+        currentEntry.error = null;
+        currentEntry.timestamp = Date.now();
+      }
+      return data;
+    })["catch"](function (error) {
+      LOG$2.error(new DivaError("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Request failed for key: ").concat(key), {
+        cause: error
+      }));
+      var currentEntry = cache.get(key);
+      if (currentEntry) {
+        currentEntry.promise = null;
+        currentEntry.error = error;
+        currentEntry.timestamp = Date.now();
+      }
+      throw error;
+    });
+    newEntry.promise = promise;
+    cache.set(key, newEntry);
+    return promise;
+  }, [uniqueWidgetId, widgetType]);
+  var clear = useCallback(function (key) {
+    LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Clearing cache entry for key: ").concat(key));
+    if (typeof window !== 'undefined' && window.__divaWidgetCache) {
+      var deleted = window.__divaWidgetCache.cache["delete"](key);
+      LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache entry ").concat(deleted ? 'deleted' : 'not found', " for key: ").concat(key));
+    }
+  }, [uniqueWidgetId, widgetType]);
+  var clearAll = useCallback(function () {
+    LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Clearing all cache entries"));
+    if (typeof window !== 'undefined' && window.__divaWidgetCache) {
+      var size = window.__divaWidgetCache.cache.size;
+      window.__divaWidgetCache.cache.clear();
+      LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cleared ").concat(size, " cache entries"));
+    }
+  }, [uniqueWidgetId, widgetType]);
+  return useMemo(function () {
+    return {
+      getOrFetch: getOrFetch,
+      clear: clear,
+      clearAll: clearAll
+    };
+  }, [getOrFetch, clear, clearAll]);
+}
+
+var LOG$1 = getLogger('DivaWidget', 'useGlobalSelectedProduct');
+var EVENT_NAME_PRODUCT_SELECTED = 'diva:widget:product-selected';
+
+/**
+ * Hook to get the globally selected product
+ *
+ * Initially and when the product changes, it gets selected.
+ * When ever the selected product is changed, an event is dispatched to notify other widgets, so they can also set the new product as selected.
+ * The hook also listens for product selection events from other widgets and updates the selected product accordingly.
+ *
+ * @param product - The product to select initially
+ * @returns The selected product and a function to set the selected product
+ */
+function useGlobalSelectedProduct(_ref) {
+  var product = _ref.product,
+    uniqueWidgetId = _ref.uniqueWidgetId,
+    widgetType = _ref.widgetType;
+  var _useState = useState(product),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedProduct = _useState2[0],
+    setInternalSelectedProduct = _useState2[1];
+  var lastEventTimestamp = useRef(0);
+
+  // Update internal state when prop changes - prop always takes precedence for this widget
+  useEffect(function () {
+    if (product && product._id !== (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id)) {
+      var timestamp = Date.now();
+      lastEventTimestamp.current = timestamp;
+      LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Product prop changed, updating selected product from ").concat((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) || 'none', " to ").concat(product._id));
+      setInternalSelectedProduct(product);
+    }
+  }, [product]);
+
+  // Listen to product selection events from other widgets
+  var handleProductSelection = useCallback(function (event) {
+    var customEvent = event;
+    var _customEvent$detail = customEvent.detail,
+      product = _customEvent$detail.product,
+      sourceId = _customEvent$detail.sourceId,
+      timestamp = _customEvent$detail.timestamp;
+    LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Received product selection event from ").concat(sourceId, ", product: ").concat(product._id, ", timestamp: ").concat(timestamp));
+
+    // Ignore our own events
+    if (sourceId === uniqueWidgetId) {
+      LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring own event"));
+      return;
+    }
+
+    // Ignore older events (handle out-of-order events)
+    if (timestamp <= lastEventTimestamp.current) {
+      LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring older event (timestamp: ").concat(timestamp, " <= ").concat(lastEventTimestamp.current, ")"));
+      return;
+    }
+
+    // Ignore if product hasn't actually changed
+    if ((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) === product._id) {
+      LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring event - product already selected: ").concat(product._id));
+      return;
+    }
+    LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Updating selected product from ").concat((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) || 'none', " to ").concat(product._id));
+    lastEventTimestamp.current = timestamp;
+    setInternalSelectedProduct(product);
+  }, [uniqueWidgetId, selectedProduct, widgetType]);
+
+  // Stable event listener setup
+  useEffect(function () {
+    window.addEventListener(EVENT_NAME_PRODUCT_SELECTED, handleProductSelection);
+    return function () {
+      window.removeEventListener(EVENT_NAME_PRODUCT_SELECTED, handleProductSelection);
+    };
+  }, [handleProductSelection]);
+  var setSelectedProduct = useCallback(function (product) {
+    // Avoid unnecessary updates
+    if ((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) === product._id) {
+      LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring setSelectedProduct - product already selected: ").concat(product._id));
+      return;
+    }
+    var timestamp = Date.now();
+    lastEventTimestamp.current = timestamp;
+    LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Setting selected product from ").concat((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) || 'none', " to ").concat(product._id));
+    setInternalSelectedProduct(product);
+
+    // Dispatch event to notify other widgets
+    LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Dispatching product selection event to notify other widgets"));
+    window.dispatchEvent(new CustomEvent(EVENT_NAME_PRODUCT_SELECTED, {
+      detail: {
+        product: product,
+        sourceId: uniqueWidgetId,
+        timestamp: timestamp
+      }
+    }));
+  }, [uniqueWidgetId, selectedProduct, widgetType]);
+  return {
+    selectedProduct: selectedProduct,
+    setSelectedProduct: setSelectedProduct
+  };
+}
+
 var LOG = getLogger('DivaWidget', 'useProductData');
+// Generate unique widget instance ID
+var generateWidgetId = function generateWidgetId() {
+  return "widget-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
+};
 function useProductData(_ref) {
   var productIds = _ref.productIds,
     variants = _ref.variants,
-    onProductLoaded = _ref.onProductLoaded;
+    widgetType = _ref.widgetType;
+  // Generate stable widget ID that persists for the lifetime of this hook instance
+  var widgetId = useMemo(function () {
+    return generateWidgetId();
+  }, []);
   var _useDivaCore = useDivaCore(),
     handler = _useDivaCore.handler;
-  var _useState = useState(variants !== null && variants !== void 0 ? variants : []),
+  var _useGlobalCache = useGlobalCache({
+      uniqueWidgetId: widgetId,
+      widgetType: widgetType
+    }),
+    getOrFetch = _useGlobalCache.getOrFetch;
+  var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     productVariants = _useState2[0],
     setProductVariants = _useState2[1];
+  var _useGlobalSelectedPro = useGlobalSelectedProduct({
+      product: productVariants[0],
+      uniqueWidgetId: widgetId,
+      widgetType: widgetType
+    }),
+    selectedProduct = _useGlobalSelectedPro.selectedProduct,
+    setSelectedProduct = _useGlobalSelectedPro.setSelectedProduct;
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     error = _useState4[0],
@@ -102,120 +316,206 @@ function useProductData(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     loading = _useState6[0],
     setLoading = _useState6[1];
+  var normalizedProductIds = useMemo(function () {
+    if (!productIds) return [];
+    return Array.isArray(productIds) ? productIds : [productIds];
+  }, [productIds]);
+  var fetchProducts = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ids) {
+      var productPromises, results, flattenedResults;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] fetchProducts called with ids: ").concat(ids.join(', ')));
+            if (!variants) {
+              _context2.next = 4;
+              break;
+            }
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Using provided variants instead of fetching"));
+            return _context2.abrupt("return", variants);
+          case 4:
+            // Create promises for all products (cached or to be fetched) to preserve order
+            productPromises = ids.map(/*#__PURE__*/function () {
+              var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Fetching product variants for id: ").concat(id));
+                      return _context.abrupt("return", getOrFetch(id, function () {
+                        return handler.productHandler.apiGetProductVariants(id, true);
+                      }));
+                    case 2:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              }));
+              return function (_x2) {
+                return _ref3.apply(this, arguments);
+              };
+            }());
+            _context2.next = 7;
+            return Promise.all(productPromises);
+          case 7:
+            results = _context2.sent;
+            flattenedResults = results.flat();
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Fetched ").concat(flattenedResults.length, " total product variants"));
+            return _context2.abrupt("return", flattenedResults);
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [handler.productHandler, getOrFetch, variants, widgetId, widgetType]);
+
+  // Main effect for loading products when productIds or variants change
   useEffect(function () {
+    LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Main effect triggered with normalizedProductIds: ").concat(normalizedProductIds.join(', ')));
+    if (!normalizedProductIds.length) {
+      LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] ProductIds array is required and cannot be empty")));
+      setError(true);
+      setLoading(false);
+      setProductVariants([]);
+      return;
+    }
     setError(false);
     setLoading(true);
-    if (!(productIds !== null && productIds !== void 0 && productIds.length)) {
-      LOG.error(new DivaError('productIds array is required and cannot be empty'));
+    fetchProducts(normalizedProductIds).then(function (variants) {
+      LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Successfully loaded ").concat(variants.length, " product variants"));
+      setProductVariants(variants);
+      setLoading(false);
+    })["catch"](function (error) {
+      LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading products"), {
+        cause: error
+      }));
       setError(true);
       setLoading(false);
+      setProductVariants([]);
+    });
+  }, [normalizedProductIds]);
+
+  // Effect for handling selectedProduct changes
+  useEffect(function () {
+    // If a product is selected that is not in the productVariants list,
+    // fetch the variants for that product and append them to the productVariants list
+    if (!selectedProduct || productVariants.find(function (p) {
+      return p._id === selectedProduct._id;
+    })) {
       return;
     }
-    (function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(ids) {
-        var newVariants, productsPromises, productsResults, allProducts, _iterator, _step, _loop;
-        return _regeneratorRuntime.wrap(function _callee$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.prev = 0;
-              if (!variants) {
-                _context2.next = 6;
-                break;
-              }
-              setProductVariants(variants);
-              newVariants = variants;
-              _context2.next = 13;
+    LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Selected product ").concat(selectedProduct._id, " not in current variants, fetching variants for it"));
+    setLoading(true);
+    setError(false);
+    fetchProducts([selectedProduct._id]).then(function (variants) {
+      setProductVariants(function (old) {
+        // Prevent duplicate products
+        var existingIds = new Set(old.map(function (p) {
+          return p._id;
+        }));
+        var newVariants = variants.filter(function (v) {
+          return !existingIds.has(v._id);
+        });
+        var updatedVariants = newVariants.length > 0 ? [].concat(_toConsumableArray(old), _toConsumableArray(newVariants)) : old;
+        LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Added ").concat(newVariants.length, " new variants to productVariants, total: ").concat(updatedVariants.length));
+        return updatedVariants;
+      });
+      setLoading(false);
+    })["catch"](function (error) {
+      LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading product"), {
+        cause: error
+      }));
+      setError(true);
+      setLoading(false);
+    });
+  }, [selectedProduct, productVariants, fetchProducts, widgetId, widgetType]);
+  var setSelectedProductId = useCallback(/*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(productId) {
+      var product, _variants, _product;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] setSelectedProductId called with productId: ").concat(productId));
+
+            // If a product is selected that is not in the productVariants list,
+            // fetch the variants for that product and append them to the productVariants list
+            product = productVariants.find(function (p) {
+              return p._id === productId;
+            });
+            if (!product) {
+              _context3.next = 6;
               break;
-            case 6:
-              // Fetch all products in parallel
-              productsPromises = ids.map(function (id) {
-                return handler.productHandler.apiGetProductVariants(id, true);
-              });
-              _context2.next = 9;
-              return Promise.all(productsPromises);
-            case 9:
-              productsResults = _context2.sent;
-              // Flatten the array of arrays into a single array of variants
-              allProducts = productsResults.flat();
-              setProductVariants(allProducts);
-              newVariants = allProducts;
-            case 13:
-              // Log business events for loaded products
-              _iterator = _createForOfIteratorHelper(newVariants);
-              _context2.prev = 14;
-              _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
-                var product, matchingProductId;
-                return _regeneratorRuntime.wrap(function _loop$(_context) {
-                  while (1) switch (_context.prev = _context.next) {
-                    case 0:
-                      product = _step.value;
-                      matchingProductId = ids.find(function (id) {
-                        return product._id === id;
-                      });
-                      if (matchingProductId) {
-                        LOG.businessEvent('onLoadProductPDP', 'ProductDetailPage', 'Neues Product in PDP geladen.', {
-                          productId: matchingProductId,
-                          catalogName: product.modelName,
-                          catalogCodex: product.catCodex
-                        });
-                      }
-                    case 3:
-                    case "end":
-                      return _context.stop();
-                  }
-                }, _loop);
+            }
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " found in current variants, setting as selected"));
+            setSelectedProduct(product);
+            return _context3.abrupt("return");
+          case 6:
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found in current variants, fetching variants for it"));
+            _context3.prev = 7;
+            setError(false);
+            setLoading(true);
+            _context3.next = 12;
+            return fetchProducts([productId]);
+          case 12:
+            _variants = _context3.sent;
+            setProductVariants(function (old) {
+              // Prevent duplicate products
+              var existingIds = new Set(old.map(function (p) {
+                return p._id;
+              }));
+              var newVariants = _variants.filter(function (v) {
+                return !existingIds.has(v._id);
               });
-              _iterator.s();
-            case 17:
-              if ((_step = _iterator.n()).done) {
-                _context2.next = 21;
-                break;
-              }
-              return _context2.delegateYield(_loop(), "t0", 19);
-            case 19:
-              _context2.next = 17;
-              break;
-            case 21:
-              _context2.next = 26;
-              break;
-            case 23:
-              _context2.prev = 23;
-              _context2.t1 = _context2["catch"](14);
-              _iterator.e(_context2.t1);
-            case 26:
-              _context2.prev = 26;
-              _iterator.f();
-              return _context2.finish(26);
-            case 29:
-              onProductLoaded === null || onProductLoaded === void 0 || onProductLoaded(newVariants);
-              _context2.next = 36;
+              var updatedVariants = [].concat(_toConsumableArray(old), _toConsumableArray(newVariants));
+              LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Added ").concat(newVariants.length, " new variants to productVariants, total: ").concat(updatedVariants.length));
+              return updatedVariants;
+            });
+            _product = _variants.find(function (p) {
+              return p._id === productId;
+            });
+            if (!_product) {
+              _context3.next = 20;
               break;
-            case 32:
-              _context2.prev = 32;
-              _context2.t2 = _context2["catch"](0);
-              LOG.error(new DivaError('Error loading products', {
-                cause: _context2.t2
-              }));
-              setError(true);
-            case 36:
-              _context2.prev = 36;
-              setLoading(false);
-              return _context2.finish(36);
-            case 39:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee, null, [[0, 32, 36, 39], [14, 23, 26, 29]]);
-      }));
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    })()(productIds);
-  }, [variants, productIds]);
+            }
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Setting product ").concat(productId, " as selected after fetching"));
+            setSelectedProduct(_product);
+            _context3.next = 21;
+            break;
+          case 20:
+            throw new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found"));
+          case 21:
+            _context3.next = 27;
+            break;
+          case 23:
+            _context3.prev = 23;
+            _context3.t0 = _context3["catch"](7);
+            LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading product"), {
+              cause: _context3.t0
+            }));
+            setError(true);
+          case 27:
+            _context3.prev = 27;
+            setLoading(false);
+            return _context3.finish(27);
+          case 30:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[7, 23, 27, 30]]);
+    }));
+    return function (_x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [productVariants, fetchProducts, setSelectedProduct, widgetId, widgetType]);
   return {
     productVariants: productVariants,
     error: error,
-    loading: loading
+    loading: loading,
+    selectedProduct: selectedProduct,
+    setSelectedProductId: setSelectedProductId
   };
 }
 
@@ -596,7 +896,7 @@ var css_248z$1 = ".gallery-XR09O .gallery-thumb .swiper-slide {\n  opacity: 0.4;
 styleInject(css_248z$1);
 
 var galleryAdditional = "gallery-additional-oIgEY";
-var css_248z = ".gallery-additional-oIgEY.diva-widget-gallery {\n  width: 100%;\n  height: 100%;\n  --swiper-navigation-color: #bbb;\n  --swiper-navigation-sides-offset: 4px;\n}\n\n.gallery-additional-oIgEY .gallery-main {\n  height: 85%;\n}\n\n.gallery-additional-oIgEY .gallery-thumb {\n  height: 15%;\n}\n\n.gallery-additional-oIgEY .gallery-image,\n.gallery-additional-oIgEY .gallery-image-thumb {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: scale-down;\n     object-fit: scale-down;\n}\n\n.gallery-additional-oIgEY .gallery-image-thumb {\n  cursor: pointer;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-main {\n  height: 100%;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-thumb {\n  display: none;\n}\n\n.gallery-additional-oIgEY .gallery-page-number {\n  position: absolute;\n  bottom: 16px;\n  left: 16px;\n  border-radius: 15px;\n  z-index: 1000;\n  padding: 0 16px;\n}\n";
+var css_248z = ".gallery-additional-oIgEY.diva-widget-gallery {\n  width: 100%;\n  height: 100%;\n  --swiper-navigation-color: #bbb;\n  --swiper-navigation-sides-offset: 4px;\n}\n\n.gallery-additional-oIgEY .gallery-main {\n  height: 85%;\n}\n\n.gallery-additional-oIgEY .gallery-thumb {\n  height: 15%;\n}\n\n.gallery-additional-oIgEY .diva-widget-mediaitem,\n.gallery-additional-oIgEY .gallery-image-thumb {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: scale-down;\n     object-fit: scale-down;\n}\n\n.gallery-additional-oIgEY .gallery-image-thumb {\n  cursor: pointer;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-main {\n  height: 100%;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-thumb {\n  display: none;\n}\n\n.gallery-additional-oIgEY .gallery-page-number {\n  position: absolute;\n  bottom: 16px;\n  left: 16px;\n  border-radius: 15px;\n  z-index: 1000;\n  padding: 0 16px;\n}\n";
 styleInject(css_248z);
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

package/build/types/widget-library/src/hooks/useGlobalCache.d.ts

@@ -0,0 +1,62 @@
+interface CacheEntry<T> {
+    /**
+     * The actual data after the request is resolved
+     */
+    data: T[] | null;
+    /**
+     * The promise for the request
+     */
+    promise: Promise<T[]> | null;
+    /**
+     * The error if the request failed
+     */
+    error: Error | null;
+    /**
+     * Timestamp when the entry was last updated
+     */
+    timestamp: number;
+}
+interface DivaWidgetCache {
+    /**
+     * Get data from cache or fetch if not available
+     * Implements request deduplication - multiple components requesting the same data
+     * will share the same promise
+     * @param key - Cache key (product ID)
+     * @param fetcher - Function to fetch data
+     * @returns Promise that resolves to the data
+     */
+    getOrFetch: <T>(key: string, fetcher: () => Promise<T[]>) => Promise<T[]>;
+    /**
+     * Clear a specific cache entry
+     * @param key - Cache key to clear
+     */
+    clear: (key: string) => void;
+    /**
+     * Clear all cache entries
+     */
+    clearAll: () => void;
+}
+interface UseGlobalCacheProps {
+    /**
+     * Unique widget instance ID, used for events and logging
+     */
+    uniqueWidgetId: string;
+    /**
+     * Widget type, used for events and logging
+     */
+    widgetType: string;
+}
+declare global {
+    interface Window {
+        __divaWidgetCache: {
+            cache: Map<string, CacheEntry<any>>;
+        };
+    }
+}
+/**
+ * Global cache for shared data between widgets of a website
+ * Simple implementation with request deduplication
+ */
+export declare function useGlobalCache({ uniqueWidgetId, widgetType }: UseGlobalCacheProps): DivaWidgetCache;
+export {};
+//# sourceMappingURL=useGlobalCache.d.ts.map

package/build/types/widget-library/src/hooks/useGlobalCache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalCache.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useGlobalCache.ts"],"names":[],"mappings":"AAKA,UAAU,UAAU,CAAC,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,eAAe;IACvB;;;;;;;OAOG;IACH,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1E;;;OAGG;IACH,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,mBAAmB;IAC3B;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,iBAAiB,EAAE;YACjB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;SACrC,CAAC;KACH;CACF;AASD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,mBAAmB,GAAG,eAAe,CAwFnG"}

package/build/types/widget-library/src/hooks/useGlobalSelectedProduct.d.ts

@@ -0,0 +1,29 @@
+import { ProductData } from '@crystaldesign/diva-core';
+interface UseGlobalSelectedProductProps {
+    product?: ProductData;
+    /**
+     * Unique widget instance ID, used for events and logging
+     */
+    uniqueWidgetId: string;
+    /**
+     * Widget type, used for events and logging
+     */
+    widgetType: string;
+}
+interface UseGlobalSelectedProductReturn {
+    selectedProduct: ProductData | undefined;
+    setSelectedProduct: (product: ProductData) => void;
+}
+/**
+ * Hook to get the globally selected product
+ *
+ * Initially and when the product changes, it gets selected.
+ * When ever the selected product is changed, an event is dispatched to notify other widgets, so they can also set the new product as selected.
+ * The hook also listens for product selection events from other widgets and updates the selected product accordingly.
+ *
+ * @param product - The product to select initially
+ * @returns The selected product and a function to set the selected product
+ */
+export declare function useGlobalSelectedProduct({ product, uniqueWidgetId, widgetType }: UseGlobalSelectedProductProps): UseGlobalSelectedProductReturn;
+export {};
+//# sourceMappingURL=useGlobalSelectedProduct.d.ts.map

package/build/types/widget-library/src/hooks/useGlobalSelectedProduct.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalSelectedProduct.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useGlobalSelectedProduct.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIlE,UAAU,6BAA6B;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,8BAA8B;IACtC,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC,kBAAkB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACpD;AAYD;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,6BAA6B,GAAG,8BAA8B,CA6F/I"}

package/build/types/widget-library/src/hooks/useProductData.d.ts

@@ -1,12 +1,17 @@
 import { ProductData } from '@crystaldesign/diva-core';
 export interface UseProductDataProps {
-    productIds?: string[];
+    productIds?: string[] | string;
     variants?: ProductData[];
-    onProductLoaded?: (variants: ProductData[]) => void;
+    /**
+     * Widget type, used for logging
+     */
+    widgetType: string;
 }
-export declare function useProductData({ productIds, variants, onProductLoaded }: UseProductDataProps): {
+export declare function useProductData({ productIds, variants, widgetType }: UseProductDataProps): {
     productVariants: ProductData[];
     error: boolean;
     loading: boolean;
+    selectedProduct: ProductData | undefined;
+    setSelectedProductId: (productId: string) => Promise<void>;
 };
 //# sourceMappingURL=useProductData.d.ts.map

package/build/types/widget-library/src/hooks/useProductData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProductData.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductData.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAA0B,MAAM,0BAA0B,CAAC;AAI1F,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,mBAAmB;;;;EAyD5F"}
+{"version":3,"file":"useProductData.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductData.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAA0B,MAAM,0BAA0B,CAAC;AAM1F,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,mBAAmB;;;;;sCAoGlE,MAAM;EA6C3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/widget-library",
-  "version": "25.8.0-beta.5",
+  "version": "25.8.0-beta.7",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -36,5 +36,5 @@
     "suiteName": "widget-library",
     "outputDirectory": "./test-reports"
   },
-  "gitHead": "76b96b4a0137b36b1f7c4cf20ef39045040a2491"
+  "gitHead": "d160f39c475acc47e32f9641b14a25de2c27cfd4"
 }