@crystaldesign/widget-library 25.8.0-beta.18 → 25.8.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { useEffect, useMemo, useCallback, useState, useRef, forwardRef } from 'react';
1
+ import { useEffect, useMemo, useState, forwardRef, useRef } from 'react';
2
2
  import { useDivaCore, getLogger, DivaError, useTranslation } from '@crystaldesign/diva-core';
3
3
  import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -31,12 +31,10 @@ import { flatten } from 'flat';
31
31
  *
32
32
  * @param url an url to a css file
33
33
  * @param css the css content as text
34
- * @param widgetId the id of the element to update
35
34
  */
36
35
  function updateCssInDom (url, css) {
37
- var widgetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
38
36
  if (url) {
39
- var element = document.getElementById('DIVA-WIDGET-STYLE-URL' + widgetType);
37
+ var element = document.getElementById('DIVA-WIDGET-STYLE-URL');
40
38
  if (element) {
41
39
  var _element$parentNode;
42
40
  (_element$parentNode = element.parentNode) === null || _element$parentNode === void 0 || _element$parentNode.removeChild(element);
@@ -44,30 +42,30 @@ function updateCssInDom (url, css) {
44
42
  element = document.createElement('link');
45
43
  element.rel = 'stylesheet';
46
44
  element.type = 'text/css';
47
- element.id = 'DIVA-WIDGET-STYLE-URL' + widgetType;
45
+ element.id = 'DIVA-WIDGET-STYLE-URL';
48
46
  element.href = url;
49
47
  document.head.appendChild(element);
50
48
  }
51
49
  if (css) {
52
50
  var finalCss = Array.isArray(css) ? css.join(' ') : css;
53
- var _element = document.getElementById('DIVA-WIDGET-STYLE' + widgetType);
51
+ var _element = document.getElementById('DIVA-WIDGET-STYLE');
54
52
  if (_element) {
55
53
  var _element$parentNode2;
56
54
  (_element$parentNode2 = _element.parentNode) === null || _element$parentNode2 === void 0 || _element$parentNode2.removeChild(_element);
57
55
  }
58
56
  _element = document.createElement('style');
59
57
  _element.type = 'text/css';
60
- _element.id = 'DIVA-WIDGET-STYLE' + widgetType;
58
+ _element.id = 'DIVA-WIDGET-STYLE';
61
59
  _element.appendChild(document.createTextNode(finalCss));
62
60
  document.head.appendChild(_element);
63
61
  }
64
62
  }
65
63
 
66
- function useCss(settings, defaultCss, widgetType) {
64
+ function useCss(settings, defaultCss) {
67
65
  useEffect(function () {
68
66
  var _settings$css;
69
- updateCssInDom(settings === null || settings === void 0 ? void 0 : settings.cssUrl, (_settings$css = settings === null || settings === void 0 ? void 0 : settings.css) !== null && _settings$css !== void 0 ? _settings$css : defaultCss, widgetType);
70
- }, [settings === null || settings === void 0 ? void 0 : settings.cssUrl, settings === null || settings === void 0 ? void 0 : settings.css, widgetType]);
67
+ updateCssInDom(settings === null || settings === void 0 ? void 0 : settings.cssUrl, (_settings$css = settings === null || settings === void 0 ? void 0 : settings.css) !== null && _settings$css !== void 0 ? _settings$css : defaultCss);
68
+ }, [settings === null || settings === void 0 ? void 0 : settings.cssUrl, settings === null || settings === void 0 ? void 0 : settings.css]);
71
69
  }
72
70
 
73
71
  function useConfiguration(type, componentSettings) {
@@ -82,523 +80,142 @@ function useConfiguration(type, componentSettings) {
82
80
  return settings;
83
81
  }
84
82
 
85
- var LOG$2 = getLogger('DivaWidget', 'useGlobalCache');
86
-
87
- // Global cache for shared data between widgets
88
-
89
- // Initialize global cache if not exists
90
- if (typeof window !== 'undefined' && !window.__divaWidgetCache) {
91
- window.__divaWidgetCache = {
92
- cache: new Map()
93
- };
94
- }
95
-
96
- /**
97
- * Global cache for shared data between widgets of a website
98
- * Simple implementation with request deduplication
99
- */
100
- function useGlobalCache(_ref) {
101
- var uniqueWidgetId = _ref.uniqueWidgetId,
102
- widgetType = _ref.widgetType;
103
- var getOrFetch = useCallback(function (key, fetcher) {
104
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] getOrFetch called for key: ").concat(key));
105
- if (typeof window === 'undefined' || !window.__divaWidgetCache) {
106
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] No global cache available, fetching directly for key: ").concat(key));
107
- return fetcher();
108
- }
109
- var cache = window.__divaWidgetCache.cache;
110
- var entry = cache.get(key);
111
-
112
- // If we have cached data, return it immediately
113
- if (entry !== null && entry !== void 0 && entry.data) {
114
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache hit for key: ").concat(key, ", returning cached data"));
115
- return Promise.resolve(entry.data);
116
- }
117
-
118
- // If there's already a pending request, return that promise (deduplication)
119
- if (entry !== null && entry !== void 0 && entry.promise) {
120
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache hit for pending request, returning existing promise for key: ").concat(key));
121
- return entry.promise;
122
- }
123
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache miss for key: ").concat(key, ", creating new request"));
124
-
125
- // Create new entry or reset existing one
126
- var newEntry = {
127
- data: null,
128
- promise: null,
129
- error: null,
130
- timestamp: Date.now()
131
- };
132
-
133
- // Create new request
134
- var promise = fetcher().then(function (data) {
135
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Request successful for key: ").concat(key, ", updating cache with ").concat(data.length, " items"));
136
- var currentEntry = cache.get(key);
137
- if (currentEntry) {
138
- currentEntry.data = data;
139
- currentEntry.promise = null;
140
- currentEntry.error = null;
141
- currentEntry.timestamp = Date.now();
142
- }
143
- return data;
144
- })["catch"](function (error) {
145
- LOG$2.error(new DivaError("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Request failed for key: ").concat(key), {
146
- cause: error
147
- }));
148
- var currentEntry = cache.get(key);
149
- if (currentEntry) {
150
- currentEntry.promise = null;
151
- currentEntry.error = error;
152
- currentEntry.timestamp = Date.now();
153
- }
154
- throw error;
155
- });
156
- newEntry.promise = promise;
157
- cache.set(key, newEntry);
158
- return promise;
159
- }, [uniqueWidgetId, widgetType]);
160
- var clear = useCallback(function (key) {
161
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Clearing cache entry for key: ").concat(key));
162
- if (typeof window !== 'undefined' && window.__divaWidgetCache) {
163
- var deleted = window.__divaWidgetCache.cache["delete"](key);
164
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache entry ").concat(deleted ? 'deleted' : 'not found', " for key: ").concat(key));
165
- }
166
- }, [uniqueWidgetId, widgetType]);
167
- var clearAll = useCallback(function () {
168
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Clearing all cache entries"));
169
- if (typeof window !== 'undefined' && window.__divaWidgetCache) {
170
- var size = window.__divaWidgetCache.cache.size;
171
- window.__divaWidgetCache.cache.clear();
172
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cleared ").concat(size, " cache entries"));
173
- }
174
- }, [uniqueWidgetId, widgetType]);
175
- var setCache = useCallback(function (key, data) {
176
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Setting cache entry for key: ").concat(key));
177
- if (typeof window !== 'undefined' && window.__divaWidgetCache) {
178
- window.__divaWidgetCache.cache.set(key, data);
179
- }
180
- }, [uniqueWidgetId, widgetType]);
181
- return useMemo(function () {
182
- return {
183
- getOrFetch: getOrFetch,
184
- clear: clear,
185
- clearAll: clearAll,
186
- setCache: setCache
187
- };
188
- }, [getOrFetch, clear, clearAll, setCache]);
189
- }
190
-
191
- var LOG$1 = getLogger('DivaWidget', 'useGlobalSelectedProduct');
192
- var EVENT_NAME_PRODUCT_SELECTED = 'diva:widget:product-selected';
193
-
194
- /**
195
- * Hook to get the globally selected product
196
- *
197
- * Initially and when the product changes, it gets selected.
198
- * 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.
199
- * The hook also listens for product selection events from other widgets and updates the selected product accordingly.
200
- *
201
- * @param product - The product to select initially
202
- * @returns The selected product and a function to set the selected product
203
- */
204
- function useGlobalSelectedProduct(_ref) {
205
- var selectedProduct = _ref.selectedProduct,
206
- uniqueWidgetId = _ref.uniqueWidgetId,
207
- widgetType = _ref.widgetType,
208
- handleSelectedProductChange = _ref.handleSelectedProductChange;
209
- // Listen to product selection events from other widgets
210
- var handleProductSelection = useCallback(function (event) {
211
- var customEvent = event;
212
- var _customEvent$detail = customEvent.detail,
213
- product = _customEvent$detail.product,
214
- sourceId = _customEvent$detail.sourceId;
215
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Received product selection event from ").concat(sourceId, ", product: ").concat(product._id));
216
-
217
- // Ignore our own events
218
- if (sourceId === uniqueWidgetId) {
219
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring own event"));
220
- return;
221
- }
222
-
223
- // Ignore if product hasn't actually changed
224
- if ((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) === product._id) {
225
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring event - product already selected: ").concat(product._id));
226
- return;
227
- }
228
- 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));
229
- handleSelectedProductChange(product);
230
- }, [uniqueWidgetId, selectedProduct, widgetType]);
231
-
232
- // Stable event listener setup
233
- useEffect(function () {
234
- window.addEventListener(EVENT_NAME_PRODUCT_SELECTED, handleProductSelection);
235
- return function () {
236
- window.removeEventListener(EVENT_NAME_PRODUCT_SELECTED, handleProductSelection);
237
- };
238
- }, [handleProductSelection]);
239
- var notifyProductChanged = useCallback(function (product) {
240
- // Dispatch event to notify other widgets
241
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Dispatching product selection event to notify other widgets"));
242
- window.dispatchEvent(new CustomEvent(EVENT_NAME_PRODUCT_SELECTED, {
243
- detail: {
244
- product: product,
245
- sourceId: uniqueWidgetId
246
- }
247
- }));
248
- }, [uniqueWidgetId, widgetType]);
249
- return {
250
- notifyProductChanged: notifyProductChanged
251
- };
252
- }
253
-
83
+ 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; } } }; }
84
+ 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; } }
85
+ 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; }
254
86
  var LOG = getLogger('DivaWidget', 'useProductData');
