mautourco-components 0.2.34 → 0.2.35

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './DialogDeleteConfirmMultiple.css';
+export interface AvailableQuote {
+    id: string;
+    name: string;
+}
+export interface DialogDeleteConfirmMultipleProps {
+    onCancel?: () => void;
+    onDelete?: (selectedQuotes: string[]) => void;
+    quotes: AvailableQuote[];
+}
+export declare const DialogDeleteConfirmMultiple: React.FC<DialogDeleteConfirmMultipleProps>;

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.js

@@ -0,0 +1,44 @@
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Toast from '../../../molecules/Toast/index';
+import { useEffect, useState } from 'react';
+import Checkbox from '../../../atoms/Checkbox/Checkbox';
+import { DialogDeleteConfirm } from '../DialogDeleteConfirm';
+import './DialogDeleteConfirmMultiple.css';
+export var DialogDeleteConfirmMultiple = function (props) {
+    var quotes = props.quotes, onCancel = props.onCancel, onDelete = props.onDelete;
+    var _a = useState([]), selectedQuotes = _a[0], setSelectedQuotes = _a[1];
+    var _b = useState(false), isSelectAll = _b[0], setIsSelectAll = _b[1];
+    var handleSelectQuote = function (quote) {
+        setSelectedQuotes(function (prev) {
+            if (prev.includes(quote.id)) {
+                return prev.filter(function (id) { return id !== quote.id; });
+            }
+            return __spreadArray(__spreadArray([], prev, true), [quote.id], false);
+        });
+    };
+    var handleSelectAllQuotes = function () {
+        setIsSelectAll(!isSelectAll);
+        if (isSelectAll) {
+            setSelectedQuotes([]);
+        }
+        else {
+            setSelectedQuotes(quotes.map(function (quote) { return quote.id; }));
+        }
+    };
+    var handleDeleteQuotes = function () {
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete(selectedQuotes);
+    };
+    useEffect(function () {
+        setIsSelectAll(selectedQuotes.length === quotes.length);
+    }, [selectedQuotes, quotes]);
+    return (_jsx(DialogDeleteConfirm.Wrapper, { onCancel: onCancel, onOk: handleDeleteQuotes, children: _jsxs("div", { className: "confirm-multiple", children: [_jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll, onChange: handleSelectAllQuotes, labelPosition: "leading", className: "confirm-multiple__all" }), _jsx("ul", { className: "mb-1", children: quotes.map(function (quote) { return (_jsx("li", { children: _jsx(Checkbox, { label: quote.name, checked: selectedQuotes.includes(quote.id), onChange: function () { return handleSelectQuote(quote); }, labelPosition: "leading" }) }, quote.id)); }) }), isSelectAll && (_jsx(Toast, { text: "Caution: This would delete all quotations created.", type: "warning", showIcon: false }))] }) }));
+};

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps } from '../../atoms/Button/Button';
+export interface DialogDeleteConfirmWrapperProps {
+    onCancel?: () => void;
+    cancelText?: string;
+    okVariant?: ButtonProps['variant'];
+    onOk?: () => void;
+    okText?: string;
+    children: React.ReactNode;
+}
+export declare const DialogDeleteConfirmWrapper: (props: DialogDeleteConfirmWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../../atoms/Button/Button';
+export var DialogDeleteConfirmWrapper = function (props) {
+    var onCancel = props.onCancel, _a = props.cancelText, cancelText = _a === void 0 ? 'Cancel' : _a, _b = props.okVariant, okVariant = _b === void 0 ? 'destructive' : _b, onOk = props.onOk, _c = props.okText, okText = _c === void 0 ? 'Delete' : _c, children = props.children;
+    return (_jsxs("div", { className: "space-y-9", children: [children, _jsxs("div", { className: "grid grid-cols-2 gap-x-4", children: [_jsx(Button, { variant: "outline-secondary", onClick: onCancel, size: "sm", children: cancelText }), _jsx(Button, { variant: okVariant, onClick: onOk, size: "sm", children: okText })] })] }));
+};

package/dist/components/organisms/DialogDeleteConfirm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DialogDeleteConfirm';
+export type { DialogDeleteConfirmMultipleProps } from './DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple';
+export type { DialogDeleteConfirmWrapperProps } from './DialogDeleteConfirmWrapper';

package/dist/components/organisms/DialogDeleteConfirm/index.js

@@ -0,0 +1 @@
+export * from './DialogDeleteConfirm';

package/dist/components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple.d.ts

@@ -6,12 +6,41 @@ export interface SelectedQuote {
     id: string;
     name: string;
 }
-export interface DialogSendingMailMultipleProps extends Omit<DialogSendingMailContentProps, 'onSubmit'> {
+export interface DialogSendingMailMultipleProps extends Omit<DialogSendingMailContentProps, 'onSubmit' | 'onPreviewAttachment'> {
+    /** Default data of the quotes */
     data: SelectedQuote[];
+    /** Function to call when a quote is selected */
     onSelected?: (selectedQuotes: SelectedQuote[]) => void;
+    /** Function to call when the form is submitted */
     onSubmit: (payload: {
         selectedQuotes: SelectedQuote[];
         formData: SendingMailSchema;
     }) => void;
+    /** Function to call when the preview attachment is clicked */
+    onPreviewAttachment?: (selectedQuotes: SelectedQuote[]) => void;
 }
+/**
+ * Props for the DialogSendingMailMultiple component
+ *
+ * @example
+ * <DialogSendingMail>
+ *  <DialogSendingMail.MultipleQuotes
+ *  data={[
+ *    { id: '1', name: 'Quote 1' },
+ *    { id: '2', name: 'Quote 2' },
+ *    { id: '3', name: 'Quote 3' },
+ *  ]}
+ *  onPreviewAttachment={() => {
+ *    console.log('Preview attachment');
+ *  }}
+ *  onSubmit={(data) => {
+ *    console.log(data);
+ *  }}
+ *  onSelected={(selectedQuotes) => {
+ *    console.log(selectedQuotes);
+ *  }} />
+ * </DialogSendingMail>
+ *
+ * @param props - The props of the component
+ */
 export declare const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps>;

package/dist/components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple.js

@@ -32,11 +32,35 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Checkbox from '../../../atoms/Checkbox/Checkbox';
 import SelectedValue from '../../../atoms/SelectedValue/SelectedValue';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { DialogSendingMailContent, } from '../DialogSendingMailContent';
 import './DialogSendingMailMultiple.css';
+/**
+ * Props for the DialogSendingMailMultiple component
+ *
+ * @example
+ * <DialogSendingMail>
+ *  <DialogSendingMail.MultipleQuotes
+ *  data={[
+ *    { id: '1', name: 'Quote 1' },
+ *    { id: '2', name: 'Quote 2' },
+ *    { id: '3', name: 'Quote 3' },
+ *  ]}
+ *  onPreviewAttachment={() => {
+ *    console.log('Preview attachment');
+ *  }}
+ *  onSubmit={(data) => {
+ *    console.log(data);
+ *  }}
+ *  onSelected={(selectedQuotes) => {
+ *    console.log(selectedQuotes);
+ *  }} />
+ * </DialogSendingMail>
+ *
+ * @param props - The props of the component
+ */
 export var DialogSendingMailMultiple = function (props) {
-    var data = props.data, onSelected = props.onSelected, onSubmit = props.onSubmit, rest = __rest(props, ["data", "onSelected", "onSubmit"]);
+    var data = props.data, onSelected = props.onSelected, onSubmit = props.onSubmit, onPreviewAttachment = props.onPreviewAttachment, rest = __rest(props, ["data", "onSelected", "onSubmit", "onPreviewAttachment"]);
     var _a = useState(false), isSelectAll = _a[0], setIsSelectAll = _a[1];
     var _b = useState(data), remainingQuotes = _b[0], setRemainingQuotes = _b[1];
     var _c = useState([]), selectedQuotes = _c[0], setSelectedQuotes = _c[1];
@@ -92,6 +116,10 @@ export var DialogSendingMailMultiple = function (props) {
             setSelectedQuotes(remainingQuotes.map(function (quote) { return quote.id; }));
         }
     };
+    /**
+     * Get the remaining quotes filtered by the selected quotes
+     */
+    var remainingQuotesFiltered = useMemo(function () { return remainingQuotes.filter(function (quote) { return selectedQuotes.includes(quote.id); }); }, [remainingQuotes, selectedQuotes]);
     useEffect(function () {
         // Select all quotes by default
         setSelectedQuotes(data.map(function (quote) { return quote.id; }));
@@ -104,11 +132,9 @@ export var DialogSendingMailMultiple = function (props) {
             setSelectedQuotes([remainingQuotes[0].id]);
         }
     }, [selectedQuotes, remainingQuotes]);
-    return (_jsxs("div", { children: [_jsxs("div", { className: "selected-quotes", children: [_jsx("div", { className: "selected-quotes__list", children: remainingQuotes.map(function (item) { return (_jsx(SelectedValue, { value: item.name, color: selectedQuotes.includes(item.id) ? 'accent' : 'neutral', onSelect: function () { return handleSelect(item.id); }, onRemove: function () { return handleRemove(item.id); } }, item.id)); }) }), _jsx("div", { children: _jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll || remainingQuotes.length === 1, disabled: remainingQuotes.length === 1, onChange: function () { return handleSelectAll(); }, labelPosition: "leading" }) })] }), _jsx(DialogSendingMailContent, __assign({}, rest, { onSubmit: function (data) {
+    return (_jsxs("div", { children: [_jsxs("div", { className: "selected-quotes", children: [_jsx("div", { className: "selected-quotes__list", children: remainingQuotes.map(function (item) { return (_jsx(SelectedValue, { value: item.name, color: selectedQuotes.includes(item.id) ? 'accent' : 'neutral', onSelect: function () { return handleSelect(item.id); }, onRemove: function () { return handleRemove(item.id); } }, item.id)); }) }), _jsx("div", { children: _jsx(Checkbox, { label: "Select all quotations", checked: isSelectAll || remainingQuotes.length === 1, disabled: remainingQuotes.length === 1, onChange: function () { return handleSelectAll(); }, labelPosition: "leading" }) })] }), _jsx(DialogSendingMailContent, __assign({}, rest, { onPreviewAttachment: function () { return onPreviewAttachment === null || onPreviewAttachment === void 0 ? void 0 : onPreviewAttachment(remainingQuotesFiltered); }, onSubmit: function (data) {
                     return onSubmit({
-                        selectedQuotes: remainingQuotes.filter(function (quote) {
-                            return selectedQuotes.includes(quote.id);
-                        }),
+                        selectedQuotes: remainingQuotesFiltered,
                         formData: data,
                     });
                 } }))] }));

package/dist/components/organisms/DialogSendingMail/index.d.ts

@@ -2,3 +2,4 @@ export * from './DialogSendingMail';
 export * from './sending-mail-schema';
 export type { DialogSendingMailProps } from './DialogSendingMail';
 export type { DialogSendingMailContentProps } from './DialogSendingMailContent';
+export type { DialogSendingMailMultipleProps } from './DialogSendingMailMultiple/DialogSendingMailMultiple';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import './QuoteHeader.css';
 export interface QuoteHeaderProps {
     /** Current tab */
@@ -9,4 +8,7 @@ export interface QuoteHeaderProps {
     onNewQuote: () => void;
     onFilterChange: (filter: 'date' | 'clientType' | 'fileStatus', value: string) => void;
 }
-export declare const QuoteHeader: React.FC<QuoteHeaderProps>;
+export declare const QuoteHeader: {
+    (props: QuoteHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/organisms/QuoteHeader/QuoteHeader.js

@@ -28,3 +28,4 @@ export var QuoteHeader = function (props) {
                         } }, key));
                 }) })] }));
 };
