fix: fixed price info

Author: freddien03

src/app/product/[id]/page.tsx

@@ -324,18 +324,41 @@ export default function ProductPage({ params }: { params: Promise<{ id: string }
 
   // Calculate price statistics when similar products change
   useEffect(() => {
-    if (!product || !(sameProducts.length - 1)) return;
+    if (!product) return;
 
     const getPrice = (p: Product) => p.price || p.expectedPrice || 0;
-    const prices = [...sameProducts.map(getPrice), getPrice(product)].filter(p => p > 0);
-
-    if (prices.length) {
+    const currentProductPrice = getPrice(product);
+    
+    // If we have similar products, include them in the calculation
+    if (sameProducts.length > 1) {
+      const prices = sameProducts.map(getPrice).filter(p => p > 0);
+      
+      if (prices.length > 0) {
+        setPriceStats({
+          min: Math.min(...prices),
+          max: Math.max(...prices),
+          q1: calculateQuartile(prices, 0.25),
+          median: calculateQuartile(prices, 0.5),
+          q3: calculateQuartile(prices, 0.75)
+        });
+      } else if (currentProductPrice > 0) {
+        // If no similar products have prices, use current product as baseline
+        setPriceStats({
+          min: currentProductPrice,
+          max: currentProductPrice,
+          q1: currentProductPrice,
+          median: currentProductPrice,
+          q3: currentProductPrice
+        });
+      }
+    } else if (currentProductPrice > 0) {
+      // If no similar products, use current product as sole data point
       setPriceStats({
-        min: Math.min(...prices),
-        max: Math.max(...prices),
-        q1: calculateQuartile(prices, 0.25),
-        median: calculateQuartile(prices, 0.5),
-        q3: calculateQuartile(prices, 0.75)
+        min: currentProductPrice,
+        max: currentProductPrice,
+        q1: currentProductPrice,
+        median: currentProductPrice,
+        q3: currentProductPrice
       });
     }
   }, [sameProducts, product]);

src/components/PriceSpectrum.tsx

@@ -52,7 +52,7 @@ const PriceSpectrum: React.FC<PriceSpectrumProps> = ({
   const productPrice = getPrice(product);
 
   // If no real prices available, show simple message
-  if (productPrice === 0) {
+  if (productPrice === 0 && priceStats.min === 0 && priceStats.max === 0) {
     return (
       <div className="w-full h-24 flex items-center justify-center text-sm" style={{ 
         color: colours.text.secondary
@@ -62,12 +62,32 @@ const PriceSpectrum: React.FC<PriceSpectrumProps> = ({
     );
   }
 
+  // If current product has no price but we have price statistics, show different message
+  if (productPrice === 0 && (priceStats.min > 0 || priceStats.max > 0)) {
+    return (
+      <div className="w-full h-24 flex flex-col items-center justify-center text-sm" style={{ 
+        color: colours.text.secondary
+      }}>
+        <div>Price not available for this product</div>
+        <div className="mt-1 text-xs">
+          Similar products range: £{priceStats.min.toFixed(2)} - £{priceStats.max.toFixed(2)}
+        </div>
+      </div>
+    );
+  }
+
+  // Ensure we have valid price range for scaling
+  const minPrice = Math.max(priceStats.min, 0.01); // Avoid division by zero
+  const maxPrice = Math.max(priceStats.max, productPrice, 0.01);
+
   // Convert prices to position percentages for visualization, accounting for 5% padding on each side
   const scale = (price: number) => {
-    if (price === priceStats.min) return 5; // Align with left edge of spectrum
-    if (price === priceStats.max) return 95; // Align with right edge of spectrum
+    if (price === minPrice) return 5; // Align with left edge of spectrum
+    if (price === maxPrice) return 95; // Align with right edge of spectrum
     // Scale between 5% and 95% for other values
-    return 5 + ((price - priceStats.min) / (priceStats.max - priceStats.min)) * 90;
+    const range = maxPrice - minPrice;
+    if (range === 0) return 50; // If all prices are the same, center it
+    return 5 + ((price - minPrice) / range) * 90;
   };
 
   // Calculate the position of the current product's price
@@ -148,7 +168,7 @@ const PriceSpectrum: React.FC<PriceSpectrumProps> = ({
             }}
             onClick={onMinClick}
           >
-            £{priceStats.min.toFixed(2)}
+            £{minPrice.toFixed(2)}
           </button>
         </div>
         <div className="absolute -bottom-4 right-[0%]">
@@ -161,7 +181,7 @@ const PriceSpectrum: React.FC<PriceSpectrumProps> = ({
             }}
             onClick={onMaxClick}
           >
-            £{priceStats.max.toFixed(2)}
+            £{maxPrice.toFixed(2)}
           </button>
         </div>
       </div>

src/components/TabbedInfoBox.tsx

@@ -333,7 +333,7 @@ const TabbedInfoBox: React.FC<TabbedInfoBoxProps> = ({
             transition: 'opacity 0.2s ease-in-out, height 0.3s ease-in-out'
           }}
         >
-          {activeTab === "Price" && reviewSummary && (
+          {activeTab === "Price" && (
             <PriceTabContent
               product={product}
               reviewSummary={reviewSummary}

src/components/tabs/PriceTabContent.tsx

@@ -8,7 +8,7 @@ import { colours } from "@/styles/colours";
 
 interface PriceTabContentProps {
   product: Product;
-  reviewSummary: ReviewSummary;
+  reviewSummary?: ReviewSummary | null;
   priceStats: {
     min: number;
     max: number;