Add last set of checkout changes

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

@@ -59,20 +59,20 @@ export function useBuyerJourneyIntercept<
 >(interceptor: Interceptor): void {
   const api = useApi<Target>();
 
-  if ('buyerJourney' in api) {
-    const interceptorRef = useRef(interceptor);
-    interceptorRef.current = interceptor;
+  if (!('buyerJourney' in api)) {
+    throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);
+  }
 
-    useEffect(() => {
-      const teardownPromise = api.buyerJourney.intercept((interceptorProps) =>
-        interceptorRef.current(interceptorProps),
-      );
+  const interceptorRef = useRef(interceptor);
+  interceptorRef.current = interceptor;
 
-      return () => {
-        teardownPromise.then((teardown) => teardown()).catch(() => {});
-      };
-    }, [api.buyerJourney]);
-  }
+  return useEffect(() => {
+    const teardownPromise = api.buyerJourney.intercept((interceptorProps) =>
+      interceptorRef.current(interceptorProps),
+    );
 
-  throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);
+    return () => {
+      teardownPromise.then((teardown) => teardown()).catch(() => {});
+    };
+  }, [api.buyerJourney]);
 }

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

@@ -1,22 +1,19 @@
-import type {
-  Extension,
-  RenderExtensionTarget,
-} from '@shopify/ui-extensions/checkout';
+import type {Extension} from '@shopify/ui-extensions/checkout';
 
 import {useApi} from './api';
 
 /**
  * Returns the metadata about the extension.
  */
-export function useExtension<
-  Target extends RenderExtensionTarget = RenderExtensionTarget,
->(): Extension<Target> {
-  return useApi<Target>().extension as Extension<Target>;
+export function useExtension(): Extension {
+  return useApi().extension as Extension;
 }
 
 /**
  * Returns the metadata about the extension.
- *
+ * > Caution: This is deprecated, use `useExtension()` instead.
  * @deprecated Use `useExtension()` instead.
  */
-export const useExtensionData = useExtension;
+export function useExtensionData(): Extension {
+  return useExtension();
+}

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

@@ -17,8 +17,6 @@ export function useTranslate<
 
   const translate = useCallback<I18nTranslate>(
     (...args) => {
-      // @ts-expect-error TypeScript loses track of the generic type argument
-      // here for some reason...
       const translation = i18n.translate(...args);
 
       if (!Array.isArray(translation)) {

packages/ui-extensions-react/src/surfaces/customer-account/hooks/extension.ts

@@ -0,0 +1,19 @@
+import type {Extension} from '@shopify/ui-extensions/customer-account';
+
+import {useApi} from './api';
+
+/**
+ * Returns the metadata about the extension.
+ */
+export function useExtension(): Extension {
+  return useApi().extension;
+}
+
+/**
+ * Returns the metadata about the extension.
+ * > Caution: This is deprecated, use `useExtension()` instead.
+ * @deprecated Use `useExtension()` instead.
+ */
+export function useExtensionData(): Extension {
+  return useExtension();
+}

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

@@ -18,7 +18,7 @@ export {useTarget} from './target';
 export {useAppMetafields} from './app-metafields';
 export {useShop} from './shop';
 export {useStorage} from './storage';
-export {useExtensionData} from './extension-data';
+export {useExtension, useExtensionData} from './extension';
 export {useSubscription} from './subscription';
 export {
   useCustomer,

packages/ui-extensions-react/src/surfaces/customer-account/render.tsx

@@ -44,6 +44,8 @@ export function reactExtension<Target extends RenderExtensionTarget>(
       await new Promise<void>((resolve, reject) => {
         try {
           remoteRender(
+            // @ts-expect-error This is a hack around some type conflicts between the
+            // customer-account version of this target’s API and the checkout version.
             <ExtensionApiContext.Provider value={api}>
               <ErrorBoundary>{element}</ErrorBoundary>
             </ExtensionApiContext.Provider>,

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

@@ -21,9 +21,15 @@ 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"
 
+# `customer-accounts` has duplicate types that cause issues with documentation generation,
+# so we erase its contents and replace them afterwards
+echo "export {}" > src/surfaces/customer-account.ts
+
 eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES
 build_exit=$?
 
+git checkout HEAD -- src/surfaces/customer-account.ts
+
 # TODO: get generate-docs to stop requiring JS files:
 # https://github.com/Shopify/generate-docs#important-note
 find ./ -name '*.doc*.js' -exec rm -r {} \;

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

@@ -13,7 +13,7 @@ You register for [targets](/docs/api/checkout-ui-extensions/extension-targets-ov
 
 The API for each extension target is passed as an argument to your function. While all targets inherit the [\`StandardApi\`](/docs/api/checkout-ui-extensions/apis/standardapi), not all of them share the same properties and methods.
 
-For example, the [\`purchase.checkout.cart-line-item.render-after\`](typesofextensiontargets-propertydetail-purchasecheckoutcartlineitemrenderafter) target has access to the [\`CheckoutApi\`](/docs/api/checkout-ui-extensions/apis/checkoutapi) to modify a checkout, but the [\`purchase.thank-you.cart-line-item.render-after\`](#typesofextensiontargets-propertydetail-purchasethankyoucartlineitemrenderafter) target does not.
+For example, the [\`purchase.checkout.cart-line-item.render-after\`](#typesofextensiontargets-propertydetail-purchasecheckoutcartlineitemrenderafter) target has access to the [\`CheckoutApi\`](/docs/api/checkout-ui-extensions/apis/checkoutapi) to modify a checkout, but the [\`purchase.thank-you.cart-line-item.render-after\`](#typesofextensiontargets-propertydetail-purchasethankyoucartlineitemrenderafter) target does not.
   `,
   isVisualComponent: false,
   category: 'APIs',

packages/ui-extensions/docs/surfaces/checkout/reference/examples/extension-targets.example.tsx

@@ -6,10 +6,11 @@ import {
 
 function Extension() {
   const {extension} = useApi();
+  const {target} = extension;
 
   return (
     <Banner>
-      This extension is rendering in the {extension.target}
+      This extension is rendering in the {target}
       extension target.
     </Banner>
   );

packages/ui-extensions/docs/surfaces/checkout/reference/hooks/extension.doc.ts

@@ -0,0 +1,23 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import {getLinksByTag} from '../helper.docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useExtension',
+  description: '',
+  descriptionType: 'UseExtensionGeneratedType',
+  isVisualComponent: false,
+  type: 'hook',
+  category: 'React Hooks',
+  subCategory: 'Metadata',
+  definitions: [
+    {
+      title: '',
+      description: '',
+      type: 'UseExtensionGeneratedType',
+    },
+  ],
+  related: getLinksByTag('apis'),
+};
+
+export default data;

packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/migration/migration-output.txt

@@ -0,0 +1,18 @@
+❯ yarn deploy
+yarn run v1.22.19
+$ shopify app deploy
+
+╭─ info ───────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                      │
+│  Extension migrations can't be undone.                                                               │
+│                                                                                                      │
+│  Your "my-extension" configuration has been updated. Migrating gives you access to new               │
+│  features and won't impact the end user experience. All previous extension versions will reflect     │
+│  this change.                                                                                        │
+│                                                                                                      │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────────╯
+
+?  Migrate "my-extension"?
+
+>  (y) Yes, confirm migration from "checkout_ui_extension"
+   (n) No, cancel