Merge pull request #67 from commercelayer/apps-cross-navigation

Apps cross navigation

packages/app/src/components/ListItemOrder.tsx

@@ -1,9 +1,10 @@
-import { appRoutes } from '#data/routes'
-import { useBackToList } from '#hooks/useBackToList'
 import { makeOrder } from '#mocks'
-import { ListItemOrder as ListItemOrderElements } from '@commercelayer/app-elements'
+import {
+  ListItemOrder as ListItemOrderElements,
+  navigateToDetail
+} from '@commercelayer/app-elements'
 import type { Order } from '@commercelayer/sdk'
-import { Link } from 'wouter'
+import { useLocation } from 'wouter'
 
 interface Props {
   resource?: Order
@@ -16,22 +17,21 @@ export function ListItemOrder({
   isLoading,
   delayMs
 }: Props): JSX.Element {
-  const { setBackToList } = useBackToList()
+  const [, setLocation] = useLocation()
+
   return (
-    <Link
-      href={appRoutes.details.makePath(resource.id)}
-      onClick={() => {
-        setBackToList({
-          search: window.location.search
-        })
-      }}
-    >
-      <ListItemOrderElements
-        order={resource}
-        isLoading={isLoading}
-        delayMs={delayMs}
-        tag='a'
-      />
-    </Link>
+    <ListItemOrderElements
+      order={resource}
+      isLoading={isLoading}
+      delayMs={delayMs}
+      tag='a'
+      {...navigateToDetail({
+        setLocation,
+        destination: {
+          app: 'orders',
+          resourceId: resource.id
+        }
+      })}
+    />
   )
 }

packages/app/src/components/OrderCustomer.tsx

@@ -3,26 +3,43 @@ import {
   Legend,
   ListItem,
   Text,
+  navigateToDetail,
+  useTokenProvider,
   withSkeletonTemplate
 } from '@commercelayer/app-elements'
 import type { Order } from '@commercelayer/sdk'
+import { useLocation } from 'wouter'
 
 interface Props {
   order: Order
 }
 
 export const OrderCustomer = withSkeletonTemplate<Props>(
   ({ order }): JSX.Element | null => {
+    const [, setLocation] = useLocation()
+    const { canAccess } = useTokenProvider()
+
     if (order.customer == null) {
       return null
     }
 
+    const navigateToCustomer = canAccess('customers')
+      ? navigateToDetail({
+          setLocation,
+          destination: {
+            app: 'customers',
+            resourceId: order.customer.id
+          }
+        })
+      : {}
+
     return (
       <>
         <Legend title='Customer' />
         <ListItem
-          tag='div'
+          tag={canAccess('customers') ? 'a' : 'div'}
           icon={<Icon name='user' background='teal' gap='large' />}
+          {...navigateToCustomer}
         >
           <div>
             <Text tag='div' weight='semibold'>
@@ -32,6 +49,7 @@ export const OrderCustomer = withSkeletonTemplate<Props>(
               {order.customer.total_orders_count} orders
             </Text>
           </div>
+          {canAccess('customers') && <Icon name='caretRight' />}
         </ListItem>
       </>
     )

packages/app/src/components/OrderShipments.tsx

@@ -1,14 +1,16 @@
 import {
-  formatDate,
   Icon,
   Legend,
   ListItem,
   Text,
+  formatDate,
+  navigateToDetail,
   useTokenProvider,
   withSkeletonTemplate
 } from '@commercelayer/app-elements'
 import type { Order, Shipment } from '@commercelayer/sdk'
 import type { SetNonNullable, SetRequired } from 'type-fest'
+import { useLocation } from 'wouter'
 
 interface Props {
   order: Order
@@ -41,10 +43,26 @@ function sanitizeShipmentStatus(status: Shipment['status']): string {
 }
 
 const renderShipment = (shipment: Shipment): JSX.Element => {
-  const { user } = useTokenProvider()
+  const { user, canAccess } = useTokenProvider()
+  const [, setLocation] = useLocation()
+
+  const navigateToShipment = canAccess('customers')
+    ? navigateToDetail({
+        setLocation,
+        destination: {
+          app: 'shipments',
+          resourceId: shipment.id
+        }
+      })
+    : {}
 
   return (
-    <ListItem key={shipment.id} tag='div' icon={getIcon(shipment.status)}>
+    <ListItem
+      key={shipment.id}
+      tag={canAccess('shipments') ? 'a' : 'div'}
+      icon={getIcon(shipment.status)}
+      {...navigateToShipment}
+    >
       <div>
         <Text tag='div' weight='semibold'>
           #{shipment.number}
@@ -58,6 +76,7 @@ const renderShipment = (shipment: Shipment): JSX.Element => {
           })}
         </Text>
       </div>
+      {canAccess('shipments') && <Icon name='caretRight' />}
     </ListItem>
   )
 }

packages/app/src/pages/OrderDetails.tsx

@@ -8,7 +8,6 @@ import { OrderSummary } from '#components/OrderSummary'
 import { OrderTimeline } from '#components/OrderTimeline'
 import { ScrollToTop } from '#components/ScrollToTop'
 import { appRoutes } from '#data/routes'
-import { useBackToList } from '#hooks/useBackToList'
 import { useOrderDetails } from '#hooks/useOrderDetails'
 import {
   Button,
@@ -17,6 +16,7 @@ import {
   SkeletonTemplate,
   Spacer,
   formatDate,
+  goBack,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import { Link, useLocation, useRoute } from 'wouter'
@@ -30,8 +30,6 @@ export function OrderDetails(): JSX.Element {
   const [, setLocation] = useLocation()
   const [, params] = useRoute<{ orderId: string }>(appRoutes.details.path)
 
-  const { goBackToList } = useBackToList()
-
   const orderId = params?.orderId ?? ''
 
   const { order, isLoading } = useOrderDetails(orderId)
@@ -79,7 +77,12 @@ export function OrderDetails(): JSX.Element {
           {order.reference != null && <div>Ref. {order.reference}</div>}
         </SkeletonTemplate>
       }
-      onGoBack={goBackToList}
+      onGoBack={() => {
+        goBack({
+          setLocation,
+          defaultRelativePath: appRoutes.home.makePath()
+        })
+      }}
     >
       <ScrollToTop />
       <SkeletonTemplate isLoading={isLoading}>