@nyris/nyris-webapp 0.3.46 → 0.3.48

package/build/static/media/add.ba46a4bf.svg

@@ -0,0 +1,4 @@
+
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.625 7.375V3.625C8.625 3.27982 8.34518 3 8 3C7.65482 3 7.375 3.27982 7.375 3.625V7.375H3.625C3.27982 7.375 3 7.65482 3 8C3 8.34518 3.27982 8.625 3.625 8.625H7.375V12.375C7.375 12.7202 7.65482 13 8 13C8.34518 13 8.625 12.7202 8.625 12.375V8.625H12.375C12.7202 8.625 13 8.34518 13 8C13 7.65482 12.7202 7.375 12.375 7.375H8.625Z" fill="#2B2C46"/>
+</svg>

package/build/static/media/arrow_left.fd9d4390.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.07845 9.15944C5.74747 8.78211 5.74747 8.21789 6.07845 7.84056L9.53895 3.8956C9.72281 3.68599 10.0491 3.68599 10.233 3.8956C10.3858 4.06978 10.3858 4.33022 10.233 4.5044L7.30652 7.84056C6.97554 8.21789 6.97554 8.78211 7.30652 9.15944L10.233 12.4956C10.3858 12.6698 10.3858 12.9302 10.233 13.1044C10.0491 13.314 9.72281 13.314 9.53895 13.1044L6.07845 9.15944Z" fill="#2B2C46"/>
+</svg>

package/build/static/media/arrow_right.c6fdab0b.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.92155 9.15944C10.2525 8.78211 10.2525 8.21789 9.92155 7.84056L6.46105 3.8956C6.27719 3.68599 5.95088 3.68599 5.76702 3.8956C5.61423 4.06978 5.61423 4.33022 5.76702 4.5044L8.69348 7.84056C9.02446 8.21789 9.02446 8.78211 8.69348 9.15944L5.76702 12.4956C5.61423 12.6698 5.61423 12.9302 5.76702 13.1044C5.95088 13.314 6.27719 13.314 6.46105 13.1044L9.92155 9.15944Z" fill="#2B2C46"/>
+</svg>

package/build/static/media/minus.3fce6c0a.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="7.36328" width="10" height="1.27383" rx="0.636915" fill="#2B2C46"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.46",
+  "version": "0.3.48",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -13,8 +13,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.46",
-    "@nyris/nyris-react-components": "^0.3.46",
+    "@nyris/nyris-api": "^0.3.48",
+    "@nyris/nyris-react-components": "^0.3.48",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",
@@ -57,7 +57,7 @@
     "react-scripts": "^3.4.1",
     "react-select": "^5.2.2",
     "react-table": "^7.7.0",
-    "react-webcam": "^7.0.1",
+    "react-webcam": "^7.2.0",
     "redux": "^4.0.4",
     "redux-observable": "^1.1.0",
     "redux-thunk": "^2.4.1",

package/public/js/settings.example.js

