ublo-lib 1.31.42 → 1.31.44

package/es/lbm/components/lumiplan/weather/weather-zones.jsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import classNames from "classnames";
+// import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
+import useWindowSizes from "../../../../common/hooks/use-window-sizes";
+import Button from "dt-design-system/es/button";
+import T from "../i18n/translations";
+import css from "./weather-zones.module.css";
+export default function Zones({ weatherZones, currentZoneIndex, setCurrentZoneIndex, }) {
+    const [showLeftShadow, setShowLeftShadow] = React.useState(false);
+    const [showRightShadow, setShowRightShadow] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const scrollerRef = React.useRef(null);
+    const { width, height } = useWindowSizes();
+    const refreshShadows = React.useCallback(() => {
+        const container = containerRef.current;
+        const scroller = scrollerRef.current;
+        if (container && scroller) {
+            setShowLeftShadow(scroller.scrollLeft > 50);
+            const maxScroll = Math.round(scroller.scrollWidth) - Math.round(scroller.clientWidth);
+            setShowRightShadow(scroller.scrollLeft < maxScroll - 50);
+        }
+    }, []);
+    React.useEffect(() => {
+        refreshShadows();
+    }, [refreshShadows, width, height]);
+    const zonesClasses = classNames(css.zones, {
+        [css.leftShadow]: showLeftShadow,
+        [css.rightShadow]: showRightShadow,
+    });
+    return (<div ref={containerRef} className={zonesClasses}>
+      <div ref={scrollerRef} onScroll={refreshShadows} className={css.content}>
+        {weatherZones.map((zone, i) => {
+            const hasData = Boolean(zone.weatherInfos.length > 0 &&
+                zone.weatherInfos[0].am &&
+                zone.weatherInfos[0].pm);
+            if (!hasData)
+                return null;
+            const { name, altitude } = zone;
+            const { value, unit } = altitude;
+            const isSelected = i === currentZoneIndex;
+            const updateCurrentZone = () => {
+                setCurrentZoneIndex(i);
+            };
+            const classes = classNames(css.zone, {
+                [css.zoneSelected]: isSelected,
+            });
+            return (<Button key={name} className={classes} onClick={updateCurrentZone}>
+              <b>{name}</b> {value}
+              <span>
+                <T id={unit}/>
+              </span>
+            </Button>);
+        })}
+      </div>
+    </div>);
+}

package/es/lbm/components/lumiplan/weather/weather.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { WeatherForecast } from "../types";
+type Props = {
+    weather?: WeatherForecast | null;
+};
+declare const Weather: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Weather;

