@shopify/shop-minis-react/src/hooks/navigation/useShopNavigation.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {
  NavigateToCheckoutParams,
  NavigateToOrderParams,
  NavigateToProductParams,
  NavigateToShopParams,
} from '@shopify/shop-minis-platform/actions'

import {useHandleAction} from '../../internal/useHandleAction'
import {useShopActions} from '../../internal/useShopActions'

interface UseShopNavigationReturns {
  /**
   * Navigates to a product.
   */
  navigateToProduct: (params: NavigateToProductParams) => Promise<void>
  /**
   * Navigates to a shop.
   */
  navigateToShop: (params: NavigateToShopParams) => Promise<void>
  /**
   * Navigates to an order.
   */
  navigateToOrder: (params: NavigateToOrderParams) => Promise<void>
  /**
   * Navigates to a checkout.
   */
  navigateToCheckout: (params: NavigateToCheckoutParams) => Promise<void>
  /**
   * Navigates to the cart screen.
   */
  navigateToCart: () => Promise<void>
}

export const useShopNavigation = (): UseShopNavigationReturns => {
  const {
    navigateToProduct,
    navigateToShop,
    navigateToOrder,
    navigateToCheckout,
    navigateToCart,
  } = useShopActions()

  return {
    navigateToProduct: useHandleAction(navigateToProduct),
    navigateToShop: useHandleAction(navigateToShop),
    navigateToOrder: useHandleAction(navigateToOrder),
    navigateToCheckout: useHandleAction(navigateToCheckout),
    navigateToCart: useHandleAction(navigateToCart),
  }
}