fix(dashboard): allocation label condition (#9398)

**What**
- show "not allocated" label only if there are unfulfilled items
- small refactor and general improvement of reservations in order summary

---

FIXES CC-539
This commit is contained in:
Frane Polić authored and GitHub committed 2024-10-02 14:47:40 +00:00
1 parent 8753b178da
commit b39ba45b81
1 file changed
+20 -19
@@ -19,7 +19,6 @@ import {
AdminOrderLineItem, AdminOrderLineItem,
AdminOrderPreview, AdminOrderPreview,
AdminReturn, AdminReturn,
ReservationItemDTO,
} from "@medusajs/types" } from "@medusajs/types"
import { import {
Badge, Badge,
@@ -55,6 +54,7 @@ import { getReturnableQuantity } from "../../../../../lib/rma"
import { CopyPaymentLink } from "../copy-payment-link/copy-payment-link" import { CopyPaymentLink } from "../copy-payment-link/copy-payment-link"
import ReturnInfoPopover from "./return-info-popover" import ReturnInfoPopover from "./return-info-popover"
import ShippingInfoPopover from "./shipping-info-popover" import ShippingInfoPopover from "./shipping-info-popover"
import { AdminReservation } from "@medusajs/types/src/http"
type OrderSummarySectionProps = { type OrderSummarySectionProps = {
order: AdminOrder order: AdminOrder
@@ -171,7 +171,7 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
return ( return (
<Container className="divide-y divide-dashed p-0"> <Container className="divide-y divide-dashed p-0">
<Header order={order} orderPreview={orderPreview} /> <Header order={order} orderPreview={orderPreview} />
<ItemBreakdown order={order} /> <ItemBreakdown order={order} reservations={reservations!} />
<CostBreakdown order={order} /> <CostBreakdown order={order} />
<Total order={order} /> <Total order={order} />
@@ -317,11 +317,6 @@ const Header = ({
}, },
{ {
actions: [ actions: [
// {
// label: t("orders.summary.allocateItems"),
// to: "#", // TODO: Open modal to allocate items
// icon: <Buildings />,
// },
{ {
label: t("orders.returns.create"), label: t("orders.returns.create"),
to: `/orders/${order.id}/returns`, to: `/orders/${order.id}/returns`,
@@ -380,15 +375,17 @@ const Item = ({
}: { }: {
item: AdminOrderLineItem item: AdminOrderLineItem
currencyCode: string currencyCode: string
reservation?: ReservationItemDTO | null reservation?: AdminReservation
returns: AdminReturn[] returns: AdminReturn[]
claims: AdminClaim[] claims: AdminClaim[]
exchanges: AdminExchange[] exchanges: AdminExchange[]
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const isInventoryManaged = item.variant?.manage_inventory const isInventoryManaged = item.variant?.manage_inventory
const hasInventoryKit = const hasInventoryKit =
isInventoryManaged && (item.variant?.inventory_items?.length || 0) > 1 isInventoryManaged && (item.variant?.inventory_items?.length || 0) > 1
const hasUnfulfilledItems = item.quantity - item.detail.fulfilled_quantity > 0
return ( return (
<> <>
@@ -435,7 +432,7 @@ const Item = ({
</div> </div>
<div className="overflow-visible"> <div className="overflow-visible">
{isInventoryManaged && ( {isInventoryManaged && hasUnfulfilledItems && (
<StatusBadge <StatusBadge
color={reservation ? "green" : "orange"} color={reservation ? "green" : "orange"}
className="text-nowrap" className="text-nowrap"
@@ -477,11 +474,13 @@ const Item = ({
) )
} }
const ItemBreakdown = ({ order }: { order: AdminOrder }) => { const ItemBreakdown = ({
const { reservations } = useReservationItems({ order,
line_item_id: order.items.map((i) => i.id), reservations,
}) }: {
order: AdminOrder
reservations?: AdminReservation[]
}) => {
const { claims = [] } = useClaims({ const { claims = [] } = useClaims({
order_id: order.id, order_id: order.id,
fields: "*additional_items", fields: "*additional_items",
@@ -497,12 +496,15 @@ const ItemBreakdown = ({ order }: { order: AdminOrder }) => {
fields: "*items,*items.reason", fields: "*items,*items.reason",
}) })
const reservationsMap = useMemo(
() => new Map((reservations || []).map((r) => [r.line_item_id, r])),
[reservations]
)
return ( return (
<div> <div>
{order.items?.map((item) => { {order.items?.map((item) => {
const reservation = reservations const reservation = reservationsMap.get(item.id)
? reservations.find((r) => r.line_item_id === item.id)
: null
return ( return (
<Item <Item
@@ -573,9 +575,8 @@ const CostBreakdown = ({ order }: { order: AdminOrder }) => {
) )
.map((sm, i) => { .map((sm, i) => {
return ( return (
<div> <div key={sm.id}>
<Cost <Cost
key={sm.id}
label={ label={
sm.detail.return_id sm.detail.return_id
? t("fields.returnShipping") ? t("fields.returnShipping")