thm-p3-configurator 0.0.304 → 0.0.306

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

@@ -9,7 +9,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.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -18,6 +17,7 @@ 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.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
@@ -112,6 +112,23 @@ function _toPrimitive(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
+// Empty customer state template
+const getEmptyCustomerState = () => ({
+  firstName: '',
+  infix: '',
+  lastName: '',
+  email: '',
+  phoneNumber: '',
+  zipCode: '',
+  houseNumber: '',
+  houseNumberAddition: '',
+  streetName: '',
+  city: '',
+  companyName: '',
+  kvkNumber: '',
+  vatNumber: '',
+  countryId: ''
+});
 const customerDetailsFormSchema = (0, _yup.object)({
   singleOrderOwnershipType: (0, _yup.string)().nullable(),
   firstName: (0, _yup.string)().nullable(),
@@ -150,7 +167,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     form = 'customer-details'
   } = _ref;
   const [{
-    customer,
+    customer: contextCustomer,
     channel,
     selectedBranch,
     appointment,
@@ -162,7 +179,6 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     afhalenInWinkel,
     singleOrderFormulaCode
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
-  console;
   const {
     branchById
   } = (0, _queries.useBranchByIdOrWidgetId)(selectedBranch);
@@ -188,6 +204,97 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
   const [isCompanyInputFocused, setIsCompanyInputFocused] = (0, _react.useState)(false);
   const [addressLookupLoading, setAddressLookupLoading] = (0, _react.useState)(false);
   const [addressLookupTimeoutId, setAddressLookupTimeoutId] = (0, _react.useState)(null);
+
+  // Track the original ownership type from context
+  const [originalOwnershipType] = (0, _react.useState)(() => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType) || _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Empty);
+
+  // 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_SINGLE_ORDER_OWNERSHIP_TYPE.Empty]: originalOwnershipType === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Empty ? _objectSpread({}, initialCustomerData) : _objectSpread({}, emptyState),
+      [_constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Particulier]: originalOwnershipType === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Particulier ? _objectSpread({}, initialCustomerData) : _objectSpread({}, emptyState),
+      [_constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Zakelijk]: originalOwnershipType === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Zakelijk ? _objectSpread({}, initialCustomerData) : _objectSpread({}, emptyState)
+    };
+  });
+
+  // Get customer data for the active ownership type
+  const customer = customerDataPerType[activeOwnershipType] || getEmptyCustomerState();
+
+  // 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.singleOrderOwnershipType)) {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE,
+        payload: {
+          singleOrderOwnershipType: activeOwnershipType
+        }
+      });
+    }
+  }, [activeOwnershipType, vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType, dispatch]);
+
+  // Sync customer data to context when it changes (for the active tab)
+  (0, _react.useEffect)(() => {
+    const currentData = customerDataPerType[activeOwnershipType];
+    if (!currentData) return;
+    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 addressLookupService = new _AddressLookupService.default();
   const branchType = branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch = authSession.branch) === null || _authSession$branch === void 0 || (_authSession$branch = _authSession$branch.organisatietype) === null || _authSession$branch === void 0 ? void 0 : _authSession$branch[0]]) === null || _branchTypes$byId$aut === void 0 ? void 0 : _branchTypes$byId$aut.title;
   const {
@@ -199,24 +306,20 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     isLoadingBranchesByType
   } = (0, _queries.useBranchesByType)({
     isTmg,
+    isTowCenterBranch,
     searchTerm: companySearchTerm,
     formula,
-    ownershipType: vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType,
+    ownershipType: activeOwnershipType,
     organisationType: branchType
   });
   (0, _react.useEffect)(() => {
     if (!(customer !== null && customer !== void 0 && customer.countryId) && countryOptions !== null && countryOptions !== void 0 && countryOptions.length) {
       const defaultCountry = countryOptions.find(option => option.label === 'NEDERLAND');
       if (defaultCountry) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
-          payload: {
-            countryId: defaultCountry.value
-          }
-        });
+        updateCustomerField('countryId', defaultCountry.value);
       }
     }
