@openedx/frontend-app-learner-dashboard 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/containers/UnenrollConfirmModal/components/messages.js

@@ -1,56 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  confirmHeader: {
-    id: 'learner-dash.unenrollConfirm.confirm.header',
-    description: 'Header for confirm unenroll modal',
-    defaultMessage: 'Unenroll from course?',
-  },
-  confirmCancel: {
-    id: 'learner-dash.unenrollConfirm.confirm.cancel',
-    description: 'Cancel action for confirm unenroll modal',
-    defaultMessage: 'Never mind',
-  },
-  confirmUnenroll: {
-    id: 'learner-dash.unenrollConfirm.confirm.unenroll',
-    description: 'Confirm action for confirm unenroll modal',
-    defaultMessage: 'Unenroll',
-  },
-  reasonHeading: {
-    id: 'learner-dash.unenrollConfirm.confirm.reason.heading',
-    description: 'Heading for unenroll reason modal',
-    defaultMessage: `What's your main reason for unenrolling?`,
-  },
-  reasonSkip: {
-    id: 'learner-dash.unenrollConfirm.confirm.reason.skip',
-    description: 'Skip action for unenroll reason modal',
-    defaultMessage: 'Skip survey',
-  },
-  reasonSubmit: {
-    id: 'learner-dash.unenrollConfirm.confirm.reason.submit',
-    description: 'Submit action for unenroll reason modal',
-    defaultMessage: 'Submit reason',
-  },
-  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.  ',
-  },
-  finishText: {
-    id: 'learner-dash.unenrollConfirm.confirm.finish.text',
-    description: 'Text for unenroll finish modal',
-    defaultMessage: 'This course will be removed from your dashboard.',
-  },
-  finishReturn: {
-    id: 'learner-dash.unenrollConfirm.confirm.finish.return',
-    description: 'Return action for unenroll finish modal',
-    defaultMessage: 'Return to dashboard',
-  },
-});
-
-export default messages;

package/src/containers/UnenrollConfirmModal/constants.js

@@ -1,86 +0,0 @@
-import { StrictDict } from '../../utils';
-import { defineMessages } from '@openedx/frontend-base';
-
-export const reasonKeys = StrictDict({
-  prereqs: 'prereqs',
-  difficulty: 'difficulty',
-  goals: 'goals',
-  broken: 'broken',
-  time: 'time',
-  browse: 'browse',
-  support: 'support',
-  quality: 'quality',
-  easy: 'easy',
-  custom: 'custom',
-});
-
-export const order = [
-  reasonKeys.prereqs,
-  reasonKeys.difficulty,
-  reasonKeys.goals,
-  reasonKeys.broken,
-  reasonKeys.time,
-  reasonKeys.browse,
-  reasonKeys.support,
-  reasonKeys.quality,
-  reasonKeys.easy,
-];
-
-const messages = defineMessages({
-  [reasonKeys.prereqs]: {
-    id: 'learner-dash.unenrollConfirm.reasons.prereqs',
-    description: 'Unenroll reason option - missing prerequisites',
-    defaultMessage: `I don't have the academic or language prerequisites`,
-  },
-  [reasonKeys.difficulty]: {
-    id: 'learner-dash.unenrollConfirm.reasons.difficulty',
-    description: 'Unenroll reason option - material is too hard',
-    defaultMessage: 'The course material was too hard',
-  },
-  [reasonKeys.goals]: {
-    id: 'learner-dash.unenrollConfirm.reasons.goals',
-    description: 'Unenroll reason option - goals-related',
-    defaultMessage: `This won't help me reach my goals`,
-  },
-  [reasonKeys.broken]: {
-    id: 'learner-dash.unenrollConfirm.reasons.broken',
-    description: 'Unenroll reason option - something broken',
-    defaultMessage: 'Something was broken',
-  },
-  [reasonKeys.time]: {
-    id: 'learner-dash.unenrollConfirm.reasons.time',
-    description: 'Unenroll reason option - time-related',
-    defaultMessage: `I don't have the time`,
-  },
-  [reasonKeys.browse]: {
-    id: 'learner-dash.unenrollConfirm.reasons.browse',
-    description: 'Unenroll reason option - wanted to browse',
-    defaultMessage: 'I just wanted to browse the material',
-  },
-  [reasonKeys.support]: {
-    id: 'learner-dash.unenrollConfirm.reasons.support',
-    description: 'Unenroll reason option - lacking support',
-    defaultMessage: `I don't have enough support`,
-  },
-  [reasonKeys.quality]: {
-    id: 'learner-dash.unenrollConfirm.reasons.quality',
-    description: 'Unenroll reason option - quality-related',
-    defaultMessage: 'I am not happy with the quality of the content',
-  },
-  [reasonKeys.easy]: {
-    id: 'learner-dash.unenrollConfirm.reasons.easy',
-    description: 'Unenroll reason option - too easy',
-    defaultMessage: 'The course material was too easy',
-  },
-  customPlaceholder: {
-    id: 'learner-dash.unenrollConfirm.reasons.custom-placeholder',
-    description: 'Unenroll custom reason option placeholder text',
-    defaultMessage: 'Other',
-  },
-});
-
-export default {
-  messages,
-  order,
-  reasonKeys,
-};

