\n {children}\n
\n \n
\n }\n footerNode={\n \n }\n />\n )}\n \n );\n};\n\nCertificateStatusAlert.propTypes = {\n intl: intlShape.isRequired,\n payload: PropTypes.shape({\n certificateAvailableDate: PropTypes.string,\n certStatus: PropTypes.string,\n courseEndDate: PropTypes.string,\n courseId: PropTypes.string,\n certURL: PropTypes.string,\n userTimezone: PropTypes.string,\n org: PropTypes.string,\n notPassingCourseEnded: PropTypes.bool,\n tabs: PropTypes.arrayOf(PropTypes.shape({\n tab_id: PropTypes.string,\n title: PropTypes.string,\n url: PropTypes.string,\n })),\n }).isRequired,\n};\n\nexport default injectIntl(CertificateStatusAlert);\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\nconst Alert = ({\n type, dismissible, children, onDismiss, stacked,\n}) => (\n \n
\n \n
\n \n {}}\n className=\"description-link\"\n >\n {dateBlock.linkText}\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 {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\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\nconst 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 logClick(courseTool.analyticsId)}>\n
\n {courseTool.title}\n \n \n ))}\n - \n
\n \n
\n
\n \n
\n \n {complete ? (\n
\n \n {/* this is where we compare to see which link should be highlighted */}\n {displayTitle}\n \n , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}\n \n
\n \n \n {due ? dueDateMessage : noDueDateMessage}\n \n
\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 {sequenceIds.map((sequenceId, index) => (\n
\n
\n \n );\n};\n\nUpgradeButton.defaultProps = {\n offer: null,\n onClick: null,\n variant: 'primary',\n};\n\nUpgradeButton.propTypes = {\n intl: intlShape.isRequired,\n offer: PropTypes.shape({\n upgradeUrl: PropTypes.string.isRequired,\n }),\n onClick: PropTypes.func,\n verifiedMode: PropTypes.shape({\n upgradeUrl: PropTypes.string.isRequired,\n }).isRequired,\n variant: PropTypes.string,\n};\n\nexport default injectIntl(UpgradeButton);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Button } from '@edx/paragon';\n\nimport FormattedPricing from './FormattedPricing';\n\nconst UpgradeNowButton = (props) => {\n const {\n intl,\n offer,\n variant,\n onClick,\n verifiedMode,\n ...rest\n } = props;\n\n // Prefer offer's url in case it is different (might hold a coupon code that the normal does not)\n const url = offer ? offer.upgradeUrl : verifiedMode.upgradeUrl;\n\n return (\n - \nexport const 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, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';\nimport { FormattedDate, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';\nimport { Button } from '@edx/paragon';\nimport { setLocalStorage } from '../../data/localStorage';\nimport { UpgradeButton } from '../upgrade-button';\nimport {\n VerifiedCertBullet,\n UnlockGradedBullet,\n FullAccessBullet,\n SupportMissionBullet,\n} from '../upsell-bullets/UpsellBullets';\n\nconst UpsellNoFBECardContent = () => (\n - \n
- \n {sequenceIds.map((sequenceId, index) => (\n
Loading...\n }\n \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({\n complete: PropTypes.bool,\n sequenceIds: PropTypes.arrayOf(PropTypes.string),\n title: PropTypes.string,\n }).isRequired,\n};\n\nexport default injectIntl(Section);\n","/* eslint-disable no-use-before-define */\nimport React, {\n useEffect, useState,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n sendTrackEvent,\n sendTrackingLogEvent,\n} from '@edx/frontend-platform/analytics';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { useSelector } from 'react-redux';\nimport SequenceExamWrapper from '@edx/frontend-lib-special-exams';\nimport { breakpoints, useWindowSize } from '@edx/paragon';\n\nimport PageLoading from '../../../generic/PageLoading';\nimport { useModel } from '../../../generic/model-store';\nimport { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '../../../alerts/sequence-alerts/hooks';\n\nimport CourseLicense from '../course-license';\nimport Sidebar from '../sidebar/Sidebar';\nimport SidebarTriggers from '../sidebar/SidebarTriggers';\nimport messages from './messages';\nimport HiddenAfterDue from './hidden-after-due';\nimport { SequenceNavigation, UnitNavigation } from './sequence-navigation';\nimport SequenceContent from './SequenceContent';\nimport Section2 from '../../../course-home/outline-tab/Section2';\nimport { getOutlineTabData, getCourseBlocks } from '../../../course-home/data/api';\nimport { useDispatch } from 'react-redux';\nimport { toggleMenu } from '../../../menuSlice.js';\n\nconst Sequence = ({\n unitId,\n sequenceId,\n courseId,\n unitNavigationHandler,\n nextSequenceHandler,\n previousSequenceHandler,\n intl,\n}) => {\n const course = useModel('coursewareMeta', courseId);\n const {\n isStaff,\n originalUserIsStaff,\n } = useModel('courseHomeMeta', courseId);\n const sequence = useModel('sequences', sequenceId);\n const unit = useModel('units', unitId);\n const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);\n const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit);\n const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;\n const [courseData, setData] = useState();\n const [courseSection, setSection] = useState();\n const [courseSequence, setSequence] = useState();\n const [newUnits, setUnits] = useState();\n const [error, setError] = useState(null)\n const [isNavOpen, setIsNavOpen] = useState(false);\n const isOpen = useSelector((state) => state.menu.isOpen);\n const isShown = useSelector((state) => state.menu.isShown);\n const dispatch = useDispatch();\n //childData represents section id of the sequence link highlighted, this helps us to keep the right section dropdown open\n const childData = useSelector((state) => state.menu.childData); // Get child data from the store\n\n \n const handleToggleMenu = () => {\n dispatch(toggleMenu());\n };\n \n \n // const MenuClick = useSelector((state) => state.custom.isMenuClicked);\n // const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);\n\n \n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const result = await getOutlineTabData(courseId);\n setData(result.courseBlocks.courses);\n setSection(result.courseBlocks.sections);\n setSequence(result.courseBlocks.sequences);\n \n \n const sectionUnits = await getSequenceMetadata(sequenceId);\n \n setUnits(sectionUnits.units);\n } catch (error) {\n console.error('Error fetching data:', error);\n setError(error);\n }\n };\n\n fetchData(); // Call the fetch function\n }, [courseId]);\n \n const sections = courseSection;\n const courses = courseData;\n\n const rootCourseId = courses && Object.keys(courses)[0];\n\n const handleNext = () => {\n const nextIndex = sequence.unitIds.indexOf(unitId) + 1;\n if (nextIndex < sequence.unitIds.length) {\n const newUnitId = sequence.unitIds[nextIndex];\n handleNavigate(newUnitId);\n } else {\n nextSequenceHandler();\n }\n };\n\n const handlePrevious = () => {\n const previousIndex = sequence.unitIds.indexOf(unitId) - 1;\n if (previousIndex >= 0) {\n const newUnitId = sequence.unitIds[previousIndex];\n handleNavigate(newUnitId);\n } else {\n previousSequenceHandler();\n }\n };\n\n const handleNavigate = (destinationUnitId) => {\n unitNavigationHandler(destinationUnitId);\n };\n\n const logEvent = (eventName, widgetPlacement, targetUnitId) => {\n // Note: tabs are tracked with a 1-indexed position\n // as opposed to a 0-index used throughout this MFE\n const currentIndex = sequence.unitIds.length > 0 ? sequence.unitIds.indexOf(unitId) : 0;\n const payload = {\n current_tab: currentIndex + 1,\n id: unitId,\n tab_count: sequence.unitIds.length,\n widget_placement: widgetPlacement,\n };\n if (targetUnitId) {\n const targetIndex = sequence.unitIds.indexOf(targetUnitId);\n payload.target_tab = targetIndex + 1;\n }\n sendTrackEvent(eventName, payload);\n sendTrackingLogEvent(eventName, payload);\n };\n\n useSequenceBannerTextAlert(sequenceId);\n useSequenceEntranceExamAlert(courseId, sequenceId, intl);\n\n useEffect(() => {\n function receiveMessage(event) {\n const { type } = event.data;\n if (type === 'entranceExam.passed') {\n // I know this seems (is) intense. It is implemented this way since we need to refetch the underlying\n // course blocks that were originally hidden because the Entrance Exam was not passed.\n global.location.reload();\n }\n }\n global.addEventListener('message', receiveMessage);\n }, []);\n\n const [unitHasLoaded, setUnitHasLoaded] = useState(false);\n const handleUnitLoaded = () => {\n setUnitHasLoaded(true);\n };\n\n // We want hide the unit navigation if we're in the middle of navigating to another unit\n // but not if other things about the unit change, like the bookmark status.\n // The array property of this useEffect ensures that we only hide the unit navigation\n // while navigating to another unit.\n useEffect(() => {\n if (unit) {\n setUnitHasLoaded(false);\n }\n }, [(unit || {}).id]);\n\n\n // If sequence might be a unit, we want to keep showing a spinner - the courseware container will redirect us when\n // it knows which sequence to actually go to.\n const loading = sequenceStatus === 'loading' || (sequenceStatus === 'failed' && sequenceMightBeUnit);\n if (loading) {\n if (!sequenceId) {\n return ( - \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 {/* 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 const { badges: itemBadges } = 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 {item.description &&
\n \n )}\n {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};\n\nDay.defaultProps = {\n first: false,\n last: false,\n};\n\nexport default injectIntl(Day);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport Day from './Day';\nimport { daycmp, isLearnerAssignment } from '../utils';\n\nconst Timeline = () => {\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}{isLocaleRtl ? '\\\\' : '/'}{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 {overviewTabUrl && (\n - \n
logLinkClicked('course_outline')}>\n {intl.formatMessage(messages.outlineCardLink)}\n \n{intl.formatMessage(messages.outlineCardDescription)}
\n \n )}\n
- \nexport const UnlockGradedBullet = () => {\n const gradedAssignmentsInBoldText = (\n \n
- \nexport const FullAccessBullet = () => {\n const fullAccessInBoldText = (\n \n
- \nexport const SupportMissionBullet = () => {\n const missionInBoldText = (\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\nconst PastExpirationCardContent = () => (\n \n
\n
\n
\n);\n\nconst 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\nconst 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\nconst 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\nconst 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 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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n if (!verifiedMode) {\n return null;\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 {!isCurrentlySubmitted(status) && (\n intl.formatMessage(messages.proctoringPanelGeneralInfo)\n )}\n {isCurrentlySubmitted(status) && (\n intl.formatMessage(messages.proctoringPanelGeneralInfoSubmitted)\n )}\n
\n{intl.formatMessage(messages.proctoringPanelGeneralTime)}
\n \n )}\n {isSubmissionRequired(readableStatus) && (\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 {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__ + \"d8d2ddd02a2781719fd303dc4b868ac0.gif\";","export default __webpack_public_path__ + \"8ecb9b1c7d41d7196375abdc97a53b4b.gif\";","export default __webpack_public_path__ + \"d0cc1158a1b3bd75bb785cd0d6e306c1.png\";","export default __webpack_public_path__ + \"50e380db78f1d321fe1ce5bacea07644.png\";","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\nconst 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
\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\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 canImmediatelyViewCertificate = false,\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 && canImmediatelyViewCertificate) {\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 { canViewCertificate } = useModel('courseHomeMeta', courseId);\n const exitMode = getCourseExitMode(\n certificateData,\n hasScheduledContent,\n isEnrolled,\n userHasPassingGrade,\n courseExitPageIsActive,\n canViewCertificate,\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\nconst 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","/* eslint-disable no-param-reassign */\nimport { createSlice } from '@reduxjs/toolkit';\n\nexport const LOADING = 'loading';\nexport const LOADED = 'loaded';\nexport const FAILED = 'failed';\n\nconst slice = createSlice({\n courseId: null,\n name: 'recommendations',\n initialState: {\n recommendationsStatus: LOADING,\n },\n reducers: {\n fetchCourseRecommendationsRequest: (state, { payload }) => {\n state.courseId = payload.courseId;\n state.recommendationsStatus = LOADING;\n },\n fetchCourseRecommendationsSuccess: (state, { payload }) => {\n state.courseId = payload.courseId;\n state.recommendationsStatus = LOADED;\n },\n fetchCourseRecommendationsFailure: (state, { payload }) => {\n state.courseId = payload.courseId;\n state.recommendationsStatus = FAILED;\n },\n },\n});\n\nexport const {\n fetchCourseRecommendationsRequest,\n fetchCourseRecommendationsSuccess,\n fetchCourseRecommendationsFailure,\n} = slice.actions;\n\nexport const {\n reducer,\n} = slice;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useSelector } from 'react-redux';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport {\n FormattedMessage, injectIntl, intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { Hyperlink } from '@edx/paragon';\nimport { faSearch } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport messages from './messages';\nimport { logClick } from './utils';\n\nconst CatalogSuggestion = ({ intl, variant }) => {\n const { courseId } = useSelector(state => state.courseware);\n const { org } = useModel('courseHomeMeta', courseId);\n const { administrator } = getAuthenticatedUser();\n\n const searchOurCatalogLink = (\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, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Spinner } from '@edx/paragon';\n\nexport default class PageLoading extends Component {\n renderSrMessage() {\n if (!this.props.srMessage) {\n return null;\n }\n\n return (\n \n {this.props.srMessage}\n \n );\n }\n\n render() {\n return (\n \n
\n \n \n
\n \n );\n }\n}\n\nPageLoading.propTypes = {\n srMessage: PropTypes.node.isRequired,\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport 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\nconst 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 {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, useState } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faLinkedinIn } from '@fortawesome/free-brands-svg-icons';\nimport {\n FormattedDate,\n FormattedMessage,\n injectIntl,\n 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 Modal,\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\nconst 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 canViewCertificate,\n userTimezone,\n } = useModel('courseHomeMeta', courseId);\n\n const {\n certStatus,\n certWebViewUrl,\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 message = (\n\n
\n
\n {getConfig().SUPPORT_URL_VERIFIED_CERTIFICATE && (\n
\n {intl.formatMessage(messages.certificateNotAvailableEndDateBody, { endDate })}\n
\n\n {intl.formatMessage(messages.certificateNotAvailableBodyAccessCert)}\n
\n \n );\n }\n break;\n }\n\n useEffect(() => logVisit(org, courseId, administrator, visitEvent), [org, courseId, administrator, visitEvent]);\n\n return (\n <>\n\n
\n {/* Processing Message Modal */}\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 footerNode={\n \n }\n />\n \n );\n};\n\nCourseCelebration.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseCelebration);\n\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\nconst 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 \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\nconst 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 { Navigate } 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\nconst 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 {\n isMasquerading,\n canViewCertificate,\n } = useModel('courseHomeMeta', courseId);\n\n const mode = getCourseExitMode(\n certificateData,\n hasScheduledContent,\n isEnrolled,\n userHasPassingGrade,\n courseExitPageIsActive,\n canViewCertificate,\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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\nconst 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(\n indexOfOverflowStart,\n 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 = useMemo(() => ({\n accessExpiration,\n courseId,\n org,\n userTimezone,\n analyticsPageName,\n }), [accessExpiration, analyticsPageName, courseId, org, userTimezone]);\n\n useAlert(isVisible, {\n code: 'clientAccessExpirationAlert',\n payload,\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 = useMemo(() => ({\n expirationDate,\n userTimezone,\n }), [expirationDate, userTimezone]);\n\n useAlert(isVisible, {\n code: 'clientAccessExpirationMasqueradeBanner',\n payload,\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\nconst 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 tab,\n } = props;\n\n const urlInsights = getInsightsUrl(courseId);\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 tab: PropTypes.string,\n};\n\nInstructorToolbar.defaultProps = {\n courseId: undefined,\n unitId: undefined,\n tab: '',\n};\n\nexport default InstructorToolbar;\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 = useMemo(() => ({\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 }), [course, courseId, outline]);\n\n useAlert(isVisible, {\n code: 'clientEnrollmentAlert',\n payload,\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 const DismissButtonFormattedMessage = () => (\n \n \n
\n {masqueradeErrorMessage && (\n \n \n {masqueradeErrorMessage}\n \n
\n )}\n {intl.formatMessage(messages.newUserModalBody, { siteName: getConfig().SITE_NAME })}
\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","/* eslint-disable react-hooks/exhaustive-deps */\nimport 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\nconst ProductTours = ({\n activeTab,\n courseId,\n isStreakCelebrationOpen,\n org,\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 if (isStreakCelebrationOpen) {\n return null;\n }\n\n // The\n {intl.formatMessage(messages.failure)}\n
\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, courseAccess, start) {\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 'data_sharing_access_required':\n url = `/redirect/consent?consentPath=${encodeURIComponent(courseAccess.developerMessage)}`;\n break;\n case 'incorrect_active_enterprise':\n url = `/course/${courseId}/access-denied`;\n break;\n case 'unfulfilled_milestones':\n url = '/redirect/dashboard';\n break;\n case 'authentication_required':\n case 'enrollment_required':\n default:\n if (activeTabSlug !== 'outline') {\n url = `/course/${courseId}/home`;\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\nconst TabContainer = (props) => {\n const {\n children,\n fetch,\n slice,\n tab,\n isProgressTab,\n } = props;\n\n const { courseId: courseIdFromUrl, targetUserId } = useParams();\n const dispatch = useDispatch();\n\n useEffect(() => {\n // The courseId from the URL is the course we WANT to load.\n if (isProgressTab) {\n dispatch(fetch(courseIdFromUrl, targetUserId));\n } else {\n dispatch(fetch(courseIdFromUrl));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [courseIdFromUrl, targetUserId]);\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","import React from 'react';\n\nconst SidebarContext = React.createContext({});\n\nexport default SidebarContext;\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\nconst 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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [sidebarId, toggleSidebar]);\n\n useEventListener('message', receiveMessage);\n\n return (\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,\n children: PropTypes.element.isRequired,\n showTitleBar: PropTypes.bool,\n width: PropTypes.string,\n};\n\nSidebarBase.defaultProps = {\n width: '31rem',\n showTitleBar: true,\n className: '',\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\nconst SidebarTriggerBase = ({\n onClick,\n ariaLabel,\n children,\n}) => (\n \n toggleSidebar(null)}\n variant=\"primary\"\n alt={intl.formatMessage(messages.closeNotificationTrigger)}\n />\n
\n )}\n \n {children}\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\nconst NotificationIcon = ({\n intl,\n status,\n notificationColor,\n}) => (\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, useMemo } 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\nconst DiscussionsTrigger = ({\n intl,\n onClick,\n}) => {\n const {\n unitId,\n courseId,\n } = useContext(SidebarContext);\n const dispatch = useDispatch();\n const { tabs } = useModel('courseHomeMeta', courseId);\n const topic = useModel('discussionTopics', unitId);\n const baseUrl = getConfig().DISCUSSIONS_MFE_BASE_URL;\n const edxProvider = useMemo(\n () => tabs?.find(tab => tab.slug === 'discussion'),\n [tabs],\n );\n\n useEffect(() => {\n if (baseUrl && edxProvider) {\n dispatch(getCourseDiscussionTopics(courseId));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [courseId, baseUrl]);\n\n if (!topic?.id || !topic?.enabledInContext) {\n return null;\n }\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 \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\nconst 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 { Link } from 'react-router-dom';\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\nconst UnitNavigation = ({\n intl,\n sequenceId,\n unitId,\n onClickPrevious,\n onClickNext,\n}) => {\n const {\n isFirstUnit, isLastUnit, nextLink, previousLink,\n } = useSequenceNavigationMetadata(sequenceId, unitId);\n const { courseId } = useSelector(state => state.courseware);\n\n const renderPreviousButton = () => {\n const disabled = isFirstUnit;\n const prevArrow = isRtl(getLocale()) ? faChevronRight : faChevronLeft;\n return (\n \n {renderPreviousButton()}\n {renderNextButton()}\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};\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\nconst BookmarkOutlineIcon = (props) => \n \n
\n )}\n {modalOptions.isOpen && (\n \n {siteName}{' '}\n {intl.formatMessage(messages['learn.honorCode.name'])}\n
\n\n\n
\n \n
\n )}\n \n \n
\n\n {pastExpirationDeadline\n ? null\n : (\n \n {intl.formatMessage(messages['learn.lockPaywall.title'])}\n
\n {pastExpirationDeadline ? (\n\n {intl.formatMessage(messages['learn.lockPaywall.content.pastExpiration'])}\n {intl.formatMessage(messages['learn.lockPaywall.courseDetails'])} \n
\n ) : (\n \n {intl.formatMessage(messages['learn.lockPaywall.content'])}\n
\n )}\n\n \n
\n \n
\n\n \n
\n \n {intl.formatMessage(messages['learn.lockPaywall.list.intro'])}\n
\n - \n
\n
\n );\n};\n\nUnit.propTypes = {\n courseId: PropTypes.string.isRequired,\n format: PropTypes.string,\n id: PropTypes.string.isRequired,\n onLoaded: PropTypes.func,\n};\n\nUnit.defaultProps = {\n format: null,\n onLoaded: undefined,\n};\n\nexport default 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\nconst SequenceContent = ({\n gated,\n intl,\n courseId,\n sequenceId,\n unitId,\n unitLoadedHandler,\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{formatMessage(messages.headerPlaceholder)}
\n\n {intl.formatMessage(messages.noContent)}\n
\n );\n }\n\n return (\n \n
\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 {intl.formatMessage(messages.noContent)}
);\n }\n return (\n \n\n{rootCourseId && (\n //
\n );\n\n if (sequenceStatus === 'loaded') {\n return (\n \n \n <>\n \n \n {sections ? (\n \n
\n )}\n\n - \n {courses[rootCourseId].sectionIds.map((sectionId) => (\n <>\n {/* compare section id with childData to see if the section dropdown should remain open */}\n
Loading sections...
\n )\n }\n \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 previousHandler={() => {\n logEvent('edx.ui.lms.sequence.previous_selected', 'top');\n handlePrevious();\n }}\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 />\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\nSequence.defaultProps = {\n sequenceId: null,\n unitId: null,\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,\n { 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__ + \"5d807cf236c139fbbba42662e57fd7d7.gif\";","export default __webpack_public_path__ + \"3e27683222187b61655f1e0b82e12596.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, celebrations, dispatch) {\n // Tell the LMS\n postCelebrationComplete(courseId, { first_section: false });\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 // 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 { useDispatch } from 'react-redux';\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\nconst CelebrationModal = ({\n courseId, intl, isOpen, onClose, ...rest\n}) => {\n const { org, celebrations } = useModel('courseHomeMeta', courseId);\n const dispatch = useDispatch();\n const wideScreen = useWindowSize().width >= breakpoints.small.minWidth;\n\n useEffect(() => {\n if (isOpen) {\n recordFirstSectionCelebration(org, courseId, celebrations, dispatch);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\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
\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 { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\n\nimport { Xpert } from '@edx/frontend-lib-learning-assistant';\nimport { injectIntl } from '@edx/frontend-platform/i18n';\n\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\n\nconst Chat = ({\n enabled,\n enrollmentMode,\n isStaff,\n courseId,\n contentToolsEnabled,\n}) => {\n const VERIFIED_MODES = [\n 'professional',\n 'verified',\n 'no-id-professional',\n 'credit',\n 'masters',\n 'executive-education',\n 'paid-executive-education',\n 'paid-bootcamp',\n ];\n\n const AUDIT_MODES = [\n 'audit',\n 'honor',\n 'unpaid-executive-education',\n 'unpaid-bootcamp',\n ];\n\n const isEnrolled = (\n enrollmentMode !== null\n && enrollmentMode !== undefined\n && [...VERIFIED_MODES, ...AUDIT_MODES].some(mode => mode === enrollmentMode)\n );\n\n const shouldDisplayChat = (\n enabled\n && (isEnrolled || isStaff) // display only to enrolled or staff\n );\n\n // TODO: Remove this Segment alert. This has been added purely to diagnose whether\n // usage issues are as a result of the Xpert toggle button not appearing.\n if (shouldDisplayChat) {\n sendTrackEvent('edx.ui.lms.learning_assistant.render', {\n course_id: courseId,\n });\n }\n\n return (\n <>\n {/* Use a portal to ensure that component overlay does not compete with learning MFE styles. */}\n {shouldDisplayChat && (createPortal(\n \n achieve higher performance),\n }}\n />\n
\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};\n\nContentTools.propTypes = {\n course: PropTypes.shape({\n notes: PropTypes.shape({\n enabled: PropTypes.bool,\n }),\n showCalculator: PropTypes.bool,\n }).isRequired,\n};\n\nexport default ContentTools;\n","import ContentTools from './ContentTools';\n\nexport default ContentTools;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Dropdown } from '@edx/paragon';\n\nimport {\n sendTrackingLogEvent,\n sendTrackEvent,\n} from '@edx/frontend-platform/analytics';\nimport { useNavigate } from 'react-router-dom';\n\nconst JumpNavMenuItem = ({\n title,\n courseId,\n currentSequence,\n currentUnit,\n sequences,\n isDefault,\n onClick,\n}) => {\n const navigate = useNavigate();\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(e) {\n const url = destinationUrl();\n logEvent(url);\n navigate(url);\n if (onClick) { onClick(e); }\n }\n\n return (\n \n {course.showCalculator && (\n
\n \n
\n\n \n \n \n
\n);\n\nexport default CoursewareRedirectLandingPage;\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\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\nconst 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 {isSelfPaced && hasDeadlines && (\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\nconst 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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []); // deps=[] to only run once\n\n return (\n <>\n {description}
\n {intl.formatMessage(messages.unverifiedPendingBody)}
);\n } else {\n body = (\n\n
\n }\n footerNode={\n \n }\n />\n )}\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\nconst CourseCompletion = ({ intl }) => (\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\nconst 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\nconst 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\nconst 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\nconst 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\nconst 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 { 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\nconst DetailedGrades = ({ intl }) => {\n const { administrator } = getAuthenticatedUser();\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n org,\n tabs,\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 overviewTab = tabs.find(tab => tab.slug === 'outline');\n const overviewTabUrl = overviewTab && overviewTab.url;\n\n const outlineLink = overviewTabUrl && (\n {intl.formatMessage(messages.detailedGrades)}
\n {gradesFeatureIsPartiallyLocked && (\n\n
\n )}\n {hasSectionScores && (\n {intl.formatMessage(messages.detailedGradesEmpty)}
\n )}\n {overviewTabUrl && (\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\nconst 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\nconst 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}{isLocaleRtl && '\\u200f'}%
\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 { 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\nconst RelatedLinks = ({ intl }) => {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n org,\n tabs,\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 const overviewTab = tabs.find(tab => tab.slug === 'outline');\n const overviewTabUrl = overviewTab && overviewTab.url;\n const datesTab = tabs.find(tab => tab.slug === 'dates');\n const datesTabUrl = datesTab && datesTab.url;\n\n return (\n {pageTitle}
\n {administrator && studioUrl && (\n \n )}\n{intl.formatMessage(messages.relatedLinks)}
\n- \n {datesTabUrl && (\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\n useEffect(() => {\n async function getData() {\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 getData();\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 { Navigate, 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(' ') || location.pathname.includes('%20')) {\n const newLocation = {\n ...location,\n pathname: (location.pathname.replaceAll(' ', '+')).replaceAll('%20', '+'),\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 (