"use client"; import { createPayment } from "@/actions/payment"; import { Button } from "@/components/ui/button"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"; import { cartDrawerOpenAtom, deviceCartAtom, numberOfMonths, } from "@/lib/atoms"; import { authClient } from "@/lib/auth-client"; import type { PaymentType } from "@/lib/types"; import type { BillFormula, Device } from "@prisma/client"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { CircleDollarSign, Loader2, MonitorSmartphone, Trash2, } from "lucide-react"; import { usePathname, useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import { toast } from "sonner"; import NumberInput from "./number-input"; export function DeviceCartDrawer({ billFormula, }: { billFormula: BillFormula | null; }) { const baseAmount = billFormula?.baseAmount || 100; const discountPercentage = billFormula?.discountPercentage || 75; const session = authClient.useSession(); const pathname = usePathname(); const devices = useAtomValue(deviceCartAtom); const setDeviceCart = useSetAtom(deviceCartAtom); const [months, setMonths] = useAtom(numberOfMonths); const [isOpen, setIsOpen] = useAtom(cartDrawerOpenAtom); const [message, setMessage] = useState(""); const [disabled, setDisabled] = useState(false); const [total, setTotal] = useState(0); const router = useRouter(); useEffect(() => { if (months === 7) { setMessage("You will get 1 month free."); } else if (months === 12) { setMessage("You will get 2 months free."); } else { setMessage(""); } setTotal(baseAmount + ((devices.length + 1) - 1) * discountPercentage); }, [months, devices.length, baseAmount, discountPercentage]); if (pathname === "/payment") { return null; } const data: PaymentType = { numberOfMonths: months, userId: session?.data?.user.id ?? "", deviceIds: devices.map((device) => device.id), amount: Number.parseFloat(total.toFixed(2)), paid: false, }; return (
Selected Devices Selected devices pay.
{devices.map((device) => ( ))}
setMonths(value)} maxAllowed={12} isDisabled={devices.length === 0} /> {message && ( {message} )}
); } function DeviceCard({ device }: { device: Device }) { const setDeviceCart = useSetAtom(deviceCartAtom); return (
); }