Add Footer component to launch view

13 files changed, 156 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/Footer.tsx
new file mode 100644
index 0000000000..7a08723916
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/Footer.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+import { Flex } from '../../../../../lib/components';
+import { colors, Radius } from '../../../../../lib/foundations';
+import { useContent } from './components/hooks';
+
+const StyledLaunchFooter = styled(Flex)`
+  width: 100%;
+  background-color: ${colors.darkBlue};
+  border-radius: ${Radius.radius8};
+`;
+
+export function Footer() {
+  const content = useContent();
+  return (
+    <StyledLaunchFooter $flexDirection="column" $padding="medium">
+      {content}
+    </StyledLaunchFooter>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/default-footer/DefaultFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/default-footer/DefaultFooter.tsx
new file mode 100644
index 0000000000..3a64f7c19d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/default-footer/DefaultFooter.tsx
@@ -0,0 +1,30 @@
+import { messages } from '../../../../../../../../shared/gettext';
+import { Button } from '../../../../../../../lib/components';
+import { FlexColumn } from '../../../../../../../lib/components/flex-column';
+import { useBoolean } from '../../../../../../../lib/utility-hooks';
+import { TroubleshootingModal } from '../../../troubleshooting-modal';
+import { FooterText } from '../footer-text';
+
+export function DefaultLaunchFooter() {
+  const [dialogOpen, showDialog, hideDialog] = useBoolean();
+
+  return (
+    <>
+      <FlexColumn $gap="medium">
+        <FooterText>
+          {
+            // TRANSLATORS: Message in launch view when the mullvad service cannot be contacted.
+            messages.pgettext(
+              'launch-view',
+              'Unable to contact the Mullvad system service, your connection might be unsecure. Please troubleshoot or send a problem report by clicking the "Learn more" button.',
+            )
+          }
+        </FooterText>
+        <Button onClick={showDialog}>
+          <Button.Text>{messages.gettext('Learn more')}</Button.Text>
+        </Button>
+      </FlexColumn>
+      <TroubleshootingModal isOpen={dialogOpen} onClose={hideDialog} />
+    </>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/default-footer/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/default-footer/index.ts
new file mode 100644
index 0000000000..59528bba29
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/default-footer/index.ts
@@ -0,0 +1 @@
+export * from './DefaultFooter';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
new file mode 100644
index 0000000000..61e605fb81
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/FooterText.tsx
@@ -0,0 +1,7 @@
+import { Text, TextProps } from '../../../../../../../lib/components';
+
+export type FooterTextProps = TextProps;
+
+export function FooterText(props: FooterTextProps) {
+  return <Text variant="labelTiny" {...props}></Text>;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/index.ts
new file mode 100644
index 0000000000..09cf8c8567
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/footer-text/index.ts
@@ -0,0 +1 @@
+export * from './FooterText';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/hooks/index.ts
new file mode 100644
index 0000000000..951561b9d2
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useContent';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/hooks/useContent.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/hooks/useContent.tsx
new file mode 100644
index 0000000000..8bcda7c0c6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/hooks/useContent.tsx
@@ -0,0 +1,10 @@
+import { useSelector } from '../../../../../../../redux/store';
+import { DefaultLaunchFooter, MacOsPermissionFooter, RestartDaemonFooter } from '../../..';
+
+export const useContent = () => {
+  const platform = window.env.platform;
+  const daemonAllowed = useSelector((state) => state.userInterface.daemonAllowed);
+  if (platform === 'darwin' && daemonAllowed === false) return <MacOsPermissionFooter />;
+  if (platform === 'win32') return <RestartDaemonFooter />;
+  return <DefaultLaunchFooter />;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/index.ts
new file mode 100644
index 0000000000..3c88ff6018
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/index.ts
@@ -0,0 +1 @@
+export * from './footer-text';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/macos-permission-footer/MacOsSystemSettingsFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/macos-permission-footer/MacOsSystemSettingsFooter.tsx
new file mode 100644
index 0000000000..fa680bacdf
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/macos-permission-footer/MacOsSystemSettingsFooter.tsx
@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+
+import { messages } from '../../../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../../../context';
+import { Button } from '../../../../../../../lib/components';
+import { FlexColumn } from '../../../../../../../lib/components/flex-column';
+import { FooterText } from '../footer-text';
+
+export function MacOsPermissionFooter() {
+  const { showLaunchDaemonSettings } = useAppContext();
+
+  const openSettings = useCallback(async () => {
+    await showLaunchDaemonSettings();
+  }, [showLaunchDaemonSettings]);
+
+  return (
+    <>
+      <FlexColumn $gap="medium">
+        <FooterText>
+          {
+            // TRANSLATORS: Message in launch view when the background process permissions have been revoked.
+            messages.pgettext(
+              'launch-view',
+              'Permission for the Mullvad VPN service has been revoked. Please go to System Settings and allow Mullvad VPN under the “Allow in the Background” setting.',
+            )
+          }
+        </FooterText>
+        <Button onClick={openSettings}>
+          <Button.Text>
+            {
+              // TRANSLATORS: Button label for system settings.
+              messages.gettext('Go to System Settings')
+            }
+          </Button.Text>
+        </Button>
+      </FlexColumn>
+    </>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/macos-permission-footer/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/macos-permission-footer/index.ts
new file mode 100644
index 0000000000..f0ffcd17b5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/macos-permission-footer/index.ts
@@ -0,0 +1 @@
+export * from './MacOsSystemSettingsFooter';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/restart-daemon-footer/RestartDaemonFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/restart-daemon-footer/RestartDaemonFooter.tsx
new file mode 100644
index 0000000000..acee94e448
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/restart-daemon-footer/RestartDaemonFooter.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { messages } from '../../../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../../../context';
+import { Button } from '../../../../../../../lib/components';
+import { FlexColumn } from '../../../../../../../lib/components/flex-column';
+import { useBoolean } from '../../../../../../../lib/utility-hooks';
+import { useUserInterfaceDaemonStatus } from '../../../../../../../redux/hooks';
+import { TroubleshootingModal } from '../../../troubleshooting-modal';
+
+export function RestartDaemonFooter() {
+  const { tryStartDaemon } = useAppContext();
+  const { daemonStatus } = useUserInterfaceDaemonStatus();
+  const [dialogOpen, showDialog, hideDialog] = useBoolean();
+
+  const handleTryAgain = React.useCallback(() => {
+    tryStartDaemon();
+  }, [tryStartDaemon]);
+
+  return (
+    <>
+      <FlexColumn $gap="medium">
+        <Button onClick={handleTryAgain} disabled={daemonStatus === 'start-requested'}>
+          <Button.Text>
+            {
+              // TRANSLATORS: Button label for trying to restart the daemon again.
+              messages.pgettext('launch-view', 'Try again')
+            }
+          </Button.Text>
+        </Button>
+        <Button onClick={showDialog}>
+          <Button.Text>
+            {
+              // TRANSLATORS: Button label for opening dialog with troubleshooting details.
+              messages.pgettext('launch-view', 'Details')
+            }
+          </Button.Text>
+        </Button>
+      </FlexColumn>
+      <TroubleshootingModal isOpen={dialogOpen} onClose={hideDialog} />
+    </>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/restart-daemon-footer/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/restart-daemon-footer/index.ts
new file mode 100644
index 0000000000..81ebd79ab8
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/components/restart-daemon-footer/index.ts
@@ -0,0 +1 @@
+export * from './RestartDaemonFooter';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/index.ts
new file mode 100644
index 0000000000..ddcc5a9cd1
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/launch/components/footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';