diff --git a/.changeset/proud-paths-listen.md b/.changeset/proud-paths-listen.md new file mode 100644 index 0000000000..35021cb0f2 --- /dev/null +++ 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 new file mode 100644 index 0000000000..559f4dec9c --- /dev/null +++ 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(, document.body); +}; + +const Extension = () => { + return 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 new file mode 100644 index 0000000000..6bec09d58b --- /dev/null +++ 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(, document.body); +}; + +const Extension = () => { + return ( + + + + This is a action extension on the register details screen + + + + ); +}; 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 new file mode 100644 index 0000000000..51a78bee0e --- /dev/null +++ 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(, document.body); +}; + +const Extension = () => { + return ( + + This is a block extension on the register details screen + shopify.cashDrawer.open()} + > + Open drawer + + + ); +}; 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 new file mode 100644 index 0000000000..bb85bb5bc6 --- /dev/null +++ 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 new file mode 100644 index 0000000000..915d5d51c7 --- /dev/null +++ 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 new file mode 100644 index 0000000000..7ccd61a72e --- /dev/null +++ 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 index 1db7aa3423..e232a8dc5c 100644 --- 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 new file mode 100644 index 0000000000..1b0fc9f706 Binary files /dev/null and b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/register-details-action-menu.png differ 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 new file mode 100644 index 0000000000..1bbc2d7351 Binary files /dev/null and b/packages/ui-extensions/docs/surfaces/point-of-sale/screenshots/register-details-block.png differ 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 index f01d854a09..60e6a740bc 100644 --- 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 index d20463b1d2..52947431fe 100644 --- 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