// ================================================================= // pw-screens-publisher.jsx — Publisher Admin §1–4 // OverviewScreen · MyPlanScreen · ConsumerPlansScreen · SubscribersScreen // ================================================================= // ---------- helper: KPI grid ---------- const KpiGrid = ({ children }) => (
{children}
); // ================================================================= // §1 Overview // ================================================================= const OverviewScreen = ({ data }) => { const pub = window.PAYWALL_CONFIG.publisherContext; const me = (data.publishers || []).find(p => p.id === pub.id) || (data.publishers || [])[0] || {}; const activeSubs = me.subscribers || data.subscribers.filter(s => ["active", "trialing"].includes(s.status)).length; const coinsWeek = data.coinsByDay.slice(-7).reduce((a, b) => a + b, 0); const couponsRevealed = data.couponOffers.reduce((a, o) => a + o.claimed_count, 0); const brands = new Set(data.storeDiscountCodes.map(c => c.advertiser_id)).size; const tiersDefined = data.adTiers.filter(t => t.status === "active").length; const sub = data.publisherSubscription; const plan = data.platformPlans.find(p => p.plan_code === sub.plan_code); const cfg = data.adConfig; const tierName = (code) => (data.adTiers.find(t => t.tier_code === code) || {}).name || "—"; return ( {plan ? plan.name : sub.plan_code} plan}/> }/> }/> }/> }/> }/>
fmt.number(v)} axisLabels={["30d ago", "", "Today"]} showArea showGrid showYAxis curve="monotone"/>
{data.activity.map(a => { const I = window[a.icon] || IconInfo; return (
{a.title}
{a.body}
{a.at}
); })}
{[ ["Anonymous", cfg.anonymous_tier_code], ["Paid (single)", cfg.paid_tier_code], ["Day pass", cfg.day_pass_tier_code], ["Courtesy share", cfg.courtesy_tier_code], ["Subscription", cfg.subscription_tier_code], ].map(([label, code]) => (
{label} {tierName(code)} t.tier_code === code)} width="100%"/>
))}
); }; // ================================================================= // §2 My Plan (platform subscription) // ================================================================= const MyPlanScreen = ({ data, setData }) => { const sub = data.publisherSubscription; const current = data.platformPlans.find(p => p.plan_code === sub.plan_code); const [pending, setPending] = React.useState(null); const checkout = async (plan) => { setPending(plan.plan_code); window.__toast(`Opening ${sub.gateway} checkout for ${plan.name}…`); try { await window.__api.write("publisherCheckout", d => ({ ...d, publisherSubscription: { ...d.publisherSubscription, plan_code: plan.plan_code } }), { body: { plan_code: plan.plan_code, gateway: sub.gateway }, ok: `Subscribed to ${plan.name}`, err: "Checkout failed" }); } catch (e) {} setPending(null); }; const rank = (c) => ["starter", "growth", "scale", "enterprise"].indexOf(c); return (

{current ? current.name : sub.plan_code}

{sub.cancel_at_period_end && Cancels {fmt.date(sub.current_period_end)}}
{pwMoney(current?.price_fiat)}{current?.price_fiat ? `/${current.interval}` : ""} · via {sub.gateway} · renews {fmt.date(sub.current_period_end)}
{sub.subscription_id} }, { k: "Period", v: `${fmt.date(sub.current_period_start)} → ${fmt.date(sub.current_period_end)}` }, { k: "Gateway", v: {sub.gateway} }, ]}/>
{data.platformPlans.map(p => { const isCurrent = p.plan_code === sub.plan_code; const isUpgrade = rank(p.plan_code) > rank(sub.plan_code); return (
{p.name}
{isCurrent && Current}
{pwMoney(p.price_fiat)} {p.price_fiat ? /{p.interval} : null}
    {p.features.map((f, i) =>
  • {f}
    • )}
{isCurrent ? Current plan : p.price_fiat == null ? window.__toast("Contact sales — request sent")} style={{ width: "100%", justifyContent: "center" }}>Contact sales : checkout(p)} style={{ width: "100%", justifyContent: "center" }}> {pending === p.plan_code ? "Redirecting…" : isUpgrade ? "Upgrade" : "Switch"} }
); })}
); }; // ================================================================= // §2b Integration Kits // ================================================================= const IntegrationKitsScreen = ({ data }) => { const pub = window.PAYWALL_CONFIG.publisherContext; const apiBase = (window.__api.getConfig().baseUrl || "https://api.example.com").replace(/\/+$/, ""); const publisherId = pub.id || "pub_we72"; const snippet = ` `; const kits = [ { id: "web", title: "Website JavaScript", file: "paywall-ads.js", href: "sdk/paywall-ads.js", meta: "Browser snippet for CMS templates and article pages.", }, { id: "android", title: "Android SDK", file: "PaywallAds.kt", href: "sdk/PaywallAds.kt", meta: "Kotlin reference SDK for native Android apps.", }, { id: "ios", title: "iOS SDK", file: "PaywallAds.swift", href: "sdk/PaywallAds.swift", meta: "Swift reference SDK for native iOS apps.", }, { id: "flutter", title: "Flutter SDK", file: "paywall_ads.dart", href: "sdk/paywall_ads.dart", meta: "Dart reference SDK for Flutter apps.", }, ]; const downloadKit = (kit) => { const a = document.createElement("a"); a.href = kit.href; a.download = kit.file; document.body.appendChild(a); a.click(); a.remove(); window.__toast(`Downloaded ${kit.file}`); }; return (
{kits.map(k => (
{k.title}
{k.meta}
{k.file}
} onClick={() => downloadKit(k)} style={{ width: "100%", justifyContent: "center" }}>Download ))} 
{snippet}
} onClick={() => { navigator.clipboard?.writeText(snippet); window.__toast("Snippet copied"); }}>Copy snippet ); }; // ================================================================= // §3 Consumer Plans // ================================================================= const PlanFormDrawer = ({ open, onClose, plan, adTiers, onSave }) => { const blank = { name: "", price_fiat: 4.99, currency: "USD", interval: "month", scope: { all_access: true }, ad_tier_code: null, status: "active" }; const [f, setF] = React.useState(blank); React.useEffect(() => { if (open) setF(plan ? JSON.parse(JSON.stringify(plan)) : blank); }, [open, plan]); const set = (patch) => setF(prev => ({ ...prev, ...patch })); const scopeMode = f.scope?.all_access ? "all" : "specific"; const contentIds = (f.scope?.content_ids || []).join(", "); const tierOpts = [{ label: "Use class default", value: "" }, ...adTiers.filter(t => t.status === "active").map(t => ({ label: `${t.name} (${t.tier_code})`, value: t.tier_code }))]; return ( Cancel { onSave(f); onClose(); }}>{plan ? "Save changes" : "Create plan"} }>
set({ name: e.target.value })} placeholder="Digital Monthly"/> set({ price_fiat: Number(e.target.value) || 0 })}/>