package/src/containers/UnenrollConfirmModal/hooks/index.js

@@ -1,55 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-
-import { RequestKeys } from '../../../data/constants/requests';
-import { StrictDict } from '../../../utils';
-
-import { useUnenrollReasons } from './reasons';
-import * as module from '.';
-
-export const state = StrictDict({
-  confirmed: (val) => useState(val), // eslint-disable-line
-});
-
-export const modalStates = StrictDict({
-  confirm: 'confirm',
-  reason: 'reason',
-  finished: 'finished',
-});
-
-export const useUnenrollData = ({ closeModal, cardId }) => {
-  const [isConfirmed, setIsConfirmed] = module.state.confirmed(false);
-  const confirm = () => setIsConfirmed(true);
-  const reason = useUnenrollReasons({ cardId });
-  const queryClient = useQueryClient();
-  const refreshList = () => queryClient.invalidateQueries({ queryKey: [RequestKeys.initialize] });
-
-  let modalState;
-  if (isConfirmed) {
-    modalState = (reason.isSubmitted || reason.isSkipped)
-      ? modalStates.finished : modalStates.reason;
-  } else {
-    modalState = modalStates.confirm;
-  }
-
-  const close = () => {
-    closeModal();
-    setIsConfirmed(false);
-    reason.handleClear();
-  };
-  const closeAndRefresh = () => {
-    refreshList();
-    close();
-  };
-
-  return {
-    isConfirmed,
-    confirm,
-    reason,
-    close,
-    closeAndRefresh,
-    modalState,
-  };
-};
-
-export default useUnenrollData;

package/src/containers/UnenrollConfirmModal/hooks/index.test.js

