@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Forms/CreateMeetingMultiStepForm/MeetingForm.js

@@ -1,501 +0,0 @@
-/* eslint-disable react/prop-types */
-// eslint-disable-next-line no-unused-vars
-import { useState, useEffect } from "react";
-import { Skeleton, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Button, useTheme, useMediaQuery } from "@mui/material";
-import dayjs from "dayjs";
-import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
-import ImageSelector from "../DiscussImageSelector/ImageSelector";
-import PreviewCard from "../../Cards/PreviewCard/PreviewCard";
-import IconButton from "@mui/material/IconButton";
-import InfoIcon from "@mui/icons-material/Info";
-import Tooltip from "@mui/material/Tooltip";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import GenerateDiscussionDialog from "../../Dialogs/GenerateDiscussion/GenerateDiscussion";
-import PropTypes from "prop-types";
-// MeetingForm component for discussion creation
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function MeetingForm({
-  values = {},
-  errors,
-  touched,
-  handleChange = () => {},
-  handleBlur,
-  t = text => text,
-  makeChatGptApiRequest,
-  learnLang,
-  forLang,
-  siteLanguage,
-  courses,
-  getCourseSections,
-  courseSectionTopicId,
-  createDiscussion,
-  username
-}) {
-  const {
-    meetingPrompt,
-    recordTimeLimit,
-    meetingTopic,
-    editBackgroundImages,
-    editMeetingImages,
-    meetingLink,
-    backgroundImages = [],
-    meetingImages = [],
-    meetingTime,
-    meetingDate,
-    level
-  } = values;
-  const [initialBackgroundImages, setInitialBackgroundImages] = useState([]);
-  const [initialMeetingImages, setInitialMeetingImages] = useState([]);
-  const [openDialog, setOpenDialog] = useState(false);
-  const handleOpenDialog = () => setOpenDialog(true);
-  const handleCloseDialog = () => setOpenDialog(false);
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const initialValues = {
-    discussionTopic: meetingTopic || ""
-  };
-  const LEVEL_OPTIONS = [{
-    value: 1,
-    label: "Level 1 (Novice Low - Intermediate Low)"
-  }, {
-    value: 2,
-    label: "Level 2 (Novice Mid - Intermediate Mid)"
-  }, {
-    value: 3,
-    label: "Level 3 (Novice High - Intermediate High)"
-  }, {
-    value: 4,
-    label: "Level 4 (Intermediate Mid - Advanced Low)"
-  }];
-  useEffect(() => {
-    if (createDiscussion && courseSectionTopicId) {
-      handleOpenDialog();
-    }
-  }, [createDiscussion, courseSectionTopicId]);
-  useEffect(() => {
-    if (backgroundImages.length !== 0) {
-      setInitialBackgroundImages(backgroundImages);
-    } else if (initialBackgroundImages.length === 0) {
-      setInitialBackgroundImages(editBackgroundImages);
-    }
-    if (meetingImages.length !== 0) {
-      setInitialMeetingImages(meetingImages);
-    } else if (initialMeetingImages.length === 0) {
-      setInitialMeetingImages(editMeetingImages);
-    }
-  }, [editMeetingImages, editBackgroundImages]);
-  const onChange = event => {
-    handleChange({
-      target: {
-        name: "recordTimeLimit",
-        value: event.target.value
-      }
-    });
-  };
-  const handlePromptChange = event => {
-    handleChange({
-      target: {
-        name: "meetingPrompt",
-        value: event.target.value
-      }
-    });
-  };
-  const handleTopicChange = event => {
-    handleChange({
-      target: {
-        name: "meetingTopic",
-        value: event.target.value
-      }
-    });
-  };
-  const handleLinkChange = event => {
-    handleChange({
-      target: {
-        name: "meetingLink",
-        value: event.target.value
-      }
-    });
-  };
-  useEffect(() => {
-    if (!level) {
-      handleChange({
-        target: {
-          name: "level",
-          value: LEVEL_OPTIONS[0].value
-        }
-      });
-    }
-  }, [level]);
-  useEffect(() => {
-    // Initialize date/time if not set or invalid
-    const currentDateTime = dayjs();
-    const defaultDateTime = currentDateTime.add(1, "day");
-    const isDateValid = meetingDate && dayjs(meetingDate, "MM/DD/YYYY", true).isValid();
-    const isTimeValid = meetingTime && dayjs(meetingTime, "h:mm A", true).isValid();
-    if (!isDateValid) {
-      handleChange({
-        target: {
-          name: "meetingDate",
-          value: defaultDateTime.format("MM/DD/YYYY")
-        }
-      });
-    }
-    if (!isTimeValid) {
-      handleChange({
-        target: {
-          name: "meetingTime",
-          value: defaultDateTime.format("h:mm A")
-        }
-      });
-    }
-  }, [meetingDate, meetingTime]);
-
-  // Update the dateTimePlaceholder calculation
-  const dateTimePlaceholder = (() => {
-    if (meetingTime && meetingDate) {
-      const parsed = dayjs(`${meetingDate} ${meetingTime}`, "MM/DD/YYYY h:mm A", true);
-      if (parsed.isValid()) {
-        return parsed;
-      }
-    }
-    return dayjs().add(1, "day");
-  })();
-  return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
-    sx: {
-      width: "100%"
-    },
-    spacing: 2,
-    children: [/*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          md: 12
-        },
-        children: meetingTopic !== t("unknown") ? /*#__PURE__*/_jsxs("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "8px"
-          },
-          children: [/*#__PURE__*/_jsx(TextField, {
-            autoFocus: true,
-            id: "meetingTopic",
-            "data-cy": "meetingTopic",
-            name: "meetingTopic",
-            label: t("add_a_discussion_topic"),
-            value: meetingTopic ? meetingTopic : "",
-            onChange: handleTopicChange,
-            onBlur: handleBlur,
-            helperText: touched.meetingTopic ? errors.meetingTopic : "",
-            error: touched.meetingTopic && Boolean(errors.meetingTopic),
-            type: "string",
-            variant: "outlined"
-            // disabled
-            ,
-            fullWidth: true,
-            required: true,
-            slotProps: {
-              inputLabel: {
-                shrink: true
-              }
-            }
-          }), isSmallScreen ? /*#__PURE__*/_jsx(Tooltip, {
-            title: t("generate_discussion"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              color: "success",
-              onClick: handleOpenDialog,
-              disabled: !meetingTopic,
-              sx: {
-                bgcolor: "success.main",
-                color: "white",
-                "&:hover": {
-                  bgcolor: "success.dark"
-                },
-                "&.Mui-disabled": {
-                  bgcolor: "action.disabledBackground"
-                }
-              },
-              children: /*#__PURE__*/_jsx(AutoFixHighIcon, {})
-            })
-          }) : /*#__PURE__*/_jsx(Button, {
-            variant: "contained",
-            color: "success",
-            startIcon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
-            size: "large",
-            onClick: handleOpenDialog,
-            disabled: !meetingTopic,
-            sx: {
-              whiteSpace: "nowrap",
-              minWidth: "250px"
-            },
-            children: t("generate_discussion")
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 50,
-            width: "50%"
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 30
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          md: 12
-        },
-        children: meetingPrompt !== t("unknown") ? /*#__PURE__*/_jsx(TextField, {
-          id: "meetingPrompt",
-          name: "meetingPrompt",
-          minRows: 5,
-          maxRows: 5,
-          multiline: true,
-          label: t("add_a_discussion_prompt"),
-          value: meetingPrompt,
-          onChange: handlePromptChange,
-          onBlur: handleBlur,
-          helperText: touched.meetingPrompt ? errors.meetingPrompt : "",
-          error: touched.meetingPrompt && Boolean(errors.meetingPrompt),
-          type: "string",
-          variant: "outlined"
-          // disabled
-          ,
-          fullWidth: true,
-          required: true,
-          sx: {
-            "& .MuiInputBase-root": {
-              overflow: "auto"
-            },
-            "& textarea": {
-              scrollbarWidth: "thin"
-            }
-          },
-          slotProps: {
-            inputLabel: {
-              shrink: true
-            }
-          }
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 50,
-            width: "50%"
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 30
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          md: 12
-        },
-        children: /*#__PURE__*/_jsxs(FormControl, {
-          fullWidth: true,
-          variant: "outlined",
-          children: [/*#__PURE__*/_jsx(InputLabel, {
-            id: "level-label",
-            children: t("level")
-          }), /*#__PURE__*/_jsx(Select, {
-            labelId: "level-label",
-            id: "level",
-            name: "level",
-            value: level ?? LEVEL_OPTIONS[0].value,
-            label: t("level"),
-            onChange: e => handleChange({
-              target: {
-                name: "level",
-                value: e.target.value
-              }
-            }),
-            children: LEVEL_OPTIONS.map(option => /*#__PURE__*/_jsx(MenuItem, {
-              value: option.value,
-              children: option.label
-            }, option.value))
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(Grid, {
-        size: {
-          xs: 12,
-          md: 6
-        },
-        children: [/*#__PURE__*/_jsxs("div", {
-          style: {
-            display: "flex",
-            flexDirection: "row"
-          },
-          children: [/*#__PURE__*/_jsx("h3", {
-            children: t("background_images")
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("images_that_students_can_use_as_a_background_during_the_call"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              "aria-label": `info: ${t("images_that_students_can_use_as_a_background_during_the_call")}`,
-              size: "small",
-              children: /*#__PURE__*/_jsx(InfoIcon, {
-                fontSize: "inherit"
-              })
-            })
-          })]
-        }), /*#__PURE__*/_jsx(ImageSelector, {
-          t: t,
-          name: "backgroundImages",
-          value: backgroundImages,
-          handleChange: handleChange,
-          fileSizeLimit: 5000000,
-          initialImages: initialBackgroundImages,
-          previewComponent: PreviewCard
-        })]
-      }), /*#__PURE__*/_jsxs(Grid, {
-        size: {
-          xs: 12,
-          md: 6
-        },
-        children: [/*#__PURE__*/_jsxs("div", {
-          style: {
-            display: "flex",
-            flexDirection: "row"
-          },
-          children: [/*#__PURE__*/_jsx("h3", {
-            children: t("discussion_images")
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("images_for_students_to_discuss_during_the_call"),
-            children: /*#__PURE__*/_jsx(IconButton, {
-              "aria-label": `info: ${t("images_for_students_to_discuss_during_the_call")}`,
-              size: "small",
-              children: /*#__PURE__*/_jsx(InfoIcon, {
-                fontSize: "inherit"
-              })
-            })
-          })]
-        }), /*#__PURE__*/_jsx(ImageSelector, {
-          t: t,
-          name: "meetingImages",
-          value: meetingImages,
-          handleChange: handleChange,
-          fileSizeLimit: 5000000,
-          initialImages: initialMeetingImages,
-          previewComponent: PreviewCard
-        })]
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          md: 6
-        },
-        children: recordTimeLimit !== t("unknown") ? /*#__PURE__*/_jsxs(FormControl, {
-          required: true,
-          fullWidth: true,
-          sx: {
-            marginTop: "8px"
-          },
-          children: [/*#__PURE__*/_jsx(InputLabel, {
-            id: "demo-simple-select-label",
-            children: t("recording_time")
-          }), /*#__PURE__*/_jsxs(Select, {
-            labelId: "demo-simple-select-label",
-            id: "demo-simple-select",
-            value: recordTimeLimit,
-            label: t("record_time_limit"),
-            onChange: onChange,
-            children: [/*#__PURE__*/_jsxs(MenuItem, {
-              value: 1,
-              children: ["1 ", t("minute")]
-            }), /*#__PURE__*/_jsxs(MenuItem, {
-              value: 2,
-              children: ["2 ", t("minute")]
-            }), /*#__PURE__*/_jsxs(MenuItem, {
-              value: 3,
-              children: ["3 ", t("minute")]
-            })]
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 50,
-            width: "50%"
-          }), /*#__PURE__*/_jsx(Skeleton, {
-            variant: "text",
-            height: 30
-          })]
-        })
-      }), /*#__PURE__*/_jsx(Grid, {
-        size: {
-          xs: 12,
-          md: 6
-        },
-        children: /*#__PURE__*/_jsx(LocalizationProvider, {
-          dateAdapter: AdapterDayjs,
-          children: /*#__PURE__*/_jsx(DemoContainer, {
-            components: ["DateTimePicker", "DateTimePicker"],
-            children: /*#__PURE__*/_jsx(DateTimePicker, {
-              label: t("due_date"),
-              value: dateTimePlaceholder,
-              onChange: newValue => {
-                const datePickerValue = dayjs(newValue);
-                handleChange({
-                  target: {
-                    name: "meetingDate",
-                    value: datePickerValue.format("MM/DD/YYYY")
-                  }
-                });
-                handleChange({
-                  target: {
-                    name: "meetingTime",
-                    value: datePickerValue.format("h:mm A")
-                  }
-                });
-              }
-            })
-          })
-        })
-      })]
-    }), /*#__PURE__*/_jsx(GenerateDiscussionDialog, {
-      isGenerateDiscussionDialogOpen: openDialog,
-      handleClose: handleCloseDialog,
-      t: t,
-      initialValues: initialValues,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      learnLang: learnLang,
-      forLang: forLang,
-      setDiscussionPrompt: val => handleChange({
-        target: {
-          name: "meetingPrompt",
-          value: val
-        }
-      }),
-      setMeetingTopic: val => handleChange({
-        target: {
-          name: "meetingTopic",
-          value: val
-        }
-      }),
-      level: level ?? LEVEL_OPTIONS[0].value,
-      siteLanguage: siteLanguage,
-      meetingTopic: meetingTopic,
-      courses: courses,
-      getCourseSections: getCourseSections,
-      courseSectionTopicId: courseSectionTopicId,
-      createDiscussion: createDiscussion,
-      handleChange: handleChange,
-      username: username
-    })]
-  });
-}
-MeetingForm.propTypes = {
-  values: PropTypes.object,
-  errors: PropTypes.object,
-  touched: PropTypes.object,
-  handleChange: PropTypes.func,
-  handleBlur: PropTypes.func,
-  t: PropTypes.func,
-  makeChatGptApiRequest: PropTypes.func.isRequired,
-  learnLang: PropTypes.string.isRequired,
-  forLang: PropTypes.string.isRequired,
-  siteLanguage: PropTypes.string.isRequired
-};
-MeetingForm.label = "Discussion Information";
-export default MeetingForm;