ublo-lib 1.31.43 → 1.31.44

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

@@ -0,0 +1,233 @@
+import * as React from "react";
+import getConfig from "next/config";
+import Image from "next/image";
+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 Popover from "dt-design-system/es/popover";
+import Loader from "dt-design-system/es/loader";
+import * as Icons from "dt-design-system/es/icons";
+// import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
+import useWindowSizes from "../../../common/hooks/use-window-sizes";
+import * as LiftsIcons from "./icons/lifts";
+import * as TrailIcons from "./icons/trails";
+import LinkIcon from "./icons/link";
+import T, { t } from "./i18n/translations";
+import css from "./pois.module.css";
+const LIFT_ICONS = {
+    TRAIN: LiftsIcons.Teleski,
+    FUNICULAR: LiftsIcons.Teleski,
+    TRAM: LiftsIcons.Teleski,
+    CABRIOLET_GONDOLA: LiftsIcons.Telecabine,
+    GONDOLA: LiftsIcons.Telecabine,
+    COMBINED_CHAIR_GONDOLA_LIFT: LiftsIcons.Telecabine,
+    DETACHABLE_BUBBLE_CHAIRLIFT: LiftsIcons.Telecabine,
+    DETACHABLE_CHAIRLIFT: LiftsIcons.TelesiegeDebrayable,
+    CHAIRLIFT: LiftsIcons.Telesiege,
+    SURFACE_LIFT: LiftsIcons.Teleski,
+    MAGIC_CARPET: LiftsIcons.TapisRoulant,
+    ROPE_TOW: LiftsIcons.Teleski,
+    DEFAULT: LiftsIcons.Teleski,
+};
+const TRAIL_ICONS = {
+    BIKE_PARK: TrailIcons.VTT,
+    BOARDERCROSS: TrailIcons.BoarderCross,
+    BUMP_TRAIL: TrailIcons.ChampDeBosse,
+    COASTER: TrailIcons.LugeSurRail,
+    CROSS_COUNTRY_MOUNTAIN_BIKING: TrailIcons.BoarderCross,
+    CROSS_COUNTRY_SKIING: TrailIcons.SkiAlpin,
+    DOWNHILL_MOUNTAIN_BIKING: TrailIcons.VTT,
+    DOWNHILL_SKIING: TrailIcons.SkiAlpin,
+    EBIKE: TrailIcons.VTT,
+    ENDURO: TrailIcons.VTT,
+    FREERIDE_AREA_OFF_PIST: TrailIcons.SkiAlpin,
+    FREERIDE_SKI_ITINERARY: TrailIcons.SkiAlpin,
+    FUN_ZONE: TrailIcons.Freeride,
+    GATE: TrailIcons.Freeride,
+    GLADES: TrailIcons.Freeride,
+    ILLUMINATED_TRAIL: TrailIcons.PisteEclairee,
+    MULTI_USE_TRAIL: TrailIcons.Freeride,
+    MTB_ENDURO: TrailIcons.VTT,
+    PATH: TrailIcons.Pieton,
+    PEDESTRIAN: TrailIcons.Pieton,
+    ROUTE_OF_CROSS_COUNTRY: TrailIcons.SkiAlpin,
+    SKI_TOURING: TrailIcons.Freeride,
+    SLEDDING_HILL: TrailIcons.Luge,
+    SNOWPARK: TrailIcons.Snowpark,
+    SNOWPARK_LINE: TrailIcons.Snowpark,
+    SNOWSHOE: TrailIcons.Raquette,
+    SNOWTUBING: TrailIcons.Snowtubing,
+    TERRAIN_PARK: TrailIcons.Snowpark,
+    TERRAIN_PARK_US: TrailIcons.Snowpark,
+    TRAIL_RUNNING: TrailIcons.Pieton,
+    TREETOP_ADVENTURE_PARK: TrailIcons.Accrobranche,
+    TYROLEAN: TrailIcons.Tyrolienne,
+    VIDEO_ZONE: TrailIcons.Freeride,
+    UNDEF: TrailIcons.Freeride,
+    DEFAULT: TrailIcons.Freeride,
+};
+const { publicRuntimeConfig } = getConfig();
+const { lumiplanApi } = publicRuntimeConfig;
+const SPECIAL_TRAILS = {
+    "Labell'glisse": `${lumiplanApi}/pistes-ludiques/labell-glisse.png`,
+    Waouland: `${lumiplanApi}/pistes-ludiques/waouland.png`,
+    Opoualand: `${lumiplanApi}/pistes-ludiques/opoualand.png`,
+    "The Flying Donuts": `${lumiplanApi}/pistes-ludiques/flying-donuts.png`,
+    "Schlitte Mountain": `${lumiplanApi}/pistes-ludiques/schlitte-mountain.png`,
+    Boris: `${lumiplanApi}/pistes-ludiques/boris.png`,
+    "Rail Park": `${lumiplanApi}/pistes-ludiques/rail-park.png`,
+};
+const Pois = React.forwardRef(({ pois }, ref) => {
+    const { lang } = useUbloContext();
+    const { width: windowWidth } = useWindowSizes();
+    const isMobile = windowWidth && windowWidth < 768;
+    if (pois === undefined) {
+        return (<div ref={ref} className={css.loader}>
+        <Loader variant="overlay"/>
+      </div>);
+    }
+    if (!pois) {
+        return null;
+    }
+    const flattenedPois = pois.reduce((acc, zone) => {
+        const { name, lifts = [], trails = [], activities = [], interconnections = [], } = zone;
+        const liftsWithSectorName = lifts.map((lift) => (Object.assign(Object.assign({}, lift), { sectorName: name })));
+        const trailsWithSectorName = trails.map((trail) => (Object.assign(Object.assign({}, trail), { sectorName: name })));
+        const activitiesWithSectorName = activities.map((activity) => (Object.assign(Object.assign({}, activity), { sectorName: name })));
+        const interconnectionsWithSectorName = interconnections.map((interconnection) => (Object.assign(Object.assign({}, interconnection), { sectorName: name })));
+        return [
+            ...interconnectionsWithSectorName,
+            ...acc,
+            ...liftsWithSectorName,
+            ...trailsWithSectorName,
+            ...activitiesWithSectorName,
+        ];
+    }, []);
+    if (!flattenedPois.length) {
+        return null;
+    }
+    return (<div className={css.pois}>
+      <div className={css.inner}>
+        {pois.map((zone) => {
+            const { name, lifts = [], trails = [], activities = [], interconnections = [], } = zone;
+            const zonePois = [
+                ...interconnections,
+                ...lifts,
+                ...trails,
+                ...activities,
+            ];
+            if (!zonePois.length) {
+                return null;
+            }
+            return (<div key={name} className={css.zone}>
+              <div className={css.zoneName}>{name}</div>
+              <div className={css.list}>
+                {zonePois.map(({ id, name, type, liftType, trailType, activityType, trailLevel, messagePoi, openingStatus, snowQuality, groomingStatus, openingTimesReal, openingTimesTh, }) => {
+                    var _a;
+                    const isLift = type === "SKI_LIFT";
+                    const isInterconnection = type === "LINK";
+                    const translationCode = isLift
+                        ? `pois.lifts.${liftType}`
+                        : `pois.trails.${trailType}`;
+                    const hasTrailLevel = trailLevel !== undefined &&
+                        trailLevel !== "UNDEF" &&
+                        trailLevel !== "YELLOW";
+                    const trailLevelLabel = hasTrailLevel
+                        ? `(${t(lang, `pois.trail-levels.${trailLevel}`)})`
+                        : null;
+                    const specialTrail = Object.keys(SPECIAL_TRAILS).find((key) => { var _a; return (_a = name === null || name === void 0 ? void 0 : name.toLowerCase()) === null || _a === void 0 ? void 0 : _a.includes(key.toLowerCase()); });
+                    const message = (_a = messagePoi === null || messagePoi === void 0 ? void 0 : messagePoi.data) === null || _a === void 0 ? void 0 : _a.find(({ language }) => {
+                        const _lang = lang === "fr" ? "fr_FR" : "en_US";
+                        return language === _lang;
+                    });
+                    const hasGroomingStatus = groomingStatus !== undefined &&
+                        groomingStatus !== "UNDEF";
+                    const hasSnowQuality = snowQuality !== undefined && snowQuality !== "UNDEF";
+                    const classes = classNames(css.poi, {
+                        [css[trailLevel]]: hasTrailLevel,
+                    });
+                    let status = "CLOSED";
+                    if (openingStatus === null || openingStatus === void 0 ? void 0 : openingStatus.includes("DELAYED")) {
+                        status = "DELAYED";
+                    }
+                    else if (openingStatus === null || openingStatus === void 0 ? void 0 : openingStatus.includes("STOPPED")) {
+                        status = "STOPPED";
+                    }
+                    else if (openingStatus === null || openingStatus === void 0 ? void 0 : openingStatus.includes("FORECAST")) {
+                        status = "FORECAST";
+                    }
+                    else if (openingStatus === null || openingStatus === void 0 ? void 0 : openingStatus.includes("OPEN")) {
+                        status = "OPEN";
+                    }
+                    const statusCode = `pois.opening-statuses.${status}`;
+                    let Icon = isLift
+                        ? LIFT_ICONS[liftType] || LIFT_ICONS.DEFAULT
+                        : TRAIL_ICONS[activityType || trailType] ||
+                            TRAIL_ICONS.DEFAULT;
+                    if (isInterconnection) {
+                        Icon = LinkIcon;
+                    }
+                    const openingTimes = openingTimesReal || openingTimesTh;
+                    const isClosed = status === "CLOSED";
+                    const showOpeningTimes = !isClosed && openingTimes && (openingTimes === null || openingTimes === void 0 ? void 0 : openingTimes.length) > 0;
+                    return (<div key={id} className={classes}>
+                        <div className={css.poiIcon}>
+                          {specialTrail ? (<Image src={SPECIAL_TRAILS[specialTrail]} width={50} height={50} alt={specialTrail}/>) : (<Icon />)}
+                        </div>
+                        <div className={css.poiInfo}>
+                          <div className={css.poiHeader}>
+                            <span className={css.poiName}>{name}</span>
+                            <span className={css.poiStatus}>
+                              <T id={statusCode}/>
+                              {showOpeningTimes && (<div className={css.poiOpeningTimes}>
+                                  {openingTimes[0].beginTime} -{" "}
+                                  {openingTimes[0].endTime}
+                                </div>)}
+                            </span>
+                          </div>
+                          <div className={css.poiDetail}>
+                            {isInterconnection && (<div className={css.poiDetailHeader}>
+                                <b>
+                                  <T id="interconnection"/>
+                                </b>
+                              </div>)}
+                            {trailType !== "FUN_ZONE" &&
+                            activityType !== "FUN_ZONE" && (<div className={css.poiDetailKind}>
+                                  <T id={translationCode}/> {trailLevelLabel}
+                                </div>)}
+                            {!isLift && (<div className={css.poiTrailDetail}>
+                                {hasGroomingStatus && (<div className={css.poiTrailDetailItem}>
+                                    <T id={`snow.grooming.states.${groomingStatus}`}/>
+                                  </div>)}
+                                {hasSnowQuality && (<div className={css.poiTrailDetailItem}>
+                                    <T id="snow.snow-quality.title"/> :{" "}
+                                    <T id={`snow.snow-quality.states.${snowQuality}`}/>
+                                  </div>)}
+                              </div>)}
+                          </div>
+                          {(message === null || message === void 0 ? void 0 : message.data) && (<b className={css.printedMessage}>{message.data}</b>)}
+                        </div>
+                        <div className={css.poiMessage}>
+                          {(message === null || message === void 0 ? void 0 : message.data) && (<>
+                              {isMobile ? (<Popover innerClassName={css.poiPopover} trigger={<Button variant="transparent">
+                                      <Icons.Info />
+                                    </Button>}>
+                                  {message.data}
+                                </Popover>) : (<Tooltip content={message.data}>
+                                  <Button variant="transparent">
+                                    <Icons.Info />
+                                  </Button>
+                                </Tooltip>)}
+                            </>)}
+                        </div>
+                      </div>);
+                })}
+              </div>
+            </div>);
+        })}
+      </div>
+    </div>);
+});
+Pois.displayName = "Pois";
+export default Pois;

