thm-p3-configurator 0.0.10 → 0.0.12

package/dist/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "ActiveMarkerProvider", {
     return _ActiveMarkerContext.ActiveMarkerProvider;
   }
 });
-Object.defineProperty(exports, "BranchSelectorModal", {
-  enumerable: true,
-  get: function get() {
-    return _BranchSelectorModal.default;
-  }
-});
 Object.defineProperty(exports, "CountryController", {
   enumerable: true,
   get: function get() {
@@ -33,6 +27,12 @@ Object.defineProperty(exports, "InternalAppointmentPage", {
     return _index.InternalAppointmentPage;
   }
 });
+Object.defineProperty(exports, "InternalBranchSelectorModal", {
+  enumerable: true,
+  get: function get() {
+    return _InternalBranchSelectorModal.default;
+  }
+});
 Object.defineProperty(exports, "InternalExtraProductsPage", {
   enumerable: true,
   get: function get() {
@@ -147,7 +147,7 @@ Object.defineProperty(exports, "useOrderSession", {
     return _OrderSessionContext.useOrderSession;
   }
 });
-var _BranchSelectorModal = _interopRequireDefault(require("./src/shared/__containers__/BranchSelectorModal.js"));
+var _InternalBranchSelectorModal = _interopRequireDefault(require("./src/shared/__containers__/InternalBranchSelectorModal.js"));
 var _StyleWrapper = _interopRequireDefault(require("./src/shared/__containers__/StyleWrapper.js"));
 var _ActiveMarkerContext = require("./src/shared/__context__/ActiveMarkerContext.js");
 var _CountryContext = require("./src/shared/__context__/CountryContext.js");

package/dist/src/shared/App.js

@@ -16,7 +16,7 @@ var _reactQuery = require("react-query");
 var _reactRouterDom = require("react-router-dom");
 var _Navbar = _interopRequireDefault(require("./__components__/Navbar"));
 var _constants__ = require("./__constants__");
-var _BranchSelectorModal = _interopRequireDefault(require("./__containers__/BranchSelectorModal"));
+var _InternalBranchSelectorModal = _interopRequireDefault(require("./__containers__/Internal/InternalBranchSelectorModal"));
 var _SentryWrapper = _interopRequireDefault(require("./__containers__/SentryWrapper"));
 var _StyleWrapper = _interopRequireDefault(require("./__containers__/StyleWrapper"));
 var _ActiveMarkerContext = require("./__context__/ActiveMarkerContext");
@@ -74,6 +74,6 @@ const App = () => {
     defaultCountry: APP_CONFIG.country
   }, /*#__PURE__*/_react.default.createElement(_OrderSessionContext.OrderSessionController, null, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
     client: _queryClient.default
-  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_BranchSelectorModal.default, null), /*#__PURE__*/_react.default.createElement(_pages__.default, null))))))))));
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalBranchSelectorModal.default, null), /*#__PURE__*/_react.default.createElement(_pages__.default, null))))))))));
 };
 var _default = exports.default = App;

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

@@ -30,10 +30,7 @@ orderClient.interceptors.request.use(config => {
   return config;
 });
 const orderApi = exports.orderApi = {
-  getOrder: orderParameters => orderClient(
-  // `api/public/order?${orderParameters}`
-  // TODO: There are CORS issues within Hyper at the moment, if the following doesnt work: uncomment the previous line and comment the next (calls the public custom order API instead of the private)
-  "api".concat(APP_CONFIG.internal ? '' : '/public', "/order?").concat(orderParameters) // Remove the `/public` param if the configurator is internal,
+  getOrder: orderParameters => orderClient("api".concat(APP_CONFIG.internal ? '' : '/public', "/order?").concat(orderParameters) // Remove the `/public` param if the configurator is internal,
   ),
   getBrands: () => orderClient('api/public/makes'),
   getBuildYears: brand => orderClient("api/public/makes/".concat(brand, "/years")),

package/dist/src/shared/__components__/Buttons/PrimaryButton.js

@@ -38,12 +38,13 @@ function _interopRequireWildcard(e, r) {
 const PrimaryButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     type = 'button',
+    isNarrow = false,
     isDisabled,
     onClick,
     label
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _helpers__.withStyle)("btn btn-primary"),
+    className: (0, _helpers__.withStyle)("btn btn-primary ".concat(isNarrow ? 'btn-narrow' : '')),
     type: type,
     ref: ref,
     disabled: isDisabled,

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

@@ -43,6 +43,7 @@ function _interopRequireWildcard(e, r) {
 }
 const CheckboxInput = _ref => {
   let {
+    labelSize = 'sm',
     isRequired,
     name,
     initialValue = false,
@@ -59,7 +60,7 @@ const CheckboxInput = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('form-group')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('form-check')
+    className: (0, _helpers__.withStyle)("form-check form-check--".concat(labelSize))
   }, /*#__PURE__*/_react.default.createElement("input", {
     type: "checkbox",
     id: name,
@@ -71,7 +72,7 @@ const CheckboxInput = _ref => {
       handleChange(isChecked);
     }
   }), /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _helpers__.withStyle)('form-check-label'),
+    className: (0, _helpers__.withStyle)("form-check-label"),
     htmlFor: name
   }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*"))), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
     message: errorMessage

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

@@ -45,7 +45,7 @@ const BORDER_STYLE = 'none';
 const BORDER_WIDTH = 0;
 const MAIN_THEME = '#294795';
 const HEIGHT = '1.8rem';
-const WIDTH = '5.5rem';
+const WIDTH = '6.5rem';
 _reactNumericInput.default.style.input.color = MAIN_THEME;
 _reactNumericInput.default.style.input.height = HEIGHT;
 _reactNumericInput.default.style.input.width = WIDTH;
@@ -69,7 +69,9 @@ const NumericInput = _ref => {
     max = 99,
     isDisabled,
     isRequired,
-    form
+    form,
+    name,
+    label
   } = _ref;
   const [value, setValue] = (0, _react.useState)(defaultValue);
   const inputRef = (0, _react.useRef)();
@@ -77,7 +79,10 @@ const NumericInput = _ref => {
     setValue(value);
     onChange(value);
   };
-  return /*#__PURE__*/_react.default.createElement(_reactNumericInput.default, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: name,
+    className: (0, _helpers__.withStyle)('form-label')
+  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), ' ', /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_reactNumericInput.default, {
     mobile: true,
     strict: true,
     className: (0, _helpers__.withStyle)('form-control react-numeric-input'),
@@ -86,7 +91,7 @@ const NumericInput = _ref => {
     ref: inputRef,
     max: max,
     form: form,
-    maxLength: 2,
+    maxLength: 4,
     required: isRequired,
     onChange: handleChange,
     disabled: isDisabled
@@ -95,7 +100,7 @@ const NumericInput = _ref => {
 
     style: {
       wrap: {
-        width: '5.5rem',
+        width: '6.5rem',
         textAlign: 'center',
         color: '#294795',
         borderRadius: 0.9,
@@ -103,6 +108,6 @@ const NumericInput = _ref => {
         height: HEIGHT
       }
     }
-  });
+  }));
 };
 var _default = exports.default = NumericInput;

