@nyris/nyris-webapp 0.3.50 → 0.3.52

package/src/components/HeaderMobile.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import { ReactComponent as IconFilter } from 'common/assets/icons/filter_settings.svg';
 
@@ -48,7 +48,6 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   const { search } = stateGlobal;
   const {
     imageThumbSearchInput,
-    textSearchInputMobile,
     preFilter,
     preFilterDropdown,
     valueTextSearch,
@@ -70,23 +69,23 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   useEffect(() => {
     if (
       history.location?.pathname === '/result' &&
-      (imageThumbSearchInput || textSearchInputMobile)
+      (imageThumbSearchInput || valueInput)
     ) {
       setShowFilter(true);
     } else {
       setShowFilter(false);
     }
-  }, [imageThumbSearchInput, history.location, textSearchInputMobile]);
+  }, [imageThumbSearchInput, history.location, valueInput]);
 
   useEffect(() => {
     if (imageThumbSearchInput !== '') {
       history.push('/result');
       dispatch(updateValueTextSearchMobile(''));
+      setValueInput('');
       if (settings.algolia?.enabled) {
         refine('');
       } else {
         dispatch(updateQueryText(''));
-        setValueInput('');
       }
     } else {
       if (settings.algolia?.enabled) {
@@ -101,6 +100,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
 
   useEffect(() => {
     if (!isEmpty(searchQuery)) {
+      setValueInput(searchQuery);
       dispatch(updateValueTextSearchMobile(searchQuery));
       if (settings.algolia?.enabled) {
         refine(searchQuery);
@@ -114,6 +114,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
     }
   }, [query, refine, dispatch, searchQuery, settings.algolia]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const searchOrRedirect = useCallback(
     debounce((value: any) => {
       if (!settings.algolia?.enabled) {
@@ -126,7 +127,6 @@ function HeaderMobileComponent(props: Props): JSX.Element {
             values: Object.keys(preFilter) as string[],
           },
         ];
-
         if (value || requestImage) {
           dispatch(updateStatusLoading(true));
           find({
@@ -137,7 +137,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
             text: value,
           })
             .then((res: any) => {
-              res?.results.map((item: any) => {
+              res?.results.forEach((item: any) => {
                 filters.push({
                   sku: item.sku,
                   score: item.score,
@@ -198,6 +198,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   }, [valueTextSearch?.refinementList, settings, postFilter]);
 
   const onChangeText = (event: any) => {
+    setValueInput(event.currentTarget.value);
     // debounceSearch(event.currentTarget.value);
     searchOrRedirect(event.currentTarget.value);
     if (event.currentTarget.value === '') {
@@ -207,6 +208,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
       dispatch(updateValueTextSearchMobile(event.currentTarget.value));
     }
   };
+
   const disablePostFilter = useMemo(() => {
     if (settings.algolia.enabled) {
       return settings.postFilterOption &&
@@ -222,7 +224,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
   return (
     <div style={{ width: '100%', background: '#fff' }}>
       {history.location?.pathname !== '/result' && (
-        <Box
+        <div
           className="box-content"
           style={{
             display: 'flex',
@@ -249,7 +251,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
               }}
             />
           </NavLink>
-        </Box>
+        </div>
       )}
 
       {((auth0.enabled && user?.email_verified) || !auth0.enabled) && (
@@ -278,7 +280,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                   height: '100%',
                 }}
               >
-                <Box
+                <div
                   className="pre-filter-icon"
                   onClick={() => {
                     if (settings.preFilterOption) {
@@ -307,7 +309,7 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                   {!settings.preFilterOption && (
                     <IconSearch width={16} height={16} />
                   )}
-                  {!isEmpty(preFilter) && (
+                  {settings.preFilterOption && !isEmpty(preFilter) && (
                     <div
                       style={{
                         position: 'absolute',
@@ -332,44 +334,41 @@ function HeaderMobileComponent(props: Props): JSX.Element {
                       ></div>
                     </div>
                   )}
-                </Box>
+                </div>
 
-                <Input
-                  value={textSearchInputMobile || searchQuery || valueInput}
-                  onChange={onChangeText}
-                />
+                <Input value={valueInput} onChange={onChangeText} />
 
-                {history.location?.pathname !== '/' &&
-                  textSearchInputMobile && (
-                    <Button
-                      onClick={() => {
-                        if (imageThumbSearchInput) {
-                          history.push('/result');
-                          dispatch(updateValueTextSearchMobile(''));
-                          refine('');
-                          return;
-                        }
+                {history.location?.pathname !== '/' && valueInput && (
+                  <Button
+                    onClick={() => {
+                      setValueInput('');
+                      if (imageThumbSearchInput) {
+                        history.push('/result');
                         dispatch(updateValueTextSearchMobile(''));
-                        dispatch(reset(''));
                         refine('');
-                        history.push('/');
-                      }}
+                        return;
+                      }
+                      dispatch(updateValueTextSearchMobile(''));
+                      dispatch(reset(''));
+                      refine('');
+                      history.push('/');
+                    }}
+                    style={{
+                      // background: '#fff',
+                      marginRight: '8px',
+                      border: 0,
+                      width: '40px',
+                      height: '40px',
+                    }}
+                  >
+                    <CloseIcon
                       style={{
-                        // background: '#fff',
-                        marginRight: '8px',
-                        border: 0,
-                        width: '40px',
-                        height: '40px',
+                        fontSize: 16,
+                        color: settings.theme?.secondaryColor,
                       }}
-                    >
-                      <CloseIcon
-                        style={{
-                          fontSize: 16,
-                          color: settings.theme?.secondaryColor,
-                        }}
-                      />
-                    </Button>
-                  )}
+                    />
+                  </Button>
+                )}
               </div>
             </div>
           </div>

package/src/components/ImageCaptureHelpModal.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import React from 'react';
 import CloseIcon from '@material-ui/icons/Close';
 import { visualSearchHelp } from '../constants';
@@ -9,17 +9,20 @@ interface Props {
 
 function ImageCaptureHelpModal({ handleClose }: Props) {
   return (
-    <Box
+    <div
       style={{
         paddingBottom: '24px',
       }}
     >
-      <Box
-        display={'flex'}
-        justifyContent={'end'}
-        position={'sticky'}
-        top={0}
-        style={{ background: 'white', width: '100%' }}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'end',
+          position: 'sticky',
+          top: 0,
+          background: 'white',
+          width: '100%',
+        }}
       >
         <Button
           onClick={handleClose}
@@ -27,7 +30,7 @@ function ImageCaptureHelpModal({ handleClose }: Props) {
         >
           <CloseIcon fontSize={'small'} />
         </Button>
-      </Box>
+      </div>
       <p
         style={{
           fontSize: '40px',
@@ -94,7 +97,7 @@ function ImageCaptureHelpModal({ handleClose }: Props) {
           );
         })}
       </div>
-    </Box>
+    </div>
   );
 }
 

package/src/components/ImagePreviewMobile.tsx

@@ -1,5 +1,6 @@
+// @ts-nocheck
 import React, { memo, useState } from 'react';
-import { Box, Typography, Hidden } from '@material-ui/core';
+import { Typography, Hidden } from '@material-ui/core';
 import { RectCoords } from '@nyris/nyris-api';
 import { Preview } from '@nyris/nyris-react-components';
 import { DEFAULT_REGION } from '../constants';
@@ -75,7 +76,7 @@ function ImagePreviewMobileComponent({
           text: searchQuery,
         })
           .then((res: any) => {
-            res?.results.map((item: any) => {
+            res?.results.forEach((item: any) => {
               filters.push({
                 sku: item.sku,
                 score: item.score,
@@ -100,7 +101,7 @@ function ImagePreviewMobileComponent({
   };
 
   return (
-    <Box
+    <div
       className="col-left"
       style={{
         backgroundColor: '#5D5D63',
@@ -108,8 +109,8 @@ function ImagePreviewMobileComponent({
       }}
     >
       <div>
-        <Box className="box-preview">
-          <Box>
+        <div className="box-preview">
+          <div>
             <div
               className="preview-item"
               style={{
@@ -141,9 +142,9 @@ function ImagePreviewMobileComponent({
                 draggable={editActive ? true : false}
               />
             </div>
-          </Box>
+          </div>
           {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
-            <Box
+            <div
               className="box-title_col-left"
               alignItems="center"
               style={{
@@ -166,13 +167,13 @@ function ImagePreviewMobileComponent({
                   ? t('Crop the image for better results')
                   : 'Crop the image for better results'}
               </Typography>
-            </Box>
+            </div>
           )}
-        </Box>
+        </div>
         <>
           <Hidden>
-            <Box
-              sx={{
+            <div
+              style={{
                 position: 'absolute',
                 left: '15px',
                 top: '25px',
@@ -180,8 +181,8 @@ function ImagePreviewMobileComponent({
               }}
               onClick={onImageRemove}
             >
-              <Box
-                sx={{
+              <div
+                style={{
                   width: '24px',
                   height: '24px',
                   justifyContent: 'center',
@@ -191,39 +192,39 @@ function ImagePreviewMobileComponent({
                 }}
               >
                 <Trash color="white" fill="white" />
-              </Box>
-            </Box>
+              </div>
+            </div>
           </Hidden>
 
           <Hidden mdUp>
-            <Box
+            <div
               className="slideDown"
-              sx={{
+              style={{
                 position: 'absolute',
                 bottom: '25px',
                 right: '20px',
               }}
               onClick={handleArrowClick}
             >
-              <Box
-                bgcolor={'white'}
-                sx={{
+              <div
+                style={{
                   width: '24px',
                   height: '24px',
                   justifyContent: 'center',
                   alignItems: 'center',
                   display: 'flex',
                   borderRadius: '100%',
+                  backgroundColor: 'white',
                 }}
               >
                 {editActive && <ArrowUp color="black" />}
                 {!editActive && <ArrowDown color="black" fill="black" />}
-              </Box>
-            </Box>
+              </div>
+            </div>
           </Hidden>
         </>
       </div>
-    </Box>
+    </div>
   );
 }
 const ImagePreviewMobile = memo(ImagePreviewMobileComponent);

package/src/components/Inquiry/InquiryBanner.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@material-ui/core';
 import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
 import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
@@ -44,11 +43,11 @@ function InquiryBanner({
           isInquiryModalOpen={isInquiryModalOpen}
         />
       )}
-      <Box
+      <div
         style={{
           backgroundColor: '#F3F3F5',
           width: '100%',
-          marginBottom: '32px',
+          marginBottom: '24px',
           alignSelf: 'end',
           display: 'flex',
           alignItems: 'center',
@@ -56,7 +55,7 @@ function InquiryBanner({
         }}
         className="rfq-box"
       >
-        <Box
+        <div
           style={{
             width: '100%',
             display: 'flex',
@@ -82,14 +81,14 @@ function InquiryBanner({
             </div>
           )}
 
-          <Box style={{ width: '100%' }}>
-            <Box
+          <div style={{ width: '100%' }}>
+            <div
               style={{
                 paddingBottom: '8px',
                 paddingLeft: '16px',
               }}
             >
-              <Box
+              <div
                 style={{
                   fontSize: '14px',
                   color: inquiryStatus === 'inactive' ? '#4B4B4A' : '#2B2C46',
@@ -99,8 +98,8 @@ function InquiryBanner({
                 {isMobile
                   ? `${t('No matches found')}?`
                   : `${t('No matches found for your request')}?`}
-              </Box>
-              <Box
+              </div>
+              <div
                 style={{
                   fontSize: '14px',
                   maxWidth: '320x',
@@ -110,8 +109,8 @@ function InquiryBanner({
                 }}
               >
                 {description}
-              </Box>
-            </Box>
+              </div>
+            </div>
             <div
               style={{
                 display: 'flex',
@@ -198,9 +197,9 @@ function InquiryBanner({
                 </a>
               )}
             </div>
-          </Box>
-        </Box>
-      </Box>
+          </div>
+        </div>
+      </div>
     </>
   );
 }

package/src/components/Inquiry/InquiryModal.tsx

@@ -56,7 +56,7 @@ export default function InquiryModal({
   const [information, setInformation] = useState('');
 
   const setFormattedContent = React.useCallback(
-    text => {
+    (text: string) => {
       setInformation(text.slice(0, 150));
     },
     [setInformation],

package/src/components/Layout.tsx

@@ -1,11 +1,10 @@
-import { Box } from '@material-ui/core';
 import { ReactNode } from 'components/common';
 import React, { memo, useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
 import {
   clearPostFilter,
-  onResetRequestImage,
+  onResetRequestImage, setPreFilter,
   setUpdateSession,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
@@ -46,7 +45,7 @@ jQuery(document).ready(function () {
     email: 'info@cadenas.de',
   });
   psol.core.setServiceBaseUrl('https://webapi.partcommunity.com');
-  window.onpageshow = function(event: any) {
+  window.onpageshow = function (event: any) {
     if (event.persisted) {
       window.location.reload();
     }
@@ -76,7 +75,7 @@ function Layout({ children }: ReactNode): JSX.Element {
     (isMobile && history.location?.pathname === '/result') ||
     history.location?.pathname === '/';
   const language = useAppSelector(state => state.settings.language);
-  const { isAuthenticated } = useAuth0();
+  const { user, isAuthenticated } = useAuth0();
   const { auth0, showPoweredByNyris } = settings;
   const showApp = !auth0.enabled || (auth0.enabled && isAuthenticated);
   i18n.changeLanguage(language);
@@ -99,6 +98,12 @@ function Layout({ children }: ReactNode): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [history.location]);
 
+  useEffect(() => {
+    if (settings.shouldUseUserMetadata && user) {
+      dispatch(setPreFilter({[user['/user_metadata'].value]: true}));
+    }
+  }, [user, dispatch, settings.shouldUseUserMetadata]);
+
   let HeaderApp: any;
   let FooterApp: any;
   let classNameBoxVersion: string = 'newVersion';
@@ -141,9 +146,9 @@ function Layout({ children }: ReactNode): JSX.Element {
   return (
     <div style={{ position: 'relative' }}>
       {loadingSearchAlgolia && (
-        <Box className="box-wrap-loading" style={{ zIndex: 99999999 }}>
+        <div className="box-wrap-loading" style={{ zIndex: 99999999 }}>
           <Loading />
-        </Box>
+        </div>
       )}
       <InstantSearchProvider>
         {isMobile && showApp && <AppMobile>{children}</AppMobile>}

package/src/components/Loading.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@material-ui/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -38,7 +37,7 @@ const LoadingSvg = () => {
 const Loading = () => {
   const { t } = useTranslation();
   return (
-    <Box
+    <div
       className="loadingSpinCT"
       style={{
         top: 0,
@@ -62,7 +61,7 @@ const Loading = () => {
         {t('loading')}
       </p>
       <LoadingSvg />
-    </Box>
+    </div>
   );
 };
 

package/src/components/PanelResult/PostFilter.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Checkbox } from '@material-ui/core';
+import { Button, Checkbox } from '@material-ui/core';
 import { DynamicWidgetsCT } from 'components/dynamic-widgets/dynamic-widgets';
 import IconLabel from 'components/icon-label/icon-label';
 import { atom, useAtom } from 'jotai';
@@ -202,7 +202,7 @@ export default function PostFilterPanel({
     <>
       {!isMobile && (
         <div className="wrap-main-header-panel">
-          <Box
+          <div
             style={{
               cursor: 'pointer',
               paddingBottom: '8px',
@@ -221,10 +221,10 @@ export default function PostFilterPanel({
                 } `}
               />
             </div>
-          </Box>
+          </div>
         </div>
       )}
-      <Box>
+      <div>
         {isMobile && (
           <div
             style={{
@@ -248,7 +248,7 @@ export default function PostFilterPanel({
             </Button>
           </div>
         )}
-        <Box
+        <div
           className="box-center-filter"
           style={{
             ...(isMobile
@@ -264,10 +264,10 @@ export default function PostFilterPanel({
           <DynamicWidgetsCT enabled={dynamicWidgets}>
             {widgetsPanels}
           </DynamicWidgetsCT>
-        </Box>
-      </Box>
+        </div>
+      </div>
       {isMobile && (
-        <Box
+        <div
           style={{
             position: 'sticky',
             bottom: 0,
@@ -307,7 +307,7 @@ export default function PostFilterPanel({
           >
             Apply filters
           </div>
-        </Box>
+        </div>
       )}
     </>
   );

package/src/components/PanelResult/PostFilterAlgolia.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import { DynamicWidgetsCT } from 'components/dynamic-widgets/dynamic-widgets';
 import IconLabel from 'components/icon-label/icon-label';
 import { atom, useAtom } from 'jotai';
@@ -192,7 +192,7 @@ export default function PostFilterPanelAlgolia({
     <>
       {!isMobile && (
         <div className="wrap-main-header-panel">
-          <Box
+          <div
             style={{
               cursor: 'pointer',
               paddingBottom: '8px',
@@ -211,10 +211,10 @@ export default function PostFilterPanelAlgolia({
                 } `}
               />
             </div>
-          </Box>
+          </div>
         </div>
       )}
-      <Box>
+      <div>
         {isMobile && (
           <div
             style={{
@@ -238,7 +238,7 @@ export default function PostFilterPanelAlgolia({
             </Button>
           </div>
         )}
-        <Box
+        <div
           className="box-center-filter"
           style={{
             ...(isMobile
@@ -254,10 +254,10 @@ export default function PostFilterPanelAlgolia({
           <DynamicWidgetsCT enabled={dynamicWidgets}>
             {widgetsPanels}
           </DynamicWidgetsCT>
-        </Box>
-      </Box>
+        </div>
+      </div>
       {isMobile && (
-        <Box
+        <div
           style={{
             position: 'sticky',
             bottom: 0,
@@ -297,7 +297,7 @@ export default function PostFilterPanelAlgolia({
           >
             Apply filters
           </div>
-        </Box>
+        </div>
       )}
     </>
   );

package/src/components/PanelResult/expandable-panel.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import { ReactComponent as RemoveIcon } from 'common/assets/icons/minus.svg';
 import { ReactComponent as AddIcon } from 'common/assets/icons/add.svg';
 import classNames from 'classnames';
@@ -39,7 +39,7 @@ function ExpandablePanelComponent({
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   return (
-    <Box>
+    <div>
       <div
         className={classNames(
           {
@@ -88,7 +88,7 @@ function ExpandablePanelComponent({
           <div className="mt-4">{children}</div>
         </Collapse>
       </div>
-    </Box>
+    </div>
   );
 }