@nyris/nyris-webapp 0.3.23 → 0.3.25

package/src/components/DragDropFile.tsx

@@ -12,12 +12,13 @@ import {
   loadingActionResults,
   setRegions,
   setSelectedRegion,
-} from 'Store/Search';
-import { showFeedback } from 'Store/Nyris';
+} from 'Store/search/Search';
+import { showFeedback } from 'Store/nyris/Nyris';
 import { useHistory } from 'react-router-dom';
 import { useState } from 'react';
 import IconUpload from 'common/assets/images/Icon_Upload.svg';
 import { RectCoords } from '@nyris/nyris-api';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   acceptTypes: any;
@@ -35,6 +36,7 @@ function DragDropFile(props: Props) {
     search: { keyFilter },
   } = searchState;
   const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
+  const { t } = useTranslation();
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop: async (fs: File[]) => {
       history.push('/result');
@@ -147,7 +149,10 @@ function DragDropFile(props: Props) {
                 className=""
                 style={{ color: '#2B2C46', fontSize: 14 }}
               >
-                <span className="fw-700">Choose an image</span> or drag it here
+                <span className="fw-700" style={{ paddingRight: '4px' }}>
+                  {t('Choose an image')}
+                </span>
+                {t('or drag it here')}
               </label>
               <input
                 {...getInputProps()}

package/src/components/Feedback.tsx

@@ -1,12 +1,9 @@
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import {
-  feedbackNegative,
-  feedbackSubmitPositive,
-  NyrisFeedbackState,
-} from "Store/Nyris";
-import React from "react";
-import { Animate } from "react-move";
-import { feedbackSuccessEpic } from "services/Feedback";
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { feedbackNegative, feedbackSubmitPositive } from 'Store/nyris/Nyris';
+import { NyrisFeedbackState } from 'Store/nyris/types';
+import React from 'react';
+import { Animate } from 'react-move';
+import { feedbackSuccessEpic } from 'services/Feedback';
 interface FeedbackProps {
   feedbackState: NyrisFeedbackState;
   onClose?: () => void;
@@ -14,7 +11,7 @@ interface FeedbackProps {
 
 const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
   let inner: any = null;
-  const state = useAppSelector((state) => state);
+  const state = useAppSelector(state => state);
   const dispatch = useAppDispatch();
   const onPositiveFeedback = (data: boolean) => {
     feedbackSuccessEpic(state, data);
@@ -26,7 +23,7 @@ const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
   };
 
   switch (feedbackState) {
-    case "question":
+    case 'question':
       inner = (
         <div className="feedbackForm">
           <p>Did you find what you were looking for?</p>
@@ -45,14 +42,14 @@ const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
         </div>
       );
       break;
-    case "positive":
+    case 'positive':
       inner = (
         <div className="feedbackMessage positive">
           Great, thank you for your feedback!
         </div>
       );
       break;
-    case "negative":
+    case 'negative':
       inner = (
         <div className="feedbackMessage negative">
           We saved your request so we can track down the issue and improve the
@@ -71,7 +68,7 @@ const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
   }
   return (
     <Animate
-      show={feedbackState !== "hidden"}
+      show={feedbackState !== 'hidden'}
       start={{ y: 100, opacity: 0 }}
       enter={{ y: [0], opacity: [1] }}
       leave={{ y: [100], opacity: [0] }}

package/src/components/FooterMobile.tsx

@@ -15,15 +15,6 @@ function FooterMobile(props: Props): JSX.Element {
   const history = useHistory();
   const { settings } = useAppSelector(state => state);
 
-  // const handleCheckMatchLink = (match: any, location: any) => {
-  //   let active = false;
-  //   if (match?.url === location.pathname) {
-  //     active = true;
-  //   }
-
-  //   return active;
-  // };
-
   return (
     <Box
       className="box-footer-mobile"
@@ -41,7 +32,7 @@ function FooterMobile(props: Props): JSX.Element {
           alignItems: 'center',
           backgroundColor:
             history.location.pathname === '/'
-              ? `${settings.themePage.searchSuite?.primaryColor}21`
+              ? `${settings.theme?.primaryColor}21`
               : '',
         }}
         activeClassName="active"
@@ -51,13 +42,13 @@ function FooterMobile(props: Props): JSX.Element {
         <Home
           color={
             history.location.pathname === '/'
-              ? settings.themePage.searchSuite?.primaryColor
+              ? settings.theme?.primaryColor
               : '#000'
           }
         />
       </NavLink>
       <Box
-        style={{ background: settings.themePage.searchSuite?.primaryColor }}
+        style={{ background: settings.theme?.primaryColor }}
         className="box-icon-camera-mobile"
       >
         <Button
@@ -68,45 +59,6 @@ function FooterMobile(props: Props): JSX.Element {
           <IconCameraMobile color="#FFFF" />
         </Button>
       </Box>
-      {/* hidden_as_required {history.location.pathname !== "/" && (
-        <>
-          <Box style={{ padding: 23 }}>
-            <NavLink
-              activeClassName="active"
-              isActive={(match, location) =>
-                handleCheckMatchLink(match, location)
-              }
-              to={"/support"}
-              className="nav-link p-0 menu-children rounded-0"
-            >
-              <img
-                width={24}
-                height={24}
-                src={`${IconSupportMobile}`}
-                alt="support_mobile"
-              />
-            </NavLink>
-          </Box>
-
-          <Box style={{ padding: 23 }}>
-            <NavLink
-              activeClassName="active"
-              isActive={(match, location) =>
-                handleCheckMatchLink(match, location)
-              }
-              to={"/account"}
-              className="nav-link p-0 menu-children rounded-0"
-            >
-              <img
-                width={24}
-                height={24}
-                src={`${IconAdminMobile}`}
-                alt="account_page"
-              />
-            </NavLink>
-          </Box>
-        </>
-      )}*/}
 
       <Box className="box-screenshot-camera">
         <CameraCustom

package/src/components/FooterResult.tsx

@@ -20,7 +20,7 @@ function Pagination({ children }: any) {
           <span style={{ color: '#2B2C46' }}>Share your search with our</span>
           <Link
             to={'/support'}
-            style={{ color: settings.themePage.searchSuite?.secondaryColor }}
+            style={{ color: settings.theme?.secondaryColor }}
           >
             product experts
           </Link>

package/src/components/Header.tsx

@@ -1,35 +1,34 @@
-import React from "react";
+import { Box } from '@material-ui/core';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import './common.scss';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { reset } from 'Store/search/Search';
 
-function HeaderComponent(): JSX.Element {
+function Header(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const { settings } = useAppSelector(state => state);
   return (
-    <div className="navWrap">
-      <div className="wrapper" style={{ padding: 0 }}>
-        <section id="branding" />
-        <div id="menu" className="menuWrap" role="navigation">
-          <ul>
-            <li>
-              <a
-                href="https://nyris.io/imprint/#privacy"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Privacy Policy
-              </a>
-            </li>
-            <li>
-              <a
-                href="https://nyris.io/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Visit our Website
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
+    <Box className="box-content" display={'flex'}>
+      <NavLink
+        to="/"
+        style={{ lineHeight: 0, paddingLeft: '10px' }}
+        onClick={() => {
+          dispatch(reset(''));
+        }}
+      >
+        <img
+          src={settings.theme?.appBarLogoUrl}
+          alt="logo"
+          style={{
+            aspectRatio: 1,
+            width: settings.theme?.logoWidth,
+            height: settings.theme?.logoHeight,
+          }}
+        />
+      </NavLink>
+    </Box>
   );
 }
 
-export default HeaderComponent;
+export default Header;

package/src/components/HeaderMobile.tsx

@@ -13,7 +13,7 @@ import {
   updateValueTextSearchMobile,
   setUpdateKeyFilterDesktop,
   setPreFilterDropdown,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
 import CustomSearchBox from './input/inputSearch';
@@ -117,7 +117,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
           alignItems: 'center',
           height: '50px',
           borderBottom: '1px solid #e9e9ec',
-          background: settings.themePage.searchSuite?.headerColor,
+          background: settings.theme?.headerColor,
         }}
       >
         <NavLink
@@ -127,16 +127,13 @@ function HeaderMobileComponent(props: Props): JSX.Element {
             dispatch(reset(''));
           }}
         >
-          {/* <section id="branding" style={{ height: 32 }} /> */}
           <img
-            // width={90}
-            // height={30}
-            src={settings.themePage.searchSuite?.appBarLogoUrl}
-            alt={settings.themePage.searchSuite?.appBarLogoUrlAlt}
+            src={settings.theme?.appBarLogoUrl}
+            alt="logo"
             style={{
               aspectRatio: 1,
-              width: settings.themePage.searchSuite?.logoWidth,
-              height: settings.themePage.searchSuite?.logoHeight,
+              width: settings.theme?.logoWidth,
+              height: settings.theme?.logoHeight,
             }}
           />
         </NavLink>
@@ -150,8 +147,8 @@ function HeaderMobileComponent(props: Props): JSX.Element {
               {imageThumbSearchInput && (
                 <div
                   style={{
-                    border: `2px solid ${settings.themePage.searchSuite?.secondaryColor}c7`,
-                    backgroundColor: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                    border: `2px solid ${settings.theme?.secondaryColor}c7`,
+                    backgroundColor: `${settings.theme?.secondaryColor}26`,
                   }}
                   className="box-image-search-thumb-mobile"
                 >
@@ -162,7 +159,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                   />
                   <button
                     style={{
-                      backgroundColor: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                      backgroundColor: `${settings.theme?.secondaryColor}26`,
                     }}
                     onClick={() => {
                       if (textSearchInputMobile) {
@@ -183,7 +180,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                     <CloseIcon
                       style={{
                         fontSize: 20,
-                        color: settings.themePage.searchSuite?.secondaryColor,
+                        color: settings.theme?.secondaryColor,
                         fontWeight: 700,
                       }}
                     />
@@ -255,9 +252,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                             <CloseIcon
                               style={{
                                 fontSize: 20,
-                                color:
-                                  settings.themePage.searchSuite
-                                    ?.secondaryColor,
+                                color: settings.theme?.secondaryColor,
                               }}
                             />
                           </button>
@@ -278,7 +273,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                     borderRadius: '100%',
                     backgroundColor:
                       preFilterDropdown || keyFilter
-                        ? `${settings.themePage.searchSuite?.secondaryColor}26`
+                        ? `${settings.theme?.secondaryColor}26`
                         : '#f3f3f5',
                     margin: '0 12px',
                   }}
@@ -287,15 +282,13 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                     <CloseIcon
                       style={{
                         fontSize: 16,
-                        color: settings.themePage.searchSuite?.secondaryColor,
+                        color: settings.theme?.secondaryColor,
                       }}
                     />
                   ) : (
                     <IconFilter
                       color={
-                        keyFilter
-                          ? settings.themePage.searchSuite?.secondaryColor
-                          : '#000'
+                        keyFilter ? settings.theme?.secondaryColor : '#000'
                       }
                     />
                   )}

package/src/components/Layout.tsx

@@ -11,28 +11,22 @@ import {
   onResetRequestImage,
   setPreFilterDropdown,
   setUpdateSession,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AlgoliaSettings, AppState } from '../types';
 import './appMobile.scss';
 import './common.scss';
-import FooterComponent from './Footer';
-import FooterMD from './FooterMD';
 import FooterMobile from './FooterMobile';
-import FooterNewVersion from './FooterNewVersion';
-import HeaderComponent from './Header';
-import HeaderMdComponent from './HeaderMd';
 import HeaderMobile from './HeaderMobile';
-import HeaderNewVersion from './HeaderNewVersion';
+import Header from './Header';
 import ExpandablePanelComponent from './PanelResult';
-import FilterComponent from 'components/pre-filter/desktop';
+import PreFilterComponent from 'components/pre-filter';
 import { createSessionByApi } from 'services/session';
 
 function Layout({ children }: ReactNode): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings, search } = useAppSelector<AppState>((state: any) => state);
   const { valueTextSearch, loadingSearchAlgolia, preFilterDropdown } = search;
-  const { themePage } = settings;
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
@@ -67,19 +61,7 @@ function Layout({ children }: ReactNode): JSX.Element {
     FooterApp = FooterMobile;
     HeaderApp = HeaderMobile;
   } else {
-    if (themePage.default?.active) {
-      classNameBoxVersion = 'default';
-
-      HeaderApp = HeaderComponent;
-      FooterApp = FooterComponent;
-    } else if (themePage.materialDesign?.active) {
-      classNameBoxVersion = 'materialDesign';
-      HeaderApp = HeaderMdComponent;
-      FooterApp = FooterMD;
-    } else {
-      HeaderApp = HeaderNewVersion;
-      FooterApp = FooterNewVersion;
-    }
+    HeaderApp = Header;
   }
 
   const conditionalQuery = useMemo(() => {
@@ -141,7 +123,7 @@ function Layout({ children }: ReactNode): JSX.Element {
             }
             style={{
               ...(classNameBoxVersion === 'newVersion'
-                ? { background: settings.themePage.searchSuite?.headerColor }
+                ? { background: settings.theme?.headerColor }
                 : {}),
             }}
           >
@@ -155,9 +137,11 @@ function Layout({ children }: ReactNode): JSX.Element {
           <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
             {children}
           </div>
-          <div className="footer-wrap-main">
-            <FooterApp />
-          </div>
+          {isMobile && (
+            <div className="footer-wrap-main">
+              <FooterApp />
+            </div>
+          )}
         </div>
         {isMobile && (
           <Box
@@ -182,7 +166,7 @@ function Layout({ children }: ReactNode): JSX.Element {
               className={'wrap-filter-destop'}
             >
               <div className={'bg-white box-filter-destop isMobile'}>
-                <FilterComponent
+                <PreFilterComponent
                   handleClose={() =>
                     dispatch(setPreFilterDropdown(!preFilterDropdown))
                   }

package/src/components/PanelResult/index.tsx

@@ -222,7 +222,7 @@ export default function ExpandablePanelComponent({
             className="text-white"
             style={{
               width: '100%',
-              backgroundColor: settings.themePage.searchSuite?.secondaryColor,
+              backgroundColor: settings.theme?.secondaryColor,
               fontWeight: 700,
               fontSize: 14,
               borderRadius: 0,

package/src/components/{LoadingScreen → ProductList}/index.tsx

@@ -16,7 +16,7 @@ interface Props {
   searchQuery?: string;
 }
 
-function LoadingScreen({
+function ProductListComponent({
   allSearchResults,
   getUrlToCanvasFile,
   sendFeedBackAction,
@@ -167,5 +167,5 @@ function LoadingScreen({
   return <>{renderItem}</>;
 }
 
-const LoadingScreenCustom = connectStateResults<Props>(memo(LoadingScreen));
-export default LoadingScreenCustom;
+const ProductList = connectStateResults<Props>(memo(ProductListComponent));
+export default ProductList;

package/src/components/appMobile.scss

@@ -1,9 +1,5 @@
 @media screen and (max-width: 776px) {
-  // @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  //   html {
-  //     background-color: #fff;
-  //   }
-  // }
+
   html {
     background-color: #fff;
   }
@@ -675,11 +671,7 @@
       min-height: initial;
       min-height: initial !important;
 
-      .carousel {
-        .thumbs-wrapper {
-          // display: none;
-        }
-      }
+      
     }
 
     &.box-modal-share {
@@ -692,17 +684,6 @@
     background-color: #fff;
   }
 
-  .box-slider-image-result {
-    button {
-      // width: 100% !important;
-      // height: 100% !important;
-      span {
-        // width: 100% !important;
-        // height: 100% !important;
-      }
-    }
-  }
-
   .box-modal-default {
     max-width: 340px;
     .box-carosel .thumbs-wrapper {

package/src/components/carousel/ImagePreviewCarousel.tsx

@@ -31,8 +31,9 @@ export const ImagePreviewCarousel = (props: Props) => {
       gap: '1rem',
       pagination: false,
       arrows: false,
+      width: isMobile ? 340 : 370,
     }),
-    [],
+    [isMobile],
   );
 
   const thumbsOptions: Options = useMemo(

package/src/components/clear-refinements/clear-refinements.tsx

@@ -30,7 +30,7 @@ function ClearRefinementsComponent({
       className={className}
       onClick={handleButtonClick}
       style={{
-        color: settings.themePage.searchSuite?.secondaryColor,
+        color: settings.theme.secondaryColor,
         fontWeight: 'bold',
         textTransform: 'capitalize',
         padding: 0,

package/src/components/common.scss

@@ -6,6 +6,8 @@
   overflow: hidden;
   .box-header-newVersion-main {
     height: 50px;
+    min-height: 50px;
+
     // background: #2b2c46;
     .box-content {
       max-width: 1280px;

package/src/components/drawer/cameraCustom.tsx

@@ -9,7 +9,6 @@ import { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
 import Webcam from 'react-webcam';
 import { createImage, findByImage, findRegions } from 'services/image';
-// import { showFeedback } from 'Store/Nyris';
 import {
   onToggleModalItemDetail,
   setImageSearchInput,
@@ -19,7 +18,7 @@ import {
   loadingActionResults,
   setRegions,
   setSelectedRegion,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 
 interface Props {
@@ -68,12 +67,6 @@ function CameraCustom(props: Props) {
       region = res.selectedRegion;
       dispatch(setSelectedRegion(region));
     }
-    // findByImage({ image: imageConvert, settings, region: region }).then(
-    //   (res: any) => {
-    //     dispatch(setSearchResults(res));
-    //     return dispatch(showFeedback());
-    //   },
-    // );
     setTimeout(() => {
       dispatch(updateStatusLoading(false));
       handlerCloseModal();
@@ -141,7 +134,7 @@ function CameraCustom(props: Props) {
           <button
             className="btn-close-modal right"
             style={{
-              backgroundColor: settings.themePage.searchSuite?.primaryColor,
+              backgroundColor: settings.theme?.primaryColor,
             }}
             onClick={handlerCloseModal}
           >
@@ -150,7 +143,7 @@ function CameraCustom(props: Props) {
           <button
             className="btn-close-modal left"
             style={{
-              backgroundColor: settings.themePage.searchSuite?.primaryColor,
+              backgroundColor: settings.theme?.primaryColor,
             }}
             onClick={handlerCloseModal}
           >
@@ -226,7 +219,7 @@ function CameraCustom(props: Props) {
           <div
             className="box-scale-camera"
             style={{
-              backgroundColor: settings.themePage.searchSuite?.secondaryColor,
+              backgroundColor: settings.theme?.secondaryColor,
             }}
           >
             <button
@@ -234,7 +227,7 @@ function CameraCustom(props: Props) {
               style={{
                 backgroundColor:
                   scaleCamera === 1 && 'active'
-                    ? settings.themePage.searchSuite?.primaryColor
+                    ? settings.theme?.primaryColor
                     : '',
               }}
               onClick={() => setScaleCamera(1)}
@@ -246,7 +239,7 @@ function CameraCustom(props: Props) {
               style={{
                 backgroundColor:
                   scaleCamera === 1.5 && 'active'
-                    ? settings.themePage.searchSuite?.primaryColor
+                    ? settings.theme?.primaryColor
                     : '',
               }}
               onClick={() => setScaleCamera(1.5)}
@@ -258,7 +251,7 @@ function CameraCustom(props: Props) {
               style={{
                 backgroundColor:
                   scaleCamera === 2 && 'active'
-                    ? settings.themePage.searchSuite?.primaryColor
+                    ? settings.theme?.primaryColor
                     : '',
               }}
               onClick={() => setScaleCamera(2)}