@nyris/nyris-webapp 0.3.46 → 0.3.48

package/src/components/pre-filter/index.tsx

@@ -15,6 +15,7 @@ import { Skeleton } from '@material-ui/lab';
 import { truncateString } from 'helpers/truncateString';
 import { find } from 'services/image';
 import { useQuery } from 'hooks/useQuery';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   handleClose?: any;
@@ -159,6 +160,7 @@ function PreFilterComponent(props: Props) {
     }
     handleClose();
   };
+  const { t } = useTranslation();
 
   return (
     <Box
@@ -225,7 +227,7 @@ function PreFilterComponent(props: Props) {
 
           <input
             className="input-search-filter"
-            placeholder="Search"
+            placeholder={t('Search')}
             onChange={(e: any) => {
               filterSearchHandler(e.target.value);
             }}
@@ -285,7 +287,7 @@ function PreFilterComponent(props: Props) {
                 setKeyFilter({});
               }}
             >
-              Clear all
+              {t('Clear all')}
             </Box>
           </Box>
         </Box>
@@ -410,17 +412,18 @@ function PreFilterComponent(props: Props) {
             className="button-left"
             style={{
               width: '50%',
-              height: '64px',
-              backgroundColor: '#2B2C46',
+              backgroundColor: settings.theme.secondaryColor,
               color: '#fff',
               borderRadius: 0,
               justifyContent: 'flex-start',
               textTransform: 'none',
               paddingLeft: '16px',
+              paddingTop: '16px',
+              paddingBottom: '32px',
             }}
             onClick={() => handleClose()}
           >
-            Cancel
+            {t('Cancel')}
           </Button>
           <Button
             className="button-right"
@@ -432,10 +435,12 @@ function PreFilterComponent(props: Props) {
               justifyContent: 'flex-start',
               textTransform: 'none',
               paddingLeft: '16px',
+              paddingTop: '16px',
+              paddingBottom: '32px',
             }}
             onClick={() => onHandlerSubmitData()}
           >
-            Apply
+            {t('Apply')}
           </Button>
         </Box>
       )}
@@ -456,14 +461,15 @@ function PreFilterComponent(props: Props) {
             className="button-left"
             style={{
               width: '50%',
-              backgroundColor: '#000000',
+              backgroundColor: settings.theme.secondaryColor,
               color: '#fff',
               borderRadius: 0,
               justifyContent: 'flex-start',
+              textTransform: 'none',
             }}
             onClick={() => handleClose()}
           >
-            Cancel
+            {t('Cancel')}
           </Button>
           <Button
             className="button-right"
@@ -473,15 +479,15 @@ function PreFilterComponent(props: Props) {
               color: '#fff',
               borderRadius: 0,
               justifyContent: 'flex-start',
+              textTransform: 'none',
             }}
             onClick={() => onHandlerSubmitData()}
           >
-            Apply
+            {t('Apply')}
           </Button>
         </Box>
       )}
     </Box>
   );
 }
-
 export default PreFilterComponent;

package/src/components/results/ItemResult.tsx

@@ -22,7 +22,7 @@ import { useMediaQuery } from 'react-responsive';
 import { feedbackClickEpic, feedbackConversionEpic } from 'services/Feedback';
 import ProductDetailView from 'components/ProductDetailView';
 import ProductAttribute from '../ProductAttribute';
