90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
|
import { Link } from "@remix-run/react";
|
||
|
|
import { TriangleAlert } from "lucide-react";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { Button } from "~/components/ui/button";
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogDescription,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
DialogTrigger,
|
||
|
|
} from "~/components/ui/dialog";
|
||
|
|
import { Input } from "~/components/ui/input";
|
||
|
|
import { Label } from "~/components/ui/label";
|
||
|
|
import { Separator } from "~/components/ui/separator";
|
||
|
|
import toRupiah from "~/utils/to-rupiah";
|
||
|
|
|
||
|
|
export default function UpgradeDialog() {
|
||
|
|
const [nominal, setNominal] = useState(1000000);
|
||
|
|
|
||
|
|
const handleSetoran = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const value = Number.parseInt(e.target.value);
|
||
|
|
if (value % 500000 === 0) {
|
||
|
|
setNominal(value + 1000000);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button className="bg-orange-600 text-white hover:bg-orange-500">Upgrade Sekarang</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent className="max-w-xl space-y-3">
|
||
|
|
<DialogHeader className="space-y-3">
|
||
|
|
<DialogTitle>Detail Pembayaran Member Platinum</DialogTitle>
|
||
|
|
<Separator className="w-full" />
|
||
|
|
<DialogDescription className="sr-only">
|
||
|
|
Detail pembayaran untuk member platinum.
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="flex items-center gap-4 rounded-md bg-orange-100 px-6 py-2">
|
||
|
|
<div className="flex items-center justify-center gap-2 rounded-full border-4 border-white bg-[#fcecbb] p-2 text-[#DC6803]">
|
||
|
|
<TriangleAlert />
|
||
|
|
</div>
|
||
|
|
<p className="">
|
||
|
|
Anda terdaftar sebagai Member Reguler. Cukup lakukan Top Up tanpa perlu membayar
|
||
|
|
simpanan pokok dan wajib.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-4">
|
||
|
|
<span className="font-medium">Informasi Pembayaran Wajib</span>
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="flex-1 text-gray-500">Top Up</span>
|
||
|
|
<span className="w-fit font-semibold">Rp 1.000.000</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col justify-between gap-2">
|
||
|
|
<Label htmlFor="setoran" className="flex-1 font-medium text-base">
|
||
|
|
Tambahan Setoran (Opsional)
|
||
|
|
</Label>
|
||
|
|
<div className="flex w-full flex-col gap-1">
|
||
|
|
<Input
|
||
|
|
id="setoran"
|
||
|
|
className="w-full"
|
||
|
|
type="number"
|
||
|
|
placeholder="Rp 500.000"
|
||
|
|
step="500000"
|
||
|
|
min="0"
|
||
|
|
onChange={handleSetoran}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<span className="text-gray-500 text-sm">
|
||
|
|
*Tambahan setoran harus dalam kelipatan Rp 500.000
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="flex-1 font-medium text-gray-900">Total Pembayaran</span>
|
||
|
|
<span className="w-fit font-semibold">{toRupiah(nominal)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Button className="w-full" asChild>
|
||
|
|
<Link to={`/app/member/upgrade?nominal=${nominal}`}>Lanjutkan Pembayaran</Link>
|
||
|
|
</Button>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|