thm-p3-configurator 0.0.112 → 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'
     }]]
   }))))));

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

@@ -3,6 +3,7 @@
 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");
@@ -20,6 +21,7 @@ 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");
@@ -140,20 +142,49 @@ const ProductCartTable = () => {
   if (isLoadingProducts) {
     return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
   }
+
+  /**
+   * 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;
-    if (!cartItem) return {
-      purchasePrice: 0,
-      salesPrice: 0,
-      salesPriceInclVat: 0,
-      margin: 0
-    };
+    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);
-    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) || cartItem.consumerTotal / 1.21 || 0;
-    const salesPriceInclVat = salesPrice * 1.21;
+    if (!product) {
+      return {
+        purchasePrice: 0,
+        salesPrice: 0,
+        salesPriceInclVat: 0,
+        margin: 0,
+        marginPercentage: 0
+      };
+    }
+    let purchasePrice = 0;
+    let salesPrice = 0;
+    let salesPriceInclVat = 0;
+
+    // Get prices directly from product objects
+    if (APP_CONFIG.internal) {
+      var _product$locationPric, _product$consumerPric, _product$consumerPric2;
+      purchasePrice = (product === null || product === void 0 || (_product$locationPric = product.locationPrices) === null || _product$locationPric === void 0 ? void 0 : _product$locationPric.priceExclVat) || 0;
+      salesPrice = (product === null || product === void 0 || (_product$consumerPric = product.consumerPrices) === null || _product$consumerPric === void 0 ? void 0 : _product$consumerPric.priceExclVat) || 0;
+      salesPriceInclVat = (product === null || product === void 0 || (_product$consumerPric2 = product.consumerPrices) === null || _product$consumerPric2 === void 0 ? void 0 : _product$consumerPric2.priceInclVat) || 0;
+    } else {
+      purchasePrice = (product === null || product === void 0 ? void 0 : product.price) || 0;
+      salesPrice = (product === null || product === void 0 ? void 0 : product.price) || 0;
+      salesPriceInclVat = (product === null || product === void 0 ? void 0 : product.price) || 0;
+    }
     const margin = salesPrice - purchasePrice;
     const marginPercentage = purchasePrice ? margin / purchasePrice * 100 : 0;
     return {
@@ -165,68 +196,154 @@ const ProductCartTable = () => {
     };
   };
 
-  // Calculate subtotal for main products
-  let subtotalPriceProducts = 0;
-  if (isToggled) {
-    subtotalPriceProducts = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
-      if (mainProducts.find(product => product.articleNumber === item.articleNumber)) {
-        const {
-          salesPrice
-        } = getItemPrices(item);
-        return acc + salesPrice * 1.21;
-      }
-      return acc;
-    }, 0)) || 0;
-  } else {
-    subtotalPriceProducts = subtotalPriceProducts + (isToggled ? totals === null || totals === void 0 ? void 0 : totals.subtotalMontagePurchaseExclVat : (totals === null || totals === void 0 ? void 0 : totals.subtotalMontageExclVat) * 1.21);
-  }
+  // ===== 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)) {
+      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;
 
-  // Calculate subtotal for accessories
-  const subtotalPriceAccessoires = (cart === null || cart === void 0 ? void 0 : cart.reduce((acc, item) => {
+  // ===== 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 {
-        salesPrice
+        salesPriceInclVat
       } = getItemPrices(item);
-      return acc + salesPrice * 1.21;
+      const quantity = selectedExtras[item.articleNumber.toString()] || 1;
+      return acc + salesPriceInclVat * quantity;
     }
     return acc;
   }, 0)) || 0;
 
-  // Calculate total discount
-  const calculateTotalDiscount = () => {
-    const totalPrice = subtotalPriceProducts + subtotalPriceAccessoires;
+  /**
+   * 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)) {
+      const {
+        purchasePrice
+      } = getItemPrices(item);
+      const quantity = selectedExtras[item.articleNumber.toString()] || 1;
+      return acc + purchasePrice * quantity;
+    }
+    return acc;
+  }, 0)) || 0;
+
+  // ===== SUBTOTALS =====
+  /**
+   * Subtotal for main products + montage including VAT
+   */
+  const mainSubtotalInclVat = APP_CONFIG.internal ? mainProductsInclVat + montageInclVat : totals.totalAfterDiscountInclVat;
+
+  /**
+   * Subtotal for main products + montage excluding VAT
+   */
+  const mainSubtotalExclVat = APP_CONFIG.internal ? mainProductsExclVat + montageExclVat : totals.totalAfterDiscountExclVat;
+
+  // ===== TOTALS BEFORE DISCOUNT =====
+  /**
+   * Total purchase price (without montage)
+   */
+  const totalPurchase = mainProductsPurchase + accessoriesPurchase;
+
+  /**
+   * Total price excluding VAT
+   */
+
+  const totalExclVat = parseFloat(mainSubtotalExclVat) + accessoriesExclVat;
+
+  /**
+   * Total price including VAT
+   */
+
+  const totalInclVat = parseFloat(mainSubtotalInclVat) + accessoriesInclVat;
+
+  /**
+   * VAT amount
+   */
+  const totalVat = parseFloat(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)("content col-lg")
   }, /*#__PURE__*/_react.default.createElement(_TogglableCard.default, {
@@ -237,16 +354,19 @@ const ProductCartTable = () => {
   }, /*#__PURE__*/_react.default.createElement("table", {
     className: (0, _helpers__.withStyle)('cart__table table table-borderless align-middle')
   }, /*#__PURE__*/_react.default.createElement(_ProductTableHead.default, {
-    columns: [{}, {}, {}, ...(isToggled ? [{
+    columns: [{}, {}, {}, {}, ...(isToggled ? [{
+      text: 'Marge (excl. btw)',
+      className: 'fw-bold text-end'
+    }, {
       text: 'Inkoopprijs (excl. btw)',
       className: 'fw-bold text-end'
     }, {
-      text: 'Marge (excl. btw)',
+      text: 'Verkoop Prijs (excl. btw)',
       className: 'fw-bold text-end'
-    }] : [{}, {}]), {
-      text: isToggled ? 'Verkoop Prijs (excl. btw)' : 'Verkoop Prijs (incl. btw)',
+    }] : [{}, {}, {
+      text: 'Verkoop Prijs (incl. btw)',
       className: 'fw-bold text-end'
-    }]
+    }])]
   }), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement(_ProductTableSection.default, {
     heading: 'Trekhaakmontage'
   }, mainProducts.map(product => {
@@ -265,35 +385,62 @@ const ProductCartTable = () => {
       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: [{}, {}, ...(isToggled ? [{}, {}] : [{}, {}]), {
-        text: salesPrice !== 0 || salesPriceInclVat !== 0 ? (0, _helpers__.formatPrice)(isToggled ? salesPrice : salesPriceInclVat) : '',
+      extraCells: [{}, {}, {}, ...(isToggled ? [{
+        text: "".concat((0, _helpers__.formatPrice)(margin), " (").concat(marginPercentage, "%)"),
+        className: 'cart__table-price text-end'
+      }, {
+        text: (0, _helpers__.formatPrice)(purchasePrice),
         className: 'cart__table-price text-end'
-      }]
+      }, {
+        text: (0, _helpers__.formatPrice)(salesPrice),
+        className: 'cart__table-price text-end'
+      }] : [{}, {}, {
+        text: salesPriceInclVat > 0 ? (0, _helpers__.formatPrice)(salesPriceInclVat) : '',
+        className: 'cart__table-price text-end'
+      }])]
     });
   }), mainProducts && /*#__PURE__*/_react.default.createElement(_ProductTableStaticRow.default, {
-    productTitle: 'Montage',
+    productTitle: isToggled ? 'Montage + Marktcorrectie' : 'Montage',
     productImage: _montagePlaceholder.default,
-    extraCells: [{}, {}, ...(isToggled ? [{
-      text: (0, _helpers__.formatPrice)(purchasePrice),
+    extraCells: [{}, {}, {}, ...(isToggled ? [{
+      text: 'N.v.t.',
       className: 'cart__table-price text-end'
     }, {
-      text: "".concat((0, _helpers__.formatPrice)(margin), " (").concat(marginPercentage, "%)"),
+      text: 'N.v.t.',
       className: 'cart__table-price text-end'
-    }] : [{}, {}]), {
-      text: (0, _helpers__.formatPrice)(isToggled ? totals === null || totals === void 0 ? void 0 : totals.montagePricePlusMarketCorrectionExclVat : totals === null || totals === void 0 ? void 0 : totals.montagePricePlusMarketCorrectionInclVat),
+    }, {
+      text: (0, _helpers__.formatPrice)(montageExclVat),
+      className: 'cart__table-price text-end'
+    }] : [{}, {}, {
+      text: (0, _helpers__.formatPrice)(montageInclVat),
       className: 'cart__table-price text-end'
-    }]
+    }])]
   }), /*#__PURE__*/_react.default.createElement(_ProductTableSectionTotal.default, {
     isEditable: true,
     editLabel: 'Wijzig je trekhaakpakket',
     editLink: '/configurator/trekhaakpakket',
-    extraCells: [{}, {}, {}, {}, {
-      text: isToggled ? 'Subtotaal (excl. btw)' : 'Subtotaal (incl. btw)',
+    extraCells: [{}, {}, ...(isToggled ? [{
+      text: '',
+      className: 'fw-bold text-end'
+    }, {
+      text: '',
+      className: 'fw-bold text-end'
+    }, {
+      text: 'Subtotaal (excl. btw)',
+      className: 'fw-bold text-end pb-2'
+    }] : [{}, {}, {}, {
+      text: 'Subtotaal (incl. btw)',
+      className: 'fw-bold text-end pb-2'
+    }]), ...(isToggled ? [{
+      text: (0, _helpers__.formatPrice)(mainProductsPurchase),
       className: 'fw-bold text-end pb-2'
     }, {
-      text: (0, _helpers__.formatPrice)(isToggled ? subtotalPriceProducts / 1.21 : subtotalPriceProducts),
+      text: (0, _helpers__.formatPrice)(mainSubtotalExclVat),
       className: 'fw-bold text-end pb-2'
-    }]
+    }] : [{
+      text: (0, _helpers__.formatPrice)(mainSubtotalInclVat),
+      className: 'fw-bold text-end pb-2'
+    }])]
   })), accessoireProducts.length > 0 && /*#__PURE__*/_react.default.createElement(_ProductTableSection.default, {
     heading: 'Toebehoren'
   }, accessoireProducts.map(product => {
@@ -312,16 +459,19 @@ const ProductCartTable = () => {
       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: [{}, {}, ...(isToggled ? [{
+      extraCells: [{}, {}, {}, ...(isToggled ? [{
+        text: "".concat((0, _helpers__.formatPrice)(margin), " (").concat(marginPercentage, "%)"),
+        className: 'cart__table-price text-end'
+      }, {
         text: (0, _helpers__.formatPrice)(purchasePrice),
         className: 'cart__table-price text-end'
       }, {
-        text: "".concat((0, _helpers__.formatPrice)(margin), " (").concat(marginPercentage, "%)"),
+        text: (0, _helpers__.formatPrice)(salesPrice),
         className: 'cart__table-price text-end'
-      }] : [{}, {}]), {
-        text: (0, _helpers__.formatPrice)(isToggled ? salesPrice : salesPriceInclVat),
+      }] : [{}, {}, {
+        text: (0, _helpers__.formatPrice)(salesPriceInclVat),
         className: 'cart__table-price text-end'
-      }],
+      }])],
       productAmount: selectedExtras[product.articleNumber],
       onEdit: value => {
         if (value > 0) {
@@ -343,78 +493,132 @@ const ProductCartTable = () => {
     });
   }), /*#__PURE__*/_react.default.createElement(_ProductTableSectionTotal.default, {
     isEditable: false,
-    extraCells: [{}, {}, {}, {}, {
-      text: isToggled ? 'Subtotaal (excl. btw)' : 'Subtotaal (incl. btw)',
+    extraCells: [{}, {}, ...(isToggled ? [{
+      text: '',
+      className: 'fw-bold text-end'
+    }, {
+      text: '',
+      className: 'fw-bold text-end'
+    }, {
+      text: 'Subtotaal (excl. btw)',
+      className: 'fw-bold text-end pb-2'
+    }] : [{}, {}, {}, {
+      text: 'Subtotaal (incl. btw)',
+      className: 'fw-bold text-end pb-2'
+    }]), ...(isToggled ? [{
+      text: (0, _helpers__.formatPrice)(accessoriesPurchase),
       className: 'fw-bold text-end pb-2'
     }, {
-      text: (0, _helpers__.formatPrice)(isToggled ? subtotalPriceAccessoires / 1.21 : subtotalPriceAccessoires),
+      text: (0, _helpers__.formatPrice)(accessoriesExclVat),
+      className: 'fw-bold text-end pb-2'
+    }] : [{
+      text: (0, _helpers__.formatPrice)(accessoriesInclVat),
       className: 'fw-bold text-end pb-2'
-    }]
+    }])]
   })), /*#__PURE__*/_react.default.createElement(_ProductTableTotal.default, {
-    rows: [...(isToggled ? [[{}, {}, {}, {}, {
-      text: 'Producten (excl. btw)',
+    rows: [[{}, {}, {}, ...(isToggled ? [{
+      text: '',
       className: 'text-end pt-2'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      text: 'Producten (excl. btw)',
       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: 'text-end pt-2'
+    }]), ...(isToggled ? [{
+      text: (0, _helpers__.formatPrice)(totalPurchase),
+      className: 'text-end pt-2'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      text: (0, _helpers__.formatPrice)(totalExclVat),
+      className: 'text-end pt-2'
+    }] : [{
+      text: (0, _helpers__.formatPrice)(totalExclVat),
       className: 'text-end pt-2'
-    }], [{}, {}, {}, {}, {
+    }])], [{}, {}, {}, ...(isToggled ? [{
+      text: '',
+      className: 'text-end'
+    }, {
       text: 'btw',
       className: 'text-end'
+    }] : [{}, {}, {
+      text: 'btw',
+      className: 'text-end'
+    }]), ...(isToggled ? [{
+      text: (0, _helpers__.formatPrice)(totalVat / 1.21),
+      className: 'text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().vat),
+      text: (0, _helpers__.formatPrice)(totalVat),
       className: 'text-end'
-    }], [{}, {}, {}, {}, {
+    }] : [{
+      text: (0, _helpers__.formatPrice)(totalVat),
+      className: 'text-end'
+    }])], [{}, {}, {}, ...(isToggled ? [{
+      text: '',
+      className: 'fw-bold text-end'
+    }, {
+      text: 'Totaal (incl. btw)',
+      className: 'fw-bold text-end'
+    }] : [{}, {}, {
       text: 'Totaal (incl. btw)',
       className: 'fw-bold text-end'
+    }]), ...(isToggled ? [{
+      text: (0, _helpers__.formatPrice)(totalPurchase + totalVat / 1.21),
+      className: 'fw-bold text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateOriginalTotal()),
+      text: (0, _helpers__.formatPrice)(totalInclVat),
       className: 'fw-bold text-end'
-    }]])].filter(Boolean)
+    }] : [{
+      text: (0, _helpers__.formatPrice)(totalInclVat),
+      className: 'fw-bold text-end'
+    }])]].filter(Boolean)
   }), (discountAmount || discountPercentage) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
     colSpan: "10",
     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',
+    rows: [[{}, {}, {}, ...(isToggled ? [{
+      text: '',
       className: 'text-end text-success'
     }, {
-      text: "-".concat((0, _helpers__.formatPrice)(calculateTotalDiscount())),
+      text: '',
       className: 'text-end text-success'
-    }], [{}, {}, {}, {}, {
-      text: 'Totaal na correctie (excl. btw)',
-      className: 'text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().exclVat),
+      text: discountPercentage ? "Correctie (".concat(discountPercentage, "%)") : 'Correctie',
+      className: 'text-end text-success'
+    }] : [{}, {}, {
+      text: discountPercentage ? "Correctie (".concat(discountPercentage, "%)") : 'Correctie',
+      className: 'text-end text-success'
+    }]), {
+      text: "-".concat((0, _helpers__.formatPrice)(discountTotal)),
+      className: 'text-end text-success'
+    }], [{}, {}, {}, ...(isToggled ? [{
+      text: '',
       className: 'text-end'
-    }], [{}, {}, {}, {}, {
-      text: 'Correctie btw',
+    }, {
+      text: '',
       className: 'text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().vat),
+      text: 'Totaal na correctie (excl. btw)',
       className: 'text-end'
-    }], [{}, {}, {}, {}, {
-      text: 'Totaal na correctie (incl. btw)',
+    }] : [{}, {}, {
+      text: 'Totaal na correctie (excl. btw)',
+      className: 'text-end'
+    }]), {
+      text: (0, _helpers__.formatPrice)(finalExclVat),
+      className: 'text-end'
+    }], [{}, {}, {}, ...(isToggled ? [{
+      text: '',
+      className: 'fw-bold text-end'
+    }, {
+      text: '',
       className: 'fw-bold text-end'
     }, {
-      text: (0, _helpers__.formatPrice)(calculateFinalTotals().total),
+      text: 'Totaal na correctie (incl. btw)',
+      className: 'fw-bold text-end'
+    }] : [{}, {}, {
+      text: 'Totaal na correctie (incl. btw)',
+      className: 'fw-bold text-end'
+    }]), {
+      text: (0, _helpers__.formatPrice)(finalInclVat),
       className: 'fw-bold text-end'
     }]]
   })))), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalDiscountForm.default, null)));

