Add pos.return.post and pos.exchange.post extension targets (#3005)

* Add pos.return.post and pos.exchange.post extension targets

* add documentation and examples for new post-return/exchange targets.

---------

Co-authored-by: Han T. <[email protected]>

Author: Alex-Palad

.changeset/neat-hairs-study.md

@@ -0,0 +1,13 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Add extension targets:
+
+pos.return.post.action.menu-item.render
+pos.return.post.action.render
+pos.return.post.block.render
+
+pos.exchange.post.action.menu-item.render
+pos.exchange.post.action.render
+pos.exchange.post.block.render

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

@@ -14,6 +14,10 @@ The Action API allows an action extension to modally present its corresponding m
 - ${TargetLink.PosHomeTileRender}
 - ${TargetLink.PosPurchasePostActionMenuItemRender}
 - ${TargetLink.PosPurchasePostBlockRender}
+- ${TargetLink.PosReturnPostActionMenuItemRender}
+- ${TargetLink.PosReturnPostBlockRender}
+- ${TargetLink.PosExchangePostActionMenuItemRender}
+- ${TargetLink.PosExchangePostBlockRender}
 - ${TargetLink.PosOrderDetailsActionMenuItemRender}
 - ${TargetLink.PosOrderDetailsBlockRender}
 - ${TargetLink.PosProductDetailsActionMenuItemRender}

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

@@ -14,6 +14,12 @@ The Order API provides an extension with data about the current order.
 - ${TargetLink.PosPurchasePostActionMenuItemRender}
 - ${TargetLink.PosPurchasePostActionRender}
 - ${TargetLink.PosPurchasePostBlockRender}
+- ${TargetLink.PosReturnPostActionMenuItemRender}
+- ${TargetLink.PosReturnPostActionRender}
+- ${TargetLink.PosReturnPostBlockRender}
+- ${TargetLink.PosExchangePostActionMenuItemRender}
+- ${TargetLink.PosExchangePostActionRender}
+- ${TargetLink.PosExchangePostBlockRender}
 - ${TargetLink.PosOrderDetailsActionMenuItemRender}
 - ${TargetLink.PosOrderDetailsActionRender}
 - ${TargetLink.PosOrderDetailsBlockRender}

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-exchange-post-action-menu-item-render.ts

@@ -0,0 +1,14 @@
+import {Button, extension} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension(
+  'pos.exchange.post.action.menu-item.render',
+  (root, api) => {
+    const button = root.createComponent(Button, {
+      onPress: () => {
+        api.action.presentModal();
+      },
+    });
+
+    root.append(button);
+  },
+);

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-exchange-post-action-menu-item-render.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {
+  Button,
+  reactExtension,
+  useApi,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const ExchangeActionMenuItem = () => {
+  const api = useApi<'pos.exchange.post.action.menu-item.render'>();
+  return (
+    <Button
+      onPress={() => {
+        api.action.presentModal();
+      }}
+    />
+  );
+};
+
+export default reactExtension(
+  'pos.exchange.post.action.menu-item.render',
+  () => <ExchangeActionMenuItem />,
+);

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-exchange-post-action-render.ts

@@ -0,0 +1,23 @@
+import {
+  Navigator,
+  Screen,
+  ScrollView,
+  Text,
+  extension,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.exchange.post.action.render', (root, api) => {
+  const navigator = root.createComponent(Navigator);
+  const screen = root.createComponent(Screen, {
+    name: 'ExchangeDetails',
+    title: 'Exchange Details',
+  });
+  const scrollView = root.createComponent(ScrollView);
+  const text = root.createComponent(Text);
+
+  text.append(`Exchange ID: ${api.exchange.id}`);
+  scrollView.append(text);
+  screen.append(scrollView);
+  navigator.append(screen);
+  root.append(navigator);
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-exchange-post-action-render.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+  Navigator,
+  Screen,
+  ScrollView,
+  Text,
+  reactExtension,
+  useApi,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const ExchangeAction = () => {
+  const api = useApi<'pos.exchange.post.action.render'>();
+  return (
+    <Navigator>
+      <Screen name="ExchangeDetails" title="Exchange Details">
+        <ScrollView>
+          <Text>{`Exchange ID: ${api.exchange.id}`}</Text>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  );
+};
+
+export default reactExtension('pos.exchange.post.action.render', () => (
+  <ExchangeAction />
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-exchange-post-block-render.ts

@@ -0,0 +1,28 @@
+import {
+  POSBlock,
+  POSBlockRow,
+  Text,
+  extension,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.exchange.post.block.render', (root, api) => {
+  const block = root.createComponent(POSBlock, {
+    action: {title: 'View exchange details', onPress: api.action.presentModal},
+  });
+
+  const mainText = root.createComponent(Text);
+  mainText.append('Exchange block extension');
+
+  const subtitleText = root.createComponent(Text);
+  subtitleText.append(`Exchange ID: ${api.exchange.id}`);
+
+  const blockMainRow = root.createComponent(POSBlockRow);
+  blockMainRow.append(mainText);
+
+  const blockSubtitleRow = root.createComponent(POSBlockRow);
+  blockSubtitleRow.append(subtitleText);
+  block.append(blockMainRow);
+  block.append(blockSubtitleRow);
+
+  root.append(block);
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-exchange-post-block-render.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {
+  POSBlock,
+  POSBlockRow,
+  Text,
+  reactExtension,
+  useApi,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const ExchangeBlock = () => {
+  const api = useApi<'pos.exchange.post.block.render'>();
+  return (
+    <POSBlock
+      action={{
+        title: 'View exchange details',
+        onPress: api.action.presentModal,
+      }}
+    >
+      <POSBlockRow>
+        <Text>{'Exchange block extension'}</Text>
+        <Text>{`Exchange ID: ${api.exchange.id}`}</Text>
+      </POSBlockRow>
+    </POSBlock>
+  );
+};
+
+export default reactExtension('pos.exchange.post.block.render', () => (
+  <ExchangeBlock />
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/targets/pos-return-post-action-menu-item-render.ts

@@ -0,0 +1,14 @@
+import {Button, extension} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension(
+  'pos.return.post.action.menu-item.render',
+  (root, api) => {
+    const button = root.createComponent(Button, {
+      onPress: () => {
+        api.action.presentModal();
+      },
+    });
+
+    root.append(button);
+  },
+);