Fixes

Author: NathanJolly

packages/ui-extensions-react/src/surfaces/point-of-sale/hooks/index.ts

@@ -14,7 +14,6 @@ export {
   useStatefulSubscribableLocale,
   destroyStatefulSubscribableLocale,
 } from './locale-api';
-export {useOrder} from './order-api';
 
 export {
   useScannerDataSubscription,

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

@@ -34,28 +34,16 @@ The Order API provides an extension with data about the current order.
     examples: [
       {
         codeblock: generateCodeBlockForOrderApi(
-          'Basic usage of the Order API with useOrder hook',
+          'Basic usage of the Order API in an action',
           'basic-usage',
         ),
       },
       {
         codeblock: generateCodeBlockForOrderApi(
-          'Display order details in a custom block',
+          'Display order details in a block',
           'display-in-block',
         ),
       },
-      {
-        codeblock: generateCodeBlockForOrderApi(
-          'Use Order API with navigation',
-          'with-navigation',
-        ),
-      },
-      {
-        codeblock: generateCodeBlockForOrderApi(
-          'Simple useOrder hook example',
-          'use-order-hook',
-        ),
-      },
     ],
   },
 };

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

@@ -1,32 +1,35 @@
 import {
   extension,
   Screen,
-  Navigator,
   ScrollView,
   Text,
-  Section,
 } from '@shopify/ui-extensions/point-of-sale';
 
-export default extension('pos.purchase.post.block.render', (root, api) => {
-  // Access order information from the API
+export default extension('pos.purchase.post.action.render', (root, api) => {
   const order = api.order;
 
-  const navigator = root.createComponent(Navigator, {});
-  const screen = navigator.createComponent(Screen, {
-    name: 'OrderDetails',
-    title: 'Order Details',
-  });
-  const scrollView = screen.createComponent(ScrollView, {});
-  const section = scrollView.createComponent(Section, {
-    title: 'Order Information',
+  const screen = root.createComponent(Screen, {
+    name: 'PostPurchaseAction',
+    title: 'Post Purchase Action',
   });
 
-  section.createComponent(Text, {}, `Order ID: ${order.id}`);
-  section.createComponent(Text, {}, `Order Name: ${order.name}`);
+  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);
 
-  if (order.customerId) {
-    section.createComponent(Text, {}, `Customer ID: ${order.customerId}`);
-  }
+  root.append(screen);
 
   root.mount();
 });

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

@@ -6,16 +6,16 @@ import {
   ScrollView,
   Text,
   Section,
-  useOrder,
+  useApi,
 } from '@shopify/ui-extensions-react/point-of-sale';
 
-const SmartGridModal = () => {
-  // Use the useOrder hook to access order information
-  const order = useOrder();
+const PostPurchaseAction = () => {
+  const api = useApi<'pos.purchase.post.action.render'>();
+  const order = api.order;
 
   return (
     <Navigator>
-      <Screen name="OrderDetails" title="Order Details">
+      <Screen name="PostPurchaseAction" title="Post Purchase Action">
         <ScrollView>
           <Section title="Order Information">
             <Text>Order ID: {order.id}</Text>
@@ -28,6 +28,6 @@ const SmartGridModal = () => {
   );
 };
 
-export default reactExtension('pos.purchase.post.block.render', () => (
-  <SmartGridModal />
+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

@@ -1,30 +1,37 @@
 import {
   extension,
-  POSBlock,
-  POSBlockRow,
+  Screen,
+  Navigator,
+  ScrollView,
+  Text,
+  Section,
 } from '@shopify/ui-extensions/point-of-sale';
 
-export default extension('pos.order-details.block.render', (root, api) => {
+export default extension('pos.purchase.post.action.render', (root, api) => {
   const order = api.order;
 
-  const posBlock = root.createComponent(POSBlock, {});
-
-  posBlock.createComponent(POSBlockRow, {
-    label: 'Order',
-    value: order.name,
+  const screen = root.createComponent(Screen, {
+    name: 'PostPurchaseAction',
+    title: 'Post Purchase Action',
   });
 
-  posBlock.createComponent(POSBlockRow, {
-    label: 'Order ID',
-    value: order.id.toString(),
-  });
+  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);
 
-  if (order.customerId) {
-    posBlock.createComponent(POSBlockRow, {
-      label: 'Customer ID',
-      value: order.customerId.toString(),
-    });
-  }
+  root.append(screen);
 
   root.mount();
 });

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

@@ -3,24 +3,27 @@ import {
   reactExtension,
   POSBlock,
   POSBlockRow,
-  useOrder,
+  useApi,
+  Text,
 } from '@shopify/ui-extensions-react/point-of-sale';
 
 const OrderDetailsBlock = () => {
-  // Use the useOrder hook directly
-  const order = useOrder();
+  const api = useApi<'pos.purchase.post.action.render'>();
+  const order = api.order;
 
   return (
     <POSBlock>
-      <POSBlockRow label="Order" value={order.name} />
-      <POSBlockRow label="Order ID" value={order.id.toString()} />
-      {order.customerId && (
-        <POSBlockRow label="Customer ID" value={order.customerId.toString()} />
-      )}
+      <POSBlockRow>
+        <Text>Order {order.name}</Text>
+        <Text>Order ID {order.id.toString()}</Text>
+        {order.customerId && (
+          <Text>Customer ID {order.customerId.toString()}</Text>
+        )}
+      </POSBlockRow>
     </POSBlock>
   );
 };
 
-export default reactExtension('pos.order-details.block.render', () => (
+export default reactExtension('pos.purchase.post.block.render', () => (
   <OrderDetailsBlock />
 ));