255
- // Generate unique widget instance ID
256
- var generateWidgetId = function generateWidgetId() {
257
- return "widget-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
258
- };
259
87
  function useProductData(_ref) {
260
88
  var productIds = _ref.productIds,
261
89
  variants = _ref.variants,
262
- widgetType = _ref.widgetType;
263
- // Generate stable widget ID that persists for the lifetime of this hook instance
264
- // Function to handle selectedProduct changes
265
-
266
- var widgetId = useMemo(function () {
267
- return generateWidgetId();
268
- }, []);
90
+ onProductLoaded = _ref.onProductLoaded;
269
91
  var _useDivaCore = useDivaCore(),
270
92
  handler = _useDivaCore.handler;
271
- var _useGlobalCache = useGlobalCache({
272
- uniqueWidgetId: widgetId,
273
- widgetType: widgetType
274
- }),
275
- getOrFetch = _useGlobalCache.getOrFetch,
276
- setCache = _useGlobalCache.setCache;
277
- var _useState = useState([]),
93
+ var _useState = useState(variants !== null && variants !== void 0 ? variants : []),
278
94
  _useState2 = _slicedToArray(_useState, 2),
279
95
  productVariants = _useState2[0],
280
96
  setProductVariants = _useState2[1];
281
- var _useState3 = useState(),
97
+ var _useState3 = useState(false),
282
98
  _useState4 = _slicedToArray(_useState3, 2),
283
- selectedProduct = _useState4[0],
284
- setSelectedProduct = _useState4[1];
285
- var _useState5 = useState(false),
99
+ error = _useState4[0],
100
+ setError = _useState4[1];
101
+ var _useState5 = useState(true),
286
102
  _useState6 = _slicedToArray(_useState5, 2),
287
103
  loading = _useState6[0],
288
104
  setLoading = _useState6[1];
289
- var _useState7 = useState(false),
290
- _useState8 = _slicedToArray(_useState7, 2),
291
- error = _useState8[0],
292
- setError = _useState8[1];
293
- var fetchProducts = useCallback(/*#__PURE__*/function () {
294
- var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ids) {
295
- var productPromises, results, flattenedResults;
296
- return _regeneratorRuntime.wrap(function _callee2$(_context2) {
297
- while (1) switch (_context2.prev = _context2.next) {
298
- case 0:
299
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] fetchProducts called with ids: ").concat(ids.join(', ')));
300
- if (!variants) {
301
- _context2.next = 4;
105
+ useEffect(function () {
106
+ setError(false);
107
+ setLoading(true);
108
+ if (!(productIds !== null && productIds !== void 0 && productIds.length)) {
109
+ LOG.error(new DivaError('productIds array is required and cannot be empty'));
110
+ setError(true);
111
+ setLoading(false);
112
+ return;
113
+ }
114
+ (function () {
115
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(ids) {
116
+ var newVariants, productsPromises, productsResults, allProducts, _iterator, _step, _loop;
117
+ return _regeneratorRuntime.wrap(function _callee$(_context2) {
118
+ while (1) switch (_context2.prev = _context2.next) {
119
+ case 0:
120
+ _context2.prev = 0;
121
+ if (!variants) {
122
+ _context2.next = 6;
123
+ break;
124
+ }
125
+ setProductVariants(variants);
126
+ newVariants = variants;
127
+ _context2.next = 13;
302
128
  break;
303
- }
304
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Using provided variants instead of fetching"));
305
- return _context2.abrupt("return", variants);
306
- case 4:
307
- // Create promises for all products (cached or to be fetched) to preserve order
308
- productPromises = ids.map(/*#__PURE__*/function () {
309
- var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
310
- return _regeneratorRuntime.wrap(function _callee$(_context) {
129
+ case 6:
130
+ // Fetch all products in parallel
131
+ productsPromises = ids.map(function (id) {
132
+ return handler.productHandler.apiGetProductVariants(id, true);
133
+ });
134
+ _context2.next = 9;
135
+ return Promise.all(productsPromises);
136
+ case 9:
137
+ productsResults = _context2.sent;
138
+ // Flatten the array of arrays into a single array of variants
139
+ allProducts = productsResults.flat();
140
+ setProductVariants(allProducts);
141
+ newVariants = allProducts;
142
+ case 13:
143
+ // Log business events for loaded products
144
+ _iterator = _createForOfIteratorHelper(newVariants);
145
+ _context2.prev = 14;
146
+ _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
147
+ var product, matchingProductId;
148
+ return _regeneratorRuntime.wrap(function _loop$(_context) {
311
149
  while (1) switch (_context.prev = _context.next) {
312
150
  case 0:
313
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Fetching product variants for id: ").concat(id));
314
- return _context.abrupt("return", getOrFetch(id, function () {
315
- return handler.productHandler.apiGetProductVariants(id, true);
316
- }));
317
- case 2:
151
+ product = _step.value;
152
+ matchingProductId = ids.find(function (id) {
153
+ return product._id === id;
154
+ });
155
+ if (matchingProductId) {
156
+ LOG.businessEvent('onLoadProductPDP', 'ProductDetailPage', 'Neues Product in PDP geladen.', {
157
+ productId: matchingProductId,
158
+ catalogName: product.modelName,
159
+ catalogCodex: product.catCodex
160
+ });
161
+ }
162
+ case 3:
318
163
  case "end":
319
164
  return _context.stop();
320
165
  }
321
- }, _callee);
322
- }));
323
- return function (_x2) {
324
- return _ref3.apply(this, arguments);
325
- };
326
- }());
327
- _context2.next = 7;
328
- return Promise.all(productPromises);
329
- case 7:
330
- results = _context2.sent;
331
- flattenedResults = results.flat();
332
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Fetched ").concat(flattenedResults.length, " total product variants"));
333
- return _context2.abrupt("return", flattenedResults);
334
- case 11:
335
- case "end":
336
- return _context2.stop();
337
- }
338
- }, _callee2);
339
- }));
340
- return function (_x) {
341
- return _ref2.apply(this, arguments);
342
- };
343
- }(), [handler.productHandler, getOrFetch, variants, widgetId, widgetType]);
344
-
345
- // Function to handle selectedProduct changes
346
- var handleSelectedProductChange = useCallback(/*#__PURE__*/function () {
347
- var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(newProduct) {
348
- var _variants;
349
- return _regeneratorRuntime.wrap(function _callee3$(_context3) {
350
- while (1) switch (_context3.prev = _context3.next) {
351
- case 0:
352
- if (!(!newProduct || productVariants.find(function (p) {
353
- return p._id === newProduct._id;
354
- }))) {
355
- _context3.next = 4;
166
+ }, _loop);
167
+ });
168
+ _iterator.s();
169
+ case 17:
170
+ if ((_step = _iterator.n()).done) {
171
+ _context2.next = 21;
172
+ break;
173
+ }
174
+ return _context2.delegateYield(_loop(), "t0", 19);
175
+ case 19:
176
+ _context2.next = 17;
356
177
  break;
357
- }
358
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Selected product ").concat(newProduct._id, " already in current variants, setting as selected"));
359
- setSelectedProduct(newProduct);
360
- return _context3.abrupt("return");
361
- case 4:
362
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Selected product ").concat(newProduct._id, " not in current variants, fetching variants for it"));
363
- setLoading(true);
364
- setError(false);
365
- _context3.prev = 7;
366
- _context3.next = 10;
367
- return fetchProducts([newProduct._id]);
368
- case 10:
369
- _variants = _context3.sent;
370
- setProductVariants(_variants);
371
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] New ").concat(_variants.length, " variants to productVariants"));
372
- setLoading(false);
373
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Setting product ").concat(newProduct._id, " as selected after fetching"));
374
- setSelectedProduct(newProduct);
375
- _context3.next = 23;
376
- break;
377
- case 18:
378
- _context3.prev = 18;
379
- _context3.t0 = _context3["catch"](7);
380
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading product"), {
381
- cause: _context3.t0
382
- }));
383
- setError(true);
384
- setLoading(false);
385
- case 23:
386
- case "end":
387
- return _context3.stop();
388
- }
389
- }, _callee3, null, [[7, 18]]);
390
- }));
391
- return function (_x3) {
392
- return _ref4.apply(this, arguments);
393
- };
394
- }(), [selectedProduct, productVariants, fetchProducts, widgetId, widgetType]);
395
- var _useGlobalSelectedPro = useGlobalSelectedProduct({
396
- selectedProduct: selectedProduct,
397
- uniqueWidgetId: widgetId,
398
- widgetType: widgetType,
399
- handleSelectedProductChange: handleSelectedProductChange
400
- }),
401
- notifyProductChanged = _useGlobalSelectedPro.notifyProductChanged;
402
- var normalizedProductIds = useMemo(function () {
403
- if (!productIds) return [];
404
- return Array.isArray(productIds) ? productIds : [productIds];
405
- }, [productIds]);
406
-
407
- // Main effect for loading products when productIds or variants change
408
- useEffect(function () {
409
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Main effect triggered with normalizedProductIds: ").concat(normalizedProductIds.join(', ')));
410
- if (!normalizedProductIds.length) {
411
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] ProductIds array is required and cannot be empty")));
412
- setError(true);
413
- setLoading(false);
414
- setProductVariants([]);
415
- return;
416
- }
417
- setError(false);
418
- setLoading(true);
419
- fetchProducts(normalizedProductIds).then(function (variants) {
420
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Successfully loaded ").concat(variants.length, " product variants"));
421
- setProductVariants(variants);
422
- var variantToUse = variants.find(function (v) {
423
- return v._id === normalizedProductIds[0];
424
- });
425
- setSelectedProduct(variantToUse !== null && variantToUse !== void 0 ? variantToUse : variants[0]);
426
- setLoading(false);
427
- })["catch"](function (error) {
428
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading products"), {
429
- cause: error
430
- }));
431
- setError(true);
432
- setLoading(false);
433
- setProductVariants([]);
434
- });
435
- }, [normalizedProductIds]);
436
- var setSelectedProductId = useCallback(/*#__PURE__*/function () {
437
- var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(productId) {
438
- var product, _variants2, _product;
439
- return _regeneratorRuntime.wrap(function _callee4$(_context4) {
440
- while (1) switch (_context4.prev = _context4.next) {
441
- case 0:
442
- if (!((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) === productId)) {
443
- _context4.next = 3;
178
+ case 21:
179
+ _context2.next = 26;
444
180
  break;
445
- }
446
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " already selected, skipping"));
447
- return _context4.abrupt("return");
448
- case 3:
449
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] setSelectedProductId called with productId: ").concat(productId));
450
-
451
- // If a product is selected that is not in the productVariants list,
452
- // fetch the variants for that product and append them to the productVariants list
453
- product = productVariants.find(function (p) {
454
- return p._id === productId;
455
- });
456
- if (!product) {
457
- _context4.next = 10;
458
- break;
459
- }
460
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " found in current variants, setting as selected"));
461
- setSelectedProduct(product);
462
- notifyProductChanged(product);
463
- return _context4.abrupt("return");
464
- case 10:
465
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found in current variants, fetching variants for it"));
466
- _context4.prev = 11;
467
- setError(false);
468
- setLoading(true);
469
- _context4.next = 16;
470
- return fetchProducts([productId]);
471
- case 16:
472
- _variants2 = _context4.sent;
473
- setProductVariants(_variants2);
474
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] New ").concat(_variants2.length, " variants to productVariants"));
475
- _product = _variants2.find(function (p) {
476
- return p._id === productId;
477
- });
478
- if (!_product) {
479
- _context4.next = 26;
181
+ case 23:
182
+ _context2.prev = 23;
183
+ _context2.t1 = _context2["catch"](14);
184
+ _iterator.e(_context2.t1);
185
+ case 26:
186
+ _context2.prev = 26;
187
+ _iterator.f();
188
+ return _context2.finish(26);
189
+ case 29:
190
+ onProductLoaded === null || onProductLoaded === void 0 || onProductLoaded(newVariants);
191
+ _context2.next = 36;
480
192
  break;
481
- }
482
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Setting product ").concat(productId, " as selected after fetching"));
483
- setSelectedProduct(_product);
484
- notifyProductChanged(_product);
485
- _context4.next = 27;
486
- break;
487
- case 26:
488
- throw new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found"));
489
- case 27:
490
- _context4.next = 33;
491
- break;
492
- case 29:
493
- _context4.prev = 29;
494
- _context4.t0 = _context4["catch"](11);
495
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading product"), {
496
- cause: _context4.t0
497
- }));
498
- setError(true);
499
- case 33:
500
- _context4.prev = 33;
501
- setLoading(false);
502
- return _context4.finish(33);
503
- case 36:
504
- case "end":
505
- return _context4.stop();
506
- }
507
- }, _callee4, null, [[11, 29, 33, 36]]);
508
- }));
509
- return function (_x4) {
510
- return _ref5.apply(this, arguments);
511
- };
512
- }(), [selectedProduct, productVariants, fetchProducts, setSelectedProduct, widgetId, widgetType]);
513
- function getProductsByDivaNrs(_x5) {
514
- return _getProductsByDivaNrs.apply(this, arguments);
515
- }
516
- function _getProductsByDivaNrs() {
517
- _getProductsByDivaNrs = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(divaNrs) {
518
- var products;
519
- return _regeneratorRuntime.wrap(function _callee5$(_context5) {
520
- while (1) switch (_context5.prev = _context5.next) {
521
- case 0:
522
- // Sort divaNrs array to ensure consistent cache keys
523
- divaNrs.sort();
524
- _context5.next = 3;
525
- return getOrFetch('divaNrs' + divaNrs.join(','), function () {
526
- return handler.productHandler.apiGetProductByQuery([{
527
- id: 'divaNr',
528
- op: 'in',
529
- value: divaNrs.join(',').replaceAll('"', '')
530
- }, {
531
- id: 'baseProduct',
532
- op: 'eq',
533
- value: false
534
- }], 1000, false);
535
- });
536
- case 3:
537
- products = _context5.sent;
538
- return _context5.abrupt("return", products);
539
- case 5:
540
- case "end":
541
- return _context5.stop();
542
- }
543
- }, _callee5);
544
- }));
545
- return _getProductsByDivaNrs.apply(this, arguments);
546
- }
547
- function getProductByDivaNrAndVariantId(_x6, _x7) {
548
- return _getProductByDivaNrAndVariantId.apply(this, arguments);
549
- }
550
- function _getProductByDivaNrAndVariantId() {
551
- _getProductByDivaNrAndVariantId = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(divaNr, variantId) {
552
- var filter, product;
553
- return _regeneratorRuntime.wrap(function _callee6$(_context6) {
554
- while (1) switch (_context6.prev = _context6.next) {
555
- case 0:
556
- filter = [{
557
- id: 'divaNr',
558
- op: 'eq',
559
- value: divaNr
560
- }, {
561
- id: 'baseProduct',
562
- op: 'eq',
563
- value: false
564
- }];
565
- if (variantId) {
566
- filter.push({
567
- id: 'variantId',
568
- op: 'eq',
569
- value: parseInt(variantId)
570
- });
571
- }
572
- _context6.next = 4;
573
- return getOrFetch('divaNr' + divaNr + 'variantId' + variantId, function () {
574
- return handler.productHandler.apiGetProductByQuery(filter, 1, false);
575
- });
576
- case 4:
577
- product = _context6.sent;
578
- return _context6.abrupt("return", product);
579
- case 6:
580
- case "end":
581
- return _context6.stop();
582
- }
583
- }, _callee6);
584
- }));
585
- return _getProductByDivaNrAndVariantId.apply(this, arguments);
586
- }
587
- function setProductCache(key, data) {
588
- setCache(key, {
589
- data: data,
590
- timestamp: Date.now()
591
- });
592
- }
193
+ case 32:
194
+ _context2.prev = 32;
195
+ _context2.t2 = _context2["catch"](0);
196
+ LOG.error(new DivaError('Error loading products', {
197
+ cause: _context2.t2
198
+ }));
199
+ setError(true);
200
+ case 36:
201
+ _context2.prev = 36;
202
+ setLoading(false);
203
+ return _context2.finish(36);
204
+ case 39:
205
+ case "end":
206
+ return _context2.stop();
207
+ }
208
+ }, _callee, null, [[0, 32, 36, 39], [14, 23, 26, 29]]);
209
+ }));
210
+ return function (_x) {
211
+ return _ref2.apply(this, arguments);
212
+ };
213
+ })()(productIds);
214
+ }, [variants, productIds]);
593
215
  return {
594
216
  productVariants: productVariants,
595
217
  error: error,
596
- loading: loading,
597
- getProductsByDivaNrs: getProductsByDivaNrs,
598
- getProductByDivaNrAndVariantId: getProductByDivaNrAndVariantId,
599
- selectedProduct: selectedProduct,
600
- setSelectedProductId: setSelectedProductId,
601
- setProductCache: setProductCache
218
+ loading: loading
602
219
  };