package/es/lbm/components/lumiplan/weather/weather.jsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import classNames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import Tooltip from "dt-design-system/es/tooltip";
+import Loader from "dt-design-system/es/loader";
+import * as Icons from "dt-design-system/es/icons";
+import AvalancheRisk from "./avalanche-risk";
+import SnowData from "./snow-data";
+import WeatherData from "./weather-data";
+import T, { t } from "../i18n/translations";
+import Days from "./weather-days";
+import Zones from "./weather-zones";
+import css from "./weather.module.css";
+const Weather = React.forwardRef(({ weather }, ref) => {
+    var _a;
+    const { lang } = useUbloContext();
+    const [currentZoneIndex, setCurrentZoneIndex] = React.useState(0);
+    const [currentDayIndex, setCurrentDayIndex] = React.useState(0);
+    const [expanded, setExpanded] = React.useState(true);
+    React.useEffect(() => {
+        setCurrentZoneIndex(0);
+        setCurrentDayIndex(0);
+    }, [weather]);
+    if (weather === undefined) {
+        return (<div ref={ref} className={css.loader} data-tags={t(lang, "weather.title")}>
+          <Loader variant="overlay"/>
+        </div>);
+    }
+    if (!weather) {
+        return null;
+    }
+    const { weatherZones, weatherPreviews } = weather.weather;
+    const { snowZones } = weather.snow;
+    const forecastList = weatherPreviews.find((preview) => preview.type === "WEATHER_BULLETIN_OF_NEXT_DAY");
+    const forecastData = (_a = forecastList === null || forecastList === void 0 ? void 0 : forecastList.data) === null || _a === void 0 ? void 0 : _a.find((f) => f.language.startsWith(lang));
+    const forecast = forecastData === null || forecastData === void 0 ? void 0 : forecastData.data;
+    const { weatherInfos } = weatherZones[currentZoneIndex];
+    const days = weatherInfos.slice(0, 4);
+    return (<div ref={ref} className={css.weather} data-tags={t(lang, "weather.title")}>
+        <div className={css.forecast} dangerouslySetInnerHTML={{ __html: forecast }}/>
+        <Zones weatherZones={weatherZones} currentZoneIndex={currentZoneIndex} setCurrentZoneIndex={setCurrentZoneIndex}/>
+        <Days days={days} currentDayIndex={currentDayIndex} setCurrentDayIndex={setCurrentDayIndex} lang={lang}/>
+        {weatherZones.map((zone, i) => {
+            const { weatherInfos, name, altitude } = zone;
+            const { value, unit } = altitude;
+            const days = weatherInfos.slice(0, 4);
+            const { am, pm } = days[currentDayIndex] || {};
+            const classes = classNames(css.info, {
+                [css.infoHidden]: currentZoneIndex !== i,
+            });
+            const snowData = snowZones[i] || {};
+            const ExpandIcon = expanded ? Icons.MinusCircle : Icons.PlusCircle;
+            const toggleExpanded = () => {
+                setExpanded(!expanded);
+            };
+            return (<div key={i} className={classes}>
+              <span className={css.printedName}>
+                <b>{name}</b> {value}
+                <span>
+                  <T id={unit}/>
+                </span>
+              </span>
+              <AvalancheRisk avalancheRisk={snowData.avalancheRisk}/>
+              <div className={css.infoBottom}>
+                <SnowData data={snowData} expanded={expanded}/>
+                <WeatherData kind="am" data={am} expanded={expanded}/>
+                <WeatherData kind="pm" data={pm} expanded={expanded}/>
+              </div>
+              <Tooltip content={t(lang, expanded ? "see-less" : "see-more")}>
+                <Button className={css.expandButton} variant="transparent" onClick={toggleExpanded}>
+                  <ExpandIcon />
+                </Button>
+              </Tooltip>
+            </div>);
+        })}
+      </div>);
+});
+Weather.displayName = "Weather";
+export default Weather;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.31.42",
+  "version": "1.31.44",
   "peerDependencies": {
     "dt-design-system": "^3.8.3",
     "leaflet": "^1.9.1",
@@ -29,20 +29,12 @@
     "react-async-hook": "4.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.7",
-    "@babel/eslint-parser": "7.23.3",
-    "@babel/eslint-plugin": "^7.23.5",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
     "@types/css-modules": "1.0.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
     "classnames": "2.5.1",
-    "cors": "2.8.5",
     "cpx2": "4.2.3",
     "dt-design-system": "3.8.3",
     "eslint": "8.56.0",
@@ -56,11 +48,10 @@
     "ublo": "3.16.0"
   },
   "scripts": {
-    "clean": "rm -rf es",
-    "build": "babel src -x '.js,.ts,.tsx' -d es && tsc",
+    "build": "tsc",
     "postbuild": "cpx 'src/**/*.{json,css,svg}' es",
-    "prepublishOnly": "yarn clean && yarn build",
-    "watch": "yarn clean && babel ./src -x '.js,.ts,.tsx' -d es -w & cpx './src/**/*.{json,css,svg}' es -w",
+    "prepublishOnly": "yarn build",
+    "watch": "tsc --watch & cpx './src/**/*.{json,css,svg}' es -w",
     "lint": "eslint 'src/**/*.{js, ts, tsx}'"
   },
   "packageManager": "yarn@1.22.18",

package/es/common/components/admin-links/admin-links.js

