\n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n})\r\n\r\nexport default StudentInformationModal;","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { addScheduleLog } from '~src/api/teacherAPI';\r\nimport styles from '~components/LessonCard.module.scss';\r\nconst LessonCard = (\r\n {\r\n lessonId,\r\n teacherAvatar,\r\n teacherName,\r\n teacherNote,\r\n studentName,\r\n studentNote,\r\n courseName,\r\n lessonName,\r\n lessonStatus,\r\n lessonDate,\r\n lessonStart,\r\n lessonEnd,\r\n cancellable,\r\n rating,\r\n documents,\r\n skypeId,\r\n StudentUID,\r\n actionDisplay = true,\r\n handleCancelLesson = null,\r\n showStudentModal\r\n }) => {\r\n\r\n const _onClickCancel = (e) => {\r\n e.preventDefault();\r\n handleCancelLesson({ lessonId, lessonDate, lessonStart, lessonEnd, lessonName, courseName });\r\n }\r\n\r\n const handleEnterClass = async (e) => {\r\n e.preventDefault();\r\n try {\r\n const res = await addScheduleLog({BookingID:lessonId});\r\n if(res.Code === 1){\r\n window.location.href = `skype:${skypeId}?chat`;\r\n }\r\n } catch (error) {\r\n console.log(error?.message ?? `Can't add schedule log !!`)\r\n }\r\n }\r\n\r\n return (<>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Student information
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {!isLoading ? (
) \r\n : ()}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Full name:\r\n
\r\n \r\n {!isLoading ? state.stName :
\r\n \r\n
\r\n \r\n Sex:\r\n
\r\n \r\n {/* */}\r\n {!isLoading ? (\r\n <>\r\n {state.stSex === 1 && }\r\n {state.stSex === 2 && }\r\n {state.stSex === 3 && }\r\n \r\n {state.stSex === 1 && 'Male'}\r\n {state.stSex === 2 && 'Female'}\r\n {state.stSex === 3 && 'Genderless'}\r\n \r\n \r\n ) :
\r\n \r\n
\r\n \r\n Phone:\r\n
\r\n \r\n {!isLoading ? state.stPhone :
\r\n \r\n
\r\n {/* \r\n Email:\r\n
\r\n \r\n {!isLoading ? state.stEmail :
\r\n \r\n
*/}\r\n \r\n \r\n Language:\r\n
\r\n \r\n {!isLoading ? state.stLanguage :
\r\n \r\n
\r\n \r\n Timezone:\r\n
\r\n \r\n {!isLoading ? state.stTimeZone :
\r\n \r\n
\r\n \r\n \r\n
\r\n {!isLoading ? state.stDescription :
\r\n \r\n
\r\n \r\n
\r\n\r\n )\r\n}\r\n\r\nexport default LessonCard;","import React from \"react\";\r\nimport Skeleton from \"react-loading-skeleton\";\r\n\r\nconst SkeletonTable = () => {\r\n return (\r\n \r\n {!!teacherAvatar && (\r\n
\r\n \r\n \r\n 
\r\n
\r\n )}\r\n\r\n {teacherName}
\r\n \r\n\r\n
\r\n \r\n {lessonStatus === 'Finished' ? (\r\n Finished\r\n ) : lessonStatus === 'Incoming' ? (\r\n Incoming\r\n ) : (\r\n {lessonStatus}\r\n )}\r\n {courseName} - {lessonName}\r\n {!!studentName && (\r\n <>\r\n with\r\n { e.preventDefault(); showStudentModal(StudentUID) }} className=\"course-teacher tx-16 tx-info tx-medium valign-middle d-inline-block tx-nowrap\">{studentName}\r\n \r\n )}\r\n\r\n
\r\n\r\n {lessonDate}\r\n Start: {lessonStart}\r\n End: {lessonEnd}\r\n
\r\n\r\n {!!studentNote && (\r\n \r\n
\r\n )}\r\n\r\n {\r\n !!documents && (\r\n Student notes:
\r\n{studentNote}
\r\n\r\n
\r\n )\r\n }\r\n\r\n {!!teacherNote && (\r\n Documents:
\r\n\r\n {documents.length > 0 && documents.map((doc, index) => \r\n \r\n Material\r\n {/* .{doc.extension} */}\r\n \r\n )}\r\n
\r\n \r\n
\r\n )}\r\n\r\n {!!rating && lessonStatus === 'Finished' && (\r\n Teacher note:
\r\n{teacherNote}
\r\n\r\n
\r\n )}\r\n {actionDisplay === true && (\r\n Rating lesson:
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Rating now!\r\n \r\n
\r\n )}\r\n \r\n {lessonStatus === 'Finished' ? (\r\n Detail lesson\r\n ) :\r\n !!studentNote ? (\r\n <>\r\n Join class\r\n {/* \r\n Note for students \r\n */}\r\n \r\n ) : (\r\n <>\r\n Join class\r\n {/* Checking lesson booking */}\r\n \r\n )\r\n\r\n }\r\n
\r\n \r\n {lessonStatus !== 'Finished' && (!!cancellable ? (\r\n Cancel lesson\r\n ) : (\r\n Unavailable to cancel\r\n ))}\r\n
\r\n | \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
| \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
| \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
| \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
| \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
\r\n
\r\n\r\n\r\n \r\n )\r\n}\r\n\r\nexport default NoteForStudentModal;","import React, { useState, useEffect, useReducer } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { cancelLesson } from '../api/optionAPI';\r\nimport { toast } from 'react-toastify';\r\nimport 'react-toastify/scss/main.scss'\r\nimport { toastInit } from \"~src/utils\"\r\n\r\nconst CancelBookingTeacher = ({BookingID, LessionName, date, start, end, style, callback}) => {\r\n const [reason, setReason] = useState(\"\")\r\n const cancelToastSuccess = () => toast.success('You have canceled a lesson successfully', {\r\n position: toast.POSITION.TOP_CENTER,\r\n autoClose: 2000\r\n});\r\n\r\n const cancelToastFail = () => toast.error(\"Cancel lesson fail, some errors happened!\", toastInit);\r\n\r\n const reasonTooShortAlert = () => toast(\"Please fill the reason!\", toastInit);\r\n\r\n const getAPI = async (params) => {\r\n /* start: -1 */\r\n let status = -1;\r\n const lessons = await cancelLesson(params);\r\n status = lessons.Code; /* success:1 , fail: 0*/\r\n if (status === 1) {\r\n cancelToastSuccess();\r\n callback && callback(params.BookingID, status)\r\n }\r\n else {\r\n toast.error(lessons?.Message ?? \"Cancel lesson fail, some errors happened!\", {\r\n position: toast.POSITION.TOP_CENTER,\r\n autoClose: 2000\r\n });\r\n }\r\n }\r\n\r\n\r\n const onSubmitCancelLesson = () => {\r\n if (reason.length <= 0) {\r\n reasonTooShortAlert()\r\n }\r\n else {\r\n getAPI({\r\n BookingID,\r\n ReasonCancleOfTeacher: reason\r\n })\r\n $('#md-cancel-schedule').fadeOut(500, function () {\r\n $('#md-cancel-schedule').modal('hide');\r\n });\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n setReason(\"\")\r\n }, [BookingID]);\r\n\r\n return \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n}\r\nexport default CancelBookingTeacher;","'use strict';\nvar $ = require('../internals/export');\nvar createHTML = require('../internals/create-html');\nvar forcedStringHTMLMethod = require('../internals/string-html-forced');\n\n// `String.prototype.link` method\n// https://tc39.github.io/ecma262/#sec-string.prototype.link\n$({ target: 'String', proto: true, forced: forcedStringHTMLMethod('link') }, {\n link: function link(url) {\n return createHTML(this, 'a', 'href', url);\n }\n});\n","var requireObjectCoercible = require('../internals/require-object-coercible');\n\nvar quot = /\"/g;\n\n// B.2.3.2.1 CreateHTML(string, tag, attribute, value)\n// https://tc39.github.io/ecma262/#sec-createhtml\nmodule.exports = function (string, tag, attribute, value) {\n var S = String(requireObjectCoercible(string));\n var p1 = '<' + tag;\n if (attribute !== '') p1 += ' ' + attribute + '=\"' + String(value).replace(quot, '"') + '\"';\n return p1 + '>' + S + '';\n};\n","var fails = require('../internals/fails');\n\n// check the existence of a method, lowercase\n// of a tag and escaping quotes in arguments\nmodule.exports = function (METHOD_NAME) {\n return fails(function () {\n var test = ''[METHOD_NAME]('\"');\n return test !== test.toLowerCase() || test.split('\"').length > 3;\n });\n};\n","import canUseDOM from './canUseDOM';\nvar size;\nexport default function scrollbarSize(recalc) {\n if (!size && size !== 0 || recalc) {\n if (canUseDOM) {\n var scrollDiv = document.createElement('div');\n scrollDiv.style.position = 'absolute';\n scrollDiv.style.top = '-9999px';\n scrollDiv.style.width = '50px';\n scrollDiv.style.height = '50px';\n scrollDiv.style.overflow = 'scroll';\n document.body.appendChild(scrollDiv);\n size = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n document.body.removeChild(scrollDiv);\n }\n }\n\n return size;\n}","import ownerDocument from './ownerDocument';\n/**\n * Return the actively focused element safely.\n *\n * @param doc the document to checl\n */\n\nexport default function activeElement(doc) {\n if (doc === void 0) {\n doc = ownerDocument();\n }\n\n // Support: IE 9 only\n // IE9 throws an \"Unspecified error\" accessing document.activeElement from an \r\n
\r\n \r\n
\r\n \r\n
\r\n Warning
\r\n \r\n\r\n
\r\n Lesson Name: {LessionName || ''}
\r\nDate: {date || ''}
\r\n\r\n
\r\n \r\n Start time: {start || ''}
\r\nEnd time: {end || ''}
\r\n\r\n \r\n
\r\n Are you sure to cancel this lesson?
\r\n\r\n \r\n \r\n
\r\n