@bifold/core 2.4.5 → 2.5.0

package/src/components/misc/InfoBox.tsx

@@ -1,283 +0,0 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View, TouchableOpacity, ScrollView, useWindowDimensions } from 'react-native'
-import { getVersion, getBuildNumber } from 'react-native-device-info'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { hitSlop } from '../../constants'
-import { useTheme } from '../../contexts/theme'
-import { GenericFn } from '../../types/fn'
-import { testIdWithKey } from '../../utils/testable'
-// eslint-disable-next-line import/no-named-as-default
-import Button, { ButtonType } from '../buttons/Button'
-import { TOKENS, useServices } from '../../container-api'
-import { ThemedText } from '../texts/ThemedText'
-
-const iconSize = 30
-
-export enum InfoBoxType {
-  Info,
-  Success,
-  Warn,
-  Error,
-}
-
-interface InfoBoxProps {
-  notificationType: InfoBoxType
-  title: string
-  description?: string
-  bodyContent?: Element
-  message?: string
-  callToActionDisabled?: boolean
-  callToActionIcon?: JSX.Element
-  secondaryCallToActionTitle?: string
-  secondaryCallToActionPressed?: GenericFn
-  secondaryCallToActionDisabled?: boolean
-  secondaryCallToActionIcon?: JSX.Element
-  onCallToActionPressed?: GenericFn
-  onCallToActionLabel?: string
-  onClosePressed?: GenericFn
-  showVersionFooter?: boolean
-  renderShowDetails?: boolean
-}
-
-const InfoBox: React.FC<InfoBoxProps> = ({
-  notificationType,
-  title,
-  description,
-  bodyContent,
-  message,
-  callToActionDisabled,
-  callToActionIcon,
-  secondaryCallToActionTitle,
-  secondaryCallToActionPressed,
-  secondaryCallToActionDisabled,
-  secondaryCallToActionIcon,
-  onCallToActionPressed,
-  onCallToActionLabel,
-  onClosePressed,
-  showVersionFooter,
-  renderShowDetails = false,
-}) => {
-  const { width } = useWindowDimensions()
-  const { t } = useTranslation()
-  const { TextTheme, ColorPalette } = useTheme()
-  const [showDetails, setShowDetails] = useState<boolean>(renderShowDetails)
-  const [{ showDetailsInfo }] = useServices([TOKENS.CONFIG])
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
-      borderColor: ColorPalette.notification.infoBorder,
-      borderRadius: 5,
-      borderWidth: 1,
-      padding: 10,
-      minWidth: width - 2 * 25,
-    },
-    headerContainer: {
-      flexDirection: 'row',
-      paddingHorizontal: 5,
-      paddingTop: 5,
-    },
-    bodyContainer: {
-      flexDirection: 'column',
-      marginLeft: 10 + iconSize,
-      paddingHorizontal: 5,
-      paddingBottom: 5,
-      flexGrow: 0,
-    },
-    headerText: {
-      marginLeft: 7,
-      flexShrink: 1,
-      alignSelf: 'center',
-      color: ColorPalette.notification.infoText,
-    },
-    bodyText: {
-      flexShrink: 1,
-      marginVertical: 16,
-      color: ColorPalette.notification.infoText,
-    },
-    icon: {
-      marginRight: 10,
-      alignSelf: 'center',
-    },
-    showDetailsText: {
-      fontWeight: TextTheme.normal.fontWeight,
-      color: ColorPalette.brand.link,
-    },
-  })
-  let iconName = 'info'
-  let iconColor = ColorPalette.notification.infoIcon
-
-  switch (notificationType) {
-    case InfoBoxType.Info:
-      iconName = 'info'
-      iconColor = ColorPalette.notification.infoIcon
-      styles.container = {
-        ...styles.container,
-        backgroundColor: ColorPalette.notification.info,
-        borderColor: ColorPalette.notification.infoBorder,
-      }
-      styles.headerText = {
-        ...styles.headerText,
-        color: ColorPalette.notification.infoText,
-      }
-      styles.bodyText = {
-        ...styles.bodyText,
-        color: ColorPalette.notification.infoText,
-      }
-      break
-
-    case InfoBoxType.Success:
-      iconName = 'check-circle'
-      iconColor = ColorPalette.notification.successIcon
-      styles.container = {
-        ...styles.container,
-        backgroundColor: ColorPalette.notification.success,
-        borderColor: ColorPalette.notification.successBorder,
-      }
-      styles.headerText = {
-        ...styles.headerText,
-        color: ColorPalette.notification.successText,
-      }
-      styles.bodyText = {
-        ...styles.bodyText,
-        color: ColorPalette.notification.successText,
-      }
-      break
-
-    case InfoBoxType.Warn:
-      iconName = 'warning'
-      iconColor = ColorPalette.notification.warnIcon
-      styles.container = {
-        ...styles.container,
-        backgroundColor: ColorPalette.notification.warn,
-        borderColor: ColorPalette.notification.warnBorder,
-      }
-      styles.headerText = {
-        ...styles.headerText,
-        color: ColorPalette.notification.warnText,
-      }
-      styles.bodyText = {
-        ...styles.bodyText,
-        color: ColorPalette.notification.warnText,
-      }
-      break
-
-    case InfoBoxType.Error:
-      iconName = 'error'
-      iconColor = ColorPalette.notification.errorIcon
-      styles.container = {
-        ...styles.container,
-        backgroundColor: ColorPalette.notification.error,
-        borderColor: ColorPalette.notification.errorBorder,
-      }
-      styles.headerText = {
-        ...styles.headerText,
-        color: ColorPalette.notification.errorText,
-      }
-      styles.bodyText = {
-        ...styles.bodyText,
-        color: ColorPalette.notification.errorText,
-      }
-      break
-
-    default:
-      throw new Error('InfoTextBoxType needs to be set correctly')
-  }
-
-  const onShowDetailsTouched = () => {
-    setShowDetails(true)
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.headerContainer}>
-        <View style={[styles.icon, { flexDirection: 'row' }]}>
-          <Icon accessible={false} name={iconName} size={iconSize} color={iconColor} />
-          <ThemedText variant="bold" style={styles.headerText} testID={testIdWithKey('HeaderText')}>
-            {title}
-          </ThemedText>
-        </View>
-        {onClosePressed && (
-          <View>
-            <TouchableOpacity
-              accessibilityLabel={t('Global.Dismiss')}
-              accessibilityRole={'button'}
-              testID={testIdWithKey(`Dismiss${notificationType}`)}
-              onPress={onClosePressed}
-              hitSlop={hitSlop}
-            >
-              <Icon name={'close'} size={iconSize} color={ColorPalette.notification.infoIcon} />
-            </TouchableOpacity>
-          </View>
-        )}
-      </View>
-      <ScrollView style={styles.bodyContainer}>
-        <>
-          {!showDetails ? bodyContent : null}
-          {(description || (message && showDetails)) && (
-            <ThemedText style={styles.bodyText} testID={testIdWithKey('BodyText')}>
-              {showDetails ? message : description}
-            </ThemedText>
-          )}
-          {message && !showDetails && (showDetailsInfo ?? true) && (
-            <TouchableOpacity
-              accessibilityLabel={t('Global.ShowDetails')}
-              accessibilityRole="button"
-              testID={testIdWithKey('ShowDetails')}
-              style={{ marginVertical: 14 }}
-              onPress={onShowDetailsTouched}
-              hitSlop={hitSlop}
-            >
-              <View style={{ flexDirection: 'row' }}>
-                <ThemedText variant="title" style={styles.showDetailsText}>
-                  {t('Global.ShowDetails')}{' '}
-                </ThemedText>
-                <Icon name="chevron-right" size={iconSize} color={ColorPalette.brand.link} />
-              </View>
-            </TouchableOpacity>
-          )}
-          {onCallToActionPressed && (
-            <View style={{ paddingTop: 10 }}>
-              <Button
-                title={onCallToActionLabel || t('Global.Okay')}
-                accessibilityLabel={onCallToActionLabel || t('Global.Okay')}
-                testID={onCallToActionLabel ? testIdWithKey(onCallToActionLabel) : testIdWithKey('Okay')}
-                buttonType={ButtonType.Primary}
-                onPress={onCallToActionPressed}
-                disabled={callToActionDisabled}
-              >
-                {callToActionIcon}
-              </Button>
-            </View>
-          )}
-          {secondaryCallToActionTitle && secondaryCallToActionPressed && (
-            <View style={{ paddingTop: 10 }}>
-              <Button
-                title={secondaryCallToActionTitle}
-                accessibilityLabel={secondaryCallToActionTitle}
-                testID={testIdWithKey(secondaryCallToActionTitle)}
-                buttonType={ButtonType.Secondary}
-                onPress={secondaryCallToActionPressed}
-                disabled={secondaryCallToActionDisabled}
-              >
-                {secondaryCallToActionIcon}
-              </Button>
-            </View>
-          )}
-          {showVersionFooter ? (
-            <ThemedText
-              variant="caption"
-              style={{ flex: 1, marginTop: 8, textAlign: 'center' }}
-              testID={testIdWithKey('VersionNumber')}
-            >
-              {`${t('Settings.Version')} ${getVersion()} (${getBuildNumber()})`}
-            </ThemedText>
-          ) : null}
-        </>
-      </ScrollView>
-    </View>
-  )
-}
-
-export default InfoBox

