@crystaldesign/widget-image-carousel 25.9.0-beta.4 → 25.9.0-beta.40

package/build/esm/index.js

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useState, useEffect } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useCss, useProductData, useConfiguration } from '@crystaldesign/widget-library';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation } from 'swiper/modules';
@@ -23,6 +23,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
     globalThis.process = { env:env };
 })();
 
+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; }
 function useImageCarousel(_ref) {
   var productId = _ref.productId,
     settings = _ref.settings;
@@ -48,6 +51,15 @@ function useImageCarousel(_ref) {
     setSelectedProductId = _useProductData.setSelectedProductId,
     selectedProduct = _useProductData.selectedProduct,
     setProductCache = _useProductData.setProductCache;
+  var onClickProduct = useCallback(function (productId) {
+    setSelectedProductId(productId);
+    if (!settings.disableScrollToTop) {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+  }, [setSelectedProductId]);
   useEffect(function () {
     var loadMockups = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -121,36 +133,37 @@ function useImageCarousel(_ref) {
     media: media,
     error: error,
     loading: loading,
-    setSelectedProductId: setSelectedProductId
+    setSelectedProductId: onClickProduct
   };
   function getWallMockups(_x, _x2) {
     return _getWallMockups.apply(this, arguments);
   }
   function _getWallMockups() {
     _getWallMockups = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(product, wallMockupFunctionType) {
-      var _product$customData, _product$customData2;
-      var wallMockupDivaNrs, wallMockupProducts, optCodex, optOpvPairsToSearch, media, _loop, i;
-      return _regeneratorRuntime.wrap(function _callee2$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+      var _product$customData, _product$customData2, _product$customData3;
+      var wallMockupDivaNrs, wallMockupProducts, optCodex, opvMapping, optOpvPairsToSearch, media, _loop, i;
+      return _regeneratorRuntime.wrap(function _callee2$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
             wallMockupDivaNrs = (_product$customData = product.customData) === null || _product$customData === void 0 || (_product$customData = _product$customData['WALL_MOCKUP_DIVANRS']) === null || _product$customData === void 0 ? void 0 : _product$customData.value;
             if (wallMockupDivaNrs) {
-              _context4.next = 3;
+              _context5.next = 3;
               break;
             }
-            return _context4.abrupt("return", undefined);
+            return _context5.abrupt("return", undefined);
           case 3:
-            _context4.next = 5;
+            _context5.next = 5;
             return getProductsByDivaNrs(wallMockupDivaNrs);
           case 5:
-            wallMockupProducts = _context4.sent;
+            wallMockupProducts = _context5.sent;
             optCodex = (_product$customData2 = product.customData) === null || _product$customData2 === void 0 || (_product$customData2 = _product$customData2['OPT_TO_CHECK']) === null || _product$customData2 === void 0 ? void 0 : _product$customData2.value;
-            if (optCodex) {
-              _context4.next = 9;
+            opvMapping = (_product$customData3 = product.customData) === null || _product$customData3 === void 0 || (_product$customData3 = _product$customData3['MANUAL_OPV_MAPPING']) === null || _product$customData3 === void 0 ? void 0 : _product$customData3.value;
+            if (!(!optCodex && !opvMapping)) {
+              _context5.next = 10;
               break;
             }
-            throw new Error('OPT_TO_CHECK is not set- ProductId: ' + product._id);
-          case 9:
+            throw new Error('OPT_TO_CHECK or MANUAL_OPV_MAPPING is not set- ProductId: ' + product._id);
+          case 10:
             optOpvPairsToSearch = [];
             optCodex.forEach(function (opt) {
               var _product$configuratio;
@@ -158,30 +171,32 @@ function useImageCarousel(_ref) {
             });
             media = [];
             _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
-              var currentDivaNr, currentMockupVariants, _loop2, j;
-              return _regeneratorRuntime.wrap(function _loop$(_context3) {
-                while (1) switch (_context3.prev = _context3.next) {
+              var currentDivaNr, currentMockupVariants, foundMedia, _loop2, j, currentProducts, _iterator, _step, _loop3;
+              return _regeneratorRuntime.wrap(function _loop$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
                   case 0:
                     currentDivaNr = wallMockupDivaNrs[i];
                     currentMockupVariants = wallMockupProducts.data.filter(function (wmp) {
                       return wmp.divaNr === currentDivaNr && wmp.baseProduct === false;
                     });
+                    foundMedia = false;
                     _loop2 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop2() {
                       var variant, allMatch, _variant$media, mediaUrl;
-                      return _regeneratorRuntime.wrap(function _loop2$(_context2) {
-                        while (1) switch (_context2.prev = _context2.next) {
+                      return _regeneratorRuntime.wrap(function _loop2$(_context3) {
+                        while (1) switch (_context3.prev = _context3.next) {
                           case 0:
                             variant = currentMockupVariants[j]; // check if all opt-opv-pairs match
                             allMatch = optCodex.every(function (opt) {
-                              var _product$configuratio2, _variant$configuratio;
-                              var mainProductOPV = (_product$configuratio2 = product.configuration) === null || _product$configuratio2 === void 0 || (_product$configuratio2 = _product$configuratio2.OrderSets[0].Variant) === null || _product$configuratio2 === void 0 ? void 0 : _product$configuratio2[opt];
+                              var _product$configuratio3, _variant$configuratio;
+                              var mainProductOPV = (_product$configuratio3 = product.configuration) === null || _product$configuratio3 === void 0 || (_product$configuratio3 = _product$configuratio3.OrderSets[0].Variant) === null || _product$configuratio3 === void 0 ? void 0 : _product$configuratio3[opt];
                               var variantOPV = (_variant$configuratio = variant.configuration) === null || _variant$configuratio === void 0 || (_variant$configuratio = _variant$configuratio.OrderSets[0].Variant) === null || _variant$configuratio === void 0 ? void 0 : _variant$configuratio[opt];
                               return variantOPV === mainProductOPV;
                             });
                             if (!allMatch) {
-                              _context2.next = 8;
+                              _context3.next = 8;
                               break;
                             }
+                            foundMedia = true;
                             setProductCache(variant._id, wallMockupProducts.data.filter(function (wmp) {
                               return wmp.divaNr === currentDivaNr;
                             }));
@@ -192,90 +207,162 @@ function useImageCarousel(_ref) {
                               url: mediaUrl,
                               productId: variant._id
                             });
-                            return _context2.abrupt("return", 1);
+                            return _context3.abrupt("return", 1);
                           case 8:
                           case "end":
-                            return _context2.stop();
+                            return _context3.stop();
                         }
                       }, _loop2);
                     });
                     j = 0;
                   case 5:
                     if (!(j < currentMockupVariants.length)) {
-                      _context3.next = 12;
+                      _context4.next = 12;
                       break;
                     }
-                    return _context3.delegateYield(_loop2(), "t0", 7);
+                    return _context4.delegateYield(_loop2(), "t0", 7);
                   case 7:
-                    if (!_context3.t0) {
-                      _context3.next = 9;
+                    if (!_context4.t0) {
+                      _context4.next = 9;
                       break;
                     }
-                    return _context3.abrupt("break", 12);
+                    return _context4.abrupt("break", 12);
                   case 9:
                     j++;
-                    _context3.next = 5;
+                    _context4.next = 5;
                     break;
                   case 12:
+                    if (foundMedia) {
+                      _context4.next = 30;
+                      break;
+                    }
+                    //Search opv mapping
+                    currentProducts = wallMockupProducts.data.filter(function (wmp) {
+                      return wmp.divaNr === currentDivaNr;
+                    });
+                    _iterator = _createForOfIteratorHelper(opvMapping);
+                    _context4.prev = 15;
+                    _loop3 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop3() {
+                      var _product$configuratio2;
+                      var opvMappingItem, sourceOPT, sourceOPV, targetOPT, targetOPV, sourceProductOPV, targetProduct, _targetProduct$media, mediaUrl;
+                      return _regeneratorRuntime.wrap(function _loop3$(_context2) {
+                        while (1) switch (_context2.prev = _context2.next) {
+                          case 0:
+                            opvMappingItem = _step.value;
+                            sourceOPT = opvMappingItem['SOURCE'].split('#')[0];
+                            sourceOPV = opvMappingItem['SOURCE'].split('#')[1];
+                            targetOPT = opvMappingItem['TARGET'].split('#')[0];
+                            targetOPV = opvMappingItem['TARGET'].split('#')[1];
+                            sourceProductOPV = (_product$configuratio2 = product.configuration) === null || _product$configuratio2 === void 0 || (_product$configuratio2 = _product$configuratio2.OrderSets[0].Variant) === null || _product$configuratio2 === void 0 ? void 0 : _product$configuratio2[sourceOPT];
+                            if (sourceProductOPV === sourceOPV) {
+                              targetProduct = currentProducts.find(function (p) {
+                                var _p$configuration, _p$configuration2;
+                                return ((_p$configuration = p.configuration) === null || _p$configuration === void 0 || (_p$configuration = _p$configuration.OrderSets[0].Variant) === null || _p$configuration === void 0 ? void 0 : _p$configuration[targetOPT]) === targetOPV || hasMatchingOrderLine((_p$configuration2 = p.configuration) === null || _p$configuration2 === void 0 ? void 0 : _p$configuration2.OrderSets[0], targetOPT, targetOPV);
+                              });
+                              if (targetProduct) {
+                                mediaUrl = targetProduct === null || targetProduct === void 0 || (_targetProduct$media = targetProduct.media) === null || _targetProduct$media === void 0 || (_targetProduct$media = _targetProduct$media.find(function (m) {
+                                  return m.functionType === wallMockupFunctionType;
+                                })) === null || _targetProduct$media === void 0 ? void 0 : _targetProduct$media.url;
+                                media.push({
+                                  url: mediaUrl,
+                                  productId: targetProduct._id
+                                });
+                              }
+                            }
+                          case 7:
+                          case "end":
+                            return _context2.stop();
+                        }
+                      }, _loop3);
+                    });
+                    _iterator.s();
+                  case 18:
+                    if ((_step = _iterator.n()).done) {
+                      _context4.next = 22;
+                      break;
+                    }
+                    return _context4.delegateYield(_loop3(), "t1", 20);
+                  case 20:
+                    _context4.next = 18;
+                    break;
+                  case 22:
+                    _context4.next = 27;
+                    break;
+                  case 24:
+                    _context4.prev = 24;
+                    _context4.t2 = _context4["catch"](15);
+                    _iterator.e(_context4.t2);
+                  case 27:
+                    _context4.prev = 27;
+                    _iterator.f();
+                    return _context4.finish(27);
+                  case 30:
                   case "end":
-                    return _context3.stop();
+                    return _context4.stop();
                 }
-              }, _loop);
+              }, _loop, null, [[15, 24, 27, 30]]);
             });
             i = 0;
-          case 14:
+          case 15:
             if (!(i < wallMockupDivaNrs.length)) {
-              _context4.next = 19;
+              _context5.next = 20;
               break;
             }
-            return _context4.delegateYield(_loop(), "t0", 16);
-          case 16:
+            return _context5.delegateYield(_loop(), "t0", 17);
+          case 17:
             i++;
-            _context4.next = 14;
+            _context5.next = 15;
             break;
-          case 19:
-            return _context4.abrupt("return", media);
           case 20:
+            return _context5.abrupt("return", media);
+          case 21:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
       }, _callee2);
     }));
     return _getWallMockups.apply(this, arguments);
   }
+  function hasMatchingOrderLine(orderSet, targetOPT, targetOPV) {
+    return orderSet.OrderLines.some(function (line) {
+      return line.VariantBasketDatas.some(function (variant) {
+        return 'OPT' + variant.OPT === targetOPT && 'OPV' + variant.OPV === targetOPV;
+      });
+    });
+  }
   function getSimilarProductMedia(_x3, _x4, _x5) {
     return _getSimilarProductMedia.apply(this, arguments);
   }
   function _getSimilarProductMedia() {
     _getSimilarProductMedia = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(product, mediaFunctionType, description) {
-      var _product$customData3;
+      var _product$customData4;
       var similarProductsDivaNr, similarProducts, media, i, _similarProduct$media, _similarProduct$media2, similarProduct, mediaUrl, desc, _similarProduct$descr;
-      return _regeneratorRuntime.wrap(function _callee4$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
-            similarProductsDivaNr = (_product$customData3 = product.customData) === null || _product$customData3 === void 0 || (_product$customData3 = _product$customData3['SIMILAR_PRODUCTS_DIVANRS']) === null || _product$customData3 === void 0 ? void 0 : _product$customData3.value;
+            similarProductsDivaNr = (_product$customData4 = product.customData) === null || _product$customData4 === void 0 || (_product$customData4 = _product$customData4['SIMILAR_PRODUCTS_DIVANRS']) === null || _product$customData4 === void 0 ? void 0 : _product$customData4.value;
             if (!(!Array.isArray(similarProductsDivaNr) || similarProductsDivaNr.length === 0)) {
-              _context6.next = 3;
+              _context7.next = 3;
               break;
             }
-            return _context6.abrupt("return", []);
+            return _context7.abrupt("return", []);
           case 3:
-            _context6.next = 5;
+            _context7.next = 5;
             return Promise.all(similarProductsDivaNr.map(/*#__PURE__*/function () {
               var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(divaNr) {
                 var _divaNrParts$;
                 var divaNrParts;
-                return _regeneratorRuntime.wrap(function _callee3$(_context5) {
-                  while (1) switch (_context5.prev = _context5.next) {
+                return _regeneratorRuntime.wrap(function _callee3$(_context6) {
+                  while (1) switch (_context6.prev = _context6.next) {
                     case 0:
                       divaNrParts = divaNr.split('-');
-                      _context5.next = 3;
+                      _context6.next = 3;
                       return getProductByDivaNrAndVariantId('DIVA-' + divaNrParts[1], (_divaNrParts$ = divaNrParts[2]) !== null && _divaNrParts$ !== void 0 ? _divaNrParts$ : undefined);
                     case 3:
-                      return _context5.abrupt("return", _context5.sent);
+                      return _context6.abrupt("return", _context6.sent);
                     case 4:
                     case "end":
-                      return _context5.stop();
+                      return _context6.stop();
                   }
                 }, _callee3);
               }));
@@ -284,11 +371,11 @@ function useImageCarousel(_ref) {
               };
             }()));
           case 5:
-            similarProducts = _context6.sent;
+            similarProducts = _context7.sent;
             media = [];
             for (i = 0; i < similarProducts.length; i++) {
               similarProduct = similarProducts[i].data[0];
-              setProductCache(similarProduct._id, similarProduct);
+              setProductCache('SIMILAR_PRODUCTS_' + similarProduct._id, similarProduct);
               mediaUrl = (_similarProduct$media = similarProduct === null || similarProduct === void 0 || (_similarProduct$media2 = similarProduct.media) === null || _similarProduct$media2 === void 0 || (_similarProduct$media2 = _similarProduct$media2.find(function (m) {
                 return m.functionType === mediaFunctionType;
               })) === null || _similarProduct$media2 === void 0 ? void 0 : _similarProduct$media2.url) !== null && _similarProduct$media !== void 0 ? _similarProduct$media : similarProduct.image;
@@ -304,10 +391,10 @@ function useImageCarousel(_ref) {
                 });
               }
             }
-            return _context6.abrupt("return", media);
+            return _context7.abrupt("return", media);
           case 9:
           case "end":
-            return _context6.stop();
+            return _context7.stop();
         }
       }, _callee4);
     }));

