mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-10-04 21:35:26 +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:
@@ -9,72 +9,72 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
export default async function TopupPage({
|
||||
params,
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ topupId: string }>;
|
||||
params: Promise<{ topupId: string }>;
|
||||
}) {
|
||||
const topupId = (await params).topupId;
|
||||
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
|
||||
if (error) {
|
||||
if (error.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
const topupId = (await params).topupId;
|
||||
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
|
||||
if (error) {
|
||||
if (error.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
|
||||
<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
|
||||
<div className="flex flex-col gap-4 items-end w-full">
|
||||
{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
|
||||
<Button
|
||||
disabled
|
||||
className={cn(
|
||||
"rounded-md opacity-100! uppercase font-semibold",
|
||||
topup?.paid
|
||||
? "text-green-900 bg-green-500/20"
|
||||
: "text-inherit bg-yellow-400",
|
||||
)}
|
||||
>
|
||||
{topup.status}
|
||||
</Button>
|
||||
)}
|
||||
{topup.status === "PENDING" && !topup.is_expired && (
|
||||
<Button>
|
||||
<TextShimmer>Payment Pending</TextShimmer>{" "}
|
||||
</Button>
|
||||
)}
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
|
||||
<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
|
||||
<div className="flex flex-col gap-4 items-end w-full">
|
||||
{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
|
||||
<Button
|
||||
disabled
|
||||
className={cn(
|
||||
"rounded-md opacity-100! uppercase font-semibold",
|
||||
topup?.paid
|
||||
? "text-green-900 bg-green-500/20"
|
||||
: "text-inherit bg-yellow-400",
|
||||
)}
|
||||
>
|
||||
{topup.status}
|
||||
</Button>
|
||||
)}
|
||||
{topup.status === "PENDING" && !topup.is_expired && (
|
||||
<Button>
|
||||
<TextShimmer>Payment Pending</TextShimmer>{" "}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!topup.paid &&
|
||||
(topup.is_expired ? (
|
||||
<Button
|
||||
disabled
|
||||
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
|
||||
>
|
||||
Topup Expired
|
||||
</Button>
|
||||
) : topup.status === "PENDING" ? (
|
||||
<CancelTopupButton topupId={topupId} />
|
||||
) : topup.status === "CANCELLED" ? (
|
||||
<Button disabled>Topup Cancelled</Button>
|
||||
) : (
|
||||
""
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
|
||||
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
|
||||
)}
|
||||
<div
|
||||
id="user-topup-details"
|
||||
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<TopupToPay
|
||||
disabled={
|
||||
topup.paid || topup.is_expired || topup.status === "CANCELLED"
|
||||
}
|
||||
topup={topup || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{!topup.paid &&
|
||||
(topup.is_expired ? (
|
||||
<Button
|
||||
disabled
|
||||
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
|
||||
>
|
||||
Topup Expired
|
||||
</Button>
|
||||
) : topup.status === "PENDING" ? (
|
||||
<CancelTopupButton topupId={topupId} />
|
||||
) : topup.status === "CANCELLED" ? (
|
||||
<Button disabled>Topup Cancelled</Button>
|
||||
) : (
|
||||
""
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
|
||||
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
|
||||
)}
|
||||
<div
|
||||
id="user-topup-details"
|
||||
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<TopupToPay
|
||||
disabled={
|
||||
topup.paid || topup.is_expired || topup.status === "CANCELLED"
|
||||
}
|
||||
topup={topup || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,155 +3,154 @@ import { BadgeDollarSign, Loader2 } from "lucide-react";
|
||||
import { useActionState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
type VerifyTopupPaymentState,
|
||||
verifyTopupPayment,
|
||||
type VerifyTopupPaymentState,
|
||||
verifyTopupPayment,
|
||||
} from "@/actions/payment";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { Topup } from "@/lib/backend-types";
|
||||
import { shouldShowTopupPaymentInfo } from "@/lib/utils";
|
||||
import { AccountInfomation } from "./account-information";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
const initialState: VerifyTopupPaymentState = {
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
};
|
||||
export default function TopupToPay({
|
||||
topup,
|
||||
disabled,
|
||||
topup,
|
||||
disabled,
|
||||
}: {
|
||||
topup?: Topup;
|
||||
disabled?: boolean;
|
||||
topup?: Topup;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
verifyTopupPayment,
|
||||
initialState,
|
||||
);
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
verifyTopupPayment,
|
||||
initialState,
|
||||
);
|
||||
|
||||
// Handle toast notifications based on state changes
|
||||
useEffect(() => {
|
||||
if (state.success && state.message) {
|
||||
toast.success("Topup successful!", {
|
||||
closeButton: true,
|
||||
description: state.transaction
|
||||
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
|
||||
: state.message,
|
||||
});
|
||||
} else if (
|
||||
!state.success &&
|
||||
state.message &&
|
||||
state.message !== initialState.message
|
||||
) {
|
||||
toast.error("Topup Payment Verification Failed", {
|
||||
closeButton: true,
|
||||
description: state.message,
|
||||
});
|
||||
}
|
||||
}, [state]);
|
||||
// Handle toast notifications based on state changes
|
||||
useEffect(() => {
|
||||
if (state.success && state.message) {
|
||||
toast.success("Topup successful!", {
|
||||
closeButton: true,
|
||||
description: state.transaction
|
||||
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
|
||||
: state.message,
|
||||
});
|
||||
} else if (
|
||||
!state.success &&
|
||||
state.message &&
|
||||
state.message !== initialState.message
|
||||
) {
|
||||
toast.error("Topup Payment Verification Failed", {
|
||||
closeButton: true,
|
||||
description: state.message,
|
||||
});
|
||||
}
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||
<Table>
|
||||
<TableCaption>
|
||||
{(!topup?.paid ||
|
||||
!topup?.is_expired ||
|
||||
topup?.status !== "CANCELLED") && (
|
||||
<div className="max-w-sm mx-auto">
|
||||
<p>Please send the following amount to the payment address</p>
|
||||
<AccountInfomation
|
||||
accName="Baraveli Dev"
|
||||
accountNo="90101400028321000"
|
||||
/>
|
||||
{topup?.paid ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
variant={"secondary"}
|
||||
disabled
|
||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||
>
|
||||
Topup Payment Verified
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<form action={formAction}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="topupId"
|
||||
value={topup?.id ?? ""}
|
||||
/>
|
||||
<Button
|
||||
disabled={disabled || isPending}
|
||||
type="submit"
|
||||
size={"lg"}
|
||||
className="mb-4 w-full"
|
||||
>
|
||||
{isPending ? "Processing payment..." : "I have paid"}
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<BadgeDollarSign />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Topup created</TableCell>
|
||||
<TableCell className="text-right text-muted-foreground">
|
||||
{new Date(topup?.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>Payment received</TableCell>
|
||||
<TableCell className="text-right text-sarLinkOrange">
|
||||
{topup?.paid_at
|
||||
? new Date(topup.paid_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
})
|
||||
: "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>MIB Reference</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{topup?.mib_reference ? topup.mib_reference : "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
{topup?.amount?.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||
<Table>
|
||||
<TableCaption>
|
||||
{shouldShowTopupPaymentInfo(topup) && (
|
||||
<div className="max-w-sm mx-auto">
|
||||
<p>Please send the following amount to the payment address</p>
|
||||
<AccountInfomation
|
||||
accName="Baraveli Dev"
|
||||
accountNo="90101400028321000"
|
||||
/>
|
||||
{topup?.paid ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
variant={"secondary"}
|
||||
disabled
|
||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||
>
|
||||
Topup Payment Verified
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<form action={formAction}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="topupId"
|
||||
value={topup?.id ?? ""}
|
||||
/>
|
||||
<Button
|
||||
disabled={disabled || isPending}
|
||||
type="submit"
|
||||
size={"lg"}
|
||||
className="mb-4 w-full"
|
||||
>
|
||||
{isPending ? "Processing payment..." : "I have paid"}
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<BadgeDollarSign />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Topup created</TableCell>
|
||||
<TableCell className="text-right text-muted-foreground">
|
||||
{new Date(topup?.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>Payment received</TableCell>
|
||||
<TableCell className="text-right text-sarLinkOrange">
|
||||
{topup?.paid_at
|
||||
? new Date(topup.paid_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
})
|
||||
: "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>MIB Reference</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{topup?.mib_reference ? topup.mib_reference : "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
{topup?.amount?.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
78
lib/utils.ts
78
lib/utils.ts
@@ -1,48 +1,72 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import type { Payment, Topup } from "./backend-types";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export const formatDate = (date: Date): string => {
|
||||
const pad = (num: number): string => num.toString().padStart(2, "0");
|
||||
const pad = (num: number): string => num.toString().padStart(2, "0");
|
||||
|
||||
const year = date.getFullYear();
|
||||
const month = pad(date.getMonth() + 1); // Months are zero-based
|
||||
const day = pad(date.getDate());
|
||||
const hours = pad(date.getHours());
|
||||
const minutes = pad(date.getMinutes() + 5);
|
||||
const year = date.getFullYear();
|
||||
const month = pad(date.getMonth() + 1); // Months are zero-based
|
||||
const day = pad(date.getDate());
|
||||
const hours = pad(date.getHours());
|
||||
const minutes = pad(date.getMinutes() + 5);
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
export const formatMacAddress = (mac: string): string => {
|
||||
const formatted = mac
|
||||
.replace(/[^A-Fa-f0-9]/g, "")
|
||||
.toUpperCase()
|
||||
.match(/.{2}/g);
|
||||
const formatted = mac
|
||||
.replace(/[^A-Fa-f0-9]/g, "")
|
||||
.toUpperCase()
|
||||
.match(/.{2}/g);
|
||||
|
||||
// Provide a fallback if formatted is null
|
||||
return formatted ? formatted.join("-") : "";
|
||||
// Provide a fallback if formatted is null
|
||||
return formatted ? formatted.join("-") : "";
|
||||
};
|
||||
|
||||
export function validateApiKey(request: Request) {
|
||||
// Get API key from environment variable
|
||||
const validApiKey = process.env.CRON_API_KEY;
|
||||
// Get API key from environment variable
|
||||
const validApiKey = process.env.CRON_API_KEY;
|
||||
|
||||
if (!validApiKey) {
|
||||
throw new Error("CRON_API_KEY is not configured");
|
||||
}
|
||||
if (!validApiKey) {
|
||||
throw new Error("CRON_API_KEY is not configured");
|
||||
}
|
||||
|
||||
// Get API key from request header
|
||||
const apiKey = request.headers.get("x-api-key");
|
||||
// Get API key from request header
|
||||
const apiKey = request.headers.get("x-api-key");
|
||||
|
||||
if (!apiKey) {
|
||||
throw new Error("API key is missing");
|
||||
}
|
||||
if (!apiKey) {
|
||||
throw new Error("API key is missing");
|
||||
}
|
||||
|
||||
if (apiKey !== validApiKey) {
|
||||
throw new Error("Invalid API key");
|
||||
}
|
||||
if (apiKey !== validApiKey) {
|
||||
throw new Error("Invalid API key");
|
||||
}
|
||||
}
|
||||
|
||||
export function shouldShowTopupPaymentInfo(topup: Topup | undefined): boolean {
|
||||
if (!topup) return false;
|
||||
|
||||
return !(
|
||||
topup.paid ||
|
||||
topup.is_expired ||
|
||||
topup.status === "CANCELLED" ||
|
||||
topup.status === "VERIFIED"
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export function shouldShowPaymentInfo(topup: Payment | undefined): boolean {
|
||||
if (!topup) return false;
|
||||
|
||||
return !(
|
||||
topup.paid ||
|
||||
topup.is_expired ||
|
||||
topup.status === "CANCELLED" ||
|
||||
topup.status === "PAID"
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user