@shopify/ui-extensions 2026.4.2 → 2026.4.4

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

@@ -1,166 +0,0 @@
-import type {CodeTabType, ExampleType} from '@shopify/generate-docs';
-
-const examplePath = '../../../../../docs/surfaces/checkout/reference/examples';
-
-type NonEmptyArray<T> = [T, ...T[]];
-type ExtensionExampleLanguage = 'js' | 'jsx';
-type ExtensionCodeTabConfig = Record<
-  ExtensionExampleLanguage,
-  {
-    title: string;
-    fileExtension: 'ts' | 'tsx';
-  }
->;
-const codeExampleTabConfig: ExtensionCodeTabConfig = {
-  js: {
-    title: 'JavaScript',
-    fileExtension: 'ts',
-  },
-  jsx: {
-    title: 'React',
-    fileExtension: 'tsx',
-  },
-};
-
-/**
- * Returns all examples available, specified with a key for reference.
- */
-export function getExamples(
-  languages: NonEmptyArray<ExtensionExampleLanguage>,
-): Record<string, ExampleType> {
-  if (!languages || languages.length === 0) {
-    throw new HelperDocsError(
-      'You must define at least one extension code language context you wish to retrieve the example(s) for.',
-    );
-  }
-  /**
-   * Provides the code tab for the requested languages in "JavaScript" and "React".
-   */
-  function getExtensionCodeTabs(name: string): CodeTabType[] {
-    return languages.map((language) => {
-      return {
-        code: `${examplePath}/${name}.example.${codeExampleTabConfig[language].fileExtension}`,
-        language,
-        title: codeExampleTabConfig[language].title,
-      };
-    });
-  }
-
-  // Add new examples here that can be shared across multiples pages.
-  return {
-    'ui-components/clipboarditem-qrcode': {
-      description:
-        'When displaying a QR code, include an alternative way for the user to get the content',
-      image: 'clipboard-qrcode.png',
-      codeblock: {
-        title: "Copying content of a QR code to the user's clipboard",
-        tabs: getExtensionCodeTabs('ui-components/clipboarditem-qrcode'),
-      },
-    },
-    'ui-components/choicelist-survey': {
-      description: `The base variant’s flexibility allows for the creation of Likert scales using the ChoiceList component. By utilizing layout components, you can easily structure rows and columns for this purpose.`,
-      image: 'choicelist-survey.png',
-      codeblock: {
-        title: 'Custom survey using the base variant',
-        tabs: getExtensionCodeTabs('ui-components/choicelist-survey'),
-      },
-    },
-    'ui-components/choicelist-details': {
-      description: `The ChoiceList’s group variant, combined with the details property, allows for the conditional display of information when needed.`,
-      image: 'choicelist-details.png',
-      codeblock: {
-        title: 'Collecting additional information',
-        tabs: getExtensionCodeTabs('ui-components/choicelist-details'),
-      },
-    },
-    'ui-components/choicelist-time-picking': {
-      description: `The ChoiceList component is great for presenting a concise list of options, particularly when showcasing time ranges due to its ample horizontal space. However, if there’s more than 5 choices, use the [Select](/docs/api/checkout-ui-extensions/components/forms/select) component instead.`,
-      image: 'choicelist-time-picking.png',
-      codeblock: {
-        title: 'Displaying a short list of time choices',
-        tabs: getExtensionCodeTabs('ui-components/choicelist-time-picking'),
-      },
-    },
-    'ui-components/sheet-consent': {
-      description:
-        'The Sheet component can be used to display privacy consent preferences in the Checkout interface. Sheet can be defaulted to open for this use case.\n\n This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/apis/customer-privacy) to be rendered.',
-      codeblock: {
-        title: 'Using Sheet to display consent preferences',
-        tabs: getExtensionCodeTabs('ui-components/sheet-consent'),
-      },
-    },
-    'ui-components/sheet-description-preferences': {
-      description:
-        'In order to save space in the action slot, secondary actions can be placed in the content area.',
-      image: 'sheet-description-preferences.png',
-      codeblock: {
-        title: 'Preferences button is in the description as a link',
-        tabs: getExtensionCodeTabs(
-          'ui-components/sheet-description-preferences',
-        ),
-      },
-    },
-    'ui-components/sheet-layout-content': {
-      description:
-        'The description can take in layout components to allow for different types of content to be structured in specific ways.',
-      image: 'sheet-layout-content.png',
-      codeblock: {
-        title: 'Using layout component in the description ',
-        tabs: getExtensionCodeTabs('ui-components/sheet-layout-content'),
-      },
-    },
-    'ui-components/sheet-icon-button-preferences': {
-      description:
-        'An icon button can be used in the secondary actions area to allow for more space for the primary actions.',
-      image: 'sheet-icon-button-preferences.png',
-      codeblock: {
-        title: 'Icon button used for preferences',
-        tabs: getExtensionCodeTabs(
-          'ui-components/sheet-icon-button-preferences',
-        ),
-      },
-    },
-    'ui-components/qrcode-image': {
-      description:
-        'The QRCode component can display an image in the center. Adding a logo can increase brand trust and set expectations for the action when scanning.',
-      image: 'qrcode-image.png',
-      codeblock: {
-        title: 'With logo',
-        tabs: getExtensionCodeTabs('ui-components/qrcode-image'),
-      },
-    },
-    'ui-components/qrcode-fill-size': {
-      description:
-        'In most cases the default size should work well. If you need a different size, use `fill` to make it grow to the size of its parent container.',
-      image: 'qrcode-fill-size.png',
-      codeblock: {
-        title: 'Fill size',
-        tabs: getExtensionCodeTabs('ui-components/qrcode-fill-size'),
-      },
-    },
-  };
-}
-
-/**
- * Returns a specific `Example` by name, as specified in `getExamples()`.
- * Specify whether you want to include both `js` and `jsx`examples or just one.
- */
-export function getExample(
-  name: string,
-  languages: NonEmptyArray<ExtensionExampleLanguage> = ['js'],
-): ExampleType {
-  const example = getExamples(languages)[name];
-  if (!example) {
-    throw new HelperDocsError(
-      `Could not find a matching example with the name "${name}". Does it exist within the file "docs/reference/helper.docs.ts" in getExamples()?`,
-    );
-  }
-  return example;
-}
-
-class HelperDocsError extends Error {
-  name = 'HelperDocsError';
-}
-
-export const REQUIRES_PROTECTED_CUSTOMER_DATA =
-  'access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) for some properties.';

