thm-p3-configurator 0.0.42 → 0.0.43

package/dist/src/shared/App.js

@@ -25,7 +25,7 @@ var _FormulaContext = require("./__context__/FormulaContext");
 var _OrderSessionContext = require("./__context__/OrderSessionContext");
 var _cookiebot = require("./__helpers__/cookiebot");
 var _queryClient = _interopRequireDefault(require("./__helpers__/queryClient"));
-var _pages__ = _interopRequireDefault(require("./__pages__"));
+var _index = _interopRequireDefault(require("./__pages__/index"));
 var _Experiments = _interopRequireDefault(require("./__services__/Experiments"));
 var _mainExternal = _interopRequireDefault(require("./__style__/main-external.scss"));
 var _main = _interopRequireDefault(require("./__style__/main.scss"));
@@ -69,11 +69,11 @@ const App = () => {
     (0, _Experiments.default)();
   });
   return /*#__PURE__*/_react.default.createElement(_SentryWrapper.default, null, /*#__PURE__*/_react.default.createElement(_FormulaContext.FormulaController, {
-    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THC
+    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THM
   }, /*#__PURE__*/_react.default.createElement(_CountryContext.CountryController, {
     defaultCountry: APP_CONFIG.country
   }, /*#__PURE__*/_react.default.createElement(_OrderSessionContext.OrderSessionController, null, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
     client: _queryClient.default
-  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalBranchSelectorModal.default, null), /*#__PURE__*/_react.default.createElement(_pages__.default, null))))))))));
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalBranchSelectorModal.default, null), /*#__PURE__*/_react.default.createElement(_index.default, null))))))))));
 };
 var _default = exports.default = App;

package/dist/src/shared/__api__/authenticatedProxyApi.js

@@ -89,5 +89,18 @@ const authenticatedProxyApi = exports.authenticatedProxyApi = {
         'Content-Type': 'application/json'
       }
     });
+  },
+  getActiveDiscounts: _ref3 => {
+    let {
+      formulaCode,
+      limit,
+      offset
+    } = _ref3;
+    return authenticateClient("api/v1/discounts?limit=".concat(limit, "&offset=").concat(offset, "&formulaCode=").concat(formulaCode), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
   }
 };

package/dist/src/shared/__api__/queries.js

