From 0b5eddef47ef670334a4a36400d019e15321e063 Mon Sep 17 00:00:00 2001
From: andrzejewsky <vox3r69@gmail.com>
Date: Thu, 30 Jan 2025 13:30:51 +0100
Subject: [PATCH] Empty image

---
 .../CollectionProducts/EmptyImage.tsx         | 10 ++++++
 .../CollectionProducts/ProductTableItem.tsx   | 33 +++++++++++++------
 .../CollectionProducts/ProductsTable.tsx      |  4 +--
 3 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 src/collections/components/CollectionProducts/EmptyImage.tsx

diff --git a/src/collections/components/CollectionProducts/EmptyImage.tsx b/src/collections/components/CollectionProducts/EmptyImage.tsx
new file mode 100644
index 0000000000..9730e8147a
--- /dev/null
+++ b/src/collections/components/CollectionProducts/EmptyImage.tsx
@@ -0,0 +1,10 @@
+import { Box, useTheme } from "@saleor/macaw-ui-next";
+import React from "react";
+
+export const EmptyImage = () => {
+  const { theme } = useTheme();
+
+  const bgColor = theme === "defaultLight" ? "hsla(210, 15%, 87%, 1)" : "hsla(210, 32%, 25%, 1)";
+
+  return <Box __width="31px" __height="31px" __backgroundColor={bgColor} borderRadius={2} />;
+};
diff --git a/src/collections/components/CollectionProducts/ProductTableItem.tsx b/src/collections/components/CollectionProducts/ProductTableItem.tsx
index 9c5a93f319..9681be1521 100644
--- a/src/collections/components/CollectionProducts/ProductTableItem.tsx
+++ b/src/collections/components/CollectionProducts/ProductTableItem.tsx
@@ -4,9 +4,18 @@ import Drag from "@dashboard/icons/Drag";
 import { productUrl } from "@dashboard/products/urls";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Box, Button, Checkbox, Skeleton, Text, TrashBinIcon } from "@saleor/macaw-ui-next";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Skeleton,
+  Text,
+  TrashBinIcon,
+  useTheme,
+} from "@saleor/macaw-ui-next";
 import React from "react";
 
+import { EmptyImage } from "./EmptyImage";
 import { Product } from "./types";
 
 interface ItemProps {
@@ -78,15 +87,19 @@ export const ProductTableItem = ({
           gap={2}
           height="100%"
         >
-          <Box borderColor="default1" borderWidth={1} borderStyle="solid">
-            <Box
-              as="img"
-              src={product?.thumbnail?.url}
-              alt={product?.name}
-              __width="31px"
-              __height="31px"
-            />
-          </Box>
+          {product?.thumbnail ? (
+            <Box borderColor="default1" borderWidth={1} borderRadius={2} borderStyle="solid">
+              <Box
+                as="img"
+                src={product?.thumbnail?.url}
+                alt={product?.name}
+                __width="31px"
+                __height="31px"
+              />
+            </Box>
+          ) : (
+            <EmptyImage />
+          )}
           <Text>{product?.name}</Text>
         </Box>
       </GridTable.Cell>
diff --git a/src/collections/components/CollectionProducts/ProductsTable.tsx b/src/collections/components/CollectionProducts/ProductsTable.tsx
index 6a1947e740..869783f8a0 100644
--- a/src/collections/components/CollectionProducts/ProductsTable.tsx
+++ b/src/collections/components/CollectionProducts/ProductsTable.tsx
@@ -147,12 +147,12 @@ export const ProductsTable = ({
           </GridTable.Row>
           <SortableContext items={items} strategy={verticalListSortingStrategy}>
             {renderCollection(items, product => {
-              const isSelected = product ? isChecked(product.id) : false;
-
               if (!product) {
                 return null;
               }
 
+              const isSelected = isChecked(product.id);
+
               return (
                 <ProductTableItem
                   key={product.id}