mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-10 17:16:33 +00:00
refactor: use single seperate AccountInfomation component and integrate it into DevicesToPay and TopupToPay components 🔨
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m31s
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m31s
This commit is contained in:
56
components/account-information.tsx
Normal file
56
components/account-information.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
"use client"
|
||||||
|
import { Clipboard, ClipboardCheck } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
|
export function AccountInfomation({
|
||||||
|
accountNo,
|
||||||
|
accName,
|
||||||
|
}: {
|
||||||
|
accountNo: string;
|
||||||
|
accName: string;
|
||||||
|
}) {
|
||||||
|
const [accNo, setAccNo] = useState(false);
|
||||||
|
return (
|
||||||
|
<div className="justify-center items-center border my-4 flex flex-col gap-2 p-2 rounded-md">
|
||||||
|
<h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
|
||||||
|
Account Information
|
||||||
|
</h6>
|
||||||
|
<div className="border justify-center flex flex-col items-center bg-white/10 w-full p-2 rounded">
|
||||||
|
<div className="text-sm font-semibold">Account Name</div>
|
||||||
|
<span>{accName}</span>
|
||||||
|
</div>
|
||||||
|
<div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
|
||||||
|
<div className="flex flex-col items-center justify-center w-full">
|
||||||
|
<p className="text-sm font-semibold">Account No</p>
|
||||||
|
<span>{accountNo}</span>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setAccNo(true);
|
||||||
|
navigator.clipboard.writeText(accountNo);
|
||||||
|
}, 2000);
|
||||||
|
toast.success("Account number copied!");
|
||||||
|
setAccNo((prev) => !prev);
|
||||||
|
}}
|
||||||
|
className="mt-2 w-full"
|
||||||
|
variant={"secondary"}
|
||||||
|
>
|
||||||
|
{accNo ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span>Copy Account Number</span>
|
||||||
|
<Clipboard />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span>Copy Account Number</span>
|
||||||
|
<ClipboardCheck color="green" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,12 +1,10 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import {
|
import {
|
||||||
BadgeDollarSign,
|
BadgeDollarSign,
|
||||||
Clipboard,
|
|
||||||
ClipboardCheck,
|
|
||||||
Loader2,
|
Loader2,
|
||||||
Wallet,
|
Wallet
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useActionState, useEffect, useState } from "react";
|
import { useActionState, useEffect } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { type VerifyDevicePaymentState, verifyDevicePayment } from "@/actions/payment";
|
import { type VerifyDevicePaymentState, verifyDevicePayment } from "@/actions/payment";
|
||||||
import {
|
import {
|
||||||
@ -19,6 +17,7 @@ import {
|
|||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import type { Payment } from "@/lib/backend-types";
|
import type { Payment } from "@/lib/backend-types";
|
||||||
import type { User } from "@/lib/types/user";
|
import type { User } from "@/lib/types/user";
|
||||||
|
import { AccountInfomation } from "./account-information";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
const initialState: VerifyDevicePaymentState = {
|
const initialState: VerifyDevicePaymentState = {
|
||||||
@ -164,42 +163,4 @@ export default function DevicesToPay({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AccountInfomation({
|
|
||||||
accountNo,
|
|
||||||
accName,
|
|
||||||
}: {
|
|
||||||
accountNo: string;
|
|
||||||
accName: string;
|
|
||||||
}) {
|
|
||||||
const [accNo, setAccNo] = useState(false);
|
|
||||||
return (
|
|
||||||
<div className="justify-start items-start border my-4 flex flex-col gap-2 p-2 rounded-md">
|
|
||||||
<h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
|
|
||||||
Account Information
|
|
||||||
</h6>
|
|
||||||
<div className="border justify-start flex flex-col items-start bg-white/10 w-full p-2 rounded">
|
|
||||||
<div className="text-sm font-semibold">Account Name</div>
|
|
||||||
<span>{accName}</span>
|
|
||||||
</div>
|
|
||||||
<div className="border flex justify-between items-start gap-2 bg-white/10 w-full p-2 rounded">
|
|
||||||
<div className="flex flex-col items-start justify-start">
|
|
||||||
<p className="text-sm font-semibold">Account No</p>
|
|
||||||
<span>{accountNo}</span>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
setAccNo(true);
|
|
||||||
navigator.clipboard.writeText(accountNo);
|
|
||||||
}, 2000);
|
|
||||||
toast.success("Account number copied!");
|
|
||||||
setAccNo((prev) => !prev);
|
|
||||||
}}
|
|
||||||
variant={"link"}
|
|
||||||
>
|
|
||||||
{accNo ? <Clipboard /> : <ClipboardCheck color="green" />}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import {
|
import {
|
||||||
BadgeDollarSign,
|
BadgeDollarSign,
|
||||||
ClipboardCheck,
|
|
||||||
Loader2
|
Loader2
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useActionState, useEffect, useState } from "react";
|
import { useActionState, useEffect } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import {
|
import {
|
||||||
type VerifyTopupPaymentState,
|
type VerifyTopupPaymentState,
|
||||||
@ -19,6 +18,7 @@ import {
|
|||||||
TableRow,
|
TableRow,
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import type { Topup } from "@/lib/backend-types";
|
import type { Topup } from "@/lib/backend-types";
|
||||||
|
import { AccountInfomation } from "./account-information";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
const initialState: VerifyTopupPaymentState = {
|
const initialState: VerifyTopupPaymentState = {
|
||||||
@ -155,53 +155,4 @@ export default function TopupToPay({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function AccountInfomation({
|
|
||||||
accountNo,
|
|
||||||
accName,
|
|
||||||
}: {
|
|
||||||
accountNo: string;
|
|
||||||
accName: string;
|
|
||||||
}) {
|
|
||||||
const [accNo, setAccNo] = useState(false);
|
|
||||||
return (
|
|
||||||
<div className="justify-center items-center border my-4 flex flex-col gap-2 p-2 rounded-md">
|
|
||||||
<h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
|
|
||||||
Account Information
|
|
||||||
</h6>
|
|
||||||
<div className="border justify-center flex flex-col items-center bg-white/10 w-full p-2 rounded">
|
|
||||||
<div className="text-sm font-semibold">Account Name</div>
|
|
||||||
<span>{accName}</span>
|
|
||||||
</div>
|
|
||||||
<div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
|
|
||||||
<div className="flex flex-col items-center justify-center w-full">
|
|
||||||
<p className="text-sm font-semibold">Account No</p>
|
|
||||||
<span>{accountNo}</span>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
setAccNo(true);
|
|
||||||
navigator.clipboard.writeText(accountNo);
|
|
||||||
}, 2000);
|
|
||||||
toast.success("Account number copied!");
|
|
||||||
setAccNo((prev) => !prev);
|
|
||||||
}}
|
|
||||||
className="mt-2 w-full"
|
|
||||||
variant={"secondary"}
|
|
||||||
>
|
|
||||||
{accNo ? (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span>Copy Account Number</span>
|
|
||||||
<ClipboardCheck />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span>Copy Account Number</span>
|
|
||||||
<ClipboardCheck color="green" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
Reference in New Issue
Block a user