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

package/src/components/barcode-scanner.tsx

@@ -0,0 +1,422 @@
+'use client';
+
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocalization } from '@akinon/next/hooks';
+import type {
+  BarcodeScannerProps,
+  BarcodeScanResult,
+  BarcodeFormat
+} from '../types/barcode';
+
+import { LoaderSpinner } from '@theme/components';
+
+const mapBarcodeFormat = (format: string): BarcodeFormat => {
+  const formatMap: Record<string, BarcodeFormat> = {
+    QR_CODE: 'QR_CODE',
+    AZTEC: 'AZTEC',
+    CODABAR: 'CODABAR',
+    CODE_39: 'CODE_39',
+    CODE_93: 'CODE_93',
+    CODE_128: 'CODE_128',
+    DATA_MATRIX: 'DATA_MATRIX',
+    ITF: 'ITF',
+    EAN_13: 'EAN_13',
+    EAN_8: 'EAN_8',
+    PDF_417: 'PDF_417',
+    UPC_A: 'UPC_A',
+    UPC_E: 'UPC_E',
+    RSS_14: 'RSS_14',
+    RSS_EXPANDED: 'RSS_EXPANDED'
+  };
+  return formatMap[format] || 'CODE_128';
+};
+
+const isValidEAN13 = (barcode: string): boolean => {
+  if (!/^\d{13}$/.test(barcode)) return false;
+
+  let sum = 0;
+  for (let i = 0; i < 12; i++) {
+    const digit = parseInt(barcode[i], 10);
+    sum += i % 2 === 0 ? digit : digit * 3;
+  }
+
+  const checkDigit = (10 - (sum % 10)) % 10;
+  return checkDigit === parseInt(barcode[12], 10);
+};
+
+// Validate barcode based on expected formats
+const isValidBarcode = (barcode: string): boolean => {
+  // EAN-13: 13 digits
+  if (/^\d{13}$/.test(barcode)) {
+    return isValidEAN13(barcode);
+  }
+  // EAN-8: 8 digits
+  if (/^\d{8}$/.test(barcode)) {
+    return true;
+  }
+  // UPC-A: 12 digits
+  if (/^\d{12}$/.test(barcode)) {
+    return true;
+  }
+  // UPC-E: 6-8 digits
+  if (/^\d{6,8}$/.test(barcode)) {
+    return true;
+  }
+  // CODE-128, CODE-39, etc: alphanumeric, at least 4 chars
+  if (barcode.length >= 4) {
+    return true;
+  }
+  return false;
+};
+
+export function BarcodeScanner({
+  onScan,
+  onError,
+  onPermissionDenied,
+  isActive,
+  className,
+  settings
+}: BarcodeScannerProps) {
+  const { t } = useLocalization();
+  const scannerRef = useRef<any>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const lastScanRef = useRef<string>('');
+  const lastScanTimeRef = useRef<number>(0);
+  const scannerIdRef = useRef<string>(`barcode-scanner-${Date.now()}`);
+
+  const stopScanning = useCallback(async () => {
+    if (scannerRef.current) {
+      try {
+        const state = scannerRef.current.getState();
+        if (state === 2) {
+          // SCANNING state
+          await scannerRef.current.stop();
+        }
+        scannerRef.current.clear();
+      } catch (e) {
+        // Ignore stop/clear errors
+        console.debug('Scanner cleanup:', e);
+      }
+      scannerRef.current = null;
+    }
+    setIsInitialized(false);
+  }, []);
+
+  const startScanning = useCallback(async () => {
+    if (!isActive || scannerRef.current) return;
+
+    try {
+      // Dynamic import html5-qrcode only on client side
+      const { Html5Qrcode, Html5QrcodeSupportedFormats } = await import(
+        'html5-qrcode'
+      );
+
+      // Configure supported formats - prioritize EAN/UPC for product barcodes
+      const formatsToSupport = [
+        Html5QrcodeSupportedFormats.EAN_13,
+        Html5QrcodeSupportedFormats.EAN_8,
+        Html5QrcodeSupportedFormats.UPC_A,
+        Html5QrcodeSupportedFormats.UPC_E,
+        Html5QrcodeSupportedFormats.CODE_128,
+        Html5QrcodeSupportedFormats.CODE_39
+      ];
+
+      const scanner = new Html5Qrcode(scannerIdRef.current, {
+        formatsToSupport,
+        verbose: false
+      });
+
+      scannerRef.current = scanner;
+
+      const onScanSuccess = (decodedText: string, decodedResult: any) => {
+        const now = Date.now();
+
+        // Validate barcode - reject partial reads
+        if (!isValidBarcode(decodedText)) {
+          return;
+        }
+
+        // Debounce: prevent same barcode from being scanned multiple times
+        if (
+          decodedText === lastScanRef.current &&
+          now - lastScanTimeRef.current < 2000
+        ) {
+          return;
+        }
+
+        lastScanRef.current = decodedText;
+        lastScanTimeRef.current = now;
+
+        const scanResult: BarcodeScanResult = {
+          text: decodedText,
+          format: mapBarcodeFormat(
+            decodedResult?.result?.format?.formatName || 'CODE_128'
+          ),
+          timestamp: now
+        };
+
+        // Vibrate on successful scan if enabled and supported
+        if (settings?.vibrateOnScan && navigator.vibrate) {
+          navigator.vibrate(100);
+        }
+
+        onScan(scanResult);
+      };
+
+      const onScanFailure = (error: string) => {
+        // Ignore "No barcode found" errors - this is normal
+        if (
+          !error.includes('No MultiFormat Readers') &&
+          !error.includes('NotFoundException')
+        ) {
+          console.debug('Scan error:', error);
+        }
+      };
+
+      const config = {
+        fps: 10,
+        qrbox: { width: 250, height: 250 },
+        aspectRatio: 1.0,
+        disableFlip: false
+      };
+
+      try {
+        await scanner.start(
+          { facingMode: 'environment' },
+          config,
+          onScanSuccess,
+          onScanFailure
+        );
+      } catch (backCameraError) {
+        try {
+          await scanner.start(
+            { facingMode: 'user' },
+            config,
+            onScanSuccess,
+            onScanFailure
+          );
+        } catch (frontCameraError) {
+          const cameras = await Html5Qrcode.getCameras();
+          if (cameras && cameras.length > 0) {
+            await scanner.start(
+              cameras[0].id,
+              config,
+              onScanSuccess,
+              onScanFailure
+            );
+          } else {
+            throw new Error('No camera found');
+          }
+        }
+      }
+
+      setHasPermission(true);
+      setIsInitialized(true);
+    } catch (error: any) {
+      console.error('Failed to start barcode scanner:', error);
+
+      if (
+        error.name === 'NotAllowedError' ||
+        error.message?.includes('Permission denied') ||
+        error.message?.includes('permission')
+      ) {
+        setHasPermission(false);
+        onPermissionDenied?.();
+      } else {
+        onError?.(error);
+      }
+    }
+  }, [isActive, onScan, onError, onPermissionDenied, settings?.vibrateOnScan]);
+
+  useEffect(() => {
+    if (isActive) {
+      startScanning();
+    } else {
+      stopScanning();
+    }
+
+    return () => {
+      stopScanning();
+    };
+  }, [isActive, startScanning, stopScanning]);
+
+  // Custom renderer support
+  if (settings?.customRenderers?.renderScanner) {
+    return settings.customRenderers.renderScanner({
+      onScan,
+      onError,
+      onPermissionDenied,
+      isActive,
+      className,
+      settings
+    });
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={twMerge(
+        'relative w-full h-full overflow-hidden bg-black',
+        settings?.customStyles?.scannerContainer,
+        className
+      )}
+    >
+      <div
+        id={scannerIdRef.current}
+        className="w-full h-full"
+        style={{ minHeight: '300px' }}
+      />
+
+      {/* Custom overlay on top of scanner */}
+      {isInitialized && (
+        <div
+          className={twMerge(
+            'absolute inset-0 pointer-events-none',
+            settings?.customStyles?.scannerOverlay
+          )}
+        >
+          {settings?.customRenderers?.renderScannerOverlay?.({
+            isScanning: isActive && isInitialized
+          })}
+        </div>
+      )}
+
+      {isActive && !isInitialized && (
+        <>
+          {settings?.customRenderers?.renderLoading ? (
+            settings.customRenderers.renderLoading({})
+          ) : (
+            <div
+              className={twMerge(
+                'absolute inset-0 flex items-center justify-center bg-black/80',
+                settings?.customStyles?.loadingContainer
+              )}
+            >
+              <div className="text-white text-center">
+                {settings?.customRenderers?.renderLoadingSpinner ? (
+                  settings.customRenderers.renderLoadingSpinner()
+                ) : (
+                  <>
+                    <div
+                      className={twMerge(
+                        'animate-spin w-8 h-8 border-2 border-white border-t-transparent rounded-full mx-auto mb-2',
+                        settings?.customStyles?.loadingSpinner
+                      )}
+                    />
+                    <LoaderSpinner />
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {hasPermission === false && (
+        <>
+          {settings?.customRenderers?.renderPermissionDenied ? (
+            settings.customRenderers.renderPermissionDenied({})
+          ) : (
+            <div
+              className={twMerge(
+                'absolute inset-0 flex items-center justify-center bg-black/80',
+                settings?.customStyles?.permissionDeniedContainer
+              )}
+            >
+              <div className="text-white text-center p-4">
+                {settings?.customRenderers?.renderPermissionDeniedIcon ? (
+                  settings.customRenderers.renderPermissionDeniedIcon()
+                ) : (
+                  <svg
+                    className={twMerge(
+                      'w-12 h-12 mx-auto mb-3',
+                      settings?.customStyles?.permissionDeniedIcon
+                    )}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M3 3l18 18"
+                    />
+                  </svg>
+                )}
+                {settings?.customRenderers?.renderPermissionDeniedTitle ? (
+                  settings.customRenderers.renderPermissionDeniedTitle({
+                    title: t('product.barcode_scanner.permission_denied_title')
+                  })
+                ) : (
+                  <p
+                    className={twMerge(
+                      'mb-2 font-medium',
+                      settings?.customStyles?.permissionDeniedTitle
+                    )}
+                  >
+                    {t('product.barcode_scanner.permission_denied_title')}
+                  </p>
+                )}
+                {settings?.customRenderers?.renderPermissionDeniedMessage ? (
+                  settings.customRenderers.renderPermissionDeniedMessage({
+                    message: t(
+                      'product.barcode_scanner.permission_denied_message'
+                    )
+                  })
+                ) : (
+                  <p
+                    className={twMerge(
+                      'text-sm text-gray-300',
+                      settings?.customStyles?.permissionDeniedMessage
+                    )}
+                  >
+                    {t('product.barcode_scanner.permission_denied_message')}
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      <style jsx global>{`
+        #${scannerIdRef.current} video {
+          width: 100% !important;
+          height: 100% !important;
+          object-fit: cover !important;
+        }
+        #${scannerIdRef.current} img[alt='Info icon'] {
+          display: none !important;
+        }
+        #${scannerIdRef.current} > div:last-child {
+          display: none !important;
+        }
+        #${scannerIdRef.current}__scan_region {
+          min-height: 300px !important;
+        }
+        #${scannerIdRef.current}__scan_region video {
+          border-radius: 0 !important;
+        }
+        #${scannerIdRef.current}__dashboard_section {
+          display: none !important;
+        }
+        #${scannerIdRef.current}__dashboard_section_csr {
+          display: none !important;
+        }
+        #${scannerIdRef.current}__header_message {
+          display: none !important;
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/data/barcode-endpoints.ts

@@ -0,0 +1,34 @@
+import { api } from '@akinon/next/data/client/api';
+import type { BarcodeSearchResponse } from '../types/barcode';
+
+export const barcodeScannerApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    searchProductByBarcode: build.query<
+      BarcodeSearchResponse,
+      { barcode: string; page?: number; limit?: number }
+    >({
+      query: ({ barcode, page = 1, limit = 12 }) => {
+        const params = new URLSearchParams();
+        params.append('search_text', barcode);
+        params.append('page', String(page));
+        params.append('limit', String(limit));
+
+        return {
+          url: `/api/barcode-search?${params.toString()}`,
+          method: 'GET',
+          headers: {
+            Accept: 'application/json'
+          }
+        };
+      },
+
+      keepUnusedDataFor: 0
+    })
+  }),
+  overrideExisting: true
+});
+
+export const {
+  useSearchProductByBarcodeQuery,
+  useLazySearchProductByBarcodeQuery
+} = barcodeScannerApi;

package/src/hooks/use-barcode-search.ts

@@ -0,0 +1,172 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Product } from '@akinon/next/types';
+import type {
+  BarcodeScanResult,
+  ScannedProductState,
+  BarcodeSearchResponse
+} from '../types/barcode';
+
+export interface UseBarcodeSearchReturn {
+  // State
+  scannedProducts: Product[];
+  isLoading: boolean;
+  error: string | null;
+  lastScannedBarcode: string | null;
+
+  // Actions
+  searchByBarcode: (barcode: string) => Promise<Product[]>;
+  handleScanResult: (result: BarcodeScanResult) => Promise<void>;
+  removeProduct: (productPk: number) => void;
+  clearProducts: () => void;
+  clearError: () => void;
+  reset: () => void;
+}
+
+export function useBarcodeSearch(
+  maxProducts: number = 10
+): UseBarcodeSearchReturn {
+  const [state, setState] = useState<ScannedProductState>({
+    products: [],
+    isLoading: false,
+    error: null,
+    searchedBarcode: null
+  });
+
+  const searchByBarcode = useCallback(
+    async (barcode: string): Promise<Product[]> => {
+      setState((prev) => ({
+        ...prev,
+        isLoading: true,
+        error: null,
+        searchedBarcode: barcode
+      }));
+
+      try {
+        const params = new URLSearchParams();
+        params.append('search_text', barcode);
+
+        const response = await fetch(
+          `/api/barcode-search?${params.toString()}`,
+          {
+            method: 'GET',
+            headers: {
+              Accept: 'application/json'
+            }
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error('search_failed');
+        }
+
+        const result = await response.json();
+
+        // API returns { results: [...] } not { products: [...] }
+        const products = result.results || result.products || [];
+
+        if (products.length > 0) {
+          const newProduct = products[0];
+
+          setState((prev) => {
+            // Check if product already exists
+            const exists = prev.products.some((p) => p.pk === newProduct.pk);
+            if (exists) {
+              return {
+                ...prev,
+                isLoading: false,
+                error: null
+              };
+            }
+
+            // Check max products limit
+            if (prev.products.length >= maxProducts) {
+              return {
+                ...prev,
+                isLoading: false,
+                error: `Maximum ${maxProducts} products allowed`
+              };
+            }
+
+            return {
+              ...prev,
+              products: [...prev.products, newProduct],
+              isLoading: false,
+              error: null
+            };
+          });
+
+          return [newProduct];
+        } else {
+          setState((prev) => ({
+            ...prev,
+            isLoading: false,
+            error: 'product_not_found'
+          }));
+          return [];
+        }
+      } catch (error: any) {
+        const errorMessage =
+          error?.data?.error || error?.message || 'search_failed';
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: errorMessage
+        }));
+        return [];
+      }
+    },
+    [maxProducts]
+  );
+
+  const handleScanResult = useCallback(
+    async (result: BarcodeScanResult): Promise<void> => {
+      await searchByBarcode(result.text);
+    },
+    [searchByBarcode]
+  );
+
+  const removeProduct = useCallback((productPk: number): void => {
+    setState((prev) => ({
+      ...prev,
+      products: prev.products.filter((p) => p.pk !== productPk)
+    }));
+  }, []);
+
+  const clearProducts = useCallback((): void => {
+    setState((prev) => ({
+      ...prev,
+      products: []
+    }));
+  }, []);
+
+  const clearError = useCallback((): void => {
+    setState((prev) => ({
+      ...prev,
+      error: null
+    }));
+  }, []);
+
+  const reset = useCallback((): void => {
+    setState({
+      products: [],
+      isLoading: false,
+      error: null,
+      searchedBarcode: null
+    });
+  }, []);
+
+  return {
+    scannedProducts: state.products,
+    isLoading: state.isLoading,
+    error: state.error,
+    lastScannedBarcode: state.searchedBarcode,
+    searchByBarcode,
+    handleScanResult,
+    removeProduct,
+    clearProducts,
+    clearError,
+    reset
+  };
+}