Spaces:

fyliu
/

Flight-Search

Running

fyliu Claude Opus 4.6 commited on 13 days ago

Commit

3253e6d

1 Parent(s): d2d5e25

Fix price filter to work in display currency (e.g. CAD)

The price filter compared the user's input directly against price_usd,
but displayed prices are converted to the user's chosen currency.
Typing C$187 would not filter out a C$233 flight because its USD
price (~$160) was below 187.

Now the filter converts max_price from display currency to USD via
toUsd() before comparing. Also shows the correct currency symbol
in the filter input instead of always "$".

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

Files changed (6) hide show

frontend/dist/assets/index-CNhMhsb3.js +0 -0
frontend/dist/assets/index-zJXLSgGb.js +0 -0
frontend/dist/index.html +1 -1
frontend/src/components/results/FilterPanel.tsx +3 -2
frontend/src/contexts/CurrencyContext.tsx +15 -8
frontend/src/pages/ResultsPage.tsx +8 -5

frontend/dist/assets/index-CNhMhsb3.js DELETED Viewed

The diff for this file is too large to render. See raw diff

frontend/dist/assets/index-zJXLSgGb.js ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flight Search</title>
-    <script type="module" crossorigin src="/assets/index-CNhMhsb3.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-B_aBvo40.css">
   </head>
   <body>

     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flight Search</title>
+    <script type="module" crossorigin src="/assets/index-zJXLSgGb.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-B_aBvo40.css">
   </head>
   <body>

frontend/src/components/results/FilterPanel.tsx CHANGED Viewed

@@ -5,9 +5,10 @@ interface Props {
   flights: FlightOffer[];
   filters: Filters;
   onChange: (f: Filters) => void;
 }
