@nyris/nyris-webapp 0.3.38 → 0.3.40

package/build/static/media/arrow_down.c1b611db.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.65944 10.4215C8.28211 10.7525 7.71789 10.7525 7.34056 10.4215L3.3956 6.96105C3.18599 6.77719 3.18599 6.45088 3.3956 6.26702C3.56978 6.11423 3.83022 6.11423 4.0044 6.26702L7.34056 9.19348C7.71789 9.52446 8.28211 9.52446 8.65944 9.19348L11.9956 6.26702C12.1698 6.11423 12.4302 6.11423 12.6044 6.26702C12.814 6.45088 12.814 6.77719 12.6044 6.96105L8.65944 10.4215Z" fill="#currentColor"/>
+</svg>

package/build/static/media/arrow_up.fcd6b144.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.65944 6.57845C8.28211 6.24747 7.71789 6.24747 7.34056 6.57845L3.3956 10.0389C3.18599 10.2228 3.18599 10.5491 3.3956 10.733C3.56978 10.8858 3.83022 10.8858 4.0044 10.733L7.34056 7.80652C7.71789 7.47554 8.28211 7.47554 8.65944 7.80652L11.9956 10.733C12.1698 10.8858 12.4302 10.8858 12.6044 10.733C12.814 10.5491 12.814 10.2228 12.6044 10.0389L8.65944 6.57845Z" fill="currentColor"/>
+</svg>

package/build/static/media/trash.1624780d.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0.5C9 0.223858 8.77614 0 8.5 0H5.5C5.22386 0 5 0.223858 5 0.5C5 0.776142 5.22386 1 5.5 1H8.5C8.77614 1 9 0.776142 9 0.5ZM1.5 3C1.22386 3 1 2.77614 1 2.5C1 2.22386 1.22386 2 1.5 2H12.5C12.7761 2 13 2.22386 13 2.5C13 2.77614 12.7761 3 12.5 3C12.2239 3 12 3.22386 12 3.5V13C12 13.5523 11.5523 14 11 14H3C2.44772 14 2 13.5523 2 13V3.5C2 3.22386 1.77614 3 1.5 3ZM4 3C3.44772 3 3 3.44772 3 4V12C3 12.5523 3.44772 13 4 13H10C10.5523 13 11 12.5523 11 12V4C11 3.44772 10.5523 3 10 3H4ZM6 5.5C6 5.22386 5.77614 5 5.5 5C5.22386 5 5 5.22386 5 5.5V10.5C5 10.7761 5.22386 11 5.5 11C5.77614 11 6 10.7761 6 10.5V5.5ZM9 5.5C9 5.22386 8.77614 5 8.5 5C8.22386 5 8 5.22386 8 5.5V10.5C8 10.7761 8.22386 11 8.5 11C8.77614 11 9 10.7761 9 10.5V5.5Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.38",
+  "version": "0.3.40",
   "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.38",
-    "@nyris/nyris-react-components": "^0.3.38",
+    "@nyris/nyris-api": "^0.3.40",
+    "@nyris/nyris-react-components": "^0.3.40",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/src/App.tsx

@@ -7,24 +7,24 @@ import 'index.css';
 import { useMediaQuery } from 'react-responsive';
 import AppMD from 'page/landingPage/AppMD';
 import AppMobile from 'page/landingPage/AppMobile';
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import { useAppSelector } from 'Store/Store';
-import { translations } from 'translations';
+// import i18n from 'i18next';
+// import { initReactI18next } from 'react-i18next';
+// import { useAppSelector } from 'Store/Store';
+// import { translations } from 'translations';
 
