npm - @nyris/nyris-webapp - Versions diffs - 0.3.89 → 0.3.90 - Mend

@nyris/nyris-webapp 0.3.89 → 0.3.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/build/_headers +2 -0
package/build/asset-manifest.json +6 -6
package/build/index.html +1 -1
package/build/js/settings.example.js +17 -0
package/build/static/css/main.734b52e1.css +4 -0
package/build/static/css/main.734b52e1.css.map +1 -0
package/build/static/js/main.cede3ae1.js +3 -0
package/build/static/js/{main.ca8b95bc.js.map → main.cede3ae1.js.map} +1 -1
package/package.json +3 -3
package/public/_headers +2 -0
package/public/index.html +1 -1
package/public/js/settings.example.js +17 -0
package/src/App.tsx +5 -3
package/src/components/Cart.tsx +321 -0
package/src/components/CustomCameraDrawer.tsx +4 -22
package/src/components/DragDropFile.tsx +57 -38
package/src/components/ExperienceVisualSearch/ExperienceVisualSearch.tsx +6 -1
package/src/components/ExperienceVisualSearch/ExperienceVisualSearchTrigger.tsx +2 -2
package/src/components/GroundingSpecs.tsx +47 -0
package/src/components/Header.tsx +94 -93
package/src/components/HitsPerPage.tsx +4 -2
package/src/components/ImagePreview.tsx +64 -31
package/src/components/ImageUpload.tsx +247 -0
package/src/components/ItemSpecification.tsx +164 -0
package/src/components/MatchNotificationBanner.tsx +165 -0
package/src/components/PostFilter/PostFilter.tsx +22 -1
package/src/components/PostFilter/PostFilterComponent.tsx +59 -26
package/src/components/PostFilter/PostFilterFindApi.tsx +242 -0
package/src/components/PoweredBy.tsx +16 -0
package/src/components/PreFilter/PreFilter.tsx +77 -54
package/src/components/Product/Product.tsx +186 -28
package/src/components/Product/ProductAttribute.tsx +2 -2
package/src/components/Product/ProductDetailView.tsx +123 -18
package/src/components/Product/ProductDetailViewModal.tsx +3 -0
package/src/components/Product/ProductList.tsx +78 -8
package/src/components/SidePanel.tsx +212 -120
package/src/components/TextSearch.tsx +82 -203
package/src/components/Toaster.tsx +34 -15
package/src/helpers/ToastHelper.ts +6 -2
package/src/hooks/useCadSearch.ts +5 -0
package/src/hooks/useImageSearch.ts +102 -13
package/src/index.css +59 -0
package/src/layouts/AppLayout.tsx +16 -14
package/src/pages/Home.tsx +61 -13
package/src/pages/Result.tsx +287 -295
package/src/services/vizo.ts +161 -0
package/src/stores/request/Misc/misc.initialstate.ts +1 -0
package/src/stores/request/Misc/misc.slice.ts +1 -0
package/src/stores/request/filter/filter.initialState.ts +3 -0
package/src/stores/request/filter/filter.slice.ts +23 -0
package/src/stores/result/prodcuts/products.initialState.ts +4 -0
package/src/stores/result/prodcuts/products.slice.ts +15 -0
package/src/stores/types.ts +27 -1
package/src/stores/ui/loading/loading.initialState.ts +1 -0
package/src/stores/ui/loading/loading.slice.ts +4 -0
package/src/stores/ui/sidePanel/sidePanel.initialState.ts +5 -0
package/src/stores/ui/sidePanel/sidePanel.slice.ts +11 -0
package/src/stores/ui/uiStore.ts +4 -1
package/src/styles/Cart.scss +210 -0
package/src/styles/common.scss +10 -0
package/src/translations.ts +4 -4
package/src/types.ts +11 -3
package/src/utils/prepareImageList.ts +6 -5
package/src/utils/textSearchFilter.ts +203 -0
package/tailwind.config.js +1 -0
package/build/static/css/main.ba1c7479.css +0 -4
package/build/static/css/main.ba1c7479.css.map +0 -1
package/build/static/js/main.ca8b95bc.js +0 -3
package/src/components/Footer.tsx +0 -21
/package/build/static/js/{main.ca8b95bc.js.LICENSE.txt → main.cede3ae1.js.LICENSE.txt} +0 -0

