@nyris/nyris-webapp 0.3.90 → 0.3.92

package/src/components/ImageUpload.tsx

@@ -12,7 +12,13 @@ import { useCadSearch } from 'hooks/useCadSearch';
 import { isCadFile } from '@nyris/nyris-api';
 import UploadDisclaimer from './UploadDisclaimer';
 
-function ImageUpload({ onCameraClick }: { onCameraClick?: () => void }) {
+function ImageUpload({
+  onCameraClick,
+  disableDisclaimer,
+}: {
+  onCameraClick?: () => void;
+  disableDisclaimer?: boolean;
+}) {
   const settings = window.settings;
   const user = useAuth0().user;
 
@@ -66,12 +72,13 @@ function ImageUpload({ onCameraClick }: { onCameraClick?: () => void }) {
   ]);
 
   const showDisclaimerDisabled = useMemo(() => {
+    if (disableDisclaimer) return true;
     const disclaimer = localStorage.getItem('upload-disclaimer-suite');
     if (requestImages.length === 0) return true;
     if (!disclaimer) return false;
     return disclaimer === 'dont-show';
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showDisclaimer, requestImages]);
+  }, [showDisclaimer, requestImages, disableDisclaimer]);
 
   const { singleImageSearch } = useImageSearch();
   const { cadSearch } = useCadSearch();
