Add billing address hook to customer accounts

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

@@ -0,0 +1,33 @@
+import type {
+  MailingAddress,
+  RenderOrderStatusExtensionTarget,
+} from '@shopify/ui-extensions/customer-account';
+
+import {ExtensionHasNoFieldError, ScopeNotGrantedError} from '../errors';
+
+import {useApi} from './api';
+import {useSubscription} from './subscription';
+
+/**
+ * Returns 'billingAddress' specified in the order.
+ */
+export function useBillingAddress<
+  Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,
+>(): MailingAddress | undefined {
+  const api = useApi<Target>();
+  const extensionTarget = api.extension.target;
+
+  if (!('billingAddress' in api)) {
+    throw new ExtensionHasNoFieldError('billingAddress', extensionTarget);
+  }
+
+  const billingAddress = api.billingAddress;
+
+  if (!billingAddress) {
+    throw new ScopeNotGrantedError(
+      'Using billing address requires having billing address permissions granted to your app.',
+    );
+  }
+
+  return useSubscription(billingAddress);
+}

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

@@ -1,3 +1,4 @@
+export {useBillingAddress} from './billing-address';
 export {useExtensionApi, useApi} from './api';
 export {useCurrency} from './currency';
 export {useLanguage} from './language';

packages/ui-extensions-react/src/surfaces/customer-account/hooks/tests/billing-address.test.ts

@@ -0,0 +1,21 @@
+import {MailingAddress} from '@shopify/ui-extensions/customer-account';
+
+import {useBillingAddress} from '..';
+
+import {mount, createMockStatefulRemoteSubscribable} from './mount';
+
+describe('useBillingAddress', () => {
+  it('returns latest billing address', async () => {
+    const address: MailingAddress = {countryCode: 'CA'};
+    const extensionApi = {
+      extension: {
+        target: 'customer-account.order-status.block.render' as const,
+      },
+      billingAddress: createMockStatefulRemoteSubscribable(address),
+    };
+
+    const {value} = mount.hook(() => useBillingAddress(), {extensionApi});
+
+    expect(value).toMatchObject(address);
+  });
+});