@bigbinary/neeto-molecules 5.2.32 → 5.2.34

package/dist/cjs/Schedule.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var classnames = require('classnames');
 var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
 var general = require('@bigbinary/neeto-commons-frontend/utils/general');
@@ -20,16 +21,14 @@ var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
 var _createClass = require('@babel/runtime/helpers/createClass');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var jsxRuntime = require('react/jsx-runtime');
-var classnames = require('classnames');
 var Copy = require('@bigbinary/neeto-icons/Copy');
 var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var Button = require('@bigbinary/neetoui/Button');
 var Label = require('@bigbinary/neetoui/Label');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
-var _typeof = require('@babel/runtime/helpers/typeof');
 var Plus = require('@bigbinary/neeto-icons/Plus');
-var Delete = require('@bigbinary/neeto-icons/Delete');
+var Close = require('@bigbinary/neeto-icons/Close');
 var Select = require('@bigbinary/neetoui/formik/Select');
 var Profile = require('@bigbinary/neeto-team-members-frontend/Profile');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
@@ -71,13 +70,14 @@ var ScheduleContext = /*#__PURE__*/React.createContext({
   allowAddPeriod: true,
   firstDay: 0,
   slotInterval: DEFAULT_SLOT_INTERVAL,
-  hourFormat: DEFAULT_HOUR_FORMAT
+  hourFormat: DEFAULT_HOUR_FORMAT,
+  compact: false
 });
 
 var INTERVALS = ["year", "quarter", "month", "week", "day", "hour", "minute", "second"];
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var REMOVE_SELECT_DOWN_ARROW = {
   DropdownIndicator: function DropdownIndicator() {
     return null;
@@ -88,9 +88,14 @@ var REMOVE_SELECT_DOWN_ARROW = {
 };
 var BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN = {
   singleValue: function singleValue(base, state) {
-    return _objectSpread(_objectSpread({}, base), {}, {
+    return _objectSpread$1(_objectSpread$1({}, base), {}, {
       color: state.selectProps.menuIsOpen ? "#c2c8cc" : base.color
     });
+  },
+  menu: function menu(base) {
+    return _objectSpread$1(_objectSpread$1({}, base), {}, {
+      minWidth: "8rem"
+    });
   }
 };
 var SLOT_TIME_FORMAT = "hh:mm A";
@@ -199,10 +204,6 @@ yup__namespace.addMethod(yup__namespace.array, "ensureSlotsCantOverlap", functio
     return new yup__namespace.ValidationError([firstError, secondError]);
   });
 });
-var isFromAndToSame = function isFromAndToSame(startTime, endTime) {
-  if (!startTime || !endTime) return true;
-  return utils.dayjs(startTime, SLOT_TIME_FORMAT_24H).isSame(utils.dayjs(endTime, SLOT_TIME_FORMAT_24H));
-};
 var sortDays = function sortDays(chosenIndex) {
   if (chosenIndex < 0 || chosenIndex >= 7) return DAYS;
   return [].concat(_toConsumableArray(DAYS.slice(chosenIndex)), _toConsumableArray(DAYS.slice(0, chosenIndex)));
@@ -210,15 +211,12 @@ var sortDays = function sortDays(chosenIndex) {
 var wdayValidation = yup__namespace.object().shape({
   periods: yup__namespace.array().of(yup__namespace.object().shape({
     startTime: yup__namespace.string().required(i18next.t("neetoMolecules.schedule.errors.period.startTime")),
-    endTime: yup__namespace.string().required(i18next.t("neetoMolecules.schedule.errors.period.endTime")).test("ensureToTimeNotBehindFromTime", i18next.t("neetoMolecules.schedule.errors.period.isBehind"), function (value) {
-      var startTime = this.parent.startTime;
-      if (isFromAndToSame(value, startTime)) return true;
-      return isTimeBehind(startTime, value);
-    })
-  }).test("ensureTimeNotSame", i18next.t("neetoMolecules.schedule.errors.period.sameTime"), function (value) {
+    endTime: yup__namespace.string().required(i18next.t("neetoMolecules.schedule.errors.period.endTime"))
+  }).test("ensureEndAfterStart", i18next.t("neetoMolecules.schedule.errors.period.isBehind"), function (value) {
     var startTime = value.startTime,
       endTime = value.endTime;
-    return !isFromAndToSame(startTime, endTime);
+    if (!startTime || !endTime) return true;
+    return isTimeBehind(startTime, endTime);
   })).ensureSlotsCantOverlap()
 });
 var getScheduleValidationSchema = function getScheduleValidationSchema() {
@@ -384,17 +382,93 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
     t = _useTranslation.t;
   var _useContext = React.useContext(ScheduleContext),
     firstDay = _useContext.firstDay,
-    hourFormat = _useContext.hourFormat;
+    hourFormat = _useContext.hourFormat,
+    compact = _useContext.compact;
   var formatHour = function formatHour(hour) {
     if (hourFormat === HOUR_FORMATS.H24) {
       return hour;
     }
     return convert24hTo12h(hour);
   };
+  var dayLabel = function dayLabel(day) {
+    return t("neetoMolecules.schedule.days.".concat(day));
+  };
+  var timeRangesForDay = function timeRangesForDay(day) {
+    var _sortPeriodsByKey;
+    if (!neetoCist.isPresent(periods[day])) return null;
+    return (_sortPeriodsByKey = sortPeriodsByKey({
+      periods: periods[day],
+      key: "startTime",
+      order: "asc"
+    })) === null || _sortPeriodsByKey === void 0 ? void 0 : _sortPeriodsByKey.map(function (period) {
+      return "".concat(formatHour(period.startTime), " - ").concat(formatHour(period.endTime));
+    });
+  };
+  if (compact) {
+    var groups = sortDays(firstDay).reduce(function (acc, day) {
+      var ranges = timeRangesForDay(day);
+      var signature = ranges === null ? null : ranges.join("|");
+      var lastGroup = acc[acc.length - 1];
+      if (lastGroup && lastGroup.signature === signature) {
+        lastGroup.endDay = day;
+      } else {
+        acc.push({
+          startDay: day,
+          endDay: day,
+          signature: signature,
+          ranges: ranges
+        });
+      }
+      return acc;
+    }, []);
+    var visibleGroups = groups.filter(function (group) {
+      return group.ranges !== null;
+    });
+    if (neetoCist.isNotPresent(visibleGroups)) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "px-4 py-3 md:px-6",
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "neeto-ui-text-gray-500",
+          style: "body2",
+          children: t("neetoMolecules.schedule.unavailable")
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex w-full flex-col",
+      children: visibleGroups.map(function (group) {
+        var dayRange = group.startDay === group.endDay ? dayLabel(group.startDay) : t("neetoMolecules.schedule.dayRange", {
+          startDay: dayLabel(group.startDay),
+          endDay: dayLabel(group.endDay)
+        });
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "neeto-ui-border-gray-200 flex w-full items-start gap-6 border-b px-4 py-3 last:border-b-0 md:px-6",
+          "data-testid": "day-cards-".concat(group.startDay),
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "w-44 flex-shrink-0 text-end whitespace-nowrap",
+            "data-testid": general.joinHyphenCase(group.startDay, "day-text"),
+            style: "body2",
+            weight: "semibold",
+            children: dayRange
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-col gap-0.5",
+            children: group.ranges.map(function (range, index) {
+              return /*#__PURE__*/jsxRuntime.jsx(Typography, {
+                className: "neeto-ui-text-gray-700",
+                style: "body2",
+                "data-testid": "".concat(general.joinHyphenCase(group.startDay, "time-range"), "-").concat(index),
+                children: range
+              }, index);
+            })
+          })]
+        }, group.startDay);
+      })
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex w-full flex-col gap-y-3",
     children: sortDays(firstDay).map(function (day) {
-      var _sortPeriodsByKey;
+      var _sortPeriodsByKey2;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "neeto-ui-rounded-md neeto-ui-border-gray-300 neeto-ui-bg-white flex w-full flex-wrap items-center justify-center gap-2 border px-6 py-4 sm:items-start sm:justify-start",
         "data-testid": "day-cards-".concat(day),
@@ -406,11 +480,11 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
           children: t("neetoMolecules.schedule.days.".concat(day))
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-grow flex-col items-center gap-y-4 sm:w-1/2",
-          children: neetoCist.isPresent(periods[day]) ? (_sortPeriodsByKey = sortPeriodsByKey({
+          children: neetoCist.isPresent(periods[day]) ? (_sortPeriodsByKey2 = sortPeriodsByKey({
             periods: periods[day],
             key: "startTime",
             order: "asc"
-          })) === null || _sortPeriodsByKey === void 0 ? void 0 : _sortPeriodsByKey.map(function (period) {
+          })) === null || _sortPeriodsByKey2 === void 0 ? void 0 : _sortPeriodsByKey2.map(function (period) {
             return /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "flex items-center gap-x-4",
               children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -561,16 +635,21 @@ var addDefaultPeriod = function addDefaultPeriod(wday) {
   };
 };
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ScheduleRow$1 = function ScheduleRow(_ref) {
   var day = _ref.day;
   var _useFormikContext = formik.useFormikContext(),
     values = _useFormikContext.values,
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    errors = _useFormikContext.errors,
+    touched = _useFormikContext.touched;
   var bookedSlots = values.wdays[day].periods;
   var _useContext = React.useContext(ScheduleContext),
     allowAddPeriod = _useContext.allowAddPeriod,
     slotInterval = _useContext.slotInterval,
-    hourFormat = _useContext.hourFormat;
+    hourFormat = _useContext.hourFormat,
+    compact = _useContext.compact;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var sortSlotsInterval = React.useMemo(function () {
@@ -603,84 +682,129 @@ var ScheduleRow$1 = function ScheduleRow(_ref) {
     arrayHelpers.remove(index);
     setFieldValue("wdays.".concat(day, ".available"), !isLastRowDeleted);
   };
+  var renderTimeSelect = function renderTimeSelect(_ref2) {
+    var index = _ref2.index,
+      period = _ref2.period,
+      field = _ref2.field,
+      options = _ref2.options,
+      hasError = _ref2.hasError;
+    return /*#__PURE__*/jsxRuntime.jsx(Select, _objectSpread(_objectSpread({}, _objectSpread({
+      formatCreateLabel: formatCreateLabel
+    }, hasError && {
+      error: true
+    })), {}, {
+      isCreateable: true,
+      isSearchable: true,
+      className: classnames({
+        "w-full": !compact
+      }),
+      components: REMOVE_SELECT_DOWN_ARROW,
+      filterOption: filterSlots,
+      isClearable: false,
+      isValidNewOption: isValidTimeSlotOption,
+      name: "wdays.".concat(day, ".periods[").concat(index, "].").concat(field),
+      options: options(period),
+      placeholder: t("neetoMolecules.schedule.".concat(field)),
+      strategy: "fixed",
+      styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
+      value: neetoCist.findBy({
+        value: period === null || period === void 0 ? void 0 : period[field]
+      }, options(period)),
+      onChange: function onChange(e) {
+        return handleChange(index, field, e);
+      }
+    }));
+  };
+  var renderField = function renderField(_ref3) {
+    var index = _ref3.index,
+      period = _ref3.period,
+      field = _ref3.field,
+      options = _ref3.options,
+      hasError = _ref3.hasError;
+    return compact ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-24 flex-shrink-0",
+      children: renderTimeSelect({
+        index: index,
+        period: period,
+        field: field,
+        options: options,
+        hasError: hasError
+      })
+    }) : renderTimeSelect({
+      index: index,
+      period: period,
+      field: field,
+      options: options,
+      hasError: hasError
+    });
+  };
   return /*#__PURE__*/jsxRuntime.jsx(formik.FieldArray, {
     name: "wdays.".concat(day, ".periods"),
     render: function render(arrayHelpers) {
       var _values$wdays$day, _values$wdays$day$per;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [neetoCist.isPresent((_values$wdays$day = values.wdays[day]) === null || _values$wdays$day === void 0 ? void 0 : _values$wdays$day.periods) && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex w-full flex-col gap-y-2",
+          className: classnames("flex w-full flex-col gap-y-2", {
+            "@xl:w-auto": compact
+          }),
           children: (_values$wdays$day$per = values.wdays[day].periods) === null || _values$wdays$day$per === void 0 ? void 0 : _values$wdays$day$per.map(function (period, index) {
+            var _errors$wdays, _touched$wdays;
+            var periodError = errors === null || errors === void 0 || (_errors$wdays = errors.wdays) === null || _errors$wdays === void 0 || (_errors$wdays = _errors$wdays[day]) === null || _errors$wdays === void 0 || (_errors$wdays = _errors$wdays.periods) === null || _errors$wdays === void 0 ? void 0 : _errors$wdays[index];
+            var periodTouched = touched === null || touched === void 0 || (_touched$wdays = touched.wdays) === null || _touched$wdays === void 0 || (_touched$wdays = _touched$wdays[day]) === null || _touched$wdays === void 0 || (_touched$wdays = _touched$wdays.periods) === null || _touched$wdays === void 0 ? void 0 : _touched$wdays[index];
+            var hasError = typeof periodError === "string" && ((periodTouched === null || periodTouched === void 0 ? void 0 : periodTouched.startTime) || (periodTouched === null || periodTouched === void 0 ? void 0 : periodTouched.endTime));
             return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex w-full flex-col @xl:mx-auto @xl:w-80",
+              className: classnames("flex w-full flex-col", {
+                "@xl:mx-auto @xl:w-80": !compact,
+                "@xl:w-auto": compact
+              }),
               children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-start gap-2 @xl:gap-3",
                 "data-testid": "schedule-row",
-                children: [/*#__PURE__*/jsxRuntime.jsx(Select, {
-                  formatCreateLabel: formatCreateLabel,
-                  isClearable: true,
-                  isCreateable: true,
-                  isSearchable: true,
-                  className: "w-full",
-                  components: REMOVE_SELECT_DOWN_ARROW,
-                  filterOption: filterSlots,
-                  isValidNewOption: isValidTimeSlotOption,
-                  name: "wdays.".concat(day, ".periods[").concat(index, "].startTime"),
-                  options: startTimeOptions(period),
-                  placeholder: t("neetoMolecules.schedule.startTime"),
-                  strategy: "fixed",
-                  styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
-                  value: neetoCist.findBy({
-                    value: period === null || period === void 0 ? void 0 : period.startTime
-                  }, startTimeOptions(period)),
-                  onChange: function onChange(e) {
-                    return handleChange(index, "startTime", e);
-                  }
-                }), /*#__PURE__*/jsxRuntime.jsx(Select, {
-                  formatCreateLabel: formatCreateLabel,
-                  isClearable: true,
-                  isCreateable: true,
-                  isSearchable: true,
-                  className: "w-full",
-                  components: REMOVE_SELECT_DOWN_ARROW,
-                  filterOption: filterSlots,
-                  isValidNewOption: isValidTimeSlotOption,
-                  name: "wdays.".concat(day, ".periods[").concat(index, "].endTime"),
-                  options: endTimeOptions(period),
-                  placeholder: t("neetoMolecules.schedule.endTime"),
-                  strategy: "fixed",
-                  styles: BLUR_TEXT_WHEN_SELECT_MENU_IS_OPEN,
-                  value: neetoCist.findBy({
-                    value: period === null || period === void 0 ? void 0 : period.endTime
-                  }, endTimeOptions(period)),
-                  onChange: function onChange(e) {
-                    return handleChange(index, "endTime", e);
-                  }
+                className: classnames("flex gap-2 @xl:gap-3", {
+                  "items-start": !compact,
+                  "items-center": compact
+                }),
+                children: [renderField({
+                  index: index,
+                  period: period,
+                  hasError: hasError,
+                  field: "startTime",
+                  options: startTimeOptions
+                }), compact && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+                  className: "neeto-ui-text-gray-600 flex-shrink-0 select-none",
+                  component: "span",
+                  children: "-"
+                }), renderField({
+                  index: index,
+                  period: period,
+                  hasError: hasError,
+                  field: "endTime",
+                  options: endTimeOptions
                 }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-                  className: "flex-shrink-0 self-start",
+                  "aria-label": t("neetoMolecules.schedule.deletePeriod"),
                   "data-testid": "delete-period-button",
-                  icon: Delete,
+                  icon: Close,
                   style: "text",
+                  className: classnames("flex-shrink-0", {
+                    "self-start": !compact
+                  }),
                   onClick: function onClick() {
                     return handleDeleteRow(arrayHelpers, index);
                   }
                 })]
-              }), /*#__PURE__*/jsxRuntime.jsx(formik.ErrorMessage, {
-                name: "wdays.".concat(day, ".periods[").concat(index, "]"),
-                children: function children(message) {
-                  return _typeof(message) !== "object" && /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "neeto-ui-text-error-500 mt-1 w-11/12 px-2 text-xs",
-                    children: message
-                  });
-                }
+              }), hasError && /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "neeto-ui-text-error-500 mt-1 text-xs",
+                children: periodError
               })]
             }, "wdays.".concat(day, ".periods[").concat(index, "]"));
           })
         }), values.wdays[day].available && allowAddPeriod && /*#__PURE__*/jsxRuntime.jsx(Button, {
-          className: "absolute end-14 top-3 ms-auto flex-shrink-0 @xl:static",
           "data-testid": "add-new-period-button",
           icon: Plus,
           style: "secondary",
+          className: classnames("absolute end-14 top-3 flex-shrink-0 @xl:static", {
+            "ms-auto": !compact,
+            "@xl:ms-auto": compact
+          }),
           tooltipProps: {
             content: t("neetoMolecules.schedule.addNewPeriod"),
             position: "top",
@@ -714,7 +838,8 @@ var Form$1 = function Form(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useContext = React.useContext(ScheduleContext),
-    firstDay = _useContext.firstDay;
+    firstDay = _useContext.firstDay,
+    compact = _useContext.compact;
   var restoreDeletedPeriods = function restoreDeletedPeriods() {
     setFieldValue("wdays.".concat(day, ".periods"), deletedPeriods);
   };
@@ -750,13 +875,20 @@ var Form$1 = function Form(_ref) {
     return setWdaysToCopy(e.target.checked ? ramda.append(day) : ramda.without([day]));
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "neeto-ui-rounded-md neeto-ui-border-gray-300 neeto-ui-bg-white relative mb-3 w-full border px-4 @container last:mb-0 md:px-6",
+    className: classnames("neeto-ui-bg-white @container relative w-full px-4 md:px-6", {
+      "neeto-ui-rounded-md neeto-ui-border-gray-300 mb-3 border last:mb-0": !compact,
+      "neeto-ui-border-gray-200 border-b last:border-b-0": compact
+    }),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "@xl:flex-no-wrap my-4 flex w-full flex-wrap items-start gap-2 @xl:flex-nowrap @xl:gap-4" // Added `@xl:flex-no-wrap` since neetoCal is using old version of tailwind
-      ,
       "data-testid": "working-day-container",
+      className: classnames("@xl:flex-no-wrap flex w-full flex-wrap gap-2 @xl:flex-nowrap @xl:gap-4", {
+        "my-4 items-start": !compact,
+        "my-3 items-start @xl:min-h-8": compact
+      }),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classnames("flex w-36 flex-shrink-0 items-center justify-start @xl:mt-1", {
+        className: classnames("flex w-36 flex-shrink-0 items-center justify-start", {
+          "@xl:mt-1": !compact,
+          "@xl:min-h-8": compact,
           "mb-3 @xl:mb-0": neetoCist.isPresent((_values$wdays$day = values.wdays[day]) === null || _values$wdays$day === void 0 ? void 0 : _values$wdays$day.periods)
         }),
         children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
@@ -771,14 +903,22 @@ var Form$1 = function Form(_ref) {
           component: "span",
           "data-testid": general.joinHyphenCase(day, "day-text"),
           style: "body2",
-          weight: values.wdays[day].available ? "semibold" : "normal",
           className: classnames("ms-2 capitalize", {
             "neeto-ui-text-gray-600": !values.wdays[day].available
           }),
+          weight: compact || values.wdays[day].available ? "semibold" : "normal",
           children: t("neetoMolecules.schedule.days.".concat(day))
         })]
       }), /*#__PURE__*/jsxRuntime.jsx(ScheduleRow, {
         day: day
+      }), !values.wdays[day].available && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        component: "span",
+        "data-testid": general.joinHyphenCase(day, "unavailable-time-text"),
+        style: "body2",
+        className: classnames("neeto-ui-text-gray-500", {
+          "@xl:leading-8": compact
+        }),
+        children: t("neetoMolecules.schedule.unavailable")
       }), values.wdays[day].available && /*#__PURE__*/jsxRuntime.jsxs(Dropdown, {
         closeOnSelect: true,
         buttonStyle: "secondary",
@@ -886,6 +1026,8 @@ var Header = function Header(_ref) {
     isSubmitting = _useFormikContext.isSubmitting;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useContext = React.useContext(ScheduleContext),
+    compact = _useContext.compact;
   var _useState = React.useState(getTimeZoneAndTime()),
     _useState2 = _slicedToArray(_useState, 2),
     timeZoneAndTime = _useState2[0],
@@ -906,7 +1048,10 @@ var Header = function Header(_ref) {
     };
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "mb-6 flex flex-wrap justify-between gap-2",
+    className: classnames("flex flex-wrap justify-between gap-2", {
+      "mb-6": !compact,
+      "neeto-ui-bg-gray-100 neeto-ui-border-gray-200 items-center border-t px-4 py-3 md:px-6": compact
+    }),
     children: [showTimeZone && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center gap-3",
       "data-testid": "schedule-timezone-header",
@@ -936,8 +1081,10 @@ var Header = function Header(_ref) {
         }]
       })]
     }), isEditing ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center gap-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
