@growth-labs/cms 0.1.0

package/src/ui/components/ShareStatsPanel.tsx

@@ -0,0 +1,721 @@
+// src/ui/components/ShareStatsPanel.tsx — Social Share stats panel + repoint (Task 8).
+//
+// Renders two sub-surfaces:
+//
+//   1. Stats panel — GET /api/share-links/stats
+//      • Groups: clicks + linkCount per kind; youtube sub-grouped by youtubeVideoId.
+//      • wae.status rendered as a live/partial/empty/unavailable banner (mirrors
+//        AnalyticsScreen's PartialBanner / EmptyPanel pattern).
+//      • clickCount: null → "—", NEVER "0" (WAE unavailable, not zero clicks).
+//      • NO conversion fields — clicks/traffic ONLY (§11 scope guard).
+//
+//   2. Recent links table — rendered from `links` passed in from the picker fetch
+//      (GET /api/share-links already fetched once by the pickers).
+//      Each row has a Repoint control:
+//        • An inline destination URL field + status select.
+//        • PATCH /api/share-links/:id  body: { destinationUrl, status? }
+//        • On success: show the returned new taggedUrl + status inline.
+//        • NO client-side UTM rebuild — the server recomputes and returns the new taggedUrl.
+//
+// SCOPE GUARDS (spec §11 + Task 8):
+//   - No conversion / signup / subscriber field anywhere.
+//   - clickCount === null → "—", never 0.
+//   - PATCH only sends { destinationUrl, status? } — never re-builds UTMs client-side.
+//   - No @growth-labs/analytics import.
+//
+// Presentation: Broadsheet idiom — .panel cards with .card-title + .masthead-rule
+// headers, the .tbl + .tnum stats table, .pill .pdot status chips, .input / .selectbox /
+// .field-label / .btn for the inline repoint form, and broadsheet banner tints for
+// the WAE status. All fetch / PATCH / reducer wiring is unchanged.
+
+import { useCallback, useEffect, useReducer } from 'react'
+import { Icon } from '../icons.js'
+
+// ---------------------------------------------------------------------------
+// Local type mirrors (UI-owned — do not import from @growth-labs/analytics)
+// SOURCE OF TRUTH: @growth-labs/analytics src/routes/share-links-stats.ts
+// ---------------------------------------------------------------------------
+
+interface StatsGroup {
+	kind: string
+	youtubeVideoId: string | null
+	linkCount: number
+	/** null when WAE credentials are not bound (wae.status:'unavailable') — render "—". */
+	clickCount: number | null
+}
+
+interface WaeStatus {
+	status: 'live' | 'partial' | 'empty' | 'unavailable'
+	error: string | null
+}
+
+interface ShareLinksStatsResponse {
+	groups: StatsGroup[]
+	wae: WaeStatus
+}
+
+// SOURCE OF TRUTH: @growth-labs/analytics src/routes/share-links-patch.ts
+interface RepointResponse {
+	id: string
+	kind: string
+	shortCode: string
+	destinationUrl: string
+	taggedUrl: string
+	utmSource: string
+	utmMedium: string
+	utmCampaign: string
+	utmContent: string
+	utmTerm: string
+	youtubeVideoId: string | null
+	status: LinkStatus
+}
+
+/** A recent share link row (from GET /api/share-links → links). */
+export interface RecentLink {
+	id: string
+	kind: string
+	shortCode: string
+	destinationUrl: string
+	taggedUrl: string
+	placement: string
+	youtubeVideoId: string | null
+	status: LinkStatus
+	createdAt?: string
+}
+
+type LinkStatus = 'active' | 'paused' | 'inactive'
+
+// ---------------------------------------------------------------------------
+// Stats panel reducer
+// ---------------------------------------------------------------------------
+
+interface StatsState {
+	loading: boolean
+	error: string | null
+	data: ShareLinksStatsResponse | null
+}
+
+type StatsAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; data: ShareLinksStatsResponse }
+	| { type: 'fetch-error'; error: string }
+
+function statsReducer(state: StatsState, action: StatsAction): StatsState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, data: action.data }
+		case 'fetch-error':
+			return { loading: false, error: action.error, data: null }
+		default:
+			return state
+	}
+}
+
+// ---------------------------------------------------------------------------
+// ShareStatsPanel
+// ---------------------------------------------------------------------------
+
+interface ShareStatsPanelProps {
+	/** Recent link rows from GET /api/share-links (fetched once by the pickers). */
+	recentLinks: RecentLink[]
+	/** Called when the pickers data should be refreshed (after a repoint). */
+	onRefresh?: () => void
+}
+
+export function ShareStatsPanel({ recentLinks, onRefresh }: ShareStatsPanelProps) {
+	const [stats, dispatchStats] = useReducer(statsReducer, {
+		loading: true,
+		error: null,
+		data: null,
+	})
+
+	const fetchStats = useCallback(async () => {
+		dispatchStats({ type: 'fetch-start' })
+		try {
+			const res = await fetch('/api/share-links/stats')
+			if (!res.ok) {
+				dispatchStats({
+					type: 'fetch-error',
+					error: `${res.status} ${res.statusText}`,
+				})
+				return
+			}
+			const data = (await res.json()) as ShareLinksStatsResponse
+			dispatchStats({ type: 'fetch-ok', data })
+		} catch (err) {
+			dispatchStats({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	useEffect(() => {
+		void fetchStats()
+	}, [fetchStats])
+
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)', marginTop: 32 }}>
+			{/* Stats by kind */}
+			<div className="panel" style={{ overflow: 'hidden' }}>
+				<div style={{ padding: '15px 18px 12px' }}>
+					<div className="card-title">Click stats by context</div>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+				<div style={{ padding: 18 }}>
+					<StatsBody stats={stats} onRetry={() => void fetchStats()} />
+				</div>
+			</div>
+
+			{/* Recent links + repoint */}
+			<div className="panel" style={{ overflow: 'hidden' }}>
+				<div style={{ padding: '15px 18px 12px' }}>
+					<div className="card-title">Recent links</div>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+				{recentLinks.length > 0 ? (
+					<RecentLinksTable links={recentLinks} onRefresh={onRefresh} />
+				) : (
+					!stats.loading && (
+						<div style={{ padding: 18 }}>
+							<EmptyPanel icon="link" message="No links minted yet — mint your first link above." />
+						</div>
+					)
+				)}
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// StatsBody
+// ---------------------------------------------------------------------------
+
+function StatsBody({ stats, onRetry }: { stats: StatsState; onRetry: () => void }) {
+	if (stats.loading) {
+		return (
+			<div className="help" style={{ margin: 0 }}>
+				Loading stats…
+			</div>
+		)
+	}
+
+	if (stats.error) {
+		return (
+			<div
+				style={{
+					fontSize: 13,
+					color: 'var(--red)',
+					display: 'flex',
+					alignItems: 'center',
+					gap: 12,
+				}}
+			>
+				{stats.error}
+				<button type="button" className="btn sm" onClick={onRetry}>
+					<Icon name="refresh" size={13} />
+					Retry
+				</button>
+			</div>
+		)
+	}
+
+	if (!stats.data) return null
+
+	const { groups, wae } = stats.data
+
+	// WAE banner: live / partial / empty / unavailable
+	const waeEl = buildWaeBanner(wae)
+
+	if (groups.length === 0) {
+		return (
+			<>
+				{waeEl}
+				<EmptyPanel icon="chart" message="No share-link stats yet." />
+			</>
+		)
+	}
+
+	return (
+		<>
+			{waeEl}
+			<StatsTable groups={groups} />
+		</>
+	)
+}
+
+function buildWaeBanner(wae: WaeStatus): React.ReactNode {
+	switch (wae.status) {
+		case 'live':
+			// No banner for fully live — clean
+			return null
+		case 'partial':
+			return (
+				<PartialBanner message="Click data is partially available — some WAE credentials are missing." />
+			)
+		case 'empty':
+			return <InfoBanner message="No click data yet — the analytics window is empty." />
+		case 'unavailable':
+			return (
+				<InfoBanner message="Click counts unavailable — WAE credentials are not bound on this worker. clickCount shows — until configured." />
+			)
+		default:
+			return null
+	}
+}
+
+// ---------------------------------------------------------------------------
+// StatsTable — broadsheet .tbl; groups by kind, youtube sub-grouped by videoId
+// ---------------------------------------------------------------------------
+
+function StatsTable({ groups }: { groups: StatsGroup[] }) {
+	// Group rows: for youtube, sub-group by youtubeVideoId; others are flat.
+	// Non-youtube kinds show one row per kind.
+	// Youtube kinds show one row per youtubeVideoId (or "all videos" if null).
+	return (
+		<div style={{ overflowX: 'auto' }}>
+			<table className="tbl">
+				<thead>
+					<tr>
+						<th>Context</th>
+						<th>Sub-key</th>
+						<th style={{ textAlign: 'right' }}>Links</th>
+						<th style={{ textAlign: 'right' }}>Clicks</th>
+					</tr>
+				</thead>
+				<tbody>
+					{groups.map((g) => (
+						<tr key={`${g.kind}:${g.youtubeVideoId ?? ''}`} style={{ cursor: 'default' }}>
+							<td style={{ fontWeight: 500, color: 'var(--ink)' }}>{kindLabel(g.kind)}</td>
+							<td className="mono" style={{ color: 'var(--ink-muted)', fontSize: 12 }}>
+								{g.kind === 'youtube' && g.youtubeVideoId ? g.youtubeVideoId : '—'}
+							</td>
+							<td className="tnum" style={{ textAlign: 'right' }}>
+								{g.linkCount.toLocaleString('en-US')}
+							</td>
+							{/* clickCount: null → "—", never "0" (WAE-unavailable guard) */}
+							<td
+								className="tnum"
+								style={{
+									textAlign: 'right',
+									color: g.clickCount === null ? 'var(--ink-muted)' : 'var(--ink)',
+								}}
+							>
+								{g.clickCount === null ? '—' : g.clickCount.toLocaleString('en-US')}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	)
+}
+
+function kindLabel(kind: string): string {
+	switch (kind) {
+		case 'author-social':
+			return 'Author Social'
+		case 'owned-social':
+			return 'Owned Social'
+		case 'youtube':
+			return 'YouTube'
+		case 'newsletter':
+			return 'Newsletter'
+		default:
+			return kind
+	}
+}
+
+// ---------------------------------------------------------------------------
+// RecentLinksTable — with per-link Repoint control
+// ---------------------------------------------------------------------------
+
+function RecentLinksTable({ links, onRefresh }: { links: RecentLink[]; onRefresh?: () => void }) {
+	return (
+		<div>
+			{links.map((link, i) => (
+				<RecentLinkRow
+					key={link.id}
+					link={link}
+					last={i === links.length - 1}
+					onRefresh={onRefresh}
+				/>
+			))}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// RecentLinkRow — single row with inline Repoint toggle
+// ---------------------------------------------------------------------------
+
+interface RepointState {
+	open: boolean
+	destinationUrl: string
+	status: LinkStatus
+	submitting: boolean
+	error: string | null
+	/** Returned from the PATCH — new taggedUrl after repoint. */
+	newTaggedUrl: string | null
+	newStatus: LinkStatus | null
+}
+
+type RepointAction =
+	| { type: 'open'; destinationUrl: string; status: LinkStatus }
+	| { type: 'close' }
+	| { type: 'set-url'; value: string }
+	| { type: 'set-status'; value: LinkStatus }
+	| { type: 'submit-start' }
+	| { type: 'submit-ok'; taggedUrl: string; status: LinkStatus }
+	| { type: 'submit-error'; error: string }
+
+function repointReducer(state: RepointState, action: RepointAction): RepointState {
+	switch (action.type) {
+		case 'open':
+			return {
+				...state,
+				open: true,
+				destinationUrl: action.destinationUrl,
+				status: action.status,
+				error: null,
+				newTaggedUrl: null,
+				newStatus: null,
+			}
+		case 'close':
+			return { ...state, open: false, error: null }
+		case 'set-url':
+			return { ...state, destinationUrl: action.value }
+		case 'set-status':
+			return { ...state, status: action.value }
+		case 'submit-start':
+			return { ...state, submitting: true, error: null }
+		case 'submit-ok':
+			return {
+				...state,
+				submitting: false,
+				newTaggedUrl: action.taggedUrl,
+				newStatus: action.status,
+				open: false,
+			}
+		case 'submit-error':
+			return { ...state, submitting: false, error: action.error }
+		default:
+			return state
+	}
+}
+
+function RecentLinkRow({
+	link,
+	last,
+	onRefresh,
+}: {
+	link: RecentLink
+	last: boolean
+	onRefresh?: () => void
+}) {
+	const [rp, dispatchRp] = useReducer(repointReducer, {
+		open: false,
+		destinationUrl: link.destinationUrl,
+		status: link.status,
+		submitting: false,
+		error: null,
+		newTaggedUrl: null,
+		newStatus: null,
+	})
+
+	const handleSubmitRepoint = useCallback(async () => {
+		if (!rp.destinationUrl.trim()) {
+			dispatchRp({ type: 'submit-error', error: 'Destination URL is required.' })
+			return
+		}
+		dispatchRp({ type: 'submit-start' })
+		try {
+			const res = await fetch(`/api/share-links/${link.id}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				// Only send destinationUrl + status — server recomputes UTMs.
+				// Do NOT rebuild UTMs client-side.
+				body: JSON.stringify({ destinationUrl: rp.destinationUrl.trim(), status: rp.status }),
+			})
+			if (!res.ok) {
+				const text = await res.text().catch(() => res.statusText)
+				dispatchRp({ type: 'submit-error', error: `${res.status}: ${text}` })
+				return
+			}
+			const data = (await res.json()) as RepointResponse
+			dispatchRp({ type: 'submit-ok', taggedUrl: data.taggedUrl, status: data.status })
+			onRefresh?.()
+		} catch (err) {
+			dispatchRp({ type: 'submit-error', error: String(err) })
+		}
+	}, [link.id, rp.destinationUrl, rp.status, onRefresh])
+
+	// Effective taggedUrl / status — prefer the post-repoint value if available
+	const displayTaggedUrl = rp.newTaggedUrl ?? link.taggedUrl
+	const displayStatus = rp.newStatus ?? link.status
+
+	return (
+		<div style={{ borderBottom: last ? 'none' : '1px solid var(--border-soft)' }}>
+			{/* Row summary */}
+			<div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '13px 18px' }}>
+				{/* Kind tag */}
+				<span className="type-tag" style={{ flexShrink: 0, marginTop: 2 }}>
+					{kindLabel(link.kind)}
+				</span>
+
+				{/* Main info */}
+				<div style={{ flex: 1, minWidth: 0 }}>
+					<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+						<code
+							className="mono"
+							style={{
+								fontSize: 13,
+								fontWeight: 600,
+								color: 'var(--accent)',
+								wordBreak: 'break-all',
+							}}
+						>
+							/{link.shortCode}
+						</code>
+						<StatusBadge status={displayStatus} />
+					</div>
+					{/* Destination + tagged URL */}
+					<div
+						className="mono"
+						style={{
+							fontSize: 11,
+							color: 'var(--ink-muted)',
+							wordBreak: 'break-all',
+							marginBottom: 3,
+						}}
+					>
+						<span style={{ fontWeight: 600 }}>→</span> {link.destinationUrl}
+					</div>
+					{rp.newTaggedUrl ? (
+						<div
+							className="mono"
+							style={{
+								fontSize: 11,
+								color: 'var(--green)',
+								wordBreak: 'break-all',
+								marginBottom: 2,
+							}}
+						>
+							<span style={{ fontWeight: 600 }}>New tagged:</span> {displayTaggedUrl}
+						</div>
+					) : (
+						<div
+							className="mono"
+							style={{ fontSize: 11, color: 'var(--ink-faint)', wordBreak: 'break-all' }}
+						>
+							<span style={{ color: 'var(--ink-muted)' }}>Tagged:</span> {displayTaggedUrl}
+						</div>
+					)}
+					{link.placement && (
+						<div className="kicker" style={{ marginTop: 4 }}>
+							placement · {link.placement}
+						</div>
+					)}
+				</div>
+
+				{/* Repoint toggle */}
+				<button
+					type="button"
+					className={`btn sm${rp.open ? ' primary' : ''}`}
+					onClick={() =>
+						rp.open
+							? dispatchRp({ type: 'close' })
+							: dispatchRp({
+									type: 'open',
+									destinationUrl: link.destinationUrl,
+									status: displayStatus,
+								})
+					}
+					style={{ flexShrink: 0 }}
+					title="Repoint this link to a new destination"
+				>
+					<Icon name="edit" size={13} />
+					Repoint
+				</button>
+			</div>
+
+			{/* Repoint panel (inline) */}
+			{rp.open && (
+				<div
+					className="fade-only"
+					style={{
+						padding: '14px 18px 16px',
+						borderTop: '1px solid var(--border)',
+						background: 'var(--panel-2)',
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 12,
+					}}
+				>
+					<div className="kicker">Repoint /{link.shortCode}</div>
+					<p className="help" style={{ margin: 0 }}>
+						Change the destination URL. The server recomputes the tagged URL and preserves the share
+						ID — existing posted links keep resolving.
+					</p>
+
+					{/* Destination URL */}
+					<div>
+						<span className="field-label">New destination URL</span>
+						<input
+							type="url"
+							className="input"
+							value={rp.destinationUrl}
+							onChange={(e) => dispatchRp({ type: 'set-url', value: e.target.value })}
+							placeholder="https://fronts.co/…"
+						/>
+					</div>
+
+					{/* Status select */}
+					<div>
+						<span className="field-label">Status</span>
+						<select
+							className="selectbox"
+							value={rp.status}
+							onChange={(e) =>
+								dispatchRp({ type: 'set-status', value: e.target.value as LinkStatus })
+							}
+						>
+							<option value="active">active</option>
+							<option value="paused">paused</option>
+							<option value="inactive">inactive</option>
+						</select>
+					</div>
+
+					{/* Error */}
+					{rp.error && (
+						<div
+							style={{
+								fontSize: 12.5,
+								color: 'var(--red)',
+								padding: '8px 12px',
+								background: 'var(--red-tint)',
+								borderRadius: 'var(--radius-sm)',
+								border: '1px solid color-mix(in srgb, var(--red) 25%, transparent)',
+							}}
+						>
+							{rp.error}
+						</div>
+					)}
+
+					{/* Actions */}
+					<div style={{ display: 'flex', gap: 8 }}>
+						<button
+							type="button"
+							className="btn sm primary"
+							onClick={() => void handleSubmitRepoint()}
+							disabled={rp.submitting || !rp.destinationUrl.trim()}
+						>
+							<Icon name="refresh" size={13} />
+							{rp.submitting ? 'Repointing…' : 'Repoint'}
+						</button>
+						<button type="button" className="btn sm" onClick={() => dispatchRp({ type: 'close' })}>
+							Cancel
+						</button>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// StatusBadge — broadsheet .pill with leading .pdot
+// ---------------------------------------------------------------------------
+
+// Map link status → broadsheet pill variant.
+const STATUS_PILL: Record<LinkStatus, string> = {
+	active: 'published',
+	paused: 'review',
+	inactive: 'draft',
+}
+
+function StatusBadge({ status }: { status: LinkStatus }) {
+	const cls = STATUS_PILL[status] ?? 'draft'
+	return (
+		<span className={`pill ${cls}`}>
+			<span className="pdot" />
+			{status}
+		</span>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Shared micro-components
+// ---------------------------------------------------------------------------
+
+function EmptyPanel({
+	icon,
+	message,
+}: {
+	icon: Parameters<typeof Icon>[0]['name']
+	message: string
+}) {
+	return (
+		<div
+			style={{
+				border: '1px solid var(--border)',
+				borderRadius: 'var(--radius)',
+				padding: '28px 20px',
+				textAlign: 'center',
+				fontSize: 13,
+				color: 'var(--ink-muted)',
+				background: 'var(--panel-2)',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				gap: 8,
+			}}
+		>
+			<Icon name={icon} size={22} style={{ color: 'var(--border)', opacity: 0.7 }} />
+			<span>{message}</span>
+		</div>
+	)
+}
+
+function PartialBanner({ message }: { message: string }) {
+	return (
+		<div
+			style={{
+				marginBottom: 14,
+				padding: '9px 14px',
+				background: 'var(--amber-tint)',
+				border: '1px solid color-mix(in srgb, var(--amber) 25%, transparent)',
+				borderRadius: 'var(--radius-sm)',
+				fontSize: 12.5,
+				color: 'var(--amber)',
+				display: 'flex',
+				alignItems: 'center',
+				gap: 8,
+			}}
+		>
+			<Icon name="bolt" size={13} />
+			{message}
+		</div>
+	)
+}
+
+function InfoBanner({ message }: { message: string }) {
+	return (
+		<div
+			style={{
+				marginBottom: 14,
+				padding: '9px 14px',
+				background: 'var(--panel-2)',
+				border: '1px solid var(--border)',
+				borderRadius: 'var(--radius-sm)',
+				fontSize: 12.5,
+				color: 'var(--ink-muted)',
+				display: 'flex',
+				alignItems: 'center',
+				gap: 8,
+			}}
+		>
+			<Icon name="bolt" size={13} />
+			{message}
+		</div>
+	)
+}