package/es/lbm/components/lumiplan/print-button.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { PrintMode } from "./types";
+type Props = {
+    fetchAllData: () => Promise<void>;
+    mode: PrintMode;
+    setMode: (mode: PrintMode) => void;
+};
+export default function PrintButton({ fetchAllData, mode, setMode }: Props): React.JSX.Element;
+export {};

package/es/lbm/components/lumiplan/print-button.jsx

@@ -0,0 +1,27 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import T from "./i18n/translations";
+import styles from "./print-button.module.css";
+export default function PrintButton({ fetchAllData, mode, setMode }) {
+    const triggerPrint = () => __awaiter(this, void 0, void 0, function* () {
+        setMode(mode);
+        yield fetchAllData();
+        window.requestAnimationFrame(() => {
+            window.print();
+        });
+    });
+    return (<div className={styles.wrapper}>
+      <Button variant="secondary" compact onClick={triggerPrint}>
+        <T id={`print.${mode}`}/>
+      </Button>
+    </div>);
+}

package/es/lbm/components/lumiplan/resort-selector.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+type Resort = {
+    id: number;
+    label: string;
+};
+type Props = {
+    resorts: Resort[];
+    currentResortId: number;
+    setCurrentResortId: (id: number) => void;
+};
+export default function ResortSelector({ resorts, currentResortId, setCurrentResortId, }: Props): React.JSX.Element;
+export {};

