@bifold/core 2.4.5 → 2.5.0

package/src/components/tour/TourOverlay.tsx

@@ -1,134 +0,0 @@
-import React, { useCallback, useContext, useRef, useState, useEffect } from 'react'
-import { ColorValue, LayoutRectangle, View, ViewStyle, useWindowDimensions } from 'react-native'
-import { Defs, Mask, Rect, Svg } from 'react-native-svg'
-
-import { tourMargin } from '../../constants'
-import { BackdropPressBehavior, OSConfig, TourContext, TourStep } from '../../contexts/tour/tour-context'
-import { Optional, TourID } from '../../types/tour'
-import { testIdWithKey } from '../../utils/testable'
-
-import { SpotCutout } from './SpotCutout'
-
-interface TourOverlayProps {
-  backdropOpacity: number
-  color: ColorValue
-  currentTour: TourID
-  currentStep: Optional<number>
-  nativeDriver: boolean | OSConfig<boolean>
-  onBackdropPress: Optional<BackdropPressBehavior>
-  changeSpot: (spot: LayoutRectangle) => void
-  spot: LayoutRectangle
-  tourStep: TourStep
-}
-
-export const TourOverlay = (props: TourOverlayProps) => {
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
-  const { color, currentTour, currentStep, onBackdropPress, backdropOpacity, changeSpot, spot, tourStep } = props
-  const [viewBox, setViewBox] = useState(`0 0 ${windowWidth} ${windowHeight}`)
-  const { next, previous, start, stop } = useContext(TourContext)
-
-  const [tooltipStyle, setTooltipStyle] = useState<ViewStyle>({})
-
-  const tooltipRef = useRef<View>(null)
-
-  const handleBackdropPress = useCallback((): void => {
-    const handler = tourStep.onBackdropPress ?? onBackdropPress
-
-    if (handler !== undefined && currentStep !== undefined) {
-      switch (handler) {
-        case 'continue':
-          return next()
-
-        case 'stop':
-          return stop()
-
-        default:
-          return handler({ currentTour, currentStep, changeSpot, next, previous, start, stop })
-      }
-    }
-  }, [tourStep, onBackdropPress, currentTour, currentStep, changeSpot, next, previous, start, stop])
-
-  useEffect(() => {
-    const gapBetweenSpotAndTooltip = 50
-    // if origin spot (ie. no spotlight)
-    if (spot.x === 0 && spot.y === 0) {
-      // a relative margin so that the tooltip doesn't start at the very top of the screen
-      const oneSixthOfScreenHeight = windowHeight / 6
-      setTooltipStyle({
-        left: tourMargin,
-        right: tourMargin,
-        top: oneSixthOfScreenHeight,
-      })
-      // if spot is in the lower half of the screen
-    } else if (spot.y >= windowHeight / 2) {
-      const bottom = windowHeight - spot.y + gapBetweenSpotAndTooltip
-      setTooltipStyle({
-        left: tourMargin,
-        right: tourMargin,
-        bottom,
-      })
-      // if spot is in the upper half of the screen
-    } else {
-      const top = spot.y + gapBetweenSpotAndTooltip + spot.height
-      setTooltipStyle({
-        left: tourMargin,
-        right: tourMargin,
-        top,
-      })
-    }
-  }, [windowWidth, windowHeight, spot.width, spot.height, spot.x, spot.y])
-
-  useEffect(() => {
-    // + 1 pixel to account for an svg size rounding issue that would cause
-    // a tiny gap around the overlay
-    setViewBox(`0 0 ${windowWidth + 1} ${windowHeight + 1}`)
-  }, [windowWidth, windowHeight])
-
-  return currentStep !== undefined ? (
-    <View
-      accessibilityViewIsModal
-      style={{ position: 'absolute', top: 0, left: 0, height: windowHeight + 1, width: windowWidth + 1 }}
-      testID={testIdWithKey('SpotlightOverlay')}
-    >
-      <Svg
-        testID={testIdWithKey('SpotOverlay')}
-        height={windowHeight + 1}
-        width={windowWidth + 1}
-        viewBox={viewBox}
-        onPress={handleBackdropPress}
-        shouldRasterizeIOS={true}
-        renderToHardwareTextureAndroid={true}
-      >
-        <Defs>
-          <Mask id="mask" x={0} y={0} height={windowHeight + 1} width={windowWidth + 1}>
-            <Rect height={windowHeight + 1} width={windowWidth + 1} fill="#fff" />
-            <SpotCutout />
-          </Mask>
-        </Defs>
-
-        <Rect
-          height={windowHeight + 1}
-          width={windowWidth + 1}
-          fill={color}
-          mask="url(#mask)"
-          opacity={backdropOpacity}
-        />
-      </Svg>
-
-      <View
-        ref={tooltipRef}
-        testID={testIdWithKey('SpotTooltip')}
-        style={{ ...tooltipStyle, opacity: 1, position: 'absolute' }}
-      >
-        <tourStep.Render
-          currentTour={currentTour}
-          currentStep={currentStep}
-          changeSpot={changeSpot}
-          next={next}
-          previous={previous}
-          stop={stop}
-        />
-      </View>
-    </View>
-  ) : null
-}

