mautourco-components 0.2.28 → 0.2.30

package/src/components/organisms/Docket/Docket.tsx

@@ -2,16 +2,17 @@ import React, { useEffect, useState } from 'react';
 import '../../../styles/components/organism/docket.css';
 import { Docket as DocketType } from '../../../types/docket/docket.types';
 import {
-  AccomodationDocket as AccomodationDocketType,
-  ExcursionDocket as ExcursionDocketType,
-  OtherServiceDocket as OtherServiceDocketType,
-  ServiceDocket,
-  TransferDocket as TransferDocketType,
+    AccomodationDocket as AccomodationDocketType,
+    ExcursionDocket as ExcursionDocketType,
+    OtherServiceDocket as OtherServiceDocketType,
+    ServiceDocket,
+    TransferDocket as TransferDocketType,
 } from '../../../types/docket/services.types';
 import Button from '../../atoms/Button/Button';
 import Chip from '../../atoms/Chip/Chip';
 import Icon from '../../atoms/Icon/Icon';
 import { AccomodationDocket } from '../../molecules/AccomodationDocket/AccomodationDocket';
+import { ActionDropdown, ActionDropdownItem } from '../../molecules/ActionDropdown/ActionDropdown';
 import { DocketPrices } from '../../molecules/DocketPrices/DocketPrices';
 import { ExcursionDocket } from '../../molecules/ExcursionDocket/ExcursionDocket';
 import { OtherServiceDocket } from '../../molecules/OtherServiceDocket/OtherServiceDocket';
