✨ Добавлена генерация QR кода через существующую библиотеку qrcode
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
// Setup Wizard - пошаговая настройка после создания подписки
|
// Setup Wizard - пошаговая настройка после создания подписки
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { X, ChevronLeft, Laptop, Smartphone, Check, Copy, QrCode } from 'lucide-react';
|
import { X, ChevronLeft, Laptop, Smartphone, Check, Copy, QrCode } from 'lucide-react';
|
||||||
|
|
||||||
interface SetupWizardProps {
|
interface SetupWizardProps {
|
||||||
@@ -32,6 +32,30 @@ export default function SetupWizard({
|
|||||||
const [selectedLocations, setSelectedLocations] = useState<string[]>([]);
|
const [selectedLocations, setSelectedLocations] = useState<string[]>([]);
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
const [showQR, setShowQR] = useState(false);
|
const [showQR, setShowQR] = useState(false);
|
||||||
|
const [qrDataUrl, setQrDataUrl] = useState<string>('');
|
||||||
|
|
||||||
|
// Генерация 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 = [
|
const locations = [
|
||||||
@@ -451,10 +475,16 @@ export default function SetupWizard({
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{showQR && (
|
{showQR && qrDataUrl && (
|
||||||
<div className="p-6 bg-white rounded-xl">
|
<div className="p-6 rounded-xl" style={{ background: 'var(--text-white)' }}>
|
||||||
<div className="text-center text-slate-800 text-sm mb-2">QR код</div>
|
<img
|
||||||
<div className="text-xs text-slate-600 break-all">{subscriptionUrl}</div>
|
src={qrDataUrl}
|
||||||
|
alt="QR код подписки"
|
||||||
|
className="w-full h-auto"
|
||||||
|
/>
|
||||||
|
<div className="mt-3 text-center text-xs break-all" style={{ color: 'var(--bg-card)' }}>
|
||||||
|
{subscriptionUrl}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user