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

package/src/containers/CourseCard/components/hooks.js

@@ -0,0 +1,33 @@
+import { useContext } from 'react';
+
+import MasqueradeUserContext from '../../../data/contexts/MasqueradeUserContext';
+import { reduxHooks } from '../../../hooks';
+
+export const useActionDisabledState = (cardId) => {
+  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const {
+    hasAccess, isAudit, isAuditAccessExpired,
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const {
+    isEntitlement, isFulfilled, canChange, hasSessions,
+  } = reduxHooks.useCardEntitlementData(cardId);
+
+  const { resumeUrl, homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+
+  const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
+  const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
+  const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);
+  const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);
+
+  const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
+
+  return {
+    disableBeginCourse,
+    disableResumeCourse,
+    disableViewCourse,
+    disableSelectSession,
+    disableCourseTitle,
+  };
+};
+
+export default useActionDisabledState;

package/src/containers/CourseCard/components/hooks.test.js

@@ -0,0 +1,165 @@
+import { reduxHooks } from 'hooks';
+
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useMasqueradeData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+  },
+}));
+
+const cardId = 'my-test-course-number';
+
+describe('useActionDisabledState', () => {
+  const defaultData = {
+    isMasquerading: false,
+    isEntitlement: false,
+    isFulfilled: false,
+    canChange: false,
+    hasSessions: false,
+    hasAccess: false,
+    isAudit: false,
+    isAuditAccessExpired: false,
+    resumeUrl: 'resume.url',
+    homeUrl: 'home.url',
+  };
+  const mockHooksData = (args) => {
+    const {
+      isMasquerading,
+      isEntitlement,
+      isFulfilled,
+      canChange,
+      hasSessions,
+      hasAccess,
+      isAudit,
+      isAuditAccessExpired,
+      resumeUrl,
+      homeUrl,
+    } = { ...defaultData, ...args };
+    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+      hasAccess,
+      isAudit,
+      isAuditAccessExpired,
+    });
+    reduxHooks.useCardEntitlementData.mockReturnValueOnce({
+      isEntitlement,
+      isFulfilled,
+      canChange,
+      hasSessions,
+    });
+    reduxHooks.useCardCourseRunData.mockReturnValueOnce({
+      resumeUrl,
+      homeUrl,
+    });
+  };
+
+  const runHook = () => hooks.useActionDisabledState(cardId);
+  describe('disableBeginCourse', () => {
+    const testDisabled = (data, expected) => {
+      mockHooksData(data);
+      expect(runHook().disableBeginCourse).toBe(expected);
+    };
+    it('disable when homeUrl is invalid', () => {
+      testDisabled({ homeUrl: null }, true);
+    });
+    it('disable when isMasquerading is true', () => {
+      testDisabled({ isMasquerading: true }, true);
+    });
+    it('disable when hasAccess is false', () => {
+      testDisabled({ hasAccess: false }, true);
+    });
+    it('disable when isAudit is true and isAuditAccessExpired is true', () => {
+      testDisabled({ isAudit: true, isAuditAccessExpired: true }, true);
+    });
+    it('enable when all conditions are met', () => {
+      testDisabled({ hasAccess: true }, false);
+    });
+  });
+  describe('disableResumeCourse', () => {
+    const testDisabled = (data, expected) => {
+      mockHooksData(data);
+      expect(runHook().disableResumeCourse).toBe(expected);
+    };
+    it('disable when resumeUrl is invalid', () => {
+      testDisabled({ resumeUrl: null }, true);
+    });
+    it('disable when isMasquerading is true', () => {
+      testDisabled({ isMasquerading: true }, true);
+    });
+    it('disable when hasAccess is false', () => {
+      testDisabled({ hasAccess: false }, true);
+    });
+    it('disable when isAudit is true and isAuditAccessExpired is true', () => {
+      testDisabled({ isAudit: true, isAuditAccessExpired: true }, true);
+    });
+    it('enable when all conditions are met', () => {
+      testDisabled({ hasAccess: true }, false);
+    });
+  });
+  describe('disableViewCourse', () => {
+    const testDisabled = (data, expected) => {
+      mockHooksData(data);
+      expect(runHook().disableViewCourse).toBe(expected);
+    };
+    it('disable when hasAccess is false', () => {
+      testDisabled({ hasAccess: false }, true);
+    });
+    it('disable when isAudit is true and isAuditAccessExpired is true', () => {
+      testDisabled({ isAudit: true, isAuditAccessExpired: true }, true);
+    });
+    it('enable when all conditions are met', () => {
+      testDisabled({ hasAccess: true }, false);
+    });
+  });
+  describe('disableSelectSession', () => {
+    const testDisabled = (data, expected) => {
+      mockHooksData(data);
+      expect(runHook().disableSelectSession).toBe(expected);
+    };
+    it('disable when isEntitlement is false', () => {
+      testDisabled({ isEntitlement: false }, true);
+    });
+    it('disable when isMasquerading is true', () => {
+      testDisabled({ isMasquerading: true }, true);
+    });
+    it('disable when hasAccess is false', () => {
+      testDisabled({ hasAccess: false }, true);
+    });
+    it('disable when canChange is false', () => {
+      testDisabled({ canChange: false }, true);
+    });
+    it('disable when hasSessions is false', () => {
+      testDisabled({ hasSessions: false }, true);
+    });
+    it('enable when all conditions are met', () => {
+      testDisabled(
+        {
+          isEntitlement: true,
+          hasAccess: true,
+          canChange: true,
+          hasSessions: true,
+        },
+        false,
+      );
+    });
+  });
+  describe('disableCourseTitle', () => {
+    const testDisabled = (data, expected) => {
+      mockHooksData(data);
+      expect(runHook().disableCourseTitle).toBe(expected);
+    };
+    it('disable when isEntitlement is true and isFulfilled is false', () => {
+      testDisabled({ isEntitlement: true, isFulfilled: false }, true);
+    });
+    it('disable when disableViewCourse is true', () => {
+      testDisabled({ hasAccess: false }, true);
+    });
+    it('enable when all conditions are met', () => {
+      testDisabled({ isEntitlement: true, isFulfilled: true, hasAccess: true }, false);
+    });
+  });
+});

