From 771c288e599b43adc42833b78b5ac8525abc8d7f Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah
 <52817156+syedsajjadkazmii@users.noreply.github.com>
Date: Thu, 17 Aug 2023 12:33:05 +0500
Subject: [PATCH] feat: update recommendations page design (#1036)

VAN-1598
---
 src/config/index.js                           |   2 +
 .../ProductCard/BaseCard/index.jsx            |   4 +-
 src/recommendations/ProductCard/index.jsx     |   4 +
 src/recommendations/RecommendationsList.jsx   |  20 ++--
 src/recommendations/RecommendationsPage.jsx   |  95 +++++++--------
 .../LargeLayout.jsx                           |  95 +++++++++++++++
 .../SmallLayout.jsx                           |  89 ++++++++++++++
 .../data/loadingCoursesPlaceholders.js        |  36 ++++++
 src/recommendations/messages.js               |   7 +-
 .../tests/RecommendationsPage.test.jsx        |  77 ++++++++++++-
 src/sass/_recommendations_page.scss           | 109 ++++++++----------
 11 files changed, 420 insertions(+), 118 deletions(-)
 create mode 100644 src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx
 create mode 100644 src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx
 create mode 100644 src/recommendations/data/loadingCoursesPlaceholders.js

diff --git a/src/config/index.js b/src/config/index.js
index ff01c92fe..0b169c700 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -32,6 +32,8 @@ const configuration = {
   INFO_EMAIL: process.env.INFO_EMAIL || '',
   ZENDESK_KEY: process.env.ZENDESK_KEY,
   ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,
+  ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID || '',
+  ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || '',
 };
 
 export default configuration;
diff --git a/src/recommendations/ProductCard/BaseCard/index.jsx b/src/recommendations/ProductCard/BaseCard/index.jsx
index 6c541b081..8a8f0b760 100644
--- a/src/recommendations/ProductCard/BaseCard/index.jsx
+++ b/src/recommendations/ProductCard/BaseCard/index.jsx
@@ -15,9 +15,9 @@ const BaseCard = ({
   productTypeCopy,
   footer,
   handleOnClick,
-  isLoading = false,
+  isLoading,
 }) => (
-  <div className="mr-4 recommendation-card" key={`container-${uuid}`}>
+  <div className="recommendation-card" key={`container-${uuid}`}>
     <Hyperlink
       target="_blank"
       className="card-box"
diff --git a/src/recommendations/ProductCard/index.jsx b/src/recommendations/ProductCard/index.jsx
index 1b6e2ef5a..5fa856f43 100644
--- a/src/recommendations/ProductCard/index.jsx
+++ b/src/recommendations/ProductCard/index.jsx
@@ -15,6 +15,7 @@ const ProductCard = ({
   product,
   userId,
   position,
+  isLoading,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -82,6 +83,7 @@ const ProductCard = ({
       productTypeCopy={productTypeCopy}
       productType={productType}
       variant={variant}
+      isLoading={isLoading}
       footer={(
         <Footer
           quickFacts={product.degree?.quickFacts}
@@ -105,8 +107,10 @@ ProductCard.propTypes = {
   ]).isRequired,
   userId: PropTypes.number.isRequired,
   position: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool,
 };
 
 ProductCard.defaultProps = {
+  isLoading: false,
 };
 export default ProductCard;
diff --git a/src/recommendations/RecommendationsList.jsx b/src/recommendations/RecommendationsList.jsx
index 23a7621d2..612bb083a 100644
--- a/src/recommendations/RecommendationsList.jsx
+++ b/src/recommendations/RecommendationsList.jsx
@@ -5,19 +5,19 @@ import PropTypes from 'prop-types';
 import ProductCard from './ProductCard';
 
 const RecommendationsList = (props) => {
-  const { recommendations, userId } = props;
+  const { recommendations, userId, isLoading } = props;
 
   return (
-    <div className="d-flex recommendations-container__card-list">
+    <div className="d-flex flex-wrap mb-3 recommendations-container__card-list">
       {
         recommendations.map((recommendation, idx) => (
-          <span key={recommendation.uuid}>
-            <ProductCard
-              product={recommendation}
-              position={idx}
-              userId={userId}
-            />
-          </span>
+          <ProductCard
+            key={recommendation.uuid}
+            product={recommendation}
+            position={idx}
+            userId={userId}
+            isLoading={isLoading}
+          />
         ))
       }
     </div>
@@ -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 3242dab52..af8f9e681 100644
--- a/src/recommendations/RecommendationsPage.jsx
+++ b/src/recommendations/RecommendationsPage.jsx
@@ -3,15 +3,21 @@ import React, { useEffect } from 'react';
 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 { EDUCATION_LEVEL_MAPPING, POPULAR, TRENDING } from './data/constants';
+import { EDUCATION_LEVEL_MAPPING, POPULAR } from './data/constants';
 import useRecommendations from './data/hooks/useRecommendations';
 import messages from './messages';
-import RecommendationsList from './RecommendationsList';
+import RecommendationsLargeLayout from './RecommendationsPageLayouts/LargeLayout';
+import RecommendationsSmallLayout from './RecommendationsPageLayouts/SmallLayout';
 import { trackRecommendationsViewed } from './track';
 import { DEFAULT_REDIRECT_URL } from '../data/constants';
 
@@ -21,8 +27,10 @@ const RecommendationsPage = ({ location }) => {
   const educationLevel = EDUCATION_LEVEL_MAPPING[location.state?.educationLevel];
   const userId = location.state?.userId;
 
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 });
+
   const {
-    popularProducts, trendingProducts, isLoading,
+    algoliaRecommendations, popularProducts, trendingProducts, isLoading,
   } = useRecommendations(educationLevel);
 
   const DASHBOARD_URL = getConfig().LMS_BASE_URL.concat(DEFAULT_REDIRECT_URL);
@@ -54,11 +62,6 @@ const RecommendationsPage = ({ location }) => {
     handleRedirection();
   }
 
-  const handleOnSelect = (tabKey) => {
-    const recommendations = tabKey === POPULAR ? popularProducts : trendingProducts;
-    trackRecommendationsViewed(recommendations, tabKey, false, userId);
-  };
-
   return (
     <>
       <Helmet>
@@ -66,50 +69,52 @@ const RecommendationsPage = ({ location }) => {
           { siteName: getConfig().SITE_NAME })}
         </title>
       </Helmet>
-      <div className="d-flex flex-column vh-100 bg-light-200">
+      <div className="d-flex flex-column bg-light-200">
         <div className="mb-2">
           <div className="col-md-12 small-screen-top-stripe medium-screen-top-stripe extra-large-screen-top-stripe" />
           <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
             <Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
           </Hyperlink>
         </div>
-        <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"
-              onSelect={handleOnSelect}
-            >
-              <Tab tabClassName="mb-3" eventKey={POPULAR} title={formatMessage(messages['recommendation.option.popular'])}>
-                <RecommendationsList
-                  recommendations={popularProducts}
-                  userId={userId}
-                />
-              </Tab>
-              <Tab tabClassName="mb-3" eventKey={TRENDING} title={formatMessage(messages['recommendation.option.trending'])}>
-                <RecommendationsList
-                  recommendations={trendingProducts}
-                  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}
+        <Container
+          id="course-recommendations"
+          size="lg"
+          className="pr-4 pl-4 mt-3 mt-md-4 mb-4.5 mb-sm-5 mb-md-6 mw-lg"
+        >
+          {isExtraSmall ? (
+            <RecommendationsSmallLayout
+              userId={userId}
+              isLoading={isLoading}
+              personalizedRecommendations={algoliaRecommendations}
+              trendingProducts={trendingProducts}
+              popularProducts={popularProducts}
             />
+          ) : (
+            <RecommendationsLargeLayout
+              userId={userId}
+              isLoading={isLoading}
+              personalizedRecommendations={algoliaRecommendations}
+              trendingProducts={trendingProducts}
+              popularProducts={popularProducts}
+            />
+          )}
+          <div className="mt-3 mt-sm-4.5 text-center">
+            {isLoading && (
+              <Skeleton className="skip-btn__skeleton" />
+            )}
+            {!isLoading && (
+              <StatefulButton
+                className="font-weight-500"
+                type="submit"
+                variant="outline-brand"
+                labels={{
+                  default: formatMessage(messages['recommendation.skip.button']),
+                }}
+                onClick={handleSkip}
+              />
+            )}
           </div>
-        </div>
+        </Container>
       </div>
     </>
   );
diff --git a/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx b/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx
new file mode 100644
index 000000000..559e4119e
--- /dev/null
+++ b/src/recommendations/RecommendationsPageLayouts/LargeLayout.jsx
@@ -0,0 +1,95 @@
+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,
+    trendingProducts,
+    popularProducts,
+  } = props;
+  const { formatMessage } = useIntl();
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton className="recommendations-heading__skeleton" />
+        <Skeleton className="recommendations-subheading__skeleton" />
+        <RecommendationsList
+          recommendations={loadingCoursesPlaceholders}
+          userId={userId}
+          isLoading
+        />
+        <Skeleton className="recommendations-subheading__skeleton" />
+        <RecommendationsList
+          recommendations={loadingCoursesPlaceholders}
+          userId={userId}
+          isLoading
+        />
+        <Skeleton className="recommendations-subheading__skeleton" />
+        <RecommendationsList
+          recommendations={loadingCoursesPlaceholders}
+          userId={userId}
+          isLoading
+        />
+      </>
+    );
+  }
+  return (
+    <>
+      <h2 className="text-sm-center mb-5 mb-sm-4.5 text-left recommendations-container__heading">
+        {formatMessage(messages['recommendation.page.heading'])}
+      </h2>
+      {personalizedRecommendations.length > 0 && (
+        <>
+          <h3 className="text-sm-center mb-3 text-left">
+            {formatMessage(messages['recommendation.option.recommended.for.you'])}
+          </h3>
+          <RecommendationsList
+            recommendations={personalizedRecommendations}
+            userId={userId}
+          />
+        </>
+      )}
+      <h3 className="text-sm-center mb-3 text-left">
+        {formatMessage(messages['recommendation.option.popular'])}
+      </h3>
+      <RecommendationsList
+        recommendations={popularProducts}
+        userId={userId}
+      />
+      <h3 className="text-sm-center mb-3 text-left">
+        {formatMessage(messages['recommendation.option.trending'])}
+      </h3>
+      <RecommendationsList
+        recommendations={trendingProducts}
+        userId={userId}
+      />
+    </>
+  );
+};
+
+RecommendationsLargeLayout.propTypes = {
+  userId: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool,
+  personalizedRecommendations: PropTypes.arrayOf(PropTypes.shape({})),
+  trendingProducts: PropTypes.arrayOf(PropTypes.shape({})),
+  popularProducts: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+RecommendationsLargeLayout.defaultProps = {
+  isLoading: true,
+  personalizedRecommendations: [],
+  trendingProducts: [],
+  popularProducts: [],
+};
+
+export default RecommendationsLargeLayout;
diff --git a/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx b/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx
new file mode 100644
index 000000000..9bc71a23b
--- /dev/null
+++ b/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Collapsible, 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,
+    trendingProducts,
+    popularProducts,
+  } = props;
+  const { formatMessage } = useIntl();
+
+  if (isLoading) {
+    return (
+      <>
+        <Skeleton />
+        <Skeleton />
+        <Skeleton className="mb-3" />
+        <RecommendationsList
+          recommendations={loadingCoursesPlaceholders}
+          userId={userId}
+          isLoading
+        />
+      </>
+    );
+  }
+  return (
+    <>
+      <h3 className="text-sm-center mb-4.5 text-left recommendations-container__heading">
+        {formatMessage(messages['recommendation.page.heading'])}
+      </h3>
+      {personalizedRecommendations.length > 0 && (
+        <Collapsible
+          styling="basic"
+          title={formatMessage(messages['recommendation.option.recommended.for.you'])}
+          defaultOpen
+        >
+          <RecommendationsList
+            recommendations={personalizedRecommendations}
+            userId={userId}
+          />
+        </Collapsible>
+      )}
+      <Collapsible
+        styling="basic"
+        title={formatMessage(messages['recommendation.option.popular'])}
+      >
+        <RecommendationsList
+          recommendations={popularProducts}
+          userId={userId}
+        />
+      </Collapsible>
+      <Collapsible
+        styling="basic"
+        title={formatMessage(messages['recommendation.option.trending'])}
+      >
+        <RecommendationsList
+          recommendations={trendingProducts}
+          userId={userId}
+        />
+      </Collapsible>
+    </>
+  );
+};
+
+RecommendationsSmallLayout.propTypes = {
+  userId: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool,
+  personalizedRecommendations: PropTypes.arrayOf(PropTypes.shape({})),
+  trendingProducts: PropTypes.arrayOf(PropTypes.shape({})),
+  popularProducts: PropTypes.arrayOf(PropTypes.shape({})),
+};
+
+RecommendationsSmallLayout.defaultProps = {
+  isLoading: true,
+  personalizedRecommendations: [],
+  trendingProducts: [],
+  popularProducts: [],
+};
+
+export default RecommendationsSmallLayout;
diff --git a/src/recommendations/data/loadingCoursesPlaceholders.js b/src/recommendations/data/loadingCoursesPlaceholders.js
new file mode 100644
index 000000000..0a0c338b0
--- /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/messages.js b/src/recommendations/messages.js
index 41e7ff46c..cdba67538 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/tests/RecommendationsPage.test.jsx b/src/recommendations/tests/RecommendationsPage.test.jsx
index f30b28796..45355513b 100644
--- a/src/recommendations/tests/RecommendationsPage.test.jsx
+++ b/src/recommendations/tests/RecommendationsPage.test.jsx
@@ -3,10 +3,13 @@ import { Provider } from 'react-redux';
 
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { useMediaQuery } from '@edx/paragon';
 import { mount } from 'enzyme';
 import configureStore from 'redux-mock-store';
 
 import { DEFAULT_REDIRECT_URL } from '../../data/constants';
