l-min-components 1.0.1108 → 1.0.1117

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -218,6 +218,8 @@ const AppMainLayout = () => {
     translateData,
   } = useTranslation(wordBank);
 
+  // use this to check if we're on the demo app and remove most of the navbar items except the demo icon and text
+  const isDemo = window.location.hostname.includes("demo");
   return (
     <OutletContext.Provider
       value={{
@@ -273,23 +275,24 @@ const AppMainLayout = () => {
               <MainLayout coming={coming}>
                 <LeftLayout>
                   <SideBar routes={leftNavMenu} findText={findText} />
-                  {!coming && (
-                    <>
-                      {sideMenuLayout && (
-                        <SideMenu
-                          user={user}
-                          routes={sideMenuOptions}
-                          affiliatesActive={affiliateAccount}
-                          userType={generalData?.selectedAccount?.type?.toLowerCase()}
-                          isOpen={isOpen}
-                          setIsOpen={setIsOpen}
-                          setRightComponent={setRightComponent}
-                          planState={planState}
-                          findText={findText}
-                        />
-                      )}
-                    </>
-                  )}
+                  {!coming &&
+                    !isDemo(
+                      <>
+                        {sideMenuLayout && (
+                          <SideMenu
+                            user={user}
+                            routes={sideMenuOptions}
+                            affiliatesActive={affiliateAccount}
+                            userType={generalData?.selectedAccount?.type?.toLowerCase()}
+                            isOpen={isOpen}
+                            setIsOpen={setIsOpen}
+                            setRightComponent={setRightComponent}
+                            planState={planState}
+                            findText={findText}
+                          />
+                        )}
+                      </>
+                    )}
                   {
                     // window.location.pathname.includes("enterprise")
                     //   ? "enterprise"
@@ -326,7 +329,7 @@ const AppMainLayout = () => {
                   )}
                 </CenterLayout>
 
-                {rightLayout && !coming && (
+                {rightLayout && !coming && !isDemo && (
                   <RightLayout>
                     {rightComponent ??
                       (window.location.pathname.includes("enterprise") &&

package/src/components/header/assets/svg/computerIcon.jsx

@@ -0,0 +1,18 @@
+const CompuetrerIcon = () => {
+  return (
+    <svg
+      width="23"
+      height="17"
+      viewBox="0 0 23 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.1667 14.3483C20.2208 14.3483 21.0737 13.4858 21.0737 12.4316L21.0833 2.84831C21.0833 1.79414 20.2208 0.931641 19.1667 0.931641H3.83333C2.77917 0.931641 1.91667 1.79414 1.91667 2.84831V12.4316C1.91667 13.4858 2.77917 14.3483 3.83333 14.3483H0V16.265H23V14.3483H19.1667ZM3.83333 2.84831H19.1667V12.4316H3.83333V2.84831Z"
+        fill="#00C2C2"
+      />
+    </svg>
+  );
+};
+
+export default CompuetrerIcon;

package/src/components/header/index.jsx

@@ -34,6 +34,7 @@ import DuetIcon from "../sideNav/svg/duetIcon";
 import SpeechIcon from "../sideNav/svg/speechIcon";
 import DictionaryIcon from "../sideNav/svg/dictionaryIcon";
 import FunIcon from "../sideNav/svg/fun";
+import CompuetrerIcon from "./assets/svg/computerIcon";
 
 /**
  * @param {{
@@ -70,6 +71,7 @@ const HeaderComponent = (props) => {
     updateUserAccountData,
     handleUpdateUserAccount,
     handleGetUnreadNotificationPersonal,
+    handleGeneralNotificationCountPersonal
   } = useHeader();
   const { pathname } = useLocation();
   const { setGeneralData, generalData, notificationMarkReadData } =
@@ -119,7 +121,13 @@ const HeaderComponent = (props) => {
   );
 
   useEffect(() => {
-    if (accountType) handleGeneralNotificationCount(accountType);
+    if (accountType && accountType !== "personal") {
+      handleGeneralNotificationCount(accountType);
+    }
+
+    if (accountType && accountType === "personal") {
+      handleGeneralNotificationCountPersonal()
+    }
   }, [accountType]);
 
   useEffect(() => {
@@ -306,11 +314,13 @@ const HeaderComponent = (props) => {
   // Determine the label based on the current path
   const getNavLinkLabel = () => {
     const path = window.location.pathname;
+    const hostname = window.location.hostname;
     if (path.includes("fun")) return "Fun";
     if (path.includes("community")) return "Community";
     if (path.includes("explore")) return "Explore";
     if (path.includes("connect")) return "Connect";
     if (path.includes("dictionary")) return "Dictionary";
+    if (hostname.includes("demo")) return "Demo";
     return props.findText("Learning");
   };
   const getNavLinkIcon = () => {
@@ -322,6 +332,7 @@ const HeaderComponent = (props) => {
     if (path.includes("connect")) return <SpeechIcon width={23} height={23} />;
     if (path.includes("dictionary"))
       return <DictionaryIcon width={23} height={23} />;
+    if (hostname.includes("demo")) return <CompuetrerIcon />;
     return <BookIcon width={23} height={23} />;
   };
 
@@ -426,15 +437,15 @@ const HeaderComponent = (props) => {
     }
   }, [notificationMarkReadData?.response]);
 
-  // When Developer and on staging
-  const isDeveloper = generalData?.selectedAccount?.type === "DEVELOPER";
-
   const isPendingDelete =
     generalData?.selectedAccount?.pending_delete === true &&
     window.location.hostname.includes("staging");
 
   const value = localStorage.getItem("defaultLang");
 
+  // use this to check if we're on the demo app and remove most of the navbar items except the demo icon and text
+  const isDemo = window.location.hostname.includes("demo");
+
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />
@@ -446,65 +457,69 @@ const HeaderComponent = (props) => {
       >
         <li>
           <a className={isHomePage() ? "active" : ""}>
-            {getNavLinkIcon()} {getNavLinkLabel()}
+            {getNavLinkIcon()} {props.findText(getNavLinkLabel())}
           </a>
         </li>
 
-        <li>
-          <a
-            onClick={() => {
-              window.location.hostname.includes("coming")
-                ? (window.location.href =
-                    "https://www.learngual.com/settings/account")
-                : (window.location.href = "/settings/account");
-            }}
-            className={
-              window.location.pathname.includes("settings") ? "active" : ""
-            }
-            style={{ cursor: "pointer" }}
-          >
-            <SettingIcon /> {props.findText("Settings")}
-          </a>
-        </li>
-        <li>
-          <a
-            // href={`https://559staging.learngual.com/${
-            //   selectedAccount?.type
-            //     ? selectedAccount?.type?.toLowerCase()
-            //     : userAccountsDetail?.data?.[0]?.type?.toLowerCase()
-            // }/notifications/`}
-
-            onClick={(e) => {
-              if (isPendingDelete) {
-                e.preventDefault();
-                e.stopPropagation();
-              } else {
-                window.location.hostname.includes("coming")
-                  ? (window.location.href = `https://www.learngual.com/auth/sign-in`)
-                  : (window.location.href = `/${
-                      selectedAccount?.type
-                        ? selectedAccount?.type?.toLowerCase()
-                        : userAccountsDetail?.data?.[0]?.type?.toLowerCase()
-                    }/notifications/`);
-              }
-            }}
-            className={
-              window.location.pathname.includes("notifications")
-                ? "active"
-                : isPendingDelete
-                ? "disabled"
-                : ""
-            }
-            style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}
-          >
-            {unreadNotificationData?.data?.count > 0 ? (
-              <NotificationIcon />
-            ) : (
-              <NotificationEmptyIcon />
-            )}
-            {props.findText("Notifications")}
-          </a>
-        </li>
+        {!isDemo && (
+          <>
+            <li>
+              <a
+                onClick={() => {
+                  window.location.hostname.includes("coming")
+                    ? (window.location.href =
+                        "https://www.learngual.com/settings/account")
+                    : (window.location.href = "/settings/account");
+                }}
+                className={
+                  window.location.pathname.includes("settings") ? "active" : ""
+                }
+                style={{ cursor: "pointer" }}
+              >
+                <SettingIcon /> {props.findText("Settings")}
+              </a>
+            </li>
+            <li>
+              <a
+                // href={`https://559staging.learngual.com/${
+                //   selectedAccount?.type
+                //     ? selectedAccount?.type?.toLowerCase()
+                //     : userAccountsDetail?.data?.[0]?.type?.toLowerCase()
+                // }/notifications/`}
+
+                onClick={(e) => {
+                  if (isPendingDelete) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  } else {
+                    window.location.hostname.includes("coming")
+                      ? (window.location.href = `https://www.learngual.com/auth/sign-in`)
+                      : (window.location.href = `/${
+                          selectedAccount?.type
+                            ? selectedAccount?.type?.toLowerCase()
+                            : userAccountsDetail?.data?.[0]?.type?.toLowerCase()
+                        }/notifications/`);
+                  }
+                }}
+                className={
+                  window.location.pathname.includes("notifications")
+                    ? "active"
+                    : isPendingDelete
+                    ? "disabled"
+                    : ""
+                }
+                style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}
+              >
+                {unreadNotificationData?.data?.count > 0 ? (
+                  <NotificationIcon />
+                ) : (
+                  <NotificationEmptyIcon />
+                )}
+                {props.findText("Notifications")}
+              </a>
+            </li>
+          </>
+        )}
         {/* <li style={{ marginLeft: "20%", cursor: "pointer" }}>
           <a
             onClick={() => {
@@ -525,13 +540,14 @@ const HeaderComponent = (props) => {
 
       </Help> */}
 
-      <NavGroup
-        onClick={() => {
-          setLanguageDropdown();
-          setIsOpen();
-        }}
-      >
-        {/* {(!isDeveloper || !window.location.hostname.includes("coming")) && ( // when developer and on staging, don't show
+      {!isDemo && (
+        <NavGroup
+          onClick={() => {
+            setLanguageDropdown();
+            setIsOpen();
+          }}
+        >
+          {/* {(!isDeveloper || !window.location.hostname.includes("coming")) && ( // when developer and on staging, don't show
           <SearchInputGroup>
             <SearchIcon />
             <SearchInput
@@ -553,87 +569,95 @@ const HeaderComponent = (props) => {
           </SearchInputGroup>
         )} */}
 
-        <div className="language_dropdown" onClick={(e) => e.stopPropagation()}>
           <div
-            className="drop_holder"
-            onClick={() => {
-              setLanguageDropdown(!languageDropdown);
-              setIsOpen();
-            }}
+            className="language_dropdown"
+            onClick={(e) => e.stopPropagation()}
           >
-            <img src={selectedLanguageData[value] || usFlag} alt="" />
-            <ArrowDownIcon />
+            <div
+              className="drop_holder"
+              onClick={() => {
+                setLanguageDropdown(!languageDropdown);
+                setIsOpen();
+              }}
+            >
+              <img src={selectedLanguageData[value] || usFlag} alt="" />
+              <ArrowDownIcon />
+            </div>
+            {languageDropdown && (
+              <LanguageDropdown
+                languageDropdown={languageDropdown}
+                setLanguageDropdown={setLanguageDropdown}
+                findText={props.findText}
+                defaultLang={props.defaultLang}
+                setDefaultLang={props.setDefaultLang}
+                setIsTranslationsLoading={props.setIsTranslationsLoading}
+              />
+            )}
           </div>
-          {languageDropdown && (
-            <LanguageDropdown
-              languageDropdown={languageDropdown}
-              setLanguageDropdown={setLanguageDropdown}
+          {selectedAccount && (
+            <UserProfile
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsOpen(!isOpen);
+                setLanguageDropdown();
+              }}
+              ref={secondContainerRef}
+            >
+              <div className="user-img-container">
+                <img
+                  src={selectedAccount?.profile_photo?.url || avatar}
+                  alt="profile"
+                />
+              </div>
+              <div className="user-info-container">
+                <h5 style={{ textTransform: "capitalize" }}>
+                  {selectedAccount?.metadata?.organization_name ||
+                    selectedAccount?.display_name}
+                </h5>
+                <h6 style={{ textTransform: "capitalize" }}>
+                  {selectedAccount?.type?.toLowerCase()}
+                </h6>
+              </div>
+              <ArrowDownIcon width={16} height={10} />
+            </UserProfile>
+          )}
+        </NavGroup>
+      )}
+
+      {!isDemo && (
+        <>
+          {isOpen && (
+            <AccountDropdown
+              avatar={avatar}
+              activeAccountName={selectedAccount?.display_name}
+              activeAccountType={"Personal Account"}
+              accountName={"Default name"}
+              accountType={"Default Account"}
+              notificationCount={"5"}
+              isOpen={isOpen}
+              setIsOpen={setIsOpen}
+              data={userAccountsDetail}
+              selectedAccount={selectedAccount}
+              setSelectedAccount={setSelectedAccount}
+              developerAccountData={developerAccountData}
+              setDeveloperAccountData={setDeveloperAccountData}
+              personalAccountData={personalAccountData}
+              setPersonalAccountData={setPersonalAccountData}
+              instructorAccountData={instructorAccountData}
+              setInstructorAccountData={setInstructorAccountData}
+              enterpriseAccountData={enterpriseAccountData}
+              setEnterpriseAccountData={setEnterpriseAccountData}
+              setGeneralData={setGeneralData}
+              userAccountsDetail={userAccountsDetail}
+              userDetails={userDetails}
+              setDefaultAccount={setDefaultAccount}
+              handleSetDefaultAccount={handleSetDefaultAccount}
+              ref={acctDropdownContainerRef}
+              hasDeveloperAccount={hasDeveloperAccount}
               findText={props.findText}
-              defaultLang={props.defaultLang}
-              setDefaultLang={props.setDefaultLang}
-              setIsTranslationsLoading={props.setIsTranslationsLoading}
             />
           )}
-        </div>
-        {selectedAccount && (
-          <UserProfile
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsOpen(!isOpen);
-              setLanguageDropdown();
-            }}
-            ref={secondContainerRef}
-          >
-            <div className="user-img-container">
-              <img
-                src={selectedAccount?.profile_photo?.url || avatar}
-                alt="profile"
-              />
-            </div>
-            <div className="user-info-container">
-              <h5 style={{ textTransform: "capitalize" }}>
-                {selectedAccount?.metadata?.organization_name ||
-                  selectedAccount?.display_name}
-              </h5>
-              <h6 style={{ textTransform: "capitalize" }}>
-                {selectedAccount?.type?.toLowerCase()}
-              </h6>
-            </div>
-            <ArrowDownIcon width={16} height={10} />
-          </UserProfile>
-        )}
-      </NavGroup>
-
-      {isOpen && (
-        <AccountDropdown
-          avatar={avatar}
-          activeAccountName={selectedAccount?.display_name}
-          activeAccountType={"Personal Account"}
-          accountName={"Default name"}
-          accountType={"Default Account"}
-          notificationCount={"5"}
-          isOpen={isOpen}
-          setIsOpen={setIsOpen}
-          data={userAccountsDetail}
-          selectedAccount={selectedAccount}
-          setSelectedAccount={setSelectedAccount}
-          developerAccountData={developerAccountData}
-          setDeveloperAccountData={setDeveloperAccountData}
-          personalAccountData={personalAccountData}
-          setPersonalAccountData={setPersonalAccountData}
-          instructorAccountData={instructorAccountData}
-          setInstructorAccountData={setInstructorAccountData}
-          enterpriseAccountData={enterpriseAccountData}
-          setEnterpriseAccountData={setEnterpriseAccountData}
-          setGeneralData={setGeneralData}
-          userAccountsDetail={userAccountsDetail}
-          userDetails={userDetails}
-          setDefaultAccount={setDefaultAccount}
-          handleSetDefaultAccount={handleSetDefaultAccount}
-          ref={acctDropdownContainerRef}
-          hasDeveloperAccount={hasDeveloperAccount}
-          findText={props.findText}
-        />
+        </>
       )}
     </Navbar>
   );

package/src/components/messageAddon/messages/chatheader/index.jsx

@@ -70,7 +70,7 @@ const ChatHeader = ({
 
               {chatRecipient?.type === "PERSONAL" && (
                 <div className="friend-tag">
-                  <HiUser /> Friend
+                  <HiUser /> Student
                 </div>
               )}
               {chatRecipient?.type === "INSTRUCTOR" && (

package/src/components/messageAddon/messages/index.styled.js

@@ -793,6 +793,7 @@ export const MessageBox = styled.div`
     h6 {
       font-size: 14px;
       font-weight: 400;
+      color: #ffffff;
       /* padding-top: 6px; */
     }
 

package/src/hooks/leftNavMenu.jsx

@@ -43,6 +43,7 @@ import {
   ManageStudentsIconActive,
 } from "../assets/svg/students";
 import { ApiIcon, ApiIconActive } from "../assets/svg/apiIcon";
+import CompuetrerIcon from "../components/header/assets/svg/computerIcon";
 
 export const user = {
   name: "John Doe",
@@ -81,6 +82,11 @@ export const leftNavMenu = [
     label: "Dictionary",
     icon: <DictionaryIcon />,
   },
+  {
+    path: "https://demo.learngual.com/type-select",
+    label: "Demo",
+    icon: <CompuetrerIcon />,
+  },
 ];
 
 export const sideMenuOptions = [
@@ -136,7 +142,7 @@ export const sideMenuOptions = [
         path: "/enterprise/manage-teams",
         icon: <TeamsIcon />,
         iconActive: <TeamsIconActive />,
-        text: "Manage Teams",
+        text: "Manage teams",
       },
       {
         path: "/msg/enterprise/messages",
@@ -154,7 +160,7 @@ export const sideMenuOptions = [
         path: "/enterprise/file-manager",
         icon: <FileManagerIcon />,
         iconActive: <FileManagerIconActive />,
-        text: "File Manager",
+        text: "File manager",
       },
     ],
   },
@@ -171,19 +177,19 @@ export const sideMenuOptions = [
         path: "/instructor/reports",
         icon: <AwardIcon />,
         iconActive: <AwardIconActive />,
-        text: "Manage Report",
+        text: "Manage report",
       },
       {
         path: "/instructor/courses",
         icon: <CoursesIcon />,
         iconActive: <CoursesIconActive />,
-        text: "Manage Courses",
+        text: "Manage courses",
       },
       {
         path: "/instructor/manage-students",
         icon: <ManageStudentsIcon />,
         iconActive: <ManageStudentsIconActive />,
-        text: "Manage Student",
+        text: "Manage student",
       },
       {
         path: "/msg/instructor/messages",
@@ -208,7 +214,7 @@ export const sideMenuOptions = [
         path: "/instructor/file-manager",
         icon: <FileManagerIcon />,
         iconActive: <FileManagerIconActive />,
-        text: "File Manager",
+        text: "File manager",
       },
     ],
   },
@@ -231,7 +237,7 @@ export const sideMenuOptions = [
         path: "/personal/courses",
         icon: <CoursesIcon />,
         iconActive: <CoursesIconActive />,
-        text: "My Courses",
+        text: "My courses",
       },
       {
         path: "/personal/reports",