snapshot and linting

2021-03-16 18:23:45 -04:00
parent 1f7b875ea6
commit 152931636d
2 changed files with 107 additions and 82 deletions
--- a/src/course-home/data/snapshots/redux.test.js.snap
+++ b/src/course-home/data/snapshots/redux.test.js.snap
@@ -429,6 +429,7 @@ Object {
          "hasVisitedCourse": false,
          "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+Test+Block@12345abcde",
        },
+        "timeOffsetMillis": 0,
        "verifiedMode": Object {
          "accessExpirationDate": "2050-01-01T12:00:00",
          "currency": "USD",
--- a/src/course-home/outline-tab/widgets/UpgradeCard.jsx
+++ b/src/course-home/outline-tab/widgets/UpgradeCard.jsx
@@ -4,17 +4,17 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { FormattedDate, FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';

 import { useModel } from '../../../generic/model-store';
 import { UpgradeButton } from '../../../generic/upgrade-button';

-function UpsellNoFBECardContent(){
+function UpsellNoFBECardContent() {
  return (
    <ul className="fa-ul">
      <li>
-      <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
          id="learning.outline.alert.upgradecard.verifiedCertLink"
          defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
@@ -26,7 +26,7 @@ function UpsellNoFBECardContent(){
        />
      </li>
      <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
          id="learning.outline.alert.upgradecard.nonProfitMission"
          defaultMessage="Support our {nonProfitMission} at edX"
@@ -57,19 +57,19 @@ function UpsellFBEFarAwayCardContent() {
        />
      </li>
      <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
          id="learning.outline.alert.upgradecard.unlock-graded"
          defaultMessage="Unlock your access to all course activities, including {gradedAssignments}"
          values={{
            gradedAssignments: (
-            <span className="font-weight-bold">graded assignments</span>
+              <span className="font-weight-bold">graded assignments</span>
            ),
          }}
        />
      </li>
      <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
          id="learning.outline.alert.upgradecard.fullAccess"
          defaultMessage="{fullAccess} to course content and materials, even after the course ends"
@@ -81,7 +81,7 @@ function UpsellFBEFarAwayCardContent() {
        />
      </li>
      <li>
-        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span> 
+        <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
        <FormattedMessage
          id="learning.outline.alert.upgradecard.nonProfitMission"
          defaultMessage="Support our {nonProfitMission} at edX"
@@ -96,7 +96,7 @@ function UpsellFBEFarAwayCardContent() {
  );
 }

-function UpsellFBESoonCardContent({accessExpirationDate, timezoneFormatArgs}) {
+function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs }) {
  return (
    <div>
      <p>
@@ -105,13 +105,15 @@ function UpsellFBESoonCardContent({accessExpirationDate, timezoneFormatArgs}) {
          defaultMessage="You will lose all access to this course, {includingAnyProgress}, on {date}."
          values={{
            includingAnyProgress: (<span className="font-weight-bold">including any progress</span>),
-            date: (<FormattedDate
+            date: (
+              <FormattedDate
                key="accessDate"
                day="numeric"
                month="long"
                value={new Date(accessExpirationDate)}
                {...timezoneFormatArgs}
-              />),
+              />
+            ),
          }}
        />
      </p>
@@ -120,7 +122,7 @@ function UpsellFBESoonCardContent({accessExpirationDate, timezoneFormatArgs}) {
          id="learning.outline.alert.upgradecard.expirationVerifiedCert"
          defaultMessage="Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the {benefitsOfUpgrading}."
          values={{
-            benefitsOfUpgrading: ( <a className="inline-link-underline" rel="noopener noreferrer" target="_blank" href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-">benefits of upgrading</a>),
+            benefitsOfUpgrading: (<a className="inline-link-underline" rel="noopener noreferrer" target="_blank" href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-">benefits of upgrading</a>),
          }}
        />
      </p>
@@ -132,60 +134,71 @@ UpsellFBESoonCardContent.propTypes = {
  accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
  timezoneFormatArgs: PropTypes.shape({
    timeZone: PropTypes.string,
-  })
+  }),
 };

-function ExpirationCountdown({hoursToExpiration}){
-  let expirationText;
-  console.log(hoursToExpiration)
+UpsellFBESoonCardContent.defaultProps = {
+  timezoneFormatArgs: {},
+};

-  if(hoursToExpiration >= 24){
-    expirationText =<FormattedMessage
+function ExpirationCountdown({ hoursToExpiration }) {
+  let expirationText;
+
+  if (hoursToExpiration >= 24) {
+    expirationText = (
+      <FormattedMessage
        id="learning.outline.alert.upgradecard.expiration.days"
        defaultMessage={`{dayCount, number} {dayCount, plural, 
          one {day}
          other {days}} left`}
        values={{
-          dayCount: (Math.floor(hoursToExpiration/24)),
+          dayCount: (Math.floor(hoursToExpiration / 24)),
        }}
      />
-  } else if (hoursToExpiration >= 1){
-    expirationText= <FormattedMessage
-    id="learning.outline.alert.upgradecard.expiration.hours"
-    defaultMessage={`{hourCount, number} {hourCount, plural,
-      one {hour}
-      other {hours}} left`}
-    values={{
-      hourCount: (hoursToExpiration),
-    }}
-  />
+    );
+  } else if (hoursToExpiration >= 1) {
+    expirationText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expiration.hours"
+        defaultMessage={`{hourCount, number} {hourCount, plural,
+          one {hour}
+          other {hours}} left`}
+        values={{
+          hourCount: (hoursToExpiration),
+        }}
+      />
+    );
  } else {
-    expirationText =<FormattedMessage
-    id="learning.outline.alert.upgradecard.expiration.minutes"
-    defaultMessage="Less than 1 hour left"
-  />
+    expirationText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expiration.minutes"
+        defaultMessage="Less than 1 hour left"
+      />
+    );
  }
-  return(<div className="p-3 upsell-warning">{expirationText}</div>)
+  return (<div className="p-3 upsell-warning">{expirationText}</div>);
 }

 ExpirationCountdown.propTypes = {
  hoursToExpiration: PropTypes.number.isRequired,
 };

-function AccessExpirationDateBanner({accessExpirationDate, timezoneFormatArgs}){
+function AccessExpirationDateBanner({ accessExpirationDate, timezoneFormatArgs }) {
  return (
    <div className="p-3 upsell-warning-light">
      <FormattedMessage
        id="learning.outline.alert.upgradecard.expirationr"
        defaultMessage="Course access will expire {date}"
        values={{
-          date: (<FormattedDate
+          date: (
+            <FormattedDate
              key="accessExpireDate"
              day="numeric"
              month="long"
              value={accessExpirationDate}
              {...timezoneFormatArgs}
-            />),
+            />
+          ),
        }}
      />
    </div>
@@ -196,7 +209,11 @@ AccessExpirationDateBanner.propTypes = {
  accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
  timezoneFormatArgs: PropTypes.shape({
    timeZone: PropTypes.string,
-  })
+  }),
+};
+
+AccessExpirationDateBanner.defaultProps = {
+  timezoneFormatArgs: {},
 };

 function UpgradeCard({ courseId }) {
@@ -217,7 +234,6 @@ function UpgradeCard({ courseId }) {
  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
  const correctedTime = new Date(Date.now() + timeOffsetMillis);

-
  if (!verifiedMode) {
    return null;
  }
@@ -256,9 +272,8 @@ function UpgradeCard({ courseId }) {
    });
  };

-  
-  /* 
-  There are 4 parts that change in the upgrade card: 
+  /*
+  There are 4 parts that change in the upgrade card:
    upgradeCardHeaderText
    expirationBanner
    upsellMessage
@@ -269,61 +284,76 @@ function UpgradeCard({ courseId }) {
  let upsellMessage;
  let offerCode;

-  if(!!accessExpiration && !!contentTypeGatingEnabled){
-    if(!!offer){ // if there's a first purchase discount, show it
+  if (!!accessExpiration && !!contentTypeGatingEnabled) {
+    if (offer) { // if there's a first purchase discount, show it
+      const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) / 1000 / 60 / 60);

-      const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) /1000/ 60 /60)
-      
-      upgradeCardHeaderText = <FormattedMessage
+      upgradeCardHeaderText = (
+        <FormattedMessage
          id="learning.outline.alert.upgradecard.firstTimeLearnerDiscount"
          defaultMessage="{percentage}% First-Time Learner Discount"
          values={{
            percentage: (offer.percentage),
          }}
        />
-      
-      expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToDiscountExpiration}/>
-      upsellMessage = <UpsellFBEFarAwayCardContent />
-      offerCode = <div className="bg-light p-3 text-center discount-info">
-      <FormattedMessage
-        id="learning.outline.alert.upgradecard.code"
-        defaultMessage="Use code {code} at checkout"
-        values={{
-          code: (<span className="font-weight-bold">{offer.code}</span>),
-        }}
-      />
-    </div>
-
+      );
+      expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToDiscountExpiration} />;
+      upsellMessage = <UpsellFBEFarAwayCardContent />;
+      offerCode = (
+        <div className="bg-light p-3 text-center discount-info">
+          <FormattedMessage
+            id="learning.outline.alert.upgradecard.code"
+            defaultMessage="Use code {code} at checkout"
+            values={{
+              code: (<span className="font-weight-bold">{offer.code}</span>),
+            }}
+          />
+        </div>
+      );
    } else {
-      const accessExpirationDate = new Date(accessExpiration.expirationDate)
-      const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) /1000/ 60 /60)
+      const accessExpirationDate = new Date(accessExpiration.expirationDate);
+      const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) / 1000 / 60 / 60);

-      if(hoursToAccessExpiration >= (7*24)) {
-          upgradeCardHeaderText = <FormattedMessage
+      if (hoursToAccessExpiration >= (7 * 24)) {
+        upgradeCardHeaderText = (
+          <FormattedMessage
            id="learning.outline.alert.upgradecard.accessExpiration"
            defaultMessage="Upgrade your course today"
          />
-          expirationBanner = <AccessExpirationDateBanner accessExpirationDate={accessExpirationDate} timezoneFormatArgs={timezoneFormatArgs} />
-          upsellMessage = <UpsellFBEFarAwayCardContent />
-        } else { // more urgent messaging if there's less than 7 days left
-          upgradeCardHeaderText = <FormattedMessage
+        );
+        expirationBanner = (
+          <AccessExpirationDateBanner
+            accessExpirationDate={accessExpirationDate}
+            timezoneFormatArgs={timezoneFormatArgs}
+          />
+        );
+        upsellMessage = <UpsellFBEFarAwayCardContent />;
+      } else { // more urgent messaging if there's less than 7 days left
+        upgradeCardHeaderText = (
+          <FormattedMessage
            id="learning.outline.alert.upgradecard.accessExpirationUrgent"
            defaultMessage="Course Access Expiration"
          />
-          expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToAccessExpiration}/>
-          upsellMessage = <UpsellFBESoonCardContent accessExpirationDate={accessExpirationDate} timezoneFormatArgs={timezoneFormatArgs} />
-        }
+        );
+        expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToAccessExpiration} />;
+        upsellMessage = (
+          <UpsellFBESoonCardContent
+            accessExpirationDate={accessExpirationDate}
+            timezoneFormatArgs={timezoneFormatArgs}
+          />
+        );
      }
-  } else { //FBE is turned off
-    upgradeCardHeaderText = <FormattedMessage
+    }
+  } else { // FBE is turned off
+    upgradeCardHeaderText = (
+      <FormattedMessage
        id="learning.outline.alert.upgradecard.pursueAverifiedCertificate"
        defaultMessage="Pursue a verified certificate"
      />
-    upsellMessage = <UpsellNoFBECardContent />
+    );
+    upsellMessage = (<UpsellNoFBECardContent />);
  }

-
-
  return (
    <section className="mb-4 card">
      <h2 className="h5 m-3" id="outline-sidebar-upgrade-header">
@@ -346,12 +376,6 @@ function UpgradeCard({ courseId }) {

 UpgradeCard.propTypes = {
  courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-  onLearnMore: PropTypes.func,
-};
-
-UpgradeCard.defaultProps = {
-  onLearnMore: null,
 };

 export default injectIntl(UpgradeCard);