package/dist/src/shared/__components__/LocationsSelector/index.js

@@ -10,7 +10,6 @@ exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _reactGoogleMaps = require("@vis.gl/react-google-maps");
 var _react = _interopRequireWildcard(require("react"));
-var _reactStickynode = _interopRequireDefault(require("react-stickynode"));
 var _queries = require("../../__api__/queries");
 var _FormulaContext = require("../../__context__/FormulaContext");
 var _helpers__ = require("../../__helpers__");
@@ -98,9 +97,8 @@ const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
     className: "".concat((0, _helpers__.withStyle)('row gx-5 mt-3 mt-xl-5'))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat((0, _helpers__.withStyle)('content col-xl-8'))
-  }, isDesktop ? /*#__PURE__*/_react.default.createElement(_reactStickynode.default, {
-    top: 90,
-    bottomBoundary: ".".concat((0, _helpers__.withStyle)('dealer-sidebar'))
+  }, isDesktop ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat((0, _helpers__.withStyle)('dealer-map__container'))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat((0, _helpers__.withStyle)('dealer-map'))
   }, /*#__PURE__*/_react.default.createElement(_LocationClusteredMap.default, {

package/dist/src/shared/__constants__/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VEHICLE_OWNERSHIP_TYPE = exports.USER_GEOLOCATION_KEY = exports.PRODUCT_CATEGORIES = exports.ORDER_SESSION_KEY = exports.NAVIGATION_STEPS_INTERNAL = exports.NAVIGATION_STEPS_EXTERNAL = exports.NAVIGATION_BUTTONS = exports.MOUSE_EXIT_INTENT_THROTTLE = exports.MOUSE_EXIT_INTENT_OFFSET = exports.LOCALE = exports.FORM_ERROR_MESSAGES = exports.DEFAULT_MAP_LONGITUDE = exports.DEFAULT_MAP_LATITUDE = exports.CONFIGURATOR_FORMULAS = exports.BOARD_COMPUTER_DISABLED_KEY = exports.AUTH_SESSION_KEY = exports.ARTICLES_SYSTEM_FIELDS = exports.API_ERROR_CODES = exports.ANWB_DISCOUNT_CODE = exports.ALL_EXPERIMENTS = exports.ACTIVE_VARIANTS = void 0;
+exports.VEHICLE_OWNERSHIP_TYPE = exports.USER_GEOLOCATION_KEY = exports.TMG_ORGANIZATION_TYPE = exports.PRODUCT_CATEGORIES = exports.ORDER_SESSION_KEY = exports.NAVIGATION_STEPS_INTERNAL = exports.NAVIGATION_STEPS_EXTERNAL = exports.NAVIGATION_BUTTONS = exports.MOUSE_EXIT_INTENT_THROTTLE = exports.MOUSE_EXIT_INTENT_OFFSET = exports.LOCALE = exports.FORM_ERROR_MESSAGES = exports.DISCOUNT_TYPES = exports.DEFAULT_MAP_LONGITUDE = exports.DEFAULT_MAP_LATITUDE = exports.CONFIGURATOR_FORMULAS = exports.BOARD_COMPUTER_DISABLED_KEY = exports.AUTH_SESSION_KEY = exports.ARTICLES_SYSTEM_FIELDS = exports.API_ERROR_CODES = exports.ANWB_DISCOUNT_CODE = exports.ALL_EXPERIMENTS = exports.ACTIVE_VARIANTS = void 0;
 const USER_GEOLOCATION_KEY = exports.USER_GEOLOCATION_KEY = '_userGeolocation';
 const FORM_ERROR_MESSAGES = exports.FORM_ERROR_MESSAGES = {
   required: 'Verplicht',
@@ -115,10 +115,15 @@ const CONFIGURATOR_FORMULAS = exports.CONFIGURATOR_FORMULAS = {
   THM: 'THM',
   THC: 'THC'
 };
+const TMG_ORGANIZATION_TYPE = exports.TMG_ORGANIZATION_TYPE = 'TowMotive Group';
 const ANWB_DISCOUNT_CODE = exports.ANWB_DISCOUNT_CODE = 'ANWBTHC23';
 const AUTH_SESSION_KEY = exports.AUTH_SESSION_KEY = '__authSession';
 const VEHICLE_OWNERSHIP_TYPE = exports.VEHICLE_OWNERSHIP_TYPE = {
   Particulier: 'Particulier',
   Zakelijk: 'Zakelijk',
   Leasemaatschappij: 'Leasemaatschappij'
+};
+const DISCOUNT_TYPES = exports.DISCOUNT_TYPES = {
+  Percentage: '%',
+  Amount: '€'
 };

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

@@ -121,7 +121,7 @@ const ANWBMembershipValidator = () => {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('container')
+    className: (0, _helpers__.withStyle)('container my-4')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row')
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -124,7 +124,7 @@ const BottomNavigationBar = () => {
       state: {
         prevPathName: history.location.pathname
       },
-      isDisabled: (!selectedCableset || !selectedTowbar) && !selectedCombiset && type === 'next' || (history === null || history === void 0 || (_history$location2 = history.location) === null || _history$location2 === void 0 ? void 0 : _history$location2.pathname) === '/configurator/montagelocatie' && !selectedBranch
+      isDisabled: (!selectedCableset || !selectedTowbar) && !selectedCombiset && type === 'next' || type === 'next' && (history === null || history === void 0 || (_history$location2 = history.location) === null || _history$location2 === void 0 ? void 0 : _history$location2.pathname) === '/configurator/montagelocatie' && !selectedBranch
     }));
   })))));
 };

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