package/es/lbm/components/lumiplan/resort-selector.jsx

@@ -0,0 +1,47 @@
+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 css from "./resort-selector.module.css";
+export default function ResortSelector({ resorts, currentResortId, setCurrentResortId, }) {
+    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]);
+    if (!resorts || resorts.length < 2) {
+        return null;
+    }
+    const classes = classNames(css.selector, {
+        [css.leftShadow]: showLeftShadow,
+        [css.rightShadow]: showRightShadow,
+    });
+    return (<div ref={containerRef} className={classes}>
+      <div ref={scrollerRef} onScroll={refreshShadows} className={css.content}>
+        {resorts.map(({ id, label }) => {
+            const classes = classNames(css.button, {
+                [css.selected]: id === currentResortId,
+            });
+            const updateCurrentResort = () => {
+                setCurrentResortId(id);
+            };
+            return (<Button key={id} className={classes} onClick={updateCurrentResort}>
+              {label}
+            </Button>);
+        })}
+      </div>
+    </div>);
+}

package/es/lbm/components/lumiplan/road-condition.d.ts

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

package/es/lbm/components/lumiplan/road-condition.jsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Loader from "dt-design-system/es/loader";
+import T, { t } from "./i18n/translations";
+import RoadConditionIcon from "./icons/road-condition";
+import css from "./road-condition.module.css";
+const RoadCondition = React.forwardRef(({ resortAccess }, ref) => {
+    var _a;
+    const { lang } = useUbloContext();
+    if (resortAccess === undefined) {
+        return (<div ref={ref} className={css.loader} data-tags={t(lang, "road-conditions.navigation-title")}>
+          <Loader variant="overlay"/>
+        </div>);
+    }
+    if (!((_a = resortAccess === null || resortAccess === void 0 ? void 0 : resortAccess.roadConditions) === null || _a === void 0 ? void 0 : _a.length)) {
+        return null;
+    }
+    const { roadConditions } = resortAccess;
+    return (<div ref={ref} className={css.conditions} data-tags={t(lang, "road-conditions.navigation-title")}>
+        <div className={css.title} dangerouslySetInnerHTML={{ __html: t(lang, "road-conditions.title") }}/>
+        {roadConditions.map(({ id, name, status, roadInfo, equipment, surface, number }) => {
+            var _a;
+            const roadInfoData = (_a = roadInfo === null || roadInfo === void 0 ? void 0 : roadInfo.data) === null || _a === void 0 ? void 0 : _a.find(({ language }) => {
+                const _lang = lang === "fr" ? "fr_FR" : "en_US";
+                return language === _lang;
+            });
+            const hasValidNumber = !isNaN(parseInt(number, 10)) && number !== "0";
+            return (<div key={id} className={css.condition}>
+                <RoadConditionIcon className={css.icon}/>
+                <div className={css.right}>
+                  <div className={css.status}>
+                    <T id="road-conditions.road"/>{" "}
+                    <T id={`road-conditions.status.${status ? "OPENED" : "CLOSED"}`}/>
+                  </div>
+                  <div className={css.top}>
+                    {(name === null || name === void 0 ? void 0 : name.trim()) && (<div className={css.name}>
+                        {name} {hasValidNumber && <>n°{number}</>}
+                      </div>)}
+                    {(surface === null || surface === void 0 ? void 0 : surface.trim()) && surface !== "UNDEF" && (<div className={css.surface}>
+                        <b>
+                          <T id="road-conditions.surface.title"/>
+                        </b>
+                        <T id={`road-conditions.surface.states.${surface}`}/>.
+                      </div>)}
+                    {(equipment === null || equipment === void 0 ? void 0 : equipment.trim()) && equipment !== "UNDEF" && (<div className={css.equipment}>
+                        <b>
+                          <T id="road-conditions.equipment.title"/>
+                        </b>
+                        <T id={`road-conditions.equipment.states.${equipment}`}/>
+                      </div>)}
+                  </div>
+                  {roadInfoData && (<div className={css.bottom} dangerouslySetInnerHTML={{ __html: roadInfoData.data }}/>)}
+                </div>
+              </div>);
+        })}
+      </div>);
+});
+RoadCondition.displayName = "RoadCondition";
+export default RoadCondition;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Signature as SignatureType } from "./types";
+type Props = {
+    signature: SignatureType;
+};
+export default function Signature({ signature }: Props): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import Image from "next/image";
+import getConfig from "next/config";
+import styles from "./signature.module.css";
+const { publicRuntimeConfig } = getConfig();
+const { lumiplanApi } = publicRuntimeConfig;
+export default function Signature({ signature }) {
+    if (!signature)
+        return null;
+    return (<div className={styles.signature}>
+      <Image src={`${lumiplanApi}/labellemontagne-white.svg`} height={400} width={100} alt="labellemontagne"/>
+    </div>);
+}

