Alur pembayaran donasi
# feat - Tampilan invoce - Proses acc admin - Transaksi berhasil # Issue: Hitungan progres masih salah
This commit is contained in:
168
src/app_modules/donasi/proses_donasi/invoice/index.tsx
Normal file
168
src/app_modules/donasi/proses_donasi/invoice/index.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
CopyButton,
|
||||
Grid,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_proses_donasi } from "../../global_state";
|
||||
import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
|
||||
import { useState } from "react";
|
||||
import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
|
||||
import ComponentDonasi_TampilanHitungMundur from "../../component/tampilan_hitung_mundur";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
||||
import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
|
||||
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
|
||||
import { NotifGagal } from "../../component/notifikasi/notif_gagal";
|
||||
|
||||
export default function Donasi_InvoiceProses({
|
||||
dataInvoice,
|
||||
}: {
|
||||
dataInvoice: MODEL_DONASI_INVOICE;
|
||||
}) {
|
||||
const [invoice, setDataInvoice] = useState(dataInvoice);
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"lg"}>
|
||||
<Stack spacing={0}>
|
||||
<Title order={5}>Mohon transfer ke rekening dibawah</Title>
|
||||
<Group spacing={"xs"}>
|
||||
<Text>untuk diteruskan ke </Text>
|
||||
<Text fw={"bold"}>{invoice.Donasi.Author.username}</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Paper p={"sm"} withBorder>
|
||||
<Stack spacing={"md"}>
|
||||
<Stack spacing={0}>
|
||||
<Text>Bank {invoice.DonasiMaster_Bank.name}</Text>
|
||||
<Text>PT. Himpunan Pengusaha Badung</Text>
|
||||
</Stack>
|
||||
<Paper bg={"gray.1"} p={"sm"} radius={"md"}>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Group position="left" align="center" h={"100%"}>
|
||||
<Title order={4}>{invoice.DonasiMaster_Bank.norek}</Title>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<Group position="right">
|
||||
<CopyButton value={invoice.DonasiMaster_Bank.norek}>
|
||||
{({ copied, copy }) => (
|
||||
<Button
|
||||
color={copied ? "teal" : "blue"}
|
||||
variant="outline"
|
||||
radius={"xl"}
|
||||
onClick={copy}
|
||||
>
|
||||
{copied ? "Berhasil" : "Salin"}
|
||||
</Button>
|
||||
)}
|
||||
</CopyButton>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper p={"sm"} withBorder>
|
||||
<Stack spacing={"md"}>
|
||||
<Stack spacing={0}>
|
||||
<Text>Jumlah transfer</Text>
|
||||
</Stack>
|
||||
<Paper bg={"gray.1"} p={"sm"} radius={"md"}>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Group position="left" align="center" h={"100%"}>
|
||||
<Title order={4}>
|
||||
<TampilanRupiahDonasi
|
||||
nominal={+(+invoice.nominal + 2500)}
|
||||
/>
|
||||
</Title>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4}>
|
||||
<Group position="right">
|
||||
<CopyButton value={"" + (+invoice.nominal + 2500)}>
|
||||
{({ copied, copy }) => (
|
||||
<Button
|
||||
color={copied ? "teal" : "blue"}
|
||||
variant="outline"
|
||||
radius={"xl"}
|
||||
onClick={copy}
|
||||
>
|
||||
{copied ? "Berhasil" : "Salin"}
|
||||
</Button>
|
||||
)}
|
||||
</CopyButton>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
<Text fz={"xs"} c={"gray"}>
|
||||
Sudah termasuk biaya admin Rp. 2.500,-
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper p={"sm"} withBorder>
|
||||
<Stack>
|
||||
<Text>Detail donasi</Text>
|
||||
<Paper p={"md"} bg={"gray.2"}>
|
||||
<Stack spacing={"lg"}>
|
||||
<Stack spacing={"xs"}>
|
||||
<Title order={4}>{invoice.Donasi.title}</Title>
|
||||
<Stack spacing={0}>
|
||||
<Group spacing={5}>
|
||||
<Text>Kategori</Text>
|
||||
<Title order={5}>
|
||||
{invoice.Donasi.DonasiMaster_Ketegori.name}
|
||||
</Title>
|
||||
</Group>
|
||||
<ComponentDonasi_TampilanHitungMundur
|
||||
durasi={invoice.Donasi.DonasiMaster_Durasi.name}
|
||||
publishTime={invoice.Donasi.publishTime}
|
||||
textSize={16}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Button
|
||||
radius={"xl"}
|
||||
bg={"orange"}
|
||||
color="orange"
|
||||
onClick={() => onClick(router, invoice.id)}
|
||||
>
|
||||
Saya Sudah Transfer
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
async function onClick(router: AppRouterInstance, invoiceId: string) {
|
||||
await Donasi_funUpdateStatusInvoice(invoiceId, "2").then((res) => {
|
||||
if (res.status === 200) {
|
||||
NotifBerhasil(res.message);
|
||||
router.push(RouterDonasi.proses_transaksi + `${invoiceId}`);
|
||||
} else {
|
||||
NotifGagal(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
44
src/app_modules/donasi/proses_donasi/invoice/layout.tsx
Normal file
44
src/app_modules/donasi/proses_donasi/invoice/layout.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
import { IconChevronLeft, IconX } from "@tabler/icons-react";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { gs_donasi_hot_menu } from "../../global_state";
|
||||
import { useAtom } from "jotai";
|
||||
|
||||
import { title } from "process";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function LayoutDonasi_InvoiceProses({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
|
||||
async function onClick() {
|
||||
setDonasiHotMenu(2);
|
||||
router.push(RouterDonasi.main_donasi_saya);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={
|
||||
<Header height={50} sx={{ borderStyle: "none" }}>
|
||||
<Group h={50} position="apart" px={"md"}>
|
||||
<ActionIcon variant="transparent" onClick={() => onClick()}>
|
||||
<IconX />
|
||||
</ActionIcon>
|
||||
<Title order={5}>Invoice</Title>
|
||||
<ActionIcon disabled variant="transparent"></ActionIcon>
|
||||
</Group>
|
||||
</Header>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
123
src/app_modules/donasi/proses_donasi/masukan_donasi/index.tsx
Normal file
123
src/app_modules/donasi/proses_donasi/masukan_donasi/index.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client";
|
||||
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Grid,
|
||||
Group,
|
||||
NumberInput,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconChevronRight,
|
||||
IconMoodSmile,
|
||||
IconMoodSmileBeam,
|
||||
IconMoodSmileDizzy,
|
||||
IconMoodXd,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_proses_donasi } from "../../global_state";
|
||||
|
||||
const listNominal = [
|
||||
{
|
||||
id: 1,
|
||||
jumlah: 25000,
|
||||
icon: <IconMoodSmile />,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
jumlah: 50000,
|
||||
icon: <IconMoodSmileBeam />,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
jumlah: 75000,
|
||||
icon: <IconMoodSmileDizzy />,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
jumlah: 100000,
|
||||
icon: <IconMoodXd />,
|
||||
},
|
||||
];
|
||||
|
||||
export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
|
||||
const router = useRouter();
|
||||
const [nominal, setNominal] = useState(0);
|
||||
const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
|
||||
|
||||
async function onProses(nominal: number) {
|
||||
if (nominal === 0) return NotifPeringatan("Masukan Nominal");
|
||||
if (nominal < 10000)
|
||||
return NotifPeringatan("Mohon maaf, Minimal donasi Rp. 10.000");
|
||||
setProsesDonasi({
|
||||
...prosesDonasi,
|
||||
nominal: "" + nominal,
|
||||
});
|
||||
router.push(RouterDonasi.metode_pembayaran + `${donasiId}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Box>
|
||||
{listNominal.map((e) => (
|
||||
<Paper
|
||||
key={e.id}
|
||||
withBorder
|
||||
radius={"md"}
|
||||
p={"sm"}
|
||||
shadow="lg"
|
||||
mb={"md"}
|
||||
onClick={() => onProses(e.jumlah)}
|
||||
>
|
||||
<Group position="apart">
|
||||
<Group>
|
||||
{e.icon}
|
||||
<Title order={4}>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumFractionDigits: 10,
|
||||
}).format(e.jumlah)}
|
||||
</Title>
|
||||
</Group>
|
||||
<IconChevronRight />
|
||||
</Group>
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
<Paper p={"sm"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Text>Nominal Lainnya</Text>
|
||||
<Grid>
|
||||
<Grid.Col span={1}>
|
||||
<Title order={4}>Rp.</Title>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={11}>
|
||||
<NumberInput
|
||||
min={0}
|
||||
type="number"
|
||||
onChange={(val: number) => setNominal(val)}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Text c={"gray"} fz={"xs"}>
|
||||
Minimal Donasi Rp. 10.000
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Button radius={"xl"} onClick={() => onProses(nominal)}>
|
||||
Lanjutan Pembayaran
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { AppShell } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
|
||||
export default function LayoutMasukanDonasi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Masukan Nominal Donasi" />}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
103
src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
Normal file
103
src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_proses_donasi } from "../../global_state";
|
||||
import { Box, Button, Group, Paper, Radio, Stack, Title } from "@mantine/core";
|
||||
import { IconChevronRight } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { useState } from "react";
|
||||
import { Model_Nama_Bank } from "@/app_modules/investasi/model/model_investasi";
|
||||
import { Donasi_getNamaBank } from "../../fun/get/get_nama_bank";
|
||||
import { Donasi_funCreateInvoice } from "../../fun/create/fun_create_invoice";
|
||||
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
|
||||
import { NotifGagal } from "../../component/notifikasi/notif_gagal";
|
||||
|
||||
const listBank = [
|
||||
{
|
||||
id: "1",
|
||||
norek: "345678765",
|
||||
bank: "BCA",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
norek: "4565435",
|
||||
bank: "BRI",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
norek: "423533424565",
|
||||
bank: "BNI",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
norek: "8765423",
|
||||
bank: "MANDIRI",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Donasi_MetodePembayaran({
|
||||
listBank,
|
||||
donasiId,
|
||||
authorId
|
||||
}: {
|
||||
listBank: Model_Nama_Bank[];
|
||||
donasiId: string;
|
||||
authorId: string
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
|
||||
const [pilihBank, setPilihBank] = useState("1");
|
||||
const [bank, setBank] = useState(listBank);
|
||||
|
||||
async function onProses() {
|
||||
const body = {
|
||||
donasiId: donasiId,
|
||||
donasiMaster_BankId: pilihBank,
|
||||
nominal: prosesDonasi.nominal,
|
||||
authorId: authorId
|
||||
};
|
||||
|
||||
// console.log(body)
|
||||
|
||||
await Donasi_funCreateInvoice(body).then((res) => {
|
||||
if (res.status === 200) {
|
||||
NotifBerhasil(res.message);
|
||||
router.push(RouterDonasi.invoice + `${res.invoiceId}`);
|
||||
setProsesDonasi({
|
||||
...prosesDonasi,
|
||||
nominal: "",
|
||||
});
|
||||
} else {
|
||||
NotifGagal(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
{/* <pre>{JSON.stringify(prosesDonasi, null, 2)}</pre> */}
|
||||
|
||||
<Radio.Group value={pilihBank} onChange={setPilihBank} withAsterisk>
|
||||
{bank.map((e) => (
|
||||
<Paper
|
||||
key={e.id}
|
||||
withBorder
|
||||
radius={"md"}
|
||||
p={"sm"}
|
||||
shadow="lg"
|
||||
mb={"xs"}
|
||||
>
|
||||
<Radio value={e.id} label={<Title order={6}>{e.name}</Title>} />
|
||||
</Paper>
|
||||
))}
|
||||
</Radio.Group>
|
||||
|
||||
<Button radius={"xl"} onClick={() => onProses()}>
|
||||
Pilih
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
"use client"
|
||||
|
||||
import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate"
|
||||
import { AppShell } from "@mantine/core"
|
||||
import React from "react"
|
||||
|
||||
|
||||
export default function LayoutDonasi_MetodePembayaran({children}: {children: React.ReactNode}){
|
||||
return<>
|
||||
<AppShell
|
||||
header={<HeaderTamplateDonasi title="Pilih Metode Pembayaran"/>}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
|
||||
</>
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
CopyButton,
|
||||
Grid,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import invoice from "../invoice";
|
||||
import { MODEL_DONASI_INVOICE } from "../../model/interface";
|
||||
import { useState } from "react";
|
||||
import { useInterval, useShallowEffect } from "@mantine/hooks";
|
||||
import { redirect, useRouter } from "next/navigation";
|
||||
import { Donasi_getOneInvoiceById } from "../../fun/get/get_one_invoice_by_id";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_donasi_hot_menu } from "../../global_state";
|
||||
|
||||
export default function Donasi_ProsesTransaksi({
|
||||
dataInvoice,
|
||||
}: {
|
||||
dataInvoice: MODEL_DONASI_INVOICE;
|
||||
}) {
|
||||
const [invoice, setInvoice] = useState(dataInvoice);
|
||||
const [hotMenu, setHotMenu] = useAtom(gs_donasi_hot_menu);
|
||||
const interval = useInterval(
|
||||
() =>
|
||||
reloadData(invoice.id).then((res) =>
|
||||
setInvoice(res as MODEL_DONASI_INVOICE)
|
||||
),
|
||||
5000
|
||||
);
|
||||
|
||||
useShallowEffect(() => {
|
||||
interval.start();
|
||||
}, [invoice.id]);
|
||||
|
||||
function reloadData(invoiceId: string) {
|
||||
const res = Donasi_getOneInvoiceById(invoiceId);
|
||||
return res;
|
||||
}
|
||||
|
||||
if (invoice.donasiMaster_StatusInvoiceId === "1") {
|
||||
|
||||
redirect(RouterDonasi.detail_donasi_saya + `${invoice.id}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper p={"sm"} withBorder>
|
||||
<Stack spacing={"md"}>
|
||||
<Paper bg={"gray.1"} p={"sm"} radius={"md"}>
|
||||
<Stack align="center" justify="center">
|
||||
<Title order={6}>Admin sedang memproses transaksimu</Title>
|
||||
<Paper radius={1000} w={100} h={100}>
|
||||
<Center h={"100%"}>
|
||||
<Loader size={"lg"} color="orange" variant="bars" />
|
||||
</Center>
|
||||
</Paper>
|
||||
<Title order={6}>Mohon menunggu !</Title>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
|
||||
import React from "react";
|
||||
import HeaderTamplateDonasi from "../../component/header_tamplate";
|
||||
import { IconX } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_donasi_hot_menu } from "../../global_state";
|
||||
|
||||
export default function LayoutDonasi_ProsesTransaksi({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
|
||||
async function onClick() {
|
||||
setDonasiHotMenu(2);
|
||||
router.push(RouterDonasi.main_donasi_saya);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={
|
||||
<Header height={50} sx={{ borderStyle: "none" }}>
|
||||
<Group h={50} position="apart" px={"md"}>
|
||||
<ActionIcon variant="transparent" onClick={() => onClick()}>
|
||||
<IconX />
|
||||
</ActionIcon>
|
||||
<Title order={5}>Proses Transaksi</Title>
|
||||
<ActionIcon disabled variant="transparent"></ActionIcon>
|
||||
</Group>
|
||||
</Header>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user