tee3apps-cms-sdk-react 0.0.33 → 0.0.35

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;