@akinon/pz-similar-products 1.115.0-rc.23 → 1.115.0

package/CHANGELOG.md

@@ -1,71 +1,67 @@
 # @akinon/pz-similar-products
 
-## 1.115.0-rc.23
+## 1.115.0
 
-## 1.115.0-rc.22
+## 1.92.0-rc.33
 
 ### Minor Changes
 
-- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- 59b275c: ZERO-3532: Pass settings prop to SimilarProductsButton for enhanced functionality
 
-## 1.114.0-rc.21
-
-## 1.114.0-rc.20
+## 1.92.0-rc.32
 
 ### Minor Changes
 
-- 143be2b: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- d99a6a7: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- 54e3179: ZERO-3532: Added customize options to icons
 
-## 1.113.0-rc.19
+## 1.92.0-rc.31
 
-## 1.113.0-rc.18
+## 1.92.0-rc.30
 
-### Minor Changes
+## 1.92.0-rc.29
 
-- 143be2b: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- d99a6a7: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+## 1.92.0-rc.28
 
-## 1.112.0-rc.17
+## 1.92.0-rc.27
 
 ### Minor Changes
 
-- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- d606f4a: ZERO-3481: Add locale and currency to list endpoint
+
+## 1.92.0-rc.26
+
+## 1.92.0-rc.25
 
-## 1.111.0-rc.16
+## 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
-- d99a6a7: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
 
-## 1.110.0-rc.15
+## 1.92.0-rc.21
 
-## 1.110.0-rc.14
+### Minor Changes
 
-## 1.110.0-rc.13
+- d99a6a7: ZERO-3457: Fixed the settings prop and made sure everything is customizable.
 
-## 1.110.0-rc.12
+## 1.92.0-rc.20
 
 ### Minor Changes
 
-- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- 8b1d24e: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
 
-## 1.109.0-rc.11
+## 1.92.0-rc.19
 
 ### Minor Changes
 
-- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- d8be48f: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
 
-## 1.108.0-rc.10
+## 1.92.0-rc.18
 
-## 1.108.0-rc.9
-
-### Minor Changes
+## 1.92.0-rc.17
 
-- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+## 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,92 @@ 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 +255,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')
@@ -199,6 +288,21 @@ interface SimilarProductsSettings {
     itemCount?: string;
     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;
@@ -286,6 +390,17 @@ interface SimilarProductsSettings {
     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
   customRenderers?: {
     // Component-level renderers (full control)
@@ -304,6 +419,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?: {
@@ -341,6 +458,91 @@ 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.

package/package.json

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

package/src/data/endpoints.ts

@@ -27,9 +27,9 @@ 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 +38,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 +54,17 @@ 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 +72,7 @@ export const similarProductsApi = api.injectEndpoints({
             'Content-Type': 'application/json',
             Accept: 'application/json'
           },
-          body: JSON.stringify({ image, excluded_product_ids })
+          body: JSON.stringify(bodyData)
         };
       }
     }),

package/src/hooks/index.ts

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