tee3apps-cms-sdk-react 0.0.1

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

@@ -0,0 +1,425 @@
+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 CategoryImage {
+	shapeImageId: string;
+	shape: string;
+	isDynamic: boolean | string;
+	url: string;
+	width?: number;
+	height?: number;
+	alt?: string;
+}
+
+interface CategoryItem {
+	_id?: string;
+	code: string;
+	name: any;
+	image?: CategoryImage;
+	parent?: string | null;
+	pages?: PageDataItem[];
+	children?: CategoryItem[];
+	fullPath?: string;
+	isActive?: boolean;
+	isDeleted?: boolean;
+}
+
+interface GroupCategoryStatic {
+	_id: string;
+	code: string;
+	name: string;
+}
+
+interface GroupCategoryDynamic {
+	code: string;
+	name: { all: string };
+	channel: string;
+	list: CategoryItem[];
+	isActive?: boolean;
+}
+
+interface GroupCategoryData {
+	static: GroupCategoryStatic;
+	dynamic: GroupCategoryDynamic;
+	showItems: CategoryItem[];
+}
+
+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 GroupCategoryComponentProps {
+	nameData: any;
+	type: string;
+	groupcategory: GroupCategoryData;
+	showItems?: CategoryItem[];
+	selectedCategories?: CategoryItem[];
+	items?: CategoryItem[];
+	activeStatus: boolean;
+	headerImage: string;
+	headerTextStyle: HeaderTextStyle;
+	layout: DeviceLayoutProps;
+	showHeader: DeviceBooleanProps;
+	showCategoryName: DeviceBooleanProps;
+	isHorizontalScroll: DeviceBooleanProps;
+	headerBackground: string;
+	carouselBackground: string;
+	channelid: string;
+	selectedChannel: string;
+}
+
+interface GroupCategoryComponentMainProps {
+	props: GroupCategoryComponentProps;
+	deviceMode?: string;
+}
+
+const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ 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 = () => {
+		if (!props.layout) return 'NONE';
+		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 showHeader = getCurrentBooleanProp(props.showHeader);
+	const showCategoryName = getCurrentBooleanProp(props.showCategoryName);
+	const isHorizontalScroll = getCurrentBooleanProp(props.isHorizontalScroll);
+	const currentLayout = getCurrentLayout();
+
+	const getCategories = (): CategoryItem[] => {
+		if (props.groupcategory?.showItems) {
+			if (props.groupcategory?.showItems?.length) return props.groupcategory?.showItems;
+		}
+		return [];
+	};
+
+	const categories = getCategories();
+
+	// Carousel navigation buttons (layout NONE)
+	const scrollLeft = () => {
+		const carousel = document.querySelector('.groupCategoryCarousel');
+		if (carousel) {
+			(carousel as HTMLElement).scrollBy({ left: -200, behavior: 'smooth' });
+		}
+	};
+
+	const scrollRight = () => {
+		const carousel = document.querySelector('.groupCategoryCarousel');
+		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 buildCategoryHref = (item: CategoryItem): string | null => {
+        if (item.pages && item.pages.length > 0) {
+            const firstPage = item.pages[0];
+			console.log(firstPage.page_id);
+            // Return only if page is active
+            if (firstPage.page_id) {
+                return `/page/${encodeURIComponent(firstPage.page_id)}?type=category`;
+            }
+        }
+    
+        // No valid active page — don't return href
+        return null;
+    };
+
+	const Card = ({ item, large = false }: { item: CategoryItem; large?: boolean }) => {
+        const href = buildCategoryHref(item);
+        const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) =>
+            href ? (
+                <a href={href} style={{ textDecoration: 'none', color: 'inherit' }}>
+                    {children}
+                </a>
+            ) : (
+                <>{children}</>
+            );
+        return (
+            <Wrapper>
+                <div
+                    className="categoryCard"
+                    style={{
+                        height:'100%',
+
+                        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: href ? 'pointer' : 'default',
+                    }}
+                    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)';
+                    }}
+                >
+                    {item.image && (
+                        <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 || item.name?.all || ''}
+                                style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                            />
+                        </div>
+                    )}
+
+                    {showCategoryName && (
+                        <div
+                            style={{
+                                textAlign: 'center',
+                                fontSize: large ? '16px' : '14px',
+                                fontWeight: large ? 600 : 500,
+                                color: '#333',
+                                lineHeight: '1.4',
+                                height: large ? 'auto' : '40px',
+                                overflow: 'hidden',
+                                display: large ? 'block' : '-webkit-box',
+                                WebkitLineClamp: large ? undefined : 2,
+                                WebkitBoxOrient: 'vertical',
+                            }}
+                        >
+                            {item.name}
+                        </div>
+                    )}
+                </div>
+            </Wrapper>
+        );
+    };
+
+	return (
+		<div
+			style={{
+				border: '1px solid #e1e1e1',
+				width: '100%',
+				maxWidth: '100%',
+				borderRadius: '0px',
+				minHeight: '100px',
+				position: 'relative',
+				overflow: 'hidden',
+				marginBottom: '20px',
+				marginTop: '0px',
+				height:'100%'
+			}}
+			className='GroupCategoryComponent'
+		>
+			{showHeader && (
+				<div
+					className="groupCategoryHeader"
+					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.nameData || 'Categories'}
+					</p>
+
+					{currentLayout === 'NONE' && categories.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.carouselBackground || '#fff',
+					scrollbarWidth: 'thin',
+					borderRadius: '8px',
+					position: 'relative',
+					scrollbarColor: '#c1c1c1 transparent'
+					,				height:'100%'
+
+				}}
+				className="groupCategoryCarousel"
+			>
+				{categories.length > 0 ? (
+					currentLayout === 'NONE' ? (
+						categories.map((category) => (
+							<div key={category.code} style={{ minWidth: '150px' ,height:'30%'}}>
+								<Card item={category} />
+							</div>
+						))
+					) : currentLayout === 'SMALL' ? (
+						<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', padding: '8px' }}>
+							{categories.map((category) => (
+								<Card key={category.code} item={category} />
+							))}
+						</div>
+					) : currentLayout === 'MEDIUM' ? (
+						<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', padding: '8px' }}>
+							{categories.map((category) => (
+								<Card key={category.code} item={category} />
+							))}
+						</div>
+					) : currentLayout === 'MEDIUM_THREE' ? (
+						<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '8px' }}>
+							{categories.length > 0 && (
+								<Card item={categories[0]} large />
+							)}
+							{categories.length > 1 && (
+								<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+									{categories.slice(1).map((category) => (
+										<Card key={category.code} item={category} />
+									))}
+								</div>
+							)}
+						</div>
+					) : null
+				) : (
+					<div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
+						<p>No categories available.</p>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default GroupCategoryComponent;