thm-p3-configurator 0.0.367 → 0.0.369

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

@@ -59,24 +59,26 @@ const NavigationSteps = _ref => {
     selectedBranch
   }] = (0, _OrderSessionContext.useOrderSession)();
   const handleClick = _ref2 => {
+    var _steps$stepNumber;
     let {
       to,
       title,
-      stepNumber
+      stepNumber: targetStepNumber
     } = _ref2;
-    setStepNumber(stepNumber);
+    const currentStepTitle = ((_steps$stepNumber = steps[stepNumber]) === null || _steps$stepNumber === void 0 ? void 0 : _steps$stepNumber.title) || title;
     (0, _Datalayer.pushToDataLayer)({
       event: 'configurator',
-      component: title,
+      component: currentStepTitle,
       element: 'progress_bar',
       action: 'click',
-      action_value: "".concat(stepNumber + 1, ". ").concat(title),
+      action_value: title,
       link_url: to
     });
+    setStepNumber(targetStepNumber);
     onClick({
       to,
       title,
-      stepNumber
+      stepNumber: targetStepNumber
     });
   };
   const currentType = currentDossierType || existingDossierType || _constants__.DOSSIER_TYPES.PlannedAppointment;

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

@@ -1,9 +1,15 @@
 "use strict";
 
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,6 +20,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _queries = require("../../__api__/queries");
 var _constants__ = require("../../__constants__");
 var _helpers__ = require("../../__helpers__");
+var _singleOrderArticles = require("../../__helpers__/singleOrderArticles");
 var _ProductCardCheckbox = _interopRequireDefault(require("./ProductCardCheckbox"));
 var _ProductCardDescription = _interopRequireDefault(require("./ProductCardDescription"));
 var _ProductCardDiscountAlert = _interopRequireDefault(require("./ProductCardDiscountAlert"));
