68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
"use client";
|
|
import PromptpayImage from "#/assets/promptpay.jpg";
|
|
import { useFormContext } from "@/components/form";
|
|
import Image from "next/image";
|
|
import { useEffect, useState } from "react";
|
|
import QRCode from "react-qr-code";
|
|
import { generateQrcode } from "./api";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
|
|
export function DynamicPPQR() {
|
|
const form = useFormContext();
|
|
const [current, setCurrent] = useState(form.values.amount as string);
|
|
const [qrcode, setQrcode] = useState("");
|
|
const [changed, setChanged] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const amount = form.values.amount as string;
|
|
if (!amount || Number.isNaN(Number(amount))) {
|
|
setCurrent("");
|
|
setQrcode("");
|
|
setChanged(false);
|
|
return;
|
|
}
|
|
let timeout: any;
|
|
generateQrcode(amount).then(
|
|
(v) => (
|
|
setQrcode(v),
|
|
setCurrent(amount),
|
|
setChanged(true),
|
|
(timeout = setTimeout(() => setChanged(false), 2000))
|
|
),
|
|
);
|
|
return () => clearTimeout(timeout);
|
|
}, [form.values.amount]);
|
|
return (
|
|
<Tooltip open={changed}>
|
|
<TooltipTrigger asChild>
|
|
{form.values.amount ? (
|
|
current === form.values.amount ? (
|
|
<div className="shrink-0 rounded bg-white p-1">
|
|
<QRCode value={qrcode} size={128 - 8} />
|
|
</div>
|
|
) : (
|
|
<div className="size-32 shrink-0 animate-pulse overflow-hidden rounded">
|
|
<Image
|
|
src={PromptpayImage}
|
|
alt="Promptpay QR Code"
|
|
className="max-w-32 shrink-0 rounded blur-md"
|
|
/>
|
|
</div>
|
|
)
|
|
) : (
|
|
<Image
|
|
src={PromptpayImage}
|
|
alt="Promptpay QR Code"
|
|
className="max-w-32 shrink-0 rounded"
|
|
/>
|
|
)}
|
|
</TooltipTrigger>
|
|
<TooltipContent>จำนวน {current} บาท</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|