@nyris/nyris-webapp 0.3.57 → 0.3.59

package/build/static/media/camera_simple.bff4194954bbb5f4bc33bd99014a93e8.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="M16 13.7139C16 14.0295 15.7442 14.2853 15.4286 14.2853H0.571429C0.255837 14.2853 0 14.0295 0 13.7139V3.99958C0 3.68399 0.255837 3.42815 0.571429 3.42815H4.26286L5.24 1.97101C5.34513 1.81136 5.52313 1.71486 5.71429 1.71387H10.2857C10.4769 1.71486 10.6549 1.81136 10.76 1.97101L11.7371 3.42815H15.4286C15.7442 3.42815 16 3.68399 16 3.99958V13.7139ZM1.14286 13.1424H14.8571V4.57101H11.4286C11.2374 4.57002 11.0594 4.47352 10.9543 4.31387L9.97714 2.85672H6.02286L5.04571 4.31387C4.94058 4.47352 4.76258 4.57002 4.57143 4.57101H1.14286V13.1424ZM8 11.9996C6.10645 11.9996 4.57143 10.4646 4.57143 8.57101C4.57143 6.67746 6.10645 5.14244 8 5.14244C9.89355 5.14244 11.4286 6.67746 11.4286 8.57101C11.4286 10.4646 9.89355 11.9996 8 11.9996ZM8 6.2853C6.73764 6.2853 5.71429 7.30865 5.71429 8.57101C5.71429 9.83337 6.73764 10.8567 8 10.8567C9.26237 10.8567 10.2857 9.83337 10.2857 8.57101C10.2857 7.30865 9.26237 6.2853 8 6.2853Z" fill="currentColor"/>
+</svg>

package/build/static/media/collpase.50dae91fff891c46b10dfc281344d0ef.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.48039 1.48039C1.74571 1.21508 2.17586 1.21508 2.44118 1.48039L5.5451 4.58431C5.67096 4.71018 5.88618 4.62127 5.88652 4.44328L5.88908 3.11787C5.88981 2.74393 6.19315 2.44118 6.56709 2.44118C6.94154 2.44118 7.2451 2.74473 7.2451 3.11918V6.2451C7.2451 6.79738 6.79738 7.2451 6.2451 7.2451H3.11918C2.74473 7.2451 2.44118 6.94154 2.44118 6.56709C2.44118 6.19315 2.74393 5.88981 3.11787 5.88908L4.44328 5.88652C4.62127 5.88618 4.71018 5.67096 4.58431 5.5451L1.48039 2.44118C1.21508 2.17586 1.21508 1.74571 1.48039 1.48039Z" fill="#55566B"/>
+<path d="M3.11918 8.7549C2.74473 8.7549 2.44118 9.05846 2.44118 9.43291C2.44118 9.80685 2.74393 10.1102 3.11787 10.1109L4.44328 10.1135C4.62127 10.1138 4.71018 10.329 4.58431 10.4549L1.48039 13.5588C1.21508 13.8241 1.21508 14.2543 1.48039 14.5196C1.74571 14.7849 2.17586 14.7849 2.44118 14.5196L5.5451 11.4157C5.67096 11.2898 5.88618 11.3787 5.88652 11.5567L5.88908 12.8821C5.88981 13.2561 6.19315 13.5588 6.56709 13.5588C6.94154 13.5588 7.2451 13.2553 7.2451 12.8808V9.7549C7.2451 9.20262 6.79738 8.7549 6.2451 8.7549H3.11918Z" fill="#55566B"/>
+<path d="M14.5196 1.48039C14.2543 1.21508 13.8241 1.21508 13.5588 1.48039L10.4549 4.58431C10.329 4.71018 10.1138 4.62127 10.1135 4.44328L10.1109 3.11787C10.1102 2.74393 9.80685 2.44118 9.43291 2.44118C9.05846 2.44118 8.7549 2.74473 8.7549 3.11918V6.2451C8.7549 6.79738 9.20262 7.2451 9.7549 7.2451H12.8808C13.2553 7.2451 13.5588 6.94154 13.5588 6.56709C13.5588 6.19315 13.2561 5.88981 12.8821 5.88908L11.5567 5.88652C11.3787 5.88618 11.2898 5.67096 11.4157 5.5451L14.5196 2.44118C14.7849 2.17586 14.7849 1.74571 14.5196 1.48039Z" fill="#55566B"/>
+<path d="M14.5196 14.5196C14.2543 14.7849 13.8241 14.7849 13.5588 14.5196L10.4549 11.4157C10.329 11.2898 10.1138 11.3787 10.1135 11.5567L10.1109 12.8821C10.1102 13.2561 9.80685 13.5588 9.43291 13.5588C9.05846 13.5588 8.7549 13.2553 8.7549 12.8808V9.7549C8.7549 9.20262 9.20262 8.7549 9.7549 8.7549H12.8808C13.2553 8.7549 13.5588 9.05846 13.5588 9.43291C13.5588 9.80685 13.2561 10.1102 12.8821 10.1109L11.5567 10.1135C11.3787 10.1138 11.2898 10.329 11.4157 10.4549L14.5196 13.5588C14.7849 13.8241 14.7849 14.2543 14.5196 14.5196Z" fill="#55566B"/>
+</svg>

