@akinon/pz-virtual-try-on 1.119.0-rc.3 → 2.0.0-beta.13

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

@@ -1,6 +1,5 @@
 import { useState, useRef, useCallback } from 'react';
 import 'react-image-crop/dist/ReactCrop.css';
-import { validateAspectRatioFromDimensions } from '../utils';
 
 type CropType = {
   unit: 'px' | '%';
@@ -10,16 +9,10 @@ type CropType = {
   height: number;
 };
 
-export interface CropResult {
-  success: boolean;
-  error?: string;
-}
-
 export function useImageCropper(
   setIsLoading: (loading: boolean) => void,
   processImage: (base64: string) => void,
-  clearError?: () => void,
-  onAspectRatioError?: (error: string) => void
+  clearError?: () => void
 ) {
   const [isCropping, setIsCropping] = useState(false);
   const [crop, setCrop] = useState<CropType>({
@@ -71,12 +64,10 @@ export function useImageCropper(
     }
   };
 
-  const processCompletedCropImmediate = async (
-    crop: any
-  ): Promise<CropResult> => {
+  const processCompletedCropImmediate = async (crop: any) => {
     if (!imageRef.current || !crop?.width || !crop?.height) {
       setIsLoading(false);
-      return { success: false, error: 'Invalid crop dimensions' };
+      return;
     }
 
     if (clearError) {
@@ -91,28 +82,8 @@ export function useImageCropper(
       const scaleX = image.naturalWidth / image.width;
       const scaleY = image.naturalHeight / image.height;
 
-      const croppedWidth = crop.width * scaleX;
-      const croppedHeight = crop.height * scaleY;
-
-      // Validate aspect ratio before processing
-      const aspectRatioValidation = validateAspectRatioFromDimensions(
-        croppedWidth,
-        croppedHeight
-      );
-
-      if (!aspectRatioValidation.isValid) {
-        setIsLoading(false);
-        if (onAspectRatioError && aspectRatioValidation.error) {
-          onAspectRatioError(aspectRatioValidation.error);
-        }
-        return {
-          success: false,
-          error: aspectRatioValidation.error
-        };
-      }
-
-      canvas.width = croppedWidth;
-      canvas.height = croppedHeight;
+      canvas.width = crop.width * scaleX;
+      canvas.height = crop.height * scaleY;
 
       const ctx = canvas.getContext('2d');
 
@@ -123,8 +94,8 @@ export function useImageCropper(
 
       const sourceX = crop.x * scaleX;
       const sourceY = crop.y * scaleY;
-      const sourceWidth = croppedWidth;
-      const sourceHeight = croppedHeight;
+      const sourceWidth = crop.width * scaleX;
+      const sourceHeight = crop.height * scaleY;
 
       ctx.drawImage(
         image,
@@ -144,11 +115,9 @@ export function useImageCropper(
       setCropProcessed(true);
       setLastSuccessfulCrop(crop);
       setIsLoading(false);
-      return { success: true };
     } catch (error) {
       console.error('❌ processCompletedCrop failed:', error);
       setIsLoading(false);
-      return { success: false, error: 'Failed to process crop' };
     }
   };
 
@@ -187,28 +156,10 @@ 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]);
 
@@ -224,7 +175,6 @@ export function useImageCropper(
     processCompletedCrop,
     processManualCrop,
     confirmCrop,
-    resetCrop,
-    closeCrop
+    resetCrop
   };
 }

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

@@ -353,7 +353,6 @@ export function useVirtualTryOnAsync(
   }, [
     uploadedImage,
     productsArray,
-    categoryMapping,
     startAsyncTryOn,
     getJobStatus,
     abortController

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

@@ -15,8 +15,7 @@ import {
   isVirtualTryOnEnabled,
   VirtualTryOnCache,
   compressImageToUnder1MB,
-  convertWebPToJPEG,
-  validateImageAspectRatio
+  convertWebPToJPEG
 } from '../utils';
 import { useImageCropper } from './use-image-cropper';
 import type { VirtualTryOnResponse } from '../types';
@@ -113,10 +112,7 @@ export function useVirtualTryOn(product: Product) {
     (croppedBase64) => {
       setUploadedImage(croppedBase64);
     },
-    () => setFileError(''),
-    (aspectRatioError) => {
-      setFileError(aspectRatioError);
-    }
+    () => setFileError('')
   );
 
   useEffect(() => {
@@ -182,14 +178,6 @@ export function useVirtualTryOn(product: Product) {
           return;
         }
 
-        const aspectRatioValidation = await validateImageAspectRatio(
-          processedFile
-        );
-        if (!aspectRatioValidation.isValid) {
-          setFileError(aspectRatioValidation.error || 'Invalid aspect ratio');
-          return;
-        }
-
         const base64Image = await fileToBase64(processedFile);
         setUploadedImage(base64Image);
         setOriginalImage(base64Image);
@@ -365,7 +353,6 @@ export function useVirtualTryOn(product: Product) {
                 data.error || data.result?.error || 'Processing failed';
               setError(errorMsg);
               setCurrentStep('processing');
-              cropperHook.closeCrop();
               return;
             }
           } catch (pollError: any) {
@@ -383,7 +370,6 @@ export function useVirtualTryOn(product: Product) {
         error?.message === 'Request aborted'
       ) {
         setCurrentStep('upload');
-        cropperHook.closeCrop();
         return;
       }
 
@@ -392,23 +378,11 @@ export function useVirtualTryOn(product: Product) {
           error?.message ||
           'Virtual try-on processing failed'
       );
-      setError(
-        error?.data?.message ||
-          error?.message ||
-          'Virtual try-on processing failed'
-      );
-      setCurrentStep('processing');
-      cropperHook.closeCrop();
+      setCurrentStep('upload');
     } finally {
       setAbortController(null);
     }
-  }, [
-    uploadedImage,
-    product,
-    processVirtualTryOn,
-    abortController,
-    cropperHook
-  ]);
+  }, [uploadedImage, product, processVirtualTryOn, abortController]);
 
   const acceptLegalConsent = useCallback(() => {
     setLegalConsentAccepted();

package/src/index.ts

@@ -9,16 +9,10 @@ export { VirtualTryOnProductSelector } from './views/virtual-try-on-product-sele
 export { VirtualTryOnAsyncModal } from './views/virtual-try-on-async-modal';
 export { BasketAsyncModal } from './views/basket-async-modal';
 
-export { BarcodeScannerPlugin } from './views/barcode-scanner-plugin';
-export { BarcodeScannerModal } from './views/barcode-scanner-modal';
-export { BarcodeScannerButton } from './views/barcode-scanner-button';
-export { BarcodeScanner } from './components/barcode-scanner';
-
 export { ProcessingSpinner } from './components/processing-spinner';
 
 export { useVirtualTryOn } from './hooks/use-virtual-try-on';
 export { useImageCropper } from './hooks/use-image-cropper';
-export { useBarcodeSearch } from './hooks/use-barcode-search';
 
 export { useVirtualTryOnAsync } from './hooks/use-virtual-try-on-async';
 
@@ -30,11 +24,6 @@ export {
   useSubmitVirtualTryOnFeedbackMutation
 } from './data/endpoints';
 
-export {
-  useSearchProductByBarcodeQuery,
-  useLazySearchProductByBarcodeQuery
-} from './data/barcode-endpoints';
-
 export type {
   VirtualTryOnResponse,
   VirtualTryOnModalProps,
@@ -49,21 +38,7 @@ export type {
   VirtualTryOnMultipleResult,
   VirtualTryOnCompatibilityError,
   BasketProduct,
-  VirtualTryOnMultipleModalProps,
-  BarcodeFormat,
-  BarcodeScanResult,
-  BarcodeSearchResponse,
-  BarcodeSearchRequest,
-  BarcodeScannerState,
-  ScannedProductState,
-  BarcodeScannerButtonProps,
-  BarcodeScannerModalProps,
-  BarcodeScannerProps,
-  ScannedProductCardProps,
-  BarcodeScannerSettings,
-  BarcodeScannerTheme,
-  BarcodeScannerCustomStyles,
-  BarcodeScannerCustomRenderers
+  VirtualTryOnMultipleModalProps
 } from './types';
 
 export * from './utils';

package/src/types/index.ts

@@ -2,9 +2,6 @@ import React from 'react';
 import { Product } from '@akinon/next/types';
 import { useVirtualTryOn } from '../hooks/use-virtual-try-on';
 
-// Re-export barcode types
-export * from './barcode';
-
 export interface VirtualTryOnResponse {
   reference: string;
   generated: string;
@@ -564,32 +561,6 @@ export interface CustomRendererProps {
   };
 }
 
-export interface VirtualTryOnModalImages {
-  ruleGoodExample?: string;
-  ruleBadExample1?: string;
-  ruleBadExample2?: string;
-  ruleBadExample3?: string;
-  ruleBadExample4?: string;
-  uploadIcon?: string;
-}
-
-export interface VirtualTryOnModalTexts {
-  title?: string;
-  editPhotoTitle?: string;
-  uploadPrompt?: string;
-  uploadRequirements?: string;
-  uploadInfo?: string;
-  rule1?: string;
-  rule2?: string;
-  rule3?: string;
-  rule4?: string;
-  rule5?: string;
-  rule6?: string;
-  processingTitle?: string;
-  processingMessage?: string;
-  retryUpload?: string;
-}
-
 export interface VirtualTryOnPluginSettings {
   maxFileSize?: number;
   allowedFormats?: string[];
@@ -600,7 +571,6 @@ export interface VirtualTryOnPluginSettings {
   buttonSize?: 'sm' | 'md' | 'lg';
   legal_text?: string;
   instructions?: string;
-  
   customStyles?: {
     plugin?: string;
     button?: string;
@@ -639,8 +609,6 @@ export interface VirtualTryOnPluginSettings {
     uploadRequirements?: string;
     uploadRequirementsError?: string;
     uploadButton?: string;
-    uploadModalImages?: VirtualTryOnModalImages;
-    uploadModalTexts?: VirtualTryOnModalTexts;
     fileInput?: string;
 
     rulesInfoText?: string;

package/src/utils/error-mapping.ts

@@ -11,9 +11,7 @@ export const ERROR_MESSAGES: Record<string, string> = {
   background: 'Görüntü arka planı uygun değil.',
   political: 'Siyasi içerik tespit edildi.',
   others: 'Görüntü uygun değil.',
-  empty: 'Görüntüde insan tespit edilemedi.',
-  aspect_ratio_too_tall: `Görsel çok uzun. Dikey görseller için izin verilen maksimum oran 9:16'dır. Lütfen kırpın veya farklı bir görsel seçin.`,
-  aspect_ratio_too_wide: `Görsel çok geniş. Yatay görseller için izin verilen maksimum oran 21:9'dur. Lütfen kırpın veya farklı bir görsel seçin.`
+  empty: 'Görüntüde insan tespit edilemedi.'
 };
 
 export function getErrorMessage(

package/src/utils/index.ts

@@ -1,120 +1,5 @@
 export { parseVirtualTryOnError } from './error-parser';
 
-export const ASPECT_RATIO_LIMITS = {
-  MIN_RATIO: 9 / 16,
-  MAX_RATIO: 21 / 9
-} as const;
-
-export interface AspectRatioValidation {
-  isValid: boolean;
-  error?: string;
-  ratio?: number;
-  width?: number;
-  height?: number;
-}
-
-export const getImageDimensions = (
-  source: string | File
-): Promise<{ width: number; height: number }> => {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-
-    img.onload = () => {
-      resolve({
-        width: img.naturalWidth,
-        height: img.naturalHeight
-      });
-      URL.revokeObjectURL(img.src);
-    };
-
-    img.onerror = () => {
-      reject(new Error('Failed to load image for dimension check'));
-      URL.revokeObjectURL(img.src);
-    };
-
-    if (typeof source === 'string') {
-      img.src = source;
-    } else {
-      img.src = URL.createObjectURL(source);
-    }
-  });
-};
-
-export const validateImageAspectRatio = async (
-  source: string | File
-): Promise<AspectRatioValidation> => {
-  try {
-    const { width, height } = await getImageDimensions(source);
-    const ratio = width / height;
-
-    if (ratio < ASPECT_RATIO_LIMITS.MIN_RATIO) {
-      return {
-        isValid: false,
-        error: 'aspect_ratio_too_tall',
-        ratio,
-        width,
-        height
-      };
-    }
-
-    if (ratio > ASPECT_RATIO_LIMITS.MAX_RATIO) {
-      return {
-        isValid: false,
-        error: 'aspect_ratio_too_wide',
-        ratio,
-        width,
-        height
-      };
-    }
-
-    return {
-      isValid: true,
-      ratio,
-      width,
-      height
-    };
-  } catch (error) {
-    return {
-      isValid: false,
-      error: 'Failed to validate image dimensions'
-    };
-  }
-};
-
-export const validateAspectRatioFromDimensions = (
-  width: number,
-  height: number
-): AspectRatioValidation => {
-  const ratio = width / height;
-
-  if (ratio < ASPECT_RATIO_LIMITS.MIN_RATIO) {
-    return {
-      isValid: false,
-      error: 'aspect_ratio_too_tall',
-      ratio,
-      width,
-      height
-    };
-  }
-
-  if (ratio > ASPECT_RATIO_LIMITS.MAX_RATIO) {
-    return {
-      isValid: false,
-      error: 'aspect_ratio_too_wide',
-      ratio,
-      width,
-      height
-    };
-  }
-
-  return {
-    isValid: true,
-    ratio,
-    width,
-    height
-  };
-};
-
 export const validateImageFile = (
   file: File
 ): { isValid: boolean; error?: string } => {

package/src/views/basket-async-modal.tsx

@@ -17,8 +17,6 @@ export interface BasketAsyncModalProps {
   hookData: ReturnType<typeof useVirtualTryOnAsync>;
   onRetryUpload?: () => void;
   settings?: VirtualTryOnPluginSettings;
-  /** Source of the modal - affects button text */
-  source?: 'basket' | 'barcode';
 }
 
 type ModalStep = 'processing' | 'results' | 'detail';
@@ -30,8 +28,7 @@ export function BasketAsyncModal({
   onComplete,
   hookData,
   onRetryUpload,
-  settings,
-  source = 'basket'
+  settings
 }: BasketAsyncModalProps) {
   const { t } = useLocalization();
   const [currentStep, setCurrentStep] = useState<ModalStep>('processing');
@@ -519,9 +516,7 @@ export function BasketAsyncModal({
                       settings?.customStyles?.basketAsyncModalBackButton
                     )}
                   >
-                    {source === 'barcode'
-                      ? t('product.virtual_try_on.close_button')
-                      : t('product.virtual_try_on.back_to_basket')}
+                    {t('product.virtual_try_on.back_to_basket')}
                   </button>
                 </div>
               </div>

package/src/views/main.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Product } from '@akinon/next/types';
 import { twMerge } from 'tailwind-merge';
 import { VirtualTryOnModal } from './virtual-try-on-modal';
@@ -30,18 +30,6 @@ 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 {};
 
@@ -110,12 +98,10 @@ export function VirtualTryOnPlugin({
     setTimeout(() => {
       setIsModalLoading(false);
       setIsModalOpen(true);
-      document.documentElement.style.overflow = 'hidden';
     }, 500);
   };
 
   const handleCloseModal = () => {
-    document.documentElement.style.overflow = '';
     setIsModalOpen(false);
     setIsModalLoading(false);
   };