TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix agent balance QR

Browse Source
This commit is contained in:
unknown
2025-05-26 19:58:51 +07:00
parent c3c49da778
commit 8266c937bc
1 changed files with 26 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/members/agent-balance/AgentBalance.tsx
View File

@ -112,13 +112,15 @@ const AgentBalance = () => {
async function getQrCode(customerId:any): Promise<void> {
try {
setBarcode(`https://img.freepik.com/free-vector/scan-me-qr-code_78370-2915.jpg?semt=ais_hybrid&w=740`)
setBarcode(``)
let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
console.log(getToken.data.data);
// setBarcode(getToken.data.data.qrCode);
setBarcode(getToken.data.data.qrCode);
} catch (error: any) {
toast.warning(error.message)
console.log(error);
} finally {
// setBarcode(`https://miro.medium.com/v2/resize:fit:250/1*DcceOyLkzU--EzP4PYKd_g.png`)
}
}
@ -192,35 +194,34 @@ const AgentBalance = () => {
const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
const cardRef:any = useRef(null);
// useEffect(() => {
// fetchToken();
// }, []);
// async function fetchToken(): Promise<void> {
// try {
// let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
// console.log(getToken.data.data);
// // setBarcode(getToken.data.data.qrCode);
// setBarcode(`https://img.freepik.com/free-vector/scan-me-qr-code_78370-2915.jpg?semt=ais_hybrid&w=740`)
// } catch (error: any) {
// toast.warning(error.message)
// console.log(error);
// }
// }
const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
return new Promise((resolve) => {
if (img.complete && img.naturalHeight !== 0) {
resolve();
} else {
toast.warning(`No QR Code`)
img.onload = () => resolve();
}
});
};
const handleDownload = async () => {
if (!cardRef.current) return;
const img = cardRef.current.querySelector('img');
if (!img || !img.complete) {
// Wait until the barcode image has fully loaded
await new Promise((resolve) => {
img.onload = resolve;
});
if (img) {
await waitForImageLoad(img);
} else {
return toast.warning(`No QR Code`)
}
const canvas = await html2canvas(cardRef.current, {
useCORS: true, // Important for external images
useCORS: true,
allowTaint: false,
backgroundColor: 'white',
scale: 2,
});
const dataUrl = canvas.toDataURL('image/png');
@ -230,23 +231,21 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
link.click();
};
return (
<div className="flex flex-col items-center">
{/* Card content to render */}
<div ref={cardRef}
className="relative w-[320px] h-[460px] rounded-xl overflow-hidden shadow-xl bg-white"
className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white"
>
<div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[50px] px-4 text-center">
<div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[100px] px-4 text-center">
<p className="text-[24px] font-semibold text-[#5b0066] mb-5">
{agent_name}
</p>
{barcode && (
<img
src={barcode}
alt="Barcode"
className="w-56 h-56 object-contain mb-2"
className="w-80 h-80 object-contain mb-2"
/>
)}
</div>
@ -261,51 +260,6 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
</button>
</div>
);
return (
<div className="relative w-[320px] h-[460px] rounded-xl overflow-hidden shadow-xl">
<div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[50px] px-4 text-center">
<p className="text-[24px] font-semibold text-[#5b0066] mb-5">
{agent_name}
</p>
{barcode && (
<img
src={barcode}
alt="Barcode"
className="w-70 h-70 object-contain mb-2"
/>
)}
</div>
</div>
);
// return (
// <div className="relative w-[320px] h-[460px] rounded-xl overflow-hidden shadow-lg">
// {/* Background Card Image */}
// <img
// src={toAbsoluteUrl("/media/images/card.png")}
// alt="Card Template"
// className="absolute inset-0 w-full h-full object-cover"
// />
// {/* Content Overlay */}
// <div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-32 px-4 text-center">
// {/* Agent Name at Top */}
// <p className="text-sm font-semibold text-[#5b0066] mb-4">
// {agent_name}
// </p>
// {/* Barcode */}
// {barcode && (
// <img
// src={barcode}
// alt="Barcode"
// className="w-40 h-40 object-contain mb-4"
// />
// )}
// </div>
// </div>
// );
};
export default AgentBalance;