@nyris/nyris-webapp 0.3.34 → 0.3.36

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

@@ -1,13 +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 { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
+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';
 
@@ -15,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)
@@ -37,8 +50,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 +76,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();
@@ -79,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);
@@ -98,7 +105,7 @@ function PreFilterComponent(props: Props) {
   };
 
   const onHandlerSubmitData = () => {
-    dispatch(setUpdateKeyFilterDesktop(keyFilter));
+    dispatch(setPreFilter(pickBy(keyFilter, value => !!value)));
     handleClose();
   };
 
@@ -125,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',
           }}
@@ -139,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'}
@@ -150,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"
@@ -189,17 +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">{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>
       )}
@@ -208,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 }
@@ -216,25 +254,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 +280,40 @@ 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={() => {
-                          setKeyFilter(item);
+                        style={{
+                          cursor: 'pointer',
+                          fontSize: '12px',
+                          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={() => {
+                          if (selectedFilter < maxFilter) {
+                            setKeyFilter({
+                              ...keyFilter,
+                              [item]: !keyFilter[item],
+                            });
+                          }
                         }}
                       >
-                        {truncateString(item, !isMobile ? 20 : 35)}
-                      </ToggleButton>
+                        {truncateString(item, !isMobile ? 35 : 35)}
+                      </Box>
                     </Tooltip>
                   );
                 })}
-              </ToggleButtonGroup>
+              </Box>
             </Box>
           );
         })}
@@ -293,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()}
           >
@@ -310,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

@@ -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>
 
@@ -222,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>
 
@@ -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/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>
+  );
+}