@@ -1,19 +1,90 @@
 var settings = {
-  apiKey: 'xxx',
-  maxWidth: 500,
-  maxHeight: 500,
+  auth0: {
+    enabled: '',
+    domain: '',
+    clientId: '',
+    supportEmail: '',
+  },
+  algolia: {
+    apiKey: '',
+    appId: '',
+    indexName: '',
+  },
+  alogoliaFilterField: 'keyword',
+  refinements: [
+    {
+      attribute: 'brand',
+      header: 'Brands',
+    },
+    {
+      attribute: 'keyword_0',
+      header: 'Category',
+    },
+  ],
+  // Nyris - visual search
+  apiKey: '',
+  baseUrl: 'https://api.nyris.io',
   jpegQuality: 0.9,
+  maxHeight: 1024,
+  maxWidth: 1024,
   regions: true,
-  preview: true,
-  baseUrl: 'https://api.nyris.io',
-  xOptions: '',
-  instantRedirectPatterns: [
-    '^https?://(www.)?youtube.com/',
-    '^https?://(www.)?youtu.be/',
-    '^https?://(www.)?vimeo.com/',
-    '^https?://(www.)?dailymotion.com/',
-    '^https?://(www.)?dai.ly/',
-  ],
+  responseFormat: 'application/offers.complete+json',
+  visualSearchFilterKey: '',
+  // UI - theme
+  theme: {
+    appBarLogoUrl: '',
+    headerColor: '',
+    logoHeight: '',
+    logoWidth: '',
+    primaryColor: '',
+    secondaryColor: '',
+  },
+  language: 'en',
+  // features
+  shareOption: '',
+  showFeedbackAndShare: '',
+  showPoweredByNyris: '',
+  warehouseVariant: false,
+  postFilterOption: '',
+  preFilterOption: '',
+  rfq: {
+    enabled: '',
+    emailTemplateId: '',
+  },
+  support: {
+    enabled: '',
+    emailInquiry: '',
+    emailTemplateId: '',
+    supportNumber: '',
+    description: '',
+  },
+  cadenas: {
+    catalog: '',
+    cadenasAPIKey: '',
+    cadenas3dWebView: '',
+  },
+  //UI - labels
+  appTitle: '',
+  brandName: '',
+  headerText: '',
+  itemIdLabel: 'SKU',
+  preFilterTitle: '',
+  CTAButtonText: '',
+  //field mappins
+  field: {
+    ctaLinkField: 'main_offer_link',
+    productName: 'title',
+    productDetails: 'keyword_1',
+    manufacturerNumber: 'keyword_0',
+    productTag: 'brand',
+    //WarehouseVariant
+    warehouseNumber: 'custom_id_key_2',
+    warehouseNumberValue: 'custom_id_value_2',
+    warehouseShelfNumber: 'custom_id_key_1',
+    warehouseShelfNumberValue: 'custom_id_value_1',
+    warehouseStock: 'custom_id_key_3',
+    warehouseStockValue: 'custom_id_value_3',
+  },
 };
 settings['customSearchRequest'] = null;
 settings['responseHook'] = null;

package/src/Store/Store.ts

@@ -9,6 +9,7 @@ import { defaultSettings } from './constants';
 declare var settings: AppSettings;
 
 settings.algolia.enabled = true;