@@ -1,102 +0,0 @@
-import * as React from "react";
-import { useUbloContext } from "ublo/with-ublo";
-import { loadFileManager } from "../../utils/file-manager";
-import styles from "./admin-links.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 ToggleIcon = () => {
-  return _jsx("svg", {
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24",
-    className: styles.toggleIcon,
-    children: _jsx("path", {
-      d: "M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
-    })
-  });
-};
-const AdminLinks = ({
-  customLinks
-}) => {
-  const {
-    lang,
-    cmsMode,
-    config
-  } = useUbloContext();
-  const [open, setOpen] = React.useState(false);
-  const hasLangPrefix = config.langPrefix.links;
-  const {
-    plausibleLink
-  } = config;
-  const links = {
-    msemAdmin: {
-      name: "Administration MseM",
-      onClick: "https://admin.mon-sejour-en-montagne.com/",
-      target: "_blank"
-    },
-    tutoriels: {
-      name: "Tutoriels",
-      onClick: "https://www.valraiso.net/toolbox/?auth=my-toolbox&filter=tools",
-      target: "_blank"
-    },
-    popup: {
-      name: "Popup",
-      onClick: hasLangPrefix ? `/${lang.concat("/popup")}` : "/popup"
-    },
-    fileManager: {
-      name: "Photothèque",
-      onClick: loadFileManager
-    },
-    plausible: {
-      name: "Statistiques",
-      onClick: typeof plausibleLink === "string" ? plausibleLink : plausibleLink?.[lang],
-      target: "_blank"
-    },
-    ...customLinks
-  };
-  return _jsx("div", {
-    className: styles.root,
-    children: cmsMode && _jsxs(_Fragment, {
-      children: [_jsx("div", {
-        className: styles.toggle,
-        onClick: () => setOpen(!open),
-        children: _jsx(ToggleIcon, {})
-      }), open && _jsxs("div", {
-        className: styles.links,
-        children: [_jsx("div", {
-          className: styles.linksTitle,
-          children: "Liens utiles"
-        }), Object.keys(links).map((key, i) => {
-          const link = links[key];
-          if (!link) return null;
-          const {
-            name,
-            onClick,
-            target
-          } = link;
-          const isHrefValid = typeof onClick === "string" && onClick !== "";
-          const isFunction = typeof onClick === "function";
-          if (!isHrefValid && !isFunction) {
-            return null;
-          }
-          const Tag = isHrefValid ? "a" : "button";
-          const anchorProps = {
-            href: onClick,
-            target
-          };
-          const buttonProps = {
-            onClick
-          };
-          const props = isFunction ? buttonProps : anchorProps;
-          return _jsx(Tag, {
-            className: styles.link,
-            ...props,
-            children: name
-          }, i);
-        })]
-      })]
-    })
-  });
-};
-export default AdminLinks;

package/es/common/components/breadcrumb.js

@@ -1,82 +0,0 @@
-import * as React from "react";
-import Link from "ublo/link";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Breadcrumb({
-  breadcrumb,
-  exclusions = []
-}) {
-  return _jsx("div", {
-    className: "breadcrumb",
-    children: _jsx(Items, {
-      rawItem: breadcrumb,
-      exclusions: exclusions
-    })
-  });
-}
-function Items({
-  rawItem,
-  exclusions
-}) {
-  if (!rawItem) return null;
-  const {
-    next,
-    name,
-    title,
-    path,
-    page
-  } = rawItem;
-  const isCurrent = next === undefined;
-  const isNextExcluded = !isCurrent && exclusions.includes(next.name);
-  const itemToRender = isNextExcluded ? next.next : next;
-  const nextItem = !isCurrent ? _jsx(Items, {
-    rawItem: itemToRender,
-    exclusions: exclusions
-  }) : null;
-  return _jsx(Item, {
-    name: name,
-    page: page,
-    path: path,
-    itemTitle: title,
-    nextItem: nextItem,
-    isCurrent: isCurrent,
-    exclusions: exclusions
-  });
-}
-function Item({
-  name,
-  page,
-  path,
-  itemTitle,
-  nextItem,
-  isCurrent,
-  exclusions
-}) {
-  const hasTemplate = page !== undefined;
-  const isExternalUrl = /^((http|https):\/\/)/.test(path);
-  const noHref = isCurrent || !hasTemplate;
-  const isExcluded = !isCurrent && exclusions.includes(name);
-  const Tag = isExternalUrl ? "a" : noHref ? "span" : Link;
-  const linkProps = {
-    title: itemTitle,
-    page,
-    as: path
-  };
-  const spanProps = {
-    dangerouslySetInnerHTML: {
-      __html: itemTitle
-    }
-  };
-  const anchorProps = {
-    ...spanProps,
-    href: path
-  };
-  const props = isExternalUrl ? anchorProps : noHref ? spanProps : linkProps;
-  return _jsxs(_Fragment, {
-    children: [!isExcluded && _jsx(Tag, {
-      className: "breadcrumb__item",
-      ...props
-    }), nextItem]
-  });
-}