@@ -81,7 +88,7 @@ function ImageUpload({ onCameraClick }: { onCameraClick?: () => void }) {
     setQuery('');
 
     if (isCadFile(files[0])) {
-      cadSearch({ file: files[0], settings, newSearch: true }).then(res => {});
+      cadSearch({ file: files[0], settings, newSearch: true }).then(() => {});
 
       return;
     }
@@ -191,14 +198,15 @@ function ImageUpload({ onCameraClick }: { onCameraClick?: () => void }) {
         <Tooltip content={t('Search with an image')}>
           <label
             className={twMerge(
-              'mr-2 desktop:mr-1',
-              'w-10 h-10 flex justify-center items-center cursor-pointer rounded-full bg-gray-100 desktop:bg-transparent hover:bg-gray-100',
+              'min-w-10 min-h-10 flex justify-center items-center cursor-pointer rounded-full bg-gray-100 desktop:bg-transparent hover:bg-gray-100',
               location.pathname === '/result' && 'desktop:w-8 desktop:h-8',
+              location.pathname !== '/result' &&
+                'desktop:bg-[#FAFAFA] desktop:hover:bg-[#FAFAFA]',
             )}
             htmlFor={
               showDisclaimerDisabled && !onCameraClick ? 'icon-button-file' : ''
             }
-            onClick={e => {
+            onClick={() => {
               if (!showDisclaimerDisabled) {
                 // disclaimer
                 setShowDisclaimer(true);
@@ -207,12 +215,12 @@ function ImageUpload({ onCameraClick }: { onCameraClick?: () => void }) {
               }
             }}
           >
-            <Icon name="camera_simple" width={16} height={16} fill="#2B2C46" />
+            <Icon name="camera_ai" width={16} height={16} fill="#3B3E5F" />
           </label>
         </Tooltip>
       </div>
 
-      {showDisclaimer && (
+      {showDisclaimer && !disableDisclaimer && (
         <UploadDisclaimer
           onClose={() => {
             setShowDisclaimer(false);

package/src/components/Inquiry/InquiryBanner.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { useTranslation } from 'react-i18next';
 import { Icon } from '@nyris/nyris-react-components';

package/src/components/Inquiry/InquiryModal.tsx

@@ -66,20 +66,22 @@ export default function InquiryModal({
   useEffect(() => {
     function omitKeys(obj: any, keys: string[]) {
       return Object.fromEntries(
-        Object.entries(obj).filter(([key]) => !keys.includes(key))
+        Object.entries(obj).filter(([key]) => !keys.includes(key)),
       );
     }
-    const omittedSpecification = omitKeys(specifications, ['is_nameplate', 'prefilter_value']);
+    const omittedSpecification = omitKeys(specifications, [
+      'is_nameplate',
+      'prefilter_value',
+    ]);
     setInformation(
-      Object
-        .entries(omittedSpecification)
-        .reduce((acc, [k, v]) =>
-            v == null || (typeof v === 'string' && v.trim() === '')
-              ? acc
-              : `${acc}${k}: ${v}\n`,
-          ''
-        )
-      );
+      Object.entries(omittedSpecification).reduce(
+        (acc, [k, v]) =>
+          v == null || (typeof v === 'string' && v.trim() === '')
+            ? acc
+            : `${acc}${k}: ${v}\n`,
+        '',
+      ),
+    );
   }, [specifications]);
 
   useEffect(() => emailjs.init('SMGihPnuEGcYLm0V4'), []);
@@ -94,32 +96,36 @@ export default function InquiryModal({
     const croppedImage = requestImage
       ? getCroppedCanvas(requestImage, selectedRegion)
       : null;
-    const nameplateImageCanvas = nameplateImage ? await createImage(nameplateImage) : null;
-    
+    const nameplateImageCanvas = nameplateImage
+      ? await createImage(nameplateImage)
+      : null;
+
     const serviceId = 'service_zfsxshi';
     setIsInquiryModalOpen(false);
     const templateId = settings.support?.emailTemplateId;
     if (templateId) {
-      const body = !specifications?.is_nameplate ? {
-        email_id: email.trim(),
-        information_text: information ? information : '<not specified>',
-        request_image: croppedImage?.toDataURL(),
-        prefilter_values: preFilterValues?.length
-          ? preFilterValues.join(', ')
-          : '<not specified>',
-      } : {
-        email_id: email.trim(),
-        information_text: information,
-        request_image: croppedImage?.toDataURL() || '',
-        typeplate_image: nameplateImageCanvas?.toDataURL() || '',
-        prefilter_values: specifications.prefilter_value,
-      };
+      const body = !specifications?.is_nameplate
+        ? {
+            email_id: email.trim(),
+            information_text: information ? information : '<not specified>',
+            request_image: croppedImage?.toDataURL(),
+            prefilter_values: preFilterValues?.length
+              ? preFilterValues.join(', ')
+              : '<not specified>',
+          }
+        : {
+            email_id: email.trim(),
+            information_text: information,
+            request_image: croppedImage?.toDataURL() || '',
+            typeplate_image: nameplateImageCanvas?.toDataURL() || '',
+            prefilter_values: specifications.prefilter_value,
+          };
       try {
         await emailjs.send(serviceId, templateId, body);
         ToastHelper.success(t('Request sent successfully'));
       } catch (error) {
         toast(
-          t => {
+          () => {
             return (
               <div
                 style={{
@@ -174,7 +180,7 @@ export default function InquiryModal({
   return (
     <Dialog
       open={isInquiryModalOpen}
-      onOpenChange={(e: any) => {
+      onOpenChange={() => {
         setIsInquiryModalOpen(false);
       }}
     >

package/src/components/ItemSpecification.tsx

@@ -4,7 +4,6 @@ import { twMerge } from 'tailwind-merge';
 import useRequestStore from '../stores/request/requestStore';
 import useResultStore from '../stores/result/resultStore';
 import { Icon } from '@nyris/nyris-react-components';
-import { useMediaQuery } from 'react-responsive';
 
 const ItemSpecification = ({
   attr,
@@ -16,7 +15,6 @@ const ItemSpecification = ({
     return ref.header.toLocaleLowerCase() === attr.toLocaleLowerCase();
   });
   const attribute = refinement?.length ? refinement[0].attribute : 'none';
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const { refine } = useRefinementList({
     attribute,
     operator: 'or',
@@ -24,140 +22,74 @@ const ItemSpecification = ({
     limit: 1,
   });
 
-  return isMobile ? (
-    <>
+  return (
+    <Tooltip
+      content={
+        specificationFilter[attr]
+          ? 'Filter applied. Clear to choose a different value.'
+          : 'Click to apply as a search filter.'
+      }
+      delayDuration={1000}
+      disabled={!value}
+    >
       <div
-        className="inline-flex flex-col justify-center items-start "
-        key={attr}
+        className={twMerge(
+          `px-3.5 py-2 bg-[#E7E8F1] rounded-lg flex justify-center items-center gap-1.5`,
+          'border border-solid border-transparent hover:border-[#E7E8F1]',
+          'cursor-pointer',
+          'w-fit',
+          specificationFilter[attr]
+            ? ' bg-[#545987] '
+            : 'hover:shadow-[0_0_6px_0_#DDDEE7]',
+        )}
+        onClick={() => {
+          if (!value) {
+            return;
+          }
+          if (attribute !== 'none') {
+            refine(value);
+          } else {
+            const setSpecificationFilter =
+              useRequestStore.getState().setSpecificationFilter;
+
+            const setSpecificationFilteredProducts =
+              useResultStore.getState().setSpecificationFilteredProducts;
+
+            if (specificationFilter[attr]) {
+              setSpecificationFilter({});
+              setSpecificationFilteredProducts([]);
+              // setProducts(results);
+            } else {
+              setSpecificationFilter({
+                [attr]: value,
+              });
+            }
+          }
+        }}
       >
-        <div className="pl-1 inline-flex justify-center items-center gap-2.5">
-          <div className="justify-start text-[#3B3E5F] text-sm font-semibold">
-            {attr}
-          </div>
-        </div>
         <div
           className={twMerge(
-            `p-3 bg-[#e4e3ff] rounded-lg  inline-flex justify-center items-center gap-1.5`,
-            'text-[#3e36dc]',
+            'justify-start text-[#767A9F] text-sm leading-none px-0.5',
+            'font-normal',
             specificationFilter[attr]
-              ? 'border-[#3E36DC] bg-[#3E36DC] text-white'
-              : '',
+              ? 'text-white hover:px-0.5'
+              : 'hover:font-semibold',
+            'leading-4',
+            'flex gap-2 items-center',
           )}
-          onClick={() => {
-            if (!value) {
-              return;
-            }
-            if (attribute !== 'none') {
-              refine(value);
-            } else {
-              const setSpecificationFilter =
-                useRequestStore.getState().setSpecificationFilter;
-
-              const setSpecificationFilteredProducts =
-                useResultStore.getState().setSpecificationFilteredProducts;
-
-              if (specificationFilter[attr]) {
-                setSpecificationFilter({});
-                setSpecificationFilteredProducts([]);
-                // setProducts(results);
-              } else {
-                setSpecificationFilter({
-                  [attr]: value,
-                });
-              }
-            }
-          }}
         >
-          <div className="justify-start text-sm font-medium leading-none flex gap-2">
-            {imageAnalysis?.specification[attr] || 'N/A'}
-            <div>
-              <Icon
-                name="close"
-                className={twMerge(
-                  'w-3 h-3 text-white',
-                  specificationFilter[attr] ? 'block' : 'hidden',
-                )}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  ) : (
-    <div key={attr} className="flex justify-between w-full gap-2 items-center">
-      <div className="self-stretch inline-flex justify-start items-center gap-1.5">
-        <div className="justify-start text-[#3B3E5F] text-xs font-semibold">
-          {attr}:
-        </div>
-        <Tooltip
-          content={
-            specificationFilter[attr]
-              ? 'Filter applied. Clear to choose a different value.'
-              : 'Click to apply as a search filter.'
-          }
-          delayDuration={1000}
-          disabled={!value}
-        >
-          <div
+          {imageAnalysis?.specification[attr] || 'N/A'}
+
+          <Icon
+            name="close"
             className={twMerge(
-              `px-1 py-1 bg-[#e4e3ff] rounded-[1px] flex justify-center items-center gap-1.5`,
-              'border border-solid border-transparent hover:border-[#3E36DC]',
-              'cursor-pointer',
-              specificationFilter[attr] ? 'border-[#3E36DC] bg-[#3E36DC] ' : '',
+              'w-[10px] h-[10px] text-white',
+              specificationFilter[attr] ? 'block' : 'hidden',
             )}
-            onClick={() => {
-              if (!value) {
-                return;
-              }
-              if (attribute !== 'none') {
-                refine(value);
-              } else {
-                const setSpecificationFilter =
-                  useRequestStore.getState().setSpecificationFilter;
-
-                const setSpecificationFilteredProducts =
-                  useResultStore.getState().setSpecificationFilteredProducts;
-
-                if (specificationFilter[attr]) {
-                  setSpecificationFilter({});
-                  setSpecificationFilteredProducts([]);
-                  // setProducts(results);
-                } else {
-                  setSpecificationFilter({
-                    [attr]: value,
-                  });
-                }
-              }
-            }}
-          >
-            <div
-              className={twMerge(
-                'justify-start text-[#3e36dc] text-[10px] leading-none px-0.5',
-                'font-normal hover:font-bold hover:px-0',
-                specificationFilter[attr]
-                  ? 'font-bold text-white hover:px-0.5'
-                  : '',
-                'max-line-1',
-              )}
-            >
-              {imageAnalysis?.specification[attr] || 'N/A'}
-            </div>
-          </div>
-        </Tooltip>
-      </div>
-      <div
-        onClick={() => {
-          navigator.clipboard.writeText(
-            imageAnalysis?.specification[attr] || '',
-          );
-        }}
-      >
-        <Icon
-          name="copy"
-          className="text-[#AAABB5] w-[12px] h-[12px] hover:text-[#3E36DC] cursor-pointer"
-        />
+          />
+        </div>
       </div>
-    </div>
+    </Tooltip>
   );
 };
 

package/src/components/LocationInfoPopup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
 
@@ -10,49 +10,49 @@ const LocationInfoPopup = () => {
     const shown = sessionStorage.getItem('locationNoticeShown');
     if (shown) return;
 
-    navigator.permissions
-      .query({ name: 'geolocation' })
-      .then((result) => {
-        if (result.state === 'prompt') {
-          setShowPopup(true);
-        } else if (result.state === 'granted') {
-          navigator.geolocation.getCurrentPosition(console.log, console.error);
-          sessionStorage.setItem('locationNoticeShown', 'true');
-        } else {
-          sessionStorage.setItem('locationNoticeShown', 'true');
-        }
-      });
+    navigator.permissions.query({ name: 'geolocation' }).then(result => {
+      if (result.state === 'prompt') {
+        setShowPopup(true);
+      } else if (result.state === 'granted') {
+        navigator.geolocation.getCurrentPosition(console.log, console.error);
+        sessionStorage.setItem('locationNoticeShown', 'true');
+      } else {
+        sessionStorage.setItem('locationNoticeShown', 'true');
+      }
+    });
   }, []);
 
   const closePopup = () => {
     navigator.geolocation.getCurrentPosition(console.log, console.error);
     sessionStorage.setItem('locationNoticeShown', 'true');
     setShowPopup(false);
-  }
-  
+  };
+
   return (
     <div>
-      {showPopup && createPortal(
-        <div
-          className="custom-modal"
-          onClick={closePopup}
-        >
-          <div
-            className="custom-modal-body geolocation"
-            onClick={(e) => {
+      {showPopup &&
+        createPortal(
+          <div className="custom-modal" onClick={closePopup}>
+            <div
+              className="custom-modal-body geolocation"
+              onClick={e => {
                 e.preventDefault();
                 e.stopPropagation();
-            }}
-          >
-              <div className="geolocation-title">{t('Please enable location services when prompted.')}</div>
+              }}
+            >
+              <div className="geolocation-title">
+                {t('Please enable location services when prompted.')}
+              </div>
               <div>{window.settings.geoLocationMessage}</div>
-            <button type="button" onClick={closePopup}>{t('I understand')}</button>
-          </div>
-        </div>,
-        document.body
-      )}
+              <button type="button" onClick={closePopup}>
+                {t('I understand')}
+              </button>
+            </div>
+          </div>,
+          document.body,
+        )}
     </div>
-  )
-}
+  );
+};
 
 export default LocationInfoPopup;