thm-p3-configurator 0.0.111 → 0.0.113

package/dist/src/shared/App.js

@@ -8,7 +8,6 @@ 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"));
@@ -26,9 +25,15 @@ 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(),
@@ -54,12 +59,7 @@ function _interopRequireWildcard(e, r) {
   }
   return n.default = e, t && t.set(e, n), n;
 }
-function _interopRequireDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-// import Routes from './__pages__/index';
+// import TEST_ONLY_INTERNAL_ROUTES from './__pages__/internal/__TEST_ONLY_INTERNAL_ROUTES';
 
 _reactGtmModule.default.initialize({
   gtmId: APP_CONFIG.googleTagManagerId || 'GTM-TC67SZ4'
@@ -76,6 +76,6 @@ const App = () => {
     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), APP_CONFIG.nodeEnv === 'development' && APP_CONFIG.internal === true && /*#__PURE__*/_react.default.createElement(_TEST_ONLY_INTERNAL_ROUTES.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/__components__/Form/TextInput.js

@@ -75,7 +75,6 @@ const TextInput = _ref => {
   }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), /*#__PURE__*/_react.default.createElement("input", {
     placeholder: placeholder,
     as: 'input',
-    id: name,
     name: name,
     type: 'text',
     onClick: onClick,

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

@@ -32,6 +32,7 @@ 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 _montagePlaceholder = _interopRequireDefault(require("../../../public/assets/images/montage-placeholder.png"));
 var _queries = require("../__api__/queries");
 var _TogglableCard = _interopRequireDefault(require("../__components__/Cards/TogglableCard"));
 var _ProductTableEditableRow = _interopRequireDefault(require("../__components__/ProductTable/ProductTableEditableRow"));
@@ -139,70 +140,197 @@ const ProductCartSide = () => {
   if (isLoadingProducts) {
     return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
   }
-  const getItemPrice = cartItem => {
-    var _product$consumerPric;
-    if (!cartItem) return 0;
+
+  /**
+   * Calculate item prices from a cart item
+   * @param {Object} cartItem - Cart item object
+   * @return {Object} Calculated prices for the item
+   */
+  const getItemPrices = cartItem => {
+    var _product$locationPric, _product$consumerPric, _product$consumerPric2;
+    if (!cartItem) {
+      return {
+        purchasePrice: 0,
+        salesPrice: 0,
+        salesPriceInclVat: 0,
+        margin: 0,
+        marginPercentage: 0
+      };
+    }
 
     // Find the corresponding product
     const product = [...mainProducts, ...accessoireProducts].find(p => p.articleNumber === cartItem.articleNumber);
-    if (isToggled) {
-      var _product$locationPric;
-      return ((product === null || product === void 0 || (_product$locationPric = product.locationPrices) === null || _product$locationPric === void 0 ? void 0 : _product$locationPric.priceExclVat) || 0) * (cartItem.quantity || 1);
+    if (!product) {
+      return {
+        purchasePrice: 0,
+        salesPrice: 0,
+        salesPriceInclVat: 0,
+        margin: 0,
+        marginPercentage: 0
+      };
     }
-    return cartItem.consumerTotal || ((product === null || product === void 0 || (_product$consumerPric = product.consumerPrices) === null || _product$consumerPric === void 0 ? void 0 : _product$consumerPric.priceInclVat) || 0) * (cartItem.quantity || 1);
+
+    // Get prices directly from product objects
+    const purchasePrice = (product === null || product === void 0 || (_product$locationPric = product.locationPrices) === null || _product$locationPric === void 0 ? void 0 : _product$locationPric.priceExclVat) || 0;
+    const salesPrice = (product === null || product === void 0 || (_product$consumerPric = product.consumerPrices) === null || _product$consumerPric === void 0 ? void 0 : _product$consumerPric.priceExclVat) || 0;
+    const salesPriceInclVat = (product === null || product === void 0 || (_product$consumerPric2 = product.consumerPrices) === null || _product$consumerPric2 === void 0 ? void 0 : _product$consumerPric2.priceInclVat) || 0;
+    const margin = salesPrice - purchasePrice;
+    const marginPercentage = purchasePrice ? margin / purchasePrice * 100 : 0;
+    return {
+      purchasePrice,
+      salesPrice,
+      salesPriceInclVat,
+      margin,
+      marginPercentage: Math.round(marginPercentage * 100) / 100
+    };
   };
 
-  // Calculate subtotal for products
-  const subtotalPriceProducts = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
+  // ===== MAIN PRODUCTS PRICING =====
+  /**
+   * Calculate sum of main products price (excluding montage) including VAT
+   */
+  const mainProductsInclVat = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
     if (mainProducts.find(product => product.articleNumber === item.articleNumber)) {
-      return acc + parseFloat(getItemPrice(item));
+      const {
+        salesPriceInclVat
+      } = getItemPrices(item);
+      return acc + salesPriceInclVat;
+    }
+    return acc;
+  }, 0)) || 0;
+
+  /**
+   * Calculate sum of main products price (excluding montage) excluding VAT
+   */
+  const mainProductsExclVat = mainProductsInclVat / 1.21;
+
+  /**
+   * Calculate sum of main products purchase price (excluding montage)
+   */
+  const mainProductsPurchase = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
+    if (mainProducts.find(product => product.articleNumber === item.articleNumber)) {
+      const {
+        purchasePrice
+      } = getItemPrices(item);
+      return acc + purchasePrice;
+    }
+    return acc;
+  }, 0)) || 0;
+
+  // ===== MONTAGE PRICING =====
+  /**
+   * Montage price including VAT
+   */
+  const montageInclVat = parseFloat(totals === null || totals === void 0 ? void 0 : totals.montagePricePlusMarketCorrectionInclVat) || 0;
+
+  /**
+   * Montage price excluding VAT
+   */
+  const montageExclVat = parseFloat(totals === null || totals === void 0 ? void 0 : totals.montagePricePlusMarketCorrectionExclVat) || 0;
+
+  // ===== ACCESSORIES PRICING =====
+  /**
+   * Calculate sum of accessories price including VAT
+   */
+  const accessoriesInclVat = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
+    if (accessoireProducts.find(product => product.articleNumber === item.articleNumber)) {
+      const {
+        salesPriceInclVat
+      } = getItemPrices(item);
+      const quantity = selectedExtras[item.articleNumber.toString()] || 1;
+      return acc + salesPriceInclVat * quantity;
     }
     return acc;
   }, 0)) || 0;
 
