@nyris/nyris-webapp 0.3.23 → 0.3.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.23",
+  "version": "0.3.25",
   "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.23",
-    "@nyris/nyris-react-components": "^0.3.23",
+    "@nyris/nyris-api": "^0.3.25",
+    "@nyris/nyris-react-components": "^0.3.25",
     "@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

@@ -3,24 +3,33 @@ import 'react-app-polyfill/stable';
 import React from 'react';
 import 'typeface-roboto';
 import 'index.css';
-import {useAppSelector} from 'Store/Store';
-import LandingPageApp from 'modules/LandingPage/index';
-import AppNewVersion from 'modules/LandingPage/indexNewVersion';
-import {useMediaQuery} from 'react-responsive';
-import AppMobile from 'modules/LandingPage/AppMobile';
-// import '@algolia/autocomplete-theme-classic';
+
+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';
+
+i18n.use(initReactI18next).init({
+  resources: translations,
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+  returnNull: false,
+});
 
 function App(): JSX.Element {
-    const {settings} = useAppSelector(state => state);
-    const {themePage} = settings;
-    const isMobile = useMediaQuery({query: '(max-width: 776px)'});
-    let SelectedApp: any = isMobile
-        ? AppMobile
-        : themePage.searchSuite?.active
-            ? AppNewVersion
-            : LandingPageApp;
+  const language = useAppSelector(state => state.settings.language);
+
+  i18n.changeLanguage(language);
+
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  let SelectedApp: any = isMobile ? AppMobile : AppMD;
 
-    return <SelectedApp/>;
+  return <SelectedApp />;
 }
 
 export default App;

package/src/Router.tsx

