Add Google Flights-style step-based round-trip booking flow

Replace outbound/return toggle with a two-step selection flow: users
first pick a departing flight (showing "from $X round trip" preview
prices), then see return flights priced as round-trip totals with
same-airline discounts applied per-selection rather than blanket.

Backend: move same-airline discount (0.92x) from server-side blanket
application to client-side per-selection; return discount rate in API.
Frontend: add step breadcrumb, SelectedFlightBanner, pricing utilities,
and round-trip-aware sorting. One-way searches unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backend/api/search.py

@@ -171,19 +171,9 @@ async def search_flights(req: SearchRequest):
             )
             return_flights.extend(flights)
 
-        # Round-trip same-airline discount: return flights that share at least
-        # one carrier with any outbound flight get a price reduction, simulating
-        # bundled round-trip fares.  (See config.py for the multiplier value.)
-        if outbound_flights:
-            outbound_airlines = set()
-            for fl in outbound_flights:
-                for seg in fl.segments:
-                    outbound_airlines.add(seg.airline_code)
-
-            for fl in return_flights:
-                flight_airlines = {seg.airline_code for seg in fl.segments}
-                if flight_airlines & outbound_airlines:
-                    fl.price_usd = round(fl.price_usd * ROUND_TRIP_SAME_AIRLINE_DISCOUNT, 0)
+        # Round-trip same-airline discount is now applied client-side based on
+        # the user's selected outbound flight (not blanket across all outbound
+        # airlines).  The discount rate is returned in same_airline_discount.
 
         return_flights = _apply_filters(return_flights, req)
         return_flights = _sort_flights(return_flights, req.sort_by)
@@ -198,4 +188,5 @@ async def search_flights(req: SearchRequest):
         search_id=search_id,
         origin=origin,
         destination=destination,
+        same_airline_discount=ROUND_TRIP_SAME_AIRLINE_DISCOUNT if return_flights else 1.0,
     )

backend/models.py

@@ -127,6 +127,7 @@ class SearchResponse(BaseModel):
     search_id: str
     origin: str
     destination: str
+    same_airline_discount: float = 1.0
 
 
 # --- Calendar ---

frontend/src/api/types.ts

