// feedback.jsx — Fire Lingo Face-to-Face post-session feedback survey
// Shown to the member (in their language) after the employee taps "Finish serving member".
// Employee can also fill it in if the member has already left — segmented at the bottom.
const FEEDBACK_COPY = {
// English fallback first; each lang overrides what it can.
en: {
title: 'Quick feedback',
subtitle:'Your answers help us serve you better.',
q1: 'Was it easy to talk with us using this tablet?',
q2: 'Would you use this tablet again?',
q3: 'How was your visit at {bank} today?',
q4: 'Tell us about your experience with the tablet.',
q4Hint: 'Hold the circle and speak — we\u2019ll capture and translate it.',
q4Held: 'Listening…',
role: 'Are you',
member: 'A member',
employee:'An employee',
submit: 'Submit feedback',
skip: 'Skip',
no: 'No',
yes: 'Yes',
upset: 'Upset',
sad: 'Sad',
neutral: 'Okay',
happy: 'Happy',
superHappy: 'Great',
},
es: {
title: 'Comentarios rápidos',
subtitle:'Sus respuestas nos ayudan a atenderle mejor.',
q1: '¿Fue fácil comunicarse usando esta tableta?',
q2: '¿La usaría otra vez?',
q3: '¿Cómo fue su experiencia en {bank} hoy?',
q4: 'Cuéntenos sobre su experiencia con la tableta.',
q4Hint: 'Mantenga presionado el círculo y hable — lo capturamos y traducimos.',
q4Held: 'Escuchando…',
role: 'Usted es',
member: 'Un miembro',
employee:'Un empleado',
submit: 'Enviar',
skip: 'Omitir',
no: 'No',
yes: 'Sí',
upset: 'Muy mal',
sad: 'Mal',
neutral: 'Regular',
happy: 'Bien',
superHappy: 'Excelente',
},
zh: {
title: '快速反馈', subtitle: '您的回答能帮助我们更好地服务您。',
q1: '使用这台平板与我们交流是否方便?',
q2: '您愿意再次使用吗?',
q3: '您今天在{bank}的体验如何?',
q4: '请告诉我们您使用平板的体验。',
q4Hint: '按住圆圈说话 — 我们会录音并翻译。',
q4Held: '正在聆听…',
role: '您是', member: '成员', employee: '员工',
submit: '提交', skip: '跳过',
no: '否', yes: '是',
upset: '很糟', sad: '不好', neutral: '一般', happy: '好', superHappy: '非常好',
},
vi: {
title: 'Phản hồi nhanh', subtitle: 'Câu trả lời của bạn giúp chúng tôi phục vụ tốt hơn.',
q1: 'Có dễ giao tiếp với máy tính bảng này không?',
q2: 'Bạn có muốn dùng lại không?',
q3: 'Trải nghiệm của bạn tại {bank} hôm nay thế nào?',
q4: 'Hãy cho chúng tôi biết trải nghiệm của bạn với máy tính bảng.',
q4Hint: 'Giữ vòng tròn và nói — chúng tôi sẽ ghi và dịch.',
q4Held: 'Đang nghe…',
role: 'Bạn là', member: 'Thành viên', employee: 'Nhân viên',
submit: 'Gửi', skip: 'Bỏ qua',
no: 'Không', yes: 'Có',
upset: 'Rất tệ', sad: 'Tệ', neutral: 'Bình thường', happy: 'Tốt', superHappy: 'Rất tốt',
},
ko: {
title: '간단한 피드백', subtitle: '귀하의 답변이 더 나은 서비스를 만듭니다.',
q1: '이 태블릿으로 의사소통이 쉬웠나요?',
q2: '다시 사용하시겠어요?',
q3: '오늘 {bank} 방문은 어떠셨나요?',
q4: '태블릿 사용 경험을 알려주세요.',
q4Hint: '원을 누른 채로 말씀해 주세요 — 녹음해 번역합니다.',
q4Held: '듣는 중…',
role: '귀하는', member: '회원', employee: '직원',
submit: '제출', skip: '건너뛰기',
no: '아니요', yes: '네',
upset: '매우 나쁨', sad: '나쁨', neutral: '보통', happy: '좋음', superHappy: '매우 좋음',
},
ht: {
title: 'Fidbak rapid', subtitle: 'Repons ou ede nou sèvi w pi byen.',
q1: 'Èske li te fasil pou kominike avèk tablèt sa a?',
q2: 'Èske w ap itilize li ankò?',
q3: 'Kijan eksperyans ou nan {bank} jodi a?',
q4: 'Di nou eksperyans ou avèk tablèt la.',
q4Hint: 'Kenbe sèk la peze epi pale — n ap anrejistre l e tradui l.',
q4Held: 'N ap koute…',
role: 'Èske w se', member: 'Yon manm', employee: 'Yon anplwaye',
submit: 'Voye', skip: 'Sote',
no: 'Non', yes: 'Wi',
upset: 'Trè move', sad: 'Move', neutral: 'Konsa konsa', happy: 'Byen', superHappy: 'Trè byen',
},
ar: {
title: 'ملاحظات سريعة', subtitle: 'إجاباتك تساعدنا على خدمتك بشكل أفضل.',
q1: 'هل كان من السهل التواصل عبر هذا الجهاز؟',
q2: 'هل ستستخدمه مرة أخرى؟',
q3: 'كيف كانت زيارتك إلى {bank} اليوم؟',
q4: 'أخبرنا عن تجربتك مع الجهاز.',
q4Hint: 'اضغط على الدائرة مع الاستمرار وتحدث — سنسجّل ونترجم.',
q4Held: 'نستمع الآن…',
role: 'أنت', member: 'عميل', employee: 'موظف',
submit: 'إرسال', skip: 'تخطّي',
no: 'لا', yes: 'نعم',
upset: 'سيئ جداً', sad: 'سيئ', neutral: 'متوسط', happy: 'جيد', superHappy: 'ممتاز',
},
fr: {
title: 'Avis rapide', subtitle: 'Vos réponses nous aident à mieux vous servir.',
q1: 'Avez-vous communiqué facilement avec cette tablette ?',
q2: 'L\u2019utiliseriez-vous à nouveau ?',
q3: 'Comment s\u2019est passée votre visite à {bank} aujourd\u2019hui ?',
q4: 'Parlez-nous de votre expérience avec la tablette.',
q4Hint: 'Maintenez le cercle et parlez — nous enregistrons et traduisons.',
q4Held: 'Écoute…',
role: 'Vous êtes', member: 'Un membre', employee: 'Un employé',
submit: 'Envoyer', skip: 'Passer',
no: 'Non', yes: 'Oui',
upset: 'Très mauvais', sad: 'Mauvais', neutral: 'Correct', happy: 'Bien', superHappy: 'Très bien',
},
pt: {
title: 'Comentário rápido', subtitle: 'As suas respostas ajudam-nos a servi-lo melhor.',
q1: 'Foi fácil comunicar usando este tablet?',
q2: 'Voltaria a usá-lo?',
q3: 'Como foi a sua visita a {bank} hoje?',
q4: 'Conte-nos a sua experiência com o tablet.',
q4Hint: 'Mantenha o círculo premido e fale — vamos gravar e traduzir.',
q4Held: 'A ouvir…',
role: 'Você é', member: 'Um membro', employee: 'Um funcionário',
submit: 'Enviar', skip: 'Saltar',
no: 'Não', yes: 'Sim',
upset: 'Muito mau', sad: 'Mau', neutral: 'Razoável', happy: 'Bom', superHappy: 'Excelente',
},
ru: {
title: 'Быстрый отзыв', subtitle: 'Ваши ответы помогут нам улучшить обслуживание.',
q1: 'Было ли удобно общаться через этот планшет?',
q2: 'Воспользуетесь ли вы им снова?',
q3: 'Как прошёл ваш визит в {bank} сегодня?',
q4: 'Расскажите о вашем опыте с планшетом.',
q4Hint: 'Удерживайте круг и говорите — мы запишем и переведём.',
q4Held: 'Слушаю…',
role: 'Вы', member: 'Клиент', employee: 'Сотрудник',
submit: 'Отправить', skip: 'Пропустить',
no: 'Нет', yes: 'Да',
upset: 'Очень плохо', sad: 'Плохо', neutral: 'Нормально', happy: 'Хорошо', superHappy: 'Отлично',
},
hi: {
title: 'त्वरित प्रतिक्रिया', subtitle: 'आपके उत्तर हमें बेहतर सेवा देने में मदद करते हैं।',
q1: 'क्या इस टैबलेट से बात करना आसान था?',
q2: 'क्या आप इसे दोबारा उपयोग करेंगे?',
q3: 'आज {bank} में आपका अनुभव कैसा रहा?',
q4: 'टैबलेट के साथ अपना अनुभव बताएँ।',
q4Hint: 'गोले को दबाकर बोलें — हम रिकॉर्ड करके अनुवाद करेंगे।',
q4Held: 'सुन रहे हैं…',
role: 'आप हैं', member: 'सदस्य', employee: 'कर्मचारी',
submit: 'भेजें', skip: 'छोड़ें',
no: 'नहीं', yes: 'हाँ',
upset: 'बहुत खराब', sad: 'खराब', neutral: 'ठीक', happy: 'अच्छा', superHappy: 'बहुत अच्छा',
},
tl: {
title: 'Mabilis na puna', subtitle: 'Tutulungan kaming magbigay ng mas mahusay na serbisyo.',
q1: 'Madali bang makipag-usap gamit ang tablet na ito?',
q2: 'Gagamitin mo ba ulit ito?',
q3: 'Kumusta ang pagbisita mo sa {bank} ngayon?',
q4: 'Sabihin sa amin ang karanasan mo sa tablet.',
q4Hint: 'Pindutin at hawakan ang bilog at magsalita — irerekord at isasalin namin.',
q4Held: 'Nakikinig…',
role: 'Ikaw ay', member: 'Isang miyembro', employee: 'Isang empleyado',
submit: 'Ipadala', skip: 'Laktawan',
no: 'Hindi', yes: 'Oo',
upset: 'Napakasama', sad: 'Masama', neutral: 'Sakto', happy: 'Maganda', superHappy: 'Napakaganda',
},
sw: {
title: 'Maoni ya haraka', subtitle: 'Majibu yako yanatusaidia kukuhudumia vizuri zaidi.',
q1: 'Je, ilikuwa rahisi kuzungumza nasi kwa kutumia kibao hiki?',
q2: 'Je, utakitumia tena?',
q3: 'Ulipata uzoefu gani {bank} leo?',
q4: 'Tuambie kuhusu uzoefu wako na kibao.',
q4Hint: 'Bonyeza mduara na uzungumze — tutarekodi na kutafsiri.',
q4Held: 'Tunasikiliza…',
role: 'Wewe ni', member: 'Mwanachama', employee: 'Mfanyakazi',
submit: 'Wasilisha', skip: 'Ruka',
no: 'Hapana', yes: 'Ndio',
upset: 'Mbaya sana', sad: 'Mbaya', neutral: 'Wastani', happy: 'Vizuri', superHappy: 'Vizuri sana',
},
};
const BANK_NAME = 'Eastpoint';
function getCopy(code) {
return { ...FEEDBACK_COPY.en, ...(FEEDBACK_COPY[code] || {}) };
}
// ──────────────────────────────────────────────────────────────────────────
// Face icons — single SVG, expressions vary by mood (5-step scale)
// ──────────────────────────────────────────────────────────────────────────
function FaceIcon({ mood, size = 56 }) {
// mood: 'upset' (1) | 'sad' (2) | 'neutral' (3) | 'happy' (4) | 'super' (5) | 'no' | 'yes'
// 'no' aliases 'sad', 'yes' aliases 'super'.
const m = mood === 'no' ? 'sad' : mood === 'yes' ? 'super' : mood;
// Eye paths
const eyes = m === 'upset' ? <>
: m === 'super' ? <>
{/* Squint-happy eyes (upturned arcs) */}
: <>
;
// Mouth paths
const mouth =
m === 'upset' ? :
m === 'sad' ? :
m === 'neutral' ? :
m === 'happy' ? :
/* super */ ;
// Background tint per mood
const bg = m === 'upset' ? '#9d2a2a' :
m === 'sad' ? '#c46438' :
m === 'neutral' ? '#c39632' :
m === 'happy' ? '#5b9c5e' :
/* super */ '#2d8a55';
return (
);
}
// ──────────────────────────────────────────────────────────────────────────
// Question block
// ──────────────────────────────────────────────────────────────────────────
function FeedbackQuestion({ number, native, english, children, fonts }) {
return (
{number}
{native}
{english && english !== native && (
{english}
)}
{children}
);
}
// ──────────────────────────────────────────────────────────────────────────
// FACE BUTTON — wraps FaceIcon with selection state and label
// ──────────────────────────────────────────────────────────────────────────
function FaceButton({ mood, label, selected, onClick, size = 64 }) {
return (
);
}
// ──────────────────────────────────────────────────────────────────────────
// MAIN
// ──────────────────────────────────────────────────────────────────────────
function FeedbackScreen({ language, bankName, brand, onSubmit, onSkip }) {
const lang = language || LANGUAGES[0];
const rtl = lang.script === 'rtl';
const BANK = bankName || BANK_NAME;
const t = getCopy(lang.code);
const fonts = {
native:
lang.script === 'cjk' ? '"Noto Sans SC", "Noto Sans KR", system-ui' :
lang.script === 'devanagari' ? '"Noto Sans Devanagari", var(--font-display)' :
lang.script === 'rtl' ? '"Noto Naskh Arabic", var(--font-display)' :
'var(--font-display)',
cjk: lang.script === 'cjk',
};
const [q1, setQ1] = React.useState(null);
const [q2, setQ2] = React.useState(null);
const [q3, setQ3] = React.useState(null);
const [voiceState, setVoiceState] = React.useState('idle'); // 'idle' | 'recording' | 'recorded'
const [voiceLevel, setVoiceLevel] = React.useState(0);
const [voiceDuration, setVoiceDuration] = React.useState(0);
const [role, setRole] = React.useState('member');
// Voice level animation while recording
React.useEffect(() => {
if (voiceState !== 'recording') return;
const start = performance.now();
let raf;
let last = start;
const tick = (now) => {
const dt = now - last; last = now;
setVoiceDuration((now - start) / 1000);
setVoiceLevel(l => {
const target = 0.55 + 0.35 * Math.sin(now / 230) + (Math.random() - 0.5) * 0.4;
return Math.max(0.18, Math.min(1, l + (target - l) * (dt / 90)));
});
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [voiceState]);
const startVoice = (e) => {
e.preventDefault();
if (voiceState === 'idle' || voiceState === 'recorded') {
setVoiceState('recording');
setVoiceDuration(0);
}
};
const endVoice = (e) => {
e.preventDefault();
if (voiceState === 'recording') {
setVoiceState(voiceDuration > 0.4 ? 'recorded' : 'idle');
}
};
const clearVoice = () => { setVoiceState('idle'); setVoiceDuration(0); };
const submit = () => {
if (onSubmit) onSubmit({
q1, q2, q3,
voice: voiceState === 'recorded' ? { duration: voiceDuration } : null,
role,
});
};
return (
{/* Header strip */}
{brand && brand.useDefaultMark === false ? (
) : (
)}
{t.title}
{t.subtitle} · {language?.english}
{/* Body — two columns */}
{/* Left column — Q1, Q2, Q3 */}
setQ1('no')} size={68} />
setQ1('yes')} size={68} />
setQ2('no')} size={68} />
setQ2('yes')} size={68} />
{[
{ m: 'upset', l: t.upset },
{ m: 'sad', l: t.sad },
{ m: 'neutral', l: t.neutral },
{ m: 'happy', l: t.happy },
{ m: 'super', l: t.superHappy },
].map(opt => (
setQ3(opt.m)} size={56} />
))}
{/* Right column — Q4 (voice) + Q5 (role) */}
{/* Footer — submit */}
{recording && (
)}
{recording ? `${held} ${duration.toFixed(1)}s` :
recorded ? `Recorded · ${duration.toFixed(1)}s` :
hint}
{recorded && (
)}
);
}
// ──────────────────────────────────────────────────────────────────────────
// Role toggle — segmented (member / employee)
// ──────────────────────────────────────────────────────────────────────────
function RoleToggle({ value, onChange, memberLabel, employeeLabel, fonts }) {
return (
{[
{ val: 'member', label: memberLabel, sub: 'A member' },
{ val: 'employee', label: employeeLabel, sub: 'An employee' },
].map(opt => {
const active = value === opt.val;
return (
);
})}
);
}
Object.assign(window, { FeedbackScreen });
) : (