);
}
const GRACE_DAYS = 7; // local hard-delete this many days after tripEnd
function startOfToday() {
const d = new Date();
d.setHours(0, 0, 0, 0);
return d;
}
function isTripOver(tripEndISO) {
const end = parseISO(tripEndISO);
if (!end) return false;
return startOfToday().getTime() > dayMs(end);
}
function formatDateLong(d, lang = "en") {
if (!d) return "—";
const months = MONTH_NAMES_I18N[lang] || MONTH_NAMES_I18N.en;
if (lang === "es") return `${d.getDate()} de ${months[d.getMonth()]} de ${d.getFullYear()}`;
return `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
}
// --- Budget opt-in card ---
function BudgetOptInCard({ tripEndISO, onYes, onNo }) {
const lang = React.useContext(LangContext);
const end = parseISO(tripEndISO);
const dateHint = end ? ` (${formatDateLong(end, lang)})` : "";
return (
{tr(lang, "budget_cta_title")}
{tr(lang, "budget_cta_desc")}
{/* The privacy terms matter but they shouldn't outweigh the decision —
they sit under the buttons, open on demand. */}
{tr(lang, "budget_cta_note_label")}
);
}
// --- Expiry notice shown while tracking is on ---
function ExpiryNotice({ tripEndISO }) {
const lang = React.useContext(LangContext);
const end = parseISO(tripEndISO);
if (!end) return null;
return (
);
}
// --- Floating calculator ---
// A tiny, dependency-free immediate-execution calculator (standard phone
// behavior). The whole state lives in one object so the keyboard handler can
// drive it through the same pure reducer the on-screen keys use.
const CALC_INIT = { display: "0", acc: null, op: null, overwrite: false };
const CALC_MAX_LEN = 14;
function calcFormat(n) {
if (!isFinite(n)) return "Error";
// Trim floating-point noise (0.1 + 0.2) without lopping off real precision.
let s = String(parseFloat(n.toPrecision(12)));
if (s === "-0") s = "0";
return s;
}
function calcOperate(a, b, op) {
switch (op) {
case "+": return a + b;
case "-": return a - b;
case "*": return a * b;
case "/": return b === 0 ? NaN : a / b;
default: return b;
}
}
// Pure state transition shared by button taps and keyboard input.
function calcReduce(s, key) {
if (s.display === "Error" && key !== "C" && key !== "back") s = CALC_INIT;
if (key >= "0" && key <= "9") {
if (s.overwrite) return { ...s, display: key, overwrite: false };
if (s.display.replace("-", "").replace(".", "").length >= CALC_MAX_LEN) return s;
return { ...s, display: s.display === "0" ? key : s.display + key };
}
if (key === ".") {
if (s.overwrite) return { ...s, display: "0.", overwrite: false };
return s.display.includes(".") ? s : { ...s, display: s.display + "." };
}
if (key === "+" || key === "-" || key === "*" || key === "/") {
const cur = parseFloat(s.display);
if (s.op !== null && !s.overwrite) {
const r = calcOperate(s.acc, cur, s.op);
return { display: calcFormat(r), acc: r, op: key, overwrite: true };
}
return { ...s, acc: cur, op: key, overwrite: true };
}
if (key === "=") {
if (s.op === null) return { ...s, overwrite: true };
const r = calcOperate(s.acc, parseFloat(s.display), s.op);
return { display: calcFormat(r), acc: null, op: null, overwrite: true };
}
if (key === "%") {
return { ...s, display: calcFormat(parseFloat(s.display) / 100), overwrite: true };
}
if (key === "neg") {
if (s.display === "0" || s.display === "Error") return s;
return { ...s, display: s.display.startsWith("-") ? s.display.slice(1) : "-" + s.display };
}
if (key === "back") {
if (s.overwrite || s.display === "Error") return { ...s, display: "0", overwrite: false };
const d = s.display;
if (d.length <= 1 || (d.length === 2 && d.startsWith("-"))) return { ...s, display: "0" };
return { ...s, display: d.slice(0, -1) };
}
if (key === "C") return CALC_INIT;
return s;
}
const CALC_KEYMAP = {
"Enter": "=", "=": "=", "Backspace": "back", "Escape": "C",
"+": "+", "-": "-", "*": "*", "x": "*", "X": "*", "/": "/",
".": ".", ",": ".", "%": "%",
};
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
const CALC_MARGIN = 8; // keep at least this many px from every viewport edge
function FloatingCalculator() {
const lang = React.useContext(LangContext);
const [open, setOpen] = useState(false);
const [calc, setCalc] = useState(CALC_INIT);
// Panel position in viewport px (top-left). null = default CSS anchor
// (bottom-right). Set the moment the user starts dragging, and kept across
// open/close so the calculator stays where they left it.
const [pos, setPos] = useState(null);
const [dragging, setDragging] = useState(false);
const panelRef = useRef(null);
const dragRef = useRef(null);
const fabRef = useRef(null);
const press = useCallback((key) => setCalc((s) => calcReduce(s, key)), []);
// Close and return focus to the launcher, so a keyboard user who opened the
// panel isn't stranded once it disappears. The calculator is deliberately
// non-modal (you keep using the converter while it floats), so it gets this
// lighter treatment rather than the focus trap the modal dialogs use.
const close = useCallback(() => {
setOpen(false);
if (fabRef.current) fabRef.current.focus();
}, []);
// Drag the panel by its header. Pointer capture keeps the gesture alive even
// if the cursor outruns the panel; both mouse and touch go through this path.
const startDrag = useCallback((e) => {
// Let the minimize button work as a button, not a drag handle.
if (e.target.closest(".calc-min")) return;
const panel = panelRef.current;
if (!panel) return;
const rect = panel.getBoundingClientRect();
dragRef.current = {
px: e.clientX, py: e.clientY,
baseX: rect.left, baseY: rect.top,
w: rect.width, h: rect.height,
};
setDragging(true);
try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {}
}, []);
const onDrag = useCallback((e) => {
const d = dragRef.current;
if (!d) return;
const maxX = window.innerWidth - d.w - CALC_MARGIN;
const maxY = window.innerHeight - d.h - CALC_MARGIN;
setPos({
x: clamp(d.baseX + (e.clientX - d.px), CALC_MARGIN, Math.max(CALC_MARGIN, maxX)),
y: clamp(d.baseY + (e.clientY - d.py), CALC_MARGIN, Math.max(CALC_MARGIN, maxY)),
});
}, []);
const endDrag = useCallback((e) => {
if (!dragRef.current) return;
dragRef.current = null;
setDragging(false);
try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) {}
}, []);
// Keep a moved panel inside the viewport when the window is resized.
useEffect(() => {
if (!open) return;
const onResize = () => {
const panel = panelRef.current;
if (!panel) return;
const w = panel.offsetWidth, h = panel.offsetHeight;
setPos((p) => p ? {
x: clamp(p.x, CALC_MARGIN, Math.max(CALC_MARGIN, window.innerWidth - w - CALC_MARGIN)),
y: clamp(p.y, CALC_MARGIN, Math.max(CALC_MARGIN, window.innerHeight - h - CALC_MARGIN)),
} : p);
};
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, [open]);
// Keyboard drives the same reducer while the panel is open.
useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === "Escape") { e.preventDefault(); close(); return; }
if (e.metaKey || e.ctrlKey || e.altKey) return;
let key = null;
if (e.key >= "0" && e.key <= "9") key = e.key;
else if (CALC_KEYMAP[e.key]) key = CALC_KEYMAP[e.key];
if (key === null) return;
e.preventDefault();
press(key);
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, press, close]);
// The keypad, row by row. `k` is the reducer key; `label` what's drawn.
const KEYS = [
{ k: "C", label: "C", cls: "calc-key-fn" },
{ k: "neg", label: "±", cls: "calc-key-fn" },
{ k: "%", label: "%", cls: "calc-key-fn" },
{ k: "/", label: "÷", cls: "calc-key-op" },
{ k: "7", label: "7" }, { k: "8", label: "8" }, { k: "9", label: "9" },
{ k: "*", label: "×", cls: "calc-key-op" },
{ k: "4", label: "4" }, { k: "5", label: "5" }, { k: "6", label: "6" },
{ k: "-", label: "−", cls: "calc-key-op" },
{ k: "1", label: "1" }, { k: "2", label: "2" }, { k: "3", label: "3" },
{ k: "+", label: "+", cls: "calc-key-op" },
{ k: "0", label: "0", cls: "calc-key-wide" }, { k: ".", label: "." },
{ k: "=", label: "=", cls: "calc-key-eq" },
];
return (
{open && (
{tr(lang, "calc_title")}
{calc.display}
{KEYS.map((key, i) => (
))}
)}
);
}
// True when the operator key `k` is currently "armed" (pending, awaiting the
// next operand) — used to highlight the running operation.
function calcActiveOp(calc, k) {
return calc.op && calc.overwrite && calc.op === k;
}
// --- Main App ---
/* ── Corner theme switcher ──────────────────────────────────────────────────
The board already had all three modes (Auto / Paper / Ink), but only inside
the Trip Tweaks panel — three clicks from a screen you are trying to read.
This is the portfolio's shared control: a small circle in a corner showing
the mode in force, which grows sideways into a three-slot track when
pressed. Bottom LEFT, because the calculator FAB owns bottom right.
`paper`/`ink` are this board's names for light/dark; the glyphs are the same
sun / moon / monitor every other ACACIA app uses. */
const FX_THEME_MODES = [
{ value: "paper", label: "Paper", hint: "Tema claro" },
{ value: "ink", label: "Ink", hint: "Tema oscuro" },
{ value: "auto", label: "Auto", hint: "Seguir al dispositivo" }
];
function FxThemeGlyph({ mode }) {
const props = {
viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5,
strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false"
};
if (mode === "paper") {
return (
);
}
if (mode === "ink") {
return ;
}
return (
);
}
function FxThemeSwitcher({ value, onChange }) {
const [open, setOpen] = useState(false);
const rootRef = useRef(null);
const bubbleRef = useRef(null);
const slotRefs = useRef([]);
const collapseTimer = useRef(null);
const index = Math.max(0, FX_THEME_MODES.findIndex(m => m.value === value));
const active = FX_THEME_MODES[index];
useEffect(() => () => clearTimeout(collapseTimer.current), []);
useEffect(() => {
if (!open) return undefined;
const onPointerDown = (e) => {
if (!rootRef.current || rootRef.current.contains(e.target)) return;
clearTimeout(collapseTimer.current);
setOpen(false);
};
const onKeyDown = (e) => {
if (e.key !== "Escape") return;
e.stopPropagation();
clearTimeout(collapseTimer.current);
setOpen(false);
if (bubbleRef.current) bubbleRef.current.focus();
};
document.addEventListener("pointerdown", onPointerDown, true);
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("pointerdown", onPointerDown, true);
document.removeEventListener("keydown", onKeyDown);
};
}, [open]);
useEffect(() => {
if (open && slotRefs.current[index]) slotRefs.current[index].focus();
}, [open, index]);
// Picking with the pointer closes the track once the indicator has finished
// sliding. Picking with the keyboard (detail === 0) leaves it open, so focus
// does not vanish out from under the caret.
const pick = (event, next) => {
onChange(next);
clearTimeout(collapseTimer.current);
if (event.detail > 0) collapseTimer.current = setTimeout(() => setOpen(false), 1100);
};
const onKeyDown = (event) => {
const last = FX_THEME_MODES.length - 1;
let next = null;
if (event.key === "ArrowRight" || event.key === "ArrowDown") next = index === last ? 0 : index + 1;
else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = index === 0 ? last : index - 1;
else if (event.key === "Home") next = 0;
else if (event.key === "End") next = last;
if (next === null) return;
event.preventDefault();
clearTimeout(collapseTimer.current);
onChange(FX_THEME_MODES[next].value);
if (slotRefs.current[next]) slotRefs.current[next].focus();
};
return (
{FX_THEME_MODES.map((option, i) => (
))}
);
}
function App() {
const [t, setTweakBase] = useTweaks(INITIAL_TWEAKS);
const hydratedLocalRef = useRef(false);
const latestTRef = useRef(t);
latestTRef.current = t;
// Hydrate from localStorage on first mount
useEffect(() => {
if (hydratedLocalRef.current) return;
hydratedLocalRef.current = true;
try {
const raw = localStorage.getItem(LOCAL_TWEAKS_KEY);
if (!raw) return;
const parsed = JSON.parse(raw);
if (parsed && typeof parsed === "object") setTweakBase(parsed);
} catch (e) {}
}, []);
const setTweak = useCallback((keyOrEdits, val) => {
setTweakBase(keyOrEdits, val);
const edits = typeof keyOrEdits === "object" && keyOrEdits !== null ? keyOrEdits : { [keyOrEdits]: val };
const next = { ...latestTRef.current, ...edits };
// Everything, expense data included (budget, spent), is saved to
// localStorage so a reload keeps it. The data stays only on this device
// (no account, no server) and is wiped automatically after the trip:
// see the GRACE_DAYS hard-delete below and deleteTripData.
try {
localStorage.setItem(LOCAL_TWEAKS_KEY, JSON.stringify(next));
} catch (e) {}
}, [setTweakBase]);
const selected = t.selectedCurrencies || ["USD", "MXN", "CRC"];
// Detect home; user can override
const [detected] = useState(() => detectCurrency());
const [manualHome, setManualHome] = useState(null);
// Home must be one of the selected; if detected isn't, fall back to first selected
let homeCode = !t.autoRegion && manualHome ? manualHome : detected;
if (!selected.includes(homeCode)) homeCode = selected[0];
// --- Language follows home, always ---
// The language is whatever the home country's primary language is.
// Spanish-speaking primaries → Spanish; everything else → English.
// No user-facing pin, no prompt — just track the home.
const effectiveLang = (typeof window !== "undefined" && window.acaciaFreewareLang) ? window.acaciaFreewareLang() : "es";
const tt = useCallback((key, vars) => tr(effectiveLang, key, vars), [effectiveLang]);
// Keep in sync so screen readers and search engines see the
// language the UI actually switched to (es for Spanish-speaking homes).
useEffect(() => {
if (typeof document !== "undefined") document.documentElement.lang = effectiveLang;
}, [effectiveLang]);
// --- Post-trip summary + data deletion ---
const [summaryDismissed, setSummaryDismissed] = useState(false);
const tripOver = isTripOver(t.tripEnd);
const tracking = t.trackExpenses === "yes";
const hasExpenseData = !!t.budget || !!t.spent;
// Hard-delete: trip ended more than GRACE_DAYS ago → wipe the local data,
// no questions asked, no UI shown.
useEffect(() => {
const end = parseISO(t.tripEnd);
if (!end) return;
const cutoff = new Date(end);
cutoff.setDate(cutoff.getDate() + GRACE_DAYS);
if (startOfToday().getTime() <= cutoff.getTime()) return;
if (!hasExpenseData) return;
setTweak({ budget: 0, spent: 0, trackExpenses: "ask" });
}, [t.tripEnd, hasExpenseData]);
const downloadSummary = useCallback(() => {
const baseCode = (t.selectedCurrencies && t.selectedCurrencies[0]) || "USD";
const baseSymbol = (CURRENCIES[baseCode] && CURRENCIES[baseCode].symbol) || "$";
downloadTripSummaryPDF({
lang: effectiveLang,
tripName: t.tripName,
tripStart: t.tripStart,
tripEnd: t.tripEnd,
baseCode,
baseSymbol,
budget: t.budget,
spent: t.spent,
});
}, [effectiveLang, t.tripName, t.tripStart, t.tripEnd, t.selectedCurrencies, t.budget, t.spent]);
const deleteTripData = useCallback(() => {
setTweak({ budget: 0, spent: 0, trackExpenses: "ask" });
setSummaryDismissed(true);
}, [setTweak]);
// --- Cookie consent + trip name persistence ---
const [cookieConsent, setCookieConsent] = useState(() => cookieGet(COOKIE_CONSENT) === "1");
const tripNameHydratedRef = useRef(false);
// On first mount with consent already given, restore trip name from cookie
useEffect(() => {
if (tripNameHydratedRef.current) return;
tripNameHydratedRef.current = true;
if (cookieGet(COOKIE_CONSENT) === "1") {
const saved = cookieGet(COOKIE_TRIP_NAME);
if (saved) setTweakBase("tripName", saved);
}
}, []);
// After consent, persist trip name to a cookie on every change
useEffect(() => {
if (!cookieConsent) return;
if (!tripNameHydratedRef.current) return;
if (t.tripName) cookieSet(COOKIE_TRIP_NAME, t.tripName);
}, [t.tripName, cookieConsent]);
// Keep the document title in sync with the trip so the browser tab / history
// reflects the current trip instead of a single static string. The untouched
// placeholder does not count as a name: the site's page carries a written
// Spanish title, and replacing it with "My Trip" the instant JS runs would
// trade it for a default nobody chose.
useEffect(() => {
const name = (t.tripName || "").trim();
const named = name && name !== TWEAK_DEFAULTS.tripName;
document.title = named ? `${name} · Plink FX` : DEFAULT_TITLE;
}, [t.tripName]);
const acceptCookies = useCallback(() => {
cookieSet(COOKIE_CONSENT, "1");
setCookieConsent(true);
if (t.tripName) cookieSet(COOKIE_TRIP_NAME, t.tripName);
}, [t.tripName]);
// Base = currency the user is typing in
const [baseCode, setBaseCodeRaw] = useState(homeCode);
const [amount, setAmount] = useState(() => {
const r = FALLBACK_RATES[homeCode] || 1;
return Math.round(20 * r);
});
const [focused, setFocused] = useState(false);
const [rawInput, setRawInput] = useState("");
// Track OS color scheme so theme: "auto" follows the device
const [systemDark, setSystemDark] = useState(() => {
if (typeof window === "undefined" || !window.matchMedia) return false;
return window.matchMedia("(prefers-color-scheme: dark)").matches;
});
useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) return;
const mq = window.matchMedia("(prefers-color-scheme: dark)");
const onChange = (e) => setSystemDark(e.matches);
if (mq.addEventListener) mq.addEventListener("change", onChange);
else mq.addListener(onChange);
return () => {
if (mq.removeEventListener) mq.removeEventListener("change", onChange);
else mq.removeListener(onChange);
};
}, []);
const effectiveTheme = t.theme === "auto" ? (systemDark ? "ink" : "paper") : t.theme;
// Rates relative to USD (for everything we know about)
const [rates, setRates] = useState(FALLBACK_RATES);
const [rateStatus, setRateStatus] = useState("loading");
const [rateUpdated, setRateUpdated] = useState(null);
const [provider, setProvider] = useState("");
// Re-render time-ago every 30s
const [, forceRender] = useState(0);
useEffect(() => {
const id = setInterval(() => forceRender(x => x + 1), 30000);
return () => clearInterval(id);
}, []);
// If baseCode is no longer in selected, snap to home
useEffect(() => {
if (!selected.includes(baseCode)) {
setBaseCodeRaw(homeCode);
const r = rates[homeCode] || FALLBACK_RATES[homeCode] || 1;
setAmount(Math.round(20 * r));
}
}, [selected, baseCode, homeCode, rates]);
// When home changes, refresh amount sensibly
const prevHome = useRef(homeCode);
useEffect(() => {
if (prevHome.current !== homeCode) {
setBaseCodeRaw(homeCode);
const r = rates[homeCode] || FALLBACK_RATES[homeCode] || 1;
setAmount(Math.round(20 * r));
prevHome.current = homeCode;
}
}, [homeCode, rates]);
// Fetch live rates (open.er-api returns all currencies on USD base)
const fetchRates = useCallback(async () => {
setRateStatus("loading");
const tryFetch = async (url, parser) => {
try {
const ctl = new AbortController();
const tm = setTimeout(() => ctl.abort(), 6000);
const r = await fetch(url, { signal: ctl.signal });
clearTimeout(tm);
if (!r.ok) throw new Error("HTTP " + r.status);
const j = await r.json();
return parser(j);
} catch (e) { return null; }
};
let result = await tryFetch(
"https://open.er-api.com/v6/latest/USD",
(j) => j && j.result === "success" ? {
rates: { ...FALLBACK_RATES, ...j.rates, USD: 1 },
updated: j.time_last_update_utc ? new Date(j.time_last_update_utc) : new Date(),
provider: "open.er-api.com"
} : null
);
if (!result) {
result = await tryFetch(
"https://api.exchangerate.host/latest?base=USD",
(j) => j && j.rates ? {
rates: { ...FALLBACK_RATES, ...j.rates, USD: 1 },
updated: j.date ? new Date(j.date) : new Date(),
provider: "exchangerate.host"
} : null
);
}
if (result) {
setRates(result.rates);
setRateUpdated(result.updated);
setProvider(result.provider);
setRateStatus("live");
} else {
setRateStatus("fallback");
setRateUpdated(new Date());
setProvider("cached");
}
}, []);
useEffect(() => {
fetchRates();
const id = setInterval(fetchRates, 10 * 60 * 1000);
return () => clearInterval(id);
}, [fetchRates]);
const onAmountChange = (val) => {
const clean = val.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1");
setRawInput(clean);
const num = parseFloat(clean) || 0;
setAmount(num);
};
const setBaseCode = (next) => {
const usd = amount / (rates[baseCode] || 1);
setBaseCodeRaw(next);
setAmount(usd * (rates[next] || 1));
};
const rateFromBase = (target) => rates[target] / rates[baseCode];
// CSS vars for all selected currencies + a few fixed shorthands
const cssVars = {};
Object.keys(CURRENCIES).forEach(code => {
cssVars[`--c-${code}`] = accentFor(code, t.accent);
});
const others = selected.filter(c => c !== baseCode);
const cardCount = others.length;
return (