@nyris/nyris-webapp 0.3.47 → 0.3.49

package/build/static/media/add.ba46a4bf.svg

@@ -0,0 +1,4 @@
+
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.625 7.375V3.625C8.625 3.27982 8.34518 3 8 3C7.65482 3 7.375 3.27982 7.375 3.625V7.375H3.625C3.27982 7.375 3 7.65482 3 8C3 8.34518 3.27982 8.625 3.625 8.625H7.375V12.375C7.375 12.7202 7.65482 13 8 13C8.34518 13 8.625 12.7202 8.625 12.375V8.625H12.375C12.7202 8.625 13 8.34518 13 8C13 7.65482 12.7202 7.375 12.375 7.375H8.625Z" fill="#2B2C46"/>
+</svg>

package/build/static/media/arrow_left.fd9d4390.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.07845 9.15944C5.74747 8.78211 5.74747 8.21789 6.07845 7.84056L9.53895 3.8956C9.72281 3.68599 10.0491 3.68599 10.233 3.8956C10.3858 4.06978 10.3858 4.33022 10.233 4.5044L7.30652 7.84056C6.97554 8.21789 6.97554 8.78211 7.30652 9.15944L10.233 12.4956C10.3858 12.6698 10.3858 12.9302 10.233 13.1044C10.0491 13.314 9.72281 13.314 9.53895 13.1044L6.07845 9.15944Z" fill="#2B2C46"/>
+</svg>

package/build/static/media/arrow_right.c6fdab0b.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.92155 9.15944C10.2525 8.78211 10.2525 8.21789 9.92155 7.84056L6.46105 3.8956C6.27719 3.68599 5.95088 3.68599 5.76702 3.8956C5.61423 4.06978 5.61423 4.33022 5.76702 4.5044L8.69348 7.84056C9.02446 8.21789 9.02446 8.78211 8.69348 9.15944L5.76702 12.4956C5.61423 12.6698 5.61423 12.9302 5.76702 13.1044C5.95088 13.314 6.27719 13.314 6.46105 13.1044L9.92155 9.15944Z" fill="#2B2C46"/>
+</svg>

package/build/static/media/minus.3fce6c0a.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="7.36328" width="10" height="1.27383" rx="0.636915" fill="#2B2C46"/>
+</svg>

