mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-10 11:06:30 +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";
|
||||
import {
|
||||
BadgeDollarSign,
|
||||
Clipboard,
|
||||
ClipboardCheck,
|
||||
Loader2,
|
||||
Wallet,
|
||||
Wallet
|
||||
} from "lucide-react";
|
||||
import { useActionState, useEffect, useState } from "react";
|
||||
import { useActionState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { type VerifyDevicePaymentState, verifyDevicePayment } from "@/actions/payment";
|
||||
import {
|
||||
@ -19,6 +17,7 @@ import {
|
||||
} from "@/components/ui/table";
|
||||
import type { Payment } from "@/lib/backend-types";
|
||||
import type { User } from "@/lib/types/user";
|
||||
import { AccountInfomation } from "./account-information";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
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";
|
||||
import {
|
||||
BadgeDollarSign,
|
||||
ClipboardCheck,
|
||||
Loader2
|
||||
} from "lucide-react";
|
||||
import { useActionState, useEffect, useState } from "react";
|
||||
import { useActionState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
type VerifyTopupPaymentState,
|
||||
@ -19,6 +18,7 @@ import {
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { Topup } from "@/lib/backend-types";
|
||||
import { AccountInfomation } from "./account-information";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
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