feat: add new OCA branding 1.1 for credential details (#1427)

Signed-off-by: fc-santos <[email protected]>
openwallet-foundation · Feb 12, 2025 · f311ffa · f311ffa
1 parent 777a6b5
commit f311ffa
Show file tree

Hide file tree

Showing 12 changed files with 202 additions and 59 deletions.
diff --git a/packages/legacy/core/App/components/misc/VerifierCredentialCard.tsx b/packages/legacy/core/App/components/misc/VerifierCredentialCard.tsx
@@ -258,6 +258,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
               overlayType={brandingOverlayType}
               elevated={elevated}
               hasBody={overlay.metaOverlay?.issuer !== 'Unknown Contact'}
+              proof
             />
           )}
           <View style={{ flexDirection: 'row' }}>
@@ -348,14 +349,14 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
         style,
         {
           elevation: elevated ? 5 : 0,
-          overflow: 'hidden',
+          overflow: elevated ? 'visible' : 'hidden',
         },
       ]}
       onLayout={(event) => {
         setDimensions({ cardHeight: event.nativeEvent.layout.height, cardWidth: event.nativeEvent.layout.width })
       }}
     >
-      <View testID={testIdWithKey('CredentialCard')}>
+      <View testID={testIdWithKey('CredentialCard')} style={{ overflow: 'hidden' }}>
         {overlay.metaOverlay?.watermark && (
           <CardWatermark
             width={dimensions.cardWidth}

diff --git a/packages/legacy/core/App/components/views/CredentialCardLogo.tsx b/packages/legacy/core/App/components/views/CredentialCardLogo.tsx
@@ -1,36 +1,44 @@
 import { Image, StyleSheet, Text, View } from 'react-native'
 import { BrandingOverlay } from '@hyperledger/aries-oca'
-import { CredentialOverlay } from '@hyperledger/aries-oca/build/legacy'
+import { BrandingOverlayType, CredentialOverlay } from '@hyperledger/aries-oca/build/legacy'
 import { useTheme } from '../../contexts/theme'
 import { toImageSource } from '../../utils/credential'
+import { useMemo } from 'react'
 
 type Props = {
   overlay: CredentialOverlay<BrandingOverlay>
+  brandingOverlayType?: BrandingOverlayType
 }
 
-const logoHeight = 80
-const paddingHorizontal = 24
+const CredentialCardLogo: React.FC<Props> = ({
+  overlay,
+  brandingOverlayType = BrandingOverlayType.Branding10,
+}: Props) => {
+  const { TextTheme, CredentialCardShadowTheme } = useTheme()
+  const logoHeight = brandingOverlayType === BrandingOverlayType.Branding10 ? 80 : 48
+  const paddingHorizontal = 24
 
-const CredentialCardLogo: React.FC<Props> = ({ overlay }: Props) => {
-  const { TextTheme } = useTheme()
+  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: {
-      top: -0.5 * logoHeight,
-      left: paddingHorizontal,
-      marginBottom: -1 * logoHeight,
       width: logoHeight,
       height: logoHeight,
       backgroundColor: '#ffffff',
       borderRadius: 8,
       justifyContent: 'center',
       alignItems: 'center',
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 1,
-        height: 1,
-      },
-      shadowOpacity: 0.3,
+      ...(brandingOverlayType === BrandingOverlayType.Branding10 && {
+        top: -0.5 * logoHeight,
+        left: paddingHorizontal,
+        marginBottom: -1 * logoHeight,
+        ...CredentialCardShadowTheme,
+      }),
     },
   })
 
@@ -47,9 +55,7 @@ const CredentialCardLogo: React.FC<Props> = ({ overlay }: Props) => {
           }}
         />
       ) : (
-        <Text style={[TextTheme.title, { fontSize: 0.5 * logoHeight, color: '#000' }]}>
-          {(overlay.metaOverlay?.name ?? overlay.metaOverlay?.issuer ?? 'C')?.charAt(0).toUpperCase()}
-        </Text>
+        <Text style={[TextTheme.title, { fontSize: 0.5 * logoHeight, color: '#000' }]}>{logoText}</Text>
       )}
     </View>
   )

diff --git a/packages/legacy/core/App/components/views/CredentialDetailPrimaryHeader.tsx b/packages/legacy/core/App/components/views/CredentialDetailPrimaryHeader.tsx
@@ -1,29 +1,43 @@
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 import { BrandingOverlay } from '@hyperledger/aries-oca'
-import { CredentialOverlay } from '@hyperledger/aries-oca/build/legacy'
+import { BrandingOverlayType, CredentialOverlay } from '@hyperledger/aries-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'
 
 type CredentialDetailPrimaryHeaderProps = {
   overlay: CredentialOverlay<BrandingOverlay>
+  brandingOverlayType?: BrandingOverlayType
+  credential?: CredentialExchangeRecord
 }
 
 const paddingHorizontal = 24
 const paddingVertical = 16
 const logoHeight = 80
 
-const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps> = ({ overlay }: CredentialDetailPrimaryHeaderProps) => {
+const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps> = ({
+  overlay,
+  brandingOverlayType = BrandingOverlayType.Branding10,
+  credential,
+}: CredentialDetailPrimaryHeaderProps) => {
+  const { t } = useTranslation()
   const { TextTheme, ColorPallet } = useTheme()
   const { width, height } = useWindowDimensions()
   const styles = StyleSheet.create({
     primaryHeaderContainer: {
       paddingHorizontal,
       paddingVertical,
+      overflow: 'hidden',
     },
     textContainer: {
-      color: credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor),
+      color:
+        brandingOverlayType === BrandingOverlayType.Branding10
+          ? credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor)
+          : ColorPallet.grayscale.white,
     },
   })
 
