Andal.LND/frontend-app-learning
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into KristinAoki/TNL-8511

Browse Source
This commit is contained in:
Kristin Aoki
2021-07-28 15:56:44 -04:00
parent 174be4adc7 64f374855b
commit c592753182
100 changed files with 1487 additions and 1097 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
package-lock.json generated
View File

@@ -1383,9 +1383,9 @@
}
},
"@edx/frontend-lib-special-exams": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@edx/frontend-lib-special-exams/-/frontend-lib-special-exams-1.9.0.tgz",
"integrity": "sha512-dG9iW/vru/6Rh9+1kkqDu3gdiSVF49/9JvdjPb+7H1mdZPs4/FdP43HicPgaJ4r6PKfd9Ssam+3rq1NhxpWzvw==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/@edx/frontend-lib-special-exams/-/frontend-lib-special-exams-1.11.0.tgz",
"integrity": "sha512-T8b5caCjYgqVstnFlT5o50KnLsMmqIkBUXjwP9OCFlc8wDo2MUuc58nZ0xJUGaL2C0RGbtILPH+pzlXtPubrOw==",
"requires": {
"@fortawesome/fontawesome-svg-core": "1.2.34",
"@fortawesome/free-brands-svg-icons": "5.11.2",
@@ -1447,9 +1447,9 @@
}
},
"@edx/paragon": {
"version": "15.2.2",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-15.2.2.tgz",
"integrity": "sha512-C4YMd4zjRalS8pPglpAvDnribrA/3x8XXcbyTq0Xwwotp9HSld2yndASczZGdjNcqG0b1gpmPdxkzx2kaogCiw==",
"version": "16.5.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-16.5.0.tgz",
"integrity": "sha512-oXZBL1eaBKtPnypVx3hAoVs/zwTjQP+jfj6Vk610+GlsoYzevho4H2CXvrym5HKYAvYvKwXuIibh/IOdzhk+tQ==",
"requires": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -1467,10 +1467,9 @@
"react-focus-on": "^3.5.0",
"react-popper": "^2.2.4",
"react-proptype-conditional-require": "^1.0.4",
"react-responsive": "^6.1.1",
"react-responsive": "^8.2.0",
"react-table": "^7.6.1",
"react-transition-group": "^4.0.0",
"sanitize-html": "^1.27.5",
"tabbable": "^4.0.0",
"uncontrollable": "7.2.1"
},
@@ -3081,9 +3080,9 @@
}
},
"@types/react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
"integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
"requires": {
"@types/react": "*"
}
@@ -3592,6 +3591,7 @@
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
@@ -5420,6 +5420,7 @@
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
@@ -5430,6 +5431,7 @@
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
@@ -5809,6 +5811,7 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -5816,7 +5819,8 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"color-string": {
"version": "1.5.5",
@@ -7084,37 +7088,12 @@
"csstype": "^3.0.2"
}
},
"dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.2.0",
"entities": "^2.0.0"
},
"dependencies": {
"domhandler": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
"integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
"requires": {
"domelementtype": "^2.2.0"
}
}
}
},
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
"integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
"dev": true
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
},
"domexception": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
@@ -7132,34 +7111,6 @@
}
}
},
"domhandler": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
"integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
"requires": {
"domelementtype": "^2.0.1"
}
},
"domutils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
"integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
"requires": {
"dom-serializer": "^1.0.1",
"domelementtype": "^2.2.0",
"domhandler": "^4.2.0"
},
"dependencies": {
"domhandler": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
"integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
"requires": {
"domelementtype": "^2.2.0"
}
}
}
},
"dot-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -7605,7 +7556,8 @@
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true
},
"escodegen": {
"version": "2.0.0",
@@ -9417,7 +9369,8 @@
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
},
"has-symbol-support-x": {
"version": "1.4.2",
@@ -9718,17 +9671,6 @@
}
}
},
"htmlparser2": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
"integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^3.0.0",
"domutils": "^2.0.0",
"entities": "^2.0.0"
}
},
"http-cache-semantics": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
@@ -14184,7 +14126,8 @@
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"lodash.assignin": {
"version": "4.2.0",
@@ -15915,11 +15858,6 @@
"integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
"dev": true
},
"parse-srcset": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
"integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE="
},
"parse5": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
@@ -16269,6 +16207,7 @@
"version": "7.0.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
"integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
@@ -17621,16 +17560,16 @@
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-focus-lock": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.1.tgz",
"integrity": "sha512-gOToRZKVEymGEjFaTRUKgJsdYQrNosoiK7yZnXnnd8bYew4vMzk3Rxb0Q4nyrGwsFuUmgQiSAulQirA0J+v4hA==",
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.2.tgz",
"integrity": "sha512-WzpdOnEqjf+/A3EH9opMZWauag7gV0BxFl+EY4ElA4qFqYsUsBLnmo2sELbN5OC30S16GAWMy16B9DLPpdJKAQ==",
"requires": {
"@babel/runtime": "^7.0.0",
"focus-lock": "^0.9.1",
"prop-types": "^15.6.2",
"react-clientside-effect": "^1.2.2",
"use-callback-ref": "^1.2.1",
"use-sidecar": "^1.0.1"
"react-clientside-effect": "^1.2.5",
"use-callback-ref": "^1.2.5",
"use-sidecar": "^1.0.5"
}
},
"react-focus-on": {
@@ -17687,9 +17626,9 @@
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-overlays": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.1.0.tgz",
"integrity": "sha512-Qp8dqDIIYgQoHxOGVKHwvQUkDe70/Ja/6dn8iCQAXyPvvpks3+T8scLTZLK8MPBBu+X8ustas6y4U6M6zdmCjA==",
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.1.1.tgz",
"integrity": "sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q==",
"requires": {
"@babel/runtime": "^7.13.8",
"@popperjs/core": "^2.8.6",
@@ -17729,9 +17668,9 @@
}
},
"react-remove-scroll": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.2.tgz",
"integrity": "sha512-mMSIZYQF3jS2uRJXeFDRaVGA+BGs/hIryV64YUKsHFtpgwZloOUcdu0oW8K6OU8uLHt/kM5d0lUZbdpIVwgXtQ==",
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz",
"integrity": "sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==",
"requires": {
"react-remove-scroll-bar": "^2.1.0",
"react-style-singleton": "^2.1.0",
@@ -17750,13 +17689,14 @@
}
},
"react-responsive": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-6.1.2.tgz",
"integrity": "sha512-AXentVC/kN3KED9zhzJv2pu4vZ0i6cSHdTtbCScVV1MT6F5KXaG2qs5D7WLmhdaOvmiMX8UfmS4ZSO+WPwDt4g==",
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
"integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
"requires": {
"hyphenate-style-name": "^1.0.0",
"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1"
"prop-types": "^15.6.1",
"shallow-equal": "^1.1.0"
}
},
"react-router": {
@@ -18749,17 +18689,6 @@
"walker": "~1.0.5"
}
},
"sanitize-html": {
"version": "1.27.5",
"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.27.5.tgz",
"integrity": "sha512-M4M5iXDAUEcZKLXkmk90zSYWEtk5NH3JmojQxKxV371fnMh+x9t1rqdmXaGoyEHw3z/X/8vnFhKjGL5xFGOJ3A==",
"requires": {
"htmlparser2": "^4.1.0",
"lodash": "^4.17.15",
"parse-srcset": "^1.0.2",
"postcss": "^7.0.27"
}
},
"sass": {
"version": "1.26.11",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.26.11.tgz",
@@ -19057,6 +18986,11 @@
"kind-of": "^6.0.2"
}
},
"shallow-equal": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
"integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -19352,7 +19286,8 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"source-map-loader": {
"version": "0.2.4",
@@ -20106,6 +20041,7 @@
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}

4
package.json
View File

@@ -38,9 +38,9 @@
"@edx/brand": "npm:@edx/brand-openedx@1.1.0",
"@edx/frontend-component-footer": "10.1.5",
"@edx/frontend-enterprise": "4.2.3",
"@edx/frontend-lib-special-exams": "1.9.0",
"@edx/frontend-lib-special-exams": "1.11.0",
"@edx/frontend-platform": "1.11.0",
"@edx/paragon": "15.2.2",
"@edx/paragon": "16.5.0",
"@fortawesome/fontawesome-svg-core": "1.2.34",
"@fortawesome/free-brands-svg-icons": "5.13.1",
"@fortawesome/free-regular-svg-icons": "5.13.1",

6
src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
View File

