Move styles to general.ts and replace UI for contact support form

components/brave_vpn/resources/panel/components/contact-support/index.tsx

@@ -5,7 +5,7 @@ import TextInput, { Textarea } from '$web-components/input'
 import Toggle from '$web-components/toggle'
 import { getLocale } from '../../../../../common/locale'
 import * as S from './style'
-import { ErrorLabel } from '../styles/style'
+import { ErrorLabel } from '../general'
 import getPanelBrowserAPI, * as BraveVPN from '../../api/panel_browser_api'
 import { CaratStrongLeftIcon } from 'brave-ui/components/icons'
 

components/brave_vpn/resources/panel/components/error-panel/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import Button from '$web-components/button'
 
 import * as S from './style'
-import { ButtonText, IconBox } from '../styles/style'
+import { ButtonText, IconBox } from '../general'
 import { AlertCircleIcon } from 'brave-ui/components/icons'
 import { getLocale } from '../../../../../common/locale'
 import { useSelector, useDispatch } from '../../state/hooks'

components/brave_vpn/resources/panel/components/purchase-failed-panel/index.tsx

@@ -1,19 +1,24 @@
 import * as React from 'react'
 
 import { getLocale } from '../../../../../common/locale'
-import * as S from '../styles/style'
+import * as S from '../general'
 import { AlertCircleIcon } from 'brave-ui/components/icons'
 import ContactSupport from '../contact-support'
 
 function PurchaseFailedPanel () {
   const [isContactSupportVisible, setContactSupportVisible] = React.useState(false)
   const closeContactSupport = () => {
-    console.log('isContactSupportVisible', isContactSupportVisible)
     setContactSupportVisible(false)
   }
   const showContactSupport = () => {
     setContactSupportVisible(!isContactSupportVisible)
   }
+  if (isContactSupportVisible) {
+    return <ContactSupport
+      onCloseContactSupport={closeContactSupport}
+    />
+  }
+
   return (
     <S.Box>
       <S.PanelContent>
@@ -25,11 +30,6 @@ function PurchaseFailedPanel () {
             {getLocale('braveVpnContactSupport')}
         </S.ButtonText>
         }
-        {isContactSupportVisible &&
-          <ContactSupport
-            onCloseContactSupport={closeContactSupport}
-          />
-        }
       </S.PanelContent>
     </S.Box>
   )

components/resources/brave_vpn_strings.grdp

@@ -106,7 +106,7 @@
     One moment while loading…
   </message>
   <message name="IDS_BRAVE_VPN_PURCHASE_FAILED " desc="Label to show when purchase status failed">
-    Unable to check the status of your purchase, probably a network problem.
+    Unable to check the status of your purchase. This could be caused by a network problem.
   </message>
   <message name="IDS_BRAVE_VPN_EDIT_PAYMENT" desc="Button title to update payment information">
     Edit payment method