package/src/containers/CourseCard/hooks.js

@@ -0,0 +1,23 @@
+import { useIntl } from '@openedx/frontend-base';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { reduxHooks } from '../../hooks';
+
+export const useIsCollapsed = () => {
+  const { width } = useWindowSize();
+  return width < breakpoints.small.maxWidth;
+};
+
+export const useCardData = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { title, bannerImgSrc } = reduxHooks.useCardCourseData(cardId);
+  const { isEnrolled } = reduxHooks.useCardEnrollmentData(cardId);
+
+  return {
+    isEnrolled,
+    title,
+    bannerImgSrc,
+    formatMessage,
+  };
+};
+
+export default useCardData;

package/src/containers/CourseCard/hooks.test.js

@@ -0,0 +1,48 @@
+import { useIntl } from '@openedx/frontend-base';
+
+import { reduxHooks } from 'hooks';
+
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+  },
+}));
+
+const cardId = 'my-test-course-number';
+
+describe('CourseCard hooks', () => {
+  let out;
+  const { formatMessage } = useIntl();
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useCardData', () => {
+    const courseData = {
+      title: 'fake-title',
+      bannerImgSrc: 'my-banner-url',
+    };
+    const runHook = ({ course = {} }) => {
+      reduxHooks.useCardCourseData.mockReturnValueOnce({
+        ...courseData,
+        ...course,
+      });
+      reduxHooks.useCardEnrollmentData.mockReturnValue({ isEnrolled: 'test-is-enrolled' });
+      out = hooks.useCardData({ cardId });
+    };
+    beforeEach(() => {
+      runHook({});
+    });
+    it('forwards formatMessage from useIntl', () => {
+      expect(out.formatMessage).toEqual(formatMessage);
+    });
+    it('passes course title and banner URL form course data', () => {
+      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
+      expect(out.title).toEqual(courseData.title);
+      expect(out.bannerImgSrc).toEqual(courseData.bannerImgSrc);
+    });
+  });
+});

package/src/containers/CourseCard/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Card } from '@openedx/paragon';
+
+import { useIsCollapsed } from './hooks';
+import CourseCardBanners from './components/CourseCardBanners';
+import CourseCardImage from './components/CourseCardImage';
+import CourseCardMenu from './components/CourseCardMenu';
+import CourseCardActions from './components/CourseCardActions';
+import CourseCardDetails from './components/CourseCardDetails';
+import CourseCardTitle from './components/CourseCardTitle';
+
+import './CourseCard.scss';
+
+export const CourseCard = ({
+  cardId,
+}) => {
+  const isCollapsed = useIsCollapsed();
+  const orientation = isCollapsed ? 'vertical' : 'horizontal';
+  return (
+    <div className="mb-4.5 course-card" id={cardId} data-testid="CourseCard">
+      <Card orientation={orientation}>
+        <div className="d-flex flex-column w-100">
+          <div {...(!isCollapsed && { className: 'd-flex' })}>
+            <CourseCardImage cardId={cardId} orientation="horizontal" />
+            <Card.Body>
+              <Card.Header
+                title={<CourseCardTitle cardId={cardId} />}
+                actions={<CourseCardMenu cardId={cardId} />}
+              />
+              <Card.Section className="pt-0">
+                <CourseCardDetails cardId={cardId} />
+              </Card.Section>
+              <Card.Footer orientation={orientation}>
+                <CourseCardActions cardId={cardId} />
+              </Card.Footer>
+            </Card.Body>
+          </div>
+          <CourseCardBanners cardId={cardId} />
+        </div>
+      </Card>
+    </div>
+  );
+};
+CourseCard.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseCard;

