Compare commits
16 Commits
bjh/accura
...
open-relea
| Author | SHA1 | Date | |
|---|---|---|---|
|
bde0a80cf0 | ||
|
|
88005ea5d2 | ||
|
|
e86f4a88cc | ||
|
|
cf58ff3d3f | ||
|
|
32ac3632d0 | ||
|
|
6abf8531bb | ||
|
|
353964e75c | ||
|
|
6a376b20c7 | ||
|
|
162f0ceeb5 | ||
|
|
9dcb91af9e | ||
|
|
4d1ed0f357 | ||
|
|
d94c7ad003 | ||
|
|
edef36becb | ||
|
|
29a13f729a | ||
|
|
6a6bddc5c8 | ||
|
|
b12f184d18 |
@@ -37,6 +37,9 @@ Today, if the URL only specifies the course ID, we need to pick a sequence to sh
|
||||
|
||||
Similarly, if the URL doesn't contain a unit ID, we use the `position` field of the sequence to determine which unit we want to display from that sequence. If the position isn't specified in the sequence, we choose the first unit of the sequence. After determining which unit to display, we update the URL to match. After the URL is updated, the application will attempt to load that unit via an iFrame.
|
||||
|
||||
_This URL scheme has been expanded upon in
|
||||
[ADR #8: Liberal courseware path handling](./0008-liberal-courseware-path-handling.md)._
|
||||
|
||||
## "Container" components vs. display components
|
||||
|
||||
This application makes use of a few "container" components at the top level - CoursewareContainer and CourseHomeContainer.
|
||||
|
||||
90
docs/decisions/0008-liberal-courseware-path-handling.md
Normal file
90
docs/decisions/0008-liberal-courseware-path-handling.md
Normal file
@@ -0,0 +1,90 @@
|
||||
# Liberal courseware path handling
|
||||
|
||||
## Status
|
||||
|
||||
Accepted
|
||||
|
||||
_This updates some of the content in [ADR #2: Courseware page decisions](./0002-courseware-page-decisions.md)._
|
||||
|
||||
## Context
|
||||
|
||||
The courseware container currently accepts three path forms:
|
||||
|
||||
1. `/course/:courseId`
|
||||
2. `/course/:courseId/:sequenceId`
|
||||
3. `/course/:courseId/:sequenceId/:unitId`
|
||||
|
||||
Forms #1 and #2 are always redirected to Form #3 via simple set of rules:
|
||||
|
||||
* If the sequenceId is not specified, choose the first sequence in the course.
|
||||
* If the unitId is not specified, choose the active unit in the sequence,
|
||||
or the first unit if none are active.
|
||||
|
||||
Thus, Form #3 is effectively the canonoical path;
|
||||
all Learning MFE units should be served from it.
|
||||
We acknowledge that the best user experience is to link directly to the canonoical
|
||||
path when possible, since it skips the redirection steps.
|
||||
Still, there are times when it is necessary or prudent to link just to a course or
|
||||
a sequence.
|
||||
|
||||
Through recent work in the LMS, we are realizing that there are _also_ times where it
|
||||
would be simpler or more performant to link a user to an
|
||||
_entire section without specifying a squence_ or to a
|
||||
_unit without including the sequence_.
|
||||
Specifically, this capability would let as avoid further modulestore or
|
||||
block transformer queries in order to discern the course structure when trying to
|
||||
direct a learner to a section or unit.
|
||||
Futhermore, we hypothesize that being able to build a Learning MFE courseware link
|
||||
with just a unit ID or a section ID will be a nice simplifying quality for future
|
||||
development or debugging.
|
||||
|
||||
## Decision
|
||||
|
||||
The courseware container will accept five total path forms:
|
||||
|
||||
1. `/course/:courseId`
|
||||
2. `/course/:courseId/:sectionId`
|
||||
3. `/course/:courseId/:sectionId/:unitId`
|
||||
4. `/course/:courseId/:sequenceId`
|
||||
5. `/course/:courseId/:unitId`
|
||||
6. `/course/:courseId/:sequenceId/:unitId`
|
||||
|
||||
The redirection rules are as follows:
|
||||
|
||||
* Forms #1 redirects to Form #4 by selecting the first sequence in the course.
|
||||
* Form #2 redirects to Form #4 by selecting to the first sequence in the section.
|
||||
* Form #3 redirects to Form #5 by dropping the section ID.
|
||||
* Form #4 redirects to Form #6 by choosing the active unit in the sequence
|
||||
(or the first unit, if none are active).
|
||||
* Form #5 redirects to Form #6 by filling in the ID of the sequence that the
|
||||
specified unit belongs to (in the edge case where the unit belongs to multiple
|
||||
sequences, the first sequence is selected).
|
||||
|
||||
As before, Form #5 is the canonocial courseware path, which is always redirected to
|
||||
by any of the other courseware path forms.
|
||||
|
||||
## Consequences
|
||||
|
||||
The above decision is implemented.
|
||||
|
||||
## Further work
|
||||
|
||||
At some point, we may decide to further extend the URL scheme to be
|
||||
more human-readable.
|
||||
|
||||
We can't make UsageKeys themselves more readable because they're tied to student state,
|
||||
but we could introduce a new optional `slug` field on Sequences,
|
||||
which would be captured and propagated to the learning_sequences API.
|
||||
We could eventually do something similar to Units, since those slugs only have to be sequence-local.
|
||||
|
||||
So eventually, URLs could look less like:
|
||||
|
||||
```
|
||||
|
||||
https://learning.edx.org/course/course-v1:edX+DemoX.1+2T2019/block-v1:edX+DemoX.1+2T2019+type@sequential+block@e0a61b3d5a2046949e76d12cac5df493/block-v1:edX+DemoX.1+2T2019+type@vertical+block@52dbad5a28e140f291a476f92ce11996
|
||||
```
|
||||
|
||||
And more like:
|
||||
```
|
||||
https://learning.edx.org/course/course-v1:edX+DemoX.1+2T2019/Being_Social/Teams
|
||||
```
|
||||
77
package-lock.json
generated
77
package-lock.json
generated
@@ -1413,9 +1413,9 @@
|
||||
}
|
||||
},
|
||||
"@edx/paragon": {
|
||||
"version": "13.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.16.0.tgz",
|
||||
"integrity": "sha512-E1XCpiHoD0TaTUV6o5FxfkxfUhtBmSsUCmR7LSTPXpiuI7ouK2PxbRoxCT8CnHbSAeeYKN0vPHNGEd9hFRm7zg==",
|
||||
"version": "13.17.3",
|
||||
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.17.3.tgz",
|
||||
"integrity": "sha512-fUjrfNmeWIpEsroK0JuajIBHHh0BIvZTnBusTRqzvl5fFivNuhEdcG33oEZSVvfyRYtCgtnWmSRbvN5vGhjK6g==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
||||
@@ -1440,12 +1440,17 @@
|
||||
"uncontrollable": "7.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.35",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
|
||||
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
|
||||
"integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
|
||||
"version": "5.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
|
||||
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.34"
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.35"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5766,22 +5771,22 @@
|
||||
"dev": true
|
||||
},
|
||||
"codecov": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/codecov/-/codecov-3.7.2.tgz",
|
||||
"integrity": "sha512-fmCjAkTese29DUX3GMIi4EaKGflHa4K51EoMc29g8fBHawdk/+KEq5CWOeXLdd9+AT7o1wO4DIpp/Z1KCqCz1g==",
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.1.tgz",
|
||||
"integrity": "sha512-Qm7ltx1pzLPsliZY81jyaQ80dcNR4/JpcX0IHCIWrHBXgseySqbdbYfkdiXd7o/xmzQpGRVCKGYeTrHUpn6Dcw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argv": "0.0.2",
|
||||
"ignore-walk": "3.0.3",
|
||||
"js-yaml": "3.13.1",
|
||||
"js-yaml": "3.14.0",
|
||||
"teeny-request": "6.0.1",
|
||||
"urlgrey": "0.4.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"js-yaml": {
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
|
||||
"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
|
||||
"version": "3.14.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
|
||||
"integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argparse": "^1.0.7",
|
||||
@@ -6979,9 +6984,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"detect-node-es": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.0.0.tgz",
|
||||
"integrity": "sha512-S4AHriUkTX9FoFvL4G8hXDcx6t3gp2HpfCza3Q0v6S78gul2hKWifLQbeW+ZF89+hSm2ZIc/uF3J97ZgytgTRg=="
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
|
||||
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
|
||||
},
|
||||
"detect-port-alt": {
|
||||
"version": "1.1.6",
|
||||
@@ -7147,9 +7152,9 @@
|
||||
}
|
||||
},
|
||||
"domutils": {
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
|
||||
"integrity": "sha512-jBC0vOsECI4OMdD0GC9mGn7NXPLb+Qt6KW1YDQzeQYRUFKmNG8lh7mO5HiELfr+lLQE7loDVI4QcAxV80HS+RA==",
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.0.tgz",
|
||||
"integrity": "sha512-Ho16rzNMOFk2fPwChGh3D2D9OEHAfG19HgmRR2l+WLSsIstNsAYBzePH412bL0y5T44ejABIVfTHQ8nqi/tBCg==",
|
||||
"requires": {
|
||||
"dom-serializer": "^1.0.1",
|
||||
"domelementtype": "^2.0.1",
|
||||
@@ -17353,18 +17358,18 @@
|
||||
}
|
||||
},
|
||||
"react-bootstrap": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.1.tgz",
|
||||
"integrity": "sha512-jbJNGx9n4JvKgxlvT8DLKSeF3VcqnPJXS9LFdzoZusiZCCGoYecZ9qSCBH5n2A+kjmuura9JkvxI9l7HD+bIdQ==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
|
||||
"integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.2",
|
||||
"@babel/runtime": "^7.13.8",
|
||||
"@restart/context": "^2.1.4",
|
||||
"@restart/hooks": "^0.3.21",
|
||||
"@restart/hooks": "^0.3.26",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/invariant": "^2.2.33",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react": ">=16.9.35",
|
||||
"@types/react-transition-group": "^4.4.0",
|
||||
"@types/react-transition-group": "^4.4.1",
|
||||
"@types/warning": "^3.0.0",
|
||||
"classnames": "^2.2.6",
|
||||
"dom-helpers": "^5.1.2",
|
||||
@@ -17373,8 +17378,18 @@
|
||||
"prop-types-extra": "^1.1.0",
|
||||
"react-overlays": "^5.0.0",
|
||||
"react-transition-group": "^4.4.1",
|
||||
"uncontrollable": "^7.0.0",
|
||||
"uncontrollable": "^7.2.1",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.13.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
|
||||
"integrity": "sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-break": {
|
||||
@@ -21369,11 +21384,11 @@
|
||||
"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
|
||||
},
|
||||
"use-sidecar": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.4.tgz",
|
||||
"integrity": "sha512-A5ggIS3/qTdxCAlcy05anO2/oqXOfpmxnpRE1Jm+fHHtCvUvNSZDGqgOSAXPriBVAcw2fMFFkh5v5KqrFFhCMA==",
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz",
|
||||
"integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==",
|
||||
"requires": {
|
||||
"detect-node-es": "^1.0.0",
|
||||
"detect-node-es": "^1.1.0",
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
"@edx/frontend-component-footer": "10.1.4",
|
||||
"@edx/frontend-enterprise": "4.2.3",
|
||||
"@edx/frontend-platform": "1.8.4",
|
||||
"@edx/paragon": "13.16.0",
|
||||
"@edx/paragon": "13.17.3",
|
||||
"@fortawesome/fontawesome-svg-core": "1.2.34",
|
||||
"@fortawesome/free-brands-svg-icons": "5.13.1",
|
||||
"@fortawesome/free-regular-svg-icons": "5.13.1",
|
||||
@@ -70,7 +70,7 @@
|
||||
"@testing-library/react": "10.3.0",
|
||||
"@testing-library/user-event": "12.0.17",
|
||||
"axios-mock-adapter": "1.18.2",
|
||||
"codecov": "3.7.2",
|
||||
"codecov": "3.8.1",
|
||||
"es-check": "5.1.4",
|
||||
"glob": "7.1.6",
|
||||
"husky": "3.1.0",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import {
|
||||
FormattedMessage, FormattedDate, injectIntl, intlShape,
|
||||
} from '@edx/frontend-platform/i18n';
|
||||
@@ -21,7 +22,10 @@ function AccessExpirationAlert({ intl, payload }) {
|
||||
|
||||
const {
|
||||
accessExpiration,
|
||||
courseId,
|
||||
org,
|
||||
userTimezone,
|
||||
analyticsPageName,
|
||||
} = payload;
|
||||
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
|
||||
|
||||
@@ -66,6 +70,17 @@ function AccessExpirationAlert({ intl, payload }) {
|
||||
);
|
||||
}
|
||||
|
||||
const logClick = () => {
|
||||
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: org,
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'FBE_banner',
|
||||
linkName: `${analyticsPageName}_audit_access_expires`,
|
||||
linkType: 'link',
|
||||
pageName: analyticsPageName,
|
||||
});
|
||||
};
|
||||
|
||||
let deadlineMessage = null;
|
||||
if (upgradeDeadline && upgradeUrl) {
|
||||
deadlineMessage = (
|
||||
@@ -92,6 +107,7 @@ function AccessExpirationAlert({ intl, payload }) {
|
||||
className="font-weight-bold"
|
||||
style={{ textDecoration: 'underline' }}
|
||||
destination={upgradeUrl}
|
||||
onClick={logClick}
|
||||
>
|
||||
{intl.formatMessage(messages.upgradeNow)}
|
||||
</Hyperlink>
|
||||
@@ -150,7 +166,10 @@ AccessExpirationAlert.propTypes = {
|
||||
upgradeDeadline: PropTypes.string,
|
||||
upgradeUrl: PropTypes.string,
|
||||
}).isRequired,
|
||||
courseId: PropTypes.string.isRequired,
|
||||
org: PropTypes.string.isRequired,
|
||||
userTimezone: PropTypes.string.isRequired,
|
||||
analyticsPageName: PropTypes.string.isRequired,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
|
||||
@@ -3,11 +3,14 @@ import { useAlert } from '../../generic/user-messages';
|
||||
|
||||
const AccessExpirationAlert = React.lazy(() => import('./AccessExpirationAlert'));
|
||||
|
||||
function useAccessExpirationAlert(accessExpiration, userTimezone, topic) {
|
||||
function useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, topic, analyticsPageName) {
|
||||
const isVisible = !!accessExpiration; // If it exists, show it.
|
||||
const payload = {
|
||||
accessExpiration,
|
||||
courseId,
|
||||
org,
|
||||
userTimezone,
|
||||
analyticsPageName,
|
||||
};
|
||||
|
||||
useAlert(isVisible, {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import {
|
||||
FormattedMessage, FormattedDate, injectIntl, intlShape,
|
||||
} from '@edx/frontend-platform/i18n';
|
||||
@@ -11,7 +12,10 @@ import messages from './messages';
|
||||
|
||||
function OfferAlert({ intl, payload }) {
|
||||
const {
|
||||
analyticsPageName,
|
||||
courseId,
|
||||
offer,
|
||||
org,
|
||||
userTimezone,
|
||||
} = payload;
|
||||
|
||||
@@ -27,6 +31,17 @@ function OfferAlert({ intl, payload }) {
|
||||
} = offer;
|
||||
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
|
||||
|
||||
const logClick = () => {
|
||||
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: org,
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'welcome',
|
||||
linkName: `${analyticsPageName}_welcome`,
|
||||
linkType: 'link',
|
||||
pageName: analyticsPageName,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Alert type={ALERT_TYPES.INFO}>
|
||||
<span className="font-weight-bold">
|
||||
@@ -61,6 +76,7 @@ function OfferAlert({ intl, payload }) {
|
||||
className="font-weight-bold"
|
||||
style={{ textDecoration: 'underline' }}
|
||||
destination={upgradeUrl}
|
||||
onClick={logClick}
|
||||
>
|
||||
{intl.formatMessage(messages.upgradeNow)}
|
||||
</Hyperlink>
|
||||
@@ -71,6 +87,7 @@ function OfferAlert({ intl, payload }) {
|
||||
OfferAlert.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
payload: PropTypes.shape({
|
||||
courseId: PropTypes.string.isRequired,
|
||||
offer: PropTypes.shape({
|
||||
code: PropTypes.string.isRequired,
|
||||
discountedPrice: PropTypes.string.isRequired,
|
||||
@@ -79,7 +96,9 @@ OfferAlert.propTypes = {
|
||||
percentage: PropTypes.number.isRequired,
|
||||
upgradeUrl: PropTypes.string.isRequired,
|
||||
}).isRequired,
|
||||
org: PropTypes.string.isRequired,
|
||||
userTimezone: PropTypes.string.isRequired,
|
||||
analyticsPageName: PropTypes.string.isRequired,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
|
||||
@@ -3,10 +3,13 @@ import { useAlert } from '../../generic/user-messages';
|
||||
|
||||
const OfferAlert = React.lazy(() => import('./OfferAlert'));
|
||||
|
||||
export function useOfferAlert(offer, userTimezone, topic) {
|
||||
export function useOfferAlert(courseId, offer, org, userTimezone, topic, analyticsPageName) {
|
||||
const isVisible = !!offer; // if it exists, show it.
|
||||
const payload = {
|
||||
analyticsPageName,
|
||||
courseId,
|
||||
offer,
|
||||
org,
|
||||
userTimezone,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
import './block.factory';
|
||||
|
||||
// Generates an Array of block IDs, either from a single block or an array of blocks.
|
||||
const getIds = (attr) => {
|
||||
const blocks = Array.isArray(attr) ? attr : [attr];
|
||||
return blocks.map(block => block.id);
|
||||
};
|
||||
|
||||
// Generates an Object in { [block.id]: block } format, either from a single block or an array of blocks.
|
||||
const getBlocks = (attr) => {
|
||||
const blocks = Array.isArray(attr) ? attr : [attr];
|
||||
// eslint-disable-next-line no-return-assign,no-sequences
|
||||
return blocks.reduce((acc, block) => (acc[block.id] = block, acc), {});
|
||||
};
|
||||
|
||||
Factory.define('courseBlocks')
|
||||
.option('courseId', 'course-v1:edX+DemoX+Demo_Course')
|
||||
.option('units', ['courseId'], courseId => ([
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
),
|
||||
]))
|
||||
.option('sequence', ['courseId', 'units'], (courseId, child) => Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: getIds(child) },
|
||||
{ courseId },
|
||||
))
|
||||
.option('section', ['courseId', 'sequence'], (courseId, child) => Factory.build(
|
||||
'block',
|
||||
{ type: 'chapter', children: getIds(child) },
|
||||
{ courseId },
|
||||
))
|
||||
.option('course', ['courseId', 'section'], (courseId, child) => Factory.build(
|
||||
'block',
|
||||
{ type: 'course', children: getIds(child) },
|
||||
{ courseId },
|
||||
))
|
||||
.attr(
|
||||
'blocks',
|
||||
['course', 'section', 'sequence', 'units'],
|
||||
(course, section, sequence, units) => ({
|
||||
[course.id]: course,
|
||||
...getBlocks(section),
|
||||
...getBlocks(sequence),
|
||||
...getBlocks(units),
|
||||
}),
|
||||
)
|
||||
.attr('root', ['course'], course => course.id);
|
||||
|
||||
/**
|
||||
* Builds a course with a single chapter, sequence, and unit.
|
||||
*/
|
||||
export default function buildSimpleCourseBlocks(courseId, title, options = {}) {
|
||||
const sequenceBlock = options.sequenceBlock || [Factory.build(
|
||||
'block',
|
||||
{ display_name: 'Title of Sequence', type: 'sequential' },
|
||||
{ courseId },
|
||||
)];
|
||||
const sectionBlock = options.sectionBlock || Factory.build(
|
||||
'block',
|
||||
{
|
||||
type: 'chapter',
|
||||
display_name: 'Title of Section',
|
||||
complete: options.complete || false,
|
||||
effort_time: 15,
|
||||
effort_activities: 2,
|
||||
resume_block: options.resumeBlock || false,
|
||||
children: sequenceBlock.map(block => block.id),
|
||||
},
|
||||
{ courseId },
|
||||
);
|
||||
const courseBlock = options.courseBlock || Factory.build(
|
||||
'block',
|
||||
{ type: 'course', display_name: title, children: [sectionBlock.id] },
|
||||
{ courseId },
|
||||
);
|
||||
return {
|
||||
courseBlocks: options.courseBlocks || Factory.build(
|
||||
'courseBlocks',
|
||||
{ courseId },
|
||||
{
|
||||
sequence: sequenceBlock,
|
||||
section: sectionBlock,
|
||||
course: courseBlock,
|
||||
},
|
||||
),
|
||||
sequenceBlock,
|
||||
sectionBlock,
|
||||
courseBlock,
|
||||
};
|
||||
}
|
||||
@@ -1,91 +1,13 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
|
||||
import courseMetadataBase from '../../../shared/data/__factories__/courseMetadataBase.factory';
|
||||
|
||||
Factory.define('courseHomeMetadata')
|
||||
.sequence(
|
||||
'courseId', (courseId) => `course-v1:edX+DemoX+Demo_Course_${courseId}`,
|
||||
)
|
||||
.extend(courseMetadataBase)
|
||||
.option('host', 'http://localhost:18000')
|
||||
.attrs({
|
||||
is_staff: false,
|
||||
original_user_is_staff: false,
|
||||
number: 'DemoX',
|
||||
org: 'edX',
|
||||
title: 'Demonstration Course',
|
||||
is_self_paced: false,
|
||||
is_enrolled: false,
|
||||
can_load_courseware: false,
|
||||
})
|
||||
.attr(
|
||||
'tabs', ['courseId', 'host'], (courseId, host) => {
|
||||
const tabs = [
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Course',
|
||||
priority: 0,
|
||||
slug: 'courseware',
|
||||
type: 'courseware',
|
||||
},
|
||||
{ courseId, path: 'course/' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Discussion',
|
||||
priority: 1,
|
||||
slug: 'discussion',
|
||||
type: 'discussion',
|
||||
},
|
||||
{ courseId, path: 'discussion/forum/' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Wiki',
|
||||
priority: 2,
|
||||
slug: 'wiki',
|
||||
type: 'wiki',
|
||||
},
|
||||
{ courseId, path: 'course_wiki' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Progress',
|
||||
priority: 3,
|
||||
slug: 'progress',
|
||||
type: 'progress',
|
||||
},
|
||||
{ courseId, path: 'progress' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Instructor',
|
||||
priority: 4,
|
||||
slug: 'instructor',
|
||||
type: 'instructor',
|
||||
},
|
||||
{ courseId, path: 'instructor' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Dates',
|
||||
priority: 5,
|
||||
slug: 'dates',
|
||||
type: 'dates',
|
||||
},
|
||||
{ courseId, path: 'dates' },
|
||||
),
|
||||
];
|
||||
|
||||
return tabs.map(
|
||||
tab => ({
|
||||
tab_id: tab.slug,
|
||||
title: tab.title,
|
||||
url: `${host}${tab.url}`,
|
||||
}),
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import './courseHomeMetadata.factory';
|
||||
import './datesTabData.factory';
|
||||
import './outlineTabData.factory';
|
||||
import './progressTabData.factory';
|
||||
|
||||
@@ -1,23 +1,18 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
|
||||
import buildSimpleCourseBlocks from './courseBlocks.factory';
|
||||
import { buildMinimalCourseBlocks } from '../../../shared/data/__factories__/courseBlocks.factory';
|
||||
|
||||
Factory.define('outlineTabData')
|
||||
.option('courseId', 'course-v1:edX+DemoX+Demo_Course')
|
||||
.option('host', 'http://localhost:18000')
|
||||
.option('dateBlocks', [])
|
||||
.attr('course_tools', ['host', 'courseId'], (host, courseId) => ([{
|
||||
analytics_id: 'edx.bookmarks',
|
||||
title: 'Bookmarks',
|
||||
url: `${host}/courses/${courseId}/bookmarks/`,
|
||||
}]))
|
||||
.option('date_blocks', [])
|
||||
.attr('course_blocks', ['courseId'], courseId => {
|
||||
const { courseBlocks } = buildSimpleCourseBlocks(courseId);
|
||||
const { courseBlocks } = buildMinimalCourseBlocks(courseId);
|
||||
return {
|
||||
blocks: courseBlocks.blocks,
|
||||
};
|
||||
})
|
||||
.attr('dates_widget', ['dateBlocks'], (dateBlocks) => ({
|
||||
.attr('dates_widget', ['date_blocks'], (dateBlocks) => ({
|
||||
course_date_blocks: dateBlocks,
|
||||
user_timezone: 'UTC',
|
||||
}))
|
||||
@@ -40,6 +35,18 @@ Factory.define('outlineTabData')
|
||||
goal_options: [],
|
||||
selected_goal: null,
|
||||
},
|
||||
course_tools: [
|
||||
{
|
||||
analytics_id: 'edx.bookmarks',
|
||||
title: 'Bookmarks',
|
||||
url: 'https://example.com/bookmarks',
|
||||
},
|
||||
{
|
||||
analytics_id: 'edx.tool.verified_upgrade',
|
||||
title: 'Upgrade to Verified',
|
||||
url: 'https://example.com/upgrade',
|
||||
},
|
||||
],
|
||||
dates_banner_info: {
|
||||
content_type_gating_enabled: false,
|
||||
missed_gated_content: false,
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
|
||||
// Sample data helpful when developing & testing, to see a variety of configurations.
|
||||
// This set of data may not be realistic, but it is intended to demonstrate many UI results.
|
||||
Factory.define('progressTabData')
|
||||
.attrs({
|
||||
certificate_data: null,
|
||||
completion_summary: {
|
||||
complete_count: 1,
|
||||
incomplete_count: 1,
|
||||
locked_count: 0,
|
||||
},
|
||||
course_grade: {
|
||||
percent: 0,
|
||||
is_passing: false,
|
||||
},
|
||||
section_scores: [
|
||||
{
|
||||
display_name: 'First section',
|
||||
subsections: [
|
||||
{
|
||||
assignment_type: 'Homework',
|
||||
display_name: 'First subsection',
|
||||
has_graded_assignment: true,
|
||||
num_points_earned: 0,
|
||||
num_points_possible: 1,
|
||||
percent_graded: 0.0,
|
||||
show_correctness: 'always',
|
||||
show_grades: true,
|
||||
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
display_name: 'Second section',
|
||||
subsections: [
|
||||
{
|
||||
assignment_type: 'Homework',
|
||||
display_name: 'Second subsection',
|
||||
has_graded_assignment: true,
|
||||
num_points_earned: 1,
|
||||
num_points_possible: 1,
|
||||
percent_graded: 1.0,
|
||||
show_correctness: 'always',
|
||||
show_grades: true,
|
||||
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
enrollment_mode: 'audit',
|
||||
grading_policy: {
|
||||
assignment_policies: [
|
||||
{
|
||||
num_droppable: 1,
|
||||
short_label: 'HW',
|
||||
type: 'Homework',
|
||||
weight: 1,
|
||||
},
|
||||
],
|
||||
grade_range: {
|
||||
pass: 0.75,
|
||||
},
|
||||
},
|
||||
studio_url: 'http://studio.edx.org/settings/grading/course-v1:edX+Test+run',
|
||||
verification_data: {
|
||||
link: null,
|
||||
status: 'none',
|
||||
status_date: null,
|
||||
},
|
||||
});
|
||||
@@ -19,7 +19,6 @@ Object {
|
||||
"courseHomeMeta": Object {
|
||||
"course-v1:edX+DemoX+Demo_Course_1": Object {
|
||||
"canLoadCourseware": false,
|
||||
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
|
||||
"id": "course-v1:edX+DemoX+Demo_Course_1",
|
||||
"isEnrolled": false,
|
||||
"isSelfPaced": false,
|
||||
@@ -308,7 +307,6 @@ Object {
|
||||
"courseHomeMeta": Object {
|
||||
"course-v1:edX+DemoX+Demo_Course_1": Object {
|
||||
"canLoadCourseware": false,
|
||||
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
|
||||
"id": "course-v1:edX+DemoX+Demo_Course_1",
|
||||
"isEnrolled": false,
|
||||
"isSelfPaced": false,
|
||||
@@ -390,7 +388,7 @@ Object {
|
||||
"effortTime": undefined,
|
||||
"icon": null,
|
||||
"id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
|
||||
"lmsWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
|
||||
"legacyWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1?experience=legacy",
|
||||
"sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
|
||||
"showLink": true,
|
||||
"title": "Title of Sequence",
|
||||
@@ -405,7 +403,12 @@ Object {
|
||||
Object {
|
||||
"analyticsId": "edx.bookmarks",
|
||||
"title": "Bookmarks",
|
||||
"url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/bookmarks/",
|
||||
"url": "https://example.com/bookmarks",
|
||||
},
|
||||
Object {
|
||||
"analyticsId": "edx.tool.verified_upgrade",
|
||||
"title": "Upgrade to Verified",
|
||||
"url": "https://example.com/upgrade",
|
||||
},
|
||||
],
|
||||
"datesBannerInfo": Object {
|
||||
@@ -429,7 +432,6 @@ 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",
|
||||
|
||||
@@ -56,8 +56,12 @@ export function normalizeOutlineBlocks(courseId, blocks) {
|
||||
effortTime: block.effort_time,
|
||||
icon: block.icon,
|
||||
id: block.id,
|
||||
lmsWebUrl: block.lms_web_url,
|
||||
showLink: !!block.lms_web_url, // we reconstruct the url ourselves as an MFE-internal <Link>
|
||||
legacyWebUrl: block.legacy_web_url,
|
||||
// The presence of an legacy URL for the sequence indicates that we want this
|
||||
// sequence to be a clickable link in the outline (even though, if the new
|
||||
// courseware experience is active, we will ignore `legacyWebUrl` and build a
|
||||
// link to the MFE ourselves).
|
||||
showLink: !!block.legacy_web_url,
|
||||
title: block.display_name,
|
||||
};
|
||||
break;
|
||||
@@ -124,24 +128,25 @@ export async function getDatesTabData(courseId) {
|
||||
}
|
||||
|
||||
export async function getProgressTabData(courseId) {
|
||||
global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/progress`);
|
||||
// TODO: (AA-213) update once flag is in place
|
||||
// const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
|
||||
// try {
|
||||
// const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
// return camelCaseObject(data);
|
||||
// } catch (error) {
|
||||
// const { httpErrorStatus } = error && error.customAttributes;
|
||||
// if (httpErrorStatus === 404) {
|
||||
// global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/progress`);
|
||||
// return {};
|
||||
// }
|
||||
// throw error;
|
||||
// }
|
||||
const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
|
||||
try {
|
||||
const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
return camelCaseObject(data);
|
||||
} catch (error) {
|
||||
const { httpErrorStatus } = error && error.customAttributes;
|
||||
if (httpErrorStatus === 404) {
|
||||
global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/progress`);
|
||||
return {};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function getProctoringInfoData(courseId) {
|
||||
const url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
|
||||
export async function getProctoringInfoData(courseId, username) {
|
||||
let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
|
||||
if (username) {
|
||||
url += `&username=${encodeURIComponent(username)}`;
|
||||
}
|
||||
try {
|
||||
const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
return data;
|
||||
@@ -157,12 +162,8 @@ export async function getProctoringInfoData(courseId) {
|
||||
export async function getOutlineTabData(courseId) {
|
||||
const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
|
||||
let { tabData } = {};
|
||||
let requestTime = Date.now();
|
||||
let responseTime = requestTime;
|
||||
try {
|
||||
requestTime = Date.now();
|
||||
tabData = await getAuthenticatedHttpClient().get(url);
|
||||
responseTime = Date.now();
|
||||
} catch (error) {
|
||||
const { httpErrorStatus } = error && error.customAttributes;
|
||||
if (httpErrorStatus === 404) {
|
||||
@@ -172,18 +173,6 @@ export async function getOutlineTabData(courseId) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Time offset computation should move down into the HttpClient wrapper to maintain a global time correction reference
|
||||
// Requires 'Access-Control-Expose-Headers: Date' on the server response per https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#access-control-expose-headers
|
||||
const headerDate = tabData.headers.date;
|
||||
|
||||
let timeOffsetMillis = 0;
|
||||
if (headerDate !== undefined) {
|
||||
const headerTime = Date.parse(headerDate);
|
||||
const roundTripMillis = requestTime - responseTime;
|
||||
const localTime = responseTime - (roundTripMillis / 2); // Roughly compensate for transit time
|
||||
timeOffsetMillis = headerTime - localTime;
|
||||
}
|
||||
|
||||
const {
|
||||
data,
|
||||
} = tabData;
|
||||
@@ -203,7 +192,6 @@ export async function getOutlineTabData(courseId) {
|
||||
const welcomeMessageHtml = data.welcome_message_html;
|
||||
|
||||
return {
|
||||
timeOffsetMillis, // This should move to a global time correction reference
|
||||
accessExpiration,
|
||||
canShowUpgradeSock,
|
||||
courseBlocks,
|
||||
|
||||
@@ -17,7 +17,7 @@ const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
||||
|
||||
describe('Data layer integration tests', () => {
|
||||
const courseHomeMetadata = Factory.build('courseHomeMetadata');
|
||||
const { courseId } = courseHomeMetadata;
|
||||
const { id: courseId } = courseHomeMetadata;
|
||||
let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
|
||||
courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ function DatesBannerContainer({
|
||||
courseDateBlocks,
|
||||
datesBannerInfo,
|
||||
hasEnded,
|
||||
logUpgradeLinkClick,
|
||||
model,
|
||||
tabFetch,
|
||||
}) {
|
||||
@@ -43,13 +44,19 @@ function DatesBannerContainer({
|
||||
name: 'upgradeToCompleteGradedBanner',
|
||||
// verifiedUpgradeLink can be null if we've passed the upgrade deadline
|
||||
shouldDisplay: upgradeToCompleteGraded && verifiedUpgradeLink,
|
||||
clickHandler: () => global.location.replace(verifiedUpgradeLink),
|
||||
clickHandler: () => {
|
||||
logUpgradeLinkClick();
|
||||
global.location.replace(verifiedUpgradeLink);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'upgradeToResetBanner',
|
||||
// verifiedUpgradeLink can be null if we've passed the upgrade deadline
|
||||
shouldDisplay: upgradeToReset && verifiedUpgradeLink,
|
||||
clickHandler: () => global.location.replace(verifiedUpgradeLink),
|
||||
clickHandler: () => {
|
||||
logUpgradeLinkClick();
|
||||
global.location.replace(verifiedUpgradeLink);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'resetDatesBanner',
|
||||
@@ -80,12 +87,14 @@ DatesBannerContainer.propTypes = {
|
||||
verifiedUpgradeLink: PropTypes.string,
|
||||
}).isRequired,
|
||||
hasEnded: PropTypes.bool,
|
||||
logUpgradeLinkClick: PropTypes.func,
|
||||
model: PropTypes.string.isRequired,
|
||||
tabFetch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
DatesBannerContainer.defaultProps = {
|
||||
hasEnded: false,
|
||||
logUpgradeLinkClick: () => {},
|
||||
};
|
||||
|
||||
export default DatesBannerContainer;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from './messages';
|
||||
@@ -17,6 +18,10 @@ function DatesTab({ intl }) {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
org,
|
||||
} = useModel('courseHomeMeta', courseId);
|
||||
|
||||
const {
|
||||
courseDateBlocks,
|
||||
datesBannerInfo,
|
||||
@@ -26,6 +31,17 @@ function DatesTab({ intl }) {
|
||||
/** [MM-P2P] Experiment */
|
||||
const mmp2p = initDatesMMP2P(courseId);
|
||||
|
||||
const logUpgradeLinkClick = () => {
|
||||
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: org,
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'personalized_learner_schedules',
|
||||
linkName: 'dates_upgrade',
|
||||
linkType: 'button',
|
||||
pageName: 'dates_tab',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div role="heading" aria-level="1" className="h2 my-3">
|
||||
@@ -37,6 +53,7 @@ function DatesTab({ intl }) {
|
||||
courseDateBlocks={courseDateBlocks}
|
||||
datesBannerInfo={datesBannerInfo}
|
||||
hasEnded={hasEnded}
|
||||
logUpgradeLinkClick={logUpgradeLinkClick}
|
||||
model="dates"
|
||||
tabFetch={fetchDatesTab}
|
||||
/>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Route } from 'react-router';
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import { Factory } from 'rosie';
|
||||
import { getConfig, history } from '@edx/frontend-platform';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
import { waitForElementToBeRemoved } from '@testing-library/dom';
|
||||
@@ -18,6 +19,7 @@ import { appendBrowserTimezoneToUrl } from '../../utils';
|
||||
import { UserMessagesProvider } from '../../generic/user-messages';
|
||||
|
||||
initializeMockApp();
|
||||
jest.mock('@edx/frontend-platform/analytics');
|
||||
|
||||
describe('DatesTab', () => {
|
||||
let axiosMock;
|
||||
@@ -61,7 +63,7 @@ describe('DatesTab', () => {
|
||||
beforeEach(() => {
|
||||
const datesTabData = Factory.build('datesTabData');
|
||||
const courseMetadata = Factory.build('courseHomeMetadata');
|
||||
const { courseId } = courseMetadata;
|
||||
const { id: courseId } = courseMetadata;
|
||||
let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
|
||||
courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
|
||||
|
||||
@@ -133,7 +135,7 @@ describe('DatesTab', () => {
|
||||
|
||||
describe('Dates banner container ', () => {
|
||||
const courseMetadata = Factory.build('courseHomeMetadata', { is_self_paced: true, is_enrolled: true });
|
||||
const { courseId } = courseMetadata;
|
||||
const { id: courseId } = courseMetadata;
|
||||
const datesTabData = Factory.build('datesTabData');
|
||||
|
||||
let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
|
||||
@@ -241,5 +243,57 @@ describe('DatesTab', () => {
|
||||
// confirm "Shift due dates" button has not rendered
|
||||
expect(screen.queryByRole('button', { name: 'Shift due dates' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of upgrade button in upgradeToCompleteGradedBanner', async () => {
|
||||
sendTrackEvent.mockClear();
|
||||
datesTabData.datesBannerInfo = {
|
||||
contentTypeGatingEnabled: true,
|
||||
missedDeadlines: false,
|
||||
missedGatedContent: false,
|
||||
verifiedUpgradeLink: 'http://localhost:18130/basket/add/?sku=8CF08E5',
|
||||
};
|
||||
|
||||
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`).reply(200, datesTabData);
|
||||
render(component);
|
||||
|
||||
const upgradeButton = await waitFor(() => screen.getByRole('button', { name: 'Upgrade now' }));
|
||||
fireEvent.click(upgradeButton);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'personalized_learner_schedules',
|
||||
linkName: 'dates_upgrade',
|
||||
linkType: 'button',
|
||||
pageName: 'dates_tab',
|
||||
});
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of upgrade button in upgradeToResetBanner', async () => {
|
||||
sendTrackEvent.mockClear();
|
||||
datesTabData.datesBannerInfo = {
|
||||
contentTypeGatingEnabled: true,
|
||||
missedDeadlines: true,
|
||||
missedGatedContent: true,
|
||||
verifiedUpgradeLink: 'http://localhost:18130/basket/add/?sku=8CF08E5',
|
||||
};
|
||||
|
||||
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`).reply(200, datesTabData);
|
||||
render(component);
|
||||
|
||||
const upgradeButton = await waitFor(() => screen.getByRole('button', { name: 'Upgrade to shift due dates' }));
|
||||
fireEvent.click(upgradeButton);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'personalized_learner_schedules',
|
||||
linkName: 'dates_upgrade',
|
||||
linkType: 'button',
|
||||
pageName: 'dates_tab',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { FormattedDate } from '@edx/frontend-platform/i18n';
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useModel } from '../../generic/model-store';
|
||||
import { isLearnerAssignment } from '../dates-tab/utils';
|
||||
import './DateSummary.scss';
|
||||
|
||||
@@ -12,12 +15,30 @@ export default function DateSummary({
|
||||
/** [MM-P2P] Experiment */
|
||||
mmp2p,
|
||||
}) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
const {
|
||||
org,
|
||||
} = useModel('courseHomeMeta', courseId);
|
||||
|
||||
const linkedTitle = dateBlock.link && isLearnerAssignment(dateBlock);
|
||||
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
|
||||
|
||||
/** [MM-P2P] Experiment */
|
||||
const showMMP2P = mmp2p.state.isEnabled && (dateBlock.dateType === 'verified-upgrade-deadline');
|
||||
|
||||
const logVerifiedUpgradeClick = () => {
|
||||
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: org,
|
||||
courserun_key: courseId,
|
||||
linkCategory: '(none)',
|
||||
linkName: 'course_home_dates',
|
||||
linkType: 'link',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<li className="container p-0 mb-3 small text-dark-500">
|
||||
<div className="row">
|
||||
@@ -50,15 +71,27 @@ export default function DateSummary({
|
||||
) : (
|
||||
<div className="row ml-4 pr-2">
|
||||
<div className="date-summary-text">
|
||||
{linkedTitle
|
||||
&& <div className="font-weight-bold mt-2"><a href={dateBlock.link}>{dateBlock.title}</a></div>}
|
||||
{!linkedTitle
|
||||
&& <div className="font-weight-bold mt-2">{dateBlock.title}</div>}
|
||||
{linkedTitle && (
|
||||
<div className="font-weight-bold mt-2">
|
||||
<a href={dateBlock.link}>{dateBlock.title}</a>
|
||||
</div>
|
||||
)}
|
||||
{!linkedTitle && (
|
||||
<div className="font-weight-bold mt-2">{dateBlock.title}</div>
|
||||
)}
|
||||
</div>
|
||||
{dateBlock.description
|
||||
&& <div className="date-summary-text mt-1">{dateBlock.description}</div>}
|
||||
{!linkedTitle && dateBlock.link
|
||||
&& <a href={dateBlock.link} className="description-link">{dateBlock.linkText}</a>}
|
||||
{dateBlock.description && (
|
||||
<div className="date-summary-text mt-1">{dateBlock.description}</div>
|
||||
)}
|
||||
{!linkedTitle && dateBlock.link && (
|
||||
<a
|
||||
href={dateBlock.link}
|
||||
onClick={dateBlock.dateType === 'verified-upgrade-deadline' ? logVerifiedUpgradeClick : () => {}}
|
||||
className="description-link"
|
||||
>
|
||||
{dateBlock.linkText}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
|
||||
import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { Button, Toast } from '@edx/paragon';
|
||||
@@ -39,6 +39,7 @@ function OutlineTab({ intl }) {
|
||||
const {
|
||||
org,
|
||||
title,
|
||||
username,
|
||||
} = useModel('courseHomeMeta', courseId);
|
||||
|
||||
const {
|
||||
@@ -70,18 +71,22 @@ function OutlineTab({ intl }) {
|
||||
const [goalToastHeader, setGoalToastHeader] = useState('');
|
||||
const [expandAll, setExpandAll] = useState(false);
|
||||
|
||||
const eventProperties = {
|
||||
org_key: org,
|
||||
courserun_key: courseId,
|
||||
};
|
||||
|
||||
const logResumeCourseClick = () => {
|
||||
sendTrackingLogEvent('edx.course.home.resume_course.clicked', {
|
||||
courserun_key: courseId,
|
||||
...eventProperties,
|
||||
event_type: hasVisitedCourse ? 'resume' : 'start',
|
||||
org_key: org,
|
||||
url: resumeCourseUrl,
|
||||
});
|
||||
};
|
||||
|
||||
// Below the course title alerts (appearing in the order listed here)
|
||||
const offerAlert = useOfferAlert(offer, userTimezone, 'outline-course-alerts');
|
||||
const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, userTimezone, 'outline-course-alerts');
|
||||
const offerAlert = useOfferAlert(courseId, offer, org, userTimezone, 'outline-course-alerts', 'course_home');
|
||||
const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, 'outline-course-alerts', 'course_home');
|
||||
const courseStartAlert = useCourseStartAlert(courseId);
|
||||
const courseEndAlert = useCourseEndAlert(courseId);
|
||||
const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
|
||||
@@ -91,6 +96,16 @@ function OutlineTab({ intl }) {
|
||||
|
||||
const courseSock = useRef(null);
|
||||
|
||||
const logUpgradeLinkClick = () => {
|
||||
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
...eventProperties,
|
||||
linkCategory: 'personalized_learner_schedules',
|
||||
linkName: 'course_home_upgrade_shift_dates',
|
||||
linkType: 'button',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
};
|
||||
|
||||
/** [[MM-P2P] Experiment */
|
||||
const MMP2P = initHomeMMP2P(courseId);
|
||||
|
||||
@@ -146,6 +161,7 @@ function OutlineTab({ intl }) {
|
||||
courseDateBlocks={courseDateBlocks}
|
||||
datesBannerInfo={datesBannerInfo}
|
||||
hasEnded={hasEnded}
|
||||
logUpgradeLinkClick={logUpgradeLinkClick}
|
||||
model="outline"
|
||||
tabFetch={fetchOutlineTab}
|
||||
/** [MM-P2P] Experiment */
|
||||
@@ -189,6 +205,7 @@ function OutlineTab({ intl }) {
|
||||
<div className="col col-12 col-md-4">
|
||||
<ProctoringInfoPanel
|
||||
courseId={courseId}
|
||||
username={username}
|
||||
/>
|
||||
{courseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
|
||||
<UpdateGoalSelector
|
||||
|
||||
@@ -6,7 +6,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
import buildSimpleCourseBlocks from '../data/__factories__/courseBlocks.factory';
|
||||
import { buildMinimalCourseBlocks } from '../../shared/data/__factories__/courseBlocks.factory';
|
||||
import {
|
||||
fireEvent, initializeMockApp, logUnhandledRequests, render, screen, waitFor, act,
|
||||
} from '../../setupTest';
|
||||
@@ -30,11 +30,11 @@ describe('Outline Tab', () => {
|
||||
const proctoringInfoUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
|
||||
|
||||
const store = initializeStore();
|
||||
const defaultMetadata = Factory.build('courseHomeMetadata', { courseId });
|
||||
const defaultMetadata = Factory.build('courseHomeMetadata', { id: courseId });
|
||||
const defaultTabData = Factory.build('outlineTabData');
|
||||
|
||||
function setMetadata(attributes, options) {
|
||||
const courseMetadata = Factory.build('courseHomeMetadata', { courseId, ...attributes }, options);
|
||||
const courseMetadata = Factory.build('courseHomeMetadata', { id: courseId, ...attributes }, options);
|
||||
axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
|
||||
it('expands section that contains resume block', async () => {
|
||||
const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { resumeBlock: true });
|
||||
const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
|
||||
setTabData({
|
||||
course_blocks: { blocks: courseBlocks.blocks },
|
||||
});
|
||||
@@ -112,7 +112,7 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
|
||||
it('displays correct icon for complete assignment', async () => {
|
||||
const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { complete: true });
|
||||
const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { complete: true });
|
||||
setTabData({
|
||||
course_blocks: { blocks: courseBlocks.blocks },
|
||||
});
|
||||
@@ -121,7 +121,7 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
|
||||
it('displays correct icon for incomplete assignment', async () => {
|
||||
const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { complete: false });
|
||||
const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { complete: false });
|
||||
setTabData({
|
||||
course_blocks: { blocks: courseBlocks.blocks },
|
||||
});
|
||||
@@ -130,7 +130,7 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
|
||||
it('SequenceLink displays points to legacy courseware', async () => {
|
||||
const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { resumeBlock: true });
|
||||
const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
|
||||
setMetadata({
|
||||
can_load_courseware: false,
|
||||
});
|
||||
@@ -144,7 +144,7 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
|
||||
it('SequenceLink displays points to courseware MFE', async () => {
|
||||
const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { resumeBlock: true });
|
||||
const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
|
||||
setMetadata({
|
||||
can_load_courseware: true,
|
||||
});
|
||||
@@ -158,6 +158,58 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dates Banner', () => {
|
||||
beforeEach(() => {
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({
|
||||
dates_banner_info: {
|
||||
content_type_gating_enabled: true,
|
||||
missed_deadlines: true,
|
||||
missed_gated_content: true,
|
||||
verified_upgrade_link: 'http://localhost:18130/basket/add/?sku=8CF08E5',
|
||||
},
|
||||
}, {
|
||||
date_blocks: [
|
||||
{
|
||||
assignment_type: 'Homework',
|
||||
date: '2010-08-20T05:59:40.942669Z',
|
||||
date_type: 'assignment-due-date',
|
||||
description: '',
|
||||
learner_has_access: true,
|
||||
title: 'Missed assignment',
|
||||
extra_info: null,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it('renders upgradeToReset', async () => {
|
||||
await fetchAndRender();
|
||||
|
||||
expect(screen.getByText('You are auditing this course,')).toBeInTheDocument();
|
||||
expect(screen.getByText('which means that you are unable to participate in graded assignments. It looks like you missed some important deadlines based on our suggested schedule. To complete graded assignments as part of this course and shift the past due assignments into the future, you can upgrade today.')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Upgrade to shift due dates' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of upgrade button in banner', async () => {
|
||||
await fetchAndRender();
|
||||
sendTrackEvent.mockClear();
|
||||
|
||||
const upgradeButton = screen.getByRole('button', { name: 'Upgrade to shift due dates' });
|
||||
fireEvent.click(upgradeButton);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'personalized_learner_schedules',
|
||||
linkName: 'course_home_upgrade_shift_dates',
|
||||
linkType: 'button',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Welcome Message', () => {
|
||||
beforeEach(() => {
|
||||
setMetadata({ is_enrolled: true });
|
||||
@@ -214,6 +266,63 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Course Dates', () => {
|
||||
it('renders when course date blocks are populated', async () => {
|
||||
const startDate = new Date();
|
||||
startDate.setHours(startDate.getHours() + 1);
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({}, {
|
||||
date_blocks: [
|
||||
{
|
||||
date_type: 'course-start-date',
|
||||
date: startDate.toISOString(),
|
||||
title: 'Start',
|
||||
},
|
||||
],
|
||||
});
|
||||
await fetchAndRender();
|
||||
expect(screen.getByRole('heading', { name: 'Upcoming Dates' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render when course date blocks are not populated', async () => {
|
||||
setMetadata({ is_enrolled: true });
|
||||
await fetchAndRender();
|
||||
expect(screen.queryByRole('heading', { name: 'Upcoming Dates' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of upgrade link', async () => {
|
||||
const now = new Date();
|
||||
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({}, {
|
||||
date_blocks: [
|
||||
{
|
||||
date_type: 'verified-upgrade-deadline',
|
||||
date: tomorrow.toISOString(),
|
||||
link: 'https://example.com/upgrade',
|
||||
link_text: 'Upgrade to Verified Certificate',
|
||||
title: 'Verification Upgrade Deadline',
|
||||
},
|
||||
],
|
||||
});
|
||||
await fetchAndRender();
|
||||
sendTrackEvent.mockClear();
|
||||
|
||||
const upgradeLink = screen.getByRole('link', { name: 'Upgrade to Verified Certificate' });
|
||||
fireEvent.click(upgradeLink);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: '(none)',
|
||||
linkName: 'course_home_dates',
|
||||
linkType: 'link',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Course Goals', () => {
|
||||
const goalOptions = [
|
||||
['certify', 'Earn a certificate'],
|
||||
@@ -312,6 +421,51 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Course Tools', () => {
|
||||
it('renders title when tools are available', async () => {
|
||||
await fetchAndRender();
|
||||
expect(screen.getByRole('heading', { name: 'Course Tools' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: 'Bookmarks' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render title when tools are not available', async () => {
|
||||
setTabData({
|
||||
course_tools: [],
|
||||
});
|
||||
await fetchAndRender();
|
||||
expect(screen.queryByRole('heading', { name: 'Course Tools' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('analytics sent when upgrade link clicked', async () => {
|
||||
await fetchAndRender();
|
||||
expect(screen.getByRole('heading', { name: 'Course Tools' })).toBeInTheDocument();
|
||||
sendTrackEvent.mockClear();
|
||||
sendTrackingLogEvent.mockClear();
|
||||
|
||||
const upgradeLink = screen.getByRole('link', { name: 'Upgrade to Verified' });
|
||||
fireEvent.click(upgradeLink);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: '(none)',
|
||||
linkName: 'course_home_course_tools',
|
||||
linkType: 'link',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
|
||||
expect(sendTrackingLogEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.course.tool.accessed', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
course_id: courseId,
|
||||
is_staff: false,
|
||||
tool_name: 'edx.tool.verified_upgrade',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Alert List', () => {
|
||||
describe('Private Course Alert', () => {
|
||||
it('does not display alert for enrolled user', async () => {
|
||||
@@ -403,6 +557,33 @@ describe('Outline Tab', () => {
|
||||
await fetchAndRender();
|
||||
await screen.findByText('to get unlimited access to the course as long as it exists on the site.', { exact: false });
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of upgrade link', async () => {
|
||||
setTabData({
|
||||
access_expiration: {
|
||||
expiration_date: '2080-01-01T12:00:00Z',
|
||||
masquerading_expired_course: false,
|
||||
upgrade_deadline: '2070-01-01T12:00:00Z',
|
||||
upgrade_url: 'https://example.com/upgrade',
|
||||
},
|
||||
});
|
||||
await fetchAndRender();
|
||||
|
||||
// Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
|
||||
sendTrackEvent.mockClear();
|
||||
const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
|
||||
fireEvent.click(upgradeLink);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'FBE_banner',
|
||||
linkName: 'course_home_audit_access_expires',
|
||||
linkType: 'link',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Course Start Alert', () => {
|
||||
@@ -412,7 +593,7 @@ describe('Outline Tab', () => {
|
||||
startDate.setDate(startDate.getDate() + 100);
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({}, {
|
||||
dateBlocks: [
|
||||
date_blocks: [
|
||||
{
|
||||
date_type: 'course-start-date',
|
||||
date: startDate.toISOString(),
|
||||
@@ -430,7 +611,7 @@ describe('Outline Tab', () => {
|
||||
startDate.setHours(startDate.getHours() + 1);
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({}, {
|
||||
dateBlocks: [
|
||||
date_blocks: [
|
||||
{
|
||||
date_type: 'course-start-date',
|
||||
date: startDate.toISOString(),
|
||||
@@ -451,7 +632,7 @@ describe('Outline Tab', () => {
|
||||
endDate.setDate(endDate.getDate() + 13);
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({}, {
|
||||
dateBlocks: [
|
||||
date_blocks: [
|
||||
{
|
||||
date_type: 'course-end-date',
|
||||
date: endDate.toISOString(),
|
||||
@@ -469,7 +650,7 @@ describe('Outline Tab', () => {
|
||||
endDate.setHours(endDate.getHours() + 1);
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({}, {
|
||||
dateBlocks: [
|
||||
date_blocks: [
|
||||
{
|
||||
date_type: 'course-end-date',
|
||||
date: endDate.toISOString(),
|
||||
@@ -491,7 +672,7 @@ describe('Outline Tab', () => {
|
||||
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
|
||||
setMetadata({ is_enrolled: true });
|
||||
setTabData({}, {
|
||||
dateBlocks: [
|
||||
date_blocks: [
|
||||
{
|
||||
date_type: 'course-end-date',
|
||||
date: yesterday.toISOString(),
|
||||
@@ -508,6 +689,53 @@ describe('Outline Tab', () => {
|
||||
await screen.findByText('We are working on generating course certificates.');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Offer Alert', () => {
|
||||
it('sends analytics event onClick of upgrade link', async () => {
|
||||
setTabData({
|
||||
offer: {
|
||||
code: 'EDXWELCOME',
|
||||
expiration_date: '2070-01-01T12:00:00Z',
|
||||
original_price: '$100',
|
||||
discounted_price: '$85',
|
||||
percentage: 15,
|
||||
upgrade_url: 'https://example.com/upgrade',
|
||||
},
|
||||
});
|
||||
await fetchAndRender();
|
||||
|
||||
expect(screen.getByRole('link', { name: 'Upgrade now' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of upgrade link', async () => {
|
||||
setTabData({
|
||||
offer: {
|
||||
code: 'EDXWELCOME',
|
||||
expiration_date: '2070-01-01T12:00:00Z',
|
||||
original_price: '$100',
|
||||
discounted_price: '$85',
|
||||
percentage: 15,
|
||||
upgrade_url: 'https://example.com/upgrade',
|
||||
},
|
||||
});
|
||||
await fetchAndRender();
|
||||
|
||||
// Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
|
||||
sendTrackEvent.mockClear();
|
||||
const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
|
||||
fireEvent.click(upgradeLink);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'welcome',
|
||||
linkName: 'course_home_welcome',
|
||||
linkType: 'link',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Proctoring Info Panel', () => {
|
||||
@@ -531,7 +759,7 @@ describe('Outline Tab', () => {
|
||||
expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
|
||||
expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('appears for rejected', async () => {
|
||||
@@ -546,7 +774,7 @@ describe('Outline Tab', () => {
|
||||
expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).toBeInTheDocument();
|
||||
expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
|
||||
expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('appears for submitted', async () => {
|
||||
@@ -559,7 +787,7 @@ describe('Outline Tab', () => {
|
||||
await fetchAndRender();
|
||||
await screen.findByText('This course contains proctored exams');
|
||||
expect(screen.queryByText('Your submitted profile is in review.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('appears for second_review_required', async () => {
|
||||
@@ -572,7 +800,7 @@ describe('Outline Tab', () => {
|
||||
await fetchAndRender();
|
||||
await screen.findByText('This course contains proctored exams');
|
||||
expect(screen.queryByText('Your submitted profile is in review.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('appears for other_course_approved if not expiring soon', async () => {
|
||||
@@ -587,8 +815,8 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
await fetchAndRender();
|
||||
await screen.findByText('This course contains proctored exams');
|
||||
expect(screen.queryByText('Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, it is highly recommended that you complete this course’s onboarding exam in order to ensure that your device still meets the requirements for proctoring.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('You are eligible to take proctored exams in this course.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays expiration warning', async () => {
|
||||
@@ -604,7 +832,7 @@ describe('Outline Tab', () => {
|
||||
await fetchAndRender();
|
||||
await screen.findByText('This course contains proctored exams');
|
||||
expect(screen.queryByText('Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('appears for no status', async () => {
|
||||
@@ -619,7 +847,7 @@ describe('Outline Tab', () => {
|
||||
expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).toBeInTheDocument();
|
||||
expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
|
||||
expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not appear for 404', async () => {
|
||||
@@ -659,7 +887,7 @@ describe('Outline Tab', () => {
|
||||
expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
|
||||
expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -671,7 +899,7 @@ describe('Outline Tab', () => {
|
||||
|
||||
it('displays link to upgrade', async () => {
|
||||
await fetchAndRender();
|
||||
expect(screen.getByRole('link', { name: 'Upgrade ($149)' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('viewing upgrade card sends analytics', async () => {
|
||||
@@ -697,17 +925,17 @@ describe('Outline Tab', () => {
|
||||
});
|
||||
|
||||
it('clicking upgrade link sends analytics', async () => {
|
||||
await fetchAndRender();
|
||||
|
||||
// Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
|
||||
sendTrackEvent.mockClear();
|
||||
sendTrackingLogEvent.mockClear();
|
||||
|
||||
await fetchAndRender();
|
||||
const upgradeButton = screen.getByRole('link', { name: 'Upgrade ($149)' });
|
||||
const upgradeButton = screen.getByRole('link', { name: 'Upgrade for $149' });
|
||||
|
||||
fireEvent.click(upgradeButton);
|
||||
|
||||
// 3 sendTrackEvent calls are expected because 1 happens on render, and 2 happen onClick
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(3);
|
||||
expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'Promotion Clicked', {
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(2);
|
||||
expect(sendTrackEvent).toHaveBeenNthCalledWith(1, 'Promotion Clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
creative: 'sidebarupsell',
|
||||
@@ -715,7 +943,7 @@ describe('Outline Tab', () => {
|
||||
position: 'sidebar-message',
|
||||
promotion_id: 'courseware_verified_certificate_upsell',
|
||||
});
|
||||
expect(sendTrackEvent).toHaveBeenNthCalledWith(3, 'edx.bi.ecommerce.upsell_links_clicked', {
|
||||
expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
linkCategory: 'green_upgrade',
|
||||
@@ -724,13 +952,12 @@ describe('Outline Tab', () => {
|
||||
pageName: 'course_home',
|
||||
});
|
||||
|
||||
// 3 sendTrackingLogEvent calls are expected because 1 happens on render, and 2 happen onClick
|
||||
expect(sendTrackingLogEvent).toHaveBeenCalledTimes(3);
|
||||
expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(2, 'edx.bi.course.upgrade.sidebarupsell.clicked', {
|
||||
expect(sendTrackingLogEvent).toHaveBeenCalledTimes(2);
|
||||
expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(1, 'edx.bi.course.upgrade.sidebarupsell.clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
});
|
||||
expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(3, 'edx.course.enrollment.upgrade.clicked', {
|
||||
expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(2, 'edx.course.enrollment.upgrade.clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseId,
|
||||
location: 'sidebar-message',
|
||||
|
||||
@@ -28,7 +28,7 @@ function SequenceLink({
|
||||
complete,
|
||||
description,
|
||||
due,
|
||||
lmsWebUrl,
|
||||
legacyWebUrl,
|
||||
showLink,
|
||||
title,
|
||||
} = sequence;
|
||||
@@ -44,7 +44,11 @@ function SequenceLink({
|
||||
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
|
||||
|
||||
// canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
|
||||
const coursewareUrl = canLoadCourseware ? <Link to={`/course/${courseId}/${id}`}>{title}</Link> : <Hyperlink destination={lmsWebUrl}>{title}</Hyperlink>;
|
||||
const coursewareUrl = (
|
||||
canLoadCourseware
|
||||
? <Link to={`/course/${courseId}/${id}`}>{title}</Link>
|
||||
: <Hyperlink destination={legacyWebUrl}>{title}</Hyperlink>
|
||||
);
|
||||
const displayTitle = showLink ? coursewareUrl : title;
|
||||
|
||||
return (
|
||||
@@ -92,7 +96,6 @@ function SequenceLink({
|
||||
day="numeric"
|
||||
month="short"
|
||||
year="numeric"
|
||||
hour12={false}
|
||||
timeZoneName="short"
|
||||
value={due}
|
||||
{...timezoneFormatArgs}
|
||||
|
||||
@@ -37,7 +37,6 @@ function CourseEndAlert({ payload }) {
|
||||
day="numeric"
|
||||
month="short"
|
||||
year="numeric"
|
||||
hour12={false}
|
||||
timeZoneName="short"
|
||||
value={endDate}
|
||||
{...timezoneFormatArgs}
|
||||
|
||||
@@ -42,7 +42,6 @@ function CourseStartAlert({ payload }) {
|
||||
day="numeric"
|
||||
month="short"
|
||||
year="numeric"
|
||||
hour12={false}
|
||||
timeZoneName="short"
|
||||
value={startDate}
|
||||
{...timezoneFormatArgs}
|
||||
|
||||
@@ -178,7 +178,11 @@ const messages = defineMessages({
|
||||
},
|
||||
otherCourseApprovedProctoringMessage: {
|
||||
id: 'learning.proctoringPanel.message.otherCourseApproved',
|
||||
defaultMessage: 'Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, it is highly recommended that you complete this course’s onboarding exam in order to ensure that your device still meets the requirements for proctoring.',
|
||||
defaultMessage: 'You are eligible to take proctored exams in this course.',
|
||||
},
|
||||
otherCourseApprovedProctoringDetail: {
|
||||
id: 'learning.proctoringPanel.detail.otherCourseApproved',
|
||||
defaultMessage: 'If your device has changed, we recommend that you complete this course\'s onboarding exam in order to ensure that your setup still meets the requirements for proctoring.',
|
||||
},
|
||||
expiringSoonProctoringMessage: {
|
||||
id: 'learning.proctoringPanel.message.expiringSoon',
|
||||
@@ -194,12 +198,16 @@ const messages = defineMessages({
|
||||
},
|
||||
proctoringPanelGeneralTime: {
|
||||
id: 'learning.proctoringPanel.generalTime',
|
||||
defaultMessage: 'Onboarding profile review, including identity verification, can take 2+ business days.',
|
||||
defaultMessage: 'Onboarding profile review can take 2+ business days.',
|
||||
},
|
||||
proctoringOnboardingButton: {
|
||||
id: 'learning.proctoringPanel.onboardingButton',
|
||||
defaultMessage: 'Complete Onboarding',
|
||||
},
|
||||
proctoringOnboardingPracticeButton: {
|
||||
id: 'learning.proctoringPanel.onboardingPracticeButton',
|
||||
defaultMessage: 'View Onboarding Exam',
|
||||
},
|
||||
proctoringOnboardingButtonNotOpen: {
|
||||
id: 'learning.proctoringPanel.onboardingButtonNotOpen',
|
||||
defaultMessage: 'Onboarding Opens: {releaseDate}',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
|
||||
import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
|
||||
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
@@ -23,15 +23,29 @@ function CourseTools({ courseId, intl }) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const eventProperties = {
|
||||
org_key: org,
|
||||
courserun_key: courseId,
|
||||
};
|
||||
|
||||
const logClick = (analyticsId) => {
|
||||
const { administrator } = getAuthenticatedUser();
|
||||
sendTrackingLogEvent('edx.course.tool.accessed', {
|
||||
org_key: org,
|
||||
courserun_key: courseId,
|
||||
...eventProperties,
|
||||
course_id: courseId, // should only be courserun_key, but left as-is for historical reasons
|
||||
is_staff: administrator,
|
||||
tool_name: analyticsId,
|
||||
});
|
||||
|
||||
if (analyticsId === 'edx.tool.verified_upgrade') {
|
||||
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
...eventProperties,
|
||||
linkCategory: '(none)',
|
||||
linkName: 'course_home_course_tools',
|
||||
linkType: 'link',
|
||||
pageName: 'course_home',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const renderIcon = (iconClasses) => {
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Button } from '@edx/paragon';
|
||||
import messages from '../messages';
|
||||
import { getProctoringInfoData } from '../../data/api';
|
||||
|
||||
function ProctoringInfoPanel({ courseId, intl }) {
|
||||
function ProctoringInfoPanel({ courseId, username, intl }) {
|
||||
const [status, setStatus] = useState('');
|
||||
const [link, setLink] = useState('');
|
||||
const [releaseDate, setReleaseDate] = useState(null);
|
||||
@@ -74,7 +74,7 @@ function ProctoringInfoPanel({ courseId, intl }) {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getProctoringInfoData(courseId)
|
||||
getProctoringInfoData(courseId, username)
|
||||
.then(
|
||||
response => {
|
||||
if (response) {
|
||||
@@ -106,6 +106,9 @@ function ProctoringInfoPanel({ courseId, intl }) {
|
||||
<p>
|
||||
{intl.formatMessage(messages[`${readableStatus}ProctoringMessage`])}
|
||||
</p>
|
||||
<p>
|
||||
{readableStatus === readableStatuses.otherCourseApproved && intl.formatMessage(messages[`${readableStatus}ProctoringDetail`])}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{![readableStatuses.verified, readableStatuses.otherCourseApproved].includes(readableStatus) && (
|
||||
@@ -129,7 +132,16 @@ function ProctoringInfoPanel({ courseId, intl }) {
|
||||
<>
|
||||
{!isNotYetReleased(releaseDate) && (
|
||||
<Button variant="primary" block href={`${getConfig().LMS_BASE_URL}${link}`}>
|
||||
{intl.formatMessage(messages.proctoringOnboardingButton)}
|
||||
{readableStatus === readableStatuses.otherCourseApproved && (
|
||||
<>
|
||||
{intl.formatMessage(messages.proctoringOnboardingPracticeButton)}
|
||||
</>
|
||||
)}
|
||||
{readableStatus !== readableStatuses.otherCourseApproved && (
|
||||
<>
|
||||
{intl.formatMessage(messages.proctoringOnboardingButton)}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
{isNotYetReleased(releaseDate) && (
|
||||
@@ -160,7 +172,12 @@ function ProctoringInfoPanel({ courseId, intl }) {
|
||||
|
||||
ProctoringInfoPanel.propTypes = {
|
||||
courseId: PropTypes.string.isRequired,
|
||||
username: PropTypes.string,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
ProctoringInfoPanel.defaultProps = {
|
||||
username: null,
|
||||
};
|
||||
|
||||
export default injectIntl(ProctoringInfoPanel);
|
||||
|
||||
@@ -1,241 +1,22 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { faCheck } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Icon } from '@edx/paragon';
|
||||
import { Check } from '@edx/paragon/icons';
|
||||
|
||||
import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
|
||||
import { FormattedDate, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Button } from '@edx/paragon';
|
||||
|
||||
import messages from '../messages';
|
||||
import { useModel } from '../../../generic/model-store';
|
||||
import { UpgradeButton } from '../../../generic/upgrade-button';
|
||||
import VerifiedCert from '../../../generic/assets/edX_certificate.png';
|
||||
|
||||
function UpsellNoFBECardContent() {
|
||||
return (
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<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"
|
||||
values={{
|
||||
verifiedCertLink: (
|
||||
<a className="inline-link-underline" rel="noopener noreferrer" target="_blank" href={`${getConfig().MARKETING_SITE_BASE_URL}/verified-certificate`}>verified certificate</a>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
|
||||
<FormattedMessage
|
||||
id="learning.outline.alert.upgradecard.nonProfitMission"
|
||||
defaultMessage="Support our {nonProfitMission} at edX"
|
||||
values={{
|
||||
nonProfitMission: (
|
||||
<span className="font-weight-bold">non-profit mission</span>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function UpsellFBEFarAwayCardContent() {
|
||||
return (
|
||||
<ul className="fa-ul">
|
||||
<li>
|
||||
<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"
|
||||
values={{
|
||||
verifiedCertLink: (
|
||||
<a className="inline-link-underline" rel="noopener noreferrer" target="_blank" href={`${getConfig().MARKETING_SITE_BASE_URL}/verified-certificate`}>verified certificate</a>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<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"
|
||||
values={{
|
||||
fullAccess: (
|
||||
<span className="font-weight-bold">Full access</span>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
|
||||
<FormattedMessage
|
||||
id="learning.outline.alert.upgradecard.nonProfitMission"
|
||||
defaultMessage="Support our {nonProfitMission} at edX"
|
||||
values={{
|
||||
nonProfitMission: (
|
||||
<span className="font-weight-bold">non-profit mission</span>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs }) {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="learning.outline.alert.upgradecard.expirationAccessLoss"
|
||||
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
|
||||
key="accessDate"
|
||||
day="numeric"
|
||||
month="long"
|
||||
value={new Date(accessExpirationDate)}
|
||||
{...timezoneFormatArgs}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
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>),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
UpsellFBESoonCardContent.propTypes = {
|
||||
accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
|
||||
timezoneFormatArgs: PropTypes.shape({
|
||||
timeZone: PropTypes.string,
|
||||
}),
|
||||
};
|
||||
|
||||
UpsellFBESoonCardContent.defaultProps = {
|
||||
timezoneFormatArgs: {},
|
||||
};
|
||||
|
||||
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)),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} 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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (<div className="p-3 upsell-warning">{expirationText}</div>);
|
||||
}
|
||||
|
||||
ExpirationCountdown.propTypes = {
|
||||
hoursToExpiration: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
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
|
||||
key="accessExpireDate"
|
||||
day="numeric"
|
||||
month="long"
|
||||
value={accessExpirationDate}
|
||||
{...timezoneFormatArgs}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
AccessExpirationDateBanner.propTypes = {
|
||||
accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
|
||||
timezoneFormatArgs: PropTypes.shape({
|
||||
timeZone: PropTypes.string,
|
||||
}),
|
||||
};
|
||||
|
||||
AccessExpirationDateBanner.defaultProps = {
|
||||
timezoneFormatArgs: {},
|
||||
};
|
||||
|
||||
function UpgradeCard({ courseId }) {
|
||||
function UpgradeCard({ courseId, intl, onLearnMore }) {
|
||||
const { org } = useModel('courseHomeMeta', courseId);
|
||||
const {
|
||||
offer,
|
||||
verifiedMode,
|
||||
accessExpiration,
|
||||
datesBannerInfo: {
|
||||
contentTypeGatingEnabled,
|
||||
},
|
||||
datesWidget: {
|
||||
userTimezone,
|
||||
},
|
||||
timeOffsetMillis,
|
||||
} = useModel('outline', courseId);
|
||||
|
||||
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
|
||||
const correctedTime = new Date(Date.now() + timeOffsetMillis);
|
||||
|
||||
if (!verifiedMode) {
|
||||
return null;
|
||||
}
|
||||
@@ -253,28 +34,6 @@ function UpgradeCard({ courseId }) {
|
||||
...eventProperties,
|
||||
};
|
||||
|
||||
function expirationHighlight(hoursToExpiration){
|
||||
let expirationText;
|
||||
if(hoursToExpiration < 24){
|
||||
expirationText= <FormattedMessage
|
||||
id="learning.outline.alert.upgradecard.expiration"
|
||||
defaultMessage="{expiration} hours left"
|
||||
values={{
|
||||
expiration: (hoursToDiscountExpiration),
|
||||
}}
|
||||
/>
|
||||
} else {
|
||||
expirationText =<FormattedMessage
|
||||
id="learning.outline.alert.upgradecard.expiration"
|
||||
defaultMessage="{expiration} days left"
|
||||
values={{
|
||||
expiration: (Math.floor(hoursToExpiration/24)),
|
||||
}}
|
||||
/>
|
||||
}
|
||||
return(<div className="p-3 upsell-warning">{expirationText}</div>)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
sendTrackingLogEvent('edx.bi.course.upgrade.sidebarupsell.displayed', eventProperties);
|
||||
sendTrackEvent('Promotion Viewed', promotionEventProperties);
|
||||
@@ -296,110 +55,53 @@ function UpgradeCard({ courseId }) {
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
There are 4 parts that change in the upgrade card:
|
||||
upgradeCardHeaderText
|
||||
expirationBanner
|
||||
upsellMessage
|
||||
offerCode
|
||||
*/
|
||||
let upgradeCardHeaderText;
|
||||
let expirationBanner;
|
||||
let upsellMessage;
|
||||
let offerCode;
|
||||
|
||||
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);
|
||||
|
||||
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>),
|
||||
}}
|
||||
return (
|
||||
<section className="mb-4 p-3 outline-sidebar-upgrade-card">
|
||||
<h2 className="h4" id="outline-sidebar-upgrade-header">{intl.formatMessage(messages.upgradeTitle)}</h2>
|
||||
<div className="row w-100 m-0">
|
||||
<div className="col-6 col-md-12 col-lg-3 col-xl-4 p-0 text-md-center text-lg-left">
|
||||
<img
|
||||
alt={intl.formatMessage(messages.certAlt)}
|
||||
className="w-100"
|
||||
src={VerifiedCert}
|
||||
style={{ maxWidth: '10rem' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const accessExpirationDate = new Date(accessExpiration.expirationDate);
|
||||
const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) / 1000 / 60 / 60);
|
||||
|
||||
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
|
||||
id="learning.outline.alert.upgradecard.accessExpirationUrgent"
|
||||
defaultMessage="Course Access Expiration"
|
||||
/>
|
||||
);
|
||||
expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToAccessExpiration} />;
|
||||
upsellMessage = (
|
||||
<UpsellFBESoonCardContent
|
||||
accessExpirationDate={accessExpirationDate}
|
||||
timezoneFormatArgs={timezoneFormatArgs}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
} else { // FBE is turned off
|
||||
upgradeCardHeaderText = (
|
||||
<FormattedMessage
|
||||
id="learning.outline.alert.upgradecard.pursueAverifiedCertificate"
|
||||
defaultMessage="Pursue a verified certificate"
|
||||
/>
|
||||
);
|
||||
upsellMessage = (<UpsellNoFBECardContent />);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="mb-4 card">
|
||||
<h2 className="h5 m-3" id="outline-sidebar-upgrade-header">
|
||||
{upgradeCardHeaderText}
|
||||
</h2>
|
||||
{expirationBanner}
|
||||
<div className="p-3">
|
||||
{upsellMessage}
|
||||
<div className="col-6 col-md-12 col-lg-9 col-xl-8 p-0 pl-lg-2 text-center mt-md-2 mt-lg-0">
|
||||
<div className="row w-100 m-0 justify-content-center">
|
||||
<UpgradeButton
|
||||
offer={offer}
|
||||
onClick={logClick}
|
||||
verifiedMode={verifiedMode}
|
||||
/>
|
||||
{onLearnMore && (
|
||||
<div className="col-12">
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="pb-0"
|
||||
onClick={onLearnMore}
|
||||
aria-labelledby="outline-sidebar-upgrade-header"
|
||||
>
|
||||
{intl.formatMessage(messages.learnMore)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UpgradeButton
|
||||
offer={offer}
|
||||
onClick={logClick}
|
||||
verifiedMode={verifiedMode}
|
||||
className="ml-3 mr-3 mb-3"
|
||||
/>
|
||||
{offerCode}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
UpgradeCard.propTypes = {
|
||||
courseId: PropTypes.string.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
onLearnMore: PropTypes.func,
|
||||
};
|
||||
|
||||
UpgradeCard.defaultProps = {
|
||||
onLearnMore: null,
|
||||
};
|
||||
|
||||
export default injectIntl(UpgradeCard);
|
||||
|
||||
@@ -2,19 +2,3 @@
|
||||
border: 1px solid $dark-500;
|
||||
border-top: 5px solid $dark-500;
|
||||
}
|
||||
|
||||
.upsell-warning{
|
||||
background-color: #FCF1F4;
|
||||
}
|
||||
|
||||
.upsell-warning-light{
|
||||
background-color: #FFFAED;;
|
||||
}
|
||||
|
||||
.discount-info {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.inline-link-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { requestCert } from '../data/thunks';
|
||||
|
||||
import { useModel } from '../../generic/model-store';
|
||||
import messages from './messages';
|
||||
import VerifiedCert from '../../generic/assets/edX_certificate.png';
|
||||
|
||||
function CertificateBanner({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
certificateData,
|
||||
enrollmentMode,
|
||||
} = useModel('progress', courseId);
|
||||
|
||||
if (certificateData === null || enrollmentMode === 'audit') { return null; }
|
||||
const { certUrl, certDownloadUrl } = certificateData;
|
||||
const dispatch = useDispatch();
|
||||
function requestHandler() {
|
||||
dispatch(requestCert(courseId));
|
||||
}
|
||||
return (
|
||||
<section className="banner rounded my-4 p-4 container-fluid border border-primary-200 bg-info-100 row">
|
||||
<div className="col-12 col-sm-9">
|
||||
<div>
|
||||
<div className="font-weight-bold">{certificateData.title}</div>
|
||||
<div className="mt-1">{certificateData.msg}</div>
|
||||
</div>
|
||||
{certUrl && (
|
||||
<div>
|
||||
<a className="btn btn-primary my-3" href={certUrl} rel="noopener noreferrer" target="_blank">
|
||||
{intl.formatMessage(messages.viewCert)}
|
||||
<span className="sr-only">{intl.formatMessage(messages.opensNewWindow)}</span>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{!certUrl && certificateData.isDownloadable && (
|
||||
<div>
|
||||
<a className="btn btn-primary my-3" href={certDownloadUrl} rel="noopener noreferrer" target="_blank">
|
||||
{intl.formatMessage(messages.downloadCert)}
|
||||
<span className="sr-only">{intl.formatMessage(messages.opensNewWindow)}</span>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{!certUrl && !certificateData.isDownloadable && certificateData.isRequestable && (
|
||||
<div className="my-3">
|
||||
<button className="btn btn-primary" type="button" onClick={requestHandler}>
|
||||
{intl.formatMessage(messages.requestCert)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-0 col-sm-3 d-none d-sm-block">
|
||||
<img
|
||||
alt={intl.formatMessage(messages.certAlt)}
|
||||
src={VerifiedCert}
|
||||
className="float-right"
|
||||
style={{ height: '120px' }}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
CertificateBanner.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(CertificateBanner);
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Subsection from './Subsection';
|
||||
|
||||
export default function Chapter({
|
||||
chapter,
|
||||
}) {
|
||||
if (chapter.displayName === 'hidden') { return null; }
|
||||
const { subsections } = chapter;
|
||||
return (
|
||||
<section className="border-top border-light-500">
|
||||
<div className="row">
|
||||
<div className="lead font-weight-normal col-12 col-sm-3 my-3 border-right border-light-500">
|
||||
{chapter.displayName}
|
||||
</div>
|
||||
<div className="col-12 col-sm-9">
|
||||
{subsections.map((subsection) => (
|
||||
<Subsection
|
||||
key={subsection.url}
|
||||
subsection={subsection}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Chapter.propTypes = {
|
||||
chapter: PropTypes.shape({
|
||||
displayName: PropTypes.string,
|
||||
subsections: PropTypes.arrayOf(PropTypes.shape({
|
||||
url: PropTypes.string,
|
||||
})),
|
||||
}).isRequired,
|
||||
};
|
||||
@@ -1,151 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import {
|
||||
FormattedDate, FormattedTime, injectIntl, intlShape,
|
||||
} from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { useModel } from '../../generic/model-store';
|
||||
import messages from './messages';
|
||||
|
||||
function CreditRequirements({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
creditCourseRequirements,
|
||||
creditSupportUrl,
|
||||
verificationData,
|
||||
userTimezone,
|
||||
} = useModel('progress', courseId);
|
||||
|
||||
if (creditCourseRequirements === null) { return null; }
|
||||
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
|
||||
const eligibility = creditCourseRequirements.eligibilityStatus;
|
||||
let message;
|
||||
switch (eligibility) {
|
||||
case 'not_eligible':
|
||||
message = intl.formatMessage(messages.creditNotEligible);
|
||||
break;
|
||||
case 'eligible':
|
||||
message = intl.formatMessage(messages.creditEligible);
|
||||
break;
|
||||
case 'partial_eligible':
|
||||
message = intl.formatMessage(messages.creditPartialEligible);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const completed = `✓ ${intl.formatMessage(messages.completed)} `;
|
||||
|
||||
const { status } = verificationData;
|
||||
let verificationMessage;
|
||||
let verificationLinkMessage = '';
|
||||
|
||||
switch (status) {
|
||||
case 'none':
|
||||
case 'expired':
|
||||
verificationMessage = `${intl.formatMessage(messages.notStarted)}; `;
|
||||
verificationLinkMessage = intl.formatMessage(messages.notStarted);
|
||||
break;
|
||||
case 'approved':
|
||||
verificationMessage = completed;
|
||||
break;
|
||||
case 'pending':
|
||||
verificationMessage = intl.formatMessage(messages.pending);
|
||||
break;
|
||||
case 'must_reverify':
|
||||
verificationMessage = `${intl.formatMessage(messages.rejected)}; `;
|
||||
verificationLinkMessage = intl.formatMessage(messages.tryAgain);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return (
|
||||
<section className="banner rounded row border border-primary-300 my-2">
|
||||
<div className="col ml-4 my-3">
|
||||
<div className="row font-weight-bold">
|
||||
{intl.formatMessage(messages.courseCreditHeader)}
|
||||
</div>
|
||||
<div className="row mb-2">{message}</div>
|
||||
{creditCourseRequirements.requirements.map((requirement) => (
|
||||
<div key={requirement.displayName} className="row w-50 border-bottom">
|
||||
<div className="col-4">
|
||||
{requirement.displayName}
|
||||
{requirement.minGrade && (
|
||||
<span>{` ${requirement.minGrade}%`}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-8">
|
||||
{!requirement.status && (
|
||||
intl.formatMessage(messages.notMet)
|
||||
)}
|
||||
{(requirement.status === 'failed' || requirement.status === 'declined') && (
|
||||
intl.formatMessage(messages.failed)
|
||||
)}
|
||||
{requirement.status === 'submitted' && (
|
||||
intl.formatMessage(messages.submitted)
|
||||
)}
|
||||
{requirement.status === 'satisfied' && (
|
||||
<span>
|
||||
{completed}
|
||||
{requirement.statusDate && (
|
||||
<span>
|
||||
<FormattedDate
|
||||
value={requirement.statusDate}
|
||||
day="numeric"
|
||||
month="short"
|
||||
weekday="short"
|
||||
year="numeric"
|
||||
{...timezoneFormatArgs}
|
||||
/> <FormattedTime
|
||||
value={requirement.statusDate}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="row w-50 border-bottom">
|
||||
<div className="col-4">Verification Status </div>
|
||||
<div className="col-8">
|
||||
{verificationMessage}
|
||||
{verificationLinkMessage && (
|
||||
<a href={verificationData.link}>{verificationLinkMessage}</a>
|
||||
)}
|
||||
{status === 'approved' && verificationData.statusDate && (
|
||||
<span>
|
||||
<FormattedDate
|
||||
value={verificationData.statusDate}
|
||||
day="numeric"
|
||||
month="short"
|
||||
weekday="short"
|
||||
year="numeric"
|
||||
{...timezoneFormatArgs}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{eligibility === 'eligible' && (
|
||||
<div className="mt-3 row">
|
||||
<a className="btn btn-primary" href={creditCourseRequirements.dashboardUrl}>{intl.formatMessage(messages.purchaseCredit)}</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3 row">
|
||||
<a href={creditSupportUrl}>{intl.formatMessage(messages.learnMoreCredit)}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
CreditRequirements.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(CreditRequirements);
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { FormattedDate, FormattedTime } from '@edx/frontend-platform/i18n';
|
||||
import { useModel } from '../../generic/model-store';
|
||||
|
||||
export default function DueDateTime({
|
||||
due,
|
||||
}) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
const {
|
||||
userTimezone,
|
||||
} = useModel('progress', courseId);
|
||||
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
|
||||
|
||||
return (
|
||||
<em className="ml-0">
|
||||
due <FormattedDate
|
||||
value={due}
|
||||
day="numeric"
|
||||
month="short"
|
||||
weekday="short"
|
||||
year="numeric"
|
||||
{...timezoneFormatArgs}
|
||||
/> <FormattedTime
|
||||
value={due}
|
||||
/>
|
||||
</em>
|
||||
);
|
||||
}
|
||||
|
||||
DueDateTime.propTypes = {
|
||||
due: PropTypes.string.isRequired,
|
||||
};
|
||||
@@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import messages from './messages';
|
||||
|
||||
function ProblemScores({
|
||||
intl,
|
||||
scoreName,
|
||||
problemScores,
|
||||
}) {
|
||||
return (
|
||||
<div className="row mt-1">
|
||||
<dl className="d-flex flex-wrap small text-gray-500">
|
||||
<dt className="mr-3">{intl.formatMessage(messages[`${scoreName}`])}</dt>
|
||||
{problemScores.map((problem, index) => {
|
||||
const key = scoreName + index;
|
||||
return (
|
||||
<dd className="mr-3" key={key}>{problem.earned}/{problem.possible}</dd>
|
||||
);
|
||||
})}
|
||||
</dl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ProblemScores.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
scoreName: PropTypes.string.isRequired,
|
||||
problemScores: PropTypes.arrayOf(PropTypes.shape({
|
||||
possible: PropTypes.number,
|
||||
earned: PropTypes.number,
|
||||
id: PropTypes.string,
|
||||
})).isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(ProblemScores);
|
||||
39
src/course-home/progress-tab/ProgressHeader.jsx
Normal file
39
src/course-home/progress-tab/ProgressHeader.jsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Button } from '@edx/paragon';
|
||||
|
||||
import { useModel } from '../../generic/model-store';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
function ProgressHeader({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const { administrator } = getAuthenticatedUser();
|
||||
|
||||
const { studioUrl } = useModel('progress', courseId);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="row w-100 m-0 mb-4 justify-content-between">
|
||||
<h1>{intl.formatMessage(messages.progressHeader)}</h1>
|
||||
{administrator && studioUrl && (
|
||||
<Button variant="outline-primary" size="sm" className="align-self-center" href={studioUrl}>
|
||||
{intl.formatMessage(messages.studioLink)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
ProgressHeader.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(ProgressHeader);
|
||||
@@ -1,48 +1,36 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { useModel } from '../../generic/model-store';
|
||||
import Chapter from './Chapter';
|
||||
import CertificateBanner from './CertificateBanner';
|
||||
import messages from './messages';
|
||||
import CreditRequirements from './CreditRequirements';
|
||||
|
||||
function ProgressTab({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const { administrator } = getAuthenticatedUser();
|
||||
|
||||
const {
|
||||
coursewareSummary,
|
||||
studioUrl,
|
||||
} = useModel('progress', courseId);
|
||||
import CertificateStatus from './certificate-status/CertificateStatus';
|
||||
import CourseCompletion from './course-completion/CourseCompletion';
|
||||
import CourseGrade from './grades/course-grade/CourseGrade';
|
||||
import DetailedGrades from './grades/detailed-grades/DetailedGrades';
|
||||
import GradeSummary from './grades/grade-summary/GradeSummary';
|
||||
import ProgressHeader from './ProgressHeader';
|
||||
import RelatedLinks from './related-links/RelatedLinks';
|
||||
|
||||
function ProgressTab() {
|
||||
return (
|
||||
<section>
|
||||
{administrator && studioUrl && (
|
||||
<div className="row mb-3 mr-3 justify-content-end">
|
||||
<a className="btn-sm border border-info" href={studioUrl}>
|
||||
{intl.formatMessage(messages.studioLink)}
|
||||
</a>
|
||||
<>
|
||||
<ProgressHeader />
|
||||
<div className="row w-100 m-0">
|
||||
{/* Main body */}
|
||||
<div className="col-12 col-lg-8 p-0">
|
||||
<CourseCompletion />
|
||||
<CourseGrade />
|
||||
<div className="my-4 p-4 rounded shadow-sm">
|
||||
<GradeSummary />
|
||||
<DetailedGrades />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<CertificateBanner />
|
||||
<CreditRequirements />
|
||||
{coursewareSummary.map((chapter) => (
|
||||
<Chapter
|
||||
key={chapter.displayName}
|
||||
chapter={chapter}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="col-12 col-lg-4 p-0 px-lg-4">
|
||||
<CertificateStatus />
|
||||
<RelatedLinks />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
ProgressTab.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(ProgressTab);
|
||||
export default ProgressTab;
|
||||
|
||||
85
src/course-home/progress-tab/ProgressTab.test.jsx
Normal file
85
src/course-home/progress-tab/ProgressTab.test.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
import { Factory } from 'rosie';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
|
||||
import {
|
||||
initializeMockApp, logUnhandledRequests, render, screen, act,
|
||||
} from '../../setupTest';
|
||||
import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
|
||||
import * as thunks from '../data/thunks';
|
||||
import initializeStore from '../../store';
|
||||
import ProgressTab from './ProgressTab';
|
||||
|
||||
initializeMockApp();
|
||||
jest.mock('@edx/frontend-platform/analytics');
|
||||
|
||||
describe('Progress Tab', () => {
|
||||
let axiosMock;
|
||||
|
||||
const courseId = 'course-v1:edX+Test+run';
|
||||
let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
|
||||
courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
|
||||
const progressUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
|
||||
|
||||
const store = initializeStore();
|
||||
const defaultMetadata = Factory.build('courseHomeMetadata', { id: courseId });
|
||||
const defaultTabData = Factory.build('progressTabData');
|
||||
|
||||
function setTabData(attributes, options) {
|
||||
const progressTabData = Factory.build('progressTabData', attributes, options);
|
||||
axiosMock.onGet(progressUrl).reply(200, progressTabData);
|
||||
}
|
||||
|
||||
async function fetchAndRender() {
|
||||
await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
|
||||
await act(async () => render(<ProgressTab />, { store }));
|
||||
}
|
||||
|
||||
beforeEach(async () => {
|
||||
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
||||
|
||||
// Set defaults for network requests
|
||||
axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
|
||||
axiosMock.onGet(progressUrl).reply(200, defaultTabData);
|
||||
|
||||
logUnhandledRequests(axiosMock);
|
||||
});
|
||||
|
||||
describe('Grade Summary', () => {
|
||||
it('renders Grade Summary table when assignment policies are populated', async () => {
|
||||
await fetchAndRender();
|
||||
expect(screen.getByText('Grade summary')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render Grade Summary when assignment policies are not populated', async () => {
|
||||
setTabData({
|
||||
grading_policy: {
|
||||
assignment_policies: [],
|
||||
},
|
||||
});
|
||||
await fetchAndRender();
|
||||
expect(screen.queryByText('Grade summary')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Detailed Grades', () => {
|
||||
it('renders Detailed Grades table when section scores are populated', async () => {
|
||||
await fetchAndRender();
|
||||
expect(screen.getByText('Detailed grades')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByRole('link', { name: 'First subsection' }));
|
||||
expect(screen.getByRole('link', { name: 'Second subsection' }));
|
||||
});
|
||||
|
||||
it('render message when section scores are not populated', async () => {
|
||||
setTabData({
|
||||
section_scores: [],
|
||||
});
|
||||
await fetchAndRender();
|
||||
expect(screen.getByText('Detailed grades')).toBeInTheDocument();
|
||||
expect(screen.getByText('You currently have no graded problem scores.')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,77 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import messages from './messages';
|
||||
|
||||
import DueDateTime from './DueDateTime';
|
||||
import ProblemScores from './ProblemScores';
|
||||
|
||||
function Subsection({
|
||||
intl,
|
||||
subsection,
|
||||
}) {
|
||||
const scoreName = subsection.graded ? 'problem' : 'practice';
|
||||
|
||||
const { earned, possible } = subsection.gradedTotal;
|
||||
|
||||
const showTotalScore = ((possible > 0) || (earned > 0)) && subsection.showGrades;
|
||||
|
||||
// screen reader information
|
||||
const totalScoreSr = intl.formatMessage(messages.pointsEarned, { earned, total: possible });
|
||||
|
||||
return (
|
||||
<section className="my-3 ml-3">
|
||||
<div className="row">
|
||||
<a className="h6" href={subsection.url}>
|
||||
{/* eslint-disable-next-line react/no-danger */}
|
||||
<div dangerouslySetInnerHTML={{ __html: subsection.displayName }} />
|
||||
{showTotalScore && <span className="sr-only">{totalScoreSr}</span>}
|
||||
</a>
|
||||
{showTotalScore && <span className="small ml-1 mb-2">({earned}/{possible}) {subsection.percentGraded}%</span>}
|
||||
</div>
|
||||
<div className="row small">
|
||||
{subsection.format && <div className="mr-1">{subsection.format}</div>}
|
||||
{subsection.due !== null && <DueDateTime due={subsection.due} />}
|
||||
</div>
|
||||
{subsection.problemScores.length > 0 && subsection.showGrades && (
|
||||
<ProblemScores scoreName={scoreName} problemScores={subsection.problemScores} />
|
||||
)}
|
||||
{subsection.problemScores.length > 0 && !subsection.showGrades && subsection.showCorrectness === 'past_due' && (
|
||||
<div className="row small">{intl.formatMessage(messages[`${scoreName}HiddenUntil`])}</div>
|
||||
)}
|
||||
{subsection.problemScores.length > 0 && !subsection.showGrades && !(subsection.showCorrectness === 'past_due')
|
||||
&& <div className="row small">{intl.formatMessage(messages[`${scoreName}Hidden`])}</div>}
|
||||
{(subsection.problemScores.length === 0) && (
|
||||
<div className="row small">{intl.formatMessage(messages.noScores)}</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Subsection.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
subsection: PropTypes.shape({
|
||||
graded: PropTypes.bool.isRequired,
|
||||
url: PropTypes.string.isRequired,
|
||||
showGrades: PropTypes.bool.isRequired,
|
||||
gradedTotal: PropTypes.shape({
|
||||
possible: PropTypes.number,
|
||||
earned: PropTypes.number,
|
||||
graded: PropTypes.bool,
|
||||
}).isRequired,
|
||||
showCorrectness: PropTypes.string.isRequired,
|
||||
due: PropTypes.string,
|
||||
problemScores: PropTypes.arrayOf(PropTypes.shape({
|
||||
possible: PropTypes.number,
|
||||
earned: PropTypes.number,
|
||||
id: PropTypes.string,
|
||||
})).isRequired,
|
||||
format: PropTypes.string,
|
||||
// override: PropTypes.object,
|
||||
displayName: PropTypes.string.isRequired,
|
||||
percentGraded: PropTypes.number.isRequired,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(Subsection);
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
function CertificateStatus() {
|
||||
return (
|
||||
<section className="text-dark-700 rounded shadow-sm mb-4 p-4">
|
||||
{/* TODO: AA-719 */}
|
||||
<h3 className="h4">Certificate status</h3>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default CertificateStatus;
|
||||
@@ -0,0 +1,77 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { OverlayTrigger, Popover } from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
function CompleteDonutSegment({ completePercentage, intl, lockedPercentage }) {
|
||||
const [showCompletePopover, setShowCompletePopover] = useState(false);
|
||||
|
||||
const completeSegmentOffset = (3.6 * completePercentage) / 8;
|
||||
let completeTooltipDegree = completePercentage < 100 ? -completeSegmentOffset : 0;
|
||||
|
||||
const lockedSegmentOffset = lockedPercentage - 75;
|
||||
if (lockedPercentage > 0) {
|
||||
completeTooltipDegree = (lockedSegmentOffset + completePercentage) * -3.6 + 90 + completeSegmentOffset;
|
||||
}
|
||||
|
||||
return (
|
||||
<g
|
||||
className="donut-segment-group"
|
||||
onBlur={() => setShowCompletePopover(false)}
|
||||
onFocus={() => setShowCompletePopover(true)}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<circle
|
||||
className="donut-segment complete-stroke"
|
||||
cx="21"
|
||||
cy="21"
|
||||
r="15.91549430918954"
|
||||
strokeDasharray={`${completePercentage} ${100 - completePercentage}`}
|
||||
strokeDashoffset={lockedSegmentOffset + completePercentage}
|
||||
/>
|
||||
|
||||
{/* Tooltip */}
|
||||
<OverlayTrigger
|
||||
show={showCompletePopover}
|
||||
placement="top"
|
||||
overlay={(
|
||||
<Popover aria-hidden="true">
|
||||
<Popover.Content>
|
||||
{intl.formatMessage(messages.completeContentTooltip)}
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
)}
|
||||
>
|
||||
{/* Used to anchor the tooltip within the complete segment's stroke */}
|
||||
<rect x="19" y="3" style={{ transform: `rotate(${completeTooltipDegree}deg)` }} />
|
||||
</OverlayTrigger>
|
||||
|
||||
{/* Segment dividers */}
|
||||
{lockedPercentage > 0 && lockedPercentage < 100 && (
|
||||
<circle
|
||||
className="donut-segment divider-stroke"
|
||||
strokeDasharray="0.3 99.7"
|
||||
strokeDashoffset={0.15 + lockedSegmentOffset}
|
||||
/>
|
||||
)}
|
||||
{completePercentage < 100 && lockedPercentage < 100 && lockedPercentage + completePercentage === 100 && (
|
||||
<circle
|
||||
className="donut-segment divider-stroke"
|
||||
strokeDasharray="0.3 99.7"
|
||||
strokeDashoffset="25.15"
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
CompleteDonutSegment.propTypes = {
|
||||
completePercentage: PropTypes.number.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
lockedPercentage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(CompleteDonutSegment);
|
||||
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { useModel } from '../../../generic/model-store';
|
||||
|
||||
import CompleteDonutSegment from './CompleteDonutSegment';
|
||||
import IncompleteDonutSegment from './IncompleteDonutSegment';
|
||||
import LockedDonutSegment from './LockedDonutSegment';
|
||||
import messages from './messages';
|
||||
|
||||
function CompletionDonutChart({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
completionSummary: {
|
||||
completeCount,
|
||||
incompleteCount,
|
||||
lockedCount,
|
||||
},
|
||||
} = useModel('progress', courseId);
|
||||
|
||||
const numTotalUnits = completeCount + incompleteCount + lockedCount;
|
||||
const completePercentage = Number(((completeCount / numTotalUnits) * 100).toFixed(0));
|
||||
const lockedPercentage = Number(((lockedCount / numTotalUnits) * 100).toFixed(0));
|
||||
const incompletePercentage = 100 - completePercentage - lockedPercentage;
|
||||
|
||||
return (
|
||||
<>
|
||||
<svg role="img" width="50%" height="100%" viewBox="0 0 42 42" className="donut" style={{ maxWidth: '178px' }} aria-hidden="true">
|
||||
{/* The radius (or "r" attribute) is based off of a circumference of 100 in order to simplify percentage
|
||||
calculations. The subsequent stroke-dasharray values found in each segment should add up to equal 100
|
||||
in order to wrap around the circle once. */}
|
||||
<circle className="donut-hole" fill="#fff" cx="21" cy="21" r="15.91549430918954" />
|
||||
<g className="donut-chart-text">
|
||||
<text x="50%" y="50%" className="donut-chart-number">
|
||||
{completePercentage}%
|
||||
</text>
|
||||
<text x="50%" y="50%" className="donut-chart-label">
|
||||
{intl.formatMessage(messages.donutLabel)}
|
||||
</text>
|
||||
</g>
|
||||
<IncompleteDonutSegment incompletePercentage={incompletePercentage} />
|
||||
<LockedDonutSegment lockedPercentage={lockedPercentage} />
|
||||
<CompleteDonutSegment completePercentage={completePercentage} lockedPercentage={lockedPercentage} />
|
||||
</svg>
|
||||
<div className="sr-only">
|
||||
{intl.formatMessage(messages.percentComplete, { percent: completePercentage })}
|
||||
{intl.formatMessage(messages.percentIncomplete, { percent: incompletePercentage })}
|
||||
{lockedPercentage > 0 && (
|
||||
<>
|
||||
{intl.formatMessage(messages.percentLocked, { percent: lockedPercentage })}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
CompletionDonutChart.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(CompletionDonutChart);
|
||||
@@ -0,0 +1,74 @@
|
||||
.donut rect {
|
||||
fill: transparent;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.donut-chart-label {
|
||||
font: {
|
||||
family: $font-family-sans-serif;
|
||||
size: .2rem;
|
||||
weight: $font-weight-normal;
|
||||
}
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.donut-chart-number {
|
||||
font: {
|
||||
family: $font-family-monospace;
|
||||
size: .5rem;
|
||||
weight: $font-weight-bold;
|
||||
}
|
||||
line-height: 1rem;
|
||||
text-anchor: middle;
|
||||
-moz-transform: translateY(-0.6em);
|
||||
-ms-transform: translateY(-0.6em);
|
||||
-webkit-transform: translateY(-0.6em);
|
||||
transform: translateY(-0.6em);
|
||||
}
|
||||
|
||||
.donut-chart-text {
|
||||
fill: $primary-500;
|
||||
-moz-transform: translateY(0.25em);
|
||||
-ms-transform: translateY(0.25em);
|
||||
-webkit-transform: translateY(0.25em);
|
||||
transform: translateY(0.25em);
|
||||
}
|
||||
|
||||
.donut-ring, .donut-segment {
|
||||
stroke-width: 6px;
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
.donut-segment-group {
|
||||
cursor: pointer;
|
||||
pointer-events: visibleStroke;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
circle {
|
||||
stroke-width: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donut-ring, .donut-segment, .donut-hole {
|
||||
&.complete-stroke {
|
||||
stroke: $info-500;
|
||||
}
|
||||
|
||||
&.divider-stroke {
|
||||
stroke-width: 7px;
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
&.incomplete-stroke {
|
||||
stroke: $light-300;
|
||||
}
|
||||
|
||||
&.locked-stroke {
|
||||
stroke: $primary-500;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import CompletionDonutChart from './CompletionDonutChart';
|
||||
import messages from './messages';
|
||||
|
||||
function CourseCompletion({ intl }) {
|
||||
return (
|
||||
<section className="text-dark-700 mb-4 rounded shadow-sm p-4">
|
||||
<div className="row w-100 m-0">
|
||||
<div className="col-12 col-sm-6 col-md-7 p-0">
|
||||
<h2>{intl.formatMessage(messages.courseCompletion)}</h2>
|
||||
<p className="small">
|
||||
{intl.formatMessage(messages.completionBody)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
|
||||
<CompletionDonutChart />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
CourseCompletion.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(CourseCompletion);
|
||||
@@ -0,0 +1,55 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { OverlayTrigger, Popover } from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
function IncompleteDonutSegment({ incompletePercentage, intl }) {
|
||||
const [showIncompletePopover, setShowIncompletePopover] = useState(false);
|
||||
|
||||
const incompleteSegmentOffset = (3.6 * incompletePercentage) / 16;
|
||||
const incompleteTooltipDegree = incompletePercentage < 100 ? incompleteSegmentOffset : 0;
|
||||
|
||||
return (
|
||||
<g
|
||||
className="donut-segment-group"
|
||||
onBlur={() => setShowIncompletePopover(false)}
|
||||
onFocus={() => setShowIncompletePopover(true)}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<circle
|
||||
className="donut-ring incomplete-stroke"
|
||||
cx="21"
|
||||
cy="21"
|
||||
r="15.91549430918954"
|
||||
strokeDasharray={`${incompletePercentage} ${100 - incompletePercentage}`}
|
||||
strokeDashoffset="25"
|
||||
/>
|
||||
|
||||
{/* Tooltip */}
|
||||
<OverlayTrigger
|
||||
show={showIncompletePopover}
|
||||
placement="top"
|
||||
overlay={(
|
||||
<Popover aria-hidden="true">
|
||||
<Popover.Content>
|
||||
{intl.formatMessage(messages.incompleteContentTooltip)}
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
)}
|
||||
>
|
||||
{/* Used to anchor the tooltip within the incomplete segment's stroke */}
|
||||
<rect x="19" y="3" style={{ transform: `rotate(${incompleteTooltipDegree}deg)` }} />
|
||||
</OverlayTrigger>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
IncompleteDonutSegment.propTypes = {
|
||||
incompletePercentage: PropTypes.number.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(IncompleteDonutSegment);
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { OverlayTrigger, Popover } from '@edx/paragon';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
function LockedDonutSegment({ intl, lockedPercentage }) {
|
||||
const [showLockedPopover, setShowLockedPopover] = useState(false);
|
||||
|
||||
if (!lockedPercentage > 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const iconDegree = lockedPercentage > 8 ? (3.6 * lockedPercentage) / 8 : ((3.6 * lockedPercentage) / 5) * 2;
|
||||
|
||||
return (
|
||||
<g
|
||||
className="donut-segment-group"
|
||||
onBlur={() => setShowLockedPopover(false)}
|
||||
onFocus={() => setShowLockedPopover(true)}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<circle
|
||||
className="donut-segment locked-stroke"
|
||||
cx="21"
|
||||
cy="21"
|
||||
r="15.91549430918954"
|
||||
strokeDasharray={`${lockedPercentage} ${100 - lockedPercentage}`}
|
||||
strokeDashoffset={lockedPercentage - 75}
|
||||
/>
|
||||
|
||||
{/* Tooltip */}
|
||||
<OverlayTrigger
|
||||
show={showLockedPopover}
|
||||
placement="top"
|
||||
overlay={(
|
||||
<Popover aria-hidden="true">
|
||||
<Popover.Content>
|
||||
{intl.formatMessage(messages.lockedContentTooltip)}
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
)}
|
||||
>
|
||||
<g
|
||||
width="6"
|
||||
height="21"
|
||||
viewBox="0 0 21 6"
|
||||
style={{
|
||||
transformOrigin: 'center',
|
||||
transform: `rotate(-${iconDegree}deg)`,
|
||||
}}
|
||||
>
|
||||
{/* Locked icon */}
|
||||
<path
|
||||
d="M20 8.00002H17V6.21002C17 3.60002 15.09 1.27002 12.49 1.02002C9.51 0.740018 7 3.08002 7 6.00002V8.00002H4V22H20V8.00002ZM12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15C14 16.1 13.1 17 12 17ZM9 8.00002V6.00002C9 4.34002 10.34 3.00002 12 3.00002C13.66 3.00002 15 4.34002 15 6.00002V8.00002H9Z"
|
||||
fill={lockedPercentage > 5 ? 'white' : 'transparent'}
|
||||
style={{ transform: `scale(0.18) translate(5.8em, .7em) rotate(${iconDegree}deg)` }}
|
||||
/>
|
||||
</g>
|
||||
</OverlayTrigger>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
LockedDonutSegment.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
lockedPercentage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(LockedDonutSegment);
|
||||
42
src/course-home/progress-tab/course-completion/messages.js
Normal file
42
src/course-home/progress-tab/course-completion/messages.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
donutLabel: {
|
||||
id: 'progress.completion.donut.label',
|
||||
defaultMessage: 'completed',
|
||||
},
|
||||
completionBody: {
|
||||
id: 'progress.completion.body',
|
||||
defaultMessage: 'This represents how much of the course content you have completed. Note that some content may not yet be released.',
|
||||
},
|
||||
completeContentTooltip: {
|
||||
id: 'progress.completion.tooltip.locked',
|
||||
defaultMessage: 'Content that you have completed.',
|
||||
},
|
||||
courseCompletion: {
|
||||
id: 'progress.completion.header',
|
||||
defaultMessage: 'Course completion',
|
||||
},
|
||||
incompleteContentTooltip: {
|
||||
id: 'progress.completion.tooltip',
|
||||
defaultMessage: 'Content that you have access to and have not completed.',
|
||||
},
|
||||
lockedContentTooltip: {
|
||||
id: 'progress.completion.tooltip.complete',
|
||||
defaultMessage: 'Content that is locked and available only to those who upgrade.',
|
||||
},
|
||||
percentComplete: {
|
||||
id: 'progress.completion.donut.percentComplete',
|
||||
defaultMessage: 'You have completed {percent}% of content in this course.',
|
||||
},
|
||||
percentIncomplete: {
|
||||
id: 'progress.completion.donut.percentIncomplete',
|
||||
defaultMessage: 'You have not completed {percent}% of content in this course that you have access to.',
|
||||
},
|
||||
percentLocked: {
|
||||
id: 'progress.completion.donut.percentLocked',
|
||||
defaultMessage: '{percent}% of content in this course is locked and available only for those who upgrade.',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
function CourseGrade() {
|
||||
return (
|
||||
<section className="text-dark-700 my-4 rounded shadow-sm p-4">
|
||||
{/* TODO: AA-721 */}
|
||||
<h2>Grades</h2>
|
||||
<p className="small">This represents your weighted grade against the grade needed to pass this course.</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default CourseGrade;
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { useModel } from '../../../../generic/model-store';
|
||||
|
||||
import DetailedGradesTable from './DetailedGradesTable';
|
||||
|
||||
import messages from '../messages';
|
||||
|
||||
function DetailedGrades({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
sectionScores,
|
||||
} = useModel('progress', courseId);
|
||||
|
||||
const hasSectionScores = sectionScores.length > 0;
|
||||
|
||||
const outlineLink = (
|
||||
<Link
|
||||
className="text-dark-700"
|
||||
style={{ textDecoration: 'underline' }}
|
||||
to={`/course/${courseId}/home`}
|
||||
>
|
||||
{intl.formatMessage(messages.courseOutline)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="text-dark-700">
|
||||
<h3 className="h4 mb-3">{intl.formatMessage(messages.detailedGrades)}</h3>
|
||||
{hasSectionScores && (
|
||||
<DetailedGradesTable sectionScores={sectionScores} />
|
||||
)}
|
||||
{!hasSectionScores && (
|
||||
<p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>
|
||||
)}
|
||||
<p className="x-small m-0">
|
||||
<FormattedMessage
|
||||
id="progress.ungradedAlert"
|
||||
defaultMessage="For progress on ungraded aspects of the course, view your {outlineLink}."
|
||||
values={{ outlineLink }}
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
DetailedGrades.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(DetailedGrades);
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { DataTable } from '@edx/paragon';
|
||||
|
||||
import messages from '../messages';
|
||||
|
||||
function DetailedGradesTable({ intl, sectionScores }) {
|
||||
return (
|
||||
sectionScores.map((chapter) => {
|
||||
const subsectionScores = chapter.subsections.filter(
|
||||
(subsection) => !!(
|
||||
subsection.hasGradedAssignment
|
||||
&& subsection.showGrades
|
||||
&& (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)),
|
||||
);
|
||||
|
||||
if (subsectionScores.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const detailedGradesData = subsectionScores.map((subsection) => {
|
||||
const title = <a href={subsection.url} className="text-dark-700 small">{subsection.displayName}</a>;
|
||||
return {
|
||||
subsectionTitle: title,
|
||||
score: `${subsection.numPointsEarned}/${subsection.numPointsPossible}`,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-3" key={`${chapter.displayName}-grades-table`}>
|
||||
<DataTable
|
||||
data={detailedGradesData}
|
||||
itemCount={detailedGradesData.length}
|
||||
columns={[
|
||||
{
|
||||
Header: chapter.displayName,
|
||||
accessor: 'subsectionTitle',
|
||||
headerClassName: 'h5 mb-0',
|
||||
cellClassName: 'mw-100',
|
||||
},
|
||||
{
|
||||
Header: `${intl.formatMessage(messages.score)}`,
|
||||
accessor: 'score',
|
||||
headerClassName: 'justify-content-end h5 mb-0',
|
||||
cellClassName: 'float-right text-right small',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DataTable.Table />
|
||||
</DataTable>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
DetailedGradesTable.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
sectionScores: PropTypes.arrayOf(PropTypes.shape({
|
||||
displayName: PropTypes.string.isRequired,
|
||||
subsections: PropTypes.arrayOf(PropTypes.shape({
|
||||
displayName: PropTypes.string.isRequired,
|
||||
numPointsEarned: PropTypes.number.isRequired,
|
||||
numPointsPossible: PropTypes.number.isRequired,
|
||||
url: PropTypes.string.isRequired,
|
||||
})),
|
||||
})).isRequired,
|
||||
};
|
||||
|
||||
DetailedGradesTable.defaultProps = {
|
||||
sectionScores: {
|
||||
subsections: [],
|
||||
},
|
||||
};
|
||||
|
||||
export default injectIntl(DetailedGradesTable);
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
|
||||
return (
|
||||
<div className="small">
|
||||
{assignmentType}
|
||||
{footnoteId && footnoteMarker && (
|
||||
<sup>
|
||||
<a id={`${footnoteId}-ref`} className="text-dark-700" href={`#${footnoteId}-footnote`} aria-describedby="grade-summary-footnote-label">
|
||||
{footnoteMarker}
|
||||
</a>
|
||||
</sup>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
AssignmentTypeCell.propTypes = {
|
||||
assignmentType: PropTypes.string.isRequired,
|
||||
footnoteId: PropTypes.string,
|
||||
footnoteMarker: PropTypes.number,
|
||||
};
|
||||
|
||||
AssignmentTypeCell.defaultProps = {
|
||||
footnoteId: '',
|
||||
footnoteMarker: '',
|
||||
};
|
||||
|
||||
export default AssignmentTypeCell;
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from '../messages';
|
||||
|
||||
function DroppableAssignmentFootnote({ footnotes, intl }) {
|
||||
return (
|
||||
<>
|
||||
<span id="grade-summary-footnote-label" className="sr-only">{intl.formatMessage(messages.footnotesTitle)}</span>
|
||||
<ul className="list-unstyled mt-2">
|
||||
{footnotes.map((footnote, index) => (
|
||||
<li id={`${footnote.id}-footnote`} key={footnote.id} className="x-small mt-1">
|
||||
<sup>{index + 1}</sup>
|
||||
<FormattedMessage
|
||||
id="progress.footnotes.droppableAssignments"
|
||||
defaultMessage="The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped."
|
||||
values={{
|
||||
numDroppable: footnote.numDroppable,
|
||||
assignmentType: footnote.assignmentType,
|
||||
}}
|
||||
/>
|
||||
<a className="sr-only" href={`#${footnote.id}-ref`}>{intl.formatMessage(messages.backToContent)}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
DroppableAssignmentFootnote.propTypes = {
|
||||
footnotes: PropTypes.arrayOf(PropTypes.shape({
|
||||
assignmentType: PropTypes.string.isRequired,
|
||||
id: PropTypes.string.isRequired,
|
||||
numDroppable: PropTypes.number.isRequired,
|
||||
})).isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(DroppableAssignmentFootnote);
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useModel } from '../../../../generic/model-store';
|
||||
|
||||
import GradeSummaryHeader from './GradeSummaryHeader';
|
||||
import GradeSummaryTable from './GradeSummaryTable';
|
||||
|
||||
function GradeSummary() {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
sectionScores,
|
||||
gradingPolicy: {
|
||||
assignmentPolicies,
|
||||
},
|
||||
} = useModel('progress', courseId);
|
||||
|
||||
if (assignmentPolicies.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// accumulate grades for individual assignment types
|
||||
const gradeByAssignmentType = {};
|
||||
assignmentPolicies.forEach(assignment => {
|
||||
gradeByAssignmentType[assignment.type] = { numPointsEarned: 0, numPointsPossible: 0 };
|
||||
});
|
||||
|
||||
sectionScores.forEach((chapter) => {
|
||||
chapter.subsections.forEach((subsection) => {
|
||||
if (subsection.hasGradedAssignment) {
|
||||
gradeByAssignmentType[subsection.assignmentType].numPointsEarned += subsection.numPointsEarned;
|
||||
gradeByAssignmentType[subsection.assignmentType].numPointsPossible += subsection.numPointsPossible;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="text-dark-700 mb-4">
|
||||
<GradeSummaryHeader />
|
||||
<GradeSummaryTable
|
||||
gradeByAssignmentType={gradeByAssignmentType}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default GradeSummary;
|
||||
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Icon, OverlayTrigger, Popover } from '@edx/paragon';
|
||||
import { InfoOutline } from '@edx/paragon/icons';
|
||||
|
||||
import messages from '../messages';
|
||||
|
||||
function GradeSummaryHeader({ intl }) {
|
||||
return (
|
||||
<div className="row w-100 m-0 align-items-center">
|
||||
<h3 className="h4 mb-3 mr-2">{intl.formatMessage(messages.gradeSummary)}</h3>
|
||||
<OverlayTrigger
|
||||
trigger="click"
|
||||
placement="top"
|
||||
overlay={(
|
||||
<Popover>
|
||||
<Popover.Content className="small text-dark-700">
|
||||
{intl.formatMessage(messages.gradeSummaryTooltip)}
|
||||
</Popover.Content>
|
||||
</Popover>
|
||||
)}
|
||||
>
|
||||
<Icon src={InfoOutline} className="mb-3" style={{ height: '1rem', width: '1rem' }} />
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
GradeSummaryHeader.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(GradeSummaryHeader);
|
||||
@@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { DataTable } from '@edx/paragon';
|
||||
import { useModel } from '../../../../generic/model-store';
|
||||
|
||||
import AssignmentTypeCell from './AssignmentTypeCell';
|
||||
import DroppableAssignmentFootnote from './DroppableAssignmentFootnote';
|
||||
import GradeSummaryTableFooter from './GradeSummaryTableFooter';
|
||||
|
||||
import messages from '../messages';
|
||||
|
||||
function GradeSummaryTable({
|
||||
gradeByAssignmentType, intl,
|
||||
}) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
gradingPolicy: {
|
||||
assignmentPolicies,
|
||||
},
|
||||
} = useModel('progress', courseId);
|
||||
|
||||
const footnotes = [];
|
||||
|
||||
const calculateWeightedGrade = (numPointsEarned, numPointsPossible, assignmentWeight) => (
|
||||
numPointsPossible > 0 ? ((numPointsEarned * assignmentWeight * 100) / numPointsPossible).toFixed(0) : 0
|
||||
);
|
||||
|
||||
const getFootnoteId = (assignment) => {
|
||||
const footnoteId = assignment.shortLabel ? assignment.shortLabel : assignment.type;
|
||||
return footnoteId.replace(/[^A-Za-z0-9.-_]+/g, '-');
|
||||
};
|
||||
|
||||
const gradeSummaryData = assignmentPolicies.map((assignment) => {
|
||||
let footnoteId = '';
|
||||
let footnoteMarker = '';
|
||||
|
||||
if (assignment.numDroppable > 0) {
|
||||
footnoteId = getFootnoteId(assignment);
|
||||
footnotes.push({
|
||||
id: footnoteId,
|
||||
numDroppable: assignment.numDroppable,
|
||||
assignmentType: assignment.type,
|
||||
});
|
||||
|
||||
footnoteMarker = footnotes.length;
|
||||
}
|
||||
|
||||
const weightedGrade = calculateWeightedGrade(
|
||||
gradeByAssignmentType[assignment.type].numPointsEarned,
|
||||
gradeByAssignmentType[assignment.type].numPointsPossible,
|
||||
assignment.weight,
|
||||
);
|
||||
|
||||
return {
|
||||
type: { footnoteId, footnoteMarker, type: assignment.type },
|
||||
weight: `${assignment.weight * 100}%`,
|
||||
score: `${gradeByAssignmentType[assignment.type].numPointsEarned}/${gradeByAssignmentType[assignment.type].numPointsPossible}`,
|
||||
weightedGrade: `${weightedGrade}%`,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable
|
||||
data={gradeSummaryData}
|
||||
itemCount={gradeSummaryData.length}
|
||||
columns={[
|
||||
{
|
||||
Header: `${intl.formatMessage(messages.assignmentType)}`,
|
||||
accessor: 'type',
|
||||
// eslint-disable-next-line react/prop-types
|
||||
Cell: ({ value }) => (
|
||||
<AssignmentTypeCell
|
||||
assignmentType={value.type} // eslint-disable-line react/prop-types
|
||||
footnoteId={value.footnoteId} // eslint-disable-line react/prop-types
|
||||
footnoteMarker={value.footnoteMarker} // eslint-disable-line react/prop-types
|
||||
/>
|
||||
),
|
||||
headerClassName: 'h5 mb-0',
|
||||
},
|
||||
{
|
||||
Header: `${intl.formatMessage(messages.weight)}`,
|
||||
accessor: 'weight',
|
||||
headerClassName: 'justify-content-end h5 mb-0',
|
||||
cellClassName: 'float-right small',
|
||||
},
|
||||
{
|
||||
Header: `${intl.formatMessage(messages.score)}`,
|
||||
accessor: 'score',
|
||||
headerClassName: 'justify-content-end h5 mb-0',
|
||||
cellClassName: 'float-right small',
|
||||
},
|
||||
{
|
||||
Header: `${intl.formatMessage(messages.weightedGrade)}`,
|
||||
accessor: 'weightedGrade',
|
||||
headerClassName: 'justify-content-end h5 mb-0 text-right',
|
||||
cellClassName: 'float-right font-weight-bold small',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DataTable.Table />
|
||||
<GradeSummaryTableFooter />
|
||||
</DataTable>
|
||||
|
||||
{footnotes && (
|
||||
<DroppableAssignmentFootnote footnotes={footnotes} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
GradeSummaryTable.propTypes = {
|
||||
gradeByAssignmentType: PropTypes.shape({}).isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(GradeSummaryTable);
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { DataTable } from '@edx/paragon';
|
||||
import { useModel } from '../../../../generic/model-store';
|
||||
|
||||
import messages from '../messages';
|
||||
|
||||
function GradeSummaryTableFooter({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
const {
|
||||
courseGrade: {
|
||||
isPassing,
|
||||
percent,
|
||||
},
|
||||
} = useModel('progress', courseId);
|
||||
|
||||
const bgColor = isPassing ? 'bg-success-100' : 'bg-warning-100';
|
||||
const totalGrade = percent * 100;
|
||||
|
||||
return (
|
||||
<DataTable.TableFooter className={`border-top border-primary ${bgColor}`}>
|
||||
<div className="row w-100 m-0">
|
||||
<div id="weighted-grade-summary" className="col-8 p-0 small">{intl.formatMessage(messages.weightedGradeSummary)}</div>
|
||||
<div aria-labelledby="weighted-grade-summary" className="col-4 p-0 text-right font-weight-bold small">{totalGrade}%</div>
|
||||
</div>
|
||||
</DataTable.TableFooter>
|
||||
);
|
||||
}
|
||||
|
||||
GradeSummaryTableFooter.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(GradeSummaryTableFooter);
|
||||
56
src/course-home/progress-tab/grades/messages.js
Normal file
56
src/course-home/progress-tab/grades/messages.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
assignmentType: {
|
||||
id: 'progress.assignmentType',
|
||||
defaultMessage: 'Assignment type',
|
||||
},
|
||||
backToContent: {
|
||||
id: 'progress.footnotes.backToContent',
|
||||
defaultMessage: 'Back to content',
|
||||
},
|
||||
courseOutline: {
|
||||
id: 'progress.courseOutline',
|
||||
defaultMessage: 'Course Outline',
|
||||
},
|
||||
detailedGrades: {
|
||||
id: 'progress.detailedGrades',
|
||||
defaultMessage: 'Detailed grades',
|
||||
},
|
||||
detailedGradesEmpty: {
|
||||
id: 'progress.detailedGrades.emptyTable',
|
||||
defaultMessage: 'You currently have no graded problem scores.',
|
||||
},
|
||||
footnotesTitle: {
|
||||
id: 'progress.footnotes.title',
|
||||
defaultMessage: 'Grade summary footnotes',
|
||||
},
|
||||
gradeSummary: {
|
||||
id: 'progress.gradeSummary',
|
||||
defaultMessage: 'Grade summary',
|
||||
},
|
||||
gradeSummaryTooltip: {
|
||||
id: 'progress.gradeSummary.tooltip',
|
||||
defaultMessage: "Your course assignment's weight is determined by your instructor. "
|
||||
+ 'By multiplying your score by the weight for that assignment type, your weighted grade is calculated. '
|
||||
+ "Your weighted grade is what's used to determine if you pass the course.",
|
||||
},
|
||||
score: {
|
||||
id: 'progress.score',
|
||||
defaultMessage: 'Score',
|
||||
},
|
||||
weight: {
|
||||
id: 'progress.weight',
|
||||
defaultMessage: 'Weight',
|
||||
},
|
||||
weightedGrade: {
|
||||
id: 'progress.weightedGrade',
|
||||
defaultMessage: 'Weighted grade',
|
||||
},
|
||||
weightedGradeSummary: {
|
||||
id: 'progress.weightedGradeSummary',
|
||||
defaultMessage: 'Your current weighted grade summary',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
@@ -1,123 +1,14 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
problem: {
|
||||
id: 'learning.progress.badge.problem',
|
||||
defaultMessage: 'Problem Scores: ',
|
||||
},
|
||||
practice: {
|
||||
id: 'learning.progress.badge.practice',
|
||||
defaultMessage: 'Practice Scores: ',
|
||||
},
|
||||
problemHiddenUntil: {
|
||||
id: 'learning.progress.badge.problemHiddenUntil',
|
||||
defaultMessage: 'Problem scores are hidden until the due date.',
|
||||
},
|
||||
practiceHiddenUntil: {
|
||||
id: 'learning.progress.badge.practiceHiddenUntil',
|
||||
defaultMessage: 'Practice scores are hidden until the due date.',
|
||||
},
|
||||
problemHidden: {
|
||||
id: 'learning.progress.badge.probHidden',
|
||||
defaultMessage: 'problemlem scores are hidden.',
|
||||
},
|
||||
practiceHidden: {
|
||||
id: 'learning.progress.badge.practiceHidden',
|
||||
defaultMessage: 'Practice scores are hidden.',
|
||||
},
|
||||
noScores: {
|
||||
id: 'learning.progress.badge.noScores',
|
||||
defaultMessage: 'No problem scores in this section.',
|
||||
},
|
||||
pointsEarned: {
|
||||
id: 'learning.progress.badge.scoreEarned',
|
||||
defaultMessage: '{earned} of {total} possible points',
|
||||
},
|
||||
viewCert: {
|
||||
id: 'learning.progress.badge.viewCert',
|
||||
defaultMessage: 'View Certificate',
|
||||
},
|
||||
downloadCert: {
|
||||
id: 'learning.progress.badge.downloadCert',
|
||||
defaultMessage: 'Download Your Certificate',
|
||||
},
|
||||
requestCert: {
|
||||
id: 'learning.progress.badge.requestCert',
|
||||
defaultMessage: 'Request Certificate',
|
||||
},
|
||||
opensNewWindow: {
|
||||
id: 'learning.progress.badge.opensNewWindow',
|
||||
defaultMessage: 'Opens in a new browser window',
|
||||
},
|
||||
certAlt: {
|
||||
id: 'learning.progress.badge.certAlt',
|
||||
defaultMessage: 'Example Certificate',
|
||||
description: 'Alternate text displayed when the example certificate image cannot be displayed.',
|
||||
progressHeader: {
|
||||
id: 'progress.header',
|
||||
defaultMessage: 'Your progress',
|
||||
},
|
||||
studioLink: {
|
||||
id: 'learning.progress.badge.studioLink',
|
||||
id: 'progress.link.studio',
|
||||
defaultMessage: 'View grading in Studio',
|
||||
},
|
||||
courseCreditHeader: {
|
||||
id: 'learning.progress.courseCreditHeader',
|
||||
defaultMessage: 'Course Credit Eligibility',
|
||||
},
|
||||
creditNotEligible: {
|
||||
id: 'learning.progress.creditNotEligible',
|
||||
defaultMessage: 'You are not eligible for course credit because you have not met the requirements for credit.',
|
||||
},
|
||||
creditEligible: {
|
||||
id: 'learning.progress.creditEligible',
|
||||
defaultMessage: 'You have met the requirements for credit in this course.',
|
||||
},
|
||||
creditPartialEligible: {
|
||||
id: 'learning.progress.creditPartialEligible',
|
||||
defaultMessage: 'You have not met the minimum requirements for credit.',
|
||||
},
|
||||
start: {
|
||||
id: 'learning.progress.startVerification',
|
||||
defaultMessage: 'Start now',
|
||||
},
|
||||
tryAgain: {
|
||||
id: 'learning.progress.start',
|
||||
defaultMessage: 'Try again',
|
||||
},
|
||||
notStarted: {
|
||||
id: 'learning.progress.notStarted',
|
||||
defaultMessage: 'Not started',
|
||||
},
|
||||
failed: {
|
||||
id: 'learning.progress.failed',
|
||||
defaultMessage: 'Incomplete',
|
||||
},
|
||||
notMet: {
|
||||
id: 'learning.progress.notMet',
|
||||
defaultMessage: 'Not met',
|
||||
},
|
||||
pending: {
|
||||
id: 'learning.progress.pending',
|
||||
defaultMessage: 'Pending',
|
||||
},
|
||||
rejected: {
|
||||
id: 'learning.progress.rejected',
|
||||
defaultMessage: 'Rejected',
|
||||
},
|
||||
completed: {
|
||||
id: 'learning.progress.completed',
|
||||
defaultMessage: 'Completed',
|
||||
},
|
||||
submitted: {
|
||||
id: 'learning.progress.submitted',
|
||||
defaultMessage: 'Submitted',
|
||||
},
|
||||
learnMoreCredit: {
|
||||
id: 'learning.progress.learnMoreCredit',
|
||||
defaultMessage: 'Learn more about course credit',
|
||||
},
|
||||
purchaseCredit: {
|
||||
id: 'learning.progress.purchaseCredit',
|
||||
defaultMessage: 'Purchase course credit',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
|
||||
34
src/course-home/progress-tab/related-links/RelatedLinks.jsx
Normal file
34
src/course-home/progress-tab/related-links/RelatedLinks.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
function RelatedLinks({ intl }) {
|
||||
const {
|
||||
courseId,
|
||||
} = useSelector(state => state.courseHome);
|
||||
|
||||
return (
|
||||
<section className="mb-4 x-small">
|
||||
<h3 className="h4">{intl.formatMessage(messages.relatedLinks)}</h3>
|
||||
<ul className="pl-4">
|
||||
<li>
|
||||
<Link to={`course/${courseId}/dates`}>{intl.formatMessage(messages.datesCardLink)}</Link>
|
||||
<p>{intl.formatMessage(messages.datesCardDescription)}</p>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={`course/${courseId}/home`}>{intl.formatMessage(messages.outlineCardLink)}</Link>
|
||||
<p>{intl.formatMessage(messages.outlineCardDescription)}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
RelatedLinks.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(RelatedLinks);
|
||||
26
src/course-home/progress-tab/related-links/messages.js
Normal file
26
src/course-home/progress-tab/related-links/messages.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
datesCardDescription: {
|
||||
id: 'progress.relatedLinks.datesCard.description',
|
||||
defaultMessage: 'A schedule view of your course due dates and upcoming assignments.',
|
||||
},
|
||||
datesCardLink: {
|
||||
id: 'progress.relatedLinks.datesCard.link',
|
||||
defaultMessage: 'Dates',
|
||||
},
|
||||
outlineCardDescription: {
|
||||
id: 'progress.relatedLinks.outlineCard.description',
|
||||
defaultMessage: 'A birds-eye view of your course content.',
|
||||
},
|
||||
outlineCardLink: {
|
||||
id: 'progress.relatedLinks.outlineCard.link',
|
||||
defaultMessage: 'Course Outline',
|
||||
},
|
||||
relatedLinks: {
|
||||
id: 'progress.relatedLinks',
|
||||
defaultMessage: 'Related links',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
@@ -19,14 +19,6 @@ import { TabPage } from '../tab-page';
|
||||
import Course from './course';
|
||||
import { handleNextSectionCelebration } from './course/celebration';
|
||||
|
||||
const checkExamRedirect = memoize((sequenceStatus, sequence) => {
|
||||
if (sequenceStatus === 'loaded') {
|
||||
if (sequence.isTimeLimited && sequence.lmsWebUrl !== undefined) {
|
||||
global.location.assign(sequence.lmsWebUrl);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const checkResumeRedirect = memoize((courseStatus, courseId, sequenceId, firstSequenceId) => {
|
||||
if (courseStatus === 'loaded' && !sequenceId) {
|
||||
// Note that getResumeBlock is just an API call, not a redux thunk.
|
||||
@@ -41,8 +33,42 @@ const checkResumeRedirect = memoize((courseStatus, courseId, sequenceId, firstSe
|
||||
}
|
||||
});
|
||||
|
||||
const checkContentRedirect = memoize((courseId, sequenceStatus, sequenceId, sequence, unitId) => {
|
||||
if (sequenceStatus === 'loaded' && sequenceId && !unitId) {
|
||||
const checkSectionUnitToUnitRedirect = memoize((courseStatus, courseId, sequenceStatus, section, unitId) => {
|
||||
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && unitId) {
|
||||
history.replace(`/course/${courseId}/${unitId}`);
|
||||
}
|
||||
});
|
||||
|
||||
const checkSectionToSequenceRedirect = memoize((courseStatus, courseId, sequenceStatus, section, unitId) => {
|
||||
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && !unitId) {
|
||||
// If the section is non-empty, redirect to its first sequence.
|
||||
if (section.sequenceIds && section.sequenceIds[0]) {
|
||||
history.replace(`/course/${courseId}/${section.sequenceIds[0]}`);
|
||||
// Otherwise, just go to the course root, letting the resume redirect take care of things.
|
||||
} else {
|
||||
history.replace(`/course/${courseId}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const checkUnitToSequenceUnitRedirect = memoize((courseStatus, courseId, sequenceStatus, unit) => {
|
||||
if (courseStatus === 'loaded' && sequenceStatus === 'failed' && unit) {
|
||||
// If the sequence failed to load as a sequence, but it *did* load as a unit, then
|
||||
// insert the unit's parent sequenceId into the URL.
|
||||
history.replace(`/course/${courseId}/${unit.sequenceId}/${unit.id}`);
|
||||
}
|
||||
});
|
||||
|
||||
const checkSpecialExamRedirect = memoize((sequenceStatus, sequence) => {
|
||||
if (sequenceStatus === 'loaded') {
|
||||
if (sequence.isTimeLimited && sequence.legacyWebUrl !== undefined) {
|
||||
global.location.assign(sequence.legacyWebUrl);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const checkSequenceToSequenceUnitRedirect = memoize((courseId, sequenceStatus, sequence, unitId) => {
|
||||
if (sequenceStatus === 'loaded' && sequence.id && !unitId) {
|
||||
if (sequence.unitIds !== undefined && sequence.unitIds.length > 0) {
|
||||
const nextUnitId = sequence.unitIds[sequence.activeUnitIndex];
|
||||
// This is a replace because we don't want this change saved in the browser's history.
|
||||
@@ -97,6 +123,8 @@ class CoursewareContainer extends Component {
|
||||
sequenceStatus,
|
||||
sequence,
|
||||
firstSequenceId,
|
||||
unitViaSequenceId,
|
||||
sectionViaSequenceId,
|
||||
match: {
|
||||
params: {
|
||||
courseId: routeCourseId,
|
||||
@@ -110,15 +138,52 @@ class CoursewareContainer extends Component {
|
||||
this.checkFetchCourse(routeCourseId);
|
||||
this.checkFetchSequence(routeSequenceId);
|
||||
|
||||
// Redirect to the legacy experience for exams.
|
||||
checkExamRedirect(sequenceStatus, sequence);
|
||||
// All courseware URLs should normalize to the format /course/:courseId/:sequenceId/:unitId
|
||||
// via the series of redirection rules below.
|
||||
// See docs/decisions/0008-liberal-courseware-path-handling.md for more context.
|
||||
// (It would be ideal to move this logic into the thunks layer and perform
|
||||
// all URL-changing checks at once. This should be done once the MFE is moved
|
||||
// to the new Outlines API. See TNL-8182.)
|
||||
|
||||
// Determine if we need to redirect because our URL is incomplete.
|
||||
checkContentRedirect(courseId, sequenceStatus, sequenceId, sequence, routeUnitId);
|
||||
|
||||
// Determine if we can resume where we left off.
|
||||
// Check resume redirect:
|
||||
// /course/:courseId -> /course/:courseId/:sequenceId/:unitId
|
||||
// based on sequence/unit where user was last active.
|
||||
checkResumeRedirect(courseStatus, courseId, sequenceId, firstSequenceId);
|
||||
|
||||
// Check section-unit to unit redirect:
|
||||
// /course/:courseId/:sectionId/:unitId -> /course/:courseId/:unitId
|
||||
// by simply ignoring the :sectionId.
|
||||
// (It may be desirable at some point to be smarter here; for example, we could replace
|
||||
// :sectionId with the parent sequence of :unitId and/or check whether the :unitId
|
||||
// is actually within :sectionId. However, the way our Redux store is currently factored,
|
||||
// the unit's metadata is not available to us if the section isn't loadable.)
|
||||
// Before performing this redirect, we *do* still check that a section is loadable;
|
||||
// otherwise, we could get stuck in a redirect loop, since a sequence that failed to load
|
||||
// would endlessly redirect to itself through `checkSectionUnitToUnitRedirect`
|
||||
// and `checkUnitToSequenceUnitRedirect`.
|
||||
checkSectionUnitToUnitRedirect(courseStatus, courseId, sequenceStatus, sectionViaSequenceId, routeUnitId);
|
||||
|
||||
// Check section to sequence redirect:
|
||||
// /course/:courseId/:sectionId -> /course/:courseId/:sequenceId
|
||||
// by redirecting to the first sequence within the section.
|
||||
checkSectionToSequenceRedirect(courseStatus, courseId, sequenceStatus, sectionViaSequenceId, routeUnitId);
|
||||
|
||||
// Check unit to sequence-unit redirect:
|
||||
// /course/:courseId/:unitId -> /course/:courseId/:sequenceId/:unitId
|
||||
// by filling in the ID of the parent sequence of :unitId.
|
||||
checkUnitToSequenceUnitRedirect(courseStatus, courseId, sequenceStatus, unitViaSequenceId);
|
||||
|
||||
// Check special exam redirect:
|
||||
// /course/:courseId/:sequenceId(/:unitId) -> :legacyWebUrl
|
||||
// because special exams are currently still served in the legacy LMS frontend.
|
||||
checkSpecialExamRedirect(sequenceStatus, sequence);
|
||||
|
||||
// Check to sequence to sequence-unit redirect:
|
||||
// /course/:courseId/:sequenceId -> /course/:courseId/:sequenceId/:unitId
|
||||
// by filling in the ID the most-recently-active unit in the sequence, OR
|
||||
// the ID of the first unit the sequence if none is active.
|
||||
checkSequenceToSequenceUnitRedirect(courseId, sequenceStatus, sequence, routeUnitId);
|
||||
|
||||
// Check if we should save our sequence position. Only do this when the route unit ID changes.
|
||||
this.checkSaveSequencePosition(routeUnitId);
|
||||
}
|
||||
@@ -249,11 +314,22 @@ class CoursewareContainer extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
const unitShape = PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
sequenceId: PropTypes.string.isRequired,
|
||||
});
|
||||
|
||||
const sequenceShape = PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
sectionId: PropTypes.string.isRequired,
|
||||
isTimeLimited: PropTypes.bool,
|
||||
lmsWebUrl: PropTypes.string,
|
||||
legacyWebUrl: PropTypes.string,
|
||||
});
|
||||
|
||||
const sectionShape = PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
sequenceIds: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
});
|
||||
|
||||
const courseShape = PropTypes.shape({
|
||||
@@ -278,6 +354,8 @@ CoursewareContainer.propTypes = {
|
||||
sequenceStatus: PropTypes.oneOf(['loaded', 'loading', 'failed']).isRequired,
|
||||
nextSequence: sequenceShape,
|
||||
previousSequence: sequenceShape,
|
||||
unitViaSequenceId: unitShape,
|
||||
sectionViaSequenceId: sectionShape,
|
||||
course: courseShape,
|
||||
sequence: sequenceShape,
|
||||
saveSequencePosition: PropTypes.func.isRequired,
|
||||
@@ -292,6 +370,8 @@ CoursewareContainer.defaultProps = {
|
||||
firstSequenceId: null,
|
||||
nextSequence: null,
|
||||
previousSequence: null,
|
||||
unitViaSequenceId: null,
|
||||
sectionViaSequenceId: null,
|
||||
course: null,
|
||||
sequence: null,
|
||||
};
|
||||
@@ -367,6 +447,18 @@ const firstSequenceIdSelector = createSelector(
|
||||
},
|
||||
);
|
||||
|
||||
const sectionViaSequenceIdSelector = createSelector(
|
||||
(state) => state.models.sections || {},
|
||||
(state) => state.courseware.sequenceId,
|
||||
(sectionsById, sequenceId) => (sectionsById[sequenceId] ? sectionsById[sequenceId] : null),
|
||||
);
|
||||
|
||||
const unitViaSequenceIdSelector = createSelector(
|
||||
(state) => state.models.units || {},
|
||||
(state) => state.courseware.sequenceId,
|
||||
(unitsById, sequenceId) => (unitsById[sequenceId] ? unitsById[sequenceId] : null),
|
||||
);
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const {
|
||||
courseId, sequenceId, courseStatus, sequenceStatus,
|
||||
@@ -382,6 +474,8 @@ const mapStateToProps = (state) => {
|
||||
previousSequence: previousSequenceSelector(state),
|
||||
nextSequence: nextSequenceSelector(state),
|
||||
firstSequenceId: firstSequenceIdSelector(state),
|
||||
sectionViaSequenceId: sectionViaSequenceIdSelector(state),
|
||||
unitViaSequenceId: unitViaSequenceIdSelector(state),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ import tabMessages from '../tab-page/messages';
|
||||
import { initializeMockApp } from '../setupTest';
|
||||
|
||||
import CoursewareContainer from './CoursewareContainer';
|
||||
import buildSimpleCourseBlocks from './data/__factories__/courseBlocks.factory';
|
||||
import { buildSimpleCourseBlocks, buildBinaryCourseBlocks } from '../shared/data/__factories__/courseBlocks.factory';
|
||||
import initializeStore from '../store';
|
||||
import { appendBrowserTimezoneToUrl } from '../utils';
|
||||
|
||||
@@ -43,6 +43,37 @@ describe('CoursewareContainer', () => {
|
||||
let component;
|
||||
let axiosMock;
|
||||
|
||||
// This is a standard set of data that can be used in CoursewareContainer tests.
|
||||
// By default, `setUpMockRequests()` will configure the mock LMS API to return use this data.
|
||||
// Certain test cases override these in order to test with special blocks/metadata.
|
||||
const defaultCourseMetadata = Factory.build('courseMetadata');
|
||||
const defaultCourseId = defaultCourseMetadata.id;
|
||||
const defaultUnitBlocks = [
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId: defaultCourseId },
|
||||
),
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId: defaultCourseId },
|
||||
),
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId: defaultCourseId },
|
||||
),
|
||||
];
|
||||
const {
|
||||
courseBlocks: defaultCourseBlocks,
|
||||
sequenceBlocks: [defaultSequenceBlock],
|
||||
} = buildSimpleCourseBlocks(
|
||||
defaultCourseId,
|
||||
defaultCourseMetadata.name,
|
||||
{ unitBlocks: defaultUnitBlocks },
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
||||
|
||||
@@ -66,6 +97,47 @@ describe('CoursewareContainer', () => {
|
||||
);
|
||||
});
|
||||
|
||||
function setUpMockRequests(options = {}) {
|
||||
// If we weren't given course blocks or metadata, use the defaults.
|
||||
const courseBlocks = options.courseBlocks || defaultCourseBlocks;
|
||||
const courseMetadata = options.courseMetadata || defaultCourseMetadata;
|
||||
const courseId = courseMetadata.id;
|
||||
// If we weren't given a list of sequence metadatas for URL mocking,
|
||||
// then construct it ourselves by looking at courseBlocks.
|
||||
const sequenceMetadatas = options.sequenceMetadatas || (
|
||||
Object.values(courseBlocks.blocks)
|
||||
.filter(block => block.type === 'sequential')
|
||||
.map(sequenceBlock => Factory.build(
|
||||
'sequenceMetadata',
|
||||
{},
|
||||
{
|
||||
courseId,
|
||||
sequenceBlock,
|
||||
unitBlocks: sequenceBlock.children.map(unitId => courseBlocks.blocks[unitId]),
|
||||
},
|
||||
))
|
||||
);
|
||||
|
||||
const courseBlocksUrlRegExp = new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`);
|
||||
axiosMock.onGet(courseBlocksUrlRegExp).reply(200, courseBlocks);
|
||||
|
||||
const courseMetadataUrl = appendBrowserTimezoneToUrl(`${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`);
|
||||
axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
|
||||
|
||||
sequenceMetadatas.forEach(sequenceMetadata => {
|
||||
const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceMetadata.item_id}`;
|
||||
axiosMock.onGet(sequenceMetadataUrl).reply(200, sequenceMetadata);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadContainer() {
|
||||
const { container } = render(component);
|
||||
// Wait for the page spinner to be removed, such that we can wait for our main
|
||||
// content to load before making any assertions.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
return container;
|
||||
}
|
||||
|
||||
it('should initialize to show a spinner', () => {
|
||||
history.push('/course/abc123');
|
||||
render(component);
|
||||
@@ -78,13 +150,8 @@ describe('CoursewareContainer', () => {
|
||||
});
|
||||
|
||||
describe('when receiving successful course data', () => {
|
||||
let courseId;
|
||||
let courseMetadata;
|
||||
let courseBlocks;
|
||||
let sequenceMetadata;
|
||||
|
||||
let sequenceBlock;
|
||||
let unitBlocks;
|
||||
const courseMetadata = defaultCourseMetadata;
|
||||
const courseId = defaultCourseId;
|
||||
|
||||
function assertLoadedHeader(container) {
|
||||
const courseHeader = container.querySelector('.course-header');
|
||||
@@ -95,64 +162,27 @@ describe('CoursewareContainer', () => {
|
||||
expect(courseHeader.querySelector('.course-title')).toHaveTextContent(courseMetadata.name);
|
||||
}
|
||||
|
||||
function assertSequenceNavigation(container) {
|
||||
function assertSequenceNavigation(container, expectedUnitCount = 3) {
|
||||
// Ensure we had appropriate sequence navigation buttons. We should only have one unit.
|
||||
const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
|
||||
expect(sequenceNavButtons).toHaveLength(5);
|
||||
expect(sequenceNavButtons).toHaveLength(expectedUnitCount + 2);
|
||||
|
||||
expect(sequenceNavButtons[0]).toHaveTextContent('Previous');
|
||||
// Prove this button is rendering an SVG tasks icon, meaning it's a unit/vertical.
|
||||
expect(sequenceNavButtons[1].querySelector('svg')).toHaveClass('fa-tasks');
|
||||
expect(sequenceNavButtons[4]).toHaveTextContent('Next');
|
||||
}
|
||||
|
||||
function setupMockRequests() {
|
||||
axiosMock.onGet(appendBrowserTimezoneToUrl(`${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`)).reply(200, courseMetadata);
|
||||
axiosMock.onGet(new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`)).reply(200, courseBlocks);
|
||||
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceBlock.id}`).reply(200, sequenceMetadata);
|
||||
expect(sequenceNavButtons[sequenceNavButtons.length - 1]).toHaveTextContent('Next');
|
||||
}
|
||||
|
||||
beforeEach(async () => {
|
||||
// On page load, SequenceContext attempts to scroll to the top of the page.
|
||||
global.scrollTo = jest.fn();
|
||||
|
||||
courseMetadata = Factory.build('courseMetadata');
|
||||
courseId = courseMetadata.id;
|
||||
|
||||
const customUnitBlocks = [
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
),
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
),
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
),
|
||||
];
|
||||
|
||||
const result = buildSimpleCourseBlocks(courseId, courseMetadata.name, { unitBlocks: customUnitBlocks });
|
||||
courseBlocks = result.courseBlocks;
|
||||
unitBlocks = result.unitBlocks;
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
sequenceBlock = result.sequenceBlock[0];
|
||||
|
||||
sequenceMetadata = Factory.build(
|
||||
'sequenceMetadata',
|
||||
{},
|
||||
{ courseId, unitBlocks, sequenceBlock },
|
||||
);
|
||||
|
||||
setupMockRequests();
|
||||
setUpMockRequests();
|
||||
});
|
||||
|
||||
describe('when the URL only contains a course ID', () => {
|
||||
const sequenceBlock = defaultSequenceBlock;
|
||||
const unitBlocks = defaultUnitBlocks;
|
||||
|
||||
it('should use the resume block repsonse to pick a unit if it contains one', async () => {
|
||||
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {
|
||||
sectionId: sequenceBlock.id,
|
||||
@@ -160,11 +190,7 @@ describe('CoursewareContainer', () => {
|
||||
});
|
||||
|
||||
history.push(`/course/${courseId}`);
|
||||
const { container } = render(component);
|
||||
|
||||
// This is an important line that ensures the spinner has been removed - and thus our main
|
||||
// content has been loaded - prior to proceeding with our expectations.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
const container = await loadContainer();
|
||||
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container);
|
||||
@@ -175,25 +201,19 @@ describe('CoursewareContainer', () => {
|
||||
});
|
||||
|
||||
it('should use the first sequence ID and activeUnitIndex if the resume block response is empty', async () => {
|
||||
// OVERRIDE SEQUENCE METADATA:
|
||||
// set the position to the third unit so we can prove activeUnitIndex is working
|
||||
sequenceMetadata = Factory.build(
|
||||
const sequenceMetadata = Factory.build(
|
||||
'sequenceMetadata',
|
||||
{ position: 3 }, // position index is 1-based and is converted to 0-based for activeUnitIndex
|
||||
{ courseId, unitBlocks, sequenceBlock },
|
||||
);
|
||||
setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
|
||||
|
||||
// Re-call the mock setup now that sequenceMetadata is different.
|
||||
setupMockRequests();
|
||||
// Note how there is no sectionId/unitId returned in this mock response!
|
||||
axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});
|
||||
|
||||
history.push(`/course/${courseId}`);
|
||||
const { container } = render(component);
|
||||
|
||||
// This is an important line that ensures the spinner has been removed - and thus our main
|
||||
// content has been loaded - prior to proceeding with our expectations.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
const container = await loadContainer();
|
||||
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container);
|
||||
@@ -204,14 +224,110 @@ describe('CoursewareContainer', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the URL contains a section ID instead of a sequence ID', () => {
|
||||
const {
|
||||
courseBlocks, unitTree, sequenceTree, sectionTree,
|
||||
} = buildBinaryCourseBlocks(
|
||||
courseId, courseMetadata.name,
|
||||
);
|
||||
|
||||
function setUrl(urlSequenceId, urlUnitId = null) {
|
||||
history.push(`/course/${courseId}/${urlSequenceId}/${urlUnitId || ''}`);
|
||||
}
|
||||
|
||||
function assertLocation(container, sequenceId, unitId) {
|
||||
const expectedUrl = `http://localhost/course/${courseId}/${sequenceId}/${unitId}`;
|
||||
expect(global.location.href).toEqual(expectedUrl);
|
||||
expect(container.querySelector('.fake-unit')).toHaveTextContent(unitId);
|
||||
}
|
||||
|
||||
beforeEach(async () => {
|
||||
setUpMockRequests({ courseBlocks });
|
||||
});
|
||||
|
||||
describe('when the URL contains a unit ID', () => {
|
||||
it('should ignore the section ID and redirect based on the unit ID', async () => {
|
||||
const urlUnit = unitTree[1][1][1];
|
||||
setUrl(sectionTree[1].id, urlUnit.id);
|
||||
const container = await loadContainer();
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container, 2);
|
||||
assertLocation(container, sequenceTree[1][1].id, urlUnit.id);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the URL does not contain a unit ID', () => {
|
||||
it('should choose a unit within the section\'s first sequence', async () => {
|
||||
setUrl(sectionTree[1].id);
|
||||
const container = await loadContainer();
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container, 2);
|
||||
assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the section is empty', () => {
|
||||
// Make a (shallow-)copy of the course blocks.
|
||||
// Remove all descendents of the second section.
|
||||
const blocksWithEmptySection = { ...courseBlocks.blocks };
|
||||
blocksWithEmptySection[sectionTree[1].id] = {
|
||||
...sectionTree[1],
|
||||
children: [],
|
||||
};
|
||||
sequenceTree[1].forEach(sequence => { delete blocksWithEmptySection[sequence.id]; });
|
||||
unitTree[1].flat().forEach(unit => { delete blocksWithEmptySection[unit.id]; });
|
||||
const courseBlocksWithEmptySection = {
|
||||
...courseBlocks,
|
||||
blocks: blocksWithEmptySection,
|
||||
};
|
||||
|
||||
beforeEach(async () => {
|
||||
setUpMockRequests({ courseBlocks: courseBlocksWithEmptySection });
|
||||
});
|
||||
|
||||
it('should ignore the section ID and instead redirect to the course root', async () => {
|
||||
setUrl(sectionTree[1].id);
|
||||
await loadContainer();
|
||||
expect(global.location.href).toEqual(`http://localhost/course/${courseId}`);
|
||||
});
|
||||
|
||||
it('should ignore the section and unit IDs and instead to the course root', async () => {
|
||||
// Specific unit ID used here shouldn't matter; is ignored due to empty section.
|
||||
setUrl(sectionTree[1].id, unitTree[0][0][0]);
|
||||
await loadContainer();
|
||||
expect(global.location.href).toEqual(`http://localhost/course/${courseId}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the URL only contains a unit ID', () => {
|
||||
const { courseBlocks, unitTree, sequenceTree } = buildBinaryCourseBlocks(courseId, courseMetadata.name);
|
||||
|
||||
beforeEach(async () => {
|
||||
setUpMockRequests({ courseBlocks });
|
||||
});
|
||||
|
||||
it('should insert the sequence ID into the URL', async () => {
|
||||
const unit = unitTree[1][0][1];
|
||||
history.push(`/course/${courseId}/${unit.id}`);
|
||||
const container = await loadContainer();
|
||||
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container, 2);
|
||||
const expectedSequenceId = sequenceTree[1][0].id;
|
||||
const expectedUrl = `http://localhost/course/${courseId}/${expectedSequenceId}/${unit.id}`;
|
||||
expect(global.location.href).toEqual(expectedUrl);
|
||||
expect(container.querySelector('.fake-unit')).toHaveTextContent(unit.id);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the URL contains a course ID and sequence ID', () => {
|
||||
const sequenceBlock = defaultSequenceBlock;
|
||||
const unitBlocks = defaultUnitBlocks;
|
||||
|
||||
it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
|
||||
history.push(`/course/${courseId}/${sequenceBlock.id}`);
|
||||
const { container } = render(component);
|
||||
|
||||
// This is an important line that ensures the spinner has been removed - and thus our main
|
||||
// content has been loaded - prior to proceeding with our expectations.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
const container = await loadContainer();
|
||||
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container);
|
||||
@@ -222,22 +338,15 @@ describe('CoursewareContainer', () => {
|
||||
});
|
||||
|
||||
it('should use activeUnitIndex to pick a unit from the sequence', async () => {
|
||||
// OVERRIDE SEQUENCE METADATA:
|
||||
sequenceMetadata = Factory.build(
|
||||
const sequenceMetadata = Factory.build(
|
||||
'sequenceMetadata',
|
||||
{ position: 3 }, // position index is 1-based and is converted to 0-based for activeUnitIndex
|
||||
{ courseId, unitBlocks, sequenceBlock },
|
||||
);
|
||||
|
||||
// Re-call the mock setup now that sequenceMetadata is different.
|
||||
setupMockRequests();
|
||||
setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
|
||||
|
||||
history.push(`/course/${courseId}/${sequenceBlock.id}`);
|
||||
const { container } = render(component);
|
||||
|
||||
// This is an important line that ensures the spinner has been removed - and thus our main
|
||||
// content has been loaded - prior to proceeding with our expectations.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
const container = await loadContainer();
|
||||
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container);
|
||||
@@ -249,13 +358,12 @@ describe('CoursewareContainer', () => {
|
||||
});
|
||||
|
||||
describe('when the URL contains a course, sequence, and unit ID', () => {
|
||||
const sequenceBlock = defaultSequenceBlock;
|
||||
const unitBlocks = defaultUnitBlocks;
|
||||
|
||||
it('should load the specified unit', async () => {
|
||||
history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
|
||||
const { container } = render(component);
|
||||
|
||||
// This is an important line that ensures the spinner has been removed - and thus our main
|
||||
// content has been loaded - prior to proceeding with our expectations.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
const container = await loadContainer();
|
||||
|
||||
assertLoadedHeader(container);
|
||||
assertSequenceNavigation(container);
|
||||
@@ -266,16 +374,12 @@ describe('CoursewareContainer', () => {
|
||||
});
|
||||
|
||||
it('should navigate between units and check block completion', async () => {
|
||||
history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
|
||||
const { container } = render(component);
|
||||
|
||||
axiosMock.onPost(`${courseId}/xblock/${sequenceBlock.id}/handler/xmodule_handler/get_completion`).reply(200, {
|
||||
complete: true,
|
||||
});
|
||||
|
||||
// This is an important line that ensures the spinner has been removed - and thus our main
|
||||
// content has been loaded - prior to proceeding with our expectations.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
|
||||
const container = await loadContainer();
|
||||
|
||||
const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
|
||||
const sequenceNextButton = sequenceNavButtons[4];
|
||||
@@ -288,6 +392,8 @@ describe('CoursewareContainer', () => {
|
||||
|
||||
describe('when the current sequence is an exam', () => {
|
||||
const { location } = window;
|
||||
const sequenceBlock = defaultSequenceBlock;
|
||||
const unitBlocks = defaultUnitBlocks;
|
||||
|
||||
beforeEach(() => {
|
||||
delete window.location;
|
||||
@@ -300,33 +406,25 @@ describe('CoursewareContainer', () => {
|
||||
window.location = location;
|
||||
});
|
||||
|
||||
it('should redirect to the sequence lmsWebUrl', async () => {
|
||||
// OVERRIDE SEQUENCE METADATA:
|
||||
sequenceMetadata = Factory.build(
|
||||
it('should redirect to the sequence legacyWebUrl', async () => {
|
||||
const sequenceMetadata = Factory.build(
|
||||
'sequenceMetadata',
|
||||
{ is_time_limited: true }, // position index is 1-based and is converted to 0-based for activeUnitIndex
|
||||
{ courseId, unitBlocks, sequenceBlock },
|
||||
);
|
||||
setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
|
||||
|
||||
// Re-call the mock setup now that sequenceMetadata is different.
|
||||
setupMockRequests();
|
||||
history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
|
||||
render(component);
|
||||
await loadContainer();
|
||||
|
||||
// This is an important line that ensures the spinner has been removed - and thus our main
|
||||
// content has been loaded - prior to proceeding with our expectations.
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
|
||||
expect(global.location.assign).toHaveBeenCalledWith(sequenceBlock.lms_web_url);
|
||||
expect(global.location.assign).toHaveBeenCalledWith(sequenceBlock.legacy_web_url);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when receiving a can_load_courseware error_code', () => {
|
||||
let courseMetadata;
|
||||
|
||||
function setupWithDeniedStatus(errorCode) {
|
||||
courseMetadata = Factory.build('courseMetadata', {
|
||||
function setUpWithDeniedStatus(errorCode) {
|
||||
const courseMetadata = Factory.build('courseMetadata', {
|
||||
can_load_courseware: {
|
||||
has_access: false,
|
||||
error_code: errorCode,
|
||||
@@ -334,66 +432,43 @@ describe('CoursewareContainer', () => {
|
||||
},
|
||||
});
|
||||
const courseId = courseMetadata.id;
|
||||
const { courseBlocks, unitBlocks, sequenceBlock } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
|
||||
const sequenceMetadata = Factory.build(
|
||||
'sequenceMetadata',
|
||||
{},
|
||||
{ courseId, unitBlocks, sequenceBlock },
|
||||
);
|
||||
|
||||
let forbiddenCourseUrl = `${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`;
|
||||
forbiddenCourseUrl = appendBrowserTimezoneToUrl(forbiddenCourseUrl);
|
||||
const courseBlocksUrlRegExp = new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`);
|
||||
const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceBlock.id}`;
|
||||
|
||||
axiosMock.onGet(forbiddenCourseUrl).reply(200, courseMetadata);
|
||||
axiosMock.onGet(courseBlocksUrlRegExp).reply(200, courseBlocks);
|
||||
axiosMock.onGet(sequenceMetadataUrl).reply(200, sequenceMetadata);
|
||||
|
||||
const { courseBlocks } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
|
||||
setUpMockRequests({ courseBlocks, courseMetadata });
|
||||
history.push(`/course/${courseId}`);
|
||||
return courseMetadata;
|
||||
}
|
||||
|
||||
it('should go to course home for an enrollment_required error code', async () => {
|
||||
setupWithDeniedStatus('enrollment_required');
|
||||
|
||||
render(component);
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
const courseMetadata = setUpWithDeniedStatus('enrollment_required');
|
||||
await loadContainer();
|
||||
|
||||
expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);
|
||||
});
|
||||
|
||||
it('should go to course home for an authentication_required error code', async () => {
|
||||
setupWithDeniedStatus('authentication_required');
|
||||
|
||||
render(component);
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
const courseMetadata = setUpWithDeniedStatus('authentication_required');
|
||||
await loadContainer();
|
||||
|
||||
expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);
|
||||
});
|
||||
|
||||
it('should go to dashboard for an unfulfilled_milestones error code', async () => {
|
||||
setupWithDeniedStatus('unfulfilled_milestones');
|
||||
|
||||
render(component);
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
setUpWithDeniedStatus('unfulfilled_milestones');
|
||||
await loadContainer();
|
||||
|
||||
expect(global.location.href).toEqual('http://localhost/redirect/dashboard');
|
||||
});
|
||||
|
||||
it('should go to the dashboard with an attached access_response_error for an audit_expired error code', async () => {
|
||||
setupWithDeniedStatus('audit_expired');
|
||||
|
||||
render(component);
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
setUpWithDeniedStatus('audit_expired');
|
||||
await loadContainer();
|
||||
|
||||
expect(global.location.href).toEqual('http://localhost/redirect/dashboard?access_response_error=uhoh%20oh%20no');
|
||||
});
|
||||
|
||||
it('should go to the dashboard with a notlive start date for a course_not_started error code', async () => {
|
||||
setupWithDeniedStatus('course_not_started');
|
||||
|
||||
render(component);
|
||||
await waitForElementToBeRemoved(screen.getByRole('status'));
|
||||
setUpWithDeniedStatus('course_not_started');
|
||||
await loadContainer();
|
||||
|
||||
const startDate = '2/5/2013'; // This date is based on our courseMetadata factory's sample data.
|
||||
expect(global.location.href).toEqual(`http://localhost/redirect/dashboard?notlive=${startDate}`);
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function CourseRedirect({ match }) {
|
||||
unitId,
|
||||
} = match.params;
|
||||
const unit = useModel('units', unitId) || {};
|
||||
const coursewareUrl = unit.lmsWebUrl || `${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware/`;
|
||||
const coursewareUrl = unit.legacyWebUrl || `${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware/`;
|
||||
global.location.assign(coursewareUrl);
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -48,8 +48,8 @@ function Course({
|
||||
} = course;
|
||||
|
||||
// Below the tabs, above the breadcrumbs alerts (appearing in the order listed here)
|
||||
const offerAlert = useOfferAlert(offer, userTimezone, 'course');
|
||||
const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, userTimezone, 'course');
|
||||
const offerAlert = useOfferAlert(courseId, offer, org, userTimezone, 'course', 'in_course');
|
||||
const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, 'course', 'in_course');
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const celebrateFirstSection = celebrations && celebrations.firstSection;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Factory } from 'rosie';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import {
|
||||
loadUnit, render, screen, waitFor, getByRole, initializeTestStore, fireEvent,
|
||||
} from '../../setupTest';
|
||||
@@ -108,6 +109,68 @@ describe('Course', () => {
|
||||
await screen.findByText('Audit Access Expires');
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of access expiration upgrade link', async () => {
|
||||
sendTrackEvent.mockClear();
|
||||
|
||||
const courseMetadata = Factory.build('courseMetadata', {
|
||||
access_expiration: {
|
||||
expiration_date: '2080-01-01T12:00:00Z',
|
||||
masquerading_expired_course: false,
|
||||
upgrade_deadline: '2070-01-01T12:00:00Z',
|
||||
upgrade_url: 'https://example.com/upgrade',
|
||||
},
|
||||
user_timezone: 'UTC',
|
||||
});
|
||||
const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
|
||||
render(<Course {...mockData} courseId={courseMetadata.id} />, { store: testStore });
|
||||
await screen.findByText('Audit Access Expires');
|
||||
|
||||
const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
|
||||
fireEvent.click(upgradeLink);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseMetadata.id,
|
||||
linkCategory: 'FBE_banner',
|
||||
linkName: 'in_course_audit_access_expires',
|
||||
linkType: 'link',
|
||||
pageName: 'in_course',
|
||||
});
|
||||
});
|
||||
|
||||
it('sends analytics event onClick of offer alert link', async () => {
|
||||
sendTrackEvent.mockClear();
|
||||
|
||||
const courseMetadata = Factory.build('courseMetadata', {
|
||||
offer: {
|
||||
code: 'EDXWELCOME',
|
||||
expiration_date: '2070-01-01T12:00:00Z',
|
||||
original_price: '$100',
|
||||
discounted_price: '$85',
|
||||
percentage: 15,
|
||||
upgrade_url: 'https://example.com/upgrade',
|
||||
},
|
||||
user_timezone: 'UTC',
|
||||
});
|
||||
const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
|
||||
render(<Course {...mockData} courseId={courseMetadata.id} />, { store: testStore });
|
||||
await screen.findByText('EDXWELCOME');
|
||||
|
||||
const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
|
||||
fireEvent.click(upgradeLink);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
|
||||
org_key: 'edX',
|
||||
courserun_key: courseMetadata.id,
|
||||
linkCategory: 'welcome',
|
||||
linkName: 'in_course_welcome',
|
||||
linkType: 'link',
|
||||
pageName: 'in_course',
|
||||
});
|
||||
});
|
||||
|
||||
it('passes handlers to the sequence', async () => {
|
||||
const nextSequenceHandler = jest.fn();
|
||||
const previousSequenceHandler = jest.fn();
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
button::after {
|
||||
content: "⨉";
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
||||
@@ -45,6 +45,7 @@ function CourseCelebration({ intl }) {
|
||||
certificateData,
|
||||
end,
|
||||
linkedinAddToProfileUrl,
|
||||
marketingUrl,
|
||||
offer,
|
||||
org,
|
||||
relatedPrograms,
|
||||
@@ -287,7 +288,8 @@ function CourseCelebration({ intl }) {
|
||||
{intl.formatMessage(messages.congratulationsHeader)}
|
||||
</div>
|
||||
<div className="col-12 p-0 font-weight-normal lead text-center">
|
||||
{intl.formatMessage(messages.shareHeader)}
|
||||
{intl.formatMessage(messages.completedCourseHeader)}
|
||||
{marketingUrl && ` ${intl.formatMessage(messages.shareMessage)}`}
|
||||
<SocialIcons
|
||||
analyticsId="edx.ui.lms.course_exit.social_share.clicked"
|
||||
className="mt-2"
|
||||
|
||||
@@ -5,7 +5,7 @@ import { getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
|
||||
import { fetchCourse } from '../../data';
|
||||
import buildSimpleCourseBlocks from '../../data/__factories__/courseBlocks.factory';
|
||||
import { buildSimpleCourseBlocks } from '../../../shared/data/__factories__/courseBlocks.factory';
|
||||
import {
|
||||
initializeMockApp, logUnhandledRequests, render, screen,
|
||||
} from '../../../setupTest';
|
||||
|
||||
@@ -35,6 +35,10 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Sample certificate',
|
||||
description: 'Alt text used to describe an image of a certificate',
|
||||
},
|
||||
completedCourseHeader: {
|
||||
id: 'courseCelebration.completedCourseHeader',
|
||||
defaultMessage: 'You have completed your course.',
|
||||
},
|
||||
congratulationsHeader: {
|
||||
id: 'courseCelebration.congratulationsHeader',
|
||||
defaultMessage: 'Congratulations!',
|
||||
@@ -127,9 +131,9 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Search our catalog',
|
||||
description: 'First part of a sentence that continues afterward',
|
||||
},
|
||||
shareHeader: {
|
||||
id: 'courseCelebration.shareHeader',
|
||||
defaultMessage: 'You have completed your course. Share your success on social media or email.',
|
||||
shareMessage: {
|
||||
id: 'courseCelebration.shareMessage',
|
||||
defaultMessage: 'Share your success on social media or email.',
|
||||
},
|
||||
socialMessage: {
|
||||
id: 'courseExit.social.shareCompletionMessage',
|
||||
|
||||
@@ -40,29 +40,29 @@ describe('Sequence', () => {
|
||||
});
|
||||
|
||||
it('renders correctly for gated content', async () => {
|
||||
const sequenceBlock = [Factory.build(
|
||||
const sequenceBlocks = [Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: [unitBlocks.map(block => block.id)] },
|
||||
{ courseId: courseMetadata.id },
|
||||
)];
|
||||
const gatedContent = {
|
||||
gated: true,
|
||||
prereq_id: `${sequenceBlock[0].id}-prereq`,
|
||||
prereq_section_name: `${sequenceBlock[0].display_name}-prereq`,
|
||||
gated_section_name: sequenceBlock[0].display_name,
|
||||
prereq_id: `${sequenceBlocks[0].id}-prereq`,
|
||||
prereq_section_name: `${sequenceBlocks[0].display_name}-prereq`,
|
||||
gated_section_name: sequenceBlocks[0].display_name,
|
||||
};
|
||||
const sequenceMetadata = [Factory.build(
|
||||
'sequenceMetadata',
|
||||
{ gated_content: gatedContent },
|
||||
{ courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlock[0] },
|
||||
{ courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
|
||||
)];
|
||||
const testStore = await initializeTestStore(
|
||||
{
|
||||
courseMetadata, unitBlocks, sequenceBlock, sequenceMetadata,
|
||||
courseMetadata, unitBlocks, sequenceBlocks, sequenceMetadata,
|
||||
}, false,
|
||||
);
|
||||
const { container } = render(
|
||||
<Sequence {...mockData} {...{ sequenceId: sequenceBlock[0].id }} />,
|
||||
<Sequence {...mockData} {...{ sequenceId: sequenceBlocks[0].id }} />,
|
||||
{ store: testStore },
|
||||
);
|
||||
|
||||
@@ -83,7 +83,7 @@ describe('Sequence', () => {
|
||||
// application redirects away from the page. Note that this component is not responsible for
|
||||
// that redirect behavior, so there's no record of it here.
|
||||
// See CoursewareContainer.jsx "checkExamRedirect" function.
|
||||
const sequenceBlock = [Factory.build(
|
||||
const sequenceBlocks = [Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: [unitBlocks.map(block => block.id)] },
|
||||
{ courseId: courseMetadata.id },
|
||||
@@ -91,15 +91,15 @@ describe('Sequence', () => {
|
||||
const sequenceMetadata = [Factory.build(
|
||||
'sequenceMetadata',
|
||||
{ is_time_limited: true },
|
||||
{ courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlock[0] },
|
||||
{ courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
|
||||
)];
|
||||
const testStore = await initializeTestStore(
|
||||
{
|
||||
courseMetadata, unitBlocks, sequenceBlock, sequenceMetadata,
|
||||
courseMetadata, unitBlocks, sequenceBlocks, sequenceMetadata,
|
||||
}, false,
|
||||
);
|
||||
const { container } = render(
|
||||
<Sequence {...mockData} {...{ sequenceId: sequenceBlock[0].id }} />,
|
||||
<Sequence {...mockData} {...{ sequenceId: sequenceBlocks[0].id }} />,
|
||||
{ store: testStore },
|
||||
);
|
||||
|
||||
@@ -131,7 +131,7 @@ describe('Sequence', () => {
|
||||
|
||||
describe('sequence and unit navigation buttons', () => {
|
||||
let testStore;
|
||||
const sequenceBlock = [Factory.build(
|
||||
const sequenceBlocks = [Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: [unitBlocks.map(block => block.id)] },
|
||||
{ courseId: courseMetadata.id },
|
||||
@@ -142,7 +142,7 @@ describe('Sequence', () => {
|
||||
)];
|
||||
|
||||
beforeAll(async () => {
|
||||
testStore = await initializeTestStore({ courseMetadata, unitBlocks, sequenceBlock }, false);
|
||||
testStore = await initializeTestStore({ courseMetadata, unitBlocks, sequenceBlocks }, false);
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
@@ -152,7 +152,7 @@ describe('Sequence', () => {
|
||||
it('navigates to the previous sequence if the unit is the first in the sequence', async () => {
|
||||
const testData = {
|
||||
...mockData,
|
||||
sequenceId: sequenceBlock[1].id,
|
||||
sequenceId: sequenceBlocks[1].id,
|
||||
previousSequenceHandler: jest.fn(),
|
||||
};
|
||||
render(<Sequence {...testData} />, { store: testStore });
|
||||
@@ -187,7 +187,7 @@ describe('Sequence', () => {
|
||||
const testData = {
|
||||
...mockData,
|
||||
unitId: unitBlocks[unitBlocks.length - 1].id,
|
||||
sequenceId: sequenceBlock[0].id,
|
||||
sequenceId: sequenceBlocks[0].id,
|
||||
nextSequenceHandler: jest.fn(),
|
||||
};
|
||||
render(<Sequence {...testData} />, { store: testStore });
|
||||
@@ -222,7 +222,7 @@ describe('Sequence', () => {
|
||||
const testData = {
|
||||
...mockData,
|
||||
unitId: unitBlocks[unitNumber].id,
|
||||
sequenceId: sequenceBlock[0].id,
|
||||
sequenceId: sequenceBlocks[0].id,
|
||||
unitNavigationHandler: jest.fn(),
|
||||
previousSequenceHandler: jest.fn(),
|
||||
nextSequenceHandler: jest.fn(),
|
||||
@@ -246,7 +246,7 @@ describe('Sequence', () => {
|
||||
const testData = {
|
||||
...mockData,
|
||||
unitId: unitBlocks[0].id,
|
||||
sequenceId: sequenceBlock[0].id,
|
||||
sequenceId: sequenceBlocks[0].id,
|
||||
unitNavigationHandler: jest.fn(),
|
||||
previousSequenceHandler: jest.fn(),
|
||||
};
|
||||
@@ -265,7 +265,7 @@ describe('Sequence', () => {
|
||||
const testData = {
|
||||
...mockData,
|
||||
unitId: unitBlocks[unitBlocks.length - 1].id,
|
||||
sequenceId: sequenceBlock[sequenceBlock.length - 1].id,
|
||||
sequenceId: sequenceBlocks[sequenceBlocks.length - 1].id,
|
||||
unitNavigationHandler: jest.fn(),
|
||||
nextSequenceHandler: jest.fn(),
|
||||
};
|
||||
@@ -281,7 +281,7 @@ describe('Sequence', () => {
|
||||
});
|
||||
|
||||
it('handles the navigation buttons for empty sequence', async () => {
|
||||
const testSequenceBlock = [Factory.build(
|
||||
const testSequenceBlocks = [Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: [unitBlocks.map(block => block.id)] },
|
||||
{ courseId: courseMetadata.id },
|
||||
@@ -294,18 +294,18 @@ describe('Sequence', () => {
|
||||
{ type: 'sequential', children: [unitBlocks.map(block => block.id)] },
|
||||
{ courseId: courseMetadata.id },
|
||||
)];
|
||||
const testSequenceMetadata = testSequenceBlock.map(block => Factory.build(
|
||||
const testSequenceMetadata = testSequenceBlocks.map(block => Factory.build(
|
||||
'sequenceMetadata',
|
||||
{},
|
||||
{ courseId: courseMetadata.id, unitBlocks: block.children.length ? unitBlocks : [], sequenceBlock: block },
|
||||
));
|
||||
const innerTestStore = await initializeTestStore({
|
||||
courseMetadata, unitBlocks, sequenceBlock: testSequenceBlock, sequenceMetadata: testSequenceMetadata,
|
||||
courseMetadata, unitBlocks, sequenceBlocks: testSequenceBlocks, sequenceMetadata: testSequenceMetadata,
|
||||
}, false);
|
||||
const testData = {
|
||||
...mockData,
|
||||
unitId: unitBlocks[0].id,
|
||||
sequenceId: testSequenceBlock[1].id,
|
||||
sequenceId: testSequenceBlocks[1].id,
|
||||
unitNavigationHandler: jest.fn(),
|
||||
previousSequenceHandler: jest.fn(),
|
||||
nextSequenceHandler: jest.fn(),
|
||||
@@ -356,7 +356,7 @@ describe('Sequence', () => {
|
||||
const testData = {
|
||||
...mockData,
|
||||
unitId: unitBlocks[currentTabNumber - 1].id,
|
||||
sequenceId: sequenceBlock[0].id,
|
||||
sequenceId: sequenceBlocks[0].id,
|
||||
unitNavigationHandler: jest.fn(),
|
||||
};
|
||||
render(<Sequence {...testData} />, { store: testStore });
|
||||
|
||||
@@ -23,6 +23,20 @@ import { MMP2PLockPaywall } from '../../../experiments/mm-p2p';
|
||||
|
||||
const LockPaywall = React.lazy(() => import('./lock-paywall'));
|
||||
|
||||
/**
|
||||
* Feature policy for iframe, allowing access to certain courseware-related media.
|
||||
*
|
||||
* We must use the wildcard (*) origin for each feature, as courseware content
|
||||
* may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
|
||||
* block that iframes external course content.
|
||||
|
||||
* This policy was selected in conference with the edX Security Working Group.
|
||||
* Changes to it should be vetted by them (security@edx.org).
|
||||
*/
|
||||
const IFRAME_FEATURE_POLICY = (
|
||||
'microphone *; camera *; midi *; geolocation *; encrypted-media *'
|
||||
);
|
||||
|
||||
/**
|
||||
* We discovered an error in Firefox where - upon iframe load - React would cease to call any
|
||||
* useEffect hooks until the user interacts with the page again. This is particularly confusing
|
||||
@@ -155,7 +169,7 @@ function Unit({
|
||||
: (
|
||||
<iframe
|
||||
title={modalOptions.title}
|
||||
allow="microphone *; camera *; midi *; geolocation *; encrypted-media *"
|
||||
allow={IFRAME_FEATURE_POLICY}
|
||||
frameBorder="0"
|
||||
src={modalOptions.url}
|
||||
style={{
|
||||
@@ -178,6 +192,7 @@ function Unit({
|
||||
id="unit-iframe"
|
||||
title={unit.title}
|
||||
src={iframeUrl}
|
||||
allow={IFRAME_FEATURE_POLICY}
|
||||
allowFullScreen
|
||||
height={iframeHeight}
|
||||
scrolling="no"
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faLock } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faCheck } from '@fortawesome/free-solid-svg-icons';
|
||||
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Alert, Button, Icon,
|
||||
} from '@edx/paragon';
|
||||
import { Locked } from '@edx/paragon/icons';
|
||||
import messages from './messages';
|
||||
import VerifiedCert from '../../../../generic/assets/edX_certificate.png';
|
||||
import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
|
||||
import { useModel } from '../../../../generic/model-store';
|
||||
import './LockPaywall.scss';
|
||||
|
||||
function LockPaywall({
|
||||
intl,
|
||||
@@ -42,33 +46,128 @@ function LockPaywall({
|
||||
pageName: 'in_course',
|
||||
});
|
||||
};
|
||||
|
||||
const lockIcon = (
|
||||
<Icon
|
||||
className="float-left"
|
||||
src={Locked}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
|
||||
const verifiedCertLink = (
|
||||
<Alert.Link
|
||||
href="https://www.edx.org/verified-certificate"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{intl.formatMessage(messages['learn.lockPaywall.list.bullet1.linktext'])}
|
||||
</Alert.Link>
|
||||
);
|
||||
|
||||
const gradedAssignments = (
|
||||
<span className="font-weight-bold">
|
||||
{intl.formatMessage(messages['learn.lockPaywall.list.bullet2.boldtext'])}
|
||||
</span>
|
||||
);
|
||||
const fullAccess = (
|
||||
<span className="font-weight-bold">
|
||||
{intl.formatMessage(messages['learn.lockPaywall.list.bullet3.boldtext'])}
|
||||
</span>
|
||||
);
|
||||
const nonProfit = (
|
||||
<span className="font-weight-bold">
|
||||
{intl.formatMessage(messages['learn.lockPaywall.list.bullet4.boldtext'])}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="border border-gray rounded d-flex justify-content-between mt-2 p-3">
|
||||
<div>
|
||||
<h4 className="font-weight-bold mb-2">
|
||||
<FontAwesomeIcon icon={faLock} className="text-black mr-2 ml-1" style={{ fontSize: '2rem' }} />
|
||||
<span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>
|
||||
</h4>
|
||||
<p className="mb-0">
|
||||
<span>{intl.formatMessage(messages['learn.lockPaywall.content'])}</span>
|
||||
|
||||
<a className="lock_paywall_upgrade_link" href={upgradeUrl} onClick={logClick}>
|
||||
<Alert variant="light" aria-live="off">
|
||||
<div className="row">
|
||||
<div className="col-auto px-0">
|
||||
{lockIcon}
|
||||
</div>
|
||||
|
||||
<div className="col">
|
||||
<h4 aria-level="3">
|
||||
<span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>
|
||||
</h4>
|
||||
|
||||
<div className="mb-2 upgrade-intro">
|
||||
{intl.formatMessage(messages['learn.lockPaywall.content'])}
|
||||
</div>
|
||||
|
||||
<div className="d-flex flex-row flex-wrap">
|
||||
<div style={{ float: 'left' }} className="mr-3 mb-2">
|
||||
<img
|
||||
alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}
|
||||
src={certificateLocked}
|
||||
className="border-0 certificate-image-banner"
|
||||
style={{ height: '128px', width: '175px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mw-xs list-div">
|
||||
<div className="mb-2">
|
||||
{intl.formatMessage(messages['learn.lockPaywall.list.intro'])}
|
||||
</div>
|
||||
<ul className="fa-ul ml-4 pl-2">
|
||||
<li>
|
||||
<span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
|
||||
<FormattedMessage
|
||||
id="gatedContent.paragraph.bulletOne"
|
||||
defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
|
||||
values={{ verifiedCertLink }}
|
||||
className="bullet-text"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
|
||||
<FormattedMessage
|
||||
id="gatedContent.paragraph.bulletTwo"
|
||||
defaultMessage="Unlock access to all course activities, including {gradedAssignments}"
|
||||
values={{ gradedAssignments }}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
|
||||
<FormattedMessage
|
||||
id="gatedContent.paragraph.bulletThree"
|
||||
defaultMessage="{fullAccess} to course content and materials, even after the course ends"
|
||||
values={{ fullAccess }}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
|
||||
<FormattedMessage
|
||||
id="gatedContent.paragraph.bulletFour"
|
||||
defaultMessage="Support our {nonProfit} mission at edX"
|
||||
values={{ nonProfit }}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="col-md-auto p-md-0 d-md-flex align-items-md-center mr-md-3"
|
||||
style={{ textAlign: 'right' }}
|
||||
>
|
||||
<Button
|
||||
className="lock_paywall_upgrade_link"
|
||||
href={upgradeUrl}
|
||||
onClick={logClick}
|
||||
role="link"
|
||||
>
|
||||
{intl.formatMessage(messages['learn.lockPaywall.upgrade.link'], {
|
||||
currencySymbol,
|
||||
price,
|
||||
})}
|
||||
</a>
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}
|
||||
src={VerifiedCert}
|
||||
className="border-0"
|
||||
style={{ height: '70px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
LockPaywall.propTypes = {
|
||||
|
||||
12
src/courseware/course/sequence/lock-paywall/LockPaywall.scss
Normal file
12
src/courseware/course/sequence/lock-paywall/LockPaywall.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
|
||||
// Temporary CSS intervention until paragon list items will support icons (PAR-429)
|
||||
.fa-li {
|
||||
left: -31px !important;
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) and (max-width: 1100px) {
|
||||
.list-div {
|
||||
width: 62%;
|
||||
}
|
||||
}
|
||||
@@ -19,14 +19,6 @@ describe('Lock Paywall', () => {
|
||||
mockData.courseId = courseware.courseId;
|
||||
});
|
||||
|
||||
it('displays message along with lock icon', () => {
|
||||
const { container } = render(<LockPaywall {...mockData} />);
|
||||
|
||||
const lockIcon = container.querySelector('svg');
|
||||
expect(lockIcon).toHaveClass('fa-lock');
|
||||
expect(lockIcon.parentElement).toHaveTextContent('Verified Track Access');
|
||||
});
|
||||
|
||||
it('displays unlock link with price', () => {
|
||||
const {
|
||||
currencySymbol,
|
||||
@@ -35,7 +27,7 @@ describe('Lock Paywall', () => {
|
||||
} = store.getState().models.coursewareMeta[mockData.courseId].verifiedMode;
|
||||
render(<LockPaywall {...mockData} />);
|
||||
|
||||
const upgradeLink = screen.getByRole('link', { name: `Upgrade to unlock (${currencySymbol}${price})` });
|
||||
const upgradeLink = screen.getByRole('link', { name: `Upgrade for ${currencySymbol}${price}` });
|
||||
expect(upgradeLink).toHaveAttribute('href', `${upgradeUrl}`);
|
||||
});
|
||||
|
||||
@@ -48,7 +40,7 @@ describe('Lock Paywall', () => {
|
||||
} = store.getState().models.coursewareMeta[mockData.courseId].verifiedMode;
|
||||
render(<LockPaywall {...mockData} />);
|
||||
|
||||
const upgradeLink = screen.getByRole('link', { name: `Upgrade to unlock (${currencySymbol}${price})` });
|
||||
const upgradeLink = screen.getByRole('link', { name: `Upgrade for ${currencySymbol}${price}` });
|
||||
fireEvent.click(upgradeLink);
|
||||
|
||||
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
|
||||
|
||||
@@ -3,17 +3,17 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
const messages = defineMessages({
|
||||
'learn.lockPaywall.title': {
|
||||
id: 'learn.lockPaywall.title',
|
||||
defaultMessage: 'Verified Track Access',
|
||||
defaultMessage: 'Graded assignments are locked',
|
||||
description: 'Heading for message shown to indicate that a piece of content is unavailable to audit track users.',
|
||||
},
|
||||
'learn.lockPaywall.content': {
|
||||
id: 'learn.lockPaywall.content',
|
||||
defaultMessage: 'Graded assessments are available to Verified Track learners.',
|
||||
defaultMessage: 'Upgrade to gain access to locked features like this one and get the most out of your course.',
|
||||
description: 'Message shown to indicate that a piece of content is unavailable to audit track users.',
|
||||
},
|
||||
'learn.lockPaywall.upgrade.link': {
|
||||
id: 'learn.lockPaywall.upgrade.link',
|
||||
defaultMessage: 'Upgrade to unlock ({currencySymbol}{price})',
|
||||
defaultMessage: 'Upgrade for {currencySymbol}{price}',
|
||||
description: 'A link users can click that navigates their browser to the upgrade payment page.',
|
||||
},
|
||||
'learn.lockPaywall.example.alt': {
|
||||
@@ -21,6 +21,31 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Example Certificate',
|
||||
description: 'Alternate text displayed when the example certificate image cannot be displayed.',
|
||||
},
|
||||
'learn.lockPaywall.list.intro': {
|
||||
id: 'learn.lockPaywall.list.intro',
|
||||
defaultMessage: 'When you upgrade, you:',
|
||||
description: 'Text displayed to introduce the list of benefits from upgrading.',
|
||||
},
|
||||
'learn.lockPaywall.list.bullet1.linktext': {
|
||||
id: 'learn.lockPaywall.list.bullet1.linktext',
|
||||
defaultMessage: 'verified certificate',
|
||||
description: 'Link text for verified certificate info page.',
|
||||
},
|
||||
'learn.lockPaywall.list.bullet2.boldtext': {
|
||||
id: 'learn.lockPaywall.list.bullet2.boldtext',
|
||||
defaultMessage: 'graded assignments',
|
||||
description: 'Bolded text for graded assignments.',
|
||||
},
|
||||
'learn.lockPaywall.list.bullet3.boldtext': {
|
||||
id: 'learn.lockPaywall.list.bullet3.boldtext',
|
||||
defaultMessage: 'Full access',
|
||||
description: 'Bolded text for full access.',
|
||||
},
|
||||
'learn.lockPaywall.list.bullet4.boldtext': {
|
||||
id: 'learn.lockPaywall.list.bullet4.boldtext',
|
||||
defaultMessage: 'non-profit',
|
||||
description: 'Bolded text to highlight our non-profit status.',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
|
||||
@@ -46,7 +46,7 @@ describe('Sequence Navigation', () => {
|
||||
});
|
||||
|
||||
it('renders locked button for gated content', async () => {
|
||||
const sequenceBlock = [Factory.build(
|
||||
const sequenceBlocks = [Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: [unitBlocks.map(block => block.id)] },
|
||||
{ courseId: courseMetadata.id },
|
||||
@@ -54,12 +54,12 @@ describe('Sequence Navigation', () => {
|
||||
const sequenceMetadata = [Factory.build(
|
||||
'sequenceMetadata',
|
||||
{ gated_content: { gated: true } },
|
||||
{ courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlock[0] },
|
||||
{ courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
|
||||
)];
|
||||
const testStore = await initializeTestStore({ unitBlocks, sequenceBlock, sequenceMetadata }, false);
|
||||
const testStore = await initializeTestStore({ unitBlocks, sequenceBlocks, sequenceMetadata }, false);
|
||||
const testData = {
|
||||
...mockData,
|
||||
sequenceId: sequenceBlock[0].id,
|
||||
sequenceId: sequenceBlocks[0].id,
|
||||
onNavigate: jest.fn(),
|
||||
};
|
||||
render(<SequenceNavigation {...testData} />, { store: testStore });
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
|
||||
Factory.define('block')
|
||||
.option('courseId', 'course-v1:edX+DemoX+Demo_Course')
|
||||
.option('host', 'http://localhost:18000')
|
||||
// Generating block_id that is similar to md5 hash, but still deterministic
|
||||
.sequence('block_id', id => ('abcd'.repeat(8) + id).slice(-32))
|
||||
.attrs({
|
||||
graded: false,
|
||||
type: 'course',
|
||||
children: [],
|
||||
})
|
||||
.attr('display_name', ['display_name', 'block_id'], (displayName, blockId) => {
|
||||
if (displayName) {
|
||||
return displayName;
|
||||
}
|
||||
|
||||
return blockId;
|
||||
})
|
||||
.attr(
|
||||
'id',
|
||||
['id', 'block_id', 'type', 'courseId'],
|
||||
(id, blockId, type, courseId) => {
|
||||
if (id) {
|
||||
return id;
|
||||
}
|
||||
|
||||
const courseInfo = courseId.split(':')[1];
|
||||
|
||||
return `block-v1:${courseInfo}+type@${type}+block@${blockId}`;
|
||||
},
|
||||
)
|
||||
.attr(
|
||||
'student_view_url',
|
||||
['student_view_url', 'host', 'id'],
|
||||
(url, host, id) => {
|
||||
if (url) {
|
||||
return url;
|
||||
}
|
||||
|
||||
return `${host}/xblock/${id}`;
|
||||
},
|
||||
)
|
||||
.attr(
|
||||
'lms_web_url',
|
||||
['lms_web_url', 'host', 'courseId', 'id'],
|
||||
(url, host, courseId, id) => {
|
||||
if (url) {
|
||||
return url;
|
||||
}
|
||||
|
||||
return `${host}/courses/${courseId}/jump_to/${id}`;
|
||||
},
|
||||
);
|
||||
@@ -1,97 +0,0 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
import './block.factory';
|
||||
|
||||
// Generates an Array of block IDs, either from a single block or an array of blocks.
|
||||
const getIds = (attr) => {
|
||||
const blocks = Array.isArray(attr) ? attr : [attr];
|
||||
return blocks.map(block => block.id);
|
||||
};
|
||||
|
||||
// Generates an Object in { [block.id]: block } format, either from a single block or an array of blocks.
|
||||
const getBlocks = (attr) => {
|
||||
const blocks = Array.isArray(attr) ? attr : [attr];
|
||||
// eslint-disable-next-line no-return-assign,no-sequences
|
||||
return blocks.reduce((acc, block) => (acc[block.id] = block, acc), {});
|
||||
};
|
||||
|
||||
Factory.define('courseBlocks')
|
||||
.option('courseId', 'course-v1:edX+DemoX+Demo_Course')
|
||||
.option('units', ['courseId'], courseId => ([
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
),
|
||||
]))
|
||||
.option('sequence', ['courseId', 'units'], (courseId, child) => Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: getIds(child) },
|
||||
{ courseId },
|
||||
))
|
||||
.option('section', ['courseId', 'sequence'], (courseId, child) => Factory.build(
|
||||
'block',
|
||||
{ type: 'chapter', children: getIds(child) },
|
||||
{ courseId },
|
||||
))
|
||||
.option('course', ['courseId', 'section'], (courseId, child) => Factory.build(
|
||||
'block',
|
||||
{ type: 'course', children: getIds(child) },
|
||||
{ courseId },
|
||||
))
|
||||
.attr(
|
||||
'blocks',
|
||||
['course', 'section', 'sequence', 'units'],
|
||||
(course, section, sequence, units) => ({
|
||||
[course.id]: course,
|
||||
...getBlocks(section),
|
||||
...getBlocks(sequence),
|
||||
...getBlocks(units),
|
||||
}),
|
||||
)
|
||||
.attr('root', ['course'], course => course.id);
|
||||
|
||||
/**
|
||||
* Builds a course with a single chapter, sequence, and unit.
|
||||
*/
|
||||
export default function buildSimpleCourseBlocks(courseId, title, options = {}) {
|
||||
const unitBlocks = options.unitBlocks || [Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
)];
|
||||
const sequenceBlock = options.sequenceBlock || [Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: unitBlocks.map(block => block.id) },
|
||||
{ courseId },
|
||||
)];
|
||||
const sectionBlock = options.sectionBlock || Factory.build(
|
||||
'block',
|
||||
{ type: 'chapter', children: sequenceBlock.map(block => block.id) },
|
||||
{ courseId },
|
||||
);
|
||||
const courseBlock = options.courseBlocks || Factory.build(
|
||||
'block',
|
||||
{ type: 'course', display_name: title, children: [sectionBlock.id] },
|
||||
{ courseId },
|
||||
);
|
||||
return {
|
||||
courseBlocks: options.courseBlocks || Factory.build(
|
||||
'courseBlocks',
|
||||
{
|
||||
courseId,
|
||||
hasScheduledContent: options.hasScheduledContent || false,
|
||||
title: 'Demo Course',
|
||||
},
|
||||
{
|
||||
units: unitBlocks,
|
||||
sequence: sequenceBlock,
|
||||
section: sectionBlock,
|
||||
course: courseBlock,
|
||||
},
|
||||
),
|
||||
unitBlocks,
|
||||
sequenceBlock,
|
||||
sectionBlock,
|
||||
courseBlock,
|
||||
};
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
|
||||
import './tab.factory';
|
||||
import courseMetadataBase from '../../../shared/data/__factories__/courseMetadataBase.factory';
|
||||
|
||||
Factory.define('courseMetadata')
|
||||
.sequence('id', (id) => `course-v1:edX+DemoX+Demo_Course_${id}`)
|
||||
.extend(courseMetadataBase)
|
||||
.option('host', '')
|
||||
.attrs({
|
||||
can_show_upgrade_sock: false,
|
||||
content_type_gating_enabled: false,
|
||||
@@ -13,9 +14,7 @@ Factory.define('courseMetadata')
|
||||
enrollment_start: null,
|
||||
enrollment_end: null,
|
||||
name: 'Demonstration Course',
|
||||
number: 'DemoX',
|
||||
offer_html: null,
|
||||
org: 'edX',
|
||||
short_description: null,
|
||||
start: '2013-02-05T05:00:00Z',
|
||||
start_display: 'Feb. 5, 2013',
|
||||
@@ -34,8 +33,6 @@ Factory.define('courseMetadata')
|
||||
currency_symbol: '$',
|
||||
},
|
||||
show_calculator: false,
|
||||
is_staff: false,
|
||||
original_user_is_staff: false,
|
||||
license: 'all-rights-reserved',
|
||||
can_load_courseware: {
|
||||
has_access: true,
|
||||
@@ -59,75 +56,4 @@ Factory.define('courseMetadata')
|
||||
verification_status: 'none',
|
||||
linkedin_add_to_profile_url: null,
|
||||
related_programs: null,
|
||||
}).attr(
|
||||
'tabs', ['tabs', 'id'], (passedTabs, id) => {
|
||||
if (passedTabs) {
|
||||
return passedTabs;
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Course',
|
||||
priority: 0,
|
||||
slug: 'courseware',
|
||||
type: 'courseware',
|
||||
},
|
||||
{ courseId: id, path: 'course/' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Discussion',
|
||||
priority: 1,
|
||||
slug: 'discussion',
|
||||
type: 'discussion',
|
||||
},
|
||||
{ courseId: id, path: 'discussion/forum/' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Wiki',
|
||||
priority: 2,
|
||||
slug: 'wiki',
|
||||
type: 'wiki',
|
||||
},
|
||||
{ courseId: id, path: 'course_wiki' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Progress',
|
||||
priority: 3,
|
||||
slug: 'progress',
|
||||
type: 'progress',
|
||||
},
|
||||
{ courseId: id, path: 'progress' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Instructor',
|
||||
priority: 4,
|
||||
slug: 'instructor',
|
||||
type: 'instructor',
|
||||
},
|
||||
{ courseId: id, path: 'instructor' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Dates',
|
||||
priority: 5,
|
||||
slug: 'dates',
|
||||
type: 'dates',
|
||||
},
|
||||
{ courseId: id, path: 'dates' },
|
||||
),
|
||||
];
|
||||
|
||||
return tabs;
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,4 +1,2 @@
|
||||
import './block.factory';
|
||||
import './courseBlocks.factory';
|
||||
import './courseMetadata.factory';
|
||||
import './sequenceMetadata.factory';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
import './block.factory';
|
||||
import buildSimpleCourseBlocks from './courseBlocks.factory';
|
||||
import '../../../shared/data/__factories__/block.factory';
|
||||
import { buildSimpleCourseBlocks } from '../../../shared/data/__factories__/courseBlocks.factory';
|
||||
|
||||
Factory.define('sequenceMetadata')
|
||||
.option('courseId', (courseId) => {
|
||||
@@ -75,8 +75,8 @@ export default function buildSimpleCourseAndSequenceMetadata(options = {}) {
|
||||
});
|
||||
const courseId = courseMetadata.id;
|
||||
const simpleCourseBlocks = buildSimpleCourseBlocks(courseId, courseMetadata.name, options);
|
||||
const { unitBlocks, sequenceBlock } = simpleCourseBlocks;
|
||||
const sequenceMetadata = options.sequenceMetadata || sequenceBlock.map(block => Factory.build(
|
||||
const { unitBlocks, sequenceBlocks } = simpleCourseBlocks;
|
||||
const sequenceMetadata = options.sequenceMetadata || sequenceBlocks.map(block => Factory.build(
|
||||
'sequenceMetadata',
|
||||
{},
|
||||
{
|
||||
|
||||
@@ -38,7 +38,7 @@ export function normalizeBlocks(courseId, blocks) {
|
||||
effortTime: block.effort_time,
|
||||
id: block.id,
|
||||
title: block.display_name,
|
||||
lmsWebUrl: block.lms_web_url,
|
||||
legacyWebUrl: block.legacy_web_url,
|
||||
unitIds: block.children || [],
|
||||
};
|
||||
break;
|
||||
@@ -47,7 +47,7 @@ export function normalizeBlocks(courseId, blocks) {
|
||||
graded: block.graded,
|
||||
id: block.id,
|
||||
title: block.display_name,
|
||||
lmsWebUrl: block.lms_web_url,
|
||||
legacyWebUrl: block.legacy_web_url,
|
||||
};
|
||||
break;
|
||||
default:
|
||||
@@ -118,7 +118,6 @@ function normalizeTabUrls(id, tabs) {
|
||||
|
||||
function normalizeMetadata(metadata) {
|
||||
return {
|
||||
timeOffsetMillis: metadata.timeOffsetMillis, // This should move to a global time correction reference
|
||||
accessExpiration: camelCaseObject(metadata.access_expiration),
|
||||
canShowUpgradeSock: metadata.can_show_upgrade_sock,
|
||||
contentTypeGatingEnabled: metadata.content_type_gating_enabled,
|
||||
@@ -157,23 +156,7 @@ function normalizeMetadata(metadata) {
|
||||
export async function getCourseMetadata(courseId) {
|
||||
let url = `${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`;
|
||||
url = appendBrowserTimezoneToUrl(url);
|
||||
const requestTime = Date.now();
|
||||
const { data, headers } = await getAuthenticatedHttpClient().get(url);
|
||||
const responseTime = Date.now();
|
||||
|
||||
// Time offset computation should move down into the HttpClient wrapper to maintain a global time correction reference
|
||||
// Requires 'Access-Control-Expose-Headers: Date' on the server response per https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#access-control-expose-headers
|
||||
const headerDate = headers.date;
|
||||
|
||||
let timeOffsetMillis = 0;
|
||||
if (headerDate !== undefined) {
|
||||
const headerTime = Date.parse(headerDate);
|
||||
const roundTripMillis = requestTime - responseTime;
|
||||
const localTime = responseTime - (roundTripMillis / 2); // Roughly compensate for transit time
|
||||
timeOffsetMillis = headerTime - localTime;
|
||||
}
|
||||
|
||||
data.timeOffsetMillis = timeOffsetMillis; // This should move to a global time correction reference
|
||||
const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
return normalizeMetadata(data);
|
||||
}
|
||||
|
||||
@@ -181,6 +164,7 @@ function normalizeSequenceMetadata(sequence) {
|
||||
return {
|
||||
sequence: {
|
||||
id: sequence.item_id,
|
||||
blockType: sequence.tag,
|
||||
unitIds: sequence.items.map(unit => unit.id),
|
||||
bannerText: sequence.banner_text,
|
||||
format: sequence.format,
|
||||
|
||||
@@ -8,7 +8,7 @@ import * as thunks from './thunks';
|
||||
|
||||
import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
|
||||
|
||||
import buildSimpleCourseBlocks from './__factories__/courseBlocks.factory';
|
||||
import { buildSimpleCourseBlocks } from '../../shared/data/__factories__/courseBlocks.factory';
|
||||
import { initializeMockApp } from '../../setupTest';
|
||||
import initializeStore from '../../store';
|
||||
|
||||
@@ -24,18 +24,18 @@ describe('Data layer integration tests', () => {
|
||||
// building minimum set of api responses to test all thunks
|
||||
const courseMetadata = Factory.build('courseMetadata');
|
||||
const courseId = courseMetadata.id;
|
||||
const { courseBlocks, unitBlocks, sequenceBlock } = buildSimpleCourseBlocks(courseId);
|
||||
const { courseBlocks, unitBlocks, sequenceBlocks } = buildSimpleCourseBlocks(courseId);
|
||||
const sequenceMetadata = Factory.build(
|
||||
'sequenceMetadata',
|
||||
{},
|
||||
{ courseId, unitBlocks, sequenceBlock: sequenceBlock[0] },
|
||||
{ courseId, unitBlocks, sequenceBlock: sequenceBlocks[0] },
|
||||
);
|
||||
|
||||
let courseUrl = `${courseBaseUrl}/${courseId}`;
|
||||
courseUrl = appendBrowserTimezoneToUrl(courseUrl);
|
||||
|
||||
const sequenceUrl = `${sequenceBaseUrl}/${sequenceMetadata.item_id}`;
|
||||
const sequenceId = sequenceBlock[0].id;
|
||||
const sequenceId = sequenceBlocks[0].id;
|
||||
const unitId = unitBlocks[0].id;
|
||||
|
||||
let store;
|
||||
@@ -115,6 +115,22 @@ describe('Data layer integration tests', () => {
|
||||
expect(store.getState().courseware.sequenceStatus).toEqual('failed');
|
||||
});
|
||||
|
||||
it('Should result in fetch failure if a non-sequential block is returned', async () => {
|
||||
const sectionMetadata = {
|
||||
...sequenceMetadata,
|
||||
// 'chapter' is the block_type of a Section, which the sequence metadata
|
||||
// API will happily return if requested, since SectionBlock is implemented
|
||||
// as a subclass of SequenceBlock.
|
||||
tag: 'chapter',
|
||||
};
|
||||
axiosMock.onGet(sequenceUrl).reply(200, sectionMetadata);
|
||||
|
||||
await executeThunk(thunks.fetchSequence(sequenceId), store.dispatch);
|
||||
|
||||
expect(loggingService.logError).toHaveBeenCalled();
|
||||
expect(store.getState().courseware.sequenceStatus).toEqual('failed');
|
||||
});
|
||||
|
||||
it('Should fetch and normalize metadata, and then update existing models with sequence metadata', async () => {
|
||||
axiosMock.onGet(courseUrl).reply(200, courseMetadata);
|
||||
axiosMock.onGet(courseBlocksUrlRegExp).reply(200, courseBlocks);
|
||||
|
||||
@@ -93,15 +93,26 @@ export function fetchSequence(sequenceId) {
|
||||
dispatch(fetchSequenceRequest({ sequenceId }));
|
||||
try {
|
||||
const { sequence, units } = await getSequenceMetadata(sequenceId);
|
||||
dispatch(updateModel({
|
||||
modelType: 'sequences',
|
||||
model: sequence,
|
||||
}));
|
||||
dispatch(updateModels({
|
||||
modelType: 'units',
|
||||
models: units,
|
||||
}));
|
||||
dispatch(fetchSequenceSuccess({ sequenceId }));
|
||||
if (sequence.blockType !== 'sequential') {
|
||||
// Some other block types (particularly 'chapter') can be returned
|
||||
// by this API. We want to error in that case, since downstream
|
||||
// courseware code is written to render Sequences of Units.
|
||||
logError(
|
||||
`Requested sequence '${sequenceId}' `
|
||||
+ `has block type '${sequence.blockType}'; expected block type 'sequential'.`,
|
||||
);
|
||||
dispatch(fetchSequenceFailure({ sequenceId }));
|
||||
} else {
|
||||
dispatch(updateModel({
|
||||
modelType: 'sequences',
|
||||
model: sequence,
|
||||
}));
|
||||
dispatch(updateModels({
|
||||
modelType: 'units',
|
||||
models: units,
|
||||
}));
|
||||
dispatch(fetchSequenceSuccess({ sequenceId }));
|
||||
}
|
||||
} catch (error) {
|
||||
logError(error);
|
||||
dispatch(fetchSequenceFailure({ sequenceId }));
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { useModel } from '../../generic/model-store';
|
||||
|
||||
@@ -16,6 +17,8 @@ const MMP2PKeys = StrictDict({
|
||||
enableFn: 'enable',
|
||||
flyoverVisible: 'flyoverVisible',
|
||||
state: 'state',
|
||||
access: 'access',
|
||||
meta: 'meta',
|
||||
});
|
||||
|
||||
let location;
|
||||
@@ -30,6 +33,11 @@ const defaultWindowVal = (field, val) => (
|
||||
windowVal(field) === undefined ? val : windowVal(field)
|
||||
);
|
||||
|
||||
const createWindowStateSetter = (stateSetter, key) => (value) => {
|
||||
stateSetter(value);
|
||||
setWindowVal(key, value);
|
||||
};
|
||||
|
||||
const externalConfig = {
|
||||
runs: [
|
||||
{
|
||||
@@ -87,48 +95,57 @@ const initHomeMMP2P = (courseId) => {
|
||||
upgradeDeadline: null,
|
||||
afterUpgradeDeadline: false,
|
||||
};
|
||||
|
||||
const [MMP2POptions, setMMP2POptions] = useState(
|
||||
defaultWindowVal(MMP2PKeys.state, { ...defaultState }),
|
||||
);
|
||||
|
||||
setWindowVal(MMP2PKeys.enableFn, (upgradeDeadline) => {
|
||||
if (upgradeDeadline === undefined) {
|
||||
setMMP2POptions({ ...defaultState });
|
||||
} else {
|
||||
setMMP2POptions({
|
||||
isEnabled: true,
|
||||
upgradeDeadline,
|
||||
afterUpgradeDeadline: new Date() > new Date(upgradeDeadline),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const access = {
|
||||
const defaultAccess = {
|
||||
isAudit: false,
|
||||
accessExpirationDate: null,
|
||||
upgradeUrl: null,
|
||||
price: null,
|
||||
};
|
||||
|
||||
const { accessExpiration, verifiedMode } = useModel('outline', courseId);
|
||||
if (
|
||||
accessExpiration !== null
|
||||
&& accessExpiration !== undefined
|
||||
&& verifiedMode !== null
|
||||
&& verifiedMode !== undefined
|
||||
) {
|
||||
access.isAudit = true;
|
||||
access.accessExpirationDate = accessExpiration.expirationDate;
|
||||
access.upgradeUrl = accessExpiration.upgradeUrl;
|
||||
access.price = `${verifiedMode.currencySymbol}${verifiedMode.price}`;
|
||||
}
|
||||
const [MMP2POptions, _setMMP2POptions] = useState(defaultWindowVal(MMP2PKeys.state, { ...defaultState }));
|
||||
const [MMP2PAccess, _setMMP2PAccess] = useState(defaultWindowVal(MMP2PKeys.access, { ...defaultAccess }));
|
||||
|
||||
const setMMP2POptions = createWindowStateSetter(_setMMP2POptions, MMP2PKeys.state);
|
||||
const setMMP2PAccess = createWindowStateSetter(_setMMP2PAccess, MMP2PKeys.access);
|
||||
|
||||
const loadAccess = () => {
|
||||
const { accessExpiration, verifiedMode } = useModel('coursewareMeta', courseId);
|
||||
|
||||
if (accessExpiration !== null && accessExpiration !== undefined) {
|
||||
setMMP2PAccess({
|
||||
isAudit: true,
|
||||
accessExpirationDate: accessExpiration.expirationDate,
|
||||
upgradeUrl: accessExpiration.upgradeUrl,
|
||||
price: ((verifiedMode !== null && verifiedMode !== undefined)
|
||||
? `${verifiedMode.currencySymbol}${verifiedMode.price}`
|
||||
: ''
|
||||
),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const enableFunction = (upgradeDeadline) => {
|
||||
if (upgradeDeadline === undefined) {
|
||||
setMMP2POptions({ ...defaultState });
|
||||
setMMP2PAccess({ ...defaultAccess });
|
||||
} else {
|
||||
setMMP2POptions({
|
||||
isEnabled: true,
|
||||
upgradeDeadline,
|
||||
afterUpgradeDeadline: new Date() > new Date(upgradeDeadline),
|
||||
});
|
||||
loadAccess();
|
||||
}
|
||||
};
|
||||
|
||||
setWindowVal(MMP2PKeys.enableFn, enableFunction);
|
||||
|
||||
return {
|
||||
state: MMP2POptions,
|
||||
access,
|
||||
access: MMP2PAccess,
|
||||
};
|
||||
};
|
||||
|
||||
const initCoursewareMMP2P = (courseId, sequenceId, unitId) => {
|
||||
location = 'course';
|
||||
|
||||
@@ -139,95 +156,104 @@ const initCoursewareMMP2P = (courseId, sequenceId, unitId) => {
|
||||
subSections: [],
|
||||
isWhitelisted: false,
|
||||
};
|
||||
|
||||
const [MMP2POptions, _setMMP2POptions] = useState(
|
||||
defaultWindowVal(MMP2PKeys.state, { ...defaultState }),
|
||||
);
|
||||
|
||||
const setMMP2POptions = (options) => {
|
||||
_setMMP2POptions(options);
|
||||
setWindowVal(MMP2PKeys.state, options);
|
||||
};
|
||||
|
||||
const [isMMP2PFlyoverVisible, setMMP2PFlyoverVisible] = useState(
|
||||
isMobile() ? false : defaultWindowVal(MMP2PKeys.flyoverVisible, true),
|
||||
);
|
||||
const flyover = {
|
||||
isVisible: isMMP2PFlyoverVisible,
|
||||
toggle: () => {
|
||||
setMMP2PFlyoverVisible(!isMMP2PFlyoverVisible);
|
||||
setWindowVal(MMP2PKeys.flyoverVisible, !isMMP2PFlyoverVisible);
|
||||
},
|
||||
};
|
||||
|
||||
setWindowVal(MMP2PKeys.enableFn,
|
||||
(upgradeDeadline, subSections) => {
|
||||
if (subSections.length !== undefined && subSections.length > 0) {
|
||||
setMMP2POptions({
|
||||
isEnabled: true,
|
||||
upgradeDeadline,
|
||||
afterUpgradeDeadline: new Date() > new Date(upgradeDeadline),
|
||||
isWhitelisted: subSections.indexOf(sequenceId) > -1,
|
||||
});
|
||||
} else {
|
||||
setMMP2POptions({ ...defaultState });
|
||||
setWindowVal(MMP2PKeys.state, { ...defaultState });
|
||||
}
|
||||
});
|
||||
|
||||
const access = {
|
||||
const defaultAccess = {
|
||||
isAudit: false,
|
||||
accessExpirationDate: null,
|
||||
upgradeUrl: null,
|
||||
price: null,
|
||||
};
|
||||
const defaultMeta = {
|
||||
blockContent: false,
|
||||
gradedLock: false,
|
||||
modalLock: false,
|
||||
showLock: false,
|
||||
verifiedLock: false,
|
||||
};
|
||||
|
||||
const { accessExpiration, verifiedMode } = useModel('coursewareMeta', courseId);
|
||||
if (
|
||||
accessExpiration !== null
|
||||
&& accessExpiration !== undefined
|
||||
&& verifiedMode !== null
|
||||
&& verifiedMode !== undefined
|
||||
) {
|
||||
access.isAudit = true;
|
||||
access.accessExpirationDate = accessExpiration.expirationDate;
|
||||
access.upgradeUrl = accessExpiration.upgradeUrl;
|
||||
access.price = `${verifiedMode.currencySymbol}${verifiedMode.price}`;
|
||||
}
|
||||
const [MMP2POptions, _setMMP2POptions] = useState(defaultWindowVal(MMP2PKeys.state, { ...defaultState }));
|
||||
const [MMP2PAccess, _setMMP2PAccess] = useState(defaultWindowVal(MMP2PKeys.access, { ...defaultAccess }));
|
||||
const [MMP2PMeta, _setMMP2PMeta] = useState(defaultWindowVal(MMP2PKeys.meta, { ...defaultMeta }));
|
||||
const [MMP2PIsFlyoverVisible, setMMP2PIsFlyoverVisible] = useState(
|
||||
defaultWindowVal(MMP2PKeys.flyoverVisible, !isMobile()),
|
||||
);
|
||||
|
||||
const setMMP2POptions = createWindowStateSetter(_setMMP2POptions, MMP2PKeys.state);
|
||||
const setMMP2PAccess = createWindowStateSetter(_setMMP2PAccess, MMP2PKeys.access);
|
||||
const setMMP2PMeta = createWindowStateSetter(_setMMP2PMeta, MMP2PKeys.meta);
|
||||
|
||||
const flyover = {
|
||||
isVisible: MMP2PIsFlyoverVisible,
|
||||
toggle: () => {
|
||||
setMMP2PIsFlyoverVisible(!MMP2PIsFlyoverVisible);
|
||||
setWindowVal(MMP2PKeys.flyoverVisible, !MMP2PIsFlyoverVisible);
|
||||
},
|
||||
};
|
||||
|
||||
const loadOptions = (upgradeDeadline, subSections) => (dispatch, getState) => {
|
||||
const state = getState();
|
||||
|
||||
const options = {
|
||||
isEnabled: true,
|
||||
upgradeDeadline,
|
||||
afterUpgradeDeadline: new Date() > new Date(upgradeDeadline),
|
||||
isWhitelisted: subSections.indexOf(sequenceId) > -1,
|
||||
};
|
||||
setMMP2POptions(options);
|
||||
|
||||
const models = {
|
||||
coursewareMeta: state.models.coursewareMeta[courseId],
|
||||
units: state.models.units[unitId],
|
||||
};
|
||||
const { accessExpiration, verifiedMode } = models.coursewareMeta;
|
||||
const graded = models.units !== undefined ? models.units.graded : false;
|
||||
|
||||
let access = {};
|
||||
if (accessExpiration !== null && accessExpiration !== undefined) {
|
||||
access = {
|
||||
isAudit: true,
|
||||
accessExpirationDate: accessExpiration.expirationDate,
|
||||
upgradeUrl: accessExpiration.upgradeUrl,
|
||||
price: ((verifiedMode !== null && verifiedMode !== undefined)
|
||||
? `${verifiedMode.currencySymbol}${verifiedMode.price}`
|
||||
: ''
|
||||
),
|
||||
};
|
||||
setMMP2PAccess(access);
|
||||
}
|
||||
const meta = {
|
||||
verifiedLock: (access.isAudit && !options.isWhitelisted),
|
||||
gradedLock: (access.isAudit && options.isWhitelisted && graded),
|
||||
modalLock: (access.isAudit && !options.isWhitelisted && options.afterUpgradeDeadline),
|
||||
};
|
||||
meta.showLock = (options.isEnabled && (meta.verifiedLock || meta.gradedLock));
|
||||
meta.blockContent = (options.isEnabled && meta.verifiedLock);
|
||||
setMMP2PMeta(meta);
|
||||
};
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const enableFunction = (upgradeDeadline, subSections) => {
|
||||
if (subSections.length !== undefined && subSections.length > 0) {
|
||||
dispatch(loadOptions(upgradeDeadline, subSections));
|
||||
} else {
|
||||
setMMP2POptions({ ...defaultState });
|
||||
setMMP2PAccess({ ...defaultAccess });
|
||||
setMMP2PMeta({ ...defaultMeta });
|
||||
}
|
||||
};
|
||||
|
||||
setWindowVal(MMP2PKeys.enableFn, enableFunction);
|
||||
|
||||
// testing
|
||||
setWindowVal('externalConfig', externalConfig);
|
||||
|
||||
const unitModel = useModel('units', unitId);
|
||||
const graded = unitModel !== undefined ? unitModel.graded : false;
|
||||
|
||||
const meta = {};
|
||||
meta.verifiedLock = (
|
||||
access.isAudit
|
||||
&& !MMP2POptions.isWhitelisted
|
||||
);
|
||||
meta.gradedLock = (
|
||||
access.isAudit
|
||||
&& MMP2POptions.isWhitelisted
|
||||
&& graded
|
||||
);
|
||||
meta.modalLock = (
|
||||
access.isAudit
|
||||
&& !MMP2POptions.isWhitelisted
|
||||
&& MMP2POptions.afterUpgradeDeadline
|
||||
);
|
||||
meta.showLock = (
|
||||
MMP2POptions.isEnabled
|
||||
&& (meta.verifiedLock || meta.gradedLock)
|
||||
);
|
||||
meta.blockContent = (MMP2POptions.isEnabled && meta.verifiedLock);
|
||||
|
||||
return {
|
||||
access,
|
||||
const config = {
|
||||
access: MMP2PAccess,
|
||||
flyover,
|
||||
meta,
|
||||
meta: MMP2PMeta,
|
||||
state: MMP2POptions,
|
||||
};
|
||||
|
||||
return config;
|
||||
};
|
||||
|
||||
export {
|
||||
|
||||
@@ -36,7 +36,7 @@ describe('Course Sock', () => {
|
||||
|
||||
expect(screen.getByText('edX Verified Certificate')).toBeInTheDocument();
|
||||
const { currencySymbol, price } = mockData.verifiedMode;
|
||||
expect(screen.getByText(`Upgrade (${currencySymbol}${price})`)).toBeInTheDocument();
|
||||
expect(screen.getByText(`Upgrade for ${currencySymbol}${price}`)).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(upsellButton);
|
||||
expect(screen.queryByText('edX Verified Certificate')).not.toBeInTheDocument();
|
||||
|
||||
@@ -49,7 +49,7 @@ function FormattedPricing(props) {
|
||||
{intl.formatMessage(messages.srPrices, { discountedPrice, originalPrice })}
|
||||
</span>
|
||||
<span aria-hidden="true">
|
||||
<span>{discountedPrice}</span> <del>{originalPrice}</del>
|
||||
<span>{discountedPrice}</span> (<del>{originalPrice}</del>)
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -26,7 +26,7 @@ function UpgradeButton(props) {
|
||||
>
|
||||
<FormattedMessage
|
||||
id="learning.upgradeButton.buttonText"
|
||||
defaultMessage="Upgrade ({pricing})"
|
||||
defaultMessage="Upgrade for {pricing}"
|
||||
values={{
|
||||
pricing: (
|
||||
<FormattedPricing
|
||||
|
||||
@@ -90,44 +90,47 @@
|
||||
"learning.proctoringPanel.message.verified": "You can now take proctored exams in this course.",
|
||||
"learning.proctoringPanel.message.rejected": "Your onboarding exam has been rejected. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.error": "An error has occurred during your onboarding exam. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, it is highly recommended that you complete this course’s onboarding exam in order to ensure that your device still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "You are eligible to take proctored exams in this course.",
|
||||
"learning.proctoringPanel.detail.otherCourseApproved": "If your device has changed, we recommend that you complete this course's onboarding exam in order to ensure that your setup still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.expiringSoon": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.",
|
||||
"learning.proctoringPanel.generalInfo": "You must complete the onboarding process prior to taking any proctored exam. ",
|
||||
"learning.proctoringPanel.generalInfoSubmitted": "Your submitted profile is in review.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review, including identity verification, can take 2+ business days.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review can take 2+ business days.",
|
||||
"learning.proctoringPanel.onboardingButton": "Complete Onboarding",
|
||||
"learning.proctoringPanel.onboardingPracticeButton": "View Onboarding Exam",
|
||||
"learning.proctoringPanel.onboardingButtonNotOpen": "Onboarding Opens: {releaseDate}",
|
||||
"learning.proctoringPanel.reviewRequirementsButton": "Review instructions and system requirements",
|
||||
"learning.outline.sequence-due": "{description} في{assignmentDue}",
|
||||
"learning.progress.badge.problem": "درجات المسألة:",
|
||||
"learning.progress.badge.practice": "درجات التمرين:",
|
||||
"learning.progress.badge.problemHiddenUntil": "تم إخفاء درجات المسألة حتى تاريخ الاستحقاق.",
|
||||
"learning.progress.badge.practiceHiddenUntil": "تم إخفاء درجات التمرين حتى حلول تاريخ الاستحقاق.",
|
||||
"learning.progress.badge.probHidden": "تم إخفاء نتائج المسائل",
|
||||
"learning.progress.badge.practiceHidden": "تم إخفاء درجات التمرين.",
|
||||
"learning.progress.badge.noScores": "لا توجد درجات للمسائل في هذا القسم",
|
||||
"learning.progress.badge.scoreEarned": "حصلت على {earned} من أصل {total} نقاط ممكنة.",
|
||||
"learning.progress.badge.viewCert": "معاينة الشهادة",
|
||||
"learning.progress.badge.downloadCert": "تنزيل شهادتك",
|
||||
"learning.progress.badge.requestCert": "اطلب الشهادة",
|
||||
"learning.progress.badge.opensNewWindow": "الفتح في نافذة متصفح جديدة",
|
||||
"learning.progress.badge.certAlt": "عينة الشهادة",
|
||||
"learning.progress.badge.studioLink": "استعراض عملية التقييم في استوديو",
|
||||
"learning.progress.courseCreditHeader": "الأهلية لمواد المساق الدراسيّة",
|
||||
"learning.progress.creditNotEligible": "أنت غير مؤهل للحصول على الوحدات الدراسية لعدم تحقيقك لمتطلبات الوحدة.",
|
||||
"learning.progress.creditEligible": "لقد حققت متطلبات الوحدة في هذا المساق.",
|
||||
"learning.progress.creditPartialEligible": "لم تحقق الحد الأدنى لمتطلبات الوحدة.",
|
||||
"learning.progress.startVerification": "البدء الآن",
|
||||
"learning.progress.start": "المحاولة مرة أخرى",
|
||||
"learning.progress.notStarted": "لم يبدأ التقييم بعد",
|
||||
"learning.progress.failed": " بيانات غير مستكملة",
|
||||
"learning.progress.notMet": "لم يتحقق",
|
||||
"learning.progress.pending": "قيد الانتظار",
|
||||
"learning.progress.rejected": "مرفوض",
|
||||
"learning.progress.completed": "مُكتمل",
|
||||
"learning.progress.submitted": "تم الإرسال ",
|
||||
"learning.progress.learnMoreCredit": "تعرّف على المزيد عن وحدات المساق",
|
||||
"learning.progress.purchaseCredit": "شراء وحدة مساق",
|
||||
"progress.completion.donut.label": "completed",
|
||||
"progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
|
||||
"progress.completion.tooltip.locked": "Content that you have completed.",
|
||||
"progress.completion.header": "Course completion",
|
||||
"progress.completion.tooltip": "Content that you have access to and have not completed.",
|
||||
"progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
|
||||
"progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
|
||||
"progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
|
||||
"progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
|
||||
"progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
|
||||
"progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
|
||||
"progress.assignmentType": "Assignment type",
|
||||
"progress.footnotes.backToContent": "Back to content",
|
||||
"progress.courseOutline": "Course Outline",
|
||||
"progress.detailedGrades": "Detailed grades",
|
||||
"progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
|
||||
"progress.footnotes.title": "Grade summary footnotes",
|
||||
"progress.gradeSummary": "Grade summary",
|
||||
"progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
|
||||
"progress.score": "Score",
|
||||
"progress.weight": "Weight",
|
||||
"progress.weightedGrade": "Weighted grade",
|
||||
"progress.weightedGradeSummary": "Your current weighted grade summary",
|
||||
"progress.header": "Your progress",
|
||||
"progress.link.studio": "View grading in Studio",
|
||||
"progress.relatedLinks.datesCard.description": "A schedule view of your course due dates and upcoming assignments.",
|
||||
"progress.relatedLinks.datesCard.link": "Dates",
|
||||
"progress.relatedLinks.outlineCard.description": "A birds-eye view of your course content.",
|
||||
"progress.relatedLinks.outlineCard.link": "Course Outline",
|
||||
"progress.relatedLinks": "Related links",
|
||||
"unit.bookmark.button.add.bookmark": "إضافة الصفحة للمفضلة",
|
||||
"unit.bookmark.button.remove.bookmark": "تم وضع علامة مرجعية",
|
||||
"learning.celebration.completed": "لقد أكملت للتو القسم الأول من مساقك.",
|
||||
@@ -240,10 +243,19 @@
|
||||
"learn.contentLock.content.locked": "محتوى مغلق",
|
||||
"learn.contentLock.complete.prerequisite": "يجب استيفاء المتطلبات الأساسية: '{priceqSectionName}' للوصول إلى هذا المحتوى.",
|
||||
"learn.contentLock.goToSection": "انتقل إلى قسم المتطلبات الأساسية",
|
||||
"learn.lockPaywall.title": "الدخول الى المسار الموثَّق",
|
||||
"learn.lockPaywall.content": "التقييمات المقدرة متاحة لمتعلمين المسار الموثق.",
|
||||
"learn.lockPaywall.upgrade.link": "يرجى الترقية لإلغاء القفل ({currencySymbol}{price})",
|
||||
"gatedContent.paragraph.bulletOne": "Earn a {verifiedCertLink} of completion to showcase on your resume",
|
||||
"gatedContent.paragraph.bulletTwo": "Unlock access to all course activities, including {gradedAssignments}",
|
||||
"gatedContent.paragraph.bulletThree": "{fullAccess} to course content and materials, even after the course ends",
|
||||
"gatedContent.paragraph.bulletFour": "Support our {nonProfit} mission at edX",
|
||||
"learn.lockPaywall.title": "Graded assignments are locked",
|
||||
"learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
|
||||
"learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
|
||||
"learn.lockPaywall.example.alt": "عينة الشهادة",
|
||||
"learn.lockPaywall.list.intro": "When you upgrade, you:",
|
||||
"learn.lockPaywall.list.bullet1.linktext": "verified certificate",
|
||||
"learn.lockPaywall.list.bullet2.boldtext": "graded assignments",
|
||||
"learn.lockPaywall.list.bullet3.boldtext": "Full access",
|
||||
"learn.lockPaywall.list.bullet4.boldtext": "non-profit",
|
||||
"learn.loading.content.lock": "جارٍ تحميل رسائل المحتوى المغلق...",
|
||||
"learn.loading.learning.sequence": "جارِ تحميل سلسلة التعلّم...",
|
||||
"learn.course.load.failure": "حدث خطأ أثناء تحميل هذا المساق.",
|
||||
@@ -280,7 +292,7 @@
|
||||
"learn.course.tabs.navigation.overflow.menu": "المزيد...",
|
||||
"learning.offer.screenReaderPrices": "السعر الأصلي: {originalPrice}, سعر الخصم: {discountedPrice}",
|
||||
"learning.upgradeButton.screenReaderInlinePrices": "السعر الأصلي: {originalPrice}",
|
||||
"learning.upgradeButton.buttonText": "قم بالترقية ({pricing})",
|
||||
"learning.upgradeButton.buttonText": "Upgrade for {pricing}",
|
||||
"masquerade-widget.userName.error.generic": "حدث خطأ؛ يرجى المحاولة مرة أخرى.",
|
||||
"masquerade-widget.userName.input.placeholder": "اسم المستخدم أو البريد الإلكتروني",
|
||||
"masquerade-widget.userName.input.label": "عرف كهذا المستخدم",
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
{
|
||||
"learning.accessExpiration.expired": "This learner does not have access to this course. Their access expired on {date}.",
|
||||
"learning.accessExpiration.deadline": "Upgrade by {date} to get unlimited access to the course as long as it exists on the site.",
|
||||
"learning.accessExpiration.header": "Audit Access Expires {date}",
|
||||
"learning.accessExpiration.body": "You lose all access to this course, including your progress, on {date}.",
|
||||
"learning.accessExpiration.expired": "Este estudiante no tiene acceso a este curso. Su acceso expiró el {fecha}.",
|
||||
"learning.accessExpiration.deadline": "Mejora de categoría antes del {fecha} para obtener acceso ilimitado al curso mientras exista en el sitio.",
|
||||
"learning.accessExpiration.header": "El acceso a tomar el curso de forma gratuita expira el {fecha}",
|
||||
"learning.accessExpiration.body": "Pierdes todo acceso a este curso, incluyendo tu progreso, el {fecha}.",
|
||||
"learning.accessExpiration.upgradeNow": "Upgrade now",
|
||||
"learning.enrollment.alert": "Debe estar inscrito en el curso para ver el contenido del curso.",
|
||||
"learning.staff.enrollment.alert": "Estás viendo este curso como instructor y no estás inscrito.",
|
||||
"learning.enrollment.enrollNow.Inline": "Enroll now",
|
||||
"learning.enrollment.enrollNow.Sentence": "Enroll now.",
|
||||
"learning.enrollment.enrollNow.Sentence": "Inscríbete ahora.",
|
||||
"learning.enrollment.success": "¡Te has inscrito exitosamente en este curso!",
|
||||
"learning.logistration.alert": "To see course content, {signIn} or {register}.",
|
||||
"learning.logistration.alert": "Para ver el contenido del curso, {signIn} o {register}.",
|
||||
"learning.offer.upgradeNow": "Upgrade now",
|
||||
"learning.offer.header": "Upgrade by {date} and save {percentage}% [{fullPricing}]",
|
||||
"learning.offer.code": "Use code {code} at checkout!",
|
||||
"learning.offer.header": "Mejora de categoría antes del {date} y ahorra el {percentage} % de [{fullPricing}]",
|
||||
"learning.offer.code": "Utiliza el código {code} en el momento de la compra.",
|
||||
"learn.navigation.course.tabs.label": "Material del Curso",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.navigation.skipNavLink": "Dirígete al contenido principal.",
|
||||
"header.menu.signOut.label": "Sign Out",
|
||||
"datesBanner.datesTabInfoBanner.header": "Hemos creado un cronograma sugerido para ayudarlo a mantenerse encaminado.",
|
||||
"datesBanner.datesTabInfoBanner.body": "Pero no te preocupes—es flexible, por lo que puedes aprender a tu propio ritmo. Si te pierdes las fechas sugeridas, podrás ajustarlas para asegurar que puedes mantenerte al día.",
|
||||
@@ -33,114 +33,117 @@
|
||||
"datesBanner.resetDatesBanner.body": "Para mantenerse en el camino, puede actualizar este cronograma y cambiar las asignaciones vencidas al futuro. No se preocupe: no perderá ninguno de los progresos que haya realizado cuando cambie sus fechas de vencimiento.",
|
||||
"datesBanner.resetDatesBanner.button": "Cambiar fechas de vencimiento",
|
||||
"learning.dates.badge.completed": "Completado",
|
||||
"learning.dates.badge.dueNext": "Due next",
|
||||
"learning.dates.badge.pastDue": "Past due",
|
||||
"learning.dates.badge.dueNext": "Próximo vencimiento",
|
||||
"learning.dates.badge.pastDue": "Vencido",
|
||||
"learning.dates.title": "Important dates",
|
||||
"learning.dates.badge.today": "Hoy",
|
||||
"learning.dates.badge.unreleased": "Not yet released",
|
||||
"learning.dates.badge.verifiedOnly": "Verified only",
|
||||
"learning.dates.badge.verifiedOnly": "Solo verificado",
|
||||
"learning.outline.alert.cert.title": "We are working on generating course certificates.",
|
||||
"learning.outline.alert.cert.when": "Si ha obtenido un certificado, podrá acceder al mismo en {timeRemaining}. También podrás ver tus certificados en tu {profileLink}.",
|
||||
"learning.outline.alert.cert.profile": "Learner Profile",
|
||||
"learning.outline.alert.end.short": "This course is ending {timeRemaining} at {courseEndTime}.",
|
||||
"learning.outline.alert.end.long": "Course starts {timeRemaining} on {courseStartDate}.",
|
||||
"learning.outline.alert.start.short": "Course starts {timeRemaining} at {courseStartTime}.",
|
||||
"learning.outline.alert.end.calendar": "Don’t forget to add a calendar reminder!",
|
||||
"learning.outline.alert.end.short": "Este curso acaba en {timeRemaining} a la/s {courseEndTime}.",
|
||||
"learning.outline.alert.end.long": "El curso comienza en {timeRemaining} el {courseStartDate}.",
|
||||
"learning.outline.alert.start.short": "El curso comienza en {timeRemaining} a la/s {courseStartTime}.",
|
||||
"learning.outline.alert.end.calendar": "No olvides añadir un recordatorio en el calendario.",
|
||||
"alert.enroll": "You must be enrolled in the course to see course content.",
|
||||
"learning.privateCourse.signInOrRegister": "{signIn} or {register} and then enroll in this course.",
|
||||
"learning.privateCourse.canEnroll": "{enrollNow} to access the full course.",
|
||||
"learning.privateCourse.signInOrRegister": "{sign} o {register} y después inscríbete en este curso.",
|
||||
"learning.privateCourse.canEnroll": "{enrollNow} para acceder a la totalidad del curso.",
|
||||
"learning.outline.dates.all": "Ver todas las fechas del curso",
|
||||
"learning.outline.collapseAll": "Collapse all",
|
||||
"learning.outline.collapseAll": "Colapsar todo",
|
||||
"learning.outline.completedAssignment": "Completed",
|
||||
"learning.outline.completedSection": "Sección completada",
|
||||
"learning.outline.dates": "Próximas fechas",
|
||||
"learning.outline.editGoal": "Edit goal",
|
||||
"learning.outline.expandAll": "Expand all",
|
||||
"learning.outline.goal": "Goal",
|
||||
"learning.outline.editGoal": "Editar objetivo",
|
||||
"learning.outline.expandAll": "Expandir todo",
|
||||
"learning.outline.goal": "Objetivo",
|
||||
"learning.outline.goalUnsure": "Not sure yet",
|
||||
"learning.outline.handouts": "Materiales del curso",
|
||||
"learning.outline.incompleteAssignment": "Incomplete",
|
||||
"learning.outline.incompleteSection": "Incomplete section",
|
||||
"learning.outline.incompleteSection": "Sección incompleta",
|
||||
"learning.outline.learnMore": "Learn More",
|
||||
"learning.outline.altText.openSection": "Open",
|
||||
"learning.outline.resume": "Resume course",
|
||||
"learning.outline.setGoal": "To start, set a course goal by selecting the option below that best describes your learning plan.",
|
||||
"learning.outline.resume": "Continuar con el curso",
|
||||
"learning.outline.setGoal": "Para empezar, establece un objetivo del curso seleccionando la opción situada más abajo que mejor describa tu plan de aprendizaje.",
|
||||
"learning.outline.start": "Start Course",
|
||||
"learning.outline.tools": "Herramientas del Curso",
|
||||
"learning.outline.upgradeButton": "Upgrade ({symbol}{price})",
|
||||
"learning.outline.upgradeButton": "Mejora ({symbol}{price})",
|
||||
"learning.outline.upgradeTitle": "Pursue a verified certificate",
|
||||
"learning.outline.certificateAlt": "Example Certificate",
|
||||
"learning.outline.certificateAlt": "Certificado de ejemplo",
|
||||
"learning.outline.welcomeMessage": "Mensaje de Bienvenida",
|
||||
"learning.outline.welcomeMessageShowMoreButton": "Mostrar más",
|
||||
"learning.outline.welcomeMessageShowLessButton": "Mostrar menos",
|
||||
"learning.outline.goalWelcome": "Welcome to",
|
||||
"learning.proctoringPanel.header": "This course contains proctored exams",
|
||||
"learning.proctoringPanel.header": "Este curso contiene exámenes supervisados",
|
||||
"learning.proctoringPanel.status.notStarted": "Not Started",
|
||||
"learning.proctoringPanel.status.started": "Started",
|
||||
"learning.proctoringPanel.status.submitted": "Submitted",
|
||||
"learning.proctoringPanel.status.verified": "Verified",
|
||||
"learning.proctoringPanel.status.rejected": "Rejected",
|
||||
"learning.proctoringPanel.status.error": "Error",
|
||||
"learning.proctoringPanel.status.otherCourseApproved": "Approved in Another Course",
|
||||
"learning.proctoringPanel.status.expiringSoon": "Expiring Soon",
|
||||
"learning.proctoringPanel.status": "Current Onboarding Status:",
|
||||
"learning.proctoringPanel.message.notStarted": "You have not started your onboarding exam.",
|
||||
"learning.proctoringPanel.message.started": "You have started your onboarding exam.",
|
||||
"learning.proctoringPanel.message.submitted": "You have submitted your onboarding exam.",
|
||||
"learning.proctoringPanel.message.verified": "You can now take proctored exams in this course.",
|
||||
"learning.proctoringPanel.message.rejected": "Your onboarding exam has been rejected. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.error": "An error has occurred during your onboarding exam. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, it is highly recommended that you complete this course’s onboarding exam in order to ensure that your device still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.expiringSoon": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.",
|
||||
"learning.proctoringPanel.generalInfo": "You must complete the onboarding process prior to taking any proctored exam. ",
|
||||
"learning.proctoringPanel.generalInfoSubmitted": "Your submitted profile is in review.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review, including identity verification, can take 2+ business days.",
|
||||
"learning.proctoringPanel.onboardingButton": "Complete Onboarding",
|
||||
"learning.proctoringPanel.onboardingButtonNotOpen": "Onboarding Opens: {releaseDate}",
|
||||
"learning.proctoringPanel.reviewRequirementsButton": "Review instructions and system requirements",
|
||||
"learning.outline.sequence-due": "{description} due {assignmentDue}",
|
||||
"learning.progress.badge.problem": "Problem Scores: ",
|
||||
"learning.progress.badge.practice": "Practice Scores: ",
|
||||
"learning.progress.badge.problemHiddenUntil": "Problem scores are hidden until the due date.",
|
||||
"learning.progress.badge.practiceHiddenUntil": "Practice scores are hidden until the due date.",
|
||||
"learning.progress.badge.probHidden": "problemlem scores are hidden.",
|
||||
"learning.progress.badge.practiceHidden": "Practice scores are hidden.",
|
||||
"learning.progress.badge.noScores": "No problem scores in this section.",
|
||||
"learning.progress.badge.scoreEarned": "{earned} of {total} possible points",
|
||||
"learning.progress.badge.viewCert": "View Certificate",
|
||||
"learning.progress.badge.downloadCert": "Download Your Certificate",
|
||||
"learning.progress.badge.requestCert": "Request Certificate",
|
||||
"learning.progress.badge.opensNewWindow": "Opens in a new browser window",
|
||||
"learning.progress.badge.certAlt": "Example Certificate",
|
||||
"learning.progress.badge.studioLink": "View grading in Studio",
|
||||
"learning.progress.courseCreditHeader": "Course Credit Eligibility",
|
||||
"learning.progress.creditNotEligible": "You are not eligible for course credit because you have not met the requirements for credit.",
|
||||
"learning.progress.creditEligible": "You have met the requirements for credit in this course.",
|
||||
"learning.progress.creditPartialEligible": "You have not met the minimum requirements for credit.",
|
||||
"learning.progress.startVerification": "Start now",
|
||||
"learning.progress.start": "Try again",
|
||||
"learning.progress.notStarted": "Not started",
|
||||
"learning.progress.failed": "Incomplete",
|
||||
"learning.progress.notMet": "Not met",
|
||||
"learning.progress.pending": "Pending",
|
||||
"learning.progress.rejected": "Rejected",
|
||||
"learning.progress.completed": "Completed",
|
||||
"learning.progress.submitted": "Submitted",
|
||||
"learning.progress.learnMoreCredit": "Learn more about course credit",
|
||||
"learning.progress.purchaseCredit": "Purchase course credit",
|
||||
"learning.proctoringPanel.status.otherCourseApproved": "Aprobado en otro curso",
|
||||
"learning.proctoringPanel.status.expiringSoon": "Expira pronto",
|
||||
"learning.proctoringPanel.status": "Estado actual de la integración:",
|
||||
"learning.proctoringPanel.message.notStarted": "No has comenzado tu examen de integración.",
|
||||
"learning.proctoringPanel.message.started": "Has comenzado tu examen de integración.",
|
||||
"learning.proctoringPanel.message.submitted": "Has enviado tu examen de integración.",
|
||||
"learning.proctoringPanel.message.verified": "Ahora puedes realizar exámenes supervisados en este curso.",
|
||||
"learning.proctoringPanel.message.rejected": "Tu examen de integración ha sido rechazado. Vuelve a intentar la integración.",
|
||||
"learning.proctoringPanel.message.error": "Se ha producido un error durante tu examen de integración. Vuelve a intentar la integración.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "You are eligible to take proctored exams in this course.",
|
||||
"learning.proctoringPanel.detail.otherCourseApproved": "If your device has changed, we recommend that you complete this course's onboarding exam in order to ensure that your setup still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.expiringSoon": "Tu perfil de incorporación se ha aprobado en otro curso, por lo que puedes realizar exámenes supervisados en este curso. Sin embargo, tu estado de integración expirará pronto. Vuelve a completar el proceso de integración para asegurarte de que podrás seguir realizando exámenes supervisados.",
|
||||
"learning.proctoringPanel.generalInfo": "Debes completar el proceso de integración antes de realizar cualquier examen supervisado. ",
|
||||
"learning.proctoringPanel.generalInfoSubmitted": "Tu perfil enviado está en revisión.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review can take 2+ business days.",
|
||||
"learning.proctoringPanel.onboardingButton": "Completar la integración",
|
||||
"learning.proctoringPanel.onboardingPracticeButton": "View Onboarding Exam",
|
||||
"learning.proctoringPanel.onboardingButtonNotOpen": "Apertura de la integración: {releaseDate}",
|
||||
"learning.proctoringPanel.reviewRequirementsButton": "Revisar las instrucciones y los requisitos del sistema",
|
||||
"learning.outline.sequence-due": "Fecha límite para {description}: {assignmentDue}",
|
||||
"progress.completion.donut.label": "completed",
|
||||
"progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
|
||||
"progress.completion.tooltip.locked": "Content that you have completed.",
|
||||
"progress.completion.header": "Course completion",
|
||||
"progress.completion.tooltip": "Content that you have access to and have not completed.",
|
||||
"progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
|
||||
"progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
|
||||
"progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
|
||||
"progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
|
||||
"progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
|
||||
"progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
|
||||
"progress.assignmentType": "Assignment type",
|
||||
"progress.footnotes.backToContent": "Back to content",
|
||||
"progress.courseOutline": "Course Outline",
|
||||
"progress.detailedGrades": "Detailed grades",
|
||||
"progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
|
||||
"progress.footnotes.title": "Grade summary footnotes",
|
||||
"progress.gradeSummary": "Grade summary",
|
||||
"progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
|
||||
"progress.score": "Score",
|
||||
"progress.weight": "Weight",
|
||||
"progress.weightedGrade": "Weighted grade",
|
||||
"progress.weightedGradeSummary": "Your current weighted grade summary",
|
||||
"progress.header": "Your progress",
|
||||
"progress.link.studio": "View grading in Studio",
|
||||
"progress.relatedLinks.datesCard.description": "A schedule view of your course due dates and upcoming assignments.",
|
||||
"progress.relatedLinks.datesCard.link": "Dates",
|
||||
"progress.relatedLinks.outlineCard.description": "A birds-eye view of your course content.",
|
||||
"progress.relatedLinks.outlineCard.link": "Course Outline",
|
||||
"progress.relatedLinks": "Related links",
|
||||
"unit.bookmark.button.add.bookmark": "Marcar esta página",
|
||||
"unit.bookmark.button.remove.bookmark": "Página marcada",
|
||||
"learning.celebration.completed": "Acabas de completar la primera sección de tu curso.",
|
||||
"learning.celebration.congrats": "¡Felicitaciones!",
|
||||
"learning.celebration.earned": "!Lo has logrado!",
|
||||
"learning.celebration.emailSubject": "I'm on my way to completing {title} online with {platform}!",
|
||||
"learning.celebration.emailSubject": "¡Estoy por completar {title} en línea con {platform}!",
|
||||
"learning.celebration.forward": "Continúa adelante",
|
||||
"learning.celebration.share": "Toma un momento para celebrar y compartir tu progreso. ",
|
||||
"learning.celebration.social": "I’m on my way to completing {title} online with {platform}. What are you spending your time learning?",
|
||||
"learning.celebration.social": "Estoy por completar {title} en línea con {plataform}. ¿A qué dedicas tu tiempo para aprender?",
|
||||
"calculator.instructions.button.label": "Instrucciones para la Calculadora",
|
||||
"calculator.instructions": "For detailed information, see the {expressions_link}.",
|
||||
"calculator.instructions": "Para obtener información detallada, consulta: {expressions_link}.",
|
||||
"calculator.instructions.support.title": "Help Center",
|
||||
"calculator.instructions.useful.tips": "Useful tips:",
|
||||
"calculator.instructions.useful.tips": "Consejos útiles:",
|
||||
"calculator.hint1": "Usa paréntesis () para hacer mas claras las expresiones. Puedes usar paréntesis dentro de otros paréntesis.",
|
||||
"calculator.hint2": "No utilizar espacios en las expresiones.",
|
||||
"calculator.hint3": "Para constantes, indica explícitamente la multiplicación (Ejemplo: 5*c).",
|
||||
@@ -154,144 +157,153 @@
|
||||
"calculator.instruction.table.to.use.numbers.type2": "Fracciones",
|
||||
"calculator.instruction.table.to.use.numbers.type3": "Números decimales",
|
||||
"calculator.instruction.table.to.use.operators": "Operadores",
|
||||
"calculator.instruction.table.to.use.operators.type1": "(add, subtract, multiply, divide)",
|
||||
"calculator.instruction.table.to.use.operators.type2": "(raise to a power)",
|
||||
"calculator.instruction.table.to.use.operators.type3": "(parallel resistors)",
|
||||
"calculator.instruction.table.to.use.operators.type1": "(sumar, restar, multiplicar, dividir)",
|
||||
"calculator.instruction.table.to.use.operators.type2": "(subir a una potencia)",
|
||||
"calculator.instruction.table.to.use.operators.type3": "(resistencias en paralelo)",
|
||||
"calculator.instruction.table.to.use.constants": "Constantes",
|
||||
"calculator.instruction.table.to.use.affixes": "Añadidos",
|
||||
"calculator.instruction.table.to.use.affixes.type": "Percent sign (%) and metric affixes ({affixes})",
|
||||
"calculator.instruction.table.to.use.affixes.type": "Signo de porcentaje (%) y afijos de medición ({affixes})",
|
||||
"calculator.instruction.table.to.use.basic.functions": "Funciones basicas",
|
||||
"calculator.instruction.table.to.use.trig.functions": "Funciones trigonometricas",
|
||||
"calculator.instruction.table.to.use.scientific.notation": "Notación Científica",
|
||||
"calculator.instruction.table.to.use.scientific.notation.type1": "{exponentSyntax} and the exponent",
|
||||
"calculator.instruction.table.to.use.scientific.notation.type2": "{notationSyntax} notation",
|
||||
"calculator.instruction.table.to.use.scientific.notation.type3": "{notationSyntax} and the exponent",
|
||||
"calculator.instruction.table.to.use.scientific.notation.type1": "{exponentSyntax} y el exponente",
|
||||
"calculator.instruction.table.to.use.scientific.notation.type2": "notación {notationSyntax}",
|
||||
"calculator.instruction.table.to.use.scientific.notation.type3": "{notationSyntax} y el exponente",
|
||||
"calculator.button.label": "Calculadora",
|
||||
"calculator.input.field.label": "Entrada para la calculadora",
|
||||
"calculator.submit.button.label": "Calcular",
|
||||
"calculator.result.field.label": "Calculator Result",
|
||||
"calculator.result.field.label": "Resultado de la calculadora",
|
||||
"calculator.result.field.placeholder": "Resultado",
|
||||
"notes.button.show": "Mostrar Notas",
|
||||
"notes.button.hide": "Ocultar Notas",
|
||||
"courseExit.catalogSearchSuggestion": "Looking to learn more? {searchOurCatalogLink} to find more courses and programs to explore.",
|
||||
"courseCelebration.certificateBody.available": "\n Showcase your accomplishment on LinkedIn or your resumé today.\n You can download your certificate now and access it any time from your\n {dashboardLink} and {profileLink}.",
|
||||
"courseCelebration.certificateBody.notAvailable.endDate": "After this course officially ends on {endDate}, you will receive an\n email notification with your certificate. Once you have your certificate, be sure\n to showcase your accomplishment on LinkedIn or your resumé.",
|
||||
"courseCelebration.certificateBody.notAvailable.accessCertificate": "You will be able to access your certificate any time from your\n {dashboardLink} and {profileLink}.",
|
||||
"courseCelebration.certificateBody.unverified": "In order to generate a certificate, you must complete ID verification.\n {idVerificationSupportLink} now.",
|
||||
"courseCelebration.certificateBody.upgradable": "It’s not too late to upgrade. For {price} you will unlock access to all graded\n assignments in this course. Upon completion, you will receive a verified certificate which is a\n valuable credential to improve your job prospects and advance your career, or highlight your\n certificate in school applications.",
|
||||
"courseCelebration.upgradeDiscountCodePrompt": "Use code {code} at checkout for {percent}% off!",
|
||||
"courseCelebration.recommendations.heading": "Keep building your skills with these courses!",
|
||||
"courseExit.catalogSearchSuggestion": "¿Quieres saber más? {searchOurCatalogLink} para buscar más cursos y programas por explorar.",
|
||||
"courseCelebration.certificateBody.available": "\n Muestra tu logro en LinkedIn o en tu currículum hoy mismo.\n Puedes descargar tu certificado ahora y acceder a él en cualquier momento desde tu\n {dashboardLink} y {profileLink}.",
|
||||
"courseCelebration.certificateBody.notAvailable.endDate": "Después de que este curso termine oficialmente el {endDate}, recibirás una\n notificación por correo electrónico con tu certificado. Una vez que tengas tu certificado, asegúrate\n de mostrar tu logro en LinkedIn o en tu currículum.",
|
||||
"courseCelebration.certificateBody.notAvailable.accessCertificate": "Podrás acceder a tu certificado en cualquier momento desde tu\n {dashboardLink} y {profileLink}.",
|
||||
"courseCelebration.certificateBody.unverified": "Para generar un certificado, debes completar la verificación de ID.\n {idVerificationSupportLink} ahora.",
|
||||
"courseCelebration.certificateBody.upgradable": "No es demasiado tarde para mejorar de categoría. Por {price}, obtendrás acceso a todas las asignaciones\n calificadas de este curso. Al terminar, recibirás un certificado verificado que es una\n valiosa credencial para mejorar tus perspectivas de trabajo y avanzar en tu carrera, o puedes usar dicho\n certificado para destacarlo en solicitudes universitarias.",
|
||||
"courseCelebration.upgradeDiscountCodePrompt": "Utiliza el código {code} en el momento de la compra para obtener un {percent} % de descuento.",
|
||||
"courseCelebration.recommendations.heading": "¡Sigue desarrollando tus habilidades con estos cursos!",
|
||||
"courseCelebration.recommendations.formatting.list_join": "{style, select, punctuation {, } conjunction { {sp}and } other { }}",
|
||||
"courseCelebration.recommendations.browse_catalog": "Explore more courses",
|
||||
"courseCelebration.recommendations.loading_recommendations": "Loading recommendations",
|
||||
"courseCelebration.recommendations.card.schools.label": "Schools and Partners",
|
||||
"courseCelebration.recommendations.browse_catalog": "Explorar más cursos",
|
||||
"courseCelebration.recommendations.loading_recommendations": "Cargando recomendaciones",
|
||||
"courseCelebration.recommendations.card.schools.label": "Universidades y socios",
|
||||
"courseCelebration.recommendations.label": "Course",
|
||||
"courseCelebration.dashboardInfo": "You can access this course and its materials on your {dashboardLink}.",
|
||||
"courseExit.programs.applyForCredit": "Apply for credit",
|
||||
"courseCelebration.certificateHeader.downloadable": "Your certificate is available!",
|
||||
"courseCelebration.dashboardInfo": "Puedes acceder a este curso y a sus materiales en tu {dashboardLink}.",
|
||||
"courseExit.programs.applyForCredit": "Solicitar crédito",
|
||||
"courseCelebration.certificateHeader.downloadable": "¡Tu certificado está disponible!",
|
||||
"courseCelebration.certificateHeader.notAvailable": "Your certificate will be available soon!",
|
||||
"courseCelebration.certificateHeader.unverified": "You must complete verification to receive your certificate.",
|
||||
"courseCelebration.certificateHeader.unverified": "Debes completar la verificación para recibir tu certificado.",
|
||||
"courseCelebration.certificateHeader.requestable": "Congratulations, you qualified for a certificate!",
|
||||
"courseCelebration.certificateHeader.upgradable": "Upgrade to pursue a verified certificate",
|
||||
"courseCelebration.certificateImage": "Sample certificate",
|
||||
"courseCelebration.certificateHeader.upgradable": "Mejora de categoría para obtener un certificado verificado",
|
||||
"courseCelebration.certificateImage": "Modelo de certificado",
|
||||
"courseCelebration.congratulationsHeader": "Congratulations!",
|
||||
"courseCelebration.congratulationsImage": "Four people raising their hands in celebration",
|
||||
"courseExit.courseInProgressDescription": "It looks like there is more content in this course that will be released in the future. Look out for email updates or check back on your course for when this content will be available.",
|
||||
"courseExit.courseInProgressHeader": "More content is coming soon!",
|
||||
"courseCelebration.congratulationsImage": "Cuatro personas levantando las manos en señal de celebración",
|
||||
"courseExit.courseInProgressDescription": "Parece que hay más contenido en este curso que se publicará en el futuro. Presta atención a las novedades por correo electrónico o consulta tu curso para saber cuándo estará disponible este contenido.",
|
||||
"courseExit.courseInProgressHeader": "¡Pronto habrá más contenido!",
|
||||
"courseExit.dashboardLink": "Dashboard",
|
||||
"courseCelebration.downloadButton": "Download my certificate",
|
||||
"courseExit.endOfCourseDescription": "Unfortunately, you are not currently eligible for a certificate. You need to receive a passing grade to be eligible for a certificate.",
|
||||
"courseExit.endOfCourseHeader": "You’ve reached the end of the course!",
|
||||
"courseExit.endOfCourseTitle": "End of Course",
|
||||
"courseExit.idVerificationSupportLink": "Learn more about ID verification",
|
||||
"courseCelebration.downloadButton": "Descargar mi certificado",
|
||||
"courseExit.endOfCourseDescription": "Lamentablemente, no puedes obtener un certificado en este momento. Debes recibir una calificación aprobatoria para poder obtener un certificado.",
|
||||
"courseExit.endOfCourseHeader": "¡Has llegado al fin del curso!",
|
||||
"courseExit.endOfCourseTitle": "Fin del curso",
|
||||
"courseExit.idVerificationSupportLink": "Más información sobre la verificación de ID",
|
||||
"courseCelebration.linkedinAddToProfileButton": "Add to LinkedIn profile",
|
||||
"courseExit.programs.microBachelors.learnMore": "Learn more about how your MicroBachelors credential can be applied for credit.",
|
||||
"courseExit.programs.microMasters.learnMore": "Learn more about the process of applying MicroMasters certificates to Master’s degrees.",
|
||||
"courseExit.programs.microMasters.mastersMessage": "If you’re interested in using your MicroMasters certificate towards a Master’s program, you can get started today!",
|
||||
"courseExit.programs.microBachelors.learnMore": "Obtén más información sobre cómo puedes solicitar crédito con tu credencial de MicroBachelors.",
|
||||
"courseExit.programs.microMasters.learnMore": "Obtén más información sobre el proceso de solicitud de títulos de maestría con certificados de MicroMasters.",
|
||||
"courseExit.programs.microMasters.mastersMessage": "Si tienes interés en utilizar tu certificado de MicroMasters para un programa de maestría, ¡puedes empezar hoy mismo!",
|
||||
"learn.sequence.navigation.complete.button": "Complete the course",
|
||||
"courseExit.nextButton.endOfCourse": "Next (end of course)",
|
||||
"courseExit.nextButton.endOfCourse": "Siguiente (fin del curso)",
|
||||
"courseExit.profileLink": "Profile",
|
||||
"courseExit.programs.lastCourse": "You have completed the last course in {title}!",
|
||||
"courseCelebration.requestCertificateBodyText": "In order to access your certificate, request it below.",
|
||||
"courseCelebration.requestCertificateButton": "Request certificate",
|
||||
"courseExit.programs.lastCourse": "¡Has completado el último curso de {title}!",
|
||||
"courseCelebration.requestCertificateBodyText": "Para acceder a tu certificado, solicítalo a continuación.",
|
||||
"courseCelebration.requestCertificateButton": "Solicitar certificado",
|
||||
"courseExit.searchOurCatalogLink": "Search our catalog",
|
||||
"courseCelebration.shareHeader": "You have completed your course. Share your success on social media or email.",
|
||||
"courseExit.social.shareCompletionMessage": "I just completed {title} with {platform}!",
|
||||
"courseCelebration.shareHeader": "Has completado tu curso. Comparte tu éxito en las redes sociales o por correo electrónico.",
|
||||
"courseExit.social.shareCompletionMessage": "¡Acabo de completar {title} con {plataform}!",
|
||||
"courseExit.upgradeButton": "Upgrade now",
|
||||
"courseExit.upgradeLink": "upgrade now",
|
||||
"courseCelebration.verificationPending": "Your ID verification is pending and your certificate will be available once approved.",
|
||||
"courseExit.verifiedCertificateSupportLink": "Learn more about verified certificates",
|
||||
"courseCelebration.verifyIdentityButton": "Verify ID now",
|
||||
"courseCelebration.viewCertificateButton": "View my certificate",
|
||||
"courseExit.viewCourseScheduleButton": "View course schedule",
|
||||
"courseExit.viewCoursesButton": "View my courses",
|
||||
"courseExit.viewGradesButton": "View grades",
|
||||
"courseExit.programCompletion.dashboardMessage": "To view your certificate status, check the Programs section of your {programLink}.",
|
||||
"courseExit.upgradeFootnote": "Access to this course and its materials are available on your dashboard until {expirationDate}. To extend access, {upgradeLink}.",
|
||||
"courseExit.upgradeLink": "mejora de categoría ahora",
|
||||
"courseCelebration.verificationPending": "Su verificación de ID está pendiente y su certificado estará disponible una vez que se haya aprobado.",
|
||||
"courseExit.verifiedCertificateSupportLink": "Más información sobre los certificados verificados",
|
||||
"courseCelebration.verifyIdentityButton": "Verificar ID ahora",
|
||||
"courseCelebration.viewCertificateButton": "Ver mi certificado",
|
||||
"courseExit.viewCourseScheduleButton": "Ver el programa del curso",
|
||||
"courseExit.viewCoursesButton": "Ver mis cursos",
|
||||
"courseExit.viewGradesButton": "Ver calificaciones",
|
||||
"courseExit.programCompletion.dashboardMessage": "Para ver el estado de tu certificado, consulta la sección Programas de tu {programLink}.",
|
||||
"courseExit.upgradeFootnote": "El acceso a este curso y a sus materiales estará disponible en tu panel principal hasta el {expirationDate}. Para extender el acceso, {upgradeLink}.",
|
||||
"learn.course.license.allRightsReserved.text": "Todos los Derechos están Reservados",
|
||||
"learn.course.license.creativeCommons.terms.preamble": "Creative Commons licensed content, with terms as follows:",
|
||||
"learn.course.license.creativeCommons.terms.preamble": "Contenido con licencia Creative Commons, con las siguientes condiciones:",
|
||||
"learn.course.license.creativeCommons.terms.by": "Atribución",
|
||||
"learn.course.license.creativeCommons.terms.nc": "No comercial",
|
||||
"learn.course.license.creativeCommons.terms.nd": "No derivados",
|
||||
"learn.course.license.creativeCommons.terms.sa": "Compartir por igual",
|
||||
"learn.course.license.creativeCommons.terms.zero": "No terms",
|
||||
"learn.course.license.creativeCommons.terms.zero": "Sin condiciones",
|
||||
"learn.course.license.creativeCommons.text": "Algunos Derechos Reservados",
|
||||
"learn.breadcrumb.navigation.course.home": "Curso",
|
||||
"learn.contentLock.content.locked": "Contenido Bloqueado",
|
||||
"learn.contentLock.complete.prerequisite": "Debe completar el prerrequisito: '{prereqSectionName}'para acceder a este contenido.",
|
||||
"learn.contentLock.goToSection": "Ir a la Sección de Prerrequisitos",
|
||||
"learn.lockPaywall.title": "Acceso a modalidad verificada",
|
||||
"learn.lockPaywall.content": "Las tareas calificables están disponibles para los estudiantes verificados.",
|
||||
"learn.lockPaywall.upgrade.link": "Upgrade to unlock ({currencySymbol}{price})",
|
||||
"learn.lockPaywall.example.alt": "Example Certificate",
|
||||
"learn.loading.content.lock": "Loading locked content messaging...",
|
||||
"learn.loading.learning.sequence": "Loading learning sequence...",
|
||||
"learn.course.load.failure": "There was an error loading this course.",
|
||||
"learn.sequence.no.content": "There is no content here.",
|
||||
"gatedContent.paragraph.bulletOne": "Obtén un {verifiedCertLink} de finalización para compartirlo en tu currículum",
|
||||
"gatedContent.paragraph.bulletTwo": "Desbloquea el acceso a todas las actividades del curso, incluidas las {gradedAssignments}",
|
||||
"gatedContent.paragraph.bulletThree": "{fullAccess} al contenido y los materiales del curso, incluso después de que finalice",
|
||||
"gatedContent.paragraph.bulletFour": "Apoya nuestra {nonProfit} en edX",
|
||||
"learn.lockPaywall.title": "Las tareas calificadas están bloqueadas",
|
||||
"learn.lockPaywall.content": "Cámbiate a la opción verificada para obtener acceso a funciones bloqueadas como esta y aprovechar al máximo tu curso.",
|
||||
"learn.lockPaywall.upgrade.link": "Opción verificada {currencySymbol}{price}",
|
||||
"learn.lockPaywall.example.alt": "Certificado de ejemplo",
|
||||
"learn.lockPaywall.list.intro": "Cuando te cambias a la opción verificada, tú:",
|
||||
"learn.lockPaywall.list.bullet1.linktext": "certificado verificado",
|
||||
"learn.lockPaywall.list.bullet2.boldtext": "tareas calificadas",
|
||||
"learn.lockPaywall.list.bullet3.boldtext": "Acceso completo",
|
||||
"learn.lockPaywall.list.bullet4.boldtext": "misión sin fines de lucro",
|
||||
"learn.loading.content.lock": "Cargando la mensajería de contenido bloqueado...",
|
||||
"learn.loading.learning.sequence": "Cargando la secuencia de aprendizaje...",
|
||||
"learn.course.load.failure": "Hubo un error al cargar este curso.",
|
||||
"learn.sequence.no.content": "Aquí no hay contenido.",
|
||||
"learn.sequence.navigation.next.button": "Siguiente",
|
||||
"learn.sequence.navigation.previous.button": "Anterior",
|
||||
"learn.course.sequence.navigation.mobile.menu": "{current} of {total}",
|
||||
"learn.redirect.interstitial.message": "Redirecting...",
|
||||
"learn.course.sequence.navigation.mobile.menu": "{current} de {total}",
|
||||
"learn.redirect.interstitial.message": "Redirigiendo...",
|
||||
"learn.loading.error": "Error: {error}",
|
||||
"learning.celebration.emailBody": "What are you spending your time learning?",
|
||||
"learning.social.shareEmail": "Share your progress via email.",
|
||||
"learning.social.shareService": "Share your progress on {service}.",
|
||||
"learning.celebration.emailBody": "¿A qué dedicas tu tiempo para aprender?",
|
||||
"learning.social.shareEmail": "Comparte tus progreso por correo electrónico.",
|
||||
"learning.social.shareService": "Comparte tu progreso en {service}.",
|
||||
"coursesock.upsell.heading": "Saber más sobre Certificados Verificados",
|
||||
"coursesock.upsell.verifiedcert": "{siteName} Verified Certificate",
|
||||
"coursesock.upsell.verifiedcert": "Certificado verificado de {siteName}",
|
||||
"coursesock.upsell.why": "¿Por qué actualizar?",
|
||||
"coursesock.upsell.reason1": "Prueba oficial de curso completado.",
|
||||
"coursesock.upsell.reason2": "Certificado fácil de compartir.",
|
||||
"coursesock.upsell.reason3": "Motivador comprobado para completar el curso.",
|
||||
"coursesock.upsell.reason4": "Certificate purchases help {siteName} continue to offer free courses",
|
||||
"coursesock.upsell.reason4": "Las compras de certificados ayudan a {siteName} a seguir ofreciendo cursos gratuitos",
|
||||
"coursesock.upsell.howtitle": "Cómo funciona",
|
||||
"coursesock.upsell.how1": "Pague la cuota para la actualización a certificado verificado",
|
||||
"coursesock.upsell.how2": "Verifique su identidad con una cámara web y un documento de identificación oficial",
|
||||
"coursesock.upsell.how3": "Estudie mucho y apruebe el curso",
|
||||
"coursesock.upsell.how4": "Comparta su certificado con amigos, empleadores y otros",
|
||||
"coursesock.upsell.storytitle": "{siteName} Learner Stories",
|
||||
"coursesock.upsell.story1": "My certificate has helped me showcase my knowledge on my\n resume - I feel like this certificate could really help me land\n my dream job!",
|
||||
"coursesock.upsell.learner": "{name}, {siteName} Learner",
|
||||
"coursesock.upsell.story2": "I wanted to include a verified certificate on my resume and my profile to\n illustrate that I am working towards this goal I have and that I have\n achieved something while I was unemployed.",
|
||||
"coursesock.upsell.storytitle": "Historias de estudiantes de {siteName}",
|
||||
"coursesock.upsell.story1": "Mi certificado me ha ayudado a mostrar mis conocimientos en mi\n currículum; siento que este certificado podría ayudarme a conseguir\n el trabajo de mis sueños.",
|
||||
"coursesock.upsell.learner": "{name}, estudiante de {siteName}",
|
||||
"coursesock.upsell.story2": "Quería incluir un certificado verificado en mi currículum y en mi perfil para\n demostrar que estoy trabajando para alcanzar mi objetivo y que he\n logrado algo mientras estaba desempleado.",
|
||||
"general.altText.close": "Close",
|
||||
"learning.logistration.register": "registrarse",
|
||||
"general.register.sentenceCase": "Register",
|
||||
"learning.logistration.login": "iniciar sesión",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"learn.course.tabs.navigation.overflow.menu": "More...",
|
||||
"learning.offer.screenReaderPrices": "Original price: {originalPrice}, discount price: {discountedPrice}",
|
||||
"learning.upgradeButton.screenReaderInlinePrices": "Original price: {originalPrice}",
|
||||
"learning.upgradeButton.buttonText": "Upgrade ({pricing})",
|
||||
"masquerade-widget.userName.error.generic": "An error has occurred; please try again.",
|
||||
"masquerade-widget.userName.input.placeholder": "Username or email",
|
||||
"masquerade-widget.userName.input.label": "Masquerade as this user",
|
||||
"learn.course.tabs.navigation.overflow.menu": "Más...",
|
||||
"learning.offer.screenReaderPrices": "Precio original: {originalPrice}; precio con descuento: {discountedPrice}",
|
||||
"learning.upgradeButton.screenReaderInlinePrices": "Precio original: {originalPrice}",
|
||||
"learning.upgradeButton.buttonText": "Upgrade for {pricing}",
|
||||
"masquerade-widget.userName.error.generic": "Se ha producido un error. Inténtalo de nuevo.",
|
||||
"masquerade-widget.userName.input.placeholder": "Nombre de usuario o correo electrónico",
|
||||
"masquerade-widget.userName.input.label": "Hazte pasar por este usuario",
|
||||
"learning.streakCelebration.header": "day streak",
|
||||
"learning.streakCelebration.body": "Keep it up, you’re on a roll!",
|
||||
"learning.streakCelebration.button": "Keep it up",
|
||||
"learning.streakCelebration.buttonSrOnly": "Close modal and continue",
|
||||
"learning.streakCelebration.factoidABoldedSection": "are 20x more likely to pass their course",
|
||||
"learning.streakCelebration.factoidBBoldedSection": "complete 5x as much course content on average",
|
||||
"learning.streakcelebration.factoida": "Users who learn {streak_length} days in a row {bolded_section} than those who don’t.",
|
||||
"learning.streakcelebration.factoidb": "Users who learn {streak_length} days in a row {bolded_section} vs. those who don’t.",
|
||||
"learning.loading.failure": "There was an error loading this course.",
|
||||
"learning.loading": "Loading course page…"
|
||||
"learning.streakCelebration.body": "Sigue así, ¡estás de buena racha!",
|
||||
"learning.streakCelebration.button": "Sigue así",
|
||||
"learning.streakCelebration.buttonSrOnly": "Cerrar el modal y continuar",
|
||||
"learning.streakCelebration.factoidABoldedSection": "tienen 20 veces más probabilidades de aprobar el curso",
|
||||
"learning.streakCelebration.factoidBBoldedSection": "completan 5 veces la cantidad de contenido del curso en promedio",
|
||||
"learning.streakcelebration.factoida": "Los usuarios que aprenden {streak_length} días seguidos {bolded_section} que los que no lo hacen.",
|
||||
"learning.streakcelebration.factoidb": "Los usuarios que aprenden {streak_length} días seguidos {bolded_section} frente a los que no lo hacen.",
|
||||
"learning.loading.failure": "Hubo un error al cargar este curso.",
|
||||
"learning.loading": "Cargando la página del curso..."
|
||||
}
|
||||
@@ -90,44 +90,47 @@
|
||||
"learning.proctoringPanel.message.verified": "You can now take proctored exams in this course.",
|
||||
"learning.proctoringPanel.message.rejected": "Your onboarding exam has been rejected. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.error": "An error has occurred during your onboarding exam. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, it is highly recommended that you complete this course’s onboarding exam in order to ensure that your device still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "You are eligible to take proctored exams in this course.",
|
||||
"learning.proctoringPanel.detail.otherCourseApproved": "If your device has changed, we recommend that you complete this course's onboarding exam in order to ensure that your setup still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.expiringSoon": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.",
|
||||
"learning.proctoringPanel.generalInfo": "You must complete the onboarding process prior to taking any proctored exam. ",
|
||||
"learning.proctoringPanel.generalInfoSubmitted": "Your submitted profile is in review.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review, including identity verification, can take 2+ business days.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review can take 2+ business days.",
|
||||
"learning.proctoringPanel.onboardingButton": "Complete Onboarding",
|
||||
"learning.proctoringPanel.onboardingPracticeButton": "View Onboarding Exam",
|
||||
"learning.proctoringPanel.onboardingButtonNotOpen": "Onboarding Opens: {releaseDate}",
|
||||
"learning.proctoringPanel.reviewRequirementsButton": "Review instructions and system requirements",
|
||||
"learning.outline.sequence-due": "{description} due {assignmentDue}",
|
||||
"learning.progress.badge.problem": "Problem Scores: ",
|
||||
"learning.progress.badge.practice": "Practice Scores: ",
|
||||
"learning.progress.badge.problemHiddenUntil": "Problem scores are hidden until the due date.",
|
||||
"learning.progress.badge.practiceHiddenUntil": "Practice scores are hidden until the due date.",
|
||||
"learning.progress.badge.probHidden": "problemlem scores are hidden.",
|
||||
"learning.progress.badge.practiceHidden": "Practice scores are hidden.",
|
||||
"learning.progress.badge.noScores": "No problem scores in this section.",
|
||||
"learning.progress.badge.scoreEarned": "{earned} of {total} possible points",
|
||||
"learning.progress.badge.viewCert": "View Certificate",
|
||||
"learning.progress.badge.downloadCert": "Download Your Certificate",
|
||||
"learning.progress.badge.requestCert": "Request Certificate",
|
||||
"learning.progress.badge.opensNewWindow": "Opens in a new browser window",
|
||||
"learning.progress.badge.certAlt": "Example Certificate",
|
||||
"learning.progress.badge.studioLink": "View grading in Studio",
|
||||
"learning.progress.courseCreditHeader": "Course Credit Eligibility",
|
||||
"learning.progress.creditNotEligible": "You are not eligible for course credit because you have not met the requirements for credit.",
|
||||
"learning.progress.creditEligible": "You have met the requirements for credit in this course.",
|
||||
"learning.progress.creditPartialEligible": "You have not met the minimum requirements for credit.",
|
||||
"learning.progress.startVerification": "Start now",
|
||||
"learning.progress.start": "Try again",
|
||||
"learning.progress.notStarted": "Not started",
|
||||
"learning.progress.failed": "Incomplete",
|
||||
"learning.progress.notMet": "Not met",
|
||||
"learning.progress.pending": "Pending",
|
||||
"learning.progress.rejected": "Rejected",
|
||||
"learning.progress.completed": "Completed",
|
||||
"learning.progress.submitted": "Submitted",
|
||||
"learning.progress.learnMoreCredit": "Learn more about course credit",
|
||||
"learning.progress.purchaseCredit": "Purchase course credit",
|
||||
"progress.completion.donut.label": "completed",
|
||||
"progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
|
||||
"progress.completion.tooltip.locked": "Content that you have completed.",
|
||||
"progress.completion.header": "Course completion",
|
||||
"progress.completion.tooltip": "Content that you have access to and have not completed.",
|
||||
"progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
|
||||
"progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
|
||||
"progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
|
||||
"progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
|
||||
"progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
|
||||
"progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
|
||||
"progress.assignmentType": "Assignment type",
|
||||
"progress.footnotes.backToContent": "Back to content",
|
||||
"progress.courseOutline": "Course Outline",
|
||||
"progress.detailedGrades": "Detailed grades",
|
||||
"progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
|
||||
"progress.footnotes.title": "Grade summary footnotes",
|
||||
"progress.gradeSummary": "Grade summary",
|
||||
"progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
|
||||
"progress.score": "Score",
|
||||
"progress.weight": "Weight",
|
||||
"progress.weightedGrade": "Weighted grade",
|
||||
"progress.weightedGradeSummary": "Your current weighted grade summary",
|
||||
"progress.header": "Your progress",
|
||||
"progress.link.studio": "View grading in Studio",
|
||||
"progress.relatedLinks.datesCard.description": "A schedule view of your course due dates and upcoming assignments.",
|
||||
"progress.relatedLinks.datesCard.link": "Dates",
|
||||
"progress.relatedLinks.outlineCard.description": "A birds-eye view of your course content.",
|
||||
"progress.relatedLinks.outlineCard.link": "Course Outline",
|
||||
"progress.relatedLinks": "Related links",
|
||||
"unit.bookmark.button.add.bookmark": "Bookmark this page",
|
||||
"unit.bookmark.button.remove.bookmark": "Bookmarked",
|
||||
"learning.celebration.completed": "You just completed the first section of your course.",
|
||||
@@ -240,10 +243,19 @@
|
||||
"learn.contentLock.content.locked": "Content Locked",
|
||||
"learn.contentLock.complete.prerequisite": "You must complete the prerequisite: '{prereqSectionName}' to access this content.",
|
||||
"learn.contentLock.goToSection": "Go To Prerequisite Section",
|
||||
"learn.lockPaywall.title": "Verified Track Access",
|
||||
"learn.lockPaywall.content": "Graded assessments are available to Verified Track learners.",
|
||||
"learn.lockPaywall.upgrade.link": "Upgrade to unlock ({currencySymbol}{price})",
|
||||
"gatedContent.paragraph.bulletOne": "Earn a {verifiedCertLink} of completion to showcase on your resume",
|
||||
"gatedContent.paragraph.bulletTwo": "Unlock access to all course activities, including {gradedAssignments}",
|
||||
"gatedContent.paragraph.bulletThree": "{fullAccess} to course content and materials, even after the course ends",
|
||||
"gatedContent.paragraph.bulletFour": "Support our {nonProfit} mission at edX",
|
||||
"learn.lockPaywall.title": "Graded assignments are locked",
|
||||
"learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
|
||||
"learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
|
||||
"learn.lockPaywall.example.alt": "Example Certificate",
|
||||
"learn.lockPaywall.list.intro": "When you upgrade, you:",
|
||||
"learn.lockPaywall.list.bullet1.linktext": "verified certificate",
|
||||
"learn.lockPaywall.list.bullet2.boldtext": "graded assignments",
|
||||
"learn.lockPaywall.list.bullet3.boldtext": "Full access",
|
||||
"learn.lockPaywall.list.bullet4.boldtext": "non-profit",
|
||||
"learn.loading.content.lock": "Loading locked content messaging...",
|
||||
"learn.loading.learning.sequence": "Loading learning sequence...",
|
||||
"learn.course.load.failure": "There was an error loading this course.",
|
||||
@@ -280,7 +292,7 @@
|
||||
"learn.course.tabs.navigation.overflow.menu": "More...",
|
||||
"learning.offer.screenReaderPrices": "Original price: {originalPrice}, discount price: {discountedPrice}",
|
||||
"learning.upgradeButton.screenReaderInlinePrices": "Original price: {originalPrice}",
|
||||
"learning.upgradeButton.buttonText": "Upgrade ({pricing})",
|
||||
"learning.upgradeButton.buttonText": "Upgrade for {pricing}",
|
||||
"masquerade-widget.userName.error.generic": "An error has occurred; please try again.",
|
||||
"masquerade-widget.userName.input.placeholder": "Username or email",
|
||||
"masquerade-widget.userName.input.label": "Masquerade as this user",
|
||||
|
||||
@@ -90,44 +90,47 @@
|
||||
"learning.proctoringPanel.message.verified": "You can now take proctored exams in this course.",
|
||||
"learning.proctoringPanel.message.rejected": "Your onboarding exam has been rejected. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.error": "An error has occurred during your onboarding exam. Please retry onboarding.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, it is highly recommended that you complete this course’s onboarding exam in order to ensure that your device still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.otherCourseApproved": "You are eligible to take proctored exams in this course.",
|
||||
"learning.proctoringPanel.detail.otherCourseApproved": "If your device has changed, we recommend that you complete this course's onboarding exam in order to ensure that your setup still meets the requirements for proctoring.",
|
||||
"learning.proctoringPanel.message.expiringSoon": "Your onboarding profile has been approved in another course, so you are eligible to take proctored exams in this course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.",
|
||||
"learning.proctoringPanel.generalInfo": "You must complete the onboarding process prior to taking any proctored exam. ",
|
||||
"learning.proctoringPanel.generalInfoSubmitted": "Your submitted profile is in review.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review, including identity verification, can take 2+ business days.",
|
||||
"learning.proctoringPanel.generalTime": "Onboarding profile review can take 2+ business days.",
|
||||
"learning.proctoringPanel.onboardingButton": "Complete Onboarding",
|
||||
"learning.proctoringPanel.onboardingPracticeButton": "View Onboarding Exam",
|
||||
"learning.proctoringPanel.onboardingButtonNotOpen": "Onboarding Opens: {releaseDate}",
|
||||
"learning.proctoringPanel.reviewRequirementsButton": "Review instructions and system requirements",
|
||||
"learning.outline.sequence-due": "{description} due {assignmentDue}",
|
||||
"learning.progress.badge.problem": "Problem Scores: ",
|
||||
"learning.progress.badge.practice": "Practice Scores: ",
|
||||
"learning.progress.badge.problemHiddenUntil": "Problem scores are hidden until the due date.",
|
||||
"learning.progress.badge.practiceHiddenUntil": "Practice scores are hidden until the due date.",
|
||||
"learning.progress.badge.probHidden": "problemlem scores are hidden.",
|
||||
"learning.progress.badge.practiceHidden": "Practice scores are hidden.",
|
||||
"learning.progress.badge.noScores": "No problem scores in this section.",
|
||||
"learning.progress.badge.scoreEarned": "{earned} of {total} possible points",
|
||||
"learning.progress.badge.viewCert": "View Certificate",
|
||||
"learning.progress.badge.downloadCert": "Download Your Certificate",
|
||||
"learning.progress.badge.requestCert": "Request Certificate",
|
||||
"learning.progress.badge.opensNewWindow": "Opens in a new browser window",
|
||||
"learning.progress.badge.certAlt": "Example Certificate",
|
||||
"learning.progress.badge.studioLink": "View grading in Studio",
|
||||
"learning.progress.courseCreditHeader": "Course Credit Eligibility",
|
||||
"learning.progress.creditNotEligible": "You are not eligible for course credit because you have not met the requirements for credit.",
|
||||
"learning.progress.creditEligible": "You have met the requirements for credit in this course.",
|
||||
"learning.progress.creditPartialEligible": "You have not met the minimum requirements for credit.",
|
||||
"learning.progress.startVerification": "Start now",
|
||||
"learning.progress.start": "Try again",
|
||||
"learning.progress.notStarted": "Not started",
|
||||
"learning.progress.failed": "Incomplete",
|
||||
"learning.progress.notMet": "Not met",
|
||||
"learning.progress.pending": "Pending",
|
||||
"learning.progress.rejected": "Rejected",
|
||||
"learning.progress.completed": "Completed",
|
||||
"learning.progress.submitted": "Submitted",
|
||||
"learning.progress.learnMoreCredit": "Learn more about course credit",
|
||||
"learning.progress.purchaseCredit": "Purchase course credit",
|
||||
"progress.completion.donut.label": "completed",
|
||||
"progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
|
||||
"progress.completion.tooltip.locked": "Content that you have completed.",
|
||||
"progress.completion.header": "Course completion",
|
||||
"progress.completion.tooltip": "Content that you have access to and have not completed.",
|
||||
"progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
|
||||
"progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
|
||||
"progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
|
||||
"progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
|
||||
"progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
|
||||
"progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
|
||||
"progress.assignmentType": "Assignment type",
|
||||
"progress.footnotes.backToContent": "Back to content",
|
||||
"progress.courseOutline": "Course Outline",
|
||||
"progress.detailedGrades": "Detailed grades",
|
||||
"progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
|
||||
"progress.footnotes.title": "Grade summary footnotes",
|
||||
"progress.gradeSummary": "Grade summary",
|
||||
"progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
|
||||
"progress.score": "Score",
|
||||
"progress.weight": "Weight",
|
||||
"progress.weightedGrade": "Weighted grade",
|
||||
"progress.weightedGradeSummary": "Your current weighted grade summary",
|
||||
"progress.header": "Your progress",
|
||||
"progress.link.studio": "View grading in Studio",
|
||||
"progress.relatedLinks.datesCard.description": "A schedule view of your course due dates and upcoming assignments.",
|
||||
"progress.relatedLinks.datesCard.link": "Dates",
|
||||
"progress.relatedLinks.outlineCard.description": "A birds-eye view of your course content.",
|
||||
"progress.relatedLinks.outlineCard.link": "Course Outline",
|
||||
"progress.relatedLinks": "Related links",
|
||||
"unit.bookmark.button.add.bookmark": "Bookmark this page",
|
||||
"unit.bookmark.button.remove.bookmark": "Bookmarked",
|
||||
"learning.celebration.completed": "You just completed the first section of your course.",
|
||||
@@ -240,10 +243,19 @@
|
||||
"learn.contentLock.content.locked": "Content Locked",
|
||||
"learn.contentLock.complete.prerequisite": "You must complete the prerequisite: '{prereqSectionName}' to access this content.",
|
||||
"learn.contentLock.goToSection": "Go To Prerequisite Section",
|
||||
"learn.lockPaywall.title": "Verified Track Access",
|
||||
"learn.lockPaywall.content": "Graded assessments are available to Verified Track learners.",
|
||||
"learn.lockPaywall.upgrade.link": "Upgrade to unlock ({currencySymbol}{price})",
|
||||
"gatedContent.paragraph.bulletOne": "Earn a {verifiedCertLink} of completion to showcase on your resume",
|
||||
"gatedContent.paragraph.bulletTwo": "Unlock access to all course activities, including {gradedAssignments}",
|
||||
"gatedContent.paragraph.bulletThree": "{fullAccess} to course content and materials, even after the course ends",
|
||||
"gatedContent.paragraph.bulletFour": "Support our {nonProfit} mission at edX",
|
||||
"learn.lockPaywall.title": "Graded assignments are locked",
|
||||
"learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
|
||||
"learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
|
||||
"learn.lockPaywall.example.alt": "Example Certificate",
|
||||
"learn.lockPaywall.list.intro": "When you upgrade, you:",
|
||||
"learn.lockPaywall.list.bullet1.linktext": "verified certificate",
|
||||
"learn.lockPaywall.list.bullet2.boldtext": "graded assignments",
|
||||
"learn.lockPaywall.list.bullet3.boldtext": "Full access",
|
||||
"learn.lockPaywall.list.bullet4.boldtext": "non-profit",
|
||||
"learn.loading.content.lock": "Loading locked content messaging...",
|
||||
"learn.loading.learning.sequence": "Loading learning sequence...",
|
||||
"learn.course.load.failure": "There was an error loading this course.",
|
||||
@@ -280,7 +292,7 @@
|
||||
"learn.course.tabs.navigation.overflow.menu": "More...",
|
||||
"learning.offer.screenReaderPrices": "Original price: {originalPrice}, discount price: {discountedPrice}",
|
||||
"learning.upgradeButton.screenReaderInlinePrices": "Original price: {originalPrice}",
|
||||
"learning.upgradeButton.buttonText": "Upgrade ({pricing})",
|
||||
"learning.upgradeButton.buttonText": "Upgrade for {pricing}",
|
||||
"masquerade-widget.userName.error.generic": "An error has occurred; please try again.",
|
||||
"masquerade-widget.userName.input.placeholder": "Username or email",
|
||||
"masquerade-widget.userName.input.label": "Masquerade as this user",
|
||||
|
||||
@@ -368,6 +368,7 @@
|
||||
@import 'course-home/dates-tab/Day.scss';
|
||||
@import 'course-home/outline-tab/widgets/UpgradeCard.scss';
|
||||
@import 'course-home/outline-tab/widgets/ProctoringInfoPanel.scss';
|
||||
@import 'course-home/progress-tab/course-completion/CompletionDonutChart.scss';
|
||||
@import 'courseware/course/course-exit/CourseRecommendationsExp/course_recommendations.exp';
|
||||
|
||||
/** [MM-P2P] Experiment */
|
||||
|
||||
@@ -55,13 +55,13 @@ export default function InstructorToolbar(props) {
|
||||
unitId,
|
||||
} = props;
|
||||
const urlInsights = getInsightsUrl(courseId);
|
||||
const urlLms = useSelector((state) => {
|
||||
const urlLegacy = useSelector((state) => {
|
||||
if (!unitId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const activeUnit = state.models.units[props.unitId];
|
||||
return activeUnit ? activeUnit.lmsWebUrl : undefined;
|
||||
return activeUnit ? activeUnit.legacyWebUrl : undefined;
|
||||
});
|
||||
const urlStudio = getStudioUrl(courseId, unitId);
|
||||
const [masqueradeErrorMessage, showMasqueradeError] = useState(null);
|
||||
@@ -73,15 +73,15 @@ export default function InstructorToolbar(props) {
|
||||
<div className="align-items-center flex-grow-1 d-md-flex mx-1 my-1">
|
||||
<MasqueradeWidget courseId={courseId} onError={showMasqueradeError} />
|
||||
</div>
|
||||
{(urlLms || urlStudio || urlInsights) && (
|
||||
{(urlLegacy || urlStudio || urlInsights) && (
|
||||
<>
|
||||
<hr className="border-light" />
|
||||
<span className="mr-2 mt-1 col-form-label">View course in:</span>
|
||||
</>
|
||||
)}
|
||||
{urlLms && (
|
||||
{urlLegacy && (
|
||||
<span className="mx-1 my-1">
|
||||
<a className="btn btn-inverse-outline-primary" href={urlLms}>Legacy experience</a>
|
||||
<a className="btn btn-inverse-outline-primary" href={urlLegacy}>Legacy experience</a>
|
||||
</span>
|
||||
)}
|
||||
{urlStudio && (
|
||||
|
||||
@@ -132,7 +132,7 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
|
||||
axiosMock.reset();
|
||||
|
||||
const {
|
||||
courseBlocks, sequenceBlock, courseMetadata, sequenceMetadata,
|
||||
courseBlocks, sequenceBlocks, courseMetadata, sequenceMetadata,
|
||||
} = buildSimpleCourseAndSequenceMetadata(options);
|
||||
|
||||
let forbiddenCourseUrl = `${getConfig().LMS_BASE_URL}/api/courseware/course/${courseMetadata.id}`;
|
||||
@@ -153,7 +153,7 @@ export async function initializeTestStore(options = {}, overrideStore = true) {
|
||||
!options.excludeFetchCourse && await executeThunk(fetchCourse(courseMetadata.id), store.dispatch);
|
||||
|
||||
if (!options.excludeFetchSequence) {
|
||||
await Promise.all(sequenceBlock
|
||||
await Promise.all(sequenceBlocks
|
||||
.map(block => executeThunk(fetchSequence(block.id), store.dispatch)));
|
||||
}
|
||||
|
||||
|
||||
@@ -47,13 +47,13 @@ Factory.define('block')
|
||||
},
|
||||
)
|
||||
.attr(
|
||||
'lms_web_url',
|
||||
['lms_web_url', 'host', 'courseId', 'id'],
|
||||
'legacy_web_url',
|
||||
['legacy_web_url', 'host', 'courseId', 'id'],
|
||||
(url, host, courseId, id) => {
|
||||
if (url) {
|
||||
return url;
|
||||
}
|
||||
|
||||
return `${host}/courses/${courseId}/jump_to/${id}`;
|
||||
return `${host}/courses/${courseId}/jump_to/${id}?experience=legacy`;
|
||||
},
|
||||
);
|
||||
236
src/shared/data/__factories__/courseBlocks.factory.js
Normal file
236
src/shared/data/__factories__/courseBlocks.factory.js
Normal file
@@ -0,0 +1,236 @@
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
import './block.factory';
|
||||
|
||||
// Generates an Array of block IDs, either from a single block or an array of blocks.
|
||||
const getIds = (attr) => {
|
||||
const blocks = Array.isArray(attr) ? attr : [attr];
|
||||
return blocks.map(block => block.id);
|
||||
};
|
||||
|
||||
// Generates an Object in { [block.id]: block } format, either from a single block or an array of blocks.
|
||||
const getBlocks = (attr) => {
|
||||
const blocks = Array.isArray(attr) ? attr : [attr];
|
||||
// eslint-disable-next-line no-return-assign,no-sequences
|
||||
return blocks.reduce((acc, block) => (acc[block.id] = block, acc), {});
|
||||
};
|
||||
|
||||
Factory.define('courseBlocks')
|
||||
.option('courseId', 'course-v1:edX+DemoX+Demo_Course')
|
||||
.option('units', ['courseId'], courseId => [
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
),
|
||||
])
|
||||
.option('sequences', ['courseId', 'units'], (courseId, units) => [
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: getIds(units) },
|
||||
{ courseId },
|
||||
),
|
||||
])
|
||||
.option('sections', ['courseId', 'sequences'], (courseId, sequences) => [
|
||||
Factory.build(
|
||||
'block',
|
||||
{ type: 'chapter', children: getIds(sequences) },
|
||||
{ courseId },
|
||||
),
|
||||
])
|
||||
.option('course', ['courseId', 'sections'], (courseId, sections) => Factory.build(
|
||||
'block',
|
||||
{ type: 'course', children: getIds(sections) },
|
||||
{ courseId },
|
||||
))
|
||||
.attr(
|
||||
'blocks',
|
||||
['course', 'sections', 'sequences', 'units'],
|
||||
(course, sections, sequences, units) => ({
|
||||
[course.id]: course,
|
||||
...getBlocks(sections),
|
||||
...getBlocks(sequences),
|
||||
...getBlocks(units),
|
||||
}),
|
||||
)
|
||||
.attr('root', ['course'], course => course.id);
|
||||
|
||||
/**
|
||||
* Builds a course with a single chapter, sequence, and unit.
|
||||
*/
|
||||
export function buildSimpleCourseBlocks(courseId, title, options = {}) {
|
||||
const unitBlocks = options.unitBlocks || [Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
)];
|
||||
const sequenceBlocks = options.sequenceBlocks || [Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: unitBlocks.map(block => block.id) },
|
||||
{ courseId },
|
||||
)];
|
||||
const sectionBlocks = options.sectionBlocks || [Factory.build(
|
||||
'block',
|
||||
{ type: 'chapter', children: sequenceBlocks.map(block => block.id) },
|
||||
{ courseId },
|
||||
)];
|
||||
const courseBlock = options.courseBlock || Factory.build(
|
||||
'block',
|
||||
{ type: 'course', display_name: title, children: sectionBlocks.map(block => block.id) },
|
||||
{ courseId },
|
||||
);
|
||||
return {
|
||||
courseBlocks: options.courseBlocks || Factory.build(
|
||||
'courseBlocks',
|
||||
{
|
||||
courseId,
|
||||
hasScheduledContent: options.hasScheduledContent || false,
|
||||
title: 'Demo Course',
|
||||
},
|
||||
{
|
||||
units: unitBlocks,
|
||||
sequences: sequenceBlocks,
|
||||
sections: sectionBlocks,
|
||||
course: courseBlock,
|
||||
},
|
||||
),
|
||||
unitBlocks,
|
||||
sequenceBlocks,
|
||||
sectionBlocks,
|
||||
courseBlock,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds a course with a single chapter and sequence, but no units.
|
||||
*/
|
||||
export function buildMinimalCourseBlocks(courseId, title, options = {}) {
|
||||
const sequenceBlocks = options.sequenceBlocks || [Factory.build(
|
||||
'block',
|
||||
{ display_name: 'Title of Sequence', type: 'sequential' },
|
||||
{ courseId },
|
||||
)];
|
||||
const sectionBlocks = options.sectionBlocks || [Factory.build(
|
||||
'block',
|
||||
{
|
||||
type: 'chapter',
|
||||
display_name: 'Title of Section',
|
||||
complete: options.complete || false,
|
||||
effort_time: 15,
|
||||
effort_activities: 2,
|
||||
resume_block: options.resumeBlock || false,
|
||||
children: sequenceBlocks.map(block => block.id),
|
||||
},
|
||||
{ courseId },
|
||||
)];
|
||||
const courseBlock = options.courseBlock || Factory.build(
|
||||
'block',
|
||||
{ type: 'course', display_name: title, children: sectionBlocks.map(block => block.id) },
|
||||
{ courseId },
|
||||
);
|
||||
return {
|
||||
courseBlocks: options.courseBlocks || Factory.build(
|
||||
'courseBlocks',
|
||||
{ courseId },
|
||||
{
|
||||
sequences: sequenceBlocks,
|
||||
sections: sectionBlocks,
|
||||
course: courseBlock,
|
||||
units: [],
|
||||
},
|
||||
),
|
||||
unitBlocks: [],
|
||||
sequenceBlocks,
|
||||
sectionBlocks,
|
||||
courseBlock,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds a course with two branches at each node. That is:
|
||||
*
|
||||
* Crs
|
||||
* |
|
||||
* Sec--------+-------Sec
|
||||
* | |
|
||||
* Seq---+---Seq Seq---+---Seq
|
||||
* | | | |
|
||||
* U--+--U U--+--U U--+--U U--+--U
|
||||
* ^
|
||||
*
|
||||
* Each left branch is indexed 0, and each right branch is indexed 1.
|
||||
* So, the caret in the diagram above is pointing to `unitTree[1][0][1]`,
|
||||
* whose parent is `sequenceTree[1][0]`, whose parent is `sectionTree[1]`.
|
||||
*/
|
||||
export function buildBinaryCourseBlocks(courseId, title) {
|
||||
const sectionTree = [];
|
||||
const sequenceTree = [[], []];
|
||||
const unitTree = [[[], []], [[], []]];
|
||||
[0, 1].forEach(sectionIndex => {
|
||||
[0, 1].forEach(sequenceIndex => {
|
||||
[0, 1].forEach(unitIndex => {
|
||||
unitTree[sectionIndex][sequenceIndex][unitIndex] = Factory.build(
|
||||
'block',
|
||||
{ type: 'vertical' },
|
||||
{ courseId },
|
||||
);
|
||||
});
|
||||
sequenceTree[sectionIndex][sequenceIndex] = Factory.build(
|
||||
'block',
|
||||
{ type: 'sequential', children: unitTree[sectionIndex][sequenceIndex].map(block => block.id) },
|
||||
{ courseId },
|
||||
);
|
||||
});
|
||||
sectionTree[sectionIndex] = Factory.build(
|
||||
'block',
|
||||
{ type: 'chapter', children: sequenceTree[sectionIndex].map(block => block.id) },
|
||||
{ courseId },
|
||||
);
|
||||
});
|
||||
const courseBlock = Factory.build(
|
||||
'block',
|
||||
{ type: 'course', display_name: title, children: sectionTree.map(block => block.id) },
|
||||
{ courseId },
|
||||
);
|
||||
const sectionBlocks = [
|
||||
sectionTree[0],
|
||||
sectionTree[1],
|
||||
];
|
||||
const sequenceBlocks = [
|
||||
sequenceTree[0][0],
|
||||
sequenceTree[0][1],
|
||||
sequenceTree[1][0],
|
||||
sequenceTree[1][1],
|
||||
];
|
||||
const unitBlocks = [
|
||||
unitTree[0][0][0],
|
||||
unitTree[0][0][1],
|
||||
unitTree[0][1][0],
|
||||
unitTree[0][1][1],
|
||||
unitTree[1][0][0],
|
||||
unitTree[1][0][1],
|
||||
unitTree[1][1][0],
|
||||
unitTree[1][1][1],
|
||||
];
|
||||
return {
|
||||
// Expose blocks as a combined list, lists separated by type, and as
|
||||
// trees separated by type. The caller can decide which they want to
|
||||
// work with.
|
||||
courseBlocks: Factory.build(
|
||||
'courseBlocks',
|
||||
{ courseId },
|
||||
{
|
||||
units: unitBlocks,
|
||||
sequences: sequenceBlocks,
|
||||
sections: sectionBlocks,
|
||||
course: courseBlock,
|
||||
},
|
||||
),
|
||||
unitBlocks,
|
||||
sequenceBlocks,
|
||||
sectionBlocks,
|
||||
courseBlock,
|
||||
unitTree,
|
||||
sequenceTree,
|
||||
sectionTree,
|
||||
};
|
||||
}
|
||||
83
src/shared/data/__factories__/courseMetadataBase.factory.js
Normal file
83
src/shared/data/__factories__/courseMetadataBase.factory.js
Normal file
@@ -0,0 +1,83 @@
|
||||
/* A basic course metadata factory, to be specialized in courseware and course-home., */
|
||||
|
||||
import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
|
||||
|
||||
import './tab.factory';
|
||||
|
||||
export default new Factory()
|
||||
.sequence('id', (i) => `course-v1:edX+DemoX+Demo_Course_${i}`)
|
||||
.option('host')
|
||||
.attrs({
|
||||
is_staff: false,
|
||||
original_user_is_staff: false,
|
||||
number: 'DemoX',
|
||||
org: 'edX',
|
||||
})
|
||||
.attr(
|
||||
'tabs', ['id', 'host'], (id, host) => {
|
||||
const tabs = [
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Course',
|
||||
priority: 0,
|
||||
slug: 'courseware',
|
||||
type: 'courseware',
|
||||
},
|
||||
{ courseId: id, host, path: 'course/' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Discussion',
|
||||
priority: 1,
|
||||
slug: 'discussion',
|
||||
type: 'discussion',
|
||||
},
|
||||
{ courseId: id, host, path: 'discussion/forum/' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Wiki',
|
||||
priority: 2,
|
||||
slug: 'wiki',
|
||||
type: 'wiki',
|
||||
},
|
||||
{ courseId: id, host, path: 'course_wiki' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Progress',
|
||||
priority: 3,
|
||||
slug: 'progress',
|
||||
type: 'progress',
|
||||
},
|
||||
{ courseId: id, host, path: 'progress' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Instructor',
|
||||
priority: 4,
|
||||
slug: 'instructor',
|
||||
type: 'instructor',
|
||||
},
|
||||
{ courseId: id, host, path: 'instructor' },
|
||||
),
|
||||
Factory.build(
|
||||
'tab',
|
||||
{
|
||||
title: 'Dates',
|
||||
priority: 5,
|
||||
slug: 'dates',
|
||||
type: 'dates',
|
||||
},
|
||||
{ courseId: id, host, path: 'dates' },
|
||||
),
|
||||
];
|
||||
|
||||
return tabs;
|
||||
},
|
||||
);
|
||||
4
src/shared/data/__factories__/index.js
Normal file
4
src/shared/data/__factories__/index.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import './block.factory';
|
||||
import './courseBlocks.factory';
|
||||
import './courseMetadataBase.factory';
|
||||
import './tab.factory';
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user