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/components/molecules/timeline-events/event-container.tsx

@@ -25,6 +25,7 @@ export type EventContainerProps = {
   isFirst?: boolean
   expandable?: boolean
   children: ReactNode
+  detail?: string | React.ReactNode
 }
 
 const EventContainer: React.FC<EventContainerProps> = ({
@@ -38,6 +39,7 @@ const EventContainer: React.FC<EventContainerProps> = ({
   isFirst = false,
   expandable = false,
   children,
+  detail,
 }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(!expandable)
 
@@ -92,6 +94,7 @@ const EventContainer: React.FC<EventContainerProps> = ({
           {children && isExpanded && (
             <div className="mt-small pb-base w-full">{children}</div>
           )}
+          <div className="text-grey-50">{detail}</div>
         </div>
       </div>
     </div>

packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx

@@ -9,30 +9,38 @@ type EventItemContainerProps = {
       title: string
     }
   }
+  detail?: string
 }
 
-const EventItemContainer: React.FC<EventItemContainerProps> = ({ item }) => {
+const EventItemContainer: React.FC<EventItemContainerProps> = ({
+  item,
+  detail,
+}) => {
   if (!item) {
     return null
   }
+
   return (
-    <div className="gap-x-small mb-base flex items-center last:mb-0">
-      {item.thumbnail && (
-        <div className="rounded-base h-10 w-[30px] overflow-hidden">
-          <img
-            src={item.thumbnail}
-            alt={`Thumbnail for ${item.title}`}
-            className="h-full w-full object-cover"
-          />
+    <div className="mb-base flex flex-col last:mb-0 ">
+      <div className="gap-x-small flex items-center">
+        {item.thumbnail && (
+          <div className="rounded-base h-10 w-[30px] overflow-hidden">
+            <img
+              src={item.thumbnail}
+              alt={`Thumbnail for ${item.title}`}
+              className="h-full w-full object-cover"
+            />
+          </div>
+        )}
+        <div className="inter-small-regular flex w-full flex-col">
+          <div className="flex w-full items-center justify-between">
+            <p>{item.title}</p>
+            <span className="inter-small-semibold text-violet-60">{`x${item.quantity}`}</span>
+          </div>
+          <p className="text-grey-50">{item.variant.title}</p>
         </div>
-      )}
-      <div className="inter-small-regular flex w-full flex-col">
-        <div className="flex w-full items-center justify-between">
-          <p>{item.title}</p>
-          <span className="inter-small-semibold text-violet-60">{`x${item.quantity}`}</span>
-        </div>
-        <p className="text-grey-50">{item.variant.title}</p>
       </div>
+      {detail && <div className="text-grey-50">{detail}</div>}
     </div>
   )
 }

packages/admin-ui/ui/src/components/molecules/timeline-events/items-fulfilled.tsx

@@ -16,6 +16,10 @@ const ItemsFulfilled: React.FC<ItemsFulfilledProps> = ({ event }) => {
       ? "Exchange Items Fulfilled"
       : "Items Fulfilled"
 
+  const detail = event.locationName
+    ? `Shipping from ${event.locationName}`
+    : undefined
+
   const args = {
     icon: <PackageIcon size={20} />,
     time: event.time,
@@ -25,7 +29,9 @@ const ItemsFulfilled: React.FC<ItemsFulfilledProps> = ({ event }) => {
     )),
     noNotification: event.noNotification,
     isFirst: event.first,
+    detail,
   }
+
   return <EventContainer {...args} />
 }
 

packages/admin-ui/ui/src/components/molecules/timeline-events/items-shipped.tsx

@@ -16,6 +16,10 @@ const ItemsShipped: React.FC<ItemsShippedProps> = ({ event }) => {
       ? "Exchange Items Shipped"
       : "Items Shipped"
 
+  const detail = event.locationName
+    ? `Shipped from ${event.locationName}`
+    : undefined
+
   const args = {
     icon: <TruckIcon size={20} />,
     time: event.time,
@@ -25,6 +29,7 @@ const ItemsShipped: React.FC<ItemsShippedProps> = ({ event }) => {
     )),
     noNotification: event.noNotification,
     isFirst: event.first,
+    detail,
   }
   return <EventContainer {...args} />
 }