@nualang/nualang-ui-components 0.1.1226 → 0.1.1228

package/dist/Dialogs/CreatorNotSubscribedUpgrade/CreatorNotSubscribedUpgrade.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _ResponsiveDialog = _interopRequireDefault(require("../ResponsiveDialog/ResponsiveDialog"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CreatorNotSubscribedUpgrade({
+  t = text => text,
+  open,
+  handleClose,
+  closeText,
+  handleSubmit,
+  submitText,
+  descriptions = [],
+  dialogTitle
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveDialog.default, {
+    open: open,
+    handleClose: handleClose,
+    closeText: closeText,
+    handleSubmit: handleSubmit,
+    submitText: submitText,
+    dialogTitle: dialogTitle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DialogContentText.default, {
+      component: "div",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          paddingBottom: 1
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: t("creator_not_subscribed_upgrade")
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "ul",
+        sx: {
+          listStyleType: "disc",
+          paddingLeft: 3,
+          "& li": {
+            marginBottom: "8px",
+            fontSize: "1rem",
+            lineHeight: "1.5"
+          }
+        },
+        children: descriptions.map((desc, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          component: "li",
+          children: t(desc)
+        }, index))
+      })]
+    })
+  });
+}
+var _default = exports.default = CreatorNotSubscribedUpgrade;

package/dist/Editors/Bot/Editor/BotDesigner/VarList.js

@@ -17,13 +17,11 @@ var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
 var _handleBotVarsDownload = _interopRequireDefault(require("../../../../hooks/handleBotVarsDownload"));
 var _UploadBotVars = _interopRequireDefault(require("../../../../Dialogs/UploadBotVars/UploadBotVars"));
 var _ImageSelector = _interopRequireDefault(require("../../../../Forms/ImageSelector"));
+var _index = require("../../../../utils/index");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Components
 
-const markdownLinkRegex = /\[(.*)\]\(([^ ]+?)( "(.+)")?\)/;
-const markdownImageLinkRegex = /!\[(.*)\]\(([^ ]+?)( "(.+)")?\)/;
-const multipleOptionsRegex = /^\((.*)\)$/;
 const DEFAULT_BOT_IMAGE = `${process.env.REACT_APP_API}/image-creator/848/480/691f89/ffffff/fa-images?fontSize=200`;
 function VarListItem({
   t,
@@ -38,9 +36,9 @@ function VarListItem({
   botId
 }) {
   const [selectedImage, setSelectedImage] = (0, _react.useState)("");
-  if (varValue && markdownImageLinkRegex.test(varValue)) {
+  if (varValue && _index.markdownImageLinkRegex.test(varValue)) {
     // Image Variable
-    const url = varValue.match(markdownImageLinkRegex)[2];
+    const url = varValue.match(_index.markdownImageLinkRegex)[2];
     const handleImageChange = event => {
       setSelectedImage(event.target.value);
     };
@@ -88,7 +86,7 @@ function VarListItem({
         })
       })]
     });
-  } else if (varValue && markdownLinkRegex.test(varValue)) {
+  } else if (varValue && _index.markdownLinkRegex.test(varValue)) {
     // Link Variable
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       px: 2,
@@ -110,9 +108,9 @@ function VarListItem({
         }
       })
     });
