fix: bugs related to status filter and assetType being set wrongly

webapp/src/components/AssetCard/AssetCard.css

@@ -33,12 +33,16 @@ a.ui.card.AssetCard.catalog:hover,
   flex: unset;
 }
 
+.ui.card.AssetCard:hover > .content.catalog.expandable,
+.ui.cards > .card.AssetCard:hover > .content.catalog.expandable {
+  height: 222px;
+}
+
 .ui.card.AssetCard:hover > .content.catalog,
 .ui.cards > .card.AssetCard:hover > .content.catalog {
   position: absolute;
   margin-top: 161px;
   width: 100%;
-  height: 222px;
   background-color: var(--card);
   box-shadow: 0px 4px 34px 0px rgba(255, 255, 255, 0.37) !important;
   border-radius: 0px 0px 10px 10px !important;
@@ -69,6 +73,7 @@ a.ui.card.AssetCard.catalog:hover,
 
 .AssetCard:hover .extraInformation {
   visibility: visible;
+  margin-top: 5px;
 }
 
 .AssetCard .ui.header.small {
@@ -187,6 +192,12 @@ a.ui.card.link:hover .meta {
   margin: 0px;
 }
 
+.AssetCard .ens-subdomain {
+  overflow: hidden;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+}
+
 .AssetCard .mintIcon {
   height: 14px;
 }

webapp/src/components/AssetCard/AssetCard.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
-import { RentalListing } from '@dcl/schemas'
+import React, { useCallback, useMemo } from 'react'
+import { Item, RentalListing } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Profile } from 'decentraland-dapps/dist/containers'
 import { Link } from 'react-router-dom'
@@ -113,7 +113,7 @@ const AssetCard = (props: Props) => {
     [rental]
   )
 
-  const catalogItemInformation = () => {
+  const catalogItemInformation = useMemo(() => {
     let information: {
       action: string
       actionIcon: string | null
@@ -128,9 +128,7 @@ const AssetCard = (props: Props) => {
           action: t('asset_card.not_for_sale'),
           actionIcon: null,
           price: null,
-          extraInformation: `${t('asset_card.owners', {
-            count: asset.owners
-          })}`
+          extraInformation: null
         }
       } else {
         const mostExpensive =
@@ -191,30 +189,42 @@ const AssetCard = (props: Props) => {
         }
       }
     }
-    return information ? (
+    return information
+  }, [asset, sortBy])
+
+  const renderCatalogItemInformation = useCallback(() => {
+    return catalogItemInformation ? (
       <div className="CatalogItemInformation">
         <span>
-          {information.action} &nbsp;
-          {information.actionIcon && (
-            <img src={information.actionIcon} alt="mint" className="mintIcon" />
+          {catalogItemInformation.action} &nbsp;
+          {catalogItemInformation.actionIcon && (
+            <img
+              src={catalogItemInformation.actionIcon}
+              alt="mint"
+              className="mintIcon"
+            />
           )}
         </span>
 
-        {information.price && (
+        {catalogItemInformation.price ? (
           <div className="PriceInMana">
             <Mana size="large" network={asset.network} className="PriceInMana">
-              {fomrmatWeiToAssetCard(information.price)}
+              {fomrmatWeiToAssetCard(catalogItemInformation.price)}
             </Mana>
           </div>
+        ) : (
+          `${t('asset_card.owners', {
+            count: (asset as Item).owners
+          })}`
         )}
-        {information.extraInformation && (
+        {catalogItemInformation.extraInformation && (
           <span className="extraInformation">
-            {information.extraInformation}
+            {catalogItemInformation.extraInformation}
           </span>
         )}
       </div>
     ) : null
-  }
+  }, [asset, catalogItemInformation])
 
   return (
     <Card
@@ -228,7 +238,9 @@ const AssetCard = (props: Props) => {
       }`}
     >
       <AssetImage
-        className={`AssetImage ${isCatalogItem(asset) ? 'catalog' : ''}`}
+        className={`AssetImage ${isCatalogItem(asset) ? 'catalog' : ''} ${
+          !!catalogItemInformation?.extraInformation ? 'expandable' : ''
+        }`}
         asset={asset}
         showOrderListedTag={showListedTag}
         showMonospace
@@ -245,7 +257,11 @@ const AssetCard = (props: Props) => {
           rental={rental}
         />
       ) : null}
-      <Card.Content className={isCatalogItem(asset) ? 'catalog' : ''}>
+      <Card.Content
+        className={`${isCatalogItem(asset) ? 'catalog' : ''} ${
+          !!catalogItemInformation?.extraInformation ? 'expandable' : ''
+        }`}
+      >
         <Card.Header>
           <div className={isCatalogItem(asset) ? 'catalogTitle' : 'title'}>
             {title}
@@ -279,7 +295,7 @@ const AssetCard = (props: Props) => {
             </div>
           ) : null}
         </div>
-        {catalogItemInformation()}
+        {renderCatalogItemInformation()}
 
         {parcel ? <ParcelTags nft={asset as NFT} /> : null}
         {estate ? <EstateTags nft={asset as NFT} /> : null}

webapp/src/components/AssetTopbar/SelectedFilters/SelectedFilters.tsx

@@ -10,6 +10,7 @@ import {
 } from '../../../utils/filters'
 import { CreatorAccount } from '../../../modules/account/types'
 import ProfilesCache from '../../../lib/profiles'
+import { AssetStatusFilter } from '../../../utils/filters'
 import { profileToCreatorAccount } from '../../AssetFilters/CreatorsFilter/utils'
 import { AssetType } from '../../../modules/asset/types'
 import { Pill } from './Pill/Pill'
@@ -41,7 +42,8 @@ export const SelectedFilters = ({
     minDistanceToPlaza,
     maxDistanceToPlaza,
     rentalDays,
-    assetType
+    assetType,
+    status
   } = browseOptions
   const [collection, setCollection] = useState<
     Record<string, string> | undefined
@@ -159,9 +161,20 @@ export const SelectedFilters = ({
     onBrowse({ adjacentToRoad: undefined })
   }, [onBrowse])
 
-  const handleDeleteRentalDays = useCallback((removeDays) => {
-    onBrowse({ rentalDays: rentalDays?.filter((day) => removeDays.toString() !== day.toString() )})
-  }, [onBrowse, rentalDays])
+  const handleDeleteStatus = useCallback(() => {
+    onBrowse({ status: AssetStatusFilter.ON_SALE })
+  }, [onBrowse])
+
+  const handleDeleteRentalDays = useCallback(
+    removeDays => {
+      onBrowse({
+        rentalDays: rentalDays?.filter(
+          day => removeDays.toString() !== day.toString()
+        )
+      })
+    },
+    [onBrowse, rentalDays]
+  )
 
   return (
     <div className={styles.pillContainer}>
@@ -259,17 +272,25 @@ export const SelectedFilters = ({
           onDelete={handleDeleteDistanceToPlaza}
           id="distanceToPlaza"
         />
-      ): null}
-      {rentalDays && rentalDays.length ? (
-        rentalDays.map((days) => (
-          <Pill
-            key={days}
-            label={t('nft_filters.periods.selection', { rentalDays: days })}
-            onDelete={handleDeleteRentalDays}
-            id={days.toString()}
-          />
-        ))
-      ): null}
+      ) : null}
+      {rentalDays && rentalDays.length
+        ? rentalDays.map(days => (
+            <Pill
+              key={days}
+              label={t('nft_filters.periods.selection', { rentalDays: days })}
+              onDelete={handleDeleteRentalDays}
+              id={days.toString()}
+            />
+          ))
+        : null}
+      {status && status !== AssetStatusFilter.ON_SALE ? (
+        <Pill
+          key={status}
+          label={t(`nft_filters.status.${status}`)}
+          onDelete={handleDeleteStatus}
+          id={status.toString()}
+        />
+      ) : null}
     </div>
   )
 }

webapp/src/components/Vendor/NFTSidebar/NFTSidebar.tsx

@@ -2,6 +2,10 @@ import React, { useCallback } from 'react'
 
 import { Sections } from '../../../modules/vendor/routing/types'
 import { Section as DecentralandSection } from '../../../modules/vendor/decentraland/routing/types'
+import {
+  getMarketAssetTypeFromCategory,
+  getCategoryFromSection
+} from '../../../modules/routing/search'
 import { VendorName } from '../../../modules/vendor/types'
 import { NFTSidebar as DecentralandNFTSidebar } from '../decentraland/NFTSidebar'
 import { Props } from './NFTSidebar.types'
@@ -11,7 +15,13 @@ const NFTSidebar = (props: Props) => {
 
   const handleOnBrowse = useCallback(
     (section: string) => {
-      onBrowse({ section })
+      const category = getCategoryFromSection(section)
+      onBrowse({
+        section,
+        assetType: category
+          ? getMarketAssetTypeFromCategory(category)
+          : undefined
+      })
     },
     [onBrowse]
   )

webapp/src/modules/routing/search.ts

@@ -14,6 +14,7 @@ import { Section } from '../vendor/decentraland'
 import { NFTSortBy } from '../nft/types'
 import { isAccountView, isLandSection } from '../ui/utils'
 import { AssetStatusFilter } from '../../utils/filters'
+import { AssetType } from '../asset/types'
 
 const SEARCH_ARRAY_PARAM_SEPARATOR = '_'
 
@@ -235,6 +236,21 @@ export function getSectionFromCategory(category: NFTCategory) {
   }
 }
 
+export function getMarketAssetTypeFromCategory(category: NFTCategory) {
+  switch (category) {
+    case NFTCategory.PARCEL:
+      return AssetType.NFT
+    case NFTCategory.ESTATE:
+      return AssetType.NFT
+    case NFTCategory.ENS:
+      return AssetType.NFT
+    case NFTCategory.EMOTE:
+      return AssetType.ITEM
+    case NFTCategory.WEARABLE:
+      return AssetType.ITEM
+  }
+}
+
 export function getSearchSection(category: WearableCategory | EmoteCategory) {
   for (const section of Object.values(Section)) {
     const sectionCategory = Object.values(EmoteCategory).includes(

webapp/src/modules/routing/selectors.spec.ts

@@ -127,6 +127,32 @@ describe('when getting if the are filters set', () => {
     })
   })
 
+  describe('and the status is set', () => {
+    describe('and the status is ON SALE', () => {
+      it('should return false', () => {
+        expect(
+          hasFiltersEnabled.resultFunc({
+            status: AssetStatusFilter.ON_SALE
+          })
+        ).toBe(false)
+      })
+    })
+
+    describe.each([
+      [AssetStatusFilter.NOT_FOR_SALE],
+      [AssetStatusFilter.ONLY_LISTING],
+      [AssetStatusFilter.ONLY_MINTING]
+    ])('and the status is %s', status => {
+      it('should return true', () => {
+        expect(
+          hasFiltersEnabled.resultFunc({
+            status
+          })
+        ).toBe(true)
+      })
+    })
+  })
+
   describe('and it is the lists section', () => {
     it('should return false', () => {
       expect(
@@ -632,11 +658,10 @@ describe('when getting the Sort By options', () => {
       beforeEach(() => {
         status = AssetStatusFilter.ONLY_LISTING
       })
-      it('should return the base sort options array plus tghe RECENTLY_LISTED option', () => {
-        expect(getSortByOptions.resultFunc(true, true, status)).toEqual([
-          getAllSortByOptions()[SortBy.RECENTLY_LISTED],
-          ...baseSortByOptions
-        ])
+      it('should return the base sort options', () => {
+        expect(getSortByOptions.resultFunc(true, true, status)).toEqual(
+          baseSortByOptions
+        )
       })
     })
     describe('and the status is NOT_FOR_SALE', () => {

webapp/src/modules/routing/selectors.ts

@@ -191,13 +191,8 @@ export const getSortByOptions = createSelector<
     switch (status) {
       case AssetStatusFilter.ON_SALE:
       case AssetStatusFilter.ONLY_MINTING:
-        orderByDropdownOptions = baseFilters
-        break
       case AssetStatusFilter.ONLY_LISTING:
-        orderByDropdownOptions = [
-          SORT_BY_MAP[SortBy.RECENTLY_LISTED],
-          ...baseFilters
-        ]
+        orderByDropdownOptions = baseFilters
         break
       case AssetStatusFilter.NOT_FOR_SALE:
         orderByDropdownOptions = [SORT_BY_MAP[SortBy.NEWEST]]
@@ -588,7 +583,8 @@ export const hasFiltersEnabled = createSelector<
     maxDistanceToPlaza,
     adjacentToRoad,
     creators,
-    rentalDays
+    rentalDays,
+    status
   } = browseOptions
   const isLand = isLandSection(section as Section)
 
@@ -628,7 +624,8 @@ export const hasFiltersEnabled = createSelector<
     hasEmotePlayModeFilter ||
     !!minPrice ||
     !!maxPrice ||
-    hasNotOnSaleFilter
+    hasNotOnSaleFilter ||
+    (!!status && status !== AssetStatusFilter.ON_SALE)
   )
 })