@mailstep/design-system 0.7.25-beta.2 → 0.7.25-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.25-beta.2",
+  "version": "0.7.25-beta.4",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Scheduler/Scheduler.js

@@ -8,10 +8,11 @@ import { TimeSlots } from './components/TimeSlots';
 import { useChangeDate } from './hooks/useChangeDate';
 import { generateTimeArray } from './utils/generateTimeArray';
 import { getClosestStep } from './utils/getClosestStep';
+import { x } from '@xstyled/styled-components';
 import { Container } from './styles';
 var timeArray = generateTimeArray();
 export var Scheduler = function (_a) {
-    var groups = _a.groups, activeHours = _a.activeHours, data = _a.data, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleReloadTimeSlots = _a.handleReloadTimeSlots, handleTimeSlotClick = _a.handleTimeSlotClick, isLoading = _a.isLoading;
+    var groups = _a.groups, activeHours = _a.activeHours, data = _a.data, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleReloadTimeSlots = _a.handleReloadTimeSlots, handleTimeSlotClick = _a.handleTimeSlotClick, isLoading = _a.isLoading, timeSlotDefinitions = _a.timeSlotDefinitions;
     var groupedTimeSlots = useMemo(function () { return groupBy(data, function (_a) {
         var groupId = _a.groupId, from = _a.from;
         return "".concat(groupId, "-").concat(getClosestStep(from));
@@ -23,5 +24,5 @@ export var Scheduler = function (_a) {
     }), handlePrevDay = _c.handlePrevDay, handleNextDay = _c.handleNextDay, handleChangeDate = _c.handleChangeDate, date = _c.date, isTodayDate = _c.isTodayDate;
     if (!(groups === null || groups === void 0 ? void 0 : groups.length))
         return null;
-    return (_jsxs("div", { children: [_jsx(DateChanger, { isLoading: isLoading, isDatepickerOpen: isDatepickerOpen, toggleDatepicker: toggleDatepicker, closeDatePicker: closeDatePicker, handlePrevDay: handlePrevDay, handleNextDay: handleNextDay, handleChangeDate: handleChangeDate, date: date }), _jsxs(Container, { children: [_jsx(Groups, { groups: groups }), _jsx(TimeSlots, { timeArray: timeArray, groups: groups, activeHours: activeHours, timeSlots: groupedTimeSlots, handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : undefined, handleTimeSlotClick: !isLoading ? handleTimeSlotClick : undefined, isTodayDate: isTodayDate })] })] }));
+    return (_jsxs(x.div, { w: "100%", h: "100%", children: [_jsx(DateChanger, { isLoading: isLoading, isDatepickerOpen: isDatepickerOpen, toggleDatepicker: toggleDatepicker, closeDatePicker: closeDatePicker, handlePrevDay: handlePrevDay, handleNextDay: handleNextDay, handleChangeDate: handleChangeDate, date: date }), _jsxs(Container, { children: [_jsx(Groups, { groups: groups }), _jsx(TimeSlots, { timeArray: timeArray, groups: groups, activeHours: activeHours, timeSlots: groupedTimeSlots, handleSelectTimeSlot: !isLoading ? handleSelectTimeSlot : undefined, handleTimeSlotClick: !isLoading ? handleTimeSlotClick : undefined, isTodayDate: isTodayDate, date: date, timeSlotDefinitions: timeSlotDefinitions })] })] }));
 };

package/ui/Blocks/Scheduler/components/BookedTimeSlots/index.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import type { SchedulerProps, TimeSlotType } from '../../types';
+type BookedTimeSlotsProps = {
+    bookedTimeSlots: TimeSlotType[];
+    timeSlotDefinitions: SchedulerProps['timeSlotDefinitions'];
+    handleTimeSlotClick?: SchedulerProps['handleTimeSlotClick'];
+    time: string;
+};
+export declare const BookedTimeSlots: FC<BookedTimeSlotsProps>;
+export {};

package/ui/Blocks/Scheduler/components/BookedTimeSlots/index.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { convertDateToTime } from '../../utils/convertDateToTime';
+import { convertMinutesToDuration } from '../../utils/convertMinutesToDuration';
+import { getMinutesFromTime } from '../../utils/getMinutesFromTime';
+import { x } from '@xstyled/styled-components';
+import get from 'lodash/get';
+import { Body, BookedTimeSlot, Header } from './styles';
+export var BookedTimeSlots = function (_a) {
+    var bookedTimeSlots = _a.bookedTimeSlots, timeSlotDefinitions = _a.timeSlotDefinitions, handleTimeSlotClick = _a.handleTimeSlotClick, time = _a.time;
+    return (_jsx(_Fragment, { children: bookedTimeSlots.map(function (_a) {
+            var _b;
+            var id = _a.id, from = _a.from, to = _a.to, rest = __rest(_a, ["id", "from", "to"]);
+            var startTime = convertDateToTime(new Date(from));
+            var endTime = convertDateToTime(new Date(to));
+            var startTimeInMinutes = getMinutesFromTime(startTime);
+            var endTimeInMinutes = getMinutesFromTime(endTime);
+            var totalInMinutes = endTimeInMinutes - startTimeInMinutes;
+            var count = (timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.count) ? get(rest, timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.count) : 0;
+            return (_jsxs(BookedTimeSlot, { startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1, heightInMinutes: totalInMinutes - 2, onClick: handleTimeSlotClick === null || handleTimeSlotClick === void 0 ? void 0 : handleTimeSlotClick(id), children: [_jsxs(Header, { children: [_jsx("div", { children: "".concat(startTime, " - ").concat(endTime, " (").concat(convertMinutesToDuration(totalInMinutes), ")") }), _jsxs(x.div, { display: "flex", gap: "6px", alignItems: "center", children: [!!count && count, timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.icon] })] }), _jsx(Body, { children: (_b = timeSlotDefinitions === null || timeSlotDefinitions === void 0 ? void 0 : timeSlotDefinitions.data) === null || _b === void 0 ? void 0 : _b.map(function (key) {
+                            var value = get(rest, key);
+                            return _jsx("span", { children: Array.isArray(value) ? value.join(', ') : value }, "".concat(key, "-").concat(time));
+                        }) })] }, id));
+        }) }));
+};

package/ui/Blocks/Scheduler/components/BookedTimeSlots/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const BookedTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    startPoint: number;
+    heightInMinutes: number;
+}, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Body: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/Scheduler/components/BookedTimeSlots/styles.js

@@ -0,0 +1,16 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { minuteHeight } from '../../utils/constants';
+import styled, { th } from '@xstyled/styled-components';
+export var BookedTimeSlot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n  overflow-y: auto;\n  text-align: left;\n"], ["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n  overflow-y: auto;\n  text-align: left;\n"])), function (_a) {
+    var startPoint = _a.startPoint;
+    return "".concat(startPoint * minuteHeight, "px");
+}, th.color('bgLightGray1'), th.shadow('gridShadow'), function (_a) {
+    var heightInMinutes = _a.heightInMinutes;
+    return "".concat(heightInMinutes * minuteHeight, "px");
+}, th.color('green60'));
+export var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  height: fit-content;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  height: fit-content;\n  align-items: center;\n"])));
+export var Body = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 6px;\n  gap: 6px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-top: 6px;\n  gap: 6px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/Scheduler/components/Groups/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { groupsHeight, timeIntervalWidth } from '../../utils/constants';
 import styled, { th } from '@xstyled/styled-components';
