\n {children}\n
\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 \n {topicMessages.map(message => {\n const AlertComponent = getAlertComponent(message.code);\n return (\n \n remove(message.id)}\n payload={message.payload}\n {...customProps}\n >\n {message.text}\n \n \n );\n })}\n
\n );\n};\n\nAlertList.propTypes = {\n className: PropTypes.string,\n topic: PropTypes.string,\n customAlerts: PropTypes.objectOf(\n PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.func,\n PropTypes.node,\n ]),\n ),\n // eslint-disable-next-line react/forbid-prop-types\n customProps: PropTypes.object,\n};\n\nAlertList.defaultProps = {\n topic: null,\n className: null,\n customAlerts: {},\n customProps: {},\n};\n\nexport default AlertList;\n","/* eslint-disable import/prefer-default-export */\nimport { useContext, useEffect } from 'react';\nimport UserMessagesContext from './UserMessagesContext';\n\nexport function useAlert(isVisible, {\n code, text, topic, type, payload, dismissible,\n}) {\n const { add, remove } = useContext(UserMessagesContext);\n\n // Please note:\n // The deps list [isVisible, code, ... etc.] in this `useEffect` call prevents the\n // effect from running if none of deps have changed. However, \"changed\" for objects is\n // defined in terms of identity; thus, if you provide a payload that is *seemingly* equal\n // to the previous one but *actually* a different object, then this effect will run.\n // If you are particularly unlucky, this will cause an infinite re-render loop.\n // This manifested itself in TNL-7400.\n // We hope to address the underlying issue in TNL-7418.\n // In the mean time, you may follow the pattern that `useAccessExpirationAlert`\n // establishes: memoize the payload so that the exact same object is used if the\n // payload has not changed. And don't put values based off of now() in your payload, as\n // that breaks memoization.\n useEffect(() => {\n if (!isVisible) {\n return undefined;\n }\n\n const cleanupId = add({\n code, text, topic, type, payload, dismissible,\n });\n\n return () => {\n remove(cleanupId);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isVisible, code, text, topic, type, payload, dismissible]);\n}\n","// Helper, that is used to forcibly finalize all promises\n// in thunk before running matcher against state.\nexport const executeThunk = async (thunk, dispatch, getState) => {\n await thunk(dispatch, getState);\n await new Promise(setImmediate);\n};\n\n// Utility function for appending the browser timezone to the url\n// Can be used on the backend when the user timezone is not set in the user account\nexport const appendBrowserTimezoneToUrl = (url) => {\n const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n const urlObject = new URL(url);\n if (browserTimezone) {\n urlObject.searchParams.append('browser_timezone', browserTimezone);\n }\n return urlObject.href;\n};\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n certStatusEarnedNotAvailableHeader: {\n id: 'cert.alert.earned.unavailable.header.v2',\n defaultMessage: 'Your grade and certificate status will be available soon.',\n description: 'Header alerting the user that their certificate will be available soon.',\n },\n certStatusDownloadableHeader: {\n id: 'cert.alert.earned.ready.header',\n defaultMessage: 'Congratulations! Your certificate is ready.',\n description: 'Header alerting the user that their certificate is ready.',\n },\n certStatusNotPassingHeader: {\n id: 'cert.alert.notPassing.header',\n defaultMessage: 'You are not yet eligible for a certificate',\n },\n certStatusNotPassingButton: {\n id: 'cert.alert.notPassing.button',\n defaultMessage: 'View grades',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n FormattedDate,\n FormattedMessage,\n injectIntl,\n intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { Alert, Button } from '@edx/paragon';\nimport { useDispatch } from 'react-redux';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheckCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';\nimport { getConfig } from '@edx/frontend-platform';\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport certMessages from './messages';\nimport certStatusMessages from '../../../progress-tab/certificate-status/messages';\nimport { requestCert } from '../../../data/thunks';\n\nexport const CERT_STATUS_TYPE = {\n EARNED_NOT_AVAILABLE: 'earned_but_not_available',\n DOWNLOADABLE: 'downloadable',\n REQUESTING: 'requesting',\n UNVERIFIED: 'unverified',\n};\n\nconst CertificateStatusAlert = ({ intl, payload }) => {\n const dispatch = useDispatch();\n const {\n certificateAvailableDate,\n certStatus,\n courseEndDate,\n courseId,\n certURL,\n userTimezone,\n org,\n notPassingCourseEnded,\n tabs,\n } = payload;\n\n // eslint-disable-next-line react/prop-types\n const AlertWrapper = (props) => props.children(props);\n\n const sendAlertClickTracking = (id) => {\n const { administrator } = getAuthenticatedUser();\n sendTrackEvent(id, {\n org_key: org,\n courserun_key: courseId,\n is_staff: administrator,\n });\n };\n\n const renderCertAwardedStatus = () => {\n const alertProps = {\n variant: 'success',\n icon: faCheckCircle,\n iconClassName: 'alert-icon text-success-500',\n };\n if (certStatus === CERT_STATUS_TYPE.EARNED_NOT_AVAILABLE) {\n const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};\n const certificateAvailableDateFormatted = \n
\n
\n \n {header} \n {body}\n
\n {buttonVisible && (\n \n {\n if (buttonAction) { buttonAction(); }\n }}\n >\n {buttonMessage}\n \n
\n )}\n - \nexport 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 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\n\n\n {linkedTitle && (\n\n {dateBlock.description && (\n\n {dateBlock.title}\n\n )}\n {!linkedTitle && (\n{dateBlock.title}\n )}\n{dateBlock.description}\n )}\n {!linkedTitle && dateBlock.link && (\n \n );\n};\n\nDateSummary.propTypes = {\n dateBlock: PropTypes.shape({\n date: PropTypes.string.isRequired,\n dateType: PropTypes.string,\n description: PropTypes.string,\n link: PropTypes.string,\n linkText: PropTypes.string,\n title: PropTypes.string.isRequired,\n learnerHasAccess: PropTypes.bool,\n }).isRequired,\n userTimezone: PropTypes.string,\n};\n\nDateSummary.defaultProps = {\n userTimezone: null,\n};\n\nexport default DateSummary;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\n\nimport DateSummary from '../DateSummary';\nimport messages from '../messages';\nimport { useModel } from '../../../generic/model-store';\n\nconst CourseDates = ({\n intl,\n}) => {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n const {\n userTimezone,\n } = useModel('courseHomeMeta', courseId);\n const {\n datesWidget: {\n courseDateBlocks,\n datesTabLink,\n },\n } = useModel('outline', courseId);\n\n if (courseDateBlocks.length === 0) {\n return null;\n }\n\n return (\n - \n logClick(courseTool.analyticsId)}>\n
\n {courseTool.title}\n \n \n ))}\n - \n
\n \n - \n \n\n\n\n\n {complete ? (\n\n\n {displayTitle}\n \n , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}\n \n\n
\n \n \n {due ? dueDateMessage : noDueDateMessage}\n \n\n \n );\n};\n\nSequenceLink.propTypes = {\n id: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n courseId: PropTypes.string.isRequired,\n first: PropTypes.bool.isRequired,\n sequence: PropTypes.shape().isRequired,\n};\n\nexport default injectIntl(SequenceLink);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Collapsible, IconButton } from '@edx/paragon';\nimport { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';\nimport { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport SequenceLink from './SequenceLink';\nimport { useModel } from '../../generic/model-store';\n\nimport genericMessages from '../../generic/messages';\nimport messages from './messages';\n\nconst Section = ({\n courseId,\n defaultOpen,\n expand,\n intl,\n section,\n}) => {\n const {\n complete,\n sequenceIds,\n title,\n } = section;\n const {\n courseBlocks: {\n sequences,\n },\n } = useModel('outline', courseId);\n\n const [open, setOpen] = useState(defaultOpen);\n\n useEffect(() => {\n setOpen(expand);\n }, [expand]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const sectionTitle = (\n - \n
- \n {sequenceIds.map((sequenceId, index) => (\n
\n );\n};\n\nSection.propTypes = {\n courseId: PropTypes.string.isRequired,\n defaultOpen: PropTypes.bool.isRequired,\n expand: PropTypes.bool.isRequired,\n intl: intlShape.isRequired,\n section: PropTypes.shape().isRequired,\n};\n\nexport default injectIntl(Section);\n","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n suggestedSchedule: {\n id: 'datesBanner.suggestedSchedule',\n defaultMessage: 'We’ve built a suggested schedule to help you stay on track. But don’t worry—it’s flexible so you'\n + ' can learn at your own pace.',\n description: 'Messaging that explain the gaol and the effect fo the suggested schedule',\n },\n upgradeToCompleteHeader: {\n id: 'datesBanner.upgradeToCompleteGradedBanner.header',\n defaultMessage: 'Upgrade to unlock',\n description: 'Messaging that prompts users to upgrade their course status in order to access locked course content',\n },\n upgradeToCompleteBody: {\n id: 'datesBanner.upgradeToCompleteGradedBanner.body',\n defaultMessage: 'You are auditing this course, which means that you are unable to participate in graded'\n + ' assignments. To complete graded assignments as part of this course, you can upgrade today.',\n description: 'It explain the effect of upgrading the course',\n },\n upgradeToCompleteButton: {\n id: 'datesBanner.upgradeToCompleteGradedBanner.button',\n defaultMessage: 'Upgrade now',\n description: 'Button that prompts users to upgrade their course status',\n },\n upgradeToShiftBody: {\n id: 'datesBanner.upgradeToResetBanner.body',\n defaultMessage: 'To keep yourself on track, you can update this schedule and shift the past due assignments into'\n + ' the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates.',\n description: 'Text that explain the consequences of resetting dates when learner needs to upgrade to do so',\n },\n upgradeToShiftButton: {\n id: 'datesBanner.upgradeToResetBanner.button',\n defaultMessage: 'Upgrade to shift due dates',\n description: 'Button that prompts users to upgrade their course status before they can shift their due dates into'\n + ' the future',\n },\n missedDeadlines: {\n id: 'datesBanner.resetDatesBanner.header',\n defaultMessage: 'It looks like you missed some important deadlines based on our suggested schedule.',\n description: 'Text shown when leaner missed assignment due date',\n },\n shiftDatesBody: {\n id: 'datesBanner.resetDatesBanner.body',\n defaultMessage: 'To keep yourself on track, you can update this schedule and shift the past due assignments into'\n + ' the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates.',\n description: 'Text that explain the consequences of resetting dates',\n },\n shiftDatesButton: {\n id: 'datesBanner.resetDatesBanner.button',\n defaultMessage: 'Shift due dates',\n description: 'Button that prompts users to move their due dates into the future',\n },\n});\n\nexport default messages;\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n Alert,\n Button,\n Row,\n Col,\n} from '@edx/paragon';\n\nimport { resetDeadlines } from '../data';\nimport { useModel } from '../../generic/model-store';\nimport messages from './messages';\n\nconst ShiftDatesAlert = ({ fetch, intl, model }) => {\n const {\n courseId,\n } = useSelector(state => state.courseHome);\n\n const {\n datesBannerInfo,\n hasEnded,\n } = useModel(model, courseId);\n\n const {\n missedDeadlines,\n missedGatedContent,\n } = datesBannerInfo;\n\n const dispatch = useDispatch();\n\n if (!missedDeadlines || missedGatedContent || hasEnded) {\n return null;\n }\n\n return (\n - \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- 2520 \n
- 2/3 \n
- 3.14, .98 \n
- \n {' + - * / '}\n
- \n {'^ '}\n
- \n {'|| '}\n
- x+(2*y)/x-1 \n
- x^(n+1) \n
- v_IN+v_OUT \n
- 1||2 \n
- 20*e \n
- 418*pi \n
- 20% \n
- abs(x+y) \n
- sqrt(x^2-y) \n
- sin, cos, tan, sec, csc, cot \n
- arcsin, sinh, arcsinh \n
- sin(4x+y) \n
- arccsch(4x+y) \n
- / \n )}\n\n
- \n { getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff\n ? (\n
\n {content.map(item => (\n \n )}\n\n \n \n );\n};\nCourseBreadcrumb.propTypes = {\n content: PropTypes.arrayOf(\n PropTypes.shape({\n default: PropTypes.bool,\n id: PropTypes.string,\n label: PropTypes.string,\n }),\n ).isRequired,\n sequenceId: PropTypes.string,\n unitId: PropTypes.string,\n withSeparator: PropTypes.bool,\n courseId: PropTypes.string,\n isStaff: PropTypes.bool,\n};\n\nCourseBreadcrumb.defaultProps = {\n withSeparator: false,\n sequenceId: null,\n unitId: null,\n courseId: null,\n isStaff: null,\n};\n\nconst CourseBreadcrumbs = ({\n courseId,\n sectionId,\n sequenceId,\n unitId,\n isStaff,\n}) => {\n const course = useModel('coursewareMeta', courseId);\n const courseStatus = useSelector(state => state.courseware.courseStatus);\n const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);\n\n const allSequencesInSections = Object.fromEntries(useModels('sections', course.sectionIds).map(section => [section.id, {\n default: section.id === sectionId,\n title: section.title,\n sequences: useModels('sequences', section.sequenceIds),\n }]));\n\n const links = useMemo(() => {\n const chapters = [];\n const sequentials = [];\n if (courseStatus === 'loaded' && sequenceStatus === 'loaded') {\n Object.entries(allSequencesInSections).forEach(([id, section]) => {\n chapters.push({\n id,\n label: section.title,\n default: section.default,\n sequences: section.sequences,\n });\n if (section.default) {\n section.sequences.forEach(sequence => {\n sequentials.push({\n id: sequence.id,\n label: sequence.title,\n default: sequence.id === sequenceId,\n sequences: [sequence],\n });\n });\n }\n });\n }\n return [chapters, sequentials];\n }, [courseStatus, sequenceStatus, allSequencesInSections]);\n\n return (\n \n );\n};\n\nCourseBreadcrumbs.propTypes = {\n courseId: PropTypes.string.isRequired,\n sectionId: PropTypes.string,\n sequenceId: PropTypes.string,\n unitId: PropTypes.string,\n isStaff: PropTypes.bool,\n};\n\nCourseBreadcrumbs.defaultProps = {\n sectionId: null,\n sequenceId: null,\n unitId: null,\n isStaff: null,\n};\n\nexport default CourseBreadcrumbs;\n","import { breakpoints, useWindowSize } from '@edx/paragon';\nimport PropTypes from 'prop-types';\nimport React, {\n useEffect, useState, useMemo, useCallback,\n} from 'react';\n\nimport { getLocalStorage, setLocalStorage } from '../../../data/localStorage';\nimport { getSessionStorage } from '../../../data/sessionStorage';\nimport { useModel } from '../../../generic/model-store';\nimport SidebarContext from './SidebarContext';\nimport { SIDEBARS } from './sidebars';\n\nconst SidebarProvider = ({\n courseId,\n unitId,\n children,\n}) => {\n const { verifiedMode } = useModel('courseHomeMeta', courseId);\n const shouldDisplayFullScreen = useWindowSize().width < breakpoints.large.minWidth;\n const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.medium.minWidth;\n const showNotificationsOnLoad = getSessionStorage(`notificationTrayStatus.${courseId}`) !== 'closed';\n const query = new URLSearchParams(window.location.search);\n if (query.get('sidebar') === 'true') {\n localStorage.setItem('showDiscussionSidebar', true);\n }\n const showDiscussionSidebar = localStorage.getItem('showDiscussionSidebar') !== 'false';\n const showNotificationSidebar = (verifiedMode && shouldDisplaySidebarOpen && showNotificationsOnLoad)\n ? SIDEBARS.NOTIFICATIONS.ID\n : null;\n const initialSidebar = showDiscussionSidebar\n ? SIDEBARS.DISCUSSIONS.ID\n : showNotificationSidebar;\n const [currentSidebar, setCurrentSidebar] = useState(initialSidebar);\n const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`));\n const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(getLocalStorage(`upgradeNotificationCurrentState.${courseId}`));\n\n useEffect(() => {\n // As a one-off set initial sidebar if the verified mode data has just loaded\n if (verifiedMode && currentSidebar === null && initialSidebar) {\n setCurrentSidebar(initialSidebar);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [initialSidebar, verifiedMode]);\n\n const onNotificationSeen = useCallback(() => {\n setNotificationStatus('inactive');\n setLocalStorage(`notificationStatus.${courseId}`, 'inactive');\n }, [courseId]);\n\n const toggleSidebar = useCallback((sidebarId) => {\n // Switch to new sidebar or hide the current sidebar\n if (currentSidebar === SIDEBARS.DISCUSSIONS.ID) {\n localStorage.setItem('showDiscussionSidebar', false);\n } else if (sidebarId === SIDEBARS.DISCUSSIONS.ID) {\n localStorage.setItem('showDiscussionSidebar', true);\n }\n setCurrentSidebar(sidebarId === currentSidebar ? null : sidebarId);\n }, [currentSidebar]);\n\n const contextValue = useMemo(() => ({\n toggleSidebar,\n onNotificationSeen,\n setNotificationStatus,\n currentSidebar,\n notificationStatus,\n upgradeNotificationCurrentState,\n setUpgradeNotificationCurrentState,\n shouldDisplaySidebarOpen,\n shouldDisplayFullScreen,\n courseId,\n unitId,\n }), [courseId, currentSidebar, notificationStatus, onNotificationSeen, shouldDisplayFullScreen,\n shouldDisplaySidebarOpen, toggleSidebar, unitId, upgradeNotificationCurrentState]);\n\n return (\n - \n {/* Top Line */}\n {!first && }\n\n {/* Dot */}\n \n\n {/* Bottom Line */}\n {!last && }\n\n {/* Content */}\n \n\n\n\n {items.map((item) => {\n 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 - \n \n {parts.map((part, index) => (\n\n \n );\n }}\n />\n \n \n );\n}\n","export default __webpack_public_path__ + \"fc384c72147d609d170efcc12e2e104d.png\";","export default __webpack_public_path__ + \"ef947f393077c4f611cc7afa42a92caf.png\";","export default __webpack_public_path__ + \"b1156c3f33743c6586a00d7fbbeeb16f.png\";","export default __webpack_public_path__ + \"d33dadffaa079b102502ae8ecc97b230.png\";","export default __webpack_public_path__ + \"21e8c991fb800ba8ed29691bdfe6a13e.png\";","export default __webpack_public_path__ + \"6607a5067c35a8ccb84aebf620c281a7.png\";","export default __webpack_public_path__ + \"e0eafd7860933e395d683b516f31666c.png\";","export default __webpack_public_path__ + \"eccbae9645d4a8f5182d9e7f95ebe375.png\";","import React, { useContext, useEffect, useState } from 'react';\nimport logo from '../../public/assets/carerha-logo-light.png';\nimport CourseImage from '../../public/assets/carbon_course.png';\nimport HomeImage from '../../public/assets/home_3_line.png';\nimport programImage from '../../public/assets/home_3_line (1).png';\nimport EventsImage from '../../public/assets/home_3_line (2).png';\nimport CommunityImage from '../../public/assets/carbon_events.png';\nimport { Link } from 'react-router-dom';\nimport { Button } from '@edx/paragon';\nimport {\n Menu,\n MenuItem,\n IconButton,\n} from '@mui/material';\nimport {\n Menu as MenuIcon,\n} from '@mui/icons-material';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport profileImage from '../../public/assets/profile.png';\nimport down from '../../public/assets/down-solid.png';\nimport { getConfig } from '@edx/frontend-platform';\nimport cartImage from '../../public/assets/cart.png';\n\nfunction MobileHeader() {\n const [anchorEl, setAnchorEl] = useState(null);\n const [subMenuOpen, setSubMenuOpen] = useState([false, false, false, false, false]); // Array to track submenu open/close state\n const [scrollBackground, setScrollBackground] = useState(false);\n var _useContext = useContext(AppContext),\n authenticatedUser = _useContext?.authenticatedUser;\n\n const handleMenuClick = (event, index) => {\n setAnchorEl(event.currentTarget);\n setSubMenuOpen(prevState => prevState.map((value, idx) => idx === index ? !value : false)); // Toggle the state of the clicked submenu\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n setSubMenuOpen(prevState => prevState.map(() => false)); // Close all submenus when menu is closed\n };\n\n const handleScroll = () => {\n const scrollPosition = window.scrollY;\n // Change the threshold as needed\n const threshold = 100;\n\n if (scrollPosition > threshold) {\n setScrollBackground(true);\n } else {\n setScrollBackground(false);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll);\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, []);\n\n return (\n
- \n Login\n \n \n
- \n \n {parts.map((part, index) => (\n\n \n );\n }}\n />\n
- \n \n\n\n
\n {location?.location_text}\n \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 {intl.formatMessage(messages.dates)}
\n- \n {courseDateBlocks.map((courseDateBlock) => (\n
{intl.formatMessage(messages.handouts)}
\n\n logResumeCourseClick()}\n >\n {hasVisitedCourse ? intl.formatMessage(messages.resume) : intl.formatMessage(messages.start)}\n \n )}\n />\n {/* Footer is needed for internal vertical spacing to work out. If you can remove, be my guest */}\n {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n <> \n
\n );\n};\n\nStartOrResumeCourseCard.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(StartOrResumeCourseCard);\n","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nconst SvgFlagBlack = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 24,\n height: 24,\n fill: \"none\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#000\",\n d: \"M14.4 6 14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6Z\"\n})));\nexport { SvgFlagBlack as ReactComponent };\nexport default __webpack_public_path__ + \"618c66f2320092cb2a787c07147f7146.svg\";","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nconst SvgFlagOutline = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 15,\n height: 17,\n fill: \"none\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#002B2B\",\n d: \"M9.4 2 9 0H0v17h2v-7h5.6l.4 2h7V2H9.4Zm3.6 8H9.64l-.4-2H2V2h5.36l.4 2H13v6Z\"\n})));\nexport { SvgFlagOutline as ReactComponent };\nexport default __webpack_public_path__ + \"5615c2010dc4523a5ca27285b35e4266.svg\";","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nconst SvgFlagGray = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 15,\n height: 17,\n fill: \"none\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#002B2B\",\n d: \"M9.4 2 9 0H0v17h2v-7h5.6l.4 2h7V2H9.4Zm3.6 8H9.64l-.4-2H2V2h5.36l.4 2H13v6Z\"\n})), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.66 9.987c-.002-.004-.095-.456-.206-1.004l-.202-.996-3.614-.008-3.615-.008V2.023l2.664.007 2.663.008.197.99.197.988h5.24v5.979h-1.66c-.914 0-1.663-.004-1.665-.008z\",\n style: {\n fill: \"gray\",\n fillRule: \"evenodd\",\n strokeWidth: 0.0150977\n }\n}));\nexport { SvgFlagGray as ReactComponent };\nexport default __webpack_public_path__ + \"cb5894908f8fdcc54d5d94bed8c3b7c9.svg\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nconst FlagButton = ({\n buttonIcon,\n title,\n text,\n handleSelect,\n isSelected,\n}) => (\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
\n );\n\n return (\n \n {complete ? (\n
\n \n {title}\n \n , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}\n \n
\n - \n
- \n
\n
\n );\n};\n\nUpsellFBESoonCardContent.propTypes = {\n accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,\n timezoneFormatArgs: PropTypes.shape({\n timeZone: PropTypes.string,\n }),\n};\n\nUpsellFBESoonCardContent.defaultProps = {\n timezoneFormatArgs: {},\n};\n\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\";","import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n applyForCredit: {\n id: 'courseExit.programs.applyForCredit',\n defaultMessage: 'Apply for credit',\n description: 'Button for the learner to apply for course credit',\n },\n certificateHeaderDownloadable: {\n id: 'courseCelebration.certificateHeader.downloadable',\n defaultMessage: 'Your certificate is available!',\n description: 'Text displayed when course certificate is ready to be downloaded',\n },\n certificateHeaderNotAvailable: {\n id: 'courseCelebration.certificateHeader.notAvailable',\n defaultMessage: 'Your grade and certificate status will be available soon.',\n description: 'Header displayed when course certificate is not yet available to be viewed',\n },\n certificateNotAvailableBodyAccessCert: {\n id: 'courseCelebration.certificateBody.notAvailable.accessCertificate',\n defaultMessage: 'If you have earned a passing grade, your certificate will be automatically issued.',\n description: 'Text displayed when course certificate is not yet available to be viewed',\n },\n certificateNotAvailableEndDateBody: {\n id: 'courseCelebration.certificateBody.notAvailable.endDate',\n defaultMessage: 'Final grades and any earned certificates are scheduled to be available after {endDate}.',\n description: 'Shown for learners who have finished a course before grades and certificates are available.',\n },\n certificateHeaderUnverified: {\n id: 'courseCelebration.certificateHeader.unverified',\n defaultMessage: 'You must complete verification to receive your certificate.',\n description: 'Text displayed when a user has not verified their identity and cannot view their course certificate',\n },\n certificateHeaderRequestable: {\n id: 'courseCelebration.certificateHeader.requestable',\n defaultMessage: 'Congratulations, you qualified for a certificate!',\n description: 'Text displayed when a user has completed the course and can request a certificate',\n },\n certificateHeaderUpgradable: {\n id: 'courseCelebration.certificateHeader.upgradable',\n defaultMessage: 'Upgrade to pursue a verified certificate',\n description: 'Header when learner finished or pass the course but need to upgrade to get a certificate',\n },\n certificateImage: {\n id: 'courseCelebration.certificateImage',\n defaultMessage: 'Sample certificate',\n description: 'Alt text used to describe an image of a certificate',\n },\n completedCourseHeader: {\n id: 'courseCelebration.completedCourseHeader',\n defaultMessage: 'You have completed your course.',\n description: 'Header text for course exit section',\n },\n congratulationsHeader: {\n id: 'courseCelebration.congratulationsHeader',\n defaultMessage: 'Congratulations!',\n description: 'Greeting learner for finishing the course',\n },\n congratulationsImage: {\n id: 'courseCelebration.congratulationsImage',\n defaultMessage: 'Four people raising their hands in celebration',\n description: 'Alt text used to describe celebratory image',\n },\n courseInProgressDescription: {\n id: 'courseExit.courseInProgressDescription',\n defaultMessage: 'It looks like there is more content in this course that will be released in the future. Look out for email updates or check back on your course for when this content will be available.',\n description: 'Shown to learner when they finish all available assignments, but not the whole course',\n },\n courseInProgressHeader: {\n id: 'courseExit.courseInProgressHeader',\n defaultMessage: 'More content is coming soon!',\n description: 'Header when the status of the course not all of (contents or assignments) available yet',\n },\n dashboardLink: {\n id: 'courseExit.dashboardLink',\n defaultMessage: 'Dashboard',\n description: 'Link to user’s dashboard',\n },\n endOfCourseDescription: {\n id: 'courseExit.endOfCourseDescription',\n defaultMessage: 'Unfortunately, you are not currently eligible for a certificate. You need to receive a passing grade to be eligible for a certificate.',\n description: 'Shown to learner when they did not pass the course',\n },\n endOfCourseHeader: {\n id: 'courseExit.endOfCourseHeader',\n defaultMessage: 'You’ve reached the end of the course!',\n },\n endOfCourseTitle: {\n id: 'courseExit.endOfCourseTitle',\n defaultMessage: 'End of Course',\n },\n idVerificationSupportLink: {\n id: 'courseExit.idVerificationSupportLink',\n defaultMessage: 'Learn more about ID verification',\n description: 'Link to an article about identity verification',\n },\n linkedinAddToProfileButton: {\n id: 'courseCelebration.linkedinAddToProfileButton',\n defaultMessage: 'Add to LinkedIn profile',\n description: 'Button to add certificate information to the user’s LinkedIn profile',\n },\n microBachelorsLearnMore: {\n id: 'courseExit.programs.microBachelors.learnMore',\n defaultMessage: 'Learn more about how your MicroBachelors credential can be applied for credit.',\n },\n microMastersLearnMore: {\n id: 'courseExit.programs.microMasters.learnMore',\n defaultMessage: 'Learn more about the process of applying MicroMasters certificates to Master’s degrees.',\n },\n microMastersMessage: {\n id: 'courseExit.programs.microMasters.mastersMessage',\n defaultMessage: 'If you’re interested in using your MicroMasters certificate towards a Master’s program, you can get started today!',\n },\n nextButtonComplete: {\n id: 'learn.sequence.navigation.complete.button', // for historical reasons\n defaultMessage: 'Complete the course',\n description: 'This text is shown on the button which usually links to the next unit or assignment in course sequence, however when it is the last unit. The button will link to course exit page',\n },\n nextButtonEnd: {\n id: 'courseExit.nextButton.endOfCourse',\n defaultMessage: 'Next (end of course)',\n description: 'This shown for the button which links to the next unit, when learner did not pass the course',\n },\n profileLink: {\n id: 'courseExit.profileLink',\n defaultMessage: 'Profile',\n description: 'Link to user’s profile',\n },\n programsLastCourseHeader: {\n id: 'courseExit.programs.lastCourse',\n defaultMessage: 'You have completed the last course in {title}!',\n description: 'This shown to learner when the course they completed is the last one of a program, the program might be mircomaster, or microbachelors...etc',\n },\n requestCertificateBodyText: {\n id: 'courseCelebration.requestCertificateBodyText',\n defaultMessage: 'In order to access your certificate, request it below.',\n description: 'Shown when learner need to request the certifcate',\n },\n requestCertificateButton: {\n id: 'courseCelebration.requestCertificateButton',\n defaultMessage: 'Request certificate',\n description: 'Button to request the course certificate',\n },\n searchOurCatalogLink: {\n id: 'courseExit.searchOurCatalogLink',\n defaultMessage: 'Search our catalog',\n description: 'First part of a sentence that continues afterward',\n },\n shareMessage: {\n id: 'courseCelebration.shareMessage',\n defaultMessage: 'Share your success on social media or email.',\n description: 'Recommending an action when learner pass the course',\n },\n socialMessage: {\n id: 'courseExit.social.shareCompletionMessage',\n defaultMessage: 'I just completed {title} with {platform}!',\n description: 'Shown when sharing course progress on a social network',\n },\n upgradeButton: {\n id: 'courseExit.upgradeButton',\n defaultMessage: 'Upgrade now',\n },\n upgradeLink: {\n id: 'courseExit.upgradeLink',\n defaultMessage: 'upgrade now',\n },\n verificationPending: {\n id: 'courseCelebration.verificationPending',\n defaultMessage: 'Your ID verification is pending and your certificate will be available once approved.',\n description: 'Shown when the status of verification is pending',\n },\n verifiedCertificateSupportLink: {\n id: 'courseExit.verifiedCertificateSupportLink',\n defaultMessage: 'Learn more about verified certificates',\n description: 'Anchor text for link that redirect to external help page about verified certificates',\n },\n verifyIdentityButton: {\n id: 'courseCelebration.verifyIdentityButton',\n defaultMessage: 'Verify ID now',\n description: 'Button to verify the identify of the user',\n },\n viewCertificateButton: {\n id: 'courseCelebration.viewCertificateButton',\n defaultMessage: 'View my certificate',\n description: 'Button to view the course certificate',\n },\n viewCourseScheduleButton: {\n id: 'courseExit.viewCourseScheduleButton',\n defaultMessage: 'View course schedule',\n description: 'Button to view the course schedule',\n },\n viewCoursesButton: {\n id: 'courseExit.viewCoursesButton',\n defaultMessage: 'View my courses',\n description: 'Button to redirect user to their course dashboard',\n },\n viewGradesButton: {\n id: 'courseExit.viewGradesButton',\n defaultMessage: 'View grades',\n },\n\n});\n\nexport default messages;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Alert, Button, Hyperlink } from '@edx/paragon';\nimport certImage from '../../../generic/assets/edX_certificate.png';\nimport messages from './messages';\n\n/**\n * Note for Open edX developers:\n * There are pieces of this component that are hard-coded and specific to edX that may not apply to your organization.\n * This includes mentions of our edX program types (MicroMasters, MicroBachelors, Professional Certificate, and\n * XSeries), along with their respective support article URLs and image variable names.\n *\n * Currently, this component will not render unless the learner's completed course has a related program of one of the\n * four aforementioned types. This will not impact the parent components (i.e. CourseCelebration will render normally).\n */\n\nconst programTypes = ['microbachelors', 'micromasters', 'professional-certificate', 'xseries'];\n\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","import React from 'react';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { getConfig } from '@edx/frontend-platform';\nimport { Hyperlink } from '@edx/paragon';\n\nimport messages from '../courseware/course/course-exit/messages';\n\nconst IntlDashboardLink = ({ intl }) => (\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 } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faLinkedinIn } from '@fortawesome/free-brands-svg-icons';\n\nimport {\n FormattedDate, FormattedMessage, injectIntl, intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { Helmet } from 'react-helmet';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Alert,\n breakpoints,\n Button,\n Hyperlink,\n useWindowSize,\n} from '@edx/paragon';\nimport { CheckCircle } from '@edx/paragon/icons';\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\n\nimport CelebrationMobile from './assets/celebration_456x328.gif';\nimport CelebrationDesktop from './assets/celebration_750x540.gif';\nimport certificate from '../../../generic/assets/edX_certificate.png';\nimport certificateLocked from '../../../generic/assets/edX_locked_certificate.png';\nimport { FormattedPricing } from '../../../generic/upgrade-button';\nimport messages from './messages';\nimport { useModel } from '../../../generic/model-store';\nimport { requestCert } from '../../../course-home/data/thunks';\nimport ProgramCompletion from './ProgramCompletion';\nimport DashboardFootnote from './DashboardFootnote';\nimport UpgradeFootnote from './UpgradeFootnote';\nimport SocialIcons from '../../social-share/SocialIcons';\nimport { logClick, logVisit } from './utils';\nimport { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';\nimport CourseRecommendations from './CourseRecommendations';\n\nconst LINKEDIN_BLUE = '#2867B2';\n\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 // todo: check for idVerificationSupportLink null\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 \n );\n};\n\nCourseCelebration.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseCelebration);\n","import React, { useEffect } from 'react';\n\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Helmet } from 'react-helmet';\nimport { useSelector } from 'react-redux';\nimport { Alert, Button } from '@edx/paragon';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport CatalogSuggestion from './CatalogSuggestion';\nimport DashboardFootnote from './DashboardFootnote';\nimport messages from './messages';\nimport { logClick, logVisit } from './utils';\n\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 {intl.formatMessage(messages.congratulationsHeader)}\n
\n \n {intl.formatMessage(messages.completedCourseHeader)}\n {marketingUrl && ` ${intl.formatMessage(messages.shareMessage)}`}\n
\n \n {!wideScreen && (\n
\n \n {certHeader && (\n \n \n )}\n {relatedPrograms && relatedPrograms.map(program => (\n
\n \n
\n \n
\n {certStatus !== 'unverified' && (\n {certHeader}
\n {message}\n \n {buttonPrefix}\n {buttonLocation && (\n logClick(org, courseId, administrator, buttonEvent)}\n >\n {buttonText}\n \n )}\n {buttonSuffix}\n
\n \n
\n )}\n \n \n \n
\n \n );\n};\n\nCourseInProgress.propTypes = {\n intl: intlShape.isRequired,\n};\n\nexport default injectIntl(CourseInProgress);\n","import React, { useEffect } from 'react';\n\nimport { getAuthenticatedUser } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Helmet } from 'react-helmet';\nimport { useSelector } from 'react-redux';\nimport { Alert, Button } from '@edx/paragon';\nimport { getConfig } from '@edx/frontend-platform';\n\nimport { useModel } from '../../../generic/model-store';\n\nimport CatalogSuggestion from './CatalogSuggestion';\nimport DashboardFootnote from './DashboardFootnote';\nimport messages from './messages';\nimport { logClick, logVisit } from './utils';\n\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 { Redirect } from 'react-router-dom';\n\nimport CourseCelebration from './CourseCelebration';\nimport CourseInProgress from './CourseInProgress';\nimport CourseNonPassing from './CourseNonPassing';\nimport { COURSE_EXIT_MODES, getCourseExitMode } from './utils';\nimport messages from './messages';\nimport { unsubscribeFromGoalReminders } from './data/thunks';\n\nimport { useModel } from '../../../generic/model-store';\n\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\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 } = props;\n\n const { courseId: courseIdFromUrl } = useParams();\n const dispatch = useDispatch();\n useEffect(() => {\n // The courseId from the URL is the course we WANT to load.\n dispatch(fetch(courseIdFromUrl));\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [courseIdFromUrl]);\n\n // The courseId from the store is the course we HAVE loaded. If the URL changes,\n // we don't want the application to adjust to it until it has actually loaded the new data.\n const {\n courseId,\n courseStatus,\n } = useSelector(state => state[slice]);\n\n return (\n\n //
\n <>\n );\n\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 { 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 } 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 topic = useModel('discussionTopics', unitId);\n const baseUrl = getConfig().DISCUSSIONS_MFE_BASE_URL;\n\n useEffect(() => {\n // Only fetch the topic data if the MFE is configured.\n if (baseUrl) {\n dispatch(getCourseDiscussionTopics(courseId));\n }\n // 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\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 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 goToCourseExitPage,\n}) => {\n const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);\n const { courseId } = useSelector(state => state.courseware);\n\n const renderNextButton = () => {\n const { exitActive, exitText } = GetCourseExitNavigation(courseId, intl);\n const buttonOnClick = isLastUnit ? goToCourseExitPage : onClickNext;\n const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);\n const disabled = isLastUnit && !exitActive;\n const nextArrow = isRtl(getLocale()) ? faChevronLeft : faChevronRight;\n return (\n \n \n
\n );\n};\n\nUnitNavigation.propTypes = {\n intl: intlShape.isRequired,\n sequenceId: PropTypes.string.isRequired,\n unitId: PropTypes.string,\n onClickPrevious: PropTypes.func.isRequired,\n onClickNext: PropTypes.func.isRequired,\n goToCourseExitPage: PropTypes.func.isRequired,\n};\n\nUnitNavigation.defaultProps = {\n unitId: null,\n};\n\nexport default injectIntl(UnitNavigation);\n","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faBookmark } from '@fortawesome/free-regular-svg-icons';\n\nconst BookmarkOutlineIcon = (props) => \n \n {modalOptions.body\n ?
\n );\n};\n\nUnit.propTypes = {\n courseId: PropTypes.string.isRequired,\n format: PropTypes.string,\n id: PropTypes.string.isRequired,\n intl: intlShape.isRequired,\n onLoaded: PropTypes.func,\n};\n\nUnit.defaultProps = {\n format: null,\n onLoaded: undefined,\n};\n\nexport default injectIntl(Unit);\n","import React, { Suspense, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport PageLoading from '../../../generic/PageLoading';\nimport { useModel } from '../../../generic/model-store';\n\nimport messages from './messages';\nimport Unit from './Unit';\n\nconst ContentLock = React.lazy(() => import('./content-lock'));\n\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{intl.formatMessage(messages.headerPlaceholder)}
\n{ modalOptions.body }
\n : (\n \n {\n // onLoad *should* only fire after everything in the iframe has finished its own load events.\n // Which means that the plugin.resize message (which calls setHasLoaded above) will have fired already\n // for a successful load. If it *has not fired*, we are in an error state. For example, the backend\n // could have given us a 4xx or 5xx response.\n if (!hasLoaded) {\n setShowError(true);\n }\n\n window.onmessage = (e) => {\n if (e.data.event_name) {\n dispatch(processEvent(e.data, fetchCourse));\n }\n };\n }}\n />\n
\n )}\n \n {intl.formatMessage(messages.noContent)}\n
\n );\n }\n\n return (\n {intl.formatMessage(messages.noContent)}
);\n }\n return (\n \n
\n );\n\n if (sequenceStatus === 'loaded') {\n return (\n \n {\n logEvent('edx.ui.lms.sequence.next_selected', 'top');\n handleNext();\n }}\n onNavigate={(destinationUnitId) => {\n logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);\n handleNavigate(destinationUnitId);\n }}\n previousSequenceHandler={() => {\n logEvent('edx.ui.lms.sequence.previous_selected', 'top');\n handlePrevious();\n }}\n goToCourseExitPage={() => goToCourseExitPage()}\n />\n {shouldDisplayNotificationTriggerInSequence &&
\n \n {\n logEvent('edx.ui.lms.sequence.previous_selected', 'bottom');\n handlePrevious();\n }}\n onClickNext={() => {\n logEvent('edx.ui.lms.sequence.next_selected', 'bottom');\n handleNext();\n }}\n goToCourseExitPage={() => goToCourseExitPage()}\n />\n )}\n
\n \n \n {defaultContent}\n \n
\n );\n }\n\n // sequence status 'failed' and any other unexpected sequence status.\n return (\n \n {intl.formatMessage(messages.loadFailure)}\n
\n );\n};\n\nSequence.propTypes = {\n unitId: PropTypes.string,\n sequenceId: PropTypes.string,\n courseId: PropTypes.string.isRequired,\n unitNavigationHandler: PropTypes.func.isRequired,\n nextSequenceHandler: PropTypes.func.isRequired,\n previousSequenceHandler: PropTypes.func.isRequired,\n intl: intlShape.isRequired,\n};\n\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 { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n 'calculator.button.label': {\n id: 'calculator.button.label',\n defaultMessage: 'Calculator',\n description: 'Button label to expand or close the calculator',\n },\n 'calculator.input.field.label': {\n id: 'calculator.input.field.label',\n defaultMessage: 'Calculator Input',\n description: 'label for calculator input',\n },\n 'calculator.submit.button.label': {\n id: 'calculator.submit.button.label',\n defaultMessage: 'Calculate',\n description: 'Submit button label to execute the calculator',\n },\n 'calculator.result.field.label': {\n id: 'calculator.result.field.label',\n defaultMessage: 'Calculator Result',\n description: 'label for calculator result',\n },\n 'calculator.result.field.placeholder': {\n id: 'calculator.result.field.placeholder',\n defaultMessage: 'Result',\n description: 'placeholder for calculator result',\n },\n});\n\nexport default messages;\n","import React, { Component } from 'react';\nimport { Collapsible } from '@edx/paragon';\nimport { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport {\n FormattedMessage, injectIntl, intlShape,\n} from '@edx/frontend-platform/i18n';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faCalculator, faQuestionCircle, faTimesCircle, faEquals,\n} from '@fortawesome/free-solid-svg-icons';\nimport messages from './messages';\n\nclass Calculator extends Component {\n constructor(props) {\n super(props);\n this.state = {\n equation: '',\n result: '',\n };\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n async handleSubmit(event) {\n event.preventDefault();\n event.stopPropagation();\n const urlEncoded = new URLSearchParams();\n urlEncoded.append('equation', this.state.equation);\n\n const response = await getAuthenticatedHttpClient().get(\n `${getConfig().LMS_BASE_URL}/calculate?${urlEncoded.toString()}`,\n );\n this.setState(() => ({ result: response.data.result }));\n }\n\n changeEquation(value) {\n this.setState(() => ({ equation: value }));\n }\n\n render() {\n return (\n \n 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\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 { history } from '@edx/frontend-platform';\nimport { MenuItem } from '@edx/paragon';\n\nimport {\n sendTrackingLogEvent,\n sendTrackEvent,\n} from '@edx/frontend-platform/analytics';\n\nconst JumpNavMenuItem = ({\n title,\n courseId,\n currentSequence,\n currentUnit,\n sequences,\n isDefault,\n}) => {\n function logEvent(targetUrl) {\n const eventName = 'edx.ui.lms.jump_nav.selected';\n const payload = {\n target_name: title,\n id: targetUrl,\n current_id: courseId,\n widget_placement: 'breadcrumb',\n };\n sendTrackEvent(eventName, payload);\n sendTrackingLogEvent(eventName, payload);\n }\n\n function destinationUrl() {\n if (isDefault) {\n return `/course/${courseId}/${currentSequence}/${currentUnit}`;\n }\n return `/course/${courseId}/${sequences[0].id}`;\n }\n function handleClick() {\n const url = destinationUrl();\n logEvent(url);\n history.push(url);\n }\n\n return (\n \n {course.showCalculator && (\n
\n \n
\n\n \n \n {\n global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/survey`);\n }}\n />\n {\n global.location.assign(`http://apps.local.overhang.io:2000/learning/mycourses${location.search}`);\n }}\n />\n {\n const { consentPath } = queryString.parse(location.search);\n global.location.assign(`${getConfig().LMS_BASE_URL}${consentPath}`);\n }}\n />\n {\n global.location.assign(`/course/${match.params.courseId}/home`);\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 {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 { Redirect, useLocation } from 'react-router-dom';\nimport PropTypes from 'prop-types';\n\nimport { sendTrackEvent } from '@edx/frontend-platform/analytics';\n\n/**\n * We have seen evidence of learners hitting MFE pages with spaces instead of plus signs (which are used commonly\n * in our course keys). It's possible something out there is un-escaping our paths before sending learners to them.\n *\n * So this provider fixes those paths up and logs it so that we can try to fix the source.\n *\n * This might be temporary, based on how much we can fix the sources of these urls-with-spaces.\n */\nconst PathFixesProvider = ({ children }) => {\n const location = useLocation();\n\n // We only check for spaces. That's not the only kind of character that is escaped in URLs, but it would always be\n // present for our cases, and I believe it's the only one we use normally.\n if (location.pathname.includes(' ')) {\n const newLocation = {\n ...location,\n pathname: location.pathname.replaceAll(' ', '+'),\n };\n\n sendTrackEvent('edx.ui.lms.path_fixed', {\n new_path: newLocation.pathname,\n old_path: location.pathname,\n referrer: document.referrer,\n search: location.search,\n });\n\n return (\n \n Currently Learning }>\n {isLoadingCourses ? (\n \n Completed}>\n {isLoadingCourses ? (\n \n \n
\n \n );\n}\n\nexport default MyCourses;\n","import { useEffect, useState } from 'react';\nimport { useModel } from '../generic/model-store';\n\nconst UseCertificateUrls = (courseIds) => {\n const [certificateUrls, setCertificateUrls] = useState({});\n\n useEffect(() => {\n const fetchCertificateUrls = async () => {\n const newCertificateUrls = {};\n for (const courseId of courseIds) {\n const { certificateData } = useModel('coursewareMeta', courseId);\n const { certWebViewUrl } = certificateData || {};\n if (certWebViewUrl) {\n newCertificateUrls[courseId] = certWebViewUrl;\n }\n }\n setCertificateUrls(newCertificateUrls);\n };\n\n fetchCertificateUrls();\n }, [courseIds]);\n\n return certificateUrls;\n};\n\nexport default UseCertificateUrls;\n","import React, { useEffect, useState } from 'react';\nimport { Button, Card, Icon, breakpoints, useMediaQuery } from '@edx/paragon';\nimport './CourseCard.css';\nimport { OnlinePrediction } from '@edx/paragon/icons';\nimport { AccessTime } from '@edx/paragon/icons';\nimport { BarChart } from '@edx/paragon/icons';\nimport { postCourseEnrollment } from '../../alerts/enrollment-alert/data/api';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport { getConfig } from '@edx/frontend-platform';\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\n\nfunction CourseCard(props) {\n const [coursesEnrollment, setCoursesEnrollment] = useState([]);\n const isCourseEnrolled = coursesEnrollment.some(course => course.course_details.course_id === props.courseId);\n // console.log('props.modes', props.modes.sku)\n\n const fetchEnrollmentData = async () => {\n try {\n const enrollmentResponse = await getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`);\n const coursesData = enrollmentResponse.data;\n setCoursesEnrollment(coursesData);\n // console.log('first', coursesData)\n } catch (error) {\n console.error('Error fetching enrollment data:', error);\n }\n };\n\n useEffect(() => {\n fetchEnrollmentData();\n }, []);\n\n const handleEnrollClick = async (event) => {\n event.preventDefault();\n try {\n if (props.modes.bulk_sku) {\n // Redirect to the other link if bulk_sku has a value\n window.location.href = `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=${props.modes.sku}`; // Replace with the actual link\n } else {\n await postCourseEnrollment(props.courseId);\n // Redirect to my courses if bulk_sku is null\n window.location.href = 'https://apps.carerha.com/learning/mycourses';\n }\n } catch (error) {\n if (error.response && error.response.status === 401) {\n // Redirect to login page if the error status is 401 (Unauthorized)\n window.location.href = 'https://apps.carerha.com/authn/login';\n } else {\n console.error('Error enrolling in the course:', error);\n }\n }\n };\n\n const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n let backgroundColor;\n let border;\n\n if (props.level === \"Advanced\") {\n backgroundColor = 'rgba(192, 0, 0, 0.74)';\n border = \"1px solid rgba(192, 0, 0, 0.74)\";\n } else if (props.level === \"Beginner\") {\n backgroundColor = '#92D050';\n border = \"1px solid #92D050\";\n } else if (props.level === 'Intermediate') {\n backgroundColor = '#FFC000';\n border = \"1px solid #FFC000\";\n } else {\n backgroundColor = '#FFC000';\n border = \"1px solid #FFC000\";\n }\n\n const cardStyle = {\n backgroundColor: backgroundColor,\n border: border,\n };\n\n return (\n \n
\n \n
\n My Courses
\nLoading...
\n ) : currentlyLearningCourses.length > 0 ? (\n <>\n {currentlyLearningCourses.map((course, index) => {\n const getProgress = Math.round(\n ((course.courseProgress?.completion_summary?.complete_count || 0) /\n ((course.courseProgress?.completion_summary?.incomplete_count || 0) +\n (course.courseProgress?.completion_summary?.complete_count || 0))) * 100\n );\n const averageRating = averageRatings[course?.course_details?.course_id] || 0;\n const courseId = course.course_details?.course_id;\n return (\n \n
\n );\n })}\n \n ) : (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {course.course_details?.course_name || \"No course name\"}\n
\n\n
\n \n {course?.course_details?.learning_experience}\n
\n \n {course?.course_details?.level}\n
\n \n {course?.courseProgress?.sectionScores?.length || 0} Sessions\n
\n \n
\n \n
\n \n {getProgress} %\n
\n \n handleCloseDialog(courseId)}\n footerNode={\n \n \n }\n >\n \n {submitMessage}\n \n )}\n \n\n {getProgress === 0 ?\n \n :\n \n }\n
\n \n handleOpenDialog(courseId)}\n >\n Leave a Rating\n \n \n {averageRating.toFixed(1)} /5 \n \n
\n\n \n How Would You Rate This Course?\n
\n\n
\n Select Rating?
\n\n {\n setValueRate(newValue);\n }}\n />\n
\n \n
\n {submitMessage && (\n Add Your Review
\n\n
\n )}\n You don't have any current courses
\n \nLoading...
\n ) : completedCourses.length > 0 ? (\n <>\n {completedCourses.map((course, index) => {\n const getProgress = Math.round(\n ((course.courseProgress?.completion_summary?.complete_count || 0) /\n ((course.courseProgress?.completion_summary?.incomplete_count || 0) +\n (course.courseProgress?.completion_summary?.complete_count || 0))) * 100\n );\n const averageRating = averageRatings[course?.course_details?.course_id] || 0;\n const courseId = course.course_details?.course_id;\n const certificateUrl = certificateUrls[courseId];\n return (\n \n
\n );\n })}\n \n ) : (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {course.course_details?.course_name || \"No course name\"}\n
\n\n
\n \n {course?.course_details?.learning_experience}\n
\n \n {course?.course_details?.level}\n
\n \n {course?.courseProgress?.sectionScores?.length || 0} Sessions\n
\n \n
\n \n
\n \n {getProgress} %\n
\n \n handleCloseDialog(courseId)}\n footerNode={\n \n \n }\n >\n \n {submitMessage}\n \n )}\n \n\n {certificateUrl ? (\n \n ) : (\n \n )}\n
\n \n handleOpenDialog(courseId)}\n >\n Leave a Rating\n \n \n {averageRating.toFixed(1)} /5 \n \n
\n\n \n How Would You Rate This Course?\n
\n\n
\n Select Rating?
\n\n {\n setValueRate(newValue);\n }}\n />\n
\n \n
\n {submitMessage && (\n Add Your Review
\n\n
\n )}\n You don't have any completed courses
\n \n\n
\n );\n}\n\nexport default CourseCard;\n","import React, { useEffect, useState } from 'react';\nimport { CheckBox, Collapsible, Icon, RadioButton, RadioButtonGroup } from '@edx/paragon';\nimport { FilterAltOff } from '@edx/paragon/icons';\nimport { FilterListOff } from '@edx/paragon/icons';\nimport CourseCard from './CourseCard/CourseCard';\nimport { getConfig } from '@edx/frontend-platform';\nimport queryString from 'query-string';\nimport './AllCourses.css';\nimport { Checkbox, FormControlLabel, FormGroup } from '@mui/material';\nimport { Helmet } from 'react-helmet';\nimport Pagination from '@mui/material/Pagination';\nimport { Spinner } from '@edx/paragon';\n\nfunction AllCourses() {\n const [coursesList, setCoursesList] = useState([]);\n const [selectedLevels, setSelectedLevels] = useState([]);\n const [selectedCategories, setSelectedCategories] = useState([]);\n const [selectedTypes, setSelectedTypes] = useState([]);\n const [selectedLearningExperiences, setSelectedLearningExperiences] = useState([]);\n const [selectedAvailabilities, setSelectedAvailabilities] = useState([]);\n const [expandedView, setExpandedView] = useState(true);\n const [cat, setCat] = useState([]);\n const [currentPage, setCurrentPage] = useState(() => {\n return parseInt(localStorage.getItem('currentPage')) || 1;\n });\n const [totalPages, setTotalPages] = useState(1);\n const [loading, setLoading] = useState(true);\n\n async function getCategories() {\n try {\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n\n const res = await fetch(\"https://studio.carerha.com/api/contentstore/v1/categories\", requestOptions);\n const results = await res.json();\n\n const subjects = results.map(category => category.name);\n setCat(subjects);\n } catch (error) {\n console.error(error);\n }\n }\n\n useEffect(() => {\n getCategories();\n }, []);\n\n const handleToggleView = () => {\n setExpandedView(!expandedView);\n };\n\n useEffect(() => {\n fetchCourses(currentPage);\n }, [currentPage]);\n\n useEffect(() => {\n const storedPage = localStorage.getItem('currentPage');\n if (storedPage) {\n setCurrentPage(parseInt(storedPage));\n }\n }, []);\n\n const fetchCourses = (page) => {\n const requestOptions = {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n };\n\n fetch(`https://carerha.com/api/courses/v1/courses/?page_size=50&page=${page}`, requestOptions)\n .then(response => response.json())\n .then(result => {\n const filteredResults = result.results.filter(course => course.not_part_of_program);\n console.log('result>>>>', result);\n setCoursesList(filteredResults);\n setTotalPages(result.pagination.num_pages || 1);\n setLoading(false);\n window.scrollTo(0, 0);\n })\n .catch(error => console.error('Error fetching courses:', error));\n setLoading(false);\n };\n\n const handlePageChange = (event, newPage) => {\n setCurrentPage(newPage);\n localStorage.setItem('currentPage', newPage);\n };\n\n const updateQueryParams = () => {\n const params = queryString.parse(window.location.search);\n params.levels = selectedLevels.join(',');\n params.categories = selectedCategories.join(',');\n params.types = selectedTypes.join(',');\n params.learningExperiences = selectedLearningExperiences.join(',');\n params.availabilities = selectedAvailabilities.join(',');\n\n const newUrl = `${window.location.pathname}?${queryString.stringify(params)}`;\n window.history.replaceState({}, '', newUrl);\n\n localStorage.setItem('selectedLevels', JSON.stringify(selectedLevels));\n localStorage.setItem('selectedCategories', JSON.stringify(selectedCategories));\n localStorage.setItem('selectedTypes', JSON.stringify(selectedTypes));\n localStorage.setItem('selectedLearningExperiences', JSON.stringify(selectedLearningExperiences));\n localStorage.setItem('selectedAvailabilities', JSON.stringify(selectedAvailabilities));\n };\n\n useEffect(() => {\n updateQueryParams();\n }, [selectedLevels, selectedCategories, selectedTypes, selectedLearningExperiences, selectedAvailabilities]);\n\n useEffect(() => {\n const params = queryString.parse(window.location.search);\n setSelectedLevels(params.levels ? params.levels.split(',') : JSON.parse(localStorage.getItem('selectedLevels')) || []);\n setSelectedCategories(params.categories ? params.categories.split(',') : JSON.parse(localStorage.getItem('selectedCategories')) || []);\n setSelectedTypes(params.types ? params.types.split(',') : JSON.parse(localStorage.getItem('selectedTypes')) || []);\n setSelectedLearningExperiences(params.learningExperiences ? params.learningExperiences.split(',') : JSON.parse(localStorage.getItem('selectedLearningExperiences')) || []);\n setSelectedAvailabilities(params.availabilities ? params.availabilities.split(',') : JSON.parse(localStorage.getItem('selectedAvailabilities')) || []);\n }, []);\n\n const filteredCourses = coursesList.filter(course => {\n const learningExperiencesForLive = ['Online', 'Hybrid'];\n const learningExperiencesForRecorded = ['Offline', 'Hybrid'];\n\n let isTypeMatch = true;\n if (selectedTypes.includes('Live')) {\n isTypeMatch = learningExperiencesForLive.includes(course.learning_experience);\n } else if (selectedTypes.includes('Recorded')) {\n isTypeMatch = learningExperiencesForRecorded.includes(course.learning_experience);\n }\n\n return (\n (selectedLevels.length === 0 || selectedLevels.includes(course.level)) &&\n (selectedCategories.length === 0 || selectedCategories.includes(course.start_display)) &&\n isTypeMatch &&\n (selectedLearningExperiences.length === 0 || selectedLearningExperiences.includes(course.learning_experience)) &&\n (selectedAvailabilities.length === 0 || selectedAvailabilities.includes(course.availability))\n );\n });\n\n const handleFilterChange = (setFilter, filter, value) => {\n const updatedFilter = filter.includes(value)\n ? filter.filter(item => item !== value)\n : [...filter, value];\n setFilter(updatedFilter);\n };\n\n const handleClearFilters = () => {\n setSelectedLevels([]);\n setSelectedCategories([]);\n setSelectedTypes([]);\n setSelectedLearningExperiences([]);\n setSelectedAvailabilities([]);\n updateQueryParams();\n };\n\n const isAnyFilterActive = selectedLevels.length > 0 || selectedCategories.length > 0 || selectedTypes.length > 0 || selectedLearningExperiences.length > 0 || selectedAvailabilities.length > 0;\n\n return (\n <>\n {\n event.stopPropagation(); // Stop propagation here\n window.location.href = `https://apps.carerha.com/learning/course/${props.courseId}/about#about`;\n }}>\n
\n \n
\n {props.pacing === \"instructor\" ? <>
{props.price === 0 ? \"Free\" : `${props.price} EGP`}
\n\n {props.category}\n
\n\n {props.courseTitle}\n
\n\n
\n \n
\n \n
\n \n
\n \n {isCourseEnrolled ?\n \n Enrolled\n \n :\n \n Enroll Now\n }\n
\n \n
\n\n Our Courses
\n\n \n \n
\n\n \n
\n \n {expandedView && (\n
\n \n \n \n handleFilterChange(setSelectedTypes, selectedTypes, 'Live')}\n value=\"Live\"\n />\n }\n label=\"Live\"\n />\n handleFilterChange(setSelectedTypes, selectedTypes, 'Recorded')}\n value=\"Recorded\"\n />\n }\n label=\"Recorded\"\n />\n \n \n \n \n handleFilterChange(setSelectedLearningExperiences, selectedLearningExperiences, 'Online')}\n value=\"Online\"\n />\n }\n label=\"Online\"\n />\n handleFilterChange(setSelectedLearningExperiences, selectedLearningExperiences, 'Offline')}\n value=\"Offline\"\n />\n }\n label=\"Offline\"\n />\n handleFilterChange(setSelectedLearningExperiences, selectedLearningExperiences, 'Hybrid')}\n value=\"Hybrid\"\n />\n }\n label=\"Hybrid\"\n />\n \n \n \n \n handleFilterChange(setSelectedLevels, selectedLevels, 'Beginner')}\n value=\"Beginner\"\n />\n }\n label=\"Beginner\"\n />\n handleFilterChange(setSelectedLevels, selectedLevels, 'Intermediate')}\n value=\"Intermediate\"\n />\n }\n label=\"Intermediate\"\n />\n handleFilterChange(setSelectedLevels, selectedLevels, 'Advanced')}\n value=\"Advanced\"\n />\n }\n label=\"Advanced\"\n />\n \n \n \n \n {cat.map((category, index) => (\n handleFilterChange(setSelectedCategories, selectedCategories, category)}\n value={category}\n />\n }\n label={category}\n />\n ))}\n \n \n {/* \n \n handleFilterChange(setSelectedAvailabilities, selectedAvailabilities, 'Available')}\n value=\"Available\"\n />\n }\n label=\"Available\"\n />\n handleFilterChange(setSelectedAvailabilities, selectedAvailabilities, 'Not Available')}\n value=\"Not Available\"\n />\n }\n label=\"Not Available\"\n />\n \n */}\n
\n )}\n \n {loading ? (\n
\n\n\n \n
\n ) : (\n filteredCourses.map((course, index) => (\n \n
\n ))\n )}\n \n
\n\n\n \n );\n}\n\nexport default AllCourses;\n\n","export default __webpack_public_path__ + \"a3b04c4b587422e1ba0a4ae88a1c5ee8.png\";","import { getConfig } from \"@edx/frontend-platform\";\nimport { makeStyles } from \"@material-ui/core\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\nimport SearchIcon from \"@material-ui/icons/Search\";\nimport { IconButton } from \"@mui/material\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport Stack from \"@mui/material/Stack\";\nimport TextField from \"@mui/material/TextField\";\nimport match from \"autosuggest-highlight/match\";\nimport parse from \"autosuggest-highlight/parse\";\nimport React, { useEffect, useState } from \"react\";\nimport \"./search.css\";\n\nconst useStyles = makeStyles({\n noOptions: {\n fontFamily: `\"Tajawal\", sans-serif`,\n },\n});\n\nexport default function Searchbar(props) {\n const [searchbar, setSearchbar] = useState([{ name: \".....\" }]);\n const [selected, setSelected] = useState(\"\");\n const [open, setOpen] = useState(false);\n const [inputValue, setInputValue] = useState(\"\");\n const screenWidth = window.innerWidth;\n useEffect(() => {\n var myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/json\");\n myHeaders.append(\"Cookie\", \"csrftoken=eIx26psTAXmbDvYS8JMRS17EXfjArCZDQ9rTzHNDn8OlUWGw0k4NFFmrMqaIuXWC; openedx-language-preference=en; sessionid=1|vjhuejf80w5ymzw7e2vhftp1q1nkmvzo|BaxL79HvwBzN|ImU4MTRjODYxZDJkNmI5ZjY3Zjk5NmYxYjRlMTViOWQ5NDYzM2IwMzBmMzIxNGUyY2U3Mzk1MDZlNGI5MDg4OGUi:1r6cid:QC_raQMZD_fNntdKj11X_sFfEBc\");\n\n var requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n fetch(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/?page_size=12`, requestOptions)\n .then(response => response.json())\n .then(result => {\n console.log(result.results, \"res\")\n setSearchbar(result.results)\n })\n .catch(error => console.log('error', error));\n }, [])\n\n const styles = useStyles();\n\n return (\n <>\n \n = 768 && \"none\",\n },\n \"& .MuiAutocomplete-clearIndicator\": {\n display: screenWidth >= 768 && \"none\",\n },\n \"& .MuiAutocomplete-hasPopupIcon\": {\n padding: \"0\",\n },\n }}\n placeholder={\"what do you want to learn? \"}\n {...params}\n InputProps={{\n ...params.InputProps,\n type: \"search\",\n startAdornment:\n \n {\n window.location.href = `courses/${searchbar.find(\n (itemFound) => itemFound.course_id === selected\n )?.course_id\n }/about#about`;\n }}\n disabled={\n !searchbar.find(\n (itemFound) => itemFound.course_id === selected\n )?.course_id\n }\n >\n \n ,\n }}\n onKeyUp={(event) => {\n if (event.key === \"Enter\") {\n const foundCourseId = searchbar.find(\n (itemFound) => itemFound.name === event.target.value\n )?.course_id;\n if (foundCourseId) {\n window.location.href = `course/${foundCourseId}/about#about`;\n } else {\n event.target.blur();\n }\n }\n }}\n />\n
\n )}\n renderOption={(props, option, { inputValue }) => {\n const matches = match(option.name, inputValue, {\n insideWords: true,\n });\n const parts = parse(option.name, matches);\n return (\n \n
\n );\n\n}\n\nexport default MobileHeader;\n","import React, { useEffect, useState } from 'react'\nimport logo from '../../public/assets/carerha-logo-light.png'\nimport './Navbar.css'\nimport { Link, useLocation } from 'react-router-dom'\nimport { useContext } from 'react';\nimport Searchbar from './Search/Search'\nimport MobileHeader from './MobileNavbar'\nimport { AppContext } from '@edx/frontend-platform/react';\nimport cartImage from '../../public/assets/cart.png'\nimport profileImage from '../../public/assets/profile.png'\nimport Button from '@mui/material/Button';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport down from '../../public/assets/down-solid.png'\nimport { getConfig } from '@edx/frontend-platform';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport { postCourseEnrollment } from '../alerts/enrollment-alert/data/api';\n\nfunction Navbar() {\n const location = useLocation();\n var _useContext = useContext(AppContext),\n authenticatedUser = _useContext?.authenticatedUser;\n\n const [anchorEl, setAnchorEl] = useState(null);\n const [scrolling, setScrolling] = useState(false);\n\n\n\n useEffect(() => {\n const handleScroll = () => {\n if (window.scrollY > 0) {\n setScrolling(true);\n } else {\n setScrolling(false);\n }\n };\n\n window.addEventListener('scroll', handleScroll);\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, []);\n\n const handleClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\n\n const isCoursePage = location.pathname.startsWith('/course/');\n const isprogrampage = location.pathname.startsWith('/program/');\n\n useEffect(() => {\n postCourseEnrollment(\"course-v1:Carerha+Carerha+Community\").then((res) => {\n console.log(res, \"res\");\n }).catch((err) => {\n console.error(err);\n })\n }, [])\n\n\n return (\n <>\n \n handleMenuClick(event, 0)} // Pass the index of the submenu to handleMenuClick\n >\n \n
\n \n \n 
\n Courses\n \n \n < img src={programImage} alt='program' />\n Programs\n \n \n 
\n Events\n \n \n 
\n Company\n \n \n \n Media\n \n \n \n Business\n \n
\n \n \n \n 
\n \n
\n {authenticatedUser != null ?\n \n 
}\n
:\n \n handleMenuClick(event, 1)} // Pass the index of the submenu to handleMenuClick\n className=\"dropdown-btn\"\n >\n 
\n {_useContext?.authenticatedUser?.username.length > 7 ? _useContext?.authenticatedUser?.username.slice(0, 7) : _useContext?.authenticatedUser?.username}\n 
\n \n \n \n \n \n \n \n
\n {authenticatedUser != null && - \n
\n\n <>\n \n \n \n\n\n
\n )\n}\n\n\n\nexport default BannerImage","export default __webpack_public_path__ + \"aeeace6a15bd395e229bad5b4b7fef73.png\";","export default __webpack_public_path__ + \"6816f4dbfd966945f5cc983ceceeb8df.png\";","export default __webpack_public_path__ + \"b000ee89749af4f41aed74643e9f25cd.png\";","export default __webpack_public_path__ + \"c631abaf3a2711ec1264e9dc8621d7b0.png\";","export default __webpack_public_path__ + \"65344dcfd05b49e04fa7ec6e12c590c2.png\";","import { Button, Card, Spinner } from '@edx/paragon';\nimport Rating from \"@mui/material/Rating\";\nimport React, { useContext, useEffect, useState } from 'react';\nimport ReactPlayer from 'react-player/lazy';\nimport \"./CardDetialsAboutPage.css\";\nimport { useLocation } from 'react-router-dom/cjs/react-router-dom.min';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport levelIcon from \"../../public/assets/carbon_skill-level-intermediate.png\";\nimport AccessTimeFilledRoundedIcon from '@mui/icons-material/AccessTimeFilledRounded';\nimport BarChartRoundedIcon from '@mui/icons-material/BarChartRounded'; import paceIcone from \"../../public/assets/hybridIcon.png\";\nimport CertficateIcon from \"../../public/assets/Certficate.png\";\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport { getConfig } from '@edx/frontend-platform';\nimport { postCourseEnrollment } from '../alerts/enrollment-alert/data/api';\nimport usaidLogo from '../../public/assets/usaid.png'\nimport daiLogo from '../../public/assets/DAI-1.png'\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\nimport PersonIcon from '@mui/icons-material/Person';\nimport StarIcon from '@mui/icons-material/Star';\nimport FacebookRoundedIcon from '@mui/icons-material/FacebookRounded';\nimport LinkedInIcon from '@mui/icons-material/LinkedIn';\nimport InstagramIcon from '@mui/icons-material/Instagram';\nimport WhatsAppIcon from '@mui/icons-material/WhatsApp';\nimport CheckIcon from '@mui/icons-material/Check';\nimport ShoppingCartIcon from '@mui/icons-material/ShoppingCart';\nimport { useParams } from 'react-router-dom';\nimport ImportContactsIcon from '@mui/icons-material/ImportContacts';\nfunction CardDetialsAboutPage({ classes, course, enrollmentData, id, syllabus }) {\n var _useContext = useContext(AppContext)\n let { authenticatedUser } = _useContext\n\n\n const { pathname } = useLocation();\n const { courseId } = useParams();\n const [sessions, setSessions] = useState(0);\n\n useEffect(() => {\n // Calculate session count when syllabus changes\n if (syllabus && Object.keys(syllabus).length > 0) {\n const count = Object.values(syllabus).reduce((acc, week) => acc + week.length, 0);\n const lastCount = count - 1;\n setSessions(lastCount);\n }\n }, [syllabus]);\n\n\n let startDate = course?.start\n const parsedDate = new Date(startDate);\n\n const options = { year: 'numeric', month: 'long', day: 'numeric' };\n const formattedDate = parsedDate.toLocaleDateString('en-US', options);\n const [coursesEnrollment, setCoursesEnrollment] = useState([]);\n const [averageRating, setAverageRating] = useState(null);\n console.log(courseId, \"courseId 22222\");\n\n\n function getAverage() {\n const requestOptions = {\n method: \"GET\",\n redirect: \"follow\"\n };\n\n fetch(`https://reviews.carerha.com/api/reviews/${courseId}/average/`, requestOptions)\n .then((response) => {\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json();\n })\n .then((result) => {\n console.log(result, \"response average222\");\n setAverageRating(result); // Assuming 'result' is the average rating, update state accordingly\n })\n .catch((error) => {\n console.error(error);\n });\n }\n useEffect(() => {\n getAverage();\n }, []);\n\n const fetchEnrollmentData = async () => {\n try {\n const enrollmentResponse = await getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`);\n const coursesData = enrollmentResponse?.data;\n setCoursesEnrollment(coursesData);\n console.log('firstNewwwwwwww', coursesData)\n } catch (error) {\n console.error('Error fetching enrollment data:', error);\n }\n };\n\n useEffect(() => {\n fetchEnrollmentData();\n }, []);\n // const handleEnrollClick = async (event) => {\n // event.preventDefault()\n // try {\n // await postCourseEnrollment(course?.courseId);\n // window.location.href = 'https://apps.carerha.com/learning/mycourses';\n // console.log(\"done\");\n // } catch (error) {\n // window.location.href = 'https://apps.carerha.com/authn/login';\n\n // console.error('Error enrolling in the course:', error);\n // }\n // };\n const handleEnrollClick = async (event) => {\n event.preventDefault();\n try {\n if (course?.modes[0].bulk_sku) {\n // Redirect to the other link if bulk_sku has a value\n window.location.href = `${getConfig().ECOMMERCE_BASE_URL}/basket/add/?sku=${course?.modes[0].sku}`; // Replace with the actual link\n } else {\n await postCourseEnrollment(courseId);\n // Redirect to my courses if bulk_sku is null\n window.location.href = 'https://apps.carerha.com/learning/mycourses';\n }\n } catch (error) {\n if (error.response && error.response.status === 401) {\n // Redirect to login page if the error status is 401 (Unauthorized)\n window.location.href = 'https://apps.carerha.com/authn/login';\n } else {\n console.error('Error enrolling in the course:', error);\n }\n }\n };\n\n\n const isCourseEnrolled = coursesEnrollment.some(course => course?.course_details?.course_id === courseId);\n console.log('isCourseEnrolled', isCourseEnrolled)\n\n\n // console.log(course.modes[0].min_price, \"course data >>>>\")\n // console.log(course.certified_from_images_url, \"course data\");\n console.log('course?.pacing', course?.pacing)\n\n return (\n <>\n {course?.name}
\n \nView student review
\n \n\n \n {!pathname.includes(\"/reviews\") &&\n \n {!pathname.includes(\"/reviews\") &&\n \n \n \n \n\n \n\n\n \n {isCourseEnrolled ? (\n \n\n < CheckIcon />\n\n Enrolled\n \n ) : <>\n \n\n \n \n\n
\n\n \n )\n}\nexport default CardDetialsAboutPage","import React, { useEffect, useState } from 'react';\nimport \"./CourseDetailsInstructorCard.css\";\nimport { Link } from 'react-router-dom';\nimport KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';\nimport Dialog from '@mui/material/Dialog';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport FacebookRoundedIcon from '@mui/icons-material/FacebookRounded';\nimport LinkedInIcon from '@mui/icons-material/LinkedIn';\nimport XIcon from '@mui/icons-material/X';\n\nfunction CourseDetailsInstructorCard({ instructors }) {\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n const [bioPreview, setBioPreview] = useState(\"\");\n const [showFullBio, setShowFullBio] = useState(false);\n\n useEffect(() => {\n // Your logic to handle bioPreview and showFullBio\n }, [instructors, showFullBio]);\n\n const openPopup = () => {\n setIsPopupOpen(true);\n };\n\n const closePopup = () => {\n setIsPopupOpen(false);\n };\n\n return (\n \n
}\n {/* \n {averageRating?.average_rate ? `${averageRating?.average_rate} ` : \"0 %\"} {`( ${averageRating?.review_count ? averageRating?.review_count : \"0\"} )`}\n
\n\n {\n course?.modes[0]?.min_price === 0 ?\n :\n \n\n }\n
*/}\n Free
{course?.modes[0]?.min_price} EGP
\n {\n course?.pacing === \"instructor\" ?\n
\n\n \n
\n :\n Live Sessions
\n\n
\n }\n Recorded Videos
\n\n \n \n \n \n \n \n\n\n \n \n \n \n\n {/*
*/}\n
\n {course.certified_from_images_url && (\n \n
\n {formattedDate}
\n\n\n < PersonIcon style={{ color: \"var(--navy_color)\" }} className='Card-Icon' />\n {/* */}\n
\n {course?.student_enrollments_count === 0 ? Be the first to take this course
: < p > + {course?.student_enrollments_count} Took this Course}\n\n {sessions} sessions \n
\n\n {/* 
*/}\n
\n {course?.level}
\n\n 
\n\n {/* */}\n
\n {course?.learning_experience}
\n*/}\n
\n
\n )}\n Certified Certificate From
\n\n {course.certified_from_images_url.map((imageUrl, index) => (\n \n 
\n {index !== course.certified_from_images_url.length - 1 && |}\n \n ))}\n
\n Share this course
\n \n\n
\n );\n}\n\nexport default CourseDetailsInstructorCard;\n","import React from 'react';\nimport \"./CourseDetailsRelatedCourses.css\";\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport { Autoplay, Navigation } from 'swiper/modules';\nimport { Spinner } from '@edx/paragon';\nimport CourseCard from '../AllCourses/CourseCard/CourseCard';\n\nfunction SwiperCards({ coursesSameCategory }) {\n const numCourses = coursesSameCategory.length;\n\n\n return (\n <>\n {numCourses > 0 ? (\n Meet the Trainer :
\n\n {instructors?.filter(instructor => instructor.username !== \"CarerhaAdmin\").map((instructor, index) => (\n
\n \n
\n ))}\n \n 
\n
\n\n \n \n {instructor?.name}\n\n
\n\n
\n );\n}\n\nfunction CourseDetailsRelatedCourses({ coursesSameCategory }) {\n // If there are no similar courses, return null\n if (coursesSameCategory.length === 0) return null;\n\n return (\n \n
\n );\n}\n\nexport default CourseDetailsRelatedCourses;\n","import React from 'react';\nimport ReactHtmlParser from 'react-html-parser';\nimport \"./ParsedHTML.css\"\nimport { Nav } from '@edx/paragon';\nimport { useLocation } from 'react-router-dom';\n\n\n\nfunction TabsCourseDetails() {\n const { hash } = useLocation()\n function scrollToWantedElement(e) {\n let ele = e.currentTarget.getAttribute(\"data-value\")\n let clicked = document.querySelector(`.${ele}`)\n clicked.scrollIntoView({\n behavior: \"smooth\"\n })\n }\n\n return (\n \n\n );\n}\n\n\nfunction ParsedHTML({ overview, classes }) {\n return (\n Similar Courses:
\n {coursesSameCategory.length === 1 ? (\n\n
\n )\n}\n\nexport default ParsedHTML","import { Spinner } from '@edx/paragon';\nimport { ExpandMore } from '@edx/paragon/icons';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport \"./Syllabus.css\";\n\n\nfunction ExpandedItems({ syllabus }) {\n const [expanded, setExpanded] = React.useState(false);\n\n const handleChange = (panel) => (event, isExpanded) => {\n setExpanded(isExpanded ? panel : false);\n }\n return (\n <>\n {Object.keys(syllabus).map((ele, i) =>\n \n \n :
\n )\n}\n\nexport default Syllabus","import { getConfig } from \"@edx/frontend-platform\";\nimport { getAuthenticatedHttpClient } from \"@edx/frontend-platform/auth\";\nimport { generatePublicBea } from \"../alerts/enrollment-alert/data/api\";\n\n\nexport async function getCourseDetials(courseId) {\n try {\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n\n const requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n const response = await fetch(`https://carerha.com/api/courses/v1/courses/${courseId}`, requestOptions);\n\n if (!response.ok) {\n throw new Error(`Failed to fetch course details for course ID: ${courseId}`);\n }\n\n const jsonData = await response.json();\n console.log(jsonData, \"jsonData\");\n return jsonData;\n } catch (error) {\n console.error('Error fetching course details:', error);\n return {\n Data: false,\n message: error.message\n };\n }\n}\n\n\nfunction localOutlines(block) {\n let objOutlines = {}\n let seq = []\n\n // data mislead in obj and values\n\n Object.values(block).map(e => {\n Object.values(e).map(ele => {\n\n // if (ele.type === \"chapter\") {\n // seq = ele.children.map(subElement => e[subElement])\n // objOutlines[ele.display_name] = seq\n // seq = []\n // }\n\n ele.type === \"chapter\" && (seq = ele?.children?.map(subElement => e[subElement]), objOutlines[ele.display_name] = seq, seq = [])\n })\n })\n\n return objOutlines\n\n}\nexport async function getCourseOutlines(encodedId) {\n let access_token = await generatePublicBea()\n console.log(access_token , \"access_token\");\n\n var myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/json\");\n myHeaders.append(\"authorization\", `jwt ${access_token}`);\n\n var requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n try {\n // let authenticatedHttpClient = await getAuthenticatedHttpClient()\n // let { data } = await authenticatedHttpClient.get(`${getConfig().LMS_BASE_URL}/api/course_home/outline/${encodedId}`)\n let data = await fetch(`https://carerha.com/api/course_home/outline/${encodedId}`, requestOptions)\n let { course_blocks } = await data.json()\n let objOutlines = localOutlines(course_blocks)\n return objOutlines\n } catch (error) {\n console.log('error.message', ({\n Data: false,\n message: error.message\n }))\n return ({\n Data: false,\n message: error.message\n })\n\n }\n\n\n}\n// export async function getCourseInstructor(courseId) {\n// let myHeaders = new Headers();\n// myHeaders.append(\"accept\", \"application/json\");\n\n// var requestOptions = {\n// method: 'GET',\n// headers: myHeaders,\n// redirect: 'follow'\n// };\n\n// try {\n// const data = await fetch(`${getConfig().LMS_BASE_URL}/api/contentstore/v1/instructors?course_key=${courseId}`, requestOptions)\n// const jsonData = await data.json()\n// console.log('jsonData', jsonData)\n// return jsonData\n// } catch (error) {\n// console.log('error.message', ({\n// Data: false,\n// message: error.message\n// }))\n// return ({\n// Data: false,\n// message: error.message\n// })\n// }\n// }\n\n\nexport async function getCoursesSameCategory(org) {\n\n try {\n let data = await fetch(`https://carerha.com/api/courses/v1/courses/?org=${org}`)\n let { results } = await data.json()\n console.log(results, \"results\")\n return results\n\n } catch (error) {\n console.log('error.message', ({\n Data: false,\n message: error.message\n }))\n return ({\n Data: false,\n message: error.message\n })\n }\n}\n\n","import { Spinner } from '@edx/paragon';\nimport React, { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport BannerImage from './BannerImage';\nimport CardDetialsAboutPage from './CardDetialsAboutPage';\nimport CourseDetailsInstructorCard from './CourseDetailsInstructorCard';\nimport CourseDetailsRelatedCourses from './CourseDetailsRelatedCourses';\nimport ParsedHTML from './ParsedHTML';\nimport Syllabus from './Syllabus';\nimport { getCourseDetials, getCourseInstructor, getCourseOutlines, getCoursesSameCategory } from './api';\nimport { postCourseEnrollment } from '../alerts/enrollment-alert/data/api';\nimport './CourseCardCourseDetails.css';\n\nfunction CourseAboutPage() {\n const { courseId } = useParams();\n const [courseData, setCourseData] = useState({});\n const [enrollmentData, setEnrollmentData] = useState({});\n const [courseInstructor, setCourseInstructor] = useState({});\n const [coursesSameCategory, setCoursesSameCategory] = useState({});\n const [fetchData, setFetchData] = useState(true);\n const [syllabus, setSyllabus] = useState({});\n\n useEffect(() => {\n async function fetchData() {\n try {\n const courseDetails = await getCourseDetials(courseId);\n // console.log('Course Details:', courseDetails);\n setCourseData(courseDetails);\n const courseInstructor = courseDetails && courseDetails?.instructors && courseDetails?.instructors?.length > 0\n ? courseDetails?.instructors\n : null;\n setCourseInstructor(courseInstructor);\n let decodedUrl = courseDetails.blocks_url.split(\"?course_id=\")[1];\n // console.log(decodedUrl, \"decodedUrl\");\n const outlines = await getCourseOutlines(decodedUrl);\n // console.log(outlines, \"outlines\");\n setSyllabus(outlines);\n let coursesCategory = await getCoursesSameCategory(courseDetails?.org);\n // console.log('Courses in Same Category:', coursesCategory);\n coursesCategory = coursesCategory || []; // If coursesCategory is not available, set it to an empty array\n const filteredCourses = coursesCategory.filter(course => course.id !== courseDetails.course_id);\n setCoursesSameCategory(filteredCourses);\n\n const enrollmentDetails = await postCourseEnrollment(courseId);\n // console.log('Enrollment Details:', enrollmentDetails);\n setEnrollmentData(enrollmentDetails);\n\n // const courseInstructorData = await getCourseInstructor(courseId);\n // console.log('Course Instructor:', courseInstructorData?.instructors[0]);\n } catch (error) {\n console.error('Error fetching data:', error);\n } finally {\n setFetchData(false);\n }\n }\n fetchData();\n }, [courseId]);\n\n if (fetchData) {\n return (\n Syllabus:
\n {Object.keys(syllabus).length > 0 ?\n\n
\n );\n }\n\n return (\n \n
\n );\n}\n\nexport default CourseAboutPage;\n","export default __webpack_public_path__ + \"d7f88b66b49042addcf4a41a46c967da.png\";","import { LinearProgress } from '@mui/material'\nimport React from 'react'\n\nfunction LinearProgressBar(props) {\n return (\n <>\n \n
\n \n
\n {courseInstructor && (\n \n \n \n \n {text}\n {/* \n
\n );\n}\n\nexport default ReviewsCard;\n","import React, { useEffect, useState } from 'react';\n// Import Swiper React components\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport { useParams } from 'react-router-dom';\n\n// import required modules\nimport { Navigation } from 'swiper/modules';\nimport ReviewsCard from './ReviewsCard';\nimport { Spinner } from '@edx/paragon';\n\nfunction SwiperCards() {\n const { courseId } = useParams();\n const [reviewData, setReviewData] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const requestOptions = {\n method: \"GET\",\n redirect: \"follow\"\n };\n\n fetch(`https://reviews.carerha.com/api/reviews/${courseId}/`, requestOptions)\n .then((response) => response.json())\n .then((result) => {\n setReviewData(result);\n setLoading(false);\n })\n .catch((error) => {\n console.error(error);\n setLoading(false);\n });\n }, [courseId]);\n\n if (loading) {\n return \n
\n {/* {rate} / 5
\n{student_name}
*/}\nmore
*/}\n \n
\n {student_name}
\nNo reviews available
;\n }\n\n const filteredReviews = reviewData.filter(review => review.message); // Filter out reviews with empty messages\n const screenWidth = window.innerWidth;\n\n return (\n \n
\n );\n}\n\nexport default ReviewsSwipper;\n","import React, { useEffect, useState } from 'react';\nimport \"./CourseReviews.css\";\nimport { useParams } from 'react-router-dom';\nimport { getCourseDetials, getCourseOutlines, getCoursesSameCategory } from '../course-about/api';\nimport { postCourseEnrollment } from '../alerts/enrollment-alert/data/api';\nimport { Spinner } from '@edx/paragon';\nimport CardDetialsAboutPage from '../course-about/CardDetialsAboutPage';\nimport reviewsStudents from \"../../public/assets/reviewsStudents.png\";\nimport LinearProgressBar from '../component/LinearProgressBar/LinearProgressBar';\nimport { Rating } from '@mui/material';\nimport ReviewsSwipper from './ReviewsSwipper';\n// import { getCourseOutlines } from '../program-about/api';\n\n\nfunction CourseReviews() {\n const { courseId } = useParams();\n const [courseData, setCourseData] = useState({});\n const [enrollmentData, setEnrollmentData] = useState({});\n const [courseInstructor, setCourseInstructor] = useState({});\n const [coursesSameCategory, setCoursesSameCategory] = useState({});\n const [fetchData, setFetchData] = useState(true);\n const [syllabus, setSyllabus] = useState({});\n const testResult = new Array(5).fill(null);\n const [averageRating, setAverageRating] = useState(null);\n\n\n function getAverage() {\n const requestOptions = {\n method: \"GET\",\n redirect: \"follow\"\n };\n\n fetch(`https://reviews.carerha.com/api/reviews/${courseId}/average/`, requestOptions)\n .then((response) => {\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json();\n })\n .then((result) => {\n console.log(result, \"response average\");\n setAverageRating(result); // Assuming 'result' is the average rating, update state accordingly\n })\n .catch((error) => {\n console.error(error);\n });\n }\n\n\n\n useEffect(() => {\n async function fetchData() {\n try {\n const courseDetails = await getCourseDetials(courseId);\n // console.log('Course Details:', courseDetails);\n setCourseData(courseDetails);\n const courseInstructor = courseDetails && courseDetails?.instructors && courseDetails?.instructors?.length > 0\n ? courseDetails?.instructors[1]\n : null;\n setCourseInstructor(courseInstructor);\n let decodedUrl = courseDetails.blocks_url.split(\"?course_id=\")[1];\n // console.log(decodedUrl, \"decodedUrl\");\n const outlines = await getCourseOutlines(decodedUrl);\n // console.log(outlines, \"outlines\");\n setSyllabus(outlines);\n console.log('outlines', outlines)\n let coursesCategory = await getCoursesSameCategory(courseDetails?.org);\n // console.log('Courses in Same Category:', coursesCategory);\n coursesCategory = coursesCategory || []; // If coursesCategory is not available, set it to an empty array\n const filteredCourses = coursesCategory.filter(course => course.id !== courseDetails.course_id);\n setCoursesSameCategory(filteredCourses);\n\n const enrollmentDetails = await postCourseEnrollment(courseId);\n // console.log('Enrollment Details:', enrollmentDetails);\n setEnrollmentData(enrollmentDetails);\n\n // const courseInstructorData = await getCourseInstructor(courseId);\n // console.log('Course Instructor:', courseInstructorData?.instructors[0]);\n } catch (error) {\n console.error('Error fetching data:', error);\n } finally {\n setFetchData(false);\n }\n }\n fetchData();\n }, [courseId]);\n\n\n useEffect(() => {\n // fetchCourseData();\n getAverage();\n }, []);\n\n\n if (fetchData) {\n return (\n Reviews
\n\n
\n \n
\n \n
\n );\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nexport default CourseReviews;\n","import { Spinner } from '@edx/paragon';\nimport React from 'react';\n\nfunction BannerImage({ program }) {\n return (\n Course Rating
\n\n 
\n
\n {courseData.name}
\n\n
\n \n < Rating name=\"half-rating-read\" precision={0.5} value={averageRating?.average_rate ? averageRating?.average_rate : 0} readOnly />\n
\n {averageRating?.average_rate ? averageRating?.average_rate : \"0\"}
\n {averageRating?.review_count ? averageRating?.review_count : \"0\"} reviewer\n\n {/* {testResult.map((ele, index) => ( */}\n
\n \n
\n {/* ))} */}\n 80%
*/}\n\n {Object.keys(program).length > 0\n ? (\n <>\n \n \n \n ) : (\n
\n );\n}\n\nexport default BannerImage;\n","export default __webpack_public_path__ + \"e2a75730d1963204ea4f4ba72c1f2d11.png\";","export default __webpack_public_path__ + \"02c7406d6b2e1a87cf613b33e2c9bc6e.png\";","import { Button, Card, Spinner } from '@edx/paragon';\nimport Rating from \"@mui/material/Rating\";\nimport React, { useState, useEffect, useContext } from 'react';\nimport ReactPlayer from 'react-player/lazy';\nimport \"./CardDetialsProgramAboutPage.css\";\nimport { useLocation } from 'react-router-dom/cjs/react-router-dom.min';\nimport usaidLogo from '../../public/assets/usaid.png';\nimport daiLogo from '../../public/assets/DAI-1.png';\nimport levelIcon from \"../../public/assets/carbon_skill-level-intermediate.png\";\nimport groupIcon from \"../../public/assets/groupIcon.png\";\nimport timeIcon from \"../../public/assets/timeIcon.png\";\nimport paceIcon from \"../../public/assets/hybridIcon.png\";\nimport CertficateIcon from \"../../public/assets/Certficate.png\";\nimport FacebookRoundedIcon from '@mui/icons-material/FacebookRounded';\nimport LinkedInIcon from '@mui/icons-material/LinkedIn';\nimport InstagramIcon from '@mui/icons-material/Instagram';\nimport WhatsAppIcon from '@mui/icons-material/WhatsApp';\nimport CheckIcon from '@mui/icons-material/Check';\nimport ShoppingCartIcon from '@mui/icons-material/ShoppingCart';\nimport PersonIcon from '@mui/icons-material/Person';\nimport StarIcon from '@mui/icons-material/Star';\nimport Box from '@mui/material/Box';\nimport TextField from '@mui/material/TextField';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\nimport { getConfig } from '@edx/frontend-platform';\nimport { postCourseEnrollment } from '../alerts/enrollment-alert/data/api';\nimport { StandardModal, ActionRow, Alert } from '@edx/paragon';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport { AppContext } from '@edx/frontend-platform/react';\n\nfunction CardDetialsProgramAboutPage({ program, id, classes }) {\n const { pathname } = useLocation();\n const [coursesEnrollment, setCoursesEnrollment] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [openDialogs, setOpenDialogs] = useState({});\n const [valueRate, setValueRate] = useState(0);\n const [review, setReview] = useState('');\n const [submitMessage, setSubmitMessage] = useState('');\n const { authenticatedUser } = useContext(AppContext);\n const [image, setUserImage] = useState('');\n const [userCount, setUserCount] = useState('');\n console.log('program', program)\n\n useEffect(() => {\n const fetchEnrollmentData = async () => {\n try {\n const enrollmentResponse = await getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`);\n const coursesData = enrollmentResponse.data;\n setCoursesEnrollment(coursesData);\n console.log('coursesData', coursesData)\n setIsLoading(false);\n } catch (error) {\n console.error('Error fetching enrollment data:', error);\n setIsLoading(false);\n }\n };\n\n fetchEnrollmentData();\n }, []);\n\n const courseKeys = program.courses ? program.courses.flatMap(course => course.course_runs.map(run => run.key)) : [];\n const isCourseEnrolled = courseKeys.some(key =>\n coursesEnrollment.some(enrollment => enrollment.course_details.course_id === key)\n );\n console.log('courseKeys', courseKeys)\n useEffect(() => {\n if (courseKeys.length > 0) {\n const fetchCourseDetails = async () => {\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n myHeaders.append(\"Cookie\", \"sessionid=1|pr34puki2xkzdmmzm012qz9flcpwdab5|W6S9XhayY8Lr|IjljZjBkYTFmMDRhYzE4OWIyZTM4ZmEzMTg3NmY5ZWIzMmU1ZmJjN2ZhYTI4MzU1NjI1Mjk3YmY3NGJiMWY5OTci:1sbQwm:B6RuYpx2z9wcmb1n9SFyT-XANDA\");\n\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n\n try {\n const response = await fetch(`https://carerha.com/api/courses/v1/courses/${courseKeys[0]}`, requestOptions);\n const result = await response.json();\n console.log('Course Details:', result);\n setUserCount(result.student_enrollments_count\n )\n\n } catch (error) {\n console.error('Error fetching course details:', error);\n }\n };\n\n fetchCourseDetails();\n }\n }, [courseKeys]);\n\n const handleEnrollClick = async (event) => {\n event.preventDefault();\n try {\n if (program.courses && program.courses.length > 0) {\n const courseKeys = program.courses.flatMap(course => course.course_runs.map(run => run.key));\n const courseIds = courseKeys.join(\", \");\n\n await postCourseEnrollment(courseIds); // Call the API function to enroll in the course\n window.location.href = 'https://apps.carerha.com/learning/mycourses'; // Redirect to my courses page after enrollment\n } else {\n console.log(\"No courses available for enrollment.\");\n }\n } catch (error) {\n console.error('Error enrolling in the course:', error);\n }\n };\n\n const handleOpenDialog = (courseId) => {\n setOpenDialogs(prev => ({ ...prev, [courseId]: true }));\n };\n\n const handleCloseDialog = (courseId) => {\n setOpenDialogs(prev => ({ ...prev, [courseId]: false }));\n };\n async function getAccount() {\n try {\n const { data } = await getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/accounts/${authenticatedUser.username}`);\n console.log('Account data:', data);\n setUserImage(data.profile_image.image_url_full)\n } catch (error) {\n console.error('Error fetching account data:', error);\n }\n }\n useEffect(() => {\n getAccount()\n }, [])\n\n const handleSubmitReview = async (programName, programKey) => {\n const myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/json\");\n myHeaders.append(\"Cookie\", \"sessionid=1|qasgphf3xyo8dc3g0jhmjmpo8yj2kg01|MyfwZ73EtUlX|IjFlNjk2MjE4YWZjMDk4NzJlMmIyNjkzNTUyNjM5Y2JiMDViNmQzOWUzNjZlYWU2YzkzMTk3OTY4OGZkOTZmMGUi:1sDuWw:az9abGkUuvkEIyd_W22-sOqFi3o\");\n\n const raw = JSON.stringify({\n \"program_key\": programKey,\n \"student_username\": authenticatedUser.username,\n \"program_name\": programName,\n \"student_name\": authenticatedUser.username,\n \"image_url\": image,\n \"message\": review,\n \"rate\": valueRate,\n \"country\": \"EG\"\n });\n\n const requestOptions = {\n method: \"POST\",\n headers: myHeaders,\n body: raw,\n redirect: \"follow\"\n };\n\n try {\n const response = await fetch(`https://reviews.carerha.com/api/program_reviews/${programKey}/post/`, requestOptions);\n const result = await response.text();\n console.log(result);\n setSubmitMessage('Review submitted successfully!');\n } catch (error) {\n console.error('Error submitting the review:', error);\n setSubmitMessage('Error submitting the review. Please try again later.');\n }\n };\n\n const handleReviewChange = (e) => {\n setReview(e.target.value);\n };\n\n if (isLoading) {\n return {program.title}
\n \nview students reviews
\n \n\n \n {!pathname.includes(\"/reviews\") && (\n \n
\n )}\n \n {program.subscription_eligible ? (\n <>\n
\n\n \n {+program?.subscription_prices[0].price}{program?.subscription_prices[0]?.currency.split(\" \")[0]}\n {+program?.subscription_prices[1].price}{program?.subscription_prices[1]?.currency.split(\" \")[0]}\n
\n {((+program?.subscription_prices[1].price - +program?.subscription_prices[0].price) / +program?.subscription_prices[1]?.price) * 100}% Off\n \n ) : (\n \n Free\n
\n )}\n \n \n \n \n \n \n \n \n \n \n \n {/*
\n \n 
\n
\n {new Date(program.data_modified_timestamp).toDateString()}
\n\n
\n {!coursesEnrollment.length ? (\n Be the first to take this program
\n ) : (\n{userCount} Took this Course
\n )}\n\n \n
\n {program.level}
\n\n 
\n
\n {program.learning_experience}
\n\n 
\n
\n {program.type}
\n\n 
\n
*/}\n Share the course
\n \n\n handleCloseDialog(program.uuid)}\n footerNode={\n \n \n }\n >\n \n {submitMessage}\n \n )}\n \n\n\n
\n ) : (\n \n )}\n \n handleOpenDialog(program.uuid)}\n >\n Leave a Rating\n \n\n
\n\n \n How Would You Rate This Course?\n
\n\n
\n Select Rating
\n\n {\n setValueRate(newValue);\n }}\n />\n
\n \n
\n {submitMessage && (\n Add Your Review
\n\n
\n )\n}\n\nexport default ParsedHTML","export default __webpack_public_path__ + \"9e0c5dc1874868f50a694bd55c409783.png\";","export default __webpack_public_path__ + \"662e8e022c48434a7cc8cc5ea469ca3c.png\";","export default __webpack_public_path__ + \"93910d1637575ed2a6973a7cad8ef8fe.png\";","import React, { useState } from 'react';\nimport './ProgramDetailsInstructorCard.css';\nimport KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';\nimport Dialog from '@mui/material/Dialog';\nimport DialogContent from '@mui/material/DialogContent';\nimport FacebookRoundedIcon from '@mui/icons-material/FacebookRounded';\nimport LinkedInIcon from '@mui/icons-material/LinkedIn';\nimport TwitterIcon from '@mui/icons-material/Twitter';\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport 'swiper/css/navigation';\n\n// Import required modules\nimport { Autoplay, Pagination } from 'swiper/modules';\n// import { Pagination } from '@edx/paragon';\n\n// import dummyImage from '../../public/assets/'\n// import 'swiper/swiper-bundle.min.css';\n\nfunction ProgramDetailsInstructorCard({ instructors }) {\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n const [expandedBio, setExpandedBio] = useState(false);\n const [selectedInstructor, setSelectedInstructor] = useState(null);\n const screenWidth = window.innerWidth;\n\n const openPopup = (instructor) => {\n setSelectedInstructor(instructor);\n setIsPopupOpen(true);\n };\n\n const closePopup = () => {\n setIsPopupOpen(false);\n setSelectedInstructor(null);\n };\n\n const toggleBio = () => {\n setExpandedBio(!expandedBio);\n };\n\n const getImageUrl = (url) => {\n return url ? `https://discovery.carerha.com${url}` : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrWdfWvvyOx0Yp55ZRyyCLfQKDhSJJsIVJBA&s';\n };\n\n return (\n \n
\n {!programData.expected_learning_items && \n {/* 
*/}\n
\n About the program:
\n\n
\n {programData.overview}
\n\n\n
}\n {/* {ReactHtmlParser(overview)} */}\n\n \n {/* 
*/}\n
\n {programData.expected_learning_items.map((obj, ind) => {\n return (learning objectives:
\n\n {/* 
*/}\n .\n
)\n })}\n {obj}
\n\n
\n );\n}\n\nexport default ProgramDetailsInstructorCard;\n","import React from 'react';\nimport truncateHtml from 'truncate-html';\nimport './ProgramCard.css';\n\nimport usaidLogo from '../../../public/assets/usaid.png'\nimport daiLogo from '../../../public/assets/DAI-1.png'\nimport Rating from '@mui/material/Rating';\nimport Stack from '@mui/material/Stack';\nimport { postCourseEnrollment } from '../../alerts/enrollment-alert/data/api';\n\nconst TruncatedSubtitle = ({ subtitle }) => {\n const truncatedContent = truncateHtml(subtitle, 50);\n return ;\n};\n\nfunction ProgramCard(props) {\n let backgroundColor;\n let border;\n\n if (props.level === \"Advanced\") {\n backgroundColor = 'rgba(192, 0, 0, 0.74)';\n border = \"1px solid rgba(192, 0, 0, 0.74)\"\n } else if (props.level === \"Beginner\") {\n backgroundColor = '#92D050';\n border = \"1px solid #92D050\"\n } else if (props.level === 'Intermediate') {\n backgroundColor = '#FFC000';\n border = \"1px solid #FFC000\"\n } else {\n backgroundColor = '#FFC000';\n border = \"1px solid #FFC000\"\n }\n\n const cardStyle = {\n backgroundColor: backgroundColor,\n border: border,\n };\n\n const handleEnrollClick = async (event) => {\n event.preventDefault();\n try {\n if (props.courses && props.courses.length > 0) {\n const courseKeys = props.courses.flatMap(course => course.course_runs.map(run => run.key));\n const courseIds = courseKeys.join(\", \");\n console.log(\"Enrolling in courses:\", courseIds);\n\n await postCourseEnrollment(courseIds); // Call the API function to enroll in the course\n window.location.href = 'https://apps.carerha.com/learning/mycourses'; // Redirect to my courses page after enrollment\n console.log(\"Enrollment done\");\n } else {\n console.log(\"No courses available for enrollment.\");\n }\n } catch (error) {\n console.error('Error enrolling in the course:', error);\n }\n };\n console.log(props.rate, \"props.rate\")\n return (\n <>\n \n Meet the Trainer :
\n\n {instructors.length > 3 ? (\n \n {instructors.map((instructor, index) => (\n \n \n ))}\n \n ) : (\n instructors.map((instructor, index) => (\n
\n\n \n openPopup(instructor)} >\n })
\n
\n \n {instructor.given_name} {instructor.family_name}\n
\n openPopup(instructor)} /> */}\n
\n \n {instructor.position?.title}
\n {/* openPopup(instructor)}>\n
\n ))\n )}\n \n \n
\n \n {instructor.given_name} {instructor.family_name}\n
\n openPopup(instructor)} />\n
\n \n {instructor.position?.title}
\n\n
\n \n \n );\n}\n\nexport default ProgramCard;\n","import React, { useEffect, useState } from 'react';\nimport \"./RelatedPrograms.css\";\n\n// Import Swiper React components\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport 'swiper/css/navigation';\n\n// Import required modules\nimport { Spinner } from '@edx/paragon';\nimport { Autoplay, Navigation } from 'swiper/modules';\nimport ProgramCard from '../AllPrograms/ProgramCard/ProgramCard';\n\nfunction SwiperCards({ programsSameCategory }) {\n const [programRatings, setProgramRatings] = useState({});\n\n const fetchProgramRating = async (programId) => {\n try {\n const response = await fetch(`https://reviews.carerha.com/api/program_reviews/${programId}/average/`);\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n const result = await response.json();\n return result;\n } catch (error) {\n console.error('Error fetching program rating:', error);\n return { average_rate: 0, review_count: 0 }; // Default values if fetching fails\n }\n };\n\n useEffect(() => {\n const fetchAllProgramRatings = async () => {\n const ratings = {};\n for (const program of programsSameCategory) {\n const ratingData = await fetchProgramRating(program.uuid);\n ratings[program.uuid] = ratingData;\n }\n setProgramRatings(ratings);\n };\n\n if (programsSameCategory.length > 0) {\n fetchAllProgramRatings();\n }\n }, [programsSameCategory]);\n\n return (\n <>\n {programsSameCategory.length > 0 ? (\n \n \n \n
\n {props.title}
\n\n {props.price != 0 &&
\n \n {`${props.pricebefore} EGP`}\n
}\n {props.price != 0 &&\n {props.price === 0 ? 'free' : `${props.priceafter} EGP`}\n
}\n\n
\n {props.numOfCourses} Courses
\n{props.learning_experience}
\n{props.level}
\n\n
\n \n
\n Enroll Now
\n\n
\n )}\n \n );\n}\n\nexport default RelatedPrograms;\n","import { Spinner } from '@edx/paragon';\nimport { ExpandMore } from '@edx/paragon/icons';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Typography from '@mui/material/Typography';\nimport SchoolIcon from '@mui/icons-material/School';\nimport React from 'react';\nimport \"./Syllabus.css\";\nimport SyllabusImage from '../../public/assets/Syllabus.png'\n\nfunction ExpandedItems({ courses }) {\n const [expanded, setExpanded] = React.useState(false);\n\n const handleChange = (panel) => (event, isExpanded) => {\n setExpanded(isExpanded ? panel : false);\n }\n return (\n <>\n {courses.map((ele, i) =>\n Similar Programs:
\n\n \n View more details\n \n
\n \n \n :
\n )\n}\n\nexport default Syllabus","export default __webpack_public_path__ + \"4127e435005b735cbaecd2a21b840cc1.png\";","import { getConfig } from \"@edx/frontend-platform\";\nimport { getAuthenticatedHttpClient } from \"@edx/frontend-platform/auth\";\n\n\n\n\n\nasync function publicToken() {\n\n var myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/x-www-form-urlencoded\");\n myHeaders.append(\"Cookie\", \"sessionid=1|pmeebfmoxxx6uj33xfahcnh1tqe1fp56|HV5BFOxbNURL|IjcwNDgzMWJkYzJkMmRjNzhiODBhMmI3YWM5YzU0MDMyY2I4NDBlNDAyMzYzZmIwOTczYzc4ZWE1MzU5OTQ4OTgi:1rEtXh:ST1KW2fn8QGmjmijGe9KIddjx7g\");\n\n var urlencoded = new URLSearchParams();\n urlencoded.append(\"client_id\", \"yHY7kXcHgg95qpMHMKc7NioVRT8bIBxCQkLxclg3\");\n urlencoded.append(\"client_secret\", \"rivktk331PuSQXEhyVmBBRIab1sV58jS2awgGduXB1I24yDiOmMFG20UBh2UYshFpG5Tfrevb9xfozruB0dtcM4secPXc4y4dRx0RhWHOTiz2tRqoc3Rlzl5iK5ikdXI\");\n urlencoded.append(\"grant_type\", \"client_credentials\");\n urlencoded.append(\"token_type\", \"jwt\");\n\n var requestOptions = {\n method: 'POST',\n headers: myHeaders,\n body: urlencoded,\n redirect: 'follow'\n };\n\n let token = await fetch(\"https://carerha.com/oauth2/access_token/\", requestOptions)\n .then(response => response.json())\n .then(result => {\n let token = result.access_token\n return token\n })\n .catch(error => console.log('error', error))\n\n return token\n}\n\n\nexport async function getProgramDetials(programId) {\n\n const access_token = await publicToken()\n\n let myHeaders = new Headers();\n myHeaders.append(\"Authorization\", `jwt ${access_token}`);\n\n var requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n try {\n let programDetails = await fetch(`https://discovery.carerha.com/api/v1/programs/${programId}`, requestOptions)\n .then(response => response.json())\n .then(result => result)\n .catch(error => console.log('error', error));\n return programDetails\n\n } catch (error) {\n console.log('error', error)\n\n }\n}\nexport async function getPrograms() {\n try {\n const access_token = await publicToken();\n\n let myHeaders = new Headers();\n myHeaders.append(\"Authorization\", `jwt ${access_token}`);\n\n var requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n const response = await fetch(`https://discovery.carerha.com/api/v1/programs/`, requestOptions);\n const result = await response.json();\n\n return result.results;\n } catch (error) {\n console.error('Error fetching programs:', error);\n throw error;\n }\n}\nexport async function getSimilarPrograms(type) {\n try {\n const access_token = await publicToken();\n\n let myHeaders = new Headers();\n myHeaders.append(\"Authorization\", `jwt ${access_token}`);\n\n var requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n const response = await fetch(`https://discovery.carerha.com/api/v1/programs/?types=${type}`, requestOptions)\n const result = await response.json();\n return result\n\n\n } catch (error) {\n console.log('error.message', ({\n Data: false,\n message: error.message\n }))\n return ({\n Data: false,\n message: error.message\n })\n }\n}\n\n\n\n\nfunction localOutlines(block) {\n let { course_blocks } = block\n let objOutlines = {}\n let seq = []\n\n // data mislead in obj and values\n\n Object.values(course_blocks).map(e => {\n Object.values(e).map(ele => {\n\n // if (ele.type === \"chapter\") {\n // seq = ele.children.map(subElement => e[subElement])\n // objOutlines[ele.display_name] = seq\n // seq = []\n // }\n\n ele.type === \"chapter\" && (seq = ele.children.map(subElement => e[subElement]), objOutlines[ele.display_name] = seq, seq = [])\n })\n })\n\n return objOutlines\n\n}\n\nexport async function getCourseOutlines(encodedId) {\n try {\n let authenticatedHttpClient = await getAuthenticatedHttpClient()\n let { data } = await authenticatedHttpClient.get(`${getConfig().LMS_BASE_URL}/api/course_home/outline/${encodedId}`)\n let objOutlines = localOutlines(data)\n return objOutlines\n } catch (error) {\n console.log('error.message', ({\n Data: false,\n message: error.message\n }))\n return ({\n Data: false,\n message: error.message\n })\n\n }\n\n\n}\n\nexport async function getCourseInstructor(courseId) {\n let myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n\n var requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n try {\n const data = await fetch(`${getConfig().LMS_BASE_URL}/api/contentstore/v1/instructors?course_key=${courseId}`, requestOptions)\n const jsonData = await data.json()\n console.log('jsonData', jsonData)\n return jsonData\n } catch (error) {\n console.log('error.message', ({\n Data: false,\n message: error.message\n }))\n return ({\n Data: false,\n message: error.message\n })\n }\n}\n\n\nexport async function getCoursesSameCategory(org) {\n\n\n try {\n\n let data = await fetch(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/?org=${org}`)\n let { results } = await data.json()\n return results\n\n } catch (error) {\n console.log('error.message', ({\n Data: false,\n message: error.message\n }))\n return ({\n Data: false,\n message: error.message\n })\n }\n}\n\n","import { Spinner } from '@edx/paragon'\nimport React, { useEffect, useState } from 'react'\nimport { useParams } from 'react-router-dom'\nimport BannerImage from './BannerImage'\nimport CardDetialsProgramAboutPage from './CardDetialsProgramAboutPage'\nimport ParsedHTML from './ParsedHTML'\nimport ProgramDetailsInstructorCard from \"./ProgramDetailsInstructorCard\"\nimport RelatedPrograms from './RelatedPrograms'\nimport Syllabus from './Syllabus'\nimport { getProgramDetials, getSimilarPrograms } from './api'\n\nfunction ProgramAboutPage() {\n const { programId } = useParams()\n const [programData, setProgramData] = useState({})\n const [enrollmentData, setEnrollmentData] = useState({})\n const [courseInstructor, setCourseInstructor] = useState({})\n const [programsSameCategory, setProgramsSameCategory] = useState([])\n const [fetchData, setFetchData] = useState(true)\n const [syllabus, setSyllabus] = useState({})\n\n function fetch() {\n\n Promise.all([\n getProgramDetials(programId),\n // postCourseEnrollment(programId)\n // getCourseInstructor(courseId)\n ]).then(values => {\n setProgramData(values[0])\n getSimilarPrograms(values[0].type_attrs.slug)\n .then(res => {\n let { results } = res\n let filteredProgs = results.filter(prog => prog.uuid !== programId)\n // setProgramsSameCategory(res.results)\n setProgramsSameCategory(filteredProgs)\n })\n .catch(e => {\n console.log(e, \"e\")\n })\n })\n .catch(error => console.log('error', error))\n .finally(() => {\n setFetchData(false)\n })\n }\n\n useEffect(() => {\n fetch()\n }, [])\n\n if (fetchData) return \n {/* 
*/}\n
\n {courses.length > 0 ?\n Syllabus:
\n{courses.length} Courses
\n\n
\n\n return (\n\n \n
\n )\n}\n\nexport default ProgramAboutPage","import React, { useEffect, useState } from 'react';\nimport { Collapsible } from '@edx/paragon';\nimport { Helmet } from 'react-helmet';\nimport ProgramCard from './ProgramCard/ProgramCard';\nimport { getPrograms } from '../program-about/api';\nimport { Checkbox, FormControlLabel } from '@mui/material';\nimport queryString from 'query-string';\nimport './AllPrograms.css';\n\nfunction AllPrograms() {\n const [programsList, setProgramsList] = useState([]);\n const [selectedCategories, setSelectedCategories] = useState([]);\n const [selectedType, setSelectedType] = useState([]);\n const [expandedView, setExpandedView] = useState(true);\n const [selectedPrice, setSelectedPrice] = useState([]);\n const [selectedLevel, setSelectedLevel] = useState([]);\n const [selectedLearningExperience, setSelectedLearningExperience] = useState([]);\n const [selectedAvailability, setSelectedAvailability] = useState([]);\n const [selectedEmployers, setSelectedEmployers] = useState([]);\n const [cat, setCat] = useState([]);\n const [employers, setEmployers] = useState([]);\n const [programRatings, setProgramRatings] = useState({});\n\n const handleToggleView = () => {\n setExpandedView(!expandedView);\n };\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const programsData = await getPrograms();\n console.log('programsData>>>>', programsData)\n setProgramsList(programsData);\n } catch (error) {\n console.error('Error setting programs in state:', error);\n }\n };\n\n fetchData();\n }, []);\n\n async function getCatigories() {\n try {\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n\n const res = await fetch(\"https://studio.carerha.com/api/contentstore/v1/categories\", requestOptions);\n const results = await res.json();\n setCat(results);\n } catch (error) {\n console.error(error);\n }\n }\n\n async function publicToken() {\n const myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/x-www-form-urlencoded\");\n\n const urlencoded = new URLSearchParams();\n urlencoded.append(\"client_id\", \"yHY7kXcHgg95qpMHMKc7NioVRT8bIBxCQkLxclg3\");\n urlencoded.append(\"client_secret\", \"rivktk331PuSQXEhyVmBBRIab1sV58jS2awgGduXB1I24yDiOmMFG20UBh2UYshFpG5Tfrevb9xfozruB0dtcM4secPXc4y4dRx0RhWHOTiz2tRqoc3Rlzl5iK5ikdXI\");\n urlencoded.append(\"grant_type\", \"client_credentials\");\n urlencoded.append(\"token_type\", \"jwt\");\n\n const requestOptions = {\n method: 'POST',\n headers: myHeaders,\n body: urlencoded,\n redirect: 'follow'\n };\n\n const token = await fetch(\"https://carerha.com/oauth2/access_token/\", requestOptions)\n .then(response => response.json())\n .then(result => result.access_token)\n .catch(error => console.log('error', error));\n\n return token;\n }\n\n async function getEmployers() {\n try {\n const access_token = await publicToken();\n\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n myHeaders.append(\"Authorization\", `jwt ${access_token}`);\n\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n\n const res = await fetch(\"https://carerha.com/api/extraorg/v1/extraorg/\", requestOptions);\n const results = await res.json();\n const employerNames = results.results.map(org => org.organization.name);\n setEmployers(employerNames);\n } catch (error) {\n console.error(error);\n }\n }\n\n useEffect(() => {\n getCatigories();\n getEmployers();\n }, []);\n\n useEffect(() => {\n const params = queryString.parse(window.location.search);\n params.level = selectedLevel.join(',');\n params.categories = selectedCategories.join(',');\n params.type = selectedType.join(',');\n params.learningExperience = selectedLearningExperience.join(',');\n params.availability = selectedAvailability.join(',');\n params.price = selectedPrice.join(',');\n const newUrl = `${window.location.pathname}?${queryString.stringify(params)}`;\n window.history.replaceState({}, '', newUrl);\n\n localStorage.setItem('selectedLevel', JSON.stringify(selectedLevel));\n localStorage.setItem('selectedCategories', JSON.stringify(selectedCategories));\n localStorage.setItem('selectedType', JSON.stringify(selectedType));\n localStorage.setItem('selectedLearningExperience', JSON.stringify(selectedLearningExperience));\n localStorage.setItem('selectedAvailability', JSON.stringify(selectedAvailability));\n localStorage.setItem('selectedPrice', JSON.stringify(selectedPrice));\n }, [selectedLevel, selectedCategories, selectedType, selectedLearningExperience, selectedAvailability, selectedPrice]);\n\n useEffect(() => {\n const params = queryString.parse(window.location.search);\n setSelectedLevel(params.level ? params.level.split(',') : JSON.parse(localStorage.getItem('selectedLevel') || '[]'));\n setSelectedCategories(params.categories ? params.categories.split(',') : JSON.parse(localStorage.getItem('selectedCategories') || '[]'));\n setSelectedType(params.type ? params.type.split(',') : JSON.parse(localStorage.getItem('selectedType') || '[]'));\n setSelectedLearningExperience(params.learningExperience ? params.learningExperience.split(',') : JSON.parse(localStorage.getItem('selectedLearningExperience') || '[]'));\n setSelectedAvailability(params.availability ? params.availability.split(',') : JSON.parse(localStorage.getItem('selectedAvailability') || '[]'));\n setSelectedPrice(params.price ? params.price.split(',') : JSON.parse(localStorage.getItem('selectedPrice') || '[]'));\n }, []);\n\n const filteredPrograms = programsList.filter(program => (\n (!selectedLevel.length || selectedLevel.includes(program.level)) &&\n (selectedCategories.length === 0 || selectedCategories.some(category => program.labels.includes(category))) &&\n (!selectedType.length || selectedType.includes(program.pacing)) &&\n (!selectedLearningExperience.length || selectedLearningExperience.includes(program.learning_experience)) &&\n (!selectedAvailability.length || selectedAvailability.includes(program.availability)) &&\n (!selectedPrice.length || selectedPrice.includes(program.subscription_prices.length === 0 ? 'Free' : 'Paid')) &&\n (!selectedEmployers.length || program.authoring_organizations.some(org => selectedEmployers.includes(org.key)))\n ));\n\n const fetchProgramRating = async (programId) => {\n try {\n const requestOptions = {\n method: \"GET\",\n redirect: \"follow\"\n };\n\n const response = await fetch(`https://reviews.carerha.com/api/program_reviews/${programId}/average/`, requestOptions);\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n const result = await response.json();\n return { average_rate: result.average_rate || 0, review_count: result.review_count || 0 };\n } catch (error) {\n console.error('Error fetching average rating:', error);\n return { average_rate: 0, review_count: 0 };\n }\n };\n\n useEffect(() => {\n const fetchAllProgramRatings = async () => {\n const ratings = {};\n for (const program of programsList) {\n const ratingData = await fetchProgramRating(program.uuid);\n ratings[program.uuid] = ratingData;\n }\n setProgramRatings(ratings);\n };\n\n if (programsList.length > 0) {\n fetchAllProgramRatings();\n }\n }, [programsList]);\n\n const handleMultiSelectChange = (selectedArray, setSelectedArray, value) => {\n const updatedArray = selectedArray.includes(value)\n ? selectedArray.filter(item => item !== value)\n : [...selectedArray, value];\n setSelectedArray(updatedArray);\n };\n\n const handleClearFilters = () => {\n setSelectedLevel([]);\n setSelectedCategories([]);\n setSelectedType([]);\n setSelectedLearningExperience([]);\n setSelectedAvailability([]);\n setSelectedPrice([]);\n setSelectedEmployers([]);\n\n const params = {};\n if (selectedLevel) params.level = selectedLevel.join(',');\n if (selectedCategories.length > 0) params.categories = selectedCategories.join(',');\n if (selectedType) params.type = selectedType.join(',');\n if (selectedPrice) params.price = selectedPrice.join(',');\n if (selectedEmployers.length > 0) params.employers = selectedEmployers.join(',');\n\n Object.keys(params).forEach(key => (params[key] === '' || params[key] === undefined) && delete params[key]);\n\n const newUrl = Object.keys(params).length > 0\n ? `${window.location.pathname}?${queryString.stringify(params)}`\n : window.location.pathname;\n\n window.history.replaceState({}, '', newUrl);\n };\n\n const isAnyFilterActive = selectedLevel.length > 0 || selectedCategories.length > 0 || selectedType.length > 0 ||\n selectedLearningExperience.length > 0 || selectedAvailability.length > 0 || selectedPrice.length > 0 ||\n selectedEmployers.length > 0;\n\n return (\n <>\n \n
\n \n
\n \n
\n Our Programs
\n\n
\n \n );\n}\n\nexport default AllPrograms;\n","export default __webpack_public_path__ + \"ba920c11339737c4b04e7cf93b3a6a1a.png\";","export default __webpack_public_path__ + \"2c980ba9a8a9e541d38630d2a264c9d5.png\";","export default __webpack_public_path__ + \"2ece401533d149800e762233f9f9f3bd.png\";","export default __webpack_public_path__ + \"9120ad7fe9b77f007a83ec17add43848.png\";","export default __webpack_public_path__ + \"cc244b45bb0720089a6335a64e8ae38f.png\";","import React, { useEffect, useState } from 'react';\nimport contentImage from '../../../public/assets/content.png';\nimport './IntroSection.css';\nimport icon1 from '../../../public/assets/Group 4.png';\nimport icon2 from '../../../public/assets/Group 5.png';\nimport icon3 from '../../../public/assets/Group 6.png';\nimport icon4 from '../../../public/assets/Group 9.png';\n\nfunction IntroSection() {\n const [animatedNumbers, setAnimatedNumbers] = useState({\n number1: 0,\n number2: 0,\n number3: 0,\n number4: 0,\n number5: 0,\n });\n\n const animateNumbers = () => {\n const targetNumbers = {\n number1: 60,\n number2: 90,\n number3: 50,\n number4: 17,\n number5: 12,\n };\n\n const animationDuration = 2000; // Adjust the duration as needed\n const interval = 50; // Adjust the interval as needed\n\n Object.keys(targetNumbers).forEach((key) => {\n const startNumber = 0;\n const increment = (targetNumbers[key] - startNumber) / (animationDuration / interval);\n\n let currentNumber = startNumber;\n\n const intervalId = setInterval(() => {\n currentNumber += increment;\n\n setAnimatedNumbers((prevNumbers) => ({\n ...prevNumbers,\n [key]: Math.round(currentNumber),\n }));\n\n if (currentNumber >= targetNumbers[key]) {\n clearInterval(intervalId);\n }\n }, interval);\n });\n };\n\n useEffect(() => {\n animateNumbers();\n }, []);\n\n const textMapping = {\n number1: \"Active Women \",\n number2: \"Master Classes\",\n number3: \"Courses\",\n number4: \"Programs\",\n number5: \"Events Attendees\",\n };\n\n const iconMapping = {\n number1: icon3,\n number2: icon2,\n number3: icon4,\n number4: icon4,\n number5: icon1, // You can change this to the appropriate icon\n };\n\n const renderNumberWithUnit = (key) => {\n const value = animatedNumbers[key];\n const shouldAddK = key === 'number1' || key === 'number5';\n\n return (\n \n \n \n
\n \n
\n \n {expandedView && (\n
\n\n \n Price} defaultOpen>\n \n Employer} defaultOpen>\n \n Type} defaultOpen>\n \n Learning Experience} defaultOpen>\n \n \n {cat.map((category) => (\n \n Level} defaultOpen>\n \n Availability} defaultOpen>\n \n
\n )}\n \n handleMultiSelectChange(selectedPrice, setSelectedPrice, 'Free')}\n />\n }\n label=\"Free\"\n />\n
\n \n handleMultiSelectChange(selectedPrice, setSelectedPrice, 'Paid')}\n />\n }\n label=\"Paid\"\n />\n
\n \n {employers.map(employer => (\n handleMultiSelectChange(selectedEmployers, setSelectedEmployers, employer)}\n />\n }\n label={employer}\n />\n ))}\n
\n \n handleMultiSelectChange(selectedType, setSelectedType, 'instructor')}\n />\n }\n label=\"Live\"\n />\n
\n \n handleMultiSelectChange(selectedType, setSelectedType, 'self')}\n />\n }\n label=\"Recorded\"\n />\n
\n \n handleMultiSelectChange(selectedLearningExperience, setSelectedLearningExperience, 'Online')}\n />\n }\n label=\"Online\"\n />\n
\n \n handleMultiSelectChange(selectedLearningExperience, setSelectedLearningExperience, 'Offline')}\n />\n }\n label=\"Offline\"\n />\n
\n \n handleMultiSelectChange(selectedLearningExperience, setSelectedLearningExperience, 'Hybrid')}\n />\n }\n label=\"Hybrid\"\n />\n
\n \n handleMultiSelectChange(selectedCategories, setSelectedCategories, category.name)}\n />\n }\n label={category.name}\n />\n
\n ))}\n \n handleMultiSelectChange(selectedLevel, setSelectedLevel, 'Beginner')}\n />\n }\n label=\"Beginner\"\n />\n
\n \n handleMultiSelectChange(selectedLevel, setSelectedLevel, 'Intermediate')}\n />\n }\n label=\"Intermediate\"\n />\n
\n \n handleMultiSelectChange(selectedLevel, setSelectedLevel, 'Advanced')}\n />\n }\n label=\"Advanced\"\n />\n
\n \n handleMultiSelectChange(selectedAvailability, setSelectedAvailability, 'Current')}\n />\n }\n label=\"Current\"\n />\n
\n \n handleMultiSelectChange(selectedAvailability, setSelectedAvailability, 'Upcoming')}\n />\n }\n label=\"Upcoming\"\n />\n
\n \n handleMultiSelectChange(selectedAvailability, setSelectedAvailability, 'Previous')}\n />\n }\n label=\"Previous\"\n />\n
\n \n {filteredPrograms.map((program) => {\n const rating = programRatings[program.uuid] || { average_rate: 0, review_count: 0 };\n return (\n
\n \n
\n );\n };\n\n return (\n \n
\n {shouldAddK ? `${value}k` : value}
\n\n 
\n
\n \n {textMapping[key]}\n
\n\n
\n );\n}\n\nexport default IntroSection;\n","import React, { useEffect, useState } from 'react';\nimport './SuggestedCourses.css';\nimport CourseCard from '../../AllCourses/CourseCard/CourseCard';\nimport Tabs from '@mui/material/Tabs';\nimport Tab from '@mui/material/Tab';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\ngsap.registerPlugin(ScrollTrigger);\n\nfunction SuggestedCourses() {\n const [coursesList, setCoursesList] = useState([]);\n const [categories, setCategories] = useState([]);\n const [value, setValue] = useState(0);\n\n const handleChange = (event, newValue) => {\n setValue(newValue);\n };\n\n useEffect(() => {\n const fetchCategories = async () => {\n try {\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n myHeaders.append(\"Cookie\", \"openedx-language-preference=en; sessionid=1|x5d0ofalc45cm27ivoap89up5h88nieh|FWGJYmxsY22e|ImFkYmZmYjU2M2Y0MDViZDcyMzUxMzI2MThlYjZkYjEwZDMxZTc2ZDI5ZWNiNGZiODYzOWZmM2JiN2E4NjBlNDUi:1ry0Oi:q3xiSxVgZKZ9HITYLYaG_i4mzYc\");\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n const response = await fetch(\"https://studio.carerha.com/api/contentstore/v1/categories\", requestOptions);\n const result = await response.json();\n setCategories(result);\n } catch (error) {\n console.error('Error fetching categories:', error);\n }\n };\n\n fetchCategories();\n }, []);\n\n useEffect(() => {\n const getCategoryFilter = () => {\n // Fetch all courses without filtering by category when the \"All\" tab is selected\n if (value === 0) {\n return '';\n } else {\n // Fetch courses based on the selected category\n return categories[value - 1]?.name || '';\n }\n };\n\n const categoryFilter = getCategoryFilter();\n console.log('Selected Category:', categoryFilter); // Log selected category\n\n var myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/json\");\n myHeaders.append(\"Cookie\", \"your-cookie-here\");\n\n var requestOptions = {\n method: 'GET',\n headers: myHeaders,\n redirect: 'follow'\n };\n\n // Conditionally fetch courses based on the selected category\n const apiUrl = categoryFilter ?\n `https://carerha.com/api/courses/v1/courses/?category=${encodeURIComponent(categoryFilter)}` :\n `https://carerha.com/api/courses/v1/courses/`;\n\n console.log('Fetching URL:', apiUrl); // Log API URL\n\n fetch(apiUrl, requestOptions)\n .then(response => {\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n return response.json();\n })\n .then(result => {\n console.log('API Result:', result); // Log API result\n const filteredResults = result.results.filter(course => course.not_part_of_program); // Filter courses correctly\n setCoursesList(filteredResults);\n console.log('Filtered Results:', filteredResults); // Log filtered results\n })\n .catch(error => {\n console.error('Fetch error:', error);\n });\n }, [value, categories]);\n\n return (\n \n \n Invest in yourself\n
\n
\n \n Invest in yourself\n
\n Earn the returns!\n
\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n
\n );\n}\n\nexport default SuggestedCourses;\n","import React, { useEffect, useState } from 'react';\nimport './SuggestedProgram.css';\nimport { getPrograms } from '../../program-about/api';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport ProgramCard from '../../AllPrograms/ProgramCard/ProgramCard';\n\nfunction SuggestedProgram() {\n const [programsList, setProgramsList] = useState([]);\n const [programRatings, setProgramRatings] = useState({});\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const programsData = await getPrograms();\n setProgramsList(programsData);\n console.log(programsData, \"programsData\");\n } catch (error) {\n console.error('Error setting programs in state:', error);\n }\n };\n\n fetchData();\n }, []);\n\n const fetchProgramRating = async (programId) => {\n try {\n const requestOptions = {\n method: \"GET\",\n redirect: \"follow\"\n };\n\n const response = await fetch(`https://reviews.carerha.com/api/program_reviews/${programId}/average/`, requestOptions);\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n const result = await response.json();\n console.log(result, \"response average\");\n return { average_rate: result.average_rate || 0, review_count: result.review_count || 0 };\n } catch (error) {\n console.error('Error fetching average rating:', error);\n return { average_rate: 0, review_count: 0 };\n }\n };\n\n useEffect(() => {\n const fetchAllProgramRatings = async () => {\n const ratings = {};\n for (const program of programsList) {\n const ratingData = await fetchProgramRating(program.uuid);\n ratings[program.uuid] = ratingData;\n }\n setProgramRatings(ratings);\n };\n\n if (programsList.length > 0) {\n fetchAllProgramRatings();\n }\n }, [programsList]);\n\n const displayedPrograms = programsList.slice(3, 5); // Display only the first two programs\n\n return (\n \n
\n Explore Our Courses
\n \n\n \n \n
\n\n {coursesList.length === 0 ? (\n \n
\n ) : (\n STAY TUNED
\nFOR OUR UPCOMING\n
\n COURSES & PROGRAMS
\n {coursesList.slice(0, 4).map((course, index) => ( // Limit to first 4 courses\n
\n )}\n \n
\n ))}\n \n
\n );\n}\n\nexport default SuggestedProgram;\n","import React, { useContext } from 'react';\nimport './OurCommunity.css';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport { AppContext } from '@edx/frontend-platform/react';\n\nfunction OurCommunity() {\n const { authenticatedUser } = useContext(AppContext) || {};\n\n const handleJoinNowClick = () => {\n if (authenticatedUser) {\n window.location.assign('https://apps.carerha.com/discussions/course-v1:Carerha+Carerha+Community/posts'); // replace with your desired link\n } else {\n window.location.assign('https://apps.carerha.com/authn/login'); // replace with your desired link\n }\n };\n\n return (\n <>\n \n
\n\n {displayedPrograms?.map((program, index) => (\n Explore Our Programs
\n \n \n \n\n \n Find your support system.\n
\n
\n \n Find your support system.\n
\n \n Join our community offering expert advice a supportive network, and\n
\n empowering resources to fulfill your career journey\n \n
\n \n
\n \n );\n}\n\nexport default OurCommunity;\n","export default __webpack_public_path__ + \"a3f7ba6eb8c8269f6995ab0654c695cb.jpg\";","import React, { useEffect } from 'react'\nimport partners from '../../../public/assets/Partners1.jpg'\nimport './OurPartners.css'\n\n\nfunction OurPartners() {\n\n return (\n \n \n Join Our\n
\n \n
\n \n Join Our\n
\n Community\n
\n \n \n
\n\n\n )\n}\n\nexport default OurPartners","export default __webpack_public_path__ + \"3da4db3dd0c050f18d2c31f7c1f2478a.png\";","export default __webpack_public_path__ + \"22af17b5fef84cc27c60b242c98c86d5.png\";","export default __webpack_public_path__ + \"89b5c67be49ea72c44c18cebc6fe13f5.png\";","export default __webpack_public_path__ + \"bd0b20d157ef91d2eeabf9c75818fea7.png\";","export default __webpack_public_path__ + \"9dc410d954f0d0838677bb0d2bd31994.png\";","export default __webpack_public_path__ + \"4d68ae8bd41f218be4b075ce92b77915.png\";","export default __webpack_public_path__ + \"d216f4dd16d9d80f7d685b6dede89f1a.png\";","export default __webpack_public_path__ + \"256aaa3bbf965b704341b0f4e3d1d3fc.png\";","export default __webpack_public_path__ + \"1336b67cc711a12d4235355081e4ff47.png\";","export default __webpack_public_path__ + \"cf4ac71c5ab2be9ed7606cfe9c32211c.png\";","export default __webpack_public_path__ + \"52420dbbe791a39e6d829a60f4ca5c76.png\";","export default __webpack_public_path__ + \"a5e52c40c494bca235ac6a9189276b10.png\";","export default __webpack_public_path__ + \"352d02a06567f566c807312f2b178dc9.png\";","export default __webpack_public_path__ + \"dee103136f93fb908acd91ea2822caba.png\";","export default __webpack_public_path__ + \"2edde14f87661bef887f0bab646a61a6.png\";","export default __webpack_public_path__ + \"6d31447521a800b7834ef5fe09eaeff6.png\";","export default __webpack_public_path__ + \"751014c766d731632dbf3dc33cc8840c.png\";","export default __webpack_public_path__ + \"876a50ff8efe680c54886d5635f06524.png\";","export default __webpack_public_path__ + \"1e71fc4b640f097585b0a8274b766dcf.png\";","export default __webpack_public_path__ + \"249b17b29707f4202650968ddba5ca36.png\";","export default __webpack_public_path__ + \"4d317817278276644edcc4fd6dde84f3.png\";","export default __webpack_public_path__ + \"dfc31c69580a1d331dff4d53d448046f.png\";","export default __webpack_public_path__ + \"6d3e0516986a57cf96f50cc499101d0b.png\";","export default __webpack_public_path__ + \"a41cafb1dfc623de5f88e99ffd8fde78.png\";","export default __webpack_public_path__ + \"b4a4b5377694453f84b6de737f0e6093.png\";","export default __webpack_public_path__ + \"ce1161d318685f86bd0636cf024938ad.png\";","export default __webpack_public_path__ + \"d560c49026da82edba356db881a48ff4.png\";","export default __webpack_public_path__ + \"d9ee40942dce713a4ecf4dd2b76d06d8.png\";","export default __webpack_public_path__ + \"4c27fa5c9670417a1101c0a898784abb.png\";","export default __webpack_public_path__ + \"33ddaff1ae63f78e6ae193f937162b90.png\";","export default __webpack_public_path__ + \"1a1f2b05d647f9b4ac67c12c3347d899.png\";","export default __webpack_public_path__ + \"46402919e33a81179fc869c4f6e2b1af.png\";","export default __webpack_public_path__ + \"aa879d7e6d5e7071778bc4a3720cdc8d.png\";","export default __webpack_public_path__ + \"58ca484d4bbbb7429b748bdfebcdb9e3.png\";","export default __webpack_public_path__ + \"e47533a9d2d586330e6cde026e248a72.png\";","export default __webpack_public_path__ + \"ecfa5880bb1d43512ae07f088c0feca8.png\";","export default __webpack_public_path__ + \"b14c227ac2580bc472ad44178d4f08b4.png\";","export default __webpack_public_path__ + \"91cce785b7b84a4617d311c94117a2ee.png\";","export default __webpack_public_path__ + \"ed03eb2ed1c7fd9c2f6c3ab9655987d0.png\";","export default __webpack_public_path__ + \"7d9bdb1e97b73b886f88097b42dd3ff8.png\";","export default __webpack_public_path__ + \"69f73e13a9c43e7561f4ceca6f28ac46.png\";","export default __webpack_public_path__ + \"811ad7b64f8f6b8fab513a64b2c8fdc0.png\";","export default __webpack_public_path__ + \"fd3d34bbe23f254d33e6e1f27dafe79e.png\";","export default __webpack_public_path__ + \"b9af093da7feaa6f6e7cc9bbebf309ed.png\";","export default __webpack_public_path__ + \"89a5b95a6a803f3312a5879afbe7b7a2.png\";","export default __webpack_public_path__ + \"e86951131f7862580340e3680974893d.png\";","export default __webpack_public_path__ + \"796fb1cb95cd3527cd11852c97bf8964.png\";","export default __webpack_public_path__ + \"08f92f460d8f4c9e97a55f98e0bd1ecd.png\";","export default __webpack_public_path__ + \"e4a4ad3bdb322d03b9eee3845325e89d.png\";","export default __webpack_public_path__ + \"2cc5044fad60d508a3908a675e690cae.png\";","export default __webpack_public_path__ + \"43b7c6b135962e20bf11fa353eb61624.png\";","export default __webpack_public_path__ + \"f0aa3b76211819aec38664eab89f1638.png\";","export default __webpack_public_path__ + \"ff001ba1e031d1a0eea754b76e8d885c.png\";","export default __webpack_public_path__ + \"35843fcd7a8a667935088045d2a39db3.png\";","export default __webpack_public_path__ + \"5262d9558907490db8ed820670915c62.png\";","export default __webpack_public_path__ + \"24c2b07e7305004fd23cfefcaf11bf35.png\";","export default __webpack_public_path__ + \"b131a3eabb3e7f4e6bd32cefca31150a.png\";","export default __webpack_public_path__ + \"6296b2846a3376c4497657a78d2e606e.png\";","export default __webpack_public_path__ + \"a78e3bfa330ee67427667828b2eb4d39.png\";","export default __webpack_public_path__ + \"5710bbbec8b1d2f4bbf46bdad40b695a.png\";","export default __webpack_public_path__ + \"e4dd17ac2c0a4c9cc8b644e5fe36da44.png\";","export default __webpack_public_path__ + \"0bccbb3a9062a995bc6034f8397affd7.png\";","export default __webpack_public_path__ + \"a5023edca91cf429fe5baad417341eff.png\";","export default __webpack_public_path__ + \"d820fb480469fc7396a0d3c418c71066.png\";","export default __webpack_public_path__ + \"94f151e2e37612309665f9aa6541c397.png\";","export default __webpack_public_path__ + \"67b5578c96e22117c5ffd38b929d7eb3.png\";","export default __webpack_public_path__ + \"5a276546bc85968f70eb7cec6d0cdf60.png\";","export default __webpack_public_path__ + \"e4cf2fee57017312ea3a14ccdedaf8c6.png\";","export default __webpack_public_path__ + \"8ca8fc13377b32b764e61df24dbf343a.png\";","export default __webpack_public_path__ + \"6ed25501b48da810e8218332f8234e03.png\";","export default __webpack_public_path__ + \"4edad927cb643377f853a1aae5f4dd7b.png\";","export default __webpack_public_path__ + \"03fffff563d724cda8cf47c6343cc34b.png\";","import React from 'react';\nimport { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\n\nfunction SpeakerDialog({ isOpen, speaker, onClose }) {\n return (\n \n );\n}\n\nexport default SpeakerDialog;\n","import React, { useState } from 'react';\nimport './Network.css';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport { Autoplay, Navigation, Pagination } from 'swiper/modules';\nimport number1 from '../../../public/assets/ourNetwork/1.png';\nimport number2 from '../../../public/assets/ourNetwork/2.png';\nimport number3 from '../../../public/assets/ourNetwork/3.png';\nimport number4 from '../../../public/assets/ourNetwork/4.png';\nimport number5 from '../../../public/assets/ourNetwork/5.png';\nimport number6 from '../../../public/assets/ourNetwork/6.png';\nimport number7 from '../../../public/assets/ourNetwork/7.png';\nimport number8 from '../../../public/assets/ourNetwork/8.png';\nimport number9 from '../../../public/assets/ourNetwork/9.png';\nimport number10 from '../../../public/assets/ourNetwork/10.png';\nimport number11 from '../../../public/assets/ourNetwork/11.png';\nimport number12 from '../../../public/assets/ourNetwork/12.png';\nimport number13 from '../../../public/assets/ourNetwork/13.png';\nimport number14 from '../../../public/assets/ourNetwork/14.png';\nimport number15 from '../../../public/assets/ourNetwork/15.png';\nimport number16 from '../../../public/assets/ourNetwork/16.png';\nimport number17 from '../../../public/assets/ourNetwork/17.png';\nimport number18 from '../../../public/assets/ourNetwork/18.png';\nimport number19 from '../../../public/assets/ourNetwork/19.png';\nimport number20 from '../../../public/assets/ourNetwork/20.png';\nimport number21 from '../../../public/assets/ourNetwork/21.png';\nimport number22 from '../../../public/assets/ourNetwork/22.png';\nimport number23 from '../../../public/assets/ourNetwork/23.png';\nimport number24 from '../../../public/assets/ourNetwork/24.png';\nimport number25 from '../../../public/assets/ourNetwork/25.png';\nimport number26 from '../../../public/assets/ourNetwork/26.png';\nimport number27 from '../../../public/assets/ourNetwork/27.png';\nimport number28 from '../../../public/assets/ourNetwork/28.png';\nimport number29 from '../../../public/assets/ourNetwork/29.png';\nimport number30 from '../../../public/assets/ourNetwork/30.png';\nimport number31 from '../../../public/assets/ourNetwork/31.png';\nimport number32 from '../../../public/assets/ourNetwork/32.png';\nimport number33 from '../../../public/assets/ourNetwork/33.png';\nimport number34 from '../../../public/assets/ourNetwork/34.png';\nimport number35 from '../../../public/assets/ourNetwork/35.png';\nimport number36 from '../../../public/assets/ourNetwork/36.png';\nimport number37 from '../../../public/assets/ourNetwork/37.png';\nimport number38 from '../../../public/assets/ourNetwork/38.png';\nimport number39 from '../../../public/assets/ourNetwork/39.png';\nimport number40 from '../../../public/assets/ourNetwork/40.png';\nimport number41 from '../../../public/assets/ourNetwork/41.png';\nimport number42 from '../../../public/assets/ourNetwork/42.png';\nimport number43 from '../../../public/assets/ourNetwork/43.png';\nimport number44 from '../../../public/assets/ourNetwork/44.png';\nimport number45 from '../../../public/assets/ourNetwork/45.png';\nimport number46 from '../../../public/assets/ourNetwork/46.png';\nimport number47 from '../../../public/assets/ourNetwork/47.png';\nimport number48 from '../../../public/assets/ourNetwork/48.png';\nimport number49 from '../../../public/assets/ourNetwork/49.png';\nimport number50 from '../../../public/assets/ourNetwork/50.png';\nimport number51 from '../../../public/assets/ourNetwork/51.png';\nimport number52 from '../../../public/assets/ourNetwork/52.png';\nimport number53 from '../../../public/assets/ourNetwork/53.png';\nimport number54 from '../../../public/assets/ourNetwork/54.png';\nimport number55 from '../../../public/assets/ourNetwork/55.png';\nimport number56 from '../../../public/assets/ourNetwork/56.png';\nimport number57 from '../../../public/assets/ourNetwork/57.png';\nimport number58 from '../../../public/assets/ourNetwork/58.png';\nimport number59 from '../../../public/assets/ourNetwork/59.png';\nimport number60 from '../../../public/assets/ourNetwork/60.png';\nimport number61 from '../../../public/assets/ourNetwork/61.png';\nimport number62 from '../../../public/assets/ourNetwork/62.png';\nimport number63 from '../../../public/assets/ourNetwork/63.png';\nimport number64 from '../../../public/assets/ourNetwork/64.png';\nimport number65 from '../../../public/assets/ourNetwork/65.png';\nimport number66 from '../../../public/assets/ourNetwork/66.png';\nimport number67 from '../../../public/assets/ourNetwork/67.png';\nimport number68 from '../../../public/assets/ourNetwork/68.png';\nimport number69 from '../../../public/assets/ourNetwork/69.png';\nimport number70 from '../../../public/assets/ourNetwork/70.png';\nimport number71 from '../../../public/assets/ourNetwork/71.png';\nimport number72 from '../../../public/assets/ourNetwork/72.png';\nimport SpeakerDialog from './SpeakerDialog'; // Import the SpeakerDialog component\n\n\n\nfunction Network() {\n const screenWidth = window.innerWidth;\n const speakers = [\n { id: 1, name: \"MIRNA ARIF\", title: \"General Manager-Microsoft Egypt\", work: \"General Manager-Microsoft Egypt\", image: number1 },\n { id: 2, name: \"MARWA ABBAS\", title: \"Title 2\", work: \"General Manager and Technology Leader - IBM Egypt\", image: number2 },\n { id: 3, name: \"MOHAMED ELMORSI\", title: \"Title 3\", work: \"Managing Director - Mondelez Egypt\", image: number3 },\n { id: 4, name: \"DR. GHADA KANDIL\", title: \"Title 4\", work: \"Chief Director - Bank of New York Mellon\", image: number4 },\n { id: 5, name: \"TAMER ALY \", title: \"Title 5\", work: \"Valeo Technical Center Vice President & Egypt General Manager \", image: number5 },\n { id: 6, name: \"LAMISE NEGM \", title: \"Title 6\", work: \"CSR Advisor to the Governor at Central Bank of Egypt. Head of sustainable Development Committee at the Federation of Egyptian Banks \", image: number6 },\n { id: 7, name: \"GHADA HAMMOUDA \", title: \"Title 7\", work: \"Chief Sustainability & Marketing Officer, Qalaa Holdings\", image: number7 },\n { id: 8, name: \"MANAL HASSAN\", title: \"Title 8\", work: \"Chief Sustainability officer El Sewedy Electric & Vice Chairman El Sewedy Foundation\", image: number8 },\n { id: 9, name: \"HODA DAHROUG\", title: \"Title 9\", work: \"National Project Director - Egypt ICT Trust Fund Ministry of communication & Information Technology\", image: number9 },\n { id: 10, name: \"NOHA LABIB\", title: \"Title 10\", work: \"Senior Strategic Accounts Sector Lead at Dell\", image: number10 },\n { id: 11, name: \"SARAH HANNA\", title: \"Title 11\", work: \"Director of Communications, Africa, Middle East & South Asia at Pepsico\", image: number11 },\n { id: 12, name: \"MAHIRA HASSAN\", title: \"Title 12\", work: \"CSR, Sustainability & Development Expert Consultant\", image: number12 },\n { id: 13, name: \"NAHLA KAMAL\", title: \"Title 13\", work: \"Director of Corporate Affairs & Sustainability at Nestle Middle East& North Africa at Nestle\", image: number13 },\n { id: 14, name: \"NAHLA MOKHTAR\", title: \"Title 14\", work: \"Communications & Sustainability Responsible Director at L'Oréal\", image: number14 },\n { id: 15, name: \"PASSANT FOAD\", title: \"Title 15\", work: \"External Relations Director at Juhayna\", image: number15 },\n { id: 16, name: \"RANA GAMALI \", title: \"Title 16\", work: \"Director, Corporate Affairs &Sustainability Coca-Cola HBC\", image: number16 },\n { id: 17, name: \"RANIA SALAH \", title: \"Title 17\", work: \"Head of HR Egypt Center & Global Care at Vodafone _VOIS\", image: number17 },\n { id: 18, name: \"MERHAM YOUSRI \", title: \"Title 18\", work: \"Head of Sustainability, Customer Excellence & Corporate Affairs at ADCB- Egypt\", image: number18 },\n { id: 19, name: \"MAY YASSIN \", title: \"Title 19\", work: \"Head of Sustainable Business & Secretary General Vodafone Egypt Foundation\", image: number19 },\n { id: 20, name: \"EMAN HUSSEIN \", title: \"Title 20\", work: \"Head of Talent & People Capabilities at Vodafone Egypt\", image: number20 },\n { id: 21, name: \"LAMIAA NASR \", title: \"Title 21\", work: \"Head of Learning, Talent Acquisition and Talent Management - HSBC Egypt \", image: number21 },\n { id: 22, name: \"AMIRA FARAG \", title: \"Title 22\", work: \"Head of Corporate & Government Affairs - Mashreq at Mondelez International\", image: number22 },\n { id: 23, name: \"NOURA ELBARADEI \", title: \"Title 23\", work: \"Regional Market Head in Mars Middle East & Africa\", image: number23 },\n { id: 24, name: \"WALAA SAAD \", title: \"Title 24\", work: \"Customer Care Director at Vodafone Egypt\", image: number24 },\n { id: 25, name: \"SALLY GASSER \", title: \"Title 25\", work: \"Head of Agile Practices at b_labs\", image: number25 },\n { id: 26, name: \"DARA GHOSHEH \", title: \" \", work: \"Founder Dara's Icecram\", image: number26 },\n { id: 27, name: \"WALID HASSOUNA \", title: \"Title 27\", work: \"CEO of valU \", image: number27 },\n { id: 28, name: \"MARIE THERESE\", title: \"Title 28\", work: \"Partner at Silicon Badia \", image: number28 },\n { id: 29, name: \"OSMAN BADRAN \", title: \"Title 29\", work: \"Branding Architect \", image: number29 },\n { id: 30, name: \"MONA ELBANNA\", title: \"Title 30\", work: \"Founder Monapetit Culinary School \", image: number30 },\n { id: 31, name: \"LAILA HASSAN\", title: \"Title 31\", work: \"General Partner at Algebra Ventures & Venture Partner at 500 Global\", image: number31 },\n { id: 32, name: \"YASMINE HENNA\", title: \"Title 32\", work: \"Co-founder & Chief Commercial & Product Officer at Sympl\", image: number32 },\n { id: 33, name: \"GILLAN SHAABBAN\", title: \"Title 33\", work: \"Chief Commercial Officer (CCO) at Paymob\", image: number33 },\n { id: 34, name: \"YARA ELABD\", title: \"Title 34\", work: \"Co-Founder & Chief Strategy Officer at Paynas\", image: number34 },\n { id: 35, name: \"MENNA EL KIEY\", title: \"Title 35\", work: \"Lyricist. Creative Director. Writer\", image: number35 },\n { id: 36, name: \"MAI GALAL\", title: \"Title 36\", work: \"Fashion & Styling Consultant \", image: number36 },\n { id: 37, name: \"FARAH EMARA\", title: \"Title 37\", work: \"Co-Founder of FreshSource\", image: number37 },\n { id: 38, name: \"YASMINE EL SHEIKH\", title: \"Title 38\", work: \"Head of People & Culture at Klivvr\", image: number38 },\n { id: 39, name: \"NESMA ELSHAZLY\", title: \"Title 39\", work: \"Founder & CEO of Stardust PR Agency\", image: number39 },\n { id: 40, name: \"SARAH MOUSSA\", title: \"Title 40\", work: \"Regional Communications at IFC, World Bank Group\", image: number40 },\n { id: 41, name: \"DR. RASHA RADY\", title: \"Title 41\", work: \"Co-Founder & COO Chefaa\", image: number41 },\n { id: 42, name: \"YASMIN YOUSSEF\", title: \"Title 42\", work: \"Corporate Communications Regional Manager at Electrolux\", image: number42 },\n { id: 43, name: \"DR.SALMA ELBAKRY \", title: \"Title 43\", work: \"Founder & Chairperson New Generation International Schools, and Asten College, Taj cITY\", image: number43 },\n { id: 44, name: \"REHAB FAYEZ \", title: \"Title 44\", work: \"Country HR Manager and Regional Diversity and Inclusion Lead (MENA) At Amazon\", image: number44 },\n { id: 45, name: \"SALMA HASSANEIN \", title: \"Title 45\", work: \"Senior Manager, Private Sector Engagement at DAI|USAID\", image: number45 },\n { id: 46, name: \"NASHWA BELAL\", title: \"Title 46\", work: \"Chief Technical Advisor, Egypt Youth Employment ILO \", image: number46 },\n { id: 47, name: \"MOHAMED ELWY\", title: \"Title 47\", work: \"CEO Housing and Development Properties - Affiliate Housing and Development Bank & Founder Homeberry Consultancy\", image: number47 },\n { id: 48, name: \"ENAS ABDELAZIZ \", title: \"Title 48\", work: \"Deputy Chief of Party, USAID's Business Egypt Program\", image: number48 },\n { id: 49, name: \"NADINE ELSHOUBARY\", title: \"Title 49\", work: \"R&D Director -Middle East, North Africa and Pakistan at Mondelez\", image: number49 },\n { id: 50, name: \"MUHAMAD GAWISH\", title: \"Title 50\", work: \"Co-Founder & Chief Business Development Officer at iSchool Edtech\", image: number50 },\n { id: 51, name: \"YASMINE YEHIA\", title: \"Title 51\", work: \"MEA Employer Branding Manager at Schneider Electric\", image: number51 },\n { id: 52, name: \"IMAN ELNASHAR\", title: \"Title 52\", work: \"Director, Digital Experience and Product\", image: number52 },\n { id: 53, name: \"OLA FARRAG\", title: \"Title 53\", work: \"CFYE Egypt Country Lead\", image: number53 },\n { id: 54, name: \"MARWA YOUSSEF\", title: \"Title 54\", work: \"Senior UI/UX Consultant & Delivery Leader at IBM \", image: number54 },\n { id: 55, name: \"MOHAMED NAGATY\", title: \"Title 55\", work: \"Entrepreneur & Investor \", image: number55 },\n { id: 56, name: \"HEBA HAKKY\", title: \"Title 56\", work: \"Liwwa Managing Director & Investment Expert\", image: number56 },\n { id: 57, name: \"MAHMOUD ABDELMEGEED\", title: \"Title 57\", work: \"Founder & CEO | DNAAYA Entrepreneur & content Creator\", image: number57 },\n { id: 58, name: \"SHERINE SHAABAN\", title: \"Title 58\", work: \"HR Strategic Business Partner Nigeria & North Africa at The Coca-Cola Company\", image: number58 },\n { id: 59, name: \"YASMINE NASSER \", title: \"Title 59\", work: \"Senior Societal Impact Program Manager at Udacity\", image: number59 },\n { id: 60, name: \"DOAA ALI\", title: \"Title 60\", work: \"HR Resourcing Supervisor Vodafone Intelligent Solutions (_VOIS)| Certified Assessor | Certified Trainer\", image: number60 },\n { id: 61, name: \"NOURHAN KANDIL \", title: \"Title 61\", work: \"Founder Dr. Baby \", image: number61 },\n { id: 62, name: \"HANZADA ABOU YOUSSEF \", title: \"Title 62\", work: \"Entrepreneurship & Social Innovation Consultant, Director of Programs at Riseup & Founder of Hanzada Designs\", image: number62 },\n { id: 63, name: \"SHERIN MISHRIKY \", title: \"Title 63\", work: \"Organization Development & Scaleups Consultant \", image: number63 },\n { id: 64, name: \"YOUSSEF SABRY \", title: \"Title 64\", work: \"CEO & Co-Founder at Virtual Worker Now\", image: number64 },\n { id: 65, name: \"LAMAAN \", title: \"Title 65\", work: \"Founder & Host of Cut The Crap \", image: number65 },\n { id: 66, name: \"TASNEEM ELAIDY \", title: \"Title 66\", work: \"Musician\", image: number66 },\n { id: 67, name: \"NOUR ALI SHOKRI \", title: \"Title 67\", work: \"People & Culture Manager - Together We Cancer Community Founder\", image: number67 },\n { id: 68, name: \"FARIDA SALEM \", title: \"Title 68\", work: \"CEO & Founder of Empower Football Academy - Head coach At ZED FC Women's Academy\", image: number68 },\n { id: 69, name: \"MALAK SHOUMAN \", title: \"Title 69\", work: \"Food Blogger, Recipe Developer& Menu Consultant\", image: number69 },\n { id: 70, name: \"NOUR EMAM \", title: \"Title 70\", work: \"Co-founder & CEO of Mothering \", image: number70 },\n { id: 71, name: \"SARAH AKRAM \", title: \"Title 71\", work: \"(TheNerdyMama) Motherhood & Parenting Content Creator\", image: number71 },\n { id: 72, name: \"MARIAM MEDHAT \", title: \"Title 72\", work: \"Counseling Psycologist & Parenting Coach\", image: number72 },\n\n ];\n const speakersPerPage = 18;\n const speakersPerRow = 6;\n const totalSlides = Math.ceil(speakers.length / speakersPerPage);\n const [selectedSpeaker, setSelectedSpeaker] = useState(null);\n // Function to handle speaker selection\n const handleSpeakerSelect = (speaker) => {\n console.log('Selected speaker:', speaker); // Add logging to check if the function is being called\n setSelectedSpeaker(speaker);\n };\n\n const handleCloseDialog = () => {\n setSelectedSpeaker(null);\n };\n\n\n\n return (\n screenWidth < 768 ?\n \n
\n Our Partners
\n\n 
\n
\n \n
\n :\n\n \n
\n Our Network
\n\n \n {/* Mapping over the array to render individual divs */}\n {speakers.map((speaker) => (\n \n \n ))}\n \n
\n \n 
\n
\n \n
\n {speaker.name}
\n{speaker.work}
\n\n \n {Array.from({ length: totalSlides }, (_, slideIndex) => (\n \n \n ))}\n \n {selectedSpeaker && (\n
\n );\n}\n\nexport default Network;\n","export default __webpack_public_path__ + \"70d11a2465d0935d37df950aab73ecf6.png\";","export default __webpack_public_path__ + \"128243081772b94b54f6e51f023fd490.png\";","import React, { useState } from \"react\";\nimport './Events.css';\nimport PlayCircleIcon from '@mui/icons-material/PlayCircle';\nimport Thumbnail from '../../../public/assets/ourEventsBackground.png';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport Dialog from '@mui/material/Dialog';\nimport DialogContent from '@mui/material/DialogContent';\nimport playButton from '../../../public/assets/playButton.png'\nimport { Link } from 'react-router-dom'\n\nexport default function Event() {\n const [isVideoPlaying, setIsVideoPlaying] = useState(false);\n\n const handlePlayClick = () => {\n setIsVideoPlaying(true);\n };\n\n const handleCloseModal = () => {\n setIsVideoPlaying(false);\n };\n\n return (\n \n
\n Our Network
\n\n {speakers\n .slice(slideIndex * speakersPerPage, (slideIndex + 1) * speakersPerPage)\n .map((speaker) => (\n
\n handleSpeakerSelect(speaker)}>\n
\n ))}\n \n \n
\n \n
\n {speaker.name}
\n{speaker.work}
\n\n
\n );\n}\n","export default __webpack_public_path__ + \"ce109648dff15a51c263b1e7a83b37a0.png\";","export default __webpack_public_path__ + \"e2235eb6f3654db323547794f055eec9.png\";","export default __webpack_public_path__ + \"5a4373ea7c92a577e113782c0033523b.png\";","import React, { useEffect, useState } from \"react\";\nimport ArrowBackIosIcon from \"@mui/icons-material/ArrowBackIos\";\nimport ArrowForwardIosIcon from \"@mui/icons-material/ArrowForwardIos\";\nimport \"./ReviewHome.css\";\nimport event2 from '../../../public/assets/opinion card.png';\nimport personImage1 from '../../../public/assets/person1.png';\nimport personImage2 from '../../../public/assets/person2.png';\nimport reviews from '../../../public/assets/reviews.png'\nimport clarity from '../../../public/assets/clarity_block-quote-line.png'\nimport Rating from '@mui/material/Rating';\nimport Stack from '@mui/material/Stack';\nimport { Autoplay, Navigation, Pagination } from 'swiper/modules';\n\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\nimport 'swiper/css/scrollbar';\n\n\n\nexport default function ReviewHome() {\n const screenWidth = window.innerWidth;\n\n\n const opinions = [\n {\n image: event2,\n personImage: personImage1,\n name: \"Mariam Yasser\",\n title: \"Lead designer\",\n opinion: \"الكورس ساعدني إزاي أحول الفكرة والمشروع لحاجة ممكن تبقى مُربحة ومبنية على أسس مظبوطة \",\n rate: 5\n },\n {\n image: event2,\n personImage: personImage2,\n name: \"Ola Abdelfatah\",\n title: \"Lead designer\",\n opinion: \"الكورس علمني حاجات كتير أوي منها إني أكون stable عشان ابدأ البيزنس بتاعي. \",\n rate: 4.9\n\n },\n {\n personImage: personImage1,\n image: event2,\n name: \"Sherine Atef\",\n title: \"Lead designer\",\n opinion: \"الكورس ساعدني جدًا إني أقدر احدد الـ pricing strategy بتاعتي وكمان الـ marketing..خلال أسبوعين بالكتير كان الـ reach بتاعي أعلى على انستجرام والمبيعات زادت جدًا \",\n rate: 5\n },\n {\n image: event2,\n personImage: personImage2,\n name: \"Malak A. Yassin\",\n title: \"Lead designer\",\n opinion: \"التيم في كاريرها كان معانا very friendly أجمل حاجة إنهم مش بيسيبونا وكمان supportive جدًا \",\n rate: 4.8\n },\n {\n image: event2,\n personImage: personImage2,\n name: \"Sara Yousry\",\n title: \"Lead designer\",\n opinion: \"التيم كان very helpful وبيسمعوا لنا ايه الفكرة من الأول والحاجات اللي ناقصانا. \",\n rate: 4.9\n },\n {\n image: event2,\n personImage: personImage2,\n name: \"Mirna Sameeh\",\n title: \"Lead designer\",\n opinion: \"اتعلمت من الكورس كتير اوي كان مفيد جدًا و very insightful. \",\n rate: 5\n },\n {\n image: event2,\n personImage: personImage2,\n name: \"Merna Y. Attalah\",\n title: \"Lead designer\",\n opinion: \"Attalahعرفت من الكورس ايه الـ gaps اللي في المشروع وإزاي هقدر أعديها. \",\n rate: 4.9\n }\n ];\n\n\n\n\n return (\n <>\n \n {!isVideoPlaying && (\n
\n\n \n 
\n
\n )}\n \n
\n\n \n \n
\n Explore Our Events
\nNetwork, Learn, and grow!
\n\n Join Carerha Summit, the first women’s summit\n in the MENA region empowering women\n economically and fostering diversity, equity\n & inclusion!.\n
\n Explore our upcoming events & be a part of\n the movement.\n
\n
\n \n );\n}\n\n","export default __webpack_public_path__ + \"80fb07e2530f28718a88b280b78cb470.png\";","export default __webpack_public_path__ + \"debdb6d737e62ec2b4a77a9b7634c18c.png\";","export default __webpack_public_path__ + \"e6dbb038d7162ad49588aaf70f5ac6ba.jpg\";","export default __webpack_public_path__ + \"b037085d39ad49b9508d5c0e1c3d86d8.jpeg\";","import React from 'react';\nimport partners from '../../../public/assets/FeaturedBy2.jpg';\nimport FeaturedImage from '../../../public/assets/mediaA1.jpeg';\nimport './Featured.css';\n\nfunction Featured() {\n return (\n \n
\n Testimonials
\n\n {/* */}\n \n {opinions.map((opinion, index) => (\n \n\n \n ))}\n \n
\n \n 
*/}\n\n
\n \n
\n \n {/* 
*/}\n
\n\n \n \n \n
\n\n {opinion.name}
\n{opinion.opinion}
\n {/*\n
\n );\n}\n\nexport default Featured;\n","import React from 'react'\nimport IntroSection from '../IntroSection/IntroSection'\nimport SuggestedCourses from '../SuggestedCourses/SuggestedCourses'\nimport SuggestedProgram from '../SuggestedProgram/SuggestedProgram'\nimport OurCommunity from '../OurCommunity/OurCommunity'\nimport OurPartners from '../OurParteners/OurPartners'\nimport Network from '../Network/Network'\nimport Event from '../Events/Events'\nimport ReviewHome from '../ReviewHome/ReviewHome'\nimport Featured from '../Featured/Featured'\nimport { Helmet } from 'react-helmet';\n\n\nfunction HomePage() {\n return (\n <>\n \n
\n Featured By
\n\n
\n \n \n
\n \n 
\n {/*
\n \n \n
*/}\n Thank You! Your submission has been received
\n\n
\n );\n}\n\nexport default ContactUs;\n","import React, { useState } from 'react';\nimport './Business.css';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport TextField from '@mui/material/TextField';\n\nfunction Form() {\n const countries = [\n 'Select Country',\n \"Egypt\",\n 'Afghanistan',\n 'Albania',\n 'Algeria',\n 'Andorra',\n 'Angola',\n 'Antigua and Barbuda',\n 'Argentina',\n 'Armenia',\n 'Australia',\n 'Austria',\n 'Azerbaijan',\n 'Bahamas',\n 'Bahrain',\n 'Bangladesh',\n 'Barbados',\n 'Belarus',\n 'Belgium',\n 'Belize',\n 'Benin',\n 'Bhutan',\n 'Bolivia',\n 'Bosnia and Herzegovina',\n 'Botswana',\n 'Brazil',\n 'Brunei',\n 'Bulgaria',\n 'Burkina Faso',\n 'Burundi',\n 'Cabo Verde',\n 'Cambodia',\n 'Cameroon',\n 'Canada',\n 'Central African Republic',\n 'Chad',\n 'Chile',\n 'China',\n 'Colombia',\n 'Comoros',\n 'Congo',\n 'Costa Rica',\n 'Côte d\"Ivoire',\n 'Croatia',\n 'Cuba',\n 'Cyprus',\n 'Czech Republic',\n 'Denmark',\n 'Djibouti',\n 'Dominica',\n 'Dominican Republic',\n 'East Timor (Timor-Leste)',\n 'Ecuador',\n 'Egypt',\n 'El Salvador',\n 'Equatorial Guinea',\n 'Eritrea',\n 'Estonia',\n 'Eswatini',\n 'Ethiopia',\n 'Fiji',\n 'Finland',\n 'France',\n 'Gabon',\n 'Gambia',\n 'Georgia',\n 'Germany',\n 'Ghana',\n 'Greece',\n 'Grenada',\n 'Guatemala',\n 'Guinea',\n 'Guinea-Bissau',\n 'Guyana',\n 'Haiti',\n 'Honduras',\n 'Hungary',\n 'Iceland',\n 'India',\n 'Indonesia',\n 'Iran',\n 'Iraq',\n 'Ireland',\n 'palestine',\n 'Italy',\n 'Jamaica',\n 'Japan',\n 'Jordan',\n 'Kazakhstan',\n 'Kenya',\n 'Kiribati',\n 'Korea, North',\n 'Korea, South',\n 'Kosovo',\n 'Kuwait',\n 'Kyrgyzstan',\n 'Laos',\n 'Latvia',\n 'Lebanon',\n 'Lesotho',\n 'Liberia',\n 'Libya',\n 'Liechtenstein',\n 'Lithuania',\n 'Luxembourg',\n 'Madagascar',\n 'Malawi',\n 'Malaysia',\n 'Maldives',\n 'Mali',\n 'Malta',\n 'Marshall Islands',\n 'Mauritania',\n 'Mauritius',\n 'Mexico',\n 'Micronesia',\n 'Moldova',\n 'Monaco',\n 'Mongolia',\n 'Montenegro',\n 'Morocco',\n 'Mozambique',\n 'Myanmar (Burma)',\n 'Namibia',\n 'Nauru',\n 'Nepal',\n 'Netherlands',\n 'New Zealand',\n 'Nicaragua',\n 'Niger',\n 'Nigeria',\n 'North Macedonia',\n 'Norway',\n 'Oman',\n 'Pakistan',\n 'Palau',\n 'Panama',\n 'Papua New Guinea',\n 'Paraguay',\n 'Peru',\n 'Philippines',\n 'Poland',\n 'Portugal',\n 'Qatar',\n 'Romania',\n 'Russia',\n 'Rwanda',\n 'Saint Kitts and Nevis',\n 'Saint Lucia',\n 'Saint Vincent and the Grenadines',\n 'Samoa',\n 'San Marino',\n 'Sao Tome and Principe',\n 'Saudi Arabia',\n 'Senegal',\n 'Serbia',\n 'Seychelles',\n 'Sierra Leone',\n 'Singapore',\n 'Slovakia',\n 'Slovenia',\n 'Solomon Islands',\n 'Somalia',\n 'South Africa',\n 'South Sudan',\n 'Spain',\n 'Sri Lanka',\n 'Sudan',\n 'Suriname',\n 'Sweden',\n 'Switzerland',\n 'Syria',\n 'Taiwan',\n 'Tajikistan',\n 'Tanzania',\n 'Thailand',\n 'Togo',\n 'Tonga',\n 'Trinidad and Tobago',\n 'Tunisia',\n 'Turkey',\n 'Turkmenistan',\n 'Tuvalu',\n 'Uganda',\n 'Ukraine',\n 'United Arab Emirates',\n 'United Kingdom',\n 'United States',\n 'Uruguay',\n 'Uzbekistan',\n 'Vanuatu',\n 'Vatican City',\n 'Venezuela',\n 'Vietnam',\n 'Yemen',\n 'Zambia',\n 'Zimbabwe',\n ];\n\n const [formData, setFormData] = useState({\n firstName: '',\n lastName: '',\n mobileNumber: '',\n companyName: '',\n workEmail: '',\n country: '',\n inquiry: '',\n });\n\n const [successMessage, setSuccessMessage] = useState('');\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n setFormData((prevData) => ({\n ...prevData,\n [name]: value,\n }));\n };\n\n const handleCountryChange = (event, value) => {\n setFormData((prevData) => ({\n ...prevData,\n country: value,\n }));\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n console.log('Form data submitted:', formData);\n\n const myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/json\");\n myHeaders.append(\"Cookie\", \"openedx-language-preference=en\");\n\n const raw = JSON.stringify({\n \"first_name\": formData.firstName,\n \"last_name\": formData.lastName,\n \"mobile_number\": formData.mobileNumber,\n \"work_email\": formData.workEmail,\n \"company_name\": formData.companyName,\n \"country\": formData.country,\n \"inquiry\": formData.inquiry\n });\n\n const requestOptions = {\n method: \"POST\",\n headers: myHeaders,\n body: raw,\n redirect: \"follow\"\n };\n\n fetch(\"https://actions.carerha.com/api/communication/request_meeting/\", requestOptions)\n .then((response) => response.json())\n .then((result) => {\n console.log(result, \"test\");\n setSuccessMessage(result.detail || \"Your inquiry submitted successfully.\");\n setFormData({\n firstName: '',\n lastName: '',\n mobileNumber: '',\n companyName: '',\n workEmail: '',\n country: '',\n inquiry: '',\n });\n })\n .catch((error) => console.error(error, \"error\"));\n };\n\n return (\n <>\n \n How Can We\n
\n
\n How Can We\n
\n Help You?\n
\n \n \n
\n info@carerha.com\n
\n \n
\n info@carerha.com\n \n \n
\n +201157777777\n
\n \n
\n +201157777777\n \n
\n Send us a Message
\n \n\n
\n \n );\n}\n\nexport default Form;\n","import React, { useEffect, useState } from 'react';\nimport './Business.css';\nimport WorkIcon from '@mui/icons-material/Work';\nimport DesignServicesIcon from '@mui/icons-material/DesignServices';\nimport VideoLibraryIcon from '@mui/icons-material/VideoLibrary';\nimport LaptopWindowsIcon from '@mui/icons-material/LaptopWindows';\nimport icon1 from '../../public/assets/cart.png';\nimport OurPartners from '../HomComponents/OurParteners/OurPartners';\nimport Form from './form';\nimport icon11 from '../../public/assets/Group 4.png';\nimport icon2 from '../../public/assets/Group 5.png';\nimport icon3 from '../../public/assets/Group 6.png';\nimport icon4 from '../../public/assets/Group 9.png';\n\nfunction Business() {\n const [animatedNumbers, setAnimatedNumbers] = useState({\n number1: 0,\n number2: 0,\n number3: 0,\n });\n\n const animateNumbers = () => {\n const targetNumbers = {\n number1: 500,\n number2: 800,\n number3: 60000,\n };\n\n const animationDuration = 2000; // Adjust the duration as needed\n const interval = 50; // Adjust the interval as needed\n\n Object.keys(targetNumbers).forEach((key) => {\n const startNumber = 0;\n const increment = (targetNumbers[key] - startNumber) / (animationDuration / interval);\n\n let currentNumber = startNumber;\n\n const intervalId = setInterval(() => {\n currentNumber += increment;\n\n setAnimatedNumbers((prevNumbers) => ({\n ...prevNumbers,\n [key]: Math.round(currentNumber),\n }));\n\n if (currentNumber >= targetNumbers[key]) {\n clearInterval(intervalId);\n }\n }, interval);\n });\n };\n\n useEffect(() => {\n animateNumbers();\n }, []);\n\n const textMapping = {\n number1: {\n text: \"Successful Partnerships\",\n icon: icon11,\n },\n number2: {\n text: \"Industry Leaders\",\n icon: icon4,\n },\n number3: {\n text: \"Female Learners\",\n icon: icon3,\n },\n };\n\n return (\n <>\n Request a Meeting
\n {successMessage && (\n\n {successMessage}\n
\n )}\n \n \n
\n \n
\n Carerha for Businesses
\nInclusive Workplaces
\nWe're here to help you empower women economically & foster inclusive workplaces
\n\n
\n
\n Our Services
\n\n
\n \n
\n \n
\n \n
\n Qualifying & Hiring Programs
\nEducate women with the technical skills they\n need to be updated with the job market needs\n through up to date educational program
\n\n
\n\n \n
\n \n
\n Employer Branding Services
\nFeature your successful women employees\n on our social media platforms, podcast\n and our onground events
\n\n
\n \n
\n \n
\n \n
\n Entrepreneurship Programs
\nPartner with us to empower women\n economically through industry based\n entrepreneurship programs & services
\n\n
\n \n
\n \n
\n Summit Sponsorship
\nShowcase your company’s commitment to\n building an inclusive workforce and your CSR\n initiatives for women while amplifying the\n voices of leaders within your organization
\n\n \n
\n \n
Why Carerha?
\n\n {Object.keys(animatedNumbers).map((key, index) => (\n
\n \n
\n ))}\n \n 
\n\n
\n \n
\n\n\n + {animatedNumbers[key]}
\n\n {textMapping[key].text}\n
\n\n
\n )\n}\n\nexport default EventCard","export default __webpack_public_path__ + \"bc615b6f0abc6f96a69801a2ce1f6a13.jpg\";","export default __webpack_public_path__ + \"67d9a3715e4c8780a64adbeba385d4d1.jpg\";","export default __webpack_public_path__ + \"a89b80127390203cf8014ef7587a4283.jpg\";","import React, { useEffect, useState } from 'react';\nimport ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport './Testimonials.css';\nimport image1 from '../../../public/assets/coverPhoto1.jpg'\nimport image2 from '../../../public/assets/coverPhoto2.jpg'\nimport image4 from '../../../public/assets/coverPhoto3.jpg'\nimport image5 from '../../../public/assets/coverPhoto4.jpg'\nimport image3 from '../../../public/assets/coverPhoto1.jpg'\n\n\nexport default function SliderComponent() {\n const [index, setIndex] = useState(0);\n const [playingIndex, setPlayingIndex] = useState(null);\n const totalSlides = 5;\n const autoplayInterval = 3000;\n\n // useEffect(() => {\n // const autoplay = setInterval(() => {\n // setIndex((prevIndex) => (prevIndex === totalSlides - 1 ? 0 : prevIndex + 1));\n // }, autoplayInterval);\n\n // return () => clearInterval(autoplay);\n // }, []);\n\n const nextSlide = () => {\n setIndex((prevIndex) => (prevIndex === totalSlides - 1 ? 0 : prevIndex + 1));\n setPlayingIndex(null); // Reset playing video\n };\n\n const prevSlide = () => {\n setIndex((prevIndex) => (prevIndex === 0 ? totalSlides - 1 : prevIndex - 1));\n setPlayingIndex(null); // Reset playing video\n };\n\n const playVideo = (i) => {\n setPlayingIndex(i);\n };\n\n const slides = [\n {\n video: \"https://drive.google.com/file/d/1O5KZ4c3ka9YOJfRcNEVqDgQKLo5X97Hh/preview\",\n thumbnail: image1,\n paragraph: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\",\n },\n {\n video: \"https://drive.google.com/file/d/1t4klJf9v4e-3eO_eGt4-3he5_JUBGkYZ/preview\",\n thumbnail: image2,\n paragraph: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\",\n },\n {\n video: \"https://drive.google.com/file/d/1KSu0g9M1LddWvePxerXpVE-rHXSTpucw/preview\",\n thumbnail: image3,\n paragraph: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\",\n },\n {\n video: \"https://drive.google.com/file/d/1gV17dymEnXvOsLTpSOu0Wwu163W2NvAv/preview\",\n thumbnail: image4,\n paragraph: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\",\n },\n {\n video: \"https://drive.google.com/file/d/1Vw82-YSNQvfMw7aRXMC1rQFse3Uu-kT9/preview\",\n thumbnail: image1,\n paragraph: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\",\n }\n ];\n\n return (\n <>\n window.location.href = `course/${props.courseId}/about#about`}>\n
\n \n \n
\n\n {props.price}
\n\n\n {props.courseTitle}\n
\n\n with {props.instractorName}\n
\n\n
\n\n
\n {props.level}\n
\n \n
\n \n \n );\n}\n","export default __webpack_public_path__ + \"0796688e6dc8cffbc8a2bdbf8a0bffb3.jpg\";","import React from 'react'\nimport CourseCard from '../AllCourses/CourseCard/CourseCard'\nimport image1 from '../../public/assets/1st L&N.jpg'\nimport image2 from '../../public/assets/2nd L&N.jpg'\nimport image3 from '../../public/assets/3rd L&N.jpg'\n\nimport EventCard from './EventCard/EventCard'\nimport './Events.css'\nimport SliderComponent from './Testimonials/Testimonials'\n// import from \"../../public/assets/background-image.png\";\n\nfunction Events() {\n return (\n <>\n \n
\n\n Testimonials
\n\n
\n \n {slides.map((slide, i) => (\n \n {playingIndex === i ? (\n \n ) : (\n
\n ))}\n playVideo(i)}>\n 
\n
\n )}\n {/* ▶
\n {slide.paragraph}
*/}\n\n
\n \n
\n {/* Learn & Network
\nLearn, connect, and grow with the Carerha community
\n through our regular online and in-person events.
\n\n \n
*/}\n \n
\n Upcoming Events
\nStay tuned for upcoming meetups\n
\n\n
\n {/* \n
*/}\n \n
\n );\n };\n\n return (\n \n
\n {shouldAddK ? `+${value}k` : ` +${value}`}
\n {/*\n \n
*/}\n \n {textMapping[key]}\n
\n\n\n
\n );\n}\n\nexport default IntroSectioneEvents;\n","import React, { useEffect, useState } from 'react';\nimport './UpcomingEvents.css'\n\nfunction EventTime() {\n const [animatedNumbers, setAnimatedNumbers] = useState({\n number1: 0,\n number2: 0,\n number3: 0,\n number4: 0,\n });\n\n const animateNumbers = () => {\n const targetNumbers = {\n number1: 14,\n number2: 12,\n number3: 19,\n number4: 29,\n };\n\n const animationDuration = 2000; // Adjust the duration as needed\n const interval = 50; // Adjust the interval as needed\n\n Object.keys(targetNumbers).forEach((key) => {\n const startNumber = 0;\n const increment = (targetNumbers[key] - startNumber) / (animationDuration / interval);\n\n let currentNumber = startNumber;\n\n const intervalId = setInterval(() => {\n currentNumber += increment;\n\n setAnimatedNumbers((prevNumbers) => ({\n ...prevNumbers,\n [key]: Math.round(currentNumber),\n }));\n\n if (currentNumber >= targetNumbers[key]) {\n clearInterval(intervalId);\n }\n }, interval);\n });\n };\n\n useEffect(() => {\n animateNumbers();\n }, []);\n\n const textMapping = {\n number1: \"Days\",\n number2: \"HR\",\n number3: \"MIN\",\n number4: \"SEC\",\n };\n\n\n\n const renderNumberWithUnit = (key) => {\n\n return (\n \n \n Stay Tuned for\n
\n
\n \n Stay Tuned for\n
\n Carerha Summit 2024\n
\n \n \n Join Carerha Summit, the first women’s summitin the MENA region
\n \n\n
\n\n \n Join Carerha Summit, the first women’s summitin the MENA region
\n empowering women economically and fostering diversity, equity & inclusion!\n
\n \n\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n
\n );\n };\n\n return (\n \n
\n {animatedNumbers[key]}
\n\n\n {textMapping[key]}\n
\n\n\n
\n );\n}\n\nexport default EventTime;\n","import React from 'react';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport { Autoplay, Navigation, Pagination } from 'swiper/modules';\nimport marwa from '../../public/assets/ourNetwork/1.png';\nimport Amira from '../../public/assets/ourNetwork/1.png';\nimport Eman from '../../public/assets/ourNetwork/1.png';\nimport Ghada from '../../public/assets/ourNetwork/1.png';\nimport Hoda from '../../public/assets/ourNetwork/1.png';\nimport Lamiaa from '../../public/assets/ourNetwork/1.png';\nimport Mahira from '../../public/assets/ourNetwork/1.png';\nimport Manal from '../../public/assets/ourNetwork/1.png';\nimport May from '../../public/assets/ourNetwork/1.png';\nimport Mirna from '../../public/assets/ourNetwork/1.png';\nimport Mohamed from '../../public/assets/ourNetwork/1.png';\nimport NahlaMokhtar from '../../public/assets/ourNetwork/1.png';\nimport Nahla from '../../public/assets/ourNetwork/1.png';\nimport Noha from '../../public/assets/ourNetwork/1.png';\nimport passant from '../../public/assets/ourNetwork/1.png';\nimport ranaGamali from '../../public/assets/ourNetwork/1.png';\nimport Rania from '../../public/assets/ourNetwork/1.png';\nimport Sarah from '../../public/assets/ourNetwork/1.png';\nimport TAMER from '../../public/assets/ourNetwork/1.png';\nimport Walaa from '../../public/assets/ourNetwork/1.png';\n\nfunction SpeackersEvent() {\n const screenWidth = window.innerWidth;\n\n // const speakers = Array.from({ length: 54 }, (_, index) => ({\n // id: index + 1,\n // name: `Speaker ${index + 1}`,\n // work: `Work ${index + 1}`,\n // image: speakerImage,\n // }));\n const speakers = [\n { id: 1, name: \"Speaker 1\", title: \"Title 1\", work: \"Work 1\", image: marwa },\n { id: 2, name: \"Speaker 2\", title: \"Title 2\", work: \"Work 2\", image: Amira },\n { id: 3, name: \"Speaker 3\", title: \"Title 3\", work: \"Work 3\", image: Eman },\n { id: 4, name: \"Speaker 4\", title: \"Title 4\", work: \"Work 4\", image: Ghada },\n { id: 5, name: \"Speaker 5\", title: \"Title 5\", work: \"Work 5\", image: Hoda },\n { id: 6, name: \"Speaker 6\", title: \"Title 6\", work: \"Work 6\", image: Lamiaa },\n { id: 7, name: \"Speaker 7\", title: \"Title 7\", work: \"Work 7\", image: Mahira },\n { id: 8, name: \"Speaker 8\", title: \"Title 8\", work: \"Work 8\", image: Manal },\n { id: 9, name: \"Speaker 9\", title: \"Title 9\", work: \"Work 9\", image: May },\n { id: 10, name: \"Speaker 10\", title: \"Title 10\", work: \"Work 10\", image: Mirna },\n { id: 11, name: \"Speaker 11\", title: \"Title 11\", work: \"Work 11\", image: Mohamed },\n { id: 12, name: \"Speaker 12\", title: \"Title 12\", work: \"Work 12\", image: NahlaMokhtar },\n { id: 13, name: \"Speaker 13\", title: \"Title 13\", work: \"Work 13\", image: Nahla },\n { id: 14, name: \"Speaker 14\", title: \"Title 14\", work: \"Work 14\", image: Noha },\n { id: 15, name: \"Speaker 15\", title: \"Title 15\", work: \"Work 15\", image: passant },\n { id: 16, name: \"Speaker 16\", title: \"Title 16\", work: \"Work 16\", image: ranaGamali },\n { id: 17, name: \"Speaker 17\", title: \"Title 17\", work: \"Work 17\", image: Rania },\n { id: 18, name: \"Speaker 18\", title: \"Title 18\", work: \"Work 18\", image: Sarah },\n { id: 19, name: \"Speaker 19\", title: \"Title 19\", work: \"Work 19\", image: TAMER },\n { id: 20, name: \"Speaker 20\", title: \"Title 20\", work: \"Work 20\", image: Walaa },\n // ... Repeat for speakers 21 to 54\n ];\n const speakersPerPage = 18;\n const speakersPerRow = 6;\n const totalSlides = Math.ceil(speakers.length / speakersPerPage);\n\n return (\n screenWidth < 768 ?\n \n\n\n
\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n
\n :\n\n \n
\n Our Network
\n\n \n {/* Mapping over the array to render individual divs */}\n {speakers.map((speaker) => (\n \n \n ))}\n \n
\n \n \n
\n \n
\n {speaker.name}
\n{speaker.work}
\n\n \n {Array.from({ length: totalSlides }, (_, slideIndex) => (\n \n \n ))}\n \n
\n );\n}\n\nexport default SpeackersEvent;\n","export default __webpack_public_path__ + \"f85222bcd0b2fcf8c8f6f86f31c40e02.jpg\";","export default __webpack_public_path__ + \"f410c83f9fd894759f5f45303b1c18ee.jpg\";","export default __webpack_public_path__ + \"d221f8eeb9c1103e3a6f9f00b1946827.jpg\";","import React, { useState } from 'react';\nimport ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport Image1 from '../../public/assets/pastEvents1.jpg';\nimport Image2 from '../../public/assets/pastevents2.jpg';\nimport Image3 from '../../public/assets/pastevents3.jpg';\n// import './SliderComponent.css';\n\nexport default function SliderComponent() {\n const [index, setIndex] = useState(0);\n const [playingIndex, setPlayingIndex] = useState(null);\n const totalSlides = 3;\n\n const nextSlide = () => {\n setIndex((prevIndex) => (prevIndex === totalSlides - 1 ? 0 : prevIndex + 1));\n setPlayingIndex(null); // Reset playing video\n };\n\n const prevSlide = () => {\n setIndex((prevIndex) => (prevIndex === 0 ? totalSlides - 1 : prevIndex - 1));\n setPlayingIndex(null); // Reset playing video\n };\n\n const playVideo = (i) => {\n setPlayingIndex(i);\n };\n\n const slides = [\n {\n video: \"https://drive.google.com/file/d/1WV6QSKvC03jlKeGWArN8etw5u2FWOyGW/preview\",\n thumbnail: Image1,\n title: \"MIRNA ARIF\",\n jopTitle: \"General Manager - Microsoft Egypt\",\n paragraph: \"Lorem ipsum dolor sit amet, conseceddtur adipiscing elit, sed do eusddmod tempor incididunt ut laddbore et dolore maglliqua.Ut eniddim ad minimveniam, quis nstrud exercitation ullamc\",\n },\n {\n video: \"https://drive.google.com/file/d/1nuNi5Gzbe4vb9Li_LHqXtYlFIiQGht8u/preview\",\n thumbnail: Image2,\n title: \"MIRNA ARIF\",\n jopTitle: \"General Manager - Microsoft Egypt\",\n paragraph: \"Lorem ipsum dolor sit amet, conseceddtur adipiscing elit, sed do eusddmod tempor incididunt ut laddbore et dolore maglliqua.Ut eniddim ad minimveniam, quis nstrud exercitation ullamc\",\n },\n {\n video: \"https://drive.google.com/file/d/1L29cs-BXLpG3y9Pg5mZ0fEnkZrV248-_/preview\",\n thumbnail: Image3,\n title: \"MIRNA ARIF\",\n jopTitle: \"General Manager - Microsoft Egypt\",\n paragraph: \"Lorem ipsum dolor sit amet, conseceddtur adipiscing elit, sed do eusddmod tempor incididunt ut laddbore et dolore maglliqua.Ut eniddim ad minimveniam, quis nstrud exercitation ullamc\",\n }\n ];\n\n return (\n <>\n \n
\n Meet Our Previous Speakers
\n\n {speakers\n .slice(slideIndex * speakersPerPage, (slideIndex + 1) * speakersPerPage)\n .map((speaker) => (\n
\n \n
\n ))}\n \n \n
\n \n
\n {speaker.name}
\n{speaker.work}
\n\n
\n \n \n );\n}\n","export default __webpack_public_path__ + \"73d67255bc0537e6cc60905f5a82bce1.jpg\";","export default __webpack_public_path__ + \"636d7a9e6f29a809b1d5b8445b5001e0.jpg\";","export default __webpack_public_path__ + \"64a83d8d216a7ecb0fa670b57a87320e.jpg\";","export default __webpack_public_path__ + \"172b3cd4d0a8da9729e50ef169ea4be5.jpg\";","export default __webpack_public_path__ + \"5e5fdaf6da80a3d84161702b54863a40.jpg\";","import React from 'react';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\nimport { Autoplay, Navigation, Pagination } from 'swiper/modules';\nimport sponsers1 from '../../public/assets/Summit23-Partners1.jpg';\nimport sponsers2 from '../../public/assets/Summit23-Partners2.jpg';\nimport sponsers3 from '../../public/assets/Summit23-Partners3.jpg';\nimport sponsers4 from '../../public/assets/Summit23-Partners4.jpg';\nimport sponsers5 from '../../public/assets/Summit23-Partners5.jpg';\n\nfunction Sponsors() {\n const sponsors = [\n { id: 1, name: \"Sponser 1\", image: sponsers1 },\n { id: 2, name: \"Sponser 2\", image: sponsers2 },\n { id: 3, name: \"Sponser 3\", image: sponsers3 },\n { id: 4, name: \"Sponser 4\", image: sponsers4 },\n { id: 5, name: \"Sponser 5\", image: sponsers5 },\n // Add more sponsors if needed\n ];\n\n const lastSponsors = sponsors.slice(-5); // Get the last 5 sponsors\n\n return (\n \n
\n \n {slides.map((slide, i) => (\n \n {playingIndex === i ? (\n \n ) : (\n
\n ))}\n playVideo(i)}>\n \n
\n )}\n \n ▶
\n \n
\n );\n}\n\nexport default Sponsors;\n","import React from 'react'\nimport IntroSectioneEvents from './intro'\nimport EventTime from './EventsTime'\nimport SpeackersEvent from './Speackers'\nimport SliderComponent from './SpeackersDetails'\nimport Sponsors from './Sponsors'\n\nfunction UpcomingEvents() {\n return (\n <>\n Official Sponsors and Partners
\n\n \n {lastSponsors.map((sponsor) => (\n \n \n ))}\n \n
\n \n 
\n
\n \n
\n \n
\n Events You’ll Remember
\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eusmod tempor incididunt ut labore et dolore magna ali
\n qua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea cmtempor incididunt ut lab
\n ore et dolore magna aliqua. Ut enim ad minimvmodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
\n esse cillum dolor
\n
\n \n Stay Tuned for the
\n \n
\n Stay Tuned for the
\n event Agenda
\n \n \n
\n );\n}\n","import React, { useEffect, useState } from 'react';\nimport icon1 from '../../public/assets/Group 4.png';\nimport icon2 from '../../public/assets/Group 5.png';\nimport icon3 from '../../public/assets/Group 6.png';\nimport icon4 from '../../public/assets/Group 9.png';\n\nfunction IntroSectioneEvents() {\n const [animatedNumbers, setAnimatedNumbers] = useState({\n number1: 0,\n number2: 0,\n number3: 0,\n number4: 0,\n number5: 0,\n });\n\n const animateNumbers = () => {\n const targetNumbers = {\n number1: 5,\n number2: 35,\n number3: 30,\n number4: 200,\n number5: 25,\n };\n\n const animationDuration = 2000; // Adjust the duration as needed\n const interval = 50; // Adjust the interval as needed\n\n Object.keys(targetNumbers).forEach((key) => {\n const startNumber = 0;\n const increment = (targetNumbers[key] - startNumber) / (animationDuration / interval);\n\n let currentNumber = startNumber;\n\n const intervalId = setInterval(() => {\n currentNumber += increment;\n\n setAnimatedNumbers((prevNumbers) => ({\n ...prevNumbers,\n [key]: Math.round(currentNumber),\n }));\n\n if (currentNumber >= targetNumbers[key]) {\n clearInterval(intervalId);\n }\n }, interval);\n });\n };\n\n useEffect(() => {\n animateNumbers();\n }, []);\n\n const textMapping = {\n number1: \"Attendees\",\n number2: \"Employers\",\n number3: \"Workshops\",\n number4: \"Speakers\",\n number5: \"Career Tracks\",\n };\n\n const iconMapping = {\n number1: icon3,\n number2: icon2,\n number3: icon4,\n number4: icon4,\n number5: icon1, // You can change this to the appropriate icon\n };\n\n const renderNumberWithUnit = (key) => {\n const value = animatedNumbers[key];\n const shouldAddK = key === 'number1';\n\n return (\n \n {!isVideoPlaying && (\n
\n\n \n
\n )}\n \n
\n \n Carerha Summit 2023\n\n {/* |
\n
\n Carerha Summit 2023\n\n {/* | 
*/}\n
\n \n Second edition of Carerha Summit, held on the 7th of October in Park 15, Rehab, Cairo.
\n Carerha Summit is the first women’s summit in the MENA region empowering women economically and
\n fostering diversity, equity & inclusion!\n
\n
\n\n \n \n {/*
\n\n Certified Certificate From
*/}\n\n 
\n |\n \n\n
\n \n
\n );\n };\n\n return (\n \n
\n {shouldAddK ? `+${value}k` : ` +${value}`}
\n\n {textMapping[key]}\n
\n\n\n
\n );\n}\n\nexport default IntroSectioneEvents;\n","import React from 'react';\nimport { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\n\nfunction SpeakerDialog({ isOpen, speaker, onClose }) {\n return (\n \n );\n}\n\nexport default SpeakerDialog;\n","// import React from 'react';\n// import { Swiper, SwiperSlide } from 'swiper/react';\n// import 'swiper/css';\n// import 'swiper/css/navigation';\n// import { Autoplay, Navigation, Pagination } from 'swiper/modules';\n// import number1 from '../../public/assets/ourNetwork/1.png';\n// import number2 from '../../public/assets/ourNetwork/2.png';\n// import number3 from '../../public/assets/ourNetwork/3.png';\n// import number4 from '../../public/assets/ourNetwork/4.png';\n// import number5 from '../../public/assets/ourNetwork/5.png';\n// import number6 from '../../public/assets/ourNetwork/6.png';\n// import number7 from '../../public/assets/ourNetwork/7.png';\n// import number8 from '../../public/assets/ourNetwork/8.png';\n// import number9 from '../../public/assets/ourNetwork/9.png';\n// import number10 from '../../public/assets/ourNetwork/10.png';\n// import number11 from '../../public/assets/ourNetwork/11.png';\n// import number12 from '../../public/assets/ourNetwork/12.png';\n// import number13 from '../../public/assets/ourNetwork/13.png';\n// import number14 from '../../public/assets/ourNetwork/14.png';\n// import number15 from '../../public/assets/ourNetwork/15.png';\n// import number16 from '../../public/assets/ourNetwork/16.png';\n// import number17 from '../../public/assets/ourNetwork/17.png';\n// import number18 from '../../public/assets/ourNetwork/18.png';\n// import number19 from '../../public/assets/ourNetwork/19.png';\n// import number20 from '../../public/assets/ourNetwork/20.png';\n// import number21 from '../../public/assets/ourNetwork/21.png';\n// import number22 from '../../public/assets/ourNetwork/22.png';\n// import number23 from '../../public/assets/ourNetwork/23.png';\n// import number24 from '../../public/assets/ourNetwork/24.png';\n// import number25 from '../../public/assets/ourNetwork/25.png';\n// import number26 from '../../public/assets/ourNetwork/26.png';\n// import number27 from '../../public/assets/ourNetwork/27.png';\n// import number28 from '../../public/assets/ourNetwork/28.png';\n// import number29 from '../../public/assets/ourNetwork/29.png';\n// import number30 from '../../public/assets/ourNetwork/30.png';\n// import number31 from '../../public/assets/ourNetwork/31.png';\n// import number32 from '../../public/assets/ourNetwork/32.png';\n// import number33 from '../../public/assets/ourNetwork/33.png';\n// import number34 from '../../public/assets/ourNetwork/34.png';\n// import number35 from '../../public/assets/ourNetwork/35.png';\n// import number36 from '../../public/assets/ourNetwork/36.png';\n// import number37 from '../../public/assets/ourNetwork/37.png';\n// import number38 from '../../public/assets/ourNetwork/38.png';\n// import number39 from '../../public/assets/ourNetwork/39.png';\n// import number40 from '../../public/assets/ourNetwork/40.png';\n// import number41 from '../../public/assets/ourNetwork/41.png';\n// import number42 from '../../public/assets/ourNetwork/42.png';\n// import number43 from '../../public/assets/ourNetwork/43.png';\n// import number44 from '../../public/assets/ourNetwork/44.png';\n// import number45 from '../../public/assets/ourNetwork/45.png';\n// import number46 from '../../public/assets/ourNetwork/46.png';\n// import number47 from '../../public/assets/ourNetwork/47.png';\n// import number48 from '../../public/assets/ourNetwork/48.png';\n// import number49 from '../../public/assets/ourNetwork/49.png';\n// import number50 from '../../public/assets/ourNetwork/50.png';\n// import number51 from '../../public/assets/ourNetwork/51.png';\n// import number52 from '../../public/assets/ourNetwork/52.png';\n// import number53 from '../../public/assets/ourNetwork/53.png';\n// import number54 from '../../public/assets/ourNetwork/54.png';\n// import number55 from '../../public/assets/ourNetwork/55.png';\n// import number56 from '../../public/assets/ourNetwork/56.png';\n// import number57 from '../../public/assets/ourNetwork/57.png';\n// import number58 from '../../public/assets/ourNetwork/58.png';\n// import number59 from '../../public/assets/ourNetwork/59.png';\n// import number60 from '../../public/assets/ourNetwork/60.png';\n// import number61 from '../../public/assets/ourNetwork/61.png';\n// import number62 from '../../public/assets/ourNetwork/62.png';\n// import number63 from '../../public/assets/ourNetwork/63.png';\n// import number64 from '../../public/assets/ourNetwork/64.png';\n// import number65 from '../../public/assets/ourNetwork/65.png';\n// import number66 from '../../public/assets/ourNetwork/66.png';\n// import number67 from '../../public/assets/ourNetwork/67.png';\n// import number68 from '../../public/assets/ourNetwork/68.png';\n// import number69 from '../../public/assets/ourNetwork/69.png';\n// import number70 from '../../public/assets/ourNetwork/70.png';\n// import number71 from '../../public/assets/ourNetwork/71.png';\n// import number72 from '../../public/assets/ourNetwork/72.png';\n\n// function SpeackersEvent() {\n// const screenWidth = window.innerWidth;\n// const speakers = [\n// { id: 1, name: \"MIRNA ARIF\", title: \"General Manager-Microsoft Egypt\", work: \"General Manager-Microsoft Egypt\", image: number1 },\n// { id: 2, name: \"MARWA ABBAS\", title: \"Title 2\", work: \"General Manager and Technology Leader - IBM Egypt\", image: number2 },\n// { id: 3, name: \"MOHAMED ELMORSI\", title: \"Title 3\", work: \"Managing Director - Mondelez Egypt\", image: number3 },\n// { id: 4, name: \"DR. GHADA KANDIL\", title: \"Title 4\", work: \"Chief Director - Bank of New York Mellon\", image: number4 },\n// { id: 5, name: \"TAMER ALY \", title: \"Title 5\", work: \"Valeo Technical Center Vice President & Egypt General Manager \", image: number5 },\n// { id: 6, name: \"LAMISE NEGM \", title: \"Title 6\", work: \"CSR Advisor to the Governor at Central Bank of Egypt. Head of sustainable Development Committee at the Federation of Egyptian Banks \", image: number6 },\n// { id: 7, name: \"GHADA HAMMOUDA \", title: \"Title 7\", work: \"Chief Sustainability & Marketing Officer, Qalaa Holdings\", image: number7 },\n// { id: 8, name: \"MANAL HASSAN\", title: \"Title 8\", work: \"Chief Sustainability officer El Sewedy Electric & Vice Chairman El Sewedy Foundation\", image: number8 },\n// { id: 9, name: \"HODA DAHROUG\", title: \"Title 9\", work: \"National Project Director - Egypt ICT Trust Fund Ministry of communication & Information Technology\", image: number9 },\n// { id: 10, name: \"NOHA LABIB\", title: \"Title 10\", work: \"Senior Strategic Accounts Sector Lead at Dell\", image: number10 },\n// { id: 11, name: \"SARAH HANNA\", title: \"Title 11\", work: \"Director of Communications, Africa, Middle East & South Asia at Pepsico\", image: number11 },\n// { id: 12, name: \"MAHIRA HASSAN\", title: \"Title 12\", work: \"CSR, Sustainability & Development Expert Consultant\", image: number12 },\n// { id: 13, name: \"NAHLA KAMAL\", title: \"Title 13\", work: \"Director of Corporate Affairs & Sustainability at Nestle Middle East& North Africa at Nestle\", image: number13 },\n// { id: 14, name: \"NAHLA MOKHTAR\", title: \"Title 14\", work: \"Communications & Sustainability Responsible Director at L'Oréal\", image: number14 },\n// { id: 15, name: \"PASSANT FOAD\", title: \"Title 15\", work: \"External Relations Director at Juhayna\", image: number15 },\n// { id: 16, name: \"RANA GAMALI \", title: \"Title 16\", work: \"Director, Corporate Affairs &Sustainability Coca-Cola HBC\", image: number16 },\n// { id: 17, name: \"RANIA SALAH \", title: \"Title 17\", work: \"Head of HR Egypt Center & Global Care at Vodafone _VOIS\", image: number17 },\n// { id: 18, name: \"MERHAM YOUSRI \", title: \"Title 18\", work: \"Head of Sustainability, Customer Excellence & Corporate Affairs at ADCB- Egypt\", image: number18 },\n// { id: 19, name: \"MAY YASSIN \", title: \"Title 19\", work: \"Head of Sustainable Business & Secretary General Vodafone Egypt Foundation\", image: number19 },\n// { id: 20, name: \"EMAN HUSSEIN \", title: \"Title 20\", work: \"Head of Talent & People Capabilities at Vodafone Egypt\", image: number20 },\n// { id: 21, name: \"LAMIAA NASR \", title: \"Title 21\", work: \"Head of Learning, Talent Acquisition and Talent Management - HSBC Egypt \", image: number21 },\n// { id: 22, name: \"AMIRA FARAG \", title: \"Title 22\", work: \"Head of Corporate & Government Affairs - Mashreq at Mondelez International\", image: number22 },\n// { id: 23, name: \"NOURA ELBARADEI \", title: \"Title 23\", work: \"Regional Market Head in Mars Middle East & Africa\", image: number23 },\n// { id: 24, name: \"WALAA SAAD \", title: \"Title 24\", work: \"Customer Care Director at Vodafone Egypt\", image: number24 },\n// { id: 25, name: \"SALLY GASSER \", title: \"Title 25\", work: \"Head of Agile Practices at b_labs\", image: number25 },\n// { id: 26, name: \"DARA GHOSHEH \", title: \" \", work: \"Founder Dara's Icecram\", image: number26 },\n// { id: 27, name: \"WALID HASSOUNA \", title: \"Title 27\", work: \"CEO of valU \", image: number27 },\n// { id: 28, name: \"MARIE THERESE\", title: \"Title 28\", work: \"Partner at Silicon Badia \", image: number28 },\n// { id: 29, name: \"OSMAN BADRAN \", title: \"Title 29\", work: \"Branding Architect \", image: number29 },\n// { id: 30, name: \"MONA ELBANNA\", title: \"Title 30\", work: \"Founder Monapetit Culinary School \", image: number30 },\n// { id: 31, name: \"LAILA HASSAN\", title: \"Title 31\", work: \"General Partner at Algebra Ventures & Venture Partner at 500 Global\", image: number31 },\n// { id: 32, name: \"YASMINE HENNA\", title: \"Title 32\", work: \"Co-founder & Chief Commercial & Product Officer at Sympl\", image: number32 },\n// { id: 33, name: \"GILLAN SHAABBAN\", title: \"Title 33\", work: \"Chief Commercial Officer (CCO) at Paymob\", image: number33 },\n// { id: 34, name: \"YARA ELABD\", title: \"Title 34\", work: \"Co-Founder & Chief Strategy Officer at Paynas\", image: number34 },\n// { id: 35, name: \"MENNA EL KIEY\", title: \"Title 35\", work: \"Lyricist. Creative Director. Writer\", image: number35 },\n// { id: 36, name: \"MAI GALAL\", title: \"Title 36\", work: \"Fashion & Styling Consultant \", image: number36 },\n// { id: 37, name: \"FARAH EMARA\", title: \"Title 37\", work: \"Co-Founder of FreshSource\", image: number37 },\n// { id: 38, name: \"YASMINE EL SHEIKH\", title: \"Title 38\", work: \"Head of People & Culture at Klivvr\", image: number38 },\n// { id: 39, name: \"NESMA ELSHAZLY\", title: \"Title 39\", work: \"Founder & CEO of Stardust PR Agency\", image: number39 },\n// { id: 40, name: \"SARAH MOUSSA\", title: \"Title 40\", work: \"Regional Communications at IFC, World Bank Group\", image: number40 },\n// { id: 41, name: \"DR. RASHA RADY\", title: \"Title 41\", work: \"Co-Founder & COO Chefaa\", image: number41 },\n// { id: 42, name: \"YASMIN YOUSSEF\", title: \"Title 42\", work: \"Corporate Communications Regional Manager at Electrolux\", image: number42 },\n// { id: 43, name: \"DR.SALMA ELBAKRY \", title: \"Title 43\", work: \"Founder & Chairperson New Generation International Schools, and Asten College, Taj cITY\", image: number43 },\n// { id: 44, name: \"REHAB FAYEZ \", title: \"Title 44\", work: \"Country HR Manager and Regional Diversity and Inclusion Lead (MENA) At Amazon\", image: number44 },\n// { id: 45, name: \"SALMA HASSANEIN \", title: \"Title 45\", work: \"Senior Manager, Private Sector Engagement at DAI|USAID\", image: number45 },\n// { id: 46, name: \"NASHWA BELAL\", title: \"Title 46\", work: \"Chief Technical Advisor, Egypt Youth Employment ILO \", image: number46 },\n// { id: 47, name: \"MOHAMED ELWY\", title: \"Title 47\", work: \"CEO Housing and Development Properties - Affiliate Housing and Development Bank & Founder Homeberry Consultancy\", image: number47 },\n// { id: 48, name: \"ENAS ABDELAZIZ \", title: \"Title 48\", work: \"Deputy Chief of Party, USAID's Business Egypt Program\", image: number48 },\n// { id: 49, name: \"NADINE ELSHOUBARY\", title: \"Title 49\", work: \"R&D Director -Middle East, North Africa and Pakistan at Mondelez\", image: number49 },\n// { id: 50, name: \"MUHAMAD GAWISH\", title: \"Title 50\", work: \"Co-Founder & Chief Business Development Officer at iSchool Edtech\", image: number50 },\n// { id: 51, name: \"YASMINE YEHIA\", title: \"Title 51\", work: \"MEA Employer Branding Manager at Schneider Electric\", image: number51 },\n// { id: 52, name: \"IMAN ELNASHAR\", title: \"Title 52\", work: \"Director, Digital Experience and Product\", image: number52 },\n// { id: 53, name: \"OLA FARRAG\", title: \"Title 53\", work: \"CFYE Egypt Country Lead\", image: number53 },\n// { id: 54, name: \"MARWA YOUSSEF\", title: \"Title 54\", work: \"Senior UI/UX Consultant & Delivery Leader at IBM \", image: number54 },\n// { id: 55, name: \"MOHAMED NAGATY\", title: \"Title 55\", work: \"Entrepreneur & Investor \", image: number55 },\n// { id: 56, name: \"HEBA HAKKY\", title: \"Title 56\", work: \"Liwwa Managing Director & Investment Expert\", image: number56 },\n// { id: 57, name: \"MAHMOUD ABDELMEGEED\", title: \"Title 57\", work: \"Founder & CEO | DNAAYA Entrepreneur & content Creator\", image: number57 },\n// { id: 58, name: \"SHERINE SHAABAN\", title: \"Title 58\", work: \"HR Strategic Business Partner Nigeria & North Africa at The Coca-Cola Company\", image: number58 },\n// { id: 59, name: \"YASMINE NASSER \", title: \"Title 59\", work: \"Senior Societal Impact Program Manager at Udacity\", image: number59 },\n// { id: 60, name: \"DOAA ALI\", title: \"Title 60\", work: \"HR Resourcing Supervisor Vodafone Intelligent Solutions (_VOIS)| Certified Assessor | Certified Trainer\", image: number60 },\n// { id: 61, name: \"NOURHAN KANDIL \", title: \"Title 61\", work: \"Founder Dr. Baby \", image: number61 },\n// { id: 62, name: \"HANZADA ABOU YOUSSEF \", title: \"Title 62\", work: \"Entrepreneurship & Social Innovation Consultant, Director of Programs at Riseup & Founder of Hanzada Designs\", image: number62 },\n// { id: 63, name: \"SHERIN MISHRIKY \", title: \"Title 63\", work: \"Organization Development & Scaleups Consultant \", image: number63 },\n// { id: 64, name: \"YOUSSEF SABRY \", title: \"Title 64\", work: \"CEO & Co-Founder at Virtual Worker Now\", image: number64 },\n// { id: 65, name: \"LAMAAN \", title: \"Title 65\", work: \"Founder & Host of Cut The Crap \", image: number65 },\n// { id: 66, name: \"TASNEEM ELAIDY \", title: \"Title 66\", work: \"Musician\", image: number66 },\n// { id: 67, name: \"NOUR ALI SHOKRI \", title: \"Title 67\", work: \"People & Culture Manager - Together We Cancer Community Founder\", image: number67 },\n// { id: 68, name: \"FARIDA SALEM \", title: \"Title 68\", work: \"CEO & Founder of Empower Football Academy - Head coach At ZED FC Women's Academy\", image: number68 },\n// { id: 69, name: \"MALAK SHOUMAN \", title: \"Title 69\", work: \"Food Blogger, Recipe Developer& Menu Consultant\", image: number69 },\n// { id: 70, name: \"NOUR EMAM \", title: \"Title 70\", work: \"Co-founder & CEO of Mothering \", image: number70 },\n// { id: 71, name: \"SARAH AKRAM \", title: \"Title 71\", work: \"(TheNerdyMama) Motherhood & Parenting Content Creator\", image: number71 },\n// { id: 72, name: \"MARIAM MEDHAT \", title: \"Title 72\", work: \"Counseling Psycologist & Parenting Coach\", image: number72 },\n\n// ];\n// const speakersPerPage = 18;\n// const speakersPerRow = 6;\n// const totalSlides = Math.ceil(speakers.length / speakersPerPage);\n\n// return (\n// screenWidth < 768 ?\n// \n
\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n {Object.keys(animatedNumbers).map(renderNumberWithUnit)}\n
\n \n//
\n// :\n\n// \n//
\n// Our Network
\n//\n// \n// {/* Mapping over the array to render individual divs */}\n// {speakers.map((speaker) => (\n// \n// \n// ))}\n// \n//
\n// \n// \n//
\n// \n//
\n// {speaker.name}
\n//{speaker.work}
\n//\n// \n// {Array.from({ length: totalSlides }, (_, slideIndex) => (\n// \n// \n// ))}\n// \n//
\n// );\n// }\n\n// export default SpeackersEvent;\nimport React, { useState } from 'react';\n// import './Network.css';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport { Autoplay, Navigation, Pagination } from 'swiper/modules';\nimport number1 from '../../public/assets/ourNetwork/1.png';\nimport number2 from '../../public/assets/ourNetwork/2.png';\nimport number3 from '../../public/assets/ourNetwork/3.png';\nimport number4 from '../../public/assets/ourNetwork/4.png';\nimport number5 from '../../public/assets/ourNetwork/5.png';\nimport number6 from '../../public/assets/ourNetwork/6.png';\nimport number7 from '../../public/assets/ourNetwork/7.png';\nimport number8 from '../../public/assets/ourNetwork/8.png';\nimport number9 from '../../public/assets/ourNetwork/9.png';\nimport number10 from '../../public/assets/ourNetwork/10.png';\nimport number11 from '../../public/assets/ourNetwork/11.png';\nimport number12 from '../../public/assets/ourNetwork/12.png';\nimport number13 from '../../public/assets/ourNetwork/13.png';\nimport number14 from '../../public/assets/ourNetwork/14.png';\nimport number15 from '../../public/assets/ourNetwork/15.png';\nimport number16 from '../../public/assets/ourNetwork/16.png';\nimport number17 from '../../public/assets/ourNetwork/17.png';\nimport number18 from '../../public/assets/ourNetwork/18.png';\nimport number19 from '../../public/assets/ourNetwork/19.png';\nimport number20 from '../../public/assets/ourNetwork/20.png';\nimport number21 from '../../public/assets/ourNetwork/21.png';\nimport number22 from '../../public/assets/ourNetwork/22.png';\nimport number23 from '../../public/assets/ourNetwork/23.png';\nimport number24 from '../../public/assets/ourNetwork/24.png';\nimport number25 from '../../public/assets/ourNetwork/25.png';\nimport number26 from '../../public/assets/ourNetwork/26.png';\nimport number27 from '../../public/assets/ourNetwork/27.png';\nimport number28 from '../../public/assets/ourNetwork/28.png';\nimport number29 from '../../public/assets/ourNetwork/29.png';\nimport number30 from '../../public/assets/ourNetwork/30.png';\nimport number31 from '../../public/assets/ourNetwork/31.png';\nimport number32 from '../../public/assets/ourNetwork/32.png';\nimport number33 from '../../public/assets/ourNetwork/33.png';\nimport number34 from '../../public/assets/ourNetwork/34.png';\nimport number35 from '../../public/assets/ourNetwork/35.png';\nimport number36 from '../../public/assets/ourNetwork/36.png';\nimport number37 from '../../public/assets/ourNetwork/37.png';\nimport number38 from '../../public/assets/ourNetwork/38.png';\nimport number39 from '../../public/assets/ourNetwork/39.png';\nimport number40 from '../../public/assets/ourNetwork/40.png';\nimport number41 from '../../public/assets/ourNetwork/41.png';\nimport number42 from '../../public/assets/ourNetwork/42.png';\nimport number43 from '../../public/assets/ourNetwork/43.png';\nimport number44 from '../../public/assets/ourNetwork/44.png';\nimport number45 from '../../public/assets/ourNetwork/45.png';\nimport number46 from '../../public/assets/ourNetwork/46.png';\nimport number47 from '../../public/assets/ourNetwork/47.png';\nimport number48 from '../../public/assets/ourNetwork/48.png';\nimport number49 from '../../public/assets/ourNetwork/49.png';\nimport number50 from '../../public/assets/ourNetwork/50.png';\nimport number51 from '../../public/assets/ourNetwork/51.png';\nimport number52 from '../../public/assets/ourNetwork/52.png';\nimport number53 from '../../public/assets/ourNetwork/53.png';\nimport number54 from '../../public/assets/ourNetwork/54.png';\nimport number55 from '../../public/assets/ourNetwork/55.png';\nimport number56 from '../../public/assets/ourNetwork/56.png';\nimport number57 from '../../public/assets/ourNetwork/57.png';\nimport number58 from '../../public/assets/ourNetwork/58.png';\nimport number59 from '../../public/assets/ourNetwork/59.png';\nimport number60 from '../../public/assets/ourNetwork/60.png';\nimport number61 from '../../public/assets/ourNetwork/61.png';\nimport number62 from '../../public/assets/ourNetwork/62.png';\nimport number63 from '../../public/assets/ourNetwork/63.png';\nimport number64 from '../../public/assets/ourNetwork/64.png';\nimport number65 from '../../public/assets/ourNetwork/65.png';\nimport number66 from '../../public/assets/ourNetwork/66.png';\nimport number67 from '../../public/assets/ourNetwork/67.png';\nimport number68 from '../../public/assets/ourNetwork/68.png';\nimport number69 from '../../public/assets/ourNetwork/69.png';\nimport number70 from '../../public/assets/ourNetwork/70.png';\nimport number71 from '../../public/assets/ourNetwork/71.png';\nimport number72 from '../../public/assets/ourNetwork/72.png';\nimport SpeakerDialog from './SpeakerDialog'; // Import the SpeakerDialog component\n\n\n\nfunction SpeackersEvent() {\n const screenWidth = window.innerWidth;\n const speakers = [\n { id: 1, name: \"MIRNA ARIF\", title: \"General Manager-Microsoft Egypt\", work: \"General Manager-Microsoft Egypt\", image: number1 },\n { id: 2, name: \"MARWA ABBAS\", title: \"Title 2\", work: \"General Manager and Technology Leader - IBM Egypt\", image: number2 },\n { id: 3, name: \"MOHAMED ELMORSI\", title: \"Title 3\", work: \"Managing Director - Mondelez Egypt\", image: number3 },\n { id: 4, name: \"DR. GHADA KANDIL\", title: \"Title 4\", work: \"Chief Director - Bank of New York Mellon\", image: number4 },\n { id: 5, name: \"TAMER ALY \", title: \"Title 5\", work: \"Valeo Technical Center Vice President & Egypt General Manager \", image: number5 },\n { id: 6, name: \"LAMISE NEGM \", title: \"Title 6\", work: \"CSR Advisor to the Governor at Central Bank of Egypt. Head of sustainable Development Committee at the Federation of Egyptian Banks \", image: number6 },\n { id: 7, name: \"GHADA HAMMOUDA \", title: \"Title 7\", work: \"Chief Sustainability & Marketing Officer, Qalaa Holdings\", image: number7 },\n { id: 8, name: \"MANAL HASSAN\", title: \"Title 8\", work: \"Chief Sustainability officer El Sewedy Electric & Vice Chairman El Sewedy Foundation\", image: number8 },\n { id: 9, name: \"HODA DAHROUG\", title: \"Title 9\", work: \"National Project Director - Egypt ICT Trust Fund Ministry of communication & Information Technology\", image: number9 },\n { id: 10, name: \"NOHA LABIB\", title: \"Title 10\", work: \"Senior Strategic Accounts Sector Lead at Dell\", image: number10 },\n { id: 11, name: \"SARAH HANNA\", title: \"Title 11\", work: \"Director of Communications, Africa, Middle East & South Asia at Pepsico\", image: number11 },\n { id: 12, name: \"MAHIRA HASSAN\", title: \"Title 12\", work: \"CSR, Sustainability & Development Expert Consultant\", image: number12 },\n { id: 13, name: \"NAHLA KAMAL\", title: \"Title 13\", work: \"Director of Corporate Affairs & Sustainability at Nestle Middle East& North Africa at Nestle\", image: number13 },\n { id: 14, name: \"NAHLA MOKHTAR\", title: \"Title 14\", work: \"Communications & Sustainability Responsible Director at L'Oréal\", image: number14 },\n { id: 15, name: \"PASSANT FOAD\", title: \"Title 15\", work: \"External Relations Director at Juhayna\", image: number15 },\n { id: 16, name: \"RANA GAMALI \", title: \"Title 16\", work: \"Director, Corporate Affairs &Sustainability Coca-Cola HBC\", image: number16 },\n { id: 17, name: \"RANIA SALAH \", title: \"Title 17\", work: \"Head of HR Egypt Center & Global Care at Vodafone _VOIS\", image: number17 },\n { id: 18, name: \"MERHAM YOUSRI \", title: \"Title 18\", work: \"Head of Sustainability, Customer Excellence & Corporate Affairs at ADCB- Egypt\", image: number18 },\n { id: 19, name: \"MAY YASSIN \", title: \"Title 19\", work: \"Head of Sustainable Business & Secretary General Vodafone Egypt Foundation\", image: number19 },\n { id: 20, name: \"EMAN HUSSEIN \", title: \"Title 20\", work: \"Head of Talent & People Capabilities at Vodafone Egypt\", image: number20 },\n { id: 21, name: \"LAMIAA NASR \", title: \"Title 21\", work: \"Head of Learning, Talent Acquisition and Talent Management - HSBC Egypt \", image: number21 },\n { id: 22, name: \"AMIRA FARAG \", title: \"Title 22\", work: \"Head of Corporate & Government Affairs - Mashreq at Mondelez International\", image: number22 },\n { id: 23, name: \"NOURA ELBARADEI \", title: \"Title 23\", work: \"Regional Market Head in Mars Middle East & Africa\", image: number23 },\n { id: 24, name: \"WALAA SAAD \", title: \"Title 24\", work: \"Customer Care Director at Vodafone Egypt\", image: number24 },\n { id: 25, name: \"SALLY GASSER \", title: \"Title 25\", work: \"Head of Agile Practices at b_labs\", image: number25 },\n { id: 26, name: \"DARA GHOSHEH \", title: \" \", work: \"Founder Dara's Icecram\", image: number26 },\n { id: 27, name: \"WALID HASSOUNA \", title: \"Title 27\", work: \"CEO of valU \", image: number27 },\n { id: 28, name: \"MARIE THERESE\", title: \"Title 28\", work: \"Partner at Silicon Badia \", image: number28 },\n { id: 29, name: \"OSMAN BADRAN \", title: \"Title 29\", work: \"Branding Architect \", image: number29 },\n { id: 30, name: \"MONA ELBANNA\", title: \"Title 30\", work: \"Founder Monapetit Culinary School \", image: number30 },\n { id: 31, name: \"LAILA HASSAN\", title: \"Title 31\", work: \"General Partner at Algebra Ventures & Venture Partner at 500 Global\", image: number31 },\n { id: 32, name: \"YASMINE HENNA\", title: \"Title 32\", work: \"Co-founder & Chief Commercial & Product Officer at Sympl\", image: number32 },\n { id: 33, name: \"GILLAN SHAABBAN\", title: \"Title 33\", work: \"Chief Commercial Officer (CCO) at Paymob\", image: number33 },\n { id: 34, name: \"YARA ELABD\", title: \"Title 34\", work: \"Co-Founder & Chief Strategy Officer at Paynas\", image: number34 },\n { id: 35, name: \"MENNA EL KIEY\", title: \"Title 35\", work: \"Lyricist. Creative Director. Writer\", image: number35 },\n { id: 36, name: \"MAI GALAL\", title: \"Title 36\", work: \"Fashion & Styling Consultant \", image: number36 },\n { id: 37, name: \"FARAH EMARA\", title: \"Title 37\", work: \"Co-Founder of FreshSource\", image: number37 },\n { id: 38, name: \"YASMINE EL SHEIKH\", title: \"Title 38\", work: \"Head of People & Culture at Klivvr\", image: number38 },\n { id: 39, name: \"NESMA ELSHAZLY\", title: \"Title 39\", work: \"Founder & CEO of Stardust PR Agency\", image: number39 },\n { id: 40, name: \"SARAH MOUSSA\", title: \"Title 40\", work: \"Regional Communications at IFC, World Bank Group\", image: number40 },\n { id: 41, name: \"DR. RASHA RADY\", title: \"Title 41\", work: \"Co-Founder & COO Chefaa\", image: number41 },\n { id: 42, name: \"YASMIN YOUSSEF\", title: \"Title 42\", work: \"Corporate Communications Regional Manager at Electrolux\", image: number42 },\n { id: 43, name: \"DR.SALMA ELBAKRY \", title: \"Title 43\", work: \"Founder & Chairperson New Generation International Schools, and Asten College, Taj cITY\", image: number43 },\n { id: 44, name: \"REHAB FAYEZ \", title: \"Title 44\", work: \"Country HR Manager and Regional Diversity and Inclusion Lead (MENA) At Amazon\", image: number44 },\n { id: 45, name: \"SALMA HASSANEIN \", title: \"Title 45\", work: \"Senior Manager, Private Sector Engagement at DAI|USAID\", image: number45 },\n { id: 46, name: \"NASHWA BELAL\", title: \"Title 46\", work: \"Chief Technical Advisor, Egypt Youth Employment ILO \", image: number46 },\n { id: 47, name: \"MOHAMED ELWY\", title: \"Title 47\", work: \"CEO Housing and Development Properties - Affiliate Housing and Development Bank & Founder Homeberry Consultancy\", image: number47 },\n { id: 48, name: \"ENAS ABDELAZIZ \", title: \"Title 48\", work: \"Deputy Chief of Party, USAID's Business Egypt Program\", image: number48 },\n { id: 49, name: \"NADINE ELSHOUBARY\", title: \"Title 49\", work: \"R&D Director -Middle East, North Africa and Pakistan at Mondelez\", image: number49 },\n { id: 50, name: \"MUHAMAD GAWISH\", title: \"Title 50\", work: \"Co-Founder & Chief Business Development Officer at iSchool Edtech\", image: number50 },\n { id: 51, name: \"YASMINE YEHIA\", title: \"Title 51\", work: \"MEA Employer Branding Manager at Schneider Electric\", image: number51 },\n { id: 52, name: \"IMAN ELNASHAR\", title: \"Title 52\", work: \"Director, Digital Experience and Product\", image: number52 },\n { id: 53, name: \"OLA FARRAG\", title: \"Title 53\", work: \"CFYE Egypt Country Lead\", image: number53 },\n { id: 54, name: \"MARWA YOUSSEF\", title: \"Title 54\", work: \"Senior UI/UX Consultant & Delivery Leader at IBM \", image: number54 },\n { id: 55, name: \"MOHAMED NAGATY\", title: \"Title 55\", work: \"Entrepreneur & Investor \", image: number55 },\n { id: 56, name: \"HEBA HAKKY\", title: \"Title 56\", work: \"Liwwa Managing Director & Investment Expert\", image: number56 },\n { id: 57, name: \"MAHMOUD ABDELMEGEED\", title: \"Title 57\", work: \"Founder & CEO | DNAAYA Entrepreneur & content Creator\", image: number57 },\n { id: 58, name: \"SHERINE SHAABAN\", title: \"Title 58\", work: \"HR Strategic Business Partner Nigeria & North Africa at The Coca-Cola Company\", image: number58 },\n { id: 59, name: \"YASMINE NASSER \", title: \"Title 59\", work: \"Senior Societal Impact Program Manager at Udacity\", image: number59 },\n { id: 60, name: \"DOAA ALI\", title: \"Title 60\", work: \"HR Resourcing Supervisor Vodafone Intelligent Solutions (_VOIS)| Certified Assessor | Certified Trainer\", image: number60 },\n { id: 61, name: \"NOURHAN KANDIL \", title: \"Title 61\", work: \"Founder Dr. Baby \", image: number61 },\n { id: 62, name: \"HANZADA ABOU YOUSSEF \", title: \"Title 62\", work: \"Entrepreneurship & Social Innovation Consultant, Director of Programs at Riseup & Founder of Hanzada Designs\", image: number62 },\n { id: 63, name: \"SHERIN MISHRIKY \", title: \"Title 63\", work: \"Organization Development & Scaleups Consultant \", image: number63 },\n { id: 64, name: \"YOUSSEF SABRY \", title: \"Title 64\", work: \"CEO & Co-Founder at Virtual Worker Now\", image: number64 },\n { id: 65, name: \"LAMAAN \", title: \"Title 65\", work: \"Founder & Host of Cut The Crap \", image: number65 },\n { id: 66, name: \"TASNEEM ELAIDY \", title: \"Title 66\", work: \"Musician\", image: number66 },\n { id: 67, name: \"NOUR ALI SHOKRI \", title: \"Title 67\", work: \"People & Culture Manager - Together We Cancer Community Founder\", image: number67 },\n { id: 68, name: \"FARIDA SALEM \", title: \"Title 68\", work: \"CEO & Founder of Empower Football Academy - Head coach At ZED FC Women's Academy\", image: number68 },\n { id: 69, name: \"MALAK SHOUMAN \", title: \"Title 69\", work: \"Food Blogger, Recipe Developer& Menu Consultant\", image: number69 },\n { id: 70, name: \"NOUR EMAM \", title: \"Title 70\", work: \"Co-founder & CEO of Mothering \", image: number70 },\n { id: 71, name: \"SARAH AKRAM \", title: \"Title 71\", work: \"(TheNerdyMama) Motherhood & Parenting Content Creator\", image: number71 },\n { id: 72, name: \"MARIAM MEDHAT \", title: \"Title 72\", work: \"Counseling Psycologist & Parenting Coach\", image: number72 },\n\n ];\n const speakersPerPage = 18;\n const speakersPerRow = 6;\n const totalSlides = Math.ceil(speakers.length / speakersPerPage);\n const [selectedSpeaker, setSelectedSpeaker] = useState(null);\n // Function to handle speaker selection\n const handleSpeakerSelect = (speaker) => {\n console.log('Selected speaker:', speaker); // Add logging to check if the function is being called\n setSelectedSpeaker(speaker);\n };\n\n const handleCloseDialog = () => {\n setSelectedSpeaker(null);\n };\n\n\n\n return (\n screenWidth < 768 ?\n \n//
\n// Our Network
\n//\n// {speakers\n// .slice(slideIndex * speakersPerPage, (slideIndex + 1) * speakersPerPage)\n// .map((speaker) => (\n//
\n// \n//
\n// ))}\n// \n// \n//
\n// \n//
\n// {speaker.name}
\n//{speaker.work}
\n//\n
\n :\n\n \n
\n Our Network
\n\n \n {/* Mapping over the array to render individual divs */}\n {speakers.map((speaker) => (\n \n \n ))}\n \n
\n \n \n
\n \n
\n {speaker.name}
\n{speaker.work}
\n\n \n {Array.from({ length: totalSlides }, (_, slideIndex) => (\n \n \n ))}\n \n {selectedSpeaker && (\n
\n );\n}\n\nexport default SpeackersEvent;\n\n","import React, { useState } from \"react\";\nimport Thumbnail from '../../public/assets/ourEventsBackground.png';\nimport ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';\nimport Dialog from '@mui/material/Dialog';\nimport DialogContent from '@mui/material/DialogContent';\nimport playButton from '../../public/assets/playButton.png'\nimport './PastEvents.css'\nimport usaidLogo from '../../public/assets/usaid.png'\nimport daiLogo from '../../public/assets/Updated-dai-logo.png'\n\n\nexport default function WorkShops() {\n const [isVideoPlaying, setIsVideoPlaying] = useState(false);\n\n const handlePlayClick = () => {\n setIsVideoPlaying(true);\n };\n\n const handleCloseModal = () => {\n setIsVideoPlaying(false);\n };\n\n return (\n \n
\n Our Network
\n\n {speakers\n .slice(slideIndex * speakersPerPage, (slideIndex + 1) * speakersPerPage)\n .map((speaker) => (\n
\n handleSpeakerSelect(speaker)}>\n
\n ))}\n \n \n
\n \n
\n {speaker.name}
\n{speaker.work}
\n\n
\n );\n}\n","import React from 'react'\nimport IntroEvents from './Intro'\nimport IntroSectioneEvents from './Attends'\nimport SpeackersEvent from './Speakers'\nimport Sponsors from '../UpcomingEvents/Sponsors'\nimport SliderComponent from '../UpcomingEvents/SpeackersDetails'\nimport WorkShops from './WorkshopsSnippets'\n\nfunction PastEvents() {\n return (\n \n {!isVideoPlaying && (\n
\n\n \n
\n )}\n \n
\n\n \n \n
\n Workshops\n Snippets
\n\n Second edition of Carerha Summit, held on the 7th of October in Park 15, Rehab, Cairo.
\n Carerha Summit is the first women’s summit in the MEcertificate-from-parentNA region empowering women economically and
\n fostering diversity, equity & inclusion!\n
\n
\n )\n}\n\nexport default PastEvents","import * as React from 'react';\nimport TextField from '@mui/material/TextField';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport SearchIcon from '@mui/icons-material/Search';\nimport { IconButton } from '@mui/material';\nimport { useHistory } from 'react-router-dom';\nimport match from 'autosuggest-highlight/match';\nimport parse from 'autosuggest-highlight/parse';\nimport './Search.css';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\nexport default function CompanySearch() {\n const [company, setCompany] = React.useState([]);\n const [selected, setSelected] = React.useState(\"\");\n const [open, setOpen] = React.useState(false);\n const [inputValue, setInputValue] = React.useState(\"\");\n const history = useHistory();\n\n\n async function publicToken() {\n\n var myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/x-www-form-urlencoded\");\n myHeaders.append(\"Cookie\", \"sessionid=1|pmeebfmoxxx6uj33xfahcnh1tqe1fp56|HV5BFOxbNURL|IjcwNDgzMWJkYzJkMmRjNzhiODBhMmI3YWM5YzU0MDMyY2I4NDBlNDAyMzYzZmIwOTczYzc4ZWE1MzU5OTQ4OTgi:1rEtXh:ST1KW2fn8QGmjmijGe9KIddjx7g\");\n\n var urlencoded = new URLSearchParams();\n urlencoded.append(\"client_id\", \"yHY7kXcHgg95qpMHMKc7NioVRT8bIBxCQkLxclg3\");\n urlencoded.append(\"client_secret\", \"rivktk331PuSQXEhyVmBBRIab1sV58jS2awgGduXB1I24yDiOmMFG20UBh2UYshFpG5Tfrevb9xfozruB0dtcM4secPXc4y4dRx0RhWHOTiz2tRqoc3Rlzl5iK5ikdXI\");\n urlencoded.append(\"grant_type\", \"client_credentials\");\n urlencoded.append(\"token_type\", \"jwt\");\n\n var requestOptions = {\n method: 'POST',\n headers: myHeaders,\n body: urlencoded,\n redirect: 'follow'\n };\n\n let token = await fetch(\"https://carerha.com/oauth2/access_token/\", requestOptions)\n .then(response => response.json())\n .then(result => {\n let token = result.access_token\n return token\n })\n .catch(error => console.log('error', error))\n\n return token\n }\n\n\n // server API\n\n React.useEffect(() => {\n const fetchData = async () => {\n const access_token = await publicToken()\n\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n myHeaders.append(\"Authorization\", `jwt ${access_token}`);\n myHeaders.append(\"Cookie\", \"csrftoken=ipXM6r0tq7fCylAFfz0aDadBEbgasq65fqyZuC45vPK36sEf2hXIUbBHnvxfRpnz; openedx-language-preference=en; sessionid=1|x5d0ofalc45cm27ivoap89up5h88nieh|QrMlIZhglWVj|ImFkYmZmYjU2M2Y0MDViZDcyMzUxMzI2MThlYjZkYjEwZDMxZTc2ZDI5ZWNiNGZiODYzOWZmM2JiN2E4NjBlNDUi:1rtERo:ec_BVakWQsdj2kr8vFxjZyOX1Jg\");\n\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n\n try {\n const response = await fetch(\"https://carerha.com/api/extraorg/v1/extraorg/\", requestOptions);\n const result = await response.json();\n setCompany(result.results);\n } catch (error) {\n console.error(error);\n }\n };\n\n fetchData();\n }, []);\n\n const handleSearch = () => {\n if (selected) {\n history.push(`/company-details/${selected}`);\n }\n };\n\n // Map the data from the API to match the structure expected by Autocomplete\n const options = company.map(item => ({ name: item.name, id: item.id }));\n\n return (\n \n\n
\n \n
\n \n\n
\n \n {\n if (inputValue) {\n setOpen(true);\n }\n }}\n onClose={() => setOpen(false)}\n onInputChange={(event, value, reason) => setInputValue(value)}\n onChange={(event, value) => setSelected(value?.id)}\n getOptionLabel={(option) => option.name}\n renderInput={(params) => (\n \n
\n );\n}\n","export default __webpack_public_path__ + \"03b6df0bdeb93ce29181e2ea3dcaa960.jpeg\";","import React from 'react'\nimport image from '../../../public/assets/community.jpeg'\nimport './CompanyCard.css'\nimport PlayCircleIcon from '@mui/icons-material/PlayCircle';\nimport { Link } from 'react-router-dom/cjs/react-router-dom.min';\n\nfunction CompanyCard(props) {\n return (\n\n \n \n
\n \n \n\n 
\n
\n )\n}\n\nexport default CompanyCard","import React, { useEffect, useState } from 'react';\nimport CompanySearch from './Search/Search';\nimport CompanyCard from './CompanyCard/CompanyCard';\nimport './AllCompanies.css';\nimport Pagination from '@mui/material/Pagination';\nimport Stack from '@mui/material/Stack';\nimport { Tab, Tabs } from '@mui/material';\nimport image from '../../public/assets/community.jpeg';\nimport { getPrograms } from '../program-about/api';\n\nfunction AllCompanies() {\n const [companies, setCompanies] = useState([]);\n const [programs, setPrograms] = useState([]);\n const [currentPage, setCurrentPage] = useState(1);\n const [numPages, setNumPages] = useState(1);\n const [activeTab, setActiveTab] = useState(\"All\");\n const [isUpdated, setIsUpdated] = useState(false); // Flag to track update status\n\n async function publicToken() {\n const myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/x-www-form-urlencoded\");\n myHeaders.append(\"Cookie\", \"sessionid=1|pmeebfmoxxx6uj33xfahcnh1tqe1fp56|HV5BFOxbNURL|IjcwNDgzMWJkYzJkMmRjNzhiODBhMmI3YWM5YzU0MDMyY2I4NDBlNDAyMzYzZmIwOTczYzc4ZWE1MzU5OTQ4OTgi:1rEtXh:ST1KW2fn8QGmjmijGe9KIddjx7g\");\n\n const urlencoded = new URLSearchParams();\n urlencoded.append(\"client_id\", \"yHY7kXcHgg95qpMHMKc7NioVRT8bIBxCQkLxclg3\");\n urlencoded.append(\"client_secret\", \"rivktk331PuSQXEhyVmBBRIab1sV58jS2awgGduXB1I24yDiOmMFG20UBh2UYshFpG5Tfrevb9xfozruB0dtcM4secPXc4y4dRx0RhWHOTiz2tRqoc3Rlzl5iK5ikdXI\");\n urlencoded.append(\"grant_type\", \"client_credentials\");\n urlencoded.append(\"token_type\", \"jwt\");\n\n const requestOptions = {\n method: 'POST',\n headers: myHeaders,\n body: urlencoded,\n redirect: 'follow'\n };\n\n let token = await fetch(\"https://carerha.com/oauth2/access_token/\", requestOptions)\n .then(response => response.json())\n .then(result => result.access_token)\n .catch(error => console.log('error', error));\n\n return token;\n }\n\n const fetchCompanies = async (token) => {\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n myHeaders.append(\"Authorization\", `jwt ${token}`);\n myHeaders.append(\"Cookie\", \"csrftoken=ipXM6r0tq7fCylAFfz0aDadBEbgasq65fqyZuC45vPK36sEf2hXIUbBHnvxfRpnz; openedx-language-preference=en; sessionid=1|x5d0ofalc45cm27ivoap89up5h88nieh|QrMlIZhglWVj|ImFkYmZmYjU2M2Y0MDViZDcyMzUxMzI2MThlYjZkYjEwZDMxZTc2ZDI5ZWNiNGZiODYzOWZmM2JiN2E4NjBlNDUi:1rtERo:ec_BVakWQsdj2kr8vFxjZyOX1Jg\");\n\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n\n try {\n const response = await fetch(\"https://carerha.com/api/extraorg/v1/extraorg/\", requestOptions);\n const result = await response.json();\n setCompanies(result.results);\n setNumPages(result.num_pages);\n } catch (error) {\n console.error(error);\n }\n };\n\n const fetchPrograms = async () => {\n try {\n const programsData = await getPrograms();\n setPrograms(programsData);\n return programsData;\n } catch (error) {\n console.error('Error fetching programs:', error);\n return [];\n }\n };\n\n const updateCompanyProgramsNum = (companies, programs) => {\n const shortNameCounts = {};\n programs.forEach(program => {\n const shortName = program.authoring_organizations[0].key;\n if (shortNameCounts.hasOwnProperty(shortName)) {\n shortNameCounts[shortName]++;\n } else {\n shortNameCounts[shortName] = 1;\n }\n });\n\n const updatedCompanies = companies.map(companyItem => {\n const shortName = companyItem.name;\n const programsNum = shortNameCounts[shortName] || 0;\n return { ...companyItem, programsNum };\n });\n\n setCompanies(updatedCompanies);\n };\n\n useEffect(() => {\n const fetchData = async () => {\n const access_token = await publicToken();\n await fetchCompanies(access_token);\n const programsData = await fetchPrograms();\n if (programsData.length > 0 && companies.length > 0) {\n updateCompanyProgramsNum(companies, programsData);\n setIsUpdated(true); // Set flag to true after update\n }\n };\n\n fetchData();\n }, [currentPage]);\n\n useEffect(() => {\n if (programs.length > 0 && companies.length > 0 && !isUpdated) {\n updateCompanyProgramsNum(companies, programs);\n setIsUpdated(true); // Ensure update happens only once\n }\n }, [programs, companies, isUpdated]);\n\n const handlePageChange = (event, page) => {\n setCurrentPage(page);\n };\n\n const filterCompanies = (companyItems) => {\n if (activeTab === \"All\") {\n return companyItems;\n } else {\n return companyItems.filter(companyItem => companyItem.name === activeTab);\n }\n };\n\n const handleTabChange = (event, tab) => {\n setActiveTab(tab);\n setCurrentPage(1);\n };\n\n return (\n \n {props.subTitle}\n
\n \n {props.name}
\n\n
\n \n
\n\n {/* \n
\n {props.jobs === 0 ? \"0\" : props.jobs}
\nJOBS
\n\n
\n {props.events === 0 ? \"0\" : props.events}
\nEVENTS
\n\n {/*
\n {props.courses ? \"0\" : props.courses}
*/}\n{props.programsNum}
\n\nPrograms
\n\n
\n );\n}\n\nexport default AllCompanies;\n","export default __webpack_public_path__ + \"743f7d1c9756ee8e4b42e1897efd85d3.png\";","import React from 'react';\nimport image from '../../../public/assets/community.jpeg';\nimport './DetailsCardCompany.css';\nimport FacebookRoundedIcon from '@mui/icons-material/FacebookRounded';\nimport XIcon from '@mui/icons-material/X';\nimport LinkedInIcon from '@mui/icons-material/LinkedIn';\nimport InstagramIcon from '@mui/icons-material/Instagram';\nimport StarRateRoundedIcon from '@mui/icons-material/StarRateRounded';\nimport LocationOnIcon from '@mui/icons-material/LocationOn';\n\nfunction DetailsCardCompany(props) {\n return (\n \n {filterCompanies(companies).length === 0 ? (\n
\n Stay tuned for updates!
\n ) : (\n filterCompanies(companies).map(companyItem => (\n \n \n \n
\n \n \n
\n );\n}\n\nexport default DetailsCardCompany;\n","import React from 'react';\nimport { Nav } from 'react-bootstrap';\nimport './OverView.css';\n\nfunction OverView(props) {\n const scrollToWantedElement = (e) => {\n e.preventDefault();\n const id = e.target.getAttribute('href').slice(1);\n const element = document.getElementById(id);\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' });\n }\n };\n\n return (\n \n
\n - \n {props?.locations?.map((location, index) => (\n
\n \n\n
\n );\n}\n\nexport default OverView;\n","export default __webpack_public_path__ + \"981d9fa6acf31058686af1d5760f1b84.png\";","import React from 'react'\nimport image from '../../../public/assets/Banque_du_caire_Logo.svg.png'\nimport './JobsCard.css'\nimport LocationOnIcon from '@mui/icons-material/LocationOn';\nfunction JobsCard(props) {\n return (\n \n {/* Define each section with corresponding IDs */}\n \n \n \n \n
\n About the Company
\n {/* Content for About section */}\n{props.About}
\nCompany Size
\nEmployees {props.company_size}
\n\n
\n )\n}\n\nexport default JobsCard","import React, { useEffect, useState } from 'react';\nimport image from \"../../public/assets/homebg 1.png\";\nimport DetailsCardCompany from './DetailsCardCompany/DetailsCardCompany';\nimport OverView from './OverView/OverView';\nimport JobsCard from './JobsCard/JobsCard';\nimport { useParams } from 'react-router-dom/cjs/react-router-dom.min';\nimport './CompanyDeatails.css';\nimport EventCard from '../Events/EventCard/EventCard';\nimport ProgramCard from '../AllPrograms/ProgramCard/ProgramCard';\nimport { getPrograms } from '../program-about/api';\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport 'swiper/css/navigation';\n\n// Import required modules\nimport { Spinner } from '@edx/paragon';\nimport { Autoplay, Navigation } from 'swiper/modules';\n\n\nfunction CompanyDeatails() {\n const [companyDetails, setCompanyDetails] = useState({});\n const { id } = useParams();\n const [programsList, setProgramsList] = useState([]);\n const [filteredPrograms, setFilteredPrograms] = useState([]);\n\n useEffect(() => {\n const fetchData = async () => {\n try {\n const programsData = await getPrograms();\n setProgramsList(programsData);\n console.log(programsData, \"programsData\");\n } catch (error) {\n console.error('Error setting programs in state:', error);\n }\n };\n\n fetchData();\n }, []);\n\n async function publicToken() {\n var myHeaders = new Headers();\n myHeaders.append(\"Content-Type\", \"application/x-www-form-urlencoded\");\n myHeaders.append(\"Cookie\", \"sessionid=1|pmeebfmoxxx6uj33xfahcnh1tqe1fp56|HV5BFOxbNURL|IjcwNDgzMWJkYzJkMmRjNzhiODBhMmI3YWM5YzU0MDMyY2I4NDBlNDAyMzYzZmIwOTczYzc4ZWE1MzU5OTQ4OTgi:1rEtXh:ST1KW2fn8QGmjmijGe9KIddjx7g\");\n\n var urlencoded = new URLSearchParams();\n urlencoded.append(\"client_id\", \"yHY7kXcHgg95qpMHMKc7NioVRT8bIBxCQkLxclg3\");\n urlencoded.append(\"client_secret\", \"rivktk331PuSQXEhyVmBBRIab1sV58jS2awgGduXB1I24yDiOmMFG20UBh2UYshFpG5Tfrevb9xfozruB0dtcM4secPXc4y4dRx0RhWHOTiz2tRqoc3Rlzl5iK5ikdXI\");\n urlencoded.append(\"grant_type\", \"client_credentials\");\n urlencoded.append(\"token_type\", \"jwt\");\n\n var requestOptions = {\n method: 'POST',\n headers: myHeaders,\n body: urlencoded,\n redirect: 'follow'\n };\n\n let token = await fetch(\"https://carerha.com/oauth2/access_token/\", requestOptions)\n .then(response => response.json())\n .then(result => {\n let token = result.access_token;\n return token;\n })\n .catch(error => console.log('error', error));\n\n return token;\n }\n\n React.useEffect(() => {\n async function fetchData() {\n try {\n const access_token = await publicToken();\n\n const myHeaders = new Headers();\n myHeaders.append(\"accept\", \"application/json\");\n myHeaders.append(\"Authorization\", `jwt ${access_token}`);\n myHeaders.append(\"Cookie\", \"csrftoken=ipXM6r0tq7fCylAFfz0aDadBEbgasq65fqyZuC45vPK36sEf2hXIUbBHnvxfRpnz; openedx-language-preference=en; sessionid=1|x5d0ofalc45cm27ivoap89up5h88nieh|QrMlIZhglWVj|ImFkYmZmYjU2M2Y0MDViZDcyMzUxMzI2MThlYjZkYjEwZDMxZTc2ZDI5ZWNiNGZiODYzOWZmM2JiN2E4NjBlNDUi:1rtERo:ec_BVakWQsdj2kr8vFxjZyOX1Jg\");\n\n const requestOptions = {\n method: \"GET\",\n headers: myHeaders,\n redirect: \"follow\"\n };\n\n const response = await fetch(`https://carerha.com/api/extraorg/v1/extraorg/${id}/`, requestOptions);\n const result = await response.json();\n setCompanyDetails(result);\n console.log(result, \"result from job card \");\n } catch (error) {\n console.error(error);\n }\n }\n\n fetchData();\n }, [id]);\n\n useEffect(() => {\n // console.log('Company details:', companyDetails);\n // console.log('Programs list:', programsList);\n\n if (companyDetails.name && programsList.length > 0) {\n const filtered = programsList.filter(program => {\n console.log('Checking program:', program.title);\n console.log('Authoring organizations:', program.authoring_organizations);\n return program.authoring_organizations.some(org =>\n org.key.toLowerCase().includes(companyDetails.name.toLowerCase())\n );\n });\n console.log('Filtered programs:', filtered);\n setFilteredPrograms(filtered);\n }\n }, [companyDetails, programsList]);\n\n return (\n \n \n
\n \n
\n {props.name}
\n{props.position_title}
\n\n
\n\n\n\n \n
\n \n {props.position_type}\n
\n \n {props.job_type}\n
\n \n {props.experience}\n
\n \n
\n {props.deadline}
\n \n\n 
\n \n }\n {companyDetails?.event_details &&\n \n }\n {/* {filteredPrograms.length > 0 &&\n \n } */}\n {filteredPrograms.length > 0 ? (\n \n \n {filteredPrograms.map((program, i) => (\n \n \n ))}\n \n \n\n ) : (\n
\n );\n}\n\nexport default CompanyDeatails;\n","export default __webpack_public_path__ + \"3018025b5af9b5123467b13c58aafbb8.png\";","import React from 'react'\nimport './AboutUs.css'\nimport image from '../../public/assets/AboutUsFirstImage-1-removebg-preview.png'\nfunction AboutUs() {\n return (\n \n
\n {companyDetails?.jobs &&\n \n
\n \n
\n Jobs
\n\n {companyDetails?.jobs?.map((job, index) => (\n
\n \n
\n ))}\n Events
\n\n {companyDetails?.event_details?.map((event, index) => (\n
\n \n
\n ))}\n Programs
\n\n {filteredPrograms.map((program, index) => (\n
\n Programs
\n\n\n\n
\n
\n\n
\n\n )\n}\n\nexport default AboutUs","import React, { useState } from 'react';\nimport './MediaPage.css';\nimport { Navigation, Pagination } from 'swiper/modules';\n\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\n\n// Image imports\nimport image1 from '../../public/assets/Articles/1(1).jpeg';\nimport image2 from '../../public/assets/Articles/2.jpeg';\nimport image3 from '../../public/assets/Articles/3.jpeg';\nimport image4 from '../../public/assets/Articles/4.jpeg';\nimport image5 from '../../public/assets/Articles/5.png';\nimport image6 from '../../public/assets/Articles/6.jpg';\nimport image7 from '../../public/assets/Articles/7.jpg';\nimport image8 from '../../public/assets/Articles/8.jpg';\nimport image9 from '../../public/assets/Articles/9.png';\n// import image10 from '../../public/assets/Articles/10.jpg';\nimport image11 from '../../public/assets/Articles/11.jpg';\nimport image12 from '../../public/assets/Articles/12.png';\nimport image13 from '../../public/assets/Articles/13.png';\nimport image14 from '../../public/assets/Articles/14.png';\nimport image15 from '../../public/assets/Articles/15.jpg';\nimport image16 from '../../public/assets/Articles/16.jpg';\nimport image17 from '../../public/assets/Articles/17.jpg';\nimport image18 from '../../public/assets/Articles/18.jpg';\n// import image19 from '../../public/assets/Articles/19.jpg';\nimport image20 from '../../public/assets/Articles/20.jpg';\nimport image21 from '../../public/assets/Articles/21.png';\nimport image22 from '../../public/assets/Articles/22.jpg';\nimport image23 from '../../public/assets/Articles/23.jpg';\nimport image24 from '../../public/assets/Articles/24.jpg';\n// import image25 from '../../public/assets/Articles/25.jpg';\nimport image26 from '../../public/assets/Articles/26.jpg';\nimport image27 from '../../public/assets/Articles/27.png';\nimport image28 from '../../public/assets/Articles/28.jpeg';\nimport image29 from '../../public/assets/Articles/29.jpg';\n\n// Video imports\nimport video1 from '../../public/assets/VideosMedia/1.png';\nimport video2 from '../../public/assets/VideosMedia/2.jpg';\nimport video3 from '../../public/assets/VideosMedia/3.jpg';\nimport video4 from '../../public/assets/VideosMedia/4.jpg';\nimport video5 from '../../public/assets/VideosMedia/5.jpg';\nimport video6 from '../../public/assets/VideosMedia/6.jpg';\nimport video7 from '../../public/assets/VideosMedia/7.jpg';\nimport video8 from '../../public/assets/VideosMedia/8.jpg';\nimport video9 from '../../public/assets/VideosMedia/9.jpg';\nimport video10 from '../../public/assets/VideosMedia/10.jpg';\nimport video11 from '../../public/assets/VideosMedia/11.jpg';\nimport video12 from '../../public/assets/VideosMedia/12.png';\nimport video13 from '../../public/assets/VideosMedia/13.png';\n\nconst mediaData = {\n articles: [\n { title: \"Mastercard Women SME Leaders Awards reveals 2024 winners\", image: image1, link: \"https://www.mastercard.com/news/eemea/en/newsroom/press-releases/en/2024/june/mastercard-women-sme-leaders-awards-reveals-2024-winners/\" },\n { title: \"Winners Revealed For The Mastercard Women SME Leaders Awards 2024\", image: image2, link: \"https://www.entrepreneur.com/en-ae/women-entrepreneur/the-recap-mastercard-women-sme-leaders-awards-2024/475289\" },\n { title: \"Here Are The Shortlisted Nominees Of The Mastercard Women SME Leaders Awards 2024\", image: image3, link: \"https://www.entrepreneur.com/en-ae/women-entrepreneur/meet-the-shortlisted-nominees-of-the-mastercard-women-sme/475005\" },\n { title: \"Mastercard Women SME Leaders Awards reveals 2024 winners\", image: image4, link: \"https://www.cmosmagazine.com/en/mastercard-women-sme-leaders-awards-reveals-2024-winners/\" },\n { title: \"Trailblazers: Meet The Winners Of The 2024 Mastercard Women SME Leaders Awards\", image: image5, link: \"https://www.entrepreneur.com/en-ae/women-entrepreneur/meet-the-winners-of-the-2024-mastercard-women-sme-leaders/476403\" },\n { title: \"Women’s Career Conference ‘Carerha Summit’ Launches in Downtown Cairo\", image: image6, link: \" https://thestartupscene.me/OPPORTUNITIES/Women-s-Career-Conference-Carerha-Summit-Launches-in-Downtown-Cairo\" },\n { title: \" نستله مصر تتعاون مع Carerha و Monappetit لدعم صاحبات مشروعات الطبخ من المنزل\", image: image7, link: \"https://bloom-gate.com/%D9%85%D8%AC%D8%AA%D9%85%D8%B9/%D9%86%D8%B3%D8%AA%D9%84%D9%87-%D9%85%D8%B5%D8%B1-%D8%AA%D8%AA%D8%B9%D8%A7%D9%88%D9%86-%D9%85%D8%B9-carerha-%D9%88-monappetit-%D9%84%D8%AF%D8%B9%D9%85-%D8%B5%D8%A7%D8%AD%D8%A8%D8%A7%D8%AA-%D9%85%D8%B4/\" },\n { title: \"شراكة بين «نستله» و«Carerha» و«Monappetit» لدعم أصحاب مشروعات الأكل البيتي\", image: image8, link: \"https://humansinvestment.com/%D8%B4%D8%B1%D8%A7%D9%83%D8%A9-%D8%A8%D9%8A%D9%86-%D9%86%D8%B3%D8%AA%D9%84%D8%A9-%D9%88carerha-%D9%88monappetit-%D9%84%D8%AF%D8%B9%D9%85-%D8%A3%D8%B5%D8%AD%D8%A7/\" },\n { title: \"كاريرها 2023 تجمع 5000 مشاركة لبحث دور المرأة في تكنولوجيا المعلومات\", image: image9, link: \"https://www.albawabhnews.com/4890365\" },\n // { title: \"Carerha Summit discusses inclusivity and integration in the workplace according to Egypt's Vision 2030\", image: image10, link: \"https://akhbarelsaa.com/tag/%D9%83%D8%A7%D8%B1%D9%8A%D8%B1%D9%87%D8%A7\" },\n { title: \"الأمومة مش نهاية الكارير «كاريرها».. أول منصة نسائية لتوفير وظائف حرة\", image: image11, link: \"https://www.algomhor.com/article/3243/%C2%AB%D9%83%D8%A7%D8%B1%D9%8A%D8%B1%D9%87%D8%A7%C2%BB-%D8%A3%D9%88%D9%84-%D9%85%D9%86%D8%B5%D8%A9-%D9%86%D8%B3%D8%A7%D8%A6%D9%8A%D8%A9-%D9%84%D8%AA%D9%88%D9%81%D9%8A%D8%B1-%D9%88%D8%B8%D8%A7%D8%A6%D9%81-%D8%AD%D8%B1%D8%A9\" },\n { title: \"قمة كاريرها تناقش دور المرأة في تطوير التكنولوجيا في مصر\", image: image12, link: \"https://fintechgate.net/tag/%D9%83%D8%A7%D8%B1%D9%8A%D8%B1%D9%87%D8%A7/\" },\n { title: \"بحضور 5000 مشاركة: قمة كاريرها تناقش تحقيق مبدأ الشمول والإندماج في بيئة العمل طبقًا لرؤية مصر 2030\", image: image13, link: \"https://elghad.news/157134/\" },\n { title: \"رئيس مونديليز إيجيبت فودز خلال قمة كاريرها: أجندة التنوع والإنصاف والشمول أصبحت جزءا من نسيج الشركة وثقافة فريق العمل\", image: image14, link: \"https://www.shorouknews.com/news/view.aspx?cdate=18102023&id=d1512eff-28a5-4c1d-b25f-17d693cf7482\" },\n { title: \" «بي تك» توقع مذكرة تفاهم مع «كاريرها» لدعم وتعزيز دور المرأة في مجال التكنولوجيا وريادة الأعمال\", image: image15, link: \"https://fintechgate.net/2024/01/24/%D8%A8%D9%8A-%D8%AA%D9%83-%D8%AA%D9%88%D9%82%D8%B9-%D9%85%D8%B0%D9%83%D8%B1%D8%A9-%D8%AA%D9%81%D8%A7%D9%87%D9%85-%D9%85%D8%B9-%D9%83%D8%A7%D8%B1%D9%8A%D8%B1%D9%87%D8%A7-%D9%84/\" },\n { title: \"B.TECH inks MoU with Carerha to nurture women’s role in ICT and entrepreneurship sectors\", image: image16, link: \"https://www.zawya.com/en/press-release/companies-news/btech-inks-mou-with-carerha-to-nurture-womens-role-in-ict-and-entrepreneurship-sectors-xmfxguma\" },\n { title: \" Foundever.org and Carerha: A partnership for women’s economic empowerment in Egypt\", image: image17, link: \"https://foundever.com/blog/foundever-org-and-carerha-a-partnership-for-womens-economic-empowerment-in-egypt/ \" },\n { title: \" «نستله مصر» تتعاون مع Carerha وMonappetit لدعم صاحبات مشروعات الطبخ من المنزل\", image: image18, link: \"https://almalnews.com/%d9%86%d8%b3%d8%aa%d9%84%d9%87-%d9%85%d8%b5%d8%b1-%d8%aa%d8%aa%d8%b9%d8%a7%d9%88%d9%86-%d9%85%d8%b9-carerha-%d9%88monappetit-%d9%84%d8%af%d8%b9%d9%85-%d8%b5%d8%a7%d8%ad%d8%a8%d8%a7%d8%aa/\" },\n // { title: \"Egypt’s Vision 2030: Carerha Summit discusses women’s role in technology\", image: image19, link: \"https://www.almalnews.com/tag/%d9%83%d8%a7%d8%b1%d9%8a%d8%b1%d9%87%d8%a7/\" },\n { title: \" شراكة بين «نستلة» و«Carerha» و«Monappetit» لدعم أصحاب مشروعات الأكل البيتي\", image: image20, link: \"https://nabd.com/s/116435206-1c69ee/%D8%B4%D8%B1%D8%A7%D9%83%D8%A9-%D8%A8%D9%8A%D9%86-%D9%86%D8%B3%D8%AA%D9%84%D8%A9-%D9%88-carerha-%D9%88-monappetit-%D9%84%D8%AF%D8%B9%D9%85-%D8%A3%D8%B5%D8%AD%D8%A7%D8%A8-%D9%85%D8%B4%D8%B1%D9%88%D8%B9%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D9%83%D9%84-%D8%A7%D9%84%D8%A8%D9%8A%D8%AA%D9%8A\" },\n { title: \"موقع Hire Supermama .. لكل أم بتدوّر على شغل\", image: image21, link: \" https://rahetbally.com/ar/read/articles/%D9%85%D9%88%D9%82%D8%B9-hire-supermama-%D9%84%D9%83%D9%84-%D8%A3%D9%85-%D8%A8%D8%AA%D8%AF%D9%88%D9%91%D8%B1-%D8%B9%D9%84%D9%89-%D8%B4%D8%BA%D9%84\" },\n { title: \"مبادرة لمساعدة الأمهات في العثور علي وظائف| حكاية موقع كاريرها\", image: image22, link: \"https://www.alwafd.news/4372433\" },\n { title: \"مشروع «هاير سوبر ماما» يفتح الباب لعمل الأمهات\", image: image23, link: \"https://www.almasryalyoum.com/news/details/1427878\" },\n { title: \"New social media platforms are helping to support Egypt’s working mothers as they juggle childcare with employment\", image: image24, link: \"https://english.ahram.org.eg/NewsContent/50/1210/473300/AlAhram-Weekly/Living/Helping-working-mothers-.aspx\" },\n // { title: \"Carerha Summit 2023: Discussing women’s impact on the IT sector\", image: image25, link: \"https://www.elfagr.org/4470306\" },\n { title: \"الأمومة ليست عائقا.. `جيسي` تؤسس موقع لتشغيل الأمهات\", image: image26, link: \" https://www.dostor.org/2833688\" },\n { title: \"جيسي تؤسس شركة لتوظيف الأمهات: الأمومة مش نهاية الكارير\", image: image27, link: \"https://honna.elwatannews.com/news/details/2032168/%D8%AC%D9%8A%D8%B3%D9%8A-%D8%AA%D8%A4%D8%B3%D8%B3-%D8%B4%D8%B1%D9%83%D8%A9-%D9%84%D8%AA%D9%88%D8%B8%D9%8A%D9%81-%D8%A7%D9%84%D8%A3%D9%85%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D8%A3%D9%85%D9%88%D9%85%D8%A9-%D9%85%D8%B4-%D9%86%D9%87%D8%A7%D9%8A%D8%A9-%D8%A7%D9%84%D9%83%D8%A7%D8%B1%D9%8A%D8%B1\" },\n { title: \"هاير سوبر ماما.. مشروع مصري لتوظيف الأمهات من المنازل\", image: image28, link: \"https://al-ain.com/article/hire-super-mama-egyptian-project\" },\n { title: \"هاير سوبر ماما.. وظيفة تناسب الأمهات\", image: image29, link: \" https://sabah.rosaelyoussef.com/18046/%D9%87%D8%A7%D9%8A%D8%B1-%D8%B3%D9%88%D8%A8%D8%B1-%D9%85%D8%A7%D9%85%D8%A7-%D9%88%D8%B8%D9%8A%D9%81%D8%A9-%D8%AA%D9%86%D8%A7%D8%B3%D8%A8-%D8%A7%D9%84%D8%A3%D9%85%D9%87%D8%A7%D8%AA\" }\n\n\n\n ],\n videos: [\n { title: \"CNN: هل تكفل سوق العمل العربية المساواة للنساء؟ مؤسِسة «كاريرها» تجيب\", image: video1, description: \"A conversation with Jesse Rizk about the initiative to employ mothers in a way that suits their conditions.\", videoUrl: \"https://cnnbusinessarabic.com/podcast/33578/%D9%87%D9%84-%D8%AA%D9%83%D9%81%D9%84-%D8%B3%D9%88%D9%82-%D8%A7%D9%84%D8%B9%D9%85%D9%84-%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A%D8%A9-%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D9%88%D8%A7%D8%A9-%D9%84%D9%84%D9%86\" },\n { title: \"حكايات نهاد|جيسي رضوان..بعد الجواز والخلفة قررت تواجه كل التحديات وتتحدى الاحباط تؤسس شركة كاريرها\", image: video2, description: \"A conversation with Jesse Rizk about the initiative to employ mothers in a way that suits their conditions.\", videoUrl: \"https://www.youtube.com/watch?v=N5dCmHFX6Ao\" },\n { title: \"اعرفي تعملي كارير في شغلك من البيت إزاي مع جيسي رضوان | جروب الماميز\", image: video3, description: \"A conversation with Jesse Rizk about the initiative to employ mothers in a way that suits their conditions.\", videoUrl: \"https://www.youtube.com/watch?v=40kl4yCgb5Y\" },\n { title: \"AUCTV: Carerha Summit - كاريرها\", image: video4, description: \"For every married woman who wants to work from home... job opportunities for women.\", videoUrl: \"https://www.youtube.com/watch?v=Onl10UloJUY&t=30s\" },\n { title: \"Carerha X The Story of U* Season 2\", image: video5, description: \"\\\"Hire Super Mama\\\" .. An initiative to help mothers find suitable jobs.\", videoUrl: \"https://www.youtube.com/watch?v=QJX38OBmAFo\" },\n { title: \" جيسي رضوان مؤسسة كاريرها مع رضوي الشربيني في هي وبس\", image: video6, description: \"Does the Arab labor market ensure equality for women? The founder of Carerha answers.\", videoUrl: \"https://youtu.be/okdIRzuL_nk\" },\n { title: \"Career Cafe - الأمومة و تحدياتها شكلت كاريرها - جيسي رضوان\", image: video7, description: \"Jesse Rizk: After marriage and childbirth, she decided to face all challenges and defy discouragement to establish Carerha.\", videoUrl: \"https://www.youtube.com/watch?v=jaF1X-0qiEI\" },\n { title: \"كلام ستات - لقاء مع جيسي رضوان حول مبادرة توظيف الأمهات بشكل مناسب لظروفه\", image: video8, description: \"Learn how to build a career from home with Jesse Rizk | Moms Group.\", videoUrl: \"https://www.youtube.com/watch?v=68Yl-tO8CaM\" },\n { title: \"الستات مايعرفوش يكدبوا | لكل واحدة متجوزة ونفسها تشتغل من البيت.. فرص عمل للسيدات\", image: video9, description: \"AUCTV: Carerha Summit.\", videoUrl: \"https://www.youtube.com/watch?v=xxSfuj8x95w\" },\n { title: \"السفيرة عزيزة - `هاير سوبر ماما .. مبادرة لمساعدة الأمهات في العثور علي وظائف مناسبة\", image: video10, description: \"Carerha X The Story of U* Season 2.\", videoUrl: \"https://www.youtube.com/watch?v=QZlDxitKcRU\" },\n { title: \"إزاي توفقي بين شغلك وبيتك وأولادك مع جيسي رضوان | جروب الماميز\", image: video11, description: \"Description for Carerha video 6.\", videoUrl: \"https://www.youtube.com/watch?v=-90-tbYCamw\" },\n { title: \"Hire Super Mama story.\", image: video12, description: \"How to balance your work, home, and children with Jesse Rizk | Moms Group.\", videoUrl: \"https://www.facebook.com/watch/?v=2443878272491706\" },\n { title: \"قناة صدى البلدمبادرة «هاير سوبر ماما» لتأهيل البنات والسيدات لسوق العمل\", image: video13, description: \"Hire Super Mama story.\", videoUrl: \"http://nabdapp.com/t/126343496\" }\n ],\n};\n\nconst MediaPage = () => {\n const [activeTab, setActiveTab] = useState('All');\n\n return (\n \n
\n About Carerha
\nOur Origin Story
\n\n 
\n
\n \n
\n \n
\n At Carerha, we believe that every woman deserves the opportunity to thrive both\n personally and professionally. Our journey began seven years ago when our founder,\n Jessy Radwan, faced a common struggle that many mothers experience. She\n couldn’t find a flexible job that allowed her to spend quality time with her daughter\n while pursuing her career aspirations. Determined to find a solution, Jessy started an\n initiative called “Hire Super Mama”on a Facebook group, where moms supported\n and helped each other find flexible job\n opportunities
\n\n \n
\n As the Facebook group grew, Jessy discovered that the challenges women faced in\n finding work-life balance extended far beyond the realm of motherhood. From\n engagement to marriage, pregnancy to returning to work after giving birth, women\n across all stages of life were seeking flexible employment options. It was clear that\n there was a pressing need to support women in their pursuit of meaningful careers\n while accommodating their personal commitments.\n
\nThis realization gave birth to Carerha.
\n\n
\n
\n Carerha was founded with the vision of matching women with companies directly, offering flexible jobs that align with their\n career aspirations. We witnessed a constant stream of women applying for these positions, while companies were actively\n seeking qualified candidates.
\nHowever, we soon discovered that the core issue lay in the competencies of the women themselves. Career gaps often led\n to outdated skills, making it challenging for women to compete in the job market. Additionally, many women resorted to\n starting their own businesses without prior knowledge of entrepreneurship.
\nSimultaneously, Carerha addresses the struggle of employers who strive to hire qualified women and fulfill their diversity\n and inclusion goals. Recognizing the need for a comprehensive solution, Carerha evolved into the first female-focused\n EdTech platform, empowering women economically and fostering inclusive workplaces
\n\n\n
\n
\n\n \n\n\n
\n \n
\n
\n\n\n\n At Carerha, we are committed to empowering women at all stages of their\n professional journey, from fresh graduates to career returners
\nJoin us on this transformative journey as we\n pave the way for women to embrace their full potential, achieve work-life balance, and shape a more inclusive world.
\nWelcome to Carerha. Let’s empower women, foster inclusive workplaces\n and rewrite the narrative of women’s success
\n\n \n
\n
\n
\n );\n};\n\nexport default MediaPage;\n","export default __webpack_public_path__ + \"e07568f3c5034031dafc994860aeba0f.jpeg\";","export default __webpack_public_path__ + \"fe05b5201e11e8aca80b585bf9169510.jpeg\";","export default __webpack_public_path__ + \"ca12c6536e29aba17dca8746f9ae8b44.jpeg\";","export default __webpack_public_path__ + \"f2f61576c37617484a069db2d2a0d675.jpeg\";","export default __webpack_public_path__ + \"ef93167eef7347ad3facceabc472b002.png\";","export default __webpack_public_path__ + \"077549755e4e4439e36c3844478e884d.jpg\";","export default __webpack_public_path__ + \"403eb6882052134bcb7b2d962826fe21.jpg\";","export default __webpack_public_path__ + \"694e8c6ace0ef88b6993eaabc74c2cf4.jpg\";","export default __webpack_public_path__ + \"1fd9fbe592c2eaf45560cd0e39fae5ae.png\";","export default __webpack_public_path__ + \"50775b6c9e443b6c8c729da7d1d5982d.jpg\";","export default __webpack_public_path__ + \"3aac0129f3d3e418c00549dfbdcf5632.png\";","export default __webpack_public_path__ + \"1fd9fbe592c2eaf45560cd0e39fae5ae.png\";","export default __webpack_public_path__ + \"4dbdb647846f5b61a532f6f459aa5014.png\";","export default __webpack_public_path__ + \"c5eb6bdfad5025bea86ddaaef7508029.jpg\";","export default __webpack_public_path__ + \"0673200b730035b69f78f899810b6146.jpg\";","export default __webpack_public_path__ + \"ce918f8cb229a06c737a43bb26c95a69.jpg\";","export default __webpack_public_path__ + \"3e73e173a638b9cef6df2ca88d2dbb94.jpg\";","export default __webpack_public_path__ + \"694e8c6ace0ef88b6993eaabc74c2cf4.jpg\";","export default __webpack_public_path__ + \"67066a3fd01d2d28eb688ab97e4ab0f6.png\";","export default __webpack_public_path__ + \"df13d7706e8cbfdf502ad07cfc316193.jpg\";","export default __webpack_public_path__ + \"cf03181f7e125316e54e502415d401b7.jpg\";","export default __webpack_public_path__ + \"4c1e12673bb8539a7b13bcf4c559bd24.jpg\";","export default __webpack_public_path__ + \"50dd7a53029d2c0d76d32081dc1025f2.jpg\";","export default __webpack_public_path__ + \"27effa39d5c6eb2144001285699d6b05.png\";","export default __webpack_public_path__ + \"30a6321253a56daf44a48d40c4067f15.jpeg\";","export default __webpack_public_path__ + \"79c4871c1fa2971c7d8053189ccfffe0.jpg\";","export default __webpack_public_path__ + \"32bd9d11aa8a0c2ea24196fba359d315.png\";","export default __webpack_public_path__ + \"c7d1580ff7342d1e32bcab3358abd96b.jpg\";","export default __webpack_public_path__ + \"577de4d32a01c90abfe8b36c717798fb.jpg\";","export default __webpack_public_path__ + \"039e663f34fd80b59c908bdd80d16fc8.jpg\";","export default __webpack_public_path__ + \"babb4870f97ce0e0961889eeb6984d71.jpg\";","export default __webpack_public_path__ + \"37766921d641811bc08f06d9cb8e3b41.jpg\";","export default __webpack_public_path__ + \"29164e0ac4cd99c6bc5413593baa9b66.jpg\";","export default __webpack_public_path__ + \"07d604b9d618e8535322e6de82fbe73d.jpg\";","export default __webpack_public_path__ + \"3a4769ead54b3e95e855bd29b110636f.jpg\";","export default __webpack_public_path__ + \"65538d04718974fc1467da5e5f802820.jpg\";","export default __webpack_public_path__ + \"1419767a448d0a3308e03761a48f2a70.jpg\";","export default __webpack_public_path__ + \"3e58575bd094d6faf7d23ac465aa2467.png\";","export default __webpack_public_path__ + \"366a0e674f69100fc00d84fe958f67f8.png\";","import CloseIcon from '@mui/icons-material/Close';\nimport { IconButton, Rating } from '@mui/material';\nimport Box from '@mui/material/Box';\nimport Modal from '@mui/material/Modal';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport quotationMark from \"../../public/assets/quotationMark.png\";\n// import defaultImage from \"../../public/assets/defaultImage.png\"; // Add path to your default image\nimport \"./ProgramCard.css\";\n\nfunction ProgramCard(props) {\n const { rate, text, student_name, image } = props;\n const updatedImage = image?.includes('https://carerha.growwitheden.com')\n ? image.replace('https://carerha.growwitheden.com', 'https://carerha.com')\n : image;\n const reviewerImage = updatedImage || \"https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg\"; // Use defaultImage if image is not provided\n\n if (!text) {\n return null; // Do not render anything if text is empty\n }\n\n return (\n \n
\n \n\n Media
\n\n \n {activeTab === 'All' || activeTab === 'Videos' ? (\n \n \n {mediaData.videos.map((video, index) => (\n \n \n \n ))}\n \n \n ) : null}\n {activeTab === 'All' || activeTab === 'Articles' ? (\n \n \n ) : null}\n \n
\n ARTICLES
\n\n {mediaData.articles.map((article, index) => (\n \n ))}\n
\n \n \n \n \n {text}\n {/* \n
\n );\n}\n\nexport default ProgramCard;\n","import React, { useEffect, useState } from 'react';\n// Import Swiper React components\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\n// Import Swiper styles\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport { useParams } from 'react-router-dom';\n\n// import required modules\nimport { Navigation } from 'swiper/modules';\nimport ReviewsCard from './ProgramCard';\nimport { Spinner } from '@edx/paragon';\n\nfunction SwiperCards() {\n const { programId } = useParams();\n const [reviewData, setReviewData] = useState([]);\n const [loading, setLoading] = useState(true);\n console.log('courseId', programId);\n\n useEffect(() => {\n const requestOptions = {\n method: \"GET\",\n redirect: \"follow\"\n };\n\n fetch(`https://reviews.carerha.com/api/program_reviews/${programId}/`, requestOptions)\n .then((response) => response.json())\n .then((result) => {\n setReviewData(result);\n console.log('result', result);\n setLoading(false);\n })\n .catch((error) => {\n console.error(error);\n setLoading(false);\n });\n }, [programId]);\n\n if (loading) {\n return \n
\n {/* {rate} / 5
\n{student_name}
*/}\nmore
*/}\n \n
\n {student_name}
\nNo reviews available
;\n }\n\n const filteredReviews = reviewData.filter(review => review.message); // Filter out reviews with empty messages\n const screenWidth = window.innerWidth;\n\n return (\n \n
\n );\n}\n\nexport default ReviewsSwipper;\n","import React, { useEffect, useState } from 'react';\nimport \"./ProgramReviews.css\";\nimport { useParams } from 'react-router-dom';\nimport { Spinner } from '@edx/paragon';\nimport CardDetialsProgramAboutPage from '../program-about/CardDetialsProgramAboutPage';\nimport { getProgramDetials, getSimilarPrograms } from '../program-about/api';\nimport { Rating } from '@mui/material';\nimport LinearProgressBar from '../component/LinearProgressBar/LinearProgressBar';\nimport ReviewsSwipper from './ProgramSwipper';\n\nfunction ProgramReviews() {\n const { programId } = useParams();\n const [programData, setProgramData] = useState({});\n const [fetchData, setFetchData] = useState(true);\n const [averageRating, setAverageRating] = useState({});\n\n useEffect(() => {\n\n const fetchProgramDetails = async () => {\n try {\n const programDetails = await getProgramDetials(programId);\n setProgramData(programDetails);\n\n const similarPrograms = await getSimilarPrograms(programDetails.type_attrs.slug);\n const filteredProgs = similarPrograms.results.filter(prog => prog.uuid !== programId);\n setProgramsSameCategory(filteredProgs);\n } catch (error) {\n console.error('Error fetching program details:', error);\n } finally {\n setFetchData(false);\n }\n };\n\n if (programId) {\n fetchProgramDetails();\n }\n }, [programId]);\n\n useEffect(() => {\n const fetchAverageRating = async () => {\n try {\n const requestOptions = {\n method: \"GET\",\n redirect: \"follow\"\n };\n\n const response = await fetch(`https://reviews.carerha.com/api/program_reviews/${programId}/average/`, requestOptions);\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n const result = await response.json();\n console.log(result, \"response average\");\n setAverageRating(result);\n } catch (error) {\n console.error('Error fetching average rating:', error);\n }\n };\n\n if (programId) {\n fetchAverageRating();\n }\n }, [programId]);\n\n if (fetchData) return (\n Reviews
\n\n
\n \n
\n \n
\n );\n console.log('programData', programData); // Log programId to check if it's correctly captured\n\n\n return (\n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nexport default ProgramReviews;\n","import 'core-js/stable';\nimport 'regenerator-runtime/runtime';\n\nimport {\n APP_INIT_ERROR, APP_READY, subscribe, initialize,\n mergeConfig,\n getConfig,\n} from '@edx/frontend-platform';\nimport { AppProvider, ErrorPage, PageRoute } from '@edx/frontend-platform/react';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Switch } from 'react-router-dom';\n\n// import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';\nimport { messages as headerMessages } from '@edx/frontend-component-header';\nimport { Helmet } from 'react-helmet';\nimport { fetchDiscussionTab, fetchLiveTab } from './course-home/data/thunks';\nimport DiscussionTab from './course-home/discussion-tab/DiscussionTab';\n\nimport appMessages from './i18n';\nimport { UserMessagesProvider } from './generic/user-messages';\n\nimport './index.scss';\nimport \"./index.css\";\nimport OutlineTab from './course-home/outline-tab';\nimport { CourseExit } from './courseware/course/course-exit';\nimport CoursewareContainer from './courseware';\nimport CoursewareRedirectLandingPage from './courseware/CoursewareRedirectLandingPage';\nimport DatesTab from './course-home/dates-tab';\nimport GoalUnsubscribe from './course-home/goal-unsubscribe';\nimport ProgressTab from './course-home/progress-tab/ProgressTab';\nimport { TabContainer } from './tab-page';\n\nimport { fetchDatesTab, fetchOutlineTab, fetchProgressTab } from './course-home/data';\nimport { fetchCourse } from './courseware/data';\nimport initializeStore from './store';\nimport NoticesProvider from './generic/notices';\nimport PathFixesProvider from './generic/path-fixes';\nimport LiveTab from './course-home/live-tab/LiveTab';\nimport CourseAccessErrorPage from './generic/CourseAccessErrorPage';\nimport DecodePageRoute from './decode-page-route';\nimport MyCourses from './MyCourses/MyCourses';\nimport AllCourses from './AllCourses/AllCourses';\nimport Navbar from './Navbar/Navbar';\nimport FooterNew from './Footer/FooterNew';\n\nimport CourseAboutPage from \"./course-about/CourseAboutPage\"\nimport CourseReviews from \"./course-reviews/CourseReviews\"\nimport ProgramAboutPage from './program-about/ProgramAboutPage';\nimport AllPrograms from './AllPrograms/AllPrograms';\nimport HomePage from './HomComponents/HomePage/HomePage';\nimport ContactUs from './ContactUs/ContactUs';\nimport Business from './Business/Business';\nimport Events from './Events/Events';\nimport UpcomingEvents from './UpcomingEvents/UpcomingEvents';\nimport PastEvents from './PastEvents/PastEvents';\nimport AllCompanies from './AllCompanies/AllCompanies';\nimport CompanyDeatails from './CompanyDeatails/CompanyDeatails';\nimport AboutUs from './AboutUs/AboutUs';\nimport CourseDetailsPage from './CourseDetailsPage/CourseDetailsPage';\nimport MediaPage from './MediaPage/MediaPage';\nimport ProgramReviews from './Program-reviews/ProgramReviews';\nimport Blogs from './Blogs/Blogs';\n\n\n// import FooterNew from './Footer/Footer'\nsubscribe(APP_READY, () => {\n ReactDOM.render(\n Program Rating
\n\n 
\n
\n {programData.title}
\n\n
\n \n
\n {averageRating?.average_rate || \"0\"}
\n {averageRating?.review_count || \"0\"} reviewers\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 fetchProgressTab(courseId, match.params.targetUserId)}\n slice=\"courseHome\"\n >\n \n \n \n \n \n
\n