feat: ask the user to add selected task if it is not included in the …

…today's plan (#2934) * feat: ask the user to add selected task if it is not included in the today's plan * feat: user should track planned task * feat: user should track planned task
ever-co · Aug 27, 2024 · 1de7728 · 1de7728
1 parent dd32864
commit 1de7728
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 15 deletions.
diff --git a/apps/web/app/hooks/features/useStartStopTimerHandler.ts b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
@@ -15,6 +15,12 @@ export function useStartStopTimerHandler() {
 		openModal: openEnforcePlannedTaskModal
 	} = useModal();
 
+	const {
+		isOpen: isEnforceTaskSoftModalOpen,
+		closeModal: _enforceTaskSoftCloseModal,
+		openModal: openEnforcePlannedTaskSoftModal
+	} = useModal();
+
 	const {
 		isOpen: isDailyPlanWorkHoursModalOpen,
 		closeModal: dailyPlanWorkHoursCloseModal,
@@ -54,13 +60,38 @@ export function useStartStopTimerHandler() {
 		[activeTeamTask?.id, hasPlan?.tasks]
 	);
 
+	const enforceTaskSoftCloseModal = () => {
+		_enforceTaskSoftCloseModal();
+		openAddTasksEstimationHoursModal();
+	};
+
 	const startStopTimerHandler = useCallback(() => {
 		const currentDate = new Date().toISOString().split('T')[0];
 		const dailyPlanSuggestionModalDate = window && window?.localStorage.getItem(DAILY_PLAN_SUGGESTION_MODAL_DATE);
 		const tasksEstimateHoursModalDate = window && window?.localStorage.getItem(TASKS_ESTIMATE_HOURS_MODAL_DATE);
 		const dailyPlanEstimateHoursModalDate =
 			window && window?.localStorage.getItem(DAILY_PLAN_ESTIMATE_HOURS_MODAL_DATE);
 
+		/**
+		 * Check if the active task is planned
+		 * If not, ask the user to add it to the today plan
+		 */
+		const handleCheckSelectedTaskOnTodayPlan = () => {
+			if (hasPlan) {
+				if (isActiveTaskPlaned) {
+					if (tasksEstimateHoursModalDate != currentDate) {
+						openAddTasksEstimationHoursModal();
+					} else {
+						startTimer();
+					}
+				} else {
+					openEnforcePlannedTaskSoftModal();
+				}
+			} else {
+				startTimer();
+			}
+		};
+
 		/**
 		 * Handle missing working hour for a daily plan
 		 */
@@ -81,7 +112,9 @@ export function useStartStopTimerHandler() {
 		 */
 		const handleMissingTasksEstimationHours = () => {
 			if (hasPlan) {
-				if (areAllTasksEstimated) {
+				if (tasksEstimateHoursModalDate != currentDate) {
+					handleCheckSelectedTaskOnTodayPlan();
+				} else if (areAllTasksEstimated) {
 					if (dailyPlanEstimateHoursModalDate != currentDate) {
 						handleMissingDailyPlanWorkHour();
 					} else {
@@ -149,6 +182,7 @@ export function useStartStopTimerHandler() {
 		openAddDailyPlanWorkHoursModal,
 		openAddTasksEstimationHoursModal,
 		openEnforcePlannedTaskModal,
+		openEnforcePlannedTaskSoftModal,
 		openSuggestDailyPlanModal,
 		requirePlan,
 		startTimer,
@@ -170,7 +204,10 @@ export function useStartStopTimerHandler() {
 			openAddTasksEstimationHoursModal,
 			isSuggestDailyPlanModalOpen,
 			suggestDailyPlanCloseModal,
-			openSuggestDailyPlanModal
+			openSuggestDailyPlanModal,
+			isEnforceTaskSoftModalOpen,
+			enforceTaskSoftCloseModal,
+			openEnforcePlannedTaskSoftModal
 		},
 		startStopTimerHandler
 	};

diff --git a/apps/web/components/shared/timer/timer-card.tsx b/apps/web/components/shared/timer/timer-card.tsx
@@ -9,7 +9,8 @@ import { PlayIcon } from '@components/ui/svgs/play-icon';
 import {
 	AddTasksEstimationHoursModal,
 	AddDailyPlanWorkHourModal,
-	EnforcePlanedTaskModal
+	EnforcePlanedTaskModal,
+	SuggestDailyPlanModal
 } from 'lib/features/daily-plan';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
@@ -22,7 +23,8 @@ const Timer = () => {
 		timerStatusFetching,
 		canRunTimer,
 		hasPlan,
-		timerSeconds
+		timerSeconds,
+		startTimer
 	} = useTimer();
 
 	const { activeTaskEstimation } = useTaskStatistics(timerSeconds);
@@ -49,6 +51,25 @@ const Timer = () => {
 			>
 				{timerStatus?.running ? <PauseIcon width={68} height={68} /> : <PlayIcon width={68} height={68} />}
 			</div>
+
+			<SuggestDailyPlanModal
+				isOpen={modals.isSuggestDailyPlanModalOpen}
+				closeModal={modals.suggestDailyPlanCloseModal}
+			/>
+
+			{/**
+			 * Track time on planned task (SOFT FLOW)
+			 */}
+			{hasPlan && activeTeamTask && (
+				<EnforcePlanedTaskModal
+					content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+					closeModal={modals.enforceTaskSoftCloseModal}
+					plan={hasPlan}
+					open={modals.isEnforceTaskSoftModalOpen}
+					task={activeTeamTask}
+				/>
+			)}
+
 			{hasPlan && hasPlan.tasks && (
 				<AddTasksEstimationHoursModal
 					isOpen={modals.isTasksEstimationHoursModalOpen}
@@ -66,8 +87,14 @@ const Timer = () => {
 				/>
 			)}
 
+			{/**
+			 * Track time on planned task (REQUIRE PLAN)
+			 */}
+
 			{requirePlan && hasPlan && activeTeamTask && (
 				<EnforcePlanedTaskModal
+					onOK={startTimer}
+					content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 					closeModal={modals.enforceTaskCloseModal}
 					plan={hasPlan}
 					open={modals.isEnforceTaskModalOpen}

diff --git a/apps/web/lib/features/daily-plan/enforce-planed-task-modal.tsx b/apps/web/lib/features/daily-plan/enforce-planed-task-modal.tsx
@@ -1,38 +1,37 @@
-import { useAuthenticateUser, useDailyPlan, useTimerView } from '@app/hooks';
+import { useAuthenticateUser, useDailyPlan } from '@app/hooks';
 import { IDailyPlan, ITeamTask } from '@app/interfaces';
 import { Button, Card, Modal, Text } from 'lib/components';
-import { useTranslations } from 'next-intl';
-import { useCallback } from 'react';
+import { ReactNode, useCallback } from 'react';
 
 interface IEnforcePlannedTaskModalProps {
 	open: boolean;
 	closeModal: () => void;
 	task: ITeamTask;
 	plan: IDailyPlan;
+	content: ReactNode;
+	onOK?: () => void;
 }
 
 export function EnforcePlanedTaskModal(props: IEnforcePlannedTaskModalProps) {
-	const { closeModal, task, open, plan } = props;
-	const t = useTranslations();
+	const { closeModal, task, open, plan, content, onOK } = props;
 	const { addTaskToPlan, addTaskToPlanLoading } = useDailyPlan();
-	const { startTimer } = useTimerView();
 	const { user } = useAuthenticateUser();
 
 	const handleAddTaskToPlan = useCallback(() => {
 		if (user?.employee && task && plan.id) {
 			addTaskToPlan({ employeeId: user.employee.id, taskId: task.id }, plan.id).then(() => {
 				closeModal();
-				startTimer();
+				onOK?.();
 			});
 		}
-	}, [addTaskToPlan, closeModal, plan.id, startTimer, task, user?.employee]);
+	}, [addTaskToPlan, closeModal, onOK, plan.id, task, user?.employee]);
 
 	return (
 		<Modal isOpen={open} closeModal={closeModal} className="w-[98%] md:w-[530px] relative" showCloseIcon={false}>
 			<Card className="w-full" shadow="custom">
 				<div className="w-full flex flex-col justify-between gap-6">
 					<Text.Heading as="h5" className="mb-3 text-center">
-						{t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
+						{content}
 					</Text.Heading>
 					<div className="w-full flex items-center justify-evenly">
 						<Button

diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
@@ -371,6 +371,7 @@ function TimerButtonCall({
 	);
 
 	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
+	const t = useTranslations();
 
 	/* It's a function that is called when the timer button is clicked. */
 	const startTimerWithTask = useCallback(async () => {
@@ -420,11 +421,25 @@ function TimerButtonCall({
 				disabled={activeTaskStatus ? disabled : task.status === 'closed' || !canTrack}
 				className={clsxm('h-14 w-14', className)}
 			/>
+
 			<SuggestDailyPlanModal
 				isOpen={modals.isSuggestDailyPlanModalOpen}
 				closeModal={modals.suggestDailyPlanCloseModal}
 			/>
 
+			{/**
+			 * Track time on planned task (SOFT FLOW)
+			 */}
+			{hasPlan && activeTeamTask && (
+				<EnforcePlanedTaskModal
+					content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+					closeModal={modals.enforceTaskSoftCloseModal}
+					plan={hasPlan}
+					open={modals.isEnforceTaskSoftModalOpen}
+					task={activeTeamTask}
+				/>
+			)}
+
 			{hasPlan && hasPlan.tasks && (
 				<AddTasksEstimationHoursModal
 					isOpen={modals.isTasksEstimationHoursModalOpen}
@@ -442,8 +457,14 @@ function TimerButtonCall({
 				/>
 			)}
 
+			{/**
+			 * Track time on planned task (REQUIRE PLAN)
+			 */}
+
 			{requirePlan && hasPlan && activeTeamTask && (
 				<EnforcePlanedTaskModal
+					onOK={startTimer}
+					content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 					closeModal={modals.enforceTaskCloseModal}
 					plan={hasPlan}
 					open={modals.isEnforceTaskModalOpen}

diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
@@ -36,7 +36,8 @@ export function Timer({ className }: IClassName) {
 		timerHanlder,
 		timerStatus,
 		disabled,
-		hasPlan
+		hasPlan,
+		startTimer
 	} = useTimerView();
 	const { modals, startStopTimerHandler } = useStartStopTimerHandler();
 	const { activeTeam, activeTeamTask } = useTeamTasks();
@@ -145,6 +146,18 @@ export function Timer({ className }: IClassName) {
 					isOpen={modals.isSuggestDailyPlanModalOpen}
 					closeModal={modals.suggestDailyPlanCloseModal}
 				/>
+				{/**
+				 * Track time on planned task (SOFT FLOW)
+				 */}
+				{hasPlan && activeTeamTask && (
+					<EnforcePlanedTaskModal
+						content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+						closeModal={modals.enforceTaskSoftCloseModal}
+						plan={hasPlan}
+						open={modals.isEnforceTaskSoftModalOpen}
+						task={activeTeamTask}
+					/>
+				)}
 
 				{hasPlan && hasPlan.tasks && (
 					<AddTasksEstimationHoursModal
@@ -163,8 +176,14 @@ export function Timer({ className }: IClassName) {
 					/>
 				)}
 
+				{/**
+				 * Track time on planned task (REQUIRE PLAN)
+				 */}
+
 				{requirePlan && hasPlan && activeTeamTask && (
 					<EnforcePlanedTaskModal
+						onOK={startTimer}
+						content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 						closeModal={modals.enforceTaskCloseModal}
 						plan={hasPlan}
 						open={modals.isEnforceTaskModalOpen}
@@ -177,10 +196,11 @@ export function Timer({ className }: IClassName) {
 }
 
 export function MinTimerFrame({ className }: IClassName) {
-	const { hours, minutes, seconds, ms_p, timerStatus, disabled, hasPlan } = useTimerView();
+	const { hours, minutes, seconds, ms_p, timerStatus, disabled, hasPlan, startTimer } = useTimerView();
 	const { modals, startStopTimerHandler } = useStartStopTimerHandler();
 	const { activeTeam, activeTeamTask } = useTeamTasks();
 	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
+	const t = useTranslations();
 
 	return (
 		<div
@@ -225,6 +245,19 @@ export function MinTimerFrame({ className }: IClassName) {
 				closeModal={modals.suggestDailyPlanCloseModal}
 			/>
 
+			{/**
+			 * Track time on planned task (SOFT FLOW)
+			 */}
+			{hasPlan && activeTeamTask && (
+				<EnforcePlanedTaskModal
+					content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+					closeModal={modals.enforceTaskSoftCloseModal}
+					plan={hasPlan}
+					open={modals.isEnforceTaskSoftModalOpen}
+					task={activeTeamTask}
+				/>
+			)}
+
 			{hasPlan && hasPlan.tasks && (
 				<AddTasksEstimationHoursModal
 					isOpen={modals.isTasksEstimationHoursModalOpen}
@@ -242,8 +275,14 @@ export function MinTimerFrame({ className }: IClassName) {
 				/>
 			)}
 
+			{/**
+			 * Track time on planned task (REQUIRE PLAN)
+			 */}
+
 			{requirePlan && hasPlan && activeTeamTask && (
 				<EnforcePlanedTaskModal
+					onOK={startTimer}
+					content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 					closeModal={modals.enforceTaskCloseModal}
 					plan={hasPlan}
 					open={modals.isEnforceTaskModalOpen}