[UI] Update quest warning copy (#941)

* update copy

* run i18n

* bump version

* update copy

Author: BrettCleary

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperplay",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "private": true,
   "main": "build/main/main.js",
   "homepage": "./",

public/locales/en/translation.json

@@ -656,14 +656,23 @@
         "needMoreAchievements": "You need to have completed {{percent}}% of the achievements in one of these games.",
         "Play": "Play",
         "playstreak": "Play Streak",
+        "points": "Points",
         "quests": "Quests",
         "readyForClaim": "Ready for claim",
         "reputation": "Reputation",
         "reward": "Reward",
+        "rewards": "Rewards",
         "signIn": "Sign in",
+        "sync": "Sync",
         "View Game": "View Game"
     },
     "quests": {
+        "playstreak": {
+            "signInWarning": {
+                "client": "You are currently not logged in, play streak progress will not be tracked. Please login to HyperPlay via the top-right dropdown to track progress.",
+                "overlay": "You are currently not logged in, play streak progress will not be tracked. Please exit the game and login to HyperPlay via the top-right dropdown to track progress."
+            }
+        },
         "quests": "Quests"
     },
     "queue": {

src/frontend/components/UI/QuestsViewer/index.tsx

@@ -4,6 +4,7 @@ import { QuestLogWrapper } from './components/QuestLogWrapper'
 import { QuestDetailsWrapper } from './components/QuestDetailsWrapper'
 import { Alert } from '@hyperplay/ui'
 import useAuthSession from 'frontend/hooks/useAuthSession'
+import { useTranslation } from 'react-i18next'
 
 export interface QuestsViewerProps {
   projectId: string
@@ -12,13 +13,17 @@ export interface QuestsViewerProps {
 export function QuestsViewer({ projectId: appName }: QuestsViewerProps) {
   const [selectedQuestId, setSelectedQuestId] = useState<number | null>(null)
   const { isSignedIn } = useAuthSession()
+  const { t } = useTranslation()
 
   let alertComponent = null
   if (!isSignedIn) {
     alertComponent = (
       <Alert
         className={styles.alert}
-        message="Be sure to log into HyperPlay to maintain your play streak progress."
+        message={t(
+          'quests.playstreak.signInWarning.overlay',
+          'You are currently not logged in, play streak progress will not be tracked. Please exit the game and login to HyperPlay via the top-right dropdown to track progress.'
+        )}
         variant="warning"
       />
     )

src/frontend/screens/Quests/index.tsx

@@ -5,10 +5,12 @@ import styles from './index.module.scss'
 import { Alert, Background } from '@hyperplay/ui'
 import classNames from 'classnames'
 import useAuthSession from 'frontend/hooks/useAuthSession'
+import { useTranslation } from 'react-i18next'
 
 export function QuestsPage() {
   const [selectedQuestId, setSelectedQuestId] = useState<number | null>(null)
   const { isSignedIn } = useAuthSession()
+  const { t } = useTranslation()
 
   let alertComponent = null
   const showAlert = !isSignedIn
@@ -18,7 +20,10 @@ export function QuestsPage() {
     alertComponent = (
       <Alert
         className={styles.alert}
-        message="Be sure to log into HyperPlay to maintain your play streak progress."
+        message={t(
+          'quests.playstreak.signInWarning.client',
+          'You are currently not logged in, play streak progress will not be tracked. Please login to HyperPlay via the top-right dropdown to track progress.'
+        )}
         variant="warning"
       />
     )