/* Publisher Console — B2B paid-data procurement workspace. Extracted from the personal "YOU" tab so it can stand on its own as a desktop-oriented surface (publisher.html). The phone app keeps only a lightweight read-only summary (see PublisherCampaignSummary, used by the YOU tab); full publisher management lives here. Reusable shape: - usePublisherWorkspace(): the shared campaign/application state + actions. NOTE: this hook now lives in components/campaign-data.jsx (the single source of truth) and is read off window. It is backed by one shared store, so the desktop console and the phone summary read/write the SAME campaign data — no more two independent snapshots. campaign-data.jsx must load before this file. - CampaignWorkspaceRouter(): the screen router (hub + subpages). Layout- agnostic — it just renders one panel at a time inside whatever frame the caller provides. - PublisherConsole(): the desktop frame (sidebar + wide content area) that hosts CampaignWorkspaceRouter. Mounted by publisher.html. This module depends on: - shared chrome on window: StatusBar, Pill (components/chrome.jsx) - the shared data model: usePublisherWorkspace (components/campaign-data.jsx) - styles.css tokens. */ /* ---------- Screen router (layout-agnostic) ---------- */ function CampaignWorkspaceRouter({ workspace, view, setView, onExit, exitLabel = 'Back', onNotify }) { const { verificationStatus, setVerificationStatus, verified, companyBalance, setCompanyBalance, applications, campaigns, liveCampaigns, approvedApplications, submitApplication, updateApplicationStatus, activateApplication, } = workspace; const [requirementStep, setRequirementStep] = React.useState(0); const [selectedApplication, setSelectedApplication] = React.useState(null); const [selectedCampaign, setSelectedCampaign] = React.useState(null); const [campaignReturnView, setCampaignReturnView] = React.useState('campaigns'); function failVerification() { setVerificationStatus('failed'); onNotify && onNotify( 'Publisher verification not approved', 'The platform could not confirm the submitted qualification papers. You can revise the company application and apply again.', 'Action' ); } function handleSubmit() { const app = submitApplication(); setSelectedApplication(app); setRequirementStep(0); setView('applications'); } function handleStatus(app, status) { setSelectedApplication(updateApplicationStatus(app, status)); } function handleActivate(app, method) { const campaign = activateApplication(app, method); setSelectedCampaign(campaign); setCampaignReturnView('campaigns'); setView('campaign-detail'); } if (view === 'verification') { return setView('hub')}/>; } if (view === 'requirement') { return setView('hub')} onSubmit={handleSubmit}/>; } if (view === 'monitor') { return setView('hub')} onVerify={() => setView('verification')} onOpen={(campaign) => { setSelectedCampaign(campaign); setCampaignReturnView('monitor'); setView('campaign-detail'); }}/>; } if (view === 'campaign-detail') { return setView(campaignReturnView)}/>; } if (view === 'account') { return setView('hub')}/>; } if (view === 'applications') { return setView('hub')} onVerify={() => setView('verification')} onOpen={setSelectedApplication} onApprove={(app) => handleStatus(app, 'approved')} onReject={(app) => handleStatus(app, 'rejected')} onActivate={handleActivate} selectedApplication={selectedApplication}/>; } if (view === 'campaigns') { return setView('hub')} onOpen={(campaign) => { setSelectedCampaign(campaign); setCampaignReturnView('campaigns'); setView('campaign-detail'); }}/>; } if (view === 'help' || view === 'terms' || view === 'contact') { return setView('hub')}/>; } return ( { if (!verified && !['verification', 'help', 'terms', 'contact'].includes(next)) setView('verification'); else if (next === 'requirement') { setRequirementStep(0); setView('requirement'); } else if (next === 'applications') { setSelectedApplication(null); setView('applications'); } else setView(next); }} /> ); } /* ---------- Desktop console frame ---------- */ function PublisherConsole() { const workspace = usePublisherWorkspace(); const [view, setView] = React.useState('hub'); const nav = [ ['hub', 'Overview'], ['requirement', 'Submit data application'], ['applications', 'My applications'], ['campaigns', 'My campaigns'], ['monitor', 'Monitor'], ['account', 'Company account'], ['verification', 'Verification'], ['help', 'Support'], ]; function go(next) { if (!workspace.verified && !['hub', 'verification', 'help', 'terms', 'contact'].includes(next)) setView('verification'); else setView(next); } return (
FOR BUSINESS · PAID DATA PROCUREMENT
Publisher Console
{workspace.liveCampaigns.length} live {workspace.approvedApplications}/{workspace.applications.length} approved
setView('hub')} exitLabel="Overview" />
); } /* ---------- Hub + subpages (shared) ---------- */ function CampaignHub({ onBack, backLabel = 'Back', verified, verificationStatus, liveCount, applicationCount, approvedApplications, campaignCount, companyBalance, onOpen }) { return (
{!verified && onOpen('verification')}/>}
onOpen('verification')}/> onOpen('requirement')}/> onOpen('monitor')}/> onOpen('account')}/> onOpen('applications')}/> onOpen('campaigns')}/>
onOpen('account')}/>
WHAT YOU BUY
You pay for the data result — not for people.
Campaigns deliver structured data (CSV / GeoJSON / API). You are buying verified facts about places, not contributor identities, names, or accounts. Contributors keep their own attribution and credits — those never transfer to you.
); } /* PublisherIntro — first-run / empty-state onboarding for the Publisher Console. Explains the product, what the buyer actually receives (structured data, not people), and the three-step lifecycle. Shown on the Overview hub while the account is still unverified (the empty state), and echoed in the locked subpage card. */ function PublisherIntro({ onVerify }) { const steps = [ ['1', 'Define an area', 'Draw a region and pick a data template (status, facade, access, hours).'], ['2', 'Platform review + crowd collection', 'We approve the request, then verified contributors collect and AI-validate it on the ground.'], ['3', 'Export the data result', 'Receive structured output — CSV / GeoJSON / API — ready to use.'], ]; return (
GET STARTED
Commission real-world data, on demand.
GoVibe turns a region you care about into a paid collection campaign. You define what to verify; a verified crowd collects it; you get back structured data results (CSV / GeoJSON / API).
{steps.map(s => (
{s[0]}
{s[1]}
{s[2]}
))}
DATA, NOT PEOPLE
You purchase the data result — never contributor identities, names, or credits. Contributors keep their own attribution and earn credits for their work; that stays with them.
{onVerify && }
); } function CampaignHubAction({ kind, label, status, disabled, liveCount, onClick }) { return ( ); } function CampaignIcon({ kind }) { const p = {stroke:'currentColor', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round', fill:'none'}; if (kind === 'verification') return ; if (kind === 'application') return ; if (kind === 'monitor') return ; if (kind === 'account') return ; if (kind === 'applications') return ; return ; } function MetalBadge({ small }) { return ( ✓ ); } function CompanyAccountCard({ balance, verified, onOpen }) { return (
COMPANY ACCOUNT
${balance.toFixed(0)}
5% volume discount unlocked · $18 rebate pending
{verified ? 'verified' : 'locked'}
{onOpen && }
); } function CampaignVerificationPage({ status, setStatus, onFail, onBack }) { const isReview = status === 'review'; const isVerified = status === 'verified'; return (
{isVerified ? (
Verified publisher
Company identity, contact domain, and qualification papers have passed platform review.
) : isReview ? ( <>
UNDER REVIEW
Platform investigation in progress
The team checks company registration, buyer identity, email domain, and uploaded qualification papers. Typical result: 1-2 business days.
) : ( <> {status === 'failed' &&
Application not approved
A notification was sent. Revise the documents and apply again.
}
{[ ['Company legal name', 'Northbridge Field Analytics Inc.'], ['Industry', 'Retail intelligence'], ['Use case', 'POI status and site condition collection'], ['Work email', 'ops@northbridge.example'], ].map(row => )}
Qualification papers
Business registration.pdf · Buyer authorization.pdf · Data-use policy.pdf
)}
); } function LockedCampaignCard({ onVerify }) { return (
Publisher verification required
Only verified company accounts can submit applications, fund approved requests, and monitor campaigns.
Once verified you commission a region and receive a structured data result (CSV / GeoJSON / API). You pay for the data, not for the contributors — they keep their own attribution and credits.
); } function CampaignRequirementFlow({ step, setStep, onBack, onSubmit }) { const steps = [ ['Template', 'Site Condition Survey', [['Template', 'Facade, access, surroundings'], ['Time', '~4 min/point'], ['Base', '$3/pt']]], ['Area', 'Daikanyama 0.47 km2', [['Points', '52-68'], ['Contributors', '34 nearby'], ['Coverage', '70% min']]], ['Configure', 'Priority, standard verification', [['Timeline', '7 days'], ['Depth', 'Photo + status'], ['Reward', '3x GP']]], ['Quote', 'Estimated total $295', [['Base fee', '$37.60'], ['Delivery', '$180'], ['QA + priority', '$77.40']]], ['Submit', 'Ready for platform review', [['Status', 'Application'], ['Payment', 'After approval'], ['Next', 'My Applications']]], ]; const current = steps[step]; return (
{steps.map((_, i) =>
)}
{current[0]}
{current[1]}
); } function CampaignApplicationsPage({ verified, applications, balance, onBack, onVerify, onOpen, onApprove, onReject, onActivate, selectedApplication }) { const selected = selectedApplication; return (
{!verified ? : selected ? ( <> {}}/>
{selected.status === 'review' && (
)} {selected.status === 'approved' && ( <> )} {selected.status === 'rejected' &&
Rejected applications can be revised by submitting a new data application with a narrower or safer scope.
} {selected.status === 'paid' &&
Payment complete. The campaign is now active and available in My Campaigns.
}
) : (
{applications.map(app => onOpen(app)}/>)}
)}
); } function ApplicationCard({ app, onClick }) { const tone = app.status === 'approved' || app.status === 'paid' ? 'teal' : undefined; return ( ); } function applicationStatusLabel(status) { if (status === 'review') return 'Review'; if (status === 'approved') return 'Approved'; if (status === 'paid') return 'Paid'; return 'Rejected'; } function CampaignMonitorPage({ verified, campaigns, onBack, onVerify, onOpen }) { return (
{!verified ? : ( )}
); } function CampaignDetailPage({ campaign, onBack }) { return (
Delivery map status
{[18,34,52,71].map((x,i) => )}
); } function CompanyAccountPage({ balance, setBalance, onBack }) { return (
{[ ['Deposit', '+$500', 'Company account top-up'], ['Campaign payment', '-$295', 'Daikanyama site condition'], ['Rebate', '+$18', 'Unused coverage guarantee'], ].map(row =>
{row[0]}
{row[2]}
{row[1]}
)}
); } function CampaignHistoryPage({ campaigns, onBack, onOpen }) { const active = campaigns.filter(c => c.status === 'Live'); const history = campaigns.filter(c => c.status !== 'Live'); return (

Active

{active.length}

History

{history.length}
{history.map(c => (
{c.title}
{c.status}
{c.id} · {c.area} · {c.coverage} coverage
))}
); } function CampaignCardList({ campaigns, empty, onOpen }) { if (!campaigns.length) { return
{empty}
; } return (
{campaigns.map(c => ( ))}
); } function CampaignSupportPage({ view, onBack }) { const title = view === 'help' ? 'Campaign Help' : view === 'terms' ? 'Campaign Terms' : 'Contact Support'; const rows = view === 'help' ? [['Verification', 'Required before submitting applications because campaigns create paid contributor missions.'], ['Payment', 'Use company balance for prepaid control or instant card payment after platform approval.'], ['Monitoring', 'Track coverage, spend, verified points, and remaining time.']] : view === 'terms' ? [['Coverage', 'Minimum coverage guarantee applies to eligible paid campaigns.'], ['Rebate', 'Undelivered guaranteed coverage can return as company account credit.'], ['Data use', 'Published requirements must follow platform safety and privacy rules.']] : [['Customer service', 'A campaign specialist will review the campaign, account, and payment context.'], ['Response time', 'Most publisher questions receive a response within one business day.']]; return (
{rows.map(row =>
{row[0]}
{row[1]}
)}
{view === 'contact' && }
); } function MetricGrid({ rows, compact }) { return (
{rows.map(row =>
{row[1]}
{row[0]}
)}
); } /* PubPageTop: shared back-header. Self-contained so this module does not depend on profile-screen.jsx load order. backLabel lets the console say "Overview". */ function PubPageTop({ title, sub, onBack, backLabel }) { return (
{onBack && }
{title}
{sub &&
{sub}
}
); } /* ---------- Lightweight read-only summary for the phone YOU tab ---------- */ function PublisherCampaignSummary({ onBack }) { const workspace = usePublisherWorkspace(); const live = workspace.liveCampaigns.length; const pending = workspace.applications.filter(a => a.status === 'review' || a.status === 'approved').length; const total = workspace.campaigns.length; return (
{[ ['Live', String(live)], ['Pending', String(pending)], ['Total', String(total)], ].map(row => (
{row[1]}
{row[0]}
))}
{workspace.campaigns.map(c => (
{c.title}
{c.status}
{c.id} · {c.area} · {c.coverage} coverage
))}
READ-ONLY ON MOBILE
Manage data procurement in the Publisher Console.
Verification, new data applications, payment, and campaign monitoring run in the desktop Publisher Console.
Open Publisher Console (desktop)
); } Object.assign(window, { // usePublisherWorkspace lives in components/campaign-data.jsx (shared store). CampaignWorkspaceRouter, PublisherConsole, PublisherCampaignSummary, // Shared subpage components (also useful for design-canvas previews): CampaignHub, PublisherIntro, CampaignHubAction, CampaignIcon, MetalBadge, CompanyAccountCard, CampaignVerificationPage, LockedCampaignCard, CampaignRequirementFlow, CampaignApplicationsPage, ApplicationCard, applicationStatusLabel, CampaignMonitorPage, CampaignDetailPage, CompanyAccountPage, CampaignHistoryPage, CampaignCardList, CampaignSupportPage, MetricGrid, });