ublo-lib 1.49.11 → 1.50.0

package/es/esf/components/instant-search/services/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../src/esf/components/instant-search/services/api.ts"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,MAA+F,EACxG,cAAc,CAAC,EAAE,MAAM,gBAaxB"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../src/esf/components/instant-search/services/api.ts"],"names":[],"mappings":"AAOA,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,MAA+F,EACxG,cAAc,CAAC,EAAE,MAAM,gBAaxB"}

package/es/esf/components/instant-search/services/api.js

@@ -1,5 +1,7 @@
 import * as Fetcher from "../../../../common/utils/fetcher";
-const api = "https://search.ublo.app/api";
+import getConfig from "next/config";
+const { publicRuntimeConfig } = getConfig();
+const { searchApi: api = "https://search.ublo.app/api" } = publicRuntimeConfig;
 export function fetchResults(site, lang, query, queryBy = "title,subtitle,text,pageTitle,seoKeywords,parentTitle,seoTitle,meetingPoint,imageAlt", queryByWeights) {
     const endpoint = `${api}/ublo-search/search/esf/v2`;
     return Fetcher.post(endpoint, {

package/es/esf/components/instructors-book/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/instructors-book/api.js"],"names":[],"mappings":"AAgCA,qEAYC;AAED,mEASC;AAEM,8FAYN"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/instructors-book/api.js"],"names":[],"mappings":"AAgCA,qEAYC;AAED,mEAUC;AAEM,8FAYN"}

package/es/esf/components/instructors-book/api.js

@@ -40,7 +40,8 @@ export async function fetchInstructors(lang, body = {}) {
 export async function fetchInstructor(lang, uri) {
     try {
         const url = `${carnetRougeApi}/annuaire/public/moniteur/${resort}/${lang}/${uri}`;
-        return fetcher(url);
+        const { email, telephone, ...moniteur } = (await fetcher(url)) || {};
+        return moniteur;
     }
     catch (e) {
         console.warn(e);

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

@@ -1 +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;AAE/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,2CAsDpE"}
+{"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;AAE/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,2CA+EpE"}

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

@@ -4,9 +4,31 @@ import { useMsemRuntime } from "../context";
 import styles from "./config.module.css";
 export default function Config({ idPrefix, config, setConfig }) {
     const ref = React.useRef(null);
-    const { menuPath, lang, path, Zone } = useMsemRuntime();
+    const { menuPath, lang, path, Zone, cmsMode } = useMsemRuntime();
     const initializedRef = React.useRef(false);
     const prevRouteRef = React.useRef(`/${lang}${path}`);
+    const prevModeRef = React.useRef(cmsMode);
+    const originalConfigRef = React.useRef(null);
+    const parseZone = React.useCallback(() => {
+        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)
+            return null;
+        const parsed = JSON.parse(storedConfig);
+        return {
+            ...parsed,
+            id: parsed.id || `${idPrefix}-${menuPath?.id}`,
+            pax: parsed.pax ?? migratePaxPlan(parsed.paxPlan),
+        };
+    }, [idPrefix, menuPath?.id]);
     React.useEffect(() => {
         const route = `/${lang}${path}`;
         if (route !== prevRouteRef.current) {
@@ -14,26 +36,24 @@ export default function Config({ idPrefix, config, setConfig }) {
             initializedRef.current = false;
         }
         if (!initializedRef.current) {
-            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 parsed = JSON.parse(storedConfig);
-                setConfig({
-                    ...parsed,
-                    id: parsed.id || `${idPrefix}-${menuPath?.id}`,
-                });
+            const parsed = parseZone();
+            if (parsed) {
+                originalConfigRef.current = parsed;
+                setConfig(parsed);
             }
             initializedRef.current = true;
         }
-    }, [lang, path, setConfig, idPrefix, menuPath?.id]);
+    }, [lang, path, parseZone, setConfig]);
+    React.useEffect(() => {
+        const prev = prevModeRef.current;
+        prevModeRef.current = cmsMode;
+        if (prev === "editing" && cmsMode && cmsMode !== "editing") {
+            const original = originalConfigRef.current;
+            const changed = !original || JSON.stringify(config) !== JSON.stringify(original);
+            if (changed)
+                window.location.reload();
+        }
+    }, [cmsMode, config]);
     React.useEffect(() => {
         const container = ref.current;
         if (initializedRef.current && container) {
@@ -45,3 +65,9 @@ export default function Config({ idPrefix, config, setConfig }) {
     }, [config]);
     return (_jsx(Zone, { ref: ref, id: "package-config", className: styles.zone, readOnly: true }));
 }
+function migratePaxPlan(paxPlan) {
+    const value = Number(paxPlan);
+    if (!isNaN(value) && value > 0)
+        return { mode: "fixed", value };
+    return { mode: "unlimited" };
+}

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

@@ -4,7 +4,11 @@ type Props = {
     config: Types.Config;
     stay: Types.Stay;
     setStay: React.Dispatch<React.SetStateAction<Types.Stay>>;
+    pax: number;
+    setPax: React.Dispatch<React.SetStateAction<number>>;
+    validated: boolean;
+    setValidated: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export default function Filters({ config, stay, setStay }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Filters({ config, stay, setStay, pax, setPax, validated, setValidated, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=filters.d.ts.map

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

@@ -1 +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"}
+{"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;AAW/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;IAC1D,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7D,CAAC;AAMF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,MAAM,EACN,IAAI,EACJ,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,KAAK,2CA0TP"}

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

@@ -1,41 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useMsemRuntime } from "../context";
 import Input from "dt-design-system/es/input";
+import NumberPicker from "dt-design-system/es/number-picker";
 import Dropdown from "dt-design-system/es/dropdown";
+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 * as Utils from "../../../../common/components/date-picker/utils";
+import * as DatePickerMessages from "../../../../common/components/date-picker/messages";
 import T, { t } from "../i18n/translations";
 import styles from "./filters.module.css";
-export default function Filters({ config, stay, setStay }) {
+export default function Filters({ config, stay, setStay, pax, setPax, validated, setValidated, }) {
     const ref = React.useRef(null);
     const { lang, DatePicker } = useMsemRuntime();
     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 [pendingModify, setPendingModify] = React.useState(false);
+    const { from: min, to: max, forced, fixed, nbDays, hidden: stayHidden, } = config.stay || {};
+    const dated = config.stay?.dated ?? Boolean(min || max);
+    const paxMode = config.pax?.mode ?? "unlimited";
+    const paxHidden = Boolean(config.pax?.hidden);
+    const paxMin = config.pax?.min ?? 1;
+    const paxMax = config.pax?.max;
+    const paxValue = config.pax?.value;
+    const showDateInput = dated && !forced;
+    const showPaxInput = paxMode === "range" && !paxHidden;
+    const needsChoice = showDateInput || showPaxInput;
+    const editing = needsChoice && !validated;
     const usedMax = fixed
         ? Utils.getDateISO(Utils.addDays(max, -nbDays + 1))
         : max;
+    const fmt = (iso) => (iso ? Utils.weekToLongDate(iso) : "");
+    const diffDays = (a, b) => a && b
+        ? Math.max(1, Math.round((new Date(b).getTime() - new Date(a).getTime()) / 86400000))
+        : 0;
+    const staySummary = (() => {
+        if (!dated || stayHidden)
+            return null;
+        const from = stay?.from ?? min;
+        const to = stay?.to ?? max;
+        if (!from || !to)
+            return null;
+        const days = diffDays(from, to);
+        return `${days} ${t(lang, "filters.day")}${days > 1 ? "s" : ""} - ${t(lang, "filters.from")} ${fmt(from)} ${t(lang, "filters.to")} ${fmt(to)}`;
+    })();
+    const paxSummary = (() => {
+        const n = paxMode === "fixed" ? paxValue : paxMode === "range" ? pax : undefined;
+        if (paxHidden || n == null)
+            return null;
+        const people = t(lang, n > 1 ? "filters.people" : "filters.person");
+        return `${t(lang, "filters.for")} ${n} ${people}`;
+    })();
+    const canValidate = (!showDateInput || Boolean(stay?.from && stay?.to)) &&
+        (!showPaxInput || pax != null);
     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);
+        if (showPaxInput && pax == null) {
+            setPax(paxMin);
+        }
+    }, [showPaxInput, pax, paxMin, setPax]);
+    React.useEffect(() => {
+        if (stay?.from && stay?.to) {
+            const fromDate = new Date(stay.from);
             fromDate.setHours(0, 0, 0, 0);
-            const toDate = new Date(to);
+            const toDate = new Date(stay.to);
             toDate.setHours(0, 0, 0, 0);
-            const interval = Utils.getDateInterval(fromDate, toDate);
-            setStayDates(interval);
+            setStayDates(Utils.getDateInterval(fromDate, toDate));
         }
     }, [stay]);
     const scrollToFilters = () => {
         window.requestAnimationFrame(() => {
-            ref.current.scrollIntoView({ behavior: "smooth" });
+            ref.current?.scrollIntoView({ behavior: "smooth" });
         });
     };
     const openDatePicker = (options = {}) => {
@@ -54,10 +95,32 @@ export default function Filters({ config, stay, setStay }) {
         const to = fixed
             ? Utils.getDateISO(Utils.addDays(data[0], nbDays - 1))
             : Utils.getDateISO(data[data.length - 1]);
-        const newStay = { from, to };
-        setStay(newStay);
+        setStay({ from, to });
         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] })] })] })] }) }));
