diff --git a/src/data/constants.js b/src/data/constants.js index 5adf438218..c253edfb82 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -35,6 +35,6 @@ export const VALID_EMAIL_REGEX = '(^[-!#$%&\'*+/=?^_`{}|~0-9A-Z]+(\\.[-!#$%&\'*+ // 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', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta']; +export const AUTH_PARAMS = ['course_id', 'enrollment_action', 'course_mode', 'country', 'email_opt_in', 'purchase_workflow', 'next', 'register_for_free', 'track', 'is_account_recovery', 'variant', 'host', 'cta', 'levelOfEducation', 'finishAuthUrl']; export const REDIRECT = 'redirect'; export const APP_NAME = 'authn_mfe'; diff --git a/src/recommendations/RecommendationsPage.jsx b/src/recommendations/RecommendationsPage.jsx index 000c9df097..f7bcd4f0b5 100644 --- a/src/recommendations/RecommendationsPage.jsx +++ b/src/recommendations/RecommendationsPage.jsx @@ -1,7 +1,8 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { getConfig } from '@edx/frontend-platform'; +import { getAuthenticatedUser } from '@edx/frontend-platform/auth'; import { useIntl } from '@edx/frontend-platform/i18n'; import { breakpoints, @@ -21,18 +22,35 @@ import RecommendationsLargeLayout from './RecommendationsPageLayouts/LargeLayout import RecommendationsSmallLayout from './RecommendationsPageLayouts/SmallLayout'; import { LINK_TIMEOUT, trackRecommendationsViewed, trackSkipButtonClicked } from './track'; import { DEFAULT_REDIRECT_URL } from '../data/constants'; +import { getAllPossibleQueryParams } from '../data/utils'; const RecommendationsPage = () => { const { formatMessage } = useIntl(); + const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL); const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 }); const location = useLocation(); + const queryParams = getAllPossibleQueryParams(); + // flag to show recommendations for onboarding component experience + const showRecommendations = !!queryParams?.levelOfEducation || (!!queryParams?.finalRedirectUrl && !!queryParams?.country); + const backendCountryCode = useSelector((state) => state.register.backendCountryCode); - 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 [redirectUrl, setRedirectUrl] = useState(location.state?.registrationResult?.redirectUrl); + const [educationLevel, setEducationLevel] = useState(EDUCATION_LEVEL_MAPPING[location.state?.educationLevel]); + const [userId, setUserId] = useState(location.state?.userId || -1); + const [userCountry, setUserCountry] = useState(backendCountryCode); + + useEffect(() => { + if (showRecommendations) { + const authenticatedUser = getAuthenticatedUser(); + if (authenticatedUser) { + setRedirectUrl(queryParams.finalRedirectUrl); + setEducationLevel(EDUCATION_LEVEL_MAPPING[queryParams.levelOfEducation]); + setUserCountry(queryParams.country); + setUserId(authenticatedUser?.userId); + } + } + }, [showRecommendations, queryParams]); - const userCountry = useSelector((state) => state.register.backendCountryCode); const { recommendations: algoliaRecommendations, isLoading, @@ -46,8 +64,8 @@ const RecommendationsPage = () => { const handleSkipRecommendationPage = () => { window.history.replaceState(location.state, null, ''); - if (registrationResponse) { - window.location.href = registrationResponse.redirectUrl; + if (redirectUrl) { + window.location.href = redirectUrl; } else { window.location.href = DASHBOARD_URL; } @@ -59,7 +77,7 @@ const RecommendationsPage = () => { setTimeout(() => { handleSkipRecommendationPage(); }, LINK_TIMEOUT); }; - if (!registrationResponse) { + if (!redirectUrl && !showRecommendations) { window.location.href = DASHBOARD_URL; return null; }