feat: added connection notification to credential offer and proof pre…

…sentations (openwallet-foundation#407) * Added connection notification to cred offer and presentaions * Tweaks to connection modal * Seperated PopupModal * added sonarcloud properties * Added scroll to delete modal * Change ConnectionNotification to ConnectionAlert Signed-off-by: wadeking98 <[email protected]>
didx-xyz · Aug 18, 2022 · 9d4c05b · 9d4c05b
1 parent 2b06559
commit 9d4c05b
Show file tree

Hide file tree

Showing 9 changed files with 440 additions and 4 deletions.
diff --git a/.sonarcloud.properties b/.sonarcloud.properties
@@ -0,0 +1,19 @@
+#
+#    SPDX-License-Identifier: Apache-2.0
+#
+
+# Path to sources
+sonar.sources=.
+sonar.exclusions=**/localization/**/index.ts
+#sonar.inclusions=
+
+# Path to tests
+#sonar.tests=
+#sonar.test.exclusions=
+#sonar.test.inclusions=
+
+# Source encoding
+#sonar.sourceEncoding=UTF-8
+
+# Exclusions for copy-paste detection
+#sonar.cpd.exclusions=
diff --git a/core/App/components/misc/ConnectionAlert.tsx b/core/App/components/misc/ConnectionAlert.tsx
@@ -0,0 +1,117 @@
+import { useNavigation } from '@react-navigation/core'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+import { useTheme } from '../../contexts/theme'
+import { RootStackParams, Screens, Stacks } from '../../types/navigators'
+import PopupModal from '../modals/PopupModal'
+
+import { InfoBoxType } from './InfoBox'
+import UnorderedList from './UnorderedList'
+
+interface ConnectionAlertProps {
+  connectionID?: string
+}
+
+const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionID }) => {
+  const { t } = useTranslation()
+  const { ListItems, ColorPallet, TextTheme } = useTheme()
+  const [infoCardVisible, setInfoCardVisible] = useState(false)
+
+  const settingsNavigation = useNavigation<StackNavigationProp<RootStackParams>>()
+
+  const styles = StyleSheet.create({
+    modalCenter: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      padding: 20,
+    },
+    notifyTextContainer: {
+      borderLeftColor: ColorPallet.brand.highlight,
+      borderLeftWidth: 10,
+      flex: 1,
+      paddingLeft: 10,
+      paddingVertical: 15,
+      marginVertical: 15,
+    },
+    fakeLink: {
+      ...TextTheme.normal,
+      ...ListItems.recordLink,
+      textDecorationLine: 'underline',
+    },
+    row: {
+      flexDirection: 'row',
+    },
+    notifyTitle: {
+      ...TextTheme.title,
+      marginBottom: 5,
+    },
+    notifyText: {
+      ...TextTheme.normal,
+      marginVertical: 5,
+    },
+    notifyTextList: {
+      marginVertical: 6,
+    },
+    informationIcon: {
+      color: ColorPallet.brand.link,
+      marginLeft: 10,
+    },
+  })
+
+  const toggleInfoCard = () => setInfoCardVisible(!infoCardVisible)
+
+  const navigateToSettings = () => {
+    toggleInfoCard()
+    settingsNavigation.navigate(Stacks.SettingStack, { screen: Screens.Settings })
+  }
+
+  return (
+    <View style={styles.notifyTextContainer}>
+      <View style={styles.row}>
+        <Text style={styles.notifyTitle}>{t('ConnectionAlert.AddedContacts')}</Text>
+        <Icon name={'information-outline'} size={30} style={styles.informationIcon} onPress={toggleInfoCard} />
+      </View>
+      {infoCardVisible && (
+        <PopupModal
+          notificationType={InfoBoxType.Info}
+          title={t('ConnectionAlert.WhatAreContacts')}
+          bodyContent={
+            <View>
+              <Text style={styles.notifyText}>{t('ConnectionAlert.PopupIntro')}</Text>
+              <UnorderedList
+                UnorderedListItems={[
+                  t('ConnectionAlert.PopupPoint1'),
+                  t('ConnectionAlert.PopupPoint2'),
+                  t('ConnectionAlert.PopupPoint3'),
+                ]}
+              />
+              <Text style={styles.notifyText}>
+                {t('ConnectionAlert.SettingsInstruction')}
+                <Text style={styles.fakeLink} onPress={navigateToSettings}>
+                  {t('ConnectionAlert.SettingsLink')}
+                </Text>
+                .
+              </Text>
+              <Text style={styles.notifyText}>{t('ConnectionAlert.PrivacyMessage')}</Text>
+            </View>
+          }
+          onCallToActionLabel={t('ConnectionAlert.PopupExit')}
+          onCallToActionPressed={toggleInfoCard}
+        />
+      )}
+      <Text style={styles.notifyText}>
+        {t('ConnectionAlert.NotificationBodyUpper') +
+          (connectionID || t('ContactDetails.AContact').toLowerCase()) +
+          t('ConnectionAlert.NotificationBodyLower')}
+      </Text>
+    </View>
+  )
+}
+
+export default ConnectionAlert
diff --git a/core/App/components/misc/InfoBox.tsx b/core/App/components/misc/InfoBox.tsx
@@ -22,7 +22,8 @@ export enum InfoBoxType {
 interface BifoldErrorProps {
   notificationType: InfoBoxType
   title: string
-  description: string
+  description?: string
+  bodyContent?: Element
   message?: string
   onCallToActionPressed?: GenericFn
   onCallToActionLabel?: string
@@ -32,6 +33,7 @@ const InfoBox: React.FC<BifoldErrorProps> = ({
   notificationType,
   title,
   description,
+  bodyContent,
   message,
   onCallToActionPressed,
   onCallToActionLabel,
@@ -177,9 +179,12 @@ const InfoBox: React.FC<BifoldErrorProps> = ({
         </Text>
       </View>
       <View style={styles.bodyContainer}>
-        <Text style={styles.bodyText} testID={testIdWithKey('BodyText')}>
-          {showDetails ? message : description}
-        </Text>
+        {bodyContent}
+        {(description || message) && (
+          <Text style={styles.bodyText} testID={testIdWithKey('BodyText')}>
+            {showDetails ? message : description}
+          </Text>
+        )}
         {message && !showDetails && (
           <TouchableOpacity
             accessibilityLabel={t('Global.ShowDetails')}

diff --git a/core/App/components/modals/PopupModal.tsx b/core/App/components/modals/PopupModal.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { Modal, StyleSheet, View } from 'react-native'
+
+import { GenericFn } from '../../types/fn'
+import InfoBox, { InfoBoxType } from '../misc/InfoBox'
+
+interface PopupModalProps {
+  notificationType: InfoBoxType
+  title: string
+  bodyContent?: Element
+  onCallToActionPressed?: GenericFn
+  onCallToActionLabel: string
+}
+
+const PopupModal: React.FC<PopupModalProps> = ({
+  title,
+  bodyContent,
+  onCallToActionPressed,
+  notificationType,
+  onCallToActionLabel,
+}) => {
+  const styles = StyleSheet.create({
+    modalCenter: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      padding: 20,
+    },
+  })
+
+  return (
+    <Modal transparent>
+      <View style={styles.modalCenter}>
+        <InfoBox
+          notificationType={notificationType}
+          title={title}
+          bodyContent={bodyContent}
+          onCallToActionLabel={onCallToActionLabel}
+          onCallToActionPressed={onCallToActionPressed}
+        />
+      </View>
+    </Modal>
+  )
+}
+
+export default PopupModal
diff --git a/core/App/localization/en/index.ts b/core/App/localization/en/index.ts
@@ -162,6 +162,20 @@ const translation = {
     "JustAMoment": "Just a moment while we make a secure connection...",
     "TakingTooLong": "This is taking longer than usual. You can return to home or continue waiting."
   },
+  "ConnectionAlert": {
+    "AddedContacts": "Added to Contacts",
+    "WhatAreContacts": "What are Contacts?",
+    "NotificationBodyUpper": "You can find ",
+    "NotificationBodyLower": " in your Contacts. Manage your Contacts in Settings",
+    "PopupIntro": "Adding organizations as a contact will allow you to:",
+    "PopupPoint1": "Get updates to credentials issued by this organization",
+    "PopupPoint2": "Get offered new credentials",
+    "PopupPoint3": "Fast-track proof requests",
+    "SettingsLink": "Settings",
+    "SettingsInstruction": "You can always remove contacts at anytime in ",
+    "PrivacyMessage": "Use of your credentials is never shared with your contacts.",
+    "PopupExit": "Got it"
+},
   "CredentialOffer": {
     "CredentialOffer": "Credential Offer",
     "ThisIsTakingLongerThanExpected": "This is taking Longer than expected. Check back later for your new credential.",

diff --git a/core/App/localization/fr/index.ts b/core/App/localization/fr/index.ts
@@ -154,6 +154,20 @@ const translation = {
         "JustAMoment": "Veuillez patienter pendant que nous établissons une connexion sécurisée...",
         "TakingTooLong": "Cela prend plus de temps que d'habitude. Vous pouvez retourner à l'accueil ou continuer à attendre."
     },
+    "ConnectionAlert": {
+        "AddedContacts": "Added to Contacts",
+        "WhatAreContacts": "What are Contacts?",
+        "NotificationBodyUpper": "You can find ",
+        "NotificationBodyLower": " in your Contacts. Manage your Contacts in Settings",
+        "PopupIntro": "Adding organizations as a contact will allow you to:",
+        "PopupPoint1": "Get updates to credentials issued by this organization",
+        "PopupPoint2": "Get offered new credentials",
+        "PopupPoint3": "Fast-track proof requests",
+        "SettingsLink": "Settings",
+        "SettingsInstruction": "You can always remove contacts at anytime in ",
+        "PrivacyMessage": "Use of your credentials is never shared with your contacts.",
+        "PopupExit": "Got it"
+    },
     "CredentialOffer": {
         "CredentialOffer": "Offre de justificatif",
         "ThisIsTakingLongerThanExpected": "Cela prend plus de temps que prévu. Revenez plus tard pour votre nouveau justificatif.",

diff --git a/core/App/screens/CredentialOffer.tsx b/core/App/screens/CredentialOffer.tsx
@@ -8,6 +8,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 
 import RecordLoading from '../components/animated/RecordLoading'
 import Button, { ButtonType } from '../components/buttons/Button'
+import ConnectionAlert from '../components/misc/ConnectionAlert'
 import CredentialCard from '../components/misc/CredentialCard'
 import Record from '../components/record/Record'
 import { DispatchAction } from '../contexts/reducers/store'
@@ -159,6 +160,7 @@ const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, route })
             }}
           >
             {loading ? <RecordLoading /> : null}
+            <ConnectionAlert connectionID={credentialConnectionLabel} />
             <View style={styles.footerButton}>
               <Button
                 title={t('Global.Accept')}

diff --git a/core/App/screens/ProofRequest.tsx b/core/App/screens/ProofRequest.tsx
@@ -11,6 +11,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons'
 
 import RecordLoading from '../components/animated/RecordLoading'
 import Button, { ButtonType } from '../components/buttons/Button'
+import ConnectionAlert from '../components/misc/ConnectionAlert'
 import Record from '../components/record/Record'
 import RecordField from '../components/record/RecordField'
 import { DispatchAction } from '../contexts/reducers/store'
@@ -253,6 +254,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, route }) => {
             }}
           >
             {loading ? <RecordLoading /> : null}
+            {proofConnectionLabel && <ConnectionAlert connectionID={proofConnectionLabel} />}
             <View style={styles.footerButton}>
               <Button
                 title={t('Global.Share')}