Add:

-  app/(application)/(user)/delete-account.tsx
-  assets/images/constants/logo-hipmi_back.png

Fix:
- app/(application)/(user)/_layout.tsx
- assets/images/constants/logo-hipmi.png
- components/Grid/GridCustom.tsx
- screens/Profile/ListPage.tsx
- screens/Profile/menuDrawerSection.tsx
- service/api-client/api-user.ts

### No Issue

app/(application)/(user)/_layout.tsx

@@ -10,6 +10,13 @@ export default function UserLayout() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
+        <Stack.Screen
+          name="delete-account"
+          options={{
+            title: "Hapus Akun",
+            headerLeft: () => <BackButton />,
+          }}
+        />
         <Stack.Screen
           name="waiting-room"
           options={{

app/(application)/(user)/delete-account.tsx

@@ -0,0 +1,85 @@
+import {
+  AlertDefaultSystem,
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDeleteUser } from "@/service/api-client/api-user";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router/build/hooks";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function DeleteAccount() {
+  const { token, logout, user } = useAuth();
+  const { phone } = useLocalSearchParams();
+  const [text, setText] = useState("");
+
+  const deleteAccount = async () => {
+    if (text !== "Delete Account") {
+      return Toast.show({
+        type: "error",
+        text1: "Ketik 'Delete Account' untuk menghapus akun",
+      });
+    }
+
+    AlertDefaultSystem({
+      title: "Apakah anda yakin ingin menghapus akun ini?",
+      message:
+        "Semua data yang pernah anda buat akan terhapus secara permanen !",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: async () => {
+        const response = await apiDeleteUser({ id: user?.id as string });
+        console.log("RESPONSE >> ", response);
+        logout();
+      },
+    });
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <BaseBox>
+            <StackCustom>
+              <CenterCustom>
+                <Image
+                  source={require("@/assets/images/constants/logo-hipmi.png")}
+                  style={{
+                    width: 150,
+                    height: 150,
+                  }}
+                />
+              </CenterCustom>
+              <TextCustom align="center">
+                Anda akan menghapus akun dengan nomor +{phone}
+              </TextCustom>
+              <TextCustom align="center">
+                Ketik 'Delete Account' untuk menghapus akun
+              </TextCustom>
+              <TextInputCustom
+                value={text}
+                onChangeText={setText}
+                placeholder="Ketik 'Delete Account'"
+              />
+
+              <ButtonCustom
+                backgroundColor="red"
+                textColor="white"
+                onPress={deleteAccount}
+              >
+                Submit
+              </ButtonCustom>
+            </StackCustom>
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

components/Grid/GridCustom.tsx

@@ -109,6 +109,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "flex-start",
-    marginInline: 0.1
+    // marginInline: 0.1
+    margin: 0.1
   },
 });

screens/Profile/ListPage.tsx

@@ -84,7 +84,7 @@ export const drawerItemsProfile = ({
       ),
       label: "Hapus Akun",
       color: MainColor.red,
-      path: `https://cld-dkr-staging-hipmi.wibudev.com/delete-account?phone=${user?.nomor}`,
+      path: `/(application)/(user)/delete-account?phone=${user?.nomor}`,
       value: "delete-account",
     },
     {
@@ -161,7 +161,7 @@ export const drawerItemsProfile = ({
       ),
       label: "Hapus Akun",
       color: MainColor.red,
-      path: `https://cld-dkr-staging-hipmi.wibudev.com/delete-account?phone=${user?.nomor}`,
+      path: `/(application)/(user)/delete-account?phone=${user?.nomor}`,
       value: "delete-account",
     },
     {

screens/Profile/menuDrawerSection.tsx

@@ -2,6 +2,7 @@ import { AlertDefaultSystem } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
 import { useAuth } from "@/hooks/use-auth";
+import { apiDeleteUser } from "@/service/api-client/api-user";
 import { openBrowser } from "@/utils/openBrower";
 import { router } from "expo-router";
 
@@ -14,6 +15,8 @@ export default function Profile_MenuDrawerSection({
   setIsDrawerOpen: (value: boolean) => void;
   logout: () => Promise<void>;
 }) {
+  const { user } = useAuth();
+
   const handlePress = (item: IMenuDrawerItem) => {
     // console.log("ITEM >> ", item);
     if (item.value === "logout") {
@@ -32,7 +35,20 @@ export default function Profile_MenuDrawerSection({
       });
     } else if (item.value === "delete-account") {
       console.log("PATH >> ", item.path);
-      openBrowser(item.path as any);
+      // openBrowser(item.path as any);
+      AlertDefaultSystem({
+        title: "Apakah anda yakin ingin menghapus akun ini?",
+        message:
+          "Semua data yang pernah anda buat akan terhapus secara permanen!",
+        textLeft: "Batal",
+        textRight: "Ya",
+        onPressRight: async () => {
+          router.push(item.path as any);
+
+          setIsDrawerOpen(false);
+        },
+        onPressLeft: () => setIsDrawerOpen(false),
+      });
     } else {
       console.log("PATH >> ", item.path);
       router.push(item.path as any);

service/api-client/api-user.ts

@@ -10,3 +10,7 @@ export async function apiAllUser({ search }: { search: string }) {
   return response.data;
 }
 
+export async function apiDeleteUser({id}:{id: string}) {
+  const response = await apiConfig.delete(`/mobile/user/${id}`);
+  return response.data;
+}