max employees

src/App.js

@@ -140,7 +140,11 @@ export function App() {
         >
           <UserProfileProvider>
             <UsersProvider>
-              <AppProvider>
+              <AppProvider
+                options={{
+                  paymentPlan: appUserData.user.payment_plan,
+                }}
+              >
                 <StoresProvider options={{ stores: appUserData.stores }}>
                   <DashboardLayout
                     userSession={userSession}

src/Contexts/AppContext.js

@@ -1,31 +1,22 @@
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { myFetch, myFetchContentType } from "../utils";
+import { createContext, useContext, useState } from "react";
 
 const preview = {
-  userId: "",
-  userPermissions: [],
-  users: [],
+  paymentPlan: "",
+  setPaymentPlan: () => {},
 };
 
 const AppContext = createContext(preview);
 
 export const useAppContext = () => useContext(AppContext);
 
-export function AppProvider({ children }) {
-  const userId = useRef(""); // used for some conditions in webSocket message handler
-
-  const [userPermissions, setUserPermissions] = useState([]);
-  // used for avatars and the tooltip for the avatar
-  const [users, setUsers] = useState([]); // { Id, Username, Avatar}
+export function AppProvider({ children, options }) {
+  const [paymentPlan, setPaymentPlan] = useState(options.paymentPlan);
 
   return (
     <AppContext.Provider
       value={{
-        userId,
-        userPermissions,
-        setUserPermissions,
-        users,
-        setUsers,
+        paymentPlan,
+        setPaymentPlan,
       }}
     >
       {children}

src/Pages/Store/Employees/index.js

@@ -17,6 +17,7 @@ import {
   myFetch,
   EncodeStringToBase64,
   showInputsInvalidNotification,
+  Constants,
 } from "../../../utils";
 import { useTranslation } from "react-i18next";
 import MyTable from "../../../Components/MyTable";
@@ -29,6 +30,7 @@ import {
 } from "../../../Components/MyFormInputs";
 import { Link, useParams } from "react-router-dom";
 import CountUp from "react-countup";
+import { useAppContext } from "../../../Contexts/AppContext";
 
 const { useBreakpoint } = Grid;
 
@@ -36,6 +38,7 @@ export default function StoreEmployees() {
   const { t } = useTranslation();
   const [notificationApi, notificationContextHolder] =
     notification.useNotification();
+  const appContext = useAppContext();
 
   const screenBreakpoint = useBreakpoint();
   const { storeId } = useParams();
@@ -178,6 +181,10 @@ export default function StoreEmployees() {
           modalOptions={addEditEmployeeModalOptions}
           setModalOptions={setAddEditEmployeeModalOptions}
           fetchEmployees={fetchEmployees}
+          disabled={
+            Constants.PAYMENT_PLAN[appContext.paymentPlan].maxEmployees <=
+            requestData.employees.length
+          }
         />
       </div>
 
@@ -197,6 +204,7 @@ function ModalAddEditEmployee({
   modalOptions,
   setModalOptions,
   fetchEmployees,
+  disabled,
 }) {
   const { t, i18n } = useTranslation();
   const [notificationApi, notificationContextHolder] =
@@ -257,6 +265,7 @@ function ModalAddEditEmployee({
         onClick={() =>
           setModalOptions({ ...modalOptions, mode: "add", isOpen: true })
         }
+        disabled={disabled}
       >
         {t("employees.addEmployee")}
       </Button>

src/utils.js

@@ -102,6 +102,16 @@ export const Constants = {
     PENDING_EMAIL_VERIFICATION: 4,
   },
   SUPPORT_EMAIL: process.env.REACT_APP_SUPPORT_EMAIL,
+  PAYMENT_PLAN: [
+    {
+      id: 0, // free
+      maxEmployees: 5,
+    },
+    {
+      id: 1, // basic
+      maxEmployees: 15,
+    },
+  ],
 };
 
 export function isEmailValid(email) {