@openedx/frontend-app-learner-dashboard 1.0.0-alpha.4 → 1.0.0-alpha.6

package/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap

@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
-<a
-  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
-  href="home-url"
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.courseImageClicked],
-        "url": "home-url",
-      },
-    }
-  }
-  tabIndex="-1"
->
-  <Fragment>
-    <img
-      alt="Course thumbnail"
-      className="pgn__card-image-cap w-100 show"
-      src="banner-img-src"
-    />
-    <span
-      className="course-card-verify-ribbon-container"
-      title="You're enrolled as a verified student"
-    >
-      <Badge
-        as="div"
-        className="w-100"
-        variant="success"
-      >
-        Verified
-      </Badge>
-      <img
-        alt="ID Verified Ribbon/Badge"
-        src="test-file-stub"
-      />
-    </span>
-  </Fragment>
-</a>
-`;
-
-exports[`CourseCardImage snapshot renders disabled link 1`] = `
-<div
-  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
->
-  <Fragment>
-    <img
-      alt="Course thumbnail"
-      className="pgn__card-image-cap w-100 show"
-      src="banner-img-src"
-    />
-    <span
-      className="course-card-verify-ribbon-container"
-      title="You're enrolled as a verified student"
-    >
-      <Badge
-        as="div"
-        className="w-100"
-        variant="success"
-      >
-        Verified
-      </Badge>
-      <img
-        alt="ID Verified Ribbon/Badge"
-        src="test-file-stub"
-      />
-    </span>
-  </Fragment>
-</div>
-`;

package/src/containers/CourseCard/components/__snapshots__/CourseCardTitle.test.jsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CourseCardTitle snapshot renders clickable link course title 1`] = `
-<h3>
-  <a
-    className="course-card-title"
-    data-testid="CourseCardTitle"
-    href="home-url"
-    onClick={
-      {
-        "trackCourseEvent": {
-          "cardId": "cardId",
-          "eventName": [MockFunction segment.courseTitleClicked],
-          "url": "home-url",
-        },
-      }
-    }
-  >
-    course-name
-  </a>
-</h3>
-`;
-
-exports[`CourseCardTitle snapshot renders disabled link 1`] = `
-<h3>
-  <span
-    className="course-card-title"
-    data-testid="CourseCardTitle"
-  >
-    course-name
-  </span>
-</h3>
-`;

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

@@ -1,33 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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;