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

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

@@ -1,47 +1,43 @@
 '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();
 
-  if (isLoading || !isEnabled) {
-    return null;
-  }
+  const imageSearchButtonIconName =
+    settings?.iconNames?.imageSearchButton || 'search';
+  const imageSearchButtonIconClassName = twMerge(
+    'text-black',
+    settings?.customStyles?.imageSearchButtonIcon
+  );
 
   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

@@ -5,7 +5,6 @@ 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;
@@ -13,6 +12,7 @@ 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: isEnabledProp
+  isEnabled = false,
+  enableTextSearch = false
 }: ProductImageSearchFeatureProps) {
-  const settings = mergeSettings(userSettings);
+  const settings = mergeSettings({
+    ...userSettings,
+    enableTextSearch
+  });
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const { isEnabled: hookIsEnabled } = useImageSearchFeature();
 
-  const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
-  const finalIsEnabled = envEnabled
-    ? true
-    : isEnabledProp !== undefined
-    ? isEnabledProp
-    : hookIsEnabled;
+  if (!isEnabled) {
+    return null;
+  }
 
   const handleClick = () => {
     setIsModalOpen(true);
@@ -39,19 +39,19 @@ export function ProductImageSearchFeature({
 
   return (
     <>
-      {finalIsEnabled && (
-        <>
-          <SimilarProductsButton onClick={handleClick} className={className} />
+      <SimilarProductsButton
+        onClick={handleClick}
+        className={className}
+        settings={settings}
+      />
 
-          <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,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>

package/src/views/search-modal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Modal, Button, Icon, Select } from '@akinon/next/components';
+import { Modal, Button, Icon, Select, Input } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { SimilarProductsFilterSidebar } from './filters';
 import { SimilarProductsResultsGrid } from './results';
@@ -43,7 +43,11 @@ export function SimilarProductsModal({
   fileError,
   showResetButton = true,
   settings,
-  className
+  className,
+  searchText,
+  setSearchText,
+  handleTextSearch,
+  handleClearText
 }: SimilarProductsModalProps) {
   const { t } = useLocalization();
 
@@ -164,6 +168,24 @@ 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({
@@ -246,7 +268,11 @@ export function SimilarProductsModal({
                   disabled={isLoading}
                   className={buttonClassName}
                 >
-                  <Icon name="close" size={12} />
+                  <Icon
+                    name={modalCloseIconName}
+                    size={12}
+                    className={modalCloseIconClassName}
+                  />
                 </Button>
               </div>
             );
@@ -266,7 +292,9 @@ export function SimilarProductsModal({
           '',
         onSortChange: handleSortChange,
         onFilterMenuToggle: () => setIsFilterMenuOpen(true),
-        isLoading
+        isLoading,
+        searchText,
+        setSearchText
       });
     }
 
@@ -281,15 +309,30 @@ export function SimilarProductsModal({
     );
 
     const filterToggleClassName = twMerge(
-      'md:hidden text-xs',
+      'md:hidden text-xs px-3 py-2',
       settings?.customStyles?.filterToggleButton
     );
 
     const sortDropdownClassName = twMerge(
-      '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]',
+      '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]',
       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({
@@ -299,7 +342,9 @@ export function SimilarProductsModal({
       }
       return (
         <div className={itemCountClassName}>
-          {searchResults?.pagination?.total_count || 0} items
+          <span className="hidden md:inline">
+            {searchResults?.pagination?.total_count || 0} items
+          </span>
         </div>
       );
     };
@@ -319,7 +364,11 @@ export function SimilarProductsModal({
           onClick={() => setIsFilterMenuOpen(true)}
           data-testid="similar-products-filter"
         >
-          <Icon name="filter" size={14} />
+          <Icon
+            name={filterIconName}
+            size={14}
+            className={filterIconClassName}
+          />
           {t('common.product.filters')}
         </Button>
       );
@@ -355,26 +404,134 @@ 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(
-            'flex items-center justify-between p-3 md:p-4',
+            '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',
             settings?.customStyles?.controlsInner
           )}
         >
           <div
             className={twMerge(
-              'flex items-center gap-3',
+              'flex items-center gap-2 md: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
             )}
           >
@@ -410,6 +567,8 @@ export function SimilarProductsModal({
             isLoading={isLoading}
             handleFacetChange={handleFacetChange}
             removeFacetFilter={removeFacetFilter}
+            searchText={searchText}
+            setSearchText={setSearchText}
             currentImageUrl={currentImageUrl}
             isCropping={isCropping}
             imageRef={imageRef}

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

@@ -1,32 +0,0 @@
-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
-  };
-}