603
220
  }
604
221
 
@@ -668,8 +285,7 @@ function useMedia(_ref) {
668
285
  }
669
286
  newMedias = [].concat(_toConsumableArray(newMedias), _toConsumableArray(filteredMedia.map(function (media) {
670
287
  return _objectSpread$3(_objectSpread$3({}, media), {}, {
671
- productIndex: productIndex,
672
- productId: product._id
288
+ productIndex: productIndex
673
289
  });
674
290
  })));
675
291
  }
@@ -682,8 +298,7 @@ function useMedia(_ref) {
682
298
  if (add3DImageAsFallback && product.image && !hasAddedMediaForProduct) {
683
299
  newMedias.unshift({
684
300
  url: product.image,
685
- productIndex: productIndex,
686
- productId: product._id
301
+ productIndex: productIndex
687
302
  });
688
303
  }
689
304
 
@@ -691,8 +306,7 @@ function useMedia(_ref) {
691
306
  if (add2DImage && product.image2D) {
692
307
  newMedias.push({
693
308
  url: product.image2D,
694
- productIndex: productIndex,
695
- productId: product._id
309
+ productIndex: productIndex
696
310
  });
697
311
  }
698
312
  });
@@ -706,8 +320,8 @@ function useGallery(_ref) {
706
320
  functionTypes = _ref$config.functionTypes,
707
321
  add2DImage = _ref$config.add2DImage,
708
322
  add3DImageAsFallback = _ref$config.add3DImageAsFallback,
709
- currentProductId = _ref.currentProductId,
710
- setCurrentProductId = _ref.setCurrentProductId;
323
+ currentProductIndex = _ref.currentProductIndex,
324
+ setCurrentProductIndex = _ref.setCurrentProductIndex;
711
325
  var _useDivaCore = useDivaCore(),
712
326
  baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
713
327
  var _useState = useState(null),
@@ -728,22 +342,21 @@ function useGallery(_ref) {
728
342
  add2DImage: add2DImage,
729
343
  add3DImageAsFallback: add3DImageAsFallback
730
344
  });
