/* Pieces shared by the client report page, the admin view and the agency
page.
Both audiences render findings, sections, the action plan, the roadmap,
the "beyond the website" cards and the proposal the same way — a finding
looks identical whether a client is reading it or Adi is. Kept in one file
so they cannot drift apart, and so neither page mounts a second React
root. */
function reportApiBase() {
const tag = document.querySelector('meta[name="lojo-api-base"]');
return ((tag && tag.content) || '').replace(/\/+$/, '');
}
/* fetch() that always yields something readable. A crashed function answers
with HTML; res.json() on that throws and the message would have said
nothing. Read as text first and keep the status. */
async function apiCall(path, options) {
const res = await fetch(reportApiBase() + path, options);
const raw = await res.text();
let data = null;
try { data = JSON.parse(raw); } catch (e) { /* not JSON */ }
if (!data) {
data = { ok: false, error: 'not-json', status: res.status,
message: `The server answered HTTP ${res.status} without JSON` +
(res.status === 404 ? ' — the API function is not deployed.' : ' — it may have crashed.') };
}
data.status = res.status;
return data;
}
const SEV_TONE = { crit: 'crit', warn: 'warn', ok: 'good' };
const CATEGORY_LABEL = { technical: 'Technical', content: 'Content', entity: 'Identity', authority: 'Authority', measurement: 'Measurement' };
const BUCKET_LABEL = { P0: 'Fix now', P1: 'This quarter', P2: 'Later' };
const BUCKET_TONE = { P0: 'crit', P1: 'warn', P2: 'good' };
const WINDOW_LABEL = { '30': 'First 30 days', '60': 'Days 31–60', '90': 'Days 61–90' };
const OWNER_LABEL = { developer: 'Developer', marketing: 'Marketing', founder: 'Founder', agency: 'Agency' };
const AREA_LABEL = { 'ai-command-centre': 'AI command centre', 'e-commerce': 'E-commerce', crm: 'CRM',
'customer-support': 'Customer support', sales: 'Sales', 'content-ops': 'Content ops', analytics: 'Analytics' };
const EFFORT_LABEL = { S: 'hours', M: 'days', L: 'weeks' };
function Finding({ f }) {
const tone = SEV_TONE[f.severity] || 'warn';
return (
{f.title}
{f.detail &&
{f.detail}
}
{f.fix &&
FIX · {f.fix}
}
);
}
function StatTile({ s }) {
const tone = s.tone ? `var(--${s.tone})` : 'var(--fg)';
return (
{s.label}
{s.value}
{s.note &&
{s.note}
}
);
}
/* Section bodies come back as paragraphs separated by blank lines. */
function Paragraphs({ text, style }) {
const parts = String(text || '').split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
return (
{parts.map((p, i) =>
);
}
function ActionPlan({ slug, actions, client, full, ctx }) {
ctx = ctx || {};
// Ticks: the server's record when verification is on (shared by everyone
// who opens the report), this browser's otherwise.
const serverTicks = actions.some((a) => a.manual_done !== undefined);
const [done, setDone] = React.useState(() => {
const local = readDone(slug);
if (!serverTicks) return local;
const out = {};
actions.forEach((a) => { out[a.id] = !!a.manual_done; });
return out;
});
const [category, setCategory] = React.useState('');
const [owner, setOwner] = React.useState('');
const [bucket, setBucket] = React.useState('');
const toggle = async (id) => {
const next = { ...done, [id]: !done[id] }; setDone(next); writeDone(slug, next);
if (serverTicks && (ctx.token || ctx.code)) {
const headers = { 'Content-Type': 'application/json' };
if (ctx.token) headers.Authorization = 'Bearer ' + ctx.token;
try {
const d = await apiCall('/api/verify', { method: 'POST', headers,
body: JSON.stringify({ action: 'tick-manual', slug, id, done: next[id], ...(ctx.code ? { code: ctx.code } : {}) }) });
if (d.ok && ctx.onTick) ctx.onTick(d.action);
} catch (e) { /* the local tick stands */ }
}
};
const shown = actions.filter((a) => (!category || a.category === category) && (!owner || a.owner === owner) && (!bucket || a.bucket === bucket));
const finished = actions.filter((a) => done[a.id]).length;
const title = `${client || slug} — AI visibility action plan`;
return (
The action plan
Every fix, in priority order, with who does it and how you will know it is done.
{serverTicks ? ' Tick items off here (saved to this report), or send the list to whoever does the work. Items a machine can check are re-checked against the live site on every re-scan.'
: ' Tick items off here (saved in this browser), or send the list to whoever does the work.'}
);
}
/* ------------------------------------------------ beyond the website */
function Beyond({ items }) {
return (
Beyond the website
Where the same thinking applies to how the business runs: the repetitive work an agent could do, the questions that should be a page and a prompt library, the data nothing reads.
{items.map((b, i) =>
{AREA_LABEL[b.area] || b.area}
{b.title}
{b.what}
{b.replaces &&
REPLACES · {b.replaces}
}
{b.stand_up &&
TO STAND UP · {b.stand_up}
}
{b.tools &&
TOOLS · {b.tools}
}
)}
);
}
/* ------------------------------------------------------------ the proposal */
function money(n) {
return '$' + Math.round(Number(n) || 0).toLocaleString('en-US');
}
function proposalToMarkdown(p, client, agency) {
const lines = [`# ${p.headline || 'Proposal'}`, '', `Prepared by ${agency || 'the agency'} for ${client || 'the client'}`, '', p.summary, '', '## What we propose', ''];
for (const o of p.opportunities || []) {
lines.push(`### ${o.title}`, '', `**The problem.** ${o.problem}`, '', `**What we recommend.** ${o.recommendation}`, '');
if (o.deliverables && o.deliverables.length) lines.push('Deliverables:', ...o.deliverables.map((d) => `- ${d}`), '');
lines.push(`Estimate: ${o.weeks} weeks · ${money(o.price_low)}–${money(o.price_high)} · ${o.owner === 'client' ? 'client-side' : 'agency'}`, '');
}
if (p.phases && p.phases.length) {
lines.push('## Phases', '');
for (const ph of p.phases) lines.push(`- **${ph.name}** — ${ph.weeks} weeks · ${money(ph.price_low)}–${money(ph.price_high)} · includes: ${(ph.includes || []).join(', ')}`);
lines.push('');
}
if (p.assumptions && p.assumptions.length) lines.push('## Assumptions', '', ...p.assumptions.map((a) => `- ${a}`), '');
if (p.pitch) lines.push('## The email', '', p.pitch, '');
return lines.join('\n');
}
function Proposal({ proposal, client, agency, slug }) {
const p = proposal;
const md = proposalToMarkdown(p, client, agency);
const total = (p.phases || []).reduce((acc, ph) => [acc[0] + (ph.price_low || 0), acc[1] + (ph.price_high || 0)], [0, 0]);
return (
Proposal draftin {agency || 'the agency'}’s voice · edit before sending
);
}
/* The full tier as tabs, for whichever page is showing it. */
/* Prose tabs that only make sense once an engine benchmark has run. Older
reports carry them with "no benchmark has been run" text; they are
hidden until there are figures, and the Engine benchmark tab says what
it takes. */
const BENCHMARK_PROSE = /^(benchmark|competitors|what engines say)/i;
function benchmarkReady(report) {
const b = report.benchmark || null;
return !!(b && (b.overall || (b.summary && b.summary.overall) || b.last_completed_run_id));
}
function fullTabs(report, ctx) {
ctx = ctx || {};
const full = report.full || {};
const ready = benchmarkReady(report);
const tabs = (full.sections || [])
.filter((s) => ready || !BENCHMARK_PROSE.test(String(s.tab || '')))
.map((s) => ({ tab: s.tab, render: () => }));
if (full.actions && full.actions.length) {
tabs.push({ tab: 'Action plan', render: () => });
tabs.push({ tab: '90-day roadmap', render: () => });
}
if (full.beyond && full.beyond.length) {
tabs.push({ tab: 'Beyond the website', render: () => });
}
if (full.proposal) {
tabs.push({ tab: 'Proposal', render: () => });
}
// The benchmark is an add-on to the full tier, listed after it. With
// payments on it shows what it is and the price until the add-on is
// bought (or comped); then "not run yet" until a run has finished.
const pay = report.pay || {};
const bstate = (pay.benchmark || {}).status || (ready ? 'ready' : 'none');
const ownsBenchmark = !pay.enabled || !!(pay.owned || {}).benchmark;
if (typeof BenchmarkTab === 'function' && (tabs.length > 0 || report.benchmark)) {
const pending = pay.enabled && ownsBenchmark && !ready && typeof BenchmarkPending === 'function';
tabs.push({ tab: 'Engine benchmark', secondary: true, addon: !ownsBenchmark, pending,
render: () => (!ownsBenchmark && typeof BenchmarkUpsell === 'function')
?
: pending
?
: });
}
// AI traffic (phase 4): present when the feature is on; "not measured
// yet" until a connection exists and the numbers were pulled.
if (typeof AttributionTab === 'function' && report.attribution && tabs.length > 0) {
tabs.push({ tab: 'AI traffic', secondary: true, render: () => });
}
return tabs;
}
/* The gate, as the visitor experiences it. */
function Unlock({ slug, status, onUnlocked, pay }) {
const [code, setCode] = React.useState('');
const [state, setState] = React.useState('idle');
const [message, setMessage] = React.useState('');
const submit = async (e) => {
if (e) e.preventDefault();
if (!code.trim() || state === 'sending') return;
setState('sending'); setMessage('');
try {
const data = await apiCall('/api/report', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ slug, code: code.trim() })
});
if (data.ok) { onUnlocked(data.report, code.trim()); return; }
setState('idle');
setMessage(data.message || 'That did not work. Check the code and try again.');
} catch (err) {
setState('idle');
setMessage('Could not reach the server. Try again in a moment.');
}
};
const preparing = status === 'generating' || status === 'requested' || status === 'queued';
// With payments on, a report nobody has bought is bought here; one that
// is bought (or was given out before payments existed) just needs its code.
const buyable = !preparing && pay && pay.enabled && !(pay.owned || {}).full_report;
const price = typeof payPrice === 'function' ? payPrice(pay, 'full_report') : '';
return (
{preparing ? 'Your detailed report is being prepared' : buyable ? 'Get the full report' : 'The detailed report'}
{preparing
? 'Every finding, the prioritised action plan, the 90-day roadmap and where to take it next. It is prepared within 24 hours, usually much sooner. This page updates itself when it is ready.'
: buyable
? `Every finding on the site, the prioritised action plan with owners and ready-to-paste files, the 90-day roadmap, re-scans that verify each fix, and where to take it next. One-time${price ? ', ' + price : ''}, for this website. Ready within 24 hours; this page unlocks itself.`
: 'Every finding, the prioritised action plan with owners, the 90-day roadmap, what engines say about you today, and where to take it next. It opens with the access code the team gives you.'}
{pay && pay.enabled
? 'This report is paid for. The code was shown at checkout and emailed; if the Lojo team or your agency arranged it, they have it. Can’t find it? Email the team and it is resent.'
: 'Don’t have a code? Adi or Colin give it out after a short conversation about what the findings mean for your business.'}