@@ -8,7 +8,7 @@ require("core-js/modules/web.url-search-params.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useQuestionsQuery = exports.useProductsQuery = exports.useProductFieldLabels = exports.usePrivateDossierByTypeAndIdQuery = exports.useMyBranches = exports.useModelsQuery = exports.useMarketingChannels = exports.useBuildYearsQuery = exports.useBrandsQuery = exports.useBranchesQuery = exports.useBranchTypes = exports.useBranchByIdOrWidgetId = void 0;
+exports.useQuestionsQuery = exports.useProductsQuery = exports.useProductFieldLabels = exports.usePrivateDossierByTypeAndIdQuery = exports.useMyBranches = exports.useModelsQuery = exports.useMarketingChannels = exports.useBuildYearsQuery = exports.useBrandsQuery = exports.useBranchesQuery = exports.useBranchTypes = exports.useBranchByIdOrWidgetId = exports.useActiveDiscounts = void 0;
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.regexp.to-string.js");
@@ -127,7 +127,7 @@ const useModelsQuery = _ref2 => {
  */
 exports.useModelsQuery = useModelsQuery;
 const useProductsQuery = orderParameters => {
-  var _productsQuery$data, _productsQuery$data2, _productsQuery$data3, _productsQuery$data4, _productsQuery$data5, _productsQuery$data6, _productsQuery$data7, _productsQuery$data8, _productsQuery$data9, _productsQuery$data$a, _productsQuery$data10, _productsQuery$data11, _productsQuery$data$a2, _productsQuery$data12, _productsQuery$data$a3, _productsQuery$data13, _productsQuery$data$a4, _productsQuery$data14, _productsQuery$data15, _productsQuery$data16;
+  var _productsQuery$data, _productsQuery$data2, _productsQuery$data3, _productsQuery$data4, _productsQuery$data5, _productsQuery$data6, _productsQuery$data7, _productsQuery$data8, _productsQuery$data9, _productsQuery$data$a, _productsQuery$data10, _productsQuery$data$c, _productsQuery$data11, _productsQuery$data$a2, _productsQuery$data12, _productsQuery$data$a3, _productsQuery$data13, _productsQuery$data$a4, _productsQuery$data14, _productsQuery$data15, _productsQuery$data16, _productsQuery$data$a5, _productsQuery$data17, _productsQuery$data$t, _productsQuery$data18;
   const {
     licensePlate,
     model
@@ -156,13 +156,15 @@ const useProductsQuery = orderParameters => {
     },
     discountCodeInfo: productsQuery === null || productsQuery === void 0 || (_productsQuery$data9 = productsQuery.data) === null || _productsQuery$data9 === void 0 ? void 0 : _productsQuery$data9.discountCodeInfo,
     discountProducts: (_productsQuery$data$a = productsQuery === null || productsQuery === void 0 || (_productsQuery$data10 = productsQuery.data) === null || _productsQuery$data10 === void 0 || (_productsQuery$data10 = _productsQuery$data10.articles) === null || _productsQuery$data10 === void 0 ? void 0 : _productsQuery$data10.discountCode) !== null && _productsQuery$data$a !== void 0 ? _productsQuery$data$a : [],
-    cart: productsQuery === null || productsQuery === void 0 || (_productsQuery$data11 = productsQuery.data) === null || _productsQuery$data11 === void 0 ? void 0 : _productsQuery$data11.cart,
+    cart: (_productsQuery$data$c = productsQuery === null || productsQuery === void 0 || (_productsQuery$data11 = productsQuery.data) === null || _productsQuery$data11 === void 0 ? void 0 : _productsQuery$data11.cart) !== null && _productsQuery$data$c !== void 0 ? _productsQuery$data$c : [],
     products: {
       [_constants__.PRODUCT_CATEGORIES.TOWBAR]: (_productsQuery$data$a2 = productsQuery === null || productsQuery === void 0 || (_productsQuery$data12 = productsQuery.data) === null || _productsQuery$data12 === void 0 || (_productsQuery$data12 = _productsQuery$data12.articles) === null || _productsQuery$data12 === void 0 ? void 0 : _productsQuery$data12.towbars) !== null && _productsQuery$data$a2 !== void 0 ? _productsQuery$data$a2 : [],
       [_constants__.PRODUCT_CATEGORIES.CABLESET]: (_productsQuery$data$a3 = productsQuery === null || productsQuery === void 0 || (_productsQuery$data13 = productsQuery.data) === null || _productsQuery$data13 === void 0 || (_productsQuery$data13 = _productsQuery$data13.articles) === null || _productsQuery$data13 === void 0 ? void 0 : _productsQuery$data13.cablesets) !== null && _productsQuery$data$a3 !== void 0 ? _productsQuery$data$a3 : [],
       [_constants__.PRODUCT_CATEGORIES.COMBISET]: (_productsQuery$data$a4 = productsQuery === null || productsQuery === void 0 || (_productsQuery$data14 = productsQuery.data) === null || _productsQuery$data14 === void 0 || (_productsQuery$data14 = _productsQuery$data14.articles) === null || _productsQuery$data14 === void 0 ? void 0 : _productsQuery$data14.combisets) !== null && _productsQuery$data$a4 !== void 0 ? _productsQuery$data$a4 : [],
-      [_constants__.PRODUCT_CATEGORIES.BOARD_COMPUTER]: productsQuery !== null && productsQuery !== void 0 && (_productsQuery$data15 = productsQuery.data) !== null && _productsQuery$data15 !== void 0 && (_productsQuery$data15 = _productsQuery$data15.articles) !== null && _productsQuery$data15 !== void 0 && _productsQuery$data15.boardComputerUpdate ? [productsQuery === null || productsQuery === void 0 || (_productsQuery$data16 = productsQuery.data) === null || _productsQuery$data16 === void 0 || (_productsQuery$data16 = _productsQuery$data16.articles) === null || _productsQuery$data16 === void 0 ? void 0 : _productsQuery$data16.boardComputerUpdate] : []
-    }
+      [_constants__.PRODUCT_CATEGORIES.BOARD_COMPUTER]: productsQuery !== null && productsQuery !== void 0 && (_productsQuery$data15 = productsQuery.data) !== null && _productsQuery$data15 !== void 0 && (_productsQuery$data15 = _productsQuery$data15.articles) !== null && _productsQuery$data15 !== void 0 && _productsQuery$data15.boardComputerUpdate ? [productsQuery === null || productsQuery === void 0 || (_productsQuery$data16 = productsQuery.data) === null || _productsQuery$data16 === void 0 || (_productsQuery$data16 = _productsQuery$data16.articles) === null || _productsQuery$data16 === void 0 ? void 0 : _productsQuery$data16.boardComputerUpdate] : [],
+      [_constants__.PRODUCT_CATEGORIES.EXTRAS]: (_productsQuery$data$a5 = productsQuery === null || productsQuery === void 0 || (_productsQuery$data17 = productsQuery.data) === null || _productsQuery$data17 === void 0 || (_productsQuery$data17 = _productsQuery$data17.articles) === null || _productsQuery$data17 === void 0 ? void 0 : _productsQuery$data17.extras) !== null && _productsQuery$data$a5 !== void 0 ? _productsQuery$data$a5 : []
+    },
+    totals: (_productsQuery$data$t = productsQuery === null || productsQuery === void 0 || (_productsQuery$data18 = productsQuery.data) === null || _productsQuery$data18 === void 0 ? void 0 : _productsQuery$data18.totals) !== null && _productsQuery$data$t !== void 0 ? _productsQuery$data$t : []
   };
 };
 
@@ -329,4 +331,32 @@ const usePrivateDossierByTypeAndIdQuery = _ref3 => {
     dossierById: dossierByIdQuery === null || dossierByIdQuery === void 0 ? void 0 : dossierByIdQuery.data
   };
 };
