thm-p3-configurator 0.0.305 → 0.0.306

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

@@ -121,6 +121,24 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 const licensePlateValidator = new _LicensePlateValidator.default();
+
+// Empty customer state template
+const getEmptyCustomerState = () => ({
+  firstName: '',
+  infix: '',
+  lastName: '',
+  email: '',
+  phoneNumber: '',
+  zipCode: '',
+  houseNumber: '',
+  houseNumberAddition: '',
+  streetName: '',
+  city: '',
+  companyName: '',
+  kvkNumber: '',
+  vatNumber: '',
+  countryId: ''
+});
 const internalQuotationFormSchema = (0, _yup.object)({
   ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   leaseNumber: (0, _yup.string)().nullable(),
@@ -162,7 +180,7 @@ const InternalQuotationForm = _ref => {
   } = _ref;
   const [{
     vehicle,
-    customer,
+    customer: contextCustomer,
     licensePlate,
     licensePlateBrandModel,
     model,
@@ -191,6 +209,97 @@ const InternalQuotationForm = _ref => {
   const [errors, setErrors] = (0, _react.useState)({});
   const [companySearchTerm, setCompanySearchTerm] = (0, _react.useState)('');
   const [isCompanyInputFocused, setIsCompanyInputFocused] = (0, _react.useState)(false);
+  const [refreshKey, setRefreshKey] = (0, _react.useState)(Date.now());
+
+  // 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);
+
+  // Current active ownership type (local state for tab switching)
+  const [activeOwnershipType, setActiveOwnershipType] = (0, _react.useState)(originalOwnershipType);
+
+  // Separate customer state for each ownership type
+  const [customerDataPerType, setCustomerDataPerType] = (0, _react.useState)(() => {
+    const emptyState = getEmptyCustomerState();
+    const initialCustomerData = {
+      firstName: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.firstName) || '',
+      infix: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.infix) || '',
+      lastName: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.lastName) || '',
+      email: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.email) || '',
+      phoneNumber: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.phoneNumber) || '',
+      zipCode: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.zipCode) || '',
+      houseNumber: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.houseNumber) || '',
+      houseNumberAddition: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.houseNumberAddition) || '',
+      streetName: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.streetName) || '',
+      city: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.city) || '',
+      companyName: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.companyName) || '',
+      kvkNumber: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.kvkNumber) || '',
+      vatNumber: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.vatNumber) || '',
+      countryId: (contextCustomer === null || contextCustomer === void 0 ? void 0 : contextCustomer.countryId) || ''
+    };
+
+    // Only the original ownership type gets the initial data
+    return {
+      [_constants__.VEHICLE_OWNERSHIP_TYPE.Particulier]: originalOwnershipType === _constants__.VEHICLE_OWNERSHIP_TYPE.Particulier ? _objectSpread({}, initialCustomerData) : _objectSpread({}, emptyState),
+      [_constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk]: originalOwnershipType === _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk ? _objectSpread({}, initialCustomerData) : _objectSpread({}, emptyState),
+      [_constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij]: originalOwnershipType === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij ? _objectSpread({}, initialCustomerData) : _objectSpread({}, emptyState)
+    };
+  });
+
+  // Get customer data for the active ownership type
+  const customer = customerDataPerType[activeOwnershipType];
+
+  // Helper to update customer data for the active ownership type
+  const updateCustomerField = (0, _react.useCallback)((field, value) => {
+    setCustomerDataPerType(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      [activeOwnershipType]: _objectSpread(_objectSpread({}, prev[activeOwnershipType]), {}, {
+        [field]: value
+      })
+    }));
+  }, [activeOwnershipType]);
+
+  // Sync active ownership type to context when it changes
+  (0, _react.useEffect)(() => {
+    if (activeOwnershipType !== (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType)) {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_OWNERSHIP_TYPE,
+        payload: {
+          ownershipType: activeOwnershipType
+        }
+      });
+    }
+  }, [activeOwnershipType, vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType, dispatch]);
+
+  // Sync customer data to context when it changes (for the active tab)
+  (0, _react.useEffect)(() => {
+    const currentData = customerDataPerType[activeOwnershipType];
+    const actionMap = {
+      firstName: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_FIRST_NAME,
+      infix: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_INFIX,
+      lastName: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_LAST_NAME,
+      email: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_EMAIL,
+      phoneNumber: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_PHONE_NUMBER,
+      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,
+      companyName: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
+      kvkNumber: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
+      vatNumber: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
+      countryId: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID
+    };
+    Object.entries(currentData).forEach(_ref2 => {
+      let [field, value] = _ref2;
+      if (actionMap[field]) {
+        dispatch({
+          type: actionMap[field],
+          payload: {
+            [field]: value
+          }
+        });
+      }
+    });
+  }, [activeOwnershipType, customerDataPerType, dispatch]);
   const [_licensePlate, _setLicensePlate] = (0, _react.useState)(licensePlate);
   const isTmg = (0, _useIsTmg.useIsTmg)();
   const {
@@ -237,7 +346,7 @@ const InternalQuotationForm = _ref => {
     isTowCenterBranch,
     searchTerm: companySearchTerm,
     formula,
-    ownershipType: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
+    ownershipType: activeOwnershipType,
     organisationType: branchType
   });
   const countryOptions = (0, _react.useMemo)(() => {
@@ -308,7 +417,7 @@ const InternalQuotationForm = _ref => {
    */
   const handleSubmit = async () => {
     try {
-      var _customer$firstName, _customer$lastName, _customer$phoneNumber, _customer$houseNumber, _customer$houseNumber2, _customer$streetName, _customer$countryId, _customer$city, _customer$email, _customer$note, _customer$zipCode, _customer$companyName, _ref2;
+      var _customer$firstName, _customer$lastName, _customer$phoneNumber, _customer$houseNumber, _customer$houseNumber2, _customer$streetName, _customer$countryId, _customer$city, _customer$email, _customer$note, _customer$zipCode, _customer$companyName, _ref3;
       setErrors(null);
       if (!model) {
         // Note: this does not throw on error.
@@ -322,7 +431,7 @@ const InternalQuotationForm = _ref => {
       }
 
       // Validate lease number for lease company vehicles
-      if ((vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij) {
+      if (activeOwnershipType === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij) {
         if ((!(vehicle !== null && vehicle !== void 0 && vehicle.leaseNumber) || (vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumber) === '') && !(vehicle !== null && vehicle !== void 0 && vehicle.leaseNumberUnknown)) {
           setErrors(prev => _objectSpread(_objectSpread({}, prev), {}, {
             leaseNumber: _constants__.FORM_ERROR_MESSAGES.leaseNumber || 'Goedkeuringsnummer is verplicht of geef aan dat het onbekend is'
@@ -365,7 +474,7 @@ const InternalQuotationForm = _ref => {
         })),
         chassisNumber: chassisNumber !== null && chassisNumber !== void 0 ? chassisNumber : undefined,
         channel,
-        licensePlate: (_ref2 = licensePlate || _licensePlate) === null || _ref2 === void 0 ? void 0 : _ref2.replace(/-/g, ''),
+        licensePlate: (_ref3 = licensePlate || _licensePlate) === null || _ref3 === void 0 ? void 0 : _ref3.replace(/-/g, ''),
         model,
         answers: (0, _helpers__.removeNullishProps)({
           duration: durationAnswer,
@@ -425,79 +534,11 @@ const InternalQuotationForm = _ref => {
       input.value = '';
     });
 
-    // Display success message
-    setClearSuccess(true);
-
-    // Hide success message after 2 seconds
-    setTimeout(() => {
-      setClearSuccess(false);
-    }, 2000);
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_FIRST_NAME,
-      payload: {
-        firstName: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_INFIX,
-      payload: {
-        infix: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_LAST_NAME,
-      payload: {
-        lastName: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_EMAIL,
-      payload: {
-        email: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_PHONE_NUMBER,
-      payload: {
-        phoneNumber: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-      payload: {
-        zipCode: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-      payload: {
-        houseNumber: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
-      payload: {
-        houseNumberAddition: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
-      payload: {
-        streetName: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
-      payload: {
-        city: ''
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-      payload: {
-        companyName: ''
-      }
-    });
+    // Clear all customer fields in the local state for the active ownership type
+    const emptyState = getEmptyCustomerState();
+    setCustomerDataPerType(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      [activeOwnershipType]: emptyState
+    }));
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row gx-5 mt-3 mt-lg-5')
@@ -526,12 +567,12 @@ const InternalQuotationForm = _ref => {
     placeholder: "Maak een keuze",
     errorMessage: (errors === null || errors === void 0 ? void 0 : errors['channelId']) || (errors === null || errors === void 0 ? void 0 : errors['channelType']),
     initialValue: initialChannel,
-    onChange: _ref3 => {
+    onChange: _ref4 => {
       var _value$kanaalType;
       let {
         label,
         value
-      } = _ref3;
+      } = _ref4;
       return dispatch({
         type: _OrderSessionContext.orderSessionActions.SET_MARKETING_CHANNEL,
         payload: {
@@ -546,14 +587,10 @@ const InternalQuotationForm = _ref => {
     name: "ownershipType",
     form: "quotation",
     label: "Type:",
-    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
+    initialValue: activeOwnershipType,
     onChange: val => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_OWNERSHIP_TYPE,
-        payload: {
-          ownershipType: val
-        }
-      });
+      // Switch to the new ownership type - each type maintains its own separate state
+      setActiveOwnershipType(val);
     },
     options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
     isRequired: true,
@@ -562,7 +599,7 @@ const InternalQuotationForm = _ref => {
     className: (0, _helpers__.withStyle)('my-2')
   }, "Persoonlijke gegevens"), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 mb-2')
-  }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk && /*#__PURE__*/_react.default.createElement("div", {
+  }, activeOwnershipType === _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('company-search-container position-relative mb-3')
   }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "Placeholderbedrijf",
@@ -579,12 +616,7 @@ const InternalQuotationForm = _ref => {
     name: "companyName",
     onChange: value => {
       // Update company name in state
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: value
-        }
-      });
+      updateCustomerField('companyName', value);
 
       // Also update search term if value is different
       if (value !== companySearchTerm) {
@@ -630,77 +662,32 @@ const InternalQuotationForm = _ref => {
     onMouseDown: e => {
       var _branch$vatNumber, _branch$kvkNumber;
       e.preventDefault();
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: branch.name
-        }
-      });
+      updateCustomerField('companyName', branch.name);
       if (branch.postalCode) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-          payload: {
-            zipCode: branch.postalCode
-          }
-        });
+        updateCustomerField('zipCode', branch.postalCode);
       }
       if (branch.street) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
-          payload: {
-            streetName: branch.street
-          }
-        });
+        updateCustomerField('streetName', branch.street);
       }
       if (branch.city) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
-          payload: {
-            city: branch.city
-          }
-        });
+        updateCustomerField('city', branch.city);
       }
       if (branch.street2) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-          payload: {
-            houseNumber: branch.street2
-          }
-        });
+        updateCustomerField('houseNumber', branch.street2);
       }
       const vatNumber = (_branch$vatNumber = branch.vatNumber) !== null && _branch$vatNumber !== void 0 ? _branch$vatNumber : branch.btwNummer;
       if (vatNumber) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
-          payload: {
-            vatNumber
-          }
-        });
+        updateCustomerField('vatNumber', vatNumber);
       }
       const kvkNumber = (_branch$kvkNumber = branch.kvkNumber) !== null && _branch$kvkNumber !== void 0 ? _branch$kvkNumber : branch.kvkNummer;
       if (kvkNumber) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
-          payload: {
-            kvkNumber
-          }
-        });
+        updateCustomerField('kvkNumber', kvkNumber);
       }
       if (branch.huisnummerToevoeging) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