-  }, [customer === null || customer === void 0 ? void 0 : customer.countryId, countryOptions, dispatch]);
+  }, [customer === null || customer === void 0 ? void 0 : customer.countryId, countryOptions, updateCustomerField]);
 
   /**
    * @description Auto-set Partner Portal channel for non-TMG users
@@ -261,13 +364,8 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
         }
       });
       // Set default ownership type to Particulier if not already set
-      if (!(vehicle !== null && vehicle !== void 0 && vehicle.singleOrderOwnershipType) || (vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType) === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Empty) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE,
-          payload: {
-            singleOrderOwnershipType: _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Particulier
-          }
-        });
+      if (!activeOwnershipType || activeOwnershipType === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Empty) {
+        setActiveOwnershipType(_constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Particulier);
       }
     } else {
       dispatch({
@@ -283,7 +381,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
         }
       });
     }
-  }, [isTmg, isTowCenterBranch, dispatch, vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType]);
+  }, [isTmg, isTowCenterBranch, dispatch, activeOwnershipType]);
   const initialChannel = (0, _react.useMemo)(() => {
     if (!(channel !== null && channel !== void 0 && channel.channelId) || !(marketingChannels !== null && marketingChannels !== void 0 && marketingChannels.length)) return null;
     const selectedChannel = 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));
@@ -294,77 +392,27 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
   }, [channel, marketingChannels]);
   const handleAutofillButtonClicked = () => {
     var _branchById$kvkNumber, _branchById$vatNumber, _branchById$country;
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-      payload: {
-        companyName: branchById === null || branchById === void 0 ? void 0 : branchById.name
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-      payload: {
-        zipCode: branchById === null || branchById === void 0 ? void 0 : branchById.postalCode
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
-      payload: {
-        streetName: branchById === null || branchById === void 0 ? void 0 : branchById.street
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
-      payload: {
-        city: branchById === null || branchById === void 0 ? void 0 : branchById.city
-      }
-    });
-    dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-      payload: {
-        houseNumber: branchById === null || branchById === void 0 ? void 0 : branchById.street2
-      }
-    });
+    updateCustomerField('companyName', (branchById === null || branchById === void 0 ? void 0 : branchById.name) || '');
+    updateCustomerField('zipCode', (branchById === null || branchById === void 0 ? void 0 : branchById.postalCode) || '');
+    updateCustomerField('streetName', (branchById === null || branchById === void 0 ? void 0 : branchById.street) || '');
+    updateCustomerField('city', (branchById === null || branchById === void 0 ? void 0 : branchById.city) || '');
+    updateCustomerField('houseNumber', (branchById === null || branchById === void 0 ? void 0 : branchById.street2) || '');
     const kvkNumber = (_branchById$kvkNumber = branchById === null || branchById === void 0 ? void 0 : branchById.kvkNumber) !== null && _branchById$kvkNumber !== void 0 ? _branchById$kvkNumber : branchById === null || branchById === void 0 ? void 0 : branchById.kvkNummer;
     if (kvkNumber) {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
-        payload: {
-          kvkNumber
-        }
-      });
+      updateCustomerField('kvkNumber', kvkNumber);
     }
     const vatNumber = (_branchById$vatNumber = branchById === null || branchById === void 0 ? void 0 : branchById.vatNumber) !== null && _branchById$vatNumber !== void 0 ? _branchById$vatNumber : branchById === null || branchById === void 0 ? void 0 : branchById.btwNummer;
     if (vatNumber) {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
-        payload: {
-          vatNumber
-        }
-      });
+      updateCustomerField('vatNumber', vatNumber);
     }
     if (branchById !== null && branchById !== void 0 && branchById.email) {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_EMAIL,
-        payload: {
-          email: branchById.email
-        }
-      });
+      updateCustomerField('email', branchById.email);
     }
     if (branchById !== null && branchById !== void 0 && branchById.phone) {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_PHONE_NUMBER,
-        payload: {
-          phoneNumber: branchById.phone
-        }
-      });
+      updateCustomerField('phoneNumber', branchById.phone);
     }
     if (branchById !== null && branchById !== void 0 && (_branchById$country = branchById.country) !== null && _branchById$country !== void 0 && _branchById$country.entityId) {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
-        payload: {
-          countryId: branchById.country.entityId
-        }
-      });
+      updateCustomerField('countryId', branchById.country.entityId);
     }
   };
 
@@ -378,18 +426,8 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
       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
-          }
-        });
+        updateCustomerField('streetName', addressInfo.street);
+        updateCustomerField('city', addressInfo.city);
       }
     } catch (error) {
       console.error('Address lookup failed:', error);
@@ -463,7 +501,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
         validationSchema = validationSchema.shape(requiredFields);
       }
       await validationSchema.validate(_objectSpread(_objectSpread({}, customer), {}, {
-        singleOrderOwnershipType: (vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType) || '',
+        singleOrderOwnershipType: activeOwnershipType || '',
         channelType: (channel === null || channel === void 0 ? void 0 : channel.channelType) || '',
         channelId: (channel === null || channel === void 0 ? void 0 : channel.channelId) || ''
       }), {
@@ -513,12 +551,12 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "Maak een keuze",
     errorMessage: (errors === null || errors === void 0 ? void 0 : errors['channelType']) || (errors === null || errors === void 0 ? void 0 : errors['channelId']),
     initialValue: initialChannel,
-    onChange: _ref2 => {
+    onChange: _ref3 => {
       var _value$kanaalType;
       let {
         label,
         value
-      } = _ref2;
+      } = _ref3;
       return dispatch({
         type: _OrderSessionContext.orderSessionActions.SET_MARKETING_CHANNEL,
         payload: {
@@ -532,14 +570,10 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
   })), /*#__PURE__*/_react.default.createElement(_RadioButtons.default, {
     name: "singleOrderOwnershipType",
     label: "Type:",
-    initialValue: (vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType) || (isTmg || isTowCenterBranch ? _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Particulier : _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Empty),
+    initialValue: activeOwnershipType || (isTmg || isTowCenterBranch ? _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Particulier : _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Empty),
     onChange: val => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE,
-        payload: {
-          singleOrderOwnershipType: val
-        }
-      });
+      // Switch to the new ownership type - each type maintains its own separate state
+      setActiveOwnershipType(val);
     },
     options: isTmg || isTowCenterBranch ? Object.values(_constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE).filter(option => option !== _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Empty) : Object.values(_constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE),
     isRequired: isTmg || isTowCenterBranch,
