update unsupported passport screen (#953)

* update unsupported passport screen * yarn nice
2026-01-09 22:58:20 -05:00 · 2025-08-25 22:13:41 +02:00
parent 431f556542
commit cf75bfa0ba
9 changed files with 320 additions and 103 deletions
--- a/app/ios/Podfile.lock
+++ b/app/ios/Podfile.lock
@@ -2192,7 +2192,7 @@ SPEC CHECKSUMS:
  GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15
  hermes-engine: ea92f60f37dba025e293cbe4b4a548fd26b610a0
  lottie-ios: a881093fab623c467d3bce374367755c272bdd59
-  lottie-react-native: b0dc69202923f4baf341b360ab636f742b84a36a
+  lottie-react-native: d97e225bb686cf6ddda429229b370faa9599d584
  Mixpanel-swift: e9bef28a9648faff384d5ba6f48ecc2787eb24c0
  nanopb: 438bc412db1928dac798aa6fd75726007be04262
  NFCPassportReader: 48873f856f91215dbfa1eaaec20eae639672862e
@@ -2206,80 +2206,80 @@ SPEC CHECKSUMS:
  RCTTypeSafety: 28e24a6e44f5cbf912c66dde6ab7e07d1059a205
  React: c2830fa483b0334bda284e46a8579ebbe0c5447e
  React-callinvoker: 4aecde929540c26b841a4493f70ebf6016691eb8
-  React-Core: 32a581847d74ce9b5f51d9d11a4e4d132ad61553
-  React-CoreModules: f53e0674e1747fa41c83bc970e82add97b14ad87
-  React-cxxreact: 86f3b1692081fd954a0cb27cc90d14674645b64b
+  React-Core: 9c059899f00d46b5cec3ed79251f77d9c469553d
+  React-CoreModules: 9fac2d31803c0ed03e4ddaa17f1481714f8633a5
+  React-cxxreact: a979810a3ca4045ceb09407a17563046a7f71494
  React-debug: 7e346b6eeacd2ee1118a0ee7d39f613b428b4be8
-  React-defaultsnativemodule: 5ab6844adce01f0e52671eaa6d806e2214bbfc44
-  React-domnativemodule: 448609757e37684cf407cda13d1f6c47deec44cf
-  React-Fabric: bfef5f9db01f81b73eed5a58fe1e46949c0c665e
-  React-FabricComponents: 4e845f93a35050a7c0f9dac7805caa62552be939
-  React-FabricImage: 3478af0ed02c8728680b23f2dd890e59069856ea
+  React-defaultsnativemodule: 02b3b73698aca4f8ebfe03e3802bbb8eafb30d6c
+  React-domnativemodule: 90e3bc5a3e57b367b9787c78a39d7e8dc15cb3b0
+  React-Fabric: 7e3f79f77929338739d4f6936ecc12cca23644ac
+  React-FabricComponents: ba910350959d665f6335bdf6cf6347e99661cdac
+  React-FabricImage: df5337c9b500542ce744c98327625c420dcd1256
  React-featureflags: 4c45b3c06f9a124d2598aff495bfc59470f40597
-  React-featureflagsnativemodule: 1c482a7ea0e69330cc59895192a73a2f6f737c33
-  React-graphics: eb61d404819486a2d9335c043a967a0c4b8ca743
-  React-hermes: cad69ee9a53870cc38e5386889aa7ea81c75b6a1
-  React-idlecallbacksnativemodule: 1e3f0212792ace82cc6f3b91f53f5d034f533acc
-  React-ImageManager: 6652c4cc3de260b5269d58277de383cacd53a234
-  React-jserrorhandler: 552c5fcd2ee64307c568734b965ea082e1be25cf
-  React-jsi: bc1f6073e203fb540edd6d26f926ad041809b443
-  React-jsiexecutor: 1e8fc70dd9614c3e9d5c3c876b2ea3cd1d931ee4
-  React-jsinspector: 11cf0ade960351b76217a16e31418b9d7f881513
-  React-jsitracing: e512a1023a25de831b51be1c773caa6036125a44
-  React-logger: 80d87daf2f98bf95ab668b79062c1e0c3f0c2f8a
-  React-Mapbuffer: b2642edd9be75d51ead8cda109c986665eae09cf
-  React-microtasksnativemodule: 94f7e35c4984282f04f946fb1be1d008aff4bdf0
-  react-native-app-auth: eb42594042a25455119a8c57194b4fd25b9352f4
-  react-native-biometrics: 43ed5b828646a7862dbc7945556446be00798e7d
-  react-native-cloud-storage: eeffe84e54f693bd2c6cdda098f006039ee8bdf9
-  react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
-  react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
-  react-native-nfc-manager: a280ef94cd4871a471b052f0dc70381cf1223049
-  react-native-safe-area-context: 827032edf27079702cbd006f11dc79451a2d744b
-  react-native-sqlite-storage: 0c84826214baaa498796c7e46a5ccc9a82e114ed
+  React-featureflagsnativemodule: daee66dc32dd85a16bfd912911cc33fc7d50542d
+  React-graphics: a2e6209991a191c94405a234460e05291fa986b9
+  React-hermes: 2069b08e965e48b7f8aa2c0ca0a2f383349ed55d
+  React-idlecallbacksnativemodule: 8e1d156b4e47cc6a5f80f53869131417979f7c64
+  React-ImageManager: 17772f78d93539a1a10901b5f537031772fa930c
+  React-jserrorhandler: 62af5111f6444688182a5850d4b584cbc0c5d6a8
+  React-jsi: d68f1d516e5120a510afe356647a6a1e1f98f2db
+  React-jsiexecutor: 6366a08a0fc01c9b65736f8deacd47c4a397912a
+  React-jsinspector: e21448249ea4a247f1b5786089e3cfe63d5c0111
+  React-jsitracing: dab78a74a581f63320604c9de4ab9039209e0501
+  React-logger: d79b704bf215af194f5213a6b7deec50ba8e6a9b
+  React-Mapbuffer: 42c779748af341935a63ad8831723b8cb1e97830
+  React-microtasksnativemodule: fc15e6b9e8cc5a99d1cfa0f31c454c4c3de4e7ae
+  react-native-app-auth: 149f01d2c824758453c9e7815217ded451974683
+  react-native-biometrics: 352e5a794bfffc46a0c86725ea7dc62deb085bdc
+  react-native-cloud-storage: 9343984544441a394b72d79de845640e3abfbc45
+  react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
+  react-native-netinfo: f0a9899081c185db1de5bb2fdc1c88c202a059ac
+  react-native-nfc-manager: 5213321cf6c18d879c8092c0bf56806b771ec5ac
+  react-native-safe-area-context: 657def25b5590dfbde705aec2925b06725f27450
+  react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
  React-nativeconfig: 31072ab0146e643594f6959c7f970a04b6c9ddd0
-  React-NativeModulesApple: 356d0eb7e3b79603e9d611cd3bac658a998c71db
+  React-NativeModulesApple: f49bb0befd8650ac3ff8fc2684072b16c09bf478
  React-perflogger: 59e1a3182dca2cee7b9f1f7aab204018d46d1914
-  React-performancetimeline: 2bf8625ff44f482cba84e48e4ab21dee405d68cd
+  React-performancetimeline: 3d70a278cc3344def506e97aff3640e658656110
  React-RCTActionSheet: d80e68d3baa163e4012a47c1f42ddd8bcd9672cc
-  React-RCTAnimation: 051f0781709c5ed80ba8aa2b421dfb1d72a03162
-  React-RCTAppDelegate: 106d225d076988b06aa4834e68d1ab754f40cacf
-  React-RCTBlob: 895eaf8bca2e76ee1c95b479235c6ccebe586fc6
-  React-RCTFabric: 1d736a1f539ae72dcefd473f964f532a0e658309
-  React-RCTImage: b73149c0cd54b641dba2d6250aaf168fee784d9f
-  React-RCTLinking: 23e519712285427e50372fbc6e0265d422abf462
-  React-RCTNetwork: a5d06d122588031989115f293654b13353753630
-  React-RCTSettings: 87d03b5d94e6eadd1e8c1d16a62f790751aafb55
-  React-RCTText: 75e9dd39684f4bcd1836134ac2348efaca7437b3
-  React-RCTVibration: 033c161fe875e6fa096d0d9733c2e2501682e3d4
+  React-RCTAnimation: bde981f6bd7f8493696564da9b3bd05721d3b3cc
+  React-RCTAppDelegate: 0176615c51476c88212bf3edbafb840d39ea7631
+  React-RCTBlob: 520a0382bf8e89b9153d60e3c6293e51615834e9
+  React-RCTFabric: f04c63400264f44a252ebba62dfb8cff8e5bd9b4
+  React-RCTImage: 90448d2882464af6015ed57c98f463f8748be465
+  React-RCTLinking: 1bd95d0a704c271d21d758e0f0388cced768d77d
+  React-RCTNetwork: 218af6e63eb9b47935cc5a775b7a1396cf10ff91
+  React-RCTSettings: e10b8e42b0fce8a70fbf169de32a2ae03243ef6b
+  React-RCTText: e7bf9f4997a1a0b45c052d4ad9a0fe653061cf29
+  React-RCTVibration: 5b70b7f11e48d1c57e0d4832c2097478adbabe93
  React-rendererconsistency: 35cef4bc4724194c544b6e5e2bd9b3f7aff52082
-  React-rendererdebug: 4e801e9f8d16d21877565dca2845a2e56202b8c6
+  React-rendererdebug: 9b1a6a2d4f8086a438f75f28350ccba16b7b706a
  React-rncore: 2c7c94d6e92db0850549223eb2fa8272e0942ac2
-  React-RuntimeApple: ff845be41902d053f1348541a647e669a2f509f4
-  React-RuntimeCore: 8b30ac97af1bdd5d2622ee2a75becf1e552b89c7
+  React-RuntimeApple: 90f1dfd648cae853afb60eb13a9579c942b2df33
+  React-RuntimeCore: 355ee6b0c3a7f4e66afe44f757a7585fc6008c9e
  React-runtimeexecutor: ea90d8e3a9e0f4326939858dafc6ab17c031a5d3
-  React-RuntimeHermes: 6a5be21d1f8a603989d8734a0021c0534df23dd9
-  React-runtimescheduler: 21ad58e37e35a132f2a5ecad78e68ea7fbc8e2ba
-  React-utils: 0dbea1179726ad65a1b13470a3f3c73da98f4496
-  ReactCodegen: 688a0970a2fc6a4481718d8ca86ff504f2a21723
-  ReactCommon: 23eed247b5c8e57b59a823ce209353883da61dd2
-  RNCAsyncStorage: b44e8a4e798c3e1f56bffccd0f591f674fb9198f
-  RNCClipboard: 4abb037e8fe3b98a952564c9e0474f91c492df6d
-  RNDeviceInfo: d863506092aef7e7af3a1c350c913d867d795047
-  RNFBApp: 4097f75673f8b42a7cd1ba17e6ea85a94b45e4d1
-  RNFBMessaging: 92325b0d5619ac90ef023a23cfd16fd3b91d0a88
-  RNFBRemoteConfig: a569bacaa410acfcaba769370e53a787f80fd13b
-  RNGestureHandler: 4a7cce66468343e82d601e8f6cdc0148b18b6c6b
-  RNKeychain: 42a94ceb08a6c33db453bc34cae46458b6a14a08
-  RNLocalize: 15463c4d79c7da45230064b4adcf5e9bb984667e
-  RNReactNativeHapticFeedback: c873497ad3f9fa80447baa18daa9474e671d24bf
-  RNScreens: 584a35ba1a56a628fc564216b0b6f7b9f070c282
-  RNSentry: d66e96602d8e05b7789e3e095aca53a9f21dab55
-  RNSVG: e3ad69848b6357587545e0a49628b1148acf082c
-  segment-analytics-react-native: 5c3e8a4ee6d7532a011ed862d7c7d4fb5e5303e2
+  React-RuntimeHermes: 13d33b49355663bdbbca6719abcbc4f534f274b9
+  React-runtimescheduler: 1132af91176dcc8ac566b10f7b57b10873125564
+  React-utils: d1bae5ac6a5fb94a772ebfc7a7e1aba3a6706a3a
+  ReactCodegen: 18aa2cb03418f6ea9f318785e339128accab12f0
+  ReactCommon: 1007c09a406a451ddbd874e51511aa541d6034f6
+  RNCAsyncStorage: 23e56519cc41d3bade3c8d4479f7760cb1c11996
+  RNCClipboard: 60fed4b71560d7bfe40e9d35dea9762b024da86d
+  RNDeviceInfo: feea80a690d2bde1fe51461cf548039258bd03f2
+  RNFBApp: dd35ba8340b89c36e42c4c137915c01d3c792143
+  RNFBMessaging: c8d34d9ad44a3258a77e548bba6dc3561af7cf2d
+  RNFBRemoteConfig: 7e219246c63c47f56cfe07eee1a044ed298261c8
+  RNGestureHandler: a52601cdccc6213650ad4a9eb2911360d13f4447
+  RNKeychain: a58690e4450434e8e900ed47032fa58c59cc5570
+  RNLocalize: 06991b9c31e7a898a9fa6ddb204ce0f53a967248
+  RNReactNativeHapticFeedback: 293365e4df1faef21be8b8efe22c7b217c5e695a
+  RNScreens: eee0beadb969b9c1c0ceca4e89744c8d69d782e0
+  RNSentry: 9ecfddd2650b783586da93871ca87561c61facf8
+  RNSVG: 28b61fc4856abe8eaea46794419f848986ee7e80
+  segment-analytics-react-native: de13f89e52d49c1f4ed33ba86ae24f055722a643
  Sentry: 2cbbe3592f30050c60e916c63c7f5a2fa584005e
  SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  sovran-react-native: a3ad3f8ff90c2002b2aa9790001a78b0b0a38594
+  sovran-react-native: eec37f82e4429f0e3661f46aaf4fcd85d1b54f60
  SwiftQRScanner: e85a25f9b843e9231dab89a96e441472fe54a724
  SwiftyTesseract: 1f3d96668ae92dc2208d9842c8a59bea9fad2cbb
  Yoga: b05994d1933f507b0a28ceaa4fdb968dc18da178
--- a/app/package.json
+++ b/app/package.json
@@ -130,6 +130,7 @@
    "react-native-screens": "4.9.0",
    "react-native-sqlite-storage": "^6.0.1",
    "react-native-svg": "^15.11.1",
+    "react-native-svg-circle-country-flags": "^0.2.2",
    "react-native-svg-web": "^1.0.9",
    "react-native-web": "^0.19.0",
    "react-qr-barcode-scanner": "^2.1.7",
--- a/app/src/consts/analytics.ts
+++ b/app/src/consts/analytics.ts
@@ -92,6 +92,7 @@ export const PassportEvents = {
  CANCEL_PASSPORT_NFC: 'Passport: Cancel Passport NFC',
  DATA_LOAD_ERROR: 'Passport: Passport Data Load Error',
  DISMISS_UNSUPPORTED_PASSPORT: 'Passport: Dismiss Unsupported Passport',
+  NOTIFY_UNSUPPORTED_PASSPORT: 'Passport: Notify Unsupported Passport',
  NFC_RESPONSE_PARSE_FAILED: 'Passport: Parsing NFC Response Unsuccessful',
  NFC_SCAN_FAILED: 'Passport: NFC Scan Failed',
  NFC_SCAN_SUCCESS: 'Passport: NFC Scan Success',
--- a/app/src/navigation/passport.ts
+++ b/app/src/navigation/passport.ts
@@ -76,6 +76,9 @@ const passportScreens = {
    options: {
      headerShown: false,
    } as NativeStackNavigationOptions,
+    initialParams: {
+      passportData: null,
+    },
  },
  PassportNFCMethodSelection: {
    screen: NFCMethodSelectionScreen,
--- a/app/src/screens/dev/MockDataScreen.tsx
+++ b/app/src/screens/dev/MockDataScreen.tsx
@@ -125,6 +125,7 @@ const signatureAlgorithmToStrictSignatureAlgorithm = {
    'ecdsa_sha512_brainpoolP384r1_384',
  ],
  'sha512 poland': ['sha512', 'sha512', 'rsa_sha256_65537_4096'],
+  'not existing': ['sha512', 'sha384', 'rsa_sha256_65537_4096'],
 } as const;

 const formatDateToYYMMDD = (date: Date): string => {
--- a/app/src/screens/passport/UnsupportedPassportScreen.tsx
+++ b/app/src/screens/passport/UnsupportedPassportScreen.tsx
@@ -2,30 +2,106 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.

-import LottieView from 'lottie-react-native';
-import React, { useEffect } from 'react';
+import getCountryISO2 from 'country-iso-3-to-2';
+import React, { useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import * as CountryFlags from 'react-native-svg-circle-country-flags';
+import { XStack, YStack } from 'tamagui';
+import type { RouteProp } from '@react-navigation/native';
+
+import { countryCodes } from '@selfxyz/common/constants';
+import type { PassportData } from '@selfxyz/common/types';

-import warnAnimation from '@/assets/animations/warning.json';
 import { PrimaryButton } from '@/components/buttons/PrimaryButton';
-import { Caption } from '@/components/typography/Caption';
-import Description from '@/components/typography/Description';
+import { SecondaryButton } from '@/components/buttons/SecondaryButton';
+import { BodyText } from '@/components/typography/BodyText';
 import { Title } from '@/components/typography/Title';
 import { PassportEvents } from '@/consts/analytics';
 import useHapticNavigation from '@/hooks/useHapticNavigation';
+import LogoSvg from '@/images/logo.svg';
 import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
-import { styles } from '@/screens/prove/ProofRequestStatusScreen';
 import analytics from '@/utils/analytics';
-import { black, white } from '@/utils/colors';
+import { black, slate500, white } from '@/utils/colors';
+import { sendCountrySupportNotification } from '@/utils/email';
 import { notificationError } from '@/utils/haptic';
 import { hasAnyValidRegisteredDocument } from '@/utils/proving/validateDocument';

 const { flush: flushAnalytics } = analytics();

-const UnsupportedPassportScreen: React.FC = () => {
+type UnsupportedPassportScreenRouteProp = RouteProp<
+  {
+    UnsupportedPassport: {
+      passportData: PassportData | null;
+    };
+  },
+  'UnsupportedPassport'
+>;
+
+interface UnsupportedPassportScreenProps {
+  route: UnsupportedPassportScreenRouteProp;
+}
+
+const UnsupportedPassportScreen: React.FC<UnsupportedPassportScreenProps> = ({
+  route,
+}) => {
  const navigateToLaunch = useHapticNavigation('Launch');
  const navigateToHome = useHapticNavigation('Home');
+  const passportData = route.params?.passportData;

-  const onPress = async () => {
+  const { countryName, country2AlphaCode, documentTypeText } = useMemo(() => {
+    try {
+      const countryCode = passportData?.passportMetadata?.countryCode;
+      if (countryCode) {
+        // Handle Germany corner case where country code is "D<<" instead of "DEU"
+        let normalizedCountryCode = countryCode;
+        if (countryCode === 'D<<') {
+          normalizedCountryCode = 'DEU';
+        }
+
+        const iso2 = getCountryISO2(normalizedCountryCode);
+        const extractedCode = iso2
+          ? iso2.charAt(0).toUpperCase() + iso2.charAt(1).toLowerCase()
+          : 'Unknown';
+        const name =
+          countryCodes[normalizedCountryCode as keyof typeof countryCodes];
+        const docType =
+          passportData?.documentCategory === 'id_card'
+            ? 'ID Cards'
+            : 'Passports';
+        return {
+          countryName: name,
+          country2AlphaCode: extractedCode,
+          documentTypeText: docType,
+        };
+      }
+    } catch (error) {
+      console.error('Error extracting country from passport data:', error);
+    }
+    const docType =
+      passportData?.documentCategory === 'id_card' ? 'ID Cards' : 'Passports';
+    return {
+      countryName: 'Unknown',
+      country2AlphaCode: 'Unknown',
+      documentTypeText: docType,
+    };
+  }, [passportData]);
+
+  // Get country flag component dynamically
+  const getCountryFlag = (code: string) => {
+    try {
+      const FlagComponent = (CountryFlags as any)[code];
+      if (FlagComponent) {
+        return FlagComponent;
+      }
+    } catch (error) {
+      console.error('Error getting country flag:', error);
+      return null;
+    }
+  };
+
+  const CountryFlagComponent = getCountryFlag(country2AlphaCode);
+
+  const onDismiss = async () => {
    const hasValidDocument = await hasAnyValidRegisteredDocument();
    if (hasValidDocument) {
      navigateToHome();
@@ -33,6 +109,20 @@ const UnsupportedPassportScreen: React.FC = () => {
      navigateToLaunch();
    }
  };
+
+  const onNotifyMe = async () => {
+    try {
+      await sendCountrySupportNotification({
+        countryName,
+        countryCode:
+          country2AlphaCode !== 'Unknown' ? country2AlphaCode : undefined,
+        documentCategory: passportData?.documentCategory,
+      });
+    } catch (error) {
+      console.error('Failed to open email client:', error);
+    }
+  };
+
  useEffect(() => {
    notificationError();
    // error screen, flush analytics
@@ -40,35 +130,75 @@ const UnsupportedPassportScreen: React.FC = () => {
  }, []);

  return (
-    <>
-      <ExpandableBottomLayout.Layout backgroundColor={black}>
-        <ExpandableBottomLayout.TopSection backgroundColor={black}>
-          <LottieView
-            autoPlay
-            loop={false}
-            source={warnAnimation}
-            style={styles.animation}
-            cacheComposition={true}
-            renderMode="HARDWARE"
-          />
-        </ExpandableBottomLayout.TopSection>
-        <ExpandableBottomLayout.BottomSection gap={20} backgroundColor={white}>
-          <Title textAlign="center">There was a problem</Title>
-          <Description textAlign="center" style={{ color: black }}>
-            It looks like your passport is not currently supported by Self.
-          </Description>
-          <Caption size="small" textAlign="center" textBreakStrategy="balanced">
-            Don't panic, we're working hard to extend support to more regions.
-          </Caption>
-          <PrimaryButton
-            trackEvent={PassportEvents.DISMISS_UNSUPPORTED_PASSPORT}
-            onPress={onPress}
+    <ExpandableBottomLayout.Layout backgroundColor={black}>
+      <ExpandableBottomLayout.TopSection backgroundColor={white}>
+        <YStack
+          flex={1}
+          justifyContent="center"
+          alignItems="center"
+          marginTop={100}
+        >
+          <XStack
+            justifyContent="center"
+            alignItems="center"
+            marginBottom={20}
+            gap={12}
          >
-            Dismiss
-          </PrimaryButton>
-        </ExpandableBottomLayout.BottomSection>
-      </ExpandableBottomLayout.Layout>
-    </>
+            {CountryFlagComponent && (
+              <View style={{ alignItems: 'center' }}>
+                <CountryFlagComponent width={60} height={60} />
+              </View>
+            )}
+          </XStack>
+          <Title
+            fontSize={32}
+            textAlign="center"
+            color={black}
+            marginBottom={16}
+          >
+            Coming Soon
+          </Title>
+          <BodyText
+            fontSize={17}
+            textAlign="center"
+            color={black}
+            marginBottom={10}
+            paddingHorizontal={10}
+          >
+            We're working to roll out support for {documentTypeText} in{' '}
+            {countryName}.
+          </BodyText>
+          <BodyText
+            fontSize={17}
+            textAlign="center"
+            color={slate500}
+            marginBottom={40}
+            paddingHorizontal={10}
+          >
+            Sign up for live updates.
+          </BodyText>
+        </YStack>
+      </ExpandableBottomLayout.TopSection>
+      <ExpandableBottomLayout.BottomSection
+        gap={16}
+        backgroundColor={white}
+        paddingHorizontal={20}
+        paddingVertical={20}
+      >
+        <PrimaryButton
+          onPress={onNotifyMe}
+          trackEvent={PassportEvents.NOTIFY_UNSUPPORTED_PASSPORT}
+        >
+          Sign up for updates
+        </PrimaryButton>
+        <SecondaryButton
+          trackEvent={PassportEvents.DISMISS_UNSUPPORTED_PASSPORT}
+          onPress={onDismiss}
+        >
+          Dismiss
+        </SecondaryButton>
+      </ExpandableBottomLayout.BottomSection>
+    </ExpandableBottomLayout.Layout>
  );
 };

--- a/app/src/utils/email.ts
+++ b/app/src/utils/email.ts
@@ -16,6 +16,64 @@ interface SendFeedbackEmailOptions {
  recipient?: string;
 }

+/**
+ * Sends a notification email requesting support for a specific country
+ * @param options Configuration for the country support notification email
+ */
+export const sendCountrySupportNotification = async ({
+  countryName,
+  countryCode,
+  documentCategory,
+  subject = `Country Support Request: ${countryName}`,
+  recipient = 'team@self.xyz',
+}: SendCountrySupportNotificationOptions): Promise<void> => {
+  const deviceInfo = [
+    ['device', `${Platform.OS}@${Platform.Version}`],
+    ['app', `v${version}`],
+    [
+      'locales',
+      getLocales()
+        .map(locale => `${locale.languageCode}-${locale.countryCode}`)
+        .join(','),
+    ],
+    ['userCountry', getCountry()],
+    ['requestedCountry', countryCode || 'Unknown'],
+    ['documentCategory', documentCategory || 'Unknown'],
+    ['tz', getTimeZone()],
+    ['ts', new Date().toISOString()],
+    ['origin', 'unsupported_passport_screen'],
+  ] as [string, string][];
+
+  const documentTypeText =
+    documentCategory === 'id_card' ? 'ID cards' : 'passports';
+
+  const body = `Hi SELF Team,
+
+I would like to request support for ${countryName} ${documentTypeText} in the SELF app. Please notify me when support becomes available.
+
+Additional comments (optional):
+
+
+---
+Technical Details (do not modify):
+${deviceInfo.map(([k, v]) => `${k}=${v}`).join('\n')}
+---`;
+
+  await Linking.openURL(
+    `mailto:${recipient}?subject=${encodeURIComponent(
+      subject,
+    )}&body=${encodeURIComponent(body)}`,
+  );
+};
+
+interface SendCountrySupportNotificationOptions {
+  countryName: string;
+  countryCode?: string;
+  documentCategory?: string;
+  subject?: string;
+  recipient?: string;
+}
+
 /**
 * Sends a feedback email with device information and user message
 * @param options Configuration for the feedback email
--- a/app/src/utils/proving/provingMachine.ts
+++ b/app/src/utils/proving/provingMachine.ts
@@ -266,7 +266,10 @@ export const useProvingStore = create<ProvingState>((set, get) => {
      }
      if (state.value === 'passport_not_supported') {
        if (navigationRef.isReady()) {
-          navigationRef.navigate('UnsupportedPassport');
+          const currentPassportData = get().passportData;
+          (navigationRef as any).navigate('UnsupportedPassport', {
+            passportData: currentPassportData,
+          });
        }
      }
      if (state.value === 'account_recovery_choice') {
--- a/yarn.lock
+++ b/yarn.lock
@@ -5234,10 +5234,12 @@ __metadata:
    react-native-logs: "npm:^5.3.0"
    react-native-nfc-manager: "npm:^3.15.1"
    react-native-passport-reader: "npm:^1.0.3"
+    react-native-round-flags: "npm:^1.0.4"
    react-native-safe-area-context: "npm:^5.5.1"
    react-native-screens: "npm:4.9.0"
    react-native-sqlite-storage: "npm:^6.0.1"
    react-native-svg: "npm:^15.11.1"
+    react-native-svg-circle-country-flags: "npm:^0.2.2"
    react-native-svg-transformer: "npm:^1.5.0"
    react-native-svg-web: "npm:^1.0.9"
    react-native-web: "npm:^0.19.0"
@@ -22583,6 +22585,13 @@ __metadata:
  languageName: node
  linkType: hard

+"react-native-round-flags@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "react-native-round-flags@npm:1.0.4"
+  checksum: 10c0/d09bf2fe9fd16aac3b7eba9034b30cb5a21c6dff9f9f46670cba3b393c0a8b8b37c06fde8292eb1ff492568e89619883f499091b689ddf1e556cf96e2e2ca03a
+  languageName: node
+  linkType: hard
+
 "react-native-safe-area-context@npm:^5.5.1":
  version: 5.5.1
  resolution: "react-native-safe-area-context@npm:5.5.1"
@@ -22615,6 +22624,17 @@ __metadata:
  languageName: node
  linkType: hard

+"react-native-svg-circle-country-flags@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "react-native-svg-circle-country-flags@npm:0.2.2"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-svg: "*"
+  checksum: 10c0/9403583b28dba8b317f4bd8e9a2ddfa873fa468cefc047db0d49705fd0dc990bc2029909e3fe899659a31da5961d64dc07b86aa71583f41e6ac81b3019aee824
+  languageName: node
+  linkType: hard
+
 "react-native-svg-transformer@npm:^1.5.0":
  version: 1.5.1
  resolution: "react-native-svg-transformer@npm:1.5.1"