@akinon/pz-similar-products 1.92.0-snapshot-ZERO-3457-20250627121541 → 1.93.0-rc.47

package/src/hooks/use-similar-products.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { Product } from '@akinon/next/types';
 import {
   useLazyGetSimilarProductsByUrlQuery,
@@ -13,17 +13,19 @@ import {
   validateImageFromDataUrl,
   type ImageValidationResult
 } from '../utils/image-validation';
+import { debounce } from '../utils';
 
 type SearchResults = SimilarProductsListResponse;
 
 interface SearchParams {
-  [key: string]: string;
+  [key: string]: string | string[];
 }
 
 export function useSimilarProducts(product: Product) {
   const { t } = useLocalization();
   const [currentImageUrl, setCurrentImageUrl] = useState('');
   const [fileError, setFileError] = useState('');
+  const [searchText, setSearchText] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResults | null>(
     null
   );
@@ -33,6 +35,16 @@ export function useSimilarProducts(product: Product) {
   const [isCropProcessing, setIsCropProcessing] = useState(false);
   const [loadedPages, setLoadedPages] = useState<Set<number>>(new Set([1]));
   const [allLoadedProducts, setAllLoadedProducts] = useState<Product[]>([]);
+  const [currentImageBase64, setCurrentImageBase64] = useState<string>('');
+  const [hasCroppedImage, setHasCroppedImage] = useState(false);
+
+  const searchTextRef = useRef<string>('');
+  const hasUploadedImageRef = useRef<boolean>(false);
+
+  const setSearchTextWithRef = useCallback((text: string) => {
+    setSearchText(text);
+    searchTextRef.current = text;
+  }, []);
 
   const [fetchSimilarProductsByUrl, { isLoading: isUrlSearchLoading }] =
     useLazyGetSimilarProductsByUrlQuery();
@@ -103,7 +115,7 @@ export function useSimilarProducts(product: Product) {
               String(choice.value)
             );
             const searchKey = String(facet.search_key || facet.key);
-            searchParams[searchKey] = values.join(',');
+            searchParams[searchKey] = values.length === 1 ? values[0] : values;
           }
         });
       }
