@nyris/nyris-webapp 0.3.89 → 0.3.90

package/src/components/PostFilter/PostFilterComponent.tsx

@@ -3,11 +3,11 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from 'components/Accordion';
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
 import PostFilter from './PostFilter';
-import useResultStore from 'stores/result/resultStore';
+import PostFilterFindApi from './PostFilterFindApi';
 
 function PostFilterComponent({ className }: { className?: string }) {
   const [accordionValues, setAccordionValues] = useState([
@@ -17,25 +17,45 @@ function PostFilterComponent({ className }: { className?: string }) {
     'expand',
   ]);
 
-  const isExpanded = React.useMemo(
+  const isExpanded = useMemo(
     () => accordionValues.includes('expand'),
     [accordionValues],
   );
 
   const { t } = useTranslation();
 
-  const productsFromAlgolia = useResultStore(
-    state => state.productsFromAlgolia,
+  const [visibleSections, setVisibleSections] = useState<
+    Record<string, boolean>
+  >({});
+
+  const handleVisibilityChange = useCallback(
+    (attribute: string, isVisible: boolean) => {
+      setVisibleSections(prev =>
+        prev[attribute] === isVisible
+          ? prev
+          : { ...prev, [attribute]: isVisible },
+      );
+    },
+    [],
+  );
+
+  const hasVisibleSections = useMemo(
+    () => Object.values(visibleSections).some(Boolean),
+    [visibleSections],
   );
 
-  if (productsFromAlgolia.length === 0) return <></>;
+  const visibleAttributes = useMemo(() => {
+    return window.settings.refinements
+      .map((refinement: { attribute: string }) => refinement.attribute)
+      .filter((attribute: string | number) => visibleSections[attribute]);
+  }, [visibleSections]);
 
   return (
     <div
       className={twMerge([
         'mt-4',
         'w-full',
-        'px-6',
+        'px-4',
         'flex',
         'flex-col',
         'gap-4',
@@ -81,31 +101,44 @@ function PostFilterComponent({ className }: { className?: string }) {
         }}
         value={accordionValues}
       >
-        <AccordionItem value={'expand'}>
-          <AccordionTrigger className="text-xs font-normal w-full h-8 items-center justify-end gap-2 border-b border-solid border-[#e0e0e0]">
-            {isExpanded ? t('Collapse all') : t('Expand all')}
-          </AccordionTrigger>
-        </AccordionItem>
+        {hasVisibleSections && (
+          <AccordionItem value={'expand'}>
+            <AccordionTrigger className="text-xs font-normal w-full h-8 items-center justify-end gap-2 border-b border-solid border-[#e0e0e0]">
+              {isExpanded ? t('Collapse all') : t('Expand all')}
+            </AccordionTrigger>
+          </AccordionItem>
+        )}
         {window.settings.refinements.map(
           (
             refinement: { attribute: string; header: any; searchable: any },
             index: React.Key | null | undefined,
           ) => {
+            const isLastVisible =
+              visibleAttributes[visibleAttributes.length - 1] ===
+              refinement.attribute;
+
             return (
-              <div
-                key={index}
-                className={twMerge([
-                  index !== window.settings.refinements.length - 1 &&
-                    'border-b border-solid border-[#e0e0e0]',
-                  'py-4',
-                ])}
-              >
-                <PostFilter
-                  attribute={refinement.attribute}
-                  label={refinement.header}
-                  searchable={refinement.searchable}
-                />
-              </div>
+              <React.Fragment key={index}>
+                {window.settings.algolia.enabled && (
+                  <PostFilter
+                    attribute={refinement.attribute}
+                    label={refinement.header}
+                    searchable={refinement.searchable}
+                    onVisibilityChange={handleVisibilityChange}
+                    isLastVisible={isLastVisible}
+                  />
+                )}
+
+                {!window.settings.algolia.enabled && (
+                  <PostFilterFindApi
+                    attribute={refinement.attribute}
+                    label={refinement.header}
+                    searchable={false}
+                    onVisibilityChange={handleVisibilityChange}
+                    isLastVisible={isLastVisible}
+                  />
+                )}
+              </React.Fragment>
             );
           },
         )}

package/src/components/PostFilter/PostFilterFindApi.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from 'components/Accordion';
+import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
+import useResultStore from 'stores/result/resultStore';
+import useRequestStore from 'stores/request/requestStore';
+import { filterProductsByText } from 'utils/textSearchFilter';
+
+function PostFilterFindApi({
+  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>('');
+
+  const productsFromFindApi = useResultStore(
+    state => state.productsFromFindApi,
+  );
+  const groundingFilterResult = useResultStore(
+    state => state.groundingFilterResult,
+  );
+  const showingGroundingFilterResult = useResultStore(
+    state => state.showingGroundingFilterResult,
+  );
+  const query = useRequestStore(state => state.query);
+  const requestImages = useRequestStore(state => state.requestImages);
+  const postFilterSelections = useRequestStore(
+    state => state.postFilterSelections,
+  );
+  const togglePostFilterSelection = useRequestStore(
+    state => state.togglePostFilterSelection,
+  );
+  const { t } = useTranslation();
+
+  const productsForFilters = useMemo(() => {
+    let baseProducts = productsFromFindApi;
+
+    if (requestImages?.length && query?.trim()) {
+      baseProducts = filterProductsByText(query, productsFromFindApi);
+    }
+
+    if (showingGroundingFilterResult && groundingFilterResult?.length > 0) {
+      const grounded = baseProducts.filter((product: any) =>
+        groundingFilterResult.some((result: any) => product.sku === result.sku),
+      );
+      if (grounded.length > 0) {
+        return grounded;
+      }
+    }
+
+    return baseProducts;
+  }, [
+    productsFromFindApi,
+    query,
+    requestImages,
+    showingGroundingFilterResult,
+    groundingFilterResult,
+  ]);
+
+  const filteredProductsForCounts = useMemo(() => {
+    const selections = postFilterSelections || {};
+    const activeSelections = Object.entries(selections).filter(
+      ([attr, values]) => attr !== attribute && Array.isArray(values),
+    );
+
+    if (!activeSelections.length) {
+      return productsForFilters;
+    }
+
+    return productsForFilters.filter((product: any) =>
+      activeSelections.every(([attr, values]) => {
+        const filterValues = product.filters?.[attr];
+        if (!Array.isArray(filterValues) || filterValues.length === 0) {
+          return false;
+        }
+        return values.some(value => filterValues.includes(value));
+      }),
+    );
+  }, [attribute, postFilterSelections, productsForFilters]);
+  console.log({ filteredProductsForCounts });
+
+  const valueCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    filteredProductsForCounts?.forEach((product: any) => {
+      const filterValues = product.filters?.[attribute];
+      if (Array.isArray(filterValues)) {
+        filterValues.forEach((val: string) => {
+          if (val) counts[val] = (counts[val] || 0) + 1;
+        });
+      }
+    });
+
+    return counts;
+  }, [attribute, filteredProductsForCounts]);
+
+  const items = useMemo(() => {
+    const selectedValues = postFilterSelections?.[attribute] || [];
+    const allValues = new Set<string>([
+      ...Object.keys(valueCounts),
+      ...selectedValues,
+    ]);
+
+    return Array.from(allValues)
+      .map(label => ({
+        label,
+        value: label,
+        count: valueCounts[label] || 0,
+        isRefined: selectedValues.includes(label),
+      }))
+      .filter(
+        item =>
+          !searchInput ||
+          item.label.toLowerCase().includes(searchInput.toLowerCase()),
+      )
+      .sort((a, b) => b.count - a.count || a.label.localeCompare(b.label))
+      .slice(0, itemsLimit);
+  }, [attribute, itemsLimit, postFilterSelections, searchInput, valueCounts]);
+
+  const selectedValues = postFilterSelections?.[attribute] || [];
+  const hasSelection = selectedValues.length > 0;
+  const hasAvailableValues = Object.keys(valueCounts).length > 0;
+  const hasSearch = searchable && searchInput.length > 0;
+  const isVisible = hasAvailableValues || hasSelection || hasSearch;
+
+  useEffect(() => {
+    onVisibilityChange?.(attribute, isVisible);
+  }, [attribute, isVisible, onVisibilityChange]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const onShowMore = () => {
+    setItemsLimit(prev => prev + 10);
+  };
+
+  return (
+    <>
+      <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>
+        {searchable && (
+          <div
+            style={{
+              position: 'relative',
+            }}
+          >
+            <input
+              name="postfilter-search"
+              type="text"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              maxLength={512}
+              value={searchInput}
+              onChange={event => setSearchInput(event.currentTarget.value)}
+              className="w-full h-8 rounded-2xl bg-[#F3F3F5] pl-8 pr-2 outline-none"
+              style={{
+                fontSize: 14,
+              }}
+              placeholder={`${t('Search')} ${label}`}
+            />
+            {searchInput && (
+              <Icon
+                name="close"
+                className="absolute top-2.5 right-3 hover:cursor-pointer w-3 h-3"
+                onClick={() => setSearchInput('')}
+              />
+            )}
+            <Icon name="search" className="absolute top-2 left-2" />
+          </div>
+        )}
+
+        {!items.length && (
+          <div
+            style={{
+              fontSize: 14,
+              paddingTop: 16,
+            }}
+          >
+            {t('No filters found')}
+          </div>
+        )}
+        <AccordionContent>
+          <div className="flex flex-col gap-4 mt-4 ml-2">
+            {items.map(item => (
+              <div key={item.label}>
+                <label className="flex items-center w-fit cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={item.isRefined}
+                    onChange={() =>
+                      togglePostFilterSelection(attribute, item.value)
+                    }
+                    className="cursor-pointer"
+                  />
+                  <span className="text-xs font-normal pl-2 pr-1">
+                    {item.label}
+                  </span>
+                  <span className="text-xs font-normal">({item.count})</span>
+                </label>
+              </div>
+            ))}
+            {items.length === itemsLimit && (
+              <button
+                className="hover:bg-[#E9E9EC] rounded-[4px] p-2"
+                style={{
+                  fontSize: 14,
+                }}
+                onClick={onShowMore}
+              >
+                {t('Load More')}
+              </button>
+            )}
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </>
+  );
+}
+
+export default PostFilterFindApi;

package/src/components/PoweredBy.tsx

@@ -0,0 +1,16 @@
+import { Icon } from '@nyris/nyris-react-components';
+import { twMerge } from 'tailwind-merge';
+
+export default function PoweredBy({ className }: { className?: string }) {
+  return (
+    <div className={twMerge(className)}>
+      <Icon
+        className="fill-black group-hover:fill-[url(#powered_by_nyris_colored_svg__gradient)] hover:fill-[url(#powered_by_nyris_colored_svg__gradient)] cursor-pointer w-[110px] h-5"
+        name="powered_by_nyris"
+        onClick={() => {
+          window.open('https://www.nyris.io', '_blank');
+        }}
+      />
+    </div>
+  );
+}

package/src/components/PreFilter/PreFilter.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { getFilters, searchFilters } from 'services/filter';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { searchFilters } from 'services/filter';
 
 import { isEmpty, pickBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -9,9 +9,8 @@ import useRequestStore from 'stores/request/requestStore';
 import { truncateString } from 'utils/truncateString';
 import { twMerge } from 'tailwind-merge';
 import Tooltip from 'components/Tooltip/TooltipComponent';
-import { Skeleton } from 'components/Skeleton';
 import { useNavigate } from 'react-router';
-import useResultStore from "../../stores/result/resultStore";
+import useResultStore from '../../stores/result/resultStore';
 
 interface Props {
   handleClose?: any;
@@ -25,15 +24,18 @@ const PreFilterComponent = (props: Props) => {
 
   const [searchKey, setSearchKey] = useState<string>('');
 
-  const [isLoading, setLoading] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState<boolean>(true);
   const [columns, setColumns] = useState<number>(0);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const debounceDelayMs = 300;
 
   const { singleImageSearch } = useImageSearch();
 
   const requestImages = useRequestStore(state => state.requestImages);
   const imageRegions = useRequestStore(state => state.regions);
   const keyFilterState = useRequestStore(state => state.preFilter);
-
+  const preFilterList = useRequestStore(state => state.preFilterList);
+  const preFilterLoading = useRequestStore(state => state.preFilterLoading);
   const setPreFilter = useRequestStore(state => state.setPreFilter);
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
   const specification = useRequestStore(state => state.specifications);
@@ -56,45 +58,48 @@ const PreFilterComponent = (props: Props) => {
     [keyFilter],
   );
 
+  const isLoadingState = isLoading || preFilterLoading;
+
   useEffect(() => {
+    if (searchKey && searchKey.trim()) {
+      return;
+    }
+    setLoading(true);
     getDataFilterDesktop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preFilterList, searchKey]);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
   }, []);
 
-  const getDataFilterDesktop = async () => {
-    setLoading(true);
-    const dataResultFilter = getFilters(1000, settings)
-      .then(res => {
-        const arrResult =
-          res.find(value => value.key === settings.visualSearchFilterKey)
-            ?.values || [];
+  const getDataFilterDesktop = () => {
+    const arrResult =
+      preFilterList.find(value => value.key === settings.visualSearchFilterKey)
+        ?.values || [];
 
-        const newResult = arrResult.sort().reduce((a: any, c: any) => {
-          if (!c[0]) return a;
-          let k = c[0]?.toLocaleUpperCase();
-          if (a[k]) a[k].push(c);
-          else a[k] = [c];
-          return a;
-        }, {});
-        setResultFilter(newResult);
-        setColumns(Object.keys(newResult).length);
-        
-      })
-      .catch((e: any) => {
-        console.log('err getDataFilterDesktop', e);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-
-    return dataResultFilter;
+    const newResult = arrResult.sort().reduce((a: any, c: any) => {
+      if (!c[0]) return a;
+      let k = c[0]?.toLocaleUpperCase();
+      if (a[k]) a[k].push(c);
+      else a[k] = [c];
+      return a;
+    }, {});
+    setResultFilter(newResult);
+    setColumns(Object.keys(newResult).length);
+    setLoading(false);
   };
 
   const filterSearchHandler = async (value: any) => {
-    if (!value) {
+    if (!value || !String(value).trim()) {
       getDataFilterDesktop();
       return;
     }
+    setLoading(true);
     const data = await searchFilters(
       settings.visualSearchFilterKey,
       encodeURIComponent(value),
@@ -110,14 +115,25 @@ const PreFilterComponent = (props: Props) => {
           setResultFilter({});
           setColumns(4);
         }
+        setLoading(false);
         return;
       })
       .catch((e: any) => {
         console.log('err filterSearchHandler', e);
+        setLoading(false);
       });
     return data;
   };
 
+  const debouncedFilterSearchHandler = (value: any) => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(() => {
+      filterSearchHandler(value);
+    }, debounceDelayMs);
+  };
+
   const onHandlerSubmitData = () => {
     const preFilter = pickBy(keyFilter, value => !!value);
     setPreFilter(preFilter);
@@ -131,8 +147,11 @@ const PreFilterComponent = (props: Props) => {
         : '';
     setAlgoliaFilter(filter);
 
-    if (preFilterValues?.length && preFilterValues[0] !== specification?.prefilter_value) {
-      setSpecifications({ prefilter_value: preFilterValues?.join(', ') || ''});
+    if (
+      preFilterValues?.length &&
+      preFilterValues[0] !== specification?.prefilter_value
+    ) {
+      setSpecifications({ prefilter_value: preFilterValues?.join(', ') || '' });
     }
     if (specification?.is_nameplate) {
       setImageAnalysis({});
@@ -181,7 +200,7 @@ const PreFilterComponent = (props: Props) => {
             className="border-none  bg-transparent outline-none w-full desktop:w-[500px] h-full"
             placeholder={t('Search')}
             onChange={(e: any) => {
-              filterSearchHandler(e.target.value);
+              debouncedFilterSearchHandler(e.target.value);
               setSearchKey(e.target.value);
             }}
             value={searchKey}
@@ -191,7 +210,7 @@ const PreFilterComponent = (props: Props) => {
               className="w-10 h-10 rounded-[50%] flex justify-center items-center cursor-pointer"
               onClick={() => {
                 setSearchKey('');
-                filterSearchHandler('');
+                debouncedFilterSearchHandler('');
               }}
             >
               <Icon name="close" className="w-4 h-4 text-primary" />
@@ -299,25 +318,29 @@ const PreFilterComponent = (props: Props) => {
             );
           })}
 
-        {isLoading && (
-          <div className={`columns-1 desktop:columns-4`}>
-            {Array(12)
-              .fill('')
-              .map((_, index) => {
-                return (
-                  <div key={index} className="mb-4 flex flex-col gap-3 w-full">
-                    <Skeleton className="h-[20px] w-[60px]" />
-                    {Array(6)
-                      .fill('')
-                      .map((_, index) => (
-                        <Skeleton key={index} className="h-[20px] w-full" />
-                      ))}
-                  </div>
-                );
-              })}
+        {isLoadingState && (
+          <div className="w-full flex items-center justify-center py-10">
+            <svg
+              width={48}
+              height={48}
+              viewBox="0 0 50 50"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="loading-spinner"
+            >
+              <circle
+                cx="25"
+                cy="25"
+                r="20"
+                stroke="#3E36DC"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeDasharray="90 30"
+              />
+            </svg>
           </div>
         )}
-        {isEmpty(resultFilter) && !isLoading && (
+        {isEmpty(resultFilter) && !isLoadingState && (
           <div>{t('No result found')}</div>
         )}
       </div>