package/src/surfaces/point-of-sale/event/data/CartUpdateEventData.ts

@@ -1,14 +0,0 @@
-import {BaseData} from './BaseData';
-import {Cart} from '../../api';
-import {BaseApi} from './BaseApi';
-
-/**
- * The data object provided to cart update extension targets. Contains the current cart state along with device, session, and connectivity information. This data is passed to extensions whenever the cart changes, enabling real-time cart monitoring and cart-based business logic.
- * @publicDocs
- */
-export interface CartUpdateEventData extends BaseData, BaseApi {
-  /**
-   * The complete current `Cart` object containing all cart data including line items with products and quantities, pricing totals (subtotal, tax, grand total), associated customer information, applied discounts, custom properties, and editability state. This represents the cart's state at the moment the extension is triggered, reflecting all recent changes. The cart object is read-only in this context—modifications should be made through the Cart API methods.
-   */
-  cart: Cart;
-}

package/src/surfaces/point-of-sale/event/data/CashTrackingSessionData.ts

@@ -1,46 +0,0 @@
-import {BaseData} from './BaseData';
-import {BaseApi} from './BaseApi';
-
-/**
- * The data object provided to cash tracking session start extension targets. Contains information about a newly opened cash tracking session along with device and session context.
- * @publicDocs
- */
-export interface CashTrackingSessionStartData extends BaseData, BaseApi {
-  /**
-   * The cash tracking session start data containing the session identifier and the time when the session began. Cash tracking sessions represent the period during which a cash drawer is open and being used for transactions, typically corresponding to a staff member's shift.
-   */
-  cashTrackingSessionStart: {
-    /**
-     * The unique numeric identifier for this cash tracking session. This ID distinguishes this session from other cash tracking sessions and can be used for session-specific operations, reporting, or linking transactions to sessions. The ID is assigned when the session opens and remains constant until the session closes.
-     */
-    id: number;
-    /**
-     * The [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) timestamp when the cash tracking session was opened and cash drawer operations began (for example, `"2024-05-15T09:00:00Z"`). This marks the start of the staff member's shift or cash handling period. Commonly used for calculating session duration, shift reporting, or determining which transactions belong to which session.
-     */
-    openingTime: string;
-  };
-}
-
-/**
- * The data object provided to cash tracking session complete extension targets. Contains information about a completed cash tracking session including when it opened and closed, along with device and session context.
- * @publicDocs
- */
-export interface CashTrackingSessionCompleteData extends BaseData, BaseApi {
-  /**
-   * The cash tracking session complete data containing the session identifier, opening time, and closing time. This represents the full lifecycle of a cash drawer session from opening to closing.
-   */
-  cashTrackingSessionComplete: {
-    /**
-     * The unique numeric identifier for this cash tracking session. This ID matches the ID from when the session was opened and can be used to correlate session start and end events, retrieve session-specific data, or link all transactions that occurred during this session.
-     */
-    id: number;
-    /**
-     * The [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) timestamp when the cash tracking session was opened and began (for example, `"2024-05-15T09:00:00Z"`). This marks the start of the session and can be compared with `closingTime` to calculate the total session duration or shift length.
-     */
-    openingTime: string;
-    /**
-     * The [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) timestamp when the cash tracking session was closed and ended (for example, `"2024-05-15T17:30:00Z"`). This marks when the staff member completed their shift, closed out the cash drawer, and finalized the session. The time between `openingTime` and `closingTime` represents the active session duration. Commonly used for shift reporting, calculating hours worked, or determining the timeframe for session-specific transactions.
-     */
-    closingTime: string;
-  };
-}