thm-p3-configurator 0.0.348 → 0.0.350

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

@@ -0,0 +1,180 @@
+"use strict";
+
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.parse-float.js");
+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/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.number.to-fixed.js");
+require("core-js/modules/es.parse-float.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _ActiveMarkerContext = require("../../__context__/ActiveMarkerContext");
+var _OrderSessionContext = require("../../__context__/OrderSessionContext");
+var _helpers__ = require("../../__helpers__");
+var _geolocation = require("../../__helpers__/geolocation");
+var _LocationListItem = _interopRequireDefault(require("./LocationListItem"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+function ownKeys(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;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+const LocationsLoading = () => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('w-100 text-center')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('spinner-border text-primary mx-auto'),
+    role: "status"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, "Loading...")));
+};
+const NoLocationFound = () => {
+  return /*#__PURE__*/_react.default.createElement("h4", null, "Geen montagelocaties gevonden");
+};
+const LocationList = _ref => {
+  let {
+    locationsById,
+    locationIds,
+    userLocation,
+    isLocationSetViaSearch = false,
+    isLoading = false
+  } = _ref;
+  const {
+    activeMarkerId
+  } = (0, _ActiveMarkerContext.useActiveMarker)();
+  const [{
+    selectedBranch
+  }] = (0, _OrderSessionContext.useOrderSession)();
+  const listRef = (0, _react.useRef)(null);
+  const locationsWithDistance = locationIds.map((locationId, index) => {
+    const location = locationsById[locationId];
+    const coordinates = location.googleMapsLocation;
+    if (!coordinates) return null;
+    const [latStr, lngStr] = coordinates.split(',');
+    const lat = parseFloat(latStr);
+    const lng = parseFloat(lngStr);
+    const distance = userLocation ? (0, _geolocation.calculateDistance)({
+      lat1: userLocation.lat,
+      lng1: userLocation.lng,
+      lat2: lat,
+      lng2: lng
+    }).toFixed(2) : null;
+    return _objectSpread(_objectSpread({}, location), {}, {
+      distance: distance ? parseFloat(distance) : null
+    });
+  }).filter(location => location !== null);
+  const sortedLocations = locationsWithDistance.sort((a, b) => {
+    const aIsSelected = a.entityId === activeMarkerId || a.entityId === selectedBranch;
+    const bIsSelected = b.entityId === activeMarkerId || b.entityId === selectedBranch;
+    if (aIsSelected && !bIsSelected) return -1; // a goes to top
+    if (!aIsSelected && bIsSelected) return 1; // b goes to top
+
+    if (a.distance === null) return 1;
+    if (b.distance === null) return -1;
+    return a.distance - b.distance;
+  });
+
+  // Handle scrolling when location is set via search
+  (0, _react.useEffect)(() => {
+    if (isLocationSetViaSearch && listRef.current) {
+      listRef.current.scrollTop = 0;
+    }
+  }, [isLocationSetViaSearch, userLocation]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: listRef,
+    className: (0, _helpers__.withStyle)('dealer-list')
+  }, /*#__PURE__*/_react.default.createElement("h5", null, userLocation ? 'Dichtsbijzijnde montagelocaties' : 'Montagelocaties'), isLoading && /*#__PURE__*/_react.default.createElement(LocationsLoading, null), !isLoading && !locationIds.length && /*#__PURE__*/_react.default.createElement(NoLocationFound, null), sortedLocations.map(location => /*#__PURE__*/_react.default.createElement(_LocationListItem.default, {
+    openingHours: location.openingstijden,
+    title: location.naamVestiging,
+    city: location.city,
+    distance: location.distance ? location.distance : null,
+    id: location.entityId,
+    key: location.entityId,
+    isSelected: location.entityId === activeMarkerId || location.entityId === selectedBranch,
+    userLocation: userLocation
+  })));
+};
+var _default = exports.default = LocationList;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _ActiveMarkerContext = require("../../__context__/ActiveMarkerContext");
+var _OrderSessionContext = require("../../__context__/OrderSessionContext");
+var _helpers__ = require("../../__helpers__");
+var _LocationDetails = _interopRequireDefault(require("./LocationDetails"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+const LocationListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    title,
+    city,
+    distance,
+    id,
+    isSelected,
+    userLocation
+  } = _ref;
+  const [{
+    selectedBranch
+  }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const {
+    setActiveMarkerId
+  } = (0, _ActiveMarkerContext.useActiveMarker)();
+  const handleClick = () => {
+    setActiveMarkerId(prevId => prevId === id ? null : id);
+    dispatch({
+      payload: {
+        branchId: selectedBranch === id ? null : id
+      },
+      type: _OrderSessionContext.orderSessionActions.SET_SELECTED_BRANCH
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: (0, _helpers__.withStyle)("dealer-item ".concat(isSelected ? 'active' : '')),
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('row justify-content-between')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col d-flex flex-column justify-content-between')
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    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')
+  }, 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"
+  }), Math.round(distance), " km"), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('form-check mb-0')
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "radio",
+    className: (0, _helpers__.withStyle)('form-check-input'),
+    name: "dealer-item-check",
+    id: "dealer-item-check-".concat(id),
+    autoComplete: "off",
+    readOnly: true,
+    checked: isSelected
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    className: (0, _helpers__.withStyle)('form-check-label'),
+    htmlFor: "dealer-item-check-".concat(id)
+  }, isSelected ? 'Geselecteerd' : 'Selecteren')))), isSelected && APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_LocationDetails.default, {
+    id: id
+  }));
+});
+var _default = exports.default = LocationListItem;

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

