l-min-components 1.0.701 → 1.0.708

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.701",
+  "version": "1.0.708",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AppMainLayout/index.jsx

@@ -26,6 +26,7 @@ import InstructorRightBar from "../fileRightBar/instructorRightBar";
 import EnterpriseRightBar from "../fileRightBar/enterpriseRightBar";
 import PersonalRightBar from "../fileRightBar/personalRightBar";
 import useHeader from "../header/getHeaderDetails";
+import GracePeriod from "../deactivated";
 
 const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -48,11 +49,18 @@ const AppMainLayout = () => {
   const [accessToken, setAccessToken] = useState("");
   const [envType, setEnvType] = useState("");
   const [newNotifications, setNewNotifications] = useState([]);
+  const [deactivated, setDeactivated] = useState(true); // testing, until we get account setup
+  const [gracePeriod, setGracePeriod] = useState(true); // test
+
   const {
     setDefaultAccount,
     handleSetDefaultAccount,
     notificationMarkReadData,
     handleGetNotificationMarkRead,
+    userPlanData,
+    handleGetUserPlan,
+    getCurrentSubscriptionData,
+    handleCurrentSubscription,
   } = useHeader();
 
   useEffect(() => {
@@ -128,6 +136,13 @@ const AppMainLayout = () => {
   }, []);
   console.log("envType", envType);
 
+  useEffect(() => {
+    handleGetUserPlan();
+  }, []);
+
+  const currentPlan = userPlanData?.data?.current_plan;
+  const planState = userPlanData?.data?.state;
+
   return (
     <OutletContext.Provider
       value={{
@@ -179,6 +194,7 @@ const AppMainLayout = () => {
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
                     setRightComponent={setRightComponent}
+                    planState={planState}
                   />
                 )}
               </>
@@ -206,7 +222,15 @@ const AppMainLayout = () => {
                 />
               )}
 
-            <Outlet />
+            {window.location.pathname.includes("enterprise") && planState === "GRACE PERIOD" ? (
+              <GracePeriod
+                getCurrentSubscriptionData={getCurrentSubscriptionData}
+                handleCurrentSubscription={handleCurrentSubscription}
+                gracePeriod={gracePeriod}
+              />
+            ) : (
+              <Outlet />
+            )}
           </CenterLayout>
 
           {rightLayout && !coming && (
@@ -214,7 +238,7 @@ const AppMainLayout = () => {
               {rightComponent ??
                 (window.location.pathname.includes("enterprise") &&
                 !window.location.pathname.includes("file-manager") ? (
-                  <EnterpriseRightBar />
+                  <EnterpriseRightBar gracePeriod={gracePeriod} setGracePeriod={setGracePeriod} planState={planState} />
                 ) : window.location.pathname.includes("personal/dashboard") ? (
                   <PersonalRightBar />
                 ) : window.location.pathname.includes("personal/addons") ? (

package/src/components/deactivated/index.jsx

@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import styled from "styled-components";
+import SubscriptionExpiredModal from "./modal/subscription-expired-modal";
+import Button from "../button";
+
+const routes = [
+  { path: "dashboard", title: "Dashboard" },
+  { path: "reports", title: "Reports" },
+  { path: "courses", title: "Courses" },
+  { path: "manage-teams", title: "Manage Teams" },
+  { path: "msg/messages", title: "Messages" },
+  { path: "announcements", title: "Announcements" },
+  { path: "file-manager", title: "File Manager" },
+];
+
+const GracePeriod = ({
+  getCurrentSubscriptionData,
+  handleCurrentSubscription,
+  gracePeriod,
+}) => {
+  const location = useLocation();
+  const [subscriptionExpiredModalIsOpen, setSubscriptionExpiredModalIsOpen] =
+    useState(false);
+
+  const getTitleFromPath = (path) => {
+    const route = routes.find((route) => path.includes(route.path));
+    return route?.title || "Dashboard";
+  };
+
+  const pageTitle = getTitleFromPath(location.pathname);
+
+  return (
+    <GracePeriodWrapper>
+      <h1>{pageTitle}</h1>
+      {!gracePeriod &&
+      <Expire>
+        <h4>Hey Enterprise, You do not have any active plan</h4>
+
+        <div
+          onClick={() => {
+            window.location.href =
+              "https://559staging.learngual.com/settings/payment/";
+          }}
+        >
+          <Button
+            text="Choose a Plan"
+            styles={{
+              height: "35px",
+              padding: "4px 20px",
+              fontSize: "14px",
+            }}
+          />
+        </div>
+      </Expire>
+      }
+      <div className="gracePeriod_account">
+        <div className="content">
+          <p>Sorry, you can’t access your account</p>
+        </div>
+      </div>
+
+      <SubscriptionExpiredModal
+        subscriptionExpiredModalIsOpen={subscriptionExpiredModalIsOpen}
+        setSubscriptionExpiredModalIsOpen={setSubscriptionExpiredModalIsOpen}
+        getCurrentSubscriptionData={getCurrentSubscriptionData}
+      />
+    </GracePeriodWrapper>
+  );
+};
+
+const GracePeriodWrapper = styled.div`
+  h1 {
+    margin-top: 0px;
+    margin-bottom: 20px;
+    color: #313333;
+    font-size: 24px;
+  }
+
+  .gracePeriod_account {
+    border-radius: 30.67px;
+    background: var(--white, #fff);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 670px;
+    flex-shrink: 0;
+
+    .content {
+      border-radius: 15px;
+      background: var(--Neutral-10, #f5f7f7);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      display: inline-flex;
+      padding: 30px 18px;
+      flex-direction: column;
+      align-items: center;
+      gap: 30px;
+
+      p {
+        color: var(--Neutral-90, #313333);
+        text-align: center;
+        font-feature-settings: "salt" on, "liga" off;
+        font-family: Nunito;
+        font-size: 25px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 120%; /* 30px */
+        width: 306px;
+      }
+    }
+  }
+`;
+
+const Expire = styled.div`
+  border-radius: 25px;
+  background: rgba(48, 212, 104, 0.15);
+  display: flex;
+  padding: 15px 26px; 
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 20px;
+
+  h4 {
+    color: var(--warning, #f39b33);
+    font-family: Nunito;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 125% */
+  }
+`;
+
+export default GracePeriod;

package/src/components/deactivated/modal/img/book.jsx

@@ -0,0 +1,77 @@
+export const BookIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "25"}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 16.9213V4.85134C22 3.65134 21.02 2.76134 19.83 2.86134H19.77C17.67 3.04134 14.48 4.11134 12.7 5.23134L12.53 5.34134C12.24 5.52134 11.76 5.52134 11.47 5.34134L11.22 5.19134C9.44 4.08134 6.26 3.02134 4.16 2.85134C2.97 2.75134 2 3.65134 2 4.84134V16.9213C2 17.8813 2.78 18.7813 3.74 18.9013L4.03 18.9413C6.2 19.2313 9.55 20.3313 11.47 21.3813L11.51 21.4013C11.78 21.5513 12.21 21.5513 12.47 21.4013C14.39 20.3413 17.75 19.2313 19.93 18.9413L20.26 18.9013C21.22 18.7813 22 17.8813 22 16.9213Z"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 5.66797V20.668"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.75 8.66797H5.5"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.5 11.668H5.5"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const ErrorBookIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "26"}
+    height={height || "26"}
+    viewBox="0 0 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23.2422 17.6216V5.02823C23.2422 3.7762 22.2197 2.84761 20.9781 2.95195H20.9155C18.7245 3.13975 15.3961 4.25615 13.539 5.42471L13.3616 5.53948C13.059 5.72729 12.5582 5.72729 12.2556 5.53948L11.9948 5.38298C10.1376 4.22485 6.81972 3.11889 4.62866 2.94151C3.38706 2.83718 2.375 3.7762 2.375 5.0178V17.6216C2.375 18.6232 3.18882 19.5622 4.19045 19.6874L4.49302 19.7292C6.75711 20.0318 10.2524 21.1795 12.2556 22.275L12.2974 22.2958C12.5791 22.4524 13.0277 22.4524 13.299 22.2958C15.3022 21.1899 18.8079 20.0318 21.0825 19.7292L21.4268 19.6874C22.4284 19.5622 23.2422 18.6232 23.2422 17.6216Z"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.8125 5.88281V21.5332"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.371 9.01562H6.02344"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.15352 12.1445H6.02344"
+      stroke="#F95454"
+      stroke-width="1.25203"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/deactivated/modal/index.styled.js

@@ -0,0 +1,222 @@
+import styled from "styled-components";
+
+export const ModalCardContainer = styled.div`
+  /* padding: 25px; */
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 720px;
+  margin-left: 40px;
+`;
+
+export const CloseModalButton = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  font-family: "Nunito";
+  border-radius: 50%;
+  margin-bottom: 8px;
+  margin-left: auto;
+`;
+
+export const CardContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 25px;
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 700px;
+  border-radius: 30px;
+`;
+
+export const CardHeader = styled.div`
+  width: 100%;
+  text-align: center;
+
+  .cancel-title {
+    font-size: 22px;
+    color: #313333;
+    font-weight: 700px;
+    margin-bottom: 30px;
+  }
+
+  .title-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20px;
+    border-radius: 12px;
+    margin: 0 auto;
+  }
+`;
+
+export const CardBody = styled.div`
+  width: 100%;
+  /* display: flex; */
+  margin: 20px auto 10px;
+  text-align: center;
+
+  .mdl-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: #313333;
+    margin-bottom: 12px;
+  }
+
+  .mdld-title {
+    width: 370px;
+    font-size: 18px;
+    font-weight: 700;
+    color: #313333;
+    margin: 0 auto 12px;
+  }
+
+  .btn__footer {
+    display: flex;
+    margin-top: 30px;
+    justify-content: center;
+
+    button {
+      width: 171px;
+      margin: 0 20px;
+    }
+  }
+`;
+
+export const ExpiryCardContainer = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 700px;
+  border-radius: 30px;
+
+  .expiry_modal_container {
+    display: flex;
+    /* height: 100%; */
+
+
+    .logo_section {
+      background-color: rgba(249, 84, 84, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 25px;
+      width: 40%;
+      padding: 0 25px;
+    }
+
+    .expiry_details {
+      padding: 25px;
+      width: 60%;
+
+      .error-txt {
+        color: #f95454;
+        font-weight: 800;
+      }
+      .enterprise_info {
+        border-radius: 12px;
+        padding: 10px 2px;
+        background-color: #f5f7f7;
+        width: 66px;
+        margin-bottom: 27px;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        p {
+          color: #f95454;
+          font-size: 12px;
+          font-weight: 800;
+          letter-spacing: 0.28px;
+          text-align: center;
+        }
+      }
+
+      h6 {
+        color: #f95454;
+        font-size: 20px;
+        font-weight: 700;
+        letter-spacing: 0.4px;
+        margin-bottom: 15px;
+        text-align: left;
+      }
+
+      p {
+        color: #313333;
+        font-size: 16px;
+        font-weight: 700;
+        letter-spacing: 0.32px;
+        text-align: left;
+      }
+    }
+
+    .btn__footer {
+      display: flex;
+      margin-top: 40px;
+      justify-content: space-between;
+    }
+  }
+`;
+
+export const NotificationCellCardContainer = styled.div`
+  padding: 10px 20px 20px;
+  background-color: rgba(255, 255, 255, 1);
+  font-family: "Nunito";
+  border-radius: 15px;
+
+  .notification_cell_container {
+    display: flex;
+
+    .logo_section {
+      display: flex;
+      align-items: self-start;
+      justify-content: center;
+      width: 75px;
+
+      p {
+        border-radius: 8px;
+        background: rgba(254, 191, 16, 0.1);
+        padding: 8px;
+      }
+    }
+
+    .nc_details {
+      padding-left: 15px;
+      .error-txt {
+        color: #f95454;
+        font-weight: 800;
+        font-style: italic;
+      }
+
+      h6 {
+        color: #f39b33;
+        font-size: 16px;
+        font-weight: 700;
+        margin-bottom: 8px;
+        text-align: left;
+      }
+
+      p {
+        color: #636666;
+        font-size: 14px;
+        font-weight: 700;
+        text-align: left;
+      }
+    }
+
+    .btn__footer {
+      display: flex;
+      margin-top: 20px;
+      justify-content: space-between;
+    }
+  }
+`;
+
+export const NotificationCellModalContainer = styled.div`
+  /* padding: 25px; */
+  font-family: "Nunito";
+  width: 100%;
+  max-width: 800px;
+`;