@@ -578,12 +612,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.firstName,
     name: "firstName",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_FIRST_NAME,
-      payload: {
-        firstName: value
-      }
-    }),
+    onChange: value => updateCustomerField('firstName', value),
     isRequired: webshop || anderAfleveradres,
     form: form,
     label: "Voornaam:",
@@ -592,12 +621,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.infix,
     name: "infix",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_INFIX,
-      payload: {
-        infix: value
-      }
-    }),
+    onChange: value => updateCustomerField('infix', value),
     isRequired: false,
     form: form,
     label: "Tussenvoegsel:",
@@ -606,12 +630,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.lastName,
     name: "lastName",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_LAST_NAME,
-      payload: {
-        lastName: value
-      }
-    }),
+    onChange: value => updateCustomerField('lastName', value),
     isRequired: webshop || anderAfleveradres,
     form: form,
     label: "Achternaam:",
@@ -620,12 +639,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.email,
     name: "email",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_EMAIL,
-      payload: {
-        email: value
-      }
-    }),
+    onChange: value => updateCustomerField('email', value),
     isRequired: webshop,
     form: form,
     label: "E-mailadres:",
@@ -634,19 +648,14 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.phoneNumber,
     name: "phoneNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_PHONE_NUMBER,
-      payload: {
-        phoneNumber: value
-      }
-    }),
+    onChange: value => updateCustomerField('phoneNumber', value),
     form: form,
     isRequired: webshop,
     label: "Telefoonnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['phoneNumber']
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 mt-2 col-md-6')
-  }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.singleOrderOwnershipType) === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Zakelijk ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
+  }, activeOwnershipType === _constants__.VEHICLE_SINGLE_ORDER_OWNERSHIP_TYPE.Zakelijk ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
     className: (0, _helpers__.withStyle)('modal-title mb-2')
   }, "Gegevens bedrijf"), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('company-search-container position-relative mb-3')
