feat: Move billing to preferences (#566)

* feat: move billing to preferences

* chore: remove the commented lines

packages/webapp/src/components/Dashboard/TopbarUser.tsx

@@ -15,7 +15,7 @@ import { useAuthActions } from '@/hooks/state';
 
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { useAuthenticatedAccount, useDashboardMeta } from '@/hooks/query';
+import { useAuthenticatedAccount } from '@/hooks/query';
 import { firstLettersArgs, compose } from '@/utils';
 
 /**
@@ -31,9 +31,6 @@ function DashboardTopbarUser({
   // Retrieve authenticated user information.
   const { data: user } = useAuthenticatedAccount();
 
-  const { data: dashboardMeta } = useDashboardMeta({
-    keepPreviousData: true,
-  });
   const onClickLogout = () => {
     setLogout();
   };
@@ -61,12 +58,6 @@ function DashboardTopbarUser({
             }
           />
           <MenuDivider />
-          {dashboardMeta.is_bigcapital_cloud && (
-            <MenuItem
-              text={'Billing'}
-              onClick={() => history.push('/billing')}
-            />
-          )}
           <MenuItem
             text={<T id={'keyboard_shortcuts'} />}
             onClick={onKeyboardShortcut}

packages/webapp/src/constants/preferencesMenu.tsx

@@ -8,6 +8,10 @@ export default [
     disabled: false,
     href: '/preferences/general',
   },
+  {
+    text: 'Billing',
+    href: '/preferences/billing',
+  },
   {
     text: <T id={'users'} />,
     href: '/preferences/users',

packages/webapp/src/containers/Subscriptions/BillingPage.tsx

@@ -1,28 +1,40 @@
 // @ts-nocheck
+import { useEffect } from 'react';
 import * as R from 'ramda';
 import { Redirect } from 'react-router-dom';
 import { BillingPageBoot } from './BillingPageBoot';
 import { BillingPageContent } from './BillingPageContent';
-import { DashboardInsider } from '@/components';
 import { useDashboardMeta } from '@/hooks/query';
 import withAlertActions from '../Alert/withAlertActions';
+import withDashboardActions from '../Dashboard/withDashboardActions';
 
-function BillingPageRoot({ openAlert }) {
+function BillingPageRoot({
+  openAlert,
+
+  // #withAlertActions
+  changePreferencesPageTitle,
+}) {
   const { data: dashboardMeta } = useDashboardMeta({
     keepPreviousData: true,
   });
 
+  useEffect(() => {
+    changePreferencesPageTitle('Billing');
+  }, [changePreferencesPageTitle]);
+
   // In case the edition is not Bigcapital Cloud, redirect to the homepage.
   if (!dashboardMeta.is_bigcapital_cloud) {
     return <Redirect to={{ pathname: '/' }} />;
   }
+
   return (
-    <DashboardInsider>
-      <BillingPageBoot>
-        <BillingPageContent />
-      </BillingPageBoot>
-    </DashboardInsider>
+    <BillingPageBoot>
+      <BillingPageContent />
+    </BillingPageBoot>
   );
 }
 
-export default R.compose(withAlertActions)(BillingPageRoot);
+export default R.compose(
+  withAlertActions,
+  withDashboardActions,
+)(BillingPageRoot);

packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss

@@ -1,8 +1,5 @@
 .root {
   display: flex;
   flex-direction: column;
-  padding: 32px 40px;
-  min-width: 800px;
-  max-width: 900px;
-  width: 75%;
+  padding: 20px;
 }

packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss

@@ -3,8 +3,8 @@
   width: 450px;
   background: #fff;
   border-radius: 5px;
-  box-shadow:  0 -8px 0 0px #BFCCD6, rgb(0 8 36 / 9%) 0px 4px 20px -5px;
-  border: 1px solid #C4D2D7;
+  box-shadow:  0 -6px 0 0px #ccd6dd;
+  border: 1px solid #d2dde1;
   min-height: 420px;
   display: flex;  
   flex-direction: column;

packages/webapp/src/routes/dashboard.tsx

@@ -1231,13 +1231,6 @@ export const getDashboardRoutes = () => [
     breadcrumb: 'Bank Rules',
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
-  {
-    path: '/billing',
-    component: lazy(() => import('@/containers/Subscriptions/BillingPage')),
-    pageTitle: 'Billing',
-    breadcrumb: 'Billing',
-    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
-  },
   // Homepage
   {
     path: `/`,

packages/webapp/src/routes/preferences.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { lazy } from 'react';
 import General from '@/containers/Preferences/General/General';
 import Users from '../containers/Preferences/Users/Users';
 import Roles from '../containers/Preferences/Users/Roles/RolesForm/RolesFormPage';
@@ -12,7 +13,9 @@ import Branches from '../containers/Preferences/Branches';
 import Invoices from '../containers/Preferences/Invoices/PreferencesInvoices';
 import { PreferencesCreditNotes } from '../containers/Preferences/CreditNotes/PreferencesCreditNotes';
 import { PreferencesEstimates } from '@/containers/Preferences/Estimates/PreferencesEstimates';
-import{ PreferencesReceipts } from '@/containers/Preferences/Receipts/PreferencesReceipts'
+import { PreferencesReceipts } from '@/containers/Preferences/Receipts/PreferencesReceipts';
+
+import BillingPage from '@/containers/Subscriptions/BillingPage';
 
 const BASE_URL = '/preferences';
 
@@ -87,6 +90,11 @@ export default [
     component: SMSIntegration,
     exact: true,
   },
+  {
+    path: `${BASE_URL}/billing`,
+    component: BillingPage,
+    exact: true,
+  },
   {
     path: `${BASE_URL}/`,
     component: DefaultRoute,