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

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
@@ -445,7 +465,10 @@ export function SimilarProductsFilterSidebar({
                           onDragEnd={() => {}}
                           ruleOfThirds={false}
                           aspect={settings?.cropAspectRatio}
-                          className="slider-crop"
+                          className={twMerge(
+                            'slider-crop',
+                            settings?.customStyles?.cropComponent
+                          )}
                           disabled={isLoading}
                           keepSelection={true}
                         >
@@ -453,22 +476,45 @@ export function SimilarProductsFilterSidebar({
                             ref={imageRef}
                             src={currentImageUrl || ''}
                             alt={product?.name || 'Product image'}
-                            className="max-w-full max-h-[200px] md:max-h-[280px]"
+                            className={twMerge(
+                              'max-w-full max-h-[200px] md:max-h-[280px]',
+                              settings?.customStyles?.cropImage,
+                              settings?.customStyles?.cropImageActive
+                            )}
                             style={{ transform: `scale(1) rotate(0deg)` }}
                           />
                         </ReactCrop>
                       ) : (
-                        <div className="relative w-full h-full flex items-center justify-center">
+                        <div
+                          className={twMerge(
+                            'relative w-full h-full flex items-center justify-center',
+                            settings?.customStyles?.cropImageContainer
+                          )}
+                        >
                           <img
                             ref={imageRef}
                             src={currentImageUrl || ''}
                             alt={product?.name || 'Product image'}
-                            className="max-w-full max-h-[200px] md:max-h-[280px] object-contain"
+                            className={twMerge(
+                              'max-w-full max-h-[200px] md:max-h-[280px] object-contain',
+                              settings?.customStyles?.cropImage,
+                              settings?.customStyles?.cropImageNonCropping
+                            )}
                           />
                           {!isCropping && completedCrop && (
-                            <div className="hidden md:block absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-in-out">
+                            <div
+                              className={twMerge(
+                                'hidden md:block absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-in-out',
+                                settings?.customStyles?.cropOverlay,
+                                settings?.customStyles?.cropOverlayBackground
+                              )}
+                            >
                               <div
-                                className="absolute transition-all duration-300 ease-in-out"
+                                className={twMerge(
+                                  'absolute transition-all duration-300 ease-in-out',
+                                  settings?.customStyles?.cropSelection,
+                                  settings?.customStyles?.cropSelectionHighlight
+                                )}
                                 style={{
                                   width: `${completedCrop.width}px`,
                                   height: `${completedCrop.height}px`,
@@ -902,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

@@ -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';
 
@@ -10,14 +11,19 @@ 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();
+  const { isEnabled: textSearchEnabled } = useTextSearchFeature({
+    enableTextSearch
+  });
 
   const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
   const finalIsEnabled = envEnabled
@@ -30,6 +36,11 @@ export function HeaderImageSearchFeature({
   const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
   const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
 
+  const settings = {
+    ...userSettings,
+    enableTextSearch: textSearchEnabled
+  };
+
   if (isLoading || !finalIsEnabled) {
     return null;
   }
@@ -60,6 +71,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,
@@ -56,9 +83,48 @@ export function SimilarProductsPlugin({
     loadedPages,
     fetchSimilarProductsByImageUrl,
     fetchSimilarProductsByImageCrop,
-    clearError
+    clearError,
+    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,
@@ -73,7 +139,7 @@ export function SimilarProductsPlugin({
     resetCrop
   } = useImageCropper(
     (loading) => {},
-    fetchSimilarProductsByImageCrop,
+    cropProcessImageFunction,
     clearError
   );
 
@@ -84,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, '');
     }
   };
 
@@ -107,7 +177,10 @@ export function SimilarProductsPlugin({
 
     if (!isOpen) {
       setHasInitialSearchDone(false);
+      hasUploadedImageRef.current = false;
+      setUploadFlag(false);
       clearError();
+      clearResults();
     }
   }, [
     isOpen,
@@ -115,7 +188,8 @@ export function SimilarProductsPlugin({
     activeIndex,
     hasUploadedImage,
     hasInitialSearchDone,
-    clearError
+    clearError,
+    clearResults
   ]);
 
   useEffect(() => {
@@ -126,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);
@@ -142,6 +218,11 @@ export function SimilarProductsPlugin({
     }
   };
 
+  const handleModalClose = () => {
+    resetCrop();
+    onClose();
+  };
+
   const ModalComponent =
     settings.customRenderers?.Modal || SimilarProductsModal;
   const ImageSearchModalComponent =
@@ -151,7 +232,7 @@ export function SimilarProductsPlugin({
     <>
       <ModalComponent
         isOpen={isOpen}
-        onClose={onClose}
+        onClose={handleModalClose}
         searchResults={searchResults}
         resultsKey={resultsKey}
         isLoading={isLoading}
@@ -185,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

@@ -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;
@@ -13,6 +14,7 @@ interface ProductImageSearchFeatureProps {
   settings?: any;
   className?: string;
   isEnabled?: boolean;
+  enableTextSearch?: boolean;
 }
 
 export function ProductImageSearchFeature({
@@ -20,11 +22,19 @@ 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 [isModalOpen, setIsModalOpen] = useState(false);
   const { isEnabled: hookIsEnabled } = useImageSearchFeature();
+  const { isEnabled: textSearchEnabled } = useTextSearchFeature({
+    enableTextSearch
+  });
+
+  const settings = mergeSettings({
+    ...userSettings,
+    enableTextSearch: textSearchEnabled
+  });
 
   const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
   const finalIsEnabled = envEnabled
@@ -41,7 +51,11 @@ export function ProductImageSearchFeature({
     <>
       {finalIsEnabled && (
         <>
-          <SimilarProductsButton onClick={handleClick} className={className} />
+          <SimilarProductsButton
+            onClick={handleClick}
+            className={className}
+            settings={settings}
+          />
 
           <SimilarProductsPlugin
             product={product}

package/src/views/results.tsx

@@ -526,10 +526,14 @@ export function SimilarProductsResultsGrid({
     );
   };
 
-  if (isLoading && (!searchResults || !searchResults.products)) {
+  if (isLoading && (!searchResults || !searchResults.products?.length)) {
     return renderLoadingState();
   }
 
+  if (!isLoading && searchResults && searchResults.products?.length === 0) {
+    return renderEmptyState();
+  }
+
   const renderLoadingOverlay = () => {
     if (settings?.customRenderers?.render?.resultsGrid?.renderLoadingOverlay) {
       return settings.customRenderers.render.resultsGrid.renderLoadingOverlay();
@@ -585,16 +589,14 @@ export function SimilarProductsResultsGrid({
     <div className={gridClassName}>
       {isLoading &&
         searchResults &&
-        searchResults.products &&
+        searchResults.products?.length > 0 &&
         renderLoadingOverlay()}
 
-      {searchResults && searchResults.products?.length > 0 ? (
+      {searchResults && searchResults.products?.length > 0 && (
         <div className={resultsContainerClassName}>
           {renderGridContainer()}
           {renderPagination()}
         </div>
-      ) : (
-        renderEmptyState()
       )}
     </div>
   );

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>