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

package/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap

@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CertificateBanner snapshot is passing and is downloadable 1`] = `
+<Banner
+  icon={[MockFunction icons.CheckCircle]}
+  variant="success"
+>
+  Congratulations.  Your certificate is ready.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is passing and is earned but unavailable 1`] = `
+<Banner>
+  Your grade and certificate will be ready after 10/20/3030.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `null`;
+
+exports[`CertificateBanner snapshot is restricted 1`] = `
+<Banner
+  variant="danger"
+>
+  Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is restricted and verified 1`] = `
+<Banner
+  variant="danger"
+>
+  Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know.
+    
+  If you would like a refund on your Certificate of Achievement, please contact us.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is restricted and verified with billing email 1`] = `
+<Banner
+  variant="danger"
+>
+  Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know.
+    
+  <format-message-function
+    message={
+      {
+        "defaultMessage": "If you would like a refund on your Certificate of Achievement, please contact our billing address {billingEmail}",
+        "description": "Message to learners to contact billing for certificate refunds",
+        "id": "learner-dash.courseCard.banners.certificateRefundContactBilling",
+      }
+    }
+    values={
+      {
+        "billingEmail": <MailtoLink
+          to="billing@email"
+        >
+          billing@email
+        </MailtoLink>,
+      }
+    }
+  />
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is restricted and verified with support and billing email 1`] = `
+<Banner
+  variant="danger"
+>
+  <format-message-function
+    message={
+      {
+        "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
+        "description": "Restricted certificate warning message",
+        "id": "learner-dash.courseCard.banners.certificateRestricted",
+      }
+    }
+    values={
+      {
+        "supportEmail": <MailtoLink
+          to="suport@email"
+        >
+          suport@email
+        </MailtoLink>,
+      }
+    }
+  />
+    
+  <format-message-function
+    message={
+      {
+        "defaultMessage": "If you would like a refund on your Certificate of Achievement, please contact our billing address {billingEmail}",
+        "description": "Message to learners to contact billing for certificate refunds",
+        "id": "learner-dash.courseCard.banners.certificateRefundContactBilling",
+      }
+    }
+    values={
+      {
+        "billingEmail": <MailtoLink
+          to="billing@email"
+        >
+          billing@email
+        </MailtoLink>,
+      }
+    }
+  />
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is restricted and verified with support email 1`] = `
+<Banner
+  variant="danger"
+>
+  <format-message-function
+    message={
+      {
+        "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
+        "description": "Restricted certificate warning message",
+        "id": "learner-dash.courseCard.banners.certificateRestricted",
+      }
+    }
+    values={
+      {
+        "supportEmail": <MailtoLink
+          to="suport@email"
+        >
+          suport@email
+        </MailtoLink>,
+      }
+    }
+  />
+    
+  If you would like a refund on your Certificate of Achievement, please contact us.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is restricted with billing email 1`] = `
+<Banner
+  variant="danger"
+>
+  Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is restricted with support email 1`] = `
+<Banner
+  variant="danger"
+>
+  <format-message-function
+    message={
+      {
+        "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
+        "description": "Restricted certificate warning message",
+        "id": "learner-dash.courseCard.banners.certificateRestricted",
+      }
+    }
+    values={
+      {
+        "supportEmail": <MailtoLink
+          to="suport@email"
+        >
+          suport@email
+        </MailtoLink>,
+      }
+    }
+  />
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot not passing and audit 1`] = `
+<Banner>
+  Grade required to pass the course: 0.8‏%
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot not passing and has finished 1`] = `
+<Banner
+  variant="warning"
+>
+  You are not eligible for a certificate.
+    
+  <Hyperlink
+    destination="progressUrl"
+    isInline={true}
+  >
+    View grades.
+  </Hyperlink>
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot not passing and is downloadable 1`] = `
+<Banner
+  icon={[MockFunction icons.CheckCircle]}
+  variant="success"
+>
+  Congratulations.  Your certificate is ready.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot not passing and not audit and not finished 1`] = `
+<Banner
+  variant="warning"
+>
+  Grade required for a certificate: 0.8‏%
+</Banner>
+`;

