Skip to content

User account functions

The user account drop-in component provides API functions that allow developers to retrieve and display account details, including shipping and billing addresses and previous orders.

createCustomerAddress

The createCustomerAddress function creates an address for an existing customer using the CustomerAddressesModel object as an argument. The function calls the createCustomerAddress mutation.

export const createCustomerAddress = async (
address: CustomerAddressesModel
): Promise<string>
ParameterTypeReq?Description
addressCustomerAddressesModelYesAn object containing the address information.

The CustomerAddressesModel object has the following fields:

ParameterTypeReq?Description
firstNamestringNoThe first name of the customer.
lastNamestringNoThe family name of the customer.
citystringNoThe city of the address.
companystringNoAn optional company name specified by the customer.
countryCodestringNoThe two-letter code representing the customer's country.
regionobjectNoThis object has the structure "{ region: string; regionCode: string; regionId: string | number }".
telephonestringNoThe telephone number.
idstringNoThe address ID.
vatIdstringNoThe VAT ID.
postcodestringNoThe postcode.
streetstringNoThe street address.
streetMultiline_2stringNoThe second line of the street address.
defaultShippingbooleanNoWhether the address is the default shipping address.
defaultBillingbooleanNoWhether the address is the default billing address.

Returns

Returns a promise that resolves to a string, which could be a success message or an error message.

Usage

To create a new address:

import { createCustomerAddress } from '@/account/api/createCustomerAddress';
const address = {
firstName: 'John',
lastName: 'Doe',
city: 'Los Angeles',
company: 'Adobe',
countryCode: 'US',
region: {
region: 'California',
regionCode: 'CA',
regionId: '12',
},
telephone: '1234567890',
postcode: '90001',
street: '123 Main St',
streetMultiline_2: 'Suite 100',
defaultShipping: true,
defaultBilling: true,
};

getAttributesForm

The getAttributesForm function uses the attributesForm query to retrieve EAV attributes associated with customer and customer address frontend forms. The formCode parameter must be one of the following values: customer_account_create, customer_account_edit, customer_address_create, or customer_address_edit.

export const getAttributesForm = async (
formCode: string
): Promise<AttributesFormModel[]>
ParameterTypeReq?Description
formCodestringYesOne of "customer_account_create", "customer_account_edit", "customer_address_create", "customer_address_edit".

Returns

Returns a promise that resolves to an AttributesFormModel array. It has the following structure:

{
items {
code
default_value
entity_type
frontend_class
frontend_input
is_required
is_unique
label
options {
is_default
label
value
}
... on CustomerAttributeMetadata {
multiline_count
sort_order
validate_rules {
name
value
}
}
}
errors {
type
message
}
}

Usage

To get attributes associated with the customer_address_edit form:

import { getAttributesForm } from '@/account/api/getAttributesForm';
getAttributesForm(formCode: 'customer_address_edit');

getCountries

The getCountries function uses the countries query to retrieve a list of countries.

export const getCountries = async (): Promise<{
availableCountries: Country[] | [];
countriesWithRequiredRegion: string[];
optionalZipCountries: string[];
}>

Returns

Returns a promise that resolves to arrays of countries, regions, and postal codes.

{
countries {
two_letter_abbreviation
full_name_locale
}
storeConfig {
countries_with_required_region
optional_zip_countries
}
}

Usage

To get a list of countries:

import { getCountries } from '@/account/api/getCountries';
getCountries();

getCustomer

The getCustomer function retrieves the customer information for the logged-in customer. The function uses the customer query.

export const getCustomer = async (): Promise<CustomerDataModelShort>

Returns

Returns a promise that resolves to CustomerDataModelShort object:

export interface CustomerDataModelShort {
firstName: string;
lastName: string;
middleName: string;
dateOfBirth: string;
dob: string;
prefix: string;
gender: 1 | 2 | string;
suffix: string;
email: string;
createdAt: string;
[key: string]: string | boolean | number;
}

Usage

To get details about the customer:

import { getCustomer } from '@/account/api/getCustomer';
getCustomer();

getCustomerAddress

The getCustomerAddress function returns an array of addresses associated with the current customer. The function uses the customer query.

export const getCustomerAddress = async (): Promise<
CustomerAddressesModel[]
>

Returns

Returns a promise that resolves to CustomerAddressesModel object:

export interface CustomerAddressesModel {
firstName?: string;
lastName?: string;
city?: string;
company?: string;
countryCode?: string;
region?: { region: string; regionCode: string; regionId: string | number };
telephone?: string;
id?: string;
vatId?: string;
postcode?: string;
street?: string;
streetMultiline_2?: string;
defaultShipping?: boolean;
defaultBilling?: boolean;
}

Usage

To get information about the customer address:

import { getCustomerAddress } from '@/account/api/getCustomerAddress';
getCustomerAddress();

getOrderHistoryList

The getOrderHistoryList function is an asynchronous function that retrieves a list of customer orders using the customer query. It optionally takes parameters for pagination and filtering.

export const getOrderHistoryList = async (
pageSize: number,
selectOrdersDate: string,
currentPage: number
): Promise<OrderHistory | null>
ParameterTypeReq?Description
pageSizenumberNoThe maximum number of results to return at once. The default value is 20.
selectOrdersDatestringNoRepresents a date filter for the orders.
currentPagenumberNoThe current page of the order history list. The default value is 1.

