@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,192 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,17 @@
+// 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

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

package/src/data/constants/files.js

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,21 @@
+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,
+};

package/src/data/constants/requests.js

@@ -0,0 +1,34 @@
+import { StrictDict } from '../../utils';
+
+export const RequestStates = StrictDict({
+  inactive: 'inactive',
+  pending: 'pending',
+  completed: 'completed',
+  failed: 'failed',
+});
+
+export const RequestKeys = StrictDict({
+  initialize: 'initialize',
+  refreshList: 'refreshList',
+  newEntitlementEnrollment: 'newEntitlementEnrollment',
+  leaveEntitlementEnrollment: 'leaveEntitlementEnrollment',
+  switchEntitlementSession: 'switchEntitlementSession',
+  unenrollFromCourse: 'unenrollFromCourse',
+  updateEmailSettings: 'updateEmailSettings',
+  enrollEntitlementSession: 'enrollEntitlementSession',
+  leaveEntitlementSession: 'leaveEntitlementSession',
+  recommendedCourses: 'recommendedCourses',
+});
+
+export const ErrorCodes = StrictDict({
+  missingParam: 'ERR_MISSING_PARAM',
+});
+
+export const ErrorStatuses = StrictDict({
+  badRequest: 400,
+  unauthorized: 401,
+  forbidden: 403,
+  notFound: 404,
+  conflict: 409,
+  serverError: 500,
+});

package/src/data/contexts/GlobalDataContext.jsx

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+const GlobalDataContext = createContext({
+  emailConfirmation: {
+    isNeeded: false,
+    sendEmailUrl: '',
+  },
+  platformSettings: {
+    courseSearchUrl: '',
+  },
+  setEmailConfirmation: null,
+  setPlatformSettings: null,
+});
+
+export default GlobalDataContext;

package/src/data/contexts/GlobalDataProvider.jsx

@@ -0,0 +1,23 @@
+import { useState, useMemo } from 'react';
+
+import GlobalDataContext from './GlobalDataContext';
+
+export default function GlobalDataProvider({ children }) {
+  const [emailConfirmation, setEmailConfirmation] = useState({ isNeeded: false, sendEmailUrl: '' });
+  const [platformSettings, setPlatformSettings] = useState({ courseSearchUrl: '' });
+
+  const value = useMemo(() => ({
+    emailConfirmation,
+    platformSettings,
+    setEmailConfirmation,
+    setPlatformSettings,
+  }), [emailConfirmation, platformSettings]);
+
+  return (
+    <GlobalDataContext.Provider value={value}>
+      {children}
+    </GlobalDataContext.Provider>
+  );
+}
+
+

package/src/data/contexts/MasqueradeUserContext.jsx

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+const MasqueradeUserContext = createContext({
+  masqueradeUser: undefined,
+  masqueradeIsSuccess: undefined,
+  masqueradeIsPending: undefined,
+  masqueradeIsError: undefined,
+  masqueradeError: undefined,
+  setMasqueradeUser: undefined,
+  setMasqueradeIsSuccess: undefined,
+  setMasqueradeIsPending: undefined,
+  setMasqueradeIsError: undefined,
+  setMasqueradeError: undefined,
+});
+
+export default MasqueradeUserContext;

package/src/data/contexts/MasqueradeUserProvider.jsx

@@ -0,0 +1,31 @@
+import { useState, useMemo } from 'react';
+
+import MasqueradeUserContext from './MasqueradeUserContext';
+
+export default function MasqueradeUserProvider({ children }) {
+  const [masqueradeUser, setMasqueradeUser] = useState(null);
+  const [masqueradeIsSuccess, setMasqueradeIsSuccess] = useState(false);
+  const [masqueradeIsPending, setMasqueradeIsPending] = useState(false);
+  const [masqueradeIsError, setMasqueradeIsError] = useState(false);
+  const [masqueradeError, setMasqueradeError] = useState(null);
+
+  const value = useMemo(() => ({
+    masqueradeUser,
+    masqueradeIsPending,
+    masqueradeIsSuccess,
+    masqueradeIsError,
+    masqueradeError,
+    setMasqueradeUser,
+    setMasqueradeIsPending,
+    setMasqueradeIsSuccess,
+    setMasqueradeIsError,
+    setMasqueradeError,
+  }), [masqueradeUser, masqueradeIsSuccess, masqueradeIsPending, masqueradeIsError, masqueradeError]);
+
+  return (
+    <MasqueradeUserContext.Provider value={value}>
+      {children}
+    </MasqueradeUserContext.Provider>
+  );
+}
+

package/src/data/redux/app/index.js

@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducer';
+export { default as selectors } from './selectors';