ET-547: Improve loading message for AHP links with no pending activit…

…ies (#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

@@ -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 <LoadingPage showLogoBox={true} />
   }
 

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."
   }
-}
+}

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."
   }
-}
+}

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."
   }
-}
+}

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."
   }
-}
+}

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."
   }
-}
+}

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."
   }
-}
+}

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."
   }
-}
+}

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."
   }
-}
+}

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 (
+      <SuccessPage
+        redirect={false}
+        description={t('session.no_more_pending_activities')}
+      />
+    )
+  }
+
   if (waitingForNewActivities) {
     return <LoadingPage />
   }

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<SuccessPageProps> = ({
   redirect = false,
+  description,
 }): JSX.Element => {
   const { t } = useTranslation()
+
+  const successDescription =
+    description || t('session.all_activities_completed_subtitle')
+
   return (
     <div className={classes.success_page}>
       <div className={classes.success_icon}>
@@ -21,9 +27,7 @@ export const SuccessPage: FC<SuccessPageProps> = ({
         {t('session.all_activities_completed_title')}
       </div>
       <div className={classes.success_text_subtitle}>
-        {redirect
-          ? t('session.redirecting_to_next_page')
-          : t('session.all_activities_completed_subtitle')}
+        {redirect ? t('session.redirecting_to_next_page') : successDescription}
       </div>
     </div>
   )