@nyris/nyris-webapp 0.3.35 → 0.3.36

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

@@ -1,12 +1,12 @@
 import { Box, Button, Tooltip, Typography } from '@material-ui/core';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import CloseIcon from '@material-ui/icons/Close';
 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 { setPreFilter } from 'Store/search/Search';
 import { useMediaQuery } from 'react-responsive';
-import { isEmpty } from 'lodash';
+import { isEmpty, pickBy } from 'lodash';
 import { Skeleton } from '@material-ui/lab';
 import { truncateString } from 'helpers/truncateString';
 
@@ -14,21 +14,35 @@ interface Props {
   handleClose?: any;
   // onChangeKeyFilter?: any;
 }
-
+const maxFilter = 10;
 function PreFilterComponent(props: Props) {
   const { handleClose } = props;
   const dispatch = useAppDispatch();
   const stateGlobal = useAppSelector(state => state);
   const {
     settings,
-    search: { keyFilter: keyFilterState },
+    search: { preFilter: keyFilterState },
   } = stateGlobal;
   const [resultFilter, setResultFilter] = useState<any>([]);
-  const [keyFilter, setKeyFilter] = useState<string>(keyFilterState || '');
+  const [keyFilter, setKeyFilter] = useState<Record<string, boolean>>(
+    keyFilterState || {},
+  );
+
   const [isLoading, setLoading] = useState<boolean>(false);
   const [columns, setColumns] = useState<number>(0);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
+  const selectedFilter = useMemo(
+    () =>
+      Object.keys(keyFilter).reduce((count, key) => {
+        if (keyFilter[key] === true) {
+          return count + 1;
+        }
+        return count;
+      }, 0),
+    [keyFilter],
+  );
+
   const getDataFilterDesktop = async () => {
     setLoading(true);
     const dataResultFilter = getFilters(1000, settings)
@@ -73,7 +87,6 @@ function PreFilterComponent(props: Props) {
       settings,
     )
       .then(res => {
-        // console.log("res", res);
         if (res.length > 0) {
           setResultFilter({ [res[0][0].toLocaleUpperCase()]: res });
           if (res.length <= 20) setColumns(1);
@@ -92,7 +105,7 @@ function PreFilterComponent(props: Props) {
   };
 
   const onHandlerSubmitData = () => {
-    dispatch(setUpdateKeyFilterDesktop(keyFilter));
+    dispatch(setPreFilter(pickBy(keyFilter, value => !!value)));
     handleClose();
   };
 
@@ -119,7 +132,7 @@ function PreFilterComponent(props: Props) {
             color: '#000',
             fontSize: '24px',
             fontWeight: 700,
-            paddingLeft: isMobile ? '0px' : '14px',
+            paddingLeft: '14px',
             marginBottom: isMobile ? '0px' : '-8px',
             marginTop: isMobile ? '0px' : '24px',
           }}
@@ -133,7 +146,6 @@ function PreFilterComponent(props: Props) {
       </div>
       <Box
         className="box-top"
-        style={isMobile ? { padding: 0, marginTop: '16px' } : undefined}
         display={'flex'}
         justifyContent={'space-between'}
         alignItems={'center'}
@@ -144,34 +156,21 @@ function PreFilterComponent(props: Props) {
           justifyItems={'center'}
           style={isMobile ? { width: '100%' } : undefined}
         >
-          {(!keyFilter || isMobile) && (
-            <Box
-              className="icon-search"
-              style={{ marginRight: 11 }}
-              display={'flex'}
-              justifyContent={'center'}
-              alignItems={'center'}
-            >
-              <img
-                style={{ maxWidth: 'fit-content' }}
-                src={IconSearch}
-                alt=""
-                width={18}
-                height={18}
-              />
-            </Box>
-          )}
-
-          {keyFilter && !isMobile && (
-            <Box display={'flex'} className="box-keyFilter">
-              <Typography className="keyFilter max-line-1">
-                {keyFilter}
-              </Typography>
-              <Button style={{ padding: 0 }} onClick={() => setKeyFilter('')}>
-                <CloseIcon style={{ fontSize: 12, color: '#2B2C46' }} />
-              </Button>
-            </Box>
-          )}
+          <Box
+            className="icon-search"
+            style={{ marginRight: 11 }}
+            display={'flex'}
+            justifyContent={'center'}
+            alignItems={'center'}
+          >
+            <img
+              style={{ maxWidth: 'fit-content' }}
+              src={IconSearch}
+              alt=""
+              width={18}
+              height={18}
+            />
+          </Box>
 
           <input
             className="input-search-filter"
@@ -183,19 +182,59 @@ function PreFilterComponent(props: Props) {
         </Box>
       </Box>
 
-      {keyFilter && isMobile && (
-        <Box style={{ margin: '10px 16px' }}>
+      {!isEmpty(keyFilter) && selectedFilter > 0 && (
+        <Box
+          style={{
+            margin: '10px 16px 10px 16px',
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
           <Box
-            display={'flex'}
-            className="box-keyFilter"
-            style={{ display: 'inline-flex' }}
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              rowGap: '8px',
+              columnGap: '8px',
+              alignItems: 'baseline',
+              fontSize: '12px',
+              marginBottom: '4px',
+            }}
           >
-            <Typography className="keyFilter max-line-1">
-              {keyFilter}
-            </Typography>
-            <Button style={{ padding: 0 }} onClick={() => setKeyFilter('')}>
-              <CloseIcon style={{ fontSize: 12, color: '#2B2C46' }} />
-            </Button>
+            {Object.keys(keyFilter).map((key, index) => {
+              if (!keyFilter[key]) return <></>;
+              return (
+                <Box
+                  key={index}
+                  className="box-keyFilter"
+                  style={{ display: 'flex', height: 'fit-content' }}
+                >
+                  <Typography className="keyFilter">{key}</Typography>
+                  <Button
+                    style={{ padding: 0 }}
+                    onClick={() => setKeyFilter({ ...keyFilter, [key]: false })}
+                  >
+                    <CloseIcon style={{ fontSize: 12, color: '#2B2C46' }} />
+                  </Button>
+                </Box>
+              );
+            })}
+            <p
+              style={{ fontWeight: 'bold', color: '#000' }}
+            >{`${selectedFilter}/${maxFilter}`}</p>
+            <Box
+              style={{
+                color: '#E31B5D',
+                fontSize: '12px',
+                cursor: 'pointer',
+                marginLeft: '12px',
+              }}
+              onClick={() => {
+                setKeyFilter({});
+              }}
+            >
+              Clear all
+            </Box>
           </Box>
         </Box>
       )}
@@ -204,7 +243,10 @@ function PreFilterComponent(props: Props) {
         height={'100%'}
         style={
           isMobile
-            ? { columnCount: 1, marginBottom: keyFilter ? '50px' : '0px' }
+            ? {
+                columnCount: 1,
+                marginBottom: keyFilter ? '50px' : '0px',
+              }
             : columns <= 4
             ? { columnCount: columns, height: '100%', paddingBottom: 20 }
             : { columnCount: 4, paddingBottom: 20 }
@@ -248,12 +290,22 @@ function PreFilterComponent(props: Props) {
                           minHeight: '20px',
                           color: '#2B2C46',
                           width: '100%',
+                          maxWidth: 'fit-content',
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
                           whiteSpace: 'nowrap',
+                          backgroundColor: keyFilter[item] ? '#E9E9EC' : '',
+                          borderRadius: 8,
+                          paddingLeft: '8px',
+                          paddingRight: '8px',
                         }}
                         onClick={() => {
-                          setKeyFilter(item);
+                          if (selectedFilter < maxFilter) {
+                            setKeyFilter({
+                              ...keyFilter,
+                              [item]: !keyFilter[item],
+                            });
+                          }
                         }}
                       >
                         {truncateString(item, !isMobile ? 35 : 35)}
@@ -297,10 +349,13 @@ function PreFilterComponent(props: Props) {
             className="button-left"
             style={{
               width: '50%',
+              height: '64px',
               backgroundColor: '#000000',
               color: '#fff',
               borderRadius: 0,
               justifyContent: 'flex-start',
+              textTransform: 'none',
+              paddingLeft: '16px',
             }}
             onClick={() => handleClose()}
           >
@@ -314,6 +369,8 @@ function PreFilterComponent(props: Props) {
               color: '#fff',
               borderRadius: 0,
               justifyContent: 'flex-start',
+              textTransform: 'none',
+              paddingLeft: '16px',
             }}
             onClick={() => onHandlerSubmitData()}
           >

package/src/components/results/ItemResult.tsx

@@ -217,7 +217,7 @@ function ItemResult(props: Props) {
                   <span style={{ marginRight: 3 }}>
                     {settings.itemIdLabel || 'SKU'}:
                   </span>
-                  {truncateString(sku, 20)}
+                  {truncateString(sku, isMobile ? 17 : 20)}
                 </Typography>
               </Tooltip>
 

package/src/components/rfq/RfqModal.tsx

@@ -0,0 +1,262 @@
+import DefaultModal from 'components/modal/DefaultModal';
+import React, { useEffect, useState } from 'react';
+import CloseIcon from '@material-ui/icons/Close';
+import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
+import emailjs from '@emailjs/browser';
+import { ToastHelper } from 'helpers/ToastHelper';
+import { isUndefined } from 'lodash';
+import { TextareaAutosize } from '@material-ui/core';
+import toast from 'react-hot-toast';
+import { ReactComponent as ErrorIcon } from 'common/assets/icons/error.svg';
+interface Props {
+  requestImage: any;
+  selectedRegion: any;
+  setIsRfqModalOpen: any;
+  isRfqModalOpen?: any;
+  setRfqStatus: any;
+}
+// eslint-disable-next-line
+const emailRegex = /.+\@.+\..+$/;
+
+const getErrorMessage = (error: any) => {
+  switch (error.status) {
+    case 400:
+      return 'Your email could not be sent, please try again or send an email to support@nyris.io';
+    case 421:
+    case 450:
+    case 451:
+    case 452:
+      return "Email delivery failed. Rest assured, we're continuously attempting to send it for you. Alternatively, you can forward the email to support@nyris.io";
+    default:
+      return 'Your email could not be sent, please try again or send an email to support@nyris.io';
+  }
+};
+
+export default function RfqModal({
+  requestImage,
+  selectedRegion,
+  setIsRfqModalOpen,
+  isRfqModalOpen,
+  setRfqStatus,
+}: Props) {
+  const [email, setEmail] = useState('');
+  const [emailValid, setEmailValid] = useState<boolean | undefined>(undefined);
+
+  const [information, setInformation] = useState('');
+  useEffect(() => emailjs.init('SMGihPnuEGcYLm0V4'), []);
+  useEffect(() => {
+    if (email)
+      emailRegex.test(email) ? setEmailValid(true) : setEmailValid(false);
+  }, [email]);
+
+  const handleRfq = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    const { canvas }: any = requestImage;
+    const croppedImage = getCroppedCanvas(canvas, selectedRegion);
+    const serviceId = 'service_zfsxshi';
+    const templateId = 'template_jlgc9le';
+    setIsRfqModalOpen(false);
+    try {
+      setRfqStatus('loading');
+      await emailjs.send(serviceId, templateId, {
+        email_id: email.trim(),
+        information_text: information,
+        request_image: croppedImage?.toDataURL(),
+      });
+      setRfqStatus('sent');
+      ToastHelper.success('Request sent successfully');
+    } catch (error) {
+      setRfqStatus('inactive');
+
+      toast(
+        t => {
+          return (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                fontSize: '14px',
+                width: '294px',
+              }}
+            >
+              <span style={{ fontWeight: 'bold' }}>Email not sent</span>
+              <span>{getErrorMessage(error)}</span>
+              <a
+                href={`mailto:support@nyris.io?subject=Request for quotation&body=${information}`}
+                style={{
+                  padding: '8px 16px 8px 16px',
+                  border: '1px solid #000',
+                  marginTop: '16px',
+                  backgroundColor: 'transparent',
+                  color: '#000',
+                  cursor: 'pointer',
+                  width: 'fit-content',
+                }}
+              >
+                support@nyris.io
+              </a>
+            </div>
+          );
+        },
+        {
+          duration: 5000,
+          style: {
+            background: '#FFE5EF',
+            color: '#000000',
+            maxWidth: '400px',
+          },
+          icon: (
+            <div style={{ minWidth: '20px', minHeight: '20px' }}>
+              <ErrorIcon />
+            </div>
+          ),
+        },
+      );
+    }
+    setIsRfqModalOpen(false);
+  };
+
+  return (
+    <DefaultModal
+      openModal={isRfqModalOpen}
+      handleClose={(e: any) => {
+        setIsRfqModalOpen(false);
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          width: '378px',
+          flexDirection: 'column',
+          backgroundColor: '#fff',
+        }}
+      >
+        <div
+          style={{
+            padding: '16px',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <CloseIcon
+            style={{
+              fontSize: 16,
+              color: 'black',
+              alignSelf: 'flex-end',
+              cursor: 'pointer',
+            }}
+            onClick={() => setIsRfqModalOpen(false)}
+          />
+          <p
+            style={{
+              color: '#2B2C46',
+              fontSize: '20px',
+              fontWeight: 'bold',
+            }}
+          >
+            Submit your image for quotation
+          </p>
+        </div>
+        <div
+          style={{
+            padding: '16px',
+            backgroundColor: '#F3F3F5',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <img
+            src={getCroppedCanvas(
+              requestImage?.canvas,
+              selectedRegion,
+            )?.toDataURL()}
+            alt="request_image"
+            style={{ maxHeight: '200px' }}
+          />
+        </div>
+        <div
+          style={{
+            padding: '0px 16px 16px 16px',
+            backgroundColor: '#F3F3F5',
+            display: 'flex',
+            flexDirection: 'column',
+            rowGap: '16px',
+          }}
+        >
+          <div>
+            <p style={{ fontSize: '12px', color: '#2B2C46' }}>
+              Your email (required)
+            </p>
+            <input
+              value={email}
+              onChange={e => setEmail(e.currentTarget.value.trim())}
+              style={{
+                width: '100%',
+                border: 'none',
+                height: '32px',
+                padding: '8px 16px 8px 16px',
+              }}
+            />
+            {!emailValid && !isUndefined(emailValid) && (
+              <p style={{ color: 'red', fontSize: '12px', paddingTop: '8px' }}>
+                Please enter a valid email.
+              </p>
+            )}
+          </div>
+          <div>
+            <p style={{ fontSize: '12px', color: '#2B2C46' }}>
+              Additional information
+            </p>
+            <TextareaAutosize
+              value={information}
+              onChange={e => setInformation(e.currentTarget.value)}
+              style={{
+                width: '100%',
+                border: 'none',
+                maxWidth: '346px',
+                padding: '8px 16px 8px 16px',
+              }}
+            />
+          </div>
+        </div>
+        <div style={{ display: 'flex' }}>
+          <button
+            style={{
+              height: '66px',
+              display: 'flex',
+              alignItems: 'center',
+              width: '50%',
+              backgroundColor: '#4B4B4A',
+              color: 'white',
+              fontSize: '14px',
+              paddingLeft: '16px',
+              border: 'none',
+              cursor: 'pointer',
+            }}
+            onClick={() => setIsRfqModalOpen(false)}
+          >
+            Cancel
+          </button>
+          <button
+            style={{
+              height: '66px',
+              display: 'flex',
+              alignItems: 'center',
+              width: '50%',
+              backgroundColor: emailValid ? '#4DBE51' : '#E9E9EC',
+              color: emailValid ? '#fff' : '#AAABB5',
+              fontSize: '14px',
+              paddingLeft: '16px',
+              border: 'none',
+              cursor: emailValid ? 'pointer' : 'normal',
+            }}
+            disabled={!emailValid}
+            onClick={handleRfq}
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </DefaultModal>
+  );
+}

package/src/helpers/ToastHelper.ts

@@ -10,4 +10,14 @@ export class ToastHelper {
       },
     });
   }
+
+  static error(msg: string) {
+    toast.error(msg, {
+      duration: 3000,
+      style: {
+        background: '#1E1F31',
+        color: '#fff',
+      },
+    });
+  }
 }

package/src/helpers/getCroppedCanvas.ts

@@ -0,0 +1,26 @@
+import {
+  RectCoords,
+  getElementSize,
+  getRectAspectRatio,
+  getThumbSizeArea,
+  elementToCanvas,
+} from '@nyris/nyris-api';
+
+export const getCroppedCanvas = (
+  canvas: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement,
+  cropRect?: RectCoords,
+) => {
+  let crop = cropRect || {
+    x1: 0,
+    x2: 1,
+    y1: 0,
+    y2: 1,
+  };
+  if (!canvas) return null;
+
+  const originalSize = getElementSize(canvas);
+  const aspectRatio = getRectAspectRatio(crop, originalSize);
+  let scaledSize = getThumbSizeArea(600, 600, aspectRatio);
+  let resizedCroppedCanvas = elementToCanvas(canvas, scaledSize, crop);
+  return resizedCroppedCanvas;
+};

package/src/hooks/useFilteredRegions.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+const useFilteredRegions = (regions: any, imageSelection: any) => {
+  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 };
+        },
+      ),
+
+    [regions, imageSelection],
+  );
+
+  return filteredRegions;
+};
+
+export default useFilteredRegions;

package/src/index.css

@@ -581,10 +581,6 @@ h6 {
   margin: 22px auto 8px;
 }
 
-p {
-  margin-bottom: 16px;
-}
-
 p a {
   text-decoration: underline;
 }

package/src/page/landingPage/AppMD.tsx

@@ -3,12 +3,9 @@ import React, { useState } from 'react';
 import './common.scss';
 import { cadExtensions } from '@nyris/nyris-api';
 import algoliasearch from 'algoliasearch/lite';
-import IconSupport from 'common/assets/icons/support3.svg';
 import DragDropFile from 'components/DragDropFile';
 import CustomSearchBox from 'components/input/inputSearch';
 import { connectInfiniteHits } from 'react-instantsearch-dom';
-import { useMediaQuery } from 'react-responsive';
-import { Link } from 'react-router-dom';
 import { useAppSelector } from 'Store/Store';
 import { AlgoliaSettings } from '../../types';
 
@@ -18,7 +15,6 @@ function AppMD() {
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
   const searchClient = algoliasearch(appId, apiKey);
   searchClient.initIndex(indexName);
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   const acceptTypes = ['image/*']
     .concat(settings.cadSearch ? cadExtensions : [])
@@ -36,13 +32,6 @@ function AppMD() {
 
   return (
     <Box className={`box-content-main ${isLoading ? 'loading' : ''}`}>
-      {isMobile && (
-        <Box className="btn-open-support">
-          <Link to={'/support'} style={{ color: '#3E36DC' }}>
-            <img src={IconSupport} alt="" width={16} height={16} />
-          </Link>
-        </Box>
-      )}
       <Box className="box-content_top">
         <Box className="fw-700 text-f32 text-dark2">
           <h1>{settings.headerText}</h1>

package/src/page/landingPage/AppMobile.tsx

@@ -21,6 +21,7 @@ function AppMobile(): JSX.Element {
         justifyContent: 'center',
         alignItems: 'center',
         width: '100%',
+        height: '100%',
       }}
     >
       <div className="take-photo">