ublo-lib 1.26.3 → 1.26.4

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import classNames from "classnames";
 import { useUbloContext } from "ublo/with-ublo";
 import Month from "./month";
-import Popup from "../popup";
+import Popup from "ublo-lib/es/common/components/popup";
 import Helper from "./helper";
 import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
@@ -13,24 +13,18 @@ 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";
-export default React.memo(Calendar);
-function Calendar({
+export default function Calendar({
   date,
-  mode,
-  setMode,
   display,
   stayDates = [],
   min,
   max,
   onSubmit,
-  specialRule,
-  setSpecialRule,
-  rules,
-  hideModes,
   singleDate,
   submitOnSelectionEnd,
   availabilities,
-  disableConfirmModal
+  disableConfirmModal,
+  close
 }) {
   const isDateObject = Utils.isDate(date);
   const _date = isDateObject ? date : new Date();
@@ -50,7 +44,8 @@ function Calendar({
   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 [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState();
   const gotoPreviousMonth = () => {
     const {
       month: newMonth,
@@ -67,6 +62,12 @@ function Calendar({
     setMonth(newMonth);
     setYear(newYear);
   };
+  const reset = () => {
+    setSelectedDates([]);
+    setSelecting(false);
+    setFirstSelectedDate(undefined);
+    setLastSelectedDate(undefined);
+  };
   const submit = dates => {
     const hasCart = window.sessionStorage.cartId !== undefined;
     if (!disableConfirmModal && hasCart) {
@@ -79,66 +80,28 @@ function Calendar({
     if (month === 12) {
       setMonthAlt(1);
       setYearAlt(year + 1);
-      return;
-    }
-    if (month === 11) {
+    } else if (month === 11) {
       setMonthAlt(month + 1);
       setYearAlt(year);
-      return;
+    } else {
+      setMonthAlt(month + 1);
     }
-    setMonthAlt(month + 1);
   }, [month, year]);
-  React.useEffect(() => {
-    if (!firstRangeDate) return;
-    const from = Utils.formatDate(firstRangeDate);
-    const matchingRule = rules.find(rule => rule.trigger === from);
-    setSpecialRule(matchingRule);
-    if (matchingRule) return;
-    if (display !== Data.DISPLAYS.PHONE && mode === Data.MODES.SATURDAY && Utils.isSunday(firstRangeDate) && Utils.isSunday(selectedDates[selectedDates.length - 1])) {
-      const newSelectedDates = selectedDates.map(date => {
-        const d = new Date(date);
-        const newDate = new Date(d.setDate(d.getDate() - 1));
-        return newDate;
-      });
-      setSelectedDates(newSelectedDates);
-    }
-    if (display !== Data.DISPLAYS.PHONE && mode === Data.MODES.SUNDAY && Utils.isSaturday(firstRangeDate) && Utils.isSaturday(selectedDates[selectedDates.length - 1])) {
-      const newSelectedDates = selectedDates.map(date => {
-        const d = new Date(date);
-        const newDate = new Date(d.setDate(d.getDate() + 1));
-        return newDate;
-      });
-      setSelectedDates(newSelectedDates);
-    }
-    if ((mode === Data.MODES.SATURDAY || mode === Data.MODES.SUNDAY) && !mustKeepSelected) {
-      setSelectedDates([]);
-    }
-  }, [display, firstRangeDate, mode, mustKeepSelected, rules, selectedDates, setSpecialRule]);
-  React.useEffect(() => {
-    if (specialRule) {
-      const {
-        interval,
-        mode
-      } = specialRule;
-      const from = new Date(interval.from);
-      from.setHours(0, 0, 0, 0);
-      const to = new Date(interval.to);
-      to.setHours(0, 0, 0, 0);
-      const dateInterval = Utils.getDateInterval(from, to);
-      setMode(mode);
-      setSelecting(false);
-      setSelectedDates(dateInterval);
-    }
-  }, [setMode, specialRule]);
   const now = new Date();
   const currentMonth = now.getMonth() + 1;
   const currentYear = now.getFullYear();
   const isPast = month <= currentMonth && year <= currentYear;
-  const showSubmit = !submitOnSelectionEnd && selectedDates.length > 0 && !selecting;
+  const showReset = !singleDate && selectedDates.length > 0;
+  const submitEnabled = !submitOnSelectionEnd && selectedDates.length > 0 && !selecting;
   const hide2ndMonth = display !== Data.DISPLAYS.DESKTOP;
+  const enableAvailability = Boolean(stays);
+  const matchingStays = Utils.getMatchingStays(stays, selectedDates);
+  const allMatchingStaysEnd = enableAvailability ? matchingStays?.map(stay => Utils.formatDate(stay.end)) : undefined;
   React.useEffect(() => {
     if (availabilities) {
       const fetchAvailabilities = async () => {
+        setIsLoading(true);
+        setError(undefined);
         setStays(undefined);
         const bareStart = `${year}-${Utils.zeroPad(month, 2)}-01`;
         const start = Utils.formatDate(Utils.addDays(bareStart, -7));
@@ -147,89 +110,119 @@ function Calendar({
           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)
-            };
+        try {
+          const {
+            stays
+          } = await fetcher({
+            ...rest,
+            start,
+            numberDays
           });
-          setStays(formatedStays);
+          if (stays?.length) {
+            const formatedStays = stays.map(stay => {
+              return {
+                start: new Date(stay.start),
+                end: new Date(stay.end)
+              };
+            });
+            setStays(formatedStays);
+          }
+        } catch (e) {
+          setError(Messages.get(lang, "availability-loading-error"));
         }
+        setIsLoading(false);
       };
       fetchAvailabilities();
     }
-  }, [availabilities, hide2ndMonth, month, year]);
+  }, [availabilities, hide2ndMonth, lang, month, year]);
   const classes = classNames(styles.calendar, {
     [styles.calendarTouch]: hide2ndMonth,
-    [styles.hiddenModes]: hideModes
+    [styles.calendarLoading]: isLoading
   });
   return _jsxs("div", {
     className: classes,
     children: [!singleDate && _jsx(Helper, {
       lang: lang,
       selecting: selecting,
-      selectedDates: selectedDates
+      selectedDates: selectedDates,
+      availabilities: availabilities,
+      isLoading: isLoading,
+      error: error
     }), _jsxs("div", {
-      className: styles.controls,
-      children: [!isPast && _jsx(Icons.ChevronLeft, {
-        className: styles.control,
-        onClick: gotoPreviousMonth
-      }), _jsx(Icons.ChevronRight, {
-        className: styles.control,
-        onClick: gotoNextMonth
+      className: styles.months,
+      children: [_jsxs("div", {
+        className: styles.controls,
+        children: [_jsx(Button, {
+          variant: "transparent",
+          className: styles.control,
+          onClick: gotoPreviousMonth,
+          disabled: isPast,
+          children: _jsx(Icons.ChevronLeft, {})
+        }), _jsx(Button, {
+          variant: "transparent",
+          className: styles.control,
+          onClick: gotoNextMonth,
+          children: _jsx(Icons.ChevronRight, {})
+        })]
+      }), _jsx(Month, {
+        display: display,
+        month: month,
+        year: year,
+        min: min,
+        max: max,
+        selecting: selecting,
+        setSelecting: setSelecting,
+        selectedDates: selectedDates,
+        setSelectedDates: setSelectedDates,
+        firstSelectedDate: firstSelectedDate,
+        setFirstSelectedDate: setFirstSelectedDate,
+        lastSelectedDate: lastSelectedDate,
+        setLastSelectedDate: setLastSelectedDate,
+        singleDate: singleDate,
+        submitOnSelectionEnd: submitOnSelectionEnd,
+        onSubmit: submit,
+        stays: stays,
+        matchingStays: matchingStays,
+        allMatchingStaysEnd: allMatchingStaysEnd
+      }), !hide2ndMonth && _jsx(Month, {
+        display: display,
+        month: monthAlt,
+        year: yearAlt,
+        min: min,
+        max: max,
+        selecting: selecting,
+        setSelecting: setSelecting,
+        selectedDates: selectedDates,
+        setSelectedDates: setSelectedDates,
+        firstSelectedDate: firstSelectedDate,
+        setFirstSelectedDate: setFirstSelectedDate,
+        lastSelectedDate: lastSelectedDate,
+        setLastSelectedDate: setLastSelectedDate,
+        singleDate: singleDate,
+        submitOnSelectionEnd: submitOnSelectionEnd,
+        onSubmit: submit,
+        stays: stays,
+        matchingStays: matchingStays,
+        allMatchingStaysEnd: allMatchingStaysEnd
+      })]
+    }), _jsxs("div", {
+      className: styles.buttons,
+      children: [_jsx(Button, {
+        variant: "transparent",
+        className: styles.close,
+        onClick: close,
+        children: Messages.get(lang, "close")
+      }), showReset && _jsx(Button, {
+        variant: "link",
+        className: styles.reset,
+        onClick: reset,
+        children: Messages.get(lang, "reset")
+      }), _jsxs(Button, {
+        className: styles.submit,
+        onClick: () => submit(selectedDates),
+        disabled: !submitEnabled,
+        children: [_jsx(Icons.Check, {}), Messages.get(lang, "submit")]
       })]
-    }), _jsx(Month, {
-      mode: mode,
-      setMode: setMode,
-      display: display,
-      month: month,
-      year: year,
-      min: min,
-      max: max,
-      selecting: selecting,
-      setSelecting: setSelecting,
-      selectedDates: selectedDates,
-      setSelectedDates: setSelectedDates,
-      firstSelectedDate: firstSelectedDate,
-      setFirstSelectedDate: setFirstSelectedDate,
-      lastSelectedDate: lastSelectedDate,
-      setLastSelectedDate: setLastSelectedDate,
-      singleDate: singleDate,
-      submitOnSelectionEnd: submitOnSelectionEnd,
-      onSubmit: submit,
-      stays: stays
-    }), !hide2ndMonth && _jsx(Month, {
-      mode: mode,
-      setMode: setMode,
-      display: display,
-      month: monthAlt,
-      year: yearAlt,
-      min: min,
-      max: max,
-      selecting: selecting,
-      setSelecting: setSelecting,
-      selectedDates: selectedDates,
-      setSelectedDates: setSelectedDates,
-      firstSelectedDate: firstSelectedDate,
-      setFirstSelectedDate: setFirstSelectedDate,
-      lastSelectedDate: lastSelectedDate,
-      setLastSelectedDate: setLastSelectedDate,
-      singleDate: singleDate,
-      submitOnSelectionEnd: submitOnSelectionEnd,
-      onSubmit: submit,
-      stays: stays
-    }), showSubmit && _jsxs(Button, {
-      className: styles.submit,
-      onClick: () => submit(selectedDates),
-      children: [Messages.get(lang, "submit"), _jsx(Icons.Check, {})]
     }), showPopup && _jsx(Popup, {
       title: Messages.get(lang, "warning-date-change-title"),
       className: datePickerStyles.popup,

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

@@ -2,16 +2,13 @@
   grid-column: auto;
   position: relative;
   display: flex;
-  padding: 20px 10px;
+  flex-direction: column;
+  padding: 12px;
 }
 
-@media (min-width: 650px) {
+@media (min-width: 746px) {
   .calendar {
-    padding: 20px 10px 20px 0;
-  }
-
-  .hiddenModes {
-    padding: 20px 10px;
+    padding: 20px;
   }
 }
 
@@ -19,21 +16,32 @@
   flex: 0 0 auto;
 }
 
+.calendarLoading * {
+  cursor: wait !important;
+}
+
+.months {
+  position: relative;
+  display: flex;
+  gap: 20px;
+}
+
 .controls {
   position: absolute;
-  top: 20px;
+  top: -4px;
   left: 0;
   width: 100%;
-  height: 20px;
+  height: 40px;
   display: flex;
-  padding: 0 20px;
+  padding: 0 6px;
   pointer-events: none;
   touch-action: none;
 }
 
 .control {
-  width: 20px;
-  height: 20px;
+  flex: 0 0 30px;
+  height: 30px;
+  padding: 2px;
   fill: var(--ds-grey-500, #484848);
   cursor: pointer;
   user-select: none;
@@ -45,33 +53,28 @@
   margin-left: auto;
 }
 
-button.submit {
-  --ds-button-padding: 12px;
-  --ds-button-text-transform: none;
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20px;
+}
 
-  width: auto;
-  position: absolute;
-  top: 100%;
-  right: var(--ds-radius-200, 10px);
-  font-size: 18px;
-  transform-origin: right top;
-  animation: date-picker-submit-button-appearance 320ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
-  border-radius: 0 0 var(--ds-radius-100, 3px) var(--ds-radius-100, 3px);
+button.submit,
+button.close {
+  --padding: 10px;
+
+  font-size: 16px;
+  border-radius: var(--ds-radius-200, 10px);
 }
 
-@media (min-width: 1001px) {
-  button.submit {
-    font-size: 20px;
-  }
+button.close {
+  display: none;
 }
 
-@keyframes date-picker-submit-button-appearance {
-  0% {
-    opacity: 0%;
-  }
-  60% {
-    transform: scale(1.15);
+@media (min-width: 746px) {
+  button.close {
+    display: block;
+    margin-right: auto;
   }
 }
 

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

@@ -1,16 +1,11 @@
 import * as Utils from "./utils";
-export const MODES = {
-  SATURDAY: 0,
-  SUNDAY: 1,
-  CUSTOM: 2
-};
 export const DISPLAYS = {
   DESKTOP: 0,
   TABLET: 1,
   PHONE: 2
 };
 export const BREAKPOINTS = {
-  TABLET: 955,
+  TABLET: 745,
   PHONE: 650
 };
 export const THIS_YEAR = new Date().getFullYear();
@@ -47,22 +42,22 @@ export const MONTHS = {
 };
 export const WEEK_DAYS = {
   fr: {
-    monday: "L",
-    tuesday: "M",
-    wednesday: "M",
-    thursday: "J",
-    friday: "V",
-    saturday: "S",
-    sunday: "D"
+    monday: "Lun.",
+    tuesday: "Mar.",
+    wednesday: "Mer.",
+    thursday: "Jeu.",
+    friday: "Ven.",
+    saturday: "Sam.",
+    sunday: "Dim."
   },
   en: {
-    monday: "M",
-    tuesday: "T",
-    wednesday: "W",
-    thursday: "T",
-    friday: "F",
-    saturday: "S",
-    sunday: "S"
+    monday: "Mon.",
+    tuesday: "Tue",
+    wednesday: "Wed.",
+    thursday: "Tue.",
+    friday: "Fri.",
+    saturday: "Sat.",
+    sunday: "Sun."
   }
 };
 export const CALENDAR_WEEKS = 6;

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

@@ -1,11 +1,14 @@
 import * as React from "react";
 import classNames from "classnames";
-import * as Data from "./data";
+import { useUbloContext } from "ublo/with-ublo";
+import Popover from "dt-design-system/es/popover";
+import Button from "dt-design-system/es/button";
 import * as Utils from "./utils";
+import * as Messages from "./messages";
 import styles from "./date-item.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const DateItem = ({
-  display,
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function DateItem({
   date,
   index,
   month,
@@ -16,34 +19,55 @@ const DateItem = ({
   setSelectedDates,
   setFirstSelectedDate,
   setLastSelectedDate,
-  mode,
-  setMode,
   selecting,
   setSelecting,
   singleDate,
   submitOnSelectionEnd,
   onSubmit,
-  stays
-}) => {
+  stays,
+  matchingStays,
+  allMatchingStaysEnd
+}) {
+  const {
+    lang
+  } = useUbloContext();
   const today = new Date();
-  const _date = new Date(date.join("-"));
+  const _date = React.useMemo(() => new Date(date.join("-")), [date]);
   _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 isDisabled = Utils.isBefore(date, min) || Utils.isAfter(date, max);
+  const isInMonth = month && year && Utils.isSameMonth(_date, new Date([Utils.zeroPad(year, 2), Utils.zeroPad(month, 2), "01"].join("-")));
+  const firstSelectedDate = selectedDates[0];
+  const isFirstSelected = selectedDates.map(Number).indexOf(Number(_date)) === 0;
+  const isLastSelected = selectedDates.map(Number).indexOf(Number(_date)) === selectedDates.length - 1;
+  const isPastDate = Utils.isPast(date) || selecting && firstSelectedDate && Utils.isBefore(date, firstSelectedDate);
+  const isSelected = selectedDates.some(d => d.getTime() === _date.getTime());
   const enableAvailability = Boolean(stays);
   const isAvailable = stays?.some(stay => {
-    return stay.start < _date && stay.end > _date;
+    const {
+      start,
+      end
+    } = stay;
+    const formatedStart = Utils.formatDate(start);
+    const formatedEnd = Utils.formatDate(end);
+    const formatedDate = Utils.formatDate(date);
+    return formatedStart === formatedDate || selecting && formatedEnd === formatedDate;
   }) || 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;
-  const isPastDate = Utils.isPast(date) || selecting && firstDate && Utils.isBefore(date, firstDate);
+  const shortestMatchingStaysLength = enableAvailability && matchingStays?.reduce((acc, stay) => {
+    const fromDate = new Date(stay.start);
+    const toDate = new Date(stay.end);
+    const days = Utils.getDateInterval(fromDate, toDate);
+    const nights = days.length - 1;
+    if (nights < acc) {
+      return nights;
+    }
+    return acc;
+  }, Infinity);
+  const isDisabled = enableAvailability && selecting && allMatchingStaysEnd?.length && !allMatchingStaysEnd.includes(date.join("-")) || enableAvailability && !isAvailable || isPastDate || !isInMonth || Utils.isBefore(date, min) || Utils.isAfter(date, max);
   React.useEffect(() => {
     if (isFirstSelected) setFirstSelectedDate(index);
     if (isLastSelected) setLastSelectedDate(index);
   }, [index, isFirstSelected, isLastSelected, setFirstSelectedDate, setLastSelectedDate]);
-  const updateDateSelection = () => {
+  const updateDateSelection = React.useCallback(() => {
     if (isPastDate || isDisabled) return;
     if (singleDate) {
       setSelectedDates([_date]);
@@ -53,66 +77,51 @@ const DateItem = ({
       }
       return;
     }
-    if (display !== Data.DISPLAYS.PHONE && (mode === Data.MODES.SATURDAY || mode === Data.MODES.SUNDAY) && (Utils.isSaturday(date) || Utils.isSunday(date))) {
-      const nights = [...new Array(8)];
-      const dates = nights.map((_, i) => {
-        const d = new Date(_date);
-        const currDay = new Date(d.setDate(_date.getDate() + i));
-        currDay.setHours(0, 0, 0, 0);
-        return currDay;
-      });
-      if (Utils.isSaturday(date)) {
-        if (mode !== Data.MODES.SATURDAY) setMode(Data.MODES.SATURDAY);
-        setSelecting(false);
-      }
-      if (Utils.isSunday(date)) {
-        if (mode !== Data.MODES.SUNDAY) setMode(Data.MODES.SUNDAY);
-        setSelecting(false);
-      }
-      setSelectedDates(dates);
+    if (selecting) {
+      const isPastDate = _date < firstSelectedDate;
+      const interval = isPastDate ? Utils.getDateInterval(_date, firstSelectedDate) : Utils.getDateInterval(firstSelectedDate, _date);
+      setSelectedDates(interval);
+      setSelecting(false);
+    } else {
+      setSelectedDates([_date]);
+      setSelecting(true);
       if (submitOnSelectionEnd) {
-        onSubmit(dates);
-      }
-    }
-    if (mode === Data.MODES.CUSTOM || !Utils.isSaturday(date) && !Utils.isSunday(date) || display === Data.DISPLAYS.PHONE) {
-      if (mode !== Data.MODES.CUSTOM) setMode(Data.MODES.CUSTOM);
-      if (selecting) {
-        const isPastDate = _date < firstDate;
-        const interval = isPastDate ? Utils.getDateInterval(_date, firstDate) : Utils.getDateInterval(firstDate, _date);
-        setSelectedDates(interval);
-        if (interval.length === 8) {
-          if (Utils.isSaturday(interval[0]) && Utils.isSaturday(interval[7])) setMode(Data.MODES.SATURDAY);
-          if (Utils.isSunday(interval[0]) && Utils.isSunday(interval[7])) setMode(Data.MODES.SUNDAY);
-        }
-        setSelecting(false);
-      } else {
-        setSelectedDates([_date]);
-        setSelecting(true);
-        if (submitOnSelectionEnd) {
-          onSubmit([_date]);
-        }
+        onSubmit([_date]);
       }
     }
-  };
-  const isSelected = !!selectedDates.find(d => d.getTime() === _date.getTime());
+  }, [_date, firstSelectedDate, isDisabled, isPastDate, onSubmit, selecting, setSelectedDates, setSelecting, singleDate, submitOnSelectionEnd]);
   const classes = classNames(styles.date, {
     [styles.dateToday]: isToday,
     [styles.dateSelected]: isSelected,
     [styles.dateFirstSelected]: isFirstSelected,
     [styles.dateLastSelected]: isLastSelected,
-    [styles.dateNotInMonth]: !inMonth,
-    [styles.dateIsPast]: isPastDate || isDisabled,
-    [styles.dateSaturday]: mode === Data.MODES.SATURDAY && Utils.isSaturday(date),
-    [styles.dateSunday]: mode === Data.MODES.SUNDAY && Utils.isSunday(date),
+    [styles.dateNotInMonth]: !isInMonth,
+    [styles.dateIsPast]: !isSelected && isDisabled,
     [styles.available]: enableAvailability && isAvailable,
-    [styles.notAvailable]: enableAvailability && !isAvailable
+    [styles.notAvailable]: enableAvailability && !isAvailable && !isSelected
   });
-  return _jsx("button", {
+  const dateComponent = _jsx(Button, {
     className: classes,
     onClick: updateDateSelection,
-    tabIndex: isPastDate ? -1 : 0,
-    disabled: isPastDate || isDisabled,
-    children: _date.getDate()
+    disabled: !isSelected && isDisabled,
+    children: _jsx("span", {
+      children: _date.getDate()
+    })
   });
-};
-export default React.memo(DateItem);
+  const showPopover = enableAvailability && isInMonth && isFirstSelected && shortestMatchingStaysLength && selecting;
+  if (showPopover) {
+    const tooltip = Messages.get(lang, shortestMatchingStaysLength > 1 ? "min-nights-plural" : "min-nights-singular");
+    return _jsxs(Popover, {
+      trigger: dateComponent,
+      open: true,
+      className: styles.popover,
+      innerClassName: "nights-number-hint__inner",
+      contentProps: {
+        side: "top"
+      },
+      children: [shortestMatchingStaysLength, " ", tooltip]
+    });
+  } else {
+    return dateComponent;
+  }
+}