@nyris/nyris-webapp 0.3.42 → 0.3.44

package/src/components/Header.tsx

@@ -1,13 +1,65 @@
-import { Box } from '@material-ui/core';
+import { Box, Menu, MenuProps, withStyles } from '@material-ui/core';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './common.scss';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { reset, setPreFilter } from 'Store/search/Search';
+import { useAuth0 } from '@auth0/auth0-react';
+import { ReactComponent as AvatarIcon } from 'common/assets/icons/avatar.svg';
+import MenuItem from '@material-ui/core/MenuItem';
 
 function Header(): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings } = useAppSelector(state => state);
+  const { user, isAuthenticated, logout } = useAuth0();
+  const auth0 = settings.auth0;
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const StyledMenu = withStyles({
+    root: {},
+    paper: {
+      border: '0px',
+      boxShadow: '0px 0px 8px 0px rgba(0, 0, 0, 0.20)',
+      top: '58px !important',
+      borderRadius: '0px !important',
+    },
+  })((props: MenuProps) => (
+    <Menu
+      elevation={0}
+      getContentAnchorEl={null}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+      {...props}
+    />
+  ));
+
+  const StyledMenuItem = withStyles(theme => ({
+    root: {
+      '&:focus': {
+        backgroundColor: theme.palette.primary.main,
+        '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+          color: theme.palette.common.white,
+        },
+      },
+      padding: '0px',
+    },
+  }))(MenuItem);
+
   return (
     <Box className="box-content" display={'flex'}>
       <NavLink
@@ -28,6 +80,73 @@ function Header(): JSX.Element {
           }}
         />
       </NavLink>
+
+      {auth0.enabled && isAuthenticated && (
+        <div style={{ position: 'relative' }}>
+          <div
+            style={{
+              display: 'flex',
+              columnGap: '16px',
+              alignItems: 'center',
+              paddingRight: '24px',
+              cursor: 'pointer',
+            }}
+            aria-controls="simple-menu"
+            aria-haspopup="true"
+            onClick={handleClick}
+          >
+            <p style={{ color: '#2B2C46' }}>{user?.email}</p>
+            <AvatarIcon />
+          </div>
+          <StyledMenu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            <StyledMenuItem>
+              <div
+                style={{
+                  display: 'flex',
+                  width: '152px',
+                  paddingLeft: '8px',
+                  paddingRight: '8px',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: '8px',
+                  boxShadow: '0px 0px 8px 0px rgba(0, 0, 0, 0.20)',
+                  // position: 'absolute',
+                  // zIndex: 99,
+                  // top: '50px',
+                  backgroundColor: '#fff',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    width: '75px',
+                    height: '24px',
+                    padding: '4px 8px',
+                    alignItems: 'center',
+                    backgroundColor: '#2B2C46',
+                    color: '#fff',
+                    fontSize: '10px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => {
+                    logout({
+                      logoutParams: { returnTo: window.location.origin },
+                    });
+                  }}
+                >
+                  Sign out
+                </div>
+              </div>
+            </StyledMenuItem>
+          </StyledMenu>
+        </div>
+      )}
     </Box>
   );
 }

package/src/components/HeaderMobile.tsx

