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

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

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

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

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

@@ -0,0 +1,60 @@
+// 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/index.scss

@@ -0,0 +1,23 @@
+.program-card {
+  color: white !important;
+  .program-card-banner {
+    .pgn__card-image-cap {
+      height: 6rem;
+    }
+  }
+  .program-type-badge {
+    text-align: left;
+    height: 24px;
+    width: 195px;
+    font-size: .75rem;
+    vertical-align: center;
+    .pgn__icon {
+      width: .75rem !important;
+      height: .75rem !important;
+    }
+  }
+  .program-summary {
+    font-size: .75rem;
+    line-height: 1.25rem;
+  }
+}

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

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

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

@@ -0,0 +1,62 @@
+/* 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.scss

@@ -0,0 +1,5 @@
+.related-programs-modal {
+  .programs-title {
+    font-size: 1.5rem;
+  }
+}

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

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

@@ -0,0 +1,16 @@
+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/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectSessionModal snapshot empty modal with leave option  1`] = `
+<ModalDialog
+  className="p-4 px-4.5"
+  hasCloseButton={false}
+  isFullscreenOnMobile={true}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  size="md"
+  title="test-header"
+>
+  <h3>
+    test-header
+  </h3>
+  <Form.Group
+    className="pt-3"
+  >
+    <Form.Label>
+      test-hint
+    </Form.Label>
+    <Form.RadioSet
+      className="pt-3 pb-4"
+      name="sessions"
+    >
+      <Form.Radio
+        value="leave"
+      >
+        Leave session
+      </Form.Radio>
+    </Form.RadioSet>
+  </Form.Group>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction useSelectSessionModalData.closeSessionModal]}
+      variant="tertiary"
+    >
+      Never mind
+    </Button>
+    <Button>
+      Confirm Session
+    </Button>
+  </ActionRow>
+</ModalDialog>
+`;
+
+exports[`SelectSessionModal snapshot modal with leave option  1`] = `
+<ModalDialog
+  className="p-4 px-4.5"
+  hasCloseButton={false}
+  isFullscreenOnMobile={true}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  size="md"
+  title="test-header"
+>
+  <h3>
+    test-header
+  </h3>
+  <Form.Group
+    className="pt-3"
+  >
+    <Form.Label>
+      test-hint
+    </Form.Label>
+    <Form.RadioSet
+      className="pt-3 pb-4"
+      name="sessions"
+    >
+      <Form.Radio
+        key="test-course-id-1"
+        value="test-course-id-1"
+      >
+        1/2/2000
+         - 
+        1/2/2020
+      </Form.Radio>
+      <Form.Radio
+        key="test-course-id-2"
+        value="test-course-id-2"
+      >
+        2/3/2000
+         - 
+        2/3/2020
+      </Form.Radio>
+      <Form.Radio
+        key="test-course-id-3"
+        value="test-course-id-3"
+      >
+        3/4/2000
+         - 
+        3/4/2020
+      </Form.Radio>
+      <Form.Radio
+        value="leave"
+      >
+        Leave session
+      </Form.Radio>
+    </Form.RadioSet>
+  </Form.Group>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction useSelectSessionModalData.closeSessionModal]}
+      variant="tertiary"
+    >
+      Never mind
+    </Button>
+    <Button>
+      Confirm Session
+    </Button>
+  </ActionRow>
+</ModalDialog>
+`;
+
+exports[`SelectSessionModal snapshot modal without leave option  1`] = `
+<ModalDialog
+  className="p-4 px-4.5"
+  hasCloseButton={false}
+  isFullscreenOnMobile={true}
+  isOpen={true}
+  onClose={[MockFunction utils.nullMethod]}
+  size="md"
+  title="test-header"
+>
+  <h3>
+    test-header
+  </h3>
+  <Form.Group
+    className="pt-3"
+  >
+    <Form.Label>
+      test-hint
+    </Form.Label>
+    <Form.RadioSet
+      className="pt-3 pb-4"
+      name="sessions"
+    >
+      <Form.Radio
+        key="test-course-id-1"
+        value="test-course-id-1"
+      >
+        1/2/2000
+         - 
+        1/2/2020
+      </Form.Radio>
+      <Form.Radio
+        key="test-course-id-2"
+        value="test-course-id-2"
+      >
+        2/3/2000
+         - 
+        2/3/2020
+      </Form.Radio>
+      <Form.Radio
+        key="test-course-id-3"
+        value="test-course-id-3"
+      >
+        3/4/2000
+         - 
+        3/4/2020
+      </Form.Radio>
+    </Form.RadioSet>
+  </Form.Group>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction useSelectSessionModalData.closeSessionModal]}
+      variant="tertiary"
+    >
+      Never mind
+    </Button>
+    <Button>
+      Confirm Session
+    </Button>
+  </ActionRow>
+</ModalDialog>
+`;