mautourco-components 0.2.13 → 0.2.14

package/package.json

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

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

@@ -36,6 +36,7 @@ import PlaneIcon from './PlaneIcon';
 import PlaneLandingOutlineIcon from './PlaneLandingOutlineIcon';
 import PlaneTakeoffOutlineIcon from './PlaneTakeoffOutlineIcon';
 import PlusIcon from './PlusIcon';
+import QuotationIcon from './QuotationIcon';
 import Search from './Search';
 import Settings from './Settings';
 import ShipIcon from './ShipIcon';
@@ -108,6 +109,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,

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/styles/components/organism/multiple-quotation-docket.css

@@ -0,0 +1,222 @@
+/* Multiple Quotation Docket Component */
+.multiple-quotation-docket {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6);
+  width: 100%;
+}
+
+/* Header */
+.multiple-quotation-docket__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.multiple-quotation-docket__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__title-text {
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, Satoshi);
+  font-size: var(--font-size-text-xl, 20px);
+  font-style: normal;
+  font-weight: var(--font-weight-font-bold, 700);
+  line-height: var(--font-leading-leading-lg, 28px);
+  letter-spacing: var(--font-tracking-tracking-normal, 0);
+}
+
+.multiple-quotation-docket__more-options {
+  cursor: pointer;
+}
+
+/* Services List */
+.multiple-quotation-docket__services {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-6);
+  width: 100%;
+}
+
+.multiple-quotation-docket__service {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4);
+  width: 100%;
+}
+
+.multiple-quotation-docket__service-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.multiple-quotation-docket__service-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__section-bar {
+  width: 3px;
+  height: 20px;
+  background-color: var(--color-elevation-brand-subtle);
+  flex-shrink: 0;
+}
+
+/* Details */
+.multiple-quotation-docket__details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-3);
+  padding-left: var(--spacing-gap-gap-3);
+  width: 100%;
+}
+
+.multiple-quotation-docket__error {
+  width: 100%;
+}
+
+.multiple-quotation-docket__service-name {
+  width: 100%;
+}
+
+.multiple-quotation-docket__date-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+  width: 100%;
+}
+
+.multiple-quotation-docket__date-range {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__client-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+  width: 100%;
+}
+
+.multiple-quotation-docket__client-type {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-0-5);
+}
+
+.multiple-quotation-docket__guests {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+}
+
+.multiple-quotation-docket__children {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__child {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__child-age {
+  color: var(--color-text-subtle);
+  opacity: 0.7;
+}
+
+.multiple-quotation-docket__room-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2);
+  width: 100%;
+}
+
+.multiple-quotation-docket__meal-plan {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2);
+}
+
+.multiple-quotation-docket__additional-details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-1);
+}
+
+.multiple-quotation-docket__divider {
+  width: 0;
+  height: 14px;
+  border-left: 0.5px solid var(--color-border-medium);
+}
+
+/* Total Section */
+.multiple-quotation-docket__total {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-2);
+  background-color: var(--color-elevation-level-2);
+  padding: var(--spacing-padding-py-0) var(--spacing-padding-px-0);
+  width: 100%;
+}
+
+.multiple-quotation-docket__total-line {
+  height: 0;
+  border-top: 0.5px solid var(--color-border-medium);
+  width: 100%;
+}
+
+.multiple-quotation-docket__total-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-padding-px-0) var(--spacing-padding-px-2);
+  width: 100%;
+}
+
+.multiple-quotation-docket__total-prices {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spacing-gap-gap-1);
+}
+
+/* Actions */
+.multiple-quotation-docket__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-gap-4);
+  width: 100%;
+}
+
+.multiple-quotation-docket__action-group {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-gap-2);
+  width: 100%;
+}
+
+.multiple-quotation-docket__action-button {
+  width: 100%;
+}
+
+.multiple-quotation-docket__action-button--flex {
+  flex: 1;
+  min-width: 0;
+}
+
+.multiple-quotation-docket__action-button--book {
+  width: 162px;
+  flex-shrink: 0;
+}