@bigbinary/neeto-molecules 5.2.32 → 5.2.34

package/dist/Schedule.js

@@ -1,5 +1,6 @@
 import { createContext, useContext, memo, useMemo, useState, useEffect, useImperativeHandle, forwardRef } from 'react';
-import { useFormikContext, FieldArray, ErrorMessage, Formik, Form as Form$2 } from 'formik';
+import classnames from 'classnames';
+import { useFormikContext, FieldArray, Formik, Form as Form$2 } from 'formik';
 import { findIndexBy, isNotPresent, isPresent, toLabelAndValue, isNotEmpty, findBy, noop } from '@bigbinary/neeto-cist';
 import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils/general';
 import Typography from '@bigbinary/neetoui/Typography';
@@ -10,22 +11,20 @@ import { ianaTimezoneToHumanReadable } from '@bigbinary/neeto-time-zones';
 import i18next from 'i18next';
 import { dayjs } from '@bigbinary/neeto-commons-frontend/utils';
 import { timeFormat } from '@bigbinary/neeto-commons-frontend/utils/datetime';
-import { fromPairs, map, prop, pick, assoc, identity, uniq, pluck, difference, append, without } from 'ramda';
+import { fromPairs, map, prop, pick, assoc, uniq, pluck, difference, identity, append, without } from 'ramda';
 import * as yup from 'yup';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import classnames from 'classnames';
 import Copy from '@bigbinary/neeto-icons/Copy';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Button from '@bigbinary/neetoui/Button';
 import Label from '@bigbinary/neetoui/Label';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import Switch from '@bigbinary/neetoui/formik/Switch';
-import _typeof from '@babel/runtime/helpers/typeof';
 import Plus from '@bigbinary/neeto-icons/Plus';
-import Delete from '@bigbinary/neeto-icons/Delete';
+import Close from '@bigbinary/neeto-icons/Close';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Profile from '@bigbinary/neeto-team-members-frontend/Profile';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
@@ -48,13 +47,14 @@ var ScheduleContext = /*#__PURE__*/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;
@@ -65,9 +65,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";
@@ -176,10 +181,6 @@ yup.addMethod(yup.array, "ensureSlotsCantOverlap", function () {
     return new yup.ValidationError([firstError, secondError]);
   });
 });