-          payload: {
-            houseNumberAddition: branch.huisnummerToevoeging
-          }
-        });
+        updateCustomerField('houseNumberAddition', branch.huisnummerToevoeging);
       }
       if (branch.country && branch.country.entityId) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
-          payload: {
-            countryId: branch.country.entityId
-          }
-        });
+        updateCustomerField('countryId', branch.country.entityId);
         setRefreshKey(Date.now());
       }
       setCompanySearchTerm('');
@@ -710,12 +697,7 @@ const InternalQuotationForm = _ref => {
     placeholder: "",
     value: customer.firstName,
     name: "firstName",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_FIRST_NAME,
-      payload: {
-        firstName: value
-      }
-    }),
+    onChange: value => updateCustomerField('firstName', value),
     isRequired: true,
     form: "quotation",
     label: "Voornaam:",
@@ -724,12 +706,7 @@ const InternalQuotationForm = _ref => {
     placeholder: "",
     value: customer.infix,
     name: "infix",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_INFIX,
-      payload: {
-        infix: value
-      }
-    }),
+    onChange: value => updateCustomerField('infix', value),
     isRequired: false,
     form: "quotation",
     label: "Tussenvoegsel:",
@@ -738,12 +715,7 @@ const InternalQuotationForm = _ref => {
     placeholder: "",
     value: customer.lastName,
     name: "lastName",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_LAST_NAME,
-      payload: {
-        lastName: value
-      }
-    }),
+    onChange: value => updateCustomerField('lastName', value),
     isRequired: true,
     form: "quotation",
     label: "Achternaam:",