+import useRecommendations from '../data/hooks/useRecommendations';
+import mockedRecommendedProducts from '../data/tests/mockedData';
 import RecommendationsPage from '../RecommendationsPage';
 
 const IntlRecommendationsPage = injectIntl(RecommendationsPage);
@@ -16,6 +19,13 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
   sendTrackEvent: jest.fn(),
 }));
 
+jest.mock('@edx/paragon', () => ({
+  ...jest.requireActual('@edx/paragon'),
+  useMediaQuery: jest.fn(),
+}));
+
+jest.mock('../data/hooks/useRecommendations', () => jest.fn());
+
 describe('RecommendationsPageTests', () => {
   mergeConfig({
     GENERAL_RECOMMENDATIONS: '[]',
@@ -55,12 +65,25 @@ describe('RecommendationsPageTests', () => {
     };
   });
 
+  useRecommendations.mockReturnValue({
+    algoliaRecommendations: mockedRecommendedProducts,
+    popularProducts: mockedRecommendedProducts,
+    trendingProducts: mockedRecommendedProducts,
+    isLoading: false,
+  });
+
   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', () => {
+    useRecommendations.mockReturnValueOnce({
+      algoliaRecommendations: mockedRecommendedProducts,
+      popularProducts: [],
+      trendingProducts: mockedRecommendedProducts,
+      isLoading: false,
+    });
     mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
     expect(window.location.href).toEqual(redirectUrl);
   });
@@ -72,8 +95,58 @@ describe('RecommendationsPageTests', () => {
     expect(window.location.href).toEqual(redirectUrl);
   });
 
-  it('displays popular products as default recommendations', () => {
+  it('should display recommendations small layout (collapsibles) for small screen', () => {
+    useMediaQuery.mockReturnValue(true);
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
+
+    expect(recommendationsPage.find('.pgn_collapsible').exists()).toBeTruthy();
+    expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy();
+  });
+
+  it('should display recommendations large layout for large screen', () => {
+    useMediaQuery.mockReturnValue(false);
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
+
+    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', () => {
+    useMediaQuery.mockReturnValue(false);
+    useRecommendations.mockReturnValueOnce({
+      algoliaRecommendations: [],
+      popularProducts: [],
+      trendingProducts: [],
+      isLoading: true,
+    });
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
+
+    expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
+  });
+
+  it('should display skeletons if recommendations are loading for small screen', () => {
+    useMediaQuery.mockReturnValue(true);
+    useRecommendations.mockReturnValueOnce({
+      algoliaRecommendations: [],
+      popularProducts: [],
+      trendingProducts: [],
+      isLoading: true,
+    });
     const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
-    expect(recommendationsPage.find('.nav-link .active a').text()).toEqual('Most Popular');
+
+    expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
+  });
+
+  it('should display only trending and popular recs if there are no algolia recommendations', () => {
+    useMediaQuery.mockReturnValue(false);
+    useRecommendations.mockReturnValueOnce({
+      algoliaRecommendations: [],
+      popularProducts: mockedRecommendedProducts,
+      trendingProducts: mockedRecommendedProducts,
+      isLoading: false,
+    });
+    const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
+
+    expect(recommendationsPage.find('.recommendations-container__card-list').length).toEqual(2);
   });
 });
diff --git a/src/sass/_recommendations_page.scss b/src/sass/_recommendations_page.scss
index 57af1f54b..c59849419 100644
--- a/src/sass/_recommendations_page.scss
+++ b/src/sass/_recommendations_page.scss
@@ -1,78 +1,69 @@
-.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;
   }
