Merge pull request #3489 from ever-co/feat/update-offline-screen-conn…

…ection-interruption [Feat]: Update Offline Screen for Network Interruption
ever-co · Dec 28, 2024 · 2798295 · 2798295
2 parents e9ff213 + 92e20f8
commit 2798295
Show file tree

Hide file tree

Showing 17 changed files with 136 additions and 86 deletions.
diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
@@ -2,7 +2,7 @@
 
 'use client';
 import React, { useEffect, useState } from 'react';
-import { useOrganizationTeams } from '@app/hooks';
+import { useOrganizationTeams, useTimerView } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
 import { withAuthentication } from 'lib/app/authenticator';
@@ -34,6 +34,8 @@ function MainPage() {
 	const t = useTranslations();
 	const [headerSize] = useState(10);
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
+	const { timerStatus } = useTimerView();
+
 	const [fullWidth, setFullWidth] = useAtom(fullWidthState);
 	const [view, setView] = useAtom(headerTabs);
 	const path = usePathname();
@@ -56,7 +58,7 @@ function MainPage() {
 	}, [setFullWidth]);
 
 	if (!online) {
-		return <Offline />;
+		return <Offline showTimer={timerStatus?.running} />;
 	}
 	return (
 		<>

diff --git a/apps/web/app/interfaces/hooks.ts b/apps/web/app/interfaces/hooks.ts
@@ -110,6 +110,7 @@ export interface IDrowDownData {
 export type IClassName<T = object> = {
 	className?: string;
 	fullWidth?: boolean;
+	showTimerButton?: boolean,
 	type?: 'VERTICAL' | 'HORIZONTAL';
 } & T;
 

diff --git a/apps/web/components/pages/offline/index.tsx b/apps/web/components/pages/offline/index.tsx
@@ -1,20 +1,36 @@
+import { Timer } from '@/lib/features';
+import { cn } from '@/lib/utils';
 import SadCry from '@components/ui/svgs/sad-cry';
 import { Text } from 'lib/components';
 import { useTranslations } from 'next-intl';
-
-function Offline() {
+interface IPropsOffline {
+	showTimer?: boolean
+}
+function Offline({ showTimer }: IPropsOffline) {
 	const t = useTranslations();
-
 	return (
 		<div className="mt-28 flex flex-col gap-7 items-center">
 			<div className="m-auto relative flex justify-center items-center gap-4 text-center ">
 				<SadCry width={97} height={97} />
-				<Text className="text-[78px] font-semibold text-chetwodeBlue">Offline!</Text>
+				<Text className="text-[78px] font-semibold text-chetwodeBlue">{t('pages.offline.STATUS_NETWORK')}</Text>
 			</div>
 
 			<Text className="text-[40px] font-bold text-center text-[#282048] dark:text-light--theme">
 				{t('pages.offline.HEADING_TITLE')}
 			</Text>
+			<div className="flex flex-col gap-4">
+				<Text className="text-[20px] font-normal text-center text-gray-400">
+					{t('pages.offline.HEADING_SUB_DESCRIPTION')}
+				</Text>
+			</div>
+			{showTimer && <Timer
+				showTimerButton={false}
+				className={cn(
+					'p-5 rounded-2xl shadow-xlcard',
+					'dark:border-[0.125rem] dark:border-[#28292F]',
+					'dark:bg-[#1B1D22]'
+				)}
+			/>}
 			<div className="flex flex-col gap-4">
 				<Text className="text-[20px] font-normal text-center text-gray-400">
 					{t('pages.offline.HEADING_DESCRIPTION')}

diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
@@ -18,7 +18,7 @@ import { useCallback, useMemo } from 'react';
 import { AddTasksEstimationHoursModal, EnforcePlanedTaskModal, SuggestDailyPlanModal } from '../daily-plan';
 import { useStartStopTimerHandler } from '@app/hooks/features/useStartStopTimerHandler';
 
-export function Timer({ className }: IClassName) {
+export function Timer({ className, showTimerButton = true }: IClassName) {
 	const t = useTranslations();
 
 	const {
@@ -86,13 +86,12 @@ export function Timer({ className }: IClassName) {
 					<div className="w-full mx-auto">
 						<Text.Heading
 							as="h3"
-							className={`text-4xl w-[200px] lg:text-start tracking-wide font-normal ${
-								timerStatus?.running &&
+							className={`text-4xl w-[200px] lg:text-start tracking-wide font-normal ${timerStatus?.running &&
 								timerStatus?.lastLog?.source &&
 								timerStatus?.lastLog?.source !== TimerSource.TEAMS
-									? 'text-[#888] dark:text-[#888]'
-									: ''
-							} `}
+								? 'text-[#888] dark:text-[#888]'
+								: ''
+								} `}
 						>
 							{pad(hours)}:{pad(minutes)}:{pad(seconds)}
 							<span className="text-sm">:{pad(ms_p)}</span>
@@ -117,68 +116,74 @@ export function Timer({ className }: IClassName) {
 					</div>
 				</div>
 			</div>
-			<VerticalSeparator />
-			<div className="w-1/4 xl:w-2/5 h-fit flex justify-center items-center">
-				<Tooltip
-					label={!canRunTimer ? t('timer.START_TIMER') : osSpecificTimerTooltipLabel}
-					placement="top-start"
-					// If timer is running at some other source and user may or may not have selected the task
-					// enabled={
-					// 	!canRunTimer && timerStatus?.lastLog?.source !== TimerSource.TEAMS
-					// }
-				>
-					<TimerButton
-						onClick={startStopTimerHandler}
-						running={timerStatus?.running}
-						disabled={
+			{
+				showTimerButton && (
+					<>
+						<VerticalSeparator />
+						<div className="w-1/4 xl:w-2/5 h-fit flex justify-center items-center">
+							<Tooltip
+								label={!canRunTimer ? t('timer.START_TIMER') : osSpecificTimerTooltipLabel}
+								placement="top-start"
 							// If timer is running at some other source and user may or may not have selected the task
-							!canRunTimer || (disabled && timerStatus?.lastLog?.source !== TimerSource.TEAMS)
-						}
-					/>
-				</Tooltip>
+							// enabled={
+							// 	!canRunTimer && timerStatus?.lastLog?.source !== TimerSource.TEAMS
+							// }
+							>
+								<TimerButton
+									onClick={startStopTimerHandler}
+									running={timerStatus?.running}
+									disabled={
+										// If timer is running at some other source and user may or may not have selected the task
+										!canRunTimer || (disabled && timerStatus?.lastLog?.source !== TimerSource.TEAMS)
+									}
+								/>
+							</Tooltip>
 
-				<SuggestDailyPlanModal
-					isOpen={modals.isSuggestDailyPlanModalOpen}
-					closeModal={modals.suggestDailyPlanCloseModal}
-				/>
-				{/**
+							<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 && 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}
-						closeModal={modals.tasksEstimationHoursCloseModal}
-						plan={hasPlan}
-						tasks={hasPlan.tasks}
-					/>
-				)}
+							{hasPlan && hasPlan.tasks && (
+								<AddTasksEstimationHoursModal
+									isOpen={modals.isTasksEstimationHoursModalOpen}
+									closeModal={modals.tasksEstimationHoursCloseModal}
+									plan={hasPlan}
+									tasks={hasPlan.tasks}
+								/>
+							)}
 
-				{/**
+							{/**
 				 * 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}
-						task={activeTeamTask}
-						openDailyPlanModal={modals.openAddTasksEstimationHoursModal}
-					/>
-				)}
-			</div>
+							{requirePlan && hasPlan && activeTeamTask && (
+								<EnforcePlanedTaskModal
+									onOK={startTimer}
+									content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
+									closeModal={modals.enforceTaskCloseModal}
+									plan={hasPlan}
+									open={modals.isEnforceTaskModalOpen}
+									task={activeTeamTask}
+									openDailyPlanModal={modals.openAddTasksEstimationHoursModal}
+								/>
+							)}
+						</div>
+					</>
+				)
+			}
 		</div>
 	);
 }

diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
@@ -611,8 +611,10 @@
 			"LINK_LABEL": "الذهاب إلى الصفحة الرئيسية"
 		},
 		"offline": {
-			"HEADING_TITLE": "انقطاع الشبكة!",
-			"HEADING_DESCRIPTION": "أنت غير متصل حاليًا، يرجى التحقق من اتصالك بالإنترنت..."
+			"HEADING_TITLE": "تم قطع الشبكة!",
+			"HEADING_SUB_DESCRIPTION": "عفوًا، فقدناك. لا تقلق، الوقت ما زال يتم تتبعه.",
+			"HEADING_DESCRIPTION": "ستتمكن من متابعة العمل في تطبيق الويب بمجرد استعادة الاتصال.",
+			"STATUS_NETWORK": "غير متصل!"
 		},
 		"error": {
 			"TITLE": "خطأ",

diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
@@ -612,7 +612,9 @@
 		},
 		"offline": {
 			"HEADING_TITLE": "Мрежата е прекъсната!",
-			"HEADING_DESCRIPTION": "В момента сте извън линия, моля, проверете интернет връзката си..."
+			"HEADING_SUB_DESCRIPTION": "Опа, изгубихме ви. Не се притеснявайте, времето ви все още се отчита.",
+			"HEADING_DESCRIPTION": "Ще можете да продължите да работите в уеб приложението, след като връзката ви бъде възстановена.",
+			"STATUS_NETWORK": "Офлайн!"
 		},
 		"error": {
 			"TITLE": "грешка!",

diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
@@ -612,7 +612,9 @@
 		},
 		"offline": {
 			"HEADING_TITLE": "Netzwerk getrennt!",
-			"HEADING_DESCRIPTION": "Sie sind derzeit offline, bitte überprüfen Sie Ihre Internetverbindung..."
+			"HEADING_SUB_DESCRIPTION": "Ups, wir haben Sie verloren. Keine Sorge, Ihre Zeit wird weiterhin erfasst.",
+			"HEADING_DESCRIPTION": "Sie können in der Web-App weiterarbeiten, sobald Ihre Verbindung wiederhergestellt ist.",
+			"STATUS_NETWORK": "Offline!"
 		},
 		"error": {
 			"TITLE": "Error !",

diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
@@ -612,7 +612,9 @@
 		},
 		"offline": {
 			"HEADING_TITLE": "Network Disconnected!",
-			"HEADING_DESCRIPTION": "Your network is offline, please check your internet connection..."
+			"HEADING_SUB_DESCRIPTION": "Oops, we lost you. Don't worry, your time is still tracking.",
+			"HEADING_DESCRIPTION": "You will be able to continue working in the web app once your connection is restored.",
+			"STATUS_NETWORK": "Offline!"
 		},
 		"error": {
 			"TITLE": "Error !",

diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
@@ -611,8 +611,10 @@
 			"LINK_LABEL": "Ir a la página de inicio"
 		},
 		"offline": {
-			"HEADING_TITLE": "¡Red Desconectada!",
-			"HEADING_DESCRIPTION": "Actualmente estás desconectado, por favor verifica tu conexión a Internet..."
+			"HEADING_TITLE": "¡Red desconectada!",
+			"HEADING_SUB_DESCRIPTION": "Vaya, te hemos perdido. No te preocupes, tu tiempo sigue siendo registrado.",
+			"HEADING_DESCRIPTION": "Podrás continuar trabajando en la aplicación web una vez que se restablezca tu conexión.",
+			"STATUS_NETWORK": "¡Desconectado!"
 		},
 		"error": {
 			"TITLE": "Error !",

diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
@@ -612,7 +612,9 @@
 		},
 		"offline": {
 			"HEADING_TITLE": "Réseau déconnecté !",
-			"HEADING_DESCRIPTION": "Vous êtes actuellement hors ligne, veuillez vérifier votre connexion Internet..."
+			"HEADING_SUB_DESCRIPTION": "Oups, nous vous avons perdu. Ne vous inquiétez pas, votre temps est toujours suivi.",
+			"HEADING_DESCRIPTION": "Vous pourrez continuer à travailler dans l'application web une fois votre connexion rétablie.",
+			"STATUS_NETWORK": "Hors ligne !"
 		},
 		"error": {
 			"TITLE": "Erreur !",

diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
@@ -611,8 +611,10 @@
 			"LINK_LABEL": "לך לדף הבית"
 		},
 		"offline": {
-			"HEADING_TITLE": "רשת מנותקת!",
-			"HEADING_DESCRIPTION": "אתה לא מחובר כרגע, בבקשה בדוק את חיבור האינטרנט שלך..."
+			"HEADING_TITLE": "החיבור נותק!",
+			"HEADING_SUB_DESCRIPTION": "אופס, איבדנו אותך. אל דאגה, הזמן שלך עדיין עוקב.",
+			"HEADING_DESCRIPTION": "תוכל להמשיך לעבוד באפליקציית האינטרנט לאחר שחיבורך ישוחזר.",
+			"STATUS_NETWORK": "לא מקוון!"
 		},
 		"error": {
 			"TITLE": "שגיאה",

diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
@@ -611,8 +611,10 @@
 			"LINK_LABEL": "Vai alla homepage"
 		},
 		"offline": {
-			"HEADING_TITLE": "Rete Disconnessa!",
-			"HEADING_DESCRIPTION": "Attualmente sei offline, controlla la tua connessione Internet..."
+			"HEADING_TITLE": "Connessione di rete interrotta!",
+			"HEADING_SUB_DESCRIPTION": "Ops, ti abbiamo perso. Non preoccuparti, il tuo tempo è ancora in tracciamento.",
+			"HEADING_DESCRIPTION": "Potrai continuare a lavorare nell'app web una volta ripristinata la connessione.",
+			"STATUS_NETWORK": "Offline!"
 		},
 		"error": {
 			"TITLE": "Errore!",

diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
@@ -611,8 +611,10 @@
 			"LINK_LABEL": "Naar de startpagina"
 		},
 		"offline": {
-			"HEADING_TITLE": "Netwerk Verbroken!",
-			"HEADING_DESCRIPTION": "U bent momenteel offline, controleer uw internetverbinding..."
+			"HEADING_TITLE": "Netwerk verbroken!",
+			"HEADING_SUB_DESCRIPTION": "Oeps, we zijn je kwijt. Maak je geen zorgen, je tijd wordt nog steeds bijgehouden.",
+			"HEADING_DESCRIPTION": "Je kunt doorgaan met werken in de webapp zodra je verbinding is hersteld.",
+			"STATUS_NETWORK": "Offline!"
 		},
 		"error": {
 			"TITLE": "Fout !",

diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
@@ -611,8 +611,10 @@
 			"LINK_LABEL": "Przejdź do strony głównej"
 		},
 		"offline": {
-			"HEADING_TITLE": "Rozłączono sieć!",
-			"HEADING_DESCRIPTION": "Jesteś obecnie offline, sprawdź swoje połączenie z internetem..."
+			"HEADING_TITLE": "Sieć rozłączona!",
+			"HEADING_SUB_DESCRIPTION": "Ups, straciliśmy cię. Nie martw się, twój czas jest nadal śledzony.",
+			"HEADING_DESCRIPTION": "Będziesz mógł kontynuować pracę w aplikacji internetowej, gdy połączenie zostanie przywrócone.",
+			"STATUS_NETWORK": "Offline!"
 		},
 		"error": {
 			"TITLE": "Błąd !",

diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
@@ -612,8 +612,10 @@
 			"LINK_LABEL": "Ir para a página inicial"
 		},
 		"offline": {
-			"HEADING_TITLE": "Rede Desconectada!",
-			"HEADING_DESCRIPTION": "Você está atualmente offline, por favor, verifique sua conexão com a Internet..."
+			"HEADING_TITLE": "Rede desconectada!",
+			"HEADING_SUB_DESCRIPTION": "Ops, perdemos você. Não se preocupe, seu tempo ainda está sendo rastreado.",
+			"HEADING_DESCRIPTION": "Você poderá continuar trabalhando no aplicativo web assim que sua conexão for restaurada.",
+			"STATUS_NETWORK": "Offline!"
 		},
 		"error": {
 			"TITLE": "Erro!",

diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
@@ -612,7 +612,9 @@
 		},
 		"offline": {
 			"HEADING_TITLE": "Сеть отключена!",
-			"HEADING_DESCRIPTION": "В настоящее время вы не подключены к Интернету, проверьте ваше соединение..."
+			"HEADING_SUB_DESCRIPTION": "Ой, мы потеряли вас. Не волнуйтесь, ваше время все еще отслеживается.",
+			"HEADING_DESCRIPTION": "Вы сможете продолжить работу в веб-приложении, как только ваше соединение будет восстановлено.",
+			"STATUS_NETWORK": "Офлайн!"
 		},
 		"error": {
 			"TITLE": "Ошибка !",

diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
@@ -587,8 +587,10 @@
 			"TRY_AGAIN": "再试一次"
 		},
 		"offline": {
-			"HEADING_TITLE": "网络断开连接！",
-			"HEADING_DESCRIPTION": "您目前处于离线状态，请检查您的互联网连接..."
+			"HEADING_TITLE": "网络断开！",
+			"HEADING_SUB_DESCRIPTION": "糟糕，我们失去了您的连接。别担心，您的时间仍在跟踪中。",
+			"HEADING_DESCRIPTION": "连接恢复后，您将可以继续在网页应用中工作。",
+			"STATUS_NETWORK": "离线！"
 		},
 		"invite": {
 			"HEADING_TITLE": "邀请成员加入您的团队",