-import { get } from 'lodash';
+import { get, isUndefined } from 'lodash';
 
 interface Props {
   dataItem: any;
@@ -34,7 +34,6 @@ interface Props {
   handlerFeedback?: any;
   handlerGroupItem?: any;
   isGroupItem?: boolean;
-  moreInfoText?: string;
   handlerCloseGroup?: any;
   main_image_link?: any;
 }
@@ -274,25 +273,28 @@ function ItemResult(props: Props) {
                 </Typography>
               </Tooltip>
 
-              {settings.warehouseVariant && (
-                <Typography
-                  className="text-f12 max-line-1 fw-400"
-                  style={{
-                    color: '#2B2C46',
-                  }}
-                >
-                  <span
+              {settings.warehouseVariant &&
+                !isUndefined(
+                  get(dataItem, settings.field.warehouseStockValue),
+                ) && (
+                  <Typography
+                    className="text-f12 max-line-1 fw-400"
                     style={{
-                      color: dataItem[settings.field.warehouseStockValue]
-                        ? '#00C070'
-                        : '#c54545',
-                      fontWeight: 600,
+                      color: '#2B2C46',
                     }}
                   >
-                    {dataItem[settings.field.warehouseStockValue] || 0}
-                  </span>
-                </Typography>
-              )}
+                    <span
+                      style={{
+                        color: get(dataItem, settings.field.warehouseStockValue)
+                          ? '#00C070'
+                          : '#c54545',
+                        fontWeight: 600,
+                      }}
+                    >
+                      {get(dataItem, settings.field.warehouseStockValue) || 0}
+                    </span>
+                  </Typography>
+                )}
             </Box>
             <Box
               display="flex"
@@ -330,8 +332,13 @@ function ItemResult(props: Props) {
           >
             {settings.field.warehouseNumber && (
               <ProductAttribute
-                title={dataItem[settings.field.warehouseNumber]}
-                value={dataItem[settings.field.warehouseNumberValue] || 'N/A'}
+                title={
+                  get(dataItem, settings.field.warehouseNumber) ||
+                  settings.field.warehouseNumber
+                }
+                value={
+                  get(dataItem, settings.field.warehouseNumberValue) || 'N/A'
+                }
                 padding="4px 8px"
                 width={{ xs: '49%' }}
               />
@@ -339,9 +346,13 @@ function ItemResult(props: Props) {
 
             {settings.field.warehouseShelfNumber && (
               <ProductAttribute
-                title={dataItem[settings.field.warehouseShelfNumber]}
+                title={
+                  get(dataItem, settings.field.warehouseShelfNumber) ||
+                  settings.field.warehouseShelfNumber
+                }
                 value={
-                  dataItem[settings.field.warehouseShelfNumberValue] || 'N/A'
+                  get(dataItem, settings.field.warehouseShelfNumberValue) ||
+                  'N/A'
                 }
                 padding="4px 8px"
                 width={{ xs: '49%' }}

package/src/hooks/useFilter.ts

@@ -0,0 +1,92 @@
+import { useAppSelector } from 'Store/Store';
+import { useMemo } from 'react';
+
+// Function to count occurrences and create array of objects
+function countOccurrences(inputArray: any[]) {
+  const countMap: any = {};
+  inputArray.forEach((value: string | number) => {
+    countMap[value] = (countMap[value] || 0) + 1;
+  });
+
+  return Object.entries(countMap).map(([value, count]) => ({
+    value,
+    count,
+  }));
+}
+
+const getNextFilters = (data: any[], postFilters: any): any => {
+  const nextFilters: any = {};
+
+  data?.forEach(element => {
+    const filters = element.filters || {};
+    const keys = Object.keys(filters);
+
+    for (let i = 0; i < keys.length; i++) {
+      const xKey = keys[i];
+
+      let isNextFilter = keys.every(yKey => {
+        if (xKey !== yKey) {
+          const postFilter = postFilters[yKey] || {};
+          const filter = filters[yKey] || {};
+
+          const postFilterValues = Object.keys(postFilter).filter(
+            key => postFilter[key],
+          );
+
+          if (postFilterValues?.length > 0) {
+            return postFilterValues?.some(element => {
+              return filter?.includes(element);
+            });
+          }
+          return true;
+        }
+        return true;
+      });
+
+      if (isNextFilter) {
+        if (nextFilters[xKey]) {
+          nextFilters[xKey] = [...nextFilters[xKey], ...filters[xKey]];
+        } else {
+          nextFilters[xKey] = filters[xKey];
+        }
+      }
+    }
+  });
+
+  return nextFilters;
+};
+
+export const useFilter = (data: any) => {
+  const { postFilter } = useAppSelector(state => state.search);
+
+  const filters = useMemo(() => {
+    return getNextFilters(data, postFilter);
+  }, [data, postFilter]);
+
+  const filterCount = useMemo(() => {
+    const resultObject: any = {};
+    for (const key in filters) {
+      if (filters.hasOwnProperty(key)) {
+        resultObject[key] = countOccurrences(filters[key]);
+      }
+    }
+
+    return resultObject;
+  }, [filters]);
+
+  // If there is no item for a selected filter add the filter with count 0
+  Object.keys(postFilter).forEach(key => {
+    const filter = postFilter[key];
+    Object.keys(filter).forEach(value => {
+      const isNextFilter = filterCount[key].some((data: { value: string }) => {
+        return data.value === value;
+      });
+
+      if (!isNextFilter) {
+        filterCount[key].push({ value, count: 0 });
+      }
+    });
+  });
+
+  return filterCount;
+};

package/src/hooks/useFilteredResult.ts

@@ -0,0 +1,29 @@
+import { useAppSelector } from 'Store/Store';
+import { useMemo } from 'react';
+
+function filterResultsBasedOnPostFilter(results: any, postFilter: any): any[] {
+  return results?.filter((result: { filters: { [x: string]: any } }) => {
+    return Object.keys(postFilter).every(filterType => {
+      const filter = postFilter[filterType];
+
+      const filterValues = Object.keys(filter).filter(key => filter[key]);
+
+      if (filterValues.length > 0) {
+        const resultFilterValues = result.filters[filterType];
+        if (resultFilterValues) {
+          return filterValues?.some((value: any) =>
+            resultFilterValues.includes(value),
+          );
+        }
+      }
+      return true;
+    });
+  });
+}
+
+export const useFilteredResult = (data: any) => {
+  const { postFilter } = useAppSelector(state => state.search);
+  return useMemo(() => {
+    return filterResultsBasedOnPostFilter(data, postFilter || {});
+  }, [data, postFilter]);
+};

package/src/index.css

@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: #2B2C46
 }
 
 
@@ -403,7 +404,7 @@ button,
 input,
 select,
 textarea {
-  color: rgba(3, 31, 43, 0.54);
+  color: #2B2C46;
   font-family: Roboto, Arial, Helvetica, sans-serif;
   font-size: 17px;
   line-height: 1.5;

package/src/page/landingPage/AppMD.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@material-ui/core';
 import React, { useState } from 'react';
 import './common.scss';
-import { cadExtensions } from '@nyris/nyris-api';
 import algoliasearch from 'algoliasearch/lite';
 import DragDropFile from 'components/DragDropFile';
 import CustomSearchBox from 'components/input/inputSearch';
@@ -16,10 +15,7 @@ function AppMD() {
   const searchClient = algoliasearch(appId, apiKey);
   searchClient.initIndex(indexName);
 
-  const acceptTypes = ['image/*']
-    .concat(settings.cadSearch ? cadExtensions : [])
-    .join(',');
-
+  const acceptTypes = ['image/*'];
   const InfiniteHits = ({ hits }: any) => {
     return <div></div>;
   };

package/src/page/landingPage/common.scss

@@ -1664,7 +1664,7 @@ button {
   &.toggle {
     // transition: all 0.1s ease-in-out;
     // transition: all 0.5s ease-in;
-    max-width: 40px;
+    max-width: 32px;
     > * {
       display: none !important;
     }
@@ -1679,7 +1679,6 @@ button {
     z-index: 222;
   }
   .col-left__bottom {
-    margin-top: 32px;
     width: 100%;
     padding: 0 24px;
     button {
@@ -2052,7 +2051,7 @@ button {
     height: 48px;
     overflow: hidden;
     padding-right: 12px !important;
-    form {
+    .input-wrapper {
       width: 100%;
       display: flex;
       justify-content: center;
@@ -2181,4 +2180,12 @@ button {
 
 .product-image:hover{
   transform: scale(1.1);
+}
+
+.result-wrapper {
+  max-width: calc(192px * 4 + 96px);
+  width: 100%;
+  @media screen and (min-width: 2047px) {
+    max-width: 1300px;
+  }
 }

package/src/page/result/index.tsx

@@ -50,6 +50,7 @@ import InquiryBanner from 'components/Inquiry/InquiryBanner';
 import { useQuery } from 'hooks/useQuery';
 import { ReactComponent as PoweredByNyrisImage } from 'common/assets/images/powered_by_nyris.svg';
 import Feedback from 'components/Feedback';
+import { SelectedPostFilter } from 'components/SelectedPostFilter';
 
 interface Props {
   allSearchResults: any;
@@ -61,7 +62,7 @@ function ResultComponent(props: Props) {
   const refBoxResult: any = useRef(null);
   const stateGlobal = useAppSelector(state => state);
   const { search, settings } = stateGlobal;
-
+  const { allSearchResults } = props;
   const {
     requestImage,
     regions,
@@ -69,9 +70,9 @@ function ResultComponent(props: Props) {
     preFilter,
     loadingSearchAlgolia,
     imageThumbSearchInput,
+    results,
   } = search;
 
-  const moreInfoText = settings?.productCtaText;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [imageSelection, setImageSelection] = useState<any>(null);
   const executeScroll = () => refBoxResult.current.scrollIntoView('-100px');
@@ -311,11 +312,10 @@ function ResultComponent(props: Props) {
   const showPostFilter = useMemo(() => {
     return (
       isPostFilterEnabled &&
-      props.allSearchResults?.hits.length > 0 &&
-      isAlgoliaEnabled
+      ((allSearchResults?.hits.length > 0 && isAlgoliaEnabled) ||
+        results?.length > 0)
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPostFilterEnabled, props.allSearchResults?.hits, isAlgoliaEnabled]);
+  }, [isPostFilterEnabled, allSearchResults, isAlgoliaEnabled, results]);
 
   const showSidePanel = useMemo(() => {
     return requestImage || (isPostFilterEnabled && showPostFilter);
@@ -431,7 +431,7 @@ function ResultComponent(props: Props) {
                   flexDirection: 'column',
                 }}
               >
-                {!isMobile && (
+                {!isMobile && settings.algolia.enabled && (
                   <Box className="wrap-box-refinements">
                     <CurrentRefinements statusSwitchButton={true} />
                   </Box>
@@ -482,27 +482,35 @@ function ResultComponent(props: Props) {
                         />
                       </div>
                     )}
-                    <ProductList
-                      getUrlToCanvasFile={getUrlToCanvasFile}
-                      setLoading={false}
-                      sendFeedBackAction={sendFeedBackAction}
-                      moreInfoText={moreInfoText}
-                      requestImage={requestImage}
-                      searchQuery={searchQuery}
-                    />
-                    <Box
-                      className="pagination-result"
-                      style={{
-                        width: '100%',
-                        margin: !isMobile ? '20px auto' : '',
-                        marginBottom:
-                          isMobile && !requestImage ? '64px' : '20px',
-                        padding: '0 20%',
-                        alignSelf: 'end',
-                      }}
+                    <div
+                      className="box-item-result ml-auto mr-auto"
+                      style={{ height: 'fit-content' }}
                     >
-                      {props.allSearchResults?.hits.length > 0 &&
-                        (requestImage || searchQuery) && (
+                      {!isMobile && !settings.algolia.enabled && (
+                        <SelectedPostFilter />
+                      )}
+                      <ProductList
+                        getUrlToCanvasFile={getUrlToCanvasFile}
+                        setLoading={false}
+                        sendFeedBackAction={sendFeedBackAction}
+                        requestImage={requestImage}
+                        searchQuery={searchQuery}
+                      />
+                    </div>
+
+                    {props.allSearchResults?.hits.length > 0 &&
+                      (requestImage || searchQuery) && (
+                        <Box
+                          className="pagination-result"
+                          style={{
+                            width: '100%',
+                            margin: !isMobile ? '20px auto' : '',
+                            marginBottom:
+                              isMobile && !requestImage ? '64px' : '20px',
+                            padding: '0 20%',
+                            alignSelf: 'end',
+                          }}
+                        >
                           <Pagination
                             showFirst={false}
                             translations={{
@@ -514,8 +522,8 @@ function ResultComponent(props: Props) {
                               ),
                             }}
                           />
-                        )}
-                    </Box>
+                        </Box>
+                      )}
 
                     {requestImage &&
                       !loadingSearchAlgolia &&

package/src/services/image.ts

@@ -70,8 +70,3 @@ export const find = ({
   }
   return nyrisApi.find(options, image, filters);
 };
-
-export const findByCadFile = (file: File, settings: NyrisAPISettings) => {
-  const nyrisApi = new NyrisAPI(settings);
-  return nyrisApi.findByCad(file, {});
-};

package/src/translations.ts

@@ -25,6 +25,11 @@ export const translations = {
         'No products were found matching your search criteria.',
       'Please upload an image or enter a keyword to search.':
         'Please upload an image or enter a keyword to search.',
+      'No matches found': 'No matches found',
+      'No matches found for your request': 'No matches found for your request',
+      'Clear all': 'Clear all',
+      Cancel: 'Cancel',
+      Apply: 'Apply',
     },
   },
   de: {
@@ -53,6 +58,12 @@ export const translations = {
         'Keine Produkte entsprechen Ihren Suchkriterien.',
       'Please upload an image or enter a keyword to search.':
         'Für die Suche bitte Bild hochladen oder Stichwort eingeben.',
+      'No matches found': 'Keine Treffer für Ihre Anfrage gefunden',
+      'No matches found for your request':
+        'Keine Treffer für Ihre Anfrage gefunden',
+      'Clear all': 'Alles löschen',
+      Cancel: 'Abbrechen',
+      Apply: 'Anwenden',
     },
   },
   pt: {
@@ -82,6 +93,11 @@ export const translations = {
         'Nenhum produto foi encontrado com estes critérios ',
       'Please upload an image or enter a keyword to search.':
         'Faça o upload de uma imagem ou busque via texto',
+      'No matches found': 'No matches found',
+      'No matches found for your request': 'No matches found for your request',
+      'Clear all': 'Clear all',
+      Cancel: 'Cancel',
+      Apply: 'Apply',
     },
   },
 };

package/src/types.ts

@@ -53,8 +53,7 @@ export interface AppSettings extends NyrisAPISettings {
   auth0: Auth0Settings;
   brandName?: string;
   cadenas?: Cadenas;
-  cadSearch?: boolean;
-  exampleImages?: string[]; // deprecated
+  CTAButtonText?: string;
   field: Field;
   headerText?: string;
   instantRedirectPatterns: string[];
@@ -65,7 +64,6 @@ export interface AppSettings extends NyrisAPISettings {
   preFilterOption?: boolean;
   preFilterTitle?: string;
   preview: boolean;
-  productCtaText?: string;
   refinements?: any;
   regions: boolean;
   rfq?: Rfq;
@@ -73,13 +71,11 @@ export interface AppSettings extends NyrisAPISettings {
   showFeedback?: boolean;
   showFeedbackAndShare?: boolean;
   showGroup?: boolean;
-  showMoreInfo?: boolean; // deprecated
   showPoweredByNyris?: boolean;
   support?: Support;
   theme: SearchSuiteSettings;
   visualSearchFilterKey?: string;
   warehouseVariant?: boolean;
-  CTAButtonText?: string;
 }
 
 export interface SearchSuiteSettings {