@nualang/nualang-ui-components 0.1.1221 → 0.1.1223

package/dist/Cards/Category/Category.js

@@ -23,7 +23,7 @@ function Category({
   const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Card, {
     sx: {
-      minHeight: isSmallScreen ? 40 : 150,
+      minHeight: isSmallScreen ? 100 : 150,
       background: backgroundColor,
       color: "white",
       position: "relative",
@@ -51,7 +51,7 @@ function Category({
         sx: {
           display: "flex",
           justifyContent: "flex-start",
-          maxWidth: "55%"
+          maxWidth: isSmallScreen ? "75%" : "55%"
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardElements.CardContent, {
           sx: {
@@ -85,7 +85,7 @@ function Category({
       })]
     }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: image,
-      alt: "category",
+      alt: `${categoryTitle} category image`,
       style: {
         position: "absolute",
         bottom: 10,

package/dist/Containers/App/App.js

@@ -117,6 +117,8 @@ function AppSearch({
   const [debouncedSearchText, setDebouncedSearchText] = (0, _react.useState)("");
   const [prevDebouncedSearchText, setPrevDebouncedSearchText] = (0, _react.useState)("");
   const location = (0, _reactRouterDom.useLocation)().pathname;
+  const queryParams = new URLSearchParams(window.location.search);
+  const queryParamsSearchText = queryParams.get('searchText') || '';
   const handleSearchContent = (0, _react.useCallback)(text => {
     const searchQuery = text !== undefined ? text : debouncedSearchText;
     const extraData = {
@@ -135,6 +137,11 @@ function AppSearch({
       setPrevDebouncedSearchText("");
     }
   }, [location, setSearchText, setDebouncedSearchText]);
+  (0, _react.useEffect)(() => {
+    if (queryParamsSearchText.trim() !== '' && searchText.trim() === '') {
+      setSearchText(queryParamsSearchText);
+    }
+  }, [queryParamsSearchText, setSearchText]);
   (0, _react.useEffect)(() => {
     if (debouncedSearchText && debouncedSearchText !== prevDebouncedSearchText) {
       handleSearchContent();
@@ -285,7 +292,7 @@ function App({
   };
   const isSearchActive = searchText || isMobileSearchExpanded;
   const isTeacher = user && user["custom:role"] === "teach";
-  const isUpgradePossible = subscription && !subscription.isPaidUser && subscription.isUpgradePossible;
+  const isUpgradePossible = subscription && subscription.isUpgradePossible;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
@@ -376,16 +383,7 @@ function App({
             onClick: handleClickCreate,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {})
           })
-        })), isUpgradePossible && authenticated && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultColourButton.default, {
-          variant: "contained",
-          href: upgradePlanURL,
-          size: isLgScreen ? "medium" : "small",
-          sx: {
-            fontSize: isLgScreen ? null : 12,
-            ml: 1
-          },
-          children: t("upgrade_plan")
-        }), isLgScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WhatsNew.default, {
+        })), isLgScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WhatsNew.default, {
           t: t,
           whatsNewMarkdown: whatsNewMarkdown,
           whatsNewDate: whatsNewDate
@@ -472,6 +470,7 @@ function App({
       authenticated: authenticated,
       verificationStatus: verificationStatus,
       gameAward: gameAward,
+      subscription: subscription,
       ...user
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomBar.default, {
       navigation: bottomNav,

package/dist/Forms/FeedbackForm/FeedbackForm.js

@@ -157,6 +157,43 @@ function FeedbackForm({
       });
     }
   }, [aiGrade]);
+  (0, _react.useEffect)(() => {
+    const initialSliders = {
+      feedback1: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Novice Low"
+      }],
+      feedback2: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Novice Low"
+      }],
+      feedback3: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Novice Low"
+      }],
+      feedback4: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Novice Low"
+      }],
+      feedback5: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Novice Low"
+      }],
+      feedback6: [{
+        feedbackLevel: 0,
+        feedbackLevelName: "Novice Low"
+      }],
+      feedbackText: ""
+    };
+    Object.entries(initialSliders).forEach(([field, value]) => {
+      handleChange({
+        target: {
+          name: field,
+          value
+        }
+      });
+    });
+  }, [selectedAttendeeName]);
   const marks = [{
     value: 0,
     label: "Novice Low"

package/dist/Misc/AnswerResult/AnswerResult.js

@@ -166,10 +166,11 @@ function TranscriptBox({
           title: isWordNearCorrect ? t("word_near_correct") : `${t("pronunciation_score")}: ${wordPronunciationScorePercentage > -1 ? wordPronunciationScorePercentage : 0}%`,
           sx: theme => ({
             marginBottom: 4,
+            fontStyle: isWordNearCorrect ? 'italic' : 'normal',
             textDecoration: result === "incorrect" || result === "partially_correct" && !isWordCorrect ? "underline" : "none",
-            color: isWordCorrect ? theme.palette.success.dark : isWordNearCorrect ? theme.palette.mode === "light" ? _colors.orange[900] : _colors.orange[200] : theme.palette.error.dark,
+            color: isWordCorrect ? theme.palette.success.dark : isWordNearCorrect ? theme.palette.mode === "light" ? _colors.orange[400] : _colors.orange[200] : theme.palette.error.dark,
             ...(isWordCorrect && wordPronunciationScorePercentage < 90 && {
-              color: theme.palette.mode === "light" ? _colors.orange[900] : _colors.orange[200],
+              color: theme.palette.mode === "light" ? _colors.orange[400] : _colors.orange[200],
               fontStyle: "italic"
             })
           }),

package/dist/Navigation/ResponsiveDrawer/ResponsiveDrawer.js

@@ -19,6 +19,7 @@ var _styles = require("@mui/material/styles");
 var _index = require("../../utils/index");
 var _NualangVerifiedIcon = _interopRequireDefault(require("../../Misc/NualangVerifiedIcon/NualangVerifiedIcon"));
 var _MedalSelector = _interopRequireDefault(require("../../Misc/MedalSelector/MedalSelector"));
+var _KeyboardDoubleArrowUp = _interopRequireDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
 var _nav = _interopRequireDefault(require("../_nav"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -90,6 +91,27 @@ const useStyles = (0, _mui.makeStyles)()((theme, {
     color: theme.palette.primary.contrastText,
     backgroundColor: `${theme.palette.primary.main} !important`
   },
+  upgradeListItem: {
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(1),
+    textTransform: "capitalize",
+    transition: "background-color 0.3s ease-in-out, color 0.3s ease-in-out",
+    color: theme.palette.primary.main,
+    fontWeight: 500,
+    "&:hover": {
+      backgroundColor: theme.palette.mode === 'light' ? "#fdedff" : ""
+    }
+  },
+  upgradeListItemSelected: {
+    backgroundColor: `${theme.palette.primary.main} !important`,
+    color: `${theme.palette.primary.contrastText} !important`
+  },
+  upgradeSelectedIcon: {
+    color: theme.palette.primary.main
+  },
+  upgradeIconSelected: {
+    color: theme.palette.primary.contrastText
+  },
   selectedIcon: {
     color: theme.palette.primary.contrastText
   },
@@ -107,7 +129,8 @@ function NavItem({
   item,
   closeMobileDrawer,
   t,
-  isCollapsed
+  isCollapsed,
+  upgradeItem
 }) {
   const location = (0, _reactRouterDom.useLocation)();
   const {
@@ -135,13 +158,13 @@ function NavItem({
   }
   const listItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, {
     button: true,
-    className: classes.listItem,
+    className: upgradeItem ? classes.upgradeListItem : classes.listItem,
     component: component,
     onClick: onClick,
     to: to,
     selected: isSelected,
     classes: {
-      selected: classes.listItemSelected
+      selected: upgradeItem ? classes.upgradeListItemSelected : classes.listItemSelected
     },
     href: href,
     target: target,
@@ -150,15 +173,15 @@ function NavItem({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
       title: t(item.name),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-        className: isSelected ? classes.selectedIcon : "",
-        "aria-label": undefined,
+        className: upgradeItem ? isSelected ? classes.upgradeIconSelected : classes.upgradeSelectedIcon : isSelected ? classes.selectedIcon : "",
         children: item.icon
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
       primaryTypographyProps: {
         noWrap: true
       },
-      primary: t(item.name)
+      primary: t(item.name),
+      secondary: t(item.secondary)
     }), item.links && item.links.length > 0 && !isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemSecondaryAction, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
         onClick: handleClick,
@@ -236,8 +259,10 @@ function ResponsiveDrawer({
   navToSettings,
   authenticated,
   verificationStatus = "",
-  gameAward = ""
+  gameAward = "",
+  subscription
 }) {
+  const isUpgradePossible = subscription && subscription.isUpgradePossible;
   const isGeneratedEmail = (0, _index.checkIsGeneratedEmail)(email);
   const {
     classes
@@ -450,16 +475,44 @@ function ResponsiveDrawer({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
       smDown: true,
       implementation: "js",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Drawer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Drawer, {
         classes: {
           paper: classes.drawerPaper
         },
         variant: "permanent",
         open: true,
-        children: [drawer, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: classes.toolbar,
-          children: footerIcon(handleCollapseToggle)
-        })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          children: [drawer, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            flexGrow: 1
+          }), " ", isUpgradePossible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+            sx: {
+              overflowY: "auto",
+              overflowX: "hidden",
+              paddingLeft: theme.spacing(1),
+              paddingRight: theme.spacing(1)
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItem, {
+              index: 0,
+              classes: classes,
+              Link: Link,
+              item: {
+                name: "upgrade_plan",
+                secondary: `subscription_status_${subscription?.subscriptionStatus}`,
+                url: "/settings#Subscription",
+                icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardDoubleArrowUp.default, {})
+              },
+              t: t,
+              isCollapsed: isCollapsed,
+              upgradeItem: true
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.toolbar,
+            children: footerIcon(handleCollapseToggle)
+          })]
+        })
       })
     })]
   });

package/dist/Navigation/_nav.js

@@ -71,31 +71,13 @@ const navigation = {
     url: "/dashboard",
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Home.default, {})
   }, {
-    name: "library",
-    open: true,
-    //url: '/library',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LibraryBooks.default, {}),
-    links: [{
-      name: "roleplays",
-      url: "/roleplays",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Forum.default, {})
-    }, {
-      name: "bots",
-      url: "/bots",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Face.default, {})
-    }, {
-      name: "courses",
-      url: "/courses",
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BubbleChart.default, {})
-    }]
+    name: "courses",
+    url: "/courses",
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BubbleChart.default, {})
   }, {
     name: "classrooms",
     url: "/classrooms",
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_School.default, {})
-  }, {
-    name: "activity",
-    url: "/activity",
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Timeline.default, {})
   },
   // {
   //   divider: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1221",
+  "version": "0.1.1223",
   "main": "dist/index.js",
   "files": [
     "dist",