@akinon/pz-similar-products 1.107.0-rc.86 → 1.108.0-rc.10

package/src/data/endpoints.ts

@@ -27,14 +27,9 @@ export const similarProductsApi = api.injectEndpoints({
   endpoints: (build) => ({
     getSimilarProductsByUrl: build.query<
       SimilarProductsResponse,
-      {
-        url: string;
-        limit?: number;
-        excluded_product_ids?: number[];
-        text?: string;
-      }
+      { url: string; limit?: number; excluded_product_ids?: number[] }
     >({
-      query: ({ url, limit = 20, excluded_product_ids, text }) => {
+      query: ({ url, limit = 20, excluded_product_ids }) => {
         const params = new URLSearchParams();
         params.append('limit', String(limit));
         params.append('url', url);
@@ -43,10 +38,6 @@ export const similarProductsApi = api.injectEndpoints({
           params.append('excluded_product_ids', excluded_product_ids.join(','));
         }
 
-        if (text) {
-          params.append('text', text);
-        }
-
         return {
           url: `/api/similar-products?${params.toString()}`,
           method: 'GET',
@@ -59,22 +50,12 @@ export const similarProductsApi = api.injectEndpoints({
 
     getSimilarProductsByImage: build.mutation<
       SimilarProductsResponse,
-      {
-        image: string;
-        limit?: number;
-        excluded_product_ids?: number[];
-        text?: string;
-      }
+      { image: string; limit?: number; excluded_product_ids?: number[] }
     >({
-      query: ({ image, limit = 20, excluded_product_ids, text }) => {
+      query: ({ image, limit = 20, excluded_product_ids }) => {
         const params = new URLSearchParams();
         params.append('limit', String(limit));
 
-        const bodyData: any = { image, excluded_product_ids };
-        if (text) {
-          bodyData.text = text;
-        }
-
         return {
           url: `/api/similar-products?${params.toString()}`,
           method: 'POST',
@@ -82,7 +63,7 @@ export const similarProductsApi = api.injectEndpoints({
             'Content-Type': 'application/json',
             Accept: 'application/json'
           },
-          body: JSON.stringify(bodyData)
+          body: JSON.stringify({ image, excluded_product_ids })
         };
       }
     }),
@@ -91,21 +72,12 @@ export const similarProductsApi = api.injectEndpoints({
       SimilarProductsListResponse,
       {
         filter: string;
-        searchParams?: Record<string, string | string[]>;
+        searchParams?: Record<string, string>;
         isExclude?: boolean;
       }
     >({
       query: ({ filter, searchParams = {}, isExclude = false }) => {
-        const params = new URLSearchParams();
-
-        Object.entries(searchParams).forEach(([key, value]) => {
-          if (Array.isArray(value)) {
-            value.forEach((v) => params.append(key, v));
-          } else {
-            params.append(key, value);
-          }
-        });
-
+        const params = new URLSearchParams(searchParams);
         const queryString = params.toString();
 
         const headerName = isExclude
@@ -126,7 +98,7 @@ export const similarProductsApi = api.injectEndpoints({
           .reduce((acc, key) => {
             acc[key] = searchParams[key];
             return acc;
-          }, {} as Record<string, string | string[]>);
+          }, {} as Record<string, string>);
 
         return JSON.stringify({
           filter,
@@ -147,4 +119,4 @@ export const {
   useLazyGetSimilarProductsListQuery
 } = similarProductsApi;
 
-export type { Product, Facet, FacetChoice, SortOption, Pagination };
+export type { Product, Facet, FacetChoice, SortOption, Pagination };

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
 export { useSimilarProducts } from './use-similar-products';
 export { useImageCropper } from './use-image-cropper';
 export { useImageSearchFeature } from './use-image-search-feature';
-export { useTextSearchFeature } from './use-text-search-feature';

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,19 +13,17 @@ import {
   validateImageFromDataUrl,
   type ImageValidationResult
 } from '../utils/image-validation';
-import { debounce } from '../utils';
 
 type SearchResults = SimilarProductsListResponse;
 
 interface SearchParams {
-  [key: string]: string | string[];
+  [key: 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
   );
@@ -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();
@@ -115,7 +103,7 @@ export function useSimilarProducts(product: Product) {
               String(choice.value)
             );
             const searchKey = String(facet.search_key || facet.key);
-            searchParams[searchKey] = values.length === 1 ? values[0] : values;
+            searchParams[searchKey] = values.join(',');
           }
         });
       }
@@ -350,9 +338,7 @@ export function useSimilarProducts(product: Product) {
       const productIds = extractProductIds(data);
 
       if (productIds.length > 0) {
-        const searchParams = buildSearchParams(searchResults?.facets);
-
-        const result = await executeProductSearch(productIds, searchParams);
+        const result = await executeProductSearch(productIds);
         if (result) {
           const resultWithCorrectSorterState = {
             ...result,
@@ -371,11 +357,7 @@ export function useSimilarProducts(product: Product) {
       executeProductSearch,
       updateSorterState,
       updateResultsAndKey,
-      createEmptySearchResults,
-      searchText,
-      searchTextRef,
-      buildSearchParams,
-      searchResults
+      createEmptySearchResults
     ]
   );
 
@@ -444,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;
@@ -475,8 +450,6 @@ export function useSimilarProducts(product: Product) {
     [
       fetchSimilarProductsByUrl,
       product?.pk,
-      searchText,
-      searchTextRef,
       handleSearchResults,
       updateResultsAndKey,
       createEmptySearchResults,
@@ -489,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(
@@ -607,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'
@@ -662,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'
@@ -675,14 +609,11 @@ export function useSimilarProducts(product: Product) {
     },
     [
       getSimilarProductsByImage,
-      searchText,
-      searchTextRef,
       handleImageSearch,
       product,
       fetchSimilarProductsByImageUrl,
       setFileError,
-      t,
-      hasUploadedImage
+      t
     ]
   );
 
@@ -693,8 +624,6 @@ export function useSimilarProducts(product: Product) {
     const file = event.target.files?.[0];
     if (!file) return;
 
-    setSearchTextWithRef('');
-
     try {
       let processedFile = file;
 
@@ -721,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) {
@@ -732,7 +658,7 @@ export function useSimilarProducts(product: Product) {
           );
           return;
         }
-        fetchSimilarProductsByBase64(dataUrl, undefined, false);
+        fetchSimilarProductsByBase64(dataUrl);
       };
 
       reader.onerror = () =>
@@ -753,8 +679,6 @@ export function useSimilarProducts(product: Product) {
 
     try {
       setCurrentImageUrl(base64Image);
-      setCurrentImageBase64(base64Image);
-      setHasCroppedImage(true);
 
       const metadataValidation = await validateImageFromDataUrl(base64Image);
       if (!metadataValidation.isValid) {
@@ -764,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'));
@@ -962,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) {
@@ -976,55 +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;
 
@@ -1065,8 +931,6 @@ export function useSimilarProducts(product: Product) {
     setCurrentImageUrl,
     isLoading,
     fileError,
-    searchText,
-    setSearchText: setSearchTextWithRef,
     searchResults,
     resultsKey,
     hasUploadedImage,
@@ -1085,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 {