mautourco-components 0.2.5 → 0.2.8

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

@@ -1,388 +1,388 @@
-import React, { useState, useEffect } from "react";
-import RoundTrip, { RoundTripData } from "../RoundTrip/RoundTrip";
-import TransferLine, {
-  TransferLineData,
-  TransferType,
-} from "../TransferLine/TransferLine";
-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";
-
-export type TransferMode = "roundtrip" | "custom";
-
-export interface SearchBarTransferData {
-  mode: TransferMode;
-  sameVehicle: boolean;
-  roundTripData?: RoundTripData;
-  transferLines?: TransferLineData[];
-}
-
-export interface SearchBarTransferProps {
-  /** Initial mode */
-  mode?: TransferMode;
-  /** Location options for dropdowns */
-  locations?: {
-    options?: LocationOption[];
-    groups?: LocationGroup[];
-  };
-  /** Default round trip data (for roundtrip mode) */
-  defaultRoundTripData?: RoundTripData;
-  /** Default transfer lines (for custom mode) */
-  defaultTransferLines?: TransferLineData[];
-  /** Default "same vehicle" checkbox state */
-  defaultSameVehicle?: boolean;
-  /** Callback when search button is clicked */
-  onSearch?: (data: SearchBarTransferData) => void;
-  /** Callback when data changes */
-  onChange?: (data: SearchBarTransferData) => void;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-let transferIdCounter = 0;
-
-const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
-  mode: initialMode = "roundtrip",
-  locations = { options: [], groups: [] },
-  defaultRoundTripData,
-  defaultTransferLines,
-  defaultSameVehicle = false,
-  onSearch,
-  onChange,
-  className = "",
-}) => {
-  // Generate unique ID for transfer lines
-  const generateTransferId = () => {
-    transferIdCounter += 1;
-    return `transfer-${transferIdCounter}-${Date.now()}`;
-  };
-
-  // Ensure default transfer lines have IDs
-  const initializeTransferLines = (lines?: TransferLineData[]): TransferLineData[] => {
-    if (!lines) return [];
-    return lines.map((line) => ({
-      ...line,
-      id: line.id || generateTransferId(),
-    }));
-  };
-
-  const [mode, setMode] = useState<TransferMode>(initialMode);
-  const [sameVehicle, setSameVehicle] = useState(defaultSameVehicle);
-  const [roundTripData, setRoundTripData] = useState<RoundTripData | undefined>(defaultRoundTripData);
-  const [transferLines, setTransferLines] = useState<TransferLineData[]>(
-    initializeTransferLines(defaultTransferLines)
-  );
-  const [error, setError] = useState<string | null>(null);
-
-  // Notify parent of changes
-  useEffect(() => {
-    const data: SearchBarTransferData = {
-      mode,
-      sameVehicle,
-      roundTripData: mode === "roundtrip" ? roundTripData : undefined,
-      transferLines: mode === "custom" ? transferLines : undefined,
-    };
-    onChange?.(data);
-  }, [mode, sameVehicle, roundTripData, transferLines, onChange]);
-
-  // Mode options for SegmentedButton
-  const modeOptions: SegmentedButtonOption[] = [
-    { value: "roundtrip", label: "Round trip" },
-    { value: "custom", label: "Custom transfer" },
-  ];
-
-  // Handle mode change
-  const handleModeChange = (newMode: string) => {
-    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]);
-      setRoundTripData(undefined);
-    } else if (transferMode === "roundtrip" && mode === "custom") {
-      // Reset everything when switching to roundtrip
-      setTransferLines([]);
-      setRoundTripData(undefined);
-    }
-
-    setMode(transferMode);
-    setError(null);
-  };
-
-  // Handle adding transfer lines
-  const handleAddTransfer = (type: TransferType) => {
-    const newTransfer: TransferLineData = {
-      id: generateTransferId(),
-      type,
-    };
-    setTransferLines([...transferLines, newTransfer]);
-  };
-
-  // Handle transfer line data change
-  const handleTransferLineChange = (id: string, data: TransferLineData) => {
-    setTransferLines((prevLines) =>
-      prevLines.map((line) => (line.id === id ? data : line))
-    );
-  };
-
-  // Handle transfer line deletion
-  const handleDeleteTransferLine = (id: string) => {
-    setTransferLines((prevLines) => prevLines.filter((line) => line.id !== id));
-  };
-
-  // Validate data
-  const validateData = (): boolean => {
-    if (mode === "roundtrip") {
-      if (!roundTripData) {
-        setError("Please fill in all the transfer details.");
-        return false;
-      }
-      // Check if required fields are filled
-      if (
-        !roundTripData.paxData ||
-        !roundTripData.arrivalDate ||
-        !roundTripData.departureDate ||
-        !roundTripData.pickupDropoffPoint ||
-        !roundTripData.accommodation
-      ) {
-        setError("Please fill in all the transfer details.");
-        return false;
-      }
-    } else {
-      if (transferLines.length === 0) {
-        setError("Please add at least one transfer.");
-        return false;
-      }
-      // Check if all transfer lines have required data
-      for (const line of transferLines) {
-        if (
-          !line.paxData ||
-          !line.transferDate ||
-          !line.pickupPoint ||
-          !line.dropoffPoint
-        ) {
-          setError("Please fill in all the transfer details.");
-          return false;
-        }
-      }
-    }
-    setError(null);
-    return true;
-  };
-
-  // Handle search
-  const handleSearch = () => {
-    if (validateData()) {
-      const data: SearchBarTransferData = {
-        mode,
-        sameVehicle,
-        roundTripData: mode === "roundtrip" ? roundTripData : undefined,
-        transferLines: mode === "custom" ? transferLines : undefined,
-      };
-      onSearch?.(data);
-    }
-  };
-
-  return (
-    <div className={`search-bar-transfer ${className}`}>
-      {/* Header with title and mode selector */}
-      <div className="search-bar-transfer__header">
-        <Heading level={3} className="search-bar-transfer__title">
-          Select your transfer details
-        </Heading>
-
-        {/* Segmented Button for mode selection */}
-        <div className="search-bar-transfer__mode-selector">
-          <SegmentedButton
-            options={modeOptions}
-            value={mode}
-            onChange={handleModeChange}
-            name="transfer-mode"
-          />
-        </div>
-      </div>
-
-      {/* 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}
-        />
-      ) : (
-        <>
-          {/* Transfer type selector */}
-          <div className="search-bar-transfer__transfer-type">
-            <Text size="lg" variant="bold" 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>
-          </div>
-
-          {/* Transfer lines list */}
-          {transferLines.length > 0 && (
-            <div className="search-bar-transfer__transfer-lines">
-              {(() => {
-                // Group transfers by type
-                const groupedTransfers: { [key in TransferType]: TransferLineData[] } = {
-                  arrival: [],
-                  departure: [],
-                  "inter-hotel": [],
-                };
-
-                transferLines.forEach((line) => {
-                  groupedTransfers[line.type].push(line);
-                });
-
-                // Get the order of non-empty groups
-                const typeOrder: TransferType[] = ["arrival", "inter-hotel", "departure"];
-                const nonEmptyGroups = typeOrder.filter((type) => groupedTransfers[type].length > 0);
-
-                // Category labels and icons
-                const categoryInfo: { [key in TransferType]: { label: string; icon: IconName } } = {
-                  arrival: { label: "Arrival", icon: "arrival" },
-                  departure: { label: "Departure", icon: "departure" },
-                  "inter-hotel": { label: "Inter-Hotel", icon: "building" },
-                };
-
-                return nonEmptyGroups.map((type, groupIndex) => (
-                  <React.Fragment key={type}>
-                    {/* Category header */}
-                    <div className="search-bar-transfer__category-header">
-                      <Icon name={categoryInfo[type].icon} size="md" />
-                      <Text size="md" variant="bold" as="span">
-                        {categoryInfo[type].label}
-                      </Text>
-                    </div>
-
-                    {/* Transfer lines in this category */}
-                    {groupedTransfers[type].map((line) => (
-                      <TransferLine
-                        key={line.id}
-                        id={line.id}
-                        type={line.type}
-                        paxData={line.paxData}
-                        transferDate={line.transferDate}
-                        pickupPoint={line.pickupPoint?.id}
-                        dropoffPoint={line.dropoffPoint?.id}
-                        locations={locations}
-                        onDataChange={(data) => handleTransferLineChange(line.id, data)}
-                        onDelete={() => handleDeleteTransferLine(line.id)}
-                        showDelete={transferLines.length > 1}
-                      />
-                    ))}
-
-                    {/* Show separator between categories, but not after the last one */}
-                    {groupIndex < nonEmptyGroups.length - 1 && (
-                      <svg 
-                        className="search-bar-transfer__divider" 
-                        xmlns="http://www.w3.org/2000/svg" 
-                        width="100%" 
-                        height="1" 
-                        viewBox="0 0 1076 1" 
-                        fill="none"
-                        preserveAspectRatio="none"
-                      >
-                        <path 
-                          d="M0 0.5L1076 0.499906" 
-                          stroke="var(--color-border-medium, #A3A3A3)" 
-                          strokeWidth="1" 
-                          strokeDasharray="10 10"
-                        />
-                      </svg>
-                    )}
-                  </React.Fragment>
-                ));
-              })()}
-            </div>
-          )}
-        </>
-      )}
-
-      {/* Bottom actions */}
-      <div className="search-bar-transfer__actions">
-        <Checkbox
-          checked={sameVehicle}
-          onChange={setSameVehicle}
-          label="Use the same vehicle for all your transfers"
-        />
-
-        <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>
-          )}
-          <Button
-            variant="primary"
-            size="lg"
-            onClick={handleSearch}
-          >
-            Search
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SearchBarTransfer;
+import React, { useState, useEffect } from "react";
+import RoundTrip, { RoundTripData } from "../RoundTrip/RoundTrip";
+import TransferLine, {
+  TransferLineData,
+  TransferType,
+} from "../TransferLine/TransferLine";
+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";
+
+export type TransferMode = "roundtrip" | "custom";
+
+export interface SearchBarTransferData {
+  mode: TransferMode;
+  sameVehicle: boolean;
+  roundTripData?: RoundTripData;
+  transferLines?: TransferLineData[];
+}
+
+export interface SearchBarTransferProps {
+  /** Initial mode */
+  mode?: TransferMode;
+  /** Location options for dropdowns */
+  locations?: {
+    options?: LocationOption[];
+    groups?: LocationGroup[];
+  };
+  /** Default round trip data (for roundtrip mode) */
+  defaultRoundTripData?: RoundTripData;
+  /** Default transfer lines (for custom mode) */
+  defaultTransferLines?: TransferLineData[];
+  /** Default "same vehicle" checkbox state */
+  defaultSameVehicle?: boolean;
+  /** Callback when search button is clicked */
+  onSearch?: (data: SearchBarTransferData) => void;
+  /** Callback when data changes */
+  onChange?: (data: SearchBarTransferData) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+let transferIdCounter = 0;
+
+const SearchBarTransfer: React.FC<SearchBarTransferProps> = ({
+  mode: initialMode = "roundtrip",
+  locations = { options: [], groups: [] },
+  defaultRoundTripData,
+  defaultTransferLines,
+  defaultSameVehicle = false,
+  onSearch,
+  onChange,
+  className = "",
+}) => {
+  // Generate unique ID for transfer lines
+  const generateTransferId = () => {
+    transferIdCounter += 1;
+    return `transfer-${transferIdCounter}-${Date.now()}`;
+  };
+
+  // Ensure default transfer lines have IDs
+  const initializeTransferLines = (lines?: TransferLineData[]): TransferLineData[] => {
+    if (!lines) return [];
+    return lines.map((line) => ({
+      ...line,
+      id: line.id || generateTransferId(),
+    }));
+  };
+
+  const [mode, setMode] = useState<TransferMode>(initialMode);
+  const [sameVehicle, setSameVehicle] = useState(defaultSameVehicle);
+  const [roundTripData, setRoundTripData] = useState<RoundTripData | undefined>(defaultRoundTripData);
+  const [transferLines, setTransferLines] = useState<TransferLineData[]>(
+    initializeTransferLines(defaultTransferLines)
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  // Notify parent of changes
+  useEffect(() => {
+    const data: SearchBarTransferData = {
+      mode,
+      sameVehicle,
+      roundTripData: mode === "roundtrip" ? roundTripData : undefined,
+      transferLines: mode === "custom" ? transferLines : undefined,
+    };
+    onChange?.(data);
+  }, [mode, sameVehicle, roundTripData, transferLines, onChange]);
+
+  // Mode options for SegmentedButton
+  const modeOptions: SegmentedButtonOption[] = [
+    { value: "roundtrip", label: "Round trip" },
+    { value: "custom", label: "Custom transfer" },
+  ];
+
+  // Handle mode change
+  const handleModeChange = (newMode: string) => {
+    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]);
+      setRoundTripData(undefined);
+    } else if (transferMode === "roundtrip" && mode === "custom") {
+      // Reset everything when switching to roundtrip
+      setTransferLines([]);
+      setRoundTripData(undefined);
+    }
+
+    setMode(transferMode);
+    setError(null);
+  };
+
+  // Handle adding transfer lines
+  const handleAddTransfer = (type: TransferType) => {
+    const newTransfer: TransferLineData = {
+      id: generateTransferId(),
+      type,
+    };
+    setTransferLines([...transferLines, newTransfer]);
+  };
+
+  // Handle transfer line data change
+  const handleTransferLineChange = (id: string, data: TransferLineData) => {
+    setTransferLines((prevLines) =>
+      prevLines.map((line) => (line.id === id ? data : line))
+    );
+  };
+
+  // Handle transfer line deletion
+  const handleDeleteTransferLine = (id: string) => {
+    setTransferLines((prevLines) => prevLines.filter((line) => line.id !== id));
+  };
+
+  // Validate data
+  const validateData = (): boolean => {
+    if (mode === "roundtrip") {
+      if (!roundTripData) {
+        setError("Please fill in all the transfer details.");
+        return false;
+      }
+      // Check if required fields are filled
+      if (
+        !roundTripData.paxData ||
+        !roundTripData.arrivalDate ||
+        !roundTripData.departureDate ||
+        !roundTripData.pickupDropoffPoint ||
+        !roundTripData.accommodation
+      ) {
+        setError("Please fill in all the transfer details.");
+        return false;
+      }
+    } else {
+      if (transferLines.length === 0) {
+        setError("Please add at least one transfer.");
+        return false;
+      }
+      // Check if all transfer lines have required data
+      for (const line of transferLines) {
+        if (
+          !line.paxData ||
+          !line.transferDate ||
+          !line.pickupPoint ||
+          !line.dropoffPoint
+        ) {
+          setError("Please fill in all the transfer details.");
+          return false;
+        }
+      }
+    }
+    setError(null);
+    return true;
+  };
+
+  // Handle search
+  const handleSearch = () => {
+    if (validateData()) {
+      const data: SearchBarTransferData = {
+        mode,
+        sameVehicle,
+        roundTripData: mode === "roundtrip" ? roundTripData : undefined,
+        transferLines: mode === "custom" ? transferLines : undefined,
+      };
+      onSearch?.(data);
+    }
+  };
+
+  return (
+    <div className={`search-bar-transfer ${className}`}>
+      {/* Header with title and mode selector */}
+      <div className="search-bar-transfer__header">
+        <Heading level={5} variant="bold" color="accent">
+          Select your transfer details
+        </Heading>
+
+        {/* Segmented Button for mode selection */}
+        <div className="search-bar-transfer__mode-selector">
+          <SegmentedButton
+            options={modeOptions}
+            value={mode}
+            onChange={handleModeChange}
+            name="transfer-mode"
+          />
+        </div>
+      </div>
+
+      {/* 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}
+        />
+      ) : (
+        <>
+          {/* Transfer type selector */}
+          <div className="search-bar-transfer__transfer-type">
+            <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>
+          </div>
+
+          {/* Transfer lines list */}
+          {transferLines.length > 0 && (
+            <div className="search-bar-transfer__transfer-lines">
+              {(() => {
+                // Group transfers by type
+                const groupedTransfers: { [key in TransferType]: TransferLineData[] } = {
+                  arrival: [],
+                  departure: [],
+                  "inter-hotel": [],
+                };
+
+                transferLines.forEach((line) => {
+                  groupedTransfers[line.type].push(line);
+                });
+
+                // Get the order of non-empty groups
+                const typeOrder: TransferType[] = ["arrival", "inter-hotel", "departure"];
+                const nonEmptyGroups = typeOrder.filter((type) => groupedTransfers[type].length > 0);
+
+                // Category labels and icons
+                const categoryInfo: { [key in TransferType]: { label: string; icon: IconName } } = {
+                  arrival: { label: "Arrival", icon: "arrival" },
+                  departure: { label: "Departure", icon: "departure" },
+                  "inter-hotel": { label: "Inter-Hotel", icon: "building" },
+                };
+
+                return nonEmptyGroups.map((type, groupIndex) => (
+                  <React.Fragment key={type}>
+                    {/* Category header */}
+                    <div className="search-bar-transfer__category-header">
+                      <Icon name={categoryInfo[type].icon} size="md" />
+                      <Text size="md" variant="bold" color="default" as="span">
+                        {categoryInfo[type].label}
+                      </Text>
+                    </div>
+
+                    {/* Transfer lines in this category */}
+                    {groupedTransfers[type].map((line) => (
+                      <TransferLine
+                        key={line.id}
+                        id={line.id}
+                        type={line.type}
+                        paxData={line.paxData}
+                        transferDate={line.transferDate}
+                        pickupPoint={line.pickupPoint?.id}
+                        dropoffPoint={line.dropoffPoint?.id}
+                        locations={locations}
+                        onDataChange={(data) => handleTransferLineChange(line.id, data)}
+                        onDelete={() => handleDeleteTransferLine(line.id)}
+                        showDelete={transferLines.length > 1}
+                      />
+                    ))}
+
+                    {/* Show separator between categories, but not after the last one */}
+                    {groupIndex < nonEmptyGroups.length - 1 && (
+                      <svg 
+                        className="search-bar-transfer__divider" 
+                        xmlns="http://www.w3.org/2000/svg" 
+                        width="100%" 
+                        height="1" 
+                        viewBox="0 0 1076 1" 
+                        fill="none"
+                        preserveAspectRatio="none"
+                      >
+                        <path 
+                          d="M0 0.5L1076 0.499906" 
+                          stroke="var(--color-border-medium, #A3A3A3)" 
+                          strokeWidth="1" 
+                          strokeDasharray="10 10"
+                        />
+                      </svg>
+                    )}
+                  </React.Fragment>
+                ));
+              })()}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Bottom actions */}
+      <div className="search-bar-transfer__actions">
+        <Checkbox
+          checked={sameVehicle}
+          onChange={setSameVehicle}
+          label="Use the same vehicle for all your transfers"
+        />
+
+        <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>
+          )}
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={handleSearch}
+          >
+            Search
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBarTransfer;