@akinon/pz-similar-products 1.92.0-rc.31 → 1.92.0-rc.33

package/src/types/index.ts

@@ -58,6 +58,10 @@ export interface SimilarProductsModalProps {
   showResetButton?: boolean;
   settings?: any;
   className?: string;
+  searchText?: string;
+  setSearchText?: (text: string) => void;
+  handleTextSearch?: () => void;
+  handleClearText?: () => void;
 }
 
 export interface FilterSidebarProps {
@@ -67,6 +71,8 @@ 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>;
@@ -126,6 +132,8 @@ export interface CustomRendererProps {
       onSortChange: (value: string) => void;
       onFilterMenuToggle: () => void;
       isLoading: boolean;
+      searchText?: string;
+      setSearchText?: (text: string) => void;
     }) => React.ReactNode;
     renderSortDropdown?: (props: {
       sorters: SortOption[];
@@ -141,6 +149,17 @@ 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?: {
@@ -219,6 +238,12 @@ 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;
@@ -309,6 +334,7 @@ export interface SimilarProductsSettings {
   resultsPerPage?: number;
   enableCropping?: boolean;
   enableFileUpload?: boolean;
+  enableTextSearch?: boolean;
   paginationType?: 'pagination' | 'load-more' | 'infinite-scroll';
   loadMoreText?: string;
   loadMoreStyle?: 'button' | 'auto';
@@ -329,10 +355,22 @@ 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;
@@ -414,6 +452,19 @@ 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,6 +7,7 @@ export const defaultSettings: Required<SimilarProductsSettings> = {
   resultsPerPage: 20,
   enableCropping: true,
   enableFileUpload: true,
+  enableTextSearch: false,
   customStyles: {
     modal: '',
     filterSidebar: '',
@@ -15,7 +16,31 @@ export const defaultSettings: Required<SimilarProductsSettings> = {
     productItem: '',
     pagination: '',
     filterGroup: '',
-    imageSection: ''
+    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'
   },
   customRenderers: {
     render: {}
@@ -43,6 +68,10 @@ export function mergeSettings(
       ...defaultSettings.customStyles,
       ...userSettings.customStyles
     },
+    iconNames: {
+      ...defaultSettings.iconNames,
+      ...userSettings.iconNames
+    },
     customRenderers: {
       ...defaultSettings.customRenderers,
       ...userSettings.customRenderers,
@@ -100,13 +129,19 @@ export function validateImageFile(
 export function debounce<T extends (...args: any[]) => any>(
   func: T,
   wait: number
-): (...args: Parameters<T>) => void {
+): ((...args: Parameters<T>) => void) & { cancel: () => void } {
   let timeout: NodeJS.Timeout;
 
-  return (...args: Parameters<T>) => {
+  const debounced = (...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 {

package/src/views/filters.tsx

@@ -5,7 +5,8 @@ import {
   Button,
   Icon,
   Accordion,
-  LoaderSpinner
+  LoaderSpinner,
+  Input
 } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { FilterSidebarProps } from '../types';
@@ -55,6 +56,8 @@ export function SimilarProductsFilterSidebar({
   isLoading,
   handleFacetChange,
   removeFacetFilter,
+  searchText,
+  setSearchText,
   currentImageUrl,
   isCropping,
   imageRef,
@@ -166,6 +169,19 @@ export function SimilarProductsFilterSidebar({
     className
   );
 
+  const modalCloseIconClassName = twMerge(
+    '',
+    settings?.customStyles?.modalCloseIcon
+  );
+
+  const filterRemoveIconClassName = twMerge(
+    '',
+    settings?.customStyles?.filterRemoveIcon
+  );
+
+  const modalCloseIconName = settings?.iconNames?.modalClose || 'close';
+  const filterRemoveIconName = settings?.iconNames?.filterRemove || 'close';
+
   return (
     <>
       {isFilterMenuOpen && (
@@ -222,7 +238,11 @@ export function SimilarProductsFilterSidebar({
                     settings?.customStyles?.filterSidebarMobileCloseButton
                   )}
                 >
-                  <Icon name="close" size={16} />
+                  <Icon
+                    name={modalCloseIconName}
+                    size={16}
+                    className={modalCloseIconClassName}
+                  />
                 </Button>
               </div>
               <div
@@ -928,7 +948,11 @@ export function SimilarProductsFilterSidebar({
                         disabled={isLoading}
                         className="hover:bg-gray-200 rounded-full p-0 w-5 h-5 disabled:opacity-50 disabled:cursor-not-allowed ml-1"
                       >
-                        <Icon name="close" size={10} />
+                        <Icon
+                          name={filterRemoveIconName}
+                          size={10}
+                          className={filterRemoveIconClassName}
+                        />
                       </Button>
                     </div>
                   ))}

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

@@ -10,12 +10,14 @@ interface HeaderImageSearchFeatureProps {
   className?: string;
   isEnabled?: boolean;
   settings?: any;
+  enableTextSearch?: boolean;
 }
 
 export function HeaderImageSearchFeature({
   className,
   isEnabled: isEnabledProp,
-  settings
+  settings: userSettings,
+  enableTextSearch = false
 }: HeaderImageSearchFeatureProps) {
   const { isEnabled: hookIsEnabled, isLoading } = useImageSearchFeature();
 
@@ -29,6 +31,11 @@ export function HeaderImageSearchFeature({
   const [isImageSearchModalOpen, setIsImageSearchModalOpen] = useState(false);
   const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
   const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
+  
+  const settings = {
+    ...userSettings,
+    enableTextSearch
+  };
 
   if (isLoading || !finalIsEnabled) {
     return null;
@@ -60,6 +67,7 @@ export function HeaderImageSearchFeature({
           <ImageSearchButton
             onClick={handleOpenImageSearch}
             className={className}
+            settings={settings}
           />
           <SimilarProductsPlugin
             product={{} as Product}

package/src/views/image-search-button.tsx

@@ -1,22 +1,32 @@
 'use client';
 
 import React from 'react';
-import { Button } from '@akinon/next/components';
+import { Button, Icon } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useImageSearchFeature } from '../hooks/use-image-search-feature';
+import { twMerge } from 'tailwind-merge';
 
 interface ImageSearchButtonProps {
   onClick: () => void;
   className?: string;
+  settings?: any;
 }
 
 export function ImageSearchButton({
   onClick,
-  className
+  className,
+  settings
 }: ImageSearchButtonProps) {
   const { t } = useLocalization();
   const { isEnabled, isLoading } = useImageSearchFeature();
 
+  const imageSearchButtonIconName =
+    settings?.iconNames?.imageSearchButton || 'search';
+  const imageSearchButtonIconClassName = twMerge(
+    'text-black',
+    settings?.customStyles?.imageSearchButtonIcon
+  );
+
   if (isLoading || !isEnabled) {
     return null;
   }
@@ -24,24 +34,16 @@ export function ImageSearchButton({
   return (
     <Button
       onClick={onClick}
-      className={`flex items-center justify-center mr-2 text-gray-500 focus:outline-none border-none bg-transparent ${className || ''}`}
+      className={`flex items-center justify-center mr-2 text-gray-500 focus:outline-none border-none bg-transparent ${
+        className || ''
+      }`}
       title={t('common.search.image_search.title')}
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="text-gray-500"
-      >
-        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
-        <circle cx="12" cy="13" r="4"></circle>
-      </svg>
+      <Icon
+        name={imageSearchButtonIconName}
+        size={20}
+        className={imageSearchButtonIconClassName}
+      />
     </Button>
   );
 }

package/src/views/main.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Product } from '@akinon/next/types';
 import { useImageCropper } from '../hooks/use-image-cropper';
 import { SimilarProductsModal } from './search-modal';
@@ -37,12 +37,39 @@ export function SimilarProductsPlugin({
   const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const hasUploadedImageRef = useRef<boolean>(false);
+  const [isImageUploadedViaFileInput, setIsImageUploadedViaFileInput] = useState(false);
+  
+  const UPLOAD_FLAG_KEY = `similar-products-upload-${product.pk}`;
+  
+  const setUploadFlag = (value: boolean) => {
+    try {
+      if (value) {
+        sessionStorage.setItem(UPLOAD_FLAG_KEY, 'true');
+      } else {
+        sessionStorage.removeItem(UPLOAD_FLAG_KEY);
+      }
+    } catch (error) {
+      console.error('Session storage error:', error);
+    }
+  };
+  
+  const getUploadFlag = () => {
+    try {
+      return sessionStorage.getItem(UPLOAD_FLAG_KEY) === 'true';
+    } catch (error) {
+      console.error('Session storage error:', error);
+      return false;
+    }
+  };
 
   const {
     currentImageUrl,
     setCurrentImageUrl,
     isLoading,
     fileError,
+    searchText,
+    setSearchText,
     searchResults,
     resultsKey,
     hasUploadedImage,
@@ -57,9 +84,47 @@ export function SimilarProductsPlugin({
     fetchSimilarProductsByImageUrl,
     fetchSimilarProductsByImageCrop,
     clearError,
-    clearResults
+    clearResults,
+    handleTextSearch,
+    handleClearText,
+    resetCropState
   } = useSimilarProducts(product);
 
+  useEffect(() => {
+    if (hasUploadedImage) {
+      setIsImageUploadedViaFileInput(true);
+      setUploadFlag(true);
+    } else {
+      setIsImageUploadedViaFileInput(false);
+      setUploadFlag(false);
+    }
+  }, [hasUploadedImage]);
+
+  const cropProcessImageFunction = useCallback(
+    (base64Image: string) => {
+      let shouldExclude = true;
+      
+      if (base64Image.startsWith('data:application/x-cors-fallback;base64,')) {
+        try {
+          const fallbackDataEncoded = base64Image.replace('data:application/x-cors-fallback;base64,', '');
+          const fallbackData = JSON.parse(atob(fallbackDataEncoded));
+          
+          if (fallbackData.originalUrl && fallbackData.originalUrl.startsWith('data:')) {
+            shouldExclude = false;
+          }
+        } catch (error) {
+          console.error('CORS fallback parse error:', error);
+        }
+      } else {
+        const isUploadedFromStorage = getUploadFlag();
+        shouldExclude = !isUploadedFromStorage;
+      }
+      
+      fetchSimilarProductsByImageCrop(base64Image, shouldExclude);
+    },
+    [fetchSimilarProductsByImageCrop, hasUploadedImage, currentImageUrl, uploadedImageFile, isImageUploadedViaFileInput]
+  );
+
   const {
     isCropping,
     crop,
@@ -74,7 +139,7 @@ export function SimilarProductsPlugin({
     resetCrop
   } = useImageCropper(
     (loading) => {},
-    fetchSimilarProductsByImageCrop,
+    cropProcessImageFunction,
     clearError
   );
 
@@ -85,8 +150,12 @@ export function SimilarProductsPlugin({
         product.productimage_set[0].image;
       setCurrentImageUrl(originalImageUrl);
       setHasUploadedImage(false);
+      hasUploadedImageRef.current = false;
+      setUploadFlag(false);
+      setSearchText('');
       resetCrop();
-      fetchSimilarProductsByImageUrl(originalImageUrl);
+      resetCropState();
+      fetchSimilarProductsByImageUrl(originalImageUrl, '');
     }
   };
 
@@ -108,6 +177,8 @@ export function SimilarProductsPlugin({
 
     if (!isOpen) {
       setHasInitialSearchDone(false);
+      hasUploadedImageRef.current = false;
+      setUploadFlag(false);
       clearError();
       clearResults();
     }
@@ -129,7 +200,9 @@ export function SimilarProductsPlugin({
         if (result) {
           setCurrentImageUrl(result);
           setHasUploadedImage(true);
-          fetchSimilarProductsByImageCrop(result);
+          hasUploadedImageRef.current = true;
+          setUploadFlag(true);
+          fetchSimilarProductsByImageCrop(result, false);
         }
       };
       reader.readAsDataURL(uploadedImageFile);
@@ -193,6 +266,10 @@ export function SimilarProductsPlugin({
         settings={settings}
         className={settings.customStyles?.modal}
         showResetButton={showResetButton}
+        searchText={searchText}
+        setSearchText={setSearchText}
+        handleTextSearch={handleTextSearch}
+        handleClearText={handleClearText}
       />
 
       <ImageSearchModalComponent

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

@@ -13,6 +13,7 @@ interface ProductImageSearchFeatureProps {
   settings?: any;
   className?: string;
   isEnabled?: boolean;
+  enableTextSearch?: boolean;
 }
 
 export function ProductImageSearchFeature({
@@ -20,9 +21,13 @@ export function ProductImageSearchFeature({
   activeIndex = 0,
   settings: userSettings,
   className = 'absolute top-6 left-6 z-[20]',
-  isEnabled: isEnabledProp
+  isEnabled: isEnabledProp,
+  enableTextSearch = false
 }: ProductImageSearchFeatureProps) {
-  const settings = mergeSettings(userSettings);
+  const settings = mergeSettings({
+    ...userSettings,
+    enableTextSearch
+  });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { isEnabled: hookIsEnabled } = useImageSearchFeature();
 
@@ -41,7 +46,7 @@ export function ProductImageSearchFeature({
     <>
       {finalIsEnabled && (
         <>
-          <SimilarProductsButton onClick={handleClick} className={className} />
+          <SimilarProductsButton onClick={handleClick} className={className} settings={settings} />
 
           <SimilarProductsPlugin
             product={product}

package/src/views/search-button.tsx

@@ -3,22 +3,32 @@
 import React from 'react';
 import { Icon } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
 
 interface SimilarProductsButtonProps {
   onClick: () => void;
   className?: string;
   isLoading?: boolean;
   disabled?: boolean;
+  settings?: any;
 }
 
 export function SimilarProductsButton({
   onClick,
   className = '',
   isLoading = false,
-  disabled = false
+  disabled = false,
+  settings
 }: SimilarProductsButtonProps) {
   const { t } = useLocalization();
 
+  const searchButtonIconClassName = twMerge(
+    'fill-black',
+    settings?.customStyles?.searchButtonIcon
+  );
+
+  const searchButtonIconName = settings?.iconNames?.searchButton || 'search';
+
   return (
     <button
       onClick={onClick}
@@ -28,7 +38,7 @@ export function SimilarProductsButton({
       } ${className}`}
     >
       <div className="flex items-center gap-2">
-        <Icon name="search" size={16} className="fill-black" />
+        <Icon name={searchButtonIconName} size={16} className={searchButtonIconClassName} />
         <span className="text-xs font-medium text-black uppercase">
           {t('common.product.view_similar_styles')}
         </span>