Home-index.js.diff

diff --git a/src/amo/components/Home/index.js b/src/amo/components/Home/index.js
index d18de27..caf3e57 100644
--- a/src/amo/components/Home/index.js
+++ b/src/amo/components/Home/index.js
@@ -6,6 +6,7 @@ import { compose } from 'redux';
 
 import { setViewContext } from 'amo/actions/viewContext';
 import CategoryIcon from 'amo/components/CategoryIcon';
+import FeaturedCollectionCard from 'amo/components/FeaturedCollectionCard';
 import HomeHeroBanner from 'amo/components/HomeHeroBanner';
 import LandingAddonsCard from 'amo/components/LandingAddonsCard';
 import Link from 'amo/components/Link';
@@ -14,7 +15,6 @@ import {
   ADDON_TYPE_EXTENSION,
   ADDON_TYPE_THEME,
   INSTALL_SOURCE_FEATURED,
-  INSTALL_SOURCE_FEATURED_COLLECTION,
   VIEW_CONTEXT_HOME,
 } from 'core/constants';
 import { withErrorHandler } from 'core/errorHandler';
@@ -25,25 +25,6 @@ import Icon from 'ui/components/Icon';
 
 import './styles.scss';
 
-export const FEATURED_COLLECTIONS = [
-  { slug: 'social-media-customization', username: 'mozilla' },
-  { slug: 'dynamic-media-downloaders', username: 'mozilla' },
-  { slug: 'summer-themes', username: 'mozilla' },
-  { slug: 'must-have-media', username: 'mozilla' },
-];
-
-export const isFeaturedCollection = (
-  collection,
-  { featuredCollections = FEATURED_COLLECTIONS } = {},
-) => {
-  return featuredCollections.some((featured) => {
-    return (
-      featured.slug === collection.slug &&
-      featured.username === collection.authorUsername
-    );
-  });
-};
-
 export class HomeBase extends React.Component {
   static propTypes = {
     _config: PropTypes.object,
@@ -62,6 +43,50 @@ export class HomeBase extends React.Component {
     includeFeaturedThemes: false,
   };
 
+  getFeaturedCollections() {
+    const { i18n } = this.props;
+    return [
+      {
+        footerText: i18n.gettext(
+          'See more social media customization extensions',
+        ),
+        header: i18n.gettext('Social media customization'),
+        slug: 'social-media-customization',
+        username: 'mozilla',
+      },
+      {
+        footerText: i18n.gettext('See more dynamic downloaders'),
+        header: i18n.gettext('Dynamic downloaders'),
+        slug: 'dynamic-media-downloaders',
+        username: 'mozilla',
+      },
+      {
+        footerText: i18n.gettext('See more summer themes'),
+        header: i18n.gettext('Summer themes'),
+        slug: 'summer-themes',
+        username: 'mozilla',
+      },
+      {
+        footerText: i18n.gettext('See more must-have media extensions'),
+        header: i18n.gettext('Must-have media'),
+        slug: 'must-have-media',
+        username: 'mozilla',
+      },
+    ];
+  }
+
+  isFeaturedCollection(
+    collection,
+    { featuredCollections = this.getFeaturedCollections() } = {},
+  ) {
+    return featuredCollections.some((featured) => {
+      return (
+        featured.slug === collection.slug &&
+        featured.username === collection.authorUsername
+      );
+    });
+  }
+
   componentWillMount() {
     const {
       dispatch,
@@ -75,7 +100,7 @@ export class HomeBase extends React.Component {
     if (!resultsLoaded) {
       dispatch(
         fetchHomeAddons({
-          collectionsToFetch: FEATURED_COLLECTIONS,
+          collectionsToFetch: this.getFeaturedCollections(),
           errorHandlerId: errorHandler.id,
           includeFeaturedThemes,
         }),
@@ -196,6 +221,8 @@ export class HomeBase extends React.Component {
     const themesHeader = i18n.gettext(`Change the way Firefox looks with
       themes.`);
 
+    const featuredCollections = this.getFeaturedCollections();
+
     const loading = resultsLoaded === false;
 
     return (
@@ -242,45 +269,28 @@ export class HomeBase extends React.Component {
         )}
 
         {(loading || collections[0]) && (
-          <LandingAddonsCard
-            addonInstallSource={INSTALL_SOURCE_FEATURED_COLLECTION}
+          <FeaturedCollectionCard
             addons={collections[0]}
             className="Home-FeaturedCollection"
-            header={i18n.gettext('Social media customization')}
-            footerText={i18n.gettext(
-              'See more social media customization extensions',
-            )}
-            footerLink={`/collections/${FEATURED_COLLECTIONS[0].username}/${
-              FEATURED_COLLECTIONS[0].slug
-            }/`}
+            collectionMetadata={featuredCollections[0]}
             loading={loading}
           />
         )}
 
         {(loading || collections[1]) && (
-          <LandingAddonsCard
-            addonInstallSource={INSTALL_SOURCE_FEATURED_COLLECTION}
+          <FeaturedCollectionCard
             addons={collections[1]}
             className="Home-FeaturedCollection"
-            header={i18n.gettext('Dynamic downloaders')}
-            footerText={i18n.gettext('See more dynamic downloaders')}
-            footerLink={`/collections/${FEATURED_COLLECTIONS[1].username}/${
-              FEATURED_COLLECTIONS[1].slug
-            }/`}
+            collectionMetadata={featuredCollections[1]}
             loading={loading}
           />
         )}
 
         {(loading || collections[2]) && (
-          <LandingAddonsCard
-            addonInstallSource={INSTALL_SOURCE_FEATURED_COLLECTION}
+          <FeaturedCollectionCard
             addons={collections[2]}
             className="Home-FeaturedCollection"
-            header={i18n.gettext('Summer themes')}
-            footerText={i18n.gettext('See more summer themes')}
-            footerLink={`/collections/${FEATURED_COLLECTIONS[2].username}/${
-              FEATURED_COLLECTIONS[2].slug
-            }/`}
+            collectionMetadata={featuredCollections[2]}
             loading={loading}
           />
         )}
@@ -302,14 +312,10 @@ export class HomeBase extends React.Component {
         />
 
         {(loading || collections[3]) && (
-          <LandingAddonsCard
+          <FeaturedCollectionCard
             addons={collections[3]}
             className="Home-FeaturedCollection"
-            header={i18n.gettext('Must-have media')}
-            footerText={i18n.gettext('See more must-have media extensions')}
-            footerLink={`/collections/${FEATURED_COLLECTIONS[3].username}/${
-              FEATURED_COLLECTIONS[3].slug
-            }/`}
+            collectionMetadata={featuredCollections[3]}
             loading={loading}
           />
         )}