mautourco-components 0.2.162 → 0.2.163

package/dist/components/molecules/DocketPrices/DocketPrices.js

@@ -15,7 +15,6 @@ export var DocketPrices = function (_a) {
     if (!prices || prices.length === 0) {
         return null;
     }
-    console.log('prices', prices);
     return (_jsxs("div", { className: "docket-prices ".concat(className), children: [_jsx(Text, { variant: "bold", size: "sm", color: "default", className: "docket-prices__label", children: label }), _jsx("div", { className: "docket-prices__price-list", children: prices.map(function (price, index) { return (_jsxs(Text, { variant: "bold", size: "sm", color: "default", children: [price.Currency, " ", formatAmount(price.Amount)] }, index)); }) })] }));
 };
 export default DocketPrices;

package/dist/components/organisms/DialogSaveQuotation/DialogSaveQuotation.css

@@ -11,6 +11,14 @@
   gap: var(--spacing-gap-gap-6, 24px);
 }
 
+/* Animated view wrapper (form vs success) */
+.dialog-save-quotation__view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+  width: 100%;
+}
+
 /* Selected quotes section - tags + select all */
 .dialog-save-quotation__quotes-section {
   display: flex;
@@ -88,6 +96,28 @@
   color: var(--color-text-state-error);
 }
 