+    const updatePax = (value) => setPax(value);
+    const onValidate = () => setValidated(true);
+    const onModify = () => {
+        const hasCart = window.sessionStorage.cartId !== undefined;
+        if (hasCart)
+            setPendingModify(true);
+        else
+            setValidated(false);
+    };
+    const confirmModify = () => {
+        setPendingModify(false);
+        setValidated(false);
+    };
+    const cancelModify = () => setPendingModify(false);
+    const renderSummaryItems = (stayText, paxText) => (_jsxs(_Fragment, { children: [stayText && (_jsxs("span", { className: styles.summaryItem, children: [_jsx(Icons.Calendar, { className: styles.summaryIcon }), stayText] })), paxText && (_jsxs("span", { className: styles.summaryItem, children: [_jsx(Icons.User, { className: styles.summaryIcon }), paxText] }))] }));
+    const editStaySummary = !showDateInput ? staySummary : null;
+    const editPaxSummary = !showPaxInput ? paxSummary : null;
+    if (!editing) {
+        if (!staySummary && !paxSummary)
+            return null;
+        return (_jsxs("div", { ref: ref, className: styles.filters, children: [_jsxs("div", { className: styles.summaryBar, children: [_jsx("div", { className: styles.summaryItems, children: renderSummaryItems(staySummary, paxSummary) }), needsChoice && (_jsxs("button", { type: "button", className: styles.modify, onClick: onModify, children: [_jsx(Icons.Edit, { className: styles.modifyIcon }), t(lang, "filters.modify")] }))] }), pendingModify && (_jsxs(Dialog, { isOpened: true, className: styles.confirmDialog, close: cancelModify, showCloseButton: false, children: [_jsx("div", { className: styles.confirmTitle, children: DatePickerMessages.get(lang, "warning-date-change-title") }), _jsx("div", { className: styles.confirmMessage, children: DatePickerMessages.get(lang, "warning-date-change-text") }), _jsxs("div", { className: styles.confirmButtons, children: [_jsx(Button, { variant: "transparent", onClick: cancelModify, children: DatePickerMessages.get(lang, "warning-date-change-cancel") }), _jsx(Button, { onClick: confirmModify, children: DatePickerMessages.get(lang, "warning-date-change-confirm") })] })] }))] }));
+    }
+    return (_jsx("div", { ref: ref, className: styles.filters, children: _jsxs("div", { className: styles.form, children: [_jsx("div", { className: styles.title, children: _jsx(T, { id: "filters.title" }) }), fixed && showDateInput && (_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" : ""] })] })), (editStaySummary || editPaxSummary) && (_jsx("div", { className: styles.summary, children: renderSummaryItems(editStaySummary, editPaxSummary) })), _jsxs("div", { className: styles.bottom, children: [_jsxs("div", { className: styles.inner, children: [showDateInput && (_jsxs(_Fragment, { children: [_jsx(Dropdown, { open: datePickerOpen, onClose: closeDatePicker, onOpenChange: (open) => setDatePickerOpen(open), breakpoint: 600, content: _jsx(DatePicker, { lang: lang, stayDates: stayDates, popup: false, close: closeDatePicker, onSubmit: updateStay, min: min, max: usedMax, singleDate: fixed, submitOnSelectionEnd: fixed, disableConfirmModal: true, ...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 }) }, 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: fixed || !stay?.from
+                                                ? undefined
+                                                : () => openDatePicker({ defaultSelecting: true }), readOnly: true, disabled: fixed || !stay?.from })] })), showPaxInput && (_jsxs("div", { className: styles.pax, children: [_jsx("span", { className: styles.paxLabel, children: t(lang, "filters.pax") }), _jsx(NumberPicker, { min: paxMin, max: paxMax, value: pax ?? paxMin, onChange: updatePax, withInput: true })] }))] }), _jsxs(Button, { className: styles.validate, onClick: onValidate, disabled: !canValidate, children: [_jsx(Icons.Check, {}), t(lang, "filters.validate")] })] })] }) }));
 }

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

