Authenticated AccountAPI
API
The API for interacting with an account in which the customer is fully authenticated.
Anchor to standardapiStandardApi
The base API object provided to this and other customer-account extension targets.
Anchor to authenticatedAccount
authenticatedAccount
required
Information about the authenticated account.
Was this section helpful?
Anchor to useAuthenticatedAccountCustomeruse
use
Returns the current authenticated Customer. The value is undefined if the customer isn't authenticated.
| undefined
Was this section helpful?
Anchor to useAuthenticatedAccountPurchasingCompanyuse
use
Provides information about the company of the authenticated business customer. The value is undefined if a business customer isn't authenticated.
| undefined
Was this section helpful?
Show Loyalty Banner
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
useAuthenticatedAccountCustomer,
useCustomer,
useI18n,
reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import {
Banner,
Link,
} from '@shopify/ui-extensions/customer-account';
export default reactExtension(
'customer-account.order-status.block.render',
() => <Extension />,
);
function Extension() {
const i18n = useI18n();
const authenticatedCustomer =
useAuthenticatedAccountCustomer();
const orderStatusCustomer = useCustomer();
if (
authenticatedCustomer?.id &&
orderStatusCustomer?.id?.endsWith(
authenticatedCustomer?.id,
)
) {
return (
<Banner>
<Link
to={'extension:manageLoyaltyPoints/'}
>
{i18n.translate('manageLoyaltyPoints')}
</Link>
</Banner>
);
}
return null;
}
Anchor to examplesExamples
Anchor to example-getting-the-company-and-location-of-the-customerGetting the company and location of the customer
You can access the company and location of the authenticated business customer to implement location specific logic.
Was this section helpful?
Getting the company and location of the customer
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
Banner,
extension,
} from '@shopify/ui-extensions/customer-account';
export default reactExtension(
'customer-account.order-index.block.render',
() => <Extension />,
);
function Extension() {
const i18n = useI18n();
const purchasingCompany =
useAuthenticatedAccountPurchasingCompany();
const companyLocationId =
purchasingCompany?.location?.id;
if (
companyLocationId &&
isLocationClosed(companyLocationId)
) {
return (
<Banner
status="warning"
title={i18n.translate(
'closedLocationMessage',
)}
/>
);
}
return null;
}
function isLocationClosed(locationId: string) {
return true;
}