thm-p3-configurator 0.0.36 → 0.0.38

package/dist/src/shared/App.js

@@ -69,7 +69,7 @@ const App = () => {
     (0, _Experiments.default)();
   });
   return /*#__PURE__*/_react.default.createElement(_SentryWrapper.default, null, /*#__PURE__*/_react.default.createElement(_FormulaContext.FormulaController, {
-    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THM
+    defaultFormula: _constants__.CONFIGURATOR_FORMULAS.THC
   }, /*#__PURE__*/_react.default.createElement(_CountryContext.CountryController, {
     defaultCountry: APP_CONFIG.country
   }, /*#__PURE__*/_react.default.createElement(_OrderSessionContext.OrderSessionController, null, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {

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

@@ -171,7 +171,7 @@ const useProductsQuery = orderParameters => {
  */
 exports.useProductsQuery = useProductsQuery;
 const useQuestionsQuery = questionParams => {
-  var _questionsQuery$error, _questionsQuery$data$, _questionsQuery$data, _questionsQuery$data$2, _questionsQuery$data2, _questionsQuery$data$3, _questionsQuery$data3;
+  var _questionsQuery$data, _questionsQuery$data2, _questionsQuery$data3, _questionsQuery$error, _questionsQuery$data$, _questionsQuery$data4, _questionsQuery$data$2, _questionsQuery$data5, _questionsQuery$data$3, _questionsQuery$data6;
   const {
     licensePlate,
     model
@@ -180,21 +180,27 @@ const useQuestionsQuery = questionParams => {
   const questionsQuery = (0, _reactQuery.useQuery)(['questions', questionsParamsString], {
     enabled: (licensePlate === null || licensePlate === void 0 ? void 0 : licensePlate.length) > 5 || !!(model !== null && model !== void 0 && model.length),
     queryFn: () => _orderApi.orderApi.getOrder(questionsParamsString).then(res => {
-      var _res$data5, _res$data6, _res$data7;
+      var _res$data5, _res$data6, _res$data7, _res$data8, _res$data9, _res$data10;
       return {
-        durationQuestion: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data5 = res.data) === null || _res$data5 === void 0 || (_res$data5 = _res$data5.data) === null || _res$data5 === void 0 ? void 0 : _res$data5.durationAnswerOptions),
-        execution1AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data6 = res.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.executionAnswerOptions) === null || _res$data6 === void 0 ? void 0 : _res$data6.execution1AnswerOptions),
-        execution2AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data7 = res.data) === null || _res$data7 === void 0 || (_res$data7 = _res$data7.data) === null || _res$data7 === void 0 || (_res$data7 = _res$data7.executionAnswerOptions) === null || _res$data7 === void 0 ? void 0 : _res$data7.execution2AnswerOptions)
+        execution1Answer: res === null || res === void 0 || (_res$data5 = res.data) === null || _res$data5 === void 0 || (_res$data5 = _res$data5.data) === null || _res$data5 === void 0 || (_res$data5 = _res$data5.answers) === null || _res$data5 === void 0 ? void 0 : _res$data5.execution1,
+        execution2Answer: res === null || res === void 0 || (_res$data6 = res.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.data) === null || _res$data6 === void 0 || (_res$data6 = _res$data6.answers) === null || _res$data6 === void 0 ? void 0 : _res$data6.execution2,
+        durationAnswer: res === null || res === void 0 || (_res$data7 = res.data) === null || _res$data7 === void 0 || (_res$data7 = _res$data7.data) === null || _res$data7 === void 0 || (_res$data7 = _res$data7.answers) === null || _res$data7 === void 0 ? void 0 : _res$data7.duration,
+        durationQuestion: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data8 = res.data) === null || _res$data8 === void 0 || (_res$data8 = _res$data8.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.durationAnswerOptions),
+        execution1AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data9 = res.data) === null || _res$data9 === void 0 || (_res$data9 = _res$data9.data) === null || _res$data9 === void 0 || (_res$data9 = _res$data9.executionAnswerOptions) === null || _res$data9 === void 0 ? void 0 : _res$data9.execution1AnswerOptions),
+        execution2AnswerOptions: (0, _helpers__.parseArrayToInputOptions)(res === null || res === void 0 || (_res$data10 = res.data) === null || _res$data10 === void 0 || (_res$data10 = _res$data10.data) === null || _res$data10 === void 0 || (_res$data10 = _res$data10.executionAnswerOptions) === null || _res$data10 === void 0 ? void 0 : _res$data10.execution2AnswerOptions)
       };
     })
   });
   return {
     isLoadingQuestions: questionsQuery.isFetching,
     isQuestionsError: questionsQuery.isError,
+    execution1Answer: questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data = questionsQuery.data) === null || _questionsQuery$data === void 0 ? void 0 : _questionsQuery$data.execution1Answer,
+    execution2Answer: questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data2 = questionsQuery.data) === null || _questionsQuery$data2 === void 0 ? void 0 : _questionsQuery$data2.execution2Answer,
+    durationAnswer: questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data3 = questionsQuery.data) === null || _questionsQuery$data3 === void 0 ? void 0 : _questionsQuery$data3.durationAnswer,
     questionsError: ((_questionsQuery$error = questionsQuery.error) === null || _questionsQuery$error === void 0 || (_questionsQuery$error = _questionsQuery$error.response) === null || _questionsQuery$error === void 0 || (_questionsQuery$error = _questionsQuery$error.data) === null || _questionsQuery$error === void 0 ? void 0 : _questionsQuery$error.code) || questionsQuery.error,
