fix: only smart and with credits filters toggle in mobile (#2608)

* fix: only smart and with credits filters toggle in mobile

* fix: test

* feat: add fail-on-error: false to coveralls ci action

Author: juanmahidalgo

.github/workflows/test.yaml

@@ -21,8 +21,9 @@ jobs:
       - name: Test
         run: npm run test:coverage
       - name: report coverage
-        uses: coverallsapp/github-action@master
+        uses: coverallsapp/github-action@main
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           base-path: ./webapp
           path-to-lcov: ./webapp/coverage/lcov.info
+          fail-on-error: false

webapp/src/components/AssetFilters/AssetFilters.container.tsx

@@ -24,6 +24,7 @@ const AssetFiltersContainer: React.FC<ContainerProps> = ({ values = {}, onFilter
       creators: 'creators' in values ? values.creators || [] : browseOptions.creators,
       onlyOnSale: 'onlyOnSale' in values ? values.onlyOnSale : browseOptions.onlyOnSale,
       onlyOnRent: 'onlyOnRent' in values ? values.onlyOnRent : browseOptions.onlyOnRent,
+      onlySmart: 'onlySmart' in values ? values.onlySmart : browseOptions.onlySmart,
       rarities: 'rarities' in values ? values.rarities || [] : browseOptions.rarities,
       status: 'status' in values ? values.status : (browseOptions.status as AssetStatusFilter),
       network: 'network' in values ? values.network : browseOptions.network,
@@ -39,11 +40,11 @@ const AssetFiltersContainer: React.FC<ContainerProps> = ({ values = {}, onFilter
       minPrice: 'minPrice' in values ? values.minPrice || '' : browseOptions.minPrice,
       maxPrice: 'maxPrice' in values ? values.maxPrice || '' : browseOptions.maxPrice,
       minEstateSize: 'minEstateSize' in values ? values.minEstateSize || '' : browseOptions.minEstateSize,
-      maxEstateSize: 'maxEstateSize' in values ? values.maxEstateSize || '' : browseOptions.maxEstateSize
+      maxEstateSize: 'maxEstateSize' in values ? values.maxEstateSize || '' : browseOptions.maxEstateSize,
+      withCredits: 'withCredits' in values ? values.withCredits : browseOptions.withCredits
     }),
     [values, browseOptions]
   )
-
   const landStatus = useMemo(() => {
     if (parameters.onlyOnRent && !parameters.onlyOnSale) {
       return LANDFilters.ONLY_FOR_RENT

webapp/src/components/AssetFilters/AssetFilters.spec.tsx

@@ -31,7 +31,7 @@ function renderAssetFilters(props: Partial<Props> = {}) {
       collection=""
       creators={[]}
       rarities={[]}
-      isOnlySmart={false}
+      onlySmart={false}
       landStatus={LANDFilters.ALL_LAND}
       onBrowse={jest.fn()}
       values={{ section: Section.LAND }}

webapp/src/components/AssetFilters/AssetFilters.tsx

@@ -40,6 +40,8 @@ export const AssetFilters = ({
   bodyShapes,
   onlyOnSale,
   emotePlayMode,
+  onlySmart,
+  withCredits,
   section,
   landStatus,
   defaultCollapsed,
@@ -234,6 +236,8 @@ export const AssetFilters = ({
   return (
     <Menu className="filters-sidebar">
       <SpecialFilter
+        isOnlySmart={onlySmart}
+        withCredits={withCredits}
         onSmartChange={shouldRenderFilter(AssetFilter.OnlySmart) ? handleOnlySmartChange : undefined}
         onWithCreditsChange={handleWithCreditsToggleChange}
         defaultCollapsed={!!defaultCollapsed?.[AssetFilter.Special]}

webapp/src/components/AssetFilters/AssetFilters.types.ts

@@ -19,7 +19,7 @@ export type Props = {
   network?: Network
   category?: NFTCategory
   bodyShapes?: (GenderFilterOption | WearableGender)[]
-  isOnlySmart?: boolean
+  onlySmart?: boolean
   onlyOnSale?: boolean
   emotePlayMode?: EmotePlayMode[]
   assetType?: AssetType

webapp/src/components/AssetFilters/SpecialFilter/SpecialFilter.container.tsx

@@ -7,9 +7,17 @@ import { ContainerProps } from './SpecialFilter.types'
 
 export const SpecialFilterContainer: React.FC<ContainerProps> = props => {
   const { onlySmart, withCredits } = useGetBrowseOptions()
+
   const isCreditsEnabled = useSelector(getIsCreditsEnabled)
 
-  return <SpecialFilter {...props} isOnlySmart={onlySmart} withCredits={withCredits} isCreditsEnabled={isCreditsEnabled} />
+  return (
+    <SpecialFilter
+      {...props}
+      isOnlySmart={props.isOnlySmart !== undefined ? props.isOnlySmart : onlySmart} // if the isOnlySmart is undefined, use the value from the browse options
+      withCredits={props.withCredits !== undefined ? props.withCredits : withCredits} // if the withCredits is undefined, use the value from the browse options
+      isCreditsEnabled={isCreditsEnabled}
+    />
+  )
 }
 
 export default SpecialFilterContainer

webapp/src/components/AssetFilters/SpecialFilter/SpecialFilter.tsx

@@ -42,6 +42,7 @@ export const SpecialFilter = (props: SpecialFilterProps) => {
         {isMobileOrTablet ? (
           <>
             <span className="box-filter-name">{t('filters.special_filters')}</span>
+            {isOnlySmart || withCredits ? ': ' : ''}
             <span className="box-filter-value">
               {isOnlySmart ? t('filters.only_smart') : ''}
               {isOnlySmart && withCredits ? ', ' : ''}

webapp/src/components/AssetFilters/SpecialFilter/SpecialFilter.types.ts

@@ -9,4 +9,4 @@ export type Props = {
   defaultCollapsed?: boolean
 }
 
-export type ContainerProps = Omit<Props, 'isOnlySmart' | 'withCredits' | 'isCreditsEnabled'>
+export type ContainerProps = Omit<Props, 'isCreditsEnabled'>