@nyris/nyris-webapp 0.3.47 → 0.3.48

package/src/components/ProductList/index.tsx

@@ -13,7 +13,6 @@ interface Props {
   getUrlToCanvasFile: any;
   setLoading?: any;
   sendFeedBackAction: any;
-  moreInfoText: any;
   requestImage?: any;
   searchQuery?: string;
 }
@@ -22,7 +21,6 @@ function ProductListComponent({
   allSearchResults,
   getUrlToCanvasFile,
   sendFeedBackAction,
-  moreInfoText,
   searchQuery,
   requestImage,
   isSearchStalled,
@@ -79,7 +77,6 @@ function ProductListComponent({
               handlerCloseGroup(hitItem, index)
             }
             isGroupItem={settings.showGroup ? hit?.isGroup : false}
-            moreInfoText={moreInfoText}
             main_image_link={
               hit['image(main_similarity)'] || hit['main_image_link']
             }

package/src/components/ProductList/useProductList.ts

@@ -1,4 +1,5 @@
 import { useAppSelector } from 'Store/Store';
+import { useFilteredResult } from 'hooks/useFilteredResult';
 import { groupBy, uniqueId } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
 
@@ -91,14 +92,16 @@ export const useProductList = ({ allSearchResults, isSearchStalled }: any) => {
     }
   }, [isSearchStalled]);
 
+  const filteredResult = useFilteredResult(results);
+
   const productList = useMemo(() => {
-    return results?.map((item: any) => {
+    return filteredResult?.map((item: any) => {
       return {
         ...item,
-        main_image_link: item.image || item.images ? item.images[0] : '',
+        main_image_link: item.image || (item.images ? item.images[0] : ''),
       };
     });
-  }, [results]);
+  }, [filteredResult]);
 
   return {
     productList: algolia?.enabled ? itemShowDefault : productList || [],

package/src/components/SelectedPostFilter.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ReactComponent as IconClose } from 'common/assets/icons/close.svg';
+import { atom } from 'jotai';
+import { useMemo } from 'react';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { useFilter } from 'hooks/useFilter';
+import { get } from 'lodash';
+import { clearPostFilter, setPostFilter } from 'Store/search/Search';
+import { Box } from '@material-ui/core';
+
+export type CurrentRefinementsProps = {
+  className?: string;
+};
+
+export type CurrentRefinement = {
+  category?: string;
+  label: string;
+};
+
+export const refinementCountAtom = atom(0);
+
+export function SelectedPostFilter({ className }: CurrentRefinementsProps) {
+  const stateGlobal = useAppSelector(state => state);
+  const dispatch = useAppDispatch();
+  const {
+    search: { postFilter, results },
+  } = stateGlobal;
+  const filter = useFilter(results);
+
+  const selectedFilters = useMemo(() => {
+    const selectedFilters: any[] = [];
+    Object.keys(filter).forEach(key => {
+      const values = filter[key];
+      values.forEach((data: { value: string }) => {
+        if (get(postFilter, `${key}.${data.value}`)) {
+          selectedFilters.push({ key, ...data });
+        }
+      });
+    });
+    return selectedFilters;
+  }, [filter, postFilter]);
+
+  if (!selectedFilters.length) {
+    return null;
+  }
+
+  return (
+    <Box className="wrap-box-refinements">
+      <div style={{ display: 'flex', flexFlow: 'wrap', columnGap: '8px' }}>
+        {selectedFilters.map(filter => {
+          return (
+            <div
+              key={filter.value}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                columnGap: '12px',
+                fontSize: '12px',
+                padding: '4px 8px 4px 8px',
+                backgroundColor: '#E9E9EC',
+                borderRadius: '18px',
+                width: 'fit-content',
+              }}
+            >
+              <p>
+                {filter.value} ({filter.count})
+              </p>
+              <div
+                style={{
+                  padding: '2px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                }}
+                onClick={() => {
+                  dispatch(
+                    setPostFilter({
+                      [filter.key]: filter.value,
+                    }),
+                  );
+                }}
+              >
+                <IconClose width={12} height={12} />
+              </div>
+            </div>
+          );
+        })}
+        <div
+          key="clear"
+          className={classNames('flex items-center')}
+          style={{ padding: '4px', cursor: 'pointer' }}
+          onClick={() => dispatch(clearPostFilter())}
+        >
+          <div className="text-f12" style={{ color: '#E31B5D' }}>
+            Clear all
+          </div>
+        </div>
+      </div>
+    </Box>
+  );
+}

package/src/components/SidePanel.tsx

@@ -2,11 +2,14 @@ import { Box, Button, Typography } from '@material-ui/core';
 import { RectCoords } from '@nyris/nyris-api';
 import { Preview } from '@nyris/nyris-react-components';
 import React, { useState } from 'react';
-import ExpandablePanelComponent from './PanelResult';
+import PostFilterPanel from './PanelResult/PostFilter';
+import PostFilterPanelAlgolia from './PanelResult/PostFilterAlgolia';
+
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from 'Store/Store';
-import KeyboardArrowRightOutlinedIcon from '@material-ui/icons/KeyboardArrowRightOutlined';
-import KeyboardArrowLeftOutlinedIcon from '@material-ui/icons/KeyboardArrowLeftOutlined';
+import { ReactComponent as KeyboardArrowRightOutlinedIcon } from 'common/assets/icons/arrow_right.svg';
+import { ReactComponent as KeyboardArrowLeftOutlinedIcon } from 'common/assets/icons/arrow_left.svg';
+
 import { DEFAULT_REGION } from '../constants';
 import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
 
@@ -32,7 +35,7 @@ function SidePanel({
 }) {
   const { t } = useTranslation();
   const [toggleColLeft, setToggleColLeft] = useState<boolean>(false);
-  const stateGlobal = useAppSelector((state: any) => state);
+  const stateGlobal = useAppSelector(state => state);
   const { search, settings } = stateGlobal;
 
   const { requestImage } = search;
@@ -49,7 +52,7 @@ function SidePanel({
       <Box
         className="box-toggle-coloumn"
         style={{
-          right: requestImage || toggleColLeft ? '0px' : '16px',
+          right: '0px',
         }}
       >
         <Button
@@ -142,8 +145,16 @@ function SidePanel({
         )}
 
         {showPostFilter && (
-          <Box className="col-left__bottom">
-            <ExpandablePanelComponent disjunctiveFacets={disjunctiveFacets} />
+          <Box
+            className="col-left__bottom"
+            style={{
+              marginTop: requestImage ? '16px' : '48px',
+            }}
+          >
+            {settings.algolia.enabled && (
+              <PostFilterPanelAlgolia disjunctiveFacets={disjunctiveFacets} />
+            )}
+            {!settings.algolia.enabled && <PostFilterPanel />}
           </Box>
         )}
       </Box>

package/src/components/common.scss

@@ -269,4 +269,8 @@
   }
 
   
+}
+
+.MuiButton-root:hover {
+  text-decoration: none ;
 }

package/src/components/current-refinements/getCurrentRefinement.ts

@@ -1,4 +1,4 @@
-import type { CurrentRefinement } from "./current-refinements";
+import type { CurrentRefinement } from './current-refinements';
 
 function getRefinementConfig(r: any, refinement: any) {
   const refinementOptions = r.attribute;
@@ -10,7 +10,7 @@ function getRefinementConfig(r: any, refinement: any) {
 
 export function getCurrentRefinement(
   refinement: any,
-  config: any
+  config: any,
 ): CurrentRefinement[] {
   let refinementConfig: any;
   config.forEach((r: any) => {
@@ -18,20 +18,12 @@ export function getCurrentRefinement(
       refinementConfig = r;
     }
   });
-  
-  switch (refinementConfig?.type) {
-    case "size":
-    case "list": {
-      return (
-        refinement?.items?.map((item: any) => ({
-          category: refinementConfig?.header,
-          label: item.label,
-          value: item.value,
-        })) || []
-      );
-    }
-    default: {
-      return [];
-    }
-  }
+
+  return (
+    refinement?.items?.map((item: any) => ({
+      category: refinementConfig?.header,
+      label: item.label,
+      value: item.value,
+    })) || []
+  );
 }

package/src/components/icon-label/icon-label.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from "react";
-import RemoveIcon from "@material-ui/icons/Remove";
-import AddIcon from "@material-ui/icons/Add";
-import { Typography } from "@material-ui/core";
+import React, { useEffect, useState } from 'react';
+import { ReactComponent as RemoveIcon } from 'common/assets/icons/minus.svg';
+import { ReactComponent as AddIcon } from 'common/assets/icons/add.svg';
 
-export type LabelPosition = "bottom" | "left" | "right" | "top";
+export type LabelPosition = 'bottom' | 'left' | 'right' | 'top';
 
 export type IconLabelProps = {
   icon?: any;
@@ -16,11 +15,11 @@ export type IconLabelProps = {
 export default function IconLabel({
   icon,
   label,
-  labelPosition = "bottom",
-  className = "gap-1",
-  classNameLabel = "",
+  labelPosition = 'bottom',
+  className = 'gap-1',
+  classNameLabel = '',
 }: IconLabelProps) {
-  const [tagIcon, setTagIcon] = useState<string>("");
+  const [tagIcon, setTagIcon] = useState<string>('');
   // let classNamePosition: string;
   // switch (labelPosition) {
   //   case "top":
@@ -42,25 +41,31 @@ export default function IconLabel({
   }, [icon]);
 
   return (
-    <div style={{ display: "flex", alignItems: 'center' }}>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        paddingRight: '2px',
+      }}
+    >
       {label && (
         <div className={classNameLabel}>
-          <Typography
+          <p
             style={{
-              textTransform: "none",
               fontSize: 12,
-              color: "#55566B",
-              fontWeight: 600,
+              color: '#2B2C46',
+              fontWeight: 500,
             }}
           >
             {label}
-          </Typography>
+          </p>
         </div>
       )}
-      {tagIcon === "remove" ? (
-        <RemoveIcon style={{ color: "#55566B" }} />
+      {tagIcon === 'remove' ? (
+        <RemoveIcon width={16} height={16} />
       ) : (
-        <AddIcon style={{ color: "#55566B" }} />
+        <AddIcon width={16} height={16} />
       )}
     </div>
   );

package/src/components/input/inputSearch.tsx

@@ -212,7 +212,7 @@ const SearchBox = (props: any) => {
   return (
     <div className="wrap-input-search-field">
       <div className="box-input-search d-flex">
-        <form noValidate action="" role="search">
+        <div className="input-wrapper">
           <Box className="box-inp">
             <Tooltip
               title={
@@ -426,7 +426,7 @@ const SearchBox = (props: any) => {
               </Button>
             </Box>
           )}
-        </form>
+        </div>
       </div>
       {settings.preFilterOption && (
         <DefaultModal

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]);
+};