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

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

@@ -1,196 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-
-import { keyStore } from '@src/utils';
-import { utilHooks, reduxHooks } from '@src/hooks';
-import * as hooks from './hooks';
-import messages from './messages';
-
-jest.mock('@src/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 }),
-  },
-}));
-
-jest.mock('@openedx/frontend-base', () => {
-  const { formatMessage } = jest.requireActual('@src/testUtils');
-  return {
-    ...jest.requireActual('@openedx/frontend-base'),
-    useIntl: () => ({
-      formatMessage,
-    }),
-  };
-});
-
-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 providerName = 'my-provider-name';
-    const providerData = {};
-    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', () => {
-      runHook({ provider: { name: providerName } });
-      expect(out.providerName).toEqual(providerName);
-
-      runHook({ provider: {} });
-      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

@@ -1,45 +0,0 @@
-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.test.jsx

@@ -1,83 +0,0 @@
-import { render, screen } 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;
-  };
-
-  it('has change session button on entitlement course', () => {
-    const wrapper = createWrapper();
-    const sessionButton = screen.getByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
-    expect(sessionButton).toBeInTheDocument();
-
-    const accessMessage = screen.getByText((text) => text.includes(defaultHooks.accessMessage));
-    expect(accessMessage).toBeInTheDocument();
-    // it has 3 separator, 4 column
-    expect(fetchSeparators(wrapper)).toBe(3);
-  });
-
-  it('has change session button on entitlement course but no access message', () => {
-    const wrapper = createWrapper({ accessMessage: null });
-    const sessionButton = screen.getByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
-    expect(sessionButton).toBeInTheDocument();
-
-    const accessMessage = screen.queryByText((text) => text.includes(defaultHooks.accessMessage));
-    expect(accessMessage).toBeNull();
-
-    // it has 2 separator, 3 column
-    expect(fetchSeparators(wrapper)).toBe(2);
-  });
-
-  it('does not have change session button on regular course', () => {
-    const wrapper = createWrapper({ isEntitlement: false });
-    const sessionButton = screen.queryByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
-    expect(sessionButton).toBeNull();
-
-    const accessMessage = screen.getByText((text) => text.includes(defaultHooks.accessMessage));
-    expect(accessMessage).toBeInTheDocument();
-    // it has 2 separator, 3 column
-    expect(fetchSeparators(wrapper)).toBe(2);
-  });
-});

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

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

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

@@ -1,73 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { formatMessage } from '@src/testUtils';
-import { reduxHooks } from '@src/hooks';
-import useActionDisabledState from './hooks';
-import { CourseCardImage } from './CourseCardImage';
-import messages from '../messages';
-
-const homeUrl = 'https://example.com';
-const bannerImgSrc = 'banner-img-src.jpg';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCourseData: jest.fn(() => ({ bannerImgSrc })),
-    useCardCourseRunData: jest.fn(() => ({ homeUrl })),
-    useCardEnrollmentData: jest.fn(),
-    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
-      trackCourseEvent: { eventName, cardId, url },
-    })),
-  },
-}));
-
-jest.mock('./hooks', () => jest.fn());
-
-describe('CourseCardImage', () => {
-  const props = {
-    cardId: 'test-card-id',
-    orientation: 'horizontal',
-  };
-
-  it('renders course image with correct attributes', () => {
-    useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
-    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
-    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
-
-    const image = screen.getByRole('img', { name: formatMessage(messages.bannerAlt) });
-    expect(image).toBeInTheDocument();
-    expect(image.src).toContain(bannerImgSrc);
-    expect(image.parentElement).toHaveClass('horizontal');
-  });
-
-  it('isVerified, should render badge', () => {
-    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
-    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
-
-    const badge = screen.getByText(formatMessage(messages.verifiedBanner));
-    expect(badge).toBeInTheDocument();
-    const badgeImg = screen.getByRole('img', { name: formatMessage(messages.verifiedBannerRibbonAlt) });
-    expect(badgeImg).toBeInTheDocument();
-  });
-
-  it('renders link with correct href if disableCourseTitle is false', () => {
-    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: false });
-    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
-
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('href', homeUrl);
-  });
-  describe('hooks', () => {
-    it('initializes', () => {
-      useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-      reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
-      render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
-      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

@@ -1,82 +0,0 @@
-import { useContext } from 'react';
-import PropTypes from 'prop-types';
-import * as ReactShare from 'react-share';
-
-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 = {
-  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;