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

package/src/containers/EmailSettingsModal/index.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-import {
-  ActionRow,
-  Button,
-  Form,
-  ModalDialog,
-} from '@openedx/paragon';
-
-import { nullMethod } from '../../utils';
-
-import useEmailData from './hooks';
-import messages from './messages';
-
-export const EmailSettingsModal = ({
-  closeModal,
-  show,
-  cardId,
-}) => {
-  const {
-    isOptedOut,
-    onToggle,
-    save,
-  } = useEmailData({ closeModal, cardId });
-  const { formatMessage } = useIntl();
-
-  return (
-    <ModalDialog
-      isOpen={show}
-      onClose={nullMethod}
-      hasCloseButton={false}
-      title=""
-    >
-      <div className="bg-white p-3 rounded shadow" style={{ textAlign: 'start' }}>
-        <h4>{formatMessage(messages.header)}</h4>
-        <Form.Switch checked={!isOptedOut} onChange={onToggle}>
-          {formatMessage(isOptedOut ? messages.emailsOff : messages.emailsOn)}
-        </Form.Switch>
-        <p>{formatMessage(messages.description)}</p>
-        <ActionRow>
-          <Button variant="tertiary" onClick={closeModal}>
-            {formatMessage(messages.nevermind)}
-          </Button>
-          <Button onClick={save}>{formatMessage(messages.save)}</Button>
-        </ActionRow>
-      </div>
-    </ModalDialog>
-  );
-};
-EmailSettingsModal.propTypes = {
-  cardId: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired,
-};
-
-export default EmailSettingsModal;

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

@@ -1,74 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import hooks from './hooks';
-import EmailSettingsModal from '.';
-import messages from './messages';
-
-jest.mock('./hooks', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-const hookProps = {
-  isOptedOut: true,
-  onToggle: jest.fn().mockName('hooks.onToggle'),
-  save: jest.fn().mockName('hooks.save'),
-};
-
-const props = {
-  closeModal: jest.fn().mockName('closeModal'),
-  show: true,
-  cardId: 'test-course-number',
-};
-
-describe('EmailSettingsModal', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('behavior', () => {
-    beforeEach(() => {
-      hooks.mockReturnValueOnce(hookProps);
-      render(<IntlProvider locale="en"><EmailSettingsModal {...props} /></IntlProvider>);
-    });
-    it('calls hook w/ closeModal and cardId from props', () => {
-      expect(hooks).toHaveBeenCalledWith({
-        closeModal: props.closeModal,
-        cardId: props.cardId,
-      });
-    });
-  });
-  describe('render', () => {
-    it('emails disabled, show: false', () => {
-      hooks.mockReturnValue(hookProps);
-      render(<IntlProvider locale="en"><EmailSettingsModal {...props} show={false} /></IntlProvider>);
-      const modal = screen.queryByRole('dialog');
-      expect(modal).toBeNull();
-    });
-    it('emails disabled, show: true', () => {
-      hooks.mockReturnValueOnce(hookProps);
-      render(<IntlProvider locale="en"><EmailSettingsModal {...props} /></IntlProvider>);
-      const modal = screen.getByRole('dialog');
-      const heading = screen.getByText(messages.header.defaultMessage);
-      const emailsMsg = screen.getByText(messages.emailsOff.defaultMessage);
-      expect(modal).toBeInTheDocument();
-      expect(heading).toBeInTheDocument();
-      expect(emailsMsg).toBeInTheDocument();
-    });
-    it('emails enabled, show: true', () => {
-      hooks.mockReturnValueOnce({
-        ...hookProps,
-        isOptedOut: false,
-      });
-      render(<IntlProvider locale="en"><EmailSettingsModal {...props} /></IntlProvider>);
-      const emailsMsg = screen.getByText(messages.emailsOn.defaultMessage);
-      const description = screen.getByText(messages.description.defaultMessage);
-      const buttonNeverMind = screen.getByRole('button', { name: messages.nevermind.defaultMessage });
-      const buttonSave = screen.getByRole('button', { name: messages.save.defaultMessage });
-      expect(emailsMsg).toBeInTheDocument();
-      expect(description).toBeInTheDocument();
-      expect(buttonNeverMind).toBeInTheDocument();
-      expect(buttonSave).toBeInTheDocument();
-    });
-  });
-});

package/src/containers/EmailSettingsModal/messages.js

@@ -1,37 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  header: {
-    id: 'learner-dash.emailSettings.header',
-    description: 'Header for email settings modal',
-    defaultMessage: 'Receive course emails?',
-  },
-  emailsOff: {
-    id: 'learner-dash.emailSettings.emailsOff',
-    description: 'Toggle text for email settings modal when email is disabled',
-    defaultMessage: 'Course emails are off',
-  },
-  emailsOn: {
-    id: 'learner-dash.emailSettings.emailsOn',
-    description: 'Toggle text for email settings modal when email is enabled',
-    defaultMessage: 'Course emails are on',
-  },
-  description: {
-    id: 'learner-dash.emailSettings.description',
-    description: 'Description for email settings modal',
-    defaultMessage: 'Course emails include important information about your course from instructors.',
-  },
-  nevermind: {
-    id: 'learner-dash.emailSettings.nevermind',
-    description: 'Cancel action for email settings modal',
-    defaultMessage: 'Never mind',
-  },
-  save: {
-    id: 'learner-dash.emailSettings.save',
-    description: 'Save action for email settings modal',
-    defaultMessage: 'Save settings',
-  },
-
-});
-
-export default messages;

