From 6588f0df359f896139c24104e59224cc01dd89ac Mon Sep 17 00:00:00 2001 From: Mohsin Hayat Date: Wed, 18 Dec 2024 20:32:51 +0500 Subject: [PATCH] ET-547: Improve loading message for AHP links with no pending activities (#325) * feat(activities): show a success message when no new pending activities are found * feat(translation): add translation for no pending activities description --- pages/index.tsx | 12 ++++++-- public/locales/en/common.json | 5 ++-- public/locales/es/common.json | 5 ++-- public/locales/et/common.json | 5 ++-- public/locales/fr/common.json | 5 ++-- public/locales/nl/common.json | 5 ++-- public/locales/pl/common.json | 5 ++-- public/locales/ro/common.json | 5 ++-- public/locales/ru/common.json | 5 ++-- src/components/Activities/Activities.tsx | 35 ++++++++++++++++------ src/components/SuccessPage/SuccessPage.tsx | 10 +++++-- 11 files changed, 66 insertions(+), 31 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 38d4d35..3d03f11 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -32,8 +32,14 @@ import { LogEvent } from '../src/hooks/useLogging/types' // i.e. https://goto.awell.health/en?sessionId=e-Dmjxm3E5AW const Home: NextPageWithLayout = () => { const { t } = useTranslation() - const { loading, session, branding, theme, error, refetch } = - useHostedSession() + const { + loading: sessionLoading, + session, + branding, + theme, + error, + refetch, + } = useHostedSession() const { removeItem: removeAccessToken } = useSessionStorage('accessToken', '') const router = useRouter() const { infoLog } = useLogging() @@ -158,7 +164,7 @@ const Home: NextPageWithLayout = () => { } } - if (loading) { + if (sessionLoading) { return } diff --git a/public/locales/en/common.json b/public/locales/en/common.json index cf594ce..f1163f4 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Redirecting you in a moment...", "session_canceled": "Your session has been cancelled.", "session_completed_or_expired": "Your session has been completed or expired.", - "try_again": "Try again" + "try_again": "Try again", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 228242b..9b26d6e 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Te redirigiré en un momento...", "session_canceled": "Se ha cancelado tu sesión.", "session_completed_or_expired": "Your session has been completed or expired.", - "try_again": "Intentar de nuevo" + "try_again": "Intentar de nuevo", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/public/locales/et/common.json b/public/locales/et/common.json index 1b4f9dd..70e70e3 100644 --- a/public/locales/et/common.json +++ b/public/locales/et/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Teid suunatakse hetke pärast ümber.", "session_canceled": "Teie sessioon on katkestatud.", "session_completed_or_expired": "Your session has been completed or expired.", - "try_again": "Proovi uuesti" + "try_again": "Proovi uuesti", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json index 4b78d23..e54f775 100644 --- a/public/locales/fr/common.json +++ b/public/locales/fr/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Redirection dans un instant.", "session_canceled": "Votre session a été annulée.", "session_completed_or_expired": "Your session has been completed or expired.", - "try_again": "Réessayer" + "try_again": "Réessayer", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/public/locales/nl/common.json b/public/locales/nl/common.json index c43eb3d..2103daf 100644 --- a/public/locales/nl/common.json +++ b/public/locales/nl/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Je wordt meteen doorverwezen.", "session_canceled": "Je sessie werd geannuleerd.", "session_completed_or_expired": "Your session has been completed or expired.", - "try_again": "Opnieuw proberen" + "try_again": "Opnieuw proberen", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/public/locales/pl/common.json b/public/locales/pl/common.json index 65fb8d2..08c3886 100644 --- a/public/locales/pl/common.json +++ b/public/locales/pl/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Przekierowanie cię za chwilę...", "session_canceled": "Twoja sesja została odwołana.", "session_completed_or_expired": "Twoja sesja została zakończona lub wygasła.", - "try_again": "Spróbuj ponownie" + "try_again": "Spróbuj ponownie", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/public/locales/ro/common.json b/public/locales/ro/common.json index d059a24..7c8f216 100644 --- a/public/locales/ro/common.json +++ b/public/locales/ro/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Te redirecționăm intr-un moment.", "session_canceled": "Sesiunea ta a fost anulata.", "session_completed_or_expired": "Your session has been completed or expired.", - "try_again": "Încercați din nou" + "try_again": "Încercați din nou", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json index 603a60b..ef934ab 100644 --- a/public/locales/ru/common.json +++ b/public/locales/ru/common.json @@ -115,6 +115,7 @@ "redirecting_to_next_page": "Через несколько секунд мы автоматически перенаправим Вас на новый адрес. ", "session_canceled": "Ваша сессия истекла.", "session_completed_or_expired": "Your session has been completed or expired.", - "try_again": "Попробуйте снова" + "try_again": "Попробуйте снова", + "no_more_pending_activities": "There are no more pending activities for you at this time. You can close this page." } -} \ No newline at end of file +} diff --git a/src/components/Activities/Activities.tsx b/src/components/Activities/Activities.tsx index ef45d6c..b61312e 100644 --- a/src/components/Activities/Activities.tsx +++ b/src/components/Activities/Activities.tsx @@ -1,30 +1,47 @@ -import React, { FC, useEffect } from 'react' +import React, { FC, useEffect, useState } from 'react' import { useCurrentActivity } from './hooks' import { LoadingPage } from '../LoadingPage' import { ActivityFactory } from './ActivityFactory' +import { SuccessPage } from '../SuccessPage' +import { useTranslation } from 'next-i18next' -// session will already expire after 15 seconds -const RELOAD_DELAY = 20000 +const WAITING_FOR_ACTIVITIES_DELAY = 10000 +/** + * This component is used to display the activities for a hosted session. + * It will display a loading page if the activities are not yet available. + * If the activities are not available after 10 seconds, it will display a success page. + */ export const Activities: FC = () => { const { currentActivity, waitingForNewActivities } = useCurrentActivity() + const [noActivities, setNoActivities] = useState(false) + const { t } = useTranslation() useEffect(() => { - let reloadTimer: NodeJS.Timeout + let noActivitiesTimer: NodeJS.Timeout if (waitingForNewActivities) { - reloadTimer = setTimeout(() => { - window.location.reload() - }, RELOAD_DELAY) + noActivitiesTimer = setTimeout(() => { + setNoActivities(true) + }, WAITING_FOR_ACTIVITIES_DELAY) } // clear interval on component unmount return () => { - if (reloadTimer) { - clearTimeout(reloadTimer) + if (noActivitiesTimer) { + clearTimeout(noActivitiesTimer) } } }, [waitingForNewActivities]) + if (noActivities) { + return ( + + ) + } + if (waitingForNewActivities) { return } diff --git a/src/components/SuccessPage/SuccessPage.tsx b/src/components/SuccessPage/SuccessPage.tsx index 576ffa9..e0e2848 100644 --- a/src/components/SuccessPage/SuccessPage.tsx +++ b/src/components/SuccessPage/SuccessPage.tsx @@ -6,12 +6,18 @@ import successIcon from './../../assets/success.svg' interface SuccessPageProps { redirect?: boolean + description?: string } export const SuccessPage: FC = ({ redirect = false, + description, }): JSX.Element => { const { t } = useTranslation() + + const successDescription = + description || t('session.all_activities_completed_subtitle') + return (
@@ -21,9 +27,7 @@ export const SuccessPage: FC = ({ {t('session.all_activities_completed_title')}
- {redirect - ? t('session.redirecting_to_next_page') - : t('session.all_activities_completed_subtitle')} + {redirect ? t('session.redirecting_to_next_page') : successDescription}
)