@openedx/frontend-app-learner-dashboard 1.0.0-alpha.1 → 1.0.0-alpha.11

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

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

@@ -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,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,
-  };
-};