@nyris/nyris-webapp 0.3.23 → 0.3.25

package/src/components/input/inputSearch.tsx

@@ -24,12 +24,13 @@ import {
   loadingActionResults,
   setRegions,
   setSelectedRegion,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import DefaultModal from 'components/modal/DefaultModal';
-import FilterComponent from 'components/pre-filter/desktop';
+import PreFilterComponent from 'components/pre-filter';
 import { RectCoords } from '@nyris/nyris-api';
 import { truncateString } from 'helpers/truncateString';
+import { useTranslation } from 'react-i18next';
 
 const SearchBox = (props: any) => {
   const { refine, onToggleFilterMobile }: any = props;
@@ -45,7 +46,7 @@ const SearchBox = (props: any) => {
   const query = useQuery();
   const [isOpenModalFilterDesktop, setToggleModalFilterDesktop] =
     useState<boolean>(false);
-
+  const { t } = useTranslation();
   useEffect(() => {
     if (focusInp?.current) {
       focusInp?.current.focus();
@@ -166,8 +167,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 +197,7 @@ const SearchBox = (props: any) => {
                       <CloseIcon
                         style={{
                           fontSize: 20,
-                          color: settings.themePage.searchSuite?.secondaryColor,
+                          color: settings.theme?.secondaryColor,
                         }}
                       />
                     </button>
@@ -257,7 +258,7 @@ const SearchBox = (props: any) => {
                 fontStyle: 'italic',
               }}
               className="input-search"
-              placeholder="Search"
+              placeholder={t('Search')}
               value={valueInput}
               onChange={onChangeText}
               ref={focusInp}
@@ -362,7 +363,7 @@ const SearchBox = (props: any) => {
           classNameModal="wrap-filter-destop"
           classNameComponentChild="bg-white box-filter-destop"
         >
-          <FilterComponent
+          <PreFilterComponent
             handleClose={() => setToggleModalFilterDesktop(false)}
           />
         </DefaultModal>

package/src/components/pre-filter/{desktop/index.tsx → index.tsx}

@@ -4,7 +4,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import IconSearch from 'common/assets/icons/icon_search.svg';
 import { getFilters, searchFilters } from 'services/filter';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { setUpdateKeyFilterDesktop } from 'Store/Search';
+import { setUpdateKeyFilterDesktop } from 'Store/search/Search';
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import { useMediaQuery } from 'react-responsive';
 import { isEmpty } from 'lodash';
@@ -16,7 +16,7 @@ interface Props {
   // onChangeKeyFilter?: any;
 }
 
-function FilterComponent(props: Props) {
+function PreFilterComponent(props: Props) {
   const { handleClose } = props;
   const dispatch = useAppDispatch();
   const stateGlobal = useAppSelector(state => state);
@@ -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',
@@ -353,4 +353,4 @@ function FilterComponent(props: Props) {
   );
 }
 
-export default FilterComponent;
+export default PreFilterComponent;

package/src/components/results/ItemResult.tsx

@@ -11,9 +11,13 @@ import { AppState } from 'types';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import DefaultModal from 'components/modal/DefaultModal';
 import DetailItem from 'components/DetailItem';
-import { onToggleModalItemDetail, updateStatusLoading } from 'Store/Search';
+import {
+  onToggleModalItemDetail,
+  updateStatusLoading,
+} from 'Store/search/Search';
 import { ShareModal } from '../ShareModal';
 import { truncateString } from 'helpers/truncateString';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   dataItem: any;
@@ -48,7 +52,7 @@ function ItemResult(props: Props) {
   const [isOpenModalImage, setOpenModalImage] = useState<boolean>(false);
   const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
   const [feedback, setFeedback] = useState('none');
-
+  const { t } = useTranslation();
   const { sku, title, brand, main_offer_link, collap } = dataItem;
   useEffect(() => {
     if (main_image_link) {
@@ -94,14 +98,7 @@ function ItemResult(props: Props) {
     }, 400);
   };
   return (
-    <Box
-      className="wrap-main-item-result"
-      // style={{
-      //   height: 'calc(100% - 25px)',
-      //   backgroundColor: 'rgb(243, 243, 245)',
-      // }}
-    >
-      {/* TODO: Component modal image */}
+    <Box className="wrap-main-item-result">
       <DefaultModal
         openModal={isOpenModalImage}
         handleClose={(e: any) => {
@@ -122,7 +119,6 @@ function ItemResult(props: Props) {
         />
       </DefaultModal>
 
-      {/* TODO: Component modal share */}
       <ShareModal
         setModalState={setOpenModalShare}
         dataItem={dataItem}
@@ -132,7 +128,7 @@ function ItemResult(props: Props) {
         {isGroupItem && collap && (
           <Box className="btn-show-result">
             <Button onClick={handlerShowGroup}>
-              Show group
+              {t('Show group')}
               <ChevronRightOutlinedIcon style={{ fontSize: '10px' }} />
             </Button>
           </Box>
@@ -140,7 +136,7 @@ function ItemResult(props: Props) {
         {isGroupItem && !collap && (
           <Box className="btn-show-result">
             <Button onClick={handlerHideGroup}>
-              Close group
+              {t('Close group')}
               <ChevronRightOutlinedIcon style={{ fontSize: '10px' }} />
             </Button>
           </Box>
@@ -151,7 +147,7 @@ function ItemResult(props: Props) {
               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 +174,7 @@ function ItemResult(props: Props) {
                 src={NoImage}
                 alt="image_item"
                 className="img-style"
-                style={{ width: '100%', height: '100%', objectFit: "cover" }}
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
               />
             )}
           </Button>
@@ -218,7 +214,9 @@ function ItemResult(props: Props) {
                     display: 'inline-block',
                   }}
                 >
-                  <span style={{ marginRight: 3 }}>SKU:</span>
+                  <span style={{ marginRight: 3 }}>
+                    {settings.itemIdLabel || 'SKU'}:
+                  </span>
                   {truncateString(sku, 19)}
                 </Typography>
               </Tooltip>
@@ -260,7 +258,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 +268,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 +305,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 +369,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 +393,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%',
@@ -419,12 +417,18 @@ function ItemResult(props: Props) {
           </Box>
         )}
 
-        {settings.showFeedbackAndShare && !settings.warehouseVariant && (
+        {settings.showFeedbackAndShare && (
           <Box
             className="box-bottom"
             style={{ marginBottom: 6, marginTop: 10 }}
           >
-            <Grid container justifyContent="space-between" alignItems="center">
+            <Grid
+              container
+              justifyContent={
+                settings.shareOption ? 'space-between' : 'space-around'
+              }
+              alignItems="center"
+            >
               <Grid item>
                 <Box display={'flex'} alignItems={'center'}>
                   <Button
@@ -461,17 +465,19 @@ function ItemResult(props: Props) {
                   </Button>
                 </Box>
               </Grid>
-              <Grid item>
-                <Box display={'flex'} alignItems={'center'}>
-                  <Button
-                    style={{ padding: '6px' }}
-                    className="btn-item"
-                    onClick={() => false}
-                  >
-                    <IconShare width={16} height={16} color="#808080" />
-                  </Button>
-                </Box>
-              </Grid>
+              {settings.shareOption && (
+                <Grid item>
+                  <Box display={'flex'} alignItems={'center'}>
+                    <Button
+                      style={{ padding: '6px' }}
+                      className="btn-item"
+                      onClick={() => false}
+                    >
+                      <IconShare width={16} height={16} color="#808080" />
+                    </Button>
+                  </Box>
+                </Grid>
+              )}
               {/* <Grid item>
               <Box display={'flex'} alignItems={'center'}>
                 <Button className="btn-item">

package/src/constants.ts

@@ -1 +1,13 @@
 export const DEFAULT_REGION = { x1: 0, x2: 1, y1: 0, y2: 1 };
+export const showHits = [
+  { value: 10, label: '10' },
+  { value: 20, label: '20' },
+  { value: 30, label: '30' },
+  { value: 40, label: '40' },
+  { value: 50, label: '50' },
+  { value: 60, label: '60' },
+  { value: 70, label: '70' },
+  { value: 80, label: '80' },
+  { value: 90, label: '90' },
+  { value: 100, label: '100' },
+];

package/src/hooks/useVisualSearch.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { feedbackClickEpic } from 'services/Feedback';
 import { createImage, findByImage, findRegions } from 'services/image';
-import { showFeedback, showResults } from 'Store/Nyris';
+import { showFeedback, showResults } from 'Store/nyris/Nyris';
 import {
   loadingActionResults,
   onToggleModalItemDetail,
@@ -13,7 +13,7 @@ import {
   setSearchResults,
   setSelectedRegion,
   updateStatusLoading,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 
 export const useVisualSearch = () => {

package/src/i18n.ts

@@ -0,0 +1,10 @@
+// i18n.ts
+import 'i18next';
+
+// declare custom type options so the return is always a string.
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}

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(

package/src/{modules/LandingPage/indexNewVersion.tsx → page/landingPage/AppMD.tsx}

@@ -12,9 +12,7 @@ import { Link } from 'react-router-dom';
 import { useAppSelector } from 'Store/Store';
 import { AlgoliaSettings } from '../../types';
 
-interface Props {}
-
-function AppNewVersion(props: Props) {
+function AppMD() {
   const { settings } = useAppSelector(state => state);
   const [isLoading, setLoading] = useState<boolean>(false);
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
@@ -69,4 +67,4 @@ function AppNewVersion(props: Props) {
   );
 }
 
-export default AppNewVersion;
+export default AppMD;

package/src/{modules/LandingPage → page/landingPage}/AppMobile.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { feedbackClickEpic } from 'services/Feedback';
 import { createImage, findByImage, findRegions } from 'services/image';
-import { showFeedback, showResults } from 'Store/Nyris';
+import { showFeedback, showResults } from 'Store/nyris/Nyris';
 import {
   loadingActionResults,
   reset,
@@ -16,11 +16,10 @@ import {
   setSearchResults,
   setSelectedRegion,
   updateStatusLoading,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
-interface Props {}
 
-function AppMobile(props: Props): JSX.Element {
+function AppMobile(): JSX.Element {
   const history = useHistory();
   const dispatch = useAppDispatch();
   const searchState = useAppSelector(state => state);
@@ -87,7 +86,7 @@ function AppMobile(props: Props): JSX.Element {
             height: '100%',
             width: '100%',
             zIndex: 1,
-            background: `${settings.themePage.searchSuite?.mobileFooterImageColor}`,
+            background: `${settings.theme?.mobileFooterImageColor}`,
           }}
         ></div>
         <Box style={{ position: 'inherit', zIndex: 100 }} className="title-top">

package/src/{modules/LandingPage → page/landingPage}/common.scss

@@ -573,14 +573,8 @@ button {
 
       border-radius: 12px;
       &:hover {
-        background: linear-gradient(180deg, #3e36dc 0%, #2b269a 100%);
+        background: #ececec;
         box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
-        span {
-          color: #fff;
-        }
-        svg {
-          color: #fff;
-        }
       }
       button {
         padding: 5px !important;
@@ -960,7 +954,7 @@ button {
     }
   }
   .box-result {
-    height: calc(100svh - 180px);
+    height: calc(100svh - 190px);
     display: flex;
     justify-content: space-between;
     // overflow: auto;

package/src/page/result/index.tsx

@@ -10,7 +10,7 @@ import IconSupport from 'common/assets/icons/support3.svg';
 import { CurrentRefinements } from 'components/current-refinements/current-refinements';
 import FooterResult from 'components/FooterResult';
 import CustomSearchBox from 'components/input/inputSearch';
-import LoadingScreenCustom from 'components/LoadingScreen';
+import ProductList from 'components/ProductList';
 import ExpandablePanelComponent from 'components/PanelResult';
 import { debounce, isEmpty } from 'lodash';
 import {
@@ -23,7 +23,7 @@ import { useMediaQuery } from 'react-responsive';
 import { Link } from 'react-router-dom';
 import { feedbackClickEpic, feedbackSuccessEpic } from 'services/Feedback';
 import { createImage, findByImage, findRegions } from 'services/image';
-import { showFeedback, showResults } from 'Store/Nyris';
+import { showFeedback, showResults } from 'Store/nyris/Nyris';
 import {
   loadingActionResults,
   onToggleModalItemDetail,
@@ -35,9 +35,9 @@ import {
   setSelectedRegion,
   updateResultChangePosition,
   updateStatusLoading,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { showHits } from './MockData';
+import { showHits } from '../../constants';
 import { DEFAULT_REGION } from '../../constants';
 
 interface Props {
@@ -287,8 +287,7 @@ function ResultComponent(props: Props) {
                         <Box
                           className="col-left"
                           style={{
-                            backgroundColor:
-                              settings?.themePage?.searchSuite?.primaryColor,
+                            backgroundColor: settings?.theme?.primaryColor,
                           }}
                         >
                           <Box className="box-preview">
@@ -335,7 +334,7 @@ function ResultComponent(props: Props) {
                 } ${isMobile && 'col-right-result-mobile'}`}
                 style={{
                   marginTop:
-                    keyFilter && isMobile ? '95px' : isMobile ? '50px' : '0px',
+                    keyFilter && isMobile ? '105px' : isMobile ? '60px' : '0px',
                 }}
               >
                 <Box className="wrap-box-refinements">
@@ -345,8 +344,7 @@ function ResultComponent(props: Props) {
                   <Box
                     className="col-left"
                     style={{
-                      backgroundColor:
-                        settings?.themePage?.searchSuite?.primaryColor,
+                      backgroundColor: settings?.theme?.primaryColor,
                       marginBottom: '15px',
                     }}
                   >
@@ -376,7 +374,7 @@ function ResultComponent(props: Props) {
                 )}
 
                 <Box className={'box-item-result ml-auto mr-auto'}>
-                  <LoadingScreenCustom
+                  <ProductList
                     getUrlToCanvasFile={getUrlToCanvasFile}
                     setLoading={false}
                     sendFeedBackAction={sendFeedBackAction}