// prizewheel.jsx — Fire Lingo promotion prize wheel.
//
// Replaces the left (member) panel of the translation screen while a promotion
// is running. The employee sidebar — status card, Finish serving member, mode
// picker — stays untouched, so the "select language → serve member → finish"
// flow is never broken.
//
// Copy is lifted verbatim from PrizeWheel.swift so the redesign stays faithful
// to what members read in production today.
// Segment palette — brand-derived instead of the saturated rainbow. Alternating
// tints of the active brand keep the wheel readable and on-system, while the
// prize and retry segments stay high-contrast so they're findable at a glance.
const WHEEL_TINTS = [
'var(--td-blue-300)', 'var(--td-blue)', 'var(--td-blue-600)',
'var(--td-blue-400)', 'var(--td-blue-200)', 'var(--td-blue-500)',
];
// Localized member-facing copy. English is always shown beneath the native line,
// mirroring the bilingual popups in the current build.
const WHEEL_COPY = {
en: { spin: 'Tap to spin', again: 'You won another spin!\nPlease spin the wheel again.', lose: 'Sorry, no prize. Hope you had fun!' },
'es': { spin: 'Toca para girar', again: '¡Has ganado otra ronda!\nVuelve a girar la ruleta.', lose: 'Lo sentimos, no ganaste premio.\n¡Esperamos que te hayas divertido!' },
'ko': { spin: '탭하여 돌리기', again: '한 번 더 돌릴 수 있어요!\n휠을 다시 돌려주세요.', lose: '아쉽지만 당첨되지 않았어요.\n즐거우셨길 바랍니다!' },
'fr': { spin: 'Touchez pour tourner', again: 'Vous avez gagné un tour !\nFaites tourner la roue à nouveau.', lose: 'Désolé, pas de prix.\nNous espérons que vous vous êtes amusé !' },
'zh': { spin: '点击转动', again: '您赢得了再转一次的机会！\n请再次转动转盘。', lose: '很遗憾，没有中奖。\n希望您玩得开心！' },
'ht': { spin: 'Peze pou vire', again: 'Ou genyen yon lòt tou!\nVire wou a ankò.', lose: 'Nou regrèt, ou pa genyen.\nNou espere ou te amize w!' },
'sw': { spin: 'Gusa kuzungusha', again: 'Umeshinda zamu nyingine!\nZungusha gurudumu tena.', lose: 'Samahani, hukushinda zawadi.\nTunatumai ulifurahia!' },
'pt-BR': { spin: 'Toque para girar', again: 'Você ganhou outra rodada!\nGire a roleta novamente.', lose: 'Desculpe, sem prêmio.\nEsperamos que tenha se divertido!' },
'pt-PT': { spin: 'Toque para girar', again: 'Ganhou outra rodada!\nRode a roleta novamente.', lose: 'Lamentamos, sem prémio.\nEsperamos que se tenha divertido!' },
'vi': { spin: 'Chạm để quay', again: 'Bạn được quay thêm lượt nữa!\nHãy quay lại vòng quay.', lose: 'Rất tiếc, bạn chưa trúng thưởng.\nHy vọng bạn đã vui!' },
'ar': { spin: 'اضغط للدوران', again: '!لقد ربحت دورة أخرى\n.أدر العجلة مرة أخرى', lose: '.عذراً، لم تربح جائزة\n!نأمل أنك استمتعت' },
'prs': { spin: 'برای چرخاندن ضربه بزنید', again: '!شما یک چرخش دیگر بردید\n.لطفاً چرخ را دوباره بچرخانید', lose: '.متأسفیم، جایزهای نبود\n!امیدواریم لذت برده باشید' },
'ru': { spin: 'Нажмите, чтобы крутить', again: 'Вы выиграли ещё одну попытку!\nКрутите колесо снова.', lose: 'К сожалению, приза нет.\nНадеемся, вам понравилось!' },
'uk': { spin: 'Натисніть, щоб крутити', again: 'Ви виграли ще одну спробу!\nКрутіть колесо знову.', lose: 'На жаль, призу немає.\nСподіваємось, вам сподобалось!' },
'ro': { spin: 'Atinge pentru a învârti', again: 'Ai câștigat încă o rotire!\nÎnvârte roata din nou.', lose: 'Ne pare rău, fără premiu.\nSperăm că te-ai distrat!' },
'so': { spin: 'Taabo si aad u wareejiso', again: 'Waxaad ku guulaysatay wareeg kale!\nFadlan mar kale wareeji.', lose: 'Waan ka xunnahay, abaalmarin ma jirto.\nWaxaan rajaynaynaa inaad ku raaxaysatay!' },
};
function wheelCopy(code) {
return { ...WHEEL_COPY.en, ...(WHEEL_COPY[code] || {}) };
}
// ---------------------------------------------------------------- wheel shape
function WheelShape({ segments, prizeIndex, retryIndices, size }) {
const r = size / 2;
const step = 360 / segments;
const slice = (i) => {
const a0 = (i * step - 90) * Math.PI / 180;
const a1 = ((i + 1) * step - 90) * Math.PI / 180;
const x0 = r + r * Math.cos(a0), y0 = r + r * Math.sin(a0);
const x1 = r + r * Math.cos(a1), y1 = r + r * Math.sin(a1);
return `M ${r} ${r} L ${x0} ${y0} A ${r} ${r} 0 0 1 ${x1} ${y1} Z`;
};
return (
);
}
// ------------------------------------------------------------- result overlay
function ResultCard({ kind, lang, copy, nativeFont, prizeTitle, prizeBody }) {
const isWin = kind === 'win';
const accent = isWin ? '#2FB84C' : kind === 'again' ? 'var(--td-orange)' : 'var(--td-slate-500)';
const icon = isWin
?
: kind === 'again'
? <>
: <>;
const nativeText = isWin ? prizeTitle : kind === 'again' ? copy.again : copy.lose;
const englishText = isWin
? 'You won a $25 gift card!'
: kind === 'again'
? 'You won another spin!\nPlease spin the wheel again.'
: 'Sorry, no prize. Hope you had fun!';
return (
{/* Winning state is the one sanctioned exception to the no-emoji rule —
a celebration reads instantly across every language on the tablet. */}
{isWin ? (
🎉
) : (
)}
{isWin ? `🎊 ${nativeText} 🎊` : nativeText}
{isWin ? `🎁 ${englishText}` : englishText}
{isWin && (
{prizeBody}
)}
);
}
// ------------------------------------------------------------------ main view
function PrizeWheelPanel({ lang, nativeFont, onClose, hasPrizes = true, forcedOutcome = null,
memberDown, memberUp, memberPhase, employeePhase, memberLevel, btn }) {
const copy = wheelCopy(lang.code);
const SEGMENTS = 15;
const PRIZE_INDEX = 0;
const RETRY_INDICES = [5, 10];
const [angle, setAngle] = React.useState(-(360 / SEGMENTS) / 2);
const [spinning, setSpinning] = React.useState(false);
const [result, setResult] = React.useState(null); // 'again' | 'win' | 'lose'
const [spinCount, setSpinCount] = React.useState(0);
const size = 540;
const spin = () => {
if (spinning || result === 'win' || result === 'lose' || !hasPrizes) return;
setResult(null);
setSpinning(true);
// Decide the outcome, then land the wheel on the matching segment.
const outcome = forcedOutcome
|| (spinCount === 0 ? 'again' : spinCount === 1 ? 'win' : 'lose');
const landIndex = outcome === 'win' ? PRIZE_INDEX
: outcome === 'again' ? RETRY_INDICES[spinCount % RETRY_INDICES.length]
: 3;
const step = 360 / SEGMENTS;
const target = -(landIndex * step + step / 2);
const turns = 5 * 360;
const next = Math.floor(angle / 360) * 360 + turns + target;
setAngle(next);
setTimeout(() => {
setSpinning(false);
setSpinCount(c => c + 1);
setResult(outcome);
}, 3400);
};
const canSpin = !spinning && hasPrizes && (result === null || result === 'again');
// Mic state mirrors the turn-based screen so the sidebar status card lights up
// with processing / translating exactly as it does in a normal conversation.
const memberSpeaking = memberPhase === 'listening' || employeePhase === 'listening';
const micBusy = (memberPhase && memberPhase !== 'idle' && memberPhase !== 'listening')
|| (employeePhase && employeePhase !== 'idle' && employeePhase !== 'listening');
// ── No prizes configured: surface the error instead of the wheel ──────────
if (!hasPrizes) {
return (
No prizes available
All prizes for this promotion have been claimed or no promotion has been set. Close this and continue the conversation as normal.
);
}
return (
{/* Promotion eyebrow + close */}
Promotion
{/* Result overlay replaces the wheel on a terminal outcome */}
{(result === 'win' || result === 'lose') ? (
{/* Translation mic — the winner keeps talking to the employee right
here, same tap-and-hold → processing → translating lifecycle as the
normal turn-based screen (matches RecordButton in PrizeWheel.swift). */}