@@ -33,25 +47,27 @@ const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps
       style={[styles.primaryHeaderContainer, { zIndex: -1 }]}
     >
       <View>
-        {overlay.metaOverlay?.watermark && (
+        {overlay.metaOverlay?.watermark && brandingOverlayType === BrandingOverlayType.Branding10 && (
           <CardWatermark width={width} height={height} watermark={overlay.metaOverlay?.watermark} />
         )}
-        <Text
-          testID={testIdWithKey('CredentialIssuer')}
-          style={[
-            TextTheme.label,
-            styles.textContainer,
-            {
-              paddingLeft: logoHeight + paddingVertical,
-              paddingBottom: paddingVertical,
-              lineHeight: 19,
-              opacity: 0.8,
-            },
-          ]}
-          numberOfLines={1}
-        >
-          {overlay.metaOverlay?.issuer}
-        </Text>
+        {brandingOverlayType === BrandingOverlayType.Branding10 && (
+          <Text
+            testID={testIdWithKey('CredentialIssuer')}
+            style={[
+              TextTheme.label,
+              styles.textContainer,
+              {
+                paddingLeft: logoHeight + paddingVertical,
+                paddingBottom: paddingVertical,
+                lineHeight: 19,
+                opacity: 0.8,
+              },
+            ]}
+            numberOfLines={1}
+          >
+            {overlay.metaOverlay?.issuer}
+          </Text>
+        )}
         <Text
           testID={testIdWithKey('CredentialName')}
           style={[
@@ -64,6 +80,23 @@ const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps
         >
           {overlay.metaOverlay?.name}
         </Text>
+        {brandingOverlayType === BrandingOverlayType.Branding11 && credential && (
+          <Text
+            testID={testIdWithKey('IssuedOn')}
+            style={[
+              TextTheme.normal,
+              styles.textContainer,
+              {
+                lineHeight: 24,
+                marginTop: 8,
+                fontSize: 14,
+                color: ColorPallet.grayscale.mediumGrey,
+              },
+            ]}
+          >
+            {t('CredentialDetails.IssuedOn')} {formatTime(credential.createdAt, { includeHour: true })}
+          </Text>
+        )}
       </View>
     </View>
   )

diff --git a/packages/legacy/core/App/components/views/CredentialDetailSecondaryHeader.tsx b/packages/legacy/core/App/components/views/CredentialDetailSecondaryHeader.tsx
@@ -1,17 +1,21 @@
 import React from 'react'
 import { BrandingOverlay } from '@hyperledger/aries-oca'
-import { CredentialOverlay } from '@hyperledger/aries-oca/build/legacy'
+import { BrandingOverlayType, CredentialOverlay } from '@hyperledger/aries-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 }: CredentialDetailSecondaryHeaderProps) => {
+const CredentialDetailSecondaryHeader: React.FC<CredentialDetailSecondaryHeaderProps> = ({
+  overlay,
+  brandingOverlayType = BrandingOverlayType.Branding10,
+}: CredentialDetailSecondaryHeaderProps) => {
   const styles = StyleSheet.create({
     secondaryHeaderContainer: {
       height: 1.5 * logoHeight,
@@ -34,7 +38,20 @@ const CredentialDetailSecondaryHeader: React.FC<CredentialDetailSecondaryHeaderP
           <View testID={testIdWithKey('CredentialDetailsSecondaryHeader')} style={styles.secondaryHeaderContainer} />
         </ImageBackground>
       ) : (
-        <View testID={testIdWithKey('CredentialDetailsSecondaryHeader')} style={styles.secondaryHeaderContainer} />
+        <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>
       )}
     </>
   )

diff --git a/packages/legacy/core/App/hooks/credential-card-styles.ts b/packages/legacy/core/App/hooks/credential-card-styles.ts
@@ -87,10 +87,9 @@ const useCredentialCardStyles = (
       paddingVertical: 4,
     },
     textContainer: {
-      color:
-        proof && brandingOverlayType === BrandingOverlayType.Branding10
-          ? TextTheme.normal.color
-          : credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor),
+      color: proof
+        ? TextTheme.normal.color
+        : credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor),
       flexShrink: 1,
       ...(brandingOverlayType === BrandingOverlayType.Branding11 && {
         fontSize: 16,

diff --git a/packages/legacy/core/App/localization/en/index.ts b/packages/legacy/core/App/localization/en/index.ts
@@ -492,6 +492,7 @@ const translation = {
     "CreatedAt": "Created At:",
     "Version": "Version",
     "Issued": "Issued",
+    "IssuedOn": "Issued on",
     "PrivacyPolicy": "Privacy policy",
     "TermsAndConditions": "Terms and conditions",
     "RemoveFromWallet": "Remove from wallet",

diff --git a/packages/legacy/core/App/localization/fr/index.ts b/packages/legacy/core/App/localization/fr/index.ts
@@ -492,6 +492,7 @@ const translation = {
         "CreatedAt": "Créé à :",
         "Version": "Version",
         "Issued": "Délivré",
+        "IssuedOn": "Émis le",
         "PrivacyPolicy": "Politique de confidentialité",
         "TermsAndConditions": "Conditions d'utilisation",
         "RemoveFromWallet": "Retirer du portefeuille",

diff --git a/packages/legacy/core/App/localization/pt-br/index.ts b/packages/legacy/core/App/localization/pt-br/index.ts
@@ -468,6 +468,7 @@ const translation = {
     "CreatedAt": "Criada em:",
     "Version": "Versão",
     "Issued": "Emitida",
+    "IssuedOn": "Emitida em",
     "PrivacyPolicy": "Política de privacidade",
     "TermsAndConditions": "Termos e condições",
     "RemoveFromWallet": "Remover da carteira",