From f21b01b1d60d24b68cbd610c92b196c66bf9eb9c Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 6 Aug 2024 12:12:41 +0200 Subject: [PATCH] feat: Move billing to preferences (#566) * feat: move billing to preferences * chore: remove the commented lines --- .../src/components/Dashboard/TopbarUser.tsx | 11 +------- .../webapp/src/constants/preferencesMenu.tsx | 4 +++ .../containers/Subscriptions/BillingPage.tsx | 28 +++++++++++++------ .../BillingPageContent.module.scss | 5 +--- .../BillingSubscription.module.scss | 4 +-- packages/webapp/src/routes/dashboard.tsx | 7 ----- packages/webapp/src/routes/preferences.tsx | 10 ++++++- 7 files changed, 37 insertions(+), 32 deletions(-) diff --git a/packages/webapp/src/components/Dashboard/TopbarUser.tsx b/packages/webapp/src/components/Dashboard/TopbarUser.tsx index 3cf8bb03c..0c05b0015 100644 --- a/packages/webapp/src/components/Dashboard/TopbarUser.tsx +++ b/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({ } /> - {dashboardMeta.is_bigcapital_cloud && ( - history.push('/billing')} - /> - )} } onClick={onKeyboardShortcut} diff --git a/packages/webapp/src/constants/preferencesMenu.tsx b/packages/webapp/src/constants/preferencesMenu.tsx index 0925532ff..4ff6ef989 100644 --- a/packages/webapp/src/constants/preferencesMenu.tsx +++ b/packages/webapp/src/constants/preferencesMenu.tsx @@ -8,6 +8,10 @@ export default [ disabled: false, href: '/preferences/general', }, + { + text: 'Billing', + href: '/preferences/billing', + }, { text: , href: '/preferences/users', diff --git a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx index f9719e896..f48685d1f 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx +++ b/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 ; } + return ( - - - - - + + + ); } -export default R.compose(withAlertActions)(BillingPageRoot); +export default R.compose( + withAlertActions, + withDashboardActions, +)(BillingPageRoot); diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss b/packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss index 23c7abb89..f9ba83771 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingPageContent.module.scss +++ b/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; } \ No newline at end of file diff --git a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss b/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss index a9f57555c..f37490b87 100644 --- a/packages/webapp/src/containers/Subscriptions/BillingSubscription.module.scss +++ b/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; diff --git a/packages/webapp/src/routes/dashboard.tsx b/packages/webapp/src/routes/dashboard.tsx index aaedb5853..b1b4cb1d4 100644 --- a/packages/webapp/src/routes/dashboard.tsx +++ b/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: `/`, diff --git a/packages/webapp/src/routes/preferences.tsx b/packages/webapp/src/routes/preferences.tsx index 8031230ed..7b72b5544 100644 --- a/packages/webapp/src/routes/preferences.tsx +++ b/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,