@@ -0,0 +1,90 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _queries = require("../__api__/queries");
+var _NumericInput = _interopRequireDefault(require("../__components__/Form/NumericInput"));
+var _FormulaContext = require("../__context__/FormulaContext");
+var _OrderSessionContext = require("../__context__/OrderSessionContext");
+var _helpers__ = require("../__helpers__");
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+const DiscountProductsSelector = () => {
+  const [{
+    customer,
+    licensePlate,
+    model,
+    answers,
+    durationAnswer,
+    selectedBoardComputer,
+    selectedCableset,
+    selectedCombiset,
+    selectedTowbar,
+    selectedBranch,
+    discountCode,
+    selectedDiscountedProducts
+  }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const formula = (0, _FormulaContext.useFormula)();
+  const {
+    discountProducts
+  } = (0, _queries.useProductsQuery)({
+    licensePlate,
+    model,
+    executionAnswer1: answers === null || answers === void 0 ? void 0 : answers['0'],
+    executionAnswer2: answers === null || answers === void 0 ? void 0 : answers['1'],
+    durationAnswer: durationAnswer,
+    formula,
+    discountCode
+  });
+  const handleProductUpdated = _ref => {
+    let {
+      articleNumber,
+      quantity
+    } = _ref;
+    if (!quantity) {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.REMOVE_DISCOUNTED_PRODUCT,
+        payload: {
+          articleNumber
+        }
+      });
+      return;
+    }
+    dispatch({
+      type: _OrderSessionContext.orderSessionActions.ADD_DISCOUNTED_PRODUCT,
+      payload: {
+        articleNumber,
+        quantity
+      }
+    });
+  };
+  if (!(discountProducts !== null && discountProducts !== void 0 && discountProducts.length)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("ol", null, discountProducts === null || discountProducts === void 0 ? void 0 : discountProducts.map(product => {
+    const selectedProductAmount = selectedDiscountedProducts.find(selectedProduct => (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.articleNumber) === (product === null || product === void 0 ? void 0 : product.articleNumber));
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: product === null || product === void 0 ? void 0 : product.articleNumber
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _helpers__.withStyle)('d-flex justify-content-between')
+    }, ' ', product === null || product === void 0 ? void 0 : product.name, " (", !(product !== null && product !== void 0 && product.price) ? 'Gratis' : (0, _helpers__.formatPrice)(product.price), ")", /*#__PURE__*/_react.default.createElement(_NumericInput.default, {
+      defaultValue: (selectedProductAmount === null || selectedProductAmount === void 0 ? void 0 : selectedProductAmount.quantity) || 0,
+      isDisabled: false,
+      onChange: quantity => handleProductUpdated({
+        quantity,
+        articleNumber: product === null || product === void 0 ? void 0 : product.articleNumber
+      }),
+      min: 0,
+      max: product === null || product === void 0 ? void 0 : product.maxQuantity
+    })));
+  }));
+};
+var _default = exports.default = DiscountProductsSelector;

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

@@ -18,6 +18,7 @@ var _OrderSessionContext = require("../__context__/OrderSessionContext");
 var _helpers__ = require("../__helpers__");
 var _image = require("../__helpers__/image");
 var _ANWBMembershipInput = _interopRequireDefault(require("./ANWBMembershipInput"));
+var _DiscountProductsSelector = _interopRequireDefault(require("./DiscountProductsSelector"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
@@ -65,7 +66,8 @@ const ProductDiscountCard = () => {
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const formula = (0, _FormulaContext.useFormula)();
   const {
-    discountCodeInfo
+    discountCodeInfo,
+    discountProducts
   } = (0, _queries.useProductsQuery)({
     licensePlate,
     model,
@@ -93,20 +95,25 @@ const ProductDiscountCard = () => {
   }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('my-2')
-  }, /*#__PURE__*/_react.default.createElement(_CardWide.default, null, /*#__PURE__*/_react.default.createElement("h5", {
+  }, /*#__PURE__*/_react.default.createElement(_CardWide.default, null, /*#__PURE__*/_react.default.createElement("h4", {
     className: (0, _helpers__.withStyle)('mb-2')
   }, discountCodeInfo === null || discountCodeInfo === void 0 ? void 0 : discountCodeInfo.name), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('container')
+    className: (0, _helpers__.withStyle)('container px-0')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12')
+  }, /*#__PURE__*/_react.default.createElement("ul", null, ((_discountCodeInfo$des = discountCodeInfo === null || discountCodeInfo === void 0 || (_discountCodeInfo$des2 = discountCodeInfo.description) === null || _discountCodeInfo$des2 === void 0 || (_discountCodeInfo$des2 = _discountCodeInfo$des2.ops) === null || _discountCodeInfo$des2 === void 0 || (_discountCodeInfo$des2 = _discountCodeInfo$des2[0]) === null || _discountCodeInfo$des2 === void 0 ? void 0 : _discountCodeInfo$des2.insert) !== null && _discountCodeInfo$des !== void 0 ? _discountCodeInfo$des : '').split('\n').map(line => /*#__PURE__*/_react.default.createElement("li", {
+    key: line
+  }, line))), /*#__PURE__*/_react.default.createElement(_ANWBMembershipInput.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-md-6')
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _helpers__.withStyle)('fw-bold mb-2')
+  }, ' ', "Selecteer de producten"), /*#__PURE__*/_react.default.createElement(_DiscountProductsSelector.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-md-6')
   }, discountImage && /*#__PURE__*/_react.default.createElement("img", {
     src: discountImage,
-    alt: "Discount image",
-    className: (0, _helpers__.withStyle)('my-2')
-  }), /*#__PURE__*/_react.default.createElement("ul", null, ((_discountCodeInfo$des = discountCodeInfo === null || discountCodeInfo === void 0 || (_discountCodeInfo$des2 = discountCodeInfo.description) === null || _discountCodeInfo$des2 === void 0 || (_discountCodeInfo$des2 = _discountCodeInfo$des2.ops) === null || _discountCodeInfo$des2 === void 0 || (_discountCodeInfo$des2 = _discountCodeInfo$des2[0]) === null || _discountCodeInfo$des2 === void 0 ? void 0 : _discountCodeInfo$des2.insert) !== null && _discountCodeInfo$des !== void 0 ? _discountCodeInfo$des : '').split('\n').map(line => /*#__PURE__*/_react.default.createElement("li", {
-    key: line
-  }, line)))))), /*#__PURE__*/_react.default.createElement(_ANWBMembershipInput.default, null)));
+    alt: "Discount image"
+  }))))));
 };
 var _default = exports.default = ProductDiscountCard;

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

