ublo-lib 1.26.3 → 1.26.5

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

@@ -1,26 +1,30 @@
 .date {
+  position: relative;
   width: 100%;
-  padding: 8px 6px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 2px;
+  margin: 0;
+  padding: 12px 6px;
+  box-sizing: border-box;
   font-size: 14px;
   text-align: center;
+  color: var(--ds-grey-700, #262626);
+  font-weight: 400;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--ds-radius-400, 20px);
   cursor: pointer;
   user-select: none;
-  border-radius: var(--ds-radius-400, 20px);
+  outline: none;
   transition: color 160ms
-      var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
     background-color 160ms
-      var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
     border-radius 160ms
-      var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
-}
-
-.dateSaturday:not(.dateIsPast),
-.dateSunday:not(.dateIsPast) {
-  font-weight: 700;
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
 }
 
 .dateSelected {
@@ -39,32 +43,30 @@
 .dateSelected.dateFirstSelected,
 .dateSelected.dateLastSelected {
   color: #fff;
+}
+
+.dateSelected.dateFirstSelected::before,
+.dateSelected.dateLastSelected::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  border-radius: var(--ds-radius-400, 20px);
 }
 
 .dateSelected.dateFirstSelected {
   border-top-left-radius: var(--ds-radius-400, 20px);
   border-bottom-left-radius: var(--ds-radius-400, 20px);
 }
+
 .dateSelected.dateLastSelected {
   border-top-right-radius: var(--ds-radius-400, 20px);
   border-bottom-right-radius: var(--ds-radius-400, 20px);
 }
 
-.dateSelected.dateFirstSelected:not(.dateNotInMonth),
-.dateSelected.dateLastSelected:not(.dateNotInMonth) {
-  @media (min-width: 810px) {
-    color: #fff;
-    background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
-  }
-}
-
-.dateIsPast {
-  opacity: 0.25;
-  transform: translateZ(0);
-  cursor: not-allowed;
-}
-
 .dateNotInMonth {
   opacity: 0.6;
 }
@@ -77,23 +79,23 @@
   }
 }
 