-}
-.recommendations-container__heading {
-  overflow-wrap: break-word;
-}
 
-.recommendations-container {
-  padding: 0 1rem;
-  margin: 0 0 1.875rem 0;
+  .recommendation-card {
+    flex: 0 1 100%;
 
-  @include media-breakpoint-up(lg) {
-    max-width: $max-width-sm + 5 * $grid-gutter-width !important;
-  }
+    @include media-breakpoint-up(sm) {
+      flex: 0 1 calc(50% - #{$card-gap - 12});
+    }
 
-  @include media-breakpoint-up(xl) {
-    max-width: $max-width-md + $grid-gutter-width !important;
-  }
+    @include media-breakpoint-up(md) {
+      flex: 0 1 calc(33.333% - #{$card-gap - 8});
+    }
 
-  @include media-breakpoint-up(xxl) {
-    max-width: $max-width-lg + $grid-gutter-width !important;
+    @include media-breakpoint-up(lg) {
+      flex: 0 1 calc(25% - #{$card-gap - 6});
+    }
   }
 }
 
-.recommendation-card {
-  cursor: pointer;
-  .pgn__hyperlink {
-    display: block;
-  }
-
-  .pgn__card {
-    width: 281px;
-    height: 332px;
-    margin: 0 !important;
-  }
+.recommendations-container__heading {
+  overflow-wrap: break-word;
+}
 
-  .pgn__card-image-cap {
-    height: 6.5rem;
-    object-position: top;
-  }
+#course-recommendations .collapsible-trigger {
+  justify-content: space-between;
+  text-decoration: none;
+  border: 1px solid var(--light-700, #D7D3D1);
+  background: var(--extras-white, #FFF);
+  font-weight: 700;
+  line-height: 24px;
+}
 
-  .pgn__card-header-title-md {
-    font-weight: 700;
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-  }
+.pgn_collapsible {
+  padding-bottom: 16px;
+}
 
-  .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;
-  }
+#course-recommendations .collapsible-body {
+  padding: 16px 0 0 0;
 }
+
 .footer-icon{
    height: 16px;
    width: 16px; 
 }
+
+.recommendations-heading__skeleton {
+  width: 300px;
+  height: 32px;
+  margin-bottom: 52px;
+}
+
+.recommendations-subheading__skeleton {
+  width: 300px;
+  height: 22px;
+  margin-bottom: 16px;
+}
+
+.skip-btn__skeleton {
+  width: 139px;
+  height: 40px;
+}
+