-export default function FilterPanel({ flights, filters, onChange }: Props) {
   // Compute available filter options from flights
   const airlines = useMemo(() => {
     const map = new Map<string, string>();
@@ -43,7 +44,7 @@ export default function FilterPanel({ flights, filters, onChange }: Props) {
       <div>
         <h3 className="mb-2 text-sm font-medium text-gray-900">Max price</h3>
         <div className="flex items-center gap-2">
-          <span className="text-sm text-gray-500">$</span>
           <input
             type="number"
             value={filters.max_price ?? ''}

   flights: FlightOffer[];
   filters: Filters;
   onChange: (f: Filters) => void;
+  currencySymbol?: string;
 }
+export default function FilterPanel({ flights, filters, onChange, currencySymbol = '$' }: Props) {
   // Compute available filter options from flights
   const airlines = useMemo(() => {
     const map = new Map<string, string>();
       <div>
         <h3 className="mb-2 text-sm font-medium text-gray-900">Max price</h3>
         <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500">{currencySymbol}</span>
           <input
             type="number"
             value={filters.max_price ?? ''}

frontend/src/contexts/CurrencyContext.tsx CHANGED Viewed

@@ -5,6 +5,10 @@ interface CurrencyContextValue {
   currency: string;
   setCurrency: (c: string) => void;
   formatPrice: (usd: number) => string;
   currencies: string[];
   symbols: Record<string, string>;
 }
@@ -13,6 +17,8 @@ const CurrencyContext = createContext<CurrencyContextValue>({
   currency: 'USD',
   setCurrency: () => {},
   formatPrice: (usd) => `$${Math.round(usd).toLocaleString()}`,
   currencies: ['USD'],
   symbols: { USD: '$' },
 });
@@ -49,21 +55,22 @@ export function CurrencyProvider({ children, defaultCurrency }: { children: Reac
     localStorage.setItem('preferred_currency', c);
   }
   function formatPrice(usd: number): string {
-    const rate = rates[currency] ?? 1;
-    const symbol = symbols[currency] ?? currency;
     const converted = Math.round(usd * rate);
-    // For currencies with large values, use locale formatting
-    if (rate > 100) {
-      return `${symbol}${converted.toLocaleString()}`;
-    }
-    return `${symbol}${converted.toLocaleString()}`;
   }
   const currencies = Object.keys(rates).sort();
   return (
-    <CurrencyContext.Provider value={{ currency, setCurrency, formatPrice, currencies, symbols }}>
       {children}
     </CurrencyContext.Provider>
   );

   currency: string;
   setCurrency: (c: string) => void;
   formatPrice: (usd: number) => string;
+  /** Convert a display-currency amount back to USD. */
+  toUsd: (displayAmount: number) => number;
+  /** Current currency symbol (e.g. "C$", "€"). */
+  symbol: string;
   currencies: string[];
   symbols: Record<string, string>;
 }
   currency: 'USD',
   setCurrency: () => {},
   formatPrice: (usd) => `$${Math.round(usd).toLocaleString()}`,
+  toUsd: (n) => n,
+  symbol: '$',
   currencies: ['USD'],
   symbols: { USD: '$' },
 });
     localStorage.setItem('preferred_currency', c);
   }
+  const rate = rates[currency] ?? 1;
+  const currentSymbol = symbols[currency] ?? currency;
   function formatPrice(usd: number): string {
     const converted = Math.round(usd * rate);
+    return `${currentSymbol}${converted.toLocaleString()}`;
+  }
+  function toUsd(displayAmount: number): number {
+    return displayAmount / rate;
   }
   const currencies = Object.keys(rates).sort();
   return (
+    <CurrencyContext.Provider value={{ currency, setCurrency, formatPrice, toUsd, symbol: currentSymbol, currencies, symbols }}>
       {children}
     </CurrencyContext.Provider>
   );

frontend/src/pages/ResultsPage.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ function parseMcLegs(searchParams: URLSearchParams): MultiCityLeg[] {
 export default function ResultsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
-  const { formatPrice } = useCurrency();
   const { outboundFlights, returnFlights, multiCityFlights, sameAirlineDiscount, loading, error, searched, search } = useFlightSearch();
   const [sortBy, setSortBy] = useState<SortBy>('best');
   const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
@@ -160,15 +160,17 @@ export default function ResultsPage() {
       flights = flights.filter(f => f.stops <= filters.max_stops!);
     }
     if (filters.max_price) {
       flights = flights.filter(f => {
         // For round trips, filter by the round-trip price shown to the user
         if (showingReturn && selectedOutbound) {
-          return (returnRoundTripPrices.get(f.id) ?? f.price_usd) <= filters.max_price!;
         }
         if (isRoundTrip && !showingReturn) {
-          return (outboundMinPrices.get(f.id) ?? f.price_usd) <= filters.max_price!;
         }
-        return f.price_usd <= filters.max_price!;
       });
     }
     if (filters.airlines && filters.airlines.length > 0) {
@@ -211,7 +213,7 @@ export default function ResultsPage() {
     }
     return flights;
-  }, [outboundFlights, eligibleReturnFlights, currentLegFlights, showingReturn, isRoundTrip, isMultiCity, selectedOutbound, outboundMinPrices, returnRoundTripPrices, filters, sortBy]);
   // Split into "best" and "other" flights
   const bestFlights = useMemo(() => filteredFlights.filter(f => f.is_best), [filteredFlights]);
@@ -472,6 +474,7 @@ export default function ResultsPage() {
                   flights={filterSourceFlights}
                   filters={filters}
                   onChange={setFilters}
                 />
               </div>
             </aside>

 export default function ResultsPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
+  const { formatPrice, toUsd, symbol: currencySymbol } = useCurrency();
   const { outboundFlights, returnFlights, multiCityFlights, sameAirlineDiscount, loading, error, searched, search } = useFlightSearch();
   const [sortBy, setSortBy] = useState<SortBy>('best');
   const [filters, setFilters] = useState<Filters>(EMPTY_FILTERS);
       flights = flights.filter(f => f.stops <= filters.max_stops!);
     }
     if (filters.max_price) {
+      // Convert display-currency amount to USD for comparison against price_usd
+      const maxUsd = toUsd(filters.max_price);
       flights = flights.filter(f => {
         // For round trips, filter by the round-trip price shown to the user
         if (showingReturn && selectedOutbound) {
+          return (returnRoundTripPrices.get(f.id) ?? f.price_usd) <= maxUsd;
         }
         if (isRoundTrip && !showingReturn) {
+          return (outboundMinPrices.get(f.id) ?? f.price_usd) <= maxUsd;
         }
+        return f.price_usd <= maxUsd;
       });
     }
     if (filters.airlines && filters.airlines.length > 0) {
     }
     return flights;
+  }, [outboundFlights, eligibleReturnFlights, currentLegFlights, showingReturn, isRoundTrip, isMultiCity, selectedOutbound, outboundMinPrices, returnRoundTripPrices, filters, sortBy, toUsd]);
   // Split into "best" and "other" flights
   const bestFlights = useMemo(() => filteredFlights.filter(f => f.is_best), [filteredFlights]);
                   flights={filterSourceFlights}
                   filters={filters}
                   onChange={setFilters}
+                  currencySymbol={currencySymbol}
                 />
               </div>
             </aside>