ublo-lib 1.47.118 → 1.48.1

package/es/future/components/msem-package/components/config.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type * as Types from "../types";
+type Props = {
+    idPrefix: string;
+    config: Types.Config;
+    setConfig: React.Dispatch<React.SetStateAction<Types.Config>>;
+};
+export default function Config({ idPrefix, config, setConfig }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=config.d.ts.map

package/es/future/components/msem-package/components/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/config.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,KAAK,KAAK,MAAM,UAAU,CAAC;AAIvC,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CA8CpE"}

package/es/future/components/msem-package/components/config.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Zone from "ublo/zone";
+import styles from "./config.module.css";
+export default function Config({ idPrefix, config, setConfig }) {
+    const ref = React.useRef(null);
+    const { menuPath } = useUbloContext();
+    const [initialized, setInitialized] = React.useState(false);
+    React.useEffect(() => {
+        if (!initialized) {
+            const container = ref.current;
+            let script = container?.querySelector("script");
+            if (!script) {
+                script = Object.assign(document.createElement("script"), {
+                    type: "application/json",
+                    innerHTML: "{}",
+                });
+                container.appendChild(script);
+            }
+            const storedConfig = script.textContent;
+            if (storedConfig) {
+                const config = JSON.parse(storedConfig);
+                setConfig({
+                    ...config,
+                    id: config.id || `${idPrefix}-${menuPath?.id}`,
+                });
+            }
+            setInitialized(true);
+        }
+    }, [initialized, setConfig, idPrefix, menuPath?.id]);
+    React.useEffect(() => {
+        const container = ref.current;
+        if (initialized && container) {
+            const script = container.querySelector("script");
+            if (script) {
+                script.textContent = JSON.stringify(config);
+            }
+        }
+    }, [config, initialized]);
+    return (_jsx(Zone, { ref: ref, id: "package-config", className: styles.zone, readOnly: true }));
+}

package/es/future/components/msem-package/components/config.module.css

@@ -0,0 +1,3 @@
+.zone {
+  display: none;
+}

package/es/future/components/msem-package/components/filters.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type * as Types from "../types";
+type Props = {
+    config: Types.Config;
+    stay: Types.Stay;
+    setStay: React.Dispatch<React.SetStateAction<Types.Stay>>;
+};
+export default function Filters({ config, stay, setStay }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=filters.d.ts.map

package/es/future/components/msem-package/components/filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/filters.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,KAAK,KAAK,MAAM,UAAU,CAAC;AAIvC,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;CAC3D,CAAC;AAMF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,2CA+I/D"}

package/es/future/components/msem-package/components/filters.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Input from "dt-design-system/es/input";
+import Dropdown from "dt-design-system/es/dropdown";
+import DatePicker, { Utils } from "../../../../common/components/date-picker";
+import T, { t } from "../i18n/translations";
+import styles from "./filters.module.css";
+export default function Filters({ config, stay, setStay }) {
+    const ref = React.useRef(null);
+    const { lang } = useUbloContext();
+    const [stayDates, setStayDates] = React.useState([]);
+    const [datePickerOpen, setDatePickerOpen] = React.useState(false);
+    const [datePickerOptions, setDatePickerOptions] = React.useState();
+    const { from: min, to: max, forced, fixed, nbDays } = config.stay || {};
+    const { paxPlan } = config;
+    const usedMax = fixed
+        ? Utils.getDateISO(Utils.addDays(max, -nbDays + 1))
+        : max;
+    React.useEffect(() => {
+        if (forced) {
+            setStay({ from: min, to: usedMax });
+        }
+    }, [forced, usedMax, min, setStay]);
+    React.useEffect(() => {
+        if (stay) {
+            const { from, to } = stay;
+            const fromDate = new Date(from);
+            fromDate.setHours(0, 0, 0, 0);
+            const toDate = new Date(to);
+            toDate.setHours(0, 0, 0, 0);
+            const interval = Utils.getDateInterval(fromDate, toDate);
+            setStayDates(interval);
+        }
+    }, [stay]);
+    const scrollToFilters = () => {
+        window.requestAnimationFrame(() => {
+            ref.current.scrollIntoView({ behavior: "smooth" });
+        });
+    };
+    const openDatePicker = (options = {}) => {
+        setDatePickerOpen(true);
+        setDatePickerOptions(options);
+        scrollToFilters();
+    };
+    const closeDatePicker = () => {
+        setDatePickerOpen(false);
+        setDatePickerOptions(undefined);
+    };
+    const updateStay = (data) => {
+        if (data.length === 0)
+            return;
+        const from = Utils.getDateISO(data[0]);
+        const to = fixed
+            ? Utils.getDateISO(Utils.addDays(data[0], nbDays - 1))
+            : Utils.getDateISO(data[data.length - 1]);
+        const newStay = { from, to };
+        setStay(newStay);
+        closeDatePicker();
+    };
+    const titleKey = forced ? "filters.fixed-title" : "filters.title";
+    return (_jsx("div", { ref: ref, className: styles.filters, style: { display: forced ? "none" : "block" }, children: _jsxs("div", { className: styles.form, children: [_jsx("div", { className: styles.title, children: _jsx(T, { id: titleKey }) }), fixed && (_jsxs("div", { className: styles.subtitle, children: [_jsx(T, { id: "filters.subtitle" }), _jsxs("span", { className: styles.bold, children: [nbDays, " ", _jsx(T, { id: "filters.day" }), nbDays > 1 ? "s" : ""] })] })), _jsxs("div", { className: styles.inner, children: [_jsx(Dropdown, { open: datePickerOpen, onClose: closeDatePicker, onOpenChange: (open) => setDatePickerOpen(open), breakpoint: 600, content: _jsx(DatePicker, { stayDates: stayDates, popup: false, close: closeDatePicker, onSubmit: updateStay, min: min, max: usedMax, singleDate: fixed, submitOnSelectionEnd: fixed, ...datePickerOptions }), children: _jsx(Input, { type: "text", icon: "Calendar", className: styles.field, label: t(lang, "filters.stay-from-label"), placeholder: t(lang, "filters.stay-from-placeholder"), value: stay?.from ? Utils.weekToLongDate(stay.from) : "", onClick: () => openDatePicker(), readOnly: true, disabled: forced }) }, JSON.stringify(datePickerOptions)), _jsx(Input, { type: "text", icon: "Calendar", className: styles.field, label: t(lang, "filters.stay-to-label"), placeholder: t(lang, "filters.stay-to-placeholder"), value: stay?.to ? Utils.weekToLongDate(stay?.to || "") : "", onClick: () => openDatePicker({ defaultSelecting: true }), readOnly: true, disabled: forced || fixed || !stay?.from }), _jsxs("div", { className: styles.pax, children: [_jsx(Input, { icon: "User", type: "number", label: t(lang, "filters.pax"), className: styles.field, value: paxPlan || "", disabled: true }), _jsxs("span", { className: styles.paxMessage, children: [_jsx(T, { id: "filters.pax-message" }), " ", paxPlan] })] })] })] }) }));
+}

package/es/future/components/msem-package/components/filters.module.css

@@ -0,0 +1,64 @@
+.filters {
+  padding: 10px;
+  background-color: var(--ds-grey-100, #f8f8f8);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+@media (min-width: 1320px) {
+  .filters {
+    padding: 40px 10px;
+    border-radius: 0;
+  }
+}
+
+.form {
+  width: min(100%, 900px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0 auto;
+  padding: 16px;
+  background-color: var(--ds-grey-000, #fff);
+  border: 1px solid var(--ds-grey-200, #ededed);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+.title {
+  font-size: 17px;
+  font-weight: 700;
+}
+.subtitle {
+  font-size: 15px;
+  margin-bottom: 8px;
+}
+.bold {
+  font-weight: 700;
+}
+.inner {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+@media (min-width: 640px) {
+  .inner {
+    flex-direction: row;
+  }
+}
+
+.field {
+  --ds-input-padding: 13px;
+
+  flex: 1 1 auto;
+}
+
+.pax {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.paxMessage {
+  font-size: 12px;
+  color: var(--ds-grey-600, #484848);
+}

package/es/future/components/msem-package/components/global-settings.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type * as Types from "../types";
+type Props = {
+    config: Types.Config;
+    setConfig: React.Dispatch<React.SetStateAction<Types.Config>>;
+};
+export default function GlobalSettings({ config, setConfig }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=global-settings.d.ts.map

package/es/future/components/msem-package/components/global-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-settings.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/global-settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,KAAK,KAAK,MAAM,UAAU,CAAC;AAGvC,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CAC/D,CAAC;AAYF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAyDlE"}

package/es/future/components/msem-package/components/global-settings.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from "dt-design-system/es/select";
+import Input from "dt-design-system/es/input";
+import * as Icons from "dt-design-system/es/icons";
+import styles from "./global-settings.module.css";
+const FACET_OPTIONS = [
+    { value: "0", label: "Hiver" },
+    { value: "1", label: "Été" },
+];
+const PAX = {
+    MIN: 0,
+    MAX: 20,
+};
+export default function GlobalSettings({ config, setConfig }) {
+    const updateName = (value) => {
+        setConfig((prev) => ({ ...prev, name: value }));
+    };
+    const updateFacet = (value) => {
+        const facet = Number(value);
+        setConfig((prev) => ({ ...prev, facet }));
+    };
+    const updatePaxPlan = (value) => {
+        const paxPlan = isNaN(Number(value))
+            ? 0
+            : Math.min(Math.max(Number(value), PAX.MIN), PAX.MAX);
+        setConfig((prev) => ({ ...prev, paxPlan }));
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.title, children: [_jsx(Icons.Tune, {}), "Param\u00E8tres g\u00E9n\u00E9raux"] }), _jsxs("div", { className: styles.settings, children: [_jsx(Input, { label: "Nom du package", value: config.name, onValueChange: updateName, className: styles.field }), _jsx(Input, { label: "Identifiant", value: config.id, onValueChange: updateName, className: styles.field, disabled: true }), _jsx(Select, { label: "Facette", placeholder: "Choisissez une facette", options: FACET_OPTIONS, value: config.facet, onValueChange: updateFacet, className: styles.field }), _jsx(Input, { type: "number", label: "Nombre de personne(s)", value: config.paxPlan || "0", onValueChange: updatePaxPlan, className: styles.field, min: "0", max: "20" })] })] }));
+}

package/es/future/components/msem-package/components/global-settings.module.css

@@ -0,0 +1,42 @@
+.container {
+  width: min(calc(100% - 20px), 840px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-inline: auto;
+  padding: 12px;
+  border: 1px solid var(--ds-grey-200, #ededed);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.title > svg {
+  flex: 0 0 22px;
+  height: 22px;
+  fill: currentcolor;
+}
+
+.settings {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 12px 6px;
+}
+
+.field {
+  flex: 1 1 auto;
+}
+
+@media (width > 700px) {
+  .field {
+    flex: 1 1 49%;
+  }
+}

package/es/future/components/msem-package/components/stay-settings.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type * as Types from "../types";
+type Props = {
+    config: Types.Config;
+    setConfig: React.Dispatch<React.SetStateAction<Types.Config>>;
+};
+export default function StaySettings({ config, setConfig }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=stay-settings.d.ts.map

package/es/future/components/msem-package/components/stay-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stay-settings.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/stay-settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,KAAK,KAAK,MAAM,UAAU,CAAC;AAGvC,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;CAC/D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CA+EhE"}

package/es/future/components/msem-package/components/stay-settings.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Input from "dt-design-system/es/input";
+import Checkbox from "dt-design-system/es/checkbox";
+import * as Icons from "dt-design-system/es/icons";
+import styles from "./stay-settings.module.css";
+export default function StaySettings({ config, setConfig }) {
+    const updateStay = (key) => (value) => {
+        setConfig((prev) => ({
+            ...prev,
+            stay: { ...prev.stay, [key]: value },
+        }));
+    };
+    const updateNbDays = (value) => {
+        setConfig((prev) => ({
+            ...prev,
+            stay: { ...prev.stay, nbDays: parseInt(value) },
+        }));
+    };
+    const updateForced = (forced) => {
+        setConfig((prev) => ({
+            ...prev,
+            stay: { ...prev.stay, forced, fixed: false },
+        }));
+    };
+    const updateFixed = (fixed) => {
+        setConfig((prev) => ({
+            ...prev,
+            stay: { ...prev.stay, fixed, forced: false },
+        }));
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.title, children: [_jsx(Icons.Calendar, {}), "Param\u00E8tres de validit\u00E9 de l'offre"] }), _jsxs("div", { className: styles.settings, children: [_jsx(Input, { label: "D\u00E9but de validit\u00E9 de l'offre", type: "date", value: config.stay?.from || "", onValueChange: updateStay("from"), className: styles.field }), _jsx(Input, { label: "Fin de validit\u00E9 de l'offre", type: "date", value: config.stay?.to || "", onValueChange: updateStay("to"), className: styles.field }), _jsxs("div", { className: styles.checkboxes, children: [_jsx(Checkbox, { label: "Verrouiller ces dates de validit\u00E9", checked: config.stay?.forced || false, onCheckedChange: updateForced }), _jsx(Checkbox, { label: _jsxs("div", { className: styles.nbDaysLabel, children: [_jsx("span", { children: "Fixer l'offre \u00E0" }), _jsx(Input, { value: config.stay?.nbDays || "", onValueChange: updateNbDays, className: styles.nbDaysInput, disabled: !config.stay?.fixed, compact: true, type: "number", min: 1 }), _jsx("span", { children: "jour(s)" })] }), checked: config.stay?.fixed || false, onCheckedChange: updateFixed })] })] })] }));
+}

package/es/future/components/msem-package/components/stay-settings.module.css

@@ -0,0 +1,59 @@
+.container {
+  width: min(calc(100% - 20px), 840px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-inline: auto;
+  padding: 12px;
+  border: 1px solid var(--ds-grey-200, #ededed);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.title > svg {
+  flex: 0 0 22px;
+  height: 22px;
+  fill: currentcolor;
+}
+
+.settings {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 12px 6px;
+}
+
+.field {
+  flex: 1 1 auto;
+}
+
+@media (width > 700px) {
+  .field {
+    flex: 1 1 0%;
+  }
+}
+
+.checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.checkbox {
+  flex: 1 1 100%;
+}
+.nbDaysLabel {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.nbDaysInput {
+  width: 45px;
+}

package/es/future/components/msem-package/components/widget-dialog.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type * as Types from "../types";
+type Props = {
+    config: Types.Config;
+    setConfig: React.Dispatch<React.SetStateAction<Types.Config>>;
+    editorOptions: Types.EditorOptions;
+    widget: Types.Widget;
+    closeWidgetDialog: () => void;
+};
+export default function WidgetDialog({ config, setConfig, editorOptions, widget, closeWidgetDialog, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=widget-dialog.d.ts.map

package/es/future/components/msem-package/components/widget-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-dialog.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/widget-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,KAAK,KAAK,MAAM,UAAU,CAAC;AAIvC,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9D,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,MAAM,EACN,SAAS,EACT,aAAa,EACb,MAAM,EACN,iBAAiB,GAClB,EAAE,KAAK,2CAuJP"}

package/es/future/components/msem-package/components/widget-dialog.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import Input from "dt-design-system/es/input";
+import Dialog from "dt-design-system/es/dialog";
+import Checkbox from "dt-design-system/es/checkbox";
+import MseMPresetEditor from "../../msem-preset-editor";
+import * as Icons from "dt-design-system/es/icons";
+import styles from "./widget-dialog.module.css";
+export default function WidgetDialog({ config, setConfig, editorOptions, widget, closeWidgetDialog, }) {
+    const { lang } = useUbloContext();
+    const { facet } = config;
+    const editorLang = lang === "fr" ? "fr" : "en";
+    const { channel, resort, msemServicesUrl } = editorOptions;
+    const [repeatable, setRepeatable] = React.useState(widget.repeatable);
+    const isNew = widget.id === "new";
+    const isOptional = widget.optional;
+    const title = isNew ? "Nouvelle offre" : "Modifier l'offre";
+    const defaultPreset = getDefaultPreset(widget);
+    const [preset, setPreset] = React.useState(defaultPreset);
+    const [image, setImage] = React.useState(widget.image);
+    const updateImage = (path) => {
+        setImage(path);
+    };
+    const submit = React.useCallback((e) => {
+        e.preventDefault();
+        const form = e.currentTarget;
+        const formData = new FormData(form);
+        const title = formData.get("title");
+        const tagline = formData.get("tagline");
+        const maxParticipants = parseInt(formData.get("maxParticipants"));
+        const { name, widget: widgetName, options, presets } = preset;
+        const id = isNew ? crypto.randomUUID() : widget.id;
+        const data = {
+            name,
+            widget: widgetName,
+            title,
+            tagline,
+            image,
+            options,
+            presets,
+            repeatable,
+            maxParticipants: isNaN(maxParticipants) ? undefined : maxParticipants,
+        };
+        const existingWidgets = (isOptional ? config.optionalWidgets : config.widgets) || [];
+        const newConfig = {
+            ...config,
+            [isOptional ? "optionalWidgets" : "widgets"]: isNew
+                ? [...existingWidgets, { ...widget, id, ...data }]
+                : existingWidgets.map((w) => {
+                    return w.id === widget.id ? { ...w, ...data } : w;
+                }),
+        };
+        setConfig(newConfig);
+    }, [config, image, isNew, isOptional, preset, setConfig, widget, repeatable]);
+    return (_jsx(Dialog, { className: styles.dialog, close: closeWidgetDialog, showAsModal: false, closeOnBackdropClick: false, isOpened: true, children: _jsxs("div", { className: styles.inner, children: [_jsxs("div", { className: styles.title, children: [_jsx(Icons.ShoppingBag, {}), title] }), _jsxs("form", { className: styles.form, onSubmit: submit, children: [_jsxs("div", { className: styles.top, children: [_jsx("div", { className: styles.left, children: _jsx(Button, { className: styles.image, variant: "transparent", onClick: () => window?.Cms?.fileManager(updateImage, 150, 100), children: image ? _jsx("img", { src: image, alt: "" }) : _jsx(Icons.Image, {}) }) }), _jsxs("div", { className: styles.right, children: [_jsx(Input, { label: "Titre", name: "title", defaultValue: widget.title }), _jsx(Input, { label: "Phrase d'accroche", name: "tagline", defaultValue: widget.tagline })] })] }), _jsxs("div", { className: styles.editor, children: [_jsx("div", { className: styles.editorTitle, children: "Preset" }), _jsx(MseMPresetEditor, { lang: editorLang, channel: channel, resort: String(resort), msemServicesUrl: msemServicesUrl, facet: facet, currentPreset: preset, onChange: setPreset, hideStay: true })] }), _jsxs("div", { className: styles.checkboxes, children: [!isOptional && (_jsx(Checkbox, { label: "R\u00E9p\u00E9ter le widget pour chaque participant", name: "repeatable", checked: repeatable, onChange: (e) => setRepeatable(e.target.checked) })), isOptional && (_jsx(Checkbox, { label: _jsxs("div", { className: styles.nbParticipantsLabel, children: [_jsx("span", { children: "R\u00E9p\u00E9ter le widget jusqu'\u00E0" }), _jsx(Input, { name: "maxParticipants", defaultValue: widget.maxParticipants || config.paxPlan, className: styles.nbParticipantsInput, disabled: !repeatable, compact: true, type: "number", min: config.paxPlan }), _jsx("span", { children: "fois" })] }), name: "repeatManually", checked: repeatable, onChange: (e) => setRepeatable(e.target.checked) }))] }), _jsx("div", { className: styles.controls, children: _jsxs(Button, { type: "submit", variant: "success", className: styles.save, children: [_jsx(Icons.Check, {}), "Confirmer"] }) })] })] }) }));
+}
+function getDefaultPreset(widget) {
+    const { name, widget: widgetName, options, presets } = widget;
+    const defaultData = { name, widget: widgetName };
+    const hasOptions = options && Object.keys(options).length > 0;
+    const hasPresets = presets && Object.keys(presets).length > 0;
+    if (hasOptions && hasPresets)
+        return { ...defaultData, options, presets };
+    if (hasOptions)
+        return { ...defaultData, options };
+    if (hasPresets)
+        return { ...defaultData, presets };
+    return null;
+}

package/es/future/components/msem-package/components/widget-dialog.module.css

@@ -0,0 +1,89 @@
+.inner {
+  max-width: 576px;
+  padding: 16px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  padding-right: 30px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.title > svg {
+  flex: 0 0 22px;
+  height: 22px;
+  fill: currentcolor;
+}
+
+.form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.top {
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.left {
+  flex: 0 0 150px;
+}
+
+.right {
+  flex: 1 1 100%;
+}
+
+.image {
+  width: 150px;
+  height: 100px;
+  margin: 0 auto;
+  padding: 0;
+  border: 1px solid var(--ds-grey-300, #d7d7d7);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+.image > img {
+  border-radius: inherit;
+}
+
+.editor {
+  flex: 1 1 100%;
+  padding: 10px;
+  background-color: var(--ds-grey-100, #f8f8f8);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+.editorTitle {
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.controls {
+  flex: 0 0 100%;
+}
+
+.save {
+  margin-left: auto;
+}
+
+.checkboxes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.nbParticipantsLabel {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.nbParticipantsInput {
+  width: 45px;
+}

package/es/future/components/msem-package/components/widget.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type * as Types from "../types";
+type Props = {
+    index: number;
+    config: Types.Config;
+    widget: Types.Widget;
+    step: string;
+    setStep: React.Dispatch<React.SetStateAction<string>>;
+    stay: Types.Stay;
+    completedSteps?: number[];
+    setCompletedSteps?: React.Dispatch<React.SetStateAction<number[]>>;
+    packageId: string;
+};
+export default function Widget({ index, config, widget, step, setStep, stay, completedSteps, setCompletedSteps, packageId, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=widget.d.ts.map

package/es/future/components/msem-package/components/widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/widget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,KAAK,KAAK,MAAM,UAAU,CAAC;AAIvC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACtD,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,iBAAiB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAsBF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,SAAS,GACV,EAAE,KAAK,2CAmLP"}