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

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>
);
}