diff --git a/app/src/components/homescreen/IdCard.tsx b/app/src/components/homescreen/IdCard.tsx index 1a9cfbffc..d3e942b34 100644 --- a/app/src/components/homescreen/IdCard.tsx +++ b/app/src/components/homescreen/IdCard.tsx @@ -4,19 +4,23 @@ import type { FC } from 'react'; import React from 'react'; -import { Dimensions } from 'react-native'; +import { Alert, Dimensions, Pressable } from 'react-native'; 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'; import { isAadhaarDocument, isMRZDocument } from '@selfxyz/common/utils/types'; +import { WarningTriangleIcon } from '@selfxyz/euclid/dist/components/icons/WarningTriangleIcon'; 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 AadhaarIcon from '@selfxyz/mobile-sdk-alpha/svgs/icons/aadhaar.svg'; @@ -41,6 +45,7 @@ interface IdCardLayoutAttributes { idDocument: PassportData | AadhaarData | null; selected: boolean; hidden: boolean; + isInactive: boolean; } // This layout should be fully adaptative. I should perfectly fit in any screen size. @@ -53,7 +58,10 @@ const IdCardLayout: FC = ({ idDocument, selected, hidden, + isInactive, }) => { + const navigation = useNavigation(); + // Early return if document is null if (!idDocument) { return null; @@ -96,6 +104,54 @@ const IdCardLayout: FC = ({ alignItems="center" justifyContent="center" > + {isInactive && ( + { + switch (idDocument.documentCategory) { + case 'passport': + case 'id_card': + navigation.navigate('DocumentOnboarding'); + break; + case 'aadhaar': + navigation.navigate('AadhaarUpload', { countryCode: 'IND' }); + break; + default: + navigation.navigate('CountryPicker'); + break; + } + }} + > + + + + + + + Your document is inactive + + + Tap here to recover your ID + + + + + )} = ({ )} + + {isInactive && ( + + + INACTIVE + + + )} diff --git a/app/src/screens/home/HomeScreen.tsx b/app/src/screens/home/HomeScreen.tsx index 151da5f55..6edecffc5 100644 --- a/app/src/screens/home/HomeScreen.tsx +++ b/app/src/screens/home/HomeScreen.tsx @@ -49,6 +49,7 @@ import type { RootStackParamList } from '@/navigation'; import { usePassport } from '@/providers/passportDataProvider'; import { useSettingStore } from '@/stores/settingStore'; import useUserStore from '@/stores/userStore'; +import { isDocumentInactive } from '@/utils/documents'; const HomeScreen: React.FC = () => { const selfClient = useSelfClient(); @@ -69,6 +70,9 @@ const HomeScreen: React.FC = () => { >({}); const [loading, setLoading] = useState(true); const hasIncrementedOnFocus = useRef(false); + const [isSelectedDocumentInactive, setIsSelectedDocumentInactive] = useState< + boolean | null + >(null); const { amount: selfPoints } = usePoints(); @@ -108,12 +112,32 @@ const HomeScreen: React.FC = () => { const loadDocuments = useCallback(async () => { setLoading(true); + try { const catalog = await loadDocumentCatalog(); const docs = await getAllDocuments(); setDocumentCatalog(catalog); setAllDocuments(docs); + + if (catalog.selectedDocumentId) { + const documentData = docs[catalog.selectedDocumentId]; + + if (documentData) { + try { + setIsSelectedDocumentInactive( + await isDocumentInactive( + selfClient, + documentData.data, + documentData.metadata, + ), + ); + } catch (error) { + // we don't want to block the home screen from loading + console.warn('Failed to check if document is inactive:', error); + } + } + } } catch (error) { console.warn('Failed to load documents:', error); } @@ -254,6 +278,8 @@ const HomeScreen: React.FC = () => { return null; } + // const isInactive = await isDocumentInactive(selfClient, documentData.data, secret); + return ( { >