here’s two trimmed down components..
StartOrder.tsx 
import { useState } from 'react'
import type { ListRow } from '@shopify/ui-extensions-react/point-of-sale'
import { Screen, Stack, ScrollView, Button, List, useApi } from '@shopify/ui-extensions-react/point-of-sale'
export const StartOrderScreen = () => {
const api = useApi<'pos.home.modal.render'>()
const [visibleCollection, setVisibleCollection] = useState<ListRow[] | undefined>()
const navigateToProductDetails = (productId: string) => {
api.navigation.navigate('ProductDetails', { productId })
}
const testProduct = {
title: 'title',
id: 'id',
}
return (
<Screen
name="Start"
title="Start Order"
// reset the menu after adding an item to the cart
onReceiveParams={(params: { resetView: boolean }) => params.resetView && setVisibleCollection(undefined)}
secondaryAction={{
onPress: () => api.navigation.dismiss(),
text: 'Close',
isEnabled: true,
}}
>
<Button
title={testProduct.title}
onPress={() => {
navigateToProductDetails(testProduct.id)
}}
/>
<ScrollView>
<Stack>{visibleCollection && <List data={visibleCollection} imageDisplayStrategy="always" />}</Stack>
</ScrollView>
</Screen>
)
}
ProductDetails.tsx
import { useEffect, useState } from 'react'
import { Screen, Stack, ScrollView, Text, useApi, Button, Stepper } from '@shopify/ui-extensions-react/point-of-sale'
import type { ProductVariant, Product } from '@shopify/ui-extensions/point-of-sale'
export const ProductDetailsScreen = () => {
const api = useApi<'pos.home.modal.render'>()
const [productId, setProductId] = useState<string | undefined>()
const [productInfo, setProductInfo] = useState<Product | undefined>()
const [variant, setVariant] = useState<ProductVariant | undefined>()
const [loading, setLoading] = useState(false)
const [quantity, setQuantity] = useState(1)
const getIdNumber = (id: string): number => Number(id.match(/\d+$/)[0])
const fetchProductInfo = async (id: string) => {
setLoading(true)
const product = await api.productSearch.fetchProductWithId(getIdNumber(id))
setLoading(false)
setProductInfo(product)
const [mainVariant] = product.variants
setVariant(mainVariant)
}
const addToCart = async (variant: ProductVariant, shouldFinish?: boolean) => {
api.cart.addLineItem(variant.id, quantity)
setQuantity(1)
api.toast.show(`${productInfo.title} added to Cart!`)
return shouldFinish ? api.navigation.dismiss() : api.navigation.navigate('Start', { resetView: true })
}
useEffect(() => {
productId && fetchProductInfo(productId)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [productId])
return (
<Screen
name="ProductDetails"
title="Select Options"
onReceiveParams={(params: { productId: string }) => setProductId(params.productId)}
isLoading={loading}
secondaryAction={{
onPress: () => api.navigation.dismiss(),
text: 'Close',
isEnabled: true,
}}
>
<ScrollView>
<Stack direction="block" gap="200" paddingInline="100">
{productInfo && (
<Stack>
<Stack direction="inline" gap="400">
<Text variant="display">{productInfo.title}</Text>
<Text variant="display">- €{variant?.price || productInfo.minVariantPrice}</Text>
</Stack>
</Stack>
)}
</Stack>
<Stack direction="block" paddingBlock="400" paddingInline="100" gap="400">
<Stepper initialValue={quantity} onValueChanged={setQuantity} />
<Stack direction="inline" flexChildren gap="400">
<Button title="Add and View Cart" onPress={() => addToCart(variant, true)} type="primary" />
</Stack>
</Stack>
</ScrollView>
</Screen>
)
}
StartOrder.tsx => you find/select a product, navigate to the ProductDetails.tsx with the productId, where you fetch the product details with that id. The ID is passed as a param from the navigation api.
