diff options
Diffstat (limited to 'src-migrate/modules')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductComparisonModal.tsx | 77 |
1 files changed, 48 insertions, 29 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx index 97f1d101..bc4c5415 100644 --- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx +++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx @@ -166,7 +166,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant }, [products, isOpen]); // =========================================================================== - // 3. SEARCH LOGIC + // 3. SEARCH LOGIC // =========================================================================== useEffect(() => { const delayDebounceFn = setTimeout(async () => { @@ -177,16 +177,24 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant if (activeSearchSlot === null) return; + const attrSetId = selectedVariant?.attribute_set_id || mainProduct?.attribute_set_id; + + if (!attrSetId) { + console.warn("Search dibatalkan: Produk utama tidak memiliki attribute_set_id"); + setSearchResults([]); + setIsSearching(false); + return; + } + setIsSearching(true); try { - const attrSetId = selectedVariant?.attribute_set_id || mainProduct?.attribute_set_id; const queryParam = searchQuery === '' ? '*' : searchQuery; const params = new URLSearchParams({ source: 'compare', q: queryParam, limit: '20', - fq: attrSetId ? `attribute_set_id_i:${attrSetId}` : '' + fq: `attribute_set_id_i:${attrSetId}` }); const res = await fetch(`/api/shop/search?${params.toString()}`); @@ -363,33 +371,44 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant {/* HASIL SEARCH */} {activeSearchSlot === index && ( <Box position="absolute" top="35px" left={0} right={0} bg="white" boxShadow="lg" zIndex={10} borderRadius="md" border="1px solid" borderColor="gray.200" maxH="250px" overflowY="auto"> - {isSearching ? ( - <Box p={4} textAlign="center"><Spinner size="sm" color="red.500"/></Box> - ) : searchResults.length > 0 ? ( - <List spacing={0}> - {searchResults.map((res) => ( - <ListItem - key={res.id} - p={2} borderBottom="1px solid #f0f0f0" - _hover={{ bg: 'red.50', cursor: 'pointer' }} - onClick={() => handleAddProduct(res, index)} - > - <Flex align="center" gap={2}> - <Image src={res.image || '/images/no-image-compare.svg'} boxSize="30px" objectFit="contain" onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }} /> - <Box> - <Text fontSize="xs" fontWeight="bold" noOfLines={1}>{res.displayName || res.name}</Text> - <Text fontSize="xs" color="red.500"> - {formatPrice(res.lowestPrice?.price || 0)} - </Text> - </Box> - </Flex> - </ListItem> - ))} - </List> - ) : ( - <Box p={3} fontSize="xs" color="gray.500" textAlign="center"> - {searchQuery === '' ? 'Menampilkan rekomendasi...' : 'Tidak ditemukan.'} + + {/* CEK ATTRIBUTE SET ID */} + {!selectedVariant?.attribute_set_id && !mainProduct?.attribute_set_id ? ( + <Box p={4} fontSize="xs" color="orange.600" textAlign="center" bg="orange.50"> + <Text fontWeight="bold" mb={1}>Perbandingan Tidak Tersedia</Text> + <Text>Produk utama tidak memiliki data kategori yang valid untuk dibandingkan.</Text> </Box> + ) : ( + <> + {isSearching ? ( + <Box p={4} textAlign="center"><Spinner size="sm" color="red.500"/></Box> + ) : searchResults.length > 0 ? ( + <List spacing={0}> + {searchResults.map((res) => ( + <ListItem + key={res.id} + p={2} borderBottom="1px solid #f0f0f0" + _hover={{ bg: 'red.50', cursor: 'pointer' }} + onClick={() => handleAddProduct(res, index)} + > + <Flex align="center" gap={2}> + <Image src={res.image || '/images/no-image-compare.svg'} boxSize="30px" objectFit="contain" onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }} /> + <Box> + <Text fontSize="xs" fontWeight="bold" noOfLines={1}>{res.displayName || res.name}</Text> + <Text fontSize="xs" color="red.500"> + {formatPrice(res.lowestPrice?.price || 0)} + </Text> + </Box> + </Flex> + </ListItem> + ))} + </List> + ) : ( + <Box p={3} fontSize="xs" color="gray.500" textAlign="center"> + {searchQuery === '' ? 'Menampilkan rekomendasi...' : 'Produk tidak ditemukan.'} + </Box> + )} + </> )} </Box> )} |