-    execution1AnswerOptions: (_questionsQuery$data$ = questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data = questionsQuery.data) === null || _questionsQuery$data === void 0 ? void 0 : _questionsQuery$data.execution1AnswerOptions) !== null && _questionsQuery$data$ !== void 0 ? _questionsQuery$data$ : [],
-    execution2AnswerOptions: (_questionsQuery$data$2 = questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data2 = questionsQuery.data) === null || _questionsQuery$data2 === void 0 ? void 0 : _questionsQuery$data2.execution2AnswerOptions) !== null && _questionsQuery$data$2 !== void 0 ? _questionsQuery$data$2 : [],
-    durationQuestion: (_questionsQuery$data$3 = questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data3 = questionsQuery.data) === null || _questionsQuery$data3 === void 0 ? void 0 : _questionsQuery$data3.durationQuestion) !== null && _questionsQuery$data$3 !== void 0 ? _questionsQuery$data$3 : []
+    execution1AnswerOptions: (_questionsQuery$data$ = questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data4 = questionsQuery.data) === null || _questionsQuery$data4 === void 0 ? void 0 : _questionsQuery$data4.execution1AnswerOptions) !== null && _questionsQuery$data$ !== void 0 ? _questionsQuery$data$ : [],
+    execution2AnswerOptions: (_questionsQuery$data$2 = questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data5 = questionsQuery.data) === null || _questionsQuery$data5 === void 0 ? void 0 : _questionsQuery$data5.execution2AnswerOptions) !== null && _questionsQuery$data$2 !== void 0 ? _questionsQuery$data$2 : [],
+    durationQuestion: (_questionsQuery$data$3 = questionsQuery === null || questionsQuery === void 0 || (_questionsQuery$data6 = questionsQuery.data) === null || _questionsQuery$data6 === void 0 ? void 0 : _questionsQuery$data6.durationQuestion) !== null && _questionsQuery$data$3 !== void 0 ? _questionsQuery$data$3 : []
   };
 };
 

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

@@ -16,6 +16,7 @@ const ErrorMessage = _ref => {
     message
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
+    name: 'error-message',
     className: (0, _helpers__.withStyle)('text-danger small')
   }, message);
 };

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

@@ -175,10 +175,10 @@ const AppointmentForm = () => {
           execution1: executionAnswer1,
           execution2: executionAnswer2
         }),
-        customer: _objectSpread(_objectSpread({}, customer), {}, {
+        customer: (0, _helpers__.removeNullishProps)(_objectSpread(_objectSpread({}, customer), {}, {
           firstName: (customer === null || customer === void 0 ? void 0 : customer.firstName) || '(Onbekend)',
           lastName: (customer === null || customer === void 0 ? void 0 : customer.lastName) || '(Onbekend)'
-        }),
+        })),
         formula,
         branchId: selectedBranch,
         selectBoardComputerUpdate: selectedBoardComputer != null,
@@ -333,7 +333,7 @@ const AppointmentForm = () => {
   }), /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
     onClick: handleSubmit,
     isDisabled: isCreatingAppointmentRequest,
-    label: 'Afspraak maken'
+    label: 'Afspraak maaken'
   }))));
 };
 var _default = exports.default = AppointmentForm;

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

