Bring in @Shopify/checkout-ui-extensions@0.22.0

.changeset/beige-shrimps-march.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+'@shopify/ui-extensions-react': patch
+---
+
+Bring in @shopify/checkout-ui-extensions@0.22.0

packages/ui-extensions-react/documentation/hooks.md

@@ -32,7 +32,7 @@ import {
   render,
   Text,
   useShippingAddress,
-} from '@shopify/ui-extensions-react/react';
+} from '@shopify/ui-extensions-react/checkout';
 
 render('Checkout::Dynamic::Render', () => <App />);
 
@@ -82,3 +82,6 @@ function App() {
 | useTarget                                                       | <code>() => <a href="#PresentmentCartLine">PresentmentCartLine</a></code>                                                                                                                                                                                                                                                                                                        | Returns the presentment cart line that the extension is attached to. Applicable only to the `Checkout::CartLineDetails::RenderAfter` extension point.                                                                                                                                                                                                                                                                                                                                                                                         |
 | useTimezone                                                     | <code>() => string </code>                                                                                                                                                                                                                                                                                                                                                       | Returns the timezone of the checkout, and automatically re-renders your component if the timezone changes.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | useTranslate                                                    | <code>() => <a href="#i18ntranslate">I18nTranslate</a></code>                                                                                                                                                                                                                                                                                                                    | Returns the `I18nTranslate` interface used to translate strings.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| useDiscountCodes                                                | <code>() => <a href="#cartdiscountcode">CartDiscountCode</a>[]</code>                                                                                                                                                                                                                                                                                                            | Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed.                                                                                                                                                                                                                                                                                                                                                                                                   |
+| useDiscountAllocations                                          | <code>() => <a href="#cartdiscountallocation">CartDiscountAllocation</a>[]</code>                                                                                                                                                                                                                                                                                                | Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed.                                                                                                                                                                                                                                                                                                                                                                                                    |
+| useApplyDiscountCodeChange                                      | <code>(change: <a href="#discountcodechange">DiscountCodeChange</a>) => Promise<<wbr><a href="#discountcodechangeresult">DiscountCodeChangeResult</a><wbr>></code>                                                                                                                                                                                                               | Returns a function to add or remove discount codes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |

packages/ui-extensions-react/src/surfaces/checkout.ts

@@ -23,6 +23,8 @@ export type {
   BlockAlignment,
   BorderRadius,
   BorderProps,
+  CornerProps,
+  CornerRadius,
   BorderStyle,
   BorderWidth,
   Breakpoint,

packages/ui-extensions-react/src/surfaces/checkout/components/InlineSpacer/examples/basic-inlinespacer.example.tsx

@@ -17,6 +17,14 @@ function App() {
       <View border="base" padding="base">
         View
       </View>
+      <InlineSpacer spacing="tight" />
+      <View border="base" padding="base">
+        View
+      </View>
+      <InlineSpacer spacing="base" />
+      <View border="base" padding="base">
+        View
+      </View>
     </InlineStack>
   );
 }

packages/ui-extensions-react/src/surfaces/checkout/hooks/discounts.ts

@@ -0,0 +1,42 @@
+import type {
+  CartDiscountAllocation,
+  CartDiscountCode,
+  StandardApi,
+  RenderExtensionPoint,
+} from '@shopify/ui-extensions/checkout';
+
+import {useExtensionApi} from './api';
+import {useSubscription} from './subscription';
+
+/**
+ * Returns the current discount codes applied to the cart, and automatically re-renders
+ * your component if discount codes are added or removed.
+ */
+export function useDiscountCodes<
+  ID extends RenderExtensionPoint = RenderExtensionPoint,
+>(): CartDiscountCode[] {
+  const {discountCodes} = useExtensionApi<ID>();
+
+  return useSubscription(discountCodes);
+}
+
+/**
+ * Returns the current discount allocations applied to the cart, and automatically re-renders
+ * your component if discount allocations changed.
+ */
+export function useDiscountAllocations<
+  ID extends RenderExtensionPoint = RenderExtensionPoint,
+>(): CartDiscountAllocation[] {
+  const {discountAllocations} = useExtensionApi<ID>();
+
+  return useSubscription(discountAllocations);
+}
+
+/**
+ * Returns a function to add or remove discount codes.
+ */
+export function useApplyDiscountCodeChange<
+  ID extends RenderExtensionPoint = RenderExtensionPoint,
+>(): StandardApi<ID>['applyDiscountCodeChange'] {
+  return useExtensionApi<ID>().applyDiscountCodeChange;
+}

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

@@ -22,3 +22,8 @@ export {useCustomer, useEmail, usePhone} from './buyer-identity';
 export {useTranslate} from './translate';
 export {useSettings} from './settings';
 export {useExtensionEditor} from './extension-editor';
+export {
+  useDiscountAllocations,
+  useApplyDiscountCodeChange,
+  useDiscountCodes,
+} from './discounts';

packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/discounts.test.tsx

@@ -0,0 +1,70 @@
+import {
+  CartDiscountCode,
+  CartDiscountAllocation,
+} from '@shopify/ui-extensions/checkout';
+
+import {useDiscountAllocations, useDiscountCodes} from '../discounts';
+
+import {mount, createMockStatefulRemoteSubscribable} from './mount';
+import type {PartialExtensionApi} from './mount';
+
+describe('Discounts API hooks', () => {
+  describe('useDiscountCodes', () => {
+    it('returns the current discount codes', async () => {
+      const discountCodes: CartDiscountCode[] = [
+        {code: '20off'},
+        {code: 'free_shipping'},
+      ];
+
+      const extensionApi: PartialExtensionApi = {
+        discountCodes: createMockStatefulRemoteSubscribable(discountCodes),
+      };
+
+      const {value} = mount.hook(() => useDiscountCodes(), {extensionApi});
+
+      expect(value).toBe(discountCodes);
+    });
+  });
+
+  describe('useDiscountAllocations', () => {
+    it('returns the current discount allocations', async () => {
+      const discountAllocations: CartDiscountAllocation[] = [
+        {
+          code: '20off',
+          discountedAmount: {
+            amount: 20,
+            currencyCode: 'USD',
+          },
+          type: 'code',
+        },
+        {
+          title: '10% off',
+          discountedAmount: {
+            amount: 10,
+            currencyCode: 'USD',
+          },
+          type: 'automatic',
+        },
+        {
+          title: '15% off',
+          discountedAmount: {
+            amount: 15,
+            currencyCode: 'USD',
+          },
+          type: 'custom',
+        },
+      ];
+
+      const extensionApi: PartialExtensionApi = {
+        discountAllocations:
+          createMockStatefulRemoteSubscribable(discountAllocations),
+      };
+
+      const {value} = mount.hook(() => useDiscountAllocations(), {
+        extensionApi,
+      });
+
+      expect(value).toBe(discountAllocations);
+    });
+  });
+});

packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/metafield.test.tsx

@@ -71,7 +71,8 @@ describe('useMetafields', () => {
       mount.hook(
         () =>
           useMetafield({
-            // @ts-expect-error - testing a case that goes against the types
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
             namespace: undefined,
             key: 'test_key',
           }),

packages/ui-extensions-react/src/surfaces/checkout/hooks/tests/mount.tsx

@@ -26,10 +26,12 @@ type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
 
-type ExtensionApi = DeepPartial<ApiForRenderExtension<RenderExtensionPoint>>;
+export type PartialExtensionApi = DeepPartial<
+  ApiForRenderExtension<RenderExtensionPoint>
+>;
 
 interface Options {
-  extensionApi?: ExtensionApi;
+  extensionApi?: PartialExtensionApi;
 }
 
 export function createMockStatefulRemoteSubscribable<T>(

packages/ui-extensions/src/surfaces/checkout/api.ts

@@ -48,6 +48,16 @@ export type {
   CartLineRemoveChange,
   PresentmentCartLine,
   CartDiscountCode,
+  CartDiscountAllocation,
+  CartCodeDiscountAllocation,
+  CartAutomaticDiscountAllocation,
+  CartCustomDiscountAllocation,
+  DiscountCodeAddChange,
+  DiscountCodeRemoveChange,
+  DiscountCodeChange,
+  DiscountCodeChangeResult,
+  DiscountCodeChangeResultError,
+  DiscountCodeChangeResultSuccess,
   I18n,
   I18nTranslate,
   Currency,

packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts

@@ -605,10 +605,15 @@ export interface StandardApi<ExtensionPoint extends AnyExtensionPoint>
   applyCartLinesChange(change: CartLineChange): Promise<CartLineChangeResult>;
 
   /**
-   * A list of discount codes currently applied to the checkout
+   * A list of discount codes currently applied to the checkout.
    */
   discountCodes: StatefulRemoteSubscribable<CartDiscountCode[]>;
 
+  /**
+   * Discounts that have been applied to the entire cart.
+   */
+  discountAllocations: StatefulRemoteSubscribable<CartDiscountAllocation[]>;
+
   /**
    * Performs an update on the discount codes.
    * It resolves when the new discount codes have been negotiated and results in an update
@@ -806,6 +811,26 @@ export interface CartLine {
    * The line item additional custom attributes.
    */
   attributes: Attribute[];
+
+  /**
+   * Discounts applied to the cart line.
+   */
+  discountAllocations: CartDiscountAllocation[];
+
+  /** @private */
+  __lineComponents: CartLineComponentType[];
+}
+
+/** @private */
+type CartLineComponentType = CartBundleLineComponent;
+
+/** @private */
+export interface CartBundleLineComponent {
+  id: string;
+  merchandise: Merchandise;
+  quantity: number;
+  cost: CartLineCost;
+  attributes: Attribute[];
 }
 
 export interface CartLineCost {
@@ -851,6 +876,11 @@ export interface ProductVariant extends BaseMerchandise {
    */
   title: string;
 
+  /**
+   * The product variant's subtitle.
+   */
+  subtitle?: string;
+
   /**
    * Image associated with the product variant. This field falls back to the product
    * image if no image is available.
@@ -1074,7 +1104,59 @@ export interface CartDiscountCode {
   code: string;
 }
 
-export type DiscountCodeChange = DiscountCodeAddChange;
+export type CartDiscountAllocation =
+  | CartCodeDiscountAllocation
+  | CartAutomaticDiscountAllocation
+  | CartCustomDiscountAllocation;
+
+export interface CartDiscountAllocationBase {
+  /**
+   * The money amount that has been discounted from the order
+   */
+  discountedAmount: Money;
+}
+
+export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
+  /**
+   * The code for the discount
+   */
+  code: string;
+
+  /**
+   * The type of the code discount
+   */
+  type: 'code';
+}
+
+export interface CartAutomaticDiscountAllocation
+  extends CartDiscountAllocationBase {
+  /**
+   * The title of the automatic discount
+   */
+  title: string;
+
+  /**
+   * The type of the automatic discount
+   */
+  type: 'automatic';
+}
+
+export interface CartCustomDiscountAllocation
+  extends CartDiscountAllocationBase {
+  /**
+   * The title of the custom discount
+   */
+  title: string;
+
+  /**
+   * The type of the custom discount
+   */
+  type: 'custom';
+}
+
+export type DiscountCodeChange =
+  | DiscountCodeAddChange
+  | DiscountCodeRemoveChange;
 
 export type DiscountCodeChangeResult =
   | DiscountCodeChangeResultSuccess
@@ -1092,6 +1174,18 @@ export interface DiscountCodeAddChange {
   code: string;
 }
 
+export interface DiscountCodeRemoveChange {
+  /**
+   * The type of the `DiscountCodeChange` API.
+   */
+  type: 'removeDiscountCode';
+
+  /**
+   * The code for the discount
+   */
+  code: string;
+}
+
 export interface DiscountCodeChangeResultSuccess {
   /**
    * Indicates that the discount code change was applied successfully.

packages/ui-extensions/src/surfaces/checkout/components.ts

@@ -135,6 +135,7 @@ export type {
   BorderStyle,
   BorderWidth,
   Breakpoint,
+  CornerRadius,
   ShorthandProperty,
   MaybeShorthandProperty,
   Fit,
@@ -148,6 +149,7 @@ export type {
   Rows,
   BackgroundProps,
   BorderProps,
+  CornerProps,
   SizingProps,
   SpacingProps,
   VisibilityProps,

packages/ui-extensions/src/surfaces/checkout/components/InlineSpacer/examples/basic-inlinespacer.example.ts

@@ -10,6 +10,10 @@ extend('Checkout::Dynamic::Render', (root) => {
     root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
     root.createComponent(InlineSpacer, {spacing: 'loose'}),
     root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(InlineSpacer, {spacing: 'tight'}),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(InlineSpacer, {spacing: 'base'}),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
   ]);
 
   root.appendChild(inlineSpacer);

packages/ui-extensions/src/surfaces/checkout/components/SkeletonImage/SkeletonImage.ts

@@ -6,12 +6,13 @@ export interface SkeletonImageProps {
   /**
    * Adjust the block size of the skeleton.
    */
-
   blockSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
+
   /**
    * Adjust the inline size of the skeleton.
    */
   inlineSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
+
   /**
    * Displays the skeleton at the specified aspect ratio (fills the width of the
    * parent container and sets the height accordingly).