package/dist/src/shared/__containers__/internal/InternalAppointmentForm.js

@@ -126,7 +126,7 @@ const licensePlateValidator = new _LicensePlateValidator.default();
 const internalAppointmentFormSchema = (0, _yup.object)({
   ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   leaseNumber: (0, _yup.string)().nullable(),
-  firstName: (0, _yup.string)().nullable(),
+  firstName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   channelType: (0, _yup.string)().when('$existingDossierId', {
     is: existingDossierId => !!existingDossierId,
     then: schema => schema.nullable(),
@@ -142,7 +142,7 @@ const internalAppointmentFormSchema = (0, _yup.object)({
   email: (0, _yup.string)().email(_constants__.FORM_ERROR_MESSAGES.email).required(_constants__.FORM_ERROR_MESSAGES.required),
   phoneNumber: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   zipCode: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
-  houseNumber: (0, _yup.string)().nullable(),
+  houseNumber: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   houseNumberAddition: (0, _yup.string)().nullable(),
   streetName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   city: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
@@ -205,11 +205,6 @@ const InternalAppointmentForm = _ref => {
     countries,
     isLoadingCountries
   } = (0, _queries.useCountriesQuery)();
-  const branchType = 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;
-  const {
-    marketingChannels,
-    isLoadingMarketingChannels
-  } = (0, _queries.useMarketingChannels)(branchType);
   const countryOptions = (0, _react.useMemo)(() => {
     var _countries$results;
     if (!(countries !== null && countries !== void 0 && (_countries$results = countries.results) !== null && _countries$results !== void 0 && _countries$results.length)) return [];
@@ -218,6 +213,11 @@ const InternalAppointmentForm = _ref => {
       value: country.entityId
     }));
   }, [countries]);
+  const branchType = 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;
+  const {
+    marketingChannels,
+    isLoadingMarketingChannels
+  } = (0, _queries.useMarketingChannels)(branchType);
   const initialCountry = (0, _react.useMemo)(() => {
     if (!(countryOptions !== null && countryOptions !== void 0 && countryOptions.length)) return null;
 
@@ -391,9 +391,9 @@ const InternalAppointmentForm = _ref => {
    */
   const handleAutofillButtonClicked = () => {
     dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_LAST_NAME,
+      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
       payload: {
-        lastName: branchById === null || branchById === void 0 ? void 0 : branchById.name
+        companyName: branchById === null || branchById === void 0 ? void 0 : branchById.name
       }
     });
     dispatch({
@@ -602,7 +602,8 @@ const InternalAppointmentForm = _ref => {
         firstName: value
       }
     }),
-    isRequired: false,
+    key: "firstName",
+    isRequired: true,
     form: "appointment",
     label: "Voornaam:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['firstName']
@@ -616,6 +617,7 @@ const InternalAppointmentForm = _ref => {
         infix: value
       }
     }),
+    key: "infix",
     isRequired: false,
     form: "appointment",
     label: "Tussenvoegsel:",
@@ -630,6 +632,7 @@ const InternalAppointmentForm = _ref => {
         lastName: value
       }
     }),
+    key: "lastName",
     isRequired: true,
     form: "appointment",
     label: "Achternaam:",
@@ -644,6 +647,7 @@ const InternalAppointmentForm = _ref => {
         email: value
       }
     }),
