mautourco-components 0.2.46 → 0.2.47

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

@@ -40,8 +40,12 @@ export interface SearchBarTransferProps {
   onSearch?: (data: SearchBarTransferData) => void;
   /** Callback when data changes */
   onChange?: (data: SearchBarTransferData) => void;
+  /** Callback when a transfer line is removed */
+  onRemove?: (index: number, transferLine: TransferLineData) => void;
   /** Additional CSS classes */
   className?: string;
+  /** Whether to scroll to the input when the calendar opens */
+  scrollOnOpen?: boolean;
 }
 
 let transferIdCounter = 0;
@@ -54,7 +58,9 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
   defaultSameVehicle = false,
   onSearch,
   onChange,
+  onRemove,
   className = "",
+  scrollOnOpen = false,
 }) => {
   // Generate unique ID for transfer lines
   const generateTransferId = () => {
@@ -101,27 +107,9 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     const transferMode = newMode as TransferMode;
     if (transferMode === mode) return;
 
-    if (transferMode === "custom" && mode === "roundtrip" && roundTripData) {
-      // Parse 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,
-      };
-
-      setTransferLines([arrivalTransfer, departureTransfer]);
+    if (transferMode === "custom" && mode === "roundtrip") {
+      // When switching to custom mode, reset transfer lines (will show placeholder)
+      setTransferLines([]);
       setRoundTripData(undefined);
     } else if (transferMode === "roundtrip" && mode === "custom") {
       // Reset everything when switching to roundtrip
@@ -172,46 +160,16 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
     </div>
   );
 
-  // Handle adding transfer from round-trip mode (converts round-trip to custom and adds new transfer)
+  // Handle adding transfer from round-trip mode (switches 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]);
+    // Set the transfer and switch to custom mode
+    setTransferLines([newTransfer]);
     setRoundTripData(undefined);
     setMode("custom");
     setError(null);
@@ -226,6 +184,13 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
 
   // Handle transfer line deletion
   const handleDeleteTransferLine = (id: string) => {
+    const index = transferLines.findIndex((line) => line.id === id);
+    const transferLine = transferLines.find((line) => line.id === id);
+    
+    if (index !== -1 && transferLine) {
+      onRemove?.(index, transferLine);
+    }
+    
     setTransferLines((prevLines) => prevLines.filter((line) => line.id !== id));
   };
 
@@ -314,6 +279,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
             accommodation={roundTripData?.accommodation?.id as string}
             onChange={setRoundTripData}
             checkEmpty={error !== null}
+            scrollOnOpen={scrollOnOpen}
           />
           {/* Transfer type buttons for round-trip mode */}
           <div className="search-bar-transfer__transfer-type">
@@ -330,6 +296,19 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
             {renderTransferTypeButtons(handleAddTransfer)}
           </div>
 
+          {/* Show placeholder disabled transfer line when there are no transfers */}
+          {transferLines.length === 0 && (
+            <TransferLine
+              id="placeholder-transfer"
+              type="inter-hotel"
+              locations={locations}
+              onDataChange={() => {}}
+              showDelete={false}
+              disabled={true}
+              scrollOnOpen={scrollOnOpen}
+            />
+          )}
+
           {/* Transfer lines list */}
           {transferLines.length > 0 && (
             <div className="search-bar-transfer__transfer-lines">
@@ -381,6 +360,7 @@ const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
                         onDelete={() => handleDeleteTransferLine(line.id)}
                         showDelete={transferLines.length > 1}
                         checkEmpty={error !== null}
+                        scrollOnOpen={scrollOnOpen}
                       />
                     ))}
 

package/src/components/organisms/TransferLine/TransferLine.tsx

@@ -1,16 +1,16 @@
-import React, { useState } from "react";
-import "../../../styles/components/organism/transfer-line.css";
-import Icon from "../../atoms/Icon/Icon";
-import { Text } from "../../atoms/Typography/Typography";
+import React, { useState } from 'react';
+import '../../../styles/components/organism/transfer-line.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
 import LocationDropdown, {
     LocationData,
     LocationGroup,
     LocationOption,
-} from "../../molecules/LocationDropdown/LocationDropdown";
-import DateTimePicker from "../DateTimePicker/DateTimePicker";
-import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
+} from '../../molecules/LocationDropdown/LocationDropdown';
+import DateTimePicker from '../DateTimePicker/DateTimePicker';
+import PaxSelector, { PaxData } from '../PaxSelector/PaxSelector';
 
