wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Donation

Browse Source 
Add:
- donation/[id]/(transaction-flow)

### No Issue
This commit is contained in:
Bagasbanuna02
2025-08-04 17:44:20 +08:00
parent b858c7d297
commit ca48dd2c6c
8 changed files with 366 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/(application)/(user)/_layout.tsx
View File

@@ -344,7 +344,7 @@ export default function UserLayout() {
name="donation/(tabs)"
options={{
title: "Donasi",
headerLeft: () => <BackButton path="/home" />,
headerLeft: () => <BackButton path="/crowdfunding" />,
}}
/>
@@ -362,13 +362,7 @@ export default function UserLayout() {
headerLeft: () => <BackButton />,
}}
/>
{/* <Stack.Screen
name="donation/[id]/index"
options={{
title: "Detail Donasi",
headerLeft: () => <BackButton />,
}}
/> */}
<Stack.Screen
name="donation/[id]/edit"
options={{
@@ -418,7 +412,7 @@ export default function UserLayout() {
headerLeft: () => <BackButton />,
}}
/>
<Stack.Screen
name="donation/[id]/(news)/recap-of-news"
options={{
@@ -441,6 +435,49 @@ export default function UserLayout() {
}}
/>
<Stack.Screen
name="donation/[id]/(transaction-flow)/index"
options={{
title: "Donasi",
headerLeft: () => <BackButton />,
}}
/>
<Stack.Screen
name="donation/[id]/(transaction-flow)/select-bank"
options={{
title: "Pilih Bank",
headerLeft: () => <BackButton />,
}}
/>
<Stack.Screen
name="donation/[id]/(transaction-flow)/[transaction]/invoice"
options={{
title: "Invoice",
headerLeft: () => (
<Ionicons
name="close"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
/>
),
}}
/>
<Stack.Screen
name="donation/[id]/(transaction-flow)/[transaction]/process"
options={{
title: "Proses",
headerLeft: () => (
<Ionicons
name="close"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
/>
),
}}
/>
{/* ========== End Donation Section ========= */}
{/* ========== Job Section ========= */}

110
app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx Normal file
View File

@@ -0,0 +1,110 @@
import {
BaseBox,
ButtonCenteredOnly,
ButtonCustom,
Grid,
InformationBox,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { router, useLocalSearchParams } from "expo-router";
export default function DonationInvoice() {
const { id } = useLocalSearchParams();
return (
<>
<ViewWrapper>
<StackCustom>
<InformationBox text="Mohon transfer ke rekening dibawah" />
<BaseBox>
<StackCustom gap={"xs"}>
<TextCustom>Nama BANK</TextCustom>
<TextCustom>Nama Penerima</TextCustom>
<Spacing height={10} />
<BaseBox backgroundColor={MainColor.soft_darkblue}>
<Grid containerStyle={{ justifyContent: "center" }}>
<Grid.Col
span={8}
style={{
justifyContent: "center",
}}
>
<TextCustom size="xlarge" bold color="yellow">
4567898765433567
</TextCustom>
</Grid.Col>
<Grid.Col
span={4}
style={{
alignItems: "flex-end",
}}
>
<ButtonCustom>Salin</ButtonCustom>
</Grid.Col>
</Grid>
</BaseBox>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"xs"}>
<TextCustom>Jumlah Transaksi</TextCustom>
<Spacing height={10} />
<BaseBox backgroundColor={MainColor.soft_darkblue}>
<Grid containerStyle={{ justifyContent: "center" }}>
<Grid.Col
span={8}
style={{
justifyContent: "center",
}}
>
<TextCustom size="xlarge" bold color="yellow">
Rp. 1.000.000
</TextCustom>
</Grid.Col>
<Grid.Col
span={4}
style={{
alignItems: "flex-end",
}}
>
<ButtonCustom>Salin</ButtonCustom>
</Grid.Col>
</Grid>
</BaseBox>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom>
<TextCustom>Upload bukti transfer anda.</TextCustom>
<ButtonCenteredOnly
onPress={() => {
router.push("/(application)/(image)/take-picture/123");
}}
icon="upload"
>
Upload
</ButtonCenteredOnly>
</StackCustom>
</BaseBox>
<ButtonCustom
onPress={() => {
router.push(`/donation/${id}/(transaction-flow)/process`);
}}
>
Saya Sudah Transfer
</ButtonCustom>
</StackCustom>
<Spacing />
</ViewWrapper>
</>
);
}

45
app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/process.tsx Normal file
View File

@@ -0,0 +1,45 @@
import {
BaseBox,
Grid,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native";
export default function DonationProcess() {
return (
<>
<ViewWrapper>
<BaseBox>
<StackCustom>
<TextCustom align="center" bold>
Admin sedang memproses transaksi donasimu
</TextCustom>
<ActivityIndicator size="large" color={MainColor.yellow} />
</StackCustom>
</BaseBox>
<BaseBox>
<Grid>
<Grid.Col span={10} style={{ justifyContent: "center" }}>
<TextCustom size="small">
Hubungi admin jika tidak kunjung di proses! Klik pada logo
Whatsapp ini.
</TextCustom>
</Grid.Col>
<Grid.Col span={2} style={{ alignItems: "flex-end" }}>
<Ionicons
name="logo-whatsapp"
size={50}
color={MainColor.green}
/>
</Grid.Col>
</Grid>
</BaseBox>
</ViewWrapper>
</>
);
}

81
app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx Normal file
View File

@@ -0,0 +1,81 @@
import {
BaseBox,
BoxButtonOnFooter,
ButtonCustom,
Grid,
TextCustom,
TextInputCustom,
ViewWrapper,
} from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
export default function InvestmentInputDonation() {
const { id } = useLocalSearchParams();
const bottomComponent = (
<BoxButtonOnFooter>
<ButtonCustom
onPress={() => router.replace(`/donation/${id}/select-bank`)}
>
Lanjutan
</ButtonCustom>
</BoxButtonOnFooter>
);
return (
<>
<ViewWrapper footerComponent={bottomComponent}>
{listData.map((item, i) => (
<BaseBox key={i}>
<Grid>
<Grid.Col span={8}>
<TextCustom bold size="large">
Rp. {item.label}
</TextCustom>
</Grid.Col>
<Grid.Col span={4}>
<Ionicons
name="chevron-forward"
size={ICON_SIZE_SMALL}
color={MainColor.yellow}
style={{ alignSelf: "flex-end" }}
/>
</Grid.Col>
</Grid>
</BaseBox>
))}
<BaseBox>
<TextInputCustom
label="Nominal lainnya"
placeholder="0"
iconLeft="Rp."
/>
<TextCustom size="small" color="gray">
Minimal donasi Rp. 10.000
</TextCustom>
</BaseBox>
</ViewWrapper>
</>
);
}
const listData = [
{
label: "25.000",
value: 25000,
},
{
label: "50.000",
value: 50000,
},
{
label: "100.000",
value: 100000,
},
{
label: "250.000",
value: 250000,
},
];

44
app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx Normal file
View File

@@ -0,0 +1,44 @@
import {
BaseBox,
BoxButtonOnFooter,
ButtonCustom,
ViewWrapper,
} from "@/components";
import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
export default function DonationSelectBank() {
const { id, transaction } = useLocalSearchParams();
const [value, setValue] = useState<any | number>("");
const buttonSubmit = () => {
return (
<>
<BoxButtonOnFooter>
<ButtonCustom
onPress={() =>
router.replace(
`/(application)/(user)/donation/${id}/(transaction-flow)/${transaction}/invoice`
)
}
>
Pilih
</ButtonCustom>
</BoxButtonOnFooter>
</>
);
};
return (
<ViewWrapper footerComponent={buttonSubmit()}>
<RadioGroup value={value} onChange={setValue}>
{dummyMasterBank.map((item) => (
<BaseBox key={item.name}>
<RadioCustom label={item.name} value={item.code} />
</BaseBox>
))}
</RadioGroup>
</ViewWrapper>
);
}

35
app/(application)/(user)/donation/[id]/[status]/detail.tsx
View File

@@ -6,13 +6,14 @@ import {
Spacing,
ViewWrapper,
} from "@/components";
import { IconEdit } from "@/components/_Icon";
import { IconEdit, IconNews } from "@/components/_Icon";
import { IMenuDrawerItem } from "@/components/_Interface/types";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection";
import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
import { FontAwesome6 } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import _ from "lodash";
@@ -21,6 +22,7 @@ import { useState } from "react";
export default function DonasiDetailStatus() {
const { id, status } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false);
const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
const handlePress = (item: IMenuDrawerItem) => {
console.log("PATH ", item.path);
@@ -37,11 +39,17 @@ export default function DonasiDetailStatus() {
headerRight: () =>
status === "draft" ? (
<DotButton onPress={() => setOpenDrawer(true)} />
) : status === "publish" ? (
<DotButton onPress={() => setOpenDrawerPublish(true)} />
) : null,
}}
/>
<ViewWrapper>
<Donation_ComponentBoxDetailData />
<Donation_ComponentBoxDetailData
bottomSection={
status === "publish" && <Donation_ProgressSection id={id as string} />
}
/>
<Donation_ComponentStoryFunrising id={id as string} />
<Spacing />
<Donation_ButtonStatusSection status={status as string} />
@@ -62,7 +70,7 @@ export default function DonasiDetailStatus() {
},
{
icon: <IconEdit />,
label: "Edit Cerita Penggalang",
label: "Edit Cerita",
path: `/donation/${id}/edit-story`,
},
{
@@ -81,6 +89,27 @@ export default function DonasiDetailStatus() {
onPressItem={handlePress as any}
/>
</DrawerCustom>
<DrawerCustom
isVisible={openDrawerPublish}
closeDrawer={() => setOpenDrawerPublish(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
icon: <IconNews />,
label: "Rekap Kabar",
path: `/donation/${id}/(news)/recap-of-news`,
},
]}
onPressItem={(item) => {
console.log("PATH ", item.path);
router.navigate(item.path as any);
setOpenDrawerPublish(false);
}}
/>
</DrawerCustom>
</>
);
}

8
app/(application)/(user)/donation/[id]/index.tsx
View File

@@ -23,7 +23,13 @@ export default function DonasiDetailBeranda() {
const buttonSection = (
<>
<BoxButtonOnFooter>
<ButtonCustom>Donasi</ButtonCustom>
<ButtonCustom
onPress={() =>
router.navigate(`/donation/${id}/(transaction-flow)`)
}
>
Donasi
</ButtonCustom>
</BoxButtonOnFooter>
</>
);

2
app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx
View File

@@ -16,7 +16,7 @@ export default function InvestmentProcess() {
<BaseBox>
<StackCustom>
<TextCustom align="center" bold>
Admin sedang memproses transaksimu
Admin sedang memproses transaksi investasimu
</TextCustom>
<ActivityIndicator size="large" color={MainColor.yellow} />
</StackCustom>