+    key: "email",
     isRequired: true,
     form: "appointment",
     label: "E-mailadres:",
@@ -662,6 +666,7 @@ const InternalAppointmentForm = _ref => {
         companyName: value
       }
     }),
+    key: "companyName",
     isRequired: true,
     form: "quotation",
     label: "Bedrijfsnaam:",
@@ -676,6 +681,7 @@ const InternalAppointmentForm = _ref => {
         kvkNumber: value
       }
     }),
+    key: "kvkNumber",
     isRequired: false,
     form: "quotation",
     label: "KVK-nummer:",
@@ -690,6 +696,7 @@ const InternalAppointmentForm = _ref => {
         vatNumber: value
       }
     }),
+    key: "vatNumber",
     isRequired: false,
     form: "quotation",
     label: "BTW-nummer:",
@@ -704,6 +711,7 @@ const InternalAppointmentForm = _ref => {
         zipCode: value
       }
     }),
+    key: "zipCode",
     isRequired: true,
     label: "Postcode:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['zipCode']
@@ -717,6 +725,7 @@ const InternalAppointmentForm = _ref => {
         houseNumber: value
       }
     }),
+    key: "houseNumber",
     isRequired: true,
     label: "Huisnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumber']
@@ -730,6 +739,7 @@ const InternalAppointmentForm = _ref => {
         houseNumberAddition: value
       }
     }),
