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

package/CHANGELOG.md

@@ -1,67 +1,62 @@
 # @akinon/pz-similar-products
 
-## 1.113.0-snapshot-ZERO-3878-20251204105428
+## 1.114.0-rc.21
 
-## 1.92.0-rc.33
+## 1.114.0-rc.20
 
 ### 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
+- 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.113.0-rc.19
 
-## 1.92.0-rc.27
+## 1.113.0-rc.18
 
 ### Minor Changes
 
-- d606f4a: ZERO-3481: Add locale and currency to list endpoint
-
-## 1.92.0-rc.26
+- 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.25
+## 1.112.0-rc.17
 
-## 1.92.0-rc.24
+### Minor Changes
 
-## 1.92.0-rc.23
+- 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.22
+## 1.111.0-rc.16
 
 ### 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.92.0-rc.21
+## 1.110.0-rc.15
 
-### Minor Changes
+## 1.110.0-rc.14
 
-- d99a6a7: ZERO-3457: Fixed the settings prop and made sure everything is customizable.
+## 1.110.0-rc.13
 
-## 1.92.0-rc.20
+## 1.110.0-rc.12
 
 ### Minor Changes
 
-- 8b1d24e: 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
+- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
 
-## 1.92.0-rc.19
+## 1.109.0-rc.11
 
 ### Minor Changes
 
-- d8be48f: 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
+- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+
+## 1.108.0-rc.10
 
-## 1.92.0-rc.18
+## 1.108.0-rc.9
 
-## 1.92.0-rc.17
+### Minor Changes
 
-## 1.92.0-rc.16
+- 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.

package/README.md

@@ -10,7 +10,6 @@
 
 - [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)
@@ -65,7 +64,6 @@
 
 - **🖼️ 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
@@ -81,92 +79,6 @@ 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
@@ -255,7 +167,6 @@ 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')
@@ -288,21 +199,6 @@ 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;
@@ -390,17 +286,6 @@ 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)
@@ -419,8 +304,6 @@ 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?: {
@@ -458,91 +341,6 @@ 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.113.0-snapshot-ZERO-3878-20251204105428",
+  "version": "1.114.0-rc.21",
   "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[]; 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);
@@ -38,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',
@@ -54,17 +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',
@@ -72,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 })
         };
       }
     }),

package/src/hooks/index.ts

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

package/src/hooks/use-image-search-feature.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+const IMAGE_SEARCH_STORAGE_KEY = 'enable_image_search';
+
+export function useImageSearchFeature() {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
+
+    if (envEnabled) {
+      setIsEnabled(true);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const localStorageValue = localStorage.getItem(IMAGE_SEARCH_STORAGE_KEY);
+      setIsEnabled(localStorageValue === 'true');
+    } catch (error) {
+      setIsEnabled(false);
+    }
+
+    setIsLoading(false);
+  }, []);
+
+  return {
+    isEnabled,
+    isLoading
+  };
+}