fix: add popular and trending products lists (#1000)

src/config/index.js

@@ -24,8 +24,11 @@ const configuration = {
   BANNER_IMAGE_MEDIUM: process.env.BANNER_IMAGE_MEDIUM || '',
   BANNER_IMAGE_SMALL: process.env.BANNER_IMAGE_SMALL || '',
   BANNER_IMAGE_EXTRA_SMALL: process.env.BANNER_IMAGE_EXTRA_SMALL || '',
-  // Miscellaneous
+  // Recommendation constants
   GENERAL_RECOMMENDATIONS: process.env.GENERAL_RECOMMENDATIONS || '[]',
+  POPULAR_PRODUCTS: process.env.POPULAR_PRODUCTS || '[]',
+  TRENDING_PRODUCTS: process.env.TRENDING_PRODUCTS || '[]',
+  // Miscellaneous
   INFO_EMAIL: process.env.INFO_EMAIL || '',
   ZENDESK_KEY: process.env.ZENDESK_KEY,
   ZENDESK_LOGO_URL: process.env.ZENDESK_LOGO_URL,

src/recommendations/RecommendationsPage.jsx

@@ -18,13 +18,15 @@ const RecommendationsPage = (props) => {
   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] = useState([]);
+  const [recommendations, setRecommendations] = useState(POPULAR_PRODUCTS);
 
   const handleRecommendationType = (option) => {
     setSelectedRecommendationsType(option);
+    setRecommendations(option.value === 'popular' ? POPULAR_PRODUCTS : TRENDING_PRODUCTS);
   };
 
   if (!registrationResponse) {

src/recommendations/tests/RecommendationsPage.test.jsx

@@ -25,6 +25,8 @@ jest.mock('../data/service', () => ({
 describe('RecommendationsPageTests', () => {
   mergeConfig({
     GENERAL_RECOMMENDATIONS: '[]',
+    POPULAR_PRODUCTS: '[]',
+    TRENDING_PRODUCTS: '[]',
   });
 
   let defaultProps = {};