From b237e7338b8fbd67fb456bb8bb1476a29d3aff9e Mon Sep 17 00:00:00 2001
From: Ariel Juodziukynas <arieljuod@gmail.com>
Date: Sun, 11 Aug 2024 20:34:38 -0300
Subject: [PATCH] Show 'import game' hint/instructions in 'add game' dialog

---
 public/locales/en/gamepage.json               |  4 ++++
 .../InstallModal/SideloadDialog/index.tsx     | 22 +++++++++++++++++--
 .../components/InstallModal/index.scss        |  6 +++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/gamepage.json b/public/locales/en/gamepage.json
index 57b378bd57..f31785437d 100644
--- 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
index c695ea34ae..32d59ab431 100644
--- 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
index d3fa3af1c3..3c392d99c8 100644
--- 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;
+  }
+}