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

package/CHANGELOG.md

@@ -1,45 +1,7 @@
 # @akinon/pz-similar-products
 
-## 1.92.0-rc.27
+## 1.92.0-snapshot-ZERO-3457-20250627121541
 
 ### Minor Changes
 
-- d606f4a: ZERO-3481: Add locale and currency to list endpoint
-
-## 1.92.0-rc.26
-
-## 1.92.0-rc.25
-
-## 1.92.0-rc.24
-
-## 1.92.0-rc.23
-
-## 1.92.0-rc.22
-
-### Minor Changes
-
-- 143be2b: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-
-## 1.92.0-rc.21
-
-### Minor Changes
-
-- d99a6a7: ZERO-3457: Fixed the settings prop and made sure everything is customizable.
-
-## 1.92.0-rc.20
-
-### Minor Changes
-
-- 8b1d24e: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-
-## 1.92.0-rc.19
-
-### Minor Changes
-
-- d8be48f: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-
-## 1.92.0-rc.18
-
-## 1.92.0-rc.17
-
-## 1.92.0-rc.16
+- d99a6a7: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.

package/README.md

@@ -272,18 +272,6 @@ interface SimilarProductsSettings {
     mobileActiveFilters?: string;
     mobileActiveFilterTag?: string;
     mobileClearAllButton?: string;
-
-    // New crop-related custom styles
-    cropComponent?: string;
-    cropImage?: string;
-    cropImageActive?: string;
-    cropImageNonCropping?: string;
-    cropImageContainer?: string;
-    cropOverlay?: string;
-    cropSelection?: string;
-    cropSelectionBorder?: string;
-    cropOverlayBackground?: string;
-    cropSelectionHighlight?: string;
   };
 
   // 25+ render functions for granular control
@@ -569,18 +557,7 @@ const settings = {
     productItem: 'hover:scale-105 transition-all duration-300 shadow-lg',
     filterSidebar: 'bg-gradient-to-b from-gray-50 to-white',
     paginationButton: 'rounded-full px-4 py-2 bg-blue-600 text-white',
-    activeFilterTag: 'bg-blue-100 text-blue-800 px-3 py-1 rounded-full',
-
-    // Advanced crop styling
-    cropComponent: 'border-2 border-dashed border-blue-300 rounded-lg',
-    cropImage: 'rounded-lg shadow-md',
-    cropImageActive: 'brightness-110 contrast-110',
-    cropImageNonCropping: 'hover:scale-105 transition-transform',
-    cropImageContainer: 'bg-gray-50 rounded-lg p-2',
-    cropOverlay: 'backdrop-blur-sm',
-    cropOverlayBackground: 'bg-black/60',
-    cropSelection: 'border-4 border-blue-500',
-    cropSelectionHighlight: 'shadow-2xl shadow-blue-500/50'
+    activeFilterTag: 'bg-blue-100 text-blue-800 px-3 py-1 rounded-full'
   }
 };
 ```
@@ -1513,7 +1490,6 @@ const hybridAdvancedSettings = {
 - `filterSidebar`, `filterSidebarMobileHeader`, `filterGroup`, `filterGroupTitle`, `filterGroupContent`
 - `filterItem`, `filterItemInput`, `filterItemLabel`, `filterItemCount`
 - `imageSection`, `imageContainer`, `imageWrapper`, `cropButton`, `tickButton`, `uploadButton`, `resetButton`, `errorMessage`, `cropControls`
-- `cropComponent`, `cropImage`, `cropImageActive`, `cropImageNonCropping`, `cropImageContainer`, `cropOverlay`, `cropSelection`, `cropSelectionBorder`, `cropOverlayBackground`, `cropSelectionHighlight`
 - `mobileActiveFilters`, `mobileActiveFilterTag`, `mobileClearAllButton`
 
 **Products & Results:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-similar-products",
-  "version": "1.92.0-rc.27",
+  "version": "1.92.0-snapshot-ZERO-3457-20250627121541",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {

package/src/hooks/use-similar-products.ts

@@ -874,14 +874,6 @@ export function useSimilarProducts(product: Product) {
     setFileError('');
   }, []);
 
-  const clearResults = useCallback(() => {
-    setSearchResults(null);
-    setResultsKey(0);
-    setLastProductIds([]);
-    setAllLoadedProducts([]);
-    setLoadedPages(new Set([1]));
-  }, []);
-
   const clearFileInput = useCallback(
     (fileInputRef: React.RefObject<HTMLInputElement>) => {
       if (fileInputRef.current) {
@@ -948,7 +940,6 @@ export function useSimilarProducts(product: Product) {
     loadedPages: Array.from(loadedPages),
     allLoadedProducts,
     clearError,
-    clearResults,
     clearFileInput
   };
 }

package/src/types/index.ts

@@ -357,19 +357,6 @@ export interface SimilarProductsSettings {
     errorMessage?: string;
     cropControls?: string;
 
-    // Detailed crop styling
-    cropComponent?: string;
-    cropImage?: string;
-    cropImageActive?: string;
-    cropOverlay?: string;
-    cropSelection?: string;
-    cropSelectionBorder?: string;
-    cropImageNonCropping?: string;
-    cropImageContainer?: string;
-    cropImageWrapper?: string;
-    cropOverlayBackground?: string;
-    cropSelectionHighlight?: string;
-
     resultsContainer?: string;
     gridContainer?: string;
     productItem?: string;

package/src/views/filters.tsx

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

package/src/views/main.tsx

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

package/src/views/results.tsx

@@ -526,14 +526,10 @@ export function SimilarProductsResultsGrid({
     );
   };
 
-  if (isLoading && (!searchResults || !searchResults.products?.length)) {
+  if (isLoading && (!searchResults || !searchResults.products)) {
     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();
@@ -589,14 +585,16 @@ export function SimilarProductsResultsGrid({
     <div className={gridClassName}>
       {isLoading &&
         searchResults &&
-        searchResults.products?.length > 0 &&
+        searchResults.products &&
         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

@@ -326,10 +326,6 @@ 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 || [],