diff --git a/src/config/sidebarMenu.js b/src/config/sidebarMenu.js
index 605504b3e..b11315670 100644
--- a/src/config/sidebarMenu.js
+++ b/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: ,
href: '/warehouses-transfers',
type: ISidebarMenuItemType.Link,
- feature: Features.Warehouses
+ feature: Features.Warehouses,
},
{
text: ,
@@ -107,7 +108,7 @@ export const SidebarMenu = [
),
href: '/warehouses-transfers/new',
type: ISidebarMenuItemType.Link,
- feature: Features.Warehouses
+ feature: Features.Warehouses,
},
{
text: ,
@@ -726,6 +727,10 @@ export const SidebarMenu = [
text: ,
href: '/billing',
type: ISidebarMenuItemType.Link,
+ subscription: [
+ ISidebarSubscriptionAbility.Expired,
+ ISidebarSubscriptionAbility.Active,
+ ],
permission: {
subject: AbilitySubject.SubscriptionBilling,
ability: SubscriptionBillingAbility.View,
diff --git a/src/containers/Dashboard/Sidebar/hooks.js b/src/containers/Dashboard/Sidebar/hooks.js
index a5e56839e..83ea34d0c 100644
--- a/src/containers/Dashboard/Sidebar/hooks.js
+++ b/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() {
diff --git a/src/containers/Dashboard/Sidebar/interfaces.ts b/src/containers/Dashboard/Sidebar/interfaces.ts
index 38f4663a1..b3f7eaa3a 100644
--- a/src/containers/Dashboard/Sidebar/interfaces.ts
+++ b/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',
}