+QuoteHeader.displayName = 'QuoteHeader';

package/dist/index.d.ts

@@ -54,7 +54,9 @@ export * from './components/organisms/DialogBookingAddItem';
 export * from './components/organisms/DialogBookingConfirm';
 export * from './components/organisms/DialogCancelService';
 export { DialogComparison } from './components/organisms/DialogComparison/DialogComparison';
+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 { default as Docket } from './components/organisms/Docket/Docket';
 export { Footer } from './components/organisms/Footer/Footer';
@@ -115,6 +117,7 @@ export type { ToastProps } from './components/molecules/Toast/Toast';
 export type { TransferDocketProps } from './components/molecules/TransferDocket/TransferDocket';
 export type { ComparisonData, DialogComparisonProps, MultiComparisonData, } from './components/organisms/DialogComparison/DialogComparison';
 export type { DialogDeleteConfirmProps } from './components/organisms/DialogDeleteConfirm/DialogDeleteConfirm';
+export type { DialogQuoteRenameProps } from './components/organisms/DialogQuoteRename/DialogQuoteRename';
 export type { SelectedQuote } from './components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple';
 export type { QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
 export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';

package/dist/index.js

@@ -57,7 +57,9 @@ export * from './components/organisms/DialogBookingAddItem';
 export * from './components/organisms/DialogBookingConfirm';
 export * from './components/organisms/DialogCancelService';
 export { DialogComparison } from './components/organisms/DialogComparison/DialogComparison';
+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 { default as Docket } from './components/organisms/Docket/Docket';
 export { Footer } from './components/organisms/Footer/Footer';

package/package.json

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

package/src/components/molecules/DialogContentPolicy/DialogCancellationAccom.tsx

@@ -46,8 +46,8 @@ export const DialogCancellationAccom: React.FC<DialogCancellationAccomProps> = (
                 </TextWithIcon>
                 <Text size="sm">{room.RoomName}</Text>
               </div>
-              {room.cancellation_policy.map((policy) => (
-                <Fragment key={`policy-${index}`}>
+              {room.cancellation_policy.map((policy, pIndex) => (
+                <Fragment key={`policy-${pIndex}`}>
                   <Chip type="outline" color="brand" isBlackText>
                     Policy period applies{' '}
                     <DateDisplay

package/src/components/organisms/DialogBookingAddItem/AddItemNewService.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Checkbox from '../../atoms/Checkbox/Checkbox';
 import { Text } from '../../atoms/Typography/Typography';
@@ -50,6 +50,12 @@ export const AddItemNewService: React.FC<AddItemNewServiceProps> = (props) => {
     [selectedClients]
   );
 
+  useEffect(() => {
+    if (!!date) {
+      setDates(date);
+    }
+  }, [date]);
+
   return (
     <div className="space-y-9">
       <div className="flex sm:items-center gap-4 flex-col sm:flex-row">

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirm.tsx

@@ -1,32 +1,27 @@
 import React from 'react';
-import Button, { ButtonProps } from '../../atoms/Button/Button';
 import { Text } from '../../atoms/Typography/Typography';
 import { DialogBookingConfirm } from '../DialogBookingConfirm';
+import { DialogDeleteConfirmMultiple } from './DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple';
+import { DialogDeleteConfirmWrapper } from './DialogDeleteConfirmWrapper';
 
 export interface DialogDeleteConfirmProps {
   open: boolean;
   setOpen: (open: boolean) => void;
-  message: string;
   title: string;
-  cancelText?: string;
-  okText?: string;
-  okVariant?: ButtonProps['variant'];
-  onOk?: () => void;
-  onCancel?: () => void;
+  children?: React.ReactNode;
 }
 
-export const DialogDeleteConfirm: React.FC<DialogDeleteConfirmProps> = (props) => {
-  const {
-    open,
-    setOpen,
-    message,
-    title,
-    cancelText = 'Cancel',
-    okText = 'Delete',
-    okVariant = 'destructive',
-    onOk,
-    onCancel,
-  } = props;
+const DialogDeleteConfirmText = (props: { children: React.ReactNode }) => {
+  const { children } = props;
+  return (
+    <Text variant="medium" size="sm" leading="4">
+      {children}
+    </Text>
+  );
+};
+
+export const DialogDeleteConfirm = (props: DialogDeleteConfirmProps) => {
+  const { open, title, children, setOpen } = props;
   return (
     <DialogBookingConfirm
       open={open}
@@ -34,24 +29,11 @@ export const DialogDeleteConfirm: React.FC<DialogDeleteConfirmProps> = (props) =
       title={title}
       className="!max-w-[500px]"
       closeOnOverlayClick>
-      <div className="space-y-9">
-        <Text variant="medium" size="sm" leading="4">
-          <span dangerouslySetInnerHTML={{ __html: message }} />
-        </Text>
-        <div className="grid grid-cols-2 gap-x-4">
-          <Button
-            variant="outline-secondary"
-            onClick={() => {
-              setOpen(false);
-              onCancel?.();
-            }}>
-            {cancelText}
-          </Button>
-          <Button variant={okVariant} onClick={onOk}>
-            {okText}
-          </Button>
-        </div>
-      </div>
+      {children}
     </DialogBookingConfirm>
   );
 };
+
+DialogDeleteConfirm.Text = DialogDeleteConfirmText;
+DialogDeleteConfirm.Wrapper = DialogDeleteConfirmWrapper;
+DialogDeleteConfirm.Multiple = DialogDeleteConfirmMultiple;

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.css

@@ -0,0 +1,20 @@
+.confirm-multiple {
+  @apply space-y-5;
+  .checkbox-container {
+    @apply flex;
+  }
+  .checkbox-label {
+    @apply justify-between;
+  }
+
+  ul label > span {
+    font-weight: var(--font-weight-font-medium);
+  }
+}
+
+.confirm-multiple__all {
+  label > span {
+    font-size: var(--font-size-text-base);
+    font-weight: var(--font-weight-font-bold);
+  }
+}

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.tsx

@@ -0,0 +1,84 @@
+import Toast from '@/src/components/molecules/Toast';
+import React, { useEffect, useState } from 'react';
+import Checkbox from '../../../atoms/Checkbox/Checkbox';
+import { DialogDeleteConfirm } from '../DialogDeleteConfirm';
+import './DialogDeleteConfirmMultiple.css';
+
+export interface AvailableQuote {
+  id: string;
+  name: string;
+}
+
+export interface DialogDeleteConfirmMultipleProps {
+  onCancel?: () => void;
+  onDelete?: (selectedQuotes: string[]) => void;
+  quotes: AvailableQuote[];
+}
+
+export const DialogDeleteConfirmMultiple: React.FC<DialogDeleteConfirmMultipleProps> = (
+  props
+) => {
+  const { quotes, onCancel, onDelete } = props;
+
+  const [selectedQuotes, setSelectedQuotes] = useState<string[]>([]);
+  const [isSelectAll, setIsSelectAll] = useState(false);
+
+  const handleSelectQuote = (quote: AvailableQuote) => {
+    setSelectedQuotes((prev) => {
+      if (prev.includes(quote.id)) {
+        return prev.filter((id) => id !== quote.id);
+      }
+      return [...prev, quote.id];
+    });
+  };
+
+  const handleSelectAllQuotes = () => {
+    setIsSelectAll(!isSelectAll);
+    if (isSelectAll) {
+      setSelectedQuotes([]);
+    } else {
+      setSelectedQuotes(quotes.map((quote) => quote.id));
+    }
+  };
+
+  const handleDeleteQuotes = () => {
+    onDelete?.(selectedQuotes);
+  };
+
+  useEffect(() => {
+    setIsSelectAll(selectedQuotes.length === quotes.length);
+  }, [selectedQuotes, quotes]);
+
+  return (
+    <DialogDeleteConfirm.Wrapper onCancel={onCancel} onOk={handleDeleteQuotes}>
+      <div className="confirm-multiple">
+        <Checkbox
+          label="Select all quotations"
+          checked={isSelectAll}
+          onChange={handleSelectAllQuotes}
+          labelPosition="leading"
+          className="confirm-multiple__all"
+        />
+        <ul className="mb-1">
+          {quotes.map((quote) => (
+            <li key={quote.id}>
+              <Checkbox
+                label={quote.name}
+                checked={selectedQuotes.includes(quote.id)}
+                onChange={() => handleSelectQuote(quote)}
+                labelPosition="leading"
+              />
+            </li>
+          ))}
+        </ul>
+        {isSelectAll && (
+          <Toast
+            text="Caution: This would delete all quotations created."
+            type="warning"
+            showIcon={false}
+          />
+        )}
+      </div>
+    </DialogDeleteConfirm.Wrapper>
+  );
+};

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.tsx

@@ -0,0 +1,34 @@
+import Button, { ButtonProps } from '../../atoms/Button/Button';
+
+export interface DialogDeleteConfirmWrapperProps {
+  onCancel?: () => void;
+  cancelText?: string;
+  okVariant?: ButtonProps['variant'];
+  onOk?: () => void;
+  okText?: string;
+  children: React.ReactNode;
+}
+
+export const DialogDeleteConfirmWrapper = (props: DialogDeleteConfirmWrapperProps) => {
+  const {
+    onCancel,
+    cancelText = 'Cancel',
+    okVariant = 'destructive',
+    onOk,
+    okText = 'Delete',
+    children,
+  } = props;
+  return (
+    <div className="space-y-9">
+      {children}
+      <div className="grid grid-cols-2 gap-x-4">
+        <Button variant="outline-secondary" onClick={onCancel} size="sm">
+          {cancelText}
+        </Button>
+        <Button variant={okVariant} onClick={onOk} size="sm">
+          {okText}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/organisms/DialogDeleteConfirm/index.ts

@@ -0,0 +1,4 @@
+export * from './DialogDeleteConfirm';
+
+export type { DialogDeleteConfirmMultipleProps } from './DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple';
+export type { DialogDeleteConfirmWrapperProps } from './DialogDeleteConfirmWrapper';

package/src/components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple.tsx

@@ -1,6 +1,6 @@
 import Checkbox from '@/src/components/atoms/Checkbox/Checkbox';
 import SelectedValue from '@/src/components/atoms/SelectedValue/SelectedValue';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   DialogSendingMailContent,
   DialogSendingMailContentProps,
@@ -15,20 +15,52 @@ export interface SelectedQuote {
 
 export interface DialogSendingMailMultipleProps extends Omit<
   DialogSendingMailContentProps,
-  'onSubmit'
+  'onSubmit' | 'onPreviewAttachment'
 > {
+  /** Default data of the quotes */
   data: SelectedQuote[];
+
+  /** Function to call when a quote is selected */
   onSelected?: (selectedQuotes: SelectedQuote[]) => void;
+
+  /** Function to call when the form is submitted */
   onSubmit: (payload: {
     selectedQuotes: SelectedQuote[];
     formData: SendingMailSchema;
   }) => void;
+
+  /** Function to call when the preview attachment is clicked */
+  onPreviewAttachment?: (selectedQuotes: SelectedQuote[]) => void;
 }
 
+/**
+ * Props for the DialogSendingMailMultiple component
+ *
+ * @example
+ * <DialogSendingMail>
+ *  <DialogSendingMail.MultipleQuotes
+ *  data={[
+ *    { id: '1', name: 'Quote 1' },
+ *    { id: '2', name: 'Quote 2' },
+ *    { id: '3', name: 'Quote 3' },
+ *  ]}
+ *  onPreviewAttachment={() => {
+ *    console.log('Preview attachment');
+ *  }}
+ *  onSubmit={(data) => {
+ *    console.log(data);
+ *  }}
+ *  onSelected={(selectedQuotes) => {
+ *    console.log(selectedQuotes);
+ *  }} />
+ * </DialogSendingMail>
+ *
+ * @param props - The props of the component
+ */
 export const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps> = (
   props
 ) => {
-  const { data, onSelected, onSubmit, ...rest } = props;
+  const { data, onSelected, onSubmit, onPreviewAttachment, ...rest } = props;
 
   const [isSelectAll, setIsSelectAll] = useState(false);
   const [remainingQuotes, setRemainingQuotes] = useState<SelectedQuote[]>(data);
@@ -88,6 +120,14 @@ export const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps>
     }
   };
 
+  /**
+   * Get the remaining quotes filtered by the selected quotes
+   */
+  const remainingQuotesFiltered = useMemo(
+    () => remainingQuotes.filter((quote) => selectedQuotes.includes(quote.id)),
+    [remainingQuotes, selectedQuotes]
+  );
+
   useEffect(() => {
     // Select all quotes by default
     setSelectedQuotes(data.map((quote) => quote.id));
@@ -129,11 +169,10 @@ export const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps>
       </div>
       <DialogSendingMailContent
         {...rest}
+        onPreviewAttachment={() => onPreviewAttachment?.(remainingQuotesFiltered)}
         onSubmit={(data) =>
           onSubmit({
-            selectedQuotes: remainingQuotes.filter((quote) =>
-              selectedQuotes.includes(quote.id)
-            ),
+            selectedQuotes: remainingQuotesFiltered,
             formData: data,
           })
         }

package/src/components/organisms/DialogSendingMail/index.ts

@@ -3,3 +3,4 @@ export * from './sending-mail-schema';
 
 export type { DialogSendingMailProps } from './DialogSendingMail';
 export type { DialogSendingMailContentProps } from './DialogSendingMailContent';
+export type { DialogSendingMailMultipleProps } from './DialogSendingMailMultiple/DialogSendingMailMultiple';

package/src/components/organisms/QuoteHeader/QuoteHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from '../../atoms/Button/Button';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -38,7 +37,7 @@ const filterConfig = {
   },
 };
 
-export const QuoteHeader: React.FC<QuoteHeaderProps> = (props) => {
+export const QuoteHeader = (props: QuoteHeaderProps) => {
   const { current = 'quotation', onNavigate, onNewQuote, onFilterChange } = props;
 
   return (
@@ -91,3 +90,5 @@ export const QuoteHeader: React.FC<QuoteHeaderProps> = (props) => {
     </div>
   );
 };
+
+QuoteHeader.displayName = 'QuoteHeader';