thm-p3-configurator 0.0.412 → 0.0.413

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

@@ -196,6 +196,55 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     }
     return (0, _openingHours.copyTimeToDate)(new Date(appointment.time), new Date(appointment.date));
   }, [(_appointment$time$get = appointment === null || appointment === void 0 || (_appointment$time = appointment.time) === null || _appointment$time === void 0 || (_appointment$time$get2 = _appointment$time.getTime) === null || _appointment$time$get2 === void 0 ? void 0 : _appointment$time$get2.call(_appointment$time)) !== null && _appointment$time$get !== void 0 ? _appointment$time$get : appointment === null || appointment === void 0 ? void 0 : appointment.time, (_appointment$date$get = appointment === null || appointment === void 0 || (_appointment$date = appointment.date) === null || _appointment$date === void 0 || (_appointment$date$get2 = _appointment$date.getTime) === null || _appointment$date$get2 === void 0 ? void 0 : _appointment$date$get2.call(_appointment$date)) !== null && _appointment$date$get !== void 0 ? _appointment$date$get : appointment === null || appointment === void 0 ? void 0 : appointment.date]);
+  const openingstijden = branchById === null || branchById === void 0 ? void 0 : branchById.openingstijden;
+  const filterAppointmentDate = (0, _react.useCallback)(date => (0, _openingHours.isAppointmentDateSelectable)(openingstijden, date), [openingstijden]);
+  const appointmentIncludeDates = (0, _react.useMemo)(() => (0, _openingHours.getAppointmentIncludeDates)(openingstijden), [openingstijden]);
+  const appointmentTimeBounds = (0, _react.useMemo)(() => appointment !== null && appointment !== void 0 && appointment.date ? (0, _openingHours.getAppointmentTimeBounds)(openingstijden, new Date(appointment.date)) : {
+    minTime: null,
+    maxTime: null
+  }, [openingstijden, appointment === null || appointment === void 0 ? void 0 : appointment.date]);
+  const isTimePickerDisabled = !(appointment !== null && appointment !== void 0 && appointment.date) || appointmentTimeBounds.minTime && appointmentTimeBounds.maxTime && appointmentTimeBounds.minTime > appointmentTimeBounds.maxTime;
+  (0, _react.useEffect)(() => {
+    if (!openingstijden) {
+      return;
+    }
+    if (appointment !== null && appointment !== void 0 && appointment.date) {
+      const date = new Date(appointment.date);
+      if (!(0, _openingHours.isAppointmentDateSelectable)(openingstijden, date)) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_APPOINTMENT_DATE,
+          payload: {
+            date: null
+          }
+        });
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_APPOINTMENT_TIME,
+          payload: {
+            time: null
+          }
+        });
+        return;
+      }
+      const bounds = (0, _openingHours.getAppointmentTimeBounds)(openingstijden, date);
+      if (bounds.minTime && bounds.maxTime && bounds.minTime > bounds.maxTime) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_APPOINTMENT_TIME,
+          payload: {
+            time: null
+          }
+        });
+        return;
+      }
+      if (appointment !== null && appointment !== void 0 && appointment.time && !(0, _openingHours.isTimeWithinBounds)(new Date(appointment.time), bounds)) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_APPOINTMENT_TIME,
+          payload: {
+            time: null
+          }
+        });
+      }
+    }
+  }, [openingstijden, appointment === null || appointment === void 0 ? void 0 : appointment.date, dispatch]);
   const authSession = (0, _AuthSessionContext.useAuthSession)();
   const isTmg = (0, _useIsTmg.useIsTmg)();
   const [companySearchTerm, setCompanySearchTerm] = (0, _react.useState)('');
@@ -980,6 +1029,9 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     className: (0, _helpers__.withStyle)('col-12 col-md-6')
   }, /*#__PURE__*/_react.default.createElement(_DatePickerInput.default, {
     onChange: value => {
+      if (openingstijden && value && !(0, _openingHours.isAppointmentDateSelectable)(openingstijden, value)) {
+        return;
+      }
       dispatch({
         type: _OrderSessionContext.orderSessionActions.SET_APPOINTMENT_DATE,
         payload: {
@@ -997,6 +1049,8 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     label: "Datum",
     initialValue: appointment !== null && appointment !== void 0 && appointment.date ? new Date(appointment === null || appointment === void 0 ? void 0 : appointment.date) : null,
     isStrict: false,
+    filterDate: filterAppointmentDate,
+    includeDates: appointmentIncludeDates,
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['date']
   }), /*#__PURE__*/_react.default.createElement(_TimePickerInput.default, {
     key: "appointment-time-".concat((_ref5 = (_appointment$date$get3 = appointment === null || appointment === void 0 || (_appointment$date2 = appointment.date) === null || _appointment$date2 === void 0 || (_appointment$date2$ge = _appointment$date2.getTime) === null || _appointment$date2$ge === void 0 ? void 0 : _appointment$date2$ge.call(_appointment$date2)) !== null && _appointment$date$get3 !== void 0 ? _appointment$date$get3 : appointment === null || appointment === void 0 ? void 0 : appointment.date) !== null && _ref5 !== void 0 ? _ref5 : 'none'),
@@ -1011,6 +1065,9 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     name: 'Tijd',
     label: "Tijd",
     isStrict: false,
+    isDisabled: isTimePickerDisabled,
+    minTime: appointmentTimeBounds.minTime,
+    maxTime: appointmentTimeBounds.maxTime,
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['time']
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 col-md-6')

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

@@ -10,6 +10,7 @@ exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouter = require("react-router");
+require("react-datepicker/src/stylesheets/datepicker-cssmodules.scss");
 var _ThemeContext = require("../__context__/ThemeContext");
 var _helpers__ = require("../__helpers__");
 var _useBranchTheme = require("../__hooks__/useBranchTheme");

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

@@ -1,11 +1,14 @@
 /* ==========================================================================
 Datepicker
 ========================================================================== */
-/* Above sibling inputs (e.g. date popper vs time field below); lib default is z-index: 1 */
 .react-datepicker-popper {
   z-index: 1070 !important;
 }
 
+.react-datepicker__time-list-item--disabled {
+  display: none !important;
+}
+
 .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
   border-top-right-radius: 0;
 }

package/package.json

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