-exports.usePrivateDossierByTypeAndIdQuery = usePrivateDossierByTypeAndIdQuery;
+
+/**
+ * @description Query the discounts from Hyper, allows for pagination and filtering with formula
+ */
+exports.usePrivateDossierByTypeAndIdQuery = usePrivateDossierByTypeAndIdQuery;
+const useActiveDiscounts = _ref4 => {
+  var _discountsQuery$data;
+  let {
+    formulaCode,
+    offset,
+    limit,
+    authSession
+  } = _ref4;
+  const discountsQuery = (0, _reactQuery.useQuery)({
+    queryKey: ['discounts', formulaCode, offset, limit, authSession],
+    queryFn: () => _authenticatedProxyApi.authenticatedProxyApi.getActiveDiscounts({
+      formulaCode,
+      offset,
+      limit
+    }),
+    retry: true
+  });
+  return {
+    isLoadingDiscounts: discountsQuery.isLoading,
+    discountsError: discountsQuery.isError,
+    discounts: discountsQuery === null || discountsQuery === void 0 || (_discountsQuery$data = discountsQuery.data) === null || _discountsQuery$data === void 0 ? void 0 : _discountsQuery$data.data
+  };
+};
+exports.useActiveDiscounts = useActiveDiscounts;

package/dist/src/shared/__components__/Cards/TogglableCard.js

