@nyris/nyris-webapp 0.3.53 → 0.3.55

package/src/components/DragDropFile.tsx

@@ -10,6 +10,11 @@ import {
   loadingActionResults,
   setRegions,
   setSelectedRegion,
+  setShowFeedback,
+  setFirstSearchResults,
+  setFirstSearchImage,
+  setFirstSearchPrefilters,
+  setFirstSearchThumbSearchInput
 } from 'Store/search/Search';
 import { useHistory } from 'react-router-dom';
 import { ReactComponent as IconDownload } from 'common/assets/icons/IconUploadDownward.svg';
@@ -50,7 +55,7 @@ function DragDropFile(props: Props) {
       const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
+          values: Object.keys(preFilter),
         },
       ];
       let region: RectCoords | undefined;
@@ -83,6 +88,12 @@ function DragDropFile(props: Props) {
           dispatch(setSearchResults(payload));
           onChangeLoading(false);
           dispatch(updateStatusLoading(false));
+          dispatch(setShowFeedback(true));
+          // go back
+          dispatch(setFirstSearchResults(payload));
+          dispatch(setFirstSearchImage(image));
+          dispatch(setFirstSearchPrefilters(preFilter));
+          dispatch(setFirstSearchThumbSearchInput(URL.createObjectURL(fs[0])));
           return;
         });
       }
@@ -105,35 +116,32 @@ function DragDropFile(props: Props) {
           },
         })}
       >