package/src/components/views/Banner.tsx

@@ -1,181 +0,0 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { DispatchAction } from '../../contexts/reducers/store'
-import { useStore } from '../../contexts/store'
-import { useTheme } from '../../contexts/theme'
-import { testIdWithKey } from '../../utils/testable'
-import { ThemedText } from '../texts/ThemedText'
-
-export interface BannerMessage {
-  id: string
-  title: string
-  type: 'error' | 'warning' | 'info' | 'success'
-  variant: 'summary' | 'detail'
-  dismissible?: boolean
-}
-
-export interface BannerSectionProps extends BannerMessage {
-  expanded?: boolean
-  onDismiss?: () => void
-  onToggle?: () => void
-}
-
-export const Banner: React.FC = () => {
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-  const [store, dispatch] = useStore()
-  const [expanded, setExpanded] = useState(false)
-
-  const bannerMessages = store.preferences.bannerMessages
-  const alertMessage: BannerMessage = {
-    id: 'alertMessage',
-    title: t('Banner.AlertsLength', { alerts: bannerMessages.length }),
-    type: 'error',
-    variant: 'summary',
-  }
-
-  const dismissBanner = (key: string) => {
-    dispatch({
-      type: DispatchAction.REMOVE_BANNER_MESSAGE,
-      payload: [key],
-    })
-  }
-
-  if (!bannerMessages || bannerMessages.length == 0) {
-    return null
-  }
-
-  if (bannerMessages.length === 1) {
-    const message = bannerMessages[0]
-    return (
-      <BannerSection
-        id={message.id}
-        key={message.id}
-        title={message.title}
-        type={message.type}
-        variant="detail"
-        onDismiss={() => dismissBanner(message.id)}
-        dismissible={message.dismissible}
-      />
-    )
-  }
-
-  return (
-    <View>
-      <BannerSection
-        id={alertMessage.id}
-        title={t('Banner.AlertsLength', { alerts: bannerMessages.length })}
-        type={alertMessage.type}
-        variant={alertMessage.variant}
-        expanded={expanded}
-        onToggle={() => setExpanded(!expanded)}
-        dismissible={alertMessage.dismissible}
-      />
-      {expanded &&
-        bannerMessages.map((message) => (
-          <React.Fragment key={message.id}>
-            {/* Render a divider between the banners when multiple banners exist */}
-            <View style={{ height: 2, backgroundColor: ColorPalette.brand.primaryBackground }} />
-            <BannerSection
-              id={message.id}
-              key={message.id}
-              title={message.title}
-              type={message.type}
-              variant="detail"
-              onDismiss={() => dismissBanner(message.id)}
-              dismissible={message.dismissible}
-            />
-          </React.Fragment>
-        ))}
-    </View>
-  )
-}
-
-export const BannerSection: React.FC<BannerSectionProps> = ({
-  title,
-  type,
-  onDismiss,
-  dismissible = true,
-  variant,
-  expanded,
-  onToggle,
-}) => {
-  const { Spacing, ColorPalette } = useTheme()
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: ColorPalette.brand.primary,
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: Spacing.md,
-    },
-    icon: {
-      marginRight: Spacing.md,
-    },
-  })
-
-  const iconName = (type: string): string => {
-    switch (type) {
-      case 'error':
-        return 'alert-circle'
-      case 'warning':
-        return 'alert'
-      case 'info':
-        return 'information'
-      case 'success':
-        return 'check-circle'
-      default:
-        return 'information'
-    }
-  }
-
-  const bannerColor = (type: string): string => {
-    switch (type) {
-      case 'error':
-        return '#CE3E39'
-      case 'warning':
-        return '#F8BB47'
-      case 'info':
-        return '#2E5DD7'
-      case 'success':
-        return '#42814A'
-      default:
-        return '#2E5DD7'
-    }
-  }
-
-  // If more details are needed we might need to push the banner down to accommodate the extra information
-  return (
-    <TouchableOpacity
-      style={{ ...styles.container, backgroundColor: bannerColor(type) }}
-      testID={testIdWithKey(`button-${type}`)}
-      onPress={() => {
-        if (variant === 'summary' && onToggle) {
-          onToggle()
-        } else if (dismissible && onDismiss) {
-          onDismiss()
-        }
-      }}
-    >
-      <Icon
-        name={iconName(type)}
-        size={24}
-        color={type === 'warning' ? ColorPalette.brand.secondaryBackground : ColorPalette.grayscale.white}
-        style={styles.icon}
-        testID={testIdWithKey(`icon-${type}`)}
-      />
-      <ThemedText
-        variant={'bold'}
-        style={{
-          color: type === 'warning' ? ColorPalette.brand.secondaryBackground : ColorPalette.grayscale.white,
-          flex: 1,
-        }}
-        testID={testIdWithKey(`text-${type}`)}
-      >
-        {title}
-      </ThemedText>
-      {variant === 'summary' && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} size={24} color="white" />}
-    </TouchableOpacity>
-  )
-}

