@akinon/pz-similar-products 1.92.0-rc.21 → 1.92.0-rc.23

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/pz-similar-products
 
+## 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

package/README.md

@@ -272,6 +272,18 @@ 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
@@ -557,7 +569,18 @@ 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'
+    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'
   }
 };
 ```
@@ -1490,6 +1513,7 @@ 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.21",
+  "version": "1.92.0-rc.23",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {

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

@@ -874,6 +874,14 @@ 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) {
@@ -940,6 +948,7 @@ export function useSimilarProducts(product: Product) {
     loadedPages: Array.from(loadedPages),
     allLoadedProducts,
     clearError,
+    clearResults,
     clearFileInput
   };
 }

package/src/types/index.ts

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

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}

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-modal.tsx

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