Addresses

Purpose

Addresses is the Profile-tab reusable that manages customer addresses, including create/edit/delete flows, primary-address selection, and delivery-zone validation.

It centralizes address and invoice state synchronization with shared Alpine stores used by the Profile account area.

Where it's rendered

In Components/Profile/Default.liquid:

{% render 'Reusables\\Addresses\\Default', addresses: addresses, countriesList: countriesList %}

Inputs (Liquid render parameters)

This reusable is rendered with the named parameters addresses and countriesList from the Profile context.

Template behavior (Liquid + Alpine)

The template renders the address management UI and mounts Alpine state through addressesreusabledefault.initComponent(...).

Data contract (JS runtime)

The root element binds:

  x-data='addressesreusabledefault.initComponent(addresses, countriesList, deliveryZonesEnabled, ...translations)'>
 
Factory signature (see `Reusables/Addresses/Default.js`):

- `addresses`
- `deliveryZonesEnabled`
 
- `inValidAddressMessageButton`
- `removeAddressErrorMessage`
- `postalCodesErrorMessage`
### Normalization
 
- `startAddresses`: original input array
- `addresses`: `normalizedAddresses.map((a) => a.address)`
- `invoices`: `normalizedAddresses.map((a) => a.invoice || {})`
  - if delivery zones enabled → `normalizedAddresses.map((a) => a.isValid)`
 
It also ensures there is an **empty address draft at the end** (used as the “new address” form row).

## JavaScript
### Global object
 

const addressesreusabledefault = {
}

It’s instantiated from Liquid via:

initComponent(addresses, countriesList, deliveryZonesEnabled, inValidAddressTitle, inValidAddressMessage, inValidAddressMessageButton, removeAddressErrorMessage, postalCodesErrorMessage)

• Factory that normalizes the input addresses and returns the Alpine component state + methods.

  • array -> as-is
  • single object -> wrapped into [addresses]
  • falsy -> []
  • this.addresses = normalizedAddresses.map(a => a.address)
  • invoiceOption[i] = strings/non-empty check on invoice.companyName

• Initializes validity:

  • if delivery zones enabled -> storedAddressesValidity = normalizedAddresses.map(a => a.isValid)
  • else -> all true

---

init

• Runs when Alpine mounts.

• Ensures a draft address exists and syncs state to shared stores.
  Key behaviors

• Publishes to Alpine.store('sharedAddresses'):

  • sharedAddresses.addresses

  • sharedAddresses.validAddresses

  • sharedAddresses.invoices

  • Calls resetToasts()

  • If true, calls controlToastVisibility()

• Watches Alpine.store('profile').tabChanged:

  • If editing, calls cancelEditing(selectedAddressIndex, true) and exits edit mode.

---

clearInvalidAddressFields

startNewAddress

scrollToTop

startEditing(index)

• Enters edit mode for an existing address, or prepares the draft last-row for creating a new one.

Key behaviors

• Clears toasts.
• If index == null, targets the last draft row; if it’s no longer empty, it calls startNewAddress() then uses the new last index.
• Stores rollback snapshots:
  • originalData[index] = { address: {...}, invoice: {...} }
  • originalInvoiceOption[index] = invoiceOption[index]
• Resets per-index UI state (touched, openPopup, validity booleans).
• If editing an existing address:
  • delivery-zones mode -> calls onCountryChange(index) (fetches postal codes + validates selects)
  • else -> validates all address fields on next tick.

---

cancelEditing(index, skipToastReset = false)

• Exits edit mode and restores the address/invoice from snapshots.

Key behaviors

• Restores addresses[index], invoices[index], and invoiceOption[index] from originalData/originalInvoiceOption.
• If skipToastReset is false, sets Alpine.store('sharedAddresses').runToast = true (so delivery-zones warnings can be recalculated).
• Scrolls to top via scrollToTop().

---

saveAddress(index, errorMessage) (async)

• Validates the form and creates or updates the user address via the SDK.

Key behaviors

• Collects:
  • address fields: [id^="profile-address-edit-"]
  • invoice fields: [id^="company-profile-address-edit-"]
• Validates every field via validateField(...) and updates errors.
• Builds request payload:
  • address: this.addressData
  • invoice: invoiceOption[index] ? this.invoiceData : null
  • isValid: true
• Create vs update decision:
  • missing/empty addresses[index].id -> createUserAddress(...) (and removes address.id from payload)
  • else -> updateUserAddress(payload, id)
• On failure (non-2xx or success === false) shows a toast and triggers sharedAddresses.runToast = true.
• On success:
  • updates addresses[index] and invoices[index]
  • sets validity flags to true
  • calls moveEmptyAddressToEnd() to keep the blank draft last
  • scrolls to top and triggers sharedAddresses.runToast = true

---

confirmAddressDeletion(index, modalTranslations)

• Opens a confirmation modal via Alpine.store('modal') and delegates deletion to removeAddress(index).

---

removeAddress(index) (async)

• Deletes an address via servicesreusabledefault.deleteUserAddress(id) and removes it from all parallel arrays.

Key behaviors

• Sets loading flags (isRemoving[index], isAddressStateChanging) and disables interactions.

---

Array ordering helpers

The JS includes small utilities to keep the “draft” address last and to reorder parallel arrays consistently:

