feat(dashboard,medusa,types): improve order timeline UI (#14935)

* Update type

* Use query for line items queryKeys

* Fix line item versionj validator

* Make next and previous rendering more generic to reuse for other change detail tooltips

* Improve activity items with user who performed the action + items details for item edits

* Fix condition

* Add shipped by reference

* Update type

* Allow customer actor to be resolved

* Add created by to active claims

* Invert By order so it is the last element

* Include return created by

* Changeset

Author: NicolasGorga

.changeset/easy-birds-teach.md

@@ -0,0 +1,7 @@
+---
+"@medusajs/dashboard": patch
+"@medusajs/types": patch
+"@medusajs/medusa": patch
+---
+
+feat(dashboard,medusa,types): improve order timeline UI

packages/admin/dashboard/src/components/common/user-link/user-link.tsx

@@ -1,6 +1,7 @@
 import { Avatar, Text } from "@medusajs/ui"
 import { Link } from "react-router-dom"
 import { useUser } from "../../../hooks/api/users"
+import { useCustomer } from "../../../hooks/api/customers"
 
 type UserLinkProps = {
   id: string
@@ -24,7 +25,7 @@ export const UserLink = ({
   return (
     <Link
       to={link}
-      className="flex items-center gap-x-2 w-fit transition-fg hover:text-ui-fg-subtle outline-none focus-visible:shadow-borders-focus rounded-md"
+      className="transition-fg hover:text-ui-fg-subtle focus-visible:shadow-borders-focus flex w-fit items-center gap-x-2 rounded-md outline-none"
     >
       <Avatar size="2xsmall" fallback={fallback.toUpperCase()} />
       <Text size="small" leading="compact" weight="regular">
@@ -35,11 +36,20 @@ export const UserLink = ({
 }
 
 export const By = ({ id }: { id: string }) => {
-  const { user } = useUser(id) // todo: extend to support customers
+  const isUser = id.startsWith("user_")
+  const isCustomer = id.startsWith("cus_")
+  if (!isUser && !isCustomer) {
+    return null
+  }
+
+  const { user } = useUser(id, undefined, { enabled: isUser }) // todo: extend to support customers
+  const { customer } = useCustomer(id, undefined, { enabled: isCustomer })
+
+  const actor = isUser ? user : customer
 
-  if (!user) {
+  if (!actor) {
     return null
   }
 
-  return <UserLink {...user} />
+  return <UserLink {...actor} />
 }

packages/admin/dashboard/src/hooks/api/orders.tsx

@@ -17,7 +17,7 @@ const ORDERS_QUERY_KEY = "orders" as const
 const _orderKeys = queryKeysFactory(ORDERS_QUERY_KEY) as TQueryKey<"orders"> & {
   preview: (orderId: string) => any
   changes: (orderId: string) => any
-  lineItems: (orderId: string) => any
+  lineItems: (orderId: string, query?: any) => any
   shippingOptions: (orderId: string) => any
 }
 
@@ -29,8 +29,10 @@ _orderKeys.changes = function (id: string) {
   return [this.detail(id), "changes"]
 }
 
-_orderKeys.lineItems = function (id: string) {
-  return [this.detail(id), "lineItems"]
+_orderKeys.lineItems = function (id: string, query?: any) {
+  return [this.detail(id), query ? { query } : undefined, "lineItems"].filter(
+    (k) => !!k
+  )
 }
 
 _orderKeys.shippingOptions = function (id: string) {
@@ -189,7 +191,7 @@ export const useOrderLineItems = (
 ) => {
   const { data, ...rest } = useQuery({
     queryFn: async () => sdk.admin.order.listLineItems(id, query),
-    queryKey: ordersQueryKeys.lineItems(id),
+    queryKey: ordersQueryKeys.lineItems(id, query),
     ...options,
   })
 

packages/admin/dashboard/src/routes/orders/order-detail/components/order-activity-section/change-details-tooltip.tsx

@@ -3,8 +3,8 @@ import { ReactNode, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 type ChangeDetailsTooltipProps = {
-  previous: ReactNode
-  next: ReactNode
+  previous?: ReactNode
+  next?: ReactNode
   title: string
 }
 
@@ -14,6 +14,7 @@ function ChangeDetailsTooltip(props: ChangeDetailsTooltipProps) {
   const previous = props.previous
   const next = props.next
   const title = props.title
+  const showComparison = !!previous && !!next
 
   const handleMouseEnter = () => {
     setOpen(true)
@@ -48,21 +49,25 @@ function ChangeDetailsTooltip(props: ChangeDetailsTooltipProps) {
         <div className="flex flex-col">
           {!!previous && (
             <div className="p-3">
-              <div className="txt-compact-small-plus mb-1">
-                {t("labels.from")}
-              </div>
+              {showComparison && (
+                <div className="txt-compact-small-plus mb-1">
+                  {t("labels.from")}
+                </div>
+              )}
 
-              <p className="txt-compact-small text-ui-fg-subtle">{previous}</p>
+              {previous}
             </div>
           )}
 
           {!!next && (
             <div className="border-t-2 border-dotted p-3">
-              <div className="txt-compact-small-plus mb-1">
-                {t("labels.to")}
-              </div>
+              {showComparison && (
+                <div className="txt-compact-small-plus mb-1">
+                  {t("labels.to")}
+                </div>
+              )}
 
-              <p className="txt-compact-small text-ui-fg-subtle">{next}</p>
+              {next}
             </div>
           )}
         </div>