fix: proof request missing attribute (openwallet-foundation#1307)

Signed-off-by: al-rosenthal <[email protected]>
fullboar · Nov 20, 2024 · 498de1e · 498de1e
1 parent a0b2f85
commit 498de1e
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 243 deletions.
diff --git a/packages/legacy/core/App/components/misc/CredentialCard11.tsx b/packages/legacy/core/App/components/misc/CredentialCard11.tsx
@@ -128,7 +128,6 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
     const secondaryField = overlay?.presentationFields?.find(
       (field) => field.name === overlay?.brandingOverlay?.secondaryAttribute
     )
-
     return [...(displayItems ?? []), primaryField, secondaryField]
   }, [displayItems, overlay])
 
@@ -224,12 +223,6 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
       borderRadius: 15,
       borderColor: ColorPallet.semantic.focus,
     },
-    seperator: {
-      width: '100%',
-      height: 2,
-      marginVertical: 10,
-      backgroundColor: ColorPallet.grayscale.lightGrey,
-    },
     credActionText: {
       fontSize: 20,
       fontWeight: TextTheme.bold.fontWeight,
@@ -240,6 +233,9 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
   const backgroundColorIfErrorState = (backgroundColor?: string) =>
     error || predicateError || isProofRevoked ? ColorPallet.notification.errorBorder : backgroundColor
 
+  const backgroundColorIfRevoked = (backgroundColor?: string) =>
+    isProofRevoked ? ColorPallet.notification.errorBorder : backgroundColor
+
   const fontColorWithHighContrast = () => {
     if (proof) {
       return ColorPallet.grayscale.mediumGrey
@@ -382,7 +378,6 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
 
   const AttributeLabel: React.FC<{ label: string }> = ({ label }) => {
     const ylabel = overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label)
-
     return (
       <Text
         style={[
@@ -400,11 +395,29 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
     )
   }
 
+  const AttributeErrorLabel: React.FC<{ errorMessage: string }> = ({ errorMessage }) => {
+    return (
+      <Text
+        style={[
+          TextTheme.labelSubtitle,
+          styles.textContainer,
+          {
+            lineHeight: 19,
+            opacity: 0.8,
+            color: ListItems.proofError.color,
+          },
+        ]}
+      >
+        {errorMessage}
+      </Text>
+    )
+  }
+
   const AttributeValue: React.FC<{ value: string | number | null; warn?: boolean }> = ({ value, warn }) => {
     return (
       <>
         {isDataUrl(value) ? (
-          <Image style={styles.imageAttr} source={{ uri: value as string }}></Image>
+          <Image style={styles.imageAttr} source={{ uri: value as string }} />
         ) : (
           <Text
             style={[
@@ -431,18 +444,30 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
       item && (
         <View style={{ marginTop: 15 }}>
           {!(item?.value || item?.satisfied) ? (
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Icon
-                style={{ paddingTop: 2, paddingHorizontal: 2 }}
-                name="close"
-                color={ListItems.proofError.color}
-                size={ListItems.recordAttributeText.fontSize}
-              />
-              <AttributeLabel label={label} />
+            <View>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <AttributeLabel label={label} />
+              </View>
+              {item.hasError && (
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  <Icon
+                    style={{ paddingTop: 2, paddingHorizontal: 2 }}
+                    name="close"
+                    color={ListItems.proofError.color}
+                    size={ListItems.recordAttributeText.fontSize}
+                  />
+                  <AttributeErrorLabel
+                    errorMessage={t('ProofRequest.MissingAttribute', {
+                      name: overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label),
+                    })}
+                  />
+                </View>
+              )}
             </View>
           ) : (
             <AttributeLabel label={label} />
           )}
+          {/* Rendering attribute values */}
           {!(item?.value || item?.pValue) ? null : (
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               {flaggedAttributes?.includes(label) && !item.pValue && !allPI && proof && (
@@ -453,12 +478,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
                   size={ListItems.recordAttributeText.fontSize}
                 />
               )}
-              {!error ? (
-                <AttributeValue
-                  warn={flaggedAttributes?.includes(label) && !item.pValue && proof}
-                  value={parsedValue}
-                />
-              ) : null}
+              <AttributeValue warn={flaggedAttributes?.includes(label) && !item.pValue && proof} value={parsedValue} />
             </View>
           )}
           {!error && item?.satisfied != undefined && item?.satisfied === false ? (
@@ -512,12 +532,12 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
             </Text>
           </View>
         </View>
-        {(error || isProofRevoked) && (
+        {isProofRevoked && (
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             <Icon style={styles.errorIcon} name="close" size={30} />
 
             <Text style={styles.errorText} testID={testIdWithKey('RevokedOrNotAvailable')} numberOfLines={1}>
-              {error ? t('ProofRequest.NotAvailableInYourWallet') : t('CredentialDetails.Revoked')}
+              {t('CredentialDetails.Revoked')}
             </Text>
           </View>
         )}
@@ -555,7 +575,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
         style={[
           styles.secondaryBodyContainer,
           {
-            backgroundColor: backgroundColorIfErrorState(styles.secondaryBodyContainer.backgroundColor),
+            backgroundColor: backgroundColorIfRevoked(styles.secondaryBodyContainer.backgroundColor),
             overflow: 'hidden',
           },
         ]}

diff --git a/packages/legacy/core/App/localization/en/index.ts b/packages/legacy/core/App/localization/en/index.ts
@@ -644,6 +644,7 @@ const translation = {
     "CredentialMetadataNotFound": "Could not find credential metadata",
     "NewProofRequest": "New Proof Request",
     "NotAvailableInYourWallet": "Not in your wallet",
+    "MissingAttribute": "{{ name }} is missing",
     "PredicateNotSatisfied": "Requirement not met",
     "IsRequesting": "is requesting",
     "IsRequestingSomethingYouDontHaveAvailable": "is requesting something you don't have available",

diff --git a/packages/legacy/core/App/localization/fr/index.ts b/packages/legacy/core/App/localization/fr/index.ts
@@ -636,6 +636,7 @@ const translation = {
         "CredentialMetadataNotFound": "Impossible de trouver les métadonnées des attestations",
         "NewProofRequest": "Nouvelle demande de preuve",
         "NotAvailableInYourWallet": "Non disponible dans votre portefeuille",
+        "MissingAttribute": "{{ name }} is missing (FR)",
         "PredicateNotSatisfied": "Requête non satisfaite",
         "IsRequesting": "demande",
         "IsRequestingSomethingYouDontHaveAvailable": "demande quelque chose que vous n'avez pas à votre disposition",

diff --git a/packages/legacy/core/App/localization/pt-br/index.ts b/packages/legacy/core/App/localization/pt-br/index.ts
@@ -620,6 +620,7 @@ const translation = {
     "CredentialMetadataNotFound": "Não foi possível encontrar metadados de credenciais",
     "NewProofRequest": "Nova Prova de Credencial",
     "NotAvailableInYourWallet": "Não disponível em sua carteira",
+    "MissingAttribute": "{{ name }} is missing (PT-BR)",
     "PredicateNotSatisfied": "Requisito não atendido",
     "IsRequesting": "está requisitando",
     "IsRequestingSomethingYouDontHaveAvailable": "está requisitando algo que você não tem disponível",

diff --git a/packages/legacy/core/App/screens/ProofRequest.tsx b/packages/legacy/core/App/screens/ProofRequest.tsx
@@ -200,7 +200,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
     fields: {
       [key: string]: Attribute[] & Predicate[]
     }
-  ) => {
+  ): boolean => {
     const revList = credExRecords.map((cred) => {
       return {
         id: cred.credentials.map((item) => item.credentialRecordId),
@@ -238,6 +238,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
           setLoading(false)
           setDescriptorMetadata(descriptorMetadata)
 
+          // Credentials that satisfy the proof request
           let credList: string[] = []
           if (selectedCredentials.length > 0) {
             credList = selectedCredentials
@@ -282,6 +283,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
                 >,
               }
             : undefined
+
           setRetrievedCredentials(selectRetrievedCredentials)
 
           const activeCreds = groupedProof.filter((item: any) => credList.includes(item.credId))
@@ -294,7 +296,7 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
               return { ...prev, [current.credId]: current.attributes ?? current.predicates ?? [] }
             }, {})
           }
-
+          // Check for revoked credentials
           const records = fullCredentials.filter((record: any) =>
             record.credentials.some((cred: any) => credList.includes(cred.credentialRecordId))
           )
@@ -692,32 +694,6 @@ const ProofRequest: React.FC<ProofRequestProps> = ({ navigation, proofId }) => {
           />
           {!hasAvailableCredentials && (
             <CredentialList
-              header={
-                <View style={styles.pageMargin}>
-                  {!(loading || attestationLoading) && (
-                    <>
-                      {hasMatchingCredDef && (
-                        <View
-                          style={{
-                            width: 'auto',
-                            borderWidth: 1,
-                            borderColor: ColorPallet.grayscale.lightGrey,
-                            marginTop: 20,
-                          }}
-                        />
-                      )}
-                      <Text
-                        style={{
-                          ...TextTheme.title,
-                          marginTop: 10,
-                        }}
-                      >
-                        {t('ProofRequest.MissingCredentials')}
-                      </Text>
-                    </>
-                  )}
-                </View>
-              }
               footer={proofPageFooter()}
               items={activeCreds.filter((cred) => cred.credExchangeRecord === undefined) ?? []}
             />