@akinon/pz-similar-products 1.92.0-rc.37 → 1.92.0-rc.39

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/pz-similar-products
 
+## 1.92.0-rc.39
+
+### Minor Changes
+
+- 174bf3a: ZERO-3533: Refactor similar products API endpoints to support array search parameters and improve query handling
+
+## 1.92.0-rc.38
+
 ## 1.92.0-rc.37
 
 ## 1.92.0-rc.36

package/README.md

@@ -92,13 +92,13 @@ Change which icons are displayed by specifying different icon names:
 ```tsx
 const iconCustomization = {
   iconNames: {
-    searchButton: 'magnifier',     // Search button (default: 'search')
-    modalClose: 'x',               // Modal close buttons (default: 'close') 
-    filter: 'funnel',              // Filter button (default: 'filter')
-    filterRemove: 'trash',         // Filter tag remove buttons (default: 'close')
+    searchButton: 'magnifier', // Search button (default: 'search')
+    modalClose: 'x', // Modal close buttons (default: 'close')
+    filter: 'funnel', // Filter button (default: 'filter')
+    filterRemove: 'trash', // Filter tag remove buttons (default: 'close')
     modalSearch: 'search-outline', // Modal search button (default: 'search')
-    modalSearchClear: 'clear',     // Search input clear button (default: 'close')
-    imageSearchButton: 'upload'    // Image search button (default: 'search')
+    modalSearchClear: 'clear', // Search input clear button (default: 'close')
+    imageSearchButton: 'upload' // Image search button (default: 'search')
   }
 };
 ```
@@ -133,13 +133,15 @@ const completeIconSettings = {
     modalSearchClear: 'clear-alt',
     imageSearchButton: 'upload-cloud'
   },
-  
+
   // Style the icons
   customStyles: {
-    searchButtonIcon: 'fill-indigo-500 hover:fill-indigo-600 transition-all duration-200',
+    searchButtonIcon:
+      'fill-indigo-500 hover:fill-indigo-600 transition-all duration-200',
     modalCloseIcon: 'text-gray-500 hover:text-gray-700 w-5 h-5',
     filterIcon: 'text-blue-500 hover:text-blue-600 w-4 h-4',
-    filterRemoveIcon: 'text-red-400 hover:text-red-600 w-3 h-3 transition-colors',
+    filterRemoveIcon:
+      'text-red-400 hover:text-red-600 w-3 h-3 transition-colors',
     modalSearchIcon: 'text-green-500 hover:text-green-600',
     modalSearchClearIcon: 'text-gray-400 hover:text-gray-600',
     imageSearchButtonIcon: 'text-indigo-500 hover:text-indigo-600 w-5 h-5'
@@ -154,7 +156,7 @@ const completeIconSettings = {
     activeIndex,
     settings: completeIconSettings
   }}
-/>
+/>;
 ```
 
 ### Available Icon Customization Points
@@ -288,7 +290,7 @@ interface SimilarProductsSettings {
     itemCount?: string;
     sortDropdown?: string;
     filterToggleButton?: string;
-    
+
     // Text search input
     modalSearchInput?: string;
     modalSearchContainer?: string;
@@ -296,7 +298,7 @@ interface SimilarProductsSettings {
     modalSearchIcon?: string;
     modalSearchClearButton?: string;
     modalSearchClearIcon?: string;
-    
+
     // Icon customization
     searchButtonIcon?: string; // Search button icon styling
     modalCloseIcon?: string; // Modal close button icons styling
@@ -476,13 +478,16 @@ The plugin features a built-in text search functionality that allows users to se
 ```tsx
 const textSearchSettings = {
   enableTextSearch: true, // Enable text search input
-  
+
   customStyles: {
     modalSearchContainer: 'relative flex items-center',
-    modalSearchInput: 'h-10 px-4 pr-20 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500',
-    modalSearchButton: 'absolute right-2 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded-md',
+    modalSearchInput:
+      'h-10 px-4 pr-20 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500',
+    modalSearchButton:
+      'absolute right-2 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded-md',
     modalSearchIcon: 'text-gray-500',
-    modalSearchClearButton: 'absolute right-12 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded-md',
+    modalSearchClearButton:
+      'absolute right-12 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded-md',
     modalSearchClearIcon: 'text-gray-400 hover:text-gray-600'
   }
 };
