feat: Complete User Phase 9 Investment screens migration + note known upload issue

- Migrate 24 investment screens to OS_Wrapper (tabs, list, detail, forms, transaction flow) - Add contentPadding={PADDING_INLINE} to 9 list/tabs screens for consistent spacing - Add enableKeyboardHandling to 6 form screens - Fix investment tabs layout height to use OS_IOS_HEIGHT/OS_ANDROID_HEIGHT constants - Update TASK-005 with known issue: upload image returns 500 error in dev env - Note: Investment feature not fully complete - upload issue needs investigation tomorrow Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-04-13 17:56:49 +08:00
parent 2f87776d8b
commit eb64c30d49
27 changed files with 153 additions and 123 deletions
--- a/app/(application)/(user)/investment/(tabs)/_layout.tsx
+++ b/app/(application)/(user)/investment/(tabs)/_layout.tsx
@@ -1,5 +1,5 @@
 import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
-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 { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
 import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
@@ -40,12 +40,12 @@ function InvestmentTabsWrapper() {
            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)/investment/[id]/(document)/add-document.tsx
+++ b/app/(application)/(user)/investment/[id]/(document)/add-document.tsx
@@ -5,11 +5,11 @@ import {
  ButtonCustom,
  CenterCustom,
  InformationBox,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -83,9 +83,12 @@ export default function InvestmentAddDocument() {
  );

  return (
-    <>
-      <ViewWrapper footerComponent={buttonFooter}>
-        <StackCustom gap={"xs"}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
+      <StackCustom gap={"xs"}>
          <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
          <Spacing />
          <TextInputCustom
@@ -124,7 +127,6 @@ export default function InvestmentAddDocument() {
            Upload
          </ButtonCenteredOnly>
        </StackCustom>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(document)/edit-document.tsx
+++ b/app/(application)/(user)/investment/[id]/(document)/edit-document.tsx
@@ -6,11 +6,11 @@ import {
  ButtonCustom,
  CenterCustom,
  InformationBox,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -105,9 +105,12 @@ export default function InvestmentEditDocument() {
  );

  return (
-    <>
-      <ViewWrapper footerComponent={buttonFooter}>
-        <StackCustom gap={"xs"}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonFooter}
+    >
+      <StackCustom gap={"xs"}>
          <InformationBox text="File dokumen bersifat opsional, jika memang ada file yang bisa membantu meyakinkan investor. Anda bisa mengupload nya." />
          <Spacing />
          <TextInputCustom
@@ -142,7 +145,6 @@ export default function InvestmentEditDocument() {
            Upload
          </ButtonCenteredOnly>
        </StackCustom>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(my-holding)/[id].tsx
+++ b/app/(application)/(user)/investment/[id]/(my-holding)/[id].tsx
@@ -6,9 +6,9 @@ import {
  DrawerCustom,
  Grid,
  MenuDrawerDynamicGrid,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -93,7 +93,7 @@ export default function InvestmentDetailHolding() {
        }}
      />

-      <ViewWrapper>
+      <OS_Wrapper>
        <BaseBox>
          <StackCustom gap={"xs"}>
            <Grid>
@@ -124,7 +124,7 @@ export default function InvestmentDetailHolding() {
          status={"publish"}
          bottomSection={bottomSection}
        />
-      </ViewWrapper>
+      </OS_Wrapper>

      {/* ========= Draft Drawer ========= */}
      <DrawerCustom
--- a/app/(application)/(user)/investment/[id]/(news)/[news]/index.tsx
+++ b/app/(application)/(user)/investment/[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 { IconTrash } from "@/components/_Icon/IconTrash";
@@ -70,7 +70,7 @@ export default function InvestmentNews() {
          ),
        }}
      />
-      <ViewWrapper>
+      <OS_Wrapper>
        <BaseBox>
          <StackCustom>
            {data && data?.imageId && (
@@ -82,7 +82,7 @@ export default function InvestmentNews() {
            <TextCustom>{(data && data?.deskripsi) || "-"}</TextCustom>
          </StackCustom>
        </BaseBox>
-      </ViewWrapper>
+      </OS_Wrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/investment/[id]/(news)/add-news.tsx
+++ b/app/(application)/(user)/investment/[id]/(news)/add-news.tsx
@@ -3,11 +3,11 @@ import {
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiInvestmentCreateNews } from "@/service/api-client/api-investment";
@@ -80,7 +80,10 @@ export default function InvestmentAddNews() {
  };

  return (
-    <ViewWrapper>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+    >
      <StackCustom gap={"xs"}>
        <InformationBox text="Pengunggahan foto ke aplikasi bersifat opsional dan tidak diwajibkan, Anda dapat menyimpan berita tanpa mengunggah foto." />
        <LandscapeFrameUploaded image={image?.uri} />
@@ -123,7 +126,6 @@ export default function InvestmentAddNews() {
          Simpan
        </ButtonCustom>
      </StackCustom>
-      <Spacing />
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx
+++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/failed.tsx
@@ -2,10 +2,10 @@
 import {
  BaseBox,
  Grid,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentFailed() {
  ];

  return (
-    <ViewWrapper>
+    <OS_Wrapper>
      <StackCustom>
        <BaseBox>
          <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentFailed() {
          </StackCustom>
        </BaseBox>
      </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/index.tsx
+++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/index.tsx
@@ -5,10 +5,10 @@ import {
  ButtonCustom,
  Divider,
  Grid,
+  OS_Wrapper,
  StackCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
 import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
@@ -99,9 +99,12 @@ export default function InvestmentInvest() {
  };

  return (
-    <>
-      <ViewWrapper footerComponent={buttonSubmit()}>
-        <BaseBox>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={buttonSubmit()}
+    >
+      <BaseBox>
          <StackCustom gap={"xs"}>
            <Grid>
              <Grid.Col span={6}>
@@ -165,7 +168,6 @@ export default function InvestmentInvest() {
            </Grid>
          </StackCustom>
        </BaseBox>
-      </ViewWrapper>
-    </>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx
+++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/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 InvestmentProcess() {
  return (
    <>
-      <ViewWrapper>
+      <OS_Wrapper>
        <BaseBox>
          <StackCustom>
            <TextCustom align="center" bold>
@@ -35,7 +35,7 @@ export default function InvestmentProcess() {
            </Grid.Col>
          </Grid>
        </BaseBox> */}
-      </ViewWrapper>
+      </OS_Wrapper>
    </>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx
+++ b/app/(application)/(user)/investment/[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";
@@ -86,7 +86,7 @@ export default function InvestmentSelectBank() {
  };

  return (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <OS_Wrapper footerComponent={buttonSubmit()}>
      <RadioGroup value={select} onChange={setSelect}>
        {_.isEmpty(listBank)
          ? []
@@ -96,6 +96,6 @@ export default function InvestmentSelectBank() {
              </BaseBox>
            ))}
      </RadioGroup>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx
+++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/success.tsx
@@ -2,10 +2,10 @@
 import {
  BaseBox,
  Grid,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
@@ -69,7 +69,7 @@ export default function InvestmentSuccess() {
  ];

  return (
-    <ViewWrapper>
+    <OS_Wrapper>
      <StackCustom>
        <BaseBox>
          <StackCustom>
@@ -110,6 +110,6 @@ export default function InvestmentSuccess() {
          </StackCustom>
        </BaseBox>
      </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/investment/[id]/[status]/detail.tsx
@@ -4,7 +4,7 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -123,14 +123,14 @@ export default function InvestmentDetailStatus() {
        }}
      />

-      <ViewWrapper>
+      <OS_Wrapper>
        <Invesment_DetailDataPublishSection
          status={status as string}
          data={data}
          bottomSection={bottomSection}
          buttonSection={buttonSection}
        />
-      </ViewWrapper>
+      </OS_Wrapper>

      {/* ========= Draft Drawer ========= */}
      <DrawerCustom
--- a/app/(application)/(user)/investment/[id]/edit-prospectus.tsx
+++ b/app/(application)/(user)/investment/[id]/edit-prospectus.tsx
@@ -7,10 +7,10 @@ import {
  CenterCustom,
  InformationBox,
  LoaderCustom,
+  OS_Wrapper,
  Spacing,
  StackCustom,
  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -116,7 +116,7 @@ export default function InvestmentEditProspectus() {
    </BoxButtonOnFooter>
  );
  return (
-    <ViewWrapper footerComponent={!loadingGet && buttonFooter}>
+    <OS_Wrapper footerComponent={!loadingGet && buttonFooter}>
      <StackCustom gap={"xs"}>
        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
        <Spacing />
@@ -153,6 +153,6 @@ export default function InvestmentEditProspectus() {
          Upload
        </ButtonCenteredOnly>
      </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/edit.tsx
+++ b/app/(application)/(user)/investment/[id]/edit.tsx
@@ -6,7 +6,7 @@ import {
  InformationBox,
  LandscapeFrameUploaded,
  LoaderCustom,
-  NewWrapper,
+  OS_Wrapper,
  SelectCustom,
  Spacing,
  StackCustom,
@@ -199,7 +199,9 @@ export default function InvestmentEdit() {
  };

  return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <BoxButtonOnFooter>
          <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
@@ -350,6 +352,6 @@ export default function InvestmentEdit() {

        <Spacing />
      </StackCustom>
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/index.tsx
+++ b/app/(application)/(user)/investment/[id]/index.tsx
@@ -4,7 +4,7 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
-  ViewWrapper,
+  OS_Wrapper,
 } from "@/components";
 import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
@@ -122,14 +122,14 @@ export default function InvestmentDetail() {
        }}
      />

-      <ViewWrapper>
+      <OS_Wrapper>
        <Invesment_DetailDataPublishSection
          status={"publish"}
          data={data}
          bottomSection={bottomSection}
          buttonSection={buttonSection}
        />
-      </ViewWrapper>
+      </OS_Wrapper>

      {/* ========= Draft Drawer ========= */}
      <DrawerCustom
--- a/app/(application)/(user)/investment/create.tsx
+++ b/app/(application)/(user)/investment/create.tsx
@@ -6,7 +6,7 @@ import {
  CenterCustom,
  InformationBox,
  LandscapeFrameUploaded,
-  NewWrapper,
+  OS_Wrapper,
  SelectCustom,
  Spacing,
  StackCustom,
@@ -185,7 +185,9 @@ export default function InvestmentCreate() {

  //   const [coba, setCoba] = useState("");
  return (
-    <NewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
      footerComponent={
        <BoxButtonOnFooter>
          <ButtonCustom
@@ -373,7 +375,6 @@ export default function InvestmentCreate() {

        <Spacing />
      </StackCustom>
-      {/* <Spacing height={50} /> */}
-    </NewWrapper>
+    </OS_Wrapper>
  );
 }