@nyris/nyris-webapp 0.3.47 → 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.47",
+  "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.47",
-    "@nyris/nyris-react-components": "^0.3.47",
+    "@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",

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

@@ -147,6 +147,7 @@ function ImagePreviewMobileComponent({
                   setEditActive(true);
                 }}
                 showGrip={editActive}
+                draggable={editActive ? true : false}
               />
             </div>
           </Box>

package/src/components/Inquiry/InquiryBanner.tsx

@@ -52,7 +52,7 @@ function InquiryBanner({
           alignSelf: 'end',
           display: 'flex',
           alignItems: 'center',
-          marginRight: '12px',
+          // marginRight: '12px',
         }}
         className="rfq-box"
       >

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 && (

package/src/components/MobilePostFilter.tsx

@@ -1,7 +1,10 @@
 import React, { memo } from 'react';
-import ExpandablePanelComponent from 'components/PanelResult';
+
+import PostFilterPanel from './PanelResult/PostFilter';
+import PostFilterPanelAlgolia from './PanelResult/PostFilterAlgolia';
 
 import { connectStateResults } from 'react-instantsearch-dom';
+import { useAppSelector } from 'Store/Store';
 
 interface Props {
   allSearchResults: any;
@@ -9,11 +12,17 @@ interface Props {
 }
 
 function MobilePostFilter(props: Props) {
+  const settings = useAppSelector(state => state.settings);
   return (
-    <ExpandablePanelComponent
-      disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
-      onApply={props.onApply}
-    />
+    <>
+      {settings.algolia.enabled && (
+        <PostFilterPanelAlgolia
+          disjunctiveFacets={props?.allSearchResults?.disjunctiveFacets}
+          onApply={props.onApply}
+        />
+      )}
+      {!settings.algolia.enabled && <PostFilterPanel onApply={props.onApply} />}
+    </>
   );
 }