feat: add product stock and ui improvements

Vagabonds-Labs · Feb 24, 2025 · e9a3666 · e9a3666
1 parent ec1c918
commit e9a3666
Show file tree

Hide file tree

Showing 19 changed files with 443 additions and 150 deletions.
diff --git a/apps/web/prisma/migrations/20250320000000_add_stock_field/migration.sql b/apps/web/prisma/migrations/20250320000000_add_stock_field/migration.sql
@@ -0,0 +1,10 @@
+-- AlterTable
+ALTER TABLE `Product` 
+ADD COLUMN `stock` INTEGER NOT NULL DEFAULT 0,
+ADD COLUMN `hidden` BOOLEAN NULL DEFAULT false;
+
+-- CreateExtension
+-- This migration marks the existing stock and hidden fields in the Product table
+-- These fields were previously added via db:push
+-- This migration is for documentation purposes only and won't modify the database
+SELECT 1; 
diff --git a/apps/web/prisma/schema.prisma b/apps/web/prisma/schema.prisma
@@ -40,6 +40,7 @@ model Product {
   price        Float
   nftMetadata  Json
   hidden       Boolean? @default(false)
+  stock        Int      @default(0)
   createdAt    DateTime @default(now())
   updatedAt    DateTime @updatedAt
   shoppingCartItems ShoppingCartItem[]

diff --git a/apps/web/public/locales/en/common.json b/apps/web/public/locales/en/common.json
@@ -7,6 +7,8 @@
 	"argent_mobile": "Argent Mobile",
 	"error_signing_message": "Error signing the message",
 
+	"beta_announcement": "Welcome to our beta version. We're actively improving the platform and appreciate your understanding as we enhance your experience.",
+
 	"tag_new": "New",
 	"welcome_coffee_lover": "Welcome Coffee Lover",
 	"featured": "Featured",
@@ -361,5 +363,12 @@
 	"farm_details": "Farm details",
 	"no_favorite_products": "No favorite products yet",
 	"click_to_upload": "Click to upload",
-	"no_collectibles_found": "No collectibles found"
+	"no_collectibles_found": "No collectibles found",
+
+	"stock_status": {
+		"in_stock": "{{count}} in stock",
+		"low_stock_left": "Only {{count}} left",
+		"stock_available": "{{count}} available",
+		"sold_out": "Sold Out"
+	}
 }
diff --git a/apps/web/public/locales/es/common.json b/apps/web/public/locales/es/common.json
@@ -7,6 +7,8 @@
 	"argent_mobile": "Argent Mobile",
 	"error_signing_message": "Error al firmar el mensaje",
 
+	"beta_announcement": "Bienvenido a nuestra versión beta. Estamos mejorando activamente la plataforma y agradecemos tu comprensión mientras optimizamos tu experiencia.",
+
 	"tag_new": "Nuevo",
 	"welcome_coffee_lover": "Bienvenido Amante del Café",
 	"featured": "Destacado",
@@ -339,5 +341,11 @@
 	"track_in_my_orders": "Seguir en Mis Pedidos",
 	"subtotal": "Subtotal",
 	"amount_with_currency": "{{amount}} USD",
-	"amount_with_currency_short": "${amount} USD"
+	"amount_with_currency_short": "${amount} USD",
+	"stock_status": {
+		"in_stock": "{{count}} en existencia",
+		"low_stock_left": "Solo quedan {{count}}",
+		"stock_available": "{{count}} disponibles",
+		"sold_out": "Agotado"
+	}
 }
diff --git a/apps/web/public/locales/pt/common.json b/apps/web/public/locales/pt/common.json
@@ -7,6 +7,8 @@
 	"argent_mobile": "Argent Mobile",
 	"error_signing_message": "Erro ao assinar a mensagem",
 
+	"beta_announcement": "Bem-vindo à nossa versão beta. Estamos melhorando ativamente a plataforma e agradecemos sua compreensão enquanto aprimoramos sua experiência.",
+
 	"tag_new": "Novo",
 	"welcome_coffee_lover": "Bem-vindo Amante de Café",
 	"featured": "Em destaque",
