diff --git a/components/SetupWizard.tsx b/components/SetupWizard.tsx index 009af9c..0b0e30d 100644 --- a/components/SetupWizard.tsx +++ b/components/SetupWizard.tsx @@ -1,7 +1,7 @@ // Setup Wizard - пошаговая настройка после создания подписки 'use client'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { X, ChevronLeft, Laptop, Smartphone, Check, Copy, QrCode } from 'lucide-react'; interface SetupWizardProps { @@ -32,6 +32,30 @@ export default function SetupWizard({ const [selectedLocations, setSelectedLocations] = useState([]); const [copied, setCopied] = useState(false); const [showQR, setShowQR] = useState(false); + const [qrDataUrl, setQrDataUrl] = useState(''); + + // Генерация QR кода при открытии финального шага + useEffect(() => { + if (step === 'final' && subscriptionUrl && !qrDataUrl) { + import('qrcode').then((QRCode) => { + QRCode.toDataURL(subscriptionUrl, { + width: 300, + margin: 2, + color: { + dark: '#000000', + light: '#FFFFFF', + }, + errorCorrectionLevel: 'H', + }) + .then((dataUrl) => { + setQrDataUrl(dataUrl); + }) + .catch((err) => { + console.error('Failed to generate QR code:', err); + }); + }); + } + }, [step, subscriptionUrl, qrDataUrl]); // Локации для выбора (для тарифа "Расширенный") const locations = [ @@ -451,10 +475,16 @@ export default function SetupWizard({ )} - {showQR && ( -
-
QR код
-
{subscriptionUrl}
+ {showQR && qrDataUrl && ( +
+ QR код подписки +
+ {subscriptionUrl} +
)}