ublo-lib 1.16.5 → 1.17.0

package/es/common/components/msem-preset-editor/components/widget-list-item.module.css

@@ -0,0 +1,115 @@
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.button {
+  width: 100%;
+  justify-content: flex-start;
+  gap: 10px;
+  font-weight: 400;
+  text-align: left;
+  padding-right: 100px;
+  background-color: var(--ublo-grey-100, #f5f5f5);
+  border-radius: var(--ublo-radius-200, 10px);
+}
+
+.selected .button {
+  color: var(--ublo-primary-color, #073ff8);
+  font-weight: 700;
+  background-color: var(--ublo-blue-100, #e8f0fc);
+}
+
+.opened .button {
+  border-bottom-right-radius: 0;
+}
+
+.logo {
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ublo-secondary-color, #4177f6);
+  border-radius: var(--ublo-radius-200, 10px);
+}
+
+.logo img {
+  width: 24px;
+  height: 24px;
+  filter: brightness(0) invert(1);
+}
+
+.name {
+  color: var(--ublo-grey-600, #1b1b1b);
+}
+
+.selected .name {
+  color: var(--ublo-primary-color, #073ff8);
+}
+
+.actions {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  gap: 4px;
+}
+
+.action {
+  border-radius: var(--ublo-radius-100, 3px);
+}
+
+.list {
+  width: calc(100% - 28px);
+  max-height: 140px;
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  padding: 6px;
+  border-radius: 0 0 var(--ublo-radius-200, 10px) var(--ublo-radius-200, 10px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  background: linear-gradient(
+      var(--ublo-grey-100, #f5f5f5) 30%,
+      hsla(0, 0%, 100%, 0)
+    ),
+    linear-gradient(hsla(0, 0%, 100%, 0), var(--ublo-grey-100, #f5f5f5) 70%) 0
+      100%,
+    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), transparent),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), transparent)
+      0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+  background-color: var(--ublo-grey-100, #f5f5f5);
+}
+
+.sub {
+  position: relative;
+}
+
+.subButton {
+  width: 100%;
+  justify-content: flex-start;
+  padding-right: 68px;
+  font-weight: 400;
+  text-align: left;
+}
+
+.subButtonSelected {
+  color: var(--ublo-primary-color, #073ff8);
+  font-weight: 700;
+  background-color: var(--ublo-blue-100, #e8f0fc);
+}
+
+.subActions {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+  transform: translateY(-50%);
+}

package/es/common/components/msem-preset-editor/components/widget-list.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { Offer } from "../services/offers";
+type Props = {
+    lang: "fr" | "en";
+    channel: string;
+    resort: number | string;
+    facet: string;
+    preset: Record<string, any> | null;
+    updatePreset: (item: Offer, subPreset?: Offer) => void;
+    removePreset: () => void;
+    error: string | null;
+    setError: React.Dispatch<React.SetStateAction<string | null>>;
+    setShowPresetDialog: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export default function WidgetList({ lang, channel, resort, facet, preset, updatePreset, removePreset, setError, setShowPresetDialog, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=widget-list.d.ts.map

package/es/common/components/msem-preset-editor/components/widget-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-list.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/msem-preset-editor/components/widget-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAGhD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC9D,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACpE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,mBAAmB,GACpB,EAAE,KAAK,2CA8CP"}

package/es/common/components/msem-preset-editor/components/widget-list.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Loader from "dt-design-system/es/loader";
+import WidgetListItem from "./widget-list-item";
+import * as Offers from "../services/offers";
+import css from "./widget-list.module.css";
+export default function WidgetList({ lang, channel, resort, facet, preset, updatePreset, removePreset, setError, setShowPresetDialog, }) {
+    const [offers, setOffers] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    React.useEffect(() => {
+        const runEffect = async () => {
+            setError(null);
+            setOffers(null);
+            setLoading(true);
+            try {
+                const offers = (await Offers.get(lang, channel, resort, facet));
+                const filteredOffers = offers.filter(({ kind }) => {
+                    return kind !== "FFS" && kind !== "ASSU";
+                });
+                setOffers(filteredOffers);
+            }
+            catch (e) {
+                setError("Une erreur est survenue lors de la récupération des offres");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        runEffect();
+    }, [channel, facet, lang, resort, setError]);
+    return (_jsxs("div", { className: css.list, children: [loading && _jsx(Loader, { className: css.loader }), offers?.map((offer, i) => {
+                return (_jsx(WidgetListItem, { item: offer, preset: preset, updatePreset: updatePreset, removePreset: removePreset, setShowPresetDialog: setShowPresetDialog }, i));
+            })] }));
+}

package/es/common/components/msem-preset-editor/components/widget-list.module.css

@@ -0,0 +1,12 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.loader {
+  --ds-loader-spinner-size: 30px;
+  --ds-loader-thickness: 3px;
+
+  margin-top: 10px;
+}

package/es/common/components/msem-preset-editor/editor-dialog.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+type Props = {
+    lang: "fr" | "en";
+    options: {
+        channel: string;
+        resort: string;
+        cartUrl?: string;
+        analytics?: () => void;
+    };
+    urls?: {
+        override?: string;
+        skiPasses?: {
+            winter: string;
+            summer: string;
+        };
+        lodgings?: {
+            winter: string;
+            summer: string;
+        };
+    };
+    target: HTMLElement | null;
+    updatePreset: (preset: any) => any;
+    closeEditor: () => void;
+    removeObsoletePreset: () => void;
+    children?: React.ReactNode;
+};
+export default function EditorDialog({ lang, options, urls, target, updatePreset, closeEditor, removeObsoletePreset, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=editor-dialog.d.ts.map

package/es/common/components/msem-preset-editor/editor-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-dialog.d.ts","sourceRoot":"","sources":["../../../../src/common/components/msem-preset-editor/editor-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;KACxB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAC/C,QAAQ,CAAC,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;KAC/C,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC;IACnC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,QAAQ,GACT,EAAE,KAAK,2CAqDP"}

package/es/common/components/msem-preset-editor/editor-dialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Dialog from "dt-design-system/es/dialog";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import MseMPresetEditor from "./msem-preset-editor";
+import css from "./editor-dialog.module.css";
+export default function EditorDialog({ lang, options, urls, target, updatePreset, closeEditor, removeObsoletePreset, children, }) {
+    const selectedPreset = target?.getAttribute("data-msem-preset");
+    const [preset, setPreset] = React.useState(selectedPreset ? JSON.parse(selectedPreset) : null);
+    const hasObsoletePreset = target?.hasAttribute("data-config");
+    const updateNewPreset = React.useCallback(() => {
+        updatePreset(preset);
+    }, [preset, updatePreset]);
+    return (_jsxs(Dialog, { className: css.dialog, isOpened: !!target, container: null, close: closeEditor, showAsModal: false, closeOnBackdropClick: false, children: [_jsx("div", { className: css.title, children: "Choisissez un widget" }), _jsx("div", { className: css.subtitle, children: "Ce dernier s'ouvrira au clic sur la section selectionn\u00E9e." }), _jsx(MseMPresetEditor, { lang: lang, options: options, urls: urls, selectedPreset: selectedPreset, onChange: setPreset, children: children }), _jsxs("div", { className: css.buttons, children: [hasObsoletePreset && (_jsxs(Button, { variant: "danger", className: css.removeObsolete, onClick: removeObsoletePreset, children: [_jsx(Icons.MdOutlineCleaningServices, {}), "Nettoyer le preset obsol\u00E8te"] })), _jsx(Button, { variant: "secondary", onClick: closeEditor, children: "Annuler" }), _jsx(Button, { variant: "primary", onClick: updateNewPreset, children: "Valider" })] })] }));
+}

package/es/common/components/msem-preset-editor/editor-dialog.module.css

@@ -0,0 +1,31 @@
+.dialog {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  pointer-events: auto;
+}
+
+.title {
+  margin-bottom: 8px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.subtitle {
+  margin-bottom: 16px;
+  padding-right: 48px;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 22px;
+}
+
+.removeObsolete {
+  margin-right: auto;
+}

package/es/common/components/msem-preset-editor/editors/elloha.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+type Props = {
+    stay: {
+        from: string;
+        to: string;
+    };
+    preset: Record<string, any> | null;
+    setPreset: React.Dispatch<React.SetStateAction<Record<string, any> | null>>;
+    setShowPresetDialog: React.Dispatch<React.SetStateAction<boolean>>;
+    testPreset: () => void;
+};
+export default function Elloha({ preset, setPreset, stay, setShowPresetDialog, testPreset, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=elloha.d.ts.map

package/es/common/components/msem-preset-editor/editors/elloha.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elloha.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/msem-preset-editor/editors/elloha.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,KAAK,GAAG;IACX,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IAC5E,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAWF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,mBAAmB,EACnB,UAAU,GACX,EAAE,KAAK,2CAyFP"}

package/es/common/components/msem-preset-editor/editors/elloha.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import MultipleSelect from "dt-design-system/es/multiple-select";
+import Form from "../components/form";
+import * as API from "../services/api";
+import css from "./elloha.module.css";
+const DEFAULT_DATA = {
+    groupNames: [],
+};
+export default function Elloha({ preset, setPreset, stay, setShowPresetDialog, testPreset, }) {
+    const savedPreset = React.useRef(preset);
+    const [loading, setLoading] = React.useState(false);
+    const [groupNames, setGroupNames] = React.useState([]);
+    const [selectedGroups, setSelectedGroups] = React.useState(getDefaultData(preset));
+    const { merchant } = preset?.options || {};
+    const error = !stay?.from || !stay?.to;
+    const cancelPreset = () => {
+        setPreset(savedPreset.current);
+        setShowPresetDialog(false);
+    };
+    const confirmPreset = () => {
+        setShowPresetDialog(false);
+    };
+    React.useEffect(() => {
+        if (!error) {
+            const runEffect = async () => {
+                try {
+                    setLoading(true);
+                    const { kinds } = await API.getEllohaGroups(merchant, stay.from);
+                    const allGroups = kinds.map((k) => k.group).filter(Boolean);
+                    const groups = [...new Set(allGroups)];
+                    setGroupNames(groups);
+                }
+                catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.error(e);
+                }
+                finally {
+                    setLoading(false);
+                }
+            };
+            runEffect();
+        }
+    }, [error, merchant, stay.from]);
+    React.useEffect(() => {
+        setPreset((current = {}) => {
+            return {
+                ...current,
+                presets: {
+                    ...(current?.presets || {}),
+                    groupNames: selectedGroups,
+                },
+            };
+        });
+    }, [selectedGroups, setPreset]);
+    return (_jsxs(Form, { title: "Presets activit\u00E9s Elloha", width: 420, preset: preset, buttonsActions: {
+            testPreset,
+            cancelPreset,
+            confirmPreset: error || groupNames.length === 0 ? undefined : confirmPreset,
+        }, children: [!error && (_jsx(MultipleSelect, { label: "Groupes", options: groupNames, values: selectedGroups, onChange: setSelectedGroups, placeholder: "S\u00E9lectionnez un ou plusieurs groupes", loading: loading, disabled: groupNames.length === 0, error: !loading &&
+                    groupNames.length === 0 &&
+                    "Aucun groupe disponible à ces dates" })), error && (_jsx("div", { className: css.error, children: "Vous devez renseigner des dates de s\u00E9jour pour afficher les groupes" }))] }));
+}
+function getDefaultData(preset) {
+    if (!preset?.presets)
+        return DEFAULT_DATA;
+    const { groupNames } = preset.presets;
+    return groupNames || DEFAULT_DATA.groupNames;
+}

package/es/common/components/msem-preset-editor/editors/elloha.module.css

@@ -0,0 +1,8 @@
+.error {
+  padding: 10px;
+  font-size: 12px;
+  text-align: center;
+  color: var(--ds-red-500, #990700);
+  background-color: var(--ds-red-200, #fde7e7);
+  border-radius: var(--ublo-radius-200, 10px);
+}

package/es/common/components/msem-preset-editor/editors/index.d.ts

@@ -0,0 +1,14 @@
+import SkiPasses from "./ski-passes";
+import Lodgings from "./lodgings";
+import Elloha from "./elloha";
+import Vakario from "./vakario";
+import StandardProducts from "./standard-products";
+declare const Editor: {
+    lodging: typeof Lodgings;
+    skiPass: typeof SkiPasses;
+    elloha: typeof Elloha;
+    vakario: typeof Vakario;
+    otherProducts: typeof StandardProducts;
+};
+export default Editor;
+//# sourceMappingURL=index.d.ts.map

package/es/common/components/msem-preset-editor/editors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/msem-preset-editor/editors/index.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AAEnD,QAAA,MAAM,MAAM;;;;;;CAMX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/es/common/components/msem-preset-editor/editors/index.js

@@ -0,0 +1,13 @@
+import SkiPasses from "./ski-passes";
+import Lodgings from "./lodgings";
+import Elloha from "./elloha";
+import Vakario from "./vakario";
+import StandardProducts from "./standard-products";
+const Editor = {
+    lodging: Lodgings,
+    skiPass: SkiPasses,
+    elloha: Elloha,
+    vakario: Vakario,
+    otherProducts: StandardProducts,
+};
+export default Editor;

package/es/common/components/msem-preset-editor/editors/lodgings.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+type Props = {
+    stay: {
+        from: string;
+        to: string;
+    };
+    preset: Record<string, any> | null;
+    setPreset: React.Dispatch<React.SetStateAction<Record<string, any> | null>>;
+    setShowPresetDialog: React.Dispatch<React.SetStateAction<boolean>>;
+    testPreset: () => void;
+    onChange: (preset: Record<string, any>) => void;
+    baseUrl: string;
+};
+export default function Lodgings({ preset, setPreset, setShowPresetDialog, testPreset, onChange, baseUrl, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=lodgings.d.ts.map

package/es/common/components/msem-preset-editor/editors/lodgings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lodgings.d.ts","sourceRoot":"","sources":["../../../../../src/common/components/msem-preset-editor/editors/lodgings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,KAAK,KAAK,GAAG;IACX,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IAC5E,mBAAmB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnE,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAsCF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,SAAS,EACT,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,OAAO,GACR,EAAE,KAAK,2CAmSP"}

package/es/common/components/msem-preset-editor/editors/lodgings.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import Checkbox from "dt-design-system/es/checkbox";
+import NumberPicker from "dt-design-system/es/number-picker";
+import Select from "dt-design-system/es/select";
+import MultipleSelect from "dt-design-system/es/multiple-select";
+import Form from "../components/form";
+import * as API from "../services/api";
+import css from "./lodgings.module.css";
+const DEFAULT_DATA = {
+    adults: 0,
+    children: 0,
+    lodging: "",
+    standings: [],
+    options: [],
+    districts: [],
+    nbRooms: [],
+    roomType: "",
+    type: "",
+    openPage: false,
+};
+export default function Lodgings({ preset, setPreset, setShowPresetDialog, testPreset, onChange, baseUrl, }) {
+    const savedPreset = React.useRef(preset);
+    const [ready, setReady] = React.useState(false);
+    const [lodgings, setLogings] = React.useState([]);
+    const [filters, setFilters] = React.useState({
+        standings: [],
+        options: [],
+        districts: [],
+    });
+    const [rooms, setRooms] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    const [data, setData] = React.useState(getDefaultData(preset));
+    const kinds = [...new Set(lodgings.map(({ kind }) => kind))];
+    const { channel, resort, facet } = preset?.options || {};
+    const showLodgingPageCheckbox = !!data.lodging;
+    const showFilters = !data.lodging;
+    const updateField = (field) => (value) => {
+        setData({ ...data, [field]: value });
+    };
+    const updateRoomNb = (value) => {
+        setData({ ...data, nbRooms: value ? [value] : DEFAULT_DATA.nbRooms });
+    };
+    const updateFilter = (kind) => (newValue) => {
+        setData((data) => ({ ...data, [kind]: newValue.map((v) => v.value) }));
+    };
+    const formatedLodgings = lodgings.map((lodging) => ({
+        value: lodging.slug,
+        label: lodging.name,
+    }));
+    const formatedRooms = rooms.map((room) => ({
+        label: room.title,
+        value: room.type,
+    }));
+    const selectedStandings = data.standings?.map((standing) => filters?.standings?.find((d) => d.value === standing));
+    const selectedOptions = data.options?.map((option) => filters?.options?.find((d) => d.value === option));
+    const selectedDistricts = data.districts?.map((district) => filters?.districts?.find((d) => d.value === district));
+    const cancelPreset = () => {
+        setPreset(savedPreset.current);
+        setShowPresetDialog(false);
+    };
+    const confirmPreset = () => {
+        setShowPresetDialog(false);
+    };
+    React.useEffect(() => {
+        if (!ready) {
+            const init = async () => {
+                try {
+                    setLoading(true);
+                    const filters = await API.getLodgingFilters(channel, resort, facet);
+                    const formatedFilters = Object.keys(filters).reduce((acc, key) => {
+                        if (key === "accomodations")
+                            return acc;
+                        const filter = filters[key];
+                        if (key === "districts") {
+                            const entries = filter.map((entry) => ({
+                                value: entry.id,
+                                label: entry.name,
+                            }));
+                            return { ...acc, [key]: entries };
+                        }
+                        else {
+                            const entries = filter.map((entry) => ({
+                                value: entry.code,
+                                label: entry.label,
+                            }));
+                            return { ...acc, [key]: entries };
+                        }
+                    }, {});
+                    setLogings(filters.accomodations);
+                    setFilters(formatedFilters);
+                    setReady(true);
+                }
+                catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.error(e);
+                }
+                finally {
+                    setLoading(false);
+                }
+            };
+            init();
+        }
+    }, [channel, facet, ready, resort]);
+    React.useEffect(() => {
+        if (!data.lodging) {
+            setData((data) => ({ ...data, openPage: false }));
+        }
+        else {
+            const getRoomTypes = async () => {
+                try {
+                    setLoading(true);
+                    const id = lodgings.find((lodging) => lodging.slug === data.lodging)?.id;
+                    if (id) {
+                        const { rooms } = await API.getLodgingRooms(id, resort, facet);
+                        if (rooms) {
+                            setRooms(rooms);
+                        }
+                    }
+                }
+                catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.error(e);
+                }
+                finally {
+                    setLoading(false);
+                }
+                setData((data) => ({
+                    ...data,
+                    openPage: data.openPage ?? true,
+                    standings: DEFAULT_DATA.standings,
+                    options: DEFAULT_DATA.options,
+                    districts: DEFAULT_DATA.districts,
+                    type: DEFAULT_DATA.type,
+                }));
+            };
+            getRoomTypes();
+        }
+    }, [data.lodging, facet, lodgings, resort]);
+    React.useEffect(() => {
+        setPreset((current = {}) => {
+            const { lodging } = data;
+            const adults = parseInt(data.adults);
+            const children = parseInt(data.children);
+            const accomodation = lodging || undefined;
+            const openPage = lodging ? data.openPage : undefined;
+            const agesChildren = [...new Array(children)].map((_) => 12);
+            const paxPlan = adults ? { adults, children, agesChildren } : undefined;
+            const standings = data.standings?.length ? data.standings : undefined;
+            const options = data.options?.length ? data.options : undefined;
+            const districts = data.districts?.length ? data.districts : undefined;
+            const type = data.type || undefined;
+            const roomType = data.roomType || undefined;
+            const nbRooms = data.nbRooms[0] > 0 ? data.nbRooms : undefined;
+            const previewDetails = { paxPlan, roomType };
+            const presets = {
+                accomodation,
+                standings,
+                options,
+                districts,
+                nbRooms,
+                type,
+            };
+            const newPreset = {
+                ...current,
+                options: { ...(current?.options || {}), previewDetails },
+                presets: { ...(current?.presets || {}), ...presets },
+                openPage,
+                url: baseUrl || undefined,
+            };
+            onChange?.(newPreset);
+            return newPreset;
+        });
+    }, [data, onChange, baseUrl, setPreset]);
+    return (_jsxs(Form, { title: "Presets h\u00E9bergements", width: 580, preset: preset, buttonsActions: {
+            testPreset,
+            cancelPreset,
+            confirmPreset,
+        }, children: [_jsx("div", { className: css.label, children: "Nombre de personnes" }), _jsxs("div", { className: css.row, children: [_jsx(NumberPicker, { className: css.peopleInput, label: "Adultes", min: 0, max: 20, value: data.adults, onChange: updateField("adults"), withInput: true }), _jsx(NumberPicker, { className: css.peopleInput, label: "Enfants", min: 0, max: 9, value: data.children, onChange: updateField("children"), withInput: true })] }), _jsx("div", { className: css.label, children: "H\u00E9bergement" }), _jsx(Select, { placeholder: "S\u00E9lectionnez un h\u00E9bergement", options: formatedLodgings, value: data.lodging, onValueChange: updateField("lodging"), loading: loading }), showLodgingPageCheckbox && (_jsx(Checkbox, { label: "Ouvrir la page du site", checked: data.openPage, disabled: !showLodgingPageCheckbox, onCheckedChange: updateField("openPage") })), !showFilters && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.label, children: "Chambres" }), (formatedRooms?.length > 0 || loading) && (_jsx(Select, { label: "Type de chambre", placeholder: "S\u00E9lectionnez un type de chambre", value: data.roomType, options: formatedRooms, loading: loading, onValueChange: updateField("roomType") })), _jsx(NumberPicker, { label: "Nombre de chambres", min: 0, max: 20, value: data.nbRooms?.[0] || 0, onChange: updateRoomNb, withInput: true })] })), showFilters && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.label, children: "Filtres" }), kinds.length > 1 && (_jsx(Select, { label: "Type", placeholder: "S\u00E9lectionnez un type", options: kinds, value: data.type, onValueChange: updateField("type"), loading: loading })), filters?.standings && filters?.standings?.length > 1 && (_jsx(MultipleSelect, { placeholder: "Selectionnez une ou plusieurs options", label: "Standing", options: filters.standings, values: selectedStandings, onChange: updateFilter("standings"), loading: loading })), filters?.options && filters?.options?.length > 1 && (_jsx(MultipleSelect, { placeholder: "Selectionnez une ou plusieurs options", label: "Options", options: filters.options, values: selectedOptions, onChange: updateFilter("options"), loading: loading })), filters?.districts && filters?.districts?.length > 1 && (_jsx(MultipleSelect, { placeholder: "Selectionnez une ou plusieurs options", label: "Quartiers", options: filters.districts, values: selectedDistricts, onChange: updateFilter("districts"), loading: loading }))] }))] }));
+}
+function getDefaultData(preset) {
+    if (!preset?.presets && !preset?.options)
+        return DEFAULT_DATA;
+    const { accomodation, nbRooms, standings, options, districts, type } = preset?.presets || {};
+    const { openPage } = preset;
+    const { paxPlan, roomType } = preset?.options?.previewDetails || {};
+    return {
+        adults: paxPlan?.adults || DEFAULT_DATA.adults,
+        children: paxPlan?.children || DEFAULT_DATA.children,
+        lodging: accomodation || DEFAULT_DATA.lodging,
+        nbRooms: nbRooms || DEFAULT_DATA.nbRooms,
+        roomType: roomType || DEFAULT_DATA.roomType,
+        standings: standings || DEFAULT_DATA.standings,
+        options: options || DEFAULT_DATA.options,
+        districts: districts || DEFAULT_DATA.districts,
+        type: type || DEFAULT_DATA.type,
+        openPage: openPage ?? DEFAULT_DATA.openPage,
+    };
+}

package/es/common/components/msem-preset-editor/editors/lodgings.module.css

@@ -0,0 +1,21 @@
+.row {
+  display: flex;
+  gap: 8px;
+}
+
+.rowWrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.rowWrap > * {
+  flex: 0 0 auto;
+}
+
+.label {
+  font-size: 12px;
+  user-select: none;
+  font-weight: 700;
+}

package/es/common/components/msem-preset-editor/editors/ski-passes.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+type Props = {
+    stay: {
+        from: string;
+        to: string;
+    };
+    preset: Record<string, any> | null;
+    setPreset: React.Dispatch<React.SetStateAction<Record<string, any> | null>>;
+    setShowPresetDialog: React.Dispatch<React.SetStateAction<boolean>>;
+    testPreset: () => void;
+    baseUrl: string;
+};
+export default function SkiPasses({ preset, setPreset, stay, setShowPresetDialog, testPreset, baseUrl, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ski-passes.d.ts.map