package/build/static/media/crop.0676ebbbdc1375ed67e32bba890ce941.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="M0.710142 5.53825C1.10221 5.53825 1.42028 5.22014 1.42028 4.82804V2.69216C1.42028 1.99087 1.99071 1.4204 2.69193 1.4204H4.87323C5.26529 1.4204 5.58337 1.1023 5.58337 0.710201C5.58337 0.318104 5.26529 0 4.87323 0H2.69193C1.20757 0 0 1.20767 0 2.69216V4.82804C0 5.22014 0.318078 5.53825 0.710142 5.53825ZM11.1268 0H13.3081C14.7925 0 16 1.20767 16 2.69216V4.82804C16 5.22014 15.682 5.53825 15.2899 5.53825C14.8978 5.53825 14.5798 5.22014 14.5798 4.82804V2.69216C14.5798 1.99087 14.0093 1.4204 13.3081 1.4204H11.1268C10.7347 1.4204 10.4167 1.1023 10.4167 0.710201C10.4167 0.318104 10.7347 0 11.1268 0ZM14.5798 11.1716C14.5798 10.7795 14.8978 10.4614 15.2899 10.4614C15.682 10.4614 16 10.7795 16 11.1716V13.3078C16 14.7923 14.7925 16 13.3081 16H11.1268C10.7347 16 10.4167 15.6819 10.4167 15.2898C10.4167 14.8977 10.7347 14.5796 11.1268 14.5796H13.3081C14.0093 14.5796 14.5798 14.0091 14.5798 13.3078V11.1716ZM2.69193 14.5796H4.87323C5.26529 14.5796 5.58337 14.8977 5.58337 15.2898C5.58337 15.6819 5.26529 16 4.87323 16H2.69193C1.20757 16 0 14.7923 0 13.3078V11.1716C0 10.7792 0.318078 10.4614 0.710142 10.4614C1.10221 10.4614 1.42028 10.7795 1.42028 11.1716V13.3078C1.42028 14.0091 1.99071 14.5796 2.69193 14.5796Z" fill="currentColor"/>
+</svg>

package/build/static/media/{download.8007f7c72e2080a9ffa96fa63d480dcf.svg → download.a8452bc23334e9f8e53fe1225742d216.svg}

@@ -1,3 +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="M12.5055 6.45389C12.7282 6.23157 13.0888 6.23169 13.3113 6.45415C13.5338 6.67672 13.5338 7.03757 13.3113 7.26013L8.70707 11.8643C8.31655 12.2548 7.68338 12.2548 7.29286 11.8643L2.68867 7.26013C2.4661 7.03757 2.4661 6.67672 2.68867 6.45415C2.91113 6.23169 3.27178 6.23157 3.49438 6.45389L5.7219 8.67847C6.35205 9.30779 7.42854 8.86148 7.42854 7.97089V0.571428C7.42854 0.255837 7.68437 0 7.99996 0C8.31556 0 8.57139 0.255838 8.57139 0.571429V7.97089C8.57139 8.86148 9.64788 9.30779 10.278 8.67847L12.5055 6.45389ZM12.7143 14.8571C13.2665 14.8571 13.7143 14.4094 13.7143 13.8571V13.1429C13.7143 12.8273 13.9701 12.5714 14.2857 12.5714C14.6013 12.5714 14.8571 12.8273 14.8571 13.1429V14.8571C14.8571 15.4883 14.3454 16 13.7143 16H2.28568C1.6545 16 1.14282 15.4883 1.14282 14.8571V13.1429C1.14282 12.8273 1.39866 12.5714 1.71425 12.5714C2.02984 12.5714 2.28568 12.8273 2.28568 13.1429V13.8571C2.28568 14.4094 2.7334 14.8571 3.28568 14.8571H12.7143Z" fill="#2B2C46"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5055 6.45389C12.7282 6.23157 13.0888 6.23169 13.3113 6.45415C13.5338 6.67672 13.5338 7.03757 13.3113 7.26013L8.70707 11.8643C8.31655 12.2548 7.68338 12.2548 7.29286 11.8643L2.68867 7.26013C2.4661 7.03757 2.4661 6.67672 2.68867 6.45415C2.91113 6.23169 3.27178 6.23157 3.49438 6.45389L5.7219 8.67847C6.35205 9.30779 7.42854 8.86148 7.42854 7.97089V0.571428C7.42854 0.255837 7.68437 0 7.99996 0C8.31556 0 8.57139 0.255838 8.57139 0.571429V7.97089C8.57139 8.86148 9.64788 9.30779 10.278 8.67847L12.5055 6.45389ZM12.7143 14.8571C13.2665 14.8571 13.7143 14.4094 13.7143 13.8571V13.1429C13.7143 12.8273 13.9701 12.5714 14.2857 12.5714C14.6013 12.5714 14.8571 12.8273 14.8571 13.1429V14.8571C14.8571 15.4883 14.3454 16 13.7143 16H2.28568C1.6545 16 1.14282 15.4883 1.14282 14.8571V13.1429C1.14282 12.8273 1.39866 12.5714 1.71425 12.5714C2.02984 12.5714 2.28568 12.8273 2.28568 13.1429V13.8571C2.28568 14.4094 2.7334 14.8571 3.28568 14.8571H12.7143Z" fill="currentColor"/>
 </svg>

package/build/static/media/gallery.15d1f3308921480a8c9d96d9a77c9966.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="M1.33333 0H14.6667C15.0203 0 15.3594 0.138515 15.6095 0.385075C15.8595 0.631636 16 0.966042 16 1.31473V14.462C16 14.8107 15.8595 15.1451 15.6095 15.3917C15.3594 15.6382 15.0203 15.7767 14.6667 15.7767H1.33333C0.979711 15.7767 0.640573 15.6382 0.390524 15.3917C0.140476 15.1451 0 14.8107 0 14.462V1.31473C0 0.966042 0.140476 0.631636 0.390524 0.385075C0.640573 0.138515 0.979711 0 1.33333 0ZM1.33333 10.5178V14.462H14.6667V13.1473L11.3333 9.86047L10.2733 10.9057C10.0235 11.1505 9.68558 11.288 9.33333 11.288C8.98109 11.288 8.64315 11.1505 8.39333 10.9057L4.66667 7.23101L1.33333 10.5178ZM12.2733 8.92701L14.6667 11.2869V1.31473H1.33333V8.65749L3.72667 6.29755C3.97648 6.05268 4.31442 5.91524 4.66667 5.91524C5.01891 5.91524 5.35685 6.05268 5.60667 6.29755L9.33333 9.97222L10.3933 8.92701C10.6432 8.68214 10.9811 8.5447 11.3333 8.5447C11.6856 8.5447 12.0235 8.68214 12.2733 8.92701ZM11.1111 6.24074C10.7822 6.45744 10.3956 6.57309 10 6.57309C9.46957 6.57309 8.96086 6.36532 8.58579 5.99548C8.21071 5.62564 8 5.12403 8 4.601C8 4.21096 8.1173 3.82967 8.33706 3.50536C8.55682 3.18106 8.86918 2.92829 9.23463 2.77902C9.60009 2.62976 10.0022 2.59071 10.3902 2.6668C10.7781 2.74289 11.1345 2.93072 11.4142 3.20652C11.6939 3.48232 11.8844 3.83372 11.9616 4.21627C12.0387 4.59881 11.9991 4.99533 11.8478 5.35569C11.6964 5.71604 11.44 6.02404 11.1111 6.24074ZM10.3704 4.05442C10.2607 3.98219 10.1319 3.94364 10 3.94364C9.82319 3.94364 9.65362 4.01289 9.52859 4.13617C9.40357 4.25945 9.33333 4.42666 9.33333 4.601C9.33333 4.73101 9.37243 4.85811 9.44569 4.96621C9.51894 5.07432 9.62306 5.15857 9.74488 5.20833C9.8667 5.25808 10.0007 5.2711 10.1301 5.24574C10.2594 5.22037 10.3782 5.15776 10.4714 5.06583C10.5646 4.9739 10.6281 4.85676 10.6539 4.72925C10.6796 4.60173 10.6664 4.46955 10.6159 4.34944C10.5655 4.22932 10.48 4.12666 10.3704 4.05442Z" fill="currentColor"/>
+</svg>