@@ -36,6 +36,7 @@ function _interopRequireWildcard(e, r) {
   return n.default = e, t && t.set(e, n), n;
 }
 const TogglableCard = _ref => {
+  var _APP_CONFIG;
   let {
     title,
     toggleButton,
@@ -52,7 +53,7 @@ const TogglableCard = _ref => {
     className: (0, _helpers__.withStyle)('card card__default')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('card-header')
-  }, title, /*#__PURE__*/_react.default.createElement("button", {
+  }, title, ((_APP_CONFIG = APP_CONFIG) === null || _APP_CONFIG === void 0 ? void 0 : _APP_CONFIG.internal) && /*#__PURE__*/_react.default.createElement("button", {
     className: (0, _helpers__.withStyle)("cart__price-switch link-white ".concat(isToggled ? 'active' : '')),
     type: "button",
     "data-bs-toggle": "collapse",

package/dist/src/shared/__components__/Form/DropdownInput.js

@@ -103,7 +103,8 @@ const DropdownInput = _ref => {
     onChange,
     form,
     initialValue,
-    errorMessage = ''
+    errorMessage = '',
+    isClearable = false
   } = _ref;
   const [value, setValue] = (0, _react.useState)(initialValue);
   const lgSize = window.matchMedia('(min-width: 960px)');
@@ -122,6 +123,7 @@ const DropdownInput = _ref => {
     className: (0, _helpers__.withStyle)('form-label')
   }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
     id: name,
+    isClearable: isClearable,
     name: name,
     form: form,
     value: value,

package/dist/src/shared/__components__/Form/NumericInput.js

@@ -79,10 +79,10 @@ const NumericInput = _ref => {
     setValue(value);
     onChange(value);
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: name,
     className: (0, _helpers__.withStyle)('form-label')
-  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), ' ', /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_reactNumericInput.default, {
+  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), ' ', /*#__PURE__*/_react.default.createElement("br", null), ' '), /*#__PURE__*/_react.default.createElement(_reactNumericInput.default, {
     mobile: true,
     strict: true,
     className: (0, _helpers__.withStyle)('form-control react-numeric-input'),

package/dist/src/shared/__components__/LocationsSelector/LocationAutoComplete.js

@@ -109,6 +109,7 @@ const LocationAutoComplete = _ref => {
     fetchPredictions(value);
   }, [fetchPredictions]);
   const handleSuggestionClick = (0, _react.useCallback)(placeId => {
+    var _document$querySelect;
     if (!places) return;
     const detailRequestOptions = {
       placeId,
@@ -134,6 +135,7 @@ const LocationAutoComplete = _ref => {
       }
     };
     placesService === null || placesService === void 0 || placesService.getDetails(detailRequestOptions, detailsRequestCallback);
+    (_document$querySelect = document.querySelector((0, _helpers__.withStyle)("dealer-autocomplete__list"))) === null || _document$querySelect === void 0 || _document$querySelect.scrollTo(0, 0);
   }, [places, placesService, sessionToken, setUserLocation]);
   return /*#__PURE__*/_react.default.createElement("form", {
     className: (0, _helpers__.withStyle)('dealer-autocomplete mb-2')

package/dist/src/shared/__components__/LocationsSelector/LocationClusteredMap.js

@@ -2,7 +2,9 @@
 
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.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");
 require("core-js/modules/web.dom-collections.iterator.js");
@@ -11,7 +13,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _reactGoogleMaps = require("@vis.gl/react-google-maps");
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 var _react = _interopRequireWildcard(require("react"));
@@ -49,38 +53,58 @@ function _interopRequireDefault(e) {
     default: e
   };
 }
-const LocationClusteredMap = _ref => {
+const LocationClusteredMap = /*#__PURE__*/_react.default.memo(_ref => {
   let {
     locationIds,
     locationsById,
     userLocation
   } = _ref;
   const map = (0, _reactGoogleMaps.useMap)();
+  const core = (0, _reactGoogleMaps.useMapsLibrary)('core');
+  const bounds = (0, _react.useMemo)(() => {
+    return core ? new core.LatLngBounds() : null;
+  }, [core]);
   const fitBoundsToMarkers = (0, _react.useCallback)(() => {
-    if (!map || locationIds.length === 0) {
-      return;
-    }
-    const bounds = new google.maps.LatLngBounds();
+    if (!map || !bounds || locationIds.length === 0) return;
     if (userLocation) {
-      bounds.extend(new google.maps.LatLng(userLocation.lat, userLocation.lng));
+      bounds.extend(new core.LatLng(userLocation.lat, userLocation.lng));
       map.fitBounds(bounds);
       map.setZoom(10);
-    } else {
-      locationIds.forEach(locationId => {
-        const location = locationsById[locationId];
-        const coordinates = (0, _geolocation.getCoordinatesByString)(location.googleMapsLocation);
-        if (!coordinates) {
-          return;
-        }
-        bounds.extend(new google.maps.LatLng(coordinates.lat, coordinates.lng));
-      });
-      map.fitBounds(bounds);
+      return;
     }
-  }, [map, locationIds, locationsById, userLocation]);
+
+    // Batch coordinate calculations
+    const validCoordinates = locationIds.map(id => locationsById[id]).map(location => (0, _geolocation.getCoordinatesByString)(location.googleMapsLocation)).filter(Boolean);
+    validCoordinates.forEach(_ref2 => {
+      let {
+        lat,
+        lng
+      } = _ref2;
+      bounds.extend(new core.LatLng(lat, lng));
+    });
+    map.fitBounds(bounds);
+  }, [map, bounds, locationIds, locationsById, userLocation, core]);
+
+  // Debounce bounds fitting
   (0, _react.useEffect)(() => {
-    const debounceFitBounds = (0, _lodash.default)(fitBoundsToMarkers, 300);
+    if (!core) return;
+    const debounceFitBounds = (0, _lodash.default)(fitBoundsToMarkers, 150);
     debounceFitBounds();
-  }, [fitBoundsToMarkers]);
+    return () => debounceFitBounds.cancel();
+  }, [fitBoundsToMarkers, core]);
+  const mapOptions = (0, _react.useMemo)(() => ({
+    maxZoom: 18,
+    minZoom: 3,
+    clickableIcons: false,
+    styles: [{
+      featureType: 'poi',
+      elementType: 'labels',
+      stylers: [{
+        visibility: 'off'
+      }]
+    }],
+    optimized: true
+  }), []);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "dealer-map ".concat((0, _helpers__.withStyle)('dealer-map'))
   }, /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Map, {
@@ -91,14 +115,16 @@ const LocationClusteredMap = _ref => {
       lng: _constants__.DEFAULT_MAP_LONGITUDE
     },
     gestureHandling: 'greedy',
-    disableDefaultUI: true
-  }, userLocation && /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Marker, {
+    disableDefaultUI: true,
+    options: mapOptions
+  }, userLocation && core && /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Marker, {
     optimized: true,
     position: userLocation,
-    name: "Uw locatie"
+    title: "Uw locatie",
+    zIndex: 2
   }), locationIds && /*#__PURE__*/_react.default.createElement(_LocationClusteredTreeMarkers.default, {
     locationIds: locationIds,
     locationsById: locationsById
   })));
-};
+});
 var _default = exports.default = LocationClusteredMap;

