Donation:

Add: - components/_ShareComponent/MoneyTransferAnimation.tsx Fix: - Invoice terintegrasi API - Create dan list berita ### No Issue
2025-10-08 17:40:36 +08:00
parent a980397640
commit b293310969
13 changed files with 610 additions and 123 deletions
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -10,7 +10,6 @@ export default function UserLayout() {
  return (
    <>
      <Stack screenOptions={HeaderStyles}>
-
        <Stack.Screen
          name="waiting-room"
          options={{
@@ -463,7 +462,7 @@ export default function UserLayout() {
          }}
        />
        <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/process"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/process"
          options={{
            title: "Proses",
            headerLeft: () => (
@@ -477,14 +476,14 @@ export default function UserLayout() {
          }}
        />
        <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/success"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/success"
          options={{
            title: "Donasi Berhasil",
            headerLeft: () => <BackButton />,
          }}
        />
        <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/failed"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/failed"
          options={{
            title: "Donasi Gagal",
            headerLeft: () => <BackButton />,
--- a/app/(application)/(user)/donation/(tabs)/my-donation.tsx
+++ b/app/(application)/(user)/donation/(tabs)/my-donation.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BadgeCustom,
  BaseBox,
@@ -9,7 +10,6 @@ import {
  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
 import { apiDonationGetAll } from "@/service/api-client/api-donation";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { Href, router, useFocusEffect } from "expo-router";
@@ -25,7 +25,7 @@ export default function DonationMyDonation() {
  useFocusEffect(
    useCallback(() => {
      onLoadData();
-    }, [])
+    }, [user?.id])
  );

  const onLoadData = async () => {
@@ -48,6 +48,18 @@ export default function DonationMyDonation() {
    }
  };

+  const handlerColor = (status: string) => {
+    if (status === "menunggu") {
+      return "orange";
+    } else if (status === "proses") {
+      return "white";
+    } else if (status === "berhasil") {
+      return "green";
+    } else if (status === "gagal") {
+      return "red";
+    }
+  };
+
  const handlePress = ({
    invoiceId,
    donationId,
@@ -57,15 +69,15 @@ export default function DonationMyDonation() {
    donationId: string;
    status: string;
  }) => {
-    const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}/invoice`;
+    const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}`;
    if (status === "menunggu") {
-      router.push(url);
+      router.push(`${url}/invoice`);
    } else if (status === "proses") {
-      router.push(url);
+      router.push(`${url}/process`);
    } else if (status === "berhasil") {
-      router.push(url);
+      router.push(`${url}/success`);
    } else if (status === "gagal") {
-      router.push(url);
+      router.push(`${url}/failed`);
    }
  };

@@ -112,7 +124,11 @@ export default function DonationMyDonation() {
                    Rp. {formatCurrencyDisplay(item.nominal)}
                  </TextCustom>

-                  <BadgeCustom variant="light" color={item.color} fullWidth>
+                  <BadgeCustom
+                    variant="light"
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
+                    fullWidth
+                  >
                    {item.statusInvoice}
                  </BadgeCustom>
                </StackCustom>
--- a/app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  AlertDefaultSystem,
  BackButton,
@@ -12,13 +13,42 @@ import {
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { IconTrash } from "@/components/_Icon/IconTrash";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
 import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";

 export default function DonationNews() {
-  const { id, news } = useLocalSearchParams();
+  const { user } = useAuth();
+  const { news } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [news])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetNewsById({
+        id: news as string,
+        category: "get-one",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };

  return (
    <>
@@ -26,28 +56,28 @@ export default function DonationNews() {
        options={{
          title: "Detail Kabar",
          headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data && data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
        }}
      />
      <ViewWrapper>
        <BaseBox>
          <StackCustom>
            <TextCustom style={{ alignSelf: "flex-end" }}>
-              {dayjs().format("DD MMM YYYY")}
+              {formatChatTime(data?.createdAt)}
            </TextCustom>

-            <DummyLandscapeImage />
+            {data && data.imageId && (
+              <DummyLandscapeImage imageId={data.imageId} />
+            )}

            <TextCustom bold size="large" align="center">
-              Judul Berita
+              {data?.title || "-"}
            </TextCustom>

-            <TextCustom>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
-              est id temporibus perferendis eos reiciendis reprehenderit tempora
-              ut quibusdam dolores facilis rerum exercitationem recusandae quis
-              neque, adipisci dolorum, aspernatur labore?
-            </TextCustom>
+            <TextCustom>{data?.deskripsi || "-"}</TextCustom>
          </StackCustom>
        </BaseBox>
      </ViewWrapper>
@@ -62,12 +92,12 @@ export default function DonationNews() {
            {
              icon: <IconEdit />,
              label: "Edit Berita",
-              path: `/donation/${id}/(news)/${news}/edit-news` as any,
+              path: `/donation/[id]/(news)/${news}/edit-news` as any,
            },
            {
              icon: <IconTrash />,
              label: "Hapus Berita",
-              path: `` as any,
+              path: `/donation/[id]/(news)/${news}/edit-news` as any,
              color: "red",
            },
          ]}
--- a/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
@@ -9,17 +9,82 @@ import {
  TextInputCustom,
  ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiDonationCreateNews } from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";

 export default function DonationAddNews() {
+  const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+  const [data, setData] = useState({
+    title: "",
+    deskripsi: "",
+  });
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    let newData: any = { ...data };
+    try {
+      setLoading(true);
+      if (image) {
+        const responseUploadImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_kabar,
+          imageUri: image?.uri,
+        });
+
+        newData = {
+          ...newData,
+          imageId: responseUploadImage.data.id,
+        };
+      }
+
+      const response = await apiDonationCreateNews({
+        id: id as string,
+        data: newData,
+      });
+
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menambah berita",
+        });
+
+        return
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berita berhasil ditambahkan",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
  return (
    <ViewWrapper>
      <StackCustom gap={"xs"}>
        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image?.uri} />
        <ButtonCenteredOnly
          onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
          }}
          icon="upload"
        >
@@ -30,6 +95,13 @@ export default function DonationAddNews() {
          label="Judul Berita"
          placeholder="Masukan judul berita"
          required
+          value={data.title}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              title: value,
+            });
+          }}
        />
        <TextAreaCustom
          label="Deskripsi Berita"
@@ -37,12 +109,21 @@ export default function DonationAddNews() {
          required
          showCount
          maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              deskripsi: value,
+            });
+          }}
        />
-        
+
        <Spacing />
        <ButtonCustom
+          disabled={!data.title || !data.deskripsi}
+          isLoading={isLoading}
          onPress={() => {
-            router.back();
+            handlerSubmit();
          }}
        >
          Simpan
--- a/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
@@ -1,45 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BackButton,
-    BaseBox,
-    DrawerCustom,
-    Grid,
-    MenuDrawerDynamicGrid,
-    TextCustom,
-    ViewWrapper
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  Grid,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
 import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";

 export default function DonationRecapOfNews() {
  const { id } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      console.log("[RESPONSE LIST]", JSON.stringify(response, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };

  return (
    <>
      <Stack.Screen
        options={{
          title: "Daftar Kabar",
-          headerLeft: () => <BackButton />, }}
+          headerLeft: () => <BackButton />,
+        }}
      />
      <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
-            <Grid>
-              <Grid.Col span={8}>
-                <TextCustom truncate bold>
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small">
-                  {dayjs().format("DD MMM YYYY")}
-                </TextCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
      </ViewWrapper>

      <DrawerCustom
--- a/app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx
@@ -1,21 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BackButton,
  BaseBox,
  DotButton,
  DrawerCustom,
  Grid,
+  LoaderCustom,
  MenuDrawerDynamicGrid,
  TextCustom,
  ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
 import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";

 export default function DonationRecapOfNews() {
  const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      console.log("[RESPONSE LIST]", JSON.stringify(response, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };

  return (
    <>
@@ -27,20 +64,30 @@ export default function DonationRecapOfNews() {
        }}
      />
      <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
-            <Grid>
-              <Grid.Col span={8}>
-                <TextCustom truncate bold>
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small">{dayjs().format("DD MMM YYYY")}</TextCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
      </ViewWrapper>

      <DrawerCustom
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
  BaseBox,
  ButtonCenteredOnly,
@@ -9,23 +10,107 @@ import {
  TextCustom,
  ViewWrapper,
 } from "@/components";
+import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
-import { router, useLocalSearchParams } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetInvoiceById,
+  apiDonationUpdateInvoice,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
+import Toast from "react-native-toast-message";

 export default function DonationInvoice() {
  const { invoiceId } = useLocalSearchParams();
  console.log("invoiceId", invoiceId);
+  const [data, setData] = useState<any>(null);
+  const [image, setImage] = useState<any>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [invoiceId])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetInvoiceById({
+        id: invoiceId as string,
+      });
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerUpdateInvoice = async () => {
+    try {
+      setLoading(true);
+      const responseUploadImage = await uploadFileService({
+        dirId: DIRECTORY_ID.donasi_bukti_transfer,
+        imageUri: image?.uri,
+      });
+
+      console.log("[RESPONSE UPLOAD IMAGE]", responseUploadImage);
+
+      if (!responseUploadImage?.data?.id) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      const fileId = responseUploadImage?.data?.id;
+
+      const response = await apiDonationUpdateInvoice({
+        id: invoiceId as string,
+        fileId: fileId,
+        status: "proses",
+      });
+
+      console.log("[RESPONSE UPDATE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berhasil mengunggah bukti transfer",
+      });
+      router.replace(`/donation/[id]/(transaction-flow)/${invoiceId}/process`);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
  return (
    <>
      <ViewWrapper>
        <StackCustom>
          <InformationBox
-            text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${invoiceId}`}
+            text={`Mohon transfer donasi anda ke rekening dibawah`}
          />
          <BaseBox>
            <StackCustom gap={"xs"}>
-              <TextCustom>Nama BANK</TextCustom>
-              <TextCustom>Nama Penerima</TextCustom>
+              <TextCustom bold>
+                BANK: {data?.DonasiMaster_Bank?.name}
+              </TextCustom>
+              {/* <TextCustom>{data?.DonasiMaster_Bank?.accountName}</TextCustom> */}
              <Spacing height={10} />

              <BaseBox backgroundColor={MainColor.soft_darkblue}>
@@ -37,7 +122,7 @@ export default function DonationInvoice() {
                    }}
                  >
                    <TextCustom size="xlarge" bold color="yellow">
-                      4567898765433567
+                      {data?.DonasiMaster_Bank?.norek}
                    </TextCustom>
                  </Grid.Col>
                  <Grid.Col
@@ -46,7 +131,7 @@ export default function DonationInvoice() {
                      alignItems: "flex-end",
                    }}
                  >
-                    <ButtonCustom>Salin</ButtonCustom>
+                    <CopyButton textToCopy={data?.DonasiMaster_Bank?.norek} />
                  </Grid.Col>
                </Grid>
              </BaseBox>
@@ -68,7 +153,7 @@ export default function DonationInvoice() {
                    }}
                  >
                    <TextCustom size="xlarge" bold color="yellow">
-                      Rp. 1.000.000
+                      Rp. {formatCurrencyDisplay(data?.nominal) || "-"}
                    </TextCustom>
                  </Grid.Col>
                  <Grid.Col
@@ -77,7 +162,7 @@ export default function DonationInvoice() {
                      alignItems: "flex-end",
                    }}
                  >
-                    <ButtonCustom>Salin</ButtonCustom>
+                    <CopyButton textToCopy={data?.nominal} />
                  </Grid.Col>
                </Grid>
              </BaseBox>
@@ -86,10 +171,32 @@ export default function DonationInvoice() {

          <BaseBox>
            <StackCustom>
-              <TextCustom>Upload bukti transfer anda.</TextCustom>
+              <TextCustom bold align="center" size={"small"} color="gray">
+                Upload bukti transfer anda.
+              </TextCustom>
+              {image ? (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 10,
+                    paddingInline: 20,
+                  }}
+                >
+                  <TextCustom bold align="center" truncate>
+                    {image?.name}
+                  </TextCustom>
+                </View>
+              ) : null}
              <ButtonCenteredOnly
                onPress={() => {
-                  router.push("/(application)/(image)/take-picture/123");
+                  pickFile({
+                    allowedType: "image",
+                    setImageUri(file) {
+                      setImage(file);
+                    },
+                  });
                }}
                icon="upload"
              >
@@ -99,11 +206,13 @@ export default function DonationInvoice() {
          </BaseBox>

          <ButtonCustom
+            disabled={!image}
+            isLoading={isLoading}
            onPress={() => {
-              router.push(`/donation/${invoiceId}/(transaction-flow)/process`);
+              handlerUpdateInvoice();
            }}
          >
-            Saya Sudah Transfer
+            Simpan
          </ButtonCustom>
        </StackCustom>
        <Spacing />
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx
@@ -1,13 +1,6 @@
-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";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
+import { View } from "react-native";

 export default function DonationProcess() {
  return (
@@ -16,13 +9,16 @@ export default function DonationProcess() {
        <BaseBox>
          <StackCustom>
            <TextCustom align="center" bold>
-              Admin sedang memproses transaksi donasimu
+              Admin sedang memvalidasi data dan bukti transfer anda. Mohon
+              tunggu proses ini selesai.
            </TextCustom>
-            <ActivityIndicator size="large" color={MainColor.yellow} />
+            <View style={{ alignItems: "center", justifyContent: "center" }}>
+              <MoneyTransferAnimation />
+            </View>
          </StackCustom>
        </BaseBox>

-        <BaseBox>
+        {/* <BaseBox>
          <Grid>
            <Grid.Col span={10} style={{ justifyContent: "center" }}>
              <TextCustom size="small">
@@ -38,7 +34,7 @@ export default function DonationProcess() {
              />
            </Grid.Col>
          </Grid>
-        </BaseBox>
+        </BaseBox> */}
      </ViewWrapper>
    </>
  );
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx
@@ -22,7 +22,6 @@ export default function InvestmentInputDonation() {

  const handlerSubmit = async () => {
    try {
-      console.log("jumlah", nominal);
      await AsyncStorage.setItem(
        LOCAL_STORAGE_KEY.transactionDonation,
        JSON.stringify({ nominal: nominal.toString() })
@@ -77,6 +76,7 @@ export default function InvestmentInputDonation() {

        <BaseBox>
          <TextInputCustom
+            keyboardType="numeric"
            label="Nominal lainnya"
            placeholder="0"
            iconLeft="Rp."
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx
@@ -7,19 +7,16 @@ import {
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
 import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
 import { apiDonationCreateInvoice } from "@/service/api-client/api-donation";
 import { apiMasterBank } from "@/service/api-client/api-master";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";

 export default function DonationSelectBank() {
  const { user } = useAuth();
  const { id } = useLocalSearchParams();
-
-  console.log("id", id);
  const [select, setSelect] = useState<any | number>("");
  const [listBank, setListBank] = useState<any>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -54,22 +51,16 @@ export default function DonationSelectBank() {
          authorId: user?.id,
        };

-        console.log("[NEW DATA]", newData);
-
        const response = await apiDonationCreateInvoice({
          id: id as string,
          data: newData,
        });
-        console.log("[RESPONSE CREATE>>]", response);

        if (response.success) {
          const invoiceId = response.data.id;

-          const delStorage = await AsyncStorage.removeItem(
-            LOCAL_STORAGE_KEY.transactionDonation
-          );
+          await AsyncStorage.removeItem(LOCAL_STORAGE_KEY.transactionDonation);

-          console.log("[DEL STORAGE]", delStorage);
          router.replace(
            `/(application)/(user)/donation/[id]/(transaction-flow)/${invoiceId}/invoice`
          );
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx
+++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx
@@ -1,11 +1,6 @@
-import {
-  BaseBox,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { ActivityIndicator } from "react-native";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
+import { View } from "react-native";

 export default function InvestmentProcess() {
  return (
@@ -17,7 +12,9 @@ export default function InvestmentProcess() {
              Admin sedang memvalidasi data dan bukti transfer anda. Mohon
              tunggu proses ini selesai.
            </TextCustom>
-            <ActivityIndicator size="large" color={MainColor.yellow} />
+            <View style={{ alignItems: "center", justifyContent: "center" }}>
+              <MoneyTransferAnimation />
+            </View>
          </StackCustom>
        </BaseBox>