package/build/static/media/{logout.b544fcd2969edf431a1e998333119834.svg → logout.bab56bd407f25eb34d6eff401a436ce1.svg}

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 22.5H4.5C4.10232 22.4995 3.72105 22.3414 3.43984 22.0602C3.15864 21.7789 3.00046 21.3977 3 21V3C3.00046 2.60232 3.15864 2.22105 3.43984 1.93984C3.72105 1.65864 4.10232 1.50046 4.5 1.5H13.5C13.8977 1.50046 14.279 1.65864 14.5602 1.93984C14.8414 2.22105 14.9995 2.60232 15 3V5.25H13.5V3H4.5V21H13.5V18.75H15V21C14.9995 21.3977 14.8414 21.7789 14.5602 22.0602C14.279 22.3414 13.8977 22.4995 13.5 22.5ZM18.129 12.75L15.4395 15.4395L16.5 16.5L21 12L16.5 7.5L15.4395 8.5605L18.129 11.25H8.25C7.83579 11.25 7.5 11.5858 7.5 12C7.5 12.4142 7.83579 12.75 8.25 12.75H18.129Z" fill="#AAABB5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 22.5H4.5C4.10232 22.4995 3.72105 22.3414 3.43984 22.0602C3.15864 21.7789 3.00046 21.3977 3 21V3C3.00046 2.60232 3.15864 2.22105 3.43984 1.93984C3.72105 1.65864 4.10232 1.50046 4.5 1.5H13.5C13.8977 1.50046 14.279 1.65864 14.5602 1.93984C14.8414 2.22105 14.9995 2.60232 15 3V5.25H13.5V3H4.5V21H13.5V18.75H15V21C14.9995 21.3977 14.8414 21.7789 14.5602 22.0602C14.279 22.3414 13.8977 22.4995 13.5 22.5ZM18.129 12.75L15.4395 15.4395L16.5 16.5L21 12L16.5 7.5L15.4395 8.5605L18.129 11.25H8.25C7.83579 11.25 7.5 11.5858 7.5 12C7.5 12.4142 7.83579 12.75 8.25 12.75H18.129Z" fill="currentColor"/>
 </svg>

package/build/static/media/next-arrow.b13263d05d107ceb5e99bc4fabb41279.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58515 2.44905C9.33729 2.20119 8.93544 2.20119 8.68758 2.44905C8.43984 2.69679 8.43971 3.09842 8.68728 3.34632L12.2105 6.87422C12.5252 7.1893 12.302 7.72754 11.8567 7.72754L2.13636 7.72754C1.78491 7.72754 1.5 8.01245 1.5 8.3639C1.5 8.71536 1.78491 9.00027 2.13636 9.00027L11.8567 9.00027C12.302 9.00027 12.5252 9.53851 12.2105 9.85359L8.68728 13.3815C8.43971 13.6294 8.43984 14.031 8.68758 14.2788C8.93544 14.5266 9.33729 14.5266 9.58515 14.2788L14.7929 9.07101C15.1834 8.68049 15.1834 8.04732 14.7929 7.6568L9.58515 2.44905Z" fill="currentColor"/>
+</svg>

package/build/static/media/plus.329672cb2feb55345490589e91481b88.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 7V0H7V7H0V9H7V16H9V9H16V7H9Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.57",
+  "version": "0.3.59",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@nyris/nyris-api": "^0.3.57",
-    "@nyris/nyris-react-components": "^0.3.57",
+    "@nyris/nyris-api": "^0.3.59",
+    "@nyris/nyris-react-components": "^0.3.59",
     "@reduxjs/toolkit": "^2.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^5.17.0",
@@ -22,6 +22,7 @@
     "axios": "^0.26.1",
     "blueimp-load-image": "^5.16.0",
     "classnames": "^2.5.1",
+    "compressorjs": "^1.2.1",
     "framer-motion": "^11.0.12",
     "i18next": "^23.10.1",
     "jotai": "^1.4.7",
@@ -43,7 +44,8 @@
     "sass": "^1.71.1",
     "typeface-roboto": "^1.1.13",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zustand": "^4.5.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -73,6 +75,7 @@
     "@types/jquery": "^3.5.29",
     "@types/lodash": "^4.17.0",
     "@types/react-instantsearch-dom": "^6.12.7",
-    "@types/react-router-dom": "^5.3.3"
+    "@types/react-router-dom": "^5.3.3",
+    "tailwindcss": "^3.4.10"
   }
 }

package/public/index.html

@@ -45,10 +45,7 @@
       document.documentElement.style.setProperty("--vh", `${vh}px`);
     </script>
     <!-- Cadenas web viewer -->
-    <!-- <link rel="stylesheet" href="./cadenas/8.1.0/api/css/thirdparty.min.css?v=1693816692897"> -->
     <link rel="stylesheet" href="./cadenas/8.1.0/api/css/psol.components.min.css?v=1693816692897">
