@nyris/nyris-webapp 0.3.91 → 0.3.93

package/src/components/ImagePreview.tsx

@@ -108,7 +108,7 @@ function ImagePreviewComponent({
         compress: false,
       }).then((res: any) => {
         const specificationPrefilter =
-          res.image_analysis?.specification?.prefilter_value || null;
+          res?.image_analysis?.specification?.prefilter_value || null;
         const hasPrefilter = preFilterList.filter((filter: any) =>
           filter.values.includes(specificationPrefilter),
         );
@@ -188,7 +188,7 @@ function ImagePreviewComponent({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedOnImageSelectionChange = useCallback(
-    debounce((r: RectCoords, index?: number) => {
+    debounce((r: RectCoords, _index?: number) => {
       findItemsInSelection(r, requestImages[0]);
     }, 0),
     [findItemsInSelection, requestImages, updateRegion],
@@ -200,7 +200,7 @@ function ImagePreviewComponent({
       <div
         ref={previewWrapperRef}
         className={twMerge([
-          'bg-primary',
+          'bg-[#545987]',
           'justify-center',
           isVisible ? (!isMultiImageSearchEnabled ? 'py-5' : 'pt-6') : '',
           'px-7',
@@ -211,6 +211,7 @@ function ImagePreviewComponent({
           'hidden',
           'desktop:flex',
           // 'rounded',
+          'rounded-[24px]',
         ])}
         // style={{
         //   height: '100%',
@@ -228,9 +229,9 @@ function ImagePreviewComponent({
       >
         <div
           className={twMerge([
-            // 'w-[243px]',
             'w-full',
-            'bg-[#55566b] aspect-square flex just items-center',
+            'bg-[#545987] aspect-square flex just items-center',
+            'rounded-[24px]',
           ])}
         >
           <Preview
@@ -295,7 +296,7 @@ function ImagePreviewComponent({
       {/* Image preview Mobile*/}
       <div
         className={twMerge([
-          'bg-primary',
+          'bg-[#545987]',
           'justify-center',
           'p-5',
           !editActive ? 'py-2' : '',
@@ -303,11 +304,13 @@ function ImagePreviewComponent({
           'relative',
           'flex',
           'desktop:hidden',
+          !editActive && 'rounded-[32px]',
+          editActive && 'rounded-[24px]',
         ])}
       >
         <div
           className={`w-full ${
-            editActive ? 'bg-[#55566b] ' : ''
+            editActive ? 'bg-[#545987] ' : ''
           } flex just items-center`}
         >
           <Preview
@@ -318,12 +321,12 @@ function ImagePreviewComponent({
             selection={regions[currentIndex] || DEFAULT_REGION}
             regions={detectedRegions[currentIndex] || []}
             minWidth={Math.min(
-              80 *
+              40 *
                 (requestImages[currentIndex]?.width /
                   requestImages[currentIndex]?.height),
               200,
             )}
-            minHeight={80}
+            minHeight={40}
             dotColor={editActive ? '#FBD914' : ''}
             minCropWidth={editActive ? 30 : 5}
             minCropHeight={editActive ? 30 : 5}
@@ -370,26 +373,38 @@ function ImagePreviewComponent({
         )}
         <div
           onClick={() => setEditActive(s => !s)}
-          className={`absolute right-1 ${
-            editActive ? 'bottom-1' : 'bottom-8'
-          } flex justify-center items-center desktop:hidden p-1`}
+          className={twMerge(
+            `absolute right-1 ${
+              editActive ? 'bottom-1' : 'bottom-1'
+            } flex justify-center items-center desktop:hidden p-1`,
+          )}
         >
-          <div className="rounded-full bg-white w-6 h-6 flex justify-center items-center desktop:hidden">
+          <div
+            className={twMerge(
+              'rounded-full w-6 h-6 flex justify-center items-center desktop:hidden',
+              editActive ? 'w-8 h-8 bg-white' : 'w-10 h-10 bg-transparent',
+            )}
+          >
             {editActive && <Icon name="collapse" className="text-primary" />}
-            {!editActive && <Icon name="crop" className="text-primary" />}
+            {!editActive && <Icon name="crop" className="text-white" />}
           </div>
         </div>
 
         <div
           onClick={() => onImageRemove()}
           className={`absolute left-1 ${
-            editActive ? 'top-1' : 'top-8'
+            editActive ? 'top-1' : 'top-1'
           } flex justify-center items-center desktop:hidden p-1`}
         >
-          <div className="rounded-full bg-white w-6 h-6 flex justify-center items-center desktop:hidden">
+          <div
+            className={twMerge(
+              'rounded-full bg-[#FFE5EF] flex justify-center items-center desktop:hidden',
+              editActive ? 'w-8 h-8' : 'w-10 h-10',
+            )}
+          >
             <Icon
               name="trash"
-              className="text-primary"
+              className="text-[#E31B5D]"
               width={14}
               height={14}
             />

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;