import { Head, Link, useForm } from '@inertiajs/react'; import { Switch } from '@/components/ui/switch'; import { AdminLayout } from '@/layouts/admin-layout'; type EventOption = { value: string; label: string; }; type WebhookEndpointForm = { name: string; url: string; secret: string; subscribed_events: string[]; headers_json: string; is_active: boolean; max_attempts: number; timeout_seconds: number; }; type WebhookEndpointCreateProps = { eventOptions: EventOption[]; }; export default function WebhookEndpointCreate({ eventOptions, }: WebhookEndpointCreateProps) { const form = useForm({ name: '', url: '', secret: '', subscribed_events: [], headers_json: '', is_active: true, max_attempts: 3, timeout_seconds: 10, }); const submit = (event: React.FormEvent) => { event.preventDefault(); form.transform((data) => ({ ...data, secret: data.secret.trim() === '' ? null : data.secret.trim(), headers_json: data.headers_json.trim(), })); form.post('/admin/webhook-endpoints'); }; return ( ); } type FormViewProps = { title: string; form: ReturnType>; eventOptions: EventOption[]; onSubmit: (event: React.FormEvent) => void; submitLabel: string; secretHelp: string; }; export function WebhookEndpointFormView({ title, form, eventOptions, onSubmit, submitLabel, secretHelp, }: FormViewProps) { const toggleEvent = (eventName: string) => { form.setData( 'subscribed_events', form.data.subscribed_events.includes(eventName) ? form.data.subscribed_events.filter( (item) => item !== eventName, ) : [...form.data.subscribed_events, eventName], ); }; return (

{title}

Configure signed delivery targets for external integrations.

Back to endpoints
form.setData('name', event.target.value) } required className="w-full rounded-lg border border-border bg-control px-3 py-2 text-sm text-main outline-none focus:border-primary" /> form.setData('url', event.target.value) } required placeholder="https://example.com/webhooks/parts" className="w-full rounded-lg border border-border bg-control px-3 py-2 text-sm text-main outline-none focus:border-primary" />
form.setData('secret', event.target.value) } placeholder="Optional" className="w-full rounded-lg border border-border bg-control px-3 py-2 text-sm text-main outline-none focus:border-primary" /> form.setData( 'max_attempts', Number(event.target.value) || 1, ) } className="w-full rounded-lg border border-border bg-control px-3 py-2 text-sm text-main outline-none focus:border-primary" /> form.setData( 'timeout_seconds', Number(event.target.value) || 1, ) } className="w-full rounded-lg border border-border bg-control px-3 py-2 text-sm text-main outline-none focus:border-primary" />
form.setData('is_active', checked) } ariaLabel="Toggle webhook endpoint active state" /> Active endpoint
{eventOptions.map((option) => ( ))}