Fix/remove contact (#160)

Co-authored-by: Sai Ranjit Tummalapalli <[email protected]> fix: close contact modal after deletion (#141) fix: import wallet failure scenario (#142) fix: scanning qrcode multiple times (#143) fix deep link issue (#147) fix: credential detail modal button container (#155) Signed-off-by: Sai Ranjit Tummalapalli <[email protected]>
credebl · Apr 16, 2024 · f73144e · f73144e
1 parent ed53f80
commit f73144e
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 6 deletions.
diff --git a/app/components/modals/CommonRemoveModal.tsx b/app/components/modals/CommonRemoveModal.tsx
@@ -133,6 +133,10 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, d
 
  const titleForConfirmButton = (): string => {
  switch (usage) {
+ case ModalUsage.ContactRemoveWithCredentialsOffer:
+ return t('ContactDetails.GoToCredentialsOffer')
+ case ModalUsage.ContactRemoveWithProofRequest:
+ return t('ContactDetails.GoToProofRequest')
  case ModalUsage.ContactRemove:
  return t('ContactDetails.RemoveContact')
  case ModalUsage.ContactRemoveWithCredentials:
@@ -146,6 +150,10 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, d
 
  const labelForConfirmButton = (): string => {
  switch (usage) {
+ case ModalUsage.ContactRemoveWithCredentialsOffer:
+ return t('ContactDetails.GoToCredentialsOffer')
+ case ModalUsage.ContactRemoveWithProofRequest:
+ return t('ContactDetails.GoToProofRequest')
  case ModalUsage.ContactRemove:
  return t('ContactDetails.RemoveContact')
  case ModalUsage.ContactRemoveWithCredentials:
@@ -160,6 +168,8 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, d
  const testIdForConfirmButton = (): string => {
  switch (usage) {
  case ModalUsage.ContactRemove:
+ case ModalUsage.ContactRemoveWithCredentialsOffer:
+ case ModalUsage.ContactRemoveWithProofRequest:
  case ModalUsage.CredentialRemove:
  return testIdWithKey('ConfirmRemoveButton')
  case ModalUsage.ContactRemoveWithCredentials:
@@ -175,6 +185,8 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, d
  const testIdForCancelButton = (): string => {
  switch (usage) {
  case ModalUsage.ContactRemove:
+ case ModalUsage.ContactRemoveWithCredentialsOffer:
+ case ModalUsage.ContactRemoveWithProofRequest:
  case ModalUsage.CredentialRemove:
  return testIdWithKey('CancelRemoveButton')
  case ModalUsage.ContactRemoveWithCredentials:
@@ -254,6 +266,28 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, d
  </View>
  </View>
  )
+ case ModalUsage.ContactRemoveWithCredentialsOffer:
+ return (
+ <View style={[{ marginBottom: 25 }]}>
+ <View style={[{ marginBottom: 25 }]}>
+ <Text style={[TextTheme.modalTitle]}>{t('ContactDetails.UnableToRemoveTitle')}</Text>
+ </View>
+ <View>
+ <Text style={[styles.bodyText]}>{t('ContactDetails.UnableToRemoveCaptionLabel')}</Text>
+ </View>
+ </View>
+ )
+ case ModalUsage.ContactRemoveWithProofRequest:
+ return (
+ <View style={[{ marginBottom: 25 }]}>
+ <View style={[{ marginBottom: 25 }]}>
+ <Text style={[TextTheme.modalTitle]}>{t('ContactDetails.UnableToRemoveTitle')}</Text>
+ </View>
+ <View>
+ <Text style={[styles.bodyText]}>{t('ContactDetails.UnableToRemoveCaptionRequestLabel')}</Text>
+ </View>
+ </View>
+ )
  case ModalUsage.CredentialOfferDecline:
  return (
  <View style={[{ marginBottom: 25 }]}>
@@ -321,7 +355,13 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, d
  onPress={onSubmit}
  disabled={disabled}
  buttonType={
- usage === ModalUsage.ContactRemoveWithCredentials ? ButtonType.ModalPrimary : ButtonType.ModalCritical
+ usage === ModalUsage.ContactRemoveWithCredentials
+ ? ButtonType.ModalPrimary
+ : ButtonType.ModalCritical && usage === ModalUsage.ContactRemoveWithCredentialsOffer
+ ? ButtonType.ModalPrimary
+ : ButtonType.ModalCritical && usage === ModalUsage.ContactRemoveWithProofRequest
+ ? ButtonType.ModalPrimary
+ : ButtonType.ModalCritical
  }
  />
  </View>

diff --git a/app/localization/en/index.ts b/app/localization/en/index.ts
@@ -271,7 +271,11 @@ const translation = {
  "RemoveCaption": "To add credentials, the issuing organization needs to be a Contact.",
  "UnableToRemoveTitle": "Unable to remove Contact",
  "UnableToRemoveCaption": "Unable to remove because there are credentials issued by this Contact in your wallet. Remove the credentials first then remove this Contact.",
+ "UnableToRemoveCaptionLabel": "Unable to remove because there are credential offer issued by this Contact in your wallet. Remove the credentials offer first then remove this Contact.",
+ "UnableToRemoveCaptionRequestLabel": "Unable to remove because there are proof request issued by this Contact in your wallet. Remove the Proof request first then remove this Contact.",
  "GoToCredentials": "Go to Credentials",
+ "GoToCredentialsOffer": "Go to CredentialsOffer",
+ "GoToProofRequest": "Go to ProofRequest",
  "RemoveContact": "Remove Contact",
  "ContactRemoved": "Contact removed",
  "RemoveContactMessageTop": "By removing this Contact you'll no longer be able to:",

diff --git a/app/screens/ContactDetails.tsx b/app/screens/ContactDetails.tsx
@@ -1,9 +1,11 @@
 import {
  CredentialState,
+ ProofState,
  deleteConnectionRecordById,
  deleteOobRecordById,
  useConnectionById,
  useCredentialByState,
+ useProofByState,
 } from '@adeya/ssi'
 import { useNavigation } from '@react-navigation/core'
 import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
@@ -34,6 +36,8 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
  const navigation = useNavigation<StackNavigationProp<ContactStackParams>>()
  const [isRemoveModalDisplayed, setIsRemoveModalDisplayed] = useState<boolean>(false)
  const [isCredentialsRemoveModalDisplayed, setIsCredentialsRemoveModalDisplayed] = useState<boolean>(false)
+ const [isCredentialsOfferRemoveModalDisplayed, setIsCredentialsOfferRemoveModalDisplayed] = useState<boolean>(false)
+ const [isProofRequestRemoveModalDisplayed, setIsProofRequestRemoveModalDisplayed] = useState<boolean>(false)
  const connection = useConnectionById(connectionId)
  // FIXME: This should be exposed via a react hook that allows to filter credentials by connection id
  const connectionCredentials = [
@@ -42,6 +46,12 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
  ].filter(credential => credential.connectionId === connection?.id)
  const { ColorPallet, TextTheme } = useTheme()
 
+ const connectionCredentialsOffer = [...useCredentialByState(CredentialState.OfferReceived)].filter(
+ credential => credential.connectionId === connection?.id,
+ )
+ const connectionProofRequest = [...useProofByState(ProofState.RequestReceived)].filter(
+ credential => credential.connectionId === connection?.id,
+ )
  const styles = StyleSheet.create({
  contentContainer: {
  padding: 20,
@@ -55,10 +65,19 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
  })
 
  const handleOnRemove = () => {
- if (connectionCredentials?.length) {
- setIsCredentialsRemoveModalDisplayed(true)
- } else {
- setIsRemoveModalDisplayed(true)
+ switch (true) {
+ case Boolean(connectionCredentialsOffer?.length):
+ setIsCredentialsOfferRemoveModalDisplayed(true)
+ break
+ case Boolean(connectionCredentials?.length):
+ setIsCredentialsRemoveModalDisplayed(true)
+ break
+ case Boolean(connectionProofRequest?.length):
+ setIsProofRequestRemoveModalDisplayed(true)
+ break
+ default:
+ setIsRemoveModalDisplayed(true)
+ break
  }
  }
 
@@ -97,16 +116,28 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
  const handleGoToCredentials = () => {
  navigation.getParent()?.navigate(TabStacks.CredentialStack, { screen: Screens.Credentials })
  }
-
+ const handleGoToCredentialsOffer = () => {
+ navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
+ }
  const handleCancelUnableRemove = () => {
  setIsCredentialsRemoveModalDisplayed(false)
  }
 
+ const handleOfferCancelUnableRemove = () => {
+ setIsCredentialsOfferRemoveModalDisplayed(false)
+ }
+ const handleProofRequestCancelUnableRemove = () => {
+ setIsProofRequestRemoveModalDisplayed(false)
+ }
+
  const callOnRemove = useCallback(() => handleOnRemove(), [])
  const callSubmitRemove = useCallback(() => handleSubmitRemove(), [connection])
  const callCancelRemove = useCallback(() => handleCancelRemove(), [])
  const callGoToCredentials = useCallback(() => handleGoToCredentials(), [])
+ const callGoToCredentialsOffer = useCallback(() => handleGoToCredentialsOffer(), [])
  const callCancelUnableToRemove = useCallback(() => handleCancelUnableRemove(), [])
+ const callCancelUnableToRemoveOffer = useCallback(() => handleOfferCancelUnableRemove(), [])
+ const callCancelUnableToRemoveProofRequest = useCallback(() => handleProofRequestCancelUnableRemove(), [])
 
  const contactLabel = useMemo(() => getConnectionName(connection) ?? '', [connection])
  const onDismissModalTouched = () => {
@@ -146,6 +177,18 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
  onSubmit={callGoToCredentials}
  onCancel={callCancelUnableToRemove}
  />
+ <CommonRemoveModal
+ usage={ModalUsage.ContactRemoveWithCredentialsOffer}
+ visible={isCredentialsOfferRemoveModalDisplayed}
+ onSubmit={callGoToCredentialsOffer}
+ onCancel={callCancelUnableToRemoveOffer}
+ />
+ <CommonRemoveModal
+ usage={ModalUsage.ContactRemoveWithProofRequest}
+ visible={isProofRequestRemoveModalDisplayed}
+ onSubmit={callGoToCredentialsOffer}
+ onCancel={callCancelUnableToRemoveProofRequest}
+ />
  </View>
  )}
  <View style={[styles.controlsContainer]}>

diff --git a/app/types/remove.ts b/app/types/remove.ts
@@ -5,4 +5,6 @@ export enum ModalUsage {
  CredentialOfferDecline,
  ProofRequestDecline,
  CustomNotificationDecline,
+ ContactRemoveWithCredentialsOffer,
+ ContactRemoveWithProofRequest,
 }