@shopify/ui-extensions 2024.1.0 → 2024.4.0

package/src/surfaces/admin/extension-targets.ts

@@ -9,6 +9,7 @@ import type {
   ProductDetailsConfigurationApi,
   ProductVariantDetailsConfigurationApi,
   OrderRoutingRuleApi,
+  ValidationSettingsApi,
 } from './api';
 import {AnyComponentBuilder} from '../../shared';
 
@@ -101,7 +102,7 @@ export interface ExtensionTargets {
 
   // Actions
   /**
-   * Renders an Admin Action in the product details page. Open this extension from the "More Actions" menu.
+   * Renders an admin action extension in the product details page. Open this extension from the "More Actions" menu.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -111,7 +112,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the order details page. Open this extension from the "More Actions" menu.
+   * Renders an admin action extension in the order details page. Open this extension from the "More Actions" menu.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -121,7 +122,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the customer details page. Open this extension from the "More Actions" menu.
+   * Renders an admin action extension in the customer details page. Open this extension from the "More Actions" menu.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -131,7 +132,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the customer segment details page. Open this extension from the "Use segment" button.
+   * Renders an admin action extension in the customer segment details page. Open this extension from the "Use segment" button.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -141,7 +142,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the product index page. Open this extension from the "More Actions" menu.
+   * Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -151,7 +152,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the order index page. Open this extension from the "More Actions" menu.
+   * Renders an admin action extension in the order index page. Open this extension from the "More Actions" menu.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -161,7 +162,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the customer index page. Open this extension from the "More Actions" menu.
+   * Renders an admin action extension in the customer index page. Open this extension from the "More Actions" menu.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -170,10 +171,101 @@ export interface ExtensionTargets {
     AllComponents
   >;
 
+  /**
+   * Renders an admin action extension in the discount index page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.discount-index.action.render': RenderExtension<
+    ActionExtensionApi<'admin.discount-index.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the collection details page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.collection-details.action.render': RenderExtension<
+    ActionExtensionApi<'admin.collection-details.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the collection index page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.collection-index.action.render': RenderExtension<
+    ActionExtensionApi<'admin.collection-index.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the abandonded checkout page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.abandoned-checkout-details.action.render': RenderExtension<
+    ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the product variant details page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.product-variant-details.action.render': RenderExtension<
+    ActionExtensionApi<'admin.product-variant-details.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the draft order details page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.draft-order-details.action.render': RenderExtension<
+    ActionExtensionApi<'admin.draft-order-details.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the draft orders page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.draft-order-index.action.render': RenderExtension<
+    ActionExtensionApi<'admin.draft-order-index.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the discount details page. Open this extension from the "More Actions" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.discount-details.action.render': RenderExtension<
+    ActionExtensionApi<'admin.discount-details.action.render'>,
+    AllComponents
+  >;
+
+  /**
+   * Renders an admin action extension in the order fulfilled card. Open this extension from the "3-dot" menu inside the order fulfilled card.
+   * Note: This extension will only be visible on orders which were fulfilled by your app.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.order-fulfilled-card.action.render': RenderExtension<
+    ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,
+    AllComponents
+  >;
+
   // Bulk Actions
 
   /**
-   * Renders an Admin Action in the product index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+   * Renders an admin action extension in the product index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -183,7 +275,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the order index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+   * Renders an admin action extension in the order index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -193,7 +285,7 @@ export interface ExtensionTargets {
   >;
 
   /**
-   * Renders an Admin Action in the customer index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+   * Renders an admin action extension in the customer index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
    *
    * See the [list of available components](/docs/api/admin-extensions/components).
    */
@@ -202,10 +294,20 @@ export interface ExtensionTargets {
     AllComponents
   >;
 
+  /**
+   * Renders an admin action extension in the draft order page when multiple resources are selected. Open this extension from the "3-dot" menu.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.draft-order-index.selection-action.render': RenderExtension<
+    ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,
+    AllComponents
+  >;
+
   /**
    * Renders Product Configuration on product details and product variant details
    *
-   * See the [tutorial](docs/apps/selling-strategies/bundles/product-config) for more information
+   * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information
    */
   'admin.product-details.configuration.render': RenderExtension<
     ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,
@@ -215,7 +317,7 @@ export interface ExtensionTargets {
   /**
    * Renders Product Configuration on product details and product variant details
    *
-   * See the [tutorial](docs/apps/selling-strategies/bundles/product-config) for more information
+   * See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information
    */
   'admin.product-variant-details.configuration.render': RenderExtension<
     ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,
@@ -235,6 +337,16 @@ export interface ExtensionTargets {
     OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,
     AllComponents
   >;
+
+  /**
+   * Renders Validation Settings within a given validation's add and edit views.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.settings.validation.render': RenderExtension<
+    ValidationSettingsApi<'admin.settings.validation.render'>,
+    AllComponents
+  >;
 }
 
 export type ExtensionTarget = keyof ExtensionTargets;
@@ -258,7 +370,7 @@ export type ArgumentsForExtension<ID extends keyof ExtensionTargets> =
 
 /**
  * A union type containing all of the extension targets that follow the pattern of
- * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-ui/tree/main/packages/core)
+ * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-dom/tree/remote-ui/packages/core)
  * and an additional `api` argument, and using those arguments to render
  * UI.
  */

package/src/surfaces/checkout/api/address-autocomplete/address-autocomplete.ts

@@ -0,0 +1,87 @@
+import type {MailingAddress} from '../shared';
+
+export interface AddressAutocompleteSuggestApi {
+  target: {
+    /**
+     * The input that the user has typed so far into the address field.
+     *
+     * @example "123 M"
+     */
+    value: string;
+
+    /**
+     * The address field that the buyer is interacting with.
+     *
+     * @example "address1"
+     */
+    field: AutocompleteAddress;
+
+    /**
+     * An AbortSignal that may be used to cancel in-flight network requests.
+     * This signal is sent when the buyer has stopped interacting with the address field.
+     */
+    signal: AbortSignal;
+  };
+}
+export interface AddressAutocompleteSuggestion {
+  /**
+   * The human-readable autocomplete suggestion text. This text is
+   * shown to the buyer as-is. No attempts will be made to parse it.
+   *
+   * @example "123 Main St, Toronto, ON, CA"
+   */
+  description: string;
+
+  /**
+   * Optional.
+   *
+   * A textual identifier that uniquely identifies an autocomplete suggestion
+   * or address. This identifier may be used to search for a formatted address.
+   *
+   * @example "35ef8d55-dceb-4ed8-847b-2f2fc7472f14"
+   */
+  id?: string;
+
+  /**
+   * Optional.
+   *
+   * If provided, this will be used to highlight the substrings
+   * of the suggestions that matched the original search query.
+   *
+   * @example [{offset: 0, length: 4}]
+   */
+  matchedSubstrings?: MatchedSubstring[];
+
+  /**
+   * Optional.
+   *
+   * If an extension returns this along with a suggestion, the autocomplete
+   * field will use this value to auto-fill the remaining address fields.
+   *
+   * If this value is returned for every suggestion, there is no need to implement
+   * the `purchase.address-autocomplete.format-suggestion` extension target.
+   */
+  formattedAddress?: AutocompleteAddress;
+}
+
+interface MatchedSubstring {
+  /**
+   * The start location of the matched substring in the suggestion description text.
+   */
+  offset: number;
+  /**
+   * The length of the matched substring in the suggestion description text.
+   */
+  length: number;
+}
+
+/**
+ * A partial mailing address with only fields relevant to address autocomplete.
+ * All fields are optional
+ */
+type AutocompleteAddress = Partial<
+  Pick<
+    MailingAddress,
+    'address1' | 'address2' | 'city' | 'provinceCode' | 'zip' | 'countryCode'
+  >
+>;

package/src/surfaces/checkout/api/cart-line/cart-line-item.ts

@@ -1,6 +1,6 @@
 import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
 
-import {CartLine} from '../standard/standard';
+import type {CartLine} from '../standard/standard';
 
 export interface CartLineItemApi {
   /**

package/src/surfaces/checkout/api/checkout/checkout.ts

@@ -1,4 +1,4 @@
-import {Attribute, SellingPlan, MailingAddress} from '../shared';
+import type {Attribute, SellingPlan, MailingAddress} from '../shared';
 
 /**
  * Removes a note
@@ -232,7 +232,7 @@ export interface DiscountCodeAddChange {
   type: 'addDiscountCode';
 
   /**
-   * The code for the discount
+   * The code for the discount (case-sensitive)
    */
   code: string;
 }
@@ -244,7 +244,7 @@ export interface DiscountCodeRemoveChange {
   type: 'removeDiscountCode';
 
   /**
-   * The code for the discount
+   * The code for the discount (case-sensitive)
    */
   code: string;
 }

package/src/surfaces/checkout/api/docs.ts

@@ -1,9 +1,7 @@
-import {
-  StandardApi,
-  CheckoutApi,
-  CartLineItemApi,
-  OrderStatusApi,
-} from '../api';
+import type {StandardApi} from './standard/standard';
+import type {CheckoutApi} from './checkout/checkout';
+import type {CartLineItemApi} from './cart-line/cart-line-item';
+import type {OrderStatusApi} from './order-status/order-status';
 
 /**
  * These types are used to generate the documentation for the API and decipher which properties are available for which APIs.
@@ -97,3 +95,6 @@ export interface Docs_Standard_QueryApi extends Pick<StandardApi, 'query'> {}
 
 export interface Docs_Standard_AnalyticsApi
   extends Pick<StandardApi, 'analytics'> {}
+
+export interface Docs_Standard_CustomerPrivacyApi
+  extends Pick<StandardApi, 'customerPrivacy' | 'applyTrackingConsentChange'> {}

package/src/surfaces/checkout/api/order-confirmation/order-confirmation.ts

@@ -0,0 +1,22 @@
+import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+
+export interface OrderConfirmation {
+  order: {
+    /**
+     * The globally-uniqueID of the OrderConfirmation. This will be the ID of the Order once successfully created.
+     */
+    id: string;
+  };
+  /**
+   * A randomly generated alpha-numeric identifier for the order.
+   * For orders created in 2024 and onwards, the number will always be present. For orders created before that date, the number might not be present.
+   */
+  number?: string;
+}
+
+export interface OrderConfirmationApi {
+  /**
+   * Order information that's available post-checkout.
+   */
+  orderConfirmation: StatefulRemoteSubscribable<OrderConfirmation>;
+}

package/src/surfaces/checkout/api/order-status/order-status.ts

@@ -1,4 +1,4 @@
-import {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
 
 /**
  * Information about an order that was placed.
@@ -18,6 +18,11 @@ export interface Order {
    * If cancelled, the time at which the order was cancelled.
    */
   cancelledAt?: string;
+  /**
+   * A randomly generated alpha-numeric identifier for the order.
+   * For orders created in 2024 and onwards, the number will always be present. For orders created before that date, the number might not be present.
+   */
+  confirmationNumber?: string;
 }
 
 export interface OrderStatusApi {

package/src/surfaces/checkout/api/payment/payment-option-item.ts

@@ -1,4 +1,4 @@
-import {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
 
 export type PaymentMethodAttributesResult =
   | PaymentMethodAttributesResultSuccess

package/src/surfaces/checkout/api/pickup/pickup-location-item.ts

@@ -0,0 +1,15 @@
+import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+
+import type {PickupLocationOption} from '../standard/standard';
+
+export interface PickupLocationItemApi {
+  /**
+   * The pickup location the extension is attached to.
+   */
+  target: StatefulRemoteSubscribable<PickupLocationOption>;
+
+  /**
+   * Whether the pickup location is currently selected.
+   */
+  isTargetSelected: StatefulRemoteSubscribable<boolean>;
+}