// ==================================================================== // SUPPORT PAGE, persona-aware // Franchisee → Zendesk-style inbox + live availability + book-a-call // HQ → Advisor operations: KPIs, volume by location, themes, leaderboard // ==================================================================== const { useState: useStateS, useMemo: useMemoS } = React; const Ts = (t, b, k) => window.toast && window.toast(t, b, k); // --------------------------------------------------------------- // MOCK DATA, Franchisee inbox + threads // --------------------------------------------------------------- const ADVISORS = { 'priya': { name: 'Priya R.', role: 'Local Marketing Strategist', initials: 'PR', color: 'var(--terra)' }, 'marcus': { name: 'Marcus T.', role: 'Performance Advisor', initials: 'MT', color: 'var(--sage)' }, 'team': { name: 'Support Team', role: 'Listings & Tech', initials: 'ST', color: 'var(--sky)' }, 'jen': { name: 'Jen K.', role: 'Creative Lead', initials: 'JK', color: 'var(--marigold)'}, }; const SUPPORT_THREADS = [ { id: 't-mothers', subject: "Re: Mother's Day promo creative", advisor: 'priya', last: 'Hot off the press, three new layouts attached. The gift-a-clean direction tested best in our last round.', timestamp: '2h ago', timeFull: 'Apr 27, 1:42 PM', unread: true, status: 'open', messages: [ { from: 'priya', ts: 'Apr 24, 9:12 AM', text: "Hey Alicia, flagging that Mother's Day is 16 days out. We have three creative directions ready. Want me to send mocks?" }, { from: 'me', ts: 'Apr 24, 11:30 AM', text: "Yes please. Gift cleans are the angle I'd lean into, we sell out Mother's Day gift-clean slots every year." }, { from: 'priya', ts: 'Apr 25, 10:01 AM', text: "Perfect. I'll bias toward the gift-a-clean look. Here's a brief draft, confirm tone (warm/family vs. premium/elevated)?" }, { from: 'me', ts: 'Apr 25, 4:18 PM', text: "Warm/family. We're not a luxury spa." }, { from: 'priya', ts: 'Apr 27, 1:42 PM', text: "Hot off the press, three new layouts attached. The gift-a-clean direction tested best in our last round. If you can review by Tuesday we can ship for the May 1 push." }, ], }, { id: 't-phone', subject: 'Phone routing setup confirmation', advisor: 'marcus', last: "All set, your LSA calls now route to (512) 555-0188 first, fallback to your cell after 4 rings. Test call worked.", timestamp: 'Yesterday', timeFull: 'Apr 26, 4:22 PM', unread: true, status: 'open', messages: [ { from: 'me', ts: 'Apr 26, 9:14 AM', text: "Sarah's phone got reassigned. Can we point LSA calls to the new front-of-house line?" }, { from: 'marcus', ts: 'Apr 26, 9:48 AM', text: "On it. New number is (512) 555-0188, correct?" }, { from: 'me', ts: 'Apr 26, 10:02 AM', text: "Yes." }, { from: 'marcus', ts: 'Apr 26, 4:22 PM', text: "All set, your LSA calls now route to (512) 555-0188 first, fallback to your cell after 4 rings. Test call worked. Let me know if anything feels off this week." }, ], }, { id: 't-dg', subject: 'Demand Gen, is this right for us?', advisor: 'priya', last: "Sharing the cohort study from 18 FreshNest locations that activated in Q1. CPM held at $7.20, lead lift came in week 5–7.", timestamp: '3d ago', timeFull: 'Apr 24, 11:08 AM', unread: false, status: 'open', messages: [ { from: 'me', ts: 'Apr 23, 2:30 PM', text: "Corporate keeps mentioning Demand Gen. Honestly not sure what it does or if it's right for a single location with our budget." }, { from: 'priya', ts: 'Apr 23, 5:11 PM', text: "Totally fair question. Demand Gen is upper-funnel, it builds awareness so your search ads convert better later. It's usually NOT the first thing we'd recommend at your scale." }, { from: 'priya', ts: 'Apr 24, 11:08 AM', text: "That said, you're at the size where it could start paying off. Sharing the cohort study from 18 FreshNest locations that activated in Q1. CPM held at $7.20, lead lift came in week 5–7. Take a look and we can decide together on our next call." }, ], }, { id: 't-qbr', subject: 'Quarterly performance review prep', advisor: 'marcus', last: "Pre-read attached. Three things I want to walk through: PPC scaling, the LSA dispute pattern, and your review velocity.", timestamp: 'Last week', timeFull: 'Apr 21, 9:30 AM', unread: false, status: 'closed', messages: [ { from: 'marcus', ts: 'Apr 21, 9:30 AM', text: "QBR is on the calendar for May 6, 2pm. Pre-read attached. Three things I want to walk through: PPC scaling, the LSA dispute pattern, and your review velocity." }, { from: 'me', ts: 'Apr 21, 3:14 PM', text: "Thanks, read through. Looking forward to it." }, ], }, { id: 't-listings', subject: 'Listing fixes, Apple Maps issue', advisor: 'team', last: "Apple Maps re-indexed your hours overnight. Should be live everywhere within 24 hours. Closing this ticket.", timestamp: '2 weeks ago', timeFull: 'Apr 14, 10:45 AM', unread: false, status: 'closed', messages: [ { from: 'me', ts: 'Apr 12, 6:48 PM', text: "Apple Maps still showing 8pm close on Sundays. We close at 10. This is the third time." }, { from: 'team', ts: 'Apr 13, 9:22 AM', text: "Sorry about that, Apple's data partner has a stale feed. Submitting a manual override now." }, { from: 'team', ts: 'Apr 14, 10:45 AM', text: "Apple Maps re-indexed your hours overnight. Should be live everywhere within 24 hours. Closing this ticket." }, ], }, { id: 't-creative', subject: 'Spring creative refresh approved', advisor: 'jen', last: "Final assets shipped to your Meta account. They'll start serving with the next budget cycle.", timestamp: '3 weeks ago', timeFull: 'Apr 8, 2:15 PM', unread: false, status: 'closed', messages: [ { from: 'jen', ts: 'Apr 6, 11:00 AM', text: "Spring carousel is approved by you and corporate. Pushing to production today." }, { from: 'jen', ts: 'Apr 8, 2:15 PM', text: "Final assets shipped to your Meta account. They'll start serving with the next budget cycle." }, ], }, ]; const BOOK_SLOTS = [ { day: 'Wed Apr 30', time: '10:00 AM CT', advisor: 'marcus' }, { day: 'Thu May 1', time: '2:00 PM CT', advisor: 'priya' }, { day: 'Fri May 2', time: '9:00 AM CT', advisor: 'marcus' }, ]; // --------------------------------------------------------------- // MOCK DATA, HQ advisor operations // --------------------------------------------------------------- const HQ_ADVISOR_OPS = { kpis: { avgResponseHrs: 2.4, responseTarget: 4, responseGood: true, avgResolutionDays: 1.6, resolutionTarget: 2, resolutionGood: true, bookingWindowDays: 2.8, bookingTarget: 2, bookingGood: false, activeConversations: 184, activeDelta: +12, }, volumeByLocation: [ { unit: 'Las Vegas Strip', city: 'Las Vegas, NV', advisor: 'priya', threads: 14, openThreads: 8, overSla: 2, avgResponse: 5.8, status: 'attention' }, { unit: 'Houston Galleria', city: 'Houston, TX', advisor: 'marcus', threads: 12, openThreads: 4, overSla: 0, avgResponse: 1.9, status: 'healthy' }, { unit: 'Atlanta Midtown', city: 'Atlanta, GA', advisor: 'priya', threads: 11, openThreads: 3, overSla: 0, avgResponse: 2.1, status: 'healthy' }, { unit: 'Chicago Loop', city: 'Chicago, IL', advisor: 'marcus', threads: 10, openThreads: 6, overSla: 1, avgResponse: 4.6, status: 'elevated' }, { unit: 'Orlando I-Drive', city: 'Orlando, FL', advisor: 'jen', threads: 10, openThreads: 2, overSla: 0, avgResponse: 1.4, status: 'healthy' }, { unit: 'Austin Downtown', city: 'Austin, TX', advisor: 'priya', threads: 9, openThreads: 3, overSla: 0, avgResponse: 2.0, status: 'healthy' }, { unit: 'Nashville Broadway', city: 'Nashville, TN', advisor: 'team', threads: 8, openThreads: 4, overSla: 1, avgResponse: 3.8, status: 'elevated' }, { unit: 'Denver LoDo', city: 'Denver, CO', advisor: 'marcus', threads: 7, openThreads: 2, overSla: 0, avgResponse: 2.5, status: 'healthy' }, { unit: 'Fort Worth Stockyards',city: 'Fort Worth, TX', advisor: 'priya', threads: 7, openThreads: 1, overSla: 0, avgResponse: 1.8, status: 'healthy' }, { unit: 'Dallas Uptown', city: 'Dallas, TX', advisor: 'team', threads: 6, openThreads: 2, overSla: 0, avgResponse: 2.2, status: 'healthy' }, ], themes: [ { id: 'th-dg', theme: 'Demand Gen enrollment interest', locations: 14, trend: 'rising', promote: true, note: "Locations are asking unprompted, this is the right moment to push playbook activation." }, { id: 'th-mothers', theme: 'Promo creative timing for Mother\u2019s Day', locations: 22, trend: 'rising', promote: false, note: 'Predictable seasonal spike. Creative kits already published.' }, { id: 'th-budget', theme: 'Budget reallocation requests', locations: 11, trend: 'steady', promote: false, note: '6 of 11 are asking to reduce paid social. Worth monitoring trend.' }, { id: 'th-phones', theme: 'Phone routing changes after staff turnover', locations: 9, trend: 'rising', promote: true, note: 'Self-serve doc would deflect ~70%. Lenny drafted one.' }, { id: 'th-apple', theme: 'Listing accuracy issues on Apple Maps', locations: 6, trend: 'falling', promote: false, note: 'Decreasing since the publisher fix on Apr 13.' }, ], leaderboard: [ { advisor: 'marcus', threads: 47, avgResolutionDays: 1.2, satisfaction: 4.8 }, { advisor: 'priya', threads: 52, avgResolutionDays: 1.5, satisfaction: 4.9 }, { advisor: 'jen', threads: 31, avgResolutionDays: 1.7, satisfaction: 4.7 }, ], }; // ==================================================================== // SUPPORT PAGE, persona router // ==================================================================== function SupportPage({ data, persona }) { if (persona === 'hq') return ; return ; } window.SupportPage = SupportPage; // ==================================================================== // FRANCHISEE // ==================================================================== function SupportPageFranchisee({ data }) { // Simulated availability, flip between true/false to demo. const [available] = useStateS(true); const [openThread, setOpenThread] = useStateS(null); const [reply, setReply] = useStateS(''); const [threads, setThreads] = useStateS(SUPPORT_THREADS); const unreadCount = threads.filter(t => t.unread).length; const openT = (t) => { setOpenThread(t); if (t.unread) { setThreads(prev => prev.map(x => x.id === t.id ? { ...x, unread: false } : x)); } }; const sendReply = () => { if (!reply.trim() || !openThread) return; Ts('Reply sent', `Your message to ${ADVISORS[openThread.advisor].name} is on its way.`, 'ok'); setReply(''); }; return (
Support.
Your Local Marketing Team is here. Email, call, or message, whichever works.
{/* Live availability strip */}
{/* LEFT, inbox */}
Inbox {threads.length} threads · {unreadCount} unread
{threads.map((t, i) => ( openT(t)} /> ))}
{/* RIGHT, book a call + lenny */}
Lenny's note
Priya replies fastest in the morning. Her median response Mon–Fri before noon is ~38 minutes. After 3pm it's 2–3 hours.
{/* Thread drawer */} {openThread && ( setOpenThread(null)} /> )}
); } // ----------- Availability strip ----------- function AvailabilityStrip({ available }) { const dotColor = available ? 'var(--ok)' : 'var(--marigold)'; return (
{available && }
{available ? 'An advisor is available now.' : 'No advisors available right now.'}
{available ? 'Marcus T. and Priya R. are both online · typical response <5 min' : 'Next availability: 2:30 PM CT today · or send a message and we\u2019ll respond ASAP'}
); } // ----------- Thread row in the inbox ----------- function ThreadRow({ t, advisor, last, onOpen }) { return (
e.currentTarget.style.background = 'var(--cream)'} onMouseLeave={e => e.currentTarget.style.background = t.unread ? 'rgba(245,124,86,.04)' : 'transparent'} style={{ display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 14, padding: '14px 18px', borderBottom: last ? 'none' : '1px solid var(--cream-2)', background: t.unread ? 'rgba(245,124,86,.04)' : 'transparent', cursor: 'pointer', alignItems: 'center', transition: 'background .12s ease', }}>
{t.subject} {t.unread && } {t.status === 'closed' && Resolved}
{advisor.name} · {advisor.role}
{t.last}
{t.timestamp}
); } // ----------- Advisor avatar ----------- function AdvisorAvatar({ advisor, size }) { return (
= 40 ? 14 : 11, fontWeight: 600, flexShrink: 0, }}> {advisor.initials}
); } // ----------- Thread drawer ----------- function ThreadDrawer({ thread, advisor, reply, setReply, onSend, onClose }) { return ( <>
{/* Header */}
{thread.subject}
{advisor.name} · {advisor.role}
{/* Messages */}
{thread.messages.map((m, i) => { const fromMe = m.from === 'me'; const fromAdvisor = !fromMe ? ADVISORS[m.from] : null; return (
{!fromMe && fromAdvisor && } {fromMe &&
MC
}
{m.text}
{fromMe ? 'You' : fromAdvisor.name} · {m.ts}
); })}
{/* Composer */}