package/dist/src/shared/__components__/LocationsSelector/LocationClusteredTreeMarkers.js

@@ -148,17 +148,40 @@ const LocationClusteredTreeMarkers = _ref => {
   const clusterer = (0, _react.useMemo)(() => {
     if (!map) return null;
     return new _markerclusterer.MarkerClusterer({
-      map
+      map,
+      maxZoom: 15,
+      gridSize: 50,
+      minimumClusterSize: 2,
+      algorithm: _markerclusterer.MarkerClusterer.ALGORITHM_SIMPLE
     });
   }, [map]);
   const updateClustererMarkers = (0, _react.useCallback)((0, _lodash.default)(newMarkers => {
     if (!clusterer) return;
-    clusterer.clearMarkers();
-    clusterer.addMarkers(Object.values(newMarkers));
-  }, 300), [clusterer]);
+
+    // Get current markers
+    const currentMarkers = clusterer.markers;
+    const newMarkerArray = Object.values(newMarkers);
+
+    // Only update if markers have changed
+    if (currentMarkers.length !== newMarkerArray.length) {
+      clusterer.clearMarkers();
+      if (newMarkerArray.length > 0) {
+        clusterer.addMarkers(newMarkerArray);
+      }
+    }
+  }, 150), [clusterer]);
   (0, _react.useEffect)(() => {
     updateClustererMarkers(markers);
   }, [markers, updateClustererMarkers]);
