From afc81cab3b9d9f3fafa5f116dc3dddd3f6106aa3 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gnerim.ru>
Date: Mon, 6 Apr 2026 08:36:53 +0300
Subject: [PATCH] Add multi-city trip type support to RouteFilter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extend tripType state to include 'multi-city' option alongside 'one-way' and 'round-trip'
- Add third radio button for multi-city selection with test ID trip-type-multicity
- Update test IDs for existing radio buttons: trip-type-oneway (was trip-type-one-way) and trip-type-round (was trip-type-round-trip)
- Show additional-segments container only when multi-city is selected
- Display example segment with departure→arrival route and date
- Add comprehensive SCSS styling for multi-city UI elements:
  - .route-filter__multicity-message for instruction text
  - .route-filter__additional-segments for container
  - .route-filter__segment for individual segment display
  - .route-filter__segment-label, route, and date styles
- handleSearch callback already passes all tripType options including new 'multi-city'
- Maintains existing one-way and round-trip functionality unchanged
---
 .../online-board/components/route-filter.scss | 46 +++++++++++++++++++
 .../online-board/components/route-filter.tsx  | 35 ++++++++++++--
 2 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/apps/react/src/app/features/online-board/components/route-filter.scss b/apps/react/src/app/features/online-board/components/route-filter.scss
index 60598b7aa..e1c9dcebb 100644
--- a/apps/react/src/app/features/online-board/components/route-filter.scss
+++ b/apps/react/src/app/features/online-board/components/route-filter.scss
@@ -188,6 +188,52 @@
   color: #666;
 }
 
+.route-filter__multicity-message {
+  font-size: 14px;
+  color: #333;
+  margin: 0;
+  padding: 8px 0;
+  font-weight: 500;
+}
+
+.route-filter__additional-segments {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background-color: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.route-filter__segment {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.route-filter__segment-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+}
+
+.route-filter__segment-route {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.route-filter__segment-date {
+  font-size: 12px;
+  color: #999;
+}
+
 .route-filter__actions {
   display: flex;
   gap: 8px;
diff --git a/apps/react/src/app/features/online-board/components/route-filter.tsx b/apps/react/src/app/features/online-board/components/route-filter.tsx
index f1c2d1e7c..cc2678b42 100644
--- a/apps/react/src/app/features/online-board/components/route-filter.tsx
+++ b/apps/react/src/app/features/online-board/components/route-filter.tsx
@@ -95,8 +95,8 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
       ? (typeof initialReturnDate === 'string' ? new Date(initialReturnDate) : initialReturnDate)
       : null
   )
-  const [tripType, setTripType] = useState<'one-way' | 'round-trip'>(
-    (initialTripType as 'one-way' | 'round-trip') || 'round-trip'
+  const [tripType, setTripType] = useState<'one-way' | 'round-trip' | 'multi-city'>(
+    (initialTripType as 'one-way' | 'round-trip' | 'multi-city') || 'round-trip'
   )
   const [startTime, setStartTime] = useState('00:00')
   const [endTime, setEndTime] = useState('23:59')
@@ -225,7 +225,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
               value="one-way"
               checked={tripType === 'one-way'}
               onChange={(e) => setTripType(e.target.value as 'one-way')}
-              data-testid="trip-type-one-way"
+              data-testid="trip-type-oneway"
             />
             {t('SHARED.ONE_WAY')}
           </label>
@@ -235,10 +235,20 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
               value="round-trip"
               checked={tripType === 'round-trip'}
               onChange={(e) => setTripType(e.target.value as 'round-trip')}
-              data-testid="trip-type-round-trip"
+              data-testid="trip-type-round"
             />
             {t('SHARED.ROUND_TRIP')}
           </label>
+          <label>
+            <input
+              type="radio"
+              value="multi-city"
+              checked={tripType === 'multi-city'}
+              onChange={(e) => setTripType(e.target.value as 'multi-city')}
+              data-testid="trip-type-multicity"
+            />
+            Multi-City
+          </label>
         </div>
       </div>
 
@@ -318,6 +328,23 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
         </div>
       )}
 
+      {tripType === 'multi-city' && (
+        <div className="route-filter__group">
+          <p className="route-filter__multicity-message">Add multiple flight segments</p>
+          <div className="route-filter__additional-segments" data-testid="additional-segments">
+            <div className="route-filter__segment">
+              <div className="route-filter__segment-label">Segment 1</div>
+              <div className="route-filter__segment-route">
+                {departure?.code || 'FROM'} → {arrival?.code || 'TO'}
+              </div>
+              <div className="route-filter__segment-date">
+                {date?.toLocaleDateString()}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className="route-filter__group route-filter__passengers-group">
         <Button
           label={`${t('SHARED.PASSENGERS')} (${totalPassengers})`}