Merge pull request #483 from BinaryStudioAcademy/482-fix-export-button-for-demo

fix(frontend): temporay fix for demo cy-482

Author: NazarKovtun1

apps/frontend/src/pages/plan-style-overview/components/plan-actions/plan-actions.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import {
@@ -17,6 +17,7 @@ import { useLocation } from "~/libs/hooks/hooks.js";
 import styles from "./styles.module.css";
 
 type Properties = {
+	handleConfirmCalendarDownload?: () => void;
 	isAuthenticated: boolean;
 	isDownloading: boolean;
 	onChooseStyle: () => void;
@@ -26,21 +27,42 @@ type Properties = {
 };
 
 const PlanActions: React.FC<Properties> = ({
+	handleConfirmCalendarDownload,
 	isAuthenticated,
 	isDownloading,
 	onChooseStyle,
 	onDownload,
 	onEdit,
 	onGoToDashboard,
 }: Properties) => {
+	const RESPONSIVE_BREAKPOINT = 768;
 	const location = useLocation();
+	const [isMobile, setIsMobile] = useState<boolean>(false);
+
+	useEffect(() => {
+		const checkMobile = (): void => {
+			setIsMobile(window.innerWidth <= RESPONSIVE_BREAKPOINT);
+		};
+
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+
+		return (): void => {
+			window.removeEventListener("resize", checkMobile);
+		};
+	}, []);
+
 	const handleEditClick = useCallback((): void => {
 		onEdit();
 	}, [onEdit]);
 
 	const handleDownloadClick = useCallback((): void => {
-		onDownload();
-	}, [onDownload]);
+		if (isMobile && typeof handleConfirmCalendarDownload === "function") {
+			handleConfirmCalendarDownload();
+		} else {
+			onDownload();
+		}
+	}, [onDownload, isMobile, handleConfirmCalendarDownload]);
 
 	const handleGoToDashboardClick = useCallback((): void => {
 		onGoToDashboard();

apps/frontend/src/pages/plan-style-overview/components/plan-style-category/plan-style-category.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { LuCalendarArrowDown } from "react-icons/lu";
 
 import {
@@ -28,6 +28,7 @@ const PlanStyleCategory: React.FC<Properties> = ({
 	onSelect,
 	selectedCategory,
 }: Properties) => {
+	const RESPONSIVE_BREAKPOINT = 768;
 	const handleSelectPdf = useCallback((): void => {
 		onSelect(PlanCategoryId.PDF);
 	}, [onSelect]);
@@ -40,11 +41,27 @@ const PlanStyleCategory: React.FC<Properties> = ({
 		onSelect(PlanCategoryId.DESKTOP);
 	}, [onSelect]);
 
+	const [isMobile, setIsMobile] = useState<boolean>(false);
+
+	useEffect(() => {
+		const checkMobile = (): void => {
+			setIsMobile(window.innerWidth <= RESPONSIVE_BREAKPOINT);
+		};
+
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+
+		return (): void => {
+			window.removeEventListener("resize", checkMobile);
+		};
+	}, []);
+
 	return (
 		<div className={styles["header-buttons"]}>
 			<Button
 				className={styles["header-buttons-button"]}
 				icon={<FileIcon aria-hidden="true" />}
+				isDisabled={isMobile}
 				label="PDF"
 				onClick={handleSelectPdf}
 				size="small"
@@ -56,6 +73,7 @@ const PlanStyleCategory: React.FC<Properties> = ({
 				className={styles["header-buttons-button"]}
 				icon={<SmartphoneIcon aria-hidden="true" />}
 				iconOnlySize="large"
+				isDisabled={isMobile}
 				label="Mobile Wallpaper"
 				onClick={handleSelectMobile}
 				size="small"
@@ -66,6 +84,7 @@ const PlanStyleCategory: React.FC<Properties> = ({
 			<Button
 				className={styles["header-buttons-button"]}
 				icon={<MonitorIcon aria-hidden="true" />}
+				isDisabled={isMobile}
 				label="Desktop Wallpaper"
 				onClick={handleSelectDesktop}
 				size="small"
@@ -81,7 +100,7 @@ const PlanStyleCategory: React.FC<Properties> = ({
 						styles["download-button"],
 					)}
 					icon={<LuCalendarArrowDown aria-hidden="true" />}
-					isDisabled={Boolean(actionButtonDisabled)}
+					isDisabled={isMobile || Boolean(actionButtonDisabled)}
 					label={actionButtonLabel}
 					onClick={onActionButtonClick}
 					size="small"

apps/frontend/src/pages/plan-style-overview/plan-style-overview.tsx

@@ -36,6 +36,20 @@ import {
 import styles from "./styles.module.css";
 
 const PlanStyleOverview: React.FC = () => {
+	const RESPONSIVE_BREAKPOINT = 768;
+	const [isMobile, setIsMobile] = useState<boolean>(false);
+	useEffect(() => {
+		const checkMobile = (): void => {
+			setIsMobile(window.innerWidth <= RESPONSIVE_BREAKPOINT);
+		};
+
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+
+		return (): void => {
+			window.removeEventListener("resize", checkMobile);
+		};
+	}, []);
 	const user = useAppSelector((state) => state.auth.user);
 	const currentPlan = useAppSelector(({ plan }) => plan.plan);
 	const isAuthenticated = Boolean(user);
@@ -152,17 +166,25 @@ const PlanStyleOverview: React.FC = () => {
 	}
 
 	return (
-		<div className={getClassNames("grid-pattern", styles["page-container"])}>
+		<div
+			className={getClassNames(
+				"grid-pattern",
+				styles["page-container"],
+				isMobile && styles["mobile-padding-top"],
+			)}
+		>
 			<AppHeader />
-			<div className={styles["header-section"]}>
-				<PlanStyleCategory
-					actionButtonDisabled={isCalendarDownloading}
-					actionButtonLabel="Calendar File"
-					onActionButtonClick={handleOpenCalendarModal}
-					onSelect={handleCategorySelect}
-					selectedCategory={selectedCategory}
-				/>
-			</div>
+			{!isMobile && (
+				<div className={styles["header-section"]}>
+					<PlanStyleCategory
+						actionButtonDisabled={isCalendarDownloading}
+						actionButtonLabel="Calendar File"
+						onActionButtonClick={handleOpenCalendarModal}
+						onSelect={handleCategorySelect}
+						selectedCategory={selectedCategory}
+					/>
+				</div>
+			)}
 			<div className="flow-loose-xl">
 				<div className={getClassNames(styles["container"])}>
 					<div className={getClassNames("wrapper", styles["plan-content"])}>
@@ -184,6 +206,7 @@ const PlanStyleOverview: React.FC = () => {
 
 				<div className={styles["actions-section"]}>
 					<PlanActions
+						handleConfirmCalendarDownload={handleOpenCalendarModal}
 						isAuthenticated={isAuthenticated}
 						isDownloading={pdfExportStatus === DataStatus.PENDING}
 						onChooseStyle={handleChooseStyle}

apps/frontend/src/pages/plan-style-overview/styles.module.css

@@ -6,6 +6,10 @@
 	padding-bottom: var(--space-xl);
 }
 
+.mobile-padding-top {
+	padding-top: 38px;
+}
+
 .container {
 	position: relative;
 	display: flex;