tee3apps-cms-sdk-react 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "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/CarouselComponent.tsx

@@ -460,7 +460,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
             alignItems: 'center',
             flexDirection: props.vertical ? 'column' : 'row',
             gap: '8px',
-            zIndex: 100
+            zIndex: 10
           }}
         >
           {Array.from({ length: getTotalGroups() }).map((_, groupIndex) => {

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

@@ -475,14 +475,14 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 	// Inline Product Card Component
 	const ProductCard: React.FC<{ product: any; layout?: string }> = ({ product, layout = '1x1' }) => {
-		// Helper function to get product name (handles both string and object formats)
-		const getProductName = (name: any): string => {
-			if (!name) return '';
-			if (typeof name === 'string') return name;
-			if (typeof name === 'object') {
-				return name.displayName || name.all || name.en || '';
+		// Helper: display displayName for object, else string (never render object as React child)
+		const getDisplayText = (value: any): string => {
+			if (value == null) return '';
+			if (typeof value === 'string') return value;
+			if (typeof value === 'object') {
+				return value.displayName || value.all || value['en-IN'] || value.en || '';
 			}
-			return '';
+			return String(value);
 		};
 
 		const formatPrice = (price: any) => {
@@ -534,7 +534,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		};
 
 		const getVariantText = (variant: any) => {
-			return variant.valueId?.name || '';
+			return getDisplayText(variant.valueId?.name) || '';
 		};
 
 		const mrp = product.price?.MRP;
@@ -549,7 +549,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 				<div className="product-image-container">
 					<img
 						src={getImageUrl(product.image?.url || '')}
-						alt={getProductName(product.name) || product.image?.alt || ''}
+						alt={getDisplayText(product.name) || getDisplayText(product.image?.alt) || ''}
 						className="product-image"
 					/>
 				</div>
@@ -557,8 +557,8 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 				{/* Product Details */}
 				<div className="product-details">
 					<div className="product-header">
-						<div className="product-brand">{product.brand?.name || ''}</div>
-						<div className="product-name">{getProductName(product.name)}</div>
+						<div className="product-brand">{getDisplayText(product.brand?.name) || ''}</div>
+						<div className="product-name">{getDisplayText(product.name)}</div>
 						<div className="product-code">Code: {product.sku || product.code || ''}</div>
 					</div>