@nyris/nyris-webapp 0.3.34 → 0.3.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.34",
+  "version": "0.3.35",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -12,8 +12,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.34",
-    "@nyris/nyris-react-components": "^0.3.34",
+    "@nyris/nyris-api": "^0.3.35",
+    "@nyris/nyris-react-components": "^0.3.35",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/src/components/DetailItem.tsx

@@ -79,6 +79,7 @@ function DetailItem(props: Props) {
     setDataImageCarouSel(valueKey);
   };
   const { t } = useTranslation();
+  const ctaLink = dataItem[settings.field?.ctaLinkField];
 
   return (
     <Box
@@ -101,11 +102,7 @@ function DetailItem(props: Props) {
           }
         >
           {dataImageCarousel.length > 0 ? (
-            <ImagePreviewCarousel
-              imgItem={dataImageCarousel}
-              onSearchImage={onSearchImage}
-              handlerCloseModal={() => handlerCloseModal?.()}
-            />
+            <ImagePreviewCarousel imgItem={dataImageCarousel} />
           ) : (
             <img
               src={NoImage}
@@ -215,20 +212,24 @@ function DetailItem(props: Props) {
                   alignItems={'center'}
                   className="btn-detail-item"
                 >
-                  <Button
+                  <Box
                     style={{
                       display: 'flex',
                       justifyContent: 'space-between',
+                      alignItems: 'center',
                       width: '100%',
                       padding: '0px 12px',
                       minHeight: 64,
+                      cursor: ctaLink ? 'pointer' : 'normal',
+                    }}
+                    onClick={() => {
+                      if (ctaLink) {
+                        window.open(
+                          `${dataItem[settings.field.ctaLinkField]}`,
+                          '_blank',
+                        );
+                      }
                     }}
-                    onClick={() =>
-                      window.open(
-                        `${dataItem[settings.field.ctaLinkField]}`,
-                        '_blank',
-                      )
-                    }
                   >
                     <Typography
                       className="text-f18 fw-700 text-white max-line-2"
@@ -241,12 +242,14 @@ function DetailItem(props: Props) {
                     >
                       {dataItem[settings.field.productName]}
                     </Typography>
-                    <img
-                      src={IconOpenLink}
-                      alt=""
-                      style={{ minWidth: 23, marginLeft: 5 }}
-                    />
-                  </Button>
+                    {ctaLink && (
+                      <img
+                        src={IconOpenLink}
+                        alt=""
+                        style={{ minWidth: 23, marginLeft: 5 }}
+                      />
+                    )}
+                  </Box>
                 </Box>
                 {dataItem[settings.field.productDetails] && (
                   <Box className="w-100">

package/src/components/FooterMobile.tsx

@@ -60,7 +60,7 @@ function FooterMobile(props: Props): JSX.Element {
             }
           />
         </NavLink>
-        {history.location?.pathname !== '/' && (
+        {history.location?.pathname !== '/' && !imageCaptureHelpModal && (
           <Box className="box-icon-camera-mobile">
             <Button
               onClick={() => {

package/src/components/Layout.tsx

@@ -189,7 +189,7 @@ function Layout({ children }: ReactNode): JSX.Element {
           <Box
             className={`box-fillter open`}
             position={'absolute'}
-            style={{ top: '0px', height: '100%' }}
+            style={{ top: '0px', height: 'calc(100% - 64px)' }}
           >
             <div
               style={{ width: !isMobile ? '90%' : '100%' }}

package/src/components/carousel/ImagePreviewCarousel.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 export const ImagePreviewCarousel = (props: Props) => {
-  let { imgItem, onSearchImage, handlerCloseModal } = props;
+  let { imgItem } = props;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const mainRef: any = useRef(null);
   const thumbsRef: any = useRef(null);
@@ -60,12 +60,6 @@ export const ImagePreviewCarousel = (props: Props) => {
           style={{ objectFit: 'contain', minHeight: '400px' }}
           alt="preview"
           src={slide.url}
-          onClick={() => {
-            if (!thumbs) {
-              handlerCloseModal();
-              onSearchImage(slide.url);
-            }
-          }}
         />
       </SplideSlide>
     ));

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

@@ -5,7 +5,6 @@ import IconSearch from 'common/assets/icons/icon_search.svg';
 import { getFilters, searchFilters } from 'services/filter';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { setUpdateKeyFilterDesktop } from 'Store/search/Search';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import { useMediaQuery } from 'react-responsive';
 import { isEmpty } from 'lodash';
 import { Skeleton } from '@material-ui/lab';
@@ -37,8 +36,10 @@ function PreFilterComponent(props: Props) {
         const arrResult =
           res.find(value => value.key === settings.visualSearchFilterKey)
             ?.values || [];
+
         const newResult = arrResult.sort().reduce((a: any, c: any) => {
-          let k = c[0].toLocaleUpperCase();
+          if (!c[0]) return a;
+          let k = c[0]?.toLocaleUpperCase();
           if (a[k]) a[k].push(c);
           else a[k] = [c];
           return a;
@@ -61,13 +62,6 @@ function PreFilterComponent(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    value: any,
-  ) => {
-    setKeyFilter(value);
-  };
-
   const filterSearchHandler = async (value: any) => {
     if (!value) {
       getDataFilterDesktop();
@@ -196,7 +190,9 @@ function PreFilterComponent(props: Props) {
             className="box-keyFilter"
             style={{ display: 'inline-flex' }}
           >
-            <Typography className="keyFilter">{keyFilter}</Typography>
+            <Typography className="keyFilter max-line-1">
+              {keyFilter}
+            </Typography>
             <Button style={{ padding: 0 }} onClick={() => setKeyFilter('')}>
               <CloseIcon style={{ fontSize: 12, color: '#2B2C46' }} />
             </Button>
@@ -216,25 +212,25 @@ function PreFilterComponent(props: Props) {
       >
         {Object.entries(resultFilter).map(([key, value]: any, i: any) => {
           return (
-            <Box
-              className="box-group-items"
-              style={
-                columns <= 4 ? { width: 'fit-content' } : { width: '100%' }
-              }
-            >
-              <Typography
-                style={{ fontWeight: 'bold', color: '#000', paddingLeft: 11 }}
+            <Box className="box-group-items" key={key}>
+              <Box
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  rowGap: '12px',
+                  width: '100%',
+                }}
               >
-                {key}
-              </Typography>
+                <Typography
+                  style={{
+                    fontWeight: 'bold',
+                    color: '#000',
+                    fontSize: '12px',
+                  }}
+                >
+                  {key}
+                </Typography>
 
-              <ToggleButtonGroup
-                value={keyFilter}
-                exclusive
-                onChange={handleAlignment}
-                aria-label=""
-                className="box-btn-group"
-              >
                 {value.map((item: any, index: any) => {
                   return (
                     <Tooltip
@@ -242,22 +238,30 @@ function PreFilterComponent(props: Props) {
                       title={item}
                       placement="top"
                       arrow={true}
-                      disableHoverListener={item.length < 20}
+                      disableHoverListener={item.length < 35}
                     >
-                      <ToggleButton
-                        value={item}
+                      <Box
                         aria-label={item}
-                        className="item-btn"
-                        onChange={() => {
+                        style={{
+                          cursor: 'pointer',
+                          fontSize: '12px',
+                          minHeight: '20px',
+                          color: '#2B2C46',
+                          width: '100%',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                        onClick={() => {
                           setKeyFilter(item);
                         }}
                       >
-                        {truncateString(item, !isMobile ? 20 : 35)}
-                      </ToggleButton>
+                        {truncateString(item, !isMobile ? 35 : 35)}
+                      </Box>
                     </Tooltip>
                   );
                 })}
-              </ToggleButtonGroup>
+              </Box>
             </Box>
           );
         })}

package/src/components/results/ItemResult.tsx

@@ -103,7 +103,7 @@ function ItemResult(props: Props) {
       dispatch(updateStatusLoading(false));
     }, 400);
   };
-
+  const ctaLink = dataItem[settings.field?.ctaLinkField];
   return (
     <Box className="wrap-main-item-result">
       <DefaultModal
@@ -185,11 +185,6 @@ function ItemResult(props: Props) {
               />
             )}
           </Button>
-          {isHover && (
-            <Box className="box-hover">
-              <Button>View item</Button>
-            </Box>
-          )}
         </Box>
       </Box>
 
@@ -319,16 +314,13 @@ function ItemResult(props: Props) {
                   justifyContent: 'space-between',
                   width: '100%',
                   padding: 0,
-                  cursor: dataItem[settings.field?.ctaLinkField]
-                    ? 'pointer'
-                    : 'normal',
+                  cursor: ctaLink ? 'pointer' : 'normal',
                 }}
                 onClick={() => {
-                  feedbackConversionEpic(state, indexItem, dataItem.sku);
-                  window.open(
-                    `${dataItem[settings.field.ctaLinkField]}`,
-                    '_blank',
-                  );
+                  if (ctaLink) {
+                    feedbackConversionEpic(state, indexItem, dataItem.sku);
+                    window.open(`${ctaLink}`, '_blank');
+                  }
                 }}
               >
                 <Typography
@@ -340,17 +332,14 @@ function ItemResult(props: Props) {
                     fontSize: '11px',
                     letterSpacing: '0.27px',
                     wordBreak: 'break-all',
-                    maxWidth:
-                      !isMobile && dataItem[settings.field?.ctaLinkField]
-                        ? '136px'
-                        : '164x',
+                    maxWidth: !isMobile && ctaLink ? '136px' : '164x',
                     paddingRight: '8px',
                   }}
                   align="left"
                 >
                   {truncateString(dataItem[settings.field.productName], 45)}
                 </Typography>
-                {!isMobile && dataItem[settings.field?.ctaLinkField] && (
+                {!isMobile && ctaLink && (
                   <img src={IconOpenLink} alt="more-info" width={20} />
                 )}
               </Box>

package/src/page/landingPage/common.scss

@@ -1960,7 +1960,8 @@ button {
   
   .box-filter-desktop {
     background-color: #fff;
-    width: 70%;
+    width: 90%;
+    max-width: 1500px;
     height: 80%;
     margin: auto;
     &.isMobile {
@@ -2001,7 +2002,7 @@ button {
         }
       }
       .box-bottom {
-        column-gap: 30px;
+        column-gap: 20px;
         padding: 0px 20px;
         flex-wrap: wrap;
         width: 100%;