From db538b177a32838a6d736dbb83bc0853e2aaa7e1 Mon Sep 17 00:00:00 2001
From: Poonam Ghewande <poonam.ghewande@ayanworks.com>
Date: Wed, 15 Nov 2023 20:34:05 +0530
Subject: [PATCH] fix bugs contact modal

Signed-off-by: Poonam Ghewande <poonam.ghewande@ayanworks.com>
---
 app/screens/Connection.tsx          |  91 +++++++++++++++----------
 app/screens/ContactDetails.tsx      | 101 +++++++++++++++-------------
 app/screens/OrganizationDetails.tsx |  38 +++++++----
 3 files changed, 134 insertions(+), 96 deletions(-)

diff --git a/app/screens/Connection.tsx b/app/screens/Connection.tsx
index f97fad674..3d3eb7140 100644
--- a/app/screens/Connection.tsx
+++ b/app/screens/Connection.tsx
@@ -15,6 +15,7 @@ import { useNotifications } from '../hooks/notifications'
 import { Screens, TabStacks, DeliveryStackParams, Stacks } from '../types/navigators'
 import { useAppAgent } from '../utils/agent'
 import { testIdWithKey } from '../utils/testable'
+import { heightPercentageToDP } from 'react-native-responsive-screen'
 
 type ConnectionProps = StackScreenProps<DeliveryStackParams, Screens.Connection>
 
@@ -72,6 +73,11 @@ const Connection: React.FC<ConnectionProps> = ({ navigation, route }) => {
       marginTop: 'auto',
       margin: 20,
     },
+    controlsContainerHome: {
+      justifyContent: 'center',
+      alignSelf: 'center',
+      marginTop: heightPercentageToDP('50%'),
+    },
     delayMessageText: {
       textAlign: 'center',
       marginTop: 20,
@@ -151,7 +157,7 @@ const Connection: React.FC<ConnectionProps> = ({ navigation, route }) => {
       oobRecord &&
       (!goalCode || (!goalCode.startsWith('aries.vc.verify') && !goalCode.startsWith('aries.vc.issue')))
     ) {
-      navigation.navigate(Stacks.ConnectionStack, {
+      navigation.navigate(Stacks.ContactStack, {
         screen: Screens.ContactDetails,
         params: { connectionId: connectionId },
       })
@@ -196,44 +202,55 @@ const Connection: React.FC<ConnectionProps> = ({ navigation, route }) => {
   }, [notifications])
 
   return (
-    <Modal
-      visible={state.isVisible}
-      transparent={true}
-      animationType={'slide'}
-      onRequestClose={() => {
-        dispatch({ isVisible: false })
-      }}>
-      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
-        <ScrollView style={[styles.container]}>
-          <View style={[styles.messageContainer]}>
-            <Text
-              style={[TextTheme.modalHeadingThree, styles.messageText]}
-              testID={testIdWithKey('CredentialOnTheWay')}>
-              {t('Connection.JustAMoment')}
-            </Text>
-          </View>
+    <View>
+      <Modal
+        visible={state.isVisible}
+        transparent={true}
+        animationType={'slide'}
+        onRequestClose={() => {
+          dispatch({ isVisible: false })
+        }}>
+        <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+          <ScrollView style={[styles.container]}>
+            <View style={[styles.messageContainer]}>
+              <Text
+                style={[TextTheme.modalHeadingThree, styles.messageText]}
+                testID={testIdWithKey('CredentialOnTheWay')}>
+                {t('Connection.JustAMoment')}
+              </Text>
+            </View>
 
-          <View style={[styles.image]}>
-            <ConnectionLoading />
-          </View>
+            <View style={[styles.image]}>
+              <ConnectionLoading />
+            </View>
 
-          {state.shouldShowDelayMessage && (
-            <Text style={[TextTheme.modalNormal, styles.delayMessageText]} testID={testIdWithKey('TakingTooLong')}>
-              {t('Connection.TakingTooLong')}
-            </Text>
-          )}
-        </ScrollView>
-        <View style={[styles.controlsContainer]}>
-          <Button
-            title={t('Loading.BackToHome')}
-            accessibilityLabel={t('Loading.BackToHome')}
-            testID={testIdWithKey('BackToHome')}
-            onPress={onDismissModalTouched}
-            buttonType={ButtonType.ModalSecondary}
-          />
-        </View>
-      </SafeAreaView>
-    </Modal>
+            {state.shouldShowDelayMessage && (
+              <Text style={[TextTheme.modalNormal, styles.delayMessageText]} testID={testIdWithKey('TakingTooLong')}>
+                {t('Connection.TakingTooLong')}
+              </Text>
+            )}
+          </ScrollView>
+          <View style={[styles.controlsContainer]}>
+            <Button
+              title={t('Loading.BackToHome')}
+              accessibilityLabel={t('Loading.BackToHome')}
+              testID={testIdWithKey('BackToHome')}
+              onPress={onDismissModalTouched}
+              buttonType={ButtonType.ModalSecondary}
+            />
+          </View>
+        </SafeAreaView>
+      </Modal>
+      <View style={[styles.controlsContainerHome]}>
+        <Button
+          title={t('Loading.BackToHome')}
+          accessibilityLabel={t('Loading.BackToHome')}
+          testID={testIdWithKey('BackToHome')}
+          onPress={onDismissModalTouched}
+          buttonType={ButtonType.ModalSecondary}
+        />
+      </View>
+    </View>
   )
 }
 
diff --git a/app/screens/ContactDetails.tsx b/app/screens/ContactDetails.tsx
index 687ad1b33..baf095c04 100644
--- a/app/screens/ContactDetails.tsx
+++ b/app/screens/ContactDetails.tsx
@@ -1,12 +1,13 @@
 import { CredentialState, useConnectionById, useCredentialByState } from '@adeya/ssi'
 import { useNavigation } from '@react-navigation/core'
 import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { DeviceEventEmitter, BackHandler, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import { DeviceEventEmitter, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import Toast from 'react-native-toast-message'
 
+import Button, { ButtonType } from '../components/buttons/Button'
 import CommonRemoveModal from '../components/modals/CommonRemoveModal'
 import { ToastType } from '../components/toast/BaseToast'
 import { EventTypes } from '../constants'
@@ -40,6 +41,11 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
       padding: 20,
       backgroundColor: ColorPallet.brand.secondaryBackground,
     },
+    controlsContainer: {
+      marginTop: 'auto',
+      margin: 20,
+      justifyContent: 'center',
+    },
   })
 
   const handleOnRemove = () => {
@@ -57,12 +63,11 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
       }
 
       await agent.connections.deleteById(connection.id)
-
+      setIsRemoveModalDisplayed(false)
       navigation.navigate(Screens.Contacts)
 
       // FIXME: This delay is a hack so that the toast doesn't appear until the modal is dismissed
       await new Promise(resolve => setTimeout(resolve, 1000))
-
       Toast.show({
         type: ToastType.Success,
         text1: t('ContactDetails.ContactRemoved'),
@@ -72,17 +77,6 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
       DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
     }
   }
-
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-      navigation.navigate(Screens.Home as never)
-      return true
-    })
-
-    return () => {
-      backHandler.remove()
-    }
-  }, [])
   const handleCancelRemove = () => {
     setIsRemoveModalDisplayed(false)
   }
