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

package/src/components/Banner.test.jsx

@@ -0,0 +1,27 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { Alert } from '@openedx/paragon';
+
+import Banner from './Banner';
+
+describe('Banner', () => {
+  const props = {
+    children: 'Hello, world!',
+  };
+  describe('snapshot', () => {
+    test('renders default banner', () => {
+      const wrapper = shallow(<Banner {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('renders with variants', () => {
+      const wrapper = shallow(<Banner {...props} variant="success" />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+
+      expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success');
+    });
+    test('renders with custom class', () => {
+      const wrapper = shallow(<Banner {...props} className="custom-class" />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/components/__snapshots__/Banner.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner snapshot renders default banner 1`] = `
+<Alert
+  className="mb-0"
+  icon={[MockFunction icons.Info]}
+  variant="info"
+>
+  Hello, world!
+</Alert>
+`;
+
+exports[`Banner snapshot renders with custom class 1`] = `
+<Alert
+  className="custom-class"
+  icon={[MockFunction icons.Info]}
+  variant="info"
+>
+  Hello, world!
+</Alert>
+`;
+
+exports[`Banner snapshot renders with variants 1`] = `
+<Alert
+  className="mb-0"
+  icon={[MockFunction icons.Info]}
+  variant="success"
+>
+  Hello, world!
+</Alert>
+`;

package/src/constants.ts

@@ -0,0 +1 @@
+export const appId = 'org.openedx.frontend.app.learnerDashboard';

package/src/containers/CourseCard/CourseCard.scss

@@ -0,0 +1,75 @@
+@import "@openedx/paragon/scss/core/core";
+
+.course-card {
+  .card {
+    .pgn__card-wrapper-image-cap.vertical {
+      display: flex;
+      min-height: $card-image-vertical-max-height;
+    }
+    .pgn__card-image-cap {
+      border-bottom-left-radius: 0 !important;
+    }
+    .overflow-visible {
+      overflow: visible;
+    }
+    .pgn__card-header-content {
+      margin-top: 1.5rem;
+    }
+    .pgn__card-footer {
+      flex-wrap: nowrap;
+
+      &.vertical {
+        flex-direction: column;
+      }
+
+      .pgn__action-row {
+        align-self: flex-end;
+        white-space: nowrap;
+      }
+    }
+
+    .course-card-verify-ribbon-container {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      text-align: center;
+
+      .badge {
+        border-radius: 0;
+      }
+
+      > img {
+        width: 40px;
+        z-index: 1000;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+
+  .course-card-banners {
+    > .alert {
+      border-radius: 0;
+      box-shadow: none;
+      padding: map-get($spacers, 3) map-get($spacers, 4);
+
+      &:last-of-type {
+        border-bottom-left-radius: $alert-border-radius;
+        border-bottom-right-radius: $alert-border-radius;
+      }
+    }
+
+    .related-programs-banner {
+      .related-programs-list-container {
+        list-style: none;
+        display: inline;
+
+        > li {
+          line-height: 1rem;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCard component snapshot: collapsed 1`] = `
+<div
+  className="mb-4.5 course-card"
+  data-testid="CourseCard"
+  id="test-card-id"
+>
+  <Card
+    orientation="vertical"
+  >
+    <div
+      className="d-flex flex-column w-100"
+    >
+      <div>
+        <CourseCardImage
+          cardId="test-card-id"
+          orientation="horizontal"
+        />
+        <Card.Body>
+          <Card.Header
+            actions={
+              <CourseCardMenu
+                cardId="test-card-id"
+              />
+            }
+            title={
+              <CourseCardTitle
+                cardId="test-card-id"
+              />
+            }
+          />
+          <Card.Section
+            className="pt-0"
+          >
+            <CourseCardDetails
+              cardId="test-card-id"
+            />
+          </Card.Section>
+          <Card.Footer
+            orientation="vertical"
+          >
+            <CourseCardActions
+              cardId="test-card-id"
+            />
+          </Card.Footer>
+        </Card.Body>
+      </div>
+      <CourseCardBanners
+        cardId="test-card-id"
+      />
+    </div>
+  </Card>
+</div>
+`;
+
+exports[`CourseCard component snapshot: not collapsed 1`] = `
+<div
+  className="mb-4.5 course-card"
+  data-testid="CourseCard"
+  id="test-card-id"
+>
+  <Card
+    orientation="horizontal"
+  >
+    <div
+      className="d-flex flex-column w-100"
+    >
+      <div
+        className="d-flex"
+      >
+        <CourseCardImage
+          cardId="test-card-id"
+          orientation="horizontal"
+        />
+        <Card.Body>
+          <Card.Header
+            actions={
+              <CourseCardMenu
+                cardId="test-card-id"
+              />
+            }
+            title={
+              <CourseCardTitle
+                cardId="test-card-id"
+              />
+            }
+          />
+          <Card.Section
+            className="pt-0"
+          >
+            <CourseCardDetails
+              cardId="test-card-id"
+            />
+          </Card.Section>
+          <Card.Footer
+            orientation="horizontal"
+          >
+            <CourseCardActions
+              cardId="test-card-id"
+            />
+          </Card.Footer>
+        </Card.Body>
+      </div>
+      <CourseCardBanners
+        cardId="test-card-id"
+      />
+    </div>
+  </Card>
+</div>
+`;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionButton snapshot is collapsed 1`] = `
+<Button
+  arbitary="props"
+  size="sm"
+/>
+`;
+
+exports[`ActionButton snapshot is not collapsed 1`] = `
+<Button
+  arbitary="props"
+/>
+`;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js

@@ -0,0 +1,8 @@
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+
+export const useIsCollapsed = () => {
+  const { width } = useWindowSize();
+  return width < breakpoints.medium.maxWidth && width > breakpoints.small.maxWidth;
+};
+
+export default useIsCollapsed;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js

@@ -0,0 +1,21 @@
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+import useIsCollapsed from './hooks';
+
+describe('useIsCollapsed', () => {
+  it('returns true only when it is between medium and small', () => {
+    // make sure all three breakpoints gap is large enough for test
+    expect(
+      (breakpoints.large.maxWidth - 1)
+      > (breakpoints.medium.maxWidth - 1)
+      && (breakpoints.medium.maxWidth - 1)
+      > (breakpoints.small.maxWidth - 1),
+    ).toBe(true);
+
+    useWindowSize.mockReturnValue({ width: breakpoints.large.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(false);
+    useWindowSize.mockReturnValue({ width: breakpoints.medium.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(true);
+    useWindowSize.mockReturnValue({ width: breakpoints.small.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(false);
+  });
+});

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button } from '@openedx/paragon';
+
+import useIsCollapsed from './hooks';
+
+export const ActionButton = (props) => {
+  const isSmall = useIsCollapsed();
+  return (
+    <Button
+      {...props}
+      {...isSmall && { size: 'sm' }}
+    />
+  );
+};
+
+export default ActionButton;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx

@@ -0,0 +1,25 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import ActionButton from '.';
+
+import useIsCollapsed from './hooks';
+
+jest.mock('./hooks', () => jest.fn());
+
+describe('ActionButton', () => {
+  const props = {
+    arbitary: 'props',
+  };
+  describe('snapshot', () => {
+    test('is collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(true);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is not collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(false);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
+
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
+import messages from './messages';
+
+export const BeginCourseButton = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
+  const { disableBeginCourse } = useActionDisabledState(cardId);
+
+  const handleClick = reduxHooks.useTrackCourseEvent(
+    track.course.enterCourseClicked,
+    cardId,
+    homeUrl + execEdTrackingParam,
+  );
+  return (
+    <ActionButton
+      disabled={disableBeginCourse}
+      as="a"
+      href="#"
+      onClick={handleClick}
+    >
+      {formatMessage(messages.beginCourse)}
+    </ActionButton>
+  );
+};
+BeginCourseButton.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+export default BeginCourseButton;

package/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx

@@ -0,0 +1,86 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+import useActionDisabledState from '../hooks';
+import BeginCourseButton from './BeginCourseButton';
+
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
+  },
+}));
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
+jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
+jest.mock('./ActionButton', () => 'ActionButton');
+
+let wrapper;
+const homeUrl = 'home-url';
+reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
+const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
+reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
+reduxHooks.useTrackCourseEvent.mockImplementation(
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+);
+
+describe('BeginCourseButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('behavior', () => {
+    it('initializes course run data with cardId', () => {
+      wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads exec education path param', () => {
+      wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads disabled states for begin action from action hooks', () => {
+      wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
+    });
+  });
+  describe('snapshot', () => {
+    describe('disabled', () => {
+      beforeEach(() => {
+        useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
+        wrapper = shallow(<BeginCourseButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+      it('should be disabled', () => {
+        expect(wrapper.instance.props.disabled).toEqual(true);
+      });
+    });
+    describe('enabled', () => {
+      beforeEach(() => {
+        wrapper = shallow(<BeginCourseButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+      it('should be enabled', () => {
+        expect(wrapper.instance.props.disabled).toEqual(false);
+      });
+      it('should track enter course clicked event on click, with exec ed param', () => {
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+          track.course.enterCourseClicked,
+          props.cardId,
+          homeUrl + execEdPath(props.cardId),
+        ));
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
+
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
+import messages from './messages';
+
+export const ResumeButton = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
+  const { disableResumeCourse } = useActionDisabledState(cardId);
+
+  const handleClick = reduxHooks.useTrackCourseEvent(
+    track.course.enterCourseClicked,
+    cardId,
+    resumeUrl + execEdTrackingParam,
+  );
+  return (
+    <ActionButton
+      disabled={disableResumeCourse}
+      as="a"
+      href="#"
+      onClick={handleClick}
+    >
+      {formatMessage(messages.resume)}
+    </ActionButton>
+  );
+};
+ResumeButton.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+export default ResumeButton;

package/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx

@@ -0,0 +1,84 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+import useActionDisabledState from '../hooks';
+import ResumeButton from './ResumeButton';
+
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
+  },
+}));
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
+jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
+jest.mock('./ActionButton', () => 'ActionButton');
+
+const resumeUrl = 'resume-url';
+reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
+const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
+reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
+reduxHooks.useTrackCourseEvent.mockImplementation(
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+);
+
+let wrapper;
+
+describe('ResumeButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  describe('behavior', () => {
+    it('initializes course run data with cardId', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads exec education path param', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
+      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads disabled states for resume action from action hooks', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
+      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
+    });
+  });
+  describe('snapshot', () => {
+    describe('disabled', () => {
+      beforeEach(() => {
+        useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
+        wrapper = shallow(<ResumeButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+      it('should be disabled', () => {
+        expect(wrapper.instance.props.disabled).toEqual(true);
+      });
+    });
+    describe('enabled', () => {
+      beforeEach(() => {
+        wrapper = shallow(<ResumeButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+      it('should be enabled', () => {
+        expect(wrapper.instance.props.disabled).toEqual(false);
+      });
+      it('should track enter course clicked event on click, with exec ed param', () => {
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+          track.course.enterCourseClicked,
+          props.cardId,
+          resumeUrl + execEdPath(props.cardId),
+        ));
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import { reduxHooks } from '../../../../hooks';
+
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
+import messages from './messages';
+
+export const SelectSessionButton = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { disableSelectSession } = useActionDisabledState(cardId);
+  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
+  return (
+    <ActionButton
+      disabled={disableSelectSession}
+      onClick={openSessionModal}
+    >
+      {formatMessage(messages.selectSession)}
+    </ActionButton>
+  );
+};
+SelectSessionButton.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+export default SelectSessionButton;

package/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx

@@ -0,0 +1,34 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+
+import SelectSessionButton from './SelectSessionButton';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useUpdateSelectSessionModalCallback: () => jest.fn().mockName('mockOpenSessionModal'),
+  },
+}));
+jest.mock('../hooks', () => jest.fn(() => ({ disableSelectSession: false })));
+jest.mock('./ActionButton', () => 'ActionButton');
+
+let wrapper;
+
+describe('SelectSessionButton', () => {
+  const props = { cardId: 'cardId' };
+  it('default render', () => {
+    wrapper = shallow(<SelectSessionButton {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.disabled).toEqual(false);
+    expect(wrapper.instance.props.onClick.getMockName()).toEqual(
+      reduxHooks.useUpdateSelectSessionModalCallback().getMockName(),
+    );
+  });
+  test('disabled states', () => {
+    useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
+    wrapper = shallow(<SelectSessionButton {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.disabled).toEqual(true);
+  });
+});

package/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@openedx/frontend-base';
+
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
+
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
+import messages from './messages';
+
+export const ViewCourseButton = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { disableViewCourse } = useActionDisabledState(cardId);
+
+  const handleClick = reduxHooks.useTrackCourseEvent(
+    track.course.enterCourseClicked,
+    cardId,
+    homeUrl,
+  );
+  return (
+    <ActionButton
+      disabled={disableViewCourse}
+      as="a"
+      href="#"
+      onClick={handleClick}
+    >
+      {formatMessage(messages.viewCourse)}
+    </ActionButton>
+  );
+};
+ViewCourseButton.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+export default ViewCourseButton;