mautourco-components 0.2.32 → 0.2.33

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DialogSendingMailContentProps } from '../DialogSendingMailContent';
+import { SendingMailSchema } from '../sending-mail-schema';
+import './DialogSendingMailMultiple.css';
+export interface SelectedQuote {
+    id: string;
+    name: string;
+}
+export interface DialogSendingMailMultipleProps extends Omit<DialogSendingMailContentProps, 'onSubmit'> {
+    data: SelectedQuote[];
+    onSelected?: (selectedQuotes: SelectedQuote[]) => void;
+    onSubmit: (payload: {
+        selectedQuotes: SelectedQuote[];
+        formData: SendingMailSchema;
+    }) => void;
+}
+export declare const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps>;

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

@@ -0,0 +1,112 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 Checkbox from '../../../atoms/Checkbox/Checkbox';
+import SelectedValue from '../../../atoms/SelectedValue/SelectedValue';
+import { useEffect, useState } from 'react';
+import { DialogSendingMailContent, } from '../DialogSendingMailContent';
+import './DialogSendingMailMultiple.css';
+export var DialogSendingMailMultiple = function (props) {
+    var data = props.data, onSelected = props.onSelected, onSubmit = props.onSubmit, rest = __rest(props, ["data", "onSelected", "onSubmit"]);
+    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];
+    /**
+     * Handle remove a quote
+     *
+     * @param id - The id of the quote to remove
+     * @description If the quote is already selected, deselect it
+     * If the quote is not selected, select it
+     * If there is only one quote, select it by default
+     */
+    var handleRemove = function (id) {
+        if (remainingQuotes.length > 1) {
+            setRemainingQuotes(remainingQuotes.filter(function (quote) { return quote.id !== id; }));
+            setSelectedQuotes(selectedQuotes.filter(function (quoteId) { return quoteId !== id; }));
+        }
+    };
+    /**
+     * Handle select a quote
+     *
+     * @param id - The id of the quote to select
+     * @description If the quote is already selected, deselect it
+     * If the quote is not selected, select it
+     * If there is only one quote, select it by default
+     */
+    var handleSelect = function (id) {
+        if (remainingQuotes.length > 1) {
+            setSelectedQuotes(function (prev) {
+                if (prev.includes(id)) {
+                    return prev.filter(function (quoteId) { return quoteId !== id; });
+                }
+                return __spreadArray(__spreadArray([], prev, true), [id], false);
+            });
+        }
+    };
+    /**
+     * Handle select all quotes
+     *
+     * @description If select all is checked, select the first quote
+     * If select all is unchecked, select all quotes
+     * If there is only one quote, select it by default
+     */
+    var handleSelectAll = function () {
+        setIsSelectAll(!isSelectAll);
+        // If select all is checked, select the first quote
+        if (isSelectAll) {
+            setSelectedQuotes([data[0].id]);
+        }
+        else {
+            setSelectedQuotes(remainingQuotes.map(function (quote) { return quote.id; }));
+        }
+    };
+    useEffect(function () {
+        // Select all quotes by default
+        setSelectedQuotes(data.map(function (quote) { return quote.id; }));
+    }, [data]);
+    useEffect(function () {
+        // Set the select all state based on the selected quotes and remaining quotes
+        setIsSelectAll(selectedQuotes.length === remainingQuotes.length);
+        // If there is only one quote, select it by default
+        if (remainingQuotes.length === 1) {
+            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 onSubmit({
+                        selectedQuotes: remainingQuotes.filter(function (quote) {
+                            return selectedQuotes.includes(quote.id);
+                        }),
+                        formData: data,
+                    });
+                } }))] }));
+};

package/dist/index.d.ts

@@ -115,6 +115,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 { SelectedQuote } from './components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple';
 export type { QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
 export type { TimelineProps, TimelineServices, } from './components/organisms/Timeline/Timeline';
 export type { AccomodationDocket as AccomodationDocketType, ExcursionDocket as ExcursionDocketType, OtherServiceDocket as OtherServiceDocketType, ServiceDocket as ServiceDocketType, TransferDocket as TransferDocketType, } from './types/docket/services.types';

package/dist/styles/components/selected-value.css

@@ -2083,8 +2083,6 @@
   padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x);
   border-radius: var(--chip-border-radius-pill, 1.375rem);
   /* Typography is now handled by the Text component */
