tee3apps-cms-sdk-react 0.0.15 → 0.0.17

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

@@ -1,535 +1,617 @@
-import React from 'react';
-import ProductListViewOne from '../Visual-Components/Styles/ProductListViewOne';
-import ProductListViewTwo from '../Visual-Components/Styles/ProductListViewTwo';
-import { Linodeurl } from '../../const';
-
-
-interface Product {
-  _id: string;
-  code: string;
-  name: string | { all: string };
-  image: any;
-  isActive: boolean;
-  price?:any;
-}
-
-interface GroupProductStatic {
-  _id: string;
-  code: string;
-  name: string;
-}
-
-interface GroupProductDynamic {
-  code: string;
-  name: { all: string };
-  list: Product[];
-  isActive: boolean;
-}
-
-interface GroupProductData {
-  static: GroupProductStatic;
-  dynamic: GroupProductDynamic;
-    showItems:Product[]
-
-}
-
-interface HeaderTextStyle {
-  fontSize: number;
-  fontColor: string;
-  isBold: boolean;
-  isItalic: boolean;
-  isUnderline: boolean;
-}
-
-interface DeviceBooleanProps {
-  web: boolean;
-  mobileweb: boolean;
-  mobileapp: boolean;
-  tablet: boolean;
-}
-
-interface DeviceLayoutProps {
-  web: string;
-  mobileweb: string;
-  mobileapp: string;
-  tablet: string;
-}
-
-export interface GroupProductComponentProps {
-  headerText: { all: string };
-  type: string;
-  groupproduct: GroupProductData;
-  showItems:Product[]
-  activeStatus: boolean;
-  headerImage: string;
-  selectedProducts: Product[];
-  items: any[];
-
-  cardColor: string;
-  showProductName: DeviceBooleanProps;
-  headerTextStyle: HeaderTextStyle;
-  layout: DeviceLayoutProps;
-  style: DeviceLayoutProps;
-  
-  showHeader: DeviceBooleanProps;
-  isHorizontalScroll: DeviceBooleanProps;
-  headerBackground: string;
-  viewAllLink?: string;
-}
-
-interface GroupProductComponentMainProps {
-  props: GroupProductComponentProps;
-  deviceMode?: string;
-}
-
-const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({ 
-  props, 
-  deviceMode = 'web' 
-}) => {
-  const getCurrentBooleanProp = (prop: DeviceBooleanProps) => {
-    switch(deviceMode) {
-      case 'mobileweb': return prop.mobileweb;
-      case 'mobileapp': return prop.mobileapp;
-      case 'tablet': return prop.tablet;
-      case 'web':
-      default: return prop.web;
-    }
-  };
-
-  const getCurrentLayout = () => {
-    switch(deviceMode) {
-      case 'mobileweb': return props.layout.mobileweb;
-      case 'mobileapp': return props.layout.mobileapp;
-      case 'tablet': return props.layout.tablet;
-      case 'web':
-      default: return props.layout.web;
-    }
-  };
-
-    const getCurrentStyle = () => {
-    switch(deviceMode) {
-      case 'mobileweb': return props.style.mobileweb;
-      case 'mobileapp': return props.style.mobileapp;
-      case 'tablet': return props.style.tablet;
-      case 'web':
-      default: return props.style.web;
-    }
-  };
-  const showHeader = getCurrentBooleanProp(props.showHeader);
-  const showProductName = getCurrentBooleanProp(props.showProductName);
-  const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
-  const currentLayout = getCurrentLayout();
-  const currentstyle=getCurrentStyle();
-
-  const getProducts = () => {
-    if(props?.groupproduct?.showItems) return props.groupproduct.showItems
-    return [];
-  };
-
-  const products = getProducts();
-
-  // Helper function to render product based on style
-  const renderProduct = (product: Product, key: string) => {
-    if (currentstyle === 'STYLE1') {
-      return (
-        <div key={key}>
-          <ProductListViewOne props={product} />
-        </div>
-      );
-    } else if (currentstyle === 'STYLE2') {
-      return (
-        <div key={key}>
-          <ProductListViewTwo props={product} />
-        </div>
-      );
-    } else {
-      // Default style (NONE) - inline JSX
-      return (
-        <a href={`/${product.code}`} target={'_blank'} rel="noopener noreferrer" style={{textDecoration:"none"}} key={key}>
-          <div
-            className="productImageSlide"
-            style={{
-              height: 'auto',
-              minWidth: deviceMode === 'mobileapp' || deviceMode === 'mobileweb' ? '120px' : '150px',
-              borderRadius: '8px',
-              overflow: 'hidden',
-              border: '1px solid #eee',
-              backgroundColor: '#fff',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '12px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              transition: 'transform 0.2s ease',
-              cursor: 'pointer',
-            }}
-            onMouseOver={(e) => {
-              e.currentTarget.style.transform = 'translateY(-2px)';
-              e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-            }}
-            onMouseOut={(e) => {
-              e.currentTarget.style.transform = 'translateY(0)';
-              e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-            }}
-          >
-            <div
-              style={{
-                height: '120px',
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginBottom: '8px',
-              }}
-            >
-              <img
-                src={`${Linodeurl}${product.image?.url}`}
-                alt={typeof product.name === 'object' ? product.name.all : product.name}
-                style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-              />
-            </div>
-
-            {showProductName && (
-              <div
-                style={{
-                  marginTop: '8px',
-                  textAlign: 'center',
-                  fontSize: '14px',
-                  fontWeight: '500',
-                  color: '#333',
-                  lineHeight: '1.4',
-                  height: '40px',
-                  overflow: 'hidden',
-                  display: '-webkit-box',
-                  WebkitLineClamp: 2,
-                  WebkitBoxOrient: 'vertical',
-                }}
-              >
-                {typeof product.name === 'object' ? product.name.all : product.name}
-                <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
-                  {product?.price?.SP?.$numberDecimal}
-                </h1>
-              </div>
-            )}
-          </div>
-        </a>
-      );
-    }
-  };
-
-  // Helper function to render product card (for grid layouts)
-  const renderProductCard = (product: Product, key: string, imageHeight: string = '120px', fontSize: string = '14px', nameHeight: string = '40px', fontWeight: string = '500') => {
-    if (currentstyle === 'STYLE1') {
-      return (
-        <div key={key}>
-          <ProductListViewOne props={product} />
-        </div>
-      );
-    } else if (currentstyle === 'STYLE2') {
-      return (
-        <div key={key}>
-          <ProductListViewTwo props={product} />
-        </div>
-      );
-    } else {
-      // Default style (NONE) - inline JSX
-      return (
-        <div
-          key={key}
-          className="productImageSlide"
-          style={{
-            height: 'auto',
-            borderRadius: '8px',
-            overflow: 'hidden',
-            border: '1px solid #eee',
-            backgroundColor: '#fff',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '12px',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            transition: 'transform 0.2s ease',
-            cursor: 'pointer'
-          }}
-          onMouseOver={(e) => {
-            e.currentTarget.style.transform = 'translateY(-2px)';
-            e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
-          }}
-          onMouseOut={(e) => {
-            e.currentTarget.style.transform = 'translateY(0)';
-            e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
-          }}
-        >
-          <div style={{ 
-            height: imageHeight, 
-            width: '100%', 
-            display: 'flex', 
-            alignItems: 'center', 
-            justifyContent: 'center',
-            marginBottom: '8px'
-          }}>
-            <img
-              src={`${Linodeurl}${product.image?.all?.url || product.image?.url}`}
-              alt=""
-              style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-            />
-          </div>
-          {showProductName && <div style={{ 
-            textAlign: 'center',
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            color: '#333',
-            lineHeight: '1.4',
-            ...(nameHeight === 'auto' ? {} : {
-              height: nameHeight,
-              overflow: 'hidden',
-              display: '-webkit-box',
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: 'vertical'
-            })
-          }}>
-            {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
-          </div>}
-        </div>
-      );
-    }
-  };
-  
-  // Carousel navigation functions
-  const scrollLeft = () => {
-    const carousel = document.querySelector('.groupProductCarousel');
-    if (carousel) {
-      carousel.scrollBy({ left: -200, behavior: 'smooth' });
-    }
-  };
-
-  const scrollRight = () => {
-    const carousel = document.querySelector('.groupProductCarousel');
-    if (carousel) {
-      carousel.scrollBy({ left: 200, behavior: 'smooth' });
-    }
-  };
-
-  return (
-    <div
-      style={{
-        border: '1px solid #e1e1e1',
-        width: '100%', 
-        maxWidth: '100%',
-        borderRadius: '0px',
-        minHeight: '100px',
-        position: 'relative',
-        overflow: 'hidden',
-        marginBottom:'20px',
-        marginTop:'0px'
-   
-      }}
-      className='GroupProductComponent'
-    >
-      {showHeader && (
-        <div
-          className="groupProductHeader"
-          style={{
-            backgroundColor: props.headerBackground,
-            padding: '12px 16px',
-            borderRadius: '0px',
-            marginBottom: '4px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-            gap: '12px',
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            {props.headerImage && (
-              <div style={{ width: '32px', height: '32px' }}>
-                {/* <ImageDisplayComponent 
-                  fileUrl={props.headerImage}
-                  preserveAspectRatio={true}
-                  maxWidth="100%"
-                  maxHeight="32px"
-                /> */}
-                 <img
-                  src={`${Linodeurl}${props.headerImage}`}   
-                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                />
-              </div>
-            )}
-            <p style={{
-              color: props.headerTextStyle.fontColor,
-              fontSize: `${props.headerTextStyle.fontSize}px`,
-              fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
-              fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
-              textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
-              margin: 0
-            }}>
-              {props.headerText?.all || 'Header text'} 
-            </p>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-           
-            {props.type=='static' && (
-              <a
-  href={`http://localhost:5173/${props.groupproduct.static.code}/s?type=groupproduct`}
-  target="_blank"
-  rel="noopener noreferrer"
-  style={{
-    color: 'black',
-    textDecoration: 'none',
-    fontWeight: '500',
-    fontSize: '14px',
-    padding: '6px 12px',
-    border: 'none',
-    borderRadius: '4px',
-    backgroundColor: 'transparent',
-    cursor: 'pointer'
-  }}
->
-  View All
-</a>
-            )}
-
-
-          
-
-            {currentLayout === 'NONE'  && products.length > 4 && (
-              <div style={{ display: 'flex', gap: '8px' }}>
-                <button 
-                  onClick={scrollLeft} 
-                  style={{
-                    width: '32px',
-                    height: '32px',
-                    borderRadius: '50%',
-                    border: '1px solid #ddd',
-                    backgroundColor: '#fff',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '16px',
-                    fontWeight: 'bold'
-                  }}
-                  onMouseOver={(e) => {
-                    e.currentTarget.style.backgroundColor = '#f8f9fa';
-                  }}
-                  onMouseOut={(e) => {
-                    e.currentTarget.style.backgroundColor = '#fff';
-                  }}
-                >
-                  &#8249;
-                </button>
-                <button 
-                  onClick={scrollRight} 
-                  style={{
-                    width: '32px',
-                    height: '32px',
-                    borderRadius: '50%',
-                    border: '1px solid #ddd',
-                    backgroundColor: '#fff',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '16px',
-                    fontWeight: 'bold'
-                  }}
-                  onMouseOver={(e) => {
-                    e.currentTarget.style.backgroundColor = '#f8f9fa';
-                  }}
-                  onMouseOut={(e) => {
-                    e.currentTarget.style.backgroundColor = '#fff';
-                  }}
-                >
-                  &#8250;
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      <div 
-        className="groupProductCarousel" 
-        style={{
-          display: currentLayout === 'NONE' ? 'flex' : 'block',
-          overflowX: currentLayout === 'NONE' && isHorizontalScroll ? 'auto' : 'visible',
-          gap: currentLayout === 'NONE' ? '12px' : '0',
-          padding: '12px',
-          scrollBehavior: 'smooth',
-          backgroundColor: props.cardColor || '#fff',
-          scrollbarWidth: 'thin',
-          borderRadius: '8px',
-          position: 'relative',
-          scrollbarColor: '#c1c1c1 transparent'
-        }}
-      >
-        {products.length > 0 ? (
-          currentLayout === 'NONE' ? (
-            products.slice(0, props.type === 'static' ? 15 : products.length).map((product) => 
-              renderProduct(product, product._id)
-            )
-          ) : currentLayout === 'SMALL' ? (
-            <div style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(2, 1fr)',
-              gap: '16px',
-              padding: '8px'
-            }}>
-              {
-              products.map((product) => 
-                renderProductCard(product, product._id, '100px', '12px', '32px')
-              )}
-            </div>
-          ) : currentLayout === 'MEDIUM' ? (
-            <div style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(3, 1fr)',
-              gap: '16px',
-              padding: '8px'
-            }}>
-              {
-              products.map((product) => 
-                renderProductCard(product, product._id, '120px', '14px', '40px')
-              )}
-            </div>
-          ) : currentLayout === 'MEDIUM_THREE' ? (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
-              {products.length > 0 && (
-                renderProductCard(products[0], products[0]._id, '160px', '16px', 'auto', '600')
-              )}
-              {products.length > 1 && (
-                <div style={{
-                  display: 'grid',
-                  gridTemplateColumns: 'repeat(2,1fr)',
-                  gap: '16px'
-                }}>
-                  {products.slice(1).map((product) => 
-                    renderProductCard(product, product._id, '100px', '12px', '32px', '500')
-                  )}
-                </div>
-              )}
-            </div>
-          ) : null
-        ) : (
-          <div style={{
-            textAlign: 'center',
-            color: '#666',
-            padding: '40px',
-            width: '100%',
-            border: '2px dashed #ddd',
-            borderRadius: '8px',
-            backgroundColor: '#f9f9f9'
-          }}>
-            <p>No products selected. Use settings to add products.</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
+import React from 'react';
+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;
+  code: string;
+  name: string | { all: string };
+  image: any;
+  isActive: boolean;
+  price?:any;
+}
+
+interface GroupProductStatic {
+  _id: string;
+  code: string;
+  name: string;
+}
+
+interface GroupProductDynamic {
+  code: string;
+  name: { all: string };
+  list: Product[];
+  isActive: boolean;
+}
+
+interface GroupProductData {
+  static: GroupProductStatic;
+  dynamic: GroupProductDynamic;
+    showItems:Product[]
+
+}
+
+interface HeaderTextStyle {
+  fontSize: number;
+  fontColor: string;
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
+}
+
+interface DeviceBooleanProps {
+  web: boolean;
+  mobileweb: boolean;
+  mobileapp: boolean;
+  tablet: boolean;
+}
+
+interface DeviceLayoutProps {
+  web: string;
+  mobileweb: string;
+  mobileapp: string;
+  tablet: string;
+}
+
+export interface GroupProductComponentProps {
+  headerText: any;
+  type: string;
+  groupproduct: GroupProductData;
+  showItems:Product[]
+  activeStatus: boolean;
+  headerImage: string;
+  selectedProducts: Product[];
+  items: any[];
+
+  cardColor: string;
+  showProductName: DeviceBooleanProps;
+  headerTextStyle: HeaderTextStyle;
+  layout: DeviceLayoutProps;
+  style: DeviceLayoutProps;
+  
+  showHeader: DeviceBooleanProps;
+  isHorizontalScroll: DeviceBooleanProps;
+  headerBackground: string;
+  viewAllLink?: string;
+}
+
+interface GroupProductComponentMainProps {
+  props: GroupProductComponentProps;
+  deviceMode?: string;
+}
+
+const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({ 
+  props, 
+  deviceMode = 'web' 
+}) => {
+  const getCurrentBooleanProp = (prop: DeviceBooleanProps) => {
+    switch(deviceMode) {
+      case 'mobileweb': return prop.mobileweb;
+      case 'mobileapp': return prop.mobileapp;
+      case 'tablet': return prop.tablet;
+      case 'web':
+      default: return prop.web;
+    }
+  };
+
+  const getCurrentLayout = () => {
+    switch(deviceMode) {
+      case 'mobileweb': return props.layout.mobileweb;
+      case 'mobileapp': return props.layout.mobileapp;
+      case 'tablet': return props.layout.tablet;
+      case 'web':
+      default: return props.layout.web;
+    }
+  };
+
+    const getCurrentStyle = () => {
+    switch(deviceMode) {
+      case 'mobileweb': return props.style.mobileweb;
+      case 'mobileapp': return props.style.mobileapp;
+      case 'tablet': return props.style.tablet;
+      case 'web':
+      default: return props.style.web;
+    }
+  };
+  const showHeader = getCurrentBooleanProp(props.showHeader);
+  const showProductName = getCurrentBooleanProp(props.showProductName);
+  const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
+  const currentLayout = getCurrentLayout();
+  const currentstyle=getCurrentStyle();
+
+  const getProducts = () => {
+    if(props?.groupproduct?.showItems) return props.groupproduct.showItems
+    return [];
+  };
+
+  const products = getProducts();
+  
+  // Helper function to render product based on style
+  const renderProduct = (product: Product, key: string) => {
+    if (currentstyle === 'STYLE1') {
+      return (
+        <div key={key}>
+          <ProductListViewOne props={product} />
+        </div>
+      );
+    } else if (currentstyle === 'STYLE2') {
+      return (
+        <div key={key}>
+          <ProductListViewTwo props={product} />
+        </div>
+      );
+    } else {
+      // Default style (NONE) - inline JSX
+      return (
+        <a href={`/${product.code}`} target={'_blank'} rel="noopener noreferrer" style={{textDecoration:"none"}} key={key}>
+          <div
+            className="productImageSlide"
+            style={{
+              height: 'auto',
+              minWidth: deviceMode === 'mobileapp' || deviceMode === 'mobileweb' ? '120px' : '150px',
+              borderRadius: '8px',
+              overflow: 'hidden',
+              border: '1px solid #eee',
+              backgroundColor: '#fff',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '12px',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+              transition: 'transform 0.2s ease',
+              cursor: 'pointer',
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.transform = 'translateY(-2px)';
+              e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+            }}
+          >
+            <div
+              style={{
+                height: '120px',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: '8px',
+              }}
+            >
+              <img
+                src={`${Linodeurl}${product.image?.url}`}
+                alt={typeof product.name === 'object' ? product.name.all : product.name}
+                style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+              />
+            </div>
+
+            {showProductName && (
+              <div
+                style={{
+                  marginTop: '8px',
+                  textAlign: 'center',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  color: '#333',
+                  lineHeight: '1.4',
+                  height: '40px',
+                  overflow: 'hidden',
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                }}
+              >
+                {typeof product.name === 'object' ? product.name.all : product.name}
+                {(() => {
+                  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>
+        </a>
+      );
+    }
+  };
+
+  // Helper function to render product card (for grid layouts)
+  const renderProductCard = (product: Product, key: string, imageHeight: string = '120px', fontSize: string = '14px', nameHeight: string = '40px', fontWeight: string = '500') => {
+    if (currentstyle === 'STYLE1') {
+      return (
+        <div key={key}>
+          <ProductListViewOne props={product} />
+        </div>
+      );
+    } else if (currentstyle === 'STYLE2') {
+      return (
+        <div key={key}>
+          <ProductListViewTwo props={product} />
+        </div>
+      );
+    } else {
+      // Default style (NONE) - inline JSX
+      return (
+        <div
+          key={key}
+          className="productImageSlide"
+          style={{
+            height: 'auto',
+            borderRadius: '8px',
+            overflow: 'hidden',
+            border: '1px solid #eee',
+            backgroundColor: '#fff',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '12px',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            transition: 'transform 0.2s ease',
+            cursor: 'pointer'
+          }}
+          onMouseOver={(e) => {
+            e.currentTarget.style.transform = 'translateY(-2px)';
+            e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)';
+            e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+          }}
+        >
+          <div style={{ 
+            height: imageHeight, 
+            width: '100%', 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'center',
+            marginBottom: '8px'
+          }}>
+            <img
+              src={`${Linodeurl}${product.image?.all?.url || product.image?.url}`}
+              alt=""
+              style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+            />
+          </div>
+          {showProductName && <div style={{ 
+            textAlign: 'center',
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            color: '#333',
+            lineHeight: '1.4',
+            ...(nameHeight === 'auto' ? {} : {
+              height: nameHeight,
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical'
+            })
+          }}>
+            {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
+          </div>}
+        </div>
+      );
+    }
+  };
+  
+  // Carousel navigation functions
+  const scrollLeft = () => {
+    const carousel = document.querySelector('.groupProductCarousel');
+    if (carousel) {
+      carousel.scrollBy({ left: -200, behavior: 'smooth' });
+    }
+  };
+
+  const scrollRight = () => {
+    const carousel = document.querySelector('.groupProductCarousel');
+    if (carousel) {
+      carousel.scrollBy({ left: 200, behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div
+      style={{
+        border: '1px solid #e1e1e1',
+        width: '100%', 
+        maxWidth: '100%',
+        borderRadius: '0px',
+        minHeight: '100px',
+        position: 'relative',
+        overflow: 'hidden',
+        marginBottom:'20px',
+        marginTop:'0px'
+   
+      }}
+      className='GroupProductComponent'
+    >
+      {showHeader && (
+        <div
+          className="groupProductHeader"
+          style={{
+            backgroundColor: props.headerBackground,
+            padding: '12px 16px',
+            borderRadius: '0px',
+            marginBottom: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            gap: '12px',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            {props.headerImage && (
+              <div style={{ width: '32px', height: '32px' }}>
+                {/* <ImageDisplayComponent 
+                  fileUrl={props.headerImage}
+                  preserveAspectRatio={true}
+                  maxWidth="100%"
+                  maxHeight="32px"
+                /> */}
+                 <img
+                  src={`${Linodeurl}${props.headerImage}`}   
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+              </div>
+            )}
+            <p style={{
+              color: props.headerTextStyle.fontColor,
+              fontSize: `${props.headerTextStyle.fontSize}px`,
+              fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
+              fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
+              textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
+              margin: 0
+            }}>
+              {props.headerText?.all || props?.headerText} 
+            </p>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+           
+            {/* {props.type=='static' && (
+              <a
+  href={`http://localhost:5173/${props.groupproduct.static.code}/s?type=groupproduct`}
+  target="_blank"
+  rel="noopener noreferrer"
+  style={{
+    color: 'black',
+    textDecoration: 'none',
+    fontWeight: '500',
+    fontSize: '14px',
+    padding: '6px 12px',
+    border: 'none',
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+    cursor: 'pointer'
+  }}
+>
+  View All
+</a>
+            )} */}
+
+
+          
+
+            {currentLayout === 'NONE'  && products.length > 4 && (
+              <div style={{ display: 'flex', gap: '8px' }}>
+                <button 
+                  onClick={scrollLeft} 
+                  style={{
+                    width: '32px',
+                    height: '32px',
+                    borderRadius: '50%',
+                    border: '1px solid #ddd',
+                    backgroundColor: '#fff',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '16px',
+                    fontWeight: 'bold'
+                  }}
+                  onMouseOver={(e) => {
+                    e.currentTarget.style.backgroundColor = '#f8f9fa';
+                  }}
+                  onMouseOut={(e) => {
+                    e.currentTarget.style.backgroundColor = '#fff';
+                  }}
+                >
+                  &#8249;
+                </button>
+                <button 
+                  onClick={scrollRight} 
+                  style={{
+                    width: '32px',
+                    height: '32px',
+                    borderRadius: '50%',
+                    border: '1px solid #ddd',
+                    backgroundColor: '#fff',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '16px',
+                    fontWeight: 'bold'
+                  }}
+                  onMouseOver={(e) => {
+                    e.currentTarget.style.backgroundColor = '#f8f9fa';
+                  }}
+                  onMouseOut={(e) => {
+                    e.currentTarget.style.backgroundColor = '#fff';
+                  }}
+                >
+                  &#8250;
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div 
+        className="groupProductCarousel" 
+        style={{
+          display: currentLayout === 'NONE' ? 'flex' : 'block',
+          overflowX: currentLayout === 'NONE' && isHorizontalScroll ? 'auto' : 'visible',
+          gap: currentLayout === 'NONE' ? '12px' : '0',
+          padding: '12px',
+          scrollBehavior: 'smooth',
+          backgroundColor: props.cardColor || '#fff',
+          scrollbarWidth: 'thin',
+          borderRadius: '8px',
+          position: 'relative',
+          scrollbarColor: '#c1c1c1 transparent'
+        }}
+      >
+        {products.length > 0 ? (
+          currentLayout === 'NONE' ? (
+            products.slice(0, props.type === 'static' ? 15 : products.length).map((product) => 
+              renderProduct(product, product._id)
+            )
+          ) : currentLayout === 'SMALL' ? (
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: '16px',
+              padding: '8px'
+            }}>
+              {
+              products.map((product) => 
+                renderProductCard(product, product._id, '100px', '12px', '32px')
+              )}
+            </div>
+          ) : currentLayout === 'MEDIUM' ? (
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, 1fr)',
+              gap: '16px',
+              padding: '8px'
+            }}>
+              {
+              products.map((product) => 
+                renderProductCard(product, product._id, '120px', '14px', '40px')
+              )}
+            </div>
+          ) : currentLayout === 'MEDIUM_THREE' ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
+              {products.length > 0 && (
+                renderProductCard(products[0], products[0]._id, '160px', '16px', 'auto', '600')
+              )}
+              {products.length > 1 && (
+                <div style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(2,1fr)',
+                  gap: '16px'
+                }}>
+                  {products.slice(1).map((product) => 
+                    renderProductCard(product, product._id, '100px', '12px', '32px', '500')
+                  )}
+                </div>
+              )}
+            </div>
+          ) : null
+        ) : (
+          <div style={{
+            textAlign: 'center',
+            color: '#666',
+            padding: '40px',
+            width: '100%',
+            border: '2px dashed #ddd',
+            borderRadius: '8px',
+            backgroundColor: '#f9f9f9'
+          }}>
+            <p>No products selected. Use settings to add products.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
 export default GroupProductComponent;