// ============================================================ // REVIEWER FEEDBACK, Corporate demo // The single end-of-demo "Give Feedback" panel: a full ranking board // (rate each feature, drag into priority tiers) + live summary + submit // (Google-Sheets-ready payload). Opens on the `open-feedback` event. // Reads/writes the shared store; state persists to localStorage. // Not part of the shipping product. // ============================================================ (function () { const { useState, useEffect, useRef } = React; const F = { orange: '#f28020', orangeDeep: '#b35f18', orange100: '#fdf0e4', orange50: '#fef9f4', navy: '#002857', star: '#d6b84d' }; const LS_KEY = 'la_feedback_v1'; // ---- Features (seeded from real app screens). page = "Explore again" target ---- const FEATURES = [ { id: 'home', name: 'Home dashboard & LocalScore', desc: 'The daily at-a-glance: LocalScore health ring, KPIs, and Lenny’s top moves.', page: 'home' }, { id: 'ent-rep', name: 'Enterprise Reporting', desc: 'Cross-brand rollups, exportable scorecards, and board-ready summaries.', page: 'enterprise-reporting' }, { id: 'playbook',name: 'Network Playbook', desc: 'The decision system governing strategy across every location.', page: 'services' }, { id: 'budget', name: 'Budget (local view)', desc: 'The local operator’s budget tab, one smart budget or per-channel control, with pacing and spend-vs-performance.', page: 'budget' }, { id: 'results', name: 'Results & channel performance', desc: 'Spend, leads, and ROAS broken out by channel with trend lines.', page: 'results' }, { id: 'bench', name: 'Benchmarks', desc: 'How each location stacks up against the network and its peer set.', page: 'bench' }, { id: 'reviews', name: 'Reviews & reputation', desc: 'Ratings by platform, response tracking, and reputation coaching.', page: 'reviews' }, { id: 'listings',name: 'Listings management', desc: 'Directory accuracy across 40+ listings with fix-it prompts.', page: 'listings' }, { id: 'leads', name: 'Leads inbox', desc: 'Every call, form, and message captured and attributed to a channel.', page: 'leads' }, { id: 'users', name: 'Local users & Mirror mode', desc: 'Browse franchise accounts and step into any operator’s exact view.', page: 'local-users' }, { id: 'hq', name: 'Corporate HQ rollup', desc: 'Portfolio-wide performance by region, tier, and initiative.', page: 'hq' }, { id: 'lenny', name: 'Lenny, AI marketing coach', desc: 'Conversational assistant that flags wins, fires, and next moves.', event: 'open-lenny' }, { id: 'invoice', name: 'Billing & invoices', desc: 'Statements, line-item spend, and self-serve billing history.', page: 'invoice' }, { id: 'settings', name: 'Corporate settings', desc: 'Brand-level configuration: conversion values, defaults, and governance.', page: 'settings' }, { id: 'stack', name: 'Marketing Stack', desc: 'Every service across the network, who’s enrolled and what corporate funds.', page: 'services' }, { id: 'support', name: 'Franchisee Support', desc: 'Franchisee communications and advisor performance.', page: 'support' }, { id: 'density', name: 'Owner view vs Pro view', desc: 'Two densities for local users, a calm owner summary or full pro detail.', page: 'home' }, { id: 'initiatives',name: 'Initiatives (local view)', desc: 'The local operator’s marketing initiatives, enrolled, funded, recommended.', page: 'services' }, ]; const TAGS = ['Clear', 'Saves time', 'Must-have', 'Confusing', 'Needs work', 'Delightful']; const TIERS = [ { key: 'pool', label: 'To review', hint: 'Rate, then drag into a bucket', color: 'var(--ink-4)', bg: 'var(--cream)' }, { key: 'must', label: 'Must-have', hint: 'Build this first', color: F.orange, bg: F.orange50 }, { key: 'nice', label: 'Nice-to-have', hint: 'Valuable, not urgent', color: 'var(--sage)', bg: 'var(--sage-soft)' }, { key: 'skip', label: 'Skip / not now', hint: 'Low priority for us', color: 'var(--ink-4)', bg: 'var(--cream-2)' }, ]; // ============================================================ // Shared store (framework-agnostic pub/sub, localStorage-backed) // ============================================================ function defaultState() { const items = {}; FEATURES.forEach(f => { items[f.id] = { rating: 0, tags: [], comment: '' }; }); return { order: { pool: FEATURES.map(f => f.id), must: [], nice: [], skip: [] }, items, custom: [], general: '', submitted: false }; } function loadState() { try { const raw = localStorage.getItem(LS_KEY); if (raw) { const st = JSON.parse(raw); // Migration: seed any newly-added features into an existing saved state FEATURES.forEach(f => { if (!st.items[f.id]) { st.items[f.id] = { rating: 0, tags: [], comment: '' }; st.order.pool.push(f.id); } }); // Prune any retired features (removed from FEATURES) from saved state const valid = new Set([...FEATURES.map(f => f.id), ...((st.custom || []).map(c => c.id))]); Object.keys(st.items).forEach(id => { if (!valid.has(id)) delete st.items[id]; }); ['pool', 'must', 'nice', 'skip'].forEach(k => { if (st.order && Array.isArray(st.order[k])) st.order[k] = st.order[k].filter(id => valid.has(id)); }); if (typeof st.general !== 'string') st.general = ''; return st; } } catch (e) {} return defaultState(); } const store = { state: loadState(), subs: [], get() { return this.state; }, set(updater) { this.state = typeof updater === 'function' ? updater(this.state) : updater; try { localStorage.setItem(LS_KEY, JSON.stringify(this.state)); } catch (e) {} this.subs.forEach(fn => fn(this.state)); }, subscribe(fn) { this.subs.push(fn); return () => { this.subs = this.subs.filter(f => f !== fn); }; }, }; window.FeedbackStore = store; function useFeedback() { const [, force] = useState(0); useEffect(() => store.subscribe(() => force(x => x + 1)), []); return store.get(); } const featureById = (id, custom) => FEATURES.find(f => f.id === id) || (custom || []).find(f => f.id === id); // ---- mutations ---- const M = { rate: (id, v) => store.set(b => ({ ...b, items: { ...b.items, [id]: { ...b.items[id], rating: v } } })), toggleTag: (id, t) => store.set(b => { const cur = b.items[id].tags; const tags = cur.includes(t) ? cur.filter(x => x !== t) : [...cur, t]; return { ...b, items: { ...b.items, [id]: { ...b.items[id], tags } } }; }), comment: (id, c) => store.set(b => ({ ...b, items: { ...b.items, [id]: { ...b.items[id], comment: c } } })), setGeneral: (g) => store.set(b => ({ ...b, general: g })), add: (name) => { const id = 'custom-' + Date.now(); store.set(b => ({ ...b, custom: [...b.custom, { id, name, desc: 'Added by you', custom: true }], items: { ...b.items, [id]: { rating: 0, tags: [], comment: '' } }, order: { ...b.order, pool: [...b.order.pool, id] } })); }, removeCustom: (id) => store.set(b => { const order = {}; Object.keys(b.order).forEach(k => order[k] = b.order[k].filter(x => x !== id)); const items = { ...b.items }; delete items[id]; return { ...b, order, items, custom: b.custom.filter(f => f.id !== id) }; }), move: (id, toCol, toIndex) => store.set(b => { const from = Object.keys(b.order).find(k => b.order[k].includes(id)); if (!from) return b; const order = {}; Object.keys(b.order).forEach(k => order[k] = [...b.order[k]]); order[from].splice(order[from].indexOf(id), 1); let idx = (toIndex == null || toIndex > order[toCol].length) ? order[toCol].length : toIndex; order[toCol].splice(idx, 0, id); return { ...b, order }; }), reset: () => { localStorage.removeItem(LS_KEY); store.set(defaultState()); }, }; function buildPayload() { const b = store.get(); const rows = []; Object.keys(b.order).forEach(tierKey => b.order[tierKey].forEach((id, i) => { const f = featureById(id, b.custom); const it = b.items[id]; rows.push({ featureId: id, feature: f ? f.name : id, tier: tierKey, rankInTier: tierKey === 'pool' ? null : i + 1, rating: it.rating, tags: it.tags.join('; '), comment: it.comment, custom: !!(f && f.custom) }); })); return { submittedAt: new Date().toISOString(), program: 'LOCALACT Redesign, Corporate Reviewer', general: b.general || '', rows }; } // ============================================================ // Stars // ============================================================ function Stars({ value, onChange, size = 20 }) { const [hover, setHover] = useState(0); return (
setHover(0)}> {[1, 2, 3, 4, 5].map(n => { const on = (hover || value) >= n; return ( setHover(n)} onClick={(e) => { e.stopPropagation(); onChange(n === value ? 0 : n); }} style={{ cursor: 'pointer', color: on ? F.star : 'var(--cream-3)', transition: 'color .1s, transform .1s', transform: hover === n ? 'scale(1.15)' : 'none' }} fill="currentColor"> ); })}
); } // Tag + comment editor shared by dock and card function DetailEditor({ state, id }) { return (
e.stopPropagation()}>
{TAGS.map(t => { const sel = state.tags.includes(t); return ( M.toggleTag(id, t)} style={{ fontSize: 11, padding: '3px 9px', borderRadius: 999, cursor: 'pointer', userSelect: 'none', border: sel ? `1px solid ${F.orange}` : '1px solid var(--line)', background: sel ? F.orange : 'var(--paper)', color: sel ? '#fff' : 'var(--ink-2)', fontWeight: sel ? 600 : 500 }}> {t} ); })}