Address Select - Kitchen Sink

Picker with caller-owned editor modal

Add New Address and the per-card pencil call back to this page, which opens the modal, binds the editor form, and saves through an async remote form. Saved addresses appear in the list and become selected.

Athos Kanari

Vasiliou Kousouli, Limassol, 3020, Cyprus

+357 97676612

Wurd Altidouka

Agoratopia Ltd

Vasiliou Kousouli, Limassol, 3020, Cyprus

+357 97676612

import { AddressSelect } from '@mediayard/agoratopia-ui/components/address-select';

<!-- AddressSelect only picks/triggers; it never opens a modal itself. -->
<AddressSelect
	{addresses}
	label="Delivery"
	selected_field={checkout.fields.shipping_address_id}
	mode_field={checkout.fields.shipping_mode}
	onaddnew={() => openEditor(null)}
	onedit={(id) => openEditor(id)}
/>

Editor dialog (composed by the caller)

The Dialog is a presentational shell. The caller renders AddressForm inside its own <form> and wires the footer Save button to an async remote form submission.

Use the Delivery picker above to open this modal.

import { Dialog } from '@mediayard/agoratopia-ui/components/dialogs';

<!-- The consumer owns the dialog, the form fields, and the async save. -->
<Dialog {open} title="Add New Address" onclose={() => (open = false)}>
	<form id="editor" {...editor.enhance(handleSave)}>
		<AddressForm fields={editorFields} {allowed_countries} />
	</form>

	{#snippet footer()}
		<Button type="submit" form="editor" variant="primary">Save Address</Button>
	{/snippet}
</Dialog>