@@ -0,0 +1,96 @@
+"use strict";
+
+require("core-js/modules/es.parse-float.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.parse-float.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _reactGoogleMaps = require("@vis.gl/react-google-maps");
+var _react = _interopRequireWildcard(require("react"));
+var _mapMarkerThc = _interopRequireDefault(require("../../../../public/assets/images/map-marker-thc.png"));
+var _mapMarker = _interopRequireDefault(require("../../../../public/assets/images/map-marker.png"));
+var _constants__ = require("../../__constants__");
+var _FormulaContext = require("../../__context__/FormulaContext");
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+const LocationTreeMarker = /*#__PURE__*/_react.default.memo(_ref => {
+  let {
+    tree,
+    onClick,
+    setMarkerRef
+  } = _ref;
+  const core = (0, _reactGoogleMaps.useMapsLibrary)('core');
+  const formula = (0, _FormulaContext.useFormula)();
+  // Cache marker icon configuration
+  const markerIcon = (0, _react.useMemo)(() => {
+    if (!core) return {
+      url: formula == _constants__.CONFIGURATOR_FORMULAS.THC ? _mapMarkerThc.default : _mapMarker.default
+    };
+    return {
+      url: formula == _constants__.CONFIGURATOR_FORMULAS.THC ? _mapMarkerThc.default : _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]);
+
+  // 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: position,
+    ref: ref,
+    onClick: handleClick,
+    icon: markerIcon,
+    clickable: true,
+    visible: true,
+    zIndex: 1
+  });
+});
+var _default = exports.default = LocationTreeMarker;

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

