thm-p3-configurator 0.0.437 → 0.0.441

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

@@ -813,7 +813,8 @@ const useBranchesByType = _ref4 => {
       }
       return response.data;
     },
-    enabled: enabled && (allowEmptySearch || !!normalizedSearchTerm && normalizedSearchTerm.length >= 3)
+    enabled: enabled && (allowEmptySearch || !!normalizedSearchTerm && normalizedSearchTerm.length >= 3),
+    keepPreviousData: true
   });
   return {
     isLoadingBranchesByType: branchesByTypeQuery.isLoading,

package/dist/src/shared/__components__/Form/DropdownInput.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
@@ -13,6 +15,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/web.dom-collections.iterator.js");
@@ -96,6 +100,11 @@ function _toPrimitive(t, r) {
 }
 const DEFAULT_MENU_MAX_HEIGHT = 320;
 const SCROLLABLE_OPTIONS_THRESHOLD = 7;
+const filterByLabel = (option, input) => {
+  if (!input) return true;
+  const label = String((option === null || option === void 0 ? void 0 : option.label) || '');
+  return label.toLowerCase().includes(input.toLowerCase());
+};
 const DropdownInput = _ref => {
   let {
     options = [],
@@ -106,6 +115,7 @@ const DropdownInput = _ref => {
     noOptionsMessage: _noOptionsMessage = 'Geen opties beschikbaar',
     placeholder = 'Maak een keuze',
     onChange,
+    onInputChange: _onInputChange = () => {},
     onMenuOpen = () => {},
     onMenuClose = () => {},
     className,
@@ -179,8 +189,12 @@ const DropdownInput = _ref => {
     noOptionsMessage: () => _noOptionsMessage,
     classNamePrefix: (0, _helpers__.withStyle)('form-select'),
     onChange: option => handleChange(option),
+    onInputChange: (inputValue, actionMeta) => {
+      _onInputChange(inputValue, actionMeta);
+    },
     onMenuOpen: handleMenuOpen,
     onMenuClose: handleMenuClose,
+    filterOption: filterByLabel,
     isLoading: isLoading,
     isDisabled: isDisabled,
     isSearchable: true,

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

@@ -18,7 +18,6 @@ require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
-var _yup = require("yup");
 var _mutations = require("../__api__/mutations");
 var _NavigationButton = _interopRequireDefault(require("../__components__/Buttons/NavigationButton"));
 var _PrimaryButton = _interopRequireDefault(require("../__components__/Buttons/PrimaryButton"));
@@ -32,12 +31,14 @@ var _constants__ = require("../__constants__");
 var _FormulaContext = require("../__context__/FormulaContext");
 var _OrderSessionContext = require("../__context__/OrderSessionContext");
 var _helpers__ = require("../__helpers__");
-var _prospectTracking = require("../__helpers__/prospectTracking");
-var _Datalayer = require("../__services__/Datalayer");
-var _useDebouncedPush = _interopRequireDefault(require("../__hooks__/useDebouncedPush"));
 var _product = require("../__helpers__/product");
-var _useIsTowmotive = require("../__hooks__/useIsTowmotive");
+var _quotationFormSchema = require("../__helpers__/quotationFormSchema");
+var _prospectTracking = require("../__helpers__/prospectTracking");
 var _ui = require("../__helpers__/ui");
+var _useAddressLookup = _interopRequireDefault(require("../__hooks__/useAddressLookup"));
+var _useIsTowmotive = require("../__hooks__/useIsTowmotive");
+var _useDebouncedPush = _interopRequireDefault(require("../__hooks__/useDebouncedPush"));
+var _Datalayer = require("../__services__/Datalayer");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -119,20 +120,6 @@ const trackFormField = (fieldName, action, value) => (0, _Datalayer.pushToDataLa
   action,
   action_value: value !== null && value !== void 0 ? value : ''
 });
-const quotationFormSchema = (0, _yup.object)({
-  firstName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
-  infix: (0, _yup.string)().nullable(),
-  lastName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
-  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),
-  ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
-  companyName: (0, _yup.string)().when('ownershipType', {
-    is: _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk,
-    then: schema => schema.required(_constants__.FORM_ERROR_MESSAGES.required),
-    otherwise: schema => schema.nullable()
-  }),
-  termsAndConditions: (0, _yup.boolean)().isTrue(_constants__.FORM_ERROR_MESSAGES.required).required(_constants__.FORM_ERROR_MESSAGES.required)
-});
 const QuotationForm = () => {
   const [{
     customer,
@@ -162,6 +149,31 @@ const QuotationForm = () => {
   const hasTrackedValidSubmitRef = (0, _react.useRef)(false);
   const prospectIdRef = (0, _react.useRef)(null);
   const trackInput = (0, _useDebouncedPush.default)();
+  const updateCustomerField = (field, value) => {
+    const actionByField = {
+      zipCode: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
+      houseNumber: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
+      houseNumberAddition: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
+      streetName: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
+      city: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY
+    };
+    dispatch({
+      type: actionByField[field],
+      payload: {
+        [field]: value
+      }
+    });
+  };
+  const {
+    isLoading: addressLookupLoading,
+    lookup: handleAddressLookup
+  } = (0, _useAddressLookup.default)({
+    onResult: address => {
+      var _address$street, _address$city;
+      updateCustomerField('streetName', (_address$street = address === null || address === void 0 ? void 0 : address.street) !== null && _address$street !== void 0 ? _address$street : '');
+      updateCustomerField('city', (_address$city = address === null || address === void 0 ? void 0 : address.city) !== null && _address$city !== void 0 ? _address$city : '');
+    }
+  });
   const {
     createQuotation,
     isCreateQuotationSuccess,
@@ -189,7 +201,7 @@ const QuotationForm = () => {
     });
     try {
       setErrors(null);
-      quotationFormSchema.validateSync(_objectSpread(_objectSpread({}, customer), {}, {
+      _quotationFormSchema.quotationFormSchema.validateSync(_objectSpread(_objectSpread({}, customer), {}, {
         ownershipType: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
         termsAndConditions: isTermsAccepted
       }), {
@@ -425,9 +437,7 @@ const QuotationForm = () => {
     form: "quotation",
     label: "Telefoonnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['phoneNumber']
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('col-12 col-md-6')
-  }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk && /*#__PURE__*/_react.default.createElement("div", {
+  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('mb-3')
   }, /*#__PURE__*/_react.default.createElement("h6", {
     className: (0, _helpers__.withStyle)('mb-2')
@@ -455,7 +465,114 @@ const QuotationForm = () => {
     form: "quotation",
     label: "Bedrijfsnaam:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName']
-  })), /*#__PURE__*/_react.default.createElement(_TextAreaInput.default, {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-md-6')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('row')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-sm-4')
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    value: customer.zipCode,
+    name: "zipCode",
+    onFocus: () => trackFormField('postcode', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'offerte',
+        element: 'text_field',
+        field: 'postcode',
+        action: 'input'
+      });
+      updateCustomerField('zipCode', value);
+      handleAddressLookup(value, customer.houseNumber);
+    },
+    isRequired: false,
+    form: "quotation",
+    label: "Postcode:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['zipCode']
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-sm-4')
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    value: customer.houseNumber,
+    name: "houseNumber",
+    onFocus: () => trackFormField('huisnummer', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'offerte',
+        element: 'text_field',
+        field: 'huisnummer',
+        action: 'input'
+      });
+      updateCustomerField('houseNumber', value);
+      handleAddressLookup(customer.zipCode, value);
+    },
+    isRequired: false,
+    form: "quotation",
+    label: "Huisnummer:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumber']
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-sm-4')
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    value: customer.houseNumberAddition,
+    name: "houseNumberAddition",
+    onFocus: () => trackFormField('toevoeging', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'offerte',
+        element: 'text_field',
+        field: 'toevoeging',
+        action: 'input'
+      });
+      updateCustomerField('houseNumberAddition', value);
+    },
+    isRequired: false,
+    form: "quotation",
+    label: "Toevoeging:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumberAddition']
+  }))), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: addressLookupLoading ? 'Adres wordt opgezocht...' : '',
+    value: customer.streetName,
+    name: "streetName",
+    onFocus: () => trackFormField('straat', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'offerte',
+        element: 'text_field',
+        field: 'straat',
+        action: 'input'
+      });
+      updateCustomerField('streetName', value);
+    },
+    isRequired: false,
+    form: "quotation",
+    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...' : '',
+    value: customer.city,
+    name: "city",
+    onFocus: () => trackFormField('plaats', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'offerte',
+        element: 'text_field',
+        field: 'plaats',
+        action: 'input'
+      });
+      updateCustomerField('city', value);
+    },
+    isRequired: false,
+    form: "quotation",
+    label: "Plaats:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
+  }), /*#__PURE__*/_react.default.createElement(_TextAreaInput.default, {
     placeholder: "",
     initialValue: customer.note,
     name: "note",

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

@@ -14,7 +14,6 @@ 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.filter.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -26,6 +25,7 @@ require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.string.trim.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
@@ -212,6 +212,10 @@ const getEmptyCustomerState = () => ({
   zakeiljkContactFactuuradres: '',
   zakelijkContactEMailadres: ''
 });
+const getLeaseCompanyLabel = function getLeaseCompanyLabel() {
+  let branch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (branch === null || branch === void 0 ? void 0 : branch.name) || (branch === null || branch === void 0 ? void 0 : branch.naamVestiging) || '';
+};
 const buildLeaseCompanyOption = function buildLeaseCompanyOption() {
   let customer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const label = (customer === null || customer === void 0 ? void 0 : customer.leasemaatschappijBedrijfsnaam) || (customer === null || customer === void 0 ? void 0 : customer.companyName) || '';
@@ -243,9 +247,17 @@ const InternalAppointmentForm = _ref => {
   const [order, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const [refreshKey, setRefreshKey] = (0, _react.useState)(Date.now());
   const [companySearchTerm, setCompanySearchTerm] = (0, _react.useState)('');
+  const [leaseSearchTerm, setLeaseSearchTerm] = (0, _react.useState)('');
+  const [debouncedLeaseSearchTerm, setDebouncedLeaseSearchTerm] = (0, _react.useState)('');
   const [isCompanyInputFocused, setIsCompanyInputFocused] = (0, _react.useState)(false);
   const [addressLookupLoading, setAddressLookupLoading] = (0, _react.useState)(false);
   const [addressLookupTimeoutId, setAddressLookupTimeoutId] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedLeaseSearchTerm(leaseSearchTerm);
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [leaseSearchTerm]);
   const {
     customerAgreed,
     customer: contextCustomer,
@@ -750,7 +762,7 @@ const InternalAppointmentForm = _ref => {
   } = (0, _queries.useBranchesByType)({
     isTmg,
     isTowCenterBranch,
-    searchTerm: '',
+    searchTerm: debouncedLeaseSearchTerm,
     formula,
     ownershipType: activeOwnershipType,
     organisationType: branchType,
@@ -766,9 +778,9 @@ const InternalAppointmentForm = _ref => {
     enabled: isBusinessOwnership
   });
   const leaseCompanyOptions = (0, _react.useMemo)(() => (branchesByType || []).map(branch => ({
-    label: branch === null || branch === void 0 ? void 0 : branch.name,
+    label: getLeaseCompanyLabel(branch),
     value: branch
-  })), [branchesByType]);
+  })).filter(option => option.label), [branchesByType]);
   const selectedLeaseCompanyOption = (0, _react.useMemo)(() => {
     if (!(customer !== null && customer !== void 0 && customer.leasemaatschappijEntityId) && !(customer !== null && customer !== void 0 && customer.companyName)) {
       return null;
@@ -933,6 +945,8 @@ const InternalAppointmentForm = _ref => {
     initialValue: activeOwnershipType,
     onChange: val => {
       setCompanySearchTerm('');
+      setLeaseSearchTerm('');
+      setDebouncedLeaseSearchTerm('');
       setIsCompanyInputFocused(false);
       setActiveOwnershipType(val);
     },
@@ -950,11 +964,20 @@ const InternalAppointmentForm = _ref => {
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName'],
     initialValue: selectedLeaseCompanyOption,
     isClearable: true,
+    onInputChange: (inputValue, actionMeta) => {
+      if ((actionMeta === null || actionMeta === void 0 ? void 0 : actionMeta.action) === 'input-change') {
+        setLeaseSearchTerm(inputValue);
+      }
+      if ((actionMeta === null || actionMeta === void 0 ? void 0 : actionMeta.action) === 'set-value') {
+        setLeaseSearchTerm('');
+      }
+    },
     onChange: option => {
       const branch = option === null || option === void 0 ? void 0 : option.value;
-      updateCustomerField('companyName', (branch === null || branch === void 0 ? void 0 : branch.name) || '');
+      const companyName = getLeaseCompanyLabel(branch);
+      updateCustomerField('companyName', companyName);
       updateCustomerField('leasemaatschappijEntityId', (branch === null || branch === void 0 ? void 0 : branch.entityId) || '');
-      updateCustomerField('leasemaatschappijBedrijfsnaam', (branch === null || branch === void 0 ? void 0 : branch.name) || '');
+      updateCustomerField('leasemaatschappijBedrijfsnaam', companyName);
     }
   }), existingDossierId && existingDossierType === _constants__.DOSSIER_TYPES.PlannedAppointment && (branchById === null || branchById === void 0 ? void 0 : branchById.towCenterVestiging) === true && /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
     name: "invoicePaymentByLeaseCompany",

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

@@ -13,7 +13,6 @@ 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.filter.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -24,6 +23,7 @@ require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
@@ -156,6 +156,10 @@ const getEmptyCustomerState = () => ({
   zakeiljkContactFactuuradres: '',
   zakelijkContactEMailadres: ''
 });
+const getLeaseCompanyLabel = function getLeaseCompanyLabel() {
+  let branch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (branch === null || branch === void 0 ? void 0 : branch.name) || (branch === null || branch === void 0 ? void 0 : branch.naamVestiging) || '';
+};
 const buildLeaseCompanyOption = function buildLeaseCompanyOption() {
   let customer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const label = (customer === null || customer === void 0 ? void 0 : customer.leasemaatschappijBedrijfsnaam) || (customer === null || customer === void 0 ? void 0 : customer.companyName) || '';
@@ -252,8 +256,16 @@ const InternalQuotationForm = _ref => {
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const [errors, setErrors] = (0, _react.useState)({});
   const [companySearchTerm, setCompanySearchTerm] = (0, _react.useState)('');
+  const [leaseSearchTerm, setLeaseSearchTerm] = (0, _react.useState)('');
+  const [debouncedLeaseSearchTerm, setDebouncedLeaseSearchTerm] = (0, _react.useState)('');
   const [isCompanyInputFocused, setIsCompanyInputFocused] = (0, _react.useState)(false);
   const [refreshKey, setRefreshKey] = (0, _react.useState)(Date.now());
+  (0, _react.useEffect)(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedLeaseSearchTerm(leaseSearchTerm);
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [leaseSearchTerm]);
 
   // Track the original ownership type from context
   const [originalOwnershipType] = (0, _react.useState)(() => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) || _constants__.VEHICLE_OWNERSHIP_TYPE.Particulier);
@@ -417,7 +429,7 @@ const InternalQuotationForm = _ref => {
   } = (0, _queries.useBranchesByType)({
     isTmg,
     isTowCenterBranch,
-    searchTerm: '',
+    searchTerm: debouncedLeaseSearchTerm,
     formula,
     ownershipType: activeOwnershipType,
     organisationType: branchType,
@@ -433,9 +445,9 @@ const InternalQuotationForm = _ref => {
     enabled: isBusinessOwnership
   });
   const leaseCompanyOptions = (0, _react.useMemo)(() => (branchesByType || []).map(branch => ({
-    label: branch === null || branch === void 0 ? void 0 : branch.name,
+    label: getLeaseCompanyLabel(branch),
     value: branch
-  })), [branchesByType]);
+  })).filter(option => option.label), [branchesByType]);
   const selectedLeaseCompanyOption = (0, _react.useMemo)(() => {
     if (!(customer !== null && customer !== void 0 && customer.leasemaatschappijEntityId) && !(customer !== null && customer !== void 0 && customer.companyName)) {
       return null;
@@ -710,6 +722,8 @@ const InternalQuotationForm = _ref => {
     initialValue: activeOwnershipType,
     onChange: val => {
       setCompanySearchTerm('');
+      setLeaseSearchTerm('');
+      setDebouncedLeaseSearchTerm('');
       setIsCompanyInputFocused(false);
       setActiveOwnershipType(val);
     },
@@ -871,11 +885,20 @@ const InternalQuotationForm = _ref => {
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName'],
     initialValue: selectedLeaseCompanyOption,
     isClearable: true,
+    onInputChange: (inputValue, actionMeta) => {
+      if ((actionMeta === null || actionMeta === void 0 ? void 0 : actionMeta.action) === 'input-change') {
+        setLeaseSearchTerm(inputValue);
+      }
+      if ((actionMeta === null || actionMeta === void 0 ? void 0 : actionMeta.action) === 'set-value') {
+        setLeaseSearchTerm('');
+      }
+    },
     onChange: option => {
       const branch = option === null || option === void 0 ? void 0 : option.value;
-      updateCustomerField('companyName', (branch === null || branch === void 0 ? void 0 : branch.name) || '');
+      const companyName = getLeaseCompanyLabel(branch);
+      updateCustomerField('companyName', companyName);
       updateCustomerField('leasemaatschappijEntityId', (branch === null || branch === void 0 ? void 0 : branch.entityId) || '');
-      updateCustomerField('leasemaatschappijBedrijfsnaam', (branch === null || branch === void 0 ? void 0 : branch.name) || '');
+      updateCustomerField('leasemaatschappijBedrijfsnaam', companyName);
     }
   }), activeOwnershipType === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
     className: (0, _helpers__.withStyle)('modal-title mb-2 mt-3')

package/dist/src/shared/__helpers__/__tests__/quotationFormSchema.test.js

@@ -0,0 +1,88 @@
+"use strict";
+
+require("core-js/modules/es.promise.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.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/es.promise.js");
+var _quotationFormSchema = require("../quotationFormSchema");
+var _constants__ = require("../../__constants__");
+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 baseValid = {
+  firstName: 'Jan',
+  infix: null,
+  lastName: 'Jansen',
+  email: 'jan@example.com',
+  phoneNumber: '0612345678',
+  ownershipType: _constants__.VEHICLE_OWNERSHIP_TYPE.Particulier,
+  companyName: null,
+  termsAndConditions: true
+};
+describe('quotationFormSchema', () => {
+  it('accepts a valid form without address fields', async () => {
+    await expect(_quotationFormSchema.quotationFormSchema.validate(baseValid)).resolves.toBeTruthy();
+  });
+  it('rejects an invalid postcode when zipCode is filled', async () => {
+    await expect(_quotationFormSchema.quotationFormSchema.validate(_objectSpread(_objectSpread({}, baseValid), {}, {
+      zipCode: '123'
+    }))).rejects.toMatchObject({
+      path: 'zipCode'
+    });
+  });
+  it('accepts a valid Dutch postcode with optional spaces', async () => {
+    await expect(_quotationFormSchema.quotationFormSchema.validate(_objectSpread(_objectSpread({}, baseValid), {}, {
+      zipCode: '1234 AB'
+    }))).resolves.toBeTruthy();
+  });
+  it('accepts a partial address without requiring street/city', async () => {
+    await expect(_quotationFormSchema.quotationFormSchema.validate(_objectSpread(_objectSpread({}, baseValid), {}, {
+      zipCode: '1234AB',
+      houseNumber: '12'
+    }))).resolves.toBeTruthy();
+  });
+});

package/dist/src/shared/__helpers__/quotationFormSchema.js

@@ -0,0 +1,33 @@
+"use strict";
+
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.trim.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.quotationFormSchema = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.trim.js");
+var _yup = require("yup");
+var _constants__ = require("../__constants__");
+const DUTCH_POSTCODE = /^[1-9][0-9]{3}\s?[A-Za-z]{2}$/;
+const quotationFormSchema = exports.quotationFormSchema = (0, _yup.object)({
+  firstName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  infix: (0, _yup.string)().nullable(),
+  lastName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  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),
+  ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  companyName: (0, _yup.string)().when('ownershipType', {
+    is: _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk,
+    then: schema => schema.required(_constants__.FORM_ERROR_MESSAGES.required),
+    otherwise: schema => schema.nullable()
+  }),
+  termsAndConditions: (0, _yup.boolean)().isTrue(_constants__.FORM_ERROR_MESSAGES.required).required(_constants__.FORM_ERROR_MESSAGES.required),
+  zipCode: (0, _yup.string)().nullable().test('dutch-postcode', _constants__.FORM_ERROR_MESSAGES.postCode, value => {
+    const trimmed = value == null ? '' : String(value).trim();
+    return trimmed === '' || DUTCH_POSTCODE.test(trimmed);
+  })
+});

package/dist/src/shared/__hooks__/useAddressLookup.js

@@ -0,0 +1,62 @@
+"use strict";
+
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = require("react");
+var _AddressLookupService = _interopRequireDefault(require("../__services__/AddressLookupService"));
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+const addressLookupService = new _AddressLookupService.default();
+const useAddressLookup = function useAddressLookup() {
+  let {
+    onResult,
+    debounceMs = 800
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const timeoutRef = (0, _react.useRef)(null);
+  const requestIdRef = (0, _react.useRef)(0);
+  const onResultRef = (0, _react.useRef)(onResult);
+  onResultRef.current = onResult;
+  (0, _react.useEffect)(() => () => {
+    clearTimeout(timeoutRef.current);
+    requestIdRef.current += 1;
+  }, []);
+  const lookup = (0, _react.useCallback)((postcode, houseNumber) => {
+    var _onResultRef$current;
+    clearTimeout(timeoutRef.current);
+    requestIdRef.current += 1;
+    (_onResultRef$current = onResultRef.current) === null || _onResultRef$current === void 0 || _onResultRef$current.call(onResultRef, null);
+    if (!postcode || !houseNumber) {
+      setIsLoading(false);
+      return;
+    }
+    const requestId = requestIdRef.current;
+    timeoutRef.current = setTimeout(async () => {
+      setIsLoading(true);
+      try {
+        var _onResultRef$current2;
+        const addressInfo = await addressLookupService.lookup(postcode, houseNumber);
+        if (requestId !== requestIdRef.current) return;
+        (_onResultRef$current2 = onResultRef.current) === null || _onResultRef$current2 === void 0 || _onResultRef$current2.call(onResultRef, addressInfo !== null && addressInfo !== void 0 && addressInfo.street && addressInfo !== null && addressInfo !== void 0 && addressInfo.city ? addressInfo : null);
+      } finally {
+        if (requestId === requestIdRef.current) {
+          setIsLoading(false);
+        }
+      }
+    }, debounceMs);
+  }, [debounceMs]);
+  return {
+    isLoading,
+    lookup
+  };
+};
+var _default = exports.default = useAddressLookup;

package/package.json

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