Fixes: view document info screen (#1201)

* add aadhar to DocumentInfoScreen instead of showing empty fields

* fix: clicking icon on first row of settingScreen navigates back

* review comments

app/src/components/NavBar/BaseNavBar.tsx

@@ -41,7 +41,7 @@ export const LeftAction: React.FC<LeftActionProps> = ({
       case 'back':
         return (
           <Button
-            hitSlop={100}
+            hitSlop={{ top: 20, bottom: 10, left: 20, right: 10 }}
             onPress={onPress}
             unstyled
             icon={<ChevronLeft size={30} color={color} />}
@@ -50,7 +50,7 @@ export const LeftAction: React.FC<LeftActionProps> = ({
       case 'close':
         return (
           <Button
-            hitSlop={100}
+            hitSlop={{ top: 20, bottom: 10, left: 20, right: 10 }}
             onPress={onPress}
             unstyled
             icon={<X size={30} color={color} />}
@@ -61,7 +61,11 @@ export const LeftAction: React.FC<LeftActionProps> = ({
         return null;
       default:
         return (
-          <Button hitSlop={100} onPress={onPress} unstyled>
+          <Button
+            hitSlop={{ top: 20, bottom: 10, left: 20, right: 10 }}
+            onPress={onPress}
+            unstyled
+          >
             {component}
           </Button>
         );

app/src/providers/passportDataProvider.tsx

@@ -148,7 +148,7 @@ export const PassportProvider = ({ children }: PassportProviderProps) => {
 
   const getData = useCallback(
     () =>
-      _getWithBiometrics<PassportData>(
+      _getWithBiometrics<PassportData | AadhaarData>(
         loadPassportData,
         str => JSON.parse(str),
         {
@@ -617,7 +617,10 @@ interface PassportProviderProps extends PropsWithChildren {
   authenticationTimeoutinMs?: number;
 }
 interface IPassportContext {
-  getData: () => Promise<{ signature: string; data: PassportData } | null>;
+  getData: () => Promise<{
+    signature: string;
+    data: PassportData | AadhaarData;
+  } | null>;
   getSelectedData: () => Promise<{
     signature: string;
     data: PassportData;

app/src/screens/settings/DocumentDataInfoScreen.tsx

@@ -8,6 +8,7 @@ import { ScrollView, Separator, XStack, YStack } from 'tamagui';
 import { useFocusEffect } from '@react-navigation/native';
 
 import type { PassportMetadata } from '@selfxyz/common/types';
+import type { AadhaarData } from '@selfxyz/common/utils/types';
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 import { DocumentEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
 
@@ -16,8 +17,15 @@ import { usePassport } from '@/providers/passportDataProvider';
 import { black, slate200, white } from '@/utils/colors';
 import { extraYPadding } from '@/utils/constants';
 
+type DocumentMetadata =
+  | (PassportMetadata & { documentCategory: 'passport' | 'id_card' })
+  | {
+      documentCategory: 'aadhaar';
+      documentType: string;
+    };
+
 // TODO clarify if we need more/less keys to be displayed
-const dataKeysToLabels: Record<
+const passportDataKeysToLabels: Record<
   keyof Omit<PassportMetadata, 'countryCode' | 'dsc' | 'csca'>,
   string
 > = {
@@ -44,6 +52,11 @@ const dataKeysToLabels: Record<
   cscaSignatureAlgorithmBits: 'CSCA Signature Algorithm Bits',
 };
 
+const aadhaarDataKeysToLabels: Record<string, string> = {
+  documentType: 'Document Type',
+  documentCategory: 'Document Category',
+};
+
 const InfoRow: React.FC<{
   label: string;
   value: string | number;
@@ -62,7 +75,7 @@ const InfoRow: React.FC<{
 const DocumentDataInfoScreen: React.FC = () => {
   const { trackEvent } = useSelfClient();
   const { getData } = usePassport();
-  const [metadata, setMetadata] = useState<PassportMetadata | null>(null);
+  const [metadata, setMetadata] = useState<DocumentMetadata | null>(null);
   const { bottom } = useSafeAreaInsets();
 
   const loadData = useCallback(async () => {
@@ -77,8 +90,36 @@ const DocumentDataInfoScreen: React.FC = () => {
       return;
     }
 
-    setMetadata(result.data.passportMetadata!);
-    trackEvent(DocumentEvents.PASSPORT_METADATA_LOADED);
+    const documentCategory = result.data.documentCategory as
+      | 'passport'
+      | 'id_card'
+      | 'aadhaar';
+
+    if (documentCategory === 'aadhaar') {
+      const aadhaarData = result.data as AadhaarData;
+      const aadhaarMetadata = {
+        documentCategory: aadhaarData.documentCategory,
+        documentType: aadhaarData.documentType,
+        publicKey: aadhaarData.publicKey,
+      } as const;
+      setMetadata(aadhaarMetadata);
+      trackEvent(DocumentEvents.PASSPORT_METADATA_LOADED, {
+        documentType: 'aadhaar',
+      });
+    } else {
+      if (!('passportMetadata' in result.data)) {
+        console.warn('DocumentDataInfoScreen: passportMetadata is missing');
+        return;
+      }
+
+      const passportMetadata = result.data.passportMetadata;
+      const passportMetadataWithCategory = {
+        ...passportMetadata,
+        documentCategory,
+      } as PassportMetadata & { documentCategory: 'passport' | 'id_card' };
+      setMetadata(passportMetadataWithCategory);
+      trackEvent(DocumentEvents.PASSPORT_METADATA_LOADED);
+    }
   }, [metadata, getData, trackEvent]);
 
   useFocusEffect(() => {
@@ -86,6 +127,11 @@ const DocumentDataInfoScreen: React.FC = () => {
     loadData();
   });
 
+  const isAadhaarDocument = metadata?.documentCategory === 'aadhaar';
+  const dataKeysToLabels = isAadhaarDocument
+    ? aadhaarDataKeysToLabels
+    : passportDataKeysToLabels;
+
   return (
     <YStack
       flex={1}
@@ -102,13 +148,17 @@ const DocumentDataInfoScreen: React.FC = () => {
             value={
               !metadata
                 ? ''
-                : key === 'cscaFound'
-                  ? metadata?.cscaFound === true
-                    ? 'Yes'
-                    : 'No'
-                  : (metadata?.[key as keyof PassportMetadata] as
+                : isAadhaarDocument
+                  ? (metadata?.[key as keyof DocumentMetadata] as
                       | string
                       | number) || 'None'
+                  : key === 'cscaFound'
+                    ? (metadata as PassportMetadata)?.cscaFound === true
+                      ? 'Yes'
+                      : 'No'
+                    : (metadata?.[key as keyof DocumentMetadata] as
+                        | string
+                        | number) || 'None'
             }
           />
         ))}