@@ -1,23 +1,15 @@
 .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;
-  }
+  width: 100%;
 }
 
+/* Carte "Choisissez vos dates" (mode édition) */
 .form {
-  width: min(100%, 900px);
+  width: min(calc(100% - 20px), 1100px);
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
   margin: 0 auto;
-  padding: 16px;
+  padding: 20px;
   background-color: var(--ds-grey-000, #fff);
   border: 1px solid var(--ds-grey-200, #ededed);
   border-radius: var(--ds-radius-200, 8px);
@@ -27,38 +19,150 @@
   font-size: 17px;
   font-weight: 700;
 }
+
 .subtitle {
   font-size: 15px;
-  margin-bottom: 8px;
 }
+
 .bold {
   font-weight: 700;
 }
+
+/* Barre de résumé (paramètres validés / sans choix) */
+.summaryBar {
+  width: min(calc(100% - 20px), 1100px);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 20px;
+  margin: 0 auto;
+  padding: 16px 20px;
+  background-color: var(--ds-grey-100, #f8f8f8);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+.summaryItems {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: 6px 24px;
+}
+
+/* Ligne de résumé des choix figés (dans la carte d'édition) */
+.summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 24px;
+}
+
+.summaryItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ds-grey-800, #000);
+}
+
+.summaryIcon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+  fill: currentcolor;
+}
+
+/* Bouton "Modifier" dans la barre de résumé */
+.modify {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ds-secondary, var(--ds-primary, #002dcc));
+  background: none;
+  border: 0;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.modifyIcon {
+  width: 16px;
+  height: 16px;
+  fill: currentcolor;
+}
+
+/* Champs + bouton "Valider" sur la même ligne */
+.bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 16px;
+  margin-top: 4px;
+}
+
 .inner {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
 @media (min-width: 640px) {
   .inner {
     flex-direction: row;
+    align-items: flex-end;
   }
 }
 
+/* Champs dates : partagent l'espace */
 .field {
   --ds-input-padding: 13px;
 
-  flex: 1 1 auto;
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
 }
 
+/* PAX : stepper compact (pas étiré) */
 .pax {
   display: flex;
+  flex: 0 0 auto;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+}
+
+.paxLabel {
+  font-size: 13px;
+  color: var(--ds-grey-500, #7c7b7b);
+}
+
+/* Bouton "Valider" (à droite des champs) */
+.validate {
+  flex: 0 0 auto;
+  margin-left: auto;
 }
 
-.paxMessage {
-  font-size: 12px;
-  color: var(--ds-grey-600, #484848);
+/* Confirmation suppression du pack (bouton "Modifier") */
+.confirmDialog {
+  max-width: 440px;
+  padding: 24px;
+}
+
+.confirmTitle {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.confirmMessage {
+  margin: 8px 0 20px;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.confirmButtons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
 }

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

@@ -1 +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"}
+{"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;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;CAC/D,CAAC;AAOF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAoClE"}

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

@@ -2,15 +2,12 @@ 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 { Card } from "./settings-ui";
 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 }));
@@ -19,11 +16,5 @@ export default function GlobalSettings({ config, setConfig }) {
         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" })] })] }));
+    return (_jsx(Card, { icon: _jsx(Icons.Settings, {}), title: "G\u00E9n\u00E9ral", children: _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, className: styles.field, disabled: true }), _jsx(Select, { label: "Facette", placeholder: "Choisissez une facette", options: FACET_OPTIONS, value: config.facet, onValueChange: updateFacet, className: styles.field })] }) }));
 }

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