-export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n"], ["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n"])), groupsHeight, th.color('lightGray6'));
-export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (_a) {
+export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: fit-content;\n"], ["\n  height: ", "px;\n  display: flex;\n  border-bottom: 1px solid ", ";\n  width: fit-content;\n"])), groupsHeight, th.color('lightGray6'));
+export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  background-color: ", ";\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  height: 100%;\n  font-size: 14px;\n  font-weight: 600;\n  padding: 10px;\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (_a) {
     var bg = _a.bg;
     return bg || th.color('bgLightGray');
 }, function (_a) {

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useRangeSelection.d.ts

@@ -1,6 +1,7 @@
 import { type SchedulerProps } from '../../../types';
 type Props = {
     handleSelectTimeSlot: SchedulerProps['handleSelectTimeSlot'];
+    date: Date;
 };
 type HookType = (props: Props) => {
     handleMouseDown: (index: number, groupId: string) => () => void;

package/ui/Blocks/Scheduler/components/TimeSlots/hooks/useRangeSelection.js

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { convertIndexToISOString } from '../../../utils/convertIndexToISOString';
 export var useRangeSelection = function (_a) {
-    var handleSelectTimeSlot = _a.handleSelectTimeSlot;
+    var handleSelectTimeSlot = _a.handleSelectTimeSlot, date = _a.date;
     var _b = useState(false), isSelecting = _b[0], setIsSelecting = _b[1];
     var _c = useState([]), selectionRange = _c[0], setSelectionRange = _c[1];
     var _d = useState(null), selectedGroup = _d[0], setSelectedGroup = _d[1];
@@ -30,13 +30,13 @@ export var useRangeSelection = function (_a) {
             var end = ((_a = selectionRange.at(-1)) !== null && _a !== void 0 ? _a : 0) + 1;
             handleSelectTimeSlot === null || handleSelectTimeSlot === void 0 ? void 0 : handleSelectTimeSlot({
                 groupId: selectedGroup,
-                from: convertIndexToISOString(start),
-                to: convertIndexToISOString(end)
+                from: convertIndexToISOString(start, date),
+                to: convertIndexToISOString(end, date)
             });
         }
         setSelectedGroup(null);
         setSelectionRange([]);
-    }, [handleSelectTimeSlot, selectedGroup, selectionRange]);
+    }, [date, handleSelectTimeSlot, selectedGroup, selectionRange]);
     var isSlotSelected = useCallback(function (index, groupId) { return groupId === selectedGroup && selectionRange.includes(index); }, [selectionRange, selectedGroup]);
     return {
         handleMouseDown: handleMouseDown,

package/ui/Blocks/Scheduler/components/TimeSlots/index.d.ts

@@ -8,6 +8,8 @@ type TimeSlotsProps = {
     handleSelectTimeSlot: SchedulerProps['handleSelectTimeSlot'];
     handleTimeSlotClick?: SchedulerProps['handleTimeSlotClick'];
     isTodayDate: boolean;
+    date: Date;
+    timeSlotDefinitions: SchedulerProps['timeSlotDefinitions'];
 };
 export declare const TimeSlots: FC<TimeSlotsProps>;
 export {};

package/ui/Blocks/Scheduler/components/TimeSlots/index.js

@@ -1,29 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { convertDateToTime } from '../../utils/convertDateToTime';
-import { getMinutesFromTime } from '../../utils/getMinutesFromTime';
 import { isActiveTime } from '../../utils/isActiveTime';
+import { BookedTimeSlots } from '../BookedTimeSlots';
 import { CurrentTimeMarker } from '../CurrentTimeMarker';
 import { useRangeSelection } from './hooks/useRangeSelection';
 import { useScroll } from './hooks/useScroll';
-import { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer, BookedTimeSlot } from './styles';
+import { EmptyTimeSlot, TimeInterval, TimeRow, TimeSlotsContainer } from './styles';
 export var TimeSlots = function (_a) {
-    var timeArray = _a.timeArray, groups = _a.groups, activeHours = _a.activeHours, timeSlots = _a.timeSlots, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleTimeSlotClick = _a.handleTimeSlotClick, isTodayDate = _a.isTodayDate;
+    var timeArray = _a.timeArray, groups = _a.groups, activeHours = _a.activeHours, timeSlots = _a.timeSlots, handleSelectTimeSlot = _a.handleSelectTimeSlot, handleTimeSlotClick = _a.handleTimeSlotClick, isTodayDate = _a.isTodayDate, date = _a.date, timeSlotDefinitions = _a.timeSlotDefinitions;
     var containerRef = useScroll().containerRef;
-    var _b = useRangeSelection({ handleSelectTimeSlot: handleSelectTimeSlot }), handleMouseUp = _b.handleMouseUp, handleMouseDown = _b.handleMouseDown, handleMouseOver = _b.handleMouseOver, isSlotSelected = _b.isSlotSelected;
+    var _b = useRangeSelection({ handleSelectTimeSlot: handleSelectTimeSlot, date: date }), handleMouseUp = _b.handleMouseUp, handleMouseDown = _b.handleMouseDown, handleMouseOver = _b.handleMouseOver, isSlotSelected = _b.isSlotSelected;
     return (_jsxs(TimeSlotsContainer, { ref: containerRef, children: [timeArray.map(function (time, index) {
                 var activeTime = isActiveTime({ activeHours: activeHours, time: time });
                 return (_jsxs(TimeRow, { disabled: !activeTime, "data-time": time, children: [_jsx(TimeInterval, { children: time }), groups === null || groups === void 0 ? void 0 : groups.map(function (group) {
                             var _a;
                             var bookedTimeSlots = (_a = timeSlots === null || timeSlots === void 0 ? void 0 : timeSlots["".concat(group.id, "-").concat(time)]) !== null && _a !== void 0 ? _a : [];
                             var canSelectSlot = !bookedTimeSlots.length && activeTime;
-                            return (_jsx(EmptyTimeSlot, { groupsCount: groups === null || groups === void 0 ? void 0 : groups.length, activeTime: activeTime, isSlotSelected: canSelectSlot && isSlotSelected(index, group.id), onMouseDown: canSelectSlot ? handleMouseDown(index, group.id) : undefined, onMouseOver: canSelectSlot ? handleMouseOver(index) : undefined, onMouseUp: canSelectSlot ? handleMouseUp : undefined, children: bookedTimeSlots.map(function (_a) {
-                                    var id = _a.id, from = _a.from, to = _a.to;
-                                    var startTime = convertDateToTime(new Date(from));
-                                    var endTime = convertDateToTime(new Date(to));
-                                    var startTimeInMinutes = getMinutesFromTime(startTime);
-                                    var endTimeInMinutes = getMinutesFromTime(endTime);
-                                    return (_jsx(BookedTimeSlot, { startPoint: startTimeInMinutes - getMinutesFromTime(time) + 1, heightInMinutes: endTimeInMinutes - startTimeInMinutes - 2, onClick: handleTimeSlotClick === null || handleTimeSlotClick === void 0 ? void 0 : handleTimeSlotClick(id), children: "".concat(startTime, " - ").concat(endTime) }, id));
-                                }) }, group.id));
+                            return (_jsx(EmptyTimeSlot, { groupsCount: groups === null || groups === void 0 ? void 0 : groups.length, activeTime: activeTime, isSlotSelected: canSelectSlot && isSlotSelected(index, group.id), onMouseDown: canSelectSlot ? handleMouseDown(index, group.id) : undefined, onMouseOver: canSelectSlot ? handleMouseOver(index) : undefined, onMouseUp: canSelectSlot ? handleMouseUp : undefined, children: _jsx(BookedTimeSlots, { bookedTimeSlots: bookedTimeSlots, timeSlotDefinitions: timeSlotDefinitions, time: time, handleTimeSlotClick: handleTimeSlotClick }) }, group.id));
                         })] }, time));
             }), isTodayDate && _jsx(CurrentTimeMarker, {})] }));
 };

package/ui/Blocks/Scheduler/components/TimeSlots/styles.d.ts

@@ -4,10 +4,6 @@ export declare const EmptyTimeSlot: import("styled-components").StyledComponent<
     activeTime: boolean;
     groupsCount: number;
 }, never>;