package/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CourseBanner.test.jsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseBanner audit access expired snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
+<Fragment>
+  <Banner>
+    Your audit access to this course has expired.
+      
+    <Hyperlink
+      destination=""
+      isInline={true}
+    >
+      Find another course
+    </Hyperlink>
+  </Banner>
+</Fragment>
+`;
+
+exports[`CourseBanner snapshot: stacking banners 1`] = `<Fragment />`;
+
+exports[`CourseBanner staff snapshot: isStaff 1`] = `<Fragment />`;
+
+exports[`CourseBanner too early has start date snapshot 1`] = `
+<Fragment>
+  <Banner>
+    You can't access this course just yet because the course hasn't started yet. The course will start on 11/11/3030.
+  </Banner>
+</Fragment>
+`;
+
+exports[`CourseBanner too early no start date snapshot 1`] = `<Fragment />`;
+
+exports[`CourseBanner unmet prerequisites snapshot: unmetPrerequisites 1`] = `
+<Fragment>
+  <Banner>
+    You can't access this course just yet because you have not met the pre-requisites.
+  </Banner>
+</Fragment>
+`;

package/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/EntitlementBanner.test.jsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EntitlementBanner snapshot: expiration warning 1`] = `
+<Banner>
+  <format-message-function
+    message={
+      {
+        "defaultMessage": "You must {selectSessionButton} by {changeDeadline} to access the course.",
+        "description": "Entitlement course message when the entitlement is expiring soon.",
+        "id": "learner-dash.courseCard.banners.entitlementExpiringSoon",
+      }
+    }
+    values={
+      {
+        "changeDeadline": "11/11/2022",
+        "selectSessionButton": <Button
+          className="m-0 p-0"
+          onClick={[MockFunction updateSelectSessionModalCallback(my-test-course-number)]}
+          size="inline"
+          variant="link"
+        >
+          select a session
+        </Button>,
+      }
+    }
+  />
+</Banner>
+`;
+
+exports[`EntitlementBanner snapshot: no sessions available 1`] = `
+<Banner
+  variant="warning"
+>
+  <format-message-function
+    message={
+      {
+        "defaultMessage": "There are no sessions available at the moment.  The course team will create new sessions soon.  If no sessions appear, please contact {emailLink} for information.",
+        "description": "Entitlement course message when no sessions are available",
+        "id": "learner-dash.courseCard.banners.entitlementUnavailable",
+      }
+    }
+    values={
+      {
+        "emailLink": <MailtoLink
+          to="test-support-email"
+        >
+          test-support-email
+        </MailtoLink>,
+      }
+    }
+  />
+</Banner>
+`;

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

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardBanners render with isEnrolled false 1`] = `
+<div
+  className="course-card-banners"
+  data-testid="CourseCardBanners"
+>
+  <RelatedProgramsBanner
+    cardId="test-card-id"
+  />
+  <CourseBannerSlot
+    cardId="test-card-id"
+  />
+  <EntitlementBanner
+    cardId="test-card-id"
+  />
+</div>
+`;
+
+exports[`CourseCardBanners renders default CourseCardBanners 1`] = `
+<div
+  className="course-card-banners"
+  data-testid="CourseCardBanners"
+>
+  <RelatedProgramsBanner
+    cardId="test-card-id"
+  />
+  <CourseBannerSlot
+    cardId="test-card-id"
+  />
+  <EntitlementBanner
+    cardId="test-card-id"
+  />
+  <CertificateBanner
+    cardId="test-card-id"
+  />
+  <CreditBanner
+    cardId="test-card-id"
+  />
+</div>
+`;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { reduxHooks } from '../../../../hooks';
+import CourseBannerSlot from '../../../../slots/CourseBannerSlot';
+
+import CertificateBanner from './CertificateBanner';
+import CreditBanner from './CreditBanner';
+import EntitlementBanner from './EntitlementBanner';
+import RelatedProgramsBanner from './RelatedProgramsBanner';
+
+export const CourseCardBanners = ({ cardId }) => {
+  const { isEnrolled } = reduxHooks.useCardEnrollmentData(cardId);
+  return (
+    <div className="course-card-banners" data-testid="CourseCardBanners">
+      <RelatedProgramsBanner cardId={cardId} />
+      <CourseBannerSlot cardId={cardId} />
+      <EntitlementBanner cardId={cardId} />
+      {isEnrolled && <CertificateBanner cardId={cardId} />}
+      {isEnrolled && <CreditBanner cardId={cardId} />}
+    </div>
+  );
+};
+CourseCardBanners.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseCardBanners;

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

@@ -0,0 +1,32 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+
+import CourseCardBanners from '.';
+
+jest.mock('./CourseBanner', () => 'CourseBanner');
+jest.mock('./CertificateBanner', () => 'CertificateBanner');
+jest.mock('./CreditBanner', () => 'CreditBanner');
+jest.mock('./EntitlementBanner', () => 'EntitlementBanner');
+jest.mock('./RelatedProgramsBanner', () => 'RelatedProgramsBanner');
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardEnrollmentData: jest.fn(() => ({ isEnrolled: true })),
+  },
+}));
+
+describe('CourseCardBanners', () => {
+  const props = {
+    cardId: 'test-card-id',
+  };
+  test('renders default CourseCardBanners', () => {
+    const wrapper = shallow(<CourseCardBanners {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+  test('render with isEnrolled false', () => {
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false });
+    const wrapper = shallow(<CourseCardBanners {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,106 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  auditAccessExpired: {
+    id: 'learner-dash.courseCard.banners.auditAccessExpired',
+    description: 'Audit access expiration banner message',
+    defaultMessage: 'Your audit access to this course has expired.',
+  },
+  findAnotherCourse: {
+    id: 'learner-dash.courseCard.banners.findAnotherCourse',
+    description: 'Action prompt taking learners to course exploration',
+    defaultMessage: 'Find another course',
+  },
+  certRestricted: {
+    id: 'learner-dash.courseCard.banners.certificateRestricted',
+    description: 'Restricted certificate warning message',
+    defaultMessage: 'Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.',
+  },
+  certRestrictedNoEmail: {
+    id: 'learner-dash.courseCard.banners.certificateRestrictedNoEmail',
+    description: 'Restricted certificate warning message',
+    defaultMessage: 'Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know.',
+  },
+  certRefundContactBilling: {
+    id: 'learner-dash.courseCard.banners.certificateRefundContactBilling',
+    description: 'Message to learners to contact billing for certificate refunds',
+    defaultMessage: 'If you would like a refund on your Certificate of Achievement, please contact our billing address {billingEmail}',
+  },
+  certRefundContactBillingNoEmail: {
+    id: 'learner-dash.courseCard.banners.certificateRefundContactBillingNoEmail',
+    description: 'Message to learners to contact billing for certificate refunds',
+    defaultMessage: 'If you would like a refund on your Certificate of Achievement, please contact us.',
+  },
+  passingGrade: {
+    id: 'learner-dash.courseCard.banners.passingGrade',
+    description: 'Message to learners with minimum passing grade for the course',
+    defaultMessage: 'Grade required to pass the course: {minPassingGrade}\u200f%',
+  },
+  notEligibleForCert: {
+    id: 'learner-dash.courseCard.banners.notEligibleForCert',
+    description: 'Certificate inelligibility message',
+    defaultMessage: 'You are not eligible for a certificate.',
+  },
+  viewGrades: {
+    id: 'learner-dash.courseCard.banners.viewGrades',
+    description: 'Gradses link text',
+    defaultMessage: 'View grades.',
+  },
+  certReady: {
+    id: 'learner-dash.courseCard.banners.certReady',
+    description: 'Certificate ready message',
+    defaultMessage: 'Congratulations.  Your certificate is ready.',
+  },
+  viewCertificate: {
+    id: 'learner-dash.courseCard.banners.viewCertificate',
+    description: 'Certificate link text',
+    defaultMessage: 'View Certificate.',
+  },
+  certMinGrade: {
+    id: 'learner-dash.courseCard.banners.certMinGrade',
+    description: 'Passing grade requirement message',
+    defaultMessage: 'Grade required for a certificate: {minPassingGrade}\u200f%',
+  },
+  downloadCertificate: {
+    id: 'learner-dash.courseCard.banners.downloadCertificate',
+    description: 'Certificate download link text',
+    defaultMessage: 'Download Certificate.',
+  },
+  gradeAndCertReadyAfter: {
+    id: 'learner-dash.courseCard.banners.gradseAndCertReadyAfter',
+    description: 'Grade and certificate availability date message',
+    defaultMessage: 'Your grade and certificate will be ready after {availableDate}.',
+  },
+  entitlementUnavailable: {
+    id: 'learner-dash.courseCard.banners.entitlementUnavailable',
+    description: 'Entitlement course message when no sessions are available',
+    defaultMessage: 'There are no sessions available at the moment.  The course team will create new sessions soon.  If no sessions appear, please contact {emailLink} for information.',
+  },
+  entitlementExpiringSoon: {
+    id: 'learner-dash.courseCard.banners.entitlementExpiringSoon',
+    description: 'Entitlement course message when the entitlement is expiring soon.',
+    defaultMessage: 'You must {selectSessionButton} by {changeDeadline} to access the course.',
+  },
+  entitlementExpired: {
+    id: 'learner-dash.courseCard.banners.entitlementExpired',
+    description: 'Entitlement course message when the entitlement is expired.',
+    defaultMessage: 'You can no longer change sessions.',
+  },
+  selectSession: {
+    id: 'learner-dash.courseCard.banners.selectSession',
+    description: 'Entitlement session selection link text',
+    defaultMessage: 'select a session',
+  },
+  prerequisitesNotMet: {
+    id: 'learner-dash.courseCard.banners.prerequisitesNotMet',
+    description: 'Message to learners with unmet prerequisites',
+    defaultMessage: 'You can\'t access this course just yet because you have not met the pre-requisites.',
+  },
+  courseHasNotStarted: {
+    id: 'learner-dash.courseCard.banners.courseHasNotStarted',
+    description: 'Course has not started message',
+    defaultMessage: 'You can\'t access this course just yet because the course hasn\'t started yet. The course will start on {startDate}.',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCard Details component does not have change session button on regular course 1`] = `
+<div>
+  <span
+    class="small"
+    data-testid="CourseCardDetails"
+  >
+    provider-name
+     • 
+    test-course-number
+     • access-message
+  </span>
+</div>
+`;
+
+exports[`CourseCard Details component has change session button on entitlement course 1`] = `
+<div>
+  <span
+    class="small"
+    data-testid="CourseCardDetails"
+  >
+    provider-name
+     • 
+    test-course-number
+     • access-message
+     • 
+    <button
+      class="m-0 p-0"
+      variant="link"
+    >
+      change-or-leave-session-message
+    </button>
+  </span>
+</div>
+`;
+
+exports[`CourseCard Details component has change session button on entitlement course but no access message 1`] = `
+<div>
+  <span
+    class="small"
+    data-testid="CourseCardDetails"
+  >
+    provider-name
+     • 
+    test-course-number
+     • 
+    <button
+      class="m-0 p-0"
+      variant="link"
+    >
+      change-or-leave-session-message
+    </button>
+  </span>
+</div>
+`;

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

