feat: Add campaign module and banners (#3240)

* feat: Add campaign modules and banners

* fix: Remove sourcemaps and split vendors plugin to speed up and reduce memory footprint

* fix: Remove viteconfig from tsconfig

* fix: Unify the banner id variable

* fix: tsconfig node

* fix: Restored linting configuration

package.json

@@ -38,12 +38,12 @@
     "decentraland-builder-scripts": "^0.24.0",
     "decentraland-connect": "^7.3.2",
     "decentraland-crypto-fetch": "^2.0.1",
-    "decentraland-dapps": "^23.22.0",
+    "decentraland-dapps": "^23.24.0",
     "decentraland-ecs": "6.12.4-7784644013.commit-f770b3e",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^2.16.0",
     "decentraland-ui": "^6.12.1",
-    "decentraland-ui2": "^0.8.7",
+    "decentraland-ui2": "^0.9.2",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",
     "graphql": "^15.8.0",
@@ -160,4 +160,4 @@
     "decentraland-ecs": "6.12.4-7784644013.commit-f770b3e",
     "decentraland": "3.3.0"
   }
-}
+}

src/components/CollectionsPage/CollectionsPage.css

@@ -215,3 +215,7 @@
   flex-direction: row;
   gap: 8px;
 }
+
+.CollectionsPage .banner-container {
+  margin-bottom: 24px;
+}

src/components/CollectionsPage/CollectionsPage.tsx

@@ -20,16 +20,17 @@ import {
   Icon as UIIcon
 } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Banner } from 'decentraland-dapps/dist/containers/Banner'
 import { NavigationTab } from 'components/Navigation/Navigation.types'
 import LoggedInDetailPage from 'components/LoggedInDetailPage'
 import Icon from 'components/Icon'
 import Chip from 'components/Chip'
-import EventBanner from 'components/EventBanner'
 import { locations } from 'routing/locations'
 import { CollectionPageView } from 'modules/ui/collection/types'
 import { CurationSortOptions } from 'modules/curations/types'
 import { usePagination } from 'lib/pagination'
 import { CollectionType } from 'modules/collection/types'
+import { BUILDER_BANNER_ID } from 'modules/common/banners'
 import collectionsIcon from 'icons/collections.svg'
 import ItemCard from './ItemCard'
 import ItemRow from './ItemRow'
@@ -296,7 +297,9 @@ export default function CollectionsPage(props: Props) {
 
     return (
       <>
-        <EventBanner />
+        <div className="banner-container">
+          <Banner id={BUILDER_BANNER_ID} />
+        </div>
         <div className="filters">
           <Container>
             {(hasUserOrphanItems || isThirdPartyManager || isLinkedWearablesPaymentsEnabled) && (

src/components/CurationPage/CurationPage.container.ts

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
+import { getMainTag, getContentfulNormalizedLocale, getCampaignName } from 'decentraland-dapps/dist/modules/campaign'
 import { getData as getWallet, isConnecting } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { RootState } from 'modules/common/types'
 import { getIsCampaignEnabled } from 'modules/features/selectors'
@@ -29,7 +30,9 @@ const mapState = (state: RootState): MapStateProps => {
     isLoadingCollectionsData:
       isLoadingType(getLoadingCollection(state), FETCH_COLLECTIONS_REQUEST) ||
       isLoadingType(getLoadingCuration(state), FETCH_COLLECTION_CURATION_REQUEST),
-    isCampaignEnabled: getIsCampaignEnabled(state)
+    isCampaignEnabled: getIsCampaignEnabled(state),
+    campaignTag: getMainTag(state),
+    campaignName: getCampaignName(state)?.[getContentfulNormalizedLocale(state)]
   }
 }
 

src/components/CurationPage/CurationPage.tsx

@@ -38,7 +38,6 @@ import './CurationPage.css'
 
 const PAGE_SIZE = 12
 const ALL_ASSIGNEES_KEY = 'all'
-const CAMPAIGN_TAG = 'DCLMF24'
 
 export default class CurationPage extends React.PureComponent<Props, State> {
   state: State = {
@@ -120,11 +119,16 @@ export default class CurationPage extends React.PureComponent<Props, State> {
   }
 
   handleOnCampaignToggleChange = (_event: React.FormEvent<HTMLInputElement>, checkboxProps: CheckboxProps) => {
+    const { campaignTag } = this.props
     const { checked } = checkboxProps
+    if (!campaignTag) {
+      return
+    }
+
     if (checked) {
-      this.updateParam({ filterByTags: [...this.state.filterByTags, CAMPAIGN_TAG] })
+      this.updateParam({ filterByTags: [...this.state.filterByTags, campaignTag] })
     } else {
-      this.updateParam({ filterByTags: [...this.state.filterByTags.filter(tag => tag !== CAMPAIGN_TAG)] })
+      this.updateParam({ filterByTags: [...this.state.filterByTags.filter(tag => tag !== campaignTag)] })
     }
   }
 
@@ -212,21 +216,21 @@ export default class CurationPage extends React.PureComponent<Props, State> {
   }
 
   renderCampaignFilterToggle = () => {
+    const { isCampaignEnabled, campaignName, campaignTag } = this.props
     const { filterByTags } = this.state
-    return (
+    return isCampaignEnabled && campaignName && campaignTag ? (
       <Radio
         toggle
         className="filterByCampaignTag"
-        checked={filterByTags.includes(CAMPAIGN_TAG)}
+        checked={filterByTags.includes(campaignTag)}
         onChange={this.handleOnCampaignToggleChange}
-        label={t('campaign.name')}
+        label={campaignName}
       />
-    )
+    ) : null
   }
 
   renderPage() {
-    const { isLoadingCollectionsData, isLoadingCommittee, collections, curationsByCollectionId, paginationData, isCampaignEnabled } =
-      this.props
+    const { isLoadingCollectionsData, isLoadingCommittee, collections, curationsByCollectionId, paginationData } = this.props
     const { page, searchText } = this.state
     const totalCurations = paginationData?.total
     const totalPages = paginationData?.totalPages
@@ -252,7 +256,7 @@ export default class CurationPage extends React.PureComponent<Props, State> {
               </Column>
               <Column align="right" shrink={false}>
                 <Row>
-                  {isCampaignEnabled ? this.renderCampaignFilterToggle() : null}
+                  {this.renderCampaignFilterToggle()}
                   {this.renderAssigneeFilterDropdown()}
                   {this.renderTypesFilterDropdown()}
                   {this.renderStatusFilterDropdown()}

src/components/CurationPage/CurationPage.types.ts

@@ -34,6 +34,8 @@ export type Props = {
   isLoadingCollectionsData: boolean
   isLoadingCommittee: boolean
   isCampaignEnabled: boolean
+  campaignTag?: string
+  campaignName?: string
   onNavigate: (path: string) => void
   onFetchCollections: (params?: FetchCollectionsParams) => ReturnType<Dispatch<FetchCollectionsRequestAction>>
 }
@@ -60,6 +62,8 @@ export type MapStateProps = Pick<
   | 'isLoadingCollectionsData'
   | 'isLoadingCommittee'
   | 'isCampaignEnabled'
+  | 'campaignTag'
+  | 'campaignName'
 >
 
 export type MapDispatchProps = Pick<Props, 'onFetchCollections'>