• moveItem(array, fromIndex, toIndex) moves an entry within an array.
• moveToFront(array, index) moves an entry to the start of an array.

moveItem

moveToFront

Other helper/method names:

• action(...) routes address-row button interactions (edit/save/cancel flows) through a shared Alpine handler.
• On failure shows removeAddressErrorMessage toast and restores loading flags.
• On success calls removeAddressData(index).

---

setAddressAsPrimary(index, setAddressAsPrimaryErrorMessage) (async)

• Sets an address as primary in the backend and then reorders all arrays so the selected item becomes index 0.

Key behaviors

• Calls servicesreusabledefault.setUserAddressAsPrimary(id).
• On success unshifts the selected item to index 0 across:
  • addresses, invoices, storedAddressesValidity, invoiceOption, etc.

---

validateField(field)

• Implements field validation and writes error state to errors[field.name].

Key behaviors

• Required fields:
  • input: invalid when empty
  • select: invalid when no value / first option
• Email validation:
  • basic regex check -> invalidEmail
• Adds/removes UI classes:
  • invalid / valid on inputs and .select-wrap
  • toggles .icon-state classes (ic-warning / ic-check-circle-fill)

---

handleInput(event, index) / handleInvoiceInput(event, index)

• Marks the row as touched, validates the field, and recomputes addressValidity[index] or invoiceValidity[index].

---

isAddressModified(index)

• Computes whether the Save button should be enabled.

Key behaviors

• Compares current form buffers (addressData, invoiceData) with persisted arrays (addresses[index], invoices[index]).

setDataForList

Builds a normalized address payload for list/state synchronization after create/update/edit operations.

setInvoiceDataForList

Builds the invoice payload aligned with the same index used by setDataForList, so address/invoice arrays remain synchronized.

• Also detects invoice toggle changes (invoiceOption[index] vs originalInvoiceOption[index]).

---

onCountryChange(index) (async)

• Delivery-zones mode helper: syncs countryCode <-> country and fetches postal codes.

Key behaviors

• Resets postal state when no country is selected.
• Sets errors[postalCode] = 'wait' while fetching.
• Calls servicesreusabledefault.fetchPostalCodes(countryCode).
• Maps errors to:
  • errorFetchingPostalCodes (unexpected response shape)
  • notFound (failed request / no data)
• On success:
  • stores this.postalCodes
  • tries to keep a saved postal code from originalData[index] if still available
  • revalidates all address fields on next tick.

---

controlToastVisibility

resetToasts

• Delivery-zones mode: shows/removes per-address invalid toasts, and wires toast “scroll to card” button.

Key behaviors

• Uses invalidToastId[index] to avoid duplicates.
• Builds toast extra HTML with a button that scrolls to .address-wrap-box at the same index.

---

moveEmptyAddressToEnd

• Ensures the completely empty address object is always the last item.

Key behaviors

• Finds the first address where all values are "" and moves it to the end across all parallel arrays.

Global Alpine stores

The reusable syncs shared state to Alpine.store('sharedAddresses'):

• .addresses
• .validAddresses
• .invoices

It also uses:

• .runToast flag to (re)trigger delivery-zones invalid-address toast logic.

It uses Alpine.store('toast') for errors and delivery-zone warnings.

Services / API calls

This reusable calls SDK wrappers from servicesreusabledefault:

• createUserAddress(data) (when address.id is missing/empty)
• updateUserAddress(data, id)

On non-2xx or success === false it shows an error toast.

Dependencies

• Alpine.js (component state + watchers)
• Alpine.store('toast')
• Alpine.store('sharedAddresses')
• servicesreusabledefault.createUserAddress(...)
• servicesreusabledefault.updateUserAddress(...)

Notes

• The “Add new address” card button is rendered with the disabled attribute in Liquid.
• In list view the template uses addresses.slice(0, -1); the last address is expected to be the “draft” row.
• Delivery zones mode uses countryCode + dynamically loaded postal codes; if input data has countryCode empty, the selects may be disabled until the user chooses a country.

Examples

Storefront model example (from Profile)

This reusable doesn’t receive the full Profile model — only addresses and countriesList.

Sanitized example based on your Profile model:

{
  "countriesList": [
    { "code": "COUNTRY_CODE", "name": "Country name" },
    { "code": "...", "name": "..." }
  ],
  "addresses": [
    {
      "address": {
        "id": "ADDRESS_ID",
        "firstName": "FIRST_NAME",
        "lastName": "LAST_NAME",
        "phoneNumber": "PHONE",
        "email": "EMAIL",
        "address1": "ADDRESS_LINE_1",
        "additionalInfo": "",
        "label": "",
        "city": "CITY",
        "postalCode": "POSTAL_CODE",
        "state": "STATE",
        "country": "COUNTRY_NAME",
        "countryCode": "COUNTRY_CODE"
      },
      "invoice": {
        "companyName": "COMPANY_NAME",
        "profession": "PROFESSION",
        "companyPhoneNumber": "COMPANY_PHONE",
        "taxOffice": "TAX_OFFICE",
        "tin": "TIN"
      },
      "isValid": true
    },
    {
      "address": {
        "id": "...",
        "firstName": "...",
        "lastName": "..."
      },
      "invoice": null,
      "isValid": true
    }
  ]
}