tee3apps-cms-sdk-react 0.0.15 → 0.0.17

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>;
@@ -818,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>;
@@ -1162,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') {
@@ -1508,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={{