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

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

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

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

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

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

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

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

@@ -1,82 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import { formatMessage } from 'testUtils';
-import track from 'tracking';
-
-import messages from './messages';
-import EligibleContent from './EligibleContent';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-    useCardCourseRunData: jest.fn(),
-  },
-}));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('tracking', () => ({
-  credit: {
-    purchase: (...args) => ({ trackCredit: args }),
-  },
-}));
-
-let el;
-let component;
-
-const cardId = 'test-card-id';
-const courseId = 'test-course-id';
-const credit = {
-  providerName: 'test-credit-provider-name',
-};
-reduxHooks.useCardCreditData.mockReturnValue(credit);
-reduxHooks.useCardCourseRunData.mockReturnValue({ courseId });
-
-const render = () => {
-  el = shallow(<EligibleContent cardId={cardId} />);
-};
-const loadComponent = () => {
-  component = el.instance.findByType('CreditContent');
-};
-describe('EligibleContent component', () => {
-  beforeEach(() => {
-    render();
-  });
-  describe('behavior', () => {
-    it('initializes credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-    it('initializes course run data with cardId', () => {
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        loadComponent();
-      });
-      test('action.onClick sends credit purchase track event', () => {
-        expect(component[0].props.action.onClick).toEqual(
-          track.credit.purchase(courseId),
-        );
-      });
-      test('action.message is formatted getCredit message', () => {
-        expect(component[0].props.action.message).toEqual(formatMessage(messages.getCredit));
-      });
-      test('message is formatted eligible message if no provider', () => {
-        reduxHooks.useCardCreditData.mockReturnValueOnce({});
-        render();
-        loadComponent();
-        expect(component[0].props.message).toEqual(formatMessage(
-          messages.eligible,
-          { getCredit: (<b>{formatMessage(messages.getCredit)}</b>) },
-        ));
-      });
-      test('message is formatted eligible message if provider', () => {
-        expect(component[0].props.message).toEqual(
-          formatMessage(messages.eligibleFromProvider, { providerName: credit.providerName }),
-        );
-      });
-    });
-  });
-});

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-
-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
-import CreditContent from './components/CreditContent';
-import ProviderLink from './components/ProviderLink';
-import hooks from './hooks';
-
-import messages from './messages';
-
-export const MustRequestContent = ({ cardId }) => {
-  const { formatMessage } = useIntl();
-  const { requestData, createCreditRequest } = hooks.useCreditRequestData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
-  return (
-    <CreditContent
-      action={{
-        message: formatMessage(messages.requestCredit),
-        onClick: createCreditRequest,
-        disabled: isMasquerading,
-      }}
-      message={formatMessage(messages.mustRequest, {
-        linkToProviderSite: (<ProviderLink cardId={cardId} />),
-        requestCredit: (<b>{formatMessage(messages.requestCredit)}</b>),
-      })}
-      requestData={requestData}
-    />
-  );
-};
-MustRequestContent.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default MustRequestContent;

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

@@ -1,74 +0,0 @@
-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 hooks from './hooks';
-import ProviderLink from './components/ProviderLink';
-import MustRequestContent from './MustRequestContent';
-
-jest.mock('./hooks', () => ({
-  useCreditRequestData: jest.fn(),
-}));
-jest.mock('hooks', () => ({
-  reduxHooks: { useMasqueradeData: jest.fn() },
-}));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
-
-let el;
-let component;
-
-const cardId = 'test-card-id';
-const requestData = { test: 'requestData' };
-const createCreditRequest = jest.fn().mockName('createCreditRequest');
-hooks.useCreditRequestData.mockReturnValue({
-  requestData,
-  createCreditRequest,
-});
-reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
-
-const render = () => {
-  el = shallow(<MustRequestContent cardId={cardId} />);
-};
-describe('MustRequestContent component', () => {
-  beforeEach(() => {
-    render();
-  });
-  describe('behavior', () => {
-    it('initializes credit request data with cardId', () => {
-      expect(hooks.useCreditRequestData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        component = el.instance.findByType('CreditContent');
-      });
-      test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => {
-        expect(component[0].props.action.onClick).toEqual(createCreditRequest);
-      });
-      test('action.message is formatted requestCredit message', () => {
-        expect(component[0].props.action.message).toEqual(
-          formatMessage(messages.requestCredit),
-        );
-      });
-      test('action.disabled is false', () => {
-        expect(component[0].props.action.disabled).toEqual(false);
-      });
-      test('message is formatted mustRequest message', () => {
-        expect(component[0].props.message).toEqual(
-          formatMessage(messages.mustRequest, {
-            linkToProviderSite: <ProviderLink cardId={cardId} />,
-            requestCredit: <b>{formatMessage(messages.requestCredit)}</b>,
-          }),
-        );
-      });
-      test('requestData drawn from useCreditRequestData hook', () => {
-        expect(component[0].props.requestData).toEqual(requestData);
-      });
-    });
-  });
-});

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