-i18n.use(initReactI18next).init({
-  resources: translations,
-  fallbackLng: 'en',
-  interpolation: {
-    escapeValue: false,
-  },
-  returnNull: false,
-});
+// i18n.use(initReactI18next).init({
+//   resources: translations,
+//   fallbackLng: 'en',
+//   interpolation: {
+//     escapeValue: false,
+//   },
+//   returnNull: false,
+// });
 
 function App(): JSX.Element {
-  const language = useAppSelector(state => state.settings.language);
+  // const language = useAppSelector(state => state.settings.language);
 
-  i18n.changeLanguage(language);
+  // i18n.changeLanguage(language);
 
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   let SelectedApp: any = isMobile ? AppMobile : AppMD;

package/src/common/assets/icons/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.65944 10.4215C8.28211 10.7525 7.71789 10.7525 7.34056 10.4215L3.3956 6.96105C3.18599 6.77719 3.18599 6.45088 3.3956 6.26702C3.56978 6.11423 3.83022 6.11423 4.0044 6.26702L7.34056 9.19348C7.71789 9.52446 8.28211 9.52446 8.65944 9.19348L11.9956 6.26702C12.1698 6.11423 12.4302 6.11423 12.6044 6.26702C12.814 6.45088 12.814 6.77719 12.6044 6.96105L8.65944 10.4215Z" fill="#currentColor"/>
+</svg>

package/src/common/assets/icons/arrow_up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.65944 6.57845C8.28211 6.24747 7.71789 6.24747 7.34056 6.57845L3.3956 10.0389C3.18599 10.2228 3.18599 10.5491 3.3956 10.733C3.56978 10.8858 3.83022 10.8858 4.0044 10.733L7.34056 7.80652C7.71789 7.47554 8.28211 7.47554 8.65944 7.80652L11.9956 10.733C12.1698 10.8858 12.4302 10.8858 12.6044 10.733C12.814 10.5491 12.814 10.2228 12.6044 10.0389L8.65944 6.57845Z" fill="currentColor"/>
+</svg>

package/src/common/assets/icons/trash.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0.5C9 0.223858 8.77614 0 8.5 0H5.5C5.22386 0 5 0.223858 5 0.5C5 0.776142 5.22386 1 5.5 1H8.5C8.77614 1 9 0.776142 9 0.5ZM1.5 3C1.22386 3 1 2.77614 1 2.5C1 2.22386 1.22386 2 1.5 2H12.5C12.7761 2 13 2.22386 13 2.5C13 2.77614 12.7761 3 12.5 3C12.2239 3 12 3.22386 12 3.5V13C12 13.5523 11.5523 14 11 14H3C2.44772 14 2 13.5523 2 13V3.5C2 3.22386 1.77614 3 1.5 3ZM4 3C3.44772 3 3 3.44772 3 4V12C3 12.5523 3.44772 13 4 13H10C10.5523 13 11 12.5523 11 12V4C11 3.44772 10.5523 3 10 3H4ZM6 5.5C6 5.22386 5.77614 5 5.5 5C5.22386 5 5 5.22386 5 5.5V10.5C5 10.7761 5.22386 11 5.5 11C5.77614 11 6 10.7761 6 10.5V5.5ZM9 5.5C9 5.22386 8.77614 5 8.5 5C8.22386 5 8 5.22386 8 5.5V10.5C8 10.7761 8.22386 11 8.5 11C8.77614 11 9 10.7761 9 10.5V5.5Z" fill="currentColor"/>
+</svg>

package/src/components/AppMobile.tsx

@@ -36,6 +36,7 @@ function AppMobile({ children }: { children: ReactNode }) {
             flexDirection: 'column',
             overflowY: 'auto',
             overflowX: 'hidden',
+            height: '100%',
           }}
         >
           {children}

