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

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

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

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

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

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

@@ -15,7 +15,8 @@ import {
   isVirtualTryOnEnabled,
   VirtualTryOnCache,
   compressImageToUnder1MB,
-  convertWebPToJPEG
+  convertWebPToJPEG,
+  validateImageAspectRatio
 } from '../utils';
 import { useImageCropper } from './use-image-cropper';
 import type { VirtualTryOnResponse } from '../types';
@@ -112,7 +113,10 @@ export function useVirtualTryOn(product: Product) {
     (croppedBase64) => {
       setUploadedImage(croppedBase64);
     },
-    () => setFileError('')
+    () => setFileError(''),
+    (aspectRatioError) => {
+      setFileError(aspectRatioError);
+    }
   );
 
   useEffect(() => {
@@ -178,6 +182,14 @@ 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);

package/src/index.ts

@@ -9,10 +9,16 @@ 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';
 
@@ -24,6 +30,11 @@ export {
   useSubmitVirtualTryOnFeedbackMutation
 } from './data/endpoints';
 
+export {
+  useSearchProductByBarcodeQuery,
+  useLazySearchProductByBarcodeQuery
+} from './data/barcode-endpoints';
+
 export type {
   VirtualTryOnResponse,
   VirtualTryOnModalProps,
@@ -38,7 +49,21 @@ export type {
   VirtualTryOnMultipleResult,
   VirtualTryOnCompatibilityError,
   BasketProduct,
-  VirtualTryOnMultipleModalProps
+  VirtualTryOnMultipleModalProps,
+  BarcodeFormat,
+  BarcodeScanResult,
+  BarcodeSearchResponse,
+  BarcodeSearchRequest,
+  BarcodeScannerState,
+  ScannedProductState,
+  BarcodeScannerButtonProps,
+  BarcodeScannerModalProps,
+  BarcodeScannerProps,
+  ScannedProductCardProps,
+  BarcodeScannerSettings,
+  BarcodeScannerTheme,
+  BarcodeScannerCustomStyles,
+  BarcodeScannerCustomRenderers
 } from './types';
 
 export * from './utils';

package/src/types/barcode.ts

@@ -0,0 +1,308 @@
+import React from 'react';
+import { Product, Pagination, Facet, SortOption } from '@akinon/next/types';
+
+// ==================== BARCODE SCANNER TYPES ====================
+
+export type BarcodeFormat =
+  | 'QR_CODE'
+  | 'DATA_MATRIX'
+  | 'AZTEC'
+  | 'PDF_417'
+  | 'EAN_8'
+  | 'EAN_13'
+  | 'UPC_A'
+  | 'UPC_E'
+  | 'CODE_39'
+  | 'CODE_93'
+  | 'CODE_128'
+  | 'CODABAR'
+  | 'ITF'
+  | 'RSS_14'
+  | 'RSS_EXPANDED';
+
+export interface BarcodeScanResult {
+  text: string;
+  format: BarcodeFormat;
+  timestamp: number;
+}
+
+export interface BarcodeSearchResponse {
+  pagination: Pagination;
+  facets: Facet[];
+  sorters: SortOption[];
+  search_text: string | null;
+  products: Product[];
+}
+
+export interface BarcodeSearchRequest {
+  barcode: string;
+  page?: number;
+  limit?: number;
+}
+
+export interface BarcodeScannerState {
+  isScanning: boolean;
+  hasPermission: boolean | null;
+  error: string | null;
+  lastScanResult: BarcodeScanResult | null;
+}
+
+export interface ScannedProductState {
+  products: Product[];
+  isLoading: boolean;
+  error: string | null;
+  searchedBarcode: string | null;
+}
+
+// ==================== BARCODE COMPONENT PROPS ====================
+
+export interface BarcodeScannerButtonProps {
+  onClick: () => void;
+  className?: string;
+  disabled?: boolean;
+  settings?: BarcodeScannerSettings;
+  style?: React.CSSProperties;
+}
+
+export interface BarcodeScannerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onProductFound?: (products: Product[]) => void;
+  onContinueToVTO?: (products: Product[]) => void;
+  className?: string;
+  settings?: BarcodeScannerSettings;
+}
+
+export interface BarcodeScannerProps {
+  onScan: (result: BarcodeScanResult) => void;
+  onError?: (error: Error) => void;
+  onPermissionDenied?: () => void;
+  isActive: boolean;
+  className?: string;
+  settings?: BarcodeScannerSettings;
+}
+
+export interface ScannedProductCardProps {
+  product: Product;
+  isSelected?: boolean;
+  onSelect?: (product: Product) => void;
+  onRemove?: (product: Product) => void;
+  className?: string;
+  settings?: BarcodeScannerSettings;
+}
+
+// ==================== BARCODE SETTINGS ====================
+
+export interface BarcodeScannerSettings {
+  customStyles?: BarcodeScannerCustomStyles;
+  customRenderers?: BarcodeScannerCustomRenderers;
+  theme?: BarcodeScannerTheme;
+  cssVariables?: Record<string, string>;
+  // Supported barcode formats - defaults to all
+  supportedFormats?: BarcodeFormat[];
+  // Maximum number of products that can be scanned
+  maxProducts?: number;
+  // Whether to show the continue to VTO button
+  showContinueToVTO?: boolean;
+  // Sound on successful scan
+  playScanSound?: boolean;
+  // Vibrate on successful scan (mobile)
+  vibrateOnScan?: boolean;
+}
+
+export interface BarcodeScannerTheme {
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    text?: string;
+    border?: string;
+    success?: string;
+    error?: string;
+    scannerOverlay?: string;
+    scannerFrame?: string;
+    scannerCorner?: string;
+  };
+  spacing?: {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+  };
+  borderRadius?: {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    full?: string;
+  };
+  fonts?: {
+    primary?: string;
+    secondary?: string;
+  };
+}
+
+export interface BarcodeScannerCustomStyles {
+  // Button styles
+  floatingButton?: string;
+  floatingButtonIcon?: string;
+
+  // Modal styles
+  modalOverlay?: string;
+  modalContainer?: string;
+  modalHeader?: string;
+  modalTitle?: string;
+  modalCloseButton?: string;
+  modalCloseIcon?: string;
+  modalContent?: string;
+
+  // Scanner styles
+  scannerContainer?: string;
+  scannerVideo?: string;
+  scannerOverlay?: string;
+  scannerFrame?: string;
+  scannerCornerTopLeft?: string;
+  scannerCornerTopRight?: string;
+  scannerCornerBottomLeft?: string;
+  scannerCornerBottomRight?: string;
+  scannerHelpText?: string;
+  scannerLine?: string;
+
+  // Product display styles
+  productListContainer?: string;
+  productList?: string;
+  productCard?: string;
+  productCardSelected?: string;
+  productImage?: string;
+  productImageWrapper?: string;
+  productInfo?: string;
+  productName?: string;
+  productPrice?: string;
+  productCheckmark?: string;
+  productRemoveButton?: string;
+
+  // Actions styles
+  actionsContainer?: string;
+  continueButton?: string;
+  continueButtonDisabled?: string;
+  scanMoreText?: string;
+
+  // Error and loading styles
+  errorContainer?: string;
+  errorMessage?: string;
+  errorIcon?: string;
+  errorRetryButton?: string;
+  loadingContainer?: string;
+  loadingSpinner?: string;
+  loadingText?: string;
+
+  // Permission denied styles
+  permissionDeniedContainer?: string;
+  permissionDeniedIcon?: string;
+  permissionDeniedTitle?: string;
+  permissionDeniedMessage?: string;
+  permissionDeniedButton?: string;
+
+  // Empty state styles
+  emptyStateContainer?: string;
+  emptyStateIcon?: string;
+  emptyStateTitle?: string;
+  emptyStateMessage?: string;
+}
+
+export interface BarcodeScannerCustomRenderers {
+  // Button renderers
+  renderFloatingButton?: (props: {
+    onClick: () => void;
+    className?: string;
+  }) => React.ReactNode;
+  renderFloatingButtonIcon?: () => React.ReactNode;
+
+  // Modal renderers
+  renderModal?: (props: BarcodeScannerModalProps) => React.ReactNode;
+  renderModalHeader?: (props: {
+    title: string;
+    onClose: () => void;
+  }) => React.ReactNode;
+  renderModalCloseButton?: (props: {
+    onClick: () => void;
+  }) => React.ReactNode;
+  renderModalCloseIcon?: () => React.ReactNode;
+
+  // Scanner renderers
+  renderScanner?: (props: BarcodeScannerProps) => React.ReactNode;
+  renderScannerOverlay?: (props: {
+    isScanning: boolean;
+  }) => React.ReactNode;
+  renderScannerFrame?: () => React.ReactNode;
+  renderScannerCorners?: () => React.ReactNode;
+  renderScannerHelpText?: (props: { text: string }) => React.ReactNode;
+  renderScannerLine?: () => React.ReactNode;
+
+  // Product renderers
+  renderProductList?: (props: {
+    products: Product[];
+    onRemove: (product: Product) => void;
+  }) => React.ReactNode;
+  renderProductCard?: (props: ScannedProductCardProps) => React.ReactNode;
+  renderProductImage?: (props: {
+    imageUrl: string;
+    alt: string;
+    className?: string;
+  }) => React.ReactNode;
+  renderProductInfo?: (props: {
+    product: Product;
+  }) => React.ReactNode;
+  renderProductCheckmark?: () => React.ReactNode;
+  renderProductRemoveButton?: (props: {
+    onClick: () => void;
+  }) => React.ReactNode;
+
+  // Actions renderers
+  renderActionsContainer?: (props: {
+    children: React.ReactNode;
+  }) => React.ReactNode;
+  renderContinueButton?: (props: {
+    onClick: () => void;
+    disabled: boolean;
+    text: string;
+  }) => React.ReactNode;
+  renderScanMoreText?: (props: { text: string }) => React.ReactNode;
+
+  // Error renderers
+  renderError?: (props: {
+    error: string;
+    onRetry?: () => void;
+  }) => React.ReactNode;
+  renderErrorIcon?: () => React.ReactNode;
+  renderErrorMessage?: (props: { message: string }) => React.ReactNode;
+  renderErrorRetryButton?: (props: {
+    onClick: () => void;
+    text: string;
+  }) => React.ReactNode;
+
+  // Loading renderers
+  renderLoading?: (props: { text?: string }) => React.ReactNode;
+  renderLoadingSpinner?: () => React.ReactNode;
+  renderLoadingText?: (props: { text: string }) => React.ReactNode;
+
+  // Permission denied renderers
+  renderPermissionDenied?: (props: {
+    onRequestPermission?: () => void;
+  }) => React.ReactNode;
+  renderPermissionDeniedIcon?: () => React.ReactNode;
+  renderPermissionDeniedTitle?: (props: { title: string }) => React.ReactNode;
+  renderPermissionDeniedMessage?: (props: {
+    message: string;
+  }) => React.ReactNode;
+  renderPermissionDeniedButton?: (props: {
+    onClick: () => void;
+    text: string;
+  }) => React.ReactNode;
+
+  // Empty state renderers
+  renderEmptyState?: () => React.ReactNode;
+  renderEmptyStateIcon?: () => React.ReactNode;
+  renderEmptyStateTitle?: (props: { title: string }) => React.ReactNode;
+  renderEmptyStateMessage?: (props: { message: string }) => React.ReactNode;
+}

package/src/types/index.ts

@@ -2,6 +2,9 @@ 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;
@@ -561,6 +564,32 @@ 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[];
@@ -571,6 +600,7 @@ export interface VirtualTryOnPluginSettings {
   buttonSize?: 'sm' | 'md' | 'lg';
   legal_text?: string;
   instructions?: string;
+  
   customStyles?: {
     plugin?: string;
     button?: string;
@@ -609,6 +639,8 @@ export interface VirtualTryOnPluginSettings {
     uploadRequirements?: string;
     uploadRequirementsError?: string;
     uploadButton?: string;
+    uploadModalImages?: VirtualTryOnModalImages;
+    uploadModalTexts?: VirtualTryOnModalTexts;
     fileInput?: string;
 
     rulesInfoText?: string;

package/src/utils/error-mapping.ts

@@ -11,7 +11,9 @@ 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.'
+  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.`
 };
 
 export function getErrorMessage(

package/src/utils/index.ts

@@ -1,5 +1,120 @@
 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 } => {