diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
index df5ac78d..2ef919f2 100644
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -5,6 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
import { AvatarButton, Dropdown } from '@openedx/paragon';
// Local Components
+import UserDashboardMenuGroup from './common/UserDashboardMenuGroup';
+import UserCareerMenuItem from './common/UserCareerMenuItem';
import UserMenuItem from './common/UserMenuItem';
import { Menu, MenuTrigger, MenuContent } from './Menu';
import { LinkedLogo, Logo } from './Logo';
@@ -104,10 +106,12 @@ class DesktopHeader extends React.Component {
/>
)}
+ {getConfig().ENABLE_EDX_PERSONAL_DASHBOARD && }
{userMenu.map((group, index) => (
// eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
{group.heading && {group.heading}}
+ {getConfig().CAREER_LINK_URL && index === 0 && ()}
{group.items.map(({
type, content, href, disabled, isActive, onClick,
}) => (
diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
index a304dfed..6a18fc71 100644
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -5,6 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
// Local Components
import { AvatarButton } from '@openedx/paragon';
+import UserDashboardMenuGroup from './common/UserDashboardMenuGroup';
+import UserCareerMenuItem from './common/UserCareerMenuItem';
import { Menu, MenuTrigger, MenuContent } from './Menu';
import { LinkedLogo, Logo } from './Logo';
import UserMenuItem from './common/UserMenuItem';
@@ -97,7 +99,16 @@ class MobileHeader extends React.Component {
))
));
- return userInfoItem ? [userInfoItem, ...userMenuItems] : userMenuItems;
+ const userDashboardMenuGroup = (
+ getConfig().ENABLE_EDX_PERSONAL_DASHBOARD ? : null
+ );
+ const userCareerMenuItem = (
+ getConfig().CAREER_LINK_URL ? : null
+ );
+
+ return userInfoItem
+ ? [userInfoItem, userDashboardMenuGroup, userCareerMenuItem, ...userMenuItems]
+ : [userDashboardMenuGroup, userCareerMenuItem, ...userMenuItems];
}
renderLoggedOutItems() {
diff --git a/src/common/UserCareerMenuItem.jsx b/src/common/UserCareerMenuItem.jsx
new file mode 100644
index 00000000..1dfe41c6
--- /dev/null
+++ b/src/common/UserCareerMenuItem.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { reduxHooks } from 'hooks'; // eslint-disable-line import/no-unresolved
+import {
+ Badge, breakpoints, Dropdown, useWindowSize,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import _ from 'lodash';
+import { getConfig } from '@edx/frontend-platform';
+import messages from './messages';
+
+const UserCareerMenuItem = () => {
+ const { formatMessage } = useIntl();
+ const { width } = useWindowSize();
+ const isMobile = width <= breakpoints.small.maxWidth;
+
+ const dashboard = reduxHooks.useEnterpriseDashboardData();
+
+ if (!_.isEmpty(dashboard)) {
+ return null;
+ }
+ if (isMobile) {
+ return (
+
+
+ {formatMessage(messages.career)}
+
+ {formatMessage(messages.newAlert)}
+
+
+
+ );
+ }
+ return (
+
+ {formatMessage(messages.career)}
+
+ {formatMessage(messages.newAlert)}
+
+
+ );
+};
+
+export default UserCareerMenuItem;
diff --git a/src/common/UserDashboardMenuGroup.jsx b/src/common/UserDashboardMenuGroup.jsx
new file mode 100644
index 00000000..7c82b328
--- /dev/null
+++ b/src/common/UserDashboardMenuGroup.jsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { reduxHooks } from 'hooks'; // eslint-disable-line import/no-unresolved
+import { breakpoints, Dropdown, useWindowSize } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import _ from 'lodash';
+import messages from './messages';
+
+const UserDashboardMenuGroup = () => {
+ const { formatMessage } = useIntl();
+ const { width } = useWindowSize();
+ const isMobile = width <= breakpoints.small.maxWidth;
+
+ const dashboard = reduxHooks.useEnterpriseDashboardData();
+
+ if (isMobile) {
+ return (
+ <>
+
+
+ {formatMessage(messages.dashboardPersonal)}
+
+
+ {!_.isEmpty(dashboard) && (
+
+
+ {dashboard.label} {formatMessage(messages.dashboard)}
+
+
+ )}
+ >
+ );
+ }
+ return (
+ <>
+ {formatMessage(messages.dashboardSwitch)}
+
+ {formatMessage(messages.dashboardPersonal)}
+
+ {!_.isEmpty(dashboard) && (
+
+ {dashboard.label} {formatMessage(messages.dashboard)}
+
+ )}
+
+ >
+ );
+};
+
+export default UserDashboardMenuGroup;
diff --git a/src/common/hooks.js b/src/common/hooks.js
new file mode 100644
index 00000000..b09c4a9f
--- /dev/null
+++ b/src/common/hooks.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const reduxHooks = {
+ useEnterpriseDashboardData: () => {},
+};
diff --git a/src/common/messages.jsx b/src/common/messages.jsx
new file mode 100644
index 00000000..f26bd0ec
--- /dev/null
+++ b/src/common/messages.jsx
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ dashboard: {
+ id: 'learnerVariantDashboard.menu.dashboard.label',
+ defaultMessage: 'Dashboard',
+ description: 'The text for the user menu Dashboard navigation link.',
+ },
+ dashboardPersonal: {
+ id: 'learnerVariantDashboard.menu.dashboardPersonal.label',
+ defaultMessage: 'Personal',
+ description: 'Link to personal dashboard in user menu',
+ },
+ dashboardSwitch: {
+ id: 'learnerVariantDashboard.menu.dashboardSwitch.label',
+ defaultMessage: 'SWITCH DASHBOARD',
+ description: 'Switch Dashboard header in the user menu',
+ },
+ career: {
+ id: 'leanerDashboard.menu.career.label',
+ defaultMessage: 'Career',
+ description: 'The text for the user menu Career navigation link.',
+ },
+ newAlert: {
+ id: 'header.menu.new.label',
+ defaultMessage: 'New',
+ description: 'The text announcing that an item in the user menu is New',
+ },
+});
+
+export default messages;
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index ef8e599c..2143b8f4 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -10,6 +10,7 @@ module.exports = createConfig('webpack-dev', {
resolve: {
alias: {
'@edx/frontend-component-header': path.resolve(__dirname, 'src'),
+ hooks: path.resolve(__dirname, 'src/common/hooks'), // Adjust to the actual hooks path
},
},
});