const { Button, Badge, IconButton, Icon, Modal, Input } = window.PryzeDesignSystem_b2bad9;
const { REWARDS, USER, CATEGORIES, AMOUNT_PRESETS, PTS_PER_DOLLAR, POINTS_PER_SHIFT, BANNERS, PRYZER_QUOTES, GUIDE_STEPS } = window.PryzeData;
function CategoryPills({ active, onChange }) {
return (
{CATEGORIES.map(c => (
onChange(c)}>{c}
))}
);
}
function BannerShape({ shape }) {
if (shape === 'wave') return
;
}
function BannerCarousel() {
const [i, setI] = React.useState(0);
const railRef = React.useRef(null);
const userTouch = React.useRef(false);
const goTo = React.useCallback((idx, smooth) => {
const rail = railRef.current;
if (!rail) return;
rail.scrollTo({ left: idx * rail.clientWidth, behavior: smooth === false ? 'auto' : 'smooth' });
}, []);
React.useEffect(() => {
const t = setInterval(() => {
if (userTouch.current) return;
const rail = railRef.current;
if (!rail) return;
const next = (Math.round(rail.scrollLeft / rail.clientWidth) + 1) % BANNERS.length;
goTo(next);
}, 5000);
return () => clearInterval(t);
}, [goTo]);
const onScroll = () => {
const rail = railRef.current;
if (!rail) return;
const idx = Math.round(rail.scrollLeft / rail.clientWidth);
setI(v => (v === idx ? v : idx));
};
const hold = () => { userTouch.current = true; };
const release = () => { setTimeout(() => { userTouch.current = false; }, 3000); };
const drag = React.useRef(null);
const onPointerDown = e => {
hold();
if (e.pointerType === 'touch') return;
drag.current = { x: e.clientX, left: railRef.current.scrollLeft };
railRef.current.style.scrollSnapType = 'none';
};
const onPointerMove = e => {
if (!drag.current) return;
railRef.current.scrollLeft = drag.current.left - (e.clientX - drag.current.x);
};
const onPointerUp = e => {
release();
if (!drag.current) return;
const rail = railRef.current;
const moved = e.clientX - drag.current.x;
drag.current = null;
rail.style.scrollSnapType = '';
const base = Math.round(rail.scrollLeft / rail.clientWidth);
const idx = Math.abs(moved) > 40 ? Math.min(BANNERS.length - 1, Math.max(0, base)) : base;
goTo(idx);
};
return (
{BANNERS.map(b => (
{b.eyebrow}
{b.title}
{b.sub}
))}
{BANNERS.map((_, idx) => { hold(); goTo(idx); release(); }} />)}
);
}
function AdRewardsScreen({ banner, onOpenReward, onBack }) {
const list = REWARDS.filter(r => banner.rewardIds.includes(r.id));
return (
Featured in this ad
{banner.title}
{list.map(r => (
onOpenReward(r)}>
{r.title}
))}
);
}
function BrandLogo({ brand, size }) {
if (brand.logo) return ;
return {brand.initials}
;
}
function BalancePill() {
return (
);
}
function WalletHomeScreen({ onOpenReward, align }) {
const [cat, setCat] = React.useState('All');
const [q, setQ] = React.useState('');
const needle = q.trim().toLowerCase();
const base = cat === 'All' ? REWARDS : REWARDS.filter(r => r.cat === cat);
const filtered = needle ? base.filter(r => r.title.toLowerCase().includes(needle)) : base;
const groups = cat === 'All'
? CATEGORIES.slice(1).map(c => ({ cat: c, items: filtered.filter(r => r.cat === c) })).filter(g => g.items.length)
: [{ cat, items: filtered }];
return (
Rewards
{needle && groups.length === 0 &&
No brands match “{q}”.
}
{groups.map(g => (
{g.cat}
{g.items.map(r => (
onOpenReward(r)}>
{r.title}
))}
))}
);
}
function MoneyCard({ value, pct, active, onClick }) {
const r = 22, c = 2 * Math.PI * r;
const off = c - Math.min(1, pct) * c;
return (
${value}
{(value * PTS_PER_DOLLAR).toLocaleString()} pts
);
}
const CAT_DESC = {
Food: 'brand serving up quick, craveable meals — a solid pick for refueling between shifts.',
Retail: 'go-to spot for everyday essentials and gear, from basics to statement pieces.',
Auto: 'keeps you road-ready with reliable parts, service, and fuel for the daily grind.',
Tech: 'your source for gadgets, gear, and everything that keeps you plugged in.',
Hotel: 'a place to rest up and recharge, whether it\'s a quick stay or a proper getaway.',
};
function BrandInfoCard({ reward }) {
return (
About {reward.title}
{reward.title} is a {reward.cat.toLowerCase()} {CAT_DESC[reward.cat] || 'brand our Pryzers redeem often.'}
);
}
function PinConfirmSheet({ visible, pinned, reward, amount, onPickAmount, onConfirm, onClose }) {
if (!visible) return null;
return (
e.stopPropagation()}>
{pinned ? 'Unpin this reward?' : 'Pin this reward?'}
{pinned ? `Remove ${reward ? reward.title : ''} from your pinned list.` : `Pin ${reward ? reward.title : ''} to your home screen at this amount, so you always know what you're saving for.`}
{!pinned && (
{AMOUNT_PRESETS.map(v => (
onPickAmount(v)}>${v}
))}
)}
);
}
const CAT_TAG = {
Food: { bg: 'rgba(255,138,61,.16)', fg: '#FFB27A', bgLight: 'rgba(230,110,20,.12)', fgLight: '#B45309' },
Retail: { bg: 'rgba(154,140,255,.16)', fg: '#BCB0FF', bgLight: 'rgba(107,90,255,.12)', fgLight: '#5B3FD6' },
Auto: { bg: 'rgba(255,255,255,.1)', fg: '#D8D8DC', bgLight: 'rgba(0,0,0,.06)', fgLight: '#4B4B50' },
Tech: { bg: 'rgba(90,209,255,.16)', fg: '#8FDEFF', bgLight: 'rgba(10,140,190,.12)', fgLight: '#0A6E93' },
Hotel: { bg: 'rgba(124,255,178,.16)', fg: '#9CFFC2', bgLight: 'rgba(20,140,80,.12)', fgLight: '#177245' },
};
function RewardDetailScreen({ reward, pinned, onTogglePin, onRedeem, onBack }) {
const [amount, setAmount] = React.useState(10);
const [focused, setFocused] = React.useState(false);
const [sheetOpen, setSheetOpen] = React.useState(false);
const scrollRef = React.useRef(null);
const chosen = amount;
const cost = chosen * PTS_PER_DOLLAR;
const afford = USER.points >= cost && chosen > 0;
const remaining = Math.max(0, cost - USER.points);
const shiftsAway = remaining === 0 ? 0 : Math.ceil(remaining / POINTS_PER_SHIFT);
function handleFocus(e) {
setFocused(true);
const el = e.target, container = scrollRef.current;
if (!container) return;
requestAnimationFrame(() => {
const delta = el.getBoundingClientRect().top - container.getBoundingClientRect().top - 90;
container.scrollTop += delta;
});
}
return (
setSheetOpen(true)}>
{reward.title}
{reward.cat}
{(reward.pinned + (pinned ? 1 : 0)).toLocaleString()} redeemed
{remaining.toLocaleString()} pts to go
{shiftsAway === 0 ? 'You can redeem now' : `${shiftsAway} more shift${shiftsAway > 1 ? 's' : ''} to unlock`}
Choose an amount
{AMOUNT_PRESETS.map(v => (
setAmount(v)} />
))}
About {reward.title}
{reward.title} is a {reward.cat.toLowerCase()} {CAT_DESC[reward.cat] || 'brand our Pryzers redeem often.'}
How redemption works
{GUIDE_STEPS.map((s, idx) => (
))}
{focused &&
}
0 ? 'Not enough points' : 'Enter an amount'} variant="primary" disabled={!afford} onPress={() => onRedeem(chosen, cost)} />
setSheetOpen(false)} onConfirm={() => { onTogglePin(amount); setSheetOpen(false); }} />
);
}
function RedeemConfirmSheet({ reward, amount, cost, visible, onConfirm, onClose }) {
if (!reward) return null;
return (
e.stopPropagation()}>
Confirm redemption
You're about to redeem a ${amount} {reward.title} reward for {cost.toLocaleString()} points . This can't be undone.
);
}
function Sprinkles() {
const colors = ['#7CFFB2','#5AD1FF','#B98CFF','#fff','#FFD84D','var(--color-primary)'];
const pieces = React.useMemo(() => Array.from({ length: 140 }, (_, i) => ({
left: Math.random() * 100, delay: Math.random() * 0.5, dur: 1.6 + Math.random() * 2,
color: colors[i % colors.length], rot: Math.random() * 360, size: 6 + Math.random() * 10,
drift: (Math.random() - 0.5) * 200, shape: i % 3 === 0 ? '50%' : '2px',
})), []);
return (
{pieces.map((p, i) => (
);
}
function RedeemSuccessSheet({ visible, reward, amount, onDone }) {
React.useEffect(() => {
const audio = new Audio('uploads/sound-effects-library-cash-register-sound.mp3');
audio.volume = 0.7;
audio.play().catch(() => {});
const t = setTimeout(onDone, 4200);
return () => { clearTimeout(t); audio.pause(); };
}, []);
if (!reward) return null;
return (
e.stopPropagation()}>
CASHED OUT
${amount}
STRAIGHT TO YOUR WALLET
Let's go! 🎉
Your {reward.title} card just landed — code's in your email.
);
}
function BurstRays() {
const rays = React.useMemo(() => Array.from({ length: 16 }, (_, i) => i * (360 / 16)), []);
return (
{rays.map((deg, i) => (
);
}
function ComingSoonScreen({ label, emoji }) {
return (
{emoji}
{label}
This flow is coming in a later phase.
);
}
window.PryzeScreens = { WalletHomeScreen, AdRewardsScreen, RewardDetailScreen, RedeemConfirmSheet, RedeemSuccessSheet, ComingSoonScreen };