From 21e6bb6eec59e1f806ce2f4d118e5265963bbba1 Mon Sep 17 00:00:00 2001
From: Zainab Amir <zainab.amir@arbisoft.com>
Date: Thu, 27 Jul 2023 15:04:56 +0500
Subject: [PATCH] feat: update static recommendation placement (#1002)

* feat: update static recommendation placement
* refactor: clean recommendation code (#1003)

---------

Co-authored-by: Syed Sajjad Hussain Shah <52817156+syedsajjadkazmii@users.noreply.github.com>
---
 .../ProductCard/Footer/index.jsx              |  55 +----
 src/recommendations/ProductCard/index.jsx     |  14 +-
 src/recommendations/RecommendationsList.jsx   |  67 +-----
 src/recommendations/RecommendationsPage.jsx   |  92 ++++----
 src/recommendations/data/constants.js         |   7 -
 src/recommendations/data/utils.js             |  16 --
 src/recommendations/messages.js               |  87 ++------
 .../tests/RecommendationsList.test.jsx        | 126 ++---------
 .../tests/RecommendationsPage.test.jsx        |  81 ++-----
 src/recommendations/tests/mockedData.js       | 211 +++---------------
 src/sass/_recommendations_page.scss           |  25 +--
 11 files changed, 147 insertions(+), 634 deletions(-)

diff --git a/src/recommendations/ProductCard/Footer/index.jsx b/src/recommendations/ProductCard/Footer/index.jsx
index 9c7caa01..80bca885 100644
--- a/src/recommendations/ProductCard/Footer/index.jsx
+++ b/src/recommendations/ProductCard/Footer/index.jsx
@@ -1,72 +1,27 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon } from '@edx/paragon';
-import { Launch } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import { isEdxProgram } from '../../data/utils';
 import {
   cardFooterMessages,
-  externalLinkIconMessages,
 } from '../../messages';
 
 const ProductCardFooter = ({
   factoid,
   quickFacts,
   courseLength,
-  footerMessage,
   cardType,
-  is2UDegreeProgram,
-  isSubscriptionView,
 }) => {
   const intl = useIntl();
   const courseLengthLabel = courseLength > 1 ? 'Courses' : 'Course';
 
-  if (isSubscriptionView) {
-    return (
-      <p className="d-inline-block x-small">
-        {intl.formatMessage(
-          cardFooterMessages[
-            'recommendation.2u-product-card.footer-text.number-of-courses'
-          ],
-          { length: courseLength, label: courseLengthLabel },
-        )}
-        <span className="p-2">•</span>
-        <p className="d-inline-block">
-          {intl.formatMessage(
-            cardFooterMessages[
-              'recommendation.2u-product-card.footer-text.subscription'
-            ],
-          )}
-        </p>
-      </p>
-    );
-  }
-
-  if (footerMessage) {
-    return (
-      <div className="footer-message d-flex align-items-center">
-        <p className="x-small">{footerMessage}</p>
-        <Icon
-          src={Launch}
-          className="ml-1 footer-icon"
-          screenReaderText={intl.formatMessage(
-            externalLinkIconMessages[
-              'recommendation.2u-product-card.launch-icon.sr-text'
-            ],
-          )}
-        />
-      </div>
-    );
-  }
-
   if (courseLength) {
     return (
       <p className="x-small">
         {intl.formatMessage(
           cardFooterMessages[
-            'recommendation.2u-product-card.footer-text.number-of-courses'
+            'recommendation.product-card.footer-text.number-of-courses'
           ],
           { length: courseLength, label: courseLengthLabel },
         )}
@@ -74,7 +29,7 @@ const ProductCardFooter = ({
     );
   }
 
-  if (isEdxProgram({ cardType, is2UDegreeProgram })) {
+  if (cardType === 'program') {
     if (quickFacts && quickFacts.length > 0) {
       const quickFactsCount = quickFacts.length;
 
@@ -106,21 +61,15 @@ const ProductCardFooter = ({
 ProductCardFooter.propTypes = {
   cardType: PropTypes.string,
   factoid: PropTypes.string,
-  footerMessage: PropTypes.string,
   quickFacts: PropTypes.arrayOf(PropTypes.shape({})),
   courseLength: PropTypes.number,
-  is2UDegreeProgram: PropTypes.bool,
-  isSubscriptionView: PropTypes.bool,
 };
 
 ProductCardFooter.defaultProps = {
   cardType: '',
   factoid: '',
-  footerMessage: '',
   quickFacts: [],
   courseLength: undefined,
-  is2UDegreeProgram: false,
-  isSubscriptionView: false,
 };
 
 export default ProductCardFooter;
diff --git a/src/recommendations/ProductCard/index.jsx b/src/recommendations/ProductCard/index.jsx
index 726c459c..65a73678 100644
--- a/src/recommendations/ProductCard/index.jsx
+++ b/src/recommendations/ProductCard/index.jsx
@@ -5,11 +5,9 @@ import PropTypes from 'prop-types';
 
 import BaseCard from './BaseCard';
 import Footer from './Footer';
-import { EXTERNAL_PRODUCT_SOURCES } from '../data/constants';
 import { createCodeFriendlyProduct, getVariant, useProductType } from '../data/utils';
 import {
   cardBadgesMessages,
-  cardFooterMessages,
 } from '../messages';
 import { trackRecommendationCardClickOptimizely } from '../optimizelyExperiment';
 import { trackRecommendationsClicked } from '../track';
@@ -27,15 +25,6 @@ const ProductCard = ({
 
   const headerImage = product?.cardImageUrl || product?.image?.src;
 
-  const footerMessagesObj = {
-    [EXTERNAL_PRODUCT_SOURCES.EMERITUS]: formatMessage(
-      cardFooterMessages['recommendation.2u-product-card.footer-text.emeritus'],
-    ),
-    [EXTERNAL_PRODUCT_SOURCES.SHORELIGHT]: formatMessage(
-      cardFooterMessages['recommendation.2u-product-card.footer-text.shorelight'],
-    ),
-  };
-
   const schoolName = product?.organizationShortCodeOverride
     || product?.owners?.[0]?.name
     || product?.authoringOrganizations?.[0]?.name
@@ -71,7 +60,7 @@ const ProductCard = ({
 
   const productTypeCopy = formatMessage(
     cardBadgesMessages[
-      `recommendation.2u-product-card.pill-text.${createCodeFriendlyProduct(productType)}`
+      `recommendation.product-card.pill-text.${createCodeFriendlyProduct(productType)}`
     ],
   );
   const handleCardClick = () => {
@@ -100,7 +89,6 @@ const ProductCard = ({
       variant={variant}
       footer={(
         <Footer
-          footerMessage={footerMessagesObj?.[product.productSource?.slug]}
           quickFacts={product.degree?.quickFacts}
           externalUrl={product.additionalMetadata?.externalUrl
             || product.degree?.additionalMetadata?.externalUrl}
diff --git a/src/recommendations/RecommendationsList.jsx b/src/recommendations/RecommendationsList.jsx
index 44c8b516..23a7621d 100644
--- a/src/recommendations/RecommendationsList.jsx
+++ b/src/recommendations/RecommendationsList.jsx
@@ -1,79 +1,32 @@
 import React from 'react';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Container, Dropdown, DropdownButton } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
-import { RECOMMENDATIONS_OPTION_LIST } from './data/constants';
-import messages from './messages';
 import ProductCard from './ProductCard';
 
 const RecommendationsList = (props) => {
-  const { formatMessage } = useIntl();
-
-  const {
-    title, recommendations, userId, setSelectedRecommendationsType, selectedRecommendationsType,
-  } = props;
+  const { recommendations, userId } = 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>
-      <DropdownButton
-        id="dropdown-basic-button"
-        title={(
-          <>
-            {formatMessage(messages[`recommendation.option.${selectedRecommendationsType.value}`])}
-          </>
-        )}
-        className="bg-white mt-5.5 mb-3"
-      >
-        {RECOMMENDATIONS_OPTION_LIST.map((option) => (
-          <Dropdown.Item
-            onClick={() => setSelectedRecommendationsType(option)}
-            id={`option-${option.value}`}
-            key={`option-${option.value}`}
-          >
-            {formatMessage(messages[`recommendation.option.${option.value}`])}
-          </Dropdown.Item>
-        ))}
-      </DropdownButton>
-      <div className="d-flex recommendations-container__card-list">
-        {
-          recommendations.map((recommendation, idx) => (
+    <div className="d-flex recommendations-container__card-list">
+      {
+        recommendations.map((recommendation, idx) => (
+          <span key={recommendation.uuid}>
             <ProductCard
-              key={recommendation.activeRunKey}
               product={recommendation}
               position={idx}
               userId={userId}
             />
-          ))
-        }
-      </div>
-    </Container>
+          </span>
+        ))
+      }
+    </div>
   );
 };
 
 RecommendationsList.propTypes = {
-  title: PropTypes.string.isRequired,
-  setSelectedRecommendationsType: PropTypes.func.isRequired,
-  selectedRecommendationsType: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-  }).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,
 };
diff --git a/src/recommendations/RecommendationsPage.jsx b/src/recommendations/RecommendationsPage.jsx
index 199d4438..a06ead74 100644
--- a/src/recommendations/RecommendationsPage.jsx
+++ b/src/recommendations/RecommendationsPage.jsx
@@ -1,38 +1,26 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Hyperlink, Image, StatefulButton,
+  Container, Hyperlink, Image, StatefulButton, Tab, Tabs,
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 
-import { RECOMMENDATIONS_COUNT, RECOMMENDATIONS_OPTION_LIST } from './data/constants';
 import messages from './messages';
 import RecommendationsList from './RecommendationsList';
 import { DEFAULT_REDIRECT_URL } from '../data/constants';
 
-const RecommendationsPage = (props) => {
-  const { location } = props;
+const RecommendationsPage = ({ location }) => {
+  const { formatMessage } = useIntl();
+
   const registrationResponse = location.state?.registrationResult;
   const userId = location.state?.userId;
+
   const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
   const POPULAR_PRODUCTS = JSON.parse(getConfig().POPULAR_PRODUCTS);
   const TRENDING_PRODUCTS = JSON.parse(getConfig().TRENDING_PRODUCTS);
-  const { formatMessage } = useIntl();
-  const [selectedRecommendationsType, setSelectedRecommendationsType] = useState(RECOMMENDATIONS_OPTION_LIST[1]);
-  const [recommendations, setRecommendations] = useState(POPULAR_PRODUCTS);
-
-  const handleRecommendationType = (option) => {
-    setSelectedRecommendationsType(option);
-    setRecommendations(option.value === 'popular' ? POPULAR_PRODUCTS : TRENDING_PRODUCTS);
-  };
-
-  if (!registrationResponse) {
-    global.location.assign(DASHBOARD_URL);
-    return null;
-  }
 
   const handleRedirection = () => {
     window.history.replaceState(location.state, null, '');
@@ -43,15 +31,20 @@ const RecommendationsPage = (props) => {
     }
   };
 
-  if (recommendations.length < RECOMMENDATIONS_COUNT) {
-    handleRedirection();
-  }
-
   const handleSkip = (e) => {
     e.preventDefault();
     handleRedirection();
   };
 
+  if (!registrationResponse) {
+    window.location.href = DASHBOARD_URL;
+    return null;
+  }
+
+  if (!POPULAR_PRODUCTS.length || !TRENDING_PRODUCTS.length) {
+    handleRedirection();
+  }
+
   return (
     <>
       <Helmet>
@@ -66,28 +59,42 @@ const RecommendationsPage = (props) => {
             <Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
           </Hyperlink>
         </div>
-        {(recommendations) && (
-          <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}
-              setSelectedRecommendationsType={handleRecommendationType}
-              selectedRecommendationsType={selectedRecommendationsType}
+        <div className="d-flex flex-column align-items-center justify-content-center flex-grow-1 p-1">
+          <Container id="course-recommendations" size="lg" className="recommendations-container">
+            <h2 className="text-sm-center mb-4 text-left recommendations-container__heading">
+              {formatMessage(messages['recommendation.page.heading'])}
+            </h2>
+            <Tabs
+              variant="tabs"
+              defaultActiveKey="popular"
+              id="recommendations-selection"
+            >
+              <Tab tabClassName="mb-3" eventKey="popular" title={formatMessage(messages['recommendation.option.popular'])}>
+                <RecommendationsList
+                  recommendations={POPULAR_PRODUCTS}
+                  userId={userId}
+                />
+              </Tab>
+              <Tab tabClassName="mb-3" eventKey="trending" title={formatMessage(messages['recommendation.option.trending'])}>
+                <RecommendationsList
+                  recommendations={TRENDING_PRODUCTS}
+                  userId={userId}
+                />
+              </Tab>
+            </Tabs>
+          </Container>
+          <div className="text-center">
+            <StatefulButton
+              className="font-weight-500"
+              type="submit"
+              variant="brand"
+              labels={{
+                default: formatMessage(messages['recommendation.skip.button']),
+              }}
+              onClick={handleSkip}
             />
-            <div className="text-center">
-              <StatefulButton
-                className="font-weight-500"
-                type="submit"
-                variant="brand"
-                labels={{
-                  default: formatMessage(messages['recommendation.skip.button']),
-                }}
-                onClick={handleSkip}
-              />
-            </div>
           </div>
-        )}
+        </div>
       </div>
     </>
   );
@@ -100,7 +107,6 @@ RecommendationsPage.propTypes = {
         redirectUrl: PropTypes.string,
       }),
       userId: PropTypes.number,
-      educationLevel: PropTypes.string,
     }),
   }),
 
diff --git a/src/recommendations/data/constants.js b/src/recommendations/data/constants.js
index 6d697368..914f049e 100644
--- a/src/recommendations/data/constants.js
+++ b/src/recommendations/data/constants.js
@@ -9,10 +9,3 @@ export const EDUCATION_LEVEL_MAPPING = {
   hs: 'Introductory',
   jhs: 'Introductory',
 };
-
-export const EXTERNAL_PRODUCT_SOURCES = {
-  EMERITUS: 'emeritus',
-  SHORELIGHT: 'shorelight',
-};
-
-export const RECOMMENDATIONS_OPTION_LIST = [{ title: 'Trending courses', value: 'trending' }, { title: 'Popular courses', value: 'popular' }];
diff --git a/src/recommendations/data/utils.js b/src/recommendations/data/utils.js
index e43ff0ef..640fe1b3 100644
--- a/src/recommendations/data/utils.js
+++ b/src/recommendations/data/utils.js
@@ -20,24 +20,10 @@ const courseTypeToProductTypeMap = {
   'credit-verified-audit': 'Course',
   'spoc-verified-audit': 'Course',
   professional: 'Professional Certificate',
-  'bootcamp-2u': 'Boot Camp',
-  'executive-education-2u': 'Executive Education',
-  'executive-education': 'Executive Education',
-  masters: "Master's",
-  'masters-verified-audit': "Master's",
 };
 
 const programTypeToProductTypeMap = {
-  xseries: 'XSeries',
-  micromasters: 'MicroMasters',
-  microbachelors: 'MicroBachelors',
   'professional certificate': 'Professional Certificate',
-  "bachelor's": "Bachelor's",
-  bachelors: "Bachelor's",
-  "master's": "Master's",
-  masters: "Master's",
-  doctorate: 'Doctorate',
-  license: 'License',
   certificate: 'Certificate',
 };
 
@@ -61,8 +47,6 @@ export const getVariant = (productType) => (
 
 export const createCodeFriendlyProduct = (type) => type?.replace(/\s+/g, '-').replace(/'/g, '').toLowerCase();
 
-export const isEdxProgram = ({ cardType, is2UDegreeProgram }) => cardType === 'program' && !is2UDegreeProgram;
-
 export const truncateText = (input) => (input?.length > 50 ? `${input.substring(0, 50)}...` : input);
 
 export default convertCourseRunKeytoCourseKey;
diff --git a/src/recommendations/messages.js b/src/recommendations/messages.js
index 63d9c46d..41e7ff46 100644
--- a/src/recommendations/messages.js
+++ b/src/recommendations/messages.js
@@ -18,106 +18,55 @@ const messages = defineMessages({
   },
   'recommendation.option.trending': {
     id: 'recommendation.option.trending',
-    defaultMessage: 'Trending Courses',
-    description: 'Trending courses option',
+    defaultMessage: 'Trending',
+    description: 'Title for trending products',
   },
   'recommendation.option.popular': {
     id: 'recommendation.option.popular',
-    defaultMessage: 'Popular Courses',
-    description: 'Popular courses option',
+    defaultMessage: 'Most Popular',
+    description: 'Title for popular products',
   },
 });
 
 export const cardBadgesMessages = defineMessages({
-  'recommendation.2u-product-card.pill-text.course': {
-    id: 'recommendation.2u-product-card.pill-text.course',
+  'recommendation.product-card.pill-text.course': {
+    id: 'recommendation.product-card.pill-text.course',
     description: 'Text on a product card that describes which product line this item belongs to',
     defaultMessage: 'Course',
   },
-  'recommendation.2u-product-card.pill-text.microbachelors': {
-    id: 'recommendation.2u-product-card.pill-text.microbachelors',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'MicroBachelors®',
-  },
-  'recommendation.2u-product-card.pill-text.micromasters': {
-    id: 'recommendation.2u-product-card.pill-text.micromasters',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'MicroMasters®',
-  },
-  'recommendation.2u-product-card.pill-text.xseries': {
-    id: 'recommendation.2u-product-card.pill-text.xseries',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'XSeries',
-  },
-  'recommendation.2u-product-card.pill-text.professional-certificate': {
-    id: 'recommendation.2u-product-card.pill-text.professional-certificate',
+  'recommendation.product-card.pill-text.professional-certificate': {
+    id: 'recommendation.product-card.pill-text.professional-certificate',
     description: 'Text on a product card that describes which product line this item belongs to',
     defaultMessage: 'Professional Certificate',
   },
-  // 2U Products
-  'recommendation.2u-product-card.pill-text.executive-education': {
-    id: 'recommendation.2u-product-card.pill-text.executive-education',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'Executive Education',
-  },
-  'recommendation.2u-product-card.pill-text.boot-camp': {
-    id: 'recommendation.2u-product-card.pill-text.boot-camp',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'Boot Camp',
-  },
-  'recommendation.2u-product-card.pill-text.bachelors': {
-    id: 'recommendation.2u-product-card.pill-text.bachelors',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'Bachelor\'s Degree',
-  },
-  'recommendation.2u-product-card.pill-text.masters': {
-    id: 'recommendation.2u-product-card.pill-text.masters',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'Master\'s Degree',
-  },
-  'recommendation.2u-product-card.pill-text.doctorate': {
-    id: 'recommendation.2u-product-card.pill-text.doctorate',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'Doctoral Program',
-  },
-  'recommendation.2u-product-card.pill-text.certificate': {
-    id: 'recommendation.2u-product-card.pill-text.certificate',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'Certificate Program',
-  },
-  'recommendation.2u-product-card.pill-text.license': {
-    id: 'recommendation.2u-product-card.pill-text.license',
-    description: 'Text on a product card that describes which product line this item belongs to',
-    defaultMessage: 'Licensure Program',
-  },
 });
 
 export const cardFooterMessages = defineMessages({
-  'recommendation.2u-product-card.footer-text.emeritus': {
-    id: 'recommendation.2u-product-card.pill-text.emeritus',
+  'recommendation.product-card.footer-text.emeritus': {
+    id: 'recommendation.product-card.pill-text.emeritus',
     description: 'Text on a product card that describes which product line this item belongs to',
     defaultMessage: 'Offered on Emeritus',
   },
-  'recommendation.2u-product-card.footer-text.shorelight': {
-    id: 'recommendation.2u-product-card.pill-text.shorelight',
+  'recommendation.product-card.footer-text.shorelight': {
+    id: 'recommendation.product-card.pill-text.shorelight',
     description: 'Text on a product card that describes which product line this item belongs to',
     defaultMessage: 'Offered through Shorelight',
   },
-  'recommendation.2u-product-card.footer-text.number-of-courses': {
-    id: 'recommendation.2u-product-card.footer-text.number-of-courses',
+  'recommendation.product-card.footer-text.number-of-courses': {
+    id: 'recommendation.product-card.footer-text.number-of-courses',
     description: 'Label in card footer that shows how many courses are in a program',
     defaultMessage: '{length} {label}',
   },
-  'recommendation.2u-product-card.footer-text.subscription': {
-    id: 'recommendation.2u-product-card.footer-text.subscription',
+  'recommendation.product-card.footer-text.subscription': {
+    id: 'recommendation.product-card.footer-text.subscription',
     description: 'Label in card footer that describes that it is a subscription program',
     defaultMessage: 'Subscription',
   },
 });
 
 export const externalLinkIconMessages = defineMessages({
-  'recommendation.2u-product-card.launch-icon.sr-text': {
-    id: 'recommendation.2u-product-card.launch-icon.sr-text',
+  'recommendation.product-card.launch-icon.sr-text': {
+    id: 'recommendation.product-card.launch-icon.sr-text',
     description: 'Screen reader text for the launch icon on the cards',
     defaultMessage: 'Opens a link in a new tab',
   },
diff --git a/src/recommendations/tests/RecommendationsList.test.jsx b/src/recommendations/tests/RecommendationsList.test.jsx
index 19371bc0..fc2fc1f6 100644
--- a/src/recommendations/tests/RecommendationsList.test.jsx
+++ b/src/recommendations/tests/RecommendationsList.test.jsx
@@ -1,140 +1,42 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 
-import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 import configureStore from 'redux-mock-store';
 
-import mockedCoursesData from './mockedData';
-import { trackRecommendationCardClickOptimizely } from '../optimizelyExperiment';
+import mockedProductData from './mockedData';
 import RecommendationList from '../RecommendationsList';
 
 const IntlRecommendationList = injectIntl(RecommendationList);
 const mockStore = configureStore();
 
-jest.mock('@edx/frontend-platform/analytics', () => ({
-  sendTrackEvent: jest.fn(),
-}));
-jest.mock('../data/service', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-jest.mock('../optimizelyExperiment', () => ({
-  trackRecommendationCardClickOptimizely: jest.fn(),
-}));
-
 describe('RecommendationsListTests', () => {
-  mergeConfig({
-    GENERAL_RECOMMENDATIONS: '[]',
-  });
-
-  let defaultProps = {};
-  let store = {};
-
-  const registrationResult = {
-    redirectUrl: getConfig().LMS_BASE_URL.concat('/course-about-page-url'),
-    success: true,
-  };
+  const store = mockStore({});
   const reduxWrapper = children => (
     <IntlProvider locale="en">
       <Provider store={store}>{children}</Provider>
     </IntlProvider>
   );
 
-  const getRecommendationsList = async (props = defaultProps) => {
-    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationList {...props} />));
-    await act(async () => {
-      await Promise.resolve(recommendationsPage);
-      recommendationsPage.update();
-    });
-
-    return recommendationsPage;
-  };
-
-  beforeEach(() => {
-    store = mockStore({});
-    defaultProps = {
-      location: {
-        state: {
-          registrationResult,
-          userId: 111,
-        },
-      },
+  it('should render the product card', () => {
+    const props = {
+      recommendations: mockedProductData,
+      userId: 1234567,
     };
+
+    const recommendationsList = mount(reduxWrapper(<IntlRecommendationList {...props} />));
+    expect(recommendationsList.find('.recommendation-card').length).toEqual(mockedProductData.length);
   });
 
-  it('should render the product card with formatted message in card', async () => {
+  it('should render the recommendations card with footer content', () => {
     const props = {
-      recommendations: [mockedCoursesData[4]],
-      title: 'We have a few recommendations to get you started.',
+      recommendations: mockedProductData,
       userId: 1234567,
-      setSelectedRecommendationsType: jest.fn(),
-      selectedRecommendationsType: { title: 'Trending courses', value: 'trending' },
     };
-    const recommendationsList = await getRecommendationsList(props);
-    expect(recommendationsList.find('.x-small').at(0).text()).toEqual('Offered on Emeritus');
-  });
 
-  it('should call trackRecommendationCardClickOptimizely when card is clicked', async () => {
-    const props = {
-      recommendations: [mockedCoursesData[1]],
-      title: 'We have a few recommendations to get you started.',
-      userId: 1234567,
-      setSelectedRecommendationsType: jest.fn(),
-      selectedRecommendationsType: { title: 'Trending courses', value: 'trending' },
-    };
-    const recommendationsList = await getRecommendationsList(props);
-    recommendationsList.find('.card-box').first().simulate('click');
-    expect(trackRecommendationCardClickOptimizely).toHaveBeenCalledTimes(1);
-  });
-
-  it('should render the recommendations card with with facets', async () => {
-    const props = {
-      recommendations: [mockedCoursesData[1]],
-      title: 'We have a few recommendations to get you started.',
-      userId: 1234567,
-      setSelectedRecommendationsType: jest.fn(),
-      selectedRecommendationsType: { title: 'Trending courses', value: 'trending' },
-    };
-    const recommendationsList = await getRecommendationsList(props);
-    expect(recommendationsList.find('.d-inline-block').at(0).text()).toEqual('6 Modules');
-  });
-
-  it('should render the recommendations card with footer content when subscription view is enabled', async () => {
-    const props = {
-      recommendations: [mockedCoursesData[3]],
-      title: 'We have a few recommendations to get you started.',
-      userId: 1234567,
-      setSelectedRecommendationsType: jest.fn(),
-      selectedRecommendationsType: { title: 'Trending courses', value: 'trending' },
-    };
-    const recommendationsList = await getRecommendationsList(props);
-    expect(recommendationsList.find('.d-inline-block').at(1).text()).toEqual('Subscription');
-  });
-
-  it('should render the recommendations card with footer content', async () => {
-    const props = {
-      recommendations: [mockedCoursesData[0]],
-      title: 'We have a few recommendations to get you started.',
-      userId: 1234567,
-      setSelectedRecommendationsType: jest.fn(),
-      selectedRecommendationsType: { title: 'Trending courses', value: 'trending' },
-    };
-    const recommendationsList = await getRecommendationsList(props);
-    expect(recommendationsList.find('.x-small').text()).toEqual('4 Courses');
-  });
-
-  it('should render the recommendations list', async () => {
-    const props = {
-      recommendations: mockedCoursesData,
-      title: 'We have a few recommendations to get you started.',
-      userId: 1234567,
-      setSelectedRecommendationsType: jest.fn(),
-      selectedRecommendationsType: { title: 'Trending courses', value: 'trending' },
-    };
-    const recommendationsList = await getRecommendationsList(props);
-    expect(recommendationsList.find('.recommendation-card').length).toBe(5);
+    const recommendationsList = mount(reduxWrapper(<IntlRecommendationList {...props} />));
+    expect(recommendationsList.find('.x-small').at(0).text()).toEqual('1 Course');
+    expect(recommendationsList.find('.x-small').at(1).text()).toEqual('2 Courses');
   });
 });
diff --git a/src/recommendations/tests/RecommendationsPage.test.jsx b/src/recommendations/tests/RecommendationsPage.test.jsx
index 239aab33..9b81c0e5 100644
--- a/src/recommendations/tests/RecommendationsPage.test.jsx
+++ b/src/recommendations/tests/RecommendationsPage.test.jsx
@@ -4,11 +4,9 @@ import { Provider } from 'react-redux';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 import configureStore from 'redux-mock-store';
 
 import { DEFAULT_REDIRECT_URL } from '../../data/constants';
-import getPersonalizedRecommendations from '../data/service';
 import RecommendationsPage from '../RecommendationsPage';
 
 const IntlRecommendationsPage = injectIntl(RecommendationsPage);
@@ -32,8 +30,11 @@ describe('RecommendationsPageTests', () => {
   let defaultProps = {};
   let store = {};
 
-  let registrationResult = {
-    redirectUrl: getConfig().LMS_BASE_URL.concat('/course-about-page-url'),
+  const dashboardUrl = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
+  const redirectUrl = getConfig().LMS_BASE_URL.concat('/course-about-page-url');
+
+  const registrationResult = {
+    redirectUrl,
     success: true,
   };
   const reduxWrapper = children => (
@@ -42,16 +43,6 @@ describe('RecommendationsPageTests', () => {
     </IntlProvider>
   );
 
-  const getRecommendationsPage = async (props = defaultProps) => {
-    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...props} />));
-    await act(async () => {
-      await Promise.resolve(recommendationsPage);
-      recommendationsPage.update();
-    });
-
-    return recommendationsPage;
-  };
-
   beforeEach(() => {
     store = mockStore({});
     defaultProps = {
@@ -64,53 +55,25 @@ describe('RecommendationsPageTests', () => {
     };
   });
 
-  it('redirects to dashboard if user click on skip button', async () => {
-    const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
-    registrationResult = {
-      ...registrationResult,
-      redirectUrl: getConfig().LMS_BASE_URL.concat('/dashboard'),
-    };
-    const props = {
-      location: {
-        state: {
-          registrationResult,
-          userId: 111,
-        },
-      },
-    };
-    const recommendationsPage = await getRecommendationsPage(props);
+  it('should redirect to dashboard if user is not coming from registration workflow', () => {
+    mount(reduxWrapper(<IntlRecommendationsPage />));
+    expect(window.location.href).toEqual(dashboardUrl);
+  });
+
+  it('should redirect if either popular or trending recommendations are not configured', () => {
+    mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
+    expect(window.location.href).toEqual(redirectUrl);
+  });
+
+  it('should redirect user if they click "Skip for now" button', () => {
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
     recommendationsPage.find('.pgn__stateful-btn-state-default').first().simulate('click');
-    expect(window.location.href).toEqual(DASHBOARD_URL);
+
+    expect(window.location.href).toEqual(redirectUrl);
   });
 
-  it('should change the option when click the dropdown option', async () => {
-    const recommendationsPage = await getRecommendationsPage();
-
-    recommendationsPage.find('#dropdown-basic-button').at(1).simulate('click');
-    recommendationsPage.find('.dropdown-item').at(0).simulate('click',
-      { target: { title: 'Trending courses', value: 'trending' } });
-    expect(recommendationsPage.find('#dropdown-basic-button').at(1).text()).toEqual('Trending Courses');
-  });
-
-  it('should redirect if recommended courses count is less than RECOMMENDATIONS_COUNT', async () => {
-    delete window.location;
-    window.location = { assign: jest.fn() };
-    const recommendationsPage = await getRecommendationsPage();
-
-    expect(recommendationsPage.find('#course-recommendations').exists()).toBeTruthy();
-  });
-
-  it('redirects to dashboard if user tries to access the page directly', async () => {
-    const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
-    delete window.location;
-    window.location = {
-      href: getConfig().BASE_URL,
-      assign: jest.fn().mockImplementation((value) => { window.location.href = value; }),
-    };
-
-    await getRecommendationsPage({});
-
-    expect(getPersonalizedRecommendations).toHaveBeenCalledTimes(0);
-    expect(window.location.href).toEqual(DASHBOARD_URL);
+  it('displays popular products as default recommendations', () => {
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
+    expect(recommendationsPage.find('.nav-link .active a').text()).toEqual('Most Popular');
   });
 });
diff --git a/src/recommendations/tests/mockedData.js b/src/recommendations/tests/mockedData.js
index 2615b2f0..981b07cf 100644
--- a/src/recommendations/tests/mockedData.js
+++ b/src/recommendations/tests/mockedData.js
@@ -1,241 +1,80 @@
-const mockedCoursesData = [
+const mockedProductData = [
   {
-    uuid: '1fcffef0-468a-483f-95aa-87e2d4d2c408',
-    title: 'Google Cloud Computing Foundations',
-    subtitle: 'The Google Cloud Computing Foundations courses provide an overview of concepts central to cloud basics, big data, and machine learning, and where and how Google Cloud fits in.',
-    cardImageUrl: 'https://prod-discovery.edx-cdn.org/media/programs/card_images/1fcffef0-468a-483f-95aa-87e2d4d2c408-fc006d5bbc06.png',
+    uuid: 'test-uuid-1',
+    title: 'How to Learn Online 1',
+    subtitle: 'Org 1',
+    cardImageUrl: 'https://test-recommendations.com/image/how-to-learn-online-1.png',
     authoringOrganizations: [
       {
-        key: 'GoogleCloud',
-        logoImageUrl: 'https://prod-discovery.edx-cdn.org/organization/logos/7a30f2c7-0d59-4890-ab19-fc8324e9c7d6-6ff36c37bf48.png',
-        name: 'Google Cloud',
+        key: 'org-1',
+        logoImageUrl: 'https://test-recommendations.com/logos/how-to-learn-online-1.png',
+        name: 'Org 1',
       },
     ],
     courses: [
       {
         course: {
-          title: 'Google Cloud Computing Foundations: Cloud Computing Fundamentals',
+          title: 'How to learn online course 1',
           topics: [],
         },
       },
-      {
-        course: null,
-      },
-      {
-        course: null,
-      },
-      {
-        course: null,
-      },
     ],
     type: 'Professional Certificate',
-    marketingPath: '/professional-certificate/google-cloud-computing-foundations',
+    url: '/test-professional-certificate/how-to-learn-online-1',
     organizationLogoOverrideUrl: null,
     organizationShortCodeOverride: '',
     productSource: {
-      name: 'edX',
-      slug: 'edx',
-      description: '',
+      name: 'company X',
+      slug: 'companyX',
     },
     status: 'active',
     hidden: false,
-    inProspectus: true,
-    is2UDegreeProgram: false,
     degree: null,
     locationRestriction: null,
-    subscriptionEligible: null,
-    objectID: 'program-1fcffef0-468a-483f-95aa-87e2d4d2c408',
     cardType: 'program',
     cardIndex: 0,
   },
   {
-    uuid: 'ff89bff4-42c4-4728-ae8b-7e9276ebfcac',
-    title: 'Online Master’s Degree in Public Health',
-    subtitle: 'from Boston University',
-    cardImageUrl: 'https://prod-discovery.edx-cdn.org/media/programs/card_images/ff89bff4-42c4-4728-ae8b-7e9276ebfcac-18ae533b0500.jpeg',
+    uuid: 'test-uuid-2',
+    title: 'How to Learn Online 2',
+    subtitle: 'Org 2',
+    cardImageUrl: 'https://test-recommendations.com/image/how-to-learn-online-2.png',
     authoringOrganizations: [
       {
-        key: 'BUx',
-        logoImageUrl: 'https://prod-discovery.edx-cdn.org/organization/logos/36cfd0bb-1d18-4355-ae44-cb946573df3c-1e18515c3e4b.png',
-        name: 'Boston University',
-      },
-    ],
-    courses: [],
-    type: 'Masters',
-    marketingPath: '/masters/online-masters-in-public-health-boston-university',
-    organizationLogoOverrideUrl: null,
-    organizationShortCodeOverride: '',
-    productSource: {
-      name: 'edX',
-      slug: 'edx',
-      description: '',
-    },
-    status: 'active',
-    hidden: false,
-    inProspectus: true,
-    is2UDegreeProgram: false,
-    degree: {
-      quickFacts: [
-        {
-          text: '$24,000',
-          icon: 'fa-dollar',
-        },
-        {
-          text: '6 Modules',
-          icon: 'fa-book',
-        },
-        {
-          text: 'Fully Online',
-          icon: 'fa-desktop',
-        },
-        {
-          text: '24 Months',
-          icon: 'fa-clock-o',
-        },
-      ],
-      additionalMetadata: null,
-      organizationLogoOverrideUrl: null,
-    },
-    locationRestriction: null,
-    subscriptionEligible: null,
-    objectID: 'program-ff89bff4-42c4-4728-ae8b-7e9276ebfcac',
-    cardType: 'program',
-    cardIndex: 1,
-  },
-  {
-    uuid: '123f9327-bfef-459f-8bf2-c53277aa58f8',
-    title: 'Bachelor of Science in Data Science and Business Analytics',
-    subtitle: '',
-    cardImageUrl: 'https://prod-discovery.edx-cdn.org/media/programs/card_images/123f9327-bfef-459f-8bf2-c53277aa58f8-60ed48b6667d.png',
-    authoringOrganizations: [
-      {
-        key: 'UniversityofLondon',
-        logoImageUrl: 'https://prod-discovery.edx-cdn.org/organization/logos/5427ee88-6dba-46ff-8ed8-87b71e3234da-0af1465ab67e.png',
-        name: 'University of London',
-      },
-    ],
-    courses: [],
-    type: 'Bachelors',
-    marketingPath: '/bachelors/london-bachelor-of-science-in-data-science-and-business-analytics',
-    organizationLogoOverrideUrl: null,
-    organizationShortCodeOverride: 'University of London',
-    productSource: {
-      name: '2u',
-      slug: '2u',
-      description: '2U, Trilogy, Getsmarter -- external source for 2u courses and programs',
-    },
-    status: 'active',
-    hidden: false,
-    inProspectus: true,
-    is2UDegreeProgram: true,
-    degree: {
-      quickFacts: [],
-      additionalMetadata: {
-        externalIdentifier: '2ca2718e-643c-4430-b521-b9ebb91ad226',
-        externalUrl: 'https://programs.edx.org/requestinfo/lse?utm_source=edx&utm_medium=referral',
-        organicUrl: 'https://programs.edx.org/requestinfo/lse?utm_source=edx&utm_medium=referral',
-      },
-      organizationLogoOverrideUrl: null,
-    },
-    locationRestriction: {
-      restrictionType: 'blocklist',
-      countries: [
-        'IN',
-      ],
-      states: [],
-    },
-    subscriptionEligible: null,
-    objectID: 'program-123f9327-bfef-459f-8bf2-c53277aa58f8',
-    cardType: 'program',
-    cardIndex: 0,
-  },
-  {
-    uuid: '51037067-2c57-4a58-a963-91918ccee5c8',
-    title: 'Leading in a Remote Environment',
-    subtitle: 'Remote work presents unique challenges to maintaining relationships and achieving goals. Leaders need to be adaptive in order to mobilize their teams to meet these new challenges.',
-    cardImageUrl: 'https://prod-discovery.edx-cdn.org/media/programs/card_images/51037067-2c57-4a58-a963-91918ccee5c8-b24ebade984c.jpeg',
-    authoringOrganizations: [
-      {
-        key: 'HarvardX',
-        logoImageUrl: 'https://prod-discovery.edx-cdn.org/organization/logos/44022f13-20df-4666-9111-cede3e5dc5b6-2cc39992c67a.png',
-        name: 'Harvard University',
+        key: 'org-2',
+        logoImageUrl: 'https://test-recommendations.com/logos/how-to-learn-online-2.png',
+        name: 'Org 2',
       },
     ],
     courses: [
       {
         course: {
-          title: 'Exercising Leadership: Foundational Principles',
+          title: 'How to learn online course 1',
           topics: [],
         },
       },
       {
         course: {
-          title: 'Remote Work Revolution for Everyone',
+          title: 'How to learn online course 2',
           topics: [],
         },
       },
     ],
     type: 'Professional Certificate',
-    marketingPath: '/professional-certificate/harvardx-leading-in-a-remote-environment',
+    url: '/test-professional-certificate/how-to-learn-online-2',
     organizationLogoOverrideUrl: null,
     organizationShortCodeOverride: '',
     productSource: {
-      name: 'edX',
-      slug: 'edx',
-      description: '',
+      name: 'company X',
+      slug: 'companyX',
     },
     status: 'active',
     hidden: false,
-    inProspectus: true,
-    is2UDegreeProgram: false,
     degree: null,
     locationRestriction: null,
-    subscriptionEligible: true,
-    objectID: 'program-51037067-2c57-4a58-a963-91918ccee5c8',
     cardType: 'program',
     cardIndex: 1,
   },
-  {
-    uuid: '89f39d1a-bb23-4944-b6e0-b51fe25ce932',
-    title: 'Master of Science in Artificial Intelligence (MSAI)',
-    subtitle: '',
-    cardImageUrl: 'https://prod-discovery.edx-cdn.org/media/programs/card_images/89f39d1a-bb23-4944-b6e0-b51fe25ce932-c0b01712082d.jpg',
-    authoringOrganizations: [
-      {
-        key: 'UTAustinX',
-        logoImageUrl: 'https://prod-discovery.edx-cdn.org/organization/logos/9d38ad58-87fb-4a89-9f23-c8df318112e3-aec8e9e98a5f.png',
-        name: 'The University of Texas at Austin',
-      },
-    ],
-    courses: [],
-    type: 'Masters',
-    marketingPath: '/masters/online-master-artificial-intelligence-utaustinx',
-    organizationLogoOverrideUrl: null,
-    organizationShortCodeOverride: '',
-    productSource: {
-      name: '2u',
-      slug: 'emeritus',
-      description: '2U, Trilogy, Getsmarter -- external source for 2u courses and programs',
-    },
-    status: 'active',
-    hidden: false,
-    inProspectus: true,
-    is2UDegreeProgram: true,
-    degree: {
-      quickFacts: [],
-      additionalMetadata: {
-        externalIdentifier: '89f39d1a-bb23-4944-b6e0-b51fe25ce932',
-        externalUrl: 'https://www.edx.org/masters/online-master-artificial-intelligence-utaustinx',
-        organicUrl: 'https://www.edx.org/masters/online-master-artificial-intelligence-utaustinx',
-      },
-      organizationLogoOverrideUrl: null,
-    },
-    locationRestriction: null,
-    subscriptionEligible: null,
-    objectID: 'program-89f39d1a-bb23-4944-b6e0-b51fe25ce932',
-    cardType: 'program',
-    cardIndex: 0,
-  },
 ];
 
-export default mockedCoursesData;
+export default mockedProductData;
diff --git a/src/sass/_recommendations_page.scss b/src/sass/_recommendations_page.scss
index 13aa6e0b..57af1f54 100644
--- a/src/sass/_recommendations_page.scss
+++ b/src/sass/_recommendations_page.scss
@@ -1,6 +1,11 @@
+.nav-tabs {
+  border-bottom: 2px solid transparent;
+}
+
 .recommendations-container__card-list {
   padding-left: 0.0625rem;
   padding-bottom: 0.125rem;
+
   @include media-breakpoint-down(xl) {
     overflow-x: scroll;
     overflow-y: hidden;
@@ -13,6 +18,7 @@
 .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;
   }
@@ -24,25 +30,6 @@
   @include media-breakpoint-up(xxl) {
     max-width: $max-width-lg + $grid-gutter-width !important;
   }
-  .dropdown {
-    background-color: #FBFAF9 !important;
-
-    .dropdown-toggle {
-      background-color: #FBFAF9 !important;
-      border: none;
-      color: #000000;
-      font-weight: 700;
-      font-size: 22px;
-    }
-    .dropdown-toggle:hover {
-      background-color: #FBFAF9 !important;
-      border: none;
-      color: #000000;
-    }
-    .dropdown-toggle::after {
-      margin-left: 1.3em;
-    }
-  }
 }
 
 .recommendation-card {