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

package/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx

@@ -0,0 +1,45 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+import ViewCourseButton from './ViewCourseButton';
+
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
+  },
+}));
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
+    useTrackCourseEvent: jest.fn(
+      (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+    ),
+  },
+}));
+jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
+jest.mock('./ActionButton', () => 'ActionButton');
+
+const defaultProps = { cardId: 'cardId' };
+const homeUrl = 'homeUrl';
+
+describe('ViewCourseButton', () => {
+  test('learner can view course', () => {
+    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+      track.course.enterCourseClicked,
+      defaultProps.cardId,
+      homeUrl,
+    ));
+    expect(wrapper.instance.props.disabled).toEqual(false);
+  });
+  test('learner cannot view course', () => {
+    useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
+    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.disabled).toEqual(true);
+  });
+});

package/src/containers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BeginCourseButton snapshot disabled snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={true}
+  href="#"
+  onClick={
+    {
+      "trackCourseEvent": {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "url": "home-urlexec-ed-tracking-path=cardId",
+      },
+    }
+  }
+>
+  Begin Course
+</ActionButton>
+`;
+
+exports[`BeginCourseButton snapshot enabled snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="#"
+  onClick={
+    {
+      "trackCourseEvent": {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "url": "home-urlexec-ed-tracking-path=cardId",
+      },
+    }
+  }
+>
+  Begin Course
+</ActionButton>
+`;

package/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResumeButton snapshot disabled snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={true}
+  href="#"
+  onClick={
+    {
+      "trackCourseEvent": {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "url": "resume-urlexec-ed-tracking-path=cardId",
+      },
+    }
+  }
+>
+  Resume
+</ActionButton>
+`;
+
+exports[`ResumeButton snapshot enabled snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="#"
+  onClick={
+    {
+      "trackCourseEvent": {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "url": "resume-urlexec-ed-tracking-path=cardId",
+      },
+    }
+  }
+>
+  Resume
+</ActionButton>
+`;

package/src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectSessionButton default render 1`] = `
+<ActionButton
+  disabled={false}
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Select Session
+</ActionButton>
+`;
+
+exports[`SelectSessionButton disabled states 1`] = `
+<ActionButton
+  disabled={true}
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Select Session
+</ActionButton>
+`;

package/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewCourseButton learner can view course 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="#"
+  onClick={
+    {
+      "trackCourseEvent": {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "url": "homeUrl",
+      },
+    }
+  }
+>
+  View Course
+</ActionButton>
+`;
+
+exports[`ViewCourseButton learner cannot view course 1`] = `
+<ActionButton
+  as="a"
+  disabled={true}
+  href="#"
+  onClick={
+    {
+      "trackCourseEvent": {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "url": "homeUrl",
+      },
+    }
+  }
+>
+  View Course
+</ActionButton>
+`;

package/src/containers/CourseCard/components/CourseCardActions/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ActionRow } from '@openedx/paragon';
+
+import { reduxHooks } from '../../../../hooks';
+import CourseCardActionSlot from '../../../../slots/CourseCardActionSlot';
+
+import SelectSessionButton from './SelectSessionButton';
+import BeginCourseButton from './BeginCourseButton';
+import ResumeButton from './ResumeButton';
+import ViewCourseButton from './ViewCourseButton';
+
+export const CourseCardActions = ({ cardId }) => {
+  const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
+  const {
+    hasStarted,
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
+
+  return (
+    <ActionRow data-test-id="CourseCardActions">
+      <CourseCardActionSlot cardId={cardId} />
+      {isEntitlement && (isFulfilled
+        ? <ViewCourseButton cardId={cardId} />
+        : <SelectSessionButton cardId={cardId} />
+      )}
+      {(isArchived && !isEntitlement) && (
+        <ViewCourseButton cardId={cardId} />
+      )}
+      {!(isArchived || isEntitlement) && (hasStarted
+        ? <ResumeButton cardId={cardId} />
+        : <BeginCourseButton cardId={cardId} />
+      )}
+    </ActionRow>
+  );
+};
+CourseCardActions.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseCardActions;

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

@@ -0,0 +1,97 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+
+import CourseCardActionSlot from 'slots/CourseCardActionSlot';
+import SelectSessionButton from './SelectSessionButton';
+import BeginCourseButton from './BeginCourseButton';
+import ResumeButton from './ResumeButton';
+import ViewCourseButton from './ViewCourseButton';
+
+import CourseCardActions from '.';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useMasqueradeData: jest.fn(),
+  },
+}));
+
+jest.mock('slots/CourseCardActionSlot', () => 'CustomActionButton');
+jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
+jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
+jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
+jest.mock('./ResumeButton', () => 'ResumeButton');
+
+const cardId = 'test-card-id';
+const props = { cardId };
+
+let el;
+describe('CourseCardActions', () => {
+  const mockHooks = ({
+    isEntitlement = false,
+    isExecEd2UCourse = false,
+    isFulfilled = false,
+    isArchived = false,
+    isVerified = false,
+    hasStarted = false,
+    isMasquerading = false,
+  } = {}) => {
+    reduxHooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isFulfilled });
+    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ isArchived });
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isExecEd2UCourse, isVerified, hasStarted });
+    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
+  };
+  const render = () => {
+    el = shallow(<CourseCardActions {...props} />);
+  };
+  describe('behavior', () => {
+    it('initializes redux hooks', () => {
+      mockHooks();
+      render();
+      expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+    });
+  });
+  describe('output', () => {
+    describe('entitlement course', () => {
+      it('renders ViewCourseButton if fulfilled', () => {
+        mockHooks({ isEntitlement: true, isFulfilled: true });
+        render();
+        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
+      });
+      it('renders SelectSessionButton if not fulfilled', () => {
+        mockHooks({ isEntitlement: true });
+        render();
+        expect(el.instance.findByType(SelectSessionButton)[0].props.cardId).toEqual(cardId);
+      });
+    });
+    describe('not entitlement, verified, or exec ed', () => {
+      it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
+        mockHooks({ isArchived: true });
+        render();
+        expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
+        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
+      });
+      describe('unstarted courses', () => {
+        it('renders CourseCardActionSlot and BeginCourseButton', () => {
+          mockHooks();
+          render();
+          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(BeginCourseButton)[0].props.cardId).toEqual(cardId);
+        });
+      });
+      describe('active courses (started, and not archived)', () => {
+        it('renders CourseCardActionSlot and ResumeButton', () => {
+          mockHooks({ hasStarted: true });
+          render();
+          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(ResumeButton)[0].props.cardId).toEqual(cardId);
+        });
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardActions/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  beginCourse: {
+    id: 'learner-dash.courseCard.actions.beginCourse',
+    description: 'Course card begin-course button text',
+    defaultMessage: 'Begin Course',
+  },
+  resume: {
+    id: 'learner-dash.courseCard.actions.resume',
+    description: 'Course card resume button text',
+    defaultMessage: 'Resume',
+  },
+  viewCourse: {
+    id: 'learner-dash.courseCard.actions.viewCourse',
+    description: 'Course card view-course button text',
+    defaultMessage: 'View Course',
+  },
+  selectSession: {
+    id: 'learner-dash.courseCard.actions.selectSession',
+    description: 'Course card select-session button text',
+    defaultMessage: 'Select Session',
+  },
+});
+
+export default messages;

