Show badge for inactive documents

app/scripts/bundle-analyze-ci.cjs

@@ -17,8 +17,8 @@ if (!platform || !['android', 'ios'].includes(platform)) {
 // Bundle size thresholds in MB - easy to update!
 const BUNDLE_THRESHOLDS_MB = {
   // TODO: fix temporary bundle bump
-  ios: 45,
-  android: 45,
+  ios: 46,
+  android: 46,
 };
 
 function formatBytes(bytes) {

app/src/components/homescreen/IdCard.tsx

@@ -3,10 +3,11 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import type { FC } from 'react';
-import React from 'react';
-import { Image, StyleSheet } from 'react-native';
+import React, { useCallback } from 'react';
+import { Dimensions, Image, Pressable, StyleSheet } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { Text, XStack, YStack } from 'tamagui';
+import { Separator, Text, XStack, YStack } from 'tamagui';
+import { useNavigation } from '@react-navigation/native';
 
 import type { AadhaarData } from '@selfxyz/common';
 import type { PassportData } from '@selfxyz/common/types/passport';
@@ -16,8 +17,18 @@
   isKycDocument,
   isMRZDocument,
 } from '@selfxyz/common/utils/types';
+import { WarningTriangleIcon } from '@selfxyz/euclid/dist/components/icons/WarningTriangleIcon';
 import { RoundFlag } from '@selfxyz/mobile-sdk-alpha/components';
-import { white } from '@selfxyz/mobile-sdk-alpha/constants/colors';
+import {
+  black,
+  red600,
+  slate100,
+  slate300,
+  slate400,
+  slate500,
+  white,
+  yellow500,
+} from '@selfxyz/mobile-sdk-alpha/constants/colors';
 import { dinot, plexMono } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
 
 import CardBackgroundId1 from '@/assets/images/card_background_id1.png';
@@ -28,14 +39,21 @@
 import CardBackgroundId6 from '@/assets/images/card_background_id6.png';
 import DevCardLogo from '@/assets/images/dev_card_logo.svg';
 import DevCardWave from '@/assets/images/dev_card_wave.svg';
+import LogoGray from '@/assets/images/logo_gray.svg';
 import SelfLogoPending from '@/assets/images/self_logo_pending.svg';
 import WaveOverlay from '@/assets/images/wave_overlay.png';
 import { getSecurityLevel } from '@/components/homescreen/cardSecurityBadge';
 import { cardStyles } from '@/components/homescreen/cardStyles';
 import KycIdCard from '@/components/homescreen/KycIdCard';
+import { SvgXml } from '@/components/homescreen/SvgXmlWrapper';
 import { useCardDimensions } from '@/hooks/useCardDimensions';
 import { getBackgroundIndex } from '@/utils/cardBackgroundSelector';
-import { getDocumentAttributes } from '@/utils/documentAttributes';
+import {
+  formatDateFromYYMMDD,
+  getDocumentAttributes,
+  getNameAndSurname,
+} from '@/utils/documentAttributes';
+import { registerModalCallbacks } from '@/utils/modalCallbackRegistry';
 
 const CARD_BACKGROUNDS = [
   CardBackgroundId1,
@@ -279,6 +297,7 @@
   idDocument: PassportData | AadhaarData | KycData | null;
   selected: boolean;
   hidden: boolean;
+  isInactive?: boolean;
 }
 
 /**
@@ -293,7 +312,38 @@
   idDocument,
   selected,
   hidden,
+  isInactive = false,
 }) => {
+  const navigation = useNavigation();
+  const navigateToDocumentOnboarding = useCallback(() => {
+    switch (idDocument?.documentCategory) {
+      case 'passport':
+      case 'id_card':
+        navigation.navigate('DocumentOnboarding');
+        break;
+      case 'aadhaar':
+        navigation.navigate('AadhaarUpload', { countryCode: 'IND' });
+        break;
+    }
+  }, [idDocument?.documentCategory, navigation]);
+
+  const handleInactivePress = useCallback(() => {
+    const callbackId = registerModalCallbacks({
+      onButtonPress: navigateToDocumentOnboarding,
+      onModalDismiss: () => {},
+    });
+
+    navigation.navigate('Modal', {
+      titleText: 'Your ID needs to be reactivated to continue',
+      bodyText:
+        'Make sure that you have your document and recovery method ready.',
+      buttonText: 'Continue',
+      secondaryButtonText: 'Not now',
+      callbackId,
+    });
+  }, [navigateToDocumentOnboarding, navigation]);
+
+  // Early return if document is null
   // Call hooks at the top, before any conditional returns
   const {
     cardWidth,
@@ -399,7 +449,47 @@
   const truncatedId = getTruncatedId();
 
   return (
-    <YStack width="100%" alignItems="center" justifyContent="center">
+    // Container wrapper to handle shadow space properly
+    <YStack
+      width="100%" // Add space for horizontal margins
+      alignItems="center"
+      justifyContent="center"
+    >
+      {isInactive && (
+        <Pressable
+          style={styles.inactiveWarningContainer}
+          onPress={handleInactivePress}
+        >
+          <XStack
+            backgroundColor={red600}
+            borderRadius={8}
+            padding={16}
+            gap={16}
+          >
+            <YStack padding={8} backgroundColor={white} borderRadius={8}>
+              <WarningTriangleIcon color={yellow500} />
+            </YStack>
+            <YStack gap={4}>
+              <Text
+                color={white}
+                fontFamily={dinot}
+                fontSize={16}
+                fontWeight="500"
+              >
+                Your document is inactive
+              </Text>
+              <Text
+                color={white}
+                fontFamily={dinot}
+                fontSize={14}
+                fontWeight="400"
+              >
+                Tap here to recover your ID
+              </Text>
+            </YStack>
+          </XStack>
+        </Pressable>
+      )}
       <YStack
         width={cardWidth}
         height={cardHeight}
@@ -566,23 +656,45 @@
                   </Text>
                 </YStack>
 
-                {/* Security Badge */}
-                <YStack
-                  backgroundColor="rgba(0, 0, 0, 0.5)"
-                  borderRadius={30}
-                  paddingHorizontal={padding * 0.6}
-                  paddingVertical={padding * 0.3}
-                >
-                  <Text
-                    fontFamily={dinot}
-                    fontSize={fontSize.badge}
-                    fontWeight="500"
-                    color={white}
-                    textTransform="uppercase"
-                    letterSpacing={0.6}
+                {/* Bottom Right: Badges */}
+                <YStack alignItems="flex-end" gap={4}>
+                  {isInactive && (
+                    <YStack
+                      backgroundColor={red600}
+                      borderRadius={30}
+                      paddingHorizontal={padding * 0.6}
+                      paddingVertical={padding * 0.3}
+                    >
+                      <Text
+                        fontFamily={dinot}
+                        fontSize={fontSize.badge}
+                        fontWeight="500"
+                        color={white}
+                        textTransform="uppercase"
+                        letterSpacing={0.6}
+                      >
+                        INACTIVE
+                      </Text>
+                    </YStack>
+                  )}
+                  {/* Security Badge */}
+                  <YStack
+                    backgroundColor="rgba(0, 0, 0, 0.5)"
+                    borderRadius={30}
+                    paddingHorizontal={padding * 0.6}
+                    paddingVertical={padding * 0.3}
                   >
