@akinon/pz-similar-products 1.114.0-snapshot-ZERO-3890-20251209002835 → 1.115.0-rc.23

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

@@ -1,43 +1,47 @@
 'use client';
 
 import React from 'react';
-import { Button, Icon } from '@akinon/next/components';
+import { Button } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
-import { twMerge } from 'tailwind-merge';
+import { useImageSearchFeature } from '../hooks/use-image-search-feature';
 
 interface ImageSearchButtonProps {
   onClick: () => void;
   className?: string;
-  settings?: any;
 }
 
 export function ImageSearchButton({
   onClick,
-  className,
-  settings
+  className
 }: 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;
+  }
 
   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')}
     >
-      <Icon
-        name={imageSearchButtonIconName}
-        size={20}
-        className={imageSearchButtonIconClassName}
-      />
+      <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>
     </Button>
   );
 }

package/src/views/main.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Product } from '@akinon/next/types';
 import { useImageCropper } from '../hooks/use-image-cropper';
 import { SimilarProductsModal } from './search-modal';
@@ -37,39 +37,12 @@ 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,
@@ -84,47 +57,9 @@ export function SimilarProductsPlugin({
     fetchSimilarProductsByImageUrl,
     fetchSimilarProductsByImageCrop,
     clearError,
-    clearResults,
-    handleTextSearch,
-    handleClearText,
-    resetCropState
+    clearResults
   } = 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,
@@ -139,7 +74,7 @@ export function SimilarProductsPlugin({
     resetCrop
   } = useImageCropper(
     (loading) => {},
-    cropProcessImageFunction,
+    fetchSimilarProductsByImageCrop,
     clearError
   );
 
@@ -150,12 +85,8 @@ export function SimilarProductsPlugin({
         product.productimage_set[0].image;
       setCurrentImageUrl(originalImageUrl);
       setHasUploadedImage(false);
-      hasUploadedImageRef.current = false;
-      setUploadFlag(false);
-      setSearchText('');
       resetCrop();
-      resetCropState();
-      fetchSimilarProductsByImageUrl(originalImageUrl, '');
+      fetchSimilarProductsByImageUrl(originalImageUrl);
     }
   };
 
@@ -177,8 +108,6 @@ export function SimilarProductsPlugin({
 
     if (!isOpen) {
       setHasInitialSearchDone(false);
-      hasUploadedImageRef.current = false;
-      setUploadFlag(false);
       clearError();
       clearResults();
     }
@@ -200,9 +129,7 @@ export function SimilarProductsPlugin({
         if (result) {
           setCurrentImageUrl(result);
           setHasUploadedImage(true);
-          hasUploadedImageRef.current = true;
-          setUploadFlag(true);
-          fetchSimilarProductsByImageCrop(result, false);
+          fetchSimilarProductsByImageCrop(result);
         }
       };
       reader.readAsDataURL(uploadedImageFile);
@@ -266,10 +193,6 @@ 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

@@ -5,6 +5,7 @@ import { Product } from '@akinon/next/types';
 import { SimilarProductsButton } from './search-button';
 import { SimilarProductsPlugin } from './main';
 import { mergeSettings } from '../utils';
+import { useImageSearchFeature } from '../hooks/use-image-search-feature';
 
 interface ProductImageSearchFeatureProps {
   product: Product;
@@ -12,7 +13,6 @@ interface ProductImageSearchFeatureProps {
   settings?: any;
   className?: string;
   isEnabled?: boolean;
-  enableTextSearch?: boolean;
 }
 
 export function ProductImageSearchFeature({
@@ -20,18 +20,18 @@ export function ProductImageSearchFeature({
   activeIndex = 0,
   settings: userSettings,
   className = 'absolute top-6 left-6 z-[20]',
-  isEnabled = false,
-  enableTextSearch = false
+  isEnabled: isEnabledProp
 }: ProductImageSearchFeatureProps) {
-  const settings = mergeSettings({
-    ...userSettings,
-    enableTextSearch
-  });
+  const settings = mergeSettings(userSettings);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { isEnabled: hookIsEnabled } = useImageSearchFeature();
 
-  if (!isEnabled) {
-    return null;
-  }
+  const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
+  const finalIsEnabled = envEnabled
+    ? true
+    : isEnabledProp !== undefined
+    ? isEnabledProp
+    : hookIsEnabled;
 
   const handleClick = () => {
     setIsModalOpen(true);
@@ -39,19 +39,19 @@ export function ProductImageSearchFeature({
 
   return (
     <>
-      <SimilarProductsButton
-        onClick={handleClick}
-        className={className}
-        settings={settings}
-      />
+      {finalIsEnabled && (
+        <>
+          <SimilarProductsButton onClick={handleClick} className={className} />
 
-      <SimilarProductsPlugin
-        product={product}
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        activeIndex={activeIndex}
-        settings={settings}
-      />
+          <SimilarProductsPlugin
+            product={product}
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            activeIndex={activeIndex}
+            settings={settings}
+          />
+        </>
+      )}
     </>
   );
 }

package/src/views/search-button.tsx

@@ -3,32 +3,22 @@
 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,
-  settings
+  disabled = false
 }: SimilarProductsButtonProps) {
   const { t } = useLocalization();
 
-  const searchButtonIconClassName = twMerge(
-    'fill-black',
-    settings?.customStyles?.searchButtonIcon
-  );
-
-  const searchButtonIconName = settings?.iconNames?.searchButton || 'search';
-
   return (
     <button
       onClick={onClick}
@@ -38,7 +28,7 @@ export function SimilarProductsButton({
       } ${className}`}
     >
       <div className="flex items-center gap-2">
-        <Icon name={searchButtonIconName} size={16} className={searchButtonIconClassName} />
+        <Icon name="search" size={16} className="fill-black" />
         <span className="text-xs font-medium text-black uppercase">
           {t('common.product.view_similar_styles')}
         </span>

package/src/views/search-modal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Modal, Button, Icon, Select, Input } from '@akinon/next/components';
+import { Modal, Button, Icon, Select } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { SimilarProductsFilterSidebar } from './filters';
 import { SimilarProductsResultsGrid } from './results';
@@ -43,11 +43,7 @@ export function SimilarProductsModal({
   fileError,
   showResetButton = true,
   settings,
-  className,
-  searchText,
-  setSearchText,
-  handleTextSearch,
-  handleClearText
+  className
 }: SimilarProductsModalProps) {
   const { t } = useLocalization();
 
@@ -168,24 +164,6 @@ export function SimilarProductsModal({
             })) || []
       ) || [];
 
-  const modalCloseIconName = settings?.iconNames?.modalClose || 'close';
-  const filterIconName = settings?.iconNames?.filter || 'filter';
-  const modalSearchIconName = settings?.iconNames?.modalSearch || 'search';
-  const modalSearchClearIconName =
-    settings?.iconNames?.modalSearchClear || 'close';
-
-  const modalCloseIconClassName = twMerge(
-    '',
-    settings?.customStyles?.modalCloseIcon
-  );
-
-  const filterIconClassName = twMerge('', settings?.customStyles?.filterIcon);
-
-  const modalSearchIconClassName = twMerge(
-    'text-gray-500',
-    settings?.customStyles?.modalSearchIcon
-  );
-
   const renderHeader = () => {
     if (settings?.customRenderers?.render?.modal?.renderHeader) {
       return settings.customRenderers.render.modal.renderHeader({
@@ -268,11 +246,7 @@ export function SimilarProductsModal({
                   disabled={isLoading}
                   className={buttonClassName}
                 >
-                  <Icon
-                    name={modalCloseIconName}
-                    size={12}
-                    className={modalCloseIconClassName}
-                  />
+                  <Icon name="close" size={12} />
                 </Button>
               </div>
             );
@@ -292,9 +266,7 @@ export function SimilarProductsModal({
           '',
         onSortChange: handleSortChange,
         onFilterMenuToggle: () => setIsFilterMenuOpen(true),
-        isLoading,
-        searchText,
-        setSearchText
+        isLoading
       });
     }
 
@@ -309,30 +281,15 @@ export function SimilarProductsModal({
     );
 
     const filterToggleClassName = twMerge(
-      'md:hidden text-xs px-3 py-2',
+      'md:hidden text-xs',
       settings?.customStyles?.filterToggleButton
     );
 
     const sortDropdownClassName = twMerge(
-      'h-10 px-3 md:px-4 text-sm md:text-xs bg-gray-200 hover:bg-gray-400 transition-colors duration-200 border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary w-full md:w-40 min-w-[120px]',
+      'h-10 px-4 text-md md:text-xs bg-gray-200 hover:bg-gray-400 transition-colors duration-200 border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary w-full md:w-40 min-w-[120px]',
       settings?.customStyles?.sortDropdown
     );
 
-    const modalSearchInputClassName = twMerge(
-      'h-10 px-3 md:px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-48 md:w-60 min-w-[180px]',
-      settings?.customStyles?.modalSearchInput
-    );
-
-    const modalSearchContainerClassName = twMerge(
-      'relative flex items-center',
-      settings?.customStyles?.modalSearchContainer
-    );
-
-    const modalSearchButtonClassName = twMerge(
-      'absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
-      settings?.customStyles?.modalSearchButton
-    );
-
     const renderItemCount = () => {
       if (settings?.customRenderers?.render?.modal?.renderItemCount) {
         return settings.customRenderers.render.modal.renderItemCount({
@@ -342,9 +299,7 @@ export function SimilarProductsModal({
       }
       return (
         <div className={itemCountClassName}>
-          <span className="hidden md:inline">
-            {searchResults?.pagination?.total_count || 0} items
-          </span>
+          {searchResults?.pagination?.total_count || 0} items
         </div>
       );
     };
@@ -364,11 +319,7 @@ export function SimilarProductsModal({
           onClick={() => setIsFilterMenuOpen(true)}
           data-testid="similar-products-filter"
         >
-          <Icon
-            name={filterIconName}
-            size={14}
-            className={filterIconClassName}
-          />
+          <Icon name="filter" size={14} />
           {t('common.product.filters')}
         </Button>
       );
@@ -404,134 +355,26 @@ export function SimilarProductsModal({
       );
     };
 
-    const renderModalSearchInput = () => {
-      if (
-        !settings?.enableTextSearch ||
-        searchText === undefined ||
-        !setSearchText ||
-        !searchResults?.products?.length ||
-        !searchResults?.sorters?.length
-      ) {
-        return null;
-      }
-
-      if (settings?.customRenderers?.render?.modal?.renderModalSearchInput) {
-        return settings.customRenderers.render.modal.renderModalSearchInput({
-          searchText,
-          setSearchText,
-          isLoading,
-          placeholder: t('common.search.placeholder'),
-          onSearch: handleTextSearch
-        });
-      }
-
-      return (
-        <div className={modalSearchContainerClassName}>
-          <Input
-            type="text"
-            value={searchText}
-            onChange={(e) => setSearchText(e.currentTarget.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && handleTextSearch) {
-                e.preventDefault();
-                handleTextSearch();
-              }
-            }}
-            placeholder={t('common.search.placeholder')}
-            className={twMerge(modalSearchInputClassName, 'pr-20')}
-            disabled={isLoading}
-          />
-          {searchText && (
-            <button
-              onClick={() => {
-                if (handleClearText) {
-                  handleClearText();
-                }
-              }}
-              disabled={isLoading}
-              className={twMerge(
-                'absolute right-12 top-1/2 -translate-y-1/2 p-2 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
-                settings?.customStyles?.modalSearchClearButton
-              )}
-            >
-              <Icon
-                name={modalSearchClearIconName}
-                size={16}
-                className={twMerge(
-                  'text-gray-400 hover:text-gray-600',
-                  settings?.customStyles?.modalSearchClearIcon
-                )}
-              />
-            </button>
-          )}
-          <button
-            onClick={() => {
-              if (handleTextSearch) {
-                handleTextSearch();
-              }
-            }}
-            disabled={isLoading}
-            className={modalSearchButtonClassName}
-          >
-            {settings?.customRenderers?.render?.modal?.renderSearchIcon ? (
-              settings.customRenderers.render.modal.renderSearchIcon({
-                disabled: isLoading,
-                onClick: handleTextSearch
-              })
-            ) : (
-              <Icon
-                name={modalSearchIconName}
-                size={18}
-                className={modalSearchIconClassName}
-              />
-            )}
-          </button>
-        </div>
-      );
-    };
-
     return (
       <div className={containerClassName}>
         <div
           className={twMerge(
-            'p-3 md:p-4',
-            settings?.enableTextSearch &&
-              searchText !== undefined &&
-              setSearchText
-              ? 'flex gap-3 md:grid md:grid-cols-3 md:gap-4 md:items-center'
-              : 'flex items-center justify-between',
+            'flex items-center justify-between p-3 md:p-4',
             settings?.customStyles?.controlsInner
           )}
         >
           <div
             className={twMerge(
-              'flex items-center gap-2 md:gap-3',
+              'flex items-center gap-3',
               settings?.customStyles?.controlsLeft
             )}
           >
             {renderItemCount()}
             {renderFilterToggle()}
           </div>
-          {settings?.enableTextSearch &&
-            searchText !== undefined &&
-            setSearchText && (
-              <div
-                className={twMerge(
-                  'flex items-center justify-center w-full',
-                  settings?.customStyles?.controlsCenter
-                )}
-              >
-                {renderModalSearchInput()}
-              </div>
-            )}
           <div
             className={twMerge(
               'relative',
-              settings?.enableTextSearch &&
-                searchText !== undefined &&
-                setSearchText
-                ? 'flex justify-end md:mt-0'
-                : '',
               settings?.customStyles?.controlsRight
             )}
           >
@@ -567,8 +410,6 @@ export function SimilarProductsModal({
             isLoading={isLoading}
             handleFacetChange={handleFacetChange}
             removeFacetFilter={removeFacetFilter}
-            searchText={searchText}
-            setSearchText={setSearchText}
             currentImageUrl={currentImageUrl}
             isCropping={isCropping}
             imageRef={imageRef}