thm-p3-configurator 0.0.37 → 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/__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

@@ -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

@@ -58,11 +58,7 @@ function _interopRequireWildcard(e, r) {
 const ManualSelectionForm = _ref => {
   let {
     onSubmit,
-    initialValues = {
-      brand: null,
-      model: null,
-      buildYear: null
-    }
+    initialValues = null
   } = _ref;
   const [{
     brand,
@@ -104,15 +100,17 @@ const ManualSelectionForm = _ref => {
     );
   };
   (0, _react.useEffect)(() => {
-    handleBrandChange({
-      value: initialValues.brand
-    });
-    handleBuildYearChange({
-      value: initialValues.buildYear
-    });
-    handleModelChange({
-      value: initialValues.model
-    });
+    if (initialValues) {
+      handleBrandChange({
+        value: initialValues.brand
+      });
+      handleBuildYearChange({
+        value: initialValues.buildYear
+      });
+      handleModelChange({
+        value: initialValues.model
+      });
+    }
   }, [initialValues]);
   const handleBrandChange = brandOption => {
     dispatch({

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__/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);

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__/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/package.json

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