-var isFromAndToSame = function isFromAndToSame(startTime, endTime) {
-  if (!startTime || !endTime) return true;
-  return dayjs(startTime, SLOT_TIME_FORMAT_24H).isSame(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)));
@@ -187,15 +188,12 @@ var sortDays = function sortDays(chosenIndex) {
 var wdayValidation = yup.object().shape({
   periods: yup.array().of(yup.object().shape({
     startTime: yup.string().required(i18next.t("neetoMolecules.schedule.errors.period.startTime")),
-    endTime: yup.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.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() {
@@ -361,17 +359,93 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
     t = _useTranslation.t;
   var _useContext = 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 (!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 (isNotPresent(visibleGroups)) {
+      return /*#__PURE__*/jsx("div", {
+        className: "px-4 py-3 md:px-6",
+        children: /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-gray-500",
+          style: "body2",
+          children: t("neetoMolecules.schedule.unavailable")
+        })
+      });
+    }
+    return /*#__PURE__*/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__*/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__*/jsx(Typography, {
+            className: "w-44 flex-shrink-0 text-end whitespace-nowrap",
+            "data-testid": joinHyphenCase(group.startDay, "day-text"),
+            style: "body2",
+            weight: "semibold",
+            children: dayRange
+          }), /*#__PURE__*/jsx("div", {
+            className: "flex flex-col gap-0.5",
+            children: group.ranges.map(function (range, index) {
+              return /*#__PURE__*/jsx(Typography, {
+                className: "neeto-ui-text-gray-700",
+                style: "body2",
+                "data-testid": "".concat(joinHyphenCase(group.startDay, "time-range"), "-").concat(index),
+                children: range
+              }, index);
+            })
+          })]
+        }, group.startDay);
+      })
+    });
+  }
   return /*#__PURE__*/jsx("div", {
     className: "flex w-full flex-col gap-y-3",
     children: sortDays(firstDay).map(function (day) {
-      var _sortPeriodsByKey;
+      var _sortPeriodsByKey2;
       return /*#__PURE__*/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),
@@ -383,11 +457,11 @@ var DisplayAvailability = function DisplayAvailability(_ref) {
           children: t("neetoMolecules.schedule.days.".concat(day))
         }), /*#__PURE__*/jsx("div", {
           className: "flex flex-grow flex-col items-center gap-y-4 sm:w-1/2",
-          children: isPresent(periods[day]) ? (_sortPeriodsByKey = sortPeriodsByKey({
+          children: 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__*/jsxs("div", {
               className: "flex items-center gap-x-4",
               children: [/*#__PURE__*/jsx(Typography, {
@@ -538,16 +612,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 = function ScheduleRow(_ref) {
   var day = _ref.day;
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values,
-    setFieldValue = _useFormikContext.setFieldValue;
+    setFieldValue = _useFormikContext.setFieldValue,
+    errors = _useFormikContext.errors,
+    touched = _useFormikContext.touched;
   var bookedSlots = values.wdays[day].periods;
   var _useContext = useContext(ScheduleContext),
     allowAddPeriod = _useContext.allowAddPeriod,
     slotInterval = _useContext.slotInterval,
-    hourFormat = _useContext.hourFormat;
+    hourFormat = _useContext.hourFormat,
+    compact = _useContext.compact;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var sortSlotsInterval = useMemo(function () {
@@ -580,84 +659,129 @@ var ScheduleRow = 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__*/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: 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__*/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__*/jsx(FieldArray, {
     name: "wdays.".concat(day, ".periods"),
     render: function render(arrayHelpers) {
       var _values$wdays$day, _values$wdays$day$per;
       return /*#__PURE__*/jsxs(Fragment, {
         children: [isPresent((_values$wdays$day = values.wdays[day]) === null || _values$wdays$day === void 0 ? void 0 : _values$wdays$day.periods) && /*#__PURE__*/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__*/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__*/jsxs("div", {
-                className: "flex items-start gap-2 @xl:gap-3",
                 "data-testid": "schedule-row",
-                children: [/*#__PURE__*/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: findBy({
-                    value: period === null || period === void 0 ? void 0 : period.startTime
-                  }, startTimeOptions(period)),
-                  onChange: function onChange(e) {
-                    return handleChange(index, "startTime", e);
-                  }
-                }), /*#__PURE__*/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: 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__*/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__*/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__*/jsx(ErrorMessage, {
-                name: "wdays.".concat(day, ".periods[").concat(index, "]"),
-                children: function children(message) {
-                  return _typeof(message) !== "object" && /*#__PURE__*/jsx("span", {
-                    className: "neeto-ui-text-error-500 mt-1 w-11/12 px-2 text-xs",
-                    children: message
-                  });
-                }
+              }), hasError && /*#__PURE__*/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__*/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",
@@ -691,7 +815,8 @@ var Form = function Form(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useContext = useContext(ScheduleContext),
-    firstDay = _useContext.firstDay;
+    firstDay = _useContext.firstDay,
+    compact = _useContext.compact;
   var restoreDeletedPeriods = function restoreDeletedPeriods() {
     setFieldValue("wdays.".concat(day, ".periods"), deletedPeriods);
   };
@@ -727,13 +852,20 @@ var Form = function Form(_ref) {
     return setWdaysToCopy(e.target.checked ? append(day) : without([day]));
   };
   return /*#__PURE__*/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__*/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__*/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": isPresent((_values$wdays$day = values.wdays[day]) === null || _values$wdays$day === void 0 ? void 0 : _values$wdays$day.periods)
         }),
         children: [/*#__PURE__*/jsx(Switch, {
@@ -748,14 +880,22 @@ var Form = function Form(_ref) {
           component: "span",
           "data-testid": 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__*/jsx(ScheduleRow$1, {
         day: day
+      }), !values.wdays[day].available && /*#__PURE__*/jsx(Typography, {
+        component: "span",
+        "data-testid": 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__*/jsxs(Dropdown, {
         closeOnSelect: true,
         buttonStyle: "secondary",
@@ -863,6 +1003,8 @@ var Header = function Header(_ref) {
     isSubmitting = _useFormikContext.isSubmitting;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useContext = useContext(ScheduleContext),
+    compact = _useContext.compact;
   var _useState = useState(getTimeZoneAndTime()),
     _useState2 = _slicedToArray(_useState, 2),
     timeZoneAndTime = _useState2[0],
@@ -883,7 +1025,10 @@ var Header = function Header(_ref) {
     };
   }, []);
   return /*#__PURE__*/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__*/jsxs("div", {
       className: "flex items-center gap-3",
       "data-testid": "schedule-timezone-header",
@@ -913,8 +1058,10 @@ var Header = function Header(_ref) {
         }]
       })]
     }), isEditing ? /*#__PURE__*/jsxs("div", {
-      className: "flex items-center gap-2",
-      children: [/*#__PURE__*/jsx(Button, {
+      className: classnames("flex items-center gap-2", {
+        "flex-row-reverse": compact
+      }),
+      children: [(!compact || dirty) && /*#__PURE__*/jsx(Button, {
         "data-testid": "reset-button",
         style: "secondary",
         label: !dirty ? t("neetoMolecules.common.actions.cancel") : t("neetoMolecules.common.actions.reset"),
@@ -967,7 +1114,9 @@ var Schedule = /*#__PURE__*/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 = useMemo(getScheduleValidationSchema, []);
   var getInitialFormValues = function getInitialFormValues() {
     var isSubmitHandler = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -986,10 +1135,13 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
       allowAddPeriod: allowAddPeriod,
       firstDay: firstDay,
       slotInterval: slotInterval,
-      hourFormat: hourFormat
+      hourFormat: hourFormat,
+      compact: compact
     },
     children: /*#__PURE__*/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__*/jsx(Formik, {
         validationSchema: validationSchema,
         enableReinitialize: true,
@@ -1000,7 +1152,7 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
           handleSubmit(processFormValues(values, firstDay), getInitialFormValues(true));
         },
         children: /*#__PURE__*/jsxs(Fragment, {
-          children: [showHeader && /*#__PURE__*/jsx(Header, {
+          children: [showHeader && !compact && /*#__PURE__*/jsx(Header, {
             isCreating: isCreating,
             isEditable: isEditable,
             isEditing: isEditing,
@@ -1013,6 +1165,12 @@ var Schedule = /*#__PURE__*/forwardRef(function (_ref, scheduleRef) {
             })
           }) : /*#__PURE__*/jsx(DisplayAvailability, {
             periods: periods
+          }), showHeader && compact && /*#__PURE__*/jsx(Header, {
+            isCreating: isCreating,
+            isEditable: isEditable,
+            isEditing: isEditing,
+            setIsEditing: setIsEditing,
+            showTimeZone: showTimeZone
           })]
         })
       })