feat(webapp): deprecate the subscription from webapp.

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

@@ -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>
-      <DashboardSplitPane>
+      <Sidebar />
-        <Sidebar />
+      <PreferencesPage />
-        <PreferencesPage />
+    </DashboardSplitPane>
-      </DashboardSplitPane>
-    </EnsureSubscriptionIsActive>
   );
 }
 

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

@@ -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.
+ *  - Fetches the dashboard meta in booting state.
- *  - Once the dashboard meta query is loading display dashboard splash screen.
+ *  - 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();
 

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

@@ -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}
+      className={Classes.BREADCRUMBS}
-     dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
+      dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
-     collapseFrom={Boundary.START}
+      collapseFrom={Boundary.START}
-     visibleItemCount={0}>
+      visibleItemCount={0}
-     {
+    >
-      breadcrumbs.map(({ breadcrumb,match })=>{
+      {breadcrumbs.map(({ breadcrumb, match }) => {
-        return (<MenuItem
+        return (
-          key={match.url}
+          <MenuItem
-          icon={'folder-close'}
+            key={match.url}
-          text={breadcrumb}
+            icon={'folder-close'}
-          onClick={() => history.push(match.url) } />)
+            text={breadcrumb}
-        })
+            onClick={() => history.push(match.url)}
-     }
+          />
+        );
+      })}
     </CollapsibleList>
-  )
+  );
 }
 
-export default withBreadcrumbs([])(DashboardBreadcrumbs)
+export default withBreadcrumbs([])(DashboardBreadcrumbs);

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

@@ -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';
 

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

@@ -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
-  );
 }
 
 /**

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

@@ -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
-              <DashboardQuickSearchButton
+              onClick={() => openGlobalSearch(true)}
-                onClick={() => openGlobalSearch(true)}
+            />
-              />
+            <QuickNewDropdown />
-              <QuickNewDropdown />
 
-              <Tooltip
+            <Tooltip
-                content={<T id={'notifications'} />}
+              content={<T id={'notifications'} />}
-                position={Position.BOTTOM}
+              position={Position.BOTTOM}
-              >
+            >
-                <Button
+              <Button
-                  className={Classes.MINIMAL}
+                className={Classes.MINIMAL}
-                  icon={<Icon icon={'notification-24'} iconSize={20} />}
+                icon={<Icon icon={'notification-24'} iconSize={20} />}
-                />
+              />
-              </Tooltip>
+            </Tooltip>
-            </If>
 
             <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}
-    />
-  );
-}

packages/webapp/src/components/Dashboard/DashboardTopbar/_components.tsx

@@ -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}
+    />
+  );
+}

packages/webapp/src/components/Dashboard/DashboardTopbar/index.ts

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

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

@@ -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
-            <MenuItem
+            text={<T id={'keyboard_shortcuts'} />}
-              text={<T id={'keyboard_shortcuts'} />}
+            onClick={onKeyboardShortcut}
-              onClick={onKeyboardShortcut}
+          />
-            />
+          <MenuItem
-            <MenuItem
+            text={<T id={'preferences'} />}
-              text={<T id={'preferences'} />}
+            onClick={() => history.push('/preferences')}
-              onClick={() => history.push('/preferences')}
+          />
-            />
-          </If>
           <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
         </Menu>
       }
@@ -87,8 +81,4 @@ function DashboardTopbarUser({
 }
 export default compose(
   withDialogActions,
-  withSubscriptions(
-    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
-    'main',
-  ),
 )(DashboardTopbarUser);

packages/webapp/src/constants/sidebarMenu.tsx

@@ -5,7 +5,6 @@ import { Features } from '@/constants/features';
 import {
   ISidebarMenuItemType,
   ISidebarMenuOverlayIds,
-  ISidebarSubscriptionAbility,
 } from '@/containers/Dashboard/Sidebar/interfaces';
 import {
   ReportsAction,
@@ -24,9 +23,7 @@ import {
   ManualJournalAction,
   ExpenseAction,
   CashflowAction,
-  ProjectAction,
   PreferencesAbility,
-  SubscriptionBillingAbility,
 } from '@/constants/abilityOption';
 
 export const SidebarMenu = [
@@ -781,19 +778,6 @@ export const SidebarMenu = [
           ability: PreferencesAbility.Mutate,
         },
       },
-      {
-        text: <T id={'billing'} />,
-        href: '/billing',
-        type: ISidebarMenuItemType.Link,
-        subscription: [
-          ISidebarSubscriptionAbility.Expired,
-          ISidebarSubscriptionAbility.Active,
-        ],
-        permission: {
-          subject: AbilitySubject.SubscriptionBilling,
-          ability: SubscriptionBillingAbility.View,
-        },
-      },
     ],
   },
 ];

packages/webapp/src/containers/Dashboard/Sidebar/SidebarContainer.tsx

@@ -4,7 +4,6 @@ import { Scrollbar } from 'react-scrollbars-custom';
 import classNames from 'classnames';
 
 import withDashboard from '@/containers/Dashboard/withDashboard';
-import withSubscriptions from '@/containers/Subscriptions/withSubscriptions';
 
 import { useObserveSidebarExpendedBodyclass } from './hooks';
 import { compose } from '@/utils';
@@ -19,9 +18,6 @@ function SidebarContainerJSX({
 
   // #withDashboard
   sidebarExpended,
-
-  // #withSubscription
-  isSubscriptionActive,
 }) {
   const sidebarScrollerRef = React.useRef();
 
@@ -51,7 +47,6 @@ function SidebarContainerJSX({
     <div
       className={classNames('sidebar', {
         'sidebar--mini-sidebar': !sidebarExpended,
-        'is-subscription-inactive': !isSubscriptionActive,
       })}
       id="sidebar"
       onMouseLeave={handleSidebarMouseLeave}
@@ -72,8 +67,4 @@ export const SidebarContainer = compose(
   withDashboard(({ sidebarExpended }) => ({
     sidebarExpended,
   })),
-  withSubscriptions(
-    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
-    'main',
-  ),
 )(SidebarContainerJSX);

packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx

@@ -1,14 +1,11 @@
 // @ts-nocheck
 import React from 'react';
 import { Menu } from '@blueprintjs/core';
-import * as R from 'ramda';
 
 import { MenuItem, MenuItemLabel } from '@/components';
 import { ISidebarMenuItemType } from '@/containers/Dashboard/Sidebar/interfaces';
 import { useIsSidebarMenuItemActive } from './hooks';
 
-import withSubscriptions from '@/containers/Subscriptions/withSubscriptions';
-
 /**
  * Sidebar menu item.
  * @returns {JSX.Element}
@@ -55,7 +52,7 @@ function SidebarMenuItemComposer({ item, index }) {
  * Sidebar menu.
  * @returns {JSX.Element}
  */