-        <>
-          <div
-            className={`box-content-drop ${isDragActive ? 'drag-active' : ''}`}
-            {...getRootProps({
-              onClick: e => {
-                e.stopPropagation();
-              },
+        <div
+          className={`box-content-drop ${isDragActive ? 'drag-active' : ''}`}
+          {...getRootProps({
+            onClick: e => {
+              e.stopPropagation();},
             })}
-          >
-            <div style={{ marginBottom: 16 }}>
-              <IconDownload width={48} height={48} />
-            </div>
-            <label htmlFor="select_file" className="" style={{ fontSize: 14 }}>
-              <span className="fw-700 text-f14" style={{ paddingRight: '4px' }}>
-                {t('Drag and drop')}
-              </span>
-              {t('an image here')}
-            </label>
-            <input
-              {...getInputProps()}
-              type="file"
-              name="file"
-              id="select_file"
-              className="inputFile"
-              placeholder="Choose photo"
-              style={{ display: 'block', cursor: 'pointer' }}
-            />
+        >
+          <div style={{ marginBottom: 16 }}>
+            <IconDownload width={48} height={48} />
           </div>
-        </>
+          <label htmlFor="select_file" className="" style={{ fontSize: 14 }}>
+            <span className="fw-700 text-f14" style={{ paddingRight: '4px' }}>
+              {t('Drag and drop')}
+            </span>
+            {t('an image here')}
+          </label>
+          <input
+            {...getInputProps()}
+            type="file"
+            name="file"
+            id="select_file"
+            className="inputFile"
+            placeholder="Choose photo"
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        </div>
       </div>
     </div>
   );

package/src/components/Experience-visual-search/ExperienceVisualSearch.scss

@@ -24,7 +24,7 @@ body.overflow-hidden {
       margin-right: 8px;
       overflow: hidden;
       white-space: nowrap;
-      font-family: 'Source Sans 3';
+      font-family: 'Source Sans 3', sans-serif;
       font-size: 14px;
       font-weight: 600;
       line-height: 16px;
@@ -63,7 +63,7 @@ body.overflow-hidden {
       position: absolute;
     }
     &-title {
-      font-family: 'Source Sans 3';
+      font-family: 'Source Sans 3', sans-serif;;
       font-size: 20px;
       font-weight: 700;
       line-height: 24px;
@@ -103,7 +103,6 @@ body.overflow-hidden {
             position: absolute;
             border-radius: 100%;
             background-color: #F3F3F5;
-            display: block;
             overflow: hidden;
             z-index: 11;
             width: 32px;
@@ -160,7 +159,7 @@ body.overflow-hidden {
       margin-right: 8px;
       overflow: hidden;
       white-space: nowrap;
-      font-family: 'Source Sans 3';
+      font-family: 'Source Sans 3', sans-serif;;
       font-size: 14px;
       font-weight: 600;
       line-height: 16px;

package/src/components/Experience-visual-search/ExperienceVisualSearch.tsx

@@ -12,7 +12,11 @@ import {
   setRequestImage,
   setSearchResults,
   setSelectedRegion,
-  updateStatusLoading
+  updateStatusLoading,
+  setFirstSearchResults,
+  setFirstSearchImage,
+  setFirstSearchPrefilters,
+  setFirstSearchThumbSearchInput
 } from '../../Store/search/Search';
 import { createImage, find, findRegions } from '../../services/image';
 import { RectCoords } from '@nyris/nyris-api';
@@ -34,12 +38,10 @@ function ExperienceVisualSearch() {
             (button.current as HTMLElement).classList.toggle('hover');
           }
         }, 3000);
-      } else {
-        if (interval?.current) {
-          clearInterval(interval?.current);
-          if (button?.current && !(button.current as HTMLElement).classList.contains('hover')) {
-            (button.current as HTMLElement).classList.toggle('hover');
-          }
+      } else if (interval?.current) {
+        clearInterval(interval?.current);
+        if (button?.current && !(button.current as HTMLElement).classList.contains('hover')) {
+          (button.current as HTMLElement).classList.toggle('hover');
         }
       }
       return () => {
@@ -91,6 +93,11 @@ function ExperienceVisualSearch() {
     }).then((res: any) => {
       dispatch(setSearchResults(res));
       dispatch(updateStatusLoading(false));
+      // go back
+      dispatch(setFirstSearchResults(res));
+      dispatch(setFirstSearchImage(image));
+      dispatch(setFirstSearchPrefilters(search.preFilter));
+      dispatch(setFirstSearchThumbSearchInput(url));
       return;
     });
   };

package/src/components/Feedback.tsx

@@ -13,19 +13,19 @@ function Feedback({
   return (
     <div className="feedback-wrapper">
       <p>Are these results useful?</p>
+
       <div
         className="feedback-icon-wrapper"
-        onClick={() => submitFeedback(false)}
+        onClick={() => submitFeedback(true)}
       >
-        <IconDislike />
+        <IconLike />
       </div>
       <div
         className="feedback-icon-wrapper"
-        onClick={() => submitFeedback(true)}
+        onClick={() => submitFeedback(false)}
       >
-        <IconLike />
+        <IconDislike />
       </div>
-
       <div className="feedback-icon-wrapper" onClick={() => onFeedbackClose()}>
         <IconClose />
       </div>

package/src/components/FooterMobile.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { ReactComponent as IconCameraMobile } from 'common/assets/icons/icon_camera_mobile.svg';
 import CameraCustom from './drawer/cameraCustom';
 import { ReactComponent as Home } from 'common/assets/icons/home.svg';
-import { NavLink, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
 import { ReactComponent as IconLogout } from 'common/assets/icons/logout.svg';
@@ -135,7 +135,7 @@ function FooterMobile(props: Props): JSX.Element {
           justifyContent: 'space-between',
         }}
       >
-        <NavLink
+        <a
           style={{
             width: '48px',
             height: '48px',
@@ -148,8 +148,7 @@ function FooterMobile(props: Props): JSX.Element {
                 ? `#E0E0E0`
                 : '',
           }}
-          activeClassName="active"
-          to={'/'}
+          href="/"
           className="nav-link p-0 menu-children rounded-0"
           onClick={() => {
             dispatch(reset(''));
@@ -164,7 +163,7 @@ function FooterMobile(props: Props): JSX.Element {
                 : '#AAABB5'
             }
           />
-        </NavLink>
+        </a>
         {history.location?.pathname !== '/' && !imageCaptureHelpModal && (
           <div className="box-icon-camera-mobile">
             <Button

package/src/components/GoBackButton.tsx

@@ -0,0 +1,54 @@
+import React, {useCallback} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMediaQuery } from 'react-responsive';
+import { CurrentRefinementsProvided } from 'react-instantsearch-core';
+import {
+  setImageSearchInput,
+  setPreFilter,
+  setRequestImage,
+  setSearchResults,
+  clearPostFilter
+} from '../Store/search/Search';
+import { connectCurrentRefinements } from 'react-instantsearch-dom';
+import { ReactComponent as GoBackIcon } from 'common/assets/icons/path.svg';
+import { useAppDispatch, useAppSelector } from '../Store/Store';
+
+const GoBackButton = ({ items, refine }: CurrentRefinementsProvided) => {
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const dispatch = useAppDispatch();
+  const stateGlobal = useAppSelector(state => state);
+  const { search } = stateGlobal;
+  const {
+    firstSearchResults,
+    firstSearchImage,
+    firstSearchPrefilters,
+    firstSearchThumbSearchInput,
+  } = search;
+  const clearPostFilters = useCallback(() => refine(items), [refine, items]);
+  const { t } = useTranslation();
+
+  const onGoBack = () => {
+    dispatch(setSearchResults(firstSearchResults));
+    dispatch(setRequestImage(firstSearchImage));
+    dispatch(setPreFilter(firstSearchPrefilters));
+    dispatch(clearPostFilter());
+    clearPostFilters();
+    if (!isMobile) {
+      dispatch(setImageSearchInput(firstSearchThumbSearchInput));
+    }
+  }
+
+  return (
+    <div
+      className={`go-back-button ${isMobile ? 'mobile-view' : ''}`}
+      onClick={() => onGoBack()}
+    >
+      <GoBackIcon width={16} height={16}  />
+      {t('Back to request image')}
+    </div>
+  )
+};
+
+export const GoBack = connectCurrentRefinements<any>(
+  GoBackButton,
+);

package/src/components/Header.tsx

@@ -1,20 +1,33 @@
 import { Menu, MenuProps, withStyles } from '@material-ui/core';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import { useHistory } from 'react-router-dom';
 import './common.scss';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { reset, setPreFilter } from 'Store/search/Search';
 import { useAuth0 } from '@auth0/auth0-react';
 import { ReactComponent as AvatarIcon } from 'common/assets/icons/avatar.svg';
 import MenuItem from '@material-ui/core/MenuItem';
+import CustomSearchBox from "./input/inputSearch";
+
 
 function Header(): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings } = useAppSelector(state => state);
   const { user, isAuthenticated, logout } = useAuth0();
   const auth0 = settings.auth0;
-
+  const history = useHistory();
+  const [showSearchBar, setShowSearchBar] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
 
+  useEffect(() => {
+    if (history.location?.pathname === '/') {
+      setShowSearchBar(false);
+    } else {
+      setShowSearchBar(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [history.location]);
+
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget);
   };
@@ -60,7 +73,7 @@ function Header(): JSX.Element {
   }))(MenuItem);
 
   return (
-    <div className="box-content" style={{ display: 'flex' }}>
+    <div className="box-content" style={{ display: 'flex', position: 'relative' }}>
       <a
         href={window.location.origin}
         style={{ lineHeight: 0, paddingLeft: '10px' }}
@@ -79,6 +92,17 @@ function Header(): JSX.Element {
           }}
         />
       </a>
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          display: showSearchBar ? 'block' : 'none'
+        }}
+      >
+        <CustomSearchBox />
+      </div>
 
       {auth0.enabled && isAuthenticated && (
         <div style={{ position: 'relative' }}>

package/src/components/HeaderMobile.tsx

@@ -20,6 +20,7 @@ import {
   updateQueryText,
   updateStatusLoading,
   setSearchResults,
+  setShowFeedback,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
@@ -124,7 +125,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
         const preFilterValues = [
           {
             key: settings.visualSearchFilterKey,
-            values: Object.keys(preFilter) as string[],
+            values: Object.keys(preFilter),
           },
         ];
         if (value || requestImage) {
@@ -149,6 +150,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
               };
               dispatch(setSearchResults(payload));
               dispatch(updateStatusLoading(false));
+              dispatch(setShowFeedback(true));
             })
             .catch((e: any) => {
               console.log('error input search', e);
@@ -221,6 +223,17 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings, results, props.allSearchResults?.hits]);
 
+  const showPreFilter = useMemo(() => {
+    if (settings.shouldUseUserMetadata && user) {
+      if (settings.preFilterOption && !user['/user_metadata'].value) {
+        return true;
+      }
+      return false;
+    }
+
+    return settings.preFilterOption;
+  }, [settings.preFilterOption, settings.shouldUseUserMetadata, user]);
+
   return (
     <div style={{ width: '100%', background: '#fff' }}>
       {history.location?.pathname !== '/result' && (
@@ -283,20 +296,20 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                 <div
                   className="pre-filter-icon"
                   onClick={() => {
-                    if (settings.preFilterOption) {
+                    if (showPreFilter) {
                       onToggleFilterMobile(false);
                       dispatch(setPreFilterDropdown(!preFilterDropdown));
                     }
                   }}
-                  style={{ cursor: settings.preFilterOption ? 'pointer' : '' }}
+                  style={{ cursor: showPreFilter ? 'pointer' : '' }}
                 >
-                  {settings.preFilterOption && (
+                  {showPreFilter && (
                     <div
                       className="icon-hover"
                       style={{
                         ...(!isEmpty(preFilter)
                           ? {
-                              backgroundColor: `${settings.theme?.primaryColor}`,
+                              backgroundColor: settings.theme?.primaryColor,
                             }
                           : {
                               backgroundColor: `#2B2C46`,
@@ -306,10 +319,8 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                       <IconFilter color="white" />
                     </div>
                   )}
-                  {!settings.preFilterOption && (
-                    <IconSearch width={16} height={16} />
-                  )}
-                  {settings.preFilterOption && !isEmpty(preFilter) && (
+                  {!showPreFilter && <IconSearch width={16} height={16} />}
+                  {!isEmpty(preFilter) && showPreFilter && (
                     <div
                       style={{
                         position: 'absolute',
@@ -394,7 +405,11 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                 style={{
                   display: 'flex',
                   background: `${
-                    disablePostFilter ? '#F3F3F5' : settings.theme?.primaryColor
+                    disablePostFilter
+                      ? '#F3F3F5'
+                      : isPostFilterApplied
+                      ? settings.theme?.primaryColor
+                      : '#2B2C46'
                   }`,
                   borderRadius: '40px',
                   width: '40px',
@@ -408,7 +423,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                 />
               </div>
 
-              {isPostFilterApplied && !disablePostFilter && (
+              {isPostFilterApplied && (
                 <div
                   style={{
                     position: 'absolute',
@@ -427,7 +442,9 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                     style={{
                       width: '8px',
                       height: '8px',
-                      background: settings.theme?.primaryColor,
+                      background: disablePostFilter
+                        ? '#E0E0E0'
+                        : settings.theme?.primaryColor,
                       borderRadius: '100%',
                     }}
                   ></div>

package/src/components/ImagePreviewMobile.tsx

@@ -65,7 +65,7 @@ function ImagePreviewMobileComponent({
       const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
+          values: Object.keys(preFilter),
         },
       ];
       if (searchQuery || requestImage) {
@@ -125,7 +125,9 @@ function ImagePreviewMobileComponent({
                 image={requestImage?.canvas}
                 selection={imageSelection || DEFAULT_REGION}
                 regions={filteredRegions}
-                minWidth={100 * (requestImage?.canvas?.width / requestImage?.canvas?.height)}
+                minWidth={
+                  Math.min(80 * (requestImage?.canvas?.width / requestImage?.canvas?.height), 200)
+                }
                 minHeight={80}
                 maxWidth={255}
                 maxHeight={255}
@@ -155,8 +157,9 @@ function ImagePreviewMobileComponent({
                 minWidth: '180px',
                 marginTop: 'auto',
                 position: 'absolute',
-                bottom: 0,
+                bottom: -25,
                 borderRadius: '16px',
+                zIndex: 1000,
               }}
             >
               <IconInfo color="white" />

package/src/components/Inquiry/InquiryBanner.tsx

@@ -115,7 +115,7 @@ function InquiryBanner({
               style={{
                 display: 'flex',
                 gap: isMobile ? '8px' : '16px',
-                width: isMobile ? '100%' : '100%',
+                width: '100%',
                 maxWidth: '400px',
               }}
               className="support-button-wrapper"

package/src/components/Layout.tsx

@@ -4,8 +4,8 @@ import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
 import {
   clearPostFilter,
-  onResetRequestImage, setPreFilter,
-  setUpdateSession,
+  onResetRequestImage,
+  setPreFilter,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from '../types';
@@ -14,7 +14,6 @@ import './common.scss';
 import FooterMobile from './FooterMobile';
 import HeaderMobile from './HeaderMobile';
 import Header from './Header';
-import { createSessionByApi } from 'services/session';
 import { isUndefined } from 'lodash';
 import AppMobile from './AppMobile';
 import jQuery from 'jquery';
@@ -80,16 +79,6 @@ function Layout({ children }: ReactNode): JSX.Element {
   const showApp = !auth0.enabled || (auth0.enabled && isAuthenticated);
   i18n.changeLanguage(language);
 
-  useEffect(() => {
-    const createSession = async () => {
-      let payload = await createSessionByApi(settings);
-      dispatch(setUpdateSession(payload));
-    };
-
-    createSession().catch(console.log);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     if (history.location?.pathname === '/') {
       document.title = settings.appTitle || '';
@@ -100,7 +89,9 @@ function Layout({ children }: ReactNode): JSX.Element {
 
   useEffect(() => {
     if (settings.shouldUseUserMetadata && user) {
-      dispatch(setPreFilter({[user['/user_metadata'].value]: true}));
+      if (user['/user_metadata'].value) {
+        dispatch(setPreFilter({ [user['/user_metadata'].value]: true }));
+      }
     }
   }, [user, dispatch, settings.shouldUseUserMetadata]);
 

package/src/components/PanelResult/PostFilterAlgolia.tsx

@@ -15,6 +15,7 @@ import { ExpandablePanelCustom } from './expandable-panel';
 import { getPanelAttributes, getPanelId } from './refinements';
 import { ReactComponent as CloseIcon } from 'common/assets/icons/close.svg';
 import { useTranslation } from 'react-i18next';
+import { orderBy } from 'lodash';
 
 export type ExpandablePanelProps = CurrentRefinementsProvided & {
   children: React.ReactNode;
@@ -113,7 +114,7 @@ export default function PostFilterPanelAlgolia({
       ...refinements.reduce(
         (acc: any, current: any) => ({
           ...acc,
-          [getPanelId(current)]: Boolean(current.isExpanded),
+          [getPanelId(current)]: !isMobile ? true : Boolean(current.isExpanded),
         }),
         {},
       ),
@@ -145,7 +146,7 @@ export default function PostFilterPanelAlgolia({
               noResults: 'No results',
               placeholder: '',
             }}
-            sortBy={['isRefined:desc', 'name:asc']}
+            transformItems={(items: any) => orderBy(items, 'label', 'desc')}
           />
         );
       }),