-                    {securityLevel}
-                  </Text>
+                    <Text
+                      fontFamily={dinot}
+                      fontSize={fontSize.badge}
+                      fontWeight="500"
+                      color={white}
+                      textTransform="uppercase"
+                      letterSpacing={0.6}
+                    >
+                      {securityLevel}
+                    </Text>
+                  </YStack>
                 </YStack>
               </XStack>
             </YStack>
@@ -605,6 +717,10 @@
     height: '90%',
     opacity: 0.6,
   },
+  inactiveWarningContainer: {
+    width: '100%',
+    marginBottom: 16,
+  },
 });
 
 export default IdCardLayout;

app/src/components/proof-request/BottomVerifyBar.tsx

@@ -18,6 +18,7 @@ export interface BottomVerifyBarProps {
   isReadyToProve: boolean;
   isDocumentExpired: boolean;
   testID?: string;
+  hasCheckedForInactiveDocument: boolean;
 }
 
 export const BottomVerifyBar: React.FC<BottomVerifyBarProps> = ({
@@ -28,6 +29,7 @@ export const BottomVerifyBar: React.FC<BottomVerifyBarProps> = ({
   isReadyToProve,
   isDocumentExpired,
   testID = 'bottom-verify-bar',
+  hasCheckedForInactiveDocument,
 }) => {
   const insets = useSafeAreaInsets();
 
@@ -46,6 +48,7 @@ export const BottomVerifyBar: React.FC<BottomVerifyBarProps> = ({
         isScrollable={isScrollable}
         isReadyToProve={isReadyToProve}
         isDocumentExpired={isDocumentExpired}
+        hasCheckedForInactiveDocument={hasCheckedForInactiveDocument}
       />
     </View>
   );

app/src/providers/passportDataProvider.tsx

@@ -52,6 +52,7 @@ import type {
 import {
   brutforceSignatureAlgorithmDsc,
   calculateContentHash,
+  inferDocumentCategory,
 } from '@selfxyz/common/utils';
 import { parseCertificateSimple } from '@selfxyz/common/utils/certificate_parsing/parseCertificateSimple';
 import type {
@@ -869,6 +870,12 @@ export async function storeDocumentWithDeduplication(
   // Store new document using contentHash as service name
   await storeDocumentDirectlyToKeychain(contentHash, passportData);
 
+  const documentCategory =
+    passportData.documentCategory ||
+    inferDocumentCategory(
+      (passportData as PassportData | AadhaarData).documentType,
+    );
+
   // Add to catalog
   let dataField: string;
   if (isMRZDocument(passportData)) {
@@ -886,6 +893,8 @@ export async function storeDocumentWithDeduplication(
     data: dataField,
     mock: passportData.mock || false,
     isRegistered: false,
+    hasExpirationDate:
+      documentCategory === 'id_card' || documentCategory === 'passport',
     ...(isKycDocument(passportData)
       ? (() => {
           try {

app/src/screens/dev/DevSettingsScreen.tsx

@@ -3,7 +3,7 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { Alert, ScrollView } from 'react-native';
 import { YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -13,6 +13,10 @@ import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
 import BugIcon from '@/assets/icons/bug_icon.svg';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import type { RootStackParamList } from '@/navigation';
+import {
+  loadDocumentCatalogDirectlyFromKeychain,
+  saveDocumentCatalogDirectlyToKeychain,
+} from '@/providers/passportDataProvider';
 import { ErrorInjectionSelector } from '@/screens/dev/components/ErrorInjectionSelector';
 import { LogLevelSelector } from '@/screens/dev/components/LogLevelSelector';
 import { ParameterSection } from '@/screens/dev/components/ParameterSection';
@@ -52,6 +56,32 @@ const DevSettingsScreen: React.FC = () => {
     handleClearPendingVerificationsPress,
   } = useDangerZoneActions();
 
+  const handleRemoveExpirationDateFlagPress = () => {
+    Alert.alert(
+      'Remove Expiration Date Flag',
+      'Are you sure you want to remove the expiration date flag for the current (selected) document?.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Remove',
+          style: 'destructive',
+          onPress: async () => {
+            const catalog = await loadDocumentCatalogDirectlyFromKeychain();
+            const selectedDocumentId = catalog.selectedDocumentId;
+            const selectedDocument = catalog.documents.find(
+              document => document.id === selectedDocumentId,
+            );
+
+            if (selectedDocument) {
+              delete selectedDocument.hasExpirationDate;
+
+              await saveDocumentCatalogDirectlyToKeychain(catalog);
+            }
+          },
+        },
+      ],
+    );
+  };
   return (
     <ErrorBoundary>
       <ScrollView showsVerticalScrollIndicator={false}>
@@ -109,6 +139,7 @@ const DevSettingsScreen: React.FC = () => {
             onResetBackupState={handleResetBackupStatePress}
             onClearBackupEvents={handleClearBackupEventsPress}
             onClearPendingKyc={handleClearPendingVerificationsPress}
+            onRemoveExpirationDateFlag={handleRemoveExpirationDateFlagPress}
           />
         </YStack>
       </ScrollView>

app/src/screens/dev/sections/DangerZoneSection.tsx

@@ -23,6 +23,7 @@ interface DangerZoneSectionProps {
   onResetBackupState: () => void;
   onClearBackupEvents: () => void;
   onClearPendingKyc: () => void;
+  onRemoveExpirationDateFlag: () => void;
 }
 
 export const DangerZoneSection: React.FC<DangerZoneSectionProps> = ({
@@ -32,6 +33,7 @@ export const DangerZoneSection: React.FC<DangerZoneSectionProps> = ({
   onResetBackupState,
   onClearBackupEvents,
   onClearPendingKyc,
+  onRemoveExpirationDateFlag,
 }) => {
   const dangerActions = [
     {
@@ -64,6 +66,11 @@ export const DangerZoneSection: React.FC<DangerZoneSectionProps> = ({
       onPress: onClearPendingKyc,
       dangerTheme: true,
     },
+    {
+      label: 'Remove expiration date flag',
+      onPress: onRemoveExpirationDateFlag,
+      dangerTheme: true,
+    },
   ];
 
   return (