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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import CreditContent from './CreditContent';
+
+let el;
+const action = {
+  href: 'test-action-href',
+  onClick: jest.fn().mockName('test-action-onClick'),
+  message: 'test-action-message',
+  disabled: false,
+};
+
+const message = 'test-message';
+const requestData = { url: 'test-request-data-url', parameters: { key1: 'val1' } };
+const props = { action, message, requestData };
+
+describe('CreditContent component', () => {
+  describe('render', () => {
+    describe('with action', () => {
+      beforeEach(() => {
+        el = shallow(<CreditContent {...props} />);
+      });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('loads href, onClick, and message into action row button', () => {
+        const buttonEl = el.instance.findByTestId('action-row-btn')[0];
+        expect(buttonEl.props.href).toEqual(action.href);
+        expect(buttonEl.props.onClick).toEqual(action.onClick);
+        expect(buttonEl.props.disabled).toEqual(action.disabled);
+        expect(buttonEl.children[0].el).toEqual(action.message);
+      });
+      it('loads message into credit-msg div', () => {
+        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
+      });
+      it('loads CreditRequestForm with passed requestData', () => {
+        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
+      });
+      test('disables action button when action.disabled is true', () => {
+        el = shallow(<CreditContent {...props} action={{ ...action, disabled: true }} />);
+        expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true);
+      });
+    });
+    describe('without action', () => {
+      test('snapshot', () => {
+        el = shallow(<CreditContent {...{ message, requestData }} />);
+      });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('loads message into credit-msg div', () => {
+        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
+      });
+      it('loads CreditRequestForm with passed requestData', () => {
+        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreditRequestForm component render output valid requestData snapshot 1`] = `
+<Form
+  accept-method="UTF-8"
+  action="test-request-data-url"
+  className="hidden"
+  method="POST"
+>
+  <FormControl
+    as="textarea"
+    key="key1"
+    name="key1"
+    value="val1"
+  />
+  <FormControl
+    as="textarea"
+    key="key2"
+    name="key2"
+    value="val2"
+  />
+  <FormControl
+    as="textarea"
+    key="key3"
+    name="key3"
+    value="val3"
+  />
+  <Button
+    type="submit"
+  />
+</Form>
+`;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const useCreditRequestFormData = (requestData) => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (requestData !== null) {
+      ref.current.click();
+    }
+  }, [requestData]);
+  return { ref };
+};
+
+export default useCreditRequestFormData;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import useCreditRequestFormData from './hooks';
+
+const requestData = 'test-request-data';
+
+let out;
+const ref = {
+  current: { click: jest.fn() },
+};
+React.useRef.mockReturnValue(ref);
+
+describe('useCreditRequestFormData hook', () => {
+  describe('behavior', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    it('initializes ref with null', () => {
+      useCreditRequestFormData(requestData);
+      expect(React.useRef).toHaveBeenCalledWith(null);
+    });
+    let cb;
+    let prereqs;
+    it('does not click current ref when request data changes and is null', () => {
+      useCreditRequestFormData(null);
+      ([[cb, prereqs]] = React.useEffect.mock.calls);
+      expect(prereqs).toEqual([null]);
+      cb();
+      expect(ref.current.click).not.toHaveBeenCalled();
+    });
+    it('clicks current ref when request data changes and is not null', () => {
+      useCreditRequestFormData(requestData);
+      ([[cb, prereqs]] = React.useEffect.mock.calls);
+      expect(prereqs).toEqual([requestData]);
+      cb();
+      expect(ref.current.click).toHaveBeenCalled();
+    });
+  });
+  describe('output', () => {
+    it('returns ref for submit button', () => {
+      out = useCreditRequestFormData(requestData);
+      expect(out.ref).toEqual(ref);
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Form, FormControl } from '@openedx/paragon';
+
+import useCreditRequestFormData from './hooks';
+
+export const CreditRequestForm = ({ requestData }) => {
+  const { ref } = useCreditRequestFormData(requestData);
+  if (requestData === null) {
+    return null;
+  }
+  const { parameters, url } = requestData;
+  return (
+    <Form
+      accept-method="UTF-8"
+      action={url}
+      className="hidden"
+      method="POST"
+    >
+      {Object.keys(parameters).map((key) => (
+        <FormControl
+          as="textarea"
+          key={key}
+          name={key}
+          value={parameters[key]}
+        />
+      ))}
+      <Button type="submit" ref={ref} />
+    </Form>
+  );
+};
+CreditRequestForm.defaultProps = {
+  requestData: null,
+};
+CreditRequestForm.propTypes = {
+  requestData: PropTypes.shape({
+    parameters: PropTypes.objectOf(PropTypes.string),
+    url: PropTypes.string,
+  }),
+};
+
+export default CreditRequestForm;

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { keyStore } from 'utils';
+
+import useCreditRequestFormData from './hooks';
+import CreditRequestForm from '.';
+
+jest.mock('./hooks', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const ref = 'test-ref';
+const requestData = {
+  url: 'test-request-data-url',
+  parameters: {
+    key1: 'val1',
+    key2: 'val2',
+    key3: 'val3',
+  },
+};
+
+const paramKeys = keyStore(requestData.parameters);
+
+useCreditRequestFormData.mockReturnValue({ ref });
+
+let el;
+const shallowRender = (data) => { el = shallow(<CreditRequestForm requestData={data} />); };
+describe('CreditRequestForm component', () => {
+  describe('behavior', () => {
+    it('initializes ref from hook with requestData', () => {
+      shallowRender(requestData);
+      expect(useCreditRequestFormData).toHaveBeenCalledWith(requestData);
+    });
+  });
+  describe('render output', () => {
+    describe('null requestData', () => {
+      it('returns null', () => {
+        shallowRender(null);
+        expect(el.isEmptyRender()).toEqual(true);
+      });
+    });
+    describe('valid requestData', () => {
+      beforeEach(() => {
+        shallowRender(requestData);
+      });
+      test('snapshot', () => {
+        expect(el.snapshot).toMatchSnapshot();
+      });
+      it('loads Form with requestData url', () => {
+        expect(el.instance.findByType('Form')[0].props.action).toEqual(requestData.url);
+      });
+      it('loads a textarea form control for each requestData parameter', () => {
+        const controls = el.instance.findByType('FormControl');
+        expect(controls[0].props.name).toEqual(paramKeys.key1);
+        expect(controls[0].props.value).toEqual(requestData.parameters.key1);
+        expect(controls[1].props.name).toEqual(paramKeys.key2);
+        expect(controls[1].props.value).toEqual(requestData.parameters.key2);
+        expect(controls[2].props.name).toEqual(paramKeys.key3);
+        expect(controls[2].props.value).toEqual(requestData.parameters.key3);
+      });
+    });
+  });
+});