From 0e6fd9d33f12f86e8dafafa455094ea0d524f9e7 Mon Sep 17 00:00:00 2001
From: Winston Hsiao <96440583+Winston-Hsiao@users.noreply.github.com>
Date: Thu, 17 Oct 2024 21:46:47 -0400
Subject: [PATCH] Improve product page price display (#492)

---
 frontend/src/components/pages/StompyMini.tsx     | 4 ++--
 frontend/src/components/pages/StompyPro.tsx      | 4 ++--
 frontend/src/components/products/ProductPage.tsx | 9 +++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/pages/StompyMini.tsx b/frontend/src/components/pages/StompyMini.tsx
index c0df65af..516a1b91 100644
--- 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
index b1dd509c..798435d1 100644
--- 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
index a9c8c5b9..b46b72eb 100644
--- 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,8 +176,8 @@ 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>
@@ -184,7 +185,7 @@ const ProductPage = ({
 
         <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>