thm-p3-configurator 0.0.66 → 0.0.68

package/dist/src/shared/App.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _TEST_ONLY_INTERNAL_ROUTES = _interopRequireDefault(require("./__pages__/internal/__TEST_ONLY_INTERNAL_ROUTES"));
 var _react = _interopRequireWildcard(require("react"));
 require("react-datepicker/src/stylesheets/datepicker-cssmodules.scss");
 var _reactGtmModule = _interopRequireDefault(require("react-gtm-module"));
@@ -16,7 +17,6 @@ var _reactQuery = require("react-query");
 var _reactRouterDom = require("react-router-dom");
 var _Navbar = _interopRequireDefault(require("./__components__/Navbar"));
 var _constants__ = require("./__constants__");
-var _InternalBranchSelectorModal = _interopRequireDefault(require("./__containers__/internal/InternalBranchSelectorModal"));
 var _SentryWrapper = _interopRequireDefault(require("./__containers__/SentryWrapper"));
 var _StyleWrapper = _interopRequireDefault(require("./__containers__/StyleWrapper"));
 var _ActiveMarkerContext = require("./__context__/ActiveMarkerContext");
@@ -25,15 +25,9 @@ var _FormulaContext = require("./__context__/FormulaContext");
 var _OrderSessionContext = require("./__context__/OrderSessionContext");
 var _cookiebot = require("./__helpers__/cookiebot");
 var _queryClient = _interopRequireDefault(require("./__helpers__/queryClient"));
-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"));
-function _interopRequireDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
 function _getRequireWildcardCache(e) {
   if ("function" != typeof WeakMap) return null;
   var r = new WeakMap(),
@@ -59,6 +53,11 @@ function _interopRequireWildcard(e, r) {
   }
   return n.default = e, t && t.set(e, n), n;
 }
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 _reactGtmModule.default.initialize({
   gtmId: APP_CONFIG.googleTagManagerId || 'GTM-TC67SZ4'
 });
@@ -69,11 +68,11 @@ const App = () => {
     (0, _Experiments.default)();
   });
   return /*#__PURE__*/_react.default.createElement(_SentryWrapper.default, null, /*#__PURE__*/_react.default.createElement(_FormulaContext.FormulaController, {
-    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THM
+    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THC
   }, /*#__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(_index.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.nodeEnv === 'development' && APP_CONFIG.internal === true && /*#__PURE__*/_react.default.createElement(_TEST_ONLY_INTERNAL_ROUTES.default, null))))))))));
 };
 var _default = exports.default = App;

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

