@nyris/nyris-webapp 0.3.33 → 0.3.35

package/src/page/landingPage/common.scss

@@ -457,6 +457,17 @@ button {
       right: 16px;
       z-index: 9;
 
+      border-radius: 100%;
+      background-color: #F3F3F5;
+      display: block;
+      overflow: hidden;
+      z-index: 11;
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
       @media only screen and (max-width: 776px) {
         bottom: 50px;
       }
@@ -587,23 +598,20 @@ button {
       }
     }
     .box-icon-modal {
-      bottom: -2px;
+      bottom: 6px;
       right: 6px;
       position: absolute;
       border-radius: 100%;
-      filter: drop-shadow(0px 0px 2.66667px rgba(85, 86, 107, 0.502974));
+      background-color: #F3F3F5;
       display: block;
       overflow: hidden;
       z-index: 11;
-      span {
-        display: block;
-        img {
-          padding: 0px;
-        }
-      }
-      button {
-        padding: 0px;
-      }
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
     }
     .box-image {
       text-align: center;
@@ -783,7 +791,7 @@ button {
   justify-content: space-between;
   align-items: center;
   height: 100%;
-  background: #fff;
+  background: #FAFAFA;
   .box-content_top {
     width: 100%;
     // min-height: calc(100% - 341px);
@@ -960,16 +968,12 @@ button {
     }
   }
   .box-result {
-    height: calc(100svh - 190px);
+    height: calc(100svh - 199px);
     display: flex;
     justify-content: space-between;
     // overflow: auto;
     position: relative;
-    @media screen and (max-width: 776px) {
-      padding-top: 50px;
-      padding-bottom: 50px;
-
-    }
+    
     .btn-open-support {
       background: linear-gradient(45deg, #3e36dc 14.84%, #00ff94 85.16%);
       width: 50px;
@@ -1000,9 +1004,7 @@ button {
       }
       .box-title_col-left {
         position: absolute;
-        bottom: 5px;
-        left: 0;
-        right: 0;
+        top: 50%;
         margin: auto;
         width: fit-content;
         background-color: #3E36DC;
@@ -1025,7 +1027,6 @@ button {
       align-items: center;
       max-width: 320px;
       .box-preview {
-        padding-top: 32px;
         width: 100%;
         // border: 2px dashed #55566b;
         display: flex;
@@ -1034,10 +1035,7 @@ button {
         height: 100%;
         position: relative;
         // transition: ease-in-out 0.5s;
-        @media only screen and (max-width: 776px) {
-          padding-bottom: 32px;
-
-        }
+    
         .preview-item {
           // height: 100%;
           display: flex;
@@ -1332,7 +1330,6 @@ button {
       justify-content: center;
       align-items: center;
       height: calc(100% - 170px);
-      background: #fafafa;
       .box-content {
         width: 242px;
         span {
@@ -1816,15 +1813,16 @@ button {
   z-index: 11;
   position: relative;
   height: 100%;
-  padding: 0 4px;
-  border-radius: 21px;
+  padding-right: 4px;
+  border-radius: 4px;
+  margin-left: 8px;
   justify-content: space-between;
   align-items: center;
   min-width: 60px;
   img {
-    width: 25px;
-    height: 22px;
-    border-radius: 100%;
+    width: 35px;
+    height: 100%;
+    // border-radius: 100%;
   }
   button {
     display: flex;
@@ -1958,12 +1956,12 @@ button {
   }
 }
 
-.wrap-filter-destop {
+.wrap-filter-desktop {
   
-   
-  .box-filter-destop {
+  .box-filter-desktop {
     background-color: #fff;
-    width: 70%;
+    width: 90%;
+    max-width: 1500px;
     height: 80%;
     margin: auto;
     &.isMobile {
@@ -1973,6 +1971,11 @@ button {
       background-color: #fff;
       width: 100%;
       height: 100%;
+      padding: 10px 24px 24px 24px;
+      @media only screen and (max-width: 776px) {
+        height: fit-content;
+        padding-bottom: 56px;
+      }
       .box-top {
         padding: 24px 16px;
         .box-input-search-filter {
@@ -1999,13 +2002,12 @@ button {
         }
       }
       .box-bottom {
-        column-gap: 30px;
+        column-gap: 20px;
         padding: 0px 20px;
         flex-wrap: wrap;
         width: 100%;
         max-width: 100%;
         height: fit-content;
-        background-color: #fafafa;
         overflow-y: auto;
         .box-group-items {
           margin-top: 20px;
@@ -2102,4 +2104,131 @@ button {
   &::-webkit-scrollbar-thumb:hover {
     background: #555;
   }
+}
+
+
+.wrap-input-search-field {
+  width: 512px;
+  height: 48px;
+  .box-input-search {
+    justify-content: space-between;
+    box-shadow: 0px 2px 12px rgba(43, 44, 70, 0.13);;
+    background-color: #fff;
+    border-radius: 24px;
+    padding: 0px !important;
+    height: 48px;
+    overflow: hidden;
+    padding-right: 12px !important;
+    form {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .box-inp {
+        input {
+          background-color: #fff;
+        }
+        .pre-filter-icon {
+          display: flex;
+          width: 60px;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          border-right: 1px solid rgb(224, 224, 224);
+          background: rgb(250, 250, 250);
+          cursor: pointer;
+        }
+        .box-key-filter {
+          padding: 8px;
+          background-color: #E0E0E0;
+          border-radius: 42px;
+          min-width: fit-content;
+          display: flex;
+          align-items: center;
+          height: 75%;
+          margin-left: 5px;
+          p {
+            font-size: 14px;
+            font-size: 700;
+            color: #2B2C46;
+          }
+        }
+
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        .icon-search {
+          display: flex;
+          // position: absolute;
+          // left: 12px;
+          // top: 0;
+          bottom: 0;
+          margin: auto;
+          order: 0;
+        }
+      }
+    }
+    .input-search {
+      // padding: 0 6px;
+      // padding-left: 40px;
+      padding-left: 6px;
+      order: 2;
+      width: 100%;
+      border: 0px !important;
+      &::placeholder {
+        font-size: 14px !important;
+        color: #AAABB5 !important;
+        font-weight: 500 !important;
+      }
+      &::-webkit-search-cancel-button {
+        position: relative;
+        right: 20px;
+
+        -webkit-appearance: none;
+        height: 20px;
+        width: 20px;
+        border-radius: 10px;
+        background: red;
+      }
+      &:focus-visible {
+        outline: none !important;
+      }
+      &::before,
+      &::after {
+        display: none !important;
+      }
+    }
+    .btn-clear-text {
+      width: 32px;
+      height: 32px;
+      border-radius: 100%;
+      z-index: 10;
+      cursor: pointer !important;
+      margin-right: 8px;
+
+      &:after {
+        content: "";
+        font-size: 39px;
+        position: absolute;
+        right: -3px;
+        font-weight: 100;
+        background-color: #E0E0E0;
+        width: 1px;
+        height: 35px;
+      }
+    }
+  }
+}
+
+.icon-hover {
+  padding: 8px;
+  border-radius: 100%;
+  display: flex;
+  &:hover {
+    background-color: #0000000a;
+  }
+
 }

package/src/page/result/index.tsx

@@ -30,7 +30,7 @@ import {
 } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
 import { Link } from 'react-router-dom';
-import { feedbackClickEpic, feedbackSuccessEpic } from 'services/Feedback';
+import { feedbackRegionEpic, feedbackSuccessEpic } from 'services/Feedback';
 import { createImage, findByImage, findRegions } from 'services/image';
 import { showFeedback, showResults } from 'Store/nyris/Nyris';
 import {
@@ -92,7 +92,7 @@ function ResultComponent(props: Props) {
       setAdjustInfo(true);
       const timeout = setTimeout(() => {
         setAdjustInfo(false);
-      }, 4000);
+      }, 2000);
       imageUploadRef.current = imageThumbSearchInput;
       return () => {
         clearTimeout(timeout);
@@ -161,7 +161,7 @@ function ResultComponent(props: Props) {
         }
         setTimeout(() => {
           setShowAdjustInfoBasedOnConfidence(false);
-        }, 4000);
+        }, 2000);
       });
       return dispatch(showFeedback());
     }, 250),
@@ -174,7 +174,7 @@ function ResultComponent(props: Props) {
   };
 
   // TODO: Search image with url or file
-  const getUrlToCanvasFile = async (url: string, position?: number) => {
+  const getUrlToCanvasFile = async (url: string) => {
     dispatch(updateStatusLoading(true));
     if (isMobile) {
       executeScroll();
@@ -187,10 +187,6 @@ function ResultComponent(props: Props) {
     let image = await createImage(url);
     dispatch(setRequestImage(image));
 
-    if (position) {
-      feedbackClickEpic(stateGlobal, position);
-      return;
-    }
     let searchRegion: RectCoords | undefined = undefined;
 
     if (settings.regions) {
@@ -273,15 +269,16 @@ function ResultComponent(props: Props) {
 
   const debouncedOnImageSelectionChange = useCallback(
     debounce((r: RectCoords) => {
+      feedbackRegionEpic(stateGlobal, r);
       dispatch(selectionChanged(r));
       findItemsInSelection(r);
     }, 500),
-    [findItemsInSelection],
+    [findItemsInSelection, stateGlobal.search],
   );
 
   const filteredRegions = useMemo(
     () =>
-      regions.filter(
+      regions.map(
         (region: {
           normalizedRect: { x1: any; x2: any; y1: any; y2: any };
         }) => {
@@ -291,7 +288,7 @@ function ResultComponent(props: Props) {
             region.normalizedRect.y1 === imageSelection.y1 &&
             region.normalizedRect.y2 === imageSelection.y2
           ) {
-            return false;
+            return { ...region, show: false };
           }
           if (
             imageSelection.x1 === 0 &&
@@ -299,15 +296,23 @@ function ResultComponent(props: Props) {
             imageSelection.y1 === 0 &&
             imageSelection.y2 === 1
           ) {
-            return false;
+            return { ...region, show: false };
           }
 
-          return true;
+          return { ...region, show: true };
         },
       ),
     [imageSelection, regions],
   );
 
+  const showPostFilter = useMemo(() => {
+    return settings.postFilterOption && props.allSearchResults?.hits.length > 0;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.postFilterOption, props.allSearchResults?.hits]);
+
+  const showSidePanel = useMemo(() => {
+    return requestImage || (settings.postFilterOption && showPostFilter);
+  }, [showPostFilter, settings.postFilterOption, requestImage]);
   return (
     <div
       className={`wrap-main-result loading`}
@@ -336,8 +341,7 @@ function ResultComponent(props: Props) {
               </Box>
               {!isMobile && (
                 <>
-                  {((!settings.postFilterOption && requestImage) ||
-                    settings.postFilterOption) && (
+                  {showSidePanel && (
                     <Box
                       className={`wrap-main-col-left ${
                         toggleColLeft ? 'toggle' : ''
@@ -371,21 +375,34 @@ function ResultComponent(props: Props) {
                           <Box className="box-preview">
                             <Box
                               className="preview-item"
-                              style={{ backgroundColor: 'white' }}
+                              style={{
+                                backgroundColor: 'white',
+                                paddingTop: '40px',
+                                width: '100%',
+                              }}
                             >
-                              <Preview
-                                key={requestImage?.id}
-                                onSelectionChange={(r: RectCoords) => {
-                                  setImageSelection(r);
-                                  debouncedOnImageSelectionChange(r);
+                              <div
+                                style={{
+                                  backgroundColor: '#AAABB5',
+                                  width: '100%',
                                 }}
-                                image={requestImage?.canvas}
-                                selection={imageSelection || DEFAULT_REGION}
-                                regions={filteredRegions}
-                                maxWidth={320}
-                                maxHeight={320}
-                                dotColor={'#FBD914'}
-                              />
+                              >
+                                <Preview
+                                  key={requestImage?.id}
+                                  onSelectionChange={(r: RectCoords) => {
+                                    setImageSelection(r);
+                                    debouncedOnImageSelectionChange(r);
+                                  }}
+                                  image={requestImage?.canvas}
+                                  selection={imageSelection || DEFAULT_REGION}
+                                  regions={filteredRegions}
+                                  maxWidth={320}
+                                  maxHeight={320}
+                                  dotColor={'#FBD914'}
+                                  minCropWidth={60}
+                                  minCropHeight={60}
+                                />
+                              </div>
                             </Box>
                           </Box>
                           {(showAdjustInfoBasedOnConfidence ||
@@ -400,28 +417,28 @@ function ResultComponent(props: Props) {
                                 padding: '5px',
                               }}
                             >
-                              <IconInfo />
+                              <IconInfo color="white" />
                               <Typography
                                 style={{
                                   fontSize: 10,
                                   color: '#fff',
-                                  width: '280px',
                                 }}
                               >
                                 {showAdjustInfo
-                                  ? t(
-                                      'Adjust the search frame around your object for improved results',
-                                    )
-                                  : 'Use the cropping tool for improved image accuracy and enhanced results'}
+                                  ? t('crop the image for better results')
+                                  : 'crop the image for better results'}
                               </Typography>
                             </Box>
                           )}
                         </Box>
                       )}
-                      {/* TODO: Filter list Choose */}
-                      {settings.postFilterOption && (
+                      {showPostFilter && (
                         <Box className="col-left__bottom">
-                          <ExpandablePanelComponent />
+                          <ExpandablePanelComponent
+                            disjunctiveFacets={
+                              props.allSearchResults.disjunctiveFacets
+                            }
+                          />
                         </Box>
                       )}
                     </Box>
@@ -434,22 +451,20 @@ function ResultComponent(props: Props) {
                   settings.preview && 'ml-auto mr-auto'
                 } ${isMobile && 'col-right-result-mobile'}`}
                 style={{
-                  paddingTop:
-                    keyFilter && isMobile
-                      ? '105px'
-                      : isMobile
-                      ? '60px'
-                      : '40px',
+                  paddingTop: isMobile ? '16px' : '40px',
                 }}
               >
-                <Box className="wrap-box-refinements">
-                  <CurrentRefinements statusSwitchButton={true} />
-                </Box>
+                {!isMobile && (
+                  <Box className="wrap-box-refinements">
+                    <CurrentRefinements statusSwitchButton={true} />
+                  </Box>
+                )}
+
                 {isMobile && settings.preview && requestImage && (
                   <Box
                     className="col-left"
                     style={{
-                      backgroundColor: settings?.theme?.primaryColor,
+                      backgroundColor: '#AAABB5',
                       marginBottom: '15px',
                     }}
                   >
@@ -468,9 +483,11 @@ function ResultComponent(props: Props) {
                             image={requestImage?.canvas}
                             selection={imageSelection || DEFAULT_REGION}
                             regions={filteredRegions}
-                            maxWidth={320}
-                            maxHeight={320}
+                            maxWidth={240}
+                            maxHeight={240}
                             dotColor={'#FBD914'}
+                            minCropWidth={60}
+                            minCropHeight={60}
                           />
                         </Box>
                         {(showAdjustInfoBasedOnConfidence ||
@@ -480,25 +497,22 @@ function ResultComponent(props: Props) {
                             alignItems="center"
                             style={{
                               backgroundColor: '#3E36DC',
-                              marginBottom: '25px',
                               display: 'flex',
                               columnGap: '6px',
                               padding: '5px',
+                              width: 'fit-content',
                             }}
                           >
-                            <IconInfo />
+                            <IconInfo color="white" />
                             <Typography
                               style={{
                                 fontSize: 10,
                                 color: '#fff',
-                                width: '300px',
                               }}
                             >
                               {showAdjustInfo
-                                ? t(
-                                    'Adjust the search frame around your object for improved results',
-                                  )
-                                : 'Use the cropping tool for improved image accuracy and enhanced results'}
+                                ? t('crop the image for better results')
+                                : 'crop the image for better results'}
                             </Typography>
                           </Box>
                         )}

package/src/services/Feedback.ts

@@ -5,6 +5,7 @@ import NyrisAPI, {
 } from '@nyris/nyris-api';
 import { RootState } from '../Store/Store';
 import { ToastHelper } from '../helpers/ToastHelper';
+import { toast } from 'react-hot-toast';
 
 export const feedbackSuccessEpic = async (
   state: RootState,
@@ -19,6 +20,7 @@ export const feedbackSuccessEpic = async (
       event: 'feedback',
       data: { success },
     });
+    toast.dismiss();
     ToastHelper.success('Thank you for your feedback.');
     return res;
   } catch (err: any) {
@@ -26,11 +28,27 @@ export const feedbackSuccessEpic = async (
   }
 };
 
-export const feedbackClickEpic = async (state: RootState, position: number) => {
+export const feedbackClickEpic = async (
+  state: RootState,
+  position: number,
+  id?: string,
+) => {
   const { search, settings } = state;
   return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
     event: 'click',
-    data: { positions: [position] },
+    data: { positions: [position], ...(id ? { product_ids: [id] } : {}) },
+  });
+};
+
+export const feedbackConversionEpic = async (
+  state: RootState,
+  position: number,
+  id?: string,
+) => {
+  const { search, settings } = state;
+  return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
+    event: 'conversion',
+    data: { positions: [position], ...(id ? { product_ids: [id] } : {}) },
   });
 };
 

package/src/services/types.ts

@@ -9,7 +9,6 @@ export interface SearchServiceSettings {
   regionProposalUrl?: string;
   responseFormat?: string;
   feedbackUrl?: string;
-  exampleImages: string[];
   noImageUrl?: string;
   preview: boolean;
   regions: boolean;

package/src/translations.ts

@@ -9,6 +9,7 @@ export const translations = {
       'Show group': 'Show group',
       'Adjust the search frame around your object for improved results':
         'Adjust the search frame around your object for improved results',
+      'crop the image for better results': 'Crop the image for better results',
       'Items per page': 'Items per page',
       'Search with an image': 'Search with an image',
       'Clear text search': 'Clear text search',
@@ -24,6 +25,9 @@ export const translations = {
       'Show group': 'Zeige Gruppe',
       'Adjust the search frame around your object for improved results':
         'Anpassen des Rahmens für bessere Ergebnisse',
+      'crop the image for better results':
+        'Bildausschnitt anpassen für bessere Ergebnisse',
+
       'Items per page': 'Artikel pro Seite',
       'Search with an image': 'Bildsuche',
       'Clear text search': 'Suchtext löschen',

package/src/types.ts

@@ -23,7 +23,7 @@ export interface Field {
 }
 
 export interface AppSettings extends NyrisAPISettings {
-  exampleImages: string[];
+  exampleImages?: string[]; // deprecated
   preview: boolean;
   cadSearch?: boolean;
   noImageUrl?: string;
@@ -34,12 +34,13 @@ export interface AppSettings extends NyrisAPISettings {
   productCtaText?: string;
   appTitle?: string;
   refinements?: any;
+  showGroup?: boolean;
   preFilterOption?: boolean;
   warehouseVariant?: boolean;
   preFilterTitle?: string;
   postFilterOption?: boolean;
   showFeedbackAndShare?: boolean;
-  showMoreInfo?: boolean;
+  showMoreInfo?: boolean; // deprecated
   visualSearchFilterKey?: string;
   alogoliaFilterField?: string;
   headerText?: string;