package/src/containers/RelatedProgramsModal/components/ProgramCard.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-import {
-  Badge,
-  Card,
-  // Hyperlink,
-  Icon,
-} from '@openedx/paragon';
-import { Program } from '@openedx/paragon/icons';
-
-import messages from './messages';
-import './index.scss';
-
-export const whiteFontWrapper = (node) => (<span className="text-white">{node}</span>);
-
-export const ProgramCard = ({ data }) => {
-  const { formatMessage } = useIntl();
-  const numCoursesMessage = formatMessage(
-    messages.courses,
-    { numCourses: data.numberOfCourses },
-  );
-  return (
-    <Card
-      className="program-card mx-auto bg-primary-500 text-white mb-3.5 pb-3.5"
-      style={{ width: '18rem', color: 'white' }}
-      as="a"
-      href={data.programUrl}
-      isClickable
-    >
-      <Card.ImageCap
-        className="program-card-banner"
-        src={data.bannerImgSrc}
-        srcAlt={formatMessage(messages.bannerAlt)}
-        logoSrc={data.logoImgSrc}
-        logoAlt={formatMessage(messages.logoAlt, { provider: data.provider })}
-      />
-      <Card.Header
-        title={whiteFontWrapper(data.title)}
-        subtitle={whiteFontWrapper(data.provider)}
-      />
-      <div className="ml-4">
-        <Badge variant="light" className="program-type-badge">
-          <Icon src={Program} className="d-inline-block" /> {data.programType}
-        </Badge>
-        <div className="program-summary mt-2">
-          {numCoursesMessage}
-        </div>
-      </div>
-    </Card>
-  );
-};
-ProgramCard.propTypes = {
-  data: PropTypes.shape({
-    bannerImgSrc: PropTypes.string,
-    logoImgSrc: PropTypes.string,
-    numberOfCourses: PropTypes.number,
-    programType: PropTypes.string,
-    programUrl: PropTypes.string,
-    provider: PropTypes.string,
-    title: PropTypes.string,
-  }).isRequired,
-};
-
-export default ProgramCard;

package/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx

@@ -1,43 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import ProgramCard from './ProgramCard';
-
-const props = {
-  data: {
-    numberOfCourses: 2,
-    bannerImgSrc: 'test bannerImgSrc',
-    logoImgSrc: 'test logoImgSrc',
-    title: 'test title',
-    provider: 'test provider',
-    programType: 'test programType',
-    programUrl: 'test programUrl',
-    programTypeUrl: 'test programTypeUrl',
-  },
-};
-
-describe('RelatedProgramsModal ProgramCard', () => {
-  describe('renders', () => {
-    beforeEach(() => render(<IntlProvider locale="en"><ProgramCard {...props} /></IntlProvider>));
-    it('bannerImg and logo', () => {
-      const logo = screen.getByRole('img', { name: `${props.data.provider} logo` });
-      const bannerImg = screen.getByRole('img', { name: /bannerAlt/i });
-      expect(logo).toBeInTheDocument();
-      expect(bannerImg).toBeInTheDocument();
-    });
-    it('title and subtitle', () => {
-      const title = screen.getByText(props.data.title);
-      const subtitle = screen.getByText(props.data.provider);
-      expect(title).toBeInTheDocument();
-      expect(subtitle).toBeInTheDocument();
-    });
-    it('badge', () => {
-      const badge = screen.getByText(props.data.programType);
-      expect(badge).toBeInTheDocument();
-    });
-    it('courses number', () => {
-      const coursesNumber = screen.getByText(`${props.data.numberOfCourses} Courses`);
-      expect(coursesNumber).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,24 +0,0 @@
-export const messages = {
-  courses: {
-    id: 'learnerDashboard.programCard.courses',
-    defaultMessage: '{numCourses} Courses',
-    description: 'Number of courses in a program, displayed at the bottom of program card',
-  },
-  duration: {
-    id: 'learnerDashboard.programCard.duration',
-    defaultMessage: '{numWeeks} Weeks',
-    description: 'Number of weeks in a program, displayed at the bottom of program card',
-  },
-  logoAlt: {
-    id: 'learnerDashboard.programCard.logoAlt',
-    defaultMessage: '{provider} logo',
-    description: 'Program provider logo alt-text',
-  },
-  bannerAlt: {
-    id: 'learnerDashboard.programCard.bannerAlt',
-    defaultMessage: '',
-    description: 'Program banner image alt-text',
-  },
-};
-
-export default messages;

package/src/containers/RelatedProgramsModal/hooks.js

@@ -1,10 +0,0 @@
-import { reduxHooks } from 'hooks';
-
-export const useProgramData = ({
-  cardId,
-}) => ({
-  courseTitle: reduxHooks.useCardCourseData(cardId).title,
-  relatedPrograms: reduxHooks.useCardRelatedProgramsData(cardId).list,
-});
-
-export default useProgramData;

package/src/containers/RelatedProgramsModal/index.jsx

@@ -1,62 +0,0 @@
-/* eslint-disable quotes */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-import {
-  Container, Row, Col, ModalDialog,
-} from '@openedx/paragon';
-
-import { reduxHooks } from '../../hooks';
-
-import ProgramCard from './components/ProgramCard';
-import messages from './messages';
-import './index.scss';
-
-export const RelatedProgramsModal = ({
-  isOpen,
-  closeModal,
-  cardId,
-}) => {
-  const { formatMessage } = useIntl();
-  const { courseName } = reduxHooks.useCardCourseData(cardId);
-  const relatedPrograms = reduxHooks.useCardRelatedProgramsData(cardId).list;
-  return (
-    <ModalDialog
-      title={formatMessage(messages.header)}
-      isOpen={isOpen}
-      onClose={closeModal}
-      hasCloseButton
-      isFullscreenOnMobile
-      size="lg"
-      className="related-programs-modal p-4"
-      data-testid="RelatedProgramsModal"
-    >
-      <ModalDialog.Header className="programs-title m-0 p-0" as="h3" aria-level={2}>
-        {formatMessage(messages.header)}
-      </ModalDialog.Header>
-      <ModalDialog.Header as="h4" className="programs-header p-0">
-        {courseName}
-      </ModalDialog.Header>
-      <ModalDialog.Body className="pl-0 overflow-scroll">
-        <p>{formatMessage(messages.description)}</p>
-        <Container>
-          <Row>
-            {relatedPrograms.map((programData) => (
-              <Col key={programData.programUrl} lg={6} sm={12}>
-                <ProgramCard data={programData} />
-              </Col>
-            ))}
-          </Row>
-        </Container>
-      </ModalDialog.Body>
-    </ModalDialog>
-  );
-};
-RelatedProgramsModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  cardId: PropTypes.string.isRequired,
-};
-
-export default RelatedProgramsModal;

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

@@ -1,72 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import { reduxHooks } from '@src/hooks';
-import RelatedProgramsModal from '.';
-import messages from './messages';
-
-jest.mock('./components/ProgramCard', () => jest.fn(() => <div>ProgramCard</div>));
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCourseData: jest.fn(),
-    useCardRelatedProgramsData: jest.fn(),
-  },
-}));
-
-const cardId = 'test-card-id';
-const courseData = {
-  courseName: 'test course',
-};
-const programData = {
-  list: [
-    {
-      programUrl: 'program-1-url',
-      programData: { dataFor: 'program1' },
-    },
-    {
-      programUrl: 'program-2-url',
-      programData: { dataFor: 'program2' },
-    },
-    {
-      programUrl: 'program-3-url',
-      programData: { dataFor: 'program3' },
-    },
-  ],
-};
-
-const props = {
-  isOpen: true,
-  closeModal: jest.fn().mockName('props.closeModal'),
-  cardId,
-};
-
-describe('RelatedProgramsModal', () => {
-  beforeEach(() => {
-    reduxHooks.useCardCourseData.mockReturnValueOnce(courseData);
-    reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce(programData);
-  });
-  it('initializes hooks with cardId', () => {
-    render(<IntlProvider locale="en"><RelatedProgramsModal {...props} /></IntlProvider>);
-    expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
-    expect(reduxHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId);
-  });
-  describe('renders', () => {
-    beforeEach(() => render(<IntlProvider locale="en"><RelatedProgramsModal {...props} /></IntlProvider>));
-    it('display header', () => {
-      const header = screen.getByRole('heading', { name: messages.header.defaultMessage });
-      expect(header).toBeInTheDocument();
-    });
-    it('displays course name', () => {
-      const courseName = screen.getByText(courseData.courseName);
-      expect(courseName).toBeInTheDocument();
-    });
-    it('displays description', () => {
-      const description = screen.getByText((text) => text.includes('Are you looking to expand your knowledge?'));
-      expect(description).toBeInTheDocument();
-    });
-    it('displays program cards', () => {
-      const programCards = screen.getAllByText('ProgramCard');
-      expect(programCards.length).toEqual(programData.list.length);
-    });
-  });
-});

package/src/containers/RelatedProgramsModal/messages.js

@@ -1,16 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  header: {
-    id: 'learner-dash.relatedPrograms.header',
-    description: 'Header for related settings modal',
-    defaultMessage: 'Related Programs',
-  },
-  description: {
-    id: 'learner-dash.relatedPrograms.description',
-    description: 'Description for related settings modal',
-    defaultMessage: `Are you looking to expand your knowledge?  Enrolling in a Program lets you take a series of courses in the subject that you're interested in`,
-  },
-});
-
-export default messages;

package/src/containers/SelectSessionModal/hooks.js

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