@@ -0,0 +1,162 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _reactGoogleMaps = require("@vis.gl/react-google-maps");
+var _react = _interopRequireWildcard(require("react"));
+var _queries = require("../../__api__/queries");
+var _constants__ = require("../../__constants__");
+var _ActiveMarkerContext = require("../../__context__/ActiveMarkerContext");
+var _AuthSessionContext = require("../../__context__/AuthSessionContext");
+var _FormulaContext = require("../../__context__/FormulaContext");
+var _OrderSessionContext = require("../../__context__/OrderSessionContext");
+var _helpers__ = require("../../__helpers__");
+var _useBreakpoint = _interopRequireDefault(require("../../__hooks__/useBreakpoint"));
+var _useUserLocation = _interopRequireDefault(require("../../__hooks__/useUserLocation"));
+var _LocationAutoComplete = _interopRequireDefault(require("./LocationAutoComplete"));
+var _LocationClusteredMap = _interopRequireDefault(require("./LocationClusteredMap"));
+var _LocationList = _interopRequireDefault(require("./LocationList"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+const Loaded = /*#__PURE__*/_react.default.memo(_ref => {
+  let {
+    children
+  } = _ref;
+  const markers = (0, _reactGoogleMaps.useMapsLibrary)('marker');
+  const isLoaded = (0, _reactGoogleMaps.useApiIsLoaded)();
+  return isLoaded && markers && children;
+});
+const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
+  const [userLocation, setUserLocation] = (0, _useUserLocation.default)();
+  const [isLocationSetViaSearch, setIsLocationSetViaSearch] = (0, _react.useState)(false);
+  const {
+    setActiveMarkerId
+  } = (0, _ActiveMarkerContext.useActiveMarker)();
+  const [, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const screen = (0, _useBreakpoint.default)();
+  const isDesktop = screen.size >= 1200;
+  const formula = (0, _FormulaContext.useFormula)();
+  const [{
+    franchiseName
+  }] = (0, _OrderSessionContext.useOrderSession)();
+  const authSession = (0, _AuthSessionContext.useAuthSession)();
+  const {
+    branchTypes
+  } = (0, _queries.useBranchTypes)();
+  const isTMGOrganization = _react.default.useMemo(() => {
+    var _branchTypes$byId$aut, _authSession$branch;
+    return (branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch = authSession.branch) === null || _authSession$branch === void 0 || (_authSession$branch = _authSession$branch.organisatietype) === null || _authSession$branch === void 0 ? void 0 : _authSession$branch[0]]) === null || _branchTypes$byId$aut === void 0 ? void 0 : _branchTypes$byId$aut.title) === _constants__.TMG_ORGANIZATION_TYPE;
+  }, [branchTypes, authSession]);
+  const {
+    branches
+  } = (0, _queries.useBranchesQuery)({
+    offset: 0,
+    limit: 400,
+    formula,
+    franchiseName
+  });
+  const {
+    myBranches
+  } = (0, _queries.useMyBranches)(formula);
+  const locations = isTMGOrganization || !APP_CONFIG.internal ? (branches === null || branches === void 0 ? void 0 : branches.results) || [] : myBranches || [];
+  const {
+    byId,
+    allIds
+  } = (0, _react.useMemo)(() => (0, _helpers__.normalizeArray)({
+    array: locations || [],
+    key: 'entityId'
+  }), [locations]);
+
+  // Handle location updates from search
+  const handleLocationUpdate = function handleLocationUpdate(newLocation) {
+    let fromSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setUserLocation(newLocation);
+    setIsLocationSetViaSearch(fromSearch);
+
+    // Close any open marker popups when searching for a new location
+    if (fromSearch) {
+      setActiveMarkerId(null);
+
+      // Also clear any selected branch to avoid confusion
+      dispatch({
+        payload: {
+          branchId: null
+        },
+        type: _OrderSessionContext.orderSessionActions.SET_SELECTED_BRANCH
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.APIProvider, {
+    apiKey: APP_CONFIG.googleMapsApiKey,
+    libraries: ['marker']
+  }, /*#__PURE__*/_react.default.createElement(Loaded, null, APP_CONFIG.internal ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('row gx-5 mt-3 mt-xl-5')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('content col-xl-8')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)(isDesktop ? 'dealer-map__container' : 'dealer-map')
+  }, /*#__PURE__*/_react.default.createElement(_LocationClusteredMap.default, {
+    locationIds: allIds,
+    locationsById: byId,
+    userLocation: userLocation
+  }))), /*#__PURE__*/_react.default.createElement("aside", {
+    className: (0, _helpers__.withStyle)('dealer-sidebar col-xl-4 mt-3 mt-xl-0')
+  }, isDesktop && /*#__PURE__*/_react.default.createElement(_LocationAutoComplete.default, {
+    onLocationUpdate: handleLocationUpdate
+  }), franchiseName && /*#__PURE__*/_react.default.createElement("h6", {
+    className: (0, _helpers__.withStyle)('my-2')
+  }, "Keten: ", franchiseName), /*#__PURE__*/_react.default.createElement(_LocationList.default, {
+    locationIds: allIds,
+    locationsById: byId,
+    userLocation: userLocation,
+    isLocationSetViaSearch: isLocationSetViaSearch
+  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('row gx-5 mt-3 mt-xl-5 justify-content-center')
+  }, /*#__PURE__*/_react.default.createElement("aside", {
+    className: (0, _helpers__.withStyle)('dealer-sidebar col-xl-4 mt-3 mt-xl-0')
+  }, isDesktop && /*#__PURE__*/_react.default.createElement(_LocationAutoComplete.default, {
+    onLocationUpdate: handleLocationUpdate
+  }), franchiseName && /*#__PURE__*/_react.default.createElement("h6", {
+    className: (0, _helpers__.withStyle)('my-2')
+  }, "Keten: ", franchiseName), /*#__PURE__*/_react.default.createElement(_LocationList.default, {
+    locationIds: allIds,
+    locationsById: byId,
+    userLocation: userLocation,
+    isLocationSetViaSearch: isLocationSetViaSearch
+  })))));
+});
+var _default = exports.default = LocationsSelector;

