l-min-components 1.7.1366 → 1.7.1368

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -43,6 +43,8 @@ import AffiliateRightBar from "../fileRightBar/instructorRightBar2/affiliateRigh
 import instructorImage from "../../assets/images/instructor.png";
 import PersonalRightBar from "../fileRightBar/instructorRightBar2/personalRightBar";
 import TestModal from "../fileRightBar/instructorRightBar2/testModal";
+import BlankState from "../dashboardState/blankState";
+import PendingDeleteState from "../dashboardState/pendingDeleteState";
 
 const AppMainLayout = ({ children }) => {
   const [isOpen, setIsOpen] = useState(true);
@@ -333,6 +335,8 @@ const AppMainLayout = ({ children }) => {
     handleGetStorageSummary();
   }, [generalData?.selectedAccount]);
 
+  const accountIsPendingDeletion = generalData?.selectedAccount?.pending_delete;
+
   return (
     <OutletContext.Provider
       value={{
@@ -430,41 +434,56 @@ const AppMainLayout = ({ children }) => {
                       setIsAffiliateLoading={setIsAffiliateLoading}
                     />
                   )}
-
-                  {window.location.pathname.includes("enterprise") &&
-                  (planState === "GRACE PERIOD" ||
-                    planState === "EXPIRED" ||
-                    (!userPlanData?.loading && !planState)) &&
-                  !window.location.pathname.includes("file-m") ? (
-                    <GracePeriod
-                      getCurrentSubscriptionData={getCurrentSubscriptionData}
-                      handleCurrentSubscription={handleCurrentSubscription}
-                      gracePeriod={gracePeriod}
-                      stateType={planState === "GRACE PERIOD" ? 1 : 2}
+                  {!generalData?.selectedAccount ? (
+                    <BlankState />
+                  ) : accountIsPendingDeletion &&
+                    !window.location.pathname.includes("settings") ? (
+                    <PendingDeleteState
+                      deleteDate={
+                        generalData?.selectedAccount?.pending_delete_datetime
+                      }
                     />
-                  ) : window.location.pathname.includes("instructor") &&
-                    !planState &&
-                    !userPlanData?.loading &&
-                    !isAffiliateLoading &&
-                    !affiliateAccount?.id &&
-                    !window.location.pathname.includes("notif") ? (
-                    <div className="instructor_expired">
-                      <h1>Dashboard</h1>
-                      <div className="instructor_expired_body">
-                        <div className="instructor_expired_center">
-                          <img src={instructorImage} alt="" />
-                          <h4>
-                            You haven’t been added to an enterprise account yet
-                          </h4>
-                          <p>
-                            This account will be active once an enterprise
-                            assigns you as an instructor.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
                   ) : (
-                    children ?? <Outlet />
+                    <>
+                      {window.location.pathname.includes("enterprise") &&
+                      (planState === "GRACE PERIOD" ||
+                        planState === "EXPIRED" ||
+                        (!userPlanData?.loading && !planState)) &&
+                      !window.location.pathname.includes("file-m") ? (
+                        <GracePeriod
+                          getCurrentSubscriptionData={
+                            getCurrentSubscriptionData
+                          }
+                          handleCurrentSubscription={handleCurrentSubscription}
+                          gracePeriod={gracePeriod}
+                          stateType={planState === "GRACE PERIOD" ? 1 : 2}
+                        />
+                      ) : window.location.pathname.includes("instructor") &&
+                        !planState &&
+                        !userPlanData?.loading &&
+                        !isAffiliateLoading &&
+                        !affiliateAccount?.id &&
+                        !window.location.pathname.includes("notif") ? (
+                        <div className="instructor_expired">
+                          <h1>Dashboard</h1>
+                          <div className="instructor_expired_body">
+                            <div className="instructor_expired_center">
+                              <img src={instructorImage} alt="" />
+                              <h4>
+                                You haven’t been added to an enterprise account
+                                yet
+                              </h4>
+                              <p>
+                                This account will be active once an enterprise
+                                assigns you as an instructor.
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        children ?? <Outlet />
+                      )}
+                    </>
                   )}
                 </CenterLayout>
                 {showTest && (
@@ -482,6 +501,7 @@ const AppMainLayout = ({ children }) => {
                         <EnterpriseRightBar
                           planState={planState}
                           affiliateAccount={affiliateAccount}
+                          isPendingDelete={accountIsPendingDeletion}
                         />
                       ) : activeAccountType === "instructor" ? (
                         // <>
@@ -499,6 +519,7 @@ const AppMainLayout = ({ children }) => {
                           <AffiliateRightBar
                             planState={planState}
                             affiliateAccount={affiliateAccount.id}
+                            isPendingDelete={accountIsPendingDeletion}
                           />
                         )
                       ) : activeAccountType === "personal" ? (

package/src/components/AppMainLayout/index.styled.js

@@ -89,7 +89,9 @@ export const CenterLayout = styled.div`
         align-items: center;
         justify-content: center;
         text-align: center;
-        img{margin-bottom: 30px;}
+        img {
+          margin-bottom: 30px;
+        }
         h2 {
           font-weight: 700;
           font-size: 22px;
@@ -102,6 +104,7 @@ export const CenterLayout = styled.div`
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
+        }
       }
     }
   }

package/src/components/dashboardState/blankState.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+const BlankState = () => {
+  return <Container />;
+};
+
+export default BlankState;
+
+const Container = styled.div`
+  background-color: white;
+  height: 600px;
+  width: 100%;
+  border-radius: 30px;
+`;

package/src/components/dashboardState/pendingDeleteState.jsx

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import warning from "./images/warning-db.png";
+import ButtonComponent from "../button";
+import moment from "moment";
+import redirectURL from "../../utils/redirectURL";
+
+const PendingDeleteState = ({ deleteDate }) => {
+  const handleNav = () => {
+    window.location.href = redirectURL("/settings/account");
+  };
+  return (
+    <Container>
+      <Wrapper>
+        <img src={warning} alt="" />
+        <h2>This account is scheduled for deletion</h2>
+        <p>
+          Your account is currently pending deletion and will be permanently
+          removed on {moment(deleteDate).format("MMM DD, YYYY")}.
+        </p>
+        <ButtonComponent text="Cancel deletion" onClick={handleNav} />
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default PendingDeleteState;
+
+const Container = styled.div`
+  background-color: white;
+  height: 600px;
+  width: 100%;
+  border-radius: 30px;
+  display: grid;
+  place-items: center;
+`;
+
+const Wrapper = styled.div`
+  width: 390px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  h2 {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 10px;
+    margin-top: 30px;
+  }
+  p {
+    font-size: 16px;
+    margin-bottom: 50px;
+  }
+  button {
+    box-shadow: 0px 7.728px 15.457px 0px rgba(254, 191, 16, 0.25);
+    width: 320px;
+  }
+`;

package/src/components/fileRightBar/enterpriseRightBar/index.jsx

@@ -10,8 +10,9 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 import { Carousel as ReactCarousl } from "react-responsive-carousel";
 import BoxIcon from "./boxIcon";
 import redirectURL from "../../../utils/redirectURL";
+import classNames from "classnames";
 
-const EnterpriseRightBar = ({ planState }) => {
+const EnterpriseRightBar = ({ planState, isPendingDelete }) => {
   const {
     handleGetCoursesData,
     coursesData,
@@ -40,7 +41,10 @@ const EnterpriseRightBar = ({ planState }) => {
 
   return (
     <EnterpriseContainer
-      className={planState === "GRACE PERIOD" ? "grace_period" : ""}
+      className={classNames({
+        grace_period: planState === "GRACE PERIOD",
+        pending_delete: isPendingDelete,
+      })}
     >
       <Banner>
         <h3>Courses ending soon</h3>
@@ -81,13 +85,17 @@ const EnterpriseRightBar = ({ planState }) => {
         <Button
           type="primary"
           text="Create Course"
-          disabled={planState === "GRACE PERIOD"}
+          disabled={planState === "GRACE PERIOD" || isPendingDelete}
           styles={{
             fontSize: "16px",
             gap: "8px",
             padding: "20px 6px",
             height: "40px",
-            boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
+            boxShadow: isPendingDelete
+              ? undefined
+              : "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
+
+            opacity: isPendingDelete ? 0.6 : undefined,
           }}
           onClick={() => {
             window.location.href = redirectURL(
@@ -100,6 +108,7 @@ const EnterpriseRightBar = ({ planState }) => {
         UpgradeClick={() => {
           window.location.href = redirectURL("/settings/payment");
         }}
+        isPendingDelete={isPendingDelete}
         planState={planState}
         siotCount={slotData?.total}
         remainingSlot={slotData?.remaining}
@@ -186,6 +195,12 @@ const EnterpriseContainer = styled.div`
       }
     }
   }
+
+  /// pending deletion
+  &.pending_delete {
+    background-color: #dfe5e5;
+  }
+
   height: 600px;
   width: 231px;
   padding: 20px 12px;

package/src/components/fileRightBar/enterpriseRightBar/upgrade.jsx

@@ -5,6 +5,7 @@ import Button from "../../button";
 import EnterpriseUpgrade from "../assets/yellow-lock.png";
 import Staricon from "../assets/star";
 import styled from "styled-components";
+import classNames from "classnames";
 
 const UpgradeComponent = ({
   UpgradeClick,
@@ -12,13 +13,15 @@ const UpgradeComponent = ({
   siotCount = 0,
   remainingSlot = 0,
   data,
+  isPendingDelete,
 }) => {
   const lowSlot = data && remainingSlot < 1;
   return (
     <Upgrade
-      className={`${
-        planState === "GRACE PERIOD" ? "deactivated" : ""
-      } more-slot `}
+      className={classNames("more-slot", {
+        deactivated: planState === "GRACE PERIOD",
+        "pending-delete_upgrade": isPendingDelete,
+      })}
     >
       <div className={`container ${lowSlot ? "red" : ""}`}>
         <img src={EnterpriseUpgrade} alt="upgrad box" />
@@ -53,7 +56,7 @@ const UpgradeComponent = ({
         <Button
           type="primary"
           text="Buy Slot"
-          disabled={planState === "GRACE PERIOD"}
+          disabled={planState === "GRACE PERIOD" || isPendingDelete}
           styles={{
             marginTop: "12px",
             fontSize: "16px",
@@ -61,7 +64,9 @@ const UpgradeComponent = ({
             height: "38.641px",
             gap: "8px",
             padding: "15.457px 30.913px",
-            boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
+            boxShadow: isPendingDelete
+              ? undefined
+              : "0px 10px 20px 0px rgba(254, 191, 16, 0.25)",
           }}
           onClick={UpgradeClick}
         />

package/src/components/fileRightBar/instructorRightBar2/affiliateRightBar.jsx

@@ -11,8 +11,13 @@ import { Carousel as ReactCarousl } from "react-responsive-carousel";
 import BoxIcon from "./boxIcon";
 import InstructorMessage from "./messageSection";
 import redirectURL from "../../../utils/redirectURL";
+import classNames from "classnames";
 
-const AffiliateRightBar = ({ planState, affiliateAccount }) => {
+const AffiliateRightBar = ({
+  planState,
+  affiliateAccount,
+  isPendingDelete,
+}) => {
   const { handleGetCoursesAffilateData, coursesAffilateData } = api();
 
   useEffect(() => {
@@ -40,7 +45,10 @@ const AffiliateRightBar = ({ planState, affiliateAccount }) => {
 
   return (
     <EnterpriseContainer
-      className={planState === "GRACE PERIOD" ? "grace_period" : ""}
+      className={classNames({
+        grace_period: planState === "GRACE PERIOD",
+        pending_delete: isPendingDelete,
+      })}
     >
       <Banner>
         <h3>Courses ending soon</h3>
@@ -79,6 +87,7 @@ const AffiliateRightBar = ({ planState, affiliateAccount }) => {
 
       <InstructorMessage
         disabled={planState === "GRACE PERIOD"}
+        isPendingDelete={isPendingDelete}
         messsage="Create an instructor account to onboard and manage your students with our AI powered platform."
         btnText="Create account"
         onClick={() => {
@@ -167,6 +176,12 @@ const EnterpriseContainer = styled.div`
       }
     }
   }
+
+  /// pending deletion
+  &.pending_delete {
+    background-color: #dfe5e5;
+  }
+
   height: 580px;
   width: 231px;
   padding: 20px 12px;

package/src/components/fileRightBar/instructorRightBar2/messageSection.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import img from "../../../assets/images/happy-celebrate.png";
 import styled from "styled-components";
 import ButtonComponent from "../../button";
+import classNames from "classnames";
 
 const InstructorMessage = ({
   messsage,
@@ -11,9 +12,14 @@ const InstructorMessage = ({
   onClick,
   hideBtn,
   title,
+  isPendingDelete,
 }) => {
   return (
-    <Container>
+    <Container
+      className={classNames({
+        "pending-delete_upgrade": isPendingDelete,
+      })}
+    >
       <ImageSection>
         <img src={img} alt="" />
       </ImageSection>
@@ -27,7 +33,7 @@ const InstructorMessage = ({
         {!hideBtn && (
           <div>
             <ButtonComponent
-              disabled={disabled}
+              disabled={disabled || isPendingDelete}
               type="primary"
               text={btnText}
               onClick={onClick}
@@ -38,7 +44,9 @@ const InstructorMessage = ({
                 gap: "8px",
                 padding: "15.457px 30.913px",
                 height: "38.641px",
-                boxShadow: "0px 7.728px 15.457px 0px rgba(254, 191, 16, 0.25)",
+                boxShadow: isPendingDelete
+                  ? undefined
+                  : "0px 7.728px 15.457px 0px rgba(254, 191, 16, 0.25)",
               }}
             />
           </div>
@@ -60,6 +68,9 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 22px;
+  &.pending-delete_upgrade {
+    opacity: 0.5;
+  }
 `;
 
 const ImageSection = styled.div`
@@ -93,7 +104,6 @@ const Bottom = styled.div`
   button {
     &:disabled {
       background: #949999;
-      box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
     }
   }
 `;

package/src/components/fileRightBar/styles/index.jsx

@@ -210,6 +210,9 @@ export const Upgrade = styled.div`
     align-items: flex-end;
   }
 
+  &.pending-delete_upgrade {
+    opacity: 0.5;
+  }
   .container {
     /* background-color: #fff; */
     border-radius: 23.185px;

package/src/components/header/account-dropdown.jsx

@@ -69,8 +69,10 @@ const AccountDropdown = (props) => {
               {findAccountNames(props?.selectedAccount)}
             </h1>
             <h2 style={{ textTransform: "capitalize" }}>
-              {props?.selectedAccount?.type?.toLowerCase() ||
-                props.activeAccountType}{" "}
+              {props?.selectedAccount?.type?.toLowerCase() === "personal"
+                ? "Student"
+                : props?.selectedAccount?.type?.toLowerCase() ||
+                  props.activeAccountType}{" "}
             </h2>
           </div>
         </AccountDropdownHeader>
@@ -251,7 +253,7 @@ const AccountDropdown = (props) => {
               // dont show personal accounts for developer user
               props?.personalAccountData?.length > 0 && (
                 <div>
-                  <h3 style={{ marginBottom: 10 }}>Personal account</h3>
+                  <h3 style={{ marginBottom: 10 }}>Student account</h3>
                   {props?.personalAccountData?.map((personalItem, idx) => (
                     <div
                       className={`account-info ${

package/src/components/header/index.jsx

@@ -577,7 +577,9 @@ const HeaderComponent = (props) => {
             <div className="user-info-container">
               <h5 style={{ textTransform: "capitalize" }}>{accountName}</h5>
               <h6 style={{ textTransform: "capitalize" }}>
-                {props?.selectedAccount?.type?.toLowerCase()}
+                {props?.selectedAccount?.type?.toLowerCase() === "personal"
+                  ? "Student"
+                  : props?.selectedAccount?.type?.toLowerCase()}
               </h6>
             </div>
             <ArrowDownIcon width={16} height={10} />

package/src/components/header/index.styled.js

@@ -243,6 +243,8 @@ export const UserProfile = styled.div`
   .user-img-container {
     width: 37px;
     height: 37px;
+    border-radius: 50%;
+    overflow: hidden;
 
     img {
       width: 100%;
@@ -366,6 +368,8 @@ export const AccountDropdownHeader = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
+    border-radius: 50%;
     img {
       width: 100%;
       height: 100%;
@@ -427,6 +431,12 @@ export const AccountDropdownBody = styled.div`
   & .avatar-container {
     width: 30px;
     height: 30px;
+    overflow: hidden;
+    border-radius: 50%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   & .account-info {

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

@@ -52,9 +52,7 @@ const SideMenu = ({
     window.location.hostname.includes("staging");
 
   // When pending delete and on staging
-  const isPendingDelete =
-    generalData?.selectedAccount?.pending_delete === true &&
-    window.location.hostname.includes("staging");
+  const isPendingDelete = generalData?.selectedAccount?.pending_delete === true;
 
   useEffect(() => {
     if (userType) {
@@ -288,7 +286,12 @@ const SideMenu = ({
           }
         }}
         key={index}
-        className={cx({ active, [route.text]: true, disabled: route.disabled })}
+        className={cx({
+          active,
+          [route.text]: true,
+          disabled: route.disabled || isPendingDelete,
+          pending_delete_item: isPendingDelete,
+        })}
         minimal={isOpen}
       >
         <IconContainer active={active}>
@@ -297,7 +300,12 @@ const SideMenu = ({
         <TextContainer minimal={isOpen}>{findText(text)}</TextContainer>
 
         {!!notifications && (
-          <NotificationCount minimal={isOpen}>
+          <NotificationCount
+            minimal={isOpen}
+            className={cx({
+              pending_delete_item: isPendingDelete,
+            })}
+          >
             <div className="text">{notificationCount}</div>
           </NotificationCount>
         )}
@@ -309,20 +317,18 @@ const SideMenu = ({
     <SideMenuContainer
       isOpen={isOpen}
       className={
-        planState === "EXPIRED" &&
-        generalData?.selectedAccount?.type?.toLowerCase() === "enterprise"
+        isPendingDelete
+          ? "pending_delete"
+          : planState === "EXPIRED" &&
+            generalData?.selectedAccount?.type?.toLowerCase() === "enterprise"
           ? "grace_period disabled"
           : ""
       }
     >
       <UserCard user={user} isOpen={isOpen} findText={findText} />
-      {!isPendingDelete && (
-        <>
-          <NavigationContainer>
-            {routeFilter && routeFilter?.map(renderNavigationItem)}
-          </NavigationContainer>
-        </>
-      )}
+      <NavigationContainer>
+        {routeFilter && routeFilter?.map(renderNavigationItem)}
+      </NavigationContainer>
       <LogoutButtonContainer onClick={onLogout}>
         <IconContainer>{/* <CiLogout /> */}</IconContainer>
         {/* <TextContainer minimal={isOpen}>Log out</TextContainer> */}

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

@@ -23,6 +23,9 @@ export const SideMenuContainer = styled.div`
   border-radius: 30px;
   margin-left: 77px;
 
+  &.pending_delete {
+    background-color: #c6cccc;
+  }
   &.disabled {
     pointer-events: none;
   }
@@ -102,7 +105,15 @@ export const NavigationItemContainer = styled.p`
       background: #febf10;
     }
   }
-
+  &.pending_delete_item {
+    opacity: 0.8 !important;
+    &.active {
+      background-color: #949999;
+      &::before {
+        background-color: #949999;
+      }
+    }
+  }
   /* GRACE PERIOD AND DEACTIVATED */
   &.grace_period {
     background: var(--Neutral-40, #adb2b2);
@@ -164,6 +175,9 @@ export const NotificationCount = styled.div`
   width: 20px;
   height: 20px;
   margin-left: 2px;
+  &.pending_delete_item {
+    background-color: #949999;
+  }
 
   ${({ minimal }) =>
     minimal