tee3apps-cms-sdk-react 0.0.1

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

@@ -0,0 +1,671 @@
+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();
+  
+  // 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) => {
+  if (currentstyle === 'STYLE1') {
+    return (
+      <div key={product._id}>
+        <ProductListViewOne props={product} />
+      </div>
+    );
+  } else if (currentstyle === 'STYLE2') {
+    return (
+      <div key={product._id}>
+        <ProductListViewTwo props={product} />
+      </div>
+    );
+  } else {
+    // Default style (NONE)
+    return (
+      <a href={`/${product._id}`} target={'_blank'}  rel="noopener noreferrer" style={{textDecoration:"none"}}>
+           <div
+  key={product._id}
+  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>
+      {/* <h2 style={{ fontSize: '14px', fontWeight: '500', color: '#666' }}>
+        MRP: {product?.price?.MRP?.$numberDecimal}
+      </h2> */}
+    </div>
+  )}
+</div>
+      </a>
+
+    );
+  }
+})
+          ) : currentLayout === 'SMALL' ? (
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: '16px',
+              padding: '8px'
+            }}>
+              {
+              products.map((product) => (
+                <div
+                  key={product._id}
+                  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: '100px', 
+                    width: '100%', 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'center',
+                    marginBottom: '8px'
+                  }}>
+                    <img
+      src={`${Linodeurl}${product.image?.all?.url}`}
+  alt=""
+  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+/>
+                  </div>
+                  {showProductName && <div style={{ 
+                    textAlign: 'center',
+                    fontSize: '12px',
+                    fontWeight: '500',
+                    color: '#333',
+                    lineHeight: '1.4',
+                    height: '32px',
+                    overflow: 'hidden',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical'
+                  }}>
+                    {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
+                  </div>}
+                </div>
+              ))}
+            </div>
+          ) : currentLayout === 'MEDIUM' ? (
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, 1fr)',
+              gap: '16px',
+              padding: '8px'
+            }}>
+              {
+              products.map((product) => (
+                <div
+                  key={product._id}
+                  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: '120px', 
+                    width: '100%', 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'center',
+                    marginBottom: '8px'
+                  }}>
+                 <img
+      src={`${Linodeurl}${product.image?.all?.url}`}
+  alt=""
+  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+/>
+                  </div>
+                  {showProductName && <div style={{ 
+                    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 as { all: string }).all : product.name}
+                  </div>}
+                </div>
+              ))}
+            </div>
+          ) : currentLayout === 'MEDIUM_THREE' ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
+              {products.length > 0 && (
+                <div
+                  className="productImageSlide"
+                  style={{
+                    height: 'auto',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    border: '1px solid #eee',
+                    backgroundColor: '#fff',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '16px',
+                    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: '160px', 
+                    width: '100%', 
+                    display: 'flex', 
+                    alignItems: 'center', 
+                    justifyContent: 'center',
+                    marginBottom: '12px'
+                  }}>
+                               <img
+      src={`${Linodeurl}${products[0].image?.all?.url}`}
+  alt=""
+  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+/>
+                  </div>
+                  {showProductName && <div style={{ 
+                    textAlign: 'center',
+                    fontSize: '16px',
+                    fontWeight: '600',
+                    color: '#333',
+                    lineHeight: '1.4'
+                  }}>
+                    {typeof products[0].name === 'object' ? (products[0].name as { all: string }).all : products[0].name}
+                  </div>}
+                </div>
+              )}
+              {products.length > 1 && (
+                <div style={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(2,1fr)',
+                  gap: '16px'
+                }}>
+                  {products.slice(1).map((product) => (
+                    <div
+                      key={product._id}
+                      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: '100px', 
+                        width: '100%', 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center',
+                        marginBottom: '8px'
+                      }}>
+                                         <img
+      src={`${Linodeurl}${product.image?.all?.url}`}
+  alt=""
+  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+/>
+                      </div>
+                      {showProductName && <div style={{ 
+                        textAlign: 'center',
+                        fontSize: '12px',
+                        fontWeight: '500',
+                        color: '#333',
+                        lineHeight: '1.4',
+                        height: '32px',
+                        overflow: 'hidden',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical'
+                      }}>
+                        {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
+                      </div>}
+                    </div>
+                  ))}
+                </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;