\n {children}\n
\n \n {topicMessages.map(message => {\n const AlertComponent = getAlertComponent(message.code);\n return (\n \n remove(message.id)}\n payload={message.payload}\n {...customProps}\n >\n {message.text}\n \n \n );\n })}\n
\n );\n}\n\nAlertList.propTypes = {\n className: PropTypes.string,\n topic: PropTypes.string,\n customAlerts: PropTypes.objectOf(\n PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.func,\n PropTypes.node,\n ]),\n ),\n // eslint-disable-next-line react/forbid-prop-types\n customProps: PropTypes.object,\n};\n\nAlertList.defaultProps = {\n topic: null,\n className: null,\n customAlerts: {},\n customProps: {},\n};\n","/* eslint-disable import/prefer-default-export */\nimport { useContext, useEffect } from 'react';\nimport UserMessagesContext from './UserMessagesContext';\n\nexport function useAlert(isVisible, {\n code, text, topic, type, payload, dismissible,\n}) {\n const { add, remove } = useContext(UserMessagesContext);\n\n // Please note:\n // The deps list [isVisible, code, ... etc.] in this `useEffect` call prevents the\n // effect from running if none of deps have changed. However, \"changed\" for objects is\n // defined in terms of identity; thus, if you provide a payload that is *seemingly* equal\n // to the previous one but *actually* a different object, then this effect will run.\n // If you are particularly unlucky, this will cause an infinite re-render loop.\n // This manifested itself in TNL-7400.\n // We hope to address the underlying issue in TNL-7418.\n // In the mean time, you may follow the pattern that `useAccessExpirationAlert`\n // establishes: memoize the payload so that the exact same object is used if the\n // payload has not changed. And don't put values based off of now() in your payload, as\n // that breaks memoization.\n useEffect(() => {\n if (!isVisible) {\n return undefined;\n }\n\n const cleanupId = add({\n code, text, topic, type, payload, dismissible,\n });\n\n return () => {\n remove(cleanupId);\n };\n }, [isVisible, code, text, topic, type, payload, dismissible]);\n}\n","// Helper, that is used to forcibly finalize all promises\n// in thunk before running matcher against state.\nexport const executeThunk = async (thunk, dispatch, getState) => {\n await thunk(dispatch, getState);\n await new Promise(setImmediate);\n};\n\n// Utility function for appending the browser timezone to the url\n// Can be used on the backend when the user timezone is not set in the user account\nexport const appendBrowserTimezoneToUrl = (url) => {\n const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n const urlObject = new URL(url);\n if (browserTimezone) {\n urlObject.searchParams.append('browser_timezone', browserTimezone);\n }\n return urlObject.href;\n};\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n certStatusEarnedNotAvailableHeader: {\n id: 'cert.alert.earned.unavailable.header.v2',\n defaultMessage: 'Your grade and certificate status will be available soon.',\n description: 'Header alerting the user that their certificate will be available soon.',\n },\n certStatusDownloadableHeader: {\n id: 'cert.alert.earned.ready.header',\n defaultMessage: 'Congratulations! Your certificate is ready.',\n description: 'Header alerting the user that their certificate is ready.',\n },\n certStatusNotPassingHeader: {\n id: 'cert.alert.notPassing.header',\n defaultMessage: 'You are not yet eligible for a certificate',\n },\n certStatusNotPassingButton: {\n id: 'cert.alert.notPassing.button',\n defaultMessage: 'View grades',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n FormattedDate,\n FormattedMessage,\n injectIntl,\n intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { Alert, Button } from '@edx/paragon';\nimport { useDispatch } from 'react-redux';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheckCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';\nimport { getConfig } from '@edx/frontend-platform';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport certMessages from './messages';\nimport certStatusMessages from '../../../progress-tab/certificate-status/messages';\nimport { requestCert } from '../../../data/thunks';\n\nexport const CERT_STATUS_TYPE = {\n EARNED_NOT_AVAILABLE: 'earned_but_not_available',\n DOWNLOADABLE: 'downloadable',\n REQUESTING: 'requesting',\n UNVERIFIED: 'unverified',\n};\n\nfunction CertificateStatusAlert({ intl, payload }) {\n const dispatch = useDispatch();\n const {\n certificateAvailableDate,\n certStatus,\n courseEndDate,\n courseId,\n certURL,\n isWebCert,\n userTimezone,\n org,\n notPassingCourseEnded,\n tabs,\n } = payload;\n\n // eslint-disable-next-line react/prop-types\n const AlertWrapper = (props) => props.children(props);\n\n const sendAlertClickTracking = (id) => {\n const { administrator } = getAuthenticatedUser();\n sendTrackEvent(id, {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n });\n };\n\n const renderCertAwardedStatus = () => {\n const alertProps = {\n variant: 'success',\n icon: faCheckCircle,\n iconClassName: 'alert-icon text-success-500',\n };\n if (certStatus === CERT_STATUS_TYPE.EARNED_NOT_AVAILABLE) {\n const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};\n const certificateAvailableDateFormatted = \n
\n
\n \n {header} \n {body}\n
\n {buttonVisible && (\n \n {\n if (buttonAction) { buttonAction(); }\n }}\n >\n {buttonMessage}\n \n
\n )}\n - \nexport function VerifiedCertBullet() {\n const verifiedCertLink = (\n \n
- \n
\n \n );\n}\n\n// Must be child of a - \n
\n \n );\n}\n\n// Must be child of a - \n
\n \n );\n}\n\n// Must be child of a - \n
\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Alert as ParagonAlert } from '@edx/paragon';\nimport { CheckCircle, Info, WarningFilled } from '@edx/paragon/icons';\n\nimport { ALERT_TYPES } from './UserMessagesProvider';\n\nfunction getAlertVariant(type) {\n switch (type) {\n case ALERT_TYPES.ERROR:\n return 'warning';\n case ALERT_TYPES.DANGER:\n return 'danger';\n case ALERT_TYPES.SUCCESS:\n return 'success';\n default:\n return 'info';\n }\n}\n\nfunction getAlertIcon(type) {\n switch (type) {\n case ALERT_TYPES.ERROR:\n return WarningFilled;\n case ALERT_TYPES.SUCCESS:\n return CheckCircle;\n default:\n return Info;\n }\n}\n\nfunction Alert({\n type, dismissible, children, onDismiss, stacked,\n}) {\n return (\n - \n \n\n {/** [MM-P2P] Experiment (conditional) */}\n { showMMP2P ? (\n
\n \n\n\n\n ) : (\n\n\n\n Last chance to upgrade\n\n\n You are still eligible to upgrade to a Verified Certificate!\n Unlock full course access and highlight the knowledge you'll gain.\n\n\n\n )}\n\n {linkedTitle && (\n\n {dateBlock.description && (\n\n {dateBlock.title}\n\n )}\n {!linkedTitle && (\n{dateBlock.title}\n )}\n{dateBlock.description}\n )}\n {!linkedTitle && dateBlock.link && (\n \n );\n}\n\nDateSummary.propTypes = {\n dateBlock: PropTypes.shape({\n date: PropTypes.string.isRequired,\n dateType: PropTypes.string,\n description: PropTypes.string,\n link: PropTypes.string,\n linkText: PropTypes.string,\n title: PropTypes.string.isRequired,\n learnerHasAccess: PropTypes.bool,\n }).isRequired,\n userTimezone: PropTypes.string,\n /** [MM-P2P] Experiment */\n mmp2p: PropTypes.shape({\n state: PropTypes.shape({\n isEnabled: PropTypes.bool.isRequired,\n upgradeDeadline: PropTypes.string,\n }),\n }),\n};\n\nDateSummary.defaultProps = {\n userTimezone: null,\n /** [MM-P2P] Experiment */\n mmp2p: {\n state: {\n isEnabled: false,\n upgradeDeadline: '',\n },\n },\n};\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport DateSummary from '../DateSummary';\nimport messages from '../messages';\nimport { useModel } from '../../../generic/model-store';\n\nfunction CourseDates({\n intl,\n /** [MM-P2P] Experiment */\n mmp2p,\n}) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n userTimezone,\n } = useModel('courseHomeMeta', courseId);\n const {\n datesWidget: {\n courseDateBlocks,\n datesTabLink,\n },\n } = useModel('outline', courseId);\n\n if (courseDateBlocks.length === 0) {\n return null;\n }\n\n return (\n - \n logClick(courseTool.analyticsId)}>\n
\n {courseTool.title}\n \n \n ))}\n - \n
\n \n - \n \n\n\n\n {due && (\n\n {complete ? (\n\n\n {displayTitle}\n \n , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}\n \n\n
\n \n \n\n )}\n \n );\n}\n\nSequenceLink.propTypes = {\n id: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n courseId: PropTypes.string.isRequired,\n first: PropTypes.bool.isRequired,\n sequence: PropTypes.shape().isRequired,\n};\n\nexport default injectIntl(SequenceLink);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Collapsible, IconButton } from '@edx/paragon';\nimport { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';\nimport { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport SequenceLink from './SequenceLink';\nimport { useModel } from '../../generic/model-store';\n\nimport genericMessages from '../../generic/messages';\nimport messages from './messages';\n\nfunction Section({\n courseId,\n defaultOpen,\n expand,\n intl,\n section,\n}) {\n const {\n complete,\n sequenceIds,\n title,\n } = section;\n const {\n courseBlocks: {\n sequences,\n },\n } = useModel('outline', courseId);\n\n const [open, setOpen] = useState(defaultOpen);\n\n useEffect(() => {\n setOpen(expand);\n }, [expand]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, []);\n\n const sectionTitle = (\n - \n
- \n {sequenceIds.map((sequenceId, index) => (\n
\n );\n}\n\nSection.propTypes = {\n courseId: PropTypes.string.isRequired,\n defaultOpen: PropTypes.bool.isRequired,\n expand: PropTypes.bool.isRequired,\n intl: intlShape.isRequired,\n section: PropTypes.shape().isRequired,\n};\n\nexport default injectIntl(Section);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n suggestedSchedule: {\n id: 'datesBanner.suggestedSchedule',\n defaultMessage: 'We’ve built a suggested schedule to help you stay on track. But don’t worry—it’s flexible so you'\n + ' can learn at your own pace.',\n description: 'Messaging that explain the gaol and the effect fo the suggested schedule',\n },\n upgradeToCompleteHeader: {\n id: 'datesBanner.upgradeToCompleteGradedBanner.header',\n defaultMessage: 'Upgrade to unlock',\n description: 'Messaging that prompts users to upgrade their course status in order to access locked course content',\n },\n upgradeToCompleteBody: {\n id: 'datesBanner.upgradeToCompleteGradedBanner.body',\n defaultMessage: 'You are auditing this course, which means that you are unable to participate in graded'\n + ' assignments. To complete graded assignments as part of this course, you can upgrade today.',\n description: 'It explain the effect of upgrading the course',\n },\n upgradeToCompleteButton: {\n id: 'datesBanner.upgradeToCompleteGradedBanner.button',\n defaultMessage: 'Upgrade now',\n description: 'Button that prompts users to upgrade their course status',\n },\n upgradeToShiftBody: {\n id: 'datesBanner.upgradeToResetBanner.body',\n defaultMessage: 'To keep yourself on track, you can update this schedule and shift the past due assignments into'\n + ' the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates.',\n description: 'Text that explain the consequences of resetting dates when learner needs to upgrade to do so',\n },\n upgradeToShiftButton: {\n id: 'datesBanner.upgradeToResetBanner.button',\n defaultMessage: 'Upgrade to shift due dates',\n description: 'Button that prompts users to upgrade their course status before they can shift their due dates into'\n + ' the future',\n },\n missedDeadlines: {\n id: 'datesBanner.resetDatesBanner.header',\n defaultMessage: 'It looks like you missed some important deadlines based on our suggested schedule.',\n description: 'Text shown when leaner missed assignment due date',\n },\n shiftDatesBody: {\n id: 'datesBanner.resetDatesBanner.body',\n defaultMessage: 'To keep yourself on track, you can update this schedule and shift the past due assignments into'\n + ' the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates.',\n description: 'Text that explain the consequences of resetting dates',\n },\n shiftDatesButton: {\n id: 'datesBanner.resetDatesBanner.button',\n defaultMessage: 'Shift due dates',\n description: 'Button that prompts users to move their due dates into the future',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n Alert,\n Button,\n Row,\n Col,\n} from '@edx/paragon';\n\nimport { resetDeadlines } from '../data';\nimport { useModel } from '../../generic/model-store';\nimport messages from './messages';\n\nfunction ShiftDatesAlert({ fetch, intl, model }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n datesBannerInfo,\n hasEnded,\n } = useModel(model, courseId);\n\n const {\n missedDeadlines,\n missedGatedContent,\n } = datesBannerInfo;\n\n if (!missedDeadlines || missedGatedContent || hasEnded) {\n return null;\n }\n\n const dispatch = useDispatch();\n\n return (\n - \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- 2520 \n
- 2/3 \n
- 3.14, .98 \n
- \n {' + - * / '}\n
- \n {'^ '}\n
- \n {'|| '}\n
- x+(2*y)/x-1 \n
- x^(n+1) \n
- v_IN+v_OUT \n
- 1||2 \n
- 20*e \n
- 418*pi \n
- 20% \n
- abs(x+y) \n
- sqrt(x^2-y) \n
- sin, cos, tan, sec, csc, cot \n
- arcsin, sinh, arcsinh \n
- sin(4x+y) \n
- arccsch(4x+y) \n
- / \n )}\n\n
- \n { getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff\n ? (\n
\n {content.map(item => (\n \n )}\n\n \n \n );\n}\nCourseBreadcrumb.propTypes = {\n content: PropTypes.arrayOf(\n PropTypes.shape({\n default: PropTypes.bool,\n id: PropTypes.string,\n label: PropTypes.string,\n }),\n ).isRequired,\n sequenceId: PropTypes.string,\n unitId: PropTypes.string,\n withSeparator: PropTypes.bool,\n courseId: PropTypes.string,\n isStaff: PropTypes.bool,\n};\n\nCourseBreadcrumb.defaultProps = {\n withSeparator: false,\n sequenceId: null,\n unitId: null,\n courseId: null,\n isStaff: null,\n};\n\nexport default function CourseBreadcrumbs({\n courseId,\n sectionId,\n sequenceId,\n unitId,\n isStaff,\n /** [MM-P2P] Experiment */\n mmp2p,\n}) {\n const course = useModel('coursewareMeta', courseId);\n const courseStatus = useSelector(state => state.courseware.courseStatus);\n const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);\n\n const allSequencesInSections = Object.fromEntries(useModels('sections', course.sectionIds).map(section => [section.id, {\n default: section.id === sectionId,\n title: section.title,\n sequences: useModels('sequences', section.sequenceIds),\n }]));\n\n const links = useMemo(() => {\n const chapters = [];\n const sequentials = [];\n if (courseStatus === 'loaded' && sequenceStatus === 'loaded') {\n Object.entries(allSequencesInSections).forEach(([id, section]) => {\n chapters.push({\n id,\n label: section.title,\n default: section.default,\n sequences: section.sequences,\n });\n if (section.default) {\n section.sequences.forEach(sequence => {\n sequentials.push({\n id: sequence.id,\n label: sequence.title,\n default: sequence.id === sequenceId,\n sequences: [sequence],\n });\n });\n }\n });\n }\n return [chapters, sequentials];\n }, [courseStatus, sequenceStatus, allSequencesInSections]);\n\n return (\n \n );\n}\n\nCourseBreadcrumbs.propTypes = {\n courseId: PropTypes.string.isRequired,\n sectionId: PropTypes.string,\n sequenceId: PropTypes.string,\n unitId: PropTypes.string,\n isStaff: PropTypes.bool,\n /** [MM-P2P] Experiment */\n mmp2p: PropTypes.shape({\n state: PropTypes.shape({\n isEnabled: PropTypes.bool.isRequired,\n }),\n }),\n};\n\nCourseBreadcrumbs.defaultProps = {\n sectionId: null,\n sequenceId: null,\n unitId: null,\n isStaff: null,\n /** [MM-P2P] Experiment */\n mmp2p: {},\n};\n","import { breakpoints, useWindowSize } from '@edx/paragon';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { getLocalStorage, setLocalStorage } from '../../../data/localStorage';\nimport { getSessionStorage } from '../../../data/sessionStorage';\nimport { useModel } from '../../../generic/model-store';\nimport SidebarContext from './SidebarContext';\nimport { SIDEBARS } from './sidebars';\n\nexport default function SidebarProvider({\n courseId,\n unitId,\n children,\n}) {\n const { verifiedMode } = useModel('courseHomeMeta', courseId);\n const shouldDisplayFullScreen = useWindowSize().width < breakpoints.large.minWidth;\n const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.medium.minWidth;\n const showNotificationsOnLoad = getSessionStorage(`notificationTrayStatus.${courseId}`) !== 'closed';\n const initialSidebar = (verifiedMode && shouldDisplaySidebarOpen && showNotificationsOnLoad)\n ? SIDEBARS.NOTIFICATIONS.ID\n : null;\n const [currentSidebar, setCurrentSidebar] = useState(initialSidebar);\n const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`));\n const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(getLocalStorage(`upgradeNotificationCurrentState.${courseId}`));\n\n useEffect(() => {\n // As a one-off set initial sidebar if the verified mode data has just loaded\n if (verifiedMode && currentSidebar === null && initialSidebar) {\n setCurrentSidebar(initialSidebar);\n }\n }, [initialSidebar, verifiedMode]);\n\n const onNotificationSeen = () => {\n setNotificationStatus('inactive');\n setLocalStorage(`notificationStatus.${courseId}`, 'inactive');\n };\n\n const toggleSidebar = (sidebarId) => {\n // Switch to new sidebar or hide the current sidebar\n setCurrentSidebar(sidebarId === currentSidebar ? null : sidebarId);\n };\n\n return (\n - \n {/* Top Line */}\n {!first && }\n\n {/* Dot */}\n \n\n {/* Bottom Line */}\n {!last && }\n\n {/* Content */}\n \n\n\n\n {items.map((item) => {\n /** [MM-P2P] Experiment (conditional) */\n const { badges: itemBadges } = mmp2pOverride\n ? getBadgeListAndColor(new Date(mmp2p.state.upgradeDeadline), intl, item, items)\n : getBadgeListAndColor(date, intl, item, items);\n\n const showDueDateTime = item.dateType === 'assignment-due-date';\n const showLink = item.link && isLearnerAssignment(item);\n const title = showLink ? ({item.title}) : item.title;\n const available = item.learnerHasAccess && (item.link || !isLearnerAssignment(item));\n const textColor = available ? 'text-primary-700' : 'text-gray-500';\n\n return (\n\n\n );\n })}\n\n \n {item.assignmentType && `${item.assignmentType}: `}{title}\n {showDueDateTime && (\n \n due\n\n { /** [MM-P2P] Experiment (conditional) */ }\n { mmp2pOverride\n ? (\n
\n \n )}\n \n You are still eligible to upgrade to a Verified Certificate!\n Unlock full course access and highlight the knowledge you'll gain.\n\n )\n : (item.description &&{item.description})}\n \n );\n}\n\nDay.propTypes = {\n date: PropTypes.objectOf(Date).isRequired,\n first: PropTypes.bool,\n intl: intlShape.isRequired,\n items: PropTypes.arrayOf(PropTypes.shape({\n date: PropTypes.string,\n dateType: PropTypes.string,\n description: PropTypes.string,\n dueNext: PropTypes.bool,\n learnerHasAccess: PropTypes.bool,\n link: PropTypes.string,\n title: PropTypes.string,\n })).isRequired,\n last: PropTypes.bool,\n /** [MM-P2P] Experiment */\n mmp2p: PropTypes.shape({\n state: PropTypes.shape({\n isEnabled: PropTypes.bool.isRequired,\n upgradeDeadline: PropTypes.string,\n }),\n }),\n};\n\nDay.defaultProps = {\n first: false,\n last: false,\n /** [MM-P2P] Experiment */\n mmp2p: {\n state: {\n isEnabled: false,\n upgradeDeadline: '',\n },\n },\n};\n\nexport default injectIntl(Day);\n","import React from 'react';\n/** [MM-P2P] Experiment (import) */\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport Day from './Day';\nimport { daycmp, isLearnerAssignment } from '../utils';\n\n/** [MM-P2P] Experiment (argument) */\nexport default function Timeline({ mmp2p }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n courseDateBlocks,\n } = useModel('dates', courseId);\n\n // Group date items by day (assuming they are sorted in first place) and add some metadata\n const groupedDates = [];\n const now = new Date();\n let foundNextDue = false;\n let foundToday = false;\n courseDateBlocks.forEach(courseDateBlock => {\n const dateInfo = { ...courseDateBlock };\n const parsedDate = new Date(dateInfo.date);\n\n if (!foundNextDue && parsedDate >= now && isLearnerAssignment(dateInfo) && !dateInfo.complete) {\n foundNextDue = true;\n dateInfo.dueNext = true;\n }\n\n if (!foundToday) {\n const compared = daycmp(parsedDate, now);\n if (compared === 0) {\n foundToday = true;\n } else if (compared > 0) {\n foundToday = true;\n groupedDates.push({\n date: now,\n items: [],\n });\n }\n }\n\n if (groupedDates.length === 0 || daycmp(groupedDates[groupedDates.length - 1].date, parsedDate) !== 0) {\n // Add new grouped date\n groupedDates.push({\n date: parsedDate,\n items: [dateInfo],\n first: groupedDates.length === 0,\n });\n } else {\n groupedDates[groupedDates.length - 1].items.push(dateInfo);\n }\n });\n if (!foundToday) {\n groupedDates.push({ date: now, items: [] });\n }\n if (groupedDates.length) {\n groupedDates[groupedDates.length - 1].last = true;\n }\n\n return (\n - \n {range[0]}: {(range[1] * 100).toFixed(0)}%-100%\n \n );\n }\n const previousGrade = orderedGradeRange[index - 1];\n return (\n
- \n {range[0]}: {(range[1] * 100).toFixed(0)}%-{(previousGrade[1] * 100).toFixed(0)}%\n \n );\n })}\n
- F: {'<'}{passingGrade}% \n
- {problemScore.earned}/{problemScore.possible} \n ))}\n
- \n {index + 1}\n
- \n
logLinkClicked('dates')}>\n {intl.formatMessage(messages.datesCardLink)}\n \n{intl.formatMessage(messages.datesCardDescription)}
\n \n - \n
logLinkClicked('course_outline')}>\n {intl.formatMessage(messages.outlineCardLink)}\n \n{intl.formatMessage(messages.outlineCardDescription)}
\n \n
- \nexport function UnlockGradedBullet() {\n const gradedAssignmentsInBoldText = (\n \n
- \nexport function FullAccessBullet() {\n const fullAccessInBoldText = (\n \n
- \nexport function SupportMissionBullet() {\n const missionInBoldText = (\n \n
\n
\n {intl.formatMessage(messages.dates)}
\n- \n {courseDateBlocks.map((courseDateBlock) => (\n
{intl.formatMessage(messages.handouts)}
\n\n {buttonIcon}\n
\n \n {title}\n
\n \n {text}\n
\n \n );\n}\n\nFlagButton.propTypes = {\n buttonIcon: PropTypes.element.isRequired,\n title: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n handleSelect: PropTypes.func.isRequired,\n isSelected: PropTypes.bool.isRequired,\n};\n\nexport default FlagButton;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n// These flag svgs are derivatives of the Flag icon from paragon\nimport { ReactComponent as FlagIntenseIcon } from './flag_black.svg';\nimport { ReactComponent as FlagCasualIcon } from './flag_outline.svg';\nimport { ReactComponent as FlagRegularIcon } from './flag_gray.svg';\nimport FlagButton from './FlagButton';\nimport messages from '../messages';\n\nfunction LearningGoalButton({\n level,\n isSelected,\n handleSelect,\n intl,\n}) {\n const buttonDetails = {\n casual: {\n daysPerWeek: 1,\n title: messages.casualGoalButtonTitle,\n text: messages.casualGoalButtonText,\n icon: \n handleSubscribeToReminders(event)}\n disabled={!daysPerWeekGoal}\n >\n {intl.formatMessage(messages.setGoalReminder)}\n \n
\n \n
\n \n
\n \n {intl.formatMessage(messages.goalReminderDetail)}\n
\n {intl.formatMessage(messages.tools)}
\n- \n {courseTools.map((courseTool) => (\n
\n
\n );\n\n return (\n \n {complete ? (\n
\n \n {title}\n \n , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}\n \n
\n - \n
- \n
\n
\n );\n}\n\nUpsellFBESoonCardContent.propTypes = {\n accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,\n timezoneFormatArgs: PropTypes.shape({\n timeZone: PropTypes.string,\n }),\n};\n\nUpsellFBESoonCardContent.defaultProps = {\n timezoneFormatArgs: {},\n};\n\nfunction PastExpirationCardContent() {\n return (\n \n
\n
\n
\n );\n}\n\nfunction ExpirationCountdown({\n courseId, hoursToExpiration, setupgradeNotificationCurrentState, type,\n}) {\n let expirationText;\n if (hoursToExpiration >= 24) { // More than 1 day left\n // setupgradeNotificationCurrentState is available in NotificationTray (not course home)\n if (setupgradeNotificationCurrentState) {\n if (type === 'access') {\n setupgradeNotificationCurrentState('accessDaysLeft');\n setLocalStorage(`upgradeNotificationCurrentState.${courseId}`, 'accessDaysLeft');\n }\n if (type === 'offer') {\n setupgradeNotificationCurrentState('FPDdaysLeft');\n setLocalStorage(`upgradeNotificationCurrentState.${courseId}`, 'FPDdaysLeft');\n }\n }\n expirationText = (\n \n
{expirationText}
);\n}\n\nExpirationCountdown.propTypes = {\n courseId: PropTypes.string.isRequired,\n hoursToExpiration: PropTypes.number.isRequired,\n setupgradeNotificationCurrentState: PropTypes.func,\n type: PropTypes.string,\n};\nExpirationCountdown.defaultProps = {\n setupgradeNotificationCurrentState: null,\n type: null,\n};\n\nfunction AccessExpirationDateBanner({\n courseId, accessExpirationDate, timezoneFormatArgs, setupgradeNotificationCurrentState,\n}) {\n if (setupgradeNotificationCurrentState) {\n setupgradeNotificationCurrentState('accessDateView');\n setLocalStorage(`upgradeNotificationCurrentState.${courseId}`, 'accessDateView');\n }\n return (\n \n
\n );\n}\n\nAccessExpirationDateBanner.propTypes = {\n courseId: PropTypes.string.isRequired,\n accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,\n timezoneFormatArgs: PropTypes.shape({\n timeZone: PropTypes.string,\n }),\n setupgradeNotificationCurrentState: PropTypes.func,\n};\n\nAccessExpirationDateBanner.defaultProps = {\n timezoneFormatArgs: {},\n setupgradeNotificationCurrentState: null,\n};\n\nfunction PastExpirationDateBanner({\n courseId, accessExpirationDate, timezoneFormatArgs, setupgradeNotificationCurrentState,\n}) {\n if (setupgradeNotificationCurrentState) {\n setupgradeNotificationCurrentState('PastExpirationDate');\n setLocalStorage(`upgradeNotificationCurrentState.${courseId}`, 'PastExpirationDate');\n }\n return (\n \n
\n );\n}\n\nPastExpirationDateBanner.propTypes = {\n courseId: PropTypes.string.isRequired,\n accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,\n timezoneFormatArgs: PropTypes.shape({\n timeZone: PropTypes.string,\n }),\n setupgradeNotificationCurrentState: PropTypes.func,\n};\n\nPastExpirationDateBanner.defaultProps = {\n timezoneFormatArgs: {},\n setupgradeNotificationCurrentState: null,\n};\n\nfunction UpgradeNotification({\n accessExpiration,\n contentTypeGatingEnabled,\n marketingUrl,\n courseId,\n offer,\n org,\n setupgradeNotificationCurrentState,\n shouldDisplayBorder,\n timeOffsetMillis,\n upsellPageName,\n userTimezone,\n verifiedMode,\n}) {\n const dateNow = Date.now();\n const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};\n const correctedTime = new Date(dateNow + timeOffsetMillis);\n const accessExpirationDate = accessExpiration ? new Date(accessExpiration.expirationDate) : null;\n const pastExpirationDeadline = accessExpiration ? new Date(dateNow) > accessExpirationDate : false;\n\n if (!verifiedMode) {\n return null;\n }\n\n const eventProperties = {\n org_key: org,\n courserun_key: courseId,\n };\n\n const promotionEventProperties = {\n creative: 'sidebarupsell',\n name: 'In-Course Verification Prompt',\n position: 'sidebar-message',\n promotion_id: 'courseware_verified_certificate_upsell',\n ...eventProperties,\n };\n\n useEffect(() => {\n sendTrackingLogEvent('edx.bi.course.upgrade.sidebarupsell.displayed', eventProperties);\n sendTrackEvent('Promotion Viewed', promotionEventProperties);\n }, []);\n\n const logClick = () => {\n sendTrackingLogEvent('edx.bi.course.upgrade.sidebarupsell.clicked', eventProperties);\n sendTrackingLogEvent('edx.course.enrollment.upgrade.clicked', {\n ...eventProperties,\n location: 'sidebar-message',\n });\n sendTrackEvent('Promotion Clicked', promotionEventProperties);\n sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {\n ...eventProperties,\n linkCategory: 'green_upgrade',\n linkName: `${upsellPageName}_green`,\n linkType: 'button',\n pageName: upsellPageName,\n });\n };\n\n const logClickPastExpiration = () => {\n sendTrackEvent('edx.bi.ecommerce.upgrade_notification.past_expiration.button_clicked', {\n ...eventProperties,\n linkCategory: 'upgrade_notification',\n linkName: `${upsellPageName}_course_details`,\n linkType: 'button',\n pageName: upsellPageName,\n });\n };\n\n /*\n There are 5 parts that change in the upgrade card:\n upgradeNotificationHeaderText\n expirationBanner\n upsellMessage\n callToActionButton\n offerCode\n */\n let upgradeNotificationHeaderText;\n let expirationBanner;\n let upsellMessage;\n let callToActionButton;\n let offerCode;\n\n if (!!accessExpiration && !!contentTypeGatingEnabled) {\n const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) / 1000 / 60 / 60);\n\n if (hoursToAccessExpiration >= (7 * 24)) {\n if (offer) { // countdown to the first purchase discount if there is one\n const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) / 1000 / 60 / 60);\n upgradeNotificationHeaderText = (\n \n {offer.code}),\n }}\n />\n
\n );\n }\n\n return (\n \n
\n \n {upgradeNotificationHeaderText}\n
\n {expirationBanner}\n\n {upsellMessage}\n
\n \n {callToActionButton}\n
\n {offerCode}\n {intl.formatMessage(messages.proctoringInfoPanel)}
\n\n {readableStatus && (\n <>\n
\n \n {intl.formatMessage(messages.proctoringCurrentStatus)} {intl.formatMessage(messages[`${readableStatus}ProctoringStatus`])}\n
\n\n {intl.formatMessage(messages[`${readableStatus}ProctoringMessage`])}\n
\n\n {readableStatus === readableStatuses.otherCourseApproved && intl.formatMessage(messages[`${readableStatus}ProctoringDetail`])}\n
\n \n )}\n {![readableStatuses.verified, readableStatuses.otherCourseApproved].includes(readableStatus) && (\n <>\n\n {isNotYetSubmitted(status) && (\n intl.formatMessage(messages.proctoringPanelGeneralInfo)\n )}\n {!isNotYetSubmitted(status) && (\n intl.formatMessage(messages.proctoringPanelGeneralInfoSubmitted)\n )}\n
\n{intl.formatMessage(messages.proctoringPanelGeneralTime)}
\n \n )}\n {isNotYetSubmitted(status) && (\n onboardingExamButton\n )}\n \n\n {message}\n
\n );\n\n if (!showCheck && showSpinner) {\n bodyContent = (\n \n {message}\n
\n );\n }\n\n if (showCheck && !showSpinner) {\n bodyContent = (\n \n {message}\n
\n );\n }\n return bodyContent;\n };\n\n return (\n \n \n
\n \n );\n }\n}\n\nPageLoading.propTypes = {\n srMessage: PropTypes.node.isRequired,\n};\n","import React, { Suspense } from 'react';\n\nimport { ModalLayer } from '@edx/paragon';\n\nimport PageLoading from '../../generic/PageLoading';\n\nconst BlockModalContent = React.lazy(() => import('./BlockModalContent'));\n\nexport const BlockModal = () => (\n \n { !isStatic && (\n
\n );\n};\nFlyover.propTypes = {\n isStatic: PropTypes.bool,\n options: PropTypes.shape({\n access: PropTypes.shape({\n isAudit: PropTypes.bool.isRequired,\n }),\n flyover: PropTypes.shape({\n toggle: PropTypes.func.isRequired,\n }),\n state: PropTypes.shape({\n afterUpgradeDeadline: PropTypes.bool.isRequired,\n }),\n }),\n};\n\nFlyover.defaultProps = {\n isStatic: false,\n options: {\n access: {\n isAudit: false,\n },\n flyover: {\n toggle: () => {},\n },\n state: {\n afterUpgradeDeadline: false,\n },\n },\n};\n\nexport default Flyover;\n","/* eslint-disable no-use-before-define */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronLeft } from '@fortawesome/free-solid-svg-icons';\n\nimport Sidecard from './Sidecard';\n\nexport const FlyoverMobile = ({ options }) => {\n const {\n access: { isAudit },\n flyover: { toggle },\n state: { afterUpgradeDeadline },\n } = options;\n\n const handleReturnSpanKeyPress = (event) => {\n if (event.key === 'Enter') {\n toggle();\n }\n };\n\n if (!isAudit || afterUpgradeDeadline) {\n return null;\n }\n\n return (\n \n Notifications\n \n \n
\n )}\n \n
\n );\n};\nFlyoverMobile.propTypes = {\n options: PropTypes.shape({\n access: PropTypes.shape({\n isAudit: PropTypes.bool.isRequired,\n }),\n flyover: PropTypes.shape({\n toggle: PropTypes.func.isRequired,\n }),\n state: PropTypes.shape({\n afterUpgradeDeadline: PropTypes.bool.isRequired,\n }),\n }),\n};\n\nFlyoverMobile.defaultProps = {\n options: {\n access: {\n isAudit: false,\n },\n flyover: {\n toggle: () => {},\n },\n state: {\n afterUpgradeDeadline: false,\n },\n },\n};\n\nexport default FlyoverMobile;\n","/* eslint-disable no-use-before-define */\nimport React from 'react';\n\nconst FlyoverTriggerIcon = () => (\n \n \n
\n \n \n Notifications\n \n
\n \n
\n \n
\n {/** [MM-P2P] Experiment (className for optimizely trigger) */}\n \n
\n {title}
\n \n
\n \n );\n}\n\nOutlineTab.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(OutlineTab);\n","export default __webpack_public_path__ + \"ee56f6ef2f1c80ed0cc1129259d6a3cd.gif\";","export default __webpack_public_path__ + \"ed041dea7f493a5345ac6702cf7972cf.gif\";","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n applyForCredit: {\n id: 'courseExit.programs.applyForCredit',\n defaultMessage: 'Apply for credit',\n description: 'Button for the learner to apply for course credit',\n },\n certificateHeaderDownloadable: {\n id: 'courseCelebration.certificateHeader.downloadable',\n defaultMessage: 'Your certificate is available!',\n description: 'Text displayed when course certificate is ready to be downloaded',\n },\n certificateHeaderNotAvailable: {\n id: 'courseCelebration.certificateHeader.notAvailable',\n defaultMessage: 'Your grade and certificate status will be available soon.',\n description: 'Header displayed when course certificate is not yet available to be viewed',\n },\n certificateNotAvailableBodyAccessCert: {\n id: 'courseCelebration.certificateBody.notAvailable.accessCertificate',\n defaultMessage: 'If you have earned a passing grade, your certificate will be automatically issued.',\n description: 'Text displayed when course certificate is not yet available to be viewed',\n },\n certificateHeaderUnverified: {\n id: 'courseCelebration.certificateHeader.unverified',\n defaultMessage: 'You must complete verification to receive your certificate.',\n description: 'Text displayed when a user has not verified their identity and cannot view their course certificate',\n },\n certificateHeaderRequestable: {\n id: 'courseCelebration.certificateHeader.requestable',\n defaultMessage: 'Congratulations, you qualified for a certificate!',\n description: 'Text displayed when a user has completed the course and can request a certificate',\n },\n certificateHeaderUpgradable: {\n id: 'courseCelebration.certificateHeader.upgradable',\n defaultMessage: 'Upgrade to pursue a verified certificate',\n description: 'Header when learner finished or pass the course but need to upgrade to get a certificate',\n },\n certificateImage: {\n id: 'courseCelebration.certificateImage',\n defaultMessage: 'Sample certificate',\n description: 'Alt text used to describe an image of a certificate',\n },\n completedCourseHeader: {\n id: 'courseCelebration.completedCourseHeader',\n defaultMessage: 'You have completed your course.',\n description: 'Header text for course exit section',\n },\n congratulationsHeader: {\n id: 'courseCelebration.congratulationsHeader',\n defaultMessage: 'Congratulations!',\n description: 'Greeting learner for finishing the course',\n },\n congratulationsImage: {\n id: 'courseCelebration.congratulationsImage',\n defaultMessage: 'Four people raising their hands in celebration',\n description: 'Alt text used to describe celebratory image',\n },\n courseInProgressDescription: {\n id: 'courseExit.courseInProgressDescription',\n defaultMessage: 'It looks like there is more content in this course that will be released in the future. Look out for email updates or check back on your course for when this content will be available.',\n description: 'Shown to learner when they finish all available assignments, but not the whole course',\n },\n courseInProgressHeader: {\n id: 'courseExit.courseInProgressHeader',\n defaultMessage: 'More content is coming soon!',\n description: 'Header when the status of the course not all of (contents or assignments) available yet',\n },\n dashboardLink: {\n id: 'courseExit.dashboardLink',\n defaultMessage: 'Dashboard',\n description: 'Link to user’s dashboard',\n },\n downloadButton: {\n id: 'courseCelebration.downloadButton',\n defaultMessage: 'Download my certificate',\n description: 'Button to download the course certificate',\n },\n endOfCourseDescription: {\n id: 'courseExit.endOfCourseDescription',\n defaultMessage: 'Unfortunately, you are not currently eligible for a certificate. You need to receive a passing grade to be eligible for a certificate.',\n description: 'Shown to learner when they did not pass the course',\n },\n endOfCourseHeader: {\n id: 'courseExit.endOfCourseHeader',\n defaultMessage: 'You’ve reached the end of the course!',\n },\n endOfCourseTitle: {\n id: 'courseExit.endOfCourseTitle',\n defaultMessage: 'End of Course',\n },\n idVerificationSupportLink: {\n id: 'courseExit.idVerificationSupportLink',\n defaultMessage: 'Learn more about ID verification',\n description: 'Link to an article about identity verification',\n },\n linkedinAddToProfileButton: {\n id: 'courseCelebration.linkedinAddToProfileButton',\n defaultMessage: 'Add to LinkedIn profile',\n description: 'Button to add certificate information to the user’s LinkedIn profile',\n },\n microBachelorsLearnMore: {\n id: 'courseExit.programs.microBachelors.learnMore',\n defaultMessage: 'Learn more about how your MicroBachelors credential can be applied for credit.',\n },\n microMastersLearnMore: {\n id: 'courseExit.programs.microMasters.learnMore',\n defaultMessage: 'Learn more about the process of applying MicroMasters certificates to Master’s degrees.',\n },\n microMastersMessage: {\n id: 'courseExit.programs.microMasters.mastersMessage',\n defaultMessage: 'If you’re interested in using your MicroMasters certificate towards a Master’s program, you can get started today!',\n },\n nextButtonComplete: {\n id: 'learn.sequence.navigation.complete.button', // for historical reasons\n defaultMessage: 'Complete the course',\n description: 'This text is shown on the button which usually links to the next unit or assignment in course sequence, however when it is the last unit. The button will link to course exit page',\n },\n nextButtonEnd: {\n id: 'courseExit.nextButton.endOfCourse',\n defaultMessage: 'Next (end of course)',\n description: 'This shown for the button which links to the next unit, when learner did not pass the course',\n },\n profileLink: {\n id: 'courseExit.profileLink',\n defaultMessage: 'Profile',\n description: 'Link to user’s profile',\n },\n programsLastCourseHeader: {\n id: 'courseExit.programs.lastCourse',\n defaultMessage: 'You have completed the last course in {title}!',\n description: 'This shown to learner when the course they completed is the last one of a program, the program might be mircomaster, or microbachelors...etc',\n },\n requestCertificateBodyText: {\n id: 'courseCelebration.requestCertificateBodyText',\n defaultMessage: 'In order to access your certificate, request it below.',\n description: 'Shown when learner need to request the certifcate',\n },\n requestCertificateButton: {\n id: 'courseCelebration.requestCertificateButton',\n defaultMessage: 'Request certificate',\n description: 'Button to request the course certificate',\n },\n searchOurCatalogLink: {\n id: 'courseExit.searchOurCatalogLink',\n defaultMessage: 'Search our catalog',\n description: 'First part of a sentence that continues afterward',\n },\n shareMessage: {\n id: 'courseCelebration.shareMessage',\n defaultMessage: 'Share your success on social media or email.',\n description: 'Recommending an action when learner pass the course',\n },\n socialMessage: {\n id: 'courseExit.social.shareCompletionMessage',\n defaultMessage: 'I just completed {title} with {platform}!',\n description: 'Shown when sharing course progress on a social network',\n },\n upgradeButton: {\n id: 'courseExit.upgradeButton',\n defaultMessage: 'Upgrade now',\n },\n upgradeLink: {\n id: 'courseExit.upgradeLink',\n defaultMessage: 'upgrade now',\n },\n verificationPending: {\n id: 'courseCelebration.verificationPending',\n defaultMessage: 'Your ID verification is pending and your certificate will be available once approved.',\n description: 'Shown when the status of verification is pending',\n },\n verifiedCertificateSupportLink: {\n id: 'courseExit.verifiedCertificateSupportLink',\n defaultMessage: 'Learn more about verified certificates',\n description: 'Anchor text for link that redirect to external help page about verified certificates',\n },\n verifyIdentityButton: {\n id: 'courseCelebration.verifyIdentityButton',\n defaultMessage: 'Verify ID now',\n description: 'Button to verify the identify of the user',\n },\n viewCertificateButton: {\n id: 'courseCelebration.viewCertificateButton',\n defaultMessage: 'View my certificate',\n description: 'Button to view the course certificate',\n },\n viewCourseScheduleButton: {\n id: 'courseExit.viewCourseScheduleButton',\n defaultMessage: 'View course schedule',\n description: 'Button to view the course schedule',\n },\n viewCoursesButton: {\n id: 'courseExit.viewCoursesButton',\n defaultMessage: 'View my courses',\n description: 'Button to redirect user to their course dashboard',\n },\n viewGradesButton: {\n id: 'courseExit.viewGradesButton',\n defaultMessage: 'View grades',\n },\n\n});\n\nexport default messages;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Alert, Button, Hyperlink } from '@edx/paragon';\nimport certImage from '../../../generic/assets/edX_certificate.png';\nimport messages from './messages';\n\n/**\n * Note for Open edX developers:\n * There are pieces of this component that are hard-coded and specific to edX that may not apply to your organization.\n * This includes mentions of our edX program types (MicroMasters, MicroBachelors, Professional Certificate, and\n * XSeries), along with their respective support article URLs and image variable names.\n *\n * Currently, this component will not render unless the learner's completed course has a related program of one of the\n * four aforementioned types. This will not impact the parent components (i.e. CourseCelebration will render normally).\n */\n\nconst programTypes = ['microbachelors', 'micromasters', 'professional-certificate', 'xseries'];\n\nfunction ProgramCompletion({\n intl,\n progress,\n title,\n type,\n url,\n}) {\n if (!programTypes.includes(type) || progress.notStarted !== 0 || progress.inProgress !== 0) {\n return null;\n }\n\n const programLink = (\n \n
\n \n { /** [MM-P2P] Experiment (the conditional) */ }\n { !MMP2P.state.isEnabled\n && (\n
\n {rootCourseId && (\n \n
\n \n \n
\n - \n {courses[rootCourseId].sectionIds.map((sectionId) => (\n
\n
\n )}\n \n
\n \n
\n {intl.formatMessage(messages.programsLastCourseHeader, { title })}
\n \n
\n
\n {intl.formatMessage(messages.microMastersMessage)}\n {' '}\n
\n
\n \n
\n );\n}\n\nFootnote.propTypes = {\n icon: PropTypes.shape({}).isRequired,\n text: PropTypes.node.isRequired,\n};\n\nexport default Footnote;\n","import { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\n\nimport messages from './messages';\nimport { useModel } from '../../../generic/model-store';\n\nconst COURSE_EXIT_MODES = {\n disabled: 0,\n celebration: 1,\n nonPassing: 2,\n inProgress: 3,\n};\n\n// These are taken from the edx-platform `get_cert_data` function found in lms/courseware/views/views.py\nconst CELEBRATION_STATUSES = [\n 'audit_passing',\n 'downloadable',\n 'earned_but_not_available',\n 'honor_passing',\n 'requesting',\n 'unverified',\n];\nconst NON_CERTIFICATE_STATUSES = [ // no certificate will be given, though a valid certificateData block is provided\n 'audit_passing',\n 'honor_passing', // provided when honor is configured to not give a certificate\n];\n\nfunction getCourseExitMode(\n certificateData,\n hasScheduledContent,\n isEnrolled,\n userHasPassingGrade,\n courseExitPageIsActive = null,\n) {\n const authenticatedUser = getAuthenticatedUser();\n\n if (courseExitPageIsActive === false || !authenticatedUser || !isEnrolled) {\n return COURSE_EXIT_MODES.disabled;\n }\n\n // Set defaults for our status-calculated variables, used when no certificateData is provided.\n // This happens when `get_cert_data` in edx-platform returns None, which it does if we are\n // in a certificate-earning mode, but the certificate is not available (maybe they didn't pass\n // or course is not set up for certificates or something). Audit users will always have a\n // certificateData sent over.\n let isCelebratoryStatus = true;\n let isEligibleForCertificate = true;\n\n if (certificateData) {\n const { certStatus } = certificateData;\n isCelebratoryStatus = CELEBRATION_STATUSES.indexOf(certStatus) !== -1;\n isEligibleForCertificate = NON_CERTIFICATE_STATUSES.indexOf(certStatus) === -1;\n }\n\n if (hasScheduledContent && !userHasPassingGrade) {\n return COURSE_EXIT_MODES.inProgress;\n }\n if (isEligibleForCertificate && !userHasPassingGrade) {\n return COURSE_EXIT_MODES.nonPassing;\n }\n if (isCelebratoryStatus) {\n return COURSE_EXIT_MODES.celebration;\n }\n return COURSE_EXIT_MODES.disabled;\n}\n\n// Returns null in order to render the default navigation text\nfunction getCourseExitNavigation(courseId, intl) {\n const {\n certificateData,\n hasScheduledContent,\n isEnrolled,\n userHasPassingGrade,\n courseExitPageIsActive,\n } = useModel('coursewareMeta', courseId);\n const exitMode = getCourseExitMode(\n certificateData,\n hasScheduledContent,\n isEnrolled,\n userHasPassingGrade,\n courseExitPageIsActive,\n );\n const exitActive = exitMode !== COURSE_EXIT_MODES.disabled;\n\n let exitText;\n switch (exitMode) {\n case COURSE_EXIT_MODES.celebration:\n exitText = intl.formatMessage(messages.nextButtonComplete);\n break;\n case COURSE_EXIT_MODES.nonPassing:\n exitText = intl.formatMessage(messages.nextButtonEnd);\n break;\n default:\n exitText = null;\n }\n return { exitActive, exitText };\n}\n\n// Meant to be used as part of a button's onClick handler.\n// For convenience, you can pass a falsy event and it will be ignored.\nconst logClick = (org, courseId, administrator, event, extraProperties) => {\n if (!event) {\n return;\n }\n\n sendTrackEvent(`edx.ui.lms.course_exit.${event}.clicked`, {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n ...extraProperties,\n });\n};\n\n// Use like the following to call this only once on initial page load:\n// useEffect(() => logVisit(org, courseId, administrator, variant), [org, courseId, administrator, variant]);\n// For convenience, you can pass a falsy variant and it will be ignored.\nconst logVisit = (org, courseId, administrator, variant) => {\n if (!variant) {\n return;\n }\n\n sendTrackEvent('edx.ui.lms.course_exit.visited', {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n variant,\n });\n};\n\nexport {\n COURSE_EXIT_MODES,\n getCourseExitMode,\n getCourseExitNavigation,\n logClick,\n logVisit,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\n\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport {\n FormattedMessage, injectIntl, intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { Hyperlink } from '@edx/paragon';\nimport { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport Footnote from './Footnote';\nimport messages from './messages';\nimport { logClick } from './utils';\n\nfunction DashboardFootnote({ intl, variant }) {\n const { courseId } = useSelector(state => state.courseware);\n const { org } = useModel('courseHomeMeta', courseId);\n const { administrator } = getAuthenticatedUser();\n\n const dashboardLink = (\n \n
\n logClick('linkedin')}\n url={`${socialUtmMarketingUrl}&utm_source=linkedin`}\n >\n logClick('twitter')}\n className=\"ml-2\"\n hashtags={hashtags}\n title={socialMessage ? intl.formatMessage(socialMessage, { platform: `@${twitterAccount}`, title }) : ''}\n url={`${socialUtmMarketingUrl}&utm_source=twitter`}\n >\n logClick('facebook')}\n className=\"ml-2\"\n quote={socialMessage ? intl.formatMessage(socialMessage, { platform: getConfig().SITE_NAME, title }) : ''}\n url={`${socialUtmMarketingUrl}&utm_source=facebook`}\n >\n logClick('email')}\n body={emailBody ? `${intl.formatMessage(emailBody)}\\n\\n` : ''}\n className=\"ml-2\"\n subject={emailSubject ? intl.formatMessage(emailSubject, { platform: getConfig().SITE_NAME, title }) : ''}\n url={`${marketingUrl}?${socialUtmCampaign}utm_medium=email&utm_source=email`}\n >\n
\n );\n}\n\nSocialIcons.defaultProps = {\n analyticsId: '',\n className: '',\n emailBody: messages.defaultEmailBody,\n emailSubject: null,\n hashtags: [getConfig().TWITTER_HASHTAG],\n socialMessage: null,\n};\n\nSocialIcons.propTypes = {\n analyticsId: PropTypes.string,\n className: PropTypes.string,\n courseId: PropTypes.string.isRequired,\n emailBody: PropTypes.shape({}),\n emailSubject: PropTypes.shape({}),\n hashtags: PropTypes.arrayOf(PropTypes.string),\n intl: intlShape.isRequired,\n socialMessage: PropTypes.shape({}),\n};\n\nexport default injectIntl(SocialIcons);\n","import React from 'react';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { getConfig } from '@edx/frontend-platform';\nimport { Hyperlink } from '@edx/paragon';\n\nimport messages from '../courseware/course/course-exit/messages';\n\nfunction IntlDashboardLink({ intl }) {\n return (\n \n
\n );\n}\n\nCatalogSuggestion.propTypes = {\n intl: intlShape.isRequired,\n variant: PropTypes.string.isRequired,\n};\n\nexport default injectIntl(CatalogSuggestion);\n","import React, { useEffect } from 'react';\nimport { getConfig } from '@edx/frontend-platform';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport {\n FormattedMessage, injectIntl, intlShape, defineMessages,\n} from '@edx/frontend-platform/i18n';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n Hyperlink, DataTable, CardView, Card,\n} from '@edx/paragon';\nimport PropTypes from 'prop-types';\nimport truncate from 'truncate-html';\nimport { useModel } from '../../../generic/model-store';\nimport fetchCourseRecommendations from './data/thunks';\nimport { FAILED, LOADED, LOADING } from './data/slice';\nimport CatalogSuggestion from './CatalogSuggestion';\nimport PageLoading from '../../../generic/PageLoading';\nimport { logClick } from './utils';\n\nconst messages = defineMessages({\n recommendationsHeading: {\n id: 'courseCelebration.recommendations.heading',\n description: 'Header for recommendations section of course celebration',\n defaultMessage: 'Keep building your skills with these courses!',\n },\n recommendationsCourseFooter: {\n id: 'courseCelebration.recommendations.label', // not very descriptive, but is historical\n description: 'Label on a discovery-card that lets a user know that it is a course card',\n defaultMessage: 'Course',\n },\n listJoin: {\n id: 'courseCelebration.recommendations.formatting.list_join',\n description: 'Joining mark or word for a list of items, use the {sp} placeholder to include space before the joining word',\n // eslint-disable-next-line prefer-template\n defaultMessage: ('{style, select, '\n + 'punctuation {, } ' // HACK: select keys must match ListStyles, above, but must be statically coded for extract\n + 'conjunction { {sp}and } ' // HACK: interpolating a space character to get a leading-space here\n + 'other { }}'),\n },\n browseCatalog: {\n id: 'courseCelebration.recommendations.browse_catalog',\n description: 'Link to course catalog in course celebration',\n defaultMessage: 'Explore more courses',\n },\n loadingRecommendations: {\n id: 'courseCelebration.recommendations.loading_recommendations',\n description: 'Screen-reader text for the loading screen for recommendations',\n defaultMessage: 'Loading recommendations',\n },\n});\n\nconst ListStyles = {\n punctuation: 'punctuation',\n conjunction: 'conjunction',\n};\n\nfunction CourseCard({\n original: {\n title,\n image,\n owners,\n marketingUrl,\n onClick,\n },\n intl,\n}) {\n const formatList = (items, style) => (\n items.join(intl.formatMessage(\n messages.listJoin,\n { style, sp: ' ' }, // HACK: there isn't a way to escape a leading space in the format, so pass one in\n ))\n );\n\n const formattedOwners = formatList(\n owners.map(owner => owner.key),\n ListStyles.punctuation,\n intl,\n );\n\n const subtitle = (\n \n
\n \n \n {intl.formatMessage(messages.browseCatalog)}\n \n
\n );\n}\n\nCourseRecommendations.propTypes = {\n intl: intlShape.isRequired,\n variant: PropTypes.string.isRequired,\n};\n\nexport default injectIntl(CourseRecommendations);\n","import { logError } from '@edx/frontend-platform/logging';\n\nimport {\n fetchCourseRecommendationsFailure,\n fetchCourseRecommendationsRequest,\n fetchCourseRecommendationsSuccess,\n} from './slice';\nimport {\n getCourseRecommendations,\n postUnsubscribeFromGoalReminders,\n} from './api';\nimport { updateModel } from '../../../../generic/model-store';\n\nexport default function fetchCourseRecommendations(courseKey, courseId) {\n return async (dispatch) => {\n dispatch(fetchCourseRecommendationsRequest({ courseId }));\n try {\n const recommendations = await getCourseRecommendations(courseKey);\n dispatch(updateModel({\n modelType: 'coursewareMeta',\n model: {\n id: courseId,\n recommendations,\n },\n }));\n dispatch(fetchCourseRecommendationsSuccess({ courseId }));\n } catch (error) {\n logError(error);\n dispatch(fetchCourseRecommendationsFailure({ courseId }));\n }\n };\n}\n\nexport async function unsubscribeFromGoalReminders(courseId, daysPerWeek, subscribedToReminders) {\n return postUnsubscribeFromGoalReminders(courseId, daysPerWeek, subscribedToReminders);\n}\n","import { getConfig, camelCaseObject } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\nfunction filterRecommendationsList(\n {\n data: {\n uuid,\n recommendations,\n },\n },\n {\n data: enrollments,\n },\n) {\n const enrollmentRunIds = enrollments.map(({\n courseDetails: {\n courseId,\n },\n }) => courseId);\n\n return recommendations.filter(({ uuid: recUuid, courseRunKeys }) => (\n recUuid !== uuid && courseRunKeys.every((key) => !enrollmentRunIds.includes(key))\n ));\n}\n\nexport async function getCourseRecommendations(courseKey) {\n const discoveryApiUrl = getConfig().DISCOVERY_API_BASE_URL;\n if (!discoveryApiUrl) {\n return [];\n }\n const recommendationsUrl = new URL(`${discoveryApiUrl}/api/v1/course_recommendations/${courseKey}?exclude_utm=true`);\n const enrollmentsUrl = new URL(`${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`);\n const [recommendationsResponse, enrollmentsResponse] = await Promise.all([\n getAuthenticatedHttpClient().get(recommendationsUrl),\n getAuthenticatedHttpClient().get(enrollmentsUrl),\n ]);\n return filterRecommendationsList(camelCaseObject(recommendationsResponse), camelCaseObject(enrollmentsResponse));\n}\n\nexport async function postUnsubscribeFromGoalReminders(courseId) {\n const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`);\n return getAuthenticatedHttpClient().post(url.href, {\n course_id: courseId,\n subscribed_to_reminders: false,\n });\n}\n","import React, { useEffect } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faLinkedinIn } from '@fortawesome/free-brands-svg-icons';\n\nimport {\n FormattedDate, FormattedMessage, injectIntl, intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { Helmet } from 'react-helmet';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Alert,\n breakpoints,\n Button,\n Hyperlink,\n useWindowSize,\n} from '@edx/paragon';\nimport { CheckCircle } from '@edx/paragon/icons';\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\n\nimport CelebrationMobile from './assets/celebration_456x328.gif';\nimport CelebrationDesktop from './assets/celebration_750x540.gif';\nimport certificate from '../../../generic/assets/edX_certificate.png';\nimport certificateLocked from '../../../generic/assets/edX_locked_certificate.png';\nimport { FormattedPricing } from '../../../generic/upgrade-button';\nimport messages from './messages';\nimport { useModel } from '../../../generic/model-store';\nimport { requestCert } from '../../../course-home/data/thunks';\nimport ProgramCompletion from './ProgramCompletion';\nimport DashboardFootnote from './DashboardFootnote';\nimport UpgradeFootnote from './UpgradeFootnote';\nimport SocialIcons from '../../social-share/SocialIcons';\nimport { logClick, logVisit } from './utils';\nimport { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';\nimport CourseRecommendations from './CourseRecommendations';\n\nconst LINKEDIN_BLUE = '#2867B2';\n\nfunction CourseCelebration({ intl }) {\n const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;\n const { courseId } = useSelector(state => state.courseware);\n const dispatch = useDispatch();\n const {\n certificateData,\n end,\n linkedinAddToProfileUrl,\n marketingUrl,\n offer,\n relatedPrograms,\n title,\n verifyIdentityUrl,\n verificationStatus,\n } = useModel('coursewareMeta', courseId);\n\n const {\n org,\n verifiedMode,\n } = useModel('courseHomeMeta', courseId);\n\n const {\n certStatus,\n certWebViewUrl,\n downloadUrl,\n certificateAvailableDate,\n } = certificateData || {};\n\n const { administrator } = getAuthenticatedUser();\n\n const dashboardLink = {intl.formatMessage(messages.recommendationsHeading)}
\n\n \n
\n \n
\n
\n {intl.formatMessage(messages.certificateNotAvailableBodyAccessCert)}\n
\n \n );\n visitEvent = 'celebration_with_unavailable_cert';\n footnote ={intl.formatMessage(messages.requestCertificateBodyText)}
);\n visitEvent = 'celebration_with_requestable_cert';\n footnote ={intl.formatMessage(messages.verificationPending)}
);\n } else {\n buttonText = intl.formatMessage(messages.verifyIdentityButton);\n buttonEvent = 'verify_id';\n buttonLocation = verifyIdentityUrl;\n // todo: check for idVerificationSupportLink null\n message = (\n\n
\n
\n {getConfig().SUPPORT_URL_VERIFIED_CERTIFICATE && (\n
\n
\n \n );\n}\n\nCourseCelebration.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseCelebration);\n","import React, { useEffect } from 'react';\n\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Helmet } from 'react-helmet';\nimport { useSelector } from 'react-redux';\nimport { Alert, Button } from '@edx/paragon';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport CatalogSuggestion from './CatalogSuggestion';\nimport DashboardFootnote from './DashboardFootnote';\nimport messages from './messages';\nimport { logClick, logVisit } from './utils';\n\nfunction CourseInProgress({ intl }) {\n const { courseId } = useSelector(state => state.courseware);\n const {\n org,\n tabs,\n title,\n } = useModel('courseHomeMeta', courseId);\n const { administrator } = getAuthenticatedUser();\n\n // Get dates tab link for 'view course schedule' button\n const datesTab = tabs.find(tab => tab.slug === 'dates');\n const datesTabLink = datesTab && datesTab.url;\n\n useEffect(() => logVisit(org, courseId, administrator, 'in_progress'), [org, courseId, administrator]);\n\n return (\n <>\n \n {intl.formatMessage(messages.congratulationsHeader)}\n
\n \n {intl.formatMessage(messages.completedCourseHeader)}\n {marketingUrl && ` ${intl.formatMessage(messages.shareMessage)}`}\n
\n \n {!wideScreen && (\n
\n \n {certHeader && (\n \n \n )}\n {relatedPrograms && relatedPrograms.map(program => (\n
\n \n
\n \n
\n {certStatus !== 'unverified' && (\n {certHeader}
\n {message}\n \n {buttonPrefix}\n {buttonLocation && (\n logClick(org, courseId, administrator, buttonEvent)}\n >\n {buttonText}\n \n )}\n {buttonSuffix}\n
\n \n
\n )}\n \n \n \n
\n \n );\n}\n\nCourseInProgress.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseInProgress);\n","import React, { useEffect } from 'react';\n\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Helmet } from 'react-helmet';\nimport { useSelector } from 'react-redux';\nimport { Alert, Button } from '@edx/paragon';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport CatalogSuggestion from './CatalogSuggestion';\nimport DashboardFootnote from './DashboardFootnote';\nimport messages from './messages';\nimport { logClick, logVisit } from './utils';\n\nfunction CourseNonPassing({ intl }) {\n const { courseId } = useSelector(state => state.courseware);\n const {\n org,\n tabs,\n title,\n } = useModel('courseHomeMeta', courseId);\n const { administrator } = getAuthenticatedUser();\n\n // Get progress tab link for 'view grades' button\n const progressTab = tabs.find(tab => tab.slug === 'progress');\n const progressLink = progressTab && progressTab.url;\n\n useEffect(() => logVisit(org, courseId, administrator, 'nonpassing'), [org, courseId, administrator]);\n\n return (\n <>\n \n { intl.formatMessage(messages.courseInProgressHeader) }\n
\n \n logClick(org, courseId, administrator, 'view_dates_tab')}\n >\n {intl.formatMessage(messages.viewCourseScheduleButton)}\n \n )}\n
\n { intl.formatMessage(messages.courseInProgressDescription) }
\n {datesTabLink && (\n \n \n \n
\n \n );\n}\n\nCourseNonPassing.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseNonPassing);\n","import React, { useEffect } from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Button } from '@edx/paragon';\nimport { useSelector } from 'react-redux';\nimport { Redirect } from 'react-router-dom';\n\nimport CourseCelebration from './CourseCelebration';\nimport CourseInProgress from './CourseInProgress';\nimport CourseNonPassing from './CourseNonPassing';\nimport { COURSE_EXIT_MODES, getCourseExitMode } from './utils';\nimport messages from './messages';\nimport { unsubscribeFromGoalReminders } from './data/thunks';\n\nimport { useModel } from '../../../generic/model-store';\n\nfunction CourseExit({ intl }) {\n const { courseId } = useSelector(state => state.courseware);\n const {\n certificateData,\n courseExitPageIsActive,\n courseGoals,\n enrollmentMode,\n hasScheduledContent,\n isEnrolled,\n userHasPassingGrade,\n } = useModel('coursewareMeta', courseId);\n\n const { isMasquerading } = useModel('courseHomeMeta', courseId);\n\n const mode = getCourseExitMode(\n certificateData,\n hasScheduledContent,\n isEnrolled,\n userHasPassingGrade,\n courseExitPageIsActive,\n );\n\n // Audit users cannot fully complete a course, so we will\n // unsubscribe them from goal reminders once they reach the course exit page\n // to avoid spamming them with goal reminder emails\n if (courseGoals && enrollmentMode === 'audit' && !isMasquerading) {\n useEffect(() => {\n unsubscribeFromGoalReminders(courseId);\n }, []);\n }\n\n let body = null;\n if (mode === COURSE_EXIT_MODES.nonPassing) {\n body = (\n { intl.formatMessage(messages.endOfCourseHeader) }\n
\n \n logClick(org, courseId, administrator, 'view_grades')}\n >\n {intl.formatMessage(messages.viewGradesButton)}\n \n )}\n
\n { intl.formatMessage(messages.endOfCourseDescription) }
\n {progressLink && (\n \n \n {intl.formatMessage(messages.viewCoursesButton)}\n \n
\n {body}\n \n );\n}\n\nCourseExit.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseExit);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n failure: {\n id: 'learning.loading.failure',\n defaultMessage: 'There was an error loading this course.',\n description: 'Can be because internet connection or any technical other reason',\n },\n loading: {\n id: 'learning.loading',\n defaultMessage: 'Loading course page…',\n description: 'When content of the course is still loading...etc',\n },\n});\n\nexport default messages;\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n courseMaterial: {\n id: 'learn.navigation.course.tabs.label',\n defaultMessage: 'Course Material',\n description: 'The accessible label for course tabs navigation',\n },\n});\n\nexport default messages;\n","import { useLayoutEffect, useRef, useState } from 'react';\nimport { useWindowSize } from '@edx/paragon';\n\nconst invisibleStyle = {\n position: 'absolute',\n left: 0,\n pointerEvents: 'none',\n visibility: 'hidden',\n};\n\n/**\n * This hook will find the index of the last child of a containing element\n * that fits within its bounding rectangle. This is done by summing the widths\n * of the children until they exceed the width of the container.\n *\n * The hook returns an array containing:\n * [indexOfLastVisibleChild, containerElementRef, invisibleStyle, overflowElementRef]\n *\n * indexOfLastVisibleChild - the index of the last visible child\n * containerElementRef - a ref to be added to the containing html node\n * invisibleStyle - a set of styles to be applied to child of the containing node\n * if it needs to be hidden. These styles remove the element visually, from\n * screen readers, and from normal layout flow. But, importantly, these styles\n * preserve the width of the element, so that future width calculations will\n * still be accurate.\n * overflowElementRef - a ref to be added to an html node inside the container\n * that is likely to be used to contain a \"More\" type dropdown or other\n * mechanism to reveal hidden children. The width of this element is always\n * included when determining which children will fit or not. Usage of this ref\n * is optional.\n */\nexport default function useIndexOfLastVisibleChild() {\n const containerElementRef = useRef(null);\n const overflowElementRef = useRef(null);\n const containingRectRef = useRef({});\n const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);\n const windowSize = useWindowSize();\n\n useLayoutEffect(() => {\n const containingRect = containerElementRef.current.getBoundingClientRect();\n\n // No-op if the width is unchanged.\n // (Assumes tabs themselves don't change count or width).\n if (!containingRect.width === containingRectRef.current.width) {\n return;\n }\n // Update for future comparison\n containingRectRef.current = containingRect;\n\n // Get array of child nodes from NodeList form\n const childNodesArr = Array.prototype.slice.call(containerElementRef.current.children);\n const { nextIndexOfLastVisibleChild } = childNodesArr\n // filter out the overflow element\n .filter(childNode => childNode !== overflowElementRef.current)\n // sum the widths to find the last visible element's index\n .reduce((acc, childNode, index) => {\n // use floor to prevent rounding errors\n acc.sumWidth += Math.floor(childNode.getBoundingClientRect().width);\n if (acc.sumWidth <= containingRect.width) {\n acc.nextIndexOfLastVisibleChild = index;\n }\n return acc;\n }, {\n // Include the overflow element's width to begin with. Doing this means\n // sometimes we'll show a dropdown with one item in it when it would fit,\n // but allowing this case dramatically simplifies the calculations we need\n // to do above.\n sumWidth: overflowElementRef.current ? overflowElementRef.current.getBoundingClientRect().width : 0,\n nextIndexOfLastVisibleChild: -1,\n });\n\n setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);\n }, [windowSize, containerElementRef.current]);\n\n return [indexOfLastVisibleChild, containerElementRef, invisibleStyle, overflowElementRef];\n}\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Dropdown } from '@edx/paragon';\nimport { FormattedMessage } from '@edx/frontend-platform/i18n';\nimport classNames from 'classnames';\n\nimport useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';\n\nexport default function Tabs({ children, className, ...attrs }) {\n const [\n indexOfLastVisibleChild,\n containerElementRef,\n invisibleStyle,\n overflowElementRef,\n ] = useIndexOfLastVisibleChild();\n\n const tabChildren = useMemo(() => {\n const childrenArray = React.Children.toArray(children);\n const indexOfOverflowStart = indexOfLastVisibleChild + 1;\n\n // All tabs will be rendered. Those that would overflow are set to invisible.\n const wrappedChildren = childrenArray.map((child, index) => React.cloneElement(child, {\n style: index > indexOfLastVisibleChild ? invisibleStyle : null,\n }));\n\n // Build the list of items to put in the overflow menu\n const overflowChildren = childrenArray.slice(indexOfOverflowStart)\n .map(overflowChild => React.cloneElement(overflowChild, { className: 'dropdown-item' }));\n\n // Insert the overflow menu at the cut off index (even if it will be hidden\n // it so it can be part of measurements)\n wrappedChildren.splice(indexOfOverflowStart, 0, (\n {intl.formatMessage(messages.streakBody)}
\n\n {!wideScreen && }\n {wideScreen &&
}\n
\n
\n )}\n { !queryingDiscount && showOffer && (\n \n {randomFactoid}\n
\n \n
\n \n {intl.formatMessage(messages.congratulations)}\n {intl.formatMessage(messages.streakDiscountMessage, {\n percent: (discountPercent * 100).toFixed(0),\n })} \n
\n \n
\n );\n }\n}\nMasqueradeWidget.propTypes = {\n courseId: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n onError: PropTypes.func.isRequired,\n};\nMasqueradeWidget.contextType = UserMessagesContext;\nexport default injectIntl(MasqueradeWidget);\n","import { getConfig, camelCaseObject } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\nexport async function getMasqueradeOptions(courseId) {\n const url = new URL(`${getConfig().LMS_BASE_URL}/courses/${courseId}/masquerade`);\n const { data } = await getAuthenticatedHttpClient().get(url.href, {});\n return camelCaseObject(data);\n}\n\nexport async function postMasqueradeOptions(courseId, payload) {\n const url = new URL(`${getConfig().LMS_BASE_URL}/courses/${courseId}/masquerade`);\n const { data } = await getAuthenticatedHttpClient().post(url.href, payload);\n return camelCaseObject(data);\n}\n","import MasqueradeWidget from './MasqueradeWidget';\n\nexport default MasqueradeWidget;\n","import React, { useMemo } from 'react';\nimport { useAlert } from '../../generic/user-messages';\nimport { useModel } from '../../generic/model-store';\n\nconst AccessExpirationAlert = React.lazy(() => import('./AccessExpirationAlert'));\nconst AccessExpirationMasqueradeBanner = React.lazy(() => import('./AccessExpirationMasqueradeBanner'));\n\nfunction useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, topic, analyticsPageName) {\n const isVisible = accessExpiration && !accessExpiration.masqueradingExpiredCourse; // If it exists, show it.\n const payload = {\n accessExpiration,\n courseId,\n org,\n userTimezone,\n analyticsPageName,\n };\n\n useAlert(isVisible, {\n code: 'clientAccessExpirationAlert',\n payload: useMemo(() => payload, Object.values(payload).sort()),\n topic,\n });\n\n return { clientAccessExpirationAlert: AccessExpirationAlert };\n}\n\nexport function useAccessExpirationMasqueradeBanner(courseId, tab) {\n const {\n userTimezone,\n } = useModel('courseHomeMeta', courseId);\n const {\n accessExpiration,\n } = useModel(tab, courseId);\n\n const isVisible = accessExpiration && accessExpiration.masqueradingExpiredCourse;\n const expirationDate = accessExpiration && accessExpiration.expirationDate;\n const payload = {\n expirationDate,\n userTimezone,\n };\n\n useAlert(isVisible, {\n code: 'clientAccessExpirationMasqueradeBanner',\n payload: useMemo(() => payload, Object.values(payload).sort()),\n topic: 'instructor-toolbar-alerts',\n });\n\n return { clientAccessExpirationMasqueradeBanner: AccessExpirationMasqueradeBanner };\n}\n\nexport default useAccessExpirationAlert;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport { ALERT_TYPES, AlertList } from '../generic/user-messages';\nimport Alert from '../generic/user-messages/Alert';\nimport MasqueradeWidget from './masquerade-widget';\nimport { useAccessExpirationMasqueradeBanner } from '../alerts/access-expiration-alert';\nimport { useCourseStartMasqueradeBanner } from '../alerts/course-start-alert';\n\nfunction getInsightsUrl(courseId) {\n const urlBase = getConfig().INSIGHTS_BASE_URL;\n let urlFull;\n if (urlBase) {\n urlFull = `${urlBase}/courses`;\n // This shouldn't actually be missing, at present,\n // but we're providing a reasonable fallback,\n // in case of either error or extension.\n if (courseId) {\n urlFull += `/${courseId}`;\n }\n }\n return urlFull;\n}\n\nfunction getStudioUrl(courseId, unitId) {\n const urlBase = getConfig().STUDIO_BASE_URL;\n let urlFull;\n if (urlBase) {\n if (unitId) {\n urlFull = `${urlBase}/container/${unitId}`;\n } else if (courseId) {\n urlFull = `${urlBase}/course/${courseId}`;\n }\n }\n return urlFull;\n}\n\nfunction getLegacyWebUrl(canViewLegacyCourseware, courseId, unitId) {\n if (!canViewLegacyCourseware || !unitId) {\n return undefined;\n }\n\n return `${getConfig().LMS_BASE_URL}/courses/${courseId}/jump_to/${unitId}?experience=legacy`;\n}\n\nexport default function InstructorToolbar(props) {\n // This didMount logic became necessary once we had a page that does a redirect on a quick exit.\n // As a result, it unmounts the InstructorToolbar (which will be remounted by the new component),\n // but the InstructorToolbar's MasqueradeWidget has an outgoing request. Since it is unmounted\n // during that time, it raises an error about a potential memory leak. By stopping the render\n // when the InstructorToolbar is unmounted, we avoid the memory leak.\n // NOTE: This was originally added because of the CourseExit page redirect. Once that page stops\n // doing a redirect because a CourseExit experience exists for all learners, this could be removed\n const [didMount, setDidMount] = useState(false);\n useEffect(() => {\n setDidMount(true);\n // Returning this function here will run setDidMount(false) when this component is unmounted\n return () => setDidMount(false);\n });\n\n const {\n courseId,\n unitId,\n canViewLegacyCourseware,\n tab,\n } = props;\n\n const urlInsights = getInsightsUrl(courseId);\n const urlLegacy = getLegacyWebUrl(canViewLegacyCourseware, courseId, unitId);\n const urlStudio = getStudioUrl(courseId, unitId);\n const [masqueradeErrorMessage, showMasqueradeError] = useState(null);\n\n const accessExpirationMasqueradeBanner = useAccessExpirationMasqueradeBanner(courseId, tab);\n const courseStartDateMasqueradeBanner = useCourseStartMasqueradeBanner(courseId, tab);\n\n return (!didMount ? null : (\n \n View this course as:\n \n \n {masquerade}\n \n \n {options}\n \n \n
\n {shouldShowUserNameInput && (\n \n {`${specificLearnerInputText}:`}\n this.onError(errorMessage)}\n onSubmit={(payload) => this.onSubmit(payload)}\n />\n
\n )}\n \n
\n ));\n}\n\nInstructorToolbar.propTypes = {\n courseId: PropTypes.string,\n unitId: PropTypes.string,\n canViewLegacyCourseware: PropTypes.bool,\n tab: PropTypes.string,\n};\n\nInstructorToolbar.defaultProps = {\n courseId: undefined,\n unitId: undefined,\n canViewLegacyCourseware: undefined,\n tab: '',\n};\n","/* eslint-disable import/prefer-default-export */\nimport React, {\n useContext, useMemo,\n} from 'react';\nimport { AppContext } from '@edx/frontend-platform/react';\n\nimport { useAlert } from '../../generic/user-messages';\nimport { useModel } from '../../generic/model-store';\n\nconst EnrollmentAlert = React.lazy(() => import('./EnrollmentAlert'));\n\nexport function useEnrollmentAlert(courseId) {\n const { authenticatedUser } = useContext(AppContext);\n const course = useModel('courseHomeMeta', courseId);\n const outline = useModel('outline', courseId);\n const enrolledUser = course && course.isEnrolled !== undefined && course.isEnrolled;\n const privateOutline = outline && outline.courseBlocks && !outline.courseBlocks.courses;\n /**\n * This alert should render if\n * 1. the user is not enrolled,\n * 2. the user is authenticated, AND\n * 3. the course is private.\n */\n const isVisible = !enrolledUser && authenticatedUser !== null && privateOutline;\n const payload = {\n canEnroll: outline && outline.enrollAlert ? outline.enrollAlert.canEnroll : false,\n courseId,\n extraText: outline && outline.enrollAlert ? outline.enrollAlert.extraText : '',\n isStaff: course && course.isStaff,\n };\n\n useAlert(isVisible, {\n code: 'clientEnrollmentAlert',\n payload: useMemo(() => payload, Object.values(payload).sort()),\n topic: 'outline',\n });\n\n return { clientEnrollmentAlert: EnrollmentAlert };\n}\n","/* eslint-disable import/prefer-default-export */\nimport React, { useContext } from 'react';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport { ALERT_TYPES, useAlert } from '../../generic/user-messages';\nimport { useModel } from '../../generic/model-store';\n\nconst LogistrationAlert = React.lazy(() => import('./LogistrationAlert'));\n\nexport function useLogistrationAlert(courseId) {\n const { authenticatedUser } = useContext(AppContext);\n const outline = useModel('outline', courseId);\n const privateOutline = outline && outline.courseBlocks && !outline.courseBlocks.courses;\n /**\n * This alert should render if\n * 1. the user is not authenticated, AND\n * 2. the course is private.\n */\n const isVisible = authenticatedUser === null && privateOutline;\n\n useAlert(isVisible, {\n code: 'clientLogistrationAlert',\n topic: 'outline',\n dismissible: false,\n type: ALERT_TYPES.ERROR,\n });\n\n return { clientLogistrationAlert: LogistrationAlert };\n}\n","import React from 'react';\nimport { FormattedMessage } from '@edx/frontend-platform/i18n';\n\nexport function DismissButtonFormattedMessage() {\n return (\n \n
\n {masqueradeErrorMessage && (\n \n
\n View course in:\n \n )}\n {urlLegacy && (\n \n Legacy experience\n \n )}\n {urlStudio && (\n \n Studio\n \n )}\n {urlInsights && (\n \n Insights\n \n )}\n
\n \n
\n {(urlLegacy || urlStudio || urlInsights) && (\n <>\n \n View course in:\n \n )}\n {urlLegacy && (\n \n Legacy experience\n \n )}\n {urlStudio && (\n \n Studio\n \n )}\n {urlInsights && (\n \n Insights\n \n )}\n
\n \n {masqueradeErrorMessage}\n \n
\n )}\n {intl.formatMessage(messages.newUserModalBody, { siteName: getConfig().SITE_NAME })}
\n \n );\n}\n\nNewUserCourseHomeTourModal.propTypes = {\n intl: intlShape.isRequired,\n isOpen: PropTypes.bool.isRequired,\n onDismiss: PropTypes.func.isRequired,\n onStartTour: PropTypes.func.isRequired,\n};\n\nexport default injectIntl(NewUserCourseHomeTourModal);\n","import { camelCaseObject, getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\nexport async function getTourData(username) {\n const url = `${getConfig().LMS_BASE_URL}/api/user_tours/v1/${username}`;\n try {\n const { data } = await getAuthenticatedHttpClient().get(url);\n return { toursEnabled: true, ...camelCaseObject(data) };\n } catch (error) {\n const { httpErrorStatus } = error && error.customAttributes;\n /** The API will return a\n * 401 if the user is not authenticated\n * 403 if the tour waffle flag is inactive\n * 404 if no User Tour objects exist for the given username\n */\n if (httpErrorStatus === 401 || httpErrorStatus === 403 || httpErrorStatus === 404) {\n return { toursEnabled: false };\n }\n throw error;\n }\n}\n\nexport async function patchTourData(username, tourData) {\n const url = `${getConfig().LMS_BASE_URL}/api/user_tours/v1/${username}`;\n return getAuthenticatedHttpClient().patch(url, tourData);\n}\n","import { logError } from '@edx/frontend-platform/logging';\n\nimport { getTourData, patchTourData } from './api';\nimport {\n disableCourseHomeTour,\n disableCoursewareTour,\n disableNewUserCourseHomeModal,\n setTourData,\n} from './slice';\n\nexport function closeNewUserCourseHomeModal() {\n return async (dispatch) => dispatch(disableNewUserCourseHomeModal());\n}\n\nexport function endCourseHomeTour(username) {\n return async (dispatch) => {\n try {\n await patchTourData(username, {\n course_home_tour_status: 'no-tour',\n });\n dispatch(disableCourseHomeTour());\n } catch (error) {\n logError(error);\n }\n };\n}\n\nexport function endCoursewareTour(username) {\n return async (dispatch) => {\n try {\n await patchTourData(username, {\n show_courseware_tour: false,\n });\n dispatch(disableCoursewareTour());\n } catch (error) {\n logError(error);\n }\n };\n}\n\nexport function fetchTourData(username) {\n return async (dispatch) => {\n try {\n const data = await getTourData(username);\n dispatch(setTourData(data));\n } catch (error) {\n logError(error);\n }\n };\n}\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { ProductTour } from '@edx/paragon';\n\nimport abandonTour from './AbandonTour';\nimport coursewareTour from './CoursewareTour';\nimport existingUserCourseHomeTour from './ExistingUserCourseHomeTour';\nimport newUserCourseHomeTour from './newUserCourseHomeTour/NewUserCourseHomeTour';\nimport NewUserCourseHomeTourModal from './newUserCourseHomeTour/NewUserCourseHomeTourModal';\nimport {\n closeNewUserCourseHomeModal,\n endCourseHomeTour,\n endCoursewareTour,\n fetchTourData,\n} from './data';\n\nfunction ProductTours({\n activeTab,\n courseId,\n isStreakCelebrationOpen,\n org,\n}) {\n if (isStreakCelebrationOpen) {\n return null;\n }\n\n const {\n proctoringPanelStatus,\n } = useSelector(state => state.courseHome);\n\n const {\n showCoursewareTour,\n showExistingUserCourseHomeTour,\n showNewUserCourseHomeModal,\n showNewUserCourseHomeTour,\n } = useSelector(state => state.tours);\n\n const [isAbandonTourEnabled, setIsAbandonTourEnabled] = useState(false);\n const [isCoursewareTourEnabled, setIsCoursewareTourEnabled] = useState(false);\n const [isExistingUserCourseHomeTourEnabled, setIsExistingUserCourseHomeTourEnabled] = useState(false);\n const [isNewUserCourseHomeTourEnabled, setIsNewUserCourseHomeTourEnabled] = useState(false);\n\n const dispatch = useDispatch();\n const {\n administrator,\n username,\n } = getAuthenticatedUser() || {};\n const isCoursewareTab = activeTab === 'courseware';\n const isOutlineTab = activeTab === 'outline';\n\n useEffect(() => {\n const isOutlineTabResolved = isOutlineTab && proctoringPanelStatus === 'loaded';\n const userIsAuthenticated = !!username;\n\n // Tours currently only exist on the Outline Tab and within Courseware, so we'll avoid\n // calling the tour endpoint unnecessarily.\n if (userIsAuthenticated && (isCoursewareTab || isOutlineTabResolved)) {\n dispatch(fetchTourData(username));\n }\n }, [proctoringPanelStatus]);\n\n useEffect(() => {\n if (isCoursewareTab && showCoursewareTour) {\n setIsCoursewareTourEnabled(true);\n }\n }, [showCoursewareTour]);\n\n useEffect(() => {\n if (isOutlineTab) {\n setIsExistingUserCourseHomeTourEnabled(!!showExistingUserCourseHomeTour);\n }\n }, [showExistingUserCourseHomeTour]);\n\n useEffect(() => {\n if (isOutlineTab && showNewUserCourseHomeTour) {\n setIsAbandonTourEnabled(false);\n setIsNewUserCourseHomeTourEnabled(true);\n }\n }, [showNewUserCourseHomeTour]);\n\n // The\n {intl.formatMessage(messages.failure)}\n
\n \n \n );\n}\n\nTabPage.defaultProps = {\n courseId: null,\n unitId: null,\n};\n\nTabPage.propTypes = {\n activeTabSlug: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n courseId: PropTypes.string,\n courseStatus: PropTypes.string.isRequired,\n metadataModel: PropTypes.string.isRequired,\n unitId: PropTypes.string,\n};\n\nexport default injectIntl(TabPage);\n","/* eslint-disable import/prefer-default-export */\nimport { getLocale } from '@edx/frontend-platform/i18n';\n\n// This function inspects an access denied error and provides a redirect url (looks like a /redirect/... path),\n// which then renders a nice little message while the browser loads the next page.\n// This is basically a frontend version of check_course_access_with_redirect in the backend.\nexport function getAccessDeniedRedirectUrl(courseId, activeTabSlug, canLoadCourseware, courseAccess, start, unitId) {\n let url = null;\n switch (courseAccess.errorCode) {\n case 'audit_expired':\n url = `/redirect/dashboard?access_response_error=${courseAccess.additionalContextUserMessage}`;\n break;\n case 'course_not_started':\n // eslint-disable-next-line no-case-declarations\n const startDate = (new Intl.DateTimeFormat(getLocale())).format(new Date(start));\n url = `/redirect/dashboard?notlive=${startDate}`;\n break;\n case 'survey_required':\n url = `/redirect/survey/${courseId}`;\n break;\n case 'unfulfilled_milestones':\n url = '/redirect/dashboard';\n break;\n case 'authentication_required':\n case 'enrollment_required':\n default:\n // if the learner has access to the course, but it is not enabled in the mfe, there is no\n // error message, canLoadCourseware will be false.\n if (activeTabSlug === 'courseware' && canLoadCourseware === false && unitId) {\n url = `/redirect/courseware/${courseId}/unit/${unitId}`;\n } else if (activeTabSlug !== 'outline') {\n url = `/redirect/course-home/${courseId}`;\n }\n }\n return url;\n}\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from 'react-router-dom';\nimport { OuterExamTimer } from '@edx/frontend-lib-special-exams';\n\nimport TabPage from './TabPage';\n\nexport default function TabContainer(props) {\n const {\n children,\n fetch,\n slice,\n tab,\n } = props;\n\n const { courseId: courseIdFromUrl } = useParams();\n const dispatch = useDispatch();\n useEffect(() => {\n // The courseId from the URL is the course we WANT to load.\n dispatch(fetch(courseIdFromUrl));\n }, [courseIdFromUrl]);\n\n // The courseId from the store is the course we HAVE loaded. If the URL changes,\n // we don't want the application to adjust to it until it has actually loaded the new data.\n const {\n courseId,\n courseStatus,\n } = useSelector(state => state[slice]);\n\n return (\n\n
\n );\n\n const renderCreativeCommonsLicense = (activeCreativeCommonsLicenseTags, version) => (\n \n {licenseType === 'all-rights-reserved' && renderAllRightsReservedLicense()}\n {licenseType === 'creative-commons' && renderCreativeCommonsLicense(\n Object.keys(licenseOptions),\n licenseVersion,\n )}\n
\n );\n}\n\nCourseLicense.propTypes = {\n license: PropTypes.string,\n intl: intlShape.isRequired,\n};\n\nCourseLicense.defaultProps = {\n license: 'all-rights-reserved',\n};\n\nexport default injectIntl(CourseLicense);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n notificationTray: {\n id: 'notification.tray.container',\n defaultMessage: 'Notification tray',\n description: 'Notification tray container',\n },\n openNotificationTrigger: {\n id: 'notification.open.button',\n defaultMessage: 'Show notification tray',\n description: 'Button to open the notification tray and show notifications',\n },\n closeNotificationTrigger: {\n id: 'notification.close.button',\n defaultMessage: 'Close notification tray',\n description: 'Button for the learner to close the sidebar',\n },\n responsiveCloseNotificationTray: {\n id: 'responsive.close.notification',\n defaultMessage: 'Back to course',\n description: 'Responsive button to go back to course and close the notification tray',\n },\n notificationTitle: {\n id: 'notification.tray.title',\n defaultMessage: 'Notifications',\n description: 'Title text displayed for the notification tray',\n },\n noNotificationsMessage: {\n id: 'notification.tray.no.message',\n defaultMessage: 'You have no new notifications at this time.',\n description: 'Text displayed when the learner has no notifications',\n },\n});\n\nexport default messages;\n","/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useRef } from 'react';\n\nexport function useEventListener(type, handler) {\n // We use this ref so that we can hold a reference to the currently active event listener.\n const eventListenerRef = useRef(null);\n useEffect(() => {\n // If we currently have an event listener, remove it.\n if (eventListenerRef.current !== null) {\n global.removeEventListener(type, eventListenerRef.current);\n eventListenerRef.current = null;\n }\n // Now add our new handler as the event listener.\n global.addEventListener(type, handler);\n // And then save it to our ref for next time.\n eventListenerRef.current = handler;\n // When the component finally unmounts, use the ref to remove the correct handler.\n return () => global.removeEventListener(type, eventListenerRef.current);\n }, [type, handler]);\n}\n","import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Icon, IconButton } from '@edx/paragon';\nimport { ArrowBackIos, Close } from '@edx/paragon/icons';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useContext } from 'react';\nimport { useEventListener } from '../../../../generic/hooks';\nimport messages from '../../messages';\nimport SidebarContext from '../SidebarContext';\n\nfunction SidebarBase({\n intl,\n title,\n ariaLabel,\n sidebarId,\n className,\n children,\n showTitleBar,\n width,\n}) {\n const {\n toggleSidebar,\n shouldDisplayFullScreen,\n currentSidebar,\n } = useContext(SidebarContext);\n\n const receiveMessage = useCallback(({ data }) => {\n const { type } = data;\n if (type === 'learning.events.sidebar.close') {\n toggleSidebar(null);\n }\n }, [sidebarId, toggleSidebar]);\n\n useEventListener('message', receiveMessage);\n\n return currentSidebar === sidebarId && (\n \n {title}\n {shouldDisplayFullScreen\n ? null\n : (\n
\n \n \n )}\n {children}\n \n );\n}\n\nSidebarBase.propTypes = {\n intl: intlShape.isRequired,\n title: PropTypes.string.isRequired,\n ariaLabel: PropTypes.string.isRequired,\n sidebarId: PropTypes.string.isRequired,\n className: PropTypes.string.isRequired,\n children: PropTypes.element.isRequired,\n showTitleBar: PropTypes.bool,\n width: PropTypes.string,\n};\n\nSidebarBase.defaultProps = {\n width: '31rem',\n showTitleBar: true,\n};\n\nexport default injectIntl(SidebarBase);\n","// This file holds some convenience methods for dealing with sessionStorage. Unlike localStorage that never expires,\n// sessionStorage is cleared when the browser tab is closed since the page session ends\n//\n// NOTE: These storage keys are not namespaced. That means that it's shared for the current fully\n// qualified domain. Namespacing could be added, but we'll cross that bridge when we need it.\n\nfunction getSessionStorage(key) {\n try {\n if (global.sessionStorage) {\n const rawItem = global.sessionStorage.getItem(key);\n if (rawItem) {\n return JSON.parse(rawItem);\n }\n }\n } catch (e) {\n // If this fails for some reason, just return null.\n }\n return null;\n}\n\nfunction setSessionStorage(key, value) {\n try {\n if (global.sessionStorage) {\n global.sessionStorage.setItem(key, JSON.stringify(value));\n }\n } catch (e) {\n // If this fails, just bail.\n }\n}\n\nexport {\n getSessionStorage,\n setSessionStorage,\n};\n","import { injectIntl } from '@edx/frontend-platform/i18n';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nfunction SidebarTriggerBase({\n onClick,\n ariaLabel,\n children,\n}) {\n return (\n \n toggleSidebar(null)}\n variant=\"primary\"\n alt={intl.formatMessage(messages.closeNotificationTrigger)}\n />\n
\n )}\n \n {children}\n
\n \n );\n}\n\nSidebarTriggerBase.propTypes = {\n onClick: PropTypes.func.isRequired,\n ariaLabel: PropTypes.string.isRequired,\n children: PropTypes.element.isRequired,\n};\n\nexport default injectIntl(SidebarTriggerBase);\n","import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Icon } from '@edx/paragon';\nimport { WatchOutline } from '@edx/paragon/icons';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport messages from '../../../messages';\n\nfunction NotificationIcon({\n intl,\n status,\n notificationColor,\n}) {\n return (\n <>\n {verifiedMode\n ? (\n
\n \n );\n}\n\nNotificationTray.propTypes = {\n intl: intlShape.isRequired,\n};\n\nNotificationTray.Trigger = NotificationTrigger;\nNotificationTray.ID = ID;\n\nexport default injectIntl(NotificationTray);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n discussionsTitle: {\n id: 'discussions.sidebar.title',\n defaultMessage: 'Discussions',\n description: 'Title text for a forum where users are able to discuss course topics',\n },\n openDiscussionsTrigger: {\n id: 'discussions.sidebar.open.button',\n defaultMessage: 'Show discussions tray',\n description: 'Alt text for a button that opens the discussions feature',\n },\n});\n\nexport default messages;\n","import { ensureConfig, getConfig } from '@edx/frontend-platform';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Icon } from '@edx/paragon';\nimport { QuestionAnswer } from '@edx/paragon/icons';\nimport PropTypes from 'prop-types';\nimport React, { useContext, useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { useModel } from '../../../../../generic/model-store';\nimport { getCourseDiscussionTopics } from '../../../../data/thunks';\nimport SidebarTriggerBase from '../../common/TriggerBase';\nimport SidebarContext from '../../SidebarContext';\nimport messages from './messages';\n\nensureConfig(['DISCUSSIONS_MFE_BASE_URL']);\nexport const ID = 'DISCUSSIONS';\n\nfunction DiscussionsTrigger({\n intl,\n onClick,\n}) {\n const {\n unitId,\n courseId,\n } = useContext(SidebarContext);\n const dispatch = useDispatch();\n const topic = useModel('discussionTopics', unitId);\n const baseUrl = getConfig().DISCUSSIONS_MFE_BASE_URL;\n\n useEffect(() => {\n // Only fetch the topic data if the MFE is configured.\n if (baseUrl) {\n dispatch(getCourseDiscussionTopics(courseId));\n }\n }, [courseId, baseUrl]);\n if (!topic.id) {\n return null;\n }\n return (\n {intl.formatMessage(messages.noNotificationsMessage)}
\n )}\n\n {SIDEBAR_ORDER.map((sidebarId) => {\n const { Trigger } = SIDEBARS[sidebarId];\n const isActive = sidebarId === currentSidebar;\n return (\n \n toggleSidebar(sidebarId)} key={sidebarId} />\n
\n );\n })}\n \n );\n}\n\nSidebarTriggers.propTypes = {};\n\nexport default SidebarTriggers;\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n headerPlaceholder: {\n id: 'learn.header.h2.placeholder',\n defaultMessage: 'Level 2 headings may be created by course providers in the future.',\n description: 'Message spoken by a screenreader indicating that the h2 tag is a placeholder.',\n },\n loadFailure: {\n id: 'learn.course.load.failure',\n defaultMessage: 'There was an error loading this course.',\n description: 'Message when a course fails to load',\n },\n loadingHonorCode: {\n id: 'learn.loading.honor.codk',\n defaultMessage: 'Loading honor code messaging...',\n description: 'Message shown when an interface about the honor code is being loaded',\n },\n loadingLockedContent: {\n id: 'learn.loading.content.lock',\n defaultMessage: 'Loading locked content messaging...',\n description: 'Message shown when an interface about locked content is being loaded',\n },\n loadingSequence: {\n id: 'learn.loading.learning.sequence',\n defaultMessage: 'Loading learning sequence...',\n description: 'Message when learning sequence is being loaded',\n },\n noContent: {\n id: 'learn.sequence.no.content',\n defaultMessage: 'There is no content here.',\n description: 'Message shown when there is no content to show a user inside a learning sequence.',\n },\n});\n\nexport default messages;\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n header: {\n id: 'learn.hiddenAfterDue.header',\n defaultMessage: 'The due date for this assignment has passed.',\n description: 'Shown when content of a course is longer available because due date passed',\n },\n description: {\n id: 'learn.hiddenAfterDue.description',\n defaultMessage: 'Because the due date has passed, this assignment is no longer available.',\n description: 'It explain why the content is not available',\n },\n gradeAvailable: {\n id: 'learn.hiddenAfterDue.gradeAvailable',\n defaultMessage: 'If you have completed this assignment, your grade is available on the {progressPage}.',\n description: 'Text that precedes link that redirect to progress page',\n },\n progressPage: {\n id: 'learn.hiddenAfterDue.progressPage',\n defaultMessage: 'progress page',\n description: 'This is the text for the link embedded in learn.hiddenAfterDue.gradeAvailable',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';\nimport { Alert, Hyperlink } from '@edx/paragon';\nimport { Info } from '@edx/paragon/icons';\n\nimport { useModel } from '../../../../generic/model-store';\n\nimport messages from './messages';\n\nfunction HiddenAfterDue({ courseId, intl }) {\n const { tabs } = useModel('courseHomeMeta', courseId);\n\n const progressTab = tabs.find(tab => tab.slug === 'progress');\n const progressLink = progressTab && progressTab.url && (\n {intl.formatMessage(messages.header)}
\n\n {intl.formatMessage(messages.description)}\n {progressLink && (\n <>\n
\n \n \n )}\n
\n
\n {shouldDisplayDropdown && (\n \n \n {unitIds.map(buttonUnitId => (\n
\n \n {intl.formatMessage(messages.nextUpButton, { title: nextSequence.title })}\n
\n );\n}\n\nUnitNavigationEffortEstimate.propTypes = {\n children: PropTypes.node,\n intl: intlShape.isRequired,\n sequenceId: PropTypes.string.isRequired,\n unitId: PropTypes.string,\n};\n\nUnitNavigationEffortEstimate.defaultProps = {\n children: null,\n unitId: null,\n};\n\nexport default injectIntl(UnitNavigationEffortEstimate);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button } from '@edx/paragon';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport {\n injectIntl, intlShape, isRtl, getLocale,\n} from '@edx/frontend-platform/i18n';\nimport { useSelector } from 'react-redux';\n\nimport { getCourseExitNavigation } from '../../course-exit';\n\nimport UnitNavigationEffortEstimate from './UnitNavigationEffortEstimate';\nimport { useSequenceNavigationMetadata } from './hooks';\nimport messages from './messages';\n\nfunction UnitNavigation({\n intl,\n sequenceId,\n unitId,\n onClickPrevious,\n onClickNext,\n goToCourseExitPage,\n}) {\n const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);\n const { courseId } = useSelector(state => state.courseware);\n\n const renderNextButton = () => {\n const { exitActive, exitText } = getCourseExitNavigation(courseId, intl);\n const buttonOnClick = isLastUnit ? goToCourseExitPage : onClickNext;\n const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);\n const disabled = isLastUnit && !exitActive;\n const nextArrow = isRtl(getLocale()) ? faChevronLeft : faChevronRight;\n return (\n \n \n
\n );\n}\n\nUnitNavigation.propTypes = {\n intl: intlShape.isRequired,\n sequenceId: PropTypes.string.isRequired,\n unitId: PropTypes.string,\n onClickPrevious: PropTypes.func.isRequired,\n onClickNext: PropTypes.func.isRequired,\n goToCourseExitPage: PropTypes.func.isRequired,\n};\n\nUnitNavigation.defaultProps = {\n unitId: null,\n};\n\nexport default injectIntl(UnitNavigation);\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faBookmark } from '@fortawesome/free-regular-svg-icons';\n\nexport default function BookmarkOutlineIcon(props) {\n return \n \n {modalOptions.body\n ?
\n );\n}\n\nUnit.propTypes = {\n courseId: PropTypes.string.isRequired,\n format: PropTypes.string,\n id: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n onLoaded: PropTypes.func,\n /** [MM-P2P] Experiment */\n mmp2p: PropTypes.shape({\n state: PropTypes.shape({\n isEnabled: PropTypes.bool.isRequired,\n }),\n meta: PropTypes.shape({\n showLock: PropTypes.bool,\n blockContent: PropTypes.bool,\n }),\n }),\n};\n\nUnit.defaultProps = {\n format: null,\n onLoaded: undefined,\n /** [MM-P2P] Experiment */\n mmp2p: {\n state: {\n isEnabled: false,\n },\n meta: {\n showLock: false,\n blockContent: false,\n },\n },\n};\n\nexport default injectIntl(Unit);\n","import React, { Suspense, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport PageLoading from '../../../generic/PageLoading';\nimport { useModel } from '../../../generic/model-store';\n\nimport messages from './messages';\nimport Unit from './Unit';\n\nconst ContentLock = React.lazy(() => import('./content-lock'));\n\nfunction SequenceContent({\n gated,\n intl,\n courseId,\n sequenceId,\n unitId,\n unitLoadedHandler,\n /** [MM-P2P] Experiment */\n mmp2p,\n}) {\n const sequence = useModel('sequences', sequenceId);\n\n // Go back to the top of the page whenever the unit or sequence changes.\n useEffect(() => {\n global.scrollTo(0, 0);\n }, [sequenceId, unitId]);\n\n if (gated) {\n return (\n {unit.title}
\n{intl.formatMessage(messages.headerPlaceholder)}
\n{ modalOptions.body }
\n : (\n \n {\n // onLoad *should* only fire after everything in the iframe has finished its own load events.\n // Which means that the plugin.resize message (which calls setHasLoaded above) will have fired already\n // for a successful load. If it *has not fired*, we are in an error state. For example, the backend\n // could have given us a 4xx or 5xx response.\n if (!hasLoaded) {\n setShowError(true);\n }\n\n window.onmessage = (e) => {\n if (e.data.event_name) {\n dispatch(processEvent(e.data, fetchCourse));\n }\n };\n }}\n />\n
\n )}\n \n {intl.formatMessage(messages.noContent)}\n
\n );\n }\n\n return (\n {intl.formatMessage(messages.noContent)}
);\n }\n return (\n \n
\n );\n\n if (sequenceStatus === 'loaded') {\n return (\n \n {\n logEvent('edx.ui.lms.sequence.next_selected', 'top');\n handleNext();\n }}\n onNavigate={(destinationUnitId) => {\n logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);\n handleNavigate(destinationUnitId);\n }}\n previousSequenceHandler={() => {\n logEvent('edx.ui.lms.sequence.previous_selected', 'top');\n handlePrevious();\n }}\n goToCourseExitPage={() => goToCourseExitPage()}\n />\n {shouldDisplayNotificationTriggerInSequence &&
\n \n {\n logEvent('edx.ui.lms.sequence.previous_selected', 'bottom');\n handlePrevious();\n }}\n onClickNext={() => {\n logEvent('edx.ui.lms.sequence.next_selected', 'bottom');\n handleNext();\n }}\n goToCourseExitPage={() => goToCourseExitPage()}\n />\n )}\n
\n \n \n {defaultContent}\n \n
\n );\n }\n\n // sequence status 'failed' and any other unexpected sequence status.\n return (\n \n {intl.formatMessage(messages.loadFailure)}\n
\n );\n}\n\nSequence.propTypes = {\n unitId: PropTypes.string,\n sequenceId: PropTypes.string,\n courseId: PropTypes.string.isRequired,\n unitNavigationHandler: PropTypes.func.isRequired,\n nextSequenceHandler: PropTypes.func.isRequired,\n previousSequenceHandler: PropTypes.func.isRequired,\n intl: intlShape.isRequired,\n\n /** [MM-P2P] Experiment */\n mmp2p: PropTypes.shape({\n flyover: PropTypes.shape({\n isVisible: PropTypes.bool.isRequired,\n }),\n meta: PropTypes.shape({\n showLock: PropTypes.bool,\n }),\n state: PropTypes.shape({\n isEnabled: PropTypes.bool.isRequired,\n }),\n }),\n};\n\nSequence.defaultProps = {\n sequenceId: null,\n unitId: null,\n /** [MM-P2P] Experiment */\n mmp2p: {\n flyover: { isVisible: false },\n meta: { showLock: false },\n state: { isEnabled: false },\n },\n};\n\nexport default injectIntl(Sequence);\n","import { useSelector } from 'react-redux';\n\nimport { useModel } from '../../generic/model-store';\nimport { ALERT_TYPES, useAlert } from '../../generic/user-messages';\n\nimport messages from './messages';\n\nfunction useSequenceBannerTextAlert(sequenceId) {\n const sequence = useModel('sequences', sequenceId);\n const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);\n\n // Show Alert that comes along with the sequence\n useAlert(sequenceStatus === 'loaded' && sequence.bannerText, {\n code: null,\n dismissible: false,\n text: sequence.bannerText,\n type: ALERT_TYPES.INFO,\n topic: 'sequence',\n });\n}\n\nfunction useSequenceEntranceExamAlert(courseId, sequenceId, intl) {\n const course = useModel('coursewareMeta', courseId);\n const sequence = useModel('sequences', sequenceId);\n const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);\n const {\n entranceExamCurrentScore,\n entranceExamEnabled,\n entranceExamId,\n entranceExamMinimumScorePct,\n entranceExamPassed,\n } = course.entranceExamData || {};\n const entranceExamAlertVisible = sequenceStatus === 'loaded' && entranceExamEnabled && entranceExamId === sequence.sectionId;\n let entranceExamText;\n\n if (entranceExamPassed) {\n entranceExamText = intl.formatMessage(\n messages.entranceExamTextPassed, { entranceExamCurrentScore: entranceExamCurrentScore * 100 },\n );\n } else {\n entranceExamText = intl.formatMessage(messages.entranceExamTextNotPassing, {\n entranceExamCurrentScore: entranceExamCurrentScore * 100,\n entranceExamMinimumScorePct: entranceExamMinimumScorePct * 100,\n });\n }\n\n useAlert(entranceExamAlertVisible, {\n code: null,\n dismissible: false,\n text: entranceExamText,\n type: ALERT_TYPES.INFO,\n topic: 'sequence',\n });\n}\n\nexport { useSequenceBannerTextAlert, useSequenceEntranceExamAlert };\n","export default __webpack_public_path__ + \"d74ff1cdcede27b19cad1734d1fd8671.gif\";","export default __webpack_public_path__ + \"97e1acd8ce9fa2e59a5479c61b6fba23.gif\";","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n completed: {\n id: 'learning.celebration.completed',\n defaultMessage: 'You just completed the first section of your course.',\n description: 'Shown only once to leaner when they complete their first section',\n },\n congrats: {\n id: 'learning.celebration.congrats',\n defaultMessage: 'Congratulations!',\n description: 'Greeting for learners when they complete their weekly goal or finish the first section',\n },\n earned: {\n id: 'learning.celebration.earned',\n defaultMessage: 'You earned it!',\n description: 'Shown below congrats messaging when leaner complete a goal',\n },\n emailSubject: {\n id: 'learning.celebration.emailSubject',\n defaultMessage: \"I'm on my way to completing {title} online with {platform}!\",\n description: 'Subject when sharing course progress via email',\n },\n forward: {\n id: 'learning.celebration.forward',\n defaultMessage: 'Keep going',\n description: 'Button to close celebration dialog and get back to course',\n },\n goalMet: {\n id: 'learning.celebration.goalMet',\n defaultMessage: 'You met your goal!',\n description: 'Headline for (weekly gaol celebration) section in courseware',\n },\n keepItUp: {\n id: 'learning.celebration.keepItUp',\n defaultMessage: 'Keep it up',\n description: 'Button to close celebration dialog and get back to course',\n },\n share: {\n id: 'learning.celebration.share',\n defaultMessage: 'Take a moment to celebrate and share your progress.',\n description: 'Text that precedes the (sharing icon) for goal accomplishment ',\n },\n socialMessage: {\n id: 'learning.celebration.social',\n defaultMessage: 'I’m on my way to completing {title} online with {platform}. What are you spending your time learning?',\n description: 'Shown when sharing course progress on a social network',\n },\n});\n\nexport default messages;\n","/* eslint-disable import/prefer-default-export */\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\n// Does not block on answer\nexport function postCelebrationComplete(courseId, data) {\n const url = new URL(`${getConfig().LMS_BASE_URL}/api/courseware/celebration/${courseId}`);\n getAuthenticatedHttpClient().post(url.href, data);\n}\n","import { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\n\nimport { postCelebrationComplete } from './data/api';\nimport { clearLocalStorage, getLocalStorage, setLocalStorage } from '../../../data/localStorage';\nimport { updateModel } from '../../../generic/model-store';\n\nconst CELEBRATION_LOCAL_STORAGE_KEY = 'CelebrationModal.showOnSectionLoad';\n\n// Records clicks through the end of a section, so that we can know whether we should celebrate when we finish loading\nfunction handleNextSectionCelebration(sequenceId, nextSequenceId) {\n setLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY, {\n prevSequenceId: sequenceId,\n nextSequenceId,\n });\n}\n\nfunction recordFirstSectionCelebration(org, courseId) {\n // Tell the LMS\n postCelebrationComplete(courseId, { first_section: false });\n\n // Tell our analytics\n const { administrator } = getAuthenticatedUser();\n sendTrackEvent('edx.ui.lms.celebration.first_section.opened', {\n org_key: org,\n courserun_key: courseId,\n course_id: courseId, // should only be courserun_key, but left as-is for historical reasons\n is_staff: administrator,\n });\n}\n\nfunction recordWeeklyGoalCelebration(org, courseId) {\n // Tell the LMS\n postCelebrationComplete(courseId, { weekly_goal: false });\n\n // Tell our analytics\n const { administrator } = getAuthenticatedUser();\n sendTrackEvent('edx.ui.lms.celebration.weekly_goal.opened', {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n });\n}\n\n// Looks at local storage to see whether we just came from the end of a section.\n// Note! This does have side effects (will clear some local storage and may start an api call).\nfunction shouldCelebrateOnSectionLoad(courseId, sequenceId, celebrateFirstSection, dispatch, celebrations) {\n const celebrationIds = getLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY);\n if (!celebrationIds) {\n return false;\n }\n\n const {\n prevSequenceId,\n nextSequenceId,\n } = celebrationIds;\n const onTargetSequence = sequenceId === nextSequenceId;\n let shouldCelebrate = onTargetSequence && celebrateFirstSection;\n\n if (shouldCelebrate && celebrations.streakLengthToCelebrate) {\n // We don't want two modals to show up on the same page.\n // If we are going to celebrate a streak then we will not also celebrate the first section.\n // We will still mark the first section as celebrated, so that we don't incorrectly celebrate the second section.\n shouldCelebrate = false;\n postCelebrationComplete(courseId, { first_section: false });\n }\n\n if (sequenceId !== prevSequenceId && !onTargetSequence) {\n // Don't clear until we move off of current/prev sequence\n clearLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY);\n\n // Update our local copy of course data from LMS\n dispatch(updateModel({\n modelType: 'courseHomeMeta',\n model: {\n id: courseId,\n celebrations: {\n ...celebrations,\n firstSection: false,\n },\n },\n }));\n }\n\n return shouldCelebrate;\n}\n\nexport {\n handleNextSectionCelebration,\n recordFirstSectionCelebration,\n recordWeeklyGoalCelebration,\n shouldCelebrateOnSectionLoad,\n};\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n ActionRow,\n breakpoints,\n Button,\n StandardModal,\n useWindowSize,\n} from '@edx/paragon';\n\nimport ClapsMobile from './assets/claps_280x201.gif';\nimport ClapsTablet from './assets/claps_456x328.gif';\nimport messages from './messages';\nimport SocialIcons from '../../social-share/SocialIcons';\nimport { recordFirstSectionCelebration } from './utils';\nimport { useModel } from '../../../generic/model-store';\n\nfunction CelebrationModal({\n courseId, intl, isOpen, onClose, ...rest\n}) {\n const { org } = useModel('courseHomeMeta', courseId);\n const wideScreen = useWindowSize().width >= breakpoints.small.minWidth;\n\n useEffect(() => {\n if (isOpen) {\n recordFirstSectionCelebration(org, courseId);\n }\n }, [isOpen]);\n\n return (\n{intl.formatMessage(messages.congrats)}
\n )}\n {...rest}\n >\n <>\n{intl.formatMessage(messages.completed)}
\n {!wideScreen &&\n {intl.formatMessage(messages.earned)} {intl.formatMessage(messages.share)}\n
\n{intl.formatMessage(messages.goalMet)}
\n )}\n {...rest}\n >\n <>\n\n {daysPerWeek} {daysPerWeek === 1 ? 'time' : 'times'}),\n }}\n />\n
\n \n 
\n
\n \n achieve higher performance),\n }}\n />\n
\n \n \n );\n}\n\nWeeklyGoalCelebrationModal.propTypes = {\n courseId: PropTypes.string.isRequired,\n daysPerWeek: PropTypes.number.isRequired,\n intl: intlShape.isRequired,\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n};\n\nexport default injectIntl(WeeklyGoalCelebrationModal);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'calculator.button.label': {\n id: 'calculator.button.label',\n defaultMessage: 'Calculator',\n description: 'Button label to expand or close the calculator',\n },\n 'calculator.input.field.label': {\n id: 'calculator.input.field.label',\n defaultMessage: 'Calculator Input',\n description: 'label for calculator input',\n },\n 'calculator.submit.button.label': {\n id: 'calculator.submit.button.label',\n defaultMessage: 'Calculate',\n description: 'Submit button label to execute the calculator',\n },\n 'calculator.result.field.label': {\n id: 'calculator.result.field.label',\n defaultMessage: 'Calculator Result',\n description: 'label for calculator result',\n },\n 'calculator.result.field.placeholder': {\n id: 'calculator.result.field.placeholder',\n defaultMessage: 'Result',\n description: 'placeholder for calculator result',\n },\n});\n\nexport default messages;\n","import React, { Component } from 'react';\nimport { Collapsible } from '@edx/paragon';\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport {\n FormattedMessage, injectIntl, intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faCalculator, faQuestionCircle, faTimesCircle, faEquals,\n} from '@fortawesome/free-solid-svg-icons';\nimport messages from './messages';\n\nclass Calculator extends Component {\n constructor(props) {\n super(props);\n this.state = {\n equation: '',\n result: '',\n };\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n async handleSubmit(event) {\n event.preventDefault();\n event.stopPropagation();\n const urlEncoded = new URLSearchParams();\n urlEncoded.append('equation', this.state.equation);\n\n const response = await getAuthenticatedHttpClient().get(\n `${getConfig().LMS_BASE_URL}/calculate?${urlEncoded.toString()}`,\n );\n this.setState(() => ({ result: response.data.result }));\n }\n\n changeEquation(value) {\n this.setState(() => ({ equation: value }));\n }\n\n render() {\n return (\n \n \n \n \n \n \n {this.props.intl.formatMessage(messages['calculator.button.label'])}\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, pi | \n\n
| \n |
| \n | \n \n | \n \n
| \n |
| \n | \n abs, exp, fact, factorial, ln, log2, log10, sqrt | \n\n
| \n |
| \n | \n \n
| \n \n
| \n \n |
| \n | \n \n | \n 10^-9 | \n|
| \n | \n \n | \n 1e-9 | \n
\n
\n );\n}\n\nContentTools.propTypes = {\n course: PropTypes.shape({\n notes: PropTypes.shape({\n enabled: PropTypes.bool,\n }),\n showCalculator: PropTypes.bool,\n }).isRequired,\n};\n","import ContentTools from './ContentTools';\n\nexport default ContentTools;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { history } from '@edx/frontend-platform';\nimport { MenuItem } from '@edx/paragon';\n\nimport {\n sendTrackingLogEvent,\n sendTrackEvent,\n} from '@edx/frontend-platform/analytics';\n\nexport default function JumpNavMenuItem({\n title,\n courseId,\n currentSequence,\n currentUnit,\n sequences,\n isDefault,\n}) {\n function logEvent(targetUrl) {\n const eventName = 'edx.ui.lms.jump_nav.selected';\n const payload = {\n target_name: title,\n id: targetUrl,\n current_id: courseId,\n widget_placement: 'breadcrumb',\n };\n sendTrackEvent(eventName, payload);\n sendTrackingLogEvent(eventName, payload);\n }\n\n function destinationUrl() {\n if (isDefault) {\n return `/course/${courseId}/${currentSequence}/${currentUnit}`;\n }\n return `/course/${courseId}/${sequences[0].id}`;\n }\n function handleClick() {\n const url = destinationUrl();\n logEvent(url);\n history.push(url);\n }\n\n return (\n \n {course.showCalculator && (\n
\n \n
\n\n \n \n {\n global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/jump_to/${match.params.unitId}?experience=legacy`);\n }}\n />\n {\n global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/course/`);\n }}\n />\n {\n global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/survey`);\n }}\n />\n {\n global.location.assign(`${getConfig().LMS_BASE_URL}/dashboard${location.search}`);\n }}\n />\n \n
\n );\n};\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n completed: {\n id: 'learning.dates.badge.completed',\n defaultMessage: 'Completed',\n description: 'shown as label for the assignments which learner has completed.',\n },\n dueNext: {\n id: 'learning.dates.badge.dueNext',\n defaultMessage: 'Due next',\n description: 'Shown as label for the assignment which date is in the future',\n },\n pastDue: {\n id: 'learning.dates.badge.pastDue',\n defaultMessage: 'Past due',\n description: 'Shown as label for the assignments which deadline has passed',\n },\n title: {\n id: 'learning.dates.title',\n defaultMessage: 'Important dates',\n description: 'The title of dates tab (course timeline).',\n },\n today: {\n id: 'learning.dates.badge.today',\n defaultMessage: 'Today',\n description: 'Label used when the scheduled date for the assignment matches the current day',\n },\n unreleased: {\n id: 'learning.dates.badge.unreleased',\n defaultMessage: 'Not yet released',\n description: 'Shown as label for assignments which date is unknown yet',\n },\n verifiedOnly: {\n id: 'learning.dates.badge.verifiedOnly',\n defaultMessage: 'Verified only',\n description: 'Shown as label for assignments which learner has no access to.',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faLock } from '@fortawesome/free-solid-svg-icons';\nimport { Badge } from '@edx/paragon';\n\nimport messages from '../messages';\nimport { daycmp, isLearnerAssignment } from '../utils';\n\nfunction hasAccess(item) {\n return item.learnerHasAccess;\n}\n\nfunction isComplete(assignment) {\n return assignment.complete;\n}\n\nfunction isPastDue(assignment) {\n return !isComplete(assignment) && (new Date(assignment.date) < new Date());\n}\n\nfunction isUnreleased(assignment) {\n return !assignment.link;\n}\n\n// Pass a null item if you want to get a whole day's badge list, not just one item's list.\n// Returns an object with 'color' and 'badges' properties.\nfunction getBadgeListAndColor(date, intl, item, items) {\n const now = new Date();\n const assignments = items.filter(isLearnerAssignment);\n const isToday = daycmp(date, now) === 0;\n const isInFuture = daycmp(date, now) > 0;\n\n // This badge info list is in order of priority (they will appear left to right in this order and the first badge\n // sets the color of the dot in the timeline).\n const badgesInfo = [\n {\n message: messages.today,\n shownForDay: isToday,\n bg: 'bg-warning-300',\n className: 'text-black',\n },\n {\n message: messages.completed,\n shownForDay: assignments.length && assignments.every(isComplete),\n shownForItem: x => isLearnerAssignment(x) && isComplete(x),\n bg: 'bg-light-500',\n className: 'text-black',\n },\n {\n message: messages.pastDue,\n shownForDay: assignments.length && assignments.every(isPastDue),\n shownForItem: x => isLearnerAssignment(x) && isPastDue(x),\n bg: 'bg-dark-200',\n className: 'text-white',\n },\n {\n message: messages.dueNext,\n shownForDay: !isToday && assignments.some(x => x.dueNext),\n shownForItem: x => x.dueNext,\n bg: 'bg-gray-500',\n className: 'text-white',\n },\n {\n message: messages.unreleased,\n shownForDay: assignments.length && assignments.every(isUnreleased),\n shownForItem: x => isLearnerAssignment(x) && isUnreleased(x),\n className: 'border border-gray-500 text-gray-500',\n },\n {\n message: messages.verifiedOnly,\n shownForDay: items.length && items.every(x => !hasAccess(x)),\n shownForItem: x => !hasAccess(x),\n icon: faLock,\n bg: 'bg-dark-700',\n className: 'text-white',\n },\n ];\n let color = null; // first color of any badge\n const badges = (\n <>\n {badgesInfo.map(b => {\n let shown = b.shownForDay;\n if (item) {\n if (b.shownForDay) {\n shown = false; // don't double up, if the day already has this badge\n } else {\n shown = b.shownForItem && b.shownForItem(item);\n }\n }\n if (!shown) {\n return null;\n }\n\n if (!color && !isInFuture) {\n color = b.bg;\n }\n return (\n - \n {groupedDates.map((groupedDate) => (\n
\n {intl.formatMessage(messages.suggestedSchedule)}\n
\n );\n}\n\nSuggestedScheduleHeader.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(SuggestedScheduleHeader);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n Alert,\n Button,\n Col,\n Row,\n} from '@edx/paragon';\n\nimport { useModel } from '../../generic/model-store';\nimport messages from './messages';\n\nfunction UpgradeToCompleteAlert({ intl, logUpgradeLinkClick }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n datesBannerInfo,\n hasEnded,\n } = useModel('dates', courseId);\n\n const {\n contentTypeGatingEnabled,\n missedDeadlines,\n verifiedUpgradeLink,\n } = datesBannerInfo;\n\n if (!contentTypeGatingEnabled || missedDeadlines || hasEnded || !verifiedUpgradeLink) {\n return null;\n }\n\n return (\n\n {intl.formatMessage(messages.title)}\n
\n { /** [MM-P2P] Experiment */ }\n {isSelfPaced && hasDeadlines && !mmp2p.state.isEnabled && (\n <>\n {header}
\n \n
\n \n \n );\n}\n\nResultPage.defaultProps = {\n courseTitle: null,\n error: false,\n};\n\nResultPage.propTypes = {\n courseTitle: PropTypes.string,\n error: PropTypes.bool,\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(ResultPage);\n","import { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport { LearningHeader as Header } from '@edx/frontend-component-header';\nimport PageLoading from '../../generic/PageLoading';\nimport { unsubscribeFromCourseGoal } from '../data/api';\n\nimport messages from './messages';\nimport ResultPage from './ResultPage';\n\nfunction GoalUnsubscribe({ intl }) {\n const { token } = useParams();\n const [error, setError] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n const [data, setData] = useState({});\n\n // We don't need to bother with redux for this simple page. We're not sharing state with other pages at all.\n useEffect(() => {\n unsubscribeFromCourseGoal(token)\n .then(\n (result) => {\n setIsLoading(false);\n setData(result.data);\n },\n () => {\n setIsLoading(false);\n setError(true);\n },\n );\n // We unfortunately have no information about the user, course, org, or really anything\n // as visiting this page is allowed to be done anonymously and without the context of the course.\n // The token can be used to connect a user and course, it will just require some post-processing\n sendTrackEvent('edx.ui.lms.goal.unsubscribe', { token });\n }, []); // deps=[] to only run once\n\n return (\n <>\n {description}
\n {intl.formatMessage(messages.unverifiedPendingBody)}
);\n } else {\n body = (\n\n {intl.formatMessage(messages.percentComplete, { percent: completePercentage })}\n {intl.formatMessage(messages.percentIncomplete, { percent: incompletePercentage })}\n {lockedPercentage > 0 && (\n <>\n {intl.formatMessage(messages.percentLocked, { percent: lockedPercentage })}\n \n )}\n
\n \n );\n}\n\nCompletionDonutChart.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CompletionDonutChart);\n","import React from 'react';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport CompletionDonutChart from './CompletionDonutChart';\nimport messages from './messages';\n\nfunction CourseCompletion({ intl }) {\n return (\n \n
\n \n
\n {intl.formatMessage(messages.courseCompletion)}
\n\n {intl.formatMessage(messages.completionBody)}\n
\n\n
\n - \n {orderedGradeRange.map((range, index) => {\n if (index === 0) {\n return (\n
\n
\n );\n}\n\nCourseGradeFooter.propTypes = {\n intl: intlShape.isRequired,\n passingGrade: PropTypes.number.isRequired,\n};\n\nexport default injectIntl(CourseGradeFooter);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Locked } from '@edx/paragon/icons';\nimport { Button, Icon } from '@edx/paragon';\n\nimport { useModel } from '../../../../generic/model-store';\nimport messages from '../messages';\n\nfunction CourseGradeHeader({ intl }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n org,\n } = useModel('courseHomeMeta', courseId);\n const {\n verifiedMode,\n gradesFeatureIsFullyLocked,\n } = useModel('progress', courseId);\n\n const eventProperties = {\n org_key: org,\n courserun_key: courseId,\n };\n\n const { administrator } = getAuthenticatedUser();\n const logUpgradeButtonClick = () => {\n sendTrackEvent('edx.ui.lms.course_progress.grades_upgrade.clicked', {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n });\n sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {\n ...eventProperties,\n linkCategory: '(none)',\n linkName: 'progress_locked',\n linkType: 'button',\n pageName: 'progress',\n });\n };\n let previewText;\n if (verifiedMode) {\n previewText = gradesFeatureIsFullyLocked\n ? intl.formatMessage(messages.courseGradePreviewUnlockCertificateBody)\n : intl.formatMessage(messages.courseGradePartialPreviewUnlockCertificateBody);\n } else {\n previewText = intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody);\n }\n return (\n \n {icon}\n
\n \n {!wideScreen && (\n \n {footerText}\n {hasLetterGrades && (\n \n \n
\n \n
\n );\n}\n\nCourseGradeHeader.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseGradeHeader);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\n\nimport {\n getLocale, injectIntl, intlShape, isRtl,\n} from '@edx/frontend-platform/i18n';\nimport { OverlayTrigger, Popover } from '@edx/paragon';\n\nimport { useModel } from '../../../../generic/model-store';\n\nimport messages from '../messages';\n\nfunction CurrentGradeTooltip({ intl, tooltipClassName }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n courseGrade: {\n isPassing,\n percent,\n },\n } = useModel('progress', courseId);\n\n const currentGrade = Number((percent * 100).toFixed(0));\n\n let currentGradeDirection = currentGrade < 50 ? '' : '-';\n\n const isLocaleRtl = isRtl(getLocale());\n\n if (isLocaleRtl) {\n currentGradeDirection = currentGrade < 50 ? '-' : '';\n }\n\n return (\n <>\n \n
\n {verifiedMode && (\n \n
\n \n
\n \n \n {intl.formatMessage(messages.courseGradePreviewHeaderAriaHidden)}\n \n {gradesFeatureIsFullyLocked\n ? intl.formatMessage(messages.courseGradePreviewHeaderLocked)\n : intl.formatMessage(messages.courseGradePreviewHeaderLimited)}\n
\n \n
\n \n {previewText}\n
\n \n \n
\n )}\n \n
\n );\n}\n\nGradeBar.propTypes = {\n intl: intlShape.isRequired,\n passingGrade: PropTypes.number.isRequired,\n};\n\nexport default injectIntl(GradeBar);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n completed: {\n id: 'progress.creditInformation.completed',\n defaultMessage: 'Completed',\n description: 'Label text if a requirement for (course credit) is satisfied',\n },\n courseCredit: {\n id: 'progress.creditInformation.courseCredit',\n defaultMessage: 'course credit',\n description: 'Anchor text for link that redirects (course credit) help page',\n },\n minimumGrade: {\n id: 'progress.creditInformation.minimumGrade',\n defaultMessage: 'Minimum grade for credit ({minGrade}%)',\n },\n requirementsHeader: {\n id: 'progress.creditInformation.requirementsHeader',\n defaultMessage: 'Requirements for course credit',\n description: 'Header for the requirements section in course credit',\n },\n upcoming: {\n id: 'progress.creditInformation.upcoming',\n defaultMessage: 'Upcoming',\n description: 'It indicate that the a (credit requirement) status is not known yet',\n },\n verificationFailed: {\n id: 'progress.creditInformation.verificationFailed',\n defaultMessage: 'Verification failed',\n description: 'It indicate that the learner submitted a requirement but is either failed or declined',\n },\n verificationSubmitted: {\n id: 'progress.creditInformation.verificationSubmitted',\n defaultMessage: 'Verification submitted',\n description: 'It indicate that the learner submitted a requirement but is not graded or reviewed yet',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { getConfig } from '@edx/frontend-platform';\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { CheckCircle, WarningFilled, WatchFilled } from '@edx/paragon/icons';\nimport { Hyperlink, Icon } from '@edx/paragon';\n\nimport { useModel } from '../../../generic/model-store';\nimport { DashboardLink } from '../../../shared/links';\n\nimport messages from './messages';\n\nfunction CreditInformation({ intl }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n creditCourseRequirements,\n } = useModel('progress', courseId);\n\n if (!creditCourseRequirements) { return null; }\n\n let eligibilityStatus;\n let requirementStatus;\n const requirements = [];\n const dashboardLink = {intl.formatMessage(messages.courseGradeBarAltText, { currentGrade, passingGrade })}
\n \n \n
\n ));\n });\n\n return (\n <>\n \n {requirement.namespace === 'grade'\n ? `${intl.formatMessage(messages.minimumGrade, { minGrade: Number(requirement.criteria.minGrade) * 100 })}:`\n : `${requirement.displayName}:`}\n
\n\n {requirementStatus}\n
\n {intl.formatMessage(messages.requirementsHeader)}
\n{eligibilityStatus}
\n {requirements}\n \n );\n}\n\nCreditInformation.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CreditInformation);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport { useModel } from '../../../../generic/model-store';\n\nimport CourseGradeFooter from './CourseGradeFooter';\nimport CourseGradeHeader from './CourseGradeHeader';\nimport GradeBar from './GradeBar';\nimport CreditInformation from '../../credit-information/CreditInformation';\n\nimport messages from '../messages';\n\nfunction CourseGrade({ intl }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n creditCourseRequirements,\n gradesFeatureIsFullyLocked,\n gradesFeatureIsPartiallyLocked,\n gradingPolicy: {\n gradeRange,\n },\n } = useModel('progress', courseId);\n\n const passingGrade = Number((Math.min(...Object.values(gradeRange)) * 100).toFixed(0));\n\n const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';\n\n return (\n\n
\n \n
\n \n
\n {creditCourseRequirements\n ? intl.formatMessage(messages.gradesAndCredit)\n : intl.formatMessage(messages.grades)}\n
\n\n {intl.formatMessage(messages.courseGradeBody)}\n
\n\n
\n \n
\n \n );\n}\n\nProblemScoreDrawer.propTypes = {\n intl: intlShape.isRequired,\n problemScores: PropTypes.arrayOf(PropTypes.shape({\n earned: PropTypes.number.isRequired,\n possible: PropTypes.number.isRequired,\n })).isRequired,\n subsection: PropTypes.shape({ learnerHasAccess: PropTypes.bool }).isRequired,\n};\n\nexport default injectIntl(ProblemScoreDrawer);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Collapsible, Icon, Row } from '@edx/paragon';\nimport {\n ArrowDropDown, ArrowDropUp, Blocked, Info,\n} from '@edx/paragon/icons';\n\nimport messages from '../messages';\nimport { useModel } from '../../../../generic/model-store';\nimport ProblemScoreDrawer from './ProblemScoreDrawer';\n\nfunction SubsectionTitleCell({ intl, subsection }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n org,\n } = useModel('courseHomeMeta', courseId);\n const {\n gradesFeatureIsFullyLocked,\n } = useModel('progress', courseId);\n\n const {\n blockKey,\n displayName,\n problemScores,\n url,\n } = subsection;\n\n const { administrator } = getAuthenticatedUser();\n const logSubsectionClicked = () => {\n sendTrackEvent('edx.ui.lms.course_progress.detailed_grades_assignment.clicked', {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n assignment_block_key: blockKey,\n });\n };\n\n return (\n - \n {problemScores.map(problemScore => (\n
\n { subsection.override && (\n
\n \n
\n )}\n \n
\n {intl.formatMessage(messages.sectionGradeOverridden)}
\n \n \n
\n );\n })\n );\n}\n\nDetailedGradesTable.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(DetailedGradesTable);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Blocked } from '@edx/paragon/icons';\nimport { Icon, Hyperlink } from '@edx/paragon';\nimport { useModel } from '../../../../generic/model-store';\n\nimport DetailedGradesTable from './DetailedGradesTable';\n\nimport messages from '../messages';\n\nfunction DetailedGrades({ intl }) {\n const { administrator } = getAuthenticatedUser();\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n org,\n } = useModel('courseHomeMeta', courseId);\n const {\n gradesFeatureIsFullyLocked,\n gradesFeatureIsPartiallyLocked,\n sectionScores,\n } = useModel('progress', courseId);\n\n const hasSectionScores = sectionScores.length > 0;\n\n const logOutlineLinkClick = () => {\n sendTrackEvent('edx.ui.lms.course_progress.detailed_grades.course_outline_link.clicked', {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n });\n };\n\n const outlineLink = (\n {intl.formatMessage(messages.detailedGrades)}
\n {gradesFeatureIsPartiallyLocked && (\n\n
\n )}\n {hasSectionScores && (\n {intl.formatMessage(messages.detailedGradesEmpty)}
\n )}\n\n
\n \n \n {intl.formatMessage(messages.gradeSummaryTooltipBody)}\n \n \n )}\n >\n { setShowTooltip(!showTooltip); }}\n onBlur={() => { setShowTooltip(false); }}\n alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}\n src={InfoOutline}\n iconAs={Icon}\n className=\"mb-3\"\n size=\"sm\"\n disabled={gradesFeatureIsFullyLocked}\n />\n \n {!gradesFeatureIsFullyLocked && allOfSomeAssignmentTypeIsLocked && (\n
\n );\n}\n\nGradeSummaryHeader.propTypes = {\n intl: intlShape.isRequired,\n allOfSomeAssignmentTypeIsLocked: PropTypes.bool.isRequired,\n};\n\nexport default injectIntl(GradeSummaryHeader);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Blocked } from '@edx/paragon/icons';\nimport { Icon } from '@edx/paragon';\nimport { useModel } from '../../../../generic/model-store';\nimport messages from '../messages';\n\nfunction AssignmentTypeCell({\n intl, assignmentType, footnoteMarker, footnoteId, locked,\n}) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n gradesFeatureIsFullyLocked,\n } = useModel('progress', courseId);\n\n const lockedIcon = locked ? {intl.formatMessage(messages.gradeSummary)}
\n\n
\n )}\n \n
\n );\n}\n\nAssignmentTypeCell.propTypes = {\n intl: intlShape.isRequired,\n assignmentType: PropTypes.string.isRequired,\n footnoteId: PropTypes.string,\n footnoteMarker: PropTypes.number,\n locked: PropTypes.bool,\n};\n\nAssignmentTypeCell.defaultProps = {\n footnoteId: '',\n footnoteMarker: null,\n locked: false,\n};\n\nexport default injectIntl(AssignmentTypeCell);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport messages from '../messages';\nimport { useModel } from '../../../../generic/model-store';\n\nfunction DroppableAssignmentFootnote({ footnotes, intl }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n gradesFeatureIsFullyLocked,\n } = useModel('progress', courseId);\n return (\n <>\n {intl.formatMessage(messages.footnotesTitle)}\n {lockedIcon}
\n \n {assignmentType} \n {footnoteId && footnoteMarker && (\n \n \n {footnoteMarker}\n \n \n )}\n
\n - \n {footnotes.map((footnote, index) => (\n
\n
\n {intl.formatMessage(messages.weightedGradeSummary)}
\n {totalGrade}%
\n \n
\n \n );\n}\n\nProgressHeader.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(ProgressHeader);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n datesCardDescription: {\n id: 'progress.relatedLinks.datesCard.description',\n defaultMessage: 'A schedule view of your course due dates and upcoming assignments.',\n description: 'It explain the content of the dates tab',\n },\n datesCardLink: {\n id: 'progress.relatedLinks.datesCard.link',\n defaultMessage: 'Dates',\n description: 'Anchor text for link that redirects to dates tab',\n },\n outlineCardDescription: {\n id: 'progress.relatedLinks.outlineCard.description',\n defaultMessage: 'A birds-eye view of your course content.',\n description: 'It explain the content of the course outline tab',\n },\n outlineCardLink: {\n id: 'progress.relatedLinks.outlineCard.link',\n defaultMessage: 'Course Outline',\n description: 'Anchor text for link that redirects to course outline tab',\n },\n relatedLinks: {\n id: 'progress.relatedLinks',\n defaultMessage: 'Related links',\n description: 'Headline for (related links) section in progress tab',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Hyperlink } from '@edx/paragon';\n\nimport messages from './messages';\nimport { useModel } from '../../../generic/model-store';\n\nfunction RelatedLinks({ intl }) {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n org,\n } = useModel('courseHomeMeta', courseId);\n\n const { administrator } = getAuthenticatedUser();\n const logLinkClicked = (linkName) => {\n sendTrackEvent('edx.ui.lms.course_progress.related_links.clicked', {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n link_clicked: linkName,\n });\n };\n\n return (\n {pageTitle}
\n {administrator && studioUrl && (\n \n )}\n{intl.formatMessage(messages.relatedLinks)}
\n- \n
\n {/* Main body */}\n
\n \n );\n}\n\nexport default ProgressTab;\n","import React, { useEffect, useState } from 'react';\nimport { getConfig } from '@edx/frontend-platform';\nimport PropTypes from 'prop-types';\nimport { getNotices } from './api';\n/**\n * This component uses the platform-plugin-notices plugin to function.\n * If the user has an unacknowledged notice, they will be rerouted off\n * course home and onto a full-screen notice page. If the plugin is not\n * installed, or there are no notices, we just passthrough this component.\n */\nconst NoticesProvider = ({ children }) => {\n const [isRedirected, setIsRedirected] = useState();\n useEffect(async () => {\n if (getConfig().ENABLE_NOTICES) {\n const data = await getNotices();\n if (data && data.results && data.results.length > 0) {\n const { results } = data;\n setIsRedirected(true);\n window.location.replace(`${results[0]}?next=${window.location.href}`);\n }\n }\n }, []);\n\n return (\n \n
\n\n {/* Side panel */}\n \n
\n \n {wideScreen &&
\n \n {isRedirected === true ? null : children}\n
\n );\n};\n\nNoticesProvider.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default NoticesProvider;\n","/* eslint-disable import/prefer-default-export */\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { logError, logInfo } from '@edx/frontend-platform/logging';\n\nexport const getNotices = async () => {\n const authenticatedUser = getAuthenticatedUser();\n const url = new URL(`${getConfig().LMS_BASE_URL}/notices/api/v1/unacknowledged`);\n if (authenticatedUser) {\n try {\n const { data } = await getAuthenticatedHttpClient().get(url.href, {});\n return data;\n } catch (e) {\n // we will just swallow error, as that probably means the notices app is not installed.\n // Notices are not necessary for the rest of courseware to function.\n const { customAttributes: { httpErrorStatus } } = e;\n if (httpErrorStatus === 404) {\n logInfo(`${e}. This probably happened because the notices plugin is not installed on platform.`);\n } else {\n logError(e);\n }\n }\n }\n return null;\n};\n","import { Redirect, useLocation } from 'react-router-dom';\nimport PropTypes from 'prop-types';\n\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\n\n/**\n * We have seen evidence of learners hitting MFE pages with spaces instead of plus signs (which are used commonly\n * in our course keys). It's possible something out there is un-escaping our paths before sending learners to them.\n *\n * So this provider fixes those paths up and logs it so that we can try to fix the source.\n *\n * This might be temporary, based on how much we can fix the sources of these urls-with-spaces.\n */\nconst PathFixesProvider = ({ children }) => {\n const location = useLocation();\n\n // We only check for spaces. That's not the only kind of character that is escaped in URLs, but it would always be\n // present for our cases, and I believe it's the only one we use normally.\n if (location.pathname.includes(' ')) {\n const newLocation = {\n ...location,\n pathname: location.pathname.replaceAll(' ', '+'),\n };\n\n sendTrackEvent('edx.ui.lms.path_fixed', {\n new_path: newLocation.pathname,\n old_path: location.pathname,\n referrer: document.referrer,\n search: location.search,\n });\n\n return (