package/es/lbm/components/lumiplan/todays-tips.d.ts

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

package/es/lbm/components/lumiplan/todays-tips.jsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Loader from "dt-design-system/es/loader";
+import { t } from "./i18n/translations";
+import css from "./todays-tips.module.css";
+const TodaysTips = React.forwardRef(({ resortOpening }, ref) => {
+    var _a;
+    const { lang } = useUbloContext();
+    const todaysTips = (_a = resortOpening === null || resortOpening === void 0 ? void 0 : resortOpening.resortInfos) === null || _a === void 0 ? void 0 : _a.find(({ type }) => type === "RESORT_TIP_OF_THE_DAY");
+    if (todaysTips === undefined) {
+        return (<div ref={ref} className={css.loader}>
+          <Loader variant="overlay"/>
+        </div>);
+    }
+    if (!todaysTips) {
+        return null;
+    }
+    const text = todaysTips.data.find(({ language }) => language === "fr_FR");
+    if (!(text === null || text === void 0 ? void 0 : text.data)) {
+        return null;
+    }
+    return (<div ref={ref} className={css.tips}>
+        <div className={css.title} dangerouslySetInnerHTML={{ __html: t(lang, "todays-tips.title") }}/>
+        <div className={css.text} dangerouslySetInnerHTML={{ __html: text.data }}/>
+      </div>);
+});
+TodaysTips.displayName = "TodaysTips";
+export default TodaysTips;

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+type Props = {
+    setMode: (mode: "weather" | "trails") => void;
+    fetchAllData: () => Promise<void>;
+};
+export default function Toolbar({ setMode, fetchAllData }: Props): React.JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as Icons from "dt-design-system/es/icons";
+import PrintButton from "./print-button";
+import T from "./i18n/translations";
+import styles from "./toolbar.module.css";
+export default function Toolbar({ setMode, fetchAllData }) {
+    return (<div className={styles.toolbar}>
+      <div className={styles.inner}>
+        <Icons.Download className={styles.icon}/>
+        <T id="print.label"/>
+        <PrintButton fetchAllData={fetchAllData} mode="weather" setMode={setMode}/>
+        <PrintButton fetchAllData={fetchAllData} mode="trails" setMode={setMode}/>
+      </div>
+    </div>);
+}