Move account components to separate folders

10 files changed, 62 insertions, 52 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx
index 56ce60f216..2f51616f40 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/Account.tsx
@@ -1,31 +1,21 @@
 import { useCallback, useEffect } from 'react';
 
-import { formatDate, hasExpired } from '../../../../shared/account-expiry';
 import { urls } from '../../../../shared/constants';
 import { messages } from '../../../../shared/gettext';
 import { useAppContext } from '../../../context';
-import { Button, Flex } from '../../../lib/components';
+import { Button } from '../../../lib/components';
 import { FlexColumn } from '../../../lib/components/flex-column';
 import { useHistory } from '../../../lib/history';
 import { useExclusiveTask } from '../../../lib/hooks/use-exclusive-task';
 import { useEffectEvent } from '../../../lib/utility-hooks';
 import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../..';
-import AccountNumberLabel from '../../AccountNumberLabel';
-import DeviceInfoButton from '../../DeviceInfoButton';
 import { BackAction } from '../../KeyboardNavigation';
 import { Footer, Layout, SettingsContainer } from '../../Layout';
 import { RedeemVoucherButton } from '../../RedeemVoucher';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
-import {
-  AccountContainer,
-  AccountOutOfTime,
-  AccountRow,
-  AccountRowLabel,
-  AccountRows,
-  AccountRowValue,
-  DeviceRowValue,
-} from './AccountStyles';
+import { AccountContainer, AccountRow, AccountRowLabel, AccountRows } from './AccountStyles';
+import { AccountExpiryRow, AccountNumberRow, DeviceNameRow } from './components';
 
 export function Account() {
   const history = useHistory();
@@ -116,42 +106,3 @@ export function Account() {
     </BackAction>
   );
 }
-
-function DeviceNameRow() {
-  const deviceName = useSelector((state) => state.account.deviceName);
-  return (
-    <Flex $gap="small" $alignItems="center">
-      <DeviceRowValue>{deviceName}</DeviceRowValue>
-      <DeviceInfoButton />
-    </Flex>
-  );
-}
-
-function AccountNumberRow() {
-  const accountNumber = useSelector((state) => state.account.accountNumber);
-  return <AccountRowValue as={AccountNumberLabel} accountNumber={accountNumber || ''} />;
-}
-
-function AccountExpiryRow() {
-  const accountExpiry = useSelector((state) => state.account.expiry);
-  const expiryLocale = useSelector((state) => state.userInterface.locale);
-  return <FormattedAccountExpiry expiry={accountExpiry} locale={expiryLocale} />;
-}
-
-function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
-  if (props.expiry) {
-    if (hasExpired(props.expiry)) {
-      return (
-        <AccountOutOfTime>{messages.pgettext('account-view', 'OUT OF TIME')}</AccountOutOfTime>
-      );
-    } else {
-      return <AccountRowValue>{formatDate(props.expiry, props.locale)}</AccountRowValue>;
-    }
-  } else {
-    return (
-      <AccountRowValue>
-        {messages.pgettext('account-view', 'Currently unavailable')}
-      </AccountRowValue>
-    );
-  }
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-expiry-row/AccountExpiryRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-expiry-row/AccountExpiryRow.tsx
new file mode 100644
index 0000000000..eb4fb141d0
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-expiry-row/AccountExpiryRow.tsx
@@ -0,0 +1,8 @@
+import { useSelector } from '../../../../../redux/store';
+import { FormattedAccountExpiry } from '../formatted-account-expiry/FormattedAccountExpiry';
+
+export function AccountExpiryRow() {
+  const accountExpiry = useSelector((state) => state.account.expiry);
+  const expiryLocale = useSelector((state) => state.userInterface.locale);
+  return <FormattedAccountExpiry expiry={accountExpiry} locale={expiryLocale} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-expiry-row/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-expiry-row/index.ts
new file mode 100644
index 0000000000..94c9d6b4c6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-expiry-row/index.ts
@@ -0,0 +1 @@
+export * from './AccountExpiryRow';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/AccountNumberRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/AccountNumberRow.tsx
new file mode 100644
index 0000000000..8e097a0694
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/AccountNumberRow.tsx
@@ -0,0 +1,8 @@
+import { useSelector } from '../../../../../redux/store';
+import AccountNumberLabel from '../../../../AccountNumberLabel';
+import { AccountRowValue } from '../../AccountStyles';
+
+export function AccountNumberRow() {
+  const accountNumber = useSelector((state) => state.account.accountNumber);
+  return <AccountRowValue as={AccountNumberLabel} accountNumber={accountNumber || ''} />;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/index.ts
new file mode 100644
index 0000000000..4e6ee7e5e5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/account-number-row/index.ts
@@ -0,0 +1 @@
+export * from './AccountNumberRow';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx
new file mode 100644
index 0000000000..4873689992
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/DeviceNameRow.tsx
@@ -0,0 +1,14 @@
+import { Flex } from '../../../../../lib/components';
+import { useSelector } from '../../../../../redux/store';
+import DeviceInfoButton from '../../../../DeviceInfoButton';
+import { DeviceRowValue } from '../../AccountStyles';
+
+export function DeviceNameRow() {
+  const deviceName = useSelector((state) => state.account.deviceName);
+  return (
+    <Flex $gap="small" $alignItems="center">
+      <DeviceRowValue>{deviceName}</DeviceRowValue>
+      <DeviceInfoButton />
+    </Flex>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/index.ts
new file mode 100644
index 0000000000..86f3b9427f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/device-name-row/index.ts
@@ -0,0 +1 @@
+export * from './DeviceNameRow';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/FormattedAccountExpiry.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/FormattedAccountExpiry.tsx
new file mode 100644
index 0000000000..782643c5ba
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/FormattedAccountExpiry.tsx
@@ -0,0 +1,21 @@
+import { formatDate, hasExpired } from '../../../../../../shared/account-expiry';
+import { messages } from '../../../../../../shared/gettext';
+import { AccountOutOfTime, AccountRowValue } from '../../AccountStyles';
+
+export function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
+  if (props.expiry) {
+    if (hasExpired(props.expiry)) {
+      return (
+        <AccountOutOfTime>{messages.pgettext('account-view', 'OUT OF TIME')}</AccountOutOfTime>
+      );
+    } else {
+      return <AccountRowValue>{formatDate(props.expiry, props.locale)}</AccountRowValue>;
+    }
+  } else {
+    return (
+      <AccountRowValue>
+        {messages.pgettext('account-view', 'Currently unavailable')}
+      </AccountRowValue>
+    );
+  }
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/index.ts
new file mode 100644
index 0000000000..7dbe455a16
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/formatted-account-expiry/index.ts
@@ -0,0 +1 @@
+export * from './FormattedAccountExpiry';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/index.ts
new file mode 100644
index 0000000000..053c0cbbf7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/account/components/index.ts
@@ -0,0 +1,4 @@
+export * from './account-expiry-row';
+export * from './account-number-row';
+export * from './device-name-row';
+export * from './formatted-account-expiry';