tee3apps-cms-sdk-react 0.0.31 → 0.0.32

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

@@ -6,12 +6,12 @@ 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) {
@@ -19,40 +19,40 @@ const getPriceValue = (price: any): number => {
       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;
 };
 
@@ -60,12 +60,12 @@ const getPriceFromPricingArray = (pricingArray: any[]): number => {
 const getProductPrices = (product: any) => {
   // Use pricing object only
   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;
-  
+  const sellingPrice = product.pricing?.nlcPrice
+    ? getPriceFromPricingArray(product.pricing.nlcPrice)
+    : product.pricing?.costPrice
+      ? getPriceFromPricingArray(product.pricing.costPrice)
+      : 0;
+
   return {
     mrp,
     sellingPrice
@@ -79,7 +79,7 @@ interface Product {
   name: string | { all: string };
   image: any;
   isActive: boolean;
-  price?:any;
+  price?: any;
 }
 
 interface GroupProductStatic {
@@ -98,7 +98,7 @@ interface GroupProductDynamic {
 interface GroupProductData {
   static: GroupProductStatic;
   dynamic: GroupProductDynamic;
-    showItems:Product[]
+  showItems: Product[]
 
 }
 
@@ -128,18 +128,19 @@ export interface GroupProductComponentProps {
   headerText: any;
   type: string;
   groupproduct: GroupProductData;
-  showItems:Product[]
+  showItems: Product[]
   activeStatus: boolean;
   headerImage: string;
   selectedProducts: Product[];
   items: any[];
 
   cardColor: string;
+  carouselBackground: string;
   showProductName: DeviceBooleanProps;
   headerTextStyle: HeaderTextStyle;
   layout: DeviceLayoutProps;
   style: DeviceLayoutProps;
-  
+
   showHeader: DeviceBooleanProps;
   isHorizontalScroll: DeviceBooleanProps;
   headerBackground: string;
@@ -151,12 +152,12 @@ interface GroupProductComponentMainProps {
   deviceMode?: string;
 }
 
-const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({ 
-  props, 
-  deviceMode = 'web' 
+const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
+  props,
+  deviceMode = 'web'
 }) => {
   const getCurrentBooleanProp = (prop: DeviceBooleanProps) => {
-    switch(deviceMode) {
+    switch (deviceMode) {
       case 'mobileweb': return prop.mobileweb;
       case 'mobileapp': return prop.mobileapp;
       case 'tablet': return prop.tablet;
@@ -166,7 +167,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
   };
 
   const getCurrentLayout = () => {
-    switch(deviceMode) {
+    switch (deviceMode) {
       case 'mobileweb': return props.layout.mobileweb;
       case 'mobileapp': return props.layout.mobileapp;
       case 'tablet': return props.layout.tablet;
@@ -175,8 +176,8 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
     }
   };
 
-    const getCurrentStyle = () => {
-    switch(deviceMode) {
+  const getCurrentStyle = () => {
+    switch (deviceMode) {
       case 'mobileweb': return props.style.mobileweb;
       case 'mobileapp': return props.style.mobileapp;
       case 'tablet': return props.style.tablet;
@@ -188,33 +189,33 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
   const showProductName = getCurrentBooleanProp(props.showProductName);
   const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
   const currentLayout = getCurrentLayout();
-  const currentstyle=getCurrentStyle();
+  const currentstyle = getCurrentStyle();
 
   const getProducts = () => {
-    if(props?.groupproduct?.showItems) return props.groupproduct.showItems
+    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} />
+          <ProductListViewOne props={product} cardColor={props.cardColor} />
         </div>
       );
     } else if (currentstyle === 'STYLE2') {
       return (
         <div key={key}>
-          <ProductListViewTwo props={product} />
+          <ProductListViewTwo props={product} cardColor={props.cardColor} />
         </div>
       );
     } else {
       // Default style (NONE) - inline JSX
       return (
-        <a href={`/${product.code}`} target={'_blank'} rel="noopener noreferrer" style={{textDecoration:"none"}} key={key}>
+        <a href={`/${product.code}`} target={'_blank'} rel="noopener noreferrer" style={{ textDecoration: "none" }} key={key}>
           <div
             className="productImageSlide"
             style={{
@@ -223,7 +224,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
               borderRadius: '8px',
               overflow: 'hidden',
               border: '1px solid #eee',
-              backgroundColor: '#fff',
+              backgroundColor: props.cardColor || '#fff',
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
@@ -297,13 +298,13 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
     if (currentstyle === 'STYLE1') {
       return (
         <div key={key}>
-          <ProductListViewOne props={product} />
+          <ProductListViewOne props={product} cardColor={props.cardColor} />
         </div>
       );
     } else if (currentstyle === 'STYLE2') {
       return (
         <div key={key}>
-          <ProductListViewTwo props={product} />
+          <ProductListViewTwo props={product} cardColor={props.cardColor} />
         </div>
       );
     } else {
@@ -317,7 +318,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
             borderRadius: '8px',
             overflow: 'hidden',
             border: '1px solid #eee',
-            backgroundColor: '#fff',
+            backgroundColor: props.cardColor || '#fff',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
@@ -341,11 +342,11 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
             }
           }}
         >
-          <div style={{ 
-            height: imageHeight, 
-            width: '100%', 
-            display: 'flex', 
-            alignItems: 'center', 
+          <div style={{
+            height: imageHeight,
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
             justifyContent: 'center',
             marginBottom: '8px'
           }}>
@@ -355,7 +356,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
               style={{ width: '100%', height: '100%', objectFit: 'contain' }}
             />
           </div>
-          {showProductName && <div style={{ 
+          {showProductName && <div style={{
             textAlign: 'center',
             fontSize: fontSize,
             fontWeight: fontWeight,
@@ -375,7 +376,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
       );
     }
   };
-  
+
   // Carousel navigation functions
   const scrollLeft = () => {
     const carousel = document.querySelector('.groupProductCarousel');
@@ -414,225 +415,225 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
       <div
         style={{
           border: '1px solid #e1e1e1',
-          width: '100%', 
+          width: '100%',
           maxWidth: '100%',
           borderRadius: '0px',
           minHeight: '100px',
           position: 'relative',
           overflow: 'hidden',
-          marginBottom:'20px',
-          marginTop:'0px'
-   
+          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 
+        {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>
+                  <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={`/search/${props.groupproduct.static.code}`}
-  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'   && (
-              <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} 
+            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+
+              {props.type == 'static' && (
+                <a
+                  href={`/search/${props.groupproduct.static.code}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   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';
+                    color: 'black',
+                    textDecoration: 'none',
+                    fontWeight: '500',
+                    fontSize: '14px',
+                    padding: '6px 12px',
+                    border: 'none',
+                    borderRadius: '4px',
+                    backgroundColor: 'transparent',
+                    cursor: 'pointer'
                   }}
                 >
-                  &#8250;
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      <div 
-        className="groupProductCarousel" 
-        style={{
-          display: currentLayout === 'NONE' ? 'flex' : 'block',
-          overflowX: currentLayout === 'NONE' && isHorizontalScroll ? 'scroll' : 'visible',
-          overflowY: 'hidden',
-          gap: currentLayout === 'NONE' ? '12px' : '0',
-          padding: '12px',
-          scrollBehavior: 'smooth',
-          backgroundColor: props.cardColor || '#fff',
-          scrollbarWidth: 'thin',
-          borderRadius: '8px',
-          position: 'relative',
-          scrollbarColor: '#c1c1c1 #f0f0f0',
-          width: '100%',
-          ...(currentLayout === 'NONE' && isHorizontalScroll ? {
-            // Webkit scrollbar styles for Chrome/Safari
-            WebkitOverflowScrolling: 'touch',
-          } : {})
-        }}
-      >
-        {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')
+                  View All
+                </a>
               )}
-            </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')
-                  )}
+
+
+
+
+              {currentLayout === 'NONE' && (
+                <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>
-          ) : 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
+          className="groupProductCarousel"
+          style={{
+            display: currentLayout === 'NONE' ? 'flex' : 'block',
+            overflowX: currentLayout === 'NONE' && isHorizontalScroll ? 'scroll' : 'visible',
+            overflowY: 'hidden',
+            gap: currentLayout === 'NONE' ? '12px' : '0',
+            padding: '12px',
+            scrollBehavior: 'smooth',
+            backgroundColor: props.carouselBackground || '#fff',
+            scrollbarWidth: 'thin',
+            borderRadius: '8px',
+            position: 'relative',
+            scrollbarColor: '#c1c1c1 #f0f0f0',
+            width: '100%',
+            ...(currentLayout === 'NONE' && isHorizontalScroll ? {
+              // Webkit scrollbar styles for Chrome/Safari
+              WebkitOverflowScrolling: 'touch',
+            } : {})
+          }}
+        >
+          {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>
-    </div>
     </>
   );
 };