@nyris/nyris-webapp 0.3.35 → 0.3.36

package/src/page/result/index.tsx

@@ -6,22 +6,16 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Box, Button, Typography } from '@material-ui/core';
-import ArrowBackIosOutlinedIcon from '@material-ui/icons/ArrowBackIosOutlined';
+import { Box } from '@material-ui/core';
 import ArrowLeftIcon from '@material-ui/icons/ArrowLeft';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
-import KeyboardArrowRightOutlinedIcon from '@material-ui/icons/KeyboardArrowRightOutlined';
+
 import { RectCoords } from '@nyris/nyris-api';
-import { Preview } from '@nyris/nyris-react-components';
-import IconSupport from 'common/assets/icons/support3.svg';
 import { CurrentRefinements } from 'components/current-refinements/current-refinements';
 import FooterResult from 'components/FooterResult';
 import CustomSearchBox from 'components/input/inputSearch';
 import ProductList from 'components/ProductList';
-import ExpandablePanelComponent from 'components/PanelResult';
 import { debounce, isEmpty } from 'lodash';
-import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
-
 import {
   Configure,
   connectStateResults,
@@ -29,7 +23,6 @@ import {
   Pagination,
 } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
-import { Link } from 'react-router-dom';
 import { feedbackRegionEpic, feedbackSuccessEpic } from 'services/Feedback';
 import { createImage, findByImage, findRegions } from 'services/image';
 import { showFeedback, showResults } from 'Store/nyris/Nyris';
@@ -49,9 +42,15 @@ import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { showHits } from '../../constants';
 import { DEFAULT_REGION } from '../../constants';
 import { useTranslation } from 'react-i18next';
+import RfqModal from 'components/rfq/RfqModal';
+import SidePanel from 'components/SidePanel';
+import useFilteredRegions from 'hooks/useFilteredRegions';
+import ImagePreviewMobile from 'components/ImagePreviewMobile';
+import RfqBanner from 'components/RfqBanner';
 
 interface Props {
   allSearchResults: any;
+  isSearchStalled?: boolean;
 }
 
 function ResultComponent(props: Props) {
@@ -64,13 +63,12 @@ function ResultComponent(props: Props) {
     requestImage,
     regions,
     selectedRegion,
-    keyFilter,
+    preFilter,
     loadingSearchAlgolia,
     imageThumbSearchInput,
   } = search;
 
   const moreInfoText = settings?.productCtaText;
-  const [toggleColLeft, setToggleColLeft] = useState<boolean>(false);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [imageSelection, setImageSelection] = useState<any>(null);
   const executeScroll = () => refBoxResult.current.scrollIntoView('-100px');
@@ -79,9 +77,15 @@ function ResultComponent(props: Props) {
   const [showAdjustInfo, setAdjustInfo] = useState(false);
   const [showAdjustInfoBasedOnConfidence, setShowAdjustInfoBasedOnConfidence] =
     useState(false);
-
+  const [rfqStatus, setRfqStatus] = useState<'inactive' | 'loading' | 'sent'>(
+    'inactive',
+  );
+  const [isRfqModalOpen, setIsRfqModalOpen] = useState(false);
   const imageUploadRef = useRef(null);
-
+  const rfqRef = useRef<any>(null);
+  const [isScrolled, setIsScrolled] = useState<
+    'not-scrolled' | 'scrolled' | 'user-scrolled'
+  >('not-scrolled');
   useEffect(() => {
     if (
       !loadingSearchAlgolia &&
@@ -104,11 +108,14 @@ function ResultComponent(props: Props) {
   useEffect(() => {
     if (selectedRegion) {
       setImageSelection(selectedRegion);
+      setRfqStatus('inactive');
+      setIsScrolled('not-scrolled');
     }
   }, [selectedRegion]);
 
   useEffect(() => {
     if (requestImage) {
+      setIsScrolled('not-scrolled');
       executeScroll();
       setImageSelection(DEFAULT_REGION);
     }
@@ -116,10 +123,10 @@ function ResultComponent(props: Props) {
 
   const findImageByApiNyris = useCallback(
     async (canvas: any, r?: RectCoords) => {
-      const preFilter = [
+      const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: [`${keyFilter}`],
+          values: Object.keys(preFilter) as string[],
         },
       ];
       dispatch(loadingActionResults());
@@ -127,7 +134,7 @@ function ResultComponent(props: Props) {
         image: canvas,
         settings,
         region: r,
-        filters: keyFilter ? preFilter : undefined,
+        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
       })
         .then(res => {
           dispatch(updateStatusLoading(false));
@@ -140,7 +147,7 @@ function ResultComponent(props: Props) {
           console.log('error call api change selection find image', e);
         });
     },
-    [settings, dispatch, keyFilter],
+    [settings, dispatch, preFilter],
   );
 
   // TODO: Search offers for image:
@@ -195,17 +202,17 @@ function ResultComponent(props: Props) {
       dispatch(setRegions(res.regions));
       dispatch(setSelectedRegion(searchRegion));
     }
-    const preFilter = [
+    const preFilterValues = [
       {
         key: settings.visualSearchFilterKey,
-        values: [`${keyFilter}`],
+        values: Object.keys(preFilter) as string[],
       },
     ];
     findByImage({
       image,
       settings,
       region: searchRegion,
-      filters: keyFilter ? preFilter : undefined,
+      filters: !isEmpty(preFilter) ? preFilterValues : undefined,
     }).then(res => {
       dispatch(setSearchResults(res));
       dispatch(showFeedback());
@@ -215,26 +222,30 @@ function ResultComponent(props: Props) {
   };
   const nonEmptyFilter: any[] = !requestImage
     ? []
-    : ['sku:DOES_NOT_EXIST<score=1>'];
+    : ['sku:DOES_NOT_EXIST<score=1> '];
   const filterSkus: any = search?.results
     ? search?.results
         .slice()
         .reverse()
         .map((f: any, i: number) => `sku:'${f.sku}'<score=${i}> `)
     : '';
-  const filterSkusString = [...nonEmptyFilter, ...filterSkus].join(' OR ');
+  const filterSkusString = [...nonEmptyFilter, ...filterSkus].join('OR ');
 
   useEffect(() => {
     document.title = 'Search results';
 
     if (requestImage || isEmpty(search.valueTextSearch.query)) return;
+    const preFilterValues = Object.keys(preFilter) as string[];
+    const filter =
+      preFilterValues.length > 0
+        ? preFilterValues
+            .map(item => `${settings.alogoliaFilterField}:'${item}'`)
+            .join(' OR ')
+        : '';
 
-    const filter = keyFilter
-      ? `${settings.alogoliaFilterField}:'${keyFilter}'`
-      : '';
     setFilterString(filter);
   }, [
-    keyFilter,
+    preFilter,
     requestImage,
     search.valueTextSearch.query,
     settings.alogoliaFilterField,
@@ -254,15 +265,25 @@ function ResultComponent(props: Props) {
 
     return () => {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyFilter]);
+  }, [preFilter]);
 
   useEffect(() => {
     if (!requestImage) return;
-    const filter = keyFilter
-      ? filterSkusString
-        ? `(${filterSkusString}) AND ${settings.alogoliaFilterField}:'${keyFilter}'`
-        : `${settings.alogoliaFilterField}:'${keyFilter}'`
-      : filterSkusString;
+
+    const preFilterValues = Object.keys(preFilter) as string[];
+    const preFilterString =
+      preFilterValues.length > 0
+        ? preFilterValues
+            .map(item => `${settings.alogoliaFilterField}:'${item}'`)
+            .join(' OR ')
+        : '';
+
+    const filter =
+      preFilterValues.length > 0
+        ? filterSkusString
+          ? `(${filterSkusString}) AND ${preFilterString}`
+          : preFilterString
+        : filterSkusString;
     setFilterString(filter);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterSkusString, settings.alogoliaFilterField]);
@@ -276,34 +297,7 @@ function ResultComponent(props: Props) {
     [findItemsInSelection, stateGlobal.search],
   );
 
-  const filteredRegions = useMemo(
-    () =>
-      regions.map(
-        (region: {
-          normalizedRect: { x1: any; x2: any; y1: any; y2: any };
-        }) => {
-          if (
-            region.normalizedRect.x1 === imageSelection.x1 &&
-            region.normalizedRect.x2 === imageSelection.x2 &&
-            region.normalizedRect.y1 === imageSelection.y1 &&
-            region.normalizedRect.y2 === imageSelection.y2
-          ) {
-            return { ...region, show: false };
-          }
-          if (
-            imageSelection.x1 === 0 &&
-            imageSelection.x2 === 1 &&
-            imageSelection.y1 === 0 &&
-            imageSelection.y2 === 1
-          ) {
-            return { ...region, show: false };
-          }
-
-          return { ...region, show: true };
-        },
-      ),
-    [imageSelection, regions],
-  );
+  const filteredRegions = useFilteredRegions(regions, imageSelection);
 
   const showPostFilter = useMemo(() => {
     return settings.postFilterOption && props.allSearchResults?.hits.length > 0;
@@ -313,271 +307,224 @@ function ResultComponent(props: Props) {
   const showSidePanel = useMemo(() => {
     return requestImage || (settings.postFilterOption && showPostFilter);
   }, [showPostFilter, settings.postFilterOption, requestImage]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setTimeout(() => {
+        setIsScrolled(s => (s === 'not-scrolled' ? 'scrolled' : s));
+        setTimeout(() => {
+          setIsScrolled(s => (s === 'scrolled' ? 'user-scrolled' : s));
+        }, 5000);
+      }, 1000);
+    };
+    if (requestImage)
+      window.addEventListener('scroll', handleScroll, { capture: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [requestImage]);
+
   return (
-    <div
-      className={`wrap-main-result loading`}
-      id="wrap-main-result"
-      ref={refBoxResult}
-    >
-      <>
-        {filterString && (
-          <Configure
-            query={search.valueTextSearch.query}
-            filters={filterString}
-          ></Configure>
-        )}
-        <Box className="box-wrap-result-component">
-          {!isMobile && (
-            <div className="box-search">
-              <CustomSearchBox />
-            </div>
+    <>
+      <div
+        className={`wrap-main-result loading`}
+        id="wrap-main-result"
+        ref={refBoxResult}
+      >
+        <>
+          {isRfqModalOpen && (
+            <RfqModal
+              requestImage={requestImage}
+              selectedRegion={selectedRegion}
+              setIsRfqModalOpen={setIsRfqModalOpen}
+              isRfqModalOpen={isRfqModalOpen}
+              setRfqStatus={setRfqStatus}
+            />
           )}
-          <Box className="box-result">
-            <>
-              <Box className="btn-open-support">
-                <Link to={'/support'} style={{ color: '#3E36DC' }}>
-                  <img src={IconSupport} alt="" width={16} height={16} />
-                </Link>
-              </Box>
-              {!isMobile && (
-                <>
-                  {showSidePanel && (
-                    <Box
-                      className={`wrap-main-col-left ${
-                        toggleColLeft ? 'toggle' : ''
-                      }`}
-                    >
-                      <Box className="box-toggle-coloumn">
-                        <Button
-                          style={{ color: '#55566b' }}
-                          onClick={() => {
-                            setToggleColLeft(!toggleColLeft);
-                          }}
-                        >
-                          {toggleColLeft ? (
-                            <KeyboardArrowRightOutlinedIcon
-                              style={{ fontSize: 30 }}
-                            />
-                          ) : (
-                            <ArrowBackIosOutlinedIcon
-                              style={{ fontSize: 20 }}
-                            />
-                          )}
-                        </Button>
-                      </Box>
-                      {settings.preview && requestImage && (
-                        <Box
-                          className="col-left"
-                          // style={{
-                          //   backgroundColor: settings?.theme?.primaryColor,
-                          // }}
-                        >
-                          <Box className="box-preview">
-                            <Box
-                              className="preview-item"
-                              style={{
-                                backgroundColor: 'white',
-                                paddingTop: '40px',
-                                width: '100%',
-                              }}
-                            >
-                              <div
-                                style={{
-                                  backgroundColor: '#AAABB5',
-                                  width: '100%',
-                                }}
-                              >
-                                <Preview
-                                  key={requestImage?.id}
-                                  onSelectionChange={(r: RectCoords) => {
-                                    setImageSelection(r);
-                                    debouncedOnImageSelectionChange(r);
-                                  }}
-                                  image={requestImage?.canvas}
-                                  selection={imageSelection || DEFAULT_REGION}
-                                  regions={filteredRegions}
-                                  maxWidth={320}
-                                  maxHeight={320}
-                                  dotColor={'#FBD914'}
-                                  minCropWidth={60}
-                                  minCropHeight={60}
-                                />
-                              </div>
-                            </Box>
-                          </Box>
-                          {(showAdjustInfoBasedOnConfidence ||
-                            showAdjustInfo) && (
-                            <Box
-                              className="box-title_col-left"
-                              alignItems="center"
-                              style={{
-                                backgroundColor: '#3E36DC',
-                                display: 'flex',
-                                columnGap: '6px',
-                                padding: '5px',
-                              }}
-                            >
-                              <IconInfo color="white" />
-                              <Typography
-                                style={{
-                                  fontSize: 10,
-                                  color: '#fff',
-                                }}
-                              >
-                                {showAdjustInfo
-                                  ? t('crop the image for better results')
-                                  : 'crop the image for better results'}
-                              </Typography>
-                            </Box>
-                          )}
-                        </Box>
-                      )}
-                      {showPostFilter && (
-                        <Box className="col-left__bottom">
-                          <ExpandablePanelComponent
-                            disjunctiveFacets={
-                              props.allSearchResults.disjunctiveFacets
-                            }
-                          />
-                        </Box>
-                      )}
+
+          {filterString && (
+            <Configure
+              query={search.valueTextSearch.query}
+              filters={filterString}
+            ></Configure>
+          )}
+          <Box className="box-wrap-result-component">
+            {!isMobile && (
+              <div className="box-search">
+                <CustomSearchBox />
+              </div>
+            )}
+            <Box className="box-result">
+              <>
+                {!isMobile && showSidePanel && (
+                  <SidePanel
+                    setImageSelection={setImageSelection}
+                    allSearchResults={props.allSearchResults}
+                    debouncedOnImageSelectionChange={
+                      debouncedOnImageSelectionChange
+                    }
+                    filteredRegions={filteredRegions}
+                    imageSelection={imageSelection}
+                    showAdjustInfo={showAdjustInfo}
+                    showAdjustInfoBasedOnConfidence={
+                      showAdjustInfoBasedOnConfidence
+                    }
+                    showPostFilter={showPostFilter}
+                    disjunctiveFacets={props.allSearchResults.disjunctiveFacets}
+                  />
+                )}
+
+                <Box
+                  className={`col-right ${
+                    settings.preview && 'ml-auto mr-auto'
+                  } ${isMobile && 'col-right-result-mobile'}`}
+                  style={{
+                    paddingTop: isMobile ? '16px' : '40px',
+                    overflow: !isMobile ? 'auto' : '',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
+                >
+                  {!isMobile && (
+                    <Box className="wrap-box-refinements">
+                      <CurrentRefinements statusSwitchButton={true} />
                     </Box>
                   )}
-                </>
-              )}
-
-              <Box
-                className={`col-right ${
-                  settings.preview && 'ml-auto mr-auto'
-                } ${isMobile && 'col-right-result-mobile'}`}
-                style={{
-                  paddingTop: isMobile ? '16px' : '40px',
-                }}
-              >
-                {!isMobile && (
-                  <Box className="wrap-box-refinements">
-                    <CurrentRefinements statusSwitchButton={true} />
-                  </Box>
-                )}
 
-                {isMobile && settings.preview && requestImage && (
+                  {isMobile && settings.preview && requestImage && (
+                    <ImagePreviewMobile
+                      requestImage={requestImage}
+                      imageSelection={imageSelection}
+                      setImageSelection={setImageSelection}
+                      debouncedOnImageSelectionChange={
+                        debouncedOnImageSelectionChange
+                      }
+                      filteredRegions={filteredRegions}
+                      showAdjustInfoBasedOnConfidence={
+                        showAdjustInfoBasedOnConfidence
+                      }
+                      showAdjustInfo={showAdjustInfo}
+                    />
+                  )}
+
                   <Box
-                    className="col-left"
                     style={{
-                      backgroundColor: '#AAABB5',
-                      marginBottom: '15px',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      flexGrow: 1,
+                      backgroundColor: '#FAFAFA',
                     }}
                   >
-                    {
-                      <Box className="box-preview">
-                        <Box
-                          className="preview-item"
-                          style={{ backgroundColor: 'white' }}
-                        >
-                          <Preview
-                            key={requestImage?.id}
-                            onSelectionChange={(r: RectCoords) => {
-                              setImageSelection(r);
-                              debouncedOnImageSelectionChange(r);
-                            }}
-                            image={requestImage?.canvas}
-                            selection={imageSelection || DEFAULT_REGION}
-                            regions={filteredRegions}
-                            maxWidth={240}
-                            maxHeight={240}
-                            dotColor={'#FBD914'}
-                            minCropWidth={60}
-                            minCropHeight={60}
+                    <Box
+                      className={'box-item-result ml-auto mr-auto'}
+                      style={{ height: '100%', paddingLeft: isMobile ? 0 : 16 }}
+                    >
+                      <ProductList
+                        getUrlToCanvasFile={getUrlToCanvasFile}
+                        setLoading={false}
+                        sendFeedBackAction={sendFeedBackAction}
+                        moreInfoText={moreInfoText}
+                        requestImage={requestImage}
+                        searchQuery={search.valueTextSearch.query}
+                      />
+                      <Box
+                        className="pagination-result"
+                        style={{
+                          width: '100%',
+                          margin: !isMobile ? '20px auto' : '',
+                          marginBottom:
+                            isMobile && !requestImage ? '64px' : '20px',
+                          padding: '0 20%',
+                          alignSelf: 'end',
+                        }}
+                      >
+                        {props.allSearchResults?.hits.length > 0 &&
+                          (requestImage || search.valueTextSearch.query) && (
+                            <Pagination
+                              showFirst={false}
+                              translations={{
+                                previous: (
+                                  <ArrowLeftIcon style={{ color: '#161616' }} />
+                                ),
+                                next: (
+                                  <ArrowRightIcon
+                                    style={{ color: '#161616' }}
+                                  />
+                                ),
+                              }}
+                            />
+                          )}
+                      </Box>
+
+                      {requestImage &&
+                        !loadingSearchAlgolia &&
+                        !props.isSearchStalled &&
+                        settings.rfq && (
+                          <RfqBanner
+                            rfqRef={rfqRef}
+                            rfqStatus={rfqStatus}
+                            setIsRfqModalOpen={setIsRfqModalOpen}
+                            requestImage={requestImage}
+                            selectedRegion={selectedRegion}
                           />
-                        </Box>
-                        {(showAdjustInfoBasedOnConfidence ||
-                          showAdjustInfo) && (
+                        )}
+                    </Box>
+                  </Box>
+                  {!isMobile && props.allSearchResults?.hits?.length > 0 && (
+                    <Box>
+                      <Box className="box-notify">
+                        <FooterResult search={search}>
                           <Box
-                            className="box-title_col-left"
-                            alignItems="center"
-                            style={{
-                              backgroundColor: '#3E36DC',
-                              display: 'flex',
-                              columnGap: '6px',
-                              padding: '5px',
-                              width: 'fit-content',
-                            }}
+                            display={'flex'}
+                            style={{ padding: '0 20px' }}
+                            className="box-change-hit-items"
                           >
-                            <IconInfo color="white" />
-                            <Typography
-                              style={{
-                                fontSize: 10,
-                                color: '#fff',
-                              }}
-                            >
-                              {showAdjustInfo
-                                ? t('crop the image for better results')
-                                : 'crop the image for better results'}
-                            </Typography>
+                            <span style={{ paddingRight: '10px' }}>
+                              {t('Items per page')}:
+                            </span>
+                            <HitsPerPage
+                              items={showHits}
+                              defaultRefinement={20}
+                            />
                           </Box>
-                        )}
+                        </FooterResult>
                       </Box>
-                    }
-                  </Box>
-                )}
-
-                <Box className={'box-item-result ml-auto mr-auto'}>
-                  <ProductList
-                    getUrlToCanvasFile={getUrlToCanvasFile}
-                    setLoading={false}
-                    sendFeedBackAction={sendFeedBackAction}
-                    moreInfoText={moreInfoText}
-                    requestImage={requestImage}
-                    searchQuery={search.valueTextSearch.query}
-                  />
-                  <Box
-                    className="pagination-result"
-                    style={{
-                      width: '100%',
-                      margin: '20px auto',
-                      padding: '0 20%',
-                    }}
-                  >
-                    {props.allSearchResults?.hits.length > 0 &&
-                      (requestImage || search.valueTextSearch.query) && (
-                        <Pagination
-                          showFirst={false}
-                          translations={{
-                            previous: (
-                              <ArrowLeftIcon style={{ color: '#161616' }} />
-                            ),
-                            next: (
-                              <ArrowRightIcon style={{ color: '#161616' }} />
-                            ),
-                          }}
-                        />
-                      )}
-                  </Box>
+                    </Box>
+                  )}
                 </Box>
-              </Box>
-            </>
-          </Box>
-          {!isMobile && (
-            <Box>
-              <Box className="box-notify">
-                <FooterResult search={search}>
-                  <Box
-                    display={'flex'}
-                    style={{ padding: '0 20px' }}
-                    className="box-change-hit-items"
-                  >
-                    <span style={{ paddingRight: '10px' }}>
-                      {t('Items per page')}:
-                    </span>
-                    <HitsPerPage items={showHits} defaultRefinement={20} />
-                  </Box>
-                </FooterResult>
-              </Box>
+              </>
             </Box>
-          )}
-        </Box>
-      </>
-    </div>
+          </Box>
+        </>
+      </div>
+      {isScrolled === 'scrolled' &&
+        requestImage &&
+        isMobile &&
+        props.allSearchResults.hits.length > 0 &&
+        settings.rfq && (
+          <div
+            style={{
+              fontSize: '14px',
+              fontWeight: 'bold',
+              letterSpacing: '1.16px',
+              color: 'white',
+              borderRadius: '16px',
+              backgroundColor: '#4B4B4A',
+              boxShadow: '0px 0px 16px 0px rgba(85, 86, 107, 0.70)',
+              padding: '8px 16px',
+              zIndex: 100,
+              position: 'absolute',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: '356px',
+              bottom: '86px',
+            }}
+          >
+            Scroll down for personalized support
+          </div>
+        )}
+    </>
   );
 }