Bw/fix email modal (#193)

src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx

@@ -8,7 +8,6 @@ import { Dropdown } from '@edx/paragon';
 
 import track from 'tracking';
 import { reduxHooks } from 'hooks';
-import { useEmailSettings } from './hooks';
 
 import messages from './messages';
 
@@ -16,11 +15,9 @@ export const testIds = StrictDict({
   emailSettingsModalToggle: 'emailSettingsModalToggle',
 });
 
-export const SocialShareMenu = ({ cardId }) => {
+export const SocialShareMenu = ({ cardId, emailSettings }) => {
   const { formatMessage } = useIntl();
 
-  const emailSettingsModal = useEmailSettings();
-
   const { courseName } = reduxHooks.useCardCourseData(cardId);
   const { isEmailEnabled, isExecEd2UCourse } = reduxHooks.useCardEnrollmentData(cardId);
   const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
@@ -38,7 +35,7 @@ export const SocialShareMenu = ({ cardId }) => {
       {isEmailEnabled && (
         <Dropdown.Item
           disabled={isMasquerading}
-          onClick={emailSettingsModal.show}
+          onClick={emailSettings.show}
           data-testid={testIds.emailSettingsModalToggle}
         >
           {formatMessage(messages.emailSettings)}
@@ -77,6 +74,9 @@ export const SocialShareMenu = ({ cardId }) => {
 };
 SocialShareMenu.propTypes = {
   cardId: PropTypes.string.isRequired,
+  emailSettings: PropTypes.shape({
+    show: PropTypes.func,
+  }).isRequired,
 };
 
 export default SocialShareMenu;

src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx

@@ -39,14 +39,11 @@ jest.mock('./hooks', () => ({
   useEmailSettings: jest.fn(),
 }));
 
-const emailSettings = {
-  isVisible: false,
-  show: jest.fn().mockName('emailSettingShow'),
-  hide: jest.fn().mockName('emailSettingHide'),
+const props = {
+  cardId: 'test-card-id',
+  emailSettings: { show: jest.fn() },
 };
 
-const props = { cardId: 'test-card-id' };
-
 const mockHook = (fn, returnValue, options = {}) => {
   if (options.isCardHook) {
     when(fn).calledWith(props.cardId).mockReturnValueOnce(returnValue);
@@ -71,7 +68,6 @@ const socialShare = {
 };
 
 const mockHooks = (returnVals = {}) => {
-  mockHook(useEmailSettings, emailSettings);
   mockHook(
     reduxHooks.useCardEnrollmentData,
     {
@@ -140,7 +136,7 @@ describe('SocialShareMenu', () => {
           });
         }
         test('show email settings modal on click', () => {
-          expect(loadToggle().props.onClick).toEqual(emailSettings.show);
+          expect(loadToggle().props.onClick).toEqual(props.emailSettings.show);
         });
       });
     };
@@ -188,7 +184,7 @@ describe('SocialShareMenu', () => {
           expect(loadToggle().props.disabled).toEqual(false);
         });
         test('show email settings modal on click', () => {
-          expect(loadToggle().props.onClick).toEqual(emailSettings.show);
+          expect(loadToggle().props.onClick).toEqual(props.emailSettings.show);
         });
       });
       testEmailSettingsDropdown();

src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap

@@ -16,6 +16,13 @@ exports[`CourseCardMenu render show dropdown hide unenroll item and disable emai
     <Dropdown.Menu>
       <SocialShareMenu
         cardId="test-card-id"
+        emailSettings={
+          Object {
+            "hide": [MockFunction emailSettingHide],
+            "isVisible": false,
+            "show": [MockFunction emailSettingShow],
+          }
+        }
       />
     </Dropdown.Menu>
   </Dropdown>
@@ -50,6 +57,13 @@ exports[`CourseCardMenu render show dropdown show unenroll and enable email snap
       </Dropdown.Item>
       <SocialShareMenu
         cardId="test-card-id"
+        emailSettings={
+          Object {
+            "hide": [MockFunction emailSettingHide],
+            "isVisible": false,
+            "show": [MockFunction emailSettingShow],
+          }
+        }
       />
     </Dropdown.Menu>
   </Dropdown>

src/containers/CourseCard/components/CourseCardMenu/index.jsx

@@ -26,7 +26,7 @@ export const testIds = StrictDict({
 export const CourseCardMenu = ({ cardId }) => {
   const { formatMessage } = useIntl();
 
-  const emailSettingsModal = useEmailSettings();
+  const emailSettings = useEmailSettings();
   const unenrollModal = useUnenrollData();
   const handleToggleDropdown = useHandleToggleDropdown(cardId);
   const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId);
@@ -58,7 +58,7 @@ export const CourseCardMenu = ({ cardId }) => {
               {formatMessage(messages.unenroll)}
             </Dropdown.Item>
           )}
-          <SocialShareMenu cardId={cardId} />
+          <SocialShareMenu cardId={cardId} emailSettings={emailSettings} />
         </Dropdown.Menu>
       </Dropdown>
       <UnenrollConfirmModal
@@ -68,8 +68,8 @@ export const CourseCardMenu = ({ cardId }) => {
       />
       {isEmailEnabled && (
         <EmailSettingsModal
-          show={emailSettingsModal.isVisible}
-          closeModal={emailSettingsModal.hide}
+          show={emailSettings.isVisible}
+          closeModal={emailSettings.hide}
           cardId={cardId}
         />
       )}

src/containers/CourseCard/components/CourseCardMenu/index.test.jsx

@@ -7,6 +7,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import EmailSettingsModal from 'containers/EmailSettingsModal';
 import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
 import { reduxHooks } from 'hooks';
+import SocialShareMenu from './SocialShareMenu';
 import * as hooks from './hooks';
 import CourseCardMenu, { testIds } from '.';
 
@@ -18,6 +19,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
 jest.mock('hooks', () => ({
   reduxHooks: { useMasqueradeData: jest.fn(), useCardEnrollmentData: jest.fn() },
 }));
+jest.mock('./SocialShareMenu', () => 'SocialShareMenu');
 jest.mock('./hooks', () => ({
   useEmailSettings: jest.fn(),
   useUnenrollData: jest.fn(),
@@ -122,6 +124,13 @@ describe('CourseCardMenu', () => {
         expect(modal.props.cardId).toEqual(props.cardId);
       });
     };
+    const testSocialShareMenu = () => {
+      it('displays SocialShareMenu with cardID and emailSettings', () => {
+        const menu = el.instance.findByType(SocialShareMenu)[0];
+        expect(menu.props.cardId).toEqual(props.cardId);
+        expect(menu.props.emailSettings).toEqual(emailSettings);
+      });
+    };
     describe('show dropdown', () => {
       describe('hide unenroll item and disable email', () => {
         beforeEach(() => {
@@ -132,6 +141,7 @@ describe('CourseCardMenu', () => {
           expect(el.snapshot).toMatchSnapshot();
         });
         testHandleToggle();
+        testSocialShareMenu();
         it('does not render unenroll modal toggle', () => {
           expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(0);
         });
@@ -154,6 +164,7 @@ describe('CourseCardMenu', () => {
           expect(el.snapshot).toMatchSnapshot();
         });
         testHandleToggle();
+        testSocialShareMenu();
         describe('unenroll modal toggle', () => {
           let toggle;
           describe('not masquerading', () => {

src/data/services/lms/fakeData/courses.js

@@ -761,10 +761,13 @@ export const compileCourseRunData = ({ courseName, ...data }, index) => {
     credit: {},
     ...data,
     certificate: genCertificateData(data.certificate),
-    enrollment: genEnrollmentData({ lastEnrolled, ...data.enrollment }),
+    enrollment: genEnrollmentData({
+      lastEnrolled,
+      ...getOption(emailOptions, index),
+      ...data.enrollment,
+    }),
     courseRun: genCourseRunData({
       ...data.courseRun,
-      ...getOption(emailOptions, index),
       courseId,
     }),
     course: {