@nyris/nyris-webapp 0.3.34 → 0.3.36

package/src/components/Layout.tsx

@@ -9,8 +9,6 @@ import { useHistory } from 'react-router-dom';
 import {
   changeValueTextSearch,
   onResetRequestImage,
-  setImageCaptureHelpModal,
-  setPreFilterDropdown,
   setUpdateSession,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
@@ -20,21 +18,14 @@ import './common.scss';
 import FooterMobile from './FooterMobile';
 import HeaderMobile from './HeaderMobile';
 import Header from './Header';
-import PreFilterComponent from 'components/pre-filter';
 import { createSessionByApi } from 'services/session';
 import { isUndefined } from 'lodash';
-import ImageCaptureHelpModal from './ImageCaptureHelpModal';
-import MobilePostFilter from './MobilePostFilter';
+import AppMobile from './AppMobile';
 
 function Layout({ children }: ReactNode): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings, search } = useAppSelector<AppState>((state: any) => state);
-  const {
-    valueTextSearch,
-    loadingSearchAlgolia,
-    preFilterDropdown,
-    imageCaptureHelpModal,
-  } = search;
+  const { valueTextSearch, loadingSearchAlgolia } = search;
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
@@ -102,7 +93,7 @@ function Layout({ children }: ReactNode): JSX.Element {
   }, [apiKey, appId, indexName]);
 
   return (
-    <Box position={'relative'} className="wrap-mobile">
+    <div style={{ position: 'relative' }}>
       {loadingSearchAlgolia && (
         <Box className="box-wrap-loading" style={{ zIndex: 99999999 }}>
           <Box className="loadingSpinCT" style={{ top: 0, bottom: 0 }}>
@@ -120,93 +111,42 @@ function Layout({ children }: ReactNode): JSX.Element {
           }
         }}
       >
-        <div className={`layout-main-${classNameBoxVersion}`}>
-          <div
-            className={
-              !isMobile
-                ? `box-header-${classNameBoxVersion}-main`
-                : isShowHeaderMobile
-                ? `box-header-${classNameBoxVersion}-main`
-                : ''
-            }
-            style={{
-              ...(classNameBoxVersion === 'newVersion'
-                ? { background: settings.theme?.headerColor }
-                : {}),
-            }}
-          >
-            <HeaderApp
-              onToggleFilterMobile={(show: boolean) => {
-                setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
-              }}
-            />
-          </div>
-
-          <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
-            {children}
-          </div>
-          {isMobile && (
-            <div className="footer-wrap-main">
-              <FooterApp />
-            </div>
-          )}
-        </div>
-        {isMobile && (
-          <Box
-            className={`box-fillter ${isOpenFilter ? 'open' : 'close'} `}
-            position={'absolute'}
-            style={{ top: isOpenFilter ? '0px' : '', height: '100%' }}
-          >
-            <MobilePostFilter
-              onApply={() => {
-                setOpenFilter(!isOpenFilter);
-              }}
-            />
-          </Box>
-        )}
-        {isMobile && preFilterDropdown && (
-          <Box
-            className={`box-fillter open`}
-            position={'absolute'}
-            style={{ top: '0px', height: '100%' }}
-          >
+        {isMobile && <AppMobile>{children}</AppMobile>}
+        {!isMobile && (
+          <div className={`layout-main-${classNameBoxVersion}`}>
             <div
-              style={{ width: !isMobile ? '90%' : '100%' }}
-              className={'wrap-filter-desktop'}
+              className={
+                !isMobile
+                  ? `box-header-${classNameBoxVersion}-main`
+                  : isShowHeaderMobile
+                  ? `box-header-${classNameBoxVersion}-main`
+                  : ''
+              }
+              style={{
+                ...(classNameBoxVersion === 'newVersion'
+                  ? { background: settings.theme?.headerColor }
+                  : {}),
+              }}
             >
-              <div className={'bg-white box-filter-desktop isMobile'}>
-                <PreFilterComponent
-                  handleClose={() =>
-                    dispatch(setPreFilterDropdown(!preFilterDropdown))
-                  }
-                />
-              </div>
+              <HeaderApp
+                onToggleFilterMobile={(show: boolean) => {
+                  setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
+                }}
+              />
             </div>
-          </Box>
-        )}
 
-        {isMobile && imageCaptureHelpModal && (
-          <Box
-            className={`box-fillter open`}
-            position={'absolute'}
-            style={{ top: '0px', height: '100%' }}
-          >
-            <div
-              style={{ width: !isMobile ? '90%' : '100%' }}
-              className={'wrap-filter-desktop'}
-            >
-              <div className={'bg-white box-filter-desktop isMobile'}>
-                <ImageCaptureHelpModal
-                  handleClose={() =>
-                    dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal))
-                  }
-                />
-              </div>
+            <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
+              {children}
             </div>
-          </Box>
+            {isMobile && (
+              <div className="footer-wrap-main">
+                <FooterApp />
+              </div>
+            )}
+          </div>
         )}
       </InstantSearch>
-    </Box>
+    </div>
   );
 }
 

