| import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; |
| import { |
| ArrowLeft, |
| ClipboardCopy, |
| ExternalLink, |
| ImagePlus, |
| Loader2, |
| Plus, |
| Sparkles, |
| Trash2, |
| } from 'lucide-react'; |
| import { Button } from '@/components/ui/button'; |
| import { Input } from '@/components/ui/input'; |
| import { Textarea } from '@/components/ui/textarea'; |
| import { |
| Select, |
| SelectContent, |
| SelectItem, |
| SelectTrigger, |
| SelectValue, |
| } from '@/components/ui/select'; |
| import AppShell from '@/components/layout/AppShell'; |
| import LandingPageTemplate from '@/components/landing/LandingPageTemplate'; |
| import { apiFetch } from '@/lib/api'; |
| import { cn } from '@/lib/utils'; |
|
|
| const AUTOSAVE_MS = 700; |
|
|
| function emptyDraft() { |
| return { |
| name: 'New landing page', |
| prompt: '', |
| content: { |
| headline: '', |
| subheadline: '', |
| benefits: [ |
| { title: 'Benefit 1', body: '' }, |
| { title: 'Benefit 2', body: '' }, |
| { title: 'Benefit 3', body: '' }, |
| ], |
| form_heading: 'Book a demo', |
| form_subtext: '', |
| footer_text: '', |
| }, |
| cta_form_id: null, |
| banner_url: null, |
| logo_url: null, |
| public_url: '', |
| cta_form_public_id: null, |
| }; |
| } |
|
|
| function draftFromPage(p) { |
| const c = p.content || {}; |
| const benefits = (c.benefits || []).map((b) => ({ ...b })); |
| while (benefits.length < 3) { |
| benefits.push({ title: `Benefit ${benefits.length + 1}`, body: '' }); |
| } |
| return { |
| name: p.name, |
| prompt: p.prompt || '', |
| content: { |
| headline: c.headline || '', |
| subheadline: c.subheadline || '', |
| benefits: benefits.slice(0, 3), |
| form_heading: c.form_heading || 'Book a demo', |
| form_subtext: c.form_subtext || '', |
| footer_text: c.footer_text || '', |
| }, |
| cta_form_id: p.cta_form_id ?? null, |
| banner_url: p.banner_url || null, |
| logo_url: p.logo_url || null, |
| public_url: p.public_url || '', |
| cta_form_public_id: p.cta_form_public_id || null, |
| }; |
| } |
|
|
| function draftSnapshot(draft) { |
| return JSON.stringify({ |
| name: (draft.name || '').trim(), |
| prompt: draft.prompt || '', |
| content: draft.content, |
| cta_form_id: draft.cta_form_id, |
| }); |
| } |
|
|
| function SaveIndicator({ state }) { |
| if (state === 'saving') { |
| return ( |
| <span className="inline-flex items-center gap-1.5 text-xs text-slate-500"> |
| <Loader2 className="h-3 w-3 animate-spin" /> |
| Saving… |
| </span> |
| ); |
| } |
| if (state === 'saved') return <span className="text-xs text-green-600">Saved</span>; |
| if (state === 'error') return <span className="text-xs text-red-600">Could not save</span>; |
| return null; |
| } |
|
|
| export default function LandingPagesSettings({ onBack }) { |
| const [pages, setPages] = useState([]); |
| const [ctaForms, setCtaForms] = useState([]); |
| const [loading, setLoading] = useState(true); |
| const [selectedId, setSelectedId] = useState(null); |
| const [draft, setDraft] = useState(emptyDraft()); |
| const [saveState, setSaveState] = useState('idle'); |
| const [creating, setCreating] = useState(false); |
| const [generating, setGenerating] = useState(false); |
| const [uploadingBanner, setUploadingBanner] = useState(false); |
| const [uploadingLogo, setUploadingLogo] = useState(false); |
| const [error, setError] = useState(''); |
|
|
| const skipAutosaveRef = useRef(true); |
| const saveTimerRef = useRef(null); |
| const lastSavedSnapshotRef = useRef(''); |
| const savedFadeTimerRef = useRef(null); |
|
|
| const selected = useMemo( |
| () => pages.find((p) => p.id === selectedId) || null, |
| [pages, selectedId] |
| ); |
|
|
| const loadPages = useCallback(async () => { |
| setLoading(true); |
| setError(''); |
| try { |
| const [pr, fr] = await Promise.all([ |
| apiFetch('/api/landing-pages'), |
| apiFetch('/api/landing-pages/cta-form-options'), |
| ]); |
| const pdata = pr.ok ? await pr.json() : { pages: [] }; |
| const fdata = fr.ok ? await fr.json() : { forms: [] }; |
| if (!pr.ok) throw new Error(pdata.detail || 'Could not load pages'); |
| const list = pdata.pages || []; |
| setPages(list); |
| setCtaForms(fdata.forms || []); |
| setSelectedId((prev) => { |
| if (prev && list.some((p) => p.id === prev)) return prev; |
| return list.length ? list[0].id : null; |
| }); |
| } catch (e) { |
| setError(e.message || 'Load failed'); |
| setPages([]); |
| } finally { |
| setLoading(false); |
| } |
| }, []); |
|
|
| useEffect(() => { |
| loadPages(); |
| }, [loadPages]); |
|
|
| useEffect(() => { |
| if (!selected) return; |
| const next = draftFromPage(selected); |
| skipAutosaveRef.current = true; |
| lastSavedSnapshotRef.current = draftSnapshot(next); |
| setDraft(next); |
| setSaveState('idle'); |
| }, [selected?.id]); |
|
|
| useEffect(() => { |
| if (!selectedId) return; |
| if (skipAutosaveRef.current) { |
| skipAutosaveRef.current = false; |
| return; |
| } |
| const snapshot = draftSnapshot(draft); |
| if (snapshot === lastSavedSnapshotRef.current) return; |
| const name = draft.name?.trim(); |
| if (!name) return; |
|
|
| if (saveTimerRef.current) clearTimeout(saveTimerRef.current); |
| saveTimerRef.current = setTimeout(async () => { |
| if (snapshot !== draftSnapshot(draft)) return; |
| setSaveState('saving'); |
| try { |
| const payload = JSON.parse(snapshot); |
| const res = await apiFetch(`/api/landing-pages/${selectedId}`, { |
| method: 'PATCH', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ |
| name: payload.name, |
| prompt: payload.prompt, |
| content: payload.content, |
| cta_form_id: payload.cta_form_id, |
| }), |
| }); |
| const data = await res.json(); |
| if (!res.ok) throw new Error(data.detail || 'Save failed'); |
| lastSavedSnapshotRef.current = snapshot; |
| setPages((prev) => prev.map((p) => (p.id === data.id ? data : p))); |
| setDraft((d) => ({ |
| ...d, |
| public_url: data.public_url || d.public_url, |
| banner_url: data.banner_url ?? d.banner_url, |
| logo_url: data.logo_url ?? d.logo_url, |
| cta_form_public_id: data.cta_form_public_id ?? d.cta_form_public_id, |
| })); |
| if (savedFadeTimerRef.current) clearTimeout(savedFadeTimerRef.current); |
| setSaveState('saved'); |
| savedFadeTimerRef.current = window.setTimeout(() => setSaveState('idle'), 2000); |
| } catch (e) { |
| setError(e.message || 'Save failed'); |
| setSaveState('error'); |
| } |
| }, AUTOSAVE_MS); |
|
|
| return () => { |
| if (saveTimerRef.current) clearTimeout(saveTimerRef.current); |
| }; |
| }, [draft, selectedId]); |
|
|
| const selectPage = (p) => { |
| const next = draftFromPage(p); |
| setSelectedId(p.id); |
| skipAutosaveRef.current = true; |
| lastSavedSnapshotRef.current = draftSnapshot(next); |
| setDraft(next); |
| setSaveState('idle'); |
| }; |
|
|
| const createPage = async () => { |
| setCreating(true); |
| setError(''); |
| try { |
| const res = await apiFetch('/api/landing-pages', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ name: 'New landing page', prompt: '' }), |
| }); |
| const data = await res.json(); |
| if (!res.ok) throw new Error(data.detail || 'Create failed'); |
| await loadPages(); |
| setSelectedId(data.id); |
| const next = draftFromPage(data); |
| skipAutosaveRef.current = true; |
| lastSavedSnapshotRef.current = draftSnapshot(next); |
| setDraft(next); |
| } catch (e) { |
| setError(e.message || 'Create failed'); |
| } finally { |
| setCreating(false); |
| } |
| }; |
|
|
| const deletePage = async () => { |
| if (!selectedId) return; |
| if (!window.confirm('Delete this landing page? The public link will stop working.')) return; |
| try { |
| const res = await apiFetch(`/api/landing-pages/${selectedId}`, { method: 'DELETE' }); |
| if (!res.ok) { |
| const data = await res.json().catch(() => ({})); |
| throw new Error(data.detail || 'Delete failed'); |
| } |
| setSelectedId(null); |
| setDraft(emptyDraft()); |
| await loadPages(); |
| } catch (e) { |
| setError(e.message || 'Delete failed'); |
| } |
| }; |
|
|
| const generateFromPrompt = async () => { |
| if (!selectedId) return; |
| const prompt = draft.prompt?.trim(); |
| if (!prompt || prompt.length < 8) { |
| setError('Enter a prompt with at least 8 characters to generate.'); |
| return; |
| } |
| setGenerating(true); |
| setError(''); |
| try { |
| const res = await apiFetch(`/api/landing-pages/${selectedId}/generate`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ prompt }), |
| }); |
| const data = await res.json(); |
| if (!res.ok) throw new Error(data.detail || 'Generation failed'); |
| setPages((prev) => prev.map((p) => (p.id === data.id ? data : p))); |
| const next = draftFromPage(data); |
| skipAutosaveRef.current = true; |
| lastSavedSnapshotRef.current = draftSnapshot(next); |
| setDraft(next); |
| setSaveState('saved'); |
| } catch (e) { |
| setError(e.message || 'Generation failed'); |
| } finally { |
| setGenerating(false); |
| } |
| }; |
|
|
| const uploadAsset = async (kind, file) => { |
| if (!selectedId || !file) return; |
| const setter = kind === 'banner' ? setUploadingBanner : setUploadingLogo; |
| setter(true); |
| setError(''); |
| try { |
| const fd = new FormData(); |
| fd.append('file', file); |
| const res = await apiFetch(`/api/landing-pages/${selectedId}/${kind}`, { |
| method: 'POST', |
| body: fd, |
| }); |
| const data = await res.json(); |
| if (!res.ok) throw new Error(data.detail || 'Upload failed'); |
| setPages((prev) => prev.map((p) => (p.id === data.id ? data : p))); |
| setDraft((d) => ({ |
| ...d, |
| banner_url: data.banner_url ?? d.banner_url, |
| logo_url: data.logo_url ?? d.logo_url, |
| public_url: data.public_url || d.public_url, |
| })); |
| } catch (e) { |
| setError(e.message || 'Upload failed'); |
| } finally { |
| setter(false); |
| } |
| }; |
|
|
| const updateContent = (key, value) => { |
| setDraft((d) => ({ |
| ...d, |
| content: { ...d.content, [key]: value }, |
| })); |
| }; |
|
|
| const updateBenefit = (idx, patch) => { |
| setDraft((d) => ({ |
| ...d, |
| content: { |
| ...d.content, |
| benefits: d.content.benefits.map((b, i) => (i === idx ? { ...b, ...patch } : b)), |
| }, |
| })); |
| }; |
|
|
| const previewCtaPublicId = useMemo(() => { |
| if (draft.cta_form_public_id) return draft.cta_form_public_id; |
| const form = ctaForms.find((f) => f.id === draft.cta_form_id); |
| return form?.public_id || null; |
| }, [draft.cta_form_id, draft.cta_form_public_id, ctaForms]); |
|
|
| const publicUrl = draft.public_url || (selected?.public_url ?? ''); |
|
|
| return ( |
| <AppShell |
| title="Landing Pages" |
| subtitle="Generate appointment-style pages from a prompt, add your branding, and embed a CTA form." |
| > |
| <div className="w-full max-w-[1600px]"> |
| <div className="mb-6 flex flex-wrap items-center gap-3"> |
| <Button type="button" variant="outline" className="gap-2" onClick={onBack}> |
| <ArrowLeft className="h-4 w-4" aria-hidden /> |
| Back to settings |
| </Button> |
| <Button type="button" onClick={createPage} disabled={creating} className="gap-2"> |
| {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />} |
| New page |
| </Button> |
| </div> |
| |
| {error ? ( |
| <p className="mb-4 text-sm text-red-600 rounded-lg border border-red-200 bg-red-50 px-3 py-2"> |
| {error} |
| </p> |
| ) : null} |
| |
| {loading ? ( |
| <div className="flex justify-center py-20 text-slate-400"> |
| <Loader2 className="h-10 w-10 animate-spin" /> |
| </div> |
| ) : ( |
| <div className="grid gap-6 lg:grid-cols-[200px_minmax(0,1fr)] xl:grid-cols-[200px_minmax(280px,1fr)_minmax(520px,1.15fr)] 2xl:grid-cols-[200px_minmax(320px,0.95fr)_minmax(600px,1.25fr)]"> |
| <aside className="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm h-fit"> |
| <p className="px-2 py-1 text-xs font-semibold uppercase tracking-wide text-slate-500"> |
| Your pages |
| </p> |
| {pages.length === 0 ? ( |
| <p className="px-2 py-4 text-sm text-slate-500">No pages yet.</p> |
| ) : ( |
| <ul className="space-y-1"> |
| {pages.map((p) => ( |
| <li key={p.id}> |
| <button |
| type="button" |
| onClick={() => selectPage(p)} |
| className={cn( |
| 'w-full rounded-lg px-3 py-2 text-left text-sm transition-colors', |
| selectedId === p.id |
| ? 'bg-violet-100 text-violet-800 font-medium' |
| : 'text-slate-700 hover:bg-slate-50' |
| )} |
| > |
| {p.name || 'Untitled'} |
| </button> |
| </li> |
| ))} |
| </ul> |
| )} |
| </aside> |
| |
| <div className="space-y-6 min-w-0"> |
| {!selected ? ( |
| <div className="rounded-2xl border border-dashed border-slate-200 bg-white p-10 text-center text-slate-500"> |
| Create a landing page to generate copy and share a public link. |
| </div> |
| ) : ( |
| <> |
| <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-4"> |
| <div className="flex flex-wrap items-end gap-3 justify-between"> |
| <div className="flex-1 min-w-[12rem]"> |
| <label className="text-xs font-medium text-slate-600"> |
| Page name |
| </label> |
| <Input |
| value={draft.name} |
| onChange={(e) => |
| setDraft((d) => ({ ...d, name: e.target.value })) |
| } |
| className="mt-1" |
| /> |
| </div> |
| <div className="flex items-center gap-3 pb-1"> |
| <SaveIndicator state={saveState} /> |
| <Button |
| type="button" |
| variant="outline" |
| size="sm" |
| className="text-red-600" |
| onClick={deletePage} |
| > |
| <Trash2 className="h-4 w-4" /> |
| </Button> |
| </div> |
| </div> |
| |
| <div> |
| <label className="text-xs font-medium text-slate-600"> |
| AI prompt |
| </label> |
| <p className="text-[10px] text-slate-400 mt-0.5"> |
| Describe your offer, audience, and goal — AI fills the |
| page template |
| </p> |
| <Textarea |
| value={draft.prompt} |
| onChange={(e) => |
| setDraft((d) => ({ ...d, prompt: e.target.value })) |
| } |
| rows={3} |
| className="mt-1 text-sm" |
| placeholder="e.g. B2B demo booking page for our AI document platform targeting operations leaders..." |
| /> |
| <Button |
| type="button" |
| className="mt-2 gap-2" |
| onClick={generateFromPrompt} |
| disabled={generating} |
| > |
| {generating ? ( |
| <Loader2 className="h-4 w-4 animate-spin" /> |
| ) : ( |
| <Sparkles className="h-4 w-4" /> |
| )} |
| Generate page content |
| </Button> |
| </div> |
| |
| <div className="grid gap-4 sm:grid-cols-2"> |
| <div> |
| <label className="text-xs font-medium text-slate-600"> |
| Banner image |
| </label> |
| <label className="mt-1 flex cursor-pointer items-center gap-2 rounded-lg border border-dashed border-slate-200 px-3 py-2 text-xs text-slate-600 hover:bg-slate-50"> |
| <ImagePlus className="h-4 w-4" /> |
| {uploadingBanner ? 'Uploading…' : 'Upload banner'} |
| <input |
| type="file" |
| accept="image/*" |
| className="sr-only" |
| disabled={uploadingBanner} |
| onChange={(e) => { |
| const f = e.target.files?.[0]; |
| if (f) uploadAsset('banner', f); |
| e.target.value = ''; |
| }} |
| /> |
| </label> |
| </div> |
| <div> |
| <label className="text-xs font-medium text-slate-600"> |
| Logo |
| </label> |
| <label className="mt-1 flex cursor-pointer items-center gap-2 rounded-lg border border-dashed border-slate-200 px-3 py-2 text-xs text-slate-600 hover:bg-slate-50"> |
| <ImagePlus className="h-4 w-4" /> |
| {uploadingLogo ? 'Uploading…' : 'Upload logo'} |
| <input |
| type="file" |
| accept="image/*" |
| className="sr-only" |
| disabled={uploadingLogo} |
| onChange={(e) => { |
| const f = e.target.files?.[0]; |
| if (f) uploadAsset('logo', f); |
| e.target.value = ''; |
| }} |
| /> |
| </label> |
| </div> |
| </div> |
| |
| <div> |
| <label className="text-xs font-medium text-slate-600"> |
| CTA form |
| </label> |
| <Select |
| value={ |
| draft.cta_form_id != null |
| ? String(draft.cta_form_id) |
| : 'none' |
| } |
| onValueChange={(v) => { |
| const id = v === 'none' ? null : parseInt(v, 10); |
| const form = ctaForms.find((f) => f.id === id); |
| setDraft((d) => ({ |
| ...d, |
| cta_form_id: id, |
| cta_form_public_id: form?.public_id || null, |
| })); |
| }} |
| > |
| <SelectTrigger className="mt-1 h-9 text-sm"> |
| <SelectValue placeholder="Select a form" /> |
| </SelectTrigger> |
| <SelectContent> |
| <SelectItem value="none">No form</SelectItem> |
| {ctaForms.map((f) => ( |
| <SelectItem key={f.id} value={String(f.id)}> |
| {f.name} |
| </SelectItem> |
| ))} |
| </SelectContent> |
| </Select> |
| {ctaForms.length === 0 ? ( |
| <p className="text-[10px] text-amber-600 mt-1"> |
| Create a CTA form first under Manage CTA forms. |
| </p> |
| ) : null} |
| </div> |
| </section> |
| |
| <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-4"> |
| <p className="text-xs font-semibold uppercase tracking-wide text-slate-500"> |
| Page copy |
| </p> |
| <div> |
| <label className="text-[10px] text-slate-500">Headline</label> |
| <Input |
| value={draft.content.headline} |
| onChange={(e) => updateContent('headline', e.target.value)} |
| className="mt-0.5 h-9 text-sm" |
| /> |
| </div> |
| <div> |
| <label className="text-[10px] text-slate-500">Subheadline</label> |
| <Textarea |
| value={draft.content.subheadline} |
| onChange={(e) => |
| updateContent('subheadline', e.target.value) |
| } |
| rows={2} |
| className="text-sm" |
| /> |
| </div> |
| {draft.content.benefits.map((b, idx) => ( |
| <div |
| key={idx} |
| className="rounded-xl border border-slate-100 bg-slate-50/80 p-3 space-y-2" |
| > |
| <Input |
| value={b.title} |
| onChange={(e) => |
| updateBenefit(idx, { title: e.target.value }) |
| } |
| placeholder={`Benefit ${idx + 1} title`} |
| className="h-8 text-sm font-medium" |
| /> |
| <Textarea |
| value={b.body} |
| onChange={(e) => |
| updateBenefit(idx, { body: e.target.value }) |
| } |
| rows={2} |
| className="text-sm" |
| /> |
| </div> |
| ))} |
| <div> |
| <label className="text-[10px] text-slate-500"> |
| Form heading |
| </label> |
| <Input |
| value={draft.content.form_heading} |
| onChange={(e) => |
| updateContent('form_heading', e.target.value) |
| } |
| className="mt-0.5 h-9 text-sm" |
| /> |
| </div> |
| <div> |
| <label className="text-[10px] text-slate-500"> |
| Form subtext |
| </label> |
| <Textarea |
| value={draft.content.form_subtext} |
| onChange={(e) => |
| updateContent('form_subtext', e.target.value) |
| } |
| rows={2} |
| className="text-sm" |
| /> |
| </div> |
| <div> |
| <label className="text-[10px] text-slate-500">Footer</label> |
| <Input |
| value={draft.content.footer_text} |
| onChange={(e) => |
| updateContent('footer_text', e.target.value) |
| } |
| className="mt-0.5 h-9 text-sm" |
| /> |
| </div> |
| </section> |
| |
| <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-3 xl:hidden"> |
| <PreviewBlock |
| draft={draft} |
| previewCtaPublicId={previewCtaPublicId} |
| publicUrl={publicUrl} |
| /> |
| </section> |
| |
| {publicUrl ? ( |
| <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-2"> |
| <p className="text-sm font-semibold text-slate-800"> |
| Public link |
| </p> |
| <p className="text-xs text-slate-500"> |
| Share on LinkedIn, email, or ads. Submissions go to your |
| embedded CTA form → Leads. |
| </p> |
| <div className="flex flex-wrap items-center gap-2"> |
| <code className="text-xs bg-slate-100 px-2 py-1.5 rounded break-all flex-1 min-w-[12rem]"> |
| {publicUrl} |
| </code> |
| <Button |
| type="button" |
| variant="outline" |
| size="sm" |
| className="gap-1" |
| onClick={() => |
| publicUrl && |
| navigator.clipboard.writeText(publicUrl) |
| } |
| > |
| <ClipboardCopy className="h-3.5 w-3.5" /> |
| Copy |
| </Button> |
| <a |
| href={publicUrl} |
| target="_blank" |
| rel="noreferrer" |
| className="inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-3 text-sm font-medium hover:bg-slate-50 gap-1" |
| > |
| Open |
| <ExternalLink className="h-3.5 w-3.5" /> |
| </a> |
| </div> |
| </section> |
| ) : null} |
| </> |
| )} |
| </div> |
| |
| {selected ? ( |
| <aside className="hidden xl:block min-w-0"> |
| <div className="sticky top-4 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm w-full"> |
| <PreviewBlock |
| draft={draft} |
| previewCtaPublicId={previewCtaPublicId} |
| publicUrl={publicUrl} |
| /> |
| </div> |
| </aside> |
| ) : null} |
| </div> |
| )} |
| </div> |
| </AppShell> |
| ); |
| } |
|
|
| function PreviewBlock({ draft, previewCtaPublicId, publicUrl }) { |
| return ( |
| <div className="space-y-2"> |
| <div className="flex items-center justify-between gap-2 px-1"> |
| <p className="text-sm font-semibold text-slate-800">Live preview</p> |
| {publicUrl ? ( |
| <a |
| href={publicUrl} |
| target="_blank" |
| rel="noreferrer" |
| className="inline-flex items-center gap-1 text-xs text-violet-600 hover:underline" |
| > |
| Open tab |
| <ExternalLink className="h-3 w-3" /> |
| </a> |
| ) : null} |
| </div> |
| <div className="max-h-[78vh] overflow-y-auto overflow-x-auto rounded-xl w-full"> |
| <LandingPageTemplate |
| preview |
| className="w-full" |
| content={draft.content} |
| bannerUrl={draft.banner_url} |
| logoUrl={draft.logo_url} |
| ctaFormPublicId={previewCtaPublicId} |
| /> |
| </div> |
| </div> |
| ); |
| } |
|
|