-function SidebarMenuJSX({ menu }) {
+export function SidebarMenu({ menu }) {
   return (
     <div>
       <Menu className="sidebar-menu">
@@ -66,10 +63,3 @@ function SidebarMenuJSX({ menu }) {
     </div>
   );
 }
-
-export const SidebarMenu = R.compose(
-  withSubscriptions(
-    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
-    'main',
-  ),
-)(SidebarMenuJSX);

packages/webapp/src/containers/Dashboard/Sidebar/hooks.tsx

@@ -19,7 +19,6 @@ import {
 } from './interfaces';
 import { filterValuesDeep, deepdash } from '@/utils';
 
-
 const deepDashConfig = {
   childrenPath: 'children',
   pathFormat: 'array',
@@ -136,9 +135,7 @@ function useFilterSidebarMenuAbility(menu) {
 
   return deepdash.filterDeep(
     menu,
-    (item) => {
+    (item) => predFeature(item) && predAbility(item),
-      return predFeature(item) && predAbility(item) && predSubscription(item);
-    },
     deepDashConfig,
   );
 }

packages/webapp/src/containers/Setup/SetupRightSection.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import SetupDialogs from './SetupDialogs';
 import SetupWizardContent from './SetupWizardContent';
 
-import withSubscriptions from '@/containers/Subscriptions/withSubscriptions';
 import withOrganization from '@/containers/Organization/withOrganization';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import withSetupWizard from '@/store/organizations/withSetupWizard';

packages/webapp/src/routes/register.tsx

@@ -1,23 +0,0 @@
-// @ts-nocheck
-import LazyLoader from '@/components/LazyLoader';
-
-export default [
-  {
-    path: '/register/subscription',
-    component: LazyLoader({
-      loader: () => import('@/containers/Authentication/Register/RegisterSubscriptionForm'),
-    }),
-  },
-  {
-    path: '/register/organization',
-    component: LazyLoader({
-      loader: () => import('@/containers/Authentication/Register/RegisterOrganizationForm'),
-    }),
-  },
-  {
-    path: `/`,
-    component: LazyLoader({
-      loader: () => import('@/containers/Authentication/Register/RegisterUserForm'),
-    }),
-  },
-];