Improve product page price display (#492)

kscalelabs · Oct 18, 2024 · 0e6fd9d · 0e6fd9d
1 parent 67c9819
commit 0e6fd9d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/frontend/src/components/pages/StompyMini.tsx b/frontend/src/components/pages/StompyMini.tsx
@@ -25,7 +25,7 @@ const StompyMini: React.FC = () => {
       "Active community for support and ideas",
       "Regular firmware updates",
     ],
-    price: 350,
+    price: 35000,
     productId: "prod_R1IAtdBONHzXCb",
   };
 
@@ -38,7 +38,7 @@ const StompyMini: React.FC = () => {
       description={productInfo.description}
       features={productInfo.features}
       keyFeatures={productInfo.specs}
-      price={productInfo.price.toString()}
+      price={productInfo.price}
     />
   );
 };

diff --git a/frontend/src/components/pages/StompyPro.tsx b/frontend/src/components/pages/StompyPro.tsx
@@ -25,7 +25,7 @@ const StompyPro: React.FC = () => {
       "Expandable functionality through apps",
       "Regular software updates",
     ],
-    price: 15000,
+    price: 1600000,
     productId: "prod_R0n3nkCO4aQdlg",
   };
 
@@ -38,7 +38,7 @@ const StompyPro: React.FC = () => {
       description={productInfo.description}
       features={productInfo.features}
       keyFeatures={productInfo.specs}
-      price={productInfo.price.toString()}
+      price={productInfo.price}
     />
   );
 };

diff --git a/frontend/src/components/products/ProductPage.tsx b/frontend/src/components/products/ProductPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 
 import Container from "@/components/Container";
 import CheckoutButton from "@/components/stripe/CheckoutButton";
+import { formatPrice } from "@/lib/utils/formatNumber";
 
 interface Props {
   productId: string;
@@ -10,7 +11,7 @@ interface Props {
   description: string;
   features: string[];
   keyFeatures: string[];
-  price: string;
+  price: number;
   images: string[];
 }
 
@@ -175,16 +176,16 @@ const ProductPage = ({
 
         {isFixed && (
           <div className="fixed bottom-0 left-0 right-0 bg-white shadow-md p-4 transition-all duration-300 ease-in-out z-10">
-            <div className="max-w-7xl mx-auto flex justify-between items-center">
-              <p className="text-3xl font-bold">${price}</p>
+            <div className="max-w-7xl mx-auto flex justify-between items-center px-6">
+              <p className="text-2xl font-semibold">{formatPrice(price)}</p>
               <CheckoutButton productId={productId} label={checkoutLabel} />
             </div>
           </div>
         )}
 
         <div className="relative left-0 right-0 bg-white shadow-md p-4 transition-all duration-300 ease-in-out rounded-lg">
           <div className="max-w-7xl mx-auto flex justify-between items-center">
-            <p className="text-3xl font-bold">${price}</p>
+            <p className="text-2xl font-semibold">{formatPrice(price)}</p>
             <CheckoutButton productId={productId} label={checkoutLabel} />
           </div>
         </div>