Merge branch 'master' into embeddable-registration-form

* feat: add personalized recommendations (#1024)

* use Algolia for personalized recommendations
* show personalized recommendations to use that have consented
to functional cookies
* update tests

VAN-1599

* Revert "fix: special characters in redirect url getting decoded to space (#1029)" (#1030)

This reverts commit fc62241332.

* feat: update recommendations page design (#1036)

VAN-1598

* feat: add events for recommendations (#1039)

* feat: remove static recommendations

---------

Co-authored-by: Syed Sajjad Hussain Shah <52817156+syedsajjadkazmii@users.noreply.github.com>

.env

@@ -16,20 +16,26 @@ SITE_NAME=null
 INFO_EMAIL=''
 # ***** Cookies *****
 REGISTER_CONVERSION_COOKIE_NAME=null
-USER_SURVEY_COOKIE_NAME=null
 # ***** Links *****
 LOGIN_ISSUE_SUPPORT_LINK=''
 AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK=null
+POST_REGISTRATION_REDIRECT_URL=''
+SEARCH_CATALOG_URL=''
 # ***** Features flags *****
 DISABLE_ENTERPRISE_LOGIN=''
 ENABLE_DYNAMIC_REGISTRATION_FIELDS=''
 ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN=''
-ENABLE_PERSONALIZED_RECOMMENDATIONS=''
+ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''
 MARKETING_EMAILS_OPT_IN=''
 SHOW_CONFIGURABLE_EDX_FIELDS=''
 # ***** Zendesk related keys *****
 ZENDESK_KEY=''
 ZENDESK_LOGO_URL=''
+# ***** Base Container Images *****
+BANNER_IMAGE_LARGE=''
+BANNER_IMAGE_MEDIUM=''
+BANNER_IMAGE_SMALL=''
+BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''

.env.development

@@ -23,13 +23,17 @@ INFO_EMAIL='info@example.com'
 REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
 SESSION_COOKIE_DOMAIN='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
-USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
 # ***** Links *****
 LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'
 TOS_AND_HONOR_CODE='http://localhost:18000/honor'
 TOS_LINK='http://localhost:18000/tos'
 PRIVACY_POLICY='http://localhost:18000/privacy'
 AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK='http://localhost:1999/welcome'
+# ***** Base Container Images *****
+BANNER_IMAGE_LARGE=''
+BANNER_IMAGE_MEDIUM=''
+BANNER_IMAGE_SMALL=''
+BANNER_IMAGE_EXTRA_SMALL=''
 # ***** Miscellaneous *****
 APP_ID=''
 MFE_CONFIG_API_URL=''

.env.test

@@ -16,7 +16,6 @@ ORDER_HISTORY_URL='http://localhost:1996/orders'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=''
 SITE_NAME='Your Platform Name Here'
-USER_SURVEY_COOKIE_NAME='openedx-user-survey-type'
 REGISTER_CONVERSION_COOKIE_NAME='openedx-user-register-conversion'
 APP_ID=''
 MFE_CONFIG_API_URL=''

.github/workflows/lockfileversion-check.yml

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

Makefile

@@ -1,5 +1,5 @@
 export TRANSIFEX_RESOURCE = frontend-app-authn
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
+transifex_langs = "ar,de,de_DE,es_419,fa_IR,fr,fr_CA,hi,it,it_IT,pt,pt_PT,ru,uk,zh_CN"
 
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js

package.json

@@ -33,51 +33,54 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-platform": "4.5.1",
-    "@edx/paragon": "20.40.2",
-    "@fortawesome/fontawesome-svg-core": "6.4.0",
-    "@fortawesome/free-brands-svg-icons": "6.4.0",
-    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@edx/frontend-platform": "^5.0.0",
+    "@edx/paragon": "20.46.2",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.2.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "algoliasearch": "^4.14.3",
+    "algoliasearch-helper": "^3.14.0",
     "classnames": "2.3.2",
-    "core-js": "3.30.2",
+    "core-js": "3.32.0",
     "fastest-levenshtein": "1.0.16",
     "form-urlencoded": "6.1.0",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
-    "react-loading-skeleton": "3.2.1",
+    "react-loading-skeleton": "3.3.1",
     "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "react-zendesk": "^0.1.13",
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-mock-store": "1.5.4",
     "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
-    "regenerator-runtime": "0.13.11",
+    "regenerator-runtime": "0.14.0",
     "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.38",
+    "@edx/frontend-build": "12.9.8",
     "@edx/reactifex": "1.1.0",
-    "babel-plugin-formatjs": "10.5.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-plugin-formatjs": "10.5.3",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.28.0",
     "glob": "7.2.3",
     "history": "5.3.0",
     "husky": "7.0.4",
-    "jest": "29.5.0",
-    "react-test-renderer": "16.14.0"
+    "jest": "29.6.2",
+    "react-test-renderer": "^17.0.2"
   }
 }

public/index.html

@@ -4,6 +4,20 @@
       <title>Authn | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.6/iframeResizer.contentWindow.min.js"
+              integrity="sha512-R7Piufj0/o6jG9ZKrAvS2dblFr2kkuG4XVQwStX+/4P+KwOLUXn2DXy0l1AJDxxqGhkM/FJllZHG2PKOAheYzg=="
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer">
+      </script>
+      <% if (process.env.OPTIMIZELY_URL) { %>
+        <script
+          src="<%= process.env.OPTIMIZELY_URL %>"
+        ></script>
+      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+        <script
+          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
+        ></script>
+      <% } %>
   </head>
   <body>
     <div id="root"></div>

src/MainApp.jsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { Helmet } from 'react-helmet';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import {
-  NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
+  EmbeddedRegistrationRoute, NotFoundPage, registerIcons, UnAuthOnlyRoute, Zendesk,
 } from './common-components';
 import configureStore from './data/configureStore';
 import {
@@ -15,6 +15,7 @@ import {
   PAGE_NOT_FOUND,
   PASSWORD_RESET_CONFIRM,
   RECOMMENDATIONS,
+  REGISTER_EMBEDDED_PAGE,
   REGISTER_PAGE,
   RESET_PAGE,
 } from './data/constants';
@@ -23,7 +24,9 @@ import { ForgotPasswordPage } from './forgot-password';
 import Logistration from './logistration/Logistration';
 import { ProgressiveProfiling } from './progressive-profiling';
 import { RecommendationsPage } from './recommendations';
+import { EmbeddableRegistrationPage } from './register';
 import { ResetPasswordPage } from './reset-password';
+
 import './index.scss';
 
 registerIcons();
@@ -34,21 +37,26 @@ const MainApp = () => (
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
     {getConfig().ZENDESK_KEY && <Zendesk />}
-    <Switch>
-      <Route exact path="/">
-        <Redirect to={updatePathWithQueryParams(REGISTER_PAGE)} />
-      </Route>
-      <UnAuthOnlyRoute exact path={LOGIN_PAGE} render={() => <Logistration selectedPage={LOGIN_PAGE} />} />
-      <UnAuthOnlyRoute exact path={REGISTER_PAGE} component={Logistration} />
-      <UnAuthOnlyRoute exact path={RESET_PAGE} component={ForgotPasswordPage} />
-      <Route exact path={PASSWORD_RESET_CONFIRM} component={ResetPasswordPage} />
-      <Route exact path={AUTHN_PROGRESSIVE_PROFILING} component={ProgressiveProfiling} />
-      <Route exact path={RECOMMENDATIONS} component={RecommendationsPage} />
-      <Route path={PAGE_NOT_FOUND} component={NotFoundPage} />
-      <Route path="*">
-        <Redirect to={PAGE_NOT_FOUND} />
-      </Route>
-    </Switch>
+    <Routes>
+      <Route path="/" element={<Navigate replace to={updatePathWithQueryParams(REGISTER_PAGE)} />} />
+      <Route
+        path={REGISTER_EMBEDDED_PAGE}
+        element={<EmbeddedRegistrationRoute><EmbeddableRegistrationPage /></EmbeddedRegistrationRoute>}
+      />
+      <Route
+        path={LOGIN_PAGE}
+        element={
+          <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+        }
+      />
+      <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>} />
+      <Route path={RESET_PAGE} element={<UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>} />
+      <Route path={PASSWORD_RESET_CONFIRM} element={<ResetPasswordPage />} />
+      <Route path={AUTHN_PROGRESSIVE_PROFILING} element={<ProgressiveProfiling />} />
+      <Route path={RECOMMENDATIONS} element={<RecommendationsPage />} />
+      <Route path={PAGE_NOT_FOUND} element={<NotFoundPage />} />
+      <Route path="*" element={<Navigate replace to={PAGE_NOT_FOUND} />} />
+    </Routes>
   </AppProvider>
 );
 

src/base-component/BaseComponent.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { breakpoints } from '@edx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-
-import AuthLargeLayout from './AuthLargeLayout';
-import AuthMediumLayout from './AuthMediumLayout';
-import AuthSmallLayout from './AuthSmallLayout';
-import LargeLayout from './LargeLayout';
-import MediumLayout from './MediumLayout';
-import SmallLayout from './SmallLayout';
-
-const BaseComponent = ({ children, showWelcomeBanner }) => {
-  const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
-  const username = authenticatedUser ? authenticatedUser.username : null;
-
-  return (
-    <>
-      <div className="col-md-12 extra-large-screen-top-stripe" />
-      <div className="layout">
-        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
-          {authenticatedUser ? <AuthSmallLayout username={username} /> : <SmallLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
-          {authenticatedUser ? <AuthMediumLayout username={username} /> : <MediumLayout />}
-        </MediaQuery>
-        <MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
-          {authenticatedUser ? <AuthLargeLayout username={username} /> : <LargeLayout />}
-        </MediaQuery>
-
-        <div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>
-          {children}
-        </div>
-      </div>
-    </>
-  );
-};
-
-BaseComponent.defaultProps = {
-  showWelcomeBanner: false,
-};
-
-BaseComponent.propTypes = {
-  children: PropTypes.node.isRequired,
-  showWelcomeBanner: PropTypes.bool,
-};
-
-export default BaseComponent;

src/base-component/index.jsx

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

src/base-container/components/default-layout/DefaultLayout.test.jsx

@@ -3,16 +3,14 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 
-import LargeLayout from '../LargeLayout';
-import MediumLayout from '../MediumLayout';
-import SmallLayout from '../SmallLayout';
+import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './index';
 
-describe('ScreenLayout', () => {
-  it('should display the form, pass as a child in SmallScreenLayout', () => {
+describe('Default Layout tests', () => {
+  it('should display the form passed as a child in SmallScreenLayout', () => {
     const smallScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <SmallLayout />
+          <DefaultSmallLayout />
           <form>
             <input type="text" />
           </form>
@@ -22,11 +20,11 @@ describe('ScreenLayout', () => {
     expect(smallScreen.find('form').exists()).toEqual(true);
   });
 
-  it('should display the form, pass as a child in MediumScreenLayout', () => {
+  it('should display the form passed as a child in MediumScreenLayout', () => {
     const mediumScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <MediumLayout />
+          <DefaultMediumLayout />
           <form>
             <input type="text" />
           </form>
@@ -36,11 +34,11 @@ describe('ScreenLayout', () => {
     expect(mediumScreen.find('form').exists()).toEqual(true);
   });
 
-  it('should display the form, pass as a child in LargeScreenLayout', () => {
+  it('should display the form passed as a child in LargeScreenLayout', () => {
     const largeScreen = mount(
       <IntlProvider locale="en">
         <div>
-          <LargeLayout />
+          <DefaultLargeLayout />
           <form>
             <input type="text" />
           </form>

src/base-container/components/default-layout/index.jsx

@@ -0,0 +1,3 @@
+export { default as DefaultLargeLayout } from './LargeLayout';
+export { default as DefaultMediumLayout } from './MediumLayout';
+export { default as DefaultSmallLayout } from './SmallLayout';

src/base-container/components/default-layout/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'start.learning': {
+    id: 'start.learning',
+    defaultMessage: 'Start learning',
+    description: 'Header text for logistration MFE pages',
+  },
+  'with.site.name': {
+    id: 'with.site.name',
+    defaultMessage: 'with {siteName}',
+    description: 'Header text with site name for logistration MFE pages',
+  },
+});
+
+export default messages;

src/base-container/components/image-layout/ExtraSmallLayout.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import messages from './messages';
+
+const ExtraSmallLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <span
+      className="w-100 bg-primary-500 banner__image extra-small-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_EXTRA_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-4.5 mr-1 pb-3.5 pt-3.5">
+        <h1 className="banner__heading">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </span>
+  );
+};
+
+export default ExtraSmallLayout;

src/base-container/components/image-layout/LargeLayout.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import './index.scss';
+import messages from './messages';
+
+const LargeLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className="w-50 bg-primary-500 banner__image large-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_LARGE})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="min-vh-100 p-5 d-flex align-items-end">
+        <h1 className="display-2 mw-sm mb-3 d-flex flex-column flex-shrink-0 justify-content-center">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default LargeLayout;

src/base-container/components/image-layout/MediumLayout.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import './index.scss';
+import messages from './messages';
+
+const MediumLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className="w-100 mb-3 bg-primary-500 banner__image medium-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_MEDIUM})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-5 pb-4 pt-4">
+        <h1 className="display-2 banner__heading">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300 d-inline-block">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default MediumLayout;

src/base-container/components/image-layout/SmallLayout.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Image } from '@edx/paragon';
+
+import messages from './messages';
+
+const SmallLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <span
+      className="w-100 bg-primary-500 banner__image small-layout"
+      style={{ backgroundImage: `url(${getConfig().BANNER_IMAGE_SMALL})` }}
+    >
+      <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
+        <Image className="company-logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
+      </Hyperlink>
+      <div className="ml-5 mr-1 pb-3.5 pt-3.5">
+        <h1 className="display-2">
+          <span className="text-light-500">
+            {formatMessage(messages['your.career.turning.point'])}{' '}
+          </span>
+          <span className="text-warning-300">
+            {formatMessage(messages['is.here'])}
+          </span>
+        </h1>
+      </div>
+    </span>
+  );
+};
+
+export default SmallLayout;

src/base-container/components/image-layout/index.jsx

@@ -0,0 +1,4 @@
+export { default as ImageLargeLayout } from './LargeLayout';
+export { default as ImageMediumLayout } from './MediumLayout';
+export { default as ImageSmallLayout } from './SmallLayout';
+export { default as ImageExtraSmallLayout } from './ExtraSmallLayout';

src/base-container/components/image-layout/index.scss

@@ -0,0 +1,37 @@
+.company-logo {
+  width: 71px;
+  margin-top: 2rem;
+  margin-left: 1.5rem;
+}
+
+@media (max-width: 576px) {
+  .company-logo {
+    width: 44.67px;
+    margin-top: 1.25rem;
+    margin-left: 1.5rem;
+  }
+}
+
+.banner__image {
+  background-size: cover;
+  background-repeat: no-repeat;
+  border:none;
+}
+
+@media (min-width: 464px) and (max-width: 575.98px) {
+  .banner__heading {
+    font-size: 60px;
+    font-weight: 700;
+    line-height: 60px;
+    letter-spacing: -1.2px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 800px) {
+  .banner__heading {
+    font-size: 60px !important;
+    font-weight: 700 !important;
+    line-height: 60px !important;
+    letter-spacing: -2px !important;
+  }
+}

src/base-container/components/image-layout/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'your.career.turning.point': {
+    id: 'your.career.turning.point',
+    defaultMessage: 'Your career turning point',
+    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
+  },
+  'is.here': {
+    id: 'is.here',
+    defaultMessage: 'is here.',
+    description: 'Part of the heading "Your career turning point is here." shown on Authn MFE',
+  },
+});
+
+export default messages;

src/base-container/components/welcome-page-layout/LargeLayout.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const AuthLargeLayout = ({ username }) => {
+const LargeLayout = ({ username }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -42,8 +42,8 @@ const AuthLargeLayout = ({ username }) => {
   );
 };
 
-AuthLargeLayout.propTypes = {
+LargeLayout.propTypes = {
   username: PropTypes.string.isRequired,
 };
 
-export default AuthLargeLayout;
+export default LargeLayout;

src/base-container/components/welcome-page-layout/MediumLayout.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const AuthMediumLayout = ({ username }) => {
+const MediumLayout = ({ username }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -45,8 +45,8 @@ const AuthMediumLayout = ({ username }) => {
   );
 };
 
-AuthMediumLayout.propTypes = {
+MediumLayout.propTypes = {
   username: PropTypes.string.isRequired,
 };
 
-export default AuthMediumLayout;
+export default MediumLayout;

src/base-container/components/welcome-page-layout/SmallLayout.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
-const AuthSmallLayout = ({ username }) => {
+const SmallLayout = ({ username }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -34,8 +34,8 @@ const AuthSmallLayout = ({ username }) => {
   );
 };
 
-AuthSmallLayout.propTypes = {
+SmallLayout.propTypes = {
   username: PropTypes.string.isRequired,
 };
 
-export default AuthSmallLayout;
+export default SmallLayout;

src/base-container/components/welcome-page-layout/index.jsx

@@ -0,0 +1,3 @@
+export { default as AuthLargeLayout } from './LargeLayout';
+export { default as AuthMediumLayout } from './MediumLayout';
+export { default as AuthSmallLayout } from './SmallLayout';

src/base-container/components/welcome-page-layout/messages.js

@@ -1,17 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'start.learning': {
-    id: 'start.learning',
-    defaultMessage: 'Start learning',
-    description: 'Header text for logistration MFE pages',
+  'welcome.to.platform': {
+    id: 'welcome.to.platform',
+    defaultMessage: 'Welcome to {siteName}, {username}!',
+    description: 'Welcome message that appears on progressive profile page',
   },
-  'with.site.name': {
-    id: 'with.site.name',
-    defaultMessage: 'with {siteName}',
-    description: 'Header text with site name for logistration MFE pages',
-  },
-  // authenticated user base component text
   'complete.your.profile.1': {
     id: 'complete.your.profile.1',
     defaultMessage: 'Complete',
@@ -22,11 +16,6 @@ const messages = defineMessages({
     defaultMessage: 'your profile',
     description: 'part of text "complete your profile"',
   },
-  'welcome.to.platform': {
-    id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {username}!',
-    description: 'Welcome message that appears on progressive profile page',
-  },
 });
 
 export default messages;

src/base-container/data/constants.js

@@ -0,0 +1,4 @@
+const IMAGE_LAYOUT = 'image-layout';
+const DEFAULT_LAYOUT = 'default-layout';
+
+export { DEFAULT_LAYOUT, IMAGE_LAYOUT };

src/base-container/index.jsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+
+import { breakpoints } from '@edx/paragon';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+
+import { DefaultLargeLayout, DefaultMediumLayout, DefaultSmallLayout } from './components/default-layout';
+import {
+  ImageExtraSmallLayout, ImageLargeLayout, ImageMediumLayout, ImageSmallLayout,
+} from './components/image-layout';
+import { AuthLargeLayout, AuthMediumLayout, AuthSmallLayout } from './components/welcome-page-layout';
+import { DEFAULT_LAYOUT, IMAGE_LAYOUT } from './data/constants';
+
+const BaseContainer = ({ children, showWelcomeBanner, username }) => {
+  const [baseContainerVersion, setBaseContainerVersion] = useState(DEFAULT_LAYOUT);
+
+  useEffect(() => {
+    const initRebrandExperiment = () => {
+      if (window.experiments?.rebrandExperiment) {
+        setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+      } else {
+        window.experiments = window.experiments || {};
+        window.experiments.rebrandExperiment = {};
+        window.experiments.rebrandExperiment.handleLoaded = () => {
+          setBaseContainerVersion(window.experiments?.rebrandExperiment?.variation);
+        };
+      }
+    };
+    initRebrandExperiment();
+  }, []);
+
+  if (baseContainerVersion === IMAGE_LAYOUT) {
+    return (
+      <div className="layout">
+        <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth - 1}>
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageExtraSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth - 1}>
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <ImageSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
+          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <ImageMediumLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
+          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <ImageLargeLayout />}
+        </MediaQuery>
+        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="col-md-12 extra-large-screen-top-stripe" />
+      <div className="layout">
+        <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
+          {showWelcomeBanner ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth - 1}>
+          {showWelcomeBanner ? <AuthMediumLayout username={username} /> : <DefaultMediumLayout />}
+        </MediaQuery>
+        <MediaQuery minWidth={breakpoints.extraLarge.minWidth}>
+          {showWelcomeBanner ? <AuthLargeLayout username={username} /> : <DefaultLargeLayout />}
+        </MediaQuery>
+        <div className={classNames('content', { 'align-items-center mt-0': showWelcomeBanner })}>
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+BaseContainer.defaultProps = {
+  showWelcomeBanner: false,
+  username: null,
+};
+
+BaseContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  showWelcomeBanner: PropTypes.bool,
+  username: PropTypes.string,
+};
+
+export default BaseContainer;

src/base-container/tests/BaseContainer.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { mount } from 'enzyme';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import BaseContainer from '../index';
+
+const LargeScreen = {
+  wrappingComponent: ResponsiveContext.Provider,
+  wrappingComponentProps: { value: { width: 1200 } },
+};
+
+describe('Base component tests', () => {
+  it('should should default layout', () => {
+    const baseContainer = mount(
+      <IntlProvider locale="en">
+        <BaseContainer />
+      </IntlProvider>,
+      LargeScreen,
+    );
+
+    expect(baseContainer.find('.banner__image').exists()).toBeFalsy();
+    expect(baseContainer.find('.large-screen-svg-primary').exists()).toBeTruthy();
+  });
+
+  it('[experiment] should show image layout for treatment group', () => {
+    window.experiments = {
+      rebrandExperiment: {
+        variation: 'image-layout',
+      },
+    };
+
+    const baseContainer = mount(
+      <IntlProvider locale="en">
+        <BaseContainer />
+      </IntlProvider>,
+      LargeScreen,
+    );
+
+    expect(baseContainer.find('.banner__image').exists()).toBeTruthy();
+  });
+});

src/common-components/EmbeddedRegistrationRoute.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { Navigate } from 'react-router-dom';
+
+import { PAGE_NOT_FOUND } from '../data/constants';
+import { isHostAvailableInQueryParams } from '../data/utils';
+
+/**
+ * This wrapper redirects the requester to embedded register page only if host
+ * query param is present.
+ */
+const EmbeddedRegistrationRoute = ({ children }) => {
+  const registrationEmbedded = isHostAvailableInQueryParams();
+
+  // Show registration page for embedded experience even if the user is authenticated
+  if (registrationEmbedded) {
+    return children;
+  }
+
+  return <Navigate to={PAGE_NOT_FOUND} replace />;
+};
+
+EmbeddedRegistrationRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default EmbeddedRegistrationRoute;

src/common-components/PasswordField.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
@@ -11,31 +12,92 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 import { LETTER_REGEX, NUMBER_REGEX } from '../data/constants';
+import { clearRegistrationBackendError, fetchRealtimeValidations } from '../register/data/actions';
+import { validatePasswordField } from '../register/data/utils';
 
 const PasswordField = (props) => {
   const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+
+  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
   const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
   const [showTooltip, setShowTooltip] = useState(false);
 
   const handleBlur = (e) => {
-    if (props.handleBlur) { props.handleBlur(e); }
+    const { name, value } = e.target;
+    if (name === props.name && e.relatedTarget?.name === 'passwordIcon') {
+      return; // Do not run validations on password icon click
+    }
+
+    let passwordValue = value;
+    if (name === 'passwordIcon') {
+      // To validate actual password value when onBlur is triggered by focusing out the password icon
+      passwordValue = props.value;
+    }
+
+    if (props.handleBlur) {
+      props.handleBlur({
+        target: {
+          name: props.name,
+          value: passwordValue,
+        },
+      });
+    }
+
     setShowTooltip(props.showRequirements && false);
+    if (props.handleErrorChange) { // If rendering from register page
+      const fieldError = validatePasswordField(passwordValue, formatMessage);
+      if (fieldError) {
+        props.handleErrorChange('password', fieldError);
+      } else if (!validationApiRateLimited) {
+        dispatch(fetchRealtimeValidations({ password: passwordValue }));
+      }
+    }
   };
 
   const handleFocus = (e) => {
+    if (e.target?.name === 'passwordIcon') {
+      return; // Do not clear error on password icon focus
+    }
+
     if (props.handleFocus) {
       props.handleFocus(e);
     }
+    if (props.handleErrorChange) {
+      props.handleErrorChange('password', '');
+      dispatch(clearRegistrationBackendError('password'));
+    }
     setTimeout(() => setShowTooltip(props.showRequirements && true), 150);
   };
 
   const HideButton = (
-    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="password" src={VisibilityOff} iconAs={Icon} onClick={setHiddenTrue} size="sm" variant="secondary" alt={formatMessage(messages['hide.password'])} />
+    <IconButton
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      name="passwordIcon"
+      src={VisibilityOff}
+      iconAs={Icon}
+      onClick={setHiddenTrue}
+      size="sm"
+      variant="secondary"
+      alt={formatMessage(messages['hide.password'])}
+    />
   );
 
   const ShowButton = (
-    <IconButton onFocus={handleFocus} onBlur={handleBlur} name="password" src={Visibility} iconAs={Icon} onClick={setHiddenFalse} size="sm" variant="secondary" alt={formatMessage(messages['show.password'])} />
+    <IconButton
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      name="passwordIcon"
+      src={Visibility}
+      iconAs={Icon}
+      onClick={setHiddenFalse}
+      size="sm"
+      variant="secondary"
+      alt={formatMessage(messages['show.password'])}
+    />
   );
+
   const placement = window.innerWidth < 768 ? 'top' : 'left';
   const tooltip = (
     <Tooltip id={`password-requirement-${placement}`}>
@@ -89,6 +151,7 @@ PasswordField.defaultProps = {
   handleBlur: null,
   handleFocus: null,
   handleChange: () => {},
+  handleErrorChange: null,
   showRequirements: true,
   autoComplete: null,
 };
@@ -100,6 +163,7 @@ PasswordField.propTypes = {
   handleBlur: PropTypes.func,
   handleFocus: PropTypes.func,
   handleChange: PropTypes.func,
+  handleErrorChange: PropTypes.func,
   name: PropTypes.string.isRequired,
   showRequirements: PropTypes.bool,
   value: PropTypes.string.isRequired,

src/common-components/RedirectLogistration.jsx

@@ -1,14 +1,15 @@
-import React from 'react';
-
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
-import { AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS } from '../data/constants';
+import {
+  AUTHN_PROGRESSIVE_PROFILING, RECOMMENDATIONS,
+} from '../data/constants';
 import { setCookie } from '../data/utils';
 
 const RedirectLogistration = (props) => {
   const {
+    authenticatedUser,
     finishAuthUrl,
     redirectUrl,
     redirectToProgressiveProfilingPage,
@@ -35,15 +36,17 @@ const RedirectLogistration = (props) => {
     if (redirectToProgressiveProfilingPage) {
       // TODO: Do we still need this cookie?
       setCookie('van-504-returning-user', true);
+
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
-        <Redirect to={{
-          pathname: AUTHN_PROGRESSIVE_PROFILING,
-          state: {
+        <Navigate
+          to={AUTHN_PROGRESSIVE_PROFILING}
+          state={{
             registrationResult,
             optionalFields,
-          },
-        }}
+            authenticatedUser,
+          }}
+          replace
         />
       );
     }
@@ -52,14 +55,14 @@ const RedirectLogistration = (props) => {
     if (redirectToRecommendationsPage) {
       const registrationResult = { redirectUrl: finalRedirectUrl, success };
       return (
-        <Redirect to={{
-          pathname: RECOMMENDATIONS,
-          state: {
+        <Navigate
+          to={RECOMMENDATIONS}
+          state={{
             registrationResult,
             educationLevel,
             userId,
-          },
-        }}
+          }}
+          replace
         />
       );
     }
@@ -71,6 +74,7 @@ const RedirectLogistration = (props) => {
 };
 
 RedirectLogistration.defaultProps = {
+  authenticatedUser: {},
   educationLevel: null,
   finishAuthUrl: null,
   success: false,
@@ -82,6 +86,7 @@ RedirectLogistration.defaultProps = {
 };
 
 RedirectLogistration.propTypes = {
+  authenticatedUser: PropTypes.shape({}),
   educationLevel: PropTypes.string,
   finishAuthUrl: PropTypes.string,
   success: PropTypes.bool,

src/common-components/UnAuthOnlyRoute.jsx

@@ -1,16 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { fetchAuthenticatedUser, getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-import { DEFAULT_REDIRECT_URL } from '../data/constants';
+import {
+  DEFAULT_REDIRECT_URL,
+} from '../data/constants';
 
 /**
  * This wrapper redirects the requester to our default redirect url if they are
  * already authenticated.
  */
-const UnAuthOnlyRoute = (props) => {
+const UnAuthOnlyRoute = ({ children }) => {
   const [authUser, setAuthUser] = useState({});
   const [isReady, setIsReady] = useState(false);
 
@@ -27,10 +29,14 @@ const UnAuthOnlyRoute = (props) => {
       return null;
     }
 
-    return <Route {...props} />;
+    return children;
   }
 
   return null;
 };
 
+UnAuthOnlyRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 export default UnAuthOnlyRoute;

src/common-components/Zendesk.jsx

@@ -5,6 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import Zendesk from 'react-zendesk';
 
 import messages from './messages';
+import { REGISTER_EMBEDDED_PAGE } from '../data/constants';
 
 const ZendeskHelp = () => {
   const { formatMessage } = useIntl();
@@ -48,6 +49,10 @@ const ZendeskHelp = () => {
     },
   };
 
+  if (window.location.pathname === REGISTER_EMBEDDED_PAGE) {
+    return null;
+  }
+
   return (
     <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
   );

src/common-components/data/reducers.js

@@ -1,11 +1,17 @@
 import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';
-import { COMPLETE_STATE, PENDING_STATE } from '../../data/constants';
+import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
 
 export const defaultState = {
-  fieldDescriptions: {},
-  optionalFields: {},
+  fieldDescriptions: {
+    fields: {},
+  },
+  optionalFields: {
+    fields: {},
+    extended_profile: [],
+  },
   thirdPartyAuthApiStatus: null,
   thirdPartyAuthContext: {
+    autoSubmitRegForm: false,
     currentProvider: null,
     finishAuthUrl: null,
     countryCode: null,
@@ -13,6 +19,7 @@ export const defaultState = {
     secondaryProviders: [],
     pipelineUserDetails: null,
     errorMessage: null,
+    welcomePageRedirectUrl: null,
   },
 };
 
@@ -35,7 +42,11 @@ const reducer = (state = defaultState, action = {}) => {
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:
       return {
         ...state,
-        thirdPartyAuthApiStatus: COMPLETE_STATE,
+        thirdPartyAuthApiStatus: FAILURE_STATE,
+        thirdPartyAuthContext: {
+          ...state.thirdPartyAuthContext,
+          errorMessage: null,
+        },
       };
     case THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG:
       return {

src/common-components/data/tests/reducer.test.js

@@ -58,7 +58,7 @@ describe('common components reducer', () => {
         providers: [],
         secondaryProviders: [],
         pipelineUserDetails: null,
-        errorMessage: 'An error occured',
+        errorMessage: 'An error occurred',
       },
     };
 

src/common-components/index.jsx

@@ -1,5 +1,6 @@
 export { default as RedirectLogistration } from './RedirectLogistration';
 export { default as registerIcons } from './RegisterFaIcons';
+export { default as EmbeddedRegistrationRoute } from './EmbeddedRegistrationRoute';
 export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';
 export { default as NotFoundPage } from './NotFoundPage';
 export { default as SocialAuthProviders } from './SocialAuthProviders';

src/common-components/tests/EmbeddedRegistrationRoute.test.jsx

@@ -0,0 +1,72 @@
+/* eslint-disable import/no-import-module-exports */
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+import { REGISTER_EMBEDDED_PAGE } from '../../data/constants';
+import EmbeddedRegistrationRoute from '../EmbeddedRegistrationRoute';
+
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
+
+const RRD = require('react-router-dom');
+// Just render plain div with its children
+// eslint-disable-next-line react/prop-types
+RRD.BrowserRouter = ({ children }) => <div>{ children }</div>;
+module.exports = RRD;
+
+const TestApp = () => (
+  <Router>
+    <div>
+      <Routes>
+        <Route
+          path={REGISTER_EMBEDDED_PAGE}
+          element={<EmbeddedRegistrationRoute><span>Embedded Register Page</span></EmbeddedRegistrationRoute>}
+        />
+      </Routes>
+    </div>
+  </Router>
+);
+
+describe('EmbeddedRegistrationRoute', () => {
+  const routerWrapper = () => (
+    <MemoryRouter initialEntries={[REGISTER_EMBEDDED_PAGE]}>
+      <TestApp />
+    </MemoryRouter>
+  );
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should not render embedded register page if host query param is not available in the url', async () => {
+    let embeddedRegistrationPage = null;
+
+    await act(async () => {
+      embeddedRegistrationPage = await mount(routerWrapper());
+    });
+
+    expect(embeddedRegistrationPage.find('span').exists()).toBeFalsy();
+  });
+
+  it('should render embedded register page if host query param is available in the url (embedded)', async () => {
+    delete window.location;
+    window.location = {
+      href: getConfig().BASE_URL.concat(REGISTER_EMBEDDED_PAGE),
+      search: '?host=http://localhost/host-websit',
+    };
+
+    let embeddedRegistrationPage = null;
+
+    await act(async () => {
+      embeddedRegistrationPage = await mount(routerWrapper());
+    });
+
+    expect(embeddedRegistrationPage.find('span').exists()).toBeTruthy();
+    expect(embeddedRegistrationPage.find('span').text()).toBe('Embedded Register Page');
+  });
+});

src/common-components/tests/FormField.test.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
 
+import { fetchRealtimeValidations } from '../../register/data/actions';
 import FormGroup from '../FormGroup';
 import PasswordField from '../PasswordField';
 
@@ -26,10 +30,27 @@ describe('FormGroup', () => {
 });
 
 describe('PasswordField', () => {
+  const mockStore = configureStore();
   const IntlPasswordField = injectIntl(PasswordField);
   let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <MemoryRouter>
+        <Provider store={store}>{children}</Provider>
+      </MemoryRouter>
+    </IntlProvider>
+  );
+
+  const initialState = {
+    register: {
+      validationApiRateLimited: false,
+    },
+  };
 
   beforeEach(() => {
+    store = mockStore(initialState);
     props = {
       floatingLabel: 'Password',
       name: 'password',
@@ -39,7 +60,7 @@ describe('PasswordField', () => {
   });
 
   it('should show/hide password on icon click', () => {
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
 
     passwordField.find('button[aria-label="Show password"]').simulate('click');
     expect(passwordField.find('input').prop('type')).toEqual('text');
@@ -49,7 +70,7 @@ describe('PasswordField', () => {
   });
 
   it('should show password requirement tooltip on focus', async () => {
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
     jest.useFakeTimers();
     await act(async () => {
       passwordField.find('input').simulate('focus');
@@ -67,7 +88,7 @@ describe('PasswordField', () => {
     };
 
     jest.useFakeTimers();
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
     await act(async () => {
       passwordField.find('input').simulate('focus');
       jest.runAllTimers();
@@ -80,7 +101,7 @@ describe('PasswordField', () => {
   });
 
   it('should update password requirement checks', async () => {
-    const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
     jest.useFakeTimers();
     await act(async () => {
       passwordField.find('input').simulate('focus');
@@ -92,4 +113,142 @@ describe('PasswordField', () => {
     expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
     expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
   });
+
+  it('should not run validations when blur is fired on password icon click', () => {
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
+      target: {
+        name: 'password',
+        value: 'invalid',
+      },
+      relatedTarget: {
+        name: 'passwordIcon',
+      },
+    });
+
+    expect(passwordField.find('div[feedback-for="password"]').exists()).toBeFalsy();
+  });
+
+  it('should call props handle blur if available', () => {
+    props = {
+      ...props,
+      handleBlur: jest.fn(),
+    };
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('input#password').simulate('blur', {
+      target: {
+        name: 'password',
+        value: '',
+      },
+    });
+
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('should run validations on blur event when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('input#password').simulate('blur', {
+      target: {
+        name: 'password',
+        value: '',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+    expect(props.handleErrorChange).toHaveBeenCalledWith(
+      'password',
+      'Password criteria has not been met',
+    );
+  });
+
+  it('should not clear error when focus is fired on password icon click when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('button[aria-label="Show password"]').simulate('focus', {
+      target: {
+        name: 'passwordIcon',
+        value: '',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('should clear error when focus is fired on password icon click when rendered from register page', () => {
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('button[aria-label="Show password"]').simulate('focus', {
+      target: {
+        name: 'password',
+        value: 'invalid',
+      },
+    });
+
+    expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+    expect(props.handleErrorChange).toHaveBeenCalledWith(
+      'password',
+      '',
+    );
+  });
+
+  it('should run backend validations when frontend validations pass on blur when rendered from register page', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      ...props,
+      handleErrorChange: jest.fn(),
+    };
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
+      target: {
+        name: 'password',
+        value: 'password123',
+      },
+    });
+
+    expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ password: 'password123' }));
+  });
+
+  it('should use password value from prop when password icon is focused out (blur due to icon)', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      ...props,
+      value: 'testPassword',
+      handleErrorChange: jest.fn(),
+      handleBlur: jest.fn(),
+    };
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
+      target: {
+        name: 'passwordIcon',
+        value: undefined,
+      },
+    });
+
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      target: {
+        name: 'password',
+        value: 'testPassword',
+      },
+    });
+  });
 });

src/common-components/tests/UnAuthOnlyRoute.test.jsx

@@ -7,9 +7,11 @@ import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 
 import { UnAuthOnlyRoute } from '..';
-import { LOGIN_PAGE } from '../../data/constants';
+import { REGISTER_PAGE } from '../../data/constants';
 
-import { MemoryRouter, BrowserRouter as Router, Switch } from 'react-router-dom';
+import {
+  MemoryRouter, Route, BrowserRouter as Router, Routes,
+} from 'react-router-dom';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedUser: jest.fn(),
@@ -25,16 +27,16 @@ module.exports = RRD;
 const TestApp = () => (
   <Router>
     <div>
-      <Switch>
-        <UnAuthOnlyRoute path={LOGIN_PAGE} render={() => (<span>Login Page</span>)} />
-      </Switch>
+      <Routes>
+        <Route path={REGISTER_PAGE} element={<UnAuthOnlyRoute><span>Register Page</span></UnAuthOnlyRoute>} />
+      </Routes>
     </div>
   </Router>
 );
 
 describe('UnAuthOnlyRoute', () => {
   const routerWrapper = () => (
-    <MemoryRouter initialEntries={[LOGIN_PAGE]}>
+    <MemoryRouter initialEntries={[REGISTER_PAGE]}>
       <TestApp />
     </MemoryRouter>
   );

src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap

@@ -26,7 +26,7 @@ exports[`SocialAuthProviders should match social auth provider with default icon
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h10V3H12v2h8v14z"
+          d="M11 7 9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h10V3H12v2h8v14z"
           fill="currentColor"
         />
       </svg>

src/config/index.js

@@ -2,12 +2,11 @@ const configuration = {
   // Cookies related configs
   SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN,
   REGISTER_CONVERSION_COOKIE_NAME: process.env.REGISTER_CONVERSION_COOKIE_NAME || null,
-  USER_SURVEY_COOKIE_NAME: process.env.USER_SURVEY_COOKIE_NAME || null,
   // Features
   DISABLE_ENTERPRISE_LOGIN: process.env.DISABLE_ENTERPRISE_LOGIN || '',
   ENABLE_DYNAMIC_REGISTRATION_FIELDS: process.env.ENABLE_DYNAMIC_REGISTRATION_FIELDS || false,
   ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN: process.env.ENABLE_PROGRESSIVE_PROFILING_ON_AUTHN || false,
-  ENABLE_PERSONALIZED_RECOMMENDATIONS: process.env.ENABLE_PERSONALIZED_RECOMMENDATIONS || false,
+  ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
   MARKETING_EMAILS_OPT_IN: process.env.MARKETING_EMAILS_OPT_IN || '',
   SHOW_CONFIGURABLE_EDX_FIELDS: process.env.SHOW_CONFIGURABLE_EDX_FIELDS || false,
   // Links
@@ -15,14 +14,24 @@ const configuration = {
   AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: process.env.AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK || null,
   LOGIN_ISSUE_SUPPORT_LINK: process.env.LOGIN_ISSUE_SUPPORT_LINK || null,
   PASSWORD_RESET_SUPPORT_LINK: process.env.PASSWORD_RESET_SUPPORT_LINK || null,
+  POST_REGISTRATION_REDIRECT_URL: process.env.POST_REGISTRATION_REDIRECT_URL || '',
   PRIVACY_POLICY: process.env.PRIVACY_POLICY || null,
+  SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
   TOS_AND_HONOR_CODE: process.env.TOS_AND_HONOR_CODE || null,
   TOS_LINK: process.env.TOS_LINK || null,
-  // Miscellaneous
+  // Base container images
+  BANNER_IMAGE_LARGE: process.env.BANNER_IMAGE_LARGE || '',
+  BANNER_IMAGE_MEDIUM: process.env.BANNER_IMAGE_MEDIUM || '',
+  BANNER_IMAGE_SMALL: process.env.BANNER_IMAGE_SMALL || '',
+  BANNER_IMAGE_EXTRA_SMALL: process.env.BANNER_IMAGE_EXTRA_SMALL || '',
+  // Recommendation constants
   GENERAL_RECOMMENDATIONS: process.env.GENERAL_RECOMMENDATIONS || '[]',
+  // Miscellaneous
   INFO_EMAIL: process.env.INFO_EMAIL || '',
   ZENDESK_KEY: process.env.ZENDESK_KEY,
   ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
+  ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
+  ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
 };
 
 export default configuration;

src/data/algolia.js

@@ -0,0 +1,20 @@
+import { getConfig } from '@edx/frontend-platform';
+import algoliasearch from 'algoliasearch';
+
+// initialize Algolia workers
+const initializeSearchClient = () => algoliasearch(
+  getConfig().ALGOLIA_APP_ID,
+  getConfig().ALGOLIA_SEARCH_API_KEY,
+);
+
+const getLocationRestrictionFilter = (userCountry) => {
+  if (userCountry) {
+    return `NOT blocked_in:"${userCountry}" AND (allowed_in:"null" OR allowed_in:"${userCountry}")`;
+  }
+  return '';
+};
+
+export {
+  initializeSearchClient,
+  getLocationRestrictionFilter,
+};

src/data/constants.js

@@ -1,6 +1,7 @@
 // URL Paths
 export const LOGIN_PAGE = '/login';
 export const REGISTER_PAGE = '/register';
+export const REGISTER_EMBEDDED_PAGE = '/register-embedded';
 export const RESET_PAGE = '/reset';
 export const AUTHN_PROGRESSIVE_PROFILING = '/welcome';
 export const DEFAULT_REDIRECT_URL = '/dashboard';
@@ -23,16 +24,16 @@ export const PENDING_STATE = 'pending';
 export const COMPLETE_STATE = 'complete';
 export const FAILURE_STATE = 'failure';
 export const FORBIDDEN_STATE = 'forbidden';
+export const EMBEDDED = 'embedded';
 
-// Regex
+export const LETTER_REGEX = /[a-zA-Z]/;
+export const NUMBER_REGEX = /\d/;
 export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+)*'
                                  + '|^"([\\001-\\010\\013\\014\\016-\\037!#-\\[\\]-\\177]|\\\\[\\001-\\011\\013\\014\\016-\\177])*"'
                                  + ')@((?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\\.)+)(?:[A-Z0-9-]{2,63})'
                                  + '|\\[(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)(\\.(25[0-5]|2[0-4]\\d|[0-1]?\\d?\\d)){3}\\]$';
-export const LETTER_REGEX = /[a-zA-Z]/;
-export const NUMBER_REGEX = /\d/;
-export const INVALID_NAME_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape
 
 // Query string parameters that can be passed to LMS to manage
 // things like auto-enrollment upon login and registration.
-export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'save_for_later', 'register_for_free', 'track', 'is_account_recovery'];
+export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta'];
+export const REDIRECT = 'redirect';

src/data/oneTrust.js

@@ -0,0 +1,3 @@
+const isOneTrustFunctionalCookieEnabled = () => !!window?.OnetrustActiveGroups?.includes('C0003');
+
+export default isOneTrustFunctionalCookieEnabled;

src/data/tests/algolia.test.js

@@ -0,0 +1,16 @@
+import { getLocationRestrictionFilter } from '../algolia';
+
+describe('algoliaUtilsTests', () => {
+  it('test getLocationRestrictionFilter returns filter if country is passed', () => {
+    const countryCode = 'PK';
+    const filter = getLocationRestrictionFilter(countryCode);
+    const expectedFilter = `NOT blocked_in:"${countryCode}" AND (allowed_in:"null" OR allowed_in:"${countryCode}")`;
+    expect(filter).toEqual(expectedFilter);
+  });
+  it('test getLocationRestrictionFilter returns empty string if country is not passed', () => {
+    const countryCode = '';
+    const filter = getLocationRestrictionFilter(countryCode);
+    const expectedFilter = '';
+    expect(filter).toEqual(expectedFilter);
+  });
+});

src/data/tests/dataUtils.test.js

@@ -1,5 +1,5 @@
-import { updatePathWithQueryParams } from './dataUtils';
 import { LOGIN_PAGE } from '../constants';
+import { updatePathWithQueryParams } from '../utils/dataUtils';
 
 describe('updatePathWithQueryParams', () => {
   it('should append query params into the path', () => {

src/data/tests/reduxUtils.test.js

@@ -1,4 +1,4 @@
-import AsyncActionType from './reduxUtils';
+import AsyncActionType from '../utils/reduxUtils';
 
 describe('AsyncActionType', () => {
   it('should return well formatted action strings', () => {

src/data/utils/cookies.js

@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 
-export function setCookie(cookieName, cookieValue, cookieExpiry) {
+export default function setCookie(cookieName, cookieValue, cookieExpiry) {
   const cookies = new Cookies();
   const options = { domain: getConfig().SESSION_COOKIE_DOMAIN, path: '/' };
   if (cookieExpiry) {
@@ -9,13 +9,3 @@ export function setCookie(cookieName, cookieValue, cookieExpiry) {
   }
   cookies.set(cookieName, cookieValue, options);
 }
-
-export default function setSurveyCookie(surveyType) {
-  const cookieName = getConfig().USER_SURVEY_COOKIE_NAME;
-  if (cookieName) {
-    const signupTimestamp = (new Date()).getTime();
-    // set expiry to exactly 24 hours from now
-    const cookieExpiry = new Date(signupTimestamp + 1 * 864e5);
-    setCookie(cookieName, surveyType, cookieExpiry);
-  }
-}

src/data/utils/dataUtils.js

@@ -76,3 +76,8 @@ export const windowScrollTo = (options) => {
 
   return window.scrollTo(options.top, options.left);
 };
+
+export const isHostAvailableInQueryParams = () => {
+  const queryParams = getAllPossibleQueryParams();
+  return 'host' in queryParams;
+};

src/data/utils/index.js

@@ -1,10 +1,11 @@
 export {
   getTpaProvider,
   getTpaHint,
-  updatePathWithQueryParams,
   getAllPossibleQueryParams,
   getActivationStatus,
+  isHostAvailableInQueryParams,
+  updatePathWithQueryParams,
   windowScrollTo,
 } from './dataUtils';
 export { default as AsyncActionType } from './reduxUtils';
-export { default as setSurveyCookie, setCookie } from './cookies';
+export { default as setCookie } from './cookies';

src/forgot-password/ForgotPasswordPage.jsx

@@ -15,13 +15,13 @@ import {
 import { ChevronLeft } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { Redirect } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { forgotPassword, setForgotPasswordFormData } from './data/actions';
 import { forgotPasswordResultSelector } from './data/selectors';
 import ForgotPasswordAlert from './ForgotPasswordAlert';
 import messages from './messages';
-import { BaseComponent } from '../base-component';
+import BaseContainer from '../base-container';
 import { FormGroup } from '../common-components';
 import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
 import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
@@ -38,7 +38,7 @@ const ForgotPasswordPage = (props) => {
   const [bannerEmail, setBannerEmail] = useState('');
   const [formErrors, setFormErrors] = useState('');
   const [validationError, setValidationError] = useState(emailValidationError);
-  const [key, setKey] = useState('');
+  const navigate = useNavigate();
 
   useEffect(() => {
     sendPageEvent('login_and_registration', 'reset');
@@ -95,19 +95,16 @@ const ForgotPasswordPage = (props) => {
   );
 
   return (
-    <BaseComponent>
+    <BaseContainer>
       <Helmet>
         <title>{formatMessage(messages['forgot.password.page.title'],
           { siteName: getConfig().SITE_NAME })}
         </title>
       </Helmet>
       <div>
-        <Tabs activeKey="" id="controlled-tab" onSelect={(k) => setKey(k)}>
+        <Tabs activeKey="" id="controlled-tab" onSelect={(key) => navigate(updatePathWithQueryParams(key))}>
           <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
         </Tabs>
-        { key && (
-          <Redirect to={updatePathWithQueryParams(key)} />
-        )}
         <div id="main-content" className="main-content">
           <Form id="forget-password-form" name="forget-password-form" className="mw-xs">
             <ForgotPasswordAlert email={bannerEmail} emailError={formErrors} status={status} />
@@ -163,7 +160,7 @@ const ForgotPasswordPage = (props) => {
           </Form>
         </div>
       </div>
-    </BaseComponent>
+    </BaseContainer>
   );
 };
 

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -4,9 +4,8 @@ import { Provider } from 'react-redux';
 import { mergeConfig } from '@edx/frontend-platform';
 import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
-import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
-import { MemoryRouter, Router } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import { INTERNAL_SERVER_ERROR, LOGIN_PAGE } from '../../data/constants';
@@ -14,15 +13,20 @@ import { PASSWORD_RESET } from '../../reset-password/data/constants';
 import { setForgotPasswordFormData } from '../data/actions';
 import ForgotPasswordPage from '../ForgotPasswordPage';
 
+const mockedNavigator = jest.fn();
+
 jest.mock('@edx/frontend-platform/analytics', () => ({
   sendPageEvent: jest.fn(),
   sendTrackEvent: jest.fn(),
 }));
 jest.mock('@edx/frontend-platform/auth');
+jest.mock('react-router-dom', () => ({
+  ...(jest.requireActual('react-router-dom')),
+  useNavigate: () => mockedNavigator,
+}));
 
 const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
 const mockStore = configureStore();
-const history = createMemoryHistory();
 
 const initialState = {
   forgotPassword: {
@@ -225,15 +229,11 @@ describe('ForgotPasswordPage', () => {
   });
 
   it('should redirect onto login page', async () => {
-    const forgotPasswordPage = mount(reduxWrapper(
-      <Router history={history}>
-        <IntlForgotPasswordPage {...props} />
-      </Router>,
-    ));
+    const forgotPasswordPage = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
 
     await act(async () => { await forgotPasswordPage.find('nav').find('a').first().simulate('click'); });
 
     forgotPasswordPage.update();
-    expect(history.location.pathname).toEqual(LOGIN_PAGE);
+    expect(mockedNavigator).toHaveBeenCalledWith(LOGIN_PAGE);
   });
 });

src/i18n/index.jsx

@@ -2,35 +2,37 @@ import { messages as paragonMessages } from '@edx/paragon';
 
 import arMessages from './messages/ar.json';
 import deMessages from './messages/de.json';
-import dedeCAMessages from './messages/de_DE.json';
+import deDEMessages from './messages/de_DE.json';
 import es419Messages from './messages/es_419.json';
+import faIRMessages from './messages/fa_IR.json';
 import frMessages from './messages/fr.json';
 import frCAMessages from './messages/fr_CA.json';
 import hiMessages from './messages/hi.json';
 import itMessages from './messages/it.json';
-import ititCAMessages from './messages/it_IT.json';
+import itITMessages from './messages/it_IT.json';
 import ptMessages from './messages/pt.json';
-import ptptCAMessages from './messages/pt_PT.json';
+import ptPTMessages from './messages/pt_PT.json';
 import ruMessages from './messages/ru.json';
 import ukMessages from './messages/uk.json';
-import zhcnMessages from './messages/zh_CN.json';
+import zhCNMessages from './messages/zh_CN.json';
 // no need to import en messages-- they are in the defaultMessage field
 
 const appMessages = {
   ar: arMessages,
-  'es-419': es419Messages,
-  fr: frMessages,
-  'zh-cn': zhcnMessages,
-  pt: ptMessages,
-  it: itMessages,
   de: deMessages,
-  hi: hiMessages,
+  'de-de': deDEMessages,
+  'es-419': es419Messages,
+  'fa-ir': faIRMessages,
+  fr: frMessages,
   'fr-ca': frCAMessages,
+  hi: hiMessages,
+  it: itMessages,
+  'it-it': itITMessages,
+  pt: ptMessages,
+  'pt-pt': ptPTMessages,
   ru: ruMessages,
   uk: ukMessages,
-  'de-de': dedeCAMessages,
-  'it-it': ititCAMessages,
-  'pt-pt': ptptCAMessages,
+  'zh-cn': zhCNMessages,
 };
 
 export default [

src/i18n/messages/ar.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "ابدأ التعلم ",
   "with.site.name": "مع {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "أهلا بك {username} في {siteName}",
   "complete.your.profile.1": "أكمل",
   "complete.your.profile.2": "ملفك الشخصي",
-  "welcome.to.platform": "أهلا بك {username} في {siteName}",
   "institution.login.page.sub.heading": "اختر مؤسستك من القائمة أدناه",
   "logistration.sign.in": "تسجيل الدخول",
   "logistration.register": "التسجيل",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "التوصيات | {siteName}",
   "recommendation.page.heading": "لدينا بعض التوصيات لكي تبدأ.",
   "recommendation.skip.button": "التخطي مؤقتا",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "التسجيل | {siteName}",
   "registration.fullname.label": "الاسم الكامل",
   "registration.email.label": "البريد الإلكتروني",
@@ -124,6 +135,7 @@
   "help.text.email": "لتفعيل الحساب و التحديثات الهامة",
   "create.account.for.free.button": "إنشاء حساب مجانا",
   "registration.other.options.heading": "أو سجل باستخدام:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "بيانات المؤسسة / الجامعة",
   "register.institution.login.page.title": "التسجيل باستخدام بيانات المؤسسة / الجامعة",
   "empty.name.field.error": "أدخل اسمك الكامل",

src/i18n/messages/de.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Start learning",
   "with.site.name": "with {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "complete.your.profile.1": "Complete",
   "complete.your.profile.2": "your profile",
-  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "institution.login.page.sub.heading": "Choose your institution from the list below",
   "logistration.sign.in": "Sign in",
   "logistration.register": "Register",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Register | {siteName}",
   "registration.fullname.label": "Full name",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "For account activation and important updates",
   "create.account.for.free.button": "Create an account for free",
   "registration.other.options.heading": "Or register with:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Institution/campus credentials",
   "register.institution.login.page.title": "Register with institution/campus credentials",
   "empty.name.field.error": "Enter your full name",

src/i18n/messages/de_DE.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Beginne zu lernen",
   "with.site.name": "mit {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Willkommen bei {siteName}, {username}!",
   "complete.your.profile.1": "Vervollständige",
   "complete.your.profile.2": "dein Profil",
-  "welcome.to.platform": "Willkommen bei {siteName}, {username}!",
   "institution.login.page.sub.heading": "Wählen Sie Ihre Institution aus der folgenden Liste aus",
   "logistration.sign.in": "Anmelden",
   "logistration.register": "Registrieren",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Empfehlungen | {siteName}",
   "recommendation.page.heading": "Wir haben ein paar Empfehlungen für den Einstieg.",
   "recommendation.skip.button": "Überspringen",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Registrieren | {siteName}",
   "registration.fullname.label": "Vollständiger Name",
   "registration.email.label": "E-Mail-Adresse",
@@ -124,6 +135,7 @@
   "help.text.email": "Für die Kontoaktivierung und wichtige Updates",
   "create.account.for.free.button": "Erstellen Sie kostenlos ein Benutzerkonto",
   "registration.other.options.heading": "Oder registrieren Sie sich bei:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Zeugnisse der Institution/des Campus",
   "register.institution.login.page.title": "Registrieren Sie sich mit Institutions-/Campus-Anmeldeinformationen",
   "empty.name.field.error": "Geben Sie Ihren vollständigen Namen ein",

src/i18n/messages/es_419.json

@@ -1,15 +1,17 @@
 {
   "start.learning": "Empieza a aprender",
   "with.site.name": "con {siteName}",
+  "your.career.turning.point": "El punto de inflexión de tu carrera",
+  "is.here": "es aquí.",
+  "welcome.to.platform": "¡Bienvenido a {siteName}, {username}!",
   "complete.your.profile.1": "Completado",
   "complete.your.profile.2": "tu perfil ",
-  "welcome.to.platform": "¡Bienvenido a {siteName}, {username}!",
   "institution.login.page.sub.heading": "Selecciona tu institución de la lista siguiente",
   "logistration.sign.in": "Iniciar sesión",
   "logistration.register": "Registrarse",
   "enterprisetpa.title.heading": "¿Deseas iniciar sesión con tus credenciales de {providerName}?",
   "enterprisetpa.login.button.text": "Mostrar otras formas de iniciar sesión o de registrarme",
-  "enterprisetpa.login.button.text.public.account.creation.disabled": "Show me other ways to sign in",
+  "enterprisetpa.login.button.text.public.account.creation.disabled": "Mostrar otras formas de iniciar sesión",
   "sso.sign.in.with": "Inicio de sesión con {providerName}",
   "sso.create.account.using": "Crear una cuenta con {providerName}",
   "show.password": "Mostrar contraseña",
@@ -22,8 +24,8 @@
   "login.third.party.auth.account.not.linked": "Te has registrado correctamente en {currentProvider}, pero tu cuenta de {currentProvider} no tiene una cuenta de {platformName} asociada. Para asociar tus cuentas, inicia sesión ahora usando tu contraseña de {platformName}.",
   "register.third.party.auth.account.not.linked": "¡Has iniciado sesión con éxito en {currentProvider}! Sólo necesitamos un poco más de información antes de que empieces a aprender con {platformName}.",
   "registration.using.tpa.form.heading": "Termina de crear tu cuenta",
-  "zendesk.supportTitle": "edX Support",
-  "zendesk.selectTicketForm": "Please choose your request type:",
+  "zendesk.supportTitle": "Soporte edX",
+  "zendesk.selectTicketForm": "Elegir el tipo de solicitud:",
   "error.notfound.message": "La página que estas buscando no está disponible o hay un error en la URL. Por favor, verifica la URL y vuelve a intentarlo.",
   "forgot.password.confirmation.message": "Hemos enviado un correo electrónico a {email} con instrucciones para restablecer tu contraseña.\n          Si no recibes un mensaje de restablecimiento de contraseña después de 1 minuto, verifica que has introducido\n          la dirección de correo electrónico correcta, o comprueba tu carpeta de correo no deseado. Si necesitas más ayuda, {supportLink}.",
   "forgot.password.page.title": "Olvidé la contraseña | {siteName}",
@@ -96,8 +98,8 @@
   "password.security.block.body": "Nuestro sistema detectó que su contraseña es vulnerable. Cambie su contraseña para que su cuenta permanezca segura.",
   "password.security.close.button": "Cerrar",
   "password.security.redirect.to.reset.password.button": "Restablece tu contraseña",
-  "login.tpa.authentication.failure": "We are sorry, you are not authorized to access {platform_name} via this channel. Please contact your learning administrator or manager in order to access {platform_name}.{lineBreak}{lineBreak}Error Details:{lineBreak}{errorMessage}",
-  "progressive.profiling.page.title": "Welcome | {siteName}",
+  "login.tpa.authentication.failure": "Lo sentimos, no está autorizado para acceder a {platform_name} a través de este canal. Comuníquese con su administrador o gerente de aprendizaje para acceder a {platform_name}.{lineBreak}{lineBreak}Detalles del error:{lineBreak}{errorMessage}",
+  "progressive.profiling.page.title": "Bienvenido | {siteName}",
   "progressive.profiling.page.heading": "Unas cuantas preguntas para ti nos ayudarán a mejorar.",
   "optional.fields.information.link": "Aprende más sobre cómo usamos esta información.",
   "optional.fields.submit.button": "Enviar",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recomendaciones | {siteName}",
   "recommendation.page.heading": "Tenemos algunas recomendaciones para empezar.",
   "recommendation.skip.button": "Saltar por ahora ",
+  "recommendation.option.trending": "Tendencias",
+  "recommendation.option.popular": "Más popular",
+  "recommendation.product-card.pill-text.course": "Curso",
+  "recommendation.product-card.pill-text.professional-certificate": "Certificado profesional",
+  "recommendation.product-card.pill-text.emeritus": "Ofrecido en Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Ofrecido a través de Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Suscripción",
+  "recommendation.product-card.launch-icon.sr-text": "Abrir un enlace en una pestaña nueva",
   "register.page.title": "Register | {siteName}",
   "registration.fullname.label": "Nombre completo",
   "registration.email.label": "Correo electrónico",
@@ -124,6 +135,7 @@
   "help.text.email": "Para la activación de la cuenta y las actualizaciones importantes",
   "create.account.for.free.button": "Crea una cuenta gratis",
   "registration.other.options.heading": "O regístrese con:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Credenciales de la institución/campus",
   "register.institution.login.page.title": "Registro con credenciales de la institución/campus",
   "empty.name.field.error": "Introduce tu nombre completo",
@@ -141,7 +153,7 @@
   "registration.request.server.error": "Se ha producido un error. Intenta actualizar la página o comprueba tu conexión a Internet.",
   "registration.rate.limit.error": "Demasiados intentos de registro fallidos. Vuelve a intentarlo más tarde.",
   "registration.tpa.session.expired": "Inscripción usando {provider} ha expirado.",
-  "registration.tpa.authentication.failure": "We are sorry, you are not authorized to access {platform_name} via this channel. Please contact your learning administrator or manager in order to access {platform_name}.{lineBreak}{lineBreak}Error Details:{lineBreak}{errorMessage}",
+  "registration.tpa.authentication.failure": "Lo sentimos, no está autorizado para acceder a {platform_name} a través de este canal. Comuníquese con su administrador o gerente de aprendizaje para acceder a {platform_name}.{lineBreak}{lineBreak}Detalles del error:{lineBreak}{errorMessage}",
   "terms.of.service.and.honor.code": "Condiciones de servicio y código de honor",
   "privacy.policy": "Política de privacidad ",
   "honor.code": "Código de Honor",

src/i18n/messages/fa_IR.json

@@ -0,0 +1,180 @@
+{
+  "start.learning": "آغاز یادگیری",
+  "with.site.name": "با {siteName}",
+  "your.career.turning.point": "نقطه عطف حرفه ای شما",
+  "is.here": "اینجاست.",
+  "welcome.to.platform": "خوش آمدید به {siteName}, {username}!",
+  "complete.your.profile.1": "کامل",
+  "complete.your.profile.2": "پرونده کاربری شما",
+  "institution.login.page.sub.heading": "موسسه خود را از فهرست زیر برگزینید",
+  "logistration.sign.in": "ورود",
+  "logistration.register": "ثبت‌نام",
+  "enterprisetpa.title.heading": "آیا می‌خواهید با استفاده از اطلاعات کاربری {providerName} خود وارد سامانه شوید؟",
+  "enterprisetpa.login.button.text": "راه‌های دیگری برای ورود به سامانه یا ثبت‌نام به من نشان بده",
+  "enterprisetpa.login.button.text.public.account.creation.disabled": "راه های دیگری را برای ورود به سیستم به من نشان دهید",
+  "sso.sign.in.with": "با {providerName} وارد شوید",
+  "sso.create.account.using": "با استفاده از {providerName} حساب کاربری بسازید",
+  "show.password": "نمایش گذرواژه",
+  "hide.password": "پنهان‌سازی گذرواژه",
+  "one.letter": "1 نامه",
+  "one.number": "1 رقم",
+  "eight.characters": "8 نویسه",
+  "password.sr.only.helping.text": "گذرواژه باید حداقل  8 نویسه، حداقل یک حرف و حداقل یک عدد داشته باشد",
+  "tpa.alert.heading": "تقریبا تمام شد!",
+  "login.third.party.auth.account.not.linked": "شما با موفقیت به {currentProvider} وارد شدید، اما حساب کاربری {currentProvider} شما به حساب کاربری {platformName} پیوند ندارد. برای پیوند حساب‌های کاربری خود، اکنون با استفاده از گذرواژه {platformName} خود وارد شوید.",
+  "register.third.party.auth.account.not.linked": "شما با موفقیت به {currentProvider} وارد شدید! پیش از آغاز یادگیری با {platformName} فقط به کمی اطلاعات بیشتر نیاز داریم.",
+  "registration.using.tpa.form.heading": "ساخت حساب کاربری خود را به اتمام برسانید",
+  "zendesk.supportTitle": "پشتیبانی edX",
+  "zendesk.selectTicketForm": "لطفا نوع درخواست خود را انتخاب کنید:",
+  "error.notfound.message": "صفحه مورد نظر شما در دسترس نیست یا خطایی در نشانی اینترنتی وجود دارد. لطفاً نشانی اینترنتی را بررسی کرده و دوباره تلاش کنید.",
+  "forgot.password.confirmation.message": "ما رایانامه‌ای به‌همراه دستورالعمل بازنشانی گذرواژه به {email} ارسال کردیم. اگر پس از 1 دقیقه پیام بازنشانی را دریافت نکردید، بررسی کنید که نشانی رایانامه را صحیح وارد کرده‌اید یا پوشه هرزنامه خود را بررسی کنید. اگر به دریافت راهنمایی بیشتری، با {supportLink} تماس بگیرید.",
+  "forgot.password.page.title": "فراموش گذرواژه | {siteName}",
+  "forgot.password.page.heading": "بازتنظیم گذرواژه",
+  "forgot.password.page.instructions": "لطفا نشانی رایانامه خود را در قسمت زیر وارد کنید و ما  رایانامه‌ای حاوی دستورالعمل نحوه بازتنظیم مجدد گذرواژه برای شما ارسال خواهیم کرد.",
+  "forgot.password.page.invalid.email.message": "نشانی رایانامه معتبری را وارد کنید",
+  "forgot.password.page.email.field.label": "رایانامه",
+  "forgot.password.page.submit.button": "ارسال",
+  "forgot.password.error.alert.title.": "ما نتوانستیم با شما تماس بگیریم.",
+  "forgot.password.error.message.title": "خطایی رخ داد.",
+  "forgot.password.request.in.progress.message": "درخواست قبلی شما در حال انجام است، لطفا چند لحظه دیگر دوباره تلاش کنید.",
+  "forgot.password.empty.email.field.error": "نشانی رایانامه خود را وارد کنید",
+  "forgot.password.email.help.text": "نشانی رایانامه‌ای که برای ثبت‌نام در {platformName} استفاده کردید",
+  "confirmation.message.title": "صندوق رایانامه خود را ببینید",
+  "confirmation.support.link": "با پشتیبانی فنی تماس بگیرید",
+  "need.help.sign.in.text": "برای ورود به سامانه نیاز به کمک دارید؟",
+  "additional.help.text": "برای دریافت راهنمایی بیشتر، با پشتیبانی {platformName} در این آدرس تماس بگیرید",
+  "sign.in.text": "ورود",
+  "extend.field.errors": "{emailError} زیر.",
+  "invalid.token.heading": "پیوند بازتنظیم گذرواژه معتبر نیست",
+  "invalid.token.error.message": "این پیوند برای بازتنظیم گذرواژه معتبر نیست. ممکن است قبلاً استفاده شده باشد. برای دریافت پیوند جدید نشانی رایانامه خود را در زیر وارد کنید.",
+  "token.validation.rate.limit.error.heading": "تعداد زیاد درخواست",
+  "token.validation.rate.limit.error": "به دلیل درخواست‌های زیاد، خطایی روی داده است. لطفا بعد از مدتی دوباره امتحان کنید.",
+  "token.validation.internal.sever.error.heading": "اعتبارسنجی رمز انجام نشد",
+  "token.validation.internal.sever.error": "خطایی رخ داده است. صفحه را دوباره بارگیری کنید یا اتصال اینترنت خود را بررسی کنید.",
+  "internal.server.error": "خطایی رخ داده است. صفحه را دوباره بارگیری کنید یا اتصال اینترنت خود را بررسی کنید.",
+  "account.activation.error.message": "اشتباهی رخ داد، لطفاً برای حل این مساله ، به این قسمت{supportLink} مراجعه کنید.",
+  "login.inactive.user.error": "برای ورود به سامانه، باید حساب کاربری خود را فعال کنید.{lineBreak} {lineBreak}هم اکنون پیوند فعالسازی را به {email} فرستادیم. اگر رایانامه‌ای دریافت نکردید، پوشه‌های هرزنامه یا {supportLink} را بررسی کنید.",
+  "allowed.domain.login.error": "به عنوان کاربر {allowedDomain}، باید با {allowedDomain} {tpaLink} خود وارد شوید.",
+  "login.incorrect.credentials.error.attempts.text.1": "نام کاربری، نشانی رایانامه یا گذرواژه‌ای که وارد کرده‌اید نادرست است. پیش از اینکه حساب کاربری شما موقتا قفل شود، {remainingAttempts} تلاش دیگر برای ورود به سامانه دارید.",
+  "login.incorrect.credentials.error.attempts.text.2": "اگر گذرواژه خود را فراموش کرده‌اید، {resetLink}",
+  "account.locked.out.message.2": "برای حفظ امنیت، می‌توانید پیش از تلاش مجدد، {resetLink} را انجام دهید.",
+  "login.incorrect.credentials.error.with.reset.link": "نام کاربری، نشانی رایانامه یا گذرواژه‌ای که وارد کردید درست نیست. لطفاً دوباره امتحان کنید یا {resetLink}.",
+  "login.page.title": "ورود به سامانه | {siteName}",
+  "login.user.identity.label": "نام کاربری یا نشانی رایانامه",
+  "login.password.label": "گذرواژه",
+  "sign.in.button": "ورود به سامانه",
+  "forgot.password": "فراموشی گذرواژه",
+  "institution.login.button": "اعتبارنامه‌های موسسه/پردیس",
+  "institution.login.page.title": "با اعتبار موسسه/پردیس وارد شوید",
+  "login.other.options.heading": "یا وارد شوید با:",
+  "non.compliant.password.title": "ما اخیراً الزامات گذرواژه خود را تغییر دادیم",
+  "non.compliant.password.message": "گذرواژه فعلی شما الزامات امنیتی جدید را برآورده نمی‌کند. ما فقط یک پیام بازتنظیم گذرواژه به نشانی رایانامه مرتبط با این حساب کاربری ارسال کردیم. از اینکه به ما کمک می‌کنید تا داده‌های شما را ایمن نگه دارید متشکریم.",
+  "account.locked.out.message.1": "حساب کاربری شما، به دلیل حفاظت، به‌طور موقت قفل شده است. 30 دقیقه دیگر دوباره امتحان کنید.",
+  "enterprise.login.btn.text": "اعتبار دانشکده یا شرکت",
+  "username.or.email.format.validation.less.chars.message": "نام کاربری یا نشانی رایانامه حداقل باید 3 نویسه داشته باشد",
+  "email.validation.message": "نام کاربری یا رایانامه خود را وارد کنید",
+  "password.validation.message": "معیارهای گذرواژه رعایت نشده است",
+  "account.activation.success.message.title": "موفق شدید! شما حساب کاربری خود را فعال کردید.",
+  "account.activation.success.message": "اکنون رایانامه‌های مربوط به روزآمدسازی‌ها و هشدارها درباره دوره‌های آموزشی را که در آن ثبت‌نام کرده‌اید از ما دریافت خواهید کرد. برای ادامه وارد شوید.",
+  "account.activation.info.message": "حساب کاربری مورد نظر شما قبلاً فعال شده است.",
+  "account.activation.error.message.title": "امکان فعالسازی حساب کاربری شما نبود",
+  "account.activation.support.link": "تماس با پشتیبانی ",
+  "account.confirmation.success.message.title": "موفق شدید! نشانی رایانامه خود را تایید کردید.",
+  "account.confirmation.success.message": "برای ادامه وارد سامانه شوید.",
+  "account.confirmation.info.message": "این نشانی رایانامه قبلا تایید شده‌است.",
+  "account.confirmation.error.message.title": "امکان تایید نشانی رایانامه شما وجود ندارد",
+  "tpa.account.link": "حساب {provider}",
+  "internal.server.error.message": "خطایی رخ داده است. صفحه را دوباره بارگیری کنید یا اتصال اینترنت خود را بررسی کنید.",
+  "login.rate.limit.reached.message": "شما برای ورود به حساب کاربری چند بار تلاش ناموفق داشتید. لطفا بعدا تلاش نمایید.",
+  "login.failure.header.title": "قادر نیستیم شما را به سامانه وارد کنیم.",
+  "contact.support.link": "با پشتیبانی {platformName} تماس بگیرید",
+  "login.incorrect.credentials.error": "نام کاربری، نشانی رایانامه یا گذرواژه‌ای که وارد کردید نادرست است. لطفا دوباره تلاش کنید.",
+  "login.form.invalid.error.message": "لطفا قسمت‌های زیر را پر کنید.",
+  "login.incorrect.credentials.error.reset.link.text": "گذرواژه را بازتنظیم کنید",
+  "login.incorrect.credentials.error.before.account.blocked.text": "برای بازتنظیم اینجا بزنید",
+  "password.security.nudge.title": "امنیت گذرواژه",
+  "password.security.block.title": "تغییر گذرواژه ضروری است",
+  "password.security.nudge.body": "سامانه ما تشخیص داده است که گذرواژه شما آسیب‌پذیر است. توصیه ما این است که آن را تغییر دهید تا حساب کاربری شما ایمن بماند.",
+  "password.security.block.body": "سامانه ما تشخیص داده است که گذرواژه شما ضعیف و آسیب‌پذیر است. گذرواژه خود را تغییر دهید تا حساب کاربری شما ایمن بماند.",
+  "password.security.close.button": "بستن",
+  "password.security.redirect.to.reset.password.button": "بازتنظیم گذرواژه",
+  "login.tpa.authentication.failure": "متأسفیم، شما مجاز به دسترسی به {platform_name} از طریق این کانال نیستید. لطفاً برای دسترسی به {platform_name} با سرپرست یا مدیر آموزشی خود تماس بگیرید.{lineBreak}{lineBreak}جزئیات خطا:{lineBreak}{errorMessage}",
+  "progressive.profiling.page.title": "خوش آمدید | {siteName}",
+  "progressive.profiling.page.heading": "چند سوال برای شما به ما کمک خواهد کرد تا باهوش‌تر شویم.",
+  "optional.fields.information.link": "درباره نحوه استفاده ما از این اطلاعات بیشتر بدانید.",
+  "optional.fields.submit.button": "ارسال",
+  "optional.fields.skip.button": "فعلا بگذرید",
+  "optional.fields.next.button": "بعدی",
+  "continue.to.platform": "ادامه در {platformName}",
+  "modal.title": "از اینکه اطلاع دادید تشکر می‌کنیم.",
+  "modal.description": "در صورت تغییر تصمیم‌تان، شما هر زمانی این امکان را دارید که پرونده کاربری خود را در قسمت تنظیمات تکمیل کنید. ",
+  "welcome.page.error.heading": "امکان روزآمدسازی پرونده کاربری شما نیست",
+  "welcome.page.error.message": "خطایی رخ داد. می‌توانید پرونده کاربری خود را هر زمان در قسمت تنظیمات تکمیل کنید.",
+  "recommendation.page.title": "توصیه ها | {siteName}",
+  "recommendation.page.heading": "ما چند توصیه برای شروع کار داریم.",
+  "recommendation.skip.button": "فعلا بگذرید",
+  "recommendation.option.trending": "پرطرفدار",
+  "recommendation.option.popular": "محبوبترین",
+  "recommendation.product-card.pill-text.course": "دوره آموزشی",
+  "recommendation.product-card.pill-text.professional-certificate": "گواهی حرفه‌ای",
+  "recommendation.product-card.pill-text.emeritus": "ارائه شده در Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "از طریق Shorelight ارائه می شود",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "اشتراک",
+  "recommendation.product-card.launch-icon.sr-text": "پیوندی را در یک برگه جدید باز می کند",
+  "register.page.title": "ثبت‌نام | {siteName}",
+  "registration.fullname.label": "نام و نام خانوادگی",
+  "registration.email.label": "رایانامه",
+  "registration.username.label": "نام‌کاربری عمومی",
+  "registration.password.label": "گذرواژه",
+  "registration.country.label": "کشور/منطقه",
+  "registration.opt.in.label": "با ارسال پیام‌های بازرگانی از سوی  {siteName} موافقم.",
+  "help.text.name": "این نام در هر گواهی که بدست آورید استفاده خواهد شد.",
+  "help.text.username.1": "نامی که شما را در دوره‌های آموزشی با آن شناخته خواهید شد.",
+  "help.text.username.2": "این مورد بعدا قابل تغییر نیست.",
+  "help.text.email": "برای فعال‌سازی حساب کاربری و روزآمدسازی‌های مهم",
+  "create.account.for.free.button": "یک حساب کاربری رایگان بسازید",
+  "registration.other.options.heading": "یا ثبت‌نام کنید با:",
+  "create.account.cta.button": "{label}",
+  "register.institution.login.button": "اعتبارنامه‌های موسسه/پردیس",
+  "register.institution.login.page.title": "با اعتبارنامه موسسه/پردیس ثبت‌نام کنید",
+  "empty.name.field.error": "نام و نام خانوادگی خود را وارد کنید",
+  "empty.email.field.error": "نشانی رایانامه خود را وارد کنید",
+  "empty.username.field.error": "نام کاربری باید بین 2 تا 30 نویسه داشته باشد",
+  "empty.password.field.error": "معیارهای گذرواژه رعایت نشده است",
+  "empty.country.field.error": "کشور یا منطقه محل سکونت خود را برگزینید",
+  "email.do.not.match": "نشانی‌های رایانامه همخوانی ندارند.",
+  "email.invalid.format.error": "نشانی رایانامه معتبر وارد کنید",
+  "username.validation.message": "نام کاربری باید بین 2 تا 30 نویسه داشته باشد",
+  "name.validation.message": "نامی معتبر وارد کنید",
+  "username.format.validation.message": "نام کاربری فقط می‌تواند شامل حروف (A-Z، a-z)، اعداد (0-9)، خط زیر (_) و خط فاصله (-) باشد. نام کاربری نمی‌تواند حاوی فاصله باشد",
+  "registration.request.failure.header": "موفق به ایجاد حساب کاربری شما نشدیم.",
+  "registration.empty.form.submission.error": "لطفاً پاسخ‌های خود را بررسی کرده و دوباره امتحان کنید.",
+  "registration.request.server.error": "خطایی رخ داده است. صفحه را دوباره بارگیری کنید یا اتصال اینترنت خود را بررسی کنید.",
+  "registration.rate.limit.error": "تعداد دفعات تلاش ناموفق برای ثبت‌نام بسیار بوده است. بعدا دوباره تلاش کنید.",
+  "registration.tpa.session.expired": "مهلت ثبت‌نام  {provider} به پایان رسیده‌است.",
+  "registration.tpa.authentication.failure": "متأسفیم، شما مجاز به دسترسی به {platform_name} از طریق این کانال نیستید. لطفاً برای دسترسی به {platform_name} با سرپرست یا مدیر آموزشی خود تماس بگیرید.{lineBreak}{lineBreak}جزئیات خطا:{lineBreak}{errorMessage}",
+  "terms.of.service.and.honor.code": "شرایط استفاده از خدمات و اصول اخلاقی",
+  "privacy.policy": "قواعد حفظ حریم خصوصی",
+  "honor.code": "اصول اخلاقی",
+  "terms.of.service": "شرایط استفاده از خدمات",
+  "registration.username.suggestion.label": "پیشنهادشده:",
+  "did.you.mean.alert.text": "منظور شما این بود",
+  "register.page.terms.of.service.and.honor.code": "با ایجاد یک حساب کاربری، با {tosAndHonorCode} موافقت می‌کنید و تصدیق می‌کنید که {platformName} و هر عضو داده‌های شخصی شما را مطابق با {privacyPolicy} پردازش می‌کنند.",
+  "register.page.honor.code": "من با {platformName} {tosAndHonorCode} موافقم",
+  "register.page.terms.of.service": "من با {platformName} {termsOfService} موافقم",
+  "sign.in": "ورود",
+  "reset.password.page.title": "بازتنظیم گذرواژه | {siteName}",
+  "reset.password": "بازتنظیم گذرواژه",
+  "reset.password.page.instructions": "گذرواژه جدید را مجددا وارد کنید ",
+  "new.password.label": "گذرواژه جدید",
+  "confirm.password.label": "تایید گذرواژه",
+  "passwords.do.not.match": "گذرواژه‌ها مطابقت ندارند",
+  "confirm.your.password": "تایید گذرواژه ",
+  "reset.password.failure.heading": "امکان بازتنظیم گذرواژه شما نیست.",
+  "reset.password.form.submission.error": "لطفاً پاسخ‌های خود را بررسی کرده و دوباره امتحان کنید.",
+  "reset.server.rate.limit.error": "تعداد درخواست‌ها خیلی زیاد است.",
+  "reset.password.success.heading": "بازتنظیم گذرواژه  تکمیل شد.",
+  "reset.password.success": "گذرواژه شما بازتنظیم شد. وارد حساب کاربری خود شوید",
+  "rate.limit.error": "به دلیل درخواست‌های زیاد، خطایی روی داده است. لطفا بعد از مدتی دوباره امتحان کنید."
+}

src/i18n/messages/fr.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Démarrer l'apprentissage",
   "with.site.name": "avec {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Bienvenue sur {siteName}, {username}!",
   "complete.your.profile.1": "Terminé",
   "complete.your.profile.2": "votre profil",
-  "welcome.to.platform": "Bienvenue sur {siteName}, {username}!",
   "institution.login.page.sub.heading": "Sélectionner votre institution dans la liste ci-dessous",
   "logistration.sign.in": "Connectez-vous",
   "logistration.register": "S'inscrire",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "S'inscrire | {siteName}",
   "registration.fullname.label": "Nom complet",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "Pour l'activation du compte et les mises à jour importantes",
   "create.account.for.free.button": "Créer un compte gratuitement",
   "registration.other.options.heading": "Ou inscrivez-vous avec :",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Identifiants de l'établissement/du campus",
   "register.institution.login.page.title": "Inscription avec les crédentiels d'institution ou de campus",
   "empty.name.field.error": "Saisissez votre nom complet",

src/i18n/messages/fr_CA.json

@@ -1,13 +1,15 @@
 {
-  "start.learning": "Démarrer l'apprentissage",
+  "start.learning": "Commencez à apprendre",
   "with.site.name": "avec {siteName}",
+  "your.career.turning.point": "Votre tournant de carrière",
+  "is.here": "est là.",
+  "welcome.to.platform": "Bienvenue sur {siteName}, {username}!",
   "complete.your.profile.1": "Complet",
   "complete.your.profile.2": "votre profil",
-  "welcome.to.platform": "Bienvenue sur {siteName}, {username}!",
   "institution.login.page.sub.heading": "Sélectionner votre institution dans la liste ci-dessous",
   "logistration.sign.in": "Connexion",
   "logistration.register": "Inscription",
-  "enterprisetpa.title.heading": "Souhaitez-vous vous connecter à l'aide de vos identifiants {providerName}?",
+  "enterprisetpa.title.heading": "Souhaitez-vous vous connecter à l'aide de vos informations d'identification {providerName}?",
   "enterprisetpa.login.button.text": "Affichez moi d'autres façons de se connecter ou de s'inscrire",
   "enterprisetpa.login.button.text.public.account.creation.disabled": "Montrez-moi d'autres façons de me connecter",
   "sso.sign.in.with": "Connectez-vous avec {providerName}",
@@ -22,7 +24,7 @@
   "login.third.party.auth.account.not.linked": "Vous vous êtes connecté avec succès à {currentProvider}, mais votre compte {currentProvider} n'a pas de compte relié à {platformName}. Pour lier vos comptes, connectez-vous en utilisant votre mot de passe {platformName}.",
   "register.third.party.auth.account.not.linked": "Vous vous êtes connecté avec succès à {currentProvider}! Nous avons juste besoin d'un peu plus d'informations avant que vous commenciez à apprendre avec {platformName}.",
   "registration.using.tpa.form.heading": "Terminer la création de votre compte",
-  "zendesk.supportTitle": "Prise en charge d'edX",
+  "zendesk.supportTitle": "Prise en charge d'edX",
   "zendesk.selectTicketForm": "Veuillez choisir votre type de demande :",
   "error.notfound.message": "La page que vous recherchez n'est pas disponible ou il y a une erreur dans l'URL. Veuillez vérifier l'URL et réessayer.",
   "forgot.password.confirmation.message": "Nous avons envoyé un courriel à {email} avec des instructions pour réinitialiser votre mot de passe.\n          Si vous ne recevez pas de message de réinitialisation de mot de passe après 1 minute, vérifiez que vous avez saisi\nl'adresse courriel correctement, ou vérifiez votre dossier de pourriels. Si vous avez besoin d'aide supplémentaire, {supportLink}.",
@@ -40,7 +42,7 @@
   "confirmation.message.title": "Vérifiez votre courriel",
   "confirmation.support.link": "contacter le support technique",
   "need.help.sign.in.text": "Besoin d'aide pour vous connecter?",
-  "additional.help.text": "Pour obtenir une aide supplémentaire, contactez l'assistance {platformName} à l'adresse",
+  "additional.help.text": "Pour obtenir une aide supplémentaire, contactez l'assistance {platformName} à l'adresse ",
   "sign.in.text": "Connexion",
   "extend.field.errors": "{emailError} ci-dessous.",
   "invalid.token.heading": "Lien de réinitialisation du mot de passe non valide",
@@ -62,13 +64,13 @@
   "login.password.label": "Mot de passe",
   "sign.in.button": "Connexion",
   "forgot.password": "Mot de passe oublié",
-  "institution.login.button": "Identifiants de l'établissement/du campus",
-  "institution.login.page.title": "Connectez vous avec les crédentiels d'institution ou de campus",
+  "institution.login.button": "Informations d'identification de l'établissement/du campus",
+  "institution.login.page.title": "Connectez vous avec les informations d'identification d'institution ou de campus",
   "login.other.options.heading": "Ou se connecter avec :",
   "non.compliant.password.title": "Nous avons récemment modifié nos exigences en matière de mot de passe",
   "non.compliant.password.message": "Votre mot de passe actuel ne répond pas aux nouvelles exigences de sécurité. Nous venons d'envoyer un message de réinitialisation de mot de passe à l'adresse courriel associée à ce compte. Merci de nous aider à protéger vos données.",
   "account.locked.out.message.1": "Pour protéger votre compte, il a été temporairement verrouillé. Réessayez dans 30 minutes.",
-  "enterprise.login.btn.text": "Identifiants de la compagnie ou de l'école",
+  "enterprise.login.btn.text": "Informations d'identification de la compagnie ou de l'école",
   "username.or.email.format.validation.less.chars.message": "Le nom d'utilisateur ou l'adresse courriel doit comporter au moins 3 caractères.",
   "email.validation.message": "Entrez votre nom d'utilisateur ou votre adresse courriel",
   "password.validation.message": "Les critères de mot de passe n'ont pas été remplis",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommandations | {siteName}",
   "recommendation.page.heading": "Nous avons quelques recommandations pour vous aider à démarrer.",
   "recommendation.skip.button": "Ignorer pour l'instant",
+  "recommendation.option.trending": "Tendance",
+  "recommendation.option.popular": "Le plus populaire",
+  "recommendation.product-card.pill-text.course": "Cours",
+  "recommendation.product-card.pill-text.professional-certificate": "Attestation professionnelle",
+  "recommendation.product-card.pill-text.emeritus": "Offert à titre émérite",
+  "recommendation.product-card.pill-text.shorelight": "Offert par Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Abonnement",
+  "recommendation.product-card.launch-icon.sr-text": "Ouvre un lien dans un nouvel onglet",
   "register.page.title": "S'inscrire | {siteName}",
   "registration.fullname.label": "Nom complet",
   "registration.email.label": "Courriel",
@@ -124,8 +135,9 @@
   "help.text.email": "Pour l'activation du compte et les mises à jour importantes",
   "create.account.for.free.button": "Créer un compte gratuitement",
   "registration.other.options.heading": "Ou inscrivez-vous avec :",
-  "register.institution.login.button": "Identifiants de l'établissement/du campus",
-  "register.institution.login.page.title": "Inscription avec les crédentiels d'institution ou de campus",
+  "create.account.cta.button": "{label}",
+  "register.institution.login.button": "Informations d'identification de l'établissement/du campus",
+  "register.institution.login.page.title": "Inscription avec les informations d'identification d'institution ou de campus",
   "empty.name.field.error": "Saisissez votre nom complet",
   "empty.email.field.error": "Saisissez votre courriel",
   "empty.username.field.error": "Le nom d'utilisateur doit comporter entre 2 et 30 caractères",
@@ -135,7 +147,7 @@
   "email.invalid.format.error": "Entrez une adresse de courriel valide",
   "username.validation.message": "Le nom d'utilisateur doit comporter entre 2 et 30 caractères",
   "name.validation.message": "Entrez un nom valide",
-  "username.format.validation.message": "Les noms d'utilisateur ne peuvent contenir que des lettres (AZ, az), des chiffres (0-9), des traits de soulignement (_) et des traits d'union (-). Les noms d'utilisateur ne peuvent pas contenir d'espaces",
+  "username.format.validation.message": "Les noms d'utilisateur ne peuvent contenir que des lettres (A-Z, a-z), des chiffres (0-9), des traits de soulignement (_) et des traits d'union (-). Les noms d'utilisateur ne peuvent pas contenir d'espaces",
   "registration.request.failure.header": "Nous n'avons pas pu créer votre compte.",
   "registration.empty.form.submission.error": "Veuillez vérifier vos réponses et réessayer.",
   "registration.request.server.error": "Une erreur est survenue. Essayer de rafraîchir la page, ou vérifier votre connexion Internet.",

src/i18n/messages/hi.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Start learning",
   "with.site.name": "with {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "complete.your.profile.1": "Complete",
   "complete.your.profile.2": "your profile",
-  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "institution.login.page.sub.heading": "Choose your institution from the list below",
   "logistration.sign.in": "Sign in",
   "logistration.register": "Register",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Register | {siteName}",
   "registration.fullname.label": "Full name",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "For account activation and important updates",
   "create.account.for.free.button": "Create an account for free",
   "registration.other.options.heading": "Or register with:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Institution/campus credentials",
   "register.institution.login.page.title": "Register with institution/campus credentials",
   "empty.name.field.error": "Enter your full name",

src/i18n/messages/it.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Start learning",
   "with.site.name": "with {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "complete.your.profile.1": "Complete",
   "complete.your.profile.2": "your profile",
-  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "institution.login.page.sub.heading": "Choose your institution from the list below",
   "logistration.sign.in": "Sign in",
   "logistration.register": "Register",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Register | {siteName}",
   "registration.fullname.label": "Full name",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "For account activation and important updates",
   "create.account.for.free.button": "Create an account for free",
   "registration.other.options.heading": "Or register with:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Institution/campus credentials",
   "register.institution.login.page.title": "Register with institution/campus credentials",
   "empty.name.field.error": "Enter your full name",

src/i18n/messages/it_IT.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Inizia a imparare",
   "with.site.name": "con {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Benvenuto in {siteName}, {username}!",
   "complete.your.profile.1": "Completata",
   "complete.your.profile.2": "Il tuo profilo",
-  "welcome.to.platform": "Benvenuto in {siteName}, {username}!",
   "institution.login.page.sub.heading": "Scegli il tuo istituto dall'elenco sottostante",
   "logistration.sign.in": "Accedi",
   "logistration.register": "Registrazione",
@@ -97,7 +99,7 @@
   "password.security.close.button": "Chiudi",
   "password.security.redirect.to.reset.password.button": "Ripristina la tua password",
   "login.tpa.authentication.failure": "We are sorry, you are not authorized to access {platform_name} via this channel. Please contact your learning administrator or manager in order to access {platform_name}.{lineBreak}{lineBreak}Error Details:{lineBreak}{errorMessage}",
-  "progressive.profiling.page.title": "Welcome | {siteName}",
+  "progressive.profiling.page.title": "Benvenuto | {siteName}",
   "progressive.profiling.page.heading": "Alcune domande per te ci aiuteranno a diventare più intelligenti.",
   "optional.fields.information.link": "Ulteriori informazioni su come utilizziamo queste informazioni.",
   "optional.fields.submit.button": "Invia",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Registrazione | {siteName}",
   "registration.fullname.label": "Nome e Cognome",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "Per l'attivazione dell'account e aggiornamenti importanti",
   "create.account.for.free.button": "Crea un account gratis",
   "registration.other.options.heading": "Oppure registrati con:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Credenziali dell'istituto/campus",
   "register.institution.login.page.title": "Registrati con le credenziali dell'istituzione/campus",
   "empty.name.field.error": "Inserisci il tuo nome e cognome",

src/i18n/messages/pt.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Start learning",
   "with.site.name": "with {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "complete.your.profile.1": "Complete",
   "complete.your.profile.2": "your profile",
-  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "institution.login.page.sub.heading": "Choose your institution from the list below",
   "logistration.sign.in": "Sign in",
   "logistration.register": "Register",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Register | {siteName}",
   "registration.fullname.label": "Full name",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "For account activation and important updates",
   "create.account.for.free.button": "Create an account for free",
   "registration.other.options.heading": "Or register with:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Institution/campus credentials",
   "register.institution.login.page.title": "Register with institution/campus credentials",
   "empty.name.field.error": "Enter your full name",

src/i18n/messages/pt_PT.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Começar a aprender",
   "with.site.name": "com {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Bem vindo a {siteName}, {username}!",
   "complete.your.profile.1": "Concluído",
   "complete.your.profile.2": "o seu perfil",
-  "welcome.to.platform": "Bem vindo a {siteName}, {username}!",
   "institution.login.page.sub.heading": "Escolha a sua instituição a partir da lista abaixo",
   "logistration.sign.in": "Iniciar sessão",
   "logistration.register": "Registe-se",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recomendações | {siteName}",
   "recommendation.page.heading": "Temos algumas recomendações para o ajudar a começar.",
   "recommendation.skip.button": "Saltar por enquanto",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Registar | {siteName}",
   "registration.fullname.label": "Nome completo",
   "registration.email.label": "E-mail",
@@ -124,6 +135,7 @@
   "help.text.email": "Para ativação de contas e atualizações importantes",
   "create.account.for.free.button": "Criar uma conta gratuitamente",
   "registration.other.options.heading": "Ou registe-se com:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Credenciais da instituição/campus",
   "register.institution.login.page.title": "Registo com credenciais da instituição/campus",
   "empty.name.field.error": "Insira o seu nome completo",

src/i18n/messages/ru.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Start learning",
   "with.site.name": "with {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "complete.your.profile.1": "Complete",
   "complete.your.profile.2": "your profile",
-  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "institution.login.page.sub.heading": "Choose your institution from the list below",
   "logistration.sign.in": "Sign in",
   "logistration.register": "Register",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Register | {siteName}",
   "registration.fullname.label": "Full name",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "For account activation and important updates",
   "create.account.for.free.button": "Create an account for free",
   "registration.other.options.heading": "Or register with:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Institution/campus credentials",
   "register.institution.login.page.title": "Register with institution/campus credentials",
   "empty.name.field.error": "Enter your full name",

src/i18n/messages/uk.json

@@ -1,9 +1,11 @@
 {
   "start.learning": "Start learning",
   "with.site.name": "with {siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "complete.your.profile.1": "Complete",
   "complete.your.profile.2": "your profile",
-  "welcome.to.platform": "Welcome to {siteName}, {username}!",
   "institution.login.page.sub.heading": "Choose your institution from the list below",
   "logistration.sign.in": "Sign in",
   "logistration.register": "Register",
@@ -111,6 +113,15 @@
   "recommendation.page.title": "Recommendations | {siteName}",
   "recommendation.page.heading": "We have a few recommendations to get you started.",
   "recommendation.skip.button": "Skip for now",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
   "register.page.title": "Register | {siteName}",
   "registration.fullname.label": "Full name",
   "registration.email.label": "Email",
@@ -124,6 +135,7 @@
   "help.text.email": "For account activation and important updates",
   "create.account.for.free.button": "Create an account for free",
   "registration.other.options.heading": "Or register with:",
+  "create.account.cta.button": "{label}",
   "register.institution.login.button": "Institution/campus credentials",
   "register.institution.login.page.title": "Register with institution/campus credentials",
   "empty.name.field.error": "Enter your full name",

src/i18n/messages/zh_CN.json

@@ -1,168 +1,180 @@
 {
-  "start.learning": "Start learning",
-  "with.site.name": "with {siteName}",
-  "complete.your.profile.1": "Complete",
-  "complete.your.profile.2": "your profile",
-  "welcome.to.platform": "Welcome to {siteName}, {username}!",
-  "institution.login.page.sub.heading": "Choose your institution from the list below",
-  "logistration.sign.in": "Sign in",
-  "logistration.register": "Register",
-  "enterprisetpa.title.heading": "Would you like to sign in using your {providerName} credentials?",
-  "enterprisetpa.login.button.text": "Show me other ways to sign in or register",
-  "enterprisetpa.login.button.text.public.account.creation.disabled": "Show me other ways to sign in",
-  "sso.sign.in.with": "Sign in with {providerName}",
-  "sso.create.account.using": "Create account using {providerName}",
-  "show.password": "Show password",
-  "hide.password": "Hide password",
-  "one.letter": "1 letter",
-  "one.number": "1 number",
-  "eight.characters": "8 characters",
-  "password.sr.only.helping.text": "Password must contain at least 8 characters, at least one letter, and at least one number",
-  "tpa.alert.heading": "Almost done!",
-  "login.third.party.auth.account.not.linked": "You have successfully signed into {currentProvider}, but your {currentProvider} account does not have a linked {platformName} account. To link your accounts, sign in now using your {platformName} password.",
-  "register.third.party.auth.account.not.linked": "You've successfully signed into {currentProvider}! We just need a little more information before you start learning with {platformName}.",
-  "registration.using.tpa.form.heading": "Finish creating your account",
+  "start.learning": "开始学习",
+  "with.site.name": "{siteName}",
+  "your.career.turning.point": "Your career turning point",
+  "is.here": "is here.",
+  "welcome.to.platform": "欢迎来到{siteName}，{username}！",
+  "complete.your.profile.1": "完成",
+  "complete.your.profile.2": "个人资料",
+  "institution.login.page.sub.heading": "从下面的列表中选择您的机构",
+  "logistration.sign.in": "登录",
+  "logistration.register": "注册",
+  "enterprisetpa.title.heading": "您要使用 {providerName} 登录吗？",
+  "enterprisetpa.login.button.text": "为我显示其他登录或注册方式",
+  "enterprisetpa.login.button.text.public.account.creation.disabled": "显示其他登录方式",
+  "sso.sign.in.with": "使用 {providerName} 登录",
+  "sso.create.account.using": "使用 {providerName} 创建帐户",
+  "show.password": "显示密码",
+  "hide.password": "隐藏密码",
+  "one.letter": "1 个字母",
+  "one.number": "1个数字",
+  "eight.characters": "8个字符",
+  "password.sr.only.helping.text": "密码必须包含至少 8 个字符、至少一个字母和至少一个数字",
+  "tpa.alert.heading": "快完成了！",
+  "login.third.party.auth.account.not.linked": "您已成功登录 {currentProvider}，但您的 {currentProvider} 帐户没有关联的 {platformName} 帐户。要链接您的帐户，请立即使用您的 {platformName} 密码登录。",
+  "register.third.party.auth.account.not.linked": "您已成功登录 {currentProvider}！在您开始学习 {platformName} 之前，我们只需要更多信息。",
+  "registration.using.tpa.form.heading": "完成创建您的帐户",
   "zendesk.supportTitle": "edX Support",
   "zendesk.selectTicketForm": "Please choose your request type:",
-  "error.notfound.message": "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
-  "forgot.password.confirmation.message": "We sent an email to {email} with instructions to reset your password.\n          If you do not receive a password reset message after 1 minute, verify that you entered\n          the correct email address, or check your spam folder. If you need further assistance, {supportLink}.",
-  "forgot.password.page.title": "Forgot Password | {siteName}",
-  "forgot.password.page.heading": "Reset password",
-  "forgot.password.page.instructions": "Please enter your email address below and we will send you an email with instructions on how to reset your password.",
-  "forgot.password.page.invalid.email.message": "Enter a valid email address",
-  "forgot.password.page.email.field.label": "Email",
-  "forgot.password.page.submit.button": "Submit",
-  "forgot.password.error.alert.title.": "We were unable to contact you.",
-  "forgot.password.error.message.title": "An error occurred.",
-  "forgot.password.request.in.progress.message": "Your previous request is in progress, please try again in a few moments.",
-  "forgot.password.empty.email.field.error": "Enter your email",
-  "forgot.password.email.help.text": "The email address you used to register with {platformName}",
-  "confirmation.message.title": "Check your email",
-  "confirmation.support.link": "contact technical support",
-  "need.help.sign.in.text": "Need help signing in?",
-  "additional.help.text": "For additional help, contact {platformName} support at ",
-  "sign.in.text": "Sign in",
-  "extend.field.errors": "{emailError} below.",
-  "invalid.token.heading": "Invalid password reset link",
-  "invalid.token.error.message": "This password reset link is invalid. It may have been used already. Enter your email below to receive a new link.",
-  "token.validation.rate.limit.error.heading": "Too many requests",
-  "token.validation.rate.limit.error": "An error has occurred because of too many requests. Please try again after some time.",
-  "token.validation.internal.sever.error.heading": "Token validation failure",
-  "token.validation.internal.sever.error": "An error has occurred. Try refreshing the page, or check your internet connection.",
-  "internal.server.error": "An error has occurred. Try refreshing the page, or check your internet connection.",
-  "account.activation.error.message": "Something went wrong, please {supportLink} to resolve this issue.",
-  "login.inactive.user.error": "In order to sign in, you need to activate your account.{lineBreak}\n            {lineBreak}We just sent an activation link to {email}. If you do not receive an email,\n            check your spam folders or {supportLink}.",
-  "allowed.domain.login.error": "As {allowedDomain} user, You must login with your {allowedDomain} {tpaLink}.",
-  "login.incorrect.credentials.error.attempts.text.1": "The username, email or password you entered is incorrect. You have {remainingAttempts} more sign in\n                attempts before your account is temporarily locked.",
-  "login.incorrect.credentials.error.attempts.text.2": "If you've forgotten your password, {resetLink}",
-  "account.locked.out.message.2": "To be on the safe side, you can {resetLink} before trying again.",
-  "login.incorrect.credentials.error.with.reset.link": "The username, email, or password you entered is incorrect. Please try again or {resetLink}.",
-  "login.page.title": "Login | {siteName}",
-  "login.user.identity.label": "Username or email",
-  "login.password.label": "Password",
-  "sign.in.button": "Sign in",
-  "forgot.password": "Forgot password",
-  "institution.login.button": "Institution/campus credentials",
-  "institution.login.page.title": "Sign in with institution/campus credentials",
-  "login.other.options.heading": "Or sign in with:",
-  "non.compliant.password.title": "We recently changed our password requirements",
-  "non.compliant.password.message": "Your current password does not meet the new security requirements. We just sent a password-reset message to the email address associated with this account. Thank you for helping us keep your data safe.",
-  "account.locked.out.message.1": "To protect your account, it's been temporarily locked. Try again in 30 minutes.",
-  "enterprise.login.btn.text": "Company or school credentials",
-  "username.or.email.format.validation.less.chars.message": "Username or email must have at least 3 characters.",
-  "email.validation.message": "Enter your username or email",
-  "password.validation.message": "Password criteria has not been met",
-  "account.activation.success.message.title": "Success! You have activated your account.",
-  "account.activation.success.message": "You will now receive email updates and alerts from us related to the courses you are enrolled in. Sign in to continue.",
-  "account.activation.info.message": "This account has already been activated.",
-  "account.activation.error.message.title": "Your account could not be activated",
-  "account.activation.support.link": "contact support",
-  "account.confirmation.success.message.title": "Success! You have confirmed your email.",
-  "account.confirmation.success.message": "Sign in to continue.",
-  "account.confirmation.info.message": "This email has already been confirmed.",
-  "account.confirmation.error.message.title": "Your email could not be confirmed",
-  "tpa.account.link": "{provider} account",
-  "internal.server.error.message": "An error has occurred. Try refreshing the page, or check your internet connection.",
-  "login.rate.limit.reached.message": "Too many failed login attempts. Try again later.",
-  "login.failure.header.title": "We couldn't sign you in.",
-  "contact.support.link": "contact {platformName} support",
-  "login.incorrect.credentials.error": "The username, email, or password you entered is incorrect. Please try again.",
-  "login.form.invalid.error.message": "Please fill in the fields below.",
-  "login.incorrect.credentials.error.reset.link.text": "reset your password",
-  "login.incorrect.credentials.error.before.account.blocked.text": "click here to reset it.",
-  "password.security.nudge.title": "Password security",
-  "password.security.block.title": "Password change required",
-  "password.security.nudge.body": "Our system detected that your password is vulnerable. We recommend you change it so that your account stays secure.",
-  "password.security.block.body": "Our system detected that your password is vulnerable. Change your password so that your account stays secure.",
-  "password.security.close.button": "Close",
-  "password.security.redirect.to.reset.password.button": "Reset your password",
+  "error.notfound.message": "您访问的地址不存在或有误。请检查URL后重新尝试访问。",
+  "forgot.password.confirmation.message": "我们向 {email} 发送了一封电子邮件，其中包含重置密码的说明。如果您在 1 分钟后没有收到密码重置消息，请确认您输入了正确的电子邮件地址，或者检查您的垃圾邮件文件夹。如果您需要进一步的帮助，点击{supportLink}。",
+  "forgot.password.page.title": "忘记密码 | {siteName}",
+  "forgot.password.page.heading": "重置密码",
+  "forgot.password.page.instructions": "请在下面输入您的电子邮件地址，我们将向您发送一封电子邮件，其中包含有关如何重置密码的说明。",
+  "forgot.password.page.invalid.email.message": "输入一个有效的电子邮件地址",
+  "forgot.password.page.email.field.label": "邮箱",
+  "forgot.password.page.submit.button": "提交",
+  "forgot.password.error.alert.title.": "我们无法联系到您。",
+  "forgot.password.error.message.title": "发生了一个错误。",
+  "forgot.password.request.in.progress.message": "你的前一个请求正在处理中，请稍后再尝试。",
+  "forgot.password.empty.email.field.error": "输入你的电子邮箱",
+  "forgot.password.email.help.text": "您用于注册 {platformName} 的电子邮件地址",
+  "confirmation.message.title": "查收您的邮件",
+  "confirmation.support.link": "联系技术支持",
+  "need.help.sign.in.text": "需要帮助登录？",
+  "additional.help.text": "如需更多帮助，请通过以下方式联系 {platformName} 支持",
+  "sign.in.text": "登录",
+  "extend.field.errors": "{emailError} 如下。",
+  "invalid.token.heading": "密码重置链接无效",
+  "invalid.token.error.message": "此密码重置链接无效。它可能已经被使用过。在下面输入您的电子邮件以接收新链接。",
+  "token.validation.rate.limit.error.heading": "请求过多",
+  "token.validation.rate.limit.error": "由于请求过多而发生错误。请稍后重试。",
+  "token.validation.internal.sever.error.heading": "验证失败",
+  "token.validation.internal.sever.error": "发生了错误。尝试刷新页面，或检查您的互联网连接。",
+  "internal.server.error": "发生了错误。尝试刷新页面，或检查您的互联网连接。",
+  "account.activation.error.message": "出了点问题，请联系{supportLink}解决这个问题。",
+  "login.inactive.user.error": "若要登录，您需要激活您的帐户。{lineBreak} {lineBreak}我们刚刚向 {email} 发送了一个激活链接。如果您没有收到电子邮件，请检查您的垃圾邮件文件夹或 {supportLink}。",
+  "allowed.domain.login.error": "作为 {allowedDomain} 用户，您必须使用 {allowedDomain} {tpaLink} 登录。",
+  "login.incorrect.credentials.error.attempts.text.1": "您输入的用户名、电子邮件或密码不正确。在您的帐户被暂时锁定之前，您还有 {remainingAttempts} 次登录尝试。",
+  "login.incorrect.credentials.error.attempts.text.2": "如果您忘记了密码，{resetLink}",
+  "account.locked.out.message.2": "为了安全起见，您可以先{resetLink}再试一次。",
+  "login.incorrect.credentials.error.with.reset.link": "您输入的用户名、电子邮件或密码不正确。请重试或 {resetLink}。",
+  "login.page.title": "登入 | {siteName}",
+  "login.user.identity.label": "用户名或电子邮件",
+  "login.password.label": "密码",
+  "sign.in.button": "登录",
+  "forgot.password": "忘记密码",
+  "institution.login.button": "机构/校园凭证",
+  "institution.login.page.title": "使用机构/校园凭据登录",
+  "login.other.options.heading": "或登录：",
+  "non.compliant.password.title": "我们最近更改了密码要求",
+  "non.compliant.password.message": "您当前的密码不符合新的安全要求。我们刚刚向与此帐户关联的电子邮件地址发送了密码重置邮件。感谢您帮助我们保护您的数据安全。",
+  "account.locked.out.message.1": "为了保护您的帐户，它已被暂时锁定。请在 30 分钟后重试。",
+  "enterprise.login.btn.text": "单位或学校证书",
+  "username.or.email.format.validation.less.chars.message": "用户名或电子邮件必须至少包含 3 个字符。",
+  "email.validation.message": "输入您的用户名或电子邮件",
+  "password.validation.message": "未满足密码条件",
+  "account.activation.success.message.title": "成功！您已激活您的帐户。",
+  "account.activation.success.message": "您现在将收到我们发送的与您注册的课程相关的电子邮件更新和提醒。登录以继续。",
+  "account.activation.info.message": "本账号已经被激活。",
+  "account.activation.error.message.title": "您的帐户无法激活",
+  "account.activation.support.link": "请联系技术支持",
+  "account.confirmation.success.message.title": "成功！您已确认您的电子邮件。",
+  "account.confirmation.success.message": "登录并继续。",
+  "account.confirmation.info.message": "此电子邮件已被确认。",
+  "account.confirmation.error.message.title": "无法确认您的电子邮件",
+  "tpa.account.link": "{provider} 帐户",
+  "internal.server.error.message": "发生了错误。尝试刷新页面，或检查您的互联网连接。",
+  "login.rate.limit.reached.message": "失败次数超过限制，请稍后再试！",
+  "login.failure.header.title": "登录失败。",
+  "contact.support.link": "联系 {platformName} 支持",
+  "login.incorrect.credentials.error": "您输入的用户名、电子邮件或密码不正确。请再试一次。",
+  "login.form.invalid.error.message": "请填写以下字段。",
+  "login.incorrect.credentials.error.reset.link.text": "重置你的密码",
+  "login.incorrect.credentials.error.before.account.blocked.text": "点击此处来重置它。",
+  "password.security.nudge.title": "密码安全",
+  "password.security.block.title": "需要更改密码",
+  "password.security.nudge.body": "系统检测到您的密码存在漏洞。我们建议您更改它，以便您的帐户保持安全。",
+  "password.security.block.body": "系统检测到您的密码存在漏洞。更改您的密码，以确保您的帐户安全。",
+  "password.security.close.button": "关闭",
+  "password.security.redirect.to.reset.password.button": "重置你的密码",
   "login.tpa.authentication.failure": "We are sorry, you are not authorized to access {platform_name} via this channel. Please contact your learning administrator or manager in order to access {platform_name}.{lineBreak}{lineBreak}Error Details:{lineBreak}{errorMessage}",
-  "progressive.profiling.page.title": "Welcome | {siteName}",
-  "progressive.profiling.page.heading": "A few questions for you will help us get smarter.",
-  "optional.fields.information.link": "Learn more about how we use this information.",
-  "optional.fields.submit.button": "Submit",
-  "optional.fields.skip.button": "Skip for now",
-  "optional.fields.next.button": "Next",
-  "continue.to.platform": "Continue to {platformName}",
-  "modal.title": "Thanks for letting us know.",
-  "modal.description": "You can complete your profile in settings at any time if you change your mind.",
-  "welcome.page.error.heading": "We couldn't update your profile",
-  "welcome.page.error.message": "An error occurred. You can complete your profile in settings at any time.",
-  "recommendation.page.title": "Recommendations | {siteName}",
-  "recommendation.page.heading": "We have a few recommendations to get you started.",
-  "recommendation.skip.button": "Skip for now",
-  "register.page.title": "Register | {siteName}",
-  "registration.fullname.label": "Full name",
-  "registration.email.label": "Email",
-  "registration.username.label": "Public username",
-  "registration.password.label": "Password",
-  "registration.country.label": "Country/Region",
-  "registration.opt.in.label": "I agree that {siteName} may send me marketing messages.",
-  "help.text.name": "This name will be used by any certificates that you earn.",
-  "help.text.username.1": "The name that will identify you in your courses.",
-  "help.text.username.2": "This can not be changed later.",
-  "help.text.email": "For account activation and important updates",
-  "create.account.for.free.button": "Create an account for free",
-  "registration.other.options.heading": "Or register with:",
-  "register.institution.login.button": "Institution/campus credentials",
-  "register.institution.login.page.title": "Register with institution/campus credentials",
-  "empty.name.field.error": "Enter your full name",
-  "empty.email.field.error": "Enter your email",
-  "empty.username.field.error": "Username must be between 2 and 30 characters",
-  "empty.password.field.error": "Password criteria has not been met",
-  "empty.country.field.error": "Select your country or region of residence",
-  "email.do.not.match": "The email addresses do not match.",
-  "email.invalid.format.error": "Enter a valid email address",
-  "username.validation.message": "Username must be between 2 and 30 characters",
-  "name.validation.message": "Enter a valid name",
-  "username.format.validation.message": "Usernames can only contain letters (A-Z, a-z), numerals (0-9), underscores (_), and hyphens (-). Usernames cannot contain spaces",
-  "registration.request.failure.header": "We couldn't create your account.",
-  "registration.empty.form.submission.error": "Please check your responses and try again.",
-  "registration.request.server.error": "An error has occurred. Try refreshing the page, or check your internet connection.",
-  "registration.rate.limit.error": "Too many failed registration attempts. Try again later.",
-  "registration.tpa.session.expired": "Registration using {provider} has timed out.",
+  "progressive.profiling.page.title": "欢迎来的 | {siteName}",
+  "progressive.profiling.page.heading": "你的问题将会帮助我们服务做的更好。",
+  "optional.fields.information.link": "详细了解我们如何使用这些信息。",
+  "optional.fields.submit.button": "提交",
+  "optional.fields.skip.button": "暂时跳过",
+  "optional.fields.next.button": "下一节",
+  "continue.to.platform": "继续{platformName}",
+  "modal.title": "感谢您指点。",
+  "modal.description": "如果您改变主意，可以随时在设置中完成您的个人资料。",
+  "welcome.page.error.heading": "我们无法更新您的个人资料",
+  "welcome.page.error.message": "发生错误。您可以随时在设置中完成您的个人资料。",
+  "recommendation.page.title": "建议 | {siteName}",
+  "recommendation.page.heading": "我们有一些建议可以帮助您入门。",
+  "recommendation.skip.button": "暂时跳过",
+  "recommendation.option.trending": "Trending",
+  "recommendation.option.popular": "Most Popular",
+  "recommendation.product-card.pill-text.course": "Course",
+  "recommendation.product-card.pill-text.professional-certificate": "Professional Certificate",
+  "recommendation.product-card.pill-text.emeritus": "Offered on Emeritus",
+  "recommendation.product-card.pill-text.shorelight": "Offered through Shorelight",
+  "recommendation.product-card.footer-text.number-of-courses": "{length} {label}",
+  "recommendation.product-card.footer-text.subscription": "Subscription",
+  "recommendation.product-card.launch-icon.sr-text": "Opens a link in a new tab",
+  "register.page.title": "注册 | {siteName}",
+  "registration.fullname.label": "全名",
+  "registration.email.label": "邮箱",
+  "registration.username.label": "公开用户名",
+  "registration.password.label": "密码",
+  "registration.country.label": "国家/地区",
+  "registration.opt.in.label": "我同意 {siteName} 可以向我发送课程相关推广信息。",
+  "help.text.name": "您获得的任何证书都将使用此名称。",
+  "help.text.username.1": "此名称将会用于您在课程中的身份识别。",
+  "help.text.username.2": "过后无法更改。",
+  "help.text.email": "用于帐户激活和重要更新",
+  "create.account.for.free.button": "免费创建一个帐户",
+  "registration.other.options.heading": "或注册：",
+  "create.account.cta.button": "{label}",
+  "register.institution.login.button": "机构/院系验证",
+  "register.institution.login.page.title": "使用机构/院系账户注册",
+  "empty.name.field.error": "输入您的全名",
+  "empty.email.field.error": "输入你的电子邮箱",
+  "empty.username.field.error": "用户名必须介于 2 到 30 个字符之间",
+  "empty.password.field.error": "未满足密码条件",
+  "empty.country.field.error": "选择您居住的国家或地区",
+  "email.do.not.match": "邮箱不一致。",
+  "email.invalid.format.error": "输入一个有效的电子邮件地址",
+  "username.validation.message": "用户名必须介于 2 到 30 个字符之间",
+  "name.validation.message": "输入有效名称",
+  "username.format.validation.message": "用户名只能包含字母（AZ、az）、数字（0-9）、下划线（_）和连字符（-）。用户名不能包含空格",
+  "registration.request.failure.header": "无法创建账号。",
+  "registration.empty.form.submission.error": "请检查您的回复并重试。",
+  "registration.request.server.error": "发生了错误。尝试刷新页面，或检查您的互联网连接。",
+  "registration.rate.limit.error": "注册尝试失败次数过多。稍后再试。",
+  "registration.tpa.session.expired": "使用{provider}注册已超时。",
   "registration.tpa.authentication.failure": "We are sorry, you are not authorized to access {platform_name} via this channel. Please contact your learning administrator or manager in order to access {platform_name}.{lineBreak}{lineBreak}Error Details:{lineBreak}{errorMessage}",
-  "terms.of.service.and.honor.code": "Terms of Service and Honor Code",
-  "privacy.policy": "Privacy Policy",
-  "honor.code": "Honor Code",
-  "terms.of.service": "Terms of Service",
-  "registration.username.suggestion.label": "Suggested:",
-  "did.you.mean.alert.text": "Did you mean",
-  "register.page.terms.of.service.and.honor.code": "By creating an account, you agree to the {tosAndHonorCode} and you acknowledge that {platformName} and each\n                Member process your personal data in accordance with the {privacyPolicy}.",
-  "register.page.honor.code": "I agree to the {platformName} {tosAndHonorCode}",
-  "register.page.terms.of.service": "I agree to the {platformName} {termsOfService}",
-  "sign.in": "Sign in",
-  "reset.password.page.title": "Reset Password | {siteName}",
-  "reset.password": "Reset password",
-  "reset.password.page.instructions": "Enter and confirm your new password.",
-  "new.password.label": "New password",
-  "confirm.password.label": "Confirm password",
-  "passwords.do.not.match": "Passwords do not match",
-  "confirm.your.password": "Confirm your password",
-  "reset.password.failure.heading": "We couldn't reset your password.",
-  "reset.password.form.submission.error": "Please check your responses and try again.",
-  "reset.server.rate.limit.error": "Too many requests.",
-  "reset.password.success.heading": "Password reset complete.",
-  "reset.password.success": "Your password has been reset. Sign in to your account.",
-  "rate.limit.error": "An error has occurred because of too many requests. Please try again after some time."
+  "terms.of.service.and.honor.code": "服务条款和诚信准则",
+  "privacy.policy": "隐私政策",
+  "honor.code": "规则",
+  "terms.of.service": "服务条款",
+  "registration.username.suggestion.label": "建议：",
+  "did.you.mean.alert.text": "你的意思是",
+  "register.page.terms.of.service.and.honor.code": "创建帐户即表示您同意 {tosAndHonorCode} 并承认 {platformName} 和每位会员根据 {privacyPolicy} 处理您的个人数据。",
+  "register.page.honor.code": "我同意 {platformName} {tosAndHonorCode}",
+  "register.page.terms.of.service": "我同意接受 {platformName} {termsOfService}",
+  "sign.in": "登录",
+  "reset.password.page.title": "重设密码 | {siteName}",
+  "reset.password": "重置密码",
+  "reset.password.page.instructions": "输入并确认你的新密码。",
+  "new.password.label": "新密码",
+  "confirm.password.label": "确认密码",
+  "passwords.do.not.match": "密码不匹配",
+  "confirm.your.password": "确认你的密码",
+  "reset.password.failure.heading": "我们无法重置您的密码。",
+  "reset.password.form.submission.error": "请检查您的回复并重试。",
+  "reset.server.rate.limit.error": "请求过多。",
+  "reset.password.success.heading": "密码重置完成。",
+  "reset.password.success": "您的密码已重置。登录到您的帐户。",
+  "rate.limit.error": "由于请求过多而发生错误。请稍后重试。"
 }

src/login/ChangePasswordPrompt.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -7,7 +7,7 @@ import {
 } from '@edx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import messages from './messages';
 import { DEFAULT_REDIRECT_URL, RESET_PAGE } from '../data/constants';
@@ -29,10 +29,14 @@ const ChangePasswordPrompt = ({ variant, redirectUrl }) => {
   // eslint-disable-next-line no-unused-vars
   const [isOpen, open, close] = useToggle(true, handlers);
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (redirectToResetPasswordPage) {
+      navigate(updatePathWithQueryParams(RESET_PAGE));
+    }
+  }, [redirectToResetPasswordPage, navigate]);
 
-  if (redirectToResetPasswordPage) {
-    return <Redirect to={updatePathWithQueryParams(RESET_PAGE)} />;
-  }
   return (
     <ModalDialog
       title="Password security"

src/login/LoginPage.jsx

@@ -36,7 +36,6 @@ import {
   getAllPossibleQueryParams,
   getTpaHint,
   getTpaProvider,
-  setSurveyCookie,
   updatePathWithQueryParams,
   windowScrollTo,
 } from '../data/utils';
@@ -230,9 +229,6 @@ class LoginPage extends React.Component {
       };
       tpaAuthenticationError.errorCode = TPA_AUTHENTICATION_FAILURE;
     }
-    if (this.props.loginResult.success) {
-      setSurveyCookie('login');
-    }
 
     return (
       <>

src/login/tests/ChangePasswordPrompt.test.jsx

@@ -3,15 +3,19 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
-import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
-import { MemoryRouter, Router } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 
 import { RESET_PAGE } from '../../data/constants';
 import ChangePasswordPrompt from '../ChangePasswordPrompt';
 
 const IntlChangePasswordPrompt = injectIntl(ChangePasswordPrompt);
-const history = createMemoryHistory();
+const mockedNavigator = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...(jest.requireActual('react-router-dom')),
+  useNavigate: () => mockedNavigator,
+}));
 
 describe('ChangePasswordPromptTests', () => {
   let props = {};
@@ -55,9 +59,7 @@ describe('ChangePasswordPromptTests', () => {
     const changePasswordPrompt = mount(
       <IntlProvider locale="en">
         <MemoryRouter>
-          <Router history={history}>
-            <IntlChangePasswordPrompt {...props} />
-          </Router>
+          <IntlChangePasswordPrompt {...props} />
         </MemoryRouter>
       </IntlProvider>,
     );
@@ -67,6 +69,6 @@ describe('ChangePasswordPromptTests', () => {
     });
 
     changePasswordPrompt.update();
-    expect(history.location.pathname).toEqual(RESET_PAGE);
+    expect(mockedNavigator).toHaveBeenCalledWith(RESET_PAGE);
   });
 });

src/login/tests/LoginFailure.test.jsx

@@ -225,7 +225,7 @@ describe('LoginFailureMessage', () => {
       loginError: {
         errorCode: TPA_AUTHENTICATION_FAILURE,
         context: {
-          errorMessage: 'An error occured',
+          errorMessage: 'An error occurred',
         },
       },
     };
@@ -239,7 +239,7 @@ describe('LoginFailureMessage', () => {
     const expectedMessageSubstring = 'We are sorry, you are not authorized to access';
 
     expect(loginFailureMessage.find('#login-failure-alert').first().text()).toContain(expectedMessageSubstring);
-    expect(loginFailureMessage.find('#login-failure-alert').first().text()).toContain('An error occured');
+    expect(loginFailureMessage.find('#login-failure-alert').first().text()).toContain('An error occurred');
   });
 
   it('should show modal that nudges users to change password', () => {

src/login/tests/LoginPage.test.jsx

@@ -30,9 +30,6 @@ const IntlLoginPage = injectIntl(LoginPage);
 const mockStore = configureStore();
 
 describe('LoginPage', () => {
-  mergeConfig({
-    USER_SURVEY_COOKIE_NAME: process.env.USER_SURVEY_COOKIE_NAME,
-  });
   let props = {};
   let store = {};
   let loginFormData = {};
@@ -58,6 +55,9 @@ describe('LoginPage', () => {
         secondaryProviders: [],
       },
     },
+    register: {
+      validationApiRateLimited: false,
+    },
   };
 
   const secondaryProviders = {
@@ -448,13 +448,13 @@ describe('LoginPage', () => {
         thirdPartyAuthContext: {
           ...initialState.commonComponents.thirdPartyAuthContext,
           currentProvider: null,
-          errorMessage: 'An error occured',
+          errorMessage: 'An error occurred',
         },
       },
     });
 
     const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
-    expect(loginPage.find('#login-failure-alert').find('p').text()).toContain('An error occured');
+    expect(loginPage.find('#login-failure-alert').find('p').text()).toContain('An error occurred');
   });
 
   it('should match invalid login form error message', () => {
@@ -685,21 +685,6 @@ describe('LoginPage', () => {
     expect(loginPage.find('LoginPage').state('isSubmitted')).toEqual(true);
   });
 
-  it('should set login survey cookie', () => {
-    store = mockStore({
-      ...initialState,
-      login: {
-        ...initialState.login,
-        loginResult: {
-          success: true,
-        },
-      },
-    });
-
-    renderer.create(reduxWrapper(<IntlLoginPage {...props} />));
-    expect(document.cookie).toMatch(`${getConfig().USER_SURVEY_COOKIE_NAME}=login`);
-  });
-
   it('should reset login form errors', () => {
     const errorState = { emailOrUsername: '', password: '' };
     store.dispatch = jest.fn(store.dispatch);

src/logistration/Logistration.jsx

@@ -12,16 +12,18 @@ import {
 } from '@edx/paragon';
 import { ChevronLeft } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
-import { Redirect } from 'react-router-dom';
+import { Navigate, useNavigate } from 'react-router-dom';
 
-import { BaseComponent } from '../base-component';
+import BaseContainer from '../base-container';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
 import {
   tpaProvidersSelector,
 } from '../common-components/data/selectors';
 import messages from '../common-components/messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
-import { getTpaHint, getTpaProvider, updatePathWithQueryParams } from '../data/utils';
+import {
+  getTpaHint, getTpaProvider, updatePathWithQueryParams,
+} from '../data/utils';
 import { LoginPage } from '../login';
 import { RegistrationPage } from '../register';
 import { backupRegistrationForm } from '../register/data/actions';
@@ -35,6 +37,7 @@ const Logistration = (props) => {
   const { formatMessage } = useIntl();
   const [institutionLogin, setInstitutionLogin] = useState(false);
   const [key, setKey] = useState('');
+  const navigate = useNavigate();
   const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
 
   useEffect(() => {
@@ -44,6 +47,12 @@ const Logistration = (props) => {
     }
   });
 
+  useEffect(() => {
+    if (disablePublicAccountCreation) {
+      navigate(updatePathWithQueryParams(LOGIN_PAGE));
+    }
+  }, [navigate, disablePublicAccountCreation]);
+
   const handleInstitutionLogin = (e) => {
     sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
     if (typeof e === 'string') {
@@ -81,12 +90,11 @@ const Logistration = (props) => {
   };
 
   return (
-    <BaseComponent>
+    <BaseContainer>
       <div>
         {disablePublicAccountCreation
           ? (
             <>
-              <Redirect to={updatePathWithQueryParams(LOGIN_PAGE)} />
               {institutionLogin && (
                 <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
                   <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
@@ -115,7 +123,7 @@ const Logistration = (props) => {
                   </Tabs>
                 ))}
               { key && (
-                <Redirect to={updatePathWithQueryParams(key)} />
+                <Navigate to={updatePathWithQueryParams(key)} replace />
               )}
               <div id="main-content" className="main-content">
                 {selectedPage === LOGIN_PAGE
@@ -130,7 +138,7 @@ const Logistration = (props) => {
             </div>
           )}
       </div>
-    </BaseComponent>
+    </BaseContainer>
   );
 };
 

src/logistration/Logistration.test.jsx

@@ -11,7 +11,9 @@ import configureStore from 'redux-mock-store';
 import Logistration from './Logistration';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
 import { RenderInstitutionButton } from '../common-components/InstitutionLogistration';
-import { COMPLETE_STATE, LOGIN_PAGE } from '../data/constants';
+import {
+  COMPLETE_STATE, LOGIN_PAGE,
+} from '../data/constants';
 import { backupRegistrationForm } from '../register/data/actions';
 
 jest.mock('@edx/frontend-platform/analytics', () => ({
@@ -41,7 +43,40 @@ describe('Logistration', () => {
     </IntlProvider>
   );
 
+  const initialState = {
+    register: {
+      registrationFormData: {
+        configurableFormFields: {
+          marketingEmailsOptIn: true,
+        },
+        formFields: {
+          name: '', email: '', username: '', password: '',
+        },
+        emailSuggestion: {
+          suggestion: '', type: '',
+        },
+        errors: {
+          name: '', email: '', username: '', password: '',
+        },
+      },
+      registrationResult: { success: false, redirectUrl: '' },
+      registrationError: {},
+      usernameSuggestions: [],
+      validationApiRateLimited: false,
+    },
+    commonComponents: {
+      thirdPartyAuthContext: {
+        providers: [],
+        secondaryProviders: [],
+      },
+    },
+    login: {
+      loginResult: { success: false, redirectUrl: '' },
+    },
+  };
+
   beforeEach(() => {
+    store = mockStore(initialState);
     jest.mock('@edx/frontend-platform/auth', () => ({
       getAuthenticatedUser: jest.fn(() => ({
         userId: 3,
@@ -63,36 +98,13 @@ describe('Logistration', () => {
     mergeConfig({
       ALLOW_PUBLIC_ACCOUNT_CREATION: true,
     });
-    store = mockStore({
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
+
     const logistration = mount(reduxWrapper(<IntlLogistration />));
 
     expect(logistration.find('#main-content').find('RegistrationPage').exists()).toBeTruthy();
   });
 
   it('should render login page', () => {
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
-
     const props = { selectedPage: LOGIN_PAGE };
     const logistration = mount(reduxWrapper(<IntlLogistration {...props} />));
 
@@ -106,9 +118,7 @@ describe('Logistration', () => {
     });
 
     store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
+      ...initialState,
       commonComponents: {
         thirdPartyAuthContext: {
           currentProvider: null,
@@ -138,9 +148,7 @@ describe('Logistration', () => {
     });
 
     store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
+      ...initialState,
       commonComponents: {
         thirdPartyAuthContext: {
           currentProvider: null,
@@ -171,9 +179,7 @@ describe('Logistration', () => {
     });
 
     store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
+      ...initialState,
       commonComponents: {
         thirdPartyAuthContext: {
           currentProvider: null,
@@ -203,10 +209,7 @@ describe('Logistration', () => {
     });
 
     store = mockStore({
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
+      ...initialState,
       commonComponents: {
         thirdPartyAuthContext: {
           currentProvider: null,
@@ -231,22 +234,6 @@ describe('Logistration', () => {
   });
 
   it('should fire action to backup registration form on tab click', () => {
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
-
     store.dispatch = jest.fn(store.dispatch);
     const logistration = mount(reduxWrapper(<IntlLogistration />));
     logistration.find('a[data-rb-event-key="/login"]').simulate('click');
@@ -254,22 +241,6 @@ describe('Logistration', () => {
   });
 
   it('should clear tpa context errorMessage tab click', () => {
-    store = mockStore({
-      login: {
-        loginResult: { success: false, redirectUrl: '' },
-      },
-      register: {
-        registrationResult: { success: false, redirectUrl: '' },
-        registrationError: {},
-      },
-      commonComponents: {
-        thirdPartyAuthContext: {
-          providers: [],
-          secondaryProviders: [],
-        },
-      },
-    });
-
     store.dispatch = jest.fn(store.dispatch);
     const logistration = mount(reduxWrapper(<IntlLogistration />));
     logistration.find('a[data-rb-event-key="/login"]').simulate('click');

src/progressive-profiling/ProgressiveProfiling.jsx

@@ -6,9 +6,7 @@ import { identifyAuthenticatedUser, sendPageEvent, sendTrackEvent } from '@edx/f
 import {
   AxiosJwtAuthService,
   configure as configureAuth,
-  ensureAuthenticatedUser,
   getAuthenticatedUser,
-  hydrateAuthenticatedUser,
 } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { getLoggingService } from '@edx/frontend-platform/logging';
@@ -21,97 +19,128 @@ import {
 import { Error } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { useLocation } from 'react-router-dom';
 
 import { saveUserProfile } from './data/actions';
-import { welcomePageSelector } from './data/selectors';
+import { welcomePageContextSelector } from './data/selectors';
 import messages from './messages';
 import ProgressiveProfilingPageModal from './ProgressiveProfilingPageModal';
-import { BaseComponent } from '../base-component';
+import BaseContainer from '../base-container';
 import { RedirectLogistration } from '../common-components';
+import { getThirdPartyAuthContext } from '../common-components/data/actions';
 import {
-  DEFAULT_REDIRECT_URL, DEFAULT_STATE, FAILURE_STATE,
+  COMPLETE_STATE,
+  DEFAULT_REDIRECT_URL,
+  DEFAULT_STATE,
+  FAILURE_STATE,
+  PENDING_STATE,
 } from '../data/constants';
-import { getAllPossibleQueryParams } from '../data/utils';
+import isOneTrustFunctionalCookieEnabled from '../data/oneTrust';
+import { getAllPossibleQueryParams, isHostAvailableInQueryParams } from '../data/utils';
 import { FormFieldRenderer } from '../field-renderer';
-import {
-  activateRecommendationsExperiment, RECOMMENDATIONS_EXP_VARIATION, trackRecommendationViewedOptimizely,
-} from '../recommendations/optimizelyExperiment';
-import { trackRecommendationsGroup, trackRecommendationsViewed } from '../recommendations/track';
 
 const ProgressiveProfiling = (props) => {
-  const {
-    formRenderState, submitState, showError, location,
-  } = props;
-  const enablePersonalizedRecommendations = getConfig().ENABLE_PERSONALIZED_RECOMMENDATIONS;
-  const registrationResponse = location.state?.registrationResult;
-
   const { formatMessage } = useIntl();
-  const [ready, setReady] = useState(false);
+  const {
+    getFieldDataFromBackend,
+    submitState,
+    showError,
+    welcomePageContext,
+    welcomePageContextApiStatus,
+  } = props;
+  const location = useLocation();
+  const registrationEmbedded = isHostAvailableInQueryParams();
+
+  const queryParams = getAllPossibleQueryParams();
+  const authenticatedUser = getAuthenticatedUser() || location.state?.authenticatedUser;
+  const functionalCookiesConsent = isOneTrustFunctionalCookieEnabled();
+  const enablePostRegistrationRecommendations = (
+    getConfig().ENABLE_POST_REGISTRATION_RECOMMENDATIONS && functionalCookiesConsent
+  );
+
   const [registrationResult, setRegistrationResult] = useState({ redirectUrl: '' });
+  const [formFieldData, setFormFieldData] = useState({ fields: {}, extendedProfile: [] });
   const [values, setValues] = useState({});
-  const [openDialog, setOpenDialog] = useState(false);
+  const [showModal, setShowModal] = useState(false);
   const [showRecommendationsPage, setShowRecommendationsPage] = useState(false);
-  const authenticatedUser = getAuthenticatedUser();
-  const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
 
   useEffect(() => {
-    configureAuth(AxiosJwtAuthService, { loggingService: getLoggingService(), config: getConfig() });
-    ensureAuthenticatedUser(DASHBOARD_URL)
-      .then(() => {
-        hydrateAuthenticatedUser().then(() => {
-          setReady(true);
-        });
-      })
-      .catch(() => {});
+    if (registrationEmbedded) {
+      getFieldDataFromBackend({ is_welcome_page: true, next: queryParams?.next });
+    } else {
+      configureAuth(AxiosJwtAuthService, { loggingService: getLoggingService(), config: getConfig() });
+    }
+  }, [registrationEmbedded, getFieldDataFromBackend, queryParams?.next]);
 
+  useEffect(() => {
+    const registrationResponse = location.state?.registrationResult;
     if (registrationResponse) {
       setRegistrationResult(registrationResponse);
+      setFormFieldData({
+        fields: location.state?.optionalFields.fields,
+        extendedProfile: location.state?.optionalFields.extended_profile,
+      });
     }
-  }, [DASHBOARD_URL, registrationResponse]);
+  }, [location.state]);
 
   useEffect(() => {
-    if (ready && authenticatedUser?.userId) {
+    if (registrationEmbedded && Object.keys(welcomePageContext).includes('fields')) {
+      setFormFieldData({
+        fields: welcomePageContext.fields,
+        extendedProfile: welcomePageContext.extended_profile,
+      });
+      const nextUrl = welcomePageContext.nextUrl ? welcomePageContext.nextUrl : getConfig().SEARCH_CATALOG_URL;
+      setRegistrationResult({ redirectUrl: nextUrl });
+    }
+  }, [registrationEmbedded, welcomePageContext]);
+
+  useEffect(() => {
+    if (authenticatedUser?.userId) {
       identifyAuthenticatedUser(authenticatedUser.userId);
       sendPageEvent('login_and_registration', 'welcome');
     }
-  }, [authenticatedUser, ready]);
+  }, [authenticatedUser]);
 
   useEffect(() => {
-    if (registrationResponse && authenticatedUser?.userId) {
-      const queryParams = getAllPossibleQueryParams(registrationResponse.redirectUrl);
-      if (enablePersonalizedRecommendations && !('enrollment_action' in queryParams)) {
-        const userIdStr = authenticatedUser.userId.toString();
-        const variation = activateRecommendationsExperiment(userIdStr);
-        const showRecommendations = variation === RECOMMENDATIONS_EXP_VARIATION;
+    if (!enablePostRegistrationRecommendations) {
+      sendTrackEvent(
+        'edx.bi.user.recommendations.not.enabled',
+        { functionalCookiesConsent, page: 'authn_recommendations' },
+      );
+      return;
+    }
 
-        trackRecommendationsGroup(variation, authenticatedUser.userId);
-        trackRecommendationViewedOptimizely(userIdStr);
-        setShowRecommendationsPage(showRecommendations);
-        if (!showRecommendations) {
-          trackRecommendationsViewed([], true, authenticatedUser.userId);
-        }
+    if (registrationResult.redirectUrl && authenticatedUser?.userId) {
+      const redirectQueryParams = getAllPossibleQueryParams(registrationResult.redirectUrl);
+      if (!('enrollment_action' in redirectQueryParams || queryParams?.next)) {
+        setShowRecommendationsPage(true);
       }
     }
-  }, [authenticatedUser, enablePersonalizedRecommendations, registrationResponse]);
+  }, [
+    authenticatedUser,
+    enablePostRegistrationRecommendations,
+    functionalCookiesConsent,
+    registrationResult.redirectUrl,
+    queryParams?.next,
+  ]);
 
-  if (!location.state || !location.state.registrationResult || formRenderState === FAILURE_STATE) {
+  if (
+    !authenticatedUser
+    || !(location.state?.registrationResult || registrationEmbedded)
+    || welcomePageContextApiStatus === FAILURE_STATE
+    || (welcomePageContextApiStatus === COMPLETE_STATE && !Object.keys(welcomePageContext).includes('fields'))
+  ) {
+    const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
     global.location.assign(DASHBOARD_URL);
     return null;
   }
 
-  if (!ready) {
-    return null;
-  }
-
-  const optionalFields = location.state.optionalFields.fields;
-  const extendedProfile = location.state.optionalFields.extended_profile;
-
   const handleSubmit = (e) => {
     e.preventDefault();
     window.history.replaceState(location.state, null, '');
     const payload = { ...values, extendedProfile: [] };
-    if (Object.keys(extendedProfile).length > 0) {
-      extendedProfile.forEach(fieldName => {
+    if (Object.keys(formFieldData.extendedProfile).length > 0) {
+      formFieldData.extendedProfile.forEach(fieldName => {
         if (values[fieldName]) {
           payload.extendedProfile.push({ fieldName, fieldValue: values[fieldName] });
         }
@@ -126,15 +155,21 @@ const ProgressiveProfiling = (props) => {
         isGenderSelected: !!values.gender,
         isYearOfBirthSelected: !!values.year_of_birth,
         isLevelOfEducationSelected: !!values.level_of_education,
+        host: queryParams?.host || '',
       },
     );
   };
 
   const handleSkip = (e) => {
     e.preventDefault();
-    window.history.replaceState(props.location.state, null, '');
-    setOpenDialog(true);
-    sendTrackEvent('edx.bi.welcome.page.skip.link.clicked');
+    window.history.replaceState(location.state, null, '');
+    setShowModal(true);
+    sendTrackEvent(
+      'edx.bi.welcome.page.skip.link.clicked',
+      {
+        host: queryParams?.host || '',
+      },
+    );
   };
 
   const onChangeHandler = (e) => {
@@ -145,8 +180,8 @@ const ProgressiveProfiling = (props) => {
     }
   };
 
-  const formFields = Object.keys(optionalFields).map((fieldName) => {
-    const fieldData = optionalFields[fieldName];
+  const formFields = Object.keys(formFieldData.fields).map((fieldName) => {
+    const fieldData = formFieldData.fields[fieldName];
     return (
       <span key={fieldData.name}>
         <FormFieldRenderer
@@ -159,14 +194,20 @@ const ProgressiveProfiling = (props) => {
   });
 
   return (
-    <BaseComponent showWelcomeBanner>
+    <BaseContainer showWelcomeBanner username={authenticatedUser?.username}>
       <Helmet>
         <title>{formatMessage(messages['progressive.profiling.page.title'],
           { siteName: getConfig().SITE_NAME })}
         </title>
       </Helmet>
-      <ProgressiveProfilingPageModal isOpen={openDialog} redirectUrl={registrationResult.redirectUrl} />
-      {props.shouldRedirect ? (
+      <ProgressiveProfilingPageModal isOpen={showModal} redirectUrl={registrationResult.redirectUrl} />
+      {(props.shouldRedirect && welcomePageContext.nextUrl) && (
+        <RedirectLogistration
+          success
+          redirectUrl={registrationResult.redirectUrl}
+        />
+      )}
+      {props.shouldRedirect && (
         <RedirectLogistration
           success
           redirectUrl={registrationResult.redirectUrl}
@@ -174,7 +215,7 @@ const ProgressiveProfiling = (props) => {
           educationLevel={values?.level_of_education}
           userId={authenticatedUser?.userId}
         />
-      ) : null}
+      )}
       <div className="mw-xs m-4 pp-page-content">
         <div>
           <h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
@@ -228,46 +269,54 @@ const ProgressiveProfiling = (props) => {
           </div>
         </Form>
       </div>
-    </BaseComponent>
+    </BaseContainer>
   );
 };
 
 ProgressiveProfiling.propTypes = {
-  formRenderState: PropTypes.string.isRequired,
-  location: PropTypes.shape({
-    state: PropTypes.shape({
-      registrationResult: PropTypes.shape({
-        redirectUrl: PropTypes.string,
-      }),
-      optionalFields: PropTypes.shape({
-        extended_profile: PropTypes.arrayOf(PropTypes.string),
-        fields: PropTypes.shape({}),
-      }),
-    }),
+  authenticatedUser: PropTypes.shape({
+    username: PropTypes.string,
+    userId: PropTypes.number,
   }),
-  saveUserProfile: PropTypes.func.isRequired,
   showError: PropTypes.bool,
   shouldRedirect: PropTypes.bool,
   submitState: PropTypes.string,
+  welcomePageContext: PropTypes.shape({
+    extended_profile: PropTypes.arrayOf(PropTypes.string),
+    fields: PropTypes.shape({}),
+    nextUrl: PropTypes.string,
+  }),
+  welcomePageContextApiStatus: PropTypes.string,
+  // Actions
+  getFieldDataFromBackend: PropTypes.func.isRequired,
+  saveUserProfile: PropTypes.func.isRequired,
 };
 
 ProgressiveProfiling.defaultProps = {
-  location: { state: {} },
+  authenticatedUser: {},
   shouldRedirect: false,
   showError: false,
   submitState: DEFAULT_STATE,
+  welcomePageContext: {},
+  welcomePageContextApiStatus: PENDING_STATE,
 };
 
-const mapStateToProps = state => ({
-  formRenderState: welcomePageSelector(state).formRenderState,
-  shouldRedirect: welcomePageSelector(state).success,
-  submitState: welcomePageSelector(state).submitState,
-  showError: welcomePageSelector(state).showError,
-});
+const mapStateToProps = state => {
+  const welcomePageStore = state.welcomePage;
+
+  return {
+    shouldRedirect: welcomePageStore.success,
+    showError: welcomePageStore.showError,
+    submitState: welcomePageStore.submitState,
+    welcomePageContext: welcomePageContextSelector(state),
+    welcomePageContextApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
+  };
+};
 
 export default connect(
   mapStateToProps,
   {
     saveUserProfile,
+    getFieldDataFromBackend: getThirdPartyAuthContext,
   },
 )(ProgressiveProfiling);

src/progressive-profiling/data/reducers.js

@@ -6,7 +6,6 @@ import {
 export const defaultState = {
   extendedProfile: [],
   fieldDescriptions: {},
-  formRenderState: DEFAULT_STATE,
   success: false,
   submitState: DEFAULT_STATE,
   showError: false,

src/progressive-profiling/data/selectors.js

@@ -1,3 +1,14 @@
-export const storeName = 'welcomePage';
+import { createSelector } from 'reselect';
 
-export const welcomePageSelector = state => ({ ...state[storeName] });
+export const storeName = 'commonComponents';
+
+export const commonComponentsSelector = state => ({ ...state[storeName] });
+
+export const welcomePageContextSelector = createSelector(
+  commonComponentsSelector,
+  commonComponents => ({
+    fields: commonComponents.optionalFields.fields,
+    extended_profile: commonComponents.optionalFields.extended_profile,
+    nextUrl: commonComponents.thirdPartyAuthContext.welcomePageRedirectUrl,
+  }),
+);

src/progressive-profiling/index.js

@@ -1,4 +1,5 @@
+export const storeName = 'welcomePage';
+
 export { default as ProgressiveProfiling } from './ProgressiveProfiling';
 export { default as reducer } from './data/reducers';
 export { default as saga } from './data/sagas';
-export { storeName } from './data/selectors';

src/progressive-profiling/tests/ProgressiveProfiling.test.jsx

@@ -6,13 +6,15 @@ import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platfor
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
-import { createMemoryHistory } from 'history';
-import { act } from 'react-dom/test-utils';
-import { MemoryRouter, Router } from 'react-router-dom';
+import { MemoryRouter, mockNavigate, useLocation } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import {
-  COMPLETE_STATE, DEFAULT_REDIRECT_URL, FAILURE_STATE, RECOMMENDATIONS,
+  AUTHN_PROGRESSIVE_PROFILING,
+  COMPLETE_STATE, DEFAULT_REDIRECT_URL,
+  EMBEDDED,
+  FAILURE_STATE,
+  RECOMMENDATIONS,
 } from '../../data/constants';
 import { saveUserProfile } from '../data/actions';
 import ProgressiveProfiling from '../ProgressiveProfiling';
@@ -27,20 +29,32 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
 }));
 jest.mock('@edx/frontend-platform/auth', () => ({
   configure: jest.fn(),
-  ensureAuthenticatedUser: jest.fn().mockImplementation(() => Promise.resolve(true)),
-  hydrateAuthenticatedUser: jest.fn().mockImplementation(() => Promise.resolve(true)),
   getAuthenticatedUser: jest.fn(),
 }));
 jest.mock('@edx/frontend-platform/logging', () => ({
   getLoggingService: jest.fn(),
 }));
+jest.mock('react-router-dom', () => {
+  const mockNavigation = jest.fn();
 
-const history = createMemoryHistory();
+  // eslint-disable-next-line react/prop-types
+  const Navigate = ({ to }) => {
+    mockNavigation(to);
+    return <div />;
+  };
+
+  return {
+    ...jest.requireActual('react-router-dom'),
+    Navigate,
+    mockNavigate: mockNavigation,
+    useLocation: jest.fn(),
+  };
+});
 
 describe('ProgressiveProfilingTests', () => {
-  mergeConfig({
-    AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/welcome',
-  });
+  let store = {};
+
+  const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
   const registrationResult = { redirectUrl: getConfig().LMS_BASE_URL + DEFAULT_REDIRECT_URL, success: true };
   const fields = {
     company: { name: 'company', type: 'text', label: 'Company' },
@@ -53,12 +67,14 @@ describe('ProgressiveProfilingTests', () => {
   };
   const extendedProfile = ['company'];
   const optionalFields = { fields, extended_profile: extendedProfile };
-  let props = {};
-  let store = {};
-  const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
   const initialState = {
-    welcomePage: {
-      formRenderState: COMPLETE_STATE,
+    welcomePage: {},
+    commonComponents: {
+      thirdPartyAuthApiStatus: null,
+      optionalFields: {},
+      thirdPartyAuthContext: {
+        welcomePageRedirectUrl: null,
+      },
     },
   };
 
@@ -70,21 +86,6 @@ describe('ProgressiveProfilingTests', () => {
     </IntlProvider>
   );
 
-  const getProgressiveProfilingPage = async () => {
-    const progressiveProfilingPage = mount(reduxWrapper(
-      <Router history={history}>
-        <IntlProgressiveProfilingPage {...props} />
-      </Router>,
-    ));
-    await act(async () => {
-      await Promise.resolve(progressiveProfilingPage);
-      await new Promise(resolve => { setImmediate(resolve); });
-      progressiveProfilingPage.update();
-    });
-
-    return progressiveProfilingPage;
-  };
-
   beforeEach(() => {
     store = mockStore(initialState);
     configure({
@@ -95,55 +96,89 @@ describe('ProgressiveProfilingTests', () => {
       },
       messages: { 'es-419': {}, de: {}, 'en-us': {} },
     });
-    props = {
-      getFieldData: jest.fn(),
-      location: {
-        state: {
-          registrationResult,
-          optionalFields,
-        },
+    useLocation.mockReturnValue({
+      state: {
+        registrationResult,
+        optionalFields,
       },
-    };
+    });
+    getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123' });
   });
 
-  it('not should display button "Learn more about how we use this information."', async () => {
+  // ******** test form links and modal ********
+
+  it('should not display button "Learn more about how we use this information."', () => {
     mergeConfig({
       AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '',
     });
-    const progressiveProfilingPage = await getProgressiveProfilingPage();
+    const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     expect(progressiveProfilingPage.find('a.pgn__hyperlink').exists()).toBeFalsy();
   });
 
-  it('should display button "Learn more about how we use this information."', async () => {
+  it('should display button "Learn more about how we use this information."', () => {
     mergeConfig({
       AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
     });
-    const progressiveProfilingPage = await getProgressiveProfilingPage();
+    const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
 
     expect(progressiveProfilingPage.find('a.pgn__hyperlink').text()).toEqual('Learn more about how we use this information.');
   });
 
-  it('should render fields returned by backend api', async () => {
-    const progressiveProfilingPage = await getProgressiveProfilingPage();
-    expect(progressiveProfilingPage.find('#gender').exists()).toBeTruthy();
+  it('should open modal on pressing skip for now button', () => {
+    delete window.location;
+    window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
+    const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+
+    progressiveProfilingPage.find('button.btn-link').simulate('click');
+    expect(progressiveProfilingPage.find('.pgn__modal-content-container').exists()).toBeTruthy();
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host: '' });
   });
 
-  it('should make identify call to segment on progressive profiling page', async () => {
-    getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123' });
-    await getProgressiveProfilingPage();
+  // ******** test event functionality ********
+
+  it('should make identify call to segment on progressive profiling page', () => {
+    mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+
     expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
     expect(identifyAuthenticatedUser).toHaveBeenCalled();
   });
 
-  it('should submit user profile details on form submission', async () => {
-    getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123' });
+  it('should send analytic event for support link click', () => {
+    mergeConfig({
+      AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
+    });
+    const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+
+    progressiveProfilingPage.find('.pp-page__support-link a[target="_blank"]').simulate('click');
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked');
+  });
+
+  it('should set empty host property value for non-embedded experience', () => {
+    const expectedEventProperties = {
+      isGenderSelected: false,
+      isYearOfBirthSelected: false,
+      isLevelOfEducationSelected: false,
+      host: '',
+    };
+    delete window.location;
+    window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
+    const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+
+    progressiveProfilingPage.find('button.btn-brand').simulate('click');
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.submit.clicked', expectedEventProperties);
+  });
+
+  // ******** test form submission ********
+
+  it('should submit user profile details on form submission', () => {
     const formPayload = {
       gender: 'm',
       extended_profile: [{ field_name: 'company', field_value: 'test company' }],
     };
     store.dispatch = jest.fn(store.dispatch);
-    const progressiveProfilingPage = await getProgressiveProfilingPage();
+    const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+
     progressiveProfilingPage.find('select#gender').simulate('change', { target: { value: 'm', name: 'gender' } });
     progressiveProfilingPage.find('input#company').simulate('change', { target: { value: 'test company', name: 'company' } });
 
@@ -151,102 +186,187 @@ describe('ProgressiveProfilingTests', () => {
     expect(store.dispatch).toHaveBeenCalledWith(saveUserProfile('abc123', formPayload));
   });
 
-  it('should open modal on pressing skip for now button', async () => {
-    const progressiveProfilingPage = await getProgressiveProfilingPage();
-
-    progressiveProfilingPage.find('button.btn-link').simulate('click');
-    expect(progressiveProfilingPage.find('.pgn__modal-content-container').exists()).toBeTruthy();
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked');
-  });
-
-  it('should send analytic event for support link click', async () => {
-    const progressiveProfilingPage = await getProgressiveProfilingPage();
-
-    progressiveProfilingPage.find('.pp-page__support-link a[target="_blank"]').simulate('click');
-    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked');
-  });
-
-  it('should show error message when patch request fails', async () => {
+  it('should show error message when patch request fails', () => {
     store = mockStore({
+      ...initialState,
       welcomePage: {
         ...initialState.welcomePage,
         showError: true,
       },
     });
 
-    const progressiveProfilingPage = await getProgressiveProfilingPage();
+    const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
     expect(progressiveProfilingPage.find('#pp-page-errors').exists()).toBeTruthy();
   });
 
-  it('should redirect to dashboard if no form fields are configured', async () => {
-    store = mockStore({
-      welcomePage: {
-        formRenderState: FAILURE_STATE,
-      },
-    });
+  // ******** miscellaneous tests ********
 
+  it('should redirect to login page if unauthenticated user tries to access welcome page', () => {
+    getAuthenticatedUser.mockReturnValue(null);
     delete window.location;
     window.location = {
-      href: getConfig().BASE_URL,
       assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
+      href: getConfig().BASE_URL,
     };
-    await getProgressiveProfilingPage();
-    expect(window.location.href).toBe(DASHBOARD_URL);
+
+    mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+    expect(window.location.href).toEqual(DASHBOARD_URL);
   });
 
   describe('Recommendations test', () => {
+    window.OnetrustActiveGroups = 'C0003';
     mergeConfig({
-      ENABLE_PERSONALIZED_RECOMMENDATIONS: true,
+      ENABLE_POST_REGISTRATION_RECOMMENDATIONS: true,
     });
 
-    it.skip('should redirect to recommendations page if recommendations are enabled', async () => {
+    it('should redirect to recommendations page if recommendations are enabled', () => {
       store = mockStore({
+        ...initialState,
         welcomePage: {
           ...initialState.welcomePage,
           success: true,
         },
       });
-
-      getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123' });
-      const progressiveProfilingPage = await getProgressiveProfilingPage();
+      const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
 
       expect(progressiveProfilingPage.find('button.btn-brand').text()).toEqual('Next');
-      expect(history.location.pathname).toEqual(RECOMMENDATIONS);
+      expect(mockNavigate).toHaveBeenCalledWith(RECOMMENDATIONS);
     });
 
     it('should not redirect to recommendations page if user is on its way to enroll in a course', async () => {
-      delete window.location;
-      window.location = {
-        href: getConfig().BASE_URL,
-        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
-      };
-
       const redirectUrl = `${getConfig().LMS_BASE_URL}${DEFAULT_REDIRECT_URL}?enrollment_action=1`;
-      props = {
-        getFieldData: jest.fn(),
-        location: {
-          state: {
-            registrationResult: {
-              redirectUrl,
-              success: true,
-            },
-            optionalFields,
+      useLocation.mockReturnValue({
+        state: {
+          registrationResult: {
+            redirectUrl,
+            success: true,
           },
+          optionalFields,
         },
-      };
+      });
 
       store = mockStore({
+        ...initialState,
         welcomePage: {
           ...initialState.welcomePage,
           success: true,
         },
       });
 
-      getAuthenticatedUser.mockReturnValue({ userId: 3, username: 'abc123' });
-      const progressiveProfilingPage = await getProgressiveProfilingPage();
+      const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
 
       expect(progressiveProfilingPage.find('button.btn-brand').text()).toEqual('Submit');
       expect(window.location.href).toEqual(redirectUrl);
     });
   });
+
+  describe('Embedded Form Workflow Test', () => {
+    mergeConfig({
+      SEARCH_CATALOG_URL: 'http://localhost/search',
+    });
+    const host = 'http://example.com';
+
+    beforeEach(() => {
+      useLocation.mockReturnValue({
+        state: {},
+      });
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+          optionalFields,
+        },
+      });
+    });
+
+    it('should set host property value embedded host for on ramp experience for skip link event', () => {
+      delete window.location;
+      window.location = {
+        href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
+        search: `?host=${host}&variant=${EMBEDDED}`,
+      };
+      const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+
+      progressiveProfilingPage.find('button.btn-link').simulate('click');
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host });
+    });
+
+    it('should set host property value to host where iframe is embedded for on ramp experience', () => {
+      const expectedEventProperties = {
+        isGenderSelected: false,
+        isYearOfBirthSelected: false,
+        isLevelOfEducationSelected: false,
+        host: 'http://example.com',
+      };
+      delete window.location;
+      window.location = {
+        href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
+        search: `?host=${host}`,
+      };
+      const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+      progressiveProfilingPage.find('button.btn-brand').simulate('click');
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.submit.clicked', expectedEventProperties);
+    });
+
+    it('should render fields returned by backend API', () => {
+      delete window.location;
+      window.location = {
+        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
+        href: getConfig().BASE_URL,
+        search: `?variant=${EMBEDDED}&host=${host}`,
+      };
+
+      const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+      expect(progressiveProfilingPage.find('#gender').exists()).toBeTruthy();
+    });
+
+    it('should redirect to dashboard if API call to get form field fails', () => {
+      delete window.location;
+      window.location = {
+        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
+        href: getConfig().BASE_URL,
+        search: `?variant=${EMBEDDED}`,
+      };
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthApiStatus: FAILURE_STATE,
+        },
+      });
+
+      mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+      expect(window.location.href).toBe(DASHBOARD_URL);
+    });
+
+    it('should redirect to provided redirect url', () => {
+      const redirectUrl = 'https://redirect-test.com';
+      delete window.location;
+      window.location = {
+        assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
+        href: getConfig().BASE_URL,
+        search: `?variant=${EMBEDDED}&host=${host}&next=${redirectUrl}`,
+      };
+      store = mockStore({
+        ...initialState,
+        commonComponents: {
+          ...initialState.commonComponents,
+          thirdPartyAuthApiStatus: COMPLETE_STATE,
+          optionalFields,
+          thirdPartyAuthContext: {
+            welcomePageRedirectUrl: redirectUrl,
+          },
+        },
+        welcomePage: {
+          ...initialState.welcomePage,
+          success: true,
+        },
+      });
+
+      const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
+      progressiveProfilingPage.find('button.btn-brand').simulate('click');
+      expect(window.location.href).toBe(redirectUrl);
+    });
+  });
 });

src/recommendations/ProductCard/BaseCard/index.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Badge, Card, Hyperlink } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import { truncateText } from '../../data/utils';
+
+const BaseCard = ({
+  customHeaderImage,
+  schoolLogo,
+  title,
+  uuid,
+  subtitle,
+  variant,
+  productTypeCopy,
+  footer,
+  handleOnClick,
+  isLoading,
+}) => (
+  <div className="recommendation-card" key={`container-${uuid}`}>
+    <Hyperlink
+      target="_blank"
+      className="card-box"
+      showLaunchIcon={false}
+      onClick={handleOnClick}
+    >
+      <Card
+        className={`base-card ${variant}`}
+        variant={variant}
+        isLoading={isLoading}
+      >
+        <Card.ImageCap
+          className="base-card-image-show optanon-category-C0001"
+          src={customHeaderImage}
+          srcAlt={`header image for ${subtitle}`}
+          logoSrc={schoolLogo}
+          logoAlt={`logo for ${subtitle}`}
+          imageLoadingType="lazy"
+        />
+        <Card.Header
+          className="mt-2"
+          title={truncateText(title)}
+          subtitle={truncateText(subtitle)}
+        />
+        <Card.Section className="d-flex">
+          <div className="product-badge">
+            <Badge>
+              {productTypeCopy}
+            </Badge>
+          </div>
+          <div className="footer-content mt-2">
+            {footer}
+          </div>
+        </Card.Section>
+      </Card>
+    </Hyperlink>
+  </div>
+);
+
+BaseCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  uuid: PropTypes.string.isRequired,
+  footer: PropTypes.element.isRequired,
+  productTypeCopy: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  variant: PropTypes.string.isRequired,
+  customHeaderImage: PropTypes.string.isRequired,
+  schoolLogo: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool,
+  handleOnClick: PropTypes.func.isRequired,
+};
+
+BaseCard.defaultProps = {
+  isLoading: false,
+};
+export default BaseCard;

src/recommendations/ProductCard/Footer/index.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import {
+  cardFooterMessages,
+} from '../../messages';
+
+const ProductCardFooter = ({
+  factoid,
+  quickFacts,
+  courseLength,
+  cardType,
+}) => {
+  const intl = useIntl();
+  const courseLengthLabel = courseLength > 1 ? 'Courses' : 'Course';
+
+  if (courseLength) {
+    return (
+      <p className="x-small">
+        {intl.formatMessage(
+          cardFooterMessages[
+            'recommendation.product-card.footer-text.number-of-courses'
+          ],
+          { length: courseLength, label: courseLengthLabel },
+        )}
+      </p>
+    );
+  }
+
+  if (cardType === 'program') {
+    if (quickFacts && quickFacts.length > 0) {
+      const quickFactsCount = quickFacts.length;
+
+      const threeFactsArrangement = [1, 3, 0];
+      const twoFactsArrangement = [0, 2];
+      return (
+        <>
+          {(quickFactsCount > 3 ? threeFactsArrangement : twoFactsArrangement)
+            .map((index) => quickFacts[index])
+            .filter(Boolean)
+            .map((fact, idx) => (
+              <p key={fact.text} className="d-inline-block x-small">
+                {idx > 0 && <span className="p-2">•</span>}
+                {fact && fact.text}
+              </p>
+            ))}
+        </>
+      );
+    }
+  }
+
+  if (factoid) {
+    return <p className="x-small">{factoid}</p>;
+  }
+
+  return null;
+};
+
+ProductCardFooter.propTypes = {
+  cardType: PropTypes.string,
+  factoid: PropTypes.string,
+  quickFacts: PropTypes.arrayOf(PropTypes.shape({})),
+  courseLength: PropTypes.number,
+};
+
+ProductCardFooter.defaultProps = {
+  cardType: '',
+  factoid: '',
+  quickFacts: [],
+  courseLength: undefined,
+};
+
+export default ProductCardFooter;

src/recommendations/ProductCard/index.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import BaseCard from './BaseCard';
+import Footer from './Footer';
+import { createCodeFriendlyProduct, getVariant, useProductType } from '../data/utils';
+import {
+  cardBadgesMessages,
+} from '../messages';
+import { trackRecommendationClick } from '../track';
+
+const ProductCard = ({
+  product,
+  userId,
+  position,
+  isLoading,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const productType = useProductType(product?.courseType, product?.type);
+
+  const variant = getVariant(productType);
+
+  const headerImage = product?.cardImageUrl || product?.image?.src;
+
+  const schoolName = product?.organizationShortCodeOverride
+    || product?.owners?.[0]?.name
+    || product?.authoringOrganizations?.[0]?.name
+    || product?.partner;
+  const schoolLogo = product?.organizationLogoOverrideUrl
+    || product?.logoFilename
+    || product?.authoringOrganizations?.[0]?.logoImageUrl
+    || product?.owners?.[0]?.logoImageUrl;
+
+  const { owners } = product;
+  const multipleSchoolNames = [];
+  const isMultipleOwner = owners?.length > 1;
+
+  if ((owners?.length > 1)) {
+    owners.forEach((owner, index, arr) => {
+      let school;
+      if (index === arr.length - 1) {
+        school = (
+          <span key={owner.name}>{owner.name}</span>
+        );
+      } else {
+        school = (
+          <>
+            <span key={owner.name}>{owner.name}</span>
+            <br />
+          </>
+        );
+      }
+
+      multipleSchoolNames.push(school);
+    });
+  }
+
+  const productTypeCopy = formatMessage(
+    cardBadgesMessages[
+      `recommendation.product-card.pill-text.${createCodeFriendlyProduct(productType)}`
+    ],
+  );
+  const handleCardClick = () => {
+    trackRecommendationClick(
+      product,
+      position + 1,
+      userId,
+    );
+  };
+
+  return (
+    <BaseCard
+      customHeaderImage={headerImage}
+      schoolLogo={isMultipleOwner ? '' : schoolLogo}
+      title={product.title}
+      uuid={product.uuid}
+      key={product.uuid}
+      subtitle={isMultipleOwner ? multipleSchoolNames : schoolName}
+      productTypeCopy={productTypeCopy}
+      productType={productType}
+      variant={variant}
+      isLoading={isLoading}
+      footer={(
+        <Footer
+          quickFacts={product.degree?.quickFacts}
+          externalUrl={product.additionalMetadata?.externalUrl
+            || product.degree?.additionalMetadata?.externalUrl}
+          courseLength={product.courses?.length}
+          isSubscriptionView={!!product.subscriptionEligible}
+          is2UDegreeProgram={product.is2UDegreeProgram}
+          cardType={product.cardType}
+        />
+      )}
+      handleOnClick={handleCardClick}
+      isSubscriptionView={!!product.subscriptionEligible}
+    />
+  );
+};
+
+ProductCard.propTypes = {
+  product: PropTypes.shape([
+    PropTypes.shape({}),
+  ]).isRequired,
+  userId: PropTypes.number.isRequired,
+  position: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool,
+};
+
+ProductCard.defaultProps = {
+  isLoading: false,
+};
+export default ProductCard;

src/recommendations/RecommendationCard.jsx

@@ -1,87 +0,0 @@
-import React from 'react';
-
-import { Card, Hyperlink } from '@edx/paragon';
-import PropTypes from 'prop-types';
-
-import { trackRecommendationCardClickOptimizely } from './optimizelyExperiment';
-import { trackRecommendationsClicked } from './track';
-
-const RecommendationCard = (props) => {
-  const { recommendation, position, userId } = props;
-  const showPartnerLogo = recommendation.owners.length === 1;
-
-  const getOwners = () => {
-    if (recommendation.owners.length === 1) {
-      return recommendation.owners[0].key;
-    }
-
-    let keys = '';
-    recommendation.owners.forEach((owner) => {
-      keys += `${owner.key }, `;
-    });
-    return keys.slice(0, -2);
-  };
-
-  const handleCardClick = () => {
-    trackRecommendationCardClickOptimizely(userId?.toString());
-    trackRecommendationsClicked(
-      recommendation.courseKey,
-      false,
-      position + 1,
-      userId,
-      recommendation.marketingUrl,
-      recommendation.recommendationType || 'algolia',
-    );
-  };
-
-  return (
-    <div className="mr-4 recommendation-card">
-      <Hyperlink
-        destination={recommendation.marketingUrl}
-        target="_blank"
-        className="card-box"
-        showLaunchIcon={false}
-        onClick={handleCardClick}
-      >
-        <Card isClickable>
-          <Card.ImageCap
-            src={recommendation.cardImageUrl}
-            srcAlt="Card image"
-            logoSrc={showPartnerLogo ? recommendation.owners[0].logoImageUrl : ''}
-            logoAlt="Card logo"
-          />
-          <Card.Header
-            title={recommendation.title}
-            subtitle={getOwners()}
-          />
-          <Card.Section />
-          <Card.Footer textElement={<small className="pgn__card__footer-text">Course</small>} />
-        </Card>
-      </Hyperlink>
-    </div>
-  );
-};
-
-RecommendationCard.propTypes = {
-  recommendation: PropTypes.shape({
-    courseKey: PropTypes.string.isRequired,
-    activeRunKey: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    cardImageUrl: PropTypes.string.isRequired,
-    owners: PropTypes.arrayOf(PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      logoImageUrl: PropTypes.string.isRequired,
-    })),
-    marketingUrl: PropTypes.string.isRequired,
-    recommendationType: PropTypes.string,
-  }).isRequired,
-  position: PropTypes.number.isRequired,
-  userId: PropTypes.number,
-};
-
-RecommendationCard.defaultProps = {
-  userId: null,
-};
-
-export default RecommendationCard;

src/recommendations/RecommendationsList.jsx

@@ -1,55 +1,41 @@
 import React from 'react';
 
-import { Container } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
-import RecommendationCard from './RecommendationCard';
+import ProductCard from './ProductCard';
 
 const RecommendationsList = (props) => {
-  const { title, recommendations, userId } = props;
+  const { recommendations, userId, isLoading } = props;
 
   return (
-    <Container id="course-recommendations" size="lg" className="recommendations-container">
-      <h2 className="text-sm-center mb-4 text-left recommendations-container__heading">
-        {title}
-      </h2>
-      <div className="d-flex recommendations-container__card-list">
-        {
-          recommendations.map((recommendation, idx) => (
-            <RecommendationCard
-              key={recommendation.activeRunKey}
-              recommendation={recommendation}
-              position={idx}
-              userId={userId}
-            />
-          ))
-        }
-      </div>
-    </Container>
+    <div className="d-flex flex-wrap mb-3 recommendations-container__card-list">
+      {
+        recommendations.map((recommendation, idx) => (
+          <ProductCard
+            key={recommendation.uuid}
+            product={recommendation}
+            position={idx}
+            userId={userId}
+            isLoading={isLoading}
+          />
+        ))
+      }
+    </div>
   );
 };
 
 RecommendationsList.propTypes = {
-  title: PropTypes.string.isRequired,
   recommendations: PropTypes.arrayOf(PropTypes.shape({
-    courseKey: PropTypes.string.isRequired,
-    activeRunKey: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    cardImageUrl: PropTypes.string.isRequired,
-    owners: PropTypes.arrayOf(PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      logoImageUrl: PropTypes.string.isRequired,
-    })),
-    marketingUrl: PropTypes.string.isRequired,
-    recommendationType: PropTypes.string,
+    uuid: PropTypes.string,
   })),
   userId: PropTypes.number,
+  isLoading: PropTypes.bool,
 };
 
 RecommendationsList.defaultProps = {
   recommendations: [],
   userId: null,
+  isLoading: false,
 };
 
 export default RecommendationsList;

src/recommendations/RecommendationsPage.jsx

@@ -1,80 +1,50 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Hyperlink, Image, Spinner, StatefulButton,
+  breakpoints,
+  Container,
+  Hyperlink,
+  Image, Skeleton,
+  StatefulButton,
+  useMediaQuery,
 } from '@edx/paragon';
-import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { useLocation } from 'react-router-dom';
 
-import { EDUCATION_LEVEL_MAPPING, RECOMMENDATIONS_COUNT } from './data/constants';
-import getPersonalizedRecommendations from './data/service';
-import { convertCourseRunKeytoCourseKey } from './data/utils';
+import { EDUCATION_LEVEL_MAPPING, PERSONALIZED } from './data/constants';
+import useAlgoliaRecommendations from './data/hooks/useAlgoliaRecommendations';
 import messages from './messages';
-import RecommendationsList from './RecommendationsList';
-import { trackRecommendationsViewed } from './track';
+import RecommendationsLargeLayout from './RecommendationsPageLayouts/LargeLayout';
+import RecommendationsSmallLayout from './RecommendationsPageLayouts/SmallLayout';
+import { LINK_TIMEOUT, trackRecommendationsViewed, trackSkipButtonClicked } from './track';
 import { DEFAULT_REDIRECT_URL } from '../data/constants';
 
-const RecommendationsPage = (props) => {
-  const { location } = props;
-  const registrationResponse = location.state?.registrationResult;
-  const userId = location.state?.userId;
-  const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
-
+const RecommendationsPage = () => {
   const { formatMessage } = useIntl();
-  const [isLoading, setIsLoading] = useState(true);
-  const [recommendations, setRecommendations] = useState([]);
-  const [algoliaRecommendations, setAlgoliaRecommendations] = useState([]);
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 });
+  const location = useLocation();
+
+  const registrationResponse = location.state?.registrationResult;
+  const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
   const educationLevel = EDUCATION_LEVEL_MAPPING[location.state?.educationLevel];
+  const userId = location.state?.userId;
+
+  const userCountry = useSelector((state) => state.register.backendCountryCode);
+  const {
+    recommendations: algoliaRecommendations,
+    isLoading,
+  } = useAlgoliaRecommendations(userCountry, educationLevel);
 
   useEffect(() => {
-    if (registrationResponse) {
-      const generalRecommendations = JSON.parse(getConfig().GENERAL_RECOMMENDATIONS);
-      let coursesWithKeys = [];
-      getPersonalizedRecommendations(educationLevel).then((response) => {
-        coursesWithKeys = response.map(course => ({
-          ...course,
-          courseKey: convertCourseRunKeytoCourseKey(course.activeRunKey),
-        }));
-        setAlgoliaRecommendations(coursesWithKeys.slice(0, RECOMMENDATIONS_COUNT));
-
-        if (coursesWithKeys.length >= RECOMMENDATIONS_COUNT) {
-          setRecommendations(coursesWithKeys.slice(0, RECOMMENDATIONS_COUNT));
-        } else {
-          const courseRecommendations = coursesWithKeys.concat(generalRecommendations);
-          // Remove duplicate recommendations
-          const uniqueRecommendations = courseRecommendations.filter(
-            (recommendation, index, self) => index === self.findIndex((existingRecommendation) => (
-              existingRecommendation.courseKey === recommendation.courseKey
-            )),
-          );
-          setRecommendations(uniqueRecommendations.slice(0, RECOMMENDATIONS_COUNT));
-        }
-
-        setIsLoading(false);
-      })
-        .catch(() => {
-          setRecommendations(generalRecommendations.slice(0, RECOMMENDATIONS_COUNT));
-          setIsLoading(false);
-        });
-    }
-  }, [registrationResponse, DASHBOARD_URL, educationLevel, userId]);
-
-  useEffect(() => {
-    if (!isLoading) {
-      // We only want to track the recommendations returned by Algolia
-      const courseKeys = algoliaRecommendations.map(course => course.courseKey);
-      trackRecommendationsViewed(courseKeys, false, userId);
+    if (!isLoading && algoliaRecommendations.length > 0) {
+      trackRecommendationsViewed(algoliaRecommendations, PERSONALIZED, userId);
     }
   }, [isLoading, algoliaRecommendations, userId]);
 
-  if (!registrationResponse) {
-    global.location.assign(DASHBOARD_URL);
-    return null;
-  }
-
-  const handleRedirection = () => {
+  const handleSkipRecommendationPage = () => {
     window.history.replaceState(location.state, null, '');
     if (registrationResponse) {
       window.location.href = registrationResponse.redirectUrl;
@@ -83,15 +53,21 @@ const RecommendationsPage = (props) => {
     }
   };
 
-  if (!isLoading && recommendations.length < RECOMMENDATIONS_COUNT) {
-    handleRedirection();
-  }
-
   const handleSkip = (e) => {
     e.preventDefault();
-    handleRedirection();
+    trackSkipButtonClicked(userId);
+    setTimeout(() => { handleSkipRecommendationPage(); }, LINK_TIMEOUT);
   };
 
+  if (!registrationResponse) {
+    window.location.href = DASHBOARD_URL;
+    return null;
+  }
+
+  if (!isLoading && !algoliaRecommendations.length) {
+    handleSkipRecommendationPage();
+  }
+
   return (
     <>
       <Helmet>
@@ -99,56 +75,55 @@ const RecommendationsPage = (props) => {
           { siteName: getConfig().SITE_NAME })}
         </title>
       </Helmet>
-      <div className="d-flex flex-column vh-100 bg-light-200">
+      <div className="d-flex flex-column bg-light-200 min-vh-100">
         <div className="mb-2">
           <div className="col-md-12 small-screen-top-stripe medium-screen-top-stripe extra-large-screen-top-stripe" />
           <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
             <Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
           </Hyperlink>
         </div>
-        {(!isLoading && recommendations.length === RECOMMENDATIONS_COUNT) ? (
-          <div className="d-flex flex-column align-items-center justify-content-center flex-grow-1 p-1">
-            <RecommendationsList
-              title={formatMessage(messages['recommendation.page.heading'])}
-              recommendations={recommendations}
-              userId={userId}
-            />
-            <div className="text-center">
-              <StatefulButton
-                className="font-weight-500"
-                type="submit"
-                variant="brand"
-                labels={{
-                  default: formatMessage(messages['recommendation.skip.button']),
-                }}
-                onClick={handleSkip}
+        <div className="d-flex flex-column align-items-center justify-content-center flex-grow-1">
+          <Container
+            id="course-recommendations"
+            size="lg"
+            className="pr-4 pl-4 mt-4.5 mb-4.5 mb-md-5"
+          >
+            {isExtraSmall ? (
+              <RecommendationsSmallLayout
+                userId={userId}
+                isLoading={isLoading}
+                personalizedRecommendations={algoliaRecommendations}
               />
+            ) : (
+              <RecommendationsLargeLayout
+                userId={userId}
+                isLoading={isLoading}
+                personalizedRecommendations={algoliaRecommendations}
+              />
+            )}
+            <div className="mt-3 mt-sm-4.5 text-center">
+              {isLoading && (
+                <Skeleton height={40} width={140} />
+              )}
+              {!isLoading && algoliaRecommendations.length && (
+                <StatefulButton
+                  className="font-weight-500"
+                  type="submit"
+                  variant="outline-brand"
+                  labels={{
+                    default: formatMessage(messages['recommendation.skip.button']),
+                  }}
+                  onClick={handleSkip}
+                />
+              )}
             </div>
-          </div>
-        )
-          : (
-            <Spinner animation="border" variant="primary" className="spinner--position-centered" />
-          )}
+          </Container>
+        </div>
       </div>
     </>
   );
 };
 
-RecommendationsPage.propTypes = {
-  location: PropTypes.shape({
-    state: PropTypes.shape({
-      registrationResult: PropTypes.shape({
-        redirectUrl: PropTypes.string,
-      }),
-      userId: PropTypes.number,
-      educationLevel: PropTypes.string,
-    }),
-  }),
-
-};
-
-RecommendationsPage.defaultProps = {
-  location: { state: {} },
-};
+RecommendationsPage.propTypes = {};
 
 export default RecommendationsPage;

src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Skeleton } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import loadingCoursesPlaceholders from '../data/loadingCoursesPlaceholders';
+import messages from '../messages';
+import RecommendationsList from '../RecommendationsList';
+
+const RecommendationsLargeLayout = (props) => {
+  const {
+    userId,
+    isLoading,
+    personalizedRecommendations,
+  } = props;
+  const { formatMessage } = useIntl();
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton height={32} width={300} className="mb-5" />
+        <RecommendationsList
+          recommendations={loadingCoursesPlaceholders}
+          userId={userId}
+          isLoading
+        />
+      </>
+    );
+  }
+
+  if (personalizedRecommendations.length) {
+    return (
+      <span id="recommendations-large-layout">
+        <h1 className="h2 text-sm-center mb-5 mb-sm-4.5 text-left recommendations-container__heading">
+          {formatMessage(messages['recommendation.page.heading'])}
+        </h1>
+
+        <RecommendationsList
+          recommendations={personalizedRecommendations}
+          userId={userId}
+        />
+      </span>
+    );
+  }
+
+  return null;
+};
+
+RecommendationsLargeLayout.propTypes = {
+  userId: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool,
+  personalizedRecommendations: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+RecommendationsLargeLayout.defaultProps = {
+  isLoading: true,
+  personalizedRecommendations: [],
+};
+
+export default RecommendationsLargeLayout;

src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Skeleton } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import loadingCoursesPlaceholders from '../data/loadingCoursesPlaceholders';
+import messages from '../messages';
+import RecommendationsList from '../RecommendationsList';
+
+const RecommendationsSmallLayout = (props) => {
+  const {
+    userId,
+    isLoading,
+    personalizedRecommendations,
+  } = props;
+  const { formatMessage } = useIntl();
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton height={36} className="mb-3" />
+        <RecommendationsList
+          recommendations={loadingCoursesPlaceholders}
+          userId={userId}
+          isLoading
+        />
+      </>
+    );
+  }
+
+  if (personalizedRecommendations.length) {
+    return (
+      <span id="recommendations-small-layout">
+        <h1 className="h3 text-sm-center mb-4.5 text-left recommendations-container__heading">
+          {formatMessage(messages['recommendation.page.heading'])}
+        </h1>
+
+        <RecommendationsList
+          recommendations={personalizedRecommendations}
+          userId={userId}
+        />
+      </span>
+    );
+  }
+
+  return null;
+};
+
+RecommendationsSmallLayout.propTypes = {
+  userId: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool,
+  personalizedRecommendations: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+RecommendationsSmallLayout.defaultProps = {
+  isLoading: true,
+  personalizedRecommendations: [],
+};
+
+export default RecommendationsSmallLayout;

src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { mount } from 'enzyme';
+
+import SmallLayout from './SmallLayout';
+import mockedRecommendedProducts from '../data/tests/mockedData';
+
+const IntlRecommendationsSmallLayoutPage = injectIntl(SmallLayout);
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn(),
+}));
+
+jest.mock('@edx/paragon', () => ({
+  ...jest.requireActual('@edx/paragon'),
+  useMediaQuery: jest.fn(),
+}));
+
+describe('RecommendationsPageTests', () => {
+  let props = {};
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  );
+
+  beforeEach(() => {
+    props = {
+      userId: 123,
+      personalizedRecommendations: mockedRecommendedProducts,
+      isLoading: false,
+    };
+  });
+
+  it('should render recommendations when recommendations are not loading', () => {
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
+    expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy();
+  });
+
+  it('should render loading state when recommendations are loading', () => {
+    props = {
+      ...props,
+      isLoading: true,
+    };
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
+    expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
+  });
+});

src/recommendations/data/algoliaResultsParser.js

@@ -0,0 +1,33 @@
+import { PERSONALIZED } from './constants';
+
+const { camelCaseObject } = require('@edx/frontend-platform');
+
+const processCourseSearchResult = (searchResultCourse) => {
+  const camelCasedResult = camelCaseObject(searchResultCourse);
+
+  return {
+    activeCourseRun: {
+      key: camelCasedResult.activeRunKey,
+      type: camelCasedResult.activeRunType,
+      marketingUrl: camelCasedResult.marketingUrl,
+    },
+    activeRunKey: camelCasedResult.activeRunKey,
+    allowedIn: camelCasedResult.allowedIn,
+    blockedIn: camelCasedResult.blockedIn,
+    cardType: 'course',
+    courseType: 'course',
+    image: {
+      src: camelCasedResult.cardImageUrl,
+    },
+    owners: camelCasedResult.owners,
+    title: camelCasedResult.title,
+    uuid: camelCasedResult.uuid,
+    objectID: `course-${camelCasedResult.uuid}`,
+    productSource: {
+      name: camelCasedResult.productSource,
+    },
+    recommendationType: PERSONALIZED,
+  };
+};
+
+export default processCourseSearchResult;

src/recommendations/data/constants.js

@@ -9,3 +9,10 @@ export const EDUCATION_LEVEL_MAPPING = {
   hs: 'Introductory',
   jhs: 'Introductory',
 };
+
+export const PERSONALIZED = 'personalized';
+
+export const LEVEL_FACET = 'level';
+export const PRODUCT_FACET = 'product';
+export const PRODUCT_TYPE_COURSE = 'course';
+export const MAX_RECOMMENDATIONS = 4;

src/recommendations/data/hooks/useAlgoliaRecommendations.jsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+
+import algoliasearchHelper from 'algoliasearch-helper';
+
+import {
+  getLocationRestrictionFilter,
+  initializeSearchClient,
+} from '../../../data/algolia';
+import isOneTrustFunctionalCookieEnabled from '../../../data/oneTrust';
+import processCourseSearchResult from '../algoliaResultsParser';
+import {
+  LEVEL_FACET, MAX_RECOMMENDATIONS, PRODUCT_FACET, PRODUCT_TYPE_COURSE,
+} from '../constants';
+
+const INDEX_NAME = process.env.ALGOLIA_AUTHN_RECOMMENDATIONS_INDEX;
+
+/**
+ * This hooks returns Algolia recommendations only if functional cookies are enabled. * @param userCountry
+ * @param userCountry
+ * @param educationLevel
+ * @returns {{isLoading: boolean, recommendations: *[]}}
+ */
+const useAlgoliaRecommendations = (userCountry, educationLevel) => {
+  const functionalCookiesEnabled = isOneTrustFunctionalCookieEnabled();
+  const [recommendations, setRecommendations] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!functionalCookiesEnabled) {
+      setIsLoading(false);
+      return;
+    }
+
+    const getSearchFiltersQueryString = () => getLocationRestrictionFilter(userCountry);
+
+    const algoliaSearchParams = {
+      facets: [LEVEL_FACET, PRODUCT_FACET],
+      filters: getSearchFiltersQueryString(),
+      aroundLatLngViaIP: true,
+    };
+
+    const searchClient = initializeSearchClient();
+    const searchHelper = algoliasearchHelper(
+      searchClient,
+      INDEX_NAME,
+      algoliaSearchParams,
+    );
+
+    searchHelper.addFacetRefinement(PRODUCT_FACET, PRODUCT_TYPE_COURSE);
+    if (educationLevel) {
+      searchHelper.addFacetRefinement(LEVEL_FACET, educationLevel);
+    }
+
+    const searchIndex = () => {
+      searchHelper.search();
+    };
+
+    searchIndex();
+
+    searchHelper.on('result', ({ results }) => {
+      const parsedCourses = results.hits.slice(0, MAX_RECOMMENDATIONS).map(
+        (course) => processCourseSearchResult(course),
+      );
+      setRecommendations(parsedCourses);
+      setIsLoading(false);
+    });
+
+    searchHelper.on('error', () => setIsLoading(false));
+  }, [educationLevel, functionalCookiesEnabled, userCountry]);
+
+  return {
+    recommendations,
+    isLoading,
+  };
+};
+
+export default useAlgoliaRecommendations;

src/recommendations/data/loadingCoursesPlaceholders.js

@@ -0,0 +1,36 @@
+const placeholderCourse = {
+  activeCourseRun: {
+    key: 'course',
+    marketingUrl: '/',
+    type: 'Verified and Audit',
+  },
+  cardType: 'course',
+  image: {
+    src: './',
+  },
+  inProspectus: true,
+  objectID: 'skeleton',
+  owners: [{
+    key: 'skeleton',
+    logoImageUrl: './',
+    name: 'skeleton',
+  }],
+  position: 0,
+  prospectusPath: './',
+  queryID: 'skeleton',
+  recentEnrollmentCount: 0,
+  title: 'skeleton',
+  topics: [{
+    topic: 'skeleton',
+  }],
+  uuid: 'skeleton',
+};
+
+const loadingCoursesPlaceHolders = [
+  { ...placeholderCourse, uuid: '294ea4rtn2117', courseType: 'course' },
+  { ...placeholderCourse, uuid: '294fga4681117', courseType: 'course' },
+  { ...placeholderCourse, uuid: '294ea4278e117', courseType: 'course' },
+  { ...placeholderCourse, uuid: '294eax2rtg117', courseType: 'course' },
+];
+
+export default loadingCoursesPlaceHolders;

src/recommendations/data/service.js

@@ -1,22 +0,0 @@
-import { camelCaseObject } from '@edx/frontend-platform';
-import algoliasearch from 'algoliasearch/lite';
-
-const INDEX_NAME = process.env.ALGOLIA_AUTHN_RECOMMENDATIONS_INDEX;
-
-const getPersonalizedRecommendations = async (educationLevel) => {
-  const facetFilters = ['product:Course', 'availability:Available now'];
-
-  if (educationLevel) {
-    facetFilters.push(`level:${educationLevel}`);
-  }
-  const client = algoliasearch(process.env.ALGOLIA_APP_ID, process.env.ALGOLIA_SEARCH_KEY);
-  const index = client.initIndex(INDEX_NAME);
-  const { hits } = await index.search('', {
-    aroundLatLngViaIP: true,
-    facetFilters,
-  });
-
-  return camelCaseObject(hits);
-};
-
-export default getPersonalizedRecommendations;

src/recommendations/data/tests/hooks.test.jsx

@@ -0,0 +1,56 @@
+import { renderHook } from '@testing-library/react-hooks';
+import algoliasearchHelper from 'algoliasearch-helper';
+
+import mockedRecommendedProducts from './mockedData';
+import CreateAlgoliaSearchHelperMock from './test_utils/test_utils';
+import isOneTrustFunctionalCookieEnabled from '../../../data/oneTrust';
+import useAlgoliaRecommendations from '../hooks/useAlgoliaRecommendations';
+
+jest.mock('algoliasearch-helper');
+
+jest.mock('../../../data/oneTrust');
+
+jest.mock('../../../data/algolia', () => ({
+  initializeSearchClient: jest.fn(),
+  getLocationRestrictionFilter: jest.fn((countryCode) => `NOT BLOCKED IN ${countryCode}`),
+}));
+
+jest.mock('../algoliaResultsParser', () => jest.fn((course) => course));
+
+describe('useAlgoliaRecommendations Tests', () => {
+  const MockSearchHelperWithData = new CreateAlgoliaSearchHelperMock(mockedRecommendedProducts);
+  const MockSearchHelperWithoutData = new CreateAlgoliaSearchHelperMock();
+
+  it('should fetch recommendations only if functional cookies are set', async () => {
+    isOneTrustFunctionalCookieEnabled.mockImplementation(() => true);
+    algoliasearchHelper.mockImplementation(() => MockSearchHelperWithData);
+    const { result } = renderHook(
+      () => useAlgoliaRecommendations('PK', 'Introductory'),
+    );
+
+    expect(result.current.recommendations).toEqual(mockedRecommendedProducts);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('should not fetch recommendations if functional cookies are not set', async () => {
+    isOneTrustFunctionalCookieEnabled.mockImplementation(() => false);
+    algoliasearchHelper.mockImplementation(() => MockSearchHelperWithData);
+    const { result } = renderHook(
+      () => useAlgoliaRecommendations('PK', 'Introductory'),
+    );
+
+    expect(result.current.recommendations).toEqual([]);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('should return empty list if no recommendations returned from Algolia', async () => {
+    isOneTrustFunctionalCookieEnabled.mockImplementation(() => true);
+    algoliasearchHelper.mockImplementation(() => MockSearchHelperWithoutData);
+    const { result } = renderHook(
+      () => useAlgoliaRecommendations('PK', 'Introductory'),
+    );
+
+    expect(result.current.recommendations).toEqual([]);
+    expect(result.current.isLoading).toBe(false);
+  });
+});

src/recommendations/data/tests/mockedData.js

@@ -0,0 +1,96 @@
+const mockedRecommendedProducts = [
+  {
+    activeCourseRun: {
+      key: 'course-v1:TEST_COURSE_RUN',
+      type: 'test_course_run_type',
+      marketingUrl: 'test_marketingUrl',
+    },
+    activeRunKey: 'course-v1:TEST_COURSE_RUN',
+    recommendationType: 'personalized',
+    allowedIn: [],
+    blockedIn: [],
+    cardType: 'course',
+    courseType: 'course',
+    image: {
+      src: 'test_src',
+    },
+    owners: [],
+    title: 'test_title',
+    uuid: 'test_uuid',
+    objectID: 'course-test_uuid',
+    productSource: {
+      name: 'test_source',
+    },
+  },
+  {
+    activeCourseRun: {
+      key: 'course-v1:TEST_COURSE_RUN',
+      type: 'test_course_run_type',
+      marketingUrl: 'test_marketingUrl',
+    },
+    activeRunKey: 'course-v1:TEST_COURSE_RUN',
+    recommendationType: 'personalized',
+    allowedIn: [],
+    blockedIn: [],
+    cardType: 'course',
+    courseType: 'course',
+    image: {
+      src: 'test_src',
+    },
+    owners: [],
+    title: 'test_title',
+    uuid: 'test_uuid2',
+    objectID: 'course-test_uuid',
+    productSource: {
+      name: 'test_source',
+    },
+  },
+  {
+    activeCourseRun: {
+      key: 'course-v1:TEST_COURSE_RUN',
+      type: 'test_course_run_type',
+      marketingUrl: 'test_marketingUrl',
+    },
+    activeRunKey: 'course-v1:TEST_COURSE_RUN',
+    recommendationType: 'personalized',
+    allowedIn: [],
+    blockedIn: [],
+    cardType: 'course',
+    courseType: 'course',
+    image: {
+      src: 'test_src',
+    },
+    owners: [],
+    title: 'test_title',
+    uuid: 'test_uuid3',
+    objectID: 'course-test_uuid',
+    productSource: {
+      name: 'test_source',
+    },
+  },
+  {
+    activeCourseRun: {
+      key: 'course-v1:TEST_COURSE_RUN',
+      type: 'test_course_run_type',
+      marketingUrl: 'test_marketingUrl',
+    },
+    activeRunKey: 'course-v1:TEST_COURSE_RUN',
+    recommendationType: 'personalized',
+    allowedIn: [],
+    blockedIn: [],
+    cardType: 'course',
+    courseType: 'course',
+    image: {
+      src: 'test_src',
+    },
+    owners: [],
+    title: 'test_title',
+    uuid: 'test_uuid4',
+    objectID: 'course-test_uuid',
+    productSource: {
+      name: 'test_source',
+    },
+  },
+];
+
+export default mockedRecommendedProducts;