@@ -0,0 +1,67 @@
+import { useIntl } from '@openedx/frontend-base';
+import { utilHooks, reduxHooks } from '../../../../hooks';
+
+import * as hooks from './hooks';
+import messages from './messages';
+
+export const useAccessMessage = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const enrollment = reduxHooks.useCardEnrollmentData(cardId);
+  const courseRun = reduxHooks.useCardCourseRunData(cardId);
+  const formatDate = utilHooks.useFormatDate();
+  if (!courseRun.isStarted) {
+    if (!courseRun.startDate && !courseRun.advertisedStart) {
+      return null;
+    }
+    const startDate = courseRun.advertisedStart ?? formatDate(courseRun.startDate);
+    return formatMessage(messages.courseStarts, { startDate });
+  }
+  if (enrollment.isEnrolled) {
+    const { isArchived, endDate } = courseRun;
+    const {
+      accessExpirationDate,
+      isAuditAccessExpired,
+    } = enrollment;
+
+    if (enrollment.isAudit && accessExpirationDate) {
+      return formatMessage(
+        isAuditAccessExpired ? messages.accessExpired : messages.accessExpires,
+        { accessExpirationDate: formatDate(accessExpirationDate) },
+      );
+    }
+    if (!endDate) {
+      return null;
+    }
+    return formatMessage(
+      isArchived ? messages.courseEnded : messages.courseEnds,
+      { endDate: formatDate(endDate) },
+    );
+  }
+  return null;
+};
+
+export const useCardDetailsData = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const providerName = reduxHooks.useCardProviderData(cardId).name;
+  const { courseNumber } = reduxHooks.useCardCourseData(cardId);
+  const {
+    isEntitlement,
+    isFulfilled,
+    canChange,
+  } = reduxHooks.useCardEntitlementData(cardId);
+
+  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
+
+  return {
+    providerName: providerName ?? formatMessage(messages.unknownProviderName),
+    accessMessage: hooks.useAccessMessage({ cardId }),
+    isEntitlement,
+    isFulfilled,
+    canChange,
+    openSessionModal,
+    courseNumber,
+    changeOrLeaveSessionMessage: formatMessage(messages.changeOrLeaveSessionButton),
+  };
+};
+
+export default useCardDetailsData;