Update to show ReprintReceiptData interface and add nodemon script (#3015)

* add `ReprintReceiptData` documentation to receipt block render.

* fix example code for `pos.receipt-footer.block.render`.

* fix related links for Cash tracking targets.

* add nodemon for watching pos changes.

* fix type guard on connectivity and locale API.

Author: fatbattk

package.json

@@ -19,6 +19,8 @@
     "docs:admin:dev": "yarn workspace @shopify/ui-extensions docs:admin:dev",
     "docs:checkout": "yarn workspace @shopify/ui-extensions docs:checkout",
     "docs:point-of-sale": "yarn workspace @shopify/ui-extensions docs:point-of-sale",
+    "docs:pos": "yarn docs:point-of-sale",
+    "docs:pos:dev": "yarn workspace @shopify/ui-extensions docs:point-of-sale:dev",
     "docs:customer-account": "yarn workspace @shopify/ui-extensions docs:customer-account",
     "deploy:unstable": "changeset version --snapshot unstable && changeset publish --tag unstable --no-git-tag",
     "predeploy:internal": "yarn build",

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

@@ -1,6 +1,9 @@
 import {useEffect, useRef, useState} from 'react';
 
-import {ConnectivityState} from '@shopify/ui-extensions/point-of-sale';
+import type {
+  ConnectivityApiContent,
+  ConnectivityState,
+} from '@shopify/ui-extensions/point-of-sale';
 import {
   StatefulRemoteSubscribable,
   makeStatefulSubscribable,
@@ -19,7 +22,9 @@ let statefulSubscribable:
 /**
  * Verifies that the API has a Connectivity in it.
  */
-const isConnectivityApi = (api: any): boolean => {
+const isConnectivityApi = (
+  api: any,
+): api is {connectivity: ConnectivityApiContent} => {
   return 'connectivity' in api;
 };
 

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

@@ -5,6 +5,7 @@ import {
   makeStatefulSubscribable,
 } from '@remote-ui/async-subscription';
 
+import type {LocaleApiContent} from '@shopify/ui-extensions/point-of-sale';
 import {useApi} from './api';
 
 /**
@@ -16,7 +17,7 @@ let statefulSubscribable: StatefulRemoteSubscribable<string> | undefined;
 /**
  * Verifies that the API has a Locale in it.
  */
-const isLocaleApi = (api: any): boolean => {
+const isLocaleApi = (api: any): api is {locale: LocaleApiContent} => {
   return 'locale' in api;
 };
 

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

@@ -7,22 +7,21 @@ import {
 
 export default extension('pos.receipt-footer.block.render', (root, api) => {
   const block = root.createComponent(POSReceiptBlock);
+  const transaction = api.transaction;
   const textTransactionType = root.createComponent(
     Text,
     {},
-    `Transaction type: ${api.transaction.transactionType}`,
+    `Transaction type: ${transaction.transactionType}`,
   );
   const textTaxTotal = root.createComponent(
     Text,
     {},
-    `Total tax: ${api.transaction.taxTotal}`,
+    `Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`,
   );
   const qrCodeValue =
-    api.transaction.transactionType === 'Exchange'
-      ? `exampleExchange=${encodeURIComponent(
-          api.transaction.exchangeId ?? '',
-        )}`
-      : `exampleOrder=${encodeURIComponent(api.transaction.orderId ?? '')}`;
+    transaction.transactionType === 'Exchange'
+      ? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
+      : `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;
 
   const qrCode = root.createComponent(QRCode, {
     value: `https://www.shopify.com?${qrCodeValue}`,

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

@@ -18,7 +18,7 @@ const Block = () => {
   return (
     <POSReceiptBlock>
       <Text>{`Transaction type: ${transaction.transactionType}`}</Text>
-      <Text>{`Total tax: ${transaction.taxTotal}`}</Text>
+      <Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>
       <QRCode value={`https://www.shopify.com?${qrCodeValue}`} />
     </POSReceiptBlock>
   );

packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.cash-tracking-session-complete.event.observe.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       name: ExtensionTargetType.PosCashTrackingSessionStartObserve,
       subtitle: 'Target',
       type: 'blocks',
-      url: '/docs/api/pos-ui-extensions/targets/cash-tracking/pos-cash-tracking-session-start-observe',
+      url: '/docs/api/pos-ui-extensions/targets/cash-tracking/pos-cash-tracking-session-start-event-observe',
     },
   ],
   type: 'Target',

packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.cash-tracking-session-start.event.observe.doc.ts

@@ -1,5 +1,4 @@
 import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-import {generateCodeBlock} from '../helpers/generateCodeBlock';
 import {CUSTOM_DATA} from '../helpers/helper.docs';
 import {ExtensionTargetType} from '../types/ExtensionTargetType';
 
@@ -16,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       name: ExtensionTargetType.PosCashTrackingSessionCompleteObserve,
       subtitle: 'Target',
       type: 'blocks',
-      url: '/docs/api/pos-ui-extensions/targets/cash-tracking/pos-cash-tracking-session-complete-observe',
+      url: '/docs/api/pos-ui-extensions/targets/cash-tracking/pos-cash-tracking-session-complete-event-observe',
     },
   ],
   type: 'Target',

packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.receipt-footer.block.render.doc.ts

@@ -1,6 +1,6 @@
 import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 import {generateCodeBlock} from '../helpers/generateCodeBlock';
-import {TRANSACTION_COMPLETE_DEFINITION} from '../helpers/helper.docs';
+import {CUSTOM_DATA} from '../helpers/helper.docs';
 import {ExtensionTargetType} from '../types/ExtensionTargetType';
 
 const data: ReferenceEntityTemplateSchema = {
@@ -27,7 +27,7 @@ const data: ReferenceEntityTemplateSchema = {
     },
   ],
   type: 'Target',
-  ...TRANSACTION_COMPLETE_DEFINITION,
+  definitions: [CUSTOM_DATA('TransactionCompleteWithReprintData')],
 };
 
 export default data;

packages/ui-extensions/package.json

@@ -7,6 +7,7 @@
     "gen-docs:admin": "bash ./docs/surfaces/admin/create-doc-files.sh \"admin\"",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
     "docs:point-of-sale": "bash ./docs/surfaces/point-of-sale/build-docs.sh",
+    "docs:point-of-sale:dev": "nodemon --watch src/surfaces/point-of-sale/ --watch docs/surfaces/point-of-sale/ -e ts,tsx,json,png,txt --ignore '**/generated/**' --exec 'yarn docs:point-of-sale'",
     "docs:customer-account": "bash ./docs/surfaces/customer-account/build-docs.sh"
   },
   "main": "index.js",

packages/ui-extensions/src/surfaces/point-of-sale/data.ts

@@ -1,7 +1,10 @@
 export type {BaseData} from './event/data/BaseData';
 export type {BaseApi} from './event/data/BaseApi';
 export type {ReprintReceiptData} from './event/data/ReprintReceiptData';
-export type {TransactionCompleteData} from './event/data/TransactionCompleteData';
+export type {
+  TransactionCompleteData,
+  TransactionCompleteWithReprintData,
+} from './event/data/TransactionCompleteData';
 export type {
   CashTrackingSessionCompleteData,
   CashTrackingSessionStartData,