@nyris/nyris-webapp 0.3.24 → 0.3.26

package/src/components/{LoadingScreen → ProductList}/index.tsx

@@ -16,7 +16,7 @@ interface Props {
   searchQuery?: string;
 }
 
-function LoadingScreen({
+function ProductListComponent({
   allSearchResults,
   getUrlToCanvasFile,
   sendFeedBackAction,
@@ -167,5 +167,5 @@ function LoadingScreen({
   return <>{renderItem}</>;
 }
 
-const LoadingScreenCustom = connectStateResults<Props>(memo(LoadingScreen));
-export default LoadingScreenCustom;
+const ProductList = connectStateResults<Props>(memo(ProductListComponent));
+export default ProductList;

package/src/components/appMobile.scss

@@ -1,9 +1,5 @@
 @media screen and (max-width: 776px) {
-  // @media screen and (-webkit-min-device-pixel-ratio: 0) {
-  //   html {
-  //     background-color: #fff;
-  //   }
-  // }
+
   html {
     background-color: #fff;
   }
@@ -675,11 +671,7 @@
       min-height: initial;
       min-height: initial !important;
 
-      .carousel {
-        .thumbs-wrapper {
-          // display: none;
-        }
-      }
+      
     }
 
     &.box-modal-share {
@@ -692,17 +684,6 @@
     background-color: #fff;
   }
 
-  .box-slider-image-result {
-    button {
-      // width: 100% !important;
-      // height: 100% !important;
-      span {
-        // width: 100% !important;
-        // height: 100% !important;
-      }
-    }
-  }
-
   .box-modal-default {
     max-width: 340px;
     .box-carosel .thumbs-wrapper {

package/src/components/carousel/ImagePreviewCarousel.tsx

@@ -31,8 +31,9 @@ export const ImagePreviewCarousel = (props: Props) => {
       gap: '1rem',
       pagination: false,
       arrows: false,
+      width: isMobile ? 340 : 370,
     }),
-    [],
+    [isMobile],
   );
 
   const thumbsOptions: Options = useMemo(

package/src/components/common.scss

@@ -6,6 +6,8 @@
   overflow: hidden;
   .box-header-newVersion-main {
     height: 50px;
+    min-height: 50px;
+
     // background: #2b2c46;
     .box-content {
       max-width: 1280px;

package/src/components/drawer/cameraCustom.tsx

@@ -9,7 +9,6 @@ import { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
 import Webcam from 'react-webcam';
 import { createImage, findByImage, findRegions } from 'services/image';
-// import { showFeedback } from 'Store/Nyris';
 import {
   onToggleModalItemDetail,
   setImageSearchInput,
@@ -19,7 +18,7 @@ import {
   loadingActionResults,
   setRegions,
   setSelectedRegion,
-} from 'Store/Search';
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 
 interface Props {

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();
@@ -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);
@@ -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>
@@ -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>
@@ -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/{modules/LandingPage → 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 AppMD(props: Props) {
+function AppMD() {
   const { settings } = useAppSelector(state => state);
   const [isLoading, setLoading] = useState<boolean>(false);
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;

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);

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}

package/src/translations.ts

@@ -0,0 +1,22 @@
+export const translations = {
+  en: {
+    translation: {
+      Search: 'Search',
+      'Choose an image': 'Choose an image',
+      'or drag it here': 'or drag it here',
+      'Manufacturer Number': 'Manufacturer Number',
+      'Close group': 'Close group',
+      'Show group': 'Show group',
+    },
+  },
+  de: {
+    translation: {
+      Search: 'Suche',
+      'Choose an image': 'Bild wählen',
+      'or drag it here': 'oder hierhin ziehen',
+      'Manufacturer Number': 'Herst. Teile-Nr.',
+      'Close group': 'Schließe Gruppe',
+      'Show group': 'Zeige Gruppe',
+    },
+  },
+};

package/src/types.ts

@@ -1,6 +1,6 @@
 import { NyrisAPISettings } from '@nyris/nyris-api';
-import { NyrisAppState } from 'Store/Nyris';
-import { SearchState } from 'Store/Search';
+import { NyrisAppState } from 'Store/nyris/types';
+import { SearchState } from 'Store/search/types';
 
 export interface AlgoliaSettings {
   apiKey: string;
@@ -30,10 +30,12 @@ export interface AppSettings extends NyrisAPISettings {
   alogoliaFilterField?: string;
   headerText?: string;
   brandName?: string;
+  shareOption?: boolean;
+  language?: string;
+  itemIdLabel?: string;
 }
 
 export interface SearchSuiteSettings {
-  active?: boolean;
   appBarLogoUrl?: string;
   headerColor?: string;
   logoWidth?: string;