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 = [
+const plans = [
-  { tasks: '10,000', price: '€20 / month', selected: true },
+  { tasks: '10,000', price: '€20' },
-  { tasks: '30,000', price: '€50 / month', selected: false },
+  { 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',
+                        '&:hover': { cursor: 'pointer' },
-                        border: row.selected ? '2px solid #0059f7' : 'none',
+                        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>

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;
 

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"
 }

packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx

@@ -35,10 +35,6 @@ function BillingAndUsageSettings() {
         <Grid item xs={12} sx={{ mb: 6 }}>
           <UsageDataInformation />
         </Grid>
-
-        <Grid item xs={12} sx={{ mb: 6 }}>
-          <UpgradeFreeTrial />
-        </Grid>
       </Grid>
     </Container>
   );

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 <Navigate to={URLS.SETTINGS} replace={true} />;
+  }
+
+  // render nothing until we know if it's cloud or not
+  // here, `isCloud` is not `false`, but `undefined`
+  if (!isCloud) return <React.Fragment />;
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>
+            {formatMessage('planUpgrade.title')}
+          </PageTitle>
+        </Grid>
+
+        <Grid item xs={12} sx={{ mb: 6 }}>
+          <UpgradeFreeTrial />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default PlanUpgrade;

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 (
       }
     />
 
+    <Route
+      path={URLS.SETTINGS_PLAN_UPGRADE}
+      element={
+        <SettingsLayout>
+          <PlanUpgrade />
+        </SettingsLayout>
+      }
+    />
+
     <Route
       path={URLS.SETTINGS}
       element={<Navigate to={URLS.SETTINGS_PROFILE} replace />}