@@ -137,6 +137,7 @@ const useCreatePrivateQuotationMutation = () => {
       vehicle,
       customer,
       channel,
+      chassisNumber,
       licensePlate,
       model,
       answers,
@@ -151,6 +152,7 @@ const useCreatePrivateQuotationMutation = () => {
       isExitIntent,
       model,
       vehicle,
+      chassisNumber,
       licensePlate,
       channel,
       formula,
@@ -187,6 +189,7 @@ const useCreatePrivateAppointmentMutation = () => {
       model,
       answers,
       cart,
+      chassisNumber,
       selectBoardComputerUpdate,
       branchId,
       formula,
@@ -199,6 +202,7 @@ const useCreatePrivateAppointmentMutation = () => {
       vehicle,
       licensePlate,
       channel,
+      chassisNumber,
       formula,
       discount,
       answers,
@@ -279,6 +283,7 @@ const useUpdatePrivateAppointmentByIdMutation = id => {
       channel,
       appointment,
       licensePlate,
+      chassisNumber,
       model,
       answers,
       cart,
@@ -295,6 +300,7 @@ const useUpdatePrivateAppointmentByIdMutation = id => {
         model,
         vehicle,
         licensePlate,
+        chassisNumber,
         channel,
         formula,
         discount,

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

@@ -297,14 +297,10 @@ const useSingleOrderArticles = exports.useSingleOrderArticles = function useSing
  */
 const useSingleOrderCart = () => {
   const [{
-    model,
-    licensePlate,
     singleOrderCart
   }] = (0, _OrderSessionContext.useOrderSession)();
   const formula = (0, _FormulaContext.useFormula)();
   let cartOrderQuery = new URLSearchParams((0, _helpers__.removeNullishProps)({
-    model,
-    licensePlate,
     formula,
     isSingle: true,
     cart: JSON.stringify(singleOrderCart)
@@ -349,22 +345,52 @@ const useSingleOrderCart = () => {
 
 /**
  * @description Retrieves the products of an order
+ * @param {String} branchId - The branch id to apply to the articles
  */
 exports.useSingleOrderCart = useSingleOrderCart;
 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$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
+    model,
+    formula
   } = orderParameters;
   const productsSearchParams = new URLSearchParams((0, _helpers__.removeNullishProps)(orderParameters)).toString();
   const productsQuery = (0, _reactQuery.useQuery)(['products', productsSearchParams], {
     enabled: (licensePlate === null || licensePlate === void 0 ? void 0 : licensePlate.length) > 5 || !!(model !== null && model !== void 0 && model.length),
     keepPreviousData: true,
-    queryFn: () => _orderApi.orderApi.getOrder(productsSearchParams).then(res => {
-      var _res$data4;
-      return (_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : _res$data4.data;
-    })
+    queryFn: async () => {
+      var _response$data, _JSON$parse, _data$articles, _data$articles2, _data$articles3, _data$articles4, _data$articles5, _data$articles6, _data$articles7, _data$articles8, _data$articles9, _data$articles10, _data$articles11;
+      const response = await _orderApi.orderApi.getOrder(productsSearchParams);
+      const data = (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.data;
+      if (!data) return data;
+      const authSession = _LocalStorageWorker.lsw.get(_constants__.AUTH_SESSION_KEY);
+      const branchId = (_JSON$parse = JSON.parse(authSession)) === null || _JSON$parse === void 0 || (_JSON$parse = _JSON$parse.branch) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.entityId;
+
+      // Skip enrichment if no branchId is provided
+      if (!branchId) {
+        return data;
+      }
+      // Get all products to enrich
+      const allProducts = [...(((_data$articles = data.articles) === null || _data$articles === void 0 ? void 0 : _data$articles.towbars) || []), ...(((_data$articles2 = data.articles) === null || _data$articles2 === void 0 ? void 0 : _data$articles2.cablesets) || []), ...(((_data$articles3 = data.articles) === null || _data$articles3 === void 0 ? void 0 : _data$articles3.combisets) || []), ...((_data$articles4 = data.articles) !== null && _data$articles4 !== void 0 && _data$articles4.boardComputerUpdate ? [(_data$articles5 = data.articles) === null || _data$articles5 === void 0 ? void 0 : _data$articles5.boardComputerUpdate] : []), ...(((_data$articles6 = data.articles) === null || _data$articles6 === void 0 ? void 0 : _data$articles6.extras) || [])];
+
+      // Enrich all products with brands and prices
+      const enrichedProducts = await (0, _singleOrderArticles.enrichArticlesWithBrandsAndPrices)(allProducts, branchId, formula);
+
+      // Create a lookup map for the enriched products
+      const enrichedProductsMap = Object.fromEntries(enrichedProducts.map(product => [product.articleNumber, product]));
+
+      // Update the products in the response with the enriched data
+      return _objectSpread(_objectSpread({}, data), {}, {
+        articles: _objectSpread(_objectSpread({}, data.articles), {}, {
+          towbars: ((_data$articles7 = data.articles) === null || _data$articles7 === void 0 || (_data$articles7 = _data$articles7.towbars) === null || _data$articles7 === void 0 ? void 0 : _data$articles7.map(product => _objectSpread(_objectSpread({}, product), enrichedProductsMap[product.articleNumber]))) || [],
+          cablesets: ((_data$articles8 = data.articles) === null || _data$articles8 === void 0 || (_data$articles8 = _data$articles8.cablesets) === null || _data$articles8 === void 0 ? void 0 : _data$articles8.map(product => _objectSpread(_objectSpread({}, product), enrichedProductsMap[product.articleNumber]))) || [],
+          combisets: ((_data$articles9 = data.articles) === null || _data$articles9 === void 0 || (_data$articles9 = _data$articles9.combisets) === null || _data$articles9 === void 0 ? void 0 : _data$articles9.map(product => _objectSpread(_objectSpread({}, product), enrichedProductsMap[product.articleNumber]))) || [],
+          boardComputerUpdate: (_data$articles10 = data.articles) !== null && _data$articles10 !== void 0 && _data$articles10.boardComputerUpdate ? _objectSpread(_objectSpread({}, data.articles.boardComputerUpdate), enrichedProductsMap[data.articles.boardComputerUpdate.articleNumber]) : null,
+          extras: ((_data$articles11 = data.articles) === null || _data$articles11 === void 0 || (_data$articles11 = _data$articles11.extras) === null || _data$articles11 === void 0 ? void 0 : _data$articles11.map(product => _objectSpread(_objectSpread({}, product), enrichedProductsMap[product.articleNumber]))) || []
+        })
+      });
+    }
   });
   return {
     isLoadingProducts: productsQuery.isLoading,
@@ -407,14 +433,14 @@ const useQuestionsQuery = questionParams => {
   const questionsQuery = (0, _reactQuery.useQuery)(['questions', questionsParamsString], {
     enabled: (licensePlate === null || licensePlate === void 0 ? void 0 : licensePlate.length) > 5 || !!(model !== null && model !== void 0 && model.length),
     queryFn: () => _orderApi.orderApi.getOrder(questionsParamsString).then(res => {
-      var _res$data5, _res$data6, _res$data7, _res$data8, _res$data9, _res$data10;
+      var _res$data4, _res$data5, _res$data6, _res$data7, _res$data8, _res$data9;
       return {
-        execution1Answer: res === null || res === void 0 || (_res$data5 = res.data) === null || _res$data5 === void 0 || (_res$data5 = _res$data5.data) === null || _res$data5 === void 0 || (_res$data5 = _res$data5.answers) === null || _res$data5 === void 0 ? void 0 : _res$data5.execution1,
-        execution2Answer: res === null || res === void 0 || (_res$data6 = res.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.answers) === null || _res$data6 === void 0 ? void 0 : _res$data6.execution2,
-        durationAnswer: res === null || res === void 0 || (_res$data7 = res.data) === null || _res$data7 === void 0 || (_res$data7 = _res$data7.data) === null || _res$data7 === void 0 || (_res$data7 = _res$data7.answers) === null || _res$data7 === void 0 ? void 0 : _res$data7.duration,
-        durationQuestion: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data8 = res.data) === null || _res$data8 === void 0 || (_res$data8 = _res$data8.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.durationAnswerOptions),
-        execution1AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data9 = res.data) === null || _res$data9 === void 0 || (_res$data9 = _res$data9.data) === null || _res$data9 === void 0 || (_res$data9 = _res$data9.executionAnswerOptions) === null || _res$data9 === void 0 ? void 0 : _res$data9.execution1AnswerOptions),
-        execution2AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data10 = res.data) === null || _res$data10 === void 0 || (_res$data10 = _res$data10.data) === null || _res$data10 === void 0 || (_res$data10 = _res$data10.executionAnswerOptions) === null || _res$data10 === void 0 ? void 0 : _res$data10.execution2AnswerOptions)
+        execution1Answer: res === null || res === void 0 || (_res$data4 = res.data) === null || _res$data4 === void 0 || (_res$data4 = _res$data4.data) === null || _res$data4 === void 0 || (_res$data4 = _res$data4.answers) === null || _res$data4 === void 0 ? void 0 : _res$data4.execution1,
+        execution2Answer: res === null || res === void 0 || (_res$data5 = res.data) === null || _res$data5 === void 0 || (_res$data5 = _res$data5.data) === null || _res$data5 === void 0 || (_res$data5 = _res$data5.answers) === null || _res$data5 === void 0 ? void 0 : _res$data5.execution2,
+        durationAnswer: res === null || res === void 0 || (_res$data6 = res.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.answers) === null || _res$data6 === void 0 ? void 0 : _res$data6.duration,
+        durationQuestion: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data7 = res.data) === null || _res$data7 === void 0 || (_res$data7 = _res$data7.data) === null || _res$data7 === void 0 ? void 0 : _res$data7.durationAnswerOptions),
+        execution1AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data8 = res.data) === null || _res$data8 === void 0 || (_res$data8 = _res$data8.data) === null || _res$data8 === void 0 || (_res$data8 = _res$data8.executionAnswerOptions) === null || _res$data8 === void 0 ? void 0 : _res$data8.execution1AnswerOptions),
+        execution2AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data9 = res.data) === null || _res$data9 === void 0 || (_res$data9 = _res$data9.data) === null || _res$data9 === void 0 || (_res$data9 = _res$data9.executionAnswerOptions) === null || _res$data9 === void 0 ? void 0 : _res$data9.execution2AnswerOptions)
       };
     })
   });

package/dist/src/shared/__components__/ProductTable/ProductTableEditableRow.js

@@ -32,7 +32,7 @@ const ProductTableEditableRow = _ref => {
   }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('cart__product row align-items-center justify-content-between')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('col-auto')
+    className: (0, _helpers__.withStyle)('col-12')
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)('img-fluid rounded-1'),
     src: productImage || _logoPrimary.default,

package/dist/src/shared/__components__/ProductTable/ProductTableStaticRow.js

@@ -27,7 +27,7 @@ const ProductTableStaticRow = _ref => {
   }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('cart__product row align-items-center justify-content-between')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('col-auto')
+    className: (0, _helpers__.withStyle)('col-12')
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: (0, _helpers__.withStyle)('img-fluid rounded-1'),
     src: productImage || _logoPrimary.default,

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

@@ -1,106 +1,356 @@
 "use strict";
 
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.parse-float.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.string.includes.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.find.js");
 require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.reduce.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.array.includes.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.parse-float.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.string.includes.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.map.js");
-var _react = _interopRequireDefault(require("react"));
-var _dummyApi = require("../__api__/_dummyApi");
+require("core-js/modules/esnext.iterator.reduce.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _logoPrimary = _interopRequireDefault(require("../../../public/assets/images/logo-primary.png"));
+var _queries = require("../__api__/queries");
 var _TogglableCard = _interopRequireDefault(require("../__components__/Cards/TogglableCard"));
 var _ProductTableEditableRow = _interopRequireDefault(require("../__components__/ProductTable/ProductTableEditableRow"));
+var _ProductTableHead = _interopRequireDefault(require("../__components__/ProductTable/ProductTableHead"));
 var _ProductTableSection = _interopRequireDefault(require("../__components__/ProductTable/ProductTableSection"));
 var _ProductTableSectionTotal = _interopRequireDefault(require("../__components__/ProductTable/ProductTableSectionTotal"));
 var _ProductTableStaticRow = _interopRequireDefault(require("../__components__/ProductTable/ProductTableStaticRow"));
 var _ProductTableTotal = _interopRequireDefault(require("../__components__/ProductTable/ProductTableTotal"));
+var _FullPageSpinner = _interopRequireDefault(require("../__components__/Spinners/FullPageSpinner"));
+var _FormulaContext = require("../__context__/FormulaContext");
+var _OrderSessionContext = require("../__context__/OrderSessionContext");
 var _helpers__ = require("../__helpers__");
+var _image = require("../__helpers__/image");
+var _product = require("../__helpers__/product");
 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 ProductCartSide = () => {
+  const formula = (0, _FormulaContext.useFormula)();
+  const [isToggled, setIsToggled] = (0, _react.useState)(false);
+  const [{
+    licensePlate,
+    model,
+    executionAnswer1,
+    executionAnswer2,
+    durationAnswer,
+    selectedTowbar,
+    selectedCableset,
+    selectedCombiset,
+    selectedBoardComputer,
+    selectedExtras,
+    discountAmount,
+    discountPercentage
+  }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const cartInput = (0, _product.validateCartInput)([{
+    articleNumber: selectedCableset,
+    quantity: 1
+  }, {
+    articleNumber: selectedCombiset,
+    quantity: 1
+  }, {
+    articleNumber: selectedTowbar,
+    quantity: 1
+  }, ...Object.entries(selectedExtras).map(_ref => {
+    let [extraArticleNumber, extraQuantity] = _ref;
+    return {
+      articleNumber: extraArticleNumber,
+      quantity: extraQuantity
+    };
+  })]);
   const {
-    data: products
-  } = _dummyApi.dummyApi.getCart();
+    cart,
+    totals,
+    products,
+    isLoadingProducts
+  } = (0, _queries.useProductsQuery)({
+    licensePlate,
+    model,
+    executionAnswer1,
+    executionAnswer2,
+    durationAnswer,
+    selectBoardComputerUpdate: selectedBoardComputer != null,
+    cart: cartInput ? JSON.stringify(cartInput) : undefined,
+    formula
+  });
+  let mainProducts = [];
+  let accessoireProducts = [];
+  if (products) {
+    var _products$Trekhaak, _products$Combiset, _products$Kabelset, _products$Elektronica, _products$Extras;
+    const towbar = selectedTowbar && ((_products$Trekhaak = products.Trekhaak) === null || _products$Trekhaak === void 0 ? void 0 : _products$Trekhaak.find(product => product.articleNumber === selectedTowbar)) || null;
+    const combiset = selectedCombiset && ((_products$Combiset = products.Combiset) === null || _products$Combiset === void 0 ? void 0 : _products$Combiset.find(product => product.articleNumber === selectedCombiset)) || null;
+    const cableset = selectedCableset && ((_products$Kabelset = products.Kabelset) === null || _products$Kabelset === void 0 ? void 0 : _products$Kabelset.find(product => product.articleNumber === selectedCableset)) || null;
+    const boardComputer = selectedBoardComputer && ((_products$Elektronica = products['Elektronica boordcomputer updaten']) === null || _products$Elektronica === void 0 ? void 0 : _products$Elektronica.find(product => product.articleNumber === selectedBoardComputer)) || null;
+    const extras = Object.keys(selectedExtras);
+    mainProducts = [towbar, combiset, cableset, boardComputer].filter(Boolean);
+    accessoireProducts = extras.length > 0 && ((_products$Extras = products.Extras) === null || _products$Extras === void 0 ? void 0 : _products$Extras.filter(product => extras.includes(product.articleNumber.toString()))) || [];
+  }
+  if (isLoadingProducts) {
+    return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
+  }
+  const getItemPrice = cartItem => {
+    var _product$consumerPric;
+    if (!cartItem) return 0;
+
+    // Find the corresponding product
+    const product = [...mainProducts, ...accessoireProducts].find(p => p.articleNumber === cartItem.articleNumber);
+    if (isToggled) {
+      var _product$locationPric;
+      // Use location price from the product's locationPrices (excl. BTW)
+      return (product === null || product === void 0 || (_product$locationPric = product.locationPrices) === null || _product$locationPric === void 0 ? void 0 : _product$locationPric.priceExclVat) || 0;
+    }
+    // Use consumer price from the product's consumerPrices (incl. BTW)
+    return (product === null || product === void 0 || (_product$consumerPric = product.consumerPrices) === null || _product$consumerPric === void 0 ? void 0 : _product$consumerPric.priceInclVat) || cartItem.consumerTotal || 0;
+  };
+
+  // Calculate subtotal for products
+  const subtotalPriceProducts = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
+    if (mainProducts.find(product => product.articleNumber === item.articleNumber)) {
+      return acc + parseFloat(getItemPrice(item));
+    }
+    return acc;
+  }, 0)) || 0;
+
+  // Calculate subtotal for accessories
+  const subtotalPriceAccessoires = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
+    if (accessoireProducts.find(product => product.articleNumber === item.articleNumber)) {
+      return acc + parseFloat(getItemPrice(item));
+    }
+    return acc;
+  }, 0)) || 0;
+
+  // Calculate total discount
+  const calculateTotalDiscount = () => {
+    const totalPrice = subtotalPriceProducts + subtotalPriceAccessoires;
+    if (discountPercentage) {
+      return totalPrice * discountPercentage / 100;
+    }
+    if (discountAmount) {
+      return discountAmount;
+    }
+    return 0;
+  };
+
+  // Calculate original total
+  const calculateOriginalTotal = () => {
+    return subtotalPriceProducts + subtotalPriceAccessoires;
+  };
+
+  // Calculate final totals
+  const calculateFinalTotals = () => {
+    const totalDiscount = calculateTotalDiscount();
+    const originalTotal = calculateOriginalTotal();
+
+    // Calculate the proportion of the discount that applies to the excl. VAT amount
+    const discountExclVat = totalDiscount / 1.21; // Remove VAT from discount
+    const discountVat = totalDiscount - discountExclVat;
+    const baseExclVat = originalTotal / 1.21; // Original price excl VAT
+    const baseVat = originalTotal - baseExclVat; // Original VAT amount
+
+    return {
+      exclVat: Math.max(0, baseExclVat - discountExclVat),
+      vat: Math.max(0, baseVat - discountVat),
+      total: Math.max(0, originalTotal - totalDiscount),
+      originalTotal
+    };
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)("col-lg mt-3")
   }, /*#__PURE__*/_react.default.createElement(_TogglableCard.default, {
     title: 'Overzicht',
     untoggleButton: "Verberg inkoopprijzen",
     toggleButton: "Toon inkoopprijzen",
-    onToggle: toggled => console.info('Toggled ' + toggled)
+    onToggle: toggled => setIsToggled(toggled)
   }, /*#__PURE__*/_react.default.createElement("table", {
     className: (0, _helpers__.withStyle)('cart__table table table-borderless align-middle')
-  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement(_ProductTableSection.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ProductTableHead.default, {
+    columns: [{},
+    // Image
+    {},
+    // Title
+    {
+      text: isToggled ? 'Inkoopprijs (excl. btw)' : 'Verkoop Prijs (incl. btw)',
+      className: 'fw-bold text-end'
+    }]
+  }), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement(_ProductTableSection.default, {
     heading: 'Trekhaakmontage'
-  }, products.static.map(_ref => {
-    let {
-      title,
-      id,
-      image,
-      price
-    } = _ref;
+  }, mainProducts.map(product => {
+    var _product$images, _product$images2;
     return /*#__PURE__*/_react.default.createElement(_ProductTableStaticRow.default, {
-      key: id,
-      productTitle: title,
-      productImage: image,
+      key: product.articleNumber,
+      productTitle: product.name || product.subgroupName,
+      productImage: product !== null && product !== void 0 && (_product$images = product.images) !== null && _product$images !== void 0 && _product$images[0] ? (0, _image.getImageFromHyper)({
+        imageId: (_product$images2 = product.images) === null || _product$images2 === void 0 ? void 0 : _product$images2[0]
+      }) : _logoPrimary.default,
       extraCells: [{}, {
-        text: (0, _helpers__.formatPrice)(price),
+        text: (0, _helpers__.formatPrice)(getItemPrice(cart === null || cart === void 0 ? void 0 : cart.find(item => item.articleNumber === product.articleNumber)) || 0),
         className: 'cart__table-purchase-price text-end'
       }]
     });
   }), /*#__PURE__*/_react.default.createElement(_ProductTableSectionTotal.default, {
     isEditable: false,
     extraCells: [{}, {
-      text: 'Subtotaal (incl. BTW)',
+      text: isToggled ? 'Subtotaal (excl. btw)' : 'Subtotaal (incl. btw)',
       className: 'fw-bold text-end pb-2'
     }, {
-      text: (0, _helpers__.formatPrice)(100),
+      text: (0, _helpers__.formatPrice)(subtotalPriceProducts),
       className: 'fw-bold text-end pb-2'
     }]
-  })), /*#__PURE__*/_react.default.createElement(_ProductTableSection.default, {
+  })), accessoireProducts.length > 0 && /*#__PURE__*/_react.default.createElement(_ProductTableSection.default, {
     heading: 'Toebehoren'
-  }, products.editable.map(_ref2 => {
-    let {
-      title,
-      image,
-      price,
-      amount
-    } = _ref2;
+  }, accessoireProducts.map(product => {
+    var _product$images3, _product$images4;
     return /*#__PURE__*/_react.default.createElement(_ProductTableEditableRow.default, {
-      productTitle: title,
-      productImage: image,
-      key: title,
+      key: product.articleNumber,
+      productTitle: product.name,
+      productImage: product !== null && product !== void 0 && (_product$images3 = product.images) !== null && _product$images3 !== void 0 && _product$images3[0] ? (0, _image.getImageFromHyper)({
+        imageId: (_product$images4 = product.images) === null || _product$images4 === void 0 ? void 0 : _product$images4[0]
+      }) : _logoPrimary.default,
       extraCells: [{}, {
-        text: (0, _helpers__.formatPrice)(price),
+        text: (0, _helpers__.formatPrice)(getItemPrice(cart === null || cart === void 0 ? void 0 : cart.find(item => item.articleNumber === product.articleNumber)) || 0),
         className: 'cart__table-purchase-price text-end'
       }],
-      productAmount: amount,
-      onEdit: () => console.info('Edit'),
-      onRemove: () => console.info('Remove'),
+      productAmount: selectedExtras[product.articleNumber],
+      onEdit: value => {
+        if (value > 0) {
+          dispatch({
+            type: _OrderSessionContext.orderSessionActions.UPDATE_EXTRA_QUANTITY,
+            payload: {
+              id: product.articleNumber,
+              quantity: value
+            }
+          });
+        }
+      },
+      onRemove: () => dispatch({
+        type: _OrderSessionContext.orderSessionActions.REMOVE_EXTRA,
+        payload: {
+          id: product.articleNumber
+        }
+      }),
       isDisabled: false
     });
   }), /*#__PURE__*/_react.default.createElement(_ProductTableSectionTotal.default, {
     isEditable: false,
     extraCells: [{}, {
-      text: 'Subtotaal (incl. BTW)',
+      text: isToggled ? 'Subtotaal (excl. btw)' : 'Subtotaal (incl. btw)',
       className: 'fw-bold text-end pb-2'
     }, {
-      text: (0, _helpers__.formatPrice)(100),
+      text: (0, _helpers__.formatPrice)(subtotalPriceAccessoires),
       className: 'fw-bold text-end pb-2'
     }]
   })), /*#__PURE__*/_react.default.createElement(_ProductTableTotal.default, {
-    rows: [[{}, {
+    rows: [...(isToggled ? [[{}, {
+      text: 'Producten (excl. btw)',
+      className: 'text-end pt-2'
+    }, {
+      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      className: 'text-end pt-2'
+    }], [{}, {
+      text: 'btw',
+      className: 'text-end'
+    }, {
+      text: (0, _helpers__.formatPrice)(calculateFinalTotals().vat),
+      className: 'text-end'
+    }], [{}, {
+      text: 'Totaal (incl. btw)',
+      className: 'fw-bold text-end'
+    }, {
+      text: (0, _helpers__.formatPrice)(calculateOriginalTotal()),
+      className: 'fw-bold text-end'
+    }]] : [[{}, {
       text: 'Producten (excl. btw)',
-      className: 'fw-bold text-end pt-2'
+      className: 'text-end pt-2'
+    }, {
+      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      className: 'text-end pt-2'
+    }], [{}, {
+      text: 'Totaal (incl. btw)',
+      className: 'fw-bold text-end'
+    }, {
+      text: (0, _helpers__.formatPrice)(calculateOriginalTotal()),
+      className: 'fw-bold text-end'
+    }]])]
+  }), (discountAmount || discountPercentage) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+    colSpan: "3",
+    className: (0, _helpers__.withStyle)('pt-4 pb-2')
+  }, /*#__PURE__*/_react.default.createElement("hr", null))), /*#__PURE__*/_react.default.createElement(_ProductTableTotal.default, {
+    rows: [[{}, {
+      text: discountPercentage ? "Correctie (".concat(discountPercentage, "%)") : 'Correctie',
+      className: 'text-end text-success'
+    }, {
+      text: "-".concat((0, _helpers__.formatPrice)(calculateTotalDiscount())),
+      className: 'text-end text-success'
+    }], ...(isToggled ? [[{}, {
+      text: 'Totaal na correctie (excl. btw)',
+      className: 'text-end'
+    }, {
+      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      className: 'text-end'
+    }], [{}, {
+      text: 'Correctie btw',
+      className: 'text-end'
+    }, {
+      text: (0, _helpers__.formatPrice)(calculateFinalTotals().vat),
+      className: 'text-end'
+    }]] : []), [{}, {
+      text: 'Totaal na correctie (incl. btw)',
+      className: 'fw-bold text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(100),
-      className: 'fw-bold text-end pt-2'
+      text: (0, _helpers__.formatPrice)(calculateFinalTotals().total),
+      className: 'fw-bold text-end'
     }]]
-  })))));
+  }))))));
 };
 var _default = exports.default = ProductCartSide;