From f92a4035e80afa836b4481f1067790af7a0a2335 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Thu, 6 Apr 2023 13:42:21 +0200
Subject: [PATCH] feat: Add links to the user guide

---
 frontend/src/locale/en/translation.json |  8 ++++++--
 frontend/src/locale/it/translation.json |  8 ++++++--
 frontend/src/ui/pages/Dashboard.tsx     | 23 ++++++++++++++++++++++-
 frontend/src/ui/pages/Onboarding.tsx    | 11 +++++++++++
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json
index 2cc76ff..6797ff6 100644
--- a/frontend/src/locale/en/translation.json
+++ b/frontend/src/locale/en/translation.json
@@ -278,7 +278,10 @@
           "subscrition-gift_other": "<n>{{name}}</n> gifted <c>{{count}}</c> subscriptions <t>(Tier {{tier}})</t>"
         },
         "replay": "Replay event"
-      }
+      },
+      "quick-links": "Useful links",
+      "link-user-guide": "User guide",
+      "link-api": "API reference"
     },
     "onboarding": {
       "welcome-header": "Welcome to {{APPNAME}}",
@@ -303,7 +306,8 @@
       "done-p1": "That should be enough for now. You can always change any option later, including custom configurations not covered in this procedure (e.g. using a different Twitch account for the bot).",
       "done-p2": "If you have questions or issues, please reach out at any of these places:",
       "done-button": "Complete onboarding",
-      "done-p3": "Click the button below to finish the onboarding and go to {{APPNAME}}'s dashboard."
+      "done-p3": "Click the button below to finish the onboarding and go to {{APPNAME}}'s dashboard.",
+      "welcome-guide": "It might be a good idea to have the {{APPNAME}} user guide open in case you have trouble with any of the following steps, you can open it by <g>clicking here</g>."
     },
     "uiconfig": {
       "title": "User interface settings",
diff --git a/frontend/src/locale/it/translation.json b/frontend/src/locale/it/translation.json
index 6a3d498..dc52351 100644
--- a/frontend/src/locale/it/translation.json
+++ b/frontend/src/locale/it/translation.json
@@ -162,7 +162,10 @@
           "subscrition-gift_other": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamenti <t>(Livello {{tier}})</t>"
         },
         "replay": "Ripeti evento"
-      }
+      },
+      "link-api": "Documentazione API",
+      "link-user-guide": "Guida utente",
+      "quick-links": "Link utili"
     },
     "debug": {
       "big-ass-warning": "L'utilizzo di questa pagina può danneggiare gravemente il tuo database. \nSpero tu sappia cosa stai facendo!",
@@ -300,7 +303,8 @@
       "twitch-p1": "Per configurare Twitch dovrai creare un'applicazione sul portale per gli sviluppatori. Segui le istruzioni di seguito o fai clic sul pulsante in basso per saltare questo passaggio.",
       "twitch-ev-p1": "Ora che hai creato un'app, devi autenticarci il tuo account Twitch in modo che possiamo accedere a dati come il nome del tuo canale o eventi come nuovi follower o raid.",
       "done-p2": "In caso di domande o problemi, contattaci in uno di questi modi:",
-      "done-header": "È tutto pronto!"
+      "done-header": "È tutto pronto!",
+      "welcome-guide": "Sarebbe una buona idea tenere aperta la guida utente di {{APPNAME}} nel caso incontrassi difficoltà con uno dei seguenti passaggi, puoi aprirla <g>cliccando qui</g>."
     },
     "strimertul": {
       "credits-header": "Ringraziamenti",
diff --git a/frontend/src/ui/pages/Dashboard.tsx b/frontend/src/ui/pages/Dashboard.tsx
index 060438d..dd465dd 100644
--- a/frontend/src/ui/pages/Dashboard.tsx
+++ b/frontend/src/ui/pages/Dashboard.tsx
@@ -8,7 +8,6 @@ import {
 import { useLiveKey } from '~/lib/react';
 import { useAppSelector } from '~/store';
 import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
-import WIPNotice from '../components/utils/WIPNotice';
 import BrowserLink from '../components/BrowserLink';
 import Scrollbar from '../components/utils/Scrollbar';
 
@@ -103,6 +102,14 @@ const TwitchEventTime = styled('time', {
   fontSize: '13px',
 });
 
+const UsefulLinksMenu = styled('ul', {
+  margin: '0',
+  listStyleType: 'square',
+  li: {
+    padding: '3px',
+  },
+});
+
 const supportedMessages: EventSubNotificationType[] = [
   EventSubNotificationType.Followed,
   EventSubNotificationType.CustomRewardRedemptionAdded,
@@ -411,9 +418,23 @@ function TwitchSection() {
 }
 
 export default function Dashboard(): React.ReactElement {
+  const { t } = useTranslation();
   return (
     <PageContainer>
       <TwitchSection />
+      <SectionHeader>{t('pages.dashboard.quick-links')}</SectionHeader>
+      <UsefulLinksMenu>
+        <li>
+          <BrowserLink href="https://strimertul.stream/guide/">
+            {t('pages.dashboard.link-user-guide')}
+          </BrowserLink>
+        </li>
+        <li>
+          <BrowserLink href="https://strimertul.stream/api/v31/">
+            {t('pages.dashboard.link-api')}
+          </BrowserLink>
+        </li>
+      </UsefulLinksMenu>
     </PageContainer>
   );
 }
diff --git a/frontend/src/ui/pages/Onboarding.tsx b/frontend/src/ui/pages/Onboarding.tsx
index 6d6788e..b62bbb3 100644
--- a/frontend/src/ui/pages/Onboarding.tsx
+++ b/frontend/src/ui/pages/Onboarding.tsx
@@ -716,6 +716,17 @@ export default function OnboardingPage() {
             <HeroTitle>{t('pages.onboarding.welcome-header')}</HeroTitle>
             <HeroContent>
               <TextBlock>{t('pages.onboarding.welcome-p1')}</TextBlock>
+              <TextBlock>
+                <Trans
+                  t={t}
+                  i18nKey={'pages.onboarding.welcome-guide'}
+                  components={{
+                    g: (
+                      <BrowserLink href="https://strimertul.stream/guide/getting-started/first-time-setup/" />
+                    ),
+                  }}
+                />
+              </TextBlock>
               <TextBlock css={{ color: '$gray11' }}>
                 {t('pages.onboarding.welcome-p2')}
               </TextBlock>