fix: make credit actions disable on masquerade

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

@@ -11,10 +11,11 @@ import messages from './messages';
 
 export const ApprovedContent = ({ cardId }) => {
   const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
     <CreditContent
-      action={{ href, message: formatMessage(messages.viewCredit) }}
+      action={{ href, message: formatMessage(messages.viewCredit), disabled: isMasquerading }}
       message={formatMessage(
         messages.approved,
         {

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

@@ -10,6 +10,7 @@ import ApprovedContent from './ApprovedContent';
 jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCreditData: jest.fn(),
+    useMasqueradeData: jest.fn(),
   },
 }));
 jest.mock('./components/CreditContent', () => 'CreditContent');
@@ -22,6 +23,7 @@ const credit = {
   providerName: 'test-credit-provider-name',
 };
 reduxHooks.useCardCreditData.mockReturnValue(credit);
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
 describe('ApprovedContent component', () => {
   beforeEach(() => {
@@ -44,6 +46,9 @@ describe('ApprovedContent component', () => {
       test('action.message is formatted viewCredit message', () => {
         expect(component.props().action.message).toEqual(formatMessage(messages.viewCredit));
       });
+      test('action.disabled is false', () => {
+        expect(component.props().action.disabled).toEqual(false);
+      });
       test('message is formatted approved message', () => {
         expect(component.props().message).toEqual(formatMessage(
           messages.approved,

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { reduxHooks } from 'hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';
 import hooks from './hooks';
@@ -12,11 +13,13 @@ import messages from './messages';
 export const MustRequestContent = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const { requestData, createCreditRequest } = hooks.useCreditRequestData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
   return (
     <CreditContent
       action={{
         message: formatMessage(messages.requestCredit),
         onClick: createCreditRequest,
+        disabled: isMasquerading,
       }}
       message={formatMessage(messages.mustRequest, {
         linkToProviderSite: (<ProviderLink cardId={cardId} />),

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

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 
 import { formatMessage } from 'testUtils';
 
+import { reduxHooks } from 'hooks';
 import messages from './messages';
 import hooks from './hooks';
 import ProviderLink from './components/ProviderLink';
@@ -11,6 +12,9 @@ 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');
 
@@ -20,7 +24,11 @@ let component;
 const cardId = 'test-card-id';
 const requestData = { test: 'requestData' };
 const createCreditRequest = jest.fn().mockName('createCreditRequest');
-hooks.useCreditRequestData.mockReturnValue({ requestData, createCreditRequest });
+hooks.useCreditRequestData.mockReturnValue({
+  requestData,
+  createCreditRequest,
+});
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
 const render = () => {
   el = shallow(<MustRequestContent cardId={cardId} />);
@@ -43,13 +51,18 @@ describe('MustRequestContent component', () => {
         expect(component.props().action.onClick).toEqual(createCreditRequest);
       });
       test('action.message is formatted requestCredit message', () => {
-        expect(component.props().action.message).toEqual(formatMessage(messages.requestCredit));
+        expect(component.props().action.message).toEqual(
+          formatMessage(messages.requestCredit),
+        );
+      });
+      test('action.disabled is false', () => {
+        expect(component.props().action.disabled).toEqual(false);
       });
       test('message is formatted mustRequest message', () => {
         expect(component.props().message).toEqual(
           formatMessage(messages.mustRequest, {
-            linkToProviderSite: (<ProviderLink cardId={cardId} />),
-            requestCredit: (<b>{formatMessage(messages.requestCredit)}</b>),
+            linkToProviderSite: <ProviderLink cardId={cardId} />,
+            requestCredit: <b>{formatMessage(messages.requestCredit)}</b>,
           }),
         );
       });

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

@@ -9,12 +9,14 @@ import messages from './messages';
 
 export const PendingContent = ({ cardId }) => {
   const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
   const { formatMessage } = useIntl();
   return (
     <CreditContent
       action={{
         href,
         message: formatMessage(messages.viewDetails),
+        disabled: isMasquerading,
       }}
       message={formatMessage(messages.received, { providerName })}
     />

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

@@ -7,7 +7,9 @@ import { reduxHooks } from 'hooks';
 import messages from './messages';
 import PendingContent from './PendingContent';
 
-jest.mock('hooks', () => ({ reduxHooks: { useCardCreditData: jest.fn() } }));
+jest.mock('hooks', () => ({
+  reduxHooks: { useCardCreditData: jest.fn(), useMasqueradeData: jest.fn() },
+}));
 jest.mock('./components/CreditContent', () => 'CreditContent');
 jest.mock('./components/ProviderLink', () => 'ProviderLink');
 
@@ -17,7 +19,11 @@ 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.useCardCreditData.mockReturnValue({
+  providerName,
+  providerStatusUrl,
+});
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
 const render = () => {
   el = shallow(<PendingContent cardId={cardId} />);
@@ -40,7 +46,12 @@ describe('PendingContent component', () => {
         expect(component.props().action.href).toEqual(providerStatusUrl);
       });
       test('action.message is formatted requestCredit message', () => {
-        expect(component.props().action.message).toEqual(formatMessage(messages.viewDetails));
+        expect(component.props().action.message).toEqual(
+          formatMessage(messages.viewDetails),
+        );
+      });
+      test('action.disabled is false', () => {
+        expect(component.props().action.disabled).toEqual(false);
       });
       test('message is formatted pending message', () => {
         expect(component.props().message).toEqual(

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

@@ -13,7 +13,9 @@ export const CreditContent = ({ action, message, requestData }) => (
       <ActionRow className="mt-4">
         <Button
           as="a"
-          href={action.href}
+          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"
@@ -36,6 +38,7 @@ CreditContent.propTypes = {
     href: PropTypes.string,
     onClick: PropTypes.func,
     message: PropTypes.string,
+    disabled: PropTypes.bool,
   }),
   message: PropTypes.node.isRequired,
   requestData: PropTypes.shape({

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

@@ -8,6 +8,7 @@ const action = {
   href: 'test-action-href',
   onClick: jest.fn().mockName('test-action-onClick'),
   message: 'test-action-message',
+  disabled: false,
 };
 
 const message = 'test-message';
@@ -27,6 +28,7 @@ describe('CreditContent component', () => {
         const buttonEl = el.find('ActionRow Button');
         expect(buttonEl.props().href).toEqual(action.href);
         expect(buttonEl.props().onClick).toEqual(action.onClick);
+        expect(buttonEl.props().disabled).toEqual(action.disabled);
         expect(buttonEl.text()).toEqual(action.message);
       });
       it('loads message into credit-msg div', () => {
@@ -35,6 +37,10 @@ describe('CreditContent component', () => {
       it('loads CreditRequestForm with passed requestData', () => {
         expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData);
       });
+      test('disables action button when action.disabled is true', () => {
+        el.setProps({ action: { ...action, disabled: true } });
+        expect(el.find('ActionRow Button').props().disabled).toEqual(true);
+      });
     });
     describe('without action', () => {
       test('snapshot', () => {

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

@@ -13,6 +13,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
     <Button
       as="a"
       className="border-gray-400"
+      disabled={false}
       href="test-action-href"
       onClick={[MockFunction test-action-onClick]}
       rel="noopener"