@@ -29,11 +29,13 @@ RecommendationsList.propTypes = {
uuid: PropTypes.string,
})),
userId: PropTypes.number,
+ isLoading: PropTypes.bool,
};
RecommendationsList.defaultProps = {
recommendations: [],
userId: null,
+ isLoading: false,
};
export default RecommendationsList;
diff --git a/src/recommendations/RecommendationsPage.jsx b/src/recommendations/RecommendationsPage.jsx
index 84079d93..d06cb9f9 100644
--- a/src/recommendations/RecommendationsPage.jsx
+++ b/src/recommendations/RecommendationsPage.jsx
@@ -1,36 +1,50 @@
import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
- Container, Hyperlink, Image, StatefulButton, Tab, Tabs,
+ 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 { POPULAR, TRENDING } from './data/constants';
-import useProducts from './data/hooks/useProducts';
+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 { trackRecommendationsViewed, trackSkipButtonClicked } from './track';
import { DEFAULT_REDIRECT_URL } from '../data/constants';
-const RecommendationsPage = ({ countryCode }) => {
+const RecommendationsPage = () => {
const { formatMessage } = useIntl();
+ 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 { popularProducts, trendingProducts, isLoading } = useProducts(countryCode);
- const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+ const userCountry = useSelector((state) => state.register.backendCountryCode);
+ const {
+ recommendations: algoliaRecommendations,
+ isLoading,
+ } = useAlgoliaRecommendations(userCountry, educationLevel);
useEffect(() => {
- trackRecommendationsViewed(popularProducts, POPULAR, false, userId);
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
+ if (!isLoading && algoliaRecommendations.length > 0) {
+ trackRecommendationsViewed(algoliaRecommendations, PERSONALIZED, userId);
+ }
+ }, [isLoading, algoliaRecommendations, userId]);
- const handleRedirection = () => {
+ const handleSkipRecommendationPage = () => {
window.history.replaceState(location.state, null, '');
if (registrationResponse) {
window.location.href = registrationResponse.redirectUrl;
@@ -41,7 +55,8 @@ const RecommendationsPage = ({ countryCode }) => {
const handleSkip = (e) => {
e.preventDefault();
- handleRedirection();
+ trackSkipButtonClicked(userId);
+ handleSkipRecommendationPage();
};
if (!registrationResponse) {
@@ -49,15 +64,10 @@ const RecommendationsPage = ({ countryCode }) => {
return null;
}
- if (!isLoading && (!popularProducts.length || !trendingProducts.length)) {
- handleRedirection();
+ if (!isLoading && !algoliaRecommendations.length) {
+ handleSkipRecommendationPage();
}
- const handleOnSelect = (tabKey) => {
- const recommendations = tabKey === POPULAR ? popularProducts : trendingProducts;
- trackRecommendationsViewed(recommendations, tabKey, false, userId);
- };
-
return (
<>
+
-
-
-
- {formatMessage(messages['recommendation.page.heading'])}
-
-
-
-
+
+ {isExtraSmall ? (
+
+ ) : (
+
+ )}
+
+ {isLoading && (
+
+ )}
+ {!isLoading && algoliaRecommendations.length && (
+
-
-
-
-
-
+ )}
+
-
-
-
);
};
-RecommendationsPage.propTypes = {
- countryCode: PropTypes.string.isRequired,
-};
+RecommendationsPage.propTypes = {};
-const mapStateToProps = state => ({
- countryCode: state.register.backendCountryCode,
-});
-
-export default connect(
- mapStateToProps,
- null,
-)(RecommendationsPage);
+export default RecommendationsPage;
diff --git a/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx b/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx
new file mode 100644
index 00000000..7a3c0320
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ );
+ }
+
+ if (personalizedRecommendations.length) {
+ return (
+
+
+ {formatMessage(messages['recommendation.page.heading'])}
+
+
+
+
+ );
+ }
+
+ return null;
+};
+
+RecommendationsLargeLayout.propTypes = {
+ userId: PropTypes.number.isRequired,
+ isLoading: PropTypes.bool,
+ personalizedRecommendations: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+RecommendationsLargeLayout.defaultProps = {
+ isLoading: true,
+ personalizedRecommendations: [],
+};
+
+export default RecommendationsLargeLayout;
diff --git a/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx b/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx
new file mode 100644
index 00000000..db23ec4e
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ );
+ }
+
+ if (personalizedRecommendations.length) {
+ return (
+
+
+ {formatMessage(messages['recommendation.page.heading'])}
+
+
+
+
+ );
+ }
+
+ return null;
+};
+
+RecommendationsSmallLayout.propTypes = {
+ userId: PropTypes.number.isRequired,
+ isLoading: PropTypes.bool,
+ personalizedRecommendations: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+RecommendationsSmallLayout.defaultProps = {
+ isLoading: true,
+ personalizedRecommendations: [],
+};
+
+export default RecommendationsSmallLayout;
diff --git a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
new file mode 100644
index 00000000..dc490993
--- /dev/null
+++ b/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 => (
+
+ {children}
+
+ );
+
+ beforeEach(() => {
+ props = {
+ userId: 123,
+ personalizedRecommendations: mockedRecommendedProducts,
+ isLoading: false,
+ };
+ });
+
+ it('should render recommendations when recommendations are not loading', () => {
+ const recommendationsPage = mount(reduxWrapper(
));
+ 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(
));
+ expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
+ });
+});
diff --git a/src/recommendations/data/algoliaResultsParser.js b/src/recommendations/data/algoliaResultsParser.js
new file mode 100644
index 00000000..c160f472
--- /dev/null
+++ b/src/recommendations/data/algoliaResultsParser.js
@@ -0,0 +1,29 @@
+const { camelCaseObject } = require('@edx/frontend-platform');
+
+const processCourseSearchResult = (searchResultCourse) => {
+ const camelCasedResult = camelCaseObject(searchResultCourse);
+
+ return {
+ activeCourseRun: {
+ key: camelCasedResult.activeRunKey,
+ type: camelCasedResult.activeRunType,
+ marketingUrl: camelCasedResult.marketingUrl,
+ },
+ 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: {
+ slug: camelCasedResult.productSource,
+ },
+ };
+};
+
+export default processCourseSearchResult;
diff --git a/src/recommendations/data/constants.js b/src/recommendations/data/constants.js
index e31f8967..a6f16c93 100644
--- a/src/recommendations/data/constants.js
+++ b/src/recommendations/data/constants.js
@@ -10,5 +10,9 @@ export const EDUCATION_LEVEL_MAPPING = {
jhs: 'Introductory',
};
-export const POPULAR = 'popular';
-export const TRENDING = 'trending';
+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;
diff --git a/src/recommendations/data/hooks/useAlgoliaRecommendations.jsx b/src/recommendations/data/hooks/useAlgoliaRecommendations.jsx
new file mode 100644
index 00000000..79e0de47
--- /dev/null
+++ b/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;
diff --git a/src/recommendations/data/hooks/useProducts.jsx b/src/recommendations/data/hooks/useProducts.jsx
deleted file mode 100644
index 7ea3cae4..00000000
--- a/src/recommendations/data/hooks/useProducts.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-
-import { filterLocationRestriction } from '../utils';
-
-export default function useProducts(countryCode) {
- const [isLoading, setLoading] = useState(true);
- const [popularProducts, setPopularProducts] = useState([]);
- const [trendingProducts, setTrendingProducts] = useState([]);
-
- useEffect(() => {
- const popular = filterLocationRestriction(JSON.parse(getConfig().POPULAR_PRODUCTS), countryCode);
- const trending = filterLocationRestriction(JSON.parse(getConfig().TRENDING_PRODUCTS), countryCode);
-
- setPopularProducts(popular);
- setTrendingProducts(trending);
- setLoading(false);
- }, [countryCode]);
-
- return { popularProducts, trendingProducts, isLoading };
-}
diff --git a/src/recommendations/data/loadingCoursesPlaceholders.js b/src/recommendations/data/loadingCoursesPlaceholders.js
new file mode 100644
index 00000000..0a0c338b
--- /dev/null
+++ b/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;
diff --git a/src/recommendations/data/service.js b/src/recommendations/data/service.js
deleted file mode 100644
index dc38a667..00000000
--- a/src/recommendations/data/service.js
+++ /dev/null
@@ -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;
diff --git a/src/recommendations/data/tests/hooks.test.jsx b/src/recommendations/data/tests/hooks.test.jsx
new file mode 100644
index 00000000..9e5d6cf2
--- /dev/null
+++ b/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);
+ });
+});
diff --git a/src/recommendations/data/tests/mockedData.js b/src/recommendations/data/tests/mockedData.js
new file mode 100644
index 00000000..4c071272
--- /dev/null
+++ b/src/recommendations/data/tests/mockedData.js
@@ -0,0 +1,88 @@
+const mockedRecommendedProducts = [
+ {
+ activeCourseRun: {
+ key: 'course-v1:TEST_COURSE_RUN',
+ type: 'test_course_run_type',
+ marketingUrl: 'test_marketingUrl',
+ },
+ allowedIn: [],
+ blockedIn: [],
+ cardType: 'course',
+ courseType: 'course',
+ image: {
+ src: 'test_src',
+ },
+ owners: [],
+ title: 'test_title',
+ uuid: 'test_uuid',
+ objectID: 'course-test_uuid',
+ productSource: {
+ slug: 'test_source',
+ },
+ },
+ {
+ activeCourseRun: {
+ key: 'course-v1:TEST_COURSE_RUN',
+ type: 'test_course_run_type',
+ marketingUrl: 'test_marketingUrl',
+ },
+ allowedIn: [],
+ blockedIn: [],
+ cardType: 'course',
+ courseType: 'course',
+ image: {
+ src: 'test_src',
+ },
+ owners: [],
+ title: 'test_title',
+ uuid: 'test_uuid2',
+ objectID: 'course-test_uuid',
+ productSource: {
+ slug: 'test_source',
+ },
+ },
+ {
+ activeCourseRun: {
+ key: 'course-v1:TEST_COURSE_RUN',
+ type: 'test_course_run_type',
+ marketingUrl: 'test_marketingUrl',
+ },
+ allowedIn: [],
+ blockedIn: [],
+ cardType: 'course',
+ courseType: 'course',
+ image: {
+ src: 'test_src',
+ },
+ owners: [],
+ title: 'test_title',
+ uuid: 'test_uuid3',
+ objectID: 'course-test_uuid',
+ productSource: {
+ slug: 'test_source',
+ },
+ },
+ {
+ activeCourseRun: {
+ key: 'course-v1:TEST_COURSE_RUN',
+ type: 'test_course_run_type',
+ marketingUrl: 'test_marketingUrl',
+ },
+ allowedIn: [],
+ blockedIn: [],
+ cardType: 'course',
+ courseType: 'course',
+ image: {
+ src: 'test_src',
+ },
+ owners: [],
+ title: 'test_title',
+ uuid: 'test_uuid4',
+ objectID: 'course-test_uuid',
+ productSource: {
+ slug: 'test_source',
+ },
+ },
+];
+
+export default mockedRecommendedProducts;
diff --git a/src/recommendations/data/tests/parser.test.jsx b/src/recommendations/data/tests/parser.test.jsx
new file mode 100644
index 00000000..629f77dd
--- /dev/null
+++ b/src/recommendations/data/tests/parser.test.jsx
@@ -0,0 +1,26 @@
+import mockedRecommendedProducts from './mockedData';
+import processCourseSearchResult from '../algoliaResultsParser';
+
+describe('AlgoliaResultsParserTests', () => {
+ const dataToBeProcessed = {
+ activeRunKey: 'course-v1:TEST_COURSE_RUN',
+ activeRunType: 'test_course_run_type',
+ marketingUrl: 'test_marketingUrl',
+ minEffort: 1,
+ maxEffort: 2,
+ weeksToComplete: 3,
+ allowedIn: [],
+ blockedIn: [],
+ cardImageUrl: 'test_src',
+ owners: [],
+ title: 'test_title',
+ uuid: 'test_uuid',
+ recentEnrollmentCount: 1,
+ productSource: 'test_source',
+ };
+
+ it('should parse results returned by Algolia', async () => {
+ const parsedData = processCourseSearchResult(dataToBeProcessed);
+ expect(parsedData).toEqual(mockedRecommendedProducts[0]);
+ });
+});
diff --git a/src/recommendations/data/tests/test_utils/test_utils.jsx b/src/recommendations/data/tests/test_utils/test_utils.jsx
new file mode 100644
index 00000000..f27cb9e6
--- /dev/null
+++ b/src/recommendations/data/tests/test_utils/test_utils.jsx
@@ -0,0 +1,63 @@
+// Algolia Search Helper mock data
+class CreateAlgoliaSearchHelperMock {
+ hits = [];
+
+ eventCb = () => {};
+
+ derived = [];
+
+ maxLimit = 0;
+
+ refineProp = null;
+
+ refineVal = null;
+
+ constructor(mockData = [], limit = 0) {
+ this.hits = mockData;
+ this.maxLimit = limit;
+ }
+
+ onMock(eventName, callback) {
+ if (eventName === 'result') {
+ const hitData = this.hits.slice(0, this.maxLimit > 0 ? this.maxLimit : this.hits.length);
+ callback({
+ results: {
+ hits: hitData,
+ },
+ });
+ } else if (eventName === 'error') {
+ callback({});
+ }
+ }
+
+ setQueryMock = () => {};
+
+ searchMock = () => {
+ this.eventCb();
+ };
+
+ clearRefinementsMock = () => this;
+
+ refinementMock(refineBy, value) {
+ // addDisjunctiveFacetRefinement // addFacetRefinement
+ this.refineProp = refineBy;
+ this.refineVal = value;
+ return this;
+ }
+
+ on = this.onMock;
+
+ setQuery = this.setQueryMock;
+
+ search = this.searchMock;
+
+ derive = this.deriveMock;
+
+ clearRefinements = this.clearRefinementsMock;
+
+ addDisjunctiveFacetRefinement = this.refinementMock;
+
+ addFacetRefinement = this.refinementMock;
+}
+
+export default CreateAlgoliaSearchHelperMock;
diff --git a/src/recommendations/messages.js b/src/recommendations/messages.js
index 41e7ff46..f0b46b86 100644
--- a/src/recommendations/messages.js
+++ b/src/recommendations/messages.js
@@ -18,7 +18,7 @@ const messages = defineMessages({
},
'recommendation.option.trending': {
id: 'recommendation.option.trending',
- defaultMessage: 'Trending',
+ defaultMessage: 'Trending Now',
description: 'Title for trending products',
},
'recommendation.option.popular': {
@@ -26,6 +26,11 @@ const messages = defineMessages({
defaultMessage: 'Most Popular',
description: 'Title for popular products',
},
+ 'recommendation.option.recommended.for.you': {
+ id: 'recommendation.option.recommended.for.you',
+ defaultMessage: 'Recommended For You',
+ description: 'Title for personalized products',
+ },
});
export const cardBadgesMessages = defineMessages({
diff --git a/src/recommendations/optimizelyExperiment.js b/src/recommendations/optimizelyExperiment.js
deleted file mode 100644
index f9af744a..00000000
--- a/src/recommendations/optimizelyExperiment.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import optimizelyInstance from '../data/optimizely';
-
-const RECOMMENDATIONS_EXP_KEY = 'popular_and_trending_recommendations_exp';
-const RECOMMENDATIONS_EXP_VARIATION = 'popular_and_trending_recommendations';
-
-export const eventNames = {
- recommendedCourseClicked: 'welcome_page_recommendation_card_click',
- recommendationsViewed: 'welcome_page_recommendations_viewed',
-};
-
-/**
- * Activate the post registration recommendations optimizely experiment
- * and return the true if the user is in variation else false.
- * @param {String} userId user id of authenticated user.
- * @return {string} variation the user belong in
-*/
-const activateRecommendationsExperiment = (userId) => optimizelyInstance?.activate(RECOMMENDATIONS_EXP_KEY, userId);
-
-/**
- * Fire an optimizely track event for post registration recommended course card clicked.
- * @param {String} userId user id of authenticated user.
- * @param {Object} userAttributes Dictionary of user attributes (optional).
-*/
-const trackRecommendationCardClickOptimizely = (userId, userAttributes = {}) => {
- optimizelyInstance?.track(eventNames.recommendedCourseClicked, userId, userAttributes);
-};
-
-/**
- * Fire an optimizely track event for post registration recommendation viewed.
- * @param {String} userId user id of authenticated user.
- * @param {Object} userAttributes Dictionary of user attributes (optional).
-*/
-const trackRecommendationViewedOptimizely = (userId, userAttributes = {}) => {
- optimizelyInstance?.track(eventNames.recommendationsViewed, userId, userAttributes);
-};
-
-export {
- RECOMMENDATIONS_EXP_VARIATION,
- activateRecommendationsExperiment,
- trackRecommendationCardClickOptimizely,
- trackRecommendationViewedOptimizely,
-};
diff --git a/src/recommendations/tests/RecommendationsPage.test.jsx b/src/recommendations/tests/RecommendationsPage.test.jsx
index 7548587a..496923a2 100644
--- a/src/recommendations/tests/RecommendationsPage.test.jsx
+++ b/src/recommendations/tests/RecommendationsPage.test.jsx
@@ -1,14 +1,20 @@
import React from 'react';
import { Provider } from 'react-redux';
-import { getConfig, mergeConfig } from '@edx/frontend-platform';
+import { getConfig } from '@edx/frontend-platform';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { useMediaQuery } from '@edx/paragon';
import { mount } from 'enzyme';
import { useLocation } from 'react-router-dom';
import configureStore from 'redux-mock-store';
import { DEFAULT_REDIRECT_URL } from '../../data/constants';
+import { PERSONALIZED } from '../data/constants';
+import useAlgoliaRecommendations from '../data/hooks/useAlgoliaRecommendations';
+import mockedRecommendedProducts from '../data/tests/mockedData';
import RecommendationsPage from '../RecommendationsPage';
+import { eventNames, getProductMapping } from '../track';
const IntlRecommendationsPage = injectIntl(RecommendationsPage);
const mockStore = configureStore();
@@ -16,22 +22,20 @@ const mockStore = configureStore();
jest.mock('@edx/frontend-platform/analytics', () => ({
sendTrackEvent: jest.fn(),
}));
-jest.mock('../data/service', () => ({
- __esModule: true,
- default: jest.fn(),
-}));
+
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: jest.fn(),
}));
-describe('RecommendationsPageTests', () => {
- mergeConfig({
- GENERAL_RECOMMENDATIONS: '[]',
- POPULAR_PRODUCTS: '[]',
- TRENDING_PRODUCTS: '[]',
- });
+jest.mock('@edx/paragon', () => ({
+ ...jest.requireActual('@edx/paragon'),
+ useMediaQuery: jest.fn(),
+}));
+jest.mock('../data/hooks/useAlgoliaRecommendations', () => jest.fn());
+
+describe('RecommendationsPageTests', () => {
let store = {};
const dashboardUrl = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
@@ -65,6 +69,11 @@ describe('RecommendationsPageTests', () => {
useLocation.mockReturnValue({
state: {},
});
+
+ useAlgoliaRecommendations.mockReturnValue({
+ recommendations: mockedRecommendedProducts,
+ isLoading: false,
+ });
});
it('should redirect to dashboard if user is not coming from registration workflow', () => {
@@ -72,10 +81,13 @@ describe('RecommendationsPageTests', () => {
expect(window.location.href).toEqual(dashboardUrl);
});
- it('should redirect if either popular or trending recommendations are not configured', () => {
- mockUseLocation();
+ it('should redirect user if no personalized recommendations are available', () => {
+ useAlgoliaRecommendations.mockReturnValue({
+ recommendations: [],
+ isLoading: false,
+ });
mount(reduxWrapper(
));
- expect(window.location.href).toEqual(redirectUrl);
+ expect(window.location.href).toEqual(dashboardUrl);
});
it('should redirect user if they click "Skip for now" button', () => {
@@ -86,9 +98,67 @@ describe('RecommendationsPageTests', () => {
expect(window.location.href).toEqual(redirectUrl);
});
- it('displays popular products as default recommendations', () => {
+ it('should display recommendations small layout for small screen', () => {
mockUseLocation();
+ useMediaQuery.mockReturnValue(true);
const recommendationsPage = mount(reduxWrapper(
));
- expect(recommendationsPage.find('.nav-link .active a').text()).toEqual('Most Popular');
+
+ expect(recommendationsPage.find('#recommendations-small-layout').exists()).toBeTruthy();
+ expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy();
+ });
+
+ it('should display recommendations large layout for large screen', () => {
+ mockUseLocation();
+ useMediaQuery.mockReturnValue(false);
+ const recommendationsPage = mount(reduxWrapper(
));
+
+ expect(recommendationsPage.find('.pgn_collapsible').exists()).toBeFalsy();
+ expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy();
+ });
+
+ it('should display skeletons if recommendations are loading for large screen', () => {
+ mockUseLocation();
+ useMediaQuery.mockReturnValue(false);
+ useAlgoliaRecommendations.mockReturnValueOnce({
+ recommendations: [],
+ isLoading: true,
+ });
+ const recommendationsPage = mount(reduxWrapper(
));
+
+ expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
+ });
+
+ it('should display skeletons if recommendations are loading for small screen', () => {
+ mockUseLocation();
+ useMediaQuery.mockReturnValue(true);
+ useAlgoliaRecommendations.mockReturnValueOnce({
+ recommendations: [],
+ isLoading: true,
+ });
+ const recommendationsPage = mount(reduxWrapper(
));
+
+ expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
+ });
+
+ it('should fire recommendations viewed event', () => {
+ mockUseLocation();
+ useAlgoliaRecommendations.mockReturnValue({
+ recommendations: mockedRecommendedProducts,
+ isLoading: false,
+ });
+
+ useMediaQuery.mockReturnValue(false);
+ mount(reduxWrapper(
));
+
+ expect(sendTrackEvent).toBeCalled();
+ expect(sendTrackEvent).toHaveBeenCalledWith(
+ eventNames.recommendationsViewed,
+ {
+ page: 'authn_recommendations',
+ recommendation_type: PERSONALIZED,
+ products: getProductMapping(mockedRecommendedProducts),
+ user_id: 111,
+ },
+ );
});
});
diff --git a/src/recommendations/tests/track.test.js b/src/recommendations/tests/track.test.js
new file mode 100644
index 00000000..c73bdeaf
--- /dev/null
+++ b/src/recommendations/tests/track.test.js
@@ -0,0 +1,131 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import {
+ eventNames, trackRecommendationClick, trackRecommendationsViewed, trackSkipButtonClicked,
+} from '../track';
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+ sendTrackEvent: jest.fn(),
+}));
+
+describe('SegmentEventTrackingTest', () => {
+ global.open = jest.fn();
+ const userId = 1;
+
+ it('test click event is fired properly and correct link opens for program product type', async () => {
+ jest.useFakeTimers();
+ const program = {
+ cardType: 'program',
+ title: 'test program',
+ uuid: 'test_uuid',
+ productSource: {
+ name: 'test_source',
+ },
+ recommendationType: 'static',
+ url: 'test_url',
+ };
+ const position = 0;
+
+ trackRecommendationClick(program, position, userId);
+ jest.advanceTimersByTime(300);
+
+ expect(sendTrackEvent).toBeCalled();
+ expect(sendTrackEvent).toHaveBeenCalledWith(
+ eventNames.recommendedProductClicked,
+ {
+ page: 'authn_recommendations',
+ position,
+ product_key: `${program.title} [${program.uuid}]`,
+ product_line: program.cardType,
+ product_source: program.productSource.name,
+ recommendation_type: program.recommendationType,
+ user_id: userId,
+ },
+ );
+
+ expect(global.open).toBeCalled();
+ expect(global.open).toHaveBeenCalledWith(program.url, '_blank');
+ });
+
+ it('test click event is fired properly and correct link opens for course product type', async () => {
+ jest.useFakeTimers();
+ const course = {
+ cardType: 'course',
+ activeRunKey: 'test_key',
+ productSource: {
+ name: 'test_source',
+ },
+ recommendationType: 'static',
+ activeCourseRun: {
+ marketingUrl: 'test_url',
+ },
+ };
+ const position = 0;
+
+ trackRecommendationClick(course, position, userId);
+ jest.advanceTimersByTime(300);
+
+ expect(sendTrackEvent).toBeCalled();
+ expect(sendTrackEvent).toHaveBeenCalledWith(
+ eventNames.recommendedProductClicked,
+ {
+ page: 'authn_recommendations',
+ position,
+ product_key: course.activeRunKey,
+ product_line: course.cardType,
+ product_source: course.productSource.name,
+ recommendation_type: course.recommendationType,
+ user_id: userId,
+ },
+ );
+
+ expect(global.open).toBeCalled();
+ expect(global.open).toHaveBeenCalledWith(course.activeCourseRun.marketingUrl, '_blank');
+ });
+
+ it('test viewed events are fired properly', () => {
+ const productList = [
+ {
+ title: 'Test Program',
+ uuid: '1234-5678-9101-1213',
+ cardType: 'program',
+ productSource: {
+ name: 'org name',
+ },
+ },
+ ];
+ const recommendationsType = 'static';
+ const expectedProductList = [
+ {
+ product_key: 'Test Program [1234-5678-9101-1213]',
+ product_line: 'program',
+ product_source: 'org name',
+ },
+ ];
+
+ trackRecommendationsViewed(productList, recommendationsType, userId);
+ expect(sendTrackEvent).toBeCalled();
+ expect(sendTrackEvent).toHaveBeenCalledWith(
+ eventNames.recommendationsViewed,
+ {
+ page: 'authn_recommendations',
+ products: expectedProductList,
+ recommendation_type: recommendationsType,
+ user_id: userId,
+ },
+ );
+ });
+
+ it('test skip button event is fired with correct properties', () => {
+ trackSkipButtonClicked(userId);
+
+ expect(sendTrackEvent).toBeCalled();
+ expect(sendTrackEvent).toHaveBeenCalledWith(
+ eventNames.skipButtonClicked,
+ {
+ page: 'authn_recommendations',
+ user_id: userId,
+ },
+ );
+ });
+});
diff --git a/src/recommendations/track.js b/src/recommendations/track.js
index e08c7457..5d826a3e 100644
--- a/src/recommendations/track.js
+++ b/src/recommendations/track.js
@@ -4,25 +4,21 @@ export const LINK_TIMEOUT = 300;
export const eventNames = {
recommendedProductClicked: 'edx.bi.user.recommended.product.clicked',
- recommendationsGroup: 'edx.bi.user.recommendations.group',
recommendationsViewed: 'edx.bi.user.recommendations.viewed',
+ skipButtonClicked: 'edx.bi.user.recommendations.skip.btn.clicked',
};
-export const createLinkTracker = (tracker, href, openInNewTab = false) => (e) => {
- e.preventDefault();
- tracker();
- if (openInNewTab) {
- return setTimeout(() => { global.open(href, '_blank'); }, LINK_TIMEOUT);
- }
- return setTimeout(() => { global.location.href = href; }, LINK_TIMEOUT);
-};
+const generateProductKey = (product) => (
+ product.cardType === 'program' ? `${product.title} [${product.uuid}]` : product.activeRunKey
+);
-const generateProductKey = (product) => {
- const productKey = product.cardType === 'program' ? `${product.title} [${product.uuid}]` : product.activeRunKey;
- return productKey;
-};
+export const getProductMapping = (recommendedProducts) => recommendedProducts.map((product) => ({
+ product_key: generateProductKey(product),
+ product_line: product.cardType,
+ product_source: product.productSource.name,
+}));
-export const trackRecommendationClick = (product, position, isControl, userId) => {
+export const trackRecommendationClick = (product, position, userId) => {
sendTrackEvent(eventNames.recommendedProductClicked, {
page: 'authn_recommendations',
position,
@@ -30,33 +26,31 @@ export const trackRecommendationClick = (product, position, isControl, userId) =
product_key: generateProductKey(product),
product_line: product.cardType,
product_source: product.productSource.name,
- is_control: isControl,
user_id: userId,
});
- return setTimeout(() => { global.open(product.url, '_blank'); }, LINK_TIMEOUT);
+
+ const productUrl = product.url || product?.activeCourseRun?.marketingUrl;
+ return setTimeout(() => { global.open(productUrl, '_blank'); }, LINK_TIMEOUT);
};
-export const trackRecommendationsViewed = (recommendedProducts, type, isControl, userId) => {
- const viewedProductsList = recommendedProducts.map((product) => ({
- product_key: generateProductKey(product),
- product_line: product.cardType,
- product_source: product.productSource.name,
- }));
- sendTrackEvent(
- eventNames.recommendationsViewed, {
- page: 'authn_recommendations',
- recommendation_type: type,
- products: viewedProductsList,
- is_control: isControl,
- user_id: userId,
- },
- );
+export const trackRecommendationsViewed = (recommendedProducts, type, userId) => {
+ const viewedProductsList = getProductMapping(recommendedProducts);
+
+ if (viewedProductsList && viewedProductsList.length) {
+ sendTrackEvent(
+ eventNames.recommendationsViewed, {
+ page: 'authn_recommendations',
+ recommendation_type: type,
+ products: viewedProductsList,
+ user_id: userId,
+ },
+ );
+ }
};
-export const trackRecommendationsGroup = (variation, userId) => {
+export const trackSkipButtonClicked = (userId) => {
sendTrackEvent(
- eventNames.recommendationsGroup, {
- variation,
+ eventNames.skipButtonClicked, {
page: 'authn_recommendations',
user_id: userId,
},
@@ -65,6 +59,6 @@ export const trackRecommendationsGroup = (variation, userId) => {
export default {
trackRecommendationClick,
- trackRecommendationsGroup,
trackRecommendationsViewed,
+ trackSkipButtonClicked,
};
diff --git a/src/sass/_recommendations_page.scss b/src/sass/_recommendations_page.scss
index 57af1f54..49ad0aa2 100644
--- a/src/sass/_recommendations_page.scss
+++ b/src/sass/_recommendations_page.scss
@@ -1,78 +1,31 @@
-.nav-tabs {
- border-bottom: 2px solid transparent;
-}
+$card-gap: 24px;
.recommendations-container__card-list {
- padding-left: 0.0625rem;
- padding-bottom: 0.125rem;
+ gap: $card-gap $card-gap;
- @include media-breakpoint-down(xl) {
- overflow-x: scroll;
- overflow-y: hidden;
+ @include media-breakpoint-down(sm) {
+ margin-bottom: 0 !important;
+ }
+
+ .recommendation-card {
+ flex: 0 1 100%;
+ cursor: pointer;
+
+ @include media-breakpoint-up(sm) {
+ flex: 0 1 calc(50% - #{$card-gap - 12});
+ }
+
+ @include media-breakpoint-up(md) {
+ flex: 0 1 calc(33.333% - #{$card-gap - 8});
+ }
+
+ @include media-breakpoint-up(lg) {
+ flex: 0 1 calc(25% - #{$card-gap - 6});
+ }
}
}
+
.recommendations-container__heading {
overflow-wrap: break-word;
}
-.recommendations-container {
- padding: 0 1rem;
- margin: 0 0 1.875rem 0;
-
- @include media-breakpoint-up(lg) {
- max-width: $max-width-sm + 5 * $grid-gutter-width !important;
- }
-
- @include media-breakpoint-up(xl) {
- max-width: $max-width-md + $grid-gutter-width !important;
- }
-
- @include media-breakpoint-up(xxl) {
- max-width: $max-width-lg + $grid-gutter-width !important;
- }
-}
-
-.recommendation-card {
- cursor: pointer;
- .pgn__hyperlink {
- display: block;
- }
-
- .pgn__card {
- width: 281px;
- height: 332px;
- margin: 0 !important;
- }
-
- .pgn__card-image-cap {
- height: 6.5rem;
- object-position: top;
- }
-
- .pgn__card-header-title-md {
- font-weight: 700;
- font-size: 1.125rem;
- line-height: 1.5rem;
- }
-
- .pgn__card-header-subtitle-md{
- font-weight: 400;
- font-size:0.875rem;
- line-height: 1.5rem;
- color: $gray-700;
- }
- .pgn__card-footer {
- bottom: 0;
- position: absolute;
- padding-bottom: 1rem !important;
- }
- .pgn__card__footer-text{
- font-weight: 400;
- font-size: 0.75rem;
- line-height: 1.25rem;
- }
-}
-.footer-icon{
- height: 16px;
- width: 16px;
-}