tee3apps-cms-sdk-react 0.0.1

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

@@ -0,0 +1,391 @@
+import React from 'react'
+import { Linodeurl } from '../../const';
+
+interface PageImage {
+	shapeImageId: string;
+	shape: string;
+	isDynamic: string;
+	url: string;
+	width: number;
+	height: number;
+  }
+  
+  interface PageId {
+	_id: string;
+	name: string;
+	code: string;
+	image: PageImage;
+	isActive: boolean;
+  }
+  
+  interface Channel {
+	_id: string;
+	name: string;
+	code: string;
+	isActive: boolean;
+  }
+  
+  interface PageDataItem {
+	page_id: any;
+	channel: Channel;
+  }
+interface BrandImage {
+	shapeImageId: string;
+	shape: string;
+	isDynamic: boolean | string;
+	url: string;
+	width?: number;
+	height?: number;
+	alt?: string;
+}
+
+interface BrandItem {
+	_id?: string;
+	code: string;
+	name: any;
+	image: BrandImage;
+	page?: string;
+	pages?: PageDataItem[];
+}
+
+interface GroupBrandStatic {
+	_id: string;
+	code: string;
+	name: string;
+}
+
+interface GroupBrandDynamic {
+	code: string;
+	name: { all: string };
+	list: BrandItem[];
+	isActive?: boolean;
+}
+
+interface GroupBrandData {
+	static: GroupBrandStatic;
+	dynamic: GroupBrandDynamic;
+	showItems:BrandItem[];
+}
+
+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 GroupBrandComponentProps {
+	headerText: any;
+	type: string;
+	groupbrand: GroupBrandData;
+	showItems?:BrandItem[];
+	selectedBrands?: BrandItem[];
+	items?: BrandItem[];
+	cardColor: string;
+	showProductName: DeviceBooleanProps;
+	headerTextStyle: HeaderTextStyle;
+	layout: DeviceLayoutProps;
+	style: DeviceLayoutProps;
+	showHeader: DeviceBooleanProps;
+	isHorizontalScroll: DeviceBooleanProps;
+	headerBackground: string;
+}
+
+interface GroupBrandComponentMainProps {
+	props: GroupBrandComponentProps;
+	deviceMode?: string;
+}
+
+const GroupBrandComponent: React.FC<GroupBrandComponentMainProps> = ({ props, deviceMode = 'web' }) => {
+	const getCurrentBooleanProp = (prop?: DeviceBooleanProps) => {
+		if (!prop) return false;
+		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 = () => {
+		// 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 'web':
+			default: return props.layout.web || 'NONE';
+		}
+	};
+
+	
+
+	const showHeader = getCurrentBooleanProp(props.showHeader);
+	const showBrandName = getCurrentBooleanProp(props.showProductName);
+	const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
+	const currentLayout = getCurrentLayout();
+	const currentStyle = 'NONE'
+
+	const getBrands = (): BrandItem[] => {
+		if (props.groupbrand?.showItems) {
+			// if (props.items && props.items.length) return props.items;
+			if (props.groupbrand?.showItems?.length) return props.groupbrand?.showItems;
+		}
+		// if (props.selectedBrands && props.selectedBrands.length) return props.selectedBrands;
+		return [];
+	};
+
+	const brands = getBrands();
+
+	// Carousel navigation buttons (layout NONE)
+	const scrollLeft = () => {
+		const carousel = document.querySelector('.groupBrandCarousel');
+		if (carousel) {
+			(carousel as HTMLElement).scrollBy({ left: -200, behavior: 'smooth' });
+		}
+	};
+
+	const scrollRight = () => {
+		const carousel = document.querySelector('.groupBrandCarousel');
+		if (carousel) {
+			(carousel as HTMLElement).scrollBy({ left: 200, behavior: 'smooth' });
+		}
+	};
+
+	const getImageUrl = (url: string) => {
+		if (!url) return '';
+		if (url.startsWith('http://') || url.startsWith('https://')) return url;
+		return `${Linodeurl}${url}`;
+	};
+
+	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)}`;
+			
+		}
+		
+		// Fallback if no pages exist
+		return null;
+	};
+
+	const Card = ({ item, large = false }: { item: BrandItem; large?: boolean }) => (
+		<a
+			href={buildBrandHref(item)|| undefined}
+			style={{ textDecoration: 'none', color: 'inherit' }}
+		>
+			<div
+				className="brandCard"
+				style={{
+					height: 'auto',
+					borderRadius: '8px',
+					overflow: 'hidden',
+					border: '1px solid #eee',
+					backgroundColor: '#fff',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					justifyContent: 'center',
+					padding: large ? '16px' : '12px',
+					boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+					transition: 'transform 0.2s ease',
+					cursor: 'pointer'
+				}}
+				onMouseOver={(e) => {
+					(e.currentTarget as HTMLDivElement).style.transform = 'translateY(-2px)';
+					(e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 8px rgba(0,0,0,0.15)';
+				}}
+				onMouseOut={(e) => {
+					(e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)';
+					(e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+				}}
+			>
+				<div style={{ height: large ? '160px' : '120px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: large ? '12px' : '8px' }}>
+					<img src={getImageUrl(item.image.url)} alt={item.image.alt || ''} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+				</div>
+				{showBrandName && (
+					<div style={{ textAlign: 'center', fontSize: large ? '16px' : '14px', fontWeight: large ? 600 as any : 500 as any, color: '#333', lineHeight: '1.4', height: large ? 'auto' : '40px', overflow: 'hidden', display: large ? 'block' : '-webkit-box', WebkitLineClamp: large ? undefined as any : 2, WebkitBoxOrient: 'vertical' as any }}>
+						{item.name}
+					</div>
+				)}
+			</div>
+		</a>
+	);
+
+	return (
+		<div
+			style={{
+				border: '1px solid #e1e1e1',
+				width: '100%',
+				maxWidth: '100%',
+				borderRadius: '0px',
+				minHeight: '100px',
+				position: 'relative',
+				overflow: 'hidden',
+				marginBottom: '20px',
+				marginTop: '0px'
+			}}
+			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>
+			)}
+
+			<div
+				style={{
+					display: currentLayout === 'NONE' ? 'flex' : 'block',
+					overflowX: currentLayout === 'NONE' ? (isHorizontalScroll ? 'auto' : 'hidden') : 'visible',
+					gap: currentLayout === 'NONE' ? '12px' : '0',
+					padding: '12px',
+					scrollBehavior: 'smooth',
+					backgroundColor: props.cardColor || '#fff',
+					scrollbarWidth: 'thin',
+					borderRadius: '8px',
+					position: 'relative',
+					scrollbarColor: '#c1c1c1 transparent'
+				}}
+				className="groupBrandCarousel"
+			>
+				{brands.length > 0 ? (
+					currentLayout === 'NONE' ? (
+						brands.map((brand) => (
+							currentStyle === 'NONE' ? (
+								<div key={brand.code} style={{ minWidth: '150px' }}>
+									<Card item={brand} />
+								</div>
+							) : (
+								<div key={brand.code} style={{ minWidth: '150px' }}>
+									<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>
+	);
+};
+
+export default GroupBrandComponent