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

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,101 +0,0 @@
-import { apiHooks } from 'hooks';
-import { MockUseState } from 'testUtils';
-
-import * as reasons from './reasons';
-import * as hooks from '.';
-
-jest.mock('./reasons', () => ({
-  useUnenrollReasons: jest.fn(),
-}));
-
-jest.mock('hooks', () => ({
-  apiHooks: {
-    useInitializeApp: jest.fn(),
-  },
-}));
-
-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,
-  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 = () => hooks.useUnenrollData({ closeModal, cardId });
-
-  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', () => {
-      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 initializeApp api method', () => {
-        out.closeAndRefresh();
-        expect(initializeApp).toHaveBeenCalled();
-      });
-    });
-    describe('modalState', () => {
-      it('returns modalStates.finished if confirmed and submitted', () => {
-        state.mockVal(state.keys.confirmed, true);
-        reasons.useUnenrollReasons.mockReturnValueOnce({ ...mockReason, isSubmitted: true });
-        out = createUseUnenrollData();
-        expect(out.modalState).toEqual(hooks.modalStates.finished);
-      });
-      it('returns modalStates.reason if confirmed and not submitted', () => {
-        state.mockVal(state.keys.confirmed, true);
-        out = createUseUnenrollData();
-        expect(out.modalState).toEqual(hooks.modalStates.reason);
-      });
-      it('returns modalStates.confirm if not confirmed', () => {
-        state.mockVal(state.keys.confirmed, false);
-        out = createUseUnenrollData();
-        expect(out.modalState).toEqual(hooks.modalStates.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 'testUtils';
-import track from 'tracking';
-import {
-  apiHooks,
-  reduxHooks,
-  utilHooks,
-} from 'hooks';
-
-import * as hooks from './reasons';
-
-jest.mock('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;

package/src/containers/UnenrollConfirmModal/index.test.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { UnenrollConfirmModal } from '.';
-
-import * as hooks from './hooks';
-
-jest.mock('./components/ConfirmPane', () => 'ConfirmPane');
-jest.mock('./components/ReasonPane', () => 'ReasonPane');
-jest.mock('./components/FinishedPane', () => 'FinishedPane');
-
-jest.mock('./hooks', () => ({
-  __esModule: true,
-  modalStates: jest.requireActual('./hooks').modalStates,
-  useUnenrollData: jest.fn(),
-}));
-
-describe('UnenrollConfirmModal component', () => {
-  const hookProps = {
-    confirm: jest.fn().mockName('hooks.confirm'),
-    reason: {
-      isSkipped: false,
-      reasonProps: 'other',
-    },
-    close: jest.fn().mockName('hooks.close'),
-    closeAndRefresh: jest.fn().mockName('hooks.closeAndRefresh'),
-    modalState: hooks.modalStates.confirm,
-  };
-  const closeModal = jest.fn().mockName('closeModal');
-  const cardId = 'cardId';
-  const props = {
-    closeModal,
-    show: true,
-    cardId,
-  };
-  test('hooks called with closeModal and cardId', () => {
-    hooks.useUnenrollData.mockReturnValueOnce(hookProps);
-    shallow(<UnenrollConfirmModal {...props} />);
-    expect(hooks.useUnenrollData).toHaveBeenCalledWith({ closeModal, cardId });
-  });
-  test('snapshot: modalStates.confirm', () => {
-    hooks.useUnenrollData.mockReturnValueOnce(hookProps);
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('snapshot: modalStates.finished, reason given', () => {
-    hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.finished });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('snapshot: modalStates.finished, reason skipped', () => {
-    hooks.useUnenrollData.mockReturnValueOnce({
-      ...hookProps,
-      modalState: hooks.modalStates.finished,
-      isSkipped: true,
-    });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('snapshot: modalStates.reason, should be fullscreen with no shadow', () => {
-    hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.reason });
-    expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
-  });
-});

package/src/data/constants/app.js

@@ -1,20 +0,0 @@
-import { getSiteConfig } from '@openedx/frontend-base';
-import { StrictDict } from '../../utils';
-
-export const routePath = `${getSiteConfig().publicPath}:courseId`;
-export const locationId = window.location.pathname.slice(1);
-
-export const SortKeys = StrictDict({
-  enrolled: 'enrolled',
-  title: 'title',
-});
-
-export const FilterKeys = StrictDict({
-  inProgress: 'inProgress',
-  notStarted: 'notStarted',
-  done: 'done',
-  notEnrolled: 'notEnrolled',
-  upgraded: 'upgraded',
-});
-
-export const ListPageSize = 25;

package/src/data/constants/app.test.js

@@ -1,24 +0,0 @@
-import * as base from '@openedx/frontend-base';
-import * as constants from './app';
-
-jest.unmock('./app');
-
-jest.mock('@openedx/frontend-base', () => {
-  const PUBLIC_PATH = 'test-public-path';
-  return {
-    getSiteConfig: () => ({ PUBLIC_PATH }),
-    PUBLIC_PATH,
-  };
-});
-
-describe('app constants', () => {
-  test('route path draws from public path and adds courseId', () => {
-    expect(constants.routePath).toEqual(`${base.PUBLIC_PATH}:courseId`);
-  });
-  test('locationId returns trimmed pathname', () => {
-    const old = window.location;
-    window.location = { pathName: '/somePath.jpg' };
-    expect(constants.locationId).toEqual(window.location.pathname.slice(1));
-    window.location = old;
-  });
-});

package/src/data/constants/course.js

@@ -1,17 +0,0 @@
-// Constants related to courses
-export const COURSE_MODES = {
-  VERIFIED: 'verified',
-  PROFESSIONAL: 'professional',
-  NO_ID_PROFESSIONAL: 'no-id-professional',
-  AUDIT: 'audit',
-  HONOR: 'honor',
-  EXECUTIVE_EDUCATION: 'executive-education',
-  PAID_EXECUTIVE_EDUCATION: 'paid-executive-education',
-  UNPAID_EXECUTIVE_EDUCATION: 'unpaid-executive-education',
-};
-
-export const EXECUTIVE_EDUCATION_COURSE_MODES = [
-  COURSE_MODES.EXECUTIVE_EDUCATION,
-  COURSE_MODES.PAID_EXECUTIVE_EDUCATION,
-  COURSE_MODES.UNPAID_EXECUTIVE_EDUCATION,
-];

package/src/data/constants/credit.js

@@ -1,9 +0,0 @@
-import { StrictDict } from '../../utils';
-
-export const requestStatuses = StrictDict({
-  pending: 'pending',
-  approved: 'approved',
-  rejected: 'rejected',
-});
-
-export default { requestStatuses };

package/src/data/constants/files.js

@@ -1,20 +0,0 @@
-import { StrictDict } from 'utils';
-
-export const FileTypes = StrictDict({
-  pdf: 'pdf',
-  jpg: 'jpg',
-  jpeg: 'jpeg',
-  png: 'png',
-  bmp: 'bmp',
-  txt: 'txt',
-  gif: 'gif',
-  jfif: 'jfif',
-  pjpeg: 'pjpeg',
-  pjp: 'pjp',
-  svg: 'svg',
-});
-
-export const downloadSingleLimit = 1610612736; // 1.5GB
-export const downloadAllLimit = 10737418240; // 10GB
-
-export default FileTypes;

package/src/data/constants/htmlKeys.js

@@ -1,21 +0,0 @@
-import { StrictDict } from 'utils';
-
-export const buttonStates = StrictDict({
-  default: 'default',
-  pending: 'pending',
-  error: 'error',
-});
-
-export const htmlProps = StrictDict({
-  disabled: 'disabled',
-  href: 'href',
-  onClick: 'onClick',
-  onChange: 'onChange',
-  onBlur: 'onBlur',
-  size: 'size',
-});
-
-export default {
-  buttonStates,
-  htmlProps,
-};