mautourco-components 0.2.22 → 0.2.24

package/dist/types/docket/docket.types.d.ts

@@ -0,0 +1,11 @@
+import { ServiceDocket } from './services.types';
+export interface DocketPrice {
+    currency: string;
+    amount: number;
+}
+export interface Docket {
+    id: number | string;
+    services: ServiceDocket[];
+    prices: DocketPrice[];
+    dockets?: Docket[];
+}

package/dist/types/docket/docket.types.js

@@ -0,0 +1 @@
+export {};

package/dist/types/docket/services.types.d.ts

@@ -0,0 +1,125 @@
+import { CancellationPolicy, Offer } from '../table';
+type ServiceType = 'accommodation' | 'transfer' | 'excursion' | 'otherService';
+export interface ServiceDocket {
+    type: ServiceType;
+}
+export interface HotelAmenity {
+    AmenityIcon: string;
+    AmenityName: string;
+}
+export interface RoomDocket {
+    room_detail_id?: number;
+    Dates: string[];
+    RoomName?: string;
+    RoomPrice?: number;
+    RoomAmenities?: Record<string, any>;
+    RoomImage?: string;
+    AdultCount?: number;
+    TeenCount?: number;
+    ChildCount?: number;
+    InfantCount?: number;
+    MealPlan?: string;
+    Mealsupplement?: number;
+    quotationPrice?: number;
+    ClientType?: string;
+    cancellation_policy?: CancellationPolicy[];
+    Offers?: Offer[];
+    Status?: string;
+    Mandatory?: any[];
+    paxAge?: any[];
+    isEmpty?: boolean;
+}
+export interface AccomodationDocket extends ServiceDocket {
+    type: 'accommodation';
+    HotelName: string;
+    HotelId: number;
+    HotelAmenities: HotelAmenity[];
+    Dates: [string, string];
+    Images: string[];
+    Total: string;
+    Currency: string;
+    Description: string;
+    TitleDescription: string;
+    Rooms: RoomDocket[];
+}
+export interface TransferDocket extends ServiceDocket {
+    type: 'transfer';
+    IdTransfer: number;
+    TransferDate: string;
+    TransferTime: string;
+    TransferType: string;
+    LocationFromId: number;
+    LocationFromName: string;
+    LocationFromDetails: string;
+    LocationToId: number;
+    LocationToName: string;
+    LocationToDetails: string;
+    Currency: string;
+    TotalPrice: number;
+    AdultCount: number;
+    TeenCount: number;
+    ChildCount: number;
+    InfantCount: number;
+    VehicleTypeId: number;
+    VehicleTypeName: string;
+    vehicleTypeCategory: string;
+    Vehicle_type: string;
+    capacity: number;
+    CarCount: number;
+    Car_selected: boolean;
+    luggage: any[];
+    LuggageTruck: number;
+    LuggageCar: number;
+    baby_seat_count: number;
+    HandlingFee: string;
+    HandlingFeeAdult: number;
+    HandlingFeeChild: number;
+    HandlingFeeDetails: string | null;
+    HandlingType: string;
+    Remarks: string;
+    Flight: string;
+    Pic_url: string;
+    IsSearched: boolean;
+    IsFieldManually: boolean;
+    paxAge: any[];
+    otherServices: {
+        serviceDetailID: number;
+        serviceID: number;
+        clientRefs: any[];
+    }[];
+}
+export interface ExcursionDocket extends ServiceDocket {
+    type: 'excursion';
+    ExcursionID: number;
+    ExcursionName: string;
+    ServiceDate: string;
+    SelectedHotel?: string;
+    SelectedHotelDetails?: string;
+    Currency: string;
+    TotalPrice: string | number;
+    AdultCount: number;
+    TeenCount?: number;
+    ChildCount?: number;
+    InfantCount?: number;
+    Duration?: string;
+    MealIncluded?: boolean;
+    Meal?: string;
+    Accessibility?: string;
+    VehicleType?: string;
+    VehicleTypeName?: string;
+    paxAge?: any[];
+}
+export interface OtherServiceDocket extends ServiceDocket {
+    type: 'otherService';
+    service_detail_id: number;
+    service_for: string;
+    service_date?: string;
+    Currency: string;
+    TotalPrice: string | number;
+    AdultCount: number;
+    TeenCount?: number;
+    ChildCount?: number;
+    InfantCount?: number;
+    paxAge?: any[];
+}
+export {};