package/src/components/views/CredentialCardLogo.tsx

@@ -1,77 +0,0 @@
-import { Image, StyleSheet, useWindowDimensions, View } from 'react-native'
-import { BrandingOverlay } from '@bifold/oca'
-import { BrandingOverlayType, CredentialOverlay } from '@bifold/oca/build/legacy'
-import { useTheme } from '../../contexts/theme'
-import { toImageSource } from '../../utils/credential'
-import { useMemo } from 'react'
-import { ThemedText } from '../texts/ThemedText'
-
-type Props = {
-  overlay: CredentialOverlay<BrandingOverlay>
-  brandingOverlayType?: BrandingOverlayType
-}
-
-const CredentialCardLogo: React.FC<Props> = ({
-  overlay,
-  brandingOverlayType = BrandingOverlayType.Branding10,
-}: Props) => {
-  const { CredentialCardShadowTheme } = useTheme()
-  const { fontScale } = useWindowDimensions()
-  const logoHeight = brandingOverlayType === BrandingOverlayType.Branding10 ? 80 : 48
-  const paddingHorizontal = 24
-  const isBranding11 = brandingOverlayType === BrandingOverlayType.Branding11
-  const textColor =
-    overlay.brandingOverlay?.secondaryBackgroundColor && overlay.brandingOverlay.secondaryBackgroundColor !== ''
-      ? overlay.brandingOverlay.secondaryBackgroundColor
-      : overlay.brandingOverlay?.primaryBackgroundColor
-
-  const logoText = useMemo(() => {
-    if (brandingOverlayType === BrandingOverlayType.Branding11) {
-      return (overlay.metaOverlay?.issuer ?? 'I').charAt(0).toUpperCase()
-    }
-    return (overlay.metaOverlay?.name ?? overlay.metaOverlay?.issuer ?? 'C').charAt(0).toUpperCase()
-  }, [brandingOverlayType, overlay])
-
-  const styles = StyleSheet.create({
-    logoContainer: {
-      width: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
-      height: logoHeight * (fontScale > 1.7 ? 1.2 : 1),
-      backgroundColor: '#ffffff',
-      borderRadius: 8,
-      justifyContent: 'center',
-      alignItems: 'center',
-      ...(brandingOverlayType === BrandingOverlayType.Branding10 && {
-        top: -0.5 * logoHeight,
-        left: paddingHorizontal,
-        marginBottom: -1 * logoHeight,
-        ...CredentialCardShadowTheme,
-      }),
-    },
-  })
-
-  return (
-    <View style={styles.logoContainer}>
-      {overlay.brandingOverlay?.logo ? (
-        <Image
-          source={toImageSource(overlay.brandingOverlay?.logo)}
-          style={{
-            resizeMode: 'cover',
-            width: logoHeight,
-            height: logoHeight,
-            borderRadius: 8,
-          }}
-        />
-      ) : (
-        <ThemedText
-          variant="title"
-          style={{ fontSize: 0.5 * logoHeight, color: isBranding11 ? textColor : '#000' }}
-          accessible={false}
-        >
-          {logoText}
-        </ThemedText>
-      )}
-    </View>
-  )
-}
-
-export default CredentialCardLogo

