thm-p3-configurator 0.0.203 → 0.0.205

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", {
@@ -1129,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:",
@@ -1143,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:",
@@ -1168,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({
@@ -1179,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({
@@ -1193,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'),
@@ -1221,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:",
@@ -1235,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:",
@@ -1260,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({
@@ -1271,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({
@@ -1285,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'),
@@ -1327,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:",
@@ -1341,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:",
@@ -1366,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({
@@ -1377,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({
@@ -1391,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,138 @@
+"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 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);
+      console.log('looking up address with PDOK');
+      if (result) {
+        return result;
+      }
+    } catch (error) {
+      console.warn('PDOK lookup failed, using mock data...');
+    }
+    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.203",
+  "version": "0.0.205",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "EnoRm.",