@nyris/nyris-webapp 0.3.86 → 0.3.88

package/src/components/Inquiry/InquiryModal.tsx

@@ -13,6 +13,7 @@ import { AutosizeTextarea } from 'components/AutosizeTextArea';
 import Tooltip from 'components/Tooltip/TooltipComponent';
 
 import { useTranslation } from 'react-i18next';
+import { createImage } from '../../services/visualSearch';
 interface Props {
   requestImage: any;
   selectedRegion: any;
@@ -44,6 +45,8 @@ export default function InquiryModal({
 }: Props) {
   const settings = window.settings;
   const preFilter = useRequestStore(state => state.preFilter);
+  const specifications = useRequestStore(state => state.specifications);
+  const nameplateImage = useRequestStore(state => state.nameplateImage);
 
   const preFilterValues = Object.keys(preFilter) as string[];
 
@@ -60,6 +63,25 @@ export default function InquiryModal({
   );
   const { t } = useTranslation();
 
+  useEffect(() => {
+    function omitKeys(obj: any, keys: string[]) {
+      return Object.fromEntries(
+        Object.entries(obj).filter(([key]) => !keys.includes(key))
+      );
+    }
+    const omittedSpecification = omitKeys(specifications, ['is_nameplate', 'prefilter_value']);
+    setInformation(
+      Object
+        .entries(omittedSpecification)
+        .reduce((acc, [k, v]) =>
+            v == null || (typeof v === 'string' && v.trim() === '')
+              ? acc
+              : `${acc}${k}: ${v}\n`,
+          ''
+        )
+      );
+  }, [specifications]);
+
   useEffect(() => emailjs.init('SMGihPnuEGcYLm0V4'), []);
   useEffect(() => {
     if (email)
@@ -72,19 +94,28 @@ export default function InquiryModal({
     const croppedImage = requestImage
       ? getCroppedCanvas(requestImage, selectedRegion)
       : null;
+    const nameplateImageCanvas = nameplateImage ? await createImage(nameplateImage) : null;
+    
     const serviceId = 'service_zfsxshi';
     setIsInquiryModalOpen(false);
     const templateId = settings.support?.emailTemplateId;
     if (templateId) {
+      const body = !specifications?.is_nameplate ? {
+        email_id: email.trim(),
+        information_text: information ? information : '<not specified>',
+        request_image: croppedImage?.toDataURL(),
+        prefilter_values: preFilterValues?.length
+          ? preFilterValues.join(', ')
+          : '<not specified>',
+      } : {
+        email_id: email.trim(),
+        information_text: information,
+        request_image: croppedImage?.toDataURL() || '',
+        typeplate_image: nameplateImageCanvas?.toDataURL() || '',
+        prefilter_values: specifications.prefilter_value,
+      };
       try {
-        await emailjs.send(serviceId, templateId, {
-          email_id: email.trim(),
-          information_text: information ? information : '<not specified>',
-          request_image: croppedImage?.toDataURL(),
-          prefilter_values: preFilterValues?.length
-            ? preFilterValues.join(', ')
-            : '<not specified>',
-        });
+        await emailjs.send(serviceId, templateId, body);
         ToastHelper.success(t('Request sent successfully'));
       } catch (error) {
         toast(
@@ -260,7 +291,7 @@ export default function InquiryModal({
                       color: '#2B2C46',
                     }}
                   >
-                    {settings.support.prefilterFieldName}
+                    {settings.preFilterTitle}
                   </p>
                   <Tooltip
                     content={t(

package/src/components/PreFilter/PreFilter.tsx

@@ -10,6 +10,8 @@ import { truncateString } from 'utils/truncateString';
 import { twMerge } from 'tailwind-merge';
 import Tooltip from 'components/Tooltip/TooltipComponent';
 import { Skeleton } from 'components/Skeleton';
+import { useNavigate } from 'react-router';
+import useResultStore from "../../stores/result/resultStore";
 
 interface Props {
   handleClose?: any;
@@ -34,10 +36,14 @@ const PreFilterComponent = (props: Props) => {
 
   const setPreFilter = useRequestStore(state => state.setPreFilter);
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const specification = useRequestStore(state => state.specifications);
+  const setSpecifications = useRequestStore(state => state.setSpecifications);
+  const setImageAnalysis = useResultStore(state => state.setImageAnalysis);
 
   const [keyFilter, setKeyFilter] = useState<Record<string, boolean>>(
     keyFilterState || {},
   );
+  const navigate = useNavigate();
 
   const selectedFilter = useMemo(
     () =>
@@ -72,6 +78,7 @@ const PreFilterComponent = (props: Props) => {
         }, {});
         setResultFilter(newResult);
         setColumns(Object.keys(newResult).length);
+        
       })
       .catch((e: any) => {
         console.log('err getDataFilterDesktop', e);
@@ -124,6 +131,13 @@ const PreFilterComponent = (props: Props) => {
         : '';
     setAlgoliaFilter(filter);
 
+    if (preFilterValues?.length && preFilterValues[0] !== specification?.prefilter_value) {
+      setSpecifications({ prefilter_value: preFilterValues?.join(', ') || ''});
+    }
+    if (specification?.is_nameplate) {
+      setImageAnalysis({});
+    }
+
     handleClose();
 
     if (requestImages.length === 0) {

package/src/components/Product/Product.tsx

@@ -280,7 +280,7 @@ function Product(props: Props) {
               'justify-between',
               'flex',
               'flex-col',
-              'bg-[#FAFAFA]',
+              'bg-[#fff]',
               'flex-grow',
               'z-10',
               'pt-2',
@@ -416,7 +416,7 @@ function Product(props: Props) {
                     background:
                       settings.secondaryCTAButton?.secondaryCTAButtonColor ||
                       '#2B2C46',
-                    borderRadius: 2,
+                    borderRadius: 4,
                     padding: '0px 8px',
                     marginBottom: settings.CTAButton?.CTAButton ? 8 : 0,
                     display: 'flex',
@@ -493,7 +493,7 @@ function Product(props: Props) {
                     background:
                       settings.CTAButton?.CTAButtonColor ||
                       settings.theme?.primaryColor,
-                    borderRadius: 2,
+                    borderRadius: 4,
                     padding: '0px 8px',
                     display: 'flex',
                     justifyItems: 'center',

package/src/components/Product/ProductDetailView.tsx

@@ -169,9 +169,7 @@ function ProductDetailView(props: Props) {
       </div>
 
       <div
-        className={`overflow-y-auto max-h-[90svh] px-4 pb-4  ${
-          settings.simpleCardView ? 'bg-[#FaFafa]' : 'bg-[#f3f3f5]'
-        } mt-1`}
+        className={`overflow-y-auto max-h-[90svh] px-4 pb-4 'bg-[#fff] mt-1`}
       >
         {settings.simpleCardView ? (
           <div className="info-container">
@@ -186,7 +184,7 @@ function ProductDetailView(props: Props) {
         ) : (
           <div className="box-content flex flex-col bg-[#F3F3F5] mt-4">
             <div className="box-top">
-              <div className="bg-[#F3F3F5] flex flex-col justify-between">
+              <div className="bg-[#fff] flex flex-col justify-between">
                 <div className="gap-1.5 flex flex-wrap w-full">
                   <div className="w-full">
                     {settings.mainTitle && (

package/src/components/Product/ProductList.tsx

@@ -6,7 +6,6 @@ import useRequestStore from 'stores/request/requestStore';
 import useUiStore from 'stores/ui/uiStore';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import { useCurrentRefinements } from 'react-instantsearch';
 import { filterProducts } from 'utils/specificationFilter';
 
 interface Props {
@@ -36,10 +35,6 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
     state => state.specificationFilter,
   );
 
-  const specificationFilteredProducts = useResultStore(
-    state => state.specificationFilteredProducts,
-  );
-
   const getUrlToCanvasFile = async (url: string) => {
     setQuery('');
     setValueInput('');

package/src/components/SidePanel.tsx

@@ -6,18 +6,9 @@ import PostFilterComponent from './PostFilter/PostFilterComponent';
 import useResultStore from 'stores/result/resultStore';
 import { Icon } from '@nyris/nyris-react-components';
 import Tooltip from './Tooltip/TooltipComponent';
-import { filterProducts } from 'utils/specificationFilter';
-import { useEffect } from 'react';
 
 export default function SidePanel({ className }: { className?: string }) {
   const requestImages = useRequestStore(state => state.requestImages);
-  const setSpecificationFilteredProducts = useResultStore(
-    state => state.setSpecificationFilteredProducts,
-  );
-
-  const productsFromAlgolia = useResultStore(
-    state => state.productsFromAlgolia,
-  );
 
   const specificationFilter = useRequestStore(
     state => state.specificationFilter,
@@ -66,7 +57,7 @@ export default function SidePanel({ className }: { className?: string }) {
         {requestImages[0] && <ImagePreview />}
       </div>
 
-      {(imageAnalysis?.imageDescription ||
+      {window.settings.showImageDetails && (imageAnalysis?.imageDescription ||
         Object.keys(imageAnalysis?.specification || {}).length > 0) && (
         <div className="self-stretch p-4 bg-[#f3f3f5] rounded inline-flex flex-col justify-start items-start gap-1.5 mt-4 mx-4 ">
           {imageAnalysis?.imageDescription !== 'No description available' && (
@@ -84,90 +75,92 @@ export default function SidePanel({ className }: { className?: string }) {
             Identified Attributes
           </div>
 
-          {Object.keys(imageAnalysis?.specification || {}).map(key => {
-            const value = imageAnalysis?.specification[key];
-            if (!value) {
-              return null;
-            }
-            return (
-              <div
-                key={key}
-                className="flex justify-between w-full gap-2 items-center"
-              >
-                <div className="self-stretch inline-flex justify-start items-center gap-1.5">
-                  <div className="justify-start text-black text-xs font-semibold">
-                    {key}:
-                  </div>
-                  <Tooltip
-                    content={
-                      specificationFilter[key]
-                        ? 'Filter applied. Clear to choose a different value.'
-                        : 'Click to apply as a search filter.'
-                    }
-                    delayDuration={1000}
-                    disabled={!value}
-                  >
-                    <div
-                      className={twMerge(
-                        `px-1 py-1 bg-[#e4e3ff] rounded-[1px] flex justify-center items-center gap-1.5`,
-                        'border border-solid border-transparent hover:border-[#3E36DC]',
-                        'cursor-pointer',
+          {Object.keys(imageAnalysis?.specification || {})
+            .filter((key) => (key !== 'is_nameplate' && key !== 'prefilter_value'))
+            .map(key => {
+              const value = imageAnalysis?.specification[key];
+              if (!value) {
+                return null;
+              }
+              return (
+                <div
+                  key={key}
+                  className="flex justify-between w-full gap-2 items-center"
+                >
+                  <div className="self-stretch inline-flex justify-start items-center gap-1.5">
+                    <div className="justify-start text-black text-xs font-semibold">
+                      {key}:
+                    </div>
+                    <Tooltip
+                      content={
                         specificationFilter[key]
-                          ? 'border-[#3E36DC] bg-[#3E36DC] '
-                          : '',
-                      )}
-                      onClick={() => {
-                        if (!value) {
-                          return;
-                        }
-                        const setSpecificationFilter =
-                          useRequestStore.getState().setSpecificationFilter;
-
-                        const setSpecificationFilteredProducts =
-                          useResultStore.getState()
-                            .setSpecificationFilteredProducts;
-
-                        if (specificationFilter[key]) {
-                          setSpecificationFilter({});
-                          setSpecificationFilteredProducts([]);
-                          // setProducts(results);
-                        } else {
-                          setSpecificationFilter({
-                            [key]: value,
-                          });
-                        }
-                      }}
+                          ? 'Filter applied. Clear to choose a different value.'
+                          : 'Click to apply as a search filter.'
+                      }
+                      delayDuration={1000}
+                      disabled={!value}
                     >
                       <div
                         className={twMerge(
-                          'justify-start text-[#3e36dc] text-[10px] leading-none px-0.5',
-                          'font-normal hover:font-bold hover:px-0',
+                          `px-1 py-1 bg-[#e4e3ff] rounded-[1px] flex justify-center items-center gap-1.5`,
+                          'border border-solid border-transparent hover:border-[#3E36DC]',
+                          'cursor-pointer',
                           specificationFilter[key]
-                            ? 'font-bold text-white hover:px-0.5'
+                            ? 'border-[#3E36DC] bg-[#3E36DC] '
                             : '',
-                          'max-line-1',
                         )}
+                        onClick={() => {
+                          if (!value) {
+                            return;
+                          }
+                          const setSpecificationFilter =
+                            useRequestStore.getState().setSpecificationFilter;
+  
+                          const setSpecificationFilteredProducts =
+                            useResultStore.getState()
+                              .setSpecificationFilteredProducts;
+  
+                          if (specificationFilter[key]) {
+                            setSpecificationFilter({});
+                            setSpecificationFilteredProducts([]);
+                            // setProducts(results);
+                          } else {
+                            setSpecificationFilter({
+                              [key]: value,
+                            });
+                          }
+                        }}
                       >
-                        {imageAnalysis?.specification[key] || 'N/A'}
+                        <div
+                          className={twMerge(
+                            'justify-start text-[#3e36dc] text-[10px] leading-none px-0.5',
+                            'font-normal hover:font-bold hover:px-0',
+                            specificationFilter[key]
+                              ? 'font-bold text-white hover:px-0.5'
+                              : '',
+                            'max-line-1',
+                          )}
+                        >
+                          {imageAnalysis?.specification[key] || 'N/A'}
+                        </div>
                       </div>
-                    </div>
-                  </Tooltip>
-                </div>
-                <div
-                  onClick={() => {
-                    navigator.clipboard.writeText(
-                      imageAnalysis?.specification[key] || '',
-                    );
-                  }}
-                >
-                  <Icon
-                    name="copy"
-                    className="text-[#AAABB5] w-[12px] h-[12px] hover:text-[#3E36DC] cursor-pointer"
-                  />
+                    </Tooltip>
+                  </div>
+                  <div
+                    onClick={() => {
+                      navigator.clipboard.writeText(
+                        imageAnalysis?.specification[key] || '',
+                      );
+                    }}
+                  >
+                    <Icon
+                      name="copy"
+                      className="text-[#AAABB5] w-[12px] h-[12px] hover:text-[#3E36DC] cursor-pointer"
+                    />
+                  </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
         </div>
       )}
       {showPostFilter && (

package/src/components/TextSearch.tsx

@@ -1,6 +1,5 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-
-import { isEmpty, debounce } from 'lodash';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isEmpty, debounce, clone } from 'lodash';
 import { twMerge } from 'tailwind-merge';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useLocation, useNavigate } from 'react-router';
@@ -15,6 +14,8 @@ import PreFilterModal from './PreFilter/PreFilterModal';
 import useRequestStore from 'stores/request/requestStore';
 import Tooltip from './Tooltip/TooltipComponent';
 import UploadDisclaimer from './UploadDisclaimer';
+import { getFilters } from '../services/filter';
+import { useMediaQuery } from 'react-responsive';
 
 function TextSearch({
   className,
@@ -27,12 +28,15 @@ function TextSearch({
   const user = useAuth0().user;
 
   const focusInp: any = useRef<HTMLDivElement | null>(null);
+  const iconRef = useRef<HTMLDivElement>(null);
 
   const { t } = useTranslation();
 
   const location = useLocation();
   const navigate = useNavigate();
 
+  const [resultFilter, setResultFilter] = useState<any>([]);
+
   const preFilter = useRequestStore(state => state.preFilter);
   const requestImages = useRequestStore(state => state.requestImages);
   const setQuery = useRequestStore(state => state.setQuery);
@@ -40,8 +44,19 @@ function TextSearch({
   const valueInput = useRequestStore(state => state.valueInput);
   const setValueInput = useRequestStore(state => state.setValueInput);
   const setMetaFilter = useRequestStore(state => state.setMetaFilter);
+  const specifications = useRequestStore(state => state.specifications);
+  const nameplateNotificationText = useRequestStore(state => state.nameplateNotificationText);
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   const regions = useRequestStore(state => state.regions);
+  const setRequestImages = useRequestStore(state => state.setRequestImages);
+  const setSpecifications = useRequestStore(state => state.setSpecifications);
+  const setShowLoading = useRequestStore(state => state.setShowLoading);
+  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
+  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
+  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const setPreFilter = useRequestStore(state => state.setPreFilter);
+  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
 
   const [isOpenModalFilterDesktop, setToggleModalFilterDesktop] =
     useState<boolean>(false);
@@ -84,7 +99,7 @@ function TextSearch({
   const searchOrRedirect = useCallback(
     debounce((value: any) => {
       setQuery(value);
-      if (requestImages.length === 0 && value === '') {
+      if (requestImages.length === 0 && value === '' && !specifications) {
         navigate('/');
         return;
       }
@@ -109,32 +124,91 @@ function TextSearch({
     setValueInput(event.currentTarget.value);
     searchOrRedirect(event.currentTarget.value);
 
-    if (event.currentTarget.value === '') {
+    if (event.currentTarget.value === '' && !specifications) {
       setValueInput('');
       setQuery('');
     }
   };
 
   const { cadSearch } = useCadSearch();
+  
+  const getPreFilters = async () => {
+    getFilters(1000, settings)
+      .then(res => {
+        setResultFilter(res);
+      })
+      .catch((e: any) => {
+        console.log('err getDataFilterDesktop', e);
+      });
+  }
+
+  useEffect(() => {
+    getPreFilters()
+  }, []);
 
   const handleUpload = (files: File[]) => {
     setValueInput('');
     setQuery('');
 
-    navigate('/result');
-
     if (isCadFile(files[0])) {
       cadSearch({ file: files[0], settings, newSearch: true }).then(res => {});
 
       return;
     }
 
+    setShowLoading(true);
+
     singleImageSearch({
       image: files[0],
       settings: window.settings,
       showFeedback: true,
       newSearch: true,
-    }).then(() => {});
+    }).then((singleImageResp) => {
+      const specificationPrefilter = singleImageResp.image_analysis?.specification?.prefilter_value || null;
+      const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
+      if (specificationPrefilter) {
+        setRequestImages([]);
+        setShowNotMatchedError(false);
+        if (hasPrefilter.length) {
+          setSpecifications(clone(singleImageResp.image_analysis.specification));
+          setNameplateImage(files[0]);
+          setPreFilter({[singleImageResp.image_analysis?.specification?.prefilter_value]: true});
+          setAlgoliaFilter(`${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`);
+
+          setShowLoading(false);
+          navigate('/result');
+
+          setTimeout(() => {
+            setNameplateNotificationText(t('We have successfully defined the search criteria', { prefilter_value: specificationPrefilter, preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+          }, 1000);
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 6000);
+        }
+        if (!hasPrefilter.length && showPreFilter) {
+          setSpecifications(clone({...singleImageResp.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
+          navigate('/result');
+          setPreFilter({});
+          setAlgoliaFilter('');
+          setShowLoading(false);
+          setShowNotMatchedError(true);
+          setTimeout(() => {
+            setNameplateNotificationText(t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+          }, 1000);
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 6000);
+        }
+      } else {
+        if (specifications?.is_nameplate) {
+          setSpecifications({...specifications, prefilter_value: '', specificationPrefilter: ''});
+        } else {
+          setSpecifications({...specifications, is_nameplate: false});
+        }
+        setShowLoading(false);
+        navigate('/result');
+      }
+    });
   };
 
   return (
@@ -159,7 +233,6 @@ function TextSearch({
           'flex',
           'h-full',
           'justify-between',
-          'overflow-hidden',
           'p-0',
           'rounded-3xl',
           'w-full',
@@ -207,6 +280,7 @@ function TextSearch({
                   }
                 >
                   <div
+                    ref={iconRef}
                     className={twMerge(
                       'p-2 desktop:p-3',
                       location.pathname === '/result' && 'desktop:p-2',
@@ -228,6 +302,82 @@ function TextSearch({
                   </div>
                 </Tooltip>
               )}
+              {nameplateNotificationText && (
+                <div
+                  style={{
+                    position: 'fixed',
+                    backgroundColor:
+                      nameplateNotificationText !== t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() })
+                        ? '#E4E3FF' : '#FFDBB3',
+                    border: '1px solid',
+                    borderColor: nameplateNotificationText !== t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#3E36DC' : '#FF8800',
+                    fontSize: 13,
+                    borderRadius: 24,
+                    color: '#545987',
+                    padding: '8px 16px',
+                    margin: 'auto',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: 8,
+                    zIndex: 999999,
+                    top: !isMobile ?  60 : 'unset',
+                    bottom: isMobile ? 76 : 'unset',
+                    maxWidth: 510,
+                    width: !isMobile ? 'unset' : '90%',
+                    left: !isMobile ? 'unset' : 0,
+                  }}
+                >
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: !isMobile ? -7 : 'unset',
+                      bottom: isMobile ? -7 : 'unset',
+                      left: !isMobile ? '50%' : 30,
+                      transform: 'translateX(-50%)',
+                      width: 0,
+                      height: 0,
+                      borderLeft: '7px solid transparent',
+                      borderRight: '7px solid transparent',
+                      borderTop: isMobile
+                        ? `7px solid ${
+                          nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
+                            { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#3E36DC' : '#FF8800'
+                          }`
+                        : 'unset',
+                      borderBottom: !isMobile
+                        ? `7px solid ${
+                        nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
+                          { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#3E36DC' : '#FF8800'
+                        }`
+                        : 'unset',
+                    }}
+                  />
+
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: !isMobile ? -6 : 'unset',
+                      bottom: isMobile ? -6 : 'unset',
+                      left: !isMobile ? '50%' : 30,
+                      transform: 'translateX(-50%)',
+                      width: 0,
+                      height: 0,
+                      borderLeft: '6px solid transparent',
+                      borderRight: '6px solid transparent',
+                      borderTop: isMobile
+                        ? `6px solid ${nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
+                          { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#E4E3FF' : '#FFDBB3'}`
+                        : 'unset',
+                      borderBottom: !isMobile
+                        ? `6px solid ${nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
+                          { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#E4E3FF' : '#FFDBB3'}`
+                        : 'unset',
+                    }}
+                  />
+                  {nameplateNotificationText}
+                </div>
+              )}
               {!showPreFilter && (
                 <div className="p-2 hidden desktop:block">
                   <Icon name="search" width={16} height={16} />
@@ -311,6 +461,7 @@ function TextSearch({
                     }
                     return;
                   }
+                  setSpecifications(null);
                   setQuery('');
                   setValueInput('');
                   navigate('/');
@@ -356,6 +507,7 @@ function TextSearch({
                 }
                 onClick={e => {
                   if (!showDisclaimerDisabled) {
+                    // disclaimer
                     setShowDisclaimer(true);
                   } else if (onCameraClick) {
                     onCameraClick();