-export type TransferType = "arrival" | "departure" | "inter-hotel";
+export type TransferType = 'arrival' | 'departure' | 'inter-hotel';
 
 // Re-export LocationData for convenience
 export type { LocationData };
@@ -62,6 +62,10 @@ export interface TransferLineProps {
   className?: string;
   /** Whether to check if inputs are empty */
   checkEmpty?: boolean;
+  /** Whether the transfer line is disabled (placeholder state) */
+  disabled?: boolean;
+  /** Whether to scroll to the input when the calendar opens */
+  scrollOnOpen?: boolean;
 }
 
 const TransferLine: React.FC<TransferLineProps> = ({
@@ -79,22 +83,22 @@ const TransferLine: React.FC<TransferLineProps> = ({
   onDataChange,
   onDelete,
   showDelete = true,
-    showTitle = false,
-  className = "",
+  showTitle = false,
+  className = '',
   checkEmpty = false,
+  disabled = false,
+  scrollOnOpen = false,
 }) => {
-  const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
-    paxData
+  const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(paxData);
+  const [internalTransferDate, setInternalTransferDate] = useState<string | undefined>(
+    transferDate
+  );
+  const [internalPickupPoint, setInternalPickupPoint] = useState<LocationData | null>(
+    null
+  );
+  const [internalDropoffPoint, setInternalDropoffPoint] = useState<LocationData | null>(
+    null
   );
-  const [internalTransferDate, setInternalTransferDate] = useState<
-    string | undefined
-  >(transferDate);
-  const [internalPickupPoint, setInternalPickupPoint] = useState<
-    LocationData | null
-  >(null);
-  const [internalDropoffPoint, setInternalDropoffPoint] = useState<
-    LocationData | null
-  >(null);
 
   // Helper function to get all locations (from options and groups)
   const getAllLocations = (
@@ -109,9 +113,9 @@ const TransferLine: React.FC<TransferLineProps> = ({
   const filterLocations = (position: 'pickup' | 'dropoff') => {
     const allOptions = locations.options || [];
     const allGroups = locations.groups || [];
-    
+
     let filterTypes: Array<'airport' | 'port' | 'accommodation'> = [];
-    
+
     if (type === 'arrival') {
       filterTypes = position === 'pickup' ? ['airport', 'port'] : ['accommodation'];
     } else if (type === 'departure') {
@@ -119,15 +123,15 @@ const TransferLine: React.FC<TransferLineProps> = ({
     } else if (type === 'inter-hotel') {
       filterTypes = ['accommodation'];
     }
-    
-    const filteredOptions = allOptions.filter(opt => filterTypes.includes(opt.type));
+
+    const filteredOptions = allOptions.filter((opt) => filterTypes.includes(opt.type));
     const filteredGroups = allGroups
-      .map(group => ({
+      .map((group) => ({
         ...group,
-        options: group.options.filter(opt => filterTypes.includes(opt.type))
+        options: group.options.filter((opt) => filterTypes.includes(opt.type)),
       }))
-      .filter(group => group.options.length > 0);
-    
+      .filter((group) => group.options.length > 0);
+
     return { options: filteredOptions, groups: filteredGroups };
   };
 
@@ -135,12 +139,17 @@ const TransferLine: React.FC<TransferLineProps> = ({
   const getDefaultLocation = (position: 'pickup' | 'dropoff'): LocationOption | null => {
     const { options, groups } = filterLocations(position);
     const allLocations = getAllLocations(options, groups);
-    
+
     // For arrival pickup or departure dropoff, default to first airport
-    if ((type === 'arrival' && position === 'pickup') || (type === 'departure' && position === 'dropoff')) {
-      return allLocations.find(loc => loc.type === 'airport') || allLocations[0] || null;
+    if (
+      (type === 'arrival' && position === 'pickup') ||
+      (type === 'departure' && position === 'dropoff')
+    ) {
+      return (
+        allLocations.find((loc) => loc.type === 'airport') || allLocations[0] || null
+      );
     }
-    
+
     return null;
   };
 
@@ -148,7 +157,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
   React.useEffect(() => {
     const { options, groups } = filterLocations('pickup');
     const allPickupLocations = getAllLocations(options, groups);
-    
+
     if (pickupPoint) {
       const location = allPickupLocations.find((loc) => loc.id === pickupPoint);
       if (location) {
@@ -175,7 +184,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
   React.useEffect(() => {
     const { options, groups } = filterLocations('dropoff');
     const allDropoffLocations = getAllLocations(options, groups);
-    
+
     if (dropoffPoint) {
       const location = allDropoffLocations.find((loc) => loc.id === dropoffPoint);
       if (location) {
@@ -211,31 +220,38 @@ const TransferLine: React.FC<TransferLineProps> = ({
     };
     onDataChange?.(completeData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, type, internalPaxData, internalTransferDate, internalPickupPoint, internalDropoffPoint]);
+  }, [
+    id,
+    type,
+    internalPaxData,
+    internalTransferDate,
+    internalPickupPoint,
+    internalDropoffPoint,
+  ]);
 
   const getTypeIcon = () => {
     switch (type) {
-      case "arrival":
-        return "arrival";
-      case "departure":
-        return "departure";
-      case "inter-hotel":
-        return "building";
+      case 'arrival':
+        return 'arrival';
+      case 'departure':
+        return 'departure';
+      case 'inter-hotel':
+        return 'building';
       default:
-        return "arrival";
+        return 'arrival';
     }
   };
 
   const getTypeLabel = () => {
     switch (type) {
-      case "arrival":
-        return "Arrival";
-      case "departure":
-        return "Departure";
-      case "inter-hotel":
-        return "Inter-Hotel";
+      case 'arrival':
+        return 'Arrival';
+      case 'departure':
+        return 'Departure';
+      case 'inter-hotel':
+        return 'Inter-Hotel';
       default:
-        return "Transfer";
+        return 'Transfer';
     }
   };
 
@@ -261,13 +277,16 @@ const TransferLine: React.FC<TransferLineProps> = ({
   };
 
   // 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 isPaxEmpty =
+    checkEmpty &&
+    (!internalPaxData ||
+      (internalPaxData.adults === 0 &&
+        internalPaxData.teens === 0 &&
+        internalPaxData.children === 0 &&
+        (internalPaxData.infants === undefined || internalPaxData.infants === 0)));
 
-  const isDateEmpty = checkEmpty && (!internalTransferDate || internalTransferDate === '');
+  const isDateEmpty =
+    checkEmpty && (!internalTransferDate || internalTransferDate === '');
 
   const isPickupEmpty = checkEmpty && !internalPickupPoint;
 
@@ -275,22 +294,13 @@ const TransferLine: React.FC<TransferLineProps> = ({
 
   return (
     <div
-      className={`transfer-line transfer-line--${type} ${className}`}
-      data-transfer-id={id}
-    >
+      className={`transfer-line transfer-line--${type} ${disabled ? 'transfer-line--disabled' : ''} ${className}`}
+      data-transfer-id={id}>
       {/* Transfer type header */}
       {showTitle && (
         <div className="transfer-line__header">
-          <Icon
-            name={getTypeIcon()}
-            size="sm"
-            className="transfer-line__header-icon"
-          />
-          <Text
-            size="sm"
-            variant="medium"
-            className="transfer-line__header-label"
-          >
+          <Icon name={getTypeIcon()} size="sm" className="transfer-line__header-icon" />
+          <Text size="sm" variant="medium" className="transfer-line__header-label">
             {getTypeLabel()}
           </Text>
         </div>
@@ -300,23 +310,22 @@ const TransferLine: React.FC<TransferLineProps> = ({
       <div className="transfer-line__content-container">
         <div className="transfer-line__content">
           {/* Number of pax */}
-          <div className={`transfer-line__field transfer-line__field--pax ${isPaxEmpty ? 'transfer-line__field--error' : ''}`}>
+          <div
+            className={`transfer-line__field transfer-line__field--pax ${isPaxEmpty ? 'transfer-line__field--error' : ''}`}>
             <PaxSelector
               label="Number of pax"
               value={internalPaxData}
               onChange={handlePaxChange}
               placeholder="2 pax"
               className={isPaxEmpty ? 'pax-selector--error' : ''}
+              disabled={disabled}
+              scrollOnOpen={scrollOnOpen}
             />
           </div>
 
           {/* Transfer date */}
           <div className="transfer-line__field transfer-line__field--date">
-            <Text
-              size="sm"
-              variant="regular"
-              className="transfer-line__field-label"
-            >
+            <Text size="sm" variant="regular" className="transfer-line__field-label">
               Transfer date
             </Text>
             <DateTimePicker
@@ -331,6 +340,8 @@ const TransferLine: React.FC<TransferLineProps> = ({
               defaultValue={internalTransferDate}
               inputClassName="transfer-line__date-picker"
               state={isDateEmpty ? 'error' : undefined}
+              disabled={disabled}
+              scrollOnOpen={scrollOnOpen}
             />
           </div>
 
@@ -344,9 +355,17 @@ const TransferLine: React.FC<TransferLineProps> = ({
               onSelectionChange={handlePickupChange}
               placeholder="Select a pick-up point"
               direction="pickup"
-              type={type === 'inter-hotel' ? 'accommodation' : type === 'arrival' ? 'airport-port' : 'accommodation'}
+              type={
+                type === 'inter-hotel'
+                  ? 'accommodation'
+                  : type === 'arrival'
+                    ? 'airport-port'
+                    : 'accommodation'
+              }
               showGroupTitles={false}
               error={isPickupEmpty}
+              disabled={disabled}
+              scrollOnOpen={scrollOnOpen}
             />
           </div>
 
@@ -360,26 +379,29 @@ const TransferLine: React.FC<TransferLineProps> = ({
               onSelectionChange={handleDropoffChange}
               placeholder="Select a drop-off point"
               direction="dropoff"
-              type={type === 'inter-hotel' ? 'accommodation' : type === 'departure' ? 'airport-port' : 'accommodation'}
+              type={
+                type === 'inter-hotel'
+                  ? 'accommodation'
+                  : type === 'departure'
+                    ? 'airport-port'
+                    : 'accommodation'
+              }
               showGroupTitles={false}
               error={isDropoffEmpty}
+              disabled={disabled}
+              scrollOnOpen={scrollOnOpen}
             />
           </div>
         </div>
         {/* Delete button */}
-        {showDelete && (
+        {showDelete && !disabled && (
           <div className="transfer-line__delete">
             <button
               type="button"
               className="transfer-line__delete-btn"
               onClick={onDelete}
-              aria-label="Delete transfer line"
-            >
-              <Icon
-                name="delete"
-                size="sm"
-                className="transfer-line__delete-icon"
-              />
+              aria-label="Delete transfer line">
+              <Icon name="delete" size="sm" className="transfer-line__delete-icon" />
             </button>
           </div>
         )}

package/src/styles/components/molecule/age-selector.css

@@ -0,0 +1,136 @@
+/* AgeSelector Component Styles */
+
+.age-selector {
+  @apply relative flex flex-col gap-2 w-20;
+}
+
+/* Label */
+.age-selector__label {
+  @apply text-[var(--dropdown-color-label-default,#262626)] text-sm font-normal;
+}
+
+.age-selector__required {
+  @apply text-[var(--chip-color-red-outline-foreground,#991b1b)];
+}
+
+/* Container */
+.age-selector__container {
+  @apply relative w-full;
+}
+
+/* Input wrapper - matching Figma design */
+.age-selector__input {
+  @apply flex items-center justify-between gap-2 w-full;
+  @apply bg-white border border-[#262626] rounded-xl;
+  @apply px-4 py-3;
+  @apply transition-all duration-200;
+  @apply cursor-default;
+}
+
+.age-selector__input:hover {
+  @apply border-[var(--dropdown-color-border-hover,#0f7173)];
+}
+
+.age-selector__input--open {
+  @apply border-[var(--dropdown-color-border-hover,#0f7173)];
+}
+
+.age-selector__input--default .age-selector__input-field::placeholder {
+  @apply text-[var(--dropdown-selector-color-filled-foreground-default,#737373)];
+}
+
+/* Input field */
+.age-selector__input-field {
+  @apply flex-1 bg-transparent border-none outline-none;
+  @apply text-sm font-medium leading-5;
+  @apply text-[var(--dropdown-color-foreground-value,#262626)];
+  @apply cursor-text;
+  min-width: 0;
+}
+
+.age-selector__input-field::placeholder {
+  @apply text-[var(--dropdown-selector-color-filled-foreground-default,#737373)];
+}
+
+/* Dropdown button */
+.age-selector__dropdown-btn {
+  @apply flex items-center justify-center flex-shrink-0;
+  @apply bg-transparent border-none cursor-pointer;
+  @apply p-0 m-0;
+  @apply transition-all duration-200;
+}
+
+.age-selector__dropdown-btn:hover {
+  @apply opacity-80;
+}
+
+/* Icon */
+.age-selector__icon {
+  @apply text-[var(--color-text-default,#262626)];
+  @apply transition-transform duration-200;
+}
+
+.age-selector__icon--open {
+  @apply rotate-180;
+}
+
+/* Dropdown menu */
+.age-selector__dropdown {
+  @apply absolute top-full left-0 right-0 mt-1;
+  @apply bg-white border border-[var(--color-border-subtle,#e5e5e5)] rounded-xl;
+  @apply max-h-48 overflow-y-auto;
+  @apply z-50;
+  @apply shadow-lg;
+  animation: age-selector-dropdown-enter 0.15s ease-out;
+}
+
+@keyframes age-selector-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dropdown option */
+.age-selector__option {
+  @apply w-full px-3 py-2;
+  @apply text-sm font-medium leading-5;
+  @apply text-[var(--color-text-default,#262626)];
+  @apply bg-white cursor-pointer;
+  @apply transition-all duration-150;
+}
+
+.age-selector__option:hover {
+  @apply bg-[var(--dropdown-selector-color-select-item-background-hover,#115b5e)];
+  @apply text-white;
+}
+
+.age-selector__option--selected {
+  @apply bg-[var(--dropdown-selector-color-select-item-background-selected,#0f7173)];
+  @apply text-white;
+}
+
+.age-selector__option--selected:hover {
+  @apply bg-[var(--dropdown-selector-color-select-item-background-selected,#0f7173)];
+}
+
+/* Scrollbar styling */
+.age-selector__dropdown::-webkit-scrollbar {
+  @apply w-1.5;
+}
+
+.age-selector__dropdown::-webkit-scrollbar-track {
+  @apply bg-[#f3f4f6] rounded;
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb {
+  @apply bg-[#9ca3af] rounded;
+}
+
+.age-selector__dropdown::-webkit-scrollbar-thumb:hover {
+  @apply bg-[#6b7280];
+}

package/src/styles/components/molecule/calendarInput.css

@@ -158,19 +158,27 @@
 
 /* Disabled state */
 .calendar-input--disabled {
-  @apply border-[var(--color-neutral-400)] bg-[var(--color-surface-50)];
+  @apply border-[#d1d5db] bg-[#fbfbfb] cursor-not-allowed;
 }
 
 .calendar-input--disabled .calendar-input__field {
-  @apply cursor-not-allowed text-[var(--color-tuna-400)];
+  @apply cursor-not-allowed text-[#a3a3a3];
+}
+
+.calendar-input--disabled .calendar-input__field::placeholder {
+  @apply text-[#a3a3a3];
 }
 
 .calendar-input--disabled .calendar-input__icon-button {
-  @apply !bg-none !text-[var(--color-tuna-400)];
+  @apply !bg-none !text-[#a3a3a3] cursor-not-allowed;
 }
 
 .calendar-input--disabled .calendar-input__icon-button--full-bg {
-  @apply !bg-[var(--color-gray-200)] !text-[var(--color-tuna-400)];
+  @apply !bg-[#d1d5db] !text-[#a3a3a3] cursor-not-allowed;
+}
+
+.calendar-input--disabled .calendar-input__chevron {
+  @apply text-[#a3a3a3];
 }
 
 /* Responsive design */

package/src/styles/components/molecule/location-dropdown.css

@@ -79,13 +79,20 @@
 }
 
 .location-dropdown__input--disabled {
-  @apply bg-[var(--color-surface-50)] border-[var(--color-neutral-400)] cursor-not-allowed opacity-60;
+  @apply bg-[#fbfbfb] border-[#d1d5db] cursor-not-allowed;
 }
 
 .location-dropdown__input--disabled .location-dropdown__input-text,
 .location-dropdown__input--disabled .location-dropdown__input-icon,
 .location-dropdown__input--disabled .location-dropdown__input-chevron {
-  @apply text-[var(--color-neutral-400)];
+  @apply text-[#a3a3a3];
+}
+
+/* Disabled label - override all text elements */
+.location-dropdown--disabled .location-dropdown__label,
+.location-dropdown--disabled .location-dropdown__label p,
+.location-dropdown--disabled .location-dropdown__label * {
+  @apply text-[#a3a3a3] font-normal !important;
 }
 
 /* Dropdown Panel */