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
2023-03-16 15:41:39 +01:00
parent 02c77d7059
commit 4213326fe8
8 changed files with 98 additions and 19 deletions
--- a/.changeset/stale-colts-thank.md
+++ b/.changeset/stale-colts-thank.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+feat(admin-ui): Add location names to fulfilment rows and timeline events
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-container.tsx
+++ b/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>
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/event-item-container.tsx
+++ b/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>
  )
 }
--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/items-fulfilled.tsx
+++ b/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} />
 }

--- a/packages/admin-ui/ui/src/components/molecules/timeline-events/items-shipped.tsx
+++ b/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} />
 }
--- a/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment.tsx
+++ b/packages/admin-ui/ui/src/domain/orders/details/templates/fulfillment.tsx
@@ -4,11 +4,14 @@ import {
  useAdminCancelFulfillment,
  useAdminCancelSwapFulfillment,
 } from "medusa-react"
+import IconBadge from "../../../../components/fundamentals/icon-badge"
+import BuildingsIcon from "../../../../components/fundamentals/icons/buildings-icon"
 import CancelIcon from "../../../../components/fundamentals/icons/cancel-icon"
 import PackageIcon from "../../../../components/fundamentals/icons/package-icon"
 import Actionables from "../../../../components/molecules/actionables"
 import useImperativeDialog from "../../../../hooks/use-imperative-dialog"
 import useNotification from "../../../../hooks/use-notification"
+import useStockLocations from "../../../../hooks/use-stock-locations"
 import { getErrorMessage } from "../../../../utils/error-messages"
 import { TrackingLink } from "./tracking-link"

@@ -23,6 +26,7 @@ export const FormattedFulfillment = ({
  const cancelFulfillment = useAdminCancelFulfillment(order.id)
  const cancelSwapFulfillment = useAdminCancelSwapFulfillment(order.id)
  const cancelClaimFulfillment = useAdminCancelClaimFulfillment(order.id)
+  const { getLocationNameById } = useStockLocations()

  const { fulfillment } = fulfillmentObj
  const hasLinks = !!fulfillment.tracking_links?.length
@@ -89,7 +93,7 @@ export const FormattedFulfillment = ({

  return (
    <div className="flex w-full justify-between">
-      <div className="flex flex-col space-y-1 py-2">
+      <div className="flex flex-col space-y-1 py-4">
        <div className="text-grey-90">
          {fulfillment.canceled_at
            ? "Fulfillment has been canceled"
@@ -104,6 +108,19 @@ export const FormattedFulfillment = ({
              <TrackingLink key={j} trackingLink={tl} />
            ))}
        </div>
+        {!fulfillment.canceled_at && fulfillment.location_id && (
+          <div className="flex flex-col">
+            <div className="text-grey-50 font-semibold">
+              {fulfillment.shipped_at ? "Shipped" : "Shipping"} from{" "}
+            </div>
+            <div className="flex items-center pt-2">
+              <IconBadge className="mr-2">
+                <BuildingsIcon />
+              </IconBadge>
+              {getLocationNameById(fulfillment.location_id)}
+            </div>
+          </div>
+        )}
      </div>
      {!fulfillment.canceled_at && !fulfillment.shipped_at && (
        <div className="flex items-center space-x-2">
--- a/packages/admin-ui/ui/src/hooks/use-build-timeline.tsx
+++ b/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 || "-" },
+  }
+}
--- a/packages/admin-ui/ui/src/hooks/use-stock-locations.ts
+++ b/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