- {fmt(e.total_price, cur)} {'→'} {fmt(baseTotal(e))}
+ {fmt(line.entered.amount, line.entered.currency)} {'→'} {fmt(line.into.amount, line.into.currency)}
)}
{/* Under the name, because a chip reading "Y 122,00" says nothing on
@@ -894,6 +920,8 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
function SettlementRow({ s }: { s: Settlement }) {
// Legacy transfers carry no currency and were entered in the display base.
const cur = (s.currency || base).toUpperCase()
+ // Booked in the trip currency like an expense, so it is explained the same way.
+ const line = convertedLine(s.amount, cur, s.exchange_rate, tripCurrency, base, settled(s))
return (
@@ -901,7 +929,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
)
@@ -72,7 +76,7 @@ export function BookingCostsSection({ reservationId, placeId = null, hintKey = '
{t('costs.payment')}
- {cur !== base && · {fmt(s.amount, cur)} → {fmt(settled(s))}}
+ {line && · {fmt(line.entered.amount, line.entered.currency)} → {fmt(line.into.amount, line.into.currency)}}
@@ -1022,12 +1057,17 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
)}
@@ -1145,8 +1185,8 @@ function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; A
// A transfer can be made in any currency — paying a rouble debt in euros is normal —
// so it carries its own, defaulting to the display currency. The server freezes its
// FX rate on write, the same way an expense's is frozen.
-function SettlementModal({ tripId, people, me, editing, currency, onClose, onSaved }: {
- tripId: number; people: TripMember[]; me: number; editing: Settlement | null; currency: string; onClose: () => void; onSaved: () => void
+function SettlementModal({ tripId, people, me, editing, currency, tripCurrency, onClose, onSaved }: {
+ tripId: number; people: TripMember[]; me: number; editing: Settlement | null; currency: string; tripCurrency: string; onClose: () => void; onSaved: () => void
}) {
const { t } = useTranslation()
const toast = useToast()
@@ -1167,7 +1207,7 @@ function SettlementModal({ tripId, people, me, editing, currency, onClose, onSav
const save = async () => {
if (!valid) return
setSaving(true)
- const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency: cur, settled_at: day }
+ const data = withFallbackFx({ from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency: cur, settled_at: day }, tripCurrency)
try {
if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
else await budgetApi.createSettlement(tripId, data)
@@ -1237,12 +1277,13 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
const toast = useToast()
const isMobile = useIsMobile()
const { addBudgetItem, updateBudgetItem } = useTripStore()
- const { convert } = useExchangeRates(base)
const sym = (c: string) => SYMBOLS[c] || (c + ' ')
+ // A saved expense without a currency opens in the trip's own (#2525).
+ const { tripCurrency: tripCur, editingCurrency, preview } = useExpenseFx(base, editing)
const [name, setName] = useState(editing?.name || prefill?.name || '')
const [cat, setCat] = useState(editing ? catMeta(editing.category).key : (prefill?.category || 'food'))
- const [currency, setCurrency] = useState((editing?.currency || base).toUpperCase())
+ const [currency, setCurrency] = useState(editingCurrency)
const [day, setDay] = useState(editing?.expense_date || localToday())
const [note, setNote] = useState(() => readUserNote(editing))
// Edit and prefill seeds are padded to the currency's decimals (#2175): the DB
@@ -1250,7 +1291,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
// 5,00 as "5". A prefill has no currency of its own — it is read as `base`,
// which is also what the currency field starts on.
const [total, setTotal] = useState(() => {
- if (editing) return editing.total_price ? amountToInputString(editing.total_price, (editing.currency || base).toUpperCase()) : ''
+ if (editing) return editing.total_price ? amountToInputString(editing.total_price, editingCurrency) : ''
if (prefill?.amount != null) return amountToInputString(prefill.amount, base)
return ''
})
@@ -1334,6 +1375,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
}, [ticketItems])
const totalNum = isTicketMode ? ticketInfo.total : (Number.parseFloat(total) || 0)
+ const fx = preview(totalNum, currency)
const splitSum = [...participants].reduce((sum, id) => sum + (Number.parseFloat(customAmounts[id]) || 0), 0)
const customBalanced = Math.round(splitSum * 100) === Math.round(totalNum * 100)
// How much is still to be handed out, read on the total's own side: on a refund
@@ -1591,12 +1633,18 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
{t('costs.finalExpenses')}
- {fronted.map(r => (
-
- {r.name}
- {signed(r.amount)}
-
- ))}
+ {fronted.map(r => {
+ const entered = enteredOf(r.item_id, r.amount)
+ return (
+
+
+ {r.name}{entered && · {entered}}
+
+ {signed(r.amount)}
+
+ )
+ })}
{formatMoney(totalNum, currency, locale)}
- ≈
- {formatMoney(convert(totalNum, currency), base, locale)}
- · {t('costs.liveRate')}
+ {fx.inTrip != null && <>
+ →
+ {formatMoney(fx.inTrip, tripCur, locale)}
+ }
+ {fx.shown != null && <>
+ ≈
+ {formatMoney(fx.shown, base, locale)}
+ · {t('costs.liveRate')}
+ }
)}
@@ -1823,7 +1871,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
{splitMode === 'equally' ? (
- {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: sym(currency) + each.toFixed(2) })}
+ {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: splitShareLabel(each, currency, fx, participants.size, base, sym, locale) })}
) : (
diff --git a/client/src/components/Budget/expenseFx.test.ts b/client/src/components/Budget/expenseFx.test.ts
new file mode 100644
index 000000000..db6b10748
--- /dev/null
+++ b/client/src/components/Budget/expenseFx.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { formatMoney } from '../../utils/formatters'
+import { editingCurrencyOf, expenseFxPreview, splitShareLabel } from './expenseFx'
+
+// A euro trip read in dollars, converted with the euro's own quote: one euro is 1.1551
+// dollars today, and 1.17 on the day the hotel was booked (#2525).
+const convert = (amount: number, from: string | null | undefined): number =>
+ (amount / ({ EUR: 1, USD: 1.1551, JPY: 170 } as Record)[(from || 'USD').toUpperCase()]) * 1.1551
+const hotel = { currency: 'USD', exchange_rate: 1.17 }
+const base = { editing: hotel, editingCurrency: 'USD', tripCurrency: 'EUR', base: 'USD', convert }
+
+describe('editingCurrencyOf', () => {
+ it('opens a saved expense without a currency in the trip currency', () => {
+ expect(editingCurrencyOf({ currency: null }, 'eur', 'USD')).toBe('EUR')
+ expect(editingCurrencyOf({ currency: 'jpy' }, 'EUR', 'USD')).toBe('JPY')
+ })
+
+ it('starts a new expense, or one on a trip without a currency, in the display currency', () => {
+ expect(editingCurrencyOf(null, 'EUR', 'usd')).toBe('USD')
+ expect(editingCurrencyOf({ currency: null }, null, 'usd')).toBe('USD')
+ })
+})
+
+describe('expenseFxPreview', () => {
+ it('previews an edit that keeps the currency at the rate frozen on entry', () => {
+ const fx = expenseFxPreview({ ...base, total: 801.76, currency: 'USD' })!
+ expect(fx.inTrip).toBeCloseTo(685.26, 2)
+ expect(fx.shown).toBeCloseTo(791.55, 2)
+ })
+
+ it('has nothing to preview for a bill in the display currency that reads back as typed', () => {
+ expect(expenseFxPreview({ ...base, editing: { currency: 'USD', exchange_rate: 1.1551 }, total: 12345.67, currency: 'USD' })).toBeNull()
+ expect(expenseFxPreview({ ...base, editing: null, total: 250, currency: 'USD' })).toBeNull()
+ expect(expenseFxPreview({ ...base, total: 0, currency: 'USD' })).toBeNull()
+ })
+
+ it('previews a new or re-currencied amount at today\'s rate', () => {
+ expect(expenseFxPreview({ ...base, editing: null, total: 1700, currency: 'JPY' })).toEqual({ inTrip: null, shown: convert(1700, 'JPY') })
+ // Switching the hotel to yen re-freezes on save, so the old rate does not apply.
+ expect(expenseFxPreview({ ...base, total: 1700, currency: 'JPY' })?.inTrip).toBeNull()
+ })
+
+ it('stops at the trip amount when the viewer reads the trip currency', () => {
+ expect(expenseFxPreview({ ...base, base: 'EUR', total: 801.76, currency: 'USD' })).toEqual({ inTrip: 801.76 / 1.17, shown: null })
+ })
+})
+
+describe('splitShareLabel', () => {
+ const sym = (c: string) => (c === 'USD' ? '$' : c + ' ')
+
+ it('prints the entered share, then the share the row lends or borrows', () => {
+ const fx = expenseFxPreview({ ...base, total: 801.76, currency: 'USD' })
+ expect(splitShareLabel(400.88, 'USD', fx, 2, 'USD', sym, 'en-US')).toBe('$400.88 → $395.77')
+ // Read in the trip currency, the share is the booked euros.
+ const inEur = expenseFxPreview({ ...base, base: 'EUR', total: 801.76, currency: 'USD' })
+ expect(splitShareLabel(400.88, 'USD', inEur, 2, 'EUR', sym, 'en-US')).toBe(`$400.88 → ${formatMoney(342.63, 'EUR', 'en-US')}`)
+ })
+
+ it('prints the entered share alone when nothing is converted', () => {
+ expect(splitShareLabel(125, 'USD', null, 2, 'USD', sym, 'en-US')).toBe('$125.00')
+ expect(splitShareLabel(0, 'USD', { inTrip: null, shown: 10 }, 0, 'USD', sym, 'en-US')).toBe('$0.00')
+ })
+})
diff --git a/client/src/components/Budget/expenseFx.ts b/client/src/components/Budget/expenseFx.ts
new file mode 100644
index 000000000..3619bed06
--- /dev/null
+++ b/client/src/components/Budget/expenseFx.ts
@@ -0,0 +1,87 @@
+import { bookedInTrip, useExchangeRates } from '../../hooks/useExchangeRates'
+import { useTripStore } from '../../store/tripStore'
+import { currencyDecimals, formatMoney } from '../../utils/formatters'
+
+/**
+ * The conversion preview of the expense editors, shared by the desktop ExpenseModal and the
+ * phone MCostSheet so the two can never preview the same save differently (#2525). The
+ * editors only lay it out.
+ */
+
+interface EditedExpense {
+ currency?: string | null
+ exchange_rate?: number | null
+}
+
+/**
+ * The currency an edited expense opens in. A saved expense without a currency is in the
+ * trip's own, which is how the lists read it; opening it in the display currency relabelled
+ * the amount, and a save then stored it in that currency.
+ */
+export function editingCurrencyOf(editing: EditedExpense | null | undefined, tripCurrency: string | null | undefined, base: string): string {
+ return ((editing && (editing.currency || tripCurrency)) || base).toUpperCase()
+}
+
+export interface ExpenseFx {
+ /** The amount in the trip currency, when the save keeps a rate frozen on entry. */
+ inTrip: number | null
+ /** The amount in the display currency at today's rate; null when `inTrip` already is. */
+ shown: number | null
+}
+
+/**
+ * What the amount being edited will count as. An edit that keeps the currency keeps the rate
+ * frozen when the expense was entered (the server re-freezes only when the currency changes),
+ * so it is previewed at that rate, the way the list will show it after the save. Anything
+ * else is previewed at today's rate. Null when there is nothing to convert, including a bill
+ * in the display currency that still reads back as typed.
+ */
+export function expenseFxPreview(args: {
+ total: number
+ currency: string
+ editing: EditedExpense | null | undefined
+ editingCurrency: string
+ tripCurrency: string
+ base: string
+ convert: (amount: number, from: string | null | undefined) => number
+}): ExpenseFx | null {
+ const { total, currency, editing, editingCurrency, tripCurrency, base, convert } = args
+ if (total === 0) return null
+ const inTrip = editing && currency === editingCurrency ? bookedInTrip(total, currency, editing.exchange_rate, tripCurrency) : null
+ if (currency === base && inTrip == null) return null
+ const shown = inTrip == null ? convert(total, currency) : convert(inTrip, tripCurrency)
+ const unit = 10 ** currencyDecimals(base)
+ if (currency === base && Math.round(shown * unit) === Math.round(total * unit)) return null
+ return { inTrip, shown: inTrip != null && tripCurrency === base ? null : shown }
+}
+
+/**
+ * One equal share as the split summary prints it, "$400.88", followed by what that share
+ * counts as when the amount is converted, "$400.88 → $390.54". That second figure is the
+ * one the row's "you lent" is made of, so the editor and the row cannot disagree.
+ */
+export function splitShareLabel(
+ each: number,
+ currency: string,
+ fx: ExpenseFx | null,
+ participants: number,
+ base: string,
+ sym: (currency: string) => string,
+ locale: string,
+): string {
+ const entered = sym(currency) + each.toFixed(2)
+ const whole = fx ? (fx.shown ?? fx.inTrip) : null
+ if (whole == null || participants <= 0) return entered
+ return `${entered} → ${formatMoney(whole / participants, base, locale)}`
+}
+
+/** Everything an expense editor needs to preview a conversion, from the trip in the store. */
+export function useExpenseFx(base: string, editing: EditedExpense | null | undefined) {
+ const storedTripCurrency = useTripStore(s => s.trip?.currency)
+ const tripCurrency = (storedTripCurrency || base).toUpperCase()
+ const { convert } = useExchangeRates(base, tripCurrency)
+ const editingCurrency = editingCurrencyOf(editing, storedTripCurrency, base)
+ const preview = (total: number, currency: string) =>
+ expenseFxPreview({ total, currency, editing, editingCurrency, tripCurrency, base, convert })
+ return { tripCurrency, editingCurrency, preview }
+}
diff --git a/client/src/components/Budget/useFreezeMissingRates.test.ts b/client/src/components/Budget/useFreezeMissingRates.test.ts
new file mode 100644
index 000000000..52d3060ce
--- /dev/null
+++ b/client/src/components/Budget/useFreezeMissingRates.test.ts
@@ -0,0 +1,123 @@
+// FE-FREEZE-RATES-001 to FE-FREEZE-RATES-006
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import type { BudgetUnconverted } from '@trek/shared'
+import { server } from '../../../tests/helpers/msw/server'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { buildBudgetItem } from '../../../tests/helpers/factories'
+import { useTripStore } from '../../store/tripStore'
+import { setForcedOffline } from '../../sync/networkMode'
+import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
+import { resetFreezeAttempts, useFreezeMissingRates } from './useFreezeMissingRates'
+
+// The reporter's setup: an AUD trip whose server cannot fetch rates, and a VND bill that
+// never froze one. The browser has today's AUD table.
+const bill = () => buildBudgetItem({ id: 11, trip_id: 5, name: 'Pho', total_price: 8920000, currency: 'VND', exchange_rate: 1 })
+const pending: BudgetUnconverted = { item_ids: [11], settlement_ids: [3], currencies: ['VND'] }
+
+type Props = Parameters[0]
+
+function mountHook(over: Partial = {}) {
+ const onHealed = vi.fn()
+ const props: Props = { tripId: 5, tripCurrency: 'AUD', canEdit: true, unconverted: pending, onHealed, ...over }
+ const view = renderHook((p: Props) => useFreezeMissingRates(p), { initialProps: props })
+ return { ...view, onHealed, props }
+}
+
+let posted: unknown[] = []
+
+function serveFreeze(reply: () => Response = () => HttpResponse.json({
+ items: [{ ...bill(), exchange_rate: 18241.3 }],
+ settlements: [{ id: 3, trip_id: 5, from_user_id: 2, to_user_id: 1, amount: 100000, currency: 'VND', exchange_rate: 18241.3 }],
+ unresolved: [],
+})) {
+ server.use(http.post('/api/trips/5/budget/freeze-rates', async ({ request }) => {
+ posted.push(await request.json())
+ return reply()
+ }))
+}
+
+/** Lets a heal that was never going to send anything run to its end. */
+const settle = () => act(async () => { await new Promise(r => setTimeout(r, 30)) })
+
+beforeEach(() => {
+ resetAllStores()
+ resetFreezeAttempts()
+ clearExchangeRateCache()
+ posted = []
+ localStorage.setItem('trek_fx_AUD', JSON.stringify({ rates: { AUD: 1, VND: 18241.3, EUR: 0.61 }, ts: Date.now() }))
+ seedStore(useTripStore, { budgetItems: [bill()] })
+ serveFreeze()
+})
+
+afterEach(() => {
+ setForcedOffline(false)
+ vi.restoreAllMocks()
+})
+
+describe('useFreezeMissingRates', () => {
+ it('FE-FREEZE-RATES-001: lends the fresh rates for the listed currencies and reloads once rows count', async () => {
+ const { onHealed } = mountHook()
+
+ await waitFor(() => expect(onHealed).toHaveBeenCalledTimes(1))
+ // Only the currency the settlement is missing goes out, never the whole table.
+ expect(posted).toEqual([{ fallback_fx: { base: 'AUD', rates: { VND: 18241.3 } } }])
+ expect(useTripStore.getState().budgetItems[0].exchange_rate).toBe(18241.3)
+ })
+
+ it('FE-FREEZE-RATES-002: asks once per set of rows, however often the settlement is read', async () => {
+ const { onHealed, props, rerender } = mountHook()
+ await waitFor(() => expect(onHealed).toHaveBeenCalledTimes(1))
+
+ // The same rows in another order, then again after a reload: nothing new to ask.
+ rerender({ ...props, unconverted: { item_ids: [11], settlement_ids: [3], currencies: ['VND'] } })
+ rerender({ ...props, unconverted: { settlement_ids: [3], item_ids: [11], currencies: ['VND'] } })
+ await settle()
+ expect(posted).toHaveLength(1)
+
+ // Another row is another attempt.
+ rerender({ ...props, unconverted: { item_ids: [11, 12], settlement_ids: [3], currencies: ['VND'] } })
+ await waitFor(() => expect(posted).toHaveLength(2))
+ })
+
+ it('FE-FREEZE-RATES-003: never asks for a viewer, offline, or with nothing left out', async () => {
+ mountHook({ canEdit: false })
+ mountHook({ unconverted: { item_ids: [], settlement_ids: [], currencies: [] } })
+ mountHook({ unconverted: undefined })
+ setForcedOffline(true)
+ mountHook({ unconverted: { item_ids: [21], settlement_ids: [], currencies: ['VND'] } })
+ await settle()
+
+ expect(posted).toEqual([])
+ })
+
+ it('FE-FREEZE-RATES-004: sends nothing when the browser has no rate for the currency either', async () => {
+ const { onHealed } = mountHook({ unconverted: { item_ids: [31], settlement_ids: [], currencies: ['JPY'] } })
+ await settle()
+
+ expect(posted).toEqual([])
+ expect(onHealed).not.toHaveBeenCalled()
+ })
+
+ it('FE-FREEZE-RATES-005: does not reload when the server froze nothing', async () => {
+ serveFreeze(() => HttpResponse.json({ items: [], settlements: [], unresolved: ['VND'] }))
+ const { onHealed } = mountHook()
+
+ await waitFor(() => expect(posted).toHaveLength(1))
+ await settle()
+ expect(onHealed).not.toHaveBeenCalled()
+ })
+
+ it('FE-FREEZE-RATES-006: a refused heal is logged, not thrown, and not retried in a loop', async () => {
+ const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+ serveFreeze(() => HttpResponse.json({ error: 'The trip currency changed. Reload and try again.' }, { status: 409 }))
+ const { onHealed, props, rerender } = mountHook()
+
+ await waitFor(() => expect(warn).toHaveBeenCalled())
+ rerender({ ...props })
+ await settle()
+ expect(posted).toHaveLength(1)
+ expect(onHealed).not.toHaveBeenCalled()
+ })
+})
diff --git a/client/src/components/Budget/useFreezeMissingRates.ts b/client/src/components/Budget/useFreezeMissingRates.ts
new file mode 100644
index 000000000..9fdbccd2a
--- /dev/null
+++ b/client/src/components/Budget/useFreezeMissingRates.ts
@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react'
+import type { BudgetFallbackFx, BudgetUnconverted } from '@trek/shared'
+import { fetchFreshRates, isSendableRate } from '../../hooks/useExchangeRates'
+import { useTripStore } from '../../store/tripStore'
+import { isEffectivelyOffline } from '../../sync/networkMode'
+
+/**
+ * Every set of rows already tried, by trip, trip currency and ids. The settlement lists a
+ * row it cannot count until a rate is frozen on it; one the browser has no rate for either
+ * stays listed, and without this every reload of the settlement would ask again.
+ */
+const tried = new Set()
+
+/** Test-only: the attempts outlive a vitest file's individual tests. */
+export function resetFreezeAttempts(): void {
+ tried.clear()
+}
+
+/**
+ * Heals the rows the settlement leaves out (`unconverted`): expenses and transfers in a
+ * foreign currency that never froze a rate, while the server cannot fetch one. That is the
+ * setup where the server's own fetch fails and the browser's works, so an editor's browser
+ * lends its fresh rates to POST …/budget/freeze-rates. The server still prefers its own rate
+ * and never touches a row that is frozen already.
+ *
+ * Runs for an editor only, online, and once per set of rows. No request goes out when the
+ * browser has no rate for any of the listed currencies either. `onHealed` runs when the
+ * server froze something, so the caller can reload the settlement.
+ *
+ * Deliberately not in the mutation queue: the heal is derived and idempotent, and a replay
+ * hours later would freeze a rate from another day.
+ */
+export function useFreezeMissingRates({ tripId, tripCurrency, canEdit, unconverted, onHealed }: {
+ tripId: number
+ tripCurrency: string
+ canEdit: boolean
+ unconverted: BudgetUnconverted | null | undefined
+ onHealed: () => void
+}): void {
+ const onHealedRef = useRef(onHealed)
+ useEffect(() => { onHealedRef.current = onHealed })
+ const mounted = useRef(true)
+ useEffect(() => {
+ mounted.current = true
+ return () => { mounted.current = false }
+ }, [])
+
+ const trip = (tripCurrency || '').toUpperCase()
+ const itemIds = [...(unconverted?.item_ids ?? [])].sort((a, b) => a - b).join(',')
+ const settlementIds = [...(unconverted?.settlement_ids ?? [])].sort((a, b) => a - b).join(',')
+ const currencies = (unconverted?.currencies ?? []).join(',')
+
+ useEffect(() => {
+ if (!canEdit || !trip || (!itemIds && !settlementIds) || isEffectivelyOffline()) return
+ const key = `${tripId}:${trip}:${itemIds}:${settlementIds}`
+ if (tried.has(key)) return
+ tried.add(key)
+
+ const heal = async (): Promise => {
+ const rates = await fetchFreshRates(trip)
+ const lent: Record = {}
+ for (const cur of currencies.split(',')) {
+ const rate = rates?.[cur]
+ if (isSendableRate(rate)) lent[cur] = rate
+ }
+ if (Object.keys(lent).length === 0) return
+ const fallback: BudgetFallbackFx = { base: trip, rates: lent }
+ const result = await useTripStore.getState().freezeMissingRates(tripId, fallback)
+ if (mounted.current && (result.items.length > 0 || result.settlements.length > 0)) onHealedRef.current()
+ }
+ heal().catch((err: unknown) => console.warn('Could not freeze the missing exchange rates:', err))
+ }, [canEdit, trip, tripId, itemIds, settlementIds, currencies])
+}
diff --git a/client/src/components/Map/MapView.leaflet.test.tsx b/client/src/components/Map/MapView.leaflet.test.tsx
new file mode 100644
index 000000000..f76fe298d
--- /dev/null
+++ b/client/src/components/Map/MapView.leaflet.test.tsx
@@ -0,0 +1,246 @@
+/**
+ * Clicking a place pin after the map has been dragged (#2504).
+ *
+ * Nothing Leaflet-related is mocked here on purpose. The bug lived in the space between
+ * our drag wiring and Leaflet's own event routing: the pins swallow mousedown so a drag
+ * onto a day can start without the map sliding away, and Leaflet only forgets that the
+ * map was panned when it sees the next mousedown. A mocked react-leaflet, like the one
+ * MapView.test.tsx uses, has no such memory and kept passing throughout.
+ *
+ * The click itself has to keep taking Leaflet's route and the page's: it is what closes
+ * an open popup on the map, and an open context menu beside it.
+ */
+import React, { useState } from 'react'
+import { flushSync } from 'react-dom'
+import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest'
+import { render, waitFor, act } from '../../../tests/helpers/render'
+import { resetAllStores } from '../../../tests/helpers/store'
+import { buildPlace } from '../../../tests/helpers/factories'
+
+vi.mock('../../hooks/useGeolocation', () => ({
+ useGeolocation: () => ({ position: null, mode: 'off', error: null, errorCode: null, cycleMode: vi.fn(), setMode: vi.fn() }),
+}))
+
+vi.mock('../../services/photoService', () => ({
+ getCached: vi.fn(() => null),
+ isLoading: vi.fn(() => false),
+ fetchPhoto: vi.fn(),
+ onThumbReady: vi.fn(() => () => {}),
+ getAllThumbs: vi.fn(() => ({})),
+}))
+
+import L from 'leaflet'
+import { MapView } from './MapView'
+import { ContextMenu } from '../shared/ContextMenu'
+
+// Every map this file builds, newest last, for the tests that reach past the component.
+const maps: L.Map[] = []
+L.Map.addInitHook(function (this: L.Map) { maps.push(this) })
+
+// A raster template keeps the basemap a plain TileLayer: the vector default needs WebGL.
+const RASTER = 'https://tiles.example.test/{z}/{x}/{y}.png'
+
+// Leaflet sizes the map from the container, which jsdom lays out at 0 x 0. The cluster
+// group only draws pins inside the visible bounds, so the map needs a real size.
+const sized = ['clientWidth', 'clientHeight'] as const
+const originals = new Map()
+beforeAll(() => {
+ // The pans here are synthetic and instant. With inertia, Leaflet would carry them on in
+ // animation frames that can land after a test has already unmounted its map.
+ L.Map.mergeOptions({ inertia: false })
+ for (const key of sized) {
+ originals.set(key, Object.getOwnPropertyDescriptor(HTMLElement.prototype, key))
+ Object.defineProperty(HTMLElement.prototype, key, { configurable: true, get: () => (key === 'clientWidth' ? 1000 : 700) })
+ }
+})
+afterAll(() => {
+ L.Map.mergeOptions({ inertia: true })
+ for (const key of sized) {
+ const original = originals.get(key)
+ if (original) Object.defineProperty(HTMLElement.prototype, key, original)
+ else delete (HTMLElement.prototype as unknown as Record)[key]
+ }
+})
+
+afterEach(() => {
+ resetAllStores()
+})
+
+/** Leaflet only starts a pan for the primary button, which it reads off `which`. */
+function mouse(type: string, x: number, y: number): MouseEvent {
+ const event = new MouseEvent(type, { bubbles: true, cancelable: true, button: 0, clientX: x, clientY: y })
+ Object.defineProperty(event, 'which', { value: 1 })
+ return event
+}
+
+/** Drag the map by its background, the way a user pans it. */
+function panMap(container: Element) {
+ act(() => {
+ container.dispatchEvent(mouse('mousedown', 300, 300))
+ container.dispatchEvent(mouse('mousemove', 340, 320))
+ container.dispatchEvent(mouse('mousemove', 380, 340))
+ container.dispatchEvent(mouse('mouseup', 380, 340))
+ })
+}
+
+/** A plain click on an element: press, release, click, all on the same spot. */
+function clickOn(el: Element) {
+ act(() => {
+ el.dispatchEvent(mouse('mousedown', 500, 350))
+ el.dispatchEvent(mouse('mouseup', 500, 350))
+ el.dispatchEvent(mouse('click', 500, 350))
+ })
+}
+
+// Two stops a few hundred metres apart in Nara: separate pins at this zoom, not a cluster.
+const places = [
+ { ...buildPlace({ id: 1, name: 'Todai-ji', lat: 34.689, lng: 135.8398 }), category_name: null, category_color: null, category_icon: null },
+ { ...buildPlace({ id: 2, name: 'Kasuga Taisha', lat: 34.6812, lng: 135.8484 }), category_name: null, category_color: null, category_icon: null },
+]
+
+async function renderMap() {
+ const onMarkerClick = vi.fn()
+ const onMapClick = vi.fn()
+ const view = render(
+ ).maxTouchPoints
+ }
+ })
+
+ it('FE-MAPCLICK-005: the place a pin opens stays open when the pin redraws mid-click', async () => {
+ // The selection a pin makes redraws its icon, which replaces the element the click
+ // landed on. Leaflet has to have found the pin before that happens: reading the target
+ // afterwards, it finds it cut out of the map and takes the click for one on the empty
+ // background, which would close the place again straight away.
+ const onMapClick = vi.fn()
+ function Planner() {
+ const [selected, setSelected] = useState(null)
+ return (
+ <>
+
+ flushSync(() => setSelected(id))}
+ onMapClick={() => { onMapClick(); setSelected(null) }}
+ />
+
+ )
+ }
+ const view = render(
- {formatMoney(pendingExpense.total_price, pendingExpense.currency || base, locale)}
+ {formatMoney(pendingExpense.total_price, ownCurrency(pendingExpense.currency), locale)}
{t(meta.labelKey)}
{t(hintKey)}
{linked.name}
{t(meta.labelKey)}
-
- {!automated && (
-
- )}
+ setShowDeleteConfirm(false)}
+ title={t('reservations.confirm.deleteTitle')}
+ message={t('reservations.confirm.deleteBody', { name: reservation?.title ?? '' })}
+ confirmLabel={t('common.delete')}
+ cancelLabel={t('common.cancel')}
+ onConfirm={async () => {
+ setShowDeleteConfirm(false)
+ await onDelete?.()
+ onClose()
+ }}
+ />
)
}
diff --git a/client/src/components/Planner/importedPrice.ts b/client/src/components/Planner/importedPrice.ts
new file mode 100644
index 000000000..bca5f52c5
--- /dev/null
+++ b/client/src/components/Planner/importedPrice.ts
@@ -0,0 +1,25 @@
+import { typeToCostCategory } from '@trek/shared'
+
+/**
+ * The linked cost an imported booking's parsed price becomes, or null when it has none.
+ *
+ * The price keeps the currency it was quoted in (#2525). The forms used to send the
+ * amount alone, so an imported $801.76 was stored as 801.76 in the trip's own currency
+ * while the form had just previewed it in dollars. A currency that is not a three-letter
+ * code is left out, which is what the server does with one too, so the preview and the
+ * saved cost read the same either way.
+ */
+export function importedPriceEntry(
+ metadata: unknown,
+ type: string,
+): { total_price: number; category: string; currency?: string } | null {
+ const meta = metadata && typeof metadata === 'object' ? (metadata as Record) : {}
+ const price = Number(meta.price)
+ if (!Number.isFinite(price) || price <= 0) return null
+ const code = typeof meta.priceCurrency === 'string' ? meta.priceCurrency.trim().toUpperCase() : ''
+ return {
+ total_price: price,
+ category: typeToCostCategory(type),
+ ...(/^[A-Z]{3}$/.test(code) ? { currency: code } : {}),
+ }
+}
diff --git a/client/src/components/shared/ErrorBoundary.test.tsx b/client/src/components/shared/ErrorBoundary.test.tsx
index 62d18bf47..be5e7b7ed 100644
--- a/client/src/components/shared/ErrorBoundary.test.tsx
+++ b/client/src/components/shared/ErrorBoundary.test.tsx
@@ -1,6 +1,14 @@
import React from 'react';
import { render, screen, fireEvent } from '../../../tests/helpers/render';
import ErrorBoundary, { RootErrorFallback } from './ErrorBoundary';
+import * as chunkReload from '../../utils/chunkReload';
+
+// Only the Reload button's way out is replaced; the boundary's own automatic reload
+// (reloadOnceForChunk) keeps running the real code.
+vi.mock('../../utils/chunkReload', async (importOriginal) => ({
+ ...(await importOriginal()),
+ reloadOntoCurrentBuild: vi.fn(),
+}));
// React logs every caught error itself; without this each of these tests prints a
// full component stack and buries the real output.
@@ -146,9 +154,10 @@ describe('ErrorBoundary', () => {
});
it('FE-COMP-ERRBOUND-011: a chunk failure reloads once, then stops', () => {
+ // The recovery reload is a location.replace onto a fresh URL (chunkReload).
const reload = vi.fn();
Object.defineProperty(window, 'location', {
- value: { ...window.location, reload },
+ value: { ...window.location, replace: reload },
writable: true,
});
@@ -214,3 +223,40 @@ describe('RootErrorFallback', () => {
expect(screen.getByText('A new version is available')).toBeInTheDocument();
});
});
+
+describe('Reload button', () => {
+ let reload: ReturnType;
+ beforeEach(() => {
+ reload = vi.fn();
+ Object.defineProperty(window, 'location', { value: { ...window.location, reload }, writable: true });
+ vi.mocked(chunkReload.reloadOntoCurrentBuild).mockClear();
+ });
+
+ // A plain reload is answered by the service worker with the shell that just
+ // failed, which is how the update screen outlived every reload (#2524).
+ it('FE-COMP-ERRBOUND-017: after a dead chunk it reloads onto the current build', () => {
+ render( {}} isChunkError />);
+ fireEvent.click(screen.getByText('Reload page'));
+ expect(chunkReload.reloadOntoCurrentBuild).toHaveBeenCalledTimes(1);
+ expect(reload).not.toHaveBeenCalled();
+ });
+
+ it('FE-COMP-ERRBOUND-018: the route fallback for a dead chunk does the same', () => {
+ sessionStorage.setItem('trek:chunk-reload', '1');
+ render(
+
+ ,
+ );
+ fireEvent.click(screen.getByText('Reload page'));
+ expect(chunkReload.reloadOntoCurrentBuild).toHaveBeenCalledTimes(1);
+ expect(reload).not.toHaveBeenCalled();
+ });
+
+ it('FE-COMP-ERRBOUND-019: any other failure keeps the plain reload', () => {
+ render( {}} isChunkError={false} />);
+ fireEvent.click(screen.getByText('Reload page'));
+ expect(reload).toHaveBeenCalledTimes(1);
+ expect(chunkReload.reloadOntoCurrentBuild).not.toHaveBeenCalled();
+ });
+});
diff --git a/client/src/components/shared/ErrorBoundary.tsx b/client/src/components/shared/ErrorBoundary.tsx
index de75be4e0..78452e614 100644
--- a/client/src/components/shared/ErrorBoundary.tsx
+++ b/client/src/components/shared/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { AlertTriangle, RefreshCw, RotateCcw } from 'lucide-react'
import { useTranslation } from '../../i18n'
-import { isChunkLoadError, reloadOnceForChunk } from '../../utils/chunkReload'
+import { isChunkLoadError, reloadOnceForChunk, reloadOntoCurrentBuild } from '../../utils/chunkReload'
/**
* The app had none of these, so a single throw during render unmounted the whole
@@ -95,6 +95,16 @@ export default class ErrorBoundary extends React.Component window.location.reload()}
+ onClick={() => reloadPage(isChunkError)}
className={[
'inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-caption font-medium',
mobile ? 'border-[color:var(--m-rowbr)] text-m-ink' : 'border-edge text-content',
@@ -201,7 +211,7 @@ export function RootErrorFallback({ error, isChunkError }: FallbackState) {
{message &&
{/* CONVERSION HINT */}
- {currency !== base && totalNum !== 0 && (
+ {fx && (
+
}
>
@@ -1249,6 +1258,20 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
)}
+
+
+ {!automated && reservation?.id && onDelete && (
+
+ )}
+
+
+
+ {!automated && (
+
+ )}
+
{message}}
{formatMoney(totalNum, currency, locale)}
- ≈
- {formatMoney(convert(totalNum, currency), base, locale)}
- · {t('costs.liveRate')}
+ {fx.inTrip != null && <>
+ →
+ {formatMoney(fx.inTrip, tripCur, locale)}
+ }
+ {fx.shown != null && <>
+ ≈
+ {formatMoney(fx.shown, base, locale)}
+ · {t('costs.liveRate')}
+ }
)}
@@ -646,12 +654,12 @@ export default function MCostSheet({ tripId, base, people, me, editing, prefill,
{splitMode === 'equally' ? (
- {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: sym(currency) + each.toFixed(2) })}
+ {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: splitShareLabel(each, currency, fx, participants.size, base, sym, locale) })}
) : (
{customBalanced
- ? t('costs.splitSummary', { count: participants.size, amount: sym(currency) + each.toFixed(2) })
+ ? t('costs.splitSummary', { count: participants.size, amount: splitShareLabel(each, currency, fx, participants.size, base, sym, locale) })
: `${sym(currency)}${splitSum.toFixed(2)} / ${sym(currency)}${totalNum.toFixed(2)}`}
)}
diff --git a/client/src/mobile/screens/trip/sheets/MTransportFormSheet.tsx b/client/src/mobile/screens/trip/sheets/MTransportFormSheet.tsx
index 20e44c98f..952b214cf 100644
--- a/client/src/mobile/screens/trip/sheets/MTransportFormSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MTransportFormSheet.tsx
@@ -12,6 +12,7 @@ import { BookingCodeInput } from '../../../../components/shared/BookingCode'
import AirportSelect, { type Airport } from '../../../../components/Planner/AirportSelect'
import LocationSelect, { type LocationPoint } from '../../../../components/Planner/LocationSelect'
import { toLocationPicks } from '../../../../components/Planner/locationPicks'
+import { importedPriceEntry } from '../../../../components/Planner/importedPrice'
import TransitSearchPanel from '../../../../components/Planner/TransitSearchPanel'
import { Eyebrow, FIELD_AREA_CLS, FIELD_CLS, FormSheetFooter, FormSheetHeader } from './PlSheetChrome'
import PlFileAttach from './PlFileAttach'
@@ -572,11 +573,8 @@ export default function MTransportFormSheet({ planner, onOpenExpense }: MTranspo
// Imported booking → auto-create the linked cost from the parsed price
// (only on create and only when a price is present).
if (!res && prefill && isBudgetEnabled) {
- const pmeta = prefill.metadata && typeof prefill.metadata === 'object' ? (prefill.metadata as Record) : {}
- const price = Number(pmeta.price)
- if (Number.isFinite(price) && price > 0) {
- payload.create_budget_entry = { total_price: price, category: typeToCostCategory(form.type) }
- }
+ const entry = importedPriceEntry(prefill.metadata, form.type)
+ if (entry) payload.create_budget_entry = entry
}
const saved = await saveTransport(payload)
// Persist the traveler assignment once we have the reservation id (from the
diff --git a/client/src/mobile/screens/trip/tabs/MCostsTab.tsx b/client/src/mobile/screens/trip/tabs/MCostsTab.tsx
index 3476410bd..0fb55490d 100644
--- a/client/src/mobile/screens/trip/tabs/MCostsTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MCostsTab.tsx
@@ -1,4 +1,4 @@
-import { convertBooked } from '../../../../hooks/useExchangeRates'
+import { convertBooked, convertedLine } from '../../../../hooks/useExchangeRates'
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
import {
AlertCircle, ArrowDown, ArrowLeftRight, ArrowRight, ArrowUp, Check, ChevronDown, ChevronUp,
@@ -7,14 +7,15 @@ import {
import MDancingTrek from '../../../components/MDancingTrek'
import { useAuthStore } from '../../../../store/authStore'
import { useSettingsStore } from '../../../../store/settingsStore'
-import { useExchangeRates } from '../../../../hooks/useExchangeRates'
+import { useExchangeRates, withFallbackFx } from '../../../../hooks/useExchangeRates'
import { useTranslation } from '../../../../i18n'
import { amountToInputString, formatMoney } from '../../../../utils/formatters'
import { downloadBlob, openFile } from '../../../../utils/fileDownload'
import { budgetApi } from '../../../../api/client'
import MCostSheet from '../sheets/MCostSheet'
import { ReceiptPreviewModal } from '../../../../components/Budget/ReceiptPreviewModal'
-import { finalBudgetFor, finalBudgetSources, readUserNote, settlementDate } from '../../../../components/Budget/CostsPanel.helpers'
+import { useFreezeMissingRates } from '../../../../components/Budget/useFreezeMissingRates'
+import { finalBudgetFor, finalBudgetSources, paidByUser, readUserNote, settlementDate } from '../../../../components/Budget/CostsPanel.helpers'
import { catMeta, COST_CAT_META } from '../../../../components/Budget/costsCategories'
import CustomSelect from '../../../../components/shared/CustomSelect'
import { CustomDatePicker } from '../../../../components/shared/CustomDateTimePicker'
@@ -27,8 +28,8 @@ import { Eyebrow, FIELD_CLS, FormSheetFooter, FormSheetHeader } from '../sheets/
import { CountPill, TabScroller } from './tabChrome'
import { STATUS_COLOR, type MTabScreenProps } from './tabModel'
import {
- baseTotal, buildCostsCsv, categoryBreakdown, categoryFilterKeys, computeTotals, currencyOf,
- dayFilterKeys, filterBudgetItems, filterSettlements, groupLedgerByDay, isUnfinished, memberShareOf, tint,
+ baseTotal, buildCostsCsv, categoryBreakdown, categoryFilterKeys, computeTotals,
+ dayFilterKeys, filterBudgetItems, filterSettlements, groupLedgerByDay, isUnfinished, lineOf, memberShareOf, tint,
type CostsCtx, type CostsSegment, type CostsSettlement, type CostsSettlementResponse,
} from './costsModel'
import type { BudgetParticipantFinal } from '@trek/shared'
@@ -55,18 +56,20 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
const displayCurrency = useSettingsStore(s => s.settings.default_currency)
const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
const tripCurrency = (trip?.currency || base).toUpperCase()
- const { convert } = useExchangeRates(base)
- const ctx: CostsCtx = useMemo(() => ({ me, tripCurrency, convert }), [me, tripCurrency, convert])
+ // Anchored on the trip currency's quote, the one the server books with (#2525).
+ const { convert, displayPerTrip } = useExchangeRates(base, tripCurrency)
+ const ctx: CostsCtx = useMemo(() => ({ me, tripCurrency, displayCurrency: base, convert }), [me, tripCurrency, base, convert])
const [settlement, setSettlement] = useState(null)
// A failed settlement read leaves `settlement` null, and the final budget would
// read that as "the trip cost nobody anything", a claim we cannot make.
const [settlementError, setSettlementError] = useState(false)
+ // Sends the browser's own figure for the display currency, as CostsPanel.tsx does.
const loadSettlement = useCallback(() => {
- budgetApi.settlement(tripId, base)
+ budgetApi.settlement(tripId, base, base !== tripCurrency ? displayPerTrip : null)
.then(s => { setSettlement(s); setSettlementError(false) })
.catch(() => setSettlementError(true))
- }, [tripId, base])
+ }, [tripId, base, tripCurrency, displayPerTrip])
// Mirrors CostsPanel.tsx: items reload on trip change, settlement reloads on
// trip/base change; further refreshes are explicit after each mutation below
@@ -78,6 +81,7 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
useEffect(() => {
loadSettlement()
}, [loadSettlement])
+ useFreezeMissingRates({ tripId, tripCurrency, canEdit, unconverted: settlement?.unconverted, onHealed: loadSettlement })
const [search, setSearch] = useState('')
const [segment, setSegment] = useState('all')
@@ -339,7 +343,7 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
:
)
@@ -570,6 +574,7 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
}}
tripId={tripId}
base={base}
+ tripCurrency={tripCurrency}
people={tripMembers}
me={me}
toast={toast}
@@ -622,8 +627,8 @@ function ExpenseRow({ item, ctx, base, locale, t, canEdit, onEdit, onDelete, onT
}) {
const meta = catMeta(item.category)
const Icon = meta.Icon
- const cur = currencyOf(item, ctx)
const total = baseTotal(item, ctx)
+ const line = lineOf(item.total_price || 0, item, ctx, total)
const unfinished = isUnfinished(item, ctx)
const borderColor = tint(meta.color, 0.55)
const members = item.members || []
@@ -670,9 +675,9 @@ function ExpenseRow({ item, ctx, base, locale, t, canEdit, onEdit, onDelete, onT
)}
- {cur !== base && (
+ {line && (
- {formatMoney(item.total_price, cur, locale)} {'→'} {formatMoney(total, base, locale)}
+ {formatMoney(line.entered.amount, line.entered.currency, locale)} {'→'} {formatMoney(line.into.amount, line.into.currency, locale)}
)}
{members.length > 0 && (
@@ -756,7 +761,9 @@ function PaymentRow({ settlement, ctx, base, locale, t, personName, canEdit, onE
}) {
const cur = (settlement.currency || base).toUpperCase()
// At the rate it was settled at, not today's (#1445), matching the desktop ledger.
- const amount = convertBooked(settlement.amount, settlement.currency, settlement.exchange_rate, ctx.tripCurrency, ctx.convert)
+ // A transfer without a currency was entered in the display currency, not the trip's.
+ const amount = convertBooked(settlement.amount, cur, settlement.exchange_rate, ctx.tripCurrency, ctx.convert)
+ const line = convertedLine(settlement.amount, cur, settlement.exchange_rate, ctx.tripCurrency, base, amount)
return (
@@ -767,9 +774,9 @@ function PaymentRow({ settlement, ctx, base, locale, t, personName, canEdit, onE
@@ -799,9 +806,10 @@ function PaymentRow({ settlement, ctx, base, locale, t, personName, canEdit, onE
* with the balances; each line is signed by what it does to the final, so the
* column reads as a subtraction and the rows add up to the line above them.
*/
-function FinalBudgetBreakdown({ row, items, base, locale, t, personName }: {
+function FinalBudgetBreakdown({ row, items, ctx, base, locale, t, personName }: {
row: BudgetParticipantFinal
items: BudgetItem[]
+ ctx: CostsCtx
base: string
locale: string
t: TFn
@@ -810,6 +818,12 @@ function FinalBudgetBreakdown({ row, items, base, locale, t, personName }: {
const signed = (v: number) => (v < 0 ? '−' : '+') + formatMoney(Math.abs(v), base, locale)
const { fronted, moved, outstanding } = finalBudgetSources(row, items)
const transfer = (fromId: number, toId: number) => `${personName(fromId)} → ${personName(toId)}`
+ // Beside a converted row's name, what was entered, as the list above names it (#2525).
+ const nameOf = (itemId: number, name: string, shown: number) => {
+ const e = items.find(i => i.id === itemId)
+ const entered = e ? lineOf(paidByUser(e, row.user_id), e, ctx, shown)?.entered : null
+ return entered ? `${name} · ${formatMoney(entered.amount, entered.currency, locale)}` : name
+ }
const line = (key: string, label: string, value: string) => (
404 Not Found ', 'text/html'],
+ ])('keeps the link on %s', async (_label, body, contentType) => {
+ server.use(
+ http.get('/api/shared/:token', () => new HttpResponse(body, { status: 404, headers: { 'content-type': contentType } })),
+ );
+ renderSharedTrip('test-token');
+
+ await waitFor(() => expect(screen.getByText(/could not be loaded/i)).toBeInTheDocument());
+ expect(screen.queryByText(/link expired or invalid/i)).not.toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
+ });
+
+ it('shows the failed screen instead of crashing when a 200 is not the share payload', async () => {
+ // An auth wall or a captive portal answering the API call with its own page.
+ let calls = 0;
+ server.use(
+ http.get('/api/shared/:token', () => {
+ calls += 1;
+ if (calls === 1) {
+ return new HttpResponse('Sign in', {
+ status: 200,
+ headers: { 'content-type': 'text/html' },
+ });
+ }
+ return HttpResponse.json({
+ trip: { id: 1, title: 'Past The Wall', start_date: '2026-07-01', end_date: '2026-07-02' },
+ days: [],
+ assignments: {},
+ dayNotes: {},
+ places: [],
+ reservations: [],
+ accommodations: [],
+ permissions: { share_map: true },
+ });
+ }),
+ );
+ renderSharedTrip('test-token');
+
+ fireEvent.click(await screen.findByRole('button', { name: /try again/i }));
+
+ await waitFor(() => expect(screen.getByText('Past The Wall')).toBeInTheDocument());
+ expect(calls).toBe(2);
+ });
+
+ it('loads the trip when the retry gets through', async () => {
+ let calls = 0;
+ server.use(
+ http.get('/api/shared/:token', () => {
+ calls += 1;
+ if (calls === 1) return new HttpResponse(null, { status: 503 });
+ return HttpResponse.json({
+ trip: { id: 1, title: 'Back Online Trip', start_date: '2026-07-01', end_date: '2026-07-02' },
+ days: [],
+ assignments: {},
+ dayNotes: {},
+ places: [],
+ reservations: [],
+ accommodations: [],
+ permissions: { share_map: true },
+ });
+ }),
+ );
+ renderSharedTrip('test-token');
+
+ const retry = await screen.findByRole('button', { name: /try again/i });
+ fireEvent.click(retry);
+
+ await waitFor(() => expect(screen.getByText('Back Online Trip')).toBeInTheDocument());
+ expect(calls).toBe(2);
+ });
+
+ it('keeps the failed screen up with a busy button while the retry runs, and sends it once', async () => {
+ let calls = 0;
+ let release: () => void = () => {};
+ server.use(
+ http.get('/api/shared/:token', async () => {
+ calls += 1;
+ if (calls === 1) return new HttpResponse(null, { status: 500 });
+ await new Promise((resolve) => { release = resolve; });
+ return new HttpResponse(null, { status: 500 });
+ }),
+ );
+ renderSharedTrip('test-token');
+
+ const retry = await screen.findByRole('button', { name: /try again/i });
+ fireEvent.click(retry);
+ await waitFor(() => expect(retry).toBeDisabled());
+ expect(retry).toHaveAttribute('aria-busy', 'true');
+ expect(screen.getByText(/could not be loaded/i)).toBeInTheDocument();
+ fireEvent.click(retry);
+
+ await waitFor(() => expect(calls).toBe(2));
+ release();
+ await waitFor(() => expect(retry).not.toBeDisabled());
+ expect(calls).toBe(2);
+ expect(screen.getByText(/could not be loaded/i)).toBeInTheDocument();
+ });
+
+ it('lands on the expired screen when the retry finds the link gone', async () => {
+ let calls = 0;
+ server.use(
+ healthy(),
+ http.get('/api/shared/:token', () => {
+ calls += 1;
+ return calls === 1
+ ? HttpResponse.error()
+ : HttpResponse.json({ error: 'Invalid or expired link' }, { status: 404 });
+ }),
+ );
+ renderSharedTrip('test-token');
+
+ fireEvent.click(await screen.findByRole('button', { name: /try again/i }));
+
+ await waitFor(() => expect(screen.getByText(/link expired or invalid/i)).toBeInTheDocument());
+ expect(calls).toBe(2);
+ });
+ });
});
diff --git a/client/src/pages/SharedTripPage.tsx b/client/src/pages/SharedTripPage.tsx
index 94ca9ec93..2080dcab2 100644
--- a/client/src/pages/SharedTripPage.tsx
+++ b/client/src/pages/SharedTripPage.tsx
@@ -27,18 +27,20 @@ import { getCategoryIcon } from '../components/shared/categoryIcons';
import PublicLanguagePicker from '../components/shared/PublicLanguagePicker';
import { OFM_POSITRON, DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM, MAP_MAX_ZOOM, attributionForTile } from '../constants/mapDefaults';
import VectorBasemap from '../components/Map/VectorBasemap';
+import { convertBooked, convertedLine } from '../hooks/useExchangeRates';
import { useTranslation } from '../i18n';
import { avatarSrc } from '../utils/avatarSrc';
import { safeHexColor } from '../utils/safeColor';
import { getMergedItems, getTransportForDay, hidesOnMiddleDay } from '../utils/dayMerge';
import { isDayInAccommodationRange } from '../utils/dayOrder';
import { getFlightLegs, getTrainLegs } from '../utils/flightLegs';
-import { splitReservationDateTime } from '../utils/formatters';
+import { currencyDecimals, splitReservationDateTime } from '../utils/formatters';
import { computeMapViewport, TILE_SIZE_RASTER } from '../utils/mapViewport';
import { resolveBasemap } from '../utils/tileUrl';
import { useSharedTrip } from './sharedTrip/useSharedTrip';
import { SharedPlaceDetails } from './sharedTrip/SharedPlaceDetails';
import { SharedBookingDetails } from './sharedTrip/SharedBookingDetails';
+import { SharedTripErrorScreen } from './sharedTrip/SharedTripErrorScreen';
const TRANSPORT_ICONS = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship };
@@ -98,6 +100,8 @@ export default function SharedTripPage() {
const {
data,
error,
+ retry,
+ retrying,
base,
convert,
selectedDay,
@@ -108,23 +112,7 @@ export default function SharedTripPage() {
setShowLangPicker,
} = useSharedTrip();
- if (error)
- return (
-
{/* By category */}
@@ -1058,7 +1061,7 @@ export default function SharedTripPage() {
className="text-[#6b7280]"
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600 }}
>
- {sumIn(items).toLocaleString(locale, { minimumFractionDigits: 2 })} {base}
+ {money(sumIn(items))} {base}
{t('costs.payment')}
{personName(settlement.from_user_id)} → {personName(settlement.to_user_id)}
- {cur !== base && (
+ {line && (
- {formatMoney(settlement.amount, cur, locale)} {'→'} {formatMoney(amount, base, locale)}
+ {formatMoney(line.entered.amount, line.entered.currency, locale)} {'→'} {formatMoney(line.into.amount, line.into.currency, locale)}
)}
{label}
@@ -828,7 +842,7 @@ function FinalBudgetBreakdown({ row, items, base, locale, t, personName }: {
{line('expenses', t('costs.finalExpenses'), signed(row.expenses))}
{line('reimbursed', t('costs.finalReimbursed'), signed(-row.reimbursed))}
{line('pending', t('costs.finalPending'), signed(-row.pending))}
- {section(t('costs.finalExpenses'), fronted.map(r => line(`e${r.item_id}`, r.name, signed(r.amount))))}
+ {section(t('costs.finalExpenses'), fronted.map(r => line(`e${r.item_id}`, nameOf(r.item_id, r.name, r.amount), signed(r.amount))))}
{section(t('costs.finalReimbursed'), moved.map(r => line(`s${r.settlement_id}`, transfer(r.from_user_id, r.to_user_id), signed(-r.amount))))}
{section(t('costs.finalPending'), outstanding.map((r, i) => line(`f${i}`, transfer(r.from_user_id, r.to_user_id), signed(-r.amount))))}
@@ -871,12 +885,13 @@ function MemberAvatar({ name, avatarUrl, isMe, variant, size, t }: {
* (editable like an expense's, unlike the legacy created_at-only date, see
* `settlementDate` in CostsPanel.helpers.ts).
*/
-function AddPaymentSheet({ open, editing, onClose, tripId, base, people, me, toast, t, onSaved }: {
+function AddPaymentSheet({ open, editing, onClose, tripId, base, tripCurrency, people, me, toast, t, onSaved }: {
open: boolean
editing: CostsSettlement | null
onClose: () => void
tripId: number
base: string
+ tripCurrency: string
people: TripMember[]
me: number
toast: { error: (message: string) => void }
@@ -907,7 +922,7 @@ function AddPaymentSheet({ open, editing, onClose, tripId, base, people, me, toa
const save = async () => {
if (!valid || saving) return
setSaving(true)
- const data = { from_user_id: fromId, to_user_id: toId, amount: amt, currency, settled_at: day }
+ const data = withFallbackFx({ from_user_id: fromId, to_user_id: toId, amount: amt, currency, settled_at: day }, tripCurrency)
try {
if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
else await budgetApi.createSettlement(tripId, data)
diff --git a/client/src/mobile/screens/trip/tabs/costsModel.ts b/client/src/mobile/screens/trip/tabs/costsModel.ts
index aa8c67962..bd5fb6ef7 100644
--- a/client/src/mobile/screens/trip/tabs/costsModel.ts
+++ b/client/src/mobile/screens/trip/tabs/costsModel.ts
@@ -1,7 +1,7 @@
-import type { BudgetParticipantFinal, CostCategory } from '@trek/shared'
+import type { BudgetParticipantFinal, BudgetUnconverted, CostCategory } from '@trek/shared'
import { paidByUser, readUserNote, settlementDate, splitEqualShares } from '../../../../components/Budget/CostsPanel.helpers'
import { catMeta, COST_CATEGORY_LIST } from '../../../../components/Budget/costsCategories'
-import { convertBooked } from '../../../../hooks/useExchangeRates'
+import { convertBooked, convertedLine, tripAmountOf } from '../../../../hooks/useExchangeRates'
import { currencyDecimals } from '../../../../utils/formatters'
import type { BudgetItem } from '../../../../types'
@@ -19,6 +19,8 @@ export interface CostsCtx {
me: number
/** The trip's own currency — what a NULL `budget_items.currency` means. */
tripCurrency: string
+ /** The currency everything is shown in, the base `convert` converts to. */
+ displayCurrency: string
convert: (amount: number, currency: string | null | undefined) => number
}
@@ -32,6 +34,15 @@ export function booked(amount: number, e: BudgetItem, ctx: CostsCtx): number {
return convertBooked(amount, e.currency, e.exchange_rate, ctx.tripCurrency, ctx.convert)
}
+/**
+ * The line under an amount of this expense the list shows converted, what was entered and
+ * where it went (#2525); null when there is nothing to explain. `shown` is the display
+ * value printed beside it.
+ */
+export function lineOf(amount: number, e: BudgetItem, ctx: CostsCtx, shown: number) {
+ return convertedLine(amount, e.currency, e.exchange_rate, ctx.tripCurrency, ctx.displayCurrency, shown)
+}
+
/** Expense total converted to the display/base currency, at its booked rate. */
export function baseTotal(e: BudgetItem, ctx: CostsCtx): number {
return booked(e.total_price || 0, e, ctx)
@@ -105,6 +116,10 @@ export interface CostsSettlementResponse {
settlements: CostsSettlement[]
/** What the trip ends up costing each participant — netted server-side off the same ledger as `balances`. */
finalBudgets: BudgetParticipantFinal[]
+ /** The currency the figures are in: the display currency, or the trip's own without a quote for it. */
+ currency?: string
+ /** Rows no rate could convert, left out of every figure above. */
+ unconverted?: BudgetUnconverted
}
// ── hero / tile totals (spec §3.1-§3.3) ────────────────────────────────────
@@ -315,12 +330,17 @@ export function buildCostsCsv(items: BudgetItem[], opts: CsvBuildOptions): { fil
}
}
- const header = ['Date', 'Name', 'Category', 'Amount', 'Currency', `Amount (${opts.base})`, 'Note']
+ // Read in another currency than the trip's, what each row counts as in the trip currency
+ // too, the figure every sum is built from (#2525). Same columns as the desktop export.
+ const trip = opts.ctx.tripCurrency.toUpperCase()
+ const tripCol = trip !== opts.base.toUpperCase()
+ const header = ['Date', 'Name', 'Category', 'Amount', 'Currency', ...(tripCol ? [`Amount (${trip})`] : []), `Amount (${opts.base})`, 'Note']
const rows = [header.join(sep)]
const sorted = items.slice().sort((a, b) => (a.expense_date || '').localeCompare(b.expense_date || ''))
for (const e of sorted) {
const cur = currencyOf(e, opts.ctx)
const note = readUserNote(e)
+ const inTrip = tripAmountOf(e.total_price || 0, e.currency, e.exchange_rate, trip, opts.ctx.convert)
rows.push(
[
esc(fmtDate(e.expense_date || '')),
@@ -328,6 +348,7 @@ export function buildCostsCsv(items: BudgetItem[], opts: CsvBuildOptions): { fil
esc(opts.t(catMeta(e.category).labelKey)),
(e.total_price || 0).toFixed(currencyDecimals(cur)),
cur,
+ ...(tripCol ? [inTrip.toFixed(currencyDecimals(trip))] : []),
baseTotal(e, opts.ctx).toFixed(currencyDecimals(opts.base)),
esc(note),
].join(sep),
diff --git a/client/src/pages/SharedTripPage.test.tsx b/client/src/pages/SharedTripPage.test.tsx
index be4e8f070..a18dc9877 100644
--- a/client/src/pages/SharedTripPage.test.tsx
+++ b/client/src/pages/SharedTripPage.test.tsx
@@ -2,7 +2,9 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
import { render, screen, waitFor, fireEvent } from '../../tests/helpers/render';
import { Routes, Route } from 'react-router';
import { http, HttpResponse } from 'msw';
+import { AxiosError } from 'axios';
import { server } from '../../tests/helpers/msw/server';
+import { shareApi } from '../api/client';
import { resetAllStores, seedStore } from '../../tests/helpers/store';
import { buildSettings } from '../../tests/helpers/factories';
import { useSettingsStore } from '../store/settingsStore';
@@ -595,6 +597,112 @@ describe('SharedTripPage', () => {
});
});
+ describe('FE-PAGE-SHARED-043: a foreign expense reads at the rate it was booked at, as in Costs (#2525)', () => {
+ it('shows the frozen-rate value in whole cents, not today\'s rate', async () => {
+ // CHF so no earlier test has cached rates for this base. Today 1 CHF buys 1.1395
+ // USD; the expense froze 1.17 when it was entered. Costs reads 801.76 / 1.17 =
+ // 685.26 CHF. Today's rate alone gives 703.61, printed as "703.607".
+ server.use(
+ http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.json([{ quote: 'USD', rate: 1.1395 }])),
+ http.get('/api/shared/:token', ({ params }) => {
+ if (params.token !== 'booked-token') return;
+ return HttpResponse.json({
+ trip: { id: 1, title: 'Shared Paris Trip', start_date: '2026-07-01', end_date: '2026-07-05', currency: 'CHF' },
+ baseCurrency: 'CHF',
+ days: [], assignments: {}, dayNotes: {}, places: [], reservations: [], accommodations: [], packing: [],
+ budget: [
+ { id: 1, name: 'Aparthotel Silver', total_price: 801.76, category: 'Accommodation', currency: 'USD', exchange_rate: 1.17 },
+ { id: 2, name: 'Tram pass', total_price: 100, category: 'Transport', currency: null, exchange_rate: 1 },
+ ],
+ categories: [],
+ permissions: { share_bookings: false, share_packing: false, share_budget: true, share_collab: false },
+ collab: [],
+ });
+ }),
+ );
+
+ renderSharedTrip('booked-token');
+ await waitFor(() => expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument());
+ fireEvent.click(screen.getByRole('button', { name: /costs/i }));
+
+ await waitFor(() => expect(screen.getByText('Aparthotel Silver')).toBeInTheDocument());
+ // Row and its category both read the booked value; the trip total adds the
+ // 100 CHF tram pass to it.
+ await waitFor(() => expect(screen.getAllByText('685.26 CHF')).toHaveLength(2));
+ expect(screen.getByText('785.26 CHF')).toBeInTheDocument();
+ expect(screen.queryByText(/703\.6/)).toBeNull();
+ // What was entered stays beside the converted row, as the Costs list shows it.
+ expect(screen.getByText('· 801.76 USD')).toBeInTheDocument();
+ });
+
+ it('reads a same-day bill in the display currency exactly as typed, with the trip currency\'s quote', async () => {
+ // ZAR trip read in USD (ZAR so no earlier test has cached its rates). The bill froze
+ // 0.05911 USD per rand, today's ZAR quote. The USD quote, 16.918 rand per dollar, is
+ // rounded on its own and is not its inverse.
+ server.use(
+ http.get('https://api.frankfurter.dev/v2/rates', ({ request }) => {
+ const base = new URL(request.url).searchParams.get('base');
+ return HttpResponse.json(base === 'ZAR' ? [{ quote: 'USD', rate: 0.05911 }] : [{ quote: 'ZAR', rate: 16.918 }]);
+ }),
+ http.get('/api/shared/:token', ({ params }) => {
+ if (params.token !== 'same-day-token') return;
+ return HttpResponse.json({
+ trip: { id: 1, title: 'Shared Paris Trip', start_date: '2026-07-01', end_date: '2026-07-05', currency: 'ZAR' },
+ baseCurrency: 'USD',
+ days: [], assignments: {}, dayNotes: {}, places: [], reservations: [], accommodations: [], packing: [],
+ budget: [
+ { id: 1, name: 'Villa', total_price: 12345.67, category: 'Accommodation', currency: 'USD', exchange_rate: 0.05911 },
+ ],
+ categories: [],
+ permissions: { share_bookings: false, share_packing: false, share_budget: true, share_collab: false },
+ collab: [],
+ });
+ }),
+ );
+
+ renderSharedTrip('same-day-token');
+ await waitFor(() => expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument());
+ fireEvent.click(screen.getByRole('button', { name: /costs/i }));
+
+ await waitFor(() => expect(screen.getAllByText('12,345.67 USD')).toHaveLength(3));
+ expect(screen.queryByText(/^· /)).toBeNull();
+ });
+
+ it('reads a bill in the display currency through the trip currency too, beside what was entered', async () => {
+ // The owner reads in USD on a CHF trip. The USD bill was booked at 685.26 CHF,
+ // which today is 780.86 USD, the figure Costs and its balances use; the CHF one
+ // converts at today's rate (100 CHF = 113.95 USD).
+ server.use(
+ http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.json([{ quote: 'CHF', rate: 1 / 1.1395 }])),
+ http.get('/api/shared/:token', ({ params }) => {
+ if (params.token !== 'display-token') return;
+ return HttpResponse.json({
+ trip: { id: 1, title: 'Shared Paris Trip', start_date: '2026-07-01', end_date: '2026-07-05', currency: 'CHF' },
+ baseCurrency: 'USD',
+ days: [], assignments: {}, dayNotes: {}, places: [], reservations: [], accommodations: [], packing: [],
+ budget: [
+ { id: 1, name: 'Aparthotel Silver', total_price: 801.76, category: 'Accommodation', currency: 'USD', exchange_rate: 1.17 },
+ { id: 2, name: 'Tram pass', total_price: 100, category: 'Transport', currency: null, exchange_rate: 1 },
+ ],
+ categories: [],
+ permissions: { share_bookings: false, share_packing: false, share_budget: true, share_collab: false },
+ collab: [],
+ });
+ }),
+ );
+
+ renderSharedTrip('display-token');
+ await waitFor(() => expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument());
+ fireEvent.click(screen.getByRole('button', { name: /costs/i }));
+
+ await waitFor(() => expect(screen.getAllByText('113.95 USD')).toHaveLength(2));
+ expect(screen.getAllByText('780.86 USD')).toHaveLength(2);
+ expect(screen.getByText('894.81 USD')).toBeInTheDocument();
+ expect(screen.getByText('· 801.76 USD')).toBeInTheDocument();
+ expect(screen.getByText('· 100.00 CHF')).toBeInTheDocument();
+ });
+ });
+
// FE-PAGE-SHARED-021 to FE-PAGE-SHARED-037 drive the remaining render branches of
// the page: header variants, the permission-driven tab strip, and every item kind
// the day timeline, bookings, packing, costs and chat sections can produce.
@@ -1544,4 +1652,177 @@ describe('SharedTripPage', () => {
expect(header?.style.overflow).toBe('hidden');
});
});
+
+ // ── #2505: only a 404 means the link is dead ────────────────────────────
+
+ describe('FE-PAGE-SHARED-043: a failed load is not an expired link (#2505)', () => {
+ const failWith = (status: number) =>
+ server.use(http.get('/api/shared/:token', () => HttpResponse.json({ error: 'nope' }, { status })));
+
+ it.each([500, 502, 503, 429])('keeps the link when the server answers %i', async (status) => {
+ failWith(status);
+ renderSharedTrip('test-token');
+
+ await waitFor(() => expect(screen.getByText(/could not be loaded/i)).toBeInTheDocument());
+ expect(screen.queryByText(/link expired or invalid/i)).not.toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
+ });
+
+ // A request with no response makes the api client probe /api/health for a
+ // proxy wall first; answer it the way a healthy server does.
+ const healthy = () => http.get('/api/health', () => HttpResponse.json({ status: 'ok' }));
+
+ it('keeps the link when the request never reaches the server', async () => {
+ server.use(healthy(), http.get('/api/shared/:token', () => HttpResponse.error()));
+ renderSharedTrip('test-token');
+
+ await waitFor(() => expect(screen.getByText(/could not be loaded/i)).toBeInTheDocument());
+ expect(screen.queryByText(/link expired or invalid/i)).not.toBeInTheDocument();
+ });
+
+ it('keeps the link when the request times out', async () => {
+ // What axios rejects with once its 8s deadline passes: no response at all.
+ const timeout = new AxiosError('timeout of 8000ms exceeded', AxiosError.ECONNABORTED);
+ const spy = vi.spyOn(shareApi, 'getSharedTrip').mockRejectedValueOnce(timeout);
+ renderSharedTrip('test-token');
+
+ await waitFor(() => expect(screen.getByText(/could not be loaded/i)).toBeInTheDocument());
+ expect(screen.queryByText(/link expired or invalid/i)).not.toBeInTheDocument();
+ spy.mockRestore();
+ });
+
+ it('still calls a 404 from the share endpoint an expired link, without a retry', async () => {
+ server.use(
+ http.get('/api/shared/:token', () => HttpResponse.json({ error: 'Invalid or expired link' }, { status: 404 })),
+ );
+ renderSharedTrip('gone-token');
+
+ await waitFor(() => expect(screen.getByText(/link expired or invalid/i)).toBeInTheDocument());
+ expect(screen.queryByText(/could not be loaded/i)).not.toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument();
+ });
+
+ // A reverse proxy that has no upstream for TREK (Traefik while the
+ // container is stopped or still in its start period, nginx with a missing
+ // location) answers 404 on its own. That is the restart window of the
+ // report, not a dead link.
+ it.each([
+ ['a plain text 404 from Traefik', '404 page not found\n', 'text/plain; charset=utf-8'],
+ ['an HTML 404 from nginx', '
-
- );
+ if (error) return
-
- 🔒
- - {t('shared.expired')} -
-- {t('shared.expiredHint')} -
-
@@ -1028,7 +1031,7 @@ export default function SharedTripPage() {
{t('shared.totalBudget')}
- {total.toLocaleString(locale, { minimumFractionDigits: 2 })} {base}
+ {money(total)} {base}
+
+ )
+}
diff --git a/client/src/pages/sharedTrip/sharedTripModel.test.ts b/client/src/pages/sharedTrip/sharedTripModel.test.ts
index 7858e44f6..f71078c67 100644
--- a/client/src/pages/sharedTrip/sharedTripModel.test.ts
+++ b/client/src/pages/sharedTrip/sharedTripModel.test.ts
@@ -1,5 +1,6 @@
import { describe, it, expect } from 'vitest'
-import { formatDurationMinutes, isHttpUrl, linkHost } from './sharedTripModel'
+import { AxiosError, AxiosHeaders } from 'axios'
+import { formatDurationMinutes, isHttpUrl, isSharedTripPayload, linkHost, sharedTripLoadError } from './sharedTripModel'
describe('sharedTripModel (#2320)', () => {
it('accepts http and https and nothing else', () => {
@@ -35,3 +36,65 @@ describe('sharedTripModel (#2320)', () => {
expect(linkHost('nonsense')).toBe('nonsense')
})
})
+
+describe('sharedTripLoadError (#2505)', () => {
+ // What the share endpoint sends for an unknown, expired or revoked token.
+ const ENDPOINT_404 = { error: 'Invalid or expired link' }
+
+ const answered = (status: number, data: unknown = ENDPOINT_404) =>
+ new AxiosError('Request failed', 'ERR_BAD_RESPONSE', undefined, undefined, {
+ status,
+ statusText: '',
+ data,
+ headers: {},
+ config: { headers: new AxiosHeaders() },
+ })
+
+ it('calls only the endpoint 404 an expired link', () => {
+ expect(sharedTripLoadError(answered(404))).toBe('expired')
+ })
+
+ it('treats every other answer as a failed load', () => {
+ for (const status of [400, 401, 403, 408, 429, 500, 502, 503, 504]) {
+ expect(sharedTripLoadError(answered(status))).toBe('unavailable')
+ }
+ })
+
+ it('does not take a 404 without the TREK error body for an expired link', () => {
+ // Traefik with the container stopped or still starting, nginx, an empty
+ // answer: a 404 from something in front of TREK says nothing about the token.
+ expect(sharedTripLoadError(answered(404, '404 page not found\n'))).toBe('unavailable')
+ expect(sharedTripLoadError(answered(404, '
+ {expired ? (
+
+
+ 🔒
+
+ ) : (
+ {t(expired ? 'shared.expired' : 'shared.loadFailed')}
++ {t(expired ? 'shared.expiredHint' : 'shared.loadFailedHint')} +
+ {!expired && ( + + )} +
+