@@ -493,22 +498,33 @@ const textSearchSettings = {
 ```tsx
 const customIconSettings = {
   enableTextSearch: true,
-  
+
   customRenderers: {
     render: {
       modal: {
         renderSearchIcon: ({ disabled, onClick }) => (
-          <svg 
-            className="w-5 h-5 text-blue-500 cursor-pointer hover:text-blue-700" 
+          <svg
+            className="w-5 h-5 text-blue-500 cursor-pointer hover:text-blue-700"
             onClick={onClick}
-            fill="none" 
-            stroke="currentColor" 
+            fill="none"
+            stroke="currentColor"
             viewBox="0 0 24 24"
           >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
           </svg>
         ),
-        renderModalSearchInput: ({ searchText, setSearchText, isLoading, placeholder, onSearch }) => (
+        renderModalSearchInput: ({
+          searchText,
+          setSearchText,
+          isLoading,
+          placeholder,
+          onSearch
+        }) => (
           <div className="relative">
             <input
               type="text"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-similar-products",
-  "version": "1.92.0-rc.37",
+  "version": "1.92.0-rc.39",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {

package/src/data/endpoints.ts

@@ -27,7 +27,12 @@ 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[];
+        text?: string;
+      }
     >({
       query: ({ url, limit = 20, excluded_product_ids, text }) => {
         const params = new URLSearchParams();
@@ -54,7 +59,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[];
+        text?: string;
+      }
     >({
       query: ({ image, limit = 20, excluded_product_ids, text }) => {
         const params = new URLSearchParams();
@@ -81,12 +91,21 @@ export const similarProductsApi = api.injectEndpoints({
       SimilarProductsListResponse,
       {
         filter: string;
-        searchParams?: Record<string, string>;
+        searchParams?: Record<string, string | string[]>;
         isExclude?: boolean;
       }
     >({
       query: ({ filter, searchParams = {}, isExclude = false }) => {
-        const params = new URLSearchParams(searchParams);
+        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 queryString = params.toString();
 
         const headerName = isExclude
@@ -107,7 +126,7 @@ export const similarProductsApi = api.injectEndpoints({
           .reduce((acc, key) => {
             acc[key] = searchParams[key];
             return acc;
-          }, {} as Record<string, string>);
+          }, {} as Record<string, string | string[]>);
 
         return JSON.stringify({
           filter,
@@ -128,4 +147,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,3 +1,4 @@
 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

@@ -18,7 +18,7 @@ import { debounce } from '../utils';
 type SearchResults = SimilarProductsListResponse;
 
 interface SearchParams {
-  [key: string]: string;
+  [key: string]: string | string[];
 }
 
 export function useSimilarProducts(product: Product) {
@@ -115,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;
           }
         });
       }
@@ -350,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,
@@ -369,7 +371,11 @@ export function useSimilarProducts(product: Product) {
       executeProductSearch,
       updateSorterState,
       updateResultsAndKey,
-      createEmptySearchResults
+      createEmptySearchResults,
+      searchText,
+      searchTextRef,
+      buildSearchParams,
+      searchResults
     ]
   );
 
@@ -974,7 +980,11 @@ export function useSimilarProducts(product: Product) {
     const textToUse = searchTextRef.current || searchText;
 
     if (hasCroppedImage && currentImageBase64) {
-      await fetchSimilarProductsByBase64(currentImageBase64, textToUse, !hasUploadedImage);
+      await fetchSimilarProductsByBase64(
+        currentImageBase64,
+        textToUse,
+        !hasUploadedImage
+      );
     } else if (hasUploadedImage && currentImageUrl) {
       await fetchSimilarProductsByBase64(currentImageUrl, textToUse, false);
     } else if (currentImageUrl) {
@@ -995,7 +1005,11 @@ export function useSimilarProducts(product: Product) {
     setSearchTextWithRef('');
 
     if (hasCroppedImage && currentImageBase64) {
-      await fetchSimilarProductsByBase64(currentImageBase64, '', !hasUploadedImage);
+      await fetchSimilarProductsByBase64(
+        currentImageBase64,
+        '',
+        !hasUploadedImage
+      );
     } else if (hasUploadedImage && currentImageUrl) {
       await fetchSimilarProductsByBase64(currentImageUrl, '', false);
     } else if (currentImageUrl) {

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/views/header-image-search-feature.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useRef } from 'react';
 import { Product } from '@akinon/next/types';
 import { useImageSearchFeature } from '../hooks/use-image-search-feature';
+import { useTextSearchFeature } from '../hooks/use-text-search-feature';
 import { ImageSearchButton } from './image-search-button';
 import { SimilarProductsPlugin } from './main';
 
@@ -20,6 +21,9 @@ export function HeaderImageSearchFeature({
   enableTextSearch = false
 }: HeaderImageSearchFeatureProps) {
   const { isEnabled: hookIsEnabled, isLoading } = useImageSearchFeature();
+  const { isEnabled: textSearchEnabled } = useTextSearchFeature({
+    enableTextSearch
+  });
 
   const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
   const finalIsEnabled = envEnabled
@@ -31,10 +35,10 @@ export function HeaderImageSearchFeature({
   const [isImageSearchModalOpen, setIsImageSearchModalOpen] = useState(false);
   const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
   const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
-  
+
   const settings = {
     ...userSettings,
-    enableTextSearch
+    enableTextSearch: textSearchEnabled
   };
 
   if (isLoading || !finalIsEnabled) {

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

@@ -6,6 +6,7 @@ import { SimilarProductsButton } from './search-button';
 import { SimilarProductsPlugin } from './main';
 import { mergeSettings } from '../utils';
 import { useImageSearchFeature } from '../hooks/use-image-search-feature';
+import { useTextSearchFeature } from '../hooks/use-text-search-feature';
 
 interface ProductImageSearchFeatureProps {
   product: Product;
@@ -24,12 +25,16 @@ export function ProductImageSearchFeature({
   isEnabled: isEnabledProp,
   enableTextSearch = false
 }: ProductImageSearchFeatureProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { isEnabled: hookIsEnabled } = useImageSearchFeature();
+  const { isEnabled: textSearchEnabled } = useTextSearchFeature({
+    enableTextSearch
+  });
+
   const settings = mergeSettings({
     ...userSettings,
-    enableTextSearch
+    enableTextSearch: textSearchEnabled
   });
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const { isEnabled: hookIsEnabled } = useImageSearchFeature();
 
   const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
   const finalIsEnabled = envEnabled
@@ -46,7 +51,11 @@ export function ProductImageSearchFeature({
     <>
       {finalIsEnabled && (
         <>
-          <SimilarProductsButton onClick={handleClick} className={className} settings={settings} />
+          <SimilarProductsButton
+            onClick={handleClick}
+            className={className}
+            settings={settings}
+          />
 
           <SimilarProductsPlugin
             product={product}