56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { useState } from "react";
|
|
import type { Address, OrderDetail } from "@orderops/shared";
|
|
|
|
interface ShippingAddressFormProps {
|
|
order: OrderDetail;
|
|
onSave: (address: Address) => Promise<void>;
|
|
}
|
|
|
|
const addressFields: Array<{ key: keyof Address; label: string }> = [
|
|
{ key: "fullName", label: "Full name" },
|
|
{ key: "line1", label: "Line 1" },
|
|
{ key: "line2", label: "Line 2" },
|
|
{ key: "city", label: "City" },
|
|
{ key: "state", label: "State" },
|
|
{ key: "postalCode", label: "Postal code" },
|
|
{ key: "country", label: "Country" }
|
|
];
|
|
|
|
export function ShippingAddressForm({ order, onSave }: ShippingAddressFormProps) {
|
|
const [form, setForm] = useState(order.shippingAddress);
|
|
|
|
return (
|
|
<section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
<h3 className="mb-3 text-sm font-semibold text-slate-700">Shipping address</h3>
|
|
<form
|
|
className="grid gap-3 md:grid-cols-2"
|
|
onSubmit={async (event) => {
|
|
event.preventDefault();
|
|
await onSave(form);
|
|
}}
|
|
>
|
|
{addressFields.map(({ key, label }) => (
|
|
<label key={key} className="block text-sm text-slate-700">
|
|
<span className="mb-1 block">{label}</span>
|
|
<input
|
|
className="w-full rounded-lg border border-slate-300 px-3 py-2"
|
|
value={form[key] ?? ""}
|
|
onChange={(event) =>
|
|
setForm((current) => ({
|
|
...current,
|
|
[key]: event.target.value || (key === "line2" ? null : event.target.value)
|
|
}))
|
|
}
|
|
/>
|
|
</label>
|
|
))}
|
|
<div className="md:col-span-2">
|
|
<button className="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white" type="submit">
|
|
Save address
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
);
|
|
}
|