@nyris/nyris-webapp 0.3.32 → 0.3.34

package/src/components/HeaderMobile.tsx

@@ -1,29 +1,34 @@
-import { Box, Button, Typography } from '@material-ui/core';
+import { Box, Button } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import { ReactComponent as IconFilter } from 'common/assets/icons/filter_settings.svg';
 
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { connectSearchBox } from 'react-instantsearch-dom';
-import { useMediaQuery } from 'react-responsive';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { connectSearchBox, connectStateResults } from 'react-instantsearch-dom';
 import { NavLink, useHistory } from 'react-router-dom';
 import {
-  onResetRequestImage,
   reset,
-  setImageSearchInput,
   updateValueTextSearchMobile,
-  setUpdateKeyFilterDesktop,
   setPreFilterDropdown,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
-import CustomSearchBox from './input/inputSearch';
 import { ReactComponent as IconSearch } from 'common/assets/icons/icon_search.svg';
+import { ReactComponent as FilterIcon } from 'common/assets/icons/filter.svg';
+
 import { debounce, isEmpty } from 'lodash';
 import { useQuery } from 'hooks/useQuery';
 
 interface Props {
   onToggleFilterMobile?: any;
   refine?: any;
+  allSearchResults?: any;
 }
 
 function HeaderMobileComponent(props: Props): JSX.Element {
@@ -36,22 +41,24 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     textSearchInputMobile,
     keyFilter,
     preFilterDropdown,
+    valueTextSearch,
   } = search;
   const query = useQuery();
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const containerRefInputMobile = useRef<HTMLDivElement>(null);
-  const [isShowInputSearch, setShowInputSearch] = useState<boolean>(false);
   const [isShowFilter, setShowFilter] = useState<boolean>(false);
   const history = useHistory();
   const { settings } = useAppSelector<AppState>((state: any) => state);
 
   useEffect(() => {
-    if (history.location?.pathname === '/result') {
+    if (
+      history.location?.pathname === '/result' &&
+      (imageThumbSearchInput || textSearchInputMobile)
+    ) {
       setShowFilter(true);
     } else {
       setShowFilter(false);
     }
-  }, [history.location]);
+  }, [imageThumbSearchInput, history.location, textSearchInputMobile]);
 
   useEffect(() => {
     if (imageThumbSearchInput !== '') {
@@ -61,17 +68,6 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     }
   }, [imageThumbSearchInput, dispatch, refine, history]);
 
-  useEffect(() => {
-    if (
-      history.location?.pathname === '/result' ||
-      history.location?.pathname === '/'
-    ) {
-      setShowInputSearch(true);
-    } else {
-      setShowInputSearch(false);
-    }
-  }, [history.location]);
-
   useEffect(() => {
     const searchQuery = query.get('query') || '';
     if (!isEmpty(searchQuery)) {
@@ -97,6 +93,18 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     }, 500),
     [],
   );
+  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;
+      }
+    });
+    return isApplied;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueTextSearch?.refinementList]);
 
   const onChangeText = (event: any) => {
     // debounceSearch(event.currentTarget.value);
@@ -108,244 +116,232 @@ function HeaderMobileComponent(props: Props): JSX.Element {
       dispatch(updateValueTextSearchMobile(event.currentTarget.value));
     }
   };
+  const disablePostFilter = useMemo(() => {
+    return settings.postFilterOption && props.allSearchResults?.hits.length > 0
+      ? false
+      : true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.postFilterOption, props.allSearchResults?.hits]);
+
   return (
-    <Box style={{ width: '100%' }}>
-      <Box
-        className="box-content"
+    <div style={{ width: '100%', background: '#fafafa' }}>
+      {history.location?.pathname !== '/result' && (
+        <Box
+          className="box-content"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            height: '48px',
+            borderBottom: '1px solid #e9e9ec',
+            background: settings.theme?.headerColor,
+          }}
+        >
+          <NavLink
+            to="/"
+            style={{ lineHeight: 0, paddingLeft: '10px' }}
+            onClick={() => {
+              dispatch(reset(''));
+            }}
+          >
+            <img
+              src={settings.theme?.appBarLogoUrl}
+              alt="logo"
+              style={{
+                aspectRatio: 1,
+                width: settings.theme?.logoWidth,
+                height: settings.theme?.logoHeight,
+              }}
+            />
+          </NavLink>
+        </Box>
+      )}
+      <div
         style={{
+          margin: '16px 8px 0px 8px',
           display: 'flex',
+          columnGap: '8px',
           alignItems: 'center',
-          height: '50px',
-          borderBottom: '1px solid #e9e9ec',
-          background: settings.theme?.headerColor,
         }}
       >
