feat: ensure to access dashboard user's subscription is active.

client/src/components/Sidebar/SidebarContainer.js

@@ -5,6 +5,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withDashboard from 'containers/Dashboard/withDashboard';
 
 import { compose } from 'utils';
+import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
 
 function SidebarContainer({
   // #ownProps
@@ -15,6 +16,9 @@ function SidebarContainer({
 
   // #withDashboard
   sidebarExpended,
+
+  // #withSubscription
+  isSubscriptionActive,
 }) {
   const sidebarScrollerRef = React.useRef();
 
@@ -30,8 +34,8 @@ function SidebarContainer({
   }, [sidebarExpended]);
 
   const handleSidebarMouseLeave = () => {
-    if (!sidebarExpended && sidebarScrollerRef.current) {  
-      sidebarScrollerRef.current.scrollTo({ top: 0, left: 0, });
+    if (!sidebarExpended && sidebarScrollerRef.current) {
+      sidebarScrollerRef.current.scrollTo({ top: 0, left: 0 });
     }
   };
 
@@ -43,6 +47,7 @@ function SidebarContainer({
     <div
       className={classNames('sidebar', {
         'sidebar--mini-sidebar': !sidebarExpended,
+        'is-subscription-inactive': !isSubscriptionActive,
       })}
       id="sidebar"
       onMouseLeave={handleSidebarMouseLeave}
@@ -64,4 +69,8 @@ export default compose(
   withDashboard(({ sidebarExpended }) => ({
     sidebarExpended,
   })),
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
+    'main',
+  ),
 )(SidebarContainer);

client/src/components/Sidebar/SidebarMenu.js

@@ -8,6 +8,8 @@ import MenuItem from 'components/MenuItem';
 import { MenuItemLabel } from 'components';
 import classNames from 'classnames';
 import SidebarOverlay from 'components/SidebarOverlay';
+import { compose } from 'redux';
+import withSubscriptions from '../../containers/Subscriptions/withSubscriptions';
 
 const DEFAULT_ITEM = {
   text: '',
@@ -19,12 +21,10 @@ function matchPath(pathname, path, matchExact) {
 }
 
 function SidebarMenuItemSpace({ space }) {
-  return (
-    <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />
-  )
+  return <div class="bp3-menu-spacer" style={{ height: `${space}px` }} />;
 }
 
-export default function SidebarMenu() {
+function SidebarMenu({ isSubscriptionActive }) {
   const history = useHistory();
   const location = useLocation();
 
@@ -92,7 +92,11 @@ export default function SidebarMenu() {
       );
     });
   };
-  const items = menuItemsMapper(sidebarMenuList);
+
+  const filterItems = sidebarMenuList.filter(
+    (item) => isSubscriptionActive || item.enableBilling,
+  );
+  const items = menuItemsMapper(filterItems);
 
   const handleSidebarOverlayClose = () => {
     setIsOpen(false);
@@ -110,3 +114,10 @@ export default function SidebarMenu() {
     </div>
   );
 }
+
+export default compose(
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({ isSubscriptionActive }),
+    'main',
+  ),
+)(SidebarMenu);