package/src/components/misc/NoNewUpdates.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View } from 'react-native'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import InfoTextBox from '../texts/InfoTextBox'
-import { ThemedText } from '../texts/ThemedText'
-
-const NoNewUpdates: React.FC = () => {
-  const { t } = useTranslation()
-  const { HomeTheme, ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    noNewUpdatesContainer: {
-      paddingHorizontal: 20,
-      paddingVertical: 20,
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-    },
-    noNewUpdatesText: {
-      ...HomeTheme.noNewUpdatesText,
-      alignSelf: 'center',
-      flex: 1,
-      flexWrap: 'wrap',
-    },
-  })
-
-  return (
-    <View style={styles.noNewUpdatesContainer}>
-      <InfoTextBox>
-        <ThemedText style={styles.noNewUpdatesText} testID={testIdWithKey('NoNewUpdates')}>
-          {t('Home.NoNewUpdates')}
-        </ThemedText>
-      </InfoTextBox>
-    </View>
-  )
-}
-
-export default NoNewUpdates

package/src/components/misc/PINHeader.tsx

@@ -1,25 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { useTheme } from '../../contexts/theme'
-import { View } from 'react-native'
-import { ThemedText } from '../texts/ThemedText'
-
-export interface PINHeaderProps {
-  updatePin?: boolean
-}
-
-const PINHeader = ({ updatePin }: PINHeaderProps) => {
-  const { TextTheme } = useTheme()
-  const { t } = useTranslation()
-  return (
-    <View>
-      <ThemedText style={{ marginBottom: 16 }}>
-        <ThemedText style={{ fontWeight: TextTheme.bold.fontWeight }}>
-          {updatePin ? t('PINChange.RememberChangePIN') : t('PINCreate.RememberPIN')}
-        </ThemedText>{' '}
-        {t('PINCreate.PINDisclaimer')}
-      </ThemedText>
-    </View>
-  )
-}
-
-export default PINHeader