package/build/static/media/settings.e3c8138b.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3007 8.43552V8V7.55875L15.4009 6.59603C15.8197 6.22695 15.9116 5.60988 15.6187 5.13475L14.2663 2.84254C14.0618 2.4883 13.684 2.26991 13.2749 2.26949C13.1504 2.26854 13.0265 2.28789 12.9082 2.3268L11.5157 2.7967C11.2752 2.63694 11.0244 2.49336 10.765 2.36691L10.4727 0.922825C10.3645 0.378294 9.88166 -0.0104241 9.3266 0.000213077H6.64472C6.08966 -0.0104241 5.60678 0.378294 5.49862 0.922825L5.20636 2.36691C4.94501 2.49333 4.69232 2.6369 4.44994 2.7967L3.08608 2.30388C2.96648 2.27272 2.84263 2.26111 2.71932 2.26949C2.31028 2.26991 1.93247 2.4883 1.72795 2.84254L0.375548 5.13475C0.0996813 5.60867 0.198168 6.2116 0.610498 6.5731L1.69356 7.56448V8V8.44125L0.610498 9.40397C0.186011 9.76843 0.0866989 10.3861 0.375548 10.8653L1.72795 13.1575C1.93247 13.5117 2.31028 13.7301 2.71932 13.7305C2.84388 13.7315 2.96775 13.7121 3.08608 13.6732L4.47859 13.2033C4.71901 13.3631 4.96979 13.5066 5.22929 13.6331L5.52154 15.0772C5.6297 15.6217 6.11258 16.0104 6.66764 15.9998H9.37244C9.92751 16.0104 10.4104 15.6217 10.5185 15.0772L10.8108 13.6331C11.0721 13.5067 11.3248 13.3631 11.5672 13.2033L12.954 13.6732C13.0723 13.7121 13.1962 13.7315 13.3208 13.7305C13.7298 13.7301 14.1076 13.5117 14.3121 13.1575L15.6187 10.8653C15.8946 10.3913 15.7961 9.7884 15.3837 9.4269L14.3007 8.43552ZM13.2749 12.5844L11.3094 11.9197C10.8492 12.3094 10.3234 12.6141 9.75639 12.8194L9.34952 14.8766H6.64472L6.23786 12.8423C5.67536 12.6312 5.15234 12.327 4.69062 11.9426L2.71932 12.5844L1.36693 10.2922L2.92562 8.91688C2.81966 8.32369 2.81966 7.71642 2.92562 7.12323L1.36693 5.7078L2.71932 3.41559L4.68489 4.08033C5.14501 3.6906 5.67088 3.38594 6.23786 3.18064L6.64472 1.12339H9.34952L9.75639 3.15772C10.3189 3.36885 10.8419 3.67298 11.3036 4.05741L13.2749 3.41559L14.6273 5.7078L13.0686 7.08312C13.1746 7.67631 13.1746 8.28358 13.0686 8.87677L14.6273 10.2922L13.2749 12.5844ZM7.99712 11.4383C6.0982 11.4383 4.55882 9.89892 4.55882 8C4.55882 6.10108 6.0982 4.5617 7.99712 4.5617C9.89604 4.5617 11.4354 6.10108 11.4354 8C11.4447 8.91471 11.0854 9.79466 10.4386 10.4415C9.79178 11.0883 8.91183 11.4476 7.99712 11.4383ZM7.99712 5.7078C7.38493 5.69354 6.79358 5.93045 6.36058 6.36345C5.92757 6.79646 5.69066 7.38781 5.70492 8C5.69066 8.61219 5.92757 9.20354 6.36058 9.63655C6.79358 10.0695 7.38493 10.3065 7.99712 10.2922C8.60931 10.3065 9.20066 10.0695 9.63367 9.63655C10.0667 9.20354 10.3036 8.61219 10.2893 8C10.3036 7.38781 10.0667 6.79646 9.63367 6.36345C9.20066 5.93045 8.60931 5.69354 7.99712 5.7078Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.47",
+  "version": "0.3.49",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -13,8 +13,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.47",
-    "@nyris/nyris-react-components": "^0.3.47",
+    "@nyris/nyris-api": "^0.3.49",
+    "@nyris/nyris-react-components": "^0.3.49",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/public/js/settings.example.js

@@ -1,19 +1,93 @@
 var settings = {
-  apiKey: 'xxx',
-  maxWidth: 500,
-  maxHeight: 500,
+  auth0: {
+    enabled: '',
+    domain: '',
+    clientId: '',
+    supportEmail: '',
+  },
+  algolia: {
+    apiKey: '',
+    appId: '',
+    indexName: '',
+  },
+  alogoliaFilterField: 'keyword',
+  refinements: [
+    {
+      attribute: 'brand',
+      header: 'Brands',
+    },
+    {
+      attribute: 'keyword_0',
+      header: 'Category',
+    },
+  ],
+  // Nyris - visual search
+  apiKey: '',
+  baseUrl: 'https://api.nyris.io',
   jpegQuality: 0.9,
+  maxHeight: 1024,
+  maxWidth: 1024,
   regions: true,
-  preview: true,
-  baseUrl: 'https://api.nyris.io',
-  xOptions: '',
-  instantRedirectPatterns: [
-    '^https?://(www.)?youtube.com/',
-    '^https?://(www.)?youtu.be/',
-    '^https?://(www.)?vimeo.com/',
-    '^https?://(www.)?dailymotion.com/',
-    '^https?://(www.)?dai.ly/',
-  ],
+  responseFormat: 'application/offers.complete+json',
+  visualSearchFilterKey: '',
+  // UI - theme
+  theme: {
+    appBarLogoUrl: '',
+    headerColor: '',
+    logoHeight: '',
+    logoWidth: '',
+    primaryColor: '',
+    secondaryColor: '',
+  },
+  language: 'en',
+  // features
+  shareOption: '',
+  showFeedbackAndShare: '',
+  showPoweredByNyris: '',
+  warehouseVariant: false,
+  postFilterOption: '',
+  preFilterOption: '',
+  rfq: {
+    enabled: '',
+    emailTemplateId: '',
+  },
+  support: {
+    enabled: '',
+    emailInquiry: '',
+    emailTemplateId: '',
+    supportNumber: '',
+    description: '',
+  },
+  cadenas: {
+    catalog: '',
+    cadenasAPIKey: '',
+    cadenas3dWebView: '',
+  },
+  //UI - labels
+  appTitle: '',
+  brandName: '',
+  headerText: '',
+  itemIdLabel: 'SKU',
+  preFilterTitle: '',
+  CTAButtonText: 'View More',
+  secondaryCTAButtonText: 'Configure Now',
+
+  //field mappins
+  field: {
+    ctaLinkField: 'main_offer_link',
+    secondaryCTALinkField: 'main_offer_link',
+    productName: 'title',
+    productDetails: 'keyword_1',
+    manufacturerNumber: 'keyword_0',
+    productTag: 'brand',
+    //WarehouseVariant
+    warehouseNumber: 'custom_id_key_2',
+    warehouseNumberValue: 'custom_id_value_2',
+    warehouseShelfNumber: 'custom_id_key_1',
+    warehouseShelfNumberValue: 'custom_id_value_1',
+    warehouseStock: 'custom_id_key_3',
+    warehouseStockValue: 'custom_id_value_3',
+  },
 };
 settings['customSearchRequest'] = null;
 settings['responseHook'] = null;

