feat: Complete User Phase 8 Donation screens + add PADDING_INLINE to all list/recap screens

- Migrate 25 donation screens to OS_Wrapper (tabs, list, detail, forms, transaction flow) - Add contentPadding={PADDING_INLINE} to 7 list/recap screens for consistent spacing - Migrate crowdfunding screen to OS_Wrapper - Fix voting tabs layout height to use OS_IOS_HEIGHT/OS_ANDROID_HEIGHT constants - Migrate news detail screen to OS_Wrapper - Update TASK-005 progress to 73% complete (104 files migrated) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-04-13 16:24:14 +08:00
parent 8e61c980af
commit 243313b8eb
31 changed files with 185 additions and 96 deletions
--- a/app/(application)/(user)/crowdfunding/index.tsx
+++ b/app/(application)/(user)/crowdfunding/index.tsx
@@ -1,9 +1,9 @@
 import {
  BaseBox,
  Grid,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -25,7 +25,7 @@ export default function Crowdfunding() {
  ];

  return (
-    <ViewWrapper>
+    <OS_Wrapper>
      <StackCustom>
        <Image
          source={require("@/assets/images/constants/crowd-hipmi.png")}
@@ -63,6 +63,6 @@ export default function Crowdfunding() {
          </BaseBox>
        ))}
      </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/donation/(tabs)/_layout.tsx
@@ -1,5 +1,5 @@
 import { IconHome, IconStatus } from "@/components/_Icon";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { ICON_SIZE_SMALL, OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import {
    FontAwesome5
@@ -23,12 +23,12 @@ function DonationTabsWrapper() {
            ios: {
              borderTopWidth: 0,
              paddingTop: 12,
-              height: 80,
+              height: OS_IOS_HEIGHT,
            },
            android: {
              borderTopWidth: 0,
              paddingTop: 5,
-              height: 70 + paddingBottom,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
            },
          }),
        }}
