@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

package/src/widgets/LearnerDashboardHeader/SupportLinkMenuItem.jsx

@@ -0,0 +1,29 @@
+import { LinkMenuItem, getAppConfig, useIntl } from '@openedx/frontend-base';
+
+import { appId } from '../../constants';
+import messages from './messages';
+
+function SupportLink() {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="d-flex">
+      <span>{formatMessage(messages.help)}</span>
+    </div>
+  );
+}
+
+export default function SupportLinkMenuItem({ variant = 'hyperlink' }) {
+  const { SUPPORT_URL: url } = getAppConfig(appId);
+
+  if (!url)
+    return null;
+
+  return (
+    <LinkMenuItem
+      label={<SupportLink />}
+      url={url}
+      variant={variant}
+    />
+  );
+}

package/src/widgets/LearnerDashboardHeader/app.tsx

@@ -0,0 +1,93 @@
+import { App, LinkMenuItem, WidgetOperationTypes, getAppConfig } from '@openedx/frontend-base';
+
+import { appId } from '../../constants';
+
+import ConfirmEmailBanner from './ConfirmEmailBanner';
+import MasqueradeBar from './MasqueradeBar';
+import CoursesLink from './CoursesLink';
+import DiscoverLinkMenuItem from './DiscoverLinkMenuItem';
+import ProgramsLinkMenuItem from './ProgramsLinkMenuItem';
+import SupportLinkMenuItem from './SupportLinkMenuItem';
+import OrderHistoryLinkMenuItem from './OrderHistoryLinkMenuItem';
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.learnerDashboard.header',
+  slots: [
+    {
+      slotId: 'org.openedx.frontend.slot.header.main.v1',
+      id: 'org.openedx.frontend.widget.learnerDashboard.headerConfirmEmail.v1',
+      op: WidgetOperationTypes.PREPEND,
+      component: ConfirmEmailBanner,
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkCourses.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <LinkMenuItem
+          label={<CoursesLink />}
+          url="/"
+          variant="navLink"
+        />
+      )
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkPrograms.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <ProgramsLinkMenuItem
+          variant="navLink"
+        />
+      ),
+      condition: {
+        callback: () => getAppConfig(appId).ENABLE_PROGRAMS === true,
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkDiscover.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <DiscoverLinkMenuItem
+          variant="navLink"
+        />
+      ),
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.secondaryLinks.v1',
+      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkSupport.v1',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <SupportLinkMenuItem
+          variant="navLink"
+        />
+      ),
+      condition: {
+        callback: () => getAppConfig(appId).SUPPORT_URL ? true : false,
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
+      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkOrderHistory.v1',
+      op: WidgetOperationTypes.INSERT_BEFORE,
+      relatedId: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuLogout.v1',
+      element: (
+        <OrderHistoryLinkMenuItem
+          variant="navLink"
+        />
+      ),
+      condition: {
+        callback: () => getAppConfig(appId).ORDER_HISTORY_URL ? true : false,
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.main.v1',
+      id: 'org.openedx.frontend.widget.learnerDashboard.headerMasqueradeBar.v1',
+      op: WidgetOperationTypes.APPEND,
+      component: MasqueradeBar,
+    },
+  ]
+};
+
+export default app;

package/src/widgets/LearnerDashboardHeader/hooks.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { StrictDict } from 'utils';
+
+import getLearnerHeaderMenu from './LearnerDashboardMenu';
+
+export const state = StrictDict({
+  isOpen: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useLearnerDashboardHeaderMenu = ({
+  courseSearchUrl, authenticatedUser,
+}) => {
+  const { formatMessage } = useIntl();
+  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser);
+};
+
+export default {
+  useLearnerDashboardHeaderMenu,
+};

package/src/widgets/LearnerDashboardHeader/index.ts

@@ -0,0 +1 @@
+export { default as learnerDashboardHeaderApp } from './app';

package/src/widgets/LearnerDashboardHeader/messages.js

@@ -0,0 +1,91 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+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',
+  },
+  help: {
+    id: 'learnerVariantDashboard.help.label',
+    defaultMessage: 'Help',
+    description: 'The text for the link to the Help Center',
+  },
+  profile: {
+    id: 'learnerVariantDashboard.menu.profile.label',
+    defaultMessage: 'Profile',
+    description: 'The text for the user menu Profile navigation link.',
+  },
+  viewPrograms: {
+    id: 'learnerVariantDashboard.menu.viewPrograms.label',
+    defaultMessage: 'View Programs',
+    description: 'The text for the user menu View Programs navigation link.',
+  },
+  account: {
+    id: 'learnerVariantDashboard.menu.account.label',
+    defaultMessage: 'Account',
+    description: 'The text for the user menu Account navigation link.',
+  },
+  orderHistory: {
+    id: 'learnerVariantDashboard.menu.orderHistory.label',
+    defaultMessage: 'Order History',
+    description: 'The text for the user menu Order History navigation link.',
+  },
+  signOut: {
+    id: 'learnerVariantDashboard.menu.signOut.label',
+    defaultMessage: 'Sign Out',
+    description: 'The label for the user menu Sign Out action.',
+  },
+  course: {
+    id: 'learnerVariantDashboard.course',
+    defaultMessage: 'Courses',
+    description: 'Header link for switching to dashboard page.',
+  },
+  program: {
+    id: 'learnerVariantDashboard.program',
+    defaultMessage: 'Programs',
+    description: 'Header link for switching to program page.',
+  },
+  discoverNew: {
+    id: 'learnerVariantDashboard.discoverNew',
+    defaultMessage: 'Discover New',
+    description: 'Header link for switching to discover page.',
+  },
+  logoAltText: {
+    id: 'learnerVariantDashboard.logoAltText',
+    defaultMessage: 'edX, Inc. Dashboard',
+    description: 'Alt text for the edX logo.',
+  },
+  collapseMenuOpenAltText: {
+    id: 'learnerVariantDashboard.collapseMenuOpenAltText',
+    defaultMessage: 'Menu',
+    description: 'Alt text for the collapse menu icon when the menu is open.',
+  },
+  collapseMenuClosedAltText: {
+    id: 'learnerVariantDashboard.collapseMenuClosedAltText',
+    defaultMessage: 'Close',
+    description: 'Alt text for the collapse menu icon when the menu is closed.',
+  },
+  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;

