Add Manual download button

6 files changed, 52 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/index.ts
index b38a80c80e..993e7ce8ce 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/index.ts
@@ -1,6 +1,7 @@
 export * from './cancel-button';
 export * from './download-progress';
 export * from './install-button';
+export * from './manual-download-button';
 export * from './report-problem-button';
 export * from './retry-upgrade-button';
 export * from './upgrade-button';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/ManualDownloadButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/ManualDownloadButton.tsx
new file mode 100644
index 0000000000..e130670446
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/ManualDownloadButton.tsx
@@ -0,0 +1,23 @@
+import { messages } from '../../../../../../shared/gettext';
+import { Button, Icon } from '../../../../../lib/components';
+import { useDisabled, useHandleClick } from './hooks';
+
+export function ManualDownloadButton() {
+  const disabled = useDisabled();
+  const handleClick = useHandleClick();
+
+  return (
+    <Button
+      aria-description={messages.pgettext('accessibility', 'Opens externally')}
+      disabled={disabled}
+      onClick={handleClick}>
+      <Button.Text>
+        {
+          // TRANSLATORS: Button text to manually download the update
+          messages.pgettext('app-upgrade-view', 'Manual download')
+        }
+      </Button.Text>
+      <Icon icon="external" />
+    </Button>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/index.ts
new file mode 100644
index 0000000000..f0418cde6c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useDisabled';
+export * from './useHandleClick';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/useDisabled.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/useDisabled.ts
new file mode 100644
index 0000000000..e41c5b12ff
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/useDisabled.ts
@@ -0,0 +1,9 @@
+import { useConnectionIsBlocked } from '../../../../../../redux/hooks';
+
+export const useDisabled = () => {
+  const { isBlocked } = useConnectionIsBlocked();
+
+  const disabled = isBlocked;
+
+  return disabled;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/useHandleClick.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/useHandleClick.ts
new file mode 100644
index 0000000000..2f844c7bee
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/hooks/useHandleClick.ts
@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+
+import { getDownloadUrl } from '../../../../../../../shared/version';
+import { useAppContext } from '../../../../../../context';
+import { useVersionSuggestedIsBeta } from '../../../../../../redux/hooks';
+
+export const useHandleClick = () => {
+  const { suggestedIsBeta } = useVersionSuggestedIsBeta();
+  const { openUrl } = useAppContext();
+
+  const handleClick = useCallback(async () => {
+    await openUrl(getDownloadUrl(suggestedIsBeta));
+  }, [openUrl, suggestedIsBeta]);
+
+  return handleClick;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/index.ts
new file mode 100644
index 0000000000..11338008b7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-upgrade/components/manual-download-button/index.ts
@@ -0,0 +1 @@
+export * from './ManualDownloadButton';