-  background: var(--color-atoll-green-800);
-  color: var(--color-white);
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
@@ -2139,21 +2137,35 @@
 /* Size variants */
 
 .selected-value--xs {
-  padding: var(--chip-spacing-xs-padding-y, 0.25rem) var(--chip-spacing-xs-padding-x, 0.5rem);
+  padding: var(--chip-spacing-xs-padding-y, 0.25rem)
+    var(--chip-spacing-xs-padding-x, 0.5rem);
   gap: var(--chip-spacing-xs-gap, 0.25rem);
 }
 
 .selected-value--sm {
-  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x, 0.75rem);
+  padding: var(--chip-spacing-sm-padding-y, 0.375rem)
+    var(--chip-spacing-sm-padding-x, 0.75rem);
   gap: var(--chip-spacing-sm-gap, 0.375rem);
 }
 
 .selected-value--md {
-  padding: var(--chip-spacing-md-padding-y, 0.5rem) var(--chip-spacing-md-padding-x, 0.875rem);
+  padding: var(--chip-spacing-md-padding-y, 0.5rem)
+    var(--chip-spacing-md-padding-x, 0.875rem);
   gap: var(--chip-spacing-md-gap, 0.5rem);
 }
 
 .selected-value--lg {
-  padding: var(--chip-spacing-lg-padding-y, 0.625rem) var(--chip-spacing-lg-padding-x, 1rem);
+  padding: var(--chip-spacing-lg-padding-y, 0.625rem)
+    var(--chip-spacing-lg-padding-x, 1rem);
   gap: var(--chip-spacing-lg-gap, 0.625rem);
 }
+
+.selected-value--accent {
+  background: var(--color-atoll-green-800);
+  color: var(--color-white);
+}
+
+.selected-value--neutral {
+  background: var(--chip-color-neutral-filled-background);
+  color: var(--chip-color-neutral-filled-foreground);
+}