package/dist/src/shared/__components__/Modal.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _helpers__ = require("../__helpers__");
+var _LinkButton = _interopRequireDefault(require("./Buttons/LinkButton"));
+var _PrimaryButton = _interopRequireDefault(require("./Buttons/PrimaryButton"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+const Modal = _ref => {
+  let {
+    isOpen,
+    size,
+    title,
+    onPrimaryButtonClicked,
+    onSecondaryButtonClicked,
+    onClose,
+    primaryButtonText,
+    secondaryButtonText,
+    hasSecondaryButton = true,
+    hasPrimaryButton = true,
+    isPrimaryButtonDisabled = false,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)("modal fade modal--".concat(size, " ").concat(isOpen ? 'show' : '')),
+    "data-bs-backdrop": "static",
+    "data-bs-keyboard": "false",
+    tabIndex: "-1",
+    "aria-labelledby": "staticBackdropLabel",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('modal-dialog modal-dialog-centered modal-lg')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('modal-content page-content')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('modal-header position-relative')
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: (0, _helpers__.withStyle)('text-center w-100 mb-0')
+  }, title), onClose && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _helpers__.withStyle)('btn-close position-absolute top-0 end-0 m-3'),
+    onClick: onClose,
+    "aria-label": "Close"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('modal-body')
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('modal-footer justify-content-center')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('row')
+  }, hasSecondaryButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col col-lg-auto mt-1')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-grid gap-2')
+  }, /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    type: "button",
+    onClick: onSecondaryButtonClicked,
+    label: secondaryButtonText
+  }))), hasPrimaryButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col col-lg-auto mt-1')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-grid gap-2')
+  }, /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
+    type: "button",
+    onClick: onPrimaryButtonClicked,
+    isDisabled: isPrimaryButtonDisabled,
+    label: primaryButtonText
+  })))))))), isOpen && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('modal-backdrop fade show')
+  }));
+};
+var _default = exports.default = Modal;

package/dist/src/shared/__components__/Navbar.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _logoThcWhite = _interopRequireDefault(require("../../../public/assets/images/logo-thc-white.svg"));
+var _logoTmgPrimary = _interopRequireDefault(require("../../../public/assets/images/logo-tmg-primary.png"));
+var _logoWhite = _interopRequireDefault(require("../../../public/assets/images/logo-white.svg"));
+var _tmLogo = _interopRequireDefault(require("../../../public/assets/images/tm-logo.png"));
+var _constants__ = require("../__constants__");
+var _helpers__ = require("../__helpers__");
+var _useBranchTheme = require("../__hooks__/useBranchTheme");
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+const Navbar = _ref => {
+  let {
+    onPhoneClicked
+  } = _ref;
+  const theme = (0, _useBranchTheme.useBranchTheme)();
+  const themeClass = (0, _helpers__.getConfiguratorThemeClass)(theme);
+  return /*#__PURE__*/_react.default.createElement("nav", {
+    className: (0, _helpers__.withStyle)("navbar fixed-top ".concat(themeClass))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('container-fluid')
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    className: (0, _helpers__.withStyle)('navbar-brand'),
+    href: APP_CONFIG.websiteHost
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: (0, _helpers__.withStyle)('img-fluid'),
+    src: theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotive ? _tmLogo.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.Trekhaakcentrum ? _logoThcWhite.default : theme === _constants__.BRANCH_THEME_BY_FORMULA.TowMotiveGroup ? _logoTmgPrimary.default : _logoWhite.default,
+    alt: "Trekhaakmontage"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('navbar__phone ms-10 d-none d-sm-flex')
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('mb-0 fw-bold')
+  }, "Heeft u advies nodig?"), /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('mb-0')
+  }, "Bel ons via", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: "tel:+31 85 - 000 4122",
+    onClick: onPhoneClicked
+  }, "+31 85 - 000 4122"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('navbar__phone text-end d-flex d-sm-none')
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('mb-0 fw-bold')
+  }, "Heeft u een vraag?"), /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('mb-0')
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _helpers__.withStyle)('fas fa-phone-alt me-1')
+  }), /*#__PURE__*/_react.default.createElement("a", {
+    href: "tel:+3185000 4122"
+  }, "+31 85 - 000 4122")))));
+};
+var _default = exports.default = Navbar;