@growth-labs/cms 0.1.0

package/src/ui/components/ShareModal.tsx

@@ -0,0 +1,650 @@
+// src/ui/components/ShareModal.tsx — shared per-content Share builder modal (P6-B Task 9).
+//
+// Opened from the library row Share button or the EditorScreen Share action,
+// pre-filled with the item's destinationUrl / contentSlug / contentType.
+// Wraps the same form body as SocialShareScreen on a broadsheet .scrim overlay,
+// mirroring the GiftModal pattern in SubscriptionsScreen.tsx.
+//
+// SCOPE GUARDS (spec §11):
+//   - No @growth-labs/analytics import — all analytics calls are fetch.
+//   - No UTM computation — server owns UTMs.
+//   - No LLM / drafted copy — links only.
+//   - No conversion/signup/subscriber metrics.
+//   - clickCount === null → "—", never 0.
+//
+// Presentation: Broadsheet idiom — .scrim backdrop + .panel.panel-pad dialog with a
+// .card-title + .masthead-rule header, the .seg context switcher, .field-label/.input/
+// .selectbox fields, .btn / .btn.primary actions, and a paste-ready output sub-panel.
+// All form state, fetches, and the server-owned UTM batch wiring are unchanged.
+
+import { useCallback, useReducer, useState } from 'react'
+import type { ContentType } from '../../schema/types.js'
+import { Icon } from '../icons.js'
+import { publicUrlFor } from '../screens/public-url.js'
+import {
+	type AuthorRef,
+	BOOST_MODES,
+	type BoostMode,
+	buildBatchPayloadFrom,
+	formatShareOutput,
+	initShareForm,
+	type LinkResult,
+	relevantFields,
+	SHARE_MODES,
+	type ShareFormPrefill,
+	type ShareMode,
+	type ShareOutput,
+	SOCIAL_PLACEMENT_OPTIONS,
+	SOCIAL_PLATFORM_OPTIONS,
+	type SocialPlacementOption,
+	shareFormReducer,
+	toPlainText,
+	YOUTUBE_BUNDLE_PLACEMENTS,
+} from '../screens/social-share-data.js'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface ShareModalPrefill {
+	/** The content item's public destination URL. */
+	destinationUrl: string
+	/** The content slug (used as contentSlug in the batch payload). */
+	contentSlug: string
+	/** The content type (used as contentType in the batch payload). */
+	contentType: ContentType | ''
+	/** Defaults the social campaign; normally the content slug. */
+	campaign?: string
+	/** The content author, pre-selected for author-attributed share links. */
+	author?: AuthorRef
+}
+
+export interface ShareModalProps {
+	prefill: ShareModalPrefill
+	onClose: () => void
+}
+
+// ---------------------------------------------------------------------------
+// Mode label map
+// ---------------------------------------------------------------------------
+
+const MODE_LABELS: Record<ShareMode, string> = {
+	'author-social': 'Author Social',
+	'owned-social': 'Owned Social',
+	youtube: 'YouTube',
+	newsletter: 'Newsletter',
+}
+
+// ---------------------------------------------------------------------------
+// ShareModal
+// ---------------------------------------------------------------------------
+
+export function ShareModal({ prefill, onClose }: ShareModalProps) {
+	const initialPrefill: ShareFormPrefill = {
+		destinationUrl: prefill.destinationUrl,
+		contentSlug: prefill.contentSlug,
+		contentType: prefill.contentType,
+		author: prefill.author,
+	}
+
+	const [state, dispatch] = useReducer(
+		shareFormReducer,
+		{ mode: 'author-social' as ShareMode, prefill: initialPrefill },
+		(init) => initShareForm(init.mode, init.prefill),
+	)
+
+	const [submitting, setSubmitting] = useState(false)
+	const [submitError, setSubmitError] = useState<string | null>(null)
+	const [output, setOutput] = useState<ShareOutput | null>(null)
+	const [copied, setCopied] = useState(false)
+
+	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="scrim"
+			style={{ placeItems: 'center', zIndex: 500 }}
+			role="dialog"
+			aria-modal="true"
+			aria-label="Share content"
+			onClick={onClose}
+			onKeyUp={(e) => {
+				if (e.key === 'Escape') onClose()
+			}}
+		>
+			{/* biome-ignore lint/a11y/useKeyWithClickEvents: onClick only stops the backdrop close from bubbling; it is not a user-facing action and needs no keyboard handler. The dialog scrim above owns click-away + Escape. */}
+			<div
+				className="panel panel-pad fade-only"
+				role="document"
+				style={{
+					width: '100%',
+					maxWidth: 600,
+					maxHeight: '90vh',
+					display: 'flex',
+					flexDirection: 'column',
+					overflow: 'hidden',
+					boxShadow: 'var(--shadow-lg)',
+				}}
+				onClick={(e) => e.stopPropagation()}
+			>
+				{/* Modal header */}
+				<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+					<Icon name="share" size={18} style={{ color: 'var(--ink-muted)' }} />
+					<div className="card-title">Share</div>
+					{prefill.contentSlug && (
+						<span className="mono" style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
+							/{prefill.contentSlug}
+						</span>
+					)}
+					<button
+						type="button"
+						className="icon-btn"
+						style={{ marginLeft: 'auto' }}
+						onClick={onClose}
+						aria-label="Close"
+					>
+						<Icon name="x" size={18} />
+					</button>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '6px 0 16px' }} />
+
+				{/* Modal body — scrollable */}
+				<div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
+					{/* Mode selector */}
+					<div style={{ marginBottom: 'var(--gap)' }}>
+						<div className="seg">
+							{SHARE_MODES.map((mode) => (
+								<button
+									key={mode}
+									type="button"
+									className={state.mode === mode ? 'on' : ''}
+									onClick={() => handleModeChange(mode)}
+								>
+									{MODE_LABELS[mode]}
+								</button>
+							))}
+						</div>
+					</div>
+
+					<form onSubmit={(e) => void handleSubmit(e)}>
+						{/* Destination URL (shared, pre-filled) */}
+						<div style={fieldGroup}>
+							<label htmlFor="sm-dest-url" className="field-label">
+								Destination URL
+							</label>
+							<input
+								id="sm-dest-url"
+								type="url"
+								className="input"
+								value={state.destinationUrl}
+								onChange={(e) =>
+									dispatch({
+										type: 'set-field',
+										field: 'destinationUrl',
+										value: e.currentTarget.value,
+									})
+								}
+								placeholder="https://fronts.co/article/my-piece"
+							/>
+						</div>
+
+						{/* Platform (author-social / owned-social) */}
+						{fields.includes('platform') && state.mode !== 'youtube' && (
+							<div style={fieldGroup}>
+								<label htmlFor="sm-platform" className="field-label">
+									Platform
+								</label>
+								<select
+									id="sm-platform"
+									className="selectbox"
+									value={state.platform}
+									onChange={(e) =>
+										dispatch({ type: 'set-field', field: 'platform', value: e.currentTarget.value })
+									}
+								>
+									<option value="">— select —</option>
+									{SOCIAL_PLATFORM_OPTIONS.filter((p) => p !== 'youtube').map((p) => (
+										<option key={p} value={p}>
+											{p}
+										</option>
+									))}
+								</select>
+							</div>
+						)}
+
+						{/* Campaign (author-social / owned-social) */}
+						{fields.includes('campaign') && (
+							<div style={fieldGroup}>
+								<label htmlFor="sm-campaign" className="field-label">
+									Campaign
+								</label>
+								<input
+									id="sm-campaign"
+									type="text"
+									className="input"
+									value={state.campaign}
+									onChange={(e) =>
+										dispatch({ type: 'set-field', field: 'campaign', value: e.currentTarget.value })
+									}
+									placeholder="e.g. june-launch"
+								/>
+							</div>
+						)}
+
+						{/* YouTube video ID */}
+						{fields.includes('youtubeVideoId') && (
+							<div style={fieldGroup}>
+								<label htmlFor="sm-yt-id" className="field-label">
+									YouTube Video ID
+								</label>
+								<input
+									id="sm-yt-id"
+									type="text"
+									className="input"
+									value={state.youtubeVideoId}
+									onChange={(e) =>
+										dispatch({
+											type: 'set-field',
+											field: 'youtubeVideoId',
+											value: e.currentTarget.value,
+										})
+									}
+									placeholder="dQw4w9WgXcQ"
+								/>
+							</div>
+						)}
+
+						{/* YouTube bundle placements */}
+						{fields.includes('placements') && (
+							<div style={fieldGroup}>
+								<span className="field-label">Bundle placements</span>
+								<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 2 }}>
+									{YOUTUBE_BUNDLE_PLACEMENTS.map((p) => (
+										<label
+											key={p}
+											style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 13 }}
+										>
+											<input
+												type="checkbox"
+												checked={state.placements.includes(p)}
+												onChange={() =>
+													dispatch({ type: 'toggle-youtube-placement', placement: p })
+												}
+											/>
+											{p === 'comment' ? 'pinned comment' : p}
+										</label>
+									))}
+								</div>
+							</div>
+						)}
+
+						{/* Issue (newsletter) */}
+						{fields.includes('issue') && (
+							<div style={fieldGroup}>
+								<label htmlFor="sm-issue" className="field-label">
+									Issue
+								</label>
+								<input
+									id="sm-issue"
+									type="text"
+									className="input"
+									value={state.issue}
+									onChange={(e) =>
+										dispatch({ type: 'set-field', field: 'issue', value: e.currentTarget.value })
+									}
+									placeholder="e.g. 2026-06"
+								/>
+							</div>
+						)}
+
+						{/* Author ref (inline — simplified for the modal; full picker in the screen) */}
+						{fields.includes('author') && (
+							<div style={fieldGroup}>
+								<label htmlFor="sm-author" className="field-label">
+									Author display name
+								</label>
+								<input
+									id="sm-author"
+									type="text"
+									className="input"
+									value={state.author.displayName ?? ''}
+									onChange={(e) =>
+										dispatch({
+											type: 'set-author',
+											ref: { ...state.author, displayName: e.currentTarget.value, create: true },
+										})
+									}
+									placeholder="Jane Smith"
+								/>
+							</div>
+						)}
+
+						{/* Handle ref — required for author-social / owned-social */}
+						{fields.includes('handle') && (
+							<div style={fieldGroup}>
+								<label htmlFor="sm-handle" className="field-label">
+									{state.mode === 'owned-social' ? 'Brand handle (username)' : 'Handle (username)'}
+								</label>
+								<input
+									id="sm-handle"
+									type="text"
+									className="input"
+									value={state.handle.username ?? ''}
+									onChange={(e) =>
+										dispatch({
+											type: 'set-handle',
+											ref: {
+												...state.handle,
+												username: e.currentTarget.value,
+												isBrandAccount: state.mode === 'owned-social',
+												create: true,
+											},
+										})
+									}
+									placeholder="@handle"
+								/>
+							</div>
+						)}
+
+						{/* Advanced toggle */}
+						<div style={{ marginTop: 4, marginBottom: 14 }}>
+							<button
+								type="button"
+								className="btn ghost sm"
+								onClick={() => dispatch({ type: 'toggle-advanced' })}
+								style={{ color: 'var(--ink-muted)', paddingLeft: 0 }}
+							>
+								<Icon name={state.advancedOpen ? 'chevDown' : 'chevRight'} size={13} />
+								Advanced
+							</button>
+
+							{state.advancedOpen && (
+								<div
+									className="panel panel-pad fade-only"
+									style={{
+										marginTop: 10,
+										background: 'var(--panel-2)',
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 12,
+									}}
+								>
+									{/* Placement override */}
+									<div>
+										<label htmlFor="sm-placement" className="field-label">
+											Placement override
+										</label>
+										<select
+											id="sm-placement"
+											className="selectbox"
+											value={state.placement}
+											onChange={(e) =>
+												dispatch({
+													type: 'set-placement',
+													value: e.currentTarget.value as SocialPlacementOption,
+												})
+											}
+										>
+											{SOCIAL_PLACEMENT_OPTIONS.map((p) => (
+												<option key={p} value={p}>
+													{p}
+												</option>
+											))}
+										</select>
+									</div>
+
+									{/* Boost mode (not for newsletter) */}
+									{state.mode !== 'newsletter' && (
+										<div>
+											<label htmlFor="sm-boost" className="field-label">
+												Boost mode
+											</label>
+											<select
+												id="sm-boost"
+												className="selectbox"
+												value={state.boostMode}
+												onChange={(e) =>
+													dispatch({
+														type: 'set-boost',
+														value: e.currentTarget.value as BoostMode,
+													})
+												}
+											>
+												{BOOST_MODES.map((b) => (
+													<option key={b} value={b}>
+														{b}
+													</option>
+												))}
+											</select>
+										</div>
+									)}
+
+									{/* Promo code */}
+									<div>
+										<label htmlFor="sm-promo" className="field-label">
+											Promo code
+										</label>
+										<input
+											id="sm-promo"
+											type="text"
+											className="input"
+											value={state.promoCode}
+											onChange={(e) =>
+												dispatch({ type: 'set-promo', value: e.currentTarget.value })
+											}
+											placeholder="optional"
+										/>
+									</div>
+								</div>
+							)}
+						</div>
+
+						{/* Validation / submit error */}
+						{submitError && (
+							<div
+								style={{
+									marginBottom: 14,
+									padding: '10px 14px',
+									background: 'var(--red-tint)',
+									border: '1px solid color-mix(in srgb, var(--red) 25%, transparent)',
+									borderRadius: 'var(--radius-sm)',
+									color: 'var(--red)',
+									fontSize: 12.5,
+								}}
+							>
+								{submitError}
+							</div>
+						)}
+
+						{/* Submit */}
+						<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+							<button type="button" className="btn" onClick={onClose}>
+								Cancel
+							</button>
+							<button type="submit" className="btn primary" disabled={submitting}>
+								<Icon name="share" size={14} />
+								{submitting ? 'Minting…' : 'Mint link(s)'}
+							</button>
+						</div>
+					</form>
+
+					{/* Output block */}
+					{output && (
+						<div className="panel" style={{ marginTop: 'var(--gap)', overflow: 'hidden' }}>
+							<div
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'space-between',
+									padding: '13px 16px 10px',
+								}}
+							>
+								<div className="card-title" style={{ fontSize: 15 }}>
+									Share link{output.items.length > 1 ? 's' : ''}
+								</div>
+								<button type="button" className="btn sm" onClick={handleCopyAll}>
+									<Icon name={copied ? 'check' : 'copy'} size={13} />
+									{copied ? 'Copied!' : 'Copy all'}
+								</button>
+							</div>
+							<hr className="masthead-rule" style={{ margin: '0 16px' }} />
+
+							<div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
+								{output.items.map((item, i) => (
+									// biome-ignore lint/suspicious/noArrayIndexKey: output items are positional
+									<div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+										<span className="kicker">{item.label}</span>
+										<div
+											style={{
+												display: 'flex',
+												alignItems: 'center',
+												gap: 7,
+												padding: '7px 10px',
+												background: 'var(--field)',
+												borderRadius: 'var(--radius-sm)',
+												border: '1px solid var(--field-border)',
+											}}
+										>
+											<Icon
+												name="link"
+												size={13}
+												style={{ color: 'var(--ink-muted)', flexShrink: 0 }}
+											/>
+											<span
+												className="mono"
+												style={{
+													flex: 1,
+													fontSize: 12,
+													color: 'var(--accent)',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap',
+												}}
+											>
+												{item.goLink}
+											</span>
+										</div>
+										<span
+											className="mono"
+											style={{
+												fontSize: 11,
+												color: 'var(--ink-faint)',
+												overflow: 'hidden',
+												textOverflow: 'ellipsis',
+												whiteSpace: 'nowrap',
+											}}
+										>
+											{item.taggedUrl}
+										</span>
+									</div>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// publicUrlForRow helper — re-exported for callers that have a row but no
+// siteBase at the call site (they can pass undefined and let the helper
+// return a relative path).
+// ---------------------------------------------------------------------------
+
+export function buildSharePrefill(
+	row: {
+		type: ContentType
+		slug: string
+		authorId?: string | null
+		authorSlug?: string | null
+		authorName?: string | null
+	},
+	siteBase?: string,
+): ShareModalPrefill {
+	const authorId = row.authorId?.trim()
+	const authorSlug = row.authorSlug?.trim()
+	const authorName = row.authorName?.trim()
+	const author =
+		authorId || authorName
+			? {
+					...(authorId ? { id: authorId } : {}),
+					...(authorSlug || authorId ? { slug: authorSlug || authorId } : {}),
+					...(authorName ? { displayName: authorName } : {}),
+				}
+			: undefined
+
+	return {
+		destinationUrl: publicUrlFor(row, siteBase),
+		contentSlug: row.slug,
+		contentType: row.type,
+		campaign: row.slug,
+		...(author ? { author } : {}),
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Micro-style token — the one layout concern broadsheet has no class for
+// (vertical field stacking inside the modal form).
+// ---------------------------------------------------------------------------
+
+const fieldGroup: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 6,
+	marginBottom: 'var(--gap)',
+}