Addresses

{!props.showForm && !props.isError && !props.isLoading && ( )}
{props.isError ? (

Failed to load addresses

) : props.isLoading ? (
{[1, 2].map((n) => (
))}
) : null} {!props.isError && !props.isLoading && props.showForm && (

{props.editingId ? "Edit address" : "New address"}

props.onFieldChange("firstName", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
props.onFieldChange("lastName", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
props.onFieldChange("line1", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
props.onFieldChange("line2", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" placeholder="Optional" />
props.onFieldChange("city", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
props.onFieldChange("state", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
props.onFieldChange("postalCode", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
props.onFieldChange("country", e.target.value)} className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
)} {!props.isError && !props.isLoading && props.addresses.length === 0 && !props.showForm ? (

No saved addresses yet.

) : !props.isError && !props.isLoading ? (
{props.addresses.map((addr) => (
{addr.firstName} {addr.lastName} {addr.type} {addr.isDefault && ( Default )}

{addr.line1} {addr.line2 ? `, ${addr.line2}` : ""}

{addr.city}, {addr.state} {addr.postalCode}, {addr.country}

))}
) : null}