@@ -96,45 +90,60 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
   }
 
   const callOnRemove = useCallback(() => handleOnRemove(), [])
-  const callSubmitRemove = useCallback(() => handleSubmitRemove(), [])
+  const callSubmitRemove = useCallback(() => handleSubmitRemove(), [connection])
   const callCancelRemove = useCallback(() => handleCancelRemove(), [])
   const callGoToCredentials = useCallback(() => handleGoToCredentials(), [])
   const callCancelUnableToRemove = useCallback(() => handleCancelUnableRemove(), [])
 
   const contactLabel = useMemo(() => getConnectionName(connection) ?? '', [connection])
-
+  const onDismissModalTouched = () => {
+    navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
+  }
   return (
     <SafeAreaView style={{ flexGrow: 1 }} edges={['bottom', 'left', 'right']}>
-      <View style={styles.contentContainer}>
-        <Text style={{ ...TextTheme.headingThree }}>{contactLabel}</Text>
-        <Text style={{ ...TextTheme.normal, marginTop: 20 }}>
-          {t('ContactDetails.DateOfConnection', {
-            date: connection?.createdAt ? formatTime(connection.createdAt, { includeHour: true }) : '',
-          })}
-        </Text>
+      {connection && (
+        <View>
+          <View style={styles.contentContainer}>
+            <Text style={{ ...TextTheme.headingThree }}>{contactLabel}</Text>
+            <Text style={{ ...TextTheme.normal, marginTop: 20 }}>
+              {t('ContactDetails.DateOfConnection', {
+                date: connection?.createdAt ? formatTime(connection.createdAt, { includeHour: true }) : '',
+              })}
+            </Text>
+          </View>
+          <TouchableOpacity
+            onPress={callOnRemove}
+            accessibilityLabel={t('ContactDetails.RemoveContact')}
+            accessibilityRole={'button'}
+            testID={testIdWithKey('RemoveFromWallet')}
+            style={[styles.contentContainer, { marginTop: 10 }]}>
+            <Text style={{ ...TextTheme.normal, color: ColorPallet.semantic.error }}>
+              {t('ContactDetails.RemoveContact')}
+            </Text>
+          </TouchableOpacity>
+          <CommonRemoveModal
+            usage={ModalUsage.ContactRemove}
+            visible={isRemoveModalDisplayed}
+            onSubmit={callSubmitRemove}
+            onCancel={callCancelRemove}
+          />
+          <CommonRemoveModal
+            usage={ModalUsage.ContactRemoveWithCredentials}
+            visible={isCredentialsRemoveModalDisplayed}
+            onSubmit={callGoToCredentials}
+            onCancel={callCancelUnableToRemove}
+          />
+        </View>
+      )}
+      <View style={[styles.controlsContainer]}>
+        <Button
+          title={t('Loading.BackToHome')}
+          accessibilityLabel={t('Loading.BackToHome')}
+          testID={testIdWithKey('BackToHome')}
+          onPress={onDismissModalTouched}
+          buttonType={ButtonType.ModalSecondary}
+        />
       </View>
-      <TouchableOpacity
-        onPress={callOnRemove}
-        accessibilityLabel={t('ContactDetails.RemoveContact')}
-        accessibilityRole={'button'}
-        testID={testIdWithKey('RemoveFromWallet')}
-        style={[styles.contentContainer, { marginTop: 10 }]}>
-        <Text style={{ ...TextTheme.normal, color: ColorPallet.semantic.error }}>
-          {t('ContactDetails.RemoveContact')}
-        </Text>
-      </TouchableOpacity>
-      <CommonRemoveModal
-        usage={ModalUsage.ContactRemove}
-        visible={isRemoveModalDisplayed}
-        onSubmit={callSubmitRemove}
-        onCancel={callCancelRemove}
-      />
-      <CommonRemoveModal
-        usage={ModalUsage.ContactRemoveWithCredentials}
-        visible={isCredentialsRemoveModalDisplayed}
-        onSubmit={callGoToCredentials}
-        onCancel={callCancelUnableToRemove}
-      />
     </SafeAreaView>
   )
 }