package/src/components/views/CredentialDetailPrimaryHeader.tsx

@@ -1,107 +0,0 @@
-import { StyleSheet, useWindowDimensions, View } from 'react-native'
-import { BrandingOverlay } from '@bifold/oca'
-import { BrandingOverlayType, CredentialOverlay } from '@bifold/oca/build/legacy'
-import CardWatermark from '../../components/misc/CardWatermark'
-import { useTheme } from '../../contexts/theme'
-import { credentialTextColor } from '../../utils/credential'
-import { testIdWithKey } from '../../utils/testable'
-import { CredentialExchangeRecord } from '@credo-ts/core'
-import { useTranslation } from 'react-i18next'
-import { formatTime } from '../../utils/helpers'
-import { ThemedText } from '../texts/ThemedText'
-
-type CredentialDetailPrimaryHeaderProps = {
-  overlay: CredentialOverlay<BrandingOverlay>
-  brandingOverlayType?: BrandingOverlayType
-  credential?: CredentialExchangeRecord
-}
-
-const paddingHorizontal = 24
-const paddingVertical = 16
-const logoHeight = 80
-
-const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps> = ({
-  overlay,
-  brandingOverlayType = BrandingOverlayType.Branding10,
-  credential,
-}: CredentialDetailPrimaryHeaderProps) => {
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-  const { width, height } = useWindowDimensions()
-  const isBranding11 = brandingOverlayType === BrandingOverlayType.Branding11
-  const styles = StyleSheet.create({
-    primaryHeaderContainer: {
-      paddingHorizontal: isBranding11 ? 16 : paddingHorizontal,
-      paddingVertical,
-      overflow: 'hidden',
-    },
-    textContainer: {
-      color:
-        brandingOverlayType === BrandingOverlayType.Branding10
-          ? credentialTextColor(ColorPalette, overlay.brandingOverlay?.primaryBackgroundColor)
-          : ColorPalette.brand.primary,
-    },
-  })
-
-  return (
-    <View
-      testID={testIdWithKey('CredentialDetailsPrimaryHeader')}
-      style={[styles.primaryHeaderContainer, { zIndex: -1 }]}
-    >
-      <View>
-        {overlay.metaOverlay?.watermark && brandingOverlayType === BrandingOverlayType.Branding10 && (
-          <CardWatermark width={width} height={height} watermark={overlay.metaOverlay?.watermark} />
-        )}
-        {brandingOverlayType === BrandingOverlayType.Branding10 && (
-          <ThemedText
-            accessibilityLabel={`${t('Credentials.IssuedBy')} ${overlay.metaOverlay?.issuer}`}
-            testID={testIdWithKey('CredentialIssuer')}
-            variant="label"
-            style={[
-              styles.textContainer,
-              {
-                paddingLeft: logoHeight + paddingVertical,
-                paddingBottom: paddingVertical,
-                lineHeight: 19,
-                opacity: 0.8,
-              },
-            ]}
-            numberOfLines={1}
-          >
-            {overlay.metaOverlay?.issuer}
-          </ThemedText>
-        )}
-        <ThemedText
-          accessibilityLabel={`${overlay.metaOverlay?.name} ${t('Credentials.Credential')}`}
-          testID={testIdWithKey('CredentialName')}
-          style={[
-            styles.textContainer,
-            {
-              lineHeight: 24,
-            },
-          ]}
-        >
-          {overlay.metaOverlay?.name}
-        </ThemedText>
-        {brandingOverlayType === BrandingOverlayType.Branding11 && credential && (
-          <ThemedText
-            testID={testIdWithKey('IssuedOn')}
-            style={[
-              styles.textContainer,
-              {
-                lineHeight: 24,
-                marginTop: 8,
-                fontSize: 14,
-                color: ColorPalette.grayscale.mediumGrey,
-              },
-            ]}
-          >
-            {t('CredentialDetails.IssuedOn')} {formatTime(credential.createdAt, { includeHour: true })}
-          </ThemedText>
-        )}
-      </View>
-    </View>
-  )
-}
-
-export default CredentialDetailPrimaryHeader

