add rendermode field to pickup location item api

Author: james-a-c

.changeset/petite-foxes-pay.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+add renderMode field to pickup location item

packages/ui-extensions/src/surfaces/checkout/api/pickup/pickup-location-item.ts

@@ -11,4 +11,19 @@ export interface PickupLocationItemApi {
    * Whether the pickup location is currently selected.
    */
   isTargetSelected: SubscribableSignalLike<boolean>;
+
+  /**
+   * The render mode of the pickup location option.
+   */
+  renderMode: PickupLocationOptionItemRenderMode;
+}
+
+/**
+ * The render mode of a pickup location option item.
+ */
+export interface PickupLocationOptionItemRenderMode {
+  /**
+   * Whether the pickup location option is rendered in an overlay.
+   */
+  overlay: boolean;
 }

packages/ui-extensions/src/surfaces/checkout/preact/pickup-location-option-target.ts

@@ -1,6 +1,7 @@
 import {useMemo} from 'preact/hooks';
 
 import type {PickupLocationOption} from '../api/standard/standard';
+import {PickupLocationOptionItemRenderMode} from '../api/pickup/pickup-location-item';
 
 import {ExtensionHasNoTargetError} from './errors';
 import {useApi} from './api';
@@ -14,6 +15,7 @@ import {useSubscription} from './subscription';
 export function usePickupLocationOptionTarget(): {
   pickupLocationOptionTarget: PickupLocationOption;
   isTargetSelected: boolean;
+  renderMode: PickupLocationOptionItemRenderMode;
 } {
   const api =
     useApi<'purchase.checkout.pickup-location-option-item.render-after'>();
@@ -26,13 +28,15 @@ export function usePickupLocationOptionTarget(): {
 
   const pickupLocationOptionTarget = useSubscription(api.target);
   const isTargetSelected = useSubscription(api.isTargetSelected);
+  const renderMode = api.renderMode;
 
   const pickupLocationOption = useMemo(() => {
     return {
       pickupLocationOptionTarget,
       isTargetSelected,
+      renderMode,
     };
-  }, [pickupLocationOptionTarget, isTargetSelected]);
+  }, [pickupLocationOptionTarget, isTargetSelected, renderMode]);
 
   return pickupLocationOption;
 }

packages/ui-extensions/src/surfaces/checkout/preact/tests/pickup-location-option-target.test.tsx

@@ -59,6 +59,7 @@ describe('usePickupLocationOptionTarget', () => {
     setupGlobalShopifyMock<typeof target>({
       extension: createMockExtension(target),
       target: createMockSubscribableSignalLike(pickupLocationOption),
+      renderMode: {overlay: false},
     });
 
     expect(() => {
@@ -77,13 +78,15 @@ describe('usePickupLocationOptionTarget', () => {
       extension: createMockExtension(target),
       target: createMockSubscribableSignalLike(pickupLocationOption),
       isTargetSelected: createMockSubscribableSignalLike(true),
+      renderMode: {overlay: false},
     });
 
     const {value} = mount.hook(() => usePickupLocationOptionTarget());
 
     expect(value).toStrictEqual({
       pickupLocationOptionTarget: pickupLocationOption,
       isTargetSelected: true,
+      renderMode: {overlay: false},
     });
   });
 });