@@ -752,17 +724,12 @@ const InternalQuotationForm = _ref => {
     placeholder: "",
     value: customer.email,
     name: "email",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_EMAIL,
-      payload: {
-        email: value
-      }
-    }),
+    onChange: value => updateCustomerField('email', value),
     isRequired: true,
     form: "quotation",
     label: "E-mailadres:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['email']
-  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement("div", {
+  }), activeOwnershipType === _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...",
@@ -770,12 +737,7 @@ const InternalQuotationForm = _ref => {
     name: "companyName",
     onChange: value => {
       // Update company name in state
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: value
-        }
-      });
+      updateCustomerField('companyName', value);
 
       // Also update search term if value is different
       if (value !== companySearchTerm) {
@@ -835,12 +797,7 @@ const InternalQuotationForm = _ref => {
     placeholder: "",
     value: customer.phoneNumber,
     name: "phoneNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_PHONE_NUMBER,
-      payload: {
-        phoneNumber: value
-      }
-    }),
+    onChange: value => updateCustomerField('phoneNumber', value),
     isRequired: true,
     form: "quotation",
     label: "Telefoonnummer:",
@@ -853,7 +810,7 @@ const InternalQuotationForm = _ref => {
     className: (0, _helpers__.withStyle)('modal-title col-12 mb-2')
   }, "Gegevens van de auto ", /*#__PURE__*/_react.default.createElement("br", null)), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12')
-  }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }, activeOwnershipType === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     value: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumber,
     name: "leaseNumber",

package/package.json

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