diff --git a/.changeset/large-bottles-perform.md b/.changeset/large-bottles-perform.md new file mode 100644 index 0000000000..a976d8f10c --- /dev/null +++ b/.changeset/large-bottles-perform.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +fix(admin-ui): fix(admin-ui): ensure that the allocation indicator is correctly displayed diff --git a/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx b/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx index 366617fa59..94c181085a 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx @@ -26,26 +26,19 @@ const EditAllocationDrawer = ({ close, reservation, item, - sales_channel_id, totalReservedQuantity, }: { close: () => void reservation?: ReservationItemDTO item: LineItem totalReservedQuantity: number - sales_channel_id?: string }) => { const form = useForm() const { control, setValue, handleSubmit } = form - // if not sales channel is present fetch all locations - const stockLocationsFilter: { sales_channel_id?: string } = {} - if (sales_channel_id) { - stockLocationsFilter.sales_channel_id = sales_channel_id - } - - const { stock_locations } = useAdminStockLocations(stockLocationsFilter) + const { stock_locations, isLoading: isLoadingStockLocations } = + useAdminStockLocations() const { variant, isLoading } = useAdminVariantsInventory( item.variant_id as string @@ -59,14 +52,14 @@ const EditAllocationDrawer = ({ ) const locationOptions = useMemo(() => { - if (!stock_locations) { + if (!stock_locations || isLoadingStockLocations) { return [] } return stock_locations.map((sl) => ({ value: sl.id, label: sl.name, })) - }, [stock_locations]) + }, [isLoadingStockLocations, stock_locations]) const notification = useNotification() const handleDelete = () => { diff --git a/packages/admin-ui/ui/src/domain/orders/details/create-fulfillment/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/create-fulfillment/index.tsx index 8a5811967d..66f0e44671 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/create-fulfillment/index.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/create-fulfillment/index.tsx @@ -36,12 +36,14 @@ type CreateFulfillmentModalProps = { email?: string orderToFulfill: Order | ClaimOrder | Swap orderId: string + onComplete?: () => void } const CreateFulfillmentModal: React.FC = ({ handleCancel, orderToFulfill, orderId, + onComplete, }) => { const { isFeatureEnabled } = useFeatureFlag() const isLocationFulfillmentEnabled = @@ -187,6 +189,7 @@ const CreateFulfillmentModal: React.FC = ({ onSuccess: () => { notification("Success", successText, "success") handleCancel() + onComplete && onComplete() }, onError: (err) => notification("Error", getErrorMessage(err), "error"), }) diff --git a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx b/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx index c47079171a..1e2efba9d4 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx @@ -11,19 +11,15 @@ import { OrderEditContext } from "../../edit/context" import OrderLine from "../order-line" import StatusIndicator from "../../../../components/fundamentals/status-indicator" import { sum } from "lodash" -import { useAdminReservations } from "medusa-react" import { useFeatureFlag } from "../../../../providers/feature-flag-provider" import useToggleState from "../../../../hooks/use-toggle-state" type SummaryCardProps = { order: Order + reservations: ReservationItemDTO[] } -const SummaryCard: React.FC = ({ - order, -}: { - order: Order -}) => { +const SummaryCard: React.FC = ({ order, reservations }) => { const { state: allocationModalIsOpen, open: showAllocationModal, @@ -34,23 +30,8 @@ const SummaryCard: React.FC = ({ const { isFeatureEnabled } = useFeatureFlag() const inventoryEnabled = isFeatureEnabled("inventoryService") - const { reservations, isLoading, refetch } = useAdminReservations( - { - line_item_id: order.items.map((item) => item.id), - }, - { - enabled: inventoryEnabled, - } - ) - - React.useEffect(() => { - if (inventoryEnabled) { - refetch() - } - }, [inventoryEnabled, refetch]) - const reservationItemsMap = useMemo(() => { - if (!reservations?.length || !inventoryEnabled || isLoading) { + if (!reservations?.length || !inventoryEnabled) { return {} } @@ -66,15 +47,17 @@ const SummaryCard: React.FC = ({ }, {} ) - }, [reservations, inventoryEnabled, isLoading]) + }, [reservations, inventoryEnabled]) const allItemsReserved = useMemo(() => { return order.items.every((item) => { const reservations = reservationItemsMap[item.id] - if (!reservations) { - return false - } - return sum(reservations.map((r) => r.quantity)) === item.quantity + + return ( + item.quantity === item.fulfilled_quantity || + (reservations && + sum(reservations.map((r) => r.quantity)) === item.quantity) + ) }) }, [reservationItemsMap, order]) diff --git a/packages/admin-ui/ui/src/domain/orders/details/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/index.tsx index d7f1287755..c018368a77 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/index.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/index.tsx @@ -14,6 +14,7 @@ import { useAdminCapturePayment, useAdminOrder, useAdminRegion, + useAdminReservations, useAdminUpdateOrder, } from "medusa-react" import { useNavigate, useParams } from "react-router-dom" @@ -55,8 +56,9 @@ import useClipboard from "../../../hooks/use-clipboard" import { useHotkeys } from "react-hotkeys-hook" import useImperativeDialog from "../../../hooks/use-imperative-dialog" import useNotification from "../../../hooks/use-notification" -import { useState } from "react" +import { useEffect, useState } from "react" import useToggleState from "../../../hooks/use-toggle-state" +import { useFeatureFlag } from "../../../providers/feature-flag-provider" type OrderDetailFulfillment = { title: string @@ -145,6 +147,23 @@ const OrderDetails = () => { const { region } = useAdminRegion(order?.region_id!, { enabled: !!order?.region_id, }) + const { isFeatureEnabled } = useFeatureFlag() + const inventoryEnabled = isFeatureEnabled("inventoryService") + + const { reservations, refetch: refetchReservations } = useAdminReservations( + { + line_item_id: order?.items.map((item) => item.id), + }, + { + enabled: inventoryEnabled, + } + ) + + useEffect(() => { + if (inventoryEnabled) { + refetchReservations() + } + }, [inventoryEnabled, refetchReservations]) const navigate = useNavigate() const notification = useNotification() @@ -316,7 +335,7 @@ const OrderDetails = () => { - + { orderToFulfill={order as any} handleCancel={() => setShowFulfillment(false)} orderId={order.id} + onComplete={refetchReservations} /> )} {showRefund && ( diff --git a/packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx b/packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx index 4a5d8e6ca2..cd12ae0774 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/order-line/index.tsx @@ -94,30 +94,39 @@ const ReservationIndicator = ({ const locationMap = new Map(stock_locations?.map((l) => [l.id, l.name]) || []) const reservationsSum = sum(reservations?.map((r) => r.quantity) || []) - const awaitingAllocation = lineItem.quantity - reservationsSum + + const allocatableSum = lineItem.quantity - (lineItem?.fulfilled_quantity || 0) + + const awaitingAllocation = allocatableSum - reservationsSum return (
-
- {!!awaitingAllocation && ( - - {awaitingAllocation} items await allocation - - )} - {reservations?.map((reservation) => ( - setReservation(reservation)} - /> - ))} -
+ {reservationsSum || awaitingAllocation ? ( +
+ {!!awaitingAllocation && ( + + {awaitingAllocation} items await allocation + + )} + {reservations?.map((reservation) => ( + setReservation(reservation)} + /> + ))} +
+ ) : ( + + This item has been fulfilled. + + )}
} side="bottom"