added logout btn

src/screens/InAppScreens/ProfileScreen/Profile/edit-personal-info.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ScrollView, View, Text } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { Formik } from 'formik';
 import * as yup from 'yup';
-import { useNavigation } from '@react-navigation/native';
+import { CommonActions, useNavigation } from '@react-navigation/native';
 import { useQueryClient } from '@tanstack/react-query';
 import { Image } from 'expo-image';
 
@@ -25,7 +25,8 @@ import {
   Input,
   PageWrapper,
   Button,
-  Loading
+  Loading,
+  WarningModal
 } from '../../../../components';
 import { InputDatePicker } from '../../../../components/Calendar/InputDatePicker';
 import { ModalFlatList } from '../../../../components/FlatList/modal-flatlist';
@@ -39,6 +40,9 @@ import XIcon from '../../../../../assets/icons/x(twitter).svg';
 import YoutubeIcon from '../../../../../assets/icons/youtube.svg';
 import GlobeIcon from '../../../../../assets/icons/bottom-navigation/globe.svg';
 import LinkIcon from '../../../../../assets/icons/link.svg';
+import { ButtonVariants } from 'src/types/components';
+import { NAVIGATION_PAGES } from 'src/types';
+import { useDeleteUserMutation } from '@api/app';
 
 const ProfileSchema = yup.object({
   username: yup.string().optional(),
@@ -58,7 +62,8 @@ const ProfileSchema = yup.object({
 });
 
 export const EditPersonalInfo = () => {
-  const token = storage.get('token', StoreType.STRING);
+  const token = storage.get('token', StoreType.STRING) as string;
+  const { mutate: deleteUser } = useDeleteUserMutation();
 
   const { mutate: updateProfile, data: updateResponse, reset } = usePostSetProfileMutation();
 
@@ -68,12 +73,46 @@ export const EditPersonalInfo = () => {
   const { data, error } = usePostGetProfileQuery(String(token), true);
 
   const regions = useGetRegionsWithFlagQuery(true);
+  const [modalInfo, setModalInfo] = useState({
+    visible: false,
+    type: 'confirm',
+    message: '',
+    action: () => {}
+  });
+
+  const openModal = (type: string, message: string, action: any) => {
+    setModalInfo({
+      visible: true,
+      type,
+      message,
+      action
+    });
+  };
+
+  const closeModal = () => {
+    setModalInfo({ ...modalInfo, visible: false });
+  };
 
   if (!data) return <Loading />;
 
   const originRegion = regions.data?.data.find((region) => region.id === data.homebase);
   const secondOrigin = regions.data?.data.find((region) => region.id === data.homebase2);
 
+  const handleLogout = () => {
+    storage.remove('token');
+    storage.remove('uid');
+    navigation.dispatch(
+      CommonActions.reset({
+        index: 1,
+        routes: [{ name: NAVIGATION_PAGES.WELCOME }]
+      })
+    );
+  };
+
+  const handleDeleteAccount = () => {
+    deleteUser({ token }, { onSuccess: handleLogout });
+  };
+
   return (
     <PageWrapper>
       <ScrollView showsVerticalScrollIndicator={false}>
@@ -282,14 +321,47 @@ export const EditPersonalInfo = () => {
                   onBlur={props.handleBlur('other')}
                   formikError={props.touched.other && props.errors.other}
                 />
-                <View style={{ marginTop: 15, marginBottom: 15 }}>
+                <View style={{ marginTop: 15, marginBottom: 15, gap: 8 }}>
                   <Button onPress={props.handleSubmit}>Save</Button>
+                  <Button
+                    variant={ButtonVariants.OPACITY}
+                    containerStyles={{ backgroundColor: Colors.WHITE, borderColor: Colors.RED }}
+                    textStyles={{ color: Colors.RED }}
+                    onPress={() =>
+                      openModal('confirm', 'Are you sure you want to logout?', handleLogout)
+                    }
+                  >
+                    Log out
+                  </Button>
+                  <Button
+                    variant={ButtonVariants.FILL}
+                    containerStyles={{ backgroundColor: Colors.RED }}
+                    onPress={() =>
+                      openModal(
+                        'confirm',
+                        'Are you sure you want to delete your account?',
+                        handleDeleteAccount
+                      )
+                    }
+                  >
+                    Delete account
+                  </Button>
                 </View>
               </View>
             )}
           </Formik>
         </KeyboardAwareScrollView>
       </ScrollView>
+      <WarningModal
+        isVisible={modalInfo.visible}
+        onClose={closeModal}
+        type={modalInfo.type}
+        message={modalInfo.message}
+        action={() => {
+          modalInfo.action();
+          closeModal();
+        }}
+      />
     </PageWrapper>
   );
 };