@nyris/nyris-webapp 0.3.22 → 0.3.24

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/drawer/cameraCustom.tsx

@@ -68,12 +68,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 +135,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 +144,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 +220,7 @@ function CameraCustom(props: Props) {
           <div
             className="box-scale-camera"
             style={{
-              backgroundColor: settings.themePage.searchSuite?.secondaryColor,
+              backgroundColor: settings.theme?.secondaryColor,
             }}
           >
             <button
@@ -234,7 +228,7 @@ function CameraCustom(props: Props) {
               style={{
                 backgroundColor:
                   scaleCamera === 1 && 'active'
-                    ? settings.themePage.searchSuite?.primaryColor
+                    ? settings.theme?.primaryColor
                     : '',
               }}
               onClick={() => setScaleCamera(1)}
@@ -246,7 +240,7 @@ function CameraCustom(props: Props) {
               style={{
                 backgroundColor:
                   scaleCamera === 1.5 && 'active'
-                    ? settings.themePage.searchSuite?.primaryColor
+                    ? settings.theme?.primaryColor
                     : '',
               }}
               onClick={() => setScaleCamera(1.5)}
@@ -258,7 +252,7 @@ function CameraCustom(props: Props) {
               style={{
                 backgroundColor:
                   scaleCamera === 2 && 'active'
-                    ? settings.themePage.searchSuite?.primaryColor
+                    ? settings.theme?.primaryColor
                     : '',
               }}
               onClick={() => setScaleCamera(2)}

package/src/components/input/inputSearch.tsx

@@ -166,8 +166,8 @@ const SearchBox = (props: any) => {
               {imageThumbSearchInput && (
                 <Box
                   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`,
                     marginRight: '5px',
                   }}
                   className="box-image-search-thumb"
@@ -196,7 +196,7 @@ const SearchBox = (props: any) => {
                       <CloseIcon
                         style={{
                           fontSize: 20,
-                          color: settings.themePage.searchSuite?.secondaryColor,
+                          color: settings.theme?.secondaryColor,
                         }}
                       />
                     </button>

package/src/components/pre-filter/desktop/index.tsx

@@ -297,7 +297,7 @@ function FilterComponent(props: Props) {
             className="button-right"
             style={{
               width: '50%',
-              backgroundColor: settings.themePage.searchSuite?.primaryColor,
+              backgroundColor: settings.theme?.primaryColor,
               color: '#fff',
               borderRadius: 0,
               justifyContent: 'flex-start',
@@ -338,7 +338,7 @@ function FilterComponent(props: Props) {
             className="button-right"
             style={{
               width: '50%',
-              backgroundColor: settings.themePage.searchSuite?.primaryColor,
+              backgroundColor: settings.theme?.primaryColor,
               color: '#fff',
               borderRadius: 0,
               justifyContent: 'flex-start',

package/src/components/results/ItemResult.tsx

@@ -145,13 +145,13 @@ function ItemResult(props: Props) {
             </Button>
           </Box>
         )}
-        {!isHover && urlImage?.length > 1 && (
+        {!isHover && (
           <Box className="box-icon-modal">
             <Button
               style={{ width: '100%', height: '100%', padding: 0, zIndex: 9 }}
               onClick={() => handlerToggleModal(dataItem)}
             >
-              <Expand color={settings.themePage.searchSuite?.secondaryColor} />
+              <Expand color={settings.theme?.secondaryColor} />
             </Button>
           </Box>
         )}
@@ -178,7 +178,7 @@ function ItemResult(props: Props) {
                 src={NoImage}
                 alt="image_item"
                 className="img-style"
-                style={{ width: '100%', height: '100%' }}
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
               />
             )}
           </Button>
@@ -260,7 +260,7 @@ function ItemResult(props: Props) {
                   <Box
                     mt={1}
                     style={{
-                      background: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                      background: `${settings.theme?.secondaryColor}26`,
                       borderRadius: '6px',
                       display: 'flex',
                       width: 'fit-content',
@@ -270,7 +270,7 @@ function ItemResult(props: Props) {
                     <Typography
                       className="fw-700"
                       style={{
-                        color: settings.themePage.searchSuite?.secondaryColor,
+                        color: settings.theme?.secondaryColor,
                         fontSize: 10,
                         letterSpacing: '1px',
                         maxWidth: '160px',
@@ -307,7 +307,7 @@ function ItemResult(props: Props) {
                       boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
                       // marginBottom: 22,
                       height: 40,
-                      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%)`,
                       borderRadius: 4,
                       padding: '0px 8px',
                     }}
@@ -371,7 +371,7 @@ function ItemResult(props: Props) {
           >
             <Box
               style={{
-                backgroundColor: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                backgroundColor: `${settings.theme?.secondaryColor}26`,
                 padding: '5px 10px',
                 borderRadius: 4,
                 width: '100%',
@@ -395,7 +395,7 @@ function ItemResult(props: Props) {
 
             <Box
               style={{
-                backgroundColor: `${settings.themePage.searchSuite?.secondaryColor}26`,
+                backgroundColor: `${settings.theme?.secondaryColor}26`,
                 padding: '5px 10px',
                 borderRadius: 4,
                 width: '100%',

package/src/defaults.ts

@@ -1,37 +1,21 @@
-import {AppSettings} from "./types";
+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/'
-    ],
-    themePage: {
-        default: { active: true }
-    }
-};
-
-export const defaultMdSettings = {
-    appBarLogoUrl: 'images/nyris-logo.svg',
-    appBarCustomBackgroundColor: '#f4f4f4',
-    appBarCustomTextColor: '#ccc',
-    appBarTitle: '',
-    primaryColor: '#e2001a',
-    secondaryColor: '#777777',
-    resultFirstRowProperty: 'title',
-    resultSecondRowProperty: 'sku',
-    resultLinkText: 'Info',
-    customFontFamily: 'Helvetica',
+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/helpers/CommonHelper.ts

@@ -14,15 +14,19 @@ export const prepareImageList = (dataItem: any) => {
       key?.includes('additional_image_link')
     ) {
       if (!isEmpty(newObject[key])) {
-        valueKey.push({
-          url: newObject[key],
-        });
+        if (newObject[key]) {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
       }
     } else {
       if (key === 'image(main_similarity)' || key === 'main_image_link') {
-        valueKey.push({
-          url: newObject[key],
-        });
+        if (newObject[key]) {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
       }
     }
   }

package/src/hooks/useVisualSearch.tsx

@@ -54,7 +54,7 @@ export const useVisualSearch = () => {
       }
       const preFilter = [
         {
-          key: settings.filterType,
+          key: settings.visualSearchFilterKey,
           values: [`${keyFilter}`],
         },
       ];

package/src/index.css

@@ -1700,3 +1700,16 @@ a img.aligncenter {
   
 }
 
+/* Css Common all page */
+.d-flex {
+  display: flex !important;
+}
+.justify-center {
+  justify-content: center;
+}
+.flex-end {
+  align-items: flex-end;
+}
+.flex-center {
+  align-items: center;
+}

package/src/index.tsx

@@ -5,10 +5,8 @@ import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import { Provider } from 'react-redux';
-import { AppSettings, MDSettings } from './types';
 import { MuiThemeProvider } from '@material-ui/core';
 import 'typeface-roboto';
-import { defaultMdSettings } from './defaults';
 import { HashRouter } from 'react-router-dom';
 import Router from 'Router';
 import { store } from 'Store/Store';
@@ -16,15 +14,8 @@ import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { createTheme } from '@material-ui/core/styles';
 import { Toaster } from 'components/Toaster';
 
-declare var settings: AppSettings;
-
 document.title = window.location.host;
 
-let md: MDSettings = {
-  ...defaultMdSettings,
-  ...settings.themePage.materialDesign,
-};
-
 let theme = createTheme({
   overrides: {
     MuiTooltip: {
@@ -36,17 +27,6 @@ let theme = createTheme({
       },
     },
   },
-  typography: {
-    fontFamily: md.customFontFamily,
-  },
-  palette: {
-    primary: {
-      main: md.primaryColor,
-    },
-    secondary: {
-      main: md.secondaryColor,
-    },
-  },
 });
 
 ReactDOM.render(