tee3apps-cms-sdk-react 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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

@@ -3,6 +3,83 @@ import ProductListViewOne from '../Visual-Components/Styles/ProductListViewOne';
 import ProductListViewTwo from '../Visual-Components/Styles/ProductListViewTwo';
 import { Linodeurl } from '../../const';
 
+// Utility function to extract price value from different formats
+const getPriceValue = (price: any): number => {
+  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;
+};
+
+// Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
+const getPriceFromPricingArray = (pricingArray: any[]): number => {
+  if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
+  
+  // First, try to find the default price with default currency
+  const defaultPrice = pricingArray.find(
+    (item: any) => item.isDefault === true && item.isDefaultCurrency === true
+  );
+  
+  if (defaultPrice && defaultPrice.price) {
+    return getPriceValue(defaultPrice.price);
+  }
+  
+  // Fallback: find any default price
+  const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
+  if (anyDefault && anyDefault.price) {
+    return getPriceValue(anyDefault.price);
+  }
+  
+  // Fallback: use first item
+  if (pricingArray[0] && pricingArray[0].price) {
+    return getPriceValue(pricingArray[0].price);
+  }
+  
+  return 0;
+};
+
+// Utility function to get MRP and Selling Price from product pricing object
+const getProductPrices = (product: any) => {
+  // Use pricing object first, fallback to price for backward compatibility
+  const mrp = product.pricing?.mrp ? getPriceFromPricingArray(product.pricing.mrp) : 0;
+  const sellingPrice = product.pricing?.nlcPrice 
+    ? getPriceFromPricingArray(product.pricing.nlcPrice) 
+    : product.pricing?.costPrice 
+    ? getPriceFromPricingArray(product.pricing.costPrice) 
+    : 0;
+  
+  // Fallback to old price structure if pricing is not available
+  const fallbackMRP = product.price?.MRP 
+    ? getPriceValue(product.price.MRP) 
+    : 0;
+  const fallbackSP = product.price?.SP 
+    ? getPriceValue(product.price.SP) 
+    : 0;
+  
+  return {
+    mrp: mrp || fallbackMRP,
+    sellingPrice: sellingPrice || fallbackSP
+  };
+};
+
 
 interface Product {
   _id: string;
@@ -127,7 +204,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
   };
 
   const products = getProducts();
-
+  
   // Helper function to render product based on style
   const renderProduct = (product: Product, key: string) => {
     if (currentstyle === 'STYLE1') {
@@ -207,9 +284,14 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
                 }}
               >
                 {typeof product.name === 'object' ? product.name.all : product.name}
-                <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
-                  {product?.price?.SP?.$numberDecimal}
-                </h1>
+                {(() => {
+                  const prices = getProductPrices(product);
+                  return prices.sellingPrice > 0 ? (
+                    <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
+                      ₹{prices.sellingPrice.toLocaleString("en-IN")}
+                    </h1>
+                  ) : null;
+                })()}
               </div>
             )}
           </div>

package/src/PageComponents/Visual-Components/Styles/ProductListViewOne.tsx

@@ -2,6 +2,59 @@ import React from "react";
 import "./product-list-view-one.css";
 import { Linodeurl } from '../../../const';
 
