// ╔══════════════════════════════════════════════════════════════════╗
// ║ animations.jsx — Lottie celebration popups ║
// ║ • SuccessPopup one-shot ✓ (payment success). Waits for the ║
// ║ animation's `complete` event before closing. ║
// ║ • WelcomeTokensPopup gift + "free tokens on us" + button. Plays ║
// ║ once (no loop). ║
// ║ Both .lottie files are PRELOADED at load so they're cached and ║
// ║ render instantly (fixes the "empty popup flash"). ║
// ╚══════════════════════════════════════════════════════════════════╝
(function () {
const { useEffect, useRef } = React;
const SUCCESS_LOTTIE = "https://lottie.host/23d90682-ff38-4286-8a53-b4678a4b725e/88Caz63KNq.lottie";
const WELCOME_LOTTIE = "https://lottie.host/4e16f801-6b8c-4b0a-9802-44718d841f72/KSNPftTkPR.lottie";
// Warm the browser cache immediately so the web component renders instantly later.
[SUCCESS_LOTTIE, WELCOME_LOTTIE].forEach((u) => {
try { fetch(u, { cache: "force-cache", mode: "cors" }).catch(() => {}); } catch (e) {}
});
function SuccessAnimation({ size = 200 }) {
return (
);
}
// Centered popup: plays the success animation once, dismisses when it COMPLETES
// (with a safety timeout so it never gets stuck if the file fails to load).
// open = null | { message }
function SuccessPopup({ open, onClose }) {
const ref = useRef(null);
useEffect(() => {
if (!open) return;
let done = false;
const finish = () => { if (!done) { done = true; onClose && onClose(); } };
const el = ref.current;
const onComplete = () => finish();
if (el && el.addEventListener) el.addEventListener("complete", onComplete);
// Safety net: never linger past 5s (covers a failed/slow load or a missing event).
const t = setTimeout(finish, 5000);
return () => {
clearTimeout(t);
if (el && el.removeEventListener) el.removeEventListener("complete", onComplete);
};
}, [open]);
if (!open) return null;
return (
e.stopPropagation()}>
{open.message &&
{open.message}
}
);
}
// "Free tokens on us" welcome — plays ONCE (no loop) + close button.
// open = null | { tokens }
function WelcomeTokensPopup({ open, onClose }) {
if (!open) return null;
const n = window.formatTokens ? window.formatTokens(open.tokens) : open.tokens;
const isBonus = open.kind === "bonus";
const title = isBonus ? `${n} bonus tokens 🎉` : `${n} tokens, on us 🎉`;
const sub = isBonus
? "Thank you for being an early Sweepify customer — these tokens are on us. Spend them on any scan."
: "Welcome to Sweepify — these free credits are on the house to get you started. Spend them on any scan.";
return (