@akinon/pz-similar-products 1.92.0-snapshot-ZERO-3457-20250627111231 → 1.93.0-rc.46

package/CHANGELOG.md

@@ -1,7 +1,117 @@
 # @akinon/pz-similar-products
 
-## 1.92.0-snapshot-ZERO-3457-20250627111231
+## 1.93.0-rc.46
 
 ### Minor Changes
 
-- d99a6a7: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- 54e31792: ZERO-3532: Added customize options to icons
+- 174bf3a5: ZERO-3533: Refactor similar products API endpoints to support array search parameters and improve query handling
+- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
+- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- d99a6a7d: ZERO-3457: Fixed the settings prop and made sure everything is customizable.
+- 59b275ca: ZERO-3532: Pass settings prop to SimilarProductsButton for enhanced functionality
+- d606f4ac: ZERO-3481: Add locale and currency to list endpoint
+
+## 1.92.0-rc.45
+
+## 1.92.0-rc.44
+
+## 1.92.0-rc.43
+
+## 1.92.0-rc.42
+
+### Minor Changes
+
+- 54e31792: ZERO-3532: Added customize options to icons
+- 174bf3a5: ZERO-3533: Refactor similar products API endpoints to support array search parameters and improve query handling
+- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
+- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- d99a6a7d: ZERO-3457: Fixed the settings prop and made sure everything is customizable.
+- 59b275ca: ZERO-3532: Pass settings prop to SimilarProductsButton for enhanced functionality
+- d606f4ac: ZERO-3481: Add locale and currency to list endpoint
+
+## 1.92.0-rc.41
+
+## 1.92.0-rc.40
+
+## 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
+
+## 1.92.0-rc.35
+
+## 1.92.0-rc.34
+
+## 1.92.0-rc.33
+
+### Minor Changes
+
+- 59b275c: ZERO-3532: Pass settings prop to SimilarProductsButton for enhanced functionality
+
+## 1.92.0-rc.32
+
+### Minor Changes
+
+- 54e3179: ZERO-3532: Added customize options to icons
+
+## 1.92.0-rc.31
+
+## 1.92.0-rc.30
+
+## 1.92.0-rc.29
+
+## 1.92.0-rc.28
+
+## 1.92.0-rc.27
+
+### Minor Changes
+
+- d606f4a: ZERO-3481: Add locale and currency to list endpoint
+
+## 1.92.0-rc.26
+
+## 1.92.0-rc.25
+
+## 1.92.0-rc.24
+
+## 1.92.0-rc.23
+
+## 1.92.0-rc.22
+
+### Minor Changes
+
+- 143be2b: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
+
+## 1.92.0-rc.21
+
+### Minor Changes
+
+- d99a6a7: ZERO-3457: Fixed the settings prop and made sure everything is customizable.
+
+## 1.92.0-rc.20
+
+### Minor Changes
+
+- 8b1d24e: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+
+## 1.92.0-rc.19
+
+### Minor Changes
+
+- d8be48f: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+
+## 1.92.0-rc.18
+
+## 1.92.0-rc.17
+
+## 1.92.0-rc.16

package/README.md

