ublo-lib 1.49.12 → 1.50.1

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

@@ -25,24 +25,37 @@ const defaultHide = [
     "description",
     "upsales",
 ];
-export default function Widget({ index, config, widget, step, setStep, stay, completedSteps, setCompletedSteps, packageId, }) {
+export default function Widget({ index, config, widget, step, setStep, stay, pax, locked, completedSteps, setCompletedSteps, packageId, }) {
     const ref = React.useRef(null);
     const widgetContainerRef = React.useRef(null);
     const { lang, widgets } = useMsemRuntime();
     const [addedToCart, setAddedToCart] = React.useState(false);
-    const { id, widget: kind, image, title, tagline, options, presets, repeatable, optional, maxParticipants, } = widget;
+    const { id, widget: kind, logo, title, tagline, options, presets, repeatable, optional, maxParticipants, } = widget;
+    const dated = config.stay?.dated ?? Boolean(config.stay?.from || config.stay?.to);
+    const paxRangeVisible = config.pax?.mode === "range" && !config.pax?.hidden;
     const [innerStep, setInnerStep] = React.useState(1);
     const [optionalRepeat, setOptionalRepeat] = React.useState(0);
-    const repeat = repeatable ? (optional ? optionalRepeat : config.paxPlan) : 1;
-    const areAllInnerStepsFinished = !repeatable || (!optional && innerStep === repeat);
+    const [count, setCount] = React.useState(0);
+    const { min: repeatMin, max: repeatMax } = resolveMandatoryRange(config.pax, pax, maxParticipants);
     const { name: packageName } = config;
-    const nextWidget = config.widgets[index + 1];
+    const nextWidget = optional ? undefined : config.widgets[index + 1];
     const widgetLang = lang === "fr" ? "fr" : "en";
     const isStarted = id === step;
-    const isDisabled = !optional &&
-        (!stay?.from || !stay?.to || !completedSteps.includes(index - 1));
+    const done = repeatable && !optional ? count >= repeatMin : addedToCart;
+    const canAddPerson = repeatable && !optional && done && count < repeatMax && !isStarted;
+    const showAddChip = !isStarted &&
+        repeatable &&
+        ((!optional && done && count < repeatMax) ||
+            (optional && optionalRepeat > 0 && optionalRepeat < (maxParticipants ?? 0)));
+    const needsStay = dated && (!stay?.from || !stay?.to);
+    const needsPax = paxRangeVisible && pax == null;
+    const otherStepOpen = step != null && step !== id;
+    const isDisabled = locked ||
+        needsStay ||
+        needsPax ||
+        (optional ? otherStepOpen : !completedSteps.includes(index - 1));
     const startWidget = (force) => {
-        if (!force && (isDisabled || isStarted || addedToCart))
+        if (!force && (isDisabled || isStarted || done))
             return;
         if (innerStep > optionalRepeat) {
             setOptionalRepeat(optionalRepeat + 1);
@@ -55,29 +68,45 @@ export default function Widget({ index, config, widget, step, setStep, stay, com
             }, 600);
         }
     };
+    const addPerson = (e) => {
+        e.stopPropagation();
+        startWidget(true);
+    };
     const preventBubbling = (e) => {
         e.stopPropagation();
     };
+    const cancelWidget = (e) => {
+        e.stopPropagation();
+        setStep(null);
+    };
     const handleCartChange = () => {
         if (widgetContainerRef.current)
             widgetContainerRef.current.scrollIntoView();
-        if (areAllInnerStepsFinished) {
+        if (!repeatable) {
             setAddedToCart(true);
             setCompletedSteps([...completedSteps, index]);
+            setStep(!optional && nextWidget ? nextWidget.id : null);
+            return;
         }
-        if (areAllInnerStepsFinished && nextWidget) {
-            const nextWidgetId = nextWidget.id;
-            setStep(nextWidgetId);
+        if (optional) {
+            setStep(null);
+            setInnerStep(innerStep + 1);
+            return;
+        }
+        const newCount = count + 1;
+        setCount(newCount);
+        if (newCount < repeatMin) {
+            return;
+        }
+        if (newCount === repeatMin) {
+            setCompletedSteps([...completedSteps, index]);
+        }
+        if (repeatMin === repeatMax && nextWidget) {
+            setStep(nextWidget.id);
         }
         else {
             setStep(null);
         }
-        if (repeatable && !areAllInnerStepsFinished) {
-            setInnerStep(innerStep + 1);
-            if (!optional) {
-                startWidget(true);
-            }
-        }
     };
     const widgetId = `id-${id}`;
     const Widget = widgets[WIDGETS[kind]];
@@ -98,32 +127,69 @@ export default function Widget({ index, config, widget, step, setStep, stay, com
         cartChanged: handleCartChange,
         hide,
     };
-    const allPresets = { stay, ...presets };
+    const allPresets = {
+        ...(dated ? { stay } : {}),
+        ...resolvePaxBounds(config.pax, pax),
+        ...presets,
+    };
     const classes = classNames(styles.widget, {
         [styles.optional]: optional && repeatable,
         [styles.repeatable]: repeatable,
         [styles.started]: isStarted,
         [styles.disabled]: isDisabled,
-        [styles.addedToCart]: addedToCart,
-    });
-    const addStepClasses = classNames(styles.innerStep, styles.addStep, {
-        [styles.disabledAdd]: isStarted || innerStep === optionalRepeat,
+        [styles.addedToCart]: done,
     });
-    return (_jsxs("div", { ref: ref, className: classes, onClick: () => startWidget(), children: [_jsxs("div", { className: styles.header, children: [_jsx("div", { className: styles.iconContainer, children: addedToCart ? (_jsx(Icons.Check, { className: styles.icon })) : (_jsx("img", { src: image, className: styles.image, alt: "" })) }), _jsxs("div", { className: styles.text, children: [_jsx("div", { className: styles.title, children: title }), _jsx("div", { className: styles.tagline, children: tagline }), repeatable && (_jsxs("div", { className: styles.innerSteps, children: [[...new Array(repeat)].map((_, i) => {
-                                        const id = i + 1;
-                                        const isCurrent = isStarted && innerStep === id;
-                                        const isCompleted = innerStep > id || addedToCart;
-                                        const classes = classNames(styles.innerStep, {
+    return (_jsxs("div", { ref: ref, className: classes, onClick: () => startWidget(), children: [_jsxs("div", { className: styles.header, children: [_jsx("div", { className: styles.number, children: done ? (_jsx(Icons.Check, { className: styles.numberIcon })) : optional ? (logo ? (_jsx("img", { src: logo, className: styles.numberLogo, alt: "" })) : (_jsx(Icons.Pack, { className: styles.numberIcon }))) : (String(index + 1).padStart(2, "0")) }), _jsxs("div", { className: styles.text, children: [_jsx("div", { className: styles.title, children: title }), _jsx("div", { className: styles.tagline, children: tagline }), repeatable && (_jsxs("div", { className: styles.innerSteps, children: [(optional
+                                        ? [...new Array(optionalRepeat)].map((_, i) => ({
+                                            n: i + 1,
+                                            isCurrent: isStarted && innerStep === i + 1,
+                                            isCompleted: innerStep > i + 1 || addedToCart,
+                                        }))
+                                        : [
+                                            ...new Array(Math.max(repeatMin, count + (isStarted ? 1 : 0))),
+                                        ].map((_, i) => ({
+                                            n: i + 1,
+                                            isCurrent: isStarted && i + 1 === count + 1,
+                                            isCompleted: i + 1 <= count,
+                                        }))).map(({ n, isCurrent, isCompleted }) => {
+                                        const cls = classNames(styles.innerStep, {
                                             [styles.current]: isCurrent,
                                             [styles.completed]: isCompleted,
                                         });
                                         const Icon = isCompleted ? Icons.Check : Icons.User;
-                                        return (_jsxs("div", { className: classes, children: [_jsx(Icon, { className: styles.innerStepIcon }), _jsx(T, { id: "widget.person" }), " ", id] }, i));
-                                    }), optional && optionalRepeat < maxParticipants && (_jsxs("div", { className: addStepClasses, onClick: isStarted
-                                            ? undefined
-                                            : () => {
-                                                if (innerStep > optionalRepeat) {
-                                                    startWidget(true);
-                                                }
-                                            }, children: [_jsx(Icons.Plus, { className: styles.innerStepIcon }), "Ajouter"] }))] }))] })] }), isStarted && (_jsx("div", { ref: widgetContainerRef, className: styles.widgetContainer, onClick: preventBubbling, children: _jsx(Widget, { options: allOptions, presets: allPresets, children: _jsx("div", { id: widgetId }) }) }))] }));
+                                        return (_jsxs("div", { className: cls, children: [_jsx(Icon, { className: styles.innerStepIcon }), _jsx(T, { id: "widget.person" }), " ", n] }, n));
+                                    }), showAddChip && (_jsxs("button", { type: "button", className: classNames(styles.innerStep, styles.addChip), onClick: addPerson, children: [_jsx(Icons.Plus, { className: styles.innerStepIcon }), _jsx(T, { id: "widget.extra-person" })] }))] }))] }), isStarted && (optional || done) ? (_jsx("button", { type: "button", className: styles.cancel, onClick: cancelWidget, children: _jsx(T, { id: "widget.cancel" }) })) : !isStarted && !done ? (_jsx("div", { className: styles.action, children: _jsx(T, { id: optional ? "widget.add" : "widget.book" }) })) : canAddPerson ? (_jsx("button", { type: "button", className: styles.action, onClick: addPerson, children: _jsx(T, { id: "widget.add-person" }) })) : null] }), isStarted && (_jsx("div", { ref: widgetContainerRef, className: styles.widgetContainer, onClick: preventBubbling, children: _jsx(Widget, { options: allOptions, presets: allPresets, children: _jsx("div", { id: widgetId }) }) }))] }));
+}
+function resolveMandatoryRange(pax, chosen, widgetMax) {
+    if (!pax || pax.mode === "unlimited") {
+        const n = widgetMax ?? 1;
+        return { min: n, max: n };
+    }
+    if (pax.mode === "fixed") {
+        const n = pax.value ?? 1;
+        return { min: n, max: n };
+    }
+    if (pax.hidden) {
+        const a = pax.min ?? pax.max ?? 1;
+        const b = pax.max ?? pax.min ?? 1;
+        return { min: Math.min(a, b), max: Math.max(a, b) };
+    }
+    const n = chosen ?? pax.min ?? 1;
+    return { min: n, max: n };
+}
+function resolvePaxBounds(pax, chosen) {
+    if (!pax || pax.mode === "unlimited")
+        return {};
+    if (pax.mode === "fixed") {
+        return pax.value != null ? { paxMin: pax.value, paxMax: pax.value } : {};
+    }
+    if (pax.hidden) {
+        const bounds = {};
+        if (pax.min != null)
+            bounds.paxMin = pax.min;
+        if (pax.max != null)
+            bounds.paxMax = pax.max;
+        return bounds;
+    }
+    return chosen != null ? { paxMin: chosen, paxMax: chosen } : {};
 }

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

@@ -1,14 +1,10 @@
 .widget {
-  padding: 12px;
-  background-color: var(--ds-grey-100, #f8f8f8);
+  overflow: hidden;
+  background-color: var(--ds-grey-000, #fff);
   border: 1px solid var(--ds-grey-200, #ededed);
   border-radius: var(--ds-radius-200, 8px);
 }
 
-.addedToCart {
-  background-color: var(--ds-green-200, #a6ffc3);
-}
-
 .disabled {
   cursor: not-allowed;
   opacity: 0.5;
@@ -16,69 +12,127 @@
 
 .widget:not(.started, .disabled, .addedToCart) {
   cursor: pointer;
-  transition: box-shadow 160ms
-    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+  transition: border-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    box-shadow 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.widget:not(.started, .disabled, .addedToCart):hover {
+  border-color: var(--ds-grey-300, #d7d7d7);
+  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.08));
 }
 
-.widget:not(.started, .disabled, .addedToCart, .repeatable):hover {
-  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
+.started {
+  border-color: var(--ds-secondary, var(--ds-primary, #002dcc));
+}
+
+.addedToCart {
+  border-color: var(--ds-secondary, var(--ds-primary, #002dcc));
 }
 
 .header {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  align-items: stretch;
+  min-height: 76px;
 }
 
-@media (min-width: 480px) {
-  .header {
-    flex-direction: row;
-  }
+/* Cellule numéro / coche / picto à gauche */
+.number {
+  display: flex;
+  flex: 0 0 64px;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ds-grey-500, #7c7b7b);
+  border-right: 1px solid var(--ds-grey-200, #ededed);
 }
 
-.iconContainer {
-  flex: 0 0 90px;
+.started .number {
+  color: var(--ds-secondary, var(--ds-primary, #002dcc));
 }
 
-@media (min-width: 480px) {
-  .iconContainer {
-    flex: 0 0 140px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.addedToCart .number {
+  color: var(--ds-grey-000, #fff);
+  background-color: var(--ds-secondary, var(--ds-primary, #002dcc));
 }
 
-.icon {
-  width: 44px;
-  height: 44px;
+.numberIcon {
+  width: 24px;
+  height: 24px;
+  fill: currentcolor;
 }
 
-.image {
-  max-width: 100%;
-  border: 1px solid var(--ds-grey-200, #ededed);
-  border-radius: var(--ds-radius-200, 8px);
+.numberLogo {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
 }
 
 .text {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: 6px;
+  justify-content: center;
+  gap: 4px;
+  padding: 14px 18px;
 }
 
 .title {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 700;
+  line-height: 1.25;
 }
 
 .tagline {
+  font-size: 14px;
+  color: var(--ds-grey-600, #484848);
+}
+
+/* Action "Réserver" / "Ajouter" à droite (div ou button) */
+.action {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 0 20px;
+  font: inherit;
   font-size: 15px;
+  font-weight: 700;
+  color: var(--ds-secondary, var(--ds-primary, #002dcc));
+  background: none;
+  border: 0;
+  cursor: pointer;
+  white-space: nowrap;
 }
 
+/* Bouton "Annuler" (option en cours d'ajout) */
+.cancel {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 0 20px;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ds-grey-600, #484848);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.cancel:hover {
+  color: var(--ds-grey-800, #000);
+}
+
+/* Étapes internes "Personne N" (widget répétable) */
 .innerSteps {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  margin-top: 6px;
 }
 
 .innerStep {
@@ -87,23 +141,39 @@
   align-items: center;
   justify-content: center;
   gap: 4px;
-  padding: 10px;
-  color: var(--ds-grey-800, #000);
-  font-size: 15px;
+  width: 96px;
+  padding: 8px;
+  font-size: 14px;
   font-weight: 700;
+  color: var(--ds-grey-800, #000);
   border: 2px dashed var(--ds-grey-300, #d7d7d7);
   border-radius: var(--ds-radius-200, 8px);
-  width: 110px;
 }
 
 .completed {
-  background-color: var(--ds-green-200, #a6ffc3);
-  border: 2px solid var(--ds-green-400, #24c678);
+  color: var(--ds-secondary, var(--ds-primary, #002dcc));
+  border-style: solid;
+  border-color: var(--ds-secondary, var(--ds-primary, #002dcc));
 }
 
 .current {
-  background-color: var(--ds-grey-200, #ededed);
-  border: 2px solid var(--ds-grey-500, #7c7b7b);
+  background-color: var(--ds-grey-100, #f8f8f8);
+  border-color: var(--ds-grey-500, #7c7b7b);
+}
+
+/* Puce "+ Personne supplémentaire" (invite à ajouter) — neutre, pas "validée" */
+.addChip {
+  width: auto;
+  padding-inline: 16px;
+  color: var(--ds-grey-600, #484848);
+  border-style: dashed;
+  border-color: var(--ds-grey-300, #d7d7d7);
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
 }
 
 .innerStepIcon {
@@ -113,13 +183,6 @@
 }
 
 .widgetContainer {
-  margin-top: 10px;
-}
-
-.addStep {
-  cursor: pointer;
-}
-.disabledAdd {
-  cursor: not-allowed;
-  opacity: 0.5;
+  padding: 16px 18px;
+  border-top: 1px solid var(--ds-grey-200, #ededed);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"widgets-settings.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/widgets-settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/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;IAC9D,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,CAAC;AAeF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,MAAM,EACN,SAAS,EACT,aAAa,GACd,EAAE,KAAK,2CA4NP"}
+{"version":3,"file":"widgets-settings.d.ts","sourceRoot":"","sources":["../../../../../src/future/components/msem-package/components/widgets-settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/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;IAC9D,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC,CAAC;AAcF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,MAAM,EACN,SAAS,EACT,aAAa,GACd,EAAE,KAAK,2CA8NP"}

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

@@ -4,10 +4,10 @@ import Button from "dt-design-system/es/button";
 import Popover from "dt-design-system/es/popover";
 import * as Icons from "dt-design-system/es/icons";
 import WidgetDialog from "./widget-dialog";
+import { Card } from "./settings-ui";
 import styles from "./widgets-settings.module.css";
 const createNewWidget = (optional) => ({
     id: "new",
-    image: "",
     name: "",
     widget: "",
     title: optional ? "Nouvelle offre optionnelle" : "Nouvelle offre",
@@ -57,25 +57,25 @@ export default function WidgetsSettings({ config, setConfig, editorOptions, }) {
         }
     };
     const showDialog = widget !== null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.title, children: [_jsx(Icons.ShoppingBag, {}), "Composition du package"] }), _jsxs("div", { className: styles.widgets, children: [config.widgets?.map(({ id, image, title, tagline }, i) => {
-                                const isFirst = i === 0;
-                                const isLast = i === config.widgets.length - 1;
-                                const moveBefore = () => {
-                                    reorder(i, -1);
-                                };
-                                const moveAfter = () => {
-                                    reorder(i, 1);
-                                };
-                                return (_jsxs("div", { className: styles.widget, children: [_jsxs(Button, { variant: "secondary", className: styles.widgetButton, onClick: openWidgetDialog(i), children: [image ? _jsx("img", { src: image, alt: "" }) : _jsx(Icons.Grid, {}), _jsx("span", { className: styles.widgetTitle, children: title }), _jsx("span", { className: styles.widgetTagline, children: tagline })] }), _jsxs(Popover, { className: styles.removePopover, trigger: _jsxs(Button, { variant: "danger", className: styles.remove, compact: true, children: [_jsx(Icons.Bin, {}), " Supprimer"] }), children: ["Confirmer la suppression ?", _jsx(Button, { variant: "danger", className: styles.confirmRemove, onClick: () => removeWidget(id), compact: true, children: _jsx(Icons.Check, {}) })] }), _jsxs("div", { className: styles.controls, children: [_jsx(Button, { "data-control": "prev", className: styles.control, onClick: moveBefore, disabled: isFirst, compact: true, children: _jsx(Icons.ChevronLeft, {}) }), _jsx(Button, { "data-control": "next", className: styles.control, onClick: moveAfter, disabled: isLast, compact: true, children: _jsx(Icons.ChevronRight, {}) })] })] }, id));
-                            }), _jsxs(Button, { variant: "primary", className: styles.add, onClick: openWidgetDialog("new"), children: [_jsx(Icons.Plus, {}), _jsx("span", { className: styles.widgetTitle, children: "Ajouter une offre" })] })] })] }), _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.title, children: [_jsx(Icons.ShoppingBag, {}), "Offres optionnelles"] }), _jsxs("div", { className: styles.widgets, children: [config.optionalWidgets?.map(({ id, image, title, tagline }, i) => {
-                                const isFirst = i === 0;
-                                const isLast = i === config.optionalWidgets.length - 1;
-                                const moveBefore = () => {
-                                    reorder(i, -1, true);
-                                };
-                                const moveAfter = () => {
-                                    reorder(i, 1, true);
-                                };
-                                return (_jsxs("div", { className: styles.widget, children: [_jsxs(Button, { variant: "secondary", className: styles.widgetButton, onClick: openWidgetDialog(i, true), children: [image ? _jsx("img", { src: image, alt: "" }) : _jsx(Icons.Grid, {}), _jsx("span", { className: styles.widgetTitle, children: title }), _jsx("span", { className: styles.widgetTagline, children: tagline })] }), _jsxs(Popover, { className: styles.removePopover, trigger: _jsxs(Button, { variant: "danger", className: styles.remove, compact: true, children: [_jsx(Icons.Bin, {}), " Supprimer"] }), children: ["Confirmer la suppression ?", _jsx(Button, { variant: "danger", className: styles.confirmRemove, onClick: () => removeWidget(id, true), compact: true, children: _jsx(Icons.Check, {}) })] }), _jsxs("div", { className: styles.controls, children: [_jsx(Button, { "data-control": "prev", className: styles.control, onClick: moveBefore, disabled: isFirst, compact: true, children: _jsx(Icons.ChevronLeft, {}) }), _jsx(Button, { "data-control": "next", className: styles.control, onClick: moveAfter, disabled: isLast, compact: true, children: _jsx(Icons.ChevronRight, {}) })] })] }, id));
-                            }), _jsxs(Button, { variant: "primary", className: styles.add, onClick: openWidgetDialog("new", true), children: [_jsx(Icons.Plus, {}), _jsx("span", { className: styles.widgetTitle, children: "Ajouter une option" })] })] })] }), showDialog && (_jsx(WidgetDialog, { config: config, setConfig: setConfig, editorOptions: editorOptions, widget: widget, closeWidgetDialog: closeWidgetDialog }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { icon: _jsx(Icons.ShoppingBag, {}), title: "Composition du package", children: _jsxs("div", { className: styles.widgets, children: [config.widgets?.map(({ id, title, tagline, logo }, i) => {
+                            const isFirst = i === 0;
+                            const isLast = i === config.widgets.length - 1;
+                            const moveBefore = () => {
+                                reorder(i, -1);
+                            };
+                            const moveAfter = () => {
+                                reorder(i, 1);
+                            };
+                            return (_jsxs("div", { className: styles.widget, children: [_jsxs(Button, { variant: "transparent", className: styles.widgetButton, onClick: openWidgetDialog(i), children: [logo ? (_jsx("img", { src: logo, alt: "", className: styles.logo })) : (_jsx(Icons.Pack, {})), _jsxs("span", { className: styles.step, children: ["\u00C9tape ", i + 1] }), _jsx("span", { className: styles.widgetTitle, children: title }), _jsx("span", { className: styles.widgetTagline, children: tagline })] }), _jsxs(Popover, { className: styles.removePopover, trigger: _jsxs(Button, { variant: "danger", className: styles.remove, compact: true, children: [_jsx(Icons.Bin, {}), " Supprimer"] }), children: ["Confirmer la suppression ?", _jsx(Button, { variant: "danger", className: styles.confirmRemove, onClick: () => removeWidget(id), compact: true, children: _jsx(Icons.Check, {}) })] }), _jsxs("div", { className: styles.controls, children: [_jsx(Button, { "data-control": "prev", className: styles.control, onClick: moveBefore, disabled: isFirst, compact: true, children: _jsx(Icons.ChevronLeft, {}) }), _jsx(Button, { "data-control": "next", className: styles.control, onClick: moveAfter, disabled: isLast, compact: true, children: _jsx(Icons.ChevronRight, {}) })] })] }, id));
+                        }), _jsxs(Button, { variant: "transparent", className: styles.add, onClick: openWidgetDialog("new"), children: [_jsx(Icons.Plus, {}), _jsx("span", { className: styles.widgetTitle, children: "Ajouter une offre" })] })] }) }), _jsx(Card, { icon: _jsx(Icons.Grid, {}), title: "Offres optionnelles", children: _jsxs("div", { className: styles.widgets, children: [config.optionalWidgets?.map(({ id, title, tagline, logo }, i) => {
+                            const isFirst = i === 0;
+                            const isLast = i === config.optionalWidgets.length - 1;
+                            const moveBefore = () => {
+                                reorder(i, -1, true);
+                            };
+                            const moveAfter = () => {
+                                reorder(i, 1, true);
+                            };
+                            return (_jsxs("div", { className: styles.widget, children: [_jsxs(Button, { variant: "transparent", className: styles.widgetButton, onClick: openWidgetDialog(i, true), children: [logo ? (_jsx("img", { src: logo, alt: "", className: styles.logo })) : (_jsx(Icons.Pack, {})), _jsx("span", { className: styles.widgetTitle, children: title }), _jsx("span", { className: styles.widgetTagline, children: tagline })] }), _jsxs(Popover, { className: styles.removePopover, trigger: _jsxs(Button, { variant: "danger", className: styles.remove, compact: true, children: [_jsx(Icons.Bin, {}), " Supprimer"] }), children: ["Confirmer la suppression ?", _jsx(Button, { variant: "danger", className: styles.confirmRemove, onClick: () => removeWidget(id, true), compact: true, children: _jsx(Icons.Check, {}) })] }), _jsxs("div", { className: styles.controls, children: [_jsx(Button, { "data-control": "prev", className: styles.control, onClick: moveBefore, disabled: isFirst, compact: true, children: _jsx(Icons.ChevronLeft, {}) }), _jsx(Button, { "data-control": "next", className: styles.control, onClick: moveAfter, disabled: isLast, compact: true, children: _jsx(Icons.ChevronRight, {}) })] })] }, id));
+                        }), _jsxs(Button, { variant: "transparent", className: styles.add, onClick: openWidgetDialog("new", true), children: [_jsx(Icons.Plus, {}), _jsx("span", { className: styles.widgetTitle, children: "Ajouter une option" })] })] }) }), showDialog && (_jsx(WidgetDialog, { config: config, setConfig: setConfig, editorOptions: editorOptions, widget: widget, closeWidgetDialog: closeWidgetDialog }))] }));
 }

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

@@ -1,39 +1,112 @@
-.container {
-  width: min(calc(100% - 20px), 840px);
+.widgets {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 160px));
+  justify-content: start;
+  gap: 10px;
+}
+
+.widget {
+  position: relative;
   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 {
+/* Base commune carte offre + carte "Ajouter" */
+:is(.add, .widgetButton) {
+  width: 100%;
+  min-height: 150px;
   display: flex;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  margin-bottom: 8px;
-  font-size: 18px;
+  padding: 12px 10px;
+  text-align: center;
+  font-size: 14px;
+  background-color: var(--ds-grey-000, #fff);
+  border: 1px solid var(--ds-grey-200, #ededed);
+  border-radius: var(--ds-radius-200, 8px);
+  box-shadow: none;
+  transition: border-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    background-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.widgetButton {
+  flex: 1;
+  height: 100%;
+  justify-content: center;
+}
+
+.widgetButton:is(:hover, :focus-visible) {
+  border-color: var(--ds-grey-300, #d7d7d7);
+}
+
+/* Picto : logo d'offre, image marketing, ou repli icône */
+:is(.add, .widgetButton) > svg {
+  --size: 28px;
+
+  color: var(--ds-grey-400, #949494);
+}
+
+.widgetButton img.logo {
+  width: 38px;
+  height: 38px;
+  object-fit: contain;
+}
+
+.step {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ds-grey-500, #7c7b7b);
+}
+
+.widgetTitle {
+  font-size: 15px;
   font-weight: 700;
+  line-height: 1.25;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.title > svg {
-  flex: 0 0 22px;
-  height: 22px;
-  fill: currentcolor;
+.widgetTagline {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--ds-grey-500, #7c7b7b);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.widgets {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 8px;
+/* Carte "Ajouter" : pointillés + accent */
+.add {
+  gap: 6px;
+  color: var(--ds-secondary, var(--ds-primary, #002dcc));
+  font-weight: 700;
+  background-color: transparent;
+  border-style: dashed;
+  border-color: var(--ds-grey-300, #d7d7d7);
 }
 
-.widget {
-  position: relative;
+.add > svg {
+  --size: 22px;
+
+  color: currentcolor;
 }
 
+.add:is(:hover, :focus-visible) {
+  color: var(--ds-secondary, var(--ds-primary, #002dcc));
+  border-color: var(--ds-secondary, var(--ds-primary, #002dcc));
+  background-color: var(--ds-grey-100, #f8f8f8);
+}
+
+/* Bouton "Supprimer" (apparaît au survol, haut-droite) */
 .remove {
   position: absolute;
   top: 10px;
@@ -62,29 +135,7 @@
   pointer-events: auto;
 }
 
-:is(.add, .widgetButton) {
-  width: 100%;
-  flex-direction: column;
-  padding: 50px 10px;
-  font-size: 18px;
-  border-radius: var(--ds-radius-200, 8px);
-}
-
-:is(.add, .widgetButton) > svg {
-  --size: 40px;
-}
-
-.widgetButton img {
-  width: 80px;
-  height: auto;
-  border-radius: var(--ds-radius-100, 4px);
-}
-
-.widgetTagline {
-  font-size: 13px;
-  font-weight: 400;
-}
-
+/* Contrôles de réordonnancement (apparaissent au survol, en bas) */
 .controls {
   position: absolute;
   bottom: 0;