feat(admin-ui): Add location names to fulfilment rows and timeline events (#3481)

Adds location information to fulfilment rows and timeline events

![image](https://user-images.githubusercontent.com/948623/225306827-ebd08517-41c5-426e-88f2-43192b337995.png)
![image](https://user-images.githubusercontent.com/948623/225306876-7f77cbb8-6583-4082-b141-21b84fc2c79e.png)

Resolves CORE-1234

packages/admin-ui/ui/src/hooks/use-build-timeline.tsx

@@ -15,6 +15,7 @@ import {
 import { useMemo } from "react"
 import useOrdersExpandParam from "../domain/orders/details/utils/use-admin-expand-paramter"
 import { useFeatureFlag } from "../providers/feature-flag-provider"
+import useStockLocations from "./use-stock-locations"
 
 export interface TimelineEvent {
   id: string
@@ -92,10 +93,12 @@ interface FulfillmentEvent extends TimelineEvent {
 
 export interface ItemsFulfilledEvent extends FulfillmentEvent {
   items: OrderItem[]
+  locationName?: string
 }
 
 export interface ItemsShippedEvent extends FulfillmentEvent {
   items: OrderItem[]
+  locationName?: string
 }
 
 export interface RefundEvent extends TimelineEvent {
@@ -175,6 +178,8 @@ export const useBuildTimeline = (orderId: string) => {
 
   const { notifications } = useAdminNotifications({ resource_id: orderId })
 
+  const { getLocationNameById } = useStockLocations()
+
   const events: TimelineEvent[] | undefined = useMemo(() => {
     if (!order) {
       return undefined
@@ -318,9 +323,10 @@ export const useBuildTimeline = (orderId: string) => {
         id: event.id,
         time: event.created_at,
         type: "fulfilled",
-        items: event.items.map((item) => getLineItem(allItems, item.item_id)),
+        items: event.items.map((item) => getFulfilmentItem(allItems, item)),
         noNotification: event.no_notification,
         orderId: order.id,
+        locationName: getLocationNameById(event.location_id),
       } as ItemsFulfilledEvent)
 
       if (event.shipped_at) {
@@ -328,9 +334,10 @@ export const useBuildTimeline = (orderId: string) => {
           id: event.id,
           time: event.shipped_at,
           type: "shipped",
-          items: event.items.map((item) => getLineItem(allItems, item.item_id)),
+          items: event.items.map((item) => getFulfilmentItem(allItems, item)),
           noNotification: event.no_notification,
           orderId: order.id,
+          locationName: getLocationNameById(event.location_id),
         } as ItemsShippedEvent)
       }
     }
@@ -592,3 +599,18 @@ function getWasRefundClaim(claimId, order) {
 
   return claim.type === "refund"
 }
+
+function getFulfilmentItem(allItems, item) {
+  const line = allItems.find((line) => line.id === item.item_id)
+
+  if (!line) {
+    return
+  }
+
+  return {
+    title: line.title,
+    quantity: item.quantity,
+    thumbnail: line.thumbnail,
+    variant: { title: line?.variant?.title || "-" },
+  }
+}

packages/admin-ui/ui/src/hooks/use-stock-locations.ts

@@ -0,0 +1,13 @@
+import { useAdminStockLocations } from "medusa-react"
+
+const useStockLocations = () => {
+  const { stock_locations } = useAdminStockLocations()
+
+  const getLocationNameById = (locationId: string | null) =>
+    stock_locations?.find((stock_location) => stock_location.id === locationId)
+      ?.name
+
+  return { stock_locations, getLocationNameById }
+}
+
+export default useStockLocations