From 52924383bd6017473690a3f687cb4375d7c6472a Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Mon, 18 Apr 2022 01:24:11 +0200
Subject: [PATCH] feat(Sidebar): filter sidebar items based on subscription
 state.

---
 src/config/sidebarMenu.js                     |  9 +++-
 src/containers/Dashboard/Sidebar/hooks.js     | 49 +++++++++++++++++--
 .../Dashboard/Sidebar/interfaces.ts           |  7 ++-
 3 files changed, 57 insertions(+), 8 deletions(-)

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: <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,
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',
 }