From 4bafb4e307f7b93989a56bba90b71340b694c5c1 Mon Sep 17 00:00:00 2001
From: Tomasz Buras <tomaszburas.dev@gmail.com>
Date: Wed, 11 Mar 2026 18:47:14 +0100
Subject: [PATCH] fix(admin): add null check for empty order items

---
 .../order-remaining-orders-group-section.tsx  | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/routes/orders/order-detail/components/order-remaining-orders-group-section/order-remaining-orders-group-section.tsx b/src/routes/orders/order-detail/components/order-remaining-orders-group-section/order-remaining-orders-group-section.tsx
index 3ec18b59..2ca70b35 100644
--- a/src/routes/orders/order-detail/components/order-remaining-orders-group-section/order-remaining-orders-group-section.tsx
+++ b/src/routes/orders/order-detail/components/order-remaining-orders-group-section/order-remaining-orders-group-section.tsx
@@ -1,8 +1,9 @@
-import { Badge, Button, Container, Heading, Text } from "@medusajs/ui";
-import { useNavigate, useParams } from "react-router-dom";
-import { useOrderSet } from "../../../../../hooks/api/sellers";
-import { PaymentStatusBadge } from "../../../../../components/common/payments-status-badge";
-import { OrderStatusBadge } from "../../../../../components/common/order-status-badge";
+import { Badge, Button, Container, Heading, Text } from '@medusajs/ui';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { OrderStatusBadge } from '../../../../../components/common/order-status-badge';
+import { PaymentStatusBadge } from '../../../../../components/common/payments-status-badge';
+import { useOrderSet } from '../../../../../hooks/api/sellers';
 
 export const OrderRemainingOrdersGroupSection = () => {
   const { id } = useParams();
@@ -20,48 +21,60 @@ export const OrderRemainingOrdersGroupSection = () => {
 
   return (
     <Container data-testid="order-remaining-orders-group-section">
-      <Heading level="h2" className="text-lg font-medium" data-testid="order-remaining-orders-group-heading">
+      <Heading
+        level="h2"
+        className="text-lg font-medium"
+        data-testid="order-remaining-orders-group-heading"
+      >
         Remaining orders group
       </Heading>
       <div data-testid="order-remaining-orders-group-list">
         {orders?.map((order: any) => {
           const items =
-            order.items.length > 1
+            order.items?.length > 1
               ? `${order.items[0].subtitle} + ${order.items.length - 1} more`
-              : order.items[0].subtitle;
+              : order.items?.length === 1
+                ? order.items[0].subtitle
+                : 'No items';
           return (
             <Button
               variant="secondary"
               key={order.id}
-              className="cursor-pointer w-full flex text-left mt-4"
+              className="mt-4 flex w-full cursor-pointer text-left"
               onClick={() => {
                 navigate(`/orders/${order.id}`);
               }}
               data-testid={`order-remaining-orders-group-item-${order.id}`}
             >
-              <div className="w-full relative">
+              <div className="relative w-full">
                 <div className="flex items-center justify-between gap-2">
                   <Heading
                     level="h3"
-                    className="text-md font-medium w-1/3 truncate"
+                    className="text-md w-1/3 truncate font-medium"
                     data-testid={`order-remaining-orders-group-item-${order.id}-heading`}
                   >
                     #{order.display_id}
                   </Heading>
-                  <div className="flex w-2/3" data-testid={`order-remaining-orders-group-item-${order.id}-badges`}>
-                    <Badge className="scale-75 -mr-8">
-                      <span className="text-xs mr-2">Payment</span>
-                      <PaymentStatusBadge
-                        status={order.payment_collections[0].status}
-                      />
+                  <div
+                    className="flex w-2/3"
+                    data-testid={`order-remaining-orders-group-item-${order.id}-badges`}
+                  >
+                    <Badge className="-mr-8 scale-75">
+                      <span className="mr-2 text-xs">Payment</span>
+                      <PaymentStatusBadge status={order.payment_collections[0].status} />
                     </Badge>
-                    <Badge className="scale-75 -mr-4">
-                      <span className="text-xs mr-2">Order</span>
+                    <Badge className="-mr-4 scale-75">
+                      <span className="mr-2 text-xs">Order</span>
                       <OrderStatusBadge status={order.status} />
                     </Badge>
                   </div>
                 </div>
-                <Text className="truncate" data-testid={`order-remaining-orders-group-item-${order.id}-items`}>{items}</Text>
+                <Text
+                  className="truncate"
+                  data-testid={`order-remaining-orders-group-item-${order.id}-items`}
+                >
+                  {items}
+                </Text>
               </div>
             </Button>
           );