@@ -14,6 +14,7 @@ var _ProductTableSectionTotal = _interopRequireDefault(require("../__components_
 var _ProductTableStaticRow = _interopRequireDefault(require("../__components__/ProductTable/ProductTableStaticRow"));
 var _ProductTableTotal = _interopRequireDefault(require("../__components__/ProductTable/ProductTableTotal"));
 var _helpers__ = require("../__helpers__");
+var _InternalDiscountForm = _interopRequireDefault(require("./internal/InternalDiscountForm"));
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
@@ -106,6 +107,6 @@ const ProductCartTable = () => {
       text: (0, _helpers__.formatPrice)(100),
       className: 'fw-bold text-end pt-2'
     }]]
-  })))));
+  }))), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalDiscountForm.default, null)));
 };
 var _default = exports.default = ProductCartTable;

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

@@ -121,10 +121,8 @@ const internalAppointmentFormSchema = (0, _yup.object)({
   ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   leaseNumber: (0, _yup.string)().nullable(),
   firstName: (0, _yup.string)().nullable(),
-  channel: (0, _yup.object)().shape({
-    id: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
-    partnerId: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required)
-  }).required(_constants__.FORM_ERROR_MESSAGES.required),
+  channelId: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  channelPartnerId: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   infix: (0, _yup.string)().nullable(),
   lastName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   email: (0, _yup.string)().email(_constants__.FORM_ERROR_MESSAGES.email).required(_constants__.FORM_ERROR_MESSAGES.required),
@@ -152,6 +150,8 @@ const InternalAppointmentForm = () => {
     selectedBranch,
     appointment,
     discountCode,
+    discountPercentage,
+    discountAmount,
     selectedDiscountedProducts = []
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const [errors, setErrors] = (0, _react.useState)({});
@@ -209,7 +209,8 @@ const InternalAppointmentForm = () => {
 
       // Note: this throws on error.
       internalAppointmentFormSchema.validateSync(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vehicle), customer), appointment), {}, {
-        channel
+        channelId: channel === null || channel === void 0 ? void 0 : channel.id,
+        channelPartnerId: channel === null || channel === void 0 ? void 0 : channel.partnerId
       }), {
         strict: false,
         abortEarly: false
@@ -230,9 +231,11 @@ const InternalAppointmentForm = () => {
           execution1: answers === null || answers === void 0 ? void 0 : answers['0'],
           execution2: answers === null || answers === void 0 ? void 0 : answers['1']
         }),
-        discount: discountCode ? {
-          code: discountCode
-        } : null,
+        discount: (0, _helpers__.removeNullishProps)({
+          code: discountCode,
+          amount: discountAmount,
+          percentage: discountPercentage
+        }),
         formula,
         branchId: selectedBranch,
         selectBoardComputerUpdate: selectedBoardComputer != null,
@@ -311,38 +314,7 @@ const InternalAppointmentForm = () => {
     isDisabled: !branchById
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 mb-2')
-  }, /*#__PURE__*/_react.default.createElement(_RadioButtons.default, {
-    name: "ownershipType",
-    label: "Type:",
-    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
-    onChange: val => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_OWNERSHIP_TYPE,
-        payload: {
-          ownershipType: val
-        }
-      });
-    },
-    options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
-    isRequired: true,
-    errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('col-12 col-md-6')
-  }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
-    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumber,
-    name: "leaseNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_LEASE_NUMBER,
-      payload: {
-        leaseNumber: value
-      }
-    }),
-    isRequired: false,
-    form: "quotation",
-    label: "Code van de leasemaatschappij:",
-    errorMessage: errors === null || errors === void 0 ? void 0 : errors['leaseNumber']
-  }), /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
+  }, /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
     options: marketingChannels === null || marketingChannels === void 0 ? void 0 : marketingChannels.map(channel => ({
       label: channel === null || channel === void 0 ? void 0 : channel.title,
       value: channel
@@ -353,7 +325,7 @@ const InternalAppointmentForm = () => {
     isLoading: isLoadingMarketingChannels,
     noOptionsMessage: "Geen opties beschikbaar",
     placeholder: "Maak een keuze",
-    errorMessage: (errors === null || errors === void 0 ? void 0 : errors['channel.id']) || (errors === null || errors === void 0 ? void 0 : errors['channel.parnterId']),
+    errorMessage: (errors === null || errors === void 0 ? void 0 : errors['channelId']) || (errors === null || errors === void 0 ? void 0 : errors['channelPartnerId']),
     initialValue: () => {
       const foundChannel = marketingChannels.find(marketingC => (marketingC === null || marketingC === void 0 ? void 0 : marketingC.entityId) === (channel === null || channel === void 0 ? void 0 : channel.partnerId));
       return {
@@ -377,6 +349,37 @@ const InternalAppointmentForm = () => {
         }
       });
     }
+  }), /*#__PURE__*/_react.default.createElement(_RadioButtons.default, {
+    name: "ownershipType",
+    label: "Type:",
+    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
+    onChange: val => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_OWNERSHIP_TYPE,
+        payload: {
+          ownershipType: val
+        }
+      });
+    },
+    options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
+    isRequired: true,
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-md-6')
+  }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumber,
+    name: "leaseNumber",
+    onChange: value => dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_LEASE_NUMBER,
+      payload: {
+        leaseNumber: value
+      }
+    }),
+    isRequired: false,
+    form: "quotation",
+    label: "Code van de leasemaatschappij:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['leaseNumber']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     initialValue: customer.firstName,
@@ -527,7 +530,7 @@ const InternalAppointmentForm = () => {
     name: 'Datum',
     isRequired: true,
     label: "Datum",
-    initialValue: new Date(appointment === null || appointment === void 0 ? void 0 : appointment.date),
+    initialValue: appointment !== null && appointment !== void 0 && appointment.data ? new Date(appointment === null || appointment === void 0 ? void 0 : appointment.date) : null,
     isStrict: false,
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['date']
   }), /*#__PURE__*/_react.default.createElement(_TimePickerInput.default, {
@@ -537,7 +540,7 @@ const InternalAppointmentForm = () => {
         time: value
       }
     }),
