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

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/image-search.tsx

@@ -79,114 +79,126 @@ export function ImageSearchModal({
   };
 
   return (
-    <Modal
-      portalId="image-search-modal"
-      title={t('common.search.image_search.title')}
-      open={isOpen}
-      setOpen={setIsOpen}
-      className={`w-full max-w-2xl max-h-[90vh] overflow-auto ${
-        className || ''
-      }`}
-    >
-      <div
-        className={twMerge(
-          'grid grid-cols-1 md:grid-cols-2 gap-4',
-          settings?.customStyles?.imageSearchContent
-        )}
-      >
+    <>
+      {isOpen && (
         <div
           className={twMerge(
-            'md:col-span-1 p-4',
-            settings?.customStyles?.imageSearchUploadSection
+            'fixed inset-0 bg-black/50 z-[60]',
+            settings?.customStyles?.imageSearchModalOverlay
           )}
-        >
-          <p
-            className={twMerge(
-              'mb-4 text-lg font-medium',
-              settings?.customStyles?.imageSearchUploadTitle
-            )}
-          >
-            {t('common.search.image_search.upload_image')}
-          </p>
-          <div
-            className={twMerge(
-              'border-2 border-dashed border-gray-300 rounded-lg p-8 text-center',
-              settings?.customStyles?.imageSearchUploadArea
-            )}
-          >
-            <Input
-              type="file"
-              ref={fileInputRef}
-              onChange={handleFileSelect}
-              accept="image/*"
-              className="hidden"
-            />
-            <Button
-              className={twMerge(
-                'w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md',
-                settings?.customStyles?.imageSearchUploadButton
-              )}
-              onClick={() => fileInputRef.current?.click()}
-            >
-              {t('common.search.image_search.select_image')}
-            </Button>
-          </div>
-        </div>
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+
+      <Modal
+        portalId="image-search-modal"
+        title={t('common.search.image_search.title')}
+        open={isOpen}
+        setOpen={setIsOpen}
+        className={`w-full max-w-2xl max-h-[90vh] overflow-auto ${
+          className || ''
+        }`}
+      >
         <div
           className={twMerge(
-            'md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4',
-            settings?.customStyles?.imageSearchTipsSection
+            'grid grid-cols-1 md:grid-cols-2 gap-4',
+            settings?.customStyles?.imageSearchContent
           )}
         >
-          <p
-            className={twMerge(
-              'mb-2 font-medium',
-              settings?.customStyles?.imageSearchTipsTitle
-            )}
-          >
-            {t('common.search.image_search.best_results')}
-          </p>
-          <ul
+          <div
             className={twMerge(
-              'text-left list-disc pl-5 text-sm text-gray-600',
-              settings?.customStyles?.imageSearchTipsList
+              'md:col-span-1 p-4',
+              settings?.customStyles?.imageSearchUploadSection
             )}
           >
-            <li
+            <p
               className={twMerge(
-                'mb-2',
-                settings?.customStyles?.imageSearchTipsItem
+                'mb-4 text-lg font-medium',
+                settings?.customStyles?.imageSearchUploadTitle
               )}
             >
-              {t('common.search.image_search.tip_1')}
-            </li>
-            <li
+              {t('common.search.image_search.upload_image')}
+            </p>
+            <div
               className={twMerge(
-                'mb-2',
-                settings?.customStyles?.imageSearchTipsItem
+                'border-2 border-dashed border-gray-300 rounded-lg p-8 text-center',
+                settings?.customStyles?.imageSearchUploadArea
               )}
             >
-              {t('common.search.image_search.tip_2')}
-            </li>
-            <li
+              <Input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleFileSelect}
+                accept="image/*"
+                className="hidden"
+              />
+              <Button
+                className={twMerge(
+                  'w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md',
+                  settings?.customStyles?.imageSearchUploadButton
+                )}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {t('common.search.image_search.select_image')}
+              </Button>
+            </div>
+          </div>
+          <div
+            className={twMerge(
+              'md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4',
+              settings?.customStyles?.imageSearchTipsSection
+            )}
+          >
+            <p
               className={twMerge(
-                'mb-2',
-                settings?.customStyles?.imageSearchTipsItem
+                'mb-2 font-medium',
+                settings?.customStyles?.imageSearchTipsTitle
               )}
             >
-              {t('common.search.image_search.tip_3')}
-            </li>
-            <li
+              {t('common.search.image_search.best_results')}
+            </p>
+            <ul
               className={twMerge(
-                'mb-2',
-                settings?.customStyles?.imageSearchTipsItem
+                'text-left list-disc pl-5 text-sm text-gray-600',
+                settings?.customStyles?.imageSearchTipsList
               )}
             >
-              {t('common.search.image_search.tip_4')}
-            </li>
-          </ul>
+              <li
+                className={twMerge(
+                  'mb-2',
+                  settings?.customStyles?.imageSearchTipsItem
+                )}
+              >
+                {t('common.search.image_search.tip_1')}
+              </li>
+              <li
+                className={twMerge(
+                  'mb-2',
+                  settings?.customStyles?.imageSearchTipsItem
+                )}
+              >
+                {t('common.search.image_search.tip_2')}
+              </li>
+              <li
+                className={twMerge(
+                  'mb-2',
+                  settings?.customStyles?.imageSearchTipsItem
+                )}
+              >
+                {t('common.search.image_search.tip_3')}
+              </li>
+              <li
+                className={twMerge(
+                  'mb-2',
+                  settings?.customStyles?.imageSearchTipsItem
+                )}
+              >
+                {t('common.search.image_search.tip_4')}
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-    </Modal>
+      </Modal>
+    </>
   );
 }

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>