package/es/common/components/collapsible/collapsible.js

@@ -1,69 +0,0 @@
-import * as React from "react";
-import Button from "dt-design-system/es/button";
-import { motion } from "framer-motion";
-import * as Icons from "dt-design-system/es/icons";
-import classnames from "classnames";
-import * as Cms from "../../utils/cms";
-import styles from "./collapsible.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const messages = {
-  fr: {
-    open: "Afficher",
-    close: "Masquer"
-  },
-  en: {
-    open: "Open",
-    close: "Close"
-  }
-};
-export default function Collapsible({
-  gradientColor = "#fff",
-  height = 150,
-  children,
-  lang
-}) {
-  const [opened, setOpened] = React.useState(false);
-  const [hasOverflow, setHasOverflow] = React.useState(false);
-  const classes = classnames(styles.collapsible, {
-    [styles.opened]: opened,
-    [styles.overflow]: hasOverflow
-  });
-  const parentRef = React.useRef(null);
-  const childrenRef = React.useRef(null);
-  const toggleOpen = () => {
-    setOpened(!opened);
-  };
-  const messageLang = lang === "fr" ? "fr" : "en";
-  const message = opened ? messages[messageLang].close : messages[messageLang].open;
-  const Icon = opened ? Icons.ChevronUp : Icons.ChevronDown;
-  React.useEffect(() => {
-    const parentHeight = parentRef.current?.offsetHeight;
-    const childrenHeight = childrenRef.current?.offsetHeight;
-    const isConnected = Cms.isConnected();
-    if (!isConnected && childrenHeight > parentHeight) {
-      setHasOverflow(true);
-    }
-  }, []);
-  return _jsxs(motion.div, {
-    ref: parentRef,
-    animate: {
-      height: opened || !hasOverflow ? "auto" : height
-    },
-    initial: {
-      height
-    },
-    className: classes,
-    style: {
-      "--gradient-color": gradientColor
-    },
-    children: [_jsx("div", {
-      ref: childrenRef,
-      children: children
-    }), hasOverflow && _jsxs(Button, {
-      className: styles.message,
-      onClick: toggleOpen,
-      children: [message, _jsx(Icon, {})]
-    })]
-  });
-}

package/es/common/components/cross-selling-editor/cross-selling-editor.js

@@ -1,60 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import Zone from "ublo/zone";
-import { useUbloContext } from "ublo/with-ublo";
-import * as Plausible from "../plausible";
-import Editor from "./editor";
-import styles from "./cross-selling-editor.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function CrossSellingEditor({
-  titleZoneProps = {},
-  contentZoneProps = {},
-  durations,
-  className,
-  children
-}) {
-  const ref = React.useRef();
-  const titleRef = React.useRef();
-  const {
-    cmsMode
-  } = useUbloContext();
-  const sendPlausibleEvent = e => {
-    const container = e.target.closest("data-custom-offers");
-    const sections = Array.from(container.querySelectorAll("section"));
-    const section = e.target.closest("section");
-    const link = section.querySelector("a");
-    if (link) {
-      const selector = ".tunnel-offer__title, [data-title]";
-      const offer = link.querySelector(selector)?.textContent || "";
-      const position = sections.indexOf(section) + 1;
-      Plausible.sendGoal("Cart Cross Selling Offer: Click", {
-        Clicked: offer,
-        "Clicked & Position": `${offer} | ${position}`
-      });
-    }
-  };
-  return _jsxs("div", {
-    className: classNames(styles.editor, className),
-    onClick: sendPlausibleEvent,
-    children: [children, cmsMode === "editing" && _jsx(Editor, {
-      zoneRef: ref,
-      durations: durations
-    }), titleZoneProps.enabled && _jsx(Zone, {
-      ref: titleRef,
-      id: titleZoneProps.id || "tunnel-offers-title",
-      className: classNames(styles.titleZone, titleZoneProps.className),
-      section: titleZoneProps.section,
-      maxSections: 1,
-      tooltip: "Zone d'edition : Titre des offres",
-      "data-title-zone": titleZoneProps.dataAttributeValue || ""
-    }), contentZoneProps.enabled && _jsx(Zone, {
-      ref: ref,
-      id: contentZoneProps.id || "tunnel-offers",
-      className: classNames(styles.contentZone, contentZoneProps.className),
-      section: contentZoneProps.section,
-      tooltip: "Zone d'edition : Offres",
-      "data-content-zone": contentZoneProps.dataAttributeValue || ""
-    })]
-  });
-}