@@ -326,5 +328,11 @@
 	"track_in_my_orders": "Acompanhar em Meus Pedidos",
 	"subtotal": "Subtotal",
 	"amount_with_currency": "{{amount}} USD",
-	"amount_with_currency_short": "${amount} USD"
+	"amount_with_currency_short": "${amount} USD",
+	"stock_status": {
+		"in_stock": "{{count}} em estoque",
+		"low_stock_left": "Apenas {{count}} restantes",
+		"stock_available": "{{count}} disponíveis",
+		"sold_out": "Esgotado"
+	}
 }
diff --git a/apps/web/src/app/_components/features/ProductCatalog.tsx b/apps/web/src/app/_components/features/ProductCatalog.tsx
@@ -52,6 +52,7 @@ export default function ProductCatalog({
 		api.product.getProducts.useInfiniteQuery(
 			{
 				limit: 3,
+				includeHidden: false,
 			},
 			{
 				getNextPageParam: (lastPage) => lastPage.nextCursor,
@@ -60,11 +61,15 @@ export default function ProductCatalog({
 
 	useEffect(() => {
 		if (data) {
-			const allProducts = data.pages.flatMap((page) =>
-				page.products.map((product) => ({
-					...product,
-					process: "Natural",
-				})),
+			const allProducts = data.pages.flatMap(
+				(page) =>
+					page.products
+						.filter((product) => product.hidden !== true)
+						.map((product) => ({
+							...product,
+							process: "Natural",
+							stock: product.stock ?? 0,
+						})) as Product[],
 			);
 			setProducts(allProducts);
 		}
@@ -90,6 +95,10 @@ export default function ProductCatalog({
 	};
 
 	const renderProduct = (product: Product) => {
+		if (product.hidden === true) {
+			return null;
+		}
+
 		let metadata: NftMetadata | null = null;
 
 		if (typeof product.nftMetadata === "string") {
@@ -102,7 +111,6 @@ export default function ProductCatalog({
 			metadata = product.nftMetadata as NftMetadata;
 		}
 
-		// Format the image URL to include the IPFS gateway if it's an IPFS hash
 		const imageUrl = metadata?.imageUrl
 			? metadata.imageUrl.startsWith("Qm")
 				? `${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${metadata.imageUrl}`
@@ -142,6 +150,7 @@ export default function ProductCatalog({
 				farmName={metadata?.farmName ?? ""}
 				variety={t(product.name)}
 				price={totalPrice}
+				stock={product.stock}
 				badgeText={t(`strength.${metadata?.strength?.toLowerCase()}`)}
 				onClick={() => accessProductDetails(product.id)}
 				onAddToCart={handleAddToCart}
@@ -191,11 +200,16 @@ export default function ProductCatalog({
 								</button>
 							</div>
 							<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 w-full">
-								{results.map((product) => (
-									<div key={product.id} className="w-full">
-										{renderProduct(product)}
-									</div>
-								))}
+								{results
+									.filter((product) => product.hidden !== true)
+									.map((product) => (
+										<div key={product.id} className="w-full">
+											{renderProduct({
+												...product,
+												stock: product.stock ?? 0,
+											})}
+										</div>
+									))}
 							</div>
 						</div>
 					) : query ? (

diff --git a/apps/web/src/app/_components/features/ProductDetails.tsx b/apps/web/src/app/_components/features/ProductDetails.tsx
@@ -23,11 +23,12 @@ interface ProductDetailsProps {
 		region: string;
 		farmName: string;
 		roastLevel: string;
-		bagsAvailable: number;
+		stock: number;
 		price: number;
 		description: string;
 		type: "Buyer" | "Farmer" | "SoldOut";
 		process: string;
+		bagsAvailable?: number;
 	};
 	isConnected?: boolean;
 	onConnect?: () => void;
@@ -72,12 +73,13 @@ export default function ProductDetails({
 		name,
 		farmName,
 		roastLevel,
-		bagsAvailable,
+		stock,
 		price,
 		type,
 		process,
 		description,
 		region,
+		bagsAvailable,
 	} = product;
 
 	const { t } = useTranslation();
@@ -126,7 +128,7 @@ export default function ProductDetails({
 		return () => clearInterval(interval);
 	}, [price]);
 
-	const isSoldOut = type === "SoldOut";
+	const isSoldOut = stock === 0 || type === "SoldOut";
 	const isFarmer = type === "Farmer";
 
 	// Update productImages to use getImageUrl
@@ -245,7 +247,7 @@ export default function ProductDetails({
 						{!isSoldOut && !isFarmer && (
 							<Button
 								onClick={isConnected ? handleAddToCart : onConnect}
-								disabled={isAddingToCart}
+								disabled={isAddingToCart || stock === 0}
 								className="bg-yellow-400 hover:bg-yellow-500 text-black px-6"
 							>
 								{isAddingToCart
@@ -266,14 +268,23 @@ export default function ProductDetails({
 					<div className="space-y-4">
 						<div className="relative aspect-square rounded-2xl overflow-hidden bg-gray-100">
 							{productImages[selectedImage] && (
-								<Image
-									src={productImages[selectedImage].src}
-									alt={name}
-									fill
-									className="object-cover hover:scale-105 transition-transform duration-300"
-									sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-									priority
-								/>
+								<>
+									<Image
+										src={productImages[selectedImage].src}
+										alt={name}
+										fill
+										className="object-cover hover:scale-105 transition-transform duration-300"
+										sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+										priority
+									/>
+									{isSoldOut && (
+										<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+											<span className="text-white text-2xl font-bold px-6 py-2 bg-red-600 rounded-lg">
+												{t("sold_out")}
+											</span>
+										</div>
+									)}
+								</>
 							)}
 						</div>
 						{productImages.length > 1 && (
@@ -310,12 +321,30 @@ export default function ProductDetails({
 						</div>
 
 						<div className="border-t border-b py-4">
-							<Text className="text-3xl font-bold text-gray-900">
-								${price.toFixed(2)} USD
-								<span className="text-base font-normal text-gray-500 ml-2">
-									{t("per_unit")}
-								</span>
-							</Text>
+							<div className="flex items-center justify-between mb-2">
+								<Text className="text-3xl font-bold text-gray-900">
+									${price.toFixed(2)} USD
+									<span className="text-base font-normal text-gray-500 ml-2">
+										{t("per_unit")}
+									</span>
+								</Text>
+								<div className="flex items-center">
+									<div
+										className={`w-2 h-2 rounded-full ${isSoldOut ? "bg-red-500" : stock <= 5 ? "bg-orange-500" : stock <= 15 ? "bg-yellow-500" : "bg-green-500"} mr-2`}
+									/>
+									<Text
+										className={`text-sm ${isSoldOut ? "text-red-600 font-medium" : "text-gray-600"}`}
+									>
+										{isSoldOut
+											? t("stock_status.sold_out")
+											: stock <= 5
+												? t("stock_status.low_stock_left", { count: stock })
+												: stock <= 15
+													? t("stock_status.stock_available", { count: stock })
+													: t("stock_status.in_stock", { count: stock })}
+									</Text>
+								</div>
+							</div>
 							{isLoadingPrice ? (
 								<Text className="text-sm text-gray-500 mt-1">
 									{t("loading_strk_price")}
@@ -325,9 +354,13 @@ export default function ProductDetails({
 									≈ {strkPrice.toFixed(2)} STRK
 								</Text>
 							) : null}
-							{!isSoldOut && (
+							{isSoldOut ? (
+								<Text className="text-sm text-red-600 font-medium mt-1">
+									{t("product_sold_out")}
+								</Text>
+							) : (
 								<Text className="text-sm text-gray-500 mt-1">
-									{t("bags_available_count", { count: bagsAvailable })}
+									{t("stock_available", { count: stock })}
 								</Text>
 							)}
 						</div>
@@ -351,7 +384,7 @@ export default function ProductDetails({
 							<SelectionTypeCard
 								price={price}
 								quantity={quantity}
-								bagsAvailable={bagsAvailable}
+								stock={stock}
 								onQuantityChange={setQuantity}
 								onAddToCart={handleAddToCart}
 								isAddingToCart={isAddingToCart}