@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Dialogs/InviteDialog/InviteDialog.js

@@ -1,695 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import DialogContentText from "@mui/material/DialogContentText";
-import { List, ListItem, ListItemButton, ListItemAvatar, ListItemText, Avatar, Box, Button, Divider, IconButton, Tab, Tabs, Typography } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import { styled } from "@mui/system";
-import { Facebook, Twitter } from "react-feather";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import CopyIcon from "@mui/icons-material/FileCopy";
-import MailOutlineTwoToneIcon from "@mui/icons-material/MailOutlineTwoTone";
-import GoogleClassroomIcon from "../../img/google-classroom.svg";
-import NualangLogoPrimary from "../../img/nualang-logo-primary.svg";
-import ImageIcon from "@mui/icons-material/Image";
-
-// components
-import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import QrCodeIcon from "@mui/icons-material/QrCode";
-import { QRCode } from "react-qrcode-logo";
-import nualangImage from "../../img/nualangSquareIcon.svg";
-import { useTheme } from "@mui/material/styles";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  facebook: {
-    backgroundColor: "#3b5999"
-  },
-  twitter: {
-    backgroundColor: "#55acee"
-  },
-  linkedin: {
-    backgroundColor: "#0077B5"
-  },
-  classroom: {
-    backgroundColor: "#f4b400"
-  }
-});
-const NualangLogo = styled("img")(() => ({
-  height: "17px",
-  position: "relative",
-  bottom: "-6px",
-  marginRight: "2px"
-}));
-function InviteDialog({
-  t = text => text,
-  open,
-  handleClose,
-  inviteLink,
-  enrolmentKey,
-  inviteType,
-  attributes,
-  trackRecommendedEvent = () => {},
-  itemId,
-  teachClassrooms = [],
-  learnLang,
-  addCourseToClassroom = () => {},
-  isWaysideClassroom
-}) {
-  const theme = useTheme();
-  const {
-    classes
-  } = useStyles();
-  const [, setCopied] = useState(false);
-  const [studentInstructionsCopied, setStudentInstructionsCopied] = useState(false);
-  const [googleClassroomLink, setGoogleClassroomLink] = useState("");
-  const [facebookLink, setFacebookLink] = useState("");
-  const [twitterLink, setTwitterLink] = useState("");
-  const [tabValue, setTabValue] = useState(0);
-  const [selectedClassroomId, setSelectedClassroomId] = useState(null);
-  const [inviteTypeState, setInviteStateType] = useState(inviteType);
-  const [inviteLinkState, setInviteLinkState] = useState(inviteLink);
-  const [classroomEnrolmentKey, setClassroomEnrolmentKey] = useState(inviteType === "classroom" ? enrolmentKey : null);
-  const [teachClassroomsState, setTeachClassroomsState] = useState(teachClassrooms);
-  const [showQRCode, setShowQRCode] = useState(false);
-  const shareEventParams = {
-    method: null,
-    content_type: inviteTypeState,
-    item_id: itemId
-  };
-  useEffect(() => {
-    if (selectedClassroomId) {
-      const classroom = teachClassroomsState.find(classroom => classroom.classroomId === selectedClassroomId);
-      setClassroomEnrolmentKey(classroom.enrolmentKey);
-    }
-  }, [selectedClassroomId, teachClassroomsState, itemId]);
-  useEffect(() => {
-    if (inviteType === "classroom") {
-      setInviteLinkState(inviteLink);
-    } else if (inviteTypeState === "classroom") {
-      setInviteLinkState(`${window.location.origin}/classrooms/${selectedClassroomId}?plan=learn&learnlang=${learnLang}`);
-    } else {
-      setInviteLinkState(`${window.location.origin}/courses/${itemId}?plan=learn&learnlang=${learnLang}`);
-    }
-  }, [inviteTypeState, itemId, learnLang, selectedClassroomId, teachClassroomsState, inviteLink, inviteType]);
-  const studentInstructions = useCallback(() => {
-    const inviteLinkText = `${t("invite_link_desc")}%0D%0A${encodeURIComponent(inviteLinkState)}%0D%0A%0D%0A \n\n`;
-    if (enrolmentKey) {
-      if (inviteTypeState === "course") {
-        const enrollmentKeyText = `${t("join_instructions_1")}${t("course").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}\n${enrolmentKey}\n`;
-        return `${inviteLinkText}${enrollmentKeyText}`;
-      } else {
-        const joinText = `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}\n${classroomEnrolmentKey}\n`;
-        return `${inviteLinkText}${joinText}`;
-      }
-    } else {
-      if (inviteTypeState === "course") {
-        const joinCourseText = `${t("join_instructions_1")}${t("course").toLowerCase()} ${t("join_instructions_2")}.\n`;
-        return `${inviteLinkText}${joinCourseText}`;
-      } else {
-        const joinClassroomText = `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")}.\n`;
-        return `${inviteLinkText}${joinClassroomText}`;
-      }
-    }
-  }, [inviteLinkState, enrolmentKey, inviteTypeState, classroomEnrolmentKey, t]);
-  const nonEncodedStudentInstructions = useCallback(() => {
-    const inviteLinkText = `${t("invite_link_desc")}\n${inviteLinkState}\n\n \n\n`;
-    if (enrolmentKey) {
-      if (inviteTypeState === "course") {
-        const enrollmentKeyText = `${t("join_instructions_1")}${t("course").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}\n${enrolmentKey}\n`;
-        return `${inviteLinkText}${enrollmentKeyText}`;
-      } else {
-        const joinText = `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}\n${classroomEnrolmentKey}\n`;
-        return `${inviteLinkText}${joinText}`;
-      }
-    } else {
-      if (inviteTypeState === "course") {
-        const joinCourseText = `${t("join_instructions_1")}${t("course").toLowerCase()} ${t("join_instructions_2")}.\n`;
-        return `${inviteLinkText}${joinCourseText}`;
-      } else {
-        const joinClassroomText = `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")}.\n`;
-        return `${inviteLinkText}${joinClassroomText}`;
-      }
-    }
-  }, [inviteLinkState, enrolmentKey, inviteTypeState, classroomEnrolmentKey, t]);
-  const studentInstructionsEmailBody = () => {
-    const emailOpening = `${t("dear_students")}%0D%0A%0D%0A`;
-    const emailClosing = `${attributes.preferred_username}%0D%0A`;
-    const inviteLinkText = `${t("invite_link_desc")}%0D%0A${encodeURIComponent(inviteLinkState)}%0D%0A%0D%0A`;
-    if (enrolmentKey) {
-      if (inviteTypeState === "course") {
-        const enrollmentKeyText = `${t("join_instructions_1")}${t("course").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}%0D%0A${enrolmentKey}%0D%0A%0D%0A`;
-        return `${emailOpening}${inviteLinkText}${enrollmentKeyText}${emailClosing}`;
-      } else {
-        const joinText = `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}%0D%0A${classroomEnrolmentKey}%0D%0A%0D%0A`;
-        return `${emailOpening}${inviteLinkText}${joinText}${emailClosing}`;
-      }
-    } else {
-      if (inviteTypeState === "course") {
-        const joinCourseText = `${t("join_instructions_1")}${t("course").toLowerCase()} ${t("join_instructions_2")}.%0D%0A%0D%0A`;
-        return `${emailOpening}${inviteLinkText}${joinCourseText}${emailClosing}`;
-      } else {
-        const joinClassroomText = `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")}.%0D%0A%0D%0A`;
-        return `${emailOpening}${inviteLinkText}${joinClassroomText}${emailClosing}`;
-      }
-    }
-  };
-  const handleChangeTab = (event, newValue) => {
-    setTabValue(newValue);
-  };
-  const toggleQRCodeDisplay = () => {
-    setShowQRCode(!showQRCode);
-  };
-  const tabs = [{
-    label: t("classrooms")
-  }, {
-    label: t("course")
-  }];
-  useEffect(() => {
-    if (inviteLinkState) {
-      setFacebookLink(`https://www.facebook.com/sharer.php?quote=${encodeURI(studentInstructions())}`);
-      setTwitterLink(`https://twitter.com/intent/tweet?text=${encodeURI(studentInstructions())}`);
-      setGoogleClassroomLink(`https://classroom.google.com/share?url=${inviteLinkState}`);
-    }
-  }, [inviteLinkState, studentInstructions]);
-  function openWindow(url) {
-    if (url === googleClassroomLink) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "GoogleClassroom"
-      });
-    } else if (url === facebookLink) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "Facebook"
-      });
-    } else if (url === twitterLink) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "Twitter"
-      });
-    } else if (url.startsWith("mailto")) {
-      trackRecommendedEvent("share", {
-        ...shareEventParams,
-        method: "Email"
-      });
-    }
-    window.open(url);
-  }
-  const learningSiteURL = import.meta.env.REACT_APP_WAYSIDE_LEARNING_SITE_URL || "https://learningsite.waysidepublishing.com/";
-  return /*#__PURE__*/_jsx(ResponsiveDialog, {
-    open: open,
-    handleClose: handleClose,
-    dialogTitle: t("Invite Students"),
-    handleSubmit: isWaysideClassroom ? () => {
-      window.open(learningSiteURL, "wayside-window");
-    } : null,
-    submitText: isWaysideClassroom ? t("Visit Learning Site") : null,
-    children: isWaysideClassroom ? /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsxs(DialogContentText, {
-        sx: {
-          mb: 1
-        },
-        children: ["Students join this ", inviteType, " automatically when they click", " ", /*#__PURE__*/_jsxs(Typography, {
-          component: "b",
-          color: "primary",
-          sx: {
-            fontWeight: "bold"
-          },
-          children: ["Go to ", /*#__PURE__*/_jsx(NualangLogo, {
-            src: NualangLogoPrimary
-          }), " classroom"]
-        }), " ", "via the ", /*#__PURE__*/_jsx("b", {
-          children: "Learning Site"
-        }), "."]
-      })
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [teachClassroomsState.length > 0 && /*#__PURE__*/_jsx(Tabs, {
-        value: tabValue,
-        onChange: handleChangeTab,
-        sx: {
-          pb: 2
-        },
-        children: tabs.map(({
-          label,
-          disabled,
-          hidden
-        }, i) => {
-          const keyId = `inviteDialog_${i}}`;
-          return !hidden ? /*#__PURE__*/_jsx(Tab, {
-            id: keyId,
-            label: label,
-            disabled: disabled,
-            onClick: () => {
-              label === "Classrooms" ? setInviteStateType("classroom") : setInviteStateType("course");
-            }
-          }, keyId) : null;
-        })
-      }), tabValue === 0 && teachClassroomsState.length > 0 ? selectedClassroomId ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(DialogContentText, {
-          children: t("share_student_link_desc")
-        }), /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => {
-            setSelectedClassroomId(null);
-          },
-          children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: theme => ({
-            marginTop: 1,
-            borderRadius: "20px",
-            backgroundColor: theme.palette.mode === "dark" ? "#3b3a3a" : "#E7E7E7"
-          }),
-          children: /*#__PURE__*/_jsxs(List, {
-            children: [/*#__PURE__*/_jsx(ListItem, {
-              secondaryAction: /*#__PURE__*/_jsx(CopyToClipboard, {
-                text: nonEncodedStudentInstructions(),
-                onCopy: () => {
-                  setCopied(true);
-                  trackRecommendedEvent("share", {
-                    ...shareEventParams,
-                    method: "CopyToClipboard"
-                  });
-                },
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  "aria-label": "copy",
-                  children: /*#__PURE__*/_jsx(CopyIcon, {})
-                })
-              }),
-              children: /*#__PURE__*/_jsx(ListItemText, {
-                primary: t("invite_link_desc"),
-                secondary: inviteLinkState
-              })
-            }), classroomEnrolmentKey ? /*#__PURE__*/_jsx(ListItem, {
-              secondaryAction: /*#__PURE__*/_jsx(CopyToClipboard, {
-                text: classroomEnrolmentKey,
-                onCopy: () => {
-                  setCopied(true);
-                  trackRecommendedEvent("share", {
-                    ...shareEventParams,
-                    method: "CopyToClipboard"
-                  });
-                },
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  "aria-label": "copy",
-                  children: /*#__PURE__*/_jsx(CopyIcon, {})
-                })
-              }),
-              children: /*#__PURE__*/_jsx(ListItemText, {
-                primary: `${t("join_instructions_1")} ${t("classroom").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}`,
-                secondary: classroomEnrolmentKey,
-                slotProps: {
-                  secondary: {
-                    fontWeight: "bold"
-                  }
-                }
-              })
-            }) : /*#__PURE__*/_jsx(ListItem, {
-              children: /*#__PURE__*/_jsx(ListItemText, {
-                primary: `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")}.`
-              })
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          children: /*#__PURE__*/_jsx(CopyToClipboard, {
-            text: nonEncodedStudentInstructions(),
-            onCopy: () => {
-              setStudentInstructionsCopied(true);
-              trackRecommendedEvent("share", {
-                ...shareEventParams,
-                method: "CopyToClipboard"
-              });
-            },
-            children: /*#__PURE__*/_jsx(Button, {
-              color: "primary",
-              variant: "contained",
-              sx: {
-                marginTop: 2,
-                marginBottom: 2
-              },
-              startIcon: /*#__PURE__*/_jsx(CopyIcon, {}),
-              children: studentInstructionsCopied ? t("copied") : t("copy_student_instructions")
-            })
-          })
-        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            borderRadius: "20px"
-          },
-          children: /*#__PURE__*/_jsxs(List, {
-            children: [/*#__PURE__*/_jsx(DialogContentText, {
-              children: t("or_invite_via")
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: toggleQRCodeDisplay,
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  children: /*#__PURE__*/_jsx(QrCodeIcon, {
-                    sx: {
-                      fontSize: "xx-large"
-                    }
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "QR Code"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(`mailto:?subject=${t("invite_email_subject")} ${inviteTypeState.toLowerCase()}&body=${studentInstructionsEmailBody()}`),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  children: /*#__PURE__*/_jsx(MailOutlineTwoToneIcon, {
-                    sx: {
-                      fontSize: "xx-large"
-                    }
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Email"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(googleClassroomLink),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  className: classes.classroom,
-                  children: /*#__PURE__*/_jsx("img", {
-                    src: GoogleClassroomIcon,
-                    alt: ""
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Google Classroom"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(facebookLink),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  className: classes.facebook,
-                  children: /*#__PURE__*/_jsx(Facebook, {
-                    color: "#fff",
-                    fill: "#fff"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Facebook"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(twitterLink),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  className: classes.twitter,
-                  children: /*#__PURE__*/_jsx(Twitter, {
-                    color: "#fff",
-                    fill: "#fff"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Twitter"
-              })]
-            }), /*#__PURE__*/_jsxs(ResponsiveDialog, {
-              open: showQRCode,
-              handleClose: toggleQRCodeDisplay,
-              maxWidth: "md",
-              fullWidth: true,
-              sx: {
-                "& .MuiDialog-paper": {
-                  width: "50%",
-                  maxHeight: "80%"
-                }
-              },
-              children: [/*#__PURE__*/_jsx(DialogTitle, {
-                children: "QR Code "
-              }), /*#__PURE__*/_jsx(DialogContent, {
-                dividers: true,
-                children: /*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: "100%"
-                  },
-                  children: /*#__PURE__*/_jsx(QRCode, {
-                    value: inviteLinkState,
-                    size: 384,
-                    fgColor: theme.palette.primary.main,
-                    bgColor: theme.palette.background.paper,
-                    logoImage: nualangImage,
-                    logoHeight: 90,
-                    logoWidth: 90,
-                    qrStyle: "dots"
-                  })
-                })
-              })]
-            })]
-          })
-        })]
-      }) : /*#__PURE__*/_jsxs(List, {
-        children: [/*#__PURE__*/_jsx(DialogContentText, {
-          children: t("select_a_classroom")
-        }), teachClassroomsState.map((c, i) => {
-          const {
-            classroomId,
-            classroomName,
-            description,
-            picture,
-            courses
-          } = c;
-          return /*#__PURE__*/_jsxs(ListItemButton, {
-            onClick: async () => {
-              if (courses && Array.isArray(courses) && courses.includes(itemId)) {
-                setInviteStateType("classroom");
-                setSelectedClassroomId(classroomId);
-              }
-            },
-            children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-              children: picture ? /*#__PURE__*/_jsx(Avatar, {
-                src: picture,
-                alt: ""
-              }) : /*#__PURE__*/_jsx(Avatar, {
-                alt: "",
-                children: /*#__PURE__*/_jsx(ImageIcon, {})
-              })
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: classroomName,
-              secondary: description
-            }), !(courses || []).includes(itemId) ? /*#__PURE__*/_jsx(Button, {
-              onClick: () => {
-                addCourseToClassroom([classroomId]);
-                const newClassrooms = [...teachClassroomsState];
-                newClassrooms[i].courses = [...newClassrooms[i].courses, itemId];
-                setTeachClassroomsState(newClassrooms);
-              },
-              children: t("add_course")
-            }) : null]
-          }, `${classroomId}`);
-        })]
-      }) : null, tabValue === 1 || teachClassroomsState.length === 0 ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(DialogContentText, {
-          children: t("share_student_link_desc")
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: theme => ({
-            marginTop: 1,
-            borderRadius: "20px",
-            backgroundColor: theme.palette.mode === "dark" ? "#3b3a3a" : "#E7E7E7"
-          }),
-          children: /*#__PURE__*/_jsxs(List, {
-            children: [/*#__PURE__*/_jsx(ListItem, {
-              secondaryAction: /*#__PURE__*/_jsx(CopyToClipboard, {
-                text: inviteLinkState,
-                onCopy: () => {
-                  setCopied(true);
-                  trackRecommendedEvent("share", {
-                    ...shareEventParams,
-                    method: "CopyToClipboard"
-                  });
-                },
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  "aria-label": "copy",
-                  children: /*#__PURE__*/_jsx(CopyIcon, {})
-                })
-              }),
-              children: /*#__PURE__*/_jsx(ListItemText, {
-                primary: t("invite_link_desc"),
-                secondary: inviteLinkState
-              })
-            }), enrolmentKey ? /*#__PURE__*/_jsx(ListItem, {
-              secondaryAction: /*#__PURE__*/_jsx(CopyToClipboard, {
-                text: enrolmentKey,
-                onCopy: () => {
-                  setCopied(true);
-                  trackRecommendedEvent("share", {
-                    ...shareEventParams,
-                    method: "CopyToClipboard"
-                  });
-                },
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  "aria-label": "copy",
-                  children: /*#__PURE__*/_jsx(CopyIcon, {})
-                })
-              }),
-              children: /*#__PURE__*/_jsx(ListItemText, {
-                primary: inviteTypeState === "course" ? `${t("join_instructions_1")} ${t("course").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}` : `${t("join_instructions_1")} ${t("classroom").toLowerCase()} ${t("join_instructions_2")} ${t("enrollment_key_text")}`,
-                secondary: enrolmentKey,
-                slotProps: {
-                  secondary: {
-                    fontWeight: "bold"
-                  }
-                }
-              })
-            }) : /*#__PURE__*/_jsx(ListItem, {
-              children: /*#__PURE__*/_jsx(ListItemText, {
-                primary: inviteTypeState === "course" ? `${t("join_instructions_1")}${t("course").toLowerCase()} ${t("join_instructions_2")}.` : `${t("join_instructions_1")}${t("classroom").toLowerCase()} ${t("join_instructions_2")}.`
-              })
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          children: /*#__PURE__*/_jsx(CopyToClipboard, {
-            text: nonEncodedStudentInstructions(),
-            onCopy: () => {
-              setStudentInstructionsCopied(true);
-              trackRecommendedEvent("share", {
-                ...shareEventParams,
-                method: "CopyToClipboard"
-              });
-            },
-            children: /*#__PURE__*/_jsx(Button, {
-              color: "primary",
-              variant: "contained",
-              sx: {
-                marginTop: 2,
-                marginBottom: 2
-              },
-              startIcon: /*#__PURE__*/_jsx(CopyIcon, {}),
-              children: studentInstructionsCopied ? t("copied") : t("copy_student_instructions")
-            })
-          })
-        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            borderRadius: "20px"
-          },
-          children: /*#__PURE__*/_jsxs(List, {
-            children: [/*#__PURE__*/_jsx(DialogContentText, {
-              children: t("or_invite_via")
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: toggleQRCodeDisplay,
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  children: /*#__PURE__*/_jsx(QrCodeIcon, {
-                    sx: {
-                      fontSize: "xx-large"
-                    }
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "QR Code"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(`mailto:?subject=${t("invite_email_subject")} ${inviteTypeState.toLowerCase()}&body=${studentInstructionsEmailBody()}`),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  children: /*#__PURE__*/_jsx(MailOutlineTwoToneIcon, {
-                    sx: {
-                      fontSize: "xx-large"
-                    }
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Email"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(googleClassroomLink),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  className: classes.classroom,
-                  children: /*#__PURE__*/_jsx("img", {
-                    src: GoogleClassroomIcon,
-                    alt: ""
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Google Classroom"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(facebookLink),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  className: classes.facebook,
-                  children: /*#__PURE__*/_jsx(Facebook, {
-                    color: "#fff",
-                    fill: "#fff"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Facebook"
-              })]
-            }), /*#__PURE__*/_jsxs(ListItemButton, {
-              disableGutters: true,
-              onClick: () => openWindow(twitterLink),
-              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
-                children: /*#__PURE__*/_jsx(Avatar, {
-                  variant: "rounded",
-                  className: classes.twitter,
-                  children: /*#__PURE__*/_jsx(Twitter, {
-                    color: "#fff",
-                    fill: "#fff"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(ListItemText, {
-                primary: "Twitter"
-              })]
-            }), /*#__PURE__*/_jsxs(ResponsiveDialog, {
-              open: showQRCode,
-              handleClose: toggleQRCodeDisplay,
-              maxWidth: "md",
-              fullWidth: true,
-              sx: {
-                "& .MuiDialog-paper": {
-                  width: "50%",
-                  maxHeight: "80%"
-                }
-              },
-              children: [/*#__PURE__*/_jsx(DialogTitle, {
-                children: "QR Code "
-              }), /*#__PURE__*/_jsx(DialogContent, {
-                dividers: true,
-                children: /*#__PURE__*/_jsx(Box, {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: "100%"
-                  },
-                  children: /*#__PURE__*/_jsx(QRCode, {
-                    value: inviteLinkState,
-                    size: 384,
-                    fgColor: theme.palette.primary.main,
-                    bgColor: theme.palette.background.paper,
-                    logoImage: nualangImage,
-                    logoHeight: 90,
-                    logoWidth: 90,
-                    qrStyle: "dots"
-                  })
-                })
-              })]
-            })]
-          })
-        })]
-      }) : null]
-    })
-  });
-}
-export default InviteDialog;