feat: add tracking information to the ShipmentParcels component

commercelayer · Aug 10, 2023 · 784f1a2 · 784f1a2
1 parent 3c0cd0c
commit 784f1a2
Showing 1 changed file with 45 additions and 1 deletion.
diff --git a/packages/app-elements/src/ui/resources/ShipmentParcels.tsx b/packages/app-elements/src/ui/resources/ShipmentParcels.tsx
@@ -1,6 +1,7 @@
 import {
   getAvatarSrcFromRate,
   getParcelTrackingDetail,
+  getParcelTrackingDetails,
   getShipmentRate,
   hasBeenPurchased,
   hasSingleTracking
@@ -21,6 +22,7 @@ import {
 } from '@commercelayer/sdk'
 import { Package } from '@phosphor-icons/react'
 import cn from 'classnames'
+import { PageLayout, Timeline, useOverlayNavigation } from 'src/main'
 import { type SetNonNullable, type SetRequired } from 'type-fest'
 
 type SetNonNullableRequired<
@@ -242,8 +244,24 @@ const Tracking = withSkeletonTemplate<{
   estimatedDelivery?: string
 }>(({ parcel, estimatedDelivery }) => {
   const trackingDetails = getParcelTrackingDetail(parcel)
+  const { Overlay, open, close } = useOverlayNavigation({
+    queryParam: `tracking-${parcel.tracking_number ?? ''}`
+  })
+
   return (
     <>
+      {parcel.tracking_number != null && (
+        <Overlay>
+          <PageLayout
+            title={`Tracking ${parcel.tracking_number}`}
+            onGoBack={() => {
+              close()
+            }}
+          >
+            <TrackingInformation parcel={parcel} />
+          </PageLayout>
+        </Overlay>
+      )}
       {trackingDetails?.status != null && (
         <ListDetailsItem
           label='Status'
@@ -261,7 +279,13 @@ const Tracking = withSkeletonTemplate<{
           border='none'
           gutter='none'
         >
-          {parcel.tracking_number}
+          <A
+            onClick={() => {
+              open()
+            }}
+          >
+            {parcel.tracking_number}
+          </A>
         </ListDetailsItem>
       )}
       {estimatedDelivery != null && (
@@ -278,6 +302,26 @@ const Tracking = withSkeletonTemplate<{
   )
 })
 
+const TrackingInformation = withSkeletonTemplate<{
+  parcel: ParcelResource
+}>(({ parcel }) => {
+  return (
+    <Timeline
+      events={getParcelTrackingDetails(parcel)
+        .filter(
+          (
+            tracking
+          ): tracking is SetNonNullableRequired<typeof tracking, 'datetime'> =>
+            tracking.datetime != null
+        )
+        .map((tracking) => ({
+          date: tracking.datetime,
+          message: tracking.message
+        }))}
+    />
+  )
+})
+
 const PrintLabel = withSkeletonTemplate<{ href: string }>(({ href }) => {
   return (
     <div className='text-center'>