+
+  // Cleanup clusterer on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (clusterer) {
+        clusterer.clearMarkers();
+      }
+    };
+  }, [clusterer]);
   const setMarkerRef = (0, _react.useCallback)((marker, key) => {
     setMarkers(prevMarkers => {
       if (marker && prevMarkers[key] || !marker && !prevMarkers[key]) return prevMarkers;
@@ -192,7 +215,7 @@ const LocationClusteredTreeMarkers = _ref => {
       },
       type: _OrderSessionContext.orderSessionActions.SET_SELECTED_BRANCH
     });
-  }, [setActiveMarkerId, dispatch]);
+  }, [setActiveMarkerId, dispatch, selectedBranch]);
   const memoizedTreeMarkers = (0, _react.useMemo)(() => {
     return trees.map(tree => /*#__PURE__*/_react.default.createElement(_LocationTreeMarker.default, {
       key: tree === null || tree === void 0 ? void 0 : tree.entityId,

package/dist/src/shared/__components__/LocationsSelector/LocationInfo.js

@@ -26,8 +26,38 @@ const LocationInfo = _ref => {
     city,
     telephoneNumber,
     locationImage,
-    title
+    title,
+    email,
+    website,
+    province
   } = _ref;
+  const address = [street, postCode, city].join(', ');
+
+  /* 
+  TODO: OPENING HOURS NOT IN PROXY BRANCH DATA FEED
+  */
+  const openingDays = [{
+    day: 'Maandag',
+    hours: 'Gesloten'
+  }, {
+    day: 'Dinsdag',
+    hours: '09:00 - 17:00'
+  }, {
+    day: 'Woensdag',
+    hours: '09:00 - 17:00'
+  }, {
+    day: 'Donderdag',
+    hours: '09:00 - 17:00'
+  }, {
+    day: 'Vrijdag',
+    hours: '09:00 - 17:00'
+  }, {
+    day: 'Zaterdag',
+    hours: '09:00 - 17:00'
+  }, {
+    day: 'Zondag',
+    hours: 'Gesloten'
+  }];
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('dealer-map__infowindow p-0 shadow-none')
   }, /*#__PURE__*/_react.default.createElement("h4", {
@@ -36,14 +66,44 @@ const LocationInfo = _ref => {
     className: (0, _helpers__.withStyle)('row row__body no-gutters flex-md-nowrap justify-content-between align-items-start')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 col-md-6 px-0')
-  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _helpers__.withStyle)('mb-2')
+  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("i", {
     className: "fas fa-map-marker-alt ".concat((0, _helpers__.withStyle)('me-1'))
-  }), ["".concat(street).concat(houseNumber ? " ".concat(houseNumber) : '').concat(houseNumberExtra ? " ".concat(houseNumberExtra) : ''), postCode, city].filter(item => item).join(', ')), telephoneNumber && /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-phone-alt ".concat((0, _helpers__.withStyle)('me-1'))
+  }), ["".concat(street).concat(houseNumber ? " ".concat(houseNumber) : '').concat(houseNumberExtra ? " ".concat(houseNumberExtra) : ''), postCode, city].filter(item => item).join(', ')), telephoneNumber && /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _helpers__.withStyle)('mt-1')
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-phone-alt ".concat((0, _helpers__.withStyle)('mx-1'))
+  }), /*#__PURE__*/_react.default.createElement("a", {
+    href: "tel:".concat(telephoneNumber)
+  }, /*#__PURE__*/_react.default.createElement("u", null, telephoneNumber))), email && /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _helpers__.withStyle)('mt-1')
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-envelope ".concat((0, _helpers__.withStyle)('mx-1'))
+  }), /*#__PURE__*/_react.default.createElement("a", {
+    href: "mailto:".concat(email)
+  }, /*#__PURE__*/_react.default.createElement("u", null, email))), website && /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _helpers__.withStyle)('mt-1')
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-globe ".concat((0, _helpers__.withStyle)('mx-1'))
   }), /*#__PURE__*/_react.default.createElement("a", {
-    href: "tel:".concat(telephoneNumber),
-    target: "_self"
-  }, telephoneNumber)))), /*#__PURE__*/_react.default.createElement("div", {
+    href: website
+  }, /*#__PURE__*/_react.default.createElement("u", null, website)))), /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('font-weight-bold d-none d-md-block')
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-clock ".concat((0, _helpers__.withStyle)('mx-1'))
+  }), "Openingstijden"), /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _helpers__.withStyle)('ml-3 d-none d-md-block')
+  }, openingDays.map((_ref2, key) => {
+    let {
+      day,
+      hours
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: key,
+      className: (0, _helpers__.withStyle)('d-flex align-content-center justify-content-between')
+    }, /*#__PURE__*/_react.default.createElement("p", null, day), /*#__PURE__*/_react.default.createElement("p", null, hours));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 col-md-6 d-flex flex-column justify-content-evenly align-items-center')
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)('mb-1'),

