feat(Sidebar): filter sidebar items based on subscription state.

src/config/sidebarMenu.js

@@ -4,6 +4,7 @@ import { Features } from '../common/features';
 import {
   ISidebarMenuItemType,
   ISidebarMenuOverlayIds,
+  ISidebarSubscriptionAbility,
 } from '../containers/Dashboard/Sidebar/interfaces';
 import {
   ReportsAction,
@@ -75,7 +76,7 @@ export const SidebarMenu = [
                 text: <T id={'sidebar_warehouse_transfer'} />,
                 href: '/warehouses-transfers',
                 type: ISidebarMenuItemType.Link,
-                feature: Features.Warehouses
+                feature: Features.Warehouses,
               },
               {
                 text: <T id={'category_list'} />,
@@ -107,7 +108,7 @@ export const SidebarMenu = [
                 ),
                 href: '/warehouses-transfers/new',
                 type: ISidebarMenuItemType.Link,
-                feature: Features.Warehouses
+                feature: Features.Warehouses,
               },
               {
                 text: <T id={'New service'} />,
@@ -726,6 +727,10 @@ export const SidebarMenu = [
         text: <T id={'billing'} />,
         href: '/billing',
         type: ISidebarMenuItemType.Link,
+        subscription: [
+          ISidebarSubscriptionAbility.Expired,
+          ISidebarSubscriptionAbility.Active,
+        ],
         permission: {
           subject: AbilitySubject.SubscriptionBilling,
           ability: SubscriptionBillingAbility.View,

src/containers/Dashboard/Sidebar/hooks.js

@@ -1,4 +1,4 @@
-import _, { isEmpty } from 'lodash';
+import _, { isEmpty, includes } from 'lodash';
 import React from 'react';
 import * as R from 'ramda';
 import { useHistory } from 'react-router-dom';
@@ -6,8 +6,15 @@ import { useHistory } from 'react-router-dom';
 import { useAbilityContext } from 'hooks';
 import { useSidebarSubmenu, useFeatureCan } from 'hooks/state';
 import { SidebarMenu } from 'config/sidebarMenu';
-import { ISidebarMenuItemType } from './interfaces';
-import { useSidebarSubmnuActions, useDialogActions } from 'hooks/state';
+import {
+  ISidebarMenuItemType,
+  ISidebarSubscriptionAbility,
+} from './interfaces';
+import {
+  useSidebarSubmnuActions,
+  useDialogActions,
+  useSubscription,
+} from 'hooks/state';
 import { filterValuesDeep, deepdash } from 'utils';
 
 const deepDashConfig = {
@@ -75,6 +82,36 @@ function useFilterSidebarItemAbilityPredicater() {
   };
 }
 
+/**
+ * Filters the sidebar item based on the subscription state.
+ */
+function useFilterSidebarItemSubscriptionPredicater() {
+  const { isSubscriptionActive, isSubscriptionInactive } = useSubscription();
+
+  return {
+    predicate: (item) => {
+      const { subscription } = item;
+
+      if (subscription) {
+        const isActive = includes(subscription, [
+          ISidebarSubscriptionAbility.Active,
+        ])
+          ? isSubscriptionActive
+          : true;
+
+        const isInactive = includes(subscription, [
+          ISidebarSubscriptionAbility.Inactive,
+        ])
+          ? isSubscriptionInactive
+          : true;
+
+        return isActive && isInactive;
+      }
+      return true;
+    },
+  };
+}
+
 /**
  * Filters sidebar menu items based on ability of the item permission.
  * @param   {*} menu
@@ -83,11 +120,13 @@ function useFilterSidebarItemAbilityPredicater() {
 function useFilterSidebarMenuAbility(menu) {
   const { predicate: predFeature } = useFilterSidebarItemFeaturePredicater();
   const { predicate: predAbility } = useFilterSidebarItemAbilityPredicater();
+  const { predicate: predSubscription } =
+    useFilterSidebarItemSubscriptionPredicater();
 
   return deepdash.filterDeep(
     menu,
     (item) => {
-      return predFeature(item) && predAbility(item);
+      return predFeature(item) && predAbility(item) && predSubscription(item);
     },
     deepDashConfig,
   );
@@ -128,7 +167,7 @@ function useBindSidebarItemLinkClick() {
 }
 
 /**
- * Bind sidebar dialog item click action. 
+ * Bind sidebar dialog item click action.
  * @param   {ISidebarMenuItem} item
  */
 function useBindSidebarItemDialogClick() {

src/containers/Dashboard/Sidebar/interfaces.ts

@@ -68,5 +68,10 @@ export enum ISidebarMenuOverlayIds {
   Financial = 'Financial',
   Contacts = 'Contacts',
   Cashflow = 'Cashflow',
-  Expenses = 'Expenses'
+  Expenses = 'Expenses',
+}
+
+export enum ISidebarSubscriptionAbility {
+  Expired = 'SubscriptionExpired',
+  Active = 'SubscriptionActive',
 }