l-min-components 1.0.701 → 1.0.708

package/src/components/header/getHeaderDetails.js

@@ -154,6 +154,46 @@ const handleGetNotificationMarkRead = async () => {
     }
   };
 
+    // current plan
+    const [{ ...userPlanData }, getUserPlan] = useAxios(
+      {
+        url: `/payment/v1/current_plan/`,
+        method: "GET",
+      },
+  
+      {
+        manual: true,
+      }
+    );
+  
+    const handleGetUserPlan = async () => {
+      try {
+        await getUserPlan();
+      } catch (err) {
+        console.log(err);
+      }
+    };
+
+      //GET current subscription
+  const [{ ...getCurrentSubscriptionData }, getCurrentSubscription] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleCurrentSubscription = async () => {
+    try {
+      await getCurrentSubscription({
+        url: `/payment/v1/current_subscription/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return {
     handleGetUserDetails,
     userDetails,
@@ -170,7 +210,12 @@ const handleGetNotificationMarkRead = async () => {
     notificationMarkReadData,
     handleGetNotificationMarkRead,
     notificationData,
-    handleGetNotification
+    handleGetNotification,
+
+    userPlanData,
+    handleGetUserPlan,
+    getCurrentSubscriptionData, 
+    handleCurrentSubscription
   };
 };
 export default useHeader;

package/src/components/sideBar/sideMenu/index.jsx

@@ -26,9 +26,11 @@ const SideMenu = ({
   setIsOpen,
   affiliatesActive,
   setRightComponent,
+  planState
 }) => {
   console.log("user type", userType);
   // const [isOpen, setIsOpen] = useState(false);
+    const [gracePeriod, setGracePeriod] = useState(true)
 
   const { setGeneralData, generalData } = useContext(OutletContext);
   const onToggle = () => {
@@ -258,6 +260,7 @@ const SideMenu = ({
     };
     const active = handlePathCheck();
 
+
     return (
       <NavigationItemContainer
         onClick={() => {
@@ -289,7 +292,7 @@ const SideMenu = ({
         }}
         // to={route.path}
         key={index}
-        className={cx(`${route.text} ${active ? "active" : ""}`)}
+        className={cx(`${route.text} ${active && planState !== "GRACE PERIOD"  ? "active" : active && planState === "GRACE PERIOD" ? "grace_period_active" : "grace_period"}`)}
         minimal={isOpen}
       >
         <IconContainer active={active}>
@@ -308,7 +311,7 @@ const SideMenu = ({
   };
 
   return (
-    <SideMenuContainer isOpen={isOpen}>
+    <SideMenuContainer isOpen={isOpen} className={planState === "GRACE PERIOD" ? "grace_period disabled" : ""}>
       <UserCard user={user} isOpen={isOpen} />
 
       <NavigationContainer>

package/src/components/sideBar/sideMenu/styles/index.jsx

@@ -18,6 +18,11 @@ export const SideMenuContainer = styled.div`
   border-radius: 30px;
   margin-left: 77px;
 
+  &.disabled {
+    pointer-events: none;
+    
+  }
+
   .toggle {
     width: 20px;
     height: 20px;
@@ -31,6 +36,13 @@ export const SideMenuContainer = styled.div`
     right: -13px;
     color: #fdcf04;
   }
+
+  /* GRACE PERIOD AND DEACTIVATE  */
+  &.grace_period {
+    border-radius: 30px;
+    background: var(--Neutral-30, #c6cccc);
+    /* color: #fff; */
+  }
 `;
 
 export const NavigationContainer = styled.div`
@@ -49,7 +61,9 @@ export const NavigationItemContainer = styled.p`
   position: relative;
   padding: ${({ minimal }) => (minimal ? "12px 16px" : "12px 12px")};
   color: ${({ active }) =>
-    active ? "rgb(255, 255, 255) !important" : "rgba(255, 255, 255, 0.625) !important"};
+    active
+      ? "rgb(255, 255, 255) !important"
+      : "rgba(255, 255, 255, 0.625) !important"};
   &:hover {
     color: #ffffff !important;
     background-color: #31cdcd;
@@ -75,6 +89,30 @@ export const NavigationItemContainer = styled.p`
       background: #febf10;
     }
   }
+
+
+/* GRACE PERIOD AND DEACTIVATED */
+  &.grace_period{
+    background: var(--Neutral-40, #ADB2B2);
+    margin: 2px 0px;
+  }
+
+  &.grace_period_active {
+    background: var(--Neutral-50, #949999);
+    color: #ffffff;
+    margin: 2px 0px;
+    &::before {
+      content: "";
+      height: 110%;
+      width: 5px;
+      border-radius: 0 10px 10px 0;
+      position: absolute;
+      top: -5%;
+      left: 0;
+      display: block;
+      background: #949999;
+    }
+  }
 `;
 
 export const IconContainer = styled.div`