@nyris/nyris-webapp 0.3.22 → 0.3.24

package/package.json

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

package/src/App.tsx

@@ -3,24 +3,16 @@ 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 { useMediaQuery } from 'react-responsive';
+import AppMD from 'modules/LandingPage/AppMD';
 import AppMobile from 'modules/LandingPage/AppMobile';
-// import '@algolia/autocomplete-theme-classic';
 
 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 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';
+import { AppSettings } from 'types';
+import { getUrlParam } from 'utils';
+import Search from 'Store/Search';
+import Nyris from 'Store/Nyris';
+import { defaultSettings } from '../defaults';
 
 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/components/DetailItem.tsx

@@ -13,6 +13,7 @@ import { AppState } from 'types';
 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';
 
 interface Props {
   numberResult?: number;
@@ -87,13 +88,29 @@ function DetailItem(props: Props) {
         </Button>
       </Box>
       <Box style={{ overflowY: 'auto', maxHeight: '90svh' }}>
-        <Box className="box-carosel">
-          <ImagePreviewCarousel
-            imgItem={dataImageCarousel}
-            onSearchImage={onSearchImage}
-            handlerCloseModal={() => handlerCloseModal?.()}
-          />
-          {!isMobile && (
+        <Box
+          className="box-carosel"
+          style={
+            dataImageCarousel.length === 0
+              ? { display: 'flex', justifyContent: 'center' }
+              : {}
+          }
+        >
+          {dataImageCarousel.length > 0 ? (
+            <ImagePreviewCarousel
+              imgItem={dataImageCarousel}
+              onSearchImage={onSearchImage}
+              handlerCloseModal={() => handlerCloseModal?.()}
+            />
+          ) : (
+            <img
+              src={NoImage}
+              alt="image_item"
+              className="img-style"
+              style={{ width: '300px', height: '300px', padding: '8px' }}
+            />
+          )}
+          {!isMobile && dataImageCarousel.length > 0 && (
             <Button
               className="icon-style"
               onClick={() => {
@@ -104,9 +121,7 @@ function DetailItem(props: Props) {
                 }
               }}
             >
-              <IconSearchImage
-                color={settings.themePage.searchSuite?.secondaryColor}
-              />
+              <IconSearchImage color={settings.theme?.secondaryColor} />
             </Button>
           )}
         </Box>
@@ -163,7 +178,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,
@@ -171,7 +186,7 @@ function DetailItem(props: Props) {
                   >
                     <Typography
                       style={{
-                        color: settings.themePage.searchSuite?.secondaryColor,
+                        color: settings.theme?.secondaryColor,
                         fontSize: 12,
                         fontWeight: 700,
                       }}
@@ -206,7 +221,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,
@@ -217,15 +232,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>
@@ -239,7 +250,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,
@@ -298,7 +309,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%',
@@ -313,7 +324,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%',

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/HeaderMobile.tsx

@@ -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/HeaderNewVersion.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid } from '@material-ui/core';
+import { Box } from '@material-ui/core';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './common.scss';
@@ -8,16 +8,6 @@ import { reset } from 'Store/Search';
 function HeaderNewVersion(): JSX.Element {
   const dispatch = useAppDispatch();
   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-content" display={'flex'}>
       <NavLink
@@ -27,84 +17,16 @@ function HeaderNewVersion(): JSX.Element {
           dispatch(reset(''));
         }}
       >
-        {/* <section id="branding" style={{ height: 32 }} /> */}
         <img
-          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>
-      <Grid container className="nav-menu">
-        {/* <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={"/search-history"}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              Search history
-              <img width={10} height={10} src={`${IconReLoad}`} alt=""/>
-            </span>
-          </NavLink>
-        </Grid>
-        <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={"/saved"}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              Saved
-              <img width={10} height={10} src={`${IconSave}`} alt=""/>
-            </span>
-          </NavLink>
-        </Grid>
-         */}
-
-        {/*hidden_as_required
-        <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={'/support'}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              Support
-              <img width={20} height={20} src={`${IconSupport}`} alt="" />
-            </span>
-          </NavLink>
-        </Grid>
-
-
-        <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={'/account'}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              My Account
-              <img width={20} height={20} src={`${IconAdmin}`} alt="" />
-            </span>
-          </NavLink>
-        </Grid>*/}
-      </Grid>
     </Box>
   );
 }

package/src/components/Layout.tsx

@@ -16,12 +16,8 @@ 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 ExpandablePanelComponent from './PanelResult';
@@ -32,7 +28,6 @@ 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 +62,8 @@ 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 = HeaderNewVersion;
+    FooterApp = FooterNewVersion;
   }
 
   const conditionalQuery = useMemo(() => {
@@ -141,7 +125,7 @@ function Layout({ children }: ReactNode): JSX.Element {
             }
             style={{
               ...(classNameBoxVersion === 'newVersion'
-                ? { background: settings.themePage.searchSuite?.headerColor }
+                ? { background: settings.theme?.headerColor }
                 : {}),
             }}
           >

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,