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

package/src/containers/CourseCard/components/CourseCardDetails/hooks.test.js

@@ -0,0 +1,186 @@
+import { useIntl } from '@openedx/frontend-base';
+
+import { keyStore } from 'utils';
+import { utilHooks, reduxHooks } from 'hooks';
+
+import * as hooks from './hooks';
+import messages from './messages';
+
+jest.mock('hooks', () => ({
+  utilHooks: {
+    useFormatDate: jest.fn(),
+  },
+  reduxHooks: {
+    useCardCourseData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useCardProviderData: jest.fn(),
+    useUpdateSelectSessionModalCallback: (...args) => ({ updateSelectSessionModalCallback: args }),
+  },
+}));
+
+const cardId = 'my-test-card-id';
+const courseNumber = 'test-course-number';
+const useAccessMessage = 'test-access-message';
+const mockAccessMessage = (args) => ({ cardId: args.cardId, useAccessMessage });
+const formatDate = jest.fn(date => `formatted-${date}`);
+utilHooks.useFormatDate.mockReturnValue(formatDate);
+const hookKeys = keyStore(hooks);
+
+describe('CourseCardDetails hooks', () => {
+  let out;
+  const { formatMessage } = useIntl();
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useCardDetailsData', () => {
+    const providerData = {
+      name: 'my-provider-name',
+    };
+    const entitlementData = {
+      isEntitlement: false,
+      disableViewCourse: false,
+      isFulfilled: false,
+      isExpired: false,
+      canChange: false,
+      hasSessions: false,
+    };
+    const runHook = ({ provider = {}, entitlement = {} }) => {
+      jest.spyOn(hooks, hookKeys.useAccessMessage)
+        .mockImplementationOnce(mockAccessMessage);
+      reduxHooks.useCardProviderData.mockReturnValueOnce({
+        ...providerData,
+        ...provider,
+      });
+      reduxHooks.useCardEntitlementData.mockReturnValueOnce({
+        ...entitlementData,
+        ...entitlement,
+      });
+      reduxHooks.useCardCourseData.mockReturnValueOnce({ courseNumber });
+      out = hooks.useCardDetailsData({ cardId });
+    };
+    beforeEach(() => {
+      runHook({});
+    });
+    it('forwards useAccessMessage output, called with cardId', () => {
+      expect(out.accessMessage).toEqual(mockAccessMessage({ cardId }));
+    });
+    it('forwards provider name if it exists, else formatted unknown provider name', () => {
+      expect(out.providerName).toEqual(providerData.name);
+      runHook({ provider: { name: '' } });
+      expect(out.providerName).toEqual(formatMessage(messages.unknownProviderName));
+    });
+    it('forward changeOrLeaveSessionMessage', () => {
+      expect(out.changeOrLeaveSessionMessage).toEqual(formatMessage(messages.changeOrLeaveSessionButton));
+    });
+  });
+
+  describe('useAccessMessage', () => {
+    const enrollmentData = {
+      isEnrolled: true,
+      accessExpirationDate: 'test-expiration-date',
+      isAudit: false,
+      isAuditAccessExpired: false,
+    };
+    const courseRunData = {
+      isStarted: true,
+      isArchived: false,
+      startDate: '10/10/1000',
+      endDate: '10/20/2000',
+    };
+    const runHook = ({ enrollment = {}, courseRun = {} }) => {
+      reduxHooks.useCardCourseRunData.mockReturnValueOnce({
+        ...courseRunData,
+        ...courseRun,
+      });
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+        ...enrollmentData,
+        ...enrollment,
+      });
+      out = hooks.useAccessMessage({ cardId });
+    };
+
+    it('loads data from enrollment and course run data based on course number', () => {
+      runHook({});
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
+    });
+
+    describe('if not started yet', () => {
+      it('returns accessExpired message with accessExpirationDate', () => {
+        runHook({
+          enrollment: { isAudit: true, isAuditAccessExpired: true },
+          courseRun: { isStarted: false },
+        });
+        expect(out).toEqual(formatMessage(
+          messages.courseStarts,
+          { startDate: formatDate(courseRunData.startDate) },
+        ));
+      });
+    });
+
+    describe('if started', () => {
+      describe('is audit', () => {
+        describe('expired', () => {
+          it('returns accessExpired message with accessExpirationDate', () => {
+            runHook({ enrollment: { isAudit: true, isAuditAccessExpired: true } });
+            expect(out).toEqual(formatMessage(
+              messages.accessExpired,
+              { accessExpirationDate: formatDate(enrollmentData.accessExpirationDate) },
+            ));
+          });
+        });
+
+        describe('not expired', () => {
+          it('returns accessExpires message with accessExpirationDate', () => {
+            runHook({ enrollment: { isAudit: true } });
+            expect(out).toEqual(formatMessage(
+              messages.accessExpires,
+              { accessExpirationDate: formatDate(enrollmentData.accessExpirationDate) },
+            ));
+          });
+          it('no endDate and no accessExpirationDate, returns null', () => {
+            runHook({ enrollment: { isAudit: true, accessExpirationDate: '' }, courseRun: { endDate: '' } });
+            expect(out).toEqual(null);
+          });
+          it('no accessExpirationDate and is not archive, return courseEnds with endDate', () => {
+            runHook({ enrollment: { isAudit: true, accessExpirationDate: '' } });
+            expect(out).toEqual(formatMessage(
+              messages.courseEnds,
+              { endDate: formatDate(courseRunData.endDate) },
+            ));
+          });
+          it('no accessExpirationDate and is archived, return courseEnded with endDate', () => {
+            runHook({ enrollment: { isAudit: true, accessExpirationDate: '' }, courseRun: { isArchived: true } });
+            expect(out).toEqual(formatMessage(
+              messages.courseEnded,
+              { endDate: formatDate(courseRunData.endDate) },
+            ));
+          });
+        });
+      });
+
+      describe('if verified and not ended', () => {
+        it('returns course ends message with course end date', () => {
+          runHook({});
+          expect(out).toEqual(formatMessage(
+            messages.courseEnds,
+            { endDate: formatDate(courseRunData.endDate) },
+          ));
+        });
+      });
+
+      describe('if verified and ended', () => {
+        it('returns course ended message with course end date', () => {
+          runHook({ courseRun: { isArchived: true } });
+          expect(out).toEqual(formatMessage(
+            messages.courseEnded,
+            { endDate: formatDate(courseRunData.endDate) },
+          ));
+        });
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardDetails/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from '@openedx/paragon';
+
+import useCardDetailsData from './hooks';
+import './index.scss';
+
+export const CourseCardDetails = ({ cardId }) => {
+  const {
+    providerName,
+    accessMessage,
+    isEntitlement,
+    isFulfilled,
+    canChange,
+    openSessionModal,
+    courseNumber,
+    changeOrLeaveSessionMessage,
+  } = useCardDetailsData({ cardId });
+
+  return (
+    <span className="small" data-testid="CourseCardDetails">
+      {providerName} • {courseNumber}
+      {!(isEntitlement && !isFulfilled) && accessMessage && (
+        ` • ${accessMessage}`
+      )}
+      {isEntitlement && isFulfilled && canChange ? (
+        <>
+          {' • '}
+          <Button variant="link" size="inline" className="m-0 p-0" onClick={openSessionModal}>
+            {changeOrLeaveSessionMessage}
+          </Button>
+        </>
+      ) : null}
+    </span>
+  );
+};
+
+CourseCardDetails.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+CourseCardDetails.defaultProps = {};
+
+export default CourseCardDetails;

package/src/containers/CourseCard/components/CourseCardDetails/index.scss

@@ -0,0 +1,7 @@
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+a.course-card-title {
+  color: $black;
+}

package/src/containers/CourseCard/components/CourseCardDetails/index.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import CourseCardDetails from '.';
+
+import hooks from './hooks';
+
+jest.mock('./hooks', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const cardId = 'test-card-id';
+
+describe('CourseCard Details component', () => {
+  const defaultHooks = {
+    providerName: 'provider-name',
+    accessMessage: 'access-message',
+    openSessionModal: jest.fn().mockName('useSelectSession.openSessionModal'),
+    isEntitlement: true,
+    isFulfilled: true,
+    canChange: true,
+    courseNumber: 'test-course-number',
+    changeOrLeaveSessionMessage: 'change-or-leave-session-message',
+  };
+  const createWrapper = (hookOverrides = {}) => {
+    hooks.mockReturnValueOnce({
+      ...defaultHooks,
+      ...hookOverrides,
+    });
+    return render(<CourseCardDetails cardId={cardId} />);
+  };
+
+  const fetchSeparators = (wrapper) => {
+    const elements = wrapper.container.querySelectorAll('*');
+    let separatorsCount = 0;
+
+    elements.forEach((element) => {
+      // Use a regular expression to find all occurrences of '•' in the text content
+      const separatorMatches = element.textContent.match(/•/g);
+
+      // If matches are found, add the count to the total
+      if (separatorMatches) {
+        separatorsCount += separatorMatches.length;
+      }
+    });
+
+    return separatorsCount;
+  };
+
+  test('has change session button on entitlement course', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.container).toMatchSnapshot();
+    // it has 3 separator, 4 column
+    expect(fetchSeparators(wrapper)).toBe(3);
+  });
+
+  test('has change session button on entitlement course but no access message', () => {
+    const wrapper = createWrapper({ accessMessage: null });
+    expect(wrapper.container).toMatchSnapshot();
+    // it has 2 separator, 3 column
+    expect(fetchSeparators(wrapper)).toBe(2);
+  });
+
+  test('does not have change session button on regular course', () => {
+    const wrapper = createWrapper({ isEntitlement: false });
+    expect(wrapper.container).toMatchSnapshot();
+    // it has 2 separator, 3 column
+    expect(fetchSeparators(wrapper)).toBe(2);
+  });
+});

package/src/containers/CourseCard/components/CourseCardDetails/messages.js

@@ -0,0 +1,41 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  accessExpired: {
+    id: 'learner-dash.courseCard.CourseCardDetails.accessExpired',
+    description: 'Course access expiration date message on course card for expired access.',
+    defaultMessage: 'Access expired {accessExpirationDate}',
+  },
+  accessExpires: {
+    id: 'learner-dash.courseCard.CourseCardDetails.accessExpires',
+    description: 'Course access expiration date message on course card.',
+    defaultMessage: 'Access expires {accessExpirationDate}',
+  },
+  courseEnded: {
+    id: 'learner-dash.courseCard.CourseCardDetails.courseEnded',
+    description: 'Course ended message on course card.',
+    defaultMessage: 'Course ended {endDate}',
+  },
+  courseEnds: {
+    id: 'learner-dash.courseCard.CourseCardDetails.courseEnds',
+    description: 'Course ending message on course card.',
+    defaultMessage: 'Course ends {endDate}',
+  },
+  courseStarts: {
+    id: 'learner-dash.courseCard.CourseCardDetails.courseStarts',
+    description: 'Course start date message on course card.',
+    defaultMessage: 'Course starts {startDate}',
+  },
+  unknownProviderName: {
+    id: 'learner-dash.courseCard.CourseCardDetails.unknownProviderName',
+    description: 'Provider name display when name is unknown',
+    defaultMessage: 'Unknown',
+  },
+  changeOrLeaveSessionButton: {
+    id: 'learner-dash.courseCard.CourseCardDetails.changeOrLeaveSessionButton',
+    description: 'Button for trigger change or leave session for entitlement course',
+    defaultMessage: 'Change or leave session',
+  },
+});
+
+export default messages;

package/src/containers/CourseCard/components/CourseCardImage.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+
+import { Badge } from '@openedx/paragon';
+
+import track from '../../../tracking';
+import { reduxHooks } from '../../../hooks';
+import verifiedRibbon from '../../../assets/verified-ribbon.png';
+import useActionDisabledState from './hooks';
+
+import messages from '../messages';
+
+const { courseImageClicked } = track.course;
+
+export const CourseCardImage = ({ cardId, orientation }) => {
+  const { formatMessage } = useIntl();
+  const { bannerImgSrc } = reduxHooks.useCardCourseData(cardId);
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { isVerified } = reduxHooks.useCardEnrollmentData(cardId);
+  const { disableCourseTitle } = useActionDisabledState(cardId);
+  const handleImageClicked = reduxHooks.useTrackCourseEvent(courseImageClicked, cardId, homeUrl);
+  const wrapperClassName = `pgn__card-wrapper-image-cap d-inline-block overflow-visible ${orientation}`;
+  const image = (
+    <>
+      <img
+        // w-100 is necessary for images on Safari, otherwise stretches full height of the image
+        // https://stackoverflow.com/a/44250830
+        className="pgn__card-image-cap w-100 show"
+        src={bannerImgSrc}
+        alt={formatMessage(messages.bannerAlt)}
+      />
+      {
+        isVerified && (
+          <span
+            className="course-card-verify-ribbon-container"
+            title={formatMessage(messages.verifiedHoverDescription)}
+          >
+            <Badge as="div" variant="success" className="w-100">
+              {formatMessage(messages.verifiedBanner)}
+            </Badge>
+            <img src={verifiedRibbon} alt={formatMessage(messages.verifiedBannerRibbonAlt)} />
+          </span>
+        )
+      }
+    </>
+  );
+  return disableCourseTitle
+    ? (<div className={wrapperClassName}>{image}</div>)
+    : (
+      <a
+        className={wrapperClassName}
+        href={homeUrl}
+        onClick={handleImageClicked}
+        tabIndex="-1"
+      >
+        {image}
+      </a>
+    );
+};
+CourseCardImage.propTypes = {
+  cardId: PropTypes.string.isRequired,
+  orientation: PropTypes.string.isRequired,
+};
+
+CourseCardImage.defaultProps = {};
+
+export default CourseCardImage;

package/src/containers/CourseCard/components/CourseCardImage.test.jsx

@@ -0,0 +1,66 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+import useActionDisabledState from './hooks';
+import CourseCardImage from './CourseCardImage';
+
+const homeUrl = 'home-url';
+
+jest.mock('tracking', () => ({
+  course: {
+    courseImageClicked: jest.fn().mockName('segment.courseImageClicked'),
+  },
+}));
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })),
+    useCardCourseRunData: jest.fn(() => ({ homeUrl })),
+    useCardEnrollmentData: jest.fn(() => ({ isVerified: true })),
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
+      trackCourseEvent: { eventName, cardId, url },
+    })),
+  },
+}));
+jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
+
+describe('CourseCardImage', () => {
+  const props = {
+    cardId: 'cardId',
+    orientation: 'orientation',
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('snapshot', () => {
+    test('renders clickable link course Image', () => {
+      const wrapper = shallow(<CourseCardImage {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.type).toBe('a');
+      expect(wrapper.instance.props.onClick).toEqual(
+        reduxHooks.useTrackCourseEvent(
+          track.course.courseImageClicked,
+          props.cardId,
+          homeUrl,
+        ),
+      );
+    });
+    test('renders disabled link', () => {
+      useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
+      const wrapper = shallow(<CourseCardImage {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.type).toBe('div');
+    });
+  });
+  describe('behavior', () => {
+    it('initializes', () => {
+      shallow(<CourseCardImage {...props} />);
+      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
+        props.cardId,
+      );
+      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as ReactShare from 'react-share';
+
+import { StrictDict } from '@edx/react-unit-test-utils';
+import { useIntl } from '@openedx/frontend-base';
+import { Dropdown } from '@openedx/paragon';
+
+import MasqueradeUserContext from '../../../../data/contexts/MasqueradeUserContext';
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
+
+import messages from './messages';
+
+export const testIds = StrictDict({
+  emailSettingsModalToggle: 'emailSettingsModalToggle',
+});
+
+export const SocialShareMenu = ({ cardId, emailSettings }) => {
+  const { formatMessage } = useIntl();
+
+  const { courseName } = reduxHooks.useCardCourseData(cardId);
+  const { isEmailEnabled, isExecEd2UCourse } = reduxHooks.useCardEnrollmentData(cardId);
+  const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
+  const { isMasquerading } = useContext(MasqueradeUserContext);
+
+  const handleTwitterShare = reduxHooks.useTrackCourseEvent(track.socialShare, cardId, 'twitter');
+  const handleFacebookShare = reduxHooks.useTrackCourseEvent(track.socialShare, cardId, 'facebook');
+
+  if (isExecEd2UCourse) {
+    return null;
+  }
+
+  return (
+    <>
+      {isEmailEnabled && (
+        <Dropdown.Item
+          disabled={isMasquerading}
+          onClick={emailSettings.show}
+          data-testid={testIds.emailSettingsModalToggle}
+        >
+          {formatMessage(messages.emailSettings)}
+        </Dropdown.Item>
+      )}
+      {facebook.isEnabled && (
+        <ReactShare.FacebookShareButton
+          url={facebook.shareUrl}
+          onClick={handleFacebookShare}
+          title={formatMessage(messages.shareQuote, {
+            courseName,
+            socialBrand: facebook.socialBrand,
+          })}
+          resetButtonStyle={false}
+          className="pgn__dropdown-item dropdown-item"
+        >
+          {formatMessage(messages.shareToFacebook)}
+        </ReactShare.FacebookShareButton>
+      )}
+      {twitter.isEnabled && (
+        <ReactShare.TwitterShareButton
+          url={twitter.shareUrl}
+          onClick={handleTwitterShare}
+          title={formatMessage(messages.shareQuote, {
+            courseName,
+            socialBrand: twitter.socialBrand,
+          })}
+          resetButtonStyle={false}
+          className="pgn__dropdown-item dropdown-item"
+        >
+          {formatMessage(messages.shareToTwitter)}
+        </ReactShare.TwitterShareButton>
+      )}
+    </>
+  );
+};
+SocialShareMenu.propTypes = {
+  cardId: PropTypes.string.isRequired,
+  emailSettings: PropTypes.shape({
+    show: PropTypes.func,
+  }).isRequired,
+};
+
+export default SocialShareMenu;