sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-10 17:16:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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
Details

Browse Source
This commit is contained in:
i701
2025-07-08 21:09:17 +05:00
parent 8f9b4ba2e5
commit fa12cd74d7
3 changed files with 63 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/account-information.tsx Normal file
View 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>
);
}

47
components/devices-to-pay.tsx
View File

@ -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>
);
}

55
components/topup-to-pay.tsx
View File

@ -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>
);
}