@bifold/core 1.0.0

package/src/screens/CredentialOffer.tsx

@@ -0,0 +1,334 @@
+import { AnonCredsCredentialMetadataKey } from '@credo-ts/anoncreds'
+import { CredentialPreviewAttribute } from '@credo-ts/core'
+import { useCredentialById } from '@credo-ts/react-hooks'
+import { BrandingOverlay, MetaOverlay } from '@bifold/oca'
+import { Attribute, CredentialOverlay } from '@bifold/oca/build/legacy'
+import { useIsFocused } from '@react-navigation/native'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { DeviceEventEmitter, StyleSheet, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import Button, { ButtonType } from '../components/buttons/Button'
+import ConnectionImage from '../components/misc/ConnectionImage'
+import CredentialCard from '../components/misc/CredentialCard'
+import CommonRemoveModal from '../components/modals/CommonRemoveModal'
+import Record from '../components/record/Record'
+import { EventTypes } from '../constants'
+import { TOKENS, useServices } from '../container-api'
+import { useAnimatedComponents } from '../contexts/animated-components'
+import { useNetwork } from '../contexts/network'
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+import { useTheme } from '../contexts/theme'
+import { useTour } from '../contexts/tour/tour-context'
+import { useOutOfBandByConnectionId } from '../hooks/connections'
+import { HistoryCardType, HistoryRecord } from '../modules/history/types'
+import { BifoldError } from '../types/error'
+import { Screens, TabStacks } from '../types/navigators'
+import { ModalUsage } from '../types/remove'
+import { useAppAgent } from '../utils/agent'
+import { parseCredDefFromId } from '../utils/cred-def'
+import { getCredentialIdentifiers, isValidAnonCredsCredential } from '../utils/credential'
+import { useCredentialConnectionLabel } from '../utils/helpers'
+import { buildFieldsFromAnonCredsCredential } from '../utils/oca'
+import { testIdWithKey } from '../utils/testable'
+
+import CredentialOfferAccept from './CredentialOfferAccept'
+import { BaseTourID } from '../types/tour'
+import { ThemedText } from '../components/texts/ThemedText'
+
+type CredentialOfferProps = {
+  navigation: any
+  credentialId: string
+}
+
+const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentialId }) => {
+  const { agent } = useAppAgent()
+  const { t, i18n } = useTranslation()
+  const { ColorPallet } = useTheme()
+  const { RecordLoading } = useAnimatedComponents()
+  const { assertNetworkConnected } = useNetwork()
+  const [
+    bundleResolver,
+    { enableTours: enableToursConfig },
+    logger,
+    historyManagerCurried,
+    historyEnabled,
+    historyEventsLogger,
+  ] = useServices([
+    TOKENS.UTIL_OCA_RESOLVER,
+    TOKENS.CONFIG,
+    TOKENS.UTIL_LOGGER,
+    TOKENS.FN_LOAD_HISTORY,
+    TOKENS.HISTORY_ENABLED,
+    TOKENS.HISTORY_EVENTS_LOGGER,
+  ])
+  const [loading, setLoading] = useState<boolean>(true)
+  const [buttonsVisible, setButtonsVisible] = useState(true)
+  const [acceptModalVisible, setAcceptModalVisible] = useState(false)
+  const [declineModalVisible, setDeclineModalVisible] = useState(false)
+  const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({ presentationFields: [] })
+  const credential = useCredentialById(credentialId)
+  const credentialConnectionLabel = useCredentialConnectionLabel(credential)
+  const [store, dispatch] = useStore()
+  const { start } = useTour()
+  const screenIsFocused = useIsFocused()
+  const goalCode = useOutOfBandByConnectionId(credential?.connectionId ?? '')?.outOfBandInvitation?.goalCode
+  const [ConnectionAlert] = useServices([TOKENS.COMPONENT_CONNECTION_ALERT])
+
+  const styles = StyleSheet.create({
+    headerTextContainer: {
+      paddingHorizontal: 25,
+      paddingVertical: 16,
+    },
+    headerText: {
+      flexShrink: 1,
+    },
+    footerButton: {
+      paddingTop: 10,
+    },
+  })
+
+  useEffect(() => {
+    const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenCredentialOfferTour
+    if (shouldShowTour && screenIsFocused) {
+      start(BaseTourID.CredentialOfferTour)
+      dispatch({
+        type: DispatchAction.UPDATE_SEEN_CREDENTIAL_OFFER_TOUR,
+        payload: [true],
+      })
+    }
+  }, [
+    enableToursConfig,
+    store.tours.enableTours,
+    store.tours.seenCredentialOfferTour,
+    screenIsFocused,
+    start,
+    dispatch,
+  ])
+
+  useEffect(() => {
+    if (!agent || !credential) {
+      DeviceEventEmitter.emit(
+        EventTypes.ERROR_ADDED,
+        new BifoldError(t('Error.Title1035'), t('Error.Message1035'), t('CredentialOffer.CredentialNotFound'), 1035)
+      )
+    }
+  }, [agent, credential, t])
+
+  useEffect(() => {
+    if (!(credential && isValidAnonCredsCredential(credential) && agent)) {
+      return
+    }
+
+    const updateCredentialPreview = async () => {
+      const { ...formatData } = await agent.credentials.getFormatData(credential.id)
+      const { offer, offerAttributes } = formatData
+      const offerData = offer?.anoncreds ?? offer?.indy
+
+      if (offerData) {
+        credential.metadata.add(AnonCredsCredentialMetadataKey, {
+          schemaId: offerData.schema_id,
+          credentialDefinitionId: offerData.cred_def_id,
+        })
+      }
+
+      if (offerAttributes) {
+        credential.credentialAttributes = [...offerAttributes.map((item) => new CredentialPreviewAttribute(item))]
+      }
+    }
+
+    const resolvePresentationFields = async () => {
+      const identifiers = getCredentialIdentifiers(credential)
+      const attributes = buildFieldsFromAnonCredsCredential(credential)
+      const bundle = await bundleResolver.resolveAllBundles({ identifiers, attributes, language: i18n.language })
+      const fields = bundle?.presentationFields ?? []
+      const metaOverlay = bundle?.metaOverlay ?? {}
+
+      return { fields, metaOverlay }
+    }
+
+    /**
+     * FIXME: Formatted data needs to be added to the record in Credo extensions
+     * For now the order here matters. The credential preview must be updated to
+     * add attributes (since these are not available in the offer).
+     * Once the credential is updated the presentation fields can be correctly resolved
+     */
+    setLoading(true)
+    updateCredentialPreview()
+      .then(() => resolvePresentationFields())
+      .then(({ fields, metaOverlay }) => {
+        setOverlay({
+          metaOverlay: metaOverlay as MetaOverlay,
+          presentationFields: (fields as Attribute[]).filter((field) => field.value),
+        })
+        setLoading(false)
+      })
+  }, [credential, agent, bundleResolver, i18n.language])
+
+  const toggleDeclineModalVisible = useCallback(() => setDeclineModalVisible((prev) => !prev), [])
+
+  const logHistoryRecord = useCallback(
+    (type: HistoryCardType) => {
+      try {
+        if (!(agent && historyEnabled)) {
+          logger.trace(
+            `[${CredentialOffer.name}]:[logHistoryRecord] Skipping history log, either history function disabled or agent undefined!`
+          )
+          return
+        }
+        const historyManager = historyManagerCurried(agent)
+
+        if (!credential) {
+          logger.error(`[${CredentialOffer.name}]:[logHistoryRecord] Cannot save history, credential undefined!`)
+          return
+        }
+        const ids = getCredentialIdentifiers(credential)
+        const name = overlay.metaOverlay?.name ?? parseCredDefFromId(ids.credentialDefinitionId, ids.schemaId)
+
+        /** Save history record for card accepted */
+        const recordData: HistoryRecord = {
+          type: type,
+          message: name,
+          createdAt: credential?.createdAt,
+          correspondenceId: credentialId,
+          correspondenceName: credentialConnectionLabel,
+        }
+        historyManager.saveHistory(recordData)
+      } catch (err: unknown) {
+        logger.error(`[${CredentialOffer.name}]:[logHistoryRecord] Error saving history: ${err}`)
+      }
+    },
+    [agent, historyEnabled, logger, historyManagerCurried, credential, credentialId, credentialConnectionLabel, overlay]
+  )
+
+  const handleAcceptTouched = useCallback(async () => {
+    try {
+      if (!(agent && credential && assertNetworkConnected())) {
+        return
+      }
+
+      setAcceptModalVisible(true)
+
+      await agent.credentials.acceptOffer({ credentialRecordId: credential.id })
+      if (historyEventsLogger.logAttestationAccepted) {
+        const type = HistoryCardType.CardAccepted
+        logHistoryRecord(type)
+      }
+    } catch (err: unknown) {
+      setButtonsVisible(true)
+      const error = new BifoldError(t('Error.Title1024'), t('Error.Message1024'), (err as Error)?.message ?? err, 1024)
+      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
+    }
+  }, [agent, credential, assertNetworkConnected, logHistoryRecord, t, historyEventsLogger.logAttestationAccepted])
+
+  const handleDeclineTouched = useCallback(async () => {
+    try {
+      if (agent && credential) {
+        const connectionId = credential.connectionId ?? ''
+        const connection = await agent.connections.findById(connectionId)
+
+        await agent.credentials.declineOffer(credential.id)
+
+        if (connection) {
+          await agent.credentials.sendProblemReport({
+            credentialRecordId: credential.id,
+            description: t('CredentialOffer.Declined'),
+          })
+        }
+      }
+
+      toggleDeclineModalVisible()
+      if (historyEventsLogger.logAttestationRefused) {
+        const type = HistoryCardType.CardDeclined
+        logHistoryRecord(type)
+      }
+
+      navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
+    } catch (err: unknown) {
+      const error = new BifoldError(t('Error.Title1025'), t('Error.Message1025'), (err as Error)?.message ?? err, 1025)
+      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
+    }
+  }, [
+    agent,
+    credential,
+    t,
+    toggleDeclineModalVisible,
+    navigation,
+    logHistoryRecord,
+    historyEventsLogger.logAttestationRefused,
+  ])
+
+  const header = () => {
+    return (
+      <>
+        <ConnectionImage connectionId={credential?.connectionId} />
+        <View style={styles.headerTextContainer}>
+          <ThemedText style={styles.headerText} testID={testIdWithKey('HeaderText')}>
+            <ThemedText>{credentialConnectionLabel || t('ContactDetails.AContact')}</ThemedText>{' '}
+            {t('CredentialOffer.IsOfferingYouACredential')}
+          </ThemedText>
+        </View>
+        {!loading && credential && (
+          <View style={{ marginHorizontal: 15, marginBottom: 16 }}>
+            <CredentialCard credential={credential} />
+          </View>
+        )}
+      </>
+    )
+  }
+
+  const footer = () => {
+    return (
+      <View
+        style={{
+          paddingHorizontal: 25,
+          paddingVertical: 16,
+          paddingBottom: 26,
+          backgroundColor: ColorPallet.brand.secondaryBackground,
+        }}
+      >
+        {loading ? <RecordLoading /> : null}
+        {credentialConnectionLabel && goalCode === 'aries.vc.issue' && (
+          <ConnectionAlert connectionID={credentialConnectionLabel} />
+        )}
+        <View style={styles.footerButton}>
+          <Button
+            title={t('Global.Accept')}
+            accessibilityLabel={t('Global.Accept')}
+            testID={testIdWithKey('AcceptCredentialOffer')}
+            buttonType={ButtonType.Primary}
+            onPress={handleAcceptTouched}
+            disabled={!buttonsVisible}
+          />
+        </View>
+        <View style={styles.footerButton}>
+          <Button
+            title={t('Global.Decline')}
+            accessibilityLabel={t('Global.Decline')}
+            testID={testIdWithKey('DeclineCredentialOffer')}
+            buttonType={ButtonType.Secondary}
+            onPress={toggleDeclineModalVisible}
+            disabled={!buttonsVisible}
+          />
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <SafeAreaView style={{ flexGrow: 1 }} edges={['bottom', 'left', 'right']}>
+      <Record fields={overlay.presentationFields || []} header={header} footer={footer} />
+      <CredentialOfferAccept visible={acceptModalVisible} credentialId={credentialId} />
+      <CommonRemoveModal
+        usage={ModalUsage.CredentialOfferDecline}
+        visible={declineModalVisible}
+        onSubmit={handleDeclineTouched}
+        onCancel={toggleDeclineModalVisible}
+      />
+    </SafeAreaView>
+  )
+}
+
+export default CredentialOffer

package/src/screens/CredentialOfferAccept.tsx

@@ -0,0 +1,189 @@
+import { CredentialState } from '@credo-ts/core'
+import { useCredentialById } from '@credo-ts/react-hooks'
+import { useNavigation } from '@react-navigation/native'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AccessibilityInfo, ScrollView, StyleSheet, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import Button, { ButtonType } from '../components/buttons/Button'
+import SafeAreaModal from '../components/modals/SafeAreaModal'
+import { useAnimatedComponents } from '../contexts/animated-components'
+import { useTheme } from '../contexts/theme'
+import { Screens, TabStacks } from '../types/navigators'
+import { testIdWithKey } from '../utils/testable'
+import { TOKENS, useServices } from '../container-api'
+import { ThemedText } from '../components/texts/ThemedText'
+
+enum DeliveryStatus {
+  Pending,
+  Completed,
+  Declined,
+}
+
+export interface CredentialOfferAcceptProps {
+  visible: boolean
+  credentialId: string
+  confirmationOnly?: boolean
+}
+
+const CredentialOfferAccept: React.FC<CredentialOfferAcceptProps> = ({ visible, credentialId, confirmationOnly }) => {
+  const { t } = useTranslation()
+  const [shouldShowDelayMessage, setShouldShowDelayMessage] = useState<boolean>(false)
+  const [credentialDeliveryStatus, setCredentialDeliveryStatus] = useState<DeliveryStatus>(DeliveryStatus.Pending)
+  const [timerDidFire, setTimerDidFire] = useState<boolean>(false)
+  const [timer, setTimer] = useState<NodeJS.Timeout>()
+  const credential = useCredentialById(credentialId)
+  const navigation = useNavigation()
+  const { ListItems } = useTheme()
+  const { CredentialAdded, CredentialPending } = useAnimatedComponents()
+  const [{ connectionTimerDelay }] = useServices([TOKENS.CONFIG])
+  const connTimerDelay = connectionTimerDelay ?? 10000 // in ms
+  const styles = StyleSheet.create({
+    container: {
+      ...ListItems.credentialOfferBackground,
+      height: '100%',
+      padding: 20,
+    },
+    image: {
+      marginTop: 20,
+    },
+    messageContainer: {
+      alignItems: 'center',
+    },
+    messageText: {
+      textAlign: 'center',
+      marginTop: 30,
+    },
+    controlsContainer: {
+      marginTop: 'auto',
+      margin: 20,
+    },
+    delayMessageText: {
+      textAlign: 'center',
+      marginTop: 20,
+    },
+  })
+
+  if (!credential && !confirmationOnly) {
+    throw new Error('Unable to fetch credential from Credo')
+  }
+
+  const onBackToHomeTouched = useCallback(() => {
+    navigation.getParent()?.navigate(TabStacks.HomeStack, { screen: Screens.Home })
+  }, [navigation])
+
+  const onDoneTouched = useCallback(() => {
+    navigation.getParent()?.navigate(TabStacks.CredentialStack, { screen: Screens.Credentials })
+  }, [navigation])
+
+  useEffect(() => {
+    if (!credential) {
+      return
+    }
+    if (credential.state === CredentialState.CredentialReceived || credential.state === CredentialState.Done) {
+      timer && clearTimeout(timer)
+      setCredentialDeliveryStatus(DeliveryStatus.Completed)
+    }
+  }, [credential, timer])
+
+  useEffect(() => {
+    if (confirmationOnly) {
+      timer && clearTimeout(timer)
+      setCredentialDeliveryStatus(DeliveryStatus.Completed)
+    }
+  }, [confirmationOnly, timer])
+
+  useEffect(() => {
+    if (timerDidFire || credentialDeliveryStatus !== DeliveryStatus.Pending || !visible) {
+      return
+    }
+
+    const timer = setTimeout(() => {
+      setShouldShowDelayMessage(true)
+      setTimerDidFire(true)
+    }, connTimerDelay)
+
+    setTimer(timer)
+
+    return () => {
+      timer && clearTimeout(timer)
+    }
+  }, [timerDidFire, credentialDeliveryStatus, visible, connTimerDelay])
+
+  useEffect(() => {
+    if (shouldShowDelayMessage && credentialDeliveryStatus !== DeliveryStatus.Completed) {
+      AccessibilityInfo.announceForAccessibility(t('Connection.TakingTooLong'))
+    }
+  }, [shouldShowDelayMessage, credentialDeliveryStatus, t])
+
+  return (
+    <SafeAreaModal visible={visible} transparent={true} animationType={'none'}>
+      <SafeAreaView style={{ ...ListItems.credentialOfferBackground }}>
+        <ScrollView style={styles.container}>
+          <View style={styles.messageContainer}>
+            {credentialDeliveryStatus === DeliveryStatus.Pending && (
+              <ThemedText
+                style={[ListItems.credentialOfferTitle, styles.messageText]}
+                testID={testIdWithKey('CredentialOnTheWay')}
+              >
+                {t('CredentialOffer.CredentialOnTheWay')}
+              </ThemedText>
+            )}
+
+            {credentialDeliveryStatus === DeliveryStatus.Completed && (
+              <ThemedText
+                style={[ListItems.credentialOfferTitle, styles.messageText]}
+                testID={testIdWithKey('CredentialAddedToYourWallet')}
+              >
+                {t('CredentialOffer.CredentialAddedToYourWallet')}
+              </ThemedText>
+            )}
+          </View>
+
+          <View style={[styles.image, { minHeight: 250, alignItems: 'center', justifyContent: 'flex-end' }]}>
+            {credentialDeliveryStatus === DeliveryStatus.Completed && <CredentialAdded />}
+            {credentialDeliveryStatus === DeliveryStatus.Pending && <CredentialPending />}
+          </View>
+
+          {shouldShowDelayMessage && credentialDeliveryStatus === DeliveryStatus.Pending && (
+            <ThemedText
+              style={[ListItems.credentialOfferDetails, styles.delayMessageText]}
+              testID={testIdWithKey('TakingTooLong')}
+            >
+              {t('Connection.TakingTooLong')}
+            </ThemedText>
+          )}
+        </ScrollView>
+
+        <View style={styles.controlsContainer}>
+          {credentialDeliveryStatus === DeliveryStatus.Pending && (
+            <View>
+              <Button
+                title={t('Loading.BackToHome')}
+                accessibilityLabel={t('Loading.BackToHome')}
+                testID={testIdWithKey('BackToHome')}
+                onPress={onBackToHomeTouched}
+                buttonType={ButtonType.ModalSecondary}
+              />
+            </View>
+          )}
+
+          {credentialDeliveryStatus === DeliveryStatus.Completed && (
+            <View>
+              <Button
+                title={t('Global.Done')}
+                accessibilityLabel={t('Global.Done')}
+                testID={testIdWithKey('Done')}
+                onPress={onDoneTouched}
+                buttonType={ButtonType.ModalPrimary}
+              />
+            </View>
+          )}
+        </View>
+      </SafeAreaView>
+    </SafeAreaModal>
+  )
+}
+
+export default CredentialOfferAccept

package/src/screens/DataRetention.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+import BouncyCheckbox from 'react-native-bouncy-checkbox'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import { DispatchAction } from '../contexts/reducers/store'
+import { useStore } from '../contexts/store'
+import { useTheme } from '../contexts/theme'
+import { testIdWithKey } from '../utils/testable'
+import { ThemedText } from '../components/texts/ThemedText'
+
+const DataRetention: React.FC = () => {
+  const { t } = useTranslation()
+  const [store, dispatch] = useStore()
+  const { ColorPallet, SettingsTheme } = useTheme()
+  const [useDataRetention, setUseDataRetention] = useState<boolean>(!!store.preferences.useDataRetention)
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      width: '100%',
+    },
+    section: {
+      backgroundColor: SettingsTheme.groupBackground,
+      paddingHorizontal: 25,
+      paddingVertical: 16,
+    },
+    sectionRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    itemSeparator: {
+      borderBottomWidth: 1,
+      borderBottomColor: ColorPallet.brand.primaryBackground,
+      marginHorizontal: 25,
+    },
+  })
+
+  const updateDataRetention = (state: boolean) => {
+    dispatch({
+      type: DispatchAction.USE_DATA_RETENTION,
+      payload: [state],
+    })
+    setUseDataRetention(state)
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={[styles.section, styles.sectionRow]}>
+        <ThemedText variant="title">{t('Global.On')}</ThemedText>
+        <BouncyCheckbox
+          accessibilityLabel={t('Global.On')}
+          disableText
+          fillColor={ColorPallet.brand.secondaryBackground}
+          unfillColor={ColorPallet.brand.secondaryBackground}
+          size={36}
+          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+          onPress={() => updateDataRetention(true)}
+          isChecked={useDataRetention}
+          disableBuiltInState
+          testID={testIdWithKey('dataRetentionOn')}
+        />
+      </View>
+      <View style={{ backgroundColor: SettingsTheme.groupBackground }}>
+        <View style={styles.itemSeparator}></View>
+      </View>
+      <View style={[styles.section, styles.sectionRow]}>
+        <ThemedText variant="title">{t('Global.Off')}</ThemedText>
+        <BouncyCheckbox
+          accessibilityLabel={t('Global.Off')}
+          disableText
+          fillColor={ColorPallet.brand.secondaryBackground}
+          unfillColor={ColorPallet.brand.secondaryBackground}
+          size={36}
+          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+          onPress={() => updateDataRetention(false)}
+          isChecked={!useDataRetention}
+          disableBuiltInState
+          testID={testIdWithKey('dataRetentionOff')}
+        />
+      </View>
+    </SafeAreaView>
+  )
+}
+
+export default DataRetention