sarlink-portal/components/devices-to-pay.tsx

"use client";
import { BadgeDollarSign, Loader2, Wallet } from "lucide-react";
import { useActionState, useEffect } from "react";
import { toast } from "sonner";
import {
  type VerifyDevicePaymentState,
  verifyDevicePayment,
} from "@/actions/payment";
import {
  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: {},
};

export default function DevicesToPay({
  payment,
  user,
  disabled,
}: {
  payment?: Payment;
  user?: User;
  disabled?: boolean;
}) {
  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) {
    return null;
  }
  // 100+(n−1)×75
  const walletBalance = user?.wallet_balance ?? 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>
            {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>
  );
}