);
};
export const ProductDetailPage: React.FC = ({
product,
allProducts,
onBack,
onSelectProduct,
onAddToCart,
onOrderWhatsAppDirect,
selectVariationNotice = false,
}) => {
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
const [quantity, setQuantity] = useState(1);
const [activeTab, setActiveTab] = useState<'desc' | 'specs' | 'reviews'>('desc');
const [addedSuccess, setAddedSuccess] = useState(false);
const [shareToast, setShareToast] = useState(null);
const [isWishlisted, setIsWishlisted] = useState(() =>
product ? isItemInWishlist(product.id) : false
);
useEffect(() => {
if (!product) return;
setIsWishlisted(isItemInWishlist(product.id));
const unsub = subscribeToWishlist(() => {
setIsWishlisted(isItemInWishlist(product.id));
});
return () => unsub();
}, [product]);
const handleToggleWishlist = () => {
if (!product) return;
const isNowWishlisted = toggleWishlist(product);
setIsWishlisted(isNowWishlisted);
};
// Review Form State
const [reviewsList, setReviewsList] = useState(() =>
product ? getApprovedReviewsForProduct(product.id, product.name) : []
);
const [isLoadingReviews, setIsLoadingReviews] = useState(true);
const [reviewRating, setReviewRating] = useState(5);
const [reviewName, setReviewName] = useState('');
const [reviewEmail, setReviewEmail] = useState('');
const [reviewComment, setReviewComment] = useState('');
const [reviewImages, setReviewImages] = useState([]);
const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
const [reviewSubmittedSuccess, setReviewSubmittedSuccess] = useState(false);
const [lightboxImage, setLightboxImage] = useState(null);
// Helper to upload custom photos directly to WordPress Media Library via REST API
const handlePhotoUpload = async (e: React.ChangeEvent) => {
const files = e.target.files;
if (!files || files.length === 0) return;
setIsUploadingPhoto(true);
const newUploadedUrls: string[] = [...reviewImages];
for (const file of Array.from(files) as File[]) {
if (newUploadedUrls.length >= 4) break;
try {
const wpImageUrl = await uploadReviewImageToWordPress(file);
newUploadedUrls.push(wpImageUrl);
} catch (err) {
console.error('Failed to upload review image to WordPress Media Library:', err);
}
}
setReviewImages(newUploadedUrls.slice(0, 4));
setIsUploadingPhoto(false);
};
// Record product in Recently Viewed history
useEffect(() => {
if (product) {
addRecentlyViewed(product);
}
}, [product?.id]);
// Subscribe to live Firebase Firestore updates for product reviews
useEffect(() => {
if (!product) return;
setIsLoadingReviews(true);
const unsubscribe = subscribeToReviews((allReviews) => {
const safeList = Array.isArray(allReviews) ? allReviews : [];
const approvedForProd = safeList.filter(
(r) => r && r.productId === product.id && r.status === 'approved'
);
if (approvedForProd.length > 0) {
setReviewsList(approvedForProd);
} else {
setReviewsList(getApprovedReviewsForProduct(product.id, product.name));
}
setIsLoadingReviews(false);
});
return () => unsubscribe();
}, [product?.id, product?.name]);
// Variations & Attributes state
const [variations, setVariations] = useState([]);
const [isLoadingVariations, setIsLoadingVariations] = useState(false);
const [selectedAttributes, setSelectedAttributes] = useState>({});
const [activeImageOverride, setActiveImageOverride] = useState(null);
// Dynamic OpenGraph Metadata setup for Social Sharing (WhatsApp, FB, Twitter)
useEffect(() => {
if (!product) return;
const currentOrigin = typeof window !== 'undefined' ? window.location.origin : 'https://timenlife.com';
const prodName = decodeHtmlEntities(product.name);
let prodImg = product.images?.[0]?.src || `${currentOrigin}/logo.png`;
if (prodImg.startsWith('//')) prodImg = 'https:' + prodImg;
const cleanDescText = stripHtmlTags(product.short_description || product.description || '');
const prodDesc = (cleanDescText || `${prodName} available at Time N Life Store with Cash on Delivery across Pakistan.`).slice(0, 200);
document.title = `${prodName} - Time N Life Store`;
// Helper to update or create meta tag
const setMetaTag = (attrName: 'property' | 'name', attrVal: string, content: string) => {
if (!content) return;
let element = document.querySelector(`meta[${attrName}="${attrVal}"]`) as HTMLMetaElement;
if (!element) {
element = document.createElement('meta');
element.setAttribute(attrName, attrVal);
document.head.appendChild(element);
}
element.setAttribute('content', content);
};
const prodSlug = getProductSlug(product);
const fullProdUrl = `${currentOrigin}/product/${encodeURIComponent(prodSlug)}`;
setMetaTag('property', 'og:type', 'product');
setMetaTag('property', 'og:site_name', 'Time N Life');
setMetaTag('property', 'og:title', prodName);
setMetaTag('property', 'og:image', prodImg);
setMetaTag('property', 'og:image:secure_url', prodImg);
setMetaTag('property', 'og:image:type', prodImg.endsWith('.png') ? 'image/png' : 'image/jpeg');
setMetaTag('property', 'og:description', prodDesc);
setMetaTag('property', 'og:url', fullProdUrl);
setMetaTag('name', 'twitter:card', 'summary_large_image');
setMetaTag('name', 'twitter:title', prodName);
setMetaTag('name', 'twitter:description', prodDesc);
setMetaTag('name', 'twitter:image', prodImg);
let canonical = document.querySelector("link[rel='canonical']") as HTMLLinkElement;
if (!canonical) {
canonical = document.createElement('link');
canonical.setAttribute('rel', 'canonical');
document.head.appendChild(canonical);
}
canonical.setAttribute('href', fullProdUrl);
}, [product]);
useEffect(() => {
if (!product) return;
let isMounted = true;
setIsLoadingVariations(true);
// Initial attributes set from product.attributes if present
const initialAttrs: Record = {};
if (product.attributes && product.attributes.length > 0) {
product.attributes.forEach((attr) => {
if (attr.options && attr.options.length > 0) {
initialAttrs[attr.name] = attr.options[0];
}
});
}
setSelectedAttributes(initialAttrs);
getWCProductVariations(product.id).then((vars) => {
if (!isMounted) return;
setVariations(vars);
setIsLoadingVariations(false);
// Extract unique attribute options from loaded variations if parent attributes were empty
if (vars.length > 0) {
const attrMap: Record> = {};
vars.forEach((v) => {
v.attributes.forEach((a) => {
if (!attrMap[a.name]) attrMap[a.name] = new Set();
if (a.option) attrMap[a.name].add(decodeHtmlEntities(a.option));
});
});
setSelectedAttributes((prev) => {
const updated = { ...prev };
Object.keys(attrMap).forEach((name) => {
if (!updated[name]) {
const opts = Array.from(attrMap[name]);
if (opts.length > 0) updated[name] = opts[0];
}
});
return updated;
});
}
});
return () => {
isMounted = false;
};
}, [product?.id]);
// Find matching active variation
const activeVariation = useMemo(() => {
if (variations.length === 0) return null;
return variations.find((v) => {
return v.attributes.every((a) => {
const selectedVal = selectedAttributes[a.name] || selectedAttributes[a.name.toLowerCase()];
if (!selectedVal) return true;
return decodeHtmlEntities(a.option).toLowerCase() === selectedVal.toLowerCase();
});
});
}, [variations, selectedAttributes]);
// Consolidate attributes list (from product.attributes OR variations)
const availableAttributes = useMemo(() => {
if (!product) return [];
if (product.attributes && product.attributes.length > 0) {
return product.attributes.map((a) => ({
name: a.name,
options: a.options.map((opt) => decodeHtmlEntities(opt)),
}));
}
if (variations.length > 0) {
const map: Record> = {};
variations.forEach((v) => {
v.attributes.forEach((a) => {
if (!map[a.name]) map[a.name] = new Set();
if (a.option) map[a.name].add(decodeHtmlEntities(a.option));
});
});
return Object.keys(map).map((name) => ({
name,
options: Array.from(map[name]),
}));
}
return [];
}, [product, variations]);
if (!product) {
return ;
}
// Dynamic average rating and actual review count
const { averageRating: effAvgRating, ratingCount: effRatingCount } = useMemo(() => {
return getEffectiveProductRating(product);
}, [product]);
const calculatedAvgRating = useMemo(() => {
if (reviewsList.length > 0) {
const sum = reviewsList.reduce((acc, r) => acc + r.rating, 0);
return (sum / reviewsList.length).toFixed(1);
}
return effAvgRating;
}, [reviewsList, effAvgRating]);
// Derive active prices, sku, image, and stock status
const rawReg = parseFloat(product.regular_price || '0');
const rawSale = parseFloat(product.sale_price || '0');
const rawPrice = parseFloat(product.price || '0');
let baseCurrentPrice = rawPrice > 0 ? rawPrice : (rawSale > 0 ? rawSale : rawReg);
if (rawSale > 0 && rawSale < baseCurrentPrice) {
baseCurrentPrice = rawSale;
}
let baseOriginalPrice = rawReg > 0 ? rawReg : 0;
if (baseOriginalPrice <= baseCurrentPrice) {
if (rawReg > baseCurrentPrice) baseOriginalPrice = rawReg;
else if (rawPrice > baseCurrentPrice) baseOriginalPrice = rawPrice;
}
const isWooOnSale = product.on_sale || (rawSale > 0 && rawSale < rawReg) || (rawReg > rawPrice && rawPrice > 0);
if ((isWooOnSale || baseOriginalPrice <= baseCurrentPrice) && (product.on_sale || rawSale > 0 || product.name.toLowerCase().includes('orient') || product.name.toLowerCase().includes('lawn'))) {
if (baseOriginalPrice <= baseCurrentPrice && baseCurrentPrice > 0) {
baseOriginalPrice = Math.round((baseCurrentPrice * 1.53125) / 50) * 50;
}
}
let regularPrice = activeVariation
? parseFloat(activeVariation.regular_price || activeVariation.price || '0')
: baseOriginalPrice;
let salePrice = activeVariation
? parseFloat(activeVariation.sale_price || activeVariation.price || '0')
: baseCurrentPrice;
if (regularPrice <= salePrice && salePrice > 0) {
regularPrice = Math.round((salePrice * 1.53125) / 50) * 50;
}
const isOnSale = (regularPrice > salePrice && salePrice > 0) || isWooOnSale;
const currentPrice = salePrice > 0 ? salePrice : regularPrice;
const discountPercent = isOnSale && regularPrice > currentPrice
? Math.round(((regularPrice - currentPrice) / regularPrice) * 100)
: 35;
const activeSku = activeVariation?.sku || product.sku || 'TNL-STD';
const activeStock = activeVariation?.stock_status || product.stock_status || 'instock';
// Extract embedded images from product.description HTML
const extractedDescImages = useMemo(() => {
if (!product.description) return [];
const regex = /]+src=["']([^"']+)["']/gi;
const urls: string[] = [];
let match;
while ((match = regex.exec(product.description)) !== null) {
if (match[1] && !urls.includes(match[1])) {
urls.push(match[1]);
}
}
return urls;
}, [product.description]);
// Combine product.images and extracted description images for complete thumbnail gallery
const images = useMemo(() => {
const list: Array<{ src: string; alt?: string; name?: string }> = product.images && product.images.length > 0 ? [...product.images] : [];
const existingSrcs = new Set(list.map((img) => img.src));
extractedDescImages.forEach((src) => {
if (!existingSrcs.has(src)) {
list.push({ src, alt: product.name });
existingSrcs.add(src);
}
});
if (list.length === 0) {
list.push({ src: 'https://timenlife.shop/wp-content/uploads/2023/logo.png', alt: product.name });
}
return list;
}, [product.images, extractedDescImages, product.name]);
// Lightbox Modal state for description images
const [lightboxIndex, setLightboxIndex] = useState(null);
// Dedicated description images gallery (extracts all high-res description and product images)
const descGalleryImages = useMemo(() => {
const set = new Set();
extractedDescImages.forEach((img) => set.add(img));
if (product.images) {
product.images.forEach((i) => {
if (i.src) set.add(i.src);
});
}
return Array.from(set);
}, [extractedDescImages, product.images]);
// Clean description HTML to strip inline img tags so description text is clean and images appear in the 2-column gallery grid below
const cleanedDescription = useMemo(() => {
const raw = product.description || `
The ${product.name} offers superior style and functionality. Engineered for reliability and elegance, it is one of the most sought-after products in the Time N Life online collection.
{product.short_description ? stripHtmlTags(product.short_description) :
'High quality, durable design sourced specifically for Time N Life. Guaranteed authentic with express delivery across Pakistan.'}
{/* Variation Select First Notice Alert */}
{selectVariationNotice && (
Please Select Option First!
This product has variations available (e.g. Size, Color, or Style). Please select your required option below before adding to cart.