@@ -52,8 +59,51 @@ function _interopRequireWildcard(e, r) {
   }
   return n.default = e, t && t.set(e, n), n;
 }
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 const ProductCard = _ref => {
-  var _stock$quantity, _stock$quantity2;
+  var _normalizedStock$quan, _normalizedStock$quan2;
   let {
     hasCheckbox = true,
     isRecommended = false,
@@ -82,6 +132,9 @@ const ProductCard = _ref => {
   const {
     productFieldLabels
   } = (0, _queries.useProductFieldLabels)();
+  const normalizedStock = stock && stock.status ? _objectSpread(_objectSpread({}, stock), {}, {
+    status: (0, _singleOrderArticles.mapApiStockStatusToStockStatus)(stock.status)
+  }) : stock;
   const handleSelected = isSelected => {
     if (!canUnselect && !isSelected) {
       // Do not update local state, only call onSelect
@@ -159,13 +212,13 @@ const ProductCard = _ref => {
     className: (0, _helpers__.withStyle)('card-footer pt-2 col-12 col-md-8 col-xxl-6 pb-0 justify-content-end')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-flex flex-column align-items-end')
-  }, showPrice && stock && /*#__PURE__*/_react.default.createElement("div", null, (stock === null || stock === void 0 ? void 0 : stock.status) === _constants__.StockStatus.OutOfStock ? /*#__PURE__*/_react.default.createElement("div", {
+  }, showPrice && normalizedStock && /*#__PURE__*/_react.default.createElement("div", null, normalizedStock.status === _constants__.StockStatus.OutOfStock ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-danger mb-1')
-  }, "Niet op voorraad") : stock === _constants__.StockStatus.InsufficientStock ? /*#__PURE__*/_react.default.createElement("div", {
+  }, "Niet op voorraad") : normalizedStock.status === _constants__.StockStatus.InsufficientStock ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-warning mb-1')
-  }, isTmg ? "".concat((_stock$quantity = stock === null || stock === void 0 ? void 0 : stock.quantity) !== null && _stock$quantity !== void 0 ? _stock$quantity : 0, " op voorraad") : 'Weinig op voorraad') : /*#__PURE__*/_react.default.createElement("div", {
+  }, isTmg ? "".concat((_normalizedStock$quan = normalizedStock.quantity) !== null && _normalizedStock$quan !== void 0 ? _normalizedStock$quan : 0, " op voorraad") : 'Weinig op voorraad') : /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-success mb-1')
-  }, isTmg ? "".concat((_stock$quantity2 = stock === null || stock === void 0 ? void 0 : stock.quantity) !== null && _stock$quantity2 !== void 0 ? _stock$quantity2 : 0, " op voorraad") : 'Op voorraad')), hasCheckbox && /*#__PURE__*/_react.default.createElement(_ProductCardCheckbox.default, {
+  }, isTmg ? "".concat((_normalizedStock$quan2 = normalizedStock.quantity) !== null && _normalizedStock$quan2 !== void 0 ? _normalizedStock$quan2 : 0, " op voorraad") : 'Op voorraad')), hasCheckbox && /*#__PURE__*/_react.default.createElement(_ProductCardCheckbox.default, {
     id: productId,
     isDisabled: isDisabled,
     defaultChecked: isSelected,

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

@@ -1,19 +1,23 @@
 "use strict";
 
 require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.trim.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.every.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.trim.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.every.js");
 require("core-js/modules/esnext.iterator.filter.js");
@@ -60,6 +64,49 @@ function _interopRequireWildcard(e, r) {
   }
   return n.default = e, t && t.set(e, n), n;
 }
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 const ProductImage = _ref => {
   let {
     productImage
@@ -87,7 +134,8 @@ const ProductActions = _ref2 => {
     showPartStockLevel,
     setShowPartStockLevel,
     productPriceInclVat,
-    isWebshop = false
+    isWebshop = false,
+    isLoadingPartStockLevel = false
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-flex justify-content-end')
@@ -102,11 +150,12 @@ const ProductActions = _ref2 => {
   }, isTmg ? "".concat(stockQuantity, " op voorraad") : 'Op voorraad')), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-flex align-items-center')
   }, !isWebshop && /*#__PURE__*/_react.default.createElement(_OutlinedButton.default, {
+    className: showPartStockLevel ? 'active' : '',
     style: {
       marginRight: '1rem'
     },
     onClick: () => setShowPartStockLevel(!showPartStockLevel),
-    label: "Voorkeurs voorraad"
+    label: isLoadingPartStockLevel ? 'Voorkeurs voorraad laden...' : showPartStockLevel ? 'Verberg voorkeurs voorraad' : 'Voorkeurs voorraad'
   }), /*#__PURE__*/_react.default.createElement(_NumericInput.default, {
     className: (0, _helpers__.withStyle)('me-2 rounded'),
     width: "100px",
@@ -129,6 +178,7 @@ const ProductCategories = _ref3 => {
     preferredPart = null,
     partStockLevels = null,
     showPartStockLevel = false,
+    isLoadingPartStockLevel = false,
     brandName = null,
     isWebshop = false
   } = _ref3;
@@ -140,7 +190,11 @@ const ProductCategories = _ref3 => {
     className: (0, _helpers__.withStyle)('fst-italic mb-0')
   }, /*#__PURE__*/_react.default.createElement("strong", null, "Groep:"), " ", productSubgroup), preferredPart && /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _helpers__.withStyle)('fst-italic mb-0')
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Voorkeur:"), " ", preferredPart.preferredPart), !isWebshop && showPartStockLevel && (partStockLevels === null || partStockLevels === void 0 ? void 0 : partStockLevels.status) && /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Voorkeur:"), " ", preferredPart.preferredPart), !isWebshop && showPartStockLevel && isLoadingPartStockLevel && /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('fst-italic mb-0')
+  }, /*#__PURE__*/_react.default.createElement("small", null, "Voorkeurs voorraad laden...")), !isWebshop && showPartStockLevel && !isLoadingPartStockLevel && !(partStockLevels !== null && partStockLevels !== void 0 && partStockLevels.status) && /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('fst-italic mb-0')
+  }, /*#__PURE__*/_react.default.createElement("small", null, "Geen voorkeurs voorraad gevonden")), !isWebshop && showPartStockLevel && !isLoadingPartStockLevel && (partStockLevels === null || partStockLevels === void 0 ? void 0 : partStockLevels.status) && /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _helpers__.withStyle)('fst-italic mb-0')
   }, /*#__PURE__*/_react.default.createElement("small", {
     className: (0, _helpers__.withStyle)(partStockLevels.status === _constants__.StockStatus.OutOfStock ? 'text-danger' : partStockLevels.status === _constants__.StockStatus.InsufficientStock ? 'text-warning' : 'text-success')
@@ -177,18 +231,45 @@ const SingleOrderProductCard = _ref4 => {
     productFieldLabels
   } = (0, _queries.useProductFieldLabels)();
   const [preferredPart, setPreferredPart] = (0, _react.useState)(null);
-  const [partStockLevels, setPartStockLevels] = (0, _react.useState)([]);
+  const [partStockLevels, setPartStockLevels] = (0, _react.useState)(null);
   const [showPartStockLevel, setShowPartStockLevel] = (0, _react.useState)(false);
+  const [isLoadingPartStockLevel, setIsLoadingPartStockLevel] = (0, _react.useState)(false);
+  const findPreferredPart = () => {
+    var _parts$find;
+    return (_parts$find = parts.find(part => part.isPreferred === true)) !== null && _parts$find !== void 0 ? _parts$find : parts.length === 1 ? parts[0] : null;
+  };
+  const getPreferredPartDisplayArticleNumber = part => {
+    var _part$preferredPart$s;
+    return typeof (part === null || part === void 0 ? void 0 : part.preferredPart) === 'string' ? (_part$preferredPart$s = part.preferredPart.split('|')[0]) === null || _part$preferredPart$s === void 0 ? void 0 : _part$preferredPart$s.trim() : null;
+  };
+  const getPreferredPartNumber = part => {
+    var _ref5, _ref6, _ref7, _part$articleNumber;
+    return (_ref5 = (_ref6 = (_ref7 = (_part$articleNumber = part === null || part === void 0 ? void 0 : part.articleNumber) !== null && _part$articleNumber !== void 0 ? _part$articleNumber : part === null || part === void 0 ? void 0 : part.partArticleNumber) !== null && _ref7 !== void 0 ? _ref7 : part === null || part === void 0 ? void 0 : part.preferredPartNumber) !== null && _ref6 !== void 0 ? _ref6 : part === null || part === void 0 ? void 0 : part.partNumber) !== null && _ref5 !== void 0 ? _ref5 : getPreferredPartDisplayArticleNumber(part);
+  };
+  const getPreferredPartBrandNumber = part => {
+    var _ref8, _ref9, _ref10, _ref11, _part$articleBrandNum;
+    return (_ref8 = (_ref9 = (_ref10 = (_ref11 = (_part$articleBrandNum = part === null || part === void 0 ? void 0 : part.articleBrandNumber) !== null && _part$articleBrandNum !== void 0 ? _part$articleBrandNum : part === null || part === void 0 ? void 0 : part.partArticleBrandNumber) !== null && _ref11 !== void 0 ? _ref11 : part === null || part === void 0 ? void 0 : part.preferredPartBrandNumber) !== null && _ref10 !== void 0 ? _ref10 : part === null || part === void 0 ? void 0 : part.partBrandNumber) !== null && _ref9 !== void 0 ? _ref9 : part === null || part === void 0 ? void 0 : part.brandNumber) !== null && _ref8 !== void 0 ? _ref8 : part === null || part === void 0 ? void 0 : part.partBrandId;
+  };
   (0, _react.useEffect)(() => {
     if (showPartStockLevel) {
       const fetchStockLevels = async () => {
-        const preferredPart = parts.find(part => part.isPreferred === true);
-        if (preferredPart) {
-          const partStockLevel = await (0, _singleOrderArticles.fetchPartStockLevels)({
-            partNumber: preferredPart.partNumber,
-            brandNumber: preferredPart.partBrandId
-          }, branchId, !isTmg ? formula : null);
-          setPartStockLevels(partStockLevel);
+        const preferredPart = findPreferredPart();
+        const preferredPartNumber = getPreferredPartNumber(preferredPart);
+        const preferredBrandNumber = getPreferredPartBrandNumber(preferredPart);
+        if (preferredPartNumber) {
+          setIsLoadingPartStockLevel(true);
+          try {
+            const partStockLevel = await (0, _singleOrderArticles.fetchPartStockLevels)(_objectSpread({
+              partNumber: preferredPartNumber
+            }, preferredBrandNumber ? {
+              brandNumber: preferredBrandNumber
+            } : {}), branchId, !isTmg ? formula : null);
+            setPartStockLevels(partStockLevel);
+          } catch (_unused) {
+            setPartStockLevels(null);
+          } finally {
+            setIsLoadingPartStockLevel(false);
+          }
         }
       };
       fetchStockLevels();
@@ -196,23 +277,23 @@ const SingleOrderProductCard = _ref4 => {
   }, [showPartStockLevel, parts, branchId, isTmg, formula]);
   (0, _react.useEffect)(() => {
     if (parts && parts.length > 0) {
-      const preferred = parts.find(part => part.isPreferred === true);
+      const preferred = findPreferredPart();
       if (preferred) {
         setPreferredPart(preferred);
       }
     }
   }, [parts]);
-  const filteredProductSpecifications = productSpecifications.filter(_ref5 => {
+  const filteredProductSpecifications = productSpecifications.filter(_ref12 => {
     let {
       key,
       value
-    } = _ref5;
+    } = _ref12;
     return (productFieldLabels === null || productFieldLabels === void 0 ? void 0 : productFieldLabels[key]) && (value !== 'kg' || key !== 'weight');
-  }).map(_ref6 => {
+  }).map(_ref13 => {
     let {
       key,
       value
-    } = _ref6;
+    } = _ref13;
     return {
       key: productFieldLabels[key],
       value
@@ -242,6 +323,7 @@ const SingleOrderProductCard = _ref4 => {
     preferredPart: preferredPart,
     partStockLevels: partStockLevels,
     showPartStockLevel: showPartStockLevel,
+    isLoadingPartStockLevel: isLoadingPartStockLevel,
     isWebshop: isWebshop
   }), (filteredProductSpecifications === null || filteredProductSpecifications === void 0 ? void 0 : filteredProductSpecifications.length) > 0 && /*#__PURE__*/_react.default.createElement(_ProductCardSpecifications.default, {
     specifications: filteredProductSpecifications,
@@ -263,7 +345,8 @@ const SingleOrderProductCard = _ref4 => {
     removeFromCart: removeFromCart,
     productPrice: productPrice,
     productPriceInclVat: productPriceInclVat,
-    isWebshop: isWebshop
+    isWebshop: isWebshop,
+    isLoadingPartStockLevel: isLoadingPartStockLevel
   })))));
 };
 var _default = exports.default = SingleOrderProductCard;

package/dist/src/shared/__components__/internal/InternalCustomerDetailsForm.js

@@ -2,6 +2,7 @@
 
 require("core-js/modules/es.array.reduce.js");
 require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.trim.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");
@@ -18,6 +19,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/es.array.reduce.js");
 require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.trim.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -159,7 +161,7 @@ const customerDetailsFormSchema = (0, _yup.object)({
   })
 });
 const InternalCustomerDetailsForm = (_ref, ref) => {
-  var _branchTypes$byId$aut, _authSession$branch;
+  var _customer$vatNumber, _customer$kvkNumber, _branchTypes$byId$aut, _authSession$branch;
   let {
     errors = {},
     onValidationError,
@@ -249,6 +251,21 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
 
   // Get customer data for the active ownership type
   const customer = customerDataPerType[activeOwnershipType] || (0, _helpers__.getEmptySingleOrderCustomer)();
+  const selectedCountry = (0, _react.useMemo)(() => {
+    if (!(countryOptions !== null && countryOptions !== void 0 && countryOptions.length)) return null;
+    if (customer !== null && customer !== void 0 && customer.countryId) {
+      return countryOptions.find(option => option.value === customer.countryId) || null;
+    }
+    const defaultCountry = countryOptions.find(option => option.label === 'NEDERLAND');
+    return defaultCountry || null;
+  }, [customer === null || customer === void 0 ? void 0 : customer.countryId, countryOptions]);
+  const isBusinessOwnership = activeOwnershipType === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Zakelijk;
+  const isNetherlandsSelected = (0, _react.useMemo)(() => {
+    if (!(selectedCountry !== null && selectedCountry !== void 0 && selectedCountry.label)) return false;
+    return selectedCountry.label.toUpperCase() === 'NEDERLAND';
+  }, [selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.label]);
+  const shouldRequireKvkNumber = isBusinessOwnership && (isNetherlandsSelected || !(customer !== null && customer !== void 0 && (_customer$vatNumber = customer.vatNumber) !== null && _customer$vatNumber !== void 0 && _customer$vatNumber.trim()));
+  const shouldRequireVatNumber = isBusinessOwnership && !isNetherlandsSelected && !(customer !== null && customer !== void 0 && (_customer$kvkNumber = customer.kvkNumber) !== null && _customer$kvkNumber !== void 0 && _customer$kvkNumber.trim());
 
   // Helper to update customer data for the active ownership type
   const updateCustomerField = (0, _react.useCallback)((field, value) => {
@@ -491,6 +508,24 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
   }, [addressLookupTimeoutId]);
   const validateForm = async () => {
     try {
+      var _customer$kvkNumber2, _customer$vatNumber2;
+      const hasKvkNumber = !!(customer !== null && customer !== void 0 && (_customer$kvkNumber2 = customer.kvkNumber) !== null && _customer$kvkNumber2 !== void 0 && _customer$kvkNumber2.trim());
+      const hasVatNumber = !!(customer !== null && customer !== void 0 && (_customer$vatNumber2 = customer.vatNumber) !== null && _customer$vatNumber2 !== void 0 && _customer$vatNumber2.trim());
+      if (isBusinessOwnership) {
+        if (isNetherlandsSelected && !hasKvkNumber) {
+          onValidationError === null || onValidationError === void 0 || onValidationError({
+            kvkNumber: 'KVK-nummer is verplicht voor zakelijke dossiers in Nederland'
+          });
+          return false;
+        }
+        if (!isNetherlandsSelected && !hasKvkNumber && !hasVatNumber) {
+          onValidationError === null || onValidationError === void 0 || onValidationError({
+            kvkNumber: 'Vul een KVK- of BTW-nummer in',
+            vatNumber: 'Vul een KVK- of BTW-nummer in'
+          });
+          return false;
+        }
+      }
       let validationSchema = webshop || !isTmg ? customerDetailsFormSchema.omit(['channelType', 'channelId']) : customerDetailsFormSchema;
       const requiredFields = (0, _helpers__.getSingleOrderRequiredFields)({
         webshop,
@@ -779,19 +814,21 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     }
   }, branch.name)))), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
-    initialValue: customer.kvkNumber,
+    value: customer.kvkNumber,
     name: "kvkNumber",
     onChange: value => updateCustomerField('kvkNumber', value),
-    isRequired: false,
+    key: "kvkNumber-".concat(refreshKey),
+    isRequired: shouldRequireKvkNumber,
     form: form,
     label: "KVK-nummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['kvkNumber']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
-    initialValue: customer.vatNumber,
+    value: customer.vatNumber,
     name: "vatNumber",
     onChange: value => updateCustomerField('vatNumber', value),
-    isRequired: false,
+    key: "vatNumber-".concat(refreshKey),
+    isRequired: shouldRequireVatNumber,
     form: form,
     label: "BTW-nummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['vatNumber']
@@ -829,7 +866,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     label: "Contact e-mailadres:"
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null)), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
-    initialValue: customer.zipCode,
+    value: customer.zipCode,
     name: "zipCode",
     onChange: value => {
       updateCustomerField('zipCode', value);
@@ -839,12 +876,13 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
       }
     },
     isRequired: webshop || anderAfleveradres,