package/src/components/ProductList/index.tsx

@@ -3,6 +3,7 @@ import ItemResult from 'components/results/ItemResult';
 import { groupBy, uniqueId } from 'lodash';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { connectStateResults } from 'react-instantsearch-dom';
+import { useMediaQuery } from 'react-responsive';
 import { useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
 
@@ -30,6 +31,7 @@ function ProductListComponent({
   const [hitGroups, setHitGroups] = useState<any>({});
   const [itemShowDefault, setItemShowDefault] = useState<any[]>([]);
   const [algoliaRequest, setAlgoliaRequest] = useState(false);
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   useEffect(() => {
     if (isSearchStalled) {
@@ -134,7 +136,7 @@ function ProductListComponent({
     }
     return itemShowDefault.map((hit: any, i: number) => {
       return (
-        <Box key={i}>
+        <Box key={i} style={{ height: 'fit-content' }}>
           <ItemResult
             dataItem={hit}
             indexItem={i}
@@ -169,6 +171,7 @@ function ProductListComponent({
     isSearchStalled,
     algoliaRequest,
     loadingSearchAlgolia,
+    isMobile,
   ]);
 
   return <>{renderItem}</>;

package/src/components/RfqBanner.tsx

@@ -0,0 +1,120 @@
+import { Box } from '@material-ui/core';
+import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
+import React from 'react';
+import { useMediaQuery } from 'react-responsive';
+
+function RfqBanner({
+  requestImage,
+  rfqRef,
+  rfqStatus,
+  selectedRegion,
+  setIsRfqModalOpen,
+}: {
+  rfqRef: any;
+  rfqStatus: any;
+  setIsRfqModalOpen: any;
+  requestImage: any;
+  selectedRegion: any;
+}) {
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+
+  return (
+    <Box
+      style={{
+        padding: '0px 16px 0px 16px',
+        backgroundColor: '#F6F3F1',
+        width: '100%',
+        marginBottom: !isMobile ? '32px' : '0px',
+        alignSelf: 'end',
+        height: '248px',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+      className="rfq-box"
+      ref={rfqRef}
+    >
+      <Box
+        style={{
+          width: '100%',
+          display: 'flex',
+          columnGap: '16px',
+          alignItems: 'center',
+          justifyContent: 'space-around',
+        }}
+      >
+        <Box>
+          <Box
+            style={{
+              paddingBottom: '12px',
+            }}
+          >
+            <Box
+              style={{
+                fontSize: '14px',
+                color: rfqStatus === 'inactive' ? '#4B4B4A' : '#CACAD1',
+                fontWeight: 'bold',
+              }}
+            >
+              {isMobile
+                ? 'No matches found?'
+                : 'No matches found for your request?'}
+            </Box>
+            <Box
+              style={{
+                fontSize: '12px',
+                maxWidth: '320x',
+                lineHeight: '14.1px',
+                color: rfqStatus === 'inactive' ? '#4B4B4A' : '#CACAD1',
+                fontWeight: 'normal',
+              }}
+            >
+              Get personalised help from our team of product experts.
+            </Box>
+          </Box>
+          <button
+            style={{
+              maxWidth: '200px',
+              background: rfqStatus === 'inactive' ? '#4B4B4A' : '#E9E9EC',
+              boxShadow:
+                rfqStatus === 'inactive'
+                  ? '0px 0px 4px 0px rgba(0, 0, 0, 0.25)'
+                  : '',
+              borderRadius: '2px',
+              padding: '16px 16px 16px 16px',
+              display: 'flex',
+              alignItems: 'center',
+              color: rfqStatus === 'inactive' ? '#fff' : '#CACAD1',
+              fontSize: '14px',
+              height: '48px',
+              cursor: rfqStatus === 'inactive' ? 'pointer' : 'default',
+              border: 'none',
+            }}
+            disabled={rfqStatus !== 'inactive'}
+            onClick={() => {
+              setIsRfqModalOpen(true);
+            }}
+          >
+            Request a Quote
+          </button>
+        </Box>
+        <div>
+          <img
+            src={getCroppedCanvas(
+              requestImage?.canvas,
+              selectedRegion,
+            )?.toDataURL()}
+            alt="request_image"
+            style={{
+              mixBlendMode: rfqStatus !== 'inactive' ? 'overlay' : 'unset',
+              maxHeight: '181px',
+              maxWidth: '181px',
+              borderRadius: '2px',
+            }}
+          />
+        </div>
+      </Box>
+    </Box>
+  );
+}
+
+export default RfqBanner;

package/src/components/SidePanel.tsx

@@ -0,0 +1,147 @@
+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 { useTranslation } from 'react-i18next';
+import { useAppSelector } from 'Store/Store';
+import KeyboardArrowRightOutlinedIcon from '@material-ui/icons/KeyboardArrowRightOutlined';
+import KeyboardArrowLeftOutlinedIcon from '@material-ui/icons/KeyboardArrowLeftOutlined';
+import { DEFAULT_REGION } from '../constants';
+import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+
+function SidePanel({
+  setImageSelection,
+  imageSelection,
+  debouncedOnImageSelectionChange,
+  filteredRegions,
+  showAdjustInfoBasedOnConfidence,
+  showAdjustInfo,
+  showPostFilter,
+  disjunctiveFacets,
+}: {
+  setImageSelection: any;
+  imageSelection: any;
+  debouncedOnImageSelectionChange: any;
+  filteredRegions: any;
+  showAdjustInfoBasedOnConfidence: any;
+  showAdjustInfo: any;
+  showPostFilter: any;
+  allSearchResults: any;
+  disjunctiveFacets: any;
+}) {
+  const { t } = useTranslation();
+  const [toggleColLeft, setToggleColLeft] = useState<boolean>(false);
+  const stateGlobal = useAppSelector((state: any) => state);
+  const { search, settings } = stateGlobal;
+
+  const { requestImage } = search;
+
+  return (
+    <Box
+      className={`wrap-main-col-left ${toggleColLeft ? 'toggle' : ''}`}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box
+        className="box-toggle-coloumn"
+        style={{
+          right: requestImage || toggleColLeft ? '0px' : '16px',
+        }}
+      >
+        <Button
+          style={{
+            color: '#55566b',
+            height: '32px',
+          }}
+          onClick={() => {
+            setToggleColLeft(!toggleColLeft);
+          }}
+        >
+          {toggleColLeft ? (
+            <KeyboardArrowRightOutlinedIcon />
+          ) : (
+            <KeyboardArrowLeftOutlinedIcon />
+          )}
+        </Button>
+      </Box>
+      <Box>
+        {settings.preview && requestImage && (
+          <Box className="col-left">
+            <Box className="box-preview">
+              <Box
+                className="preview-item"
+                style={{
+                  backgroundColor: 'white',
+                  paddingTop: '32px',
+                  width: '100%',
+                }}
+              >
+                <div
+                  style={{
+                    backgroundColor: '#F3F3F5',
+                    width: '100%',
+                    paddingTop: '16px',
+                    paddingBottom: '16px',
+                  }}
+                >
+                  <Preview
+                    key={requestImage?.id}
+                    onSelectionChange={(r: RectCoords) => {
+                      setImageSelection(r);
+                      debouncedOnImageSelectionChange(r);
+                    }}
+                    image={requestImage?.canvas}
+                    selection={imageSelection || DEFAULT_REGION}
+                    regions={filteredRegions}
+                    maxWidth={288}
+                    maxHeight={288}
+                    dotColor={'#FBD914'}
+                    minCropWidth={60}
+                    minCropHeight={60}
+                    rounded={true}
+                  />
+                </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={disjunctiveFacets} />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default SidePanel;