Merge pull request #3534 from Shopify/my/register-details-extension-targets

merkoyep · web-flow · commit 591de24c4d0b · 2025-11-05T16:30:01.000-05:00
implement register-details POS Extension targets
diff --git a/.changeset/proud-paths-listen.md b/.changeset/proud-paths-listen.md
@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Adds register details targets
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-register-details-action-menu-item-render.jsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-register-details-action-menu-item-render.jsx
@@ -0,0 +1,9 @@
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+const Extension = () => {
+  return <s-button onClick={() => shopify.action.presentModal()} />;
+};
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-register-details-action-render.jsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-register-details-action-render.jsx
@@ -0,0 +1,17 @@
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+const Extension = () => {
+  return (
+    <s-page heading="Register Details Action">
+      <s-scroll-box>
+        <s-text>
+          This is a action extension on the register details screen
+        </s-text>
+      </s-scroll-box>
+    </s-page>
+  );
+};
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-register-details-block-render.jsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-register-details-block-render.jsx
@@ -0,0 +1,19 @@
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+const Extension = () => {
+  return (
+    <s-pos-block>
+      <s-text>This is a block extension on the register details screen</s-text>
+      <s-button
+        slot="secondary-actions"
+        onClick={() => shopify.cashDrawer.open()}
+      >
+        Open drawer
+      </s-button>
+    </s-pos-block>
+  );
+};
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.action.menu-item.render.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.action.menu-item.render.doc.ts
@@ -0,0 +1,31 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateJsxCodeBlock} from '../helpers/generateCodeBlock';
+import {ExtensionTargetType} from '../types/ExtensionTargetType';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: ExtensionTargetType.PosRegisterDetailsActionMenuItemRender,
+  description:
+    'A static extension target that renders as a menu item on the register details screen',
+  defaultExample: {
+    codeblock: generateJsxCodeBlock(
+      'Register Details Action Menu Item',
+      'targets',
+      'pos-register-details-action-menu-item-render',
+    ),
+  },
+  category: 'Targets',
+  subCategory: 'Action',
+  isVisualComponent: false,
+  related: [
+    {
+      name: ExtensionTargetType.PosRegisterDetailsActionRender,
+      url: '/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-action-render',
+    },
+    {
+      name: ExtensionTargetType.PosRegisterDetailsBlockRender,
+      url: '/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-block-render',
+    },
+  ],
+  type: 'Target',
+};
+export default data;
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.action.render.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.action.render.doc.ts
@@ -0,0 +1,31 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateJsxCodeBlock} from '../helpers/generateCodeBlock';
+import {ExtensionTargetType} from '../types/ExtensionTargetType';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: ExtensionTargetType.PosRegisterDetailsActionRender,
+  description:
+    'A full-screen extension target that renders when a `pos.register-details.action.menu-item.render` target calls for it',
+  defaultExample: {
+    codeblock: generateJsxCodeBlock(
+      'Register Details Action',
+      'targets',
+      'pos-register-details-action-render',
+    ),
+  },
+  category: 'Targets',
+  subCategory: 'Action',
+  isVisualComponent: false,
+  related: [
+    {
+      name: ExtensionTargetType.PosRegisterDetailsActionMenuItemRender,
+      url: '/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-action-menu-item-render',
+    },
+    {
+      name: ExtensionTargetType.PosRegisterDetailsBlockRender,
+      url: '/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-block-render',
+    },
+  ],
+  type: 'Target',
+};
+export default data;
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.block.render.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.block.render.doc.ts
@@ -0,0 +1,30 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateJsxCodeBlock} from '../helpers/generateCodeBlock';
+import {ExtensionTargetType} from '../types/ExtensionTargetType';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: ExtensionTargetType.PosRegisterDetailsBlockRender,
+  description: 'Renders a custom section within register details screen',
+  defaultExample: {
+    codeblock: generateJsxCodeBlock(
+      'Register Details Block',
+      'targets',
+      'pos-register-details-block-render',
+    ),
+  },
+  category: 'Targets',
+  subCategory: 'Block',
+  isVisualComponent: false,
+  related: [
+    {
+      name: ExtensionTargetType.PosRegisterDetailsActionMenuItemRender,
+      url: '/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-action-menu-item-render',
+    },
+    {
+      name: ExtensionTargetType.PosRegisterDetailsActionRender,
+      url: '/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-action-render',
+    },
+  ],
+  type: 'Target',
+};
+export default data;
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/types/ExtensionTargetType.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/types/ExtensionTargetType.ts
@@ -26,6 +26,9 @@ export enum ExtensionTargetType {
   PosReceiptFooterBlockRender = 'pos.receipt-footer.block.render',
   PosCartLineItemDetailsActionMenuItemRender = 'pos.cart.line-item-details.action.menu-item.render',
   PosCartLineItemDetailsActionRender = 'pos.cart.line-item-details.action.render',
+  PosRegisterDetailsActionMenuItemRender = 'pos.register-details.action.menu-item.render',
+  PosRegisterDetailsActionRender = 'pos.register-details.action.render',
+  PosRegisterDetailsBlockRender = 'pos.register-details.block.render',
 }
 
 export enum TargetLink {
@@ -56,4 +59,7 @@ export enum TargetLink {
   PosReceiptFooterBlockRender = '[pos.receipt-footer.block.render](/docs/api/pos-ui-extensions/targets/receipts/pos-receipt-footer-block-render)',
   PosCartLineItemDetailsActionMenuItemRender = '[pos.cart.line-item-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/cart-details/pos-cart-line-item-details-action-menu-item-render)',
   PosCartLineItemDetailsActionRender = '[pos.cart.line-item-details.action.render](/docs/api/pos-ui-extensions/targets/cart-details/pos-cart-line-item-details-action-render)',
+  PosRegisterDetailsActionMenuItemRender = '[pos.register-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-action-menu-item-render)',
+  PosRegisterDetailsActionRender = '[pos.register-details.action.render](/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-action-render)',
+  PosRegisterDetailsBlockRender = '[pos.register-details.block.render](/docs/api/pos-ui-extensions/targets/register-details/pos-register-details-block-render)',
 }
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/register-details-action-menu.png b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/register-details-action-menu.png
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/register-details-block.png b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/register-details-block.png
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/targets-overview.doc.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/targets-overview.doc.ts
@@ -112,6 +112,15 @@ See [an example](targets/action/pos-cart-line-item-details-action-render).
 `,
           image: 'cart-lineitem-action.png',
         },
+        {
+          title: 'Register details',
+          description: `
+Displays an action target modally when a menu item is tapped on the register details screen.
+
+See [an example](targets/action/pos-register-details-action-render).
+`,
+          image: 'register-details-action-menu.png',
+        },
       ],
     },
     {
@@ -202,6 +211,15 @@ See [an example](targets/block/pos-receipt-footer-block-render).
 `,
           image: 'posreceipt-footer.png',
         },
