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

package/src/containers/SelectSessionModal/constants.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const LEAVE_OPTION = 'leave';

package/src/containers/SelectSessionModal/hooks.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import { StrictDict } from '../../utils';
+import track from '../../tracking';
+import { reduxHooks, apiHooks } from '../../hooks';
+
+import { LEAVE_OPTION } from './constants';
+import messages from './messages';
+import * as module from './hooks';
+
+export const state = StrictDict({
+  selectedSession: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useSelectSessionModalData = () => {
+  const { formatMessage } = useIntl();
+
+  const selectedCardId = reduxHooks.useSelectSessionModalData().cardId;
+  const {
+    availableSessions,
+    isFulfilled,
+  } = reduxHooks.useCardEntitlementData(selectedCardId);
+  const { title: courseTitle } = reduxHooks.useCardCourseData(selectedCardId);
+  const { courseId } = reduxHooks.useCardCourseRunData(selectedCardId) || {};
+  const { isEnrolled } = reduxHooks.useCardEnrollmentData(selectedCardId);
+  const leaveEntitlementSession = apiHooks.useLeaveEntitlementSession(selectedCardId);
+  const switchEntitlementEnrollment = apiHooks.useSwitchEntitlementEnrollment(selectedCardId);
+  const newEntitlementEnrollment = apiHooks.useNewEntitlementEnrollment(selectedCardId);
+
+  const [selectedSession, setSelectedSession] = module.state.selectedSession(courseId || null);
+
+  let header;
+  let hint;
+  if (isFulfilled) {
+    header = formatMessage(messages.changeOrLeaveHeader);
+    hint = formatMessage(messages.changeOrLeaveHint);
+  } else {
+    header = formatMessage(messages.selectSessionHeader, { courseTitle });
+    hint = formatMessage(messages.selectSessionHint);
+  }
+  const closeSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(null);
+
+  const trackNewSession = track.entitlements.newSession(selectedSession);
+  const trackSwitchSession = track.entitlements.switchSession(selectedCardId, selectedSession);
+  const trackLeaveSession = track.entitlements.leaveSession(selectedCardId);
+
+  const handleSelection = ({ target: { value } }) => setSelectedSession(value);
+  const handleSubmit = () => {
+    if (selectedSession === LEAVE_OPTION) {
+      trackLeaveSession();
+      leaveEntitlementSession();
+    } else if (isEnrolled) {
+      trackSwitchSession();
+      switchEntitlementEnrollment(selectedSession);
+    } else {
+      trackNewSession();
+      newEntitlementEnrollment(selectedSession);
+    }
+    closeSessionModal();
+  };
+
+  return {
+    showModal: selectedCardId != null,
+    closeSessionModal,
+    showLeaveOption: isFulfilled,
+    availableSessions,
+    hint,
+    header,
+    selectedSession,
+    handleSelection,
+    handleSubmit,
+  };
+};
+
+export default useSelectSessionModalData;

package/src/containers/SelectSessionModal/hooks.test.js

@@ -0,0 +1,194 @@
+import { useIntl } from '@openedx/frontend-base';
+import track from 'tracking';
+
+import { MockUseState } from 'testUtils';
+import { reduxHooks, apiHooks } from 'hooks';
+
+import { LEAVE_OPTION } from './constants';
+import messages from './messages';
+import * as hooks from './hooks';
+
+jest.mock('tracking', () => ({
+  entitlements: {
+    newSession: jest.fn(),
+    switchSession: jest.fn(),
+    leaveSession: jest.fn(),
+  },
+}));
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useSelectSessionModalData: jest.fn(),
+    useUpdateSelectSessionModalCallback: jest.fn(),
+  },
+  apiHooks: {
+    useSwitchEntitlementEnrollment: jest.fn((...args) => ({ switchEntitlementEnrollment: args })),
+    useLeaveEntitlementSession: jest.fn((...args) => ({ leaveEntitlementSession: args })),
+    useNewEntitlementEnrollment: jest.fn((...args) => ({ newEntitlementEnrollment: args })),
+  },
+}));
+
+const updateSelectSessionModalCallback = jest.fn();
+reduxHooks.useUpdateSelectSessionModalCallback.mockReturnValue(updateSelectSessionModalCallback);
+const newEntitlementEnrollment = jest.fn();
+apiHooks.useNewEntitlementEnrollment.mockReturnValue(newEntitlementEnrollment);
+const switchEntitlementEnrollment = jest.fn();
+apiHooks.useSwitchEntitlementEnrollment.mockReturnValue(switchEntitlementEnrollment);
+const leaveEntitlementSession = jest.fn();
+apiHooks.useLeaveEntitlementSession.mockReturnValue(leaveEntitlementSession);
+const trackNewSession = jest.fn();
+track.entitlements.newSession.mockReturnValue(trackNewSession);
+const trackLeaveSession = jest.fn();
+track.entitlements.leaveSession.mockReturnValue(trackLeaveSession);
+const trackSwitchSession = jest.fn();
+track.entitlements.switchSession.mockReturnValue(trackSwitchSession);
+
+const state = new MockUseState(hooks);
+const selectedCardId = 'test-selected-card-id';
+const courseTitle = 'course-title: brown fox';
+const uuid = 'test-uuid';
+
+const entitlementData = {
+  availableSessions: [
+    { startDate: '1/2/2000', endDate: '1/2/2020', cardId: 'session-id-1' },
+    { startDate: '2/3/2000', endDate: '2/3/2020', cardId: 'session-id-2' },
+    { startDate: '3/4/2000', endDate: '3/4/2020', cardId: 'session-id-3' },
+  ],
+  isFullfilled: false,
+  uuid,
+};
+
+const testValue = 'test-value';
+
+const courseId = 'test-course-id';
+reduxHooks.useCardCourseRunData.mockReturnValue({ courseId });
+
+describe('SelectSessionModal hooks', () => {
+  let out;
+
+  describe('state values', () => {
+    state.testGetter(state.keys.selectedSession);
+  });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('useSelectSessionModalData', () => {
+    const runHook = ({
+      course = {},
+      courseRun = {},
+      enrollment = {},
+      entitlement = {},
+      selectSession = {},
+    }) => {
+      reduxHooks.useCardCourseData.mockReturnValueOnce({ title: courseTitle, ...course });
+      reduxHooks.useCardCourseRunData.mockReturnValueOnce({ courseId, ...courseRun });
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false, ...enrollment });
+      reduxHooks.useCardEntitlementData.mockReturnValueOnce({ ...entitlementData, ...entitlement });
+      reduxHooks.useSelectSessionModalData.mockReturnValueOnce({ cardId: selectedCardId, ...selectSession });
+      out = hooks.useSelectSessionModalData();
+    };
+    beforeEach(() => {
+      state.mock();
+      runHook({});
+    });
+    describe('initialization', () => {
+      it('loads redux data based on selected card id', () => {
+        expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(selectedCardId);
+        expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(selectedCardId);
+        expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(selectedCardId);
+      });
+      it('initializes enrollment hooks with selected card id', () => {
+        expect(apiHooks.useLeaveEntitlementSession).toHaveBeenCalledWith(selectedCardId);
+        expect(apiHooks.useNewEntitlementEnrollment).toHaveBeenCalledWith(selectedCardId);
+        expect(apiHooks.useSwitchEntitlementEnrollment).toHaveBeenCalledWith(selectedCardId);
+      });
+      it('initializes selected session with courseId if available', () => {
+        state.expectInitializedWith(state.keys.selectedSession, courseId);
+      });
+      it('initializes selected session with null if courseId not available', () => {
+        runHook({ courseRun: { courseId: undefined } });
+        state.expectInitializedWith(state.keys.selectedSession, null);
+      });
+      it('initializes update callback with null', () => {
+        expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(null);
+      });
+      it('initializes tracking methods', () => {
+        expect(track.entitlements.newSession).toHaveBeenCalledWith(courseId);
+        expect(track.entitlements.leaveSession).toHaveBeenCalledWith(selectedCardId);
+        expect(track.entitlements.switchSession).toHaveBeenCalledWith(selectedCardId, courseId);
+      });
+    });
+
+    describe('output', () => {
+      const { formatMessage } = useIntl();
+      describe('selectedSession', () => {
+        it('defaults to current courseId if enrolled', () => {
+          expect(out.selectedSession).toEqual(courseId);
+        });
+        it('defaults to null if not enrolled', () => {
+          runHook({ enrollment: { isEnrolled: false }, courseRun: { courseId: undefined } });
+          expect(out.selectedSession).toEqual(null);
+        });
+      });
+      describe('handleSelection', () => {
+        it('sets selected session with event target value', () => {
+          out.handleSelection({ target: { value: testValue } });
+          expect(state.setState.selectedSession).toHaveBeenCalledWith(testValue);
+        });
+      });
+      describe('handleSubmit', () => {
+        describe('if LEAVE_OPTION is selected', () => {
+          it('calls and tracks leaveEntitlementSession', () => {
+            state.mockVal(state.keys.selectedSession, LEAVE_OPTION);
+            runHook({});
+            out.handleSubmit();
+            expect(leaveEntitlementSession).toHaveBeenCalledWith();
+            expect(trackLeaveSession).toHaveBeenCalled();
+          });
+        });
+        describe('if not enrolled in a session yet', () => {
+          it('calls and tracks newEntitlementEnrollment with selected card ID and session', () => {
+            state.mockVal(state.keys.selectedSession, testValue);
+            runHook({});
+            out.handleSubmit();
+            expect(newEntitlementEnrollment).toHaveBeenCalledWith(testValue);
+            expect(trackNewSession).toHaveBeenCalled();
+          });
+        });
+        describe('if enrolled in a session already, selecting a new session', () => {
+          it('calls and tracks swtichEntitlementEnrollment w/ selected card ID and session', () => {
+            state.mockVal(state.keys.selectedSession, testValue);
+            runHook({ enrollment: { isEnrolled: true } });
+            out.handleSubmit();
+            expect(switchEntitlementEnrollment).toHaveBeenCalledWith(testValue);
+            expect(trackSwitchSession).toHaveBeenCalled();
+          });
+        });
+      });
+      test('showModal returns true if selectedCardId is not null or undefined', () => {
+        expect(out.showModal).toEqual(true);
+        runHook({ selectSession: { cardId: null } });
+        expect(out.showModal).toEqual(false);
+        runHook({ selectSession: { cardId: undefined } });
+        expect(out.showModal).toEqual(false);
+      });
+      test('displays change or leave header and hint if fulfilled', () => {
+        expect(out.header).toEqual(formatMessage(messages.selectSessionHeader, { courseTitle }));
+        expect(out.hint).toEqual(formatMessage(messages.selectSessionHint));
+      });
+      test('displays select session header (w/ courseTitle) and hint if unfulfilled', () => {
+        runHook({ entitlement: { isFulfilled: true } });
+        expect(out.header).toEqual(formatMessage(messages.changeOrLeaveHeader));
+        expect(out.hint).toEqual(formatMessage(messages.changeOrLeaveHint));
+      });
+      test('closeSessionModal returns update callback wth dispatch and null card id', () => {
+        expect(out.closeSessionModal()).toEqual(
+          reduxHooks.useUpdateSelectSessionModalCallback(null)(),
+        );
+      });
+    });
+  });
+});