package/src/components/views/CredentialDetailSecondaryHeader.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { BrandingOverlay } from '@bifold/oca'
-import { BrandingOverlayType, CredentialOverlay } from '@bifold/oca/build/legacy'
-import { ImageBackground, StyleSheet, View } from 'react-native'
-import { toImageSource } from '../../utils/credential'
-import { testIdWithKey } from '../../utils/testable'
-
-type CredentialDetailSecondaryHeaderProps = {
-  overlay: CredentialOverlay<BrandingOverlay>
-  brandingOverlayType?: BrandingOverlayType
-}
-
-const logoHeight = 80
-
-const CredentialDetailSecondaryHeader: React.FC<CredentialDetailSecondaryHeaderProps> = ({
-  overlay,
-  brandingOverlayType = BrandingOverlayType.Branding10,
-}: CredentialDetailSecondaryHeaderProps) => {
-  const styles = StyleSheet.create({
-    secondaryHeaderContainer: {
-      height: 1.5 * logoHeight,
-      backgroundColor:
-        (overlay.brandingOverlay?.backgroundImage
-          ? 'rgba(0, 0, 0, 0)'
-          : overlay.brandingOverlay?.secondaryBackgroundColor) ?? 'rgba(0, 0, 0, 0.24)',
-    },
-  })
-
-  return (
-    <>
-      {overlay.brandingOverlay?.backgroundImage ? (
-        <ImageBackground
-          source={toImageSource(overlay.brandingOverlay?.backgroundImage)}
-          imageStyle={{
-            resizeMode: 'cover',
-          }}
-        >
-          <View testID={testIdWithKey('CredentialDetailsSecondaryHeader')} style={styles.secondaryHeaderContainer} />
-        </ImageBackground>
-      ) : (
-        <View testID={testIdWithKey('CredentialDetailsSecondaryHeader')} style={styles.secondaryHeaderContainer}>
-          {brandingOverlayType === BrandingOverlayType.Branding11 && (
-            <View
-              style={[
-                {
-                  position: 'absolute',
-                  width: '100%',
-                  height: '100%',
-                  backgroundColor: 'rgba(0,0,0,0.24)',
-                },
-              ]}
-            />
-          )}
-        </View>
-      )}
-    </>
-  )
-}
-
-export default CredentialDetailSecondaryHeader

