From 68f7216fb13c59fee563eb055eb79a296294fe4d Mon Sep 17 00:00:00 2001
From: Free Spirit <zach@valist.io>
Date: Tue, 14 Jan 2025 14:56:21 -0500
Subject: [PATCH] [bug] Don't show access code on mod dialog if no access code
 required (#1206)

* Don't show access code on mod dialog if no access code required

* Update accessCode check in mod dialog & cleanup channel logic

* Add missing null check

* Still show other advanced options but not option 4 if isGated
---
 .../InstallModal/ModDialog/index.tsx          | 34 +++++++++++--------
 .../Library/components/InstallModal/index.tsx | 10 +++---
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/frontend/screens/Library/components/InstallModal/ModDialog/index.tsx b/src/frontend/screens/Library/components/InstallModal/ModDialog/index.tsx
index 80659a266..993f3264d 100644
--- a/src/frontend/screens/Library/components/InstallModal/ModDialog/index.tsx
+++ b/src/frontend/screens/Library/components/InstallModal/ModDialog/index.tsx
@@ -24,6 +24,7 @@ interface Props {
   winePrefix: string
   crossoverBottle: string
   wineVersion: WineInstallation | undefined
+  isGated: boolean
 }
 
 const userHome = configStore.get('userHome', '')
@@ -43,7 +44,8 @@ const ModDialog: React.FC<Props> = ({
   enableCTAButton,
   winePrefix,
   wineVersion,
-  crossoverBottle
+  crossoverBottle,
+  isGated
 }) => {
   const { t } = useTranslation()
   const flags = useFlags()
@@ -246,19 +248,23 @@ const ModDialog: React.FC<Props> = ({
               className={styles.step}
               style={{ paddingBottom: 'var(--space-xl-fixed)' }}
             >
-              <div className={styles.stepTitle}>
-                {t('mods.instructions.step4.title', 'Step 4')}
-              </div>
-              <div className={styles.stepSubtitle}>
-                {t('mods.instructions.step4.subtitle', 'Access Code')}
-              </div>
-              <span className={styles.stepDescription}>
-                {t('mods.instructions.step4.description', {
-                  defaultValue:
-                    'Enter the access code to proceed with installing the game.',
-                  newline: '\n'
-                })}
-              </span>
+              {isGated && (
+                <>
+                  <div className={styles.stepTitle}>
+                    {t('mods.instructions.step4.title', 'Step 4')}
+                  </div>
+                  <div className={styles.stepSubtitle}>
+                    {t('mods.instructions.step4.subtitle', 'Access Code')}
+                  </div>
+                  <span className={styles.stepDescription}>
+                    {t('mods.instructions.step4.description', {
+                      defaultValue:
+                        'Enter the access code to proceed with installing the game.',
+                      newline: '\n'
+                    })}
+                  </span>
+                </>
+              )}
               {children}
             </div>
           )}
diff --git a/src/frontend/screens/Library/components/InstallModal/index.tsx b/src/frontend/screens/Library/components/InstallModal/index.tsx
index bbed04c30..acab04a2e 100644
--- a/src/frontend/screens/Library/components/InstallModal/index.tsx
+++ b/src/frontend/screens/Library/components/InstallModal/index.tsx
@@ -54,12 +54,9 @@ export default React.memo(function InstallModal({
   const [crossoverBottle, setCrossoverBottle] = useState('')
   const [accessCode, setAccessCode] = useState('')
 
-  const numberOfChannels =
-    (gameInfo?.channels && Object.keys(gameInfo?.channels).length) ?? 0
-  const initChannelName =
-    gameInfo?.channels && numberOfChannels > 0
-      ? Object.keys(gameInfo?.channels)[0]
-      : 'main'
+  const channelKeys = Object.keys(gameInfo?.channels || {})
+  const numberOfChannels = channelKeys.length
+  const initChannelName = numberOfChannels > 0 ? channelKeys[0] : 'main'
   const [channelNameToInstall, setChannelNameToInstall] =
     useState(initChannelName)
 
@@ -312,6 +309,7 @@ export default React.memo(function InstallModal({
             winePrefix={winePrefix}
             wineVersion={wineVersion}
             crossoverBottle={crossoverBottle}
+            isGated={selectedChannel?.license_config?.access_codes ?? false}
           >
             <div style={{ paddingTop: 'var(--space-md)' }}>
               {runner === 'hyperplay' && numberOfChannels > 1 ? (