package/build/types/widget-image-carousel/src/stories/WallMockup/kirchner-prod.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WithDivaMock } from '@crystaldesign/diva-core';
+import { ImageCarouselProps } from '../../types';
+declare const meta: Meta<WithDivaMock<ImageCarouselProps>>;
+export default meta;
+type Story = StoryObj<WithDivaMock<ImageCarouselProps>>;
+export declare const ImageCarousel: Story;
+//# sourceMappingURL=kirchner-prod.stories.d.ts.map

package/build/types/widget-image-carousel/src/stories/WallMockup/kirchner-prod.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kirchner-prod.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/WallMockup/kirchner-prod.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAqB,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAmBhD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAuCxD,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/build/types/widget-image-carousel/src/types/index.d.ts

@@ -9,5 +9,6 @@ export interface Configuration extends BaseConfiguration {
     mediaFunctionType?: string;
     description?: string;
     sliderProp?: SwiperProps;
+    disableScrollToTop?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

package/build/types/widget-image-carousel/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,cAAc,GAAG,kBAAkB,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,cAAc,GAAG,kBAAkB,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

package/build/types/widget-image-carousel/src/useImageCarousel.d.ts

@@ -8,7 +8,7 @@ export declare function useImageCarousel({ productId, settings }: ImageCarouselP
     media: Media[];
     error: Error | undefined;
     loading: boolean;
-    setSelectedProductId: (productId: string) => Promise<void>;
+    setSelectedProductId: (productId: string) => void;
 };
 export {};
 //# sourceMappingURL=useImageCarousel.d.ts.map

package/build/types/widget-image-carousel/src/useImageCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useImageCarousel.d.ts","sourceRoot":"","sources":["../../../../src/useImageCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM7C,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB;;;;;EAkI3E"}
+{"version":3,"file":"useImageCarousel.d.ts","sourceRoot":"","sources":["../../../../src/useImageCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM7C,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB;;;;sCAa5D,MAAM;EA6JrB"}