+/* Disabled label – matches Figma / input design token */
+.dialog-save-quotation__label--disabled {
+  color: var(--input-color-label-disabled, var(--color-text-state-disabled));
+  cursor: not-allowed;
+}
+
+.dialog-save-quotation__label--disabled.dialog-save-quotation__label--required::after {
+  color: var(--input-color-label-disabled, var(--color-text-state-disabled));
+}
+
+/* Form error message – displayed below the form when validation fails */
+.dialog-save-quotation__error {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-regular, 400);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--color-text-state-error, #dc2626);
+  margin: 0;
+  padding: var(--spacing-gap-gap-2, 8px) 0;
+}
+
 /* Footer - buttons full width, side by side */
 .dialog-save-quotation__footer {
   display: flex;
@@ -101,4 +131,55 @@
 .dialog-save-quotation__footer > * {
   flex: 1;
   min-width: 0;
+}
+
+/* ===== Success state content (Figma 4700-366717 – Shared-flows) ===== */
+.dialog-save-quotation__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-gap-gap-4, 16px);
+  text-align: center;
+  padding: var(--spacing-gap-gap-2, 8px) 0 0;
+}
+
+.dialog-save-quotation__content-image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-save-quotation__content-image {
+  width: 150px;
+  height: 150px;
+  object-fit: contain;
+}
+
+.dialog-save-quotation__content-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2, 8px);
+}
+
+.dialog-save-quotation__content-title {
+  color: var(--color-text-default, #262626);
+  text-align: center;
+
+  /* heading-sm/medium */
+  font-family: var(--font-font-family-heading, Satoshi);
+  font-size: var(--font-size-text-2xl, 24px);
+  font-style: normal;
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: var(--font-leading-leading-xl, 32px); /* 133.333% */
+  letter-spacing: var(--font-tracking-tracking-normal, 0);
+}
+
+.dialog-save-quotation__content-message {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-regular, 400);
+  line-height: var(--font-leading-leading-md, 24px);
+  color: var(--color-text-default, #262626);
+  margin: 0;
 }

package/dist/components/organisms/DialogSaveQuotation/DialogSaveQuotation.d.ts

@@ -1,5 +1,5 @@
-import { SaveQuotationSchema } from './save-quotation-schema';
 import './DialogSaveQuotation.css';
+import { SaveQuotationSchema } from './save-quotation-schema';
 export interface SaveQuotationQuote {
     id: string;
     name: string;
@@ -16,8 +16,24 @@ export interface DialogSaveQuotationProps {
         selectedQuotationIds: string[];
         formData: SaveQuotationSchema;
     }) => void;
+    /** Callback when the book now button is clicked */
+    onHandleBookNow?: () => void;
+    /** Callback when the view on quotation grid button is clicked */
+    onHandleViewOnQuotationGrid?: () => void;
     /** Optional default values for the form */
     defaultValues?: Partial<SaveQuotationSchema>;
+    /** Which form inputs to disable. Omit or set to false to keep an input enabled. */
+    disabledInputs?: Partial<Record<keyof SaveQuotationSchema, boolean>>;
+    /** Whether the form is loading */
+    loading?: boolean;
+    /** Whether the form is successful */
+    successful?: boolean;
+    /** The error message to display */
+    errorMessage?: string;
+    /** The image to display when the form is successful */
+    imgSuccess?: string;
+    /** The image to display */
+    imgSuccessAlt?: string;
 }
 /**
  * DialogSaveQuotation - Modal to save quotations with agent and quotation details.

package/dist/components/organisms/DialogSaveQuotation/DialogSaveQuotation.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -8,14 +19,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from 'motion/react';
+import * as motion from 'motion/react-m';
 import { useEffect, useMemo, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Checkbox from '../../atoms/Checkbox/Checkbox';
 import Input from '../../atoms/Inputs/Input/Input';
 import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
+import { Text } from '../../atoms/Typography/Typography';
 import { DialogBookingConfirm } from '../DialogBookingConfirm';
-import { saveQuotationSchema, } from './save-quotation-schema';
 import './DialogSaveQuotation.css';
+import { saveQuotationSchema } from './save-quotation-schema';
 /**
  * DialogSaveQuotation - Modal to save quotations with agent and quotation details.
  * Based on Figma "Save quotation" design with tokens.
@@ -32,7 +46,7 @@ import './DialogSaveQuotation.css';
  */
 export function DialogSaveQuotation(props) {
     var _a, _b, _c, _d;
-    var open = props.open, setOpen = props.setOpen, quotations = props.quotations, onSubmit = props.onSubmit, defaultValues = props.defaultValues;
+    var open = props.open, setOpen = props.setOpen, quotations = props.quotations, onSubmit = props.onSubmit, defaultValues = props.defaultValues, disabledInputs = props.disabledInputs, errorMessage = props.errorMessage, successful = props.successful, loading = props.loading, imgSuccess = props.imgSuccess, imgSuccessAlt = props.imgSuccessAlt, onHandleBookNow = props.onHandleBookNow, onHandleViewOnQuotationGrid = props.onHandleViewOnQuotationGrid;
     var _e = useState(quotations), remainingQuotations = _e[0], setRemainingQuotations = _e[1];
     var _f = useState([]), selectedQuotationIds = _f[0], setSelectedQuotationIds = _f[1];
     var _g = useState(false), isSelectAll = _g[0], setIsSelectAll = _g[1];
@@ -40,9 +54,9 @@ export function DialogSaveQuotation(props) {
     var _j = useState((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.agentLastname) !== null && _b !== void 0 ? _b : ''), agentLastname = _j[0], setAgentLastname = _j[1];
     var _k = useState((_c = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.agency) !== null && _c !== void 0 ? _c : ''), agency = _k[0], setAgency = _k[1];
     var _l = useState((_d = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.quotationName) !== null && _d !== void 0 ? _d : ''), quotationName = _l[0], setQuotationName = _l[1];
-    var remainingQuotationsFiltered = useMemo(function () {
-        return remainingQuotations.filter(function (q) { return selectedQuotationIds.includes(q.id); });
-    }, [remainingQuotations, selectedQuotationIds]);
+    var _m = useState({}), fieldErrors = _m[0], setFieldErrors = _m[1];
+    var _o = useState(null), formErrorMessage = _o[0], setFormErrorMessage = _o[1];
+    var remainingQuotationsFiltered = useMemo(function () { return remainingQuotations.filter(function (q) { return selectedQuotationIds.includes(q.id); }); }, [remainingQuotations, selectedQuotationIds]);
     useEffect(function () {
         setRemainingQuotations(quotations);
         setSelectedQuotationIds(quotations.map(function (q) { return q.id; }));
@@ -67,6 +81,14 @@ export function DialogSaveQuotation(props) {
             });
         }
     };
+    var clearFieldError = function (field) {
+        setFieldErrors(function (prev) {
+            var next = __assign({}, prev);
+            delete next[field];
+            return next;
+        });
+        setFormErrorMessage(null);
+    };
     var handleSelectAll = function () {
         if (isSelectAll) {
             setSelectedQuotationIds(remainingQuotations.length > 1 ? [remainingQuotations[0].id] : []);
@@ -77,6 +99,9 @@ export function DialogSaveQuotation(props) {
         setIsSelectAll(!isSelectAll);
     };
     var handleSubmit = function () {
+        var _a;
+        setFieldErrors({});
+        setFormErrorMessage(null);
         var formData = {
             agentForename: agentForename,
             agentLastname: agentLastname,
@@ -85,13 +110,55 @@ export function DialogSaveQuotation(props) {
         };
         var result = saveQuotationSchema.safeParse(formData);
         if (!result.success) {
+            var errors_1 = {};
+            var messages_1 = [];
+            result.error.issues.forEach(function (issue) {
+                var path = issue.path[0];
+                if (path &&
+                    (path === 'agentForename' ||
+                        path === 'agentLastname' ||
+                        path === 'agency' ||
+                        path === 'quotationName')) {
+                    errors_1[path] = issue.message;
+                    messages_1.push(issue.message);
+                }
+            });
+            setFieldErrors(errors_1);
+            setFormErrorMessage((_a = messages_1[0]) !== null && _a !== void 0 ? _a : 'Please correct the errors below.');
             return;
         }
         onSubmit({
             selectedQuotationIds: remainingQuotationsFiltered.map(function (q) { return q.id; }),
             formData: result.data,
         });
-        setOpen(false);
     };
-    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: "Save quotation", className: "!max-w-[800px]", closeOnOverlayClick: true, children: _jsxs("div", { className: "dialog-save-quotation", children: [_jsxs("div", { className: "dialog-save-quotation__quotes-section", children: [_jsx("div", { className: "dialog-save-quotation__quotes-list", children: remainingQuotations.map(function (quote) { return (_jsx(SelectedValue, { value: quote.name, color: selectedQuotationIds.includes(quote.id) ? 'accent' : 'neutral', onSelect: function () { return handleSelectQuotation(quote.id); }, onRemove: function () { return handleRemoveQuotation(quote.id); }, size: "lg", textSize: "md" }, quote.id)); }) }), _jsx("div", { className: "dialog-save-quotation__select-all", children: _jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll || remainingQuotations.length === 1, disabled: remainingQuotations.length === 1, onChange: handleSelectAll, labelPosition: "leading" }) })] }), _jsx("h3", { className: "dialog-save-quotation__section-title", children: "All quotations" }), _jsxs("div", { className: "dialog-save-quotation__form", children: [_jsxs("div", { className: "dialog-save-quotation__form-row", children: [_jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agent-forename", className: "dialog-save-quotation__label dialog-save-quotation__label--required", children: "Agent Forename" }), _jsx(Input, { id: "agent-forename", value: agentForename, onChange: function (e) { return setAgentForename(e.target.value); }, placeholder: "Mautourco" })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agent-lastname", className: "dialog-save-quotation__label dialog-save-quotation__label--required", children: "Agent Lastname" }), _jsx(Input, { id: "agent-lastname", value: agentLastname, onChange: function (e) { return setAgentLastname(e.target.value); }, placeholder: "B2B" })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agency", className: "dialog-save-quotation__label", children: "Agency" }), _jsx(Input, { id: "agency", value: agency, onChange: function (e) { return setAgency(e.target.value); }, placeholder: "Mautourco Ltd" })] })] }), _jsx("div", { className: "dialog-save-quotation__form-row dialog-save-quotation__form-row--single", children: _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "quotation-name", className: "dialog-save-quotation__label dialog-save-quotation__label--required", children: "Quotation name" }), _jsx(Input, { id: "quotation-name", value: quotationName, onChange: function (e) { return setQuotationName(e.target.value); }, placeholder: "Insert client's name" })] }) })] }), _jsxs("div", { className: "dialog-save-quotation__footer", children: [_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: function () { return setOpen(false); }, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: handleSubmit, children: "Save quotation" })] })] }) }));
+    return (_jsx(DialogBookingConfirm, { open: open, setOpen: setOpen, title: !successful ? 'Save quotation' : undefined, className: "!max-w-[800px]", closeOnOverlayClick: true, children: _jsx(motion.div, { className: "dialog-save-quotation", children: _jsx(AnimatePresence, { mode: "wait", initial: false, children: !successful ? (_jsxs(motion.div, { className: "dialog-save-quotation__view", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeInOut' }, children: [_jsxs("div", { className: "dialog-save-quotation__quotes-section", children: [_jsx("div", { className: "dialog-save-quotation__quotes-list", children: remainingQuotations.map(function (quote) { return (_jsx(SelectedValue, { value: quote.name, color: selectedQuotationIds.includes(quote.id) ? 'accent' : 'neutral', onSelect: function () { return handleSelectQuotation(quote.id); }, onRemove: function () { return handleRemoveQuotation(quote.id); }, size: "lg", textSize: "md" }, quote.id)); }) }), _jsx("div", { className: "dialog-save-quotation__select-all", children: _jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll || remainingQuotations.length === 1, disabled: remainingQuotations.length === 1, onChange: handleSelectAll, labelPosition: "leading" }) })] }), _jsx("h3", { className: "dialog-save-quotation__section-title", children: "All quotations" }), _jsxs("div", { className: "dialog-save-quotation__form", children: [_jsxs("div", { className: "dialog-save-quotation__form-row", children: [_jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agent-forename", className: "dialog-save-quotation__label dialog-save-quotation__label--required".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentForename) ? ' dialog-save-quotation__label--disabled' : ''), children: "Agent Forename" }), _jsx(Input, { id: "agent-forename", value: agentForename, onChange: function (e) {
+                                                        setAgentForename(e.target.value);
+                                                        clearFieldError('agentForename');
+                                                    }, placeholder: "Mautourco", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentForename)
+                                                        ? 'disabled'
+                                                        : fieldErrors.agentForename || errorMessage
+                                                            ? 'error'
+                                                            : 'default' })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agent-lastname", className: "dialog-save-quotation__label dialog-save-quotation__label--required".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentLastname) ? ' dialog-save-quotation__label--disabled' : ''), children: "Agent Lastname" }), _jsx(Input, { id: "agent-lastname", value: agentLastname, onChange: function (e) {
+                                                        setAgentLastname(e.target.value);
+                                                        clearFieldError('agentLastname');
+                                                    }, placeholder: "B2B", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agentLastname)
+                                                        ? 'disabled'
+                                                        : fieldErrors.agentLastname || errorMessage
+                                                            ? 'error'
+                                                            : 'default' })] }), _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "agency", className: "dialog-save-quotation__label".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agency) ? ' dialog-save-quotation__label--disabled' : ''), children: "Agency" }), _jsx(Input, { id: "agency", value: agency, onChange: function (e) {
+                                                        setAgency(e.target.value);
+                                                        clearFieldError('agency');
+                                                    }, placeholder: "Mautourco Ltd", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.agency)
+                                                        ? 'disabled'
+                                                        : fieldErrors.agency || errorMessage
+                                                            ? 'error'
+                                                            : 'default' })] })] }), _jsx("div", { className: "dialog-save-quotation__form-row dialog-save-quotation__form-row--single", children: _jsxs("div", { className: "dialog-save-quotation__field", children: [_jsx("label", { htmlFor: "quotation-name", className: "dialog-save-quotation__label dialog-save-quotation__label--required".concat((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.quotationName) ? ' dialog-save-quotation__label--disabled' : ''), children: "Quotation name" }), _jsx(Input, { id: "quotation-name", value: quotationName, onChange: function (e) {
+                                                    setQuotationName(e.target.value);
+                                                    clearFieldError('quotationName');
+                                                }, placeholder: "Insert client's name", variant: (disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.quotationName)
+                                                    ? 'disabled'
+                                                    : fieldErrors.quotationName || errorMessage
+                                                        ? 'error'
+                                                        : 'default' })] }) })] }), (formErrorMessage || errorMessage) && (_jsx("p", { className: "dialog-save-quotation__error", role: "alert", children: formErrorMessage !== null && formErrorMessage !== void 0 ? formErrorMessage : errorMessage })), _jsxs("div", { className: "dialog-save-quotation__footer", children: [_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: function () { return setOpen(false); }, disabled: loading, children: "Cancel" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: handleSubmit, disabled: loading, children: loading ? 'Saving…' : 'Save quotation' })] })] }, "form")) : (_jsxs(motion.div, { className: "dialog-save-quotation__view", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: 'easeInOut' }, children: [_jsxs("div", { className: "dialog-save-quotation__content", children: [_jsx("div", { className: "dialog-save-quotation__content-image-container", "aria-hidden": true, children: _jsx("img", { src: imgSuccess, alt: imgSuccessAlt, className: "dialog-save-quotation__content-image" }) }), _jsxs("div", { className: "dialog-save-quotation__content-text", children: [_jsx(Text, { variant: "bold", size: "xl", as: "h2", className: "dialog-save-quotation__content-title ", children: "Quotation saved" }), _jsxs(Text, { size: "lg", children: [_jsxs(Text, { size: "lg", variant: "bold", as: "span", children: ["\"", quotationName, "\""] }), ' ', "quotation"] })] })] }), _jsxs("div", { className: "dialog-save-quotation__footer", children: [_jsx(Button, { variant: "outline-secondary", size: "sm", onClick: onHandleViewOnQuotationGrid, children: "View on quotation grid" }), _jsx(Button, { variant: "secondary", size: "sm", onClick: onHandleBookNow, children: "Book now" })] })] }, "success")) }) }) }));
 }

