thm-p3-configurator 0.0.38 → 0.0.39

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

@@ -57,6 +57,9 @@ const CheckboxInput = _ref => {
     setChecked(!isChecked);
     onChange(!isChecked);
   };
+  (0, _react.useEffect)(() => {
+    setChecked(initialValue);
+  }, [initialValue]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('form-group')
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -66,6 +69,7 @@ const CheckboxInput = _ref => {
     id: name,
     name: name,
     form: form,
+    checked: isChecked,
     required: isRequired,
     className: "".concat((0, _helpers__.withStyle)('form-check-input'), " ").concat(errorMessage ? (0, _helpers__.withStyle)('is-invalid') : ''),
     onChange: e => {

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

@@ -32,6 +32,7 @@ var _LinkButton = _interopRequireDefault(require("../../__components__/Buttons/L
 var _NavigationButton = _interopRequireDefault(require("../../__components__/Buttons/NavigationButton"));
 var _PrimaryButton = _interopRequireDefault(require("../../__components__/Buttons/PrimaryButton"));
 var _CardWide = _interopRequireDefault(require("../../__components__/Cards/CardWide"));
+var _CheckboxInput = _interopRequireDefault(require("../../__components__/Form/CheckboxInput"));
 var _DatePickerInput = _interopRequireDefault(require("../../__components__/Form/DatePickerInput"));
 var _DropdownInput = _interopRequireDefault(require("../../__components__/Form/DropdownInput"));
 var _ErrorMessage = _interopRequireDefault(require("../../__components__/Form/ErrorMessage"));
@@ -137,8 +138,13 @@ const internalAppointmentFormSchema = (0, _yup.object)({
   streetName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   city: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
   date: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
-  time: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required)
+  time: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  customerAgreed: (0, _yup.boolean)().required(_constants__.FORM_ERROR_MESSAGES.required).isTrue(_constants__.FORM_ERROR_MESSAGES.required)
 });
+
+/**
+ * TODO: Split this component - file is too long at the moment.
+ */
 const InternalAppointmentForm = _ref => {
   var _branchTypes$byId$aut, _authSession$branch;
   let {
@@ -148,6 +154,7 @@ const InternalAppointmentForm = _ref => {
     isLoading = false
   } = _ref;
   const [{
+    customerAgreed,
     customer,
     licensePlate,
     model,
@@ -187,6 +194,21 @@ const InternalAppointmentForm = _ref => {
   (0, _react.useEffect)(() => {
     (0, _ui.scrollToFirstErrorMessage)();
   }, [errors]);
+  const {
+    products
+  } = (0, _queries.useProductsQuery)({
+    licensePlate,
+    model,
+    executionAnswer1,
+    executionAnswer2,
+    durationAnswer: durationAnswer,
+    formula,
+    priceCalculationDate,
+    discountCode
+  });
+  const productSpecifications = (0, _react.useMemo)(() => {
+    return (0, _product.parseProductSpecifications)([products[_constants__.PRODUCT_CATEGORIES.TOWBAR].find(towbar => towbar.articleNumber === selectedTowbar), products[_constants__.PRODUCT_CATEGORIES.CABLESET].find(cableset => cableset.articleNumber === selectedCableset), products[_constants__.PRODUCT_CATEGORIES.COMBISET].find(combiset => combiset.articleNumber === selectedCombiset)]);
+  }, [products]);
 
   /**
    * @description Handles the validation of the license plate, if the session has not been started with a license  plate
@@ -222,7 +244,8 @@ const InternalAppointmentForm = _ref => {
         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) || ''
+        channelId: (channel === null || channel === void 0 ? void 0 : channel.channelId) || '',
+        customerAgreed: productSpecifications !== null && productSpecifications !== void 0 && productSpecifications.length ? customerAgreed : true // Note: this skips validation if no productSpecifications are found
       }), {
         strict: false,
         abortEarly: false
@@ -333,7 +356,7 @@ const InternalAppointmentForm = _ref => {
     onClick: handleAutofillButtonClicked,
     isDisabled: !branchById
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('col-12 mb-2')
+    className: (0, _helpers__.withStyle)('col-12 col-md-6 mb-2')
   }, /*#__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,
@@ -369,37 +392,6 @@ const InternalAppointmentForm = _ref => {
         }
       });
     }
-  }), /*#__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,
@@ -523,6 +515,45 @@ const InternalAppointmentForm = _ref => {
     isRequired: true,
     label: "Stad:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 mb-4')
+  }, /*#__PURE__*/_react.default.createElement(_CardWide.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('row')
+  }, /*#__PURE__*/_react.default.createElement("h6", {
+    className: (0, _helpers__.withStyle)('modal-title col-12 mb-2')
+  }, "Gegevens van de klant ", /*#__PURE__*/_react.default.createElement("br", null)), /*#__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')
+  }, (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']
   }), !licensePlate && /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     initialValue: _licensePlate,
@@ -532,7 +563,25 @@ const InternalAppointmentForm = _ref => {
     form: "quotation",
     label: "Kenteken:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['licensePlate']
-  }))))), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('my-2 fw-bold')
+  }, "Opties aanwezig:"), productSpecifications !== null && productSpecifications !== void 0 && productSpecifications.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("ul", null, productSpecifications === null || productSpecifications === void 0 ? void 0 : productSpecifications.map(specification => /*#__PURE__*/_react.default.createElement("li", {
+    key: specification
+  }, specification))), /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    isRequired: true,
+    name: 'customerAgreed',
+    initialValue: customerAgreed,
+    onChange: value => dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_AGREED,
+      payload: {
+        customerAgreed: value
+      }
+    }),
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['customerAgreed'],
+    label: /*#__PURE__*/_react.default.createElement("strong", null, "Klant gaat akkoord met bovenstaande")
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('text-muted my-2')
+  }, "Geen opties gevonden..."))), ' ')), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12')
   }, /*#__PURE__*/_react.default.createElement(_CardWide.default, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row')

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

@@ -119,6 +119,7 @@ const INITIAL_ORDER_SESSION_STATE = {
   selectedBranch: null,
   discountCode: null,
   franchiseName: null,
+  customerAgreed: undefined,
   vehicle: {
     ownershipType: _constants__.VEHICLE_OWNERSHIP_TYPE.Particulier,
     leaseNumber: ''
@@ -191,7 +192,8 @@ const orderSessionActions = exports.orderSessionActions = {
   SET_DISCOUNT_PERCENTAGE: 'SET_DISCOUNT_PERCENTAGE',
   CLEAR_DISCOUNT: 'CLEAR_DISCOUNT',
   SET_FRANCHISE_NAME: 'SET_FRANCHISE_NAME',
-  SET_PRICE_CALCULATION_DATE: 'SET_PRICE_CALCULATION_DATE'
+  SET_PRICE_CALCULATION_DATE: 'SET_PRICE_CALCULATION_DATE',
+  SET_CUSTOMER_AGREED: 'SET_CUSTOMER_AGREED'
 };
 const orderSessionReducer = (state, action) => {
   switch (action.type) {
@@ -777,6 +779,15 @@ const orderSessionReducer = (state, action) => {
           priceCalculationDate: date
         });
       }
+    case orderSessionActions.SET_CUSTOMER_AGREED:
+      {
+        const {
+          customerAgreed = false
+        } = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          customerAgreed
+        });
+      }
     default:
       return state;
   }

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

