fix: confirm delete acont dialoge

audire/audire-landing/pages/contact-us.tsx

@@ -26,9 +26,16 @@ function ContactUs() {
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    console.log(formData);
+    const isFormValid = Object.values(formData).every(
+      (value) => value.trim() !== ''
+    );
 
-    setFormSubmitted(true);
+    if (isFormValid) {
+      console.log(formData);
+      setFormSubmitted(true);
+    } else {
+      alert('Please fill in all fields before submitting.');
+    }
   };
 
   return (

audire/audire-mobile-app/src/modules/profile/ConfirmDeleteAccountDialog.tsx

@@ -0,0 +1,75 @@
+import React, { ComponentProps, FC } from 'react';
+import { Linking } from 'react-native';
+import {
+  Heading,
+  Modal,
+  ModalBackdrop,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Text,
+  ModalFooter,
+  ButtonText,
+  Button,
+} from '@gluestack-ui/themed';
+
+type ConfirmDeleteAccountDialogProps = ComponentProps<typeof Modal> & {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const ConfirmDeleteAccountDialog: FC<ConfirmDeleteAccountDialogProps> = (
+  props
+) => {
+  const ref = React.useRef(null);
+
+  const handleDeleteAccount = () => {
+    // Open the link in the browser
+    Linking.openURL('https://audirelearning.com/contact-us');
+  };
+
+  return (
+    <Modal isOpen={props.isOpen} onClose={props.onClose} finalFocusRef={ref}>
+      <ModalBackdrop />
+      <ModalContent>
+        <ModalHeader>
+          <Heading size="lg" color="$red">
+            Delete your Account?
+          </Heading>
+          <ModalCloseButton />
+        </ModalHeader>
+        <ModalBody>
+          <Text>Are you sure want to Delete your Account?</Text>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            variant="outline"
+            size="sm"
+            action="secondary"
+            mr="$3"
+            onPress={() => {
+              props.onClose();
+            }}
+          >
+            <ButtonText>Cancel</ButtonText>
+          </Button>
+          <Button
+            size="sm"
+            action="negative"
+            borderWidth="$0"
+            onPress={() => {
+              props.onClose();
+
+              handleDeleteAccount();
+            }}
+          >
+            <ButtonText>Delete Account</ButtonText>
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmDeleteAccountDialog;

audire/audire-mobile-app/src/modules/profile/ProfileView.tsx

@@ -14,6 +14,8 @@ import {
 import { useActiveUser, useUpdateProfile } from '@learning-app/auth';
 import FooterView from '../common/FooterView';
 import { Icon, TrashIcon } from '@gluestack-ui/themed';
+import { TouchableOpacity } from 'react-native';
+import ConfirmDeleteAccountDialog from './ConfirmDeleteAccountDialog';
 
 const ProfileView = () => {
   const {
@@ -23,6 +25,7 @@ const ProfileView = () => {
   const { trigger, isMutating } = useUpdateProfile();
   const [newFirstName, setNewFirstName] = useState(firstName || '');
   const [newLastName, setNewLastName] = useState(lastName || '');
+  const [showModal, setShowModal] = useState(false);
   const handleSaveClick = () => {
     trigger({
       profileId,
@@ -44,7 +47,28 @@ const ProfileView = () => {
             {firstName}
           </AvatarFallbackText>
         </Avatar>
+        <Center>
+          <Button
+            onPress={() => {
+              setShowModal(true);
+            }}
+            size="xs"
+            variant="outline"
+            action="negative"
+            isDisabled={false}
+            isFocusVisible={false}
+          >
+            <ButtonText> Delete Account</ButtonText>
+            <Icon as={TrashIcon} m="$2" w="$4" h="$4" color="$red" />
+          </Button>
 
+          {showModal && (
+            <ConfirmDeleteAccountDialog
+              isOpen={showModal}
+              onClose={() => setShowModal(false)}
+            />
+          )}
+        </Center>
         <Center>
           <Text fontWeight="bold" color="black" fontSize="$2xl">
             {firstName}
@@ -124,21 +148,26 @@ const ProfileView = () => {
           <InputField />
         </Input>
       </Center>
+      <TouchableOpacity>
+        <Button
+          m="$10"
+          size="md"
+          variant="solid"
+          action="primary"
+          bg="#8D0C8A"
+          isDisabled={isMutating}
+          isFocusVisible={false}
+          onPress={handleSaveClick}
+        >
+          <ButtonText> save </ButtonText>
+        </Button>
+      </TouchableOpacity>
 
-      <Button
-        m="$10"
-        size="md"
-        variant="solid"
-        action="primary"
-        bg="#8D0C8A"
-        isDisabled={isMutating}
-        isFocusVisible={false}
-        onPress={handleSaveClick}
-      >
-        <ButtonText> save </ButtonText>
-      </Button>
-      <Center flex={1}>
+      <Center>
         <Button
+          onPress={() => {
+            setShowModal(true);
+          }}
           size="xs"
           variant="outline"
           action="negative"
@@ -148,7 +177,15 @@ const ProfileView = () => {
           <ButtonText> Delete Account</ButtonText>
           <Icon as={TrashIcon} m="$2" w="$4" h="$4" color="$red" />
         </Button>
+
+        {showModal && (
+          <ConfirmDeleteAccountDialog
+            isOpen={showModal}
+            onClose={() => setShowModal(false)}
+          />
+        )}
       </Center>
+
       <FooterView />
     </Box>
   );