diff --git a/.changeset/hip-shirts-drum.md b/.changeset/hip-shirts-drum.md new file mode 100644 index 0000000000..428d148b1a --- /dev/null +++ b/.changeset/hip-shirts-drum.md @@ -0,0 +1,5 @@ +--- +'@shopify/ui-extensions': minor +--- + +implements the cash drawer api to the ui extensions repository 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..fe39f47232 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cash-drawer-api.doc.ts @@ -0,0 +1,52 @@ +import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; +import {generateJsxCodeBlock} from '../helpers/generateCodeBlock'; +import {TargetLink} from '../types/ExtensionTargetType'; + +const generateJsxCodeBlockForCashDrawerApi = ( + title: string, + fileName: string, +) => generateJsxCodeBlock(title, 'cash-drawer-api', fileName); + +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. + +#### Supporting targets +- ${TargetLink.PosHomeTileRender} +- ${TargetLink.PosHomeModalRender} +- ${TargetLink.PosPurchasePostActionMenuItemRender} +- ${TargetLink.PosPurchasePostActionRender} +- ${TargetLink.PosPurchasePostBlockRender} +- ${TargetLink.PosReturnPostActionMenuItemRender} +- ${TargetLink.PosReturnPostActionRender} +- ${TargetLink.PosReturnPostBlockRender} +- ${TargetLink.PosExchangePostActionMenuItemRender} +- ${TargetLink.PosExchangePostActionRender} +- ${TargetLink.PosExchangePostBlockRender} +`, + 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: generateJsxCodeBlockForCashDrawerApi( + 'Open the cash drawer', + 'default.example', + ), + }, + ], + }, +}; + +export default data; diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cash-drawer-api/default.example.jsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cash-drawer-api/default.example.jsx new file mode 100644 index 0000000000..85e8130c15 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cash-drawer-api/default.example.jsx @@ -0,0 +1,21 @@ +import {render} from 'preact'; + +export default async () => { + render(, document.body); +}; + +const Extension = () => { + return ( + + + + shopify.cashDrawer.open() + } + > + Open cash drawer + + + + ); +}; 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 eb45fc4225..67d8c09a51 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/api.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/api.ts @@ -7,6 +7,8 @@ export type { export type {CartLineItemApi} from './api/cart-line-item-api/cart-line-item-api'; +export type {CashDrawerApi} from './api/cash-drawer-api/cash-drawer-api'; + export type {ActionApi, ActionApiContent} from './api/action-api/action-api'; export type {StandardApi} from './api/standard/standard-api'; diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/api/cash-drawer-api/cash-drawer-api.ts b/packages/ui-extensions/src/surfaces/point-of-sale/api/cash-drawer-api/cash-drawer-api.ts new file mode 100644 index 0000000000..2eaa81279d --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/api/cash-drawer-api/cash-drawer-api.ts @@ -0,0 +1,19 @@ +/** + * The Cash Drawer API in POS UI extensions includes select cash drawer functionality. + */ +export interface CashDrawerApiContent { + /** + * Opens the connected cash drawer. + * + * @returns Void + * + */ + open(): Promise; +} + +/** + * Interface for the Cash Drawer API + */ +export interface CashDrawerApi { + cashDrawer: CashDrawerApiContent; +}