@bifold/core 1.0.0

package/src/components/misc/ScanCamera.tsx

@@ -0,0 +1,86 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { StyleSheet, Vibration, View, useWindowDimensions } from 'react-native'
+import { useOrientationChange, OrientationType } from 'react-native-orientation-locker'
+import { Camera, Code, useCameraDevice, useCameraFormat, useCodeScanner } from 'react-native-vision-camera'
+
+import { QrCodeScanError } from '../../types/error'
+
+interface Props {
+  handleCodeScan: (value: string) => Promise<void>
+  error?: QrCodeScanError | null
+  enableCameraOnError?: boolean
+  torchActive?: boolean
+}
+const ScanCamera: React.FC<Props> = ({ handleCodeScan, error, enableCameraOnError, torchActive }) => {
+  const [orientation, setOrientation] = useState(OrientationType.PORTRAIT)
+  const [cameraActive, setCameraActive] = useState(true)
+  const orientationDegrees: { [key: string]: string } = {
+    [OrientationType.PORTRAIT]: '0deg',
+    [OrientationType['LANDSCAPE-LEFT']]: '270deg',
+    [OrientationType['PORTRAIT-UPSIDEDOWN']]: '180deg',
+    [OrientationType['LANDSCAPE-RIGHT']]: '90deg',
+  }
+  const [invalidQrCodes, setInvalidQrCodes] = useState(new Set<string>())
+  const device = useCameraDevice('back')
+  const screenAspectRatio = useWindowDimensions().scale
+  const format = useCameraFormat(device, [
+    { fps: 20 },
+    { videoAspectRatio: screenAspectRatio },
+    { videoResolution: 'max' },
+    { photoAspectRatio: screenAspectRatio },
+    { photoResolution: 'max' },
+  ])
+  useOrientationChange((orientationType) => {
+    setOrientation(orientationType)
+  })
+
+  const onCodeScanned = useCallback(
+    (codes: Code[]) => {
+      const value = codes[0].value
+      if (!value || invalidQrCodes.has(value)) {
+        return
+      }
+
+      if (error?.data === value) {
+        setInvalidQrCodes((prev) => new Set([...prev, value]))
+        if (enableCameraOnError) {
+          return setCameraActive(true)
+        }
+      }
+
+      if (cameraActive) {
+        Vibration.vibrate()
+        handleCodeScan(value)
+        return setCameraActive(false)
+      }
+    },
+    [invalidQrCodes, error, enableCameraOnError, cameraActive, handleCodeScan]
+  )
+
+  useEffect(() => {
+    if (error?.data && enableCameraOnError) {
+      setCameraActive(true)
+    }
+  }, [error, enableCameraOnError])
+
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr'],
+    onCodeScanned: onCodeScanned,
+  })
+  return (
+    <View style={[StyleSheet.absoluteFill, { transform: [{ rotate: orientationDegrees[orientation] ?? '0deg' }] }]}>
+      {device && (
+        <Camera
+          style={StyleSheet.absoluteFill}
+          device={device}
+          torch={torchActive ? 'on' : 'off'}
+          isActive={cameraActive}
+          codeScanner={codeScanner}
+          format={format}
+        />
+      )}
+    </View>
+  )
+}
+
+export default ScanCamera

package/src/components/misc/ScanTab.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import { useTheme } from '../../contexts/theme'
+import { testIdWithKey } from '../../utils/testable'
+import { ThemedText } from '../texts/ThemedText'
+
+interface ScanTabProps {
+  onPress: () => void
+  active: boolean
+  iconName: string
+  title: string
+}
+
+const ScanTab: React.FC<ScanTabProps> = ({ onPress, active, iconName, title }) => {
+  const { TabTheme, TextTheme } = useTheme()
+  const { fontScale } = useWindowDimensions()
+  const showLabels = fontScale * TabTheme.tabBarTextStyle.fontSize < 18
+
+  const styles = StyleSheet.create({
+    container: {
+      ...TabTheme.tabBarContainerStyle,
+    },
+    text: {
+      ...TabTheme.tabBarTextStyle,
+      color: active ? TabTheme.tabBarActiveTintColor : TabTheme.tabBarInactiveTintColor,
+      fontWeight: active ? TextTheme.bold.fontWeight : TextTheme.normal.fontWeight,
+    },
+  })
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={onPress}
+      accessibilityLabel={title}
+      accessibilityRole="tab"
+      testID={testIdWithKey(title)}
+    >
+      <Icon name={iconName} size={30} color={styles.text.color}></Icon>
+      {showLabels ? <ThemedText style={styles.text}>{title}</ThemedText> : null}
+    </TouchableOpacity>
+  )
+}
+
+export default ScanTab

