useUserAddresses()

The useUserAddresses() composable allows for:

• loading user addresses
• creating user addresses
• updating user addresses
• deleting user addresses

Important!

This composable works only for authenticated users.

addresses

Main data object populated by the load() method.

Type

const addresses: ComputedProperty<Address[];

References: Address

Example

import { useUserAddresses } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { addresses } = useUserAddresses();

    return { addresses };
  }
};

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseUserAddressesLoading>;

References: UseUserAddressesLoading

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedProperty<UseUserAddressesError>;

References: UseUserAddressesError

load()

Fetches user addresses from the API and saves the fetched object in the addresses property. Under the hood, it sends requests to the getAllConsents API endpoint.

Type

interface LoadUserAddressesProps {
  fields?: 'BASIC' | 'DEFAULT' | 'FULL' | string | string[];
}

async function load: (props?: LoadUserAddressesProps): Promise<void>;

References: LoadUserAddressesProps

Basic Example

import { onMounted } from '@nuxtjs/composition-api';
import { useUserAddresses } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { load } = useUserAddresses();

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

Custom response fields example

import { onMounted } from '@nuxtjs/composition-api';
import { useUserAddresses } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { load } = useUserAddresses();

    onMounted(async () => {
      await search({
        fields: 'addresses(firstName)'
      });
    });
  }
};

addAddress()

Creates a new user address and updates the addresses property. Under the hood, it sends requests to the createAddress API endpoint.

Type

interface AddUserAddressProps {
  fields?: 'BASIC' | 'DEFAULT' | 'FULL' | string | string[];
  address: Address
}

async function addAddress: (props: AddUserAddressProps): Promise<void>;

References: AddUserAddressProps, Address

Example

import { useUserAddresses } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { addAddress } = useUserAddresses();

    const saveAddress = async () => {
      await addAddress({
        address: {
          titleCode: 'Mr',
          firstName: 'John',
          lastName: 'Doe',
          line1: 'Example Street',
          postalCode: '03-316',
          town: 'San Francisco'
        }
      });
    };

    return { saveAddress };
  }
};

updateAddress()

Overwrites specified fields of the existing user address and updates the addresses property. Under the hood, it sends requests to the updateAddress API endpoint.

Type

interface UpdateUserAddressProps {
  address: Partial<Address> & Required<Pick<Address, 'id' >>
}

async function updateAddress: (props: UpdateUserAddressProps): Promise<void>;

References: UpdateUserAddressProps

Example

import { useUserAddresses } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { updateAddress } = useUserAddresses();

    const updateUserAddress = () => {
      updateAddress({
        address: {
          id: '1',
          firstName: 'Adam',
        }
      });
    };

    return { updateUserAddress };
  }
};

deleteAddress()

Deletes the existing user address and updates the addresses property. Under the hood, it sends requests to the deleteAddress API endpoint.

Type

interface DeleteUserAddressProps {
  addressId: string
}

async function deleteAddress: (props: DeleteUserAddressProps): Promise<void>;

References: DeleteUserAddressProps

Example

<template>
  <!-- Template simplified for brevity -->
  <div v-for="address in addresses">
    <button @click="deleteAddress({ addressId: address.id })">
      Delete
    </button>
  </div>
</template>

<script>
export default {
  setup() {
    const { addresses, deleteAddress } = useUserAddresses();

    return { addresses, deleteAddress };
  }
};
</script>

setDefaultAddress()

A syntactic sugar method for setting user address as default. Calls updateAddress with address: { id: props.addressId, defaultAddress: true } under the hood.

Type

interface SetDefaultUserAddressProps {
  addressId: string
}

async function setDefaultAddress: (props: SetDefaultUserAddressProps): Promise<void>

Example

<template>
  <!-- Template simplified for brevity -->
  <div v-for="address in addresses">
    <button @click="setDefaultAddress({ addressId: address.id })">
      Set as default
    </button>
  </div>
</template>

<script>
export default {
  setup() {
    const { addresses, setDefaultAddress } = useUserAddresses();

    return { addresses, setDefaultAddress };
  }
};
</script>

Good to know

Since this method is just a syntactic sugar for upadateAddress, it has no dedicated loading indicator. If your goal is to prevent displaying some parts of the template until its execution is over, you can simply leverage the loading.updateAddress property.