package/src/components/misc/PINValidationHelper.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import { useTheme } from '../../contexts/theme'
-import { PINValidationsType } from '../../utils/PINValidation'
-import { ThemedText } from '../texts/ThemedText'
-
-interface PINValidationHelperProps {
-  validations: PINValidationsType[]
-}
-
-const iconSize = 24
-
-const PINValidationHelper: React.FC<PINValidationHelperProps> = ({ validations }) => {
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-
-  return (
-    <View style={{ marginBottom: 16 }}>
-      {validations.map((validation, index) => (
-        <View style={{ flexDirection: 'row' }} key={index}>
-          {validation.isInvalid ? (
-            <Icon
-              accessibilityLabel={t('PINCreate.Helper.ClearIcon')}
-              name="clear"
-              size={iconSize}
-              color={ColorPalette.notification.errorIcon}
-            />
-          ) : (
-            <Icon
-              accessibilityLabel={t('PINCreate.Helper.CheckIcon')}
-              name="check"
-              size={iconSize}
-              color={ColorPalette.notification.successIcon}
-            />
-          )}
-          <ThemedText style={{ paddingLeft: 4 }}>
-            {t(`PINCreate.Helper.${validation.errorName}`, validation?.errorTextAddition)}
-          </ThemedText>
-        </View>
-      ))}
-    </View>
-  )
-}
-
-export default PINValidationHelper

package/src/components/misc/Pagination.tsx

