[FIX] Adtraction fallback

public/locales/en/translation.json

@@ -9,6 +9,11 @@
         "zoom": "Zoom"
     },
     "add_game": "Add Game",
+    "adtraction-locked": {
+        "description": "It seems the track.adtraction.com domain was unable to load or is blocked. With adtraction, any purchase you make in the GOG store supports Heroic financially. Consider removing the block if you wish to contribute.",
+        "dont-show-again": "Don't show this warning again",
+        "title": "Adtraction is blocked"
+    },
     "Amazon Games": "Amazon Games",
     "anticheat": {
         "anticheats": "Anticheats",

src/common/types.ts

@@ -534,21 +534,6 @@ interface GamepadActionArgsWithoutMetadata {
   metadata?: undefined
 }
 
-type ElWebview = {
-  canGoBack: () => boolean
-  canGoForward: () => boolean
-  goBack: () => void
-  goForward: () => void
-  reload: () => void
-  isLoading: () => boolean
-  getURL: () => string
-  copy: () => string
-  selectAll: () => void
-  findInPage: (text: string | RegExp) => void
-}
-
-export type WebviewType = HTMLWebViewElement & ElWebview
-
 export type InstallPlatform =
   | LegendaryInstallPlatform
   | GogInstallPlatform

src/frontend/components/UI/WebviewControls/index.tsx

@@ -7,12 +7,11 @@ import {
 import cx from 'classnames'
 import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { WebviewType } from 'common/types'
 import SvgButton from '../SvgButton'
 import './index.css'
 
 interface WebviewControlsProps {
-  webview: WebviewType | null
+  webview: Electron.WebviewTag | null
   initURL: string
   openInBrowser: boolean
 }

src/frontend/screens/WebView/index.tsx

@@ -8,13 +8,18 @@ import React, {
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useLocation, useParams } from 'react-router'
 
-import { UpdateComponent } from 'frontend/components/UI'
+import { ToggleSwitch, UpdateComponent } from 'frontend/components/UI'
 import WebviewControls from 'frontend/components/UI/WebviewControls'
 import ContextProvider from 'frontend/state/ContextProvider'
-import { Runner, WebviewType } from 'common/types'
+import { Runner } from 'common/types'
 import './index.css'
 import LoginWarning from '../Login/components/LoginWarning'
 import { NileLoginData } from 'common/types/nile'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader
+} from 'frontend/components/UI/Dialog'
 
 interface Props {
   store?: 'epic' | 'gog' | 'amazon'
@@ -49,7 +54,7 @@ export default function WebView({ store }: Props) {
     null
   )
   const navigate = useNavigate()
-  const webviewRef = useRef<WebviewType>(null)
+  const webviewRef = useRef<Electron.WebviewTag>(null)
 
   let lang = i18n.language
   if (i18n.language === 'pt') {
@@ -217,8 +222,19 @@ export default function WebView({ store }: Props) {
         }
       }
 
-      webview.addEventListener('dom-ready', loadstop)
+      const onerror = ({ validatedURL }: Electron.DidFailLoadEvent) => {
+        if (validatedURL && validatedURL.match(/track\.adtraction\.com/)) {
+          const parsedUrl = new URL(validatedURL)
+          const redirectUrl = parsedUrl.searchParams.get('url')
+          webview.loadURL(redirectUrl || 'https://gog.com')
+          if (!localStorage.getItem('adtraction-warning')) {
+            setShowAdtractionWarning(true)
+          }
+        }
+      }
 
+      webview.addEventListener('dom-ready', loadstop)
+      webview.addEventListener('did-fail-load', onerror)
       // if the page title changed it's because the store loaded so there's
       // connectivity, we can update the status without waiting for the checks
       const updateConnectivity = () => {
@@ -231,6 +247,7 @@ export default function WebView({ store }: Props) {
       return () => {
         webview.removeEventListener('ipc-message', onIpcMessage)
         webview.removeEventListener('dom-ready', loadstop)
+        webview.removeEventListener('did-fail-load', onerror)
         webview.removeEventListener('page-title-updated', updateConnectivity)
       }
     }
@@ -265,6 +282,12 @@ export default function WebView({ store }: Props) {
     null | 'epic' | 'gog' | 'amazon'
   >(null)
 
+  const [showAdtractionWarning, setShowAdtractionWarning] =
+    useState<boolean>(false)
+
+  const [dontShowAdtractionWarning, setDontShowAdtractionWarning] =
+    useState<boolean>(false)
+
   useEffect(() => {
     if (startUrl.match(/epicgames\.com/) && !epic.username) {
       setShowLoginWarningFor('epic')
@@ -312,6 +335,45 @@ export default function WebView({ store }: Props) {
           onClose={onLoginWarningClosed}
         />
       )}
+      {showAdtractionWarning && (
+        <Dialog
+          showCloseButton={true}
+          onClose={() => {
+            setShowAdtractionWarning(false)
+            dontShowAdtractionWarning &&
+              localStorage.setItem('adtraction-warning', 'true')
+          }}
+        >
+          <DialogHeader
+            onClose={() => {
+              setShowAdtractionWarning(false)
+              dontShowAdtractionWarning &&
+                localStorage.setItem('adtraction-warning', 'true')
+            }}
+          >
+            {t('adtraction-locked.title', 'Adtraction is blocked')}
+          </DialogHeader>
+          <DialogContent>
+            <p>
+              {t(
+                'adtraction-locked.description',
+                'It seems the track.adtraction.com domain was unable to load or is blocked. With adtraction, any purchase you make in the GOG store supports Heroic financially. Consider removing the block if you wish to contribute.'
+              )}
+            </p>
+            <ToggleSwitch
+              htmlId="dont-show-adtraction-warning-checkbox"
+              value={dontShowAdtractionWarning}
+              handleChange={(e) =>
+                setDontShowAdtractionWarning(e.target.checked)
+              }
+              title={t(
+                'adtraction-locked.dont-show-again',
+                "Don't show this warning again"
+              )}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   )
 }