@@ -10,6 +10,7 @@
 
 - [Features](#markdown-header-features)
 - [Installation](#markdown-header-installation)
+- [Icon Customization](#markdown-header-icon-customization)
 - [Quick Start](#markdown-header-quick-start)
 - [Available Components](#markdown-header-available-components)
 - [Configuration](#markdown-header-configuration)
@@ -64,6 +65,7 @@
 
 - **🖼️ Visual Search**: AI-powered image-based product discovery
 - **✂️ Image Cropping**: Built-in cropping functionality with manual confirmation for precise searches
+- **🔤 Text Search**: Search similar products by text description with customizable input
 - **🎛️ Advanced Filtering**: Dynamic facet-based filtering system
 - **📄 Multiple Pagination Modes**: Traditional pagination, load more button, and infinite scroll
 - **🎨 Granular Customization**: 50+ style targets and 30+ render points
@@ -79,6 +81,94 @@ npx @akinon/projectzero@latest --plugins
 
 Select `pz-similar-products` from the plugin list during installation.
 
+## Icon Customization
+
+The plugin provides complete control over icon appearance and behavior through two complementary approaches:
+
+### Icon Names (`iconNames`)
+
+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')
+    modalSearch: 'search-outline', // Modal search button (default: 'search')
+    modalSearchClear: 'clear', // Search input clear button (default: 'close')
+    imageSearchButton: 'upload' // Image search button (default: 'search')
+  }
+};
+```
+
+### Icon Styles (`customStyles`)
+
+Customize the visual appearance of icons with CSS classes:
+
+```tsx
+const iconStyling = {
+  customStyles: {
+    searchButtonIcon: 'fill-blue-500 hover:fill-blue-600 transition-colors',
+    modalCloseIcon: 'text-red-500 hover:text-red-700 w-4 h-4',
+    filterIcon: 'text-purple-500 w-5 h-5',
+    filterRemoveIcon: 'text-orange-500 hover:text-orange-700 w-3 h-3',
+    imageSearchButtonIcon: 'text-blue-500 hover:text-blue-600 w-5 h-5'
+  }
+};
+```
+
+### Complete Icon Customization Example
+
+```tsx
+const completeIconSettings = {
+  // Change icon names
+  iconNames: {
+    searchButton: 'search-alt',
+    modalClose: 'times',
+    filter: 'filter-alt',
+    filterRemove: 'remove',
+    modalSearch: 'magnifying-glass',
+    modalSearchClear: 'clear-alt',
+    imageSearchButton: 'upload-cloud'
+  },
+
+  // Style the icons
+  customStyles: {
+    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',
+    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'
+  }
+};
+
+// Usage
+<PluginModule
+  component={Component.ProductImageSearchFeature}
+  props={{
+    product,
+    activeIndex,
+    settings: completeIconSettings
+  }}
+/>;
+```
+
+### Available Icon Customization Points
+
+- **Search Button** (`searchButton`): Main search button icon in product images
+- **Modal Close** (`modalClose`): Close buttons in modals and filter tags
+- **Filter** (`filter`): Filter toggle button icon
+- **Filter Remove** (`filterRemove`): Remove icons in active filter tags
+- **Modal Search** (`modalSearch`): Search button icon in text search input
+- **Modal Search Clear** (`modalSearchClear`): Clear button icon in text search input
+- **Image Search Button** (`imageSearchButton`): Camera/upload icon in header search feature
+
 ## Quick Start
 
 ### Plugin Module Integration
@@ -167,6 +257,7 @@ interface SimilarProductsSettings {
   resultsPerPage?: number; // Products per page (default: 20)
   enableCropping?: boolean; // Enable image cropping (default: true)
   enableFileUpload?: boolean; // Enable file upload (default: true)
+  enableTextSearch?: boolean; // Enable text search input (default: false)
 
   // Pagination settings
   paginationType?: 'pagination' | 'load-more' | 'infinite-scroll'; // Pagination mode (default: 'pagination')
@@ -200,6 +291,21 @@ interface SimilarProductsSettings {
     sortDropdown?: string;
     filterToggleButton?: string;
 
+    // Text search input
+    modalSearchInput?: string;
+    modalSearchContainer?: string;
+    modalSearchButton?: string;
+    modalSearchIcon?: string;
+    modalSearchClearButton?: string;
+    modalSearchClearIcon?: string;
+
+    // Icon customization
+    searchButtonIcon?: string; // Search button icon styling
+    modalCloseIcon?: string; // Modal close button icons styling
+    filterIcon?: string; // Filter button icon styling
+    filterRemoveIcon?: string; // Filter tag remove icons styling
+    imageSearchButtonIcon?: string; // Image search button icon styling
+
     // Filter sidebar mobile
     filterSidebarMobileHeader?: string;
     filterSidebarMobileTitle?: string; // NEW: Mobile title
@@ -266,11 +372,35 @@ interface SimilarProductsSettings {
     imageSearchTipsTitle?: string; // NEW: Tips title
     imageSearchTipsList?: string; // NEW: Tips list
     imageSearchTipsItem?: string; // NEW: Individual tip
+    imageSearchModalOverlay?: string; // NEW: Image search modal overlay
 
     // Mobile active filters
     mobileActiveFilters?: string;
     mobileActiveFilterTag?: string;
     mobileClearAllButton?: string;
+
+    // New crop-related custom styles
+    cropComponent?: string;
+    cropImage?: string;
+    cropImageActive?: string;
+    cropImageNonCropping?: string;
+    cropImageContainer?: string;
+    cropOverlay?: string;
+    cropSelection?: string;
+    cropSelectionBorder?: string;
+    cropOverlayBackground?: string;
+    cropSelectionHighlight?: string;
+  };
+
+  // Icon name customization
+  iconNames?: {
+    searchButton?: string; // Search button icon name (default: 'search')
+    modalClose?: string; // Modal close button icon name (default: 'close')
+    filter?: string; // Filter button icon name (default: 'filter')
+    filterRemove?: string; // Filter tag remove icon name (default: 'close')
+    modalSearch?: string; // Modal search button icon name (default: 'search')
+    modalSearchClear?: string; // Modal search clear button icon name (default: 'close')
+    imageSearchButton?: string; // Image search button icon name (default: 'search')
   };
 
   // 25+ render functions for granular control
@@ -291,6 +421,8 @@ interface SimilarProductsSettings {
         renderItemCount?: (props) => React.ReactNode;
         renderSortDropdown?: (props) => React.ReactNode;
         renderFilterToggleButton?: (props) => React.ReactNode;
+        renderModalSearchInput?: (props) => React.ReactNode;
+        renderSearchIcon?: (props) => React.ReactNode;
         // ... see examples for complete list
       };
       filterSidebar?: {
@@ -328,6 +460,105 @@ interface SimilarProductsSettings {
 }
 ```
 
+## Text Search Integration
+
+The plugin features a built-in text search functionality that allows users to search for similar products using descriptive text.
+
+### Text Search Features
+
+1. **Search Input**: Appears only when API results are available
+2. **Enter Key Support**: Press Enter to trigger search
+3. **Search Icon**: Clickable icon for mobile users
+4. **Clear Button**: X button to clear text and trigger search without text
+5. **Custom Styling**: Fully customizable input, button, and icon
+6. **Custom Icon**: Replaceable search icon via render functions
+
+### Basic Text Search Configuration
+
+```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',
+    modalSearchIcon: 'text-gray-500',
+    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'
+  }
+};
+```
+
+### Custom Search Icon
+
+```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"
+            onClick={onClick}
+            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"
+            />
+          </svg>
+        ),
+        renderModalSearchInput: ({
+          searchText,
+          setSearchText,
+          isLoading,
+          placeholder,
+          onSearch
+        }) => (
+          <div className="relative">
+            <input
+              type="text"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && onSearch && onSearch()}
+              placeholder={placeholder}
+              className="w-full h-10 px-4 pr-20 border-2 border-blue-300 rounded-lg focus:border-blue-500"
+              disabled={isLoading}
+            />
+            {searchText && (
+              <button
+                onClick={() => setSearchText('')}
+                disabled={isLoading}
+                className="absolute right-12 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-gray-600"
+              >
+                ✕
+              </button>
+            )}
+            <button
+              onClick={onSearch}
+              disabled={isLoading}
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-blue-500 hover:text-blue-700"
+            >
+              🔍
+            </button>
+          </div>
+        )
+      }
+    }
+  }
+};
+```
+
 ## Image Cropping with Manual Confirmation
 
 The plugin features an advanced image cropping system with manual confirmation for precise control over search queries.
@@ -556,7 +787,18 @@ const settings = {
     productItem: 'hover:scale-105 transition-all duration-300 shadow-lg',
     filterSidebar: 'bg-gradient-to-b from-gray-50 to-white',
     paginationButton: 'rounded-full px-4 py-2 bg-blue-600 text-white',
-    activeFilterTag: 'bg-blue-100 text-blue-800 px-3 py-1 rounded-full'
+    activeFilterTag: 'bg-blue-100 text-blue-800 px-3 py-1 rounded-full',
+
+    // Advanced crop styling
+    cropComponent: 'border-2 border-dashed border-blue-300 rounded-lg',
+    cropImage: 'rounded-lg shadow-md',
+    cropImageActive: 'brightness-110 contrast-110',
+    cropImageNonCropping: 'hover:scale-105 transition-transform',
+    cropImageContainer: 'bg-gray-50 rounded-lg p-2',
+    cropOverlay: 'backdrop-blur-sm',
+    cropOverlayBackground: 'bg-black/60',
+    cropSelection: 'border-4 border-blue-500',
+    cropSelectionHighlight: 'shadow-2xl shadow-blue-500/50'
   }
 };
 ```
@@ -915,7 +1157,8 @@ export function SiteHeader() {
             settings: {
               maxFileSize: 5,
               customStyles: {
-                imageSearchModal: 'max-w-lg rounded-xl'
+                imageSearchModal: 'max-w-lg rounded-xl',
+                imageSearchModalOverlay: 'bg-black/70 backdrop-blur-sm' // Custom overlay
               }
             }
           }}
@@ -1430,7 +1673,8 @@ const advancedStylingSettings = {
     imageSearchTipsSection: 'bg-yellow-50 border-l-4 border-yellow-400',
     imageSearchTipsTitle: 'text-yellow-800 font-bold',
     imageSearchTipsList: 'text-yellow-700',
-    imageSearchTipsItem: 'hover:text-yellow-900 transition-colors'
+    imageSearchTipsItem: 'hover:text-yellow-900 transition-colors',
+    imageSearchModalOverlay: 'bg-black/60 backdrop-blur-md' // NEW: Custom overlay
   }
 };
 ```
@@ -1487,6 +1731,7 @@ const hybridAdvancedSettings = {
 - `filterSidebar`, `filterSidebarMobileHeader`, `filterGroup`, `filterGroupTitle`, `filterGroupContent`
 - `filterItem`, `filterItemInput`, `filterItemLabel`, `filterItemCount`
 - `imageSection`, `imageContainer`, `imageWrapper`, `cropButton`, `tickButton`, `uploadButton`, `resetButton`, `errorMessage`, `cropControls`
+- `cropComponent`, `cropImage`, `cropImageActive`, `cropImageNonCropping`, `cropImageContainer`, `cropOverlay`, `cropSelection`, `cropSelectionBorder`, `cropOverlayBackground`, `cropSelectionHighlight`
 - `mobileActiveFilters`, `mobileActiveFilterTag`, `mobileClearAllButton`
 
 **Products & Results:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-similar-products",
-  "version": "1.92.0-snapshot-ZERO-3457-20250627111231",
+  "version": "1.93.0-rc.46",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {

package/src/data/endpoints.ts

@@ -27,9 +27,14 @@ export const similarProductsApi = api.injectEndpoints({
   endpoints: (build) => ({
     getSimilarProductsByUrl: build.query<
       SimilarProductsResponse,
-      { url: string; limit?: number; excluded_product_ids?: number[] }
+      {
+        url: string;
+        limit?: number;
+        excluded_product_ids?: number[];
+        text?: string;
+      }
     >({
-      query: ({ url, limit = 20, excluded_product_ids }) => {
+      query: ({ url, limit = 20, excluded_product_ids, text }) => {
         const params = new URLSearchParams();
         params.append('limit', String(limit));
         params.append('url', url);
@@ -38,6 +43,10 @@ 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',
@@ -50,12 +59,22 @@ export const similarProductsApi = api.injectEndpoints({
 
     getSimilarProductsByImage: build.mutation<
       SimilarProductsResponse,
-      { image: string; limit?: number; excluded_product_ids?: number[] }
+      {
+        image: string;
+        limit?: number;
+        excluded_product_ids?: number[];
+        text?: string;
+      }
     >({
-      query: ({ image, limit = 20, excluded_product_ids }) => {
+      query: ({ image, limit = 20, excluded_product_ids, text }) => {
         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',
@@ -63,7 +82,7 @@ export const similarProductsApi = api.injectEndpoints({
             'Content-Type': 'application/json',
             Accept: 'application/json'
           },
-          body: JSON.stringify({ image, excluded_product_ids })
+          body: JSON.stringify(bodyData)
         };
       }
     }),
@@ -72,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
@@ -98,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,
@@ -119,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';