[checkout] Update to e347663885f4d404be3b8b03d9bebdd0caf970d7

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

@@ -42,6 +42,9 @@ export function useBuyerJourneyCompleted<
  *
  * If you do, then you're expected to inform the buyer why navigation was blocked,
  * either by passing validation errors to the checkout UI or rendering the errors in your extension.
+ *
+ * `useBuyerJourneyIntercept()` should be called at the top level of the extension,
+ * not within an embedded or child component, to avoid errors should the child component get destroyed.
  */
 export function useBuyerJourneyIntercept<
   Target extends RenderExtensionTarget = RenderExtensionTarget,

packages/ui-extensions-react/src/surfaces/checkout/render.tsx

@@ -95,7 +95,6 @@ interface ErrorState {
 
 // Using ErrorBoundary allows us to relay the errors coming from React reconcilation
 // to the global object using reportError.
-// eslint-disable-next-line @typescript-eslint/ban-types
 class ErrorBoundary extends Component<PropsWithChildren<{}>, ErrorState> {
   static getDerivedStateFromError() {
     // Update state so the next render will show the fallback UI.

packages/ui-extensions/docs/surfaces/checkout/build-docs.sh

@@ -22,15 +22,15 @@ run_sed() {
 if [ -z $API_VERSION ]
 then
   API_VERSION="unstable"
-  echo "Building docs for 'unstable' checkout UI extensions API. You can add a calver version argument (e.g. 'yarn docs:checkout 2023-07') to generate the docs for a stable version."
+  echo "Building docs for 'unstable' checkout UI extensions API. You can add a calver version argument (e.g. 'pnpm docs:checkout 2023-07') to generate the docs for a stable version."
 else
   echo "Building docs for '$API_VERSION' checkout UI extensions API."
   echo "When generating docs for a stable version, 'unstable' docs are not regenerated. This avoids overwriting other unstable changes that are not included in this version."
   echo "If you need to update the 'unstable' version, run this command again without the '$API_VERSION' parameter."
 fi
 
-COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated"
-COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated"
+COMPILE_DOCS="pnpm tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && pnpm generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated"
+COMPILE_STATIC_PAGES="pnpm tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node  --target esNext  --module CommonJS && pnpm generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated"
 
 
 if echo "$PWD" | grep -q '\checkout-web'; then
@@ -104,3 +104,4 @@ else
   SHOPIFY_DEV_PATH="../../../../../../shopify-dev"
   copy_generated_docs_to_shopify_dev
 fi
+

packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-journey.doc.ts

@@ -38,6 +38,7 @@ const data: ReferenceEntityTemplateSchema = {
         Installs a function for intercepting and preventing progress on checkout.
         To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration.
         If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension.
+        \`useBuyerJourneyIntercept()\` should be called at the top level of the extension, not within an embedded or child component, to avoid errors should the child component get destroyed.
       `,
       type: 'UseBuyerJourneyInterceptGeneratedType',
     },

packages/ui-extensions/docs/surfaces/checkout/reference/apis/localized-fields.doc.ts

@@ -29,7 +29,7 @@ const data: ReferenceEntityTemplateSchema = {
     {
       title: 'useLocalizedField',
       description:
-        'Returns the requested localized field and re-renders your component if the value changes.',
+        'Returns the current localized fields and re-renders your component if the values change.',
       type: 'UseLocalizedFieldGeneratedType',
     },
   ],

packages/ui-extensions/docs/surfaces/checkout/reference/apis/order.doc.ts

@@ -9,6 +9,10 @@ import {
 
 // added temporarily to keep a note that the order status api docs have been moved to customer accounts
 // can be removed from 2025-01 on
+// An empty interface means any no-nullish value including values like strings.
+// That seems incorrect, but the lint rule was added after this interface and
+// I don't want to touch this public API.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 interface OrderStatusApiEmpty {}
 
 const data: ReferenceEntityTemplateSchema = {

packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts

@@ -10,12 +10,13 @@ export const REQUIRES_PROTECTED_CUSTOMER_DATA_LEVEL_2 =
 
 type NonEmptyArray<T> = [T, ...T[]];
 type ExtensionExampleLanguage = 'js' | 'jsx' | 'toml';
-type ExtensionCodeTabConfig = {
-  [key in ExtensionExampleLanguage]: {
+type ExtensionCodeTabConfig = Record<
+  ExtensionExampleLanguage,
+  {
     title: string;
     fileExtension: 'ts' | 'tsx' | 'toml';
-  };
-};
+  }
+>;
 const codeExampleTabConfig: ExtensionCodeTabConfig = {
   js: {
     title: 'JavaScript',

packages/ui-extensions/src/shared.ts

@@ -24,6 +24,7 @@ export type ApiVersion =
   | '2024-07'
   | '2024-10'
   | '2025-01'
+  | '2025-04'
   | 'unstable';
 
 /**
@@ -917,6 +918,7 @@ export type StorefrontApiVersion =
   | '2024-07'
   | '2024-10'
   | '2025-01'
+  | '2025-04'
   | 'unstable';
 
 /**

packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-communication.example.js

@@ -3,7 +3,7 @@
 let buyerFirstName;
 
 // In the hosted application Javascript, listen for messages from the UI extension.
-shopify.extension.port.onMessage = async (event) => {
+shopify.extension.port.onmessage = async (event) => {
   // if the message's data has a ping action, respond with a pong
   if (event.data.action === 'ping') {
     buyerFirstName = event.data.buyer.firstName;

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

@@ -1,5 +1,9 @@
 import {createRemoteComponent} from '@remote-ui/core';
 
+// An empty interface means any no-nullish value including values like strings.
+// That seems incorrect, but the lint rule was added after this interface and
+// I don't want to touch this public API.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface HeadingGroupProps {}
 
 /**

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

@@ -349,7 +349,7 @@ export interface SpacingProps {
    *
    * - [`base`, `none`] means blockStart and blockEnd paddings are `base`, inlineStart and inlineEnd paddings are `none`
    *
-   * - [`base`, `none`, `loose`, `tight`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `loose` and blockStart padding is `tight`
+   * - [`base`, `none`, `large200`, `small200`] means blockStart padding is `base`, inlineEnd padding is `none`, blockEnd padding is `large200` and  blockStart padding is `small200`
    */
   padding?: MaybeResponsiveConditionalStyle<MaybeShorthandProperty<Spacing>>;
 }
@@ -503,11 +503,28 @@ export type Size =
 
 export type Spacing =
   | 'none'
-  | 'extraTight'
-  | 'tight'
+  | 'small500'
+  | 'small400'
+  | 'small300'
+  | 'small200'
+  | 'small100'
   | 'base'
-  | 'loose'
-  | 'extraLoose';
+  | 'large100'
+  | 'large200'
+  | 'large300'
+  | 'large400'
+  | 'large500'
+  | SpacingDeprecated;
+
+/** @deprecated These values are deprecated and will eventually be removed.
+ * Use the new values.
+ *
+ * `extraTight`: `small400`
+ * `tight`: `small200`
+ * `loose`: `large200`
+ * `extraLoose`: `large500`
+ */
+export type SpacingDeprecated = 'extraTight' | 'tight' | 'loose' | 'extraLoose';
 
 export type Alignment = 'start' | 'center' | 'end';
 export type InlineAlignment = 'start' | 'center' | 'end';
@@ -621,12 +638,9 @@ export type MultiPick<Base, AcceptedCombinations extends (keyof Base)[]> = {
     [Accepted in AcceptedCombinations[Combination] as Accepted extends keyof Base
       ? Accepted
       : never]?: Accepted extends keyof Base ? Base[Accepted] : never;
-  } & {
-    [NotAccepted in Exclude<
-      keyof Base,
-      AcceptedCombinations[Combination]
-    >]?: never;
-  };
+  } & Partial<
+    Record<Exclude<keyof Base, AcceptedCombinations[Combination]>, never>
+  >;
 }[number];
 
 export type Visibility = 'hidden';

packages/ui-extensions/src/surfaces/checkout/helper.docs.ts

@@ -4,12 +4,13 @@ const examplePath = '../../../../../docs/surfaces/checkout/reference/examples';
 
 type NonEmptyArray<T> = [T, ...T[]];
 type ExtensionExampleLanguage = 'js' | 'jsx';
-type ExtensionCodeTabConfig = {
-  [key in ExtensionExampleLanguage]: {
+type ExtensionCodeTabConfig = Record<
+  ExtensionExampleLanguage,
+  {
     title: string;
     fileExtension: 'ts' | 'tsx';
-  };
-};
+  }
+>;
 const codeExampleTabConfig: ExtensionCodeTabConfig = {
   js: {
     title: 'JavaScript',