tee3apps-cms-sdk-react 0.0.14 → 0.0.16

package/src/PageComponents/Visual-Components/TabComponent.tsx

@@ -49,7 +49,19 @@ interface TabContentGroup {
 	dynamicImages?: any[];
 	dynamicVideos?: any[];
 	dynamicProducts?: any[];
+	staticImages?: any[];
+	staticVideos?: any[];
+	staticProducts?: any[];
 	showItems?: Product[];
+	dynamic?: {
+		conditions: any[];
+		query: string;
+		list: any[];
+		pagination: number;
+	};
+	dynamicQueries?: {
+		selectedVariants: any[];
+	};
 }
 
 interface TabMode {
@@ -97,10 +109,6 @@ interface HeaderStyle {
 	activeColorText: string;
 }
 
-interface TabsData {
-	all: TabItem[];
-}
-
 export interface TabComponentProps {
 	name: string;
 	code: string;
@@ -109,7 +117,7 @@ export interface TabComponentProps {
 	showTitle: boolean;
 	title: TitleStyle;
 	header: HeaderStyle;
-	tabs: TabsData[];
+	tabs: TabItem[];
 }
 
 interface TabComponentMainProps {
@@ -157,27 +165,51 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 	const getImageUrl = (url: string) => {
 		if (!url) return '';
 		if (url.startsWith('http://') || url.startsWith('https://')) return url;
-		return `${Linodeurl}${url}`;
+		// Ensure URL has leading slash if Linodeurl doesn't end with one
+		const cleanUrl = url.startsWith('/') ? url : `/${url}`;
+		const baseUrl = Linodeurl.endsWith('/') ? Linodeurl.slice(0, -1) : Linodeurl;
+		return `${baseUrl}${cleanUrl}`;
+	};
+
+	// Helper function to extract numeric value from price in any format
+	const getPriceValue = (price: any): number => {
+		console.error(price,"price-----")
+		if (price === null || price === undefined) return 0;
+		
+		// If it's already a number
+		if (typeof price === 'number') {
+			return isNaN(price) ? 0 : price;
+		}
+		
+		// If it's an object with $numberDecimal (but not an array)
+		if (typeof price === 'object' && price !== null && !Array.isArray(price)) {
+			if (price.$numberDecimal !== undefined && price.$numberDecimal !== null) {
+				const value = parseFloat(String(price.$numberDecimal));
+				return isNaN(value) ? 0 : value;
+			}
+		}
+		
+		// If it's a string, try to parse it
+		if (typeof price === 'string') {
+			const value = parseFloat(price);
+			return isNaN(value) ? 0 : value;
+		}
+		
+		return 0;
 	};
 
 	// Inline Product Card Component
 	const ProductCard: React.FC<{ product: any; layout?: string }> = ({ product, layout = '1x1' }) => {
 		const formatPrice = (price: any) => {
-			if (typeof price === 'object' && price.$numberDecimal) {
-				return parseFloat(price.$numberDecimal).toLocaleString('en-IN', {
-					style: 'currency',
-					currency: 'INR',
-					minimumFractionDigits: 0,
-					maximumFractionDigits: 0
-				});
-			}
-			return price;
+			const priceValue = getPriceValue(price);
+			if (priceValue === 0 && !price) return '0';
+			return priceValue
 		};
 
 		const calculateOffer = (mrp: any, sp: any) => {
-			const mrpValue = parseFloat(mrp.$numberDecimal || mrp);
-			const spValue = parseFloat(sp.$numberDecimal || sp);
-			if (mrpValue > spValue) {
+			const mrpValue = getPriceValue(mrp);
+			const spValue = getPriceValue(sp);
+			if (mrpValue > spValue && mrpValue > 0) {
 				const discount = ((mrpValue - spValue) / mrpValue) * 100;
 				return Math.round(discount);
 			}
@@ -204,22 +236,39 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			return variant.valueId?.name?.all || variant.valueId?.name || '';
 		};
 
-		const mrp = product.price?.MRP;
-		const sp = product.price?.SP;
+		// Use pricing object first, fallback to price for backward compatibility
+		const mrp = product.pricing?.mrp ;
+		console.error(mrp,product,"mrp-----")
+		const sp = product.pricing?.costPrice;
+		console.error(sp,"sp-----")
 		const offer = calculateOffer(mrp, sp);
 
 		const cardMode = layout === '1x1' ? 'carousel-mode' : layout === '2x1' ? 'layout-2x1' : 'grid-mode';	
 		const productSlug = product.code;
 		const productLink = `/${productSlug}`;
 		
+		// Get product image URL - try multiple possible locations
+		const getProductImageUrl = () => {
+			return product.image?.all?.url || 
+				   product.image?.url || 
+				   product.model?.image?.url || 
+				   product.model?.image?.all?.url || 
+				   '';
+		};
+
 		const cardContent = (
 			<>
 				{/* Product Image */}
 				<div className="product-image-container">
 					<img
-						src={getImageUrl(product.image?.all?.url || product.model?.image?.url)}
-						alt={product.name?.all || product.name?.displayName}
+						src={getImageUrl(getProductImageUrl())}
+						alt={product.name?.all || product.name?.displayName || 'Product image'}
 						className="product-image"
+						onError={(e) => {
+							// Fallback if image fails to load
+							const target = e.target as HTMLImageElement;
+							target.style.display = 'none';
+						}}
 					/>
 				</div>
 
@@ -266,10 +315,10 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 					<div className="product-pricing">
 						<div className="price-row">
 							<span className="current-price">{formatPrice(sp)}</span>
-							{mrp && sp && parseFloat(mrp.$numberDecimal || mrp) > parseFloat(sp.$numberDecimal || sp) && (
+							{mrp && sp && offer > 0 && (
 								<>
 									<span className="original-price">{formatPrice(mrp)}</span>
-									{offer > 0 && <span className="offer-badge">{offer}% OFF</span>}
+									<span className="offer-badge">{offer}% OFF</span>
 								</>
 							)}
 						</div>
@@ -432,28 +481,56 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 		switch (tab.tabContentType) {
 			case 'IMAGE':
-				if (tab.tabContentImage) {
-				  console.warn(tab.tabContentImage, buildLinkForSlide(tab.tabContentImage));
-					return (
-					<a
-					  href={buildLinkForSlide(tab.tabContentImage) || undefined}
-					  target={
-						tab.tabContentImage.link_type === 'external_link'
-						  ? tab.tabContentImage.external_link?.target
-						  : '_blank'
-					  }
-					>
-					  <div style={contentStyle}>
-						<div className="media-box">
-								<img
-									src={getImageUrl(tab.tabContentImage.image.url)}
-									alt={tab.tabContentImage.image.alt}
-							 className="media-content"
-								/>
-							</div>
+				if (tab.tabContentImage && tab.tabContentImage.image) {
+				  const imageUrl = tab.tabContentImage.image.url;
+				  const imageAlt = tab.tabContentImage.image.alt || 'Image';
+				  const fullImageUrl = getImageUrl(imageUrl);
+				  const linkUrl = buildLinkForSlide(tab.tabContentImage);
+				  const linkTarget = tab.tabContentImage.link_type === 'EXTERNALLINK'
+					? tab.tabContentImage.external_link?.target || '_blank'
+					: '_blank';
+				  
+				  // Debug: Log image URL construction
+				  if (!fullImageUrl) {
+					console.warn('Image URL is empty. Original URL:', imageUrl);
+				  }
+				  
+				  const imageElement = (
+					<div style={contentStyle}>
+						<div className="media-box" style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+							<img
+								src={fullImageUrl}
+								alt={imageAlt}
+								className="media-content"
+								style={{
+									width: '100%',
+									height: '100%',
+									objectFit: 'cover',
+									display: 'block'
+								}}
+								onError={(e) => {
+									const target = e.target as HTMLImageElement;
+									console.error('Image failed to load. URL:', fullImageUrl, 'Original:', imageUrl);
+									target.style.display = 'none';
+								}}
+							/>
 						</div>
+					</div>
+				  );
+				  
+				  if (linkUrl) {
+					return (
+						<a
+							href={linkUrl}
+							target={linkTarget}
+							style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}
+						>
+							{imageElement}
 						</a>
 					);
+				  }
+				  
+				  return imageElement;
 				}
 				break;
 			case 'VIDEO':
@@ -478,7 +555,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  // Handle both DYNAMIC and STATIC types
 						  const images = tab.tabContentGroupImage.type === 'DYNAMIC' 
 							? tab.tabContentGroupImage.dynamicImages 
-							: tab.tabContentGroupImage.showItems;
+							: (tab.tabContentGroupImage.staticImages || tab.tabContentGroupImage.showItems);
 							
 						  if (!images || images.length === 0) {
 							return <div>No images available</div>;
@@ -642,6 +719,19 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  const displayImages = displayIndices.map(idx => images[idx]);
 						  const needsCarousel = images.length > itemsPerView;
 						  
+						  // Navigation handlers specific to this layout
+						  const handleNextImage = () => {
+							if (carouselIndex < maxCarouselIndex) {
+							  setCarouselIndex((prev) => Math.min(prev + 1, maxCarouselIndex));
+							}
+						  };
+						  
+						  const handlePrevImage = () => {
+							if (carouselIndex > 0) {
+							  setCarouselIndex((prev) => Math.max(prev - 1, 0));
+							}
+						  };
+						  
 						  // Create dynamic content style for GROUPIMAGE
 						  const groupImageContentStyle = {
 							display: 'grid',
@@ -653,7 +743,17 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  };
 						  
 						  return (
-							<div style={{ position: 'relative', width: '100%' }}>
+							<div
+							  style={{
+								position: 'relative',
+								width: '100%',
+								height: 'auto',
+								overflow: 'hidden',
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							  }}
+							>
 							  <div style={groupImageContentStyle} className='media-box'>
 								{displayImages.map((image, displayIndex) => {
 								  const originalIndex = displayIndices[displayIndex];
@@ -702,7 +802,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								<>
 								  {/* Previous Button */}
 								  <button
-									onClick={prevCarouselItem}
+									onClick={handlePrevImage}
 									disabled={carouselIndex === 0}
 									style={{
 									  position: 'absolute',
@@ -729,7 +829,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 								  {/* Next Button */}
 								  <button
-									onClick={nextCarouselItem}
+									onClick={handleNextImage}
 									disabled={carouselIndex >= maxCarouselIndex}
 									style={{
 									  position: 'absolute',
@@ -795,7 +895,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  // Handle both DYNAMIC and STATIC types
 							  const videos = tab.tabContentGroupVideo.type === 'DYNAMIC' 
 								? tab.tabContentGroupVideo.dynamicVideos 
-								: tab.tabContentGroupVideo.showItems;
+								: (tab.tabContentGroupVideo.staticVideos || tab.tabContentGroupVideo.showItems);
 								
 							  if (!videos || videos.length === 0) {
 								return <div>No videos available</div>;
@@ -964,6 +1064,19 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  const displayVideos = displayIndices.map(idx => videos[idx]);
 						  const needsCarousel = videos.length > itemsPerView;
 						  
+						  // Navigation handlers specific to this layout
+						  const handleNextVideo = () => {
+							if (carouselIndex < maxCarouselIndex) {
+							  setCarouselIndex((prev) => Math.min(prev + 1, maxCarouselIndex));
+							}
+						  };
+						  
+						  const handlePrevVideo = () => {
+							if (carouselIndex > 0) {
+							  setCarouselIndex((prev) => Math.max(prev - 1, 0));
+							}
+						  };
+						  
 						  // Create dynamic content style for GROUPVIDEO
 						  const groupVideoContentStyle = {
 							display: 'grid',
@@ -975,7 +1088,17 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						  };
 						  
 						  return (
-							<div style={{ position: 'relative', width: '100%' }}>
+							<div
+							  style={{
+								position: 'relative',
+								width: '100%',
+								height: 'auto',
+								overflow: 'hidden',
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'center',
+							  }}
+							>
 							  <div style={groupVideoContentStyle} className='media-box'>
 								{displayVideos.map((video, displayIndex) => {
 								  const originalIndex = displayIndices[displayIndex];
@@ -1027,7 +1150,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								<>
 								  {/* Previous Button */}
 								  <button
-									onClick={prevCarouselItem}
+									onClick={handlePrevVideo}
 									disabled={carouselIndex === 0}
 									style={{
 									  position: 'absolute',
@@ -1054,7 +1177,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 								  {/* Next Button */}
 								  <button
-									onClick={nextCarouselItem}
+									onClick={handleNextVideo}
 									disabled={carouselIndex >= maxCarouselIndex}
 									style={{
 									  position: 'absolute',
@@ -1116,8 +1239,15 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						break;
 					  
 						case 'GROUPPRODUCT':
-							if (tab.tabContentGroupProduct && tab.tabContentGroupProduct.showItems) {
-							  const products = tab.tabContentGroupProduct.showItems;
+							if (tab.tabContentGroupProduct) {
+							  // Handle both DYNAMIC and STATIC types
+							  const products = tab.tabContentGroupProduct.type === 'DYNAMIC' 
+								? tab.tabContentGroupProduct.dynamicProducts 
+								: ( tab.tabContentGroupProduct.showItems || []);
+							  
+							  if (!products || products.length === 0) {
+								return <div>No products available</div>;
+							  }
 						  
 							  // 1x1 layout: Carousel view
 							  if (layout === '1x1') {
@@ -1254,6 +1384,40 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  const displayProducts = displayIndices.map(idx => products[idx]);
 							  const needsCarousel = products.length > itemsPerView;
 							  
+							  // Debug logging
+							  console.log('GROUPPRODUCT Grid Layout:', {
+								layout,
+								totalProducts: products.length,
+								itemsPerView,
+								carouselIndex,
+								maxCarouselIndex,
+								displayIndices,
+								needsCarousel
+							  });
+							  
+							  // Navigation handlers specific to this layout
+							  const handleNextProduct = () => {
+								console.log('Next clicked, current:', carouselIndex, 'max:', maxCarouselIndex);
+								if (carouselIndex < maxCarouselIndex) {
+								  setCarouselIndex((prev) => {
+									const next = Math.min(prev + 1, maxCarouselIndex);
+									console.log('Setting carousel index to:', next);
+									return next;
+								  });
+								}
+							  };
+							  
+							  const handlePrevProduct = () => {
+								console.log('Prev clicked, current:', carouselIndex);
+								if (carouselIndex > 0) {
+								  setCarouselIndex((prev) => {
+									const next = Math.max(prev - 1, 0);
+									console.log('Setting carousel index to:', next);
+									return next;
+								  });
+								}
+							  };
+							  
 							  // Create dynamic content style for GROUPPRODUCT
 							  const groupProductContentStyle = {
 								display: 'grid',
@@ -1267,7 +1431,17 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							  };
 							  
 							  return (
-								<div style={{ position: 'relative', width: '100%' }}>
+								<div
+								  style={{
+									position: 'relative',
+									width: '100%',
+									height: 'auto',
+									overflow: 'hidden',
+									display: 'flex',
+									alignItems: 'center',
+									justifyContent: 'center',
+								  }}
+								>
 								  <div style={groupProductContentStyle}>
 									{displayProducts.map((product, displayIndex) => {
 									  const originalIndex = displayIndices[displayIndex];
@@ -1294,14 +1468,18 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									<>
 									  {/* Previous Button */}
 									  <button
-										onClick={prevCarouselItem}
+										onClick={(e) => {
+										  e.preventDefault();
+										  e.stopPropagation();
+										  handlePrevProduct();
+										}}
 										disabled={carouselIndex === 0}
 										style={{
 										  position: 'absolute',
 										  left: '10px',
 										  top: '50%',
 										  transform: 'translateY(-50%)',
-										  background: 'rgba(0,0,0,0.5)',
+										  background: carouselIndex === 0 ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.7)',
 										  color: 'white',
 										  border: 'none',
 										  borderRadius: '50%',
@@ -1312,8 +1490,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  display: 'flex',
 										  alignItems: 'center',
 										  justifyContent: 'center',
-										  fontSize: '18px',
-										  zIndex: 10,
+										  fontSize: '24px',
+										  fontWeight: 'bold',
+										  zIndex: 100,
+										  pointerEvents: 'auto',
+										  transition: 'all 0.3s ease',
 										}}
 									  >
 										‹
@@ -1321,14 +1502,18 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 									  {/* Next Button */}
 									  <button
-										onClick={nextCarouselItem}
+										onClick={(e) => {
+										  e.preventDefault();
+										  e.stopPropagation();
+										  handleNextProduct();
+										}}
 										disabled={carouselIndex >= maxCarouselIndex}
 										style={{
 										  position: 'absolute',
 										  right: '10px',
 										  top: '50%',
 										  transform: 'translateY(-50%)',
-										  background: 'rgba(0,0,0,0.5)',
+										  background: carouselIndex >= maxCarouselIndex ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.7)',
 										  color: 'white',
 										  border: 'none',
 										  borderRadius: '50%',
@@ -1339,8 +1524,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  display: 'flex',
 										  alignItems: 'center',
 										  justifyContent: 'center',
-										  fontSize: '18px',
-										  zIndex: 10,
+										  fontSize: '24px',
+										  fontWeight: 'bold',
+										  zIndex: 100,
+										  pointerEvents: 'auto',
+										  transition: 'all 0.3s ease',
 										}}
 									  >
 										›
@@ -1355,21 +1543,27 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 										  transform: 'translateX(-50%)',
 										  display: 'flex',
 										  gap: '8px',
-										  zIndex: 10,
+										  zIndex: 100,
+										  pointerEvents: 'auto',
 										}}
 									  >
 										{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
 										  <button
 											key={index}
-											onClick={() => goToCarouselItem(index)}
+											onClick={(e) => {
+											  e.preventDefault();
+											  e.stopPropagation();
+											  goToCarouselItem(index);
+											}}
 											style={{
 											  width: index === carouselIndex ? '12px' : '8px',
 											  height: index === carouselIndex ? '12px' : '8px',
 											  borderRadius: '50%',
-											  border: 'none',
-											  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+											  border: '2px solid white',
+											  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.6)',
 											  cursor: 'pointer',
 											  transition: 'all 0.3s ease',
+											  pointerEvents: 'auto',
 											}}
 										  />
 										))}
@@ -1398,7 +1592,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		return null;
 	};
 
-	const tabs = props.tabs[0]?.all || [];
+	const tabs = props.tabs || [];
 
 	return (
 		<div style={{