"use client";
import { useModuleClient } from "@86d-app/core/client";
import { useState } from "react";
import { useCustomerApi } from "./_hooks";
import AddressBookTemplate from "./address-book.mdx";
interface Address {
id: string;
type: "billing" | "shipping";
firstName: string;
lastName: string;
company?: string;
line1: string;
line2?: string;
city: string;
state: string;
postalCode: string;
country: string;
phone?: string;
isDefault: boolean;
}
type AddressForm = Omit
;
const emptyForm: AddressForm = {
type: "shipping",
firstName: "",
lastName: "",
line1: "",
city: "",
state: "",
postalCode: "",
country: "",
};
export function AddressBook() {
const api = useCustomerApi();
const client = useModuleClient();
const { data, isLoading, isError, refetch } =
api.listAddresses.useQuery() as {
data: { addresses: Address[] } | undefined;
isLoading: boolean;
isError: boolean;
refetch: () => void;
};
const [showForm, setShowForm] = useState(false);
const [editingId, setEditingId] = useState(null);
const [form, setForm] = useState(emptyForm);
const [saving, setSaving] = useState(false);
const [deletingId, setDeletingId] = useState(null);
function startCreate() {
setForm(emptyForm);
setEditingId(null);
setShowForm(true);
}
function startEdit(address: Address) {
const next: AddressForm = {
type: address.type,
firstName: address.firstName,
lastName: address.lastName,
line1: address.line1,
city: address.city,
state: address.state,
postalCode: address.postalCode,
country: address.country,
};
if (address.company) next.company = address.company;
if (address.line2) next.line2 = address.line2;
if (address.phone) next.phone = address.phone;
setForm(next);
setEditingId(address.id);
setShowForm(true);
}
function updateField(field: keyof AddressForm, value: string) {
setForm((prev) => ({ ...prev, [field]: value }));
}
async function handleSave() {
setSaving(true);
try {
if (editingId) {
await client
.module("customers")
.store["/customers/me/addresses/:id"].mutate({
params: { id: editingId },
...form,
});
} else {
await client
.module("customers")
.store["/customers/me/addresses/create"].mutate(form);
}
setShowForm(false);
setEditingId(null);
refetch();
} catch {
// Error handling is in the template
} finally {
setSaving(false);
}
}
async function handleDelete(id: string) {
setDeletingId(id);
try {
await client
.module("customers")
.store["/customers/me/addresses/:id/delete"].mutate({
params: { id },
});
refetch();
} catch {
// Silently fail
} finally {
setDeletingId(null);
}
}
return (
refetch()}
showForm={showForm}
editingId={editingId}
form={form}
saving={saving}
deletingId={deletingId}
onAdd={startCreate}
onEdit={startEdit}
onDelete={handleDelete}
onCancel={() => {
setShowForm(false);
setEditingId(null);
}}
onSave={handleSave}
onFieldChange={updateField}
/>
);
}