Frontend Compatibility for Multiple Promoted Addon Groups

src/amo/components/AddonBadges/index.js

@@ -5,7 +5,7 @@ import { compose } from 'redux';
 
 import { CLIENT_APP_FIREFOX } from 'amo/constants';
 import translate from 'amo/i18n/translate';
-import { getPromotedCategory } from 'amo/utils/addons';
+import { getPromotedCategories } from 'amo/utils/addons';
 import Badge from 'amo/components/Badge';
 import PromotedBadge from 'amo/components/PromotedBadge';
 import type { AppState } from 'amo/store';
@@ -19,7 +19,7 @@ type Props = {|
 |};
 
 type DefaultProps = {|
-  _getPromotedCategory: typeof getPromotedCategory,
+  _getPromotedCategories: typeof getPromotedCategories,
 |};
 
 type PropsFromState = {|
@@ -35,27 +35,31 @@ type InternalProps = {|
 
 export class AddonBadgesBase extends React.Component<InternalProps> {
   static defaultProps: DefaultProps = {
-    _getPromotedCategory: getPromotedCategory,
+    _getPromotedCategories: getPromotedCategories,
   };
 
   render(): null | React.Node {
-    const { _getPromotedCategory, addon, clientApp, i18n } = this.props;
+    const { _getPromotedCategories, addon, clientApp, i18n } = this.props;
 
     if (!addon) {
       return null;
     }
 
-    const promotedCategory = _getPromotedCategory({
+    const promotedCategories = _getPromotedCategories({
       addon,
       clientApp,
       forBadging: true,
     });
 
     return (
       <div className="AddonBadges">
-        {promotedCategory ? (
-          <PromotedBadge category={promotedCategory} size="large" />
-        ) : null}
+        {promotedCategories.map((category) => (
+          <PromotedBadge
+            key={`${addon.name}-${category}`}
+            category={category}
+            size="large"
+          />
+        ))}
         {addon.is_experimental ? (
           <Badge type="experimental" label={i18n.gettext('Experimental')} />
         ) : null}

src/amo/components/AutoSearchInput/index.js

@@ -196,7 +196,7 @@ export class AutoSearchInputBase extends React.Component<InternalProps, State> {
         addonId: undefined,
         iconUrl: getAddonIconUrl(),
         name: this.props.i18n.gettext('Loading'),
-        promoted: null,
+        promoted: [],
         url: undefined,
       });
     }

src/amo/components/HeroRecommendation/index.js

@@ -23,7 +23,7 @@ import {
 import translate from 'amo/i18n/translate';
 import log from 'amo/logger';
 import tracking from 'amo/tracking';
-import { getPromotedCategory } from 'amo/utils/addons';
+import { getPromotedCategories } from 'amo/utils/addons';
 import { addQueryParams } from 'amo/utils/url';
 import LoadingText from 'amo/components/LoadingText';
 import type { PrimaryHeroShelfType } from 'amo/reducers/home';
@@ -53,7 +53,7 @@ export type PropsFromState = {|
 
 export type DefaultProps = {|
   _checkInternalURL: typeof checkInternalURL,
-  _getPromotedCategory: typeof getPromotedCategory,
+  _getPromotedCategories: typeof getPromotedCategories,
   _tracking: typeof tracking,
 |};
 
@@ -67,7 +67,7 @@ export type InternalProps = {|
 export class HeroRecommendationBase extends React.Component<InternalProps> {
   static defaultProps: DefaultProps = {
     _checkInternalURL: checkInternalURL,
-    _getPromotedCategory: getPromotedCategory,
+    _getPromotedCategories: getPromotedCategories,
     _tracking: tracking,
   };
 
@@ -142,7 +142,7 @@ export class HeroRecommendationBase extends React.Component<InternalProps> {
   render(): null | React.Node {
     const {
       _checkInternalURL,
-      _getPromotedCategory,
+      _getPromotedCategories,
       clientApp,
       i18n,
       errorHandler,
@@ -219,17 +219,17 @@ export class HeroRecommendationBase extends React.Component<InternalProps> {
       // L10n: If uppercase does not work in your locale, change it to lowercase. This is used as a secondary heading.
       let titleText = null;
 
-      const promotedCategory = _getPromotedCategory({
+      const promotedCategories = _getPromotedCategories({
         addon,
         clientApp,
         forBadging: true,
       });
 
       if (!loading) {
-        if (promotedCategory === RECOMMENDED) {
+        if (promotedCategories.includes(RECOMMENDED)) {
           // L10n: If uppercase does not work in your locale, change it to lowercase. This is used as a secondary heading.
           titleText = i18n.gettext('RECOMMENDED');
-        } else if (promotedCategory === LINE) {
+        } else if (promotedCategories.includes(LINE)) {
           // L10n: If uppercase does not work in your locale, change it to lowercase. This is used as a secondary heading.
           titleText = i18n.gettext('BY FIREFOX');
         } else {
@@ -242,7 +242,9 @@ export class HeroRecommendationBase extends React.Component<InternalProps> {
           <div className="HeroRecommendation-title-text">
             {titleText || <LoadingText width={20} />}
           </div>
-          {![LINE, RECOMMENDED].includes(promotedCategory) && !loading ? (
+          {![LINE, RECOMMENDED].some((item) =>
+            promotedCategories.includes(item),
+          ) && !loading ? (
             <a
               className="HeroRecommendation-title-link"
               href={`${getPromotedBadgesLinkUrl({

src/amo/components/InstallWarning/index.js

@@ -11,7 +11,7 @@ import {
   EXCLUDE_WARNING_CATEGORIES,
 } from 'amo/constants';
 import translate from 'amo/i18n/translate';
-import { getPromotedCategory } from 'amo/utils/addons';
+import { getPromotedCategories } from 'amo/utils/addons';
 import {
   correctedLocationForPlatform,
   isFirefox,
@@ -36,7 +36,7 @@ type PropsFromState = {|
 
 type DefaultProps = {|
   _correctedLocationForPlatform: typeof correctedLocationForPlatform,
-  _getPromotedCategory: typeof getPromotedCategory,
+  _getPromotedCategories: typeof getPromotedCategories,
 |};
 
 type InternalProps = {|
@@ -55,13 +55,13 @@ const WARNING_LINK_DESTINATION = getPromotedBadgesLinkUrl({
 export class InstallWarningBase extends React.Component<InternalProps> {
   static defaultProps: DefaultProps = {
     _correctedLocationForPlatform: correctedLocationForPlatform,
-    _getPromotedCategory: getPromotedCategory,
+    _getPromotedCategories: getPromotedCategories,
   };
 
   couldShowWarning: () => boolean = () => {
     const {
       _correctedLocationForPlatform,
-      _getPromotedCategory,
+      _getPromotedCategories,
       addon,
       clientApp,
       lang,
@@ -77,7 +77,7 @@ export class InstallWarningBase extends React.Component<InternalProps> {
       userAgentInfo,
     });
 
-    const promotedCategory = _getPromotedCategory({
+    const promotedCategories = _getPromotedCategories({
       addon,
       clientApp,
     });
@@ -86,8 +86,9 @@ export class InstallWarningBase extends React.Component<InternalProps> {
       !correctedLocation &&
       isFirefox({ userAgentInfo }) &&
       addon.type === ADDON_TYPE_EXTENSION &&
-      (!promotedCategory ||
-        !EXCLUDE_WARNING_CATEGORIES.includes(promotedCategory))
+      promotedCategories.every(
+        (promoted) => !EXCLUDE_WARNING_CATEGORIES.includes(promoted),
+      )
     );
   };
 

src/amo/components/SearchResult/index.js

@@ -14,7 +14,7 @@ import {
 } from 'amo/constants';
 import translate from 'amo/i18n/translate';
 import { getAddonIconUrl, getPreviewImage } from 'amo/imageUtils';
-import { getPromotedCategory } from 'amo/utils/addons';
+import { getPromotedCategories } from 'amo/utils/addons';
 import { addQueryParams } from 'amo/utils/url';
 import Icon from 'amo/components/Icon';
 import LoadingText from 'amo/components/LoadingText';
@@ -52,17 +52,17 @@ type PropsFromState = {|
 type InternalProps = {|
   ...Props,
   ...PropsFromState,
-  _getPromotedCategory: typeof getPromotedCategory,
+  _getPromotedCategories: typeof getPromotedCategories,
   history: ReactRouterHistoryType,
   i18n: I18nType,
 |};
 
 export class SearchResultBase extends React.Component<InternalProps> {
   static defaultProps: {|
     ...DefaultProps,
-    _getPromotedCategory: typeof getPromotedCategory,
+    _getPromotedCategories: typeof getPromotedCategories,
   |} = {
-    _getPromotedCategory: getPromotedCategory,
+    _getPromotedCategories: getPromotedCategories,
     showFullSizePreview: false,
     showMetadata: true,
     showPromotedBadge: true,
@@ -98,7 +98,7 @@ export class SearchResultBase extends React.Component<InternalProps> {
 
   renderResult(): React.Node {
     const {
-      _getPromotedCategory,
+      _getPromotedCategories,
       addon,
       addonInstallSource,
       clientApp,
@@ -172,7 +172,7 @@ export class SearchResultBase extends React.Component<InternalProps> {
       summary = <p className="SearchResult-summary" {...summaryProps} />;
     }
 
-    const promotedCategory = _getPromotedCategory({
+    const promotedCategories = _getPromotedCategories({
       addon,
       clientApp,
       forBadging: true,
@@ -200,13 +200,16 @@ export class SearchResultBase extends React.Component<InternalProps> {
           <div className="SearchResult-contents">
             <h2 className="SearchResult-name">
               {addonTitle}
-              {showPromotedBadge && addon && promotedCategory ? (
-                <PromotedBadge
-                  category={promotedCategory}
-                  onClick={(e) => e.stopPropagation()}
-                  size="small"
-                />
-              ) : null}
+              {showPromotedBadge && addon
+                ? promotedCategories.map((category) => (
+                    <PromotedBadge
+                      key={`${addon.name}-${category}`}
+                      category={category}
+                      onClick={(e) => e.stopPropagation()}
+                      size="small"
+                    />
+                  ))
+                : null}
             </h2>
             {summary}
 

src/amo/components/SearchSuggestion/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
-import { getPromotedCategory } from 'amo/utils/addons';
+import { getPromotedCategories } from 'amo/utils/addons';
 import Icon from 'amo/components/Icon';
 import IconPromotedBadge from 'amo/components/IconPromotedBadge';
 import LoadingText from 'amo/components/LoadingText';
@@ -26,19 +26,19 @@ type PropsFromState = {|
 type InternalProps = {|
   ...Props,
   ...PropsFromState,
-  _getPromotedCategory: typeof getPromotedCategory,
+  _getPromotedCategories: typeof getPromotedCategories,
 |};
 
 export const SearchSuggestionBase = ({
-  _getPromotedCategory = getPromotedCategory,
+  _getPromotedCategories = getPromotedCategories,
   arrowAlt,
   clientApp,
   loading,
   suggestion,
 }: InternalProps): React.Node => {
   const { iconUrl, name, type } = suggestion;
 
-  const promotedCategory = _getPromotedCategory({
+  const promotedCategories = _getPromotedCategories({
     addon: suggestion,
     clientApp,
     forBadging: true,
@@ -52,14 +52,15 @@ export const SearchSuggestionBase = ({
       <span className="SearchSuggestion-name">
         {loading ? <LoadingText minWidth={20} /> : name}
       </span>
-      {promotedCategory ? (
+      {promotedCategories.map((category) => (
         <IconPromotedBadge
-          category={promotedCategory}
+          key={`${suggestion.name}-${category}`}
+          category={category}
           className="SearchSuggestion-icon-promoted"
           showAlt
           size="small"
         />
-      ) : null}
+      ))}
       <Icon
         alt={arrowAlt}
         className="SearchSuggestion-icon-arrow"

src/amo/installAddon.js

@@ -37,7 +37,7 @@ import {
 import * as addonManager from 'amo/addonManager';
 import { getVersionById } from 'amo/reducers/versions';
 import { getDisplayName } from 'amo/utils';
-import { getFileHash, getPromotedCategory } from 'amo/utils/addons';
+import { getFileHash, getPromotedCategories } from 'amo/utils/addons';
 import type { AppState } from 'amo/store';
 import type { AddonVersionType } from 'amo/reducers/versions';
 import type { AddonType } from 'amo/types/addons';
@@ -128,7 +128,7 @@ type WithInstallHelpersPropsFromState = {|
 
 type WithInstallHelpersDefaultProps = {|
   _addonManager: typeof addonManager,
-  _getPromotedCategory: typeof getPromotedCategory,
+  _getPromotedCategories: typeof getPromotedCategories,
   _log: typeof log,
   _tracking: typeof tracking,
 |};
@@ -158,7 +158,7 @@ export type WithInstallHelpersInjectedProps = {|
 export class WithInstallHelpers extends React.Component<WithInstallHelpersInternalProps> {
   static defaultProps: WithInstallHelpersDefaultProps = {
     _addonManager: addonManager,
-    _getPromotedCategory: getPromotedCategory,
+    _getPromotedCategories: getPromotedCategories,
     _log: log,
     _tracking: tracking,
   };
@@ -269,7 +269,7 @@ export class WithInstallHelpers extends React.Component<WithInstallHelpersIntern
   install(): Promise<void> {
     const {
       _addonManager,
-      _getPromotedCategory,
+      _getPromotedCategories,
       _log,
       _tracking,
       addon,
@@ -329,10 +329,13 @@ export class WithInstallHelpers extends React.Component<WithInstallHelpersIntern
 
         // If the add-on is trusted, send an additional event for trusted
         // add-on install.
-        const promotedCategory = _getPromotedCategory({ addon, clientApp });
-        if (addon.type === ADDON_TYPE_EXTENSION && promotedCategory) {
+        const promotedCategories = _getPromotedCategories({ addon, clientApp });
+        if (
+          addon.type === ADDON_TYPE_EXTENSION &&
+          promotedCategories.length > 0
+        ) {
           _tracking.sendEvent({
-            action: promotedCategory,
+            action: promotedCategories.join(', '),
             category: INSTALL_TRUSTED_EXTENSION_CATEGORY,
             label: guid,
           });

src/amo/reducers/autocomplete.js

@@ -18,7 +18,7 @@ export type ExternalSuggestion = {|
   icon_url: string,
   id: number,
   name: LocalizedString,
-  promoted: PromotedType | null,
+  promoted: Array<PromotedType> | PromotedType | null,
   type: string,
   url: string,
 |};
@@ -27,7 +27,7 @@ export type SuggestionType = {|
   addonId: number,
   iconUrl: string,
   name: string,
-  promoted: PromotedType | null,
+  promoted: Array<PromotedType> | PromotedType | null,
   type: string,
   url: string,
 |};

src/amo/sagas/addons.js

@@ -61,7 +61,7 @@ export const makeNonPublicAddon = (slug: string): ExternalAddonType => {
     },
     // Assume extension.
     type: ADDON_TYPE_EXTENSION,
-    promoted: null,
+    promoted: [],
     created: new Date(0),
     last_updated: null,
     // Mark the add-on as non-public.

src/amo/types/addons.js

@@ -133,7 +133,7 @@ export type ExternalAddonType = {|
   locale_disambiguation?: string,
   name: LocalizedString,
   previews?: Array<ExternalPreviewType>,
-  promoted: PromotedType | null,
+  promoted: Array<PromotedType> | PromotedType | null,
   ratings: {|
     average: number,
     bayesian_average: number,