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

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+import {
+  ActionRow,
+  Button,
+  Form,
+} from '@openedx/paragon';
+
+import constants from '../constants';
+import messages from './messages';
+
+export const ReasonPane = ({
+  reason,
+}) => {
+  const { formatMessage } = useIntl();
+  const option = (key) => (
+    <Form.Radio key={key} value={key}>
+      {formatMessage(constants.messages[key])}
+    </Form.Radio>
+  );
+  return (
+    <>
+      <h4>{formatMessage(messages.reasonHeading)}</h4>
+      <Form.RadioSet
+        name="unenrollReason"
+        onChange={reason.selectOption}
+        value={reason.selected}
+      >
+        {constants.order.map(option)}
+        <Form.Radio value={constants.reasonKeys.custom}>
+          <Form.Control
+            {...reason.customOption}
+            placeholder={formatMessage(constants.messages.customPlaceholder)}
+          />
+        </Form.Radio>
+      </Form.RadioSet>
+      <ActionRow>
+        <Button variant="tertiary" onClick={reason.handleSkip}>
+          {formatMessage(messages.reasonSkip)}
+        </Button>
+        <Button disabled={!reason.hasReason} onClick={reason.handleSubmit}>
+          {formatMessage(messages.reasonSubmit)}
+        </Button>
+      </ActionRow>
+    </>
+  );
+};
+ReasonPane.propTypes = {
+  reason: PropTypes.shape({
+    value: PropTypes.string,
+    handleSkip: PropTypes.func,
+    hasReason: PropTypes.bool,
+    selectOption: PropTypes.func,
+    customOption: PropTypes.shape({
+      value: PropTypes.string,
+      onChange: PropTypes.func,
+    }),
+    selected: PropTypes.string,
+    handleSubmit: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+export default ReasonPane;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { ReasonPane } from './ReasonPane';
+
+describe('UnenrollConfirmModal ReasonPane', () => {
+  const props = {
+    reason: {
+      handleSkip: jest.fn().mockName('props.reason.handleSkip'),
+      selectOption: jest.fn().mockName('props.reason.selectOption'),
+      customOption: {
+        value: 'props.reason.customOption.value',
+        onChange: jest.fn().mockName('props.reason.customOption.onChange'),
+      },
+      selected: 'props.reason.selected',
+      handleSubmit: jest.fn().mockName('props.reason.handleSubmit'),
+      hasReason: true,
+    },
+  };
+  test('snapshot', () => {
+    expect(shallow(<ReasonPane {...props} />).snapshot).toMatchSnapshot();
+  });
+  test('snapshot: no reason provided', () => {
+    expect(shallow(<ReasonPane {...props} hasReason={false} />).snapshot).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnenrollConfirmModal ConfirmPane snapshot 1`] = `
+<Fragment>
+  <h4>
+    Unenroll from course?
+  </h4>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction props.handleClose]}
+      variant="tertiary"
+    >
+      Never mind
+    </Button>
+    <Button
+      onClick={[MockFunction props.handleConfirm]}
+    >
+      Unenroll
+    </Button>
+  </ActionRow>
+</Fragment>
+`;

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnenrollConfirmModal FinishedPane snapshot: did not give reason 1`] = `
+<Fragment>
+  <h4>
+    You are unenrolled
+  </h4>
+  <p>
+    This course will be removed from your dashboard.
+  </p>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction props.handleClose]}
+    >
+      Return to dashboard
+    </Button>
+  </ActionRow>
+</Fragment>
+`;
+
+exports[`UnenrollConfirmModal FinishedPane snapshot: gave reason 1`] = `
+<Fragment>
+  <h4>
+    You are unenrolled
+  </h4>
+  <p>
+    Thank you for sharing your reason for unenrolling.  
+    This course will be removed from your dashboard.
+  </p>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction props.handleClose]}
+    >
+      Return to dashboard
+    </Button>
+  </ActionRow>
+</Fragment>
+`;

package/src/containers/UnenrollConfirmModal/components/__snapshots__/ReasonPane.test.jsx.snap

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnenrollConfirmModal ReasonPane snapshot 1`] = `
+<Fragment>
+  <h4>
+    What's your main reason for unenrolling?
+  </h4>
+  <Form.RadioSet
+    name="unenrollReason"
+    onChange={[MockFunction props.reason.selectOption]}
+    value="props.reason.selected"
+  >
+    <Form.Radio
+      key="prereqs"
+      value="prereqs"
+    >
+      I don't have the academic or language prerequisites
+    </Form.Radio>
+    <Form.Radio
+      key="difficulty"
+      value="difficulty"
+    >
+      The course material was too hard
+    </Form.Radio>
+    <Form.Radio
+      key="goals"
+      value="goals"
+    >
+      This won't help me reach my goals
+    </Form.Radio>
+    <Form.Radio
+      key="broken"
+      value="broken"
+    >
+      Something was broken
+    </Form.Radio>
+    <Form.Radio
+      key="time"
+      value="time"
+    >
+      I don't have the time
+    </Form.Radio>
+    <Form.Radio
+      key="browse"
+      value="browse"
+    >
+      I just wanted to browse the material
+    </Form.Radio>
+    <Form.Radio
+      key="support"
+      value="support"
+    >
+      I don't have enough support
+    </Form.Radio>
+    <Form.Radio
+      key="quality"
+      value="quality"
+    >
+      I am not happy with the quality of the content
+    </Form.Radio>
+    <Form.Radio
+      key="easy"
+      value="easy"
+    >
+      The course material was too easy
+    </Form.Radio>
+    <Form.Radio
+      value="custom"
+    >
+      <Form.Control
+        onChange={[MockFunction props.reason.customOption.onChange]}
+        placeholder="Other"
+        value="props.reason.customOption.value"
+      />
+    </Form.Radio>
+  </Form.RadioSet>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction props.reason.handleSkip]}
+      variant="tertiary"
+    >
+      Skip survey
+    </Button>
+    <Button
+      disabled={false}
+      onClick={[MockFunction props.reason.handleSubmit]}
+    >
+      Submit reason
+    </Button>
+  </ActionRow>
+</Fragment>
+`;
+
+exports[`UnenrollConfirmModal ReasonPane snapshot: no reason provided 1`] = `
+<Fragment>
+  <h4>
+    What's your main reason for unenrolling?
+  </h4>
+  <Form.RadioSet
+    name="unenrollReason"
+    onChange={[MockFunction props.reason.selectOption]}
+    value="props.reason.selected"
+  >
+    <Form.Radio
+      key="prereqs"
+      value="prereqs"
+    >
+      I don't have the academic or language prerequisites
+    </Form.Radio>
+    <Form.Radio
+      key="difficulty"
+      value="difficulty"
+    >
+      The course material was too hard
+    </Form.Radio>
+    <Form.Radio
+      key="goals"
+      value="goals"
+    >
+      This won't help me reach my goals
+    </Form.Radio>
+    <Form.Radio
+      key="broken"
+      value="broken"
+    >
+      Something was broken
+    </Form.Radio>
+    <Form.Radio
+      key="time"
+      value="time"
+    >
+      I don't have the time
+    </Form.Radio>
+    <Form.Radio
+      key="browse"
+      value="browse"
+    >
+      I just wanted to browse the material
+    </Form.Radio>
+    <Form.Radio
+      key="support"
+      value="support"
+    >
+      I don't have enough support
+    </Form.Radio>
+    <Form.Radio
+      key="quality"
+      value="quality"
+    >
+      I am not happy with the quality of the content
+    </Form.Radio>
+    <Form.Radio
+      key="easy"
+      value="easy"
+    >
+      The course material was too easy
+    </Form.Radio>
+    <Form.Radio
+      value="custom"
+    >
+      <Form.Control
+        onChange={[MockFunction props.reason.customOption.onChange]}
+        placeholder="Other"
+        value="props.reason.customOption.value"
+      />
+    </Form.Radio>
+  </Form.RadioSet>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction props.reason.handleSkip]}
+      variant="tertiary"
+    >
+      Skip survey
+    </Button>
+    <Button
+      disabled={false}
+      onClick={[MockFunction props.reason.handleSubmit]}
+    >
+      Submit reason
+    </Button>
+  </ActionRow>
+</Fragment>
+`;

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

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

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

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

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