thm-p3-configurator 0.0.156 → 0.0.158

package/dist/src/shared/__components__/ProductCard/ProductCardImage.js

@@ -13,14 +13,15 @@ function _interopRequireDefault(e) {
 }
 const ProductCardImage = _ref => {
   let {
-    image
+    image,
+    isBoardComputer
   } = _ref;
   if (!image) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement("img", {
     src: image,
-    className: (0, _helpers__.withStyle)('card__image img-fluid'),
+    className: (0, _helpers__.withStyle)("card__image img-fluid ".concat(isBoardComputer ? 'mb-2' : '')),
     alt: "product afbeelding"
   });
 };

package/dist/src/shared/__components__/ProductCard/index.js

@@ -74,7 +74,8 @@ const ProductCard = _ref => {
     onSelect = () => {},
     isOnlyProductInCategory = false,
     isAnotherProductSelected = true,
-    isTmg = false
+    isTmg = false,
+    isBoardComputer = false
   } = _ref;
   const [isSelected, setIsSelected] = (0, _react.useState)(defaultSelected);
   const {
@@ -114,7 +115,8 @@ const ProductCard = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-md-4 d-flex justify-content-center position-relative')
   }, /*#__PURE__*/_react.default.createElement(_ProductCardImage.default, {
-    image: productImage
+    image: productImage,
+    isBoardComputer: isBoardComputer
   }), /*#__PURE__*/_react.default.createElement(_ProductCardDiscountAlert.default, {
     label: productDiscountedLabel,
     price: productPrice,

package/dist/src/shared/__containers__/BoardComputerCard.js

@@ -51,6 +51,7 @@ const BoardComputerCard = _ref => {
     description,
     title,
     price,
+    productImage,
     onSelect = _ref2 => {
       let {
         isSelected,
@@ -102,7 +103,7 @@ const BoardComputerCard = _ref => {
     productTitle: title,
     productDescription: description,
     productUsps: [],
-    productImage: null,
+    productImage: productImage,
     isDisabled: false,
     defaultSelected: isSelected,
     onSelect: handleSelect,
@@ -111,7 +112,8 @@ const BoardComputerCard = _ref => {
     productSpecifications: [],
     showPrice: APP_CONFIG.internal,
     canUnselect: canUnselect,
-    isOnlyProductInCategory: isSelected
+    isOnlyProductInCategory: isSelected,
+    isBoardComputer: true
   }), anchorEl && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_Modal.default, {
     isOpen: isModalOpen,
     size: "large",

package/dist/src/shared/__containers__/ProductsOverview.js

@@ -4,6 +4,8 @@ require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.array.sort.js");
 require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.weak-map.js");
@@ -14,6 +16,8 @@ exports.default = void 0;
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.array.sort.js");
 require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
@@ -62,7 +66,7 @@ function _interopRequireWildcard(e, r) {
   return n.default = e, t && t.set(e, n), n;
 }
 const ProductsOverview = () => {
-  var _products$Trekhaak2, _products$Kabelset, _products$Combiset;
+  var _products$Trekhaak3, _products$Kabelset, _products$Combiset;
   const isProductsInitialLoad = (0, _react.useRef)(true);
   const formula = (0, _FormulaContext.useFormula)();
   const isTmg = (0, _useIsTmg.useIsTmg)();
@@ -116,9 +120,9 @@ const ProductsOverview = () => {
     skipFilters
   });
   (0, _react.useEffect)(() => {
-    var _products$Trekhaak;
+    var _products$Trekhaak, _products$Trekhaak2, _products$PRODUCT_CAT3;
     // Only run this if we have products loaded and no towbar is currently selected
-    if (!isLoadingProducts && (products === null || products === void 0 || (_products$Trekhaak = products.Trekhaak) === null || _products$Trekhaak === void 0 ? void 0 : _products$Trekhaak.length) === 1 && !selectedTowbar) {
+    if (!isLoadingProducts && (products === null || products === void 0 || (_products$Trekhaak = products.Trekhaak) === null || _products$Trekhaak === void 0 ? void 0 : _products$Trekhaak.length) === 1 && !selectedTowbar && !selectedCombiset) {
       var _products$PRODUCT_CAT;
       const towbarId = products.Trekhaak[0].articleNumber;
       dispatch({
@@ -139,12 +143,53 @@ const ProductsOverview = () => {
         });
       }
     }
-  }, [isLoadingProducts, products, selectedTowbar, selectedCableset, dispatch]);
+    // If we have multiple towbars, pre-select the recommended one if no other is selected
+    else if (!isLoadingProducts && (products === null || products === void 0 || (_products$Trekhaak2 = products.Trekhaak) === null || _products$Trekhaak2 === void 0 ? void 0 : _products$Trekhaak2.length) > 1 && !selectedTowbar && !selectedCombiset) {
+      // Find the recommended towbar
+      const recommendedTowbar = products.Trekhaak.find(product => (0, _product.checkIfTowbarIsRecommended)({
+        product,
+        category: _constants__.PRODUCT_CATEGORIES.TOWBAR
+      }));
+
+      // If there's a recommended towbar, select it
+      if (recommendedTowbar) {
+        var _products$PRODUCT_CAT2;
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_SELECTED_TOWBAR,
+          payload: {
+            towbarId: recommendedTowbar.articleNumber
+          }
+        });
+
+        // Auto-select kabelset if no kabelset is currently selected
+        if (!selectedCableset && ((_products$PRODUCT_CAT2 = products[_constants__.PRODUCT_CATEGORIES.CABLESET]) === null || _products$PRODUCT_CAT2 === void 0 ? void 0 : _products$PRODUCT_CAT2.length) === 1) {
+          const kabelsetId = products[_constants__.PRODUCT_CATEGORIES.CABLESET][0].articleNumber;
+          dispatch({
+            type: _OrderSessionContext.orderSessionActions.SET_SELECTED_CABLESET,
+            payload: {
+              cabelsetId: kabelsetId
+            }
+          });
+        }
+      }
+    }
+
+    // Auto-select boardcomputer if one is available and none is currently selected
+    if (!isLoadingProducts && (products === null || products === void 0 || (_products$PRODUCT_CAT3 = products[_constants__.PRODUCT_CATEGORIES.BOARD_COMPUTER]) === null || _products$PRODUCT_CAT3 === void 0 ? void 0 : _products$PRODUCT_CAT3.length) > 0 && !selectedBoardComputer && !isBoardComputerDeselected) {
+      const boardComputerId = products[_constants__.PRODUCT_CATEGORIES.BOARD_COMPUTER][0].articleNumber;
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_SELECTED_BOARDCOMPUTER,
+        payload: {
+          id: boardComputerId
+        }
+      });
+    }
+  }, [isLoadingProducts, products, selectedTowbar, selectedCableset, selectedBoardComputer, isBoardComputerDeselected, dispatch]);
   if (isLoadingProducts && isProductsInitialLoad.current === true) {
     isProductsInitialLoad.current = false;
     return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
   }
-  if (isProductsError || !isLoadingProducts && (!(products !== null && products !== void 0 && (_products$Trekhaak2 = products.Trekhaak) !== null && _products$Trekhaak2 !== void 0 && _products$Trekhaak2.length) || !(products !== null && products !== void 0 && (_products$Kabelset = products.Kabelset) !== null && _products$Kabelset !== void 0 && _products$Kabelset.length)) && !(products !== null && products !== void 0 && (_products$Combiset = products.Combiset) !== null && _products$Combiset !== void 0 && _products$Combiset.length)) {
+  if (isProductsError || !isLoadingProducts && (!(products !== null && products !== void 0 && (_products$Trekhaak3 = products.Trekhaak) !== null && _products$Trekhaak3 !== void 0 && _products$Trekhaak3.length) || !(products !== null && products !== void 0 && (_products$Kabelset = products.Kabelset) !== null && _products$Kabelset !== void 0 && _products$Kabelset.length)) && !(products !== null && products !== void 0 && (_products$Combiset = products.Combiset) !== null && _products$Combiset !== void 0 && _products$Combiset.length)) {
     return /*#__PURE__*/_react.default.createElement(_reactRouter.Redirect, {
       to: "/configurator/geen-producten"
     });
@@ -176,9 +221,9 @@ const ProductsOverview = () => {
 
           // Auto-select kabelset if towbar is selected and no kabelset is currently selected
           if (isSelected && !selectedCableset) {
-            var _products$PRODUCT_CAT2;
+            var _products$PRODUCT_CAT4;
             // Check if there's exactly one kabelset available
-            if (((_products$PRODUCT_CAT2 = products[_constants__.PRODUCT_CATEGORIES.CABLESET]) === null || _products$PRODUCT_CAT2 === void 0 ? void 0 : _products$PRODUCT_CAT2.length) === 1) {
+            if (((_products$PRODUCT_CAT4 = products[_constants__.PRODUCT_CATEGORIES.CABLESET]) === null || _products$PRODUCT_CAT4 === void 0 ? void 0 : _products$PRODUCT_CAT4.length) === 1) {
               const kabelsetId = products[_constants__.PRODUCT_CATEGORIES.CABLESET][0].articleNumber;
               dispatch({
                 type: _OrderSessionContext.orderSessionActions.SET_SELECTED_CABLESET,
@@ -276,11 +321,16 @@ const ProductsOverview = () => {
       product: a,
       category: productCategory
     }) ? -1 : 0).map(product => {
-      var _product$locationPric, _product$images, _product$images2;
+      var _product$images, _product$images2, _product$locationPric;
       const isRecommended = (0, _product.checkIfTowbarIsRecommended)({
         product,
         category: productCategory
       });
+
+      // Generate the product image URL
+      const productImageUrl = product !== null && product !== void 0 && (_product$images = product.images) !== null && _product$images !== void 0 && _product$images[0] ? (0, _image.getImageFromHyper)({
+        imageId: product === null || product === void 0 || (_product$images2 = product.images) === null || _product$images2 === void 0 ? void 0 : _product$images2[0]
+      }) : _logoPrimary.default;
       if (productCategory === _constants__.PRODUCT_CATEGORIES.BOARD_COMPUTER && selectedCableset) {
         return /*#__PURE__*/_react.default.createElement(_BoardComputerCard.default, {
           defaultSelected: selectedBoardComputer === product.articleNumber,
@@ -299,7 +349,8 @@ const ProductsOverview = () => {
           id: product.articleNumber,
           description: (0, _product.formatHyperDescription)(product === null || product === void 0 ? void 0 : product.description),
           title: product === null || product === void 0 ? void 0 : product.subgroupName,
-          price: product === null || product === void 0 ? void 0 : product.price
+          price: product === null || product === void 0 ? void 0 : product.price,
+          productImage: productImageUrl
         });
       }
       return /*#__PURE__*/_react.default.createElement(_ProductCard.default, {
@@ -321,9 +372,7 @@ const ProductsOverview = () => {
           type: 'remark',
           text: product === null || product === void 0 ? void 0 : product.remark
         }],
-        productImage: product !== null && product !== void 0 && (_product$images = product.images) !== null && _product$images !== void 0 && _product$images[0] ? (0, _image.getImageFromHyper)({
-          imageId: product === null || product === void 0 || (_product$images2 = product.images) === null || _product$images2 === void 0 ? void 0 : _product$images2[0]
-        }) : _logoPrimary.default,
+        productImage: productImageUrl,
         isDisabled: false,
         defaultSelected: productCategory === _constants__.PRODUCT_CATEGORIES.TOWBAR && selectedTowbar === product.articleNumber || productCategory === _constants__.PRODUCT_CATEGORIES.CABLESET && selectedCableset === product.articleNumber || productCategory === _constants__.PRODUCT_CATEGORIES.COMBISET && selectedCombiset === product.articleNumber
         // Set both to false to prevent auto-selection when navigating back

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thm-p3-configurator",
-  "version": "0.0.156",
+  "version": "0.0.158",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "EnoRm.",