diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cash-drawer-api.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cash-drawer-api.doc.ts new file mode 100644 index 0000000000..4989c2d456 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cash-drawer-api.doc.ts @@ -0,0 +1,33 @@ +import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; +import {generateCodeBlock} from '../helpers/generateCodeBlock'; + +const data: ReferenceEntityTemplateSchema = { + name: 'Cash Drawer API', + description: ` +The Cash Drawer API is an API exposed to extensions for cash drawer functionality, specifically allowing UI extensions to control cash drawer operations.`, + isVisualComponent: false, + type: 'APIs', + definitions: [ + { + title: 'CashDrawerApi', + description: 'Interface for handling cash drawer operations.', + type: 'CashDrawerApi', + }, + ], + category: 'APIs', + related: [], + examples: { + description: 'Examples of using the Cash Drawer API', + examples: [ + { + codeblock: generateCodeBlock( + 'Cash Drawer API', + 'cash-drawer-api', + 'default.example', + ), + }, + ], + }, +}; + +export default data; diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cash-drawer-api/default.example.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cash-drawer-api/default.example.ts new file mode 100644 index 0000000000..9f67f071e5 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cash-drawer-api/default.example.ts @@ -0,0 +1,20 @@ +import { + Tile, + extension, +} from '@shopify/ui-extensions/point-of-sale'; + +export default extension( + 'pos.home.tile.render', + (root, api) => { + const tile = root.createComponent(Tile, { + title: 'My app', + subtitle: 'Hello world!', + enabled: true, + onPress: () => { + api.cashDrawer.open(); + }, + }); + + root.append(tile); + }, +); diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/api.ts b/packages/ui-extensions/src/surfaces/point-of-sale/api.ts index 79a2fdfc9c..5839255ec3 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/api.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/api.ts @@ -15,6 +15,8 @@ export type { export type {StandardApi} from './render/api/standard/standard-api'; export type {ActionTargetApi} from './render/api/action-target-api/action-target-api'; +export type {CashDrawerApi} from './render/api/cash-drawer-api/cash-drawer-api'; + export type { ConnectivityStateSeverity, ConnectivityState, diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cash-drawer-api/cash-drawer-api.ts b/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cash-drawer-api/cash-drawer-api.ts new file mode 100644 index 0000000000..0c3ecb8b67 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cash-drawer-api/cash-drawer-api.ts @@ -0,0 +1,12 @@ +/** + * The Cash Drawer API in POS UI extensions includes select cash drawer functionality. + */ +export interface CashDrawerApi { + /** + * Opens the connected cash drawer. + * + * @returns Void + * + */ + open(): Promise; +}