fix(dashboard): reservation and price list fixes (#8110)

* wip: reservation fixes, PL fixes

* fix: delete message and cache invalidation

* fix: invalidate inventory item details when reservation is created/updated/deleted

* fix: align design

* fix: location levels cache

packages/admin-next/dashboard/src/hooks/api/price-lists.tsx

@@ -70,7 +70,7 @@ export const useCreatePriceList = (
   return useMutation({
     mutationFn: (payload) => sdk.admin.priceList.create(payload, query),
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: priceListsQueryKeys.list() })
+      queryClient.invalidateQueries({ queryKey: priceListsQueryKeys.lists() })
 
       queryClient.invalidateQueries({ queryKey: customerGroupsQueryKeys.all })
 
@@ -92,9 +92,9 @@ export const useUpdatePriceList = (
   return useMutation({
     mutationFn: (payload) => sdk.admin.priceList.update(id, payload, query),
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: priceListsQueryKeys.list() })
+      queryClient.invalidateQueries({ queryKey: priceListsQueryKeys.lists() })
       queryClient.invalidateQueries({
-        queryKey: priceListsQueryKeys.detail(id),
+        queryKey: priceListsQueryKeys.details(),
       })
 
       queryClient.invalidateQueries({ queryKey: customerGroupsQueryKeys.all })
@@ -116,7 +116,7 @@ export const useDeletePriceList = (
   return useMutation({
     mutationFn: () => sdk.admin.priceList.delete(id),
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: priceListsQueryKeys.list() })
+      queryClient.invalidateQueries({ queryKey: priceListsQueryKeys.lists() })
 
       options?.onSuccess?.(data, variables, context)
     },

packages/admin-next/dashboard/src/hooks/api/reservations.tsx

@@ -19,6 +19,10 @@ import { InventoryTypes } from "@medusajs/types"
 import { client } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
+import {
+  inventoryItemLevelsQueryKeys,
+  inventoryItemsQueryKeys,
+} from "./inventory.tsx"
 
 const RESERVATION_ITEMS_QUERY_KEY = "reservation_items" as const
 export const reservationItemsQueryKeys = queryKeysFactory(
@@ -77,6 +81,12 @@ export const useUpdateReservationItem = (
       queryClient.invalidateQueries({
         queryKey: reservationItemsQueryKeys.lists(),
       })
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemsQueryKeys.details(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemLevelsQueryKeys.details(),
+      })
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -93,6 +103,12 @@ export const useCreateReservationItem = (
       queryClient.invalidateQueries({
         queryKey: reservationItemsQueryKeys.lists(),
       })
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemsQueryKeys.details(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemLevelsQueryKeys.details(),
+      })
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -112,6 +128,12 @@ export const useDeleteReservationItem = (
       queryClient.invalidateQueries({
         queryKey: reservationItemsQueryKeys.detail(id),
       })
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemsQueryKeys.details(),
+      })
+      queryClient.invalidateQueries({
+        queryKey: inventoryItemLevelsQueryKeys.details(),
+      })
       options?.onSuccess?.(data, variables, context)
     },
     ...options,

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -579,6 +579,7 @@
       "header": "Reservation of {{itemName}}",
       "editItemDetails": "Edit reservation",
       "lineItemId": "Line item ID",
+      "orderID": "Order ID",
       "description": "Description",
       "location": "Location",
       "inStockAtLocation": "In stock at this location",

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-general-section.tsx

@@ -16,7 +16,9 @@ export const InventoryItemGeneralSection = ({
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{inventoryItem.title ?? inventoryItem.sku}</Heading>
+        <Heading>
+          {inventoryItem.title ?? inventoryItem.sku} {t("fields.details")}
+        </Heading>
         <ActionMenu
           groups={[
             {

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/reservations-table/reservation-list-table.tsx

@@ -1,9 +1,12 @@
-import { DataTable } from "../../../../../components/table/data-table"
+import { useMemo } from "react"
 import { InventoryTypes } from "@medusajs/types"
+
+import { DataTable } from "../../../../../components/table/data-table"
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useReservationItems } from "../../../../../hooks/api/reservations"
 import { useReservationTableColumn } from "./use-reservation-list-table-columns"
 import { useReservationsTableQuery } from "./use-reservation-list-table-query"
+import { useStockLocations } from "../../../../../hooks/api"
 
 const PAGE_SIZE = 20
 
@@ -22,10 +25,23 @@ export const ReservationItemTable = ({
       inventory_item_id: [inventoryItem.id],
     })
 
+  const { stock_locations } = useStockLocations({
+    id: (reservations || []).map((r) => r.location_id),
+  })
+
+  const data = useMemo(() => {
+    const locationMap = new Map((stock_locations || []).map((l) => [l.id, l]))
+
+    return (reservations || []).map((r) => ({
+      ...r,
+      location: locationMap.get(r.location_id),
+    }))
+  }, [reservations, stock_locations])
+
   const columns = useReservationTableColumn({ sku: inventoryItem.sku! })
 
   const { table } = useDataTable({
-    data: reservations ?? [],
+    data: data ?? [],
     columns,
     count,
     enablePagination: true,

packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/reservations-table/use-reservation-list-table-columns.tsx

@@ -5,6 +5,8 @@ import { ReservationActions } from "./reservation-actions"
 import { createColumnHelper } from "@tanstack/react-table"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
+import { DateCell } from "../../../../../components/table/table-cells/common/date-cell"
+import { CreatedAtCell } from "../../../../../components/table/table-cells/common/created-at-cell"
 
 /**
  * Adds missing properties to the InventoryItemDTO type.
@@ -81,21 +83,7 @@ export const useReservationTableColumn = ({ sku }: { sku: string }) => {
       }),
       columnHelper.accessor("created_at", {
         header: t("fields.createdAt"),
-        cell: ({ getValue }) => {
+        cell: ({ getValue }) => <CreatedAtCell date={getValue()} />,
-          const createdAt = getValue()
-
-          if (!createdAt) {
-            return <PlaceholderCell />
-          }
-
-          return (
-            <div className="flex size-full items-center overflow-hidden">
-              <span className="truncate">
-                {createdAt instanceof Date ? createdAt.toString() : createdAt}
-              </span>
-            </div>
-          )
-        },
       }),
       columnHelper.display({
         id: "actions",

packages/admin-next/dashboard/src/routes/price-lists/common/hooks/use-delete-price-list-action.tsx

@@ -34,7 +34,7 @@ export const useDeletePriceListAction = ({
       onSuccess: () => {
         toast.success(
           t("priceLists.delete.successToast", {
-            name: priceList.title,
+            title: priceList.title,
           })
         )