thm-p3-configurator 0.0.202 → 0.0.204

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

@@ -47,6 +47,7 @@ var _helpers__ = require("../../__helpers__");
 var _product = require("../../__helpers__/product");
 var _ui = require("../../__helpers__/ui");
 var _useIsTmg = require("../../__hooks__/useIsTmg");
+var _AddressLookupService = _interopRequireDefault(require("../../__services__/AddressLookupService"));
 var _LicensePlateValidator = _interopRequireDefault(require("../../__services__/LicensePlateValidator"));
 var _LocalStorageWorker = require("../../__services__/LocalStorageWorker");
 var _InternalAppointmentSuccessModal = _interopRequireDefault(require("./InternalAppointmentSuccessModal"));
@@ -124,6 +125,7 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 const licensePlateValidator = new _LicensePlateValidator.default();
+const addressLookupService = new _AddressLookupService.default();
 const internalAppointmentFormSchema = (0, _yup.object)({
   ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   leaseNumber: (0, _yup.string)().nullable(),
@@ -174,6 +176,8 @@ const InternalAppointmentForm = _ref => {
   const [refreshKey, setRefreshKey] = (0, _react.useState)(Date.now());
   const [companySearchTerm, setCompanySearchTerm] = (0, _react.useState)('');
   const [isCompanyInputFocused, setIsCompanyInputFocused] = (0, _react.useState)(false);
+  const [addressLookupLoading, setAddressLookupLoading] = (0, _react.useState)(false);
+  const [addressLookupTimeoutId, setAddressLookupTimeoutId] = (0, _react.useState)(null);
   const {
     customerAgreed,
     customer,
@@ -557,6 +561,62 @@ const InternalAppointmentForm = _ref => {
     label: marketingChannels === null || marketingChannels === void 0 || (_marketingChannels$fi = marketingChannels.find(marketingC => (marketingC === null || marketingC === void 0 ? void 0 : marketingC.entityId) === (channel === null || channel === void 0 ? void 0 : channel.channelId))) === null || _marketingChannels$fi === void 0 ? void 0 : _marketingChannels$fi.title,
     value: marketingChannels === null || marketingChannels === void 0 ? void 0 : marketingChannels.find(marketingC => (marketingC === null || marketingC === void 0 ? void 0 : marketingC.entityId) === (channel === null || channel === void 0 ? void 0 : channel.channelId))
   } : null;
+
+  /**
+   * @description Debounced address lookup function
+   */
+  const performAddressLookup = async (postcode, houseNumber) => {
+    if (!postcode || !houseNumber) return;
+    try {
+      setAddressLookupLoading(true);
+      const addressInfo = await addressLookupService.lookup(postcode, houseNumber);
+      if (addressInfo && addressInfo.street && addressInfo.city) {
+        // Auto-fill street and city fields
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
+          payload: {
+            streetName: addressInfo.street
+          }
+        });
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
+          payload: {
+            city: addressInfo.city
+          }
+        });
+      }
+    } catch (error) {
+      console.error('Address lookup failed:', error);
+    } finally {
+      setAddressLookupLoading(false);
+    }
+  };
+
+  /**
+   * @description Handles address lookup with debouncing
+   */
+  const handleAddressLookup = (postcode, houseNumber) => {
+    // Clear existing timeout
+    if (addressLookupTimeoutId) {
+      clearTimeout(addressLookupTimeoutId);
+    }
+
+    // Set new timeout for debounced lookup
+    const newTimeoutId = setTimeout(() => {
+      performAddressLookup(postcode, houseNumber);
+    }, 800); // 800ms delay
+
+    setAddressLookupTimeoutId(newTimeoutId);
+  };
+
+  // Cleanup timeout on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (addressLookupTimeoutId) {
+        clearTimeout(addressLookupTimeoutId);
+      }
+    };
+  }, [addressLookupTimeoutId]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row gx-5 mt-3 mt-lg-5')
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -619,7 +679,136 @@ const InternalAppointmentForm = _ref => {
     options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
     isRequired: true,
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
-  })), /*#__PURE__*/_react.default.createElement("h5", {
+  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('company-search-container position-relative mt-2 mb-2')
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "Zoek leasemaatschappijen...",
+    value: customer.companyName,
+    name: "companyName",
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
+        payload: {
+          companyName: value
+        }
+      });
+
+      // Also update search term if value is different
+      if (value !== companySearchTerm) {
+        setCompanySearchTerm(value);
+        setIsCompanyInputFocused(true);
+      }
+    },
+    onFocus: () => {
+      setIsCompanyInputFocused(true);
+    },
+    onBlur: () => {
+      setTimeout(() => {
+        setIsCompanyInputFocused(false);
+      }, 300); // Increased delay for better chance of click completion
+    },
+    isRequired: false,
+    form: "quotation",
+    label: "Leasemaatschappij:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName']
+  }), isCompanyInputFocused && companySearchTerm && companySearchTerm.length >= 3 && branchesByType && branchesByType.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('dropdown-results position-absolute w-100 border rounded bg-white shadow'),
+    style: {
+      maxHeight: '200px',
+      overflowY: 'auto',
+      zIndex: 1050,
+      top: '100%',
+      left: 0,
+      right: 0
+    },
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, isLoadingBranchesByType && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('p-2 text-center')
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Zoeken...")), branchesByType.map(branch => /*#__PURE__*/_react.default.createElement("div", {
+    key: branch.entityId,
+    className: (0, _helpers__.withStyle)('dropdown-item p-2 border-bottom'),
+    style: {
+      cursor: 'pointer'
+    },
+    onMouseDown: e => {
+      e.preventDefault();
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
+        payload: {
+          companyName: branch.name
+        }
+      });
+      if (branch.postalCode) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
+          payload: {
+            zipCode: branch.postalCode
+          }
+        });
+      }
+      if (branch.street) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
+          payload: {
+            streetName: branch.street
+          }
+        });
+      }
+      if (branch.city) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
+          payload: {
+            city: branch.city
+          }
+        });
+      }
+      if (branch.street2) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
+          payload: {
+            houseNumber: branch.street2
+          }
+        });
+      }
+      if (branch.vatNumber) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
+          payload: {
+            vatNumber: branch.vatNumber
+          }
+        });
+      }
+      if (branch.kvkNumber) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
+          payload: {
+            kvkNumber: branch.kvkNumber
+          }
+        });
+      }
+      if (branch.huisnummerToevoeging) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
+          payload: {
+            houseNumberAddition: branch.huisnummerToevoeging
+          }
+        });
+      }
+      if (branch.country && branch.country.entityId) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
+          payload: {
+            countryId: branch.country.entityId
+          }
+        });
+        setRefreshKey(Date.now());
+      }
+      setCompanySearchTerm('');
+      setIsCompanyInputFocused(false);
+    }
+  }, branch.name))))), /*#__PURE__*/_react.default.createElement("h5", {
     className: (0, _helpers__.withStyle)('my-2')
   }, "Persoonlijke gegevens"), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 col-md-6 mb-2')