package/src/widgets/LookingForChallengeWidget/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LookingForChallengeWidget snapshots default 1`] = `
+<Card
+  id="looking-for-challenge-widget"
+  orientation="horizontal"
+>
+  <Card.ImageCap
+    src="icon/mock/path"
+    srcAlt="course side widget"
+  />
+  <Card.Body
+    className="m-auto pr-2"
+  >
+    <h4>
+      Looking for a new challenge?
+    </h4>
+    <h5>
+      <Hyperlink
+        className="d-flex align-items-center"
+        destination="http://localhost:18000/course-search-url"
+        onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
+        variant="brand"
+      >
+        <format-message-function
+          message={
+            {
+              "defaultMessage": "Find a course {arrow}",
+              "description": "Button to explore more courses",
+              "id": "WidgetSidebar.findCoursesButton",
+            }
+          }
+          values={
+            {
+              "arrow": <Icon
+                className="mx-1"
+              />,
+            }
+          }
+        />
+      </Hyperlink>
+    </h5>
+  </Card.Body>
+</Card>
+`;

package/src/widgets/LookingForChallengeWidget/index.jsx

@@ -0,0 +1,47 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Card, Hyperlink, Icon } from '@openedx/paragon';
+import { ArrowForward } from '@openedx/paragon/icons';
+
+import { reduxHooks } from '../../hooks';
+import moreCoursesSVG from '../../assets/more-courses-sidewidget.svg';
+import { baseAppUrl } from '../../data/services/lms/urls';
+
+import { findCoursesWidgetClicked } from './track';
+import messages from './messages';
+import './index.scss';
+
+export const arrowIcon = (<Icon className="mx-1" src={ArrowForward} />);
+
+export const LookingForChallengeWidget = () => {
+  const { formatMessage } = useIntl();
+  const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
+  const hyperlinkDestination = baseAppUrl(courseSearchUrl) || '';
+
+  return (
+    <Card orientation="horizontal" id="looking-for-challenge-widget">
+      <Card.ImageCap
+        src={moreCoursesSVG}
+        srcAlt="course side widget"
+      />
+      <Card.Body className="m-auto pr-2">
+        <h4>
+          {formatMessage(messages.lookingForChallengePrompt)}
+        </h4>
+        <h5>
+          <Hyperlink
+            variant="brand"
+            destination={hyperlinkDestination}
+            onClick={findCoursesWidgetClicked(hyperlinkDestination)}
+            className="d-flex align-items-center"
+          >
+            {formatMessage(messages.findCoursesButton, { arrow: arrowIcon })}
+          </Hyperlink>
+        </h5>
+      </Card.Body>
+    </Card>
+  );
+};
+
+LookingForChallengeWidget.propTypes = {};
+
+export default LookingForChallengeWidget;

package/src/widgets/LookingForChallengeWidget/index.scss

@@ -0,0 +1,6 @@
+#looking-for-challenge-widget {
+  .pgn__card-wrapper-image-cap {
+    overflow: visible;
+    min-width: auto;
+  }
+}

package/src/widgets/LookingForChallengeWidget/index.test.jsx

@@ -0,0 +1,24 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import LookingForChallengeWidget from '.';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    usePlatformSettingsData: () => ({
+      courseSearchUrl: 'http://localhost:18000/course-search-url',
+    }),
+  },
+}));
+
+jest.mock('./track', () => ({
+  findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
+}));
+
+describe('LookingForChallengeWidget', () => {
+  describe('snapshots', () => {
+    test('default', () => {
+      const wrapper = shallow(<LookingForChallengeWidget />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/widgets/LookingForChallengeWidget/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  lookingForChallengePrompt: {
+    id: 'WidgetSidebar.lookingForChallengePrompt',
+    defaultMessage: 'Looking for a new challenge?',
+    description: 'Prompt user for new challenge',
+  },
+  findCoursesButton: {
+    id: 'WidgetSidebar.findCoursesButton',
+    defaultMessage: 'Find a course {arrow}',
+    description: 'Button to explore more courses',
+  },
+});
+
+export default messages;

package/src/widgets/LookingForChallengeWidget/track.js

@@ -0,0 +1,15 @@
+import { StrictDict } from '../../utils';
+import track from '../../tracking';
+
+export const linkNames = StrictDict({
+  findCoursesWidget: 'learner_home_widget_explore',
+});
+
+export const findCoursesWidgetClicked = (href) => track.findCourses.findCoursesClicked(href, {
+  linkName: linkNames.findCoursesWidget,
+});
+
+export default {
+  linkNames,
+  findCoursesWidgetClicked,
+};