-  // Calculate subtotal for accessories
-  const subtotalPriceAccessoires = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
+  /**
+   * Calculate sum of accessories price excluding VAT
+   */
+  const accessoriesExclVat = accessoriesInclVat / 1.21;
+
+  /**
+   * Calculate sum of accessories purchase price
+   */
+  const accessoriesPurchase = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
     if (accessoireProducts.find(product => product.articleNumber === item.articleNumber)) {
-      return acc + parseFloat(getItemPrice(item));
+      const {
+        purchasePrice
+      } = getItemPrices(item);
+      const quantity = selectedExtras[item.articleNumber.toString()] || 1;
+      return acc + purchasePrice * quantity;
     }
     return acc;
   }, 0)) || 0;
 
-  // Calculate total discount
-  const calculateTotalDiscount = () => {
-    const totalPrice = subtotalPriceProducts + subtotalPriceAccessoires;
+  // ===== SUBTOTALS =====
+  /**
+   * Subtotal for main products + montage including VAT
+   */
+  const mainSubtotalInclVat = mainProductsInclVat + montageInclVat;
+
+  /**
+   * Subtotal for main products + montage excluding VAT
+   */
+  const mainSubtotalExclVat = mainProductsExclVat + montageExclVat;
+
+  // ===== TOTALS BEFORE DISCOUNT =====
+  /**
+   * Total purchase price (without montage)
+   */
+  const totalPurchase = mainProductsPurchase + accessoriesPurchase;
+
+  /**
+   * Total price excluding VAT
+   */
+  const totalExclVat = mainSubtotalExclVat + accessoriesExclVat;
+
+  /**
+   * Total price including VAT
+   */
+  const totalInclVat = mainSubtotalInclVat + accessoriesInclVat;
+
+  /**
+   * VAT amount
+   */
+  const totalVat = totalInclVat - totalExclVat;
+
+  // ===== DISCOUNT CALCULATIONS =====
+  /**
+   * Calculate discount amount
+   */
+  const getDiscountAmount = () => {
     if (discountPercentage) {
-      return totalPrice * discountPercentage / 100;
+      return totalInclVat * discountPercentage / 100;
     }
     if (discountAmount) {
       return discountAmount;
     }
     return 0;
   };
+  const discountTotal = getDiscountAmount();
+  const discountExclVat = discountTotal / 1.21;
+  const discountVat = discountTotal - discountExclVat;
 
-  // Calculate original total
-  const calculateOriginalTotal = () => {
-    return subtotalPriceProducts + subtotalPriceAccessoires;
-  };
+  // ===== TOTALS AFTER DISCOUNT =====
+  /**
+   * Final price excluding VAT (after discount)
+   */
+  const finalExclVat = Math.max(0, totalExclVat - discountExclVat);
 
-  // Calculate final totals
-  const calculateFinalTotals = () => {
-    const totalDiscount = calculateTotalDiscount();
-    const originalTotal = calculateOriginalTotal();
+  /**
+   * Final VAT amount (after discount)
+   */
+  const finalVat = Math.max(0, totalVat - discountVat);
 
-    // 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
+  /**
+   * Final price including VAT (after discount)
+   */
+  const finalInclVat = Math.max(0, totalInclVat - discountTotal);
 
-    return {
-      exclVat: Math.max(0, baseExclVat - discountExclVat),
-      vat: Math.max(0, baseVat - discountVat),
-      total: Math.max(0, originalTotal - totalDiscount),
-      originalTotal
-    };
-  };
+  /**
+   * Final purchase price after discount
+   */
+  const finalPurchase = Math.max(0, totalPurchase - discountExclVat * totalPurchase / totalExclVat);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)("col-lg mt-3")
   }, /*#__PURE__*/_react.default.createElement(_TogglableCard.default, {
@@ -225,30 +353,50 @@ const ProductCartSide = () => {
     heading: 'Trekhaakmontage'
   }, mainProducts.map(product => {
     var _product$images, _product$images2;
+    const cartItem = cart === null || cart === void 0 ? void 0 : cart.find(item => item.articleNumber === product.articleNumber);
+    const {
+      purchasePrice,
+      salesPriceInclVat
+    } = getItemPrices(cartItem);
     return /*#__PURE__*/_react.default.createElement(_ProductTableStaticRow.default, {
       key: product.articleNumber,
-      productTitle: product.name || product.subgroupName,
+      productTitle: product.name || product.title || 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)(getItemPrice(cart === null || cart === void 0 ? void 0 : cart.find(item => item.articleNumber === product.articleNumber)) || 0),
+        text: (0, _helpers__.formatPrice)(isToggled ? purchasePrice : salesPriceInclVat),
         className: 'cart__table-purchase-price text-end'
       }]
     });
+  }), /*#__PURE__*/_react.default.createElement(_ProductTableStaticRow.default, {
+    productTitle: "Montage",
+    productImage: _montagePlaceholder.default,
+    extraCells: [{}, {
+      text: isToggled ? montageExclVat > 0 ? (0, _helpers__.formatPrice)(montageExclVat) : 'N.v.t.' : (0, _helpers__.formatPrice)(montageInclVat),
+      className: 'cart__table-purchase-price text-end'
+    }]
   }), /*#__PURE__*/_react.default.createElement(_ProductTableSectionTotal.default, {
-    isEditable: false,
+    isEditable: true,
+    editLabel: 'Wijzig je trekhaakpakket',
+    editLink: '/configurator/trekhaakpakket',
     extraCells: [{}, {
       text: isToggled ? 'Subtotaal (excl. btw)' : 'Subtotaal (incl. btw)',
       className: 'fw-bold text-end pb-2'
     }, {
-      text: (0, _helpers__.formatPrice)(subtotalPriceProducts),
+      text: (0, _helpers__.formatPrice)(isToggled ? mainSubtotalExclVat : mainSubtotalInclVat),
       className: 'fw-bold text-end pb-2'
     }]
   })), accessoireProducts.length > 0 && /*#__PURE__*/_react.default.createElement(_ProductTableSection.default, {
     heading: 'Toebehoren'
   }, accessoireProducts.map(product => {
     var _product$images3, _product$images4;
+    const cartItem = cart === null || cart === void 0 ? void 0 : cart.find(item => item.articleNumber === product.articleNumber);
+    const {
+      purchasePrice,
+      salesPriceInclVat
+    } = getItemPrices(cartItem);
+    const quantity = selectedExtras[product.articleNumber] || 1;
     return /*#__PURE__*/_react.default.createElement(_ProductTableEditableRow.default, {
       key: product.articleNumber,
       productTitle: product.name,
@@ -256,7 +404,7 @@ const ProductCartSide = () => {
         imageId: (_product$images4 = product.images) === null || _product$images4 === void 0 ? void 0 : _product$images4[0]
       }) : _logoPrimary.default,
       extraCells: [{}, {
-        text: (0, _helpers__.formatPrice)(getItemPrice(cart === null || cart === void 0 ? void 0 : cart.find(item => item.articleNumber === product.articleNumber)) || 0),
+        text: (0, _helpers__.formatPrice)(isToggled ? purchasePrice * quantity : salesPriceInclVat * quantity),
         className: 'cart__table-purchase-price text-end'
       }],
       productAmount: selectedExtras[product.articleNumber],
@@ -285,41 +433,29 @@ const ProductCartSide = () => {
       text: isToggled ? 'Subtotaal (excl. btw)' : 'Subtotaal (incl. btw)',
       className: 'fw-bold text-end pb-2'
     }, {
-      text: (0, _helpers__.formatPrice)(subtotalPriceAccessoires),
+      text: (0, _helpers__.formatPrice)(isToggled ? accessoriesExclVat : accessoriesInclVat),
       className: 'fw-bold text-end pb-2'
     }]
   })), /*#__PURE__*/_react.default.createElement(_ProductTableTotal.default, {
-    rows: [...(isToggled ? [[{}, {
+    rows: [[{}, {
       text: 'Producten (excl. btw)',
       className: 'text-end pt-2'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      text: (0, _helpers__.formatPrice)(totalExclVat),
       className: 'text-end pt-2'
-    }], [{}, {
+    }], ...(isToggled ? [[{}, {
       text: 'btw',
       className: 'text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().vat),
+      text: (0, _helpers__.formatPrice)(totalVat),
       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: '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()),
+      text: (0, _helpers__.formatPrice)(totalInclVat),
       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')
@@ -328,25 +464,25 @@ const ProductCartSide = () => {
       text: discountPercentage ? "Correctie (".concat(discountPercentage, "%)") : 'Correctie',
       className: 'text-end text-success'
     }, {
-      text: "-".concat((0, _helpers__.formatPrice)(calculateTotalDiscount())),
+      text: "-".concat((0, _helpers__.formatPrice)(discountTotal)),
       className: 'text-end text-success'
-    }], ...(isToggled ? [[{}, {
+    }], [{}, {
       text: 'Totaal na correctie (excl. btw)',
       className: 'text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      text: (0, _helpers__.formatPrice)(finalExclVat),
       className: 'text-end'
-    }], [{}, {
-      text: 'Correctie btw',
+    }], ...(isToggled ? [[{}, {
+      text: 'btw',
       className: 'text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().vat),
+      text: (0, _helpers__.formatPrice)(finalVat),
       className: 'text-end'
     }]] : []), [{}, {
       text: 'Totaal na correctie (incl. btw)',
       className: 'fw-bold text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().total),
+      text: (0, _helpers__.formatPrice)(finalInclVat),
       className: 'fw-bold text-end'
     }]]
   }))))));