-        <NavLink
-          to="/"
-          style={{ lineHeight: 0, paddingLeft: '10px' }}
-          onClick={() => {
-            dispatch(reset(''));
-          }}
-        >
-          <img
-            src={settings.theme?.appBarLogoUrl}
-            alt="logo"
+        <div className="wrap-header-mobile" style={{ height: '56px' }}>
+          <div
             style={{
-              aspectRatio: 1,
-              width: settings.theme?.logoWidth,
-              height: settings.theme?.logoHeight,
+              display: 'flex',
+              alignItems: 'center',
+              height: '100%',
             }}
-          />
-        </NavLink>
-      </Box>
-      <Box className="wrap-header-mobile">
-        {!isMobile ? (
-          <CustomSearchBox onToggleFilterMobile={onToggleFilterMobile} />
-        ) : (
-          <>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              {imageThumbSearchInput && (
-                <div
-                  style={{
-                    border: `2px solid ${settings.theme?.secondaryColor}c7`,
-                    backgroundColor: `${settings.theme?.secondaryColor}26`,
-                  }}
-                  className="box-image-search-thumb-mobile"
-                >
-                  <img
-                    src={imageThumbSearchInput}
-                    style={{ maxWidth: '39px', objectFit: 'contain' }}
-                    alt="img_search"
-                  />
-                  <button
+          >
+            <div
+              ref={containerRefInputMobile}
+              id="box-input-search"
+              className="d-flex w-100"
+              style={{
+                alignItems: 'center',
+                height: '100%',
+              }}
+            >
+              <Box
+                className="pre-filter-icon"
+                onClick={() => {
+                  if (settings.preFilterOption) {
+                    onToggleFilterMobile(false);
+                    dispatch(setPreFilterDropdown(!preFilterDropdown));
+                  }
+                }}
+                style={{ cursor: settings.preFilterOption ? 'pointer' : '' }}
+              >
+                {settings.preFilterOption && (
+                  <div
+                    className="icon-hover"
                     style={{
-                      backgroundColor: `${settings.theme?.secondaryColor}26`,
-                    }}
-                    onClick={() => {
-                      if (textSearchInputMobile) {
-                        dispatch(setImageSearchInput(''));
-                        dispatch(onResetRequestImage(''));
-                        // setTimeout(() => {
-                        //   refine(textSearchInputMobile);
-                        // }, 300);
-                        // setTimeout(() => {
-                        //   setResetImage(false);
-                        // }, 1000);
-                        return;
-                      }
-                      dispatch(reset(''));
-                      history.push('/');
+                      ...(keyFilter
+                        ? {
+                            backgroundColor: `${settings.theme?.primaryColor}`,
+                          }
+                        : {
+                            backgroundColor: `${settings.theme?.secondaryColor}`,
+                          }),
                     }}
                   >
-                    <CloseIcon
-                      style={{
-                        fontSize: 20,
-                        color: settings.theme?.secondaryColor,
-                        fontWeight: 700,
-                      }}
-                    />
-                  </button>
-                </div>
-              )}
-              {isShowInputSearch && (
-                <>
+                    <IconFilter color="white" />
+                  </div>
+                )}
+                {!settings.preFilterOption && (
+                  <IconSearch width={16} height={16} />
+                )}
+                {keyFilter && (
                   <div
-                    ref={containerRefInputMobile}
-                    id="box-input-search"
-                    className="d-flex w-100"
                     style={{
+                      position: 'absolute',
+                      top: '10px',
+                      left: '31px',
+                      display: 'flex',
+                      justifyContent: 'center',
                       alignItems: 'center',
+                      background: 'white',
+                      width: '10px',
+                      height: '10px',
+                      borderRadius: '100%',
                     }}
                   >
-                    {!textSearchInputMobile && (
-                      <Box
-                        style={{
-                          paddingLeft: '8px',
-                          display: 'flex',
-                          alignItems: 'center',
-                        }}
-                      >
-                        <IconSearch width={20} height={20} />
-                      </Box>
-                    )}
-                    <Input
-                      value={textSearchInputMobile}
-                      onChange={onChangeText}
-                    />
-
-                    {isShowFilter && settings.postFilterOption && (
-                      <Box className="box-button-input-mobile">
-                        <Button
-                          className="btn-mobile-filter"
-                          onClick={onToggleFilterMobile}
-                        >
-                          {/* <img src={IconFilter} alt="" width={18} height={18} /> */}
-                          <IconFilter />
-                        </Button>
-                      </Box>
-                    )}
-                    {history.location?.pathname !== '/' &&
-                      textSearchInputMobile && (
-                        <Box
-                          className="btn-close-header"
-                          style={{ backgroundColor: '#fff' }}
-                        >
-                          <button
-                            onClick={() => {
-                              if (imageThumbSearchInput) {
-                                history.push('/result');
-                                dispatch(updateValueTextSearchMobile(''));
-                                refine('');
-                                return;
-                              }
-                              dispatch(updateValueTextSearchMobile(''));
-                              dispatch(reset(''));
-                              refine('');
-                              history.push('/');
-                            }}
-                            style={{
-                              backgroundColor: '#fff',
-                              border: 0,
-                              display: 'flex',
-                            }}
-                          >
-                            <CloseIcon
-                              style={{
-                                fontSize: 20,
-                                color: settings.theme?.secondaryColor,
-                              }}
-                            />
-                          </button>
-                        </Box>
-                      )}
+                    <div
+                      style={{
+                        width: '8px',
+                        height: '8px',
+                        background: settings.theme?.primaryColor,
+                        borderRadius: '100%',
+                      }}
+                    ></div>
                   </div>
-                </>
-              )}
-              {settings.preFilterOption && (
+                )}
+              </Box>
+
+              <Input value={textSearchInputMobile} onChange={onChangeText} />
+
+              {history.location?.pathname !== '/' && textSearchInputMobile && (
                 <Button
                   onClick={() => {
-                    dispatch(setPreFilterDropdown(!preFilterDropdown));
+                    if (imageThumbSearchInput) {
+                      history.push('/result');
+                      dispatch(updateValueTextSearchMobile(''));
+                      refine('');
+                      return;
+                    }
+                    dispatch(updateValueTextSearchMobile(''));
+                    dispatch(reset(''));
+                    refine('');
+                    history.push('/');
                   }}
                   style={{
-                    order: 3,
-                    width: 32,
-                    height: 32,
-                    borderRadius: '100%',
-                    backgroundColor:
-                      preFilterDropdown || keyFilter
-                        ? `${settings.theme?.secondaryColor}26`
-                        : '#f3f3f5',
-                    margin: '0 12px',
+                    // background: '#fff',
+                    marginRight: '8px',
+                    border: 0,
+                    width: '40px',
+                    height: '40px',
                   }}
                 >
-                  {preFilterDropdown ? (
-                    <CloseIcon
-                      style={{
-                        fontSize: 16,
-                        color: settings.theme?.secondaryColor,
-                      }}
-                    />
-                  ) : (
-                    <IconFilter
-                      color={
-                        keyFilter ? settings.theme?.secondaryColor : '#000'
-                      }
-                    />
-                  )}
+                  <CloseIcon
+                    style={{
+                      fontSize: 16,
+                      color: settings.theme?.secondaryColor,
+                    }}
+                  />
                 </Button>
               )}
             </div>
-          </>
-        )}
-      </Box>
-      {keyFilter && isMobile && (
-        <Box
-          className="ml-auto mr-auto"
-          style={{
-            display: 'flex',
-            columnGap: '16px',
-            alignItems: 'center',
-            // justifyContent: 'space-between',
-            // margin: '12px 12px 5px 12px',
-            marginTop: '12px',
-            marginBottom: '5px',
-            paddingLeft: '16px',
-            paddingRight: '16px',
-          }}
-        >
-          <Typography color="textPrimary">Pre-filter:</Typography>
-          <Box
-            className="box-key-filter"
+          </div>
+        </div>
+        {isShowFilter && settings.postFilterOption && (
+          <div
             style={{
-              display: 'inline-flex',
-              border: '2px solid black',
-              borderRadius: 3,
-              padding: '2px 5px',
-              background: '#efefef',
-              color: 'black',
-              alignItems: 'center',
+              position: 'relative',
+              width: '56px',
+              height: '56px',
+              padding: ' 8px',
+              flexShrink: 0,
+              borderRadius: '32px',
+              background: '#FAFAFA',
+              boxShadow: ' 0px 0px 8px 0px rgba(0, 0, 0, 0.15)',
+            }}
+            onClick={() => {
+              if (disablePostFilter) return;
+              onToggleFilterMobile();
+              dispatch(setPreFilterDropdown(false));
             }}
           >
-            <Typography>{keyFilter}</Typography>
-            <Button
-              style={{ paddingRight: '0px' }}
-              onClick={() => dispatch(setUpdateKeyFilterDesktop(''))}
+            <div
+              style={{
+                display: 'flex',
+                background: `${
+                  disablePostFilter ? '#F3F3F5' : settings.theme?.primaryColor
+                }`,
+                borderRadius: '40px',
+                width: '40px',
+                height: '40px',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
             >
-              <CloseIcon
+              <FilterIcon
+                color={`${disablePostFilter ? '#E0E0E0' : 'white'}`}
+              />
+            </div>
+
+            {isPostFilterApplied && !disablePostFilter && (
+              <div
                 style={{
-                  fontSize: 16,
-                  color: '#2B2C46',
+                  position: 'absolute',
+                  top: '8px',
+                  left: '37px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  background: 'white',
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '100%',
                 }}
-              />
-            </Button>
-          </Box>
-        </Box>
-      )}
-    </Box>
+              >
+                <div
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    background: settings.theme?.primaryColor,
+                    borderRadius: '100%',
+                  }}
+                ></div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
   );
 }
 
-const HeaderMobile = connectSearchBox<any>(memo(HeaderMobileComponent));
+const HeaderMobile = connectSearchBox<any>(
+  memo(connectStateResults<Props>(HeaderMobileComponent)),
+);
 export default HeaderMobile;
 
 const INPUT_ID = 'mobile-input-search';
@@ -371,12 +367,14 @@ const Input = ({ value, onChange }: any) => {
       style={{
         border: '0px',
         width: '100%',
+        display: 'flex',
+        flexGrow: 1,
         fontSize: 14,
         paddingLeft: '12px',
         paddingRight: '4px',
         color: '#2B2C46',
-        fontStyle: 'italic',
         outline: 'none',
+        borderRadius: '32px',
       }}
       className="input-search"
       placeholder="Search"

package/src/components/ImageCaptureHelpModal.tsx

@@ -0,0 +1,90 @@
+import { Box, Button } from '@material-ui/core';
+import React from 'react';
+import CloseIcon from '@material-ui/icons/Close';
+import { visualSearchHelp } from '../constants';
+
+interface Props {
+  handleClose: any;
+}
+
+function ImageCaptureHelpModal({ handleClose }: Props) {
+  return (
+    <Box style={{ paddingLeft: '24px', paddingRight: '24px' }}>
+      <Box
+        display={'flex'}
+        justifyContent={'end'}
+        position={'sticky'}
+        top={0}
+        style={{ background: 'white', width: '100%' }}
+      >
+        <Button onClick={handleClose}>
+          <CloseIcon />
+        </Button>
+      </Box>
+      <p
+        style={{
+          fontSize: '40px',
+          lineHeight: '40px',
+          fontWeight: 700,
+          color: '#2B2C46',
+        }}
+      >
+        Six ways to optimize visual search
+      </p>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          rowGap: '16px',
+          marginTop: '16px',
+        }}
+      >
+        {visualSearchHelp.map((data, index) => {
+          return (
+            <div
+              key={index}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                rowGap: '8px',
+              }}
+            >
+              <p
+                style={{
+                  fontSize: '16px',
+                  lineHeight: '24px',
+                  fontWeight: 700,
+                  color: '#2B2C46',
+                  marginBottom: '0px',
+                }}
+              >
+                {`${index + 1}- ${data.title}`}
+              </p>
+              <p
+                style={{
+                  fontSize: '14px',
+                  lineHeight: '20px',
+                  fontWeight: 400,
+                  color: '#2B2C46',
+                  marginBottom: '0px',
+                }}
+              >
+                {data.description}
+              </p>
+              <div style={{ display: 'flex', columnGap: '16px' }}>
+                <div>
+                  <img src={data.imageLeft} alt="" />
+                </div>
+                <div>
+                  <img src={data.imageRight} alt="" />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Box>
+  );
+}
+
+export default ImageCaptureHelpModal;