Returns

Returns a promise that resolves to an OrderHistory object or null.

Usage

To get a list of customer orders:

import { getOrderHistoryList } from '@/account/api/getOrderHistoryList';
getOrderHistoryList();

getRegions

The getRegions function uses the country query to retrieve a list of states or provinves for a specific country.

export const getRegions = async (
countryCode: string
): Promise<RegionTransform[]
ParameterTypeReq?Description
countryCodestringYesA two-letter abbreviation for the country ID.

Returns

Returns a promise that resolves to a RegionTransform array:

export interface RegionTransform {
text: string;
value: string;
id?: string | number;
}

Usage

To get a list of regions for a specific country:

import { getRegions } from '@/account/api/getRegions';
getRegions(countryCode: "AS");

getStoreConfig

The getStoreConfig function uses the storeConfig query to retrieve details about password requirements.

export const getStoreConfig = async (): Promise<StoreConfigModel>

Returns

Returns a promise that resolves to a StoreConfigModel object:

export interface StoreConfigModel {
minLength: number;
requiredCharacterClasses: number;
}

Usage

To get the store configuration:

import { getStoreConfig } from '@/account/api/getStoreConfig';
getStoreConfig();

removeCustomerAddress

The removeCustomerAddress function removes an address associated with the current customer. The function uses the deleteCustomerAddress mutation.

export const removeCustomerAddress = async (
addressId: number
): Promise<boolean>
ParameterTypeReq?Description
addressIdnumberYesAn internal ID for the address.

Returns

Returns a promise that resolves to a boolean value that indicates whether the address was removed.

Usage

To remove an address:

import { removeCustomerAddress } from '@/account/api/removeCustomerAddress';
removeCustomerAddress(id: "1");

updateCustomer

The updateCustomer function updates the logged-in customer. The function uses the updateCustomerV2 mutation.

The form object keys are converted to snake_case using the convertKeysCase utility with specific mappings for firstName, lastName, middleName, and custom_attributesV2.

export const updateCustomer = async (
form: Record<string, string>
): Promise<string>
ParameterTypeReq?Description
formobjectYesContains the attributes to update.

Returns

Returns a promise that resolves to a string, which could be a success message or an error message.

Usage

To update the customer:

import { updateCustomer } from '@/account/api/updateCustomer';
updateCustomer(form: CustomerUpdateInput);

updateCustomerAddress

The updateCustomerAddress function updates an address associated with the current customer. The function uses the updateCustomerAddress mutation.

The forms object includes an addressId, which is a number representing the ID of the address to be updated and other address details as defined in CustomerAddressesModel.

export const updateCustomerAddress = async (
forms: ExtendedAddressFormProps
): Promise<string>
ParameterTypeReq?Description
formsobjectYesContains the attributes to update.

The CustomerAddressesModel object has the following shape:

ParameterTypeReq?Description
firstNamestringNoThe first name of the customer.
lastNamestringNoThe family name of the customer.
citystringNoThe city of the address.
companystringNoA company .
countryCodestringNoThe two-letter code representing the customer's country.
regionobjectNoThis object has the shape "{ region: string; regionCode: string; regionId: string | number }".
telephonestringNoThe telephone number.
idstringNoThe address ID.
vatIdstringNoThe VAT ID.
postcodestringNoThe postcode.
streetstringNoThe street address.
streetMultiline_2stringNoThe second line of the street address.
defaultShippingbooleanNoWhether the address is the default shipping address.
defaultBillingbooleanNoWhether the address is the default billing address.

Returns

Returns a promise that resolves to a string, which could be a success message or an error message.

Usage

To update the customer address:

updateCustomerAddress(forms: {
"addressId": 1,
"city": "Austin",
"countryCode": "US",
"countryId": "US",
"defaultBilling": true,
"defaultShipping": true,
"firstname": "John",
"lastname": "Doe",
"postcode": "78759",
"region": {
"regionId": 57,
"regionCode": "TX"
},
"street": ["123 Main St"],
});

updateCustomerEmail

The updateCustomerEmail function updates the email address of the logged-in customer. The function calls the updateCustomerEmail mutation.

export const updateCustomerEmail = async (
email: string,
password: string
): Promise<string>
ParameterTypeReq?Description
emailstringYesThe new email address of the customer.
passwordstringYesThe current password of the customer.

Returns

Returns a promise that resolves to a string, which could be a success message or an error message.

Usage

To update the customer’s email address:

import { updateCustomerEmail } from '@/account/api/updateCustomerEmail';
updateCustomerEmail(forms: {
"email": "test@email.com",
"password": "xyz789abc123",
});

updateCustomerPassword

The updateCustomerPassword function updates the password of the logged-in customer. The function calls the changeCustomerPassword mutation.

export const updateCustomerPassword = async ({
currentPassword,
newPassword,
}: ChangeCustomerPasswordProps): Promise<string>
ParameterTypeReq?Description
currentPasswordstringYesThe password before it is changed.
newPasswordstringYesThe new password.

Returns

Returns a promise that resolves to a string, which could be the customer’s email if the password change is successful, or an error message if there are errors.

Usage

To update the customer’s password:

import { updateCustomerPassword } from '@/account/api/updateCustomerPassword';
updateCustomerPassword({ "currentPassword": "xyz789abc123", "newPassword": "123xyz789abc" });