From c96cba7e1b2f6362e4547629f8b736fd8cc95877 Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Thu, 3 Aug 2023 10:08:13 +0200
Subject: [PATCH 1/2] fix: use apps navigation helpers

---
 packages/app/src/components/ListItemOrder.tsx | 40 +++++++++----------
 packages/app/src/components/OrderCustomer.tsx | 20 +++++++++-
 .../app/src/components/OrderShipments.tsx     | 25 ++++++++++--
 packages/app/src/pages/OrderDetails.tsx       | 11 +++--
 4 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/packages/app/src/components/ListItemOrder.tsx b/packages/app/src/components/ListItemOrder.tsx
index 2ca2aab..2441b66 100644
--- a/packages/app/src/components/ListItemOrder.tsx
+++ b/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
+        }
+      })}
+    />
   )
 }
diff --git a/packages/app/src/components/OrderCustomer.tsx b/packages/app/src/components/OrderCustomer.tsx
index 2a596ab..f18989e 100644
--- a/packages/app/src/components/OrderCustomer.tsx
+++ b/packages/app/src/components/OrderCustomer.tsx
@@ -3,9 +3,12 @@ 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
@@ -13,16 +16,30 @@ interface Props {
 
 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>
       </>
     )
diff --git a/packages/app/src/components/OrderShipments.tsx b/packages/app/src/components/OrderShipments.tsx
index e8b5732..081fab6 100644
--- a/packages/app/src/components/OrderShipments.tsx
+++ b/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>
   )
 }
diff --git a/packages/app/src/pages/OrderDetails.tsx b/packages/app/src/pages/OrderDetails.tsx
index 1948a5d..16675e2 100644
--- a/packages/app/src/pages/OrderDetails.tsx
+++ b/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}>

From 5c28d68f6a6dff273c63280cf7e41ab5d6ddb51e Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Thu, 3 Aug 2023 10:08:49 +0200
Subject: [PATCH 2/2] chore: update lockfile to latest pnpm

---
 pnpm-lock.yaml | 37 +++++++------------------------------
 1 file changed, 7 insertions(+), 30 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fdee2ac..4a73039 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -1280,10 +1284,6 @@ packages:
       config-chain: 1.1.13
     dev: true
 
-  /@popperjs/core@2.11.7:
-    resolution: {integrity: sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==}
-    dev: false
-
   /@popperjs/core@2.11.8:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
@@ -1399,10 +1399,10 @@ packages:
   /@types/react-datepicker@4.15.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-kr10s8ex4+MmCJmzdhA9kfmoMQBmsW5uDYDlH+8f/PgStrp7rRaz23Y/cvTiMgvESVq8ujDh4SOo6jlSwEw13g==}
     dependencies:
-      '@popperjs/core': 2.11.7
+      '@popperjs/core': 2.11.8
       '@types/react': 18.2.17
       date-fns: 2.30.0
-      react-popper: 2.3.0(@popperjs/core@2.11.7)(react-dom@18.2.0)(react@18.2.0)
+      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
       - react
       - react-dom
@@ -6032,20 +6032,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /react-popper@2.3.0(@popperjs/core@2.11.7)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
-    peerDependencies:
-      '@popperjs/core': ^2.0.0
-      react: ^16.8.0 || ^17 || ^18
-      react-dom: ^16.8.0 || ^17 || ^18
-    dependencies:
-      '@popperjs/core': 2.11.7
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-fast-compare: 3.2.1
-      warning: 4.0.3
-    dev: false
-
   /react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
     peerDependencies:
@@ -6961,7 +6947,7 @@ packages:
     resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==}
     engines: {node: '>=8'}
     dependencies:
-      tslib: 2.5.0
+      tslib: 2.6.1
     dev: false
 
   /tsconfck@2.1.1(typescript@5.1.6):
@@ -6999,13 +6985,8 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
-  /tslib@2.5.0:
-    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
-    dev: false
-
   /tslib@2.6.1:
     resolution: {integrity: sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==}
-    dev: true
 
   /tsutils@3.21.0(typescript@5.1.6):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -7723,7 +7704,3 @@ packages:
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false