mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-10-05 16:05:23 +00:00
refactor: create utility function to hide AccountInformation component for topup and payment 🔧
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 8m50s
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 8m50s
This commit is contained in:
@@ -3,198 +3,201 @@ import { BadgeDollarSign, Loader2, Wallet } from "lucide-react";
|
||||
import { useActionState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
type VerifyDevicePaymentState,
|
||||
verifyDevicePayment,
|
||||
type VerifyDevicePaymentState,
|
||||
verifyDevicePayment,
|
||||
} from "@/actions/payment";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { Payment } from "@/lib/backend-types";
|
||||
import type { User } from "@/lib/types/user";
|
||||
import { shouldShowPaymentInfo } from "@/lib/utils";
|
||||
import { AccountInfomation } from "./account-information";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
const initialState: VerifyDevicePaymentState = {
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
};
|
||||
|
||||
export default function DevicesToPay({
|
||||
payment,
|
||||
user,
|
||||
disabled,
|
||||
payment,
|
||||
user,
|
||||
disabled,
|
||||
}: {
|
||||
payment?: Payment;
|
||||
user?: User;
|
||||
disabled?: boolean;
|
||||
payment?: Payment;
|
||||
user?: User;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
verifyDevicePayment,
|
||||
initialState,
|
||||
);
|
||||
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]);
|
||||
// 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) {
|
||||
return null;
|
||||
}
|
||||
// 100+(n−1)×75
|
||||
const walletBalance = user?.wallet_balance ?? 0;
|
||||
const devices = payment?.devices;
|
||||
if (devices?.length === 0) {
|
||||
return null;
|
||||
}
|
||||
// 100+(n−1)×75
|
||||
const walletBalance = user?.wallet_balance ?? 0;
|
||||
|
||||
const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
|
||||
const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<h3 className="title-bg my-1 p-2 border border-dashed rounded-md font-semibold text-lg">
|
||||
{!payment?.paid ? "Devices to pay" : "Devices Paid"}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{devices?.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="bg-muted border rounded p-2 flex gap-2 items-center"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm font-medium">{device.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{device.mac}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||
<Table>
|
||||
<TableCaption>
|
||||
<div className="max-w-sm mx-auto">
|
||||
<p>Please send the following amount to the payment address</p>
|
||||
<AccountInfomation
|
||||
accName="Baraveli Dev"
|
||||
accountNo="90101400028321000"
|
||||
/>
|
||||
{payment?.paid ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
variant={"secondary"}
|
||||
disabled
|
||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||
>
|
||||
Payment Verified
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{isWalletPayVisible && (
|
||||
<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>
|
||||
)}
|
||||
<form action={formAction}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="paymentId"
|
||||
value={payment?.id ?? ""}
|
||||
/>
|
||||
<input type="hidden" name="method" value="TRANSFER" />
|
||||
<Button
|
||||
disabled={isPending || disabled}
|
||||
type="submit"
|
||||
size={"lg"}
|
||||
className="mb-4"
|
||||
>
|
||||
{isPending ? "Processing payment..." : "I have paid"}
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<BadgeDollarSign />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Payment created</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{new Date(payment?.created_at ?? "").toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
},
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Total Devices</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
{devices?.length}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Duration</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
{payment?.number_of_months} Months
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
{payment?.amount?.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<h3 className="title-bg my-1 p-2 border border-dashed rounded-md font-semibold text-lg">
|
||||
{!payment?.paid ? "Devices to pay" : "Devices Paid"}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{devices?.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="bg-muted border rounded p-2 flex gap-2 items-center"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm font-medium">{device.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{device.mac}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||
<Table>
|
||||
<TableCaption>
|
||||
{shouldShowPaymentInfo(payment) && (
|
||||
<div className="max-w-sm mx-auto">
|
||||
<p>Please send the following amount to the payment address</p>
|
||||
<AccountInfomation
|
||||
accName="Baraveli Dev"
|
||||
accountNo="90101400028321000"
|
||||
/>
|
||||
{payment?.paid ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
variant={"secondary"}
|
||||
disabled
|
||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||
>
|
||||
Payment Verified
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{isWalletPayVisible && (
|
||||
<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>
|
||||
)}
|
||||
<form action={formAction}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="paymentId"
|
||||
value={payment?.id ?? ""}
|
||||
/>
|
||||
<input type="hidden" name="method" value="TRANSFER" />
|
||||
<Button
|
||||
disabled={isPending || disabled}
|
||||
type="submit"
|
||||
size={"lg"}
|
||||
className="mb-4"
|
||||
>
|
||||
{isPending ? "Processing payment..." : "I have paid"}
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<BadgeDollarSign />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Payment created</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{new Date(payment?.created_at ?? "").toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
},
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Total Devices</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
{devices?.length}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Duration</TableCell>
|
||||
<TableCell className="text-right text-xl">
|
||||
{payment?.number_of_months} Months
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
{payment?.amount?.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user