implement cash drawer api

Author: merkoyep

.changeset/hip-shirts-drum.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+implements the cash drawer api to the ui extensions repository

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;

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(<Extension />, document.body);
+};
+
+const Extension = () => {
+  return (
+    <s-page heading="Cash Drawer API">
+      <s-scroll-box>
+        <s-button
+          onClick={() =>
+            shopify.cashDrawer.open()
+          }
+        >
+          Open cash drawer
+        </s-button>
+      </s-scroll-box>
+    </s-page>
+  );
+};

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';

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<void>;
+}
+
+/**
+ * Interface for the Cash Drawer API
+ */
+export interface CashDrawerApi {
+  cashDrawer: CashDrawerApiContent;
+}