@akinon/pz-similar-products 1.113.0-snapshot-ZERO-3878-20251204105428 → 1.114.0-rc.21

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Product } from '@akinon/next/types';
 import {
   useLazyGetSimilarProductsByUrlQuery,
@@ -13,7 +13,6 @@ import {
   validateImageFromDataUrl,
   type ImageValidationResult
 } from '../utils/image-validation';
-import { debounce } from '../utils';
 
 type SearchResults = SimilarProductsListResponse;
 
@@ -25,7 +24,6 @@ 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
   );
@@ -35,16 +33,6 @@ 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();
@@ -438,24 +426,17 @@ export function useSimilarProducts(product: Product) {
   );
 
   const fetchSimilarProductsByImageUrl = useCallback(
-    async (imageUrl: string, overrideText?: string) => {
+    async (imageUrl: string) => {
       setFileError('');
-
       try {
         const productPk = product?.pk;
         const excludedIds = productPk ? [productPk] : undefined;
 
-        const textToUse =
-          overrideText !== undefined ? overrideText : searchTextRef.current;
-
-        const requestParams = {
+        const result = await fetchSimilarProductsByUrl({
           url: imageUrl,
           limit: 20,
-          excluded_product_ids: excludedIds,
-          text: textToUse || undefined
-        };
-
-        const result = await fetchSimilarProductsByUrl(requestParams).unwrap();
+          excluded_product_ids: excludedIds
+        }).unwrap();
 
         await handleSearchResults(result);
         return result;
@@ -469,8 +450,6 @@ export function useSimilarProducts(product: Product) {
     [
       fetchSimilarProductsByUrl,
       product?.pk,
-      searchText,
-      searchTextRef,
       handleSearchResults,
       updateResultsAndKey,
       createEmptySearchResults,
@@ -483,62 +462,31 @@ 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,
-      overrideText?: string,
-      forceExclude?: boolean
-    ) => {
+    async (base64Image: string) => {
       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(requestData).unwrap(),
+        async () =>
+          getSimilarProductsByImage({
+            image: base64Data,
+            limit: 20
+          }).unwrap(),
         base64Image,
         'Image search'
       );
     },
-    [
-      getSimilarProductsByImage,
-      searchText,
-      searchTextRef,
-      handleImageSearch,
-      hasUploadedImage,
-      product?.pk
-    ]
+    [getSimilarProductsByImage, handleImageSearch]
   );
 
   const fetchSimilarProductsByImageCrop = useCallback(
-    async (dataString: string, excludeCurrentProduct: boolean = true) => {
+    async (dataString: string) => {
       setFileError('');
-
-      setCurrentImageBase64(dataString);
-      setHasCroppedImage(true);
       if (dataString.startsWith('data:application/x-cors-fallback;base64,')) {
         try {
           const fallbackDataEncoded = dataString.replace(
@@ -601,12 +549,9 @@ export function useSimilarProducts(product: Product) {
                           getSimilarProductsByImage({
                             image: base64Data,
                             limit: 20,
-                            excluded_product_ids: excludeCurrentProduct
-                              ? product?.pk
-                                ? [product.pk]
-                                : undefined
-                              : undefined,
-                            text: searchTextRef.current || undefined
+                            excluded_product_ids: product?.pk
+                              ? [product.pk]
+                              : undefined
                           }).unwrap(),
                         croppedBase64,
                         'Proxy crop search'
@@ -656,12 +601,7 @@ export function useSimilarProducts(product: Product) {
           getSimilarProductsByImage({
             image: base64Data,
             limit: 20,
-            excluded_product_ids: excludeCurrentProduct
-              ? product?.pk
-                ? [product.pk]
-                : undefined
-              : undefined,
-            text: searchTextRef.current || undefined
+            excluded_product_ids: product?.pk ? [product.pk] : undefined
           }).unwrap(),
         dataString,
         'Image crop search'
@@ -669,14 +609,11 @@ export function useSimilarProducts(product: Product) {
     },
     [
       getSimilarProductsByImage,
-      searchText,
-      searchTextRef,
       handleImageSearch,
       product,
       fetchSimilarProductsByImageUrl,
       setFileError,
-      t,
-      hasUploadedImage
+      t
     ]
   );
 
@@ -687,8 +624,6 @@ export function useSimilarProducts(product: Product) {
     const file = event.target.files?.[0];
     if (!file) return;
 
-    setSearchTextWithRef('');
-
     try {
       let processedFile = file;
 
@@ -715,9 +650,6 @@ 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) {
@@ -726,7 +658,7 @@ export function useSimilarProducts(product: Product) {
           );
           return;
         }
-        fetchSimilarProductsByBase64(dataUrl, undefined, false);
+        fetchSimilarProductsByBase64(dataUrl);
       };
 
       reader.onerror = () =>
@@ -747,8 +679,6 @@ export function useSimilarProducts(product: Product) {
 
     try {
       setCurrentImageUrl(base64Image);
-      setCurrentImageBase64(base64Image);
-      setHasCroppedImage(true);
 
       const metadataValidation = await validateImageFromDataUrl(base64Image);
       if (!metadataValidation.isValid) {
@@ -758,14 +688,10 @@ export function useSimilarProducts(product: Product) {
         return;
       }
 
-      if (hasUploadedImageRef.current) {
-        await fetchSimilarProductsByBase64(
-          base64Image,
-          searchTextRef.current,
-          false
-        );
+      if (hasUploadedImage) {
+        await fetchSimilarProductsByBase64(base64Image);
       } else {
-        await fetchSimilarProductsByImageCrop(base64Image, true);
+        await fetchSimilarProductsByImageCrop(base64Image);
       }
     } catch (error) {
       setFileError(t('common.similar_products.errors.crop_processing_error'));
@@ -956,11 +882,6 @@ 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) {
@@ -970,47 +891,6 @@ 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;
 
@@ -1051,8 +931,6 @@ export function useSimilarProducts(product: Product) {
     setCurrentImageUrl,
     isLoading,
     fileError,
-    searchText,
-    setSearchText: setSearchTextWithRef,
     searchResults,
     resultsKey,
     hasUploadedImage,
@@ -1071,9 +949,6 @@ export function useSimilarProducts(product: Product) {
     allLoadedProducts,
     clearError,
     clearResults,
-    clearFileInput,
-    handleTextSearch,
-    handleClearText,
-    resetCropState
+    clearFileInput
   };
 }

package/src/types/index.ts

@@ -58,10 +58,6 @@ export interface SimilarProductsModalProps {
   showResetButton?: boolean;
   settings?: any;
   className?: string;
-  searchText?: string;
-  setSearchText?: (text: string) => void;
-  handleTextSearch?: () => void;
-  handleClearText?: () => void;
 }
 
 export interface FilterSidebarProps {
@@ -71,8 +67,6 @@ 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>;
@@ -132,8 +126,6 @@ export interface CustomRendererProps {
       onSortChange: (value: string) => void;
       onFilterMenuToggle: () => void;
       isLoading: boolean;
-      searchText?: string;
-      setSearchText?: (text: string) => void;
     }) => React.ReactNode;
     renderSortDropdown?: (props: {
       sorters: SortOption[];
@@ -149,17 +141,6 @@ 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?: {
@@ -238,12 +219,6 @@ 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;
@@ -334,7 +309,6 @@ export interface SimilarProductsSettings {
   resultsPerPage?: number;
   enableCropping?: boolean;
   enableFileUpload?: boolean;
-  enableTextSearch?: boolean;
   paginationType?: 'pagination' | 'load-more' | 'infinite-scroll';
   loadMoreText?: string;
   loadMoreStyle?: 'button' | 'auto';
@@ -355,22 +329,10 @@ 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;
@@ -452,19 +414,6 @@ 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,7 +7,6 @@ export const defaultSettings: Required<SimilarProductsSettings> = {
   resultsPerPage: 20,
   enableCropping: true,
   enableFileUpload: true,
-  enableTextSearch: false,
   customStyles: {
     modal: '',
     filterSidebar: '',
@@ -16,31 +15,7 @@ export const defaultSettings: Required<SimilarProductsSettings> = {
     productItem: '',
     pagination: '',
     filterGroup: '',
-    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'
+    imageSection: ''
   },
   customRenderers: {
     render: {}
@@ -68,10 +43,6 @@ export function mergeSettings(
       ...defaultSettings.customStyles,
       ...userSettings.customStyles
     },
-    iconNames: {
-      ...defaultSettings.iconNames,
-      ...userSettings.iconNames
-    },
     customRenderers: {
       ...defaultSettings.customRenderers,
       ...userSettings.customRenderers,
@@ -129,19 +100,13 @@ export function validateImageFile(
 export function debounce<T extends (...args: any[]) => any>(
   func: T,
   wait: number
-): ((...args: Parameters<T>) => void) & { cancel: () => void } {
+): (...args: Parameters<T>) => void {
   let timeout: NodeJS.Timeout;
 
-  const debounced = (...args: Parameters<T>) => {
+  return (...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,8 +5,7 @@ import {
   Button,
   Icon,
   Accordion,
-  LoaderSpinner,
-  Input
+  LoaderSpinner
 } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { FilterSidebarProps } from '../types';
@@ -56,8 +55,6 @@ export function SimilarProductsFilterSidebar({
   isLoading,
   handleFacetChange,
   removeFacetFilter,
-  searchText,
-  setSearchText,
   currentImageUrl,
   isCropping,
   imageRef,
@@ -169,19 +166,6 @@ 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 && (
@@ -238,11 +222,7 @@ export function SimilarProductsFilterSidebar({
                     settings?.customStyles?.filterSidebarMobileCloseButton
                   )}
                 >
-                  <Icon
-                    name={modalCloseIconName}
-                    size={16}
-                    className={modalCloseIconClassName}
-                  />
+                  <Icon name="close" size={16} />
                 </Button>
               </div>
               <div
@@ -948,11 +928,7 @@ 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={filterRemoveIconName}
-                          size={10}
-                          className={filterRemoveIconClassName}
-                        />
+                        <Icon name="close" size={10} />
                       </Button>
                     </div>
                   ))}

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

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useRef } 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';
 
@@ -9,25 +10,27 @@ interface HeaderImageSearchFeatureProps {
   className?: string;
   isEnabled?: boolean;
   settings?: any;
-  enableTextSearch?: boolean;
 }
 
 export function HeaderImageSearchFeature({
   className,
-  isEnabled = false,
-  settings: userSettings,
-  enableTextSearch = false
+  isEnabled: isEnabledProp,
+  settings
 }: 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);
 
-  const settings = {
-    ...userSettings,
-    enableTextSearch
-  };
-
-  if (!isEnabled) {
+  if (isLoading || !finalIsEnabled) {
     return null;
   }
 
@@ -52,23 +55,26 @@ export function HeaderImageSearchFeature({
 
   return (
     <>
-      <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}
-      />
+      {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}
+          />
+        </>
+      )}
     </>
   );
 }