-    initialValue: new Date(appointment === null || appointment === void 0 ? void 0 : appointment.time),
+    initialValue: appointment !== null && appointment !== void 0 && appointment.time ? new Date(appointment === null || appointment === void 0 ? void 0 : appointment.time) : null,
     name: 'Tijd',
     isRequired: true,
     label: "Tijd",

package/dist/src/shared/__containers__/{BranchSelectorModal.js → internal/InternalBranchSelectorModal.js}

@@ -9,14 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
-var _queries = require("../__api__/queries");
-var _DropdownInput = _interopRequireDefault(require("../__components__/Form/DropdownInput"));
-var _Modal = _interopRequireDefault(require("../__components__/Modal"));
-var _FullPageSpinner = _interopRequireDefault(require("../__components__/Spinners/FullPageSpinner"));
-var _constants__ = require("../__constants__");
-var _FormulaContext = require("../__context__/FormulaContext");
-var _OrderSessionContext = require("../__context__/OrderSessionContext");
-var _LocalStorageWorker = require("../__services__/LocalStorageWorker");
+var _queries = require("../../__api__/queries");
+var _DropdownInput = _interopRequireDefault(require("../../__components__/Form/DropdownInput"));
+var _Modal = _interopRequireDefault(require("../../__components__/Modal"));
+var _FullPageSpinner = _interopRequireDefault(require("../../__components__/Spinners/FullPageSpinner"));
+var _constants__ = require("../../__constants__");
+var _FormulaContext = require("../../__context__/FormulaContext");
+var _OrderSessionContext = require("../../__context__/OrderSessionContext");
+var _LocalStorageWorker = require("../../__services__/LocalStorageWorker");
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
@@ -47,13 +47,13 @@ function _interopRequireWildcard(e, r) {
   }
   return n.default = e, t && t.set(e, n), n;
 }
-const BranchSelectorModal = () => {
-  var _branchTypes$byId$aut, _authSession$branch;
+const InternalBranchSelectorModal = () => {
+  var _branchTypes$byId$aut2, _authSession$branch2;
   const {
     branchTypes,
     isLoadingBranchTypes
   } = (0, _queries.useBranchTypes)();
-  const [selectedBranchId, setSelectedBranchId] = (0, _react.useState)();
+  const [_selectedBranchId, _setSelectedBranchId] = (0, _react.useState)();
   const authSession = _LocalStorageWorker.lsw.getJson(_constants__.AUTH_SESSION_KEY);
   const formula = (0, _FormulaContext.useFormula)();
   const {
@@ -68,16 +68,36 @@ const BranchSelectorModal = () => {
     dispatch({
       type: _OrderSessionContext.orderSessionActions.SET_SELECTED_BRANCH,
       payload: {
-        branchId: selectedBranchId
+        branchId: _selectedBranchId
       }
     });
   };
+  (0, _react.useEffect)(() => {
+    var _branchTypes$byId$aut, _authSession$branch, _myBranches$;
+    // If it's a TMG group, do nothing
+    if ((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) === _constants__.TMG_ORGANIZATION_TYPE) {
+      return;
+    }
+
+    // If no branches found, or more than 1 branch, or if a selected branch already exists: do nothing
+    if (!(myBranches !== null && myBranches !== void 0 && myBranches.length) || (myBranches === null || myBranches === void 0 ? void 0 : myBranches.length) > 1 || selectedBranch) {
+      return;
+    }
+
+    // Set the only branch as the selected branch, which skips the modal
+    dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_SELECTED_BRANCH,
+      payload: {
+        branchId: myBranches === null || myBranches === void 0 || (_myBranches$ = myBranches[0]) === null || _myBranches$ === void 0 ? void 0 : _myBranches$.entityId
+      }
+    });
+  }, [selectedBranch, myBranches, branchTypes, authSession]);
   if (isLoadingBranchTypes) {
     return /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null);
   }
 
   // Note: if the current formula is TowMotive Group, do not show the modal (the branch selection happens on the step before the appointment)
-  if ((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) === 'TowMotive Group') {
+  if ((branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut2 = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch2 = authSession.branch) === null || _authSession$branch2 === void 0 || (_authSession$branch2 = _authSession$branch2.organisatietype) === null || _authSession$branch2 === void 0 ? void 0 : _authSession$branch2[0]]) === null || _branchTypes$byId$aut2 === void 0 ? void 0 : _branchTypes$byId$aut2.title) === _constants__.TMG_ORGANIZATION_TYPE) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_Modal.default, {
@@ -85,7 +105,7 @@ const BranchSelectorModal = () => {
     title: 'Kies een vestiging:',
     size: "wide",
     hasSecondaryButton: false,
-    isPrimaryButtonDisabled: !selectedBranchId,
+    isPrimaryButtonDisabled: !_selectedBranchId,
     primaryButtonText: 'Ga door',
     onPrimaryButtonClicked: handlePrimaryButtonClicked
   }, /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
@@ -104,8 +124,8 @@ const BranchSelectorModal = () => {
         label,
         value
       } = _ref;
-      return setSelectedBranchId(value);
+      return _setSelectedBranchId(value);
     }
   }));
 };
-var _default = exports.default = BranchSelectorModal;
+var _default = exports.default = InternalBranchSelectorModal;

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