@@ -1,15 +1,9 @@
-import React, { memo } from "react";
-import { Route, Switch, Redirect } from "react-router-dom";
-// import Page404 from "Page/Exception/404";
-import Login from "page/Auth/login";
-import Layout from "components/Layout";
-import { ReactNode } from "components/common";
-import App from "App";
-import ResultComponent from "page/result";
-import SearchHistory from "page/History";
-import Saved from "page/Saved";
-import Profile from "page/Profile";
-import SupportPage from "page/Support";
+import React, { memo } from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import Layout from 'components/Layout';
+import { ReactNode } from 'components/common';
+import App from 'App';
+import ResultComponent from 'page/result';
 
 interface PrivateRouteProps {
   component: ReactNode;
@@ -35,7 +29,6 @@ function Router(): JSX.Element {
 
   return (
     <Switch>
-      <Route exact strict path="/login" component={Login} />
       <Layout>
         <Switch>
           <PrivateRoute
@@ -52,34 +45,6 @@ function Router(): JSX.Element {
             path="/result"
             component={ResultComponent}
           />
-          <PrivateRoute
-            authed={!!accessToken}
-            exact
-            strict
-            path="/search-history"
-            component={SearchHistory}
-          />
-          <PrivateRoute
-            authed={!!accessToken}
-            exact
-            strict
-            path="/saved"
-            component={Saved}
-          />
-          <PrivateRoute
-            authed={!!accessToken}
-            exact
-            strict
-            path="/account"
-            component={Profile}
-          />
-          <PrivateRoute
-            authed={!!accessToken}
-            exact
-            strict
-            path="/support"
-            component={SupportPage}
-          />
         </Switch>
       </Layout>
     </Switch>

package/src/Store/Store.ts

@@ -1,37 +1,28 @@
-import { configureStore } from "@reduxjs/toolkit";
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
-import { combineReducers } from "redux";
-import Auth from "Store/Auth";
-import {AppSettings, MDSettings} from "types";
-import { getUrlParam } from "utils";
-import Search from "Store/Search";
-import Nyris from "Store/Nyris";
-import {defaultMdSettings, defaultSettings} from "../defaults";
+import { configureStore } from '@reduxjs/toolkit';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import { combineReducers } from 'redux';
+import Auth from 'Store/auth/Auth';
+import { AppSettings } from 'types';
+import { getUrlParam } from 'utils';
+import Search from 'Store/search/Search';
+import Nyris from 'Store/nyris/Nyris';
+import { defaultSettings } from './constants';
 
 declare var settings: AppSettings;
 
-
-
 let normalizedSettings: AppSettings = {
   ...defaultSettings,
   ...settings,
 };
 
-// spread default settings for material design
-let mdSettings : MDSettings = {
-  ...defaultMdSettings,
-  ...settings.themePage.materialDesign
-}
-normalizedSettings.themePage.materialDesign = mdSettings;
-
 normalizedSettings = {
   ...normalizedSettings,
-  apiKey: (getUrlParam("apiKey") as string) || normalizedSettings.apiKey,
-  xOptions: (getUrlParam("xOptions") as string) || normalizedSettings.xOptions,
+  apiKey: (getUrlParam('apiKey') as string) || normalizedSettings.apiKey,
+  xOptions: (getUrlParam('xOptions') as string) || normalizedSettings.xOptions,
   regions:
-    (getUrlParam("use.regions") as boolean) || normalizedSettings.regions,
+    (getUrlParam('use.regions') as boolean) || normalizedSettings.regions,
   preview:
-    (getUrlParam("use.preview") as boolean) || normalizedSettings.preview,
+    (getUrlParam('use.preview') as boolean) || normalizedSettings.preview,
 };
 
 const reducers = combineReducers({
@@ -43,7 +34,7 @@ const reducers = combineReducers({
 
 export const store = configureStore({
   reducer: reducers,
-  devTools: process.env.NODE_ENV !== "production",
+  devTools: process.env.NODE_ENV !== 'production',
 });
 
 export type RootState = ReturnType<typeof store.getState>;

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/Store/constants.ts

@@ -0,0 +1,21 @@
+import { AppSettings } from '../types';
+
+export const defaultSettings: AppSettings = {
+  xOptions: false,
+  apiKey: 'UNSET',
+  exampleImages: [],
+  preview: true,
+  regions: false,
+  maxWidth: 500,
+  maxHeight: 500,
+  jpegQuality: 0.92,
+  baseUrl: 'https://api.nyris.io',
+  instantRedirectPatterns: [
+    '^https?://(www.)?youtube.com/',
+    '^https?://(www.)?youtu.be/',
+    '^https?://(www.)?vimeo.com/',
+    '^https?://(www.)?dailymotion.com/',
+    '^https?://(www.)?dai.ly/',
+  ],
+  theme: {},
+};

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',

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
@@ -121,9 +123,7 @@ function DetailItem(props: Props) {
                 }
               }}
             >
-              <IconSearchImage
-                color={settings.themePage.searchSuite?.secondaryColor}
-              />
+              <IconSearchImage color={settings.theme?.secondaryColor} />
             </Button>
           )}
         </Box>
@@ -143,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 && (
@@ -180,7 +180,7 @@ function DetailItem(props: Props) {
                   <Box
                     borderRadius={16}
                     style={{
-                      backgroundColor: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                      backgroundColor: `${settings.theme?.secondaryColor}26`,
                       width: 'fit-content',
                       padding: '3px 5px',
                       marginTop: 8,
@@ -188,7 +188,7 @@ function DetailItem(props: Props) {
                   >
                     <Typography
                       style={{
-                        color: settings.themePage.searchSuite?.secondaryColor,
+                        color: settings.theme?.secondaryColor,
                         fontSize: 12,
                         fontWeight: 700,
                       }}
@@ -223,7 +223,7 @@ function DetailItem(props: Props) {
                       style={{
                         display: 'flex',
                         justifyContent: 'space-between',
-                        color: settings.themePage.searchSuite?.secondaryColor,
+                        color: settings.theme?.secondaryColor,
                         fontSize: 14,
                         textTransform: 'initial',
                         paddingLeft: 5,
@@ -234,15 +234,11 @@ function DetailItem(props: Props) {
                       View details
                       {collapDescription ? (
                         <KeyboardArrowUpIcon
-                          htmlColor={
-                            settings.themePage.searchSuite?.secondaryColor
-                          }
+                          htmlColor={settings.theme?.secondaryColor}
                         />
                       ) : (
                         <KeyboardArrowDownIcon
-                          htmlColor={
-                            settings.themePage.searchSuite?.secondaryColor
-                          }
+                          htmlColor={settings.theme?.secondaryColor}
                         />
                       )}
                     </Button>
@@ -256,7 +252,7 @@ function DetailItem(props: Props) {
                 {(settings.showMoreInfo || settings.warehouseVariant) && (
                   <Box
                     style={{
-                      background: `linear-gradient(270deg, ${settings.themePage.searchSuite?.primaryColor}bb 0%, ${settings.themePage.searchSuite?.primaryColor} 100%)`,
+                      background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
                       // marginBottom: 25,
                       boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
                       borderRadius: 4,
@@ -315,7 +311,7 @@ function DetailItem(props: Props) {
             >
               <Box
                 style={{
-                  backgroundColor: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                  backgroundColor: `${settings.theme?.secondaryColor}26`,
                   padding: '5px 10px',
                   borderRadius: 4,
                   width: '100%',
@@ -330,7 +326,7 @@ function DetailItem(props: Props) {
               </Box>
               <Box
                 style={{
-                  backgroundColor: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                  backgroundColor: `${settings.theme?.secondaryColor}26`,
                   padding: '5px 10px',
                   borderRadius: 4,
                   width: '100%',
@@ -357,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={() => {
@@ -390,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">