Show 'import game' hint/instructions in 'add game' dialog

Heroic-Games-Launcher · Dec 14, 2024 · b237e73 · b237e73
1 parent a1a6f4a
commit b237e73
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/public/locales/en/gamepage.json b/public/locales/en/gamepage.json
@@ -213,6 +213,10 @@
         "field": {
             "title": "Title"
         },
+        "import-hint": {
+            "content": "Do NOT use this feature for that.<1></1>Instead, <3>log into</3> the store, look for the game in your library, open the installation dialog, and click the &quot;Import Game&quot; button",
+            "title": "Important! Are you adding a game from Epic/GOG/Amazon? Click here!"
+        },
         "info": {
             "broser": "BrowserURL",
             "exe": "Select Executable",

diff --git a/src/frontend/screens/Library/components/InstallModal/SideloadDialog/index.tsx b/src/frontend/screens/Library/components/InstallModal/SideloadDialog/index.tsx
@@ -7,7 +7,8 @@ import {
   CachedImage,
   TextInputField,
   PathSelectionBox,
-  ToggleSwitch
+  ToggleSwitch,
+  InfoBox
 } from 'frontend/components/UI'
 import { DialogContent, DialogFooter } from 'frontend/components/UI/Dialog'
 import {
@@ -17,12 +18,13 @@ import {
   writeConfig
 } from 'frontend/helpers'
 import React, { useContext, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { AvailablePlatforms } from '..'
 import fallbackImage from 'frontend/assets/heroic_card.jpg'
 import ContextProvider from 'frontend/state/ContextProvider'
 import classNames from 'classnames'
 import axios from 'axios'
+import { NavLink } from 'react-router-dom'
 
 type Props = {
   availablePlatforms: AvailablePlatforms
@@ -289,6 +291,22 @@ export default function SideloadDialog({
             </span>
           </div>
           <div className="sideloadForm">
+            <InfoBox
+              text={t(
+                'sideload.import-hint.title',
+                'Important! Are you adding a game from Epic/GOG/Amazon? Click here!'
+              )}
+            >
+              <div className="sideloadImportHint">
+                <Trans key="sideload.import-hint.content">
+                  Do NOT use this feature for that.
+                  <br />
+                  Instead, <NavLink to={'/login'}>log into</NavLink> the store,
+                  look for the game in your library, open the installation
+                  dialog, and click the &quot;Import Game&quot; button
+                </Trans>
+              </div>
+            </InfoBox>
             <TextInputField
               label={t('sideload.info.title', 'Game/App Title')}
               placeholder={t(

diff --git a/src/frontend/screens/Library/components/InstallModal/index.scss b/src/frontend/screens/Library/components/InstallModal/index.scss
@@ -103,3 +103,9 @@
 .sideloadForm {
   padding-inline-start: var(--space-xs);
 }
+
+.sideloadImportHint {
+  a {
+    text-decoration: underline;
+  }
+}