Add show listings button and reset functionality

src/components/SearchFiltersMobile/SearchFiltersMobile.css

@@ -160,4 +160,18 @@
   }
 }
 
+.showListingsContainer {
+  z-index: 11;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.1);
+  padding: 18px 24px;
+}
 
+.showListingsButton {
+  background-color: var(--marketplaceColor);
+  display: inline-block;
+  border-radius: 3px;
+}

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -7,7 +7,7 @@ import { omit } from 'lodash';
 
 import routeConfiguration from '../../routeConfiguration';
 import { createResourceLocatorString } from '../../util/routes';
-import { SecondaryButton, ModalInMobile } from '../../components';
+import { SecondaryButton, ModalInMobile, Button } from '../../components';
 import config from '../../config';
 import css from './SearchFiltersMobile.css';
 
@@ -19,8 +19,6 @@ class SelectSingleCustomAttributeMobile extends Component {
 
   selectOption(option) {
     const customAttribute = this.props.customAttribute;
-    console.log(`select option and ca: ${option} - ${customAttribute}`);
-    //this.setState({ isOpen: false });
     this.props.onSelect(customAttribute, option);
   }
 
@@ -40,9 +38,7 @@ class SelectSingleCustomAttributeMobile extends Component {
 
     return (
       <div>
-        <div className={labelClass}>
-          {filterLabel}
-        </div>
+        <div className={labelClass}>{filterLabel}</div>
         {ca.values.map(v => {
           // check if this option is selected
           const selected = currentValue === v;
@@ -88,6 +84,11 @@ class SearchFiltersMobileComponent extends Component {
     const loadingResults = <FormattedMessage id="SearchFilters.loadingResultsMobile" />;
     const filtersHeading = intl.formatMessage({ id: 'SearchFiltersMobile.heading' });
 
+    const showListingsLabel = intl.formatMessage(
+      { id: 'SearchFiltersMobile.showListings' },
+      { count: resultsCount }
+    );
+
     const openMobileFilters = () => {
       this.setState({ isFiltersOpenOnMobile: true });
     };
@@ -96,8 +97,6 @@ class SearchFiltersMobileComponent extends Component {
       this.setState({ isFiltersOpenOnMobile: false });
     };
 
-    const classes = classNames(rootClassName || css.root, className);
-
     const onSelectSingle = (customAttribute, option) => {
       // Name of the corresponding query parameter.
       // The custom attribute query parameters are named
@@ -110,11 +109,24 @@ class SearchFiltersMobileComponent extends Component {
         ? { ...urlQueryParams, [caParam]: option }
         : omit(urlQueryParams, caParam);
 
-      history.push(createResourceLocatorString('SearchPage', routeConfiguration(), {}, queryParams));
+      history.push(
+        createResourceLocatorString('SearchPage', routeConfiguration(), {}, queryParams)
+      );
     };
 
     const customAttribute = 'category';
 
+    // Reset all filter query parameters
+    const resetAll = () => {
+      const caParam = `ca_${customAttribute}`;
+      const queryParams = omit(urlQueryParams, caParam);
+      history.push(
+        createResourceLocatorString('SearchPage', routeConfiguration(), {}, queryParams)
+      );
+    };
+
+    const classes = classNames(rootClassName || css.root, className);
+
     const hasCategoryConfig = config.customAttributes && config.customAttributes.category;
     const categoryFilter = hasCategoryConfig ? (
       <SelectSingleCustomAttributeMobile
@@ -150,14 +162,16 @@ class SearchFiltersMobileComponent extends Component {
         >
           <div className={css.modalHeadingWrapper}>
             <span className={css.modalHeading}>{filtersHeading}</span>
-            <button className={css.clearButton}>
+            <button className={css.clearButton} onClick={resetAll}>
               <FormattedMessage id={'SearchFiltersMobile.resetAll'} />
             </button>
           </div>
           <div className={css.filtersContainer}>{categoryFilter}</div>
-          <button onClick={closeMobileFilters}>
-            "Show saunas"
-          </button>
+          <div className={css.showListingsContainer}>
+            <Button className={css.showListingsButton} onClick={closeMobileFilters}>
+              {showListingsLabel}
+            </Button>
+          </div>
         </ModalInMobile>
       </div>
     );

src/translations/en.json

@@ -474,6 +474,7 @@
   "SearchFilters.openMapView": "Map",
   "SearchFiltersMobile.heading": "Filter saunas",
   "SearchFiltersMobile.resetAll": "Reset all",
+  "SearchFiltersMobile.showListings": "Show {count, number} {count, plural, one {sauna} other {saunas}}",
   "SearchMapInfoCard.noImage": "No image",
   "SearchPage.schemaDescription": "Showing search results",
   "SearchPage.schemaMapSearch": "map search",