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" });