@growth-labs/cms 0.1.0

package/src/ui/screens/SocialShareScreen.tsx

@@ -0,0 +1,670 @@
+// src/ui/screens/SocialShareScreen.tsx — Social Share builder screen (P6-B Tasks 6–8).
+//
+// Top-level screen that fills the P1 'social-share' ScreenRegistry slot.
+// Provides:
+//   - 4-way mode selector (author-social / owned-social / youtube / newsletter)
+//   - Per-mode form rendered from relevantFields(mode)
+//   - Advanced toggle (placement / boostMode / promoCode)
+//   - Destination URL field (shared across all modes)
+//   - Content picker (GET /admin/api/content) for per-content pre-fill (Task 7)
+//   - Author picker (GET /api/share-links → authors) (Task 7)
+//   - Handle picker (GET /api/share-links → handles, isBrandAccount filter for owned-social) (Task 7)
+//   - Submit → POST /api/share-links/batch → paste-ready output block
+//   - Stats panel (GET /api/share-links/stats) — clicks-only, wae.status banner (Task 8)
+//   - Recent links table with per-link Repoint (PATCH /api/share-links/:id) (Task 8)
+//
+// SCOPE GUARDS (spec §11):
+//   - No @growth-labs/analytics import — calls the analytics routes over fetch.
+//   - No UTM computation client-side — the server owns UTMs.
+//   - No LLM / drafted copy — links only.
+//   - No conversion metrics — only clicks/linkCount (Task 8 scope guard).
+//   - clickCount === null → "—", never 0 (WAE unavailable guard).
+//   - goBase is configurable (defaults to origin /go; go.fronts.co at cutover).
+//
+// Presentation: Broadsheet idiom — page-head/page-title/page-sub header, the .seg
+// context switcher, a .panel.panel-pad builder card with .field-label/.input/.selectbox
+// fields, the advanced disclosure as a nested .panel, .btn.primary submit, and the
+// paste-ready output as a .panel with a .card-title + .masthead-rule header. All form
+// state, fetches, and the server-owned UTM batch wiring are unchanged.
+//
+// Registry mount and per-content Share action are Task 9.
+
+import { useCallback, useEffect, useReducer, useState } from 'react'
+import { AuthorPicker, ContentPicker, HandlePicker } from '../components/SharePickers.js'
+import { type RecentLink, ShareStatsPanel } from '../components/ShareStatsPanel.js'
+import { Icon } from '../icons.js'
+import {
+	BOOST_MODES,
+	type BoostMode,
+	buildBatchPayloadFrom,
+	formatShareOutput,
+	initShareForm,
+	type LinkResult,
+	relevantFields,
+	SHARE_MODES,
+	type ShareFormState,
+	type ShareMode,
+	type ShareOutput,
+	SOCIAL_PLACEMENT_OPTIONS,
+	SOCIAL_PLATFORM_OPTIONS,
+	shareFormReducer,
+	toPlainText,
+	YOUTUBE_BUNDLE_PLACEMENTS,
+} from './social-share-data.js'
+
+// ---------------------------------------------------------------------------
+// Mode label map
+// ---------------------------------------------------------------------------
+
+const MODE_LABELS: Record<ShareMode, string> = {
+	'author-social': 'Author Social',
+	'owned-social': 'Owned Social',
+	youtube: 'YouTube',
+	newsletter: 'Newsletter',
+}
+
+// ---------------------------------------------------------------------------
+// Screen component
+// ---------------------------------------------------------------------------
+
+export function SocialShareScreen() {
+	const [state, dispatch] = useReducer(
+		shareFormReducer,
+		{ mode: 'author-social' as ShareMode },
+		(init) => initShareForm(init.mode),
+	)
+
+	const [submitting, setSubmitting] = useState(false)
+	const [submitError, setSubmitError] = useState<string | null>(null)
+	const [output, setOutput] = useState<ShareOutput | null>(null)
+	const [copied, setCopied] = useState(false)
+
+	// Recent links — fetched from GET /api/share-links (same endpoint the pickers use).
+	// Used by the ShareStatsPanel for the Repoint affordance.
+	// The pickers fetch independently; this fetch is for the links list only.
+	const [recentLinks, setRecentLinks] = useState<RecentLink[]>([])
+
+	const fetchRecentLinks = useCallback(async () => {
+		try {
+			const res = await fetch('/api/share-links')
+			if (!res.ok) return
+			const data = (await res.json()) as { links?: RecentLink[] }
+			setRecentLinks(data.links ?? [])
+		} catch {
+			// Non-fatal — stats panel shows empty recent links if this fails
+		}
+	}, [])
+
+	// Fetch on mount; re-fetch is triggered by handleLinksRefresh (direct call).
+	useEffect(() => {
+		void fetchRecentLinks()
+	}, [fetchRecentLinks])
+
+	// Called by ShareStatsPanel after a successful repoint to refresh the list.
+	const handleLinksRefresh = useCallback(() => {
+		void fetchRecentLinks()
+	}, [fetchRecentLinks])
+
+	// Derive goBase from the current origin — relative /go path until cutover.
+	// At cutover this becomes 'https://go.fronts.co' via workspace/site config.
+	const goBase = typeof window !== 'undefined' ? `${window.location.origin}/go` : '/go'
+
+	const fields = relevantFields(state.mode)
+
+	const handleModeChange = (mode: ShareMode) => {
+		dispatch({ type: 'set-mode', mode })
+		setOutput(null)
+		setSubmitError(null)
+	}
+
+	const handleSubmit = useCallback(
+		async (e: React.FormEvent) => {
+			e.preventDefault()
+			setSubmitError(null)
+			setOutput(null)
+
+			const result = buildBatchPayloadFrom(state)
+			if (!result.ok) {
+				setSubmitError(result.error)
+				return
+			}
+
+			setSubmitting(true)
+			try {
+				const res = await fetch('/api/share-links/batch', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(result.payload),
+				})
+
+				if (!res.ok) {
+					const text = await res.text().catch(() => res.statusText)
+					setSubmitError(`Server error ${res.status}: ${text}`)
+					return
+				}
+
+				const data = (await res.json()) as { links: LinkResult[] }
+				setOutput(formatShareOutput(data.links, { goBase }))
+			} catch (err) {
+				setSubmitError(String(err))
+			} finally {
+				setSubmitting(false)
+			}
+		},
+		[state, goBase],
+	)
+
+	const handleCopyAll = useCallback(() => {
+		if (!output) return
+		void navigator.clipboard.writeText(toPlainText(output)).then(() => {
+			setCopied(true)
+			setTimeout(() => setCopied(false), 2000)
+		})
+	}, [output])
+
+	return (
+		<div className="page fade-in social-share-screen" style={{ maxWidth: 760 }}>
+			{/* Header */}
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">Social Share</h1>
+					<div className="page-sub">
+						Mint go-links for social promotion — paste-ready per context.
+					</div>
+				</div>
+			</div>
+
+			{/* Builder */}
+			<form onSubmit={(e) => void handleSubmit(e)}>
+				<div
+					className="panel panel-pad"
+					style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}
+				>
+					{/* Mode selector */}
+					<div>
+						<span className="field-label">Context</span>
+						<ModeSegment value={state.mode} onChange={handleModeChange} />
+					</div>
+
+					{/* Content picker — pre-fills destination URL + slug + type from content library */}
+					<ContentPicker dispatch={dispatch} />
+
+					{/* Destination URL — always visible; may be pre-filled by ContentPicker */}
+					<div>
+						<span className="field-label">
+							Destination URL <span className="req">*</span>
+						</span>
+						<input
+							type="url"
+							className="input"
+							required
+							value={state.destinationUrl}
+							onChange={(e) =>
+								dispatch({ type: 'set-field', field: 'destinationUrl', value: e.target.value })
+							}
+							placeholder="https://fronts.co/article/my-piece"
+						/>
+					</div>
+
+					{/* Per-mode fields */}
+					<PerModeFields state={state} dispatch={dispatch} fields={fields} />
+
+					{/* Advanced disclosure */}
+					<AdvancedSection state={state} dispatch={dispatch} fields={fields} />
+
+					{/* Validation / server error */}
+					{submitError && (
+						<div
+							style={{
+								padding: '10px 14px',
+								background: 'var(--red-tint)',
+								border: '1px solid color-mix(in srgb, var(--red) 25%, transparent)',
+								borderRadius: 'var(--radius-sm)',
+								fontSize: 13,
+								color: 'var(--red)',
+							}}
+						>
+							{submitError}
+						</div>
+					)}
+
+					{/* Submit */}
+					<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+						<button type="submit" className="btn primary" disabled={submitting}>
+							<Icon name="share" size={15} />
+							{submitting ? 'Minting…' : 'Mint link(s)'}
+						</button>
+					</div>
+				</div>
+			</form>
+
+			{/* Output block */}
+			{output && (
+				<div style={{ marginTop: 'var(--gap)' }}>
+					<ShareOutputBlock output={output} onCopyAll={handleCopyAll} copied={copied} />
+				</div>
+			)}
+
+			{/* Stats panel (Task 8) — clicks-only + repoint affordance */}
+			<ShareStatsPanel recentLinks={recentLinks} onRefresh={handleLinksRefresh} />
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// ModeSegment — 4-way broadsheet .seg context switcher
+// ---------------------------------------------------------------------------
+
+function ModeSegment({ value, onChange }: { value: ShareMode; onChange: (m: ShareMode) => void }) {
+	return (
+		<div className="seg">
+			{SHARE_MODES.map((mode) => (
+				<button
+					key={mode}
+					type="button"
+					className={value === mode ? 'on' : ''}
+					onClick={() => onChange(mode)}
+				>
+					{MODE_LABELS[mode]}
+				</button>
+			))}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// PerModeFields — renders only the fields relevant to the current mode
+// ---------------------------------------------------------------------------
+
+function PerModeFields({
+	state,
+	dispatch,
+	fields,
+}: {
+	state: ShareFormState
+	dispatch: React.Dispatch<Parameters<typeof shareFormReducer>[1]>
+	fields: string[]
+}) {
+	const has = (f: string) => fields.includes(f)
+
+	return (
+		<>
+			{/* campaign — author-social, owned-social */}
+			{has('campaign') && (
+				<div>
+					<span className="field-label">
+						Campaign <span className="req">*</span>
+					</span>
+					<input
+						type="text"
+						className="input"
+						required
+						value={state.campaign}
+						onChange={(e) =>
+							dispatch({ type: 'set-field', field: 'campaign', value: e.target.value })
+						}
+						placeholder="e.g. june-launch"
+					/>
+				</div>
+			)}
+
+			{/* platform — author-social, owned-social */}
+			{has('platform') && (
+				<div>
+					<span className="field-label">
+						Platform <span className="req">*</span>
+					</span>
+					<select
+						className="selectbox"
+						required
+						value={state.platform}
+						onChange={(e) =>
+							dispatch({ type: 'set-field', field: 'platform', value: e.target.value })
+						}
+					>
+						<option value="">Select platform…</option>
+						{SOCIAL_PLATFORM_OPTIONS.map((p) => (
+							<option key={p} value={p}>
+								{p}
+							</option>
+						))}
+					</select>
+				</div>
+			)}
+
+			{/* youtubeVideoId — youtube */}
+			{has('youtubeVideoId') && (
+				<div>
+					<span className="field-label">
+						YouTube Video ID <span className="req">*</span>
+					</span>
+					<input
+						type="text"
+						className="input"
+						required
+						value={state.youtubeVideoId}
+						onChange={(e) =>
+							dispatch({ type: 'set-field', field: 'youtubeVideoId', value: e.target.value })
+						}
+						placeholder="e.g. dQw4w9WgXcQ"
+					/>
+					<p className="help">The video ID from the YouTube URL (after ?v=)</p>
+				</div>
+			)}
+
+			{/* placements checkboxes — youtube bundle */}
+			{has('placements') && <YoutubePlacementsField state={state} dispatch={dispatch} />}
+
+			{/* issue — newsletter */}
+			{has('issue') && (
+				<div>
+					<span className="field-label">
+						Issue <span className="req">*</span>
+					</span>
+					<input
+						type="text"
+						className="input"
+						required
+						value={state.issue}
+						onChange={(e) => dispatch({ type: 'set-field', field: 'issue', value: e.target.value })}
+						placeholder="e.g. 2026-06 or June 2026"
+					/>
+				</div>
+			)}
+
+			{/* author ref — author-social (required), newsletter/youtube (optional) */}
+			{has('author') && <AuthorPicker ref={state.author} dispatch={dispatch} mode={state.mode} />}
+
+			{/* handle ref — author-social, owned-social, newsletter, youtube */}
+			{has('handle') && <HandlePicker ref={state.handle} dispatch={dispatch} mode={state.mode} />}
+
+			{/* contentSlug / contentType — always in shared fields but rendered optionally */}
+			<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--gap)' }}>
+				<div>
+					<span className="field-label">Content Slug</span>
+					<input
+						type="text"
+						className="input"
+						value={state.contentSlug}
+						onChange={(e) =>
+							dispatch({ type: 'set-field', field: 'contentSlug', value: e.target.value })
+						}
+						placeholder="my-article-slug"
+					/>
+				</div>
+				<div>
+					<span className="field-label">Content Type</span>
+					<select
+						className="selectbox"
+						value={state.contentType}
+						onChange={(e) =>
+							dispatch({
+								type: 'set-field',
+								field: 'contentType',
+								value: e.target.value,
+							})
+						}
+					>
+						<option value="">None</option>
+						<option value="article">Article</option>
+						<option value="video">Video</option>
+						<option value="podcast">Podcast</option>
+						<option value="newsletter">Newsletter</option>
+					</select>
+				</div>
+			</div>
+		</>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// YoutubePlacementsField — bundle placement checkboxes
+// ---------------------------------------------------------------------------
+
+function YoutubePlacementsField({
+	state,
+	dispatch,
+}: {
+	state: ShareFormState
+	dispatch: React.Dispatch<Parameters<typeof shareFormReducer>[1]>
+}) {
+	return (
+		<div>
+			<span className="field-label">Bundle Placements</span>
+			<p className="help" style={{ marginTop: 0, marginBottom: 8 }}>
+				3-link bundle (description / pinned comment / bio). At least one required.
+			</p>
+			<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+				{YOUTUBE_BUNDLE_PLACEMENTS.map((placement) => {
+					const checked = state.placements.includes(placement)
+					const isLast = state.placements.length === 1 && checked
+					return (
+						<label
+							key={placement}
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: 8,
+								fontSize: 13.5,
+								color: 'var(--ink)',
+								cursor: isLast ? 'not-allowed' : 'pointer',
+								opacity: isLast ? 0.6 : 1,
+							}}
+						>
+							<input
+								type="checkbox"
+								checked={checked}
+								disabled={isLast}
+								onChange={() => dispatch({ type: 'toggle-youtube-placement', placement })}
+							/>
+							{placement === 'comment' ? 'pinned comment (comment)' : placement}
+						</label>
+					)
+				})}
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// AdvancedSection — placement / boostMode / promoCode behind a toggle
+// ---------------------------------------------------------------------------
+
+function AdvancedSection({
+	state,
+	dispatch,
+	fields,
+}: {
+	state: ShareFormState
+	dispatch: React.Dispatch<Parameters<typeof shareFormReducer>[1]>
+	fields: string[]
+}) {
+	const hasPlacement = fields.includes('placement')
+	const hasBoost = fields.includes('boostMode')
+	const hasPromo = fields.includes('promoCode')
+
+	if (!hasPlacement && !hasBoost && !hasPromo) return null
+
+	return (
+		<div className="panel" style={{ overflow: 'hidden', background: 'var(--panel-2)' }}>
+			<button
+				type="button"
+				onClick={() => dispatch({ type: 'toggle-advanced' })}
+				style={{
+					width: '100%',
+					display: 'flex',
+					alignItems: 'center',
+					gap: 8,
+					padding: '11px 14px',
+					borderBottom: state.advancedOpen ? '1px solid var(--border)' : 'none',
+					textAlign: 'left',
+					fontSize: 13,
+					fontWeight: 600,
+					color: 'var(--ink)',
+				}}
+			>
+				<Icon
+					name={state.advancedOpen ? 'chevDown' : 'chevRight'}
+					size={14}
+					style={{ color: 'var(--ink-muted)' }}
+				/>
+				Advanced
+			</button>
+
+			{state.advancedOpen && (
+				<div
+					className="fade-only"
+					style={{
+						padding: '16px 14px',
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 'var(--gap)',
+					}}
+				>
+					{hasPlacement && (
+						<div>
+							<span className="field-label">Placement</span>
+							<select
+								className="selectbox"
+								value={state.placement}
+								onChange={(e) =>
+									dispatch({
+										type: 'set-placement',
+										value: e.target.value as (typeof SOCIAL_PLACEMENT_OPTIONS)[number],
+									})
+								}
+							>
+								{SOCIAL_PLACEMENT_OPTIONS.map((p) => (
+									<option key={p} value={p}>
+										{p === 'comment' ? 'comment (pinned comment for YouTube)' : p}
+									</option>
+								))}
+							</select>
+						</div>
+					)}
+
+					{hasBoost && (
+						<div>
+							<span className="field-label">Boost Mode</span>
+							<select
+								className="selectbox"
+								value={state.boostMode}
+								onChange={(e) =>
+									dispatch({ type: 'set-boost', value: e.target.value as BoostMode })
+								}
+							>
+								{BOOST_MODES.map((b) => (
+									<option key={b} value={b}>
+										{b}
+									</option>
+								))}
+							</select>
+						</div>
+					)}
+
+					{hasPromo && (
+						<div>
+							<span className="field-label">Promo Code</span>
+							<input
+								type="text"
+								className="input"
+								value={state.promoCode}
+								onChange={(e) => dispatch({ type: 'set-promo', value: e.target.value })}
+								placeholder="optional promo code"
+							/>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// ShareOutputBlock — paste-ready result after a successful POST
+// ---------------------------------------------------------------------------
+
+function ShareOutputBlock({
+	output,
+	onCopyAll,
+	copied,
+}: {
+	output: ShareOutput
+	onCopyAll: () => void
+	copied: boolean
+}) {
+	return (
+		<div className="panel" style={{ overflow: 'hidden' }}>
+			{/* Output header */}
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: 8,
+					padding: '15px 18px 12px',
+				}}
+			>
+				<Icon name="checkCircle" size={16} style={{ color: 'var(--green)' }} />
+				<div className="card-title" style={{ flex: 1 }}>
+					{output.items.length === 1 ? '1 link minted' : `${output.items.length} links minted`}
+				</div>
+				<button type="button" className="btn sm" onClick={onCopyAll}>
+					<Icon name={copied ? 'check' : 'copy'} size={13} />
+					{copied ? 'Copied!' : 'Copy all'}
+				</button>
+			</div>
+			<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+
+			{/* Output items */}
+			<div>
+				{output.items.map((item, i) => (
+					<div
+						key={item.goLink}
+						style={{
+							padding: '13px 18px',
+							borderBottom: i < output.items.length - 1 ? '1px solid var(--border-soft)' : 'none',
+						}}
+					>
+						<div className="kicker" style={{ marginBottom: 6 }}>
+							{item.label}
+						</div>
+						{/* go-link — the short URL to post */}
+						<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
+							<code
+								className="mono"
+								style={{
+									flex: 1,
+									fontSize: 13,
+									fontWeight: 600,
+									color: 'var(--accent)',
+									background: 'var(--accent-tint)',
+									padding: '5px 9px',
+									borderRadius: 'var(--radius-sm)',
+									wordBreak: 'break-all',
+								}}
+							>
+								{item.goLink}
+							</code>
+							<button
+								type="button"
+								className="btn sm"
+								onClick={() => void navigator.clipboard.writeText(item.goLink)}
+								title="Copy go-link"
+							>
+								<Icon name="copy" size={13} />
+							</button>
+						</div>
+						{/* tagged URL — reference / preview */}
+						<div
+							className="mono"
+							style={{ fontSize: 11, color: 'var(--ink-faint)', wordBreak: 'break-all' }}
+						>
+							<span style={{ marginRight: 4, color: 'var(--ink-muted)' }}>Tagged:</span>
+							{item.taggedUrl}
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	)
+}