@nyris/nyris-webapp 0.3.89 → 0.3.91

package/src/components/ImageUpload.tsx

@@ -0,0 +1,247 @@
+import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+import Tooltip from './Tooltip/TooltipComponent';
+import { useAuth0 } from '@auth0/auth0-react';
+import { useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import useRequestStore from 'stores/request/requestStore';
+import { useImageSearch } from 'hooks/useImageSearch';
+import { clone } from 'lodash';
+import { useCadSearch } from 'hooks/useCadSearch';
+import { isCadFile } from '@nyris/nyris-api';
+import UploadDisclaimer from './UploadDisclaimer';
+
+function ImageUpload({ onCameraClick }: { onCameraClick?: () => void }) {
+  const settings = window.settings;
+  const user = useAuth0().user;
+
+  const { t } = useTranslation();
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const preFilterList = useRequestStore(state => state.preFilterList);
+  const requestImages = useRequestStore(state => state.requestImages);
+  const setQuery = useRequestStore(state => state.setQuery);
+  const setValueInput = useRequestStore(state => state.setValueInput);
+  const setMetaFilter = useRequestStore(state => state.setMetaFilter);
+  const specifications = useRequestStore(state => state.specifications);
+
+  const setRequestImages = useRequestStore(state => state.setRequestImages);
+  const setSpecifications = useRequestStore(state => state.setSpecifications);
+  const setShowLoading = useRequestStore(state => state.setShowLoading);
+  const setNameplateNotificationText = useRequestStore(
+    state => state.setNameplateNotificationText,
+  );
+  const setShowNotMatchedError = useRequestStore(
+    state => state.setShowNotMatchedError,
+  );
+  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const setPreFilter = useRequestStore(state => state.setPreFilter);
+  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
+
+  const [showDisclaimer, setShowDisclaimer] = useState(false);
+
+  const showPreFilter = useMemo(() => {
+    if (settings.shouldUseUserMetadata && user) {
+      if (user['/user_metadata'].value) {
+        setMetaFilter(user['/user_metadata'].value);
+      }
+    }
+
+    if (settings.shouldUseUserMetadata && user) {
+      if (settings.preFilterOption && !user['/user_metadata'].value) {
+        return true;
+      }
+      return false;
+    }
+
+    return settings.preFilterOption;
+  }, [
+    setMetaFilter,
+    settings.preFilterOption,
+    settings.shouldUseUserMetadata,
+    user,
+  ]);
+
+  const showDisclaimerDisabled = useMemo(() => {
+    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]);
+
+  const { singleImageSearch } = useImageSearch();
+  const { cadSearch } = useCadSearch();
+
+  const handleUpload = (files: File[]) => {
+    setValueInput('');
+    setQuery('');
+
+    if (isCadFile(files[0])) {
+      cadSearch({ file: files[0], settings, newSearch: true }).then(res => {});
+
+      return;
+    }
+
+    setShowLoading(true);
+
+    singleImageSearch({
+      image: files[0],
+      settings: window.settings,
+      showFeedback: true,
+      newSearch: true,
+      clearPostFilter: true,
+    }).then(singleImageResp => {
+      const specificationPrefilter =
+        singleImageResp.image_analysis?.specification?.prefilter_value || null;
+      const hasPrefilter = preFilterList.filter((filter: any) =>
+        filter.values.includes(specificationPrefilter),
+      );
+      if (specificationPrefilter) {
+        setRequestImages([]);
+        setShowNotMatchedError(false);
+        if (hasPrefilter.length) {
+          setSpecifications(
+            clone(singleImageResp.image_analysis.specification),
+          );
+          setNameplateImage(files[0]);
+          setPreFilter({
+            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+              true,
+          });
+          setAlgoliaFilter(
+            `${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
+          );
+
+          setShowLoading(false);
+          navigate('/result');
+
+          setTimeout(() => {
+            setNameplateNotificationText(
+              t('We have successfully defined the search criteria', {
+                prefilter_value: specificationPrefilter,
+                preFilterTitle:
+                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+              }),
+            );
+          }, 1000);
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 10000);
+        }
+        if (!hasPrefilter.length && showPreFilter) {
+          setSpecifications(
+            clone({
+              ...singleImageResp.image_analysis.specification,
+              specificationPrefilter,
+            }),
+          );
+          navigate('/result');
+          setPreFilter({});
+          setAlgoliaFilter('');
+          setShowLoading(false);
+          setShowNotMatchedError(true);
+          setTimeout(() => {
+            setNameplateNotificationText(
+              t('Extracted details from the nameplate could not be matched', {
+                preFilterTitle:
+                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+              }),
+            );
+          }, 1000);
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 15000);
+        }
+      } else {
+        if (!specifications?.is_nameplate) {
+          setSpecifications({ ...specifications, is_nameplate: false });
+        }
+        setShowLoading(false);
+        navigate('/result');
+      }
+    });
+  };
+
+  return (
+    <>
+      <div
+        className={twMerge([
+          location.pathname !== '/result' && 'hidden desktop:flex',
+        ])}
+      >
+        <input
+          accept={'.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,.pdf,image/*'}
+          id="icon-button-file"
+          type="file"
+          style={{ display: 'none' }}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+          onChange={e => {
+            if (e?.target?.files) {
+              handleUpload(Array.from(e.target.files));
+            }
+            e.target.value = '';
+          }}
+        />
+        <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',
+              location.pathname === '/result' && 'desktop:w-8 desktop:h-8',
+            )}
+            htmlFor={
+              showDisclaimerDisabled && !onCameraClick ? 'icon-button-file' : ''
+            }
+            onClick={e => {
+              if (!showDisclaimerDisabled) {
+                // disclaimer
+                setShowDisclaimer(true);
+              } else if (onCameraClick) {
+                onCameraClick();
+              }
+            }}
+          >
+            <Icon name="camera_simple" width={16} height={16} fill="#2B2C46" />
+          </label>
+        </Tooltip>
+      </div>
+
+      {showDisclaimer && (
+        <UploadDisclaimer
+          onClose={() => {
+            setShowDisclaimer(false);
+          }}
+          onContinue={({
+            file,
+            dontShowAgain,
+          }: {
+            file: any;
+            dontShowAgain: any;
+          }) => {
+            if (dontShowAgain) {
+              localStorage.setItem('upload-disclaimer-suite', 'dont-show');
+            }
+
+            if (onCameraClick) {
+              onCameraClick();
+            } else {
+              if (file) {
+                handleUpload(Array(file));
+              }
+            }
+
+            setShowDisclaimer(false);
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+export default ImageUpload;

package/src/components/ItemSpecification.tsx

@@ -0,0 +1,164 @@
+import { useRefinementList } from 'react-instantsearch';
+import Tooltip from './Tooltip/TooltipComponent';
+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,
+  value,
+  specificationFilter,
+  imageAnalysis,
+}: any) => {
+  const refinement = window.settings.refinements.filter((ref: any) => {
+    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',
+    showMore: false,
+    limit: 1,
+  });
+
+  return isMobile ? (
+    <>
+      <div
+        className="inline-flex flex-col justify-center items-start "
+        key={attr}
+      >
+        <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]',
+            specificationFilter[attr]
+              ? 'border-[#3E36DC] bg-[#3E36DC] text-white'
+              : '',
+          )}
+          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
+            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] ' : '',
+            )}
+            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>
+  );
+};
+
+export default ItemSpecification;

package/src/components/MatchNotificationBanner.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { find } from 'services/visualSearch';
+import useRequestStore from 'stores/request/requestStore';
+import useResultStore from 'stores/result/resultStore';
+import { twMerge } from 'tailwind-merge';
+
+const MatchNotificationBanner = ({ className }: { className?: string }) => {
+  const [goBack, setGoBack] = useState(false);
+  const [textSearch, setTextSearch] = useState<
+    'loading' | 'resolved' | 'pending'
+  >('pending');
+
+  const [prevResult, setPrevResult] = useState<any[]>([]);
+
+  const productsFromFindApi = useResultStore(
+    state => state.productsFromFindApi,
+  );
+
+  const groundingFilterResult = useResultStore(
+    state => state.groundingFilterResult,
+  );
+
+  const showBanner = useMemo(() => {
+    if (groundingFilterResult.length !== productsFromFindApi.length) {
+      return true;
+    }
+
+    // Compare the order of SKUs (or fallback to id)
+    const getSku = (item: any) => item?.sku ?? '';
+    for (let i = 0; i < productsFromFindApi.length; i++) {
+      if (getSku(productsFromFindApi[i]) !== getSku(groundingFilterResult[i])) {
+        return true;
+      }
+    }
+    // If all SKUs match in order
+    return false;
+  }, [groundingFilterResult, productsFromFindApi]);
+
+  useEffect(() => {
+    setGoBack(false);
+    setTextSearch('pending');
+  }, []);
+
+  useEffect(() => {
+    if (textSearch === 'pending') {
+      setPrevResult(productsFromFindApi || []);
+    }
+
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [productsFromFindApi]);
+
+  const showingGroundingFilterResult = useResultStore(
+    state => state.showingGroundingFilterResult,
+  );
+
+  const groundingQuery = useRequestStore(state => state.groundingQuery);
+  if (goBack) {
+    return <></>;
+  }
+  if (
+    (!groundingFilterResult || groundingFilterResult?.length === 0) &&
+    !groundingQuery
+  ) {
+    return <></>;
+  }
+
+  if (groundingQuery && groundingFilterResult?.length === 0) {
+    return (
+      <div
+        className={twMerge([
+          'flex items-center justify-between w-full bg-[#F2FBF3] rounded-[16px] p-2 pl-2 shadow-sm',
+          'h-[56px]',
+          className,
+        ])}
+      >
+        {/* Left Section: Icon and Text */}
+        <div className="flex items-center gap-3">
+          <div className="h-2.5 w-2.5 rounded-full bg-[#10b981]" />
+          {textSearch === 'resolved' && (
+            <p className="text-[#4a5568] text-sm md:text-base">
+              Didn't find the correct product?
+            </p>
+          )}
+          {textSearch !== 'resolved' && (
+            <p className="text-[#4a5568] text-sm md:text-base">
+              Are you looking for ?{' '}
+              <span className="font-bold">{groundingQuery}</span>
+            </p>
+          )}
+        </div>
+
+        {/* Right Section: Action Button */}
+        {textSearch === 'resolved' && (
+          <button
+            className="bg-[#373b53] hover:bg-[#2d3145] text-white px-6 py-3 rounded-lg text-xs font-semibold transition-colors duration-200"
+            onClick={() => {
+              setGoBack(true);
+              useResultStore.getState().setFindApiProducts(prevResult);
+            }}
+          >
+            Show all results
+          </button>
+        )}
+
+        {textSearch !== 'resolved' && (
+          <button
+            className="bg-[#373b53] hover:bg-[#2d3145] text-white px-6 py-3 rounded-lg text-xs font-semibold transition-colors duration-200"
+            onClick={() => {
+              setTextSearch('loading');
+              find({
+                settings: window.settings,
+                text: groundingQuery,
+              }).then(res => {
+                useResultStore.getState().setFindApiProducts(res?.results);
+                setTextSearch('resolved');
+              });
+            }}
+          >
+            Search now
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  if (!showBanner) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={twMerge([
+        'flex items-center justify-between w-full bg-[#F2FBF3] rounded-[16px] p-2 pl-2 shadow-sm',
+        className,
+      ])}
+    >
+      {/* Left Section: Icon and Text */}
+      <div className="flex items-center gap-3">
+        <div className="h-2.5 w-2.5 rounded-full bg-[#10b981]" />
+        <p className="text-[#4a5568] text-sm md:text-base">
+          {showingGroundingFilterResult ? 'Showing' : 'Found'}{' '}
+          <span className="font-bold text-slate-900 pr-1">
+            {groundingFilterResult?.length}
+          </span>
+          matching product in results
+        </p>
+      </div>
+
+      {/* Right Section: Action Button */}
+      <button
+        className="bg-[#373b53] hover:bg-[#2d3145] text-white px-6 py-3 rounded-lg text-xs font-semibold transition-colors duration-200"
+        onClick={() => {
+          useResultStore.getState().setShowingGroundingFilterResult();
+        }}
+      >
+        {showingGroundingFilterResult
+          ? 'Show all results'
+          : 'Show only matching results'}
+      </button>
+    </div>
+  );
+};
+
+export default MatchNotificationBanner;

package/src/components/PostFilter/PostFilter.tsx

@@ -12,10 +12,14 @@ function PostFilter({
   attribute,
   label,
   searchable,
+  onVisibilityChange,
+  isLastVisible,
 }: {
   attribute: string;
   label: string;
   searchable: boolean;
+  onVisibilityChange?: (attribute: string, isVisible: boolean) => void;
+  isLastVisible?: boolean;
 }) {
   const [itemsLimit, setItemsLimit] = useState(10);
   const [searchInput, setSearchInput] = useState<string>('');
@@ -33,13 +37,30 @@ function PostFilter({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchInput]);
 
+  const hasSelection = items.some(item => item.isRefined);
+  const hasAvailableValues = items.length > 0 || searchInput.length > 0;
+  const isVisible = hasAvailableValues || hasSelection;
+
+  useEffect(() => {
+    onVisibilityChange?.(attribute, isVisible);
+  }, [attribute, isVisible, onVisibilityChange]);
+
+  if (!isVisible) {
+    return null;
+  }
+
   const onShowMore = () => {
     setItemsLimit(prev => prev + 10);
   };
 
   return (
     <>
-      <AccordionItem value={attribute}>
+      <AccordionItem
+        value={attribute}
+        className={
+          isLastVisible ? 'py-4' : 'border-b border-solid border-[#e0e0e0] py-4'
+        }
+      >
         <AccordionTrigger className="text-sm font-semibold w-full h-8 items-center">
           {label}
         </AccordionTrigger>