+        {
+          title: 'Register details',
+          description: `
+Renders a custom section within the native register details screen.
+
+See [an example](targets/block/pos-register-details-block-render).
+`,
+          image: 'register-details-block.png',
+        },
       ],
     },
   ],
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/extension-targets.ts b/packages/ui-extensions/src/surfaces/point-of-sale/extension-targets.ts
@@ -19,6 +19,7 @@ import type {
   ProductApi,
   OrderApi,
   StorageApi,
+  CashDrawerApi,
 } from './api';
 import type {ActionExtensionComponents} from './components/targets/ActionExtensionComponents';
 import type {BlockExtensionComponents} from './components/targets/BlockExtensionComponents';
@@ -191,6 +192,22 @@ export interface RenderExtensionTargets {
     {[key: string]: any} & StorageApi & TransactionCompleteWithReprintData,
     ReceiptComponents
   >;
+  'pos.register-details.action.menu-item.render': RenderExtension<
+    StandardApi<'pos.register-details.action.menu-item.render'> &
+      ActionApi &
+      CashDrawerApi,
+    ActionExtensionComponents
+  >;
+  'pos.register-details.action.render': RenderExtension<
+    ActionTargetApi<'pos.register-details.action.render'> & CashDrawerApi,
+    BasicComponents
+  >;
+  'pos.register-details.block.render': RenderExtension<
+    StandardApi<'pos.register-details.block.render'> &
+      ActionApi &
+      CashDrawerApi,
+    BlockExtensionComponents
+  >;
 }
 
 export interface ExtensionTargets

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@shopify/ui-extensions': minor
 +---
++
 +Adds register details targets