+    key: "houseNumberAddition",
     isRequired: false,
     label: "Huisnummer toevoeging:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumberAddition']
@@ -743,6 +753,7 @@ const InternalAppointmentForm = _ref => {
         streetName: value
       }
     }),
+    key: "streetName",
     isRequired: true,
     label: "Straat:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['streetName']
@@ -756,6 +767,7 @@ const InternalAppointmentForm = _ref => {
         city: value
       }
     }),
+    key: "city",
     isRequired: true,
     label: "Stad:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
@@ -769,6 +781,7 @@ const InternalAppointmentForm = _ref => {
         phoneNumber: value
       }
     }),
+    key: "phoneNumber",
     isRequired: true,
     label: "Telefoonnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['phoneNumber']
@@ -782,6 +795,7 @@ const InternalAppointmentForm = _ref => {
         zipCode: value
       }
     }),
+    key: "zipCode",
     isRequired: true,
     label: "Postcode:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['zipCode']
@@ -795,7 +809,8 @@ const InternalAppointmentForm = _ref => {
         houseNumber: value
       }
     }),
-    isRequired: false,
+    key: "houseNumber",
+    isRequired: true,
     label: "Huisnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumber']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
@@ -808,6 +823,7 @@ const InternalAppointmentForm = _ref => {
         streetName: value
       }
     }),
