mario-core 2.9.326-release → 2.9.330-release

package/dist/index.js

@@ -37547,7 +37547,8 @@ var BlockLogin = function BlockLogin(_ref) {
       fnIsCheckLogin = _ref.fnIsCheckLogin,
       googleClientId = _ref.googleClientId,
       fnLoginSSO = _ref.fnLoginSSO,
-      extensionEmail = _ref.extensionEmail;
+      extensionEmail = _ref.extensionEmail,
+      onLoginWidthClever = _ref.onLoginWidthClever;
 
   var togglePasswordVisible = function togglePasswordVisible() {
     return setIsShowPassword(!isShowPassword);
@@ -37734,7 +37735,16 @@ var BlockLogin = function BlockLogin(_ref) {
       }
     }, React__default.createElement("img", {
       src: "images/class-link-icon.png"
-    }), React__default.createElement("p", null, "SIGN IN WITH CLASSLINK"))))));
+    }), React__default.createElement("p", null, "SIGN IN WITH CLASSLINK"))), React__default.createElement("div", {
+      className: styles["btn-login-sso"] + " mt-4"
+    }, React__default.createElement("div", {
+      className: styles["btn-login-with-sso"],
+      onClick: function onClick() {
+        return onLoginWidthClever();
+      }
+    }, React__default.createElement("img", {
+      src: "images/clever-icon.png"
+    }), React__default.createElement("p", null, "SIGN IN WITH CLEVER"))))));
   }));
 };
 
@@ -38507,6 +38517,16 @@ var useLogin = function useLogin() {
     }
   }, []);
 
+  var handleLoginWidthClever = function handleLoginWidthClever() {
+    if (!isLocalhost) {
+      var cleverSSOUrl = "https://clever.com/oauth/authorize?response_type=code&redirect_uri=" + encodeURIComponent("https://stage2.marioforme.com/api/clever/clever-login") + "&client_id=" + "ab1aff048ba4482d75fa";
+      window.location.href = cleverSSOUrl;
+    } else {
+      var _cleverSSOUrl = "https://clever.com/oauth/instant-login?client_id=ab1aff048ba4482d75fa&district_id=66132a6f222bda41cc8abe5d";
+      window.location.href = _cleverSSOUrl;
+    }
+  };
+
   var loginAccountClassLink = function loginAccountClassLink() {
     try {
       var _temp3 = function _temp3() {
@@ -38977,7 +38997,8 @@ var useLogin = function useLogin() {
     openModelAssign: openModelAssign,
     fnLoginSSO: fnLoginSSO,
     school: school,
-    extensionEmail: extensionEmail
+    extensionEmail: extensionEmail,
+    handleLoginWidthClever: handleLoginWidthClever
   };
 };
 
@@ -39239,7 +39260,8 @@ var Login = function Login(props) {
       googleClientId = _useLogin.googleClientId,
       isShowPassword = _useLogin.isShowPassword,
       fnLoginSSO = _useLogin.fnLoginSSO,
-      extensionEmail = _useLogin.extensionEmail;
+      extensionEmail = _useLogin.extensionEmail,
+      handleLoginWidthClever = _useLogin.handleLoginWidthClever;
 
   React.useEffect(function () {
     isLogin && (document.title = LOGIN_TITLE);
@@ -39277,7 +39299,8 @@ var Login = function Login(props) {
     setIsShowPassword: setIsShowPassword,
     submitLogin: submitLogin,
     fnLoginSSO: fnLoginSSO,
-    extensionEmail: extensionEmail
+    extensionEmail: extensionEmail,
+    onLoginWidthClever: handleLoginWidthClever
   }), isForgotPassword && React__default.createElement(BlockForgetPassword, {
     school: school
   })), isResetPassword && React__default.createElement(BlockResetPassword, null), isCreatePassword && React__default.createElement(BlockCreatePassword, null), React__default.createElement("a", {
@@ -39768,212 +39791,6 @@ var TheHeaderDropdown = function TheHeaderDropdown(_ref) {
   })), t("log_out")))));
 };
 