--- a/app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx
@@ -5,11 +5,11 @@ import {
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -105,7 +105,9 @@ export default function DonationEditNews() {
  };

  return (
-    <ViewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <BoxButtonOnFooter>
          <ButtonCustom
@@ -165,6 +167,6 @@ export default function DonationEditNews() {
        <Spacing />
      </StackCustom>
      <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx
@@ -7,9 +7,9 @@ import {
  DrawerCustom,
  DummyLandscapeImage,
  MenuDrawerDynamicGrid,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
@@ -28,6 +28,7 @@ import {
 } from "expo-router";
 import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
+import { dateTimeView } from "@/utils/dateTimeView";

 export default function DonationNews() {
  const { user } = useAuth();
@@ -71,11 +72,11 @@ export default function DonationNews() {
          ),
        }}
      />
-      <ViewWrapper>
+      <OS_Wrapper>
        <BaseBox>
          <StackCustom>
-            <TextCustom style={{ alignSelf: "flex-end" }}>
-              {formatChatTime(data?.createdAt)}
+            <TextCustom color="gray" size={"small"} style={{ alignSelf: "flex-end" }}>
+              {dateTimeView({date: data?.createdAt})}
            </TextCustom>

            {data && data.imageId && (
@@ -89,7 +90,7 @@ export default function DonationNews() {
            <TextCustom>{data?.deskripsi || "-"}</TextCustom>
          </StackCustom>
        </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
@@ -4,12 +4,11 @@ import {
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
-  NewWrapper,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreateNews } from "@/service/api-client/api-donation";
@@ -72,7 +71,9 @@ export default function DonationAddNews() {
  };

  return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <BoxButtonOnFooter>
          <ButtonCustom
@@ -133,6 +134,6 @@ export default function DonationAddNews() {

        <Spacing />
      </StackCustom>
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx
@@ -2,10 +2,10 @@
 import {
  BaseBox,
  Grid,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonasiFailed() {
  ];

  return (
-    <ViewWrapper>
+    <OS_Wrapper>
      <StackCustom>
        <BaseBox>
          <StackCustom>
@@ -105,6 +105,6 @@ export default function DonasiFailed() {
          </StackCustom>
        </BaseBox>
      </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
@@ -6,10 +6,10 @@ import {
  ButtonCustom,
  Grid,
  InformationBox,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
@@ -101,8 +101,7 @@ export default function DonationInvoice() {

  return (
    <>
-      <ViewWrapper
-        hideFooter
+      <OS_Wrapper
        footerComponent={
          <BoxButtonOnFooter>
            <ButtonCustom
@@ -222,7 +221,7 @@ export default function DonationInvoice() {
          </BaseBox>
        </StackCustom>
        <Spacing />
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx
@@ -1,11 +1,11 @@
-import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import { BaseBox, OS_Wrapper, StackCustom, TextCustom } from "@/components";
 import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
 import { View } from "react-native";

 export default function DonationProcess() {
  return (
    <>
-      <ViewWrapper>
+      <OS_Wrapper>
        <BaseBox>
          <StackCustom>
            <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function DonationProcess() {
            </Grid.Col>
          </Grid>
        </BaseBox> */}
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx
@@ -2,10 +2,10 @@
 import {
  BaseBox,
  Grid,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
@@ -63,7 +63,7 @@ export default function DonationSuccess() {
  ];

  return (
-    <ViewWrapper>
+    <OS_Wrapper>
      <StackCustom>
        <BaseBox>
          <StackCustom>
@@ -105,7 +105,7 @@ export default function DonationSuccess() {
          </StackCustom>
        </BaseBox>
      </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }

--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx
@@ -3,9 +3,9 @@ import {
  BoxButtonOnFooter,
  ButtonCustom,
  Grid,
+  OS_Wrapper,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -64,7 +64,7 @@ export default function InvestmentInputDonation() {
  );
  return (
    <>
-      <ViewWrapper footerComponent={bottomComponent}>
+      <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250} footerComponent={bottomComponent}>
        {listData.map((item, i) => (
          <BaseBox key={i} onPress={() => setNominal(item.value)}>
            <Grid>
@@ -98,7 +98,7 @@ export default function InvestmentInputDonation() {
            Minimal donasi Rp. 10.000
          </TextCustom>
        </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx
@@ -2,7 +2,7 @@ import {
  BaseBox,
  BoxButtonOnFooter,
  ButtonCustom,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
@@ -91,7 +91,7 @@ export default function DonationSelectBank() {
    );
  };
  return (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <OS_Wrapper footerComponent={buttonSubmit()}>
      <RadioGroup value={select} onChange={setSelect}>
        {_.isEmpty(listBank)
          ? []
@@ -101,6 +101,6 @@ export default function DonationSelectBank() {
              </BaseBox>
            ))}
      </RadioGroup>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/donation/[id]/[status]/detail.tsx
@@ -4,7 +4,7 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
-  NewWrapper,
+  OS_Wrapper,
  Spacing,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
@@ -113,7 +113,7 @@ export default function DonasiDetailStatus() {
          ),
        }}
      />
-      <NewWrapper
+      <OS_Wrapper
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
@@ -156,7 +156,7 @@ export default function DonasiDetailStatus() {
            <Spacing />
          </>
        )}
-      </NewWrapper>
+      </OS_Wrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/donation/[id]/detail-story.tsx
+++ b/app/(application)/(user)/donation/[id]/detail-story.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
  DummyLandscapeImage,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -32,12 +32,12 @@ export default function DonationDetailStory() {
    }
  };
  return (
-    <ViewWrapper>
+    <OS_Wrapper>
      <StackCustom>
        <TextCustom>{data?.pembukaan || "-"}</TextCustom>
        <DummyLandscapeImage imageId={data?.imageId} />
        <TextCustom>{data?.cerita || "-"}</TextCustom>
      </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/edit-rekening.tsx
+++ b/app/(application)/(user)/donation/[id]/edit-rekening.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  ViewWrapper,
+  OS_Wrapper,
  StackCustom,
  InformationBox,
  TextInputCustom,
@@ -76,7 +76,7 @@ export default function DonationEditRekening() {
  };

  return (
-    <ViewWrapper>
+    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
      <StackCustom gap={"xs"}>
        <InformationBox text="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
        <TextInputCustom
@@ -105,6 +105,6 @@ export default function DonationEditRekening() {
        </ButtonCustom>
      </StackCustom>
      <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/edit-story.tsx
+++ b/app/(application)/(user)/donation/[id]/edit-story.tsx
@@ -4,10 +4,10 @@ import {
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
-  ViewWrapper,
 } from "@/components";
 import API_IMAGE from "@/constants/api-storage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -93,7 +93,7 @@ export default function DonationEditStory() {
  };

  return (
-    <ViewWrapper>
+    <OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
      <StackCustom gap={"xs"}>
        <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
        <TextAreaCustom
@@ -146,6 +146,6 @@ export default function DonationEditStory() {
        </ButtonCustom>
      </StackCustom>
      <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/edit.tsx
+++ b/app/(application)/(user)/donation/[id]/edit.tsx
@@ -6,12 +6,11 @@ import {
  InformationBox,
  LandscapeFrameUploaded,
  LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
  SelectCustom,
  Spacing,
  StackCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import API_IMAGE from "@/constants/api-storage";
@@ -184,7 +183,9 @@ export default function DonationEdit() {
  };

  return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <BoxButtonOnFooter>
          <ButtonCustom
@@ -278,6 +279,6 @@ export default function DonationEdit() {
        </StackCustom>
      )}
      <Spacing />
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/index.tsx
@@ -6,9 +6,8 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
-  NewWrapper,
+  OS_Wrapper,
  StackCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconNews } from "@/components/_Icon";
@@ -104,7 +103,7 @@ export default function DonasiDetailBeranda() {
          ),
        }}
      />
-      <NewWrapper footerComponent={buttonSection}>
+      <OS_Wrapper footerComponent={buttonSection}>
        {!data ? (
          <CustomSkeleton height={400} />
        ) : (
@@ -127,7 +126,7 @@ export default function DonasiDetailBeranda() {
            />
          </StackCustom>
        )}
-      </NewWrapper>
+      </OS_Wrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
+++ b/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
@@ -5,9 +5,9 @@ import {
  ButtonCustom,
  Grid,
  LoaderCustom,
+  OS_Wrapper,
  Spacing,
  TextCustom,
-  ViewWrapper
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
 import { apiDonationFundrising } from "@/service/api-client/api-donation";
@@ -44,7 +44,7 @@ export default function DonationInformationFunrising() {

  return (
    <>
-      <ViewWrapper>
+      <OS_Wrapper>
        <BaseBox>
          <Grid>
            <Grid.Col span={6} style={{ justifyContent: "center" }}>
@@ -80,7 +80,7 @@ export default function DonationInformationFunrising() {
            <Donation_BoxPublish key={index} id={item?.id} data={item} />
          ))
        )}
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/donation/create-story.tsx
+++ b/app/(application)/(user)/donation/create-story.tsx
@@ -10,7 +10,7 @@ import {
  TextAreaCustom,
  TextInputCustom,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -113,7 +113,9 @@ export default function DonationCreateStory() {
  };

  return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <>
         <BoxButtonOnFooter>
@@ -184,6 +186,6 @@ export default function DonationCreateStory() {
        />
      </StackCustom>
      <Spacing />
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/donation/create.tsx
+++ b/app/(application)/(user)/donation/create.tsx
@@ -5,12 +5,12 @@ import {
  InformationBox,
  LandscapeFrameUploaded,
  LoaderCustom,
+  OS_Wrapper,
  SelectCustom,
  Spacing,
  StackCustom,
  TextInputCustom,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreate } from "@/service/api-client/api-donation";
 import { apiMasterDonation } from "@/service/api-client/api-master";
@@ -126,7 +126,9 @@ export default function DonationCreate() {
  };

  return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <>
          <BoxButtonOnFooter>
@@ -220,6 +222,6 @@ export default function DonationCreate() {
        )}
      </StackCustom>
      <Spacing />
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/voting/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/voting/(tabs)/_layout.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/components/_Icon";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
+import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { router, Tabs, useLocalSearchParams } from "expo-router";
 import { View } from "react-native";
@@ -30,12 +31,12 @@ function VotingTabsWrapper() {
            ios: {
              borderTopWidth: 0,
              paddingTop: 12,
-              height: 80,
+              height: OS_IOS_HEIGHT,
            },
            android: {
              borderTopWidth: 0,
              paddingTop: 5,
-              height: 70 + paddingBottom,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
            },
          }),
          header: () => (