diff --git a/app/screens/OrganizationDetails.tsx b/app/screens/OrganizationDetails.tsx
index 5f2085b43..14b0a247f 100644
--- a/app/screens/OrganizationDetails.tsx
+++ b/app/screens/OrganizationDetails.tsx
@@ -1,6 +1,6 @@
 import { useConnections } from '@adeya/ssi'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/core'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View, StyleSheet, Text, Image, ScrollView } from 'react-native'
 import { heightPercentageToDP as hp } from 'react-native-responsive-screen'
@@ -30,6 +30,8 @@ const OrganizationDetails: React.FC = () => {
   const { t } = useTranslation()
   const params = useRoute<RouteProp<Record<string, OrganizationDetailProps>, string>>().params
   const { organizationDetailData, credentialDetailData } = useOrganizationDetailData(params?.orgSlug)
+  const [invitationUrl, setinvitationUrl] = useState('')
+  const [disableConnect, setdisableConnect] = useState(false)
   const { records } = useConnections()
   const connections = records
 
@@ -175,25 +177,35 @@ const OrganizationDetails: React.FC = () => {
       }
     }
   }
+
+  useEffect(() => {
+    const [agentInvitations] = organizationDetailData.map(item => item?.agent_invitations)
+
+    if (!agentInvitations || agentInvitations.length === 0) {
+      return
+    }
+    let connectionInvitationUrl = ''
+    if (agentInvitations.length === 1) {
+      connectionInvitationUrl = agentInvitations[0]?.connectionInvitation
+      setinvitationUrl(connectionInvitationUrl)
+    } else if (agentInvitations.length > 1) {
+      connectionInvitationUrl = agentInvitations[agentInvitations.length - 1]?.connectionInvitation
+      setinvitationUrl(connectionInvitationUrl)
+    }
+  }, [organizationDetailData])
   const connectOrganization = async () => {
+    setdisableConnect(true)
     try {
-      const [agentInvitations] = organizationDetailData.map(item => item?.agent_invitations)
-
-      if (!agentInvitations || agentInvitations.length === 0) {
+      if (!invitationUrl) {
         Toast.show({
           type: ToastType.Error,
-          text1: 'No agent invitations available',
+          text1: 'No connection invitation available',
         })
+        setdisableConnect(false)
         return
       }
-      let connectionInvitationUrl = ''
-      if (agentInvitations.length === 1) {
-        connectionInvitationUrl = agentInvitations[0]?.connectionInvitation
-      } else if (agentInvitations.length > 1) {
-        connectionInvitationUrl = agentInvitations[agentInvitations.length - 1]?.connectionInvitation
-      }
 
-      await handleInvitation(connectionInvitationUrl)
+      await handleInvitation(invitationUrl)
     } catch (error) {
       Toast.show({
         type: ToastType.Error,
@@ -201,7 +213,6 @@ const OrganizationDetails: React.FC = () => {
       })
     }
   }
-
   return (
     <View style={styles.container}>
       <View style={styles.headerTextView}>
@@ -253,6 +264,7 @@ const OrganizationDetails: React.FC = () => {
             accessibilityLabel={'Connect'}
             testID={testIdWithKey('Connect')}
             buttonType={ButtonType.Primary}
+            disabled={disableConnect}
           />
         </View>
       )}