@@ -17,6 +17,9 @@ import {
   updateValueTextSearchMobile,
   setPreFilterDropdown,
   setPreFilter,
+  updateQueryText,
+  updateStatusLoading,
+  setSearchResults,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
@@ -26,6 +29,8 @@ import { ReactComponent as FilterIcon } from 'common/assets/icons/filter.svg';
 import { debounce, isEmpty } from 'lodash';
 import { useQuery } from 'hooks/useQuery';
 import { useTranslation } from 'react-i18next';
+import { find } from 'services/image';
+import { useAuth0 } from '@auth0/auth0-react';
 
 interface Props {
   onToggleFilterMobile?: any;
@@ -34,6 +39,9 @@ interface Props {
 }
 
 function HeaderMobileComponent(props: Props): JSX.Element {
+  const { user } = useAuth0();
+  const { auth0 } = useAppSelector(state => state.settings);
+
   const { onToggleFilterMobile, refine } = props;
   const dispatch = useAppDispatch();
   const stateGlobal = useAppSelector(state => state);
@@ -44,14 +52,18 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     preFilter,
     preFilterDropdown,
     valueTextSearch,
+    queryText,
+    requestImage,
+    selectedRegion,
   } = search;
 
   const query = useQuery();
-  const searchQuery = query.get('query') || '';
   const containerRefInputMobile = useRef<HTMLDivElement>(null);
   const [isShowFilter, setShowFilter] = useState<boolean>(false);
   const history = useHistory();
   const { settings } = useAppSelector<AppState>((state: any) => state);
+  const [valueInput, setValueInput] = useState<string>(queryText || '');
+  const searchQuery = query.get('query') || '';
 
   useEffect(() => {
     if (
@@ -68,23 +80,75 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     if (imageThumbSearchInput !== '') {
       history.push('/result');
       dispatch(updateValueTextSearchMobile(''));
-      refine('');
+      if (settings.algolia?.enabled) {
+        refine('');
+      } else {
+        dispatch(updateQueryText(''));
+        setValueInput('');
+      }
     }
-  }, [imageThumbSearchInput, dispatch, refine, history]);
+  }, [imageThumbSearchInput, dispatch, refine, history, settings.algolia]);
 
   useEffect(() => {
     if (!isEmpty(searchQuery)) {
       dispatch(updateValueTextSearchMobile(searchQuery));
-      refine(searchQuery);
-      // not an ideal solution: fixes text search not working from landing page
-      setTimeout(() => {
+      if (settings.algolia?.enabled) {
         refine(searchQuery);
-      }, 100);
+        // not an ideal solution: fixes text search not working from landing page
+        setTimeout(() => {
+          refine(searchQuery);
+        }, 100);
+      } else {
+        dispatch(updateQueryText(searchQuery));
+      }
     }
-  }, [query, refine, dispatch, searchQuery]);
+  }, [query, refine, dispatch, searchQuery, settings.algolia]);
 
   const searchOrRedirect = useCallback(
     debounce((value: any) => {
+      if (!settings.algolia?.enabled) {
+        dispatch(updateQueryText(value));
+        let payload: any;
+        let filters: any[] = [];
+        const preFilterValues = [
+          {
+            key: settings.visualSearchFilterKey,
+            values: Object.keys(preFilter) as string[],
+          },
+        ];
+
+        if (value || requestImage) {
+          dispatch(updateStatusLoading(true));
+          find({
+            image: requestImage?.canvas as HTMLCanvasElement,
+            settings,
+            filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+            region: selectedRegion,
+            text: value,
+          })
+            .then((res: any) => {
+              res?.results.map((item: any) => {
+                filters.push({
+                  sku: item.sku,
+                  score: item.score,
+                });
+              });
+              payload = {
+                ...res,
+                filters,
+              };
+              dispatch(setSearchResults(payload));
+              dispatch(updateStatusLoading(false));
+            })
+            .catch((e: any) => {
+              console.log('error input search', e);
+              dispatch(updateStatusLoading(false));
+            });
+        } else {
+          dispatch(setSearchResults([]));
+        }
+      }
+
       if (value) {
         history.push({
           pathname: '/result',
@@ -94,7 +158,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
         history.push('/result');
       }
     }, 500),
-    [],
+    [requestImage],
   );
   const isPostFilterApplied = useMemo(() => {
     let isApplied = false;
@@ -127,7 +191,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   }, [settings.postFilterOption, props.allSearchResults?.hits]);
 
   return (
-    <div style={{ width: '100%', background: '#fafafa' }}>
+    <div style={{ width: '100%', background: '#fff' }}>
       {history.location?.pathname !== '/result' && (
         <Box
           className="box-content"
@@ -135,7 +199,6 @@ function HeaderMobileComponent(props: Props): JSX.Element {
             display: 'flex',
             alignItems: 'center',
             height: '48px',
-            borderBottom: '1px solid #e9e9ec',
             background: settings.theme?.headerColor,
           }}
         >
@@ -159,189 +222,193 @@ function HeaderMobileComponent(props: Props): JSX.Element {
           </NavLink>
         </Box>
       )}
-      <div
-        style={{
-          margin: '16px 8px',
-          display: 'flex',
-          columnGap: '8px',
-          alignItems: 'center',
-        }}
-      >
-        <div className="wrap-header-mobile" style={{ height: '56px' }}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              height: '100%',
-            }}
-          >
+
+      {((auth0.enabled && user?.email_verified) || !auth0.enabled) && (
+        <div
+          style={{
+            margin: '16px 8px',
+            display: 'flex',
+            columnGap: '8px',
+            alignItems: 'center',
+          }}
+        >
+          <div className="wrap-header-mobile" style={{ height: '56px' }}>
             <div
-              ref={containerRefInputMobile}
-              id="box-input-search"
-              className="d-flex w-100"
               style={{
+                display: 'flex',
                 alignItems: 'center',
                 height: '100%',
               }}
             >
-              <Box
-                className="pre-filter-icon"
-                onClick={() => {
-                  if (settings.preFilterOption) {
-                    onToggleFilterMobile(false);
-                    dispatch(setPreFilterDropdown(!preFilterDropdown));
-                  }
+              <div
+                ref={containerRefInputMobile}
+                id="box-input-search"
+                className="d-flex w-100"
+                style={{
+                  alignItems: 'center',
+                  height: '100%',
                 }}
-                style={{ cursor: settings.preFilterOption ? 'pointer' : '' }}
               >
-                {settings.preFilterOption && (
-                  <div
-                    className="icon-hover"
-                    style={{
-                      ...(!isEmpty(preFilter)
-                        ? {
-                            backgroundColor: `${settings.theme?.primaryColor}`,
-                          }
-                        : {
-                            backgroundColor: `#2B2C46`,
-                          }),
-                    }}
-                  >
-                    <IconFilter color="white" />
-                  </div>
-                )}
-                {!settings.preFilterOption && (
-                  <IconSearch width={16} height={16} />
-                )}
-                {!isEmpty(preFilter) && (
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: '7px',
-                      left: '35px',
-                      display: 'flex',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                      background: 'white',
-                      width: '10px',
-                      height: '10px',
-                      borderRadius: '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={{
+                        ...(!isEmpty(preFilter)
+                          ? {
+                              backgroundColor: `${settings.theme?.primaryColor}`,
+                            }
+                          : {
+                              backgroundColor: `#2B2C46`,
+                            }),
+                      }}
+                    >
+                      <IconFilter color="white" />
+                    </div>
+                  )}
+                  {!settings.preFilterOption && (
+                    <IconSearch width={16} height={16} />
+                  )}
+                  {!isEmpty(preFilter) && (
                     <div
                       style={{
-                        width: '8px',
-                        height: '8px',
-                        background: settings.theme?.primaryColor,
+                        position: 'absolute',
+                        top: '7px',
+                        left: '35px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        background: 'white',
+                        width: '10px',
+                        height: '10px',
                         borderRadius: '100%',
                       }}
-                    ></div>
-                  </div>
-                )}
-              </Box>
+                    >
+                      <div
+                        style={{
+                          width: '8px',
+                          height: '8px',
+                          background: settings.theme?.primaryColor,
+                          borderRadius: '100%',
+                        }}
+                      ></div>
+                    </div>
+                  )}
+                </Box>
 
-              <Input
-                value={textSearchInputMobile || searchQuery}
-                onChange={onChangeText}
-              />
+                <Input
+                  value={textSearchInputMobile || searchQuery || valueInput}
+                  onChange={onChangeText}
+                />
 
-              {history.location?.pathname !== '/' && textSearchInputMobile && (
-                <Button
-                  onClick={() => {
-                    if (imageThumbSearchInput) {
-                      history.push('/result');
-                      dispatch(updateValueTextSearchMobile(''));
-                      refine('');
-                      return;
-                    }
-                    dispatch(updateValueTextSearchMobile(''));
-                    dispatch(reset(''));
-                    refine('');
-                    history.push('/');
-                  }}
-                  style={{
-                    // background: '#fff',
-                    marginRight: '8px',
-                    border: 0,
-                    width: '40px',
-                    height: '40px',
-                  }}
-                >
-                  <CloseIcon
-                    style={{
-                      fontSize: 16,
-                      color: settings.theme?.secondaryColor,
-                    }}
-                  />
-                </Button>
-              )}
+                {history.location?.pathname !== '/' &&
+                  textSearchInputMobile && (
+                    <Button
+                      onClick={() => {
+                        if (imageThumbSearchInput) {
+                          history.push('/result');
+                          dispatch(updateValueTextSearchMobile(''));
+                          refine('');
+                          return;
+                        }
+                        dispatch(updateValueTextSearchMobile(''));
+                        dispatch(reset(''));
+                        refine('');
+                        history.push('/');
+                      }}
+                      style={{
+                        // background: '#fff',
+                        marginRight: '8px',
+                        border: 0,
+                        width: '40px',
+                        height: '40px',
+                      }}
+                    >
+                      <CloseIcon
+                        style={{
+                          fontSize: 16,
+                          color: settings.theme?.secondaryColor,
+                        }}
+                      />
+                    </Button>
+                  )}
+              </div>
             </div>
           </div>
-        </div>
-        {isShowFilter && settings.postFilterOption && (
-          <div
-            style={{
-              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));
-            }}
-          >
+          {isShowFilter && settings.postFilterOption && (
             <div
               style={{
-                display: 'flex',
-                background: `${
-                  disablePostFilter ? '#F3F3F5' : settings.theme?.primaryColor
-                }`,
-                borderRadius: '40px',
-                width: '40px',
-                height: '40px',
-                justifyContent: 'center',
-                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));
               }}
             >
-              <FilterIcon
-                color={`${disablePostFilter ? '#E0E0E0' : 'white'}`}
-              />
-            </div>
-
-            {isPostFilterApplied && !disablePostFilter && (
               <div
                 style={{
-                  position: 'absolute',
-                  top: '8px',
-                  left: '37px',
                   display: 'flex',
+                  background: `${
+                    disablePostFilter ? '#F3F3F5' : settings.theme?.primaryColor
+                  }`,
+                  borderRadius: '40px',
+                  width: '40px',
+                  height: '40px',
                   justifyContent: 'center',
                   alignItems: 'center',
-                  background: 'white',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '100%',
                 }}
               >
+                <FilterIcon
+                  color={`${disablePostFilter ? '#E0E0E0' : 'white'}`}
+                />
+              </div>
+
+              {isPostFilterApplied && !disablePostFilter && (
                 <div
                   style={{
-                    width: '8px',
-                    height: '8px',
-                    background: settings.theme?.primaryColor,
+                    position: 'absolute',
+                    top: '8px',
+                    left: '37px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    background: 'white',
+                    width: '10px',
+                    height: '10px',
                     borderRadius: '100%',
                   }}
-                ></div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
+                >
+                  <div
+                    style={{
+                      width: '8px',
+                      height: '8px',
+                      background: settings.theme?.primaryColor,
+                      borderRadius: '100%',
+                    }}
+                  ></div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }