chore(deps): update codecov/codecov-action action to v5

Co-Authored-By: Claude Code <noreply@anthropic.com>

.env

@@ -22,3 +22,6 @@ USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+ENABLE_PROFILE_IMAGE=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -23,3 +23,6 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+ENABLE_PROFILE_IMAGE=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -21,3 +21,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
 LEARNER_FEEDBACK_URL=''
 STAFF_FEEDBACK_URL=''
+ENABLE_PROFILE_IMAGE=''

.eslintignore

@@ -2,3 +2,4 @@ coverage/*
 dist/
 node_modules/
 jest.config.js
+src/i18n/messages/

.eslintrc.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig(
   'eslint',

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.github/workflows/ci.yml

@@ -9,17 +9,16 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
+
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v6
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -33,4 +32,7 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.gitignore

@@ -6,6 +6,7 @@ node_modules
 npm-debug.log
 coverage
 module.config.js
+env.config.*
 
 dist/
 src/i18n/transifex_input.json

.nvmrc

@@ -1 +1 @@
-18
+24

.tx/config

@@ -1,8 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-discussions]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type = KEYVALUEJSON

Makefile

@@ -1,7 +1,3 @@
-export TRANSIFEX_RESOURCE = frontend-app-discussions
-transifex_resource = frontend-app-discussions
-transifex_langs = "ar,cs,de_DE,es_419,es_AR,es_ES,fa_IR,fr,fr_CA,fr_FR,hi,it_IT,pl,pt_PT,tr_TR,uk,ru,zh_CN"
-
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
@@ -45,37 +41,21 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-	  && atlas pull --filter=$(transifex_langs) \
+	  && atlas pull $(ATLAS_OPTIONS) \
 	           translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
 	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           translations/paragon/src/i18n/messages:paragon \
 	           translations/frontend-app-discussions/src/i18n/messages:frontend-app-discussions
 
-	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-discussions
-endif
+	$(intl_imports) frontend-component-header frontend-component-footer frontend-platform paragon frontend-app-discussions
+# endif
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
-	git diff --exit-code package-lock.json
+	git diff --exit-code package-lock.json

README.rst

@@ -52,6 +52,12 @@ Cloning and Startup
 
 The dev server is running at `http://localhost:2002 <http://localhost:2002>`_.
 
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Getting Help
 ============
 Please tag **@openedx/edx-infinity ** on any PRs or issues.  Thanks.
@@ -70,7 +76,7 @@ How to Contribute
 
 Details about how to become a contributor to the Open edX project may be found in the wiki at `How to contribute`_
 
-.. _How to contribute: https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/process/index.html
+.. _How to contribute: https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html
 
 PR description template should be automatically applied if you are sending PR from github interface; otherwise you
 can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend-app-discussions/blob/master/.github/pull_request_template.md>`_
@@ -119,4 +125,4 @@ Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-
 Reporting Security Issues
 =========================
 
-Please do not report security issues in public. Please email security@openedx.org.
+Please do not report security issues in public. Please email security@openedx.org.

catalog-info.yaml

@@ -12,6 +12,7 @@ metadata:
       icon: "Web"
   annotations:
     openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
 spec:
   owner: group:edx-infinity
   type: 'website'

jest.config.js

@@ -1,14 +1,14 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.
   // If you want to add config BEFORE jest loads, use setupFiles instead.
   setupFiles: ['<rootDir>/.env.test'],
   setupFilesAfterEnv: [
-    '<rootDir>/src/setupTest.js',
+    '<rootDir>/src/setupTest.jsx',
   ],
   coveragePathIgnorePatterns: [
-    'src/setupTest.js',
+    'src/setupTest.jsx',
     'src/i18n',
   ],
 });

openedx.yaml

@@ -1,11 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-nick: tmpa
-oeps: {}
-owner: edx/arch-team
-openedx-release:
-  # The openedx-release key is described in OEP-10:
-  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
-  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
-  ref: master

package.json

@@ -16,13 +16,9 @@
     "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/discussions/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "author": "edX",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/openedx/frontend-app-discussions#readme",
@@ -34,44 +30,47 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.5.1",
-    "@edx/frontend-component-header": "4.9.1",
-    "@edx/frontend-platform": "4.6.3",
-    "@edx/paragon": "20.46.3",
-    "@reduxjs/toolkit": "1.8.0",
-    "@tinymce/tinymce-react": "3.13.1",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^8.1.0",
+    "@edx/frontend-platform": "^8.3.3",
+    "@edx/openedx-atlas": "^0.7.0",
+    "@openedx/paragon": "^23.4.5",
+    "@reduxjs/toolkit": "1.9.7",
+    "@tinymce/tinymce-react": "5.1.1",
     "babel-polyfill": "6.26.0",
-    "classnames": "2.3.2",
-    "core-js": "3.21.1",
+    "classnames": "2.5.1",
+    "core-js": "3.47.0",
     "dompurify": "^2.4.3",
-    "formik": "2.2.9",
+    "formik": "2.4.9",
     "lodash.snakecase": "4.1.1",
     "prop-types": "15.8.1",
     "raw-loader": "4.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-google-recaptcha-v3": "^1.11.0",
+    "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
-    "redux": "4.1.2",
-    "regenerator-runtime": "0.13.9",
+    "react-router": "6.18.0",
+    "react-router-dom": "6.18.0",
+    "redux": "4.2.1",
+    "regenerator-runtime": "0.14.1",
     "timeago.js": "4.0.2",
-    "tinymce": "5.10.7",
-    "yup": "0.31.1"
+    "tinymce": "5.10.9",
+    "yup": "0.32.11"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "13.0.5",
-    "@edx/reactifex": "1.1.0",
+    "@edx/browserslist-config": "1.5.0",
+    "@openedx/frontend-build": "^14.6.2",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.3.1",
     "@testing-library/user-event": "13.5.0",
+    "axios": "^0.30.0",
     "axios-mock-adapter": "1.22.0",
     "babel-plugin-react-intl": "8.2.25",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "glob": "7.2.0",
-    "husky": "7.0.4",
-    "jest": "27.5.1",
-    "rosie": "2.1.0"
+    "glob": "7.2.3",
+    "jest": "29.7.0",
+    "rosie": "2.1.1"
   }
 }

src/assets/ContentUnavailable.jsx

@@ -0,0 +1,14 @@
+const ContentUnavailable = () => (
+  <svg width="229" height="167" viewBox="0 0 229 167" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.9664 67.649C1.9299 88.4776 -5.31519 112.805 4.55784 135.123C22.5467 175.788 120.573 164.359 163.26 148.39C283.487 103.415 225.675 -14.6 95.6636 14.5816C59.2626 22.7519 30.003 46.8204 15.9664 67.649Z" fill="#E1DDDB" fillOpacity="0.3" />
+    <path d="M101.264 120.672L101.13 120.486H100.9H58.4969C54.0932 120.486 50.45 116.531 50.45 111.548V60.3944C50.45 55.4164 54.0937 51.45 58.4969 51.45H170.468C174.872 51.45 178.522 55.4171 178.55 60.3969V111.548C178.55 116.531 174.901 120.486 170.497 120.486H126.838H126.636L126.502 120.637L112.568 136.283L101.264 120.672Z" fill="white" stroke="#454545" strokeWidth="0.9" />
+    <path d="M99.363 99.6098L93.9175 94.6162L82.0459 107.565L87.4913 112.558L99.363 99.6098Z" fill="#002121" />
+    <path d="M87.3976 112.877C87.3486 112.862 87.3041 112.836 87.268 112.8L81.7927 107.803C81.76 107.774 81.7334 107.739 81.7145 107.7C81.6956 107.661 81.6848 107.619 81.6828 107.575C81.6807 107.532 81.6874 107.488 81.7025 107.447C81.7175 107.407 81.7407 107.369 81.7705 107.338L93.645 94.3885C93.6737 94.3558 93.7088 94.3292 93.7481 94.3106C93.7875 94.292 93.8302 94.2817 93.8737 94.2803C93.9601 94.2699 94.047 94.2939 94.1158 94.3472L99.5894 99.3501C99.6214 99.3792 99.6472 99.4144 99.6654 99.4537C99.6835 99.4929 99.6937 99.5354 99.6951 99.5786C99.6966 99.6219 99.6894 99.665 99.6739 99.7054C99.6585 99.7458 99.6351 99.7827 99.6052 99.8139L87.7445 112.787C87.6839 112.848 87.6031 112.884 87.5175 112.889C87.4771 112.894 87.4361 112.89 87.3976 112.877ZM82.5076 107.548L87.4698 112.094L98.9201 99.6383L93.966 95.0875L82.5076 107.548Z" fill="#002121" />
+    <path d="M90.5786 108.62L85.6982 104.144C85.0283 103.53 83.9874 103.575 83.3732 104.245L62.9753 126.494C62.3611 127.164 62.4062 128.205 63.076 128.819L67.9565 133.294C68.6263 133.909 69.6672 133.863 70.2814 133.193L90.6793 110.945C91.2935 110.275 91.2484 109.234 90.5786 108.62Z" fill="#03C7E8" />
+    <path d="M68.543 133.99C68.2434 133.908 67.9682 133.754 67.7412 133.542L62.8495 129.063C62.4689 128.709 62.2426 128.22 62.2195 127.7C62.1963 127.181 62.3781 126.673 62.7256 126.286L83.1283 104.037C83.4824 103.656 83.9719 103.43 84.4913 103.407C85.0107 103.384 85.5184 103.565 85.905 103.913L90.7904 108.39C91.171 108.744 91.3972 109.234 91.4204 109.753C91.4435 110.273 91.2618 110.78 90.9142 111.167L70.5243 133.42C70.2781 133.687 69.963 133.882 69.6136 133.983C69.2641 134.083 68.8938 134.086 68.543 133.99ZM84.937 104.091C84.8052 104.054 84.6678 104.039 84.5309 104.048C84.3574 104.056 84.1873 104.099 84.0304 104.173C83.8734 104.247 83.7325 104.352 83.616 104.48L63.2151 126.723C62.9827 126.981 62.8613 127.321 62.8771 127.668C62.8928 128.015 63.0444 128.341 63.2992 128.577L68.1845 133.054C68.4417 133.287 68.78 133.409 69.1265 133.395C69.473 133.38 69.7998 133.23 70.0366 132.976L90.434 110.746C90.6663 110.488 90.7878 110.149 90.772 109.802C90.7563 109.455 90.6046 109.128 90.3499 108.892L85.4645 104.415C85.3185 104.265 85.1372 104.154 84.937 104.091Z" fill="#002121" />
+    <path d="M119.367 71.6959C116.6 69.1548 113.141 67.492 109.428 66.9178C105.715 66.3436 101.916 66.8839 98.51 68.4703C95.1043 70.0567 92.2457 72.6179 90.296 75.8298C88.3463 79.0416 87.3932 82.7597 87.5572 86.5134C87.7212 90.2671 88.9951 93.8877 91.2175 96.9169C93.44 99.9461 96.5111 102.248 100.042 103.531C103.573 104.813 107.406 105.02 111.054 104.123C114.702 103.227 118.003 101.268 120.538 98.4946C123.931 94.7829 125.713 89.8768 125.494 84.8527C125.274 79.8287 123.071 75.097 119.367 71.6959ZM96.9839 96.0996C94.9233 94.2099 93.4694 91.7515 92.8059 89.0353C92.1424 86.3191 92.2992 83.467 93.2565 80.8399C94.2138 78.2127 95.9285 75.9283 98.1839 74.2757C100.439 72.6231 103.134 71.6765 105.927 71.5556C108.72 71.4346 111.487 72.1447 113.876 73.5962C116.266 75.0477 118.171 77.1752 119.352 79.7098C120.532 82.2445 120.934 85.0723 120.508 87.8357C120.081 90.5991 118.845 93.174 116.955 95.2348C114.421 97.9979 110.893 99.6412 107.148 99.8034C103.403 99.9656 99.7468 98.6333 96.9839 96.0996Z" fill="white" />
+    <path d="M101.371 104.313C96.6651 103.025 92.6175 100.01 90.0365 95.8695C87.4556 91.7285 86.5312 86.7663 87.4479 81.9735C88.3647 77.1806 91.055 72.9097 94.982 70.0134C98.9089 67.117 103.784 65.8084 108.633 66.3486C113.482 66.8888 117.949 69.2382 121.142 72.9277C124.335 76.6173 126.019 81.3755 125.858 86.2526C125.697 91.1296 123.703 95.7667 120.273 99.2381C116.844 102.709 112.232 104.76 107.358 104.98C105.34 105.074 103.319 104.848 101.371 104.313ZM111.529 67.7055C109.642 67.1867 107.687 66.9654 105.732 67.0496C101.063 67.2601 96.6449 69.2229 93.3586 72.5465C90.0724 75.8701 88.1594 80.3103 88.0012 84.9817C87.843 89.653 89.4512 94.2123 92.505 97.7502C95.5589 101.288 99.834 103.545 104.478 104.07C109.122 104.596 113.793 103.351 117.56 100.585C121.328 97.8185 123.914 93.7337 124.804 89.1451C125.694 84.5565 124.821 79.8012 122.361 75.8275C119.9 71.8538 116.033 68.9537 111.529 67.7055ZM102.661 99.6222C100.464 99.0148 98.4423 97.8945 96.7628 96.3534C94.1466 93.9593 92.5 90.6882 92.1352 87.1605C91.7704 83.6327 92.7128 80.0937 94.7836 77.2145C96.8544 74.3353 99.9096 72.3161 103.37 71.54C106.83 70.7638 110.455 71.2847 113.556 73.0037C116.658 74.7227 119.021 77.5203 120.197 80.8661C121.373 84.2118 121.281 87.873 119.937 91.1553C118.594 94.4375 116.093 97.1126 112.908 98.6733C109.724 100.234 106.077 100.572 102.661 99.6222ZM97.2188 95.8692C99.2303 97.7107 101.742 98.9152 104.437 99.3306C107.133 99.746 109.89 99.3537 112.363 98.2033C114.836 97.0529 116.912 95.1958 118.331 92.8664C119.75 90.5371 120.447 87.8397 120.334 85.1146C120.215 82.3875 119.291 79.7568 117.678 77.5551C116.064 75.3534 113.835 73.6794 111.27 72.7447C108.706 71.81 105.922 71.6565 103.27 72.3037C100.618 72.9509 98.2181 74.3696 96.3723 76.3807C93.9071 79.0806 92.612 82.6474 92.7707 86.3C92.9294 89.9527 94.5288 93.3936 97.2188 95.8692Z" fill="#002121" />
+  </svg>
+);
+
+export default ContentUnavailable;

src/assets/confirm-email.svg

@@ -0,0 +1,76 @@
+<svg width="406" height="302" viewBox="0 0 406 302" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4274_29461)">
+<path d="M160.119 242.657L291.085 242.808C292.951 242.713 294.731 241.999 296.145 240.779C297.56 239.559 298.527 237.903 298.895 236.071L323.256 107.464C323.471 106.663 323.497 105.823 323.332 105.01C323.167 104.197 322.816 103.433 322.306 102.779C321.796 102.125 321.142 101.598 320.394 101.24C319.646 100.881 318.825 100.702 317.995 100.714L187.029 100.563C185.163 100.658 183.383 101.372 181.969 102.592C180.554 103.812 179.587 105.469 179.219 107.3L154.858 235.907C154.643 236.709 154.617 237.549 154.782 238.361C154.947 239.174 155.298 239.938 155.808 240.592C156.318 241.246 156.972 241.773 157.72 242.131C158.468 242.49 159.289 242.67 160.119 242.657Z" fill="white"/>
+<path d="M291.048 243.446L160.081 243.295C159.199 243.311 158.325 243.131 157.522 242.766C156.718 242.402 156.007 241.863 155.438 241.188C154.837 240.442 154.412 239.571 154.194 238.638C153.975 237.706 153.969 236.736 154.177 235.801L178.601 107.181C179.004 105.21 180.051 103.43 181.577 102.119C183.102 100.808 185.02 100.041 187.029 99.9393L317.996 100.091C318.868 100.082 319.731 100.265 320.525 100.627C321.318 100.989 322.023 101.521 322.588 102.185C323.188 102.934 323.613 103.807 323.832 104.742C324.05 105.676 324.056 106.647 323.85 107.585L299.513 236.205C299.109 238.182 298.056 239.967 296.523 241.278C294.99 242.59 293.063 243.353 291.048 243.446ZM160.081 242.033L291.048 242.185C292.767 242.095 294.408 241.434 295.71 240.308C297.012 239.182 297.902 237.654 298.239 235.965L322.588 107.357C322.762 106.604 322.765 105.82 322.597 105.065C322.429 104.309 322.094 103.601 321.617 102.992C321.163 102.466 320.598 102.046 319.964 101.763C319.329 101.479 318.64 101.339 317.945 101.352L186.978 101.201C185.259 101.291 183.619 101.951 182.316 103.078C181.014 104.204 180.124 105.732 179.787 107.421L155.476 236.028C155.303 236.782 155.3 237.565 155.468 238.321C155.636 239.076 155.971 239.784 156.448 240.393C156.902 240.92 157.466 241.339 158.1 241.623C158.735 241.906 159.424 242.047 160.119 242.033H160.081Z" fill="#231F20"/>
+<path d="M320.973 120.187L176.936 120.011C176.769 120.011 176.608 119.944 176.49 119.826C176.372 119.708 176.305 119.547 176.305 119.38C176.308 119.213 176.376 119.055 176.494 118.937C176.611 118.82 176.77 118.752 176.936 118.749L320.986 118.926C321.153 118.926 321.313 118.992 321.432 119.11C321.55 119.229 321.616 119.389 321.616 119.556C321.613 119.725 321.544 119.885 321.424 120.003C321.303 120.121 321.142 120.187 320.973 120.187Z" fill="#231F20"/>
+<path d="M311.308 112.057C312.689 110.592 312.831 108.482 311.624 107.345C310.418 106.207 308.32 106.473 306.938 107.938C305.557 109.403 305.416 111.513 306.622 112.651C307.829 113.788 309.927 113.523 311.308 112.057Z" fill="#D1D3D4"/>
+<path d="M299.838 112.036C301.219 110.57 301.36 108.46 300.154 107.323C298.947 106.185 296.849 106.451 295.468 107.916C294.087 109.382 293.945 111.491 295.152 112.629C296.358 113.766 298.456 113.501 299.838 112.036Z" fill="#D1D3D4"/>
+<path d="M288.366 112.022C289.747 110.557 289.889 108.447 288.682 107.31C287.475 106.172 285.377 106.438 283.996 107.903C282.615 109.368 282.473 111.478 283.68 112.616C284.887 113.753 286.985 113.488 288.366 112.022Z" fill="#D1D3D4"/>
+<path d="M252.859 130.098L240.483 195.412L292.966 195.475L305.342 130.161L252.859 130.098Z" fill="white"/>
+<path d="M252.847 130.1H305.342L292.978 195.413H240.483L252.847 130.1ZM252.847 128.839C252.55 128.833 252.26 128.933 252.03 129.12C251.799 129.307 251.641 129.569 251.585 129.86L239.221 195.174C239.186 195.358 239.191 195.548 239.239 195.73C239.286 195.912 239.373 196.081 239.494 196.225C239.615 196.369 239.766 196.484 239.938 196.562C240.109 196.64 240.295 196.678 240.483 196.675H292.965C293.264 196.68 293.555 196.578 293.786 196.389C294.017 196.2 294.173 195.934 294.227 195.64L306.591 130.327C306.625 130.146 306.619 129.959 306.573 129.781C306.527 129.602 306.443 129.435 306.326 129.293C306.207 129.15 306.059 129.036 305.891 128.957C305.723 128.879 305.54 128.838 305.354 128.839H252.872H252.847Z" fill="#231F20"/>
+<path d="M290.177 147.233C290.075 148.083 290.161 148.944 290.43 149.757C290.669 150.23 290.957 150.678 291.288 151.094C292.328 152.684 292.928 154.521 293.029 156.418C293.168 157.702 292.995 159 292.524 160.203C292.145 161.086 291.54 161.868 291.187 162.726C290.766 163.769 290.699 164.921 290.997 166.006C291.288 167.028 291.868 168.138 291.338 169.046C291.13 169.343 290.845 169.578 290.514 169.727C290.183 169.876 289.819 169.933 289.458 169.892C288.738 169.8 288.032 169.627 287.351 169.374C283.503 168.264 278.659 168.794 274.622 168.517L259.483 167.457C257.426 167.305 254.878 166.788 254.335 164.795C253.881 163.117 255.521 160.316 256.177 158.739C257.187 156.02 258.513 153.429 260.126 151.018C261.057 149.917 261.85 148.705 262.485 147.41C262.769 146.552 263.009 145.681 263.204 144.798C264.07 142.261 265.568 139.986 267.557 138.188C268.841 136.861 270.317 135.734 271.935 134.844C277.423 131.993 286.544 133.923 289.042 139.992C289.943 142.294 290.331 144.766 290.177 147.233Z" fill="white"/>
+<path d="M289.584 170.56H289.42C288.813 170.509 288.214 170.377 287.641 170.169L287.175 170.03C284.44 169.415 281.636 169.164 278.835 169.285C277.334 169.285 275.934 169.285 274.571 169.185L259.432 168.125C256.089 167.898 254.222 166.863 253.717 164.996C253.288 163.432 254.285 161.312 255.079 159.609C255.269 159.205 255.445 158.839 255.584 158.524C256.61 155.757 257.957 153.119 259.596 150.664C259.798 150.374 260.012 150.097 260.227 149.819C260.893 149.023 261.449 148.14 261.88 147.195C262.064 146.689 262.212 146.17 262.321 145.643C262.397 145.302 262.485 144.974 262.573 144.634C263.464 141.989 265.025 139.621 267.103 137.758C268.424 136.375 269.952 135.205 271.632 134.289C273.401 133.466 275.317 133.005 277.267 132.934C279.217 132.862 281.161 133.181 282.986 133.872C284.438 134.339 285.777 135.104 286.915 136.118C288.054 137.133 288.967 138.375 289.597 139.764C290.518 142.154 290.905 144.716 290.732 147.271V147.384C290.618 147.906 290.628 148.447 290.762 148.965C290.896 149.482 291.149 149.96 291.502 150.361L291.729 150.689C292.843 152.374 293.487 154.325 293.596 156.341C293.747 157.742 293.552 159.159 293.028 160.467C292.828 160.901 292.601 161.323 292.347 161.728C292.101 162.134 291.882 162.556 291.691 162.99C291.333 163.899 291.28 164.9 291.54 165.841C291.54 166.043 291.666 166.245 291.729 166.447C291.956 166.901 292.081 167.4 292.094 167.908C292.107 168.416 292.008 168.921 291.805 169.386C291.564 169.754 291.234 170.054 290.846 170.259C290.457 170.464 290.023 170.568 289.584 170.56ZM277.725 134.226C275.838 134.208 273.974 134.641 272.288 135.487C270.722 136.341 269.297 137.431 268.061 138.717C266.144 140.42 264.705 142.595 263.885 145.025C263.785 145.34 263.721 145.656 263.646 145.971C263.517 146.558 263.348 147.135 263.141 147.699C262.673 148.757 262.057 149.743 261.312 150.626L260.694 151.446C259.126 153.816 257.831 156.356 256.833 159.016C256.694 159.357 256.505 159.735 256.316 160.164C255.635 161.59 254.714 163.558 255.054 164.655C255.395 165.753 256.934 166.636 259.609 166.825L274.748 167.885C276.073 167.973 277.46 167.986 278.924 167.986C281.848 167.861 284.776 168.129 287.629 168.781L288.121 168.932C288.594 169.099 289.085 169.209 289.584 169.26C289.821 169.291 290.063 169.26 290.284 169.169C290.505 169.078 290.699 168.931 290.846 168.743C291.123 168.276 290.846 167.595 290.657 166.876C290.581 166.649 290.505 166.422 290.442 166.207C290.108 164.985 290.183 163.686 290.657 162.511C290.865 162.018 291.11 161.542 291.388 161.085C291.615 160.694 291.83 160.328 292.007 159.95C292.435 158.829 292.59 157.622 292.461 156.43C292.378 154.633 291.816 152.89 290.833 151.383L290.606 151.081C290.331 150.726 290.098 150.341 289.912 149.933C289.612 149.084 289.504 148.179 289.597 147.283L290.253 147.195H289.61C289.778 144.83 289.424 142.457 288.575 140.243C288.014 139.019 287.201 137.925 286.191 137.034C285.18 136.143 283.994 135.474 282.709 135.071C281.111 134.498 279.423 134.216 277.725 134.238V134.226Z" fill="#231F20"/>
+<path d="M244.053 176.552L240.483 195.476H292.978L296.548 176.615C292.221 171.43 284.954 169.639 278.558 169.046C276.035 168.819 273.764 168.755 271.783 168.755H271.316C269.462 168.755 267.317 168.755 265.008 169.02H264.895C258.246 169.563 250.336 171.38 244.053 176.552Z" fill="#F0CC00"/>
+<path d="M264.049 172.641L265.652 190.303L266.131 195.451H267.317L269.739 190.291L278.003 172.729C274.874 171.632 267.594 171.632 264.049 172.641Z" fill="#231F20"/>
+<path d="M278.028 172.667C277.168 173.873 276.032 174.857 274.716 175.537C273.4 176.218 271.94 176.574 270.458 176.578C269.115 176.67 267.776 176.342 266.627 175.639C265.479 174.936 264.578 173.893 264.049 172.654L267.632 157.275H280.248L278.028 172.667Z" fill="white"/>
+<path d="M270.471 177.224C268.993 177.31 267.524 176.937 266.266 176.155C265.008 175.374 264.022 174.222 263.444 172.858C263.407 172.744 263.407 172.62 263.444 172.505L267.027 157.139C267.061 156.996 267.141 156.869 267.256 156.778C267.37 156.687 267.512 156.636 267.658 156.634H280.274C280.368 156.633 280.461 156.653 280.546 156.692C280.631 156.732 280.706 156.789 280.766 156.861C280.828 156.931 280.874 157.014 280.9 157.103C280.926 157.192 280.932 157.287 280.917 157.379L278.684 172.758C278.674 172.847 278.644 172.933 278.596 173.01C277.679 174.312 276.462 175.375 275.048 176.109C273.634 176.842 272.064 177.225 270.471 177.224ZM264.731 172.606C265.244 173.669 266.064 174.554 267.085 175.146C268.106 175.737 269.281 176.008 270.459 175.924C271.807 175.92 273.136 175.602 274.34 174.995C275.545 174.389 276.591 173.51 277.398 172.43L279.492 157.946H268.137L264.731 172.606Z" fill="#231F20"/>
+<path d="M279.012 163.875C277.777 165.319 276.256 166.491 274.546 167.319C271.783 168.745 267.733 170.334 264.794 169.842L266.522 163.345C268.743 163.611 270.988 163.611 273.209 163.345C275.252 163.261 277.272 162.874 279.201 162.197C279.542 162.121 279.517 163.257 279.012 163.875Z" fill="#231F20"/>
+<path d="M265.929 170.574C265.507 170.575 265.085 170.541 264.668 170.473C264.58 170.46 264.497 170.429 264.423 170.381C264.349 170.333 264.286 170.27 264.239 170.196C264.189 170.123 264.157 170.039 264.144 169.952C264.131 169.865 264.137 169.776 264.163 169.691L265.891 163.194C265.93 163.046 266.023 162.917 266.151 162.833C266.279 162.749 266.434 162.716 266.585 162.74C268.755 163.01 270.95 163.01 273.12 162.74C275.107 162.663 277.071 162.293 278.949 161.642C279.103 161.58 279.274 161.57 279.434 161.616C279.594 161.662 279.734 161.76 279.832 161.895C279.991 162.279 280.043 162.699 279.98 163.111C279.918 163.522 279.745 163.909 279.479 164.229C278.194 165.746 276.603 166.976 274.811 167.837C272.767 168.934 269.071 170.574 265.929 170.574ZM265.589 169.313C268.629 169.426 272.603 167.61 274.256 166.79C275.894 166.017 277.348 164.902 278.52 163.522C278.598 163.404 278.662 163.277 278.709 163.144C276.931 163.668 275.098 163.981 273.247 164.077C271.15 164.308 269.035 164.308 266.939 164.077L265.589 169.313Z" fill="#231F20"/>
+<path d="M284.475 196.119H284.273C284.191 196.094 284.116 196.052 284.05 195.996C283.985 195.941 283.931 195.873 283.892 195.797C283.854 195.72 283.831 195.637 283.824 195.552C283.818 195.466 283.829 195.38 283.857 195.299L288.903 179.453C288.93 179.371 288.972 179.294 289.028 179.227C289.085 179.161 289.153 179.106 289.231 179.067C289.308 179.027 289.392 179.003 289.479 178.995C289.566 178.988 289.653 178.998 289.736 179.025C289.819 179.051 289.895 179.094 289.962 179.15C290.028 179.206 290.083 179.275 290.123 179.352C290.163 179.429 290.187 179.514 290.194 179.6C290.201 179.687 290.191 179.774 290.165 179.857L285.118 195.703C285.07 195.832 284.981 195.942 284.865 196.017C284.75 196.092 284.613 196.128 284.475 196.119Z" fill="#231F20"/>
+<path d="M248.973 196.058C248.801 196.048 248.64 195.971 248.525 195.844C248.409 195.716 248.348 195.549 248.355 195.377L249.314 179.518C249.361 179.383 249.45 179.266 249.569 179.187C249.688 179.107 249.83 179.069 249.973 179.077C250.116 179.086 250.253 179.141 250.361 179.234C250.47 179.328 250.545 179.454 250.575 179.594L249.617 195.452C249.607 195.616 249.535 195.77 249.415 195.883C249.296 195.996 249.137 196.058 248.973 196.058Z" fill="#231F20"/>
+<path d="M266.661 153.741C266.926 150.133 262.763 149.237 262.183 153.489C261.92 154.832 262.056 156.222 262.574 157.488C262.679 157.739 262.836 157.964 263.035 158.15C263.234 158.336 263.47 158.477 263.727 158.565C263.984 158.653 264.257 158.686 264.528 158.662C264.799 158.637 265.062 158.555 265.299 158.422" fill="white"/>
+<path d="M264.365 159.334C264.13 159.339 263.895 159.305 263.671 159.233C263.307 159.121 262.972 158.934 262.685 158.684C262.398 158.434 262.167 158.127 262.006 157.783C261.423 156.401 261.256 154.88 261.526 153.405C261.88 150.882 263.406 149.885 264.769 150.024C265.603 150.194 266.337 150.688 266.809 151.397C267.282 152.106 267.455 152.972 267.292 153.809C267.243 153.944 267.151 154.059 267.03 154.137C266.909 154.215 266.766 154.251 266.622 154.24C266.479 154.228 266.343 154.17 266.236 154.074C266.129 153.978 266.057 153.849 266.03 153.708C266.131 152.257 265.412 151.412 264.642 151.336C263.873 151.26 263.078 151.803 262.838 153.594C262.592 154.803 262.707 156.058 263.166 157.202C263.254 157.387 263.377 157.552 263.528 157.688C263.68 157.825 263.857 157.93 264.049 157.997C264.207 158.044 264.373 158.058 264.536 158.036C264.699 158.014 264.856 157.958 264.996 157.871C265.148 157.788 265.327 157.769 265.495 157.816C265.662 157.863 265.804 157.973 265.891 158.123C265.972 158.276 265.99 158.454 265.94 158.619C265.891 158.785 265.778 158.924 265.626 159.006C265.242 159.224 264.807 159.337 264.365 159.334Z" fill="#231F20"/>
+<path d="M282.986 153.769C284.084 150.161 288.588 149.278 287.566 153.53C287.26 154.992 286.606 156.359 285.661 157.516C284.715 158.551 283.428 159.043 282.57 158.45" fill="white"/>
+<path d="M283.478 159.355C283.028 159.368 282.585 159.235 282.216 158.977C282.076 158.878 281.98 158.727 281.951 158.558C281.921 158.389 281.96 158.215 282.059 158.075C282.157 157.934 282.308 157.838 282.477 157.809C282.646 157.779 282.82 157.818 282.961 157.917C283.478 158.27 284.437 157.917 285.194 157.072C286.066 155.998 286.667 154.73 286.947 153.375C287.048 152.946 287.313 151.571 286.556 151.357C285.799 151.142 284.197 152.063 283.617 153.955C283.591 154.038 283.549 154.115 283.494 154.182C283.438 154.249 283.37 154.304 283.294 154.344C283.139 154.426 282.958 154.443 282.79 154.391C282.623 154.339 282.483 154.223 282.402 154.068C282.32 153.913 282.303 153.732 282.355 153.564C283.137 151.041 285.358 149.691 286.872 150.108C287.351 150.234 288.865 150.877 288.133 153.678C287.808 155.246 287.102 156.711 286.077 157.942C285.761 158.34 285.368 158.67 284.921 158.913C284.475 159.156 283.984 159.306 283.478 159.355Z" fill="#231F20"/>
+<path d="M266.787 145.82L264.807 156.279C263.861 161.325 267.04 165.362 271.91 165.375H272.931C275.447 165.247 277.848 164.286 279.757 162.644C281.666 161.002 282.975 158.772 283.478 156.304C283.958 153.781 285.699 149.845 283.857 147.952C280.917 144.924 278.066 142.906 276.439 138.806C272.704 139.588 266.787 140.622 266.787 145.82Z" fill="white"/>
+<path d="M272.944 166.018H271.909C270.751 166.043 269.602 165.809 268.548 165.33C267.493 164.852 266.559 164.143 265.816 163.255C265.029 162.266 264.475 161.113 264.193 159.882C263.911 158.65 263.91 157.371 264.188 156.139L266.156 145.756C266.156 140.256 272.035 139.044 275.908 138.25L276.325 138.161C276.473 138.13 276.628 138.152 276.762 138.223C276.896 138.295 277 138.411 277.057 138.552C278.25 141.273 280.07 143.672 282.368 145.554C283.011 146.173 283.629 146.816 284.336 147.485C286.026 149.213 285.219 152.178 284.576 154.562C284.399 155.218 284.235 155.824 284.134 156.404C283.602 159.022 282.213 161.388 280.187 163.129C278.16 164.87 275.612 165.886 272.944 166.018ZM276.047 139.524C272.376 140.293 267.443 141.366 267.443 145.832C267.45 145.874 267.45 145.916 267.443 145.958L265.462 156.404C265.221 157.448 265.217 158.533 265.451 159.579C265.685 160.625 266.15 161.605 266.812 162.447C267.438 163.187 268.222 163.777 269.106 164.172C269.991 164.568 270.953 164.758 271.922 164.731H272.956C275.319 164.606 277.573 163.7 279.364 162.153C281.155 160.607 282.38 158.509 282.847 156.19C282.961 155.609 283.137 154.928 283.327 154.247C283.907 152.077 284.588 149.617 283.402 148.418C282.746 147.737 282.141 147.157 281.472 146.526C279.186 144.615 277.336 142.236 276.047 139.549V139.524Z" fill="#231F20"/>
+<path d="M273.852 157.794C273.384 157.792 272.916 157.763 272.452 157.706C272.359 157.708 272.267 157.69 272.182 157.653C272.097 157.616 272.021 157.561 271.959 157.492C271.897 157.423 271.851 157.342 271.823 157.253C271.796 157.165 271.788 157.071 271.8 156.979C271.812 156.887 271.843 156.799 271.893 156.721C271.942 156.642 272.007 156.575 272.085 156.524C272.162 156.474 272.25 156.44 272.342 156.426C272.433 156.412 272.527 156.418 272.616 156.444C273.375 156.521 274.14 156.521 274.899 156.444C275.136 154.424 275.016 152.379 274.546 150.401C274.517 150.23 274.556 150.055 274.655 149.913C274.754 149.772 274.906 149.675 275.076 149.644C275.246 149.618 275.42 149.658 275.561 149.757C275.702 149.856 275.799 150.005 275.833 150.174C276.073 151.524 276.817 156.04 275.909 157.277C275.825 157.398 275.717 157.5 275.59 157.577C275.464 157.653 275.323 157.701 275.177 157.718C274.737 157.773 274.295 157.798 273.852 157.794Z" fill="#231F20"/>
+<path d="M239.083 143.674H185.187C185.087 143.688 184.986 143.68 184.889 143.651C184.793 143.622 184.703 143.572 184.628 143.506C184.552 143.44 184.491 143.358 184.449 143.266C184.408 143.174 184.386 143.075 184.386 142.974C184.386 142.873 184.408 142.774 184.449 142.682C184.491 142.59 184.552 142.509 184.628 142.442C184.703 142.376 184.793 142.327 184.889 142.298C184.986 142.269 185.087 142.26 185.187 142.274L239.083 142.337C239.252 142.36 239.408 142.443 239.52 142.572C239.633 142.701 239.695 142.866 239.695 143.037C239.695 143.208 239.633 143.373 239.52 143.502C239.408 143.631 239.252 143.715 239.083 143.737V143.674Z" fill="#D1D3D4"/>
+<path d="M237.253 153.288H183.37C183.27 153.302 183.169 153.294 183.072 153.265C182.976 153.236 182.887 153.186 182.811 153.12C182.735 153.054 182.674 152.972 182.633 152.88C182.591 152.788 182.569 152.689 182.569 152.588C182.569 152.487 182.591 152.388 182.633 152.296C182.674 152.204 182.735 152.123 182.811 152.056C182.887 151.99 182.976 151.941 183.072 151.912C183.169 151.883 183.27 151.875 183.37 151.888L237.266 151.951C237.435 151.974 237.591 152.057 237.703 152.186C237.816 152.315 237.878 152.48 237.878 152.651C237.878 152.822 237.816 152.988 237.703 153.116C237.591 153.245 237.435 153.329 237.266 153.351L237.253 153.288Z" fill="#D1D3D4"/>
+<path d="M235.436 162.903L181.541 162.839C181.355 162.836 181.179 162.76 181.049 162.628C180.919 162.496 180.847 162.318 180.847 162.133C180.847 161.949 180.92 161.772 181.05 161.642C181.18 161.512 181.357 161.439 181.541 161.439L235.436 161.502C235.536 161.489 235.638 161.497 235.734 161.526C235.831 161.555 235.92 161.604 235.995 161.671C236.071 161.737 236.132 161.819 236.174 161.91C236.215 162.002 236.237 162.102 236.237 162.202C236.237 162.303 236.215 162.403 236.174 162.494C236.132 162.586 236.071 162.668 235.995 162.734C235.92 162.8 235.831 162.85 235.734 162.879C235.638 162.908 235.536 162.916 235.436 162.903Z" fill="#D1D3D4"/>
+<path d="M233.619 172.516L179.724 172.441C179.632 172.442 179.541 172.425 179.456 172.391C179.371 172.357 179.294 172.306 179.229 172.241C179.165 172.176 179.113 172.099 179.079 172.014C179.045 171.929 179.028 171.838 179.03 171.747C179.028 171.654 179.045 171.563 179.079 171.477C179.113 171.392 179.164 171.314 179.229 171.248C179.293 171.182 179.37 171.13 179.455 171.094C179.54 171.059 179.632 171.04 179.724 171.04L233.619 171.103C233.807 171.103 233.986 171.178 234.119 171.31C234.251 171.443 234.326 171.622 234.326 171.81C234.323 171.996 234.247 172.174 234.115 172.306C233.984 172.438 233.806 172.513 233.619 172.516Z" fill="#D1D3D4"/>
+<path d="M231.752 182.177H193.753C193.583 182.154 193.428 182.07 193.315 181.942C193.203 181.813 193.141 181.648 193.141 181.477C193.141 181.306 193.203 181.14 193.315 181.011C193.428 180.883 193.583 180.799 193.753 180.776H231.752C231.922 180.799 232.077 180.883 232.19 181.011C232.303 181.14 232.365 181.306 232.365 181.477C232.365 181.648 232.303 181.813 232.19 181.942C232.077 182.07 231.922 182.154 231.752 182.177Z" fill="#D1D3D4"/>
+<path d="M286.291 233.808L168.584 233.669C168.48 233.671 168.378 233.649 168.284 233.605C168.19 233.562 168.107 233.497 168.042 233.417C167.975 233.337 167.926 233.244 167.9 233.144C167.874 233.043 167.87 232.938 167.89 232.836L173.239 204.614C173.271 204.456 173.356 204.313 173.48 204.21C173.604 204.107 173.759 204.049 173.921 204.046L291.628 204.185C291.732 204.184 291.834 204.206 291.928 204.25C292.022 204.294 292.105 204.358 292.171 204.438C292.235 204.518 292.282 204.611 292.308 204.711C292.335 204.812 292.339 204.916 292.322 205.018L286.973 233.24C286.941 233.398 286.856 233.541 286.732 233.644C286.608 233.747 286.453 233.805 286.291 233.808ZM169.429 232.268L285.711 232.407L290.758 205.586L174.463 205.447L169.429 232.268Z" fill="#D1D3D4"/>
+<path d="M289.521 214.412L172.192 214.274C172.092 214.287 171.991 214.279 171.894 214.25C171.798 214.221 171.709 214.172 171.633 214.105C171.557 214.039 171.496 213.957 171.455 213.866C171.413 213.774 171.392 213.674 171.392 213.573C171.392 213.473 171.413 213.373 171.455 213.281C171.496 213.19 171.557 213.108 171.633 213.042C171.709 212.975 171.798 212.926 171.894 212.897C171.991 212.868 172.092 212.86 172.192 212.873L289.521 213.012C289.691 213.035 289.846 213.118 289.959 213.247C290.071 213.376 290.134 213.541 290.134 213.712C290.134 213.883 290.071 214.049 289.959 214.177C289.846 214.306 289.691 214.39 289.521 214.412Z" fill="#D1D3D4"/>
+<path d="M254.461 233.764H254.335C254.154 233.728 253.994 233.621 253.89 233.468C253.786 233.314 253.747 233.126 253.78 232.944L259.117 204.722C259.153 204.541 259.26 204.381 259.413 204.277C259.567 204.173 259.755 204.134 259.937 204.167C260.119 204.204 260.28 204.31 260.386 204.463C260.492 204.616 260.534 204.804 260.505 204.987L255.155 233.209C255.121 233.367 255.033 233.508 254.907 233.609C254.78 233.71 254.623 233.765 254.461 233.764Z" fill="#D1D3D4"/>
+<path d="M195.078 233.689H194.951C194.768 233.655 194.605 233.55 194.498 233.396C194.392 233.243 194.351 233.053 194.384 232.869L199.733 204.634C199.739 204.534 199.766 204.436 199.813 204.346C199.859 204.257 199.925 204.179 200.004 204.117C200.084 204.055 200.175 204.011 200.273 203.988C200.371 203.964 200.473 203.962 200.572 203.981C200.671 204 200.765 204.04 200.847 204.098C200.929 204.156 200.998 204.231 201.048 204.318C201.099 204.405 201.131 204.502 201.141 204.602C201.151 204.702 201.14 204.804 201.108 204.899L195.771 233.121C195.739 233.282 195.653 233.426 195.526 233.529C195.4 233.633 195.241 233.689 195.078 233.689Z" fill="#D1D3D4"/>
+<path d="M96.1052 191.426L227.072 191.577C228.937 191.487 230.718 190.776 232.133 189.558C233.548 188.34 234.515 186.684 234.881 184.853L259.243 56.2451C259.949 52.4603 257.59 49.4956 253.982 49.4956L123.015 49.3442C121.157 49.4318 119.381 50.1352 117.967 51.3436C116.553 52.552 115.582 54.1965 115.206 56.0181L90.8443 184.701C90.1378 188.398 92.497 191.426 96.1052 191.426Z" fill="white"/>
+<path d="M2492.26 247.582L2623.23 247.733C2625.09 247.643 2626.87 246.932 2628.29 245.714C2629.7 244.496 2630.67 242.84 2631.04 241.009L2655.4 112.401C2656.11 108.617 2653.75 105.652 2650.14 105.652L2519.17 105.5C2517.31 105.588 2515.54 106.291 2514.12 107.5C2512.71 108.708 2511.74 110.353 2511.36 112.174L2487 240.858C2486.29 244.554 2488.65 247.582 2492.26 247.582Z" fill="white"/>
+<path d="M227.072 192.272L96.1051 192.121C95.2239 192.141 94.3493 191.963 93.5458 191.601C92.7422 191.239 92.0303 190.7 91.4624 190.026C90.8612 189.278 90.4358 188.405 90.2174 187.47C89.999 186.535 89.9934 185.564 90.2008 184.627L114.588 56.0189C114.987 54.0464 116.032 52.2632 117.558 50.9517C119.085 49.6401 121.005 48.8749 123.015 48.7773L253.982 48.9287C254.859 48.9012 255.732 49.0705 256.535 49.4241C257.338 49.7778 258.052 50.3069 258.625 50.9725C259.225 51.7211 259.65 52.5947 259.868 53.5292C260.087 54.4636 260.093 55.4351 259.886 56.3722L235.537 184.967C235.149 186.957 234.104 188.76 232.568 190.084C231.033 191.409 229.098 192.179 227.072 192.272ZM96.1051 190.859L227.072 191.01C228.807 190.921 230.461 190.25 231.767 189.105C233.074 187.961 233.958 186.41 234.276 184.702L258.625 56.1199C258.798 55.3679 258.8 54.5867 258.632 53.8335C258.464 53.0804 258.13 52.3744 257.653 51.7673C257.204 51.2356 256.641 50.8119 256.005 50.528C255.369 50.244 254.678 50.1071 253.982 50.1273L123.015 49.9759C121.296 50.0681 119.657 50.7292 118.355 51.8552C117.053 52.9812 116.163 54.5081 115.824 56.1956L91.4624 184.803C91.2921 185.555 91.2909 186.336 91.4589 187.089C91.6269 187.841 91.9599 188.547 92.4338 189.156C92.8837 189.687 93.4472 190.11 94.0827 190.394C94.7182 190.678 95.4093 190.815 96.1051 190.796V190.859Z" fill="#231F20"/>
+<path d="M256.984 68.9472L112.947 68.7832C112.78 68.7832 112.619 68.7167 112.501 68.5985C112.383 68.4802 112.316 68.3197 112.316 68.1524C112.316 67.9851 112.383 67.8247 112.501 67.7064C112.619 67.5881 112.78 67.5216 112.947 67.5216L256.984 67.6856C257.151 67.6888 257.309 67.7563 257.427 67.8739C257.544 67.9915 257.612 68.1501 257.615 68.3164C257.615 68.4837 257.549 68.6442 257.43 68.7625C257.312 68.8808 257.152 68.9472 256.984 68.9472Z" fill="#231F20"/>
+<path d="M247.297 60.8387C248.679 59.3735 248.82 57.2635 247.614 56.126C246.407 54.9885 244.309 55.2542 242.928 56.7195C241.546 58.1847 241.405 60.2946 242.612 61.4321C243.818 62.5696 245.916 62.304 247.297 60.8387Z" fill="#D1D3D4"/>
+<path d="M235.827 60.8169C237.208 59.3517 237.35 57.2418 236.143 56.1042C234.936 54.9667 232.838 55.2324 231.457 56.6977C230.076 58.1629 229.934 60.2728 231.141 61.4103C232.348 62.5478 234.445 62.2822 235.827 60.8169Z" fill="#D1D3D4"/>
+<path d="M224.355 60.8038C225.736 59.3386 225.878 57.2286 224.671 56.0911C223.465 54.9536 221.367 55.2193 219.985 56.6846C218.604 58.1498 218.463 60.2597 219.669 61.3972C220.876 62.5347 222.974 62.269 224.355 60.8038Z" fill="#D1D3D4"/>
+<path d="M188.846 78.8798L176.469 144.193L228.965 144.243L241.328 78.9428L188.846 78.8798Z" fill="white"/>
+<path d="M188.858 78.8815H241.341L228.977 144.195L176.482 144.132L188.858 78.8815ZM188.858 77.6199C188.561 77.6145 188.272 77.714 188.041 77.9009C187.81 78.0879 187.653 78.3502 187.596 78.6418L175.233 143.955C175.199 144.136 175.205 144.323 175.25 144.502C175.296 144.68 175.381 144.847 175.498 144.989C175.616 145.132 175.765 145.246 175.933 145.325C176.101 145.403 176.284 145.444 176.469 145.444L228.964 145.507C229.261 145.512 229.551 145.413 229.781 145.226C230.012 145.039 230.17 144.776 230.226 144.485L242.59 79.1717C242.624 78.9903 242.618 78.8037 242.572 78.625C242.526 78.4463 242.442 78.2797 242.325 78.1372C242.207 77.9924 242.059 77.8755 241.891 77.7948C241.723 77.7141 241.54 77.6716 241.353 77.6704H188.871L188.858 77.6199Z" fill="#231F20"/>
+<path d="M180.027 125.321L176.457 144.182L228.952 144.245L232.535 125.41C228.207 120.212 220.941 118.433 214.544 117.84C212.021 117.613 209.75 117.55 207.77 117.55H207.303C205.448 117.55 203.303 117.55 200.995 117.815H200.881C194.258 118.383 186.335 120.161 180.027 125.321Z" fill="#D23228"/>
+<path d="M200.036 121.419L201.65 139.081L202.117 144.228H203.303L205.725 139.068L213.989 121.507C209.4 120.459 204.637 120.429 200.036 121.419Z" fill="#231F20"/>
+<path d="M214.014 121.448C213.154 122.654 212.018 123.637 210.702 124.315C209.385 124.993 207.926 125.346 206.445 125.346C205.101 125.441 203.761 125.113 202.612 124.41C201.464 123.707 200.563 122.663 200.036 121.423L203.631 106.057H216.247L214.014 121.448Z" fill="white"/>
+<path d="M206.521 126C205.043 126.081 203.576 125.705 202.319 124.924C201.062 124.144 200.076 122.995 199.493 121.635C199.462 121.519 199.462 121.397 199.493 121.282L203.076 105.903C203.113 105.759 203.196 105.632 203.312 105.541C203.428 105.449 203.572 105.399 203.72 105.398H216.336C216.428 105.397 216.52 105.416 216.605 105.453C216.69 105.49 216.766 105.544 216.828 105.613C216.889 105.686 216.933 105.77 216.96 105.862C216.986 105.953 216.992 106.049 216.979 106.143L214.746 121.509C214.736 121.599 214.706 121.685 214.658 121.761C213.745 123.073 212.528 124.143 211.111 124.881C209.693 125.62 208.118 126.003 206.521 126ZM200.78 121.37C201.291 122.436 202.11 123.323 203.132 123.917C204.153 124.511 205.329 124.784 206.508 124.701C207.857 124.702 209.188 124.387 210.394 123.78C211.599 123.173 212.645 122.291 213.447 121.206L215.554 106.723H204.199L200.78 121.37Z" fill="#231F20"/>
+<path d="M214.999 112.653C213.766 114.097 212.245 115.266 210.532 116.085C207.77 117.511 203.72 119.113 200.78 118.608L202.509 112.098C204.729 112.371 206.975 112.371 209.195 112.098C211.239 112.014 213.258 111.628 215.188 110.95C215.528 110.9 215.516 112.023 214.999 112.653Z" fill="#231F20"/>
+<path d="M201.916 119.34C201.493 119.344 201.072 119.314 200.654 119.252C200.48 119.219 200.326 119.12 200.225 118.974C200.179 118.899 200.149 118.816 200.136 118.729C200.123 118.643 200.128 118.554 200.149 118.469L201.878 111.972C201.917 111.821 202.011 111.689 202.141 111.603C202.272 111.516 202.43 111.482 202.584 111.505C204.755 111.77 206.949 111.77 209.119 111.505C211.101 111.421 213.06 111.051 214.935 110.408C215.088 110.341 215.258 110.329 215.419 110.372C215.58 110.416 215.72 110.513 215.818 110.647C215.977 111.034 216.029 111.456 215.966 111.87C215.904 112.283 215.731 112.671 215.465 112.994C214.183 114.515 212.592 115.745 210.797 116.602C208.066 118.138 205.038 119.071 201.916 119.34ZM201.575 118.078C204.615 118.217 208.602 116.375 210.255 115.555C211.887 114.778 213.335 113.664 214.506 112.287C214.594 112.18 214.658 112.055 214.696 111.922C212.916 112.436 211.083 112.745 209.233 112.843C207.136 113.066 205.022 113.066 202.925 112.843L201.575 118.078Z" fill="#231F20"/>
+<path d="M220.461 144.886H220.272C220.189 144.862 220.112 144.821 220.045 144.766C219.978 144.711 219.923 144.644 219.883 144.567C219.843 144.491 219.819 144.407 219.812 144.321C219.805 144.235 219.816 144.148 219.843 144.066L224.889 128.22C224.915 128.139 224.957 128.063 225.012 127.998C225.067 127.932 225.135 127.879 225.212 127.84C225.288 127.801 225.371 127.778 225.457 127.772C225.542 127.766 225.628 127.777 225.709 127.804C225.791 127.828 225.866 127.869 225.931 127.923C225.997 127.977 226.05 128.044 226.089 128.119C226.128 128.195 226.151 128.277 226.157 128.362C226.164 128.446 226.153 128.531 226.126 128.611L221.079 144.457C221.034 144.585 220.95 144.694 220.839 144.771C220.728 144.848 220.596 144.889 220.461 144.886Z" fill="#231F20"/>
+<path d="M184.96 144.851C184.873 144.846 184.789 144.824 184.711 144.787C184.634 144.749 184.564 144.697 184.507 144.632C184.449 144.568 184.405 144.493 184.377 144.411C184.348 144.33 184.336 144.243 184.341 144.157L185.3 128.311C185.279 128.212 185.281 128.11 185.306 128.012C185.331 127.914 185.378 127.823 185.444 127.746C185.51 127.669 185.593 127.609 185.686 127.569C185.779 127.53 185.88 127.512 185.981 127.518C186.082 127.524 186.18 127.554 186.268 127.604C186.356 127.654 186.431 127.724 186.487 127.809C186.543 127.893 186.579 127.989 186.592 128.089C186.605 128.189 186.595 128.291 186.562 128.387L185.603 144.233C185.597 144.399 185.526 144.556 185.406 144.671C185.286 144.787 185.126 144.851 184.96 144.851Z" fill="#231F20"/>
+<path d="M202.66 102.523C202.925 98.9145 198.762 98.0187 198.169 102.27C197.906 103.609 198.042 104.995 198.56 106.257C198.665 106.509 198.823 106.736 199.023 106.923C199.222 107.11 199.459 107.253 199.717 107.342C199.975 107.432 200.25 107.465 200.522 107.441C200.794 107.417 201.059 107.336 201.297 107.203" fill="white"/>
+<path d="M200.351 108.111C200.116 108.11 199.883 108.076 199.657 108.011C199.297 107.892 198.964 107.703 198.678 107.454C198.392 107.205 198.159 106.901 197.992 106.56C197.406 105.179 197.244 103.655 197.525 102.182C197.878 99.6587 199.392 98.6621 200.755 98.8008C201.59 98.9713 202.323 99.4648 202.796 100.174C203.268 100.883 203.442 101.75 203.278 102.586C203.298 102.685 203.295 102.787 203.269 102.885C203.243 102.982 203.195 103.073 203.128 103.149C203.061 103.225 202.978 103.284 202.885 103.322C202.791 103.361 202.69 103.377 202.589 103.37C202.488 103.363 202.391 103.333 202.303 103.282C202.216 103.231 202.142 103.16 202.087 103.076C202.031 102.991 201.996 102.895 201.984 102.795C201.972 102.694 201.983 102.593 202.016 102.497C202.13 101.046 201.398 100.201 200.629 100.113C199.859 100.025 199.077 100.592 198.825 102.384C198.581 103.589 198.695 104.838 199.153 105.979C199.328 106.355 199.646 106.645 200.036 106.787C200.196 106.83 200.363 106.841 200.528 106.819C200.692 106.798 200.851 106.744 200.995 106.661C201.069 106.618 201.151 106.591 201.236 106.581C201.321 106.571 201.407 106.578 201.489 106.601C201.571 106.625 201.648 106.665 201.715 106.718C201.782 106.772 201.837 106.838 201.878 106.913C201.96 107.064 201.979 107.241 201.932 107.406C201.885 107.571 201.775 107.711 201.625 107.796C201.234 108.007 200.796 108.115 200.351 108.111Z" fill="#231F20"/>
+<path d="M218.972 102.533C220.082 98.9249 224.574 98.0418 223.552 102.293C223.26 103.758 222.61 105.128 221.659 106.28C220.726 107.327 219.426 107.819 218.581 107.226" fill="white"/>
+<path d="M219.414 108.138C218.964 108.149 218.522 108.016 218.152 107.759C218.072 107.715 218.002 107.654 217.947 107.581C217.891 107.508 217.852 107.424 217.831 107.334C217.81 107.245 217.808 107.152 217.826 107.062C217.843 106.972 217.879 106.886 217.931 106.811C217.983 106.736 218.051 106.672 218.129 106.625C218.208 106.577 218.295 106.546 218.386 106.535C218.477 106.523 218.57 106.53 218.657 106.557C218.745 106.583 218.827 106.627 218.897 106.687C219.414 107.053 220.373 106.687 221.13 105.854C222.011 104.776 222.625 103.505 222.921 102.145C223.022 101.729 223.3 100.341 222.53 100.139C221.76 99.9372 220.171 100.846 219.603 102.662C219.578 102.745 219.537 102.822 219.483 102.889C219.428 102.956 219.361 103.012 219.284 103.053C219.208 103.094 219.125 103.119 219.039 103.128C218.953 103.137 218.866 103.129 218.783 103.104C218.7 103.079 218.623 103.038 218.556 102.983C218.489 102.929 218.433 102.861 218.392 102.785C218.351 102.709 218.326 102.626 218.317 102.54C218.308 102.453 218.317 102.367 218.341 102.284C219.124 99.7605 221.344 98.398 222.871 98.8143C223.337 98.9531 224.851 99.5965 224.132 102.385C223.793 103.955 223.083 105.421 222.063 106.662C221.747 107.077 221.349 107.422 220.893 107.677C220.437 107.931 219.933 108.088 219.414 108.138Z" fill="#231F20"/>
+<path d="M202.735 94.5984L200.755 105.044C199.796 110.091 202.975 114.141 207.845 114.141H208.879C211.392 114.01 213.79 113.048 215.697 111.406C217.604 109.764 218.911 107.535 219.414 105.07L221.344 95.1282C221.344 95.1282 222.997 85.0354 213.598 86.0447C204.199 87.054 202.735 94.5984 202.735 94.5984Z" fill="white"/>
+<path d="M208.93 114.798H207.896C206.737 114.825 205.587 114.591 204.531 114.115C203.474 113.64 202.537 112.933 201.79 112.048C201.012 111.055 200.467 109.9 200.194 108.669C199.921 107.437 199.927 106.161 200.213 104.932L202.193 94.4735C202.193 94.3978 203.808 86.5001 213.548 85.4152C214.708 85.1879 215.906 85.2398 217.042 85.5667C218.178 85.8935 219.221 86.4859 220.083 87.2949C222.795 90.1588 222.026 95.0538 222.001 95.2683L220.108 105.222C219.569 107.831 218.179 110.187 216.156 111.92C214.133 113.654 211.591 114.666 208.93 114.798ZM203.417 94.7258L201.474 105.222C201.239 106.267 201.237 107.35 201.471 108.395C201.704 109.44 202.166 110.421 202.824 111.265C203.453 112.001 204.238 112.588 205.122 112.983C206.005 113.378 206.966 113.571 207.934 113.549H208.968C211.332 113.427 213.587 112.521 215.378 110.974C217.169 109.428 218.394 107.328 218.859 105.008L220.739 95.0916C220.739 95.0916 221.433 90.6382 219.149 88.2412C218.424 87.5836 217.553 87.1071 216.608 86.8506C215.663 86.5941 214.67 86.5648 213.712 86.7651C204.893 87.686 203.48 94.423 203.417 94.7258Z" fill="#231F20"/>
+<path d="M209.839 106.557C209.371 106.555 208.903 106.53 208.438 106.481C208.268 106.456 208.115 106.365 208.011 106.229C207.908 106.092 207.862 105.92 207.883 105.749C207.905 105.58 207.993 105.425 208.127 105.319C208.262 105.213 208.432 105.164 208.602 105.182C209.361 105.27 210.127 105.27 210.886 105.182C211.189 104.576 211.025 101.838 210.533 99.1386C210.503 98.968 210.542 98.7928 210.642 98.651C210.741 98.5092 210.892 98.4124 211.062 98.3816C211.146 98.3652 211.232 98.3656 211.316 98.3828C211.399 98.4 211.479 98.4337 211.549 98.4818C211.62 98.5299 211.68 98.5916 211.726 98.6632C211.773 98.7348 211.804 98.8149 211.819 98.8989C212.059 100.261 212.803 104.778 211.895 106.002C211.812 106.124 211.703 106.228 211.577 106.306C211.451 106.385 211.31 106.436 211.163 106.456C210.725 106.519 210.282 106.553 209.839 106.557Z" fill="#231F20"/>
+<path d="M175.068 92.4537H121.173C121.003 92.4309 120.848 92.3473 120.735 92.2185C120.623 92.0898 120.561 91.9245 120.561 91.7535C120.561 91.5824 120.623 91.4172 120.735 91.2884C120.848 91.1596 121.003 91.0761 121.173 91.0533H175.068C175.238 91.0761 175.393 91.1596 175.506 91.2884C175.619 91.4172 175.681 91.5824 175.681 91.7535C175.681 91.9245 175.619 92.0898 175.506 92.2185C175.393 92.3473 175.238 92.4309 175.068 92.4537Z" fill="#D1D3D4"/>
+<path d="M173.252 102.067H119.356C119.169 102.067 118.989 101.993 118.857 101.86C118.724 101.728 118.65 101.548 118.65 101.361C118.65 101.173 118.724 100.994 118.857 100.861C118.989 100.729 119.169 100.654 119.356 100.654L173.252 100.73C173.436 100.73 173.613 100.803 173.743 100.933C173.873 101.063 173.946 101.24 173.946 101.424C173.93 101.598 173.851 101.76 173.723 101.879C173.594 101.998 173.427 102.065 173.252 102.067Z" fill="#D1D3D4"/>
+<path d="M171.423 111.666H117.54C117.44 111.68 117.339 111.672 117.242 111.643C117.146 111.614 117.057 111.564 116.981 111.498C116.905 111.432 116.844 111.35 116.802 111.258C116.761 111.167 116.739 111.067 116.739 110.966C116.739 110.866 116.761 110.766 116.802 110.674C116.844 110.583 116.905 110.501 116.981 110.434C117.057 110.368 117.146 110.319 117.242 110.29C117.339 110.261 117.44 110.253 117.54 110.266H171.423C171.61 110.266 171.79 110.341 171.923 110.473C172.055 110.605 172.129 110.785 172.129 110.973C172.129 111.065 172.111 111.156 172.075 111.241C172.04 111.326 171.988 111.403 171.922 111.468C171.856 111.532 171.778 111.583 171.692 111.617C171.607 111.651 171.515 111.668 171.423 111.666Z" fill="#D1D3D4"/>
+<path d="M169.606 121.283H115.71C115.541 121.26 115.385 121.177 115.273 121.048C115.16 120.919 115.098 120.754 115.098 120.583C115.098 120.412 115.16 120.246 115.273 120.118C115.385 119.989 115.541 119.905 115.71 119.883L169.606 119.946C169.706 119.932 169.807 119.94 169.904 119.969C170 119.998 170.09 120.048 170.165 120.114C170.241 120.18 170.302 120.262 170.344 120.354C170.385 120.446 170.407 120.545 170.407 120.646C170.407 120.747 170.385 120.846 170.344 120.938C170.302 121.03 170.241 121.111 170.165 121.178C170.09 121.244 170 121.293 169.904 121.322C169.807 121.351 169.706 121.359 169.606 121.346V121.283Z" fill="#D1D3D4"/>
+<path d="M167.789 130.897H129.79C129.62 130.874 129.465 130.791 129.352 130.662C129.24 130.533 129.178 130.368 129.178 130.197C129.178 130.026 129.24 129.861 129.352 129.732C129.465 129.603 129.62 129.52 129.79 129.497H167.789C167.973 129.497 168.15 129.57 168.28 129.7C168.41 129.83 168.483 130.007 168.483 130.191C168.483 130.376 168.411 130.554 168.281 130.686C168.151 130.818 167.975 130.894 167.789 130.897Z" fill="#D1D3D4"/>
+<path d="M222.278 182.58L104.571 182.441C104.468 182.439 104.367 182.414 104.274 182.37C104.182 182.325 104.1 182.261 104.034 182.182C103.969 182.104 103.921 182.012 103.893 181.913C103.866 181.813 103.86 181.71 103.877 181.608L109.226 153.386C109.255 153.224 109.341 153.077 109.468 152.971C109.595 152.865 109.755 152.806 109.92 152.806L227.627 152.945C227.732 152.946 227.834 152.971 227.928 153.016C228.022 153.062 228.104 153.128 228.17 153.21C228.237 153.286 228.286 153.377 228.313 153.476C228.339 153.574 228.342 153.678 228.321 153.777L222.921 181.999C222.894 182.154 222.816 182.295 222.699 182.4C222.583 182.505 222.434 182.568 222.278 182.58ZM105.416 181.041L221.698 181.179L226.744 154.345L110.462 154.206L105.416 181.041Z" fill="#D1D3D4"/>
+<path d="M225.508 163.257L108.179 163.119C107.991 163.119 107.812 163.044 107.679 162.912C107.547 162.779 107.472 162.6 107.472 162.412C107.472 162.32 107.491 162.229 107.526 162.144C107.562 162.059 107.614 161.982 107.68 161.917C107.746 161.852 107.824 161.802 107.909 161.767C107.995 161.733 108.086 161.717 108.179 161.718L225.508 161.857C225.677 161.88 225.833 161.963 225.945 162.092C226.058 162.221 226.12 162.386 226.12 162.557C226.12 162.728 226.058 162.894 225.945 163.022C225.833 163.151 225.677 163.235 225.508 163.257Z" fill="#D1D3D4"/>
+<path d="M190.41 182.545H190.284C190.102 182.508 189.942 182.401 189.838 182.248C189.734 182.095 189.695 181.907 189.728 181.725L195.078 153.503C195.093 153.412 195.126 153.325 195.175 153.248C195.224 153.17 195.288 153.103 195.363 153.05C195.438 152.997 195.523 152.96 195.612 152.94C195.702 152.92 195.795 152.918 195.885 152.935C196.069 152.969 196.232 153.074 196.338 153.228C196.445 153.381 196.486 153.571 196.453 153.755L191.104 181.977C191.071 182.137 190.985 182.281 190.858 182.385C190.732 182.488 190.573 182.545 190.41 182.545Z" fill="#D1D3D4"/>
+<path d="M131.064 182.474H130.938C130.756 182.437 130.596 182.331 130.493 182.177C130.389 182.024 130.349 181.836 130.383 181.654L135.719 153.432C135.774 153.269 135.885 153.132 136.033 153.046C136.181 152.96 136.355 152.93 136.523 152.963C136.691 152.995 136.841 153.087 136.946 153.222C137.052 153.357 137.104 153.526 137.094 153.697L131.758 181.919C131.723 182.077 131.635 182.218 131.509 182.319C131.383 182.42 131.226 182.475 131.064 182.474Z" fill="#D1D3D4"/>
+</g>
+<defs>
+<clipPath id="clip0_4274_29461">
+<rect width="406" height="306" fill="white" transform="translate(0 -4)"/>
+</clipPath>
+</defs>
+</svg>

src/components/FilterBar.jsx

@@ -1,31 +1,30 @@
-/* eslint-disable react/forbid-prop-types */
-import React, { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Collapsible, Form, Icon, Spinner,
+} from '@openedx/paragon';
+import { Tune } from '@openedx/paragon/icons';
 import { capitalize, toString } from 'lodash';
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Collapsible, Form, Icon, Spinner,
-} from '@edx/paragon';
-import { Tune } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import {
   PostsStatusFilter, RequestStatus,
   ThreadOrdering, ThreadType,
 } from '../data/constants';
-import { selectCourseCohorts } from '../discussions/cohorts/data/selectors';
+import selectCourseCohorts from '../discussions/cohorts/data/selectors';
 import messages from '../discussions/posts/post-filter-bar/messages';
 import { ActionItem } from '../discussions/posts/post-filter-bar/PostFilterBar';
 
 const FilterBar = ({
-  intl,
   filters,
   selectedFilters,
   onFilterChange,
   showCohortsFilter,
 }) => {
+  const intl = useIntl();
   const [isOpen, setOpen] = useState(false);
   const cohorts = useSelector(selectCourseCohorts);
   const { status } = useSelector(state => state.cohorts);
@@ -93,10 +92,15 @@ const FilterBar = ({
     },
   ];
 
+  const handleFilterToggle = useCallback((event) => {
+    onFilterChange(event);
+    setOpen(false);
+  }, [onFilterChange]);
+
   return (
     <Collapsible.Advanced
       open={isOpen}
-      onToggle={() => setOpen(!isOpen)}
+      onToggle={setOpen}
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
@@ -126,7 +130,7 @@ const FilterBar = ({
                 name={value.name}
                 className="d-flex flex-column list-group list-group-flush"
                 value={selectedFilters[value.name]}
-                onChange={onFilterChange}
+                onChange={handleFilterToggle}
               >
                 {value.filters.map(filterName => {
                   const element = allFilters.find(obj => obj.id === filterName);
@@ -159,7 +163,7 @@ const FilterBar = ({
                     name="cohort"
                     className="d-flex flex-column list-group list-group-flush w-100"
                     value={selectedFilters.cohort}
-                    onChange={onFilterChange}
+                    onChange={handleFilterToggle}
                   >
                     <ActionItem
                       id="all-groups"
@@ -171,7 +175,7 @@ const FilterBar = ({
                       <ActionItem
                         key={toString(cohort.id)}
                         id={toString(cohort.id)}
-                        label={capitalize(cohort.name)}
+                        label={cohort.name}
                         value={toString(cohort.id)}
                         selected={selectedFilters.cohort}
                       />
@@ -188,9 +192,16 @@ const FilterBar = ({
 };
 
 FilterBar.propTypes = {
-  intl: intlShape.isRequired,
-  filters: PropTypes.array.isRequired,
-  selectedFilters: PropTypes.object.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    filters: PropTypes.arrayOf(PropTypes.string),
+  })).isRequired,
+  selectedFilters: PropTypes.shape({
+    postType: ThreadType,
+    status: PostsStatusFilter,
+    orderBy: ThreadOrdering,
+    cohort: PropTypes.string,
+  }).isRequired,
   onFilterChange: PropTypes.func.isRequired,
   showCohortsFilter: PropTypes.bool,
 };
@@ -199,4 +210,4 @@ FilterBar.defaultProps = {
   showCohortsFilter: false,
 };
 
-export default injectIntl(FilterBar);
+export default FilterBar;

src/components/FormikErrorFeedback.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Form, TransitionReplace } from '@openedx/paragon';
 import { getIn, useFormikContext } from 'formik';
 
-import { Form, TransitionReplace } from '@edx/paragon';
-
 const FormikErrorFeedback = ({ name }) => {
   const { touched, errors } = useFormikContext();
   const fieldTouched = getIn(touched, name);

src/components/HTMLLoader.jsx

@@ -9,7 +9,7 @@ import { useDebounce } from '../discussions/data/hooks';
 
 const defaultSanitizeOptions = {
   USE_PROFILES: { html: true },
-  ADD_ATTR: ['columnalign'],
+  ADD_ATTR: ['columnalign', 'target'],
 };
 
 const HTMLLoader = ({

src/components/Head/Head.jsx

@@ -0,0 +1,21 @@
+import { Helmet } from 'react-helmet';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const Head = () => {
+  const intl = useIntl();
+
+  return (
+    <Helmet>
+      <title>
+        {intl.formatMessage(messages['discussions.page.title'], { siteName: getConfig().SITE_NAME })}
+      </title>
+      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+    </Helmet>
+  );
+};
+
+export default Head;

src/components/Head/Head.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
+
+import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Discussions | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});

src/components/Head/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'discussions.page.title': {
+    id: 'discussions.page.title',
+    defaultMessage: 'Discussions | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;

src/components/NavigationBar/CourseTabsNavigation.jsx

@@ -1,30 +1,21 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { fetchTab } from './data/thunks';
 import Tabs from './tabs/Tabs';
 import messages from './messages';
 
 import './navBar.scss';
 
-const CourseTabsNavigation = ({
-  activeTab, className, courseId, rootSlug,
-}) => {
-  const dispatch = useDispatch();
+const CourseTabsNavigation = () => {
   const intl = useIntl();
   const tabs = useSelector(state => state.courseTabs.tabs);
 
-  useEffect(() => {
-    dispatch(fetchTab(courseId, rootSlug));
-  }, [courseId]);
-
   return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4', className)}>
+    <div id="courseTabsNavigation" className="course-tabs-navigation px-4 bg-white">
       {!!tabs.length && (
         <Tabs
           className="nav-underline-tabs"
@@ -33,7 +24,7 @@ const CourseTabsNavigation = ({
           {tabs.map(({ url, title, slug }) => (
             <a
               key={slug}
-              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
+              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === 'discussion' })}
               href={url}
             >
               {title}
@@ -45,17 +36,4 @@ const CourseTabsNavigation = ({
   );
 };
 
-CourseTabsNavigation.propTypes = {
-  activeTab: PropTypes.string,
-  className: PropTypes.string,
-  rootSlug: PropTypes.string,
-  courseId: PropTypes.string.isRequired,
-};
-
-CourseTabsNavigation.defaultProps = {
-  activeTab: undefined,
-  className: null,
-  rootSlug: 'outline',
-};
-
 export default React.memo(CourseTabsNavigation);

src/components/NavigationBar/data/__factories__/navigationBar.factory.js

@@ -19,7 +19,7 @@ Factory.define('navigationBar')
     user_message: null,
   }))
   .option('course_id', null, 'course-v1:edX+DemoX+Demo_Course')
-  .attr('is_enrolled', null, false)
+  .sequence('is_enrolled', ['isEnrolled'], (idx, isEnrolled) => isEnrolled)
   .attr('is_self_paced', null, false)
   .attr('is_staff', null, true)
   .attr('number', null, 'DemoX')

src/components/NavigationBar/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -6,15 +5,12 @@ import { getApiBaseUrl } from '../../../data/constants';
 
 export const getCourseMetadataApiUrl = (courseId) => `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`;
 
-function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
+function normalizeCourseHomeCourseMetadata(metadata) {
   const data = camelCaseObject(metadata);
   return {
     ...data,
     tabs: data.tabs.map(tab => ({
-      // The API uses "courseware" as a slug for both courseware and the outline tab.
-      // If needed, we switch it to "outline" here for
-      // use within the MFE to differentiate between course home and courseware.
-      slug: tab.tabId === 'courseware' ? rootSlug : tab.tabId,
+      slug: tab.tabId === 'courseware' ? 'outline' : tab.tabId,
       title: tab.title,
       url: tab.url,
     })),
@@ -22,10 +18,9 @@ function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
   };
 }
 
-export async function getCourseHomeCourseMetadata(courseId, rootSlug) {
+export async function getCourseHomeCourseMetadata(courseId) {
   const url = getCourseMetadataApiUrl(courseId);
-  // don't know the context of adding timezone in url. hence omitting it
-  // url = appendBrowserTimezoneToUrl(url);
   const { data } = await getAuthenticatedHttpClient().get(url);
-  return normalizeCourseHomeCourseMetadata(data, rootSlug);
+
+  return normalizeCourseHomeCourseMetadata(data);
 }

src/components/NavigationBar/data/api.test.js

@@ -5,9 +5,9 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
 import { initializeStore } from '../../../store';
-import { executeThunk } from '../../../test-utils';
+import executeThunk from '../../../test-utils';
 import { getCourseMetadataApiUrl } from './api';
-import { fetchTab } from './thunks';
+import fetchTab from './thunks';
 
 import './__factories__';
 
@@ -34,7 +34,7 @@ describe('Navigation bar api tests', () => {
   });
 
   it('Successfully get navigation tabs', async () => {
-    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1)));
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: true })));
     await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
 
     expect(store.getState().courseTabs.tabs).toHaveLength(4);
@@ -58,7 +58,7 @@ describe('Navigation bar api tests', () => {
   it('Denied to get navigation bar when user has no access on course', async () => {
     axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(
       200,
-      (Factory.build('navigationBar', 1, { hasCourseAccess: false })),
+      (Factory.build('navigationBar', 1, { hasCourseAccess: false, isEnrolled: true })),
     );
     await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
 

src/components/NavigationBar/data/selectors.js

@@ -1,3 +1,3 @@
-/* eslint-disable import/prefer-default-export */
+const selectCourseTabs = state => state.courseTabs;
 
-export const selectCourseTabs = state => state.courseTabs;
+export default selectCourseTabs;

src/components/NavigationBar/data/slice.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
 export const LOADING = 'loading';
@@ -14,30 +13,44 @@ const slice = createSlice({
     tabs: [],
     courseTitle: null,
     courseNumber: null,
+    isEnrolled: false,
     org: null,
   },
   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;
-    },
-    fetchTabSuccess: (state, { payload }) => {
-      state.courseId = payload.courseId;
-      state.targetUserId = payload.targetUserId;
-      state.tabs = payload.tabs;
-      state.courseStatus = LOADED;
-      state.courseTitle = payload.courseTitle;
-      state.courseNumber = payload.courseNumber;
-      state.org = payload.org;
-    },
+    fetchTabDenied: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        courseStatus: DENIED,
+      }
+    ),
+    fetchTabFailure: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        courseStatus: FAILED,
+      }
+    ),
+    fetchTabRequest: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        courseStatus: LOADING,
+      }
+    ),
+    fetchTabSuccess: (state, { payload }) => (
+      {
+        ...state,
+        courseId: payload.courseId,
+        targetUserId: payload.targetUserId,
+        tabs: payload.tabs,
+        courseStatus: LOADED,
+        courseTitle: payload.courseTitle,
+        courseNumber: payload.courseNumber,
+        org: payload.org,
+        isEnrolled: payload.isEnrolled,
+      }
+    ),
   },
 });
 

src/components/NavigationBar/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export, no-unused-expressions */
 import { logError } from '@edx/frontend-platform/logging';
 
 import { getHttpErrorStatus } from '../../../discussions/utils';
@@ -10,11 +9,11 @@ import {
   fetchTabSuccess,
 } from './slice';
 
-export function fetchTab(courseId, rootSlug) {
+export default function fetchTab(courseId) {
   return async (dispatch) => {
     dispatch(fetchTabRequest({ courseId }));
     try {
-      const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId, rootSlug);
+      const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId);
       if (!courseHomeCourseMetadata.courseAccess.hasAccess) {
         dispatch(fetchTabDenied({ courseId }));
       } else {
@@ -24,6 +23,7 @@ export function fetchTab(courseId, rootSlug) {
           org: courseHomeCourseMetadata.org,
           courseNumber: courseHomeCourseMetadata.number,
           courseTitle: courseHomeCourseMetadata.title,
+          isEnrolled: courseHomeCourseMetadata.isEnrolled,
         }));
       }
     } catch (e) {

src/components/NavigationBar/index.js

@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export { default as CourseTabsNavigation } from './CourseTabsNavigation';

src/components/NavigationBar/navBar.scss

@@ -1,24 +1,16 @@
-@import "~@edx/brand/paragon/fonts.scss";
-@import "~@edx/brand/paragon/variables.scss";
-@import "~@edx/paragon/scss/core/core.scss";
-@import "~@edx/brand/paragon/overrides.scss";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 
   .nav a,
   .nav button {
     &:hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
     }
   }
 
   .nav a {
     &:not(.active):hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
       border-bottom: none;
     }
   }
@@ -30,7 +22,7 @@ $fa-font-path: "~font-awesome/fonts";
   .nav-link {
     border-bottom: 4px solid transparent;
     border-top: 4px solid transparent;
-    color: $gray-700;
+    color: var(--pgn-color-gray-700);
 
     // temporary until we can remove .btn class from dropdowns
     border-left: 0;
@@ -40,9 +32,9 @@ $fa-font-path: "~font-awesome/fonts";
     &:hover,
     &:focus,
     &.active {
-      font-weight: $font-weight-normal;
-      color: $primary-500;
-      border-bottom-color: $primary-500;
+      font-weight: var(--pgn-typography-font-weight-normal);
+      color: var(--pgn-color-primary-500);
+      border-bottom-color: var(--pgn-color-primary-500);
     }
   }
 }

src/components/NavigationBar/tabs/Tabs.jsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { Dropdown } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Dropdown } from '@edx/paragon';
 
 import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
 