@@ -24,7 +25,12 @@ export interface DocketHeaderProps {
   title?: string;
 
   /**
-   * Handler for the "More options" button click
+   * Array of options for the "More options" dropdown
+   */
+  moreOptions?: ActionDropdownItem[];
+
+  /**
+   * Handler for the "More options" button click (deprecated - use moreOptions instead)
    */
   onMoreOptionsClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 
@@ -78,7 +84,12 @@ export interface DocketProps {
   title?: string;
 
   /**
-   * Handler for the "More options" button click
+   * Array of options for the "More options" dropdown
+   */
+  moreOptions?: ActionDropdownItem[];
+
+  /**
+   * Handler for the "More options" button click (deprecated - use moreOptions instead)
    */
   onMoreOptionsClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 
@@ -122,6 +133,11 @@ export interface DocketProps {
    */
   className?: string;
 
+  /**
+   * Additional CSS classes to apply to the wrapper container around the docket
+   */
+  containerClassName?: string;
+
   /**
    * Optional click handler
    */
@@ -131,6 +147,17 @@ export interface DocketProps {
    * Optional data attributes for testing or tracking
    */
   'data-testid'?: string;
+
+  /**
+   * Remove mode - replaces price chips with remove buttons in all service dockets
+   */
+  removeMode?: boolean;
+
+  /**
+   * Handler for remove button clicks in service dockets
+   * Receives the service index and service data
+   */
+  onServiceRemove?: (index: number, service: ServiceDocket) => void;
 }
 
 /**
@@ -196,23 +223,29 @@ export const DocketEmptyState: React.FC<{ className?: string }> = ({
  */
 export const DocketHeader: React.FC<DocketHeaderProps> = ({
   title = 'Your quotation',
+  moreOptions,
   onMoreOptionsClick,
   className = '',
 }) => {
+  const chipTrigger = (
+    <Chip trailingIcon="chevron-down" className="docket__header-more-options">
+      More options
+    </Chip>
+  );
+
   return (
     <div className={`docket__header ${className}`}>
       <div className="docket__header-title">
         <Icon name="quotation" size="lg" />
         <h2 className="docket__header-title-text">{title}</h2>
       </div>
-      {onMoreOptionsClick && (
-        <Chip
-          onClick={onMoreOptionsClick}
-          trailingIcon="chevron-down"
-          className="docket__header-more-options">
-          More options
-        </Chip>
-      )}
+      {moreOptions && moreOptions.length > 0 ? (
+        <ActionDropdown data={moreOptions} maxWidth="200px">
+          {chipTrigger}
+        </ActionDropdown>
+      ) : onMoreOptionsClick ? (
+        <div onClick={onMoreOptionsClick}>{chipTrigger}</div>
+      ) : null}
     </div>
   );
 };
@@ -283,6 +316,7 @@ export const DocketFooter: React.FC<DocketFooterProps> = ({
 export const Docket: React.FC<DocketProps> = ({
   dockets,
   title = 'Your quotation',
+  moreOptions,
   onMoreOptionsClick,
   onAddNewQuoteClick,
   onViewClick,
@@ -292,8 +326,11 @@ export const Docket: React.FC<DocketProps> = ({
   showHeader = true,
   showFooter = true,
   className = '',
+  containerClassName = '',
   onClick,
   'data-testid': testId,
+  removeMode = false,
+  onServiceRemove,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [isMobile, setIsMobile] = useState<boolean>(false);
@@ -328,23 +365,36 @@ export const Docket: React.FC<DocketProps> = ({
     .join(' ');
 
   const renderService = (service: ServiceDocket, index: number) => {
+    const handleRemove = () => {
+      onServiceRemove?.(index, service);
+    };
+
     switch (service.type) {
       case 'accommodation':
         return (
           <AccomodationDocket
             key={`service-${index}`}
             data={service as AccomodationDocketType}
+            removeMode={removeMode}
+            onRemove={handleRemove}
           />
         );
       case 'transfer':
         return (
-          <TransferDocket key={`service-${index}`} data={service as TransferDocketType} />
+          <TransferDocket
+            key={`service-${index}`}
+            data={service as TransferDocketType}
+            removeMode={removeMode}
+            onRemove={handleRemove}
+          />
         );
       case 'excursion':
         return (
           <ExcursionDocket
             key={`service-${index}`}
             data={service as ExcursionDocketType}
+            removeMode={removeMode}
+            onRemove={handleRemove}
           />
         );
       case 'otherService':
@@ -385,8 +435,12 @@ export const Docket: React.FC<DocketProps> = ({
   // Collect all prices from all dockets
   const allPrices = dockets ? dockets.flatMap((docket) => docket.prices || []) : [];
 
+  const containerClasses = containerClassName
+    ? `docket__container ${containerClassName}`
+    : 'docket__container';
+
   return (
-    <>
+    <div className={containerClasses}>
       {isMobile && !isOpen && (
         <DocketCollapsedHeader title={title} onClick={handleToggle} />
       )}
@@ -405,7 +459,11 @@ export const Docket: React.FC<DocketProps> = ({
           </div>
           <div className={classes} onClick={onClick} data-testid={testId}>
             {showHeader && (
-              <DocketHeader title={title} onMoreOptionsClick={onMoreOptionsClick} />
+              <DocketHeader
+                title={title}
+                moreOptions={moreOptions}
+                onMoreOptionsClick={onMoreOptionsClick}
+              />
             )}
             <div className="docket__content">{renderContent()}</div>
             {allPrices.length > 0 && (
@@ -428,7 +486,11 @@ export const Docket: React.FC<DocketProps> = ({
       {!isMobile && (
         <div className={classes} onClick={onClick} data-testid={testId}>
           {showHeader && (
-            <DocketHeader title={title} onMoreOptionsClick={onMoreOptionsClick} />
+            <DocketHeader
+              title={title}
+              moreOptions={moreOptions}
+              onMoreOptionsClick={onMoreOptionsClick}
+            />
           )}
           <div className="docket__content">{renderContent()}</div>
           {allPrices.length > 0 && (
@@ -449,7 +511,7 @@ export const Docket: React.FC<DocketProps> = ({
           )}
         </div>
       )}
-    </>
+    </div>
   );
 };
 

package/src/components/organisms/PaxSelector/PaxSelector.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { scrollIntoViewOnOpen } from '../../../lib/utils';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 
@@ -64,6 +65,8 @@ export interface PaxSelectorProps {
   onRemoveRoom?: (roomId: string) => void;
   /** Default pax data for single room mode (will trigger onChange on mount) */
   defaultPaxData?: PaxData;
+  /** Whether to scroll to the input when the dropdown opens */
+  scrollOnOpen?: boolean;
 }
 
 const DEFAULT_PAX_DATA: PaxData = {
@@ -652,6 +655,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   onRoomsChange,
   onRemoveRoom,
   defaultPaxData = DEFAULT_PAX_DATA_WITH_ADULTS,
+  scrollOnOpen = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [internalData, setInternalData] = useState<PaxData>(
@@ -661,6 +665,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
     defaultRooms || [{ ...DEFAULT_PAX_DATA, roomId: '1' }]
   );
   const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
   const hasInitialized = useRef(false);
 
   // Sync internal data with external value prop
@@ -755,6 +760,11 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
     };
   }, [isOpen]);
 
+  // Scroll to input when dropdown opens (if scrollOnOpen is true)
+  useEffect(() => {
+    scrollIntoViewOnOpen(triggerRef, isOpen, scrollOnOpen);
+  }, [isOpen, scrollOnOpen]);
+
   const handleDataChange = (
     field: keyof PaxData,
     newValue: number | ClientType | number[]
@@ -834,6 +844,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   return (
     <div className={`pax-selector ${className}`} ref={containerRef}>
       <button
+        ref={triggerRef}
         type="button"
         className="pax-selector__trigger"
         onClick={() => setIsOpen(!isOpen)}

package/src/components/organisms/RoundTrip/RoundTrip.tsx

@@ -1,14 +1,13 @@
-import React, { useState, useEffect } from "react";
-import Icon from "../../atoms/Icon/Icon";
+import React, { useEffect, useState } from "react";
+import "../../../styles/components/organism/round-trip.css";
 import { Text } from "../../atoms/Typography/Typography";
-import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
-import DateTimePicker from "../DateTimePicker/DateTimePicker";
 import LocationDropdown, {
-  LocationOption,
-  LocationGroup,
-  LocationData,
+    LocationData,
+    LocationGroup,
+    LocationOption,
 } from "../../molecules/LocationDropdown/LocationDropdown";
-import "../../../styles/components/organism/round-trip.css";
+import DateTimePicker from "../DateTimePicker/DateTimePicker";
+import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
 
 // Re-export LocationData for convenience
 export type { LocationData };
@@ -61,6 +60,8 @@ export interface RoundTripProps {
   onChange?: (data: RoundTripData) => void;
   /** Additional CSS classes */
   className?: string;
+  /** Whether to check if inputs are empty */
+  checkEmpty?: boolean;
 }
 
 const RoundTrip: React.FC<RoundTripProps> = ({
@@ -77,6 +78,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
   onAccommodationChange,
   onChange,
   className = "",
+  checkEmpty = false,
 }) => {
   const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
     paxData
@@ -270,18 +272,33 @@ const RoundTrip: React.FC<RoundTripProps> = ({
     onAccommodationChange?.(location);
   };
 
+  // Check if inputs are empty (when checkEmpty is true)
+  const isPaxEmpty = checkEmpty && (!internalPaxData || 
+    (internalPaxData.adults === 0 && 
+     internalPaxData.teens === 0 && 
+     internalPaxData.children === 0 && 
+     (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
+
+  const isDateEmpty = checkEmpty && (!internalArrivalDate || !internalDepartureDate || 
+    internalArrivalDate === '' || internalDepartureDate === '');
+
+  const isPickupDropoffEmpty = checkEmpty && !internalPickupDropoffPoint;
+
+  const isAccommodationEmpty = checkEmpty && !internalAccommodation;
+
   const pickupDropoffOptions = getPickupDropoffOptions();
   const accommodationOptions = getAccommodationOptions();
 
   return (
     <div className={`round-trip ${className}`} data-round-trip-id={id}>
       <div className="round-trip__content">
-        <div className="round-trip__field round-trip__field--pax">
+        <div className={`round-trip__field round-trip__field--pax ${isPaxEmpty ? 'round-trip__field--error' : ''}`}>
           <PaxSelector
             label="Number of pax"
             value={internalPaxData}
             onChange={handlePaxChange}
             placeholder="2 pax"
+            className={isPaxEmpty ? 'pax-selector--error' : ''}
           />
         </div>
 
@@ -298,7 +315,9 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             showChevron={true}
             onValueChange={handleDateRangeChange}
             selectionMode="range"
-            defaultValue={arrivalDate && departureDate ? [arrivalDate, departureDate] : undefined}
+            defaultValue={internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined}
+            inputClassName="round-trip__date-picker--input"
+            state={isDateEmpty ? 'error' : undefined}
           />
         </div>
         <div className="round-trip__field round-trip__field--pickup-dropoff">
@@ -312,6 +331,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             direction={undefined}
             type="airport-port"
             showGroupTitles={true}
+            error={isPickupDropoffEmpty}
           />
         </div>
 
@@ -326,6 +346,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             direction="dropoff"
             type="accommodation"
             showGroupTitles={false}
+            error={isAccommodationEmpty}
           />
         </div>
       </div>

package/src/components/organisms/SearchBarTransfer/SearchBarTransfer.tsx

@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from "react";
-import RoundTrip, { RoundTripData } from "../RoundTrip/RoundTrip";
-import TransferLine, {
-  TransferLineData,
-  TransferType,
-} from "../TransferLine/TransferLine";
+import React, { useEffect, useState } from "react";
+import "../../../styles/components/organism/search-bar-transfer.css";
 import Button from "../../atoms/Button/Button";
 import Checkbox from "../../atoms/Checkbox/Checkbox";
-import { Text, Heading } from "../../atoms/Typography/Typography";
-import { LocationOption, LocationGroup } from "../../molecules/LocationDropdown/LocationDropdown";
 import Icon, { IconName } from "../../atoms/Icon/Icon";
 import SegmentedButton, { SegmentedButtonOption } from "../../atoms/SegmentedButton/SegmentedButton";
-import "../../../styles/components/organism/search-bar-transfer.css";
+import { Heading, Text } from "../../atoms/Typography/Typography";
+import { LocationGroup, LocationOption } from "../../molecules/LocationDropdown/LocationDropdown";
+import Toast from "../../molecules/Toast/Toast";
+import RoundTrip, { RoundTripData } from "../RoundTrip/RoundTrip";
+import TransferLine, {
+    TransferLineData,
+    TransferType,
+} from "../TransferLine/TransferLine";
 
 export type TransferMode = "roundtrip" | "custom";
 
@@ -141,6 +142,81 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     setTransferLines([...transferLines, newTransfer]);
   };
 
+  // Render transfer type buttons
+  const renderTransferTypeButtons = (onClick: (type: TransferType) => void) => (
+    <div className="search-bar-transfer__add-buttons">
+      <Button
+        variant="outline-secondary"
+        size="sm"
+        leadingIcon="plus"
+        onClick={() => onClick("arrival")}
+      >
+        Add Arrival
+      </Button>
+      <Button
+        variant="outline-secondary"
+        size="sm"
+        leadingIcon="plus"
+        onClick={() => onClick("departure")}
+      >
+        Add Departure
+      </Button>
+      <Button
+        variant="outline-secondary"
+        size="sm"
+        leadingIcon="plus"
+        onClick={() => onClick("inter-hotel")}
+      >
+        Add Inter-Hotel
+      </Button>
+    </div>
+  );
+
+  // Handle adding transfer from round-trip mode (converts round-trip to custom and adds new transfer)
+  const handleAddTransferFromRoundTrip = (type: TransferType) => {
+    if (!roundTripData) {
+      // If no round trip data, just add a new transfer and switch to custom
+      const newTransfer: TransferLineData = {
+        id: generateTransferId(),
+        type,
+      };
+      setTransferLines([newTransfer]);
+      setMode("custom");
+      return;
+    }
+
+    // Convert roundtrip to two transfer lines
+    const arrivalTransfer: TransferLineData = {
+      id: generateTransferId(),
+      type: "arrival",
+      paxData: roundTripData.paxData,
+      transferDate: roundTripData.arrivalDate,
+      pickupPoint: roundTripData.pickupDropoffPoint,
+      dropoffPoint: roundTripData.accommodation,
+    };
+
+    const departureTransfer: TransferLineData = {
+      id: generateTransferId(),
+      type: "departure",
+      paxData: roundTripData.paxData,
+      transferDate: roundTripData.departureDate,
+      pickupPoint: roundTripData.accommodation,
+      dropoffPoint: roundTripData.pickupDropoffPoint,
+    };
+
+    // Add the new transfer of the clicked type
+    const newTransfer: TransferLineData = {
+      id: generateTransferId(),
+      type,
+    };
+
+    // Set all transfers and switch to custom mode
+    setTransferLines([arrivalTransfer, departureTransfer, newTransfer]);
+    setRoundTripData(undefined);
+    setMode("custom");
+    setError(null);
+  };
+
   // Handle transfer line data change
   const handleTransferLineChange = (id: string, data: TransferLineData) => {
     setTransferLines((prevLines) =>
@@ -227,16 +303,23 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
       {/* Content based on mode */}
       {mode === "roundtrip" ? (
-        <RoundTrip
-          id="roundtrip-main"
-          locations={locations}
-          paxData={roundTripData?.paxData}
-          arrivalDate={roundTripData?.arrivalDate}
-          departureDate={roundTripData?.departureDate}
-          pickupDropoffPoint={roundTripData?.pickupDropoffPoint?.id as string}
-          accommodation={roundTripData?.accommodation?.id as string}
-          onChange={setRoundTripData}
-        />
+        <>
+          <RoundTrip
+            id="roundtrip-main"
+            locations={locations}
+            paxData={roundTripData?.paxData}
+            arrivalDate={roundTripData?.arrivalDate}
+            departureDate={roundTripData?.departureDate}
+            pickupDropoffPoint={roundTripData?.pickupDropoffPoint?.id as string}
+            accommodation={roundTripData?.accommodation?.id as string}
+            onChange={setRoundTripData}
+            checkEmpty={error !== null}
+          />
+          {/* Transfer type buttons for round-trip mode */}
+          <div className="search-bar-transfer__transfer-type">
+            {renderTransferTypeButtons(handleAddTransferFromRoundTrip)}
+          </div>
+        </>
       ) : (
         <>
           {/* Transfer type selector */}
@@ -244,32 +327,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
             <Text size="lg" variant="bold" color="subtle" as="div" className="search-bar-transfer__transfer-type-label">
               Select a transfer type you want to add
             </Text>
-            <div className="search-bar-transfer__add-buttons">
-              <Button
-                variant="outline-secondary"
-                size="sm"
-                leadingIcon="plus"
-                onClick={() => handleAddTransfer("arrival")}
-              >
-                Add Arrival
-              </Button>
-              <Button
-                variant="outline-secondary"
-                size="sm"
-                leadingIcon="plus"
-                onClick={() => handleAddTransfer("departure")}
-              >
-                Add Departure
-              </Button>
-              <Button
-                variant="outline-secondary"
-                size="sm"
-                leadingIcon="plus"
-                onClick={() => handleAddTransfer("inter-hotel")}
-              >
-                Add Inter-Hotel
-              </Button>
-            </div>
+            {renderTransferTypeButtons(handleAddTransfer)}
           </div>
 
           {/* Transfer lines list */}
@@ -322,6 +380,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                         onDataChange={(data) => handleTransferLineChange(line.id, data)}
                         onDelete={() => handleDeleteTransferLine(line.id)}
                         showDelete={transferLines.length > 1}
+                        checkEmpty={error !== null}
                       />
                     ))}
 
@@ -362,15 +421,10 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
         <div className="search-bar-transfer__cta">
           {error && (
-            <div className="search-bar-transfer__error">
-              <div className="search-bar-transfer__error-bar" />
-              <div className="search-bar-transfer__error-content">
-                <Icon name="info" size="md" className="search-bar-transfer__error-icon" />
-                <Text size="sm" variant="bold" className="search-bar-transfer__error-text">
-                  {error}
-                </Text>
-              </div>
-            </div>
+            <Toast
+              text={error}
+              type="danger"
+            />
           )}
           <Button
             variant="primary"

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

@@ -3,3 +3,9 @@ export type { SearchBarTransferProps, SearchBarTransferData, TransferMode } from
 
 
 
+
+
+
+
+
+

package/src/components/organisms/Table/Table.tsx

@@ -103,7 +103,12 @@ const NestedContent = <T extends TableRowData<T>>({
                 'table__row-clickable': onClickRow,
               })}
               onClick={(e) => onClickRow?.(e, child as T)}>
-              <TableCell<T> columns={columns} row={child as T} rowIndex={childIndex} />
+              <TableCell<T>
+                columns={columns}
+                row={child as T}
+                rowIndex={childIndex}
+                childIndex={childIndex}
+              />
             </tr>
           ))}
         </tbody>

package/src/components/organisms/Table/TableCell.tsx

@@ -9,7 +9,8 @@ export type ColumnType<T = TableRowData> = {
   cell: (
     value: T[Extract<keyof T, string>],
     rawData: T,
-    index?: number
+    index?: number,
+    childIndex?: number
   ) => React.ReactNode;
 };
 
@@ -17,9 +18,10 @@ export interface TableCellProps<T = TableRowData> {
   columns: ColumnType<T>[];
   row: T;
   rowIndex: number;
+  childIndex?: number;
 }
 export const TableCell = <T extends TableRowData>(props: TableCellProps<T>) => {
-  const { columns, row, rowIndex } = props;
+  const { columns, row, rowIndex, childIndex } = props;
   return (
     <>
       {columns.map((column, columnIndex) => (
@@ -29,9 +31,11 @@ export const TableCell = <T extends TableRowData>(props: TableCellProps<T>) => {
             column.width ? { minWidth: column.width, width: column.width } : undefined
           }>
           {column.key === 'actions' ? (
-            <div>{column.cell({} as T[Extract<keyof T, string>], row, rowIndex)}</div>
+            <div>
+              {column.cell({} as T[Extract<keyof T, string>], row, rowIndex, childIndex)}
+            </div>
           ) : (
-            column.cell(row[column.key], row, rowIndex)
+            column.cell(row[column.key], row, rowIndex, childIndex)
           )}
         </td>
       ))}