+      className: classnames("flex items-center gap-2", {
+        "flex-row-reverse": compact
+      }),
+      children: [(!compact || dirty) && /*#__PURE__*/jsxRuntime.jsx(Button, {
         "data-testid": "reset-button",
         style: "secondary",
         label: !dirty ? t("neetoMolecules.common.actions.cancel") : t("neetoMolecules.common.actions.reset"),
@@ -990,7 +1137,9 @@ var Schedule = /*#__PURE__*/React.forwardRef(function (_ref, scheduleRef) {
     _ref$slotInterval = _ref.slotInterval,
     slotInterval = _ref$slotInterval === void 0 ? DEFAULT_SLOT_INTERVAL : _ref$slotInterval,
     _ref$hourFormat = _ref.hourFormat,
-    hourFormat = _ref$hourFormat === void 0 ? DEFAULT_HOUR_FORMAT : _ref$hourFormat;
+    hourFormat = _ref$hourFormat === void 0 ? DEFAULT_HOUR_FORMAT : _ref$hourFormat,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact;
   var validationSchema = React.useMemo(getScheduleValidationSchema, []);
   var getInitialFormValues = function getInitialFormValues() {
     var isSubmitHandler = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -1009,10 +1158,13 @@ var Schedule = /*#__PURE__*/React.forwardRef(function (_ref, scheduleRef) {
       allowAddPeriod: allowAddPeriod,
       firstDay: firstDay,
       slotInterval: slotInterval,
-      hourFormat: hourFormat
+      hourFormat: hourFormat,
+      compact: compact
     },
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "neeto-molecules-schedule neeto-ui-border-gray-200 flex-shrink-0",
+      className: classnames("neeto-molecules-schedule neeto-ui-border-gray-200 flex-shrink-0", {
+        "neeto-ui-rounded-md overflow-hidden border": compact
+      }),
       children: /*#__PURE__*/jsxRuntime.jsx(formik.Formik, {
         validationSchema: validationSchema,
         enableReinitialize: true,
@@ -1023,7 +1175,7 @@ var Schedule = /*#__PURE__*/React.forwardRef(function (_ref, scheduleRef) {
           handleSubmit(processFormValues(values, firstDay), getInitialFormValues(true));
         },
         children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [showHeader && /*#__PURE__*/jsxRuntime.jsx(Header, {
+          children: [showHeader && !compact && /*#__PURE__*/jsxRuntime.jsx(Header, {
             isCreating: isCreating,
             isEditable: isEditable,
             isEditing: isEditing,
@@ -1036,6 +1188,12 @@ var Schedule = /*#__PURE__*/React.forwardRef(function (_ref, scheduleRef) {
             })
           }) : /*#__PURE__*/jsxRuntime.jsx(DisplayAvailability, {
             periods: periods
+          }), showHeader && compact && /*#__PURE__*/jsxRuntime.jsx(Header, {
+            isCreating: isCreating,
+            isEditable: isEditable,
+            isEditing: isEditing,
+            setIsEditing: setIsEditing,
+            showTimeZone: showTimeZone
           })]
         })
       })