countries search

src/screens/InAppScreens/TravelsScreen/Components/MegaregionsModal/index.tsx

@@ -1,17 +1,20 @@
 import ReactModal from 'react-native-modal';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View, Image } from 'react-native';
 import { styles } from './styles';
+import { API_HOST } from 'src/constants';
 
 const MegaregionsModal = ({
   isVisible,
   onClose,
   onSelect,
-  data
+  data,
+  isCountry = false
 }: {
   isVisible: boolean;
   onClose: () => void;
   onSelect: (object: { id: number; name: string }) => void;
-  data: { id: number; name: string }[];
+  data: { id: number; name: string; flag?: string }[];
+  isCountry?: boolean;
 }) => {
   return (
     <ReactModal
@@ -25,6 +28,9 @@ const MegaregionsModal = ({
         <ScrollView style={{ paddingBottom: 16 }} showsVerticalScrollIndicator={false}>
           {data?.map((item) => (
             <TouchableOpacity key={item.id} style={styles.btnOption} onPress={() => onSelect(item)}>
+              {isCountry ? (
+                <Image source={{ uri: `${API_HOST}${item.flag}` }} style={styles.flag} />
+              ) : null}
               <Text style={styles.btnOptionText}>{item.name}</Text>
             </TouchableOpacity>
           ))}

src/screens/InAppScreens/TravelsScreen/Components/MegaregionsModal/styles.tsx

@@ -3,11 +3,11 @@ import { Colors } from 'src/theme';
 
 export const styles = StyleSheet.create({
   btnOption: {
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
     paddingVertical: 9,
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 16
+    gap: 8
   },
   btnOptionText: { fontSize: 16, fontWeight: '600', color: Colors.DARK_BLUE },
   wrapper: {
@@ -20,5 +20,12 @@ export const styles = StyleSheet.create({
   modal: {
     justifyContent: 'flex-end',
     margin: 0
+  },
+  flag: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderColor: Colors.BORDER_LIGHT,
+    borderWidth: 1
   }
 });

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -25,16 +25,25 @@ import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
 import { NAVIGATION_PAGES } from 'src/types';
 import { useRegion } from 'src/contexts/RegionContext';
 import SearchIcon from 'assets/icons/search.svg';
+import { useGetListCountriesQuery } from '@api/countries';
 
 const RegionsScreen = () => {
   const token = storage.get('token', StoreType.STRING) as string;
   const { data: megaregions } = useGetMegaregionsQuery(String(token), true);
+  const { data: countriesList } = useGetListCountriesQuery(true);
   const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);
+  const [countrySelectorVisible, setCountrySelectorVisible] = useState(false);
   const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
     id: 1,
     name: 'SOUTHERN EUROPE'
   });
-  const { data: regionsQe } = useGetRegionQeQuery(selectedMega.id, undefined, String(token), true);
+  const [selectedCountry, setSelectedCountry] = useState<{ name: string; id: number } | null>(null);
+  const { data: regionsQe } = useGetRegionQeQuery(
+    selectedCountry ? undefined : selectedMega.id,
+    selectedCountry ? selectedCountry.id : undefined,
+    String(token),
+    true
+  );
   const [total, setTotal] = useState(0);
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
   const [contentIndex, setContentIndex] = useState(0);
@@ -104,6 +113,18 @@ const RegionsScreen = () => {
     [tccRegions]
   );
 
+  const handleMegaSelect = (mega: { name: string; id: number }) => {
+    setSelectedMega(mega);
+    setSelectedCountry(null);
+    setMegaSelectorVisible(false);
+  };
+
+  const handleCountrySelect = (country: { name: string; id: number }) => {
+    setSelectedCountry(country);
+    setSelectedMega({ id: -1, name: '-' });
+    setCountrySelectorVisible(false);
+  };
+
   useEffect(() => {
     if (nmRegions && nmRegions.length && token) {
       calcTotalCountries();
@@ -121,7 +142,7 @@ const RegionsScreen = () => {
     if (megaregions && megaregions.result === 'OK') {
       setContentIndex(0);
     }
-  }, [selectedMega]);
+  }, [selectedMega, selectedCountry]);
 
   const applyFilters = () => {
     let newNmData = nmRegions ?? [];
@@ -159,7 +180,7 @@ const RegionsScreen = () => {
 
   useEffect(() => {
     setSearch('');
-  }, [contentIndex, selectedMega]);
+  }, [contentIndex, selectedMega, selectedCountry]);
 
   useEffect(() => {
     if (megaregions && megaregions.result === 'OK') {
@@ -214,22 +235,17 @@ const RegionsScreen = () => {
 
   return (
     <PageWrapper>
-      <Header
-        label="Regions"
-        // rightElement={
-        //   <TouchableOpacity
-        //     onPress={() => navigation.navigate(NAVIGATION_PAGES.REGIONS_INFO as never)}
-        //     style={{ width: 30 }}
-        //   >
-        //     <InfoIcon />
-        //   </TouchableOpacity>
-        // }
-      />
+      <Header label="Regions" />
       <TouchableOpacity style={styles.megaSelector} onPress={() => setMegaSelectorVisible(true)}>
         <Text style={styles.megaButtonText}>{selectedMega?.name}</Text>
         <ChevronIcon width={18} height={18} />
       </TouchableOpacity>
 
+      <TouchableOpacity style={styles.megaSelector} onPress={() => setCountrySelectorVisible(true)}>
+        <Text style={styles.megaButtonText}>{selectedCountry?.name || '-'}</Text>
+        <ChevronIcon width={18} height={18} />
+      </TouchableOpacity>
+
       <View style={{ marginBottom: 16 }}>
         <Input
           inputMode={'search'}
@@ -308,13 +324,18 @@ const RegionsScreen = () => {
       <MegaregionsModal
         isVisible={megaSelectorVisible}
         onClose={() => setMegaSelectorVisible(false)}
-        onSelect={(object) => {
-          setMegaSelectorVisible(false);
-          setSelectedMega(object);
-        }}
+        onSelect={handleMegaSelect}
         data={megaregions?.data ?? []}
       />
 
+      <MegaregionsModal
+        isVisible={countrySelectorVisible}
+        onClose={() => setCountrySelectorVisible(false)}
+        onSelect={handleCountrySelect}
+        data={countriesList?.data ?? []}
+        isCountry={true}
+      />
+
       <EditNmModal
         isVisible={isEditModalVisible}
         onClose={() => setIsEditModalVisible(false)}