token legacy

src/pages/members/agent-balance/AgentBalance.tsx

@@ -4,6 +4,7 @@ import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
 import html2canvas from 'html2canvas';
 import { Helmet } from 'react-helmet';
+import { Input } from '@/components/ui/input';
 import {
   DialogContent,
   MenuItem,
@@ -192,7 +193,9 @@ const AgentBalance = () => {
   );
 };
 
+//  ====================
 const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
+  const [token_legacy, setToken_legacy] = useState('');
   const cardRef:any = useRef(null);
 
   const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
@@ -206,7 +209,6 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
     });
   };
 
-
   const handleDownload = async () => {
     if (!cardRef.current) return;
 
@@ -231,12 +233,20 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
     link.click();
   };
 
+  const updateTokenLegacy = async () => {
+    try {
+      if (!token_legacy) toast.warning(`Token Legacy can not be empty`)
+      await axios.post(`${BASE_URL}/token/insert-token-legacy`, { customerid: customerId, token_legacy });
+      toast.success(`Success Update Token Legacy`)
+    } catch (error:any) {
+      toast.error(error.message)
+    }
+  }
+
   return (
     <div className="flex flex-col items-center">
       {/* Card content to render */}
-      <div ref={cardRef}
+      <div ref={cardRef} className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white mt-20">
-        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-[100px] px-4 text-center">
           <p className="text-[24px] font-semibold text-[#5b0066] mb-5">
             {agent_name}
@@ -251,13 +261,29 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
         </div>
       </div>
       
+      <div className="w-full pt-[20px]">
+        <div className="flex items-baseline flex-wrap lg:flex-nowrap">
+          <label className="form-label flex items-center">
+            Token Legacy<span className="text-red-500"></span>
+          </label>
+          <textarea
+            className="input"
+            name="token_legacy"
+            value={token_legacy}
+            onChange={(e:any) => setToken_legacy(e.target.value)}
+          />
+        </div>
+      </div>
+
       {/* Download Button */}
-      <button
+      <div className="flex justify-between w-full mt-4 px-4">
-        onClick={handleDownload}
+        <button onClick={handleDownload} className="border border-red-400 text-red-500 px-4 py-1 rounded hover:bg-red-50 text-sm">
-        className="mt-4 border border-red-400 text-red-500 px-4 py-1 rounded hover:bg-red-50 text-sm"
-      >
           Print QR
         </button>
+        <button onClick={updateTokenLegacy} className="border border-blue-400 text-blue-500 px-4 py-1 rounded hover:bg-blue-50 text-sm">
+          Update to Token Legacy
+        </button>
+      </div>
     </div>
   );
 };