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

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

@@ -0,0 +1,57 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+
+import { utilHooks, reduxHooks } from '../../../../hooks';
+import Banner from '../../../../components/Banner';
+
+import messages from './messages';
+
+export const CourseBanner = ({ cardId }) => {
+  const {
+    isVerified,
+    isAuditAccessExpired,
+    coursewareAccess = {},
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const courseRun = reduxHooks.useCardCourseRunData(cardId);
+  const { formatMessage } = useIntl();
+  const formatDate = utilHooks.useFormatDate();
+
+  const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess;
+
+  if (isVerified) { return null; }
+
+  return (
+    <>
+      {isAuditAccessExpired
+        && (
+          <Banner>
+            {formatMessage(messages.auditAccessExpired)}
+            {'  '}
+            <Hyperlink isInline destination="">
+              {formatMessage(messages.findAnotherCourse)}
+            </Hyperlink>
+          </Banner>
+        )}
+
+      {(!isStaff && isTooEarly && courseRun.startDate) && (
+        <Banner>
+          {formatMessage(messages.courseHasNotStarted, {
+            startDate: formatDate(courseRun.startDate),
+          })}
+        </Banner>
+      )}
+
+      {(!isStaff && hasUnmetPrerequisites) && (
+        <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
+      )}
+    </>
+  );
+};
+CourseBanner.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseBanner;

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Hyperlink } from '@openedx/paragon';
+
+import { reduxHooks } from 'hooks';
+import { formatMessage } from 'testUtils';
+import { CourseBanner } from './CourseBanner';
+
+import messages from './messages';
+
+jest.mock('components/Banner', () => 'Banner');
+jest.mock('hooks', () => ({
+  utilHooks: {
+    useFormatDate: () => date => date,
+  },
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+  },
+}));
+
+const cardId = 'my-test-course-number';
+
+let el;
+
+const enrollmentData = {
+  isVerified: false,
+  isAuditAccessExpired: false,
+  coursewareAccess: {
+    hasUnmetPrerequisites: false,
+    isStaff: false,
+    isTooEarly: false,
+  },
+};
+const courseRunData = {
+  isActive: false,
+  startDate: '11/11/3030',
+  marketingUrl: 'marketing-url',
+};
+
+const render = (overrides = {}) => {
+  const {
+    courseRun = {},
+    enrollment = {},
+  } = overrides;
+  reduxHooks.useCardCourseRunData.mockReturnValueOnce({
+    ...courseRunData,
+    ...courseRun,
+  });
+  reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+    ...enrollmentData,
+    ...enrollment,
+  });
+  el = shallow(<CourseBanner cardId={cardId} />);
+};
+
+describe('CourseBanner', () => {
+  test('initializes data with course number from enrollment, course and course run data', () => {
+    render();
+    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
+  });
+  test('no display if learner is verified', () => {
+    render({ enrollment: { isVerified: true } });
+    expect(el.isEmptyRender()).toEqual(true);
+  });
+  describe('audit access expired', () => {
+    beforeEach(() => {
+      render({ enrollment: { isAuditAccessExpired: true } });
+    });
+    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    test('messages: auditAccessExpired', () => {
+      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
+    });
+  });
+  describe('unmet prerequisites', () => {
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
+    });
+    test('snapshot: unmetPrerequisites', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    test('messages: prerequisitesNotMet', () => {
+      expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
+    });
+  });
+  describe('too early', () => {
+    describe('no start date', () => {
+      beforeEach(() => {
+        render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
+      });
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
+      test('messages', () => expect(el.instance.children).toEqual([]));
+    });
+    describe('has start date', () => {
+      beforeEach(() => {
+        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
+      });
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
+
+      test('messages: courseHasNotStarted', () => {
+        expect(el.instance.children[0].children[0].el).toContain(
+          formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
+        );
+      });
+    });
+  });
+  describe('staff', () => {
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { isStaff: true } } });
+    });
+    test('snapshot: isStaff', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+  });
+  test('snapshot: stacking banners', () => {
+    render({
+      enrollment: {
+        coursewareAccess: {
+          isStaff: true,
+          isTooEarly: true,
+          hasUnmetPrerequisites: true,
+        },
+      },
+    });
+    expect(el.snapshot).toMatchSnapshot();
+  });
+});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreditBanner component render with error state snapshot 1`] = `
+<Banner
+  variant="danger"
+>
+  <p
+    className="credit-error-msg"
+    data-testid="credit-error-msg"
+  >
+    <format-message-function
+      message={
+        {
+          "defaultMessage": "An error occurred with this transaction.  For help, contact {supportEmailLink}.",
+          "description": "",
+          "id": "learner-dash.courseCard.banners.credit.error",
+        }
+      }
+      values={
+        {
+          "supportEmailLink": <MailtoLink
+            to="test-support-email"
+          >
+            test-support-email
+          </MailtoLink>,
+        }
+      }
+    />
+  </p>
+  <ContentComponent
+    cardId="test-card-id"
+  />
+</Banner>
+`;
+
+exports[`CreditBanner component render with error state with no email snapshot 1`] = `
+<Banner
+  variant="danger"
+>
+  <p
+    className="credit-error-msg"
+    data-testid="credit-error-msg"
+  >
+    An error occurred with this transaction.
+  </p>
+  <ContentComponent
+    cardId="test-card-id"
+  />
+</Banner>
+`;
+
+exports[`CreditBanner component render with no error state snapshot 1`] = `
+<Banner>
+  <ContentComponent
+    cardId="test-card-id"
+  />
+</Banner>
+`;

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

@@ -0,0 +1,42 @@
+import { StrictDict } from '../../../../../utils';
+import { reduxHooks } from '../../../../../hooks';
+
+import ApprovedContent from './views/ApprovedContent';
+import EligibleContent from './views/EligibleContent';
+import MustRequestContent from './views/MustRequestContent';
+import PendingContent from './views/PendingContent';
+import RejectedContent from './views/RejectedContent';
+
+export const statusComponents = StrictDict({
+  pending: PendingContent,
+  approved: ApprovedContent,
+  rejected: RejectedContent,
+});
+
+export const useCreditBannerData = (cardId) => {
+  const credit = reduxHooks.useCardCreditData(cardId);
+  const { supportEmail } = reduxHooks.usePlatformSettingsData();
+  if (!credit.isEligible) {
+    return null;
+  }
+
+  const { error, purchased, requestStatus } = credit;
+  let ContentComponent = EligibleContent;
+  if (purchased) {
+    if (requestStatus == null) {
+      ContentComponent = MustRequestContent;
+    } else if (Object.keys(statusComponents).includes(requestStatus)) {
+      ContentComponent = statusComponents[requestStatus];
+    }
+    // Current behavior is to show Elligible State if unknown request status is returned
+  }
+  return {
+    ContentComponent,
+    error,
+    supportEmail,
+  };
+};
+
+export default {
+  useCreditBannerData,
+};

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

@@ -0,0 +1,90 @@
+import { keyStore } from 'utils';
+import { reduxHooks } from 'hooks';
+
+import ApprovedContent from './views/ApprovedContent';
+import EligibleContent from './views/EligibleContent';
+import MustRequestContent from './views/MustRequestContent';
+import PendingContent from './views/PendingContent';
+import RejectedContent from './views/RejectedContent';
+
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+  },
+}));
+jest.mock('./views/ApprovedContent', () => 'ApprovedContent');
+jest.mock('./views/EligibleContent', () => 'EligibleContent');
+jest.mock('./views/MustRequestContent', () => 'MustRequestContent');
+jest.mock('./views/PendingContent', () => 'PendingContent');
+jest.mock('./views/RejectedContent', () => 'RejectedContent');
+
+const cardId = 'test-card-id';
+const statuses = keyStore(hooks.statusComponents);
+const supportEmail = 'test-support-email';
+let out;
+
+const defaultProps = {
+  isEligible: true,
+  error: false,
+  isPurchased: false,
+  requestStatus: null,
+};
+
+const loadHook = (creditData = {}) => {
+  reduxHooks.useCardCreditData.mockReturnValue({ ...defaultProps, ...creditData });
+  out = hooks.useCreditBannerData(cardId);
+};
+
+describe('useCreditBannerData hook', () => {
+  beforeEach(() => {
+    reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+  });
+  it('loads card credit data with cardID and loads platform settings data', () => {
+    loadHook({ isEligible: false });
+    expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.usePlatformSettingsData).toHaveBeenCalledWith();
+  });
+  describe('non-credit-eligible learner', () => {
+    it('returns null if the learner is not credit eligible', () => {
+      loadHook({ isEligible: false });
+      expect(out).toEqual(null);
+    });
+  });
+  describe('credit-eligible learner', () => {
+    it('returns error object from credit', () => {
+      loadHook();
+      expect(out.error).toEqual(defaultProps.error);
+      loadHook({ error: true });
+      expect(out.error).toEqual(true);
+    });
+    describe('ContentComponent', () => {
+      it('returns EligibleContent if not purchased', () => {
+        loadHook();
+        expect(out.ContentComponent).toEqual(EligibleContent);
+      });
+      it('returns MustRequestContent if purchased but not requested', () => {
+        loadHook({ purchased: true });
+        expect(out.ContentComponent).toEqual(MustRequestContent);
+      });
+      it('returns PendingContent if purchased and request is pending', () => {
+        loadHook({ purchased: true, requestStatus: statuses.pending });
+        expect(out.ContentComponent).toEqual(PendingContent);
+      });
+      it('returns ApprovedContent if purchased and request is approved', () => {
+        loadHook({ purchased: true, requestStatus: statuses.approved });
+        expect(out.ContentComponent).toEqual(ApprovedContent);
+      });
+      it('returns RejectedContent if purchased and request is rejected', () => {
+        loadHook({ purchased: true, requestStatus: statuses.rejected });
+        expect(out.ContentComponent).toEqual(RejectedContent);
+      });
+      it('returns EligibleContent if purchased and request status is invalid', () => {
+        loadHook({ purchased: true, requestStatus: 'fake-status' });
+        expect(out.ContentComponent).toEqual(EligibleContent);
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import Banner from '../../../../../components/Banner';
+
+import { MailtoLink } from '@openedx/paragon';
+import hooks from './hooks';
+import messages from './messages';
+
+export const CreditBanner = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const hookData = hooks.useCreditBannerData(cardId);
+  if (hookData === null) {
+    return null;
+  }
+
+  const { ContentComponent, error, supportEmail } = hookData;
+  const supportEmailLink = (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>);
+  return (
+    <Banner {...(error && { variant: 'danger' })}>
+      {error && (
+        <p className="credit-error-msg" data-testid="credit-error-msg">
+          {supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}
+        </p>
+      )}
+      <ContentComponent cardId={cardId} />
+    </Banner>
+  );
+};
+CreditBanner.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CreditBanner;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from 'testUtils';
+import { MailtoLink } from '@openedx/paragon';
+
+import hooks from './hooks';
+import messages from './messages';
+import CreditBanner from '.';
+
+jest.mock('components/Banner', () => 'Banner');
+
+jest.mock('./hooks', () => ({
+  useCreditBannerData: jest.fn(),
+}));
+
+let el;
+const cardId = 'test-card-id';
+
+const ContentComponent = () => 'ContentComponent';
+const supportEmail = 'test-support-email';
+
+describe('CreditBanner component', () => {
+  describe('behavior', () => {
+    beforeEach(() => {
+      hooks.useCreditBannerData.mockReturnValue(null);
+      el = shallow(<CreditBanner cardId={cardId} />);
+    });
+    it('initializes hooks with cardId', () => {
+      expect(hooks.useCreditBannerData).toHaveBeenCalledWith(cardId);
+    });
+    it('returns null if hookData is null', () => {
+      expect(el.isEmptyRender()).toEqual(true);
+    });
+  });
+  describe('render', () => {
+    describe('with error state', () => {
+      beforeEach(() => {
+        hooks.useCreditBannerData.mockReturnValue({
+          error: true,
+          ContentComponent,
+          supportEmail,
+        });
+        el = shallow(<CreditBanner cardId={cardId} />);
+      });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('passes danger variant to Banner parent', () => {
+        expect(el.instance.findByType('Banner')[0].props.variant).toEqual('danger');
+      });
+      it('includes credit-error-msg with support email link', () => {
+        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(shallow(formatMessage(messages.error, {
+          supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
+        })));
+      });
+      it('loads ContentComponent with cardId', () => {
+        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
+      });
+    });
+
+    describe('with error state with no email', () => {
+      beforeEach(() => {
+        hooks.useCreditBannerData.mockReturnValue({
+          error: true,
+          ContentComponent,
+        });
+        el = shallow(<CreditBanner cardId={cardId} />);
+      });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('includes credit-error-msg without support email link', () => {
+        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(formatMessage(messages.errorNoEmail));
+      });
+    });
+
+    describe('with no error state', () => {
+      beforeEach(() => {
+        hooks.useCreditBannerData.mockReturnValue({
+          error: false,
+          ContentComponent,
+          supportEmail,
+        });
+        el = shallow(<CreditBanner cardId={cardId} />);
+      });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('loads ContentComponent with cardId', () => {
+        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  error: {
+    id: 'learner-dash.courseCard.banners.credit.error',
+    description: 'Error message for credit transaction with support email link',
+    defaultMessage: 'An error occurred with this transaction.  For help, contact {supportEmailLink}.',
+  },
+  errorNoEmail: {
+    id: 'learner-dash.courseCard.banners.credit.errorNoEmail',
+    description: 'Error message for credit transaction without support email',
+    defaultMessage: 'An error occurred with this transaction.',
+  },
+});
+
+export default messages;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
+import { reduxHooks } from '../../../../../../hooks';
+import CreditContent from './components/CreditContent';
+import ProviderLink from './components/ProviderLink';
+
+import messages from './messages';
+
+export const ApprovedContent = ({ cardId }) => {
+  const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
+  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { formatMessage } = useIntl();
+  return (
+    <CreditContent
+      action={{ href, message: formatMessage(messages.viewCredit), disabled: isMasquerading }}
+      message={formatMessage(
+        messages.approved,
+        {
+          congratulations: <b>{formatMessage(messages.congratulations)}</b>,
+          linkToProviderSite: <ProviderLink cardId={cardId} />,
+          providerName,
+        },
+      )}
+    />
+  );
+};
+ApprovedContent.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default ApprovedContent;

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from 'testUtils';
+import { reduxHooks } from 'hooks';
+import messages from './messages';
+import ProviderLink from './components/ProviderLink';
+import ApprovedContent from './ApprovedContent';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+    useMasqueradeData: jest.fn(),
+  },
+}));
+jest.mock('./components/CreditContent', () => 'CreditContent');
+jest.mock('./components/ProviderLink', () => 'ProviderLink');
+
+let el;
+const cardId = 'test-card-id';
+const credit = {
+  providerStatusUrl: 'test-credit-provider-status-url',
+  providerName: 'test-credit-provider-name',
+};
+reduxHooks.useCardCreditData.mockReturnValue(credit);
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
+
+describe('ApprovedContent component', () => {
+  beforeEach(() => {
+    el = shallow(<ApprovedContent cardId={cardId} />);
+  });
+  describe('behavior', () => {
+    it('initializes credit data with cardId', () => {
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    });
+  });
+  describe('render', () => {
+    describe('rendered CreditContent component', () => {
+      let component;
+      beforeAll(() => {
+        component = el.instance.findByType('CreditContent');
+      });
+      test('action.href from credit.providerStatusUrl', () => {
+        expect(component[0].props.action.href).toEqual(credit.providerStatusUrl);
+      });
+      test('action.message is formatted viewCredit message', () => {
+        expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit));
+      });
+      test('action.disabled is false', () => {
+        expect(component[0].props.action.disabled).toEqual(false);
+      });
+      test('message is formatted approved message', () => {
+        expect(component[0].props.message).toEqual(formatMessage(
+          messages.approved,
+          {
+            congratulations: (<b>{formatMessage(messages.congratulations)}</b>),
+            linkToProviderSite: <ProviderLink cardId={cardId} />,
+            providerName: credit.providerName,
+          },
+        ));
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import { reduxHooks } from '../../../../../../hooks';
+import track from '../../../../../../tracking';
+
+import CreditContent from './components/CreditContent';
+import messages from './messages';
+
+export const EligibleContent = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { providerName } = reduxHooks.useCardCreditData(cardId);
+  const { courseId } = reduxHooks.useCardCourseRunData(cardId);
+
+  const onClick = track.credit.purchase(courseId);
+  const getCredit = formatMessage(messages.getCredit);
+  const message = providerName
+    ? formatMessage(messages.eligibleFromProvider, { providerName })
+    : formatMessage(messages.eligible, { getCredit: (<b>{getCredit}</b>) });
+
+  return (
+    <CreditContent
+      action={{ onClick, message: getCredit }}
+      message={message}
+    />
+  );
+};
+EligibleContent.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default EligibleContent;