@@ -25,7 +25,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _yup = require("yup");
 var _mutations = require("../__api__/mutations");
-var _queries = require("../__api__/queries");
 var _LinkButton = _interopRequireDefault(require("../__components__/Buttons/LinkButton"));
 var _PrimaryButton = _interopRequireDefault(require("../__components__/Buttons/PrimaryButton"));
 var _Card = _interopRequireDefault(require("../__components__/Cards/Card"));
@@ -138,18 +137,9 @@ const ExitIntentModal = () => {
     selectedDiscountedProducts = []
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const formula = (0, _FormulaContext.useFormula)();
-  const {
-    vehicleDetails
-  } = (0, _queries.useProductsQuery)({
-    licensePlate,
-    model,
-    executionAnswer1,
-    executionAnswer2,
-    durationAnswer: durationAnswer,
-    formula,
-    discountCode,
-    priceCalculationDate
-  });
+  (0, _react.useEffect)(() => {
+    (0, _ui.scrollToFirstErrorMessage)();
+  }, [errors]);
   const handleMouseLeave = event => {
     if (document.cookie.includes('exitIntentModalShown=true')) {
       return;

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

@@ -3,8 +3,10 @@
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.string.search.js");
+require("core-js/modules/es.weak-map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.url-search-params.js");
+require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,7 +16,7 @@ require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.string.search.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.url-search-params.js");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _queries = require("../__api__/queries");
 var _LinkButton = _interopRequireDefault(require("../__components__/Buttons/LinkButton"));
@@ -28,9 +30,35 @@ function _interopRequireDefault(e) {
     default: e
   };
 }
+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 ManualSelectionForm = _ref => {
   let {
-    onSubmit
+    onSubmit,
+    initialValues = null
   } = _ref;
   const [{
     brand,
@@ -71,6 +99,19 @@ const ManualSelectionForm = _ref => {
     history.push("/configurator".concat(searchParams !== null && searchParams !== void 0 && searchParams.size ? "?".concat(searchParams.toString()) : '') // append search params if found
     );
   };
+  (0, _react.useEffect)(() => {
+    if (initialValues) {
+      handleBrandChange({
+        value: initialValues.brand
+      });
+      handleBuildYearChange({
+        value: initialValues.buildYear
+      });
+      handleModelChange({
+        value: initialValues.model
+      });
+    }
+  }, [initialValues]);
   const handleBrandChange = brandOption => {
     dispatch({
       type: _OrderSessionContext.orderSessionActions.SET_BRAND,
@@ -106,7 +147,10 @@ const ManualSelectionForm = _ref => {
     noOptionsMessage: "Geen opties beschikbaar",
     placeholder: "Maak een keuze",
     onChange: handleBrandChange,
-    initialValue: !brand ? null : {
+    initialValue: !brand ? {
+      value: initialValues === null || initialValues === void 0 ? void 0 : initialValues.brand,
+      label: initialValues === null || initialValues === void 0 ? void 0 : initialValues.brand
+    } : {
       value: brand,
       label: brand
     }
@@ -119,7 +163,10 @@ const ManualSelectionForm = _ref => {
     noOptionsMessage: "Geen opties beschikbaar",
     placeholder: "Maak een keuze",
     onChange: handleBuildYearChange,
-    initialValue: !buildYear ? null : {
+    initialValue: !buildYear ? {
+      value: initialValues === null || initialValues === void 0 ? void 0 : initialValues.buildYear,
+      label: initialValues === null || initialValues === void 0 ? void 0 : initialValues.buildYear
+    } : {
       value: buildYear,
       label: buildYear
     }
@@ -132,7 +179,10 @@ const ManualSelectionForm = _ref => {
     noOptionsMessage: "Geen opties beschikbaar",
     placeholder: "Maak een keuze",
     onChange: handleModelChange,
-    initialValue: !model ? null : {
+    initialValue: !model ? {
+      value: initialValues === null || initialValues === void 0 ? void 0 : initialValues.model,
+      label: initialValues === null || initialValues === void 0 ? void 0 : initialValues.model
+    } : {
       value: model,
       label: model
     }

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

@@ -203,7 +203,7 @@ const ProductsOverview = () => {
           key: product.articleNumber,
           id: product.articleNumber,
           description: (0, _product.formatHyperDescription)(product === null || product === void 0 ? void 0 : product.description),
-          title: product === null || product === void 0 ? void 0 : product.title,
+          title: product === null || product === void 0 ? void 0 : product.subgroupName,
           price: product === null || product === void 0 ? void 0 : product.price
         });
       }
@@ -212,7 +212,7 @@ const ProductsOverview = () => {
         hasCheckbox: (productsPerCategory === null || productsPerCategory === void 0 ? void 0 : productsPerCategory.length) > 1,
         isRecommended: isRecommended,
         productId: product === null || product === void 0 ? void 0 : product.articleNumber,
-        productTitle: product === null || product === void 0 ? void 0 : product.title,
+        productTitle: product === null || product === void 0 ? void 0 : product.subgroupName,
         productDescription: product === null || product === void 0 ? void 0 : product.productDescription,
         productUsps: [{
           type: 'excl',

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

@@ -71,6 +71,7 @@ const QuestionsForm = _ref => {
     isLoadingQuestions,
     execution1AnswerOptions,
     execution2AnswerOptions,
+    durationAnswer: durationAnswerPrefilled,
     questionsError,
     durationQuestion
   } = (0, _queries.useQuestionsQuery)({
@@ -93,6 +94,19 @@ const QuestionsForm = _ref => {
     priceCalculationDate
   }); // Prefetch
 
+  /**
+   * @description This hook pre-fills the duration answer, only if it comes pre-filled from the API, and it's not set manually by the user.
+   */
+  (0, _react.useEffect)(() => {
+    if (!durationAnswer && durationAnswerPrefilled && !(durationOptions !== null && durationOptions !== void 0 && durationOptions.length) && !(durationQuestion !== null && durationQuestion !== void 0 && durationQuestion.length)) {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_DURATION_ANSWER,
+        payload: {
+          answer: durationAnswerPrefilled
+        }
+      });
+    }
+  }, [durationOptions, durationAnswerPrefilled, durationQuestion, durationAnswer]);
   (0, _react.useEffect)(() => {
     if (durationQuestion !== null && durationQuestion !== void 0 && durationQuestion.length) {
       dispatch({

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

@@ -20,7 +20,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
 var _yup = require("yup");
 var _mutations = require("../__api__/mutations");
-var _queries = require("../__api__/queries");
 var _NavigationButton = _interopRequireDefault(require("../__components__/Buttons/NavigationButton"));
 var _PrimaryButton = _interopRequireDefault(require("../__components__/Buttons/PrimaryButton"));
 var _Card = _interopRequireDefault(require("../__components__/Cards/Card"));
@@ -32,6 +31,7 @@ var _FormulaContext = require("../__context__/FormulaContext");
 var _OrderSessionContext = require("../__context__/OrderSessionContext");
 var _helpers__ = require("../__helpers__");
 var _product = require("../__helpers__/product");
+var _ui = require("../__helpers__/ui");
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -138,18 +138,9 @@ const QuotationForm = () => {
     isCreatingQuotation
   } = (0, _mutations.useCreateQuotationMutation)();
   const formula = (0, _FormulaContext.useFormula)();
-  const {
-    vehicleDetails,
-    vehicleLogo
-  } = (0, _queries.useProductsQuery)({
-    licensePlate,
-    model,
-    executionAnswer1,
-    executionAnswer2,
-    durationAnswer: durationAnswer,
-    formula,
-    discountCode
-  });
+  (0, _react.useEffect)(() => {
+    (0, _ui.scrollToFirstErrorMessage)();
+  }, [errors]);
   const handleSubmit = async () => {
     try {
       setErrors(null);
@@ -172,7 +163,7 @@ const QuotationForm = () => {
           code: discountCode
         } : null,
         formula,
-        customer,
+        customer: (0, _helpers__.removeNullishProps)(customer),
         branchId: selectedBranch,
         selectBoardComputerUpdate: selectedBoardComputer != null,
         cart: (0, _product.validateCartInput)([{

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

@@ -32,7 +32,8 @@ const VehicleData = () => {
     executionAnswer2,
     durationAnswer,
     discountCode,
-    priceCalculationDate
+    priceCalculationDate,
+    existingDossierId
   }] = (0, _OrderSessionContext.useOrderSession)();
   const formula = (0, _FormulaContext.useFormula)();
   const {
@@ -71,7 +72,7 @@ const VehicleData = () => {
       isDisabled: false,
       label: 'Wijzig voertuig',
       onClick: () => {
-        history.push("/configurator".concat(licensePlate ? '' : '/manual'));
+        history.push("/configurator".concat(licensePlate ? '' : '/manual', "?persistSession=true"));
       },
       className: (0, _helpers__.withStyle)('license-plate__edit link-primary col-12'),
       type: "button"

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

@@ -44,6 +44,7 @@ var _FormulaContext = require("../../__context__/FormulaContext");
 var _OrderSessionContext = require("../../__context__/OrderSessionContext");
 var _helpers__ = require("../../__helpers__");
 var _product = require("../../__helpers__/product");
+var _ui = require("../../__helpers__/ui");
 var _LicensePlateValidator = _interopRequireDefault(require("../../__services__/LicensePlateValidator"));
 var _LocalStorageWorker = require("../../__services__/LocalStorageWorker");
 var _InternalAppointmentSuccessModal = _interopRequireDefault(require("./InternalAppointmentSuccessModal"));
@@ -183,18 +184,9 @@ const InternalAppointmentForm = _ref => {
   } = (0, _queries.useBranchByIdOrWidgetId)(selectedBranch);
   const history = (0, _reactRouter.useHistory)();
   const formula = (0, _FormulaContext.useFormula)();
-  const {
-    vehicleDetails
-  } = (0, _queries.useProductsQuery)({
-    licensePlate,
-    model,
-    executionAnswer1,
-    executionAnswer2,
-    durationAnswer: durationAnswer,
-    formula,
-    discountCode,
-    priceCalculationDate
-  });
+  (0, _react.useEffect)(() => {
+    (0, _ui.scrollToFirstErrorMessage)();
+  }, [errors]);
 
   /**
    * @description Handles the validation of the license plate, if the session has not been started with a license  plate
@@ -211,7 +203,7 @@ const InternalAppointmentForm = _ref => {
   const handleSubmit = async () => {
     try {
       var _ref2;
-      setErrors(null);
+      setErrors([]);
 
       // Note: this does not throw on error.
       const licensePlateErrors = validateLicensePlate();
@@ -223,9 +215,14 @@ const InternalAppointmentForm = _ref => {
       }
 
       // Note: this throws on error.
-      internalAppointmentFormSchema.validateSync(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, vehicle), customer), appointment), {}, {
-        channelType: channel === null || channel === void 0 ? void 0 : channel.channelType,
-        channelId: channel === null || channel === void 0 ? void 0 : channel.channelId
+      internalAppointmentFormSchema.validateSync(_objectSpread(_objectSpread(_objectSpread({}, vehicle), customer), {}, {
+        // Note: add string fallback here to prevent null check in Yup throwing weird errors
+        // However: dont submit empty strings to the API because the API doesnt accept empty strings in place of `undefined`
+        // Rule in custom API: a field can be optional (can be undefined), but once you fill it in with a value, that value has to be truthy.
+        date: (appointment === null || appointment === void 0 ? void 0 : appointment.date) || '',
+        time: (appointment === null || appointment === void 0 ? void 0 : appointment.time) || '',
+        channelType: (channel === null || channel === void 0 ? void 0 : channel.channelType) || '',
+        channelId: (channel === null || channel === void 0 ? void 0 : channel.channelId) || ''
       }), {
         strict: false,
         abortEarly: false
@@ -531,7 +528,7 @@ const InternalAppointmentForm = _ref => {
     initialValue: _licensePlate,
     name: "licensePlate",
     onChange: value => _setLicensePlate(value),
-    isRequired: true,
+    isRequired: false,
     form: "quotation",
     label: "Kenteken:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['licensePlate']
@@ -573,10 +570,10 @@ const InternalAppointmentForm = _ref => {
     className: (0, _helpers__.withStyle)('col-12 col-md-6')
   }, /*#__PURE__*/_react.default.createElement(_TextAreaInput.default, {
     placeholder: "",
-    initialValue: appointment === null || appointment === void 0 ? void 0 : appointment.note,
+    initialValue: customer === null || customer === void 0 ? void 0 : customer.note,
     name: "note",
     onChange: value => dispatch({
-      type: _OrderSessionContext.orderSessionActions.SET_APPOINTMENT_NOTE,
+      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_NOTE,
       payload: {
         note: value
       }
@@ -601,7 +598,7 @@ const InternalAppointmentForm = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
     onClick: handleSubmit,
     isDisabled: isLoading,
-    label: 'Afspraak maken'
+    label: 'Afspraak maaken'
   }))), /*#__PURE__*/_react.default.createElement(_InternalAppointmentSuccessModal.default, {
     isOpen: isSuccess
   }));

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

@@ -39,6 +39,7 @@ var _FormulaContext = require("../../__context__/FormulaContext");
 var _OrderSessionContext = require("../../__context__/OrderSessionContext");
 var _helpers__ = require("../../__helpers__");
 var _product = require("../../__helpers__/product");
+var _ui = require("../../__helpers__/ui");
 var _LicensePlateValidator = _interopRequireDefault(require("../../__services__/LicensePlateValidator"));
 var _LocalStorageWorker = require("../../__services__/LocalStorageWorker");
 var _InternalQuotationSuccessModal = _interopRequireDefault(require("./InternalQuotationSuccessModal"));
@@ -167,18 +168,9 @@ const InternalQuotationForm = _ref => {
     isLoadingMarketingChannels
   } = (0, _queries.useMarketingChannels)(branchType);
   const formula = (0, _FormulaContext.useFormula)();
-  const {
-    vehicleDetails
-  } = (0, _queries.useProductsQuery)({
-    licensePlate,
-    model,
-    executionAnswer1,
-    executionAnswer2,
-    durationAnswer: durationAnswer,
-    formula,
-    discountCode,
-    priceCalculationDate
-  });
+  (0, _react.useEffect)(() => {
+    (0, _ui.scrollToFirstErrorMessage)();
+  }, [errors]);
 
   /**
    * @description Handles the validation of the license plate, if the session has not been started with a license  plate
@@ -211,8 +203,11 @@ const InternalQuotationForm = _ref => {
 
       // Note: this throws on error.
       internalQuotationFormSchema.validateSync(_objectSpread(_objectSpread(_objectSpread({}, vehicle), customer), {}, {
-        channelType: channel === null || channel === void 0 ? void 0 : channel.channelType,
-        channelId: channel === null || channel === void 0 ? void 0 : channel.channelId
+        // Note: add string fallback here to prevent null check in Yup throwing weird errors
+        // However: dont submit empty strings to the API because the API doesnt accept empty strings in place of `undefined`
+        // Rule in custom API: a field can be optional (can be undefined), but once you fill it in with a value, that value has to be truthy.
+        channelType: (channel === null || channel === void 0 ? void 0 : channel.channelType) || '',
+        channelId: (channel === null || channel === void 0 ? void 0 : channel.channelId) || ''
       }), {
         strict: false,
         abortEarly: false
@@ -411,7 +406,7 @@ const InternalQuotationForm = _ref => {
     initialValue: _licensePlate,
     name: "licensePlate",
     onChange: value => _setLicensePlate(value),
-    isRequired: true,
+    isRequired: false,
     form: "quotation",
     label: "Kenteken:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['licensePlate']

package/dist/src/shared/__helpers__/dossier.js

@@ -67,7 +67,7 @@ function _toPrimitive(t, r) {
  * @description Covnerts an existing hyper dossier object into a local order session
  */
 const parseDossierToOrderSession = exports.parseDossierToOrderSession = function parseDossierToOrderSession() {
-  var _dossier$kanaal, _dossier$kanaalPartne, _dossier$vestiging, _dossier$typeEigendom, _Date, _dossier$klant, _dossier$klant2, _dossier$klant3, _dossier$klant4, _dossier$klant5, _dossier$klant6, _dossier$klant7, _dossier$klant8, _dossier$klant9;
+  var _dossier$kanaal, _dossier$kanaalPartne, _dossier$kanaalHoofka, _dossier$vestiging, _dossier$typeEigendom, _Date, _dossier$klant, _dossier$klant2, _dossier$klant3, _dossier$klant4, _dossier$klant5, _dossier$klant6, _dossier$klant7, _dossier$klant8, _dossier$klant9;
   let dossier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
     licensePlate: dossier === null || dossier === void 0 ? void 0 : dossier.kenteken,
@@ -75,7 +75,7 @@ const parseDossierToOrderSession = exports.parseDossierToOrderSession = function
     // Note: only fill in when license plate is empty
     channel: {
       channelType: dossier === null || dossier === void 0 || (_dossier$kanaal = dossier.kanaal) === null || _dossier$kanaal === void 0 ? void 0 : _dossier$kanaal.entityId,
-      channelId: dossier === null || dossier === void 0 || (_dossier$kanaalPartne = dossier.kanaalPartner) === null || _dossier$kanaalPartne === void 0 ? void 0 : _dossier$kanaalPartne.entityId
+      channelId: (dossier === null || dossier === void 0 || (_dossier$kanaalPartne = dossier.kanaalPartner) === null || _dossier$kanaalPartne === void 0 ? void 0 : _dossier$kanaalPartne.entityId) || (dossier === null || dossier === void 0 || (_dossier$kanaalHoofka = dossier.kanaalHoofkantoor) === null || _dossier$kanaalHoofka === void 0 ? void 0 : _dossier$kanaalHoofka.entityId)
     },
     durationAnswer: dossier === null || dossier === void 0 ? void 0 : dossier.looptijd,
     executionAnswer1: dossier === null || dossier === void 0 ? void 0 : dossier.uitvoeringTrekhaakExecuton1,
@@ -112,10 +112,11 @@ const parseDossierToOrderSession = exports.parseDossierToOrderSession = function
     appointment: {
       date: !(dossier !== null && dossier !== void 0 && dossier.geplandeTijd) ? new Date() : new Date().setTime(dossier === null || dossier === void 0 ? void 0 : dossier.geplandeTijd),
       time: !(dossier !== null && dossier !== void 0 && dossier.geplandeTijd) ? new Date() : (_Date = new Date()) === null || _Date === void 0 ? void 0 : _Date.setTime(dossier === null || dossier === void 0 ? void 0 : dossier.geplandeTijd),
-      note: dossier === null || dossier === void 0 ? void 0 : dossier.interneOpmerking
+      note: dossier === null || dossier === void 0 ? void 0 : dossier.opmerkingKlant
     },
     priceCalculationDate: dossier !== null && dossier !== void 0 && dossier.prijsberekeningsdatum ? dossier === null || dossier === void 0 ? void 0 : dossier.prijsberekeningsdatum : new Date().getTime(),
     customer: {
+      note: dossier === null || dossier === void 0 ? void 0 : dossier.opmerkingKlant,
       firstName: (dossier === null || dossier === void 0 || (_dossier$klant = dossier.klant) === null || _dossier$klant === void 0 ? void 0 : _dossier$klant.firstName) || '',
       lastName: (dossier === null || dossier === void 0 || (_dossier$klant2 = dossier.klant) === null || _dossier$klant2 === void 0 ? void 0 : _dossier$klant2.lastName) || '',
       infix: (dossier === null || dossier === void 0 || (_dossier$klant3 = dossier.klant) === null || _dossier$klant3 === void 0 ? void 0 : _dossier$klant3.tussenvoegsel) || '',

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

@@ -202,7 +202,7 @@ const removeNullishProps = exports.removeNullishProps = function removeNullishPr
   let object = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return Object.fromEntries(Object.entries(object).filter(_ref3 => {
     let [key, value] = _ref3;
-    return value != null;
+    return !!value;
   }));
 };
 

package/dist/src/shared/__helpers__/ui.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkIfMouseOutsideWindow = void 0;
+exports.scrollToFirstErrorMessage = exports.checkIfMouseOutsideWindow = void 0;
 /**
  *  @description Checks whether the mouse inside the view
  * @param {Number} mouseY the "Y" coordinate of the mouse
@@ -17,4 +17,23 @@ const checkIfMouseOutsideWindow = _ref => {
   } = _ref;
   return mouseY > window.innerHeight - offset || mouseY < offset;
 };
-exports.checkIfMouseOutsideWindow = checkIfMouseOutsideWindow;
+
+/**
+ * @description Finds the first instance of `error-message` on the DOM and scrolls to it
+ */
+exports.checkIfMouseOutsideWindow = checkIfMouseOutsideWindow;
+const scrollToFirstErrorMessage = () => {
+  if (typeof window === 'undefined') {
+    console.warn("scrollToFirstErrorMessage() should only run in browser");
+    return;
+  }
+  const errorMessage = window.document.querySelector("[name=\"error-message\"]");
+  if (!errorMessage) {
+    return;
+  }
+  errorMessage.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center'
+  });
+};
+exports.scrollToFirstErrorMessage = scrollToFirstErrorMessage;

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(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -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,44 @@ 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, {
+    exact: true,
+    path: "/configurator/:id",
+    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalSessionEditPage, props)
   }), /*#__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/InternalLicensePlatePage.js

@@ -70,9 +70,10 @@ const getSteps = _ref => {
 const licensePlateValidator = new _LicensePlateValidator.default();
 const InternalLicensePlatePage = () => {
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
-  const [_, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const [session, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const originalLicensePlate = (0, _react.useRef)();
   const formula = (0, _FormulaContext.useFormula)();
-  const [licensePlateURL, discountCode] = (0, _useSearchParam.default)(['licensePlate', 'discountCode']);
+  const [licensePlateURL, discountCode, persistSession] = (0, _useSearchParam.default)(['licensePlate', 'discountCode', 'persistSession']);
   const history = (0, _reactRouter.useHistory)();
   (0, _queries.useProductFieldLabels)(); // Prefetch
 
@@ -85,6 +86,11 @@ const InternalLicensePlatePage = () => {
   const handleSubmit = () => {
     history.push('/configurator/trekhaakpakket');
   };
+  (0, _react.useEffect)(() => {
+    if (!originalLicensePlate.current && session !== null && session !== void 0 && session.licensePlate) {
+      originalLicensePlate.current = session.licensePlate;
+    }
+  }, [session]);
   (0, _react.useEffect)(() => {
     // If no license plate was found: initialize a new order
     if (!licensePlateURL) {
@@ -109,11 +115,11 @@ const InternalLicensePlatePage = () => {
     }
   }, [discountCode]);
   const Steps = (0, _react.useMemo)(() => getSteps({
-    initialLicensePlate: licensePlateValidator.init(licensePlateURL),
+    initialLicensePlate: persistSession === 'true' ? originalLicensePlate.current : licensePlateValidator.init(licensePlateURL),
     onNext: handleNext,
     onPrev: handlePrev,
     onSubmit: handleSubmit
-  }), []);
+  }), [persistSession, originalLicensePlate.current]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('vh-100')
   }, /*#__PURE__*/_react.default.createElement(_internal.InternalCancelDossierEdit, null), /*#__PURE__*/_react.default.createElement("section", {

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

@@ -55,23 +55,39 @@ const getSteps = _ref => {
   let {
     onNext,
     onPrev,
-    onSubmit
+    onSubmit,
+    initialValues
   } = _ref;
   return [/*#__PURE__*/_react.default.createElement(_ManualSelectionForm.default, {
-    onSubmit: onNext
+    onSubmit: onNext,
+    initialValues: initialValues
   }), /*#__PURE__*/_react.default.createElement(_QuestionsForm.default, {
     onPrev: onPrev,
     onSubmit: onSubmit
   })];
 };
 const InternalManualSelectionPage = () => {
-  const [_, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const [{
+    brand,
+    model,
+    buildYear
+  }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
+  const originalVehicle = (0, _react.useRef)();
   const history = (0, _reactRouter.useHistory)();
   const formula = (0, _FormulaContext.useFormula)();
-  const [discountCode] = (0, _useSearchParam.default)(['discountCode']);
+  const [discountCode, persistSession] = (0, _useSearchParam.default)(['discountCode', 'persistSession']);
   (0, _queries.useProductFieldLabels)(); // Prefetch
 
+  (0, _react.useEffect)(() => {
+    if (!(originalVehicle !== null && originalVehicle !== void 0 && originalVehicle.current)) {
+      originalVehicle.current = {
+        brand,
+        model,
+        buildYear
+      };
+    }
+  }, [brand, model, buildYear]);
   (0, _react.useEffect)(() => {
     dispatch({
       type: _OrderSessionContext.orderSessionActions.INITIALIZE_NEW_ORDER,
@@ -100,10 +116,15 @@ const InternalManualSelectionPage = () => {
     history.push('/configurator/trekhaakpakket');
   };
   const Steps = (0, _react.useMemo)(() => getSteps({
+    initialValues: persistSession ? originalVehicle.current : {
+      brand: null,
+      model: null,
+      buildYear: null
+    },
     onNext: handleNext,
     onPrev: handlePrev,
     onSubmit: handleSubmit
-  }), []);
+  }), [persistSession, originalVehicle.current]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('vh-100')
   }, /*#__PURE__*/_react.default.createElement(_internal.InternalCancelDossierEdit, null), /*#__PURE__*/_react.default.createElement("section", {

package/package.json

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