src/components/NavigationBar/tabs/useIndexOfLastVisibleChild.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 
-import { useWindowSize } from '@edx/paragon';
+import { useWindowSize } from '@openedx/paragon';
 
 const invisibleStyle = {
   position: 'absolute',

src/components/PostHelpPanel.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import {
+  Hyperlink, Icon, IconButton, IconButtonWithTooltip,
+} from '@openedx/paragon';
+import { Close, HelpOutline } from '@openedx/paragon/icons';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../discussions/posts/post-editor/messages';
+
+const PostHelpPanel = () => {
+  const intl = useIntl();
+  const [showHelpPane, setShowHelpPane] = useState(false);
+
+  return (
+    <>
+      <div className="d-flex justify-content-end">
+        <IconButtonWithTooltip
+          onClick={() => setShowHelpPane(true)}
+          alt={intl.formatMessage(messages.showHelpIcon)}
+          tooltipContent={<div>{intl.formatMessage(messages.discussionHelpTooltip)}</div>}
+          src={HelpOutline}
+          iconAs={Icon}
+          size="inline"
+          className="float-right p-3 help-icon"
+          iconClassNames="help-icon-size"
+          data-testid="help-button"
+          invertColors
+          isActive
+        />
+      </div>
+      {showHelpPane && (
+        <div
+          className="w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview overflow-auto my-3"
+          style={{ minHeight: '200px', wordBreak: 'break-word' }}
+        >
+          <IconButton
+            onClick={() => setShowHelpPane(false)}
+            alt={intl.formatMessage(messages.actionsAlt)}
+            src={Close}
+            iconAs={Icon}
+            size="inline"
+            className="float-right p-3"
+            iconClassNames="icon-size"
+            data-testid="hide-help-button"
+          />
+          <div className="pt-2 px-3">
+            <h4 className="font-weight-bold">{intl.formatMessage(messages.discussionHelpHeader)}</h4>
+            <p className="pt-2">{intl.formatMessage(messages.discussionHelpDescription)}</p>
+            <Hyperlink
+              target="_blank"
+              className="w-100"
+              destination="https://support.edx.org/hc/en-us/sections/115004169687-Participating-in-Course-Discussions"
+              showLaunchIcon={false}
+            >
+              {intl.formatMessage(messages.discussionHelpCourseParticipation)}
+            </Hyperlink>
+            <Hyperlink
+              target="_blank"
+              className="w-100"
+              destination="https://support.edx.org/hc/en-us/articles/360000035267-Entering-math-expressions-in-course-discussions"
+              showLaunchIcon={false}
+            >
+              {intl.formatMessage(messages.discussionHelpMathExpressions)}
+            </Hyperlink>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default React.memo(PostHelpPanel);

src/components/PostPreviewPanel.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
+import { Button, Icon, IconButton } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon, IconButton } from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
 
 import messages from '../discussions/posts/post-editor/messages';
 import HTMLLoader from './HTMLLoader';
@@ -18,7 +19,7 @@ const PostPreviewPanel = ({
     <>
       {showPreviewPane && (
         <div
-          className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
+          className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview overflow-auto ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
           style={{ minHeight: '200px', wordBreak: 'break-word' }}
         >
           <IconButton

src/components/Search.jsx

@@ -2,14 +2,14 @@ import React, {
   useCallback, useContext, useEffect, useRef, useState,
 } from 'react';
 
+import { Icon, SearchField } from '@openedx/paragon';
+import { Search as SearchIcon } from '@openedx/paragon/icons';
 import camelCase from 'lodash/camelCase';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, SearchField } from '@edx/paragon';
-import { Search as SearchIcon } from '@edx/paragon/icons';
 
-import { DiscussionContext } from '../discussions/common/context';
+import DiscussionContext from '../discussions/common/context';
 import { setUsernameSearch } from '../discussions/learners/data';
 import { setSearchQuery } from '../discussions/posts/data';
 import postsMessages from '../discussions/posts/post-actions-bar/messages';

src/components/SearchInfo.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Button, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@edx/paragon';
-import { Search } from '@edx/paragon/icons';
 
 import { RequestStatus } from '../data/constants';
 import messages from '../discussions/posts/post-actions-bar/messages';

src/components/Spinner.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Spinner as ParagonSpinner } from '@edx/paragon';
+import { Spinner as ParagonSpinner } from '@openedx/paragon';
 
 const Spinner = () => (
   <div className="spinner-container" data-testid="spinner">

src/components/TinyMCEEditor.jsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { ActionRow, AlertModal, Button } from '@openedx/paragon';
 import { Editor } from '@tinymce/tinymce-react';
-import { useLocation, useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router-dom';
 // TinyMCE so the global var exists
-// eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars, import/no-extraneous-dependencies */
 import tinymce from 'tinymce/tinymce';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, AlertModal, Button } from '@edx/paragon';
 
 import { MAX_UPLOAD_FILE_SIZE } from '../data/constants';
 import messages from '../discussions/messages';

src/components/TopicStats.jsx

@@ -2,11 +2,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { HelpOutline, PostOutline, Report } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
-import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
 
 import {
   selectUserHasModerationPrivileges,

src/components/icons/InsertLink.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function InsertLink() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}

src/components/icons/Issue.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function Issue() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="28"
-      height="28"
-      fill="none"
-      viewBox="0 0 28 28"
-    >
-      <path
-        fill="#F2F0EF"
-        d="M0 14C0 6.268 6.268 0 14 0s14 6.268 14 14-6.268 14-14 14S0 21.732 0 14z"
-      />
-      <path
-        fill="#2D494E"
-        d="M14 2.333C7.56 2.333 2.333 7.56 2.333 14c0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.667-5.227 11.667-11.667C25.667 7.56 20.44 2.334 14 2.334z"
-      />
-      <path
-        fill="#fff"
-        d="M12.833 22.167h2.334v-2.334h-2.334v2.334zM16.532 14.198l1.05-1.073a3.713 3.713 0 001.085-2.625A4.665 4.665 0 0014 5.833 4.665 4.665 0 009.333 10.5h2.334A2.34 2.34 0 0114 8.167a2.34 2.34 0 012.333 2.333c0 .642-.256 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.334c0-1.75.525-2.45 1.365-3.302z"
-      />
-    </svg>
-  );
-}

src/components/icons/People.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function People() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="none"
-      viewBox="0 0 16 16"
-    >
-      <path
-        fill="#707070"
-        d="M11.072 7.332a1.992 1.992 0 001.993-2 1.997 1.997 0 10-3.993 0c0 1.107.893 2 2 2zm-5.334 0a1.992 1.992 0 001.994-2 1.997 1.997 0 10-3.993 0c0 1.107.893 2 2 2zm0 1.333c-1.553 0-4.666.78-4.666 2.334v1.666h9.333V11c0-1.554-3.113-2.334-4.667-2.334zm5.334 0c-.194 0-.414.014-.647.034.773.56 1.313 1.313 1.313 2.3v1.666h4V11c0-1.554-3.113-2.334-4.666-2.334z"
-      />
-    </svg>
-  );
-}

src/components/icons/PushPin.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function PushPin() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M16 9V4H18V2H6V4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}

src/components/icons/Question.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function Question() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="28"
-      height="28"
-      fill="none"
-      viewBox="0 0 28 28"
-    >
-      <path
-        fill="#fff"
-        d="M0 14.001c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14z"
-      />
-      <path
-        fill="#2D494E"
-        d="M14 2.334c-6.44 0-11.667 5.227-11.667 11.667 0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.666-5.227 11.666-11.667 0-6.44-5.226-11.667-11.666-11.667z"
-      />
-      <path
-        fill="#fff"
-        d="M12.833 22.168h2.333v-2.334h-2.333v2.334zM16.531 14.2l1.05-1.074a3.712 3.712 0 001.085-2.625A4.665 4.665 0 0014 5.834a4.665 4.665 0 00-4.667 4.667h2.333A2.34 2.34 0 0114 8.168a2.34 2.34 0 012.333 2.333c0 .642-.257 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.333c0-1.75.525-2.45 1.365-3.302z"
-      />
-    </svg>
-  );
-}

