260 lines
9.1 KiB
JavaScript
260 lines
9.1 KiB
JavaScript
"use client";
|
|
import React, { useContext, useState } from "react";
|
|
import { Plus, Minus, FileText } from "lucide-react"; // Added FileText icon
|
|
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 [showCertificate, setShowCertificate] = 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 hasCertificate = product.certificate && product.certificate !== "NA";
|
|
|
|
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;
|
|
|
|
const handleViewCertificate = () => {
|
|
setShowCertificate(true);
|
|
// If it's a PDF, open in a new tab
|
|
if (product.certificate.toLowerCase().endsWith('.pdf')) {
|
|
window.open(`${backendUrl}${product.certificate}`, '_blank');
|
|
setShowCertificate(false);
|
|
}
|
|
};
|
|
|
|
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>
|
|
</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>
|
|
|
|
{hasCertificate && (
|
|
<div className="mt-4">
|
|
<button
|
|
onClick={handleViewCertificate}
|
|
className="flex items-center text-blue-600 hover:text-blue-800"
|
|
>
|
|
<FileText className="w-4 h-4 mr-2" />
|
|
View Certificate
|
|
</button>
|
|
</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 className="mt-8 border-t pt-6 block md:hidden">
|
|
<h2 className="text-xl font-semibold mb-4">Beej Mantra</h2>
|
|
<div
|
|
dangerouslySetInnerHTML={{ __html: product.beej_mantra }}
|
|
className="text-sm prose prose-sm max-w-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{showCertificate && !product.certificate.toLowerCase().endsWith('.pdf') && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white p-4 rounded-lg max-w-4xl max-h-[90vh] overflow-auto">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-xl font-semibold">Product Certificate</h3>
|
|
<button
|
|
onClick={() => setShowCertificate(false)}
|
|
className="text-gray-500 hover:text-gray-700"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<img
|
|
src={`${backendUrl}${product.certificate}`}
|
|
alt="Product Certificate"
|
|
className="max-w-full max-h-[70vh] object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProductDetails;
|