Move support settings to its own view

2 files changed, 161 insertions, 0 deletions

diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index 2155561ca5..509cc03c33 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -27,6 +27,7 @@ import Focus, { IFocusHandle } from './Focus';
 import Launch from './Launch';
 import MainView from './MainView';
 import SplitTunnelingSettings from './SplitTunnelingSettings';
+import Support from './Support';
 import TooManyDevices from './TooManyDevices';
 import TransitionContainer, { TransitionView } from './TransitionContainer';
 
@@ -94,6 +95,7 @@ class AppRouter extends React.Component<IHistoryProps & IAppContext, IAppRoutesS
               <Route exact path={RoutePath.wireguardSettings} component={WireguardSettingsPage} />
               <Route exact path={RoutePath.openVpnSettings} component={OpenVPNSettingsPage} />
               <Route exact path={RoutePath.splitTunneling} component={SplitTunnelingSettings} />
+              <Route exact path={RoutePath.support} component={Support} />
               <Route exact path={RoutePath.problemReport} component={ProblemReportPage} />
               <Route exact path={RoutePath.selectLocation} component={SelectLocationPage} />
               <Route exact path={RoutePath.filter} component={Filter} />
diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
new file mode 100644
index 0000000000..ef2c82dd4e
--- /dev/null
+++ b/gui/src/renderer/components/Support.tsx
@@ -0,0 +1,159 @@
+import { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { colors, links } from '../../config.json';
+import { messages } from '../../shared/gettext';
+import { useAppContext } from '../context';
+import { useHistory } from '../lib/history';
+import { RoutePath } from '../lib/routes';
+import { useSelector } from '../redux/store';
+import {
+  AriaDescribed,
+  AriaDescription,
+  AriaDescriptionGroup,
+  AriaInput,
+  AriaInputGroup,
+  AriaLabel,
+} from './AriaGroup';
+import * as Cell from './cell';
+import { BackAction } from './KeyboardNavigation';
+import { Container, Layout } from './Layout';
+import {
+  NavigationBar,
+  NavigationContainer,
+  NavigationItems,
+  NavigationScrollbars,
+  TitleBarItem,
+} from './NavigationBar';
+import SettingsHeader, { HeaderTitle } from './SettingsHeader';
+
+const StyledContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+});
+
+const StyledContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  marginBottom: '2px',
+});
+
+export default function Support() {
+  const { pop } = useHistory();
+
+  return (
+    <BackAction action={pop}>
+      <Layout>
+        <StyledContainer>
+          <NavigationContainer>
+            <NavigationBar>
+              <NavigationItems>
+                <TitleBarItem>
+                  {
+                    // TRANSLATORS: Title label in navigation bar
+                    messages.pgettext('support-view', 'Support')
+                  }
+                </TitleBarItem>
+              </NavigationItems>
+            </NavigationBar>
+
+            <NavigationScrollbars>
+              <SettingsHeader>
+                <HeaderTitle>{messages.pgettext('support-view', 'Support')}</HeaderTitle>
+              </SettingsHeader>
+
+              <StyledContent>
+                <Cell.Group>
+                  <ProblemReportButton />
+                  <FaqButton />
+                </Cell.Group>
+
+                <Cell.Group>
+                  <BetaProgramSetting />
+                </Cell.Group>
+              </StyledContent>
+            </NavigationScrollbars>
+          </NavigationContainer>
+        </StyledContainer>
+      </Layout>
+    </BackAction>
+  );
+}
+
+function ProblemReportButton() {
+  const history = useHistory();
+  const clickHandler = useCallback(() => history.push(RoutePath.problemReport), [history]);
+
+  // TRANSLATORS: Navigation button to the 'Report a problem' help view
+  const label = messages.pgettext('support-view', 'Report a problem');
+
+  return (
+    <Cell.CellNavigationButton onClick={clickHandler}>
+      <Cell.Label>{label}</Cell.Label>
+    </Cell.CellNavigationButton>
+  );
+}
+
+function FaqButton() {
+  const isOffline = useSelector((state) => state.connection.isBlocked);
+  const { openUrl } = useAppContext();
+
+  const openFaq = useCallback(() => openUrl(links.faq), [openUrl]);
+
+  return (
+    <AriaDescriptionGroup>
+      <AriaDescribed>
+        <Cell.CellButton disabled={isOffline} onClick={openFaq}>
+          <Cell.Label>
+            {
+              // TRANSLATORS: Link to the webpage
+              messages.pgettext('support-view', 'FAQs & Guides')
+            }
+          </Cell.Label>
+          <AriaDescription>
+            <Cell.Icon
+              height={16}
+              width={16}
+              source="icon-extLink"
+              aria-label={messages.pgettext('accessibility', 'Opens externally')}
+            />
+          </AriaDescription>
+        </Cell.CellButton>
+      </AriaDescribed>
+    </AriaDescriptionGroup>
+  );
+}
+
+function BetaProgramSetting() {
+  const isBeta = useSelector((state) => state.version.isBeta);
+  const showBetaReleases = useSelector((state) => state.settings.showBetaReleases);
+  const { setShowBetaReleases } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container disabled={isBeta}>
+        <AriaLabel>
+          <Cell.InputLabel>{messages.pgettext('support-view', 'Beta program')}</Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={showBetaReleases} onChange={setShowBetaReleases} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.Footer>
+        <AriaDescription>
+          <Cell.FooterText>
+            {isBeta
+              ? messages.pgettext(
+                  'support-view',
+                  'This option is unavailable while using a beta version.',
+                )
+              : messages.pgettext(
+                  'support-view',
+                  'Enable to get notified when new beta versions of the app are released.',
+                )}
+          </Cell.FooterText>
+        </AriaDescription>
+      </Cell.Footer>
+    </AriaInputGroup>
+  );
+}