@nyris/nyris-webapp 0.3.47 → 0.3.49

package/src/components/ProductDetailView.tsx

@@ -9,6 +9,8 @@ import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_sear
 import { ReactComponent as IconShare } from 'common/assets/icons/Fill.svg';
 import { ReactComponent as IconDisLike } from 'common/assets/icons/icon_dislike.svg';
 import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
+import { ReactComponent as IconSettings } from 'common/assets/icons/settings.svg';
+
 import { AppState } from 'types';
 import { useAppSelector } from 'Store/Store';
 import { prepareImageList } from '../helpers/CommonHelper';
@@ -20,7 +22,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: {
@@ -76,6 +78,13 @@ function ProductDetailView(props: Props) {
     settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
   );
 
+  const secondaryCTALink = get(
+    dataItem,
+    settings.field?.secondaryCTALinkField
+      ? settings.field?.secondaryCTALinkField
+      : '',
+  );
+
   useEffect(() => {
     if (dataItem) {
       checkDataItemResult(dataItem);
@@ -321,25 +330,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 +418,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' }}
                       />
@@ -431,6 +455,51 @@ function ProductDetailView(props: Props) {
                   backgroundColor: '#F3F3F5',
                 }}
               >
+                {settings.secondaryCTAButtonText && (
+                  <Box
+                    style={{
+                      background: '#2B2C46',
+                      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+                      borderRadius: 4,
+                      marginTop: 8,
+                    }}
+                    display={'flex'}
+                    justifyContent={'space-between'}
+                    alignItems={'center'}
+                    className="btn-detail-item"
+                  >
+                    <Box
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        width: '100%',
+                        padding: '0px 12px',
+                        minHeight: 64,
+                        cursor: secondaryCTALink ? 'pointer' : 'normal',
+                      }}
+                      onClick={() => {
+                        if (secondaryCTALink) {
+                          window.open(`${secondaryCTALink}`, '_blank');
+                        }
+                      }}
+                    >
+                      <Typography
+                        className="text-f18 fw-700 text-white max-line-2"
+                        align="left"
+                        style={{
+                          letterSpacing: '0.55px',
+                          maxWidth: '500px',
+                          paddingRight: '4px',
+                        }}
+                      >
+                        {settings.secondaryCTAButtonText}
+                      </Typography>
+                      {secondaryCTALink && <IconSettings color="white" />}
+                    </Box>
+                  </Box>
+                )}
+
                 <Box
                   style={{
                     background: settings.theme?.primaryColor,
@@ -481,6 +550,7 @@ function ProductDetailView(props: Props) {
                     )}
                   </Box>
                 </Box>
+
                 {productDetails && (
                   <Box className="w-100">
                     <Button

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
@@ -99,7 +102,6 @@ function SidePanel({
                     <Preview
                       key={requestImage?.id}
                       onSelectionChange={(r: RectCoords) => {
-                        setImageSelection(r);
                         debouncedOnImageSelectionChange(r);
                       }}
                       image={requestImage?.canvas}
@@ -142,8 +144,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;