@@ -756,140 +945,7 @@ const InternalAppointmentForm = _ref => {
     form: "appointment",
     label: "E-mailadres:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['email']
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('company-search-container position-relative mt-2 mb-2')
-  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "Zoek leasemaatschappijen...",
-    value: customer.companyName,
-    name: "companyName",
-    onChange: value => {
-      // Update company name in state
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: value
-        }
-      });
-
-      // Also update search term if value is different
-      if (value !== companySearchTerm) {
-        console.log('value', value);
-        setCompanySearchTerm(value);
-        // Force focused state when typing
-        setIsCompanyInputFocused(true);
-      }
-    },
-    onFocus: () => {
-      setIsCompanyInputFocused(true);
-    },
-    onBlur: () => {
-      // Delay hiding the dropdown to allow click events to complete
-      setTimeout(() => {
-        setIsCompanyInputFocused(false);
-      }, 300); // Increased delay for better chance of click completion
-    },
-    isRequired: false,
-    form: "quotation",
-    label: "Leasemaatschappij:",
-    errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName']
-  }), isCompanyInputFocused && companySearchTerm && companySearchTerm.length >= 3 && branchesByType && branchesByType.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('dropdown-results position-absolute w-100 border rounded bg-white shadow'),
-    style: {
-      maxHeight: '200px',
-      overflowY: 'auto',
-      zIndex: 1050,
-      top: '100%',
-      left: 0,
-      right: 0
-    },
-    onMouseDown: e => {
-      e.preventDefault();
-    }
-  }, isLoadingBranchesByType && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('p-2 text-center')
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Zoeken...")), branchesByType.map(branch => /*#__PURE__*/_react.default.createElement("div", {
-    key: branch.entityId,
-    className: (0, _helpers__.withStyle)('dropdown-item p-2 border-bottom'),
-    style: {
-      cursor: 'pointer'
-    },
-    onMouseDown: e => {
-      e.preventDefault();
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: branch.name
-        }
-      });
-      if (branch.postalCode) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-          payload: {
-            zipCode: branch.postalCode
-          }
-        });
-      }
-      if (branch.street) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
-          payload: {
-            streetName: branch.street
-          }
-        });
-      }
-      if (branch.city) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
-          payload: {
-            city: branch.city
-          }
-        });
-      }
-      if (branch.street2) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-          payload: {
-            houseNumber: branch.street2
-          }
-        });
-      }
-      if (branch.vatNumber) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
-          payload: {
-            vatNumber: branch.vatNumber
-          }
-        });
-      }
-      if (branch.kvkNumber) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
-          payload: {
-            kvkNumber: branch.kvkNumber
-          }
-        });
-      }
-      if (branch.huisnummerToevoeging) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
-          payload: {
-            houseNumberAddition: branch.huisnummerToevoeging
-          }
-        });
-      }
-      if (branch.country && branch.country.entityId) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
-          payload: {
-            countryId: branch.country.entityId
-          }
-        });
-        setRefreshKey(Date.now());
-      }
-      setCompanySearchTerm('');
-      setIsCompanyInputFocused(false);
-    }
-  }, branch.name)))), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     value: customer.phoneNumber,
     name: "phoneNumber",
