feat: move plan upgrade to its page

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 (
     <React.Fragment>
       <Card sx={{ mb: 3, p: 2 }}>
@@ -42,7 +47,7 @@ export default function UpgradeFreeTrial() {
             alignItems="stretch"
           >
             <TableContainer component={Paper}>
-              <Table sx={{ minWidth: 650 }} aria-label="simple table">
+              <Table aria-label="simple table">
                 <TableHead
                   sx={{
                     backgroundColor: (theme) =>
@@ -69,19 +74,21 @@ export default function UpgradeFreeTrial() {
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {rows.map((row) => (
+                  {plans.map((row, index) => (
                     <TableRow
                       key={row.tasks}
+                      onClick={() => 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',
                       }}
                     >
                       <TableCell component="th" scope="row" sx={{ py: 2 }}>
                         <Typography
                           variant="subtitle2"
                           sx={{
-                            fontWeight: row.selected ? 'bold' : 'normal',
+                            fontWeight: selectedIndex === index ? 'bold' : 'normal',
                           }}
                         >
                           {row.tasks}
@@ -91,10 +98,10 @@ export default function UpgradeFreeTrial() {
                         <Typography
                           variant="subtitle2"
                           sx={{
-                            fontWeight: row.selected ? 'bold' : 'normal',
+                            fontWeight: selectedIndex === index ? 'bold' : 'normal',
                           }}
                         >
-                          {row.price}
+                          {row.price} / month
                         </Typography>
                       </TableCell>
                     </TableRow>
@@ -127,7 +134,7 @@ export default function UpgradeFreeTrial() {
                   fontWeight: 'bold',
                 }}
               >
-                €20
+                {selectedPlan.price}
               </Typography>
             </Box>
 

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() {
             <Divider sx={{ mt: 2 }} />
           </Box>
 
-          <Button size="small" variant="contained" sx={{ mt: 2 }}>
+          <Button
+            component={Link}
+            to={URLS.SETTINGS_PLAN_UPGRADE}
+            size="small"
+            variant="contained"
+            sx={{ mt: 2 }}
+          >
             Upgrade
           </Button>
         </CardContent>