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

package/src/views/barcode-scanner-modal.tsx

@@ -1,632 +0,0 @@
-'use client';
-
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useLocalization } from '@akinon/next/hooks';
-import { Product } from '@akinon/next/types';
-import { Image } from '@akinon/next/components/image';
-import { BarcodeScanner } from '../components/barcode-scanner';
-import { useBarcodeSearch } from '../hooks/use-barcode-search';
-import { ProcessingSpinner } from '../components/processing-spinner';
-import type {
-  BarcodeScannerModalProps,
-  BarcodeScanResult
-} from '../types/barcode';
-
-export function BarcodeScannerModal({
-  isOpen,
-  onClose,
-  onProductFound,
-  onContinueToVTO,
-  className,
-  settings
-}: BarcodeScannerModalProps) {
-  const { t } = useLocalization();
-  const [isScannerActive, setIsScannerActive] = useState(true);
-  const [permissionDenied, setPermissionDenied] = useState(false);
-
-  const {
-    scannedProducts,
-    isLoading,
-    error,
-    handleScanResult,
-    removeProduct,
-    clearError,
-    reset
-  } = useBarcodeSearch(settings?.maxProducts || 10);
-
-  const cssVariables = useMemo(() => {
-    if (!settings?.cssVariables && !settings?.theme) return {};
-
-    const variables: Record<string, string> = {};
-
-    if (settings?.cssVariables) {
-      Object.entries(settings.cssVariables).forEach(([key, value]) => {
-        if (typeof value === 'string') {
-          variables[`--${key}`] = value;
-        }
-      });
-    }
-
-    if (settings?.theme) {
-      const { colors, spacing, borderRadius, fonts } = settings.theme;
-
-      if (colors) {
-        Object.entries(colors).forEach(([key, value]) => {
-          if (value && typeof value === 'string')
-            variables[`--barcode-color-${key}`] = value;
-        });
-      }
-
-      if (spacing) {
-        Object.entries(spacing).forEach(([key, value]) => {
-          if (value && typeof value === 'string')
-            variables[`--barcode-spacing-${key}`] = value;
-        });
-      }
-
-      if (borderRadius) {
-        Object.entries(borderRadius).forEach(([key, value]) => {
-          if (value && typeof value === 'string')
-            variables[`--barcode-border-radius-${key}`] = value;
-        });
-      }
-
-      if (fonts) {
-        Object.entries(fonts).forEach(([key, value]) => {
-          if (value && typeof value === 'string')
-            variables[`--barcode-font-${key}`] = value;
-        });
-      }
-    }
-
-    return variables;
-  }, [settings?.cssVariables, settings?.theme]);
-
-  useEffect(() => {
-    if (error) {
-      const timer = setTimeout(() => {
-        clearError();
-      }, 2000);
-      return () => clearTimeout(timer);
-    }
-  }, [error, clearError]);
-
-  const handleScan = useCallback(
-    async (result: BarcodeScanResult) => {
-      clearError();
-      await handleScanResult(result);
-    },
-    [handleScanResult, clearError]
-  );
-
-  const handlePermissionDenied = useCallback(() => {
-    setPermissionDenied(true);
-    setIsScannerActive(false);
-  }, []);
-
-  const handleScannerError = useCallback((error: Error) => {
-    console.error('Scanner error:', error);
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setIsScannerActive(false);
-    reset();
-    setPermissionDenied(false);
-    onClose();
-  }, [onClose, reset]);
-
-  const handleContinueToVTO = useCallback(() => {
-    if (scannedProducts.length > 0) {
-      setIsScannerActive(false);
-
-      const products = [...scannedProducts];
-
-      reset();
-      setPermissionDenied(false);
-      onContinueToVTO?.(products);
-    }
-  }, [scannedProducts, onContinueToVTO, reset]);
-
-  useEffect(() => {
-    if (scannedProducts.length > 0) {
-      onProductFound?.(scannedProducts);
-    }
-  }, [scannedProducts, onProductFound]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setIsScannerActive(true);
-      setPermissionDenied(false);
-    } else {
-      setIsScannerActive(false);
-    }
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  if (settings?.customRenderers?.renderModal) {
-    return settings.customRenderers.renderModal({
-      isOpen,
-      onClose: handleClose,
-      onProductFound,
-      onContinueToVTO,
-      className,
-      settings
-    });
-  }
-
-  const renderHeader = () => {
-    if (settings?.customRenderers?.renderModalHeader) {
-      return settings.customRenderers.renderModalHeader({
-        title: t('product.barcode_scanner.title'),
-        onClose: handleClose
-      });
-    }
-
-    return (
-      <div
-        className={twMerge(
-          'flex items-center justify-center px-4 py-4 border-b border-gray-200 relative',
-          settings?.customStyles?.modalHeader
-        )}
-      >
-        <h2
-          className={twMerge(
-            'text-base font-medium text-black text-center',
-            settings?.customStyles?.modalTitle
-          )}
-        >
-          {t('product.barcode_scanner.title')}
-        </h2>
-
-        {settings?.customRenderers?.renderModalCloseButton ? (
-          settings.customRenderers.renderModalCloseButton({
-            onClick: handleClose
-          })
-        ) : (
-          <button
-            onClick={handleClose}
-            className={twMerge(
-              'absolute right-4 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-100 rounded-full transition-colors',
-              settings?.customStyles?.modalCloseButton
-            )}
-            aria-label={t('common.close')}
-          >
-            {settings?.customRenderers?.renderModalCloseIcon ? (
-              settings.customRenderers.renderModalCloseIcon()
-            ) : (
-              <svg
-                className={twMerge(
-                  'w-8 h-8',
-                  settings?.customStyles?.modalCloseIcon
-                )}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            )}
-          </button>
-        )}
-      </div>
-    );
-  };
-
-  const renderPermissionDenied = () => {
-    if (settings?.customRenderers?.renderPermissionDenied) {
-      return settings.customRenderers.renderPermissionDenied({
-        onRequestPermission: () => {
-          setPermissionDenied(false);
-          setIsScannerActive(true);
-        }
-      });
-    }
-
-    return (
-      <div
-        className={twMerge(
-          'flex flex-col items-center justify-center p-8 text-center h-full bg-gray-900',
-          settings?.customStyles?.permissionDeniedContainer
-        )}
-      >
-        {settings?.customRenderers?.renderPermissionDeniedIcon ? (
-          settings.customRenderers.renderPermissionDeniedIcon()
-        ) : (
-          <svg
-            className={twMerge(
-              'w-16 h-16 text-white mb-4',
-              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')
-          })
-        ) : (
-          <h3
-            className={twMerge(
-              'text-lg font-medium text-white mb-2',
-              settings?.customStyles?.permissionDeniedTitle
-            )}
-          >
-            {t('product.barcode_scanner.permission_denied_title')}
-          </h3>
-        )}
-
-        {settings?.customRenderers?.renderPermissionDeniedMessage ? (
-          settings.customRenderers.renderPermissionDeniedMessage({
-            message: t('product.barcode_scanner.permission_denied_message')
-          })
-        ) : (
-          <p
-            className={twMerge(
-              'text-sm text-gray-300 mb-6',
-              settings?.customStyles?.permissionDeniedMessage
-            )}
-          >
-            {t('product.barcode_scanner.permission_denied_message')}
-          </p>
-        )}
-
-        {settings?.customRenderers?.renderPermissionDeniedButton ? (
-          settings.customRenderers.renderPermissionDeniedButton({
-            onClick: () => {
-              setPermissionDenied(false);
-              setIsScannerActive(true);
-            },
-            text: t('product.barcode_scanner.try_again')
-          })
-        ) : (
-          <button
-            onClick={() => {
-              setPermissionDenied(false);
-              setIsScannerActive(true);
-            }}
-            className={twMerge(
-              'px-6 py-3 bg-white text-black rounded-full font-medium hover:bg-gray-100 transition-colors',
-              settings?.customStyles?.permissionDeniedButton
-            )}
-          >
-            {t('product.barcode_scanner.try_again')}
-          </button>
-        )}
-      </div>
-    );
-  };
-
-  const renderLoading = () => {
-    if (settings?.customRenderers?.renderLoading) {
-      return settings.customRenderers.renderLoading({
-        text: t('product.barcode_scanner.searching')
-      });
-    }
-
-    return (
-      <div
-        className={twMerge(
-          'absolute inset-0 flex items-center justify-center bg-black/60 z-10',
-          settings?.customStyles?.loadingContainer
-        )}
-      >
-        <div className="flex flex-col items-center">
-          {settings?.customRenderers?.renderLoadingSpinner ? (
-            settings.customRenderers.renderLoadingSpinner()
-          ) : (
-            <ProcessingSpinner
-              showText={false}
-              className={settings?.customStyles?.loadingSpinner}
-            />
-          )}
-          {settings?.customRenderers?.renderLoadingText ? (
-            settings.customRenderers.renderLoadingText({
-              text: t('product.barcode_scanner.searching')
-            })
-          ) : (
-            <span
-              className={twMerge(
-                'text-white mt-4 text-sm',
-                settings?.customStyles?.loadingText
-              )}
-            >
-              {t('product.barcode_scanner.searching')}
-            </span>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  const renderError = () => {
-    if (!error) return null;
-
-    if (settings?.customRenderers?.renderError) {
-      return settings.customRenderers.renderError({
-        error: t(`product.barcode_scanner.errors.${error}`),
-        onRetry: clearError
-      });
-    }
-
-    return (
-      <div
-        className={twMerge(
-          'absolute bottom-32 left-4 right-4 bg-red-500/90 text-white p-3 rounded-lg flex items-center justify-between z-20',
-          settings?.customStyles?.errorContainer
-        )}
-      >
-        {settings?.customRenderers?.renderErrorMessage ? (
-          settings.customRenderers.renderErrorMessage({
-            message: t(`product.barcode_scanner.errors.${error}`)
-          })
-        ) : (
-          <span className={settings?.customStyles?.errorMessage}>
-            {t(`product.barcode_scanner.errors.${error}`)}
-          </span>
-        )}
-        {settings?.customRenderers?.renderErrorRetryButton ? (
-          settings.customRenderers.renderErrorRetryButton({
-            onClick: clearError,
-            text: 'Close'
-          })
-        ) : (
-          <button
-            onClick={clearError}
-            className={twMerge(
-              'ml-2 p-1 hover:bg-red-600 rounded',
-              settings?.customStyles?.errorRetryButton
-            )}
-          >
-            {settings?.customRenderers?.renderErrorIcon ? (
-              settings.customRenderers.renderErrorIcon()
-            ) : (
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            )}
-          </button>
-        )}
-      </div>
-    );
-  };
-
-  const renderProductCard = (product: Product) => {
-    if (settings?.customRenderers?.renderProductCard) {
-      return settings.customRenderers.renderProductCard({
-        product,
-        isSelected: true,
-        onRemove: () => removeProduct(product.pk)
-      });
-    }
-
-    const imageUrl = product.productimage_set?.[0]?.image || '';
-
-    return (
-      <div
-        key={product.pk}
-        className={twMerge(
-          'relative w-[69px] h-[69px] flex-shrink-0',
-          settings?.customStyles?.productCard
-        )}
-      >
-        <div
-          className={twMerge(
-            'w-full h-full bg-white rounded overflow-hidden',
-            settings?.customStyles?.productImageWrapper
-          )}
-        >
-          {settings?.customRenderers?.renderProductImage ? (
-            settings.customRenderers.renderProductImage({
-              imageUrl,
-              alt: product.name,
-              className: settings?.customStyles?.productImage
-            })
-          ) : (
-            <Image
-              src={imageUrl}
-              alt={product.name}
-              width={69}
-              height={69}
-              className={twMerge(
-                'w-full h-full object-cover',
-                settings?.customStyles?.productImage
-              )}
-            />
-          )}
-        </div>
-
-        {/* Checkmark indicator */}
-        <div
-          className={twMerge(
-            'absolute -bottom-1 -right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center border border-white',
-            settings?.customStyles?.productCheckmark
-          )}
-        >
-          {settings?.customRenderers?.renderProductCheckmark ? (
-            settings.customRenderers.renderProductCheckmark()
-          ) : (
-            <svg className="w-2 h-2 text-white" viewBox="0 0 8 6" fill="none">
-              <path
-                d="M1 3L3 5L7 1"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  const renderProductList = () => {
-    if (scannedProducts.length === 0) return null;
-
-    if (settings?.customRenderers?.renderProductList) {
-      return settings.customRenderers.renderProductList({
-        products: scannedProducts,
-        onRemove: (product) => removeProduct(product.pk)
-      });
-    }
-
-    return (
-      <div
-        className={twMerge(
-          'absolute bottom-[180px] left-1/2 -translate-x-1/2 z-10',
-          settings?.customStyles?.productListContainer
-        )}
-      >
-        <div
-          className={twMerge(
-            'flex gap-2 justify-center',
-            settings?.customStyles?.productList
-          )}
-        >
-          {scannedProducts.map(renderProductCard)}
-        </div>
-      </div>
-    );
-  };
-
-  const renderHelpText = () => {
-    const helpText =
-      scannedProducts.length > 0
-        ? t('product.barcode_scanner.scan_more_help')
-        : t('product.barcode_scanner.help_text');
-
-    if (settings?.customRenderers?.renderScannerHelpText) {
-      return settings.customRenderers.renderScannerHelpText({ text: helpText });
-    }
-
-    return (
-      <p
-        className={twMerge(
-          'absolute bottom-[130px] left-4 right-4 text-white text-center text-base font-medium z-10',
-          settings?.customStyles?.scannerHelpText
-        )}
-      >
-        {helpText}
-      </p>
-    );
-  };
-
-  const renderContinueButton = () => {
-    const showButton =
-      settings?.showContinueToVTO !== false && scannedProducts.length > 0;
-    if (!showButton) return null;
-
-    if (settings?.customRenderers?.renderContinueButton) {
-      return settings.customRenderers.renderContinueButton({
-        onClick: handleContinueToVTO,
-        disabled: scannedProducts.length === 0,
-        text: t('product.barcode_scanner.continue_to_vto')
-      });
-    }
-
-    return (
-      <div
-        className={twMerge(
-          'absolute bottom-4 left-4 right-4 z-10',
-          settings?.customStyles?.actionsContainer
-        )}
-      >
-        <button
-          onClick={handleContinueToVTO}
-          disabled={scannedProducts.length === 0}
-          className={twMerge(
-            'w-full py-4 bg-black text-white rounded-full font-medium text-base transition-colors',
-            scannedProducts.length === 0 && 'opacity-50 cursor-not-allowed',
-            settings?.customStyles?.continueButton,
-            scannedProducts.length === 0 &&
-              settings?.customStyles?.continueButtonDisabled
-          )}
-        >
-          {t('product.barcode_scanner.continue_to_vto')}
-        </button>
-      </div>
-    );
-  };
-
-  return (
-    <div
-      className={twMerge(
-        'fixed inset-0 z-[9999]',
-        settings?.customStyles?.modalOverlay
-      )}
-      style={cssVariables}
-    >
-      <div
-        className={twMerge(
-          'flex flex-col h-full w-full bg-white',
-          settings?.customStyles?.modalContainer,
-          className
-        )}
-      >
-        {/* Header */}
-        {renderHeader()}
-
-        {/* Scanner Area */}
-        <div
-          className={twMerge(
-            'relative flex-1 overflow-hidden',
-            settings?.customStyles?.modalContent
-          )}
-        >
-          {permissionDenied ? (
-            renderPermissionDenied()
-          ) : (
-            <>
-              <BarcodeScanner
-                onScan={handleScan}
-                onError={handleScannerError}
-                onPermissionDenied={handlePermissionDenied}
-                isActive={isScannerActive && isOpen}
-                settings={settings}
-              />
-
-              {isLoading && renderLoading()}
-              {renderError()}
-              {renderProductList()}
-              {renderHelpText()}
-              {renderContinueButton()}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}