@@ -7,12 +7,13 @@ require("core-js/modules/es.string.includes.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.flat-map.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateCartInput = exports.formatHyperDescription = exports.extractProductSpecsArray = exports.checkIfTowbarIsRecommended = void 0;
+exports.validateCartInput = exports.parseProductSpecifications = exports.formatHyperDescription = exports.extractProductSpecsArray = exports.checkIfTowbarIsRecommended = void 0;
 require("core-js/modules/es.array.flat-map.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.unscopables.flat-map.js");
@@ -20,6 +21,7 @@ require("core-js/modules/es.string.includes.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.flat-map.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _constants__ = require("../__constants__");
@@ -71,4 +73,26 @@ exports.checkIfTowbarIsRecommended = checkIfTowbarIsRecommended;
 const formatHyperDescription = description => {
   return description === null || description === void 0 ? void 0 : description.ops.map(phrase => phrase.insert).join('');
 };
-exports.formatHyperDescription = formatHyperDescription;
+
+/**
+ * @description Parses a product EXCL/INCL/OPM orderlines
+ */
+exports.formatHyperDescription = formatHyperDescription;
+const parseProductSpecifications = exports.parseProductSpecifications = function parseProductSpecifications() {
+  let productLines = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const allSpecifications = [];
+  productLines.forEach(line => {
+    if (line !== null && line !== void 0 && line.excl) {
+      allSpecifications.push("Niet Geschikt voor: ".concat(line === null || line === void 0 ? void 0 : line.excl));
+    }
+    if (line !== null && line !== void 0 && line.incl) {
+      allSpecifications.push("Geschikt voor: ".concat(line === null || line === void 0 ? void 0 : line.incl));
+    }
+    if (line !== null && line !== void 0 && line.remark) {
+      allSpecifications.push("Opmerking: ".concat(line === null || line === void 0 ? void 0 : line.remark));
+    }
+  });
+
+  // Note: filter non-unique values out
+  return [...new Set(allSpecifications)];
+};

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

@@ -90,7 +90,6 @@ 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
@@ -102,7 +101,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(_internal.InternalLicensePlatePage, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_LicensePlatePage.default, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/geen-producten",
@@ -110,44 +109,40 @@ const Routes = () => {
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/montagelocatie",
-    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalLocationsPage, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_LocationsPage.default, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/gegevens/bedankt",
-    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalAppointmentPage, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_AppointmentThanksPage.default, 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(_internal.InternalProductsPage, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_ProductsPage.default, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     path: "/configurator/manual",
-    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalManualSelectionPage, props)
+    render: props => /*#__PURE__*/_react.default.createElement(_ManualSelectionPage.default, props)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/overzicht",
-    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalOverviewPage, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_OverviewPage.default, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/offerte",
-    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalQuotationPage, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_QuotationPage.default, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/gegevens",
-    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalAppointmentPage, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_AppointmentPage.default, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     exact: true,
     path: "/configurator/toebehoren",
-    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)
+    render: props => /*#__PURE__*/_react.default.createElement(_ExtraProductsPage.default, null)
   }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
     path: "/configurator",
-    render: props => /*#__PURE__*/_react.default.createElement(_internal.InternalLicensePlatePage, null)
+    render: props => /*#__PURE__*/_react.default.createElement(_LicensePlatePage.default, 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.38",
+  "version": "0.0.39",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "EnoRm.",