package/src/containers/SelectSessionModal/index.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { useIntl } from '@openedx/frontend-base';
+import {
+  ActionRow,
+  Button,
+  Form,
+  ModalDialog,
+} from '@openedx/paragon';
+
+import { utilHooks } from '../../hooks';
+import { nullMethod, dateFormatter } from '../../utils';
+
+import useSelectSessionModalData from './hooks';
+import { LEAVE_OPTION } from './constants';
+import messages from './messages';
+
+export const SelectSessionModal = () => {
+  const {
+    availableSessions,
+    showModal,
+    closeSessionModal,
+    showLeaveOption,
+    handleSelection,
+    handleSubmit,
+    header,
+    hint,
+    selectedSession,
+  } = useSelectSessionModalData();
+
+  const formatDate = utilHooks.useFormatDate();
+  const { formatMessage } = useIntl();
+
+  return (
+    <ModalDialog
+      isOpen={showModal}
+      onClose={nullMethod}
+      hasCloseButton={false}
+      isFullscreenOnMobile
+      size="md"
+      className="p-4 px-4.5"
+      title={header}
+    >
+      <h3>{header}</h3>
+      <Form.Group className="pt-3">
+        <Form.Label>{hint}</Form.Label>
+        <Form.RadioSet
+          name="sessions"
+          className="pt-3 pb-4"
+          onChange={handleSelection}
+          value={selectedSession}
+        >
+          {availableSessions?.map((session) => (
+            <Form.Radio key={session.courseId} value={session.courseId}>
+              {dateFormatter(formatDate, session.startDate)} - {dateFormatter(formatDate, session.endDate)}
+            </Form.Radio>
+          ))}
+          {showLeaveOption && (
+            <Form.Radio value={LEAVE_OPTION}>
+              {formatMessage(messages.leaveSessionOption)}
+            </Form.Radio>
+          )}
+        </Form.RadioSet>
+      </Form.Group>
+      <ActionRow>
+        <Button variant="tertiary" onClick={closeSessionModal}>
+          {formatMessage(messages.nevermind)}
+        </Button>
+        <Button onClick={handleSubmit}>{formatMessage(messages.confirmSession)}</Button>
+      </ActionRow>
+    </ModalDialog>
+  );
+};
+
+export default SelectSessionModal;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import hooks from './hooks';
+import SelectSessionModal from '.';
+
+jest.mock('./hooks', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const hookReturn = {
+  availableSessions: [],
+  showModal: true,
+  closeSessionModal: jest.fn().mockName('useSelectSessionModalData.closeSessionModal'),
+  showLeaveOption: true,
+  header: 'test-header',
+  hint: 'test-hint',
+};
+
+const availableSessions = [
+  { startDate: '1/2/2000', endDate: '1/2/2020', courseId: 'test-course-id-1' },
+  { startDate: '2/3/2000', endDate: '2/3/2020', courseId: 'test-course-id-2' },
+  { startDate: '3/4/2000', endDate: '3/4/2020', courseId: 'test-course-id-3' },
+];
+
+describe('SelectSessionModal', () => {
+  describe('snapshot', () => {
+    test('empty modal with leave option ', () => {
+      hooks.mockReturnValueOnce({
+        ...hookReturn,
+      });
+      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
+    });
+
+    test('modal with leave option ', () => {
+      hooks.mockReturnValueOnce({
+        ...hookReturn,
+        availableSessions: [...availableSessions],
+      });
+      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
+    });
+
+    test('modal without leave option ', () => {
+      hooks.mockReturnValueOnce({
+        ...hookReturn,
+        availableSessions,
+        showLeaveOption: false,
+      });
+      expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/containers/SelectSessionModal/messages.js

@@ -0,0 +1,41 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  changeOrLeaveHeader: {
+    id: 'learner-dash.selectSession.changeOrLeaveHeader',
+    description: 'Header for session that allow leave option',
+    defaultMessage: 'Change or leave session?',
+  },
+  selectSessionHeader: {
+    id: 'learner-dash.selectSession.selectSessionHeader',
+    description: 'Header for unfulfilled entitlement',
+    defaultMessage: 'Select a session',
+  },
+  changeOrLeaveHint: {
+    id: 'learner-dash.selectSession.changeOrLeaveHint',
+    description: 'Hint for session that allow leave option',
+    defaultMessage: 'When you change to a different session any course progress or grades from your current session will be lost.',
+  },
+  selectSessionHint: {
+    id: 'learner-dash.selectSession.selectSessionHint',
+    description: 'Hint for session that does not allow leave option',
+    defaultMessage: 'Remember, if you change your mind you have 2 weeks to unenroll and select a different session.',
+  },
+  leaveSessionOption: {
+    id: 'learner-dash.selectSession.leaveSessionOption',
+    description: 'Radio option for leave session',
+    defaultMessage: 'Leave session',
+  },
+  nevermind: {
+    id: 'learner-dash.selectSession.nevermind',
+    description: 'Cancel action for select session modal',
+    defaultMessage: 'Never mind',
+  },
+  confirmSession: {
+    id: 'learner-dash.selectSession.confirmSession',
+    description: 'Confirm action for select session modal',
+    defaultMessage: 'Confirm Session',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnenrollConfirmModal component snapshot: modalStates.confirm 1`] = `
+<ModalDialog
+  hasCloseButton={false}
+  isFullscreenOnMobile={false}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  title=""
+>
+  <div
+    className="bg-white p-3 rounded shadow"
+    style={
+      {
+        "textAlign": "start",
+      }
+    }
+  >
+    <ConfirmPane
+      handleClose={[MockFunction hooks.close]}
+      handleConfirm={[MockFunction hooks.confirm]}
+    />
+  </div>
+</ModalDialog>
+`;
+
+exports[`UnenrollConfirmModal component snapshot: modalStates.finished, reason given 1`] = `
+<ModalDialog
+  hasCloseButton={false}
+  isFullscreenOnMobile={false}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  title=""
+>
+  <div
+    className="bg-white p-3 rounded shadow"
+    style={
+      {
+        "textAlign": "start",
+      }
+    }
+  >
+    <FinishedPane
+      gaveReason={true}
+      handleClose={[MockFunction hooks.closeAndRefresh]}
+    />
+  </div>
+</ModalDialog>
+`;
+
+exports[`UnenrollConfirmModal component snapshot: modalStates.finished, reason skipped 1`] = `
+<ModalDialog
+  hasCloseButton={false}
+  isFullscreenOnMobile={false}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  title=""
+>
+  <div
+    className="bg-white p-3 rounded shadow"
+    style={
+      {
+        "textAlign": "start",
+      }
+    }
+  >
+    <FinishedPane
+      gaveReason={true}
+      handleClose={[MockFunction hooks.closeAndRefresh]}
+    />
+  </div>
+</ModalDialog>
+`;
+
+exports[`UnenrollConfirmModal component snapshot: modalStates.reason, should be fullscreen with no shadow 1`] = `
+<ModalDialog
+  hasCloseButton={false}
+  isFullscreenOnMobile={true}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  title=""
+>
+  <div
+    className="bg-white p-3 rounded"
+    style={
+      {
+        "textAlign": "start",
+      }
+    }
+  >
+    <ReasonPane
+      reason={
+        {
+          "isSkipped": false,
+          "reasonProps": "other",
+        }
+      }
+    />
+  </div>
+</ModalDialog>
+`;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+import {
+  ActionRow,
+  Button,
+} from '@openedx/paragon';
+
+import messages from './messages';
+
+export const ConfirmPane = ({
+  handleClose,
+  handleConfirm,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      <h4>{formatMessage(messages.confirmHeader)}</h4>
+      <ActionRow>
+        <Button variant="tertiary" onClick={handleClose}>
+          {formatMessage(messages.confirmCancel)}
+        </Button>
+        <Button onClick={handleConfirm}>
+          {formatMessage(messages.confirmUnenroll)}
+        </Button>
+      </ActionRow>
+    </>
+  );
+};
+ConfirmPane.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  handleConfirm: PropTypes.func.isRequired,
+};
+
+export default ConfirmPane;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { ConfirmPane } from './ConfirmPane';
+
+describe('UnenrollConfirmModal ConfirmPane', () => {
+  test('snapshot', () => {
+    const props = {
+      handleClose: jest.fn().mockName('props.handleClose'),
+      handleConfirm: jest.fn().mockName('props.handleConfirm'),
+    };
+    expect(shallow(<ConfirmPane {...props} />).snapshot).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+import {
+  ActionRow,
+  Button,
+} from '@openedx/paragon';
+
+import messages from './messages';
+
+export const FinishedPane = ({
+  gaveReason,
+  handleClose,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      <h4>{formatMessage(messages.finishHeading)}</h4>
+      <p>
+        {gaveReason && formatMessage(messages.finishThanksText)}
+        {formatMessage(messages.finishText)}
+      </p>
+      <ActionRow>
+        <Button onClick={handleClose}>{formatMessage(messages.finishReturn)}</Button>
+      </ActionRow>
+    </>
+  );
+};
+FinishedPane.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  gaveReason: PropTypes.bool.isRequired,
+};
+
+export default FinishedPane;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { FinishedPane } from './FinishedPane';
+
+describe('UnenrollConfirmModal FinishedPane', () => {
+  test('snapshot: gave reason', () => {
+    const props = {
+      gaveReason: true,
+      handleClose: jest.fn().mockName('props.handleClose'),
+    };
+    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
+  });
+  test('snapshot: did not give reason', () => {
+    const props = {
+      gaveReason: false,
+      handleClose: jest.fn().mockName('props.handleClose'),
+    };
+    expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
+  });
+});