@@ -1,149 +0,0 @@
-import React from 'react';
-import { apiHooks } from '@src/hooks';
-import { MockUseState } from '@src/testUtils';
-import * as reasons from './reasons';
-import * as hooks from '.';
-import { renderHook } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-jest.mock('./reasons', () => ({
-  useUnenrollReasons: jest.fn(),
-}));
-jest.mock('../../../hooks', () => ({
-  apiHooks: {
-    useInitializeApp: jest.fn(),
-  },
-}));
-jest.mock('@tanstack/react-query', () => ({
-  useQueryClient: () => ({
-    invalidateQueries: jest.fn(),
-  }),
-  QueryClient: jest.fn().mockImplementation(() => ({
-    invalidateQueries: jest.fn(),
-  })),
-  QueryClientProvider: ({ children }) => children,
-}));
-
-const state = new MockUseState(hooks);
-const testValue = 'test-value';
-const initializeApp = jest.fn();
-apiHooks.useInitializeApp.mockReturnValue(initializeApp);
-
-let out;
-
-const mockReason = {
-  handleClear: jest.fn(),
-  isSubmitted: false,
-  isSkipped: false,
-  submittedReason: 'test-submitted-reason',
-};
-
-const useUnenrollReasons = jest.fn(() => mockReason);
-
-describe('UnenrollConfirmModal hooks', () => {
-  beforeEach(() => {
-    reasons.useUnenrollReasons.mockImplementation(useUnenrollReasons);
-  });
-  const closeModal = jest.fn();
-  const cardId = 'test-card-id';
-  const createUseUnenrollData = () => {
-    const queryClient = new QueryClient();
-    const { result } = renderHook(() => hooks.useUnenrollData({ closeModal, cardId }), {
-      wrapper: ({ children }) => (
-        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-      ),
-    });
-    return result.current;
-  };
-
-  describe('state fields', () => {
-    state.testGetter(state.keys.confirmed);
-  });
-  describe('modalHooks', () => {
-    beforeEach(() => {
-      state.mock();
-      state.mockVal(state.keys.confirmed, testValue);
-      out = createUseUnenrollData();
-    });
-    afterEach(() => {
-      state.restore();
-    });
-    test('isConfirmed is forwarded from state', () => {
-      expect(out.isConfirmed).toEqual(testValue);
-    });
-    test('confirm is callback that sets isConfirmed to true', () => {
-      out.confirm();
-      expect(state.setState.confirmed).toHaveBeenCalledWith(true);
-    });
-    test('reason returns useUnenrollReasons output', () => {
-      expect(out.reason).toEqual(mockReason);
-    });
-    describe('close', () => {
-      it('calls closeModal, sets isConfirmed to false, and calls reason.handleClear', () => {
-        out.close();
-        expect(closeModal).toHaveBeenCalled();
-        expect(state.setState.confirmed).toHaveBeenCalledWith(false);
-        expect(mockReason.handleClear).toHaveBeenCalled();
-      });
-    });
-    describe('closeAndRefresh', () => {
-      beforeEach(() => {
-        apiHooks.useInitializeApp.mockClear();
-      });
-      it('calls closeModal, sets isConfirmed to false, and calls reason.handleClear', () => {
-        out.closeAndRefresh();
-        expect(closeModal).toHaveBeenCalled();
-        expect(state.setState.confirmed).toHaveBeenCalledWith(false);
-        expect(mockReason.handleClear).toHaveBeenCalled();
-      });
-      it('calls refreshList and close', () => {
-        const refreshList = jest.fn();
-        const close = jest.fn();
-
-        jest.spyOn(hooks, 'useUnenrollData').mockReturnValue({
-          closeAndRefresh: () => {
-            refreshList();
-            close();
-          },
-          refreshList,
-          close,
-        });
-
-        out = hooks.useUnenrollData({ closeModal, cardId });
-        out.closeAndRefresh();
-        expect(refreshList).toHaveBeenCalled();
-        expect(close).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('modalState', () => {
-    // Helper function to compute modalState based on the same logic as the actual hook
-    const getModalState = (isConfirmed, reason) => {
-      if (isConfirmed) {
-        return (reason.isSubmitted || reason.isSkipped) ? 'finished' : 'reason';
-      }
-      return 'confirm';
-    };
-
-    test('should return finished when confirmed and submitted', () => {
-      const result = getModalState(true, { isSubmitted: true, isSkipped: false });
-      expect(result).toEqual('finished');
-    });
-
-    test('should return finished when confirmed and skipped', () => {
-      const result = getModalState(true, { isSubmitted: false, isSkipped: true });
-      expect(result).toEqual('finished');
-    });
-
-    test('should return reason when confirmed but not submitted or skipped', () => {
-      const result = getModalState(true, { isSubmitted: false, isSkipped: false });
-      expect(result).toEqual('reason');
-    });
-
-    test('should return confirm when not confirmed', () => {
-      const result = getModalState(false, { isSubmitted: false, isSkipped: false });
-      expect(result).toEqual('confirm');
-    });
-  });
-});

package/src/containers/UnenrollConfirmModal/hooks/reasons.js

@@ -1,79 +0,0 @@
-import React from 'react';
-
-import {
-  apiHooks,
-  reduxHooks,
-  utilHooks,
-} from '../../../hooks';
-import { StrictDict } from '../../../utils';
-import track from '../../../tracking';
-
-import * as module from './reasons';
-
-export const state = StrictDict({
-  customOption: (val) => React.useState(val), // eslint-disable-line
-  isSkipped: (val) => React.useState(val), // eslint-disable-line
-  selectedReason: (val) => React.useState(val), // eslint-disable-line
-  isSubmitted: (val) => React.useState(val), //eslint-disable-line
-});
-
-export const useUnenrollReasons = ({
-  cardId,
-}) => {
-  // The selected option element from the menu
-  const [selectedReason, setSelectedReason] = module.state.selectedReason(null);
-  // Custom option element entry value
-  const [customOption, setCustomOption] = module.state.customOption('');
-
-  // Did the user choose to skip selecting a reason?
-  const [isSkipped, setIsSkipped] = module.state.isSkipped(false);
-  // Did the user submit an unenrollment reason
-  const [isSubmitted, setIsSubmitted] = module.state.isSubmitted(false);
-
-  const { isEntitlement } = reduxHooks.useCardEntitlementData(cardId);
-
-  const submittedReason = selectedReason === 'custom' ? customOption : selectedReason;
-  const hasReason = ![null, ''].includes(submittedReason);
-
-  const handleTrackReasons = reduxHooks.useTrackCourseEvent(
-    track.engagement.unenrollReason,
-    cardId,
-    submittedReason,
-    isEntitlement,
-  );
-
-  const unenrollFromCourse = apiHooks.useUnenrollFromCourse(cardId);
-
-  const handleClear = () => {
-    setSelectedReason(null);
-    setCustomOption('');
-    setIsSkipped(false);
-    setIsSubmitted(false);
-  };
-
-  const handleSkip = () => {
-    setIsSkipped(true);
-    unenrollFromCourse();
-  };
-
-  const handleSubmit = (e) => {
-    handleTrackReasons(e);
-    setIsSubmitted(true);
-    unenrollFromCourse();
-  };
-
-  const handleCustomOptionChange = utilHooks.useValueCallback(setCustomOption);
-  const handleSelectOption = utilHooks.useValueCallback(setSelectedReason);
-
-  return {
-    customOption: { value: customOption, onChange: handleCustomOptionChange },
-    handleClear,
-    handleSkip,
-    handleSubmit,
-    hasReason,
-    isSkipped,
-    isSubmitted,
-    selectOption: handleSelectOption,
-    submittedReason,
-  };
-};

package/src/containers/UnenrollConfirmModal/hooks/reasons.test.js

@@ -1,192 +0,0 @@
-import { MockUseState } from '@src/testUtils';
-import track from '@src/tracking';
-import {
-  apiHooks,
-  reduxHooks,
-  utilHooks,
-} from '@src/hooks';
-
-import * as hooks from './reasons';
-
-jest.mock('@src/hooks', () => ({
-  apiHooks: {
-    useUnenrollFromCourse: jest.fn((...args) => ({ unenrollFromCourse: args })),
-  },
-  reduxHooks: {
-    useCardEntitlementData: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
-  },
-  utilHooks: {
-    useValueCallback: jest.fn((cb, prereqs) => ({ useValueCallback: { cb, prereqs } })),
-  },
-}));
-
-const state = new MockUseState(hooks);
-const testValue = 'test-value';
-const testValue2 = 'test-value2';
-const unenrollFromCourse = jest.fn((...args) => ({ unenrollFromCourse: args }));
-const trackCourseEvent = jest.fn((e) => ({ courseEvent: e }));
-apiHooks.useUnenrollFromCourse.mockReturnValue(unenrollFromCourse);
-reduxHooks.useTrackCourseEvent.mockReturnValue(trackCourseEvent);
-let out;
-
-const cardId = 'test-card-id';
-const loadHook = (isEntitlement = false) => {
-  reduxHooks.useCardEntitlementData.mockReturnValue({ isEntitlement });
-  out = hooks.useUnenrollReasons({ cardId });
-};
-
-describe('UnenrollConfirmModal reasons hooks', () => {
-  describe('state fields', () => {
-    state.testGetter(state.keys.customOption);
-    state.testGetter(state.keys.isSkipped);
-    state.testGetter(state.keys.isSubmitted);
-    state.testGetter(state.keys.selectedReason);
-  });
-  describe('useUnenrollReasons', () => {
-    beforeEach(() => {
-      jest.clearAllMocks();
-      state.mock();
-      loadHook();
-    });
-    afterEach(() => {
-      state.restore();
-    });
-    describe('behavior', () => {
-      describe('state fields', () => {
-        it('initializes selectedReason with null', () => {
-          state.expectInitializedWith(state.keys.selectedReason, null);
-        });
-        it('initializes customOption with empty string', () => {
-          state.expectInitializedWith(state.keys.customOption, '');
-        });
-        it('initializes isSkipped with false', () => {
-          state.expectInitializedWith(state.keys.isSkipped, false);
-        });
-        it('initializes isSubmitted with false', () => {
-          state.expectInitializedWith(state.keys.isSubmitted, false);
-        });
-      });
-      describe('useTrackCourseEvent inititalization', () => {
-        it('passes custom option if selectedReason is custom', () => {
-          state.mockVal(state.keys.selectedReason, 'custom');
-          state.mockVal(state.keys.customOption, testValue);
-          loadHook();
-          expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
-            track.engagement.unenrollReason,
-            cardId,
-            testValue,
-            false, // isEntitlement
-          );
-        });
-        it('passes selected reason if not custom', () => {
-          state.mockVal(state.keys.selectedReason, testValue2);
-          state.mockVal(state.keys.customOption, testValue);
-          loadHook(true);
-          expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
-            track.engagement.unenrollReason,
-            cardId,
-            testValue2,
-            true, // isEntitlement
-          );
-        });
-      });
-      it('initializes card entitlement data with cardId', () => {
-        expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
-      });
-      it('initializes unenerollFromCourse event with cardId', () => {
-        expect(apiHooks.useUnenrollFromCourse).toHaveBeenCalledWith(cardId);
-      });
-    });
-    describe('output', () => {
-      describe('customOption', () => {
-        test('customOption.value returns custom option', () => {
-          state.mockVal(state.keys.customOption, testValue);
-          loadHook();
-          expect(out.customOption.value).toEqual(testValue);
-        });
-        test('customOption.onChange returns valueCallback for setCustomOption', () => {
-          expect(out.customOption.onChange).toEqual(
-            utilHooks.useValueCallback(state.setState.customOption),
-          );
-        });
-      });
-      describe('hasReason', () => {
-        it('returns true if an option is selected other than custom', () => {
-          state.mockVal(state.keys.selectedReason, testValue);
-          loadHook();
-          expect(out.hasReason).toEqual(true);
-        });
-        it('returns true if custom option is selected and provided', () => {
-          state.mockVal(state.keys.selectedReason, 'custom');
-          state.mockVal(state.keys.customOption, testValue2);
-          loadHook();
-          expect(out.hasReason).toEqual(true);
-        });
-        it('returns false if no option is selected', () => {
-          state.mockVal(state.keys.selectedReason, null);
-          loadHook();
-          expect(out.hasReason).toEqual(false);
-        });
-        it('returns false if custom option is selcted but not provided', () => {
-          state.mockVal(state.keys.selectedReason, 'custom');
-          state.mockVal(state.keys.customOption, '');
-          loadHook();
-          expect(out.hasReason).toEqual(false);
-        });
-      });
-      describe('handleClear method', () => {
-        it('resets selected and submitted reasons, custom option and isSkipped', () => {
-          out.handleClear();
-          expect(state.setState.selectedReason).toHaveBeenCalledWith(null);
-          expect(state.setState.customOption).toHaveBeenCalledWith('');
-          expect(state.setState.isSkipped).toHaveBeenCalledWith(false);
-          expect(state.setState.isSubmitted).toHaveBeenCalledWith(false);
-        });
-      });
-      test('handleSkip sets isSkipped and isSubmitted, and unenrolls w/out a reason', () => {
-        out.handleSkip();
-        expect(state.setState.isSkipped).toHaveBeenCalledWith(true);
-        expect(unenrollFromCourse).toHaveBeenCalledWith();
-      });
-      describe('handleSubmit', () => {
-        it('tracks reason event and calls unenroll action', () => {
-          state.mockVal(state.keys.selectedReason, testValue);
-          loadHook();
-          expect(trackCourseEvent).not.toHaveBeenCalled();
-          const event = { test: 'event' };
-          out.handleSubmit(event);
-          expect(trackCourseEvent).toHaveBeenCalledWith(event);
-          expect(unenrollFromCourse).toHaveBeenCalledWith();
-        });
-      });
-      test('isSkipped returns state value', () => {
-        state.mockVal(state.keys.isSkipped, testValue);
-        loadHook();
-        expect(out.isSkipped).toEqual(testValue);
-      });
-      test('isSubmitted returns state value', () => {
-        state.mockVal(state.keys.isSubmitted, testValue);
-        loadHook();
-        expect(out.isSubmitted).toEqual(testValue);
-      });
-      test('selectedOption returns valueCallback for setSelectedReason', () => {
-        expect(out.selectOption).toEqual(
-          utilHooks.useValueCallback(state.setState.selectedReason),
-        );
-      });
-      describe('submittedReason', () => {
-        it('returns the selected reason unless is custom, then shows custom option', () => {
-          state.mockVal(state.keys.selectedReason, testValue);
-          state.mockVal(state.keys.customOption, testValue2);
-          loadHook();
-          expect(out.submittedReason).toEqual(testValue);
-          state.mockVal(state.keys.selectedReason, 'custom');
-          state.mockVal(state.keys.customOption, testValue2);
-          loadHook();
-          expect(out.submittedReason).toEqual(testValue2);
-        });
-      });
-    });
-  });
-});

package/src/containers/UnenrollConfirmModal/index.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { ModalDialog } from '@openedx/paragon';
-
-import { nullMethod } from '../../utils';
-
-import ConfirmPane from './components/ConfirmPane';
-import ReasonPane from './components/ReasonPane';
-import FinishedPane from './components/FinishedPane';
-
-import { useUnenrollData, modalStates } from './hooks';
-
-export const UnenrollConfirmModal = ({
-  closeModal,
-  show,
-  cardId,
-}) => {
-  const {
-    confirm,
-    reason,
-    closeAndRefresh,
-    close,
-    modalState,
-  } = useUnenrollData({ closeModal, cardId });
-  const showFullscreen = modalState === modalStates.reason;
-  return (
-    <ModalDialog
-      isOpen={show}
-      onClose={nullMethod}
-      hasCloseButton={false}
-      isFullscreenOnMobile={showFullscreen}
-      title=""
-    >
-      <div
-        className={classNames('bg-white p-3 rounded', { shadow: !showFullscreen })}
-        style={{ textAlign: 'start' }}
-      >
-        {(modalState === modalStates.confirm) && (
-          <ConfirmPane handleClose={close} handleConfirm={confirm} />
-        )}
-        {(modalState === modalStates.finished) && (
-          <FinishedPane handleClose={closeAndRefresh} gaveReason={!reason.isSkipped} />
-        )}
-        {(modalState === modalStates.reason) && (
-          <ReasonPane reason={reason} />
-        )}
-      </div>
-    </ModalDialog>
-  );
-};
-UnenrollConfirmModal.propTypes = {
-  closeModal: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired,
-  cardId: PropTypes.string.isRequired,
-};
-
-export default UnenrollConfirmModal;