package/src/components/CadenasLoading.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useMediaQuery } from 'react-responsive';
 
 const LoadingSpinner = () => (
@@ -8,7 +9,7 @@ const LoadingSpinner = () => (
     viewBox="0 0 150 150"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className="LoadingSpinner"
+    className="loading-spinner"
   >
     <path
       fillRule="evenodd"
@@ -34,7 +35,7 @@ const LoadingSpinner = () => (
 
 function CadenasLoading() {
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-
+  const { t } = useTranslation();
   return (
     <div
       style={{
@@ -56,7 +57,7 @@ function CadenasLoading() {
           transform: 'translate(-50%, -50%)',
         }}
       >
-        loading
+        {t('loading')}
       </p>
       <LoadingSpinner />
     </div>

package/src/components/DragDropFile.tsx

@@ -19,6 +19,7 @@ import { ReactComponent as IconDownload } from 'common/assets/icons/IconUploadDo
 import { RectCoords } from '@nyris/nyris-api';
 import { useTranslation } from 'react-i18next';
 import { isEmpty } from 'lodash';
+import Loading from './Loading';
 
 interface Props {
   acceptTypes: any;
@@ -87,12 +88,11 @@ function DragDropFile(props: Props) {
   });
 
   return (
-    <Box className={`box-content-main`} style={{ marginTop: 16 }}>
-      {isLoading && (
-        <Box className="loadingSpinCT">
-          <Box className="box-content-spin"></Box>
-        </Box>
-      )}
+    <Box
+      className={`box-content-main`}
+      style={{ marginTop: 32, paddingTop: 0 }}
+    >
+      {isLoading && <Loading />}
 
       <div
         className={`box-border-none`}
@@ -117,9 +117,9 @@ function DragDropFile(props: Props) {
             </Box>
             <label htmlFor="select_file" className="" style={{ fontSize: 14 }}>
               <span className="fw-700 text-f14" style={{ paddingRight: '4px' }}>
-                {t('Choose an image')}
+                {t('Drag and drop')}
               </span>
-              {t('or drag it here')}
+              {t('an image here')}
             </label>
             <input
               {...getInputProps()}

package/src/components/HeaderMobile.tsx

@@ -25,6 +25,7 @@ import { ReactComponent as FilterIcon } from 'common/assets/icons/filter.svg';
 
 import { debounce, isEmpty } from 'lodash';
 import { useQuery } from 'hooks/useQuery';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   onToggleFilterMobile?: any;
@@ -44,7 +45,9 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     preFilterDropdown,
     valueTextSearch,
   } = search;
+
   const query = useQuery();
+  const searchQuery = query.get('query') || '';
   const containerRefInputMobile = useRef<HTMLDivElement>(null);
   const [isShowFilter, setShowFilter] = useState<boolean>(false);
   const history = useHistory();
@@ -70,7 +73,6 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   }, [imageThumbSearchInput, dispatch, refine, history]);
 
   useEffect(() => {
-    const searchQuery = query.get('query') || '';
     if (!isEmpty(searchQuery)) {
       dispatch(updateValueTextSearchMobile(searchQuery));
       refine(searchQuery);
@@ -79,7 +81,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
         refine(searchQuery);
       }, 100);
     }
-  }, [query, refine, dispatch]);
+  }, [query, refine, dispatch, searchQuery]);
 
   const searchOrRedirect = useCallback(
     debounce((value: any) => {
@@ -159,7 +161,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
       )}
       <div
         style={{
-          margin: '16px 8px 0px 8px',
+          margin: '16px 8px',
           display: 'flex',
           columnGap: '8px',
           alignItems: 'center',
@@ -215,8 +217,8 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                   <div
                     style={{
                       position: 'absolute',
-                      top: '10px',
-                      left: '31px',
+                      top: '7px',
+                      left: '35px',
                       display: 'flex',
                       justifyContent: 'center',
                       alignItems: 'center',
@@ -238,7 +240,10 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                 )}
               </Box>
 
-              <Input value={textSearchInputMobile} onChange={onChangeText} />
+              <Input
+                value={textSearchInputMobile || searchQuery}
+                onChange={onChangeText}
+              />
 
               {history.location?.pathname !== '/' && textSearchInputMobile && (
                 <Button
@@ -363,6 +368,7 @@ const Input = ({ value, onChange }: any) => {
       element?.removeEventListener('scroll', inputEventFn, false);
     };
   }, []);
+  const { t } = useTranslation();
 
   return (
     <input
@@ -379,7 +385,7 @@ const Input = ({ value, onChange }: any) => {
         borderRadius: '32px',
       }}
       className="input-search"
-      placeholder="Search"
+      placeholder={t('Search')}
       value={value}
       onChange={onChange}
       id={INPUT_ID}

package/src/components/ImageCaptureHelpModal.tsx

@@ -11,8 +11,6 @@ function ImageCaptureHelpModal({ handleClose }: Props) {
   return (
     <Box
       style={{
-        paddingLeft: '24px',
-        paddingRight: '24px',
         paddingBottom: '24px',
       }}
     >
@@ -23,8 +21,11 @@ function ImageCaptureHelpModal({ handleClose }: Props) {
         top={0}
         style={{ background: 'white', width: '100%' }}
       >
-        <Button onClick={handleClose}>
-          <CloseIcon />
+        <Button
+          onClick={handleClose}
+          style={{ paddingTop: '8px', paddingRight: '8px' }}
+        >
+          <CloseIcon fontSize={'small'} />
         </Button>
       </Box>
       <p
@@ -33,6 +34,8 @@ function ImageCaptureHelpModal({ handleClose }: Props) {
           lineHeight: '40px',
           fontWeight: 700,
           color: '#2B2C46',
+          paddingLeft: '24px',
+          paddingRight: '24px',
         }}
       >
         Six ways to optimize visual search
@@ -43,6 +46,8 @@ function ImageCaptureHelpModal({ handleClose }: Props) {
           flexDirection: 'column',
           rowGap: '16px',
           marginTop: '16px',
+          paddingLeft: '24px',
+          paddingRight: '24px',
         }}
       >
         {visualSearchHelp.map((data, index) => {

package/src/components/ImagePreviewMobile.tsx

@@ -1,12 +1,20 @@
-import React from 'react';
-import { Box, Typography } from '@material-ui/core';
+import React, { memo, useState } from 'react';
+import { Box, Typography, Hidden } from '@material-ui/core';
 import { RectCoords } from '@nyris/nyris-api';
 import { Preview } from '@nyris/nyris-react-components';
 import { DEFAULT_REGION } from '../constants';
 import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
 import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from 'Store/Store';
+import { ReactComponent as ArrowUp } from 'common/assets/icons/arrow_up.svg';
+import { ReactComponent as ArrowDown } from 'common/assets/icons/arrow_down.svg';
+import { ReactComponent as Trash } from 'common/assets/icons/trash.svg';
+import { useQuery } from 'hooks/useQuery';
+import { reset } from 'Store/search/Search';
+import { useHistory } from 'react-router-dom';
+import { connectSearchBox } from 'react-instantsearch-dom';
 
-function ImagePreviewMobile({
+function ImagePreviewMobileComponent({
   requestImage,
   imageSelection,
   setImageSelection,
@@ -14,6 +22,7 @@ function ImagePreviewMobile({
   filteredRegions,
   showAdjustInfo,
   showAdjustInfoBasedOnConfidence,
+  ...rest
 }: {
   requestImage: any;
   imageSelection: any;
@@ -24,64 +33,242 @@ function ImagePreviewMobile({
   showAdjustInfo: any;
 }) {
   const { t } = useTranslation();
+  const { refine }: any = rest;
+  const [editActive, setEditActive] = useState(false);
+  const [showShrinkAnimation, setShrinkAnimation] = useState(false);
+  const query = useQuery();
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+
+  const handleArrowClick = () => {
+    setEditActive(s => !s);
+    setShrinkAnimation(true);
+  };
+
+  const onImageRemove = () => {
+    const searchQuery = query.get('query') || '';
+
+    if (!searchQuery) {
+      dispatch(reset(''));
+      history.push('/');
+    }
+    dispatch(reset(''));
+
+    // not an ideal solution: fixes text search not working after removing image
+    setTimeout(() => {
+      refine(searchQuery);
+    }, 100);
+  };
 
   return (
     <Box
       className="col-left"
       style={{
-        backgroundColor: '#AAABB5',
+        backgroundColor: '#5D5D63',
         marginBottom: '15px',
       }}
     >
-      {
-        <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}
-              rounded={false}
-            />
+      {editActive && (
+        <div>
+          <Box className="box-preview">
+            <Box
+              className="preview-item expand-animation"
+              style={{ backgroundColor: 'transparent' }}
+            >
+              <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}
+                rounded={false}
+                expandAnimation={true}
+              />
+            </Box>
+            {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
+              <Box
+                className="box-title_col-left"
+                alignItems="center"
+                style={{
+                  backgroundColor: '#3E36DC',
+                  display: 'flex',
+                  columnGap: '6px',
+                  padding: '5px',
+                  width: 'fit-content',
+                }}
+              >
+                <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>
-          {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
+          <Hidden>
             <Box
-              className="box-title_col-left"
-              alignItems="center"
-              style={{
-                backgroundColor: '#3E36DC',
-                display: 'flex',
-                columnGap: '6px',
-                padding: '5px',
-                width: 'fit-content',
+              sx={{
+                position: 'absolute',
+                left: '15px',
+                top: '25px',
+                padding: '4px',
               }}
+              onClick={onImageRemove}
             >
-              <IconInfo color="white" />
-              <Typography
+              <Box
+                sx={{
+                  width: '24px',
+                  height: '24px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  display: 'flex',
+                  borderRadius: '100%',
+                }}
+              >
+                <Trash color="white" fill="white" />
+              </Box>
+            </Box>
+          </Hidden>
+
+          <Hidden mdUp>
+            <Box
+              className="slideDown"
+              sx={{
+                position: 'absolute',
+                bottom: '25px',
+                right: '20px',
+              }}
+              onClick={handleArrowClick}
+            >
+              <Box
+                bgcolor={'white'}
+                sx={{
+                  width: '24px',
+                  height: '24px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  display: 'flex',
+                  borderRadius: '100%',
+                }}
+              >
+                <ArrowUp color="black" />
+              </Box>
+            </Box>
+          </Hidden>
+        </div>
+      )}
+      {!editActive && (
+        <Box
+          className={showShrinkAnimation ? 'shrink-animation' : ''}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 80,
+            width: '100%',
+          }}
+        >
+          <Hidden>
+            <Box
+              sx={{
+                position: 'absolute',
+                left: '15px',
+                top: '25px',
+                padding: '4px',
+              }}
+              onClick={onImageRemove}
+            >
+              <Box
+                // className={showShrinkAnimation ? 'slideUp' : ''}
+                sx={{
+                  width: '24px',
+                  height: '24px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  display: 'flex',
+                  borderRadius: '100%',
+                }}
+              >
+                <Trash color="white" fill="white" />
+              </Box>
+            </Box>
+          </Hidden>
+          <Box
+            sx={{
+              display: 'flex',
+              height: '100%',
+              width: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+            onClick={handleArrowClick}
+          >
+            {requestImage && requestImage?.canvas?.toDataURL && (
+              <img
+                src={requestImage?.canvas?.toDataURL()}
                 style={{
-                  fontSize: 10,
-                  color: '#fff',
+                  width: '80px',
+                  height: '80px',
+                  objectFit: 'contain',
+                  background: 'white',
+                }}
+                alt="preview"
+              />
+            )}
+
+            <div
+              className={
+                showShrinkAnimation
+                  ? 'shrink-animation circle-layer'
+                  : 'circle-layer'
+              }
+            ></div>
+          </Box>
+          <Hidden mdUp>
+            <Box
+              sx={{
+                position: 'absolute',
+                right: '25px',
+                padding: '4px',
+              }}
+              onClick={handleArrowClick}
+            >
+              <Box
+                bgcolor={'white'}
+                className={showShrinkAnimation ? 'slideUp' : ''}
+                sx={{
+                  width: '24px',
+                  height: '24px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  display: 'flex',
+                  borderRadius: '100%',
                 }}
               >
-                {showAdjustInfo
-                  ? t('Crop the image for better results')
-                  : 'Crop the image for better results'}
-              </Typography>
+                <ArrowDown color="black" fill="black" />
+              </Box>
             </Box>
-          )}
+          </Hidden>
         </Box>
-      }
+      )}
     </Box>
   );
 }
-
+const ImagePreviewMobile = connectSearchBox<any>(
+  memo(ImagePreviewMobileComponent),
+);
 export default ImagePreviewMobile;

package/src/components/Inquiry/InquiryBanner.tsx

@@ -128,7 +128,7 @@ function InquiryBanner({
                 setIsInquiryModalOpen(true);
               }}
             >
-              Inquiry
+              Submit an Inquiry
             </button>
           </Box>
         </Box>