78 lines
3.4 KiB
TypeScript
78 lines
3.4 KiB
TypeScript
import { Link, useSearchParams } from "@remix-run/react";
|
|
import { AlertTriangle, ClipboardCopy } from "lucide-react";
|
|
import { useState } from "react";
|
|
import BackButton from "~/components/back-button";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
|
|
import toRupiah from "~/utils/to-rupiah";
|
|
|
|
export default function UpgrageMemberPage() {
|
|
const [searchParams] = useSearchParams();
|
|
const [nominal] = useState(
|
|
searchParams.get("nominal") ? Number(searchParams.get("nominal")) : 1000000,
|
|
);
|
|
|
|
return (
|
|
<section className="mx-auto my-auto grid w-full max-w-2xl gap-6 overflow-auto px-5">
|
|
<div className="mx-auto flex max-w-md flex-col items-center justify-center gap-4">
|
|
<img src="/img/vector/payment.svg" alt="Wallet" className="size-52" />
|
|
<p className="text-center font-semibold text-lg">
|
|
Silahkan transfer ke nomor rekening berikut agar transaksi anda dapat segera kami proses
|
|
</p>
|
|
</div>
|
|
<Card className="mx-auto w-full">
|
|
<CardHeader>
|
|
<CardTitle className="font-bold text-2xl">
|
|
<div className="flex items-center gap-2">
|
|
<BackButton to="/app" />
|
|
<h2 className="~text-base/2xl font-semibold">Transfer Pembayaran</h2>
|
|
</div>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-2">
|
|
<div className="font-bold text-3xl text-blue-700">BRI</div>
|
|
<div>
|
|
<div className="text-gray-500 text-sm">Nomor Rekening</div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="font-semibold text-xl">372 178 5022</div>
|
|
<Button variant="outline" size="sm" className="flex items-center gap-2">
|
|
<ClipboardCopy className="h-4 w-4" />
|
|
Copy
|
|
</Button>
|
|
</div>
|
|
<div className="text-sm">Koperasi Produksi Rejeki Sukses Berkah</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-gray-500 text-sm">Total Pembayaran</div>
|
|
<div className="font-semibold text-green-500 text-xl">{toRupiah(nominal)}</div>
|
|
</div>
|
|
<Card className="border-orange-200 bg-orange-50">
|
|
<CardContent className="space-y-2 p-4">
|
|
<div className="flex items-start gap-2">
|
|
<AlertTriangle className="mt-0.5 h-5 w-5 text-orange-500" />
|
|
<div>
|
|
<div className="font-semibold">Informasi Penting</div>
|
|
<ul className="list-inside list-disc space-y-1 text-sm">
|
|
<li>Silakan selesaikan pembayaran di nomer Rekening kami.</li>
|
|
<li>
|
|
Mohon transfer <span className="font-semibold">sesuai</span> jumlah pembayaran
|
|
hingga <span className="font-semibold">3 digit terakhir</span>.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full" asChild>
|
|
<Link to={`/app/member/upgrade/verify?nominal=${nominal}`}>Konfirmasi Pembayaran</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|