Add flight booking flow with payment validation

- Backend: booking store with cardholder-based payment validation,
generic error messages, flexible expiry format (1227 / 12/27)
- Frontend: BookingPage, ConfirmationPage, booking API client
- Wire up Book button in FlightCard for one-way and round-trip flows
- Also includes short-distance surcharge and advance pricing tweaks

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

.gitignore

@@ -6,3 +6,4 @@ __pycache__/
 *.pyc
 .uv_cache/
 .uv_pythons/
+flight-search-arm64.tar

backend/api/booking.py

@@ -0,0 +1,47 @@
+"""Booking API — validate payment and create bookings."""
+
+from fastapi import APIRouter, HTTPException
+
+from ..booking_store import create_booking, get_all_bookings, validate_payment
+from ..models import BookingRequest, BookingResponse
+
+router = APIRouter(prefix="/api", tags=["booking"])
+
+
+@router.post("/booking", response_model=BookingResponse)
+async def book_flight(req: BookingRequest):
+    """Validate payment and create a confirmed booking."""
+    ok, error_msg, card_type = validate_payment(
+        cardholder_name=req.payment.cardholder_name,
+        card_number=req.payment.card_number,
+        expiry=req.payment.expiry_date,
+        cvv=req.payment.cvv,
+    )
+    if not ok:
+        raise HTTPException(status_code=400, detail=error_msg)
+
+    total_price = req.outbound_flight.price_usd
+    if req.return_flight:
+        total_price += req.return_flight.price_usd
+
+    # Mask card number for response
+    masked_card = "****" + req.payment.card_number[-4:]
+
+    booking = create_booking({
+        "passenger": req.passenger.model_dump(),
+        "payment_summary": {
+            "card_type": card_type,
+            "masked_card": masked_card,
+            "cardholder_name": req.payment.cardholder_name,
+        },
+        "outbound_flight": req.outbound_flight.model_dump(mode="json"),
+        "return_flight": req.return_flight.model_dump(mode="json") if req.return_flight else None,
+        "total_price": total_price,
+    })
+    return booking
+
+
+@router.get("/bookings")
+async def list_bookings():
+    """List all confirmed bookings."""
+    return get_all_bookings()

backend/booking_store.py

@@ -0,0 +1,72 @@
+"""In-memory user/payment database and booking storage."""
+
+from __future__ import annotations
+
+import uuid
+from datetime import datetime
+
+# Pre-defined cardholders with payment methods (keyed by lowercase name)
+CARDHOLDERS: dict[str, list[dict]] = {
+    "john smith": [
+        {"card_number": "4111111111111111", "expiry": "12/27", "cvv": "123", "type": "Visa"},
+        {"card_number": "5500000000000004", "expiry": "06/28", "cvv": "456", "type": "Mastercard"},
+    ],
+    "jane doe": [
+        {"card_number": "340000000000009", "expiry": "03/27", "cvv": "7890", "type": "Amex"},
+    ],
+    "bob wilson": [
+        {"card_number": "4012888888881881", "expiry": "09/26", "cvv": "321", "type": "Visa"},
+    ],
+}
+
+GENERIC_ERROR = "Payment failed. Please check your card details and try again."
+
+# Confirmed bookings stored in memory
+_bookings: list[dict] = []
+
+
+def _normalize_expiry(expiry: str) -> str:
+    """Normalize expiry to MM/YY format. Accepts '1227' or '12/27'."""
+    raw = expiry.replace("/", "").replace("-", "").strip()
+    if len(raw) == 4 and raw.isdigit():
+        return f"{raw[:2]}/{raw[2:]}"
+    return expiry
+
+
+def validate_payment(cardholder_name: str, card_number: str, expiry: str, cvv: str) -> tuple[bool, str, str | None]:
+    """Validate payment against stored cardholder data.
+
+    Returns (success, error_message, card_type).
+    """
+    cards = CARDHOLDERS.get(cardholder_name.strip().lower())
+    if not cards:
+        return False, GENERIC_ERROR, None
+
+    normalized_expiry = _normalize_expiry(expiry)
+
+    for card in cards:
+        if (
+            card["card_number"] == card_number
+            and card["expiry"] == normalized_expiry
+            and card["cvv"] == cvv
+        ):
+            return True, "", card["type"]
+
+    return False, GENERIC_ERROR, None
+
+
+def create_booking(booking_data: dict) -> dict:
+    """Store a confirmed booking and return it with a unique ID."""
+    booking = {
+        "booking_id": f"BK-{uuid.uuid4().hex[:8].upper()}",
+        "status": "confirmed",
+        "booked_at": datetime.utcnow().isoformat(),
+        **booking_data,
+    }
+    _bookings.append(booking)
+    return booking
+
+
+def get_all_bookings() -> list[dict]:
+    """Return all confirmed bookings."""
+    return list(_bookings)