+// Utility function to extract price value from different formats
+const getPriceValue = (price: any): number => {
+  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;
+};
+
+// Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
+const getPriceFromPricingArray = (pricingArray: any[]): number => {
+  if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
+  
+  // First, try to find the default price with default currency
+  const defaultPrice = pricingArray.find(
+    (item: any) => item.isDefault === true && item.isDefaultCurrency === true
+  );
+  
+  if (defaultPrice && defaultPrice.price) {
+    return getPriceValue(defaultPrice.price);
+  }
+  
+  // Fallback: find any default price
+  const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
+  if (anyDefault && anyDefault.price) {
+    return getPriceValue(anyDefault.price);
+  }
+  
+  // Fallback: use first item
+  if (pricingArray[0] && pricingArray[0].price) {
+    return getPriceValue(pricingArray[0].price);
+  }
+  
+  return 0;
+};
+
 const ProductListViewOne = (props: any) => {
   const [target, setTarget] = React.useState("_blank");
   console.warn(props)
@@ -23,13 +76,21 @@ const ProductListViewOne = (props: any) => {
   const data = props.props || props;
   const slug = data?.code; // Using code instead of slug
 
-  // Updated price extraction to match your JSON structure
-  const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
-  const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
+  // Updated price extraction to use pricing object
+  const mrp = data.pricing?.mrp ? getPriceFromPricingArray(data.pricing.mrp) : 0;
+  const sellingPrice = data.pricing?.nlcPrice 
+    ? getPriceFromPricingArray(data.pricing.nlcPrice) 
+    : data.pricing?.costPrice 
+    ? getPriceFromPricingArray(data.pricing.costPrice) 
+    : 0;
+  
+  // Fallback to old price structure if pricing is not available
+  const mrpPrice = mrp || (data.price?.MRP ? getPriceValue(data.price.MRP) : 0);
+  const finalSellingPrice = sellingPrice || (data.price?.SP ? getPriceValue(data.price.SP) : 0);
 
   const calculateDiscount = (): number | null => {
-    if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
-    return Math.round(100 - (sellingPrice / mrpPrice) * 100);
+    if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
+    return Math.round(100 - (finalSellingPrice / mrpPrice) * 100);
   };
 
   const discount = calculateDiscount();
@@ -62,11 +123,11 @@ const ProductListViewOne = (props: any) => {
             <h5>{variantOptions}</h5>
             </div>
             <div className="card_value">
-              {sellingPrice !== 0 && (
+              {finalSellingPrice !== 0 && (
                 <div className="card_price">
-                  <h4>₹{sellingPrice.toLocaleString("en-IN")}</h4>
+                  <h4>₹{finalSellingPrice.toLocaleString("en-IN")}</h4>
                   <div className="card_right_grid">
-                    {mrpPrice > sellingPrice && (
+                    {mrpPrice > finalSellingPrice && (
                       <p >₹{mrpPrice.toLocaleString("en-IN")}</p>
                     )}
                     {discount !== null && discount > 0 && (

package/src/PageComponents/Visual-Components/Styles/ProductListViewTwo.tsx

@@ -2,6 +2,59 @@ import React from "react";
 import "./product-list-view-two.css";
 import { Linodeurl } from '../../../const';
 
+// Utility function to extract price value from different formats
+const getPriceValue = (price: any): number => {
+  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;
+};
+
+// Utility function to get price from pricing array (mrp, costPrice, nlcPrice)
+const getPriceFromPricingArray = (pricingArray: any[]): number => {
+  if (!Array.isArray(pricingArray) || pricingArray.length === 0) return 0;
+  
+  // First, try to find the default price with default currency
+  const defaultPrice = pricingArray.find(
+    (item: any) => item.isDefault === true && item.isDefaultCurrency === true
+  );
+  
+  if (defaultPrice && defaultPrice.price) {
+    return getPriceValue(defaultPrice.price);
+  }
+  
+  // Fallback: find any default price
+  const anyDefault = pricingArray.find((item: any) => item.isDefault === true);
+  if (anyDefault && anyDefault.price) {
+    return getPriceValue(anyDefault.price);
+  }
+  
+  // Fallback: use first item
+  if (pricingArray[0] && pricingArray[0].price) {
+    return getPriceValue(pricingArray[0].price);
+  }
+  
+  return 0;
+};
+
 const ProductListViewTwo = (props: any) => {
   console.warn(props);
   const [target, setTarget] = React.useState("_blank");
@@ -24,13 +77,21 @@ const ProductListViewTwo = (props: any) => {
   const data = props.props || props;
   const slug = data?.code; // Using code instead of slug since slug doesn't exist in your data
 
-  // Updated price extraction to match your JSON structure
-  const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
-  const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
+  // Updated price extraction to use pricing object
+  const mrp = data.pricing?.mrp ? getPriceFromPricingArray(data.pricing.mrp) : 0;
+  const sellingPrice = data.pricing?.nlcPrice 
+    ? getPriceFromPricingArray(data.pricing.nlcPrice) 
+    : data.pricing?.costPrice 
+    ? getPriceFromPricingArray(data.pricing.costPrice) 
+    : 0;
+  
+  // Fallback to old price structure if pricing is not available
+  const mrpPrice = mrp || (data.price?.MRP ? getPriceValue(data.price.MRP) : 0);
+  const finalSellingPrice = sellingPrice || (data.price?.SP ? getPriceValue(data.price.SP) : 0);
 
   const calculateDiscount = () => {
-    if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
-    return Math.round(100 - (sellingPrice / mrpPrice) * 100);
+    if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
+    return Math.round(100 - (finalSellingPrice / mrpPrice) * 100);
   };
 
   const discount = calculateDiscount();
@@ -66,16 +127,16 @@ const ProductListViewTwo = (props: any) => {
           </div>
           <div className="card_bottom">
             <div className="price_container">
-              {sellingPrice !== 0 && (
+              {finalSellingPrice !== 0 && (
                 <>
                   <div className="price_row">
-                    <h4 className="selling_price">₹{sellingPrice.toLocaleString("en-IN")}</h4>
+                    <h4 className="selling_price">₹{finalSellingPrice.toLocaleString("en-IN")}</h4>
                     {discount !== null && discount > 0 && (
                       <span className="discounts">{discount}% OFF</span>
                     )}
                   </div>
-                  {mrpPrice > sellingPrice && (
-                    <p className="save_amount">Save ₹{(mrpPrice - sellingPrice).toLocaleString("en-IN")}</p>
+                  {mrpPrice > finalSellingPrice && (
+                    <p className="save_amount">Save ₹{(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
                   )}
                 </>
               )}

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={{