Replace Featured shelves with Recommended shelves (#8091)

Author: bobsilverberg

src/amo/constants.js

@@ -14,10 +14,7 @@ export type FlagReviewReasonType =
   | typeof REVIEW_FLAG_REASON_BUG_SUPPORT
   | typeof REVIEW_FLAG_REASON_OTHER;
 
-// Number of total featured add-ons to load.
-export const FEATURED_ADDONS_TO_LOAD = 25;
-
-// Number of add-ons in the featured, trending, and highest rated landing page
+// Number of add-ons in the recommended, trending, and highest rated landing page
 // sections.
 export const LANDING_PAGE_EXTENSION_COUNT = 4;
 export const LANDING_PAGE_THEME_COUNT = 3;

src/amo/pages/LandingPage/index.js

@@ -19,6 +19,7 @@ import {
   INSTALL_SOURCE_FEATURED,
   INSTALL_SOURCE_TOP_RATED,
   INSTALL_SOURCE_TRENDING,
+  SEARCH_SORT_RANDOM,
   SEARCH_SORT_TRENDING,
   SEARCH_SORT_TOP_RATED,
 } from 'core/constants';
@@ -45,7 +46,7 @@ export class LandingPageBase extends React.Component {
     context: PropTypes.string.isRequired,
     dispatch: PropTypes.func.isRequired,
     errorHandler: PropTypes.object.isRequired,
-    featuredAddons: PropTypes.array.isRequired,
+    recommendedAddons: PropTypes.array.isRequired,
     highlyRatedAddons: PropTypes.array.isRequired,
     loading: PropTypes.bool.isRequired,
     trendingAddons: PropTypes.array.isRequired,
@@ -125,28 +126,38 @@ export class LandingPageBase extends React.Component {
   }
 
   contentForType = (visibleAddonType) => {
-    const { i18n } = this.props;
+    const { _config, i18n } = this.props;
     const addonType = apiAddonType(visibleAddonType);
-    const themeFilter = getAddonTypeFilter(ADDON_TYPE_THEME, {
-      _config: this.props._config,
-    });
+    const themeFilter = getAddonTypeFilter(ADDON_TYPE_THEME, { _config });
+    const enableFeatureRecommendedBadges = _config.get(
+      'enableFeatureRecommendedBadges',
+    );
 
     const contentForTypes = {
       [ADDON_TYPE_EXTENSION]: {
-        featuredHeader: i18n.gettext('Featured extensions'),
-        featuredFooterLink: {
+        recommendedHeader: enableFeatureRecommendedBadges
+          ? i18n.gettext('Recommended extensions')
+          : i18n.gettext('Featured extensions'),
+        recommendedFooterLink: {
           pathname: '/search/',
           query: {
             addonType: ADDON_TYPE_EXTENSION,
-            featured: true,
+            featured: enableFeatureRecommendedBadges ? undefined : true,
+            recommended: enableFeatureRecommendedBadges ? true : undefined,
+            sort: enableFeatureRecommendedBadges
+              ? SEARCH_SORT_RANDOM
+              : undefined,
           },
         },
-        featuredFooterText: i18n.gettext('See more featured extensions'),
+        recommendedFooterText: enableFeatureRecommendedBadges
+          ? i18n.gettext('See more recommended extensions')
+          : i18n.gettext('See more featured extensions'),
         trendingHeader: i18n.gettext('Trending extensions'),
         trendingFooterLink: {
           pathname: '/search/',
           query: {
             addonType: ADDON_TYPE_EXTENSION,
+            recommended: enableFeatureRecommendedBadges ? true : undefined,
             sort: SEARCH_SORT_TRENDING,
           },
         },
@@ -156,21 +167,30 @@ export class LandingPageBase extends React.Component {
           pathname: '/search/',
           query: {
             addonType: ADDON_TYPE_EXTENSION,
+            recommended: enableFeatureRecommendedBadges ? true : undefined,
             sort: SEARCH_SORT_TOP_RATED,
           },
         },
         highlyRatedFooterText: i18n.gettext('See more top rated extensions'),
       },
       [ADDON_TYPE_THEME]: {
-        featuredHeader: i18n.gettext('Featured themes'),
-        featuredFooterLink: {
+        recommendedHeader: enableFeatureRecommendedBadges
+          ? i18n.gettext('Recommended themes')
+          : i18n.gettext('Featured themes'),
+        recommendedFooterLink: {
           pathname: '/search/',
           query: {
             addonType: themeFilter,
-            featured: true,
+            featured: enableFeatureRecommendedBadges ? undefined : true,
+            recommended: enableFeatureRecommendedBadges ? true : undefined,
+            sort: enableFeatureRecommendedBadges
+              ? SEARCH_SORT_RANDOM
+              : undefined,
           },
         },
-        featuredFooterText: i18n.gettext('See more featured themes'),
+        recommendedFooterText: enableFeatureRecommendedBadges
+          ? i18n.gettext('See more recommended themes')
+          : i18n.gettext('See more featured themes'),
         trendingHeader: i18n.gettext('Trending themes'),
         trendingFooterLink: {
           pathname: '/search/',
@@ -219,7 +239,7 @@ export class LandingPageBase extends React.Component {
   render() {
     const {
       errorHandler,
-      featuredAddons,
+      recommendedAddons,
       highlyRatedAddons,
       i18n,
       loading,
@@ -278,14 +298,14 @@ export class LandingPageBase extends React.Component {
         </Button>
 
         {this.renderIfNotEmpty(
-          featuredAddons,
+          recommendedAddons,
           <LandingAddonsCard
             addonInstallSource={INSTALL_SOURCE_FEATURED}
-            addons={featuredAddons}
-            className="FeaturedAddons"
-            footerText={html.featuredFooterText}
-            footerLink={html.featuredFooterLink}
-            header={html.featuredHeader}
+            addons={recommendedAddons}
+            className="RecommendedAddons"
+            footerText={html.recommendedFooterText}
+            footerLink={html.recommendedFooterLink}
+            header={html.recommendedHeader}
             isTheme={isAddonTheme}
             loading={loading}
           />,
@@ -327,7 +347,7 @@ export function mapStateToProps(state) {
   return {
     addonTypeOfResults: landing.addonType,
     context: viewContext.context,
-    featuredAddons: landing.featured.results,
+    recommendedAddons: landing.recommended.results,
     highlyRatedAddons: landing.highlyRated.results,
     loading: landing.loading,
     trendingAddons: landing.trending.results,

src/amo/reducers/landing.js

@@ -21,7 +21,7 @@ type ExternalResultSet = {|
 export type LandingState = {|
   addonType: string | null,
   category: string | null,
-  featured: ResultSet,
+  recommended: ResultSet,
   highlyRated: ResultSet,
   loading: boolean,
   resultsLoaded: boolean,
@@ -31,7 +31,7 @@ export type LandingState = {|
 export const initialState: LandingState = {
   addonType: null,
   category: null,
-  featured: { count: 0, results: [] },
+  recommended: { count: 0, results: [] },
   highlyRated: { count: 0, results: [] },
   loading: false,
   trending: { count: 0, results: [] },
@@ -72,7 +72,7 @@ export function getLanding({
 
 type LoadLandingParams = {|
   addonType: string,
-  featured: ExternalResultSet,
+  recommended: ExternalResultSet,
   highlyRated: ExternalResultSet,
   trending: ExternalResultSet,
 |};
@@ -84,18 +84,18 @@ type LoadLandingAction = {|
 
 export function loadLanding({
   addonType,
-  featured,
+  recommended,
   highlyRated,
   trending,
 }: LoadLandingParams): LoadLandingAction {
   invariant(addonType, 'addonType is required');
-  invariant(featured, 'featured is required');
+  invariant(recommended, 'recommended is required');
   invariant(highlyRated, 'highlyRated is required');
   invariant(trending, 'trending is required');
 
   return {
     type: LOAD_LANDING,
-    payload: { addonType, featured, highlyRated, trending },
+    payload: { addonType, recommended, highlyRated, trending },
   };
 }
 
@@ -122,7 +122,7 @@ export default function reducer(
 
       const newState = { ...state, loading: false, resultsLoaded: true };
 
-      ['featured', 'highlyRated', 'trending'].forEach((key) => {
+      ['recommended', 'highlyRated', 'trending'].forEach((key) => {
         if (payload[key]) {
           newState[key] = {
             count: payload[key].count,

src/amo/sagas/landing.js

@@ -48,11 +48,12 @@ export function* fetchLandingAddons({
       filters = { ...filters, category };
     }
 
-    const featuredParams: SearchParams = {
+    const recommendedParams: SearchParams = {
       api,
       filters: {
         ...filters,
-        featured: true,
+        featured: enableFeatureRecommendedBadges ? undefined : true,
+        recommended: enableFeatureRecommendedBadges ? true : undefined,
         sort: SEARCH_SORT_RANDOM,
         page: '1',
       },
@@ -74,16 +75,16 @@ export function* fetchLandingAddons({
       },
     };
 
-    const [featured, highlyRated, trending] = yield all([
-      call(searchApi, featuredParams),
+    const [recommended, highlyRated, trending] = yield all([
+      call(searchApi, recommendedParams),
       call(searchApi, highlyRatedParams),
       call(searchApi, trendingParams),
     ]);
 
     yield put(
       loadLanding({
         addonType,
-        featured,
+        recommended,
         highlyRated,
         trending,
       }),

src/core/reducers/versions.js

@@ -520,10 +520,10 @@ const reducer = (
     }
 
     case LOAD_LANDING: {
-      const { featured, highlyRated, trending } = action.payload;
+      const { recommended, highlyRated, trending } = action.payload;
 
       const newVersions = {};
-      for (const apiResponse of [featured, highlyRated, trending]) {
+      for (const apiResponse of [recommended, highlyRated, trending]) {
         for (const addon of apiResponse.results) {
           if (addon.current_version) {
             const version = createInternalVersion(addon.current_version);