@nualang/nualang-ui-components 0.1.1395 → 0.1.1397

package/dist/Containers/App/App.js

@@ -27,6 +27,7 @@ import Add from "@mui/icons-material/Add";
 import ArrowBack from "@mui/icons-material/ArrowBack";
 import Close from "@mui/icons-material/Close";
 import UpgradeSubscription from "../../Dialogs/UpgradeSubscription/UpgradeSubscription";
+import QuickCreateClassroomDialog from "../../Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog";
 
 // nav config
 import navigationImport from "../../Navigation/_nav";
@@ -214,7 +215,13 @@ function App({
   gameAward,
   isCollapsed,
   setIsCollapsed,
-  isUserInternal
+  isUserInternal,
+  handleQuickCreateClassroom,
+  learnLang,
+  forLang,
+  fileSizeLimit,
+  languages,
+  forLanguages
 }) {
   const theme = useTheme();
   const isLgScreen = useMediaQuery(theme.breakpoints.up("md"));
@@ -222,6 +229,7 @@ function App({
   const [searchText, setSearchText] = useState("");
   const [isAppContainerLoading, setIsAppContainerLoading] = useState(true);
   const [anchorEl, setAnchorEl] = useState(null);
+  const [isCreateClassroomOpen, setIsCreateClassroomOpen] = useState(false);
   const [isUpgradeSubscriptionOpen, setIsUpgradeSubscriptionOpen] = useState(false);
   const [isMobileSearchExpanded, setIsMobileSearchExpanded] = useState(false);
   const handleOpenUpgradeSubscriptionModal = () => {
@@ -262,7 +270,7 @@ function App({
   };
   const handleCreateClassroom = () => {
     if (subscription.isPaidUser) {
-      navigate("/classrooms/create");
+      setIsCreateClassroomOpen(true);
     } else {
       handleOpenUpgradeSubscriptionModal();
     }
@@ -418,6 +426,20 @@ function App({
               children: t("assignment")
             })]
           })]
+        }), /*#__PURE__*/_jsx(QuickCreateClassroomDialog, {
+          open: isCreateClassroomOpen,
+          handleClose: () => setIsCreateClassroomOpen(false),
+          handleCreate: async values => {
+            await handleQuickCreateClassroom(values);
+          },
+          t: t,
+          fileSizeLimit: fileSizeLimit,
+          verificationStatus: verificationStatus,
+          learnLang: learnLang,
+          forLang: forLang,
+          languages: languages,
+          forLanguages: forLanguages,
+          userImage: user ? user.picture : null
         }), /*#__PURE__*/_jsx(LanguageSelector, {
           t: t,
           currentLanguage: currentLanguage,

package/dist/Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog.js

@@ -0,0 +1,200 @@
+import { useState, useEffect } from "react";
+import TextField from "@mui/material/TextField";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Grid from "@mui/material/Grid";
+import ImageSelector from "../../Forms/ImageSelector/ImageSelector";
+import PlaceholderImages from "../../utils/placeholder-images/index";
+import LanguageSelector from "../../Forms/LanguageSelector/LanguageSelector";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function QuickCreateClassroomDialog({
+  open,
+  handleClose,
+  handleCreate,
+  onCreated,
+  t = text => text,
+  fileSizeLimit,
+  verificationStatus,
+  learnLang,
+  userImage,
+  forLang,
+  languages,
+  forLanguages
+}) {
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const defaultSelectedImage = {
+    image: PlaceholderImages.classroom,
+    imageSelectionMethod: "default_image"
+  };
+  const [selectedImage, setSelectedImage] = useState(defaultSelectedImage);
+  const [picture, setPicture] = useState("");
+  const [classroomLearnLang, setClassroomLearnLang] = useState("");
+  const [classroomForLang, setClassroomForLang] = useState("");
+  useEffect(() => {
+    if (learnLang && classroomLearnLang === "") {
+      setClassroomLearnLang(learnLang);
+    }
+  }, [learnLang]);
+  useEffect(() => {
+    if (forLang && classroomForLang === "") {
+      setClassroomForLang(forLang);
+    }
+  }, [forLang]);
+  const handleImageSelection = event => {
+    const {
+      name,
+      value
+    } = event.target;
+    setSelectedImage(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    setPicture(value);
+  };
+  const removeImage = () => {
+    setSelectedImage(defaultSelectedImage);
+    setPicture("");
+  };
+  const generateRandomEnrolmentKey = () => {
+    return String(Math.floor(Math.random() * 90000) + 10000);
+  };
+  const handleSubmit = async () => {
+    if (!name.trim()) return;
+    setIsLoading(true);
+    try {
+      const createdClassroom = await handleCreate({
+        classroomName: name.trim(),
+        description: `${t("first_classroom_description", {
+          learnLang: t(classroomLearnLang)
+        })}`,
+        learnLang: classroomLearnLang,
+        forLang: classroomForLang,
+        visibility: "private",
+        vchatEnabled: true,
+        vchatEnabledInSettings: true,
+        isDynamicResponsesEnabled: "enabled",
+        enrolmentKey: generateRandomEnrolmentKey(),
+        allowedDomains: [],
+        collaborators: [],
+        tags: [],
+        picture: picture || PlaceholderImages.classroom,
+        userImage: userImage
+      });
+      resetAndClose();
+      if (onCreated && createdClassroom) {
+        onCreated(createdClassroom, selectedImage.image || null);
+      }
+    } catch (error) {
+      console.error("Failed to create classroom:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const resetAndClose = () => {
+    setName("");
+    setSelectedImage(defaultSelectedImage);
+    setPicture("");
+    setClassroomLearnLang(learnLang || "");
+    setClassroomForLang(forLang || "");
+    handleClose();
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: open,
+    onClose: isLoading ? undefined : resetAndClose,
+    maxWidth: "sm",
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsx(DialogTitle, {
+      children: t("create_classroom") || "Create Classroom"
+    }), /*#__PURE__*/_jsx(DialogContent, {
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        pt: 1,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          label: t("classroom_name") || "Classroom Name",
+          value: name,
+          onChange: e => setName(e.target.value),
+          fullWidth: true,
+          autoFocus: true,
+          required: true,
+          disabled: isLoading,
+          inputProps: {
+            maxLength: 100
+          },
+          onKeyDown: e => e.key === "Enter" && handleSubmit()
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(LanguageSelector, {
+            id: "learnLang",
+            name: "learnLang",
+            "data-cy": "learnLang",
+            label: t("the_language_classroom_teach"),
+            margin: "normal",
+            variant: "outlined",
+            fullWidth: true,
+            required: true,
+            t: t,
+            languages: languages,
+            value: classroomLearnLang,
+            disabled: isLoading,
+            onChange: e => {
+              setClassroomLearnLang(e.target.value);
+            }
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(LanguageSelector, {
+            id: "forLang",
+            name: "forLang",
+            "data-cy": "forLang",
+            label: t("the_language_students_classroom_speak"),
+            margin: "normal",
+            variant: "outlined",
+            fullWidth: true,
+            required: true,
+            t: t,
+            languages: forLanguages,
+            value: classroomForLang,
+            disabled: isLoading,
+            onChange: e => {
+              setClassroomForLang(e.target.value);
+            }
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(ImageSelector, {
+            t: t,
+            name: "image",
+            value: selectedImage.image,
+            handleChange: handleImageSelection,
+            fileSizeLimit: fileSizeLimit,
+            removeImage: removeImage,
+            autoCrop: true,
+            autoSuggest: false,
+            selectedImage: selectedImage,
+            verificationStatus: verificationStatus
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: resetAndClose,
+        color: "primary",
+        disabled: isLoading,
+        children: t("cancel") || "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSubmit,
+        color: "primary",
+        variant: "contained",
+        disabled: !name.trim() || isLoading,
+        children: t("create") || "Create"
+      })]
+    })]
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1395",
+  "version": "0.1.1397",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -174,7 +174,7 @@
     "postinstall": "patch-package",
     "start": "pnpm run storybook",
     "vitest": "vitest",
-    "vitest:cicd": "cross-env CI=true vitest run",
+    "vitest:cicd": "cross-env CI=true vitest -- run --slient --threads 4",
     "test:coverage": "vitest run --coverage",
     "storybook": "storybook dev -p 9009",
     "build-storybook": "storybook build",