@akinon/pz-virtual-try-on 2.0.0-beta.15 → 2.0.0-beta.16

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @akinon/pz-virtual-try-on
 
+## 2.0.0-beta.16
+
+### Minor Changes
+
+- 187208d2: ZERO-3913 :Implement closeCrop functionality and enhance modal behavior in virtual try-on feature
+
+### Patch Changes
+
+- Updated dependencies [823d82f9]
+- Updated dependencies [d2c0e759]
+- Updated dependencies [68bbcb27]
+- Updated dependencies [9b7d0de6]
+- Updated dependencies [5ec0faf8]
+  - @akinon/next@2.0.0-beta.16
+
 ## 2.0.0-beta.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-virtual-try-on",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {
@@ -8,7 +8,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/next": "2.0.0-beta.15",
+    "@akinon/next": "2.0.0-beta.16",
     "clsx": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-image-crop": "^11.0.5"

package/src/hooks/use-image-cropper.ts

@@ -156,10 +156,28 @@ export function useImageCropper(
     });
   };
 
+  const closeCrop = () => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    setIsCropping(false);
+    setCompletedCrop(null);
+    setCrop(undefined as any);
+  };
+
   const confirmCrop = useCallback(async () => {
     if (completedCrop) {
       await processManualCrop(completedCrop);
       setIsCropping(false);
+      setCompletedCrop(null);
+      setCrop({
+        unit: '%',
+        x: 25,
+        y: 25,
+        width: 50,
+        height: 50
+      });
     }
   }, [completedCrop, processManualCrop]);
 
@@ -175,6 +193,7 @@ export function useImageCropper(
     processCompletedCrop,
     processManualCrop,
     confirmCrop,
-    resetCrop
+    resetCrop,
+    closeCrop
   };
 }

package/src/hooks/use-virtual-try-on.ts

@@ -353,6 +353,7 @@ export function useVirtualTryOn(product: Product) {
                 data.error || data.result?.error || 'Processing failed';
               setError(errorMsg);
               setCurrentStep('processing');
+              cropperHook.closeCrop();
               return;
             }
           } catch (pollError: any) {
@@ -370,6 +371,7 @@ export function useVirtualTryOn(product: Product) {
         error?.message === 'Request aborted'
       ) {
         setCurrentStep('upload');
+        cropperHook.closeCrop();
         return;
       }
 
@@ -378,11 +380,23 @@ export function useVirtualTryOn(product: Product) {
           error?.message ||
           'Virtual try-on processing failed'
       );
-      setCurrentStep('upload');
+      setError(
+        error?.data?.message ||
+          error?.message ||
+          'Virtual try-on processing failed'
+      );
+      setCurrentStep('processing');
+      cropperHook.closeCrop();
     } finally {
       setAbortController(null);
     }
-  }, [uploadedImage, product, processVirtualTryOn, abortController]);
+  }, [
+    uploadedImage,
+    product,
+    processVirtualTryOn,
+    abortController,
+    cropperHook
+  ]);
 
   const acceptLegalConsent = useCallback(() => {
     setLegalConsentAccepted();

package/src/views/main.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { Product } from '@akinon/next/types';
 import { twMerge } from 'tailwind-merge';
 import { VirtualTryOnModal } from './virtual-try-on-modal';
@@ -30,6 +30,18 @@ export function VirtualTryOnPlugin({
   const [isModalLoading, setIsModalLoading] = useState(false);
   const { isEnabled } = useVirtualTryOn(product);
 
+  useEffect(() => {
+    return () => {
+      document.documentElement.style.overflow = '';
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isModalOpen && !isModalLoading) {
+      document.documentElement.style.overflow = '';
+    }
+  }, [isModalOpen, isModalLoading]);
+
   const cssVariables = useMemo(() => {
     if (!settings?.cssVariables && !settings?.theme) return {};
 
@@ -98,10 +110,12 @@ export function VirtualTryOnPlugin({
     setTimeout(() => {
       setIsModalLoading(false);
       setIsModalOpen(true);
+      document.documentElement.style.overflow = 'hidden';
     }, 500);
   };
 
   const handleCloseModal = () => {
+    document.documentElement.style.overflow = '';
     setIsModalOpen(false);
     setIsModalLoading(false);
   };

package/src/views/virtual-try-on-upload-modal.tsx

@@ -151,12 +151,19 @@ export function VirtualTryOnUploadModal({
     imageRef,
     handleCropComplete = () => {},
     toggleCropMode = () => {},
-    confirmCrop = () => {}
+    confirmCrop = () => {},
+    closeCrop = () => {}
   } = cropperHook || {};
 
   const [shouldProcessAfterCrop, setShouldProcessAfterCrop] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
 
+  useEffect(() => {
+    if (error && closeCrop) {
+      closeCrop();
+    }
+  }, [error, closeCrop]);
+
   useEffect(() => {
     if (shouldProcessAfterCrop && uploadedImage && !isCropLoading) {
       setShouldProcessAfterCrop(false);
@@ -1011,14 +1018,17 @@ export function VirtualTryOnUploadModal({
                             minWidth={100}
                             minHeight={100}
                             keepSelection={true}
-                            className="w-full"
+                            className={twMerge(
+                              'w-full',
+                              error && 'pointer-events-none'
+                            )}
                           >
                             <img
                               ref={imageRef}
                               src={uploadedImage || ''}
                               alt="Uploaded image"
                               className={twMerge(
-                                'rounded-[4px] w-auto',
+                                'rounded-[4px] w-auto pointer-events-none select-none',
                                 settings?.customStyles?.cropImage
                               )}
                             />
@@ -1166,6 +1176,8 @@ export function VirtualTryOnUploadModal({
                                     completedCrop.height > 10
                                   ) {
                                     await confirmCrop();
+                                    // Reset crop selection after confirm
+                                    setCrop(undefined);
                                     setShouldProcessAfterCrop(true);
                                   } else {
                                     processTryOn();