src/components/icons/QuestionAnswer.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function QuestionAnswer() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="21"
-      height="20"
-      fill="none"
-      viewBox="0 0 21 20"
-    >
-      <path
-        fill="currentColor"
-        d="M18.737 5h-2.5v7.5H5.404V15h10l3.333 3.333V5zm-4.166 5.833V1.667H2.07v12.5l3.333-3.334h9.166z"
-      />
-    </svg>
-  );
-}

src/components/icons/QuestionAnswerOutline.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function QuestionAnswerOutline() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      fill="none"
-      viewBox="0 0 20 20"
-    >
-      <path
-        fill="currentColor"
-        d="M12.6 3.267v6.067H4.08l-.512.512-.502.502v-7.08H12.6zm.867-1.733H2.198a.87.87 0 00-.867.867v12.134L4.8 11.068h8.668a.87.87 0 00.866-.867v-7.8a.87.87 0 00-.867-.867zM17.8 5h-1.733v7.8H4.799v1.734c0 .476.39.867.867.867H15.2l3.467 3.466v-13A.87.87 0 0017.8 5z"
-      />
-    </svg>
-  );
-}

src/components/icons/StarFilled.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function StarFilled() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="21"
-      height="20"
-      fill="none"
-      viewBox="0 0 21 20"
-    >
-      <path
-        fill="currentColor"
-        d="M10.404 14.392l5.15 3.108-1.367-5.858 4.55-3.942-5.991-.508-2.342-5.525-2.342 5.525L2.07 7.7l4.55 3.942L5.254 17.5l5.15-3.108z"
-      />
-    </svg>
-  );
-}

src/components/icons/StarOutline.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function StarOutline() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      fill="none"
-      viewBox="0 0 20 20"
-    >
-      <path
-        fill="currentColor"
-        d="M18.737 7.7l-5.991-.517-2.342-5.516-2.342 5.525L2.07 7.7l4.55 3.942L5.254 17.5l5.15-3.108 5.15 3.108-1.359-5.858L18.737 7.7zm-8.333 5.133L7.27 14.725l.834-3.567-2.767-2.4 3.65-.316 1.417-3.359 1.425 3.367 3.65.317-2.767 2.4.834 3.566-3.142-1.9z"
-      />
-    </svg>
-  );
-}

src/components/icons/ThumbUpFilled.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function ThumbUpFilled() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="21"
-      height="20"
-      fill="none"
-      viewBox="0 0 21 20"
-    >
-      <path
-        fill="currentColor"
-        d="M12.212.833L6.237 6.817V17.5h10.258l3.075-7.167V6.667h-6.925l.934-4.484-1.367-1.35zM1.237 7.5H4.57v10H1.237v-10z"
-      />
-    </svg>
-  );
-}

src/components/icons/ThumbUpOutline.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-export default function ThumbUpOutline() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      fill="none"
-      viewBox="0 0 20 20"
-    >
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M19.57 6.667v3.666L16.495 17.5H6.238V6.817L12.212.833l1.367 1.35-.934 4.484h6.925zm-11.666.841v8.325h7.492l2.508-5.841V8.333h-7.309l.925-4.45-3.616 3.625z"
-        clipRule="evenodd"
-      />
-      <path fill="currentColor" d="M4.57 17.5H1.237v-10H4.57v10z" />
-    </svg>
-  );
-}

src/components/icons/index.js

@@ -1,11 +0,0 @@
-export { default as InsertLink } from './InsertLink';
-export { default as Issue } from './Issue';
-export { default as People } from './People';
-export { default as PushPin } from './PushPin';
-export { default as Question } from './Question';
-export { default as QuestionAnswer } from './QuestionAnswer';
-export { default as QuestionAnswerOutline } from './QuestionAnswerOutline';
-export { default as StarFilled } from './StarFilled';
-export { default as StarOutline } from './StarOutline';
-export { default as ThumbUpFilled } from './ThumbUpFilled';
-export { default as ThumbUpOutline } from './ThumbUpOutline';

src/data/__factories__/blocks.js

@@ -1,7 +1,5 @@
-/* eslint-disable import/prefer-default-export */
-
 // Course Blocks API response for the demo course.
