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

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

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useLocalization } from '@akinon/next/hooks';
+import type { BarcodeScannerButtonProps } from '../types/barcode';
+
+export function BarcodeScannerButton({
+  onClick,
+  className,
+  disabled = false,
+  settings,
+  style
+}: BarcodeScannerButtonProps) {
+  const { t } = useLocalization();
+
+  // Custom button renderer
+  if (settings?.customRenderers?.renderFloatingButton) {
+    return settings.customRenderers.renderFloatingButton({
+      onClick,
+      className
+    });
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={t('product.barcode_scanner.button_label')}
+      style={style}
+      className={twMerge(
+        // Base styles - fixed position bottom right, mobile only
+        'fixed bottom-20 right-4 z-50 md:hidden',
+        // Button appearance
+        'px-4 py-3 rounded-full',
+        'bg-black text-white',
+        'flex items-center justify-center',
+        'shadow-lg hover:shadow-xl',
+        'transition-all duration-200',
+        'hover:scale-105 active:scale-95',
+        'text-sm font-medium whitespace-nowrap',
+        // Disabled state
+        disabled && 'opacity-50 cursor-not-allowed hover:scale-100',
+        // Custom styles
+        settings?.customStyles?.floatingButton,
+        className
+      )}
+    >
+      {settings?.customRenderers?.renderFloatingButtonIcon ? (
+        settings.customRenderers.renderFloatingButtonIcon()
+      ) : (
+        <span
+          className={twMerge(
+            'text-sm font-medium',
+            settings?.customStyles?.floatingButtonIcon
+          )}
+        >
+          {t('product.barcode_scanner.button_text')}
+        </span>
+      )}
+    </button>
+  );
+}

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

@@ -0,0 +1,632 @@
+'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>
+  );
+}