@shopify/ui-extensions 2025.10.0-rc.45 → 2025.10.0-rc.47

package/src/surfaces/checkout/preact/tests/payment-options.test.tsx

@@ -1,17 +1,25 @@
 import type {
   PaymentOption,
   SelectedPaymentOption,
-} from '@shopify/ui-extensions/checkout';
+} from '../../api/standard/standard';
 
 import {
   useAvailablePaymentOptions,
   useSelectedPaymentOptions,
 } from '../payment-options';
 
-import {mount, createMockStatefulRemoteSubscribable} from './mount';
-import type {PartialExtensionApi} from './mount';
+import {
+  mount,
+  createMockSubscribableSignalLike,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
+
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
 
-describe.skip('Payment Methods API hooks', () => {
+describe('Payment Methods API hooks', () => {
+  afterEach(tearDownGlobalShopifyMock);
   describe('useAvailablePaymentOptions', () => {
     it('returns the available payment methods', async () => {
       const paymentOptions: PaymentOption[] = [
@@ -19,15 +27,13 @@ describe.skip('Payment Methods API hooks', () => {
         {handle: 'direct', type: 'creditCard'},
       ];
 
-      const extensionApi: PartialExtensionApi = {
+      setupGlobalShopifyMock({
         availablePaymentOptions:
-          createMockStatefulRemoteSubscribable(paymentOptions),
-      };
-
-      const {value} = mount.hook(() => useAvailablePaymentOptions(), {
-        extensionApi,
+          createMockSubscribableSignalLike(paymentOptions),
       });
 
+      const {value} = mount.hook(() => useAvailablePaymentOptions());
+
       expect(value).toBe(paymentOptions);
     });
   });
@@ -47,19 +53,17 @@ describe.skip('Payment Methods API hooks', () => {
         {handle: 'bogus', type: 'other'},
       ];
 
-      const extensionApi: PartialExtensionApi = {
-        availablePaymentOptions: createMockStatefulRemoteSubscribable(
+      setupGlobalShopifyMock({
+        availablePaymentOptions: createMockSubscribableSignalLike(
           availablePaymentOptions,
         ),
-        selectedPaymentOptions: createMockStatefulRemoteSubscribable(
+        selectedPaymentOptions: createMockSubscribableSignalLike(
           selectedPaymentOptionHandles,
         ),
-      };
-
-      const {value} = mount.hook(() => useSelectedPaymentOptions(), {
-        extensionApi,
       });
 
+      const {value} = mount.hook(() => useSelectedPaymentOptions());
+
       expect(value).toStrictEqual(selectedPaymentOptions);
     });
 
@@ -79,19 +83,17 @@ describe.skip('Payment Methods API hooks', () => {
         {handle: 'direct', type: 'creditCard'},
       ];
 
-      const extensionApi: PartialExtensionApi = {
-        availablePaymentOptions: createMockStatefulRemoteSubscribable(
+      setupGlobalShopifyMock({
+        availablePaymentOptions: createMockSubscribableSignalLike(
           availablePaymentOptions,
         ),
-        selectedPaymentOptions: createMockStatefulRemoteSubscribable(
+        selectedPaymentOptions: createMockSubscribableSignalLike(
           selectedPaymentOptionHandles,
         ),
-      };
-
-      const {value} = mount.hook(() => useSelectedPaymentOptions(), {
-        extensionApi,
       });
 
+      const {value} = mount.hook(() => useSelectedPaymentOptions());
+
       expect(value).toStrictEqual(selectedPaymentOptions);
     });
   });

package/src/surfaces/checkout/preact/tests/pickup-location-option-target.test.tsx

@@ -1,15 +1,21 @@
-import type {
-  ExtensionTarget,
-  PickupLocationOption,
-} from '@shopify/ui-extensions/checkout';
+import type {PickupLocationOption} from '../../api/standard/standard';
+import type {ExtensionTarget} from '../../extension-targets';
 
 import {usePickupLocationOptionTarget} from '../pickup-location-option-target';
-import {ExtensionHasNoTargetError} from '../../errors';
+import {
+  createMockSubscribableSignalLike,
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+  createMockExtension,
+} from './mount';
 
-import {createMockStatefulRemoteSubscribable, mount} from './mount';
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
 
-describe.skip('usePickupLocationOptionTarget', () => {
-  const pickupLocationOption = {
+describe('usePickupLocationOptionTarget', () => {
+  afterEach(tearDownGlobalShopifyMock);
+  const pickupLocationOption: PickupLocationOption = {
     handle: 'pickup_method_1',
     title: 'Pickup method 1',
     description: 'something',
@@ -18,60 +24,63 @@ describe.skip('usePickupLocationOptionTarget', () => {
     location: {
       address: {
         address1: '123 Fake St',
-        address2: null,
+        address2: undefined,
         city: 'Ottawa',
-        company: null,
-        country: 'Canada',
+        company: undefined,
+        countryCode: 'CA',
         firstName: 'Bob',
         lastName: 'Bobsen',
         phone: '555-555-5555',
-        province: 'Ontario',
+        provinceCode: 'ON',
         zip: 'K2P0V6',
       },
     },
-  } as PickupLocationOption;
+    metafields: [],
+  };
 
-  it('throws if extension target has no api.target', async () => {
-    const runner = async () => {
-      const target: ExtensionTarget = 'purchase.checkout.block.render';
-      return mount.hook(() => usePickupLocationOptionTarget(), {
-        extensionApi: {
-          extension: {target},
-          target: undefined,
-          isTargetSelected: createMockStatefulRemoteSubscribable(true),
-        },
-      });
-    };
+  it('throws if extension target has no api.target', () => {
+    const target: ExtensionTarget = 'purchase.checkout.block.render';
+    setupGlobalShopifyMock({
+      extension: createMockExtension(target),
+    });
 
-    await expect(runner).rejects.toThrow(ExtensionHasNoTargetError);
+    expect(() => {
+      mount.hook(() => usePickupLocationOptionTarget());
+    }).toThrow(
+      expect.objectContaining({
+        name: 'ExtensionHasNoTargetError',
+      }),
+    );
   });
 
-  it('throws if extension target has no api.isTargetSelected', async () => {
-    const runner = async () => {
-      const target: ExtensionTarget = 'purchase.checkout.block.render';
-      return mount.hook(() => usePickupLocationOptionTarget(), {
-        extensionApi: {
-          extension: {target},
-          target: createMockStatefulRemoteSubscribable(pickupLocationOption),
-          isTargetSelected: undefined,
-        },
-      });
-    };
+  it('throws if extension target has no api.isTargetSelected', () => {
+    const target =
+      'purchase.checkout.pickup-location-option-item.render-after' as const;
+    setupGlobalShopifyMock<typeof target>({
+      extension: createMockExtension(target),
+      target: createMockSubscribableSignalLike(pickupLocationOption),
+    });
 
-    await expect(runner).rejects.toThrow(ExtensionHasNoTargetError);
+    expect(() => {
+      mount.hook(() => usePickupLocationOptionTarget());
+    }).toThrow(
+      expect.objectContaining({
+        name: 'ExtensionHasNoTargetError',
+      }),
+    );
   });
 
-  it('returns the pickup location option target if it exists', async () => {
-    const target: ExtensionTarget =
-      'purchase.checkout.pickup-location-option-item.render-after';
-    const {value} = mount.hook(() => usePickupLocationOptionTarget(), {
-      extensionApi: {
-        extension: {target},
-        target: createMockStatefulRemoteSubscribable(pickupLocationOption),
-        isTargetSelected: createMockStatefulRemoteSubscribable(true),
-      },
+  it('returns the pickup location option target if it exists', () => {
+    const target =
+      'purchase.checkout.pickup-location-option-item.render-after' as const;
+    setupGlobalShopifyMock<typeof target>({
+      extension: createMockExtension(target),
+      target: createMockSubscribableSignalLike(pickupLocationOption),
+      isTargetSelected: createMockSubscribableSignalLike(true),
     });
 
+    const {value} = mount.hook(() => usePickupLocationOptionTarget());
+
     expect(value).toStrictEqual({
       pickupLocationOptionTarget: pickupLocationOption,
       isTargetSelected: true,

package/src/surfaces/checkout/preact/tests/redeemable.test.ts

@@ -1,34 +1,41 @@
-import type {ExtensionTarget} from '@shopify/ui-extensions/checkout';
+import type {ExtensionTarget} from '../../extension-targets';
 
 import {useApplyRedeemableChange} from '../redeemable';
-import {ExtensionHasNoMethodError} from '../../errors';
+import {
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+  createMockExtension,
+} from './mount';
 
-import {mount} from './mount';
-
-describe.skip('Redeemable API hooks', () => {
+describe('Redeemable API hooks', () => {
+  afterEach(tearDownGlobalShopifyMock);
   describe('useApplyRedeemableChange()', () => {
     it('returns the applyRedeemableChange function', async () => {
-      const target: ExtensionTarget = 'purchase.checkout.gift-card.render';
-      const extensionApi = {
-        applyRedeemableChange: jest.fn,
-        extension: {target},
-      };
-      const {value} = mount.hook(() => useApplyRedeemableChange(), {
-        extensionApi,
+      const target = 'purchase.checkout.gift-card.render' as const;
+      const mockApplyRedeemableChange = jest.fn();
+      setupGlobalShopifyMock<typeof target>({
+        applyRedeemableChange: mockApplyRedeemableChange,
+        extension: createMockExtension(target),
       });
-      expect(value).toBe(jest.fn);
+
+      const {value} = mount.hook(() => useApplyRedeemableChange());
+      expect(value).toBe(mockApplyRedeemableChange);
     });
 
-    it('raises when applyRedeemableChange is not available', async () => {
-      const runner = async () => {
-        const target: ExtensionTarget = 'purchase.checkout.block.render';
-        return mount.hook(() => useApplyRedeemableChange(), {
-          extensionApi: {
-            extension: {target},
-          },
-        });
-      };
-      await expect(runner).rejects.toThrow(ExtensionHasNoMethodError);
+    it('raises when applyRedeemableChange is not available', () => {
+      const target: ExtensionTarget = 'purchase.checkout.block.render';
+      setupGlobalShopifyMock({
+        extension: createMockExtension(target),
+      });
+
+      expect(() => {
+        mount.hook(() => useApplyRedeemableChange());
+      }).toThrow(
+        expect.objectContaining({
+          name: 'ExtensionHasNoMethodError',
+        }),
+      );
     });
   });
 });

package/src/surfaces/checkout/preact/tests/session-token.test.tsx

@@ -1,19 +1,25 @@
 import {useSessionToken} from '../session-token';
 
-import {mount} from './mount';
+import {
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
+
+describe('useSessionToken', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
-describe.skip('useSessionToken', () => {
   it('returns sessionToken from the api', () => {
     const mockGetSessionToken = {
       get: jest.fn(),
     };
 
-    const {value} = mount.hook(() => useSessionToken(), {
-      extensionApi: {
-        sessionToken: mockGetSessionToken,
-      },
+    setupGlobalShopifyMock({
+      sessionToken: mockGetSessionToken as any,
     });
 
+    const {value} = mount.hook(() => useSessionToken());
+
     expect(value).toMatchObject(mockGetSessionToken);
   });
 });

package/src/surfaces/checkout/preact/tests/shipping-address.test.ts

@@ -1,17 +1,27 @@
-import type {MailingAddress} from '@shopify/ui-extensions/checkout';
+import type {MailingAddress} from '../../api/shared';
 
 import {useShippingAddress} from '../shipping-address';
 
-import {mount, createMockStatefulRemoteSubscribable} from './mount';
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
+
+import {
+  mount,
+  createMockSubscribableSignalLike,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
+
+describe('useShippingAddress', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
-describe.skip('useShippingAddress', () => {
   it('returns latest shipping address', async () => {
     const address: MailingAddress = {countryCode: 'CA'};
-    const extensionApi = {
-      shippingAddress: createMockStatefulRemoteSubscribable(address),
-    };
+    setupGlobalShopifyMock({
+      shippingAddress: createMockSubscribableSignalLike(address),
+    });
 
-    const {value} = mount.hook(() => useShippingAddress(), {extensionApi});
+    const {value} = mount.hook(() => useShippingAddress());
 
     expect(value).toMatchObject(address);
   });

package/src/surfaces/checkout/preact/tests/shipping-option-target.test.ts

@@ -1,16 +1,23 @@
-import type {
-  ExtensionTarget,
-  ShippingOption,
-  ShippingOptionItemRenderMode,
-} from '@shopify/ui-extensions/checkout';
+import type {ExtensionTarget} from '../../extension-targets';
+import type {ShippingOption} from '../../api/standard/standard';
 
 import {useShippingOptionTarget} from '../shipping-option-target';
-import {ExtensionHasNoTargetError} from '../../errors';
+import {
+  createMockSubscribableSignalLike,
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+  createMockExtension,
+} from './mount';
 
-import {createMockStatefulRemoteSubscribable, mount} from './mount';
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
 
-describe.skip('useShippingOptionTarget', () => {
-  const shippingOption = {
+describe('useShippingOptionTarget', () => {
+  afterEach(tearDownGlobalShopifyMock);
+  const shippingOption: ShippingOption = {
+    code: 'shipping_method_1',
+    metafields: [],
     handle: 'shipping_method_1',
     title: 'Shipping method 1',
     description: 'something',
@@ -30,60 +37,57 @@ describe.skip('useShippingOptionTarget', () => {
         upper: 10000,
       },
     },
-  } as ShippingOption;
-
-  const renderMode: ShippingOptionItemRenderMode = {
-    overlay: false,
   };
 
-  it('throws if extension target has no api.target', async () => {
-    const runner = async () => {
-      const target: ExtensionTarget = 'purchase.checkout.block.render';
-      return mount.hook(() => useShippingOptionTarget(), {
-        extensionApi: {
-          extension: {target},
-          target: undefined,
-          isTargetSelected: createMockStatefulRemoteSubscribable(true),
-          renderMode,
-        },
-      });
-    };
+  it('throws if extension target has no api.target', () => {
+    const target: ExtensionTarget = 'purchase.checkout.block.render';
+    setupGlobalShopifyMock({
+      extension: createMockExtension(target),
+    });
 
-    await expect(runner).rejects.toThrow(ExtensionHasNoTargetError);
+    expect(() => {
+      mount.hook(() => useShippingOptionTarget());
+    }).toThrow(
+      expect.objectContaining({
+        name: 'ExtensionHasNoTargetError',
+      }),
+    );
   });
 
-  it('throws if extension target has no api.isTargetSelected', async () => {
-    const runner = async () => {
-      const target: ExtensionTarget = 'purchase.checkout.block.render';
-      return mount.hook(() => useShippingOptionTarget(), {
-        extensionApi: {
-          extension: {target},
-          target: createMockStatefulRemoteSubscribable(shippingOption),
-          isTargetSelected: undefined,
-          renderMode,
-        },
-      });
-    };
+  it('throws if extension target has no api.isTargetSelected', () => {
+    const target =
+      'purchase.checkout.shipping-option-item.render-after' as const;
+    setupGlobalShopifyMock<typeof target>({
+      extension: createMockExtension(target),
+      target: createMockSubscribableSignalLike(shippingOption),
+      renderMode: {overlay: false},
+    });
 
-    await expect(runner).rejects.toThrow(ExtensionHasNoTargetError);
+    expect(() => {
+      mount.hook(() => useShippingOptionTarget());
+    }).toThrow(
+      expect.objectContaining({
+        name: 'ExtensionHasNoTargetError',
+      }),
+    );
   });
 
-  it('returns the shipping option target if it exists', async () => {
-    const target: ExtensionTarget =
-      'purchase.checkout.shipping-option-item.render-after';
-    const {value} = mount.hook(() => useShippingOptionTarget(), {
-      extensionApi: {
-        extension: {target},
-        target: createMockStatefulRemoteSubscribable(shippingOption),
-        isTargetSelected: createMockStatefulRemoteSubscribable(true),
-        renderMode,
-      },
+  it('returns the shipping option target if it exists', () => {
+    const target =
+      'purchase.checkout.shipping-option-item.render-after' as const;
+    setupGlobalShopifyMock<typeof target>({
+      extension: createMockExtension(target),
+      target: createMockSubscribableSignalLike(shippingOption),
+      isTargetSelected: createMockSubscribableSignalLike(true),
+      renderMode: {overlay: false},
     });
 
+    const {value} = mount.hook(() => useShippingOptionTarget());
+
     expect(value).toStrictEqual({
       shippingOptionTarget: shippingOption,
       isTargetSelected: true,
-      renderMode,
+      renderMode: {overlay: false},
     });
   });
 });

package/src/surfaces/checkout/preact/tests/shopping-address.test.tsx

@@ -1,16 +1,24 @@
-import {ScopeNotGrantedError} from '../../errors';
 import {useShippingAddress} from '../shipping-address';
 
-import {mount} from './mount';
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
+
+import {
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
+
+describe('useShippingAddress', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
-describe.skip('useShippingAddress', () => {
   it('raises an exception without approval scopes granted', () => {
-    expect(() =>
-      mount.hook(() => useShippingAddress(), {
-        extensionApi: {
-          shippingAddress: undefined,
-        },
-      }),
-    ).toThrow(ScopeNotGrantedError);
+    setupGlobalShopifyMock({
+      shippingAddress: undefined,
+    });
+
+    expect(() => mount.hook(() => useShippingAddress())).toThrow(
+      'Using shipping address requires having shipping address permissions granted to your app.',
+    );
   });
 });

package/src/surfaces/checkout/preact/tests/timezone.test.tsx

@@ -1,19 +1,29 @@
 import {useTimezone} from '../timezone';
 
-import {mount, createMockStatefulRemoteSubscribable} from './mount';
+// See __mocks__/preact/hooks
+jest.mock('preact/hooks');
+
+import {
+  mount,
+  createMockSubscribableSignalLike,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
+
+describe('useTimezone', () => {
+  afterEach(tearDownGlobalShopifyMock);
 
-describe.skip('useTimezone', () => {
   it('returns timezone from the api', () => {
     const timezone = 'America/New_York';
 
-    const {value} = mount.hook(() => useTimezone(), {
-      extensionApi: {
-        localization: {
-          timezone: createMockStatefulRemoteSubscribable(timezone),
-        },
+    setupGlobalShopifyMock({
+      localization: {
+        timezone: createMockSubscribableSignalLike(timezone),
       },
     });
 
+    const {value} = mount.hook(() => useTimezone());
+
     expect(value).toStrictEqual(timezone);
   });
 });

package/src/surfaces/checkout/preact/tests/translate.test.tsx

@@ -1,19 +1,24 @@
+import type {I18nTranslate} from '../../api/standard/standard';
 import {useTranslate} from '../translate';
 
-import {mount} from './mount';
+import {
+  mount,
+  setupGlobalShopifyMock,
+  tearDownGlobalShopifyMock,
+} from './mount';
 
-describe.skip('useTranslate', () => {
+describe('useTranslate', () => {
+  afterEach(tearDownGlobalShopifyMock);
   it('returns string translation', async () => {
     const simpleTranslation = 'This is a simple string translation';
-    const translateInSandbox = jest.fn(() => simpleTranslation);
 
-    const extensionApi = {
+    setupGlobalShopifyMock({
       i18n: {
-        translate: translateInSandbox,
+        translate: (() => simpleTranslation) as I18nTranslate,
       },
-    };
+    });
 
-    const {value} = mount.hook(() => useTranslate(), {extensionApi});
+    const {value} = mount.hook(() => useTranslate());
     const translate = value;
 
     expect(translate('exampleKey')).toStrictEqual(simpleTranslation);
@@ -32,13 +37,13 @@ describe.skip('useTranslate', () => {
     ];
     const translateInSandbox = jest.fn(() => simpleTranslation);
 
-    const extensionApi = {
+    setupGlobalShopifyMock({
       i18n: {
         translate: translateInSandbox,
       },
-    };
+    });
 
-    const {value} = mount.hook(() => useTranslate(), {extensionApi});
+    const {value} = mount.hook(() => useTranslate());
     const translate = value;
 
     // Expect that a the same array is returned, with any valid components wrapped in a React.Fragment
@@ -54,13 +59,13 @@ describe.skip('useTranslate', () => {
     const simpleTranslation = ['Hello, ', undefined, ' .'];
     const translateInSandbox = jest.fn(() => simpleTranslation);
 
-    const extensionApi = {
+    setupGlobalShopifyMock({
       i18n: {
         translate: translateInSandbox,
       },
-    };
+    });
 
-    const {value} = mount.hook(() => useTranslate(), {extensionApi});
+    const {value} = mount.hook(() => useTranslate());
     const translate = value;
 
     expect(translate('exampleKey')).toStrictEqual(simpleTranslation);

package/src/surfaces/checkout/preact/tests/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../../../tsconfig.json",
+  "extends": "../../../../../tsconfig.json",
   "compilerOptions": {
     "jsx": "react-jsx"
   },

package/src/surfaces/checkout/shared.ts

@@ -18,6 +18,8 @@ export const SUPPORTED_COMPONENTS = [
   'Clickable',
   'ClickableChip',
   'ClipboardItem',
+  'ConsentCheckbox',
+  'ConsentPhoneField',
   'DateField',
   'DatePicker',
   'Details',