242 lines
8.3 KiB
TypeScript
242 lines
8.3 KiB
TypeScript
|
import React, { useState, useEffect } from "react";
|
||
|
|
import QRCode from "react-qr-code";
|
||
|
|
import { formatCurrency } from "../utils/formatters";
|
||
|
|
import { Input } from "./ui/input";
|
||
|
|
import { Label } from "./ui/label";
|
||
|
|
|
||
|
|
interface ReceivePixDialogProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
onConfirm: (value: number) => void;
|
||
|
|
orderId: number;
|
||
|
|
customerName: string;
|
||
|
|
orderValue: number;
|
||
|
|
showQrCode: boolean;
|
||
|
|
qrCodeValue?: string;
|
||
|
|
pixValue?: number;
|
||
|
|
processing?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ReceivePixDialog: React.FC<ReceivePixDialogProps> = ({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
onConfirm,
|
||
|
|
orderId,
|
||
|
|
customerName,
|
||
|
|
orderValue,
|
||
|
|
showQrCode,
|
||
|
|
qrCodeValue = "",
|
||
|
|
pixValue = 0,
|
||
|
|
processing = false,
|
||
|
|
}) => {
|
||
|
|
const [inputValue, setInputValue] = useState<string>("");
|
||
|
|
const [isModalAnimating, setIsModalAnimating] = useState(false);
|
||
|
|
const [shouldRenderModal, setShouldRenderModal] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (isOpen) {
|
||
|
|
setShouldRenderModal(true);
|
||
|
|
setTimeout(() => setIsModalAnimating(true), 10);
|
||
|
|
if (!showQrCode) {
|
||
|
|
setInputValue(orderValue.toFixed(2));
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setIsModalAnimating(false);
|
||
|
|
const timer = setTimeout(() => setShouldRenderModal(false), 300);
|
||
|
|
return () => clearTimeout(timer);
|
||
|
|
}
|
||
|
|
}, [isOpen, showQrCode, orderValue]);
|
||
|
|
|
||
|
|
const handleConfirm = () => {
|
||
|
|
const value = parseFloat(inputValue);
|
||
|
|
if (isNaN(value) || value <= 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
onConfirm(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCopyQrCode = () => {
|
||
|
|
if (qrCodeValue) {
|
||
|
|
navigator.clipboard.writeText(qrCodeValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!shouldRenderModal) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center">
|
||
|
|
{/* Overlay */}
|
||
|
|
<div
|
||
|
|
className={`absolute inset-0 bg-[#001f3f]/60 backdrop-blur-sm transition-opacity duration-300 ${
|
||
|
|
isModalAnimating ? "opacity-100" : "opacity-0"
|
||
|
|
}`}
|
||
|
|
onClick={onClose}
|
||
|
|
></div>
|
||
|
|
|
||
|
|
{/* Dialog */}
|
||
|
|
<div
|
||
|
|
className={`relative bg-white rounded-3xl shadow-2xl max-w-md w-full mx-4 transform transition-all duration-300 ${
|
||
|
|
isModalAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{/* Header */}
|
||
|
|
<div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden">
|
||
|
|
<div className="relative z-10">
|
||
|
|
<div className="flex items-center gap-3 mb-2">
|
||
|
|
<div className="w-12 h-12 bg-teal-500/20 rounded-2xl flex items-center justify-center">
|
||
|
|
<svg
|
||
|
|
className="w-6 h-6 text-teal-400"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2.5"
|
||
|
|
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<h3 className="text-xl font-black">Recebimento via PIX</h3>
|
||
|
|
<p className="text-xs text-blue-400 font-bold uppercase tracking-wider mt-0.5">
|
||
|
|
{showQrCode ? "QR Code gerado" : "Informe o valor"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="p-2 text-slate-400 hover:text-slate-600 rounded-lg transition-colors"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-6 h-6"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M6 18L18 6M6 6l12 12"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-teal-400/10 rounded-full blur-2xl"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="p-6">
|
||
|
|
{!showQrCode ? (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="pixValue">Informe o valor a ser recebido via PIX</Label>
|
||
|
|
<Input
|
||
|
|
id="pixValue"
|
||
|
|
type="number"
|
||
|
|
step="0.01"
|
||
|
|
min="0.01"
|
||
|
|
max={orderValue}
|
||
|
|
value={inputValue}
|
||
|
|
onChange={(e) => setInputValue(e.target.value)}
|
||
|
|
placeholder="0.00"
|
||
|
|
className="mt-2"
|
||
|
|
/>
|
||
|
|
<p className="text-xs text-slate-500 mt-1">
|
||
|
|
Valor máximo: {formatCurrency(orderValue)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* Informações do pedido */}
|
||
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-slate-500">Pedido</Label>
|
||
|
|
<p className="text-sm font-bold text-slate-800">{orderId}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-slate-500">Cliente</Label>
|
||
|
|
<p className="text-sm font-bold text-slate-800 truncate">{customerName}</p>
|
||
|
|
</div>
|
||
|
|
<div className="col-span-2">
|
||
|
|
<Label className="text-xs text-slate-500">Valor</Label>
|
||
|
|
<p className="text-lg font-black text-teal-600">
|
||
|
|
{formatCurrency(pixValue)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* QR Code */}
|
||
|
|
<div className="flex justify-center p-4 bg-slate-50 rounded-xl">
|
||
|
|
<div className="bg-white p-4 rounded-lg">
|
||
|
|
<QRCode
|
||
|
|
value={qrCodeValue}
|
||
|
|
size={200}
|
||
|
|
level="M"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Código PIX */}
|
||
|
|
<div>
|
||
|
|
<Label className="text-xs text-slate-500 mb-2 block">
|
||
|
|
Código PIX (copiar e colar)
|
||
|
|
</Label>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Input
|
||
|
|
readOnly
|
||
|
|
value={qrCodeValue}
|
||
|
|
onClick={(e) => (e.target as HTMLInputElement).select()}
|
||
|
|
className="font-mono text-xs"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
onClick={handleCopyQrCode}
|
||
|
|
className="px-4 py-2 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 transition-colors text-sm font-medium"
|
||
|
|
title="Copiar código PIX"
|
||
|
|
>
|
||
|
|
Copiar
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="p-6 pt-0 flex justify-end gap-3">
|
||
|
|
{!showQrCode ? (
|
||
|
|
<>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="flex-1 py-3 px-4 bg-gray-200 text-gray-700 font-black uppercase text-xs tracking-wider rounded-xl transition-all shadow-lg shadow-gray-300/20 active:scale-95 hover:bg-gray-300"
|
||
|
|
>
|
||
|
|
Cancelar
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={handleConfirm}
|
||
|
|
disabled={processing || !inputValue || parseFloat(inputValue) <= 0}
|
||
|
|
className="flex-1 py-3 px-4 bg-teal-500 text-white font-black uppercase text-xs tracking-wider rounded-xl transition-all shadow-lg shadow-teal-500/20 active:scale-95 hover:bg-teal-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
>
|
||
|
|
{processing ? "Gerando..." : "Gerar"}
|
||
|
|
</button>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="flex-1 py-3 px-4 bg-teal-500 text-white font-black uppercase text-xs tracking-wider rounded-xl transition-all shadow-lg shadow-teal-500/20 active:scale-95 hover:bg-teal-600"
|
||
|
|
>
|
||
|
|
Fechar
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ReceivePixDialog;
|
||
|
|
|