-.date:not(.dateIsPast):not(.dateSelected):hover {
+.date:not(:disabled):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 {
+  font-weight: 700;
+}
+
+.notAvailable {
+  text-decoration: line-through;
 }
 
-.available::after {
-  background-color: hsl(var(--green));
+.date > span {
+  z-index: 1;
 }
 
-.notAvailable::after {
-  background-color: hsl(var(--red));
+.popover {
+  min-width: auto;
+  font-size: 12px;
 }

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

@@ -1,82 +1,42 @@
 import * as React from "react";
 import classNames from "classnames";
-import { useUbloContext } from "ublo/with-ublo";
-import Modes from "./modes";
+import useWindowSizes from "../../hooks/use-window-sizes";
 import Calendar from "./calendar";
-import * as Icons from "dt-design-system/es/icons";
-import styles from "./date-picker.module.css";
 import * as Data from "./data";
 import * as Utils from "./utils";
+import styles from "./date-picker.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-const DEFAULT_MODE = "CUSTOM";
-const DatePicker = ({
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export { Data, Utils };
+export default function DatePicker({
   stayDates = [],
   onSubmit,
-  popup = true,
   close,
-  hideModes,
   min,
   max,
-  defaultMode = Data.MODES[DEFAULT_MODE],
-  rules,
+  availabilities,
+  popup = true,
   singleDate,
   submitOnSelectionEnd,
-  availabilities,
   disableConfirmModal
-}) => {
+}) {
   const [display, setDisplay] = React.useState(Data.DISPLAYS.DESKTOP);
-  const [specialRule, setSpecialRule] = React.useState();
   const {
-    lang
-  } = useUbloContext();
-  const showModes = display !== Data.DISPLAYS.PHONE && !hideModes;
-  const getDefaultMode = () => {
-    if (!showModes) {
-      return Data.MODES.CUSTOM;
-    }
-    if (stayDates.length === 0) {
-      return defaultMode;
-    }
-    const firstDate = stayDates[0];
-    const lastDate = stayDates[stayDates.length - 1];
-    if (Utils.isSaturday(firstDate) && Utils.isSaturday(lastDate)) {
-      return Data.MODES.SATURDAY;
-    }
-    if (Utils.isSunday(firstDate) && Utils.isSunday(lastDate)) {
-      return Data.MODES.SUNDAY;
-    }
-    return Data.MODES.CUSTOM;
-  };
-  const [currentMode, setCurrentMode] = React.useState(getDefaultMode());
-  const resized = React.useCallback(() => {
-    if (window.innerWidth <= Data.BREAKPOINTS.PHONE) {
+    width: windowWidth
+  } = useWindowSizes();
+  React.useEffect(() => {
+    if (windowWidth <= Data.BREAKPOINTS.PHONE) {
       setDisplay(Data.DISPLAYS.PHONE);
       return;
     }
-    if (window.innerWidth <= Data.BREAKPOINTS.TABLET) {
+    if (windowWidth <= Data.BREAKPOINTS.TABLET) {
       setDisplay(Data.DISPLAYS.TABLET);
       return;
-    }
-    setDisplay(Data.DISPLAYS.DESKTOP);
-  }, []);
-  React.useEffect(() => {
-    resized();
-    const isCompatible = typeof ResizeObserver !== "undefined";
-    if (isCompatible) {
-      const observer = new window.ResizeObserver(resized);
-      observer.observe(document.body);
-      return () => {
-        observer.unobserve(document.body);
-      };
     } else {
-      window.addEventListener("resize", resized);
-      return () => {
-        window.removeEventListener("resize", resized);
-      };
+      setDisplay(Data.DISPLAYS.DESKTOP);
     }
-  }, [resized]);
+  }, [windowWidth]);
   const openInPopup = display !== Data.DISPLAYS.DESKTOP || popup;
   const classes = classNames(styles.datePicker, {
     [styles.datePickerPopup]: openInPopup
@@ -85,42 +45,20 @@ const DatePicker = ({
     children: [openInPopup && _jsx("div", {
       className: styles.backdrop,
       onClick: close
-    }), _jsxs("div", {
+    }), _jsx("div", {
       className: classes,
-      children: [showModes && _jsx(Modes, {
-        currentMode: currentMode,
-        setCurrentMode: setCurrentMode
-      }), _jsx(Calendar, {
-        mode: currentMode,
-        setMode: setCurrentMode,
+      children: _jsx(Calendar, {
         display: display,
         stayDates: stayDates,
         min: min,
         max: max,
         onSubmit: onSubmit,
-        rules: rules,
-        specialRule: specialRule,
-        setSpecialRule: setSpecialRule,
-        hideModes: hideModes,
         singleDate: singleDate,
         submitOnSelectionEnd: submitOnSelectionEnd,
         availabilities: availabilities,
-        disableConfirmModal: disableConfirmModal
-      }), specialRule && _jsxs("div", {
-        className: styles.specialRule,
-        children: [_jsx(Icons.Info, {}), _jsxs("div", {
-          className: styles.specialRuleText,
-          children: [_jsx("div", {
-            className: styles.specialRuleTitle,
-            children: specialRule.title[lang]
-          }), _jsx("div", {
-            className: styles.specialRuleMessage,
-            children: specialRule.message[lang]
-          })]
-        })]
-      })]
+        disableConfirmModal: disableConfirmModal,
+        close: close
+      })
     })]
   });
-};
-export { Data, Utils };
-export default React.memo(DatePicker);
+}

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

@@ -5,10 +5,11 @@ div.popup {
 .datePicker {
   position: relative;
   width: min-content;
+  max-width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   background-color: var(--ds-grey-000, #fff);
-  border-radius: var(--ds-radius-200, 10px);
+  border-radius: var(--ds-radius-400, 20px);
   box-shadow: var(--ds-shadow-300, 0 8px 30px rgba(0, 0, 0, 0.12));
 }
 
@@ -22,75 +23,6 @@ div.popup {
     var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
-.specialRule {
-  position: absolute;
-  top: calc(100% + 50px);
-  left: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: var(--ds-grey-100, #f5f5f5);
-  border: 2px solid var(--ds-blue-400, #4177f6);
-  border-radius: 6px;
-}
-
-@media (min-width: 650px) {
-  .specialRule {
-    top: calc(100% + 10px);
-    max-width: calc(100% - 115px);
-  }
-}
-
-.specialRule > svg {
-  display: none;
-}
-
-@media (min-width: 650px) {
-  .specialRule > svg {
-    display: block;
-    width: 20px;
-    height: 20px;
-    margin-right: 20px;
-    fill: #000;
-  }
-}
-
-.specialRuleTitle {
-  color: var(--ds-grey-700, #232324);
-  font-size: 13px;
-  font-weight: 700;
-}
-
-@media (min-width: 480px) {
-  .specialRuleTitle {
-    font-size: 15px;
-  }
-}
-
-@media (min-width: 1001px) {
-  .specialRuleTitle {
-    font-size: 17px;
-  }
-}
-
-.specialRuleMessage {
-  color: var(--ds-grey-700, #232324);
-  font-size: 13px;
-}
-
-@media (min-width: 480px) {
-  .specialRuleMessage {
-    font-size: 15px;
-  }
-}
-
-@media (min-width: 1001px) {
-  .specialRuleMessage {
-    font-size: 17px;
-  }
-}
-
 .backdrop {
   position: fixed;
   top: 0;

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

@@ -1,39 +1,57 @@
 import * as React from "react";
 import classNames from "classnames";
+import Loader from "dt-design-system/es/loader";
 import * as Messages from "./messages";
 import * as Utils from "./utils";
 import styles from "./helper.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Helper = ({
+export default function Helper({
   lang,
   selecting,
-  selectedDates
-}) => {
-  const startClasses = classNames(styles.helperStep, {
-    [styles.helperStepCurrent]: !selectedDates.length
-  });
-  const endClasses = classNames(styles.helperStep, {
-    [styles.helperStepCurrent]: selecting && selectedDates.length
-  });
+  selectedDates,
+  availabilities,
+  isLoading,
+  error
+}) {
+  const enableAvailability = Boolean(availabilities);
   const firstDate = selectedDates[0] ? Utils.weekToLongDate(selectedDates[0]) : null;
   const lastDate = !selecting && selectedDates[selectedDates.length - 1] ? Utils.weekToLongDate(selectedDates[selectedDates.length - 1]) : null;
-  return _jsx("div", {
+  const loadingClasses = classNames(styles.loading, {
+    [styles.loadingError]: error
+  });
+  const startClasses = classNames(styles.step, {
+    [styles.stepCurrent]: !selectedDates.length
+  });
+  const endClasses = classNames(styles.step, {
+    [styles.stepCurrent]: selecting && selectedDates.length
+  });
+  return _jsxs("div", {
     className: styles.helper,
-    children: _jsxs("div", {
-      className: styles.helperInner,
+    children: [_jsxs("div", {
+      className: styles.left,
+      children: [_jsx("div", {
+        className: styles.title,
+        children: Messages.get(lang, "helper-title")
+      }), enableAvailability && (isLoading || error) && _jsxs("div", {
+        className: loadingClasses,
+        children: [!error && _jsx(Loader, {
+          className: styles.loader
+        }), error || Messages.get(lang, "availability-loading")]
+      })]
+    }), _jsxs("div", {
+      className: styles.steps,
       children: [_jsxs("div", {
         className: startClasses,
         children: [Messages.get(lang, "helper-start-date"), " ", _jsx("span", {
-          children: firstDate
+          children: firstDate || Messages.get(lang, "helper-placeholder")
         })]
       }), _jsxs("div", {
         className: endClasses,
         children: [Messages.get(lang, "helper-end-date"), " ", _jsx("span", {
-          children: lastDate
+          children: lastDate || Messages.get(lang, "helper-placeholder")
         })]
       })]
-    })
+    })]
   });
-};
-export default Helper;
+}

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

@@ -1,81 +1,85 @@
 .helper {
-  width: min-content;
-  font-size: 16px;
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
   display: flex;
-  align-items: center;
-  padding: 8px 4px;
-  background-color: #fff;
-  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
-  border-radius: var(--ds-radius-200, 10px);
-  transform: translateX(-50%);
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
 }
 
-@media (min-width: 480px) {
+@media (min-width: 746px) {
   .helper {
-    padding: 8px;
+    flex-direction: row;
   }
 }
 
-.helperInner {
-  flex: 1 1 100%;
+.left {
   display: flex;
+  flex-direction: column;
+  margin-right: 8px;
 }
 
-.helperStep {
-  flex: 0 0 50%;
+.loading {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 10px;
-  color: var(--ds-grey-600, #383838);
-  font-size: 14px;
-  text-transform: uppercase;
-  border-radius: var(--ds-radius-100, 3px);
-  transition: background-color 160ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+  gap: 5px;
+  margin-top: 4px;
+  font-size: 13px;
 }
 
-@media (min-width: 480px) {
-  .helperStep {
-    font-size: 15px;
-  }
+.loadingError {
+  color: var(--ds-red-400, #ee3535);
 }
 
-.helperStepCurrent {
-  background-color: var(--ds-grey-200, #efefef);
+.loader {
+  --ds-loader-spinner-size: 14px;
+  --ds-loader-thickness: 2px;
+
+  margin: 0;
 }
 
-.helperStep > span {
-  width: 9ch;
-  margin-left: 1ch;
-  text-transform: none;
+.title {
+  font-size: 20px;
   font-weight: 700;
-  text-align: right;
+  color: var(--ds-grey-600, #383838);
 }
 
-.helperRemove {
-  flex: 0 0 30px;
-  min-width: 30px;
-  height: 30px;
-  margin-left: 1ch;
+.steps {
+  width: fit-content;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: 50%;
+  border: 1px solid var(--ds-grey-300, #d7d7d7);
+  border-radius: var(--ds-radius-200, 10px);
+}
+
+@media (min-width: 746px) {
+  .steps {
+    margin-left: auto;
+  }
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  padding: 7px 16px;
+  color: var(--ds-grey-600, #383838);
+  font-size: 15px;
+  font-weight: 700;
+  border-radius: var(--ds-radius-200, 10px);
+  transition: background-color 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.step:not(.stepCurrent):last-child {
+  border-left: 1px solid var(--ds-grey-200, #efefef);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
-.helperRemove:disabled {
-  opacity: 0.5;
-  filter: grayscale(100%);
-  cursor: not-allowed;
+.stepCurrent {
+  outline: 2px solid var(--ds-grey-600, #383838);
+  z-index: 1;
 }
 
-.helperRemove > svg {
-  width: 18px;
-  height: 18px;
-  fill: var(--ds-grey-700, #232324);
+.step > span {
+  width: auto;
+  max-width: 100%;
+  font-weight: 400;
 }

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

@@ -8,9 +8,17 @@ const locales = {
     "warning-date-change-text": "Si vous modifiez vos dates de séjour, le contenu de votre panier sera supprimé.",
     "warning-date-change-cancel": "Annuler",
     "warning-date-change-confirm": "J'ai compris",
+    "helper-title": "Sélectionnez les dates",
     "helper-start-date": "Arrivée",
     "helper-end-date": "Départ",
-    submit: "Valider"
+    "helper-placeholder": "Ajoutez une date",
+    submit: "Valider",
+    reset: "Effacer les dates",
+    close: "Fermer",
+    "min-nights-singular": "nuit minimum",
+    "min-nights-plural": "nuits minimum",
+    "availability-loading": "Chargement des disponibilités...",
+    "availability-loading-error": "Erreur lors du chargement des disponibilités."
   },
   en: {
     "mode-book": "I'm staying",
@@ -21,9 +29,17 @@ const locales = {
     "warning-date-change-text": "If you proceed with this date change, the content of your cart will be removed.",
     "warning-date-change-cancel": "Cancel",
     "warning-date-change-confirm": "Understood",
+    "helper-title": "Select dates",
     "helper-start-date": "Begin",
     "helper-end-date": "End",
-    submit: "Confirm"
+    "helper-placeholder": "Add a date",
+    submit: "Confirm",
+    reset: "Clear dates",
+    close: "Close",
+    "min-nights-singular": "minimum night",
+    "min-nights-plural": "minimum nights",
+    "availability-loading": "Loading availabilities...",
+    "availability-loading-error": "Error while loading availabilities."
   }
 };
 export const get = (lang, id) => {

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

@@ -1,14 +1,11 @@
 import * as React from "react";
-import classNames from "classnames";
 import { useUbloContext } from "ublo/with-ublo";
 import DateItem from "./date-item";
 import * as Data from "./data";
 import styles from "./month.module.css";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Month = ({
-  mode,
-  setMode,
+export default function Month({
   display,
   month,
   year,
@@ -23,8 +20,10 @@ const Month = ({
   singleDate,
   submitOnSelectionEnd,
   onSubmit,
-  stays
-}) => {
+  stays,
+  matchingStays,
+  allMatchingStaysEnd
+}) {
   const {
     lang
   } = useUbloContext();
@@ -42,12 +41,9 @@ const Month = ({
       children: [monthName, " ", year]
     }), _jsx("div", {
       className: styles.days,
-      children: days.map((day, i) => {
-        const classes = classNames(styles.day, {
-          [styles.dayActive]: mode === Data.MODES.SUNDAY && i === 6 || mode === Data.MODES.SATURDAY && i === 5
-        });
+      children: days.map(day => {
         return _jsx("div", {
-          className: classes,
+          className: styles.day,
           children: i18nWeekDays[day]
         }, day);
       })
@@ -66,17 +62,16 @@ const Month = ({
           setSelectedDates: setSelectedDates,
           setFirstSelectedDate: setFirstSelectedDate,
           setLastSelectedDate: setLastSelectedDate,
-          mode: mode,
-          setMode: setMode,
           selecting: selecting,
           setSelecting: setSelecting,
           singleDate: singleDate,
           submitOnSelectionEnd: submitOnSelectionEnd,
           onSubmit: onSubmit,
-          stays: stays
+          stays: stays,
+          matchingStays: matchingStays,
+          allMatchingStaysEnd: allMatchingStaysEnd
         }, i);
       })
     })]
   });
-};
-export default React.memo(Month);
+}