App/id picker flow (#1126)

* add new id picker flow

* refactor: update document management screen actions

- Renamed `handleScanDocument` to `handleAddDocument` for clarity.
- Updated navigation from 'DocumentOnboarding' to 'CountryPicker'.
- Removed unused `handleAddAadhaar` function and its associated button.

* address pr feedback

* address lint issues

* fix test

* fix typings and screen

* fix e2e button test

---------

Co-authored-by: Justin Hernandez <justin.hernandez@self.xyz>

app/src/components/NavBar/BaseNavBar.tsx

@@ -98,7 +98,6 @@ const Container: React.FC<NavBarProps> = ({
       <SystemBars style={barStyle} />
       <XStack
         backgroundColor={backgroundColor}
-        flexGrow={1}
         justifyContent="flex-start"
         alignItems="center"
         {...props}

app/src/components/NavBar/DocumentFlowNavBar.tsx

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import { HelpCircle } from '@tamagui/lucide-icons';
+
+import { NavBar } from '@/components/NavBar/BaseNavBar';
+import { slate100 } from '@/utils/colors';
+import { dinot } from '@/utils/fonts';
+
+export const DocumentFlowNavBar = ({
+  title,
+  titleFontFamily = dinot,
+  fontSize = 17,
+}: {
+  title: string;
+  titleFontFamily?: string;
+  fontSize?: number;
+}) => {
+  const navigation = useNavigation();
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <NavBar.Container
+      paddingTop={top}
+      backgroundColor={slate100}
+      paddingHorizontal="$4"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <NavBar.LeftAction component="back" onPress={() => navigation.goBack()} />
+      <NavBar.Title fontFamily={titleFontFamily} fontSize={fontSize}>
+        {title}
+      </NavBar.Title>
+      <NavBar.RightAction
+        component={<HelpCircle color={'transparent'} />}
+        onPress={() => {
+          /* Handle help action, button is transparent for now as we dont have the help screen ready */
+        }}
+      />
+    </NavBar.Container>
+  );
+};

app/src/components/flag/RoundFlag.tsx

@@ -0,0 +1,77 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import getCountryISO2 from 'country-iso-3-to-2';
+import React from 'react';
+import { View } from 'react-native';
+import * as CountryFlags from 'react-native-svg-circle-country-flags';
+
+import { slate300 } from '@/utils/colors';
+
+type CountryFlagComponent = React.ComponentType<{
+  width: number;
+  height: number;
+}>;
+
+type CountryFlagsRecord = Record<string, CountryFlagComponent>;
+
+interface RoundFlagProps {
+  countryCode: string;
+  size: number;
+}
+
+const findFlagComponent = (formattedCode: string) => {
+  const patterns = [
+    formattedCode,
+    formattedCode.toLowerCase(),
+    formattedCode.charAt(0).toUpperCase() +
+      formattedCode.charAt(1).toLowerCase(),
+  ];
+
+  for (const pattern of patterns) {
+    const component = (CountryFlags as unknown as CountryFlagsRecord)[pattern];
+    if (component) {
+      return component;
+    }
+  }
+  return null;
+};
+
+const getCountryFlag = (countryCode: string): CountryFlagComponent | null => {
+  try {
+    const normalizedCountryCode = countryCode === 'D<<' ? 'DEU' : countryCode;
+    const iso2 = getCountryISO2(normalizedCountryCode);
+    if (!iso2) {
+      return null;
+    }
+
+    const formattedCode = iso2.toUpperCase();
+    return findFlagComponent(formattedCode);
+  } catch (error) {
+    console.error('Error getting country flag:', error);
+    return null;
+  }
+};
+
+export const RoundFlag: React.FC<RoundFlagProps> = ({ countryCode, size }) => {
+  const CountryFlagComponent = getCountryFlag(countryCode);
+
+  if (!CountryFlagComponent) {
+    return (
+      <View
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: slate300,
+        }}
+      />
+    );
+  }
+
+  return (
+    <View style={{ alignItems: 'center' }}>
+      <CountryFlagComponent width={size} height={size} />
+    </View>
+  );
+};