@@ -1,114 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Animated, TouchableOpacity, View } from 'react-native'
-import { ScalingDot } from 'react-native-animated-pagination-dots'
-
-import { hitSlop } from '../../constants'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-interface IPaginationStyleSheet {
-  pagerContainer: Record<string, any>
-  pagerDot: Record<string, any>
-  pagerDotActive: Record<string, any>
-  pagerDotInactive: Record<string, any>
-  pagerPosition: Record<string, any>
-  pagerNavigationButton: Record<string, any>
-}
-
-interface IPaginationProps {
-  pages: Array<Element>
-  activeIndex: number
-  scrollX: Animated.Value
-  next: () => void
-  nextButtonText?: string
-  previous: () => void
-  previousButtonText?: string
-  style: IPaginationStyleSheet
-}
-
-export const Pagination: React.FC<IPaginationProps> = ({
-  pages,
-  activeIndex,
-  scrollX,
-  style,
-  next,
-  nextButtonText,
-  previous,
-  previousButtonText,
-}) => {
-  const { t } = useTranslation()
-
-  const shouldHideBack = (): boolean => {
-    if (activeIndex === 0) {
-      return true
-    }
-
-    return false
-  }
-
-  const shouldHideNext = (): boolean => {
-    if (activeIndex === pages.length - 1) {
-      return true
-    }
-
-    return false
-  }
-
-  // FIXME: Issue #204. Better to `disable` the `TouchableOpacity`
-  // controls rather than changing the color to transparent.
-
-  return (
-    <View style={style.pagerContainer}>
-      <TouchableOpacity
-        accessible={true}
-        accessibilityLabel={t('Global.Back')}
-        accessibilityRole={'button'}
-        testID={testIdWithKey('Back')}
-        onPress={previous}
-        accessibilityElementsHidden={shouldHideBack()}
-        importantForAccessibility={shouldHideBack() ? 'no-hide-descendants' : 'auto'}
-        hitSlop={hitSlop}
-      >
-        <ThemedText
-          style={[
-            style.pagerNavigationButton,
-            { paddingRight: 20, color: shouldHideBack() ? 'transparent' : style.pagerNavigationButton.color },
-          ]}
-        >
-          {previousButtonText}
-        </ThemedText>
-      </TouchableOpacity>
-      <ScalingDot
-        data={pages}
-        scrollX={scrollX}
-        inActiveDotColor={style.pagerDotInactive.color}
-        inActiveDotOpacity={1}
-        activeDotColor={style.pagerDotActive.color}
-        activeDotScale={1}
-        dotStyle={style.pagerDot}
-        containerStyle={style.pagerPosition}
-      />
-
-      <TouchableOpacity
-        accessible={true}
-        accessibilityLabel={t('Global.Next')}
-        accessibilityRole={'button'}
-        testID={testIdWithKey('Next')}
-        onPress={next}
-        accessibilityElementsHidden={shouldHideNext()}
-        importantForAccessibility={shouldHideNext() ? 'no-hide-descendants' : 'auto'}
-        hitSlop={hitSlop}
-      >
-        <ThemedText
-          style={[
-            style.pagerNavigationButton,
-            { paddingLeft: 20, color: shouldHideNext() ? 'transparent' : style.pagerNavigationButton.color },
-          ]}
-        >
-          {nextButtonText}
-        </ThemedText>
-      </TouchableOpacity>
-    </View>
-  )
-}

package/src/components/misc/QRRenderer.tsx

@@ -1,53 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native'
-import QRCode from 'react-native-qrcode-svg'
-
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-interface QRRendererProps {
-  value: string
-  size?: number
-  style?: ViewStyle
-  onError?: () => void
-}
-
-const QRRenderer: React.FC<QRRendererProps> = ({ value, onError, size }) => {
-  const { width } = useWindowDimensions()
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-
-  const styles = StyleSheet.create({
-    container: {
-      flexGrow: 1,
-      marginVertical: 20,
-      backgroundColor: 'white',
-    },
-    errorMessage: {
-      color: ColorPalette.semantic.error,
-      textAlign: 'center',
-    },
-  })
-
-  const [isInvalidQR, setIsInvalidQR] = useState(false)
-
-  const handleQRCodeGenerationError = useCallback(() => {
-    setIsInvalidQR(true)
-    if (onError) {
-      onError()
-    }
-  }, [onError])
-
-  const qrSize = size ?? width - 80
-
-  return (
-    <View style={styles.container} testID={testIdWithKey('QRRenderer')}>
-      {<QRCode ecl="L" value={value} size={qrSize} onError={handleQRCodeGenerationError} />}
-      {isInvalidQR && <ThemedText style={styles.errorMessage}>{t('QRRender.GenerationError')}</ThemedText>}
-    </View>
-  )
-}
-
-export default QRRenderer