diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cart-api/get-line-item.ts b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cart-api/get-line-item.ts new file mode 100644 index 0000000000..a1a851abc2 --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cart-api/get-line-item.ts @@ -0,0 +1,14 @@ +import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; + +export default extension('pos.home.tile.render', (root, api) => { + const tile = root.createComponent(Tile, { + title: 'My App', + subtitle: 'Call cart function', + enabled: true, + onPress: () => { + api.cart.getLineItem('aa-1234567'); + }, + }); + + root.append(tile); +}); diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cart-api/get-line-item.tsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cart-api/get-line-item.tsx new file mode 100644 index 0000000000..177467505b --- /dev/null +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/cart-api/get-line-item.tsx @@ -0,0 +1,25 @@ + +import React from 'react'; +import { + reactExtension, + useApi, + Tile +} from '@shopify/ui-extensions-react/point-of-sale'; + +const SmartGridTile = () => { + const api = useApi<'pos.home.tile.render'>(); + + return ( + api.cart.getLineItem('aa-1234567')} + /> + ); +}; + +export default reactExtension( + 'pos.home.tile.render', + () => +); \ No newline at end of file diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cart-api/cart-api.ts b/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cart-api/cart-api.ts index 552f096031..4c726713a3 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cart-api/cart-api.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cart-api/cart-api.ts @@ -5,6 +5,7 @@ import type { CartUpdateInput, Customer, CustomSale, + LineItem, SetLineItemDiscountInput, SetLineItemPropertiesInput, } from '../../../types/cart'; @@ -87,6 +88,11 @@ export interface CartApiContent { */ removeLineItem(uuid: string): Promise; + /** Get the line item at this uuid from the cart + * @param uuid the uuid of the line item that should be retrieved + */ + getLineItem(uuid: string): Promise; + /** Adds custom properties to the cart * @param properties the custom key to value object to attribute to the cart */ diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cart-line-item-api/cart-line-item-api.ts b/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cart-line-item-api/cart-line-item-api.ts new file mode 100644 index 0000000000..fad28cb7f7 --- /dev/null +++ b/packages/ui-extensions/src/surfaces/point-of-sale/render/api/cart-line-item-api/cart-line-item-api.ts @@ -0,0 +1,10 @@ +export interface CartLineItemApi { + cartLineItem: CartLineItemApiContent; +} + +export interface CartLineItemApiContent { + /** + * The unique identifier for the cart line item. + */ + uuid: string; +} diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/targets.ts b/packages/ui-extensions/src/surfaces/point-of-sale/targets.ts index 372640894e..24cbe51bc6 100644 --- a/packages/ui-extensions/src/surfaces/point-of-sale/targets.ts +++ b/packages/ui-extensions/src/surfaces/point-of-sale/targets.ts @@ -7,6 +7,7 @@ import {ActionApi} from './render/api/action-api/action-api'; import {ProductApi} from './render/api/product-api/product-api'; import {ActionTargetApi} from './render/api/action-target-api/action-target-api'; import {DraftOrderApi} from './render/api/draft-order-api/draft-order-api'; +import {CartLineItemApi} from './render/api/cart-line-item-api/cart-line-item-api'; type SmartGridComponents = AnyComponentBuilder>; type ActionComponents = AnyComponentBuilder>; @@ -134,6 +135,30 @@ export interface ExtensionTargets { StandardApi<'pos.receipt-footer.block.render'> & OrderApi, ReceiptComponents >; + // New targets for manage line items + 'pos.manage-line.action.render': RenderExtension< + ActionTargetApi<'pos.manage-line.action.render'> & + CartApi & + ActionApi & + ProductApi & + CartLineItemApi, + BasicComponents + >; + 'pos.manage-line.block.render': RenderExtension< + StandardApi<'pos.manage-line.block.render'> & + CartApi & + ProductApi & + CartLineItemApi, + BlockComponents + >; + 'pos.manage-line.action.menu-item.render': RenderExtension< + StandardApi<'pos.manage-line.action.menu-item.render'> & + ActionApi & + CartApi & + ProductApi & + CartLineItemApi, + ActionComponents + >; } export type ExtensionTarget = keyof ExtensionTargets;