-export const getBlocksAPIResponse = (newProvider = false) => {
+const getBlocksAPIResponse = (newProvider = false) => {
   const response = {
     root: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
     blocks: {
@@ -936,3 +934,5 @@ export const getBlocksAPIResponse = (newProvider = false) => {
   }
   return response;
 };
+
+export default getBlocksAPIResponse;

src/data/__factories__/index.js

@@ -1 +0,0 @@
-export * from './blocks';

src/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 import { getApiBaseUrl } from './constants';

src/data/constants.js

@@ -1,6 +1,9 @@
 import { getConfig } from '@edx/frontend-platform';
 
 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
+export const getFullUrl = (path) => (
+  new URL(`${getConfig().PUBLIC_PATH.replace(/\/$/, '')}/${path}`, window.location.origin).href
+);
 
 /**
  * Enum for thread types.
@@ -77,6 +80,7 @@ export const RequestStatus = {
  */
 export const AvatarOutlineAndLabelColors = {
   Staff: 'staff-color',
+  Moderator: 'TA-color',
   'Community TA': 'TA-color',
 };
 
@@ -137,25 +141,24 @@ export const DiscussionProvider = {
   OPEN_EDX: 'openedx',
 };
 
-const BASE_PATH = `${getConfig().PUBLIC_PATH}:courseId`;
+const BASE_PATH = '/:courseId';
 
 export const Routes = {
   DISCUSSIONS: {
     PATH: BASE_PATH,
   },
   LEARNERS: {
-    PATH: `${BASE_PATH}/learners`,
-    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts(/:postId)?`,
+    PATH: `${BASE_PATH}/learners/:learnerUsername?`,
+    POSTS: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
+    POSTS_EDIT: `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
   },
   POSTS: {
     PATH: `${BASE_PATH}/topics/:topicId`,
-    MY_POSTS: `${BASE_PATH}/my-posts(/:postId)?`,
-    ALL_POSTS: `${BASE_PATH}/posts(/:postId)?`,
-    NEW_POST: [
-      `${BASE_PATH}/topics/:topicId/posts/:postId`,
-      `${BASE_PATH}/topics/:topicId`,
-      `${BASE_PATH}`,
-    ],
+    MY_POSTS: `${BASE_PATH}/my-posts/:postId?`,
+    ALL_POSTS: `${BASE_PATH}/posts/:postId?`,
+    EDIT_MY_POSTS: `${BASE_PATH}/my-posts/:postId/edit`,
+    EDIT_ALL_POSTS: `${BASE_PATH}/posts/:postId/edit`,
+    NEW_POST: `${BASE_PATH}/*`,
     EDIT_POST: [
       `${BASE_PATH}/category/:category/posts/:postId/edit`,
       `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
@@ -166,19 +169,19 @@ export const Routes = {
   },
   COMMENTS: {
     PATH: [
-      `${BASE_PATH}/category/:category/posts/:postId`,
-      `${BASE_PATH}/topics/:topicId/posts/:postId`,
+      `${BASE_PATH}/category/:category/posts/:postId?`,
+      `${BASE_PATH}/topics/:topicId/posts/:postId?`,
       `${BASE_PATH}/posts/:postId`,
       `${BASE_PATH}/my-posts/:postId`,
-      `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
+      `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
     ],
-    PAGE: `${BASE_PATH}/:page`,
+    PAGE: `${BASE_PATH}/:page/*`,
     PAGES: {
-      category: `${BASE_PATH}/category/:category/posts/:postId`,
-      topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
+      category: `${BASE_PATH}/category/:category/posts/:postId?`,
+      topics: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
       posts: `${BASE_PATH}/posts/:postId`,
       'my-posts': `${BASE_PATH}/my-posts/:postId`,
-      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
+      learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
     },
   },
   TOPICS: {
@@ -189,9 +192,10 @@ export const Routes = {
     ],
     ALL: `${BASE_PATH}/topics`,
     CATEGORY: `${BASE_PATH}/category/:category`,
-    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
+    CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId?`,
+    CATEGORY_POST_EDIT: `${BASE_PATH}/category/:category/posts/:postId/edit`,
     TOPIC: `${BASE_PATH}/topics/:topicId`,
-    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId`,
+    TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
     TOPIC_POST_EDIT: `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
   },
 };
@@ -205,11 +209,12 @@ export const PostsPages = {
 };
 
 export const ALL_ROUTES = []
-  .concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
+  .concat([Routes.TOPICS.CATEGORY_POST, `${Routes.TOPICS.CATEGORY}?`])
   .concat(Routes.COMMENTS.PATH)
   .concat(Routes.TOPICS.PATH)
+  .concat(Routes.POSTS.EDIT_POST)
   .concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])
   .concat([Routes.LEARNERS.POSTS, Routes.LEARNERS.PATH])
-  .concat([Routes.DISCUSSIONS.PATH]);
+  .concat([`${Routes.DISCUSSIONS.PATH}/*`]);
 
 export const MAX_UPLOAD_FILE_SIZE = 1024;

src/data/hooks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { useState } from 'react';
 
 import { useDispatch } from 'react-redux';
@@ -15,7 +14,7 @@ import { useDispatch } from 'react-redux';
  *
  * @return {(boolean|(function(*=): Promise<void>)|*)[]}
  */
-export function useDispatchWithState() {
+export default function useDispatchWithState() {
   const dispatch = useDispatch();
   const [isDispatching, setDispatching] = useState(false);
 

src/data/redux.test.js

@@ -5,11 +5,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
 import { initializeStore } from '../store';
-import { executeThunk } from '../test-utils';
-import { getBlocksAPIResponse } from './__factories__';
+import executeThunk from '../test-utils';
+import getBlocksAPIResponse from './__factories__/blocks';
 import { getBlocksAPIURL } from './api';
 import { RequestStatus } from './constants';
-import { fetchCourseBlocks } from './thunks';
+import fetchCourseBlocks from './thunks';
 
 const blocksAPIURL = getBlocksAPIURL();
 const courseId = 'course-v1:edX+DemoX+Demo_Course';

src/data/selectors.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 import { createSelector } from '@reduxjs/toolkit';
 
 import { selectDiscussionProvider, selectGroupAtSubsection } from '../discussions/data/selectors';

src/data/slices.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign,import/prefer-default-export */
 import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from './constants';
@@ -16,19 +15,33 @@ const blocksSlice = createSlice({
     blocks: {},
   },
   reducers: {
-    fetchCourseBlocksRequest: (state) => {
-      state.status = RequestStatus.IN_PROGRESS;
-    },
-    fetchCourseBlocksSuccess: (state, { payload }) => {
-      state.status = RequestStatus.SUCCESSFUL;
-      Object.assign(state, payload);
-    },
-    fetchCourseBlocksFailed: (state) => {
-      state.status = RequestStatus.FAILED;
-    },
-    fetchCourseBlocksDenied: (state) => {
-      state.status = RequestStatus.DENIED;
-    },
+    fetchCourseBlocksRequest: (state) => (
+      {
+        ...state,
+        status: RequestStatus.IN_PROGRESS,
+      }
+    ),
+    fetchCourseBlocksSuccess: (state, { payload }) => (
+      {
+        ...state,
+        status: RequestStatus.SUCCESSFUL,
+        topics: payload.topics,
+        chapters: payload.chapters,
+        blocks: payload.blocks,
+      }
+    ),
+    fetchCourseBlocksFailed: (state) => (
+      {
+        ...state,
+        status: RequestStatus.FAILED,
+      }
+    ),
+    fetchCourseBlocksDenied: (state) => (
+      {
+        ...state,
+        status: RequestStatus.DENIED,
+      }
+    ),
   },
 });
 

src/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export, no-unused-expressions */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
@@ -88,7 +87,7 @@ function normaliseCourseBlocks({
   };
 }
 
-export function fetchCourseBlocks(courseId, username) {
+export default function fetchCourseBlocks(courseId, username) {
   return async (dispatch) => {
     try {
       dispatch(fetchCourseBlocksRequest({ courseId }));

src/discussions/cohorts/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { ensureConfig, getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 

src/discussions/cohorts/data/redux.test.js

@@ -5,9 +5,9 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
 import { initializeStore } from '../../../store';
-import { executeThunk } from '../../../test-utils';
+import executeThunk from '../../../test-utils';
 import { getCohortsApiUrl } from './api';
-import { fetchCourseCohorts } from './thunks';
+import fetchCourseCohorts from './thunks';
 
 import './__factories__';
 

src/discussions/cohorts/data/selectors.js

@@ -1,3 +1,3 @@
-/* eslint-disable import/prefer-default-export */
+const selectCourseCohorts = state => state.cohorts.cohorts;
 
-export const selectCourseCohorts = state => state.cohorts.cohorts;
+export default selectCourseCohorts;

src/discussions/cohorts/data/slices.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign,import/prefer-default-export */
 import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from '../../../data/constants';
@@ -10,17 +9,26 @@ const cohortsSlice = createSlice({
     cohorts: [],
   },
   reducers: {
-    fetchCohortsRequest: (state) => {
-      state.status = RequestStatus.IN_PROGRESS;
-      state.cohorts = [];
-    },
-    fetchCohortsSuccess: (state, { payload }) => {
-      state.status = RequestStatus.SUCCESSFUL;
-      state.cohorts = payload;
-    },
-    fetchCohortsFailed: (state) => {
-      state.status = RequestStatus.FAILED;
-    },
+    fetchCohortsRequest: (state) => (
+      {
+        ...state,
+        status: RequestStatus.IN_PROGRESS,
+        cohorts: [],
+      }
+    ),
+    fetchCohortsSuccess: (state, { payload }) => (
+      {
+        ...state,
+        status: RequestStatus.SUCCESSFUL,
+        cohorts: payload,
+      }
+    ),
+    fetchCohortsFailed: (state) => (
+      {
+        ...state,
+        status: RequestStatus.FAILED,
+      }
+    ),
   },
 });
 

src/discussions/cohorts/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
@@ -11,7 +10,7 @@ import {
   fetchCohortsSuccess,
 } from './slices';
 
-export function fetchCourseCohorts(courseId) {
+export default function fetchCourseCohorts(courseId) {
   return async (dispatch) => {
     try {
       dispatch(fetchCohortsRequest());

src/discussions/common/ActionsDropdown.jsx

@@ -3,14 +3,14 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
-import {
-  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
-} from '@edx/paragon';
-import { MoreHoriz } from '@edx/paragon/icons';
 
 import { ContentActions } from '../../data/constants';
 import { selectIsPostingEnabled } from '../data/selectors';
@@ -32,6 +32,11 @@ const ActionsDropdown = ({
   const isPostingEnabled = useSelector(selectIsPostingEnabled);
   const actions = useActions(contentType, id);
 
+  // Check if we're in in-context sidebar mode
+  const isInContextSidebar = useMemo(() => (
+    typeof window !== 'undefined' && window.location.search.includes('inContextSidebar')
+  ), []);
+
   const handleActions = useCallback((action) => {
     const actionFunction = actionHandlers[action];
     if (actionFunction) {
@@ -48,7 +53,8 @@ const ActionsDropdown = ({
     }
   }, [actions, isPostingEnabled]);
 
-  const onClickButton = useCallback(() => {
+  const onClickButton = useCallback((event) => {
+    event.preventDefault();
     setTarget(buttonRef.current);
     open();
   }, [open]);
@@ -58,6 +64,38 @@ const ActionsDropdown = ({
     setTarget(null);
   }, [close]);
 
+  const dropdownContent = (
+    <div
+      className="bg-white shadow d-flex flex-column mt-1"
+      data-testid="actions-dropdown-modal-popup"
+    >
+      {actions.map(action => (
+        <React.Fragment key={action.id}>
+          {(action.action === ContentActions.DELETE) && <Dropdown.Divider />}
+          <Dropdown.Item
+            as={Button}
+            variant="tertiary"
+            size="inline"
+            onClick={() => {
+              close();
+              handleActions(action.action);
+            }}
+            className="d-flex justify-content-start actions-dropdown-item"
+            data-testId={action.id}
+          >
+            <Icon
+              src={action.icon}
+              className="icon-size-24"
+            />
+            <span className="font-weight-normal ml-2">
+              {intl.formatMessage(action.label)}
+            </span>
+          </Dropdown.Item>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+
   return (
     <>
       <IconButton
@@ -70,41 +108,14 @@ const ActionsDropdown = ({
         ref={buttonRef}
         iconClassNames={dropDownIconSize ? 'dropdown-icon-dimensions' : ''}
       />
-      <div className="actions-dropdown">
+      <div className={`actions-dropdown ${isInContextSidebar ? 'in-context-sidebar' : ''}`}>
         <ModalPopup
           onClose={onCloseModal}
           positionRef={target}
           isOpen={isOpen}
           placement="bottom-end"
         >
-          <div
-            className="bg-white shadow d-flex flex-column"
-            data-testid="actions-dropdown-modal-popup"
-          >
-            {actions.map(action => (
-              <React.Fragment key={action.id}>
-                {(action.action === ContentActions.DELETE) && <Dropdown.Divider />}
-                <Dropdown.Item
-                  as={Button}
-                  variant="tertiary"
-                  size="inline"
-                  onClick={() => {
-                    close();
-                    handleActions(action.action);
-                  }}
-                  className="d-flex justify-content-start actions-dropdown-item"
-                >
-                  <Icon
-                    src={action.icon}
-                    className="icon-size-24"
-                  />
-                  <span className="font-weight-normal font-xl ml-2">
-                    {intl.formatMessage(action.label)}
-                  </span>
-                </Dropdown.Item>
-              </React.Fragment>
-            ))}
-          </div>
+          {dropdownContent}
         </ModalPopup>
       </div>
     </>

src/discussions/common/ActionsDropdown.test.jsx

@@ -8,17 +8,18 @@ import { Factory } from 'rosie';
 
 import { camelCaseObject, initializeMockApp, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { ContentActions } from '../../data/constants';
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+import fetchCourseConfig from '../data/thunks';
 import messages from '../messages';
 import { getCommentsApiUrl } from '../post-comments/data/api';
 import { addComment, fetchThreadComments } from '../post-comments/data/thunks';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThread } from '../posts/data/thunks';
 import { ACTIONS_LIST } from '../utils';
@@ -27,6 +28,11 @@ import ActionsDropdown from './ActionsDropdown';
 import '../post-comments/data/__factories__';
 import '../posts/data/__factories__';
 
+jest.mock('@edx/frontend-platform/logging', () => ({
+  ...jest.requireActual('@edx/frontend-platform/logging'),
+  logError: jest.fn(),
+}));
+
 let store;
 let axiosMock;
 const commentsApiUrl = getCommentsApiUrl();
@@ -242,6 +248,25 @@ describe('ActionsDropdown', () => {
     await waitFor(() => expect(screen.queryByText('Copy link')).not.toBeInTheDocument());
   });
 
+  it('should close the dropdown when pressing escape', async () => {
+    const discussionObject = buildTestContent({ editable_fields: ['copy_link'] }).discussion;
+    await mockThreadAndComment(discussionObject);
+    renderComponent({ ...camelCaseObject(discussionObject) });
+
+    const openButton = await findOpenActionsDropdownButton();
+    await act(async () => {
+      fireEvent.click(openButton);
+    });
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Copy link' })).toBeInTheDocument());
+
+    await act(async () => {
+      fireEvent.keyDown(document.body, { key: 'Escape', code: 'Escape' });
+    });
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Copy link' })).toBeNull());
+  });
+
   describe.each(canPerformActionTestData)('Actions', ({
     testFor, action, label, ...commentOrPost
   }) => {
@@ -284,4 +309,148 @@ describe('ActionsDropdown', () => {
       });
     });
   });
+
+  it('applies in-context-sidebar class when inContextSidebar is in URL', async () => {
+    const originalLocation = window.location;
+    delete window.location;
+    window.location = { ...originalLocation, search: '?inContextSidebar=true' };
+
+    const discussionObject = buildTestContent().discussion;
+    await mockThreadAndComment(discussionObject);
+
+    renderComponent({ ...camelCaseObject(discussionObject) });
+
+    const openButton = await findOpenActionsDropdownButton();
+    await act(async () => {
+      fireEvent.click(openButton);
+    });
+
+    const dropdown = screen.getByTestId('actions-dropdown-modal-popup').closest('.actions-dropdown');
+    expect(dropdown).toHaveClass('in-context-sidebar');
+
+    window.location = originalLocation;
+  });
+
+  it('does not apply in-context-sidebar class when inContextSidebar is not in URL', async () => {
+    const originalLocation = window.location;
+    delete window.location;
+    window.location = { ...originalLocation, search: '' };
+
+    const discussionObject = buildTestContent().discussion;
+    await mockThreadAndComment(discussionObject);
+
+    renderComponent({ ...camelCaseObject(discussionObject) });
+
+    const openButton = await findOpenActionsDropdownButton();
+    await act(async () => {
+      fireEvent.click(openButton);
+    });
+
+    const dropdown = screen.getByTestId('actions-dropdown-modal-popup').closest('.actions-dropdown');
+    expect(dropdown).not.toHaveClass('in-context-sidebar');
+
+    window.location = originalLocation;
+  });
+
+  it('handles SSR environment when window is undefined', () => {
+    const testSSRLogic = () => {
+      if (typeof window !== 'undefined') {
+        return window.location.search.includes('inContextSidebar');
+      }
+      return false;
+    };
+
+    const originalWindow = global.window;
+    const originalProcess = global.process;
+
+    try {
+      delete global.window;
+
+      const result = testSSRLogic();
+      expect(result).toBe(false);
+
+      global.window = originalWindow;
+      const resultWithWindow = testSSRLogic();
+      expect(resultWithWindow).toBe(false);
+    } finally {
+      global.window = originalWindow;
+      global.process = originalProcess;
+    }
+  });
+
+  it('calls logError for unknown action', async () => {
+    const discussionObject = buildTestContent().discussion;
+    await mockThreadAndComment(discussionObject);
+
+    logError.mockClear();
+
+    renderComponent({
+      ...discussionObject,
+      actionHandlers: {
+        [ContentActions.EDIT_CONTENT]: jest.fn(),
+      },
+    });
+
+    const openButton = await findOpenActionsDropdownButton();
+    await act(async () => {
+      fireEvent.click(openButton);
+    });
+
+    const copyLinkButton = await screen.findByText('Copy link');
+    await act(async () => {
+      fireEvent.click(copyLinkButton);
+    });
+
+    expect(logError).toHaveBeenCalledWith('Unknown or unimplemented action copy_link');
+  });
+
+  describe('posting restrictions', () => {
+    it('removes edit action when posting is disabled', async () => {
+      const discussionObject = buildTestContent({
+        editable_fields: ['raw_body'],
+      }).discussion;
+
+      await mockThreadAndComment(discussionObject);
+
+      axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`)
+        .reply(200, { isPostingEnabled: false });
+
+      await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+
+      renderComponent({ ...discussionObject });
+
+      const openButton = await findOpenActionsDropdownButton();
+      await act(async () => {
+        fireEvent.click(openButton);
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+      });
+    });
+
+    it('keeps edit action when posting is enabled', async () => {
+      const discussionObject = buildTestContent({
+        editable_fields: ['raw_body'],
+      }).discussion;
+
+      await mockThreadAndComment(discussionObject);
+
+      axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`)
+        .reply(200, { isPostingEnabled: true });
+
+      await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+
+      renderComponent({ ...discussionObject });
+
+      const openButton = await findOpenActionsDropdownButton();
+      await act(async () => {
+        fireEvent.click(openButton);
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('Edit')).toBeInTheDocument();
+      });
+    });
+  });
 });

src/discussions/common/AlertBanner.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert } from '@openedx/paragon';
+import { Report } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Report } from '@edx/paragon/icons';
 
 import { AvatarOutlineAndLabelColors } from '../../data/constants';
 import {

src/discussions/common/AlertBanner.test.jsx

@@ -9,7 +9,7 @@ import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import messages from '../post-comments/messages';
 import AlertBanner from './AlertBanner';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 import '../post-comments/data/__factories__';
 import '../posts/data/__factories__';

src/discussions/common/AlertBar.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert } from '@openedx/paragon';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
 
 import messages from '../post-comments/messages';
 import AuthorLabel from './AuthorLabel';

src/discussions/common/AuthorLabel.jsx

@@ -1,19 +1,17 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import classNames from 'classnames';
-import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { generatePath, Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
-import { Institution, School } from '@edx/paragon/icons';
 
 import { Routes } from '../../data/constants';
-import { useShowLearnersTab } from '../data/hooks';
 import messages from '../messages';
-import { DiscussionContext } from './context';
+import { getAuthorLabel } from '../utils';
+import DiscussionContext from './context';
 import timeLocale from './time-locale';
 
 const AuthorLabel = ({
@@ -28,30 +26,19 @@ const AuthorLabel = ({
 }) => {
   timeago.register('time-locale', timeLocale);
   const intl = useIntl();
-  const { courseId } = useContext(DiscussionContext);
-  let icon = null;
-  let authorLabelMessage = null;
-
-  if (authorLabel === 'Staff') {
-    icon = Institution;
-    authorLabelMessage = intl.formatMessage(messages.authorLabelStaff);
-  }
-
-  if (authorLabel === 'Community TA') {
-    icon = School;
-    authorLabelMessage = intl.formatMessage(messages.authorLabelTA);
-  }
+  const { courseId, enableInContextSidebar } = useContext(DiscussionContext);
+  const { icon, authorLabelMessage } = useMemo(() => getAuthorLabel(intl, authorLabel), [authorLabel]);
 
   const isRetiredUser = author ? author.startsWith('retired__user') : false;
   const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
   const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
 
-  const showUserNameAsLink = useShowLearnersTab()
-    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
+  const showUserNameAsLink = linkToProfile && author && author !== intl.formatMessage(messages.anonymous)
+                             && !enableInContextSidebar;
 
   const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+      className={classNames('mr-1.5 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}
@@ -65,17 +52,19 @@ const AuthorLabel = ({
   const labelContents = useMemo(() => (
     <>
       <OverlayTrigger
+        placement={authorToolTip ? 'top' : 'right'}
         overlay={(
-          <Tooltip id={`endorsed-by-${author}-tooltip`}>
-            {author}
+          <Tooltip id={authorToolTip ? `endorsed-by-${author}-tooltip` : `${authorLabel}-label-tooltip`}>
+            <>
+              {authorToolTip ? author : authorLabel}
+              <br />
+              {intl.formatMessage(messages.authorAdminDescription)}
+            </>
           </Tooltip>
         )}
         trigger={['hover', 'focus']}
       >
-        <div className={classNames('d-flex flex-row align-items-center', {
-          'disable-div': !authorToolTip,
-        })}
-        >
+        <div className={classNames('d-flex flex-row align-items-center')}>
           <Icon
             style={{
               width: '1rem',
@@ -86,7 +75,7 @@ const AuthorLabel = ({
           />
           {authorLabelMessage && (
             <span
-              className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+              className={classNames('mr-1.5 font-style font-weight-500', {
                 'text-primary-500': showTextPrimary,
                 'text-gray-700': isRetiredUser,
               })}
@@ -100,7 +89,7 @@ const AuthorLabel = ({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('align-content-center', {
+          className={classNames('align-content-center post-summary-timestamp', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}
@@ -112,22 +101,47 @@ const AuthorLabel = ({
     </>
   ), [author, authorLabelMessage, authorToolTip, icon, isRetiredUser, postCreatedAt, showTextPrimary, alert]);
 
+  const learnerPostsLink = useMemo(() => {
+    if (!showUserNameAsLink) {
+      return null;
+    }
+    return (
+      <Link
+        data-testid="learner-posts-link"
+        id="learner-posts-link"
+        to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
+        className="text-decoration-none text-reset"
+        style={{ width: 'fit-content' }}
+      >
+        {!alert && authorName}
+      </Link>
+    );
+  }, [showUserNameAsLink, author, courseId, alert, authorName]);
+
   return showUserNameAsLink
     ? (
-      <div className={className}>
-        <Link
-          data-testid="learner-posts-link"
-          id="learner-posts-link"
-          to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
-          className="text-decoration-none"
-          style={{ width: 'fit-content' }}
-        >
-          {!alert && authorName}
-        </Link>
+      <div className={`${className} flex-wrap`}>
+        {!authorLabel ? (
+          <OverlayTrigger
+            placement={authorToolTip ? 'top' : 'right'}
+            overlay={(
+              <Tooltip id={authorToolTip ? `endorsed-by-${author}-tooltip` : `${authorLabel}-label-tooltip`}>
+                <>
+                  {intl.formatMessage(messages.authorLearnerTitle)}
+                  <br />
+                  {intl.formatMessage(messages.authorLearnerDescription)}
+                </>
+              </Tooltip>
+        )}
+            trigger={['hover', 'focus']}
+          >
+            {learnerPostsLink}
+          </OverlayTrigger>
+        ) : learnerPostsLink }
         {labelContents}
       </div>
     )
-    : <div className={className}>{authorName}{labelContents}</div>;
+    : <div className={`${className} flex-wrap`}>{authorName}{labelContents}</div>;
 };
 
 AuthorLabel.propTypes = {

src/discussions/common/AuthorLabel.test.jsx

@@ -9,11 +9,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+import fetchCourseConfig from '../data/thunks';
 import AuthorLabel from './AuthorLabel';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
 const courseConfigApiUrl = getCourseConfigApiUrl();
@@ -21,11 +21,11 @@ let store;
 let axiosMock;
 let container;
 
-function renderComponent(author, authorLabel, linkToProfile, labelColor) {
+function renderComponent(author, authorLabel, linkToProfile, labelColor, enableInContextSidebar) {
   const wrapper = render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <DiscussionContext.Provider value={{ courseId }}>
+        <DiscussionContext.Provider value={{ courseId, enableInContextSidebar }}>
           <AuthorLabel
             author={author}
             authorLabel={authorLabel}
@@ -53,7 +53,6 @@ describe('Author label', () => {
     store = initializeStore();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
-      learners_tab_enabled: true,
       has_moderation_privileges: true,
     });
     axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
@@ -63,6 +62,7 @@ describe('Author label', () => {
   describe.each([
     ['anonymous', null, false, ''],
     ['ta_user', 'Community TA', true, 'text-TA-color'],
+    ['moderator_user', 'Moderator', true, 'text-TA-color'],
     ['retired__user', null, false, ''],
     ['staff_user', 'Staff', true, 'text-staff-color'],
     ['learner_user', null, false, ''],
@@ -79,9 +79,9 @@ describe('Author label', () => {
     );
 
     it(
-      `it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
+      `it is "${(!linkToProfile) && 'not'}" clickable when linkToProfile is ${!!linkToProfile} and enableInContextSidebar is false`,
       async () => {
-        renderComponent(author, authorLabel, linkToProfile, labelColor);
+        renderComponent(author, authorLabel, linkToProfile, labelColor, false);
 
         if (linkToProfile) {
           expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
@@ -91,6 +91,15 @@ describe('Author label', () => {
       },
     );
 
+    it(
+      'it is not clickable when enableInContextSidebar is true',
+      async () => {
+        renderComponent(author, authorLabel, linkToProfile, labelColor, true);
+
+        expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
+      },
+    );
+
     it(
       `it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
       async () => {
@@ -98,7 +107,7 @@ describe('Author label', () => {
         const authorElement = container.querySelector('[role=heading]');
         const labelParentNode = authorElement.parentNode.parentNode;
         const labelElement = labelParentNode.lastChild.lastChild;
-        const label = ['TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
+        const label = ['CTA', 'TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
 
         if (linkToProfile) {
           expect(labelParentNode).toHaveClass(labelColor);

src/discussions/common/Confirmation.jsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  ActionRow,
+  ModalDialog,
+  Spinner, StatefulButton,
+} from '@openedx/paragon';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 
 import messages from '../messages';
 
@@ -10,34 +15,60 @@ const Confirmation = ({
   isOpen,
   title,
   description,
+  boldDescription,
   onClose,
   confirmAction,
   closeButtonVariant,
+  confirmButtonState,
   confirmButtonVariant,
   confirmButtonText,
+  isDataLoading,
+  isConfirmButtonPending,
+  pendingConfirmButtonText,
+  closeButtonText,
 }) => {
   const intl = useIntl();
 
   return (
     <ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose} zIndex={5000}>
-      <ModalDialog.Header>
-        <ModalDialog.Title>
-          {title}
-        </ModalDialog.Title>
-      </ModalDialog.Header>
-      <ModalDialog.Body>
-        {description}
-      </ModalDialog.Body>
-      <ModalDialog.Footer>
-        <ActionRow>
-          <ModalDialog.CloseButton variant={closeButtonVariant}>
-            {intl.formatMessage(messages.confirmationCancel)}
-          </ModalDialog.CloseButton>
-          <Button variant={confirmButtonVariant} onClick={confirmAction}>
-            { confirmButtonText || intl.formatMessage(messages.confirmationConfirm)}
-          </Button>
-        </ActionRow>
-      </ModalDialog.Footer>
+      {isDataLoading && !isConfirmButtonPending ? (
+        <ModalDialog.Body>
+          <div className="d-flex justify-content-center p-4">
+            <Spinner animation="border" variant="primary" size="lg" />
+          </div>
+        </ModalDialog.Body>
+      ) : (
+        <>
+          <ModalDialog.Header>
+            <ModalDialog.Title>
+              {title}
+            </ModalDialog.Title>
+          </ModalDialog.Header>
+          <ModalDialog.Body style={{ whiteSpace: 'pre-line' }}>
+            {description}
+            {boldDescription && <><br /><p className="font-weight-bold pt-2">{boldDescription}</p></>}
+          </ModalDialog.Body>
+          <ModalDialog.Footer>
+            <ActionRow>
+              <ModalDialog.CloseButton variant={closeButtonVariant}>
+                {closeButtonText || intl.formatMessage(messages.confirmationCancel)}
+              </ModalDialog.CloseButton>
+              {confirmAction && (
+              <StatefulButton
+                labels={{
+                  default: confirmButtonText || intl.formatMessage(messages.confirmationConfirm),
+                  pending: pendingConfirmButtonText || confirmButtonText
+                      || intl.formatMessage(messages.confirmationConfirm),
+                }}
+                state={isConfirmButtonPending ? 'pending' : confirmButtonState}
+                variant={confirmButtonVariant}
+                onClick={confirmAction}
+              />
+              )}
+            </ActionRow>
+          </ModalDialog.Footer>
+        </>
+      )}
     </ModalDialog>
   );
 };
@@ -48,15 +79,27 @@ Confirmation.propTypes = {
   confirmAction: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
+  boldDescription: PropTypes.string,
   closeButtonVariant: PropTypes.string,
   confirmButtonVariant: PropTypes.string,
   confirmButtonText: PropTypes.string,
+  isDataLoading: PropTypes.bool,
+  isConfirmButtonPending: PropTypes.bool,
+  pendingConfirmButtonText: PropTypes.string,
+  closeButtonText: PropTypes.string,
+  confirmButtonState: PropTypes.string,
 };
 
 Confirmation.defaultProps = {
   closeButtonVariant: 'default',
   confirmButtonVariant: 'primary',
   confirmButtonText: '',
+  boldDescription: '',
+  isDataLoading: false,
+  isConfirmButtonPending: false,
+  pendingConfirmButtonText: '',
+  closeButtonText: '',
+  confirmButtonState: 'default',
 };
 
 export default React.memo(Confirmation);

src/discussions/common/EndorsedAlertBanner.jsx

@@ -1,15 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert, Icon } from '@openedx/paragon';
+import { CheckCircle, Verified } from '@openedx/paragon/icons';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert, Icon } from '@edx/paragon';
-import { CheckCircle, Verified } from '@edx/paragon/icons';
 
 import { ThreadType } from '../../data/constants';
 import messages from '../post-comments/messages';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import AuthorLabel from './AuthorLabel';
 import timeLocale from './time-locale';
 

src/discussions/common/EndorsedAlertBanner.test.jsx

@@ -8,8 +8,8 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import messages from '../post-comments/messages';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
-import { DiscussionContext } from './context';
+import PostCommentsContext from '../post-comments/postCommentsContext';
+import DiscussionContext from './context';
 import EndorsedAlertBanner from './EndorsedAlertBanner';
 
 import '../post-comments/data/__factories__';

src/discussions/common/HoverCard.jsx

@@ -1,20 +1,22 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Button, Icon, IconButton, OverlayTrigger, Tooltip,
+} from '@openedx/paragon';
+import {
+  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
+} from '@openedx/paragon/icons';
 import classNames from 'classnames';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Button, Icon, IconButton, OverlayTrigger, Tooltip,
-} from '@edx/paragon';
 
-import {
-  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
-} from '../../components/icons';
-import { useUserPostingEnabled } from '../data/hooks';
-import { PostCommentsContext } from '../post-comments/postCommentsContext';
+import { ThreadType } from '../../data/constants';
+import { useHasLikePermission, useUserPostingEnabled } from '../data/hooks';
+import PostCommentsContext from '../post-comments/postCommentsContext';
+import messages from '../posts/post/messages';
 import ActionsDropdown from './ActionsDropdown';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 const HoverCard = ({
   id,
@@ -32,10 +34,11 @@ const HoverCard = ({
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const { isClosed } = useContext(PostCommentsContext);
   const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
+  const userHasLikePermission = useHasLikePermission(contentType, id);
 
   return (
     <div
-      className="flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
+      className="flex-fill justify-content-end align-items-center hover-card bg-white mr-n4 position-absolute"
       data-testid={`hover-card-${id}`}
       id={`hover-card-${id}`}
     >
@@ -44,7 +47,7 @@ const HoverCard = ({
           <Button
             variant="tertiary"
             className={classNames(
-              'px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
+              'px-2.5 py-2 border-0 font-style text-gray-700',
               { 'w-100': enableInContextSidebar },
             )}
             onClick={() => handleResponseCommentButton()}
@@ -72,7 +75,7 @@ const HoverCard = ({
                 const actionFunction = actionHandlers[endorseIcons.action];
                 actionFunction();
               }}
-              className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
+              className="text-primary"
               size="sm"
               alt="Endorse"
             />
@@ -80,31 +83,48 @@ const HoverCard = ({
         </div>
       )}
       <div className="hover-button">
-        <IconButton
-          src={voted ? ThumbUpFilled : ThumbUpOutline}
-          iconAs={Icon}
-          size="sm"
-          alt="Like"
-          iconClassNames="like-icon-dimensions"
-          onClick={(e) => {
-            e.preventDefault();
-            onLike();
-          }}
-        />
+        <OverlayTrigger
+          overlay={(
+            <Tooltip>
+              {intl.formatMessage(voted ? messages.removeLike : messages.like)}
+            </Tooltip>
+        )}
+        >
+          <IconButton
+            src={voted ? ThumbUpFilled : ThumbUpOutline}
+            iconAs={Icon}
+            size="sm"
+            alt="Like"
+            disabled={!userHasLikePermission}
+            iconClassNames="like-icon-dimensions"
+            onClick={(e) => {
+              e.preventDefault();
+              onLike();
+            }}
+          />
+        </OverlayTrigger>
       </div>
       {following !== undefined && (
         <div className="hover-button">
-          <IconButton
-            src={following ? StarFilled : StarOutline}
-            iconAs={Icon}
-            size="sm"
-            alt="Follow"
-            iconClassNames="follow-icon-dimensions"
-            onClick={(e) => {
-              e.preventDefault();
-              onFollow();
-            }}
-          />
+          <OverlayTrigger
+            overlay={(
+              <Tooltip>
+                {intl.formatMessage(following ? messages.unFollow : messages.follow)}
+              </Tooltip>
+          )}
+          >
+            <IconButton
+              src={following ? StarFilled : StarOutline}
+              iconAs={Icon}
+              size="sm"
+              alt="Follow"
+              iconClassNames="follow-icon-dimensions"
+              onClick={(e) => {
+                e.preventDefault();
+                onFollow();
+              }}
+            />
+          </OverlayTrigger>
         </div>
       )}
       <div className="hover-button ml-auto">
@@ -127,8 +147,22 @@ HoverCard.propTypes = {
   addResponseCommentButtonMessage: PropTypes.string.isRequired,
   onLike: PropTypes.func.isRequired,
   voted: PropTypes.bool.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  endorseIcons: PropTypes.objectOf(PropTypes.any),
+  endorseIcons: PropTypes.objectOf(PropTypes.shape(
+    {
+      id: PropTypes.string,
+      action: PropTypes.string,
+      icon: PropTypes.element,
+      label: {
+        id: PropTypes.string,
+        defaultMessage: PropTypes.string,
+        description: PropTypes.string,
+      },
+      conditions: {
+        endorsed: PropTypes.bool,
+        postType: ThreadType,
+      },
+    },
+  )),
   onFollow: PropTypes.func,
   following: PropTypes.bool,
 };

src/discussions/common/HoverCard.test.jsx

@@ -1,9 +1,9 @@
 import {
-  render, screen, waitFor, within,
+  fireEvent, render, screen, waitFor, within,
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
 
 import { initializeMockApp } from '@edx/frontend-platform';
@@ -11,15 +11,15 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+import fetchCourseConfig from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getCommentsApiUrl } from '../post-comments/data/api';
 import { fetchCommentResponses } from '../post-comments/data/thunks';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
-import { DiscussionContext } from './context';
+import DiscussionContext from './context';
 
 import '../posts/data/__factories__';
 import '../post-comments/data/__factories__';
@@ -60,15 +60,12 @@ async function mockAxiosReturnPagedCommentsResponses() {
 function renderComponent(postId) {
   const wrapper = render(
     <IntlProvider locale="en">
-      <AppProvider store={store}>
+      <AppProvider store={store} wrapWithRouter={false}>
         <DiscussionContext.Provider
-          value={{ courseId, postId }}
+          value={{ courseId, postId, page: 'posts' }}
         >
           <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
             <DiscussionContent />
-            <Route
-              path="*"
-            />
           </MemoryRouter>
         </DiscussionContext.Provider>
       </AppProvider>
@@ -109,8 +106,8 @@ describe('HoverCard', () => {
   });
 
   test('it should have hover card on post', async () => {
-    await waitFor(() => renderComponent(discussionPostId));
-    const post = screen.getByTestId('post-thread-1');
+    renderComponent(discussionPostId);
+    const post = await screen.findByTestId('post-thread-1');
     expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
   });
 
@@ -141,4 +138,27 @@ describe('HoverCard', () => {
     expect(within(hoverCard).queryByRole('button', { name: /like/i })).toBeInTheDocument();
     expect(within(hoverCard).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
   });
+
+  test('it should call onFollow when follow button is clicked', async () => {
+    await waitFor(() => renderComponent(discussionPostId));
+    const post = screen.getByTestId('post-thread-1');
+    const hoverCard = within(post).getByTestId('hover-card-thread-1');
+
+    const followBtn = within(hoverCard).getByRole('button', { name: /follow/i });
+    fireEvent.click(followBtn);
+
+    expect(followBtn).toBeEnabled();
+  });
+
+  test('it should call onLike when Like button is clicked', async () => {
+    await waitFor(() => renderComponent(discussionPostId));
+
+    const post = screen.getByTestId('post-thread-1');
+    const hoverCard = within(post).getByTestId('hover-card-thread-1');
+
+    const likeBtn = within(hoverCard).getByRole('button', { name: /like/i });
+    fireEvent.click(likeBtn);
+
+    expect(likeBtn).toBeEnabled();
+  });
 });

src/discussions/common/context.js

@@ -1,7 +1,6 @@
-/* eslint-disable import/prefer-default-export */
 import React from 'react';
 
-export const DiscussionContext = React.createContext({
+const DiscussionContext = React.createContext({
   page: null,
   courseId: null,
   postId: null,
@@ -10,3 +9,5 @@ export const DiscussionContext = React.createContext({
   category: null,
   learnerUsername: null,
 });
+
+export default DiscussionContext;

src/discussions/common/time-locale.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function timeLocale(number, index, totalSec) {
   return [
     ['just now', 'right now'],

src/discussions/common/withPostingRestrictions.jsx

@@ -0,0 +1,90 @@
+import React, {
+  useCallback, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../../data/constants';
+import { selectConfirmEmailStatus, selectContentCreationRateLimited, selectShouldShowEmailConfirmation } from '../data/selectors';
+import { hidePostEditor } from '../posts/data';
+import { sendAccountActivationEmail } from '../posts/data/thunks';
+import postMessages from '../posts/post-actions-bar/messages';
+import { Confirmation } from '.';
+
+const withPostingRestrictions = (WrappedComponent) => {
+  const EnhancedComponent = ({ onCloseEditor, ...rest }) => {
+    const intl = useIntl();
+    const dispatch = useDispatch();
+    const [isConfirming, setIsConfirming] = useState(false);
+    const shouldShowEmailConfirmation = useSelector(selectShouldShowEmailConfirmation);
+    const contentCreationRateLimited = useSelector(selectContentCreationRateLimited);
+    const confirmEmailStatus = useSelector(selectConfirmEmailStatus);
+
+    const openConfirmation = useCallback(() => {
+      setIsConfirming(true);
+    }, []);
+
+    const closeConfirmation = useCallback(() => {
+      setIsConfirming(false);
+      dispatch(hidePostEditor());
+      onCloseEditor?.();
+    }, [onCloseEditor]);
+
+    const handleConfirmation = useCallback(() => {
+      dispatch(sendAccountActivationEmail());
+    }, [dispatch]);
+
+    const confirmButtonState = useMemo(() => {
+      if (confirmEmailStatus === RequestStatus.IN_PROGRESS) { return 'pending'; }
+      if (confirmEmailStatus === RequestStatus.SUCCESSFUL) { return 'complete'; }
+      return 'primary';
+    }, [confirmEmailStatus]);
+
+    return (
+      <>
+        <WrappedComponent
+          {...rest}
+          onCloseEditor={onCloseEditor}
+          openRestrictionDialogue={openConfirmation}
+        />
+        {shouldShowEmailConfirmation
+         && (
+         <Confirmation
+           isOpen={isConfirming}
+           title={intl.formatMessage(postMessages.confirmEmailTitle)}
+           description={intl.formatMessage(postMessages.confirmEmailDescription)}
+           onClose={closeConfirmation}
+           confirmAction={handleConfirmation}
+           closeButtonVariant="tertiary"
+           confirmButtonState={confirmButtonState}
+           confirmButtonText={intl.formatMessage(postMessages.confirmEmailButton)}
+           closeButtonText={intl.formatMessage(postMessages.closeButton)}
+           confirmButtonVariant="danger"
+         />
+         )}
+        {contentCreationRateLimited
+          && (
+          <Confirmation
+            isOpen={isConfirming}
+            title={intl.formatMessage(postMessages.postLimitTitle)}
+            description={intl.formatMessage(postMessages.postLimitDescription)}
+            onClose={closeConfirmation}
+            closeButtonText={intl.formatMessage(postMessages.closeButton)}
+            closeButtonVariant="danger"
+          />
+          )}
+      </>
+    );
+  };
+
+  EnhancedComponent.propTypes = {
+    onCloseEditor: PropTypes.func,
+  };
+
+  return EnhancedComponent;
+};
+
+export default withPostingRestrictions;

src/discussions/common/withPostingRestrictions.test.jsx

@@ -0,0 +1,84 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
+import { Context as ResponsiveContext } from 'react-responsive';
+import { MemoryRouter } from 'react-router';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import EmptyPosts from '../empty-posts/EmptyPosts';
+import messages from '../messages';
+import { sendEmailForAccountActivation } from '../posts/data/api';
+
+let store;
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+jest.mock('../posts/data/api', () => ({
+  sendEmailForAccountActivation: jest.fn(),
+}));
+
+function renderComponent(location = `/${courseId}/`) {
+  return render(
+    <IntlProvider locale="en">
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <AppProvider store={store} wrapWithRouter={false}>
+          <MemoryRouter initialEntries={[location]}>
+            <EmptyPosts subTitleMessage={messages.emptyMyPosts} />
+          </MemoryRouter>
+        </AppProvider>
+      </ResponsiveContext.Provider>
+    </IntlProvider>,
+  );
+}
+
+describe('EmptyPage', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      config: { provider: 'openedx', onlyVerifiedUsersCanPost: true },
+    });
+  });
+
+  it('should open the confirmation link dialogue box.', async () => {
+    renderComponent(`/${courseId}/my-posts/`);
+
+    const addPostButton = screen.getByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+
+    expect(screen.queryByText('Send confirmation link')).toBeInTheDocument();
+  });
+
+  it('dispatches sendAccountActivationEmail on confirm', async () => {
+    sendEmailForAccountActivation.mockResolvedValue({ success: true });
+    renderComponent(`/${courseId}/my-posts/`);
+
+    const addPostButton = screen.getByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+    const confirmButton = screen.getByText('Send confirmation link');
+    fireEvent.click(confirmButton);
+    expect(sendEmailForAccountActivation).toHaveBeenCalled();
+  });
+
+  it('should close the confirmation dialogue box.', async () => {
+    renderComponent(`/${courseId}/my-posts/`);
+
+    const addPostButton = screen.getByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+    const confirmButton = screen.getByText('Close');
+    fireEvent.click(confirmButton);
+
+    expect(sendEmailForAccountActivation).toHaveBeenCalled();
+
+    expect(screen.queryByText('Close')).not.toBeInTheDocument();
+  });
+});

src/discussions/content-unavailable/ContentUnavailable.jsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import propTypes from 'prop-types';
+
+import { Button } from '@openedx/paragon';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import ContentUnavailableIcon from '../../assets/ContentUnavailable';
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
+import { useIsOnTablet, useIsOnXLDesktop } from '../data/hooks';
+import messages from '../messages';
+
+const ContentUnavailable = ({ subTitleMessage }) => {
+  const intl = useIntl();
+  const isOnTabletorDesktop = useIsOnTablet();
+  const isOnXLDesktop = useIsOnXLDesktop();
+  const { courseId } = useSelector(selectCourseTabs);
+
+  const redirectToDashboard = useCallback(() => {
+    window.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/about`);
+  }, [courseId]);
+
+  return (
+    <div className="min-content-height justify-content-center align-items-center d-flex w-100 flex-column bg-white">
+      <div className={classNames('d-flex flex-column align-items-center', {
+        'content-unavailable-desktop': isOnTabletorDesktop || isOnXLDesktop,
+        'py-0 px-3': !isOnTabletorDesktop && !isOnXLDesktop,
+      })}
+      >
+        <ContentUnavailableIcon />
+        <h3 className="pt-3 font-weight-bold text-primary-500 text-center">
+          {intl.formatMessage(messages.contentUnavailableTitle)}
+        </h3>
+        <p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
+        <Button onClick={redirectToDashboard} variant="outline-dark" className="py-2 px-2.5">
+          {intl.formatMessage(messages.contentUnavailableAction)}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+ContentUnavailable.propTypes = {
+  subTitleMessage: propTypes.shape({
+    id: propTypes.string,
+    defaultMessage: propTypes.string,
+    description: propTypes.string,
+  }).isRequired,
+};
+
+export default React.memo(ContentUnavailable);

src/discussions/data/api.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -7,8 +5,10 @@ ensureConfig([
   'LMS_BASE_URL',
 ], 'Posts API service');
 
-export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
+export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v2/courses/`;
+export const getCourseSettingsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
 export const getDiscussionsConfigUrl = (courseId) => `${getCourseConfigApiUrl()}${courseId}/`;
+export const getDiscussionsSettingsUrl = (courseId) => `${getCourseSettingsApiUrl()}${courseId}/settings`;
 /**
  * Get discussions course config
  * @param {string} courseId
@@ -23,7 +23,7 @@ export async function getDiscussionsConfig(courseId) {
  * @param {string} courseId
  */
 export async function getDiscussionsSettings(courseId) {
-  const url = `${getDiscussionsConfigUrl(courseId)}settings`;
+  const url = `${getDiscussionsSettingsUrl(courseId)}`;
   const { data } = await getAuthenticatedHttpClient().get(url);
   return data;
 }

src/discussions/data/hooks.js

@@ -3,39 +3,48 @@ import {
   useContext, useEffect, useMemo, useRef, useState,
 } from 'react';
 
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+import isEmpty from 'lodash/isEmpty';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation, useRouteMatch } from 'react-router';
+import {
+  matchPath, useLocation, useMatch, useNavigate,
+} from 'react-router-dom';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
-import { breakpoints, useWindowSize } from '@edx/paragon';
 
-import { RequestStatus, Routes } from '../../data/constants';
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
+import { LOADED } from '../../components/NavigationBar/data/slice';
+import fetchTab from '../../components/NavigationBar/data/thunks';
+import { ContentActions, RequestStatus, Routes } from '../../data/constants';
 import { selectTopicsUnderCategory } from '../../data/selectors';
-import { fetchCourseBlocks } from '../../data/thunks';
-import { DiscussionContext } from '../common/context';
+import fetchCourseBlocks from '../../data/thunks';
+import DiscussionContext from '../common/context';
+import { selectTopics as selectInContextTopics } from '../in-context-topics/data/selectors';
+import fetchCourseTopicsV3 from '../in-context-topics/data/thunks';
+import PostCommentsContext from '../post-comments/postCommentsContext';
 import { clearRedirect } from '../posts/data';
 import { threadsLoadingStatus } from '../posts/data/selectors';
 import { selectTopics } from '../topics/data/selectors';
+import fetchCourseTopics from '../topics/data/thunks';
 import tourCheckpoints from '../tours/constants';
-import { selectTours } from '../tours/data/selectors';
+import selectTours from '../tours/data/selectors';
 import { updateTourShowStatus } from '../tours/data/thunks';
 import messages from '../tours/messages';
-import { discussionsPath } from '../utils';
+import { checkPermissions, discussionsPath } from '../utils';
+import { ContentSelectors } from './constants';
 import {
   selectAreThreadsFiltered,
+  selectDiscussionProvider,
   selectEnableInContext,
-  selectIsCourseAdmin,
-  selectIsCourseStaff,
   selectIsPostingEnabled,
-  selectLearnersTabEnabled,
+  selectIsUserLearner,
   selectPostThreadCount,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
-  selectUserIsStaff,
 } from './selectors';
-import { fetchCourseConfig } from './thunks';
+import fetchCourseConfig from './thunks';
 
 export function useTotalTopicThreadCount() {
   const topics = useSelector(selectTopics);
@@ -52,16 +61,18 @@ export function useTotalTopicThreadCount() {
 }
 
 export const useSidebarVisible = () => {
+  const location = useLocation();
   const enableInContext = useSelector(selectEnableInContext);
-  const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
-  const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
+  const isViewingTopics = useMatch(Routes.TOPICS.ALL);
+  const isViewingLearners = useMatch(`${Routes.LEARNERS.PATH}/*`);
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
   const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
-  const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
-  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));
+  const matchInContextTopicView = Routes.TOPICS.PATH.find((route) => matchPath({ path: `${route}/*` }, location.pathname));
+  const isInContextTopicsView = Boolean(matchInContextTopicView && enableInContext);
+  const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics || isViewingLearners));
 
-  if (isIncontextTopicsView) {
+  if (isInContextTopicsView) {
     return true;
   }
 
@@ -70,21 +81,52 @@ export const useSidebarVisible = () => {
 
 export function useCourseDiscussionData(courseId) {
   const dispatch = useDispatch();
-  const { authenticatedUser } = useContext(AppContext);
 
   useEffect(() => {
     async function fetchBaseData() {
       await dispatch(fetchCourseConfig(courseId));
-      await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
+      await dispatch(fetchTab(courseId));
     }
 
     fetchBaseData();
   }, [courseId]);
 }
 
+export function useCourseBlockData(courseId) {
+  const dispatch = useDispatch();
+  const { authenticatedUser } = useContext(AppContext);
+  const { isEnrolled, courseStatus } = useSelector(selectCourseTabs);
+  const isUserLearner = useSelector(selectIsUserLearner);
+
+  useEffect(() => {
+    async function fetchBaseData() {
+      if (courseStatus === LOADED && (!isUserLearner || isEnrolled)) {
+        await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
+      }
+    }
+
+    fetchBaseData();
+  }, [courseId, isEnrolled, courseStatus, isUserLearner]);
+}
+
+export function useTopicsData(courseId, enableInContextSidebar) {
+  const dispatch = useDispatch();
+  const enableInContext = useSelector(selectEnableInContext);
+  const provider = useSelector(selectDiscussionProvider);
+  const topics = useSelector(enableInContext ? selectInContextTopics : selectTopics);
+
+  useEffect(() => {
+    if (isEmpty(topics) && provider) {
+      dispatch((enableInContext || enableInContextSidebar)
+        ? fetchCourseTopicsV3(courseId)
+        : fetchCourseTopics(courseId));
+    }
+  }, [topics, provider, enableInContext, enableInContextSidebar]);
+}
+
 export function useRedirectToThread(courseId, enableInContextSidebar) {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const redirectToThread = useSelector(
@@ -101,19 +143,24 @@ export function useRedirectToThread(courseId, enableInContextSidebar) {
         postId: redirectToThread.threadId,
         topicId: redirectToThread.topicId,
       })(location);
-      history.push(newLocation);
+      navigate({ ...newLocation });
     }
   }, [redirectToThread]);
 }
 
 export function useIsOnDesktop() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.medium.minWidth;
+  return windowSize.width >= breakpoints.medium.maxWidth;
+}
+
+export function useIsOnTablet() {
+  const windowSize = useWindowSize();
+  return windowSize.width >= breakpoints.small.maxWidth;
 }
 
 export function useIsOnXLDesktop() {
   const windowSize = useWindowSize();
-  return windowSize.width >= breakpoints.extraLarge.minWidth;
+  return windowSize.width >= breakpoints.extraLarge.maxWidth;
 }
 
 /**
@@ -167,8 +214,6 @@ export const useAlertBannerVisible = (
   );
 };
 
-export const useShowLearnersTab = () => useSelector(selectLearnersTabEnabled);
-
 /**
  * React hook that gets the current topic ID from the current topic or category.
  * The topicId in the DiscussionContext only return the direct topicId from the URL.
@@ -192,20 +237,13 @@ export const useCurrentDiscussionTopic = () => {
 
 export const useUserPostingEnabled = () => {
   const isPostingEnabled = useSelector(selectIsPostingEnabled);
-  const isUserAdmin = useSelector(selectUserIsStaff);
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const isUserGroupTA = useSelector(selectUserIsGroupTa);
-  const isCourseAdmin = useSelector(selectIsCourseAdmin);
-  const isCourseStaff = useSelector(selectIsCourseStaff);
-  const isPrivileged = isUserAdmin || userHasModerationPrivileges || isUserGroupTA || isCourseAdmin || isCourseStaff;
+  const isPrivileged = userHasModerationPrivileges || isUserGroupTA;
 
   return (isPostingEnabled || isPrivileged);
 };
 
-function camelToConstant(string) {
-  return string.replace(/[A-Z]/g, (match) => `_${match}`).toUpperCase();
-}
-
 export const useTourConfiguration = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -230,7 +268,7 @@ export const useTourConfiguration = () => {
         enabled: tour && Boolean(tour.enabled && tour.showTour && !enableInContextSidebar),
         onDismiss: () => handleOnDismiss(tour.id),
         onEnd: () => handleOnEnd(tour.id),
-        checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
+        checkpoints: tourCheckpoints(intl)[tour.tourName],
       }
     ))
   ), [tours, enableInContextSidebar]);
@@ -258,3 +296,10 @@ export const useDebounce = (value, delay) => {
   );
   return debouncedValue;
 };
+
+export const useHasLikePermission = (contentType, id) => {
+  const { postType } = useContext(PostCommentsContext);
+  const content = { ...useSelector(ContentSelectors[contentType](id)), postType };
+
+  return checkPermissions(content, ContentActions.VOTE);
+};

src/discussions/data/hooks.test.jsx

@@ -8,22 +8,22 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
-import { DiscussionContext } from '../common/context';
+import executeThunk from '../../test-utils';
+import DiscussionContext from '../common/context';
 import { getCourseConfigApiUrl } from './api';
 import { useCurrentDiscussionTopic, useUserPostingEnabled } from './hooks';
-import { fetchCourseConfig } from './thunks';
+import fetchCourseConfig from './thunks';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const courseConfigApiUrl = getCourseConfigApiUrl();
 let store;
 let axiosMock;
 
-const generateApiResponse = (isPostingEnabled, isCourseAdmin = false) => ({
+const generateApiResponse = (isPostingEnabled, hasModerationPrivileges = false) => ({
   isPostingEnabled,
-  hasModerationPrivileges: false,
+  hasModerationPrivileges,
   isGroupTa: false,
-  isCourseAdmin,
+  isCourseAdmin: false,
   isCourseStaff: false,
   isUserAdmin: false,
 });
@@ -160,7 +160,7 @@ describe('Hooks', () => {
         expect(queryByText('false')).toBeInTheDocument();
       });
 
-      test('when posting is not disabled and Role is not Learner return true', async () => {
+      test('when posting is disabled and Role is not Learner return true', async () => {
         axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
           .reply(200, generateApiResponse(false, true));
         await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);

src/discussions/data/selectors.js

@@ -1,5 +1,8 @@
-/* eslint-disable import/prefer-default-export */
+import { createSelector } from '@reduxjs/toolkit';
+
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
 import { PostsStatusFilter, ThreadType } from '../../data/constants';
+import { isCourseStatusValid } from '../utils';
 
 export const selectAnonymousPostingConfig = state => ({
   allowAnonymous: state.config.allowAnonymous,
@@ -14,8 +17,6 @@ export const selectUserIsGroupTa = state => state.config.isGroupTa;
 
 export const selectConfigLoadingStatus = state => state.config.status;
 
-export const selectLearnersTabEnabled = state => state.config.learnersTabEnabled;
-
 export const selectUserRoles = state => state.config.userRoles;
 
 export const selectDivisionSettings = state => state.config.settings;
@@ -30,6 +31,25 @@ export const selectEnableInContext = state => state.config.enableInContext;
 
 export const selectIsPostingEnabled = state => state.config.isPostingEnabled;
 
+export const selectIsNotifyAllLearnersEnabled = state => state.config.isNotifyAllLearnersEnabled;
+
+export const selectCaptchaSettings = state => state.config.captchaSettings;
+
+export const selectIsEmailVerified = state => state.config.isEmailVerified;
+
+export const selectContentCreationRateLimited = state => state.config.contentCreationRateLimited;
+
+export const selectOnlyVerifiedUsersCanPost = state => state.config.onlyVerifiedUsersCanPost;
+
+export const selectConfirmEmailStatus = state => state.threads.confirmEmailStatus;
+
+export const selectPostStatus = state => state.comments.postStatus;
+
+export const selectShouldShowEmailConfirmation = createSelector(
+  [selectIsEmailVerified, selectOnlyVerifiedUsersCanPost],
+  (isEmailVerified, onlyVerifiedUsersCanPost) => !isEmailVerified && onlyVerifiedUsersCanPost,
+);
+
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,
@@ -63,3 +83,29 @@ export function selectTopicThreadCount(topicId) {
 export function selectPostThreadCount(state) {
   return state.threads.totalThreads;
 }
+
+export const selectIsUserLearner = createSelector(
+  selectUserHasModerationPrivileges,
+  selectUserIsGroupTa,
+  selectUserIsStaff,
+  selectIsCourseAdmin,
+  selectIsCourseStaff,
+  selectCourseTabs,
+  (
+    userHasModerationPrivileges,
+    userIsGroupTa,
+    userIsStaff,
+    userIsCourseAdmin,
+    userIsCourseStaff,
+    { courseStatus },
+  ) => (
+    (
+      !userHasModerationPrivileges
+      && !userIsGroupTa
+      && !userIsStaff
+      && !userIsCourseAdmin
+      && !userIsCourseStaff
+      && isCourseStatusValid(courseStatus)
+    ) || false
+  ),
+);

src/discussions/data/slices.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign,import/prefer-default-export */
 import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from '../../data/constants';
@@ -16,7 +15,6 @@ const configSlice = createSlice({
     isCourseAdmin: false,
     isCourseStaff: false,
     isUserAdmin: false,
-    learnersTabEnabled: false,
     isPostingEnabled: false,
     settings: {
       divisionScheme: 'none',
@@ -24,24 +22,46 @@ const configSlice = createSlice({
       dividedInlineDiscussions: [],
       dividedCourseWideDiscussions: [],
     },
+    captchaSettings: {
+      enabled: false,
+      siteKey: '',
+    },
     editReasons: [],
     postCloseReasons: [],
     enableInContext: false,
+    isEmailVerified: false,
+    contentCreationRateLimited: false,
   },
   reducers: {
-    fetchConfigRequest: (state) => {
-      state.status = RequestStatus.IN_PROGRESS;
-    },
+    fetchConfigRequest: (state) => (
+      {
+        ...state,
+        status: RequestStatus.IN_PROGRESS,
+      }
+    ),
     fetchConfigSuccess: (state, { payload }) => {
-      state.status = RequestStatus.SUCCESSFUL;
-      Object.assign(state, payload);
-    },
-    fetchConfigFailed: (state) => {
-      state.status = RequestStatus.FAILED;
-    },
-    fetchConfigDenied: (state) => {
-      state.status = RequestStatus.DENIED;
+      const newState = Object.assign(state, payload);
+      newState.status = RequestStatus.SUCCESSFUL;
+      return newState;
     },
+    fetchConfigFailed: (state) => (
+      {
+        ...state,
+        status: RequestStatus.FAILED,
+      }
+    ),
+    fetchConfigDenied: (state) => (
+      {
+        ...state,
+        status: RequestStatus.DENIED,
+      }
+    ),
+    setContentCreationRateLimited: (state) => (
+      {
+        ...state,
+        contentCreationRateLimited: true,
+      }
+    ),
   },
 });
 
@@ -50,6 +70,7 @@ export const {
   fetchConfigFailed,
   fetchConfigRequest,
   fetchConfigSuccess,
+  setContentCreationRateLimited,
 } = configSlice.actions;
 
 export const configReducer = configSlice.reducer;

src/discussions/data/thunks.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
@@ -19,7 +18,7 @@ import {
  * @param {string} courseId The course ID for the course to fetch config for.
  * @returns {(function(*): Promise<void>)|*}
  */
-export function fetchCourseConfig(courseId) {
+export default function fetchCourseConfig(courseId) {
   return async (dispatch) => {
     try {
       let learnerSort = LearnersOrdering.BY_LAST_ACTIVITY;

src/discussions/discussions-home/DiscussionContent.jsx

@@ -1,38 +1,46 @@
 import React, { lazy, Suspense } from 'react';
 
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import { useSelector } from 'react-redux';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router-dom';
 
 import Spinner from '../../components/Spinner';
-import { Routes } from '../../data/constants';
+import { Routes as ROUTES } from '../../data/constants';
+import { selectCaptchaSettings } from '../data/selectors';
 
 const PostEditor = lazy(() => import('../posts/post-editor/PostEditor'));
 const PostCommentsView = lazy(() => import('../post-comments/PostCommentsView'));
 
 const DiscussionContent = () => {
   const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
+  const captchaSettings = useSelector(selectCaptchaSettings);
 
   return (
-    <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center">
-      <div className="d-flex flex-column w-100">
-        <Suspense fallback={(<Spinner />)}>
-          {postEditorVisible ? (
-            <Route path={Routes.POSTS.NEW_POST}>
-              <PostEditor />
-            </Route>
-          ) : (
-            <Switch>
-              <Route path={Routes.POSTS.EDIT_POST}>
-                <PostEditor editExisting />
-              </Route>
-              <Route path={Routes.COMMENTS.PATH}>
-                <PostCommentsView />
-              </Route>
-            </Switch>
-          )}
-        </Suspense>
+    <GoogleReCaptchaProvider
+      reCaptchaKey={captchaSettings.siteKey}
+      useEnterprise
+    >
+      <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center overflow-auto">
+        <div className="d-flex flex-column w-100">
+          <Suspense fallback={(<Spinner />)}>
+            <Routes>
+              {postEditorVisible ? (
+                <Route path={ROUTES.POSTS.NEW_POST} element={<PostEditor />} />
+              ) : (
+                <>
+                  {ROUTES.POSTS.EDIT_POST.map(route => (
+                    <Route key={route} path={route} element={<PostEditor editExisting />} />
+                  ))}
+                  {ROUTES.COMMENTS.PATH.map(route => (
+                    <Route key={route} path={route} element={<PostCommentsView />} />
+                  ))}
+                </>
+              )}
+            </Routes>
+          </Suspense>
+        </div>
       </div>
-    </div>
+    </GoogleReCaptchaProvider>
   );
 };
 

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -3,19 +3,18 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
+import { useWindowSize } from '@openedx/paragon';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
-  Redirect, Route, Switch, useLocation,
-} from 'react-router';
-
-import { useWindowSize } from '@edx/paragon';
+  Navigate, Route, Routes,
+} from 'react-router-dom';
 
 import Spinner from '../../components/Spinner';
-import { RequestStatus, Routes } from '../../data/constants';
-import { DiscussionContext } from '../common/context';
+import { RequestStatus, Routes as ROUTES } from '../../data/constants';
+import DiscussionContext from '../common/context';
 import {
-  useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
+  useContainerSize, useIsOnDesktop, useIsOnTablet, useIsOnXLDesktop,
 } from '../data/hooks';
 import { selectConfigLoadingStatus, selectEnableInContext } from '../data/selectors';
 
@@ -27,13 +26,12 @@ const PostsView = lazy(() => import('../posts/PostsView'));
 const LegacyTopicsView = lazy(() => import('../topics/TopicsView'));
 
 const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
-  const location = useLocation();
   const isOnDesktop = useIsOnDesktop();
   const isOnXLDesktop = useIsOnXLDesktop();
+  const isOnTablet = useIsOnTablet();
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const enableInContext = useSelector(selectEnableInContext);
   const configStatus = useSelector(selectConfigLoadingStatus);
-  const redirectToLearnersTab = useShowLearnersTab();
   const sidebarRef = useRef(null);
   const postActionBarHeight = useContainerSize(postActionBarRef);
   const { height: windowHeight } = useWindowSize();
@@ -56,53 +54,65 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
         'd-flex overflow-auto box-shadow-centered-1': displaySidebar,
         'w-100': !isOnDesktop,
         'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
+        'sidebar-tablet-width': isOnTablet && !isOnDesktop,
         'w-25 sidebar-XL-width': isOnXLDesktop,
         'min-content-height': !enableInContextSidebar,
       })}
       data-testid="sidebar"
     >
       <Suspense fallback={(<Spinner />)}>
-        <Switch>
+        <Routes>
           {enableInContext && !enableInContextSidebar && (
-          <Route
-            path={Routes.TOPICS.ALL}
-            component={InContextTopicsView}
-            exact
-          />
+            <Route
+              path={ROUTES.TOPICS.ALL}
+              element={<InContextTopicsView />}
+            />
           )}
           {enableInContext && !enableInContextSidebar && (
-          <Route
-            path={[
-              Routes.TOPICS.TOPIC,
-              Routes.TOPICS.CATEGORY,
-              Routes.TOPICS.TOPIC_POST,
-              Routes.TOPICS.TOPIC_POST_EDIT,
-            ]}
-            component={TopicPostsView}
-            exact
-          />
-          )}
-          <Route
-            path={[Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS, Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
-            component={PostsView}
-          />
-          <Route path={Routes.TOPICS.PATH} component={LegacyTopicsView} />
-          {redirectToLearnersTab && (
-          <Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
-          )}
-          {redirectToLearnersTab && (
-          <Route path={Routes.LEARNERS.PATH} component={LearnersView} />
+            [
+              ROUTES.TOPICS.TOPIC,
+              ROUTES.TOPICS.CATEGORY,
+              ROUTES.TOPICS.TOPIC_POST,
+              ROUTES.TOPICS.TOPIC_POST_EDIT,
+            ].map((route) => (
+              <Route
+                key={route}
+                path={route}
+                element={<TopicPostsView />}
+              />
+            ))
           )}
+          {[
+            ROUTES.POSTS.ALL_POSTS,
+            ROUTES.POSTS.EDIT_ALL_POSTS,
+            ROUTES.POSTS.MY_POSTS,
+            ROUTES.POSTS.EDIT_MY_POSTS,
+            ROUTES.TOPICS.CATEGORY,
+            ROUTES.TOPICS.CATEGORY_POST,
+            ROUTES.TOPICS.CATEGORY_POST_EDIT,
+            ROUTES.TOPICS.TOPIC,
+            ROUTES.TOPICS.TOPIC_POST,
+            ROUTES.TOPICS.TOPIC_POST_EDIT,
+          ].map((route) => (
+            <Route
+              key={route}
+              path={route}
+              element={<PostsView />}
+            />
+          ))}
+          {ROUTES.TOPICS.PATH.map(path => (
+            <Route key={path} path={path} element={<LegacyTopicsView />} />
+          ))}
+          {
+            [ROUTES.LEARNERS.POSTS, ROUTES.LEARNERS.POSTS_EDIT].map((route) => (
+              <Route key={route} path={route} element={<LearnerPostsView />} />
+            ))
+          }
+          <Route path={ROUTES.LEARNERS.PATH} element={<LearnersView />} />
           {configStatus === RequestStatus.SUCCESSFUL && (
-          <Redirect
-            from={Routes.DISCUSSIONS.PATH}
-            to={{
-              ...location,
-              pathname: Routes.POSTS.ALL_POSTS,
-            }}
-          />
+            <Route path={`${ROUTES.DISCUSSIONS.PATH}/*`} element={<Navigate to="posts" replace />} />
           )}
-        </Switch>
+        </Routes>
       </Suspense>
     </div>
   );

src/discussions/discussions-home/DiscussionSidebar.test.jsx

@@ -1,9 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
-import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
 
 import { initializeMockApp } from '@edx/frontend-platform';
@@ -11,7 +10,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
-import { DiscussionContext } from '../common/context';
+import DiscussionContext from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
 import { getThreadsApiUrl } from '../posts/data/api';
 import DiscussionSidebar from './DiscussionSidebar';
@@ -28,8 +27,8 @@ function renderComponent(displaySidebar = true, location = `/${courseId}/`) {
   const wrapper = render(
     <IntlProvider locale="en">
       <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <AppProvider store={store}>
-          <DiscussionContext.Provider value={{ courseId }}>
+        <AppProvider store={store} wrapWithRouter={false}>
+          <DiscussionContext.Provider value={{ courseId, page: 'posts' }}>
             <MemoryRouter initialEntries={[location]}>
               <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={null} />
             </MemoryRouter>
@@ -85,7 +84,7 @@ describe('DiscussionSidebar', () => {
         },
       })]);
     renderComponent();
-    await act(async () => expect(await screen.findAllByText('Thread by other users')).toBeTruthy());
+    await screen.findAllByText('Thread by other users');
     expect(screen.queryByText('Thread by abc123')).not.toBeInTheDocument();
   });
 
@@ -100,7 +99,7 @@ describe('DiscussionSidebar', () => {
         },
       })]);
     renderComponent();
-    await act(async () => expect(await screen.findAllByText('Thread by other users')).toBeTruthy());
+    await screen.findAllByText('Thread by other users');
     expect(screen.queryByText('Thread by abc123')).not.toBeInTheDocument();
     expect(container.querySelectorAll('.discussion-post')).toHaveLength(postCount);
   });

src/discussions/discussions-home/DiscussionsConfirmEmailBanner.jsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useState } from 'react';
+
+import {
+  Button,
+  Image,
+  MarketingModal,
+  ModalDialog,
+  PageBanner,
+} from '@openedx/paragon';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import confirmEmailSVG from '../../assets/confirm-email.svg';
+import { selectIsEmailVerified } from '../data/selectors';
+import { sendAccountActivationEmail } from '../posts/data/thunks';
+import messages from './messages';
+
+const DiscussionsConfirmEmailBanner = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const isEmailVerified = useSelector(selectIsEmailVerified);
+  const [showPageBanner, setShowPageBanner] = useState(!isEmailVerified);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const closePageBanner = useCallback(() => setShowPageBanner(false), [setShowPageBanner]);
+  const closeConfirmModal = useCallback(() => setShowConfirmModal(false), [setShowConfirmModal]);
+  const openConfirmModal = useCallback(() => setShowConfirmModal(true), [setShowConfirmModal]);
+
+  const handleConfirmNowClick = useCallback(() => {
+    dispatch(sendAccountActivationEmail());
+    openConfirmModal();
+    closePageBanner();
+  }, [dispatch, openConfirmModal, closePageBanner]);
+
+  const handleVerifiedClick = useCallback(() => {
+    closeConfirmModal();
+    closePageBanner();
+  }, [closeConfirmModal, closePageBanner]);
+
+  if (isEmailVerified) { return null; }
+
+  return (
+    <>
+      <PageBanner show={showPageBanner} dismissible onDismiss={closePageBanner}>
+        {intl.formatMessage(messages.confirmEmailTextReminderBanner, {
+          confirmNowButton: (
+            <Button
+              className="confirm-email-now-button"
+              variant="link"
+              size="inline"
+              onClick={handleConfirmNowClick}
+            >
+              {intl.formatMessage(messages.confirmNowButton)}
+            </Button>
+          ),
+        })}
+      </PageBanner>
+      <MarketingModal
+        title=""
+        isOpen={showConfirmModal}
+        onClose={closeConfirmModal}
+        hasCloseButton={false}
+        heroNode={(
+          <ModalDialog.Hero className="bg-gray-300">
+            <Image
+              className="m-auto"
+              src={confirmEmailSVG}
+              alt={intl.formatMessage(messages.confirmEmailImageAlt)}
+            />
+          </ModalDialog.Hero>
+        )}
+        footerNode={(
+          <Button className="mx-auto my-3" variant="danger" onClick={handleVerifiedClick}>
+            {intl.formatMessage(messages.verifiedConfirmEmailButton)}
+          </Button>
+        )}
+      >
+        <h2 className="text-center p-3 h1">{intl.formatMessage(messages.confirmEmailModalHeader)}</h2>
+        <p className="text-center">{intl.formatMessage(messages.confirmEmailModalBody)}</p>
+      </MarketingModal>
+    </>
+  );
+};
+
+export default DiscussionsConfirmEmailBanner;

src/discussions/discussions-home/DiscussionsConfirmEmailBanner.test.jsx

@@ -0,0 +1,111 @@
+import {
+  fireEvent, render, screen, waitFor,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { act } from 'react-dom/test-utils';
+import { IntlProvider } from 'react-intl';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import { getConfig, initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import executeThunk from '../../test-utils';
+import { getDiscussionsConfigUrl } from '../data/api';
+import fetchCourseConfig from '../data/thunks';
+import DiscussionsConfirmEmailBanner from './DiscussionsConfirmEmailBanner';
+import messages from './messages';
+
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+let axiosMock;
+let store;
+
+function renderComponent() {
+  render(
+    <IntlProvider locale="en">
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <AppProvider store={store}>
+          <DiscussionsConfirmEmailBanner />
+        </AppProvider>
+      </ResponsiveContext.Provider>
+    </IntlProvider>,
+  );
+}
+
+describe('DiscussionsConfirmEmailBanner', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    store = initializeStore();
+  });
+
+  describe('render', () => {
+    it('does not show when email is verified', async () => {
+      axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, { isEmailVerified: true });
+      await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+      renderComponent();
+      expect(screen.queryByRole('alert')).toBeNull();
+    });
+
+    describe('when email is unverified', () => {
+      let resendEmailUrl;
+      beforeEach(async () => {
+        resendEmailUrl = `${getConfig().LMS_BASE_URL}/api/send_account_activation_email`;
+        axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, { isEmailVerified: false });
+        axiosMock.onPost(resendEmailUrl).reply(200);
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        renderComponent();
+      });
+
+      it('shows banner and confirm now button', async () => {
+        const banner = await screen.findByRole('alert');
+        expect(banner.textContent).toContain('Remember to confirm');
+        const confirmButton = await screen.findByRole('button', { name: messages.confirmNowButton.defaultMessage });
+        expect(confirmButton).toBeInTheDocument();
+      });
+
+      it('opens modal, closes banner, and calls resend email API when confirm now button is clicked', async () => {
+        const confirmButton = await screen.findByRole('button', { name: messages.confirmNowButton.defaultMessage });
+        await act(async () => {
+          fireEvent.click(confirmButton);
+        });
+        await waitFor(() => {
+          expect(screen.getByRole('dialog')).toBeInTheDocument();
+          expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+          expect(axiosMock.history.post).toHaveLength(1);
+          expect(axiosMock.history.post[0].url).toBe(resendEmailUrl);
+        });
+      });
+
+      it('shows modal header, body, image, and confirm email button and closes modal and banner on click', async () => {
+        const confirmButton = await screen.findByRole('button', { name: messages.confirmNowButton.defaultMessage });
+        await act(async () => {
+          fireEvent.click(confirmButton);
+        });
+        await waitFor(() => {
+          expect(screen.getByText(messages.confirmEmailModalHeader.defaultMessage)).toBeInTheDocument();
+          expect(screen.getByText(messages.confirmEmailModalBody.defaultMessage)).toBeInTheDocument();
+          expect(screen.getByRole('img', { name: messages.confirmEmailImageAlt.defaultMessage })).toBeInTheDocument();
+
+          const verifyButton = screen.getByRole('button', { name: messages.verifiedConfirmEmailButton.defaultMessage });
+          expect(verifyButton).toBeInTheDocument();
+          act(() => {
+            fireEvent.click(verifyButton);
+          });
+        });
+        await waitFor(() => {
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+          expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        });
+      });
+    });
+  });
+});

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -1,29 +1,33 @@
-/* eslint-disable react/jsx-no-constructed-context-values */
-import React, { lazy, Suspense, useRef } from 'react';
+import React, {
+  lazy, Suspense, useMemo, useRef,
+} from 'react';
 
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
-  Route, Switch, useLocation, useRouteMatch,
-} from 'react-router';
+  matchPath, Route, Routes, useLocation, useMatch,
+} from 'react-router-dom';
 
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { Spinner } from '../../components';
-import { selectCourseTabs } from '../../components/NavigationBar/data/selectors';
-import { ALL_ROUTES, DiscussionProvider, Routes } from '../../data/constants';
-import { DiscussionContext } from '../common/context';
+import selectCourseTabs from '../../components/NavigationBar/data/selectors';
+import { ALL_ROUTES, DiscussionProvider, Routes as ROUTES } from '../../data/constants';
+import DiscussionContext from '../common/context';
+import ContentUnavailable from '../content-unavailable/ContentUnavailable';
 import {
-  useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useShowLearnersTab, useSidebarVisible,
+  useCourseBlockData, useCourseDiscussionData, useIsOnTablet, useRedirectToThread, useSidebarVisible, useTopicsData,
 } from '../data/hooks';
-import { selectDiscussionProvider, selectEnableInContext } from '../data/selectors';
-import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts';
+import { selectDiscussionProvider, selectEnableInContext, selectIsUserLearner } from '../data/selectors';
+import { EmptyLearners, EmptyTopics } from '../empty-posts';
+import EmptyPosts from '../empty-posts/EmptyPosts';
 import { EmptyTopic as InContextEmptyTopics } from '../in-context-topics/components';
 import messages from '../messages';
 import { selectPostEditorVisible } from '../posts/data/selectors';
+import { isCourseStatusValid } from '../utils';
 import useFeedbackWrapper from './FeedbackWrapper';
 
-const Footer = lazy(() => import('@edx/frontend-component-footer'));
+const FooterSlot = lazy(() => import('@edx/frontend-component-footer').then(module => ({ default: module.FooterSlot })));
 const PostActionsBar = lazy(() => import('../posts/post-actions-bar/PostActionsBar'));
 const CourseTabsNavigation = lazy(() => import('../../components/NavigationBar/CourseTabsNavigation'));
 const LegacyBreadcrumbMenu = lazy(() => import('../navigation/breadcrumb-menu/LegacyBreadcrumbMenu'));
@@ -32,6 +36,7 @@ const DiscussionsProductTour = lazy(() => import('../tours/DiscussionsProductTou
 const DiscussionsRestrictionBanner = lazy(() => import('./DiscussionsRestrictionBanner'));
 const DiscussionContent = lazy(() => import('./DiscussionContent'));
 const DiscussionSidebar = lazy(() => import('./DiscussionSidebar'));
+const DiscussionsConfirmEmailBanner = lazy(() => import('./DiscussionsConfirmEmailBanner'));
 
 const DiscussionsHome = () => {
   const location = useLocation();
@@ -39,11 +44,15 @@ const DiscussionsHome = () => {
   const postEditorVisible = useSelector(selectPostEditorVisible);
   const provider = useSelector(selectDiscussionProvider);
   const enableInContext = useSelector(selectEnableInContext);
-  const { courseNumber, courseTitle, org } = useSelector(selectCourseTabs);
-  const { params: { page } } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);
-  const { params } = useRouteMatch(ALL_ROUTES);
-  const isRedirectToLearners = useShowLearnersTab();
-  const isOnDesktop = useIsOnDesktop();
+  const {
+    courseNumber, courseTitle, org, courseStatus, isEnrolled,
+  } = useSelector(selectCourseTabs);
+  const isUserLearner = useSelector(selectIsUserLearner);
+  const pageParams = useMatch(ROUTES.COMMENTS.PAGE)?.params;
+  const page = pageParams?.page || null;
+  const matchPattern = ALL_ROUTES.find((route) => matchPath({ path: route }, location.pathname));
+  const { params } = useMatch(matchPattern);
+  const isOnTabletorDesktop = useIsOnTablet();
   let displaySidebar = useSidebarVisible();
   const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
   const {
@@ -52,88 +61,128 @@ const DiscussionsHome = () => {
 
   useCourseDiscussionData(courseId);
   useRedirectToThread(courseId, enableInContextSidebar);
+  useCourseBlockData(courseId);
+  useTopicsData(courseId, enableInContextSidebar);
   useFeedbackWrapper();
   /*  Display the content area if we are currently viewing/editing a post or creating one.
   If the window is larger than a particular size, show the sidebar for navigating between posts/topics.
   However, for smaller screens or embeds, only show the sidebar if the content area isn't displayed. */
   const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId));
-  if (displayContentArea) { displaySidebar = isOnDesktop; }
+  if (displayContentArea) { displaySidebar = isOnTabletorDesktop; }
+
+  const discussionContextValue = useMemo(() => ({
+    page,
+    courseId,
+    postId,
+    topicId,
+    enableInContextSidebar,
+    category,
+    learnerUsername,
+  }));
 
   return (
     <Suspense fallback={(<Spinner />)}>
-      <DiscussionContext.Provider value={{
-        page,
-        courseId,
-        postId,
-        topicId,
-        enableInContextSidebar,
-        category,
-        learnerUsername,
-      }}
-      >
+      <DiscussionContext.Provider value={discussionContextValue}>
         {!enableInContextSidebar && (
+        <>
+          <DiscussionsConfirmEmailBanner />
           <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />
+        </>
         )}
-        <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
-          {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
-          <div
-            className={classNames('header-action-bar', {
-              'shadow-none border-light-300 border-bottom': enableInContextSidebar,
-            })}
-            ref={postActionBarRef}
-          >
+        <main className="container-fluid d-flex flex-column p-0 w-100 font-size" id="main" tabIndex="-1">
+          {!enableInContextSidebar && <CourseTabsNavigation />}
+          {(isEnrolled || !isUserLearner) && (
             <div
-              className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-                'pl-4 pr-3 py-0': enableInContextSidebar,
+              className={classNames('header-action-bar bg-white position-sticky', {
+                'shadow-none border-light-300 border-bottom': enableInContextSidebar,
               })}
+              ref={postActionBarRef}
             >
-              {!enableInContextSidebar && (
-                <NavigationBar />
-              )}
-              <PostActionsBar />
+              <div className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
+                'pl-4 pr-2 py-0': enableInContextSidebar,
+              })}
+              >
+                {!enableInContextSidebar && (<NavigationBar />)}
+                <PostActionsBar />
+              </div>
+              <DiscussionsRestrictionBanner />
             </div>
-            <DiscussionsRestrictionBanner />
-          </div>
+          )}
           {provider === DiscussionProvider.LEGACY && (
-          <Suspense fallback={(<Spinner />)}>
-            <Route
-              path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
-              component={LegacyBreadcrumbMenu}
-            />
-          </Suspense>
-          )}
-          <div className="d-flex flex-row position-relative">
             <Suspense fallback={(<Spinner />)}>
-              <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
+              <Routes>
+                {[
+                  ROUTES.TOPICS.CATEGORY,
+                  ROUTES.TOPICS.CATEGORY_POST,
+                  ROUTES.TOPICS.CATEGORY_POST_EDIT,
+                  ROUTES.TOPICS.TOPIC,
+                  ROUTES.TOPICS.TOPIC_POST,
+                  ROUTES.TOPICS.TOPIC_POST_EDIT,
+                ].map((route) => (
+                  <Route
+                    key={route}
+                    path={route}
+                    element={<LegacyBreadcrumbMenu />}
+                  />
+                ))}
+              </Routes>
             </Suspense>
-            {displayContentArea && (
-              <Suspense fallback={(<Spinner />)}>
-                <DiscussionContent />
-              </Suspense>
-            )}
-            {!displayContentArea && (
-            <Switch>
-              <Route
-                path={Routes.TOPICS.PATH}
-                component={(enableInContext || enableInContextSidebar) ? InContextEmptyTopics : EmptyTopics}
-              />
-              <Route
-                path={Routes.POSTS.MY_POSTS}
-                render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyMyPosts} />}
-              />
-              <Route
-                path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.LEARNERS.POSTS]}
-                render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyAllPosts} />}
-              />
-              {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} />}
-            </Switch>
-            )}
-          </div>
-          {!enableInContextSidebar && (
-            <DiscussionsProductTour />
           )}
+          {isCourseStatusValid(courseStatus) && (
+            !isEnrolled && isUserLearner ? (
+              <Suspense fallback={(<Spinner />)}>
+                <Routes>
+                  {ALL_ROUTES.map((route) => (
+                    <Route
+                      key={route}
+                      path={route}
+                      element={(<ContentUnavailable subTitleMessage={messages.contentUnavailableSubTitle} />)}
+                    />
+                  ))}
+                </Routes>
+              </Suspense>
+            ) : (
+              <div className="d-flex flex-row position-relative">
+                <Suspense fallback={(<Spinner />)}>
+                  <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
+                </Suspense>
+                {displayContentArea && (
+                  <Suspense fallback={(<Spinner />)}>
+                    <DiscussionContent />
+                  </Suspense>
+                )}
+                {!displayContentArea && (
+                  <Routes>
+                    <>
+                      {ROUTES.TOPICS.PATH.map(route => (
+                        <Route
+                          key={route}
+                          path={`${route}/*`}
+                          element={(enableInContext || enableInContextSidebar)
+                            ? <InContextEmptyTopics /> : <EmptyTopics />}
+                        />
+                      ))}
+                      <Route
+                        path={ROUTES.POSTS.MY_POSTS}
+                        element={<EmptyPosts subTitleMessage={messages.emptyMyPosts} />}
+                      />
+                      {[`${ROUTES.POSTS.PATH}/*`, ROUTES.POSTS.ALL_POSTS, ROUTES.LEARNERS.POSTS].map((route) => (
+                        <Route
+                          key={route}
+                          path={route}
+                          element={<EmptyPosts subTitleMessage={messages.emptyAllPosts} />}
+                        />
+                      ))}
+                      <Route path={ROUTES.LEARNERS.PATH} element={<EmptyLearners />} />
+                    </>
+                  </Routes>
+                )}
+              </div>
+            )
+          )}
+          {!enableInContextSidebar && isEnrolled && (<DiscussionsProductTour />)}
         </main>
-        {!enableInContextSidebar && <Footer />}
+        {!enableInContextSidebar && <FooterSlot />}
       </DiscussionContext.Provider>
     </Suspense>
   );

src/discussions/discussions-home/DiscussionsHome.test.jsx

@@ -5,7 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter } from 'react-router';
+import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
 
 import { initializeMockApp } from '@edx/frontend-platform';
@@ -13,24 +13,24 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { getCourseMetadataApiUrl } from '../../components/NavigationBar/data/api';
-import { fetchTab } from '../../components/NavigationBar/data/thunks';
+import fetchTab from '../../components/NavigationBar/data/thunks';
 import { getApiBaseUrl } from '../../data/constants';
 import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
+import executeThunk from '../../test-utils';
 import { getCourseConfigApiUrl, getDiscussionsConfigUrl } from '../data/api';
-import { fetchCourseConfig } from '../data/thunks';
+import fetchCourseConfig from '../data/thunks';
 import { getCourseTopicsApiUrl } from '../in-context-topics/data/api';
-import { fetchCourseTopicsV3 } from '../in-context-topics/data/thunks';
+import fetchCourseTopicsV3 from '../in-context-topics/data/thunks';
 import navigationBarMessages from '../navigation/navigation-bar/messages';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
-import { fetchCourseTopics } from '../topics/data/thunks';
+import fetchCourseTopics from '../topics/data/thunks';
 import DiscussionsHome from './DiscussionsHome';
 
-import '../posts/data/__factories__/threads.factory';
-import '../in-context-topics/data/__factories__/inContextTopics.factory';
-import '../topics/data/__factories__/topics.factory';
 import '../../components/NavigationBar/data/__factories__/navigationBar.factory';
+import '../in-context-topics/data/__factories__/inContextTopics.factory';
+import '../posts/data/__factories__/threads.factory';
+import '../topics/data/__factories__/topics.factory';
 
 const courseConfigApiUrl = getCourseConfigApiUrl();
 let axiosMock;
@@ -42,7 +42,7 @@ function renderComponent(location = `/${courseId}/`) {
   const wrapper = render(
     <IntlProvider locale="en">
       <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <AppProvider store={store}>
+        <AppProvider store={store} wrapWithRouter={false}>
           <MemoryRouter initialEntries={[location]}>
             <DiscussionsHome />
           </MemoryRouter>
@@ -65,6 +65,8 @@ describe('DiscussionsHome', () => {
     });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     store = initializeStore();
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: true })));
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
   });
 
   async function setUpV1TopicsMockResponse() {
@@ -88,8 +90,7 @@ describe('DiscussionsHome', () => {
 
   test('full view should hide close button', async () => {
     renderComponent(`/${courseId}/topics`);
-    expect(screen.queryByText(navigationBarMessages.allTopics.defaultMessage))
-      .toBeInTheDocument();
+    await screen.findByText(navigationBarMessages.allTopics.defaultMessage);
     expect(screen.queryByRole('button', { name: 'Close' }))
       .not
       .toBeInTheDocument();
@@ -142,7 +143,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    expect(screen.queryByText('Add a post')).toBeInTheDocument();
+    await screen.findByText('Add a post');
   });
 
   it.each([
@@ -166,7 +167,7 @@ describe('DiscussionsHome', () => {
     await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-    expect(screen.queryByText(result)).toBeInTheDocument();
+    await screen.findByText(result);
   });
 
   it.each([
@@ -193,25 +194,29 @@ describe('DiscussionsHome', () => {
       await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
       await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
-      expect(screen.queryByText('No topic selected')).toBeInTheDocument();
+      await screen.findByText('No topic selected');
     },
   );
 
   it('should display empty page message for empty learners list', async () => {
-    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
-      learners_tab_enabled: true,
-    });
+    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {});
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/learners`);
 
-    expect(screen.queryByText('Nothing here yet')).toBeInTheDocument();
+    await screen.findByText('Nothing here yet');
   });
 
   it('should display post editor form when click on add a post button for posts', async () => {
+    axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
+      enableInContext: true, provider: 'openedx', hasModerationPrivileges: true, isEmailVerified: true,
+    });
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/my-posts`);
+
+    const addPost = await screen.findByText('Add a post');
+
     await act(async () => {
-      fireEvent.click(screen.queryByText('Add a post'));
+      fireEvent.click(addPost);
     });
 
     await waitFor(() => expect(container.querySelector('.post-form')).toBeInTheDocument());
@@ -219,15 +224,15 @@ describe('DiscussionsHome', () => {
 
   it('should display post editor form when click on add a post button in legacy topics view', async () => {
     axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
-      enable_in_context: false,
+      enable_in_context: false, hasModerationPrivileges: true, isEmailVerified: true, provider: 'legacy',
     });
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await renderComponent(`/${courseId}/topics`);
 
-    expect(screen.queryByText('Nothing here yet')).toBeInTheDocument();
+    await screen.findByText('Nothing here yet');
 
     await act(async () => {
-      fireEvent.click(screen.queryByText('Add a post'));
+      fireEvent.click((await screen.findAllByText('Add a post'))[0]);
     });
 
     await waitFor(() => expect(container.querySelector('.post-form')).toBeInTheDocument());
@@ -236,28 +241,56 @@ describe('DiscussionsHome', () => {
   it('should display Add a post button for legacy topics view', async () => {
     await renderComponent(`/${courseId}/topics/topic-1`);
 
-    expect(screen.queryByText('Add a post')).toBeInTheDocument();
+    await screen.findByText('Add a post');
   });
 
   it('should display No post selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics/category-1-topic-1`);
 
-    expect(screen.queryByText('No post selected')).toBeInTheDocument();
+    await screen.findByText('No post selected');
   });
 
   it('should display No topic selected for legacy topics view', async () => {
     await setUpV1TopicsMockResponse();
     await renderComponent(`/${courseId}/topics`);
 
-    expect(screen.queryByText('No topic selected')).toBeInTheDocument();
+    await screen.findByText('No topic selected');
   });
 
   it('should display navigation tabs', async () => {
-    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1)));
-    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
     renderComponent(`/${courseId}/topics`);
 
-    expect(screen.queryByText('Discussion')).toBeInTheDocument();
+    await screen.findByText('Discussion');
+  });
+
+  it('should display content unavailable message when the user is not enrolled in the course.', async () => {
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: false })));
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    renderComponent();
+
+    await screen.findByText('Content unavailable');
+  });
+
+  it('should redirect to dashboard when the user clicks on the Enroll button.', async () => {
+    const replaceMock = jest.fn();
+    delete window.location;
+    window.location = { replace: replaceMock };
+
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: false })));
+    await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
+
+    renderComponent();
+
+    const enrollButton = await screen.findByText('Enroll');
+
+    await act(async () => {
+      fireEvent.click(enrollButton);
+    });
+
+    await waitFor(() => {
+      expect(window.location.replace).toHaveBeenCalledWith(expect.stringContaining('about'));
+    });
   });
 });