feat: show recommendations

Redirect onboarding component user experience to authn recommendations

VAN-1947

.env.development

@@ -7,6 +7,7 @@ LOGIN_URL=http://localhost:18000/login
 LOGOUT_URL=http://localhost:18000/login
 REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
 MARKETING_SITE_BASE_URL='http://localhost:5335/'
+AUTHN_MFE_URL='http://localhost:1999'
 SITE_NAME=edX
 INFO_EMAIL=info@edx.org
 ONBOARDING_COMPONENT_ENV='development'
@@ -20,3 +21,5 @@ PRIVACY_POLICY='http://localhost:18000/privacy'
 LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'
 # ***** Cookies *****
 USER_RETENTION_COOKIE_NAME='authn-returning-user'
+# ***** Flags *****
+ENABLE_POST_REGISTRATION_RECOMMENDATIONS=''

example/index.jsx

@@ -23,6 +23,7 @@ initialize({
   handlers: {
     config: () => {
       mergeConfig({
+        AUTHN_MFE_URL: process.env.AUTHN_MFE_URL || '',
         ON_BOARDING_ALGOLIA_APP_ID: process.env.ON_BOARDING_ALGOLIA_APP_ID || '',
         ON_BOARDING_ALGOLIA_SEARCH_API_KEY: process.env.ON_BOARDING_ALGOLIA_SEARCH_API_KEY || '',
         INFO_EMAIL: process.env.INFO_EMAIL || '',
@@ -32,6 +33,7 @@ initialize({
         PRIVACY_POLICY: process.env.PRIVACY_POLICY || '',
         TOS_AND_HONOR_CODE: process.env.TOS_AND_HONOR_CODE || '',
         USER_RETENTION_COOKIE_NAME: process.env.USER_RETENTION_COOKIE_NAME || '',
+        ENABLE_POST_REGISTRATION_RECOMMENDATIONS: process.env.ENABLE_POST_REGISTRATION_RECOMMENDATIONS || false,
       });
     },
   },

src/data/constants.js

@@ -24,6 +24,7 @@ export const TPA_SESSION_EXPIRED = 'tpa-session-expired';
 
 // URL Paths
 export const ENTERPRISE_LOGIN_URL = '/enterprise/login';
+export const AUTHN_MFE_RECOMMENDATIONS_PATH = '/recommendations';
 
 // Query string parameters that can be passed to LMS to manage
 // things like auto-enrollment upon login and registration.

src/forms/common-components/AuthenticatedRedirection.jsx

@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 
-import { PROGRESSIVE_PROFILING_FORM } from '../../data/constants';
+import { AUTHN_MFE_RECOMMENDATIONS_PATH, PROGRESSIVE_PROFILING_FORM } from '../../data/constants';
 import { setCookie } from '../../data/cookies';
 import { LINK_TIMEOUT } from '../../data/segment/utils';
 import { useDispatch } from '../../data/storeHooks';
@@ -31,6 +31,9 @@ const AuthenticatedRedirection = ({
   redirectToProgressiveProfilingForm = false,
   success = false,
   isLinkTracked = false,
+  redirectToRecommendationsPage = false,
+  educationLevel = '',
+  country = '',
 }) => {
   const dispatch = useDispatch();
 
@@ -56,6 +59,20 @@ const AuthenticatedRedirection = ({
       dispatch(setCurrentOpenedForm(PROGRESSIVE_PROFILING_FORM));
       return null;
     }
+    // Redirect to authn MFE recommendations after submiting the progressive profiling form
+    if (redirectToRecommendationsPage) {
+      const recommendationsUrl = new URL(`${getConfig().AUTHN_MFE_URL}${AUTHN_MFE_RECOMMENDATIONS_PATH}`);
+      const searchParams = new URLSearchParams();
+
+      searchParams.set('country', country);
+      searchParams.set('finalRedirectUrl', finalRedirectUrl);
+      if (educationLevel) {
+        searchParams.set('levelOfEducation', educationLevel);
+      }
+
+      recommendationsUrl.search = searchParams.toString();
+      finalRedirectUrl = recommendationsUrl.toString();
+    }
 
     if (isLinkTracked) {
       setTimeout(() => { window.location.href = finalRedirectUrl; }, LINK_TIMEOUT);
@@ -71,7 +88,10 @@ AuthenticatedRedirection.propTypes = {
   finishAuthUrl: PropTypes.string,
   success: PropTypes.bool,
   redirectUrl: PropTypes.string,
+  educationLevel: PropTypes.string,
+  country: PropTypes.string,
   redirectToProgressiveProfilingForm: PropTypes.bool,
+  redirectToRecommendationsPage: PropTypes.bool,
   isLinkTracked: PropTypes.bool,
 };
 

src/forms/progressive-profiling-popup/index.jsx

@@ -26,7 +26,7 @@ import {
 } from '../../data/constants';
 import { getCountryCookieValue } from '../../data/cookies';
 import { useDispatch, useSelector } from '../../data/storeHooks';
-import { moveScrollToTop } from '../../data/utils';
+import getAllPossibleQueryParams, { moveScrollToTop } from '../../data/utils';
 import { setCurrentOpenedForm } from '../../onboarding-component/data/reducers';
 import {
   trackProgressiveProfilingPageViewed,
@@ -52,6 +52,9 @@ const ProgressiveProfilingForm = () => {
 
   const countryCookieValue = getCountryCookieValue();
   const countryList = useMemo(() => getCountryList(getLocale()), []);
+  const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
+  const showRecommendations = getConfig().ENABLE_POST_REGISTRATION_RECOMMENDATIONS
+    && !('enrollment_action' in queryParams || queryParams?.next);
 
   const submitState = useSelector(state => state.progressiveProfiling.submitState);
   const subjectsList = useSelector(state => state.progressiveProfiling.subjectsList);
@@ -196,6 +199,9 @@ const ProgressiveProfilingForm = () => {
         success={submitState === COMPLETE_STATE}
         redirectUrl={redirectUrl}
         finishAuthUrl={finishAuthUrl}
+        redirectToRecommendationsPage={showRecommendations}
+        educationLevel={formData?.levelOfEducation}
+        country={formData?.country}
         isLinkTracked
       />
       <h1