chore: setup project for production
This commit is contained in:
afnaann
207
components/products/AddToCardRightSection.jsx
Normal file
207
components/products/AddToCardRightSection.jsx
Normal file
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { Plus, Minus } from "lucide-react";
|
||||
import ProductContext from "@/app/contexts/productContext";
|
||||
import { backendUrl } from "@/utils/axios";
|
||||
import { useCurrency } from "@/app/contexts/currencyContext";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
function ProductDetails({ productId }) {
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [selectedSize, setSelectedSize] = useState(null);
|
||||
const [selectedDesign, setSelectedDesign] = useState(null);
|
||||
const [termsAccepted, setTermsAccepted] = useState(false);
|
||||
const { products, cartFn } = useContext(ProductContext);
|
||||
const { formatPrice, isLoading } = useCurrency();
|
||||
|
||||
const product = products?.find((pr) => pr.id == productId);
|
||||
React.useEffect(() => {
|
||||
if (product && product.variants?.length > 0) {
|
||||
setSelectedSize(product.variants[0]?.size?.size_name || "");
|
||||
setSelectedDesign(product.design_associations?.[0]?.design?.id || "");
|
||||
}
|
||||
}, [product]);
|
||||
|
||||
if (!product) return null;
|
||||
|
||||
const hasVariants = product.variants?.length > 0;
|
||||
const hasDesigns = product.design_associations?.length > 0;
|
||||
|
||||
const selectedVariant = hasVariants
|
||||
? product.variants.find((v) => v.size.size_name === selectedSize)
|
||||
: null;
|
||||
|
||||
const currentPrice = selectedVariant?.price || product.price || 0;
|
||||
const designPrice = hasDesigns
|
||||
? product.design_associations.find((d) => d.design.id === selectedDesign)
|
||||
?.design.design_price || 0
|
||||
: 0;
|
||||
|
||||
const totalPrice = currentPrice + designPrice;
|
||||
|
||||
return (
|
||||
<div className="max-w-xl p-6 space-y-6">
|
||||
<div className="flex justify-between items-start">
|
||||
<h1 className="text-2xl font-semibold">{product.product_name}</h1>
|
||||
</div>
|
||||
|
||||
{hasVariants ? (
|
||||
<div className="flex items-center">
|
||||
<span className="text-2xl text-[#C17A0F]">
|
||||
{isLoading ? (
|
||||
<span>Loading...</span>
|
||||
) : (
|
||||
<span>{formatPrice(totalPrice)}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="ml-2 text-sm">INR</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-2xl text-[#C17A0F]">Price on request</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
{hasVariants && (
|
||||
<div>
|
||||
<h3 className="text-sm mb-2">Select Size</h3>
|
||||
<div className="flex space-x-4">
|
||||
{product.variants.map((variant) => (
|
||||
<button
|
||||
key={variant.size.id}
|
||||
className={`px-4 py-2 border rounded ${
|
||||
selectedSize === variant.size.size_name
|
||||
? "border-[#C17A0F]"
|
||||
: "border-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedSize(variant.size.size_name)}
|
||||
>
|
||||
{variant.size.size_name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasDesigns && (
|
||||
<div>
|
||||
<h3 className="text-sm mb-2">Select Your Design</h3>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{product.design_associations.map((design) => (
|
||||
<button
|
||||
key={design.id}
|
||||
className={`p-2 border rounded text-center ${
|
||||
selectedDesign === design.design.id
|
||||
? "border-[#C17A0F]"
|
||||
: "border-gray-300"
|
||||
}`}
|
||||
onClick={() => setSelectedDesign(design.design.id)}
|
||||
>
|
||||
<div className="h-12 w-12 mx-auto mb-2 bg-gray-200">
|
||||
<Image
|
||||
src={`${backendUrl}${design.design.design_icon}`}
|
||||
alt={design.design.design_name}
|
||||
width={48}
|
||||
height={48}
|
||||
className="w-full h-full object-cover rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm">{design.design.design_name}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{isLoading ? (
|
||||
<span>Loading...</span>
|
||||
) : (
|
||||
<span>{formatPrice(design.design.design_price)}</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
{product?.product_category?.category_name && (
|
||||
<h3 className="text-sm mb-2">
|
||||
Category: {product.product_category.category_name}
|
||||
</h3>
|
||||
)}
|
||||
{product?.product_subcategory?.subcategory_name && (
|
||||
<p className="text-sm">
|
||||
Subcategory: {product.product_subcategory.subcategory_name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasVariants && (
|
||||
<>
|
||||
<div className="flex items-center justify-between border rounded-md p-2 w-32">
|
||||
<button
|
||||
onClick={() => setQuantity(Math.max(1, quantity - 1))}
|
||||
className="p-2"
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
</button>
|
||||
<span>{quantity}</span>
|
||||
<button
|
||||
onClick={() => setQuantity(quantity + 1)}
|
||||
className="p-2"
|
||||
disabled={quantity >= selectedVariant?.stock}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
Stock:{" "}
|
||||
{selectedVariant?.stock > 0 ? "available" : "Not Available"}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mr-2"
|
||||
checked={termsAccepted}
|
||||
onChange={(e) => setTermsAccepted(e.target.checked)}
|
||||
/>
|
||||
<span>I agree with the </span>
|
||||
<Link href="/policies/terms-of-services" className="text-blue-600">
|
||||
terms of services
|
||||
</Link>
|
||||
<span> and </span>
|
||||
<Link href="/policies/refund-policy" className="text-blue-600">
|
||||
return And Cancellation policy
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{hasVariants && selectedVariant?.stock > 0 ? (
|
||||
<button
|
||||
onClick={() => cartFn(selectedVariant.id, selectedDesign, quantity)}
|
||||
disabled={!termsAccepted}
|
||||
className={`w-full py-3 rounded-md ${
|
||||
termsAccepted
|
||||
? "bg-[#C17A0F] text-white cursor-pointer"
|
||||
: "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
}`}
|
||||
>
|
||||
ADD TO CART
|
||||
</button>
|
||||
) : (
|
||||
<button className="w-full bg-[#C17A0F] text-white py-3 rounded-md">
|
||||
REQUEST PRICE
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="mt-8 border-t pt-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Product Description</h2>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: product.description }}
|
||||
className="text-sm prose prose-sm max-w-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductDetails;
|
||||
Reference in New Issue
Block a user