Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: onboarding component recommendations on authn

Browse Source
This commit is contained in:
mubbsharanwar
2024-07-12 14:08:10 +05:00
parent 6b983e18d3
commit 74fc221674
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/data/constants.js
View File

@@ -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';

36
src/recommendations/RecommendationsPage.jsx
View File

@@ -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?.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 || null);
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;
}