package/src/components/views/HeaderWithBanner.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-import { StackHeaderProps, Header } from '@react-navigation/stack'
-import { useServices, TOKENS } from '../../container-api'
-
-const HeaderWithBanner: React.FC<StackHeaderProps> = (props) => {
-  const [NotificationBanner] = useServices([TOKENS.COMPONENT_NOTIFICATION_BANNER])
-
-  return (
-    <View>
-      <Header {...props} />
-      <NotificationBanner />
-    </View>
-  )
-}
-
-export default HeaderWithBanner

package/src/components/views/HomeFooterView.tsx

@@ -1,110 +0,0 @@
-import { CredentialState } from '@credo-ts/core'
-import { useCredentialByState } from '@credo-ts/react-hooks'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { StyleSheet, View } from 'react-native'
-import { useTheme } from '../../contexts/theme'
-import { useOpenIDCredentials } from '../../modules/openid/context/OpenIDCredentialRecordProvider'
-import { ThemedText } from '../texts/ThemedText'
-
-const offset = 25
-
-interface HomeFooterViewProps {
-  children?: any
-}
-
-const HomeFooterView: React.FC<HomeFooterViewProps> = ({ children }) => {
-  const { openIdState } = useOpenIDCredentials()
-  const { w3cCredentialRecords, sdJwtVcRecords } = openIdState
-  const credentials = [
-    ...useCredentialByState(CredentialState.CredentialReceived),
-    ...useCredentialByState(CredentialState.Done),
-    ...w3cCredentialRecords,
-    ...sdJwtVcRecords,
-  ]
-  const { HomeTheme, TextTheme, Assets } = useTheme()
-  const { t } = useTranslation()
-
-  const styles = StyleSheet.create({
-    container: {
-      paddingHorizontal: offset,
-      paddingBottom: offset * 3,
-    },
-
-    messageContainer: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginHorizontal: offset,
-    },
-
-    imageContainer: {
-      alignItems: 'center',
-      marginTop: 100,
-    },
-  })
-
-  const displayMessage = (credentialCount: number) => {
-    if (typeof credentialCount === 'undefined' && credentialCount >= 0) {
-      throw new Error('Credential count cannot be undefined')
-    }
-
-    let credentialMsg
-    let scanReminder
-
-    if (credentialCount === 1) {
-      credentialMsg = (
-        <ThemedText>
-          {t('Home.YouHave')}{' '}
-          <ThemedText style={{ fontWeight: TextTheme.bold.fontWeight }}>{credentialCount}</ThemedText>{' '}
-          {t('Home.Credential')} {t('Home.InYourWallet')}
-        </ThemedText>
-      )
-    } else if (credentialCount > 1) {
-      credentialMsg = (
-        <ThemedText>
-          {t('Home.YouHave')}{' '}
-          <ThemedText style={{ fontWeight: TextTheme.bold.fontWeight }}>{credentialCount}</ThemedText>{' '}
-          {t('Home.Credentials')} {t('Home.InYourWallet')}
-        </ThemedText>
-      )
-    } else {
-      credentialMsg = <ThemedText variant="bold">{t('Home.NoCredentials')}</ThemedText>
-      scanReminder = <ThemedText>{t('Home.ScanOfferAddCard')}</ThemedText>
-    }
-
-    return (
-      <>
-        <View style={styles.imageContainer}>
-          <Assets.svg.homeCenterImg {...{ width: '30%' }} />
-        </View>
-
-        <View style={styles.messageContainer}>
-          <ThemedText
-            adjustsFontSizeToFit
-            style={[HomeTheme.credentialMsg, { marginTop: offset, textAlign: 'center' }]}
-          >
-            {credentialMsg}
-          </ThemedText>
-        </View>
-
-        <View style={styles.messageContainer}>
-          <ThemedText
-            adjustsFontSizeToFit
-            style={[HomeTheme.credentialMsg, { marginTop: offset, textAlign: 'center' }]}
-          >
-            {scanReminder}
-          </ThemedText>
-        </View>
-      </>
-    )
-  }
-
-  return (
-    <View>
-      <View style={styles.container}>{displayMessage(credentials.length)}</View>
-      {children}
-    </View>
-  )
-}
-
-export default HomeFooterView