Merge pull request #2992 from Shopify/njo/order-api-examples

Add order-api examples

Author: NathanJolly

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

@@ -1,6 +1,10 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
 import {ExtensionTargetType, TargetLink} from '../types/ExtensionTargetType';
 
+const generateCodeBlockForOrderApi = (title: string, fileName: string) =>
+  generateCodeBlock(title, 'order-api', fileName);
+
 const data: ReferenceEntityTemplateSchema = {
   name: 'Order API',
   description: `
@@ -25,6 +29,23 @@ The Order API provides an extension with data about the current order.
   ],
   category: 'APIs',
   related: [],
+  examples: {
+    description: 'Examples of using the Order API',
+    examples: [
+      {
+        codeblock: generateCodeBlockForOrderApi(
+          'Basic usage of the Order API in an action',
+          'basic-usage',
+        ),
+      },
+      {
+        codeblock: generateCodeBlockForOrderApi(
+          'Display order details in a block',
+          'display-in-block',
+        ),
+      },
+    ],
+  },
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/order-api/basic-usage.ts

@@ -0,0 +1,35 @@
+import {
+  extension,
+  Screen,
+  ScrollView,
+  Text,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.purchase.post.action.render', (root, api) => {
+  const order = api.order;
+
+  const screen = root.createComponent(Screen, {
+    name: 'PostPurchaseAction',
+    title: 'Post Purchase Action',
+  });
+
+  const scrollView = root.createComponent(ScrollView, {});
+
+  const orderName = root.createComponent(Text, {}, `Order Name: ${order.name}`);
+  const orderId = root.createComponent(Text, {}, `Order ID: ${order.id}`);
+  const orderCustomerId = root.createComponent(
+    Text,
+    {},
+    `Order Customer ID: ${order.customerId}`,
+  );
+
+  scrollView.append(orderName);
+  scrollView.append(orderId);
+  scrollView.append(orderCustomerId);
+
+  screen.append(scrollView);
+
+  root.append(screen);
+
+  root.mount();
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/order-api/basic-usage.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  reactExtension,
+  Screen,
+  Navigator,
+  ScrollView,
+  Text,
+  Section,
+  useApi,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const PostPurchaseAction = () => {
+  const api = useApi<'pos.purchase.post.action.render'>();
+  const order = api.order;
+
+  return (
+    <Navigator>
+      <Screen name="PostPurchaseAction" title="Post Purchase Action">
+        <ScrollView>
+          <Section title="Order Information">
+            <Text>Order ID: {order.id}</Text>
+            <Text>Order Name: {order.name}</Text>
+            {order.customerId && <Text>Order Customer ID: {order.customerId}</Text>}
+          </Section>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  );
+};
+
+export default reactExtension('pos.purchase.post.action.render', () => (
+  <PostPurchaseAction />
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/order-api/display-in-block.ts

@@ -0,0 +1,37 @@
+import {
+  extension,
+  Screen,
+  Navigator,
+  ScrollView,
+  Text,
+  Section,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.purchase.post.action.render', (root, api) => {
+  const order = api.order;
+
+  const screen = root.createComponent(Screen, {
+    name: 'PostPurchaseAction',
+    title: 'Post Purchase Action',
+  });
+
+  const scrollView = root.createComponent(ScrollView, {});
+
+  const orderName = root.createComponent(Text, {}, `Order Name: ${order.name}`);
+  const orderId = root.createComponent(Text, {}, `Order ID: ${order.id}`);
+  const orderCustomerId = root.createComponent(
+    Text,
+    {},
+    `Order Customer ID: ${order.customerId}`,
+  );
+
+  scrollView.append(orderName);
+  scrollView.append(orderId);
+  scrollView.append(orderCustomerId);
+
+  screen.append(scrollView);
+
+  root.append(screen);
+
+  root.mount();
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/order-api/display-in-block.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  reactExtension,
+  POSBlock,
+  POSBlockRow,
+  useApi,
+  Text,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const OrderDetailsBlock = () => {
+  const api = useApi<'pos.purchase.post.action.render'>();
+  const order = api.order;
+
+  return (
+    <POSBlock>
+      <POSBlockRow>
+        <Text>Order Name: {order.name}</Text>
+        <Text>Order ID {order.id.toString()}</Text>
+        {order.customerId && (
+          <Text>Order Customer ID {order.customerId.toString()}</Text>
+        )}
+      </POSBlockRow>
+    </POSBlock>
+  );
+};
+
+export default reactExtension('pos.purchase.post.block.render', () => (
+  <OrderDetailsBlock />
+));