Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 1x 8x 8x 8x 1x 7x 1x 6x 1x 5x 1x 4x 6x 6x 6x 8x | // src/features/charts/PriceChart.tsx
import React from 'react';
import type { User } from '../../types';
import { useActiveDeals } from '../../hooks/useActiveDeals';
import { TagIcon } from '../../components/icons/TagIcon';
import { LoadingSpinner } from '../../components/LoadingSpinner';
import { formatUnitPrice } from '../../utils/unitConverter';
import { UserIcon } from '../../components/icons/UserIcon';
interface PriceChartProps {
unitSystem: 'metric' | 'imperial';
user: User | null;
}
export const PriceChart: React.FC<PriceChartProps> = ({ unitSystem, user }) => {
const { activeDeals: deals, isLoading, error } = useActiveDeals();
const renderContent = () => {
if (!user) {
return (
<div className="flex flex-col items-center justify-center h-full min-h-[150px] text-center">
<UserIcon className="w-10 h-10 text-gray-400 mb-3" />
<h4 className="font-semibold text-gray-700 dark:text-gray-300">Personalized Deals</h4>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
Log in to see active deals for items on your watchlist.
</p>
</div>
);
}
if (isLoading) {
return (
<div role="status" className="flex justify-center items-center h-full min-h-[100px]">
<div className="w-6 h-6 text-brand-primary">
<LoadingSpinner />
</div>{' '}
<span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
Finding active deals...
</span>
</div>
);
}
if (error) {
return (
<div className="text-center py-4">
<p className="text-sm text-red-500">{error}</p>
</div>
);
}
if (deals.length === 0) {
return (
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
No deals for your watched items found in any currently valid flyers.
</p>
);
}
return (
<div className="overflow-y-auto max-h-80">
<table className="min-w-full text-sm">
<thead className="bg-gray-50 dark:bg-gray-800 sticky top-0 z-10">
<tr>
<th className="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">
Item
</th>
<th className="px-4 py-2 text-left font-medium text-gray-600 dark:text-gray-300">
Store
</th>
<th className="px-4 py-2 text-right font-medium text-gray-600 dark:text-gray-300">
Price
</th>
<th className="px-4 py-2 text-right font-medium text-gray-600 dark:text-gray-300">
Unit Price
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
{deals.map((deal, index) => {
// The formatUnitPrice function returns an object { price: string, unit: string }.
// We need to combine these into a single string for rendering and to match the test expectation.
const unitPriceData = deal.unit_price
? formatUnitPrice(deal.unit_price, unitSystem)
: null;
const formattedUnitPriceString = unitPriceData
? `${unitPriceData.price}${unitPriceData.unit}`
: 'N/A';
return (
<tr
key={`${deal.item}-${deal.storeName}-${index}`}
className="hover:bg-gray-50 dark:hover:bg-gray-800/50"
>
<td className="px-4 py-2 font-semibold text-gray-900 dark:text-white">
<div className="flex justify-between items-baseline">
<span>{deal.item}</span>
{deal.master_item_name &&
deal.master_item_name.toLowerCase() !== deal.item.toLowerCase() && (
<span className="ml-2 text-xs font-normal italic text-gray-500 dark:text-gray-400 whitespace-nowrap">
({deal.master_item_name})
</span>
)}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 font-normal">
{deal.quantity}
</div>
</td>
<td className="px-4 py-2 text-left text-gray-700 dark:text-gray-200">
{deal.storeName}
</td>
<td className="px-4 py-2 text-right text-gray-700 dark:text-gray-200">
{deal.price_display}
</td>
<td className="px-4 py-2 text-right">{formattedUnitPriceString}</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
return (
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
<h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-white flex items-center">
<TagIcon className="w-5 h-5 mr-2 text-brand-primary" />
Active Deals on Watched Items
</h3>
{renderContent()}
</div>
);
};
|