@@ -84,6 +84,7 @@ export interface SearchResponse {
   search_id: string;
   origin: string;
   destination: string;
+  same_airline_discount: number;
 }
 
 export interface CalendarDay {

frontend/src/components/results/FlightCard.tsx

@@ -4,13 +4,17 @@ import { daysBetween, formatDuration, formatPrice, formatStops, formatTime } fro
 
 interface Props {
   flight: FlightOffer;
+  roundTripPrice?: number | null;
+  priceLabel?: string;
+  onSelect?: (flight: FlightOffer) => void;
+  discountApplied?: boolean;
 }
 
 function layoverMinutes(seg1Arrival: string, seg2Departure: string): number {
   return Math.round((new Date(seg2Departure).getTime() - new Date(seg1Arrival).getTime()) / 60000);
 }
 
-export default function FlightCard({ flight }: Props) {
+export default function FlightCard({ flight, roundTripPrice, priceLabel, onSelect, discountApplied }: Props) {
   const [expanded, setExpanded] = useState(false);
   const firstSeg = flight.segments[0];
 
@@ -76,8 +80,20 @@ export default function FlightCard({ flight }: Props) {
 
         {/* Price column */}
         <div className="text-right pl-3 min-w-[80px]" data-testid="price">
-          <div className="text-[15px] font-medium text-gray-900">{formatPrice(flight.price_usd)}</div>
-          <div className="text-[11px] text-gray-500">{flight.cabin_class.replace('_', ' ')}</div>
+          {roundTripPrice != null ? (
+            <>
+              <div className="text-[15px] font-medium text-gray-900">{formatPrice(roundTripPrice)}</div>
+              <div className="text-[11px] text-gray-500">{priceLabel || 'round trip'}</div>
+            </>
+          ) : (
+            <>
+              <div className="text-[15px] font-medium text-gray-900">{formatPrice(flight.price_usd)}</div>
+              <div className="text-[11px] text-gray-500">{flight.cabin_class.replace('_', ' ')}</div>
+            </>
+          )}
+          {discountApplied && (
+            <div className="text-[10px] text-green-600 mt-0.5">Airline discount</div>
+          )}
         </div>
 
         {/* Chevron */}
@@ -89,6 +105,19 @@ export default function FlightCard({ flight }: Props) {
         </svg>
       </div>
 
+      {/* Select flight button */}
+      {onSelect && (
+        <div className="px-4 pb-3 -mt-1">
+          <button
+            onClick={(e) => { e.stopPropagation(); onSelect(flight); }}
+            className="w-full rounded-full bg-[#1a73e8] px-4 py-2 text-sm font-medium text-white hover:bg-[#1557b0] cursor-pointer"
+            data-testid="select-flight-btn"
+          >
+            Select flight
+          </button>
+        </div>
+      )}
+
       {/* Expanded detail view */}
       {expanded && (
         <div className="border-t border-gray-100 px-4 pt-3 pb-4" data-testid="segments-detail">

frontend/src/components/results/SelectedFlightBanner.tsx

@@ -0,0 +1,51 @@
+import type { FlightOffer } from '../../api/types';
+import { formatDuration, formatPrice, formatStops, formatTime } from '../../utils/format';
+
+interface Props {
+  flight: FlightOffer;
+  onChangeClick: () => void;
+}
+
+export default function SelectedFlightBanner({ flight, onChangeClick }: Props) {
+  const airlineNames = [...new Set(flight.segments.map(s => s.airline_name))];
+
+  return (
+    <div
+      className="mb-4 flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 px-4 py-3"
+      data-testid="selected-flight-banner"
+    >
+      <div className="flex items-center gap-4 min-w-0">
+        {/* Airline badge */}
+        <div className="flex h-8 w-8 items-center justify-center rounded bg-white text-[11px] font-bold text-gray-600 flex-shrink-0">
+          {flight.segments[0].airline_code}
+        </div>
+
+        {/* Flight summary */}
+        <div className="min-w-0">
+          <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+            <span>{formatTime(flight.departure)}</span>
+            <span className="text-gray-400">&ndash;</span>
+            <span>{formatTime(flight.arrival)}</span>
+          </div>
+          <div className="text-xs text-gray-500 truncate">
+            {airlineNames.join(', ')} · {formatDuration(flight.total_duration_minutes)} · {formatStops(flight.stops)}
+          </div>
+        </div>
+
+        {/* Price */}
+        <div className="text-sm font-medium text-gray-900 flex-shrink-0 ml-2">
+          {formatPrice(flight.price_usd)}
+        </div>
+      </div>
+
+      {/* Change button */}
+      <button
+        onClick={onChangeClick}
+        className="ml-4 flex-shrink-0 rounded-full border border-[#1a73e8] px-4 py-1.5 text-sm font-medium text-[#1a73e8] hover:bg-blue-50 cursor-pointer"
+        data-testid="change-outbound-btn"
+      >
+        Change
+      </button>
+    </div>
+  );
+}

frontend/src/hooks/useFlightSearch.ts

@@ -5,6 +5,7 @@ import type { CabinClass, Filters, FlightOffer, Passengers, SearchRequest, SortB
 interface SearchState {
   outboundFlights: FlightOffer[];
   returnFlights: FlightOffer[];
+  sameAirlineDiscount: number;
   loading: boolean;
   error: string | null;
   searched: boolean;
@@ -14,6 +15,7 @@ export function useFlightSearch() {
   const [state, setState] = useState<SearchState>({
     outboundFlights: [],
     returnFlights: [],
+    sameAirlineDiscount: 1.0,
     loading: false,
     error: null,
     searched: false,
@@ -51,6 +53,7 @@ export function useFlightSearch() {
       setState({
         outboundFlights: res.outbound_flights,
         returnFlights: res.return_flights,
+        sameAirlineDiscount: res.same_airline_discount ?? 1.0,
         loading: false,
         error: null,
         searched: true,
@@ -59,6 +62,7 @@ export function useFlightSearch() {
       setState({
         outboundFlights: [],
         returnFlights: [],
+        sameAirlineDiscount: 1.0,
         loading: false,
         error: err instanceof Error ? err.message : 'Search failed',
         searched: true,

frontend/src/pages/ResultsPage.tsx

@@ -1,12 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import type { CabinClass, Filters, Passengers, SortBy, TripType } from '../api/types';
+import type { CabinClass, Filters, FlightOffer, Passengers, SortBy, TripType } from '../api/types';
 import { getLocalMinuteOfDay } from '../utils/format';
+import { minRoundTripPrice, roundTripTotal, sharesAirline } from '../utils/pricing';
 import SearchForm from '../components/search/SearchForm';
 import type { SearchFormData } from '../components/search/SearchForm';
 import FlightCard from '../components/results/FlightCard';
 import FilterPanel from '../components/results/FilterPanel';
 import NoResults from '../components/results/NoResults';
+import SelectedFlightBanner from '../components/results/SelectedFlightBanner';
 import SortBar from '../components/results/SortBar';
 import Loading from '../components/shared/Loading';
 import { useFlightSearch } from '../hooks/useFlightSearch';
@@ -18,10 +20,11 @@ const EMPTY_FILTERS: Filters = {
 
 export default function ResultsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
-  const { outboundFlights, returnFlights, loading, error, searched, search } = useFlightSearch();
+  const { outboundFlights, returnFlights, sameAirlineDiscount, loading, error, searched, search } = useFlightSearch();
   const [sortBy, setSortBy] = useState<SortBy>('best');
   const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
-  const [showReturn, setShowReturn] = useState(false);
+  const [step, setStep] = useState<'outbound' | 'return'>('outbound');
+  const [selectedOutbound, setSelectedOutbound] = useState<FlightOffer | null>(null);
 
   // Parse URL params
   const origin = searchParams.get('origin') || '';
@@ -38,6 +41,9 @@ export default function ResultsPage() {
   const originDisplay = searchParams.get('originDisplay') || origin;
   const destinationDisplay = searchParams.get('destinationDisplay') || destination;
 
+  const isRoundTrip = tripType === 'round_trip' && returnFlights.length > 0;
+  const showingReturn = isRoundTrip && step === 'return' && selectedOutbound !== null;
+
   // Search on mount and param changes
   const doSearch = useCallback(() => {
     if (!origin || !destination || !departureDate) return;
@@ -52,9 +58,30 @@ export default function ResultsPage() {
 
   useEffect(() => { doSearch(); }, [doSearch]);
 
+  // Memoized: minimum round-trip price for each outbound flight
+  const outboundMinPrices = useMemo(() => {
+    if (!isRoundTrip) return new Map<string, number>();
+    const map = new Map<string, number>();
+    for (const ob of outboundFlights) {
+      const min = minRoundTripPrice(ob, returnFlights, sameAirlineDiscount);
+      if (min !== null) map.set(ob.id, min);
+    }
+    return map;
+  }, [outboundFlights, returnFlights, sameAirlineDiscount, isRoundTrip]);
+
+  // Memoized: round-trip total for each return flight (given selected outbound)
+  const returnRoundTripPrices = useMemo(() => {
+    if (!selectedOutbound) return new Map<string, number>();
+    const map = new Map<string, number>();
+    for (const ret of returnFlights) {
+      map.set(ret.id, roundTripTotal(selectedOutbound, ret, sameAirlineDiscount));
+    }
+    return map;
+  }, [returnFlights, selectedOutbound, sameAirlineDiscount]);
+
   // Client-side filter + sort the results
   const filteredFlights = useMemo(() => {
-    let flights = showReturn ? returnFlights : outboundFlights;
+    let flights = showingReturn ? returnFlights : outboundFlights;
 
     if (filters.max_stops !== null && filters.max_stops !== undefined) {
       flights = flights.filter(f => f.stops <= filters.max_stops!);
@@ -79,7 +106,17 @@ export default function ResultsPage() {
 
     // Sort
     if (sortBy === 'cheapest') {
-      flights = [...flights].sort((a, b) => a.price_usd - b.price_usd);
+      if (showingReturn && selectedOutbound) {
+        flights = [...flights].sort((a, b) =>
+          (returnRoundTripPrices.get(a.id) ?? a.price_usd) - (returnRoundTripPrices.get(b.id) ?? b.price_usd)
+        );
+      } else if (isRoundTrip && !showingReturn) {
+        flights = [...flights].sort((a, b) =>
+          (outboundMinPrices.get(a.id) ?? a.price_usd) - (outboundMinPrices.get(b.id) ?? b.price_usd)
+        );
+      } else {
+        flights = [...flights].sort((a, b) => a.price_usd - b.price_usd);
+      }
     } else if (sortBy === 'fastest') {
       flights = [...flights].sort((a, b) => a.total_duration_minutes - b.total_duration_minutes);
     } else {
@@ -92,7 +129,7 @@ export default function ResultsPage() {
     }
 
     return flights;
-  }, [outboundFlights, returnFlights, showReturn, filters, sortBy]);
+  }, [outboundFlights, returnFlights, showingReturn, isRoundTrip, selectedOutbound, outboundMinPrices, returnRoundTripPrices, filters, sortBy]);
 
   // Split into "best" and "other" flights
   const bestFlights = useMemo(() => filteredFlights.filter(f => f.is_best), [filteredFlights]);
@@ -120,7 +157,22 @@ export default function ResultsPage() {
     setSearchParams(params);
     setFilters(EMPTY_FILTERS);
     setSortBy('best');
-    setShowReturn(false);
+    setStep('outbound');
+    setSelectedOutbound(null);
+  }
+
+  function handleSelectOutbound(flight: FlightOffer) {
+    setSelectedOutbound(flight);
+    setStep('return');
+    setFilters(EMPTY_FILTERS);
+    setSortBy('best');
+  }
+
+  function handleChangeOutbound() {
+    setStep('outbound');
+    setSelectedOutbound(null);
+    setFilters(EMPTY_FILTERS);
+    setSortBy('best');
   }
 
   return (
@@ -140,33 +192,37 @@ export default function ResultsPage() {
       </div>
 
       <div className="mx-auto max-w-6xl px-4 py-6">
-        {/* Round trip toggle */}
-        {tripType === 'round_trip' && searched && returnFlights.length > 0 && (
-          <div className="mb-4 flex gap-2 rounded-lg bg-white p-1 shadow-sm w-fit" data-testid="trip-toggle">
+        {/* Step breadcrumb for round trip */}
+        {isRoundTrip && searched && (
+          <div className="mb-4 flex items-center gap-2 text-sm" data-testid="step-breadcrumb">
             <button
-              onClick={() => setShowReturn(false)}
-              className={`rounded-md px-4 py-2 text-sm font-medium cursor-pointer ${!showReturn ? 'bg-[#1a73e8] text-white' : 'text-gray-600 hover:bg-gray-50'}`}
-              data-testid="toggle-outbound"
+              onClick={handleChangeOutbound}
+              className={`font-medium cursor-pointer ${step === 'outbound' ? 'text-[#1a73e8]' : 'text-gray-500 hover:text-gray-700'}`}
+              data-testid="breadcrumb-outbound"
             >
-              {origin} → {destination}
-            </button>
-            <button
-              onClick={() => setShowReturn(true)}
-              className={`rounded-md px-4 py-2 text-sm font-medium cursor-pointer ${showReturn ? 'bg-[#1a73e8] text-white' : 'text-gray-600 hover:bg-gray-50'}`}
-              data-testid="toggle-return"
-            >
-              {destination} → {origin}
+              1. Select departing flight
             </button>
+            <svg className="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clipRule="evenodd"/>
+            </svg>
+            <span className={`font-medium ${step === 'return' ? 'text-[#1a73e8]' : 'text-gray-400'}`}>
+              2. Select return flight
+            </span>
           </div>
         )}
 
+        {/* Selected outbound banner on return step */}
+        {showingReturn && selectedOutbound && (
+          <SelectedFlightBanner flight={selectedOutbound} onChangeClick={handleChangeOutbound} />
+        )}
+
         <div className="flex gap-6">
           {/* Filters sidebar */}
           {searched && outboundFlights.length > 0 && (
             <aside className="hidden lg:block w-64 flex-shrink-0">
               <div className="sticky top-4 rounded-lg bg-white p-4 shadow-sm">
                 <FilterPanel
-                  flights={showReturn ? returnFlights : outboundFlights}
+                  flights={showingReturn ? returnFlights : outboundFlights}
                   filters={filters}
                   onChange={setFilters}
                 />
@@ -194,12 +250,12 @@ export default function ResultsPage() {
                   <NoResults hasFilters={hasFilters} onClearFilters={() => setFilters(EMPTY_FILTERS)} />
                 ) : (
                   <div>
-                    {/* Best departing flights section */}
+                    {/* Best flights section */}
                     {bestFlights.length > 0 && (
                       <section className="mb-6" data-testid="best-flights-section">
                         <div className="mb-2 flex items-center gap-2">
                           <h2 className="text-sm font-medium text-gray-900">
-                            Best departing flights
+                            {showingReturn ? 'Best returning flights' : 'Best departing flights'}
                           </h2>
                           <div className="group relative">
                             <svg className="h-4 w-4 text-gray-400 cursor-help" viewBox="0 0 20 20" fill="currentColor">
@@ -212,27 +268,45 @@ export default function ResultsPage() {
                         </div>
                         <div className="space-y-2" data-testid="best-flights-list">
                           {bestFlights.map(flight => (
-                            <FlightCard key={flight.id} flight={flight} />
+                            <FlightCard
+                              key={flight.id}
+                              flight={flight}
+                              roundTripPrice={showingReturn
+                                ? returnRoundTripPrices.get(flight.id)
+                                : isRoundTrip ? outboundMinPrices.get(flight.id) : undefined}
+                              priceLabel={showingReturn ? 'round trip' : isRoundTrip ? 'from, round trip' : undefined}
+                              onSelect={isRoundTrip && !showingReturn ? handleSelectOutbound : undefined}
+                              discountApplied={showingReturn && selectedOutbound ? sharesAirline(flight, selectedOutbound) : false}
+                            />
                           ))}
                         </div>
                       </section>
                     )}
 
-                    {/* Other departing flights section */}
+                    {/* Other flights section */}
                     {otherFlights.length > 0 && (
                       <section data-testid="other-flights-section">
                         {bestFlights.length > 0 && (
                           <div className="mb-2 mt-2 flex items-center gap-3">
                             <div className="h-px flex-1 bg-gray-200" />
                             <h2 className="text-sm font-medium text-gray-500 whitespace-nowrap">
-                              Other departing flights
+                              {showingReturn ? 'Other returning flights' : 'Other departing flights'}
                             </h2>
                             <div className="h-px flex-1 bg-gray-200" />
                           </div>
                         )}
                         <div className="space-y-2" data-testid="other-flights-list">
                           {otherFlights.map(flight => (
-                            <FlightCard key={flight.id} flight={flight} />
+                            <FlightCard
+                              key={flight.id}
+                              flight={flight}
+                              roundTripPrice={showingReturn
+                                ? returnRoundTripPrices.get(flight.id)
+                                : isRoundTrip ? outboundMinPrices.get(flight.id) : undefined}
+                              priceLabel={showingReturn ? 'round trip' : isRoundTrip ? 'from, round trip' : undefined}
+                              onSelect={isRoundTrip && !showingReturn ? handleSelectOutbound : undefined}
+                              discountApplied={showingReturn && selectedOutbound ? sharesAirline(flight, selectedOutbound) : false}
+                            />
                           ))}
                         </div>
                       </section>

frontend/src/utils/pricing.ts

@@ -0,0 +1,43 @@
+import type { FlightOffer } from '../api/types';
+
+/** Check if two flights share at least one carrier. */
+export function sharesAirline(a: FlightOffer, b: FlightOffer): boolean {
+  const airlinesA = new Set(a.segments.map(s => s.airline_code));
+  return b.segments.some(s => airlinesA.has(s.airline_code));
+}
+
+/** Return the effective price of a return flight given the selected outbound. */
+export function effectiveReturnPrice(
+  ret: FlightOffer,
+  outbound: FlightOffer,
+  discountRate: number,
+): number {
+  if (sharesAirline(ret, outbound)) {
+    return Math.round(ret.price_usd * discountRate);
+  }
+  return ret.price_usd;
+}
+
+/** Total round-trip price for an outbound + return pair. */
+export function roundTripTotal(
+  outbound: FlightOffer,
+  ret: FlightOffer,
+  discountRate: number,
+): number {
+  return outbound.price_usd + effectiveReturnPrice(ret, outbound, discountRate);
+}
+
+/** Minimum round-trip price for a given outbound across all returns. */
+export function minRoundTripPrice(
+  outbound: FlightOffer,
+  allReturns: FlightOffer[],
+  discountRate: number,
+): number | null {
+  if (allReturns.length === 0) return null;
+  let min = Infinity;
+  for (const ret of allReturns) {
+    const total = roundTripTotal(outbound, ret, discountRate);
+    if (total < min) min = total;
+  }
+  return min;
+}