@nyris/nyris-webapp 0.3.46 → 0.3.48

package/src/components/ProductDetailView.tsx

@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import ProductAttribute from './ProductAttribute';
 import CadenasWebViewer from './CadenasWebViewer';
 import { makeStyles } from '@material-ui/core/styles';
-import { get } from 'lodash';
+import { get, isUndefined } from 'lodash';
 
 const useStyles = makeStyles(theme => ({
   buttonStyle3D: {
@@ -321,25 +321,31 @@ function ProductDetailView(props: Props) {
                   {sku}
                 </Typography>
 
-                {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>
             )}
 
@@ -403,19 +409,28 @@ function ProductDetailView(props: Props) {
                   <>
                     {settings.field.warehouseNumber && (
                       <ProductAttribute
-                        title={dataItem[settings.field.warehouseNumber]}
+                        title={
+                          get(dataItem, settings.field.warehouseNumber) ||
+                          settings.field.warehouseNumber
+                        }
                         value={
-                          dataItem[settings.field.warehouseNumberValue] || 'N/A'
+                          get(dataItem, settings.field.warehouseNumberValue) ||
+                          'N/A'
                         }
                         width={{ xs: '49%', md: 'fit-content' }}
                       />
                     )}
                     {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'
                         }
                         width={{ xs: '49%', md: 'fit-content' }}
                       />

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
@@ -82,28 +85,35 @@ function SidePanel({
               >
                 <div
                   style={{
+                    display: 'flex',
+                    justifyContent: 'center',
                     backgroundColor: '#F3F3F5',
                     width: '100%',
                     paddingTop: '16px',
                     paddingBottom: '16px',
                   }}
                 >
-                  <Preview
-                    key={requestImage?.id}
-                    onSelectionChange={(r: RectCoords) => {
-                      setImageSelection(r);
-                      debouncedOnImageSelectionChange(r);
+                  <div
+                    style={{
+                      width: '288px',
+                      height: 'fit-content',
                     }}
-                    image={requestImage?.canvas}
-                    selection={imageSelection || DEFAULT_REGION}
-                    regions={filteredRegions}
-                    maxWidth={288}
-                    maxHeight={288}
-                    dotColor={'#FBD914'}
-                    minCropWidth={60}
-                    minCropHeight={60}
-                    rounded={true}
-                  />
+                  >
+                    <Preview
+                      key={requestImage?.id}
+                      onSelectionChange={(r: RectCoords) => {
+                        setImageSelection(r);
+                        debouncedOnImageSelectionChange(r);
+                      }}
+                      image={requestImage?.canvas}
+                      selection={imageSelection || DEFAULT_REGION}
+                      regions={filteredRegions}
+                      dotColor={'#FBD914'}
+                      minCropWidth={60}
+                      minCropHeight={60}
+                      rounded={true}
+                    />
+                  </div>
                 </div>
               </Box>
             </Box>
@@ -135,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/appMobile.scss

@@ -514,6 +514,12 @@
 
       video {
         overflow: hidden;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        min-width: 100%;
+        min-height: 100%;
+
       }
     }
 
@@ -706,6 +712,7 @@
     border-radius: 100%;
     padding: 30px;  
     .outer {
+      display: block;
       border-radius: 100%;
       padding: 3px;
       background: linear-gradient(180deg, #AAABB5 0%, #FFFFFF 100%);

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/drawer/cameraCustom.tsx

@@ -6,7 +6,6 @@ import { RectCoords } from '@nyris/nyris-api';
 import ReverseCamera from 'common/assets/icons/reverse_camera.svg';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
 import Webcam from 'react-webcam';
 import { createImage, find, findRegions } from 'services/image';
@@ -43,9 +42,9 @@ function CameraCustom(props: Props) {
 
   const videoConstraints = {
     width: 1080,
-    height: 1080,
-    aspectRatio: 1.33333333333,
+    aspectRatio: 1.11111,
   };
+
   const handleClick = useCallback(() => {
     setFacingMode(prevState =>
       prevState === FACING_MODE_USER
@@ -63,7 +62,6 @@ function CameraCustom(props: Props) {
     let region: RectCoords | undefined;
     let imageConvert = await createImage(image);
     dispatch(setRequestImage(imageConvert));
-    dispatch(setImageSearchInput(image));
     dispatch(onToggleModalItemDetail(false));
     handlerCloseModal();
 
@@ -114,60 +112,6 @@ function CameraCustom(props: Props) {
     onToggleModal();
   };
 
-  const { getInputProps } = useDropzone({
-    onDrop: async (fs: File[]) => {
-      let payload: any;
-      let filters: any[] = [];
-      let region: RectCoords | undefined;
-      dispatch(updateStatusLoading(true));
-      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      if (settings.regions) {
-        let res = await findRegions(image, settings);
-        dispatch(setRegions(res.regions));
-        region = res.selectedRegion;
-        dispatch(setSelectedRegion(region));
-      }
-
-      const preFilterValues = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
-        },
-      ];
-      return find({
-        image,
-        settings,
-        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-        region,
-      })
-        .then((res: any) => {
-          res?.results.map((item: any) => {
-            filters.push({
-              sku: item.sku,
-              score: item.score,
-            });
-          });
-          payload = {
-            ...res,
-            filters,
-          };
-          dispatch(setSearchResults(payload));
-          setTimeout(() => {
-            dispatch(updateStatusLoading(false));
-            handlerCloseModal();
-            history.push('/result');
-          }, 500);
-        })
-        .catch((e: any) => {
-          console.log('err camera_custom', e);
-          dispatch(updateStatusLoading(false));
-          handlerCloseModal();
-        });
-    },
-  });
-
   return (
     <Box className="box-camera-custom">
       <Drawer
@@ -222,6 +166,7 @@ function CameraCustom(props: Props) {
                   onClick={() => {
                     const imageSrc = getScreenshot();
                     handlerFindImage(imageSrc);
+                    dispatch(setImageSearchInput(imageSrc));
                   }}
                   className="btn-capture-camera"
                 >
@@ -285,12 +230,17 @@ function CameraCustom(props: Props) {
               id="icon-button-file"
               type="file"
               style={{ display: 'none' }}
-              {...getInputProps({
-                accept: 'image/png,image/jpeg',
-                onClick: e => {
-                  e.stopPropagation();
-                },
-              })}
+              onChange={(fs: any) => {
+                const file = fs.target?.files[0];
+                if (!file) return;
+                dispatch(setImageSearchInput(URL.createObjectURL(file)));
+                handlerFindImage(file);
+              }}
+              accept="image/jpeg,image/png,image/webp"
+              onClick={event => {
+                // @ts-ignore
+                event.target.value = '';
+              }}
             />
             <label htmlFor="icon-button-file">
               <IconButton

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