/* Mission Completion Flow — 3 steps plus submit countdown. */ function StepHeader({ step, total, title, onBack }) { return (
{step} of {total}
{/* progress segments */}
{Array.from({length: total}).map((_, i) => (
))}
{title}
); } /* ---- Step 1: Route confirmation ---- */ function StepRoute({ mission, onNext, onBack }) { const fallbackMission = { type:'verify', title:'Mori Tea House', distance:'120m', cp:40, daysAgo:243, }; const m = mission || fallbackMission; const rawType = String(m.type || 'verify').toLowerCase(); const typeKey = rawType.includes('add-place') ? 'add-place' : rawType.includes('update-place') ? 'update-place' : rawType.includes('add-review') ? 'add-review' : rawType.includes('add-photo') ? 'add-photo' : rawType.includes('update-road') ? 'update-road' : rawType.includes('update-address') ? 'update-address' : rawType.includes('campaign') ? 'campaign' : rawType.includes('first') ? 'first-look' : rawType.includes('refresh') ? 'refresh' : rawType.includes('angle') ? 'angle' : rawType.includes('route') ? 'route' : 'verify'; const typeInfo = { verify: { label:'Verify mission', title:'Confirm a place is still accurate.', body:'Answer the current ground-truth question and capture proof if something changed.', }, 'first-look': { label:'First Look mission', title:'Be the first mapper for a new place.', body:'Capture enough context for others to understand what is here and why it matters.', }, refresh: { label:'Refresh mission', title:'Update stale place data.', body:'Check hours, photos, menus, or details that may have changed since the last visit.', }, angle: { label:'Angle mission', title:'Complete missing visual coverage.', body:'Capture the requested perspective so the POI has a clearer, more useful record.', }, route: { label:'Route mission', title:'Complete a multi-stop route.', body:'Follow the planned stops and contribute a connected trail of local updates.', }, 'add-place': { label:'Add Place', title:'Create a new POI record.', body:'Set the exact location, add the name/category, then capture required photo evidence.', }, 'update-place': { label:'Update Place', title:'Correct stale POI data.', body:'Change hours, closure, signage, or details and attach photo evidence for AI comparison.', }, 'add-review': { label:'Add Review', title:'Turn a visit into structured data.', body:'Rate the place, write a concise review, and add amenity tags that improve the data layer.', }, 'add-photo': { label:'Add Photo', title:'Improve visual coverage.', body:'Use the AI framing guide to capture storefront, signage, menu, or interior context.', }, 'update-road': { label:'Update Road', title:'Report a road condition change.', body:'Tap the affected segment, describe the issue, and verify it with timestamped evidence.', }, 'update-address': { label:'Update Address', title:'Fix address or pin accuracy.', body:'Correct the address, street number, unit, or pin and capture signage proof.', }, campaign: { label:'Campaign mission', title:'Complete a paid survey request.', body:'Enterprise-funded missions pay higher GP after location and evidence checks pass.', }, }[typeKey]; const dismissKey = `govibe.missionTypeTip.v2.${typeKey}`; const [showTypeInfo, setShowTypeInfo] = React.useState(() => { try { return window.localStorage.getItem(dismissKey) !== '1'; } catch (e) { return true; } }); const distance = m.distance || fallbackMission.distance; const cp = m.cp ?? fallbackMission.cp; const title = m.title || fallbackMission.title; const daysAgo = m.daysAgo ?? fallbackMission.daysAgo; function dismissTypeInfo() { try { window.localStorage.setItem(dismissKey, '1'); } catch (e) {} setShowTypeInfo(false); } return ( <>
{/* route map */}
{/* park */} {/* route path */} {/* current location */}
{/* destination */}
{title}
{/* compass */}
NE
Distance
{distance}
Walk
2 min
Reward
+{cp} GP
i
Last verified {daysAgo} days ago. Your update keeps city data fresh for the next explorer.
{showTypeInfo && (
{typeInfo.label}
{typeInfo.title}
{typeInfo.body}
)}
); } /* ---- Step 2: Capture ---- */ function StepCapture({ mission, onNext, onBack }) { const capturePhoto = 'https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=900&h=1200&q=82'; const detections = [ { label:'SIGNAGE · 91%', x:'18%', y:'14%', w:'56%', h:'13%' }, { label:'ENTRY · 88%', x:'27%', y:'38%', w:'46%', h:'34%' }, { label:'MENU BOARD · 76%', x:'59%', y:'30%', w:'24%', h:'18%' }, ]; return ( <>
Step 2 of 3 · Capture evidence
{/* viewfinder */}
Coffee storefront capture
{/* corner crosshairs */} {[ {top:14, left:14, rot:0}, {top:14, right:14, rot:90}, {bottom:14, right:14, rot:180}, {bottom:14, left:14, rot:270}, ].map((p, i) => ( ))} {detections.map((d, i) => (
{d.label}
))} {/* AI status banner */}
AI Guide · Detecting evidence
{/* shutter row */}
); } /* ---- Step 3: AI prefill ---- */ function StepConfirm({ mission, onNext, onBack }) { const [name, setName] = React.useState(mission?.title || 'Mori Tea House'); const [category, setCategory] = React.useState('Tea house · Café'); const [hours, setHours] = React.useState('11:00 – 19:00'); const [moreOpen, setMoreOpen] = React.useState(false); const photo = poiPhoto('moriteahouse', 800, 400); return ( <>
{/* photo + AI detection summary */}
Captured storefront
AI detected · 92% confidence
{/* fields */} {}} aiTouched readOnly/> {moreOpen && }
); } function PlusInfoPanel() { const [active, setActive] = React.useState({ menu: true, sign: false, interior: false, }); function toggle(key) { setActive(v => ({ ...v, [key]: !v[key] })); } const uploadStyle = { height:74, border:'1px dashed var(--line-2)', borderRadius:10, background:'var(--bg-sunk)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:4, color:'var(--ink-3)', cursor:'pointer', }; return (
Extra photos and notes are reviewed before publishing. Unsafe or illegal content is blocked.
toggle('menu')} title="Menu photo" reward="+20 GP" help="Upload one clear photo of the latest menu or price board." > toggle('sign')} title="Exterior signage" reward="+20 GP" help="Capture the outside sign and type the visible sign text." > toggle('interior')} title="Interior context" reward="+20 GP" help="Add an interior photo and choose what it helps verify." >