@nyris/nyris-webapp 0.3.35 → 0.3.36

package/build/static/media/error.48b946a9.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.000191037C8.68453 -0.0079651 7.38053 0.245119 6.16361 0.744768C4.94669 1.24442 3.84108 1.98069 2.91088 2.91088C1.98069 3.84108 1.24442 4.94669 0.744768 6.16361C0.245119 7.38053 -0.0079651 8.68453 0.000191037 10C-0.0079651 11.3155 0.245119 12.6195 0.744768 13.8364C1.24442 15.0533 1.98069 16.1589 2.91088 17.0891C3.84108 18.0193 4.94669 18.7556 6.16361 19.2552C7.38053 19.7549 8.68453 20.008 10 19.9998C11.3155 20.008 12.6195 19.7549 13.8364 19.2552C15.0533 18.7556 16.1589 18.0193 17.0891 17.0891C18.0193 16.1589 18.7556 15.0533 19.2552 13.8364C19.7549 12.6195 20.008 11.3155 19.9998 10C20.008 8.68453 19.7549 7.38053 19.2552 6.16361C18.7556 4.94669 18.0193 3.84108 17.0891 2.91088C16.1589 1.98069 15.0533 1.24442 13.8364 0.744768C12.6195 0.245119 11.3155 -0.0079651 10 0.000191037ZM13.8891 14.9999L5.0001 6.11129L6.11129 5.0001L14.9999 13.8891L13.8891 14.9999Z" fill="#E31B5D"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.35",
+  "version": "0.3.36",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -12,8 +12,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.35",
-    "@nyris/nyris-react-components": "^0.3.35",
+    "@nyris/nyris-api": "^0.3.36",
+    "@nyris/nyris-react-components": "^0.3.36",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/public/index.html

@@ -107,6 +107,19 @@
     <script async src="https://www.google-analytics.com/analytics.js"></script>
     <!-- End Google Analytics -->
 
+    <!-- Piwik Analytics -->
+    <script type="text/javascript">
+      (function(window, document, dataLayerName, id) {
+      window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
+      function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString();f="; SameSite=Strict"}document.cookie=a+"="+b+d+f+"; path=/"}
+      var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
+      var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
+      tags.async=!0,tags.src="https://marium.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
+      !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
+      })(window, document, 'dataLayer', '94dae4cc-0947-4fee-b515-08fc58c1e7bc');
+      </script>
+    <!-- End Piwik Analytics -->
+
     <script
       src="https://863a167094994e54bc22149eafac1699.js.ubembed.com"
       async

package/src/Store/search/Search.ts