+settings.preview = true;
 
 let normalizedSettings: AppSettings = {
   ...defaultSettings,

package/src/Store/search/Search.ts

@@ -2,6 +2,7 @@ import { RectCoords, Region } from '@nyris/nyris-api';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { DEFAULT_REGION } from '../../constants';
 import { initialState } from './search.initialState';
+import { isUndefined } from 'lodash';
 
 export const searchSlice = createSlice({
   name: 'search',
@@ -156,6 +157,7 @@ export const searchSlice = createSlice({
         textSearchInputMobile: '',
         isShowModalDetailItemMobile: false,
         preFilter: state.preFilter || {},
+        postFilter: {},
         preFilterDropdown: false,
         imageCaptureHelpModal: false,
       };
@@ -260,11 +262,44 @@ export const searchSlice = createSlice({
         filter: data.payload,
       };
     },
+    setPostFilter: (state, data: PayloadAction<Record<string, string>>) => {
+      const { payload } = data;
+
+      let filter = { ...state.postFilter } || {};
+      const key = Object.keys(payload)[0];
+
+      if (
+        !isUndefined(filter[key]) &&
+        !isUndefined(filter[key][payload[key]])
+      ) {
+        filter[key] = {
+          ...filter[key],
+          [payload[key]]: !filter[key][payload[key]],
+        };
+      } else if (!filter[key]) {
+        filter = { ...filter, [key]: { [payload[key]]: true } };
+      } else {
+        filter[key] = { ...filter[key], [payload[key]]: true };
+      }
+
+      return {
+        ...state,
+        postFilter: { ...filter },
+      };
+    },
+
+    clearPostFilter: state => {
+      return {
+        ...state,
+        postFilter: {},
+      };
+    },
   },
 });
 
 export const {
   changeValueTextSearch,
+  clearPostFilter,
   configureFilter,
   loadFileSelectRegion,
   loadingActionRegions,
@@ -279,6 +314,7 @@ export const {
   setFilter,
   setImageCaptureHelpModal,
   setImageSearchInput,
+  setPostFilter,
   setPreFilter,
   setPreFilterDropdown,
   setRegions,

package/src/Store/search/search.initialState.ts

@@ -26,4 +26,5 @@ export const initialState: SearchState = {
     page: 1,
     refinementList: '',
   },
+  postFilter: {},
 };

package/src/Store/search/types.ts

@@ -33,4 +33,5 @@ export interface SearchState {
   setPreFilterDropdown?: any;
   textSearchInputMobile?: string;
   valueTextSearch: any;
+  postFilter: Record<string, Record<string, boolean>>;
 }

package/src/common/assets/icons/add.svg

@@ -0,0 +1,4 @@
+
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.625 7.375V3.625C8.625 3.27982 8.34518 3 8 3C7.65482 3 7.375 3.27982 7.375 3.625V7.375H3.625C3.27982 7.375 3 7.65482 3 8C3 8.34518 3.27982 8.625 3.625 8.625H7.375V12.375C7.375 12.7202 7.65482 13 8 13C8.34518 13 8.625 12.7202 8.625 12.375V8.625H12.375C12.7202 8.625 13 8.34518 13 8C13 7.65482 12.7202 7.375 12.375 7.375H8.625Z" fill="#2B2C46"/>
+</svg>

package/src/common/assets/icons/minus.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="7.36328" width="10" height="1.27383" rx="0.636915" fill="#2B2C46"/>
+</svg>

package/src/components/HeaderMobile.tsx

@@ -55,6 +55,8 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     queryText,
     requestImage,
     selectedRegion,
+    results,
+    postFilter,
   } = search;
 
   const query = useQuery();
@@ -162,16 +164,30 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   );
   const isPostFilterApplied = useMemo(() => {
     let isApplied = false;
-    if (!valueTextSearch?.refinementList) return false;
-    Object.keys(valueTextSearch?.refinementList).forEach(key => {
-      if (typeof valueTextSearch.refinementList[key] === 'object') {
-        isApplied = true;
-        return;
-      }
-    });
+
+    if (settings.algolia.enabled) {
+      if (!valueTextSearch?.refinementList) return false;
+      Object.keys(valueTextSearch?.refinementList).forEach(key => {
+        if (typeof valueTextSearch.refinementList[key] === 'object') {
+          isApplied = true;
+          return;
+        }
+      });
+    } else {
+      Object.keys(postFilter).forEach(key => {
+        const filter = postFilter[key];
+        Object.keys(filter).forEach(value => {
+          if (filter[value]) {
+            isApplied = true;
+            return;
+          }
+        });
+      });
+    }
+
     return isApplied;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [valueTextSearch?.refinementList]);
+  }, [valueTextSearch?.refinementList, settings, postFilter]);
 
   const onChangeText = (event: any) => {
     // debounceSearch(event.currentTarget.value);
@@ -184,11 +200,16 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     }
   };
   const disablePostFilter = useMemo(() => {
-    return settings.postFilterOption && props.allSearchResults?.hits.length > 0
-      ? false
-      : true;
+    if (settings.algolia.enabled) {
+      return settings.postFilterOption &&
+        props.allSearchResults?.hits.length > 0
+        ? false
+        : true;
+    } else {
+      return settings.postFilterOption && results?.length > 0 ? false : true;
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settings.postFilterOption, props.allSearchResults?.hits]);
+  }, [settings, results, props.allSearchResults?.hits]);
 
   return (
     <div style={{ width: '100%', background: '#fff' }}>

package/src/components/ImagePreviewMobile.tsx

@@ -41,7 +41,6 @@ function ImagePreviewMobileComponent({
   const { t } = useTranslation();
   const { refine }: any = rest;
   const [editActive, setEditActive] = useState(false);
-  const [showShrinkAnimation, setShrinkAnimation] = useState(false);
   const settings = useAppSelector(state => state.settings);
   const { preFilter } = useAppSelector(state => state.search);
   const isAlgoliaEnabled = settings.algolia?.enabled;
@@ -51,7 +50,6 @@ function ImagePreviewMobileComponent({
 
   const handleArrowClick = () => {
     setEditActive(s => !s);
-    setShrinkAnimation(true);
   };
 
   const searchQuery = query.get('query') || '';
@@ -117,12 +115,14 @@ function ImagePreviewMobileComponent({
         marginBottom: '15px',
       }}
     >
-      {editActive && (
-        <div>
-          <Box className="box-preview">
-            <Box
-              className="preview-item expand-animation"
-              style={{ backgroundColor: 'transparent' }}
+      <div>
+        <Box className="box-preview">
+          <Box>
+            <div
+              className="preview-item"
+              style={{
+                backgroundColor: 'transparent',
+              }}
             >
               <Preview
                 key={requestImage?.id}
@@ -133,104 +133,52 @@ function ImagePreviewMobileComponent({
                 image={requestImage?.canvas}
                 selection={imageSelection || DEFAULT_REGION}
                 regions={filteredRegions}
-                maxWidth={240}
-                maxHeight={240}
-                dotColor={'#FBD914'}
-                minCropWidth={60}
-                minCropHeight={60}
+                minWidth={80}
+                minHeight={80}
+                maxWidth={255}
+                maxHeight={255}
+                dotColor={editActive ? '#FBD914' : ''}
+                minCropWidth={editActive ? 60 : 5}
+                minCropHeight={editActive ? 60 : 5}
                 rounded={false}
-                expandAnimation={true}
-              />
-            </Box>
-            {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
-              <Box
-                className="box-title_col-left"
-                alignItems="center"
-                style={{
-                  backgroundColor: '#3E36DC',
-                  display: 'flex',
-                  columnGap: '6px',
-                  padding: '5px',
-                  width: 'fit-content',
+                expandAnimation={editActive}
+                shrinkAnimation={!editActive}
+                onExpand={() => {
+                  setEditActive(true);
                 }}
-              >
-                <IconInfo color="white" />
-                <Typography
-                  style={{
-                    fontSize: 10,
-                    color: '#fff',
-                  }}
-                >
-                  {showAdjustInfo
-                    ? t('Crop the image for better results')
-                    : 'Crop the image for better results'}
-                </Typography>
-              </Box>
-            )}
+                showGrip={editActive}
+                draggable={editActive ? true : false}
+              />
+            </div>
           </Box>
-          <Hidden>
-            <Box
-              sx={{
-                position: 'absolute',
-                left: '15px',
-                top: '25px',
-                padding: '4px',
-              }}
-              onClick={onImageRemove}
-            >
-              <Box
-                sx={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
-                }}
-              >
-                <Trash color="white" fill="white" />
-              </Box>
-            </Box>
-          </Hidden>
-
-          <Hidden mdUp>
+          {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
             <Box
-              className="slideDown"
-              sx={{
-                position: 'absolute',
-                bottom: '25px',
-                right: '20px',
+              className="box-title_col-left"
+              alignItems="center"
+              style={{
+                backgroundColor: '#3E36DC',
+                display: 'flex',
+                columnGap: '6px',
+                padding: '5px',
+                width: 'fit-content',
+                minWidth: '180px',
               }}
-              onClick={handleArrowClick}
             >
-              <Box
-                bgcolor={'white'}
-                sx={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
+              <IconInfo color="white" />
+              <Typography
+                style={{
+                  fontSize: 10,
+                  color: '#fff',
                 }}
               >
-                <ArrowUp color="black" />
-              </Box>
+                {showAdjustInfo
+                  ? t('Crop the image for better results')
+                  : 'Crop the image for better results'}
+              </Typography>
             </Box>
-          </Hidden>
-        </div>
-      )}
-      {!editActive && (
-        <Box
-          className={showShrinkAnimation ? 'shrink-animation' : ''}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: 80,
-            width: '100%',
-          }}
-        >
+          )}
+        </Box>
+        <>
           <Hidden>
             <Box
               sx={{
@@ -242,7 +190,6 @@ function ImagePreviewMobileComponent({
               onClick={onImageRemove}
             >
               <Box
-                // className={showShrinkAnimation ? 'slideUp' : ''}
                 sx={{
                   width: '24px',
                   height: '24px',
@@ -256,49 +203,19 @@ function ImagePreviewMobileComponent({
               </Box>
             </Box>
           </Hidden>
-          <Box
-            sx={{
-              display: 'flex',
-              height: '100%',
-              width: '100%',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-            onClick={handleArrowClick}
-          >
-            {requestImage && requestImage?.canvas?.toDataURL && (
-              <img
-                src={requestImage?.canvas?.toDataURL()}
-                style={{
-                  width: '80px',
-                  height: '80px',
-                  objectFit: 'contain',
-                  background: 'white',
-                }}
-                alt="preview"
-              />
-            )}
 
-            <div
-              className={
-                showShrinkAnimation
-                  ? 'shrink-animation circle-layer'
-                  : 'circle-layer'
-              }
-            ></div>
-          </Box>
           <Hidden mdUp>
             <Box
+              className="slideDown"
               sx={{
                 position: 'absolute',
-                right: '25px',
-                padding: '4px',
+                bottom: '25px',
+                right: '20px',
               }}
               onClick={handleArrowClick}
             >
               <Box
                 bgcolor={'white'}
-                className={showShrinkAnimation ? 'slideUp' : ''}
                 sx={{
                   width: '24px',
                   height: '24px',
@@ -308,12 +225,13 @@ function ImagePreviewMobileComponent({
                   borderRadius: '100%',
                 }}
               >
-                <ArrowDown color="black" fill="black" />
+                {editActive && <ArrowUp color="black" />}
+                {!editActive && <ArrowDown color="black" fill="black" />}
               </Box>
             </Box>
           </Hidden>
-        </Box>
-      )}
+        </>
+      </div>
     </Box>
   );
 }

package/src/components/Inquiry/InquiryBanner.tsx

@@ -6,6 +6,7 @@ import InquiryModal from './InquiryModal';
 import { useAppSelector } from 'Store/Store';
 import { ReactComponent as EmailIcon } from 'common/assets/icons/icon_email.svg';
 import { ReactComponent as CallIcon } from 'common/assets/icons/call.svg';
+import { useTranslation } from 'react-i18next';
 
 function InquiryBanner({
   requestImage,
@@ -31,6 +32,8 @@ function InquiryBanner({
   const { secondaryColor } =
     useAppSelector(state => state.settings.theme) || {};
 
+  const { t } = useTranslation();
+
   return (
     <>
       {isInquiryModalOpen && (
@@ -49,7 +52,7 @@ function InquiryBanner({
           alignSelf: 'end',
           display: 'flex',
           alignItems: 'center',
-          marginRight: '12px',
+          // marginRight: '12px',
         }}
         className="rfq-box"
       >
@@ -94,8 +97,8 @@ function InquiryBanner({
                 }}
               >
                 {isMobile
-                  ? 'No matches found?'
-                  : 'No matches found for your request?'}
+                  ? `${t('No matches found')}?`
+                  : `${t('No matches found for your request')}?`}
               </Box>
               <Box
                 style={{

package/src/components/Layout.tsx

@@ -3,7 +3,11 @@ import { ReactNode } from 'components/common';
 import React, { memo, useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
-import { onResetRequestImage, setUpdateSession } from 'Store/search/Search';
+import {
+  clearPostFilter,
+  onResetRequestImage,
+  setUpdateSession,
+} from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from '../types';
 import './appMobile.scss';
@@ -22,6 +26,7 @@ import { translations } from 'translations';
 import { useAuth0 } from '@auth0/auth0-react';
 import InstantSearchProvider from './Provider/InstantSearchProvider';
 import PoweredByNyris from './PoweredByNyris';
+import { useQuery } from 'hooks/useQuery';
 
 declare var psol: any;
 
@@ -64,6 +69,9 @@ function Layout({ children }: ReactNode): JSX.Element {
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
   const history = useHistory();
+  const query = useQuery();
+  const searchQuery = query.get('query') || '';
+
   let isShowHeaderMobile =
     (isMobile && history.location?.pathname === '/result') ||
     history.location?.pathname === '/';
@@ -120,6 +128,16 @@ function Layout({ children }: ReactNode): JSX.Element {
     };
   }, []);
 
+  useEffect(() => {
+    if (!(search.requestImage && searchQuery)) {
+      dispatch(clearPostFilter());
+    }
+  }, [search.requestImage, searchQuery, dispatch, search.regions]);
+
+  useEffect(() => {
+    dispatch(clearPostFilter());
+  }, [dispatch, search.selectedRegion]);
+
   return (
     <div style={{ position: 'relative' }}>
       {loadingSearchAlgolia && (