backend/config.py

@@ -50,8 +50,8 @@ HIGH_COMPETITION_DISCOUNT = 0.05  # -5% if 4+ carriers
 
 # Advance booking multipliers (days before departure)
 ADVANCE_MULTIPLIERS = [
-    (3, 1.50),     # 0-3 days: +50%
-    (7, 1.35),     # 4-7 days: +35%
+    (3, 1.85),     # 0-3 days: +85% (last-minute premium)
+    (7, 1.50),     # 4-7 days: +50%
     (14, 1.20),    # 8-14 days: +20%
     (21, 1.10),    # 15-21 days: +10%
     (60, 1.00),    # 22-60 days: base
@@ -59,6 +59,12 @@ ADVANCE_MULTIPLIERS = [
     (float("inf"), 0.95),  # 91+ days: -5%
 ]
 
+# Short-distance surcharge (flat fee added to very short flights)
+# Waived for legs that are part of a connecting itinerary, but NOT for round trips.
+SHORT_DISTANCE_THRESHOLD_KM = 500
+SHORT_DISTANCE_FEE_MIN = 50
+SHORT_DISTANCE_FEE_MAX = 150
+
 # Jitter range (±8%)
 JITTER_RANGE = 0.08
 

backend/flight_generator.py

@@ -421,6 +421,7 @@ def _generate_connecting_flights(
                 num_carriers=len(leg.carriers),
                 dest_continent=dest_ap.continent,
                 rng=rng,
+                is_connection=True,
             )
             leg_price *= CONNECTING_BASE_DISCOUNT
             total_price += leg_price

backend/main.py

@@ -9,7 +9,7 @@ from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse, JSONResponse
 from starlette.middleware.base import BaseHTTPMiddleware
 
-from .api import airports, auth, calendar, search
+from .api import airports, auth, booking, calendar, search
 from .data_loader import get_route_graph
 from .hub_detector import compute_hub_scores
 
@@ -52,6 +52,7 @@ app.include_router(auth.router)
 app.include_router(airports.router)
 app.include_router(search.router)
 app.include_router(calendar.router)
+app.include_router(booking.router)
 
 
 @app.on_event("startup")

backend/models.py

@@ -154,3 +154,50 @@ class AutocompleteResult(BaseModel):
     country: str
     display_name: str
     hub_score: float = 0.0
+
+
+# --- Booking ---
+
+class PassengerInfo(BaseModel):
+    first_name: str
+    last_name: str
+    email: str
+    phone: str
+
+
+class PaymentInfo(BaseModel):
+    card_number: str
+    expiry_date: str  # MM/YY
+    cvv: str
+    cardholder_name: str
+
+
+class BookingFlightInfo(BaseModel):
+    id: str
+    origin: str
+    destination: str
+    departure: datetime
+    arrival: datetime
+    total_duration_minutes: int
+    stops: int
+    price_usd: float
+    cabin_class: CabinClass
+    segments: list[FlightSegment]
+
+
+class BookingRequest(BaseModel):
+    passenger: PassengerInfo
+    payment: PaymentInfo
+    outbound_flight: BookingFlightInfo
+    return_flight: Optional[BookingFlightInfo] = None
+
+
+class BookingResponse(BaseModel):
+    booking_id: str
+    status: str
+    booked_at: str
+    passenger: PassengerInfo
+    payment_summary: dict
+    outbound_flight: BookingFlightInfo
+    return_flight: Optional[BookingFlightInfo] = None
+    total_price: float

backend/price_engine.py

@@ -76,7 +76,12 @@ are applied at the itinerary level for connecting flights and round trips.
         1.0 ± 0.08  (±8%, drawn from uniform distribution)
         Uses SHA-256 seeded RNG so same search → same jitter.
 
-    Minimum price floor: $25 (after all multipliers).
+    Minimum price floor: $25 (after all multipliers and surcharges).
+
+    2h. Short-distance surcharge  — flat fee for very short flights
+        Routes ≤ 500 km get +$50–$150 (random, deterministic per flight).
+        Waived when the leg is part of a connecting itinerary.
+        Still applies to round-trip flights (each direction independently).
 
 --------------------------------------------------------------------------
 3. ITINERARY-LEVEL DISCOUNTS
@@ -143,6 +148,9 @@ from .config import (
     JITTER_RANGE,
     MONOPOLY_ROUTE_BONUS,
     SEASON_MULTIPLIERS,
+    SHORT_DISTANCE_FEE_MAX,
+    SHORT_DISTANCE_FEE_MIN,
+    SHORT_DISTANCE_THRESHOLD_KM,
 )
 
 
@@ -155,6 +163,7 @@ def compute_price(
     dest_continent: str,
     rng: random.Random,
     booking_date: date | None = None,
+    is_connection: bool = False,
 ) -> float:
     """Compute a single-flight price using the 7-multiplier formula.
 
@@ -171,6 +180,8 @@ def compute_price(
         dest_continent:  Destination airport continent code (for EU summer bonus).
         rng:             Seeded Random instance (for deterministic jitter).
         booking_date:    Date of booking (defaults to today; affects advance multiplier).
+        is_connection:   True when this leg is part of a connecting itinerary
+                         (suppresses the short-distance surcharge).
 
     Returns:
         Price in USD, rounded to nearest dollar, minimum $25.
@@ -223,6 +234,11 @@ def compute_price(
     price = (base * class_mult * day_mult * time_mult
              * season_mult * demand_mult * advance_mult * jitter)
 
+    # Short-distance surcharge: random $50–$150 fee on very short flights.
+    # Waived when the leg is part of a connecting itinerary.
+    if distance_km <= SHORT_DISTANCE_THRESHOLD_KM and not is_connection:
+        price += rng.randint(SHORT_DISTANCE_FEE_MIN, SHORT_DISTANCE_FEE_MAX)
+
     return max(25.0, round(price, 0))
 
 

frontend/src/App.tsx

@@ -4,6 +4,8 @@ import Header from './components/shared/Header';
 import PasskeyGate from './components/shared/PasskeyGate';
 import SearchPage from './pages/SearchPage';
 import ResultsPage from './pages/ResultsPage';
+import BookingPage from './pages/BookingPage';
+import ConfirmationPage from './pages/ConfirmationPage';
 
 export default function App() {
   const [authenticated, setAuthenticated] = useState<boolean | null>(null);
@@ -29,6 +31,8 @@ export default function App() {
       <Routes>
         <Route path="/" element={<SearchPage />} />
         <Route path="/results" element={<ResultsPage />} />
+        <Route path="/booking" element={<BookingPage />} />
+        <Route path="/confirmation" element={<ConfirmationPage />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/api/client.ts

@@ -1,4 +1,4 @@
-import type { AutocompleteResult, CalendarResponse, SearchRequest, SearchResponse } from './types';
+import type { AutocompleteResult, BookingRequest, BookingResponse, CalendarResponse, SearchRequest, SearchResponse } from './types';
 
 const BASE_URL = '/api';
 
@@ -26,6 +26,19 @@ export async function searchFlights(req: SearchRequest): Promise<SearchResponse>
   });
 }
 
+export async function bookFlight(req: BookingRequest): Promise<BookingResponse> {
+  const res = await fetch(`${BASE_URL}/booking`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(req),
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => null);
+    throw new Error(data?.detail || `Booking failed (${res.status})`);
+  }
+  return res.json();
+}
+
 export async function getCalendar(
   origin: string,
   destination: string,

frontend/src/api/types.ts

@@ -99,3 +99,41 @@ export interface CalendarResponse {
   month: number;
   days: CalendarDay[];
 }
+
+// --- Booking ---
+
+export interface PassengerInfo {
+  first_name: string;
+  last_name: string;
+  email: string;
+  phone: string;
+}
+
+export interface PaymentInfo {
+  card_number: string;
+  expiry_date: string; // MM/YY
+  cvv: string;
+  cardholder_name: string;
+}
+
+export interface BookingRequest {
+  passenger: PassengerInfo;
+  payment: PaymentInfo;
+  outbound_flight: FlightOffer;
+  return_flight?: FlightOffer | null;
+}
+
+export interface BookingResponse {
+  booking_id: string;
+  status: string;
+  booked_at: string;
+  passenger: PassengerInfo;
+  payment_summary: {
+    card_type: string;
+    masked_card: string;
+    cardholder_name: string;
+  };
+  outbound_flight: FlightOffer;
+  return_flight?: FlightOffer | null;
+  total_price: number;
+}

frontend/src/components/results/FlightCard.tsx

@@ -7,6 +7,7 @@ interface Props {
   roundTripPrice?: number | null;
   priceLabel?: string;
   onSelect?: (flight: FlightOffer) => void;
+  onBook?: (flight: FlightOffer) => void;
   discountApplied?: boolean;
 }
 
@@ -14,7 +15,7 @@ function layoverMinutes(seg1Arrival: string, seg2Departure: string): number {
   return Math.round((new Date(seg2Departure).getTime() - new Date(seg1Arrival).getTime()) / 60000);
 }
 
-export default function FlightCard({ flight, roundTripPrice, priceLabel, onSelect, discountApplied }: Props) {
+export default function FlightCard({ flight, roundTripPrice, priceLabel, onSelect, onBook, discountApplied }: Props) {
   const [expanded, setExpanded] = useState(false);
   const firstSeg = flight.segments[0];
 
@@ -89,6 +90,15 @@ export default function FlightCard({ flight, roundTripPrice, priceLabel, onSelec
               Select flight
             </button>
           )}
+          {onBook && expanded && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onBook(flight); }}
+              className="rounded-full bg-[#1a73e8] px-4 py-1.5 text-xs font-medium text-white hover:bg-[#1557b0] cursor-pointer whitespace-nowrap"
+              data-testid="book-flight-btn"
+            >
+              Book
+            </button>
+          )}
           <div className="text-right min-w-[80px]" data-testid="price">
             {roundTripPrice != null ? (
               <>

frontend/src/pages/BookingPage.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { FlightOffer } from '../api/types';
+import { bookFlight } from '../api/client';
+import { formatDate, formatDuration, formatPrice, formatStops, formatTime } from '../utils/format';
+
+interface LocationState {
+  outboundFlight: FlightOffer;
+  returnFlight?: FlightOffer;
+}
+
+function FlightSummaryCard({ label, flight }: { label: string; flight: FlightOffer }) {
+  const firstSeg = flight.segments[0];
+  const lastSeg = flight.segments[flight.segments.length - 1];
+  return (
+    <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+      <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">{label}</div>
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-sm font-medium text-gray-900">
+            {formatTime(flight.departure)} &ndash; {formatTime(flight.arrival)}
+          </div>
+          <div className="text-xs text-gray-500 mt-0.5">
+            {firstSeg.origin_city} ({flight.origin}) &rarr; {lastSeg.destination_city} ({flight.destination})
+          </div>
+          <div className="text-xs text-gray-400 mt-0.5">
+            {formatDate(flight.departure)} &middot; {formatDuration(flight.total_duration_minutes)} &middot; {formatStops(flight.stops)}
+          </div>
+          <div className="text-xs text-gray-400 mt-0.5">
+            {firstSeg.airline_name} {firstSeg.flight_number}
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="text-lg font-semibold text-gray-900">{formatPrice(flight.price_usd)}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function BookingPage() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const state = location.state as LocationState | null;
+
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [cardNumber, setCardNumber] = useState('');
+  const [expiry, setExpiry] = useState('');
+  const [cvv, setCvv] = useState('');
+  const [cardholderName, setCardholderName] = useState('');
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  if (!state?.outboundFlight) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-12 text-center">
+        <h1 className="text-xl font-semibold text-gray-900 mb-2">No flight selected</h1>
+        <p className="text-gray-500 mb-4">Please search for flights and select one to book.</p>
+        <button onClick={() => navigate('/')} className="text-[#1a73e8] hover:underline cursor-pointer">
+          Back to search
+        </button>
+      </div>
+    );
+  }
+
+  const { outboundFlight, returnFlight } = state;
+  const totalPrice = outboundFlight.price_usd + (returnFlight?.price_usd || 0);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+    setSubmitting(true);
+
+    try {
+      const response = await bookFlight({
+        passenger: { first_name: firstName, last_name: lastName, email, phone },
+        payment: { card_number: cardNumber, expiry_date: expiry, cvv, cardholder_name: cardholderName },
+        outbound_flight: outboundFlight,
+        return_flight: returnFlight || null,
+      });
+      navigate('/confirmation', { state: { booking: response } });
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Booking failed');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8">
+      <h1 className="text-2xl font-semibold text-gray-900 mb-6">Complete your booking</h1>
+
+      {/* Flight summary */}
+      <div className="space-y-3 mb-8">
+        <FlightSummaryCard label="Outbound flight" flight={outboundFlight} />
+        {returnFlight && <FlightSummaryCard label="Return flight" flight={returnFlight} />}
+        <div className="text-right text-lg font-semibold text-gray-900">
+          Total: {formatPrice(totalPrice)}
+        </div>
+      </div>
+
+      {/* Error banner */}
+      {error && (
+        <div className="mb-6 rounded-lg bg-red-50 border border-red-200 p-4 text-sm text-red-700" data-testid="booking-error">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* Passenger info */}
+        <section>
+          <h2 className="text-lg font-medium text-gray-900 mb-4">Passenger information</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">First name</label>
+              <input
+                type="text" required value={firstName} onChange={e => setFirstName(e.target.value)}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Last name</label>
+              <input
+                type="text" required value={lastName} onChange={e => setLastName(e.target.value)}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+              <input
+                type="email" required value={email} onChange={e => setEmail(e.target.value)}
+                placeholder="john@example.com"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
+              <input
+                type="tel" required value={phone} onChange={e => setPhone(e.target.value)}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Payment info */}
+        <section>
+          <h2 className="text-lg font-medium text-gray-900 mb-4">Payment information</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="sm:col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Card number</label>
+              <input
+                type="text" required value={cardNumber} onChange={e => setCardNumber(e.target.value)}
+                placeholder="4111111111111111"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Expiry date</label>
+              <input
+                type="text" required value={expiry} onChange={e => setExpiry(e.target.value)}
+                placeholder="MM/YY"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">CVV</label>
+              <input
+                type="text" required value={cvv} onChange={e => setCvv(e.target.value)}
+                placeholder="123"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Cardholder name</label>
+              <input
+                type="text" required value={cardholderName} onChange={e => setCardholderName(e.target.value)}
+                placeholder="John Smith"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8]"
+              />
+            </div>
+          </div>
+        </section>
+
+        <button
+          type="submit"
+          disabled={submitting}
+          className="w-full rounded-lg bg-[#1a73e8] py-3 text-sm font-medium text-white hover:bg-[#1557b0] disabled:opacity-50 cursor-pointer"
+        >
+          {submitting ? 'Processing...' : `Pay ${formatPrice(totalPrice)}`}
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/ConfirmationPage.tsx

@@ -0,0 +1,112 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { BookingResponse } from '../api/types';
+import { formatDate, formatDuration, formatPrice, formatStops, formatTime } from '../utils/format';
+import type { FlightOffer } from '../api/types';
+
+interface LocationState {
+  booking: BookingResponse;
+}
+
+function FlightDetail({ label, flight }: { label: string; flight: FlightOffer }) {
+  const firstSeg = flight.segments[0];
+  const lastSeg = flight.segments[flight.segments.length - 1];
+  return (
+    <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+      <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">{label}</div>
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-sm font-medium text-gray-900">
+            {formatTime(flight.departure)} &ndash; {formatTime(flight.arrival)}
+          </div>
+          <div className="text-xs text-gray-500 mt-0.5">
+            {firstSeg.origin_city} ({flight.origin}) &rarr; {lastSeg.destination_city} ({flight.destination})
+          </div>
+          <div className="text-xs text-gray-400 mt-0.5">
+            {formatDate(flight.departure)} &middot; {formatDuration(flight.total_duration_minutes)} &middot; {formatStops(flight.stops)}
+          </div>
+          <div className="text-xs text-gray-400 mt-0.5">
+            {firstSeg.airline_name} {firstSeg.flight_number}
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="text-lg font-semibold text-gray-900">{formatPrice(flight.price_usd)}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ConfirmationPage() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const state = location.state as LocationState | null;
+
+  if (!state?.booking) {
+    return (
+      <div className="mx-auto max-w-3xl px-4 py-12 text-center">
+        <h1 className="text-xl font-semibold text-gray-900 mb-2">No booking found</h1>
+        <p className="text-gray-500 mb-4">Please search for flights and complete a booking.</p>
+        <button onClick={() => navigate('/')} className="text-[#1a73e8] hover:underline cursor-pointer">
+          Back to search
+        </button>
+      </div>
+    );
+  }
+
+  const { booking } = state;
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8">
+      {/* Success banner */}
+      <div className="mb-8 rounded-lg bg-green-50 border border-green-200 p-6 text-center">
+        <svg className="mx-auto h-12 w-12 text-green-500 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <h1 className="text-2xl font-semibold text-green-800">Booking confirmed!</h1>
+        <p className="text-green-700 mt-1">
+          Booking ID: <span className="font-mono font-semibold">{booking.booking_id}</span>
+        </p>
+      </div>
+
+      {/* Flight details */}
+      <section className="mb-8">
+        <h2 className="text-lg font-medium text-gray-900 mb-3">Flight details</h2>
+        <div className="space-y-3">
+          <FlightDetail label="Outbound flight" flight={booking.outbound_flight} />
+          {booking.return_flight && (
+            <FlightDetail label="Return flight" flight={booking.return_flight} />
+          )}
+        </div>
+      </section>
+
+      {/* Passenger info */}
+      <section className="mb-8">
+        <h2 className="text-lg font-medium text-gray-900 mb-3">Passenger</h2>
+        <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 text-sm text-gray-700 space-y-1">
+          <div>{booking.passenger.first_name} {booking.passenger.last_name}</div>
+          <div className="text-gray-500">{booking.passenger.email}</div>
+          <div className="text-gray-500">{booking.passenger.phone}</div>
+        </div>
+      </section>
+
+      {/* Payment summary */}
+      <section className="mb-8">
+        <h2 className="text-lg font-medium text-gray-900 mb-3">Payment</h2>
+        <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 text-sm text-gray-700 space-y-1">
+          <div>{booking.payment_summary.card_type} {booking.payment_summary.masked_card}</div>
+          <div className="text-gray-500">{booking.payment_summary.cardholder_name}</div>
+          <div className="text-lg font-semibold text-gray-900 mt-2">
+            Total charged: {formatPrice(booking.total_price)}
+          </div>
+        </div>
+      </section>
+
+      <button
+        onClick={() => navigate('/')}
+        className="w-full rounded-lg bg-[#1a73e8] py-3 text-sm font-medium text-white hover:bg-[#1557b0] cursor-pointer"
+      >
+        Back to search
+      </button>
+    </div>
+  );
+}

frontend/src/pages/ResultsPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import type { CabinClass, Filters, FlightOffer, Passengers, SortBy, TripType } from '../api/types';
 import { getLocalMinuteOfDay } from '../utils/format';
 import { minRoundTripPrice, roundTripTotal, sharesAirline } from '../utils/pricing';
@@ -20,6 +20,7 @@ const EMPTY_FILTERS: Filters = {
 
 export default function ResultsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
   const { outboundFlights, returnFlights, sameAirlineDiscount, loading, error, searched, search } = useFlightSearch();
   const [sortBy, setSortBy] = useState<SortBy>('best');
   const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
@@ -175,6 +176,14 @@ export default function ResultsPage() {
     setSortBy('best');
   }
 
+  function handleBookOneWay(flight: FlightOffer) {
+    navigate('/booking', { state: { outboundFlight: flight } });
+  }
+
+  function handleBookReturn(returnFlight: FlightOffer) {
+    navigate('/booking', { state: { outboundFlight: selectedOutbound, returnFlight } });
+  }
+
   return (
     <div className="min-h-screen bg-gray-50" data-testid="results-page">
       {/* Collapsed search form */}
@@ -276,6 +285,7 @@ export default function ResultsPage() {
                                 : isRoundTrip ? outboundMinPrices.get(flight.id) : undefined}
                               priceLabel={showingReturn ? 'round trip' : isRoundTrip ? 'from, round trip' : undefined}
                               onSelect={isRoundTrip && !showingReturn ? handleSelectOutbound : undefined}
+                              onBook={!isRoundTrip ? handleBookOneWay : showingReturn ? handleBookReturn : undefined}
                               discountApplied={showingReturn && selectedOutbound ? sharesAirline(flight, selectedOutbound) : false}
                             />
                           ))}
@@ -305,6 +315,7 @@ export default function ResultsPage() {
                                 : isRoundTrip ? outboundMinPrices.get(flight.id) : undefined}
                               priceLabel={showingReturn ? 'round trip' : isRoundTrip ? 'from, round trip' : undefined}
                               onSelect={isRoundTrip && !showingReturn ? handleSelectOutbound : undefined}
+                              onBook={!isRoundTrip ? handleBookOneWay : showingReturn ? handleBookReturn : undefined}
                               discountApplied={showingReturn && selectedOutbound ? sharesAirline(flight, selectedOutbound) : false}
                             />
                           ))}