init

2026-09-03 22:02:52 +09:00
commit 659725de15
90 changed files with 2840 additions and 0 deletions
@@ -0,0 +1,55 @@
+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>
+  );
+}