@@ -1,42 +1,10 @@
-.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;
+  gap: 12px;
 }
 
 .field {
-  flex: 1 1 auto;
-}
-
-@media (width > 700px) {
-  .field {
-    flex: 1 1 49%;
-  }
+  flex: 1 1 220px;
 }

package/es/future/components/msem-package/components/pax-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 PaxSettings({ config, setConfig }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=pax-settings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pax-settings.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/pax-settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/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;CAC/D,CAAC;AAOF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAsG/D"}

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

@@ -0,0 +1,73 @@
+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 { Card, Radio } from "./settings-ui";
+import styles from "./pax-settings.module.css";
+const toNum = (value) => {
+    const n = parseInt(value, 10);
+    return isNaN(n) ? undefined : n;
+};
+export default function PaxSettings({ config, setConfig }) {
+    const pax = config.pax;
+    const mode = pax?.mode ?? "unlimited";
+    const patchPax = (patch) => {
+        setConfig((prev) => ({
+            ...prev,
+            pax: { mode: prev.pax?.mode ?? "unlimited", ...prev.pax, ...patch },
+        }));
+    };
+    const toggleMode = (target) => () => {
+        const next = mode === target ? "unlimited" : target;
+        if (next === "unlimited") {
+            patchPax({
+                mode: "unlimited",
+                min: undefined,
+                max: undefined,
+                value: undefined,
+                hidden: undefined,
+            });
+        }
+        else if (next === "range") {
+            patchPax({ mode: "range", value: undefined });
+        }
+        else {
+            patchPax({ mode: "fixed", min: undefined, max: undefined });
+        }
+    };
+    const updateMin = (value) => patchPax({ min: toNum(value) });
+    const updateMax = (value) => patchPax({ max: toNum(value) });
+    const updateValue = (value) => patchPax({ value: toNum(value) });
+    const updateHidden = (hidden) => patchPax({ hidden });
+    return (_jsxs(Card, { icon: _jsx(Icons.Users, {}), title: "Nombre de personnes", badge: getBadge(pax), children: [_jsxs("div", { className: styles.modes, children: [_jsx(Radio, { checked: mode === "range", onClick: toggleMode("range"), children: "D\u00E9finir un nombre de personnes" }), _jsx(Radio, { checked: mode === "fixed", onClick: toggleMode("fixed"), children: "Fixer nombre personnes" })] }), mode === "range" && (_jsxs("div", { className: styles.fields, children: [_jsx(Input, { type: "number", label: "Minimum de personnes", value: pax?.min ?? "", onValueChange: updateMin, className: styles.field, min: 1 }), _jsx(Input, { type: "number", label: "Maximum de personnes", value: pax?.max ?? "", onValueChange: updateMax, className: styles.field, min: 1 })] })), mode === "fixed" && (_jsx("div", { className: styles.fields, children: _jsx(Input, { type: "number", label: "Nombre fixe de personnes", value: pax?.value ?? "", onValueChange: updateValue, className: styles.field, min: 1 }) })), mode !== "unlimited" && (_jsx("div", { className: styles.masquer, children: _jsx(Checkbox, { label: "Masquer le nombre de personnes", checked: pax?.hidden || false, onCheckedChange: updateHidden }) })), getExplanation(pax) && (_jsxs("p", { className: styles.note, children: [_jsx(Icons.Info, { className: styles.noteIcon }), getExplanation(pax)] }))] }));
+}
+function getExplanation(pax) {
+    const mode = pax?.mode ?? "unlimited";
+    if (mode === "unlimited")
+        return null;
+    if (mode === "fixed") {
+        return "Le nombre de personnes est fixe : il sera appliqué à chaque offre.";
+    }
+    if (pax?.hidden) {
+        return "Le nombre de personnes ne sera pas demandé au client au niveau du pack. Il sera demandé pour chaque offre, en respectant les limites définies";
+    }
+    return "Le client choisira le nombre de personnes au niveau du pack. Ce nombre sera ensuite repris à chaque offre.";
+}
+function getBadge(pax) {
+    if (!pax || pax.mode === "unlimited") {
+        return "Nombre de personnes : illimitées";
+    }
+    if (pax.mode === "fixed") {
+        if (pax.value == null)
+            return "Nombre de personnes";
+        return `De ${pax.value} personne${pax.value > 1 ? "s" : ""}`;
+    }
+    const { min, max } = pax;
+    if (min != null && max != null)
+        return `De ${min} à ${max} personnes`;
+    if (min != null)
+        return `À partir de ${min} personnes`;
+    if (max != null)
+        return `Jusqu'à ${max} personnes`;
+    return "Nombre de personnes";
+}