@@ -1133,12 +1189,18 @@ const InternalAppointmentForm = _ref => {
     placeholder: "",
     value: customer.zipCode,
     name: "zipCode",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-      payload: {
-        zipCode: value
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
+        payload: {
+          zipCode: value
+        }
+      });
+      // Trigger address lookup if house number is also available
+      if (customer.houseNumber) {
+        handleAddressLookup(value, customer.houseNumber);
       }
-    }),
+    },
     key: "zipCode-".concat(refreshKey),
     isRequired: true,
     label: "Postcode:",
@@ -1147,12 +1209,18 @@ const InternalAppointmentForm = _ref => {
     placeholder: "",
     value: customer.houseNumber,
     name: "houseNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-      payload: {
-        houseNumber: value
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
+        payload: {
+          houseNumber: value
+        }
+      });
+      // Trigger address lookup if postcode is also available
+      if (customer.zipCode) {
+        handleAddressLookup(customer.zipCode, value);
       }
-    }),
+    },
     key: "houseNumber-".concat(refreshKey),
     isRequired: true,
     label: "Huisnummer:",
@@ -1172,7 +1240,7 @@ const InternalAppointmentForm = _ref => {
     label: "Huisnummer toevoeging:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumberAddition']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
+    placeholder: addressLookupLoading ? 'Adres wordt opgezocht...' : '',
     value: customer.streetName,
     name: "streetName",
     onChange: value => dispatch({
@@ -1183,10 +1251,10 @@ const InternalAppointmentForm = _ref => {
     }),
     key: "streetName-".concat(refreshKey),
     isRequired: true,
-    label: "Straat:",
+    label: "Straat:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['streetName']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
+    placeholder: addressLookupLoading ? 'Stad wordt opgezocht...' : '',
     value: customer.city,
     name: "city",
     onChange: value => dispatch({
@@ -1197,7 +1265,7 @@ const InternalAppointmentForm = _ref => {
     }),
     key: "city-".concat(refreshKey),
     isRequired: true,
-    label: "Stad:",
+    label: "Stad:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
   }), /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
     key: "country-business-".concat((customer === null || customer === void 0 ? void 0 : customer.countryId) || 'default'),
@@ -1225,12 +1293,18 @@ const InternalAppointmentForm = _ref => {
     placeholder: "",
     value: customer.zipCode,
     name: "zipCode",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-      payload: {
-        zipCode: value
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
+        payload: {
+          zipCode: value
+        }
+      });
+      // Trigger address lookup if house number is also available
+      if (customer.houseNumber) {
+        handleAddressLookup(value, customer.houseNumber);
       }
-    }),
+    },
     key: "zipCode-".concat(refreshKey),
     isRequired: true,
     label: "Postcode:",
@@ -1239,12 +1313,18 @@ const InternalAppointmentForm = _ref => {
     placeholder: "",
     value: customer.houseNumber,
     name: "houseNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-      payload: {
-        houseNumber: value
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
+        payload: {
+          houseNumber: value
+        }
+      });
+      // Trigger address lookup if postcode is also available
+      if (customer.zipCode) {
+        handleAddressLookup(customer.zipCode, value);
       }
-    }),
+    },
     key: "houseNumber-".concat(refreshKey),
     isRequired: true,
     label: "Huisnummer:",
