@akinon/pz-similar-products 1.92.0-rc.20 → 1.92.0-rc.22

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

@@ -8,18 +8,29 @@ import { SimilarProductsPlugin } from './main';
 
 interface HeaderImageSearchFeatureProps {
   className?: string;
+  isEnabled?: boolean;
+  settings?: any;
 }
 
 export function HeaderImageSearchFeature({
-  className
+  className,
+  isEnabled: isEnabledProp,
+  settings
 }: HeaderImageSearchFeatureProps) {
-  const { isEnabled, isLoading } = useImageSearchFeature();
+  const { isEnabled: hookIsEnabled, isLoading } = useImageSearchFeature();
+
+  const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
+  const finalIsEnabled = envEnabled
+    ? true
+    : isEnabledProp !== undefined
+    ? isEnabledProp
+    : hookIsEnabled;
 
   const [isImageSearchModalOpen, setIsImageSearchModalOpen] = useState(false);
   const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
   const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
 
-  if (isLoading || !isEnabled) {
+  if (isLoading || !finalIsEnabled) {
     return null;
   }
 
@@ -44,7 +55,7 @@ export function HeaderImageSearchFeature({
 
   return (
     <>
-      {isEnabled && (
+      {finalIsEnabled && (
         <>
           <ImageSearchButton
             onClick={handleOpenImageSearch}
@@ -60,6 +71,7 @@ export function HeaderImageSearchFeature({
             uploadedImageFile={uploadedImageFile}
             onImageUpload={handleImageUpload}
             showResetButton={false}
+            settings={settings}
           />
         </>
       )}

package/src/views/image-search.tsx

@@ -3,6 +3,8 @@
 import React, { useEffect } from 'react';
 import { Modal, Button, Input } from '@akinon/next/components';
 import { useLocalization } from '@akinon/next/hooks';
+import { twMerge } from 'tailwind-merge';
+import { convertWebPToJPEG } from '../utils/image-conversion';
 
 interface ImageSearchModalProps {
   isOpen: boolean;
@@ -11,63 +13,33 @@ interface ImageSearchModalProps {
   handleImageFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
   clearError?: () => void;
+  settings?: any;
 }
 
-const convertWebPToJPEG = (file: File): Promise<File> => {
-  return new Promise((resolve, reject) => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-
-    img.onload = () => {
-      canvas.width = img.naturalWidth;
-      canvas.height = img.naturalHeight;
-
-      if (!ctx) {
-        reject(new Error('Canvas context not available'));
-        return;
-      }
-
-      ctx.drawImage(img, 0, 0);
-
-      canvas.toBlob(
-        (blob) => {
-          if (!blob) {
-            reject(new Error('Failed to convert image'));
-            return;
-          }
-
-          const convertedFile = new File(
-            [blob],
-            file.name.replace(/\.webp$/i, '.jpg'),
-            {
-              type: 'image/jpeg',
-              lastModified: Date.now()
-            }
-          );
-
-          resolve(convertedFile);
-        },
-        'image/jpeg',
-        0.9
-      );
-    };
-
-    img.onerror = () => reject(new Error('Failed to load image'));
-    img.src = URL.createObjectURL(file);
-  });
-};
-
 export function ImageSearchModal({
   isOpen,
   setIsOpen,
   fileInputRef,
   handleImageFileChange,
   className,
-  clearError
+  clearError,
+  settings
 }: ImageSearchModalProps) {
   const { t } = useLocalization();
 
+  // Check for custom modal renderer first
+  if (settings?.customRenderers?.render?.imageSearchModal?.renderModal) {
+    return settings.customRenderers.render.imageSearchModal.renderModal({
+      isOpen,
+      setIsOpen,
+      fileInputRef,
+      handleImageFileChange,
+      className,
+      clearError,
+      settings
+    });
+  }
+
   useEffect(() => {
     if (isOpen && clearError) {
       clearError();
@@ -107,46 +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="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="md:col-span-1 p-4">
-          <p className="mb-4 text-lg font-medium">
-            {t('common.search.image_search.upload_image')}
-          </p>
-          <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-            <Input
-              type="file"
-              ref={fileInputRef}
-              onChange={handleFileSelect}
-              accept="image/*"
-              className="hidden"
-            />
-            <Button
-              className="w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md"
-              onClick={() => fileInputRef.current?.click()}
+    <>
+      {isOpen && (
+        <div
+          className={twMerge(
+            'fixed inset-0 bg-black/50 z-[60]',
+            settings?.customStyles?.imageSearchModalOverlay
+          )}
+          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(
+            'grid grid-cols-1 md:grid-cols-2 gap-4',
+            settings?.customStyles?.imageSearchContent
+          )}
+        >
+          <div
+            className={twMerge(
+              'md:col-span-1 p-4',
+              settings?.customStyles?.imageSearchUploadSection
+            )}
+          >
+            <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
+              )}
             >
-              {t('common.search.image_search.select_image')}
-            </Button>
+              <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 font-medium',
+                settings?.customStyles?.imageSearchTipsTitle
+              )}
+            >
+              {t('common.search.image_search.best_results')}
+            </p>
+            <ul
+              className={twMerge(
+                'text-left list-disc pl-5 text-sm text-gray-600',
+                settings?.customStyles?.imageSearchTipsList
+              )}
+            >
+              <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 className="md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4">
-          <p className="mb-2 font-medium">
-            {t('common.search.image_search.best_results')}
-          </p>
-          <ul className="text-left list-disc pl-5 text-sm text-gray-600">
-            <li className="mb-2">{t('common.search.image_search.tip_1')}</li>
-            <li className="mb-2">{t('common.search.image_search.tip_2')}</li>
-            <li className="mb-2">{t('common.search.image_search.tip_3')}</li>
-            <li className="mb-2">{t('common.search.image_search.tip_4')}</li>
-          </ul>
-        </div>
-      </div>
-    </Modal>
+      </Modal>
+    </>
   );
 }

package/src/views/main.tsx

@@ -56,7 +56,8 @@ export function SimilarProductsPlugin({
     loadedPages,
     fetchSimilarProductsByImageUrl,
     fetchSimilarProductsByImageCrop,
-    clearError
+    clearError,
+    clearResults
   } = useSimilarProducts(product);
 
   const {
@@ -108,6 +109,7 @@ export function SimilarProductsPlugin({
     if (!isOpen) {
       setHasInitialSearchDone(false);
       clearError();
+      clearResults();
     }
   }, [
     isOpen,
@@ -115,7 +117,8 @@ export function SimilarProductsPlugin({
     activeIndex,
     hasUploadedImage,
     hasInitialSearchDone,
-    clearError
+    clearError,
+    clearResults
   ]);
 
   useEffect(() => {
@@ -142,6 +145,11 @@ export function SimilarProductsPlugin({
     }
   };
 
+  const handleModalClose = () => {
+    resetCrop();
+    onClose();
+  };
+
   const ModalComponent =
     settings.customRenderers?.Modal || SimilarProductsModal;
   const ImageSearchModalComponent =
@@ -151,7 +159,7 @@ export function SimilarProductsPlugin({
     <>
       <ModalComponent
         isOpen={isOpen}
-        onClose={onClose}
+        onClose={handleModalClose}
         searchResults={searchResults}
         resultsKey={resultsKey}
         isLoading={isLoading}
@@ -194,6 +202,7 @@ export function SimilarProductsPlugin({
         handleImageFileChange={handleImageSearchFileChange}
         className={settings.customStyles?.imageSearchModal}
         clearError={clearError}
+        settings={settings}
       />
     </>
   );

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

@@ -12,17 +12,26 @@ interface ProductImageSearchFeatureProps {
   activeIndex?: number;
   settings?: any;
   className?: string;
+  isEnabled?: boolean;
 }
 
 export function ProductImageSearchFeature({
   product,
   activeIndex = 0,
   settings: userSettings,
-  className = 'absolute top-6 left-6 z-[20]'
+  className = 'absolute top-6 left-6 z-[20]',
+  isEnabled: isEnabledProp
 }: ProductImageSearchFeatureProps) {
   const settings = mergeSettings(userSettings);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const { isEnabled } = useImageSearchFeature();
+  const { isEnabled: hookIsEnabled } = useImageSearchFeature();
+
+  const envEnabled = process.env.NEXT_PUBLIC_ENABLE_IMAGE_SEARCH === 'true';
+  const finalIsEnabled = envEnabled
+    ? true
+    : isEnabledProp !== undefined
+    ? isEnabledProp
+    : hookIsEnabled;
 
   const handleClick = () => {
     setIsModalOpen(true);
@@ -30,7 +39,7 @@ export function ProductImageSearchFeature({
 
   return (
     <>
-      {isEnabled && (
+      {finalIsEnabled && (
         <>
           <SimilarProductsButton onClick={handleClick} className={className} />
 

package/src/views/results.tsx

@@ -95,7 +95,12 @@ export function SimilarProductsResultsGrid({
 
     return (
       <div className={emptyStateClassName}>
-        <div className="text-center">
+        <div
+          className={twMerge(
+            'text-center',
+            settings?.customStyles?.emptyStateInner
+          )}
+        >
           <svg
             className={emptyStateIconClassName}
             fill="none"
@@ -229,7 +234,12 @@ export function SimilarProductsResultsGrid({
               )}
 
               {renderProductPrice() || (
-                <div className="price-container">
+                <div
+                  className={twMerge(
+                    'price-container',
+                    settings?.customStyles?.productPriceContainer
+                  )}
+                >
                   <span className={productPriceClassName}>
                     {product.price} ₺
                   </span>
@@ -516,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();
@@ -575,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-modal.tsx

@@ -196,7 +196,12 @@ export function SimilarProductsModal({
 
     return (
       <div className={containerClassName}>
-        <div className="flex flex-wrap gap-2">
+        <div
+          className={twMerge(
+            'flex flex-wrap gap-2',
+            settings?.customStyles?.activeFiltersWrapper
+          )}
+        >
           {activeFilters.map((filter) => {
             if (
               settings?.customRenderers?.render?.modal?.renderActiveFilterTag
@@ -321,6 +326,10 @@ export function SimilarProductsModal({
     };
 
     const renderSortDropdown = () => {
+      if (!searchResults?.products?.length || !searchResults?.sorters?.length) {
+        return null;
+      }
+
       if (settings?.customRenderers?.render?.modal?.renderSortDropdown) {
         return settings.customRenderers.render.modal.renderSortDropdown({
           sorters: searchResults?.sorters || [],
@@ -348,12 +357,29 @@ export function SimilarProductsModal({
 
     return (
       <div className={containerClassName}>
-        <div className="flex items-center justify-between p-3 md:p-4">
-          <div className="flex items-center gap-3">
+        <div
+          className={twMerge(
+            'flex items-center justify-between p-3 md:p-4',
+            settings?.customStyles?.controlsInner
+          )}
+        >
+          <div
+            className={twMerge(
+              'flex items-center gap-3',
+              settings?.customStyles?.controlsLeft
+            )}
+          >
             {renderItemCount()}
             {renderFilterToggle()}
           </div>
-          <div className="relative">{renderSortDropdown()}</div>
+          <div
+            className={twMerge(
+              'relative',
+              settings?.customStyles?.controlsRight
+            )}
+          >
+            {renderSortDropdown()}
+          </div>
         </div>
       </div>
     );
@@ -371,8 +397,12 @@ export function SimilarProductsModal({
         {renderActiveFilters()}
         {renderControls()}
 
-        {/* Main Content */}
-        <div className="flex flex-col md:grid md:grid-cols-5 gap-0 flex-1 overflow-hidden">
+        <div
+          className={twMerge(
+            'flex flex-col md:grid md:grid-cols-5 gap-0 flex-1 overflow-hidden',
+            settings?.customStyles?.modalContent
+          )}
+        >
           <FilterSidebarComponent
             isFilterMenuOpen={isFilterMenuOpen}
             setIsFilterMenuOpen={setIsFilterMenuOpen}
@@ -403,7 +433,12 @@ export function SimilarProductsModal({
             className={settings?.customStyles?.filterSidebar}
           />
 
-          <div className="flex-1 md:col-span-4 p-3 md:p-4 overflow-y-auto">
+          <div
+            className={twMerge(
+              'flex-1 md:col-span-4 p-3 md:p-4 overflow-y-auto',
+              settings?.customStyles?.resultsContainer
+            )}
+          >
             <ResultsGridComponent
               searchResults={searchResults}
               resultsKey={resultsKey}