Add purchase options card extensions

packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts

@@ -156,6 +156,18 @@ You register targets in your \`shopify.extension.toml\` and inside the Javascrip
             'This page shows information about a single product variant. The `admin.product-variant-details.action.render` target is available on this page.',
           image: 'admin.product-variant-details.action.render.png',
         },
+        {
+          title: 'Product detail purchase options card',
+          description:
+            'This page shows information about a single product, including a card showing purchase options. The `admin.product-purchase-option.action.render` target is available on this page when selling plans exists.',
+          image: 'admin.product-purchase-option.action.render.png',
+        },
+        {
+          title: 'Product variant detail purchase options card',
+          description:
+            'This page shows information about a single product variant, including a card showing purchase options. The `admin.product-variant-purchase-option.action.render` target is available on this page when selling plans exists.',
+          image: 'admin.product-variant-purchase-option.action.render.png',
+        },
       ],
     },
     {

packages/ui-extensions/src/surfaces/admin/api/purchase-options-card-action/purchase-options-card-action.ts

@@ -0,0 +1,10 @@
+import {ActionExtensionApi} from '../action/action';
+import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
+
+export interface PurchaseOptionsCardConfigurationApi<
+  ExtensionTarget extends AnyExtensionTarget,
+> extends ActionExtensionApi<ExtensionTarget> {
+  data: {
+    selected: {id: string; sellingPlanId?: string}[];
+  };
+}

packages/ui-extensions/src/surfaces/admin/extension-targets.ts

@@ -13,6 +13,7 @@ import type {
   ValidationSettingsApi,
 } from './api';
 import {AnyComponentBuilder} from '../../shared';
+import {PurchaseOptionsCardConfigurationApi} from './api/purchase-options-card-action/purchase-options-card-action';
 
 type CustomerSegmentTemplateComponent = AnyComponentBuilder<
   Pick<
@@ -422,6 +423,26 @@ export interface ExtensionTargets {
     AllComponents
   >;
 
+  /**
+   * Renders an admin action extension in the product details page when a selling plan group is present. Open this extension from the "Purchase Options card".
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.product-purchase-option.action.render': RenderExtension<
+    PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the product variant details page when a selling plan group is present. Open this extension from the "Purchase Options card".
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.product-variant-purchase-option.action.render': RenderExtension<
+    PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,
+    AllComponents
+  >;
+
   // Print actions and bulk print actions
 
   /**