@@ -664,12 +673,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     initialValue: customer.companyName,
     name: "companyName",
     onChange: value => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: value
-        }
-      });
+      updateCustomerField('companyName', value);
       if (value !== companySearchTerm) {
         setCompanySearchTerm(value);
         setIsCompanyInputFocused(true);
@@ -711,77 +715,32 @@ const InternalCustomerDetailsForm = (_ref, 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);
       }
       setCompanySearchTerm('');
       setIsCompanyInputFocused(false);
@@ -790,12 +749,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.kvkNumber,
     name: "kvkNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
-      payload: {
-        kvkNumber: value
-      }
-    }),
+    onChange: value => updateCustomerField('kvkNumber', value),
     isRequired: false,
     form: form,
     label: "KVK-nummer:",
@@ -804,12 +758,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.vatNumber,
     name: "vatNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
-      payload: {
-        vatNumber: value
-      }
-    }),
+    onChange: value => updateCustomerField('vatNumber', value),
     isRequired: false,
     form: form,
     label: "BTW-nummer:",
@@ -819,12 +768,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     initialValue: customer.zipCode,
     name: "zipCode",
     onChange: value => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-        payload: {
-          zipCode: value
-        }
-      });
+      updateCustomerField('zipCode', value);
       // Trigger address lookup if house number is also available
       if (customer.houseNumber) {
         handleAddressLookup(value, customer.houseNumber);
@@ -839,12 +783,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     initialValue: customer.houseNumber,
     name: "houseNumber",
     onChange: value => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-        payload: {
-          houseNumber: value
-        }
-      });
+      updateCustomerField('houseNumber', value);
       // Trigger address lookup if postcode is also available
       if (customer.zipCode) {
         handleAddressLookup(customer.zipCode, value);
@@ -858,12 +797,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "",
     initialValue: customer.houseNumberAddition,
     name: "houseNumberAddition",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
-      payload: {
-        houseNumberAddition: value
-      }
-    }),
+    onChange: value => updateCustomerField('houseNumberAddition', value),
     isRequired: false,
     form: form,
     label: "Huisnummer toevoeging:",
@@ -872,12 +806,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: addressLookupLoading ? 'Adres wordt opgezocht...' : '',
     initialValue: customer.streetName,
     name: "streetName",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
-      payload: {
-        streetName: value
-      }
-    }),
+    onChange: value => updateCustomerField('streetName', value),
     isRequired: anderAfleveradres,
     form: form,
     label: "Straat:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
@@ -886,12 +815,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: addressLookupLoading ? 'Stad wordt opgezocht...' : '',
     initialValue: customer.city,
     name: "city",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
-      payload: {
-        city: value
-      }
-    }),
+    onChange: value => updateCustomerField('city', value),
     isRequired: anderAfleveradres,
     form: form,
     label: "Stad:".concat(addressLookupLoading ? ' (wordt opgezocht...)' : ''),
@@ -906,16 +830,11 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     placeholder: "Selecteer een land",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['countryId'],
     initialValue: (countryOptions === null || countryOptions === void 0 ? void 0 : countryOptions.find(option => option.value === (customer === null || customer === void 0 ? void 0 : customer.countryId))) || null,
-    onChange: _ref3 => {
+    onChange: _ref4 => {
       let {
         value
-      } = _ref3;
-      return dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
-        payload: {
-          countryId: value
-        }
-      });
+      } = _ref4;
+      return updateCustomerField('countryId', value);
     }
   }))))), !webshop && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12')