import { Head, Link, useForm } from '@inertiajs/react'; import { AdminLayout } from '@/layouts/admin-layout'; type Customer = { id: number; name: string; email: string; phone: string | null; address_line1: string | null; address_line2: string | null; city: string | null; postal_code: string | null; country: string | null; }; type CustomerEditProps = { customer: Customer; }; type CustomerForm = { name: string; email: string; phone: string; address_line1: string; address_line2: string; city: string; postal_code: string; country: string; password: string; }; export default function AdminCustomerEdit({ customer }: CustomerEditProps) { const form = useForm({ name: customer.name, email: customer.email, phone: customer.phone || '', address_line1: customer.address_line1 || '', address_line2: customer.address_line2 || '', city: customer.city || '', postal_code: customer.postal_code || '', country: customer.country || '', password: '', }); const submit = (event: React.FormEvent) => { event.preventDefault(); form.transform((data) => ({ ...data, password: data.password === '' ? null : data.password, })); form.put(`/admin/customers/${customer.id}`); }; return (
Back to customer

Edit Customer

form.setData('name', event.target.value) } className={inputClassName} required /> form.setData('email', event.target.value) } className={inputClassName} required />
form.setData('phone', event.target.value) } className={inputClassName} /> form.setData('password', event.target.value) } className={inputClassName} placeholder="Leave blank to keep current password" />
form.setData( 'address_line1', event.target.value, ) } className={inputClassName} /> form.setData( 'address_line2', event.target.value, ) } className={inputClassName} />
form.setData('city', event.target.value) } className={inputClassName} /> form.setData( 'postal_code', event.target.value, ) } className={inputClassName} /> form.setData('country', event.target.value) } className={inputClassName} />
); } function Field({ label, error, children, }: { label: string; error?: string; children: React.ReactNode; }) { return (
{children}
{error ? (

{error}

) : null}
); } const inputClassName = 'w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]';