@@ -0,0 +1,154 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _LinkButton = _interopRequireDefault(require("../../__components__/Buttons/LinkButton"));
+var _PrimaryButton = _interopRequireDefault(require("../../__components__/Buttons/PrimaryButton"));
+var _DropdownInput = _interopRequireDefault(require("../../__components__/Form/DropdownInput"));
+var _constants__ = require("../../__constants__");
+var _OrderSessionContext = require("../../__context__/OrderSessionContext");
+var _helpers__ = require("../../__helpers__");
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+const InternalDiscountForm = () => {
+  const [{
+    discountAmount,
+    discountPercentage
+  }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const [discountType, setDiscountType] = (0, _react.useState)(discountPercentage ? _constants__.DISCOUNT_TYPES.Percentage : discountAmount ? _constants__.DISCOUNT_TYPES.Amount : null);
+  const [discountValue, setDiscountValue] = (0, _react.useState)(discountType === _constants__.DISCOUNT_TYPES.Amount ? discountAmount : discountPercentage);
+  (0, _react.useEffect)(() => {
+    setDiscountValue((discountType === _constants__.DISCOUNT_TYPES.Amount ? discountAmount : discountPercentage) || '');
+  }, [discountType]);
+
+  /**
+   * @description Parses the discounted value change and sets it:
+   * - If the value is not numerical,
+   */
+  const handleDiscountChange = value => {
+    if (discountType === _constants__.DISCOUNT_TYPES.Percentage) {
+      setDiscountValue(Math.min(value, 100)); // Note: set 100 as max percentage
+
+      return;
+    }
+    setDiscountValue(Number(value));
+  };
+
+  /**
+   * @description Saves the discount:
+   * - as a discountAmount if discount type is of amount
+   * - as a discountPercentage if discount type is of percentage
+   */
+  const handleDiscountSubmit = () => {
+    if (discountType === _constants__.DISCOUNT_TYPES.Amount) {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_DISCOUNT_AMOUNT,
+        payload: {
+          amount: discountValue
+        }
+      });
+      return;
+    }
+    dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_DISCOUNT_PERCENTAGE,
+      payload: {
+        percentage: discountValue
+      }
+    });
+  };
+
+  /**
+   * @description Clears the discount
+   */
+  const handleDiscountClear = () => {
+    setDiscountValue('');
+    dispatch({
+      type: _OrderSessionContext.orderSessionActions.CLEAR_DISCOUNT
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('mx-1')
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: (0, _helpers__.withStyle)('mb-3')
+  }, "Korting:"), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex gap-3')
+  }, /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
+    options: Object.values(_constants__.DISCOUNT_TYPES).map(val => ({
+      label: val,
+      value: val
+    })),
+    name: "brand",
+    label: "Type",
+    isRequired: false,
+    noOptionsMessage: "Geen opties beschikbaar",
+    placeholder: "Maak een keuze",
+    onChange: _ref => {
+      let {
+        value
+      } = _ref;
+      return setDiscountType(value);
+    },
+    initialValue: !discountType ? null : {
+      value: discountType,
+      label: discountType
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex align-items-end gap-2')
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    as: 'input',
+    id: 'discount-value',
+    name: 'discount-value',
+    type: 'number',
+    value: discountValue,
+    disabled: !discountType,
+    onChange: e => handleDiscountChange(e.target.value),
+    required: false,
+    className: "".concat((0, _helpers__.withStyle)('form-control')),
+    max: discountType === _constants__.DISCOUNT_TYPES.Percentage ? 100 : Infinity // Set 100% as max if percentage, otherwise: infinite
+  }), /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
+    isDisabled: !discountValue,
+    onClick: handleDiscountSubmit,
+    label: "Toepassen",
+    isNarrow: true
+  }), /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    isDisabled: !discountAmount && !discountPercentage,
+    onClick: handleDiscountClear,
+    label: "Verwijderen"
+  }))));
+};
+var _default = exports.default = InternalDiscountForm;

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

@@ -116,10 +116,8 @@ const internalQuotationFormSchema = (0, _yup.object)({
   ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   leaseNumber: (0, _yup.string)().nullable(),
   firstName: (0, _yup.string)().nullable(),
-  channel: (0, _yup.object)().shape({
-    id: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
-    partnerId: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required)
-  }).required(_constants__.FORM_ERROR_MESSAGES.required),
+  channelId: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  channelPartnerId: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   infix: (0, _yup.string)().nullable(),
   lastName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   email: (0, _yup.string)().email(_constants__.FORM_ERROR_MESSAGES.email).required(_constants__.FORM_ERROR_MESSAGES.required),
@@ -139,6 +137,8 @@ const InternalQuotationForm = () => {
     selectedTowbar,
     selectedBranch,
     discountCode,
+    discountAmount,
+    discountPercentage,
     selectedDiscountedProducts = [],
     channel
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
@@ -194,7 +194,8 @@ const InternalQuotationForm = () => {
 
       // Note: this throws on error.
       internalQuotationFormSchema.validateSync(_objectSpread(_objectSpread(_objectSpread({}, vehicle), customer), {}, {
-        channel
+        channelId: channel === null || channel === void 0 ? void 0 : channel.id,
+        channelPartnerId: channel === null || channel === void 0 ? void 0 : channel.partnerId
       }), {
         strict: false,
         abortEarly: false
@@ -214,9 +215,11 @@ const InternalQuotationForm = () => {
           execution1: answers === null || answers === void 0 ? void 0 : answers['0'],
           execution2: answers === null || answers === void 0 ? void 0 : answers['1']
         }),
-        discount: discountCode ? {
-          code: discountCode
-        } : null,
+        discount: (0, _helpers__.removeNullishProps)({
+          code: discountCode,
+          amount: discountAmount,
+          percentage: discountPercentage
+        }),
         formula,
         branchId: selectedBranch,
         selectBoardComputerUpdate: selectedBoardComputer != null,
@@ -243,37 +246,7 @@ const InternalQuotationForm = () => {
     title: '',
     isWide: true,
     isNarrow: true
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", null, "Vul het onderstaande formulier in om de offerte naar de klant te sturen"), /*#__PURE__*/_react.default.createElement(_RadioButtons.default, {
-    name: "ownershipType",
-    form: "quotation",
-    label: "Type:",
-    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
-    onChange: val => {
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_OWNERSHIP_TYPE,
-        payload: {
-          ownershipType: val
-        }
-      });
-    },
-    options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
-    isRequired: true,
-    errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
-  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "",
-    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumber,
-    name: "leaseNumber",
-    onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_LEASE_NUMBER,
-      payload: {
-        leaseNumber: value
-      }
-    }),
-    isRequired: false,
-    form: "quotation",
-    label: "Code van de leasemaatschappij:",
-    errorMessage: errors === null || errors === void 0 ? void 0 : errors['leaseNumber']
-  }), /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", null, "Vul het onderstaande formulier in om de offerte naar de klant te sturen"), /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
     options: marketingChannels === null || marketingChannels === void 0 ? void 0 : marketingChannels.map(channel => ({
       label: channel === null || channel === void 0 ? void 0 : channel.title,
       value: channel
@@ -284,7 +257,7 @@ const InternalQuotationForm = () => {
     isLoading: isLoadingMarketingChannels,
     noOptionsMessage: "Geen opties beschikbaar",
     placeholder: "Maak een keuze",
-    errorMessage: (errors === null || errors === void 0 ? void 0 : errors['channel.id']) || (errors === null || errors === void 0 ? void 0 : errors['channel.parnterId']),
+    errorMessage: (errors === null || errors === void 0 ? void 0 : errors['channelId']) || (errors === null || errors === void 0 ? void 0 : errors['channelPartnerId']),
     initialValue: () => {
       const foundChannel = marketingChannels.find(marketingC => (marketingC === null || marketingC === void 0 ? void 0 : marketingC.entityId) === (channel === null || channel === void 0 ? void 0 : channel.partnerId));
       return {
@@ -308,6 +281,36 @@ const InternalQuotationForm = () => {
         }
       });
     }
+  }), /*#__PURE__*/_react.default.createElement(_RadioButtons.default, {
+    name: "ownershipType",
+    form: "quotation",
+    label: "Type:",
+    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
+    onChange: val => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_OWNERSHIP_TYPE,
+        payload: {
+          ownershipType: val
+        }
+      });
+    },
+    options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
+    isRequired: true,
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
+  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.leaseNumber,
+    name: "leaseNumber",
+    onChange: value => dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_LEASE_NUMBER,
+      payload: {
+        leaseNumber: value
+      }
+    }),
+    isRequired: false,
+    form: "quotation",
+    label: "Code van de leasemaatschappij:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['leaseNumber']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     initialValue: customer.firstName,

