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>The CustomerAddressesModel object has the following fields:
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[]>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>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[]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>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>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>The CustomerAddressesModel object has the following shape:
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>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>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" });