@@ -338,7 +350,9 @@ export function useSimilarProducts(product: Product) {
       const productIds = extractProductIds(data);
 
       if (productIds.length > 0) {
-        const result = await executeProductSearch(productIds);
+        const searchParams = buildSearchParams(searchResults?.facets);
+
+        const result = await executeProductSearch(productIds, searchParams);
         if (result) {
           const resultWithCorrectSorterState = {
             ...result,
@@ -357,7 +371,11 @@ export function useSimilarProducts(product: Product) {
       executeProductSearch,
       updateSorterState,
       updateResultsAndKey,
-      createEmptySearchResults
+      createEmptySearchResults,
+      searchText,
+      searchTextRef,
+      buildSearchParams,
+      searchResults
     ]
   );
 
@@ -426,17 +444,24 @@ export function useSimilarProducts(product: Product) {
   );
 
   const fetchSimilarProductsByImageUrl = useCallback(
-    async (imageUrl: string) => {
+    async (imageUrl: string, overrideText?: string) => {
       setFileError('');
+
       try {
         const productPk = product?.pk;
         const excludedIds = productPk ? [productPk] : undefined;
 
-        const result = await fetchSimilarProductsByUrl({
+        const textToUse =
+          overrideText !== undefined ? overrideText : searchTextRef.current;
+
+        const requestParams = {
           url: imageUrl,
           limit: 20,
-          excluded_product_ids: excludedIds
-        }).unwrap();
+          excluded_product_ids: excludedIds,
+          text: textToUse || undefined
+        };
+
+        const result = await fetchSimilarProductsByUrl(requestParams).unwrap();
 
         await handleSearchResults(result);
         return result;
@@ -450,6 +475,8 @@ export function useSimilarProducts(product: Product) {
     [
       fetchSimilarProductsByUrl,
       product?.pk,
+      searchText,
+      searchTextRef,
       handleSearchResults,
       updateResultsAndKey,
       createEmptySearchResults,
@@ -462,31 +489,62 @@ export function useSimilarProducts(product: Product) {
     if (product?.productimage_set?.length > 0) {
       const initialImageUrl = product.productimage_set[0].image;
       setCurrentImageUrl(initialImageUrl);
+      setHasCroppedImage(false);
+      setCurrentImageBase64('');
+      setHasUploadedImage(false);
+      hasUploadedImageRef.current = false;
     }
   }, [product]);
 
   const fetchSimilarProductsByBase64 = useCallback(
-    async (base64Image: string) => {
+    async (
+      base64Image: string,
+      overrideText?: string,
+      forceExclude?: boolean
+    ) => {
       const base64Data = base64Image.startsWith('data:')
         ? base64Image.split(',')[1]
         : base64Image;
 
+      const textToUse =
+        overrideText !== undefined ? overrideText : searchTextRef.current;
+
+      const shouldExclude =
+        forceExclude !== undefined ? forceExclude : !hasUploadedImage;
+
+      const requestData = {
+        image: base64Data,
+        limit: 20,
+        excluded_product_ids: shouldExclude
+          ? product?.pk
+            ? [product.pk]
+            : undefined
+          : undefined,
+        text: textToUse || undefined
+      };
+
       return handleImageSearch(
-        async () =>
-          getSimilarProductsByImage({
-            image: base64Data,
-            limit: 20
-          }).unwrap(),
+        async () => getSimilarProductsByImage(requestData).unwrap(),
         base64Image,
         'Image search'
       );
     },
-    [getSimilarProductsByImage, handleImageSearch]
+    [
+      getSimilarProductsByImage,
+      searchText,
+      searchTextRef,
+      handleImageSearch,
+      hasUploadedImage,
+      product?.pk
+    ]
   );
 
   const fetchSimilarProductsByImageCrop = useCallback(
-    async (dataString: string) => {
+    async (dataString: string, excludeCurrentProduct: boolean = true) => {
       setFileError('');
+
+      setCurrentImageBase64(dataString);
+      setHasCroppedImage(true);
       if (dataString.startsWith('data:application/x-cors-fallback;base64,')) {
         try {
           const fallbackDataEncoded = dataString.replace(
@@ -549,9 +607,12 @@ export function useSimilarProducts(product: Product) {
                           getSimilarProductsByImage({
                             image: base64Data,
                             limit: 20,
-                            excluded_product_ids: product?.pk
-                              ? [product.pk]
-                              : undefined
+                            excluded_product_ids: excludeCurrentProduct
+                              ? product?.pk
+                                ? [product.pk]
+                                : undefined
+                              : undefined,
+                            text: searchTextRef.current || undefined
                           }).unwrap(),
                         croppedBase64,
                         'Proxy crop search'
@@ -601,7 +662,12 @@ export function useSimilarProducts(product: Product) {
           getSimilarProductsByImage({
             image: base64Data,
             limit: 20,
-            excluded_product_ids: product?.pk ? [product.pk] : undefined
+            excluded_product_ids: excludeCurrentProduct
+              ? product?.pk
+                ? [product.pk]
+                : undefined
+              : undefined,
+            text: searchTextRef.current || undefined
           }).unwrap(),
         dataString,
         'Image crop search'
@@ -609,11 +675,14 @@ export function useSimilarProducts(product: Product) {
     },
     [
       getSimilarProductsByImage,
+      searchText,
+      searchTextRef,
       handleImageSearch,
       product,
       fetchSimilarProductsByImageUrl,
       setFileError,
-      t
+      t,
+      hasUploadedImage
     ]
   );
 
@@ -624,6 +693,8 @@ export function useSimilarProducts(product: Product) {
     const file = event.target.files?.[0];
     if (!file) return;
 
+    setSearchTextWithRef('');
+
     try {
       let processedFile = file;
 
@@ -650,6 +721,9 @@ export function useSimilarProducts(product: Product) {
         const dataUrl = e.target?.result as string;
         setCurrentImageUrl(dataUrl);
         setHasUploadedImage(true);
+        hasUploadedImageRef.current = true;
+        setHasCroppedImage(false);
+        setCurrentImageBase64('');
 
         const metadataValidation = await validateImageFromDataUrl(dataUrl);
         if (!metadataValidation.isValid) {
@@ -658,7 +732,7 @@ export function useSimilarProducts(product: Product) {
           );
           return;
         }
-        fetchSimilarProductsByBase64(dataUrl);
+        fetchSimilarProductsByBase64(dataUrl, undefined, false);
       };
 
       reader.onerror = () =>
@@ -679,6 +753,8 @@ export function useSimilarProducts(product: Product) {
 
     try {
       setCurrentImageUrl(base64Image);
+      setCurrentImageBase64(base64Image);
+      setHasCroppedImage(true);
 
       const metadataValidation = await validateImageFromDataUrl(base64Image);
       if (!metadataValidation.isValid) {
@@ -688,10 +764,14 @@ export function useSimilarProducts(product: Product) {
         return;
       }
 
-      if (hasUploadedImage) {
-        await fetchSimilarProductsByBase64(base64Image);
+      if (hasUploadedImageRef.current) {
+        await fetchSimilarProductsByBase64(
+          base64Image,
+          searchTextRef.current,
+          false
+        );
       } else {
-        await fetchSimilarProductsByImageCrop(base64Image);
+        await fetchSimilarProductsByImageCrop(base64Image, true);
       }
     } catch (error) {
       setFileError(t('common.similar_products.errors.crop_processing_error'));
@@ -874,6 +954,19 @@ export function useSimilarProducts(product: Product) {
     setFileError('');
   }, []);
 
+  const clearResults = useCallback(() => {
+    setSearchResults(null);
+    setResultsKey(0);
+    setLastProductIds([]);
+    setAllLoadedProducts([]);
+    setLoadedPages(new Set([1]));
+  }, []);
+
+  const resetCropState = useCallback(() => {
+    setHasCroppedImage(false);
+    setCurrentImageBase64('');
+  }, []);
+
   const clearFileInput = useCallback(
     (fileInputRef: React.RefObject<HTMLInputElement>) => {
       if (fileInputRef.current) {
@@ -883,6 +976,55 @@ export function useSimilarProducts(product: Product) {
     []
   );
 
+  const handleTextSearch = useCallback(async () => {
+    const textToUse = searchTextRef.current || searchText;
+
+    if (hasCroppedImage && currentImageBase64) {
+      await fetchSimilarProductsByBase64(
+        currentImageBase64,
+        textToUse,
+        !hasUploadedImage
+      );
+    } else if (hasUploadedImage && currentImageUrl) {
+      await fetchSimilarProductsByBase64(currentImageUrl, textToUse, false);
+    } else if (currentImageUrl) {
+      await fetchSimilarProductsByImageUrl(currentImageUrl, textToUse);
+    }
+  }, [
+    searchText,
+    searchTextRef,
+    currentImageUrl,
+    currentImageBase64,
+    hasCroppedImage,
+    hasUploadedImage,
+    fetchSimilarProductsByImageUrl,
+    fetchSimilarProductsByBase64
+  ]);
+
+  const handleClearText = useCallback(async () => {
+    setSearchTextWithRef('');
+
+    if (hasCroppedImage && currentImageBase64) {
+      await fetchSimilarProductsByBase64(
+        currentImageBase64,
+        '',
+        !hasUploadedImage
+      );
+    } else if (hasUploadedImage && currentImageUrl) {
+      await fetchSimilarProductsByBase64(currentImageUrl, '', false);
+    } else if (currentImageUrl) {
+      await fetchSimilarProductsByImageUrl(currentImageUrl, '');
+    }
+  }, [
+    hasCroppedImage,
+    currentImageBase64,
+    currentImageUrl,
+    hasUploadedImage,
+    fetchSimilarProductsByBase64,
+    fetchSimilarProductsByImageUrl,
+    setSearchTextWithRef
+  ]);
+
   const handleLoadMore = async () => {
     if (!searchResults?.pagination || isLoading) return;
 
@@ -923,6 +1065,8 @@ export function useSimilarProducts(product: Product) {
     setCurrentImageUrl,
     isLoading,
     fileError,
+    searchText,
+    setSearchText: setSearchTextWithRef,
     searchResults,
     resultsKey,
     hasUploadedImage,
@@ -940,6 +1084,10 @@ export function useSimilarProducts(product: Product) {
     loadedPages: Array.from(loadedPages),
     allLoadedProducts,
     clearError,
-    clearFileInput
+    clearResults,
+    clearFileInput,
+    handleTextSearch,
+    handleClearText,
+    resetCropState
   };
 }

package/src/hooks/use-text-search-feature.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+
+const TEXT_SEARCH_STORAGE_KEY = 'enable_image_search_text';
+
+interface UseTextSearchFeatureProps {
+  enableTextSearch?: boolean;
+}
+
+export function useTextSearchFeature(props?: UseTextSearchFeatureProps) {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const envEnabled = process.env.NEXT_PUBLIC_ENABLE_TEXT_SEARCH === 'true';
+
+    if (envEnabled) {
+      setIsEnabled(true);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const localStorageValue = localStorage.getItem(TEXT_SEARCH_STORAGE_KEY);
+
+      if (localStorageValue === 'true') {
+        setIsEnabled(true);
+      } else {
+        setIsEnabled(!!props?.enableTextSearch);
+      }
+    } catch (error) {
+      setIsEnabled(false);
+    }
+
+    setIsLoading(false);
+  }, [props?.enableTextSearch]);
+
+  return {
+    isEnabled,
+    isLoading
+  };
+}

package/src/types/index.ts

@@ -58,6 +58,10 @@ export interface SimilarProductsModalProps {
   showResetButton?: boolean;
   settings?: any;
   className?: string;
+  searchText?: string;
+  setSearchText?: (text: string) => void;
+  handleTextSearch?: () => void;
+  handleClearText?: () => void;
 }
 
 export interface FilterSidebarProps {
@@ -67,6 +71,8 @@ export interface FilterSidebarProps {
   isLoading: boolean;
   handleFacetChange: (facetKey: string, choiceValue: string | number) => void;
   removeFacetFilter: (facetKey: string, choiceValue: string | number) => void;
+  searchText?: string;
+  setSearchText?: (text: string) => void;
   currentImageUrl: string;
   isCropping: boolean;
   imageRef: React.RefObject<HTMLImageElement>;
@@ -126,6 +132,8 @@ export interface CustomRendererProps {
       onSortChange: (value: string) => void;
       onFilterMenuToggle: () => void;
       isLoading: boolean;
+      searchText?: string;
+      setSearchText?: (text: string) => void;
     }) => React.ReactNode;
     renderSortDropdown?: (props: {
       sorters: SortOption[];
@@ -141,6 +149,17 @@ export interface CustomRendererProps {
       onClick: () => void;
       isLoading: boolean;
     }) => React.ReactNode;
+    renderModalSearchInput?: (props: {
+      searchText: string;
+      setSearchText: (text: string) => void;
+      isLoading: boolean;
+      placeholder: string;
+      onSearch?: () => void;
+    }) => React.ReactNode;
+    renderSearchIcon?: (props: {
+      disabled: boolean;
+      onClick?: () => void;
+    }) => React.ReactNode;
     renderEmptyState?: () => React.ReactNode;
   };
   filterSidebar?: {
@@ -219,6 +238,12 @@ export interface CustomRendererProps {
       onClearAll: () => void;
       isLoading: boolean;
     }) => React.ReactNode;
+    renderTextSearch?: (props: {
+      searchText: string;
+      setSearchText: (text: string) => void;
+      isLoading: boolean;
+      placeholder: string;
+    }) => React.ReactNode;
   };
   resultsGrid?: {
     renderGrid?: (props: ResultsGridProps) => React.ReactNode;
@@ -309,6 +334,7 @@ export interface SimilarProductsSettings {
   resultsPerPage?: number;
   enableCropping?: boolean;
   enableFileUpload?: boolean;
+  enableTextSearch?: boolean;
   paginationType?: 'pagination' | 'load-more' | 'infinite-scroll';
   loadMoreText?: string;
   loadMoreStyle?: 'button' | 'auto';
@@ -329,10 +355,22 @@ export interface SimilarProductsSettings {
     controlsContainer?: string;
     controlsInner?: string;
     controlsLeft?: string;
+    controlsCenter?: string;
     controlsRight?: string;
     itemCount?: string;
     sortDropdown?: string;
     filterToggleButton?: string;
+    modalSearchInput?: string;
+    modalSearchContainer?: string;
+    modalSearchButton?: string;
+    modalSearchIcon?: string;
+    modalSearchClearButton?: string;
+    modalSearchClearIcon?: string;
+    searchButtonIcon?: string;
+    modalCloseIcon?: string;
+    filterIcon?: string;
+    filterRemoveIcon?: string;
+    imageSearchButtonIcon?: string;
 
     filterSidebarMobileHeader?: string;
     filterSidebarMobileTitle?: string;
@@ -357,6 +395,19 @@ export interface SimilarProductsSettings {
     errorMessage?: string;
     cropControls?: string;
 
+    // Detailed crop styling
+    cropComponent?: string;
+    cropImage?: string;
+    cropImageActive?: string;
+    cropOverlay?: string;
+    cropSelection?: string;
+    cropSelectionBorder?: string;
+    cropImageNonCropping?: string;
+    cropImageContainer?: string;
+    cropImageWrapper?: string;
+    cropOverlayBackground?: string;
+    cropSelectionHighlight?: string;
+
     resultsContainer?: string;
     gridContainer?: string;
     productItem?: string;
@@ -401,6 +452,19 @@ export interface SimilarProductsSettings {
     mobileActiveFilterTag?: string;
     mobileClearAllButton?: string;
     filterSidebarMobileOverlay?: string;
+    
+    textSearchContainer?: string;
+    textSearchLabel?: string;
+    textSearchInput?: string;
+  };
+  iconNames?: {
+    searchButton?: string;
+    modalClose?: string;
+    filter?: string;
+    filterRemove?: string;
+    modalSearch?: string;
+    modalSearchClear?: string;
+    imageSearchButton?: string;
   };
   customRenderers?: {
     Modal?: React.ComponentType<SimilarProductsModalProps>;

package/src/utils/index.ts

@@ -7,6 +7,7 @@ export const defaultSettings: Required<SimilarProductsSettings> = {
   resultsPerPage: 20,
   enableCropping: true,
   enableFileUpload: true,
+  enableTextSearch: false,
   customStyles: {
     modal: '',
     filterSidebar: '',
@@ -15,7 +16,31 @@ export const defaultSettings: Required<SimilarProductsSettings> = {
     productItem: '',
     pagination: '',
     filterGroup: '',
-    imageSection: ''
+    imageSection: '',
+    textSearchContainer: '',
+    textSearchLabel: '',
+    textSearchInput: '',
+    controlsCenter: '',
+    modalSearchInput: '',
+    modalSearchContainer: '',
+    modalSearchButton: '',
+    modalSearchIcon: '',
+    modalSearchClearButton: '',
+    modalSearchClearIcon: '',
+    searchButtonIcon: '',
+    modalCloseIcon: '',
+    filterIcon: '',
+    filterRemoveIcon: '',
+    imageSearchButtonIcon: ''
+  },
+  iconNames: {
+    searchButton: 'search',
+    modalClose: 'close',
+    filter: 'filter',
+    filterRemove: 'close',
+    modalSearch: 'search',
+    modalSearchClear: 'close',
+    imageSearchButton: 'search'
   },
   customRenderers: {
     render: {}
@@ -43,6 +68,10 @@ export function mergeSettings(
       ...defaultSettings.customStyles,
       ...userSettings.customStyles
     },
+    iconNames: {
+      ...defaultSettings.iconNames,
+      ...userSettings.iconNames
+    },
     customRenderers: {
       ...defaultSettings.customRenderers,
       ...userSettings.customRenderers,
@@ -100,13 +129,19 @@ export function validateImageFile(
 export function debounce<T extends (...args: any[]) => any>(
   func: T,
   wait: number
-): (...args: Parameters<T>) => void {
+): ((...args: Parameters<T>) => void) & { cancel: () => void } {
   let timeout: NodeJS.Timeout;
 
-  return (...args: Parameters<T>) => {
+  const debounced = (...args: Parameters<T>) => {
     clearTimeout(timeout);
     timeout = setTimeout(() => func(...args), wait);
   };
+
+  debounced.cancel = () => {
+    clearTimeout(timeout);
+  };
+
+  return debounced as ((...args: Parameters<T>) => void) & { cancel: () => void };
 }
 
 export function dataURLToBlob(dataURL: string): Blob {