\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default BackToLoginButton\r\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled, { css } from 'styled-components'\nimport _ from 'lodash'\n\nconst Row = ({ children, gutter = [16], ...props }) => {\n const columnGap = _.get(gutter, '[0]') / 2\n const rowGap = _.get(gutter, '[1]', gutter[0]) / 2\n return (\n \n \n {React.Children.map(children, (child) => React.cloneElement(child, { rowGap, columnGap }))}\n \n
\n )\n}\n\nRow.propTypes = {\n children: PropTypes.node,\n}\n\nexport default Row\n\nconst CustomGrid = styled.div`\n flex-flow: row wrap;\n display: flex;\n\n ${(props) => {\n if (props.margin) {\n return css`\n margin: -${(props) => props.rowGap}px -${(props) => props.columnGap}px;\n `\n }\n return ``\n }}\n`\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled, { css } from 'styled-components'\n\nconst Col = ({ children, xs, sm, md, lg, xl, xxl, ...props }) => {\n const _xxl = xxl || xl || lg || md || sm || xs || 4\n const _xl = xl || lg || md || sm || xs || 6\n const _lg = lg || md || sm || xs || 8\n const _md = md || sm || xs || 12\n const _sm = sm || xs || 24\n const _xs = xs || 24\n return (\n \n
\n \n
\n ![\"iconClose\"](\"https://img.icons8.com/ios/20/undefined/delete-sign--v1.png\")
\n \n {content?.subDescription}
\n \n {contents[0]?.image}\n {contents[0]?.description}\n
\n )}\n {content?.subDescription}
\n \n ))}\n \n {content?.image}\n {content?.description}\n
\n ))}\n {content?.subDescription}
\n \n {contents[0]?.image}\n {contents[0]?.description}\n
\n \r\n \r\n \r\n {!isModal && (\r\n \r\n this.onChangeLocale('th')}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n TH\r\n \r\n | \r\n this.onChangeLocale('en')}\r\n >\r\n EN\r\n \r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n {!isModal && (\r\n \r\n this.onChangeLocale('th')}\r\n style={{ cursor: 'pointer' }}\r\n >\r\n TH\r\n \r\n | \r\n this.onChangeLocale('en')}\r\n >\r\n EN\r\n \r\n \r\n )}\r\n
\r\n \n \n {tabData.map((item, index) => {\n return genTab(item, index, activeTab, minWidth, headBorder)\n })}\n \n {activeTab !== null && tabData[activeTab].component} \n\n
\n \n {}}\n onChange={(name, value) => {\n handleSelect(value)\n }}\n />\n
\n )\n}\n\nconst mapState = ({ Language: { locale } }) => ({\n locale,\n})\nexport default connect(mapState)(PricingSelector)\n","import React from 'react'\nimport { Typography } from 'components'\n// import { Content, Row, TextLink } from './styled'\nimport { Content, Row } from './styled'\n\nconst FreeCourse = (props) => {\n const { pricing, schoolPackage, freeCourseCount } = props\n const isReachLimit = freeCourseCount >= schoolPackage?.courseNumber\n return (\n \n Tuition Fee \n Set a tuition fee for this course \n
\n \n {/* Free */}\n {/* \n Set a tuition fee for this course\n */}\n {pricing === 'FREE_COURSE' && (\n <>\n {isReachLimit && (\n \n \n *You've reached your free course limit!\n {/* {schoolPackage?.name === 'partner' && Upgrade your school package.} */}\n \n {/* {schoolPackage?.name === 'free' && (\n {}}>\n upgrade your school package.\n \n )}\n {schoolPackage?.name === 'premium' && (\n To create this course, please change your tuition fee. \n )} */}\n \n )}\n
\n \n \n `${freeCourseCount} / ${schoolPackage?.courseNumber}`\n \n \n You can create a maximum of - free courses\n \n
\n \n )}\n \n setShownPrice((v) => !v)} />\n
\n )} */}\n \n \n Your academy hasn't verify by Classwin,\n \n \n click here\n \n \n to submit document for verification\n \n
\n )}\n \n \n Packages\n \n {/* \n Set a multiple price for a group of learners\n */}\n
\n \n {(formikProps.values.packagePrice || []).map(({ quantity, price }, index) => {\n return (\n \n deletePackage(index)}\n >\n \n \n Add Package\n \n \n
\n \n \n (Copy a link from Youtube and paste the URL into this field)\n \n {\n const { value } = e.target\n onChange('introVideo', value)\n }}\n />\n
\n \n )}\n\n \n \n (Select file from your device to upload (limit 300 MB))\n \n {\n onChange('introVideo', file.name)\n onChange('introVideoFilename', file.fileName)\n }}\n videoFilename={introVideoFilename}\n fieldValue={this.getVideoValue(field.value)}\n closeIcon={\n {\n onChange('introVideo', '')\n onChange('introVideoFilename', '')\n }}\n >\n 
\n \n }\n />\n
\n )}\n \n \n Cover image video (Optional)\n \n {\n onChange('coverImageVideo', file.name)\n }}\n onChange={onChange}\n isCrop\n aspect={1000 / 524}\n cropModal\n />\n
\n )}\n \n
\n \n \n Save\n \n
\n \n \n Assign instructor to this course\n \n
\n \n \n Instructor\n \n \n
\n \n {!readOnly && }\n {children}\n
\n setShowLess(!showLess)}>{showLess ? 'See more' : 'See less'}
\n )}\n \n )\n } else if (props.notiCount) {\n const { divClassName, labelClassName, notiCount, minWidth, ...rest } = props\n return (\n \r\n \r\n
Logout ...
\n - \n {data.map(({ id, translate, title, name, fill, bgColor, disabled }) => (\n
Wrong
\\\",\\\"delta\\\":{\\\"ops\\\":[{\\\"insert\\\":\\\"Wrong\\\\n\\\"}]}}\"\n }\n setFieldValue('question.choices', [...values.question.choices, newChoices])\n }\n\n const handleDeleteChoice = (form, uid) => {\n const { setFieldValue, values } = form\n const newChoices = values.question.choices.filter((item) => item.uid !== uid)\n // const newAnswer = values.question.answer.filter((item) => item.uid !== uid)\n // setFieldValue('question.answer', newAnswer)\n setFieldValue('question.choices', newChoices)\n const set = new Set(values.question.answer)\n set.delete(uid)\n form.setFieldValue(`question.answer`, Array.from(set))\n form.setFieldTouched(`question.answer`, true)\n }\n\n const handleSubmit = async (values) => {\n const { updateLecture, subjectId, lectureId, success, error } = props\n const { enableCompleteButton, isTimeRequired, timeRequired, isQuestionRequired, question } =\n values\n const data = { subjectId, lectureId, enableCompleteButton }\n if (enableCompleteButton) {\n if (isTimeRequired) {\n data.isTimeRequired = isTimeRequired\n data.timeRequired = timeRequired\n } else {\n data.isTimeRequired = false\n data.timeRequired = null\n }\n if (isQuestionRequired) {\n data.isQuestionRequired = isQuestionRequired\n data.question = question\n } else {\n data.isQuestionRequired = false\n data.question = null\n }\n } else {\n data.isTimeRequired = false\n data.timeRequired = null\n data.isQuestionRequired = isQuestionRequired\n data.question = null\n }\n try {\n await updateLecture(data)\n success({ title: 'Update Successfully' })\n } catch (err) {\n error({ title: 'Update Failed' })\n throw err\n }\n }\n const { enableCompleteButton, isTimeRequired, timeRequired, isQuestionRequired, question } = props\n return (\n <>\n\n {\n const value = e ? e.format() : e\n form.setFieldValue('timeRequired', value)\n }}\n value={form.values.timeRequired ? moment(form.values.timeRequired) : null}\n // value={moment('00:00', 'HH:mm')}\n showSecond={false}\n placeholder=\"HH:MM\"\n allowEmpty\n // inputReadOnly={false}\n />\n
\n )}\n *hh:mm
\nWrong
\\\",\\\"delta\\\":{\\\"ops\\\":[{\\\"insert\\\":\\\"Wrong\\\\n\\\"}]}}\"\n }\n await setFieldValue('question.choices', [...values.question.choices, newChoices])\n values.question.choices = [...values.question.choices, newChoices]\n await form.submitForm()\n }\n\n const handleDeleteChoice = async (form, uid) => {\n const { setFieldValue, values } = form\n const newChoices = values.question.choices.filter((item) => item.uid !== uid)\n // const newAnswer = values.question.answer.filter((item) => item.uid !== uid)\n // setFieldValue('question.answer', newAnswer)\n setFieldValue('question.choices', newChoices)\n const set = new Set(values.question.answer)\n set.delete(uid)\n await form.setFieldValue(`question.answer`, Array.from(set))\n form.setFieldTouched(`question.answer`, true)\n await form.submitForm()\n }\n\n const handleSubmit = async (values) => {\n const { updateLecture, subjectId, lectureId, error } = props\n const {\n enableCompleteButton,\n isTimeRequired,\n timeRequired,\n durationPercentage,\n isQuestionRequired,\n question,\n } = values\n const data = { subjectId, lectureId, enableCompleteButton }\n if (enableCompleteButton) {\n if (isTimeRequired) {\n data.isTimeRequired = isTimeRequired\n data.timeRequired = timeRequired\n data.durationPercentage = durationPercentage\n } else {\n data.isTimeRequired = false\n data.timeRequired = null\n data.durationPercentage = null\n }\n if (isQuestionRequired) {\n data.isQuestionRequired = isQuestionRequired\n data.question = question\n } else {\n data.isQuestionRequired = false\n data.question = null\n }\n } else {\n data.isTimeRequired = false\n data.timeRequired = null\n data.durationPercentage = null\n data.isQuestionRequired = isQuestionRequired\n data.question = null\n }\n try {\n await updateLecture(data)\n // success({ title: 'Update Successfully' })\n } catch (err) {\n error({ title: 'Update Failed' })\n throw err\n }\n }\n\n const debounceInput = debounce(async (payload) => {\n try {\n await handleSubmit(payload)\n } catch (error) {\n throw error\n }\n }, 3000)\n\n const Checkbox = (prop) => {\n return (\n\n {/* \n Save\n */}\n {/* {lectureType === 'browse' && (\n <>\n \n // - \n
\n \n )} */}\n {form.values.enableCompleteButton && (\n \n {/* {selectType === 'browse' && (\n - \n
\n )} */}\n {/* {form.values.isTimeRequired && (\n \n // {\n // const value = e ? e.format() : e\n // form.setFieldValue('timeRequired', value)\n // const payload = {\n // ...form.values,\n // timeRequired: value,\n // }\n // debounceInput(payload)\n // }}\n // value={form.values.timeRequired ? moment(form.values.timeRequired) : null}\n // // value={moment('00:00', 'HH:mm')}\n // showSecond\n // placeholder=\"HH:mm:ss\"\n // allowEmpty\n // // inputReadOnly={false}\n // />\n // \n )} */}\n {/* - \n
*/}\n {form.values.isQuestionRequired && (\n <>\n \n Question\n \n\n \n {({ field }) => (\n \n {\n form.setFieldValue(field.name, value)\n const payload = {\n ...form.values,\n question: { ...form.values.question, title: value },\n }\n debounceInput(payload)\n }}\n />\n \n )}\n \n \n Answers\n \n \n \n {({ field }) => (\n \n {\n form.setFieldValue(field.name, value)\n const newForm = cloneDeep(form.values)\n newForm.question.choices[index].content = value\n debounceInput(newForm)\n }}\n />\n handleDeleteChoice(form, choice.uid)}\n />\n \n )}\n \n \n \n {({ field }) => (\n \n {\n form.setFieldValue(field.name, value)\n const newForm = cloneDeep(form.values)\n newForm.question.choices[index].explainer = value\n debounceInput(newForm)\n }}\n />\n \n )}\n \n \n )\n })}\n \n )}\n \n )}\n
\n )}\n \n \n \n Add lecture completion rules\n \n \n {locale === 'th'\n ? '(กำหนดอัตราร้อยละที่ผู้เรียนต้องใช้ในการเรียนวิดีโอนี้)'\n : '(Set percentage of the video’s duration to complete this video)'}\n \n
\n \n {\n const { value } = e.target\n form.setFieldValue('durationPercentage', value)\n const payload = {\n ...form.values,\n durationPercentage: value,\n }\n debounceInput(payload)\n }}\n suffix={'%'}\n spanPadding=\"0 12px\"\n />\n
\n \n {\n const { value } = e.target\n form.setFieldValue('durationPercentage', value)\n const payload = {\n ...form.values,\n durationPercentage: value,\n }\n debounceInput(payload)\n }}\n suffix={'%'}\n spanPadding=\"0 12px\"\n />\n
\n // \n \n Question\n \n \n (Set question to complete this lecture)\n \n
\n \n \n
\n \n
\n
\n
\n \n
- \n {data.map(({ id, translate, title, name, fill, bgColor, disabled }) => (\n
- \n {data.map(({ id, translate, title, name, fill, bgColor, disabled }) => (\n
\r\n {\r\n onChange(value)\r\n setFieldValue('recaptcha', value)\r\n }}\r\n />\r\n {errors.recaptcha && (\r\n \r\n {errors.recaptcha}\r\n \r\n )}\r\n
\r\n\r\n \r\n setIsOpen(true)}\r\n >\r\n How to find certificate code?\r\n \r\n
\r\n {loading && \r\n
\r\n )}\r\n {shown && (\r\n */}\r\n setIsOpen(false)}\r\n onClickClose={() => setIsOpen(false)}\r\n contentStyle={{ width: ModalResize(width), padding: 24 }}\r\n shownXclose={true}\r\n closeStyle={isMobile ? { top: 8, right: 10 } : null}\r\n >\r\n \r\n \r\n \r\n How to find certificate code?\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 VerifyCertificatePage\r\n","/* eslint-disable no-unused-vars */\nimport React from 'react'\nimport { Redirect } from 'react-router-dom'\nimport UserLayout from 'layouts/userLayout/loadable'\nimport LogInPage from 'containers/logInPage/loadable'\nimport SignUpPage from 'containers/signUpPage/loadable'\nimport ResetPasswordPage from 'containers/resetPasswordPage/loadable'\nimport ChangePasswordPage from 'containers/changePasswordPage/loadable'\nimport VerifyEmailPage from 'containers/verifyEmailPage/loadable'\n\nconst authRoutes = {\n path: '/user',\n layout: UserLayout,\n routes: [\n {\n exact: true,\n subpath: '/',\n render: ({ match }) => \n \n \n )\n}\n\nconst FilterMyCourse = ({ value, handleChange, filter }) => {\n const [colorFilter, setColorFilter] = useState(false)\n const changeFilter = (event) => {\n setColorFilter(event)\n }\n return (\n changeFilter(event)}\n tooltip={\n \n {value.map((course, i) => {\n return (\n \n \n \n \n )\n })}\n \n }\n >\n \n \n )\n}\n\nexport default FilterMyCourse\n","/* eslint-disable no-unused-vars */\nimport React, { useState, useEffect } from 'react'\nimport { connect } from 'react-redux'\n// import _ from 'lodash'\nimport styled, { css } from 'styled-components'\n// import PageHeading from '../../components/pageHeading/loadable'\nimport FilterMyCourse from 'components/FilterMyCourse'\nimport _orderBy from 'lodash/orderBy'\nimport moment from 'moment'\n// import MyCoursePage from '../../containers/myCoursePage'\n// import AssignmentPage from '../../containers/assignmentPage'\n// import SchoolPage from '../../containers/schoolPage'\nimport theme from '../../theme'\nimport Typography from 'components/typography'\nimport TabComponent from 'components/tabComponent'\nimport get from 'lodash/get'\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n padding-top: 34px;\n`\n\nconst Head = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n //box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);\n //background: #fff;\n //border-top: 1px solid ${theme.gray8};\n\n padding: 0px 0px 0px 0px;\n height: 60px;\n @media (max-width: 1024px) {\n padding: 8px 30px;\n }\n @media (max-width: 768px) {\n padding: 8px 20px 8px 0px;\n button {\n padding: 6px;\n }\n }\n @media (max-width: 430px) {\n padding: 8px 0px;\n }\n`\n\nconst Header = styled.div`\n height: 60;\n //padding: 15px 150px;\n display: flex;\n align-items: center;\n padding: 0px 0px 0px 150px;\n gap: 32px;\n @media (max-width: 1024px) {\n padding: 15px 0px;\n }\n @media (max-width: 768px) {\n padding: 15px 0px;\n }\n`\n\nconst HeadDetail = styled.div`\n display: flex;\n align-items: center;\n //box-shadow: '0 5px 5px 0 rgba(0, 0, 0, 0.1)';\n padding: 0px 150px 0px 0px;\n @media (max-width: 1024px) {\n padding-right: 0px;\n }\n @media (max-width: 768px) {\n padding-right: 0px;\n }\n @media (max-width: 430px) {\n padding: 8px 20px;\n }\n`\nconst TabCard = styled.div`\n ${({ border }) => {\n if (border) {\n return css`\n border-bottom: 2px solid ${theme.primary1};\n `\n }\n }}\n //border-bottom: 2px solid ${theme.primary1};\n padding: 4px 8px;\n`\nconst MyCourseLayout = (props) => {\n const {\n match,\n //isLiff,\n locale,\n myCourseList,\n getMyCourseList,\n getMyAssignmentList,\n myAssignmentList,\n filter,\n setFilter,\n children,\n } = props\n const locationPath = props.location.pathname.split('/').slice(-1)[0]\n const [activePath, setActivePath] = useState(\n `/${props.location.pathname.split('/').slice(-1)[0]}`\n )\n const { currentCourse, completed } = myCourseList\n useEffect(() => {\n getMyCourseList()\n getMyAssignmentList()\n }, [getMyCourseList, getMyAssignmentList])\n\n const countCourse = (currentCourse, completed) => [currentCourse.length, completed.length]\n const amountCourse = countCourse(currentCourse, completed)\n\n const tabData = [\n {\n id: 'tab.label.Course',\n label: 'Courses',\n key: '0',\n component: null,\n path: '/courses',\n style: { height: 30 },\n },\n // {\n // id: 'tab.label.Assignment',\n // label: 'Assignment',\n // key: '1',\n // component: null,\n // path: '/assignments',\n // },\n {\n id: 'tab.label.Academy',\n label: 'Academy',\n key: '2',\n component: null,\n path: '/schools',\n },\n ]\n\n const valueSelect = [\n { label: locale === 'en' ? 'In Progress' : 'กำลังเรียน', value: 'In Progress' },\n { label: locale === 'en' ? 'Complete' : 'เรียนจบแล้ว', value: 'Complete' },\n ]\n const valueSelectCourse = valueSelect.map((status, i) => {\n return {\n ...status,\n amountCourse: amountCourse[i],\n }\n })\n const handleChange = (index) => {\n filter[index] = !filter[index]\n setFilter([filter[0], filter[1]])\n }\n\n const currentAssignment = myAssignmentList.filter(({ attemp, dueDate }) =>\n dueDate ? attemp === 0 && moment().isBefore(dueDate) : attemp === 0\n )\n const countCourseAssignment = (currentCourse, completed) => [\n currentCourse.length,\n completed.length,\n ]\n const completedAssignment = myAssignmentList.filter(({ attemp }) => attemp > 0)\n const amountCourseAssignment = countCourseAssignment(currentAssignment, completedAssignment)\n\n const valueSelectCourseAssignment = valueSelect.map((status, i) => {\n return {\n ...status,\n amountCourse: amountCourseAssignment[i],\n }\n })\n const onChangeTab = (path) => {\n props.history.push(match.url + path)\n setActivePath(path)\n }\n const pathname = get(location, 'pathname', false)\n\n return (\n \n \n {/* {filter[0] === filter[1] && (\n \n All Courses\n \n )}\n {filter[0] === true && filter[1] === false && (\n \n In Progress\n \n )}\n {filter[0] === false && filter[1] === true && (\n \n Complete\n \n )} */}\n {tabData.map((item, index) => {\n return (\n onChangeTab(item.path)}\n border={locationPath === item.path.slice(1) ? true : false}\n >\n \n {item.label}\n \n \n )\n })}\n {/* \n \n {locationPath === 'courses' ? (\n \n \n\n {children}\n \n )\n}\n\nconst mapState = (state) => ({\n isLiff: state.Liff.isLiff,\n locale: state.Language.locale,\n myCourseList: state.MyCourse.myCourseList,\n myAssignmentList: _orderBy(\n state.MyAssignment.myAssignmentList.filter((item) => moment().isAfter(item.publishDate)),\n ['publishDate'],\n ['asc']\n ),\n filter: state.MyCourse.filter,\n})\n\nconst mapDispatch = (dispatch) => ({\n getMyCourseList: dispatch.MyCourse.getMyCourseList,\n getMyAssignmentList: dispatch.MyAssignment.getMyAssignmentList,\n setFilter: dispatch.MyCourse.setFilter,\n})\n\nexport default connect(mapState, mapDispatch)(MyCourseLayout)\n","export default __webpack_public_path__ + \"static/media/classroom-01.8e349f51.svg\";","export default __webpack_public_path__ + \"static/media/Clock.4d47b693.svg\";","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { withRouter } from 'react-router-dom'\nimport { connect } from 'react-redux'\nimport Typography from '../typography'\nimport getImageUrl from '../../utils/getImageUrl'\nimport styled, { css } from 'styled-components'\nimport Icon from '../icon/loadable'\nimport ClassIcon from '../../images/classroom-01.svg'\nimport ClockIcon from '../../images/Clock.svg'\nimport FileTextIcon from '../../images/icons/FileText.svg'\nimport OnlineIcon from '../../images/Cloud.svg'\n//import ShareIcon from '../../images/icons/Share.svg'\nimport Avatar from '../avatar/loadable'\nimport Share from '../../containers/courseDetail/Share'\nimport _get from 'lodash/get'\n// import { LargeDesktop, MobileAndTablet } from '../../utils/displayResponsive'\nimport { Line } from 'rc-progress'\nimport ImageRatio from 'components/ImageRatio'\n\nconst CardTitle = styled.div`\n /* height: 250px; */\n\n padding: 20px;\n background-color: #fff;\n border-radius: 10px;\n margin-top: 30px;\n margin-bottom: 30px;\n display: flex;\n justify-content: flex-start;\n box-shadow: rgb(0 0 0 / 10%) 0px 5px 5px 0px;\n @media (max-width: 768px) {\n margin-bottom: 30px;\n margin-top: 0px;\n border-radius: 0px;\n }\n @media (max-width: 767px) {\n flex-direction: column;\n }\n`\n\n// const CourseImage = styled.div`\n// min-width: 120px;\n// background-image: url(${(props) => props.src});\n// background-position: center;\n// background-size: cover;\n// background-repeat: no-repeat;\n// border-top-left-radius: 4px;\n// border-top-right-radius: 4px;\n// object-fit: cover;\n// width: 100%;\n// height: 100%;\n// //height: 250px;\n// /* ${({ width }) => css`\n// width: ${width};\n// `} */\n// // margin-bottom: -2px;\n// // @media (max-width: 768px) {\n// // margin-bottom: -7px;\n// // }\n// `\n\nconst CourseText = styled.div`\n margin-left: 20px;\n width: 45%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n @media (max-width: 767px) {\n width: 100%;\n margin-left: 0px;\n margin-top: 15px;\n }\n`\n\nconst CourseTitle = styled(Typography)`\n margin-bottom: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n /* @media (max-width: 1024px) {\n max-width: 350px;\n } */\n @media (max-width: 768px) {\n max-width: 620px;\n }\n`\nconst CourseDes = styled(Typography)`\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\n color: black;\n font-size: 14px;\n`\nconst IconWithText = styled.div`\n display: flex;\n align-items: center;\n //width: 100px;\n color: ${(props) => (props.primary ? props.theme.primary2 : props.theme.grey)};\n font-size: ${({ theme }) => theme['text-xs']};\n img {\n margin-right: 5px;\n }\n ${({ start }) => {\n if (start) {\n return css`\n justify-content: flex-start;\n `\n }\n }}\n .after {\n // position: relative;\n // padding: 0 16px 0 0;\n }\n .after:after {\n content: '';\n position: absolute;\n height: 15px;\n background-color: ${(props) => props.theme.gray6};\n top: 3px;\n right: 8px;\n }\n\n &.mode img {\n filter: invert(40%);\n }\n`\nconst Bottom = styled.div`\n display: flex;\n /* gap: 24px; */\n align-items: center;\n\n .item1 {\n display: flex;\n margin: 16px 24px 0px 0px;\n flex-direction: row;\n align-items: center;\n }\n\n @media (max-width: 1024px) {\n flex-direction: row;\n align-items: center;\n .item1 {\n margin: 16px 12px 0px 0px;\n }\n }\n @media (max-width: 768px) {\n flex-direction: row;\n align-items: center;\n }\n @media (max-width: 425px) {\n justify-content: space-between;\n\n .item1 {\n margin-right: 15px;\n }\n }\n @media (max-width: 375px) {\n .item1 {\n margin-right: 15px;\n }\n }\n`\nconst Hilight = styled(Typography)`\n ${({ schoolLink }) => {\n if (schoolLink) {\n return css`\n cursor: pointer;\n `\n }\n return css``\n }}\n min-width: 120px;\n max-width: 120px;\n padding-left: 10px;\n\n &.school {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n @media (max-width: 500px) {\n min-width: 100px;\n }\n\n @media (max-width: 400px) {\n min-width: 80px;\n }\n`\nconst Image = styled.div`\n height: 100%;\n margin-right: 20px;\n width: 50%;\n @media (max-width: 767px) {\n width: 100%;\n margin-right: 0px;\n }\n`\nconst LineCon = styled.div`\n margin-top: -2px;\n @media (max-width: 768px) {\n margin-top: -7px;\n }\n`\nconst Tag = styled.div`\n width: fit-content;\n height: 32px;\n padding: 6px 15.5px;\n border-radius: 5px;\n align-items: center;\n display: flex;\n background-color: #ebf4f9;\n margin-bottom: -40px;\n left: 10px;\n position: relative;\n bottom: 57px;\n color: #3d4453;\n font-size: 12px;\n`\n\nconst CourseTitleHeading = ({\n title,\n shortDescription,\n image,\n type,\n estimateTimeUsageHr,\n estimateTimeUsageMin,\n teacherImage,\n teacherName,\n teacherId = undefined,\n schoolLogo,\n schoolName,\n lectureNum: lNumb,\n courseSlug,\n //locale,\n category,\n //courseList,\n //name,\n summary: {\n summary: { courseProject },\n },\n ...props\n}) => {\n const checkIcon = (type) => {\n if (type === 'online') {\n return \n \n \n \n {category?.name} \n \n \n \n \n \n \n )\n}\n\nCourseTitleHeading.defaultProps = {\n title: 'Course Title',\n summary: {\n assignments: [],\n lectures: [],\n summary: {\n courseProject: { current: 0, full: 0 },\n courseAssignment: { current: 0, full: 0 },\n },\n },\n shortDescription: '',\n image: 'https://via.placeholder.com/270x180',\n teacherImage: 'https://via.placeholder.com/40',\n teacherName: 'Nan BrownBrownBrown',\n schoolName: 'AA School',\n schoolLogo:\n 'https://dev-api-classwin.dev.witsawa.com/api/Containers/witsawa-classwin/cover/b8dfabc5-d28c-4526-bee8-de52cba937b0.png?width=400&height=400',\n}\n\nCourseTitleHeading.propTypes = {\n title: PropTypes.string,\n shortDescription: PropTypes.string,\n image: PropTypes.string,\n teacherImage: PropTypes.string,\n teacherName: PropTypes.string,\n schoolName: PropTypes.string,\n estimateTimeUsageHr: PropTypes.number,\n estimateTimeUsageMin: PropTypes.number,\n}\n\nconst mapState = (state) => {\n return {\n Course: state.courseList,\n permissions: state.Permissions.permissions,\n }\n}\nconst mapDispatch = (dispatch) => {\n return {\n getPermissions: dispatch.Permissions.getPermissions,\n }\n}\n\nexport default connect(mapState, mapDispatch)(withRouter(CourseTitleHeading))\n","export default __webpack_public_path__ + \"static/media/firecracker.387f6b96.svg\";","export default __webpack_public_path__ + \"static/media/BellSimple.7aef59b3.svg\";","export default __webpack_public_path__ + \"static/media/Download.f5cf2fa2.svg\";","import React from 'react'\nimport { withRouter, Link } from 'react-router-dom'\nimport FireIcon from '../../images/firecracker.svg'\nimport BellIcon from '../../images/BellSimple.svg'\nimport DownloadIcon from '../../images/Download.svg'\nimport Icon from '../icon/loadable'\nimport styled, { css } from 'styled-components'\nimport Typography from '../typography'\nimport { Button } from '../index'\nimport _isEmpty from 'lodash/isEmpty'\nimport { Custom } from '../../utils/displayResponsive'\nconst IconWithText = styled.div`\n display: flex;\n align-items: center;\n ${({ start }) => {\n if (start) {\n return css`\n justify-content: flex-start;\n `\n }\n }}\n\n &.mode img {\n filter: invert(40%);\n }\n`\nconst Alert = styled.div`\n padding: 12px;\n background-color: #ebf4f9;\n height: 68px;\n //filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));\n width: 1200px;\n display: flex;\n justify-content: space-between;\n`\nconst NonCertificate = styled.div`\n border: solid;\n border-radius: 10px;\n padding: 9px;\n display: flex;\n border-color: #253e87;\n`\n\nconst CourseAlert = ({ isOpenedCongratulation, enrollment, courseGrade, certStatus }) => {\n const hasIssuedCertificate = !_isEmpty(courseGrade) || certStatus?.hasIssuedCertificate\n const downloadCertificate = () => {\n if (enrollment?.isCompleted && hasIssuedCertificate) {\n return (\n \n \n \n \n \n แจ้งเตือนเมื่อได้รับประกาศนียบัตร\n \n \n \n \n \n \n )\n }\n\n if (isOpenedCongratulation) {\n return (\n \n \n \n \n {downloadCertificate()}\n \n
\n )\n }\n return null\n}\n\nexport default withRouter(CourseAlert)\n","// import { Button } from 'components'\nimport React from 'react'\nimport ReactModal from 'react-modal'\nimport ErrorBoundary from '../../components/errorBoundary'\nimport NotificationPopup from '../../components/notificationPopup/loadable'\n\nconst overlay = {\n zIndex: 1000,\n top: 68,\n}\nconst content = {\n borderRadius: 8,\n border: '0px #fff',\n padding: 0,\n overflow: 'hidden',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n}\n\nconst ModalMobileNoti = ({ isOpen = false, handleTogglePopup, onClose }) => {\n return (\n \r\n \r\n \r\n Certificate\r\n \r\n \r\n {validCert === 'valid' ? (\r\n \r\n Valid\r\n \r\n ) : (\r\n \r\n Expired\r\n \r\n )}\r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n {haveBadge ? (\r\n <>\r\n \r\n Badge\r\n \r\n \r\n Detail\r\n \r\n {/* \r\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\r\n has been the industry’s standard dummy text ever.\r\n */}\r\n \r\n \r\n Issued on:\r\n \r\n \r\n {moment(data?.certificate?.certificatedDate).format('DD MMMM YYYY')}\r\n \r\n \r\n \r\n \r\n Issued by:\r\n \r\n \r\n {data?.certificate?.certificateTemplate?.schoolName}\r\n \r\n \r\n \r\n \r\n Issued using:\r\n \r\n \r\n Classwin\r\n \r\n \r\n \r\n \r\n Issued to:\r\n \r\n \r\n {data?.certificate?.certificateTemplate?.studentName}\r\n \r\n \r\n \r\n \r\n Expiry on:\r\n \r\n \r\n {data?.certificate?.expiredDate\r\n ? moment(data?.certificate?.expiredDate).format('DD MMMM YYYY')\r\n : 'No Expire'}\r\n \r\n \r\n \r\n \r\n Status:\r\n \r\n \r\n Verified\r\n \r\n \r\n
\r\n \r\n )}\r\n {showButton && (\r\n \r\n history.push('/')}\r\n style={{ maxWidth: 400, width: '100%', margin: '0 auto' }}\r\n >\r\n Enter Classwin\r\n \r\n
\r\n )}\r\n sss
,\n },\n {\n exact: true,\n subpath: '/register',\n component: SignUpPage,\n },\n {\n exact: true,\n subpath: '/forgotPassword',\n component: ResetPasswordPage,\n },\n {\n exact: true,\n subpath: '/changePassword',\n component: ChangePasswordPage,\n },\n {\n exact: true,\n subpath: '/verifyEmail',\n component: VerifyEmailPage,\n },\n ],\n}\n\nexport default authRoutes\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import styled, { css } from 'styled-components'\nimport { Checkbox as AntdCheckbox } from 'antd'\n\nconst Button = styled.button`\n width: 101px;\n height: 40px;\n background: ${(props) => props.color};\n border: 0px solid ${(props) => props.color};\n border-radius: 6px;\n align-self: center;\n &:hover {\n cursor: pointer;\n }\n`\nconst Font = styled.p`\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n margin-bottom: 0px;\n color: ${(props) => props.color};\n`\nconst Label = styled.label`\n font-style: normal;\n font-weight: ${(props) => (props.check ? 700 : 400)};\n font-size: 14px;\n line-height: 22px;\n margin-bottom: 0px;\n color: ${(props) => (props.check ? '#253e87' : props.color || '#ffffff')};\n &:hover {\n cursor: pointer;\n }\n`\nconst Wrapper = styled.section`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n`\nconst Content = styled.section`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 2px 0;\n height: 30px;\n gap: 8px;\n`\nconst Div = styled.div`\n display: flex;\n align-items: center;\n padding: 0px 16px 0px 24px;\n &:hover {\n cursor: pointer;\n }\n`\nconst Img = styled.img``\n\nconst Checkbox = styled.input`\n width: 1em;\n height: 1em;\n background-color: blue;\n &:hover {\n cursor: pointer;\n }\n`\nconst CustomCheckbox = styled(AntdCheckbox)`\n ${(props) =>\n props.backgroundColor &&\n css`\n & .ant-checkbox-checked .ant-checkbox-inner {\n background-color: ${props.backgroundColor};\n border-color: ${props.backgroundColor};\n }\n `}\n`\nconst NotificationContainer = styled.div`\n background: #fff;\n display: flex;\n flex-direction: column;\n padding: 24px 0px;\n width: 320px;\n border-radius: 4px;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);\n overflow: auto;\n\n @media (max-width: 768px) {\n width: 320px;\n box-shadow: 0 0 0 0 transparent;\n }\n\n @media (max-width: 426px) {\n width: 100vw;\n box-shadow: 0 0 0 0 transparent;\n }\n`\nexport {\n Button,\n Font,\n Label,\n Wrapper,\n Content,\n Div,\n Img,\n Checkbox,\n CustomCheckbox,\n NotificationContainer,\n}\n","export default __webpack_public_path__ + \"static/media/FunnelSimple.a6501591.svg\";","export default __webpack_public_path__ + \"static/media/FunnelSimple1.70f372d1.svg\";","import React from 'react'\nimport styled from 'styled-components'\n\nconst Div = styled.div`\n &:hover {\n background-color: ${(props) => props.theme.primary12};\n }\n`\n\nconst ColorFilter = ({ children }) => {\n return {children}
\n}\n\nexport default ColorFilter\n","import React, { Fragment, useState } from 'react'\nimport {\n Button,\n Font,\n Label,\n Wrapper,\n Content,\n CustomCheckbox,\n Div,\n Img,\n NotificationContainer,\n} from './style'\nimport FunnelSimple from '../FilterCourse/FunnelSimple.svg'\nimport FunnelSimple1 from '../FilterCourse/FunnelSimple1.svg'\nimport Tooltip from 'components/tooltip'\nimport ColorFilter from './ColorFilter'\n\nconst ContentCheckbox = ({ data, onChange, checked }) => {\n return (\n <>\n \n handleChange(i)}\n checked={filter[i]}\n />\n
\n \n \n คอร์สเรียนของฉัน\n \n
\n \n \n \n \n {title}\n \n\n \n \n {shortDescription}\n \n \n
\n \n \n \n {estimateTimeUsageHr} ชั่วโมง {estimateTimeUsageMin} นาที\n \n \n \n \n {lectureNum} Lectures\n \n \n \n {checkIcon(type)}\n \n {courseTypes[type]}\n \n \n
\n \n
\n \n \n Instructor\n \n \n {teacherName}\n \n
\n \n
\n \n \n Academy\n \n \n {schoolName}\n \n
\n \n \n {}}\n id=\"myCourse.lecture.progress.complete.button\"\n primary\n >\n \n ดาวน์โหลดใบประกาศนียบัตร\n \n \n \n \n {}}\n id=\"myCourse.lecture.progress.complete.button\"\n >\n \n
\n \n )\n }\n return (\n \n \n \n ยินดีด้วย คุณเรียนจบคอร์สนี้แล้ว!\n \n \n ประกาศนียบัตรของคุณกำลังอยู่ในระหว่างการอนุมัติจาก Academy\n \n \n \n \n ยินดีด้วย จบคอร์สนี้แล้ว!\n \n รอการอนุมัติจาก Academy \n \n
\n \n {/* \n \n {courseTypes[data.type]} \n \n \n {data.title} \n \n \n {data.shortDescription}\n \n \n
\n \n
\n \n
\n \n
\n \n \n {type === 'quiz'\n ? 'แบบทดสอบ'\n : lectureType === 'browse'\n ? 'อัพโหลดวีดีโอ'\n : lectureType === 'videoLink'\n ? 'Link วีดีโอ'\n : lectureType === 'lectureSlide'\n ? 'ไฟล์ PDF'\n : lectureType === 'paragraph'\n ? 'เนื้อหา'\n : 'เนื้อหา'}\n \n {/* \n 30 min\n */}\n
\n \n \n )\n}\n\nexport default withRouter(LectureItemDetail)\n","/* eslint-disable no-unused-vars */\nimport React, { useMemo, createRef, useEffect } from 'react'\nimport { connect } from 'react-redux'\nimport { Typography } from 'components'\nimport LectureItemDetail from './LectureItemDetail'\nimport styled, { css } from 'styled-components'\nimport Icon from '../../../../components/icon/loadable'\nimport ArrowRightWhite from '../../../../images/icons/arrowRightWhite.svg'\nconst Content = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n overflow-x: scroll;\n overflow-y: hidden;\n width: 100%;\n ::-webkit-scrollbar {\n height: 6px;\n }\n margin: 16px 4px 16px 0px;\n`\nfunction LectureDetail(props) {\n const { data, setIsDetail, locale, onNext, match } = props\n\n const lectureData = useMemo(() => {\n let data1 = []\n data?.map((item) => {\n item?.contents?.map((lecture) => {\n data1.push(lecture)\n })\n })\n return data1\n }, [data])\n\n const arrLength = lectureData.length\n const elRefs = React.useRef([])\n\n if (elRefs.current.length !== arrLength) {\n // add or remove refs\n elRefs.current = Array(arrLength)\n .fill()\n .map((_, i) => elRefs.current[i] || createRef())\n }\n\n const executeScroll = (i) => {\n elRefs?.current?.[i]?.current?.scrollIntoView?.({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'start',\n })\n }\n useEffect(() => {\n {\n lectureData?.map((item, i) => {\n if (item?.id === match?.params?.lectureId) {\n elRefs?.current?.[i]?.current?.scrollIntoView?.({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'start',\n })\n }\n })\n }\n }, [match?.params?.lectureId, lectureData])\n return (\n \n
\n \n \n {locale === 'en' ? 'Lecture' : 'เลคเชอร์'}\n \n {\n setIsDetail(true)\n }}\n >\n \n {locale === 'en' ? 'See more' : 'ดูเพิ่มเติม'}\n \n
\n \n
\n executeScroll(i)} key={item?.id} ref={elRefs.current[i]}>\n
\n )\n })}\n \n \n \n {/* \n \n \n */}\n
\n ${value?.caption}
`,\r\n delta: { ops: [{ insert: `${value?.caption}\\n` }] },\r\n }),\r\n media: [\r\n {\r\n name: fileRes.result.files.file[0].name,\r\n originalFilename: fileRes.result.files.file[0].originalFilename,\r\n },\r\n ],\r\n appUserId: userId,\r\n courseId,\r\n feedId,\r\n }\r\n } else {\r\n obj = {\r\n richMessage: JSON.stringify({\r\n content: `${value?.caption}
`,\r\n delta: { ops: [{ insert: `${value?.caption}\\n` }] },\r\n }),\r\n media: [\r\n {\r\n name: fileRes.result.files.file[0].name,\r\n originalFilename: fileRes.result.files.file[0].originalFilename,\r\n },\r\n ],\r\n appUserId: userId,\r\n feedId,\r\n }\r\n }\r\n const res = await postComment(obj)\r\n isReply\r\n ? setCommentReply({ isMyLike: false, appUser, ...res })\r\n : setComment({\r\n isMyLike: false,\r\n appUser,\r\n ...res,\r\n })\r\n onClose()\r\n }\r\n return (\r\n 400 ? { overflow: 'scroll', height: 400 } : undefined}>\r\n \r\n
\r\n \n \n {showAll ? 'See less' : 'See more'}\n \n
\n \r\n {\r\n setTextInput(value)\r\n }}\r\n showToolbar={false}\r\n // labelFontSize=\"text-lg\"\r\n noPadding\r\n noBorderRadius\r\n autoHeight\r\n fontSize=\"text-lg\"\r\n padding={0}\r\n />\r\n
\r\n {photo && (\r\n \r\n setPhoto(null)}\r\n style={{\r\n width: 24,\r\n height: 24,\r\n position: 'absolute',\r\n right: 16,\r\n cursor: 'pointer',\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n {\r\n return setPhoto(value)\r\n }}\r\n >\r\n
\r\n \r\n \r\n {`${appUser.firstname} ${appUser.lastname}`} */}\r\n \r\n
\r\n {photo && (\r\n \r\n {\r\n setTextInput(value)\r\n }}\r\n showToolbar={false}\r\n // labelFontSize=\"text-lg\"\r\n noPadding\r\n noBorderRadius\r\n autoHeight\r\n fontSize=\"text-base\"\r\n padding={0}\r\n />\r\n
\r\n \r\n setPhoto(null)}\r\n style={{\r\n width: 24,\r\n height: 24,\r\n position: 'absolute',\r\n right: 16,\r\n cursor: 'pointer',\r\n }}\r\n />\r\n
\r\n )}\r\n {/* \r\n {\r\n return setPhoto(value)\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n {\r\n return setPhoto(value)\r\n }}\r\n >\r\n
\r\n \r\n \n \n {showAll ? 'See less' : 'See more'}\n \n
\n \n \n \n \n {media && (\n
\n \n )}\n {/* {isMe && (\n \n \n {`${appUser?.firstname} ${appUser?.lastname}`}\n \n \n •\n \n \n {createdCommentTimes}\n \n {/* {isMe && (\n setIsShown((prev) => !prev)}\n style={{\n marginLeft: 6,\n opacity: showTooltip ? 1 : 0,\n transition: '0.2s',\n width: 30,\n }}\n tooltip={\n {\n setIsShown(false)\n Confirm.open({\n onCancel: () => Confirm.close(),\n confirmText: locale === 'en' ? 'Confirm' : 'ยืนยัน',\n cancelText: locale === 'en' ? 'Cancel' : 'ยกเลิก',\n onConfirm: () => {\n handleDel({ feedId: id, courseId: course && course.id }, 2)\n Confirm.close()\n },\n title: locale === 'en' ? 'Confirm delete' : 'ยืนยันการลบ',\n subtitle:\n locale === 'en'\n ? 'Do you want to delete your comment?'\n : 'คุณต้องการลบข้อความแสดงความคิดเห็นใช่หรือไม่',\n })\n }}\n handleEdit={() => setIsEdit(true)}\n />\n }\n >\n
\n \n {/* {\n return item.name\n })\n )}\n alt=\"\"\n onClick={() => {\n setOpenModalImageId(id)\n }}\n />\n {openModalImageId === id && media && (\n {\n // return item.name\n // })\n // )}\n large={getImageUrl(\n media?.map((item) => {\n return item.name\n })\n )}\n // meta={() => {\n // return (\n // {\n // setOpenModalImageId(null)\n // setDrawingModalId(id)\n // setDrawingToggle(true)\n // setIsReplyDrawing(true)\n // }}\n // >\n // [icon]\n // \n // )\n // }}\n onClose={() => setOpenModalImageId(null)}\n hideDownload\n />\n )}\n {/* setDrawingModalId(null)}\n image={media}\n drawingToggle={drawingToggle}\n feedId={id}\n courseId={course?.id}\n isReply={isReplyDrawing}\n /> */}\n
\n )}\n \n {/* \n {appUser?.firstname} {appUser?.lastname}\n \n • \n \n {createdCommentTimes}\n */}\n \n {`${appUser?.firstname} ${appUser?.lastname}`}\n \n \n •\n \n \n {createdCommentTimes}\n \n {/* {isMe && (\n setIsShown((prev) => !prev)}\n style={{\n marginLeft: 6,\n opacity: showTooltip ? 1 : 0,\n transition: '0.2s',\n width: 30,\n }}\n tooltip={\n {\n setIsShown(false)\n Confirm.open({\n onCancel: () => Confirm.close(),\n confirmText: locale === 'en' ? 'Confirm' : 'ยืนยัน',\n cancelText: locale === 'en' ? 'Cancel' : 'ยกเลิก',\n onConfirm: () => {\n handleDel({ feedId: id, courseId: course && course.id }, 2)\n Confirm.close()\n },\n title: locale === 'en' ? 'Confirm Delete' : 'ยืนยันการลบ',\n subtitle:\n locale === 'en'\n ? 'Do you want to delete your comment?'\n : 'คุณต้องการลบข้อความแสดงความคิดเห็นใช่หรือไม่',\n })\n }}\n handleEdit={() => setIsEdit(true)}\n />\n }\n >\n
\n \n \n \n {isMyLike ? (\n onLike(id, 2)} />\n ) : (\n onLike(id, 2)} />\n )}\n \n {`${countLikes}`}\n \n \n {\n setReplyId(id)\n setTextInput(null)\n setIsEdit(false)\n onClickReply(id)\n }}\n >\n {showReplyId === id ? (\n \n Reply\n \n \n
\n \n \n {course ? (\n \n \n <CourseName\n bold\n lineHeight={1}\n numberOfLines={1}\n style={{\n cursor: 'pointer',\n lineHeight: 1.5,\n maxWidth: '700px',\n minHeight: '18px',\n color: theme.dark2,\n }}\n onClick={() =>\n history.push(\n myCourseIds.includes(course?.id)\n ? `/my-course/courses/${course?.id}/discussion`\n : `/schools/${course?.schoolId}/curriculum/manage/${course?.id}/discussion`\n )\n }\n >\n {course?.name}\n </CourseName>\n <div\n style={{\n display: 'flex',\n\n alignItems: 'center',\n }}\n >\n <Desc color=\"dark2\" bold>\n {`${appUser?.firstname} ${appUser?.lastname}`}\n </Desc>\n <Desc margin={'0px 5px 0px 5px'} color=\"dark2\">\n •\n </Desc>\n <Desc margin={'0px'} color=\"dark2\">\n {createdTimes}\n </Desc>\n <FollowButton\n dataIntro=\"feed2\"\n isMe={isMe}\n followed={followed}\n onFollowFeed={onFollowFeed}\n appUser={appUser}\n handleOpenFollowModal={handleOpenFollowModal}\n />\n </div>\n \n
\n \n {\n setIsEdit(isEdit)\n setEditingFeedDetail({ richMessage, media, id })\n }}\n />\n
\n \n \n {\n return item.name\n })\n )}\n alt=\"\"\n onClick={() => setOpenModalImageId(id)}\n />\n \n {openModalImageId === id && media && (\n {\n // return item.name\n // })\n // )}\n large={getImageUrl(\n media?.map((item) => {\n return item.name\n })\n )}\n meta={() => {\n return (\n {\n setOpenModalImageId(null)\n setDrawingModalId(id)\n setDrawingToggle(true)\n }}\n />\n )\n }}\n onClose={() => setOpenModalImageId(null)}\n hideDownload\n />\n )}\n setDrawingModalId(null)}\n image={media?.[0]?.name}\n drawingToggle={drawingToggle}\n feedId={id}\n courseId={courseId}\n profileImage={profileImage}\n userFirstname={appUser?.firstname}\n />\n
\n )}\n \n
\n \n
\n \n \n \n \n \n \n \n {`${appUser?.firstname} ${appUser?.lastname}`}\n \n \n •\n \n \n {createdTimes}\n \n {/*
\n \n {\n setIsEdit(isEdit)\n setEditingFeedDetail({ richMessage, media, id })\n }}\n />\n
\n \n \n {\n return item.name\n })\n )}\n alt=\"\"\n onClick={() => setOpenModalImageId(id)}\n />\n \n {openModalImageId === id && media && (\n {\n // return item.name\n // })\n // )}\n large={getImageUrl(\n media?.map((item) => {\n return item.name\n })\n )}\n meta={() => {\n return (\n {\n setOpenModalImageId(null)\n setDrawingModalId(id)\n setDrawingToggle(true)\n }}\n />\n )\n }}\n onClose={() => setOpenModalImageId(null)}\n hideDownload\n />\n )}\n setDrawingModalId(null)}\n image={media?.[0]?.name}\n drawingToggle={drawingToggle}\n feedId={id}\n courseId={courseId}\n profileImage={profileImage}\n userFirstname={appUser?.firstname}\n />\n
\n )}\n \n
\n {/* \n \n {isMobile ? (\n {\n setIsOpen(true)\n setPhoto(null)\n setTextInput('')\n }}\n >\n \n {locale === 'en' ? 'Start conversation' : 'เริ่มต้นสนทนา'}\n \n \n ) : (\n <>\n \n {locale === 'en' ? 'Discussion' : 'บอร์ดสนทนา'}\n \n {\n setIsOpen(true)\n setPhoto(null)\n setTextInput('')\n }}\n >\n \n {locale === 'en' ? 'Start conversation' : 'เริ่มต้นสนทนา'}\n \n \n \n )}\n \n {locale === 'en' ? 'Start Conversation' : 'เริ่มต้นบทสนทนา'}\n \n }\n onCancel={handleCancel}\n closeIcon={
}\n >\n \n \n \n
\n \n \n \n \n \n \n
\n {photo && (\n \n {\n setTextInput(value)\n }}\n showToolbar={false}\n // labelFontSize=\"text-lg\"\n noPadding\n noBorderRadius\n autoHeight\n fontSize=\"text-base\"\n padding={0}\n />\n
\n \n setPhoto(null)}\n style={{\n width: 24,\n height: 24,\n position: 'absolute',\n right: 16,\n cursor: 'pointer',\n }}\n />\n
\n )}\n \n \n {\n return setPhoto(value)\n }}\n >\n
\n \n \n \n \n {title}\n \n \n โดย {teacherName}\n \n \n {shortDescription}\n \n \n
\n \n \n \n {estimateTimeUsageHr} ชั่วโมง\n \n \n {estimateTimeUsageMin} นาที\n \n \n\n \n {type === 'online' ? (\n \n {courseTypes[type]}\n \n \n \n \n {courseProject?.full} Lectures\n \n \n
\n \n setOpenModal(true)}\n >\n \n {locale === 'en' ? 'share' : 'แชร์'}\n */}\n \n
\n \n \n Academy\n \n \n {schoolName}\n \n
\n \n \n {preTest &&
\n \n \n \n setMenu('lecture')}\n activeText={menu === 'lecture' ? true : false}\n >\n \n {locale === 'en' ? 'Lecture' : 'เลคเชอร์'}\n \n \n setMenu('discussion')}\n activeText={menu === 'discussion' ? true : false}\n >\n \n {locale === 'en' ? 'Discussion' : 'บอร์ดสนทนา'}\n \n \n \n {menu === 'lecture' && (\n
\n )\n}\n\nconst mapState = ({ Language: { locale } }) => ({ locale })\nexport default connect(mapState, null)(DetailContentMobile)\n","/* eslint-disable no-unused-vars */\nimport React, { useEffect, useState } from 'react'\nimport { connect } from 'react-redux'\nimport { withRouter } from 'react-router-dom'\nimport styled, { css } from 'styled-components'\nimport { Typography } from 'components'\nimport Icon from '../../../../components/icon/loadable'\nimport Avatar from '../../../../components/avatar/loadable'\nimport IconClock from '../../../../images/icons/black-clock.svg'\nimport IconLecture from '../../../../images/icons/DarkIcon/Black-lecture.svg'\nimport IconShare from '../../../../images/icons/DarkIcon/Dark-Share.svg'\nimport IconCloud from '../../../../images/icons/black-cloud.svg'\nimport IconClassroom from '../../../../images/icons/black-classroom.svg'\nimport LectureDetail from './LectureDetail'\nimport Discussion from './Discussion'\nimport DetailContentMobile from './DetailContentMobile'\nimport ShareModal from 'containers/courseDetail/ShareModal'\nconst Container = styled.div`\n //min-height: 100%;\n width: 100%;\n //padding: 16px;\n background-color: #222223;\n //padding: 16px 16px 16px 16px;\n`\nconst IconWithText = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n //width: 100px;\n color: ${(props) => (props.primary ? props.theme.primary2 : props.theme.grey)};\n font-size: ${({ theme }) => theme['text-xs']};\n img {\n margin-right: 0px;\n }\n ${({ start }) => {\n if (start) {\n return css`\n justify-content: flex-start;\n `\n }\n }}\n .after {\n // position: relative;\n // padding: 0 16px 0 0;\n }\n .after:after {\n content: '';\n position: absolute;\n height: 15px;\n background-color: ${(props) => props.theme.gray6};\n top: 3px;\n right: 8px;\n }\n\n &.mode img {\n filter: invert(40%);\n }\n`\nconst Hilight = styled(Typography)`\n ${({ schoolLink }) => {\n if (schoolLink) {\n return css`\n cursor: pointer;\n `\n }\n return css``\n }}\n min-width: 120px;\n max-width: 120px;\n padding-left: 10px;\n\n &.school {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n @media (max-width: 500px) {\n min-width: 100px;\n }\n\n @media (max-width: 400px) {\n min-width: 80px;\n }\n`\nfunction DetailMobile(props) {\n const {\n title,\n teacherName,\n shortDescription,\n estimateTimeUsageHr,\n estimateTimeUsageMin,\n lectureNum,\n type,\n courseId,\n data,\n preTest,\n postTest,\n courseSlug,\n locale,\n courseProject,\n } = props\n const courseTypes = {\n online: 'Online',\n classroom: 'Classroom',\n }\n\n const [openModal, setOpenModal] = useState(false)\n\n const url = `https://${window.location.host}/courses/${courseSlug}`\n return (\n \n
\n )}\n {menu === 'discussion' && (\n \n
\n )}\n \n \n {title}\n \n โดย {teacherName} \n \n {shortDescription}\n \n \n
\n \n \n \n \n {estimateTimeUsageHr} ชั่วโมง\n \n \n {estimateTimeUsageMin} นาที\n \n \n\n \n {type === 'online' ? (\n \n {courseTypes[type]}\n \n \n \n \n {courseProject?.full} Lectures\n \n \n
\n \n setOpenModal(true)}\n >\n \n {locale === 'en' ? 'share' : 'แชร์'}\n \n \n
\n \n {isOpen ? (\n \n
\n ) : (\n {children}
\n \n \n onChangePath('announcement')}\n activeText={url === 'announcement' ? true : false}\n //style={{ width: '100%' }}\n >\n \n Anouncement\n \n \n onChangePath('activities')}\n activeText={url === 'activities' ? true : false}\n >\n \n Activities\n \n \n onChangePath('courses')}\n activeText={url === 'courses' ? true : false}\n >\n \n Courses\n \n \n onChangePath('about')}\n activeText={url === 'about' ? true : false}\n >\n \n About\n \n \n \n\n {children}\n
\n \n
\n\n - \n {menus.map((menu) => {\n return (\n
- \n
\n {menu.label}\n \n \n \n )\n })}\n
- \n {menus.map((menu) => {\n return (\n
- \n
{menu.label} \n \n \n )\n })}\n
- \n {menus.map((menu) => {\n return (\n
- \n
\n {menu.label}\n \n \n \n )\n })}\n
- \n {menus.map((menu) => {\n return (\n
- \n
\n {menu.label}\n \n \n \n )\n })}\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 history.push(`${match.url}/setting`)}\r\n >\r\n Course setting\r\n \r\n
\r\n \r\n {data.title} \r\n \r\n {data.shortDescription}\r\n \r\n
\r\n \r\n this.props.history.push(`/users/${data.teacherSlug}`)\r\n }\r\n schoolLink={data.teacherId !== undefined}\r\n >\r\n {data.teacherName}\r\n \r\n \r\n Instructor\r\n \r\n
\r\n \r\n this.props.history.push(`/${data.schoolSlug}`)}\r\n schoolLink\r\n >\r\n {data.schoolName}\r\n \r\n \r\n Academy\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {data.title} \r\n |
\r\n history.push(`${match.url}/setting`)}\r\n >\r\n Course setting\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {data.shortDescription}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n this.props.history.push(`/users/${data.teacherSlug}`)\r\n }\r\n schoolLink={data.teacherId !== undefined}\r\n >\r\n {data.teacherName}\r\n \r\n \r\n Instructor\r\n \r\n
\r\n \r\n this.props.history.push(`/${data.schoolSlug}`)}\r\n schoolLink\r\n >\r\n {data.schoolName}\r\n \r\n \r\n Academy\r\n \r\n
\r\n \n \n \n \n \n
\n \n
\n\n {sidebarOpen && (\n {this.props.children}
\n {this.props.children}
\n \n \n เว็บไซต์นี้มีการใช้คุกกี้เพื่อพัฒนาประสิทธิภาพและประสบการณ์การใช้งานเว็บไซต์ของท่านให้ดียิ่งขึ้น\n คุณสามารถศึกษาข้อมูลเพิ่มเติมได้ที่\n \n \n \n รายละเอียดนโยบายคุกกี้และนโนบายข้อมูลส่วนตัว\n \n \n
\n \n \n เว็บไซต์นี้มีการใช้คุกกี้เพื่อพัฒนาประสิทธิภาพและประสบการณ์การใช้งานเว็บไซต์ของท่านให้ดียิ่งขึ้น\n คุณสามารถศึกษาข้อมูลเพิ่มเติมได้ที่\n \n \n \n รายละเอียดนโยบายคุกกี้และนโนบายข้อมูลส่วนตัว\n \n \n
\n {name}
*/}\n\n \n \n \n \n
\n history.goBack()}>\n \n \n Back\n \n \n
\n \n \n
\n\n \n \n Yearly\n \n \n (Save 16%)\n \n
\n {children}
\n \n \n {preTest != undefined && (\n \n \n \n \n \n {preTest.title}\n \n \n
// \n {preTest.isPass === true ? (\n \n \n \n Completed\n \n \n \n ) : (\n \n \n \n Incompleted\n \n \n \n )}\n
\n \n )}\n {/* {sortedLectures.map((lecture) =>\n lecture.content.type === 'paragraph' ? null : ( // \n \n \n \n \n \n {postTest.title}\n \n \n \n )}\n
\n \n \n \n \n \n {lecture.content.name} \n \n \n
\n )\n )}\n {sortedQuiz.map((quizzes) => (\n \n {lecture.content.progress === 1 ? (\n \n \n Completed\n \n \n ) : (\n \n \n Incompleted\n \n \n )}\n
\n \n \n \n \n \n {quizzes.title} \n \n \n
\n ))} */}\n {sortedLecQuiz.map((LecQuiz) =>\n LecQuiz.type === 'paragraph' ? (\n \n {quizzes.isPass === true ? (\n \n \n Completed\n \n \n ) : (\n \n \n Incompleted\n \n \n )}\n
\n \n \n \n {/* \n */}\n \n {LecQuiz.name}\n \n \n \n
\n ) : (\n <>\n {LecQuiz.type === 'quiz' ? (\n \n \n \n \n \n \n {LecQuiz.title}\n \n \n \n
\n ) : (\n \n {LecQuiz.isPass === true ? (\n \n \n \n Completed\n \n \n \n ) : (\n \n \n \n Incompleted\n \n \n \n )}\n
\n \n \n \n \n \n \n {LecQuiz.name}\n \n \n \n
\n )}\n \n )\n )}\n {postTest != undefined && (\n \n {LecQuiz.progress === 1 ? (\n \n \n \n Completed\n \n \n \n ) : (\n \n \n \n Incompleted\n \n \n \n )}\n
\n \n {postTest.isPass === true ? (\n \n \n \n Completed\n \n \n \n ) : (\n \n \n \n Incompleted\n \n \n \n )}\n
\n \n {assignments?.map((value) => {\n return (\n
\n )\n}\n\nconst mapState = (state) => ({\n students: state.teachingCourse.students,\n})\n\nexport default connect(mapState, null)(TeacherCourseEvaluationStudentPageAssignTab)\n","/* eslint-disable no-unused-vars */\nimport React from 'react'\nimport { Redirect } from 'react-router-dom'\n\nimport TeacherSchoolLayout from 'layouts/teacherSchoolLayout'\nimport SettingCourseLayout from 'layouts/settingCourseLayout'\n// import SettingCourseSingleTestLayout from 'layouts/settingCourseSingleTestLayout/loadable'\nimport TeacherCourseLiveTab from 'containers/teacherCourseLiveTab/loadable'\nimport CourseCreateAssessment from 'containers/courseCreateAssessment/loadable'\nimport CourseAssessmentTab from 'containers/courseAssessmentTab/loadable'\nimport CourseAssessmentEditQuestionTab from 'containers/courseAssessmentEditQuestionTab/loadable'\nimport TeacherCourseLiveCreate from 'containers/teacherCourseLiveCreate/loadable'\nimport SchoolRewardsLayout from 'layouts/schoolRewardsLayout/loadable'\nimport SchoolAllRewardsPage from 'containers/schoolAllRewardsPage/loadable'\nimport SchoolRedeemPage from 'containers/schoolRedeemPage/loadable'\nimport SchoolCurriculumLayout from 'layouts/schoolCurriculumLayout/loadable'\nimport SchoolAllCoursePage from 'containers/schoolAllCoursePage/loadable'\nimport SchoolAllMarketplacePage from 'containers/schoolAllMarketplacePage/loadable'\nimport schoolAllMarketplacePage1 from 'containers/schoolAllMarketplacePage-1/loadable'\nimport schoolPaymentMarketplacePage from 'containers/schoolPaymentMarketplacePage/loadable'\n// import SchoolYouMarketplacePage from 'containers/schoolYouMarketplacePage/loadable'\nimport SchoolAssignedCoursePage from 'containers/schoolAssignedCoursePage/loadable'\nimport SchoolCurriculumDetail from 'components/schoolCurriculumDetail/loadable'\nimport CurriculumDetailEditLayout from 'layouts/curriculumDetailEditLayout'\nimport InformationPage from 'containers/informationPage/loadable'\nimport SettingPage from 'containers/settingPage/loadable'\nimport SchoolInformationLayout from 'layouts/schoolInformationLayout/loadable'\nimport SchoolInformationAnnouncement from 'containers/schoolInformationAnnouncement/loadable'\nimport SchoolInformationActivities from 'containers/schoolInformationActivities/loadable'\nimport SchoolInformationCourses from 'containers/schoolInformationCourses/loadable'\nimport SchoolInformationAbout from 'containers/schoolInformationAbout/loadable'\nimport SchoolCertificateLayout from 'layouts/schoolCertificateLayout/loadable'\n// import TemplatePage from 'containers/templatePage/loadable'\n// import AllCertificatePage from 'containers/allCertificatePage/loadable'\n// import BlockchainPage from 'containers/blockchainPage/loadable'\nimport SchoolSettingLayout from 'layouts/schoolSettingLayout'\nimport SchoolSettingInformation from 'containers/schoolSettingInformation/loadable'\nimport SchoolSettingSetting from 'containers/schoolSettingSetting/loadable'\nimport SchoolSettingAcademy from 'containers/schoolSettingAcademy/loadable'\nimport SchoolDashboardLayout from 'layouts/schoolDashboardLayout'\nimport SchoolDashboardOverview from 'containers/schoolDashboardOverview/loadable'\n// import ReportCourseList from 'containers/reportCourseList/loadable'\nimport SchoolPaymentLayout from 'layouts/schoolPaymentLayout'\nimport SchoolKyc from 'containers/schoolKycPage/loadable'\nimport SchoolPaymentOverview from 'containers/schoolPaymentOverview/loadable'\nimport SchoolPaymentTransferHistory from 'containers/schoolPaymentTransferHistory/loadable'\nimport SchoolPaymentTransferDetail from 'containers/schoolPaymentTransferDetail/loadable'\nimport SchoolPaymentTransaction from 'containers/schoolPaymentTransaction/loadable'\nimport SchoolPaymentPackageCheckout from 'containers/schoolPackageCheckoutPage/loadable'\n// import SchoolPaymentWithdraw from 'containers/schoolPaymentWithdraw/loadable'\nimport SchoolPaymentBankAccount from 'containers/schoolPaymentBankAccount/loadable'\nimport SchoolCourseAssignmentLayout from 'layouts/schoolCourseAssignmentLayout'\n// import SchoolCourseLiveLayout from 'layouts/schoolCourseLiveLayout'\nimport SchoolMemberLayout from 'layouts/schoolMemberLayout'\nimport SchoolMarketplaceLayout from 'layouts/schoolMarketplaceLayout/loadable'\nimport SchoolMemberTeacherList from 'containers/schoolMemberTeacherList/loadable'\nimport SchoolMemberStudentList from 'containers/schoolMemberStudentList/loadable'\n// import SchoolMemberGroup from 'containers/schoolMemberGroup/loadable'\nimport SchoolMemberGroups from 'containers/SchoolMemberGroups/loadable'\nimport SchoolMemberGroupsListInClass from 'containers/schoolMemberGroupsListInClass/loadable'\nimport SchoolMemberTags from 'containers/schoolMemberTags/loadable'\n// import SchoolGroupPage from 'containers/schoolGroupPage/loadable'\nimport SchoolGroupEdit from 'containers/schoolGroupEdit/loadable'\nimport SchoolMemberProfileLayout from 'layouts/schoolMemberProfileLayout/loadable'\nimport MemberProfilePage from 'containers/memberProfilePage/loadable'\nimport MemberProgressPage from 'containers/memberProgressPage/loadable'\nimport SchoolGroupLayout from 'layouts/schoolGroupLayout/loadable'\nimport SchoolMemberGroupMember from 'containers/schoolMemberGroupMember/loadable'\nimport SchoolMemberGroupCourse from 'containers/schoolMemberGroupCourse/loadable'\nimport PublishCourseInformationPage from 'containers/courseInformationPage/publishedCourseInformationPage'\nimport PublishedCourseContentPage from 'containers/courseContentPage/publishedCourseContentPage'\nimport PublishedCourseInformationPage from 'containers/courseInstructorPage/publishedCourseInstructorPage'\nimport PublishedCoursePricePage from 'containers/coursePricePage/publishedCoursePricePage'\nimport PublishedCourseSettingPage from 'containers/courseSettingPage/publishedCourseSettingPage'\nimport CoursePricePage from 'containers/coursePricePage/loadable'\nimport CourseContentPage from 'containers/courseContentPage'\nimport CourseDescriptionTab from 'containers/courseDescriptionTab/loadable'\nimport MarketplaceDescriptionTab from 'containers/marketplaceDescriptionTab/loadable'\nimport TestOptionsModal from 'modals/testOptionsModal/loadable'\n// import ContentPreviewModal from 'modals/contentPreviewModal/loadable'\nimport ContentPreviewModal from 'modals/contentPreviewModal/loadable'\nimport SchoolReportLayout from 'layouts/schoolReportLayout/loadable'\nimport SchoolWeeklyReportTab from 'containers/schoolWeeklyReportTab/loadable'\nimport TeacherCourseAssignmentOverviewTab from 'containers/teacherCourseAssignmentOverviewTab/loadable'\nimport TeacherCourseAssignmentSettingTab from 'containers/teacherCourseAssignmentSettingTab/loadable'\nimport TeacherCourseAssignmentReportTab from 'containers/teacherCourseAssignmentReportTab/loadable'\n// import TeacherCourseAssignmentCreate from 'containers/teacherCourseAssignmentCreate/loadable'\nimport TeacherCourseDraftAssignmentLayout from 'containers/teacherCourseDraftAssignmentLayout/loadable'\nimport DraftAssignInfoPage from 'containers/draftAssignInfoPage/loadable'\nimport DraftAssignmentQuestionPage from 'containers/draftAssignmentQuestionPage/loadable'\nimport TeacherCourseAssignmentViewAnswer from 'containers/teacherCourseAssignmentViewAnswer/loadable'\nimport MyCourseCreateTeacherCourse from 'containers/myCourseCreateTeacherCourse/loadable'\nimport TeacherCourseLectureTestPreview from 'containers/teacherCourseLectureTestPreview/loadable'\nimport EvaluationSettingPage from 'containers/evaluationSettingPage/loadable'\nimport TeacherCourseEvaluationStudentPage from 'containers/teacherCourseEvaluationStudentPage/loadable'\nimport TeacherCreateCourseLecturePage from 'containers/teacherCreateCourseLecturePage/loadable'\nimport TeacherCourseLectureContent from 'components/teacherCourseLectureContent/loadable'\nimport TeacherSubjectAssessmentView from 'layouts/teacherSubjectAssessmentViewLayout/loadable'\nimport TeacherSubjectAssessmentViewInfo from 'containers/teacherSubjectAssessmentViewInfo/loadable'\nimport TeacherCourseDetailLayout from 'layouts/teacherCourseDetailLayout'\nimport TeacherMarketplaceDetailLayout from 'layouts/teacherMarketplaceDetailLayout'\nimport TeacherCourseAssignmentTab from 'containers/teacherCourseAssignmentTab/loadable'\nimport TeacherCourseDiscussionTab from 'containers/teacherCourseDiscussionTab/loadable'\nimport TeacherCourseGradesTab from 'containers/teacherCourseGradesTab/loadable'\nimport TeacherCourseReportTab from 'containers/teacherCourseReportTab/loadable'\nimport TeacherCourseMemberTab from 'containers/teacherCourseMemberTab/loadable'\nimport CreateCourseLayout from 'layouts/createCourseLayout/loadable'\nimport CourseInformationPage from 'containers/courseInformationPage/loadable'\n\nimport CoursePreviewLayout from 'layouts/coursePreviewLayout/loadable'\nimport CoursePreviewLectureLayout from 'components/coursePreviewLectureLayout/loadable'\nimport CoursePreviewLectureContent from 'components/coursePreviewLectureContent/loadable'\n\nimport CoursePreviewLectureTab from 'containers/CoursePreviewLectureTab/loadable'\nimport CoursePreviewDiscussionTab from 'containers/CoursePreviewDiscussionTab/loadable'\n\n// Preview Test\nimport PreviewTestLayout from 'layouts/previewTestLayout'\nimport TeacherTestPreviewPage from 'containers/teacherTestPreviewPage/loadable'\n\nimport SchoolProgramCertificateLayout from 'layouts/schoolProgramCertificateLayout/loadable'\nimport SchoolProgramCertificateListPage from 'containers/schoolProgramCertificateListPage/loadable'\nimport SchoolProgramCertificateDetailPage from 'containers/schoolProgramCertificateDetailPage/loadable'\nimport SchoolProgramCertificateTemplatePage from 'containers/schoolProgramCertificateTemplatePage/loadable'\nimport PermissionSetting from 'components/permissionSetting'\n\nimport SchoolPackagesLayout from 'layouts/schoolPackagesLayout'\nimport SchoolPackagesOverview from 'containers/schoolPackagesOverview/loadable'\nimport SchoolPackagesHistory from 'containers/schoolPackagesHistory/loadable'\n\nimport TeacherCourseEvaluationStudentPageLectureTab from '../components/TeacherCourseEvaluationStudentPageLectureTab'\nimport TeacherCourseEvaluationStudentPageAssignTab from '../components/TeacherCourseEvaluationStudentPageAssignTab'\n\n// import PublishCourseSettingSingleTestPage from 'containers/singleTestPage/courseSettingSingleTest/publishedCourseSettingSingleTest'\n\nconst schoolRoutes = {\n path: '/schools/:schoolId',\n layout: TeacherSchoolLayout,\n routes: [\n {\n exact: true,\n subpath: '/',\n render: ({ match }) => \n \n \n \n \n \n {value.title}\n \n \n
\n )\n })}\n \n {value.hasAnswer === true ? (\n \n \n \n Completed\n \n \n \n ) : (\n \n \n \n Incompleted\n \n \n \n )}\n
\n \n disscussion
,\n // },\n {\n isPrivate: true,\n exact: true,\n subpath: '/course',\n component: SchoolMemberGroupCourse,\n },\n {\n isPrivate: true,\n exact: true,\n subpath: '/member',\n component: SchoolMemberGroupMember,\n },\n ],\n },\n {\n isPrivate: true,\n exact: true,\n subpath: '/member/:memberId/permission',\n component: PermissionSetting,\n },\n {\n subpath: '/member',\n layout: SchoolMemberLayout,\n routes: [\n {\n exact: true,\n subpath: '/',\n render: ({ match }) => Something went wrong.
\n }\n\n return this.props.children\n }\n}\nexport default ErrorBoundary\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Typography } from 'components'\nimport ErrorBoundary from '../errorBoundary'\nimport { Radio } from 'antd'\n\nconst StyledLabel = styled((props) =>\n {/* \n \n
\n */}\n {/* \n \n {options.find((lang) => lang.value === locale).label() ||\n options[0].label()}\n \n
\n \n }\n >\n {options.map((item, idx) => {\n return (\n \n \n \n {item.label}\n \n \n \n )\n })}\n
\n \n \n \n \n {item.label}\n \n \n \n
\n ) : (\n \n \n {title && (\n
\n {title && (\n
\n \n
\n ) : type === 'textarea' ? (\n \n {\n const e = {\n target: {\n name: field.name,\n value,\n },\n }\n field.onChange(e)\n }}\n />\n
\n ) : type === 'Subtitle' ? (\n \n \n
\n ) : type === 'textareaDesc' ? (\n \n \n
\n ) : (\n \n )}\n \n (i) ท่านมีสิทธิ์ที่จำเป็นทั้งหมดในการส่งเนื้อหาของท่านไปยังเว็บไซต์\n หรือแอปพลิเคชันและให้สิทธิ์ใช้งานตามที่ระบุไว้ในที่นี้\n
\n (ii) Classwin\n ไม่จำเป็นต้องได้รับสิทธิ์ใช้งานจากบุคคลที่สามหรือจ่ายค่าลิขสิทธิ์ให้แก่บุคคลที่สามซึ่งเกี่ยวข้องกับเนื้อหาของท่าน\n
\n (iii) เนื้อหาของท่านไม่มีการละเมิดสิทธิ์ใด ๆ ของบุคคลที่สาม\n ซึ่งรวมถึงสิทธิ์ในทรัพย์สินทางปัญญาและสิทธิ์ความเป็นส่วนตัว และ\n
\n (iv) เนื้อหาของท่านสอดคล้องกับเงื่อนไขการใช้งานเหล่านี้และกฎหมายที่บังคับใช้ทุกประการ\n
\n (i) บริการจะตรงตามความต้องการของท่าน\n
\n (ii) การเข้าถึงบริการจะไม่มีสิ่งใดติดขัด\n
\n (iii) คุณภาพของบริการจะตรงตามความคาดหวังของท่าน\n
\n (iv) ข้อผิดพลาดหรือความบกพร่องใด ๆ ก็ตามในเว็บไซต์ บริการ หรือวัสดุต่าง ๆ\n จะได้รับการแก้ไขให้ถูกต้อง Classwin ไม่ให้การรับรองหรือรับประกันว่า บริการ\n จะได้รับการอนุญาตภายใต้เขตอำนาจศาลของท่าน\n ตลอดจนไม่ให้การรับประกันว่าเนื้อหาของท่านที่ส่งโดยท่านจะมีให้ผ่านบริการ\n หรือจะถูกจัดเก็บโดยเว็บไซต์ ไม่ให้การรับประกันว่าบริการจะตรงตามความต้องการของท่าน หรือ\n Classwin จะยังคงให้การสนับสนุนแก่ท่านสมบัติอย่างใดอย่างหนึ่งของบริการ\n ในกรณีที่การปฏิเสธความรับผิดหรือการจำกัดความรับผิดใด ๆ ไม่สามารถบังคับใช้ได้\n
\n
\n
“บริษัท” หมายถึง บริษัท คลาสวิน จำกัด รวมถึงบริษัทย่อยที่อยู่ในอํานาจควบคุม
\n \n “บุคลากรของบริษัท” หมายถึง กรรมการ พนักงาน ลูกจ้าง ของบริษัท คลาสวิน จำกัด และบริษัทย่อย\n และ/หรือ บริษัทที่อยู่ในอํานาจควบคุม\n
\n \n “ลูกค้า” หมายถึง บุคคลทั่วไป องค์กร บริษัท ห้างร้าน/นิติบุคคล รัฐวิสาหกิจ หน่วยงานภาครัฐ\n ที่ซื้อสินค้า และ/หรือใช้บริการของบริษัท\n
\n \n “คู่ค้า” หมายถึง บริษัท ห้างร้าน/นิติบุคคล และบุคคล ที่ซื้อ-ขายสินค้า\n หรือบริการให้กับบริษัท\n
\n \n “ผู้มาติดต่องาน หมายถึง บุคคลภายนอกที่เข้ามาติดต่องาน มาเยี่ยมชม หรือมาตรวจสอบใด ๆ\n กับบริษัทที่นอกเหนือจากการซื้อและขายสินค้าบริการ\n
\n \n “ข้อมูลส่วนบุคคล” หมายถึง ข้อมูลเกี่ยวกับบุคคลซึ่งทำให้สามารถระบุตัวบุคคลนั้นได้\n ไม่ว่าทางตรงหรือทางอ้อม แต่ไม่รวมถึงข้อมูลของผู้ถึงแก่กรรมโดยเฉพาะ\n
\n \n “ข้อมูลส่วนบุคคลที่อ่อนไหว” หมายถึง\n ข้อมูลที่ต้องระมัดระวังเป็นพิเศษในการเก็บรวบรวมหรือประมวลผล เช่น ข้อมูลส่วนบุคคล\n เกี่ยวกับเชื้อชาติ เผ่าพันธุ์ ความคิดเห็นทางการเมือง ความเชื่อในลัทธิ ศาสนาหรือปรัชญา\n พฤติกรรมทางเพศ ประวัติอาชญากรรม ข้อมูลสุขภาพ ความพิการ ข้อมูลสหภาพแรงงาน ข้อมูลพันธุกรรม\n และข้อมูลชีวภาพ เป็นต้น\n
\n \n “ผู้ใช้บริการ” หมายถึง\n บุคคลธรรมดาหรือนิติบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลที่เข้ามาติดต่อกับบริษัท\n หรือที่เข้ามายังระบบสารสนเทศของบริษัท\n
\n \n “ผู้ควบคุมข้อมูล” หมายถึง\n บริษัทและบริษัทในเครือของบริษัทในฐานะผู้มีอำนาจหน้าที่ตัดสินใจเกี่ยวกับการเก็บรวบรวม ใช้\n หรือ\n เปิดเผยข้อมูลส่วนบุคคลรวมถึงบุคคลหรือนิติบุคคลอื่นใดที่บริษัทมอบหมายให้มีอำนาจหน้าที่นั้น\n
\n \n “การประมวลผล” หมายถึง การดำเนินการใด ๆ เกี่ยวกับการใช้ การเปิดเผย\n หรือการแก้ไขซึ่งข้อมูลส่วนบุคคลของผู้ใช้บริการ ไม่ว่าจะใช้วิธีการใด ๆ\n และให้หมายความรวมถึงการส่งหรือโอนข้อมูล ส่วนบุคคลที่ใช้ในการประกอบกิจการ\n
\n \n “ระบบข้อมูลสารสนเทศ” หมายถึง ระบบคอมพิวเตอร์ ระบบเครือข่ายติดต่อสื่อสาร\n ระบบเครือข่ายเชื่อมต่อเข้าระบบอินเตอร์เน็ต ระบบเก็บข้อมูล ระบบจดหมายอิเล็กทรอนิกส์\n (E-mail) ระบบสื่อสารข้อมูลทุกประเภท ข้อมูลอุปกรณ์สื่อสาร อุปกรณ์คอมพิวเตอร์\n และอุปกรณ์ต่อพ่วงหรืออุปกรณ์ใด ๆ\n ที่เกี่ยวข้องเป็นกรรมสิทธิ์ของบริษัทและ/หรือบริษัทในเครือของบริษัท\n
\n \n 1. ข้อมูลที่บ่งชี้ตัวตน ได้แก่ ชื่อ นามสกุล ที่อยู่ สถานที่ติดต่อ หมายเลขโทรศัพท์ อีเมล\n วันเดือนปีเกิด เพศ หมายเลขบัตรเครดิต เป็นต้น
\n 2. ข้อมูลระบบได้แก่ ข้อมูล ที่บริษัทจัดเก็บโดยอัตโนมัติเมื่อท่านล๊อคอินเข้าสู่เว็บไซต์\n ของบริษัทไม่ว่าจะผ่านทางคุกกี้ เว็บบีคอน ไฟล์ล็อคอิน สคริปท์ รวมถึงข้อมูล ทางเทคนิค เช่น\n ที่อยู่ไอพี (IP Address) ประเภทของบราวเซอร์ การตั้งค่าเขตเวลา และที่ตั้งโดเมน\n ระบบปฏิบัติการ เป็นต้น
\n 3. ข้อมูลการใช้งานได้แก่ หน้าเว็บไซต์ที่เยี่ยมชม เวลา และวันที่เข้าเว็บไซต์\n ที่อยู่เว็บไซต์ อ้างอิง สินค้า และบริการหรือข้อมูลที่คนหาในแพลตฟอร์ม\n ข้อมูลเกี่ยวกับสิ่งที่ท่านค้นหาหรือที่ท่านดูในขณะที่ใช้เว็บไซต์ เป็นต้น
\n 4. ข้อมูลการติดต่อสื่อสาร ได้แก่ อีเมล บันทึกข้อมูล การสนทนา ข้อมูลต่าง ๆ\n ที่ท่านให้กับบริษัท\n
\n การลงทะเบียนผ่านระบบเว็บไซต์หรือแอปพลิเคชั่นของ CLASSWIN\n
\n การติดต่อกลับบริษัทเพื่อขอรับข้อมูลเกี่ยวกับคอร์สท่านสนใจ
\n การนัดหมายบริษัทหรือการให้ข้อมูลกับบริษัทเมื่อเข้ามาใช้คอร์ส
\n การทำแบบสอบถามหรือการโต้ตอบทางอีเมลระหว่างท่านกับบริษัทการเข้าร่วมกิจกรรมหรือการเคลื่อนไหวผ่านช่องทางอิเล็กทรอนิกส์\n หรือช่องทาง Social Network หรือช่องทาง ปกติ
\n 2. ข้อมูลส่วนบุคคลของท่านที่บริษัทได้รับมาจากบุคคลภายนอก (Third Party)\n ที่ดำเนินการเกี่ยวกับการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูล\n ส่วนบุคคลตามคำสั่งหรือในนามของบริษัท\n ซึ่งข้อมูลส่วนบุคคลของท่านจะไม่ถูกนำไปใช้นอกเหนือจากวัตถุประสงค์ที่บริษัทได้กำหนดหรือสั่งไว้\n และบริษัทได้กำหนดให้บุคคลภายนอกต้องรักษาความลับและคุ้มครองข้อมูล\n ส่วนบุคคลของท่านตามมาตรฐานของกฎหมายคุ้มครองข้อมูลส่วนบุคคล
\n 3. ข้อมูลส่วนบุคคลที่ได้มาจากคุกกี้ (cookies) เมื่อท่านเข้าชมเว็บไซต์ของบริษัท\n ข้อมูลเหล่านี้ช่วยให้บริษัทสามารถจัดให้มีการบริการที่ดีขึ่น เร็วขึ้น ปลอดภัยขึ้น\n และเพื่อความเป็นส่วนตัวของท่าน เมื่อท่านใช้บริการ และ/หรือเข้าสู่แพลตฟอร์ม\n
\n 1. เพื่อให้เราสามารถปรับปรุง หรือ พัฒนา\n บริการของเราให้มีประสิทธิภาพและเกิดประโยชน์ต่อสูงสุดต่อผู้ที่เกี่ยวข้องกับระบบทุกคน\n
\n 2. เพื่อใช้เป็นส่วนหนึ่งในการระบุ ยืนยันตัวตนหรือเพิ่มความน่าเชื่อถือของผู้ใช้บริการ{' '}\n
\n 3. เพื่อใช้ในการปกป้องรักษาข้อมูลและสิทธิประโยชน์ต่าง ๆ ของผู้ใช้บริการ
\n 4. เพื่อใช้ในการวิเคราะห์และพัฒนาบริการซึ่งอาจจะเกี่ยวโยงถึง การตลาด\n การโฆษษณาประชาสัมพันธ์ โดยที่จะไม่ก่อให้เกิดผลเสียหายต่อชีวิตและทรัพย์สินของผู้ใช้บริการ\n
\n 1. เก็บรวบรวมโดยมีการบันทึกในระบบคอมพิวเตอร์ที่ใช้บริการ ได้แก่ การตั้งเซิฟเวอร์ด้วยตนเอง\n
\n 2. บริษัทจะใช้ข้อมูล\n ส่วนบุคคลของท่านที่ได้เก็บรวบรวมมาในการดำเนินการของบริษัทตามวัตถุประสงค์
\n 3. บริษัทจะเปิดเผยข้อมูลกับ\n พนักงานภายใต้สัญญาจ้างของบริษัทที่มีขอบเขตหน้าที่เกี่ยวกับข้อมูล เปิดเผยบนแพลตฟอร์ม\n ของบริษัทหรือช่องทางสังคมออนไลน์เพื่อการโฆษณา นอกจากนี้\n บริษัทอาจส่งข้อมูลส่วนบุคคลของท่านไปยังหน่วยงาน ข้อมูล\n เครดิตเพื่อตรวจสอบและอาจใช้ผลการตรวจสอบข้อมูลดังกล่าวเพื่อป้องกันการฉ้อโกง\n
\n • จำกัดการเข้าถึงข้อมูลส่วนบุคคลที่อาจเข้าถึงได้โดย พนักงาน ตัวแทน คู่ค้า หรือบุคคลภายนอก\n การเข้าถึงข้อมูลส่วนบุคคลของบุคคลภายนอกจะสามารถทำได้ตามเท่าที่กำหนดไว้หรือตามคำสั่ง\n ซึ่งบุคคลภายนอกจะต้องมีหน้าที่ในการรักษาความลับ และคุ้มครองข้อมูล ส่วนบุคคล
•\n จัดให้มีวิธีการทางเทคโนโลยีเพื่อป้องกันไม่ให้มีการเข้าสู่ระบบคอมพิวเตอร์ที่ไม่ได้รับอนุญาต{' '}\n
\n •\n จัดการทำลายข้อมูลส่วนบุคคลของท่านเพื่อความปลอดภัยเมื่อข้อมูลดังกล่าวไม่จำเป็นสำหรับวัตถุประสงค์ทางกฎหมาย\n และธุรกิจอีกต่อไป
\n • มีกระบวนการจัดการกับกรณีละเมิดข้อมูลส่วนบุคคล หรือกรณีที่ต้องสงสัย\n และต้องแจงเหตุการละเมิดข้อมูลส่วนบุคคล
•\n แก่สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคลตามเงื่อนไขที่กฎหมายกำหนดระยะเวลาในการเก็บรักษาข้อมูลส่วนบุคคล{' '}\n
\n •\n บริษัทเก็บข้อมูลส่วนบุคคลของท่านไว้ในระยะเวลาที่จำเป็นเพื่อดำเนินการตามวัตถุประสงค์ในการให้บริการของบริษัท\n และเป็นไปตามระยะเวลาที่กำหนดโดยมาตรฐานทางบัญชี มาตรฐานทางกฎหมาย\n และกฎระเบียบอื่นที่เกี่ยวข้อง
\n • ในการกำหนดระยะเวลาในการเก็บรักษาข้อมูล บริษัทจะพิจารณาถึงจำนวน ลักษณะการใช้งาน\n วัตถุประสงค์ในการให้บริการ ความอ่อนไหวของข้อมูลส่วนบุคคล\n และความเสี่ยงที่อาจเกิดขึ้นจากการใช้ข้อมูลส่วนบุคคลโดยมิชอบ และ ระยะเวลาที่กำ\n หนดโดยกฎหมายที่เกี่ยวข้อง
• ข้อมูลส่วนบุคคลของท่านที่ได้มาจากคุกกี้ (Cookies)\n ในการเก็บข้อมูลเมื่อท่านเข้าใช้เว็บไซต์บริษัทจะเก็บไว้ไม่เกิน 13 เดือน\n หรือตามที่กฎหมายที่เกี่ยวข้องกำหนด\n
\n 1. สิทธิในการเพิกถอนความยินยอม (right to withdraw consent):\n ท่านมีสิทธิในการเพิกถอนความยินยอมในการ\n ประมวลผลข้อมูลส่วนบุคคลที่ท่านได้ให้ความยินยอมกับบริษัทได้\n ตลอดระยะเวลาที่ข้อมูลส่วนบุคคลของท่านอยู่กับ บริษัท
\n 2. สิทธิในการเข้าถึงข้อมูลส่วนบุคคล (right of access):\n ท่านมีสิทธิในการเข้าถึงข้อมูลส่วนบุคคลของท่านและขอให้บริษัท\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ท่าน\n รวมถึงขอให้บริษัทเปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคลที่ท่านไม่ได้ให้ความยินยอมต่อบริษัทได้{' '}\n
\n 3. สิทธิในการแก้ไขข้อมูลส่วนบุคคลให้ถูกต้อง (right to rectification):\n ท่านมีสิทธิในการขอให้บริษัทแก้ไขข้อมูลที่ไม่ถูกต้อง หรือ เพิ่มเติมข้อมูลที่ไม่สมบูรณ์{' '}\n
\n 4. สิทธิในการลบข้อมูลส่วนบุคคล (right to erasure):\n ท่านมีสิทธิในการขอให้บริษัททำการลบข้อมูลของท่านด้วยเหตุบาง ประการได้
\n 5. สิทธิในการระงับการใช้ข้อมูลส่วนบุคคล (right to restriction of processing):\n ท่านมีสิทธิในการระงับการใช้ข้อมูลส่วน บุคคลของท่านด้วยเหตุบางประการได้
\n 6. สิทธิในการใหโอนย้ายข้อมูล ส่วนบุคคล (right to data portability):\n ท่านมีสิทธิในการโอนย้ายข้อมูลส่วนบุคคลของท่านที่ให้ไว้กับบริษัทไปยังผู้ควบคุมข้อมูลรายอื่น\n หรือ ตัวท่านเองด้วยเหตุบางประการได้
\n 7. สิทธิในการคัดค้านการประมวลผลข้อมูลส่วนบุคคล (right to object):\n ท่านมีสิทธิในการคัดค้านการประมวลผลข้อมูลส่วนบุคคลของท่านด้วยเหตุบางประการได้\n
\n บริษัท คลาสวิน จำกัด 418/2 ถนนประชาทร แขวงลาดกระบัง เขตลาดกระบัง กรุงเทพมหานคร
\n Line :{' '}\n \n https://lin.ee/kQCr7RN\n {' '}\n
\n Facebook :{' '}\n \n https://www.facebook.com/classwin\n {' '}\n
\n เบอร์โทรศัพท์ : 098-746-5919\n
\n
\n
\n {\n setValue(file.name)\n setUrl(file.name)\n }}\n />\n \n or\n \n {\n setValue(e.target.value)\n setUrl(e.target.value)\n }}\n full\n />\n
\n )\n})\n\nconst ArrangementAnswerInput = ({\n choices,\n answers = [],\n assessmentId,\n questionId,\n updateQuestion,\n getQuestionData,\n handleAutoSave,\n setInput,\n setAnswers,\n}) => {\n const [state, setState] = useState({ quotes: [] })\n\n useEffect(() => {\n const ChoiceAns = letters.slice(0, choices?.length)\n if (answers?.length < 1) {\n setState({ quotes: ChoiceAns })\n } else if (answers?.length == choices?.length) {\n setState({ quotes: answers })\n } else {\n setState({ quotes: ChoiceAns })\n }\n }, [answers, choices])\n const [isWarning, setIsWarning] = useState(false)\n\n const debounceInput = debounce(async (quotes) => {\n handleAutoSave(false)\n\n const newAnswers = quotes\n const isValid =\n newAnswers?.length === choices?.length &&\n new Set(newAnswers).size === newAnswers?.length &&\n newAnswers.every((item) => letters.slice(0, choices?.length).includes(item))\n setIsWarning(!isValid)\n if (isValid) {\n try {\n const payload = {\n assessmentId,\n questionId,\n answers: newAnswers,\n }\n await updateQuestion(payload)\n handleAutoSave(true)\n } catch (error) {\n handleAutoSave(false)\n throw error\n } finally {\n await getQuestionData()\n }\n }\n }, 800)\n\n function onDragEnd(result) {\n if (!result.destination) {\n return\n }\n\n if (result.destination.index === result.source.index) {\n return\n }\n\n const quotes = reorder(state.quotes, result.source.index, result.destination.index)\n setState({ quotes })\n setInput(quotes)\n setAnswers(quotes)\n }\n return (\n
\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n \n )\n }}\n \n \n {cropLabel}\n \n
\n \n
\n \n \n Crop the image.\n \n \n Select aspect ratio, click and drag to adjust the image.\n \n
\n \n {hasCustomAspect && (\n
\n \n {/* \n Aspect Ratio:\n */}\n setAspect(4 / 3)}>\n \n setAspect(16 / 9)}>\n \n
\n )}\n \n \n 4:3\n \n
\n \n \n 16:9\n \n
\n \n
\n \n \n Next\n \n
\n \n \n \n Answer\n \n
\n \n \n \n \n
\n \n \n \n Please circle the answer in the image. The circles cannot overlap each other.\n \n \n Click on the image to display a green circle. To delete, please press the undo\n button.\n \n
\n \n \n
\n \n {\n //await getQuestionData()\n // handleAutoSave(true)\n setPoints(circlePoints)\n setOpenPointOnImage(false)\n // dynamicCanvas(image || ImageApi)\n }}\n >\n {locale === 'en' ? 'Confirm' : 'ยืนยัน'}\n \n
\n \n ${value}
`, delta: { ops: [{ insert: '' }] } }\n return JSON.stringify(obj)\n }\n\n renderType = () => {\n const { type } = this.state\n let component = null\n\n switch (type) {\n case 'Fill a word/letter':\n component = ShortAnswer\n break\n case 'arrangement':\n component = Arrangement\n break\n case 'pointOnImage':\n component = PointImage\n break\n\n default:\n component = MultipleChoice\n break\n }\n return component\n }\n\n handleTagChange = async (value) => {\n const { id, worksheetId, updateQuestion, getQuestionData } = this.props\n try {\n const payload = {\n assessmentId: worksheetId,\n questionId: id,\n questionTag: value,\n }\n await updateQuestion(payload)\n await getQuestionData()\n } catch (error) {\n return error\n } finally {\n this.handleDropdown()\n }\n return null\n }\n handleType = async () => {\n const { type: currentType, valueType: newType, choices, answers, image, points } = this.state\n\n if (choices?.length > 0 || answers?.length > 0) {\n try {\n this.setState({ type: newType, choices: [], answers: [] })\n } catch (error) {\n throw error\n }\n } else if (currentType === 'pointOnImage' && (points?.length > 0 || image)) {\n try {\n this.setState({ type: newType, points: [], image: '' })\n } catch (e) {\n console.log(JSON.stringify(e.response))\n }\n } else {\n this.setState({ type: newType, points: [], image: '', choices: [], answers: [] })\n }\n this.setState({ isModalType: false })\n }\n\n handleTypeChange = (selectedOption) => {\n const { valueType } = this.state\n this.setState({ isModalType: true, valueType: selectedOption?.value })\n }\n setTitle = (value) => {\n this.setState({ title: value })\n }\n setChoices = (value) => {\n this.setState({ choices: value })\n }\n setAnswers = (value) => {\n this.setState({ answers: value })\n }\n setPoints = (value) => {\n this.setState({ points: value })\n }\n setImage = (value) => {\n this.setState({ image: value })\n }\n handleSave = async () => {\n const { locale, updateQuestion, id: questionId, assessmentId, Alert } = this.props\n const { choices, answers, points, title, type, image } = this.state\n\n if (type === 'pointOnImage') {\n if (!image) {\n Alert.error({ title: locale === 'en' ? 'Please insert picture.' : 'กรุณาใส่รูป' })\n return\n }\n try {\n const payload = {\n assessmentId,\n questionId,\n title,\n type,\n points: points,\n image,\n }\n if (payload.points.length > 0) {\n await updateQuestion(payload)\n notification.success({\n message: locale === 'th' ? 'บันทึกเรียบร้อย' : 'Updated Successful',\n })\n } else {\n notification.error({\n message: locale === 'th' ? 'กรุณาใส่คำตอบ' : 'Please provide an answer.',\n })\n // Alert.error({\n // title: locale === 'en' ? 'Please provide an answer.' : 'กรุณาใส่คำตอบ',\n // })\n }\n } catch (error) {\n throw error\n }\n } else {\n try {\n const payload = {\n assessmentId,\n questionId,\n choices: choices,\n answers: answers,\n title,\n type,\n points: points,\n }\n if (payload.answers.length > 0) {\n await updateQuestion(payload)\n notification.success({\n message: locale === 'th' ? 'บันทึกเรียบร้อย' : 'Updated Successful',\n })\n } else {\n notification.error({\n message: locale === 'th' ? 'กรุณาใส่คำตอบ' : 'Please provide an answer.',\n })\n // Alert.error({\n // title: locale === 'en' ? 'Please provide an answer.' : 'กรุณาใส่คำตอบ',\n // })\n }\n } catch (error) {\n throw error\n }\n }\n }\n render() {\n const {\n index,\n correctScore,\n dragHandle,\n questionTag,\n isSelected,\n handleSelect,\n id: questionId,\n match: { path },\n customStyle,\n locale,\n image: ImageApi,\n } = this.props\n const { type, isDropdown, isModalType, valueType, choices, answers, title, points, image } =\n this.state\n const isTh = locale === 'th'\n const options = [\n {\n id: 'label.multiplechoices',\n label: isTh ? 'ปรนัย' : 'Multiple Choices',\n value: 'choice question',\n icon: MuitipleChoicesIcon,\n selectedIcon: SelectedMuitipleChoicesIcon,\n },\n {\n id: 'label.shortanswer',\n label: isTh ? 'อัตนัย (คำตอบสั้น)' : 'Short answer',\n value: 'Fill a word/letter',\n icon: ShortAnswerIcon,\n selectedIcon: SelectedShortAnswerIcon,\n },\n {\n id: 'label.arrangement',\n label: isTh ? 'จัดเรียง' : 'Arrangement',\n value: 'arrangement',\n icon: ArrangementIcon,\n selectedIcon: SelectedArrangementIcon,\n },\n {\n id: 'label.pointimage',\n label: isTh ? 'ตำแหน่งรูป' : 'Point on Image',\n value: 'pointOnImage',\n icon: PointOnImageIcon,\n selectedIcon: SelectedPointOnImageIcon,\n },\n ]\n const selected = options.find(({ value }) => value === type)\n const Component = this.renderType()\n const regex = new RegExp(/(.*?)<\\/p>/g, 'i')\n const questionName = _get(\n JSON.parse(title).content.match(regex),\n `[1]`,\n JSON.parse(title).content\n ).replace(/<.*?>/g, '')\n const isCourseSetting = /\\/schools\\/:schoolId\\/curriculum\\/manage.*/.test(path)\n const titleModalEn =\n choices?.length > 0 || answers?.length > 0\n ? `This question's choices and answers will be delete. Are you sure you want to change the type?`\n : type === 'pointOnImage' && (points?.length > 0 || image)\n ? `This question's choices and answers will be delete. Are you sure you want to change the type?`\n : 'Are you sure you want to change the type?'\n const titleModalTh =\n choices?.length > 0 || answers?.length > 0\n ? 'ตัวเลือกและคำตอบจะถูกลบ แน่ใจไหมว่าจะเปลี่ยนประเภทคำถาม?'\n : type === 'pointOnImage' && (points?.length > 0 || image)\n ? 'รูปภาพและคำตอบจะถูก แน่ใจไหมว่าจะเปลี่ยนประเภทคำถาม?'\n : 'คุณแน่ใจไหมว่าจะเปลี่ยนประเภทคำถาม?'\n\n return (\n
\n
\n \n onChangeLocale('th')}\n style={{ cursor: 'pointer' }}\n >\n TH\n \n | \n onChangeLocale('en')}\n >\n EN\n \n
\n \n {\n onChange(value)\n setFieldValue('recaptcha', value)\n }}\n />\n {errors.recaptcha && (\n \n {errors.recaptcha}\n \n )}\n
\n \n setIsOpen(true)}\n >\n How to find certificate code?\n \n
\n {loading && \n
\n )}\n {shown && (\n */}\n setIsOpen(false)}\n onClickClose={() => setIsOpen(false)}\n contentStyle={{ width: ModalResize(width), padding: 24 }}\n shownXclose={true}\n closeStyle={isMobile ? { top: 8, right: 10 } : null}\n >\n \n \n \n How to find certificate code?\n \n \n \n \n \n \n \n \n \n )\n}\n\nconst mapState = ({ Language: { locale } }) => ({\n locale,\n})\nconst mapDispatch = (dispatch) => {\n const {\n Language: { updateLocale },\n } = dispatch\n return {\n updateLocale,\n }\n}\nexport default connect(mapState, mapDispatch)(VerifyCertificateMobile)\n","import React from 'react'\n// import Logo from '../logo'\nimport {\n UnauthorizedContainer,\n Hero,\n TabContainer,\n TabDetail,\n PrivacyAgreement,\n LinkText,\n} from './styles'\nimport ErrorBoundary from '../errorBoundary'\nimport { Desktop, Tablet, SmallMobile } from 'utils/displayResponsive'\nimport VerifyCertificateMobile from 'components/verifyCertificateMobile'\nimport qs from 'qs'\nimport { Link } from 'react-router-dom'\n// import ModalLogin from '../../components/modalLogin'\n\nexport const UnauthorizedLayout = ({ children }) => {\n // const routeLocation = {\n // pathname: '/user/login',\n // state: { from: '/browse/courses' },\n // }\n // const mobile = window.matchMedia(`(max-width: 768px)`)\n // const maxHeight = window.matchMedia(`(max-height: 768px)`)\n const query = qs.parse(location.search, { ignoreQueryPrefix: true })\n\n // const [tab, setTab] = useState('account')\n return (\n \n \n \n {children} \n \n \n \n Privacy Policy \n \n \n Services Agreement \n \n \n \n \n \n {children} \n \n \n \n Privacy Policy \n \n \n Services Agreement \n \n \n \n \n \n \n {/* \n history.push(`/user/login?tab=account`)}\n opacity={query.tab === 'account' || query.tab === undefined ? '1' : '0.75'}\n >\n \n Account\n \n \n history.push(`/user/login?tab=certificate`)}\n opacity={query.tab === 'certificate' ? '1' : '0.75'}\n >\n \n Certificate\n \n \n */}\n {query.tab === 'account' || query.tab === undefined ? (\n {children} \n ) : (\n \n \n )}\n \n \n \n \n )\n}\n","export default __webpack_public_path__ + \"static/media/Empty.39ac7a68.svg\";","import styled, { css } from 'styled-components'\nimport Typography from '../typography'\nimport theme from '../../theme'\n\nconst Avatar = styled.div`\n border: ${(props) => (props.noneBorder ? 'none' : `1px solid ${theme.gray4}`)};\n border-radius: 50%;\n width: 60px;\n height: 60px;\n background-image: url('https://via.placeholder.com/100');\n background-size: cover;\n background-position: center;\n flex-shrink: 0;\n\n ${({ borderSchool }) => css`\n border: ${borderSchool}px solid ${theme.primary1};\n `}\n ${({ marginLeft }) => css`\n margin-left: ${marginLeft}px;\n `}\n\n ${({ marginRight }) => css`\n margin-right: ${marginRight}px;\n `}\n\n ${({ width }) => {\n if (width) {\n return css`\n width: ${width}px;\n height: ${width}px;\n `\n }\n }}\n\n\n ${({ size }) => {\n if (size === 'large') {\n return css`\n width: 130px;\n height: 130px;\n `\n }\n if (size === 'medium') {\n return css`\n width: 80px;\n height: 80px;\n `\n }\n if (size === 'small') {\n return css`\n width: 40px;\n height: 40px;\n\n @media (max-width: 425px) {\n width: 30px;\n height: 30px;\n }\n `\n }\n\n return css`\n width: ${size}px;\n height: ${size}px;\n `\n }}\n\n ${({ src }) => {\n if (src) {\n return css`\n background-image: url(${src});\n `\n }\n return css``\n }}\n\n ${({ margin }) => {\n if (margin) {\n return css`\n margin: ${margin};\n `\n }\n return css``\n }}\n`\n\nconst Text = styled(Typography)`\n ${({ marginText }) => {\n if (marginText) {\n return css`\n margin: ${marginText};\n `\n }\n return css`\n margin-left: ${(props) => (props.nonMarginLabel ? '0px' : '12px')};\n `\n }}\n`\n\nconst Container = styled.div`\n display: flex;\n align-items: center;\n justify-content: ${(props) => props.justifyContent};\n`\n\nexport { Avatar, Text, Container }\n","export default __webpack_public_path__ + \"static/media/ic-next-gray-24-px.5902073e.svg\";","export default __webpack_public_path__ + \"static/media/Classwin logo_Classwin Horizontal - Blue 2.251bbfeb.svg\";","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport get from 'lodash/get'\r\nimport LibSidebar from 'react-sidebar'\r\nimport { connect } from 'react-redux'\r\nimport ErrorBoundary from '../../components/errorBoundary'\r\nimport { LayoutContainer, Content } from './styles'\r\nimport { UnauthorizedLayout } from './UnauthorizedLayout'\r\nimport SearchBar from '../../containers/searchBar/loadable'\r\nimport DrawerProfile from '../../components/DrawerProfile'\r\nimport { popupMenus } from '../../containers/searchBar/popupMenus'\r\nimport { LargeDesktop, MobileAndTablet } from '../../utils/displayResponsive'\r\nimport store from '../../store'\r\nimport isEmpty from 'lodash/isEmpty'\r\n\r\nexport class Layout extends Component {\r\n render() {\r\n const { authorized, sidebarOpen, toggle, appUser, isTeacher, match, location } = this.props\r\n if (!authorized) return \r\n \r\n \r\n {/* toggle(false)}\r\n menu={popupMenus(isTeacherPath, appUser?.roles?.length, academy?.[0]?.schoolId)}\r\n pathname={pathname}\r\n isTeacher={isTeacher}\r\n />\r\n }\r\n styles={{\r\n root: {\r\n overflow: 'unset',\r\n },\r\n sidebar: {\r\n zIndex: 300,\r\n position: 'fixed',\r\n overflowY: 'hidden',\r\n },\r\n overlay: {\r\n zIndex: 250,\r\n },\r\n content: {\r\n position: 'absolute',\r\n overflowY: 'unset',\r\n },\r\n }}\r\n >\r\n \r\n {!matchPathAll && \r\n */}\r\n \r\n {!isEmpty(appUser) ? (\r\n \r\n toggle(false)}\r\n menu={popupMenus(\r\n isTeacherPath,\r\n appUser?.roles?.length,\r\n academy?.[0]?.schoolId\r\n )}\r\n pathname={pathname}\r\n isTeacher={isTeacher}\r\n />\r\n
\r\n \r\n )}\r\n \r\n \r\n \n \n \n Certificate\n \n \n {validCert === 'valid' ? (\n \n Valid\n \n ) : (\n \n Expired\n \n )}\n \n \n\n \n \n
\n \n {haveBadge ? (\n <>\n \n Badge\n \n \n Detail\n \n {/* \n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n has been the industry’s standard dummy text ever.\n */}\n \n \n Issued on:\n \n \n {moment(data?.certificate?.certificatedDate).format('DD MMMM YYYY')}\n \n \n \n \n Issued by:\n \n \n {data?.certificate?.certificateTemplate?.schoolName}\n \n \n \n \n Issued using:\n \n \n Classwin\n \n \n \n \n Issued to:\n \n \n {data?.certificate?.certificateTemplate?.studentName}\n \n \n \n \n Expiry on:\n \n \n {data?.certificate?.expiredDate\n ? moment(data?.certificate?.expiredDate).format('DD MMMM YYYY')\n : 'No Expire'}\n \n \n \n \n Status:\n \n \n Verified\n \n \n
\n \n )}\n {showButton && (\n \n history.push('/')}\n style={{ maxWidth: 400, width: '100%', margin: '0 auto' }}\n >\n Enter Classwin\n \n
\n )}\n \r\n {!matchPathAll &&
\r\n ) : (\r\n {!matchPathAll &&
\r\n )}\r\n {this.props.children}\r\n {sidebarOpen && (\r\n \r\n {\r\n toggle(false)\r\n }}\r\n >
\r\n\r\n {error.value}
}\n \n {/* \n \n 
\n {locale === 'th' ? 'สร้างคอร์สใหม่' : 'Create Course'}\n \n */}\n this.setState({ openAddModal: true })}\n data-intro=\"course1\"\n style={{ borderRadius: 4 }}\n >\n \n \n Create Course\n \n \n
\n )}\n - \n {sideMenus.map((menu) => {\n const isSamePath = pathname.startsWith(menu.link)\n\n return (\n
- \n
teacherSidebar(false)} to={menu.link}>\n \n\n \n )\n })}\n
\n \n \n {\n handleChange(e)\n setState({ ...state, name: e.target.value })\n }}\n status={touched.name && errors.name && 'error'}\n messageStatus={errors.name}\n Border={({ theme }) => `1px solid ${theme.black20}`}\n />\n
\n \n setState({ ...state, description: e.target.value })}\n Border={({ theme }) => `1px solid ${theme.black20}`}\n />\n \n Add\n \n \n
\n )\n }}\n \n \n setState({ ...state, profileImage })}\n />\n
\n \n \n
\n \n {showAll ? 'See less' : 'See more'}\n \n
\n - \n {data.map(({ id, translate, title, name, fill, bgColor, disabled }) => (\n
{this.props.children}
\n }\n}\n\nOutsideAlerter.propTypes = {\n handleChange: PropTypes.func.isRequired,\n children: PropTypes.element.isRequired,\n}\n","import styled from 'styled-components'\nimport theme from '../../theme'\nimport { Container } from '../index'\n\nconst ContainerCwEditor = styled(Container)`\n border: 1px solid ${theme.grey};\n border-radius: 4px;\n background-color: #fff;\n padding: 10px;\n\n :hover {\n opacity: 0.8;\n border-color: gray;\n }\n`\nexport { ContainerCwEditor }\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { EditorState, convertToRaw } from 'draft-js'\nimport { Editor } from 'react-draft-wysiwyg'\nimport draftToHtml from 'draftjs-to-html'\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'\nimport { ContainerCwEditor } from './style'\n\nclass CwEditor extends React.Component {\n state = {\n editorState: EditorState.createEmpty(),\n }\n\n onEditorStateChange = (editorState) => {\n this.setState(\n {\n editorState,\n },\n () => {\n const value = draftToHtml(convertToRaw(editorState.getCurrentContent()))\n this.props.onChange(value)\n }\n )\n }\n\n render() {\n const { editorState } = this.state\n return (\n \n \n \n \n \n
\n )\n }\n}\n\nexport default Loading\n","import styled from 'styled-components'\nimport { Container, Typography } from '../index'\n\nconst Wrapper = styled.div`\n background-color: #f3f3f3;\n padding: 16px 23px;\n margin-bottom: 16px;\n border-radius: 10px;\n cursor: pointer;\n display: inline-flex;\n position: relative;\n height: 57px;\n`\n\nconst Countdown = styled(Typography)`\n position: absolute;\n font-size: ${({ theme }) => theme['text-base']};\n`\n\nconst Key = styled(Typography)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n`\n\nconst Icon = styled.img`\n position: absolute;\n width: 19px;\n right: 22px;\n`\n\nexport { Container, Wrapper, Countdown, Icon, Key, Typography }\n","export default __webpack_public_path__ + \"static/media/ic-copy.190ed947.svg\";","import React from 'react'\nimport PropTypes from 'prop-types'\nimport ErrorBoundary from '../errorBoundary'\nimport { Container, Wrapper, Countdown, Icon, Key } from './style.js'\nimport CopyIcon from '../../images/ic-copy.svg'\n\nclass StreamKey extends React.Component {\n state = {\n count: 15,\n isHide: true,\n copied: false,\n }\n\n countdown = () => {\n const myInterval = window.setInterval(() => {\n this.setState((prevState) => {\n if (prevState.count > 1) {\n return {\n count: prevState.count - 1,\n copied: false,\n }\n } else {\n // timeout\n window.clearInterval(myInterval)\n return { isHide: true, count: 15 }\n }\n })\n }, 1000)\n }\n\n handleShow = () => {\n this.setState({ isHide: false }, this.countdown)\n }\n\n handleCopy = async () => {\n const { streamKey } = this.props\n try {\n await navigator.clipboard.writeText(streamKey)\n this.setState({ copied: true })\n } catch (error) {\n console.error(error)\n console.error('Can not copy into clipbroad')\n }\n }\n\n render() {\n const { count, isHide, copied } = this.state\n const { streamKey } = this.props\n if (isHide) {\n return (\n \n {title} \n
\n )\n}\n\nexport default MainTable\n","import React, { useState, useEffect } from 'react'\nimport Table from 'rc-table'\nimport EmptyImage from '../../images/EmptyFolder.svg'\nimport { Container, EmptyWrapper } from './style'\nimport { Typography } from '../index'\nimport Sorter from './Sorter'\n\nconst noData = () => {\n return (\n \n 
\n \n
\n \n 
\n {/* \n No data\n */}\n
\n \n {title} \n
\n )\n}\n\nexport default MainTable\n","import React, { useState, useEffect } from 'react'\nimport Table from 'rc-table'\nimport EmptyFolder from '../../images/EmptyFolder.svg'\nimport { Container, EmptyWrapper } from './style'\nimport { Typography } from '../index'\nimport Sorter from './Sorter'\n\nconst noData = () => {\n return (\n \n \n \n
\n \n 
\n {/* \n There’s no Invoices\n */}\n
\n \n {title} \n
\n )\n}\n\nexport default MainTable\n","import React, { useState, useEffect } from 'react'\nimport { Table, ConfigProvider } from 'antd'\nimport { Container, EmptyWrapper } from './style'\nimport { Typography } from '../index'\nimport Sorter from './Sorter'\nimport EmptyImage from '../../images/EmptyFolder.svg'\n\nconst noData = () => {\n return (\n \n \n \n
\n \n \n {/* \n No data\n */}\n
\n \n // \n // You’ve reached the end of the list\n // \n //
\n // )\n return (\n \n \n Powered by Classwin Co.,Ltd.\n \n
\n )\n }\n\n if (!data || loading) {\n return \n \n {addCard && addCardVisible ?
\n {!hasMore && renderEndMessage()}\n \n
\n )\n}\n\nListView.defaultProps = {\n emptyTitle: 'No course found',\n emptyDesc: 'There is no course found. Please check your keyword and search again.',\n skip: 20,\n}\n\nexport default ListView\n","import styled from 'styled-components'\n\nconst Container = styled.div``\n\nconst Image = styled.div`\n height: 180px;\n background-image: ${(props) =>\n `linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(${props.src})`};\n background-position: center;\n background-size: cover;\n /* border-radius: 10px 10px 0 0; */\n`\n\nexport { Container, Image }\n","import React from 'react'\nimport ErrorBoundary from '../errorBoundary'\n// import getImageUrl from '../../utils/getImageUrl'\n\nimport { Container } from './style'\n\nconst HoverVideoPlayer = ({ children }) => {\n // console.log('hoverVideo')\n return (\n \n \n {cropLabel}\n \n \n \n \n
\n \n
\n \n {hasCustomAspect && (\n \n Crop\n \n
\n \n \n \n Aspect Ratio:\n \n setAspect(4 / 3)}>\n \n setAspect(16 / 9)}>\n \n
\n )}\n \n \n 4:3\n \n
\n \n \n 16:9\n \n
\n \n {data.label}\n {data.options.length}\n
\n)\n\nconst PureInputTag = ({\n options = [],\n handleChange = () => {},\n handleBlur = () => {},\n ...props\n}) => {\n const customStyles = {\n control: (provided) => ({\n ...provided,\n boxShadow: 'none',\n '&:hover': {\n border: `1px solid ${theme.primary1}`,\n },\n '&:active': {\n border: `1px solid ${theme.primary1}`,\n },\n fontSize: 14,\n }),\n container: (provided, props) => ({\n ...provided,\n marginTop: '10px',\n width: props.styles?.width || '100%',\n minWidth: '250px',\n fontSize: 14,\n color: theme.primary1,\n // zIndex: 0,\n }),\n placeholder: (provided) => {\n return {\n ...provided,\n fontSize: 14,\n color: theme.black38,\n }\n },\n option: (provided, { isSelected, isFocused }) => {\n return {\n ...provided,\n backgroundColor: isSelected ? '#2684FF' : isFocused ? theme.whiteblue : null,\n }\n },\n menu: (styles) => ({ ...styles, fontSize: 14 }),\n input: (styles) => ({\n ...styles,\n fontSize: 14,\n '& input': {\n font: 'inherit',\n },\n }),\n }\n return (\n - \n {items.filter(onFilter).map(({ label: Label, value }) => (\n
{children}
\n \n )\n}\n\nexport default SimpleRippleButton\n","export default __webpack_public_path__ + \"static/media/ic-bin-gray-24-px.e5a3c36c.svg\";","export default __webpack_public_path__ + \"static/media/PencilSimple.f8e45e71.svg\";","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import styled, { css } from 'styled-components'\nimport { Container, Label } from '../../../../components'\n\nconst Icon = styled.i`\n justify-self: end;\n z-index: 1;\n cursor: pointer;\n margin-left: ${({ marginLeft }) => marginLeft};\n display: flex;\n align-self: center;\n`\n\nconst IconArrow = styled.img`\n transform: rotate(${({ rotate }) => rotate});\n cursor: pointer;\n width: 22px;\n height: 22px;\n align-self: center;\n`\n\nconst AddFiles = styled.div`\n /* width: 100%; */\n display: flex;\n flex-wrap: wrap;\n\n // padding: 5px;\n // border: 1px solid ${(props) => props.theme.gray2};\n font-size: ${({ theme }) => theme['text-xxs']};\n transition: all 0.2s;\n outline: none;\n margin-bottom: 0px;\n margin-top: 8px;\n border-radius: 6px;\n .item {\n border: 1px solid rgba(194, 194, 194, 0.7);\n }\n\n .upload-button {\n margin-left: auto;\n /* margin-top: 10px; */\n display: inline;\n }\n\n .file-uploaded-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n width: calc(100% - 140px);\n padding: 0px 12px;\n max-height: 40px;\n border: 1px solid ${(props) => props.theme.black20};\n border-radius: 6px;\n }\n\n ${(props) => {\n if (props.altstyle) {\n return css`\n padding: 12px 0;\n border: none;\n border-bottom: 1px solid rgba(194, 194, 194, 0.5);\n `\n }\n return ``\n }}\n`\n\nconst File = styled.div`\n background-color: ${(props) => props.theme.whiteblue};\n border-radius: 6px;\n display: flex;\n align-items: center;\n padding: 3px 12px;\n min-width: 120px;\n gap: 8px;\n`\n\nconst CloseIcon = styled.div`\n display: flex;\n /* width: 100%; */\n margin-left: auto;\n flex-direction: row-reverse;\n height: max-content;\n cursor: pointer;\n /* fill: ${(props) => props.theme.primary}; */\n\n img {\n width: 10px;\n height: 10px;\n }\n`\n\nconst ContentBody = styled(Container)`\n position: fixed;\n top: ${({ isCourseSetting }) => (isCourseSetting ? '56px' : '0px')};\n height: ${({ isCourseSetting }) => (isCourseSetting ? 'calc(100vh - 0px)' : '100%')};\n //right: 0;\n z-index: 3;\n top: 54px;\n right: 140px;\n\n // box-shadow: -4px 6px 15px rgba(0, 0, 0, 0.1);\n transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n /* transform: translateX(0vw); */\n overflow-y: scroll;\n overflow-x: hidden;\n // margin: 0;\n width: 43%;\n min-width: 400px;\n background-color: transparent;\n grid-template-rows: repeat(5, min-content) 1fr;\n ::-webkit-scrollbar {\n width: 0px;\n }\n ${({ isDragging }) => {\n if (isDragging)\n return css`\n display: none;\n `\n return css``\n }}\n @media (max-width: 1024px) {\n position: fixed;\n top: 40px;\n height: calc(100vh - 50px);\n }\n`\nconst Item = styled.div`\n display: flex;\n`\nconst InputRadio = styled.input`\n margin-right: 10px;\n`\n\nconst _Label = styled(Label)`\n display: block;\n margin-bottom: 15px;\n p {\n color: ${(props) => props.theme.primaryFont};\n }\n ${({ isDescription }) =>\n isDescription &&\n `\n margin-bottom: 0px;\n `}\n`\nconst Wrapper = styled.div`\n height: 12px;\n`\n\nconst RadioLabel = styled.div`\n display: flex;\n gap: 5px;\n @media (max-width: 1350px) {\n flex-direction: column;\n }\n`\n\nconst SwitchRow = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n margin-top: 12px;\n`\nconst Line = styled.div`\n margin: 20px -17px;\n height: 1px;\n background-color: ${(props) => props.theme.gray3};\n border: none;\n`\nconst FilenameBorder = styled.div`\n display: flex;\n align-items: center;\n padding: 0px 16px;\n border: 1px solid ${({ theme }) => theme.black38};\n border-radius: 8px;\n width: 100%;\n`\nconst UploadSection = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n gap: 16px;\n`\nexport {\n Icon,\n IconArrow,\n AddFiles,\n File,\n CloseIcon,\n ContentBody,\n Item,\n InputRadio,\n _Label as Label,\n Wrapper,\n RadioLabel,\n SwitchRow,\n Line,\n FilenameBorder,\n UploadSection,\n}\n","export default __webpack_public_path__ + \"static/media/Classwin_certificateQRcode.5c3ce8fa.png\";","export default __webpack_public_path__ + \"static/media/instructor-01.4636bfae.svg\";","import styled from 'styled-components'\nimport { Typography } from '../../components'\n\nconst Container = styled.div`\n // position: relative;\n // flex: 1;\n // min-width: 1px;\n width: 100%;\n // background: #fff;\n // box-shadow: 0 2px 8px 2px rgba(20, 23, 28, 0.15);\n // border-radius: 10px 10px 0 0;\n // height: calc(100vh - 100px);\n\n @media (max-width: 991px) {\n border-radius: 0px;\n box-shadow: none;\n z-index: 1;\n padding-bottom: 45px;\n }\n\n @media (max-width: 768px) {\n height: calc(100vh - 70px - 45.99px);\n\n /* height: auto; */\n }\n /* position: relative; */\n hr.objective {\n margin: 20px 0;\n\n height: 2px;\n background-color: #dedfe0;\n border: none;\n }\n`\n\nconst Item = styled.div`\n margin-bottom: 18px;\n`\nconst Itemradio = styled.div`\n margin: 18px 0px 18px 0px;\n`\n\nconst TimeInput = styled.div`\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin-bottom: 20px;\n grid-gap: 17px;\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n`\n\nconst CourseImgInput = styled.div`\n align-items: center;\n display: grid;\n grid-template-columns: auto 50px;\n margin-bottom: 20px;\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n\n textarea {\n border: 1px solid ${({ theme }) => theme.black20};\n }\n\n textarea hover {\n border-color: ${({ theme }) => theme.dark};\n opacity: 100%;\n }\n`\n\nconst CourseDivImgBtn = styled.div`\n // border: 1px solid;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n margin-left: 10px;\n`\n\nconst CourseImgBtnCou = styled.button`\n width: 32px;\n height: 32px;\n margin-bottom: 5px;\n border-radius: 50%;\n border: 0px;\n z-index: 1;\n\n border: 1px solid ${({ theme }) => theme['black20']};\n margin: -1px 0px 0px -1px;\n //background-color: ${({ theme }) => theme.colors.secondary};\n background-color: ${({ courseNameColor }) => courseNameColor};\n cursor: pointer;\n`\nconst CourseImgBtnIns = styled.button`\n width: 32px;\n height: 32px;\n margin-bottom: 5px;\n border-radius: 50%;\n border: 0px;\n z-index: 1;\n\n border: 1px solid ${({ theme }) => theme['black20']};\n margin: -1px 0px 0px -1px;\n //background-color: ${({ theme }) => theme.colors.secondary};\n background-color: ${({ instructorNameColor }) => instructorNameColor};\n cursor: pointer;\n`\n\n// background-color: ${({ theme }) => theme.colors.secondary};\nconst CourseImgBtnPos = styled.button`\n width: 32px;\n height: 32px;\n margin-bottom: 5px;\n border-radius: 50%;\n border: 0px;\n z-index: 1;\n border: 1px solid ${({ theme }) => theme['black20']};\n\n margin: -1px 0px 0px -1px;\n // background-color: ${({ theme }) => theme.colors.secondary};\n background-color: ${({ positionColor }) => positionColor};\n cursor: pointer;\n`\n\nconst Grid = styled.div`\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin-bottom: 20px;\n grid-gap: 17px;\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n`\nexport const Grid2 = styled.div`\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n grid-gap: 15px;\n`\n\nconst GridTree = styled.div`\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n grid-gap: 17px;\n @media (max-width: 768px) {\n grid-template-columns: 1fr;\n }\n`\nconst SubHeader = styled.div`\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n .wrapper {\n display: flex;\n position: relative;\n padding: 20px 45px;\n border-bottom: 1px solid #dedfe0;\n @media (max-width: 768px) {\n padding: 20px 15px;\n }\n }\n .main-header {\n flex: 1;\n min-width: 1px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n .title {\n margin: 0px;\n &h2 {\n /* margin-top: 10px; */\n }\n }\n\n // button {\n // /* margin-top: 20px; */\n // padding-top: 7px;\n // padding-bottom: 7px;\n // }\n }\n`\n\nconst Content = styled.div`\n padding: 40px 150px 80px 150px;\n @media (max-width: 1024px) {\n padding: 20px 45px;\n }\n @media (max-width: 768px) {\n padding: 20px 15px;\n }\n`\n// const styleImageBox = styled.div``\nconst DivAvatar = styled.div`\n position: absolute;\n top: 34.5vw;\n left: 40px;\n\n @media (max-width: 2560px) {\n top: 38.5vw;\n left: 10vw;\n }\n @media (max-width: 2460px) {\n top: 39.5vw;\n left: 7.5vw;\n }\n @media (max-width: 2300px) {\n top: 38.5vw;\n left: 7vw;\n }\n @media (max-width: 2130px) {\n top: 38vw;\n left: 6.5vw;\n }\n\n @media (max-width: 1970px) {\n top: 37.5vw;\n left: 6vw;\n }\n\n @media (max-width: 1920px) {\n top: 37.5vw;\n left: 95px;\n }\n\n @media (max-width: 1800px) {\n top: 35.5vw;\n left: 75px;\n }\n @media (max-width: 1680px) {\n top: 34.5vw;\n left: 55px;\n }\n\n @media (max-width: 1500px) {\n top: 33.5vw;\n left: 26px;\n }\n\n @media (max-width: 1500px) {\n top: 33.5vw;\n left: 26px;\n }\n @media (max-width: 1366px) {\n top: 32.5vw;\n left: 12px;\n }\n\n @media (max-width: 1280px) {\n top: 31.5vw;\n left: 8px;\n }\n @media (max-width: 1200px) {\n top: 30.5vw;\n left: 4px;\n }\n @media (max-width: 1152px) {\n top: 30vw;\n left: -5px;\n }\n @media (max-width: 1080px) {\n top: 28.5vw;\n left: -25px;\n }\n`\n\nconst VideoDescription = styled(Typography)`\n font-size: ${({ theme }) => theme['text-xs']};\n color: ${(props) => props.theme.grey};\n`\n\nconst Unit = styled.span`\n padding: 0px 12px;\n min-width: 53px;\n text-align: center;\n`\n\nconst Description = styled(Typography)`\n font-size: ${({ theme }) => theme['text-xs']};\n color: #c2c2c2;\n`\n\nconst Wrapper = styled.div`\n display: flex;\n @media (max-width: 768px) {\n flex-wrap: wrap;\n }\n`\n\nconst Form = styled.div`\n width: 100%;\n`\n\nconst Badge = styled.div`\n display: flex;\n width: fit-content;\n padding: 4px 11px;\n border: none;\n margin-right: 8px;\n border-radius: 8px;\n background-color: ${(props) => props.theme.whiteblue};\n font-weight: bold;\n height: 32px;\n`\nconst Subtitle = styled(Typography)`\n font-size: ${({ theme }) => theme['text-xs']};\n /* line-height: 8px; */\n color: ${(props) => props.theme.gray2};\n`\n\nconst UploadImageWrapper = styled.div`\n display: flex;\n flex-direction: column;\n\n @media (min-width: 769px) {\n .image {\n flex: 7;\n width: 100%;\n }\n .image-ipad {\n flex: 5;\n width: 100%;\n }\n }\n @media (max-width: 768px) {\n flex-direction: column;\n }\n`\nconst EmptyContainer = styled.div`\n display: flex;\n justify-content: center;\n height: 100%;\n img {\n width: 100vw;\n }\n p {\n font-weight: 400;\n }\n`\n\nconst RadioContainer = styled.div`\n display: inline-flex;\n padding-right: 30px;\n &:last-child {\n padding-right: 0;\n }\n .ant-checkbox .ant-checkbox-inner {\n border-color: #3d4453;\n }\n .ant-checkbox-checked .ant-checkbox-inner {\n background-color: #253e87;\n border-color: #253e87;\n }\n .ant-radio-checked .ant-radio-inner {\n border: 1px solid #253e87;\n }\n .ant-radio-checked .ant-radio-inner:after {\n background-color: #253e87;\n border: 1px solid #253e87;\n }\n`\nconst Header = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n`\nexport const GridInstructor = styled.div`\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n grid-gap: 15px;\n`\nexport const Line = styled.div`\n border-bottom: 1px solid ${(props) => props.theme.black38};\n margin-top: 50px;\n width: 100%;\n`\nexport {\n EmptyContainer,\n Subtitle,\n Badge,\n Form,\n Wrapper,\n Container,\n Item,\n Itemradio,\n Content,\n SubHeader,\n Grid,\n VideoDescription,\n TimeInput,\n Description,\n Unit,\n UploadImageWrapper,\n RadioContainer,\n CourseImgInput,\n DivAvatar,\n CourseImgBtnCou,\n CourseImgBtnIns,\n CourseImgBtnPos,\n CourseDivImgBtn,\n GridTree,\n Header,\n}\nexport const Footer = styled.footer`\n display: flex;\n justify-content: flex-end;\n background: white;\n box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.1), 0px -1px 2px rgba(0, 0, 0, 0.06);\n min-height: 56px;\n padding: 8px 50px;\n gap: 16px;\n align-items: center;\n z-index: 10;\n //position: sticky;\n bottom: 0;\n left: 0;\n position: fixed;\n width: 100%;\n`\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","export default __webpack_public_path__ + \"static/media/CourseImage1.430c62ba.jpg\";","export default __webpack_public_path__ + \"static/media/PenIcon.f5716781.svg\";","export default __webpack_public_path__ + \"static/media/White-close.d28b4d4d.svg\";","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","import styled from 'styled-components'\n\nexport const Heading = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);\n background: #fff;\n border-top: 1px solid ${(props) => props.theme.gray8};\n padding: 10px 50px;\n z-index: 5;\n min-height: 60px;\n position: relative;\n @media (max-width: 768px) {\n padding: 10px 15px;\n }\n`\nexport const ContainerModal = styled.div`\n display: flex;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n`\nexport const ContainerModalSuccess = styled.div`\n display: flex;\n padding: 20px;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n`\nexport const ButtonContainer = styled.div`\n width: 80%;\n padding-top: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: auto;\n`\nexport const PageContainer = styled.div`\n padding: 40px 50px;\n /* background-color: #fafafa; */\n @media (max-width: 768px) {\n padding: 40px 20px;\n }\n`\nexport const Container = styled.div`\n //background-color: #fff;\n border: 2.4px solid transparent;\n border-radius: 10px;\n height: auto;\n width: 100%;\n //padding: 20px 30px 25px 30px;\n // @media (max-width: 768px) {\n // padding: 16px;\n // }\n // @media (max-width: 425px) {\n // padding: 8px;\n // }\n`\n\nexport const SwitchGroup = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n @media (max-width: 700px) {\n justify-content: flex-start;\n }\n`\nexport const SwitchContainer = styled.div`\n margin: 0px 7px;\n display: flex;\n .react-switch-bg {\n //background-color: #253e87 !important;\n }\n`\n\nexport const ItemContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n // padding: 0 40px;\n padding: 32px 50px 40px 50px;\n margin-bottom: 16px;\n background-color: #fff;\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: 10px;\n @media (max-width: 900px) {\n padding: 32px 30px 40px 50px;\n }\n // @media (max-width: 620px) {\n // padding: 0 10px;\n // }\n\n @media (max-width: 560px) {\n flex-direction: column;\n justify-content: flex-start;\n //align-items: center;\n padding: 24px 24px;\n }\n\n @media (max-width: 425px) {\n padding: 24px;\n }\n`\n\nexport const CustomizeContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n padding: 32px 50px 40px 50px;\n background-color: #fff;\n box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 10%), 0px 4px 6px -2px rgb(0 0 0 / 5%);\n border-radius: 10px;\n\n @media (max-width: 900px) {\n padding: 32px 30px 40px 50px;\n }\n @media (max-width: 620px) {\n padding: 45px 10px 30px;\n }\n\n @media (max-width: 560px) {\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n padding: 24px 24px;\n }\n\n @media (max-width: 425px) {\n padding: 24px 15px;\n }\n`\nexport const DetailContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n @media (max-width: 560px) {\n justify-content: center;\n }\n`\n\nexport const RowContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 2px;\n @media (max-width: 560px) {\n margin-bottom: 4px;\n margin-left: 4px;\n }\n`\nexport const CheckContainer = styled.img`\n width: 14px;\n height: 14px;\n margin-right: 6px;\n margin-top: 3px;\n @media (max-width: 560px) {\n margin-right: 8px;\n }\n`\n\nexport const Card = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n border-radius: 10px;\n\n @media (max-width: 860px) {\n // align-items: flex-end;\n margin-top: 13px;\n }\n @media (max-width: 560px) {\n width: 100%;\n align-items: center;\n margin-top: 16px;\n }\n`\nexport const GroupContainerL = styled.div`\n display: flex;\n gap: 40px;\n\n @media (max-width: 768px) {\n gap: 40px;\n }\n @media (max-width: 620px) {\n gap: 40px;\n }\n`\nexport const GroupContainerR = styled.div`\n display: flex;\n //gap: 11px;\n flex-direction: column;\n align-items: center;\n @media (max-width: 860px) {\n flex-direction: column;\n }\n @media (max-width: 560px) {\n width: 100%;\n }\n`\nexport const IconContainer = styled.img`\n width: 100px;\n height: 100px;\n\n @media (max-width: 560px) {\n //margin-right: 16px;\n }\n`\nexport const IconWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`\nexport const ImagePlan = styled.img`\n width: 80px;\n height: 80px;\n`\nexport const TypoGroup = styled.div`\n display: flex;\n align-items: center;\n margin-right: 20px;\n @media (max-width: 860px) {\n margin-right: 0px;\n //margin-bottom: 5px;\n }\n`\n\nexport const Separator = styled.div`\n display: block;\n width: 100%;\n height: 2px;\n background-color: #e8e8e8;\n margin: 16px 0px;\n`\nexport const SeparatorMobile = styled.div`\n display: block;\n width: 100%;\n height: 2px;\n background-color: #e8e8e8;\n margin: 16px 0px;\n`\n\nexport const HolderDiv = styled.div`\n display: flex;\n align-items: center;\n height: 67.2px;\n @media (max-width: 1024px) {\n height: auto;\n }\n`\n\nexport const DetailPack = styled.div`\n display: flex;\n gap: 64px;\n @media (max-width: 820px) {\n gap: 28px;\n }\n`\n","export default __webpack_public_path__ + \"static/media/empty.c899e133.png\";","import Loadable from 'react-loadable'\n\nexport default Loadable({\n loader: () => import('./index'),\n loading: () => null,\n})\n","export const ACCESS_TOKEN = 'accessToken'\n\nexport const courseTypes = {\n online: 'Online',\n classroom: 'Classroom',\n}\n\nexport const questionType = {\n 'choice question': 'Single Choice',\n // 'True/False': 'True or false',\n 'Fill a word/letter': 'Short answer',\n Essay: 'Paragraph',\n File: 'File',\n // 'content': 'Content',\n}\n\nexport const GOOGLE_API_KEY = process.env.REACT_APP_GOOGLE_API_KEY\n","import React, { Component, useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport { useHistory } from 'react-router-dom'\nimport ErrorBoundary from '../errorBoundary'\nimport Typography from '../typography'\nimport { LargeDesktop, MobileAndTablet } from '../../utils/displayResponsive'\nimport ArrowIcon from '../../images/ic-next-gray-24-px.svg'\n\nconst Active = styled(Typography)`\n color: ${(props) => props.theme.primary2};\n font-size: ${({ theme }) => theme['text-sm']};\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n\n :hover {\n color: ${(props) => props.theme.primary1};\n }\n`\n\nconst InActive = styled((props) => \n {children}\n
\n )\n}\n\nclass Breadcrumb extends Component {\n static propTypes = {}\n\n render() {\n const {\n data,\n firstLabel,\n link = '/',\n shadow = true,\n border = false,\n firstLabelId,\n beforeLink,\n } = this.props\n return (\n \n 
\n \n {item.label}\n \n
\n ) : (\n \n \n
\n ) : (\n {title}
\n {description}
\n {/* \n \n {subCategory?.name}\n \n {!!avgRating && (\n
\n \n \n {avgRating}\n \n \n {_.times(5, (index) => {\n if (index < avgRating) {\n return \n
\n )}\n \n \n {name}\n \n {shortDescription} \n
\n \n \n {lectureNum} Lectures\n \n
\n \n {checkIcon(type)}\n \n {courseTypes[type]}\n \n
\n \n
\n \n \n Save\n \n
\n \n Edit your course \n
\n \n \n Setting\n \n\n \n
\n \n
\n \n \n Save\n \n
\n \n \n Assign instructor to this course\n \n
\n \n \n Instructor\n \n \n
\n \n
\n \n
\n \n \n \n {!isModal && (\n \n this.onChangeLocale('th')}\n style={{ cursor: 'pointer' }}\n >\n TH\n \n | \n this.onChangeLocale('en')}\n >\n EN\n \n \n )}\n
\n {image && \n \n \n
\n )}\n {btn1 && (\n \n
{btn1}
\n \n )}{' '}\n {btn2 && (\n \n
\n
\n )}\n \n
{btn2}
\n \n {title && (\n
\n {title && (\n
\r\n \r\n Forget Password\r\n \r\n {/* \r\n \r\n \r\n */}\r\n \r\n Email is incorrect. Please try again.\r\n \r\n )\r\n .trim()\r\n .required(locale === 'th' ? 'จำเป็น' : 'Required'),\r\n })}\r\n onSubmit={(values, { setSubmitting }) => {\r\n onSubmit(values)\r\n setSubmitting(false)\r\n }}\r\n >\r\n {(props) => {\r\n const { values, errors, handleChange, handleSubmit } = props\r\n return (\r\n \r\n )\r\n }}\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapState = (state) => ({\r\n locale: state.Language.locale,\r\n})\r\n\r\nexport default connect(mapState)(ResetPasswordForm)\r\n"],"sourceRoot":""}