-    <script  type="text/javascript"  src="./cadenas/8.1.0/api/js/fabric.min.js?v=1693816692897"></script>
-    <script  type="text/javascript" src="./cadenas/8.1.0/api/js/quill.min.js?v=169381669289"></script>
     <script  type="text/javascript" src="./cadenas/8.1.0/api/js/thirdparty.min.js?v=1693816692897"></script>
     <script  type="text/javascript" src="./cadenas/8.1.0/api/js/psol.components.min.js?v=1693816692897"></script>
  <!-- End Cadenas web viewer -->

package/public/js/settings.example.js

@@ -80,6 +80,7 @@ var settings = {
   simpleCardView: false,
   secondaryCTAButtonText: 'Configure Now',
   clarityId: '',
+  noSimilarSearch: false,
 
   //field mappins
   field: {

package/src/Router.tsx

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Layout from 'components/Layout';
-import App from 'App';
 import ResultComponent from 'page/result';
 import AuthenticatedRoute from 'components/AuthenticatedRoute';
 import Login from 'page/Login';
 import Logout from 'page/Logout';
+import Home from 'page/landingPage/Home';
 
 function Router(): JSX.Element {
   return (
@@ -15,7 +15,7 @@ function Router(): JSX.Element {
         <Route path={'/logout'} exact component={Logout} />
 
         <Layout>
-          <AuthenticatedRoute exact strict path="/" component={App} />
+          <AuthenticatedRoute exact strict path="/" component={Home} />
           <AuthenticatedRoute
             exact
             strict

package/src/Store/Store.ts

@@ -11,6 +11,8 @@ declare var settings: AppSettings;
 settings.algolia.enabled = true;
 settings.preview = true;
 settings.showFeedbackAndShare = false;
+settings.multiImageSearch = false;
+settings.showFeedback = false;
 
 if (settings.rfq?.enabled && settings.support?.enabled) {
   settings.support.enabled = false;

package/src/Store/requestStore.ts

@@ -0,0 +1,70 @@
+import { RectCoords } from '@nyris/nyris-api';
+import { create } from 'zustand';
+
+interface RequestState {
+  requestImages: HTMLCanvasElement[];
+  query?: string;
+  regions: RectCoords[];
+
+  addRequestImage: (image: HTMLCanvasElement) => void;
+  setRequestImages: (images: HTMLCanvasElement[]) => void;
+  updateRegion: (r: RectCoords, index: number) => void;
+  setRegions: (r: RectCoords[]) => void;
+  setQuery: (query: string) => void;
+  removeImage: (index: number) => void;
+  resetRegions: () => void;
+  reset: () => void;
+}
+
+const useRequestStore = create<RequestState>()((set, get) => ({
+  requestImages: [],
+  query: '',
+  regions: [Array(3)].map(() => {
+    return { x1: 0, x2: 1, y1: 0, y2: 1 };
+  }),
+
+  addRequestImage: image =>
+    set(state => ({ requestImages: [...state.requestImages, image] })),
+
+  setRequestImages: images => set(state => ({ requestImages: images })),
+
+  removeImage: index => {
+    const images = get().requestImages;
+    let updatedImages = [...images];
+
+    if (index < 0 || index >= images.length) {
+      return;
+    }
+    updatedImages.splice(index, 1);
+    set(state => ({ requestImages: updatedImages }));
+  },
+
+  updateRegion: (region, index) => {
+    const regions = get().regions;
+    let updatedRegions = [...regions];
+    updatedRegions[index] = region;
+
+    set(state => ({ regions: updatedRegions }));
+  },
+
+  setRegions: regions => set(state => ({ regions: regions })),
+  setQuery: query => set(state => ({ query: query })),
+
+  resetRegions: () =>
+    set(state => ({
+      regions: [Array(3)].map(() => {
+        return { x1: 0, x2: 1, y1: 0, y2: 1 };
+      }),
+    })),
+
+  reset: () =>
+    set(state => ({
+      requestImages: [],
+      query: '',
+      regions: [Array(3)].map(() => {
+        return { x1: 0, x2: 1, y1: 0, y2: 1 };
+      }),
+    })),
+}));
+
+export default useRequestStore;

package/src/Store/resultStore.ts

@@ -0,0 +1,25 @@
+import { Region } from '@nyris/nyris-api';
+import { create } from 'zustand';
+
+interface ResultState {
+  detectedObject: Record<number, Region[]>;
+  setDetectedObject: (region: Region[], index: number) => void;
+  reset: () => void;
+}
+
+const useResultStore = create<ResultState>()((set, get) => ({
+  detectedObject: {},
+  setDetectedObject: (region, index) => {
+    const detectedObject = get().detectedObject;
+    let updatedDetectedObject = { ...detectedObject };
+    updatedDetectedObject[index] = region;
+    set(state => ({ detectedObject: updatedDetectedObject }));
+  },
+
+  reset: () =>
+    set(state => ({
+      detectedObject: {},
+    })),
+}));
+
+export default useResultStore;

package/src/Store/search/Search.ts

@@ -105,18 +105,14 @@ export const searchSlice = createSlice({
         resultSearchText: [],
         filters: [],
         loadingSearchAlgolia: false,
-        imageThumbSearchInput: '',
-        textSearchInputMobile: '',
         isShowModalDetailItemMobile: false,
         preFilter: state.preFilter || {},
         postFilter: {},
-        preFilterDropdown: false,
         imageCaptureHelpModal: false,
         showFeedback: false,
         firstSearchImage: null,
         firstSearchResults: null,
         firstSearchPrefilters: null,
-        firstSearchThumbSearchInput: null,
       };
     },
 
@@ -124,7 +120,6 @@ export const searchSlice = createSlice({
       return {
         ...state,
         requestImage: undefined,
-        imageThumbSearchInput: '',
         results: [],
         regions: [],
       };
@@ -148,27 +143,15 @@ export const searchSlice = createSlice({
       };
     },
 
-    setImageSearchInput: (state, data: PayloadAction<string>) => {
-      const { payload } = data;
-      return {
-        ...state,
-        imageThumbSearchInput: payload,
-      };
-    },
     updateStatusLoading: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         loadingSearchAlgolia: payload,
+        fetchingResults: payload,
       };
     },
-    updateValueTextSearchMobile: (state, data: PayloadAction<string>) => {
-      const { payload } = data;
-      return {
-        ...state,
-        textSearchInputMobile: payload,
-      };
-    },
+
     onToggleModalItemDetail: (state, data: PayloadAction<boolean>) => {
       const { payload } = data;
 
@@ -184,12 +167,6 @@ export const searchSlice = createSlice({
         preFilter: payload,
       };
     },
-    setPreFilterDropdown: (state, data: PayloadAction<boolean>) => {
-      return {
-        ...state,
-        preFilterDropdown: data.payload,
-      };
-    },
     setImageCaptureHelpModal: (state, data: PayloadAction<boolean>) => {
       return {
         ...state,
@@ -250,10 +227,6 @@ export const searchSlice = createSlice({
       ...state,
       firstSearchPrefilters: data.payload,
     }),
-    setFirstSearchThumbSearchInput: (state, data: PayloadAction<any>) => ({
-      ...state,
-      firstSearchThumbSearchInput: data.payload,
-    }),
   },
 });
 
@@ -267,10 +240,8 @@ export const {
   selectionChanged,
   setFilter,
   setImageCaptureHelpModal,
-  setImageSearchInput,
   setPostFilter,
   setPreFilter,
-  setPreFilterDropdown,
   setRegions,
   setRequestImage,
   setSearchResults,
@@ -280,11 +251,9 @@ export const {
   updateResultChangePosition,
   updateResults,
   updateStatusLoading,
-  updateValueTextSearchMobile,
   setShowFeedback,
   setFirstSearchImage,
   setFirstSearchResults,
   setFirstSearchPrefilters,
-  setFirstSearchThumbSearchInput,
 } = searchSlice.actions;
 export default searchSlice.reducer;

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

@@ -6,17 +6,15 @@ export const initialState: SearchState = {
   fetchingResults: false,
   filterOptions: [],
   filters: [],
-  imageThumbSearchInput: '',
+
   isShowModalDetailItemMobile: false,
   preFilter: {},
   loadingSearchAlgolia: false,
-  preFilterDropdown: false,
   imageCaptureHelpModal: false,
   regions: [],
   requestImage: undefined,
   results: [],
   selectedRegion: undefined,
-  textSearchInputMobile: '',
   valueTextSearch: {
     configure: { filters: '' },
     page: 1,
@@ -27,5 +25,4 @@ export const initialState: SearchState = {
   firstSearchImage: '',
   firstSearchResults: null,
   firstSearchPrefilters: null,
-  firstSearchThumbSearchInput: null,
 };

package/src/Store/search/types.ts

@@ -13,11 +13,9 @@ export interface SearchState {
   fetchingResults: boolean;
   filterOptions: string[];
   filters: any[];
-  imageThumbSearchInput?: any;
   isShowModalDetailItemMobile?: boolean;
   preFilter: Record<string, boolean>;
   loadingSearchAlgolia: boolean;
-  preFilterDropdown?: boolean;
   imageCaptureHelpModal?: boolean;
   regions: Region[];
   requestId?: string;
@@ -26,13 +24,10 @@ export interface SearchState {
   selectedRegion?: RectCoords;
   sessionId?: string;
   queryText?: string;
-  setPreFilterDropdown?: any;
-  textSearchInputMobile?: string;
   valueTextSearch: any;
   postFilter: Record<string, Record<string, boolean>>;
   showFeedback?: boolean;
   firstSearchImage: any;
   firstSearchResults: any;
   firstSearchPrefilters: any;
-  firstSearchThumbSearchInput: any;
 }

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

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- License: CC Attribution. Made by iconhub: https://iconhub.io/ -->
+<svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="up" class="icon glyph"><path d="M19.71,9.29l-7-7h0a1.15,1.15,0,0,0-.33-.21.94.94,0,0,0-.76,0,1.15,1.15,0,0,0-.33.21h0l-7,7a1,1,0,0,0,1.42,1.42L11,5.41V21a1,1,0,0,0,2,0V5.41l5.29,5.3a1,1,0,0,0,1.42,0A1,1,0,0,0,19.71,9.29Z" fill="currentColor"></path></svg>

package/src/common/assets/icons/camera_simple.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="M16 13.7139C16 14.0295 15.7442 14.2853 15.4286 14.2853H0.571429C0.255837 14.2853 0 14.0295 0 13.7139V3.99958C0 3.68399 0.255837 3.42815 0.571429 3.42815H4.26286L5.24 1.97101C5.34513 1.81136 5.52313 1.71486 5.71429 1.71387H10.2857C10.4769 1.71486 10.6549 1.81136 10.76 1.97101L11.7371 3.42815H15.4286C15.7442 3.42815 16 3.68399 16 3.99958V13.7139ZM1.14286 13.1424H14.8571V4.57101H11.4286C11.2374 4.57002 11.0594 4.47352 10.9543 4.31387L9.97714 2.85672H6.02286L5.04571 4.31387C4.94058 4.47352 4.76258 4.57002 4.57143 4.57101H1.14286V13.1424ZM8 11.9996C6.10645 11.9996 4.57143 10.4646 4.57143 8.57101C4.57143 6.67746 6.10645 5.14244 8 5.14244C9.89355 5.14244 11.4286 6.67746 11.4286 8.57101C11.4286 10.4646 9.89355 11.9996 8 11.9996ZM8 6.2853C6.73764 6.2853 5.71429 7.30865 5.71429 8.57101C5.71429 9.83337 6.73764 10.8567 8 10.8567C9.26237 10.8567 10.2857 9.83337 10.2857 8.57101C10.2857 7.30865 9.26237 6.2853 8 6.2853Z" fill="currentColor"/>
+</svg>

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

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.48039 1.48039C1.74571 1.21508 2.17586 1.21508 2.44118 1.48039L5.5451 4.58431C5.67096 4.71018 5.88618 4.62127 5.88652 4.44328L5.88908 3.11787C5.88981 2.74393 6.19315 2.44118 6.56709 2.44118C6.94154 2.44118 7.2451 2.74473 7.2451 3.11918V6.2451C7.2451 6.79738 6.79738 7.2451 6.2451 7.2451H3.11918C2.74473 7.2451 2.44118 6.94154 2.44118 6.56709C2.44118 6.19315 2.74393 5.88981 3.11787 5.88908L4.44328 5.88652C4.62127 5.88618 4.71018 5.67096 4.58431 5.5451L1.48039 2.44118C1.21508 2.17586 1.21508 1.74571 1.48039 1.48039Z" fill="#55566B"/>
+<path d="M3.11918 8.7549C2.74473 8.7549 2.44118 9.05846 2.44118 9.43291C2.44118 9.80685 2.74393 10.1102 3.11787 10.1109L4.44328 10.1135C4.62127 10.1138 4.71018 10.329 4.58431 10.4549L1.48039 13.5588C1.21508 13.8241 1.21508 14.2543 1.48039 14.5196C1.74571 14.7849 2.17586 14.7849 2.44118 14.5196L5.5451 11.4157C5.67096 11.2898 5.88618 11.3787 5.88652 11.5567L5.88908 12.8821C5.88981 13.2561 6.19315 13.5588 6.56709 13.5588C6.94154 13.5588 7.2451 13.2553 7.2451 12.8808V9.7549C7.2451 9.20262 6.79738 8.7549 6.2451 8.7549H3.11918Z" fill="#55566B"/>
+<path d="M14.5196 1.48039C14.2543 1.21508 13.8241 1.21508 13.5588 1.48039L10.4549 4.58431C10.329 4.71018 10.1138 4.62127 10.1135 4.44328L10.1109 3.11787C10.1102 2.74393 9.80685 2.44118 9.43291 2.44118C9.05846 2.44118 8.7549 2.74473 8.7549 3.11918V6.2451C8.7549 6.79738 9.20262 7.2451 9.7549 7.2451H12.8808C13.2553 7.2451 13.5588 6.94154 13.5588 6.56709C13.5588 6.19315 13.2561 5.88981 12.8821 5.88908L11.5567 5.88652C11.3787 5.88618 11.2898 5.67096 11.4157 5.5451L14.5196 2.44118C14.7849 2.17586 14.7849 1.74571 14.5196 1.48039Z" fill="#55566B"/>
+<path d="M14.5196 14.5196C14.2543 14.7849 13.8241 14.7849 13.5588 14.5196L10.4549 11.4157C10.329 11.2898 10.1138 11.3787 10.1135 11.5567L10.1109 12.8821C10.1102 13.2561 9.80685 13.5588 9.43291 13.5588C9.05846 13.5588 8.7549 13.2553 8.7549 12.8808V9.7549C8.7549 9.20262 9.20262 8.7549 9.7549 8.7549H12.8808C13.2553 8.7549 13.5588 9.05846 13.5588 9.43291C13.5588 9.80685 13.2561 10.1102 12.8821 10.1109L11.5567 10.1135C11.3787 10.1138 11.2898 10.329 11.4157 10.4549L14.5196 13.5588C14.7849 13.8241 14.7849 14.2543 14.5196 14.5196Z" fill="#55566B"/>
+</svg>

package/src/common/assets/icons/crop.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="M0.710142 5.53825C1.10221 5.53825 1.42028 5.22014 1.42028 4.82804V2.69216C1.42028 1.99087 1.99071 1.4204 2.69193 1.4204H4.87323C5.26529 1.4204 5.58337 1.1023 5.58337 0.710201C5.58337 0.318104 5.26529 0 4.87323 0H2.69193C1.20757 0 0 1.20767 0 2.69216V4.82804C0 5.22014 0.318078 5.53825 0.710142 5.53825ZM11.1268 0H13.3081C14.7925 0 16 1.20767 16 2.69216V4.82804C16 5.22014 15.682 5.53825 15.2899 5.53825C14.8978 5.53825 14.5798 5.22014 14.5798 4.82804V2.69216C14.5798 1.99087 14.0093 1.4204 13.3081 1.4204H11.1268C10.7347 1.4204 10.4167 1.1023 10.4167 0.710201C10.4167 0.318104 10.7347 0 11.1268 0ZM14.5798 11.1716C14.5798 10.7795 14.8978 10.4614 15.2899 10.4614C15.682 10.4614 16 10.7795 16 11.1716V13.3078C16 14.7923 14.7925 16 13.3081 16H11.1268C10.7347 16 10.4167 15.6819 10.4167 15.2898C10.4167 14.8977 10.7347 14.5796 11.1268 14.5796H13.3081C14.0093 14.5796 14.5798 14.0091 14.5798 13.3078V11.1716ZM2.69193 14.5796H4.87323C5.26529 14.5796 5.58337 14.8977 5.58337 15.2898C5.58337 15.6819 5.26529 16 4.87323 16H2.69193C1.20757 16 0 14.7923 0 13.3078V11.1716C0 10.7792 0.318078 10.4614 0.710142 10.4614C1.10221 10.4614 1.42028 10.7795 1.42028 11.1716V13.3078C1.42028 14.0091 1.99071 14.5796 2.69193 14.5796Z" fill="currentColor"/>
+</svg>

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

@@ -1,3 +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="M12.5055 6.45389C12.7282 6.23157 13.0888 6.23169 13.3113 6.45415C13.5338 6.67672 13.5338 7.03757 13.3113 7.26013L8.70707 11.8643C8.31655 12.2548 7.68338 12.2548 7.29286 11.8643L2.68867 7.26013C2.4661 7.03757 2.4661 6.67672 2.68867 6.45415C2.91113 6.23169 3.27178 6.23157 3.49438 6.45389L5.7219 8.67847C6.35205 9.30779 7.42854 8.86148 7.42854 7.97089V0.571428C7.42854 0.255837 7.68437 0 7.99996 0C8.31556 0 8.57139 0.255838 8.57139 0.571429V7.97089C8.57139 8.86148 9.64788 9.30779 10.278 8.67847L12.5055 6.45389ZM12.7143 14.8571C13.2665 14.8571 13.7143 14.4094 13.7143 13.8571V13.1429C13.7143 12.8273 13.9701 12.5714 14.2857 12.5714C14.6013 12.5714 14.8571 12.8273 14.8571 13.1429V14.8571C14.8571 15.4883 14.3454 16 13.7143 16H2.28568C1.6545 16 1.14282 15.4883 1.14282 14.8571V13.1429C1.14282 12.8273 1.39866 12.5714 1.71425 12.5714C2.02984 12.5714 2.28568 12.8273 2.28568 13.1429V13.8571C2.28568 14.4094 2.7334 14.8571 3.28568 14.8571H12.7143Z" fill="#2B2C46"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5055 6.45389C12.7282 6.23157 13.0888 6.23169 13.3113 6.45415C13.5338 6.67672 13.5338 7.03757 13.3113 7.26013L8.70707 11.8643C8.31655 12.2548 7.68338 12.2548 7.29286 11.8643L2.68867 7.26013C2.4661 7.03757 2.4661 6.67672 2.68867 6.45415C2.91113 6.23169 3.27178 6.23157 3.49438 6.45389L5.7219 8.67847C6.35205 9.30779 7.42854 8.86148 7.42854 7.97089V0.571428C7.42854 0.255837 7.68437 0 7.99996 0C8.31556 0 8.57139 0.255838 8.57139 0.571429V7.97089C8.57139 8.86148 9.64788 9.30779 10.278 8.67847L12.5055 6.45389ZM12.7143 14.8571C13.2665 14.8571 13.7143 14.4094 13.7143 13.8571V13.1429C13.7143 12.8273 13.9701 12.5714 14.2857 12.5714C14.6013 12.5714 14.8571 12.8273 14.8571 13.1429V14.8571C14.8571 15.4883 14.3454 16 13.7143 16H2.28568C1.6545 16 1.14282 15.4883 1.14282 14.8571V13.1429C1.14282 12.8273 1.39866 12.5714 1.71425 12.5714C2.02984 12.5714 2.28568 12.8273 2.28568 13.1429V13.8571C2.28568 14.4094 2.7334 14.8571 3.28568 14.8571H12.7143Z" fill="currentColor"/>
 </svg>

package/src/common/assets/icons/gallery.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="M1.33333 0H14.6667C15.0203 0 15.3594 0.138515 15.6095 0.385075C15.8595 0.631636 16 0.966042 16 1.31473V14.462C16 14.8107 15.8595 15.1451 15.6095 15.3917C15.3594 15.6382 15.0203 15.7767 14.6667 15.7767H1.33333C0.979711 15.7767 0.640573 15.6382 0.390524 15.3917C0.140476 15.1451 0 14.8107 0 14.462V1.31473C0 0.966042 0.140476 0.631636 0.390524 0.385075C0.640573 0.138515 0.979711 0 1.33333 0ZM1.33333 10.5178V14.462H14.6667V13.1473L11.3333 9.86047L10.2733 10.9057C10.0235 11.1505 9.68558 11.288 9.33333 11.288C8.98109 11.288 8.64315 11.1505 8.39333 10.9057L4.66667 7.23101L1.33333 10.5178ZM12.2733 8.92701L14.6667 11.2869V1.31473H1.33333V8.65749L3.72667 6.29755C3.97648 6.05268 4.31442 5.91524 4.66667 5.91524C5.01891 5.91524 5.35685 6.05268 5.60667 6.29755L9.33333 9.97222L10.3933 8.92701C10.6432 8.68214 10.9811 8.5447 11.3333 8.5447C11.6856 8.5447 12.0235 8.68214 12.2733 8.92701ZM11.1111 6.24074C10.7822 6.45744 10.3956 6.57309 10 6.57309C9.46957 6.57309 8.96086 6.36532 8.58579 5.99548C8.21071 5.62564 8 5.12403 8 4.601C8 4.21096 8.1173 3.82967 8.33706 3.50536C8.55682 3.18106 8.86918 2.92829 9.23463 2.77902C9.60009 2.62976 10.0022 2.59071 10.3902 2.6668C10.7781 2.74289 11.1345 2.93072 11.4142 3.20652C11.6939 3.48232 11.8844 3.83372 11.9616 4.21627C12.0387 4.59881 11.9991 4.99533 11.8478 5.35569C11.6964 5.71604 11.44 6.02404 11.1111 6.24074ZM10.3704 4.05442C10.2607 3.98219 10.1319 3.94364 10 3.94364C9.82319 3.94364 9.65362 4.01289 9.52859 4.13617C9.40357 4.25945 9.33333 4.42666 9.33333 4.601C9.33333 4.73101 9.37243 4.85811 9.44569 4.96621C9.51894 5.07432 9.62306 5.15857 9.74488 5.20833C9.8667 5.25808 10.0007 5.2711 10.1301 5.24574C10.2594 5.22037 10.3782 5.15776 10.4714 5.06583C10.5646 4.9739 10.6281 4.85676 10.6539 4.72925C10.6796 4.60173 10.6664 4.46955 10.6159 4.34944C10.5655 4.22932 10.48 4.12666 10.3704 4.05442Z" fill="currentColor"/>
+</svg>

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

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 22.5H4.5C4.10232 22.4995 3.72105 22.3414 3.43984 22.0602C3.15864 21.7789 3.00046 21.3977 3 21V3C3.00046 2.60232 3.15864 2.22105 3.43984 1.93984C3.72105 1.65864 4.10232 1.50046 4.5 1.5H13.5C13.8977 1.50046 14.279 1.65864 14.5602 1.93984C14.8414 2.22105 14.9995 2.60232 15 3V5.25H13.5V3H4.5V21H13.5V18.75H15V21C14.9995 21.3977 14.8414 21.7789 14.5602 22.0602C14.279 22.3414 13.8977 22.4995 13.5 22.5ZM18.129 12.75L15.4395 15.4395L16.5 16.5L21 12L16.5 7.5L15.4395 8.5605L18.129 11.25H8.25C7.83579 11.25 7.5 11.5858 7.5 12C7.5 12.4142 7.83579 12.75 8.25 12.75H18.129Z" fill="#AAABB5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 22.5H4.5C4.10232 22.4995 3.72105 22.3414 3.43984 22.0602C3.15864 21.7789 3.00046 21.3977 3 21V3C3.00046 2.60232 3.15864 2.22105 3.43984 1.93984C3.72105 1.65864 4.10232 1.50046 4.5 1.5H13.5C13.8977 1.50046 14.279 1.65864 14.5602 1.93984C14.8414 2.22105 14.9995 2.60232 15 3V5.25H13.5V3H4.5V21H13.5V18.75H15V21C14.9995 21.3977 14.8414 21.7789 14.5602 22.0602C14.279 22.3414 13.8977 22.4995 13.5 22.5ZM18.129 12.75L15.4395 15.4395L16.5 16.5L21 12L16.5 7.5L15.4395 8.5605L18.129 11.25H8.25C7.83579 11.25 7.5 11.5858 7.5 12C7.5 12.4142 7.83579 12.75 8.25 12.75H18.129Z" fill="currentColor"/>
 </svg>

package/src/common/assets/icons/next-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58515 2.44905C9.33729 2.20119 8.93544 2.20119 8.68758 2.44905C8.43984 2.69679 8.43971 3.09842 8.68728 3.34632L12.2105 6.87422C12.5252 7.1893 12.302 7.72754 11.8567 7.72754L2.13636 7.72754C1.78491 7.72754 1.5 8.01245 1.5 8.3639C1.5 8.71536 1.78491 9.00027 2.13636 9.00027L11.8567 9.00027C12.302 9.00027 12.5252 9.53851 12.2105 9.85359L8.68728 13.3815C8.43971 13.6294 8.43984 14.031 8.68758 14.2788C8.93544 14.5266 9.33729 14.5266 9.58515 14.2788L14.7929 9.07101C15.1834 8.68049 15.1834 8.04732 14.7929 7.6568L9.58515 2.44905Z" fill="currentColor"/>
+</svg>

package/src/common/assets/icons/plus.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 7V0H7V7H0V9H7V16H9V9H16V7H9Z" fill="currentColor"/>
+</svg>

package/src/components/CadenasWebViewer.tsx

@@ -144,7 +144,7 @@ function CadenasWebViewer({
               }).show();
             }}
           >
-            <DownloadIcon width={14} height={14} color={'#FFF'} />
+            <DownloadIcon width={14} height={14} className="text-black" />
           </div>
         )}
       </div>

package/src/components/DragDropFile.tsx

@@ -1,28 +1,13 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { createImage, find, findRegions } from 'services/image';
-import {
-  setSearchResults,
-  setRequestImage,
-  setImageSearchInput,
-  updateStatusLoading,
-  loadingActionResults,
-  setRegions,
-  setSelectedRegion,
-  setShowFeedback,
-  setFirstSearchResults,
-  setFirstSearchImage,
-  setFirstSearchPrefilters,
-  setFirstSearchThumbSearchInput
-} from 'Store/search/Search';
+import { updateStatusLoading, loadingActionResults } from 'Store/search/Search';
 import { useHistory } from 'react-router-dom';
 import { ReactComponent as IconDownload } from 'common/assets/icons/IconUploadDownward.svg';
 
-import { RectCoords } from '@nyris/nyris-api';
 import { useTranslation } from 'react-i18next';
-import { isEmpty } from 'lodash';
 import Loading from './Loading';
+import { useImageSearch } from 'hooks/useImageSearch';
 
 interface Props {
   acceptTypes: any;
@@ -33,78 +18,32 @@ interface Props {
 function DragDropFile(props: Props) {
   const history = useHistory();
   const dispatch = useAppDispatch();
-  const { onChangeLoading, isLoading } = props;
-  const searchState = useAppSelector(state => state);
-  const {
-    settings,
-    search: { preFilter },
-  } = searchState;
+  const { isLoading } = props;
+  const settings = useAppSelector(state => state.settings);
   const { t } = useTranslation();
+
+  const { singleImageSearch } = useImageSearch();
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop: async (fs: File[], _, e) => {
       e.stopPropagation();
       history.push('/result');
+
       dispatch(updateStatusLoading(true));
       dispatch(loadingActionResults());
-      onChangeLoading(true);
-      let payload: any;
-      let filters: any[] = [];
-      console.log('fs', fs);
-      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      const preFilterValues = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter),
-        },
-      ];
-      let region: RectCoords | undefined;
 
-      try {
-        if (settings.regions) {
-          let res = await findRegions(image, settings);
-          dispatch(setRegions(res.regions));
-          region = res.selectedRegion;
-          dispatch(setSelectedRegion(region));
-        }
-      } catch (error) {
-      } finally {
-        return find({
-          image,
-          settings,
-          region,
-          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-        }).then((res: any) => {
-          res?.results.forEach((item: any) => {
-            filters.push({
-              sku: item.sku,
-              score: item.score,
-            });
-          });
-          payload = {
-            ...res,
-            filters,
-          };
-          dispatch(setSearchResults(payload));
-          onChangeLoading(false);
+      singleImageSearch({ image: fs[0], settings, showFeedback: true }).then(
+        () => {
           dispatch(updateStatusLoading(false));
-          dispatch(setShowFeedback(true));
-          // go back
-          dispatch(setFirstSearchResults(payload));
-          dispatch(setFirstSearchImage(image));
-          dispatch(setFirstSearchPrefilters(preFilter));
-          dispatch(setFirstSearchThumbSearchInput(URL.createObjectURL(fs[0])));
-          return;
-        });
-      }
+        },
+      );
     },
   });
 
   return (
     <div
       className={`box-content-main`}
-      style={{ marginTop: 32, paddingTop: 0 }}
+      style={{ marginTop: 32, paddingTop: 0, display: 'flex' }}
     >
       {isLoading && <Loading />}
 
@@ -121,8 +60,9 @@ function DragDropFile(props: Props) {
           className={`box-content-drop ${isDragActive ? 'drag-active' : ''}`}
           {...getRootProps({
             onClick: e => {
-              e.stopPropagation();},
-            })}
+              e.stopPropagation();
+            },
+          })}
         >
           <div style={{ marginBottom: 16 }}>
             <IconDownload width={48} height={48} />