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

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import hooks from './hooks';
-import EmailSettingsModal from '.';
-
-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);
-      shallow(<EmailSettingsModal {...props} />);
-    });
-    it('calls hook w/ closeModal and cardId from props', () => {
-      expect(hooks).toHaveBeenCalledWith({
-        closeModal: props.closeModal,
-        cardId: props.cardId,
-      });
-    });
-  });
-  describe('render', () => {
-    test('snapshot: emails disabled, show: false', () => {
-      hooks.mockReturnValueOnce(hookProps);
-      expect(shallow(<EmailSettingsModal {...props} show={false} />).snapshot).toMatchSnapshot();
-    });
-    test('snapshot: emails disabled, show: true', () => {
-      hooks.mockReturnValueOnce(hookProps);
-      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
-    });
-    test('snapshot: emails enabled, show: true', () => {
-      hooks.mockReturnValueOnce({
-        ...hookProps,
-        isOptedOut: false,
-      });
-      expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
-    });
-  });
-});

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/__snapshots__/index.test.jsx.snap

@@ -1,169 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RelatedProgramsModal snapshot: closed 1`] = `
-<ModalDialog
-  className="related-programs-modal p-4"
-  data-testid="RelatedProgramsModal"
-  hasCloseButton={true}
-  isFullscreenOnMobile={true}
-  isOpen={false}
-  onClose={[MockFunction props.closeModal]}
-  size="lg"
-  title="Related Programs"
->
-  <ModalDialog.Header
-    aria-level={2}
-    as="h3"
-    className="programs-title m-0 p-0"
-  >
-    Related Programs
-  </ModalDialog.Header>
-  <ModalDialog.Header
-    as="h4"
-    className="programs-header p-0"
-  />
-  <ModalDialog.Body
-    className="pl-0 overflow-scroll"
-  >
-    <p>
-      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
-    </p>
-    <Container>
-      <Row>
-        <Col
-          key="program-1-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program1",
-                },
-                "programUrl": "program-1-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-2-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program2",
-                },
-                "programUrl": "program-2-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-3-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program3",
-                },
-                "programUrl": "program-3-url",
-              }
-            }
-          />
-        </Col>
-      </Row>
-    </Container>
-  </ModalDialog.Body>
-</ModalDialog>
-`;
-
-exports[`RelatedProgramsModal snapshot: open 1`] = `
-<ModalDialog
-  className="related-programs-modal p-4"
-  data-testid="RelatedProgramsModal"
-  hasCloseButton={true}
-  isFullscreenOnMobile={true}
-  isOpen={true}
-  onClose={[MockFunction props.closeModal]}
-  size="lg"
-  title="Related Programs"
->
-  <ModalDialog.Header
-    aria-level={2}
-    as="h3"
-    className="programs-title m-0 p-0"
-  >
-    Related Programs
-  </ModalDialog.Header>
-  <ModalDialog.Header
-    as="h4"
-    className="programs-header p-0"
-  />
-  <ModalDialog.Body
-    className="pl-0 overflow-scroll"
-  >
-    <p>
-      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
-    </p>
-    <Container>
-      <Row>
-        <Col
-          key="program-1-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program1",
-                },
-                "programUrl": "program-1-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-2-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program2",
-                },
-                "programUrl": "program-2-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-3-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program3",
-                },
-                "programUrl": "program-3-url",
-              }
-            }
-          />
-        </Col>
-      </Row>
-    </Container>
-  </ModalDialog.Body>
-</ModalDialog>
-`;

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,23 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import ProgramCard from './ProgramCard';
-
-const props = {
-  data: {
-    numberOfCourses: 2,
-    bannerImgSrc: 'props.data.bannerImgSrc',
-    logoImgSrc: 'props.data.logoImgSrc',
-    title: 'props.data.title',
-    provider: 'props.data.provider',
-    programType: 'props.data.programType',
-    programUrl: 'props.data.programUrl',
-    programTypeUrl: 'props.data.programTypeUrl',
-  },
-};
-
-describe('RelatedProgramsModal ProgramCard', () => {
-  test('snapshot', () => {
-    expect(shallow(<ProgramCard {...props} />).snapshot).toMatchSnapshot();
-  });
-});

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

@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RelatedProgramsModal ProgramCard snapshot 1`] = `
-<Card
-  as="a"
-  className="program-card mx-auto bg-primary-500 text-white mb-3.5 pb-3.5"
-  href="props.data.programUrl"
-  isClickable={true}
-  style={
-    {
-      "color": "white",
-      "width": "18rem",
-    }
-  }
->
-  <Card.ImageCap
-    className="program-card-banner"
-    logoAlt="props.data.provider logo"
-    logoSrc="props.data.logoImgSrc"
-    src="props.data.bannerImgSrc"
-    srcAlt=""
-  />
-  <Card.Header
-    subtitle={
-      <span
-        className="text-white"
-      >
-        props.data.provider
-      </span>
-    }
-    title={
-      <span
-        className="text-white"
-      >
-        props.data.title
-      </span>
-    }
-  />
-  <div
-    className="ml-4"
-  >
-    <Badge
-      className="program-type-badge"
-      variant="light"
-    >
-      <Icon
-        className="d-inline-block"
-        src={[MockFunction icons.Program]}
-      />
-       
-      props.data.programType
-    </Badge>
-    <div
-      className="program-summary mt-2"
-    >
-      2 Courses
-    </div>
-  </div>
-</Card>
-`;

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,60 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import RelatedProgramsModal from '.';
-
-jest.mock('./components/ProgramCard', () => 'ProgramCard');
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseData: jest.fn(),
-    useCardRelatedProgramsData: jest.fn(),
-  },
-}));
-
-const cardId = 'test-course-number';
-const courseData = {
-  courseTitle: 'hookProps.courseTitle',
-};
-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', () => {
-    shallow(<RelatedProgramsModal {...props} />);
-    expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
-    expect(reduxHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId);
-  });
-  test('snapshot: open', () => {
-    expect(shallow(<RelatedProgramsModal {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('snapshot: closed', () => {
-    expect(
-      shallow(<RelatedProgramsModal {...props} isOpen={false} />).snapshot,
-    ).toMatchSnapshot();
-  });
-});

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;