// rewards.jsx - VaultRewards: claim-free loyalty tiers (Bronze → Silver → Gold). // Everyone starts on Bronze and accrues cashback monthly at their tier's annual // rate. Tiers rise with consecutive claim-free years; a claim resets the tier // clock to Bronze but the accrued balance is never clawed back. The ladder // itself (rates + thresholds) is ops-managed and read live from the backend. const { useState: useStateR, useEffect: useEffectR } = React; const TIER_LOOK = { bronze: { grad: "linear-gradient(135deg,#b0764a,#8a5a34)", icon: "shield" }, silver: { grad: "linear-gradient(135deg,#9aa5b8,#6e7a90)", icon: "trend" }, gold: { grad: "linear-gradient(135deg,#e0b252,#b5872a)", icon: "sparkle" }, }; // Offline fallback mirroring lib/rewards defaults, so the page renders sensibly // before the API answers (fresh accounts are Bronze with nothing accrued yet). function localRewards(assets) { const insured = assets.filter((a) => a.insurer); const annualPremium = insured.reduce((s, a) => s + (a.premium || 0), 0); const cfg = { tiers: [ { id: "bronze", name: "Bronze", ratePct: 5, afterYears: 0 }, { id: "silver", name: "Silver", ratePct: 7, afterYears: 2 }, { id: "gold", name: "Gold", ratePct: 9, afterYears: 5 }, ] }; return { tier: cfg.tiers[0], nextTier: { ...cfg.tiers[1], monthsToGo: 24, progressPct: 0 }, claimFreeYears: 0, claimFreeSince: new Date().toISOString().slice(0, 10), accruedNaira: 0, monthlyAccrualNaira: Math.round(annualPremium * 0.05 / 12), annualPremiumNaira: annualPremium, perPolicy: insured.map((a) => ({ asset: a.name, insurer: a.insurer, premiumNaira: a.premium || 0, accruedNaira: 0 })), wasReset: false, config: cfg, }; } function Rewards({ assets, profile, userName, onChat, addToast, claims = [] }) { const D = window.VC_DATA; const [rw, setRw] = useStateR(() => localRewards(assets)); const [live, setLive] = useStateR(false); const [redeemed, setRedeemed] = useStateR(false); const [redeemOpen, setRedeemOpen] = useStateR(false); useEffectR(() => { let on = true; fetch("/api/rewards").then((r) => (r.ok ? r.json() : null)).then((d) => { if (on && d && d.tier) { setRw(d); setLive(true); } }).catch(() => {}); return () => { on = false; }; }, [assets.length, claims.length]); const look = TIER_LOOK[rw.tier.id] || TIER_LOOK.bronze; const balance = redeemed ? 0 : rw.accruedNaira; const animVal = window.useCountUp(balance, 1200, [balance]); const progress = rw.nextTier ? rw.nextTier.progressPct / 100 : 1; return (

VaultRewards

Stay claim-free, climb the tiers, and earn up to {rw.config.tiers[rw.config.tiers.length - 1].ratePct}% of your annual premium back every year.

{/* hero: current tier + accrued balance */}
{rw.tier.name} tier · up to {rw.tier.ratePct}% a year
Cashback accrued
{D.fmtFull(Math.round(animVal))}
{rw.annualPremiumNaira ? `Accruing ~${D.fmtFull(rw.monthlyAccrualNaira)} each claim-free month (${rw.tier.ratePct}% of ${D.fmtFull(rw.annualPremiumNaira)} premium / 12)` : "Insure an asset to start accruing cashback every month."}
{rw.nextTier && (
{rw.tier.name} {rw.nextTier.monthsToGo} claim-free month{rw.nextTier.monthsToGo > 1 ? "s" : ""} to {rw.nextTier.name} ({rw.nextTier.ratePct}%)
)}
{/* claim-free clock dial */}
{rw.claimFreeYears >= 1 ? rw.claimFreeYears.toFixed(1) : Math.round(rw.claimFreeYears * 12)}
{rw.claimFreeYears >= 1 ? (rw.claimFreeYears.toFixed(1) === "1.0" ? "year" : "years") : (Math.round(rw.claimFreeYears * 12) === 1 ? "month" : "months")} claim-free
{/* the ladder + how it works */}

The tier ladder

Everyone starts on {rw.config.tiers[0].name}. Tiers rise with consecutive claim-free years. You're on {rw.tier.name}{rw.wasReset ? " (a past claim restarted your clock)" : ""}.

{rw.config.tiers.map((t2) => { const on = rw.tier.id === t2.id; const lk = TIER_LOOK[t2.id] || TIER_LOOK.bronze; return (
{t2.name}
{t2.ratePct}%
{t2.afterYears ? `after ${t2.afterYears} claim-free yr${t2.afterYears > 1 ? "s" : ""}` : "from day one"}
{on &&
CURRENT
}
); })}
Lodging a claim resets you to {rw.config.tiers[0].name}, but everything you've already accrued stays yours to redeem.

How it works

{[["shield", "Insure your assets", "Cover anything in your VaultLog, individually or bundled."], ["check", "Accrue every month", `Each claim-free month adds 1/12 of your tier's annual rate (${rw.tier.ratePct}% on ${rw.tier.name}) on the premiums you pay.`], ["trend", "Climb the tiers", `Stay claim-free ${rw.config.tiers[1].afterYears} years for ${rw.config.tiers[1].name} (${rw.config.tiers[1].ratePct}%), ${rw.config.tiers[2].afterYears} for ${rw.config.tiers[2].name} (${rw.config.tiers[2].ratePct}%).`], ["download", "Get paid back", "Redeem to your wallet, bank, or roll into next year's premium."]].map(([ic, t2, d2]) => (
{t2}
{d2}
))}
{/* per-policy accrual */}

Cashback by policy

{rw.tier.ratePct}% of each premium a year on {rw.tier.name}, credited monthly while you stay claim-free.

{rw.perPolicy.map((p2) => (
{p2.asset}
{p2.insurer}
Premium
{D.fmtFull(p2.premiumNaira)}
Accrued so far
{D.fmtFull(p2.accruedNaira)}
))} {rw.perPolicy.length === 0 &&
No active policies yet. Insure an asset and the accrual starts with your first month.
} {rw.perPolicy.length > 0 && (
Total accrued
{D.fmtFull(rw.accruedNaira)}
)}
{/* redeem overlay */} setRedeemOpen(false)} width={440}> setRedeemOpen(false)} onDone={() => { setRedeemed(true); setRedeemOpen(false); addToast(`${D.fmtFull(balance)} cashback redeemed`, "trend"); }} />
); } function RedeemFlow({ amount, onClose, onDone }) { const D = window.VC_DATA; const [dest, setDest] = useStateR("wallet"); const [stage, setStage] = useStateR("pick"); const opts = [ { id: "wallet", icon: "vault", label: "VaultCova wallet", sub: "Instant" }, { id: "bank", icon: "building", label: "Bank account", sub: "Wema · ****0142" }, { id: "premium", icon: "shield", label: "Apply to next premium", sub: "Reduce what you owe" }, ]; const go = () => { setStage("done"); setTimeout(onDone, 1300); }; return stage === "pick" ? (

Redeem cashback

Where should we send {D.fmtFull(amount)}?

{opts.map((o) => { const on = dest === o.id; return ( ); })}
Redeem {D.fmtFull(amount)}
) : (

Cashback on its way!

{D.fmtFull(amount)} redeemed. Thanks for staying covered with VaultCova.

); } Object.assign(window, { Rewards });