@@ -1,30 +0,0 @@
-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 messages from './messages';
-
-export const PendingContent = ({ cardId }) => {
-  const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
-  const { formatMessage } = useIntl();
-  return (
-    <CreditContent
-      action={{
-        href,
-        message: formatMessage(messages.viewDetails),
-        disabled: isMasquerading,
-      }}
-      message={formatMessage(messages.received, { providerName })}
-    />
-  );
-};
-PendingContent.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default PendingContent;

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

@@ -1,63 +0,0 @@
-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 PendingContent from './PendingContent';
-
-jest.mock('hooks', () => ({
-  reduxHooks: { useCardCreditData: jest.fn(), useMasqueradeData: jest.fn() },
-}));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
-
-let el;
-let component;
-
-const cardId = 'test-card-id';
-const providerName = 'test-credit-provider-name';
-const providerStatusUrl = 'test-credit-provider-status-url';
-reduxHooks.useCardCreditData.mockReturnValue({
-  providerName,
-  providerStatusUrl,
-});
-reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
-
-const render = () => {
-  el = shallow(<PendingContent cardId={cardId} />);
-};
-describe('PendingContent component', () => {
-  beforeEach(() => {
-    render();
-  });
-  describe('behavior', () => {
-    it('initializes card credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        component = el.instance.findByType('CreditContent');
-      });
-      test('action.href will go to provider status site', () => {
-        expect(component[0].props.action.href).toEqual(providerStatusUrl);
-      });
-      test('action.message is formatted requestCredit message', () => {
-        expect(component[0].props.action.message).toEqual(
-          formatMessage(messages.viewDetails),
-        );
-      });
-      test('action.disabled is false', () => {
-        expect(component[0].props.action.disabled).toEqual(false);
-      });
-      test('message is formatted pending message', () => {
-        expect(component[0].props.message).toEqual(
-          formatMessage(messages.received, { providerName }),
-        );
-      });
-    });
-  });
-});

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '../../../../../../hooks';
-import CreditContent from './components/CreditContent';
-import ProviderLink from './components/ProviderLink';
-import messages from './messages';
-
-export const RejectedContent = ({ cardId }) => {
-  const credit = reduxHooks.useCardCreditData(cardId);
-  const { formatMessage } = useIntl();
-  return (
-    <CreditContent
-      message={formatMessage(messages.rejected, {
-        providerName: credit.providerName,
-        linkToProviderSite: (<ProviderLink cardId={cardId} />),
-      })}
-    />
-  );
-};
-RejectedContent.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default RejectedContent;

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

@@ -1,54 +0,0 @@
-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 RejectedContent from './RejectedContent';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
-}));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
-
-const cardId = 'test-card-id';
-const credit = {
-  providerStatusUrl: 'test-credit-provider-status-url',
-  providerName: 'test-credit-provider-name',
-};
-reduxHooks.useCardCreditData.mockReturnValue(credit);
-
-let el;
-let component;
-const render = () => { el = shallow(<RejectedContent cardId={cardId} />); };
-const loadComponent = () => { component = el.instance.findByType('CreditContent'); };
-
-describe('RejectedContent component', () => {
-  beforeEach(render);
-  describe('behavior', () => {
-    it('initializes credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
-      beforeAll(loadComponent);
-      test('no action is passed', () => {
-        expect(component[0].props.action).toEqual(undefined);
-      });
-      test('message is formatted rejected message', () => {
-        expect(component[0].props.message).toEqual(formatMessage(
-          messages.rejected,
-          {
-            linkToProviderSite: <ProviderLink cardId={cardId} />,
-            providerName: credit.providerName,
-          },
-        ));
-      });
-    });
-  });
-});

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { ActionRow, Button } from '@openedx/paragon';
-import CreditRequestForm from './CreditRequestForm';
-
-export const CreditContent = ({ action, message, requestData }) => (
-  <>
-    <div className="message-copy credit-msg" data-testid="credit-msg">
-      {message}
-    </div>
-    {action && (
-      <ActionRow className="mt-4">
-        <Button
-          as="a"
-          disabled={!!action.disabled}
-          // make sure href is not undefined. Paragon won't disable the button if href is undefined.
-          href={action.href || '#'}
-          rel="noopener"
-          target="_blank"
-          variant="outline-primary"
-          className="border-gray-400"
-          onClick={action.onClick}
-          data-testid="action-row-btn"
-        >
-          {action.message}
-        </Button>
-      </ActionRow>
-    )}
-    <CreditRequestForm requestData={requestData} />
-  </>
-);
-CreditContent.defaultProps = {
-  action: null,
-  requestData: null,
-};
-CreditContent.propTypes = {
-  action: PropTypes.shape({
-    href: PropTypes.string,
-    onClick: PropTypes.func,
-    message: PropTypes.string,
-    disabled: PropTypes.bool,
-  }),
-  message: PropTypes.node.isRequired,
-  requestData: PropTypes.shape({
-    url: PropTypes.string,
-    parameters: PropTypes.objectOf(PropTypes.string),
-  }),
-};
-
-export default CreditContent;