feat: add Steam integration requirements dialog and update types for message handling

Author: flavioislima

public/locales/en/translation.json

@@ -1130,6 +1130,21 @@
         "logging": "Logging In...",
         "processing": "Processing files, please wait"
     },
+    "steam": {
+        "integration": {
+            "requirements": {
+                "part1": "To ensure this integration works properly and HyperPlay can access your games, you must have",
+                "part2": "Steam installed",
+                "part3": "and be",
+                "part4": "Logged into",
+                "part5": "your account.",
+                "part6": "Additionally, your profile and game details should be set to ",
+                "part7": "Public",
+                "part8": "Steam > Profile > Edit Profile > Privacy Settings",
+                "title": "Steam Integration Requirements"
+            }
+        }
+    },
     "Steam Installation": "",
     "steam-install": {
         "compatibility-layer-not-available": "Compatibility layer not available. Please install one from \"Settings > Wine Manager\" first.",

src/frontend/screens/Settings/components/EnableSteamIntegration.tsx

@@ -1,19 +1,62 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import ToggleSwitch from 'frontend/components/UI/ToggleSwitch'
 import useSetting from 'frontend/hooks/useSetting'
 import libraryState from 'frontend/state/libraryState'
+import ContextProvider from 'frontend/state/ContextProvider'
 
 export default function EnableSteamIntegration() {
   const { t } = useTranslation()
   const [enabled, setEnabled] = useSetting('enableSteamIntegration', false)
+  const { showDialogModal } = useContext(ContextProvider)
 
   const handleChange = () => {
     const newValue = !enabled
-    setEnabled(newValue)
     if (newValue) {
-      window.api.refreshLibrary('steam')
+      showDialogModal({
+        title: t(
+          'steam.integration.requirements.title',
+          'Steam Integration Requirements'
+        ),
+        message: (
+          <span>
+            {t(
+              'steam.integration.requirements.part1',
+              'To ensure this integration works properly and HyperPlay can access your games, you must have'
+            )}{' '}
+            <b>
+              {t('steam.integration.requirements.part2', 'Steam installed')}
+            </b>{' '}
+            {t('steam.integration.requirements.part3', 'and be')}{' '}
+            <b>{t('steam.integration.requirements.part4', 'Logged into')}</b>{' '}
+            {t('steam.integration.requirements.part5', 'your account.')}{' '}
+            {t(
+              'steam.integration.requirements.part6',
+              'Additionally, your profile and game details should be set to '
+            )}
+            <b>{t('steam.integration.requirements.part7', 'Public')}</b> (
+            <b>
+              {t(
+                'steam.integration.requirements.part8',
+                'Steam > Profile > Edit Profile > Privacy Settings'
+              )}
+            </b>
+            )
+          </span>
+        ),
+        buttons: [
+          {
+            text: t('box.ok', 'OK'),
+            onClick: () => {
+              setEnabled(true)
+              window.api.refreshLibrary('steam')
+            }
+          }
+        ],
+        type: 'MESSAGE'
+      })
     } else {
+      setEnabled(false)
       if (libraryState.category === 'steam') {
         libraryState.category = 'all'
       }

src/frontend/types.ts

@@ -75,7 +75,7 @@ export interface ContextType {
 export type DialogModalOptions = {
   showDialog?: boolean
   title?: string
-  message?: string
+  message?: string | React.ReactNode
   buttons?: Array<ButtonOptions>
   type?: DialogType
   onClose?: () => void