-export declare const BookedTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    startPoint: number;
-    heightInMinutes: number;
-}, never>;
 export declare const TimeInterval: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const TimeRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     disabled: boolean;

package/ui/Blocks/Scheduler/components/TimeSlots/styles.js

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { minuteHeight, stepInMinutes, timeIntervalWidth } from '../../utils/constants';
 import styled, { th } from '@xstyled/styled-components';
-export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", ";\n  max-width: 400px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  height: ", "px;\n  width: ", ";\n  max-width: 400px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), minuteHeight * stepInMinutes, function (_a) {
+export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  scroll-behavior: smooth;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  height: ", "px;\n  width: ", ";\n  max-width: 400px;\n  min-width: 300px;\n  position: relative;\n  background-color: ", ";\n  cursor: ", ";\n  border-right: 1px solid ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), minuteHeight * stepInMinutes, function (_a) {
     var groupsCount = _a.groupsCount;
     return "calc((100% / ".concat(groupsCount, ") - (").concat(timeIntervalWidth, "px / ").concat(groupsCount, "))");
 }, function (_a) {
@@ -18,16 +18,9 @@ export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __
     var isSlotSelected = _a.isSlotSelected, activeTime = _a.activeTime;
     return (!isSlotSelected && activeTime ? th.color('blue10') : '');
 });