731
- useRef(false);
732
345
 
733
346
  // Update currentMediaIndex when currentProductIndex changes from outside
734
347
  useEffect(function () {
735
348
  var _medias$currentMediaI;
736
- if (currentProductId !== undefined && ((_medias$currentMediaI = medias[currentMediaIndex]) === null || _medias$currentMediaI === void 0 ? void 0 : _medias$currentMediaI.productId) !== currentProductId) {
349
+ if (currentProductIndex !== undefined && ((_medias$currentMediaI = medias[currentMediaIndex]) === null || _medias$currentMediaI === void 0 ? void 0 : _medias$currentMediaI.productIndex) !== currentProductIndex) {
737
350
  // Find the first media index that corresponds to this product index
738
351
  var mediaIndex = medias.findIndex(function (media) {
739
- return media.productId === currentProductId;
352
+ return media.productIndex === currentProductIndex;
740
353
  });
741
354
  if (mediaIndex !== -1 && mediaIndex !== currentMediaIndex) {
742
355
  setCurrentMediaIndex(mediaIndex);
743
- swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex, 0, false);
356
+ swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex);
744
357
  }
745
358
  }
746
- }, [currentProductId]);
359
+ }, [currentProductIndex]);
747
360
  var hasSirvMedia = useMemo(function () {
748
361
  var _loop = function _loop(i) {
749
362
  if (medias.find(function (m) {
@@ -766,23 +379,29 @@ function useGallery(_ref) {
766
379
  }),
767
380
  sirvLoaded = _useSirv.sirvLoaded;
768
381
  var onSlideChange = function onSlideChange(swiper) {
769
- if (swiper.isBeginning) return;
770
382
  var newMediaIndex = swiper.realIndex;
771
- var media = medias[newMediaIndex];
772
383
  setCurrentMediaIndex(newMediaIndex);
773
- if (setCurrentProductId && media) {
774
- setCurrentProductId(media.productId);
384
+
385
+ // Get the product index corresponding to this media index
386
+ var media = medias[newMediaIndex];
387
+
388
+ // Call the external setCurrentProductIndex if provided
389
+ if (setCurrentProductIndex && media) {
390
+ setCurrentProductIndex(media.productIndex);
775
391
  }
776
392
  };
777
393
 
778
394
  // Get the current product index based on the current media index
779
- medias[currentMediaIndex];
395
+ var currentMedia = medias[currentMediaIndex];
396
+ var derivedCurrentProductIndex = currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.productIndex;
780
397
  return {
781
398
  medias: medias,
782
399
  sirvLoaded: sirvLoaded,
783
400
  thumbsSwiper: thumbsSwiper,
784
401
  swiper: swiper,
785
402
  currentIndex: currentMediaIndex,
403
+ currentProductIndex: currentProductIndex !== null && currentProductIndex !== void 0 ? currentProductIndex : derivedCurrentProductIndex,
404
+ setCurrentProductIndex: setCurrentProductIndex,
786
405
  setThumbsSwiper: setThumbsSwiper,
787
406
  setSwiper: setSwiper,
788
407
  onSlideChange: onSlideChange
@@ -894,7 +513,6 @@ var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
894
513
  videoAutolay = _ref.videoAutolay,
895
514
  config = _ref.config;
896
515
  _ref.isCurrentlyVisible;
897
- var onClick = _ref.onClick;
898
516
  var useSirv = false;
899
517
  var _useDivaCore = useDivaCore(),
900
518
  baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
@@ -925,11 +543,7 @@ var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
925
543
  }, media.url);
926
544
  return /*#__PURE__*/jsx("img", {
927
545
  className: "diva-widget-mediaitem",
928
- src: url,
929
- onClick: onClick,
930
- style: {
931
- cursor: onClick ? 'pointer' : 'default'
932
- }
546
+ src: url
933
547
  }, url);
934
548
  });
935
549
 
@@ -982,7 +596,7 @@ var css_248z$1 = ".gallery-XR09O .gallery-thumb .swiper-slide {\n opacity: 0.4;
982
596
  styleInject(css_248z$1);
983
597
 
984
598
  var galleryAdditional = "gallery-additional-oIgEY";
985
- 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";
599
+ 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";
986
600
  styleInject(css_248z);
987
601
 
988
602
  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; }
@@ -1072,7 +686,7 @@ var focusable = '.smv-cursor-zoom-in, .sirv-zoom-wrapper, .sirv-zoom-map-lens ,.
1072
686
  var noSwiping = 'canvas, model-viewer, .sirv-zoom-map, .zoom-controls, .smv-icon';
1073
687
  var Gallery = function Gallery(props) {
1074
688
  var _medias$find, _props$config$arIconP;
1075
- var _useGallery = useGallery(_objectSpread({}, props)),
689
+ var _useGallery = useGallery(props),
1076
690
  medias = _useGallery.medias,
1077
691
  thumbsSwiper = _useGallery.thumbsSwiper,
1078
692
  swiper = _useGallery.swiper,
@@ -1113,7 +727,6 @@ var Gallery = function Gallery(props) {
1113
727
  children: medias.map(function (media, i) {
1114
728
  return /*#__PURE__*/jsx(SwiperSlide, {
1115
729
  id: 'gallery media index ' + i,
1116
- "data-product-id": media.productId,
1117
730
  children: /*#__PURE__*/jsx(MediaItem, {
1118
731
  media: media,
1119
732
  config: props.config,
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,cAAc,SAAS,CAAC;AAKxB,eAAO,MAAM,OAAO,UAAW,YAAY,sBAsD1C,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,cAAc,SAAS,CAAC;AAKxB,eAAO,MAAM,OAAO,UAAW,YAAY,sBAqD1C,CAAC"}
@@ -19,13 +19,12 @@ export interface ArActionIconConfig extends BaseElementConfig {
19
19
  export interface GalleryProps {
20
20
  config: GalleryConfig;
21
21
  products: ProductData[];
22
- currentProductId?: string;
23
- setCurrentProductId?: (id: string) => void;
22
+ currentProductIndex?: number;
23
+ setCurrentProductIndex?: (index: number) => void;
24
24
  disableAnimation?: boolean;
25
25
  setCurrentMedia?: (m: MediaWithProductIndex) => void;
26
26
  }
27
27
  export interface MediaWithProductIndex extends Media {
28
28
  productIndex: number;
29
- productId: string;
30
29
  }
31
30
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;IACvE,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;IACvE,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK;IAClD,YAAY,EAAE,MAAM,CAAC;CACtB"}
@@ -1,11 +1,13 @@
1
1
  import { GalleryProps, MediaWithProductIndex } from './types';
2
2
  import { SwiperClass } from 'swiper/react';
3
- export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductId, setCurrentProductId, }: GalleryProps): {
3
+ export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductIndex, setCurrentProductIndex, }: GalleryProps): {
4
4
  medias: MediaWithProductIndex[];
5
5
  sirvLoaded: boolean;
6
6
  thumbsSwiper: SwiperClass | null;
7
7
  swiper: SwiperClass | null;
8
8
  currentIndex: number;
9
+ currentProductIndex: number;
10
+ setCurrentProductIndex: ((index: number) => void) | undefined;
9
11
  setThumbsSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
10
12
  setSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
11
13
  onSlideChange: (swiper: SwiperClass) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"useGallery.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/useGallery.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAI9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,MAAM,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAC3D,gBAAgB,EAChB,mBAAmB,GACpB,EAAE,YAAY;;;;;;;;4BAiCkB,WAAW;EAyB3C"}
1
+ {"version":3,"file":"useGallery.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/useGallery.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAI9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,MAAM,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAC3D,mBAAmB,EACnB,sBAAsB,GACvB,EAAE,YAAY;;;;;;;;;;4BA+BkB,WAAW;EA6B3C"}
@@ -8,7 +8,6 @@ type Props = {
8
8
  config: MediaItemConfig;
9
9
  isCurrentlyVisible: boolean;
10
10
  videoAutolay?: boolean;
11
- onClick?: () => void;
12
11
  };
13
12
  export declare const MediaItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLArViewerElement>>;
14
13
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MediaItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAe,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,mFAiCpB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MediaItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAe,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,SAAS,mFAiCpB,CAAC"}
@@ -1,3 +1,3 @@
1
1
  import { CssConfiguration } from '../types';
2
- export declare function useCss(settings?: CssConfiguration, defaultCss?: any, widgetType?: string): void;
2
+ export declare function useCss(settings?: CssConfiguration, defaultCss?: any): void;
3
3
  //# sourceMappingURL=useCss.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useCss.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useCss.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C,wBAAgB,MAAM,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,UAAU,CAAC,EAAE,MAAM,QAIxF"}
1
+ {"version":3,"file":"useCss.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useCss.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C,wBAAgB,MAAM,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,UAAU,CAAC,EAAE,GAAG,QAInE"}
@@ -1,20 +1,12 @@
1
1
  import { ProductData } from '@crystaldesign/diva-core';
2
2
  export interface UseProductDataProps {
3
- productIds?: string[] | string;
3
+ productIds?: string[];
4
4
  variants?: ProductData[];
5
- /**
6
- * Widget type, used for logging
7
- */
8
- widgetType: string;
5
+ onProductLoaded?: (variants: ProductData[]) => void;
9
6
  }
10
- export declare function useProductData({ productIds, variants, widgetType }: UseProductDataProps): {
7
+ export declare function useProductData({ productIds, variants, onProductLoaded }: UseProductDataProps): {
11
8
  productVariants: ProductData[];
12
9
  error: boolean;
13
10
  loading: boolean;
14
- getProductsByDivaNrs: (divaNrs: string[]) => Promise<any>;
15
- getProductByDivaNrAndVariantId: (divaNr: string, variantId?: string) => Promise<any>;
16
- selectedProduct: ProductData | undefined;
17
- setSelectedProductId: (productId: string) => Promise<void>;
18
- setProductCache: (key: string, data: any) => void;
19
11
  };
20
12
  //# sourceMappingURL=useProductData.d.ts.map
@@ -1 +1 @@
1
- {"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;;;;oCA2JzC,MAAM,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC;6CAyBd,MAAM,cAAc,MAAM,KAAG,OAAO,CAAC,GAAG,CAAC;;sCAxE3E,MAAM;2BAmGI,MAAM,QAAQ,GAAG;EAiBhD"}
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"}
@@ -3,7 +3,6 @@
3
3
  *
4
4
  * @param url an url to a css file
5
5
  * @param css the css content as text
6
- * @param widgetId the id of the element to update
7
6
  */
8
- export default function (url?: string, css?: string | string[], widgetType?: string): void;
7
+ export default function (url?: string, css?: string | string[]): void;
9
8
  //# sourceMappingURL=updateCssInDom.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"updateCssInDom.d.ts","sourceRoot":"","sources":["../../../../../src/utils/updateCssInDom.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,UAAU,GAAE,MAAW,QA0BtF"}
1
+ {"version":3,"file":"updateCssInDom.d.ts","sourceRoot":"","sources":["../../../../../src/utils/updateCssInDom.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,QA0B7D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystaldesign/widget-library",
3
- "version": "25.8.0-beta.18",
3
+ "version": "25.8.0-beta.2",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "storybook": "storybook dev -p 6006",
@@ -36,5 +36,5 @@
36
36
  "suiteName": "widget-library",
37
37
  "outputDirectory": "./test-reports"
38
38
  },
39
- "gitHead": "1abf57d9d8e3bc352974fdbc476695a794d94df7"
39
+ "gitHead": "4333eeff9a165c43b2421ffe3abb4852c6014f08"
40
40
  }
@@ -1,68 +0,0 @@
1
- interface CacheEntry<T> {
2
- /**
3
- * The actual data after the request is resolved
4
- */
5
- data: T[] | null;
6
- /**
7
- * The promise for the request
8
- */
9
- promise: Promise<T[]> | null;
10
- /**
11
- * The error if the request failed
12
- */
13
- error: Error | null;
14
- /**
15
- * Timestamp when the entry was last updated
16
- */
17
- timestamp: number;
18
- }
19
- interface DivaWidgetCache {
20
- /**
21
- * Get data from cache or fetch if not available
22
- * Implements request deduplication - multiple components requesting the same data
23
- * will share the same promise
24
- * @param key - Cache key (product ID)
25
- * @param fetcher - Function to fetch data
26
- * @returns Promise that resolves to the data
27
- */
28
- getOrFetch: <T>(key: string, fetcher: () => Promise<T[]>) => Promise<T[]>;
29
- /**
30
- * Clear a specific cache entry
31
- * @param key - Cache key to clear
32
- */
33
- clear: (key: string) => void;
34
- /**
35
- * Clear all cache entries
36
- */
37
- clearAll: () => void;
38
- /**
39
- * Set a cache entry
40
- * @param key - Cache key
41
- * @param data - Data to set
42
- */
43
- setCache: (key: string, data: any) => void;
44
- }
45
- interface UseGlobalCacheProps {
46
- /**
47
- * Unique widget instance ID, used for events and logging
48
- */
49
- uniqueWidgetId: string;
50
- /**
51
- * Widget type, used for events and logging
52
- */
53
- widgetType: string;
54
- }
55
- declare global {
56
- interface Window {
57
- __divaWidgetCache: {
58
- cache: Map<string, CacheEntry<any>>;
59
- };
60
- }
61
- }
62
- /**
63
- * Global cache for shared data between widgets of a website
64
- * Simple implementation with request deduplication
65
- */
66
- export declare function useGlobalCache({ uniqueWidgetId, widgetType }: UseGlobalCacheProps): DivaWidgetCache;
67
- export {};
68
- //# sourceMappingURL=useGlobalCache.d.ts.map
@@ -1 +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;IAErB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC5C;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,CAkGnG"}
@@ -1,32 +0,0 @@
1
- import { ProductData } from '@crystaldesign/diva-core';
2
- interface UseGlobalSelectedProductProps {
3
- selectedProduct?: ProductData;
4
- /**
5
- * Unique widget instance ID, used for events and logging
6
- */
7
- uniqueWidgetId: string;
8
- /**
9
- * Widget type, used for events and logging
10
- */
11
- widgetType: string;
12
- /**
13
- * Function to handle selected product changes
14
- */
15
- handleSelectedProductChange: (product: ProductData) => void;
16
- }
17
- interface UseGlobalSelectedProductReturn {
18
- notifyProductChanged: (product: ProductData) => void;
19
- }
20
- /**
21
- * Hook to get the globally selected product
22
- *
23
- * Initially and when the product changes, it gets selected.
24
- * 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.
25
- * The hook also listens for product selection events from other widgets and updates the selected product accordingly.
26
- *
27
- * @param product - The product to select initially
28
- * @returns The selected product and a function to set the selected product
29
- */
30
- export declare function useGlobalSelectedProduct({ selectedProduct, uniqueWidgetId, widgetType, handleSelectedProductChange, }: UseGlobalSelectedProductProps): UseGlobalSelectedProductReturn;
31
- export {};
32
- //# sourceMappingURL=useGlobalSelectedProduct.d.ts.map
@@ -1 +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,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,2BAA2B,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC7D;AAED,UAAU,8BAA8B;IACtC,oBAAoB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACtD;AAWD;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,eAAe,EACf,cAAc,EACd,UAAU,EACV,2BAA2B,GAC5B,EAAE,6BAA6B,GAAG,8BAA8B,CAsDhE"}