package/src/components/misc/SharedProofData.tsx

@@ -0,0 +1,98 @@
+import { useAgent } from '@credo-ts/react-hooks'
+import { GroupedSharedProofDataItem, getProofData, groupSharedProofDataByCredential } from '@bifold/verifier'
+import { BrandingOverlayType, Field } from '@bifold/oca/build/legacy'
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import VerifierCredentialCard from './VerifierCredentialCard'
+import { useAnimatedComponents } from '../../contexts/animated-components'
+import { useTheme } from '../../contexts/theme'
+import { buildFieldsFromSharedAnonCredsProof } from '../../utils/oca'
+import { TOKENS, useServices } from '../../container-api'
+
+interface SharedProofDataProps {
+  recordId: string
+  onSharedProofDataLoad?: (sharedProofData: GroupedSharedProofDataItem[]) => void
+}
+
+const SharedDataCard: React.FC<{ sharedData: GroupedSharedProofDataItem }> = ({ sharedData }) => {
+  const { ColorPallet } = useTheme()
+  const [attributes, setAttributes] = useState<Field[]>([])
+  useEffect(() => {
+    const attributes = buildFieldsFromSharedAnonCredsProof(sharedData.data)
+    setAttributes(attributes)
+  }, [sharedData])
+  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
+
+  return (
+    <View style={{ marginBottom: 15 }}>
+      <VerifierCredentialCard
+        displayItems={attributes}
+        style={
+          bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10
+            ? { backgroundColor: ColorPallet.brand.secondaryBackground }
+            : undefined
+        }
+        credDefId={sharedData.identifiers.cred_def_id}
+        schemaId={sharedData.identifiers.schema_id}
+        elevated
+        brandingOverlayType={bundleResolver.getBrandingOverlayType()}
+      />
+    </View>
+  )
+}
+
+const SharedProofData: React.FC<SharedProofDataProps> = ({ recordId, onSharedProofDataLoad }: SharedProofDataProps) => {
+  const { agent } = useAgent()
+  const { LoadingIndicator } = useAnimatedComponents()
+  const styles = StyleSheet.create({
+    container: {
+      flexGrow: 1,
+    },
+    loaderContainer: {
+      height: 200,
+      marginTop: 80,
+    },
+  })
+
+  if (!agent) {
+    throw new Error('Unable to fetch agent from Credo')
+  }
+
+  const [loading, setLoading] = useState<boolean>(true)
+  const [sharedData, setSharedData] = useState<GroupedSharedProofDataItem[] | undefined>(undefined)
+
+  useEffect(() => {
+    getProofData(agent, recordId)
+      .then((data) => {
+        if (data) {
+          const groupedSharedProofData = groupSharedProofDataByCredential(data)
+          const sharedData = Array.from(groupedSharedProofData.values())
+          setSharedData(sharedData)
+          if (!onSharedProofDataLoad) return
+          onSharedProofDataLoad(sharedData)
+        }
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [agent, recordId, onSharedProofDataLoad])
+
+  return (
+    <View style={styles.container}>
+      {loading || !sharedData ? (
+        <View style={styles.loaderContainer}>
+          <LoadingIndicator />
+        </View>
+      ) : (
+        <View>
+          {sharedData.map((item) => (
+            <SharedDataCard key={item.identifiers.cred_def_id} sharedData={item} />
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default SharedProofData

package/src/components/misc/UnorderedList.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { View } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+import { ThemedText } from '../texts/ThemedText'
+
+type UnorderedListProps = {
+  unorderedListItems: string[]
+}
+
+const UnorderedList: React.FC<UnorderedListProps> = ({ unorderedListItems }) => {
+  const { ColorPallet } = useTheme()
+
+  return (
+    <>
+      {unorderedListItems.map((item: string, i: number) => {
+        return (
+          <View key={i} style={{ display: 'flex', flexDirection: 'row', marginBottom: 5 }}>
+            <ThemedText style={{ color: ColorPallet.brand.unorderedList, paddingLeft: 5 }}>{`\u2022`}</ThemedText>
+            <ThemedText style={{ color: ColorPallet.brand.unorderedList, paddingLeft: 5, flex: 1 }}>{item}</ThemedText>
+          </View>
+        )
+      })}
+    </>
+  )
+}
+
+export default UnorderedList

package/src/components/misc/VerifierCredentialCard.tsx

@@ -0,0 +1,378 @@
+import { BrandingOverlay } from '@bifold/oca'
+import { Attribute, CredentialOverlay, Predicate, Field, BrandingOverlayType } from '@bifold/oca/build/legacy'
+import startCase from 'lodash.startcase'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  FlatList,
+  Image,
+  ImageBackground,
+  StyleSheet,
+  View,
+  ViewStyle,
+  TextInput,
+  TouchableOpacity,
+} from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import ImageModal from '../../components/modals/ImageModal'
+import { TOKENS, useServices } from '../../container-api'
+import { useTheme } from '../../contexts/theme'
+import { toImageSource } from '../../utils/credential'
+import { formatIfDate, isDataUrl, pTypeToText } from '../../utils/helpers'
+import { testIdWithKey } from '../../utils/testable'
+
+import CardWatermark from './CardWatermark'
+import CredentialCard11Logo from './CredentialCard11Logo'
+import useCredentialCardStyles from '../../hooks/credential-card-styles'
+import { Shade, shadeIsLightOrDark } from '../../utils/luminance'
+import CredentialIssuerBody from './CredentialCard11Issuer'
+import { ThemedText } from '../texts/ThemedText'
+
+interface VerifierCredentialCardProps {
+  style?: ViewStyle
+  displayItems?: Field[]
+  elevated?: boolean
+  credDefId?: string
+  schemaId: string
+  preview?: boolean
+  onChangeValue?: (schema: string, label: string, name: string, value: string) => void
+  brandingOverlayType?: BrandingOverlayType
+}
+
+/**
+ * This component is meant to be used in the ProofRequestDetails screen to show what
+ * a proof request will look like with proper branding etc. and allow for the changing
+ * of predicate values. It is a greatly trimmed-down version of the CredentialCard11.
+ */
+const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
+  style = {},
+  displayItems = [],
+  elevated = false,
+  credDefId,
+  schemaId,
+  preview,
+  onChangeValue,
+  brandingOverlayType = BrandingOverlayType.Branding10,
+}) => {
+  const [dimensions, setDimensions] = useState({ cardWidth: 0, cardHeight: 0 })
+  const { i18n, t } = useTranslation()
+  const { ColorPallet, TextTheme } = useTheme()
+  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
+  const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({})
+  const isBranding10 = brandingOverlayType === BrandingOverlayType.Branding10
+  const isBranding11 = brandingOverlayType === BrandingOverlayType.Branding11
+  const { styles, borderRadius } = useCredentialCardStyles(overlay, brandingOverlayType, isBranding10)
+
+  const attributeTypes = overlay.bundle?.captureBase.attributes
+  const attributeFormats: Record<string, string | undefined> = (overlay.bundle as any)?.bundle.attributes
+    .map((attr: any) => {
+      return { name: attr.name, format: attr.format }
+    })
+    .reduce((prev: { [key: string]: string }, curr: { name: string; format?: string }) => {
+      return { ...prev, [curr.name]: curr.format }
+    }, {})
+
+  const getCardWatermarkTextColor = (background?: string) => {
+    if (isBranding10) return ColorPallet.grayscale.mediumGrey
+    const shade = shadeIsLightOrDark(background ?? ColorPallet.grayscale.lightGrey)
+    return shade == Shade.Light ? ColorPallet.grayscale.darkGrey : ColorPallet.grayscale.lightGrey
+  }
+
+  const parseAttribute = (item: (Attribute & Predicate) | undefined) => {
+    let parsedItem = item
+    if (item && !item.value) {
+      parsedItem = pTypeToText(item, t, attributeTypes) as Attribute & Predicate
+    }
+    const parsedValue = formatIfDate(
+      attributeFormats?.[item?.name ?? ''],
+      parsedItem?.value ?? parsedItem?.pValue ?? null
+    )
+    return {
+      label: item?.label ?? item?.name ?? '',
+      value: item?.value ? parsedValue : `${parsedItem?.pType} ${parsedValue}`,
+    }
+  }
+
+  useEffect(() => {
+    const params = {
+      identifiers: { schemaId, credentialDefinitionId: credDefId },
+      attributes: displayItems,
+      language: i18n.language,
+    }
+    bundleResolver.resolveAllBundles(params).then((bundle) => {
+      setOverlay((o) => ({
+        ...o,
+        ...bundle,
+        brandingOverlay: bundle.brandingOverlay as BrandingOverlay,
+      }))
+    })
+  }, [schemaId, credDefId, displayItems, i18n.language, bundleResolver])
+
+  const AttributeItem: React.FC<{ item: Attribute }> = ({ item }) => {
+    const label = (item.name || item.label)!
+    const ylabel = overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label)
+    const [value, setValue] = useState(item.value)
+    const [showImageModal, setShowImageModal] = useState(false)
+
+    useEffect(() => {
+      setValue((v) => formatIfDate(item.format, v))
+    }, [item.format])
+
+    return (
+      <View>
+        <ThemedText
+          variant="labelSubtitle"
+          style={[
+            styles.textContainer,
+            {
+              lineHeight: 19,
+              opacity: 0.8,
+            },
+          ]}
+          testID={testIdWithKey('AttributeName')}
+        >
+          {ylabel}
+        </ThemedText>
+        {value && (
+          <View>
+            {isDataUrl(value) ? (
+              <TouchableOpacity
+                accessibilityLabel={t('Record.Zoom')}
+                accessibilityRole="imagebutton"
+                testID={testIdWithKey('zoom')}
+                onPress={() => setShowImageModal(true)}
+              >
+                <Image style={styles.imageAttr} source={{ uri: value as string }} />
+              </TouchableOpacity>
+            ) : (
+              <ThemedText variant="bold" style={styles.textContainer} testID={testIdWithKey('AttributeValue')}>
+                {value}
+              </ThemedText>
+            )}
+          </View>
+        )}
+        {showImageModal && <ImageModal uri={value as string} onDismissPressed={() => setShowImageModal(false)} />}
+      </View>
+    )
+  }
+
+  const PredicateItem: React.FC<{
+    item: Predicate
+  }> = ({ item }) => {
+    const { ColorPallet } = useTheme()
+    const label = (item.label || item.name)!
+    const ylabel = overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label)
+    const [currentValue, setCurrentValue] = useState(`${item.pValue ?? ''}`)
+
+    const predicateStyles = StyleSheet.create({
+      input: {
+        textAlign: 'center',
+        textAlignVertical: 'bottom',
+        borderBottomColor: ColorPallet.grayscale.black,
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        borderBottomWidth: 1,
+        lineHeight: 19,
+        padding: 0,
+      },
+      predicateLabel: {
+        lineHeight: 19,
+        opacity: 0.8,
+      },
+      predicateType: {
+        lineHeight: isBranding10 ? 19 : styles.textContainer.lineHeight,
+        marginRight: 5,
+      },
+    })
+
+    return (
+      <View>
+        <ThemedText
+          variant="labelSubtitle"
+          style={[styles.textContainer, predicateStyles.predicateLabel]}
+          testID={testIdWithKey('PredicateName')}
+        >
+          {ylabel}
+        </ThemedText>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-end' }}>
+          {item.satisfied && !preview ? (
+            <Icon style={{ marginRight: 5 }} size={24} name={'check-circle'} color={ColorPallet.semantic.success} />
+          ) : null}
+          <ThemedText variant="bold" style={[styles.textContainer, predicateStyles.predicateType]}>
+            {item.pType}
+          </ThemedText>
+          {/* Only allow editing parametrizable predicates in preview mode */}
+          {item.parameterizable && preview && onChangeValue ? (
+            <TextInput
+              keyboardType="numeric"
+              style={[TextTheme.bold, predicateStyles.input]}
+              onChangeText={(value) => setCurrentValue(value)}
+              onBlur={() => {
+                onChangeValue(schemaId, item.label || item.name || '', item.name || '', currentValue)
+              }}
+              testID={testIdWithKey('PredicateInput')}
+            >
+              {currentValue}
+            </TextInput>
+          ) : (
+            <ThemedText variant="bold" style={styles.textContainer} testID={testIdWithKey('PredicateValue')}>
+              {item.pValue}
+            </ThemedText>
+          )}
+        </View>
+      </View>
+    )
+  }
+
+  const CardAttribute: React.FC<{ item: Attribute & Predicate }> = ({ item }) => {
+    item.format = attributeFormats?.[item.name ?? '']
+    let parsedPredicate: Predicate | undefined = undefined
+    if (item instanceof Predicate) {
+      parsedPredicate = pTypeToText(item, t, attributeTypes) as Predicate
+      if (!parsedPredicate.parameterizable) {
+        parsedPredicate.pValue = formatIfDate(parsedPredicate.format, parsedPredicate.pValue)
+      }
+    }
+
+    return (
+      <View style={styles.cardAttributeContainer}>
+        {item instanceof Attribute && <AttributeItem item={item as Attribute} />}
+        {item instanceof Predicate && <PredicateItem item={parsedPredicate as Predicate} />}
+      </View>
+    )
+  }
+
+  const renderCardAttribute = (item: Attribute & Predicate) => {
+    return <CardAttribute item={item} />
+  }
+
+  const CredentialCardPrimaryBody: React.FC = () => {
+    return (
+      <View testID={testIdWithKey('CredentialCardPrimaryBody')} style={styles.primaryBodyContainer}>
+        <View>
+          {isBranding10 && (
+            <CredentialIssuerBody
+              overlay={overlay}
+              overlayType={brandingOverlayType}
+              hasBody={overlay.metaOverlay?.issuer !== 'Unknown Contact'}
+              proof
+            />
+          )}
+          <View style={styles.primaryBodyNameContainer}>
+            <ThemedText
+              variant="bold"
+              testID={testIdWithKey('CredentialName')}
+              style={[styles.textContainer, styles.credentialName]}
+            >
+              {overlay.metaOverlay?.name}
+            </ThemedText>
+          </View>
+        </View>
+        <FlatList
+          data={displayItems}
+          scrollEnabled={false}
+          initialNumToRender={displayItems?.length}
+          keyExtractor={({ name }) => name}
+          renderItem={({ item }) => {
+            return renderCardAttribute(item as Attribute & Predicate)
+          }}
+        />
+        {brandingOverlayType === BrandingOverlayType.Branding11 && (
+          <CredentialIssuerBody
+            overlay={overlay}
+            overlayType={brandingOverlayType}
+            hasBody={overlay.metaOverlay?.issuer !== 'Unknown Contact'}
+          />
+        )}
+      </View>
+    )
+  }
+
+  const CredentialCardSecondaryBody: React.FC = () => {
+    return (
+      <View testID={testIdWithKey('CredentialCardSecondaryBody')} style={styles.secondaryBodyContainer}>
+        {overlay.brandingOverlay?.backgroundImageSlice &&
+        (!displayItems || brandingOverlayType === BrandingOverlayType.Branding11) ? (
+          <ImageBackground
+            source={toImageSource(overlay.brandingOverlay?.backgroundImageSlice)}
+            style={{ flexGrow: 1 }}
+            imageStyle={{
+              borderTopLeftRadius: borderRadius,
+              borderBottomLeftRadius: borderRadius,
+            }}
+          >
+            {null}
+          </ImageBackground>
+        ) : null}
+      </View>
+    )
+  }
+
+  const CredentialCard: React.FC = () => {
+    const watermarkLabel = overlay.metaOverlay?.watermark ? overlay.metaOverlay?.watermark + ',' : ''
+    const issuerAccessibilityLabel = overlay.metaOverlay?.issuer
+      ? `${t('Credentials.IssuedBy')} ${overlay.metaOverlay?.issuer}`
+      : ''
+    const accessibilityLabel = isBranding11
+      ? `${watermarkLabel} ${overlay.metaOverlay?.name ?? ''} ${t('Credentials.Credential')}${
+          displayItems.length > 0 ? ',' : ''
+        }` +
+        displayItems.map((item) => {
+          const { label, value } = parseAttribute(item as Attribute & Predicate)
+          if (label && value) {
+            return ` ${label}, ${value}`
+          }
+        }) +
+        `, ${issuerAccessibilityLabel}`
+      : `${issuerAccessibilityLabel}, ${overlay.metaOverlay?.watermark ?? ''} ${overlay.metaOverlay?.name ?? ''} ${t(
+          'Credentials.Credential'
+        )}.` +
+        displayItems.map((item) => {
+          const { label, value } = parseAttribute(item as (Attribute & Predicate) | undefined)
+          if (label) {
+            return value ? ` ${label}, ${value}` : ` ${label}`
+          }
+        })
+    return (
+      <View style={styles.cardContainer} accessible={true} accessibilityLabel={accessibilityLabel}>
+        <CredentialCardSecondaryBody />
+        <CredentialCard11Logo
+          noLogoText={overlay.metaOverlay?.name ?? overlay.metaOverlay?.issuer ?? 'C'}
+          overlay={overlay}
+          elevated={elevated}
+        />
+        <CredentialCardPrimaryBody />
+      </View>
+    )
+  }
+
+  return overlay.bundle ? (
+    <View
+      style={[
+        styles.container,
+        style,
+        {
+          elevation: elevated ? 5 : 0,
+          overflow: elevated ? 'visible' : 'hidden',
+        },
+      ]}
+      onLayout={(event) => {
+        setDimensions({ cardHeight: event.nativeEvent.layout.height, cardWidth: event.nativeEvent.layout.width })
+      }}
+    >
+      <View testID={testIdWithKey('CredentialCard')} style={{ overflow: 'hidden' }}>
+        {overlay.metaOverlay?.watermark && (
+          <CardWatermark
+            width={dimensions.cardWidth}
+            height={dimensions.cardHeight}
+            style={{ color: getCardWatermarkTextColor(overlay.brandingOverlay?.primaryBackgroundColor) }}
+            watermark={overlay.metaOverlay?.watermark}
+          />
+        )}
+        <CredentialCard />
+      </View>
+    </View>
+  ) : null
+}
+
+export default VerifierCredentialCard

package/src/components/misc/index.ts

@@ -0,0 +1,2 @@
+import CredentialCard from './CredentialCard'
+export { CredentialCard }

package/src/components/modals/AlertModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, useWindowDimensions } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import { InfoBoxType } from '../misc/InfoBox'
+
+import PopupModal from './PopupModal'
+
+interface AlertModalProps {
+  title: string
+  message: string
+  submit?: () => void
+}
+
+const AlertModal: React.FC<AlertModalProps> = ({ title, message, submit }) => {
+  const { t } = useTranslation()
+  const { height } = useWindowDimensions()
+
+  const styles = StyleSheet.create({
+    container: {
+      minHeight: height,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  })
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <PopupModal
+        notificationType={InfoBoxType.Info}
+        title={title}
+        description={message}
+        onCallToActionLabel={t('Global.Okay')}
+        onCallToActionPressed={submit ? () => submit() : () => undefined}
+      ></PopupModal>
+    </SafeAreaView>
+  )
+}
+
+export default AlertModal