package/src/containers/CourseCard/index.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import CourseCard from '.';
+import hooks from './hooks';
+
+jest.mock('./hooks', () => ({
+  useIsCollapsed: jest.fn(),
+}));
+
+jest.mock('./components/CourseCardBanners', () => 'CourseCardBanners');
+jest.mock('./components/CourseCardImage', () => 'CourseCardImage');
+jest.mock('./components/CourseCardMenu', () => 'CourseCardMenu');
+jest.mock('./components/CourseCardActions', () => 'CourseCardActions');
+jest.mock('./components/CourseCardDetails', () => 'CourseCardDetails');
+jest.mock('./components/CourseCardTitle', () => 'CourseCardTitle');
+
+const cardId = 'test-card-id';
+
+describe('CourseCard component', () => {
+  test('snapshot: collapsed', () => {
+    hooks.useIsCollapsed.mockReturnValueOnce(true);
+    expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
+  });
+  test('snapshot: not collapsed', () => {
+    hooks.useIsCollapsed.mockReturnValueOnce(false);
+    expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
+  });
+});

package/src/containers/CourseCard/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  bannerAlt: {
+    id: 'learner-dash.courseCard.bannerAlt',
+    description: 'Course card banner alt-text',
+    defaultMessage: 'Course thumbnail',
+  },
+  verifiedBanner: {
+    id: 'learner-dash.courseCard.verifiedBanner',
+    description: 'Course card verified banner',
+    defaultMessage: 'Verified',
+  },
+  verifiedHoverDescription: {
+    id: 'learner-dash.courseCard.verifiedHoverDescription',
+    description: 'Course card verified hover description',
+    defaultMessage: 'You\'re enrolled as a verified student',
+  },
+  verifiedBannerRibbonAlt: {
+    id: 'learner-dash.courseCard.verifiedBannerRibbonAlt',
+    description: 'Course card verified banner ribbon alt-text',
+    defaultMessage: 'ID Verified Ribbon/Badge',
+  },
+});
+
+export default messages;

package/src/containers/CourseFilterControls/ActiveCourseFilters.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+
+import { Button, Chip } from '@openedx/paragon';
+import { CloseSmall } from '@openedx/paragon/icons';
+import { reduxHooks } from '../../hooks';
+
+import messages from './messages';
+import './index.scss';
+
+export const ActiveCourseFilters = ({
+  filters,
+  handleRemoveFilter,
+}) => {
+  const { formatMessage } = useIntl();
+  const clearFilters = reduxHooks.useClearFilters();
+  return (
+    <div id="course-list-active-filters">
+      {filters.map(filter => (
+        <Chip
+          key={filter}
+          iconAfter={CloseSmall}
+          onClick={handleRemoveFilter(filter)}
+        >
+          {formatMessage(messages[filter])}
+        </Chip>
+      ))}
+      <Button variant="link" onClick={clearFilters}>
+        {formatMessage(messages.clearAll)}
+      </Button>
+    </div>
+  );
+};
+ActiveCourseFilters.propTypes = {
+  filters: PropTypes.arrayOf(PropTypes.string).isRequired,
+  handleRemoveFilter: PropTypes.func.isRequired,
+};
+
+export default ActiveCourseFilters;

package/src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx

@@ -0,0 +1,17 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { FilterKeys } from 'data/constants/app';
+import ActiveCourseFilters from './ActiveCourseFilters';
+
+describe('ActiveCourseFilters', () => {
+  const props = {
+    filters: Object.values(FilterKeys),
+    handleRemoveFilter: jest.fn().mockName('handleRemoveFilter'),
+  };
+  describe('snapshot', () => {
+    test('renders', () => {
+      const wrapper = shallow(<ActiveCourseFilters {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/containers/CourseFilterControls/CourseFilterControls.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+
+import {
+  Button,
+  Form,
+  Icon,
+  ModalPopup,
+  Sheet,
+  breakpoints,
+  useWindowSize,
+  ModalCloseButton,
+} from '@openedx/paragon';
+import { Close, Tune } from '@openedx/paragon/icons';
+
+import { reduxHooks } from '../../hooks';
+
+import FilterForm from './components/FilterForm';
+import SortForm from './components/SortForm';
+import useCourseFilterControlsData from './hooks';
+import messages from './messages';
+
+import './index.scss';
+
+export const CourseFilterControls = ({
+  sortBy,
+  setSortBy,
+  filters,
+}) => {
+  const { formatMessage } = useIntl();
+  const hasCourses = reduxHooks.useHasCourses();
+  const {
+    isOpen,
+    open,
+    close,
+    target,
+    setTarget,
+    handleFilterChange,
+    handleSortChange,
+  } = useCourseFilterControlsData({
+    filters,
+    setSortBy,
+  });
+  const { width } = useWindowSize();
+  const isMobile = width < breakpoints.small.minWidth;
+
+  return (
+    <div id="course-filter-controls">
+      <Button
+        ref={setTarget}
+        variant="outline-primary"
+        iconBefore={Tune}
+        onClick={open}
+        disabled={!hasCourses}
+      >
+        {formatMessage(messages.refine)}
+      </Button>
+      <Form>
+        {isMobile
+          ? (
+            <Sheet
+              className="w-75"
+              position="left"
+              show={isOpen}
+              onClose={close}
+            >
+              <div className="p-1 mr-3">
+                <b>{formatMessage(messages.refine)}</b>
+              </div>
+              <hr />
+              <div className="filter-form-row">
+                <FilterForm {...{ filters, handleFilterChange }} />
+              </div>
+              <div className="filter-form-row text-left m-1">
+                <SortForm {...{ sortBy, handleSortChange }} />
+              </div>
+              <div className="pgn__modal-close-container">
+                <ModalCloseButton variant="tertiary" onClick={close}>
+                  <Icon src={Close} />
+                </ModalCloseButton>
+              </div>
+            </Sheet>
+          ) : (
+            <ModalPopup
+              positionRef={target}
+              isOpen={isOpen}
+              onClose={close}
+              placement="bottom-end"
+            >
+              <div
+                id="course-filter-controls-card"
+                className="bg-white p-3 rounded shadow d-flex flex-row"
+              >
+                <div className="filter-form-col">
+                  <FilterForm {...{ filters, handleFilterChange }} />
+                </div>
+                <hr className="h-100 bg-primary-200 mx-3 my-0" />
+                <div className="filter-form-col text-left m-1">
+                  <SortForm {...{ sortBy, handleSortChange }} />
+                </div>
+              </div>
+            </ModalPopup>
+          )}
+      </Form>
+    </div>
+  );
+};
+CourseFilterControls.propTypes = {
+  sortBy: PropTypes.string.isRequired,
+  setSortBy: PropTypes.func.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default CourseFilterControls;

package/src/containers/CourseFilterControls/CourseFilterControls.test.jsx

@@ -0,0 +1,60 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+
+import { reduxHooks } from 'hooks';
+
+import CourseFilterControls from './CourseFilterControls';
+import useCourseFilterControlsData from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: { useHasCourses: jest.fn() },
+}));
+
+jest.mock('./hooks', () => jest.fn().mockName('useCourseFilterControlsData'));
+
+jest.mock('./components/FilterForm', () => 'FilterForm');
+jest.mock('./components/SortForm', () => 'SortForm');
+
+reduxHooks.useHasCourses.mockReturnValue(true);
+
+describe('CourseFilterControls', () => {
+  const props = {
+    sortBy: 'test-sort-by',
+    setSortBy: jest.fn().mockName('setSortBy'),
+    filters: ['test-filter'],
+  };
+
+  useCourseFilterControlsData.mockReturnValue({
+    isOpen: false,
+    open: jest.fn().mockName('open'),
+    close: jest.fn().mockName('close'),
+    target: 'test-target',
+    setTarget: jest.fn().mockName('setTarget'),
+    handleFilterChange: jest.fn().mockName('handleFilterChange'),
+    handleSortChange: jest.fn().mockName('handleSortChange'),
+  });
+
+  describe('no courses', () => {
+    test('snapshot', () => {
+      reduxHooks.useHasCourses.mockReturnValueOnce(false);
+      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
+      const wrapper = shallow(<CourseFilterControls {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('mobile', () => {
+    test('snapshot', () => {
+      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
+      const wrapper = shallow(<CourseFilterControls {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('is not mobile', () => {
+    test('snapshot', () => {
+      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
+      const wrapper = shallow(<CourseFilterControls {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/containers/CourseFilterControls/__snapshots__/ActiveCourseFilters.test.jsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActiveCourseFilters snapshot renders 1`] = `
+<div
+  id="course-list-active-filters"
+>
+  <Chip
+    key="inProgress"
+  >
+    In-Progress
+  </Chip>
+  <Chip
+    key="notStarted"
+  >
+    Not Started
+  </Chip>
+  <Chip
+    key="done"
+  >
+    Done
+  </Chip>
+  <Chip
+    key="notEnrolled"
+  >
+    Not Enrolled
+  </Chip>
+  <Chip
+    key="upgraded"
+  >
+    Upgraded
+  </Chip>
+  <Button
+    onClick={[Function]}
+    variant="link"
+  >
+    Clear all
+  </Button>
+</div>
+`;