-export var BookedTimeSlot = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n"], ["\n  position: absolute;\n  z-index: 1;\n  top: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  box-shadow: ", ";\n  height: ", ";\n  border-left: 4px solid ", ";\n  padding: 10px;\n  margin-right: 10px;\n  margin-left: 6px; // -4px border\n  width: calc(100% - 16px);\n  cursor: pointer;\n"])), function (_a) {
-    var startPoint = _a.startPoint;
-    return "".concat(startPoint * minuteHeight, "px");
-}, th.color('bgLightGray1'), th.shadow('gridShadow'), function (_a) {
-    var heightInMinutes = _a.heightInMinutes;
-    return "".concat(heightInMinutes * minuteHeight, "px");
-}, th.color('green60'));
-export var TimeInterval = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n"], ["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'));
-export var TimeRow = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
+export var TimeInterval = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n"], ["\n  font-size: 12px;\n  font-weight: 500;\n  height: ", "px;\n  width: ", "px;\n  border-right: 1px solid ", ";\n  padding: 10px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'));
+export var TimeRow = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? th.color('lightGray7') : 'white');
 }, th.color('lightGray6'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/Scheduler/stories/Scheduler.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Pallet } from '../../../Elements/Icon';
 import { LinguiContainer } from '../../../utils/LinguiContainer';
 import { Scheduler } from '../Scheduler';
 var groups = [
@@ -12,16 +13,93 @@ var activeHours = {
     end: '19:00'
 };
 var timeSlots = [
-    { id: '1', from: '2025-02-06T07:30:00Z', to: '2025-02-06T09:00:00Z', groupId: 'group1' },
-    { id: '2', from: '2025-02-06T14:35:00Z', to: '2025-02-06T16:30:00Z', groupId: 'group1' },
-    { id: '3', from: '2025-02-06T09:40:00Z', to: '2025-02-06T11:45:00Z', groupId: 'group2' },
-    { id: '4', from: '2025-02-06T12:05:00Z', to: '2025-02-06T15:30:00Z', groupId: 'group2' },
-    { id: '5', from: '2025-02-06T08:15:00Z', to: '2025-02-06T09:45:00Z', groupId: 'group3' },
-    { id: '6', from: '2025-02-06T11:30:00Z', to: '2025-02-06T13:15:00Z', groupId: 'group3' },
-    { id: '7', from: '2025-02-06T07:30:00Z', to: '2025-02-06T09:15:00Z', groupId: 'group4' },
-    { id: '8', from: '2025-02-06T09:30:00Z', to: '2025-02-06T11:30:00Z', groupId: 'group4' },
-    { id: '9', from: '2025-02-06T13:30:00Z', to: '2025-02-06T15:00:00Z', groupId: 'group4' }
+    {
+        id: '1',
+        from: '2025-02-06T07:30:00Z',
+        to: '2025-02-06T08:00:00Z',
+        groupId: 'group1',
+        count: 2,
+        organisation: 'Deagostiny',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '2',
+        from: '2025-02-06T14:35:00Z',
+        to: '2025-02-06T16:30:00Z',
+        groupId: 'group1',
+        count: 5,
+        organisation: 'Wendys',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '3',
+        from: '2025-02-06T09:40:00Z',
+        to: '2025-02-06T11:45:00Z',
+        groupId: 'group2',
+        count: 1,
+        organisation: 'Deagostiny',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '4',
+        from: '2025-02-06T12:05:00Z',
+        to: '2025-02-06T15:30:00Z',
+        groupId: 'group2',
+        count: 2,
+        organisation: 'Top4Sport',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '5',
+        from: '2025-02-06T08:15:00Z',
+        to: '2025-02-06T09:45:00Z',
+        groupId: 'group3',
+        count: 2,
+        organisation: 'Aktin',
+        carrier: 'Česká pošta'
+    },
+    {
+        id: '6',
+        from: '2025-02-06T11:30:00Z',
+        to: '2025-02-06T13:15:00Z',
+        groupId: 'group3',
+        count: 2,
+        organisation: 'Wendys',
+        carrier: 'DPL'
+    },
+    {
+        id: '7',
+        from: '2025-02-06T07:30:00Z',
+        to: '2025-02-06T09:15:00Z',
+        groupId: 'group4',
+        count: 2,
+        organisation: 'Top4Sport',
+        carrier: 'DPL'
+    },
+    {
+        id: '8',
+        from: '2025-02-06T09:30:00Z',
+        to: '2025-02-06T11:30:00Z',
+        groupId: 'group4',
+        count: 2,
+        organisation: 'Aktin',
+        carrier: 'DPL'
+    },
+    {
+        id: '9',
+        from: '2025-02-06T13:30:00Z',
+        to: '2025-02-06T15:00:00Z',
+        groupId: 'group4',
+        count: 2,
+        organisation: 'Wendys',
+        carrier: 'DPL'
+    }
 ];
+var timeSlotDefinitions = {
+    count: 'count',
+    icon: _jsx(Pallet, { height: "22px", width: "22px" }),
+    data: ['organisation', 'carrier']
+};
 var handleSelectTimeSlot = function (data) {
     console.log(data);
 };
@@ -31,5 +109,5 @@ var meta = {
 };
 export default meta;
 export var Default = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(Scheduler, { groups: groups, activeHours: activeHours, data: timeSlots, handleSelectTimeSlot: handleSelectTimeSlot }) }));