package/es/common/components/cross-selling-editor/editor.js

@@ -1,109 +0,0 @@
-import * as React from "react";
-import Dialog from "dt-design-system/es/dialog";
-import Button from "dt-design-system/es/button";
-import Tooltip from "dt-design-system/es/tooltip";
-import * as Icons from "dt-design-system/es/icons";
-import Rules from "./rules";
-import Tester from "./tester";
-import * as Utils from "./services/utils";
-import styles from "./editor.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";
-export default function Editor({
-  zoneRef,
-  durations
-}) {
-  const zoneContainer = zoneRef.current;
-  const [dialogOpened, setDialogOpened] = React.useState(false);
-  const [config, setConfig] = React.useState({});
-  React.useEffect(() => {
-    init(zoneContainer, setConfig);
-  }, [zoneContainer]);
-  React.useEffect(() => {
-    const configContainer = zoneContainer?.querySelector(`#${Utils.CONFIG_ID}`);
-    if (configContainer) {
-      configContainer.textContent = JSON.stringify(config);
-    }
-  }, [config, zoneContainer]);
-  React.useEffect(() => {
-    if (dialogOpened) {
-      document.body.style.setProperty("overflow", "hidden");
-    } else {
-      document.body.style.removeProperty("overflow");
-    }
-  }, [dialogOpened]);
-  const openDialog = () => {
-    patchSections(zoneContainer);
-    setDialogOpened(true);
-  };
-  const closeDialog = () => {
-    setDialogOpened(false);
-  };
-  return _jsxs(_Fragment, {
-    children: [_jsx(Tooltip, {
-      content: "Param\xE9trer les offres crois\xE9es",
-      children: _jsx(Button, {
-        className: styles.button,
-        onClick: openDialog,
-        children: _jsx(Icons.Settings, {})
-      })
-    }), _jsx(Dialog, {
-      className: styles.dialog,
-      isOpened: dialogOpened,
-      close: closeDialog,
-      showAsModal: false,
-      children: _jsxs("div", {
-        className: styles.dialogInner,
-        children: [_jsx(Rules, {
-          container: zoneContainer,
-          config: config,
-          setConfig: setConfig,
-          tunnelOffers: Utils.tunnelOffers,
-          durations: durations
-        }), _jsx(Tester, {
-          container: zoneContainer,
-          config: config,
-          tunnelOffers: Utils.tunnelOffers,
-          durations: durations
-        })]
-      })
-    })]
-  });
-}
-function init(zoneContainer, setConfig) {
-  let configContainer = zoneContainer?.querySelector(`#${Utils.CONFIG_ID}`);
-  if (!configContainer) {
-    configContainer = Object.assign(document.createElement("script"), {
-      id: Utils.CONFIG_ID,
-      type: "application/json",
-      innerHTML: JSON.stringify({})
-    });
-    if (zoneContainer) {
-      zoneContainer.appendChild(configContainer);
-    }
-  }
-  const storedConfig = configContainer.textContent;
-  if (storedConfig) {
-    setConfig(JSON.parse(storedConfig));
-  }
-}
-function patchSections(zoneContainer) {
-  if (!zoneContainer) return;
-  const sections = Array.from(zoneContainer?.querySelectorAll("section[data-class]"));
-  sections.forEach(section => {
-    const hasUuid = section.hasAttribute("data-uuid");
-    if (!hasUuid) {
-      const uuid = crypto.randomUUID();
-      section.setAttribute("data-uuid", uuid);
-    } else {
-      const uuid = section.getAttribute("data-uuid");
-      const allUuids = sections.map(section => section.getAttribute("data-uuid"));
-      const hasUniqueUuid = allUuids.some(id => id === uuid);
-      if (!hasUniqueUuid) {
-        const newUuid = crypto.randomUUID();
-        section.setAttribute("data-uuid", newUuid);
-      }
-    }
-  });
-}