package/dist/types/docket/services.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface LineIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const LineIcon: React.FC<LineIconProps> = ({ size = 'md', className = '', color }) => {
+  // Line icon always takes full width and has 1px height
+  const classes = `w-full h-px ${className}`;
+
+  // Default stroke color from Figma: #A3A3A3
+  const strokeColor = color || '#A3A3A3';
+
+  return (
+    <svg
+      className={classes}
+      xmlns="http://www.w3.org/2000/svg"
+      width="336"
+      height="1"
+      viewBox="0 0 336 1"
+      fill="none"
+      preserveAspectRatio="none"
+      style={{ width: '100%', height: '1px' }}>
+      <path d="M0 0.5L336 0.499971" stroke={strokeColor} strokeDasharray="4 4" />
+    </svg>
+  );
+};
+
+export default LineIcon;

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

@@ -45,12 +45,12 @@ const PlusCircleIcon: React.FC<PlusCircleIconProps> = ({
       <g clipPath="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"
+          fill="currentColor"
         />
       </g>
       <defs>
         <clipPath id="clip0_7074_66340">
-          <rect width="16" height="16" fill="white" />
+          <rect width="16" height="16" fill="currentColor" />
         </clipPath>
       </defs>
     </svg>

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

@@ -30,6 +30,7 @@ import FacebookIcon from './FacebookIcon';
 import HomeIcon from './HomeIcon';
 import InfoIcon from './InfoIcon';
 import LandIcon from './Land';
+import LineIcon from './LineIcon';
 import LinkedInIcon from './LinkedInIcon';
 import LuggageIcon from './LuggageIcon';
 import MapIcon from './MapIcon';
@@ -139,6 +140,7 @@ export const ICONS = {
   bike: BikeIcon as unknown as IconComponent,
   air: AirIcon as unknown as IconComponent,
   luggage: LuggageIcon as unknown as IconComponent,
+  line: LineIcon as unknown as IconComponent,
   'car-front': CarFrontIcon as unknown as IconComponent,
   sea: SeaIcon as unknown as IconComponent,
   catamaran: CatamaranIcon as unknown as IconComponent,

package/src/components/molecules/AccomodationDocket/AccomodationDocket.tsx

@@ -0,0 +1,224 @@
+import { differenceInDays } from 'date-fns';
+import React from 'react';
+import { AccomodationDocket as AccomodationDocketType } from '../../../types/docket/services.types';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import { DateDisplay } from '../DateDisplay/DateDisplay';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+import '../../../styles/components/molecule/accomodation-docket.css';
+
+export interface AccomodationDocketProps {
+  data: AccomodationDocketType;
+}
+
+const clientTypeMap: Record<string, string> = {
+  standard: 'Standard',
+  honeymooners: 'Honeymooners',
+  vip: 'VIP',
+  vvip: 'VVIP',
+};
+
+export const AccomodationDocket: React.FC<AccomodationDocketProps> = ({ data }) => {
+  const { HotelName, TitleDescription, Total, Currency, Dates, Rooms } = data;
+
+  const calculateNights = (dates: string[]): number => {
+    if (dates && dates.length >= 2) {
+      return differenceInDays(new Date(dates[1]), new Date(dates[0]));
+    }
+    return 0;
+  };
+
+  const formatChildrenInfo = (
+    room: AccomodationDocketType['Rooms'][0]
+  ): React.ReactNode => {
+    if (!room.ChildCount || room.ChildCount === 0) {
+      return null;
+    }
+
+    const childrenInfo: React.ReactNode[] = [];
+    const paxAges = room.paxAge || [];
+
+    // Group children by age
+    const childGroups: Array<{ count: number; age: number }> = [];
+
+    if (paxAges.length > 0) {
+      // Count children by age
+      const ageCounts: Record<number, number> = {};
+      paxAges.forEach((age: any) => {
+        const ageNum = typeof age === 'number' ? age : parseInt(age, 10);
+        if (!isNaN(ageNum)) {
+          ageCounts[ageNum] = (ageCounts[ageNum] || 0) + 1;
+        }
+      });
+
+      Object.entries(ageCounts).forEach(([age, count]) => {
+        childGroups.push({ count, age: parseInt(age, 10) });
+      });
+    } else {
+      // If no age info, just show total count
+      childGroups.push({ count: room.ChildCount, age: 0 });
+    }
+
+    return (
+      <div className="accomodation-docket__children">
+        {childGroups.map((group, index) => (
+          <React.Fragment key={`child-${index}`}>
+            {index > 0 && <div className="accomodation-docket__divider-vertical" />}
+            <span className="accomodation-docket__child-info">
+              <Text size="sm" variant="medium" color="default">
+                {group.count} Child{group.count > 1 ? 'ren' : ''}
+              </Text>
+              {group.age > 0 ? (
+                <Text
+                  size="sm"
+                  variant="medium"
+                  className="accomodation-docket__child-age">
+                  {' '}
+                  ({group.age} y.o)
+                </Text>
+              ) : null}
+            </span>
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  };
+
+  const renderRoomDetails = (room: AccomodationDocketType['Rooms'][0], index: number) => {
+    const isRoomEmpty = room.isEmpty || !room.Dates || room.Dates.length === 0;
+
+    return (
+      <div key={`room-${index}`} className="accomodation-docket__room">
+        <div className="accomodation-docket__room-header">
+          <TextWithIcon icon="accom" textVariant="bold" textSize="sm" color="subtle">
+            Room {index + 1}
+          </TextWithIcon>
+        </div>
+
+        {isRoomEmpty ? (
+          <div className="accomodation-docket__room-empty">
+            <Text variant="bold" size="sm" color="state-error">
+              Please select your second room
+            </Text>
+          </div>
+        ) : (
+          <div className="accomodation-docket__room-details">
+            <div className="accomodation-docket__date-section">
+              {room.Dates && room.Dates.length >= 2 && (
+                <DateDisplay
+                  dates={room.Dates}
+                  calendarSize="sm"
+                  arrowSize="sm"
+                  textSize="sm"
+                  colorMode="green"
+                />
+              )}
+              {room.Dates && room.Dates.length >= 2 && (
+                <TextWithIcon icon="night" textSize="sm" color="subtle">
+                  {calculateNights(room.Dates)} nights
+                </TextWithIcon>
+              )}
+            </div>
+
+            <div className="accomodation-docket__client-info">
+              {room.ClientType && (
+                <div className="accomodation-docket__client-type">
+                  <Text variant="bold" size="sm" color="subtle">
+                    Client type:{' '}
+                  </Text>
+                  <Text variant="medium" size="sm" color="subtle">
+                    {clientTypeMap[room.ClientType.toLowerCase()] || room.ClientType}
+                  </Text>
+                </div>
+              )}
+
+              <div className="accomodation-docket__guests">
+                {room.AdultCount && room.AdultCount > 0 && (
+                  <TextWithIcon icon="user" textSize="sm" color="subtle">
+                    {room.AdultCount} Adult{room.AdultCount > 1 ? 's' : ''}
+                  </TextWithIcon>
+                )}
+                {room.ChildCount && room.ChildCount > 0 ? (
+                  <div className="accomodation-docket__children-wrapper">
+                    <Icon
+                      name="user"
+                      size="sm"
+                      color="var(--color-text-subtle, #303642)"
+                    />
+                    {formatChildrenInfo(room)}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="accomodation-docket__room-info">
+              {room.RoomName && (
+                <TextWithIcon
+                  icon="accom"
+                  textSize="sm"
+                  color="subtle"
+                  textLeading="none">
+                  {room.RoomName}
+                </TextWithIcon>
+              )}
+              {room.MealPlan && (
+                <div className="accomodation-docket__meal-plan">
+                  <div className="accomodation-docket__meal-plan-label">
+                    <TextWithIcon
+                      icon="utensils"
+                      textSize="sm"
+                      color="subtle"
+                      textLeading="none">
+                      Meal-Plan
+                    </TextWithIcon>
+                    <div className="accomodation-docket__divider-vertical" />
+                  </div>
+                  <Text variant="medium" size="sm" color="subtle" leading="none">
+                    {room.MealPlan}
+                  </Text>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="accomodation-docket">
+      <div className="accomodation-docket__header">
+        <div className="accomodation-docket__title-section">
+          <div className="accomodation-docket__title-bar" />
+          <Icon name="accom" size="sm" />
+          <Text variant="bold" size="sm" color="accent">
+            Accommodation
+          </Text>
+        </div>
+        {Total && Currency && (
+          <Chip type="filled" color="accent" size="sm">
+            {Currency} {Total}
+          </Chip>
+        )}
+      </div>
+
+      {TitleDescription && (
+        <div className="accomodation-docket__hotel-name">
+          <Text variant="bold" size="base" color="default">
+            {TitleDescription.split('\n').map((line, index) => (
+              <React.Fragment key={`line-${index}`}>
+                {line}
+                {index < TitleDescription.split('\n').length - 1 && <br />}
+              </React.Fragment>
+            ))}
+          </Text>
+        </div>
+      )}
+
+      <div className="accomodation-docket__rooms">
+        {Rooms.map((room, index) => renderRoomDetails(room, index))}
+      </div>
+    </div>
+  );
+};

package/src/components/molecules/AccomodationDocket/index.ts

@@ -0,0 +1,3 @@
+export { AccomodationDocket } from './AccomodationDocket';
+export type { AccomodationDocketProps } from './AccomodationDocket';
+

package/src/components/molecules/AddItemButton/AddItemButton.css

@@ -0,0 +1,5 @@
+.add-item-button {
+  @apply p-4 gap-y-4 text-center flex flex-col items-center justify-center;
+  border: solid 1px var(--card-color-border-default);
+  border-radius: var(--card-border-radius-default);
+}

package/src/components/molecules/AddItemButton/AddItemButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import './AddItemButton.css';
+
+export interface AddItemButtonProps {
+  label: React.ReactNode;
+  onClick?: () => void;
+}
+
+export const AddItemButton: React.FC<AddItemButtonProps> = ({ label, onClick }) => {
+  return (
+    <button className="add-item-button" onClick={onClick}>
+      <Icon name="plus-circle" size="lg" />
+      <Text variant="medium">{label}</Text>
+    </button>
+  );
+};

package/src/components/molecules/BookingResume/ResumeAccom/ResumeAccom.tsx

@@ -33,7 +33,7 @@ export const ResumeAccom: React.FC<ResumeAccomProps> = (props) => {
       className="resume-accom">
       <ServiceTitle title={hotelName} />
       <div className="space-y-2 mt-4">
-        <DateDisplay dates={dates} textColor="accent" />
+        <DateDisplay dates={dates} colorMode="green" />
         <TextWithIcon icon="night">{stay} Nights</TextWithIcon>
         <Text variant="medium" size="sm" leading="4">
           <strong>Client types:</strong> {clientType}

package/src/components/molecules/BookingResume/ResumeExcursion/ResumeExcursion.tsx

@@ -45,7 +45,7 @@ export const ResumeExcursion: React.FC<ResumeExcursionProps> = (props) => {
       image={image}
       className="resume-excursion">
       <div className="space-y-3">
-        <DateDisplay dates={[date]} textColor="accent" />
+        <DateDisplay dates={[date]} colorMode="green" />
         <div className="space-y-1">
           <TextWithIcon icon={type} textSize="sm" textVariant="medium">
             {mapType[type]}

package/src/components/molecules/BookingResume/ResumeTransfer.tsx

@@ -35,7 +35,7 @@ export const ResumeTransfer: React.FC<ResumeTransferProps> = (props) => {
       icon="car-front"
       image={image}>
       <div className="space-y-3">
-        <DateDisplay dates={[date]} textColor="accent" />
+        <DateDisplay dates={[date]} colorMode="green" />
         <FromTo from={location.from} to={location.to} />
         <div className="space-y-1">
           <PaxDisplay pax={pax} />