fix: MailToLink to account for no emails (#230)

Author: justinhynes

src/components/EmailLink.jsx

@@ -26,17 +26,14 @@ export const CertificateBanner = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const formatDate = useFormatDate();
 
-  const emailLink = address => address && <MailtoLink to={address}>{address}</MailtoLink>;
+  const emailLink = address => <MailtoLink to={address}>{address}</MailtoLink>;
 
   if (certificate.isRestricted) {
     return (
       <Banner variant="danger">
-        {formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) })}
+        { supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
         {isVerified && '  '}
-        {isVerified && formatMessage(
-          messages.certRefundContactBilling,
-          { billingEmail: emailLink(billingEmail) },
-        )}
+        {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
       </Banner>
     );
   }

src/components/EmailLink.test.jsx

@@ -21,10 +21,6 @@ jest.mock('components/Banner', () => 'Banner');
 
 describe('CertificateBanner', () => {
   const props = { cardId: 'cardId' };
-  reduxHooks.usePlatformSettingsData.mockReturnValue({
-    supportEmail: 'suport@email',
-    billingEmail: 'billing@email',
-  });
   reduxHooks.useCardCourseRunData.mockReturnValue({
     minPassingGrade: 0.8,
     progressUrl: 'progressUrl',
@@ -42,16 +38,19 @@ describe('CertificateBanner', () => {
   };
   const defaultCourseRun = { isArchived: false };
   const defaultGrade = { isPassing: false };
+  const defaultPlatformSettings = {};
   const createWrapper = ({
     certificate = {},
     enrollment = {},
     grade = {},
     courseRun = {},
+    platformSettings = {},
   }) => {
     reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
     reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
     reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
+    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
     return shallow(<CertificateBanner {...props} />);
   };
   /** TODO: Update tests to validate snapshots **/
@@ -64,6 +63,28 @@ describe('CertificateBanner', () => {
       });
       expect(wrapper).toMatchSnapshot();
     });
+    test('is restricted with support email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is restricted with billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
     test('is restricted and verified', () => {
       const wrapper = createWrapper({
         certificate: {
@@ -75,6 +96,49 @@ describe('CertificateBanner', () => {
       });
       expect(wrapper).toMatchSnapshot();
     });
+    test('is restricted and verified with support email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is restricted and verified with billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is restricted and verified with support and billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
     test('is passing and is downloadable', () => {
       const wrapper = createWrapper({
         grade: { isPassing: true },
@@ -133,6 +197,10 @@ describe('CertificateBanner', () => {
         certificate: {
           isRestricted: true,
         },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
       });
       const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
       expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
@@ -146,6 +214,10 @@ describe('CertificateBanner', () => {
         enrollment: {
           isVerified: true,
         },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
       });
       const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
       expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);

src/components/__snapshots__/EmailLink.test.jsx.snap

@@ -17,9 +17,11 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
       }
       values={
         Object {
-          "supportEmailLink": <EmailLink
-            address="test-support-email"
-          />,
+          "supportEmailLink": <MailtoLink
+            to="test-support-email"
+          >
+            test-support-email
+          </MailtoLink>,
         }
       }
     />
@@ -30,6 +32,21 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
 </Banner>
 `;
 
+exports[`CreditBanner component render with error state with no email snapshot 1`] = `
+<Banner
+  variant="danger"
+>
+  <p
+    className="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

src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import Banner from 'components/Banner';
-import EmailLink from 'components/EmailLink';
 
+import { MailtoLink } from '@edx/paragon';
 import hooks from './hooks';
 import messages from './messages';
 
@@ -15,13 +15,14 @@ export const CreditBanner = ({ cardId }) => {
   if (hookData === null) {
     return null;
   }
+
   const { ContentComponent, error, supportEmail } = hookData;
-  const supportEmailLink = (<EmailLink address={supportEmail} />);
+  const supportEmailLink = (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>);
   return (
     <Banner {...(error && { variant: 'danger' })}>
       {error && (
         <p className="credit-error-msg">
-          {formatMessage(messages.error, { supportEmailLink })}
+          {supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}
         </p>
       )}
       <ContentComponent cardId={cardId} />

src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx

@@ -2,15 +2,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { formatMessage } from 'testUtils';
-
-import EmailLink from 'components/EmailLink';
+import { MailtoLink } from '@edx/paragon';
 
 import hooks from './hooks';
 import messages from './messages';
 import CreditBanner from '.';
 
 jest.mock('components/Banner', () => 'Banner');
-jest.mock('components/EmailLink', () => 'EmailLink');
 
 jest.mock('./hooks', () => ({
   useCreditBannerData: jest.fn(),
@@ -54,14 +52,33 @@ describe('CreditBanner component', () => {
       it('includes credit-error-msg with support email link', () => {
         expect(el.find('.credit-error-msg').containsMatchingElement(
           formatMessage(messages.error, {
-            supportEmailLink: (<EmailLink address={supportEmail} />),
+            supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
           }),
         )).toEqual(true);
       });
       it('loads ContentComponent with cardId', () => {
         expect(el.find('ContentComponent').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).toMatchSnapshot();
+      });
+      it('includes credit-error-msg without support email link', () => {
+        expect(el.find('.credit-error-msg').containsMatchingElement(
+          formatMessage(messages.errorNoEmail),
+        )).toEqual(true);
+      });
+    });
+
     describe('with no error state', () => {
       beforeEach(() => {
         hooks.useCreditBannerData.mockReturnValue({

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

@@ -6,6 +6,11 @@ export const messages = StrictDict({
     description: '',
     defaultMessage: 'An error occurred with this transaction.  For help, contact {supportEmailLink}.',
   },
+  errorNoEmail: {
+    id: 'learner-dash.courseCard.banners.credit.errorNoEmail',
+    description: '',
+    defaultMessage: 'An error occurred with this transaction.',
+  },
 });
 
 export default messages;