+    return (_jsx(LinguiContainer, { children: _jsx(Scheduler, { groups: groups, activeHours: activeHours, data: timeSlots, handleSelectTimeSlot: handleSelectTimeSlot, timeSlotDefinitions: timeSlotDefinitions }) }));
 };

package/ui/Blocks/Scheduler/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type GroupType = {
     id: string;
     name: string;
@@ -12,12 +13,17 @@ export type TimeSlotType = {
     from: string;
     to: string;
     groupId: string;
-};
+} & Record<string, unknown>;
 export type SelectedTimeSlotType = {
     groupId: string;
     from: string;
     to: string;
 };
+export type TimeSlotDefinitionType = {
+    count?: string;
+    icon?: JSX.Element;
+    data?: string[];
+};
 export type SchedulerProps = {
     groups?: GroupType[];
     activeHours?: ActiveHours;
@@ -26,4 +32,5 @@ export type SchedulerProps = {
     handleReloadTimeSlots?: (date: Date) => Promise<void>;
     handleTimeSlotClick?: (timeSlotId: string) => () => void;
     isLoading?: boolean;
+    timeSlotDefinitions?: TimeSlotDefinitionType;
 };

package/ui/Blocks/Scheduler/utils/convertIndexToISOString.d.ts

@@ -1 +1 @@
-export declare const convertIndexToISOString: (index: number) => string;
+export declare const convertIndexToISOString: (index: number, date: Date) => string;

package/ui/Blocks/Scheduler/utils/convertIndexToISOString.js

@@ -1,9 +1,8 @@
 import { stepInMinutes } from './constants';
-export var convertIndexToISOString = function (index) {
+export var convertIndexToISOString = function (index, date) {
     var totalMinutes = stepInMinutes * index;
     var hours = Math.floor(totalMinutes / 60);
     var minutes = totalMinutes % 60;
-    var today = new Date();
-    today.setHours(hours, minutes, 0, 0);
-    return today.toISOString();
+    date.setHours(hours, minutes, 0, 0);
+    return date.toISOString();
 };

package/ui/Blocks/Scheduler/utils/convertMinutesToDuration.d.ts

@@ -0,0 +1 @@
+export declare const convertMinutesToDuration: (minutes: number) => string;

package/ui/Blocks/Scheduler/utils/convertMinutesToDuration.js

@@ -0,0 +1,11 @@
+export var convertMinutesToDuration = function (minutes) {
+    var hours = Math.floor(minutes / 60);
+    var minutesLeft = minutes % 60;
+    if (!hours) {
+        return "".concat(minutesLeft, " min");
+    }
+    if (!minutesLeft) {
+        return "".concat(hours, "h");
+    }
+    return "".concat(hours, "h ").concat(minutesLeft, "m");
+};