@nyris/nyris-webapp 0.3.47 → 0.3.49

package/src/components/results/ItemResult.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as IconDisLike } from 'common/assets/icons/icon_dislike.
 import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
 import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_search_image2.svg';
 import { ReactComponent as Box3dIcon } from 'common/assets/icons/3d.svg';
+import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
 
 import React, { memo, useEffect, useState } from 'react';
 import NoImage from 'common/assets/images/no-image.svg';
@@ -22,7 +23,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 +35,6 @@ interface Props {
   handlerFeedback?: any;
   handlerGroupItem?: any;
   isGroupItem?: boolean;
-  moreInfoText?: string;
   handlerCloseGroup?: any;
   main_image_link?: any;
 }
@@ -116,6 +116,13 @@ function ItemResult(props: Props) {
     dataItem,
     settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
   );
+  const secondaryCTALink = get(
+    dataItem,
+    settings.field?.secondaryCTALinkField
+      ? settings.field?.secondaryCTALinkField
+      : '',
+  );
+
   const manufacturerNumber = get(dataItem, settings.field.manufacturerNumber);
   return (
     <Box className="wrap-main-item-result">
@@ -235,7 +242,7 @@ function ItemResult(props: Props) {
             justifyContent={'space-between'}
             flexDirection={'column'}
             style={{ color: '#2B2C46' }}
-            gridGap={8}
+            gridGap={6}
           >
             {settings.CTAButtonText && (
               <Typography
@@ -252,7 +259,10 @@ function ItemResult(props: Props) {
               display="flex"
               justifyContent={'space-between'}
               flexDirection={'row'}
-              style={{ color: '#2B2C46', marginTop: 8 }}
+              style={{
+                color: '#2B2C46',
+                marginTop: !settings.CTAButtonText ? 8 : -6,
+              }}
               gridGap={8}
             >
               <Tooltip
@@ -274,25 +284,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 +343,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 +357,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%' }}
@@ -350,6 +372,59 @@ function ItemResult(props: Props) {
           </Box>
         )}
         <div>
+          {settings.secondaryCTAButtonText && (
+            <Box
+              style={{
+                boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
+                // marginBottom: 22,
+                height: 40,
+                background: '#2B2C46',
+                borderRadius: 4,
+                padding: '0px 8px',
+                marginTop: '8px',
+              }}
+              display={'flex'}
+              justifyItems={'center'}
+              alignItems={'center'}
+              justifyContent={'space-between'}
+            >
+              <Box
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  padding: 0,
+                  cursor: secondaryCTALink ? 'pointer' : 'normal',
+                }}
+                onClick={() => {
+                  if (secondaryCTALink) {
+                    feedbackConversionEpic(state, indexItem, dataItem.sku);
+                    window.open(`${secondaryCTALink}`, '_blank');
+                  }
+                }}
+              >
+                <Typography
+                  className="text-white max-line-2"
+                  style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontWeight: 500,
+                    fontSize: '12px',
+                    letterSpacing: '0.27px',
+                    wordBreak: 'break-all',
+                    maxWidth: !isMobile && secondaryCTALink ? '136px' : '164x',
+                    paddingRight: '8px',
+                  }}
+                  align="left"
+                >
+                  {settings.secondaryCTAButtonText}
+                </Typography>
+                {!isMobile && secondaryCTALink && (
+                  <IconSettings color="white" />
+                )}
+              </Box>
+            </Box>
+          )}
           {!settings.CTAButtonText ? (
             <Tooltip
               title={dataItem[settings.field.productName]}

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');
@@ -299,10 +300,11 @@ function ResultComponent(props: Props) {
 
   const debouncedOnImageSelectionChange = useCallback(
     debounce((r: RectCoords) => {
+      setImageSelection(r);
       feedbackRegionEpic(stateGlobal, r);
       dispatch(selectionChanged(r));
       findItemsInSelection(r);
-    }, 500),
+    }, 50),
     [findItemsInSelection, stateGlobal.search],
   );
 
@@ -311,11 +313,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 +432,7 @@ function ResultComponent(props: Props) {
                   flexDirection: 'column',
                 }}
               >
-                {!isMobile && (
+                {!isMobile && settings.algolia.enabled && (
                   <Box className="wrap-box-refinements">
                     <CurrentRefinements statusSwitchButton={true} />
                   </Box>
@@ -441,7 +442,6 @@ function ResultComponent(props: Props) {
                   <ImagePreviewMobile
                     requestImage={requestImage}
                     imageSelection={imageSelection}
-                    setImageSelection={setImageSelection}
                     debouncedOnImageSelectionChange={
                       debouncedOnImageSelectionChange
                     }
@@ -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

@@ -27,6 +27,9 @@ export const translations = {
         '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: {
@@ -58,6 +61,9 @@ export const translations = {
       '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: {
@@ -89,6 +95,9 @@ export const translations = {
         '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

@@ -34,6 +34,7 @@ export interface Cadenas {
 }
 export interface Field {
   ctaLinkField: string;
+  secondaryCTALinkField?: string;
   productName: string;
   productDetails: string;
   manufacturerNumber: string;
@@ -53,8 +54,8 @@ export interface AppSettings extends NyrisAPISettings {
   auth0: Auth0Settings;
   brandName?: string;
   cadenas?: Cadenas;
-  cadSearch?: boolean;
-  exampleImages?: string[]; // deprecated
+  CTAButtonText?: string;
+  secondaryCTAButtonText?: string;
   field: Field;
   headerText?: string;
   instantRedirectPatterns: string[];
@@ -65,7 +66,6 @@ export interface AppSettings extends NyrisAPISettings {
   preFilterOption?: boolean;
   preFilterTitle?: string;
   preview: boolean;
-  productCtaText?: string;
   refinements?: any;
   regions: boolean;
   rfq?: Rfq;
@@ -73,13 +73,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 {