update examples

Author: merkoyep

packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cash-drawer-api.doc.ts

@@ -1,10 +1,30 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-import {generateCodeBlock} from '../helpers/generateCodeBlock';
+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.`,
+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: [
@@ -20,9 +40,8 @@ The Cash Drawer API is an API exposed to extensions for cash drawer functionalit
     description: 'Examples of using the Cash Drawer API',
     examples: [
       {
-        codeblock: generateCodeBlock(
-          'Cash Drawer API',
-          'cash-drawer-api',
+        codeblock: generateJsxCodeBlockForCashDrawerApi(
+          'Open the cash drawer',
           'default.example',
         ),
       },

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>
+  );
+};