Merge pull request #14738 from brave/ksmith-acaptcha-support

Fix Adaptive Captcha support link when rendered with WebUI
brave · Aug 22, 2022 · b14112f · b14112f
2 parents af2bfb8 + f1668cf
commit b14112f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 7 deletions.
diff --git a/components/brave_rewards/resources/rewards_panel/components/adaptive_captcha_view.style.ts b/components/brave_rewards/resources/rewards_panel/components/adaptive_captcha_view.style.ts
@@ -94,7 +94,7 @@ export const helpAction = styled.div`
   margin-top: 36px;
   text-align: center;
 
-  a {
+  button {
     display: inline-block;
     padding: 10px 22px;
     font-weight: 600;

diff --git a/components/brave_rewards/resources/rewards_panel/components/adaptive_captcha_view.tsx b/components/brave_rewards/resources/rewards_panel/components/adaptive_captcha_view.tsx
@@ -5,7 +5,6 @@
 import * as React from 'react'
 
 import { LocaleContext } from '../../shared/lib/locale_context'
-import { NewTabLink } from '../../shared/components/new_tab_link'
 import { AdaptiveCaptchaInfo, AdaptiveCaptchaResult } from '../../rewards_panel/lib/interfaces'
 
 import * as styles from './adaptive_captcha_view.style'
@@ -34,6 +33,7 @@ interface Props {
   adaptiveCaptchaInfo: AdaptiveCaptchaInfo
   onClose: () => void
   onCaptchaResult: (result: AdaptiveCaptchaResult) => void
+  onContactSupport: () => void
 }
 
 export function AdaptiveCaptchaView (props: Props) {
@@ -123,12 +123,9 @@ export function AdaptiveCaptchaView (props: Props) {
             {getString('captchaMaxAttemptsExceededText')}
           </styles.text>
           <styles.helpAction>
-            <NewTabLink
-              href='https://support.brave.com/'
-              onClick={props.onClose}
-            >
+            <button onClick={props.onContactSupport}>
               {getString('captchaContactSupport')}
-            </NewTabLink>
+            </button>
           </styles.helpAction>
         </styles.modalRoot>
       </styles.overlay>

diff --git a/components/brave_rewards/resources/rewards_panel/components/panel_overlays.tsx b/components/brave_rewards/resources/rewards_panel/components/panel_overlays.tsx
@@ -127,6 +127,11 @@ export function PanelOverlays () {
   }
 
   if (adaptiveCaptchaInfo) {
+    const onContactSupport = () => {
+      host.clearAdaptiveCaptcha()
+      host.openAdaptiveCaptchaSupport()
+    }
+
     const onClose = () => {
       host.clearAdaptiveCaptcha()
     }
@@ -137,6 +142,7 @@ export function PanelOverlays () {
           adaptiveCaptchaInfo={adaptiveCaptchaInfo}
           onClose={onClose}
           onCaptchaResult={host.handleAdaptiveCaptchaResult}
+          onContactSupport={onContactSupport}
         />
       </NamedOverlay>
     )

diff --git a/components/brave_rewards/resources/rewards_panel/lib/extension_host.ts b/components/brave_rewards/resources/rewards_panel/lib/extension_host.ts
@@ -424,6 +424,10 @@ export function createHost (): Host {
       maybeNotifyRequestAdsEnabled(true)
     },
 
+    openAdaptiveCaptchaSupport () {
+      openTab('https://support.brave.com/')
+    },
+
     openRewardsSettings () {
       openTab('chrome://rewards')
     },

diff --git a/components/brave_rewards/resources/rewards_panel/lib/interfaces.ts b/components/brave_rewards/resources/rewards_panel/lib/interfaces.ts
@@ -97,6 +97,7 @@ export interface Host {
   addListener: (callback: HostListener) => () => void
   getString: (key: string) => string
   enableRewards: () => void
+  openAdaptiveCaptchaSupport: () => void
   openRewardsSettings: () => void
   refreshPublisherStatus: () => void
   setIncludeInAutoContribute: (include: boolean) => void

diff --git a/components/brave_rewards/resources/rewards_panel/stories/index.tsx b/components/brave_rewards/resources/rewards_panel/stories/index.tsx
@@ -162,6 +162,10 @@ function createHost (): Host {
       }
     },
 
+    openAdaptiveCaptchaSupport () {
+      console.log('openAdaptiveCaptchaSupport')
+    },
+
     openRewardsSettings () {
       console.log('openRewardsSettings')
     },
@@ -321,6 +325,7 @@ export function AdaptiveCaptcha () {
             adaptiveCaptchaInfo={adaptiveCaptchaInfo}
             onClose={actionLogger('onClose')}
             onCaptchaResult={actionLogger('onCaptchaResult')}
+            onContactSupport={actionLogger('onContactSupport')}
           />
         </div>
       </WithThemeVariables>