add authenticationState api to customer account ui extension

.changeset/new-pugs-shop.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+'@shopify/ui-extensions-react': patch
+---
+
+add authenticationState api to customer account ui extension

packages/ui-extensions-react/src/surfaces/customer-account/hooks/authentication-state.ts

@@ -0,0 +1,16 @@
+import type {
+  AuthenticationState,
+  RenderOrderStatusExtensionTarget,
+} from '@shopify/ui-extensions/customer-account';
+
+import {useSubscription} from './subscription';
+import {useApi} from './api';
+
+/**
+ * Returns authentication state of Order status page.
+ */
+export function useAuthenticationState<
+  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+>(): AuthenticationState {
+  return useSubscription(useApi<Target>().authenticationState);
+}

packages/ui-extensions-react/src/surfaces/customer-account/hooks/index.ts

@@ -39,3 +39,5 @@ export {
   useAuthenticatedAccountCustomer,
   useAuthenticatedAccountPurchasingCompany,
 } from './authenticated-account';
+
+export {useAuthenticationState} from './authentication-state';

packages/ui-extensions-react/src/surfaces/customer-account/hooks/tests/authentication-state.test.tsx

@@ -0,0 +1,24 @@
+import {useAuthenticationState} from '../authentication-state';
+import type {Extension} from '@shopify/ui-extensions/customer-account';
+
+import {mount, createMockStatefulRemoteSubscribable} from './mount';
+
+describe('useAuthenticationState Hooks', () => {
+  it('returns authenticationState', () => {
+    const authenticationStateSubscribable =
+      createMockStatefulRemoteSubscribable(
+        'fully_authenticated',
+      ) as Extension['authenticationState'];
+
+    const {value} = mount.hook(useAuthenticationState, {
+      extensionApi: {
+        extension: {
+          target: 'customer-account.order-status.block.render' as const,
+        },
+        authenticationState: authenticationStateSubscribable,
+      },
+    });
+    expect(value).toBeDefined();
+    expect(value).toBe('fully_authenticated');
+  });
+});

packages/ui-extensions/src/surfaces/customer-account/api.ts

@@ -44,6 +44,7 @@ export type {
   OrderStatusPurchasingCompany,
   OrderStatusBuyerIdentity,
   CheckoutToken,
+  AuthenticationState,
 } from './api/order-status/order-status';
 export type {
   Attribute,

packages/ui-extensions/src/surfaces/customer-account/api/docs.ts

@@ -46,6 +46,9 @@ export interface Docs_OrderStatus_ShopApi
 export interface Docs_OrderStatus_RequireLoginApi
   extends Pick<OrderStatusApi<any>, 'requireLogin'> {}
 
+export interface Docs_OrderStatus_AuthenticationStateApi
+  extends Pick<OrderStatusApi<any>, 'authenticationState'> {}
+
 export interface Docs_OrderStatus_CartLinesApi
   extends Pick<OrderStatusApi<any>, 'lines'> {}
 

packages/ui-extensions/src/surfaces/customer-account/api/order-status/order-status.ts

@@ -189,6 +189,8 @@ export interface OrderStatusLocalization {
   market: StatefulRemoteSubscribable<Market | undefined>;
 }
 
+export type AuthenticationState = 'fully_authenticated' | 'pre_authenticated';
+
 export interface OrderStatusApi<Target extends ExtensionTarget> {
   /**
    * Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
@@ -352,6 +354,11 @@ export interface OrderStatusApi<Target extends ExtensionTarget> {
    * The requireLogin() method triggers login if the customer is viewing pre-authenticated Order status page.
    */
   requireLogin: () => Promise<void>;
+
+  /**
+   * The authentication state of Order status page.
+   */
+  authenticationState: StatefulRemoteSubscribable<AuthenticationState>;
 }
 
 export interface OrderStatusBuyerIdentity {