QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(webapp): deprecate the subscription from webapp.

Browse Source
This commit is contained in:
a.bouhuolia
2023-03-05 13:21:06 +02:00
parent 0c1bf302e5
commit f26ced97fe
15 changed files with 118 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/webapp/src/components/Dashboard/Dashboard.tsx
View File

@@ -14,19 +14,16 @@ import GlobalHotkeys from './GlobalHotkeys';
import DashboardProvider from './DashboardProvider';
import DrawersContainer from '@/components/DrawersContainer';
import AlertsContainer from '@/containers/AlertsContainer';
import EnsureSubscriptionIsActive from '../Guards/EnsureSubscriptionIsActive';
/**
* Dashboard preferences.
*/
function DashboardPreferences() {
return (
<EnsureSubscriptionIsActive>
<DashboardSplitPane>
<Sidebar />
<PreferencesPage />
</DashboardSplitPane>
</EnsureSubscriptionIsActive>
<DashboardSplitPane>
<Sidebar />
<PreferencesPage />
</DashboardSplitPane>
);
}

10
packages/webapp/src/components/Dashboard/DashboardBoot.tsx
View File

@@ -7,26 +7,20 @@ import {
} from '@/hooks/query';
import { useSplashLoading } from '@/hooks/state';
import { useWatch, useWatchImmediate, useWhen } from '@/hooks';
import { useSubscription } from '@/hooks/state';
import { setCookie, getCookie } from '@/utils';
/**
* Dashboard meta async booting.
* - Fetches the dashboard meta only if the organization subscribe is active.
* - Once the dashboard meta query is loading display dashboard splash screen.
* - Fetches the dashboard meta in booting state.
* - Once the dashboard meta query started loading display dashboard splash screen.
*/
export function useDashboardMetaBoot() {
const { isSubscriptionActive } = useSubscription();
const {
data: dashboardMeta,
isLoading: isDashboardMetaLoading,
isSuccess: isDashboardMetaSuccess,
} = useDashboardMeta({
keepPreviousData: true,
// Avoid run the query if the organization subscription is not active.
enabled: isSubscriptionActive,
});
const [startLoading, stopLoading] = useSplashLoading();

39
packages/webapp/src/components/Dashboard/DashboardBreadcrumbs.tsx
View File

@@ -1,5 +1,6 @@
// @ts-nocheck
import React from 'react';
import { useHistory } from 'react-router-dom';
import {
CollapsibleList,
MenuItem,
@@ -7,29 +8,29 @@ import {
Boundary,
} from '@blueprintjs/core';
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
import { getDashboardRoutes } from '@/routes/dashboard';
import { useHistory } from 'react-router-dom';
function DashboardBreadcrumbs({ breadcrumbs }){
function DashboardBreadcrumbs({ breadcrumbs }) {
const history = useHistory();
return(
return (
<CollapsibleList
className={Classes.BREADCRUMBS}
dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
collapseFrom={Boundary.START}
visibleItemCount={0}>
{
breadcrumbs.map(({ breadcrumb,match })=>{
return (<MenuItem
key={match.url}
icon={'folder-close'}
text={breadcrumb}
onClick={() => history.push(match.url) } />)
})
}
className={Classes.BREADCRUMBS}
dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
collapseFrom={Boundary.START}
visibleItemCount={0}
>
{breadcrumbs.map(({ breadcrumb, match }) => {
return (
<MenuItem
key={match.url}
icon={'folder-close'}
text={breadcrumb}
onClick={() => history.push(match.url)}
/>
);
})}
</CollapsibleList>
)
);
}
export default withBreadcrumbs([])(DashboardBreadcrumbs)
export default withBreadcrumbs([])(DashboardBreadcrumbs);

2
packages/webapp/src/components/Dashboard/DashboardContent.tsx
View File

@@ -1,7 +1,7 @@
// @ts-nocheck
import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import DashboardTopbar from '@/components/Dashboard/DashboardTopbar';
import DashboardTopbar from '@/components/Dashboard/DashboardTopbar/DashboardTopbar';
import DashboardContentRoutes from '@/components/Dashboard/DashboardContentRoute';
import DashboardErrorBoundary from './DashboardErrorBoundary';

19
packages/webapp/src/components/Dashboard/DashboardContentRoute.tsx
View File

@@ -3,15 +3,13 @@ import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { getDashboardRoutes } from '@/routes/dashboard';
import EnsureSubscriptionsIsActive from '../Guards/EnsureSubscriptionsIsActive';
import EnsureSubscriptionsIsInactive from '../Guards/EnsureSubscriptionsIsInactive';
import DashboardPage from './DashboardPage';
/**
* Dashboard inner route content.
*/
function DashboardContentRouteContent({ route }) {
const content = (
return (
<DashboardPage
name={route.name}
Component={route.component}
@@ -23,21 +21,6 @@ function DashboardContentRouteContent({ route }) {
defaultSearchResource={route.defaultSearchResource}
/>
);
return route.subscriptionActive ? (
<EnsureSubscriptionsIsInactive
subscriptionTypes={route.subscriptionActive}
children={content}
redirectTo={'/billing'}
/>
) : route.subscriptionInactive ? (
<EnsureSubscriptionsIsActive
subscriptionTypes={route.subscriptionInactive}
children={content}
redirectTo={'/'}
/>
) : (
content
);
}
/**

105
packages/webapp/src/components/Dashboard/DashboardTopbar.tsx → packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx
View File

@@ -10,57 +10,19 @@ import {
Tooltip,
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T } from '@/components';
import { FormattedMessage as T, Icon, Hint, If } from '@/components';
import DashboardTopbarUser from '@/components/Dashboard/TopbarUser';
import DashboardBreadcrumbs from '@/components/Dashboard/DashboardBreadcrumbs';
import DashboardBackLink from '@/components/Dashboard/DashboardBackLink';
import { Icon, Hint, If } from '@/components';
import withUniversalSearchActions from '@/containers/UniversalSearch/withUniversalSearchActions';
import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
import withDashboard from '@/containers/Dashboard/withDashboard';
import QuickNewDropdown from '@/containers/QuickNewDropdown/QuickNewDropdown';
import { DashboardHamburgerButton, DashboardQuickSearchButton } from './_components';
import { compose } from '@/utils';
import withSubscriptions from '@/containers/Subscriptions/withSubscriptions';
import { useGetUniversalSearchTypeOptions } from '@/containers/UniversalSearch/utils';
function DashboardTopbarSubscriptionMessage() {
return (
<div class="dashboard__topbar-subscription-msg">
<span>
<T id={'dashboard.subscription_msg.period_over'} />
</span>
</div>
);
}
function DashboardHamburgerButton({ ...props }) {
return (
<Button minimal={true} {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
role="img"
focusable="false"
>
<title>
<T id={'menu'} />
</title>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="5"
stroke-width="2"
d="M4 7h15M4 12h15M4 17h15"
></path>
</svg>
</Button>
);
}
/**
* Dashboard topbar.
@@ -79,10 +41,6 @@ function DashboardTopbar({
// #withGlobalSearch
openGlobalSearch,
// #withSubscriptions
isSubscriptionActive,
isSubscriptionInactive,
}) {
const history = useHistory();
@@ -137,28 +95,22 @@ function DashboardTopbar({
</div>
<div class="dashboard__topbar-right">
<If condition={isSubscriptionInactive}>
<DashboardTopbarSubscriptionMessage />
</If>
<Navbar class="dashboard__topbar-navbar">
<NavbarGroup>
<If condition={isSubscriptionActive}>
<DashboardQuickSearchButton
onClick={() => openGlobalSearch(true)}
/>
<QuickNewDropdown />
<DashboardQuickSearchButton
onClick={() => openGlobalSearch(true)}
/>
<QuickNewDropdown />
<Tooltip
content={<T id={'notifications'} />}
position={Position.BOTTOM}
>
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'notification-24'} iconSize={20} />}
/>
</Tooltip>
</If>
<Tooltip
content={<T id={'notifications'} />}
position={Position.BOTTOM}
>
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'notification-24'} iconSize={20} />}
/>
</Tooltip>
<Button
className={Classes.MINIMAL}
@@ -186,31 +138,4 @@ export default compose(
pageHint,
})),
withDashboardActions,
withSubscriptions(
({ isSubscriptionActive, isSubscriptionInactive }) => ({
isSubscriptionActive,
isSubscriptionInactive,
}),
'main',
),
)(DashboardTopbar);
/**
* Dashboard quick search button.
*/
function DashboardQuickSearchButton({ ...rest }) {
const searchTypeOptions = useGetUniversalSearchTypeOptions();
// Can't continue if there is no any search type option.
if (searchTypeOptions.length <= 0) {
return null;
}
return (
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'search-24'} iconSize={20} />}
text={<T id={'quick_find'} />}
{...rest}
/>
);
}

61
packages/webapp/src/components/Dashboard/DashboardTopbar/_components.tsx Normal file
View File

@@ -0,0 +1,61 @@
// @ts-nocheck
import React from 'react';
import { Button, Classes } from '@blueprintjs/core';
import { useGetUniversalSearchTypeOptions } from '@/containers/UniversalSearch/utils';
import { Icon, FormattedMessage as T } from '@/components';
export function DashboardTopbarSubscriptionMessage() {
return (
<div class="dashboard__topbar-subscription-msg">
<span>
<T id={'dashboard.subscription_msg.period_over'} />
</span>
</div>
);
}
export function DashboardHamburgerButton({ ...props }) {
return (
<Button minimal={true} {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
role="img"
focusable="false"
>
<title>
<T id={'menu'} />
</title>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="5"
stroke-width="2"
d="M4 7h15M4 12h15M4 17h15"
></path>
</svg>
</Button>
);
}
/**
* Dashboard quick search button.
*/
export function DashboardQuickSearchButton({ ...rest }) {
const searchTypeOptions = useGetUniversalSearchTypeOptions();
// Can't continue if there is no any search type option.
if (searchTypeOptions.length <= 0) {
return null;
}
return (
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'search-24'} iconSize={20} />}
text={<T id={'quick_find'} />}
{...rest}
/>
);
}

1
packages/webapp/src/components/Dashboard/DashboardTopbar/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './DashboardTopbar';

32
packages/webapp/src/components/Dashboard/TopbarUser.tsx
View File

@@ -9,25 +9,21 @@ import {
Popover,
Position,
} from '@blueprintjs/core';
import { If, FormattedMessage as T } from '@/components';
import { FormattedMessage as T } from '@/components';
import { firstLettersArgs } from '@/utils';
import { useAuthActions } from '@/hooks/state';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import withSubscriptions from '@/containers/Subscriptions/withSubscriptions';
import { useAuthenticatedAccount } from '@/hooks/query';
import { compose } from '@/utils';
import { firstLettersArgs, compose } from '@/utils';
/**
* Dashboard topbar user.
*/
function DashboardTopbarUser({
// #withDialogActions
openDialog,
// #withSubscriptions
isSubscriptionActive,
}) {
const history = useHistory();
const { setLogout } = useAuthActions();
@@ -62,16 +58,14 @@ function DashboardTopbarUser({
}
/>
<MenuDivider />
<If condition={isSubscriptionActive}>
<MenuItem
text={<T id={'keyboard_shortcuts'} />}
onClick={onKeyboardShortcut}
/>
<MenuItem
text={<T id={'preferences'} />}
onClick={() => history.push('/preferences')}
/>
</If>
<MenuItem
text={<T id={'keyboard_shortcuts'} />}
onClick={onKeyboardShortcut}
/>
<MenuItem
text={<T id={'preferences'} />}
onClick={() => history.push('/preferences')}
/>
<MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
</Menu>
}
@@ -87,8 +81,4 @@ function DashboardTopbarUser({
}
export default compose(
withDialogActions,
withSubscriptions(
({ isSubscriptionActive }) => ({ isSubscriptionActive }),
'main',
),
)(DashboardTopbarUser);