@@ -4,9 +4,9 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import {
FormattedMessage, FormattedDate, injectIntl, intlShape,
} from '@edx/frontend-platform/i18n';
import { Hyperlink } from '@edx/paragon';
import { Alert, Hyperlink } from '@edx/paragon';
import { Info } from '@edx/paragon/icons';
import { Alert, ALERT_TYPES } from '../../generic/user-messages';
import messages from './messages';
import AccessExpirationAlertMMP2P from './AccessExpirationAlertMMP2P';
import AccessExpirationAlertMasquerade from './AccessExpirationAlertMasquerade';
@@ -100,7 +100,7 @@ function AccessExpirationAlert({ intl, payload }) {
}
return (
<Alert type={ALERT_TYPES.INFO}>
<Alert variant="info" icon={Info}>
<span className="font-weight-bold">
<FormattedMessage
id="learning.accessExpiration.header"

6
src/alerts/access-expiration-alert/AccessExpirationAlertMMP2P.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedDate, injectIntl } from '@edx/frontend-platform/i18n';
import { Hyperlink } from '@edx/paragon';
import { Alert, Hyperlink } from '@edx/paragon';
import { Info } from '@edx/paragon/icons';
import { Alert, ALERT_TYPES } from '../../generic/user-messages';
import messages from './messages';
function AccessExpirationAlertMMP2P({ payload }) {
@@ -52,7 +52,7 @@ function AccessExpirationAlertMMP2P({ payload }) {
}
return (
<Alert type={ALERT_TYPES.INFO}>
<Alert variant="info" icon={Info}>
<span className="font-weight-bold">
Unlock full course content by {formatDate(upgradeDeadline, 'upgradeTitle')}
</span>

6
src/alerts/access-expiration-alert/AccessExpirationAlertMasquerade.jsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
import { Alert, ALERT_TYPES } from '../../generic/user-messages';
import { Alert } from '@edx/paragon';
import { Info } from '@edx/paragon/icons';
function AccessExpirationAlertMasquerade({ payload }) {
const {
@@ -26,7 +26,7 @@ function AccessExpirationAlertMasquerade({ payload }) {
const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
return (
<Alert type={ALERT_TYPES.INFO}>
<Alert variant="info" icon={Info}>
<FormattedMessage
id="learning.accessExpiration.expired"
defaultMessage="This learner does not have access to this course. Their access expired on {date}."

24
src/alerts/enrollment-alert/EnrollmentAlert.jsx
View File

@@ -1,12 +1,12 @@
import React from 'react';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
import { Button } from '@edx/paragon';
import { Alert, Button } from '@edx/paragon';
import { Info, WarningFilled } from '@edx/paragon/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { useModel } from '../../generic/model-store';
import { Alert, ALERT_TYPES } from '../../generic/user-messages';
import messages from './messages';
import { useEnrollClickHandler } from './hooks';
@@ -30,27 +30,29 @@ function EnrollmentAlert({ intl, payload }) {
);
let text = intl.formatMessage(messages.alert);
let type = ALERT_TYPES.ERROR;
let type = 'warning';
let icon = WarningFilled;
if (isStaff) {
text = intl.formatMessage(messages.staffAlert);
type = ALERT_TYPES.INFO;
type = 'info';
icon = Info;
} else if (extraText) {
text = `${text} ${extraText}`;
}
const button = canEnroll && (
<Button disabled={loading} variant="link" className="p-0 border-0 align-top" style={{ textDecoration: 'underline' }} onClick={enrollClickHandler}>
<Button disabled={loading} variant="link" className="p-0 border-0 align-top mx-1" size="sm" style={{ textDecoration: 'underline' }} onClick={enrollClickHandler}>
{intl.formatMessage(messages.enrollNowSentence)}
</Button>
);
return (
<Alert type={type}>
{text}
{' '}
{button}
{' '}
{loading && <FontAwesomeIcon icon={faSpinner} spin />}
<Alert variant={type} icon={icon}>
<div className="d-flex">
{text}
{button}
{loading && <FontAwesomeIcon icon={faSpinner} spin />}
</div>
</Alert>
);
}

6
src/alerts/logistration-alert/LogistrationAlert.jsx
View File

@@ -2,9 +2,9 @@ import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
import { Hyperlink } from '@edx/paragon';
import { Alert, Hyperlink } from '@edx/paragon';
import { WarningFilled } from '@edx/paragon/icons';
import { Alert } from '../../generic/user-messages';
import genericMessages from '../../generic/messages';
function LogistrationAlert({ intl }) {
@@ -29,7 +29,7 @@ function LogistrationAlert({ intl }) {
);
return (
<Alert type="error">
<Alert variant="warning" icon={WarningFilled}>
<FormattedMessage
id="learning.logistration.alert"
description="Prompts the user to sign in or register to see course content."

105
src/alerts/offer-alert/OfferAlert.jsx
View File

@@ -1,105 +0,0 @@
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';
import { Hyperlink } from '@edx/paragon';
import { Alert, ALERT_TYPES } from '../../generic/user-messages';
import { FormattedPricing } from '../../generic/upgrade-button';
import messages from './messages';
function OfferAlert({ intl, payload }) {
const {
analyticsPageName,
courseId,
offer,
org,
userTimezone,
} = payload;
if (!offer) {
return null;
}
const {
code,
expirationDate,
percentage,
upgradeUrl,
} = 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">
<FormattedMessage
id="learning.offer.header"
defaultMessage="Upgrade by {date} and save {percentage}% [{fullPricing}]"
values={{
date: (
<FormattedDate
key="offerDate"
day="numeric"
month="long"
value={expirationDate}
{...timezoneFormatArgs}
/>
),
fullPricing: <FormattedPricing offer={offer} />,
percentage,
}}
/>
</span>
<br />
<FormattedMessage
id="learning.offer.code"
defaultMessage="Use code {code} at checkout!"
values={{
code: (<b>{code}</b>),
}}
/>
&nbsp;
<Hyperlink
className="font-weight-bold"
style={{ textDecoration: 'underline' }}
destination={upgradeUrl}
onClick={logClick}
>
{intl.formatMessage(messages.upgradeNow)}
</Hyperlink>
</Alert>
);
}
OfferAlert.propTypes = {
intl: intlShape.isRequired,
payload: PropTypes.shape({
courseId: PropTypes.string.isRequired,
offer: PropTypes.shape({
code: PropTypes.string.isRequired,
discountedPrice: PropTypes.string.isRequired,
expirationDate: PropTypes.string.isRequired,
originalPrice: PropTypes.string.isRequired,
percentage: PropTypes.number.isRequired,
upgradeUrl: PropTypes.string.isRequired,
}).isRequired,
org: PropTypes.string.isRequired,
userTimezone: PropTypes.string.isRequired,
analyticsPageName: PropTypes.string.isRequired,
}).isRequired,
};
export default injectIntl(OfferAlert);

25
src/alerts/offer-alert/hooks.js
View File

@@ -1,25 +0,0 @@
import React, { useMemo } from 'react';
import { useAlert } from '../../generic/user-messages';
const OfferAlert = React.lazy(() => import('./OfferAlert'));
export function useOfferAlert(courseId, offer, org, userTimezone, topic, analyticsPageName) {
const isVisible = !!offer; // if it exists, show it.
const payload = {
analyticsPageName,
courseId,
offer,
org,
userTimezone,
};
useAlert(isVisible, {
code: 'clientOfferAlert',
topic,
payload: useMemo(() => payload, Object.values(payload).sort()),
});
return { clientOfferAlert: OfferAlert };
}
export default useOfferAlert;

1
src/alerts/offer-alert/index.js
View File

@@ -1 +0,0 @@
export { default } from './hooks';

10
src/alerts/offer-alert/messages.js
View File

@@ -1,10 +0,0 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
upgradeNow: {
id: 'learning.offer.upgradeNow',
defaultMessage: 'Upgrade now',
},
});
export default messages;

2
src/course-header/CourseTabsNavigation.jsx
View File

@@ -11,7 +11,7 @@ function CourseTabsNavigation({
}) {
return (
<div className={classNames('course-tabs-navigation', className)}>
<div className="container-fluid">
<div className="container-xl">
<Tabs
className="nav-underline-tabs"
aria-label={intl.formatMessage(messages.courseMaterial)}

2
src/course-header/Header.jsx
View File

@@ -61,7 +61,7 @@ function Header({
return (
<header className="course-header">
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
<div className="container-fluid py-2 d-flex align-items-center">
<div className="container-xl py-2 d-flex align-items-center">
{headerLogo}
<div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
<span className="d-block small m-0">{courseOrg} {courseNumber}</span>

9
src/course-home/data/__factories__/courseHomeMetadata.factory.js
View File

@@ -10,4 +10,13 @@ Factory.define('courseHomeMetadata')
is_self_paced: false,
is_enrolled: false,
can_load_courseware: false,
course_access: {
additional_context_user_message: null,
developer_message: null,
error_code: null,
has_access: true,
user_fragment: null,
user_message: null,
},
start: '2013-02-05T05:00:00Z',
});

5
src/course-home/data/__factories__/progressTabData.factory.js
View File

@@ -24,10 +24,12 @@ Factory.define('progressTabData')
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 0,
num_points_possible: 1,
num_points_possible: 3,
percent_graded: 0.0,
problem_scores: [{ earned: 0, possible: 1 }, { earned: 0, possible: 1 }, { earned: 0, possible: 1 }],
show_correctness: 'always',
show_grades: true,
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
@@ -44,6 +46,7 @@ Factory.define('progressTabData')
num_points_earned: 1,
num_points_possible: 1,
percent_graded: 1.0,
problem_scores: [{ earned: 1, possible: 1 }],
show_correctness: 'always',
show_grades: true,
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',

63
src/course-home/data/__snapshots__/redux.test.js.snap
View File

@@ -5,7 +5,6 @@ Object {
"courseHome": Object {
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
"courseStatus": "loaded",
"gradesFeatureIsLocked": false,
"targetUserId": undefined,
"toastBodyLink": null,
"toastBodyText": null,
@@ -23,6 +22,14 @@ Object {
"courseHomeMeta": Object {
"course-v1:edX+DemoX+Demo_Course_1": Object {
"canLoadCourseware": false,
"courseAccess": Object {
"additionalContextUserMessage": null,
"developerMessage": null,
"errorCode": null,
"hasAccess": true,
"userFragment": null,
"userMessage": null,
},
"id": "course-v1:edX+DemoX+Demo_Course_1",
"isEnrolled": false,
"isSelfPaced": false,
@@ -30,6 +37,7 @@ Object {
"number": "DemoX",
"org": "edX",
"originalUserIsStaff": false,
"start": "2013-02-05T05:00:00Z",
"tabs": Array [
Object {
"slug": "outline",
@@ -302,7 +310,6 @@ Object {
"courseHome": Object {
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
"courseStatus": "loaded",
"gradesFeatureIsLocked": false,
"targetUserId": undefined,
"toastBodyLink": null,
"toastBodyText": null,
@@ -320,6 +327,14 @@ Object {
"courseHomeMeta": Object {
"course-v1:edX+DemoX+Demo_Course_1": Object {
"canLoadCourseware": false,
"courseAccess": Object {
"additionalContextUserMessage": null,
"developerMessage": null,
"errorCode": null,
"hasAccess": true,
"userFragment": null,
"userMessage": null,
},
"id": "course-v1:edX+DemoX+Demo_Course_1",
"isEnrolled": false,
"isSelfPaced": false,
@@ -327,6 +342,7 @@ Object {
"number": "DemoX",
"org": "edX",
"originalUserIsStaff": false,
"start": "2013-02-05T05:00:00Z",
"tabs": Array [
Object {
"slug": "outline",
@@ -380,8 +396,6 @@ Object {
"courseBlocks": Object {
"courses": Object {
"block-v1:edX+DemoX+Demo_Course+type@course+block@bcdabcdabcdabcdabcdabcdabcdabcd3": Object {
"effortActivities": undefined,
"effortTime": undefined,
"hasScheduledContent": false,
"id": "course-v1:edX+DemoX+Demo_Course_1",
"sectionIds": Array [
@@ -394,8 +408,6 @@ Object {
"block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
"complete": false,
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
"effortActivities": 2,
"effortTime": 15,
"id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
"resumeBlock": false,
"sequenceIds": Array [
@@ -409,8 +421,8 @@ Object {
"complete": false,
"description": null,
"due": null,
"effortActivities": undefined,
"effortTime": undefined,
"effortActivities": 2,
"effortTime": 15,
"icon": null,
"id": "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",
@@ -482,7 +494,6 @@ Object {
"courseHome": Object {
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
"courseStatus": "loaded",
"gradesFeatureIsLocked": false,
"targetUserId": undefined,
"toastBodyLink": null,
"toastBodyText": null,
@@ -500,6 +511,14 @@ Object {
"courseHomeMeta": Object {
"course-v1:edX+DemoX+Demo_Course_1": Object {
"canLoadCourseware": false,
"courseAccess": Object {
"additionalContextUserMessage": null,
"developerMessage": null,
"errorCode": null,
"hasAccess": true,
"userFragment": null,
"userMessage": null,
},
"id": "course-v1:edX+DemoX+Demo_Course_1",
"isEnrolled": false,
"isSelfPaced": false,
@@ -507,6 +526,7 @@ Object {
"number": "DemoX",
"org": "edX",
"originalUserIsStaff": false,
"start": "2013-02-05T05:00:00Z",
"tabs": Array [
Object {
"slug": "outline",
@@ -564,6 +584,8 @@ Object {
"courseId": "course-v1:edX+DemoX+Demo_Course_1",
"end": "3027-03-31T00:00:00Z",
"enrollmentMode": "audit",
"gradesFeatureIsFullyLocked": false,
"gradesFeatureIsPartiallyLocked": false,
"gradingPolicy": Object {
"assignmentPolicies": Array [
Object {
@@ -590,9 +612,24 @@ Object {
"blockKey": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345",
"displayName": "First subsection",
"hasGradedAssignment": true,
"learnerHasAccess": true,
"numPointsEarned": 0,
"numPointsPossible": 1,
"numPointsPossible": 3,
"percentGraded": 0,
"problemScores": Array [
Object {
"earned": 0,
"possible": 1,
},
Object {
"earned": 0,
"possible": 1,
},
Object {
"earned": 0,
"possible": 1,
},
],
"showCorrectness": "always",
"showGrades": true,
"url": "http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection",
@@ -609,6 +646,12 @@ Object {
"numPointsEarned": 1,
"numPointsPossible": 1,
"percentGraded": 1,
"problemScores": Array [
Object {
"earned": 1,
"possible": 1,
},
],
"showCorrectness": "always",
"showGrades": true,
"url": "http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection",

26
src/course-home/data/api.js
View File

@@ -111,8 +111,6 @@ export function normalizeOutlineBlocks(courseId, blocks) {
switch (block.type) {
case 'course':
models.courses[block.id] = {
effortActivities: block.effort_activities,
effortTime: block.effort_time,
id: courseId,
title: block.display_name,
sectionIds: block.children || [],
@@ -123,8 +121,6 @@ export function normalizeOutlineBlocks(courseId, blocks) {
case 'chapter':
models.sections[block.id] = {
complete: block.complete,
effortActivities: block.effort_activities,
effortTime: block.effort_time,
id: block.id,
title: block.display_name,
resumeBlock: block.resume_block,
@@ -253,6 +249,26 @@ export async function getProgressTabData(courseId, targetUserId) {
// in order to preserve a course team's desired grade formatting.
camelCasedData.gradingPolicy.gradeRange = data.grading_policy.grade_range;
camelCasedData.gradesFeatureIsFullyLocked = camelCasedData.completionSummary.lockedCount > 0;
camelCasedData.gradesFeatureIsPartiallyLocked = false;
if (camelCasedData.gradesFeatureIsFullyLocked) {
camelCasedData.sectionScores.forEach((chapter) => {
chapter.subsections.forEach((subsection) => {
// If something is eligible to be gated by content type gating and would show up on the progress page
if (subsection.assignmentType !== null && subsection.hasGradedAssignment && subsection.showGrades
&& (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)) {
// but the learner still has access to it, then we are in a partially locked, rather than fully locked state
// since the learner has access to some (but not all) content that would normally be locked
if (subsection.learnerHasAccess) {
camelCasedData.gradesFeatureIsPartiallyLocked = true;
camelCasedData.gradesFeatureIsFullyLocked = false;
}
}
});
});
}
return camelCasedData;
} catch (error) {
const { httpErrorStatus } = error && error.customAttributes;
@@ -268,7 +284,7 @@ export async function getProgressTabData(courseId, targetUserId) {
}
export async function getProctoringInfoData(courseId, username) {
let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
if (username) {
url += `&username=${encodeURIComponent(username)}`;
}

21
src/course-home/data/slice.js
View File

@@ -4,18 +4,26 @@ import { createSlice } from '@reduxjs/toolkit';
export const LOADING = 'loading';
export const LOADED = 'loaded';
export const FAILED = 'failed';
export const DENIED = 'denied';
const slice = createSlice({
name: 'course-home',
initialState: {
courseStatus: 'loading',
courseId: null,
gradesFeatureIsLocked: false,
toastBodyText: null,
toastBodyLink: null,
toastHeader: '',
},
reducers: {
fetchTabDenied: (state, { payload }) => {
state.courseId = payload.courseId;
state.courseStatus = DENIED;
},
fetchTabFailure: (state, { payload }) => {
state.courseId = payload.courseId;
state.courseStatus = FAILED;
},
fetchTabRequest: (state, { payload }) => {
state.courseId = payload.courseId;
state.courseStatus = LOADING;
@@ -25,10 +33,6 @@ const slice = createSlice({
state.targetUserId = payload.targetUserId;
state.courseStatus = LOADED;
},
fetchTabFailure: (state, { payload }) => {
state.courseId = payload.courseId;
state.courseStatus = FAILED;
},
setCallToActionToast: (state, { payload }) => {
const {
header,
@@ -39,18 +43,15 @@ const slice = createSlice({
state.toastBodyText = linkText;
state.toastHeader = header;
},
setGradesFeatureStatus: (state, { payload }) => {
state.gradesFeatureIsLocked = payload.gradesFeatureIsLocked;
},
},
});
export const {
fetchTabDenied,
fetchTabFailure,
fetchTabRequest,
fetchTabSuccess,
fetchTabFailure,
setCallToActionToast,
setGradesFeatureStatus,
} = slice.actions;
export const {

5
src/course-home/data/thunks.js
View File

@@ -17,6 +17,7 @@ import {
} from '../../generic/model-store';
import {
// fetchTabDenied,
fetchTabFailure,
fetchTabRequest,
fetchTabSuccess,
@@ -61,6 +62,10 @@ export function fetchTab(courseId, tab, getTabData, targetUserId) {
logError(tabDataResult.reason);
}
// Disable the access-denied path for now - it caused a regression
/* if (fetchedCourseHomeCourseMetadata && !courseHomeCourseMetadataResult.value.courseAccess.hasAccess) {
dispatch(fetchTabDenied({ courseId }));
} else */
if (fetchedCourseHomeCourseMetadata && fetchedTabData) {
dispatch(fetchTabSuccess({ courseId, targetUserId }));
} else {

72
src/course-home/dates-tab/DatesTab.test.jsx
View File

@@ -23,19 +23,24 @@ jest.mock('@edx/frontend-platform/analytics');
describe('DatesTab', () => {
let axiosMock;
let store;
let component;
const store = initializeStore();
const component = (
<AppProvider store={store}>
<UserMessagesProvider>
<Route path="/course/:courseId/dates">
<TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
<DatesTab />
</TabContainer>
</Route>
</UserMessagesProvider>
</AppProvider>
);
beforeEach(() => {
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
store = initializeStore();
component = (
<AppProvider store={store}>
<UserMessagesProvider>
<Route path="/course/:courseId/dates">
<TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
<DatesTab />
</TabContainer>
</Route>
</UserMessagesProvider>
</AppProvider>
);
});
const datesTabData = Factory.build('datesTabData');
let courseMetadata = Factory.build('courseHomeMetadata');
@@ -74,7 +79,6 @@ describe('DatesTab', () => {
describe('when receiving a full set of dates data', () => {
beforeEach(() => {
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
axiosMock.onGet(datesUrl).reply(200, datesTabData);
history.push(`/course/${courseId}/dates`); // so tab can pull course id from url
@@ -142,7 +146,6 @@ describe('DatesTab', () => {
describe('Suggested schedule messaging', () => {
beforeEach(() => {
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
setMetadata({ is_self_paced: true, is_enrolled: true });
history.push(`/course/${courseId}/dates`);
});
@@ -295,4 +298,45 @@ describe('DatesTab', () => {
});
});
});
describe.skip('when receiving an access denied error', () => {
// These tests could go into any particular tab, as they all go through the same flow. But dates tab works.
async function renderDenied(errorCode) {
setMetadata({
course_access: {
has_access: false,
error_code: errorCode,
additional_context_user_message: 'uhoh oh no', // only used by audit_expired
},
});
render(component);
await waitForElementToBeRemoved(screen.getByRole('status'));
}
beforeEach(() => {
axiosMock.onGet(datesUrl).reply(200, datesTabData);
history.push(`/course/${courseId}/dates`); // so tab can pull course id from url
});
it('redirects to course survey for a survey_required error code', async () => {
await renderDenied('survey_required');
expect(global.location.href).toEqual(`http://localhost/redirect/survey/${courseMetadata.id}`);
});
it('redirects to dashboard for an unfulfilled_milestones error code', async () => {
await renderDenied('unfulfilled_milestones');
expect(global.location.href).toEqual('http://localhost/redirect/dashboard');
});
it('redirects to the dashboard with an attached access_response_error for an audit_expired error code', async () => {
await renderDenied('audit_expired');
expect(global.location.href).toEqual('http://localhost/redirect/dashboard?access_response_error=uhoh%20oh%20no');
});
it('redirects to the dashboard with a notlive start date for a course_not_started error code', async () => {
await renderDenied('course_not_started');
expect(global.location.href).toEqual('http://localhost/redirect/dashboard?notlive=2/5/2013'); // date from factory
});
});
});

142
src/course-home/outline-tab/OutlineTab.test.jsx
View File

@@ -29,7 +29,7 @@ describe('Outline Tab', () => {
const enrollmentUrl = `${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`;
const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/save_course_goal`;
const outlineUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
const proctoringInfoUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
const proctoringInfoUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
const store = initializeStore();
const defaultMetadata = Factory.build('courseHomeMetadata', { id: courseId });
@@ -485,8 +485,8 @@ describe('Outline Tab', () => {
});
await fetchAndRender();
const alert = await screen.findByText('Welcome to Demonstration Course');
expect(alert.parentElement).toHaveAttribute('role', 'alert');
const alert = await screen.findByTestId('private-course-alert');
expect(alert).toHaveAttribute('role', 'alert');
expect(screen.queryByRole('button', { name: 'Enroll now' })).not.toBeInTheDocument();
expect(screen.getByText('You must be enrolled in the course to see course content.')).toBeInTheDocument();
@@ -495,8 +495,8 @@ describe('Outline Tab', () => {
it('displays alert for unenrolled user', async () => {
await fetchAndRender();
const alert = await screen.findByText('Welcome to Demonstration Course');
expect(alert.parentElement).toHaveAttribute('role', 'alert');
const alert = await screen.findByTestId('private-course-alert');
expect(alert).toHaveAttribute('role', 'alert');
expect(screen.getByRole('button', { name: 'Enroll now' })).toBeInTheDocument();
});
@@ -693,6 +693,138 @@ describe('Outline Tab', () => {
await fetchAndRender();
expect(screen.queryByText('Verify your identity to earn a certificate!')).toBeInTheDocument();
});
it('tracks request cert button', async () => {
sendTrackEvent.mockClear();
const now = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
setMetadata({ is_enrolled: true });
setTabData({
cert_data: {
cert_status: CERT_STATUS_TYPE.REQUESTING,
cert_web_view_url: null,
download_url: null,
},
}, {
date_blocks: [
{
date_type: 'course-end-date',
date: yesterday.toISOString(),
title: 'End',
},
{
date_type: 'certificate-available-date',
date: tomorrow.toISOString(),
title: 'Cert Available',
},
{
date_type: 'verification-deadline-date',
date: tomorrow.toISOString(),
link_text: 'Verify',
title: 'Verification Upgrade Deadline',
},
],
});
await fetchAndRender();
sendTrackEvent.mockClear();
const requestingButton = screen.getByRole('button', { name: 'Request certificate' });
fireEvent.click(requestingButton);
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_request_cert_button.clicked',
{
courserun_key: 'course-v1:edX+Test+run',
is_staff: false,
org_key: 'edX',
});
});
it('tracks download cert button', async () => {
sendTrackEvent.mockClear();
const now = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
setMetadata({ is_enrolled: true });
setTabData({
cert_data: {
cert_status: CERT_STATUS_TYPE.DOWNLOADABLE,
cert_web_view_url: null,
download_url: null,
},
}, {
date_blocks: [
{
date_type: 'course-end-date',
date: yesterday.toISOString(),
title: 'End',
},
{
date_type: 'certificate-available-date',
date: tomorrow.toISOString(),
title: 'Cert Available',
},
{
date_type: 'verification-deadline-date',
date: tomorrow.toISOString(),
link_text: 'Verify',
title: 'Verification Upgrade Deadline',
},
],
});
await fetchAndRender();
sendTrackEvent.mockClear();
const requestingButton = screen.getByRole('button', { name: 'View my certificate' });
fireEvent.click(requestingButton);
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_downloadable_button.clicked',
{
courserun_key: 'course-v1:edX+Test+run',
is_staff: false,
org_key: 'edX',
});
});
it('tracks unverified cert button', async () => {
sendTrackEvent.mockClear();
const now = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
setMetadata({ is_enrolled: true });
setTabData({
cert_data: {
cert_status: CERT_STATUS_TYPE.UNVERIFIED,
cert_web_view_url: null,
download_url: null,
},
}, {
date_blocks: [
{
date_type: 'course-end-date',
date: yesterday.toISOString(),
title: 'End',
},
{
date_type: 'certificate-available-date',
date: tomorrow.toISOString(),
title: 'Cert Available',
},
{
date_type: 'verification-deadline-date',
date: tomorrow.toISOString(),
link_text: 'Verify',
title: 'Verification Upgrade Deadline',
},
],
});
await fetchAndRender();
sendTrackEvent.mockClear();
const requestingButton = screen.getByRole('link', { name: 'Verify my ID' });
fireEvent.click(requestingButton);
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_outline.certificate_alert_unverified_button.clicked',
{
courserun_key: 'course-v1:edX+Test+run',
is_staff: false,
org_key: 'edX',
});
});
});
describe('Scheduled Content Alert', () => {

2
src/course-home/outline-tab/Section.jsx
View File

@@ -6,7 +6,6 @@ import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/f
import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import EffortEstimate from '../../shared/effort-estimate';
import SequenceLink from './SequenceLink';
import { useModel } from '../../generic/model-store';
@@ -67,7 +66,6 @@ function Section({
<span className="sr-only">
, {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
</span>
<EffortEstimate className="ml-3 align-middle" block={section} />
</div>
</div>
);

26
src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx
View File

@@ -12,6 +12,8 @@ import { useDispatch } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheckCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import certMessages from './messages';
import certStatusMessages from '../../../progress-tab/certificate-status/messages';
import { requestCert } from '../../../data/thunks';
@@ -33,11 +35,21 @@ function CertificateStatusAlert({ intl, payload }) {
certURL,
isWebCert,
userTimezone,
org,
} = payload;
// eslint-disable-next-line react/prop-types
const AlertWrapper = (props) => props.children(props);
const sendAlertClickTracking = (id) => {
const { administrator } = getAuthenticatedUser();
sendTrackEvent(id, {
org_key: org,
courserun_key: courseId,
is_staff: administrator,
});
};
const renderCertAwardedStatus = () => {
const alertProps = {
variant: 'success',
@@ -53,7 +65,7 @@ function CertificateStatusAlert({ intl, payload }) {
<p>
<FormattedMessage
id="learning.outline.alert.cert.when"
defaultMessage="This course ended on {courseEndDateFormatted}. Final grades and certificates are
defaultMessage="This course ends on {courseEndDateFormatted}. Final grades and certificates are
scheduled to be available after {certificateAvailableDate}."
values={{
courseEndDateFormatted,
@@ -72,12 +84,18 @@ function CertificateStatusAlert({ intl, payload }) {
}
alertProps.buttonVisible = true;
alertProps.buttonLink = certURL;
alertProps.buttonAction = () => {
sendAlertClickTracking('edx.ui.lms.course_outline.certificate_alert_downloadable_button.clicked');
};
} else if (certStatus === CERT_STATUS_TYPE.REQUESTING) {
alertProps.header = intl.formatMessage(certMessages.certStatusDownloadableHeader);
alertProps.buttonMessage = intl.formatMessage(certStatusMessages.requestableButton);
alertProps.buttonVisible = true;
alertProps.buttonLink = '';
alertProps.buttonAction = () => { dispatch(requestCert(courseId)); };
alertProps.buttonAction = () => {
sendAlertClickTracking('edx.ui.lms.course_outline.certificate_alert_request_cert_button.clicked');
dispatch(requestCert(courseId));
};
}
return alertProps;
};
@@ -92,6 +110,9 @@ function CertificateStatusAlert({ intl, payload }) {
body: intl.formatMessage(certStatusMessages.unverifiedHomeBody),
buttonVisible: true,
buttonLink: getConfig().SUPPORT_URL_ID_VERIFICATION,
buttonAction: () => {
sendAlertClickTracking('edx.ui.lms.course_outline.certificate_alert_unverified_button.clicked');
},
};
return alertProps;
@@ -162,6 +183,7 @@ CertificateStatusAlert.propTypes = {
certURL: PropTypes.string,
isWebCert: PropTypes.bool,
userTimezone: PropTypes.string,
org: PropTypes.string,
}).isRequired,
};

2
src/course-home/outline-tab/alerts/certificate-status-alert/hooks.js
View File

@@ -23,6 +23,7 @@ function verifyCertStatusType(status) {
function useCertificateStatusAlert(courseId) {
const {
isEnrolled,
org,
} = useModel('courseHomeMeta', courseId);
const {
@@ -61,6 +62,7 @@ function useCertificateStatusAlert(courseId) {
courseEndDate: endBlock && endBlock.date,
userTimezone,
isWebCert,
org,
};
useAlert(isVisible, {

6
src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
View File

@@ -6,8 +6,8 @@ import {
FormattedRelative,
FormattedTime,
} from '@edx/frontend-platform/i18n';
import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
import { Alert } from '@edx/paragon';
import { Info } from '@edx/paragon/icons';
const DAY_MS = 24 * 60 * 60 * 1000; // in ms
@@ -78,7 +78,7 @@ function CourseEndAlert({ payload }) {
}
return (
<Alert type={ALERT_TYPES.INFO}>
<Alert variant="info" icon={Info}>
<strong>{msg}</strong><br />
{description}
</Alert>

8
src/course-home/outline-tab/alerts/course-start-alert/CourseStartAlert.jsx
View File

@@ -6,8 +6,8 @@ import {
FormattedRelative,
FormattedTime,
} from '@edx/frontend-platform/i18n';
import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';
import { Alert } from '@edx/paragon';
import { Info } from '@edx/paragon/icons';
const DAY_MS = 24 * 60 * 60 * 1000; // in ms
@@ -30,7 +30,7 @@ function CourseStartAlert({ payload }) {
const delta = new Date(startDate) - new Date();
if (delta < DAY_MS) {
return (
<Alert type={ALERT_TYPES.INFO}>
<Alert variant="info" icon={Info}>
<FormattedMessage
id="learning.outline.alert.start.short"
defaultMessage="Course starts {timeRemaining} at {courseStartTime}."
@@ -55,7 +55,7 @@ function CourseStartAlert({ payload }) {
}
return (
<Alert type={ALERT_TYPES.INFO}>
<Alert variant="info" icon={Info}>
<strong>
<FormattedMessage
id="learning.outline.alert.end.long"

23
src/course-home/outline-tab/alerts/private-course-alert/PrivateCourseAlert.jsx
View File

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
import { Button, Hyperlink } from '@edx/paragon';
import { Alert, Button, Hyperlink } from '@edx/paragon';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { Alert } from '../../../../generic/user-messages';
import enrollmentMessages from '../../../../alerts/enrollment-alert/messages';
import genericMessages from '../../../../generic/messages';
import messages from './messages';
import outlineMessages from '../../messages';
import { useEnrollClickHandler } from '../../../../alerts/enrollment-alert/hooks';
import { useModel } from '../../../../generic/model-store';
@@ -32,12 +32,13 @@ function PrivateCourseAlert({ intl, payload }) {
intl.formatMessage(enrollmentMessages.success),
);
const enrollNow = (
const enrollNowButton = (
<Button
disabled={loading}
variant="link"
className="p-0 border-0 align-top"
className="p-0 border-0 align-top mr-1"
style={{ textDecoration: 'underline' }}
size="sm"
onClick={enrollClickHandler}
>
{intl.formatMessage(enrollmentMessages.enrollNowInline)}
@@ -63,7 +64,7 @@ function PrivateCourseAlert({ intl, payload }) {
);
return (
<Alert type="welcome">
<Alert variant="light" data-testid="private-course-alert">
{anonymousUser && (
<>
<p className="font-weight-bold">
@@ -84,15 +85,11 @@ function PrivateCourseAlert({ intl, payload }) {
<>
<p className="font-weight-bold">{intl.formatMessage(outlineMessages.welcomeTo)} {title}</p>
{canEnroll && (
<>
<FormattedMessage
id="learning.privateCourse.canEnroll"
description="Prompts the user to enroll in the course to see course content."
defaultMessage="{enrollNow} to access the full course."
values={{ enrollNow }}
/>
<div className="d-flex">
{enrollNowButton}
{intl.formatMessage(messages.toAccess)}
{loading && <FontAwesomeIcon icon={faSpinner} spin />}
</>
</div>
)}
{!canEnroll && (
<>

7
src/course-home/outline-tab/alerts/private-course-alert/messages.js
View File

@@ -1,10 +1,11 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
enroll: {
toAccess: {
id: 'alert.enroll',
defaultMessage: 'You must be enrolled in the course to see course content.',
description: 'Text instructing the learner to enroll in the course in order to see course content.',
defaultMessage: ' to access the full course.',
description: 'Text instructing the learner to enroll in the course in order to see course content. The full string'
+ 'would say "Enroll now to access the full course", where "Enroll now" is a button.',
},
});

3
src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
View File

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import camelCase from 'lodash.camelcase';
import PropTypes from 'prop-types';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Button } from '@edx/paragon';
@@ -131,7 +130,7 @@ function ProctoringInfoPanel({ courseId, username, intl }) {
{isNotYetSubmitted(status) && (
<>
{!isNotYetReleased(releaseDate) && (
<Button variant="primary" block href={`${getConfig().LMS_BASE_URL}${link}`}>
<Button variant="primary" block href={link}>
{readableStatus === readableStatuses.otherCourseApproved && (
<>
{intl.formatMessage(messages.proctoringOnboardingPracticeButton)}

86
src/course-home/outline-tab/widgets/WelcomeMessage.jsx
View File

@@ -2,14 +2,13 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Button, TransitionReplace } from '@edx/paragon';
import { Alert, Button, TransitionReplace } from '@edx/paragon';
import truncate from 'truncate-html';
import { useDispatch } from 'react-redux';
import LmsHtmlFragment from '../LmsHtmlFragment';
import messages from '../messages';
import { useModel } from '../../../generic/model-store';
import { Alert } from '../../../generic/user-messages';
import { dismissWelcomeMessage } from '../../data/thunks';
function WelcomeMessage({ courseId, intl }) {
@@ -27,52 +26,47 @@ function WelcomeMessage({ courseId, intl }) {
const messageCanBeShortened = shortWelcomeMessageHtml.length < welcomeMessageHtml.length;
const [showShortMessage, setShowShortMessage] = useState(messageCanBeShortened);
const dispatch = useDispatch();
return (
display && (
<Alert
type="welcome"
dismissible
onDismiss={() => {
setDisplay(false);
dispatch(dismissWelcomeMessage(courseId));
}}
footer={messageCanBeShortened && (
<div className="row w-100 m-0">
<div className="col-12 col-sm-auto p-0">
<Button
block
onClick={() => setShowShortMessage(!showShortMessage)}
variant="outline-primary"
>
{showShortMessage ? intl.formatMessage(messages.welcomeMessageShowMoreButton)
: intl.formatMessage(messages.welcomeMessageShowLessButton)}
</Button>
</div>
</div>
<Alert
data-testid="alert-container-welcome"
variant="light"
stacked
dismissible
show={display}
onClose={() => {
setDisplay(false);
dispatch(dismissWelcomeMessage(courseId));
}}
actions={messageCanBeShortened ? [
<Button
onClick={() => setShowShortMessage(!showShortMessage)}
variant="outline-primary"
>
{showShortMessage ? intl.formatMessage(messages.welcomeMessageShowMoreButton)
: intl.formatMessage(messages.welcomeMessageShowLessButton)}
</Button>,
] : []}
>
<TransitionReplace className="mb-3" enterDuration={400} exitDuration={200}>
{showShortMessage ? (
<LmsHtmlFragment
className="inline-link"
data-testid="short-welcome-message-iframe"
key="short-html"
html={shortWelcomeMessageHtml}
title={intl.formatMessage(messages.welcomeMessage)}
/>
) : (
<LmsHtmlFragment
className="inline-link"
data-testid="long-welcome-message-iframe"
key="full-html"
html={welcomeMessageHtml}
title={intl.formatMessage(messages.welcomeMessage)}
/>
)}
>
<TransitionReplace className="mb-3" enterDuration={200} exitDuration={200}>
{showShortMessage ? (
<LmsHtmlFragment
className="inline-link"
data-testid="short-welcome-message-iframe"
key="short-html"
html={shortWelcomeMessageHtml}
title={intl.formatMessage(messages.welcomeMessage)}
/>
) : (
<LmsHtmlFragment
className="inline-link"
data-testid="long-welcome-message-iframe"
key="full-html"
html={welcomeMessageHtml}
title={intl.formatMessage(messages.welcomeMessage)}
/>
)}
</TransitionReplace>
</Alert>
)
</TransitionReplace>
</Alert>
);
}

19
src/course-home/progress-tab/ProgressTab.jsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import React from 'react';
import { layoutGenerator } from 'react-break';
import { useDispatch, useSelector } from 'react-redux';
import { useSelector } from 'react-redux';
import CertificateStatus from './certificate-status/CertificateStatus';
import CourseCompletion from './course-completion/CourseCompletion';
@@ -10,7 +10,6 @@ import GradeSummary from './grades/grade-summary/GradeSummary';
import ProgressHeader from './ProgressHeader';
import RelatedLinks from './related-links/RelatedLinks';
import { setGradesFeatureStatus } from '../data/slice';
import { useModel } from '../../generic/model-store';
function ProgressTab() {
@@ -19,18 +18,10 @@ function ProgressTab() {
} = useSelector(state => state.courseHome);
const {
completionSummary: {
lockedCount,
},
gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const gradesFeatureIsLocked = lockedCount > 0;
const applyLockedOverlay = gradesFeatureIsLocked ? 'locked-overlay' : '';
const dispatch = useDispatch();
useEffect(() => {
dispatch(setGradesFeatureStatus({ gradesFeatureIsLocked }));
}, []);
const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
const layout = layoutGenerator({
mobile: 0,
@@ -50,7 +41,7 @@ function ProgressTab() {
<CertificateStatus />
</OnMobile>
<CourseGrade />
<div className={`grades my-4 p-4 rounded shadow-sm ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsLocked}>
<div className={`grades my-4 p-4 rounded shadow-sm ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
<GradeSummary />
<DetailedGrades />
</div>

161
src/course-home/progress-tab/ProgressTab.test.jsx
View File

@@ -111,6 +111,7 @@ describe('Progress Tab', () => {
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 2,
@@ -176,6 +177,7 @@ describe('Progress Tab', () => {
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 8,
num_points_possible: 10,
@@ -252,6 +254,26 @@ describe('Progress Tab', () => {
sku: 'ABCD1234',
upgrade_url: 'edx.org/upgrade',
},
section_scores: [
{
display_name: 'First section',
subsections: [
{
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
learner_has_access: false,
has_graded_assignment: true,
num_points_earned: 8,
num_points_possible: 10,
percent_graded: 1.0,
show_correctness: 'always',
show_grades: true,
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
},
],
},
],
});
await fetchAndRender();
expect(screen.getByText('locked feature')).toBeInTheDocument();
@@ -259,7 +281,7 @@ describe('Progress Tab', () => {
expect(screen.getAllByRole('link', 'Unlock now')).toHaveLength(3);
});
it('sends event on click of upgrade button in locked content header (CourseGradeHeader)', async () => {
it('sends events on click of upgrade button in locked content header (CourseGradeHeader)', async () => {
sendTrackEvent.mockClear();
setTabData({
completion_summary: {
@@ -275,6 +297,26 @@ describe('Progress Tab', () => {
sku: 'ABCD1234',
upgrade_url: 'edx.org/upgrade',
},
section_scores: [
{
display_name: 'First section',
subsections: [
{
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
learner_has_access: false,
has_graded_assignment: true,
num_points_earned: 8,
num_points_possible: 10,
percent_graded: 1.0,
show_correctness: 'always',
show_grades: true,
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
},
],
},
],
});
await fetchAndRender();
expect(screen.getByText('locked feature')).toBeInTheDocument();
@@ -283,12 +325,20 @@ describe('Progress Tab', () => {
const upgradeButton = screen.getAllByRole('link', 'Unlock now')[0];
fireEvent.click(upgradeButton);
expect(sendTrackEvent).toHaveBeenCalledTimes(1);
expect(sendTrackEvent).toHaveBeenCalledTimes(2);
expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.course_progress.grades_upgrade.clicked', {
org_key: 'edX',
courserun_key: courseId,
is_staff: false,
});
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
org_key: 'edX',
courserun_key: courseId,
linkCategory: '(none)',
linkName: 'progress_locked',
linkType: 'button',
pageName: 'progress',
});
});
it('renders locked feature preview with no upgrade button when user has locked content but cannot upgrade', async () => {
@@ -298,6 +348,26 @@ describe('Progress Tab', () => {
incomplete_count: 1,
locked_count: 1,
},
section_scores: [
{
display_name: 'First section',
subsections: [
{
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
learner_has_access: false,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 2,
percent_graded: 1.0,
show_correctness: 'always',
show_grades: true,
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
},
],
},
],
});
await fetchAndRender();
expect(screen.getByText('locked feature')).toBeInTheDocument();
@@ -309,6 +379,62 @@ describe('Progress Tab', () => {
expect(screen.queryByText('locked feature')).not.toBeInTheDocument();
});
it('renders limited feature preview with upgrade button when user has access to some content that would typically be locked', async () => {
setTabData({
completion_summary: {
complete_count: 1,
incomplete_count: 1,
locked_count: 1,
},
verified_mode: {
access_expiration_date: '2050-01-01T12:00:00',
currency: 'USD',
currency_symbol: '$',
price: 149,
sku: 'ABCD1234',
upgrade_url: 'edx.org/upgrade',
},
section_scores: [
{
display_name: 'First section',
subsections: [
{
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@123456',
display_name: 'First subsection',
learner_has_access: false,
has_graded_assignment: true,
num_points_earned: 8,
num_points_possible: 10,
percent_graded: 1.0,
show_correctness: 'always',
show_grades: true,
url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
},
{
assignment_type: 'Exam',
display_name: 'Second subsection',
learner_has_access: true,
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',
},
],
},
],
});
await fetchAndRender();
expect(screen.getByText('limited feature')).toBeInTheDocument();
expect(screen.getByText('Unlock to work towards a certificate.')).toBeInTheDocument();
expect(screen.queryAllByText('You have limited access to graded assignments as part of the audit track in this course.')).toHaveLength(2);
expect(screen.queryAllByTestId('blocked-icon')).toHaveLength(4);
});
it('renders correct current grade tooltip when showGrades is false', async () => {
// The learner has a 50% on the first assignment and a 100% on the second, making their grade a 75%
// The second assignment has showGrades set to false, so the grade reflected to the learner should be 50%.
@@ -321,6 +447,7 @@ describe('Progress Tab', () => {
assignment_type: 'Homework',
block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
display_name: 'First subsection',
learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 2,
@@ -337,6 +464,7 @@ describe('Progress Tab', () => {
{
assignment_type: 'Homework',
display_name: 'Second subsection',
learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 1,
@@ -531,6 +659,7 @@ describe('Progress Tab', () => {
{
assignment_type: 'Homework',
display_name: 'Second subsection',
learner_has_access: true,
has_graded_assignment: true,
num_points_earned: 1,
num_points_possible: 1,
@@ -554,8 +683,8 @@ describe('Progress Tab', () => {
await fetchAndRender();
expect(screen.getByText('Detailed grades')).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'First subsection' }));
expect(screen.getByRole('link', { name: 'Second subsection' }));
expect(screen.getByText('First subsection'));
expect(screen.getByText('Second subsection'));
});
it('sends event on click of subsection link', async () => {
@@ -591,6 +720,20 @@ describe('Progress Tab', () => {
});
});
it('renders individual problem score drawer', async () => {
sendTrackEvent.mockClear();
await fetchAndRender();
expect(screen.getByText('Detailed grades')).toBeInTheDocument();
const problemScoreDrawerToggle = screen.getByRole('button', { name: 'Toggle individual problem scores for First subsection' });
expect(problemScoreDrawerToggle).toBeInTheDocument();
// Open the problem score drawer
fireEvent.click(problemScoreDrawerToggle);
expect(screen.getByText('Problem Scores:')).toBeInTheDocument();
expect(screen.getAllByText('0/1')).toHaveLength(3);
});
it('render message when section scores are not populated', async () => {
setTabData({
section_scores: [],
@@ -958,13 +1101,21 @@ describe('Progress Tab', () => {
const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
fireEvent.click(upgradeLink);
expect(sendTrackEvent).toHaveBeenCalledTimes(2);
expect(sendTrackEvent).toHaveBeenCalledTimes(3);
expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.ui.lms.course_progress.certificate_status.clicked', {
org_key: 'edX',
courserun_key: courseId,
is_staff: false,
certificate_status_variant: 'audit_passing',
});
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
org_key: 'edX',
courserun_key: courseId,
linkCategory: '(none)',
linkName: 'progress_certificate',
linkType: 'button',
pageName: 'progress',
});
});
it('Displays nothing if audit only', async () => {

26
src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
View File

@@ -36,6 +36,9 @@ function CertificateStatus({ intl }) {
verificationData,
verifiedMode,
} = useModel('progress', courseId);
const {
certificateAvailableDate,
} = certificateData || {};
const mode = getCourseExitMode(
certificateData,
@@ -43,6 +46,12 @@ function CertificateStatus({ intl }) {
isEnrolled,
userHasPassingGrade,
);
const eventProperties = {
org_key: org,
courserun_key: courseId,
};
const dispatch = useDispatch();
const { administrator } = getAuthenticatedUser();
@@ -63,6 +72,7 @@ function CertificateStatus({ intl }) {
let buttonLocation;
let buttonText;
let endDate;
let certAvailabilityDate;
let gradeEventName = 'not_passing';
if (userHasPassingGrade) {
@@ -137,12 +147,13 @@ function CertificateStatus({ intl }) {
case 'earned_but_not_available':
certCase = 'notAvailable';
endDate = <FormattedDate value={end} day="numeric" month="long" year="numeric" />;
certAvailabilityDate = <FormattedDate value={certificateAvailableDate} day="numeric" month="long" year="numeric" />;
body = (
<FormattedMessage
id="courseCelebration.certificateBody.notAvailable.endDate"
defaultMessage="Your certificate will be available soon! After this course officially ends on {endDate}, you will receive an
email notification with your certificate."
values={{ endDate }}
defaultMessage="This course ends on {endDate}. Final grades and certificates are
scheduled to be available after {certAvailabilityDate}."
values={{ endDate, certAvailabilityDate }}
/>
);
break;
@@ -193,6 +204,15 @@ function CertificateStatus({ intl }) {
is_staff: administrator,
certificate_status_variant: certEventName,
});
if (certCase === 'upgrade') {
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
...eventProperties,
linkCategory: '(none)',
linkName: 'progress_certificate',
linkType: 'button',
pageName: 'progress',
});
}
};
return (

4
src/course-home/progress-tab/certificate-status/messages.js
View File

@@ -61,10 +61,6 @@ const messages = defineMessages({
id: 'progress.certificateStatus.notAvailableHeader',
defaultMessage: 'Certificate status',
},
notAvailableBody: {
id: 'progress.certificateStatus.notAvailableBody',
defaultMessage: 'Your certificate will be available soon! After this course officially ends on {end_date}, you will receive an email notification with your certificate.',
},
upgradeHeader: {
id: 'progress.certificateStatus.upgradeHeader',
defaultMessage: 'Earn a certificate',

9
src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
View File

@@ -13,10 +13,11 @@ import messages from '../messages';
function CourseGrade({ intl }) {
const {
courseId,
gradesFeatureIsLocked,
} = useSelector(state => state.courseHome);
const {
gradesFeatureIsFullyLocked,
gradesFeatureIsPartiallyLocked,
gradingPolicy: {
gradeRange,
},
@@ -24,12 +25,12 @@ function CourseGrade({ intl }) {
const passingGrade = Number((Math.min(...Object.values(gradeRange)) * 100).toFixed(0));
const applyLockedOverlay = gradesFeatureIsLocked ? 'locked-overlay' : '';
const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
return (
<section className="text-dark-700 my-4 rounded shadow-sm">
{gradesFeatureIsLocked && <CourseGradeHeader />}
<div className={applyLockedOverlay} aria-hidden={gradesFeatureIsLocked}>
{(gradesFeatureIsFullyLocked || gradesFeatureIsPartiallyLocked) && <CourseGradeHeader />}
<div className={applyLockedOverlay} aria-hidden={gradesFeatureIsFullyLocked}>
<div className="row w-100 m-0 p-4">
<div className="col-12 col-sm-6 p-0 pr-sm-2">
<h2>{intl.formatMessage(messages.grades)}</h2>

28
src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
View File

@@ -19,8 +19,14 @@ function CourseGradeHeader({ intl }) {
} = useModel('courseHomeMeta', courseId);
const {
verifiedMode,
gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const eventProperties = {
org_key: org,
courserun_key: courseId,
};
const { administrator } = getAuthenticatedUser();
const logUpgradeButtonClick = () => {
sendTrackEvent('edx.ui.lms.course_progress.grades_upgrade.clicked', {
@@ -28,7 +34,22 @@ function CourseGradeHeader({ intl }) {
courserun_key: courseId,
is_staff: administrator,
});
sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
...eventProperties,
linkCategory: '(none)',
linkName: 'progress_locked',
linkType: 'button',
pageName: 'progress',
});
};
let previewText;
if (verifiedMode) {
previewText = gradesFeatureIsFullyLocked
? intl.formatMessage(messages.courseGradePreviewUnlockCertificateBody)
: intl.formatMessage(messages.courseGradePartialPreviewUnlockCertificateBody);
} else {
previewText = intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody);
}
return (
<div className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
<div className={`col-12 ${verifiedMode ? 'col-md-9' : ''} p-0`}>
@@ -40,13 +61,14 @@ function CourseGradeHeader({ intl }) {
<span aria-hidden="true">
{intl.formatMessage(messages.courseGradePreviewHeaderAriaHidden)}
</span>
{intl.formatMessage(messages.courseGradePreviewHeader)}
{gradesFeatureIsFullyLocked
? intl.formatMessage(messages.courseGradePreviewHeaderLocked)
: intl.formatMessage(messages.courseGradePreviewHeaderLimited)}
</div>
</div>
<div className="row w-100 m-0 p-0 justify-content-end">
<div className="col-11 px-2 p-sm-0 small">
{verifiedMode ? intl.formatMessage(messages.courseGradePreviewUnlockCertificateBody)
: intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody)}
{previewText}
</div>
</div>
</div>

4
src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
View File

@@ -12,7 +12,6 @@ import messages from '../messages';
function GradeBar({ intl, passingGrade }) {
const {
courseId,
gradesFeatureIsLocked,
} = useSelector(state => state.courseHome);
const {
@@ -20,11 +19,12 @@ function GradeBar({ intl, passingGrade }) {
isPassing,
visiblePercent,
},
gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const currentGrade = Number((visiblePercent * 100).toFixed(0));
const lockedTooltipClassName = gradesFeatureIsLocked ? 'locked-overlay' : '';
const lockedTooltipClassName = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
return (
<div className="col-12 col-sm-6 align-self-center">

4
src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
View File

@@ -14,10 +14,10 @@ import messages from '../messages';
function GradeRangeTooltip({ intl, iconButtonClassName, passingGrade }) {
const {
courseId,
gradesFeatureIsLocked,
} = useSelector(state => state.courseHome);
const {
gradesFeatureIsFullyLocked,
gradingPolicy: {
gradeRange,
},
@@ -68,7 +68,7 @@ function GradeRangeTooltip({ intl, iconButtonClassName, passingGrade }) {
src={InfoOutline}
iconAs={Icon}
size="inline"
disabled={gradesFeatureIsLocked}
disabled={gradesFeatureIsFullyLocked}
/>
</OverlayTrigger>
);

16
src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
View File

@@ -5,7 +5,8 @@ import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Hyperlink } from '@edx/paragon';
import { Blocked } from '@edx/paragon/icons';
import { Icon, Hyperlink } from '@edx/paragon';
import { useModel } from '../../../../generic/model-store';
import DetailedGradesTable from './DetailedGradesTable';
@@ -16,12 +17,13 @@ function DetailedGrades({ intl }) {
const { administrator } = getAuthenticatedUser();
const {
courseId,
gradesFeatureIsLocked,
} = useSelector(state => state.courseHome);
const {
org,
} = useModel('courseHomeMeta', courseId);
const {
gradesFeatureIsFullyLocked,
gradesFeatureIsPartiallyLocked,
sectionScores,
} = useModel('progress', courseId);
@@ -40,7 +42,7 @@ function DetailedGrades({ intl }) {
className="muted-link inline-link"
destination={`${getConfig().LMS_BASE_URL}/courses/${courseId}/course`}
onClick={logOutlineLinkClick}
tabIndex={gradesFeatureIsLocked ? '-1' : '0'}
tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}
>
{intl.formatMessage(messages.courseOutline)}
</Hyperlink>
@@ -49,8 +51,14 @@ function DetailedGrades({ intl }) {
return (
<section className="text-dark-700">
<h3 className="h4 mb-3">{intl.formatMessage(messages.detailedGrades)}</h3>
{gradesFeatureIsPartiallyLocked && (
<div className="mb-3 small ml-0 d-inline">
<Icon className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" />
{intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation)}
</div>
)}
{hasSectionScores && (
<DetailedGradesTable sectionScores={sectionScores} />
<DetailedGradesTable />
)}
{!hasSectionScores && (
<p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>

61
src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
View File

@@ -1,32 +1,22 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { DataTable } from '@edx/paragon';
import messages from '../messages';
import { useModel } from '../../../../generic/model-store';
import messages from '../messages';
import SubsectionTitleCell from './SubsectionTitleCell';
function DetailedGradesTable({ intl, sectionScores }) {
function DetailedGradesTable({ intl }) {
const {
courseId,
gradesFeatureIsLocked,
} = useSelector(state => state.courseHome);
const {
org,
} = useModel('courseHomeMeta', courseId);
const { administrator } = getAuthenticatedUser();
const logSubsectionClicked = (blockKey) => {
sendTrackEvent('edx.ui.lms.course_progress.detailed_grades_assignment.clicked', {
org_key: org,
courserun_key: courseId,
is_staff: administrator,
assignment_block_key: blockKey,
});
};
sectionScores,
} = useModel('progress', courseId);
return (
sectionScores.map((chapter) => {
const subsectionScores = chapter.subsections.filter(
@@ -40,24 +30,10 @@ function DetailedGradesTable({ intl, sectionScores }) {
return null;
}
const detailedGradesData = subsectionScores.map((subsection) => {
const title = (
<a
href={subsection.url}
className="muted-link small"
onClick={() => {
logSubsectionClicked(subsection.blockKey);
}}
tabIndex={gradesFeatureIsLocked ? '-1' : '0'}
>
{subsection.displayName}
</a>
);
return {
subsectionTitle: title,
score: `${subsection.numPointsEarned}/${subsection.numPointsPossible}`,
};
});
const detailedGradesData = subsectionScores.map((subsection) => ({
subsectionTitle: <SubsectionTitleCell subsection={subsection} />,
score: <span className={subsection.learnerHasAccess ? '' : 'greyed-out'}>{subsection.numPointsEarned}/{subsection.numPointsPossible}</span>,
}));
return (
<div className="my-3" key={`${chapter.displayName}-grades-table`}>
@@ -89,21 +65,6 @@ function DetailedGradesTable({ intl, sectionScores }) {
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);

33
src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from '../messages';
function ProblemScoreDrawer({ intl, problemScores, subsection }) {
return (
<span className="row w-100 m-0 x-small ml-4 pt-2 pl-1 text-gray-700 flex-nowrap">
<span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(messages.problemScoreLabel)}</span>
<div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
<ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
{problemScores.map(problemScore => (
<li className="ml-3">{problemScore.earned}/{problemScore.possible}</li>
))}
</ul>
</div>
</span>
);
}
ProblemScoreDrawer.propTypes = {
intl: intlShape.isRequired,
problemScores: PropTypes.arrayOf(PropTypes.shape({
earned: PropTypes.number.isRequired,
possible: PropTypes.number.isRequired,
})).isRequired,
subsection: PropTypes.shape({ learnerHasAccess: PropTypes.bool }).isRequired,
};
export default injectIntl(ProblemScoreDrawer);

83
src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Collapsible, Icon, Row } from '@edx/paragon';
import { ArrowDropDown, ArrowDropUp, Blocked } from '@edx/paragon/icons';
import messages from '../messages';
import { useModel } from '../../../../generic/model-store';
import ProblemScoreDrawer from './ProblemScoreDrawer';
function SubsectionTitleCell({ intl, subsection }) {
const {
courseId,
} = useSelector(state => state.courseHome);
const {
org,
} = useModel('courseHomeMeta', courseId);
const {
gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const {
blockKey,
displayName,
problemScores,
url,
} = subsection;
const { administrator } = getAuthenticatedUser();
const logSubsectionClicked = () => {
sendTrackEvent('edx.ui.lms.course_progress.detailed_grades_assignment.clicked', {
org_key: org,
courserun_key: courseId,
is_staff: administrator,
assignment_block_key: blockKey,
});
};
return (
<Collapsible.Advanced>
<Row className="w-100 m-0">
<Collapsible.Trigger
className="mr-1 position-absolute"
aria-label={intl.formatMessage(messages.problemScoreToggleAltText, { subsectionTitle: displayName })}
tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}
>
<Collapsible.Visible whenClosed><Icon src={ArrowDropDown} /></Collapsible.Visible>
<Collapsible.Visible whenOpen><Icon src={ArrowDropUp} /></Collapsible.Visible>
</Collapsible.Trigger>
<span className="small d-inline ml-4 pl-1">
{gradesFeatureIsFullyLocked || subsection.learnerHasAccess ? '' : <Icon id={`detailedGradesBlockedIcon${subsection.blockKey}`} aria-label={intl.formatMessage(messages.noAcessToSubsection, { displayName })} className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" />}
{url ? (
<a
href={url}
className="muted-link small"
onClick={logSubsectionClicked}
tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}
aria-labelledby={`detailedGradesBlockedIcon${subsection.blockKey}`}
>
{displayName}
</a>
) : (
<span className="small">{displayName}</span>
)}
</span>
</Row>
<Collapsible.Body>
<ProblemScoreDrawer problemScores={problemScores} subsection={subsection} />
</Collapsible.Body>
</Collapsible.Advanced>
);
}
SubsectionTitleCell.propTypes = {
intl: intlShape.isRequired,
subsection: PropTypes.shape.isRequired,
};
export default injectIntl(SubsectionTitleCell);

28
src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
View File

@@ -1,14 +1,28 @@
import React from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Blocked } from '@edx/paragon/icons';
import { Icon } from '@edx/paragon';
import { useModel } from '../../../../generic/model-store';
import messages from '../messages';
function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
function AssignmentTypeCell({
intl, assignmentType, footnoteMarker, footnoteId, locked,
}) {
const {
gradesFeatureIsLocked,
courseId,
} = useSelector(state => state.courseHome);
const {
gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const lockedIcon = locked ? <Icon id={`assignmentTypeBlockedIcon${assignmentType}`} aria-label={intl.formatMessage(messages.noAcessToAssignmentType, { assignmentType })} className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" /> : '';
return (
<div className="small">
{assignmentType}
<span className="d-inline-flex">{lockedIcon}{assignmentType}</span>
{footnoteId && footnoteMarker && (
<sup>
<a
@@ -16,7 +30,8 @@ function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
className="muted-link"
href={`#${footnoteId}-footnote`}
aria-describedby="grade-summary-footnote-label"
tabIndex={gradesFeatureIsLocked ? '-1' : '0'}
tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}
aria-labelledby={`assignmentTypeBlockedIcon${assignmentType}`}
>
{footnoteMarker}
</a>
@@ -27,14 +42,17 @@ function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
}
AssignmentTypeCell.propTypes = {
intl: intlShape.isRequired,
assignmentType: PropTypes.string.isRequired,
footnoteId: PropTypes.string,
footnoteMarker: PropTypes.number,
locked: PropTypes.bool,
};
AssignmentTypeCell.defaultProps = {
footnoteId: '',
footnoteMarker: null,
locked: false,
};
export default AssignmentTypeCell;
export default injectIntl(AssignmentTypeCell);

8
src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
View File

@@ -5,11 +5,15 @@ import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from '../messages';
import { useModel } from '../../../../generic/model-store';
function DroppableAssignmentFootnote({ footnotes, intl }) {
const {
gradesFeatureIsLocked,
courseId,
} = useSelector(state => state.courseHome);
const {
gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
return (
<>
<span id="grade-summary-footnote-label" className="sr-only">{intl.formatMessage(messages.footnotesTitle)}</span>
@@ -25,7 +29,7 @@ function DroppableAssignmentFootnote({ footnotes, intl }) {
assignmentType: footnote.assignmentType,
}}
/>
<a className="sr-only" href={`#${footnote.id}-ref`} tabIndex={gradesFeatureIsLocked ? '-1' : '0'}>
<a className="sr-only" href={`#${footnote.id}-ref`} tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}>
{intl.formatMessage(messages.backToContent)}
</a>
</li>

8
src/course-home/progress-tab/grades/grade-summary/GradeSummary.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { useModel } from '../../../../generic/model-store';
@@ -16,14 +16,16 @@ function GradeSummary() {
},
} = useModel('progress', courseId);
const [allOfSomeAssignmentTypeIsLocked, setAllOfSomeAssignmentTypeIsLocked] = useState(false);
if (assignmentPolicies.length === 0) {
return null;
}
return (
<section className="text-dark-700 mb-4">
<GradeSummaryHeader />
<GradeSummaryTable />
<GradeSummaryHeader allOfSomeAssignmentTypeIsLocked={allOfSomeAssignmentTypeIsLocked} />
<GradeSummaryTable setAllOfSomeAssignmentTypeIsLocked={setAllOfSomeAssignmentTypeIsLocked} />
</section>
);
}

21
src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
View File

@@ -1,19 +1,25 @@
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Icon, IconButton, OverlayTrigger, Popover,
} from '@edx/paragon';
import { InfoOutline } from '@edx/paragon/icons';
import { Blocked, InfoOutline } from '@edx/paragon/icons';
import messages from '../messages';
import { useModel } from '../../../../generic/model-store';
function GradeSummaryHeader({ intl }) {
function GradeSummaryHeader({ intl, allOfSomeAssignmentTypeIsLocked }) {
const {
gradesFeatureIsLocked,
courseId,
} = useSelector(state => state.courseHome);
const {
gradesFeatureIsFullyLocked,
} = useModel('progress', courseId);
const [showTooltip, setShowTooltip] = useState(false);
return (
<div className="row w-100 m-0 align-items-center">
<h3 className="h4 mb-3 mr-1">{intl.formatMessage(messages.gradeSummary)}</h3>
@@ -37,15 +43,22 @@ function GradeSummaryHeader({ intl }) {
iconAs={Icon}
className="mb-3"
size="sm"
disabled={gradesFeatureIsLocked}
disabled={gradesFeatureIsFullyLocked}
/>
</OverlayTrigger>
{!gradesFeatureIsFullyLocked && allOfSomeAssignmentTypeIsLocked && (
<div className="mb-3 small ml-0 d-inline">
<Icon className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" />
{intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation)}
</div>
)}
</div>
);
}
GradeSummaryHeader.propTypes = {
intl: intlShape.isRequired,
allOfSomeAssignmentTypeIsLocked: PropTypes.bool.isRequired,
};
export default injectIntl(GradeSummaryHeader);

48
src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -11,7 +12,7 @@ import GradeSummaryTableFooter from './GradeSummaryTableFooter';
import messages from '../messages';
function GradeSummaryTable({ intl }) {
function GradeSummaryTable({ intl, setAllOfSomeAssignmentTypeIsLocked }) {
const {
courseId,
} = useSelector(state => state.courseHome);
@@ -20,6 +21,8 @@ function GradeSummaryTable({ intl }) {
gradingPolicy: {
assignmentPolicies,
},
gradesFeatureIsFullyLocked,
sectionScores,
} = useModel('progress', courseId);
const footnotes = [];
@@ -29,6 +32,23 @@ function GradeSummaryTable({ intl }) {
return footnoteId.replace(/[^A-Za-z0-9.-_]+/g, '-');
};
const hasNoAccessToAssignmentsOfType = (assignmentType) => {
const subsectionAssignmentsOfType = sectionScores.map((chapter) => chapter.subsections.filter((subsection) => (
subsection.assignmentType === assignmentType && subsection.hasGradedAssignment
&& (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)
))).flat();
if (subsectionAssignmentsOfType.length) {
const noAccessToAssignmentsOfType = !subsectionAssignmentsOfType.some((subsection) => (
subsection.learnerHasAccess === true
));
if (noAccessToAssignmentsOfType) {
setAllOfSomeAssignmentTypeIsLocked(true);
return true;
}
}
return false;
};
const gradeSummaryData = assignmentPolicies.map((assignment) => {
let footnoteId = '';
let footnoteMarker;
@@ -44,11 +64,15 @@ function GradeSummaryTable({ intl }) {
footnoteMarker = footnotes.length;
}
const locked = !gradesFeatureIsFullyLocked && hasNoAccessToAssignmentsOfType(assignment.type) ? 'greyed-out' : '';
return {
type: { footnoteId, footnoteMarker, type: assignment.type },
weight: `${(assignment.weight * 100).toFixed(0)}%`,
grade: `${(assignment.averageGrade * 100).toFixed(0)}%`,
weightedGrade: `${(assignment.weightedGrade * 100).toFixed(0)}%`,
type: {
footnoteId, footnoteMarker, type: assignment.type, locked,
},
weight: { weight: `${(assignment.weight * 100).toFixed(0)}%`, locked },
grade: { grade: `${(assignment.averageGrade * 100).toFixed(0)}%`, locked },
weightedGrade: { weightedGrade: `${(assignment.weightedGrade * 100).toFixed(0)}%`, locked },
};
});
@@ -67,6 +91,7 @@ function GradeSummaryTable({ intl }) {
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
locked={value.locked} // eslint-disable-line react/prop-types
/>
),
headerClassName: 'h5 mb-0',
@@ -75,18 +100,30 @@ function GradeSummaryTable({ intl }) {
Header: `${intl.formatMessage(messages.weight)}`,
accessor: 'weight',
headerClassName: 'justify-content-end h5 mb-0',
// eslint-disable-next-line react/prop-types
Cell: ({ value }) => (
<span className={value.locked ? 'greyed-out' : ''}>{value.weight}</span> // eslint-disable-line react/prop-types
),
cellClassName: 'float-right small',
},
{
Header: `${intl.formatMessage(messages.grade)}`,
accessor: 'grade',
headerClassName: 'justify-content-end h5 mb-0',
// eslint-disable-next-line react/prop-types
Cell: ({ value }) => (
<span className={value.locked ? 'greyed-out' : ''}>{value.grade}</span> // eslint-disable-line react/prop-types
),
cellClassName: 'float-right small',
},
{
Header: `${intl.formatMessage(messages.weightedGrade)}`,
accessor: 'weightedGrade',
headerClassName: 'justify-content-end h5 mb-0 text-right',
// eslint-disable-next-line react/prop-types
Cell: ({ value }) => (
<span className={value.locked ? 'greyed-out' : ''}>{value.weightedGrade}</span> // eslint-disable-line react/prop-types
),
cellClassName: 'float-right font-weight-bold small',
},
]}
@@ -104,6 +141,7 @@ function GradeSummaryTable({ intl }) {
GradeSummaryTable.propTypes = {
intl: intlShape.isRequired,
setAllOfSomeAssignmentTypeIsLocked: PropTypes.func.isRequired,
};
export default injectIntl(GradeSummaryTable);

32
src/course-home/progress-tab/grades/messages.js
View File

@@ -29,10 +29,14 @@ const messages = defineMessages({
id: 'progress.courseGrade.footer.passing',
defaultMessage: 'You’re currently passing this course with a grade of {letterGrade} ({minGrade}-{maxGrade}%)',
},
courseGradePreviewHeader: {
id: 'progress.courseGrade.preview.header',
courseGradePreviewHeaderLocked: {
id: 'progress.courseGrade.preview.headerLocked',
defaultMessage: 'locked feature',
},
courseGradePreviewHeaderLimited: {
id: 'progress.courseGrade.preview.headerLimited',
defaultMessage: 'limited feature',
},
courseGradePreviewHeaderAriaHidden: {
id: 'progress.courseGrade.preview.header.ariaHidden',
defaultMessage: 'Preview of a ',
@@ -41,6 +45,10 @@ const messages = defineMessages({
id: 'progress.courseGrade.preview.body.unlockCertificate',
defaultMessage: 'Unlock to view grades and work towards a certificate.',
},
courseGradePartialPreviewUnlockCertificateBody: {
id: 'progress.courseGrade.partialpreview.body.unlockCertificate',
defaultMessage: 'Unlock to work towards a certificate.',
},
courseGradePreviewUpgradeDeadlinePassedBody: {
id: 'progress.courseGrade.preview.body.upgradeDeadlinePassed',
defaultMessage: 'The deadline to upgrade in this course has passed.',
@@ -89,6 +97,10 @@ const messages = defineMessages({
id: 'progress.gradeSummary',
defaultMessage: 'Grade summary',
},
gradeSummaryLimitedAccessExplanation: {
id: 'progress.gradeSummary.limitedAccessExplanation',
defaultMessage: 'You have limited access to graded assignments as part of the audit track in this course.',
},
gradeSummaryTooltipAlt: {
id: 'progress.gradeSummary.tooltip.alt',
defaultMessage: 'Grade summary tooltip',
@@ -103,6 +115,14 @@ const messages = defineMessages({
id: 'progress.courseGrade.label.passingGrade',
defaultMessage: 'Passing grade',
},
problemScoreLabel: {
id: 'progress.detailedGrades.problemScore.label',
defaultMessage: 'Problem Scores:',
},
problemScoreToggleAltText: {
id: 'progress.detailedGrades.problemScore.toggleButton',
defaultMessage: 'Toggle individual problem scores for {subsectionTitle}',
},
score: {
id: 'progress.score',
defaultMessage: 'Score',
@@ -119,6 +139,14 @@ const messages = defineMessages({
id: 'progress.weightedGradeSummary',
defaultMessage: 'Your current weighted grade summary',
},
noAcessToAssignmentType: {
id: 'progress.noAcessToAssignmentType',
defaultMessage: 'You do not have access to assignments of type {assignmentType}',
},
noAcessToSubsection: {
id: 'progress.noAcessToSubsection',
defaultMessage: 'You do not have access to subsection {displayName}',
},
});
export default messages;

49
src/courseware/CoursewareContainer.jsx
View File

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { history } from '@edx/frontend-platform';
import { getLocale } from '@edx/frontend-platform/i18n';
import { Redirect } from 'react-router';
import { createSelector } from '@reduxjs/toolkit';
import { defaultMemoize as memoize } from 'reselect';
@@ -244,42 +242,6 @@ class CoursewareContainer extends Component {
}
}
renderDenied() {
const {
course,
courseId,
match: {
params: {
unitId: routeUnitId,
},
},
} = this.props;
let url = `/redirect/course-home/${courseId}`;
switch (course.canLoadCourseware.errorCode) {
case 'audit_expired':
url = `/redirect/dashboard?access_response_error=${course.canLoadCourseware.additionalContextUserMessage}`;
break;
case 'course_not_started':
// eslint-disable-next-line no-case-declarations
const startDate = (new Intl.DateTimeFormat(getLocale())).format(new Date(course.start));
url = `/redirect/dashboard?notlive=${startDate}`;
break;
case 'survey_required': // TODO: Redirect to the course survey
case 'unfulfilled_milestones':
url = '/redirect/dashboard';
break;
case 'microfrontend_disabled':
url = `/redirect/courseware/${courseId}/unit/${routeUnitId}`;
break;
case 'authentication_required':
case 'enrollment_required':
default:
}
return (
<Redirect to={url} />
);
}
render() {
const {
courseStatus,
@@ -292,10 +254,6 @@ class CoursewareContainer extends Component {
},
} = this.props;
if (courseStatus === 'denied') {
return this.renderDenied();
}
return (
<TabPage
activeTabSlug="courseware"
@@ -337,10 +295,9 @@ const sectionShape = PropTypes.shape({
});
const courseShape = PropTypes.shape({
canLoadCourseware: PropTypes.shape({
errorCode: PropTypes.string,
additionalContextUserMessage: PropTypes.string,
}).isRequired,
celebrations: PropTypes.shape({
firstSection: PropTypes.bool,
}),
});
CoursewareContainer.propTypes = {

29
src/courseware/CoursewareContainer.test.jsx
View File

@@ -427,31 +427,46 @@ describe('CoursewareContainer', () => {
});
});
describe('when receiving a can_load_courseware error_code', () => {
describe('when receiving a course_access error_code', () => {
function setUpWithDeniedStatus(errorCode) {
const courseMetadata = Factory.build('courseMetadata', {
can_load_courseware: {
course_access: {
has_access: false,
error_code: errorCode,
additional_context_user_message: 'uhoh oh no', // only used by audit_expired
},
});
const courseId = courseMetadata.id;
const { courseBlocks } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
const { courseBlocks, sequenceBlocks, unitBlocks } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
setUpMockRequests({ courseBlocks, courseMetadata });
history.push(`/course/${courseId}`);
return courseMetadata;
history.push(`/course/${courseId}/${sequenceBlocks[0].id}/${unitBlocks[0].id}`);
return { courseMetadata, unitBlocks };
}
it('should go to course home for an enrollment_required error code', async () => {
const courseMetadata = setUpWithDeniedStatus('enrollment_required');
const { courseMetadata } = setUpWithDeniedStatus('enrollment_required');
await loadContainer();
expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);
});
it('should go to course survey for a survey_required error code', async () => {
const { courseMetadata } = setUpWithDeniedStatus('survey_required');
await loadContainer();
expect(global.location.href).toEqual(`http://localhost/redirect/survey/${courseMetadata.id}`);
});
it('should go to legacy courseware for a microfrontend_disabled error code', async () => {
const { courseMetadata, unitBlocks } = setUpWithDeniedStatus('microfrontend_disabled');
await loadContainer();
expect(global.location.href).toEqual(`http://localhost/redirect/courseware/${courseMetadata.id}/unit/${unitBlocks[0].id}`);
});
it('should go to course home for an authentication_required error code', async () => {
const courseMetadata = setUpWithDeniedStatus('authentication_required');
const { courseMetadata } = setUpWithDeniedStatus('authentication_required');
await loadContainer();
expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);

6
src/courseware/CoursewareRedirectLandingPage.jsx
View File

@@ -31,6 +31,12 @@ export default () => {
global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/course/`);
}}
/>
<PageRoute
path={`${path}/survey/:courseId`}
render={({ match }) => {
global.location.assign(`${getConfig().LMS_BASE_URL}/courses/${match.params.courseId}/survey`);
}}
/>
<PageRoute
path={`${path}/dashboard`}
render={({ location }) => {

32
src/courseware/course/Course.jsx
View File

@@ -2,12 +2,9 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { useDispatch } from 'react-redux';
import Cookies from 'js-cookie';
import { getConfig } from '@edx/frontend-platform';
import { AlertList } from '../../generic/user-messages';
import useAccessExpirationAlert from '../../alerts/access-expiration-alert';
import useOfferAlert from '../../alerts/offer-alert';
import Sequence from './sequence';
@@ -42,33 +39,26 @@ function Course({
].filter(element => element != null).map(element => element.title);
const {
accessExpiration,
canShowUpgradeSock,
celebrations,
offer,
org,
userTimezone,
verifiedMode,
} = course;
// Below the tabs, above the breadcrumbs alerts (appearing in the order listed here)
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;
const celebrationOpen = shouldCelebrateOnSectionLoad(
courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations,
);
// REV-2297 TODO: temporary cookie code that should be removed.
// In order to see the Value Prop sidebar in prod, a cookie should be set in
// the browser console and refresh: document.cookie = 'value_prop_cookie=true';
const isValuePropCookieSet = Cookies.get('value_prop_cookie') === 'true';
const shouldDisplayNotificationTrigger = useWindowSize().width >= responsiveBreakpoints.small.minWidth;
const [notificationTrayVisible, setNotificationTray] = verifiedMode ? useState(true) : useState(false);
const shouldDisplayNotificationTrayOpen = useWindowSize().width > responsiveBreakpoints.medium.minWidth;
const [notificationTrayVisible, setNotificationTray] = verifiedMode
&& shouldDisplayNotificationTrayOpen ? useState(true) : useState(false);
const isNotificationTrayVisible = () => notificationTrayVisible && setNotificationTray;
const toggleNotificationTray = () => {
if (notificationTrayVisible) { setNotificationTray(false); } else { setNotificationTray(true); }
@@ -82,17 +72,6 @@ function Course({
<Helmet>
<title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
</Helmet>
{ /** This conditional is for the [MM-P2P] Experiment */}
{ !MMP2P.state.isEnabled && (
<AlertList
className="my-3"
topic="course"
customAlerts={{
...accessExpirationAlert,
...offerAlert,
}}
/>
)}
<div className="position-relative">
<CourseBreadcrumbs
courseId={courseId}
@@ -102,7 +81,7 @@ function Course({
mmp2p={MMP2P}
/>
{ isValuePropCookieSet && shouldDisplayNotificationTrigger ? (
{ shouldDisplayNotificationTrigger ? (
<NotificationTrigger
toggleNotificationTray={toggleNotificationTray}
isNotificationTrayVisible={isNotificationTrayVisible}
@@ -121,7 +100,6 @@ function Course({
toggleNotificationTray={toggleNotificationTray}
isNotificationTrayVisible={isNotificationTrayVisible}
notificationTrayVisible={notificationTrayVisible}
isValuePropCookieSet={isValuePropCookieSet}
//* * [MM-P2P] Experiment */
mmp2p={MMP2P}
/>

121
src/courseware/course/Course.test.jsx
View File

@@ -1,15 +1,16 @@
import React from 'react';
import { Factory } from 'rosie';
import Cookies from 'js-cookie';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import {
loadUnit, render, screen, waitFor, getByRole, initializeTestStore, fireEvent,
} from '../../setupTest';
import Course from './Course';
import { handleNextSectionCelebration } from './celebration';
import * as celebrationUtils from './celebration/utils';
import useWindowSize from '../../generic/tabs/useWindowSize';
jest.mock('@edx/frontend-platform/analytics');
jest.mock('../../generic/tabs/useWindowSize');
useWindowSize.mockReturnValue({ width: 1200 });
const recordFirstSectionCelebration = jest.fn();
celebrationUtils.recordFirstSectionCelebration = recordFirstSectionCelebration;
@@ -20,7 +21,6 @@ describe('Course', () => {
nextSequenceHandler: () => {},
previousSequenceHandler: () => {},
unitNavigationHandler: () => {},
toggleNotificationTray: () => {},
};
beforeAll(async () => {
@@ -87,115 +87,16 @@ describe('Course', () => {
expect(screen.getByRole('button', { name: 'Learn About Verified Certificates' })).toBeInTheDocument();
});
it('displays notification trigger', async () => {
const toggleNotificationTray = jest.fn();
const isNotificationTrayVisible = jest.fn();
it('displays notification trigger and toggles active class on click', async () => {
useWindowSize.mockReturnValue({ width: 1200 });
render(<Course {...mockData} />);
// REV-2297 TODO: remove cookie related code once temporary value prop cookie code is removed.
const cookieName = 'value_prop_cookie';
Cookies.set = jest.fn();
Cookies.get = jest.fn().mockImplementation(() => cookieName);
const getSpy = jest.spyOn(Cookies, 'get').mockReturnValueOnce('true');
const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i });
const courseMetadata = Factory.build('courseMetadata');
const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
const testData = {
...mockData,
toggleNotificationTray,
isNotificationTrayVisible,
};
render(<Course {...testData} courseId={courseMetadata.id} />, { store: testStore });
const notificationOpenButton = screen.getByRole('button', { name: /Show notification tray/i });
expect(getSpy).toBeCalledWith(cookieName);
expect(notificationOpenButton).toBeInTheDocument();
});
it('displays offer and expiration alert', async () => {
const courseMetadata = Factory.build('courseMetadata', {
access_expiration: {
expiration_date: '2080-01-01T12:00:00Z',
masquerading_expired_course: false,
upgrade_deadline: null,
upgrade_url: null,
},
offer: {
code: 'EDXWELCOME',
expiration_date: '2070-01-01T12:00:00Z',
original_price: '$100',
discounted_price: '$85',
percentage: 15,
upgrade_url: 'https://example.com/upgrade',
},
});
const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
render(<Course {...mockData} courseId={courseMetadata.id} />, { store: testStore });
await screen.findByText('EDXWELCOME');
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',
});
expect(notificationTrigger).toBeInTheDocument();
expect(notificationTrigger).toHaveClass('trigger-active');
fireEvent.click(notificationTrigger);
expect(notificationTrigger).not.toHaveClass('trigger-active');
});
it('passes handlers to the sequence', async () => {

1
src/courseware/course/NotificationIcon.jsx
View File

@@ -5,7 +5,6 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Icon } from '@edx/paragon';
import { WatchOutline } from '@edx/paragon/icons';
import './NotificationIcon.scss';
import messages from './messages';
function NotificationIcon({ intl, status, notificationColor }) {

12
src/courseware/course/NotificationTray.jsx
View File

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Icon } from '@edx/paragon';
import { Icon, IconButton } from '@edx/paragon';
import { ArrowBackIos, Close } from '@edx/paragon/icons';
import messages from './messages';
@@ -40,11 +40,15 @@ function NotificationTray({
<span className="mobile-close">{intl.formatMessage(messages.responsiveCloseNotificationTray)}</span>
</div>
) : null}
<div className="notification-tray-header px-3">
<span>{intl.formatMessage(messages.notificationTitle)}</span>
<div>
<span className="notification-tray-title">{intl.formatMessage(messages.notificationTitle)}</span>
{shouldDisplayFullScreen
? null
: <Icon src={Close} className="close-btn" onClick={() => { toggleNotificationTray(); }} onKeyDown={() => { toggleNotificationTray(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeNotificationTrigger)} />}
: (
<div className="d-inline-flex close-btn">
<IconButton src={Close} size="sm" iconAs={Icon} onClick={() => { toggleNotificationTray(); }} variant="primary" alt={intl.formatMessage(messages.closeNotificationTrigger)} />
</div>
)}
</div>
<div className="notification-tray-divider" />
<div>{verifiedMode

16
src/courseware/course/NotificationTray.scss
View File

@@ -23,24 +23,22 @@
height: 15rem;
}
.notification-tray-header {
padding: 0.625rem 0;
span {
display: inline-block;
}
.notification-tray-title {
display: inline-block;
padding: 0.625rem 0 0.625rem 1.25rem;
}
.close-btn {
float: right;
margin-right: 0.5rem;
margin-top: 0.35rem;
}
.notification-tray-divider {
width: 100.5%;
height: 0.5rem;
background: $gray-100;
border: 1px solid $light-400;
border-left: 0;
border-top: 1px solid $light-400;
border-bottom: 1px solid $light-400;
}
.notification-tray-content {

23
src/courseware/course/NotificationTray.test.jsx
View File

@@ -47,10 +47,23 @@ describe('NotificationTray', () => {
};
});
it('renders notification tray', async () => {
useWindowSize.mockReturnValue({ width: 1200, height: 422 });
await fetchAndRender(<NotificationTray />);
it('renders notification tray and close tray button', async () => {
useWindowSize.mockReturnValue({ width: 1200 });
const toggleNotificationTray = jest.fn();
const testData = {
...mockData,
toggleNotificationTray,
};
await fetchAndRender(<NotificationTray {...testData} />);
expect(screen.getByText('Notifications')).toBeInTheDocument();
const notificationCloseIconButton = screen.getByRole('button', { name: /Close notification tray/i });
expect(notificationCloseIconButton).toBeInTheDocument();
expect(notificationCloseIconButton).toHaveClass('btn-icon-primary');
fireEvent.click(notificationCloseIconButton);
expect(toggleNotificationTray).toHaveBeenCalledTimes(1);
// should not render responsive "Back to course" to close the tray
expect(screen.queryByText('Back to course')).not.toBeInTheDocument();
});
@@ -69,8 +82,8 @@ describe('NotificationTray', () => {
expect(screen.queryByText('You have no new notifications at this time.')).toBeInTheDocument();
});
it('renders notification tray with full screen "Back to course" at response width', async () => {
useWindowSize.mockReturnValue({ width: 991, height: 422 });
it('renders notification tray with full screen "Back to course" at responsive view', async () => {
useWindowSize.mockReturnValue({ width: 991 });
const toggleNotificationTray = jest.fn();
const testData = {
...mockData,

2
src/courseware/course/NotificationTrigger.jsx
View File

@@ -9,7 +9,7 @@ import messages from './messages';
function NotificationTrigger({ intl, toggleNotificationTray, isNotificationTrayVisible }) {
return (
<button
className={classNames('notification-trigger-btn', { active: isNotificationTrayVisible() })}
className={classNames('notification-trigger-btn', { 'trigger-active': isNotificationTrayVisible() })}
type="button"
onClick={() => { toggleNotificationTray(); }}
aria-label={intl.formatMessage(messages.openNotificationTrigger)}

9
src/courseware/course/NotificationTrigger.scss
View File

@@ -14,6 +14,11 @@
}
}
.active {
border-bottom: 3px solid $primary-700;
.trigger-active::after {
content: '';
position: absolute;
border-bottom: 2px solid $primary-700;
right: 0;
left: 0;
bottom: -1px;
}

6
src/courseware/course/NotificationTrigger.test.jsx
View File

@@ -35,9 +35,9 @@ describe('Notification Trigger', () => {
};
render(<NotificationTrigger {...testData} />);
const notificationOpenButton = screen.getByRole('button', { name: /Show notification tray/i });
expect(notificationOpenButton).toBeInTheDocument();
fireEvent.click(notificationOpenButton);
const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i });
expect(notificationTrigger).toBeInTheDocument();
fireEvent.click(notificationTrigger);
expect(toggleNotificationTray).toHaveBeenCalledTimes(1);
});
});

6
src/courseware/course/content-tools/calculator/Calculator.jsx
View File

@@ -52,7 +52,7 @@ class Calculator extends Component {
</Collapsible.Trigger>
</div>
<Collapsible.Body className="calculator-content pt-4">
<form onSubmit={this.handleSubmit} className="container-fluid form-inline flex-nowrap">
<form onSubmit={this.handleSubmit} className="container-xl form-inline flex-nowrap">
<input
type="text"
placeholder={this.props.intl.formatMessage(messages['calculator.input.field.label'])}
@@ -80,7 +80,7 @@ class Calculator extends Component {
</form>
<Collapsible.Advanced>
<div className="container-fluid">
<div className="container-xl">
<Collapsible.Trigger className="btn btn-link btn-sm px-0 d-inline-flex align-items-center">
<Collapsible.Visible whenOpen>
<FontAwesomeIcon icon={faTimesCircle} aria-hidden="true" className="mr-2" />
@@ -94,7 +94,7 @@ class Calculator extends Component {
/>
</Collapsible.Trigger>
</div>
<Collapsible.Body className="container-fluid pt-3" style={{ maxHeight: '50vh', overflow: 'auto' }}>
<Collapsible.Body className="container-xl pt-3" style={{ maxHeight: '50vh', overflow: 'auto' }}>
<FormattedMessage
tagName="h6"
id="calculator.instructions"

56
src/courseware/course/course-exit/CourseCelebration.jsx
View File

@@ -9,6 +9,7 @@ import { layoutGenerator } from 'react-break';
import { Helmet } from 'react-helmet';
import { useDispatch, useSelector } from 'react-redux';
import { Alert, Button, Hyperlink } from '@edx/paragon';
import { CheckCircle } from '@edx/paragon/icons';
import { getConfig } from '@edx/frontend-platform';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -285,34 +286,37 @@ function CourseCelebration({ intl }) {
</div>
<div className="col-12 px-0 px-md-5">
{certHeader && (
<Alert variant="success" className="row w-100 m-0">
<div className="col order-1 order-md-0 pl-0 pr-0 pr-md-5">
<div className="h4">{certHeader}</div>
{message}
<div className="mt-2">
{buttonPrefix}
{buttonLocation && (
<Button
variant={buttonVariant}
href={buttonLocation}
onClick={() => logClick(org, courseId, administrator, buttonEvent)}
>
{buttonText}
</Button>
)}
{buttonSuffix}
<Alert variant="success" icon={CheckCircle}>
<div className="row w-100 m-0">
<div className="col order-1 order-md-0 pl-0 pr-0 pr-md-5">
<div className="h4">{certHeader}</div>
{message}
<div className="mt-2">
{buttonPrefix}
{buttonLocation && (
<Button
variant={buttonVariant}
href={buttonLocation}
className="w-xs-100 w-md-auto"
onClick={() => logClick(org, courseId, administrator, buttonEvent)}
>
{buttonText}
</Button>
)}
{buttonSuffix}
</div>
</div>
{certStatus !== 'unverified' && (
<div className="col-12 order-0 col-md-3 order-md-1 w-100 mb-3 p-0 text-center">
<img
src={certificateImage}
alt={`${intl.formatMessage(messages.certificateImage)}`}
className="w-100"
style={{ maxWidth: '13rem' }}
/>
</div>
)}
</div>
{certStatus !== 'unverified' && (
<div className="col-12 order-0 col-md-3 order-md-1 w-100 mb-3 p-0 text-center">
<img
src={certificateImage}
alt={`${intl.formatMessage(messages.certificateImage)}`}
className="w-100"
style={{ maxWidth: '13rem' }}
/>
</div>
)}
</Alert>
)}
{relatedPrograms && relatedPrograms.map(program => (

6
src/courseware/course/course-exit/CourseInProgress.jsx
View File

@@ -34,13 +34,13 @@ function CourseInProgress({ intl }) {
<div className="col-12 p-0 h2 text-center">
{ intl.formatMessage(messages.courseInProgressHeader) }
</div>
<Alert variant="primary" className="col col-lg-10 mt-4 d-flex">
<Alert variant="primary" className="mt-4">
<div className="row w-100 m-0 align-items-start">
<div className="flex-grow-1 col-md p-0">{ intl.formatMessage(messages.courseInProgressDescription) }</div>
<div className="col-md p-0">{ intl.formatMessage(messages.courseInProgressDescription) }</div>
{datesTabLink && (
<Button
variant="primary"
className="flex-shrink-0 mt-3 mt-md-0 mb-1 mb-md-0 ml-md-5"
className="mt-3 my-md-0 mb-1 ml-md-5 w-xs-100 w-md-auto"
href={datesTabLink}
onClick={() => logClick(org, courseId, administrator, 'view_dates_tab')}
>

2
src/courseware/course/course-exit/CourseNonPassing.jsx
View File

@@ -34,7 +34,7 @@ function CourseNonPassing({ intl }) {
<div className="col-12 p-0 h2 text-center">
{ intl.formatMessage(messages.endOfCourseHeader) }
</div>
<Alert variant="primary" className="col col-lg-10 mt-4 d-flex">
<Alert variant="primary" className="col col-lg-10 mt-4">
<div className="row w-100 m-0 align-items-start">
<div className="flex-grow-1 col-sm p-0">{ intl.formatMessage(messages.endOfCourseDescription) }</div>
{progressLink && (

84
src/courseware/course/course-exit/ProgramCompletion.jsx
View File

@@ -41,54 +41,56 @@ function ProgramCompletion({
);
return (
<Alert variant="primary" className="row w-100 mx-0 my-3" data-testid="program-completion">
<div className="col order-1 order-md-0 pl-0 pr-0 pr-md-5">
<div className="h4">{intl.formatMessage(messages.programsLastCourseHeader, { title })}</div>
<p>
<FormattedMessage
id="courseExit.programCompletion.dashboardMessage"
defaultMessage="To view your certificate status, check the Programs section of your {programLink}."
values={{ programLink }}
/>
</p>
{type === 'microbachelors' && (
<>
<Alert variant="primary" className="my-3" data-testid="program-completion">
<div className="d-flex">
<div className="col order-1 order-md-0 pl-0 pr-0 pr-md-5">
<div className="h4">{intl.formatMessage(messages.programsLastCourseHeader, { title })}</div>
<p>
<FormattedMessage
id="courseExit.programCompletion.dashboardMessage"
defaultMessage="To view your certificate status, check the Programs section of your {programLink}."
values={{ programLink }}
/>
</p>
{type === 'microbachelors' && (
<>
<p>
<Hyperlink
style={{ textDecoration: 'underline' }}
destination={`${getConfig().SUPPORT_URL}/hc/en-us/articles/360004623154`}
className="text-reset"
>
{intl.formatMessage(messages.microBachelorsLearnMore)}
</Hyperlink>
</p>
<Button variant="primary" className="mb-2 mb-sm-0" href={`${getConfig().CREDENTIALS_BASE_URL}/records`}>
{intl.formatMessage(messages.applyForCredit)}
</Button>
</>
)}
{type === 'micromasters' && (
<p>
{intl.formatMessage(messages.microMastersMessage)}
{' '}
<Hyperlink
style={{ textDecoration: 'underline' }}
destination={`${getConfig().SUPPORT_URL}/hc/en-us/articles/360004623154`}
destination={`${getConfig().SUPPORT_URL}/hc/en-us/articles/360010346853-Does-a-Micromasters-certificate-count-towards-the-online-Master-s-degree-`}
className="text-reset"
>
{intl.formatMessage(messages.microBachelorsLearnMore)}
{intl.formatMessage(messages.microMastersLearnMore)}
</Hyperlink>
</p>
<Button variant="primary" className="mb-2 mb-sm-0" href={`${getConfig().CREDENTIALS_BASE_URL}/records`}>
{intl.formatMessage(messages.applyForCredit)}
</Button>
</>
)}
{type === 'micromasters' && (
<p>
{intl.formatMessage(messages.microMastersMessage)}
{' '}
<Hyperlink
style={{ textDecoration: 'underline' }}
destination={`${getConfig().SUPPORT_URL}/hc/en-us/articles/360010346853-Does-a-Micromasters-certificate-count-towards-the-online-Master-s-degree-`}
className="text-reset"
>
{intl.formatMessage(messages.microMastersLearnMore)}
</Hyperlink>
</p>
)}
</div>
<div className="col-12 order-0 col-md-3 order-md-1 w-100 mb-3 p-0 text-center">
<img
src={certImage}
alt={`${intl.formatMessage(messages.certificateImage)}`}
className="w-100"
style={{ maxWidth: '13rem' }}
data-testid={type}
/>
)}
</div>
<div className="col-12 order-0 col-md-3 order-md-1 w-100 mb-3 p-0 text-center">
<img
src={certImage}
alt={`${intl.formatMessage(messages.certificateImage)}`}
className="w-100"
style={{ maxWidth: '13rem' }}
data-testid={type}
/>
</div>
</div>
</Alert>
);

2
src/courseware/course/messages.js
View File

@@ -13,7 +13,7 @@ const messages = defineMessages({
},
closeNotificationTrigger: {
id: 'notification.close.button',
defaultMessage: 'Close sidebar notification',
defaultMessage: 'Close notification tray',
description: 'Button for the learner to close the sidebar',
},
responsiveCloseNotificationTray: {

9
src/courseware/course/sequence/Sequence.jsx
View File

@@ -40,7 +40,6 @@ function Sequence({
toggleNotificationTray,
notificationTrayVisible,
isNotificationTrayVisible,
isValuePropCookieSet,
mmp2p,
}) {
const course = useModel('coursewareMeta', courseId);
@@ -189,10 +188,9 @@ function Sequence({
handlePrevious();
}}
goToCourseExitPage={() => goToCourseExitPage()}
isValuePropCookieSet={isValuePropCookieSet}
/>
{isValuePropCookieSet && shouldDisplayNotificationTrigger ? (
{shouldDisplayNotificationTrigger ? (
<NotificationTrigger
toggleNotificationTray={toggleNotificationTray}
isNotificationTrayVisible={isNotificationTrayVisible}
@@ -206,6 +204,7 @@ function Sequence({
sequenceId={sequenceId}
unitId={unitId}
unitLoadedHandler={handleUnitLoaded}
notificationTrayVisible={notificationTrayVisible}
/** [MM-P2P] Experiment */
mmp2p={mmp2p}
/>
@@ -226,7 +225,7 @@ function Sequence({
)}
</div>
</div>
{isValuePropCookieSet && notificationTrayVisible ? (
{notificationTrayVisible ? (
<NotificationTray
toggleNotificationTray={toggleNotificationTray}
notificationTrayVisible={notificationTrayVisible}
@@ -272,7 +271,6 @@ Sequence.propTypes = {
toggleNotificationTray: PropTypes.func,
notificationTrayVisible: PropTypes.bool,
isNotificationTrayVisible: PropTypes.func,
isValuePropCookieSet: PropTypes.bool,
/** [MM-P2P] Experiment */
mmp2p: PropTypes.shape({
@@ -294,7 +292,6 @@ Sequence.defaultProps = {
toggleNotificationTray: null,
notificationTrayVisible: null,
isNotificationTrayVisible: null,
isValuePropCookieSet: null,
/** [MM-P2P] Experiment */
mmp2p: {

33
src/courseware/course/sequence/Sequence.test.jsx
View File

@@ -6,8 +6,11 @@ import {
} from '../../../setupTest';
import Sequence from './Sequence';
import { fetchSequenceFailure } from '../../data/slice';
import useWindowSize from '../../../generic/tabs/useWindowSize';
jest.mock('@edx/frontend-platform/analytics');
jest.mock('../../../generic/tabs/useWindowSize');
useWindowSize.mockReturnValue({ width: 1200 });
describe('Sequence', () => {
let mockData;
@@ -28,7 +31,6 @@ describe('Sequence', () => {
unitNavigationHandler: () => {},
nextSequenceHandler: () => {},
previousSequenceHandler: () => {},
notificationTrayVisible: false,
};
});
@@ -130,17 +132,6 @@ describe('Sequence', () => {
expect(screen.getAllByRole('button', { name: /previous|next/i }).length).toEqual(4);
});
it('renders notification tray in sequence', async () => {
const testData = {
...mockData,
notificationTrayVisible: true,
isValuePropCookieSet: true,
};
render(<Sequence {...testData} />);
expect(await screen.findByText('Notifications')).toBeInTheDocument();
});
describe('sequence and unit navigation buttons', () => {
let testStore;
const sequenceBlocks = [Factory.build(
@@ -388,4 +379,22 @@ describe('Sequence', () => {
});
});
});
describe('notification feature', () => {
it('renders notification tray in sequence', async () => {
const testData = {
...mockData,
notificationTrayVisible: true,
};
render(<Sequence {...testData} />);
expect(await screen.findByText('Notifications')).toBeInTheDocument();
});
it('does not render notification tray in sequence by default if in responsive view', async () => {
useWindowSize.mockReturnValue({ width: 991 });
const { container } = render(<Sequence {...mockData} />);
// unable to test the absence of 'Notifications' by finding it by text, using the class of the tray instead:
expect(container).not.toHaveClass('notification-tray-container');
});
});
});

3
src/courseware/course/sequence/SequenceContent.jsx
View File

@@ -16,6 +16,7 @@ function SequenceContent({
sequenceId,
unitId,
unitLoadedHandler,
notificationTrayVisible,
/** [MM-P2P] Experiment */
mmp2p,
}) {
@@ -61,6 +62,7 @@ function SequenceContent({
key={unitId}
id={unitId}
onLoaded={unitLoadedHandler}
notificationTrayVisible={notificationTrayVisible}
/** [MM-P2P] Experiment */
mmp2p={mmp2p}
/>
@@ -73,6 +75,7 @@ SequenceContent.propTypes = {
sequenceId: PropTypes.string.isRequired,
unitId: PropTypes.string,
unitLoadedHandler: PropTypes.func.isRequired,
notificationTrayVisible: PropTypes.bool.isRequired,
intl: intlShape.isRequired,
/** [MM-P2P] Experiment */
mmp2p: PropTypes.shape({

4
src/courseware/course/sequence/Unit.jsx
View File

@@ -85,6 +85,7 @@ function Unit({
onLoaded,
id,
intl,
notificationTrayVisible,
/** [MM-P2P] Experiment */
mmp2p,
}) {
@@ -171,7 +172,7 @@ function Unit({
/>
)}
>
<LockPaywall courseId={courseId} />
<LockPaywall courseId={courseId} notificationTrayVisible={notificationTrayVisible} />
</Suspense>
)}
{ /** [MM-P2P] Experiment */ }
@@ -252,6 +253,7 @@ Unit.propTypes = {
id: PropTypes.string.isRequired,
intl: intlShape.isRequired,
onLoaded: PropTypes.func,
notificationTrayVisible: PropTypes.bool.isRequired,
/** [MM-P2P] Experiment */
mmp2p: PropTypes.shape({
state: PropTypes.shape({

45
src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
View File

@@ -1,22 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Alert, Icon,
} from '@edx/paragon';
import { Alert } from '@edx/paragon';
import { Locked } from '@edx/paragon/icons';
import messages from './messages';
import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
import { useModel } from '../../../../generic/model-store';
import useWindowSize, { responsiveBreakpoints } from '../../../../generic/tabs/useWindowSize';
import { UpgradeButton } from '../../../../generic/upgrade-button';
import './LockPaywall.scss';
function LockPaywall({
intl,
courseId,
notificationTrayVisible,
}) {
const course = useModel('coursewareMeta', courseId);
const {
@@ -25,6 +25,18 @@ function LockPaywall({
verifiedMode,
} = course;
// the following variables are set and used for resposive layout to work with
// whether the NotificationTray is open or not and if there's an offer with longer text
const shouldDisplayBulletPointsBelowCertificate = useWindowSize().width
<= responsiveBreakpoints.large.minWidth;
const shouldDisplayGatedContentOneColumn = useWindowSize().width <= responsiveBreakpoints.extraLarge.minWidth
&& notificationTrayVisible;
const shouldDisplayGatedContentTwoColumns = useWindowSize().width < responsiveBreakpoints.large.minWidth
&& notificationTrayVisible;
const shouldDisplayGatedContentTwoColumnsHalf = useWindowSize().width <= responsiveBreakpoints.large.minWidth
&& !notificationTrayVisible;
const shouldWrapTextOnButton = useWindowSize().width > responsiveBreakpoints.extraSmall.minWidth;
if (!verifiedMode) {
return null;
}
@@ -44,14 +56,6 @@ function LockPaywall({
});
};
const lockIcon = (
<Icon
className="float-left"
src={Locked}
aria-hidden="true"
/>
);
const verifiedCertLink = (
<Alert.Link
href="https://www.edx.org/verified-certificate"
@@ -79,12 +83,8 @@ function LockPaywall({
);
return (
<Alert variant="light" aria-live="off">
<Alert variant="light" aria-live="off" icon={Locked} className="lock-paywall-container">
<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>
@@ -94,7 +94,7 @@ function LockPaywall({
{intl.formatMessage(messages['learn.lockPaywall.content'])}
</div>
<div className="d-flex flex-row flex-wrap">
<div className={classNames('d-flex flex-row', { 'flex-wrap': notificationTrayVisible || shouldDisplayBulletPointsBelowCertificate })}>
<div style={{ float: 'left' }} className="mr-3 mb-2">
<img
alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}
@@ -148,13 +148,17 @@ function LockPaywall({
</div>
<div
className="col-md-auto p-md-0 d-md-flex align-items-md-center mr-md-3"
style={{ textAlign: 'right' }}
className={
classNames('p-md-0 d-md-flex align-items-md-center text-right', {
'col-md-5 mx-md-0': notificationTrayVisible, 'col-md-4 mx-md-3 justify-content-center': !notificationTrayVisible && !shouldDisplayGatedContentTwoColumnsHalf, 'col-md-11 justify-content-end': shouldDisplayGatedContentOneColumn && !shouldDisplayGatedContentTwoColumns, 'col-md-6 justify-content-center': shouldDisplayGatedContentTwoColumnsHalf,
})
}
>
<UpgradeButton
offer={offer}
onClick={logClick}
verifiedMode={verifiedMode}
style={{ whiteSpace: shouldWrapTextOnButton ? 'nowrap' : null }}
/>
</div>
</div>
@@ -164,5 +168,6 @@ function LockPaywall({
LockPaywall.propTypes = {
intl: intlShape.isRequired,
courseId: PropTypes.string.isRequired,
notificationTrayVisible: PropTypes.bool.isRequired,
};
export default injectIntl(LockPaywall);

4
src/courseware/course/sequence/lock-paywall/LockPaywall.scss
View File

@@ -1,5 +1,7 @@
.lock-paywall-container svg {
color: $primary-700;
}
// Temporary CSS intervention until paragon list items will support icons (PAR-429)
.fa-li {
left: -31px !important;
padding-right: 22px;

9
src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
View File

@@ -27,7 +27,6 @@ function SequenceNavigation({
nextSequenceHandler,
previousSequenceHandler,
goToCourseExitPage,
isValuePropCookieSet,
mmp2p,
}) {
const sequence = useModel('sequences', sequenceId);
@@ -70,15 +69,15 @@ function SequenceNavigation({
const disabled = isLastUnit && !exitActive;
return (
<Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled} iconAfter={ChevronRight}>
{isValuePropCookieSet && shouldDisplayNotificationTrigger ? null : buttonText}
{shouldDisplayNotificationTrigger ? null : buttonText}
</Button>
);
};
return sequenceStatus === LOADED && (
<nav className={classNames('sequence-navigation', className)} style={{ width: isValuePropCookieSet && shouldDisplayNotificationTrigger ? '90%' : null }}>
<nav className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTrigger ? '90%' : null }}>
<Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={ChevronLeft}>
{isValuePropCookieSet && shouldDisplayNotificationTrigger ? null : intl.formatMessage(messages.previousButton)}
{shouldDisplayNotificationTrigger ? null : intl.formatMessage(messages.previousButton)}
</Button>
{renderUnitButtons()}
{renderNextButton()}
@@ -98,7 +97,6 @@ SequenceNavigation.propTypes = {
nextSequenceHandler: PropTypes.func.isRequired,
previousSequenceHandler: PropTypes.func.isRequired,
goToCourseExitPage: PropTypes.func.isRequired,
isValuePropCookieSet: PropTypes.bool,
/** [MM-P2P] Experiment */
mmp2p: PropTypes.shape({
state: PropTypes.shape({
@@ -110,7 +108,6 @@ SequenceNavigation.propTypes = {
SequenceNavigation.defaultProps = {
className: null,
unitId: null,
isValuePropCookieSet: null,
/** [MM-P2P] Experiment */
mmp2p: {

40
src/courseware/course/sequence/sequence-navigation/UnitNavigationEffortEstimate.jsx
View File

@@ -1,23 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import EffortEstimate from '../../../../shared/effort-estimate';
import { sequenceIdsSelector } from '../../../data';
import { useModel } from '../../../../generic/model-store';
// This component exists to peek ahead at the next subsection or section and grab its estimated effort.
// If we should be showing the next block's effort, we display the title and effort instead of "Next".
// This code currently tries to handle both section and subsection estimates. But once AA-659 happens, it can be
// simplified to one or the other code path.
import messages from './messages';
function UnitNavigationEffortEstimate({ children, sequenceId, unitId }) {
// This component exists to peek ahead at the next sequence and grab its estimated effort.
// If we should be showing the next sequence's effort, we display the title and effort instead of "Next".
function UnitNavigationEffortEstimate({
children,
intl,
sequenceId,
unitId,
}) {
const sequenceIds = useSelector(sequenceIdsSelector);
const sequenceIndex = sequenceIds.indexOf(sequenceId);
const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
const sequence = useModel('sequences', sequenceId);
const nextSequence = useModel('sequences', nextSequenceId);
const nextSection = useModel('sections', nextSequence ? nextSequence.sectionId : null);
if (!sequence || !nextSequence) {
return children;
@@ -28,32 +33,23 @@ function UnitNavigationEffortEstimate({ children, sequenceId, unitId }) {
return children;
}
let blockToShow = nextSequence;
// The experimentation code currently only sets effort on either sequences, sections, or nothing. If we don't have
// sequence info, we are either doing sections or nothing. Let's look into it.
// If we don't have info to show for the next sequence, just bail
if (!nextSequence.effortActivities && !nextSequence.effortTime) {
if (!nextSection.effortActivities && !nextSection.effortTime) {
return children; // control group - no effort estimates at all
}
// Are we at a section border? If so, let's show the next section's effort estimates
if (sequence.sectionId !== nextSequence.sectionId) {
blockToShow = nextSection;
}
return children;
}
// Note: we don't use `children` here - we replace it with the next section name.
// AA-659: remember to add a translation for Next Up
// Note: we don't use `children` here - we replace it with the next sequence's title.
return (
<div className="d-inline-block text-wrap">
Next Up: {blockToShow.title}
<EffortEstimate className="d-block mt-1" block={blockToShow} />
{intl.formatMessage(messages.nextUpButton, { title: nextSequence.title })}
<EffortEstimate className="d-block mt-1" block={nextSequence} />
</div>
);
}
UnitNavigationEffortEstimate.propTypes = {
children: PropTypes.node,
intl: intlShape.isRequired,
sequenceId: PropTypes.string.isRequired,
unitId: PropTypes.string,
};
@@ -63,4 +59,4 @@ UnitNavigationEffortEstimate.defaultProps = {
unitId: null,
};
export default UnitNavigationEffortEstimate;
export default injectIntl(UnitNavigationEffortEstimate);

5
src/courseware/course/sequence/sequence-navigation/messages.js
View File

@@ -6,6 +6,11 @@ const messages = defineMessages({
defaultMessage: 'Next',
description: 'Button to advance to the next section',
},
nextUpButton: {
id: 'learn.sequence.navigation.next.up.button',
defaultMessage: 'Next Up: {title}',
description: 'Button to advance to the next section, with title',
},
previousButton: {
id: 'learn.sequence.navigation.previous.button',
defaultMessage: 'Previous',

3
src/courseware/data/__factories__/courseMetadata.factory.js
View File

@@ -9,7 +9,6 @@ Factory.define('courseMetadata')
can_show_upgrade_sock: false,
content_type_gating_enabled: false,
course_expired_message: null,
effort: null,
end: null,
enrollment_start: null,
enrollment_end: null,
@@ -34,7 +33,7 @@ Factory.define('courseMetadata')
},
show_calculator: false,
license: 'all-rights-reserved',
can_load_courseware: {
course_access: {
has_access: true,
user_fragment: null,
developer_message: null,

2
src/courseware/data/__factories__/sequenceMetadata.factory.js
View File

@@ -68,7 +68,7 @@ Factory.define('sequenceMetadata')
*/
export default function buildSimpleCourseAndSequenceMetadata(options = {}) {
const courseMetadata = options.courseMetadata || Factory.build('courseMetadata', {
can_load_courseware: {
course_access: {
has_access: false,
},
});

6
src/courseware/data/api.js
View File

@@ -16,8 +16,6 @@ export function normalizeBlocks(courseId, blocks) {
switch (block.type) {
case 'course':
models.courses[block.id] = {
effortActivities: block.effort_activities,
effortTime: block.effort_time,
id: courseId,
title: block.display_name,
sectionIds: block.children || [],
@@ -26,8 +24,6 @@ export function normalizeBlocks(courseId, blocks) {
break;
case 'chapter':
models.sections[block.id] = {
effortActivities: block.effort_activities,
effortTime: block.effort_time,
id: block.id,
title: block.display_name,
sequenceIds: block.children || [],
@@ -175,7 +171,7 @@ function normalizeMetadata(metadata) {
start: data.start,
enrollmentMode: data.enrollment.mode,
isEnrolled: data.enrollment.is_active,
canLoadCourseware: camelCaseObject(data.can_load_courseware),
courseAccess: camelCaseObject(data.course_access),
canViewLegacyCourseware: data.can_view_legacy_courseware,
originalUserIsStaff: data.original_user_is_staff,
isStaff: data.is_staff,

10
src/courseware/data/redux.test.js
View File

@@ -68,7 +68,7 @@ describe('Data layer integration tests', () => {
it('Should fetch, normalize, and save metadata, but with denied status', async () => {
const forbiddenCourseMetadata = Factory.build('courseMetadata', {
can_load_courseware: {
course_access: {
has_access: false,
},
});
@@ -89,7 +89,7 @@ describe('Data layer integration tests', () => {
expect(state.courseware.courseStatus).toEqual('denied');
// check that at least one key camel cased, thus course data normalized
expect(state.models.coursewareMeta[forbiddenCourseMetadata.id].canLoadCourseware).not.toBeUndefined();
expect(state.models.coursewareMeta[forbiddenCourseMetadata.id].courseAccess).not.toBeUndefined();
});
it('Should fetch, normalize, and save metadata', async () => {
@@ -107,7 +107,7 @@ describe('Data layer integration tests', () => {
expect(state.courseware.sequenceId).toEqual(null);
// check that at least one key camel cased, thus course data normalized
expect(state.models.coursewareMeta[courseId].canLoadCourseware).not.toBeUndefined();
expect(state.models.coursewareMeta[courseId].courseAccess).not.toBeUndefined();
});
it('Should fetch, normalize, and save metadata; filtering has no effect', async () => {
@@ -127,7 +127,7 @@ describe('Data layer integration tests', () => {
expect(state.courseware.sequenceId).toEqual(null);
// check that at least one key camel cased, thus course data normalized
expect(state.models.coursewareMeta[courseId].canLoadCourseware).not.toBeUndefined();
expect(state.models.coursewareMeta[courseId].courseAccess).not.toBeUndefined();
expect(state.models.sequences.length === 1);
Object.values(state.models.sections).forEach(section => expect(section.sequenceIds.length === 1));
});
@@ -149,7 +149,7 @@ describe('Data layer integration tests', () => {
expect(state.courseware.sequenceId).toEqual(null);
// check that at least one key camel cased, thus course data normalized
expect(state.models.coursewareMeta[courseId].canLoadCourseware).not.toBeUndefined();
expect(state.models.coursewareMeta[courseId].courseAccess).not.toBeUndefined();
expect(state.models.sequences === null);
Object.values(state.models.sections).forEach(section => expect(section.sequenceIds.length === 0));
});

2
src/courseware/data/thunks.js
View File

@@ -117,7 +117,7 @@ export function fetchCourse(courseId) {
}
if (fetchedMetadata) {
if (courseMetadataResult.value.canLoadCourseware.hasAccess && fetchedBlocks) {
if (courseMetadataResult.value.courseAccess.hasAccess && fetchedBlocks) {
// User has access
dispatch(fetchCourseSuccess({ courseId }));
return;

2
src/generic/upgrade-button/UpgradeButton.jsx
View File

@@ -24,8 +24,6 @@ function UpgradeButton(props) {
href={url}
onClick={onClick}
{...rest}
size="lg"
block
>
<FormattedMessage
id="learning.upgradeButton.buttonText"

29
src/generic/upgrade-notification/UpgradeNotification.jsx
View File

@@ -327,20 +327,6 @@ function UpgradeNotification({
const accessExpirationDate = new Date(accessExpiration.expirationDate);
const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) / 1000 / 60 / 60);
if (offer) { // if there's a first purchase discount, message the code at the bottom
offerCode = (
<div className="text-center discount-info">
<FormattedMessage
id="learning.generic.upgradeNotification.code"
defaultMessage="Use code {code} at checkout"
values={{
code: (<span className="font-weight-bold">{offer.code}</span>),
}}
/>
</div>
);
}
if (hoursToAccessExpiration >= (7 * 24)) {
if (offer) { // countdown to the first purchase discount if there is one
const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) / 1000 / 60 / 60);
@@ -394,6 +380,20 @@ function UpgradeNotification({
upsellMessage = (<UpsellNoFBECardContent />);
}
if (offer) { // if there's a first purchase discount, message the code at the bottom
offerCode = (
<div className="text-center discount-info">
<FormattedMessage
id="learning.generic.upgradeNotification.code"
defaultMessage="Use code {code} at checkout"
values={{
code: (<span className="font-weight-bold">{offer.code}</span>),
}}
/>
</div>
);
}
return (
<section className={classNames('upgrade-notification small', { 'card mb-4': shouldDisplayBorder })}>
<h2 className="h5 upgrade-notification-header" id="outline-sidebar-upgrade-header">
@@ -408,6 +408,7 @@ function UpgradeNotification({
onClick={logClick}
verifiedMode={verifiedMode}
className="upgrade-notification-button"
block
/>
{offerCode}
</section>

20
src/generic/upgrade-notification/UpgradeNotification.test.jsx
View File

@@ -54,6 +54,26 @@ describe('Upgrade Notification', () => {
expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
});
it('renders non-FBE with a discount properly', async () => {
const discountExpirationDate = new Date(dateNow);
discountExpirationDate.setDate(discountExpirationDate.getDate() + 6);
buildAndRender({
offer: {
expirationDate: discountExpirationDate.toString(),
percentage: 15,
code: 'Welcome15',
discountedPrice: '$126.65',
originalPrice: '$149',
upgradeUrl: 'www.exampleUpgradeUrl.com',
},
});
expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument();
expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
});
it('renders FBE expiration within an hour properly', async () => {
const expirationDate = new Date(dateNow);
expirationDate.setMinutes(expirationDate.getMinutes() + 45);

102
src/generic/user-messages/Alert.jsx
View File

@@ -1,82 +1,48 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {
faExclamationTriangle, faInfoCircle, faCheckCircle, faMinusCircle, faTimes,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconButton } from '@edx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Alert as ParagonAlert } from '@edx/paragon';
import { CheckCircle, Info, WarningFilled } from '@edx/paragon/icons';
import { ALERT_TYPES } from './UserMessagesProvider';
import './Alert.scss';
import messages from '../messages';
function getAlertClass(type) {
if (type === ALERT_TYPES.ERROR) {
return 'alert-warning';
function getAlertVariant(type) {
switch (type) {
case ALERT_TYPES.ERROR:
return 'warning';
case ALERT_TYPES.DANGER:
return 'danger';
case ALERT_TYPES.SUCCESS:
return 'success';
default:
return 'info';
}
if (type === ALERT_TYPES.DANGER) {
return 'alert-danger';
}
if (type === ALERT_TYPES.SUCCESS) {
return 'alert-success';
}
if (type === ALERT_TYPES.WELCOME) {
return 'alert-welcome alert-light';
}
return 'alert-info';
}
function getAlertIcon(type) {
if (type === ALERT_TYPES.ERROR) {
return faExclamationTriangle;
switch (type) {
case ALERT_TYPES.ERROR:
return WarningFilled;
case ALERT_TYPES.SUCCESS:
return CheckCircle;
default:
return Info;
}
if (type === ALERT_TYPES.DANGER) {
return faMinusCircle;
}
if (type === ALERT_TYPES.SUCCESS) {
return faCheckCircle;
}
return faInfoCircle;
}
function getAlertIconColor(type) {
if (type === ALERT_TYPES.SUCCESS) {
return 'text-success-500';
}
return '';
}
function Alert({
type, dismissible, children, footer, intl, onDismiss,
type, dismissible, children, onDismiss, stacked,
}) {
return (
<div data-testid={`alert-container-${type}`} className={classNames('alert', { 'alert-dismissible': dismissible }, getAlertClass(type))} style={{ padding: '1em' }}>
<div className="row w-100 m-0">
{type !== ALERT_TYPES.WELCOME && (
<div className="col-auto p-0 mr-3">
<FontAwesomeIcon icon={getAlertIcon(type)} className={getAlertIconColor(type)} />
</div>
)}
<div className="col mr-4 p-0 align-items-start">
<div role="alert" className="flex-grow-1">
{children}
</div>
</div>
{dismissible && (
<div className="col-auto p-0" style={{ margin: '-0.2em -0.2em 0em 0em' }}>
<IconButton
icon={faTimes}
onClick={onDismiss}
alt={intl.formatMessage(messages.close)}
variant="primary"
/>
</div>
)}
</div>
{footer}
</div>
<ParagonAlert
data-testid={`alert-container-${type}`}
variant={getAlertVariant(type)}
icon={getAlertIcon(type)}
dismissible={dismissible}
onClose={onDismiss}
stacked={stacked}
>
{children}
</ParagonAlert>
);
}
@@ -86,20 +52,18 @@ Alert.propTypes = {
ALERT_TYPES.DANGER,
ALERT_TYPES.INFO,
ALERT_TYPES.SUCCESS,
ALERT_TYPES.WELCOME,
]).isRequired,
dismissible: PropTypes.bool,
children: PropTypes.node,
footer: PropTypes.node,
intl: intlShape.isRequired,
onDismiss: PropTypes.func,
stacked: PropTypes.bool,
};
Alert.defaultProps = {
dismissible: false,
children: undefined,
footer: null,
onDismiss: null,
stacked: false,
};
export default injectIntl(Alert);
export default Alert;

3
src/generic/user-messages/Alert.scss
View File

@@ -1,3 +0,0 @@
.alert-welcome {
border: #b9babe solid 1px !important;
}

55
src/generic/user-messages/Alert.test.jsx
View File

@@ -1,55 +0,0 @@
import React from 'react';
import {
render, screen, fireEvent, initializeMockApp,
} from '../../setupTest';
import { Alert, ALERT_TYPES } from './index';
describe('Alert', () => {
const types = {
[ALERT_TYPES.ERROR]: {
alert_class: 'alert-warning',
icon: 'fa-exclamation-triangle',
},
[ALERT_TYPES.DANGER]: {
alert_class: 'alert-danger',
icon: 'fa-minus-circle',
},
[ALERT_TYPES.SUCCESS]: {
alert_class: 'alert-success',
icon: 'fa-check-circle',
},
[ALERT_TYPES.INFO]: {
alert_class: 'alert-info',
icon: 'fa-info-circle',
},
};
beforeAll(async () => {
// We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
await initializeMockApp();
});
Object.entries(types).forEach(([alert, properties]) => {
it(`renders ${alert} alert`, () => {
const alertContent = 'Test alert.';
const { container } = render(<Alert type={alert}>{alertContent}</Alert>);
expect(container.firstChild).toHaveClass(properties.alert_class);
expect(container.querySelector('svg')).toHaveClass(properties.icon);
expect(screen.getByText(alertContent)).toBeInTheDocument();
});
});
it('is dismissible', () => {
const onDismiss = jest.fn();
const { container } = render(<Alert type={ALERT_TYPES.ERROR} dismissible {...{ onDismiss }} />);
expect(container.firstChild).toHaveClass('alert-dismissible');
const dismissButton = screen.getByRole('button');
expect(container.querySelector('svg')).toHaveClass('fa-exclamation-triangle');
fireEvent.click(dismissButton);
expect(onDismiss).toHaveBeenCalledTimes(1);
});
});

17
src/i18n/messages/ar.json
View File

@@ -14,9 +14,6 @@
"account-activation.alert.message": "We sent an email to {boldEmail} with a link to activate your account. Can’t find it? Check your spam folder or\n {sendEmailTag}.",
"account-activation.resend.link": "resend the email",
"learning.logistration.alert": "للاطلاع على محتوى المساق {signIn} أو {register}.",
"learning.offer.upgradeNow": "ترقية الآن",
"learning.offer.header": "قم بالترقية في {date} ووفر {percentage}% [{fullPricing}]",
"learning.offer.code": "استخدم الرمز {code} عند إتمام الطلب",
"learn.navigation.course.tabs.label": "مواد المساق",
"header.menu.dashboard.label": "لوحة المعلومات",
"header.help.label": "مساعدة",
@@ -32,7 +29,7 @@
"learning.dates.badge.today": "اليوم",
"learning.dates.badge.unreleased": "لم يتم الإصدار بعد",
"learning.dates.badge.verifiedOnly": "موثق فقط",
"learning.outline.alert.cert.when": "This course ended on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"learning.outline.alert.cert.when": "This course ends on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"cert.alert.earned.unavailable.header": "Your grade and certificate will be ready soon!",
"cert.alert.earned.ready.header": "Congratulations! Your certificate is ready.",
"learning.outline.alert.end.short": "ينتهي هذا المساق في غضون {timeRemaining}في {courseEndTime}.",
@@ -114,7 +111,6 @@
"progress.certificateStatus.downloadableButton": "Download my certificate",
"progress.certificateStatus.viewableButton": "View my certificate",
"progress.certificateStatus.notAvailableHeader": "Certificate status",
"progress.certificateStatus.notAvailableBody": "Your certificate will be available soon! After this course officially ends on {end_date}, you will receive an email notification with your certificate.",
"progress.certificateStatus.upgradeHeader": "Earn a certificate",
"progress.certificateStatus.upgradeBody": "You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.",
"progress.certificateStatus.upgradeButton": "Upgrade now",
@@ -139,9 +135,11 @@
"progress.courseGrade.footer.generic.passing": "You’re currently passing this course",
"progress.courseGrade.footer.nonPassing": "A weighted grade of {passingGrade}% is required to pass in this course",
"progress.courseGrade.footer.passing": "You’re currently passing this course with a grade of {letterGrade} ({minGrade}-{maxGrade}%)",
"progress.courseGrade.preview.header": "locked feature",
"progress.courseGrade.preview.headerLocked": "locked feature",
"progress.courseGrade.preview.headerLimited": "limited feature",
"progress.courseGrade.preview.header.ariaHidden": "Preview of a ",
"progress.courseGrade.preview.body.unlockCertificate": "Unlock to view grades and work towards a certificate.",
"progress.courseGrade.partialpreview.body.unlockCertificate": "Unlock to work towards a certificate.",
"progress.courseGrade.preview.body.upgradeDeadlinePassed": "The deadline to upgrade in this course has passed.",
"progress.courseGrade.preview.button.upgrade": "Upgrade now",
"progress.courseGrade.gradeRange.tooltip": "Grade ranges for this course:",
@@ -154,9 +152,12 @@
"progress.courseGrade.grades": "Grades",
"progress.courseGrade.gradeRange.Tooltip": "Grade range tooltip",
"progress.gradeSummary": "Grade summary",
"progress.gradeSummary.limitedAccessExplanation": "You have limited access to graded assignments as part of the audit track in this course.",
"progress.gradeSummary.tooltip.alt": "Grade summary tooltip",
"progress.gradeSummary.tooltip.body": "Your course assignment's weight is determined by your instructor. By multiplying your grade 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.courseGrade.label.passingGrade": "Passing grade",
"progress.detailedGrades.problemScore.label": "Problem Scores:",
"progress.detailedGrades.problemScore.toggleButton": "Toggle individual problem scores for {subsectionTitle}",
"progress.score": "Score",
"progress.weight": "Weight",
"progress.weightedGrade": "Weighted grade",
@@ -289,7 +290,7 @@
"learn.breadcrumb.navigation.course.home": "المساق ",
"notification.tray.container": "Notification tray",
"notification.open.button": "Show notification tray",
"notification.close.button": "Close sidebar notification",
"notification.close.button": "Close notification tray",
"responsive.close.notification": "Back to course",
"notification.tray.title": "Notifications",
"notification.tray.no.message": "You have no new notifications at this time.",
@@ -368,11 +369,11 @@
"learning.generic.upgradeNotification.expirationHours": "{hourCount, number} {hourCount, plural,\n one {hour}\n other {hours}} left",
"learning.generic.upgradeNotification.expirationMinutes": "Less than 1 hour left",
"learning.generic.upgradeNotification.expiration": "Course access will expire {date}",
"learning.generic.upgradeNotification.code": "Use code {code} at checkout",
"learning.generic.upgradeNotification.firstTimeLearnerDiscount": "{percentage}% First-Time Learner Discount",
"learning.generic.upgradeNotification.accessExpiration": "Upgrade your course today",
"learning.generic.upgradeNotification.accessExpirationUrgent": "Course Access Expiration",
"learning.generic.upgradeNotification.pursueAverifiedCertificate": "Pursue a verified certificate",
"learning.generic.upgradeNotification.code": "Use code {code} at checkout",
"masquerade-widget.userName.error.generic": "حدث خطأ؛ يرجى المحاولة مرة أخرى.",
"masquerade-widget.userName.input.placeholder": "اسم المستخدم أو البريد الإلكتروني",
"masquerade-widget.userName.input.label": "عرف كهذا المستخدم",

17
src/i18n/messages/es_419.json
View File

@@ -14,9 +14,6 @@
"account-activation.alert.message": "We sent an email to {boldEmail} with a link to activate your account. Can’t find it? Check your spam folder or\n {sendEmailTag}.",
"account-activation.resend.link": "resend the email",
"learning.logistration.alert": "Para ver el contenido del curso, {signIn} o {register}.",
"learning.offer.upgradeNow": "Upgrade now",
"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",
@@ -32,7 +29,7 @@
"learning.dates.badge.today": "Hoy",
"learning.dates.badge.unreleased": "Not yet released",
"learning.dates.badge.verifiedOnly": "Solo verificado",
"learning.outline.alert.cert.when": "This course ended on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"learning.outline.alert.cert.when": "This course ends on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"cert.alert.earned.unavailable.header": "Your grade and certificate will be ready soon!",
"cert.alert.earned.ready.header": "Congratulations! Your certificate is ready.",
"learning.outline.alert.end.short": "Este curso acaba en {timeRemaining} a la/s {courseEndTime}.",
@@ -114,7 +111,6 @@
"progress.certificateStatus.downloadableButton": "Download my certificate",
"progress.certificateStatus.viewableButton": "View my certificate",
"progress.certificateStatus.notAvailableHeader": "Certificate status",
"progress.certificateStatus.notAvailableBody": "Your certificate will be available soon! After this course officially ends on {end_date}, you will receive an email notification with your certificate.",
"progress.certificateStatus.upgradeHeader": "Earn a certificate",
"progress.certificateStatus.upgradeBody": "You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.",
"progress.certificateStatus.upgradeButton": "Upgrade now",
@@ -139,9 +135,11 @@
"progress.courseGrade.footer.generic.passing": "You’re currently passing this course",
"progress.courseGrade.footer.nonPassing": "A weighted grade of {passingGrade}% is required to pass in this course",
"progress.courseGrade.footer.passing": "You’re currently passing this course with a grade of {letterGrade} ({minGrade}-{maxGrade}%)",
"progress.courseGrade.preview.header": "locked feature",
"progress.courseGrade.preview.headerLocked": "locked feature",
"progress.courseGrade.preview.headerLimited": "limited feature",
"progress.courseGrade.preview.header.ariaHidden": "Preview of a ",
"progress.courseGrade.preview.body.unlockCertificate": "Unlock to view grades and work towards a certificate.",
"progress.courseGrade.partialpreview.body.unlockCertificate": "Unlock to work towards a certificate.",
"progress.courseGrade.preview.body.upgradeDeadlinePassed": "The deadline to upgrade in this course has passed.",
"progress.courseGrade.preview.button.upgrade": "Upgrade now",
"progress.courseGrade.gradeRange.tooltip": "Grade ranges for this course:",
@@ -154,9 +152,12 @@
"progress.courseGrade.grades": "Grades",
"progress.courseGrade.gradeRange.Tooltip": "Grade range tooltip",
"progress.gradeSummary": "Grade summary",
"progress.gradeSummary.limitedAccessExplanation": "You have limited access to graded assignments as part of the audit track in this course.",
"progress.gradeSummary.tooltip.alt": "Grade summary tooltip",
"progress.gradeSummary.tooltip.body": "Your course assignment's weight is determined by your instructor. By multiplying your grade 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.courseGrade.label.passingGrade": "Passing grade",
"progress.detailedGrades.problemScore.label": "Problem Scores:",
"progress.detailedGrades.problemScore.toggleButton": "Toggle individual problem scores for {subsectionTitle}",
"progress.score": "Score",
"progress.weight": "Weight",
"progress.weightedGrade": "Weighted grade",
@@ -289,7 +290,7 @@
"learn.breadcrumb.navigation.course.home": "Curso",
"notification.tray.container": "Notificación de la barra lateral",
"notification.open.button": "Mostrar la notificación de la barra lateral",
"notification.close.button": "Cerrar la notificación de la barra lateral",
"notification.close.button": "Close notification tray",
"responsive.close.notification": "Regresar al curso",
"notification.tray.title": "Notificaciones",
"notification.tray.no.message": "No tienes notificaciones nuevas en este momento.",
@@ -368,11 +369,11 @@
"learning.generic.upgradeNotification.expirationHours": "Quedan {hourCount, number} {hourCount, plural,\none {hour}\nother {hours}}",
"learning.generic.upgradeNotification.expirationMinutes": "Queda menos de 1 hora",
"learning.generic.upgradeNotification.expiration": "El acceso al curso expirará el {date}",
"learning.generic.upgradeNotification.code": "Usa el código {code} al finalizar la compra",
"learning.generic.upgradeNotification.firstTimeLearnerDiscount": "{percentage}% de descuento de bienvenida para estudiantes nuevos",
"learning.generic.upgradeNotification.accessExpiration": "Cámbiate a la opción verificada",
"learning.generic.upgradeNotification.accessExpirationUrgent": "Vencimiento del acceso al curso",
"learning.generic.upgradeNotification.pursueAverifiedCertificate": "Obtenga un certificado verificado",
"learning.generic.upgradeNotification.code": "Usa el código {code} al finalizar la compra",
"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",

17
src/i18n/messages/fr.json
View File

@@ -14,9 +14,6 @@
"account-activation.alert.message": "We sent an email to {boldEmail} with a link to activate your account. Can’t find it? Check your spam folder or\n {sendEmailTag}.",
"account-activation.resend.link": "resend the email",
"learning.logistration.alert": "To see course content, {signIn} or {register}.",
"learning.offer.upgradeNow": "Upgrade now",
"learning.offer.header": "Upgrade by {date} and save {percentage}% [{fullPricing}]",
"learning.offer.code": "Use code {code} at checkout!",
"learn.navigation.course.tabs.label": "Course Material",
"header.menu.dashboard.label": "Dashboard",
"header.help.label": "Help",
@@ -32,7 +29,7 @@
"learning.dates.badge.today": "Today",
"learning.dates.badge.unreleased": "Not yet released",
"learning.dates.badge.verifiedOnly": "Verified only",
"learning.outline.alert.cert.when": "This course ended on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"learning.outline.alert.cert.when": "This course ends on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"cert.alert.earned.unavailable.header": "Your grade and certificate will be ready soon!",
"cert.alert.earned.ready.header": "Congratulations! Your certificate is ready.",
"learning.outline.alert.end.short": "This course is ending {timeRemaining} at {courseEndTime}.",
@@ -114,7 +111,6 @@
"progress.certificateStatus.downloadableButton": "Download my certificate",
"progress.certificateStatus.viewableButton": "View my certificate",
"progress.certificateStatus.notAvailableHeader": "Certificate status",
"progress.certificateStatus.notAvailableBody": "Your certificate will be available soon! After this course officially ends on {end_date}, you will receive an email notification with your certificate.",
"progress.certificateStatus.upgradeHeader": "Earn a certificate",
"progress.certificateStatus.upgradeBody": "You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.",
"progress.certificateStatus.upgradeButton": "Upgrade now",
@@ -139,9 +135,11 @@
"progress.courseGrade.footer.generic.passing": "You’re currently passing this course",
"progress.courseGrade.footer.nonPassing": "A weighted grade of {passingGrade}% is required to pass in this course",
"progress.courseGrade.footer.passing": "You’re currently passing this course with a grade of {letterGrade} ({minGrade}-{maxGrade}%)",
"progress.courseGrade.preview.header": "locked feature",
"progress.courseGrade.preview.headerLocked": "locked feature",
"progress.courseGrade.preview.headerLimited": "limited feature",
"progress.courseGrade.preview.header.ariaHidden": "Preview of a ",
"progress.courseGrade.preview.body.unlockCertificate": "Unlock to view grades and work towards a certificate.",
"progress.courseGrade.partialpreview.body.unlockCertificate": "Unlock to work towards a certificate.",
"progress.courseGrade.preview.body.upgradeDeadlinePassed": "The deadline to upgrade in this course has passed.",
"progress.courseGrade.preview.button.upgrade": "Upgrade now",
"progress.courseGrade.gradeRange.tooltip": "Grade ranges for this course:",
@@ -154,9 +152,12 @@
"progress.courseGrade.grades": "Grades",
"progress.courseGrade.gradeRange.Tooltip": "Grade range tooltip",
"progress.gradeSummary": "Grade summary",
"progress.gradeSummary.limitedAccessExplanation": "You have limited access to graded assignments as part of the audit track in this course.",
"progress.gradeSummary.tooltip.alt": "Grade summary tooltip",
"progress.gradeSummary.tooltip.body": "Your course assignment's weight is determined by your instructor. By multiplying your grade 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.courseGrade.label.passingGrade": "Passing grade",
"progress.detailedGrades.problemScore.label": "Problem Scores:",
"progress.detailedGrades.problemScore.toggleButton": "Toggle individual problem scores for {subsectionTitle}",
"progress.score": "Score",
"progress.weight": "Weight",
"progress.weightedGrade": "Weighted grade",
@@ -289,7 +290,7 @@
"learn.breadcrumb.navigation.course.home": "Course",
"notification.tray.container": "Notification tray",
"notification.open.button": "Show notification tray",
"notification.close.button": "Close sidebar notification",
"notification.close.button": "Close notification tray",
"responsive.close.notification": "Back to course",
"notification.tray.title": "Notifications",
"notification.tray.no.message": "You have no new notifications at this time.",
@@ -368,11 +369,11 @@
"learning.generic.upgradeNotification.expirationHours": "{hourCount, number} {hourCount, plural,\n one {hour}\n other {hours}} left",
"learning.generic.upgradeNotification.expirationMinutes": "Less than 1 hour left",
"learning.generic.upgradeNotification.expiration": "Course access will expire {date}",
"learning.generic.upgradeNotification.code": "Use code {code} at checkout",
"learning.generic.upgradeNotification.firstTimeLearnerDiscount": "{percentage}% First-Time Learner Discount",
"learning.generic.upgradeNotification.accessExpiration": "Upgrade your course today",
"learning.generic.upgradeNotification.accessExpirationUrgent": "Course Access Expiration",
"learning.generic.upgradeNotification.pursueAverifiedCertificate": "Pursue a verified certificate",
"learning.generic.upgradeNotification.code": "Use code {code} at checkout",
"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",

17
src/i18n/messages/zh_CN.json
View File

@@ -14,9 +14,6 @@
"account-activation.alert.message": "We sent an email to {boldEmail} with a link to activate your account. Can’t find it? Check your spam folder or\n {sendEmailTag}.",
"account-activation.resend.link": "resend the email",
"learning.logistration.alert": "To see course content, {signIn} or {register}.",
"learning.offer.upgradeNow": "Upgrade now",
"learning.offer.header": "Upgrade by {date} and save {percentage}% [{fullPricing}]",
"learning.offer.code": "Use code {code} at checkout!",
"learn.navigation.course.tabs.label": "Course Material",
"header.menu.dashboard.label": "Dashboard",
"header.help.label": "Help",
@@ -32,7 +29,7 @@
"learning.dates.badge.today": "Today",
"learning.dates.badge.unreleased": "Not yet released",
"learning.dates.badge.verifiedOnly": "Verified only",
"learning.outline.alert.cert.when": "This course ended on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"learning.outline.alert.cert.when": "This course ends on {courseEndDateFormatted}. Final grades and certificates are\n scheduled to be available after {certificateAvailableDate}.",
"cert.alert.earned.unavailable.header": "Your grade and certificate will be ready soon!",
"cert.alert.earned.ready.header": "Congratulations! Your certificate is ready.",
"learning.outline.alert.end.short": "This course is ending {timeRemaining} at {courseEndTime}.",
@@ -114,7 +111,6 @@
"progress.certificateStatus.downloadableButton": "Download my certificate",
"progress.certificateStatus.viewableButton": "View my certificate",
"progress.certificateStatus.notAvailableHeader": "Certificate status",
"progress.certificateStatus.notAvailableBody": "Your certificate will be available soon! After this course officially ends on {end_date}, you will receive an email notification with your certificate.",
"progress.certificateStatus.upgradeHeader": "Earn a certificate",
"progress.certificateStatus.upgradeBody": "You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.",
"progress.certificateStatus.upgradeButton": "Upgrade now",
@@ -139,9 +135,11 @@
"progress.courseGrade.footer.generic.passing": "You’re currently passing this course",
"progress.courseGrade.footer.nonPassing": "A weighted grade of {passingGrade}% is required to pass in this course",
"progress.courseGrade.footer.passing": "You’re currently passing this course with a grade of {letterGrade} ({minGrade}-{maxGrade}%)",
"progress.courseGrade.preview.header": "locked feature",
"progress.courseGrade.preview.headerLocked": "locked feature",
"progress.courseGrade.preview.headerLimited": "limited feature",
"progress.courseGrade.preview.header.ariaHidden": "Preview of a ",
"progress.courseGrade.preview.body.unlockCertificate": "Unlock to view grades and work towards a certificate.",
"progress.courseGrade.partialpreview.body.unlockCertificate": "Unlock to work towards a certificate.",
"progress.courseGrade.preview.body.upgradeDeadlinePassed": "The deadline to upgrade in this course has passed.",
"progress.courseGrade.preview.button.upgrade": "Upgrade now",
"progress.courseGrade.gradeRange.tooltip": "Grade ranges for this course:",
@@ -154,9 +152,12 @@
"progress.courseGrade.grades": "Grades",
"progress.courseGrade.gradeRange.Tooltip": "Grade range tooltip",
"progress.gradeSummary": "Grade summary",
"progress.gradeSummary.limitedAccessExplanation": "You have limited access to graded assignments as part of the audit track in this course.",
"progress.gradeSummary.tooltip.alt": "Grade summary tooltip",
"progress.gradeSummary.tooltip.body": "Your course assignment's weight is determined by your instructor. By multiplying your grade 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.courseGrade.label.passingGrade": "Passing grade",
"progress.detailedGrades.problemScore.label": "Problem Scores:",
"progress.detailedGrades.problemScore.toggleButton": "Toggle individual problem scores for {subsectionTitle}",
"progress.score": "Score",
"progress.weight": "Weight",
"progress.weightedGrade": "Weighted grade",
@@ -289,7 +290,7 @@
"learn.breadcrumb.navigation.course.home": "Course",
"notification.tray.container": "Notification tray",
"notification.open.button": "Show notification tray",
"notification.close.button": "Close sidebar notification",
"notification.close.button": "Close notification tray",
"responsive.close.notification": "Back to course",
"notification.tray.title": "Notifications",
"notification.tray.no.message": "You have no new notifications at this time.",
@@ -368,11 +369,11 @@
"learning.generic.upgradeNotification.expirationHours": "{hourCount, number} {hourCount, plural,\n one {hour}\n other {hours}} left",
"learning.generic.upgradeNotification.expirationMinutes": "Less than 1 hour left",
"learning.generic.upgradeNotification.expiration": "Course access will expire {date}",
"learning.generic.upgradeNotification.code": "Use code {code} at checkout",
"learning.generic.upgradeNotification.firstTimeLearnerDiscount": "{percentage}% First-Time Learner Discount",
"learning.generic.upgradeNotification.accessExpiration": "Upgrade your course today",
"learning.generic.upgradeNotification.accessExpirationUrgent": "Course Access Expiration",
"learning.generic.upgradeNotification.pursueAverifiedCertificate": "Pursue a verified certificate",
"learning.generic.upgradeNotification.code": "Use code {code} at checkout",
"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",

26
src/index.scss
View File

@@ -5,14 +5,6 @@
@import "~@edx/frontend-component-footer/dist/footer";
// TODO: Fix .container-fluid for mobile in paragon
.container-fluid {
max-width: 1140px + 2 * $grid-gutter-width;
@media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
padding-left: $grid-gutter-width/2;
padding-right: $grid-gutter-width/2;
}
}
#root {
display: flex;
@@ -70,6 +62,19 @@
}
.course-tabs-navigation {
border-bottom: solid 1px #EAEAEA;
.nav a, .nav button {
&:hover {
background-color: $light-400;
}
}
.nav a {
&:not(.active):hover {
background-color: $light-400;
border-bottom: none;
}
}
}
.nav-underline-tabs {
@@ -357,6 +362,10 @@
}
}
.greyed-out {
opacity: .3;
}
.locked-overlay {
opacity: .3;
pointer-events: none;
@@ -375,6 +384,7 @@
@import 'courseware/course/NotificationTray.scss';
@import 'courseware/course/NotificationTrigger.scss';
@import 'courseware/course/NotificationIcon.scss';
@import 'courseware/course/sequence/lock-paywall/LockPaywall.scss';
@import 'shared/streak-celebration/StreakCelebrationModal.scss';
@import 'courseware/course/content-tools/calculator/calculator.scss';
@import 'courseware/course/content-tools/contentTools.scss';

4
src/instructor-toolbar/InstructorToolbar.jsx
View File

@@ -74,7 +74,7 @@ export default function InstructorToolbar(props) {
return (!didMount ? null : (
<div>
<div className="bg-primary text-white">
<div className="container-fluid py-3 d-md-flex justify-content-end align-items-start">
<div className="container-xl py-3 d-md-flex justify-content-end align-items-start">
<div className="align-items-center flex-grow-1 d-md-flex mx-1 my-1">
<MasqueradeWidget courseId={courseId} onError={showMasqueradeError} />
</div>
@@ -102,7 +102,7 @@ export default function InstructorToolbar(props) {
</div>
</div>
{masqueradeErrorMessage && (
<div className="container-fluid mt-3">
<div className="container-xl mt-3">
<Alert
type={ALERT_TYPES.ERROR}
dismissible={false}

67
src/shared/access-denied-redirect/AccessDeniedRedirect.jsx Normal file
View File

@@ -0,0 +1,67 @@
import React from 'react';
import PropTypes from 'prop-types';
import { getLocale } from '@edx/frontend-platform/i18n';
import { Redirect } from 'react-router';
import { useModel } from '../../generic/model-store';
// This component inspects an access denied error and redirects to a /redirect/... path, which then renders a nice
// little message while the browser loads the next page.
// This is basically a frontend version of check_course_access_with_redirect in the backend.
function AccessDeniedRedirect(props) {
const {
courseId,
metadataModel,
unitId,
} = props;
const {
courseAccess,
start,
} = useModel(metadataModel, courseId);
let url = `/redirect/course-home/${courseId}`;
switch (courseAccess.errorCode) {
case 'audit_expired':
url = `/redirect/dashboard?access_response_error=${courseAccess.additionalContextUserMessage}`;
break;
case 'course_not_started':
// eslint-disable-next-line no-case-declarations
const startDate = (new Intl.DateTimeFormat(getLocale())).format(new Date(start));
url = `/redirect/dashboard?notlive=${startDate}`;
break;
case 'survey_required':
url = `/redirect/survey/${courseId}`;
break;
case 'unfulfilled_milestones':
url = '/redirect/dashboard';
break;
case 'microfrontend_disabled':
// This code path is only used by the courseware right now. The course home tabs each have their own check for
// this in the tab-specific API calls. In those cases, the API will return an http status code if the MFE version
// of those tabs are disabled, rather than an access error like this. We could try to unify these approaches, but
// hopefully the legacy code isn't around long enough for that to be worth it.
if (unitId) {
url = `/redirect/courseware/${courseId}/unit/${unitId}`;
}
break;
case 'authentication_required':
case 'enrollment_required':
default:
}
return (
<Redirect to={url} />
);
}
AccessDeniedRedirect.defaultProps = {
unitId: null,
};
AccessDeniedRedirect.propTypes = {
courseId: PropTypes.string.isRequired,
metadataModel: PropTypes.string.isRequired,
unitId: PropTypes.string,
};
export default AccessDeniedRedirect;

3
src/shared/access-denied-redirect/index.js Normal file
View File

@@ -0,0 +1,3 @@
import AccessDeniedRedirect from './AccessDeniedRedirect';
export default AccessDeniedRedirect;

9
src/shared/data/__factories__/courseBlocks.factory.js
View File

@@ -106,7 +106,12 @@ export function buildSimpleCourseBlocks(courseId, title, options = {}) {
export function buildMinimalCourseBlocks(courseId, title, options = {}) {
const sequenceBlocks = options.sequenceBlocks || [Factory.build(
'block',
{ display_name: 'Title of Sequence', type: 'sequential' },
{
display_name: 'Title of Sequence',
effort_activities: 2,
effort_time: 15,
type: 'sequential',
},
{ courseId },
)];
const sectionBlocks = options.sectionBlocks || [Factory.build(
@@ -115,8 +120,6 @@ export function buildMinimalCourseBlocks(courseId, title, options = {}) {
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),
},

32
src/shared/effort-estimate/EffortEstimate.jsx
View File

@@ -1,9 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from './messages';
// This component shows an effort estimate provided by the backend block data. Either time, activities, or both.
// Right now it is an experiment, and AA-659 is its cleanup ticket.
function EffortEstimate(props) {
const {
@@ -12,27 +14,34 @@ function EffortEstimate(props) {
effortTime,
},
className,
intl,
} = props;
// FIXME: This is not properly internationalized. This is just an experiment right now, so I chose to not mark
// FIXME: the strings for translation. That should be fixed if/when this is made real code. AA-659
const minuteCount = Math.ceil(effortTime / 60); // effortTime is in seconds
const minutesAbbreviated = intl.formatMessage(messages.minutesAbbreviated, { minuteCount });
const minutesFull = intl.formatMessage(messages.minutesFull, { minuteCount });
const minutes = (
<>
{minuteCount}
<span aria-hidden="true"> min</span>
<span className="sr-only"> {minuteCount === 1 ? 'minute' : 'minutes'}</span>
<span aria-hidden="true">{minutesAbbreviated}</span>
<span className="sr-only">{minutesFull}</span>
</>
);
const activities = <>{effortActivities} {effortActivities === 1 ? 'activity' : 'activities'}</>;
const activities = intl.formatMessage(messages.activities, { activityCount: effortActivities });
let content = null;
if (effortTime && effortActivities) {
content = <>{minutes} + {activities}</>;
content = (
<FormattedMessage
id="learning.effortEstimation.combinedEstimate"
defaultMessage="{minutes} + {activities}"
description="You can likely leave this alone, unless you want to use a full width plus or similar change"
values={{ activities, minutes }}
/>
);
} else if (effortTime) {
content = <>{minutes}</>;
content = minutes;
} else if (effortActivities) {
content = <>{activities}</>;
content = activities;
} else {
return null;
}
@@ -57,6 +66,7 @@ EffortEstimate.propTypes = {
effortTime: PropTypes.number,
}).isRequired,
className: PropTypes.string,
intl: intlShape.isRequired,
};
export default EffortEstimate;
export default injectIntl(EffortEstimate);

20
src/shared/effort-estimate/messages.js Normal file
View File

@@ -0,0 +1,20 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
activities: {
id: 'learning.effortEstimation.activities',
defaultMessage: '{activityCount, plural, one {# activity} other {# activities}}',
},
minutesAbbreviated: {
id: 'learning.effortEstimation.minutesAbbreviated',
defaultMessage: '{minuteCount, plural, other {# min}}',
description: 'Number of minutes in a casual, shorthand manner: 5 min',
},
minutesFull: {
id: 'learning.effortEstimation.minutesFull',
defaultMessage: '{minuteCount, plural, one {# minute} other {# minutes}}',
description: 'Number of minutes spelled out: 5 minutes',
},
});
export default messages;

26
src/shared/streak-celebration/StreakCelebrationModal.jsx
View File

@@ -134,18 +134,20 @@ function StreakModal({
</div>
)}
{ AA759ExperimentEnabled && (
<Alert variant="success" className="px-0 d-flex">
<Icon className="col-small ml-3 text-success-500" src={MoneyFilled} />
<div className="col-11 factoid-wrapper">
<b>{intl.formatMessage(messages.congratulations)}</b>
&nbsp;{intl.formatMessage(messages.streakDiscountMessage)}&nbsp;
<FormattedMessage
id="learning.streakCelebration.streakAA759EndDateMessage"
defaultMessage="Ends {date}."
values={{
date: new Date('2021-7-20 00:00').toLocaleDateString({ timeZone: 'UTC' }),
}}
/>
<Alert variant="success" className="px-0">
<div className="d-flex">
<Icon className="col-small ml-3 text-success-500" src={MoneyFilled} />
<div className="col-11 factoid-wrapper">
<b>{intl.formatMessage(messages.congratulations)}</b>
&nbsp;{intl.formatMessage(messages.streakDiscountMessage)}&nbsp;
<FormattedMessage
id="learning.streakCelebration.streakAA759EndDateMessage"
defaultMessage="Ends {date}."
values={{
date: new Date('2021-7-20 00:00').toLocaleDateString({ timeZone: 'UTC' }),
}}
/>
</div>
</div>
</Alert>
)}

2
src/tab-page/LoadedTabPage.jsx
View File

@@ -78,7 +78,7 @@ function LoadedTabPage({
}}
/>
<CourseTabsNavigation tabs={tabs} className="mb-3" activeTabSlug={activeTabSlug} />
<div className="container-fluid">
<div className="container-xl">
{children}
</div>
</main>

23
src/tab-page/TabPage.jsx
View File

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { Toast } from '@edx/paragon';
import { Header } from '../course-header';
import AccessDeniedRedirect from '../shared/access-denied-redirect';
import PageLoading from '../generic/PageLoading';
import genericMessages from '../generic/messages';
@@ -14,7 +15,10 @@ import { setCallToActionToast } from '../course-home/data/slice';
function TabPage({
intl,
courseId,
courseStatus,
metadataModel,
unitId,
...passthroughProps
}) {
const {
@@ -49,11 +53,21 @@ function TabPage({
>
{toastHeader}
</Toast>
<LoadedTabPage {...passthroughProps} />
<LoadedTabPage courseId={courseId} metadataModel={metadataModel} unitId={unitId} {...passthroughProps} />
</>
);
}
if (courseStatus === 'denied') {
return (
<AccessDeniedRedirect
courseId={courseId}
metadataModel={metadataModel}
unitId={unitId}
/>
);
}
// courseStatus 'failed' and any other unexpected course status.
return (
<>
@@ -65,9 +79,16 @@ function TabPage({
);
}
TabPage.defaultProps = {
unitId: null,
};
TabPage.propTypes = {
intl: intlShape.isRequired,
courseId: PropTypes.string.isRequired,
courseStatus: PropTypes.string.isRequired,
metadataModel: PropTypes.string.isRequired,
unitId: PropTypes.string,
};
export default injectIntl(TabPage);