feat: redesign billing page

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { Navigate } from 'react-router-dom';
 import Grid from '@mui/material/Grid';
 
-import * as URLS from 'config/urls'
-import PaymentInformation from 'components/PaymentInformation/index.ee';
+import * as URLS from 'config/urls';
 import UsageDataInformation from 'components/UsageDataInformation/index.ee';
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
@@ -16,27 +15,25 @@ function BillingAndUsageSettings() {
 
   // redirect to the initial settings page
   if (isCloud === false) {
-    return (<Navigate to={URLS.SETTINGS} replace={true} />)
+    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 />
+  if (!isCloud) return <React.Fragment />;
 
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
-      <Grid container item xs={12} sm={9} md={8} lg={6}>
+      <Grid container item xs={12} sm={9} md={8}>
         <Grid item xs={12} sx={{ mb: [2, 5] }}>
-          <PageTitle>{formatMessage('billingAndUsageSettings.title')}</PageTitle>
+          <PageTitle>
+            {formatMessage('billingAndUsageSettings.title')}
+          </PageTitle>
         </Grid>
 
         <Grid item xs={12} sx={{ mb: 6 }}>
           <UsageDataInformation />
         </Grid>
-
-        <Grid item xs={12}>
-          <PaymentInformation />
-        </Grid>
       </Grid>
     </Container>
   );