-var apiGetLanguage = function apiGetLanguage() {
-  return api.get(BASE_URL + "/api/language");
-};
-
-var apiUpdateLanguage = function apiUpdateLanguage(lang) {
-  return api.put(BASE_URL + "/api/language?lang=" + lang);
-};
-
-var LANGUAGE_SYSTEM = "LANGUAGE_SYSTEM";
-
-var useLanguages = function useLanguages() {
-  var dispatch = reactRedux.useDispatch();
-
-  var _useTranslation = reactI18next.useTranslation(),
-      i18n = _useTranslation.i18n;
-
-  var language = reactRedux.useSelector(function (state) {
-    return state.common.language;
-  });
-  var defaultLanguage = getCookieValue(LANGUAGE_SYSTEM) != null ? getCookieValue(LANGUAGE_SYSTEM) : DEFAULT_LANGUAGE_CODE;
-
-  var _useState = React.useState([]),
-      languageList = _useState[0],
-      setLanguageList = _useState[1];
-
-  var _useState2 = React.useState(false),
-      dropdownOpen = _useState2[0],
-      setDropdownOpen = _useState2[1];
-
-  var _useState3 = React.useState(defaultLanguage),
-      currentLang = _useState3[0],
-      setCurrentLang = _useState3[1];
-
-  var toggle = function toggle() {
-    return setDropdownOpen(function (prevState) {
-      return !prevState;
-    });
-  };
-
-  var changeLanguageApp = function changeLanguageApp(lang) {
-    try {
-      var _temp3 = function _temp3() {
-        dispatch(setLoading(false));
-      };
-
-      dispatch(setLoading(true));
-
-      var _temp4 = _catch(function () {
-        return Promise.resolve(apiUpdateLanguage(lang)).then(function () {
-          i18n.changeLanguage(lang);
-          setCurrentLang(lang);
-          dispatch(setLanguage(lang));
-        });
-      }, function (err) {
-        var _err$response, _err$response$data;
-
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
-        }));
-      });
-
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var getListLanguage = function getListLanguage() {
-    try {
-      var _temp6 = _catch(function () {
-        return Promise.resolve(apiGetLanguage()).then(function (res) {
-          setLanguageList(res.data);
-        });
-      }, function (err) {
-        var _err$response2, _err$response2$data;
-
-        dispatch(setAlert({
-          type: "danger",
-          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
-        }));
-      });
-
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  React.useEffect(function () {
-    defaultLanguage != language && changeLanguageApp(defaultLanguage);
-    getListLanguage();
-  }, []);
-  return {
-    languageList: languageList,
-    toggle: toggle,
-    dropdownOpen: dropdownOpen,
-    currentLang: currentLang,
-    changeLanguageApp: changeLanguageApp,
-    setCurrentLang: setCurrentLang
-  };
-};
-
-var TheLanguageDropdown = function TheLanguageDropdown() {
-  var _useLanguages = useLanguages(),
-      languageList = _useLanguages.languageList,
-      toggle = _useLanguages.toggle,
-      dropdownOpen = _useLanguages.dropdownOpen,
-      currentLang = _useLanguages.currentLang,
-      changeLanguageApp = _useLanguages.changeLanguageApp;
-
-  var currentLanguage = React.useMemo(function () {
-    var current = languageList.find(function (i) {
-      return i.code === currentLang;
-    });
-    if (!current) return null;
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
-      className: "mr-2 " + styles['dropdown-menu-flag'],
-      src: "" + getStaticFileUrl(current.image)
-    }), " ", current.name);
-  }, [currentLang, languageList]);
-  return React__default.createElement(reactstrap.Dropdown, {
-    isOpen: dropdownOpen,
-    toggle: toggle,
-    className: "" + styles["dropdown-menu"]
-  }, React__default.createElement(reactstrap.DropdownToggle, {
-    className: styles["header-avatar"] + " d-flex align-items-center"
-  }, React__default.createElement("span", {
-    style: {
-      color: "#000",
-      textTransform: "capitalize",
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, currentLanguage, React__default.createElement(bs.BsChevronDown, {
-    className: "ml-2",
-    style: {
-      fontSize: '10px'
-    }
-  }))), React__default.createElement(reactstrap.DropdownMenu, {
-    className: styles["dropdown-content-language"]
-  }, !!languageList && languageList.length > 0 && languageList.map(function (lang, index) {
-    return React__default.createElement(reactstrap.DropdownItem, {
-      key: lang.code,
-      className: styles["dropdown-change"] + " px-0 py-0 " + (index === languageList.length - 1 ? "pb-2" : "pt-2"),
-      onClick: function onClick() {
-        return changeLanguageApp(lang.code);
-      }
-    }, React__default.createElement("div", {
-      className: styles["dropdown-item-language"] + " " + styles["item-logout"] + " " + (currentLang == lang.code ? styles['dropdown-item-language-active'] : "") + " d-flex align-items-center w-100"
-    }, React__default.createElement("span", {
-      className: "mr-2 d-flex hover-opacity"
-    }, React__default.createElement("img", {
-      style: {
-        width: "30px",
-        height: "25px",
-        borderRadius: "5px"
-      },
-      src: getStaticFileUrl(lang.image)
-    })), lang.name));
-  })));
-};
-
-var TheHeader = function TheHeader(_ref) {
-  var onToggleModel = _ref.onToggleModel;
-  var dispatch = reactRedux.useDispatch();
-  var sidebarShow = reactRedux.useSelector(function (state) {
-    return state.common.sidebarShow;
-  });
-
-  var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-
-  var toggleSidebarMobile = function toggleSidebarMobile() {
-    var val = [false, "responsive"].includes(sidebarShow) ? true : "responsive";
-    dispatch(setSidebar(val));
-  };
-
-  var isDistrict = window.location.host.includes("-district");
-  return React__default.createElement(react.CHeader, {
-    withSubheader: true,
-    className: "d-flex align-items-center justify-content-end"
-  }, React__default.createElement(react.CToggler, {
-    inHeader: true,
-    className: "ml-md-3 d-lg-none",
-    onClick: toggleSidebarMobile
-  }), React__default.createElement(react.CHeaderBrand, {
-    className: "mx-auto flex-grow-1 d-lg-none",
-    to: "/"
-  }, React__default.createElement("img", {
-    src: getStaticFileUrl(Images.LOGO_HEADER),
-    className: styles["header-logo"]
-  })), React__default.createElement(react.CHeaderNav, {
-    className: "pr-3"
-  }, React__default.createElement(TheLanguageDropdown, null), React__default.createElement("a", {
-    className: "mr-3",
-    style: {
-      color: '#000'
-    },
-    href: '/privacy-policy',
-    target: "blank"
-  }, t("privacy_policy")), !isDistrict && React__default.createElement(NotificationButton, null), React__default.createElement(TheHeaderDropdown, {
-    onToggleModel: onToggleModel
-  })));
-};
-
 var TITLE$3 = "Not found";
 
 var NotFound = function NotFound() {
@@ -40031,277 +39848,25 @@ var TheContent = function TheContent(_ref) {
 
 var TheContent$1 = React__default.memo(TheContent);
 
-var loadingStyle = {
-  minWidth: "100vw",
-  minHeight: "100vh",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  zIndex: 999999999,
-  backgroundColor: "rgba(0, 0, 0, 0.4)",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
+var buttonTextStyle = {
+  fontWeight: 500
+};
+var buttonStyle = {
+  height: 38
 };
 
-var Loading = function Loading() {
-  var isLoading = reactRedux.useSelector(function (state) {
-    return state.common.isLoading;
-  });
-  localStorage.setItem("LAST_TIME_REQUETST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
-  return isLoading ? React__default.createElement("div", {
-    style: loadingStyle
-  }, React__default.createElement("div", {
-    className: "spinner-border text-secondary",
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  }, "Loading..."))) : null;
-};
-
-var firstCheckToken = function firstCheckToken() {
-  return Promise.resolve(_catch(function () {
-    var token = getAccessToken();
-    return token ? Promise.resolve(checkToken(token)).then(function (tokenStatus) {
-      return tokenStatus.data ? true : false;
-    }) : false;
-  }, function () {
-    return false;
-  }));
-};
-
-var canAccess = function canAccess(userRoles, componentRoles) {
-  if (!Array.isArray(userRoles)) {
-    return false;
-  }
-
-  if (Array.isArray(componentRoles)) {
-    var intersects = userRoles.filter(function (i) {
-      return componentRoles.includes(i);
-    });
-    return intersects.length > 0;
-  }
-
-  return true;
-};
-
-var ModelSelectRole = function ModelSelectRole(_ref) {
-  var _handleUserRole;
-
-  var open = _ref.open,
-      onToggleModel = _ref.onToggleModel;
-  var dispatch = reactRedux.useDispatch();
-
-  var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-
-  var history = reactRouterDom.useHistory();
-  var pathname = window.location.pathname;
-  var user = reactRedux.useSelector(function (state) {
-    return state.common.user;
-  });
-  var roles = user === null || user === void 0 ? void 0 : user.roles;
-
-  var handleSelectUserRoles = function handleSelectUserRoles(roles) {
-    dispatch(setLoading(true));
-    var roleSelect = roles.includes("Teacher/Assistant") ? ["Teacher", "Assistant"] : roles;
-    dispatch(setUser(_extends({}, user, {
-      roles: roleSelect
-    })));
-    localStorage.setItem("ROLES", roleSelect.toString());
-    onToggleModel();
-
-    if (roles.includes("Parent")) {
-      history.push("/parent");
-    } else if (roles.includes("Admin")) {
-      history.push("/admin/home");
-    } else {
-      pathname !== "/home" ? history.push("/home") : window.location.reload();
-    }
-  };
-
-  return React__default.createElement(reactstrap.Modal, {
-    isOpen: open,
-    toggle: function toggle() {
-      return onToggleModel();
-    },
-    className: "" + styles["model-switch-roles"],
-    centered: true
-  }, React__default.createElement("p", {
-    className: "" + styles["title"]
-  }, t("continue_as")), React__default.createElement("div", null, (_handleUserRole = handleUserRole(user === null || user === void 0 ? void 0 : user.roles)) === null || _handleUserRole === void 0 ? void 0 : _handleUserRole.map(function (r) {
-    return React__default.createElement("p", {
-      key: r,
-      className: styles["item-select-role"] + " " + styles[roles.includes("Teacher") && roles.includes("Assistant") && r === "Teacher/Assistant" && !roles.includes("Admin") || roles.includes("Admin") && r === "Admin" || roles.includes(r) && !roles.includes("Admin") ? "item-role-active" : ""],
-      onClick: function onClick() {
-        return handleSelectUserRoles([r]);
-      }
-    }, r == "SecondaryTeacher" ? "Support Teacher" : r);
-  })));
-};
-
-var TheLayout = function TheLayout(_ref) {
-  var routes = _ref.routes,
-      navigation = _ref.navigation;
-  var history = reactRouterDom.useHistory();
-  var dispatch = reactRedux.useDispatch();
-  var user = reactRedux.useSelector(function (state) {
-    return state.common.user;
-  });
-  var language = reactRedux.useSelector(function (state) {
-    return state.common.language;
-  });
-
-  var _useState = React.useState(false),
-      openModelSelectRole = _useState[0],
-      setOpenModelSelectRole = _useState[1];
-
-  var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-
-  var location = reactRouterDom.useLocation();
-  var isNotification = location.pathname.includes("notifications");
-  var isDistrict = window.location.host.includes("-district");
-
-  var handleToggleModel = function handleToggleModel() {
-    setOpenModelSelectRole(!openModelSelectRole);
-  };
-
-  var authRoutes = React.useMemo(function () {
-    return routes.filter(function (route) {
-      return canAccess(user === null || user === void 0 ? void 0 : user.roles, route.roles);
-    }).filter(function (route) {
-      return !!route.isDistrict === isDistrict;
-    });
-  }, [user, language]);
-  var authNavigations = React.useMemo(function () {
-    return navigation.map(function (item) {
-      var _item$_children, _item$_children2;
-
-      return _extends({}, item, {
-        name: t(item.name),
-        _children: item !== null && item !== void 0 && (_item$_children = item._children) !== null && _item$_children !== void 0 && _item$_children.length ? item === null || item === void 0 ? void 0 : (_item$_children2 = item._children) === null || _item$_children2 === void 0 ? void 0 : _item$_children2.map(function (x) {
-          return _extends({}, x, {
-            name: t(x.name)
-          });
-        }) : undefined
-      });
-    }).filter(function (nav) {
-      return canAccess(user === null || user === void 0 ? void 0 : user.roles, nav.roles);
-    }).filter(function (nav) {
-      return !!nav.isDistrict === isDistrict;
-    });
-  }, [user, language]);
-
-  var getInformationSetting = function getInformationSetting() {
-    try {
-      var _temp2 = _catch(function () {
-        return Promise.resolve(getSchoolSettings()).then(function (res) {
-          dispatch(setSandboxMode(res.data.isSandboxMode));
-        });
-      }, function (err) {
-        console.error(err);
-      });
-
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  React.useEffect(function () {
-    checkAuthentication();
-  }, []);
-  React.useEffect(function () {
-    getInformationSetting();
-  }, [location.pathname]);
-
-  var checkAuthentication = function checkAuthentication() {
-    try {
-      var _temp4 = _catch(function () {
-        return Promise.resolve(firstCheckToken()).then(function (tokenStatus) {
-          tokenStatus ? loadInfo() : resetAuth();
-        });
-      }, function () {
-        resetAuth();
-      });
-
-      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var loadInfo = function loadInfo() {
-    try {
-      var _temp6 = _catch(function () {
-        return Promise.resolve(getInfo()).then(function (info) {
-          var _info$data, _info$data$roles;
-
-          if (!info || !(info !== null && info !== void 0 && (_info$data = info.data) !== null && _info$data !== void 0 && (_info$data$roles = _info$data.roles) !== null && _info$data$roles !== void 0 && _info$data$roles.includes("Admin"))) {
-            resetAuth();
-          }
-
-          dispatch(setUser(info.data));
-        });
-      }, function () {
-        resetAuth();
-      });
-
-      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var resetAuth = function resetAuth() {
-    localStorage.removeItem(ACCESS_TOKEN);
-    sessionStorage.removeItem(ACCESS_TOKEN);
-    localStorage.removeItem("ROLES");
-    history.push("/");
-  };
-
-  if (!user) {
-    return React__default.createElement(Loading, null);
-  }
-
-  return React__default.createElement("div", {
-    className: "c-app c-default-layout"
-  }, !isNotification && React__default.createElement(TheSidebar, {
-    navigation: authNavigations
-  }), React__default.createElement("div", {
-    className: "c-wrapper"
-  }, !isNotification && React__default.createElement(TheHeader, {
-    onToggleModel: handleToggleModel
-  }), React__default.createElement("div", {
-    className: "c-body bg-white"
-  }, React__default.createElement(TheContent$1, {
-    routes: authRoutes
-  }))), React__default.createElement(ModelSelectRole, {
-    open: openModelSelectRole,
-    onToggleModel: handleToggleModel
-  }));
-};
-
-var buttonTextStyle = {
-  fontWeight: 500
-};
-var buttonStyle = {
-  height: 38
-};
-
-var AddButton = function AddButton(_ref) {
-  var text = _ref.text,
-      onClick = _ref.onClick;
-  return React__default.createElement(reactstrap.Button, {
-    onClick: onClick,
-    color: 'success',
-    style: buttonStyle,
-    className: 'd-flex align-items-center'
-  }, React__default.createElement(fa.FaPlus, null), React__default.createElement("span", {
-    className: 'ml-2',
-    style: buttonTextStyle
-  }, text));
+var AddButton = function AddButton(_ref) {
+  var text = _ref.text,
+      onClick = _ref.onClick;
+  return React__default.createElement(reactstrap.Button, {
+    onClick: onClick,
+    color: 'success',
+    style: buttonStyle,
+    className: 'd-flex align-items-center'
+  }, React__default.createElement(fa.FaPlus, null), React__default.createElement("span", {
+    className: 'ml-2',
+    style: buttonTextStyle
+  }, text));
 };
 
 var DeleteButtonIcon = function DeleteButtonIcon(_ref) {
@@ -46095,17 +45660,45 @@ var UserDetail = function UserDetail() {
   });
 };
 
-var ScrollToTop = function ScrollToTop() {
-  var _useLocation = reactRouterDom.useLocation(),
-      pathname = _useLocation.pathname;
-
-  React.useEffect(function () {
-    window.scrollTo(0, 0);
-  }, [pathname]);
-  return null;
-};
-
-var modalInfo = function modalInfo(type) {
+var loadingStyle = {
+  minWidth: "100vw",
+  minHeight: "100vh",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  zIndex: 999999999,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+};
+
+var Loading = function Loading() {
+  var isLoading = reactRedux.useSelector(function (state) {
+    return state.common.isLoading;
+  });
+  localStorage.setItem("LAST_TIME_REQUETST", moment().utc().format("YYYY-MM-DD HH:mm:ss"));
+  return isLoading ? React__default.createElement("div", {
+    style: loadingStyle
+  }, React__default.createElement("div", {
+    className: "spinner-border text-secondary",
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  }, "Loading..."))) : null;
+};
+
+var ScrollToTop = function ScrollToTop() {
+  var _useLocation = reactRouterDom.useLocation(),
+      pathname = _useLocation.pathname;
+
+  React.useEffect(function () {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+  return null;
+};
+
+var modalInfo = function modalInfo(type) {
   switch (type) {
     case "danger":
       return {
@@ -49114,6 +48707,32 @@ var store = toolkit.configureStore({
   }
 });
 
+var firstCheckToken = function firstCheckToken() {
+  return Promise.resolve(_catch(function () {
+    var token = getAccessToken();
+    return token ? Promise.resolve(checkToken(token)).then(function (tokenStatus) {
+      return tokenStatus.data ? true : false;
+    }) : false;
+  }, function () {
+    return false;
+  }));
+};
+
+var canAccess = function canAccess(userRoles, componentRoles) {
+  if (!Array.isArray(userRoles)) {
+    return false;
+  }
+
+  if (Array.isArray(componentRoles)) {
+    var intersects = userRoles.filter(function (i) {
+      return componentRoles.includes(i);
+    });
+    return intersects.length > 0;
+  }
+
+  return true;
+};
+
 var isInViewport = function isInViewport(el) {
   var rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
   return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
@@ -49149,6 +48768,412 @@ var generateRandomString = (function () {
 
 var amplitudeClient = amplitude.getInstance();
 
+var apiGetLanguage = function apiGetLanguage() {
+  return api.get(BASE_URL + "/api/language");
+};
+
+var apiUpdateLanguage = function apiUpdateLanguage(lang) {
+  return api.put(BASE_URL + "/api/language?lang=" + lang);
+};
+
+var LANGUAGE_SYSTEM = "LANGUAGE_SYSTEM";
+
+var useLanguages = function useLanguages() {
+  var dispatch = reactRedux.useDispatch();
+
+  var _useTranslation = reactI18next.useTranslation(),
+      i18n = _useTranslation.i18n;
+
+  var language = reactRedux.useSelector(function (state) {
+    return state.common.language;
+  });
+  var defaultLanguage = getCookieValue(LANGUAGE_SYSTEM) != null ? getCookieValue(LANGUAGE_SYSTEM) : DEFAULT_LANGUAGE_CODE;
+
+  var _useState = React.useState([]),
+      languageList = _useState[0],
+      setLanguageList = _useState[1];
+
+  var _useState2 = React.useState(false),
+      dropdownOpen = _useState2[0],
+      setDropdownOpen = _useState2[1];
+
+  var _useState3 = React.useState(defaultLanguage),
+      currentLang = _useState3[0],
+      setCurrentLang = _useState3[1];
+
+  var toggle = function toggle() {
+    return setDropdownOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+
+  var changeLanguageApp = function changeLanguageApp(lang) {
+    try {
+      var _temp3 = function _temp3() {
+        dispatch(setLoading(false));
+      };
+
+      dispatch(setLoading(true));
+
+      var _temp4 = _catch(function () {
+        return Promise.resolve(apiUpdateLanguage(lang)).then(function () {
+          i18n.changeLanguage(lang);
+          setCurrentLang(lang);
+          dispatch(setLanguage(lang));
+        });
+      }, function (err) {
+        var _err$response, _err$response$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var getListLanguage = function getListLanguage() {
+    try {
+      var _temp6 = _catch(function () {
+        return Promise.resolve(apiGetLanguage()).then(function (res) {
+          setLanguageList(res.data);
+        });
+      }, function (err) {
+        var _err$response2, _err$response2$data;
+
+        dispatch(setAlert({
+          type: "danger",
+          message: ((_err$response2 = err.response) === null || _err$response2 === void 0 ? void 0 : (_err$response2$data = _err$response2.data) === null || _err$response2$data === void 0 ? void 0 : _err$response2$data.title) || err.message
+        }));
+      });
+
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  React.useEffect(function () {
+    defaultLanguage != language && changeLanguageApp(defaultLanguage);
+    getListLanguage();
+  }, []);
+  return {
+    languageList: languageList,
+    toggle: toggle,
+    dropdownOpen: dropdownOpen,
+    currentLang: currentLang,
+    changeLanguageApp: changeLanguageApp,
+    setCurrentLang: setCurrentLang
+  };
+};
+
+var TheLanguageDropdown = function TheLanguageDropdown() {
+  var _useLanguages = useLanguages(),
+      languageList = _useLanguages.languageList,
+      toggle = _useLanguages.toggle,
+      dropdownOpen = _useLanguages.dropdownOpen,
+      currentLang = _useLanguages.currentLang,
+      changeLanguageApp = _useLanguages.changeLanguageApp;
+
+  var currentLanguage = React.useMemo(function () {
+    var current = languageList.find(function (i) {
+      return i.code === currentLang;
+    });
+    if (!current) return null;
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
+      className: "mr-2 " + styles['dropdown-menu-flag'],
+      src: "" + getStaticFileUrl(current.image)
+    }), " ", current.name);
+  }, [currentLang, languageList]);
+  return React__default.createElement(reactstrap.Dropdown, {
+    isOpen: dropdownOpen,
+    toggle: toggle,
+    className: "" + styles["dropdown-menu"]
+  }, React__default.createElement(reactstrap.DropdownToggle, {
+    className: styles["header-avatar"] + " d-flex align-items-center"
+  }, React__default.createElement("span", {
+    style: {
+      color: "#000",
+      textTransform: "capitalize",
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, currentLanguage, React__default.createElement(bs.BsChevronDown, {
+    className: "ml-2",
+    style: {
+      fontSize: '10px'
+    }
+  }))), React__default.createElement(reactstrap.DropdownMenu, {
+    className: styles["dropdown-content-language"]
+  }, !!languageList && languageList.length > 0 && languageList.map(function (lang, index) {
+    return React__default.createElement(reactstrap.DropdownItem, {
+      key: lang.code,
+      className: styles["dropdown-change"] + " px-0 py-0 " + (index === languageList.length - 1 ? "pb-2" : "pt-2"),
+      onClick: function onClick() {
+        return changeLanguageApp(lang.code);
+      }
+    }, React__default.createElement("div", {
+      className: styles["dropdown-item-language"] + " " + styles["item-logout"] + " " + (currentLang == lang.code ? styles['dropdown-item-language-active'] : "") + " d-flex align-items-center w-100"
+    }, React__default.createElement("span", {
+      className: "mr-2 d-flex hover-opacity"
+    }, React__default.createElement("img", {
+      style: {
+        width: "30px",
+        height: "25px",
+        borderRadius: "5px"
+      },
+      src: getStaticFileUrl(lang.image)
+    })), lang.name));
+  })));
+};
+
+var TheHeader = function TheHeader(_ref) {
+  var onToggleModel = _ref.onToggleModel;
+  var dispatch = reactRedux.useDispatch();
+  var sidebarShow = reactRedux.useSelector(function (state) {
+    return state.common.sidebarShow;
+  });
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var toggleSidebarMobile = function toggleSidebarMobile() {
+    var val = [false, "responsive"].includes(sidebarShow) ? true : "responsive";
+    dispatch(setSidebar(val));
+  };
+
+  var isDistrict = window.location.host.includes("-district");
+  return React__default.createElement(react.CHeader, {
+    withSubheader: true,
+    className: "d-flex align-items-center justify-content-end"
+  }, React__default.createElement(react.CToggler, {
+    inHeader: true,
+    className: "ml-md-3 d-lg-none",
+    onClick: toggleSidebarMobile
+  }), React__default.createElement(react.CHeaderBrand, {
+    className: "mx-auto flex-grow-1 d-lg-none",
+    to: "/"
+  }, React__default.createElement("img", {
+    src: getStaticFileUrl(Images.LOGO_HEADER),
+    className: styles["header-logo"]
+  })), React__default.createElement(react.CHeaderNav, {
+    className: "pr-3"
+  }, React__default.createElement(TheLanguageDropdown, null), React__default.createElement("a", {
+    className: "mr-3",
+    style: {
+      color: '#000'
+    },
+    href: '/privacy-policy',
+    target: "blank"
+  }, t("privacy_policy")), !isDistrict && React__default.createElement(NotificationButton, null), React__default.createElement(TheHeaderDropdown, {
+    onToggleModel: onToggleModel
+  })));
+};
+
+var ModelSelectRole = function ModelSelectRole(_ref) {
+  var _handleUserRole;
+
+  var open = _ref.open,
+      onToggleModel = _ref.onToggleModel;
+  var dispatch = reactRedux.useDispatch();
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var history = reactRouterDom.useHistory();
+  var pathname = window.location.pathname;
+  var user = reactRedux.useSelector(function (state) {
+    return state.common.user;
+  });
+  var roles = user === null || user === void 0 ? void 0 : user.roles;
+
+  var handleSelectUserRoles = function handleSelectUserRoles(roles) {
+    dispatch(setLoading(true));
+    var roleSelect = roles.includes("Teacher/Assistant") ? ["Teacher", "Assistant"] : roles;
+    dispatch(setUser(_extends({}, user, {
+      roles: roleSelect
+    })));
+    localStorage.setItem("ROLES", roleSelect.toString());
+    onToggleModel();
+
+    if (roles.includes("Parent")) {
+      history.push("/parent");
+    } else if (roles.includes("Admin")) {
+      history.push("/admin/home");
+    } else {
+      pathname !== "/home" ? history.push("/home") : window.location.reload();
+    }
+  };
+
+  return React__default.createElement(reactstrap.Modal, {
+    isOpen: open,
+    toggle: function toggle() {
+      return onToggleModel();
+    },
+    className: "" + styles["model-switch-roles"],
+    centered: true
+  }, React__default.createElement("p", {
+    className: "" + styles["title"]
+  }, t("continue_as")), React__default.createElement("div", null, (_handleUserRole = handleUserRole(user === null || user === void 0 ? void 0 : user.roles)) === null || _handleUserRole === void 0 ? void 0 : _handleUserRole.map(function (r) {
+    return React__default.createElement("p", {
+      key: r,
+      className: styles["item-select-role"] + " " + styles[roles.includes("Teacher") && roles.includes("Assistant") && r === "Teacher/Assistant" && !roles.includes("Admin") || roles.includes("Admin") && r === "Admin" || roles.includes(r) && !roles.includes("Admin") ? "item-role-active" : ""],
+      onClick: function onClick() {
+        return handleSelectUserRoles([r]);
+      }
+    }, r == "SecondaryTeacher" ? "Support Teacher" : r);
+  })));
+};
+
+var TheLayout = function TheLayout(_ref) {
+  var routes = _ref.routes,
+      navigation = _ref.navigation;
+  var history = reactRouterDom.useHistory();
+  var dispatch = reactRedux.useDispatch();
+  var user = reactRedux.useSelector(function (state) {
+    return state.common.user;
+  });
+  var language = reactRedux.useSelector(function (state) {
+    return state.common.language;
+  });
+
+  var _useState = React.useState(false),
+      openModelSelectRole = _useState[0],
+      setOpenModelSelectRole = _useState[1];
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var location = reactRouterDom.useLocation();
+  var isNotification = location.pathname.includes("notifications");
+  var isDistrict = window.location.host.includes("-district");
+
+  var handleToggleModel = function handleToggleModel() {
+    setOpenModelSelectRole(!openModelSelectRole);
+  };
+
+  var authRoutes = React.useMemo(function () {
+    return routes.filter(function (route) {
+      return canAccess(user === null || user === void 0 ? void 0 : user.roles, route.roles);
+    }).filter(function (route) {
+      return !!route.isDistrict === isDistrict;
+    });
+  }, [user, language]);
+  var authNavigations = React.useMemo(function () {
+    return navigation.map(function (item) {
+      var _item$_children, _item$_children2;
+
+      return _extends({}, item, {
+        name: t(item.name),
+        _children: item !== null && item !== void 0 && (_item$_children = item._children) !== null && _item$_children !== void 0 && _item$_children.length ? item === null || item === void 0 ? void 0 : (_item$_children2 = item._children) === null || _item$_children2 === void 0 ? void 0 : _item$_children2.map(function (x) {
+          return _extends({}, x, {
+            name: t(x.name)
+          });
+        }) : undefined
+      });
+    }).filter(function (nav) {
+      return canAccess(user === null || user === void 0 ? void 0 : user.roles, nav.roles);
+    }).filter(function (nav) {
+      return !!nav.isDistrict === isDistrict;
+    });
+  }, [user, language]);
+
+  var getInformationSetting = function getInformationSetting() {
+    try {
+      var _temp2 = _catch(function () {
+        return Promise.resolve(getSchoolSettings()).then(function (res) {
+          dispatch(setSandboxMode(res.data.isSandboxMode));
+        });
+      }, function (err) {
+        console.error(err);
+      });
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  React.useEffect(function () {
+    checkAuthentication();
+  }, []);
+  React.useEffect(function () {
+    getInformationSetting();
+  }, [location.pathname]);
+
+  var checkAuthentication = function checkAuthentication() {
+    try {
+      var _temp4 = _catch(function () {
+        return Promise.resolve(firstCheckToken()).then(function (tokenStatus) {
+          tokenStatus ? loadInfo() : resetAuth();
+        });
+      }, function () {
+        resetAuth();
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var loadInfo = function loadInfo() {
+    try {
+      var _temp6 = _catch(function () {
+        return Promise.resolve(getInfo()).then(function (info) {
+          var _info$data, _info$data$roles;
+
+          if (!info || !(info !== null && info !== void 0 && (_info$data = info.data) !== null && _info$data !== void 0 && (_info$data$roles = _info$data.roles) !== null && _info$data$roles !== void 0 && _info$data$roles.includes("Admin"))) {
+            resetAuth();
+          }
+
+          dispatch(setUser(info.data));
+        });
+      }, function () {
+        resetAuth();
+      });
+
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var resetAuth = function resetAuth() {
+    localStorage.removeItem(ACCESS_TOKEN);
+    sessionStorage.removeItem(ACCESS_TOKEN);
+    localStorage.removeItem("ROLES");
+    history.push("/");
+  };
+
+  if (!user) {
+    return React__default.createElement(Loading, null);
+  }
+
+  return React__default.createElement("div", {
+    className: "c-app c-default-layout"
+  }, !isNotification && React__default.createElement(TheSidebar, {
+    navigation: authNavigations
+  }), React__default.createElement("div", {
+    className: "c-wrapper"
+  }, !isNotification && React__default.createElement(TheHeader, {
+    onToggleModel: handleToggleModel
+  }), React__default.createElement("div", {
+    className: "c-body bg-white"
+  }, React__default.createElement(TheContent$1, {
+    routes: authRoutes
+  }))), React__default.createElement(ModelSelectRole, {
+    open: openModelSelectRole,
+    onToggleModel: handleToggleModel
+  }));
+};
+
+var amplitudeClient$1 = amplitude.getInstance();
+
 Object.defineProperty(exports, 'I18nextProvider', {
     enumerable: true,
     get: function () {
@@ -49236,7 +49261,7 @@ exports.UserContainer = UserContainer;
 exports.UserDetail = UserDetail;
 exports.UserList = UserList;
 exports.addTab = addTab;
-exports.amplitudeClient = amplitudeClient;
+exports.amplitudeClient = amplitudeClient$1;
 exports.answerQuestion = answerQuestion;
 exports.answerQuestionDataPlayer = answerQuestionDataPlayer;
 exports.api = api;