Merge pull request #2583 from Shopify/add-billing-address-hook

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,35 @@
+import {MailingAddress} from '@shopify/ui-extensions/customer-account';
+
+import {useBillingAddress} from '..';
+
+import {mount, createMockStatefulRemoteSubscribable} from './mount';
+import {ScopeNotGrantedError} from '../../errors';
+
+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);
+  });
+
+  it('raises an exception without approval scopes granted', () => {
+    expect(() =>
+      mount.hook(() => useBillingAddress(), {
+        extensionApi: {
+          extension: {
+            target: 'customer-account.order-status.block.render' as const,
+          },
+          billingAddress: undefined,
+        },
+      }),
+    ).toThrow(ScopeNotGrantedError);
+  });
+});

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

@@ -3,6 +3,7 @@ import {MailingAddress} from '@shopify/ui-extensions/customer-account';
 import {useShippingAddress} from '..';
 
 import {mount, createMockStatefulRemoteSubscribable} from './mount';
+import {ScopeNotGrantedError} from '../../errors';
 
 describe('useShippingAddress', () => {
   it('returns latest shipping address', async () => {
@@ -18,4 +19,17 @@ describe('useShippingAddress', () => {
 
     expect(value).toMatchObject(address);
   });
+
+  it('raises an exception without approval scopes granted', () => {
+    expect(() =>
+      mount.hook(() => useShippingAddress(), {
+        extensionApi: {
+          extension: {
+            target: 'customer-account.order-status.block.render' as const,
+          },
+          shippingAddress: undefined,
+        },
+      }),
+    ).toThrow(ScopeNotGrantedError);
+  });
 });