+    key: "streetName",
     isRequired: true,
     label: "Straat:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['streetName']
@@ -821,6 +837,7 @@ const InternalAppointmentForm = _ref => {
         city: value
       }
     }),
+    key: "city",
     isRequired: true,
     label: "Stad:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
@@ -844,7 +861,8 @@ const InternalAppointmentForm = _ref => {
           countryId: value
         }
       });
-    }
+    },
+    key: "country"
   })))))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 mb-4')
   }, /*#__PURE__*/_react.default.createElement(_CardWide.default, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -854,6 +872,7 @@ const InternalAppointmentForm = _ref => {
   }, "Gegevens van de auto ", /*#__PURE__*/_react.default.createElement("br", null)), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12')
   }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    key: "leaseNumber",
     placeholder: "",
     initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumber,
     name: "leaseNumber",
@@ -869,6 +888,7 @@ const InternalAppointmentForm = _ref => {
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['leaseNumber'],
     isDisabled: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumberUnknown
   }), /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    key: "leaseNumberUnknown",
     name: "leaseNumberUnknown",
     initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumberUnknown,
     onChange: val => {
@@ -882,6 +902,7 @@ const InternalAppointmentForm = _ref => {
     label: "Goedkeuringsnummer onbekend",
     isDisabled: !!(vehicle !== null && vehicle !== void 0 && vehicle.leaseNumber)
   })), !licensePlate && /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    key: "licensePlate",
     placeholder: "",
     initialValue: _licensePlate,
     name: "licensePlate",