package/package.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.89",
+  "version": "0.3.90",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
-    "@nyris/nyris-api": "^0.3.89",
-    "@nyris/nyris-react-components": "^0.3.89",
+    "@nyris/nyris-api": "^0.3.90",
+    "@nyris/nyris-react-components": "^0.3.90",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/public/_headers ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /*
2	+ X-Robots-Tag: noindex, nofollow

package/public/index.html CHANGED Viewed

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta name="robots" content="noindex, nofollow">
     <meta charset="utf-8" />
     <meta
       name="viewport"
@@ -22,7 +23,6 @@
         document.documentElement.style.setProperty('--secondary-color', window.settings.theme.secondaryColor);
     </script>
     <script>
-      window.settings.algolia.enabled = true;
       let vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty("--vh", `${vh}px`);

package/public/js/settings.example.js CHANGED Viewed

@@ -6,6 +6,7 @@ var settings = {
     supportEmail: '',
   },
   algolia: {
+    enabled: false,
     apiKey: '',
     appId: '',
     indexName: '',
@@ -23,6 +24,7 @@ var settings = {
   ],
   // Nyris - visual search
   apiKey: '',
+  aiApiKey: '',
   baseUrl: 'https://api.nyris.io',
   jpegQuality: 0.9,
   maxHeight: 1024,
@@ -31,6 +33,20 @@ var settings = {
   responseFormat: 'application/offers.complete+json',
   visualSearchFilterKey: '',
   shouldUseUserMetadata: '',
+  requestContentType: 'multipart/form-data', // use 'image/jpeg' for elastic search
+  textSearchScoring: {
+    sku: { exactMatch: 50, startsWith: 30 },
+    customIds: { exactMatch: 40, startsWith: 6, partial: 2 },
+    title: { exactMatch: 25, partial: 10 },
+    brand: { exactMatch: 15, startsWith: 6, partial: 2 },
+    links: { searchable: false },
+    'customIds.gtin': { searchable: false }, // for nested fields use dot notation
+    otherFields: { exactMatch: 8, startsWith: 6, partial: 2 },
+  },
+  vizo: {
+    groundingEnabled: false,
+    fallbackToElasticSearch: false,
+  },
   // UI - theme
   theme: {
     appBarLogoUrl: '',
@@ -79,6 +95,7 @@ var settings = {
     },
   ],
   // features
+  cart: false,
   showPoweredByNyris: '',
   postFilterOption: '',
   preFilterOption: '',

package/src/App.tsx CHANGED Viewed

@@ -7,8 +7,8 @@ import { InstantSearch } from 'react-instantsearch';
 function App() {
   const algoliaClient = algoliasearch(
-    window.settings.algolia.appId,
-    window.settings.algolia.apiKey,
+    window.settings.algolia.appId || '0',
+    window.settings.algolia.apiKey || '0',
   );
   return (
@@ -20,7 +20,9 @@ function App() {
           ...algoliaClient,
           search(requests: any) {
             if (
-              requests?.every(({ params }: any) => !params.query && !params.filters)
+              requests?.every(
+                ({ params }: any) => !params.query && !params.filters,
+              )
             ) {
               return Promise.resolve({
                 results: requests.map(() => ({

package/src/components/Cart.tsx ADDED Viewed

@@ -0,0 +1,321 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Tooltip from './Tooltip/TooltipComponent';
+import { twMerge } from 'tailwind-merge';
+import toast from 'react-hot-toast';
+import { Icon } from '@nyris/nyris-react-components';
+const Cart = () => {
+  const [isCartOpen, setIsCartOpen] = useState(false);
+  const [cartParts, setCartParts] = useState<any[]>([]);
+  const [amountOfParts, setAmountOfParts] = useState(0);
+  const [quantityEdits, setQuantityEdits] = useState<Record<string, string>>(
+    {},
+  );
+  const updateCount = () => {
+    const cart = sessionStorage.getItem('cart');
+    if (cart) {
+      const parsedCart = JSON.parse(cart);
+      setCartParts(parsedCart);
+      const amount = parsedCart.reduce(
+        (total: number, part: any) => total + (part.quantity || 1),
+        0,
+      );
+      setAmountOfParts(amount);
+    } else {
+      setCartParts([]);
+      setAmountOfParts(0);
+    }
+  };
+  useEffect(() => {
+    updateCount();
+    window.addEventListener('cart-updated', updateCount);
+    return () => {
+      window.removeEventListener('cart-updated', updateCount);
+    };
+  }, []);
+  const onToggleCart = (isOpen: boolean) => {
+    setIsCartOpen(isOpen);
+    if (isOpen) {
+      document.body.classList.add('overflow-hidden');
+    } else {
+      document.body.classList.remove('overflow-hidden');
+    }
+  };
+  const clearSessionProducts = () => {
+    sessionStorage.removeItem('cart');
+    window.dispatchEvent(new Event('cart-updated'));
+  };
+  const removePartBySku = (skuToRemove: string): void => {
+    const updatedCart = cartParts.filter((p: any) => p.sku !== skuToRemove);
+    if (!updatedCart.length) {
+      setIsCartOpen(false);
+    }
+    sessionStorage.setItem('cart', JSON.stringify(updatedCart));
+    window.dispatchEvent(new Event('cart-updated'));
+  };
+  const updateQuantity = (sku: string, delta: number) => {
+    const updated = cartParts
+      .map((part: any) => {
+        if (part.sku !== sku) return part;
+        const newQuantity = (part.quantity || 1) + delta;
+        return newQuantity > 0 ? { ...part, quantity: newQuantity } : null;
+      })
+      .filter(Boolean);
+    setQuantityEdits(prev => {
+      if (!Object.prototype.hasOwnProperty.call(prev, sku)) return prev;
+      const next = { ...prev };
+      delete next[sku];
+      return next;
+    });
+    setCartParts(updated);
+    if (!updated.length) {
+      setIsCartOpen(false);
+    }
+    sessionStorage.setItem('cart', JSON.stringify(updated));
+    window.dispatchEvent(new Event('cart-updated'));
+  };
+  const getQuantityDisplayValue = (sku: string, quantity: number) =>
+    quantityEdits[sku] ?? String(quantity || 1);
+  const generateCSVContent = (): string => {
+    const rows = [['Product Sku', 'Product Name', 'Quantity']];
+    cartParts.forEach((part: any) => {
+      rows.push([part.sku, part.title, (part.quantity || 1).toString()]);
+    });
+    return rows.map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
+  };
+  const downloadCSV = () => {
+    const csvContent = generateCSVContent();
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', 'products.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    // clearSessionProducts();
+    toast.success('Your data has been downloaded.');
+  };
+  return (
+    <>
+      <Tooltip
+        content="The basket is currently empty"
+        disabled={!!amountOfParts}
+      >
+        <button
+          className={twMerge(
+            'relative flex items-center justify-center rounded-2xl border border-solid border-[#DDDEE7]',
+            'h-8 w-8',
+          )}
+          style={{
+            backgroundColor:
+              amountOfParts > 0
+                ? window.settings.theme.primaryColor
+                : '#FAFAFA',
+          }}
+          onClick={() => onToggleCart(true)}
+        >
+          {amountOfParts ? (
+            <div
+              className={twMerge(
+                'absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border-2 border-white border-solid text-white',
+                'text-[9px]',
+              )}
+              style={{
+                backgroundColor: window.settings.theme.primaryColor,
+              }}
+            >
+              {amountOfParts}
+            </div>
+          ) : (
+            ''
+          )}
+          <Icon
+            name="cart"
+            className={twMerge(
+              amountOfParts > 0 ? 'fill-white text-white' : 'text-black',
+            )}
+          />
+        </button>
+      </Tooltip>
+      {isCartOpen &&
+        createPortal(
+          <div className={twMerge('fixed inset-0 z-[51]')}>
+            <div
+              className="absolute inset-0 bg-black/20"
+              onClick={() => onToggleCart(false)}
+            />
+            <div
+              className={twMerge(
+                'absolute right-0 flex h-full w-[410px] max-w-full flex-col bg-transparent',
+              )}
+            >
+              <div className="flex h-full  max-w-full flex-col bg-white">
+                <div className="flex h-[52px] items-center justify-between px-4 py-2 border-b border-solid border-[#DDDEE7]">
+                  <div className="text-xl font-semibold">
+                    Your cart ({amountOfParts} items)
+                  </div>
+                  <div className="flex items-center">
+                    {amountOfParts > 0 ? (
+                      <button
+                        type="button"
+                        className="mr-4 flex items-center gap-1 rounded border border-[#E31B5D] px-2 py-1 text-[9px] font-normal text-[#E31B5D]"
+                        onClick={() => {
+                          clearSessionProducts();
+                          setIsCartOpen(false);
+                        }}
+                      >
+                        <Icon name="trash" />
+                        Clear All
+                      </button>
+                    ) : (
+                      ''
+                    )}
+                    <button className="p-0" onClick={() => onToggleCart(false)}>
+                      <Icon name="close" className="h-5 w-5 fill-[#55566B]" />
+                    </button>
+                  </div>
+                </div>
+                <div className="overflow-x-auto p-4 flex flex-col gap-2.5">
+                  {amountOfParts === 0 ? (
+                    <div className="flex h-full w-full flex-col items-center justify-center">
+                      <div className="text-base text-[#CACAD1]">
+                        No items have been added
+                      </div>
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                  {cartParts.map((part: any, i: number) => (
+                    <div
+                      key={part.sku + i}
+                      className={twMerge(
+                        'flex h-fit w-full items-center justify-between rounded-lg border border-solid border-[#DDDEE7] bg-[#F3F4F8]',
+                        'p-2',
+                        'gap-2',
+                      )}
+                    >
+                      <div className="flex flex-1 items-center">
+                        <img
+                          src={
+                            !window.settings.algolia.enabled
+                              ? part['image']
+                              : part['image(main_similarity)']
+                                ? part['image(main_similarity)']
+                                : part['main_image_link']
+                          }
+                          key={part.sku + i}
+                          alt={`product ${i}`}
+                          className="mr-2 h-[50px] w-[50px] bg-white object-contain"
+                        />
+                        <div>
+                          <div className="max-w-[175px] break-words text-[9px] font-normal">
+                            {part.sku}
+                          </div>
+                          <div className="max-w-[175px] break-words text-xs font-semibold">
+                            {part.title}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center">
+                        <div className="ml-auto flex items-center gap-4 pr-4">
+                          <button
+                            className="h-4 w-4 rounded-full bg-[#FAFAFA]"
+                            onClick={() => updateQuantity(part.sku, -1)}
+                          >
+                            <Icon name="minus" width="16" height="16" />
+                          </button>
+                          <input
+                            className="flex h-[22px] w-[22px] items-center justify-center rounded border border-solid border-[#DDDEE7] bg-white text-center"
+                            value={getQuantityDisplayValue(
+                              part.sku,
+                              part.quantity,
+                            )}
+                            onChange={e => {
+                              const rawValue = e.target.value;
+                              if (rawValue === '') {
+                                setQuantityEdits(prev => ({
+                                  ...prev,
+                                  [part.sku]: '',
+                                }));
+                                return;
+                              }
+                              if (!/^[0-9]+$/.test(rawValue)) return;
+                              const newValue = Number(rawValue);
+                              if (newValue < 1) return;
+                              setQuantityEdits(prev => ({
+                                ...prev,
+                                [part.sku]: rawValue,
+                              }));
+                              updateQuantity(
+                                part.sku,
+                                newValue - (part.quantity || 0),
+                              );
+                            }}
+                            onBlur={() => {
+                              if (quantityEdits[part.sku] === '') {
+                                setQuantityEdits(prev => {
+                                  const updated = { ...prev };
+                                  delete updated[part.sku];
+                                  return updated;
+                                });
+                              }
+                            }}
+                          />
+                          <button
+                            className="h-4 w-4 rounded-full bg-[#FAFAFA] flex items-center justify-center"
+                            onClick={() => updateQuantity(part.sku, 1)}
+                          >
+                            <Icon name="plus" width="10" height="10" />
+                          </button>
+                        </div>
+                        <button
+                          className="h-7 w-7 rounded bg-[#FFE5EF4D] p-1.5"
+                          onClick={() => removePartBySku(part.sku)}
+                        >
+                          <Icon name="trash" color="#E31B5D" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                  {amountOfParts > 0 ? (
+                    <button
+                      className="flex h-12 w-full items-center justify-center rounded-lg bg-[#3E36DC] text-base font-semibold text-white"
+                      type="button"
+                      onClick={downloadCSV}
+                    >
+                      <Icon name="download" />
+                      <span className="ml-2">Download all data</span>
+                    </button>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+};
+export default Cart;

package/src/components/CustomCameraDrawer.tsx CHANGED Viewed

@@ -19,7 +19,6 @@ import {
 import { useCadSearch } from 'hooks/useCadSearch';
 import { isCadFile } from '@nyris/nyris-api';
 import { clone } from 'lodash';
-import { getFilters } from '../services/filter';
 import { useTranslation } from 'react-i18next';
 interface Props {
@@ -40,6 +39,7 @@ function CustomCamera(props: Props) {
   const { cadSearch } = useCadSearch();
   const { t } = useTranslation();
+  const preFilterList = useRequestStore(state => state.preFilterList);
   const requestImages = useRequestStore(state => state.requestImages);
   const specifications = useRequestStore(state => state.specifications);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
@@ -53,27 +53,12 @@ function CustomCamera(props: Props) {
   const [capturedImages, setCapturedImages] = useState<HTMLCanvasElement[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [imageCaptureHelpModal, setImageCaptureHelpModal] = useState(false);
-  const [resultFilter, setResultFilter] = useState<any>([]);
   const videoConstraints = {
     width: 1080,
     aspectRatio: 1.11111,
   };
-  const getPreFilters = async () => {
-    getFilters(1000, settings)
-      .then(res => {
-        setResultFilter(res);
-      })
-      .catch((e: any) => {
-        console.log('err getDataFilterDesktop', e);
-      });
-  }
-  useEffect(() => {
-    getPreFilters()
-  }, []);
   const handlerFindImage = async (image: any) => {
     if (location.pathname !== '/result') {
       navigate('/result');
@@ -94,7 +79,7 @@ function CustomCamera(props: Props) {
       showFeedback: true,
     }).then((singleImageResp) => {
       const specificationPrefilter = singleImageResp.image_analysis?.specification?.prefilter_value || null;
-      const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
+      const hasPrefilter = preFilterList.filter((filter: any) => filter.values.includes(specificationPrefilter));
       if (specificationPrefilter) {
         setRequestImages([]);
         setShowNotMatchedError(false);
@@ -113,7 +98,7 @@ function CustomCamera(props: Props) {
           }, 5000);
         }
         if (!hasPrefilter.length && window.settings.preFilterOption) {
-          setSpecifications(clone({...singleImageResp.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
+          setSpecifications(clone({...singleImageResp.image_analysis.specification, specificationPrefilter}));
           setPreFilter({});
           setAlgoliaFilter('');
           setShowLoading(false);
@@ -127,16 +112,13 @@ function CustomCamera(props: Props) {
           }, 6000);
         }
       } else {
-        if (specifications?.is_nameplate) {
-          setSpecifications({...specifications, prefilter_value: '', specificationPrefilter: ''});
-        } else {
+        if (!specifications?.is_nameplate) {
           setSpecifications({...specifications, is_nameplate: false});
         }
         setShowLoading(false);
         handleClose();
       }
     });
   };
   const handleClose = () => {

package/src/components/DragDropFile.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,6 @@ import { isCadFile } from '@nyris/nyris-api';
 import Hint from './Hint';
 import { clone } from 'lodash';
 import useRequestStore from '../stores/request/requestStore';
-import { getFilters } from '../services/filter';
 interface Props {
   onChangeLoading?: any;
@@ -26,34 +25,22 @@ function DragDropFile(props: Props) {
   const { singleImageSearch } = useImageSearch();
   const { cadSearch } = useCadSearch();
-  const [resultFilter, setResultFilter] = useState<any>([]);
+  const preFilterList = useRequestStore(state => state.preFilterList);
   const specifications = useRequestStore(state => state.specifications);
   const setRequestImages = useRequestStore(state => state.setRequestImages);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
-  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
-  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
+  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 setShowLoading = useRequestStore(state => state.setShowLoading);
   const setNameplateImage = useRequestStore(state => state.setNameplateImage);
-  const getPreFilters = async () => {
-    getFilters(1000, window.settings)
-      .then(res => {
-        setResultFilter(res);
-      })
-      .catch((e: any) => {
-        console.log('err getDataFilterDesktop', e);
-      });
-  }
-  useEffect(() => {
-    getPreFilters()
-  }, []);
   const handleUpload = (file: File) => {
     if (isCadFile(file)) {
       cadSearch({
         file: file,
@@ -70,47 +57,73 @@ function DragDropFile(props: Props) {
       image: file,
       settings: window.settings,
       showFeedback: true,
-    }).then((singleImageResp) => {
-      const specificationPrefilter = singleImageResp.image_analysis?.specification?.prefilter_value || null;
-      const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
+      clearPostFilter: true,
+      newSearch: true,
+    }).then(singleImageResp => {
+      const specificationPrefilter =
+        singleImageResp.image_analysis?.specification?.prefilter_value || null;
+      const hasPrefilter = preFilterList.filter((filter: any) =>
+        filter.values.includes(specificationPrefilter),
+      );
       if (specificationPrefilter) {
         setRequestImages([]);
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
-          setSpecifications(clone(singleImageResp.image_analysis.specification));
+          setSpecifications(
+            clone(singleImageResp.image_analysis.specification),
+          );
           setNameplateImage(file);
-          setPreFilter({[singleImageResp.image_analysis?.specification?.prefilter_value]: true});
-          setAlgoliaFilter(`${window.settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`);
+          setPreFilter({
+            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+              true,
+          });
+          setAlgoliaFilter(
+            `${window.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() }));
+            setNameplateNotificationText(
+              t('We have successfully defined the search criteria', {
+                prefilter_value: specificationPrefilter,
+                preFilterTitle:
+                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+              }),
+            );
           }, 1000);
           setTimeout(() => {
             setNameplateNotificationText('');
           }, 6000);
         }
         if (!hasPrefilter.length && window.settings.preFilterOption) {
-          setSpecifications(clone({...singleImageResp.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
+          setSpecifications(
+            clone({
+              ...singleImageResp.image_analysis.specification,
+              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() }));
+            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});
+        if (!specifications?.is_nameplate) {
+          setSpecifications({ ...specifications, is_nameplate: false });
         }
         setShowLoading(false);
         navigate('/result');
@@ -131,9 +144,11 @@ function DragDropFile(props: Props) {
         }
       >
         {isLoading && <Loading />}
         <div
-          className={'relative flex flex-col items-center justify-center w-full'}
+          className={
+            'relative flex flex-col items-center justify-center w-full'
+          }
           {...dragProps}
         >
           <div
@@ -146,7 +161,9 @@ function DragDropFile(props: Props) {
             ])}
           >
             <div className="" style={{ fontSize: 14 }}>
-              <span className="font-bold text-sm pr-1">{t('Drag and drop')}</span>
+              <span className="font-bold text-sm pr-1">
+                {t('Drag and drop')}
+              </span>
               {t('an image here')}
             </div>
             <Hint />
@@ -164,7 +181,9 @@ function DragDropFile(props: Props) {
               id="select_file"
               className="absolute z-[-1] opacity-0"
               placeholder="Choose photo"
-              accept={'.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,.pdf,image/*'}
+              accept={
+                '.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,.pdf,image/*'
+              }
             />
           </div>
         </div>