tee3apps-cms-sdk-react 0.0.32 → 0.0.34

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

@@ -135,11 +135,11 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
 	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 'mobileweb': return props.layout.mobileweb;
+			case 'mobileapp': return props.layout.mobileapp;
+			case 'tablet': return props.layout.tablet;
 			case 'web':
-			default: return props.layout.web ;
+			default: return props.layout.web;
 		}
 	};
 
@@ -186,247 +186,260 @@ const GroupCategoryComponent: React.FC<GroupCategoryComponentMainProps> = ({ pro
 	};
 
 	const buildCategoryHref = (item: CategoryItem): string | null => {
-        if (item.pages && item.pages.length > 0) {
-            const firstPage = item.pages[0];
+		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', height: '100%', display: 'block' }}>
-                    {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: 'flex-start',
-                        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 || getCategoryName(item.name) || ''}
-                                style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-                            />
-                        </div>
-                    )}
+			// Return only if page is active
+			if (firstPage.page_id) {
+				return `/page/${encodeURIComponent(firstPage.page_id)}?type=category`;
+			}
+		}
 
-                    {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',
-                            }}
-                        >
-                            {getCategoryName(item.name)}
-                        </div>
-                    )}
-                </div>
-            </Wrapper>
-        );
-    };
+		// No valid active page — don't return href
+		return null;
+	};
 
-	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='GroupCategoryComponent'
-		>
-			{showHeader && (
+	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', height: '100%', display: 'block' }}>
+					{children}
+				</a>
+			) : (
+				<>{children}</>
+			);
+		return (
+			<Wrapper>
 				<div
-					className="groupCategoryHeader"
+					className="categoryCard"
 					style={{
-						backgroundColor: props.headerBackground,
-						padding: '12px 16px',
-						borderRadius: '0px',
-						marginBottom: '4px',
+						height: '100%',
+						borderRadius: '8px',
+						overflow: 'hidden',
+						border: '1px solid #eee',
+						backgroundColor: '#fff',
 						display: 'flex',
+						flexDirection: 'column',
 						alignItems: 'center',
-						justifyContent: 'space-between',
-						flexWrap: 'wrap',
-						gap: '12px',
+						justifyContent: 'flex-start',
+						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)';
 					}}
 				>
-					<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>
+					{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 || getCategoryName(item.name) || ''}
+								style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+							/>
+						</div>
+					)}
 
-					{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>
+					{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',
+							}}
+						>
+							{getCategoryName(item.name)}
 						</div>
 					)}
 				</div>
-			)}
+			</Wrapper>
+		);
+	};
 
+	return (
+		<>
+			<style>
+				{`
+					.groupCategoryCarousel::-webkit-scrollbar {
+						display: none;
+					}
+					.groupCategoryCarousel {
+						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.carouselBackground || '#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="groupCategoryCarousel"
+				className='GroupCategoryComponent'
 			>
-				{categories.length > 0 ? (
-					currentLayout === 'NONE' ? (
-						categories.map((category) => (
-							<div key={category.code} style={{ minWidth: '150px', width: '150px', flexShrink: 0, display: 'flex', flexDirection: 'column', height: '100%' }}>
-								<Card item={category} />
+				{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>
-						))
-					) : 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
+					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.carouselBackground || '#fff',
+						borderRadius: '8px',
+						position: 'relative',
+						flex: 1,
+						minHeight: 0,
+					}}
+					className="groupCategoryCarousel"
+				>
+					{categories.length > 0 ? (
+						currentLayout === 'NONE' ? (
+							categories.map((category) => (
+								<div key={category.code} style={{ minWidth: '150px', width: '150px', flexShrink: 0, display: 'flex', flexDirection: 'column', height: '100%' }}>
+									<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>
-		</div>
+		</>
 	);
 };