package/dist/src/shared/__components__/LocationsSelector/LocationList.js

@@ -167,7 +167,8 @@ const LocationList = _ref => {
     distance: location.distance ? location.distance : null,
     id: location.entityId,
     key: location.entityId,
-    isSelected: location.entityId === activeMarkerId || location.entityId === selectedBranch
+    isSelected: location.entityId === activeMarkerId || location.entityId === selectedBranch,
+    userLocation: userLocation
   })));
 };
 var _default = exports.default = LocationList;

package/dist/src/shared/__components__/LocationsSelector/LocationListItem.js

@@ -43,7 +43,8 @@ const LocationListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     city,
     distance,
     id,
-    isSelected
+    isSelected,
+    userLocation
   } = _ref;
   const [{
     selectedBranch
@@ -72,7 +73,7 @@ const LocationListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     className: (0, _helpers__.withStyle)('fw-bold text-black')
   }, city), /*#__PURE__*/_react.default.createElement("small", null, title)), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-auto d-flex flex-column align-items-end justify-content-between text-end')
-  }, isNaN(distance) === false && /*#__PURE__*/_react.default.createElement("p", {
+  }, userLocation && isNaN(distance) === false && /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _helpers__.withStyle)('dealer-item__distance')
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "fas fa-map-marker-alt"

package/dist/src/shared/__components__/LocationsSelector/LocationTreeMarker.js

@@ -43,35 +43,51 @@ function _interopRequireWildcard(e, r) {
   }
   return n.default = e, t && t.set(e, n), n;
 }
-const LocationTreeMarker = props => {
-  const {
+const LocationTreeMarker = /*#__PURE__*/_react.default.memo(_ref => {
+  let {
     tree,
     onClick,
     setMarkerRef
-  } = props;
+  } = _ref;
+  const core = (0, _reactGoogleMaps.useMapsLibrary)('core');
+
+  // Cache marker icon configuration
+  const markerIcon = (0, _react.useMemo)(() => {
+    if (!core) return {
+      url: _mapMarker.default
+    };
+    return {
+      url: _mapMarker.default,
+      size: new core.Size(32, 42),
+      anchor: new core.Point(16, 32),
+      scaledSize: new core.Size(32, 42)
+    };
+  }, [core]);
   const handleClick = (0, _react.useCallback)(() => onClick(tree), [onClick, tree]);
   const ref = (0, _react.useCallback)(marker => setMarkerRef(marker, tree === null || tree === void 0 ? void 0 : tree.entityId), [setMarkerRef, tree === null || tree === void 0 ? void 0 : tree.entityId]);
-  const coordinates = tree === null || tree === void 0 ? void 0 : tree.googleMapsLocation;
-  if (!coordinates) {
-    return null;
-  }
-  const [latStr, lngStr] = coordinates.split(',');
-  const lat = parseFloat(latStr);
-  const lng = parseFloat(lngStr);
-  if (isNaN(lat) || isNaN(lng)) {
-    return null;
-  }
+
+  // Memoize position calculation
+  const position = (0, _react.useMemo)(() => {
+    const coordinates = tree === null || tree === void 0 ? void 0 : tree.googleMapsLocation;
+    if (!coordinates) return null;
+    const [latStr, lngStr] = coordinates.split(',');
+    const lat = parseFloat(latStr);
+    const lng = parseFloat(lngStr);
+    return isNaN(lat) || isNaN(lng) ? null : {
+      lat,
+      lng
+    };
+  }, [tree === null || tree === void 0 ? void 0 : tree.googleMapsLocation]);
+  if (!position) return null;
   return /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.Marker, {
     optimized: true,
-    position: {
-      lat: lat,
-      lng: lng
-    },
+    position: position,
     ref: ref,
     onClick: handleClick,
-    icon: {
-      url: _mapMarker.default
-    }
+    icon: markerIcon,
+    clickable: true,
+    visible: true,
+    zIndex: 1
   });
-};
+});
 var _default = exports.default = LocationTreeMarker;

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

