feat: change empty state for campaign (#2051)

decentraland · Nov 10, 2023 · 4c772cb · 4c772cb
1 parent 4087090
commit 4c772cb
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 2 deletions.
diff --git a/webapp/src/components/AssetList/AssetList.css b/webapp/src/components/AssetList/AssetList.css
@@ -29,6 +29,10 @@
   background-size: cover;
 }
 
+.AssetsList .empty-text {
+  max-width: 600px;
+}
+
 .AssetsList .empty .logo {
   background-image: url('../../images/empty-list.svg');
   background-repeat: no-repeat;

diff --git a/webapp/src/components/AssetList/AssetList.tsx b/webapp/src/components/AssetList/AssetList.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
 import { Card, Loader } from 'decentraland-ui'
 import { NFTCategory } from '@dcl/schemas'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { getCategoryFromSection } from '../../modules/routing/search'
 import { getMaxQuerySize, MAX_PAGE } from '../../modules/vendor/api'
+import { locations } from '../../modules/routing/locations'
 import * as events from '../../utils/events'
 import { InfiniteScroll } from '../InfiniteScroll'
 import { AssetCard } from '../AssetCard'
@@ -29,6 +31,8 @@ const AssetList = (props: Props) => {
     onClearFilters
   } = props
 
+  const location = useLocation()
+
   useEffect(() => {
     if (visitedLocations.length > 1) {
       const [currentLocation, previousLocation] = visitedLocations
@@ -69,18 +73,22 @@ const AssetList = (props: Props) => {
         NFTCategory.WEARABLE
       ].includes(getCategoryFromSection(section)!)
 
+      if (location.pathname === locations.campaign()) {
+        return 'nft_list.empty_campaign'
+      }
+
       if (isEmoteOrWearableSection) {
         return search ? 'nft_list.empty_search' : 'nft_list.empty'
       }
     }
     return 'nft_list.empty'
-  }, [assets.length, search, section, isManager])
+  }, [assets.length, search, section, isManager, location])
 
   const renderEmptyState = useCallback(() => {
     return (
       <div className="empty empty-assets">
         <div className="watermelon" />
-        <span>
+        <span className="empty-text">
           {t(`${emptyStateTranslationString}.title`, {
             search
           })}
@@ -96,6 +104,11 @@ const AssetList = (props: Props) => {
                 <button className="empty-actions" onClick={onClearFilters}>
                   {chunks}
                 </button>
+              ),
+              collectiblesLink: (chunks: string) => (
+                <Link className="empty-actions" to={locations.browse()}>
+                  {chunks}
+                </Link>
               )
             }}
           />

diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
@@ -369,6 +369,10 @@
     "empty_search": {
       "title": "No results for \"{search}\".",
       "action": "Check for any typos or spelling errors, or try a different search term."
+    },
+    "empty_campaign": {
+      "title": "Creators haven't added their items here yet. In the meantime, check out the community's creations in the 'Collectibles' tab to find something you like.",
+      "action": "<collectiblesLink>Go to Collectibles</collectiblesLink>"
     }
   },
   "nft_filters": {

diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
@@ -1306,6 +1306,10 @@
     "campaign_browser": {
       "title": "Esenciales del Music Festival",
       "subtitle": "Desde Emotes de surf en la multitud hasta wearables brillantes, encuentre todos los artículos del festival que necesita para #DCLMF23 aquí"
+    },
+    "empty_campaign": {
+      "title": "Los creadores aún no han agregado sus artículos aquí. Mientras tanto, consulte las creaciones de la comunidad en la pestaña 'Coleccionables' para encontrar algo que le guste.",
+      "action": "<collectiblesLink>Ir a Collectibles</collectiblesLink>"
     }
   },
   "asset_card": {

diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
@@ -1311,6 +1311,10 @@
     "campaign_browser": {
       "title": "分散音乐节的要点",
       "subtitle": "从人群冲浪到发光的可穿戴设备，在这里找到＃DCLMF23所需的所有节日项目"
+    },
+    "empty_campaign": {
+      "title": "创作者还没有在这里添加他们的物品。同时，在“收藏品”选项卡中查看社区的创作，以找到您喜欢的东西。",
+      "action": "<collectiblesLink>去收藏品</collectiblesLink>"
     }
   },
   "asset_card": {