Add homepage announcement module
This commit is contained in:
667
resources/js/Pages/Admin/HomepageAnnouncements/Form.jsx
Normal file
667
resources/js/Pages/Admin/HomepageAnnouncements/Form.jsx
Normal file
@@ -0,0 +1,667 @@
|
||||
import React from 'react'
|
||||
import { Head, Link, useForm, usePage } from '@inertiajs/react'
|
||||
import AdminLayout from '../../../Layouts/AdminLayout'
|
||||
import HomepageAnnouncement from '../../../components/homepage/HomepageAnnouncement'
|
||||
import HomepageAnnouncementEditor from '../../../components/homepage/HomepageAnnouncementEditor'
|
||||
import Checkbox from '../../../components/ui/Checkbox'
|
||||
import DateTimePicker from '../../../components/ui/DateTimePicker'
|
||||
import NovaSelect from '../../../components/ui/NovaSelect'
|
||||
import ShareToast from '../../../components/ui/ShareToast'
|
||||
|
||||
const BACKGROUND_IMAGE_ACCEPT = 'image/jpeg,image/jpg,image/png,image/webp'
|
||||
const BACKGROUND_IMAGE_MAX_BYTES = 5 * 1024 * 1024
|
||||
|
||||
const FORM_TABS = [
|
||||
{ id: 'overview', label: 'Overview', description: 'Identity, status, and schedule.' },
|
||||
{ id: 'content', label: 'Content', description: 'Message body and CTA links.' },
|
||||
{ id: 'design', label: 'Design', description: 'Visual treatment and background media.' },
|
||||
{ id: 'behavior', label: 'Behavior', description: 'Dismiss rules and placement.' },
|
||||
]
|
||||
|
||||
const FIELD_TAB_MAP = {
|
||||
title: 'overview',
|
||||
badge_text: 'overview',
|
||||
subtitle: 'overview',
|
||||
type: 'overview',
|
||||
status: 'overview',
|
||||
priority: 'overview',
|
||||
is_active: 'overview',
|
||||
starts_at: 'overview',
|
||||
ends_at: 'overview',
|
||||
content_html: 'content',
|
||||
primary_link_label: 'content',
|
||||
primary_link_type: 'content',
|
||||
primary_link_url: 'content',
|
||||
primary_link_target_id: 'content',
|
||||
secondary_link_label: 'content',
|
||||
secondary_link_type: 'content',
|
||||
secondary_link_url: 'content',
|
||||
secondary_link_target_id: 'content',
|
||||
gradient_preset: 'design',
|
||||
theme_preset: 'design',
|
||||
overlay_opacity: 'design',
|
||||
background_image: 'design',
|
||||
background_image_file: 'design',
|
||||
remove_background_image: 'design',
|
||||
dismiss_version: 'behavior',
|
||||
placement: 'behavior',
|
||||
is_dismissible: 'behavior',
|
||||
}
|
||||
|
||||
function isIntegerLike(value) {
|
||||
if (typeof value === 'number') return Number.isInteger(value)
|
||||
if (typeof value !== 'string') return false
|
||||
const normalized = value.trim()
|
||||
return normalized !== '' && /^-?\d+$/.test(normalized)
|
||||
}
|
||||
|
||||
function isSafeClientUrl(value) {
|
||||
const normalized = String(value || '').trim()
|
||||
if (!normalized) return true
|
||||
return normalized.startsWith('/') || normalized.startsWith('https://')
|
||||
}
|
||||
|
||||
function firstErrorMessage(errors) {
|
||||
const firstKey = Object.keys(errors || {})[0]
|
||||
if (!firstKey) return null
|
||||
const value = errors[firstKey]
|
||||
return Array.isArray(value) ? value[0] : value
|
||||
}
|
||||
|
||||
function getCsrfToken() {
|
||||
if (typeof document === 'undefined') return ''
|
||||
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
||||
}
|
||||
|
||||
function FieldError({ error }) {
|
||||
if (!error) return null
|
||||
return <p className="text-xs text-rose-300">{error}</p>
|
||||
}
|
||||
|
||||
function resolveTabFromErrors(errors) {
|
||||
const firstKey = Object.keys(errors || {})[0]
|
||||
return FIELD_TAB_MAP[firstKey] || 'overview'
|
||||
}
|
||||
|
||||
function Section({ title, description, children }) {
|
||||
return (
|
||||
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
||||
<div className="mb-5">
|
||||
<h2 className="text-lg font-semibold text-white">{title}</h2>
|
||||
{description ? <p className="mt-1 text-sm text-slate-400">{description}</p> : null}
|
||||
</div>
|
||||
<div className="grid gap-5">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function TextField({ label, value, onChange, error, ...rest }) {
|
||||
return (
|
||||
<label className="grid gap-2 text-sm text-slate-200">
|
||||
<span>{label}</span>
|
||||
<input value={value} onChange={onChange} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" {...rest} />
|
||||
<FieldError error={error} />
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleField({ label, checked, onChange, help }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200">
|
||||
<div>
|
||||
<div className="font-semibold text-white">{label}</div>
|
||||
{help ? <div className="mt-1 text-xs leading-6 text-slate-400">{help}</div> : null}
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<Checkbox checked={checked} onChange={onChange} aria-label={label} variant="sky" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectField({ label, value, onChange, options, error }) {
|
||||
return (
|
||||
<NovaSelect
|
||||
label={label}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={options || []}
|
||||
error={error}
|
||||
searchable={false}
|
||||
className="rounded-2xl bg-black/20"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DateTimeField({ label, value, onChange, error }) {
|
||||
return (
|
||||
<DateTimePicker
|
||||
label={label}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
error={error}
|
||||
clearable
|
||||
className="rounded-2xl bg-black/20"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BackgroundImageDropzone({ previewUrl, storedValue, selectedFileName, error, onSelect }) {
|
||||
const inputRef = React.useRef(null)
|
||||
const [dragging, setDragging] = React.useState(false)
|
||||
|
||||
const handleFile = React.useCallback((file) => {
|
||||
onSelect?.(file || null)
|
||||
}, [onSelect])
|
||||
|
||||
return (
|
||||
<div className="grid gap-3 text-sm text-slate-200">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span>Upload background image</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => inputRef.current?.click()}
|
||||
className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.08]"
|
||||
>
|
||||
Browse
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault()
|
||||
inputRef.current?.click()
|
||||
}
|
||||
}}
|
||||
onDragOver={(event) => {
|
||||
event.preventDefault()
|
||||
setDragging(true)
|
||||
}}
|
||||
onDragEnter={(event) => {
|
||||
event.preventDefault()
|
||||
setDragging(true)
|
||||
}}
|
||||
onDragLeave={(event) => {
|
||||
event.preventDefault()
|
||||
setDragging(false)
|
||||
}}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault()
|
||||
setDragging(false)
|
||||
handleFile(event.dataTransfer?.files?.[0] || null)
|
||||
}}
|
||||
className={[
|
||||
'rounded-[28px] border border-dashed px-5 py-5 transition outline-none',
|
||||
dragging
|
||||
? 'border-sky-300/50 bg-sky-400/12'
|
||||
: 'border-white/10 bg-black/20 hover:border-white/20 hover:bg-white/[0.04]',
|
||||
].join(' ')}
|
||||
>
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-sky-300/20 bg-sky-400/10 text-sky-100">
|
||||
<i className="fa-solid fa-cloud-arrow-up" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">Drop image here or browse</div>
|
||||
<div className="mt-1 text-xs leading-5 text-slate-400">JPG, PNG, or WEBP. Maximum 5 MB. The selected image is previewed here and on the card preview.</div>
|
||||
<div className="mt-2 flex flex-wrap gap-2 text-[11px] text-slate-400">
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">JPG</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">PNG</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">WEBP</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">Max 5 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-28 w-full overflow-hidden rounded-[20px] border border-white/10 bg-slate-950 lg:w-44">
|
||||
{previewUrl ? (
|
||||
<img src={previewUrl} alt="Background preview" className="h-full w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center px-4 text-center text-sm text-slate-500">No background image selected</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedFileName ? <div className="mt-4 truncate rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-xs text-slate-300">Selected file: <span className="text-white">{selectedFileName}</span></div> : null}
|
||||
{!selectedFileName && storedValue ? <div className="mt-4 truncate rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-xs text-slate-400">Stored path: <span className="text-slate-200">{storedValue}</span></div> : null}
|
||||
{error ? <div className="mt-3 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm text-rose-100">{error}</div> : null}
|
||||
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept={BACKGROUND_IMAGE_ACCEPT}
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
handleFile(event.target.files?.[0] || null)
|
||||
event.target.value = ''
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function LinkFields({ title, prefix, form, options }) {
|
||||
return (
|
||||
<div className="grid gap-4 rounded-[28px] border border-white/10 bg-black/20 p-4">
|
||||
<h3 className="text-sm font-semibold uppercase tracking-[0.18em] text-white/75">{title}</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<TextField label="Label" value={form.data[`${prefix}_link_label`]} onChange={(event) => form.setData(`${prefix}_link_label`, event.target.value)} error={form.errors[`${prefix}_link_label`]} maxLength={80} />
|
||||
<SelectField label="Link type" value={form.data[`${prefix}_link_type`]} onChange={(nextValue) => form.setData(`${prefix}_link_type`, nextValue)} options={options.linkTypes} error={form.errors[`${prefix}_link_type`]} />
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<TextField label="Fallback URL" value={form.data[`${prefix}_link_url`]} onChange={(event) => form.setData(`${prefix}_link_url`, event.target.value)} error={form.errors[`${prefix}_link_url`]} placeholder="/explore or https://example.com" maxLength={2048} />
|
||||
<TextField label="Target ID" value={form.data[`${prefix}_link_target_id`]} onChange={(event) => form.setData(`${prefix}_link_target_id`, event.target.value)} error={form.errors[`${prefix}_link_target_id`]} placeholder="Optional entity id" inputMode="numeric" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function HomepageAnnouncementForm({ announcement, previewAnnouncement, options, submitUrl, previewUrl, indexUrl, destroyUrl }) {
|
||||
const { props } = usePage()
|
||||
const isEditing = Boolean(announcement?.id)
|
||||
const flash = props.flash ?? {}
|
||||
const [activeTab, setActiveTab] = React.useState('overview')
|
||||
const [preview, setPreview] = React.useState(previewAnnouncement || null)
|
||||
const [previewBusy, setPreviewBusy] = React.useState(false)
|
||||
const [previewError, setPreviewError] = React.useState('')
|
||||
const [backgroundImageError, setBackgroundImageError] = React.useState('')
|
||||
const [backgroundPreviewUrl, setBackgroundPreviewUrl] = React.useState(announcement?.background_image_url || '')
|
||||
const [toast, setToast] = React.useState({ id: 0, visible: false, message: '', variant: 'success' })
|
||||
|
||||
const form = useForm({
|
||||
...announcement,
|
||||
background_image_file: null,
|
||||
})
|
||||
|
||||
const showToast = React.useCallback((message, variant = 'success') => {
|
||||
setToast({
|
||||
id: Date.now(),
|
||||
visible: true,
|
||||
message,
|
||||
variant,
|
||||
})
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
if (backgroundPreviewUrl?.startsWith?.('blob:')) {
|
||||
URL.revokeObjectURL(backgroundPreviewUrl)
|
||||
}
|
||||
}
|
||||
}, [backgroundPreviewUrl])
|
||||
|
||||
const previewWithLocalImage = React.useMemo(() => {
|
||||
if (!preview) return null
|
||||
if (!backgroundPreviewUrl) return preview
|
||||
return { ...preview, background_image_url: backgroundPreviewUrl }
|
||||
}, [backgroundPreviewUrl, preview])
|
||||
|
||||
const validateForm = React.useCallback((statusOverride = null) => {
|
||||
const data = { ...form.data, status: statusOverride || form.data.status }
|
||||
const errors = []
|
||||
|
||||
if (!String(data.title || '').trim()) {
|
||||
errors.push('Title is required.')
|
||||
}
|
||||
|
||||
if (!String(data.type || '').trim()) {
|
||||
errors.push('Type is required.')
|
||||
}
|
||||
|
||||
if (!String(data.status || '').trim()) {
|
||||
errors.push('Status is required.')
|
||||
}
|
||||
|
||||
if (!String(data.placement || '').trim()) {
|
||||
errors.push('Placement is required.')
|
||||
}
|
||||
|
||||
if (!isIntegerLike(data.priority)) {
|
||||
errors.push('Priority must be a whole number.')
|
||||
}
|
||||
|
||||
if (!isIntegerLike(data.dismiss_version) || Number(data.dismiss_version) < 1) {
|
||||
errors.push('Dismiss version must be a whole number greater than or equal to 1.')
|
||||
}
|
||||
|
||||
if (String(data.overlay_opacity || '').trim() !== '' && (!isIntegerLike(data.overlay_opacity) || Number(data.overlay_opacity) < 0 || Number(data.overlay_opacity) > 100)) {
|
||||
errors.push('Overlay opacity must be a whole number between 0 and 100.')
|
||||
}
|
||||
|
||||
if (data.starts_at && Number.isNaN(Date.parse(data.starts_at))) {
|
||||
errors.push('Starts at must be a valid date and time.')
|
||||
}
|
||||
|
||||
if (data.ends_at && Number.isNaN(Date.parse(data.ends_at))) {
|
||||
errors.push('Ends at must be a valid date and time.')
|
||||
}
|
||||
|
||||
if (data.starts_at && data.ends_at && Date.parse(data.ends_at) < Date.parse(data.starts_at)) {
|
||||
errors.push('Ends at must be after or equal to starts at.')
|
||||
}
|
||||
|
||||
for (const prefix of ['primary', 'secondary']) {
|
||||
const type = String(data[`${prefix}_link_type`] || 'none')
|
||||
const label = String(data[`${prefix}_link_label`] || '').trim()
|
||||
const url = String(data[`${prefix}_link_url`] || '').trim()
|
||||
const targetId = data[`${prefix}_link_target_id`]
|
||||
|
||||
if (type !== 'none' && !label) {
|
||||
errors.push(`${prefix === 'primary' ? 'Primary' : 'Secondary'} CTA label is required when that link is enabled.`)
|
||||
}
|
||||
|
||||
if (url && !isSafeClientUrl(url)) {
|
||||
errors.push(`${prefix === 'primary' ? 'Primary' : 'Secondary'} CTA URL must start with / or https://.`)
|
||||
}
|
||||
|
||||
if (type === 'custom_url' && !url) {
|
||||
errors.push(`${prefix === 'primary' ? 'Primary' : 'Secondary'} custom CTA requires a URL.`)
|
||||
}
|
||||
|
||||
if (!['none', 'custom_url', 'explore', 'upload'].includes(type) && !url) {
|
||||
if (String(targetId || '').trim() === '') {
|
||||
errors.push(`${prefix === 'primary' ? 'Primary' : 'Secondary'} CTA requires a target id or fallback URL.`)
|
||||
} else if (!isIntegerLike(targetId) || Number(targetId) < 1) {
|
||||
errors.push(`${prefix === 'primary' ? 'Primary' : 'Secondary'} target id must be a whole number greater than or equal to 1.`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return errors
|
||||
}, [form.data])
|
||||
|
||||
const applyBackgroundFile = React.useCallback((file) => {
|
||||
setBackgroundImageError('')
|
||||
|
||||
if (!file) {
|
||||
form.setData('background_image_file', null)
|
||||
return
|
||||
}
|
||||
|
||||
const fileType = String(file.type || '').toLowerCase()
|
||||
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
|
||||
|
||||
if (!allowedTypes.includes(fileType)) {
|
||||
setBackgroundImageError('Use a JPG, PNG, or WEBP image for the announcement background.')
|
||||
return
|
||||
}
|
||||
|
||||
if (file.size > BACKGROUND_IMAGE_MAX_BYTES) {
|
||||
setBackgroundImageError('Background images must be 5 MB or smaller.')
|
||||
return
|
||||
}
|
||||
|
||||
form.setData('background_image_file', file)
|
||||
form.setData('remove_background_image', false)
|
||||
|
||||
if (backgroundPreviewUrl?.startsWith?.('blob:')) {
|
||||
URL.revokeObjectURL(backgroundPreviewUrl)
|
||||
}
|
||||
|
||||
setBackgroundPreviewUrl(URL.createObjectURL(file))
|
||||
}, [backgroundPreviewUrl, form])
|
||||
|
||||
const submit = (statusOverride = null) => {
|
||||
const validationErrors = validateForm(statusOverride)
|
||||
if (validationErrors.length > 0) {
|
||||
showToast(validationErrors[0], 'error')
|
||||
return
|
||||
}
|
||||
|
||||
form.transform((data) => {
|
||||
const payload = { ...data, status: statusOverride || data.status }
|
||||
if (isEditing) payload._method = 'patch'
|
||||
return payload
|
||||
})
|
||||
|
||||
form.post(submitUrl, {
|
||||
forceFormData: true,
|
||||
preserveScroll: true,
|
||||
onError: (errors) => {
|
||||
setActiveTab(resolveTabFromErrors(errors))
|
||||
const message = firstErrorMessage(errors) || 'Please correct the form and try again.'
|
||||
showToast(message, 'error')
|
||||
},
|
||||
onSuccess: () => {
|
||||
showToast(isEditing ? 'Homepage announcement updated.' : 'Homepage announcement created.', 'success')
|
||||
},
|
||||
onFinish: () => form.transform((data) => data),
|
||||
})
|
||||
}
|
||||
|
||||
const runPreview = async () => {
|
||||
const validationErrors = validateForm()
|
||||
if (validationErrors.length > 0) {
|
||||
const message = validationErrors[0]
|
||||
setPreviewError(message)
|
||||
showToast(message, 'error')
|
||||
return
|
||||
}
|
||||
|
||||
setPreviewBusy(true)
|
||||
setPreviewError('')
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
const payload = form.data
|
||||
|
||||
Object.entries(payload).forEach(([key, value]) => {
|
||||
if (value === null || value === undefined || key === 'id') return
|
||||
if (value instanceof File) {
|
||||
formData.append(key, value)
|
||||
return
|
||||
}
|
||||
formData.append(key, String(value))
|
||||
})
|
||||
|
||||
const response = await fetch(previewUrl, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: formData,
|
||||
})
|
||||
|
||||
const body = await response.json().catch(() => ({}))
|
||||
if (!response.ok) {
|
||||
throw new Error(body?.message || 'Preview failed.')
|
||||
}
|
||||
|
||||
setPreview(body.announcement || null)
|
||||
} catch (error) {
|
||||
const message = error.message || 'Preview failed.'
|
||||
setPreviewError(message)
|
||||
showToast(message, 'error')
|
||||
} finally {
|
||||
setPreviewBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout title={isEditing ? 'Edit Homepage Announcement' : 'Create Homepage Announcement'} subtitle="Compose, schedule, preview, and publish a premium homepage announcement card.">
|
||||
<Head title={isEditing ? 'Admin · Edit Homepage Announcement' : 'Admin · Create Homepage Announcement'} />
|
||||
<ShareToast
|
||||
key={toast.id}
|
||||
message={toast.message}
|
||||
visible={toast.visible}
|
||||
variant={toast.variant}
|
||||
duration={toast.variant === 'error' ? 3200 : 2200}
|
||||
onHide={() => setToast((current) => ({ ...current, visible: false }))}
|
||||
/>
|
||||
|
||||
{flash.success ? <div className="mb-6 rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
|
||||
{flash.error ? <div className="mb-6 rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}
|
||||
|
||||
<div className="sticky top-4 z-30 mb-6 rounded-[28px] border border-white/10 bg-slate-950/85 px-4 py-4 shadow-[0_20px_60px_rgba(0,0,0,0.35)] backdrop-blur-xl">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<Link href={indexUrl} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M10.5 3.5 6 8l4.5 4.5" />
|
||||
</svg>
|
||||
Back to announcements
|
||||
</Link>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button type="button" onClick={() => submit('draft')} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Save draft</button>
|
||||
<button type="button" onClick={() => submit('published')} className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-4 py-2 text-sm font-semibold text-emerald-100">Publish</button>
|
||||
<button type="button" onClick={() => submit('archived')} className="rounded-full border border-amber-300/20 bg-amber-300/10 px-4 py-2 text-sm font-semibold text-amber-100">Archive</button>
|
||||
{destroyUrl ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!window.confirm('Delete this homepage announcement?')) return
|
||||
form.delete(destroyUrl, { preserveScroll: true })
|
||||
}}
|
||||
className="rounded-full border border-rose-300/20 bg-rose-300/10 px-4 py-2 text-sm font-semibold text-rose-100"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_26rem] 2xl:grid-cols-[minmax(0,1fr)_28rem]">
|
||||
<div className="space-y-6">
|
||||
<div className="sticky top-[6.75rem] z-20 rounded-[28px] border border-white/10 bg-slate-950/80 p-2 backdrop-blur-xl">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{FORM_TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={[
|
||||
'rounded-2xl px-4 py-3 text-sm font-semibold transition',
|
||||
activeTab === tab.id
|
||||
? 'bg-sky-300/14 text-sky-100 ring-1 ring-sky-300/25'
|
||||
: 'text-slate-300 hover:bg-white/[0.04] hover:text-white',
|
||||
].join(' ')}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="px-2 pt-3 text-sm text-slate-400">{FORM_TABS.find((tab) => tab.id === activeTab)?.description}</p>
|
||||
</div>
|
||||
|
||||
{activeTab === 'overview' ? (
|
||||
<>
|
||||
<Section title="Basic" description="Core identity, status, and visibility controls.">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<TextField label="Title" value={form.data.title} onChange={(event) => form.setData('title', event.target.value)} error={form.errors.title} maxLength={180} />
|
||||
<TextField label="Badge text" value={form.data.badge_text} onChange={(event) => form.setData('badge_text', event.target.value)} error={form.errors.badge_text} maxLength={100} />
|
||||
</div>
|
||||
<TextField label="Subtitle" value={form.data.subtitle} onChange={(event) => form.setData('subtitle', event.target.value)} error={form.errors.subtitle} maxLength={255} />
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<SelectField label="Type" value={form.data.type} onChange={(nextValue) => form.setData('type', nextValue)} options={options.types} error={form.errors.type} />
|
||||
<SelectField label="Status" value={form.data.status} onChange={(nextValue) => form.setData('status', nextValue)} options={options.statuses} error={form.errors.status} />
|
||||
<TextField label="Priority" value={form.data.priority} onChange={(event) => form.setData('priority', event.target.value)} error={form.errors.priority} inputMode="numeric" />
|
||||
</div>
|
||||
<ToggleField label="Announcement is active" checked={Boolean(form.data.is_active)} onChange={(event) => form.setData('is_active', event.target.checked)} help="Inactive announcements never surface even when published." />
|
||||
</Section>
|
||||
|
||||
<Section title="Schedule" description="Keep launch cards time-bound and predictable.">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<DateTimeField label="Starts at" value={form.data.starts_at} onChange={(nextValue) => form.setData('starts_at', nextValue)} error={form.errors.starts_at} />
|
||||
<DateTimeField label="Ends at" value={form.data.ends_at} onChange={(nextValue) => form.setData('ends_at', nextValue)} error={form.errors.ends_at} />
|
||||
</div>
|
||||
</Section>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{activeTab === 'content' ? (
|
||||
<>
|
||||
<Section title="Content" description="Only sanitized HTML is stored and rendered on the homepage.">
|
||||
<div className="grid gap-3 text-sm text-slate-200">
|
||||
<span>Announcement message</span>
|
||||
<HomepageAnnouncementEditor
|
||||
content={form.data.content_html || ''}
|
||||
onChange={(nextValue) => form.setData('content_html', nextValue)}
|
||||
placeholder="Write the launch message with headings, lists, links, quotes, and highlighted copy."
|
||||
error={form.errors.content_html}
|
||||
minHeight={14}
|
||||
/>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 text-xs leading-6 text-slate-400">
|
||||
Supported formatting matches the homepage sanitizer: paragraphs, bold, italic, links, lists, H2, H3, and blockquotes.
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Links" description="Use entity targets when you know the id, or provide a fallback URL for a stable manual route.">
|
||||
<LinkFields title="Primary CTA" prefix="primary" form={form} options={options} />
|
||||
<LinkFields title="Secondary CTA" prefix="secondary" form={form} options={options} />
|
||||
</Section>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{activeTab === 'design' ? (
|
||||
<Section title="Design" description="Choose a launch-ready gradient, optional background image, and glass intensity.">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<SelectField label="Gradient preset" value={form.data.gradient_preset} onChange={(nextValue) => form.setData('gradient_preset', nextValue)} options={options.gradients} error={form.errors.gradient_preset} />
|
||||
<SelectField label="Theme preset" value={form.data.theme_preset} onChange={(nextValue) => form.setData('theme_preset', nextValue)} options={options.themes} error={form.errors.theme_preset} />
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<TextField label="Overlay opacity" value={form.data.overlay_opacity} onChange={(event) => form.setData('overlay_opacity', event.target.value)} error={form.errors.overlay_opacity} inputMode="numeric" />
|
||||
<div className="hidden md:block" />
|
||||
</div>
|
||||
<TextField label="Background image path or URL" value={form.data.background_image} onChange={(event) => form.setData('background_image', event.target.value)} error={form.errors.background_image} placeholder="/storage/homepage-announcements/... or https://..." />
|
||||
<BackgroundImageDropzone
|
||||
previewUrl={backgroundPreviewUrl}
|
||||
storedValue={form.data.background_image}
|
||||
selectedFileName={form.data.background_image_file?.name || ''}
|
||||
error={backgroundImageError || form.errors.background_image_file}
|
||||
onSelect={applyBackgroundFile}
|
||||
/>
|
||||
<ToggleField label="Remove stored background image" checked={Boolean(form.data.remove_background_image)} onChange={(event) => {
|
||||
form.setData('remove_background_image', event.target.checked)
|
||||
if (event.target.checked) {
|
||||
setBackgroundImageError('')
|
||||
form.setData('background_image_file', null)
|
||||
if (backgroundPreviewUrl?.startsWith?.('blob:')) {
|
||||
URL.revokeObjectURL(backgroundPreviewUrl)
|
||||
}
|
||||
setBackgroundPreviewUrl('')
|
||||
}
|
||||
}} help="Turn this on to clear the saved background image on the next save." />
|
||||
</Section>
|
||||
) : null}
|
||||
|
||||
{activeTab === 'behavior' ? (
|
||||
<Section title="Behavior" description="Dismiss controls let you force a fresh surface when the message materially changes.">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<TextField label="Dismiss version" value={form.data.dismiss_version} onChange={(event) => form.setData('dismiss_version', event.target.value)} error={form.errors.dismiss_version} inputMode="numeric" />
|
||||
<SelectField label="Placement" value={form.data.placement} onChange={(nextValue) => form.setData('placement', nextValue)} options={options.placements} error={form.errors.placement} />
|
||||
</div>
|
||||
<ToggleField label="Users can dismiss this card" checked={Boolean(form.data.is_dismissible)} onChange={(event) => form.setData('is_dismissible', event.target.checked)} help="When disabled, the card remains visible and no restore pill is shown." />
|
||||
</Section>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<aside className="space-y-6 xl:sticky xl:top-[7.5rem] xl:self-start">
|
||||
<div>
|
||||
<Section title="Preview" description="Refresh the preview to render the sanitized content and resolved CTA payload exactly as the homepage card sees it.">
|
||||
<div className="-mx-6 -mt-6 mb-5 border-b border-white/10 bg-slate-950/92 px-6 py-4 backdrop-blur-xl">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button type="button" onClick={runPreview} disabled={previewBusy} className="rounded-full border border-sky-300/20 bg-sky-300/12 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:bg-sky-300/18 disabled:opacity-60">{previewBusy ? 'Refreshing preview…' : 'Refresh preview'}</button>
|
||||
<button type="button" onClick={() => submit()} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Save changes</button>
|
||||
</div>
|
||||
{previewError ? <p className="mt-3 text-sm text-rose-300">{previewError}</p> : null}
|
||||
</div>
|
||||
<div className="overflow-hidden rounded-[30px] border border-white/10 bg-black/20 py-2">
|
||||
<HomepageAnnouncement announcement={previewWithLocalImage} mode="preview" />
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
110
resources/js/Pages/Admin/HomepageAnnouncements/Index.jsx
Normal file
110
resources/js/Pages/Admin/HomepageAnnouncements/Index.jsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import React from 'react'
|
||||
import { Head, Link, router, usePage } from '@inertiajs/react'
|
||||
import AdminLayout from '../../../Layouts/AdminLayout'
|
||||
import HomepageAnnouncement from '../../../components/homepage/HomepageAnnouncement'
|
||||
|
||||
function formatDateRange(startsAt, endsAt) {
|
||||
const formatter = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
|
||||
const start = startsAt ? formatter.format(new Date(startsAt)) : 'Now'
|
||||
const end = endsAt ? formatter.format(new Date(endsAt)) : 'Open ended'
|
||||
return `${start} → ${end}`
|
||||
}
|
||||
|
||||
function StatusBadge({ status, active }) {
|
||||
const tone = status === 'published'
|
||||
? 'border-emerald-300/20 bg-emerald-300/10 text-emerald-100'
|
||||
: status === 'archived'
|
||||
? 'border-amber-300/20 bg-amber-300/10 text-amber-100'
|
||||
: 'border-slate-300/15 bg-slate-300/10 text-slate-200'
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${tone}`}>
|
||||
<span className={`h-2 w-2 rounded-full ${active ? 'bg-emerald-300' : 'bg-slate-500'}`} />
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default function HomepageAnnouncementsIndex({ announcements, createUrl }) {
|
||||
const { props } = usePage()
|
||||
const flash = props.flash ?? {}
|
||||
|
||||
return (
|
||||
<AdminLayout title="Homepage Announcements" subtitle="Schedule launch cards, homepage notices, and editorial announcements below the featured artwork hero.">
|
||||
<Head title="Admin · Homepage Announcements" />
|
||||
|
||||
{flash.success ? <div className="mb-6 rounded-2xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-100">{flash.success}</div> : null}
|
||||
{flash.error ? <div className="mb-6 rounded-2xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-100">{flash.error}</div> : null}
|
||||
|
||||
<div className="mb-6 flex items-center justify-between gap-4">
|
||||
<div className="max-w-2xl text-sm leading-6 text-slate-400">
|
||||
Only the highest-priority published announcement that is active and inside its visibility window appears on the homepage.
|
||||
</div>
|
||||
<Link href={createUrl} className="rounded-full border border-sky-300/20 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-300/18">
|
||||
Create announcement
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{(announcements?.data || []).length === 0 ? (
|
||||
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] px-6 py-10 text-center text-slate-400">
|
||||
No homepage announcements exist yet.
|
||||
</div>
|
||||
) : (announcements.data.map((announcement) => (
|
||||
<article key={announcement.id} className="overflow-hidden rounded-[30px] border border-white/10 bg-white/[0.03]">
|
||||
<div className="grid gap-6 border-b border-white/8 px-6 py-6 lg:grid-cols-[minmax(0,1.2fr)_auto] lg:items-start">
|
||||
<div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<StatusBadge status={announcement.status} active={announcement.is_active} />
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">{announcement.type}</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Priority {announcement.priority}</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Dismiss v{announcement.dismiss_version}</span>
|
||||
</div>
|
||||
<h2 className="mt-4 text-2xl font-semibold tracking-[-0.04em] text-white">{announcement.title}</h2>
|
||||
<p className="mt-2 text-sm text-slate-400">{formatDateRange(announcement.starts_at, announcement.ends_at)}</p>
|
||||
<p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">{announcement.placement.replaceAll('_', ' ')}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3 lg:justify-end">
|
||||
<Link href={announcement.edit_url} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Edit</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!window.confirm('Delete this homepage announcement?')) return
|
||||
router.delete(announcement.destroy_url, { preserveScroll: true })
|
||||
}}
|
||||
className="rounded-full border border-rose-300/20 bg-rose-300/10 px-4 py-2 text-sm font-semibold text-rose-100 transition hover:bg-rose-300/16"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-black/10 py-2">
|
||||
<HomepageAnnouncement announcement={announcement.preview} mode="preview" />
|
||||
</div>
|
||||
</article>
|
||||
))) }
|
||||
</div>
|
||||
|
||||
{announcements?.last_page > 1 ? (
|
||||
<div className="mt-8 flex items-center justify-between gap-4">
|
||||
<p className="text-xs text-slate-500">Showing {announcements.from}–{announcements.to} of {announcements.total} announcements</p>
|
||||
<div className="flex gap-2">
|
||||
{announcements.links.map((link, index) => (
|
||||
link.url ? (
|
||||
<button
|
||||
key={`${link.label}-${index}`}
|
||||
type="button"
|
||||
onClick={() => router.get(link.url, {}, { preserveScroll: true })}
|
||||
className={`rounded-lg px-3 py-1.5 text-xs transition ${link.active ? 'bg-sky-300/15 text-sky-100' : 'bg-white/[0.04] text-slate-400 hover:bg-white/[0.08] hover:text-white'}`}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
) : <span key={`${link.label}-${index}`} className="rounded-lg px-3 py-1.5 text-xs text-slate-600" dangerouslySetInnerHTML={{ __html: link.label }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</AdminLayout>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user