mautourco-components 0.2.13 → 0.2.15

package/package.json

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

package/src/components/atoms/Icon/icons/PlusCircleIcon.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface PlusCircleIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+  /**
+   * Couleur par défaut si aucune couleur n'est spécifiée
+   */
+  defaultColor?: string;
+}
+
+const PlusCircleIcon: React.FC<PlusCircleIconProps> = ({
+  size = 'md',
+  className = '',
+  color,
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'w-3 h-3';
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      case 'xl':
+        return 'w-8 h-8';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_7074_66340)">
+        <path
+          d="M13.915 8.00098C13.915 4.7334 11.2666 2.08416 7.99902 2.08398C4.73134 2.08398 2.08203 4.73329 2.08203 8.00098C2.08221 11.2685 4.73145 13.917 7.99902 13.917C11.2664 13.9168 13.9149 11.2684 13.915 8.00098ZM7.24902 10.667V8.75098H5.33203C4.91793 8.75098 4.58221 8.41504 4.58203 8.00098C4.58203 7.58676 4.91782 7.25098 5.33203 7.25098H7.24902V5.33398C7.24902 4.91977 7.58481 4.58398 7.99902 4.58398C8.41309 4.58416 8.74902 4.91988 8.74902 5.33398V7.25098H10.665L10.7422 7.25488C11.1203 7.29337 11.415 7.61271 11.415 8.00098C11.4149 8.38912 11.1202 8.70862 10.7422 8.74707L10.665 8.75098H8.74902V10.667C8.74902 11.0811 8.41309 11.4168 7.99902 11.417C7.58481 11.417 7.24902 11.0812 7.24902 10.667ZM15.415 8.00098C15.4149 12.0968 12.0949 15.4168 7.99902 15.417C3.90302 15.417 0.582208 12.0969 0.582031 8.00098C0.582031 3.90487 3.90291 0.583984 7.99902 0.583984C12.095 0.584161 15.415 3.90497 15.415 8.00098Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7074_66340">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default PlusCircleIcon;

package/src/components/atoms/Icon/icons/QuotationIcon.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface QuotationIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const QuotationIcon: React.FC<QuotationIconProps> = ({
+  size = 'md',
+  className = '',
+  color,
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'w-3 h-3';
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      case 'xl':
+        return 'w-8 h-8';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 22 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 16V17C10 17.3444 9.93703 17.6814 9.82422 18H19C19.2652 18 19.5195 17.8946 19.707 17.707C19.8946 17.5195 20 17.2652 20 17V16H10ZM14 9C14.5523 9 15 9.44771 15 10C15 10.5523 14.5523 11 14 11H9C8.44771 11 8 10.5523 8 10C8 9.44771 8.44771 9 9 9H14ZM14 5C14.5523 5 15 5.44772 15 6C15 6.55228 14.5523 7 14 7H9C8.44771 7 8 6.55228 8 6C8 5.44772 8.44771 5 9 5H14ZM4 3C4 2.73478 3.89457 2.4805 3.70703 2.29297C3.54289 2.12883 3.32763 2.02757 3.09863 2.00488L3 2C2.73478 2 2.4805 2.10543 2.29297 2.29297C2.10543 2.4805 2 2.73478 2 3V5H4V3ZM6 17L6.00488 17.0986C6.02757 17.3276 6.12883 17.5429 6.29297 17.707C6.48051 17.8946 6.73478 18 7 18C7.26522 18 7.51949 17.8946 7.70703 17.707C7.89457 17.5195 8 17.2652 8 17V16C8 15.4696 8.21087 14.961 8.58594 14.5859C8.96101 14.2109 9.46957 14 10 14H17V3C17 2.73478 16.8946 2.48051 16.707 2.29297C16.5195 2.10543 16.2652 2 16 2H5.82422C5.93703 2.31859 6 2.65558 6 3V17ZM19 14H20C20.5304 14 21.039 14.2109 21.4141 14.5859C21.7891 14.961 22 15.4696 22 16V17C22 17.7957 21.6837 18.5585 21.1211 19.1211C20.5585 19.6837 19.7957 20 19 20H7C6.20435 20 5.44151 19.6837 4.87891 19.1211C4.3163 18.5585 4 17.7957 4 17V7H2C1.46957 7 0.96101 6.78913 0.585938 6.41406C0.210865 6.03899 0 5.53043 0 5V3C0 2.20435 0.316297 1.44152 0.878906 0.878906C1.3711 0.386708 2.01649 0.0829076 2.70312 0.0146484L3 0H16C16.7957 0 17.5585 0.316297 18.1211 0.878906C18.6837 1.44151 19 2.20435 19 3V14Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default QuotationIcon;
+

package/src/components/atoms/Icon/icons/registry.tsx

@@ -35,7 +35,9 @@ import NightIcon from './NightIcon';
 import PlaneIcon from './PlaneIcon';
 import PlaneLandingOutlineIcon from './PlaneLandingOutlineIcon';
 import PlaneTakeoffOutlineIcon from './PlaneTakeoffOutlineIcon';
+import PlusCircleIcon from './PlusCircleIcon';
 import PlusIcon from './PlusIcon';
+import QuotationIcon from './QuotationIcon';
 import Search from './Search';
 import Settings from './Settings';
 import ShipIcon from './ShipIcon';
@@ -108,6 +110,7 @@ export const ICONS = {
   linkedin: LinkedInIcon as unknown as IconComponent,
   plus: PlusIcon as unknown as IconComponent,
   minus: MinusIcon as unknown as IconComponent,
+  quotation: QuotationIcon as unknown as IconComponent,
   home: HomeIcon as unknown as IconComponent,
   plane: PlaneIcon as unknown as IconComponent,
   ship: ShipIcon as unknown as IconComponent,
@@ -122,6 +125,7 @@ export const ICONS = {
   bus: BusIcon as unknown as IconComponent,
   map: MapIcon as unknown as IconComponent,
   wallet: WalletIcon as unknown as IconComponent,
+  'plus-circle': PlusCircleIcon as unknown as IconComponent,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof ICONS;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Icon from '../../Icon/Icon';
 import Spinner from '../../Spinner/Spinner';
 
@@ -19,12 +19,14 @@ const DropdownInput: React.FC<DropdownInputProps> = ({
   onClick,
   className = '',
   options = [],
-  onSelect
+  onSelect,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
   const handleClick = () => {
     if (state === 'disabled' || state === 'loading') return;
-    
+
     setIsOpen(!isOpen);
     onClick?.();
   };
@@ -54,36 +56,46 @@ const DropdownInput: React.FC<DropdownInputProps> = ({
     if (state === 'loading') {
       return <Spinner size="sm" className="dropdown-input__icon" />;
     }
-    
+
     return (
-      <Icon 
-        name={isOpen ? 'chevron-up' : 'chevron-down'} 
-        size="sm" 
-        className="dropdown-input__icon dropdown-input__icon--chevron" 
+      <Icon
+        name={isOpen ? 'chevron-up' : 'chevron-down'}
+        size="sm"
+        className="dropdown-input__icon dropdown-input__icon--chevron"
       />
     );
   };
 
-  const displayText = state === 'loading' ? 'Loading...' : (value || placeholder);
+  const displayText = state === 'loading' ? 'Loading...' : value || placeholder;
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
 
   return (
-    <div className={`dropdown-container ${className}`}>
-      <div 
-        className={`dropdown-input ${getStateClasses()}`}
-        onClick={handleClick}
-      >
+    <div ref={dropdownRef} className={`dropdown-container ${className}`}>
+      <div className={`dropdown-input ${getStateClasses()}`} onClick={handleClick}>
         <span className="dropdown-input__text">{displayText}</span>
         {getIcon()}
       </div>
-      
+
       {isOpen && options.length > 0 && (
         <div className="dropdown-menu">
           {options.map((option, index) => (
             <div
               key={index}
               className="dropdown-option"
-              onClick={() => handleOptionSelect(option)}
-            >
+              onClick={() => handleOptionSelect(option)}>
               {option}
             </div>
           ))}

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

@@ -12,3 +12,4 @@ export type {
 
 
 
+

package/src/components/organisms/MultipleQuotationDocket/MultipleQuotationDocket.tsx

@@ -0,0 +1,349 @@
+import React from 'react';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import Icon, { IconName } from '../../atoms/Icon/Icon';
+import { Heading, Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+import CardContainer from '../CardContainer/CardContainer';
+
+export type DocketServiceType =
+  | 'Accommodation'
+  | 'Transfer'
+  | 'Handling fee'
+  | 'Excursion'
+  | 'Other Services';
+
+export interface DocketDetailsData {
+  /** Service type */
+  type: DocketServiceType;
+  /** Service name/title */
+  serviceName?: string;
+  /** Price for this service */
+  price: string;
+  /** Currency for the price */
+  currency: string;
+  /** Start date */
+  startDate?: string;
+  /** End date */
+  endDate?: string;
+  /** Number of nights */
+  nights?: number;
+  /** Client type */
+  clientType?: string;
+  /** Adults count */
+  adults?: number;
+  /** Children details */
+  children?: Array<{ age: number }>;
+  /** Room type */
+  roomType?: string;
+  /** Meal plan */
+  mealPlan?: string;
+  /** Additional details to display */
+  details?: Array<{
+    icon: IconName;
+    label: string;
+    value: string;
+  }>;
+  /** Error message to display (e.g., "Please select your second room") */
+  errorMessage?: string;
+}
+
+export interface MultipleQuotationDocketProps {
+  /** Title of the quotation */
+  title?: string;
+  /** List of service details */
+  services: DocketDetailsData[];
+  /** Total prices in different currencies */
+  totalPrices: Array<{ currency: string; amount: string }>;
+  /** Callback when "More options" is clicked */
+  onMoreOptionsClick?: () => void;
+  /** Callback when "Add new quote" is clicked */
+  onAddNewQuoteClick?: () => void;
+  /** Callback when "View" is clicked */
+  onViewClick?: () => void;
+  /** Callback when "Save" is clicked */
+  onSaveClick?: () => void;
+  /** Callback when "Book now" is clicked */
+  onBookNowClick?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const getServiceIcon = (type: DocketServiceType): IconName => {
+  switch (type) {
+    case 'Accommodation':
+      return 'accom';
+    case 'Transfer':
+      return 'bus';
+    case 'Excursion':
+      return 'map-pin';
+    case 'Handling fee':
+      return 'wallet';
+    case 'Other Services':
+      return 'more';
+    default:
+      return 'more';
+  }
+};
+
+const DocketDetails: React.FC<{ data: DocketDetailsData }> = ({ data }) => {
+  const {
+    type,
+    serviceName,
+    startDate,
+    endDate,
+    nights,
+    clientType,
+    adults,
+    children,
+    roomType,
+    mealPlan,
+    details,
+    errorMessage,
+  } = data;
+  const icon = getServiceIcon(type);
+
+  return (
+    <div className="multiple-quotation-docket__details">
+      {errorMessage && (
+        <div className="multiple-quotation-docket__error">
+          <Text variant="bold" size="sm" color="state-error">
+            {errorMessage}
+          </Text>
+        </div>
+      )}
+
+      {serviceName && (
+        <div className="multiple-quotation-docket__service-name">
+          <Text variant="bold" size="base">
+            {serviceName}
+          </Text>
+        </div>
+      )}
+
+      {(startDate || endDate || nights) && (
+        <div className="multiple-quotation-docket__date-info">
+          {startDate && endDate && (
+            <div className="multiple-quotation-docket__date-range">
+              <TextWithIcon icon="calendar-range-outline" color="accent">
+                {startDate}
+              </TextWithIcon>
+              <Icon name="arrow-right-outline" size="sm" />
+              <TextWithIcon icon="calendar-range-outline" color="accent">
+                {endDate}
+              </TextWithIcon>
+            </div>
+          )}
+          {nights !== undefined && (
+            <TextWithIcon icon="night" color="subtle">
+              {nights} nights
+            </TextWithIcon>
+          )}
+        </div>
+      )}
+
+      {(clientType || adults || children) && (
+        <div className="multiple-quotation-docket__client-info">
+          {clientType && (
+            <div className="multiple-quotation-docket__client-type">
+              <Text variant="bold" size="sm" color="subtle">
+                Client type:
+              </Text>
+              <Text variant="medium" size="sm" color="subtle">
+                {clientType}
+              </Text>
+            </div>
+          )}
+
+          <div className="multiple-quotation-docket__guests">
+            {adults !== undefined && (
+              <TextWithIcon icon="user" color="subtle">
+                {adults} Adults
+              </TextWithIcon>
+            )}
+            {children && children.length > 0 && (
+              <div className="multiple-quotation-docket__children">
+                {children.map((child, index) => (
+                  <div key={index} className="multiple-quotation-docket__child">
+                    <TextWithIcon icon="user" color="subtle">
+                      <span>
+                        <span>1 Child </span>
+                        <span className="multiple-quotation-docket__child-age">
+                          ({child.age} y.o)
+                        </span>
+                      </span>
+                    </TextWithIcon>
+                    {index < children.length - 1 && (
+                      <div className="multiple-quotation-docket__divider" />
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {(roomType || mealPlan) && (
+        <div className="multiple-quotation-docket__room-info">
+          {roomType && (
+            <TextWithIcon icon="accom" color="subtle">
+              {roomType}
+            </TextWithIcon>
+          )}
+          {mealPlan && (
+            <div className="multiple-quotation-docket__meal-plan">
+              <TextWithIcon icon="utensils" color="subtle">
+                Meal-Plan
+              </TextWithIcon>
+              <div className="multiple-quotation-docket__divider" />
+              <Text variant="medium" size="sm" color="subtle">
+                {mealPlan}
+              </Text>
+            </div>
+          )}
+        </div>
+      )}
+
+      {details && details.length > 0 && (
+        <div className="multiple-quotation-docket__additional-details">
+          {details.map((detail, index) => (
+            <TextWithIcon key={index} icon={detail.icon} color="subtle">
+              {detail.label}: {detail.value}
+            </TextWithIcon>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const MultipleQuotationDocket: React.FC<MultipleQuotationDocketProps> = ({
+  title = 'Your quotation',
+  services,
+  totalPrices,
+  onMoreOptionsClick,
+  onAddNewQuoteClick,
+  onViewClick,
+  onSaveClick,
+  onBookNowClick,
+  className = '',
+}) => {
+  return (
+    <CardContainer spacing="chill" className={`multiple-quotation-docket ${className}`}>
+      {/* Header */}
+      <div className="multiple-quotation-docket__header">
+        <div className="multiple-quotation-docket__title">
+          <Icon name="quotation" size="lg" />
+          <Heading
+            level={4}
+            variant="bold"
+            className="multiple-quotation-docket__title-text">
+            {title}
+          </Heading>
+        </div>
+        {onMoreOptionsClick && (
+          <Chip
+            type="outline"
+            color="neutral"
+            size="sm"
+            trailingIcon="chevron-down"
+            onClick={onMoreOptionsClick}
+            className="multiple-quotation-docket__more-options">
+            More options
+          </Chip>
+        )}
+      </div>
+
+      {/* Services List */}
+      <div className="multiple-quotation-docket__services">
+        {services.map((service, index) => (
+          <div key={index} className="multiple-quotation-docket__service">
+            <div className="multiple-quotation-docket__service-header">
+              <div className="multiple-quotation-docket__service-title">
+                <div className="multiple-quotation-docket__section-bar" />
+                <Icon
+                  name={getServiceIcon(service.type)}
+                  size="sm"
+                  color="var(--color-icon-branded, #0f7173)"
+                />
+                <Text variant="bold" size="sm" color="accent">
+                  {service.type}
+                </Text>
+              </div>
+              <Chip type="filled" color="accent" size="sm">
+                {service.currency} {service.price}
+              </Chip>
+            </div>
+            <DocketDetails data={service} />
+          </div>
+        ))}
+      </div>
+
+      {/* Total Section */}
+      {totalPrices.length > 0 && (
+        <div className="multiple-quotation-docket__total">
+          <div className="multiple-quotation-docket__total-line" />
+          <div className="multiple-quotation-docket__total-content">
+            <Text variant="bold" size="sm">
+              Total :
+            </Text>
+            <div className="multiple-quotation-docket__total-prices">
+              {totalPrices.map((total, index) => (
+                <Text key={index} variant="bold" size="sm">
+                  {total.currency} {total.amount}
+                </Text>
+              ))}
+            </div>
+          </div>
+          <div className="multiple-quotation-docket__total-line" />
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="multiple-quotation-docket__actions">
+        {onAddNewQuoteClick && (
+          <Button
+            variant="outline-secondary"
+            size="sm"
+            leadingIcon="plus"
+            onClick={onAddNewQuoteClick}
+            className="multiple-quotation-docket__action-button">
+            Add new quote
+          </Button>
+        )}
+        <div className="multiple-quotation-docket__action-group">
+          {onViewClick && (
+            <Button
+              variant="outline-secondary"
+              size="sm"
+              onClick={onViewClick}
+              className="multiple-quotation-docket__action-button multiple-quotation-docket__action-button--flex">
+              View
+            </Button>
+          )}
+          {onSaveClick && (
+            <Button
+              variant="outline-secondary"
+              size="sm"
+              onClick={onSaveClick}
+              className="multiple-quotation-docket__action-button multiple-quotation-docket__action-button--flex">
+              Save
+            </Button>
+          )}
+          {onBookNowClick && (
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={onBookNowClick}
+              className="multiple-quotation-docket__action-button multiple-quotation-docket__action-button--book">
+              Book now
+            </Button>
+          )}
+        </div>
+      </div>
+    </CardContainer>
+  );
+};
+
+export default MultipleQuotationDocket;

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

@@ -0,0 +1,6 @@
+export { MultipleQuotationDocket, default } from './MultipleQuotationDocket';
+export type {
+  DocketDetailsData,
+  DocketServiceType,
+  MultipleQuotationDocketProps,
+} from './MultipleQuotationDocket';

package/src/components/organisms/QuoteHeader/QuoteHeader.css

@@ -0,0 +1,37 @@
+.quote-header {
+  @apply w-full;
+}
+
+.quote-header__button {
+  width: 206px;
+}
+
+.quote-header__title {
+  @apply px-2 relative mb-10;
+  &::before {
+    content: '';
+    @apply absolute top-1/2 left-0 -translate-y-1/2;
+    @apply w-1 h-8;
+    background-color: var(--color-elevation-brand-subtle);
+  }
+}
+
+.quote-header__search-container {
+  @apply mt-12;
+  @apply flex justify-between;
+  > button {
+    @apply gap-x-2.5;
+    min-width: 129px;
+  }
+}
+
+.quote-header__search {
+  width: 364px;
+}
+
+.quote-header__filters {
+  @apply flex gap-3 my-8;
+  .dropdown-container {
+    width: 139px;
+  }
+}