@nyris/nyris-webapp 0.3.24 → 0.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "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.24",
-    "@nyris/nyris-react-components": "^0.3.24",
+    "@nyris/nyris-api": "^0.3.26",
+    "@nyris/nyris-react-components": "^0.3.26",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",
@@ -31,6 +31,7 @@
     "classnames": "^2.2.6",
     "framer-motion": "^4.1.17",
     "history": "^4.10.1",
+    "i18next": "^22.4.14",
     "jotai": "^1.4.7",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
@@ -42,6 +43,7 @@
     "react-dropzone": "^10.1.8",
     "react-hook-form": "^7.27.1",
     "react-hot-toast": "^2.4.0",
+    "react-i18next": "^12.2.0",
     "react-instantsearch-dom": "^6.15.0",
     "react-instantsearch-hooks": "^6.22.0",
     "react-konva": "16.13.0-6",

package/src/App.tsx

@@ -5,10 +5,27 @@ import 'typeface-roboto';
 import 'index.css';
 
 import { useMediaQuery } from 'react-responsive';
-import AppMD from 'modules/LandingPage/AppMD';
-import AppMobile from 'modules/LandingPage/AppMobile';
+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';
+
+i18n.use(initReactI18next).init({
+  resources: translations,
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+  returnNull: false,
+});
 
 function App(): JSX.Element {
+  const language = useAppSelector(state => state.settings.language);
+
+  i18n.changeLanguage(language);
+
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   let SelectedApp: any = isMobile ? AppMobile : AppMD;
 

package/src/Store/Store.ts

@@ -1,12 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import { combineReducers } from 'redux';
-import Auth from 'Store/Auth';
+import Auth from 'Store/auth/Auth';
 import { AppSettings } from 'types';
 import { getUrlParam } from 'utils';
-import Search from 'Store/Search';
-import Nyris from 'Store/Nyris';
-import { defaultSettings } from '../defaults';
+import Search from 'Store/search/Search';
+import Nyris from 'Store/nyris/Nyris';
+import { defaultSettings } from './constants';
 
 declare var settings: AppSettings;
 

package/src/Store/{Auth.ts → auth/Auth.ts}

@@ -1,17 +1,6 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import jscookie from "js-cookie";
-
-interface InitialStateTypes {
-  accessToken?: string | Record<string, unknown> | null;
-  name?: string | null;
-  role?: string | null;
-}
-
-interface LoginResponse {
-  access_token?: string | Record<string, unknown> | null;
-  name?: string | null;
-  role?: string | null;
-}
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import jscookie from 'js-cookie';
+import { InitialStateTypes, LoginResponse } from './types';
 
 const initialState: InitialStateTypes = {
   accessToken: null,
@@ -20,7 +9,7 @@ const initialState: InitialStateTypes = {
 };
 
 export const authSlice = createSlice({
-  name: "auth",
+  name: 'auth',
   initialState,
   reducers: {
     login: (state, data: PayloadAction<LoginResponse>) => {
@@ -31,11 +20,11 @@ export const authSlice = createSlice({
       //   jscookie.set("token", payload?.access_token);
       // }
     },
-    logout: (state) => {
+    logout: state => {
       state.accessToken = null;
       state.name = null;
       state.role = null;
-      jscookie.remove("token");
+      jscookie.remove('token');
     },
   },
 });

package/src/Store/auth/types.ts

@@ -0,0 +1,11 @@
+export interface InitialStateTypes {
+  accessToken?: string | Record<string, unknown> | null;
+  name?: string | null;
+  role?: string | null;
+}
+
+export interface LoginResponse {
+  access_token?: string | Record<string, unknown> | null;
+  name?: string | null;
+  role?: string | null;
+}

package/src/{defaults.ts → Store/constants.ts}

@@ -1,4 +1,4 @@
-import { AppSettings } from './types';
+import { AppSettings } from '../types';
 
 export const defaultSettings: AppSettings = {
   xOptions: false,

package/src/Store/nyris/Nyris.ts

@@ -0,0 +1,67 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { NyrisAppState, NyrisFeedbackState } from './types';
+
+const initialState: NyrisAppState | NyrisFeedbackState = {
+  showPart: 'start',
+  feedbackState: 'hidden',
+};
+
+export const nyrisSlice = createSlice({
+  name: 'nyris',
+  initialState,
+  reducers: {
+    showStart: state => {
+      return {
+        ...state,
+        showPart: 'start',
+      };
+    },
+    showCamera: state => {
+      return {
+        ...state,
+        showPart: 'camera',
+      };
+    },
+    showResults: state => {
+      return {
+        ...state,
+        showPart: 'results',
+      };
+    },
+    showFeedback: state => {
+      return {
+        ...state,
+        feedbackState: 'question',
+      };
+    },
+    hideFeedback: state => {
+      return {
+        ...state,
+        feedbackState: 'hidden',
+      };
+    },
+    feedbackSubmitPositive: state => {
+      return {
+        ...state,
+        feedbackState: 'positive',
+      };
+    },
+    feedbackNegative: state => {
+      return {
+        ...state,
+        feedbackState: 'negative',
+      };
+    },
+  },
+});
+
+export const {
+  showStart,
+  showCamera,
+  showResults,
+  showFeedback,
+  hideFeedback,
+  feedbackSubmitPositive,
+  feedbackNegative,
+} = nyrisSlice.actions;
+export default nyrisSlice.reducer;

package/src/Store/nyris/types.ts

@@ -0,0 +1,11 @@
+export type NyrisAppPart = 'start' | 'camera' | 'results';
+export type NyrisFeedbackState =
+  | 'hidden'
+  | 'question'
+  | 'positive'
+  | 'negative';
+
+export interface NyrisAppState {
+  showPart: NyrisAppPart;
+  feedbackState: NyrisFeedbackState;
+}

package/src/Store/{Search.ts → search/Search.ts}

@@ -1,67 +1,7 @@
-import { Code, RectCoords, Region } from '@nyris/nyris-api';
+import { RectCoords, Region } from '@nyris/nyris-api';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { CanvasWithId } from 'types';
-import { DEFAULT_REGION } from '../constants';
-
-interface CategoryPrediction {
-  name: string;
-  score: number;
-}
-
-export interface SearchState {
-  results: any[];
-  duration?: number;
-  requestId?: string;
-  sessionId?: string;
-  regions: Region[];
-  selectedRegion?: RectCoords;
-  fetchingRegions: boolean;
-  fetchingResults: boolean;
-  filterOptions: string[];
-  requestImage?: CanvasWithId | undefined;
-  categoryPredictions: CategoryPrediction[];
-  codes: Code[];
-  errorMessage: string;
-  valueTextSearch: any;
-  resultSearchText: any[];
-  filters: any[];
-  configureFilter?: any;
-  loadingSearchAlgolia: boolean;
-  imageThumbSearchInput?: any;
-  textSearchInputMobile?: string;
-  isShowModalDetailItemMobile?: boolean;
-  keyFilter?: string;
-  preFilterDropdown?: boolean;
-  setPreFilterDropdown?: any;
-}
-
-// TODO: init state
-const initialState: SearchState = {
-  results: [],
-  regions: [],
-  selectedRegion: undefined,
-  requestImage: undefined,
-  fetchingResults: false,
-  fetchingRegions: false,
-  filterOptions: [],
-  categoryPredictions: [],
-  codes: [],
-  errorMessage: '',
-  valueTextSearch: {
-    configure: { filters: '' },
-    page: 1,
-    refinementList: '',
-  },
-  resultSearchText: [],
-  filters: [],
-  configureFilter: {},
-  loadingSearchAlgolia: false,
-  imageThumbSearchInput: '',
-  textSearchInputMobile: '',
-  isShowModalDetailItemMobile: false,
-  keyFilter: '',
-  preFilterDropdown: false,
-};
+import { DEFAULT_REGION } from '../../constants';
+import { initialState } from './search.initialState';
 
 export const searchSlice = createSlice({
   name: 'search',
@@ -109,6 +49,7 @@ export const searchSlice = createSlice({
         canvas: data.payload,
         id: Math.random().toString(),
       },
+      regions: [],
     }),
 
     selectionChanged: (state, data: PayloadAction<RectCoords>) => {

package/src/Store/search/search.initialState.ts

@@ -0,0 +1,28 @@
+import { SearchState } from './types';
+
+export const initialState: SearchState = {
+  results: [],
+  regions: [],
+  selectedRegion: undefined,
+  requestImage: undefined,
+  fetchingResults: false,
+  fetchingRegions: false,
+  filterOptions: [],
+  categoryPredictions: [],
+  codes: [],
+  errorMessage: '',
+  valueTextSearch: {
+    configure: { filters: '' },
+    page: 1,
+    refinementList: '',
+  },
+  resultSearchText: [],
+  filters: [],
+  configureFilter: {},
+  loadingSearchAlgolia: false,
+  imageThumbSearchInput: '',
+  textSearchInputMobile: '',
+  isShowModalDetailItemMobile: false,
+  keyFilter: '',
+  preFilterDropdown: false,
+};

package/src/Store/search/types.ts

@@ -0,0 +1,34 @@
+import { Region, RectCoords, Code } from '@nyris/nyris-api';
+import { CanvasWithId } from 'types';
+
+export interface CategoryPrediction {
+  name: string;
+  score: number;
+}
+
+export interface SearchState {
+  results: any[];
+  duration?: number;
+  requestId?: string;
+  sessionId?: string;
+  regions: Region[];
+  selectedRegion?: RectCoords;
+  fetchingRegions: boolean;
+  fetchingResults: boolean;
+  filterOptions: string[];
+  requestImage?: CanvasWithId | undefined;
+  categoryPredictions: CategoryPrediction[];
+  codes: Code[];
+  errorMessage: string;
+  valueTextSearch: any;
+  resultSearchText: any[];
+  filters: any[];
+  configureFilter?: any;
+  loadingSearchAlgolia: boolean;
+  imageThumbSearchInput?: any;
+  textSearchInputMobile?: string;
+  isShowModalDetailItemMobile?: boolean;
+  keyFilter?: string;
+  preFilterDropdown?: boolean;
+  setPreFilterDropdown?: any;
+}

package/src/components/DetailItem.tsx

@@ -14,6 +14,7 @@ import { useAppSelector } from 'Store/Store';
 import { prepareImageList } from '../helpers/CommonHelper';
 import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 import NoImage from '../common/assets/images/unnamed.png';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   numberResult?: number;
@@ -75,6 +76,7 @@ function DetailItem(props: Props) {
 
     setDataImageCarouSel(valueKey);
   };
+  const { t } = useTranslation();
 
   return (
     <Box
@@ -141,14 +143,14 @@ function DetailItem(props: Props) {
             <Grid container justifyContent="space-between">
               <Grid item xs={12}>
                 <Typography className="text-f13 fw-500 max-line-1">
-                  SKU: {sku}
+                  {settings.itemIdLabel || 'SKU'}: {sku}
                 </Typography>
                 {dataItem.keyword_1 && (
                   <Typography
                     className="text-f13 fw-500 max-line-1"
                     style={{ marginTop: '8px' }}
                   >
-                    Manufacturer Number: {dataItem.keyword_1}
+                    {t('Manufacturer Number')}: {dataItem.keyword_1}
                   </Typography>
                 )}
                 {settings.warehouseVariant && (
@@ -351,7 +353,13 @@ function DetailItem(props: Props) {
                 alignItems="center"
               >
                 <Grid item>
-                  <Box display={'flex'} alignItems={'center'}>
+                  <Box
+                    display={'flex'}
+                    justifyContent={
+                      settings.shareOption ? 'space-between' : 'space-around'
+                    }
+                    alignItems={'center'}
+                  >
                     <Button
                       className="btn-item"
                       onClick={() => {
@@ -384,13 +392,15 @@ function DetailItem(props: Props) {
                     </Button>
                   </Box>
                 </Grid>
-                <Grid item>
-                  <Box display={'flex'} alignItems={'center'}>
-                    <Button className="btn-item" onClick={() => false}>
-                      <IconShare width={30} height={30} color="gray" />
-                    </Button>
-                  </Box>
-                </Grid>
+                {settings.shareOption && (
+                  <Grid item>
+                    <Box display={'flex'} alignItems={'center'}>
+                      <Button className="btn-item" onClick={() => false}>
+                        <IconShare width={30} height={30} color="gray" />
+                      </Button>
+                    </Box>
+                  </Grid>
+                )}
                 {/* <Grid item>
               <Box display={'flex'} alignItems={'center'}>
                 <Button className="btn-item">

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/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';

package/src/components/Layout.tsx

@@ -11,17 +11,16 @@ 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 FooterMobile from './FooterMobile';
-import FooterNewVersion from './FooterNewVersion';
 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 {
@@ -62,8 +61,7 @@ function Layout({ children }: ReactNode): JSX.Element {
     FooterApp = FooterMobile;
     HeaderApp = HeaderMobile;
   } else {
-    HeaderApp = HeaderNewVersion;
-    FooterApp = FooterNewVersion;
+    HeaderApp = Header;
   }
 
   const conditionalQuery = useMemo(() => {
@@ -139,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
@@ -166,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))
                   }