package/dist/index.d.ts

@@ -64,8 +64,8 @@ export { DialogComparison } from './components/organisms/DialogComparison/Dialog
 export * from './components/organisms/DialogDeleteConfirm';
 export { DialogDeleteConfirm } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
 export { DialogQuoteRename } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
-export * from './components/organisms/DialogSendingMail';
 export * from './components/organisms/DialogSaveQuotation';
+export * from './components/organisms/DialogSendingMail';
 export { default as Docket } from './components/organisms/Docket/Docket';
 export { DocketAccordion, type DocketAccordionProps, } from './components/organisms/DocketAccordion';
 export { Footer } from './components/organisms/Footer/Footer';

package/dist/index.js

@@ -66,8 +66,8 @@ export { DialogComparison } from './components/organisms/DialogComparison/Dialog
 export * from './components/organisms/DialogDeleteConfirm';
 export { DialogDeleteConfirm } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
 export { DialogQuoteRename } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
-export * from './components/organisms/DialogSendingMail';
 export * from './components/organisms/DialogSaveQuotation';
+export * from './components/organisms/DialogSendingMail';
 export { default as Docket } from './components/organisms/Docket/Docket';
 export { DocketAccordion, } from './components/organisms/DocketAccordion';
 export { Footer } from './components/organisms/Footer/Footer';

