Add booking options page with cabin-aware fare tiers

Insert a fare selection step between flight results and payment.
Shows 2-4 fare tiers (e.g. Basic Economy / Economy / Economy Flex
+ Premium Economy upgrade) with per-tier features like seat
selection, legroom, priority boarding, ticket flexibility, carry-on,
and checked bags. Business/First show lie-flat seats and 2pc bags.
Align all ports to 7860 for HF Spaces compatibility.

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

docker-compose.yml

@@ -2,5 +2,5 @@ services:
   flight-search:
     build: .
     ports:
-      - "8080:8080"
+      - "7860:7860"
     restart: unless-stopped

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import Header from './components/shared/Header';
 import PasskeyGate from './components/shared/PasskeyGate';
 import SearchPage from './pages/SearchPage';
 import ResultsPage from './pages/ResultsPage';
+import BookingOptionsPage from './pages/BookingOptionsPage';
 import BookingPage from './pages/BookingPage';
 import ConfirmationPage from './pages/ConfirmationPage';
 
@@ -31,6 +32,7 @@ export default function App() {
       <Routes>
         <Route path="/" element={<SearchPage />} />
         <Route path="/results" element={<ResultsPage />} />
+        <Route path="/booking-options" element={<BookingOptionsPage />} />
         <Route path="/booking" element={<BookingPage />} />
         <Route path="/confirmation" element={<ConfirmationPage />} />
       </Routes>

frontend/src/pages/BookingOptionsPage.tsx

@@ -0,0 +1,424 @@
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { FlightOffer } from '../api/types';
+import { formatDate, formatDuration, formatPrice, formatStops, formatTime } from '../utils/format';
+
+interface LocationState {
+  outboundFlight: FlightOffer;
+  returnFlight?: FlightOffer;
+}
+
+type FeatureStatus = 'included' | 'paid' | 'none';
+
+interface FeatureEntry {
+  status: FeatureStatus;
+  label: string;
+}
+
+interface TierConfig {
+  key: string;
+  label: string;
+  description: string;
+  priceMultiplier: number;
+  features: FeatureEntry[];
+  isUpgrade?: boolean;
+}
+
+interface CabinConfig {
+  tiers: TierConfig[];
+  featureCount: number;
+}
+
+// Feature slot order: seat_selection, seat_comfort, priority_boarding,
+// ticket_changes, ticket_cancellation, carry_on, checked_bag
+
+const ECONOMY_CONFIG: CabinConfig = {
+  featureCount: 7,
+  tiers: [
+    {
+      key: 'basic', label: 'Basic Economy', description: 'Most restrictions apply', priceMultiplier: 1.0,
+      features: [
+        { status: 'paid', label: 'Seat selection' },
+        { status: 'none', label: 'Extra legroom' },
+        { status: 'none', label: 'Priority boarding' },
+        { status: 'none', label: 'Ticket changes' },
+        { status: 'none', label: 'Ticket cancellation' },
+        { status: 'none', label: 'Carry-on' },
+        { status: 'paid', label: '1 pc checked bag' },
+      ],
+    },
+    {
+      key: 'standard', label: 'Economy', description: 'Standard ticket with flexibility', priceMultiplier: 1.12,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'paid', label: 'Extra legroom' },
+        { status: 'none', label: 'Priority boarding' },
+        { status: 'paid', label: 'Ticket changes' },
+        { status: 'paid', label: 'Ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'paid', label: '1 pc checked bag' },
+      ],
+    },
+    {
+      key: 'flex', label: 'Economy Flex', description: 'Full flexibility included', priceMultiplier: 1.32,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'included', label: 'Extra legroom' },
+        { status: 'included', label: 'Priority boarding' },
+        { status: 'included', label: 'Free ticket changes' },
+        { status: 'included', label: 'Free ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'included', label: '1 pc checked bag' },
+      ],
+    },
+  ],
+};
+
+const PREMIUM_ECONOMY_CONFIG: CabinConfig = {
+  featureCount: 7,
+  tiers: [
+    {
+      key: 'standard', label: 'Premium Economy', description: 'Standard ticket with comfort', priceMultiplier: 1.0,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'included', label: 'Extra legroom' },
+        { status: 'included', label: 'Priority boarding' },
+        { status: 'paid', label: 'Ticket changes' },
+        { status: 'paid', label: 'Ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'included', label: '1 pc checked bag' },
+      ],
+    },
+    {
+      key: 'flex', label: 'Premium Economy Flex', description: 'Full flexibility included', priceMultiplier: 1.18,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'included', label: 'Extra legroom' },
+        { status: 'included', label: 'Priority boarding' },
+        { status: 'included', label: 'Free ticket changes' },
+        { status: 'included', label: 'Free ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'included', label: '1 pc checked bag' },
+      ],
+    },
+  ],
+};
+
+const BUSINESS_CONFIG: CabinConfig = {
+  featureCount: 7,
+  tiers: [
+    {
+      key: 'standard', label: 'Business', description: 'Standard business fare', priceMultiplier: 1.0,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'included', label: 'Lie-flat seat' },
+        { status: 'included', label: 'Priority boarding' },
+        { status: 'paid', label: 'Ticket changes' },
+        { status: 'paid', label: 'Ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'included', label: '2 pc checked bag' },
+      ],
+    },
+    {
+      key: 'flex', label: 'Business Flex', description: 'Full flexibility included', priceMultiplier: 1.15,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'included', label: 'Lie-flat seat' },
+        { status: 'included', label: 'Priority boarding' },
+        { status: 'included', label: 'Free ticket changes' },
+        { status: 'included', label: 'Free ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'included', label: '2 pc checked bag' },
+      ],
+    },
+  ],
+};
+
+const FIRST_CONFIG: CabinConfig = {
+  featureCount: 7,
+  tiers: [
+    {
+      key: 'standard', label: 'First', description: 'Standard first class fare', priceMultiplier: 1.0,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'included', label: 'Lie-flat seat' },
+        { status: 'included', label: 'Priority boarding' },
+        { status: 'paid', label: 'Ticket changes' },
+        { status: 'paid', label: 'Ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'included', label: '2 pc checked bag' },
+      ],
+    },
+    {
+      key: 'flex', label: 'First Flex', description: 'Full flexibility included', priceMultiplier: 1.12,
+      features: [
+        { status: 'included', label: 'Seat selection' },
+        { status: 'included', label: 'Lie-flat seat' },
+        { status: 'included', label: 'Priority boarding' },
+        { status: 'included', label: 'Free ticket changes' },
+        { status: 'included', label: 'Free ticket cancellation' },
+        { status: 'included', label: 'Carry-on' },
+        { status: 'included', label: '2 pc checked bag' },
+      ],
+    },
+  ],
+};
+
+const CABIN_ORDER: { key: string; config: CabinConfig; upgradeMultiplier: number }[] = [
+  { key: 'economy', config: ECONOMY_CONFIG, upgradeMultiplier: 1.8 },
+  { key: 'premium_economy', config: PREMIUM_ECONOMY_CONFIG, upgradeMultiplier: 2.2 },
+  { key: 'business', config: BUSINESS_CONFIG, upgradeMultiplier: 1.6 },
+  { key: 'first', config: FIRST_CONFIG, upgradeMultiplier: 1.0 },
+];
+
+function getCabinConfig(cabinClass: string): CabinConfig {
+  const idx = CABIN_ORDER.findIndex(c => c.key === cabinClass);
+  const current = idx >= 0 ? CABIN_ORDER[idx] : CABIN_ORDER[0];
+  const next = idx >= 0 && idx < CABIN_ORDER.length - 1 ? CABIN_ORDER[idx + 1] : null;
+
+  if (!next) return current.config;
+
+  // Take the first (standard) tier from the next cabin as the upsell
+  const upgradeTier = next.config.tiers[0];
+  const upsellTier: TierConfig = {
+    ...upgradeTier,
+    key: `upgrade_${upgradeTier.key}`,
+    priceMultiplier: current.upgradeMultiplier,
+    isUpgrade: true,
+  };
+
+  return {
+    featureCount: current.config.featureCount,
+    tiers: [...current.config.tiers, upsellTier],
+  };
+}
+
+function CheckIcon() {
+  return (
+    <svg className="h-5 w-5 text-[#1a73e8]" viewBox="0 0 20 20" fill="currentColor">
+      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+function PaidIcon() {
+  return (
+    <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v1H8a1 1 0 100 2h1v1H8a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V9h1a1 1 0 100-2h-1V6z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+function CrossIcon() {
+  return (
+    <svg className="h-5 w-5 text-gray-300" viewBox="0 0 20 20" fill="currentColor">
+      <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+    </svg>
+  );
+}
+
+function FeatureStatusIcon({ status }: { status: FeatureStatus }) {
+  if (status === 'included') return <CheckIcon />;
+  if (status === 'paid') return <PaidIcon />;
+  return <CrossIcon />;
+}
+
+function FlightSummaryRow({ label, flight }: { label: string; flight: FlightOffer }) {
+  const firstSeg = flight.segments[0];
+  const lastSeg = flight.segments[flight.segments.length - 1];
+  return (
+    <div className="flex items-center gap-4 py-3">
+      <div className="flex h-8 w-8 items-center justify-center rounded bg-gray-100 text-[10px] font-bold text-gray-600 flex-shrink-0">
+        {firstSeg.airline_code}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 text-sm">
+          <span className="font-medium text-gray-900">{formatTime(flight.departure)}</span>
+          <span className="text-gray-400">&ndash;</span>
+          <span className="font-medium text-gray-900">{formatTime(flight.arrival)}</span>
+          <span className="text-gray-300 text-xs">·</span>
+          <span className="text-xs text-gray-500">{formatDuration(flight.total_duration_minutes)}</span>
+          <span className="text-gray-300 text-xs">·</span>
+          <span className="text-xs text-gray-500">{formatStops(flight.stops)}</span>
+        </div>
+        <div className="text-xs text-gray-500 mt-0.5">
+          {firstSeg.origin_city} ({flight.origin}) &rarr; {lastSeg.destination_city} ({flight.destination})
+          <span className="text-gray-300 mx-1">·</span>
+          {formatDate(flight.departure)}
+          <span className="text-gray-300 mx-1">·</span>
+          {firstSeg.airline_name}
+        </div>
+      </div>
+      <div className="text-xs font-medium text-gray-400 uppercase tracking-wide flex-shrink-0">
+        {label}
+      </div>
+    </div>
+  );
+}
+
+export default function BookingOptionsPage() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const state = location.state as LocationState | null;
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  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 cabinClass = outboundFlight.cabin_class;
+  const config = getCabinConfig(cabinClass);
+  const basePrice = outboundFlight.price_usd + (returnFlight?.price_usd || 0);
+
+  // Default to the first non-basic tier, or the first tier
+  const defaultIndex = config.tiers.length > 2 ? 1 : 0;
+  const selected = selectedIndex ?? defaultIndex;
+  const selectedTier = config.tiers[selected];
+
+  const tierPrices = config.tiers.map(t => Math.round(basePrice * t.priceMultiplier));
+  const lowestPrice = tierPrices[0];
+
+  function handleContinue() {
+    navigate('/booking', {
+      state: {
+        outboundFlight,
+        returnFlight,
+        selectedFare: {
+          tier: selectedTier.key,
+          label: selectedTier.label,
+          totalPrice: tierPrices[selected],
+        },
+      },
+    });
+  }
+
+  const tierCount = config.tiers.length;
+  const gridCols = tierCount === 4 ? 'grid-cols-4' : 'grid-cols-3';
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className={`mx-auto px-4 py-8 ${tierCount === 4 ? 'max-w-5xl' : 'max-w-4xl'}`}>
+        {/* Back button */}
+        <button
+          onClick={() => navigate(-1)}
+          className="flex items-center gap-1 text-sm text-[#1a73e8] hover:underline cursor-pointer mb-6"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clipRule="evenodd" />
+          </svg>
+          Back to flights
+        </button>
+
+        {/* Flight summary */}
+        <div className="rounded-lg border border-gray-200 bg-white p-5 mb-6">
+          <h2 className="text-lg font-medium text-gray-900 mb-1">Selected flights</h2>
+          <div className="divide-y divide-gray-100">
+            <FlightSummaryRow label="Departs" flight={outboundFlight} />
+            {returnFlight && <FlightSummaryRow label="Returns" flight={returnFlight} />}
+          </div>
+        </div>
+
+        {/* Fare options */}
+        <h1 className="text-xl font-semibold text-gray-900 mb-2">Choose your booking option</h1>
+        <p className="text-sm text-gray-500 mb-5">
+          Select a fare type. Prices shown are per person for the entire trip.
+        </p>
+
+        {/* Fare columns */}
+        <div className={`grid ${gridCols} gap-4 mb-6`}>
+          {config.tiers.map((tier, i) => {
+            const isSelected = selected === i;
+            const price = tierPrices[i];
+            const priceDiff = price - lowestPrice;
+
+            return (
+              <button
+                key={tier.key}
+                onClick={() => setSelectedIndex(i)}
+                className={`rounded-xl border-2 text-left transition-all cursor-pointer ${
+                  tier.isUpgrade ? 'bg-amber-50/50' : 'bg-white'
+                } ${
+                  isSelected
+                    ? 'border-[#1a73e8] shadow-md'
+                    : tier.isUpgrade
+                      ? 'border-amber-200 hover:border-amber-300 hover:shadow-sm'
+                      : 'border-gray-200 hover:border-gray-300 hover:shadow-sm'
+                }`}
+              >
+                {/* Upgrade badge */}
+                {tier.isUpgrade && (
+                  <div className="px-5 pt-3 pb-0">
+                    <span className="inline-block rounded-full bg-amber-100 px-2.5 py-0.5 text-[11px] font-semibold text-amber-700 uppercase tracking-wide">
+                      Upgrade
+                    </span>
+                  </div>
+                )}
+
+                {/* Tier header */}
+                <div className={`px-5 ${tier.isUpgrade ? 'pt-2' : 'pt-5'} pb-4 border-b ${isSelected ? 'border-blue-100' : tier.isUpgrade ? 'border-amber-100' : 'border-gray-100'}`}>
+                  <div className="flex items-center gap-2 mb-1">
+                    <div className={`h-4 w-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
+                      isSelected ? 'border-[#1a73e8]' : 'border-gray-300'
+                    }`}>
+                      {isSelected && <div className="h-2 w-2 rounded-full bg-[#1a73e8]" />}
+                    </div>
+                    <span className="text-sm font-semibold text-gray-900">{tier.label}</span>
+                  </div>
+                  <div className="ml-6">
+                    <div className="text-xl font-semibold text-gray-900">{formatPrice(price)}</div>
+                    {priceDiff > 0 && (
+                      <div className="text-xs text-gray-400 mt-0.5">+{formatPrice(priceDiff)}</div>
+                    )}
+                    <div className="text-xs text-gray-500 mt-1">{tier.description}</div>
+                  </div>
+                </div>
+
+                {/* Features list */}
+                <div className="px-5 py-4 space-y-3">
+                  {tier.features.slice(0, config.featureCount).map((feature, fi) => (
+                    <div key={fi} className="flex items-center gap-2.5">
+                      <div className="flex-shrink-0 w-5 flex items-center justify-center">
+                        <FeatureStatusIcon status={feature.status} />
+                      </div>
+                      <span className={`text-sm ${feature.status === 'none' ? 'text-gray-400' : 'text-gray-700'}`}>
+                        {feature.label}
+                        {feature.status === 'paid' && <span className="text-xs text-gray-400 ml-1">· Fee</span>}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Bottom bar */}
+        <div className="flex items-center justify-between rounded-lg border border-gray-200 bg-white px-6 py-4">
+          <div>
+            <div className="text-sm text-gray-500">
+              {selectedTier.label} &middot; {returnFlight ? 'Round trip' : 'One way'}
+            </div>
+            <div className="text-xl font-semibold text-gray-900">
+              {formatPrice(tierPrices[selected])}
+            </div>
+          </div>
+          <button
+            onClick={handleContinue}
+            className="rounded-full bg-[#1a73e8] px-8 py-2.5 text-sm font-medium text-white hover:bg-[#1557b0] cursor-pointer transition-colors"
+          >
+            Continue to booking
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/BookingPage.tsx

@@ -4,9 +4,16 @@ import type { FlightOffer } from '../api/types';
 import { bookFlight } from '../api/client';
 import { formatDate, formatDuration, formatPrice, formatStops, formatTime } from '../utils/format';
 
+interface SelectedFare {
+  tier: string;
+  label: string;
+  totalPrice: number;
+}
+
 interface LocationState {
   outboundFlight: FlightOffer;
   returnFlight?: FlightOffer;
+  selectedFare?: SelectedFare;
 }
 
 function FlightSummaryCard({ label, flight }: { label: string; flight: FlightOffer }) {
@@ -66,8 +73,8 @@ export default function BookingPage() {
     );
   }
 
-  const { outboundFlight, returnFlight } = state;
-  const totalPrice = outboundFlight.price_usd + (returnFlight?.price_usd || 0);
+  const { outboundFlight, returnFlight, selectedFare } = state;
+  const totalPrice = selectedFare?.totalPrice ?? (outboundFlight.price_usd + (returnFlight?.price_usd || 0));
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -97,6 +104,20 @@ export default function BookingPage() {
       <div className="space-y-3 mb-8">
         <FlightSummaryCard label="Outbound flight" flight={outboundFlight} />
         {returnFlight && <FlightSummaryCard label="Return flight" flight={returnFlight} />}
+        {selectedFare && (
+          <div className="rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 flex items-center justify-between">
+            <div className="text-sm text-gray-700">
+              <span className="font-medium">{selectedFare.label}</span>
+              <span className="text-gray-400 ml-1">fare selected</span>
+            </div>
+            <button
+              onClick={() => navigate(-1)}
+              className="text-xs text-[#1a73e8] hover:underline cursor-pointer"
+            >
+              Change
+            </button>
+          </div>
+        )}
         <div className="text-right text-lg font-semibold text-gray-900">
           Total: {formatPrice(totalPrice)}
         </div>

frontend/src/pages/ResultsPage.tsx

@@ -185,11 +185,11 @@ export default function ResultsPage() {
   }
 
   function handleBookOneWay(flight: FlightOffer) {
-    navigate('/booking', { state: { outboundFlight: flight } });
+    navigate('/booking-options', { state: { outboundFlight: flight } });
   }
 
   function handleBookReturn(returnFlight: FlightOffer) {
-    navigate('/booking', { state: { outboundFlight: selectedOutbound, returnFlight } });
+    navigate('/booking-options', { state: { outboundFlight: selectedOutbound, returnFlight } });
   }
 
   return (

frontend/vite.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   plugins: [react(), tailwindcss()],
   server: {
     proxy: {
-      '/api': 'http://localhost:8080',
+      '/api': 'http://localhost:7860',
     },
   },
 })