@@ -87,10 +87,11 @@ const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
     }
     setVisibleIds([]);
     const addIdsInBatches = index => {
-      const nextBatch = allIds.slice(index, index + 20);
+      const offset = 10;
+      const nextBatch = allIds.slice(index, index + offset);
       setVisibleIds(prev => [...prev, ...nextBatch]);
-      if (index + 20 < allIds.length) {
-        requestAnimationFrame(() => addIdsInBatches(index + 20));
+      if (index + offset < allIds.length) {
+        requestAnimationFrame(() => addIdsInBatches(index + offset));
       }
     };
     addIdsInBatches(0);

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

@@ -2,6 +2,7 @@
 
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.weak-map.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");
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +10,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _reactTruncate = _interopRequireDefault(require("react-truncate"));
@@ -48,6 +50,15 @@ const ProductCardDescription = _ref => {
     description
   } = _ref;
   const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
+  const renderDescription = () => {
+    if (Array.isArray(description === null || description === void 0 ? void 0 : description.ops)) {
+      var _description$ops;
+      return description === null || description === void 0 || (_description$ops = description.ops) === null || _description$ops === void 0 ? void 0 : _description$ops.map((desc, index) => /*#__PURE__*/_react.default.createElement("span", {
+        key: index
+      }, desc.insert, index < description.length - 1 && ', '));
+    }
+    return description;
+  };
   return /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactTruncate.default, {
     lines: isExpanded ? 20 : 2,
     ellipsis: /*#__PURE__*/_react.default.createElement("span", null, "...", /*#__PURE__*/_react.default.createElement("a", {
@@ -56,7 +67,7 @@ const ProductCardDescription = _ref => {
         setIsExpanded(true);
       }
     }, "Meer informatie"))
-  }, description), isExpanded && /*#__PURE__*/_react.default.createElement("a", {
+  }, renderDescription()), isExpanded && /*#__PURE__*/_react.default.createElement("a", {
     className: (0, _helpers__.withStyle)('link-primary mx-1'),
     onClick: () => {
       setIsExpanded(false);

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

@@ -37,6 +37,7 @@ function _interopRequireWildcard(e, r) {
 }
 const ProductCardDiscountAlert = _ref => {
   let {
+    label,
     price,
     discountedPrice
   } = _ref;
@@ -44,6 +45,9 @@ const ProductCardDiscountAlert = _ref => {
     return null;
   }
   const discountLabel = (0, _react.useMemo)(() => {
+    if (label) {
+      return label;
+    }
     return "\u20AC".concat((0, _helpers__.formatPrice)(price - discountedPrice), " Korting");
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {

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

@@ -30,7 +30,7 @@ const ProductCardSpecifications = _ref => {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: key + value,
       className: (0, _helpers__.withStyle)('d-flex justify-content-between card-text__criterea')
-    }, /*#__PURE__*/_react.default.createElement("strong", null, key, ":"), " ", value);
+    }, Number.isInteger(Number(key)) ? value : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, key, ":"), " ", value));
   }));
 };
 var _default = exports.default = ProductCardSpecifications;