@@ -1264,7 +1344,7 @@ const InternalAppointmentForm = _ref => {
     label: "Huisnummer toevoeging:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumberAddition']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
+    placeholder: addressLookupLoading ? 'Adres wordt opgezocht...' : '',
     value: customer.streetName,
     name: "streetName",
     onChange: value => dispatch({
@@ -1275,10 +1355,10 @@ const InternalAppointmentForm = _ref => {
     }),
     key: "streetName-".concat(refreshKey),
     isRequired: true,
-    label: "Straat:",
+    label: "Straat:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['streetName']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
+    placeholder: addressLookupLoading ? 'Stad wordt opgezocht...' : '',
     value: customer.city,
     name: "city",
     onChange: value => dispatch({
@@ -1289,7 +1369,7 @@ const InternalAppointmentForm = _ref => {
     }),
     key: "city-".concat(refreshKey),
     isRequired: true,
-    label: "Stad:",
+    label: "Stad:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
   }), /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
     key: "country-lease-".concat((customer === null || customer === void 0 ? void 0 : customer.countryId) || 'default'),
@@ -1331,12 +1411,18 @@ const InternalAppointmentForm = _ref => {
     placeholder: "",
     value: customer.zipCode,
     name: "zipCode",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-      payload: {
-        zipCode: value
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
+        payload: {
+          zipCode: value
+        }
+      });
+      // Trigger address lookup if house number is also available
+      if (customer.houseNumber) {
+        handleAddressLookup(value, customer.houseNumber);
       }
-    }),
+    },
     key: "zipCode-".concat(refreshKey),
     isRequired: true,
     label: "Postcode:",
@@ -1345,12 +1431,18 @@ const InternalAppointmentForm = _ref => {
     placeholder: "",
     value: customer.houseNumber,
     name: "houseNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-      payload: {
-        houseNumber: value
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
+        payload: {
+          houseNumber: value
+        }
+      });
+      // Trigger address lookup if postcode is also available
+      if (customer.zipCode) {
+        handleAddressLookup(customer.zipCode, value);
       }
-    }),
+    },
     key: "houseNumber-".concat(refreshKey),
     isRequired: true,
     label: "Huisnummer:",