+    key: "zipCode-".concat(refreshKey),
     form: form,
     label: "Postcode:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['zipCode']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
-    initialValue: customer.houseNumber,
+    value: customer.houseNumber,
     name: "houseNumber",
     onChange: value => {
       updateCustomerField('houseNumber', value);
@@ -854,33 +892,37 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
       }
     },
     isRequired: webshop || anderAfleveradres,
+    key: "houseNumber-".concat(refreshKey),
     form: form,
     label: "Huisnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumber']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
-    initialValue: customer.houseNumberAddition,
+    value: customer.houseNumberAddition,
     name: "houseNumberAddition",
     onChange: value => updateCustomerField('houseNumberAddition', value),
     isRequired: false,
+    key: "houseNumberAddition-".concat(refreshKey),
     form: form,
     label: "Huisnummer toevoeging:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumberAddition']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: addressLookupLoading ? 'Adres wordt opgezocht...' : '',
-    initialValue: customer.streetName,
+    value: customer.streetName,
     name: "streetName",
     onChange: value => updateCustomerField('streetName', value),
     isRequired: webshop || anderAfleveradres,
+    key: "streetName-".concat(refreshKey),
     form: form,
     label: "Straat:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['streetName']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: addressLookupLoading ? 'Stad wordt opgezocht...' : '',
-    initialValue: customer.city,
+    value: customer.city,
     name: "city",
     onChange: value => updateCustomerField('city', value),
     isRequired: webshop || anderAfleveradres,
+    key: "city-".concat(refreshKey),
     form: form,
     label: "Stad:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']