package/src/Store/Store.ts

@@ -9,6 +9,7 @@ import { defaultSettings } from './constants';
 declare var settings: AppSettings;
 
 settings.algolia.enabled = true;
+settings.preview = true;
 
 let normalizedSettings: AppSettings = {
   ...defaultSettings,

package/src/Store/search/Search.ts

@@ -2,6 +2,7 @@ import { RectCoords, Region } from '@nyris/nyris-api';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { DEFAULT_REGION } from '../../constants';
 import { initialState } from './search.initialState';
+import { isUndefined } from 'lodash';
 
 export const searchSlice = createSlice({
   name: 'search',
@@ -156,6 +157,7 @@ export const searchSlice = createSlice({
         textSearchInputMobile: '',
         isShowModalDetailItemMobile: false,
         preFilter: state.preFilter || {},
+        postFilter: {},
         preFilterDropdown: false,
         imageCaptureHelpModal: false,
       };
@@ -260,11 +262,44 @@ export const searchSlice = createSlice({
         filter: data.payload,
       };
     },
+    setPostFilter: (state, data: PayloadAction<Record<string, string>>) => {
+      const { payload } = data;
+
+      let filter = { ...state.postFilter } || {};
+      const key = Object.keys(payload)[0];
+
+      if (
+        !isUndefined(filter[key]) &&
+        !isUndefined(filter[key][payload[key]])
+      ) {
+        filter[key] = {
+          ...filter[key],
+          [payload[key]]: !filter[key][payload[key]],
+        };
+      } else if (!filter[key]) {
+        filter = { ...filter, [key]: { [payload[key]]: true } };
+      } else {
+        filter[key] = { ...filter[key], [payload[key]]: true };
+      }
+
+      return {
+        ...state,
+        postFilter: { ...filter },
+      };
+    },
+
+    clearPostFilter: state => {
+      return {
+        ...state,
+        postFilter: {},
+      };
+    },
   },
 });
 
 export const {
   changeValueTextSearch,
+  clearPostFilter,
   configureFilter,
   loadFileSelectRegion,
   loadingActionRegions,
@@ -279,6 +314,7 @@ export const {
   setFilter,
   setImageCaptureHelpModal,
   setImageSearchInput,
+  setPostFilter,
   setPreFilter,
   setPreFilterDropdown,
   setRegions,

package/src/Store/search/search.initialState.ts

@@ -26,4 +26,5 @@ export const initialState: SearchState = {
     page: 1,
     refinementList: '',
   },
+  postFilter: {},
 };

package/src/Store/search/types.ts

@@ -33,4 +33,5 @@ export interface SearchState {
   setPreFilterDropdown?: any;
   textSearchInputMobile?: string;
   valueTextSearch: any;
+  postFilter: Record<string, Record<string, boolean>>;
 }

package/src/common/assets/icons/add.svg

@@ -0,0 +1,4 @@
+
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.625 7.375V3.625C8.625 3.27982 8.34518 3 8 3C7.65482 3 7.375 3.27982 7.375 3.625V7.375H3.625C3.27982 7.375 3 7.65482 3 8C3 8.34518 3.27982 8.625 3.625 8.625H7.375V12.375C7.375 12.7202 7.65482 13 8 13C8.34518 13 8.625 12.7202 8.625 12.375V8.625H12.375C12.7202 8.625 13 8.34518 13 8C13 7.65482 12.7202 7.375 12.375 7.375H8.625Z" fill="#2B2C46"/>
+</svg>

package/src/common/assets/icons/minus.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="7.36328" width="10" height="1.27383" rx="0.636915" fill="#2B2C46"/>
+</svg>

package/src/common/assets/icons/settings.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3007 8.43552V8V7.55875L15.4009 6.59603C15.8197 6.22695 15.9116 5.60988 15.6187 5.13475L14.2663 2.84254C14.0618 2.4883 13.684 2.26991 13.2749 2.26949C13.1504 2.26854 13.0265 2.28789 12.9082 2.3268L11.5157 2.7967C11.2752 2.63694 11.0244 2.49336 10.765 2.36691L10.4727 0.922825C10.3645 0.378294 9.88166 -0.0104241 9.3266 0.000213077H6.64472C6.08966 -0.0104241 5.60678 0.378294 5.49862 0.922825L5.20636 2.36691C4.94501 2.49333 4.69232 2.6369 4.44994 2.7967L3.08608 2.30388C2.96648 2.27272 2.84263 2.26111 2.71932 2.26949C2.31028 2.26991 1.93247 2.4883 1.72795 2.84254L0.375548 5.13475C0.0996813 5.60867 0.198168 6.2116 0.610498 6.5731L1.69356 7.56448V8V8.44125L0.610498 9.40397C0.186011 9.76843 0.0866989 10.3861 0.375548 10.8653L1.72795 13.1575C1.93247 13.5117 2.31028 13.7301 2.71932 13.7305C2.84388 13.7315 2.96775 13.7121 3.08608 13.6732L4.47859 13.2033C4.71901 13.3631 4.96979 13.5066 5.22929 13.6331L5.52154 15.0772C5.6297 15.6217 6.11258 16.0104 6.66764 15.9998H9.37244C9.92751 16.0104 10.4104 15.6217 10.5185 15.0772L10.8108 13.6331C11.0721 13.5067 11.3248 13.3631 11.5672 13.2033L12.954 13.6732C13.0723 13.7121 13.1962 13.7315 13.3208 13.7305C13.7298 13.7301 14.1076 13.5117 14.3121 13.1575L15.6187 10.8653C15.8946 10.3913 15.7961 9.7884 15.3837 9.4269L14.3007 8.43552ZM13.2749 12.5844L11.3094 11.9197C10.8492 12.3094 10.3234 12.6141 9.75639 12.8194L9.34952 14.8766H6.64472L6.23786 12.8423C5.67536 12.6312 5.15234 12.327 4.69062 11.9426L2.71932 12.5844L1.36693 10.2922L2.92562 8.91688C2.81966 8.32369 2.81966 7.71642 2.92562 7.12323L1.36693 5.7078L2.71932 3.41559L4.68489 4.08033C5.14501 3.6906 5.67088 3.38594 6.23786 3.18064L6.64472 1.12339H9.34952L9.75639 3.15772C10.3189 3.36885 10.8419 3.67298 11.3036 4.05741L13.2749 3.41559L14.6273 5.7078L13.0686 7.08312C13.1746 7.67631 13.1746 8.28358 13.0686 8.87677L14.6273 10.2922L13.2749 12.5844ZM7.99712 11.4383C6.0982 11.4383 4.55882 9.89892 4.55882 8C4.55882 6.10108 6.0982 4.5617 7.99712 4.5617C9.89604 4.5617 11.4354 6.10108 11.4354 8C11.4447 8.91471 11.0854 9.79466 10.4386 10.4415C9.79178 11.0883 8.91183 11.4476 7.99712 11.4383ZM7.99712 5.7078C7.38493 5.69354 6.79358 5.93045 6.36058 6.36345C5.92757 6.79646 5.69066 7.38781 5.70492 8C5.69066 8.61219 5.92757 9.20354 6.36058 9.63655C6.79358 10.0695 7.38493 10.3065 7.99712 10.2922C8.60931 10.3065 9.20066 10.0695 9.63367 9.63655C10.0667 9.20354 10.3036 8.61219 10.2893 8C10.3036 7.38781 10.0667 6.79646 9.63367 6.36345C9.20066 5.93045 8.60931 5.69354 7.99712 5.7078Z" fill="currentColor"/>
+</svg>

package/src/components/HeaderMobile.tsx

@@ -55,6 +55,8 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     queryText,
     requestImage,
     selectedRegion,
+    results,
+    postFilter,
   } = search;
 
   const query = useQuery();
@@ -86,7 +88,15 @@ function HeaderMobileComponent(props: Props): JSX.Element {
         dispatch(updateQueryText(''));
         setValueInput('');
       }
+    } else {
+      if (settings.algolia?.enabled) {
+        // not an ideal solution: fixes text search not working after removing image
+        setTimeout(() => {
+          refine(searchQuery);
+        }, 100);
+      }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageThumbSearchInput, dispatch, refine, history, settings.algolia]);
 
   useEffect(() => {
@@ -162,16 +172,30 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   );
   const isPostFilterApplied = useMemo(() => {
     let isApplied = false;
-    if (!valueTextSearch?.refinementList) return false;
-    Object.keys(valueTextSearch?.refinementList).forEach(key => {
-      if (typeof valueTextSearch.refinementList[key] === 'object') {
-        isApplied = true;
-        return;
-      }
-    });
+
+    if (settings.algolia.enabled) {
+      if (!valueTextSearch?.refinementList) return false;
+      Object.keys(valueTextSearch?.refinementList).forEach(key => {
+        if (typeof valueTextSearch.refinementList[key] === 'object') {
+          isApplied = true;
+          return;
+        }
+      });
+    } else {
+      Object.keys(postFilter).forEach(key => {
+        const filter = postFilter[key];
+        Object.keys(filter).forEach(value => {
+          if (filter[value]) {
+            isApplied = true;
+            return;
+          }
+        });
+      });
+    }
+
     return isApplied;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [valueTextSearch?.refinementList]);
+  }, [valueTextSearch?.refinementList, settings, postFilter]);
 
   const onChangeText = (event: any) => {
     // debounceSearch(event.currentTarget.value);
@@ -184,11 +208,16 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     }
   };
   const disablePostFilter = useMemo(() => {
-    return settings.postFilterOption && props.allSearchResults?.hits.length > 0
-      ? false
-      : true;
+    if (settings.algolia.enabled) {
+      return settings.postFilterOption &&
+        props.allSearchResults?.hits.length > 0
+        ? false
+        : true;
+    } else {
+      return settings.postFilterOption && results?.length > 0 ? false : true;
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settings.postFilterOption, props.allSearchResults?.hits]);
+  }, [settings, results, props.allSearchResults?.hits]);
 
   return (
     <div style={{ width: '100%', background: '#fff' }}>

package/src/components/ImagePreviewMobile.tsx

@@ -16,14 +16,12 @@ import {
   updateStatusLoading,
 } from 'Store/search/Search';
 import { useHistory } from 'react-router-dom';
-import { connectSearchBox } from 'react-instantsearch-dom';
 import { find } from 'services/image';
 import { isEmpty } from 'lodash';
 
 function ImagePreviewMobileComponent({
   requestImage,
   imageSelection,
-  setImageSelection,
   debouncedOnImageSelectionChange,
   filteredRegions,
   showAdjustInfo,
@@ -32,14 +30,13 @@ function ImagePreviewMobileComponent({
 }: {
   requestImage: any;
   imageSelection: any;
-  setImageSelection: any;
+
   debouncedOnImageSelectionChange: any;
   filteredRegions: any;
   showAdjustInfoBasedOnConfidence: any;
   showAdjustInfo: any;
 }) {
   const { t } = useTranslation();
-  const { refine }: any = rest;
   const [editActive, setEditActive] = useState(false);
   const settings = useAppSelector(state => state.settings);
   const { preFilter } = useAppSelector(state => state.search);
@@ -60,12 +57,7 @@ function ImagePreviewMobileComponent({
       history.push('/');
     }
     dispatch(reset(''));
-    if (isAlgoliaEnabled) {
-      // not an ideal solution: fixes text search not working after removing image
-      setTimeout(() => {
-        refine(searchQuery);
-      }, 100);
-    }
+
     if (!isAlgoliaEnabled) {
       let payload: any;
       let filters: any[] = [];
@@ -127,7 +119,6 @@ function ImagePreviewMobileComponent({
               <Preview
                 key={requestImage?.id}
                 onSelectionChange={(r: RectCoords) => {
-                  setImageSelection(r);
                   debouncedOnImageSelectionChange(r);
                 }}
                 image={requestImage?.canvas}
@@ -147,6 +138,7 @@ function ImagePreviewMobileComponent({
                   setEditActive(true);
                 }}
                 showGrip={editActive}
+                draggable={editActive ? true : false}
               />
             </div>
           </Box>
@@ -234,7 +226,5 @@ function ImagePreviewMobileComponent({
     </Box>
   );
 }
-const ImagePreviewMobile = connectSearchBox<any>(
-  memo(ImagePreviewMobileComponent),
-);
+const ImagePreviewMobile = memo(ImagePreviewMobileComponent);
 export default ImagePreviewMobile;

package/src/components/Inquiry/InquiryBanner.tsx

@@ -52,7 +52,7 @@ function InquiryBanner({
           alignSelf: 'end',
           display: 'flex',
           alignItems: 'center',
-          marginRight: '12px',
+          // marginRight: '12px',
         }}
         className="rfq-box"
       >

package/src/components/Layout.tsx

@@ -3,7 +3,11 @@ import { ReactNode } from 'components/common';
 import React, { memo, useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
-import { onResetRequestImage, setUpdateSession } from 'Store/search/Search';
+import {
+  clearPostFilter,
+  onResetRequestImage,
+  setUpdateSession,
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from '../types';
 import './appMobile.scss';
@@ -22,6 +26,7 @@ import { translations } from 'translations';
 import { useAuth0 } from '@auth0/auth0-react';
 import InstantSearchProvider from './Provider/InstantSearchProvider';
 import PoweredByNyris from './PoweredByNyris';
+import { useQuery } from 'hooks/useQuery';
 
 declare var psol: any;
 
@@ -64,6 +69,9 @@ function Layout({ children }: ReactNode): JSX.Element {
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
   const history = useHistory();
+  const query = useQuery();
+  const searchQuery = query.get('query') || '';
+
   let isShowHeaderMobile =
     (isMobile && history.location?.pathname === '/result') ||
     history.location?.pathname === '/';
@@ -120,6 +128,16 @@ function Layout({ children }: ReactNode): JSX.Element {
     };
   }, []);
 
+  useEffect(() => {
+    if (!(search.requestImage && searchQuery)) {
+      dispatch(clearPostFilter());
+    }
+  }, [search.requestImage, searchQuery, dispatch, search.regions]);
+
+  useEffect(() => {
+    dispatch(clearPostFilter());
+  }, [dispatch, search.selectedRegion]);
+
   return (
     <div style={{ position: 'relative' }}>
       {loadingSearchAlgolia && (

package/src/components/MobilePostFilter.tsx

@@ -1,7 +1,10 @@
 import React, { memo } from 'react';
-import ExpandablePanelComponent from 'components/PanelResult';
+
+import PostFilterPanel from './PanelResult/PostFilter';
+import PostFilterPanelAlgolia from './PanelResult/PostFilterAlgolia';
 
 import { connectStateResults } from 'react-instantsearch-dom';
+import { useAppSelector } from 'Store/Store';
 
 interface Props {
   allSearchResults: any;
@@ -9,11 +12,17 @@ interface Props {
 }
 
 function MobilePostFilter(props: Props) {
+  const settings = useAppSelector(state => state.settings);
   return (
-    <ExpandablePanelComponent
-      disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
-      onApply={props.onApply}
-    />
+    <>
+      {settings.algolia.enabled && (
+        <PostFilterPanelAlgolia
+          disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
+          onApply={props.onApply}
+        />
+      )}
+      {!settings.algolia.enabled && <PostFilterPanel onApply={props.onApply} />}
+    </>
   );
 }