package/dist/src/shared/__context__/OrderSessionContext.js

@@ -111,6 +111,8 @@ const INITIAL_ORDER_SESSION_STATE = {
     ownershipType: _constants__.VEHICLE_OWNERSHIP_TYPE.Particulier,
     leaseNumber: ''
   },
+  discountAmount: null,
+  discountPercentage: null,
   appointment: {
     date: new Date(),
     time: new Date(),
@@ -137,7 +139,8 @@ const orderSessionActions = exports.orderSessionActions = {
   SET_SELECTED_TOWBAR: 'SET_SELECTED_TOWBAR',
   SET_SELECTED_CABLESET: 'SET_SELECTED_CABLESET',
   SET_SELECTED_COMBISET: 'SET_SELECTED_COMBISET',
-  SET_SELECTED_DISCOUNT_PRODUCTS: 'SET_SELECTED_DISCOUNT_PRODUCTS',
+  ADD_DISCOUNTED_PRODUCT: 'ADD_DISCOUNTED_PRODUCT',
+  REMOVE_DISCOUNTED_PRODUCT: 'REMOVE_DISCOUNTED_PRODUCT',
   ADD_EXTRA: 'ADD_EXTRA',
   REMOVE_EXTRA: 'REMOVE_EXTRA',
   UPDATE_EXTRA_QUANTITY: 'UPDATE_EXTRA_QUANTITY',
@@ -160,7 +163,10 @@ const orderSessionActions = exports.orderSessionActions = {
   SET_CUSTOMER_HOUSE_NUMBER: 'SET_CUSTOMER_HOUSE_NUMBER',
   SET_APPOINTMENT_TIME: 'SET_APPOINTMENT_TIME',
   SET_APPOINTMENT_DATE: 'SET_APPOINTMENT_DATE',
-  SET_APPOINTMENT_NOTE: 'SET_APPOINTMENT_NOTE'
+  SET_APPOINTMENT_NOTE: 'SET_APPOINTMENT_NOTE',
+  SET_DISCOUNT_AMOUNT: 'SET_DISCOUNT_AMOUNT',
+  SET_DISCOUNT_PERCENTAGE: 'SET_DISCOUNT_PERCENTAGE',
+  CLEAR_DISCOUNT: 'CLEAR_DISCOUNT'
 };
 const orderSessionReducer = (state, action) => {
   switch (action.type) {
@@ -541,14 +547,76 @@ const orderSessionReducer = (state, action) => {
           })
         });
       }
-    case orderSessionActions.SET_SELECTED_DISCOUNT_PRODUCTS:
+    case orderSessionActions.REMOVE_DISCOUNTED_PRODUCT:
       {
+        var _state$selectedDiscou;
         const {
-          selectedDiscountedProducts = []
+          articleNumber
         } = action.payload;
-        const discountedProductsWithQuantity = selectedDiscountedProducts.filter(product => product.quantity); // Note: this filters out products with 0 quantity
         return _objectSpread(_objectSpread({}, state), {}, {
-          selectedDiscountedProducts: discountedProductsWithQuantity
+          selectedDiscountedProducts: ((_state$selectedDiscou = state === null || state === void 0 ? void 0 : state.selectedDiscountedProducts) !== null && _state$selectedDiscou !== void 0 ? _state$selectedDiscou : []).filter(product => (product === null || product === void 0 ? void 0 : product.articleNumber) !== articleNumber)
+        });
+      }
+    case orderSessionActions.ADD_DISCOUNTED_PRODUCT:
+      {
+        var _state$selectedDiscou3;
+        const {
+          articleNumber,
+          quantity
+        } = action.payload;
+
+        // Remove the product if no quantity was selected
+        if (!quantity) {
+          var _state$selectedDiscou2;
+          return _objectSpread(_objectSpread({}, state), {}, {
+            selectedDiscountedProducts: ((_state$selectedDiscou2 = state === null || state === void 0 ? void 0 : state.selectedDiscountedProducts) !== null && _state$selectedDiscou2 !== void 0 ? _state$selectedDiscou2 : []).filter(product => (product === null || product === void 0 ? void 0 : product.articleNumber) !== articleNumber)
+          });
+        }
+        const productExistsAlready = ((_state$selectedDiscou3 = state === null || state === void 0 ? void 0 : state.selectedDiscountedProducts) !== null && _state$selectedDiscou3 !== void 0 ? _state$selectedDiscou3 : []).some(product => product.articleNumber === articleNumber);
+        if (productExistsAlready) {
+          var _state$selectedDiscou4;
+          return _objectSpread(_objectSpread({}, state), {}, {
+            selectedDiscountedProducts: state === null || state === void 0 || (_state$selectedDiscou4 = state.selectedDiscountedProducts) === null || _state$selectedDiscou4 === void 0 ? void 0 : _state$selectedDiscou4.map(product => {
+              if (product.articleNumber !== articleNumber) return product;
+              return {
+                articleNumber,
+                quantity
+              };
+            })
+          });
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          selectedDiscountedProducts: [...(state === null || state === void 0 ? void 0 : state.selectedDiscountedProducts), {
+            quantity,
+            articleNumber
+          }]
+        });
+      }
+    case orderSessionActions.SET_DISCOUNT_AMOUNT:
+      {
+        const {
+          amount
+        } = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          discountPercentage: null,
+          discountAmount: amount
+        });
+      }
+    case orderSessionActions.SET_DISCOUNT_PERCENTAGE:
+      {
+        const {
+          percentage
+        } = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          discountPercentage: percentage,
+          discountAmount: null
+        });
+      }
+    case orderSessionActions.CLEAR_DISCOUNT:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          discountPercentage: null,
+          discountAmount: null
         });
       }
     default:

package/dist/src/shared/__pages__/index.js

@@ -90,6 +90,7 @@ var _OverviewPage = _interopRequireDefault(require("./OverviewPage"));
 var _ProductsPage = _interopRequireDefault(require("./ProductsPage"));
 var _QuotationPage = _interopRequireDefault(require("./QuotationPage"));
 var _QuotationThanksPage = _interopRequireDefault(require("./QuotationThanksPage"));
+var _internal = require("./internal");
 function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
@@ -101,7 +102,7 @@ const Routes = () => {
   return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/",
-    render: props => /*#__PURE__*/_react.default.createElement(_LicensePlatePage.default, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalLicensePlatePage, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/geen-producten",
@@ -109,40 +110,40 @@ const Routes = () => {
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/montagelocatie",
-    render: props => /*#__PURE__*/_react.default.createElement(_LocationsPage.default, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalLocationsPage, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/gegevens/bedankt",
-    render: props => /*#__PURE__*/_react.default.createElement(_AppointmentThanksPage.default, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalAppointmentPage, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/offerte/bedankt",
     render: props => /*#__PURE__*/_react.default.createElement(_QuotationThanksPage.default, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     path: "/configurator/trekhaakpakket",
-    render: props => /*#__PURE__*/_react.default.createElement(_ProductsPage.default, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalProductsPage, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     path: "/configurator/manual",
-    render: props => /*#__PURE__*/_react.default.createElement(_ManualSelectionPage.default, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalManualSelectionPage, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/overzicht",
-    render: props => /*#__PURE__*/_react.default.createElement(_OverviewPage.default, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalOverviewPage, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/offerte",
-    render: props => /*#__PURE__*/_react.default.createElement(_QuotationPage.default, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalQuotationPage, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/gegevens",
-    render: props => /*#__PURE__*/_react.default.createElement(_AppointmentPage.default, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalAppointmentPage, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/toebehoren",
-    render: props => /*#__PURE__*/_react.default.createElement(_ExtraProductsPage.default, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalExtraProductsPage, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     path: "/configurator",
-    render: props => /*#__PURE__*/_react.default.createElement(_LicensePlatePage.default, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalLicensePlatePage, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     path: "/niet-gevonden",
     render: () => /*#__PURE__*/_react.default.createElement(_NotFoundPage.default, null)

package/dist/src/shared/__pages__/internal/InternalLocationsPage.js

@@ -62,7 +62,7 @@ const InternalLocationsPage = _ref => {
   (0, _react.useEffect)(() => {
     var _branchTypes$byId$aut, _authSession$branch, _location$state;
     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;
-    if (!branchType || branchType === 'TowMotive Group') {
+    if (!branchType || branchType === _constants__.TMG_ORGANIZATION_TYPE) {
       return;
     }
 

package/dist/src/shared/__style__/components/_buttons.scss

@@ -29,6 +29,14 @@ Button Link
   opacity: 0.25;
 }
 
+/* ==========================================================================
+Narrow button
+========================================================================== */
+
+.btn-narrow {
+  padding: 0.625rem 1.25rem;
+}
+
 /* ==========================================================================
 Button Check
 ========================================================================== */

package/dist/src/shared/__style__/components/dealer/_dealer-item.scss

@@ -11,7 +11,13 @@ Dealer Item
     margin-bottom: 0 !important;
   }
 
-  .form-check {
+  .form-check--lg {
+    @extend .text-primary;
+
+    @include font-size($font-size-lg);
+  }
+
+  .form-check--sm {
     @extend .text-primary;
 
     @include font-size($font-size-sm);

package/dist/src/shared/__style__/components/dealer/_dealer-map.scss

@@ -12,6 +12,12 @@ Dealer Map
   }
 }
 
+.dealer-map__container {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 90px;
+}
+
 /* ==========================================================================
 Dealer Map Infowindow
 ========================================================================== */

package/dist/src/shared/__style__/components/form/_form-radio.scss

@@ -12,6 +12,7 @@ Form Radio Item
   @extend .mb-0;
 
   flex: 0 0 50% !important;
+  z-index: 0 !important;
 
   &--flexible {
     flex: auto !important;

package/dist/src/shared/__style__/configurator/_configurator-thc.scss

@@ -3,6 +3,10 @@ Configurator THC theme
 ========================================================================== */
 
 .thc {
+  .hero {
+    @extend .align-items-center, .bg-custom-primary, .d-flex, .text-white;
+  }
+
   .btn-primary {
     @extend .btn-custom-primary, .text-white;
   }
@@ -35,7 +39,14 @@ Configurator THC theme
     }
   }
 
+  .form-check--sm {
+    @extend .text-primary;
+
+    @include font-size($font-size-sm);
+  }
+
   .form-check {
+    @include font-size($font-size-base);
     @extend .text-custom-primary;
 
     color: $custom-primary;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thm-p3-configurator",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "EnoRm.",
@@ -35,37 +35,22 @@
     "date-fns": "^2.23.0",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
-    "formik": "^2.2.9",
-    "formik-persist": "^1.1.0",
-    "google-maps-react": "^2.0.6",
-    "imagekitio-react": "^1.0.10",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "node-gyp": "^10.0.1",
     "path": "^0.12.7",
-    "prop-types": "^15.7.2",
-    "query-string": "^7.0.1",
     "react": "^17.0.2",
-    "react-cookiebot": "^1.0.10",
     "react-datepicker": "^4.2.0",
-    "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-gtm-module": "^2.0.11",
     "react-lottie": "^1.2.3",
     "react-numeric-input": "^2.2.3",
-    "react-paginate": "^8.1.3",
-    "react-places-autocomplete": "^7.3.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^2.4.3",
     "react-select": "^4.3.1",
-    "react-stickynode": "^4.0.0",
     "react-truncate": "^2.4.0",
     "sass": "^1.69.5",
     "slugify": "^1.6.5",
-    "universal-cookie": "^4.0.4",
-    "use-local-storage-state": "^11.0.0",
-    "xml-js": "^1.6.11",
     "yup": "^0.32.9"
   },
   "devDependencies": {