From 40862fcd019ea585f51929fca0da989802033516 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Sun, 19 Mar 2023 22:22:11 +0000 Subject: [PATCH] feat: move plan upgrade to its page --- .../components/UpgradeFreeTrial/index.ee.tsx | 29 ++++++++----- .../UsageDataInformation/index.ee.tsx | 12 ++++-- packages/web/src/config/urls.ts | 2 + packages/web/src/locales/en.json | 3 +- .../BillingAndUsageSettings/index.ee.tsx | 4 -- .../web/src/pages/PlanUpgrade/index.ee.tsx | 42 +++++++++++++++++++ packages/web/src/settingsRoutes.tsx | 10 +++++ 7 files changed, 83 insertions(+), 19 deletions(-) create mode 100644 packages/web/src/pages/PlanUpgrade/index.ee.tsx diff --git a/packages/web/src/components/UpgradeFreeTrial/index.ee.tsx b/packages/web/src/components/UpgradeFreeTrial/index.ee.tsx index ef68864d..9608e637 100644 --- a/packages/web/src/components/UpgradeFreeTrial/index.ee.tsx +++ b/packages/web/src/components/UpgradeFreeTrial/index.ee.tsx @@ -16,12 +16,17 @@ import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import LockIcon from '@mui/icons-material/Lock'; -const rows = [ - { tasks: '10,000', price: '€20 / month', selected: true }, - { tasks: '30,000', price: '€50 / month', selected: false }, +const plans = [ + { tasks: '10,000', price: '€20' }, + { tasks: '30,000', price: '€50' }, ]; export default function UpgradeFreeTrial() { + const [selectedIndex, setSelectedIndex] = React.useState(0); + const selectedPlan = plans[selectedIndex]; + + const updateSelection = (index: number) => setSelectedIndex(index); + return ( @@ -42,7 +47,7 @@ export default function UpgradeFreeTrial() { alignItems="stretch" > - +
@@ -69,19 +74,21 @@ export default function UpgradeFreeTrial() { - {rows.map((row) => ( + {plans.map((row, index) => ( updateSelection(index)} sx={{ - backgroundColor: row.selected ? '#f1f3fa' : 'white', - border: row.selected ? '2px solid #0059f7' : 'none', + '&:hover': { cursor: 'pointer' }, + backgroundColor: selectedIndex === index ? '#f1f3fa' : 'white', + border: selectedIndex === index ? '2px solid #0059f7' : 'none', }} > {row.tasks} @@ -91,10 +98,10 @@ export default function UpgradeFreeTrial() { - {row.price} + {row.price} / month @@ -127,7 +134,7 @@ export default function UpgradeFreeTrial() { fontWeight: 'bold', }} > - €20 + {selectedPlan.price} diff --git a/packages/web/src/components/UsageDataInformation/index.ee.tsx b/packages/web/src/components/UsageDataInformation/index.ee.tsx index 623ada51..296ef5b6 100644 --- a/packages/web/src/components/UsageDataInformation/index.ee.tsx +++ b/packages/web/src/components/UsageDataInformation/index.ee.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { DateTime } from 'luxon'; - +import { Link } from 'react-router-dom'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; @@ -10,6 +9,7 @@ import Divider from '@mui/material/Divider'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; +import * as URLS from 'config/urls'; import useUsageData from 'hooks/useUsageData.ee'; export default function UsageDataInformation() { @@ -143,7 +143,13 @@ export default function UsageDataInformation() { - diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts index 07f3c448..174bbc9a 100644 --- a/packages/web/src/config/urls.ts +++ b/packages/web/src/config/urls.ts @@ -65,9 +65,11 @@ export const SETTINGS = '/settings'; export const SETTINGS_DASHBOARD = SETTINGS; export const PROFILE = 'profile'; export const BILLING_AND_USAGE = 'billing'; +export const PLAN_UPGRADE = 'upgrade'; export const UPDATES = '/updates'; export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`; export const SETTINGS_BILLING_AND_USAGE = `${SETTINGS}/${BILLING_AND_USAGE}`; +export const SETTINGS_PLAN_UPGRADE = `${SETTINGS_BILLING_AND_USAGE}/${PLAN_UPGRADE}`; export const DASHBOARD = FLOWS; diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index bb127ad5..c860fb3e 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -139,5 +139,6 @@ "resetPasswordForm.passwordUpdated": "The password has been updated. Now, you can login.", "usageAlert.informationText": "Tasks: {consumedTaskCount}/{allowedTaskCount} (Resets {relativeResetDate})", "usageAlert.viewPlans": "View plans", - "jsonViewer.noDataFound": "We couldn't find anything matching your search" + "jsonViewer.noDataFound": "We couldn't find anything matching your search", + "planUpgrade.title": "Upgrade your plan" } diff --git a/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx b/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx index b6aa962c..3b5383e4 100644 --- a/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx +++ b/packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx @@ -35,10 +35,6 @@ function BillingAndUsageSettings() { - - - - ); diff --git a/packages/web/src/pages/PlanUpgrade/index.ee.tsx b/packages/web/src/pages/PlanUpgrade/index.ee.tsx new file mode 100644 index 00000000..e7796e64 --- /dev/null +++ b/packages/web/src/pages/PlanUpgrade/index.ee.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { Navigate } from 'react-router-dom'; +import Grid from '@mui/material/Grid'; + +import * as URLS from 'config/urls'; +import UpgradeFreeTrial from 'components/UpgradeFreeTrial/index.ee'; +import PageTitle from 'components/PageTitle'; +import Container from 'components/Container'; +import useFormatMessage from 'hooks/useFormatMessage'; +import useCloud from 'hooks/useCloud'; + +function PlanUpgrade() { + const isCloud = useCloud(); + const formatMessage = useFormatMessage(); + + // redirect to the initial settings page + if (isCloud === false) { + return ; + } + + // render nothing until we know if it's cloud or not + // here, `isCloud` is not `false`, but `undefined` + if (!isCloud) return ; + + return ( + + + + + {formatMessage('planUpgrade.title')} + + + + + + + + + ); +} + +export default PlanUpgrade; diff --git a/packages/web/src/settingsRoutes.tsx b/packages/web/src/settingsRoutes.tsx index 60147939..454bcb74 100644 --- a/packages/web/src/settingsRoutes.tsx +++ b/packages/web/src/settingsRoutes.tsx @@ -2,6 +2,7 @@ import { Route, Navigate } from 'react-router-dom'; import SettingsLayout from 'components/SettingsLayout'; import ProfileSettings from 'pages/ProfileSettings'; import BillingAndUsageSettings from 'pages/BillingAndUsageSettings/index.ee'; +import PlanUpgrade from 'pages/PlanUpgrade/index.ee'; import * as URLS from 'config/urls'; @@ -25,6 +26,15 @@ export default ( } /> + + + + } + /> + }