@akinon/pz-similar-products 1.113.0-rc.19 → 1.113.0-snapshot-ZERO-3878-20251203130841

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,6 +13,7 @@ import {
   validateImageFromDataUrl,
   type ImageValidationResult
 } from '../utils/image-validation';
+import { debounce } from '../utils';
 
 type SearchResults = SimilarProductsListResponse;
 
@@ -24,6 +25,7 @@ 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();
@@ -426,17 +438,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 +469,8 @@ export function useSimilarProducts(product: Product) {
     [
       fetchSimilarProductsByUrl,
       product?.pk,
+      searchText,
+      searchTextRef,
       handleSearchResults,
       updateResultsAndKey,
       createEmptySearchResults,
@@ -462,31 +483,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 +601,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 +656,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 +669,14 @@ export function useSimilarProducts(product: Product) {
     },
     [
       getSimilarProductsByImage,
+      searchText,
+      searchTextRef,
       handleImageSearch,
       product,
       fetchSimilarProductsByImageUrl,
       setFileError,
-      t
+      t,
+      hasUploadedImage
     ]
   );
 
@@ -624,6 +687,8 @@ export function useSimilarProducts(product: Product) {
     const file = event.target.files?.[0];
     if (!file) return;
 
+    setSearchTextWithRef('');
+
     try {
       let processedFile = file;
 
@@ -650,6 +715,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 +726,7 @@ export function useSimilarProducts(product: Product) {
           );
           return;
         }
-        fetchSimilarProductsByBase64(dataUrl);
+        fetchSimilarProductsByBase64(dataUrl, undefined, false);
       };
 
       reader.onerror = () =>
@@ -679,6 +747,8 @@ export function useSimilarProducts(product: Product) {
 
     try {
       setCurrentImageUrl(base64Image);
+      setCurrentImageBase64(base64Image);
+      setHasCroppedImage(true);
 
       const metadataValidation = await validateImageFromDataUrl(base64Image);
       if (!metadataValidation.isValid) {
@@ -688,10 +758,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'));
@@ -882,6 +956,11 @@ export function useSimilarProducts(product: Product) {
     setLoadedPages(new Set([1]));
   }, []);
 
+  const resetCropState = useCallback(() => {
+    setHasCroppedImage(false);
+    setCurrentImageBase64('');
+  }, []);
+
   const clearFileInput = useCallback(
     (fileInputRef: React.RefObject<HTMLInputElement>) => {
       if (fileInputRef.current) {
@@ -891,6 +970,47 @@ 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;
 
@@ -931,6 +1051,8 @@ export function useSimilarProducts(product: Product) {
     setCurrentImageUrl,
     isLoading,
     fileError,
+    searchText,
+    setSearchText: setSearchTextWithRef,
     searchResults,
     resultsKey,
     hasUploadedImage,
@@ -949,6 +1071,9 @@ export function useSimilarProducts(product: Product) {
     allLoadedProducts,
     clearError,
     clearResults,
-    clearFileInput
+    clearFileInput,
+    handleTextSearch,
+    handleClearText,
+    resetCropState
   };
 }

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;
@@ -414,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 {

package/src/views/filters.tsx

@@ -5,7 +5,8 @@ import {
   Button,
   Icon,
   Accordion,
-  LoaderSpinner
+  LoaderSpinner,
+  Input
 } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { FilterSidebarProps } from '../types';
@@ -55,6 +56,8 @@ export function SimilarProductsFilterSidebar({
   isLoading,
   handleFacetChange,
   removeFacetFilter,
+  searchText,
+  setSearchText,
   currentImageUrl,
   isCropping,
   imageRef,
@@ -166,6 +169,19 @@ export function SimilarProductsFilterSidebar({
     className
   );
 
+  const modalCloseIconClassName = twMerge(
+    '',
+    settings?.customStyles?.modalCloseIcon
+  );
+
+  const filterRemoveIconClassName = twMerge(
+    '',
+    settings?.customStyles?.filterRemoveIcon
+  );
+
+  const modalCloseIconName = settings?.iconNames?.modalClose || 'close';
+  const filterRemoveIconName = settings?.iconNames?.filterRemove || 'close';
+
   return (
     <>
       {isFilterMenuOpen && (
@@ -222,7 +238,11 @@ export function SimilarProductsFilterSidebar({
                     settings?.customStyles?.filterSidebarMobileCloseButton
                   )}
                 >
-                  <Icon name="close" size={16} />
+                  <Icon
+                    name={modalCloseIconName}
+                    size={16}
+                    className={modalCloseIconClassName}
+                  />
                 </Button>
               </div>
               <div
@@ -928,7 +948,11 @@ export function SimilarProductsFilterSidebar({
                         disabled={isLoading}
                         className="hover:bg-gray-200 rounded-full p-0 w-5 h-5 disabled:opacity-50 disabled:cursor-not-allowed ml-1"
                       >
-                        <Icon name="close" size={10} />
+                        <Icon
+                          name={filterRemoveIconName}
+                          size={10}
+                          className={filterRemoveIconClassName}
+                        />
                       </Button>
                     </div>
                   ))}

package/src/views/header-image-search-feature.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { Product } from '@akinon/next/types';
-import { useImageSearchFeature } from '../hooks/use-image-search-feature';
 import { ImageSearchButton } from './image-search-button';
 import { SimilarProductsPlugin } from './main';
 
@@ -10,27 +9,25 @@ interface HeaderImageSearchFeatureProps {
   className?: string;
   isEnabled?: boolean;
   settings?: any;
+  enableTextSearch?: boolean;
 }
 
 export function HeaderImageSearchFeature({
   className,
-  isEnabled: isEnabledProp,
-  settings
+  isEnabled = false,
+  settings: userSettings,
+  enableTextSearch = false
 }: HeaderImageSearchFeatureProps) {
-  const { isEnabled: hookIsEnabled, isLoading } = useImageSearchFeature();
-
-  const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
-  const finalIsEnabled = envEnabled
-    ? true
-    : isEnabledProp !== undefined
-    ? isEnabledProp
-    : hookIsEnabled;
-
   const [isImageSearchModalOpen, setIsImageSearchModalOpen] = useState(false);
   const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
   const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
 
-  if (isLoading || !finalIsEnabled) {
+  const settings = {
+    ...userSettings,
+    enableTextSearch
+  };
+
+  if (!isEnabled) {
     return null;
   }
 
@@ -55,26 +52,23 @@ export function HeaderImageSearchFeature({
 
   return (
     <>
-      {finalIsEnabled && (
-        <>
-          <ImageSearchButton
-            onClick={handleOpenImageSearch}
-            className={className}
-          />
-          <SimilarProductsPlugin
-            product={{} as Product}
-            isOpen={isResultsModalOpen}
-            onClose={handleResultsModalClose}
-            activeIndex={0}
-            showImageSearchModal={isImageSearchModalOpen}
-            onImageSearchModalClose={handleImageSearchModalClose}
-            uploadedImageFile={uploadedImageFile}
-            onImageUpload={handleImageUpload}
-            showResetButton={false}
-            settings={settings}
-          />
-        </>
-      )}
+      <ImageSearchButton
+        onClick={handleOpenImageSearch}
+        className={className}
+        settings={settings}
+      />
+      <SimilarProductsPlugin
+        product={{} as Product}
+        isOpen={isResultsModalOpen}
+        onClose={handleResultsModalClose}
+        activeIndex={0}
+        showImageSearchModal={isImageSearchModalOpen}
+        onImageSearchModalClose={handleImageSearchModalClose}
+        uploadedImageFile={uploadedImageFile}
+        onImageUpload={handleImageUpload}
+        showResetButton={false}
+        settings={settings}
+      />
     </>
   );
 }