@akinon/pz-virtual-try-on 2.0.34-beta.0 → 2.0.34

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

@@ -8,12 +8,17 @@ import type {
   VirtualTryOnJobStatus
 } from '../types';
 import {
+  useVirtualTryOnSingleMutation,
   useVirtualTryOnAsyncMutation,
   useLazyGetVirtualTryOnJobStatusQuery,
   useSubmitVirtualTryOnFeedbackMutation
 } from '../data/endpoints';
 import { VirtualTryOnPoller } from '../utils/polling';
-import { hasLegalConsentAccepted, setLegalConsentAccepted } from '../utils';
+import {
+  hasLegalConsentAccepted,
+  setLegalConsentAccepted,
+  parseVirtualTryOnError
+} from '../utils';
 import { useImageCropper } from './use-image-cropper';
 
 const extractCategoryIds = (
@@ -66,6 +71,13 @@ const extractCategoryIds = (
   return categoryIds;
 };
 
+const resolveStartErrorMessage = (err: any, fallback: string): string => {
+  if (err?.status === 429 || err?.data?.code === 'TRY_ON_LIMIT_EXCEEDED') {
+    return parseVirtualTryOnError(err?.data?.error || err?.data?.message || '');
+  }
+  return err?.data?.message || err?.message || fallback;
+};
+
 export function useVirtualTryOnAsync(
   products: BasketProduct | BasketProduct[],
   categoryMapping: Record<string, number[]> = {}
@@ -85,11 +97,16 @@ export function useVirtualTryOnAsync(
   const [feedbackStates, setFeedbackStates] = useState<
     Record<number, 'positive' | 'negative' | null>
   >({});
+  const [limitInfo, setLimitInfo] = useState<{
+    tryon_limit?: number;
+    used_count?: number;
+  } | null>(null);
   const [isCropLoading, setIsCropLoading] = useState(false);
   const [abortController, setAbortController] =
     useState<AbortController | null>(null);
 
   const pollerRef = useRef<VirtualTryOnPoller | null>(null);
+  const maxAttemptsRef = useRef(productsArray.length > 1 ? 150 : 60);
 
   const cropperHook = useImageCropper(
     setIsCropLoading,
@@ -99,8 +116,11 @@ export function useVirtualTryOnAsync(
     () => setFileError('')
   );
 
-  const [startAsyncTryOn, { isLoading: isStarting }] =
+  const [startSingleTryOn, { isLoading: isStartingSingle }] =
+    useVirtualTryOnSingleMutation();
+  const [startAsyncTryOn, { isLoading: isStartingMultiple }] =
     useVirtualTryOnAsyncMutation();
+  const isStarting = isStartingSingle || isStartingMultiple;
   const [getJobStatus] = useLazyGetVirtualTryOnJobStatusQuery();
   const [submitFeedback] = useSubmitVirtualTryOnFeedbackMutation();
 
@@ -198,6 +218,7 @@ export function useVirtualTryOnAsync(
     setResults([]);
     setPollingAttempts(0);
     setFeedbackStates({});
+    setLimitInfo(null);
 
     try {
       const productsData = productsArray.map((product) => {
@@ -220,14 +241,18 @@ export function useVirtualTryOnAsync(
         };
       });
 
-      const requestData = {
-        products: productsData,
-        reference_image: uploadedImage
-      };
-
       let response;
       try {
-        response = await startAsyncTryOn(requestData).unwrap();
+        response =
+          productsData.length === 1
+            ? await startSingleTryOn({
+                ...productsData[0],
+                reference_image: uploadedImage
+              }).unwrap()
+            : await startAsyncTryOn({
+                products: productsData,
+                reference_image: uploadedImage
+              }).unwrap();
       } catch (apiError: any) {
         console.error('[useVirtualTryOnAsync] API Error:', apiError);
         throw apiError;
@@ -239,16 +264,19 @@ export function useVirtualTryOnAsync(
         return;
       }
 
-      if (!response || !response.reference_url) {
+      if (!response || !response.process_id) {
         throw new Error('Invalid response from server');
       }
 
-      setReferenceUrl(response.reference_url);
+      setReferenceUrl(response.process_id);
       setJobStatus('pending');
 
+      const maxAttempts = productsData.length > 1 ? 150 : 60;
+      maxAttemptsRef.current = maxAttempts;
+
       pollerRef.current = new VirtualTryOnPoller({
-        referenceUrl: response.reference_url,
-        maxAttempts: 60,
+        referenceUrl: response.process_id,
+        maxAttempts,
         interval: 2000,
         abortSignal: controller.signal,
         onStatusChange: (status, attempts) => {
@@ -262,8 +290,16 @@ export function useVirtualTryOnAsync(
 
           setJobStatus('completed');
 
+          if (result.tryon_limit !== undefined) {
+            setLimitInfo({
+              tryon_limit: result.tryon_limit,
+              used_count: result.used_count
+            });
+          }
+
           if (
-            result.result?.job_type === 'multiple' &&
+            (result.result?.job_type === 'multiple_try_on' ||
+              result.result?.job_type === 'multiple') &&
             result.result?.multiple?.products
           ) {
             const apiProducts = result.result.multiple.products;
@@ -276,6 +312,7 @@ export function useVirtualTryOnAsync(
                   reference: apiResult.reference,
                   generated: apiResult.generated,
                   selected: apiResult.selected,
+                  used_count: apiResult.used_count,
                   error: apiResult.error || null
                 };
               }
@@ -326,7 +363,11 @@ export function useVirtualTryOnAsync(
         },
         onTimeout: () => {
           setJobStatus('failed');
-          setError('Processing timeout after 60 attempts (60 seconds)');
+          setError(
+            `Processing timeout after ${maxAttempts} attempts (${
+              (maxAttempts * 2) / 60
+            } minutes)`
+          );
         }
       });
 
@@ -346,7 +387,7 @@ export function useVirtualTryOnAsync(
       }
 
       setJobStatus('failed');
-      setError(err.data?.message || err.message || 'Failed to start try-on');
+      setError(resolveStartErrorMessage(err, 'Failed to start try-on'));
     } finally {
       setAbortController(null);
     }
@@ -354,6 +395,7 @@ export function useVirtualTryOnAsync(
     uploadedImage,
     productsArray,
     categoryMapping,
+    startSingleTryOn,
     startAsyncTryOn,
     getJobStatus,
     abortController
@@ -407,6 +449,7 @@ export function useVirtualTryOnAsync(
     setError(null);
     setFileError('');
     setFeedbackStates({});
+    setLimitInfo(null);
     setAbortController(null);
     cropperHook.resetCrop();
   }, [cropperHook, abortController]);
@@ -480,14 +523,18 @@ export function useVirtualTryOnAsync(
         };
       });
 
-      const requestData = {
-        products: productsData,
-        reference_image: uploadedImage
-      };
-
       let response;
       try {
-        response = await startAsyncTryOn(requestData).unwrap();
+        response =
+          productsData.length === 1
+            ? await startSingleTryOn({
+                ...productsData[0],
+                reference_image: uploadedImage
+              }).unwrap()
+            : await startAsyncTryOn({
+                products: productsData,
+                reference_image: uploadedImage
+              }).unwrap();
       } catch (apiError: any) {
         console.error('[useVirtualTryOnAsync] Retry API Error:', apiError);
         throw apiError;
@@ -498,16 +545,19 @@ export function useVirtualTryOnAsync(
         return;
       }
 
-      if (!response || !response.reference_url) {
+      if (!response || !response.process_id) {
         throw new Error('Invalid response from server');
       }
 
-      setReferenceUrl(response.reference_url);
+      setReferenceUrl(response.process_id);
       setJobStatus('pending');
 
+      const maxAttempts = productsData.length > 1 ? 150 : 60;
+      maxAttemptsRef.current = maxAttempts;
+
       pollerRef.current = new VirtualTryOnPoller({
-        referenceUrl: response.reference_url,
-        maxAttempts: 60,
+        referenceUrl: response.process_id,
+        maxAttempts,
         interval: 2000,
         abortSignal: controller.signal,
         onStatusChange: (status, attempts) => {
@@ -521,10 +571,18 @@ export function useVirtualTryOnAsync(
 
           setJobStatus('completed');
 
+          if (result.tryon_limit !== undefined) {
+            setLimitInfo({
+              tryon_limit: result.tryon_limit,
+              used_count: result.used_count
+            });
+          }
+
           let newResults: VirtualTryOnMultipleResult[] = [];
 
           if (
-            result.result?.job_type === 'multiple' &&
+            (result.result?.job_type === 'multiple_try_on' ||
+              result.result?.job_type === 'multiple') &&
             result.result?.multiple?.products
           ) {
             newResults = result.result.multiple.products.map((item) => ({
@@ -532,6 +590,7 @@ export function useVirtualTryOnAsync(
               reference: item.reference,
               generated: item.generated,
               selected: item.selected,
+              used_count: item.used_count,
               error: item.error || null
             }));
           } else {
@@ -589,7 +648,11 @@ export function useVirtualTryOnAsync(
         },
         onTimeout: () => {
           setJobStatus('failed');
-          setError('Retry processing timeout after 60 attempts (60 seconds)');
+          setError(
+            `Retry processing timeout after ${maxAttempts} attempts (${
+              (maxAttempts * 2) / 60
+            } minutes)`
+          );
         }
       });
 
@@ -608,7 +671,7 @@ export function useVirtualTryOnAsync(
       }
 
       setJobStatus('failed');
-      setError(err.data?.message || err.message || 'Failed to retry try-on');
+      setError(resolveStartErrorMessage(err, 'Failed to retry try-on'));
     } finally {
       setAbortController(null);
     }
@@ -617,6 +680,7 @@ export function useVirtualTryOnAsync(
     productsArray,
     categoryMapping,
     results,
+    startSingleTryOn,
     startAsyncTryOn,
     getJobStatus,
     abortController,
@@ -660,22 +724,18 @@ export function useVirtualTryOnAsync(
             .join('')
         );
 
-        const productData = {
+        const requestData = {
           sku: product.sku,
           images: allImages,
           category_ids: categoryIds,
           category_paths: categoryPaths,
-          product_description: product.name
-        };
-
-        const requestData = {
-          products: [productData],
+          product_description: product.name,
           reference_image: uploadedImage
         };
 
         let response;
         try {
-          response = await startAsyncTryOn(requestData).unwrap();
+          response = await startSingleTryOn(requestData).unwrap();
         } catch (apiError: any) {
           throw apiError;
         }
@@ -684,15 +744,17 @@ export function useVirtualTryOnAsync(
           return;
         }
 
-        if (!response || !response.reference_url) {
+        if (!response || !response.process_id) {
           throw new Error('Invalid response from server');
         }
 
-        setReferenceUrl(response.reference_url);
+        setReferenceUrl(response.process_id);
         setJobStatus('pending');
 
+        maxAttemptsRef.current = 60;
+
         pollerRef.current = new VirtualTryOnPoller({
-          referenceUrl: response.reference_url,
+          referenceUrl: response.process_id,
           maxAttempts: 60,
           interval: 2000,
           abortSignal: controller.signal,
@@ -707,10 +769,18 @@ export function useVirtualTryOnAsync(
 
             setJobStatus('completed');
 
+            if (result.tryon_limit !== undefined) {
+              setLimitInfo({
+                tryon_limit: result.tryon_limit,
+                used_count: result.used_count
+              });
+            }
+
             let newResult: VirtualTryOnMultipleResult | null = null;
 
             if (
-              result.result?.job_type === 'multiple' &&
+              (result.result?.job_type === 'multiple_try_on' ||
+                result.result?.job_type === 'multiple') &&
               result.result?.multiple?.products?.[0]
             ) {
               const item = result.result.multiple.products[0];
@@ -719,6 +789,7 @@ export function useVirtualTryOnAsync(
                 reference: item.reference,
                 generated: item.generated,
                 selected: item.selected,
+                used_count: item.used_count,
                 error: item.error || null
               };
             } else {
@@ -760,7 +831,7 @@ export function useVirtualTryOnAsync(
           },
           onTimeout: () => {
             setJobStatus('failed');
-            setError('Retry processing timeout after 60 attempts (60 seconds)');
+            setError('Retry processing timeout after 60 attempts (2 minutes)');
           }
         });
 
@@ -778,7 +849,7 @@ export function useVirtualTryOnAsync(
         }
 
         setJobStatus('failed');
-        setError(err.data?.message || err.message || 'Failed to retry try-on');
+        setError(resolveStartErrorMessage(err, 'Failed to retry try-on'));
       } finally {
         setAbortController(null);
       }
@@ -787,7 +858,7 @@ export function useVirtualTryOnAsync(
       uploadedImage,
       productsArray,
       categoryMapping,
-      startAsyncTryOn,
+      startSingleTryOn,
       getJobStatus,
       abortController,
       submitFeedbackForResult
@@ -813,6 +884,7 @@ export function useVirtualTryOnAsync(
     fileError,
     showLegalConsent,
     feedbackStates,
+    limitInfo,
     currentStep: 'upload' as const,
     tryOnResult: null,
     isEnabled: true,
@@ -844,6 +916,6 @@ export function useVirtualTryOnAsync(
     hasResults: results.length > 0,
     hasFailedResults,
     failedResultsCount,
-    maxAttemptsReached: pollingAttempts >= 60
+    maxAttemptsReached: pollingAttempts >= maxAttemptsRef.current
   };
 }

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

@@ -1,7 +1,7 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { Product } from '@akinon/next/types';
 import {
-  useVirtualTryOnAsyncMutation,
+  useVirtualTryOnSingleMutation,
   useGetVirtualTryOnLimitedCategoriesQuery,
   useSubmitVirtualTryOnFeedbackMutation,
   useLazyGetVirtualTryOnJobStatusQuery
@@ -16,7 +16,8 @@ import {
   VirtualTryOnCache,
   compressImageToUnder1MB,
   convertWebPToJPEG,
-  validateImageAspectRatio
+  validateImageAspectRatio,
+  parseVirtualTryOnError
 } from '../utils';
 import { useImageCropper } from './use-image-cropper';
 import type { VirtualTryOnResponse } from '../types';
@@ -94,6 +95,10 @@ export function useVirtualTryOn(product: Product) {
   >(null);
   const [abortController, setAbortController] =
     useState<AbortController | null>(null);
+  const [limitInfo, setLimitInfo] = useState<{
+    tryon_limit?: number;
+    used_count?: number;
+  } | null>(null);
 
   const localStorageEnabled = getVirtualTryOnEnabled();
   const [cachedLimitedCategories, setCachedLimitedCategories] = useState<{
@@ -101,7 +106,7 @@ export function useVirtualTryOn(product: Product) {
   } | null>(() => VirtualTryOnCache.retrieveLimitedCategories());
 
   const [processVirtualTryOn, { isLoading: isProcessing }] =
-    useVirtualTryOnAsyncMutation();
+    useVirtualTryOnSingleMutation();
   const [submitFeedback] = useSubmitVirtualTryOnFeedbackMutation();
   const { data: limitedCategoriesData, isLoading: isLimitedCategoriesLoading } =
     useGetVirtualTryOnLimitedCategoriesQuery(undefined, {
@@ -217,6 +222,7 @@ export function useVirtualTryOn(product: Product) {
     setCurrentStep('processing');
     setFileError('');
     setError('');
+    setLimitInfo(null);
 
     try {
       const sku = product.sku || product.pk.toString();
@@ -252,16 +258,12 @@ export function useVirtualTryOn(product: Product) {
         }
       }
 
-      const productData = {
+      const requestData = {
         sku,
         images: productImages,
         category_ids: categoryIds,
         category_paths: categoryPaths,
-        product_description: product.name || ''
-      };
-
-      const requestData = {
-        products: [productData],
+        product_description: product.name || '',
         reference_image: uploadedImage
       };
 
@@ -273,11 +275,11 @@ export function useVirtualTryOn(product: Product) {
         throw apiError;
       }
 
-      if (!asyncResponse || !asyncResponse.reference_url) {
+      if (!asyncResponse || !asyncResponse.process_id) {
         throw new Error('Invalid response from server');
       }
 
-      const pollForResult = async (referenceUrl: string, maxAttempts = 60) => {
+      const pollForResult = async (processId: string, maxAttempts = 60) => {
         let rateLimitRetries = 0;
         const maxRateLimitRetries = 3;
 
@@ -300,8 +302,8 @@ export function useVirtualTryOn(product: Product) {
 
           try {
             const response = await fetch(
-              `/api/virtual-try-on?endpoint=job-status&reference_url=${encodeURIComponent(
-                referenceUrl
+              `/api/virtual-try-on?endpoint=job-status&process_id=${encodeURIComponent(
+                processId
               )}`,
               {
                 method: 'GET',
@@ -332,25 +334,35 @@ export function useVirtualTryOn(product: Product) {
             const data = await response.json();
 
             if (data.status === 'completed') {
-              let generated, selected;
+              let generated, selected, reference;
 
               if (
-                data.result?.job_type === 'multiple' &&
+                (data.result?.job_type === 'multiple_try_on' ||
+                  data.result?.job_type === 'multiple') &&
                 data.result?.multiple?.products?.[0]
               ) {
                 generated = data.result.multiple.products[0].generated;
                 selected = data.result.multiple.products[0].selected || [];
+                reference = data.result.multiple.products[0].reference;
               } else if (data.result?.single) {
                 generated = data.result.single.generated;
                 selected = data.result.single.selected || [];
+                reference = data.result.single.reference;
               } else {
                 generated = data.generated;
                 selected = data.selected || [];
               }
 
+              if (data.tryon_limit !== undefined) {
+                setLimitInfo({
+                  tryon_limit: data.tryon_limit,
+                  used_count: data.used_count
+                });
+              }
+
               if (generated) {
                 setTryOnResult({
-                  reference: referenceUrl,
+                  reference: reference || processId,
                   generated: generated,
                   selected: selected,
                   status: 'success'
@@ -361,8 +373,13 @@ export function useVirtualTryOn(product: Product) {
                 throw new Error('No generated image in completed response');
               }
             } else if (data.status === 'failed') {
+              const rawError = data.error || data.result?.error;
               const errorMsg =
-                data.error || data.result?.error || 'Processing failed';
+                typeof rawError === 'string'
+                  ? parseVirtualTryOnError(rawError)
+                  : rawError?.detail || rawError?.message
+                  ? parseVirtualTryOnError(rawError.detail || rawError.message)
+                  : 'Processing failed';
               setError(errorMsg);
               setCurrentStep('processing');
               cropperHook.closeCrop();
@@ -373,10 +390,10 @@ export function useVirtualTryOn(product: Product) {
             throw pollError;
           }
         }
-        throw new Error('Processing timeout after 60 attempts');
+        throw new Error('Processing timeout after 60 attempts (2 minutes)');
       };
 
-      await pollForResult(asyncResponse.reference_url);
+      await pollForResult(asyncResponse.process_id);
     } catch (error: any) {
       if (
         error?.name === 'AbortError' ||
@@ -387,16 +404,18 @@ export function useVirtualTryOn(product: Product) {
         return;
       }
 
-      setFileError(
-        error?.data?.message ||
-          error?.message ||
-          'Virtual try-on processing failed'
-      );
-      setError(
-        error?.data?.message ||
+      const isLimitExceeded =
+        error?.status === 429 || error?.data?.code === 'TRY_ON_LIMIT_EXCEEDED';
+      const errorMessage = isLimitExceeded
+        ? parseVirtualTryOnError(
+            error?.data?.error || error?.data?.message || ''
+          )
+        : error?.data?.message ||
           error?.message ||
-          'Virtual try-on processing failed'
-      );
+          'Virtual try-on processing failed';
+
+      setFileError(errorMessage);
+      setError(errorMessage);
       setCurrentStep('processing');
       cropperHook.closeCrop();
     } finally {
@@ -439,6 +458,7 @@ export function useVirtualTryOn(product: Product) {
     setError('');
     setCurrentStep('upload');
     setSelectedFeedback(null);
+    setLimitInfo(null);
     cropperHook.resetCrop();
   }, [cropperHook]);
 
@@ -490,6 +510,7 @@ export function useVirtualTryOn(product: Product) {
     isEnabled,
     isLimitedCategoriesLoading,
     selectedFeedback,
+    limitInfo,
     handleFileUpload,
     processTryOn,
     acceptLegalConsent,

package/src/index.ts

@@ -23,9 +23,12 @@ export { useBarcodeSearch } from './hooks/use-barcode-search';
 export { useVirtualTryOnAsync } from './hooks/use-virtual-try-on-async';
 
 export {
+  useVirtualTryOnSingleMutation,
   useVirtualTryOnAsyncMutation,
   useGetVirtualTryOnJobStatusQuery,
   useLazyGetVirtualTryOnJobStatusQuery,
+  useGetTryOnUsageMutation,
+  useSubmitTryOnEventMutation,
   useGetVirtualTryOnLimitedCategoriesQuery,
   useSubmitVirtualTryOnFeedbackMutation
 } from './data/endpoints';
@@ -48,6 +51,8 @@ export type {
   VirtualTryOnJobStatusResponse,
   VirtualTryOnMultipleResult,
   VirtualTryOnCompatibilityError,
+  TryOnUsageResponse,
+  TryOnEventResponse,
   BasketProduct,
   VirtualTryOnMultipleModalProps,
   BarcodeFormat,