ublo-lib 1.12.29 → 1.13.1

package/es/common/components/date-picker/calendar.js

@@ -13,31 +13,8 @@ import datePickerStyles from "./date-picker.module.css";
 import styles from "./calendar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ConfirmDateChangeForm = ({
-  lang,
-  cancel,
-  confirm
-}) => {
-  return _jsxs("div", {
-    className: styles.confirmDateChange,
-    children: [_jsx("div", {
-      className: styles.confirmDateChangeMessage,
-      children: Messages.get(lang, "warning-date-change-text")
-    }), _jsxs("div", {
-      className: styles.confirmDateChangeButtons,
-      children: [_jsx("button", {
-        className: classNames(styles.confirmDateChangeButton, styles.confirmDateChangeButtonCancel),
-        onClick: cancel,
-        children: Messages.get(lang, "warning-date-change-cancel")
-      }), _jsx("button", {
-        className: classNames(styles.confirmDateChangeButton, styles.confirmDateChangeButtonConfirm),
-        onClick: confirm,
-        children: Messages.get(lang, "warning-date-change-confirm")
-      })]
-    })]
-  });
-};
-const Calendar = ({
+export default React.memo(Calendar);
+function Calendar({
   date,
   mode,
   setMode,
@@ -49,8 +26,9 @@ const Calendar = ({
   rules,
   hideModes,
   singleDate,
-  submitOnSelectionEnd
-}) => {
+  submitOnSelectionEnd,
+  availabilities
+}) {
   const isDateObject = Utils.isDate(date);
   const _date = isDateObject ? date : new Date();
   const {
@@ -68,6 +46,7 @@ const Calendar = ({
   const [firstSelectedDate, setFirstSelectedDate] = React.useState();
   const [lastSelectedDate, setLastSelectedDate] = React.useState();
   const [showPopup, setShowPopup] = React.useState(false);
+  const [stays, setStays] = React.useState();
   const mustKeepSelected = firstRangeDate && !selecting && (Utils.isSaturday(firstRangeDate) && Utils.isSaturday(selectedDates[selectedDates.length - 1]) || Utils.isSunday(firstRangeDate) && Utils.isSunday(selectedDates[selectedDates.length - 1]));
   const gotoPreviousMonth = () => {
     const {
@@ -154,6 +133,37 @@ const Calendar = ({
   const isPast = month <= currentMonth && year <= currentYear;
   const showSubmit = !submitOnSelectionEnd && selectedDates.length > 0 && !selecting;
   const hide2ndMonth = display !== Data.DISPLAYS.DESKTOP;
+  React.useEffect(() => {
+    if (availabilities) {
+      const fetchAvailabilities = async () => {
+        setStays(undefined);
+        const bareStart = `${year}-${Utils.zeroPad(month, 2)}-01`;
+        const start = Utils.addDays(bareStart, -7);
+        const numberDays = hide2ndMonth ? 38 : 76;
+        const {
+          fetcher,
+          ...rest
+        } = availabilities;
+        const {
+          stays
+        } = await fetcher({
+          ...rest,
+          start,
+          numberDays
+        });
+        if (stays?.length) {
+          const formatedStays = stays.map(stay => {
+            return {
+              start: new Date(stay.start),
+              end: new Date(stay.end)
+            };
+          });
+          setStays(formatedStays);
+        }
+      };
+      fetchAvailabilities();
+    }
+  }, [availabilities, hide2ndMonth, month, year]);
   const classes = classNames(styles.calendar, {
     [styles.calendarTouch]: hide2ndMonth,
     [styles.hiddenModes]: hideModes
@@ -190,7 +200,7 @@ const Calendar = ({
       singleDate: singleDate,
       submitOnSelectionEnd: submitOnSelectionEnd,
       onSubmit: submit,
-      setShowPopup: setShowPopup
+      stays: stays
     }), !hide2ndMonth && _jsx(Month, {
       mode: mode,
       setMode: setMode,
@@ -207,7 +217,8 @@ const Calendar = ({
       setLastSelectedDate: setLastSelectedDate,
       singleDate: singleDate,
       submitOnSelectionEnd: submitOnSelectionEnd,
-      onSubmit: submit
+      onSubmit: submit,
+      stays: stays
     }), showSubmit && _jsxs(Button, {
       className: styles.submit,
       onClick: () => submit(selectedDates),
@@ -228,5 +239,28 @@ const Calendar = ({
       })
     })]
   });
-};
-export default React.memo(Calendar);
+}
+function ConfirmDateChangeForm({
+  lang,
+  cancel,
+  confirm
+}) {
+  return _jsxs("div", {
+    className: styles.confirmDateChange,
+    children: [_jsx("div", {
+      className: styles.confirmDateChangeMessage,
+      children: Messages.get(lang, "warning-date-change-text")
+    }), _jsxs("div", {
+      className: styles.confirmDateChangeButtons,
+      children: [_jsx("button", {
+        className: classNames(styles.confirmDateChangeButton, styles.confirmDateChangeButtonCancel),
+        onClick: cancel,
+        children: Messages.get(lang, "warning-date-change-cancel")
+      }), _jsx("button", {
+        className: classNames(styles.confirmDateChangeButton, styles.confirmDateChangeButtonConfirm),
+        onClick: confirm,
+        children: Messages.get(lang, "warning-date-change-confirm")
+      })]
+    })]
+  });
+}

package/es/common/components/date-picker/date-item.js

@@ -20,13 +20,18 @@ const DateItem = ({
   setSelecting,
   singleDate,
   submitOnSelectionEnd,
-  onSubmit
+  onSubmit,
+  stays
 }) => {
   const today = new Date();
   const _date = new Date(date.join("-"));
   _date.setHours(0, 0, 0, 0);
   const isToday = Utils.isSameDay(_date, today);
   const inMonth = month && year && Utils.isSameMonth(_date, new Date([Utils.zeroPad(year, 2), Utils.zeroPad(month, 2), "01"].join("-")));
+  const enableAvailability = Boolean(stays);
+  const isAvailable = stays?.some(stay => {
+    return stay.start < _date && stay.end > _date;
+  }) || false;
   const firstDate = selectedDates[0];
   const isFirstSelected = selectedDates.map(Number).indexOf(Number(_date)) === 0;
   const isLastSelected = selectedDates.map(Number).indexOf(Number(_date)) === selectedDates.length - 1;
@@ -95,7 +100,9 @@ const DateItem = ({
     [styles.dateNotInMonth]: !inMonth,
     [styles.dateIsPast]: isPastDate,
     [styles.dateSaturday]: mode === Data.MODES.SATURDAY && Utils.isSaturday(date),
-    [styles.dateSunday]: mode === Data.MODES.SUNDAY && Utils.isSunday(date)
+    [styles.dateSunday]: mode === Data.MODES.SUNDAY && Utils.isSunday(date),
+    [styles.available]: enableAvailability && isAvailable,
+    [styles.notAvailable]: enableAvailability && !isAvailable
   });
   return _jsx("button", {
     className: classes,

package/es/common/components/date-picker/date-item.module.css

@@ -1,6 +1,10 @@
 .date {
   width: 100%;
   padding: 8px 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
   font-size: 14px;
   text-align: center;
   cursor: pointer;
@@ -76,3 +80,20 @@
 .date:not(.dateIsPast):not(.dateSelected):hover {
   background-color: var(--ds-grey-200, #efefef);
 }
+
+.available::after,
+.notAvailable::after {
+  content: "";
+  flex: 0 0 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.available::after {
+  background-color: hsl(var(--green));
+}
+
+.notAvailable::after {
+  background-color: hsl(var(--red));
+}

package/es/common/components/date-picker/date-picker.js

@@ -20,7 +20,8 @@ const DatePicker = ({
   defaultMode = Data.MODES[DEFAULT_MODE],
   rules,
   singleDate,
-  submitOnSelectionEnd
+  submitOnSelectionEnd,
+  availabilities
 }) => {
   const [display, setDisplay] = React.useState(Data.DISPLAYS.DESKTOP);
   const [specialRule, setSpecialRule] = React.useState();
@@ -89,7 +90,8 @@ const DatePicker = ({
         setSpecialRule: setSpecialRule,
         hideModes: hideModes,
         singleDate: singleDate,
-        submitOnSelectionEnd: submitOnSelectionEnd
+        submitOnSelectionEnd: submitOnSelectionEnd,
+        availabilities: availabilities
       }), specialRule && _jsxs("div", {
         className: styles.specialRule,
         children: [_jsx(Icons.Info, {}), _jsxs("div", {

package/es/common/components/date-picker/month.js

@@ -20,7 +20,8 @@ const Month = ({
   setLastSelectedDate,
   singleDate,
   submitOnSelectionEnd,
-  onSubmit
+  onSubmit,
+  stays
 }) => {
   const {
     lang
@@ -67,7 +68,8 @@ const Month = ({
           setSelecting: setSelecting,
           singleDate: singleDate,
           submitOnSelectionEnd: submitOnSelectionEnd,
-          onSubmit: onSubmit
+          onSubmit: onSubmit,
+          stays: stays
         }, i);
       })
     })]

package/es/common/components/date-picker/utils.js

@@ -65,17 +65,17 @@ export const isBefore = (date, ref) => {
   const _ref = new Date(r);
   return _date < _ref;
 };
+export function addDays(_date, days) {
+  const date = new Date(_date);
+  date.setDate(date.getDate() + days);
+  return date;
+}
 export const getDateInterval = (startDate, endDate) => {
   const dates = [];
   let currentDate = startDate;
-  const addDays = function (days) {
-    const date = new Date(this.valueOf());
-    date.setDate(date.getDate() + days);
-    return date;
-  };
   while (currentDate <= endDate) {
     dates.push(currentDate);
-    currentDate = addDays.call(currentDate, 1);
+    currentDate = addDays(currentDate, 1);
   }
   return dates;
 };

package/es/common/components/editable-map/marker-list.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as L from "leaflet";
 import classNames from "classnames";
 import css from "./marker-list.module.css";
 import Button from "dt-design-system/es/button";
@@ -48,12 +49,23 @@ export default function MarkerList({
         important
       }) => {
         const focusMarker = e => {
-          e.preventDefault();
           e.stopPropagation();
+          e.preventDefault();
+          mapRef.current.setView(position, 20);
+          setTimeout(() => {
+            mapRef.current.eachLayer(layer => {
+              if (layer instanceof L.Marker) {
+                const markerElement = layer.getElement();
+                const markerId = markerElement.querySelector(`[data-id="${id}"]`)?.getAttribute("data-id");
+                if (markerId) {
+                  layer.openPopup();
+                }
+              }
+            });
+          }, 300);
           if (width <= 992) {
             setOpened(false);
           }
-          mapRef.current.setView(position, 23);
         };
         const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
         const classes = classNames(css.button, {

package/es/common/components/editable-map/marker-list.module.css

@@ -52,6 +52,19 @@
   overflow: auto;
   animation: marker-list-inner-appearance 160ms
     var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+  background: linear-gradient(
+      var(--ds-grey-100, #f8f8f8) 30%,
+      hsla(0, 0%, 100%, 0)
+    ),
+    linear-gradient(hsla(0, 0%, 100%, 0), var(--ds-grey-100, #f8f8f8) 70%) 0
+      100%,
+    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.25), transparent),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.25), transparent)
+      0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
+  background-attachment: local, local, scroll, scroll;
+  border-radius: inherit;
 }
 
 @keyframes marker-list-inner-appearance {
@@ -70,6 +83,7 @@
   text-align: left;
   border-radius: var(--ds-radius-100, 6px);
   cursor: pointer;
+  user-select: none;
 }
 
 .listIsInDialog .button:first-of-type {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.12.29",
+  "version": "1.13.1",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "leaflet": "^1.9.1",