useUserShipping

Features

useUserShipping composable can be used to:

• fetch existing shipping addresses,
• submit new shipping addresses,
• modify and delete existing shipping addresses.

API

• load - function for fetching user addresses. When invoked, it requests data from the API and populates shipping property.

load(): Promise<void>;

---

• addAddress - function for posting new shipping address. This method accepts a single params object. The params has the following options:

  • address: ADD_ADDRESS_PARAMS

interface ADD_ADDRESS_PARAMS {
  address: {
    id: string;
    attributes: {
      salutation: string;
      firstName: string;
      lastName: string;
      address1: string;
      address2: string | null;
      address3: string | null;
      zipCode: string;
      city: string;
      country: string;
      iso2Code: string;
      company: string | null;
      phone: string | null;
      isDefaultShipping: boolean;
      isDefaultBilling: boolean;
    };
  };
}

addAddress(params: ADD_ADDRESS_PARAMS): Promise<void>;

---

• deleteAddress - function for deleting existing shipping address. This method accepts a single params object. The params has the following options:

  • address: DELETE_ADDRESS_PARAMS

interface DELETE_ADDRESS_PARAMS {
  address: {
    id: string;
    attributes: {
      salutation: string;
      firstName: string;
      lastName: string;
      address1: string;
      address2: string | null;
      address3: string | null;
      zipCode: string;
      city: string;
      country: string;
      iso2Code: string;
      company: string | null;
      phone: string | null;
      isDefaultShipping: boolean;
      isDefaultBilling: boolean;
    };
  };
}

deleteAddress(params: DELETE_ADDRESS_PARAMS): Promise<void>;

---

• updateAddress - function for updating existing shipping address. This method accepts a single params object. The params has the following options:

  • address: UPDATE_ADDRESS_PARAMS

interface UPDATE_ADDRESS_PARAMS {
  address: {
    id: string;
    attributes: {
      salutation: string;
      firstName: string;
      lastName: string;
      address1: string;
      address2: string | null;
      address3: string | null;
      zipCode: string;
      city: string;
      country: string;
      iso2Code: string;
      company: string | null;
      phone: string | null;
      isDefaultShipping: boolean;
      isDefaultBilling: boolean;
    };
  };
}

updateAddress(params: UPDATE_ADDRESS_PARAMS): Promise<void>;

---

• setDefaultAddress - function for settings an existing shipping address as default. This method accepts a single params object. The params has the following options:

  • address: SET_DEFAULT_ADDRESS_PARAMS

interface SET_DEFAULT_ADDRESS_PARAMS {
  address: {
    id: string;
    attributes: {
      salutation: string;
      firstName: string;
      lastName: string;
      address1: string;
      address2: string | null;
      address3: string | null;
      zipCode: string;
      city: string;
      country: string;
      iso2Code: string;
      company: string | null;
      phone: string | null;
      isDefaultShipping: boolean;
      isDefaultBilling: boolean;
    };
  };
}

setDefaultAddress(params: SET_DEFAULT_ADDRESS_PARAMS): Promise<void>;

---

• shipping: UserShipping - reactive data object containing response from the backend.

type UserShipping = {
  addresses: CustomerAddress[];
};

interface CustomerAddress {
  type: 'addresses';
  id: string;
  attributes: CustomerAddressAttributes;
  links: {
    self: string;
  };
}

interface CustomerAddressAttributes {
  salutation: string;
  firstName: string;
  lastName: string;
  address1: string;
  address2: string | null;
  address3: string | null;
  zipCode: string;
  city: string;
  country: string;
  iso2Code: string;
  company: string | null;
  phone: string | null;
  isDefaultShipping: boolean;
  isDefaultBilling: boolean;
}

---

• loading: boolean - reactive object containing information about loading state of load, addAddress, deleteAddress, updateAddress and setDefaultAddress methods.

---

• error: UseUserShippingErrors - reactive object containing the error message, if some properties failed for any reason.

interface UseUserShippingErrors {
  addAddress: Error;
  deleteAddress: Error;
  updateAddress: Error;
  load: Error;
  setDefaultAddress: Error;
}

Getters

• getAddresses - returns list of shipping addresses.

• getDefault - returns a default shipping address.

• getTotal - returns total number of shipping addresses user has.

• getId - returns id from an individual address.

• getPostCode - returns post code from an individual address.

• getStreetName - returns street name from an individual address.

• getStreetNumber - returns street number from an individual address.

• getCity - returns city name from an individual address.

• getFirstName - returns first name from an individual address.

• getLastName - returns last name from an individual address.

• getCountry - returns country name from an individual address.

• getPhone - return phone number from an individual address.

• getCompanyName - returns company name from an individual address.

• getApartmentNumber - returns apartment number from an individual address.

• isDefault - return information if address is current default.

interface UserShippingGetters {
  getAddresses: (
    shipping: UserShipping,
    criteria?: Record<string, any>,
  ) => ShippingAddress[];
  getDefault: (shipping: UserShipping) => CustomerAddress;
  getTotal: (shipping: UserShipping) => number;
  getId: (address: CustomerAddress) => string | number;
  getPostCode: (address: CustomerAddress) => string;
  getStreetName: (address: CustomerAddress) => string;
  getStreetNumber: (address: CustomerAddress) => string | number;
  getCity: (address: CustomerAddress) => string;
  getFirstName: (address: CustomerAddress) => string;
  getLastName: (address: CustomerAddress) => string;
  getCountry: (address: CustomerAddress) => string;
  getPhone: (address: CustomerAddress) => string;
  getCompanyName: (address: CustomerAddress) => string;
  getApartmentNumber: (address: CustomerAddress) => string | number;
  isDefault: (address: CustomerAddress) => boolean;
}

Example

import { onSSR } from '@vue-storefront/core';
import { useUserShipping, userShippingGetters } from '@spryker-vsf/composables';

export default {
  setup() {
    const {
      shipping,
      load,
      addAddress,
      deleteAddress,
      updateAddress,
    } = useUserShipping();

    onSSR(async () => {
      await load();
    });

    return {
      shipping: computed(() =>
        userShippingGetters.getAddresses(shipping.value),
      ),
      userShippingGetters,
    };
  },
};