package/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx

@@ -0,0 +1,95 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MailtoLink, Hyperlink } from '@openedx/paragon';
+import { CheckCircle } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+
+import { utilHooks, reduxHooks } from '../../../../hooks';
+import Banner from '../../../../components/Banner';
+
+import messages from './messages';
+
+const { useFormatDate } = utilHooks;
+
+export const CertificateBanner = ({ cardId }) => {
+  const certificate = reduxHooks.useCardCertificateData(cardId);
+  const {
+    isAudit,
+    isVerified,
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isPassing } = reduxHooks.useCardGradeData(cardId);
+  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
+  const { minPassingGrade, progressUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { supportEmail, billingEmail } = reduxHooks.usePlatformSettingsData();
+  const { formatMessage } = useIntl();
+  const formatDate = useFormatDate();
+
+  const emailLink = address => <MailtoLink to={address}>{address}</MailtoLink>;
+
+  if (certificate.isRestricted) {
+    return (
+      <Banner variant="danger">
+        {supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
+        {isVerified && '  '}
+        {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
+      </Banner>
+    );
+  }
+  if (certificate.isDownloadable) {
+    return (
+      <Banner variant="success" icon={CheckCircle}>
+        {formatMessage(messages.certReady)}
+        {certificate.certPreviewUrl && (
+          <>
+            {'  '}
+            <Hyperlink isInline destination={certificate.certPreviewUrl}>
+              {formatMessage(messages.viewCertificate)}
+            </Hyperlink>
+          </>
+        )}
+      </Banner>
+    );
+  }
+  if (!isPassing) {
+    if (isAudit) {
+      return (
+        <Banner>
+          {formatMessage(messages.passingGrade, { minPassingGrade })}
+        </Banner>
+      );
+    }
+    if (isArchived) {
+      return (
+        <Banner variant="warning">
+          {formatMessage(messages.notEligibleForCert)}
+          {'  '}
+          <Hyperlink isInline destination={progressUrl}>{formatMessage(messages.viewGrades)}</Hyperlink>
+        </Banner>
+      );
+    }
+    return (
+      <Banner variant="warning">
+        {formatMessage(messages.certMinGrade, { minPassingGrade })}
+      </Banner>
+    );
+  }
+  if (certificate.isEarnedButUnavailable) {
+    return (
+      <Banner>
+        {formatMessage(
+          messages.gradeAndCertReadyAfter,
+          { availableDate: formatDate(certificate.availableDate) },
+        )}
+      </Banner>
+    );
+  }
+
+  return null;
+};
+CertificateBanner.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CertificateBanner;

package/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx

@@ -0,0 +1,227 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import CertificateBanner from './CertificateBanner';
+import messages from './messages';
+
+jest.mock('hooks', () => ({
+  utilHooks: {
+    useFormatDate: jest.fn(() => date => date),
+  },
+  reduxHooks: {
+    useCardCertificateData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardGradeData: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+  },
+}));
+
+jest.mock('components/Banner', () => 'Banner');
+
+describe('CertificateBanner', () => {
+  const props = { cardId: 'cardId' };
+  reduxHooks.useCardCourseRunData.mockReturnValue({
+    minPassingGrade: 0.8,
+    progressUrl: 'progressUrl',
+  });
+
+  const defaultCertificate = {
+    availableDate: '10/20/3030',
+    isRestricted: false,
+    isDownloadable: false,
+    isEarnedButUnavailable: false,
+  };
+  const defaultEnrollment = {
+    isAudit: false,
+    isVerified: false,
+  };
+  const defaultCourseRun = { isArchived: false };
+  const defaultGrade = { isPassing: false };
+  const defaultPlatformSettings = {};
+  const createWrapper = ({
+    certificate = {},
+    enrollment = {},
+    grade = {},
+    courseRun = {},
+    platformSettings = {},
+  }) => {
+    reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
+    reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
+    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
+    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
+    return shallow(<CertificateBanner {...props} />);
+  };
+  /** TODO: Update tests to validate snapshots **/
+  describe('snapshot', () => {
+    test('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is restricted with support email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is restricted with billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is restricted and verified', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is restricted and verified with support email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is restricted and verified with billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is restricted and verified with support and billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: { isPassing: true },
+        certificate: { isDownloadable: true },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('not passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: { isPassing: false },
+        certificate: { isDownloadable: true },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('not passing and audit', () => {
+      const wrapper = createWrapper({
+        enrollment: {
+          isAudit: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('not passing and has finished', () => {
+      const wrapper = createWrapper({
+        courseRun: { isArchived: true },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('not passing and not audit and not finished', () => {
+      const wrapper = createWrapper({});
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is passing and is earned but unavailable', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+        certificate: {
+          isEarnedButUnavailable: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is passing and not downloadable render empty', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('behavior', () => {
+    it('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
+      });
+      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
+      expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
+      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
+    });
+    it('is restricted and verified', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
+      });
+      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
+      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
+      expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
+    });
+  });
+});