Donation

Add: - [transaction]/success.tsx - [transaction]/failed.tsx Fix: - InformationBox : props type di tambah React.ReactNode - /donation/create && /donation/create-story : fix route ### No Issue
2025-08-05 11:01:41 +08:00
parent ca48dd2c6c
commit e16b0c2fce
9 changed files with 213 additions and 16 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -477,6 +477,20 @@ export default function UserLayout() {
            ),
          }}
        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/success"
+          options={{
+            title: "Donasi Berhasil",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(transaction-flow)/[transaction]/failed"
+          options={{
+            title: "Donasi Gagal",
+            headerLeft: () => <BackButton />,
+          }}
+        />

        {/* ========== End Donation Section ========= */}

--- a/app/(application)/(user)/donation/(tabs)/my-donation.tsx
+++ b/app/(application)/(user)/donation/(tabs)/my-donation.tsx
@@ -1,13 +1,14 @@
 import {
-    BadgeCustom,
-    BaseBox,
-    DummyLandscapeImage,
-    Grid,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
+  BadgeCustom,
+  BaseBox,
+  DummyLandscapeImage,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { router } from "expo-router";
 import { View } from "react-native";

 export default function DonationMyDonation() {
@@ -17,6 +18,19 @@ export default function DonationMyDonation() {
    );
    return dummyMasterStatusTransaction[randomIndex];
  });
+
+  const handlePress = (value: string) => {
+    if (value === "menunggu") {
+      router.push(`/donation/${value}/(transaction-flow)/123/invoice`);
+    } else if (value === "proses") {
+      router.push(`/donation/${value}/(transaction-flow)/123/process`);
+    } else if (value === "berhasil") {
+      router.push(`/donation/${value}/(transaction-flow)/123/success`);
+    } else if (value === "gagal") {
+      router.push(`/donation/${value}/(transaction-flow)/123/failed`);
+    }
+  };
+
  return (
    <ViewWrapper hideFooter>
      {randomStatusData.map((item, index) => (
@@ -24,11 +38,13 @@ export default function DonationMyDonation() {
          key={index}
          paddingTop={7}
          paddingBottom={7}
-          href={`/investment/${index}`}
+          onPress={() => {
+            handlePress(item.value);
+          }}
        >
          <Grid>
            <Grid.Col span={5}>
-              <DummyLandscapeImage height={100} />
+              <DummyLandscapeImage height={100} unClickPath />
            </Grid.Col>
            <Grid.Col span={1}>
              <View />
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/failed.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/failed.tsx
@@ -0,0 +1,83 @@
+import {
+  BaseBox,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
+
+export default function DonasiFailed() {
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <BaseBox>
+          <StackCustom>
+            <TextCustom bold align="center">
+              Transaksi anda gagal karena bukti transfer tidak sesuai dengan
+              data kami. Jika ini masalah khusus silahkan hubungi pada kontak
+              whatsapp kami.
+            </TextCustom>
+
+            <FontAwesome6
+              name="whatsapp"
+              size={50}
+              color={MainColor.green}
+              style={GStyles.alignSelfCenter}
+            />
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <TextCustom bold align="center" size="large">
+            Detail Transaksi
+          </TextCustom>
+
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col span={5}>
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={7}>
+                  <TextCustom style={{ paddingLeft: 10 }}>
+                    {item.value}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const listData = [
+  {
+    label: "Bank",
+    value: " BCA",
+  },
+  {
+    label: "Rekening Penerima",
+    value: "Himpunan Pengusaha Muda Indonesia",
+  },
+  {
+    label: "No Rekening",
+    value: "2304235678854332",
+  },
+  {
+    label: "Jumlah Donasi",
+    value: "Rp. 750.000",
+  },
+  {
+    label: "Tanggal",
+    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
+  },
+];
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx
@@ -13,12 +13,12 @@ import { MainColor } from "@/constants/color-palet";
 import { router, useLocalSearchParams } from "expo-router";

 export default function DonationInvoice() {
-  const { id } = useLocalSearchParams();
+  const { id, transaction } = useLocalSearchParams();
  return (
    <>
      <ViewWrapper>
        <StackCustom>
-          <InformationBox text="Mohon transfer ke rekening dibawah" />
+          <InformationBox text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${transaction}`} />
          <BaseBox>
            <StackCustom gap={"xs"}>
              <TextCustom>Nama BANK</TextCustom>
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/success.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/success.tsx
@@ -0,0 +1,83 @@
+import {
+  BaseBox,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
+
+export default function DonationSuccess() {
+  return (
+    <ViewWrapper>
+      <StackCustom>
+        <BaseBox>
+          <StackCustom>
+            <FontAwesome6
+              name="money-bill-wave"
+              size={100}
+              color={MainColor.green}
+              style={GStyles.alignSelfCenter}
+            />
+
+            <TextCustom bold align="center">
+              Terimakasih telah percaya pada kami untuk mengelola dana anda!
+              Info mengenai update Penggalian Dana ini bisa di lihat di kolom
+              berita.
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+
+        <BaseBox>
+          <TextCustom bold align="center" size="large">
+            Detail Transaksi
+          </TextCustom>
+
+          <Spacing />
+
+          <StackCustom>
+            {listData.map((item, i) => (
+              <Grid key={i}>
+                <Grid.Col span={5}>
+                  <TextCustom bold>{item.label}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={7}>
+                  <TextCustom style={{ paddingLeft: 10 }}>
+                    {item.value}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const listData = [
+  {
+    label: "Bank",
+    value: " BCA",
+  },
+  {
+    label: "Rekening Penerima",
+    value: "Himpunan Pengusaha Muda Indonesia",
+  },
+  {
+    label: "No Rekening",
+    value: "2304235678854332",
+  },
+  {
+    label: "Jumlah Donasi",
+    value: "Rp. 750.000",
+  },
+  {
+    label: "Tanggal",
+    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
+  },
+];
--- a/app/(application)/(user)/donation/create-story.tsx
+++ b/app/(application)/(user)/donation/create-story.tsx
@@ -57,7 +57,7 @@ export default function DonationCreateStory() {
        <Spacing />
        <ButtonCustom
          onPress={() => {
-            router.navigate(`/donation/(tabs)/status`);
+            router.replace(`/donation/(tabs)/status`);
          }}
        >
          Simpan
--- a/app/(application)/(user)/donation/create.tsx
+++ b/app/(application)/(user)/donation/create.tsx
@@ -66,7 +66,7 @@ export default function DonationCreate() {
        <Spacing />
        <ButtonCustom
          onPress={() => {
-            router.push("/donation/create-story");
+            router.replace("/donation/create-story");
          }}
        >
          Selanjutnya
--- a/components/Box/InformationBox.tsx
+++ b/components/Box/InformationBox.tsx
@@ -3,8 +3,9 @@ import { Ionicons } from "@expo/vector-icons";
 import Grid from "../Grid/GridCustom";
 import TextCustom from "../Text/TextCustom";
 import BaseBox from "./BaseBox";
+import React from "react";

-export default function InformationBox({ text }: { text: string }) {
+export default function InformationBox({ text }: { text: React.ReactNode | string }) {
  return (
    <>
      <BaseBox paddingTop={5} paddingBottom={5}>
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -30,7 +30,7 @@ export default function LoginView() {
    const id = randomAlfabet + randomNumber + fixNumber;
    console.log("login user id :", id);

-    // router.navigate("/verification");
+    router.navigate("/verification");
    // router.navigate(`/(application)/(user)/profile/${id}`);
    // router.navigate("/(application)/(user)/home");
    // router.navigate(`/(application)/profile/${id}/edit`);
@@ -39,7 +39,7 @@ export default function LoginView() {
    // router.replace("/(application)/(user)/event/(tabs)");
    // router.replace("/(application)/coba");
    // router.navigate("/investment/(tabs)")
-    router.navigate("/crowdfunding")
+    // router.navigate("/crowdfunding")
  }

  return (