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

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import useCreditRequestFormData from './hooks';
+import CreditRequestForm from '.';
+
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+jest.mock('./hooks', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const ref = { current: { click: jest.fn() }, useRef: jest.fn() };
+const requestData = {
+  url: 'test-request-data-url',
+  parameters: {
+    key1: 'val1',
+    key2: 'val2',
+    key3: 'val3',
+  },
+};
+
+useCreditRequestFormData.mockReturnValue({ ref });
+
+let el;
+describe('CreditRequestForm component ref behavior', () => {
+  it('loads submit button with ref from hook', () => {
+    el = render(<CreditRequestForm requestData={requestData} />);
+    const button = el.getByRole('button');
+    expect(ref.current).toEqual(button);
+  });
+});

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

@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { reduxHooks } from '../../../../../../../hooks';
+import { Hyperlink } from '@openedx/paragon';
+
+export const ProviderLink = ({ cardId }) => {
+  const credit = reduxHooks.useCardCreditData(cardId);
+  return (
+    <Hyperlink
+      href={credit.providerStatusUrl}
+      rel="noopener"
+      target="_blank"
+    >
+      {credit.providerName}
+    </Hyperlink>
+  );
+};
+ProviderLink.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default ProviderLink;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+
+import ProviderLink from './ProviderLink';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+  },
+}));
+
+const cardId = 'test-card-id';
+const credit = {
+  providerStatusUrl: 'test-credit-provider-status-url',
+  providerName: 'test-credit-provider-name',
+};
+let el;
+
+describe('ProviderLink component', () => {
+  beforeEach(() => {
+    reduxHooks.useCardCreditData.mockReturnValue(credit);
+    el = shallow(<ProviderLink cardId={cardId} />);
+  });
+  describe('behavior', () => {
+    it('initializes credit hook with cardId', () => {
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    it('passes credit.providerStatusUrl to the hyperlink href', () => {
+      expect(el.instance.findByType('Hyperlink')[0].props.href).toEqual(credit.providerStatusUrl);
+    });
+    it('passes providerName for the link message', () => {
+      expect(el.instance.findByType('Hyperlink')[0].children[0].el).toEqual(credit.providerName);
+    });
+  });
+});

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

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreditContent component render with action snapshot 1`] = `
+<Fragment>
+  <div
+    className="message-copy credit-msg"
+    data-testid="credit-msg"
+  >
+    test-message
+  </div>
+  <ActionRow
+    className="mt-4"
+  >
+    <Button
+      as="a"
+      className="border-gray-400"
+      data-testid="action-row-btn"
+      disabled={false}
+      href="test-action-href"
+      onClick={[MockFunction test-action-onClick]}
+      rel="noopener"
+      target="_blank"
+      variant="outline-primary"
+    >
+      test-action-message
+    </Button>
+  </ActionRow>
+  <CreditRequestForm
+    requestData={
+      {
+        "parameters": {
+          "key1": "val1",
+        },
+        "url": "test-request-data-url",
+      }
+    }
+  />
+</Fragment>
+`;
+
+exports[`CreditContent component render without action snapshot 1`] = `
+<Fragment>
+  <div
+    className="message-copy credit-msg"
+    data-testid="credit-msg"
+  >
+    test-message
+  </div>
+  <CreditRequestForm
+    requestData={
+      {
+        "parameters": {
+          "key1": "val1",
+        },
+        "url": "test-request-data-url",
+      }
+    }
+  />
+</Fragment>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProviderLink component render snapshot 1`] = `
+<Hyperlink
+  href="test-credit-provider-status-url"
+  rel="noopener"
+  target="_blank"
+>
+  test-credit-provider-name
+</Hyperlink>
+`;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { StrictDict } from '../../../../../../utils';
+import { apiHooks } from '../../../../../../hooks';
+
+import * as module from './hooks';
+
+export const state = StrictDict({
+  creditRequestData: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useCreditRequestData = (cardId) => {
+  const [requestData, setRequestData] = module.state.creditRequestData(null);
+  const createCreditApiRequest = apiHooks.useCreateCreditRequest(cardId);
+  const createCreditRequest = (e) => {
+    e.preventDefault();
+    createCreditApiRequest()
+      .then((request) => {
+        setRequestData(request.data);
+      });
+  };
+  return { requestData, createCreditRequest };
+};
+
+export default {
+  useCreditRequestData,
+};

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

@@ -0,0 +1,56 @@
+import { MockUseState } from 'testUtils';
+import { apiHooks } from 'hooks';
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  apiHooks: {
+    useCreateCreditRequest: jest.fn(),
+  },
+}));
+
+const state = new MockUseState(hooks);
+
+const cardId = 'test-card-id';
+const requestData = { data: 'request data' };
+const creditRequest = jest.fn().mockReturnValue(Promise.resolve(requestData));
+apiHooks.useCreateCreditRequest.mockReturnValue(creditRequest);
+const event = { preventDefault: jest.fn() };
+
+let out;
+describe('Credit Banner view hooks', () => {
+  describe('state', () => {
+    state.testGetter(state.keys.creditRequestData);
+  });
+  describe('useCreditRequestData', () => {
+    beforeEach(() => {
+      state.mock();
+      out = hooks.useCreditRequestData(cardId);
+    });
+    describe('behavior', () => {
+      it('initializes creditRequestData state field with null value', () => {
+        state.expectInitializedWith(state.keys.creditRequestData, null);
+      });
+      it('calls useCreateCreditRequest with passed cardID', () => {
+        expect(apiHooks.useCreateCreditRequest).toHaveBeenCalledWith(cardId);
+      });
+    });
+    describe('output', () => {
+      it('returns requestData state value', () => {
+        state.mockVal(state.keys.creditRequestData, requestData);
+        out = hooks.useCreditRequestData(cardId);
+        expect(out.requestData).toEqual(requestData);
+      });
+      describe('createCreditRequest', () => {
+        it('returns an event handler that prevents default click behavior', () => {
+          out.createCreditRequest(event);
+          expect(event.preventDefault).toHaveBeenCalled();
+        });
+        it('calls api.createCreditRequest and sets requestData with the response', async () => {
+          await out.createCreditRequest(event);
+          expect(creditRequest).toHaveBeenCalledWith();
+          expect(state.setState.creditRequestData).toHaveBeenCalledWith(requestData.data);
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,61 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  approved: {
+    id: 'learner-dash.courseCard.banners.credit.approved',
+    description: 'Message shown when credit request has been approved',
+    defaultMessage: '{congratulations} {providerName} has approved your request for course credit. To see your course credit, visit the {linkToProviderSite} website.',
+  },
+  congratulations: {
+    id: 'learner-dash.courseCard.banners.credit.congratulations',
+    description: 'Congratulatory message for credit approval',
+    defaultMessage: 'Congratulations!',
+  },
+  eligible: {
+    id: 'learner-dash.courseCard.banners.credit.eligible',
+    description: 'Message shown when user is eligible to purchase course credit',
+    defaultMessage: 'You have completed this course and are eligible to purchase course credit.  Select {getCredit} to get started.',
+  },
+  eligibleFromProvider: {
+    id: 'learner-dash.courseCard.banners.credit.eligibleFromProvider',
+    description: 'Message shown when user is eligible for credit from a specific provider',
+    defaultMessage: 'You are now eligible for credit from {providerName}. Congratulations!',
+  },
+  getCredit: {
+    id: 'learner-dash.courseCard.banners.credit.getCredit',
+    description: 'Button text for initiating the credit process',
+    defaultMessage: 'Get Credit',
+  },
+  mustRequest: {
+    id: 'learner-dash.courseCard.banners.credit.mustRequest',
+    description: 'Message shown after payment to instruct user to request credit',
+    defaultMessage: 'Thank you for your payment.  To receive course credit, you must request credit at the {linkToProviderSite} website.  Select {requestCredit} to get started',
+  },
+  received: {
+    id: 'learner-dash.courseCard.banners.credit.received',
+    description: 'Message shown when credit request has been received',
+    defaultMessage: '{providerName} has received your course credit request.  We will update you when credit processing is complete.',
+  },
+  rejected: {
+    id: 'learner-dash.courseCard.banners.credit.rejected',
+    description: 'Message shown when credit request has been rejected',
+    defaultMessage: '{providerName} did not approve your request for course credit.  For more information, contact {linkToProviderSite} directly.',
+  },
+  requestCredit: {
+    id: 'learner-dash.courseCard.banners.credit.requestCredit',
+    description: 'Button text for requesting credit',
+    defaultMessage: 'Request Credit',
+  },
+  viewCredit: {
+    id: 'learner-dash.courseCard.banners.credit.viewCredit',
+    description: 'Button text for viewing credit details',
+    defaultMessage: 'View Credit',
+  },
+  viewDetails: {
+    id: 'learner-dash.courseCard.banners.credit.viewDetails',
+    description: 'Button text for viewing credit request details',
+    defaultMessage: 'View Details',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+import { Button, MailtoLink } from '@openedx/paragon';
+
+import { utilHooks, reduxHooks } from '../../../../hooks';
+import Banner from '../../../../components/Banner';
+
+import messages from './messages';
+
+export const EntitlementBanner = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const {
+    isEntitlement,
+    hasSessions,
+    isFulfilled,
+    changeDeadline,
+    showExpirationWarning,
+    isExpired,
+  } = reduxHooks.useCardEntitlementData(cardId);
+  const { supportEmail } = reduxHooks.usePlatformSettingsData();
+  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
+  const formatDate = utilHooks.useFormatDate();
+
+  if (!isEntitlement) {
+    return null;
+  }
+
+  if (!hasSessions && !isFulfilled) {
+    return (
+      <Banner variant="warning">
+        {formatMessage(messages.entitlementUnavailable, {
+          emailLink: supportEmail && <MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>,
+        })}
+      </Banner>
+    );
+  }
+  if (showExpirationWarning) {
+    return (
+      <Banner>
+        {formatMessage(messages.entitlementExpiringSoon, {
+          changeDeadline: formatDate(changeDeadline),
+          selectSessionButton: (
+            <Button variant="link" size="inline" className="m-0 p-0" onClick={openSessionModal}>
+              {formatMessage(messages.selectSession)}
+            </Button>
+          ),
+        })}
+      </Banner>
+    );
+  }
+  if (isExpired) {
+    return (
+      <Banner>
+        {formatMessage(messages.entitlementExpired)}
+      </Banner>
+    );
+  }
+  return null;
+};
+EntitlementBanner.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default EntitlementBanner;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import EntitlementBanner from './EntitlementBanner';
+
+jest.mock('components/Banner', () => 'Banner');
+jest.mock('hooks', () => ({
+  utilHooks: {
+    useFormatDate: () => date => date,
+  },
+  reduxHooks: {
+    usePlatformSettingsData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useUpdateSelectSessionModalCallback: jest.fn(
+      (cardId) => jest.fn().mockName(`updateSelectSessionModalCallback(${cardId})`),
+    ),
+  },
+}));
+
+const cardId = 'my-test-course-number';
+
+let el;
+
+const entitlementData = {
+  isEntitlement: true,
+  hasSessions: true,
+  isFulfilled: false,
+  changeDeadline: '11/11/2022',
+  showExpirationWarning: false,
+};
+const platformData = { supportEmail: 'test-support-email' };
+
+const render = (overrides = {}) => {
+  const { entitlement = {} } = overrides;
+  reduxHooks.useCardEntitlementData.mockReturnValueOnce({ ...entitlementData, ...entitlement });
+  reduxHooks.usePlatformSettingsData.mockReturnValueOnce(platformData);
+  el = shallow(<EntitlementBanner cardId={cardId} />);
+};
+
+describe('EntitlementBanner', () => {
+  test('initializes data with course number from entitlement', () => {
+    render();
+    expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(cardId);
+  });
+  test('no display if not an entitlement', () => {
+    render({ entitlement: { isEntitlement: false } });
+    expect(el.isEmptyRender()).toEqual(true);
+  });
+  test('snapshot: no sessions available', () => {
+    render({ entitlement: { isFulfilled: false, hasSessions: false } });
+    expect(el.snapshot).toMatchSnapshot();
+  });
+  test('snapshot: expiration warning', () => {
+    render({ entitlement: { showExpirationWarning: true } });
+    expect(el.snapshot).toMatchSnapshot();
+  });
+  test('no display if sessions available and not displaying warning', () => {
+    render();
+    expect(el.isEmptyRender()).toEqual(true);
+  });
+});

package/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/ProgramsList.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const ProgramsList = ({ programs }) => (
+  <ul className="related-programs-list-container">
+    {programs.map((program) => (
+      <li key={program.programUrl} className="my-2">
+        <a href={program.programUrl}>{program.title}</a>
+      </li>
+    ))}
+  </ul>
+);
+
+ProgramsList.propTypes = {
+  programs: PropTypes.arrayOf(
+    PropTypes.shape({
+      programUrl: PropTypes.string,
+      title: PropTypes.string,
+    }),
+  ).isRequired,
+};
+
+export default ProgramsList;

package/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/ProgramsList.test.jsx

@@ -0,0 +1,23 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { ProgramsList } from './ProgramsList';
+
+describe('ProgramsList', () => {
+  const programs = [
+    {
+      programUrl: 'http://example.com',
+      title: 'Example Program 1',
+    },
+    {
+      programUrl: 'http://example.com',
+      title: 'Example Program 2',
+    },
+  ];
+
+  it('renders correctly', () => {
+    const wrapper = shallow(<ProgramsList programs={programs} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+
+    expect(wrapper.instance.findByType('li').length).toEqual(programs.length);
+  });
+});

package/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/__snapshots__/ProgramsList.test.jsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgramsList renders correctly 1`] = `
+<ul
+  className="related-programs-list-container"
+>
+  <li
+    className="my-2"
+    key="http://example.com"
+  >
+    <a
+      href="http://example.com"
+    >
+      Example Program 1
+    </a>
+  </li>
+  <li
+    className="my-2"
+    key="http://example.com"
+  >
+    <a
+      href="http://example.com"
+    >
+      Example Program 2
+    </a>
+  </li>
+</ul>
+`;

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RelatedProgramsBanner render with programs 1`] = `
+<Banner
+  className="bg-white border-top border-bottom mb-0 related-programs-banner"
+  icon={[MockFunction icons.Program]}
+  variant="info"
+>
+  <span
+    className="font-weight-bolder"
+  >
+    Related Programs: 
+  </span>
+  <ProgramsList
+    programs={
+      [
+        {
+          "title": "Program 1",
+          "url": "http://example.com/program1",
+        },
+        {
+          "title": "Program 2",
+          "url": "http://example.com/program2",
+        },
+      ]
+    }
+  />
+</Banner>
+`;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Program } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+
+import { reduxHooks } from '../../../../../hooks';
+import Banner from '../../../../../components/Banner';
+
+import ProgramList from './ProgramsList';
+import messages from './messages';
+
+export const RelatedProgramsBanner = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+
+  const programData = reduxHooks.useCardRelatedProgramsData(cardId);
+
+  if (!programData?.length) {
+    return null;
+  }
+
+  return (
+    <Banner
+      icon={Program}
+      className="bg-white border-top border-bottom mb-0 related-programs-banner"
+    >
+      <span className="font-weight-bolder">
+        {formatMessage(messages.relatedPrograms)}
+      </span>
+      <ProgramList programs={programData.list} />
+    </Banner>
+  );
+};
+RelatedProgramsBanner.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default RelatedProgramsBanner;

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

@@ -0,0 +1,42 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from '../../../../../hooks';
+import RelatedProgramsBanner from '.';
+
+jest.mock('./ProgramsList', () => 'ProgramsList');
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardRelatedProgramsData: jest.fn(),
+  },
+}));
+
+const cardId = 'test-card-id';
+
+describe('RelatedProgramsBanner', () => {
+  test('render empty', () => {
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue({
+      length: 0,
+    });
+    const el = shallow(<RelatedProgramsBanner cardId={cardId} />);
+    expect(el.isEmptyRender()).toEqual(true);
+  });
+
+  test('render with programs', () => {
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue({
+      list: [
+        {
+          title: 'Program 1',
+          url: 'http://example.com/program1',
+        },
+        {
+          title: 'Program 2',
+          url: 'http://example.com/program2',
+        },
+      ],
+      length: 2,
+    });
+    const el = shallow(<RelatedProgramsBanner cardId={cardId} />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,31 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  relatedPrograms: {
+    id: 'learner-dash.courseCard.banners.relatedPrograms',
+    description: 'title for related programs banner',
+    defaultMessage: 'Related Programs: ',
+  },
+  expandBanner: {
+    id: 'learner-dash.courseCard.banners.expandBanner',
+    description: 'expand banner button text',
+    defaultMessage: 'More',
+  },
+  expandBannerAlt: {
+    id: 'learner-dash.courseCard.banners.expandBannerAlt',
+    description: 'expand banner button alt text',
+    defaultMessage: 'Expand banner icon',
+  },
+  collapseBanner: {
+    id: 'learner-dash.courseCard.banners.collapseBanner',
+    description: 'collapse banner button text',
+    defaultMessage: 'Less',
+  },
+  collapseBannerAlt: {
+    id: 'learner-dash.courseCard.banners.collapseBannerAlt',
+    description: 'collapse banner button alt text',
+    defaultMessage: 'Collapse banner icon',
+  },
+});
+
+export default messages;