fix: design improvements and unit tests

Author: mubbsharanwar

src/containers/UnenrollConfirmModal/components/ConfirmPane.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { reduxHooks } from 'hooks';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -10,14 +11,17 @@ import {
 import messages from './messages';
 
 export const ConfirmPane = ({
+  cardId,
   handleClose,
   handleConfirm,
 }) => {
   const { formatMessage } = useIntl();
+  const { courseName } = reduxHooks.useCardCourseData(cardId);
+  const courseTitle = <span className="font-italic">“{courseName}”</span>;
   return (
     <>
       <h4>{formatMessage(messages.confirmHeader)}</h4>
-      <p className="py-2">{formatMessage(messages.confirmText)}</p>
+      <p className="py-2">{formatMessage(messages.confirmText, { courseTitle })}</p>
       <ActionRow>
         <Button variant="tertiary" onClick={handleClose}>
           {formatMessage(messages.confirmCancel)}
@@ -32,6 +36,7 @@ export const ConfirmPane = ({
 ConfirmPane.propTypes = {
   handleClose: PropTypes.func.isRequired,
   handleConfirm: PropTypes.func.isRequired,
+  cardId: PropTypes.string.isRequired,
 };
 
 export default ConfirmPane;

src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx

@@ -6,6 +6,7 @@ import { ConfirmPane } from './ConfirmPane';
 import messages from './messages';
 
 const props = {
+  cardId: 'cardId',
   handleClose: jest.fn().mockName('props.handleClose'),
   handleConfirm: jest.fn().mockName('props.handleConfirm'),
 };

src/containers/UnenrollConfirmModal/components/FinishedPane.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { reduxHooks } from 'hooks';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -10,16 +11,18 @@ import {
 import messages from './messages';
 
 export const FinishedPane = ({
-  gaveReason,
+  cardId,
   handleClose,
 }) => {
   const { formatMessage } = useIntl();
+  const { courseName } = reduxHooks.useCardCourseData(cardId);
+  const courseTitle = <span className="font-italic">“{courseName}”</span>;
+
   return (
     <>
       <h4>{formatMessage(messages.finishHeading)}</h4>
       <p>
-        {gaveReason && formatMessage(messages.finishThanksText)}
-        {formatMessage(messages.finishText)}
+        {formatMessage(messages.finishText, { courseTitle })}
       </p>
       <ActionRow>
         <Button onClick={handleClose}>{formatMessage(messages.finishReturn)}</Button>
@@ -29,7 +32,7 @@ export const FinishedPane = ({
 };
 FinishedPane.propTypes = {
   handleClose: PropTypes.func.isRequired,
-  gaveReason: PropTypes.bool.isRequired,
+  cardId: PropTypes.string.isRequired,
 };
 
 export default FinishedPane;

src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx

@@ -6,7 +6,7 @@ import { FinishedPane } from './FinishedPane';
 import messages from './messages';
 
 const props = {
-  gaveReason: true,
+  cardId: 'cardId',
   handleClose: jest.fn().mockName('props.handleClose'),
 };
 
@@ -25,22 +25,8 @@ describe('UnenrollConfirmModal FinishedPane', () => {
       expect(returnButton).toBeInTheDocument();
     });
     it('Gave reason, display thanks message', () => {
-      const thanksMsg = screen.getByText((text) => text.includes('Thank you'));
+      const thanksMsg = screen.getByText((text) => text.includes('Unenrollment Successful'));
       expect(thanksMsg).toBeInTheDocument();
-      expect(thanksMsg.innerHTML).toContain(formatMessage(messages.finishThanksText));
-    });
-  });
-  describe('Did not give reason', () => {
-    it('Does not display thanks message', () => {
-      const customProps = {
-        gaveReason: false,
-        handleClose: jest.fn().mockName('props.handleClose'),
-      };
-      render(<IntlProvider locale="en"><FinishedPane {...customProps} /></IntlProvider>);
-      const thanksMsg = screen.queryByText((text) => text.includes('Thank you'));
-      expect(thanksMsg).toBeNull();
-      const finishMsg = screen.getByText(formatMessage(messages.finishText));
-      expect(finishMsg).toBeInTheDocument();
     });
   });
 });

src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx

@@ -28,11 +28,11 @@ describe('UnenrollConfirmModal ReasonPane', () => {
     render(<IntlProvider locale="en"><ReasonPane {...props} /></IntlProvider>);
     const radioButtons = screen.getAllByRole('radio');
     expect(radioButtons).toBeDefined();
-    expect(radioButtons.length).toBe(10);
+    expect(radioButtons.length).toBe(11);
   });
-  it('render skip button', () => {
+  it('render cancel button', () => {
     render(<IntlProvider locale="en"><ReasonPane {...props} hasReason={false} /></IntlProvider>);
-    const skipButton = screen.getByRole('button', { name: formatMessage(messages.reasonSkip) });
+    const skipButton = screen.getByRole('button', { name: formatMessage(messages.confirmCancel) });
     expect(skipButton).toBeInTheDocument();
   });
   it('render submit button', () => {

src/containers/UnenrollConfirmModal/components/messages.js

@@ -10,7 +10,7 @@ const messages = defineMessages({
   confirmText: {
     id: 'learner-dash.unenrollConfirm.confirm.text',
     description: 'Text for confirm unenroll modal',
-    defaultMessage: 'Are you sure you want to unenroll from the course ?',
+    defaultMessage: 'Are you sure you want to unenroll from the course {courseTitle} ?',
   },
   confirmCancel: {
     id: 'learner-dash.unenrollConfirm.confirm.cancel',
@@ -25,7 +25,7 @@ const messages = defineMessages({
   reasonHeading: {
     id: 'learner-dash.unenrollConfirm.confirm.reason.heading',
     description: 'Heading for unenroll reason modal',
-    defaultMessage: `What's your main reason for unenrolling?`,
+    defaultMessage: `Why are you unenrolling?`,
   },
   reasonSkip: {
     id: 'learner-dash.unenrollConfirm.confirm.reason.skip',
@@ -40,22 +40,17 @@ const messages = defineMessages({
   finishHeading: {
     id: 'learner-dash.unenrollConfirm.confirm.finish.heading',
     description: 'Heading for unenroll finish modal',
-    defaultMessage: 'You are unenrolled',
-  },
-  finishThanksText: {
-    id: 'learner-dash.unenrollConfirm.confirm.finish.thanks-text',
-    description: 'Thank you message on unenroll modal for providing a reason',
-    defaultMessage: 'Thank you for sharing your reason for unenrolling.  ',
+    defaultMessage: 'Unenrollment Successful',
   },
   finishText: {
     id: 'learner-dash.unenrollConfirm.confirm.finish.text',
     description: 'Text for unenroll finish modal',
-    defaultMessage: 'This course will be removed from your dashboard.',
+    defaultMessage: 'You have been unenrolled from the course {courseTitle}',
   },
   finishReturn: {
     id: 'learner-dash.unenrollConfirm.confirm.finish.return',
     description: 'Return action for unenroll finish modal',
-    defaultMessage: 'Return to dashboard',
+    defaultMessage: 'Ok',
   },
 });
 

src/containers/UnenrollConfirmModal/index.jsx

@@ -38,10 +38,10 @@ export const UnenrollConfirmModal = ({
         style={{ textAlign: 'start' }}
       >
         {(modalState === modalStates.confirm) && (
-          <ConfirmPane handleClose={close} handleConfirm={confirm} />
+          <ConfirmPane handleClose={close} handleConfirm={confirm} cardId={cardId} />
         )}
         {(modalState === modalStates.finished) && (
-          <FinishedPane handleClose={closeAndRefresh} gaveReason={reason.hasReason} />
+          <FinishedPane handleClose={closeAndRefresh} cardId={cardId} />
         )}
         {(modalState === modalStates.reason) && (
           <ReasonPane reason={reason} handleClose={close} />

src/containers/UnenrollConfirmModal/index.test.jsx

@@ -48,22 +48,20 @@ describe('UnenrollConfirmModal component', () => {
     render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
     const finishHeading = screen.getByText(formatMessage(messages.finishHeading));
     expect(finishHeading).toBeInTheDocument();
-    const thanksMsg = screen.getByText((text) => text.includes('Thank you'));
-    expect(thanksMsg).toBeInTheDocument();
-    expect(thanksMsg.innerHTML).toContain(formatMessage(messages.finishThanksText));
+    const finishMsg = screen.getByText((text) => text.includes('You have been unenrolled from the course'));
+    expect(finishMsg).toBeInTheDocument();
   });
-  it('modalStates.finished, reason skipped', () => {
+  it('modalStates.finished, cancel unenrollment', () => {
     hooks.useUnenrollData.mockReturnValueOnce({
       ...hookProps,
       modalState: hooks.modalStates.finished,
-      reason: { isSkipped: true },
     });
     render(<IntlProvider><UnenrollConfirmModal {...props} /></IntlProvider>);
     const finishHeading = screen.getByText(formatMessage(messages.finishHeading));
     expect(finishHeading).toBeInTheDocument();
-    const thanksMsg = screen.queryByText((text) => text.includes('Thank you'));
-    expect(thanksMsg).toBeNull();
-    const finishMsg = screen.getByText(formatMessage(messages.finishText));
+    const okButton = screen.queryByText((text) => text.includes('Ok'));
+    expect(okButton).toBeInTheDocument();
+    const finishMsg = screen.queryByText('You have been unenrolled from the course');
     expect(finishMsg).toBeInTheDocument();
   });
   it('modalStates.reason, should display correct component with no shadow', () => {