@@ -1370,7 +1462,7 @@ const InternalAppointmentForm = _ref => {
     label: "Huisnummer toevoeging:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['houseNumberAddition']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
+    placeholder: addressLookupLoading ? 'Adres wordt opgezocht...' : '',
     value: customer.streetName,
     name: "streetName",
     onChange: value => dispatch({
@@ -1381,10 +1473,10 @@ const InternalAppointmentForm = _ref => {
     }),
     key: "streetName-".concat(refreshKey),
     isRequired: true,
-    label: "Straat:",
+    label: "Straat:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['streetName']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
+    placeholder: addressLookupLoading ? 'Stad wordt opgezocht...' : '',
     value: customer.city,
     name: "city",
     onChange: value => dispatch({
@@ -1395,7 +1487,7 @@ const InternalAppointmentForm = _ref => {
     }),
     key: "city-".concat(refreshKey),
     isRequired: true,
-    label: "Stad:",
+    label: "Stad:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
   }), /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
     key: "country-personal-".concat((customer === null || customer === void 0 ? void 0 : customer.countryId) || 'default'),

package/dist/src/shared/__services__/AddressLookupService.js

@@ -0,0 +1,192 @@
+"use strict";
+
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.replace.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.parse-int.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+class AddressLookupService {
+  constructor() {
+    this.cache = new Map();
+  }
+
+  /**
+   * @description Validates Dutch postcode format
+   * @param {string} postcode - The postcode to validate
+   * @returns {boolean} - True if valid Dutch postcode format
+   */
+  isValidPostcode(postcode) {
+    if (!postcode || typeof postcode !== 'string') return false;
+    const cleanPostcode = postcode.replace(/\s/g, '').toUpperCase();
+    const dutchPostcodeRegex = /^[1-9][0-9]{3}[A-Z]{2}$/;
+    return dutchPostcodeRegex.test(cleanPostcode);
+  }
+
+  /**
+   * @description Validates house number
+   * @param {string|number} houseNumber - The house number to validate
+   * @returns {boolean} - True if valid house number
+   */
+  isValidHouseNumber(houseNumber) {
+    if (!houseNumber) return false;
+    const num = typeof houseNumber === 'string' ? parseInt(houseNumber, 10) : houseNumber;
+    return !isNaN(num) && num > 0 && num <= 99999;
+  }
+
+  /**
+   * @description Creates a cache key for the lookup
+   * @param {string} postcode - The postcode
+   * @param {string|number} houseNumber - The house number
+   * @returns {string} - Cache key
+   */
+  getCacheKey(postcode, houseNumber) {
+    const cleanPostcode = postcode.replace(/\s/g, '').toUpperCase();
+    return "".concat(cleanPostcode, "-").concat(houseNumber);
+  }
+
+  /**
+   * @description Lookup using PDOK BAG API (free Dutch government service)
+   * @param {string} postcode - The Dutch postcode
+   * @param {string|number} houseNumber - The house number
+   * @returns {Promise<{street: string, city: string} | null>} - Address information or null if not found
+   */
+  async lookupAddressPDOK(postcode, houseNumber) {
+    try {
+      if (!this.isValidPostcode(postcode) || !this.isValidHouseNumber(houseNumber)) {
+        return null;
+      }
+      const cacheKey = this.getCacheKey(postcode, houseNumber);
+      if (this.cache.has(cacheKey)) {
+        return this.cache.get(cacheKey);
+      }
+      const cleanPostcode = postcode.replace(/\s/g, '').toUpperCase();
+      const url = "https://api.pdok.nl/bzk/locatieserver/search/v3_1/suggest?q=".concat(cleanPostcode, " ").concat(houseNumber, "&fl=weergavenaam,straatnaam,woonplaatsnaam,postcode,huisnummer&rows=1");
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Accept: 'application/json'
+        }
+      });
+      if (!response.ok) {
+        console.warn('PDOK lookup failed:', response.status);
+        return null;
+      }
+      const data = await response.json();
+      let addressInfo = null;
+      if (data && data.response && data.response.docs && data.response.docs.length > 0) {
+        const doc = data.response.docs[0];
+        if (doc.postcode === cleanPostcode && String(doc.huisnummer) === String(houseNumber)) {
+          addressInfo = {
+            street: doc.straatnaam,
+            city: doc.woonplaatsnaam
+          };
+        }
+      }
+      this.cache.set(cacheKey, addressInfo);
+      return addressInfo;
+    } catch (error) {
+      console.error('PDOK address lookup error:', error);
+      return null;
+    }
+  }
+
+  /**
+   * @description Mock lookup for development/demo (returns mock data for common postcodes)
+   * @param {string} postcode - The Dutch postcode
+   * @param {string|number} houseNumber - The house number
+   * @returns {Promise<{street: string, city: string} | null>} - Address information or null if not found
+   */
+  async lookupAddressMock(postcode, houseNumber) {
+    const cleanPostcode = postcode.replace(/\s/g, '').toUpperCase();
+    const mockData = {
+      '1012JS': {
+        street: 'Dam',
+        city: 'Amsterdam'
+      },
+      '2511CS': {
+        street: 'Binnenhof',
+        city: 'Den Haag'
+      },
+      '3011AD': {
+        street: 'Coolsingel',
+        city: 'Rotterdam'
+      },
+      '3512JE': {
+        street: 'Oudegracht',
+        city: 'Utrecht'
+      },
+      '9712CP': {
+        street: 'Grote Markt',
+        city: 'Groningen'
+      },
+      '5611AG': {
+        street: 'Stratumseind',
+        city: 'Eindhoven'
+      },
+      '6511LN': {
+        street: 'Grote Markt',
+        city: 'Nijmegen'
+      },
+      '4811CE': {
+        street: 'Grote Markt',
+        city: 'Breda'
+      }
+    };
+    await new Promise(resolve => setTimeout(resolve, 500));
+    const addressInfo = mockData[cleanPostcode] || null;
+    if (addressInfo) {
+      console.log("Mock address lookup for ".concat(cleanPostcode, ": ").concat(addressInfo.street, ", ").concat(addressInfo.city));
+    }
+    return addressInfo;
+  }
+
+  /**
+   * @description Main lookup method that tries PDOK API first, then fallback to mock data
+   * @param {string} postcode - The Dutch postcode
+   * @param {string|number} houseNumber - The house number
+   * @returns {Promise<{street: string, city: string} | null>} - Address information or null if not found
+   */
+  async lookup(postcode, houseNumber) {
+    if (!this.isValidPostcode(postcode) || !this.isValidHouseNumber(houseNumber)) {
+      return null;
+    }
+    const cacheKey = this.getCacheKey(postcode, houseNumber);
+    if (this.cache.has(cacheKey)) {
+      return this.cache.get(cacheKey);
+    }
+    let result = null;
+    try {
+      result = await this.lookupAddressPDOK(postcode, houseNumber);
+      if (result) {
+        return result;
+      }
+    } catch (error) {
+      console.warn('PDOK lookup failed, using mock data...');
+    }
+    try {
+      result = await this.lookupAddressMock(postcode, houseNumber);
+    } catch (error) {
+      console.warn('Mock lookup failed');
+    }
+    return result;
+  }
+
+  /**
+   * @description Clears the cache
+   */
+  clearCache() {
+    this.cache.clear();
+  }
+}
+var _default = exports.default = AddressLookupService;

package/package.json

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