-  } else if (varValue && multipleOptionsRegex.test(varValue)) {
+  } else if (varValue && _index.multipleOptionsRegex.test(varValue)) {
     // Multiple Options Variable
-    const options = varValue.match(multipleOptionsRegex)[1].split("|");
+    const options = varValue.match(_index.multipleOptionsRegex)[1].split("|");
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       px: 2,
       className: classes.nested,
@@ -149,7 +147,8 @@ function VarListItem({
                 onClick: handleSelectCurrentInput,
                 autoFocus: option === "",
                 inputProps: {
-                  "data-type": "var"
+                  "data-type": "var",
+                  "data-option-index": index
                 }
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {

package/dist/Editors/Bot/Editor/Editor.js

@@ -46,6 +46,7 @@ require("codemirror/addon/search/search.js");
 require("codemirror/addon/search/jump-to-line.js");
 require("codemirror/addon/dialog/dialog.js");
 require("codemirror/addon/dialog/dialog.css");
+var _index = require("../../../utils/index");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // import AddCommentIcon from '@mui/icons-material/AddComment';
@@ -558,6 +559,7 @@ function Editor({
   const handleSwitchEditor = () => {
     setSimplified(false);
     handleCloseEditorModal();
+    setFormattingOptionsAnchorEl(null);
   };
   (0, _react.useEffect)(() => {
     const createdChart = createBotFlowChart(debouncedBotJSON, {
@@ -584,6 +586,7 @@ function Editor({
   };
   const handleChangeView = event => {
     setIsEditView(event.target.checked);
+    setFormattingOptionsAnchorEl(null);
   };
   const [isDisabled, setIsDisabled] = (0, _react.useState)(true);
   const [isButtonClicked, setIsButtonClicked] = (0, _react.useState)(false);
@@ -612,6 +615,16 @@ function Editor({
   };
   const undo = () => editor.undo();
   const redo = () => editor.redo();
+  const wrapTextSelection = (start, end, currentText, selectionStart, selectionEnd) => {
+    let newText = "";
+    if (selectionStart !== selectionEnd) {
+      const selectedText = currentText.slice(selectionStart, selectionEnd);
+      newText = [currentText.slice(0, selectionStart), `${start}${selectedText}${end}`, currentText.slice(selectionEnd)].join("");
+    } else {
+      newText = [currentText.slice(0, selectionStart), `${start}${t("")}${end}`, currentText.slice(selectionStart)].join("");
+    }
+    return newText;
+  };
   const toggleAround = (start, end) => {
     if (isEditView) {
       const cm = editor.doc.cm;
@@ -644,19 +657,22 @@ function Editor({
         dataset
       } = currentInput;
       const {
-        type
+        type,
+        optionIndex
       } = dataset;
       const newRivescriptJSON = botJSON;
       if (["var", "sub", "array"].includes(type)) {
         const currentText = newRivescriptJSON.begin[type][name];
-        let newText = "";
-        if (selectionStart !== selectionEnd) {
-          const selectedText = currentText.slice(selectionStart, selectionEnd);
-          newText = [currentText.slice(0, selectionStart), `${start}${selectedText}${end}`, currentText.slice(selectionEnd)].join("");
-          newRivescriptJSON.begin[type][name] = newText;
+        if (_index.multipleOptionsRegex.test(currentText)) {
+          // Multiple Options Variable
+          const options = currentText.match(_index.multipleOptionsRegex)[1].split("|");
+          let currentOptionText = options[optionIndex];
+          const newText = wrapTextSelection(start, end, currentOptionText, selectionStart, selectionEnd);
+          options[optionIndex] = newText;
+          newRivescriptJSON.begin[type][name] = `(${options.join("|")})`;
           handleBotJSONChange(newRivescriptJSON);
         } else {
-          const newText = [currentText.slice(0, selectionStart), `${start}${t("")}${end}`, currentText.slice(selectionStart)].join("");
+          const newText = wrapTextSelection(start, end, currentText, selectionStart, selectionEnd);
           newRivescriptJSON.begin[type][name] = newText;
           handleBotJSONChange(newRivescriptJSON);
         }
@@ -666,82 +682,7 @@ function Editor({
           triggerIndex
         } = dataset;
         const currentText = newRivescriptJSON.topics[topicName][triggerIndex].trigger;
-        let newText = "";
-        if (selectionStart !== selectionEnd) {
-          const selectedText = currentText.slice(selectionStart, selectionEnd);
-          newText = [currentText.slice(0, selectionStart), `${start}${selectedText}${end}`, currentText.slice(selectionEnd)].join("");
-          newRivescriptJSON.topics[topicName][triggerIndex].trigger = newText;
-          handleBotJSONChange(newRivescriptJSON);
-        } else {
-          newText = [currentText.slice(0, selectionStart), `${start}${t("")}${end}`, currentText.slice(selectionStart)].join("");
-          newRivescriptJSON.topics[topicName][triggerIndex].trigger = newText;
-          handleBotJSONChange(newRivescriptJSON);
-        }
-      } else if (type === "reply") {
-        const {
-          topicName,
-          triggerIndex,
-          replyIndex
-        } = dataset;
-        const currentText = newRivescriptJSON.topics[topicName][triggerIndex].reply[replyIndex];
-        let newText = "";
-        if (selectionStart !== selectionEnd) {
-          const selectedText = currentText.slice(selectionStart, selectionEnd);
-          newText = [currentText.slice(0, selectionStart), `${start}${selectedText}${end}`, currentText.slice(selectionEnd)].join("");
-          newRivescriptJSON.topics[topicName][triggerIndex].reply[replyIndex] = newText;
-          handleBotJSONChange(newRivescriptJSON);
-        } else {
-          newText = [currentText.slice(0, selectionStart), `${start}${t("")}${end}`, currentText.slice(selectionStart)].join("");
-          newRivescriptJSON.topics[topicName][triggerIndex].reply[replyIndex] = newText;
-          handleBotJSONChange(newRivescriptJSON);
-        }
-      }
-      currentInput.focus();
-    }
-  };
-  const addSpecialCharacter = (start, end) => {
-    const multipleOptionsRegex = /^\((.*)\)$/;
-    if (isEditView) {
-      const cm = editor.doc.cm;
-      cm.focus();
-      const doc = cm.getDoc();
-      const cursor = doc.getCursor();
-      doc.replaceRange(start + end, {
-        line: cursor.line,
-        ch: cursor.ch
-      });
-      doc.setCursor({
-        line: cursor.line,
-        ch: cursor.ch + start.length
-      });
-    } else if (currentInput && currentInput.name) {
-      const {
-        name,
-        selectionStart,
-        dataset
-      } = currentInput;
-      const {
-        type
-      } = dataset;
-      const newRivescriptJSON = botJSON;
-      if (["var", "sub"].includes(type)) {
-        const currentText = newRivescriptJSON.begin[type][name];
-        const updatedSelectionStart = multipleOptionsRegex.test(currentText) ? selectionStart + 1 : selectionStart;
-        const newText = [currentText.slice(0, updatedSelectionStart), `${start}${end}`, currentText.slice(updatedSelectionStart)].join("");
-        newRivescriptJSON.begin[type][name] = newText;
-        handleBotJSONChange(newRivescriptJSON);
-      } else if (type === "array") {
-        const currentText = newRivescriptJSON.begin[type][name];
-        const newText = [[currentText.slice(0, selectionStart), `${start}${end}`, currentText.slice(selectionStart)].join("")];
-        newRivescriptJSON.begin[type][name] = newText;
-        handleBotJSONChange(newRivescriptJSON);
-      } else if (type === "trigger") {
-        const {
-          topicName,
-          triggerIndex
-        } = dataset;
-        const currentText = newRivescriptJSON.topics[topicName][triggerIndex].trigger;
-        const newText = [currentText.slice(0, selectionStart), `${start}${end}`, currentText.slice(selectionStart)].join("");
+        const newText = wrapTextSelection(start, end, currentText, selectionStart, selectionEnd);
         newRivescriptJSON.topics[topicName][triggerIndex].trigger = newText;
         handleBotJSONChange(newRivescriptJSON);
       } else if (type === "reply") {
@@ -751,7 +692,7 @@ function Editor({
           replyIndex
         } = dataset;
         const currentText = newRivescriptJSON.topics[topicName][triggerIndex].reply[replyIndex];
-        const newText = [currentText.slice(0, selectionStart), `${start}${end}`, currentText.slice(selectionStart)].join("");
+        const newText = wrapTextSelection(start, end, currentText, selectionStart, selectionEnd);
         newRivescriptJSON.topics[topicName][triggerIndex].reply[replyIndex] = newText;
         handleBotJSONChange(newRivescriptJSON);
       }
@@ -772,7 +713,7 @@ function Editor({
     setImageModalOpen(false);
     setIsDisabled(true);
   };
-  const handleAddImage = async ({
+  const handleAddImage = ({
     name,
     value
   }) => {
@@ -783,17 +724,24 @@ function Editor({
       console.error("error", error);
     }
   };
-  const insertLink = () => {
-    setLinkModalOpen(true);
-  };
-  const insertPhoto = () => {
-    setImageModalOpen(true);
+  const handleAddLink = ({
+    name,
+    value
+  }) => {
+    handleCloseLinkModal();
+    try {
+      toggleAround(`[${name}`, `](${value})`);
+    } catch (error) {
+      console.error("error", error);
+    }
   };
   const bold = () => {
     toggleAround("**", "**");
+    handleToggleFormattingOptions();
   };
   const italicize = () => {
     toggleAround("*", "*");
+    handleToggleFormattingOptions();
   };
 
   // const insertTopic = () => {
@@ -810,7 +758,7 @@ function Editor({
 
   const specialCharacter = e => {
     const character = e.target.value;
-    addSpecialCharacter("", character);
+    toggleAround("", character);
   };
 
   // const handleTopicTrigger = (e) => {
@@ -1087,7 +1035,6 @@ function Editor({
       style: {
         zIndex: 1400
       },
-      transition: true,
       disablePortal: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Toolbar, {
@@ -1095,34 +1042,34 @@ function Editor({
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
             display: "flex",
             width: "100%",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-              title: t("undo_action"),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-                  color: "inherit",
-                  "aria-label": t("undo_action"),
-                  onClick: undo,
-                  disabled: !editor,
-                  size: "large",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Undo.default, {})
+            children: [isEditView && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                title: t("undo_action"),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+                    color: "inherit",
+                    "aria-label": t("undo_action"),
+                    onClick: undo,
+                    size: "large",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Undo.default, {})
+                  })
                 })
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-              title: t("redo_action"),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-                  color: "inherit",
-                  "aria-label": t("redo_action"),
-                  onClick: redo,
-                  disabled: !editor,
-                  size: "large",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Redo.default, {})
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                title: t("redo_action"),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+                    color: "inherit",
+                    "aria-label": t("redo_action"),
+                    onClick: redo,
+                    size: "large",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Redo.default, {})
+                  })
                 })
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
-              orientation: "vertical",
-              flexItem: true,
-              variant: "middle"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+                orientation: "vertical",
+                flexItem: true,
+                variant: "middle"
+              })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
               title: t("insert_bold"),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
@@ -1162,6 +1109,7 @@ function Editor({
             onClick: () => {
               handleChangeSimplified(true);
               setIsEditView(false);
+              setFormattingOptionsAnchorEl(null);
             },
             startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBack.default, {}),
             variant: "outlined",
@@ -1177,6 +1125,7 @@ function Editor({
               className: classes.formattingOptionsButton,
               size: "large",
               disabled: isDisabled && !isEditView,
+              onMouseDown: () => setIsButtonClicked(true),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFormat.default, {})
             })
           })
@@ -1385,7 +1334,7 @@ function Editor({
         t: t,
         open: linkModalOpen,
         onClose: handleCloseLinkModal,
-        handleAddLink: handleOpenLinkModal,
+        handleAddLink: handleAddLink,
         verificationStatus: verificationStatus
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SwitchEditorModal.default, {
         t: t,

package/dist/Forms/CreateClassroom/CreateClassroom.js

@@ -25,7 +25,8 @@ function CreateClassroom({
     isUpgradePossible: true
   },
   learnLang,
-  verificationStatus
+  verificationStatus,
+  isVideoChatEnabled
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiStepForm.default, {
     initialValues: {
@@ -50,7 +51,8 @@ function CreateClassroom({
     forLanguages: forLanguages,
     fileSizeLimit: fileSizeLimit,
     subscription: subscription,
-    verificationStatus: verificationStatus
+    verificationStatus: verificationStatus,
+    isVideoChatEnabled: isVideoChatEnabled
   });
 }
 CreateClassroom.propTypes = {};

package/dist/Forms/CreateClassroom/Steps/ClassroomSettings/ClassroomSettings.js

@@ -25,21 +25,17 @@ function ClassroomSettings({
   classroomId,
   isUpdateClassroom = false,
   scrollToDiscuss = false,
-  setScrollToDiscuss
+  setScrollToDiscuss,
+  isVideoChatEnabled
 }) {
   const {
     visibility,
     enrolmentKey,
     allowedDomains,
     collaborators,
-    vchatEnabledInSettings,
-    vchatEnabled
+    vchatEnabledInSettings
   } = values;
   const vchatEnabledInSettingsRef = (0, _react.useRef)(null);
-  const [isWaysideClassroom, setIsWaysideClassroom] = (0, _react.useState)(false);
-  if (!isWaysideClassroom && classroomId && classroomId.toLowerCase().includes("wayside")) {
-    setIsWaysideClassroom(true);
-  }
   const generateRandomEnrolmentKey = () => {
     return String(Math.floor(Math.random() * 90000) + 10000);
   };
@@ -236,7 +232,7 @@ function ClassroomSettings({
             fullWidth: true
           })]
         })]
-      }), isWaysideClassroom && vchatEnabled !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      }), isVideoChatEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
         item: true,
         xs: 12,
         md: 12,

package/dist/Forms/InputHelper/InputHelper.js

@@ -53,7 +53,7 @@ function Adornment(props) {
   const toggleEmojiPicker = () => setShowEmojiPicker(prev => !prev);
   const handleEmojiClose = () => setShowEmojiPicker(false);
   const onEmojiClick = event => {
-    const newText = [value.slice(0, activeRef.current.selectionStart), `${event.emoji}`, value.slice(activeRef.current.selectionStart)].join("");
+    const newText = activeRef ? [value.slice(0, activeRef.current.selectionStart), `${event.emoji}`, value.slice(activeRef.current.selectionStart)].join("") : event.emoji;
     onChange({
       target: {
         name: name,

package/dist/Forms/UpdateClassroom/UpdateClassroom.js

@@ -47,7 +47,8 @@ function UpdateClassroom({
   scrollToDiscuss,
   setScrollToDiscuss,
   isClassroomArchived = false,
-  verificationStatus
+  verificationStatus,
+  isVideoChatEnabled
 }) {
   const {
     classes
@@ -217,6 +218,7 @@ function UpdateClassroom({
                   values: values,
                   scrollToDiscuss: scrollToDiscuss,
                   setScrollToDiscuss: setScrollToDiscuss,
+                  isVideoChatEnabled: isVideoChatEnabled,
                   ...otherProps
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardActions, {

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -57,6 +57,7 @@ var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _ExitToApp = _interopRequireDefault(require("@mui/icons-material/ExitToApp"));
 var _AssignmentCardsList = _interopRequireDefault(require("../../../Assignments/AssignmentCardsList/AssignmentCardsList"));
 var _Lightbulb = _interopRequireDefault(require("@mui/icons-material/Lightbulb"));
+var _CreatorNotSubscribedUpgrade = _interopRequireDefault(require("../../../Dialogs/CreatorNotSubscribedUpgrade/CreatorNotSubscribedUpgrade"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -430,7 +431,9 @@ function Classroom({
     setSelectedDiscussion,
     meetingRecsData,
     hasBadLanguage,
-    handleArchiveSubmissions
+    handleArchiveSubmissions,
+    isVideoChatEnabled,
+    isVideoChatEnabledInSettings
   } = vchatProps;
   const isSmallScreen = (0, _useMediaQuery.default)("(max-width:410px)");
   const {
@@ -443,10 +446,19 @@ function Classroom({
   const [isPictureDialogOpen, setIsPictureDialogOpen] = (0, _react.useState)(false);
   const [overwriteValue, setOverwriteValue] = (0, _react.useState)(null);
   const [scrollToDiscuss, setScrollToDiscuss] = (0, _react.useState)(false);
-  const [isWaysideClassroom, setIsWaysideClassroom] = (0, _react.useState)(false);
-  const [isVideoChatEnabled, setIsVideoChatEnabled] = (0, _react.useState)(false);
-  const [isVideoChatEnabledInSettings, setIsVideoChatEnabledInSettings] = (0, _react.useState)(false);
+  const isWaysideClassroom = classroom?.classroomId?.toLowerCase().includes("wayside");
+  const [isSubscriptionExpired, setIsSubscriptionExpired] = (0, _react.useState)(false);
   let tabs;
+  (0, _react.useEffect)(() => {
+    if (creatorSubscription?.isPaidUser === false) {
+      setIsSubscriptionExpired(true);
+    }
+  }, [creatorSubscription]);
+  (0, _react.useEffect)(() => {
+    if (classroom && classroom.isCreator && creatorSubscription?.isPaidUser === false) {
+      handleOpenCreatorNotSubscribedUpgradeModal();
+    }
+  }, [creatorSubscription]);
   (0, _react.useEffect)(() => {
     const handleHashChange = () => {
       if (window.location.hash === "#Settings" && tabs) {
@@ -601,6 +613,13 @@ function Classroom({
   const handleCloseCreatorNotSubscribedModal = () => {
     setIsCreatorNotSubscribedOpen(false);
   };
+  const [isCreatorNotSubscribedUpgradeOpen, setIsCreatorNotSubscribedUpgradeOpen] = (0, _react.useState)(false);
+  const handleOpenCreatorNotSubscribedUpgradeModal = () => {
+    setIsCreatorNotSubscribedUpgradeOpen(true);
+  };
+  const handleCloseCreatorNotSubscribedUpgradeModal = () => {
+    setIsCreatorNotSubscribedUpgradeOpen(false);
+  };
   const [avatarOptionClicked, setAvatarOptionClicked] = (0, _react.useState)(false);
   if (!classroom) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -702,8 +721,6 @@ function Classroom({
     picture,
     pictureXs,
     isCreator,
-    vchatEnabled,
-    vchatEnabledInSettings,
     createdBy,
     userImage,
     verificationStatus,
@@ -727,6 +744,12 @@ function Classroom({
       handleSignIn();
     }
   };
+  const handleOpenUpgradePlans = () => {
+    navigate("/settings#Subscription");
+  };
+  const handleReturnToClassrooms = () => {
+    navigate("/classrooms");
+  };
   const removeCourse = async course => {
     const confirmed = await confirm(t("remove_course"), t("remove_course_confirmation"));
     if (confirmed) {
@@ -773,15 +796,6 @@ function Classroom({
     window.location.hash = "#Settings";
     setScrollToDiscuss(true);
   };
-  if (!isWaysideClassroom && classroomId && classroomId.toLowerCase().includes("wayside")) {
-    setIsWaysideClassroom(true);
-  }
-  if (!isVideoChatEnabled && (vchatEnabled === true || localStorage.getItem("vchat-enabled") === "true" || isCreator && vchatEnabled !== false || isMember && vchatEnabled !== false && vchatEnabledInSettings)) {
-    setIsVideoChatEnabled(true);
-  }
-  if (!isVideoChatEnabledInSettings && (isVideoChatEnabled && (vchatEnabledInSettings === true || vchatEnabled === true && isWaysideClassroom && vchatEnabledInSettings !== false) || localStorage.getItem("vchat-enabled") === "true")) {
-    setIsVideoChatEnabledInSettings(true);
-  }
   tabs = [{
     label: t("courses"),
     id: "Courses",
@@ -827,11 +841,15 @@ function Classroom({
         description: t("join_classroom_to_access"),
         buttonText: t("join"),
         onClick: handleJoin
+      }), isMember && isSubscriptionExpired && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.default, {
+        description: t("classroom_creator_subscription_expired"),
+        buttonText: t("return_to_classrooms"),
+        onClick: handleReturnToClassrooms
       })]
     }, `tab-content-courses`)
   }, {
     label: t("progress"),
-    disabled: !(isMember || isCreator),
+    disabled: !(isMember || isCreator) || isMember && isSubscriptionExpired,
     id: "Progress",
     TabContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       py: 1,
@@ -854,6 +872,7 @@ function Classroom({
     }, `tab-content-progress`)
   }, ...(process.env.REACT_APP_STAGE === "dev" ? [{
     label: t("assignments"),
+    disabled: isMember && isSubscriptionExpired,
     id: "Assignments",
     TabContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       py: 1,
@@ -877,7 +896,7 @@ function Classroom({
         refreshAssignments: refreshAssignments
       })
     }, `tab-content-assignments`)
-  }] : []), ...(isWaysideClassroom && isVideoChatEnabled && isNualangLiveEnabled && (isMember && isVideoChatEnabledInSettings || isCreator) ? [{
+  }] : []), ...(isVideoChatEnabled && isNualangLiveEnabled && (isMember && isVideoChatEnabledInSettings || isCreator) ? [{
     label: t("discuss"),
     id: "Discuss",
     disabled: false,
@@ -1054,7 +1073,8 @@ function Classroom({
         setScrollToDiscuss: setScrollToDiscuss,
         isClassroomArchived: isArchived,
         classroomMembers: classroomMembers,
-        verificationStatus: verificationStatus
+        verificationStatus: verificationStatus,
+        isVideoChatEnabled: isVideoChatEnabled
       })
     }, `tab-content-settings`)
   }] : [])];
@@ -1326,6 +1346,15 @@ function Classroom({
             t: t,
             open: isCreatorNotSubscribedOpen,
             handleClose: handleCloseCreatorNotSubscribedModal
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreatorNotSubscribedUpgrade.default, {
+            t: t,
+            open: isCreatorNotSubscribedUpgradeOpen,
+            handleClose: handleCloseCreatorNotSubscribedUpgradeModal,
+            submitText: t("upgrade"),
+            closeText: t("close"),
+            handleSubmit: handleOpenUpgradePlans,
+            dialogTitle: t("creator_not_subscribed_upgrade_title"),
+            descriptions: ["creator_not_subscribed_upgrade_description", "creator_not_subscribed_upgrade_description2", "creator_not_subscribed_upgrade_description3"]
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/utils/index.js

@@ -7,9 +7,9 @@ exports.formatCourseMemberCompletions = exports.downsampleBuffer = exports.domai
 exports.formatCurrency = formatCurrency;
 exports.formatNumberTotal = exports.formatMarkdownNewlines = exports.formatFileSize = void 0;
 exports.getBase64ImageFromUrl = getBase64ImageFromUrl;
-exports.localeCompareCase = exports.localeCompare = exports.jsonToRivescript = exports.getMicrophoneInfo = exports.getMachineInfo = exports.getBrowserInfo = void 0;
+exports.markdownLinkRegex = exports.markdownImageLinkRegex = exports.localeCompareCase = exports.localeCompare = exports.jsonToRivescript = exports.getMicrophoneInfo = exports.getMachineInfo = exports.getBrowserInfo = void 0;
 exports.moveDecimal = moveDecimal;
-exports.searchStringToObj = exports.rivescriptToJson = exports.replaceWordWithBlank = exports.removeSymbols = exports.removeExtraWhiteSpaces = exports.removeAllSymbolsFillInBlanks = exports.removeAllSymbols = exports.randomId = exports.propsAreEqual = exports.objToSearchString = void 0;
+exports.searchStringToObj = exports.rivescriptToJson = exports.replaceWordWithBlank = exports.removeSymbols = exports.removeExtraWhiteSpaces = exports.removeAllSymbolsFillInBlanks = exports.removeAllSymbols = exports.randomId = exports.propsAreEqual = exports.objToSearchString = exports.multipleOptionsRegex = void 0;
 exports.shuffle = shuffle;
 exports.validateDomain = exports.supportsAudioType = void 0;
 var _deepEqual = _interopRequireDefault(require("deep-equal"));
@@ -22,6 +22,9 @@ const capitalize = (text = "") => text.charAt(0).toUpperCase() + text.slice(1);
 exports.capitalize = capitalize;
 const convertToAlphanumeric = (str = "") => str.trim().replace(/[^a-zA-Z0-9 ]/g, "");
 exports.convertToAlphanumeric = convertToAlphanumeric;
+const markdownLinkRegex = exports.markdownLinkRegex = /\[(.*)\]\(([^ ]+?)( "(.+)")?\)/;
+const markdownImageLinkRegex = exports.markdownImageLinkRegex = /!\[(.*)\]\(([^ ]+?)( "(.+)")?\)/;
+const multipleOptionsRegex = exports.multipleOptionsRegex = /^\((.*)\)$/;
 const ranges = ["\ud83c[\udf00-\udfff]",
 // U+1F300 to U+1F3FF
 "\ud83d[\udc00-\ude4f]",

package/package.json

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