package/dist/styles/components/forms.css

@@ -107,17 +107,17 @@
   color: var(--color-red-400);
 }
 
-/* État disabled */
+/* État disabled – Mautourco Foundations tokens */
 
 .input-field--disabled {
-  background-color: var(--color-slate-100);
-  border-color: var(--color-slate-200);
-  color: var(--color-slate-400);
+  background-color: var(--color-elevation-state-disabled, #fbfbfb);
+  border-color: var(--color-border-input-disabled, #d1d5db);
+  color: var(--color-text-state-disabled, #a3a3a3);
   cursor: not-allowed;
 }
 
 .input-field--disabled::placeholder {
-  color: var(--color-slate-300);
+  color: var(--color-text-state-disabled, #a3a3a3);
 }
 
 /* Styles pour le showcase */

package/dist/styles/components/organism/docket.css

@@ -235,6 +235,7 @@
 
 .docket__footer-button {
   flex: 1;
+  white-space: nowrap;
 }
 
 .docket__footer-button--full {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.162",
+  "version": "0.2.163",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/DocketPrices/DocketPrices.tsx

@@ -37,8 +37,6 @@ export const DocketPrices: React.FC<DocketPricesProps> = ({
     return null;
   }
 
-  console.log('prices', prices);
-
   return (
     <div className={`docket-prices ${className}`}>
       <Text variant="bold" size="sm" color="default" className="docket-prices__label">

package/src/components/organisms/DialogSaveQuotation/DialogSaveQuotation.css

@@ -7,6 +7,14 @@
   gap: var(--spacing-gap-gap-6, 24px);
 }
 
+/* Animated view wrapper (form vs success) */
+.dialog-save-quotation__view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6, 24px);
+  width: 100%;
+}
+
 /* Selected quotes section - tags + select all */
 .dialog-save-quotation__quotes-section {
   display: flex;
@@ -84,6 +92,28 @@
   color: var(--color-text-state-error);
 }
 
+/* Disabled label – matches Figma / input design token */
+.dialog-save-quotation__label--disabled {
+  color: var(--input-color-label-disabled, var(--color-text-state-disabled));
+  cursor: not-allowed;
+}
+
+.dialog-save-quotation__label--disabled.dialog-save-quotation__label--required::after {
+  color: var(--input-color-label-disabled, var(--color-text-state-disabled));
+}
+
+/* Form error message – displayed below the form when validation fails */
+.dialog-save-quotation__error {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-regular, 400);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--color-text-state-error, #dc2626);
+  margin: 0;
+  padding: var(--spacing-gap-gap-2, 8px) 0;
+}
+
 /* Footer - buttons full width, side by side */
 .dialog-save-quotation__footer {
   display: flex;
@@ -98,3 +128,54 @@
   flex: 1;
   min-width: 0;
 }
+
+/* ===== Success state content (Figma 4700-366717 – Shared-flows) ===== */
+.dialog-save-quotation__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-gap-gap-4, 16px);
+  text-align: center;
+  padding: var(--spacing-gap-gap-2, 8px) 0 0;
+}
+
+.dialog-save-quotation__content-image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-save-quotation__content-image {
+  width: 150px;
+  height: 150px;
+  object-fit: contain;
+}
+
+.dialog-save-quotation__content-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2, 8px);
+}
+
+.dialog-save-quotation__content-title {
+  color: var(--color-text-default, #262626);
+  text-align: center;
+
+  /* heading-sm/medium */
+  font-family: var(--font-font-family-heading, Satoshi);
+  font-size: var(--font-size-text-2xl, 24px);
+  font-style: normal;
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: var(--font-leading-leading-xl, 32px); /* 133.333% */
+  letter-spacing: var(--font-tracking-tracking-normal, 0);
+}
+
+.dialog-save-quotation__content-message {
+  font-family:
+    var(--font-font-family-body), 'Satoshi', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-regular, 400);
+  line-height: var(--font-leading-leading-md, 24px);
+  color: var(--color-text-default, #262626);
+  margin: 0;
+}

package/src/components/organisms/DialogSaveQuotation/DialogSaveQuotation.tsx

@@ -1,14 +1,14 @@
+import { AnimatePresence } from 'motion/react';
+import * as motion from 'motion/react-m';
 import { useEffect, useMemo, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Checkbox from '../../atoms/Checkbox/Checkbox';
 import Input from '../../atoms/Inputs/Input/Input';
 import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
+import { Text } from '../../atoms/Typography/Typography';
 import { DialogBookingConfirm } from '../DialogBookingConfirm';
-import {
-  saveQuotationSchema,
-  SaveQuotationSchema,
-} from './save-quotation-schema';
 import './DialogSaveQuotation.css';
+import { saveQuotationSchema, SaveQuotationSchema } from './save-quotation-schema';
 
 export interface SaveQuotationQuote {
   id: string;
@@ -27,8 +27,24 @@ export interface DialogSaveQuotationProps {
     selectedQuotationIds: string[];
     formData: SaveQuotationSchema;
   }) => void;
+  /** Callback when the book now button is clicked */
+  onHandleBookNow?: () => void;
+  /** Callback when the view on quotation grid button is clicked */
+  onHandleViewOnQuotationGrid?: () => void;
   /** Optional default values for the form */
   defaultValues?: Partial<SaveQuotationSchema>;
+  /** Which form inputs to disable. Omit or set to false to keep an input enabled. */
+  disabledInputs?: Partial<Record<keyof SaveQuotationSchema, boolean>>;
+  /** Whether the form is loading */
+  loading?: boolean;
+  /** Whether the form is successful */
+  successful?: boolean;
+  /** The error message to display */
+  errorMessage?: string;
+  /** The image to display when the form is successful */
+  imgSuccess?: string;
+  /** The image to display */
+  imgSuccessAlt?: string;
 }
 
 /**
@@ -52,6 +68,14 @@ export function DialogSaveQuotation(props: DialogSaveQuotationProps) {
     quotations,
     onSubmit,
     defaultValues,
+    disabledInputs,
+    errorMessage,
+    successful,
+    loading,
+    imgSuccess,
+    imgSuccessAlt,
+    onHandleBookNow,
+    onHandleViewOnQuotationGrid,
   } = props;
 
   const [remainingQuotations, setRemainingQuotations] =
@@ -59,20 +83,17 @@ export function DialogSaveQuotation(props: DialogSaveQuotationProps) {
   const [selectedQuotationIds, setSelectedQuotationIds] = useState<string[]>([]);
   const [isSelectAll, setIsSelectAll] = useState(false);
 
-  const [agentForename, setAgentForename] = useState(
-    defaultValues?.agentForename ?? ''
-  );
-  const [agentLastname, setAgentLastname] = useState(
-    defaultValues?.agentLastname ?? ''
-  );
+  const [agentForename, setAgentForename] = useState(defaultValues?.agentForename ?? '');
+  const [agentLastname, setAgentLastname] = useState(defaultValues?.agentLastname ?? '');
   const [agency, setAgency] = useState(defaultValues?.agency ?? '');
-  const [quotationName, setQuotationName] = useState(
-    defaultValues?.quotationName ?? ''
-  );
+  const [quotationName, setQuotationName] = useState(defaultValues?.quotationName ?? '');
+  const [fieldErrors, setFieldErrors] = useState<
+    Partial<Record<keyof SaveQuotationSchema, string>>
+  >({});
+  const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
 
   const remainingQuotationsFiltered = useMemo(
-    () =>
-      remainingQuotations.filter((q) => selectedQuotationIds.includes(q.id)),
+    () => remainingQuotations.filter((q) => selectedQuotationIds.includes(q.id)),
     [remainingQuotations, selectedQuotationIds]
   );
 
@@ -106,9 +127,20 @@ export function DialogSaveQuotation(props: DialogSaveQuotationProps) {
     }
   };
 
+  const clearFieldError = (field: keyof SaveQuotationSchema) => {
+    setFieldErrors((prev) => {
+      const next = { ...prev };
+      delete next[field];
+      return next;
+    });
+    setFormErrorMessage(null);
+  };
+
   const handleSelectAll = () => {
     if (isSelectAll) {
-      setSelectedQuotationIds(remainingQuotations.length > 1 ? [remainingQuotations[0].id] : []);
+      setSelectedQuotationIds(
+        remainingQuotations.length > 1 ? [remainingQuotations[0].id] : []
+      );
     } else {
       setSelectedQuotationIds(remainingQuotations.map((q) => q.id));
     }
@@ -116,6 +148,9 @@ export function DialogSaveQuotation(props: DialogSaveQuotationProps) {
   };
 
   const handleSubmit = () => {
+    setFieldErrors({});
+    setFormErrorMessage(null);
+
     const formData: SaveQuotationSchema = {
       agentForename,
       agentLastname,
@@ -125,6 +160,23 @@ export function DialogSaveQuotation(props: DialogSaveQuotationProps) {
 
     const result = saveQuotationSchema.safeParse(formData);
     if (!result.success) {
+      const errors: Partial<Record<keyof SaveQuotationSchema, string>> = {};
+      const messages: string[] = [];
+      result.error.issues.forEach((issue) => {
+        const path = issue.path[0] as keyof SaveQuotationSchema;
+        if (
+          path &&
+          (path === 'agentForename' ||
+            path === 'agentLastname' ||
+            path === 'agency' ||
+            path === 'quotationName')
+        ) {
+          errors[path] = issue.message;
+          messages.push(issue.message);
+        }
+      });
+      setFieldErrors(errors);
+      setFormErrorMessage(messages[0] ?? 'Please correct the errors below.');
       return;
     }
 
@@ -132,118 +184,227 @@ export function DialogSaveQuotation(props: DialogSaveQuotationProps) {
       selectedQuotationIds: remainingQuotationsFiltered.map((q) => q.id),
       formData: result.data,
     });
-    setOpen(false);
   };
 
   return (
     <DialogBookingConfirm
       open={open}
       setOpen={setOpen}
-      title="Save quotation"
+      title={!successful ? 'Save quotation' : undefined}
       className="!max-w-[800px]"
       closeOnOverlayClick>
-      <div className="dialog-save-quotation">
-        {/* Quotes section: chips + select all */}
-        <div className="dialog-save-quotation__quotes-section">
-          <div className="dialog-save-quotation__quotes-list">
-            {remainingQuotations.map((quote) => (
-              <SelectedValue
-                key={quote.id}
-                value={quote.name}
-                color={selectedQuotationIds.includes(quote.id) ? 'accent' : 'neutral'}
-                onSelect={() => handleSelectQuotation(quote.id)}
-                onRemove={() => handleRemoveQuotation(quote.id)}
-                size="lg"
-                textSize="md"
-              />
-            ))}
-          </div>
-          <div className="dialog-save-quotation__select-all">
-            <Checkbox
-              label="Select all quotations"
-              checked={isSelectAll || remainingQuotations.length === 1}
-              disabled={remainingQuotations.length === 1}
-              onChange={handleSelectAll}
-              labelPosition="leading"
-            />
-          </div>
-        </div>
-
-        {/* All quotations form */}
-        <h3 className="dialog-save-quotation__section-title">All quotations</h3>
-
-        <div className="dialog-save-quotation__form">
-          <div className="dialog-save-quotation__form-row">
-            <div className="dialog-save-quotation__field">
-              <label
-                htmlFor="agent-forename"
-                className="dialog-save-quotation__label dialog-save-quotation__label--required">
-                Agent Forename
-              </label>
-              <Input
-                id="agent-forename"
-                value={agentForename}
-                onChange={(e) => setAgentForename(e.target.value)}
-                placeholder="Mautourco"
-              />
-            </div>
-            <div className="dialog-save-quotation__field">
-              <label
-                htmlFor="agent-lastname"
-                className="dialog-save-quotation__label dialog-save-quotation__label--required">
-                Agent Lastname
-              </label>
-              <Input
-                id="agent-lastname"
-                value={agentLastname}
-                onChange={(e) => setAgentLastname(e.target.value)}
-                placeholder="B2B"
-              />
-            </div>
-            <div className="dialog-save-quotation__field">
-              <label
-                htmlFor="agency"
-                className="dialog-save-quotation__label">
-                Agency
-              </label>
-              <Input
-                id="agency"
-                value={agency}
-                onChange={(e) => setAgency(e.target.value)}
-                placeholder="Mautourco Ltd"
-              />
-            </div>
-          </div>
-
-          <div className="dialog-save-quotation__form-row dialog-save-quotation__form-row--single">
-            <div className="dialog-save-quotation__field">
-              <label
-                htmlFor="quotation-name"
-                className="dialog-save-quotation__label dialog-save-quotation__label--required">
-                Quotation name
-              </label>
-              <Input
-                id="quotation-name"
-                value={quotationName}
-                onChange={(e) => setQuotationName(e.target.value)}
-                placeholder="Insert client's name"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="dialog-save-quotation__footer">
-          <Button
-            variant="outline-secondary"
-            size="sm"
-            onClick={() => setOpen(false)}>
-            Cancel
-          </Button>
-          <Button variant="secondary" size="sm" onClick={handleSubmit}>
-            Save quotation
-          </Button>
-        </div>
-      </div>
+      <motion.div className="dialog-save-quotation">
+        <AnimatePresence mode="wait" initial={false}>
+          {!successful ? (
+            <motion.div
+              key="form"
+              className="dialog-save-quotation__view"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut' }}>
+              <div className="dialog-save-quotation__quotes-section">
+                <div className="dialog-save-quotation__quotes-list">
+                  {remainingQuotations.map((quote) => (
+                    <SelectedValue
+                      key={quote.id}
+                      value={quote.name}
+                      color={
+                        selectedQuotationIds.includes(quote.id) ? 'accent' : 'neutral'
+                      }
+                      onSelect={() => handleSelectQuotation(quote.id)}
+                      onRemove={() => handleRemoveQuotation(quote.id)}
+                      size="lg"
+                      textSize="md"
+                    />
+                  ))}
+                </div>
+                <div className="dialog-save-quotation__select-all">
+                  <Checkbox
+                    label="Select all quotations"
+                    checked={isSelectAll || remainingQuotations.length === 1}
+                    disabled={remainingQuotations.length === 1}
+                    onChange={handleSelectAll}
+                    labelPosition="leading"
+                  />
+                </div>
+              </div>
+
+              {/* All quotations form */}
+              <h3 className="dialog-save-quotation__section-title">All quotations</h3>
+
+              <div className="dialog-save-quotation__form">
+                <div className="dialog-save-quotation__form-row">
+                  <div className="dialog-save-quotation__field">
+                    <label
+                      htmlFor="agent-forename"
+                      className={`dialog-save-quotation__label dialog-save-quotation__label--required${disabledInputs?.agentForename ? ' dialog-save-quotation__label--disabled' : ''}`}>
+                      Agent Forename
+                    </label>
+                    <Input
+                      id="agent-forename"
+                      value={agentForename}
+                      onChange={(e) => {
+                        setAgentForename(e.target.value);
+                        clearFieldError('agentForename');
+                      }}
+                      placeholder="Mautourco"
+                      variant={
+                        disabledInputs?.agentForename
+                          ? 'disabled'
+                          : fieldErrors.agentForename || errorMessage
+                            ? 'error'
+                            : 'default'
+                      }
+                    />
+                  </div>
+                  <div className="dialog-save-quotation__field">
+                    <label
+                      htmlFor="agent-lastname"
+                      className={`dialog-save-quotation__label dialog-save-quotation__label--required${disabledInputs?.agentLastname ? ' dialog-save-quotation__label--disabled' : ''}`}>
+                      Agent Lastname
+                    </label>
+                    <Input
+                      id="agent-lastname"
+                      value={agentLastname}
+                      onChange={(e) => {
+                        setAgentLastname(e.target.value);
+                        clearFieldError('agentLastname');
+                      }}
+                      placeholder="B2B"
+                      variant={
+                        disabledInputs?.agentLastname
+                          ? 'disabled'
+                          : fieldErrors.agentLastname || errorMessage
+                            ? 'error'
+                            : 'default'
+                      }
+                    />
+                  </div>
+                  <div className="dialog-save-quotation__field">
+                    <label
+                      htmlFor="agency"
+                      className={`dialog-save-quotation__label${disabledInputs?.agency ? ' dialog-save-quotation__label--disabled' : ''}`}>
+                      Agency
+                    </label>
+                    <Input
+                      id="agency"
+                      value={agency}
+                      onChange={(e) => {
+                        setAgency(e.target.value);
+                        clearFieldError('agency');
+                      }}
+                      placeholder="Mautourco Ltd"
+                      variant={
+                        disabledInputs?.agency
+                          ? 'disabled'
+                          : fieldErrors.agency || errorMessage
+                            ? 'error'
+                            : 'default'
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="dialog-save-quotation__form-row dialog-save-quotation__form-row--single">
+                  <div className="dialog-save-quotation__field">
+                    <label
+                      htmlFor="quotation-name"
+                      className={`dialog-save-quotation__label dialog-save-quotation__label--required${disabledInputs?.quotationName ? ' dialog-save-quotation__label--disabled' : ''}`}>
+                      Quotation name
+                    </label>
+                    <Input
+                      id="quotation-name"
+                      value={quotationName}
+                      onChange={(e) => {
+                        setQuotationName(e.target.value);
+                        clearFieldError('quotationName');
+                      }}
+                      placeholder="Insert client's name"
+                      variant={
+                        disabledInputs?.quotationName
+                          ? 'disabled'
+                          : fieldErrors.quotationName || errorMessage
+                            ? 'error'
+                            : 'default'
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {(formErrorMessage || errorMessage) && (
+                <p className="dialog-save-quotation__error" role="alert">
+                  {formErrorMessage ?? errorMessage}
+                </p>
+              )}
+
+              <div className="dialog-save-quotation__footer">
+                <Button
+                  variant="outline-secondary"
+                  size="sm"
+                  onClick={() => setOpen(false)}
+                  disabled={loading}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleSubmit}
+                  disabled={loading}>
+                  {loading ? 'Saving…' : 'Save quotation'}
+                </Button>
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="success"
+              className="dialog-save-quotation__view"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2, ease: 'easeInOut' }}>
+              <div className="dialog-save-quotation__content">
+                <div
+                  className="dialog-save-quotation__content-image-container"
+                  aria-hidden>
+                  <img
+                    src={imgSuccess}
+                    alt={imgSuccessAlt}
+                    className="dialog-save-quotation__content-image"
+                  />
+                </div>
+                <div className="dialog-save-quotation__content-text">
+                  <Text
+                    variant="bold"
+                    size="xl"
+                    as="h2"
+                    className="dialog-save-quotation__content-title ">
+                    Quotation saved
+                  </Text>
+                  <Text size="lg">
+                    <Text size="lg" variant="bold" as="span">
+                      "{quotationName}"
+                    </Text>{' '}
+                    quotation
+                  </Text>
+                </div>
+              </div>
+              <div className="dialog-save-quotation__footer">
+                <Button
+                  variant="outline-secondary"
+                  size="sm"
+                  onClick={onHandleViewOnQuotationGrid}>
+                  View on quotation grid
+                </Button>
+                <Button variant="secondary" size="sm" onClick={onHandleBookNow}>
+                  Book now
+                </Button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
     </DialogBookingConfirm>
   );
 }

package/src/styles/components/forms.css

@@ -97,16 +97,16 @@
   color: var(--color-red-400);
 }
 
-/* État disabled */
+/* État disabled – Mautourco Foundations tokens */
 .input-field--disabled {
-  background-color: var(--color-slate-100);
-  border-color: var(--color-slate-200);
-  color: var(--color-slate-400);
+  background-color: var(--color-elevation-state-disabled, #fbfbfb);
+  border-color: var(--color-border-input-disabled, #d1d5db);
+  color: var(--color-text-state-disabled, #a3a3a3);
   cursor: not-allowed;
 }
 
 .input-field--disabled::placeholder {
-  color: var(--color-slate-300);
+  color: var(--color-text-state-disabled, #a3a3a3);
 }
 
 /* Styles pour le showcase */

package/src/styles/components/organism/docket.css

@@ -222,6 +222,7 @@
 
 .docket__footer-button {
   flex: 1;
+  white-space: nowrap;
 }
 
 .docket__footer-button--full {