@@ -149,7 +149,7 @@ export const searchSlice = createSlice({
         imageThumbSearchInput: '',
         textSearchInputMobile: '',
         isShowModalDetailItemMobile: false,
-        keyFilter: state.keyFilter || '',
+        preFilter: state.preFilter || {},
         preFilterDropdown: false,
         imageCaptureHelpModal: false,
       };
@@ -229,11 +229,11 @@ export const searchSlice = createSlice({
         isShowModalDetailItemMobile: payload,
       };
     },
-    setUpdateKeyFilterDesktop: (state, data: PayloadAction<string>) => {
+    setPreFilter: (state, data: PayloadAction<Record<string, boolean>>) => {
       const { payload } = data;
       return {
         ...state,
-        keyFilter: payload,
+        preFilter: payload,
       };
     },
     setPreFilterDropdown: (state, data: PayloadAction<boolean>) => {
@@ -277,7 +277,7 @@ export const {
   setRequestImage,
   setSearchResults,
   setSelectedRegion,
-  setUpdateKeyFilterDesktop,
+  setPreFilter,
   setUpdateSession,
   updateResultChangePosition,
   updateResults,

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

@@ -11,7 +11,7 @@ export const initialState: SearchState = {
   filters: [],
   imageThumbSearchInput: '',
   isShowModalDetailItemMobile: false,
-  keyFilter: '',
+  preFilter: {},
   loadingSearchAlgolia: false,
   preFilterDropdown: false,
   imageCaptureHelpModal: false,

package/src/Store/search/types.ts

@@ -18,7 +18,7 @@ export interface SearchState {
   filters: any[];
   imageThumbSearchInput?: any;
   isShowModalDetailItemMobile?: boolean;
-  keyFilter?: string;
+  preFilter: Record<string, boolean>;
   loadingSearchAlgolia: boolean;
   preFilterDropdown?: boolean;
   imageCaptureHelpModal?: boolean;

package/src/common/assets/icons/arrow_left.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/src/common/assets/icons/arrow_right.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/src/common/assets/icons/error.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.000191037C8.68453 -0.0079651 7.38053 0.245119 6.16361 0.744768C4.94669 1.24442 3.84108 1.98069 2.91088 2.91088C1.98069 3.84108 1.24442 4.94669 0.744768 6.16361C0.245119 7.38053 -0.0079651 8.68453 0.000191037 10C-0.0079651 11.3155 0.245119 12.6195 0.744768 13.8364C1.24442 15.0533 1.98069 16.1589 2.91088 17.0891C3.84108 18.0193 4.94669 18.7556 6.16361 19.2552C7.38053 19.7549 8.68453 20.008 10 19.9998C11.3155 20.008 12.6195 19.7549 13.8364 19.2552C15.0533 18.7556 16.1589 18.0193 17.0891 17.0891C18.0193 16.1589 18.7556 15.0533 19.2552 13.8364C19.7549 12.6195 20.008 11.3155 19.9998 10C20.008 8.68453 19.7549 7.38053 19.2552 6.16361C18.7556 4.94669 18.0193 3.84108 17.0891 2.91088C16.1589 1.98069 15.0533 1.24442 13.8364 0.744768C12.6195 0.245119 11.3155 -0.0079651 10 0.000191037ZM13.8891 14.9999L5.0001 6.11129L6.11129 5.0001L14.9999 13.8891L13.8891 14.9999Z" fill="#E31B5D"/>
+</svg>

package/src/components/AppMobile.tsx

@@ -0,0 +1,111 @@
+import React, { ReactNode, useState } from 'react';
+import HeaderMobile from './HeaderMobile';
+import { Box } from '@material-ui/core';
+import {
+  setPreFilterDropdown,
+  setImageCaptureHelpModal,
+} from 'Store/search/Search';
+import { isUndefined } from 'lodash';
+import ImageCaptureHelpModal from './ImageCaptureHelpModal';
+import MobilePostFilter from './MobilePostFilter';
+import PreFilterComponent from './pre-filter';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { AppState } from 'types';
+import FooterMobile from './FooterMobile';
+
+function AppMobile({ children }: { children: ReactNode }) {
+  const dispatch = useAppDispatch();
+  const { search } = useAppSelector<AppState>((state: any) => state);
+  const { preFilterDropdown, imageCaptureHelpModal } = search;
+  const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="wrap-mobile">
+        <div className="box-header-mobile-main">
+          <HeaderMobile
+            onToggleFilterMobile={(show: boolean) => {
+              setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
+            }}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexGrow: 1,
+            flexDirection: 'column',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+          }}
+        >
+          {children}
+        </div>
+        <div
+          className="footer-wrap-main"
+          style={{
+            zIndex: 999,
+          }}
+        >
+          <FooterMobile />
+        </div>
+      </div>
+      <Box
+        className={`box-filter ${isOpenFilter ? 'open' : 'close'} `}
+        position={'absolute'}
+        style={{
+          top: '0px',
+          height: '100%',
+          width: '100%',
+        }}
+      >
+        <MobilePostFilter
+          onApply={() => {
+            setOpenFilter(!isOpenFilter);
+          }}
+        />
+      </Box>
+
+      {preFilterDropdown && (
+        <Box
+          className={`box-filter open`}
+          position={'absolute'}
+          style={{ top: '0px', height: '100%', width: '100%', zIndex: 999 }}
+        >
+          <div style={{ width: '100%' }} className={'wrap-filter-desktop'}>
+            <div className={'bg-white box-filter-desktop isMobile'}>
+              <PreFilterComponent
+                handleClose={() =>
+                  dispatch(setPreFilterDropdown(!preFilterDropdown))
+                }
+              />
+            </div>
+          </div>
+        </Box>
+      )}
+
+      {imageCaptureHelpModal && (
+        <Box
+          className={`box-filter open`}
+          position={'absolute'}
+          style={{
+            top: '0px',
+            width: '100%',
+            zIndex: 100,
+          }}
+        >
+          <div style={{ width: '100%' }} className={'wrap-filter-desktop'}>
+            <div className={'bg-white box-filter-desktop isMobile'}>
+              <ImageCaptureHelpModal
+                handleClose={() =>
+                  dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal))
+                }
+              />
+            </div>
+          </div>
+        </Box>
+      )}
+    </>
+  );
+}
+
+export default AppMobile;

package/src/components/DragDropFile.tsx

@@ -19,6 +19,7 @@ import { useState } from 'react';
 import IconUpload from 'common/assets/images/Icon_Upload.svg';
 import { RectCoords } from '@nyris/nyris-api';
 import { useTranslation } from 'react-i18next';
+import { isEmpty } from 'lodash';
 
 interface Props {
   acceptTypes: any;
@@ -33,7 +34,7 @@ function DragDropFile(props: Props) {
   const searchState = useAppSelector(state => state);
   const {
     settings,
-    search: { keyFilter },
+    search: { preFilter },
   } = searchState;
   const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
   const { t } = useTranslation();
@@ -50,10 +51,10 @@ function DragDropFile(props: Props) {
       dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
       let image = await createImage(fs[0]);
       dispatch(setRequestImage(image));
-      const preFilter = [
+      const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: [`${keyFilter}`],
+          values: Object.keys(preFilter) as string[],
         },
       ];
       let region: RectCoords | undefined;
@@ -68,7 +69,7 @@ function DragDropFile(props: Props) {
         image,
         settings,
         region,
-        filters: keyFilter ? preFilter : undefined,
+        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
       }).then((res: any) => {
         res?.results.map((item: any) => {
           filters.push({

package/src/components/FooterMobile.tsx

@@ -6,7 +6,11 @@ import { ReactComponent as Home } from 'common/assets/icons/home.svg';
 import { NavLink, useHistory } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
-import { setImageCaptureHelpModal } from 'Store/search/Search';
+import {
+  reset,
+  setImageCaptureHelpModal,
+  setPreFilter,
+} from 'Store/search/Search';
 
 interface Props {
   onLoadingMobile?: any;
@@ -30,7 +34,7 @@ function FooterMobile(props: Props): JSX.Element {
         alignItems={'center'}
         height={'100%'}
         justifyContent={'space-between'}
-        style={{ paddingLeft: '40px', paddingRight: '40px' }}
+        style={{ paddingLeft: '40px', paddingRight: '40px', height: '64px' }}
       >
         <NavLink
           style={{
@@ -49,6 +53,8 @@ function FooterMobile(props: Props): JSX.Element {
           to={'/'}
           className="nav-link p-0 menu-children rounded-0"
           onClick={() => {
+            dispatch(reset(''));
+            dispatch(setPreFilter({}));
             dispatch(setImageCaptureHelpModal(false));
           }}
         >

package/src/components/Header.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './common.scss';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { reset } from 'Store/search/Search';
+import { reset, setPreFilter } from 'Store/search/Search';
 
 function Header(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -15,6 +15,7 @@ function Header(): JSX.Element {
         style={{ lineHeight: 0, paddingLeft: '10px' }}
         onClick={() => {
           dispatch(reset(''));
+          dispatch(setPreFilter({}));
         }}
       >
         <img

package/src/components/HeaderMobile.tsx

@@ -16,6 +16,7 @@ import {
   reset,
   updateValueTextSearchMobile,
   setPreFilterDropdown,
+  setPreFilter,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
@@ -39,7 +40,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   const {
     imageThumbSearchInput,
     textSearchInputMobile,
-    keyFilter,
+    preFilter,
     preFilterDropdown,
     valueTextSearch,
   } = search;
@@ -141,6 +142,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
             style={{ lineHeight: 0, paddingLeft: '10px' }}
             onClick={() => {
               dispatch(reset(''));
+              dispatch(setPreFilter({}));
             }}
           >
             <img
@@ -194,7 +196,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                   <div
                     className="icon-hover"
                     style={{
-                      ...(keyFilter
+                      ...(!isEmpty(preFilter)
                         ? {
                             backgroundColor: `${settings.theme?.primaryColor}`,
                           }
@@ -209,7 +211,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                 {!settings.preFilterOption && (
                   <IconSearch width={16} height={16} />
                 )}
-                {keyFilter && (
+                {!isEmpty(preFilter) && (
                   <div
                     style={{
                       position: 'absolute',

package/src/components/ImageCaptureHelpModal.tsx

@@ -9,7 +9,13 @@ interface Props {
 
 function ImageCaptureHelpModal({ handleClose }: Props) {
   return (
-    <Box style={{ paddingLeft: '24px', paddingRight: '24px' }}>
+    <Box
+      style={{
+        paddingLeft: '24px',
+        paddingRight: '24px',
+        paddingBottom: '24px',
+      }}
+    >
       <Box
         display={'flex'}
         justifyContent={'end'}

package/src/components/ImagePreviewMobile.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Box, Typography } from '@material-ui/core';
+import { RectCoords } from '@nyris/nyris-api';
+import { Preview } from '@nyris/nyris-react-components';
+import { DEFAULT_REGION } from '../constants';
+import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+import { useTranslation } from 'react-i18next';
+
+function ImagePreviewMobile({
+  requestImage,
+  imageSelection,
+  setImageSelection,
+  debouncedOnImageSelectionChange,
+  filteredRegions,
+  showAdjustInfo,
+  showAdjustInfoBasedOnConfidence,
+}: {
+  requestImage: any;
+  imageSelection: any;
+  setImageSelection: any;
+  debouncedOnImageSelectionChange: any;
+  filteredRegions: any;
+  showAdjustInfoBasedOnConfidence: any;
+  showAdjustInfo: any;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      className="col-left"
+      style={{
+        backgroundColor: '#AAABB5',
+        marginBottom: '15px',
+      }}
+    >
+      {
+        <Box className="box-preview">
+          <Box className="preview-item" style={{ backgroundColor: 'white' }}>
+            <Preview
+              key={requestImage?.id}
+              onSelectionChange={(r: RectCoords) => {
+                setImageSelection(r);
+                debouncedOnImageSelectionChange(r);
+              }}
+              image={requestImage?.canvas}
+              selection={imageSelection || DEFAULT_REGION}
+              regions={filteredRegions}
+              maxWidth={240}
+              maxHeight={240}
+              dotColor={'#FBD914'}
+              minCropWidth={60}
+              minCropHeight={60}
+              rounded={false}
+            />
+          </Box>
+          {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
+            <Box
+              className="box-title_col-left"
+              alignItems="center"
+              style={{
+                backgroundColor: '#3E36DC',
+                display: 'flex',
+                columnGap: '6px',
+                padding: '5px',
+                width: 'fit-content',
+              }}
+            >
+              <IconInfo color="white" />
+              <Typography
+                style={{
+                  fontSize: 10,
+                  color: '#fff',
+                }}
+              >
+                {showAdjustInfo
+                  ? t('Crop the image for better results')
+                  : 'Crop the image for better results'}
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      }
+    </Box>
+  );
+}
+
+export default ImagePreviewMobile;

package/src/components/Layout.tsx

@@ -9,8 +9,6 @@ import { useHistory } from 'react-router-dom';
 import {
   changeValueTextSearch,
   onResetRequestImage,
-  setImageCaptureHelpModal,
-  setPreFilterDropdown,
   setUpdateSession,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
@@ -20,21 +18,14 @@ import './common.scss';
 import FooterMobile from './FooterMobile';
 import HeaderMobile from './HeaderMobile';
 import Header from './Header';
-import PreFilterComponent from 'components/pre-filter';
 import { createSessionByApi } from 'services/session';
 import { isUndefined } from 'lodash';
-import ImageCaptureHelpModal from './ImageCaptureHelpModal';
-import MobilePostFilter from './MobilePostFilter';
+import AppMobile from './AppMobile';
 
 function Layout({ children }: ReactNode): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings, search } = useAppSelector<AppState>((state: any) => state);
-  const {
-    valueTextSearch,
-    loadingSearchAlgolia,
-    preFilterDropdown,
-    imageCaptureHelpModal,
-  } = search;
+  const { valueTextSearch, loadingSearchAlgolia } = search;
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
@@ -102,7 +93,7 @@ function Layout({ children }: ReactNode): JSX.Element {
   }, [apiKey, appId, indexName]);
 
   return (
-    <Box position={'relative'} className="wrap-mobile">
+    <div style={{ position: 'relative' }}>
       {loadingSearchAlgolia && (
         <Box className="box-wrap-loading" style={{ zIndex: 99999999 }}>
           <Box className="loadingSpinCT" style={{ top: 0, bottom: 0 }}>
@@ -120,93 +111,42 @@ function Layout({ children }: ReactNode): JSX.Element {
           }
         }}
       >
-        <div className={`layout-main-${classNameBoxVersion}`}>
-          <div
-            className={
-              !isMobile
-                ? `box-header-${classNameBoxVersion}-main`
-                : isShowHeaderMobile
-                ? `box-header-${classNameBoxVersion}-main`
-                : ''
-            }
-            style={{
-              ...(classNameBoxVersion === 'newVersion'
-                ? { background: settings.theme?.headerColor }
-                : {}),
-            }}
-          >
-            <HeaderApp
-              onToggleFilterMobile={(show: boolean) => {
-                setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
-              }}
-            />
-          </div>
-
-          <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
-            {children}
-          </div>
-          {isMobile && (
-            <div className="footer-wrap-main">
-              <FooterApp />
-            </div>
-          )}
-        </div>
-        {isMobile && (
-          <Box
-            className={`box-fillter ${isOpenFilter ? 'open' : 'close'} `}
-            position={'absolute'}
-            style={{ top: isOpenFilter ? '0px' : '', height: '100%' }}
-          >
-            <MobilePostFilter
-              onApply={() => {
-                setOpenFilter(!isOpenFilter);
-              }}
-            />
-          </Box>
-        )}
-        {isMobile && preFilterDropdown && (
-          <Box
-            className={`box-fillter open`}
-            position={'absolute'}
-            style={{ top: '0px', height: '100%' }}
-          >
+        {isMobile && <AppMobile>{children}</AppMobile>}
+        {!isMobile && (
+          <div className={`layout-main-${classNameBoxVersion}`}>
             <div
-              style={{ width: !isMobile ? '90%' : '100%' }}
-              className={'wrap-filter-desktop'}
+              className={
+                !isMobile
+                  ? `box-header-${classNameBoxVersion}-main`
+                  : isShowHeaderMobile
+                  ? `box-header-${classNameBoxVersion}-main`
+                  : ''
+              }
+              style={{
+                ...(classNameBoxVersion === 'newVersion'
+                  ? { background: settings.theme?.headerColor }
+                  : {}),
+              }}
             >
-              <div className={'bg-white box-filter-desktop isMobile'}>
-                <PreFilterComponent
-                  handleClose={() =>
-                    dispatch(setPreFilterDropdown(!preFilterDropdown))
-                  }
-                />
-              </div>
+              <HeaderApp
+                onToggleFilterMobile={(show: boolean) => {
+                  setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
+                }}
+              />
             </div>
-          </Box>
-        )}
 
-        {isMobile && imageCaptureHelpModal && (
-          <Box
-            className={`box-fillter open`}
-            position={'absolute'}
-            style={{ top: '0px', height: 'calc(100% - 64px)' }}
-          >
-            <div
-              style={{ width: !isMobile ? '90%' : '100%' }}
-              className={'wrap-filter-desktop'}
-            >
-              <div className={'bg-white box-filter-desktop isMobile'}>
-                <ImageCaptureHelpModal
-                  handleClose={() =>
-                    dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal))
-                  }
-                />
-              </div>
+            <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
+              {children}
             </div>
-          </Box>
+            {isMobile && (
+              <div className="footer-wrap-main">
+                <FooterApp />
+              </div>
+            )}
+          </div>
         )}
       </InstantSearch>
-    </Box>
+    </div>
   );
 }
 

package/src/components/ProductList/index.tsx

@@ -3,6 +3,7 @@ import ItemResult from 'components/results/ItemResult';
 import { groupBy, uniqueId } from 'lodash';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { connectStateResults } from 'react-instantsearch-dom';
+import { useMediaQuery } from 'react-responsive';
 import { useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
 
@@ -30,6 +31,7 @@ function ProductListComponent({
   const [hitGroups, setHitGroups] = useState<any>({});
   const [itemShowDefault, setItemShowDefault] = useState<any[]>([]);
   const [algoliaRequest, setAlgoliaRequest] = useState(false);
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   useEffect(() => {
     if (isSearchStalled) {
@@ -134,7 +136,7 @@ function ProductListComponent({
     }
     return itemShowDefault.map((hit: any, i: number) => {
       return (
-        <Box key={i}>
+        <Box key={i} style={{ height: 'fit-content' }}>
           <ItemResult
             dataItem={hit}
             indexItem={i}
@@ -169,6 +171,7 @@ function ProductListComponent({
     isSearchStalled,
     algoliaRequest,
     loadingSearchAlgolia,
+    isMobile,
   ]);
 
   return <>{renderItem}</>;