tee3apps-cms-sdk-react 0.0.33 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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

@@ -61,6 +61,7 @@ export interface CarouselProps {
   pagingDotVisible: boolean;
   objectFit: string;
   slides: SlidesData[] | Slide[][]; // Support both formats: SlidesData[] or nested array Slide[][]
+  mode?: SlideMode;
 }
 
 interface CarouselComponentMainProps {
@@ -77,20 +78,20 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
   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);
-  
+  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[]) || [];
@@ -102,29 +103,36 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
     // Fallback: empty array
     slides = [];
   }
-  
+
   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) {
+    // 1. Check if mode is at the root (props.mode)
+    const rootMode = props.mode;
+
+    // 2. Check if mode is inside slides (old format - slidesData.mode)
+    const nestedMode = (!isNestedArrayFormat && slidesData) ? slidesData.mode : null;
+
+    const activeMode = rootMode || nestedMode;
+
+    if (!activeMode) {
       // Return default mode based on device
-      const defaultSlidesToShow = deviceMode === 'mobileweb' || deviceMode === 'mobileapp' ? 1 : 
-                                  deviceMode === 'tablet' ? 2 : 1;
+      const defaultSlidesToShow = deviceMode === 'mobileweb' || deviceMode === 'mobileapp' ? 1 :
+        deviceMode === 'tablet' ? 2 : 1;
       return { slidesToShow: defaultSlidesToShow };
     }
-    
-    switch(deviceMode) {
+
+    switch (deviceMode) {
       case 'mobileweb':
-        return slidesData.mode.mobileweb || { slidesToShow: 1 };
+        return activeMode.mobileweb || { slidesToShow: 1 };
       case 'mobileapp':
-        return slidesData.mode.mobileapp || { slidesToShow: 1 };
+        return activeMode.mobileapp || { slidesToShow: 1 };
       case 'tablet':
-        return slidesData.mode.tablet || { slidesToShow: 1 };
+        return activeMode.tablet || { slidesToShow: 1 };
       case 'web':
       default:
-        return slidesData.mode.web || { slidesToShow: 1 };
+        return activeMode.web || { slidesToShow: 1 };
     }
   };
 
@@ -254,7 +262,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
   };
 
   return (
-    <div 
+    <div
       className="carousel-container"
       style={{
         position: 'relative',
@@ -286,7 +294,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
             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}
@@ -303,7 +311,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
               >
                 {Array.from({ length: slidesToShow }).map((_, offset) => {
                   const slideIndex = startIndex + offset;
-                  
+
                   // If this position is beyond available slides, render empty space
                   if (slideIndex >= totalSlides) {
                     return (
@@ -319,9 +327,9 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
                       />
                     );
                   }
-                  
+
                   const slide = slides[slideIndex];
-                  
+
                   return (
                     <div
                       key={`${slide.sl_id}-${offset}`}
@@ -343,9 +351,9 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
                       {slide.sl_type === 'video' ? (
                         <video
                           src={resolveAssetUrl(slide.video?.url)}
-                          style={{ 
-                            width: '100%', 
-                            height: '100%', 
+                          style={{
+                            width: '100%',
+                            height: '100%',
                             objectFit: props.objectFit as any,
                             display: 'block',
                             pointerEvents: 'none'
@@ -359,9 +367,9 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
                         <img
                           src={resolveAssetUrl(slide.image?.url)}
                           alt={slide.image?.alt || ''}
-                          style={{ 
-                            width: '100%', 
-                            height: '100%', 
+                          style={{
+                            width: '100%',
+                            height: '100%',
                             objectFit: props.objectFit as any,
                             display: 'block',
                             pointerEvents: 'none'
@@ -470,7 +478,7 @@ const CarouselComponent: React.FC<CarouselComponentMainProps> = ({
               const firstSlideInGroup = groupIndex * slidesToShow;
               goToSlide(firstSlideInGroup);
             };
-            
+
             return (
               <button
                 key={groupIndex}

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

@@ -8,27 +8,27 @@ interface PageImage {
 	url: string;
 	width: number;
 	height: number;
-  }
-  
-  interface PageId {
+}
+
+interface PageId {
 	_id: string;
 	name: string;
 	code: string;
 	image: PageImage;
 	isActive: boolean;
-  }
-  
-  interface Channel {
+}
+
+interface Channel {
 	_id: string;
 	name: string;
 	code: string;
 	isActive: boolean;
-  }
-  
-  interface PageDataItem {
+}
+
+interface PageDataItem {
 	page_id: any;
 	channel: Channel;
-  }
+}
 interface BrandImage {
 	shapeImageId: string;
 	shape: string;
@@ -64,7 +64,7 @@ interface GroupBrandDynamic {
 interface GroupBrandData {
 	static: GroupBrandStatic;
 	dynamic: GroupBrandDynamic;
-	showItems:BrandItem[];
+	showItems: BrandItem[];
 }
 
 interface HeaderTextStyle {
@@ -93,7 +93,7 @@ export interface GroupBrandComponentProps {
 	headerText: any;
 	type: string;
 	groupbrand: GroupBrandData;
-	showItems?:BrandItem[];
+	showItems?: BrandItem[];
 	selectedBrands?: BrandItem[];
 	items?: BrandItem[];
 	cardColor: string;
@@ -127,15 +127,15 @@ const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, de
 		// Safely fall back to web, then to 'NONE' if the specific layout is missing
 		if (!props.layout) return 'NONE';
 		switch (deviceMode) {
-			case 'mobileweb': return props.layout.mobileweb  || 'NONE';
-			case 'mobileapp': return props.layout.mobileapp  || 'NONE';
-			case 'tablet': return props.layout.tablet  || 'NONE';
+			case 'mobileweb': return props.layout.mobileweb || 'NONE';
+			case 'mobileapp': return props.layout.mobileapp || 'NONE';
+			case 'tablet': return props.layout.tablet || 'NONE';
 			case 'web':
 			default: return props.layout.web || 'NONE';
 		}
 	};
 
-	
+
 
 	const showHeader = getCurrentBooleanProp(props.showHeader);
 	const showBrandName = getCurrentBooleanProp(props.showProductName);
@@ -184,25 +184,25 @@ const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, de
 
 	const buildBrandHref = (item: BrandItem): string | null => {
 		console.log(item);
-		
+
 		// Check if item has pages and at least one page exists
 		if (item.pages && item.pages.length > 0) {
 			const firstPage = item.pages[0];
-			
+
 			// Check if the page is active
-				console.log(firstPage.page_id?._id);
-				// If page is active, use the brand page format
-				return `/page/${encodeURIComponent(firstPage.page_id)}`;
-			
+			console.log(firstPage.page_id?._id);
+			// If page is active, use the brand page format
+			return `/page/${encodeURIComponent(firstPage.page_id)}`;
+
 		}
-		
+
 		// Fallback if no pages exist
 		return null;
 	};
 
 	const Card = ({ item, large = false }: { item: BrandItem; large?: boolean }) => (
 		<a
-			href={buildBrandHref(item)|| undefined}
+			href={buildBrandHref(item) || undefined}
 			style={{ textDecoration: 'none', color: 'inherit', height: '100%', display: 'block' }}
 		>
 			<div
@@ -244,154 +244,167 @@ const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, de
 	);
 
 	return (
-		<div
-			style={{
-				border: '1px solid #e1e1e1',
-				width: '100%',
-				maxWidth: '100%',
-				borderRadius: '0px',
-				minHeight: '100px',
-				position: 'relative',
-				overflow: 'visible',
-				marginBottom: '20px',
-				marginTop: '0px',
-				display: 'flex',
-				flexDirection: 'column',
-				height: '100%'
-			}}
-			className='GroupBrandComponent'
-		>
-			{showHeader && (
-				<div
-					className="groupBrandHeader"
-					style={{
-						backgroundColor: props.headerBackground,
-						padding: '12px 16px',
-						borderRadius: '0px',
-						marginBottom: '4px',
-						display: 'flex',
-						alignItems: 'center',
-						justifyContent: 'space-between',
-						flexWrap: 'wrap',
-						gap: '12px',
-					}}
-				>
-					<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 || 'Brands'}
-					</p>
-
-					{currentLayout === 'NONE' && brands.length > 0 && (
-						<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'; }}
-							>
-								‹
-							</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'; }}
-							>
-								›
-							</button>
-						</div>
-					)}
-				</div>
-			)}
-
+		<>
+			<style>
+				{`
+				.groupBrandCarousel::-webkit-scrollbar {
+					display: none;
+				}
+				.groupBrandCarousel {
+					scrollbar-width: none;
+					-ms-overflow-style: none;
+				}
+			`}
+			</style>
 			<div
 				style={{
-					display: currentLayout === 'NONE' ? 'flex' : 'block',
-					overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
-					overflowY: currentLayout === 'NONE' ? 'hidden' : 'visible',
-					alignItems: currentLayout === 'NONE' ? 'stretch' : undefined,
-					gap: currentLayout === 'NONE' ? '12px' : '0',
-					padding: '12px',
-					scrollBehavior: 'smooth',
-					backgroundColor: props.cardColor || '#fff',
-					borderRadius: '8px',
+					border: '1px solid #e1e1e1',
+					width: '100%',
+					maxWidth: '100%',
+					borderRadius: '0px',
+					minHeight: '100px',
 					position: 'relative',
-					flex: 1,
-					minHeight: 0,
+					overflow: 'visible',
+					marginBottom: '20px',
+					marginTop: '0px',
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%'
 				}}
-				className="groupBrandCarousel"
+				className='GroupBrandComponent'
 			>
-				{brands.length > 0 ? (
-					currentLayout === 'NONE' ? (
-						brands.map((brand) => (
-							<div key={brand.code} style={{ minWidth: '150px', width: '150px', flexShrink: 0, display: 'flex', flexDirection: 'column', height: '100%' }}>
-								<Card item={brand} />
+				{showHeader && (
+					<div
+						className="groupBrandHeader"
+						style={{
+							backgroundColor: props.headerBackground,
+							padding: '12px 16px',
+							borderRadius: '0px',
+							marginBottom: '4px',
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'space-between',
+							flexWrap: 'wrap',
+							gap: '12px',
+						}}
+					>
+						<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 || 'Brands'}
+						</p>
+
+						{currentLayout === 'NONE' && brands.length > 0 && (
+							<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'; }}
+								>
+									‹
+								</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'; }}
+								>
+									›
+								</button>
 							</div>
-						))
-					) : currentLayout === 'SMALL' ? (
-						<div style={{ display: 'grid',   gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', padding: '8px' }}>
-							{brands.map((brand) => (
-								<Card key={brand.code} item={brand} />
-							))}
-						</div>
-					) : currentLayout === 'MEDIUM' ? (
-						<div style={{ display: 'grid',   gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', padding: '8px' }}>
-							{brands.map((brand) => (
-								<Card key={brand.code} item={brand} />
-							))}
-						</div>
-					) : currentLayout === 'MEDIUM_THREE' ? (
-						<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
-							{brands.length > 0 && (
-								<Card item={brands[0]} large />
-							)}
-							{brands.length > 1 && (
-								<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
-									{brands.slice(1).map((brand) => (
-										<Card key={brand.code} item={brand} />
-									))}
-								</div>
-							)}
-						</div>
-					) : null
-				) : (
-					<div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
-						<p>No brands available.</p>
+						)}
 					</div>
 				)}
+
+				<div
+					style={{
+						display: currentLayout === 'NONE' ? 'flex' : 'block',
+						overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
+						overflowY: currentLayout === 'NONE' ? 'hidden' : 'visible',
+						alignItems: currentLayout === 'NONE' ? 'stretch' : undefined,
+						gap: currentLayout === 'NONE' ? '12px' : '0',
+						padding: '12px',
+						scrollBehavior: 'smooth',
+						backgroundColor: props.cardColor || '#fff',
+						borderRadius: '8px',
+						position: 'relative',
+						flex: 1,
+						minHeight: 0,
+					}}
+					className="groupBrandCarousel"
+				>
+					{brands.length > 0 ? (
+						currentLayout === 'NONE' ? (
+							brands.map((brand) => (
+								<div key={brand.code} style={{ minWidth: '150px', width: '150px', flexShrink: 0, display: 'flex', flexDirection: 'column', height: '100%' }}>
+									<Card item={brand} />
+								</div>
+							))
+						) : currentLayout === 'SMALL' ? (
+							<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', padding: '8px' }}>
+								{brands.map((brand) => (
+									<Card key={brand.code} item={brand} />
+								))}
+							</div>
+						) : currentLayout === 'MEDIUM' ? (
+							<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', padding: '8px' }}>
+								{brands.map((brand) => (
+									<Card key={brand.code} item={brand} />
+								))}
+							</div>
+						) : currentLayout === 'MEDIUM_THREE' ? (
+							<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
+								{brands.length > 0 && (
+									<Card item={brands[0]} large />
+								)}
+								{brands.length > 1 && (
+									<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+										{brands.slice(1).map((brand) => (
+											<Card key={brand.code} item={brand} />
+										))}
+									</div>
+								)}
+							</div>
+						) : null
+					) : (
+						<div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
+							<p>No brands available.</p>
+						</div>
+					)}
+				</div>
 			</div>
-		</div>
+		</>
 	);
 };
 
-export default GroupBrandComponent
+export default GroupBrandComponent;