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

refactor: implement device payment verification with useActionState hook 🔨

Browse Source
This commit is contained in:
i701
2025-07-06 23:06:51 +05:00
parent 837cc35ad3
commit 1a11f1a06c
2 changed files with 131 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
actions/payment.ts
View File

@ -218,6 +218,84 @@ export async function verifyPayment({ id, method }: UpdatePayment) {
return handleApiResponse<Payment>(response, "updatePayment");
}
export type VerifyDevicePaymentState = {
payment?: Payment;
message: string;
success: boolean;
fieldErrors: Record<string, string>;
payload?: FormData;
}
export async function verifyDevicePayment(
_prevState: VerifyDevicePaymentState,
formData: FormData
): Promise<VerifyDevicePaymentState> {
const session = await getServerSession(authOptions);
// Get the payment ID and method from the form data
const paymentId = formData.get('paymentId') as string;
const method = formData.get('method') as "TRANSFER" | "WALLET";
if (!paymentId) {
return {
message: "Payment ID is required",
success: false,
fieldErrors: { paymentId: "Payment ID is required" },
};
}
if (!method) {
return {
message: "Payment method is required",
success: false,
fieldErrors: { method: "Payment method is required" },
};
}
try {
const response = await fetch(
`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/${paymentId}/verify/`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${session?.apiToken}`,
},
body: JSON.stringify({
method,
}),
},
);
const result = await handleApiResponse<Payment>(response, "verifyDevicePayment");
revalidatePath("/payments/[paymentId]", "page");
return {
message: method === "WALLET"
? "Payment completed successfully using wallet!"
: "Payment verification successful!",
success: true,
fieldErrors: {},
payment: result,
};
} catch (error: unknown) {
if (error instanceof Error) {
return {
message: error.message || "Payment verification failed. Please try again.",
success: false,
fieldErrors: {},
};
} else {
return {
message: "Payment verification failed.",
success: false,
fieldErrors: {},
};
}
}
}
export type VerifyTopupPaymentState = {
transaction?: {

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

@ -6,9 +6,9 @@ import {
Loader2,
Wallet,
} from "lucide-react";
import { useState } from "react";
import { useActionState, useEffect, useState } from "react";
import { toast } from "sonner";
import { verifyPayment } from "@/actions/payment";
import { type VerifyDevicePaymentState, verifyDevicePayment } from "@/actions/payment";
import {
Table,
TableBody,
@ -21,13 +21,32 @@ import type { Payment } from "@/lib/backend-types";
import type { User } from "@/lib/types/user";
import { Button } from "./ui/button";
const initialState: VerifyDevicePaymentState = {
message: "",
success: false,
fieldErrors: {},
};
export default function DevicesToPay({
payment,
user,
}: { payment?: Payment; user?: User }) {
const [verifyingWalletPayment, setVerifyingWalletPayment] = useState(false);
const [verifyingTransferPayment, setVerifyingTransferPayment] = useState(false);
const [state, formAction, isPending] = useActionState(verifyDevicePayment, initialState);
// Handle toast notifications based on state changes
useEffect(() => {
if (state.success && state.message) {
toast.success("Payment successful!", {
closeButton: true,
description: state.message,
});
} else if (!state.success && state.message && state.message !== initialState.message) {
toast.error("Payment Verification Failed", {
closeButton: true,
description: state.message,
});
}
}, [state]);
const devices = payment?.devices;
if (devices?.length === 0) {
@ -81,53 +100,37 @@ export default function DevicesToPay({
) : (
<div className="flex flex-col gap-2">
{isWalletPayVisible && (
<Button
disabled={verifyingWalletPayment || verifyingTransferPayment}
onClick={async () => {
setVerifyingWalletPayment(true);
await verifyPayment({
method: "WALLET",
id: payment?.id ?? "",
});
setVerifyingWalletPayment(false);
}}
variant={"secondary"}
size={"lg"}
>
{verifyingWalletPayment ? "Processing payment..." : "Pay with wallet"}
<Wallet />
</Button>
<form action={formAction}>
<input type="hidden" name="paymentId" value={payment?.id ?? ""} />
<input type="hidden" name="method" value="WALLET" />
<Button
disabled={isPending}
type="submit"
variant={"secondary"}
size={"lg"}
>
{isPending ? "Processing payment..." : "Pay with wallet"}
<Wallet />
</Button>
</form>
)}
<Button
disabled={verifyingTransferPayment || verifyingWalletPayment}
onClick={async () => {
setVerifyingTransferPayment(true);
try {
await verifyPayment({
id: payment?.id ?? "",
method: "TRANSFER"
});
toast.success("Payment verification successful!");
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
} else {
toast.error("Payment verification failed.");
}
} finally {
setVerifyingTransferPayment(false);
}
}}
size={"lg"}
className="mb-4"
>
{verifyingTransferPayment ? "Processing payment..." : "I have paid"}
{verifyingTransferPayment ? (
<Loader2 className="animate-spin" />
) : (
<BadgeDollarSign />
)}
</Button>
<form action={formAction}>
<input type="hidden" name="paymentId" value={payment?.id ?? ""} />
<input type="hidden" name="method" value="TRANSFER" />
<Button
disabled={isPending}
type="submit"
size={"lg"}
className="mb-4"
>
{isPending ? "Processing payment..." : "I have paid"}
{isPending ? (
<Loader2 className="animate-spin" />
) : (
<BadgeDollarSign />
)}
</Button>
</form>
</div>
)}
</div>