tee3apps-cms-sdk-react 0.0.20 → 0.0.23

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

@@ -13,7 +13,7 @@ interface Slide {
     width: number | null;
     height: number | null;
   };
-  video: {
+  video?: {
     url?: string;
     alt?: string;
   };
@@ -24,7 +24,7 @@ interface Slide {
   external_link: {
     url: string;
     target: string;
-  };
+  } | null;
 }
 
 interface SlideMode {
@@ -60,7 +60,7 @@ export interface CarouselProps {
   sliderArrowVisible: boolean;
   pagingDotVisible: boolean;
   objectFit: string;
-  slides: SlidesData[];
+  slides: SlidesData[] | Slide[][]; // Support both formats: SlidesData[] or nested array Slide[][]
 }
 
 interface CarouselComponentMainProps {
@@ -75,10 +75,62 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
   const [currentSlide, setCurrentSlide] = useState(0);
   const [isPlaying, setIsPlaying] = useState(props.autoplay);
   const [isHovered, setIsHovered] = useState(false);
+  const [prevButtonHovered, setPrevButtonHovered] = useState(false);
+  const [nextButtonHovered, setNextButtonHovered] = useState(false);
+  
+  // Detect data structure and safely get slides with fallback
+  // Check if slides[0] is an array of Slide objects (new format) or has 'all' property (old format)
+  const firstSlideItem = props.slides && props.slides[0] ? props.slides[0] : null;
+  
+  // Check if it's the new nested array format (array of Slide objects)
+  const isNestedArrayFormat = Array.isArray(firstSlideItem) && 
+                               firstSlideItem.length > 0 && 
+                               typeof firstSlideItem[0] === 'object' &&
+                               'sl_id' in (firstSlideItem[0] as any);
+  
+  let slides: Slide[] = [];
+  let slidesData: SlidesData | null = null;
+  
+  if (isNestedArrayFormat) {
+    // New format: slides is Slide[][] - first element is an array of Slide objects
+    slides = (firstSlideItem as Slide[]) || [];
+  } else if (firstSlideItem && typeof firstSlideItem === 'object' && 'all' in firstSlideItem) {
+    // Old format: slides is SlidesData[] - has 'all' property
+    slidesData = firstSlideItem as SlidesData;
+    slides = slidesData?.all || [];
+  } else {
+    // Fallback: empty array
+    slides = [];
+  }
   
-  const slides = props.slides[0].all;
   const totalSlides = slides.length;
 
+  // Get current mode settings
+  const getCurrentMode = () => {
+    // If using nested array format, mode data doesn't exist, use defaults
+    if (isNestedArrayFormat || !slidesData || !slidesData.mode) {
+      // Return default mode based on device
+      const defaultSlidesToShow = deviceMode === 'mobileweb' || deviceMode === 'mobileapp' ? 1 : 
+                                  deviceMode === 'tablet' ? 2 : 1;
+      return { slidesToShow: defaultSlidesToShow };
+    }
+    
+    switch(deviceMode) {
+      case 'mobileweb':
+        return slidesData.mode.mobileweb || { slidesToShow: 1 };
+      case 'mobileapp':
+        return slidesData.mode.mobileapp || { slidesToShow: 1 };
+      case 'tablet':
+        return slidesData.mode.tablet || { slidesToShow: 1 };
+      case 'web':
+      default:
+        return slidesData.mode.web || { slidesToShow: 1 };
+    }
+  };
+
+  const currentMode = getCurrentMode();
+  const slidesToShow = Math.max(1, currentMode.slidesToShow || 1);
+
   // Function to go to next slide (advance by 1 to support wrap pairs)
   const nextSlide = useCallback(() => {
     setCurrentSlide((prev) => (prev + 1) % totalSlides);
@@ -96,14 +148,16 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
 
   // Handle autoplay
   useEffect(() => {
-    if (!props.autoplay || !isPlaying || isHovered) return;
+    // Only pause on hover if pauseOnHover is enabled
+    const shouldPause = props.pauseOnHover && isHovered;
+    if (!props.autoplay || !isPlaying || shouldPause) return;
 
     const interval = setInterval(() => {
       nextSlide();
     }, props.autoplayInterval);
 
     return () => clearInterval(interval);
-  }, [props.autoplay, props.autoplayInterval, isPlaying, isHovered, nextSlide]);
+  }, [props.autoplay, props.autoplayInterval, props.pauseOnHover, isPlaying, isHovered, nextSlide]);
 
   // Handle pause on hover
   const handleMouseEnter = () => {
@@ -120,24 +174,6 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
     }
   };
 
-  // Get current mode settings
-  const getCurrentMode = () => {
-    switch(deviceMode) {
-      case 'mobileweb':
-        return props.slides[0].mode.mobileweb;
-      case 'mobileapp':
-        return props.slides[0].mode.mobileapp;
-      case 'tablet':
-        return props.slides[0].mode.tablet;
-      case 'web':
-      default:
-        return props.slides[0].mode.web;
-    }
-  };
-
-  const currentMode = getCurrentMode();
-  const slidesToShow = currentMode.slidesToShow;
-
   const resolveAssetUrl = (url?: string) => {
     if (!url) return '';
     if (url.startsWith('http://') || url.startsWith('https://')) return url;
@@ -145,7 +181,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
   };
 
   const buildLinkForSlide = (slide: Slide) => {
-    console.warn(slide)
+    console.warn(slide);
     switch (slide.link_type) {
       case 'NONE':
         return null;
@@ -155,11 +191,11 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
         const product: any = slide.product || {};
         const pdType = product?.pd_type || product?.product_type;
         const code = product?.code || '';
-         if (!code) return null;
+        if (!code) return null;
 
         return pdType === 'VARIANT'
-        ? `/variant/${code}`
-        : `model/${code}`;
+          ? `/${code}`
+          : `/model/${code}`;
       }
       case 'TAG': {
         const tag: any = slide.tag || {};
@@ -168,8 +204,8 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
       }
       case 'PAGE': {
         const page: any = slide.page || {};
-        const pageId = page._id
-        const pgType=page.page_type
+        const pageId = page._id;
+        const pgType = page.page_type;
         return `/page/${pageId}?type=${pgType}`;
       }
       default:
@@ -179,20 +215,42 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
 
   const handleSlideClick = (slide: Slide) => {
     const link = buildLinkForSlide(slide);
-    if (link === null) return;
+    if (link === null) {
+      // If no link, navigate to next slide
+      nextSlide();
+      return;
+    }
     if (typeof link === 'string') {
       if (link.startsWith('http')) {
-        window.open(link, '_blank');
+        window.open(link, slide.external_link?.target || '_blank');
       } else {
         window.location.href = link;
       }
       return;
     }
-    const queryString = Object.entries((link as any).query || {})
-      .map(([key, value]) => `${key}=${encodeURIComponent(value as string)}`)
-      .join('&');
-    const fullPath = `${(link as any).pathname}${queryString ? `?${queryString}` : ''}`;
-    window.location.href = fullPath;
+  };
+
+  // Calculate which group the current slide belongs to
+  const getCurrentGroupIndex = () => {
+    return Math.floor(currentSlide / slidesToShow);
+  };
+
+  // Calculate total number of groups needed
+  const getTotalGroups = () => {
+    return Math.ceil(totalSlides / slidesToShow);
+  };
+
+  // Calculate transform offset for slide animation
+  // Transform based on group index, not slide index
+  const calculateTransform = () => {
+    const groupIndex = getCurrentGroupIndex();
+    if (props.vertical) {
+      // Vertical sliding: moves up and down
+      return `translateY(-${groupIndex * 100}%)`;
+    } else {
+      // Horizontal sliding: moves left and right
+      return `translateX(-${groupIndex * 100}%)`;
+    }
   };
 
   return (
@@ -200,165 +258,240 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
       className="carousel-container"
       style={{
         position: 'relative',
-        width: '100%',
-        overflow: 'hidden'
+        height: props.height,
+        overflow: 'hidden',
+        width: '100%'
       }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       {/* Slides container */}
-      <div
-        className="carousel-slides"
-        style={{
-          display: 'flex',
-          width: '100%',
-          transition: `opacity ${props.speed}ms ease`,
-          flexDirection: props.vertical ? 'column' : 'row'
-        }}
-      >
-        {Array.from({ length: slidesToShow }).map((_, offset) => {
-          const slide = slides[(currentSlide + offset) % totalSlides];
-          const clickable = buildLinkForSlide(slide) !== null;
-          return (
-            <div
-              key={`${slide.sl_id}-${offset}`}
-              className="carousel-slide"
-              style={{
-                flex: `0 0 ${100 / slidesToShow}%`,
-                width: props.vertical ? '100%' : `${100 / slidesToShow}%`,
-                overflow: 'hidden',
-                display: 'block',
-                cursor: clickable ? 'pointer' : 'default'
-              }}
-              onClick={clickable ? () => handleSlideClick(slide) : undefined}
-            >
-              {slide.sl_type === 'video' ? (
-                <video
-                  src={resolveAssetUrl(slide.video?.url)}
-                  style={{ width: '100%', height: 'auto', display: 'block' }}
-                  autoPlay={props.autoplay}
-                  muted
-                  loop
-                  controls={!props.autoplay}
-                />
-              ) : (
-                <img
-                  src={resolveAssetUrl(slide.image?.url)}
-                  alt={slide.image?.alt || ''}
-                  style={{ width: '100%', height: 'auto', display: 'block' }}
-                />
-              )}
-            </div>
-          );
-        })}
-        
-      </div>
+      {totalSlides > 0 ? (
+        <div
+          className="carousel-slides"
+          style={{
+            display: 'flex',
+            height: '100%',
+            width: '100%',
+            // vertical = true: slides move up/down (column direction)
+            // vertical = false: slides move left/right (row direction)
+            flexDirection: props.vertical ? 'column' : 'row',
+            transition: `transform ${props.speed}ms ease-in-out`,
+            transform: calculateTransform(),
+            willChange: 'transform'
+          }}
+        >
+          {Array.from({ length: getTotalGroups() }).map((_, groupIndex) => {
+            // Calculate starting slide index for this group
+            const startIndex = groupIndex * slidesToShow;
+            // Calculate how many slides are in this group (last group may have fewer)
+            const slidesInGroup = Math.min(slidesToShow, totalSlides - startIndex);
+            
+            return (
+              <div
+                key={groupIndex}
+                className="carousel-group"
+                style={{
+                  flexShrink: 0,
+                  display: 'flex',
+                  // Items within each slide are ALWAYS in a horizontal row
+                  flexDirection: 'row',
+                  width: '100%',
+                  height: '100%',
+                  gap: '0px'
+                }}
+              >
+                {Array.from({ length: slidesToShow }).map((_, offset) => {
+                  const slideIndex = startIndex + offset;
+                  
+                  // If this position is beyond available slides, render empty space
+                  if (slideIndex >= totalSlides) {
+                    return (
+                      <div
+                        key={`empty-${offset}`}
+                        className="carousel-slide-empty"
+                        style={{
+                          flexShrink: 0,
+                          width: `${100 / slidesToShow}%`,
+                          height: '100%',
+                          // Empty space, no content
+                        }}
+                      />
+                    );
+                  }
+                  
+                  const slide = slides[slideIndex];
+                  
+                  return (
+                    <div
+                      key={`${slide.sl_id}-${offset}`}
+                      className="carousel-slide"
+                      style={{
+                        flexShrink: 0,
+                        // Items always take equal width in horizontal row
+                        width: `${100 / slidesToShow}%`,
+                        height: '100%',
+                        overflow: 'hidden',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        position: 'relative',
+                        cursor: 'pointer'
+                      }}
+                      onClick={() => handleSlideClick(slide)}
+                    >
+                      {slide.sl_type === 'video' ? (
+                        <video
+                          src={resolveAssetUrl(slide.video?.url)}
+                          style={{ 
+                            width: '100%', 
+                            height: '100%', 
+                            objectFit: props.objectFit as any,
+                            display: 'block',
+                            pointerEvents: 'none'
+                          }}
+                          autoPlay={props.autoplay}
+                          muted
+                          loop
+                          controls={!props.autoplay}
+                        />
+                      ) : (
+                        <img
+                          src={resolveAssetUrl(slide.image?.url)}
+                          alt={slide.image?.alt || ''}
+                          style={{ 
+                            width: '100%', 
+                            height: '100%', 
+                            objectFit: props.objectFit as any,
+                            display: 'block',
+                            pointerEvents: 'none'
+                          }}
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#999' }}>
+          No slides added yet
+        </div>
+      )}
 
       {/* Navigation arrows */}
       {props.sliderArrowVisible && totalSlides > slidesToShow && (
         <>
-         <button
-  className="carousel-arrow carousel-arrow-prev"
-  onClick={prevSlide}
-  style={{
-    position: 'absolute',
-    ...(props.vertical
-      ? { top: '10px', left: '50%', transform: 'translateX(-50%)' }
-      : { top: '50%', left: '1px', transform: 'translateY(-50%)' }),
-    zIndex: 10,
-    background: 'white', 
-    color: 'black',
-    border: '2px solid white', 
-    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
-    borderRadius: '15%',
-    width: '40px',
-    height: '60px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '20px',
-    fontWeight: 'bold',
-    transition: 'transform 0.2s ease-in-out',
-    
-  }}
->
-  {props.vertical ? '˄' : '‹'}
-</button>
-
-<button
-  className="carousel-arrow carousel-arrow-next"
-  onClick={nextSlide}
-  style={{
-    position: 'absolute',
-    ...(props.vertical
-      ? { bottom: '10px', left: '50%', transform: 'translateX(-50%)' }
-      : { top: '50%', right: '1px', transform: 'translateY(-50%)' }),
-    zIndex: 10,
-    background: 'white', 
-    color: 'black',
-    border: '2px solid white', 
-    boxShadow: '0 2px 6px rgba(0,0,0,0.5)', 
-    borderRadius: '15%',
-    width: '40px',
-    height: '60px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '20px',
-    fontWeight: 'bold',
-    transition: 'transform 0.2s ease-in-out',
-  }}
->
-  {props.vertical ? '˅' : '›'}
-</button>
-
+          <button
+            onClick={prevSlide}
+            onMouseEnter={() => setPrevButtonHovered(true)}
+            onMouseLeave={() => setPrevButtonHovered(false)}
+            style={{
+              position: 'absolute',
+              ...(props.vertical
+                ? { top: '8px', right: '16px' }
+                : { left: '8px', top: '50%', transform: 'translateY(-50%)' }
+              ),
+              background: prevButtonHovered ? 'rgba(255, 255, 255, 0.5)' : 'transparent',
+              transition: 'all 0.2s ease',
+              padding: '8px',
+              borderRadius: '4px',
+              boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+              zIndex: 10,
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            {props.vertical ? (
+              <span style={{ color: '#374151', fontSize: '16px', fontWeight: 'bold' }}>^</span>
+            ) : (
+              <span style={{ color: '#374151', fontSize: '20px', fontWeight: 'bold' }}>&lt;</span>
+            )}
+          </button>
+          <button
+            onClick={nextSlide}
+            onMouseEnter={() => setNextButtonHovered(true)}
+            onMouseLeave={() => setNextButtonHovered(false)}
+            style={{
+              position: 'absolute',
+              ...(props.vertical
+                ? { bottom: '8px', right: '16px' }
+                : { right: '8px', top: '50%', transform: 'translateY(-50%)' }
+              ),
+              background: nextButtonHovered ? 'rgba(255, 255, 255, 0.5)' : 'transparent',
+              transition: 'all 0.2s ease',
+              padding: '8px',
+              borderRadius: '4px',
+              boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+              zIndex: 10,
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            {props.vertical ? (
+              <span style={{ color: '#374151', fontSize: '16px', fontWeight: 'bold' }}>v</span>
+            ) : (
+              <span style={{ color: '#374151', fontSize: '20px', fontWeight: 'bold' }}>&gt;</span>
+            )}
+          </button>
         </>
       )}
 
       {/* Pagination dots */}
-      {props.pagingDotVisible && totalSlides > 1 && (
+      {props.pagingDotVisible && getTotalGroups() > 1 && (
         <div
           className="carousel-dots"
           style={{
             position: 'absolute',
             ...(props.vertical
-              ? { top: '50%', right: '10px', transform: 'translateY(-50%)', bottom: 'auto', left: 'auto' }
-              : { bottom: '15px', left: '0', right: '0' }
+              ? { top: '50%', right: '16px', transform: 'translateY(-50%)' }
+              : { bottom: '16px', left: '50%', transform: 'translateX(-50%)' }
             ),
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             flexDirection: props.vertical ? 'column' : 'row',
             gap: '8px',
-            zIndex: 100,
-            padding: props.vertical ? '8px 6px' : '6px 10px',
-          
-            borderRadius: props.vertical ? '12px' : '16px'
+            zIndex: 100
           }}
         >
-          {Array.from({ length: totalSlides }).map((_, index) => (
-            <button
-              key={index}
-              aria-label={`Go to slide ${index + 1}`}
-              className={`carousel-dot ${index === currentSlide ? 'active' : ''}`}
-              onClick={() => goToSlide(index)}
-              style={{
-                width: index === currentSlide ? '12px' : '10px',
-                height: index === currentSlide ? '12px' : '10px',
-                borderRadius: '50%',
-                border: 'none',
-                background: index === currentSlide ? '#000' : '#ccc',
-                cursor: 'pointer',
-                transition: 'all 200ms ease'
-              }}
-            />
-          ))}
+          {Array.from({ length: getTotalGroups() }).map((_, groupIndex) => {
+            const currentGroupIndex = getCurrentGroupIndex();
+            // Navigate to the first slide of the selected group
+            const goToGroup = () => {
+              const firstSlideInGroup = groupIndex * slidesToShow;
+              goToSlide(firstSlideInGroup);
+            };
+            
+            return (
+              <button
+                key={groupIndex}
+                aria-label={`Go to group ${groupIndex + 1}`}
+                onClick={goToGroup}
+                style={{
+                  width: currentGroupIndex === groupIndex ? '12px' : '10px',
+                  height: currentGroupIndex === groupIndex ? '12px' : '10px',
+                  borderRadius: '50%',
+                  border: 'none',
+                  background: currentGroupIndex === groupIndex ? '#000' : '#ccc',
+                  cursor: 'pointer',
+                  transition: 'all 200ms ease'
+                }}
+              />
+            );
+          })}
         </div>
       )}
     </div>
   );
 };
 
-export default CarouselComponent;
+export default CarouselComponent;