@@ -891,6 +912,7 @@ const InternalAppointmentForm = _ref => {
     label: "Kenteken:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['licensePlate']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    key: "chassisNumber",
     placeholder: "",
     initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.chassisNumber,
     name: "chassisNumber",

package/dist/src/shared/__containers__/internal/InternalQuotationForm.js

@@ -144,7 +144,7 @@ const internalQuotationFormSchema = (0, _yup.object)({
   city: (0, _yup.string)().nullable(),
   companyName: (0, _yup.string)().when('ownershipType', {
     is: _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk,
-    then: schema => schema.required(_constants__.FORM_ERROR_MESSAGES.required),
+    then: schema => schema.nullable(),
     otherwise: schema => schema.nullable()
   }),
   kvkNumber: (0, _yup.string)().nullable(),
@@ -570,7 +570,7 @@ const InternalQuotationForm = _ref => {
         companyName: value
       }
     }),
-    isRequired: true,
+    isRequired: false,
     form: "quotation",
     label: "Bedrijfsnaam:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName']
@@ -612,7 +612,7 @@ const InternalQuotationForm = _ref => {
         zipCode: value
       }
     }),
-    isRequired: true,
+    isRequired: false,
     form: "quotation",
     label: "Postcode:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['zipCode']
@@ -626,7 +626,7 @@ const InternalQuotationForm = _ref => {
         houseNumber: value
       }
     }),
-    isRequired: true,
+    isRequired: false,
     form: "quotation",
     label: "Huisnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumber']
@@ -654,7 +654,7 @@ const InternalQuotationForm = _ref => {
         streetName: value
       }
     }),
-    isRequired: true,
+    isRequired: false,
     form: "quotation",
     label: "Straat:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['streetName']
@@ -668,7 +668,7 @@ const InternalQuotationForm = _ref => {
         city: value
       }
     }),
-    isRequired: true,
+    isRequired: false,
     form: "quotation",
     label: "Stad:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']

package/dist/src/shared/__style__/components/sidebar/_sidebar.scss

@@ -31,6 +31,10 @@ Sidebar
       width: 100%;
     }
   }
+
+  table {
+    table-layout: fixed;
+  }
 }
 
 @include media-breakpoint-only(xs) {

package/package.json

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