package/package.json

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

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -13,6 +13,7 @@ export interface InputProps {
   icon?: IconName;
   iconPosition?: 'leading' | 'trailing';
   type?: HTMLInputTypeAttribute;
+  id?: string;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -27,6 +28,7 @@ const Input: React.FC<InputProps> = ({
   icon,
   iconPosition = 'trailing',
   type = 'text',
+  id,
 }) => {
   const baseClasses = 'input-field';
   const variantClasses = {
@@ -48,6 +50,7 @@ const Input: React.FC<InputProps> = ({
         </span>
       )}
       <input
+        id={id}
         type={type}
         className={inputClasses}
         placeholder={placeholder}

package/src/components/atoms/SelectedValue/SelectedValue.tsx

@@ -4,20 +4,24 @@ import { Text } from '../Typography/Typography';
 
 interface SelectedValueProps {
   value: string;
-  onRemove?: () => void;
   className?: string;
   iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   size?: 'xs' | 'sm' | 'md' | 'lg';
   variant?: 'filled' | 'text';
+  color?: 'accent' | 'neutral';
+  onRemove?: () => void;
+  onSelect?: () => void;
 }
 
 const SelectedValue: React.FC<SelectedValueProps> = ({
   value,
-  onRemove,
   className = '',
   iconSize = 'xs',
   size = 'md',
   variant = 'filled',
+  color = 'accent',
+  onRemove,
+  onSelect,
 }) => {
   const handleRemove = (event: React.MouseEvent) => {
     event.stopPropagation();
@@ -26,20 +30,20 @@ const SelectedValue: React.FC<SelectedValueProps> = ({
     }
   };
 
-  const classes = `selected-value selected-value--${size} selected-value--${variant} ${className}`.trim();
+  const classes =
+    `selected-value selected-value--${size} selected-value--${color} selected-value--${variant} ${className} ${onSelect ? 'cursor-pointer' : ''}`.trim();
 
   const getTextSize = () => {
     return size; // Utilise directement la taille passée en prop
   };
 
   return (
-    <div className={classes}>
-      <Text 
-        size={getTextSize() as any} 
-        variant="medium" 
-        leading="4" 
-        className="selected-value__text"
-      >
+    <div className={classes} onClick={onSelect}>
+      <Text
+        size={getTextSize() as any}
+        variant="medium"
+        leading="4"
+        className="selected-value__text">
         {value}
       </Text>
       {variant !== 'text' && onRemove && (
@@ -47,8 +51,7 @@ const SelectedValue: React.FC<SelectedValueProps> = ({
           type="button"
           className="selected-value__remove"
           onClick={handleRemove}
-          aria-label={`Remove ${value}`}
-        >
+          aria-label={`Remove ${value}`}>
           <Icon name="close" size={iconSize} className="selected-value__remove-icon" />
         </button>
       )}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DialogBookingConfirm } from '../DialogBookingConfirm';
 import { DialogSendingMailContent } from './DialogSendingMailContent';
+import { DialogSendingMailMultiple } from './DialogSendingMailMultiple/DialogSendingMailMultiple';
 
 export interface DialogSendingMailProps {
   open: boolean;
@@ -24,4 +25,5 @@ export const DialogSendingMail = (props: DialogSendingMailProps) => {
   );
 };
 
-DialogSendingMail.Content = DialogSendingMailContent;
+DialogSendingMail.SingleQuote = DialogSendingMailContent;
+DialogSendingMail.MultipleQuotes = DialogSendingMailMultiple;

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

@@ -0,0 +1,7 @@
+.selected-quotes {
+  @apply flex justify-between items-center mb-8;
+}
+
+.selected-quotes__list {
+  @apply flex gap-x-2;
+}

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

@@ -0,0 +1,140 @@
+import Checkbox from '@/src/components/atoms/Checkbox/Checkbox';
+import SelectedValue from '@/src/components/atoms/SelectedValue/SelectedValue';
+import React, { useEffect, useState } from 'react';
+import {
+  DialogSendingMailContent,
+  DialogSendingMailContentProps,
+} from '../DialogSendingMailContent';
+import { SendingMailSchema } from '../sending-mail-schema';
+import './DialogSendingMailMultiple.css';
+
+export interface SelectedQuote {
+  id: string;
+  name: string;
+}
+
+export interface DialogSendingMailMultipleProps extends Omit<
+  DialogSendingMailContentProps,
+  'onSubmit'
+> {
+  data: SelectedQuote[];
+  onSelected?: (selectedQuotes: SelectedQuote[]) => void;
+  onSubmit: (payload: {
+    selectedQuotes: SelectedQuote[];
+    formData: SendingMailSchema;
+  }) => void;
+}
+
+export const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps> = (
+  props
+) => {
+  const { data, onSelected, onSubmit, ...rest } = props;
+
+  const [isSelectAll, setIsSelectAll] = useState(false);
+  const [remainingQuotes, setRemainingQuotes] = useState<SelectedQuote[]>(data);
+  const [selectedQuotes, setSelectedQuotes] = useState<string[]>([]);
+
+  /**
+   * Handle remove a quote
+   *
+   * @param id - The id of the quote to remove
+   * @description If the quote is already selected, deselect it
+   * If the quote is not selected, select it
+   * If there is only one quote, select it by default
+   */
+  const handleRemove = (id: string) => {
+    if (remainingQuotes.length > 1) {
+      setRemainingQuotes(remainingQuotes.filter((quote) => quote.id !== id));
+      setSelectedQuotes(selectedQuotes.filter((quoteId) => quoteId !== id));
+    }
+  };
+
+  /**
+   * Handle select a quote
+   *
+   * @param id - The id of the quote to select
+   * @description If the quote is already selected, deselect it
+   * If the quote is not selected, select it
+   * If there is only one quote, select it by default
+   */
+  const handleSelect = (id: string) => {
+    if (remainingQuotes.length > 1) {
+      setSelectedQuotes((prev) => {
+        if (prev.includes(id)) {
+          return prev.filter((quoteId) => quoteId !== id);
+        }
+        return [...prev, id];
+      });
+    }
+  };
+
+  /**
+   * Handle select all quotes
+   *
+   * @description If select all is checked, select the first quote
+   * If select all is unchecked, select all quotes
+   * If there is only one quote, select it by default
+   */
+  const handleSelectAll = () => {
+    setIsSelectAll(!isSelectAll);
+    // If select all is checked, select the first quote
+    if (isSelectAll) {
+      setSelectedQuotes([data[0].id]);
+    } else {
+      setSelectedQuotes(remainingQuotes.map((quote) => quote.id));
+    }
+  };
+
+  useEffect(() => {
+    // Select all quotes by default
+    setSelectedQuotes(data.map((quote) => quote.id));
+  }, [data]);
+
+  useEffect(() => {
+    // Set the select all state based on the selected quotes and remaining quotes
+    setIsSelectAll(selectedQuotes.length === remainingQuotes.length);
+
+    // If there is only one quote, select it by default
+    if (remainingQuotes.length === 1) {
+      setSelectedQuotes([remainingQuotes[0].id]);
+    }
+  }, [selectedQuotes, remainingQuotes]);
+
+  return (
+    <div>
+      <div className="selected-quotes">
+        <div className="selected-quotes__list">
+          {remainingQuotes.map((item) => (
+            <SelectedValue
+              key={item.id}
+              value={item.name}
+              color={selectedQuotes.includes(item.id) ? 'accent' : 'neutral'}
+              onSelect={() => handleSelect(item.id)}
+              onRemove={() => handleRemove(item.id)}
+            />
+          ))}
+        </div>
+        <div>
+          <Checkbox
+            label="Select all quotations"
+            checked={isSelectAll || remainingQuotes.length === 1}
+            disabled={remainingQuotes.length === 1}
+            onChange={() => handleSelectAll()}
+            labelPosition="leading"
+          />
+        </div>
+      </div>
+      <DialogSendingMailContent
+        {...rest}
+        onSubmit={(data) =>
+          onSubmit({
+            selectedQuotes: remainingQuotes.filter((quote) =>
+              selectedQuotes.includes(quote.id)
+            ),
+            formData: data,
+          })
+        }
+      />
+    </div>
+  );
+};

package/src/styles/components/selected-value.css

@@ -6,8 +6,6 @@
   padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x);
   border-radius: var(--chip-border-radius-pill, 1.375rem);
   /* Typography is now handled by the Text component */
-  background: var(--color-atoll-green-800);
-  color: var(--color-white);
   cursor: default;
   user-select: none;
   max-width: 200px;
@@ -59,22 +57,35 @@
 
 /* Size variants */
 .selected-value--xs {
-  padding: var(--chip-spacing-xs-padding-y, 0.25rem) var(--chip-spacing-xs-padding-x, 0.5rem);
+  padding: var(--chip-spacing-xs-padding-y, 0.25rem)
+    var(--chip-spacing-xs-padding-x, 0.5rem);
   gap: var(--chip-spacing-xs-gap, 0.25rem);
 }
 
 .selected-value--sm {
-  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x, 0.75rem);
+  padding: var(--chip-spacing-sm-padding-y, 0.375rem)
+    var(--chip-spacing-sm-padding-x, 0.75rem);
   gap: var(--chip-spacing-sm-gap, 0.375rem);
 }
 
 .selected-value--md {
-  padding: var(--chip-spacing-md-padding-y, 0.5rem) var(--chip-spacing-md-padding-x, 0.875rem);
+  padding: var(--chip-spacing-md-padding-y, 0.5rem)
+    var(--chip-spacing-md-padding-x, 0.875rem);
   gap: var(--chip-spacing-md-gap, 0.5rem);
 }
 
 .selected-value--lg {
-  padding: var(--chip-spacing-lg-padding-y, 0.625rem) var(--chip-spacing-lg-padding-x, 1rem);
+  padding: var(--chip-spacing-lg-padding-y, 0.625rem)
+    var(--chip-spacing-lg-padding-x, 1rem);
   gap: var(--chip-spacing-lg-gap, 0.625rem);
 }
 
+.selected-value--accent {
+  background: var(--color-atoll-green-800);
+  color: var(--color-white);
+}
+
+.selected-value--neutral {
+  background: var(--chip-color-neutral-filled-background);
+  color: var(--chip-color-neutral-filled-foreground);
+}