dare screen

Route.tsx

@@ -39,6 +39,7 @@ import AddNewTripScreen from 'src/screens/InAppScreens/TravelsScreen/AddNewTripS
 import AddRegionsScreen from 'src/screens/InAppScreens/TravelsScreen/AddRegionsScreen';
 import CountriesScreen from 'src/screens/InAppScreens/TravelsScreen/CountriesScreen';
 import RegionsScreen from 'src/screens/InAppScreens/TravelsScreen/RegionsScreen';
+import DareScreen from 'src/screens/InAppScreens/TravelsScreen/DareScreen';
 
 import { NAVIGATION_PAGES } from './src/types';
 import { storage, StoreType } from './src/storage';
@@ -181,6 +182,7 @@ const Route = () => {
                   <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_REGIONS} component={AddRegionsScreen} />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.COUNTRIES} component={CountriesScreen} />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.REGIONS} component={RegionsScreen} />
+                  <ScreenStack.Screen name={NAVIGATION_PAGES.DARE} component={DareScreen} />
                 </ScreenStack.Navigator>
               )}
             </BottomTab.Screen>

src/modules/api/myDARE/dare-api.tsx

@@ -0,0 +1,38 @@
+import { request } from '../../../utils';
+import { API } from '../../../types';
+import { ResponseType } from '../response-type';
+
+export interface PostGetMegaReturn extends ResponseType {
+  data: {
+    id: number;
+    name: string;
+    new: 0 | 1;
+  }[];
+}
+
+export interface PostGetRegionsDAREReturn extends ResponseType {
+  data: {
+    id: number;
+    name: string;
+    essential: 0 | 1;
+    flag1: string;
+    flag2: string | null;
+    visited: string;
+    new: 0 | 1;
+  }[];
+}
+
+export interface PostSetDARERegion {
+  token: string;
+  region: number;
+  visits: 0 | 1;
+}
+
+export const dareApi = {
+  getMegaregionsDare: (token: string) =>
+    request.postForm<PostGetMegaReturn>(API.GET_MEGAREGIONS_DARE, { token }),
+  getRegionsDare: (megaregion: number, token: string) =>
+    request.postForm<PostGetRegionsDAREReturn>(API.GET_REGIONS_DARE, { megaregion, token }),
+  setDARERegion: (data: PostSetDARERegion) =>
+    request.postForm<ResponseType>(API.SET_DARE_REGION, data)
+};

src/modules/api/myDARE/dare-query-keys.tsx

@@ -0,0 +1,6 @@
+export const dareQueryKeys = {
+  getMegaregionsDare: (token: string) => ['getMegaregionsDare', { token }] as const,
+  getRegionsDare: (megaregion: number, token: string) =>
+    ['getRegionsDare', { megaregion, token }] as const,
+  setDARERegion: () => ['setDARERegion'] as const
+};

src/modules/api/myDARE/index.ts

@@ -0,0 +1,3 @@
+export * from './queries';
+export * from './dare-api';
+export * from './dare-query-keys';

src/modules/api/myDARE/queries/index.ts

@@ -0,0 +1,3 @@
+export * from './use-post-get-megaregions-dare';
+export * from './use-post-get-regions-dare';
+export * from './use-post-set-update-dare';

src/modules/api/myDARE/queries/use-post-get-megaregions-dare.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { dareQueryKeys } from '../dare-query-keys';
+import { dareApi, type PostGetMegaReturn } from '../dare-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const useGetMegaregionsDareQuery = (token: string, enabled: boolean) => {
+  return useQuery<PostGetMegaReturn, BaseAxiosError>({
+    queryKey: dareQueryKeys.getMegaregionsDare(token),
+    queryFn: async () => {
+      const response = await dareApi.getMegaregionsDare(token);
+      return response.data;
+    },
+    enabled
+  });
+};

src/modules/api/myDARE/queries/use-post-get-regions-dare.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { dareQueryKeys } from '../dare-query-keys';
+import { dareApi, type PostGetRegionsDAREReturn } from '../dare-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const useGetRegionDareQuery = (megaregion: number, token: string, enabled: boolean) => {
+  return useQuery<PostGetRegionsDAREReturn, BaseAxiosError>({
+    queryKey: dareQueryKeys.getRegionsDare(megaregion, token),
+    queryFn: async () => {
+      const response = await dareApi.getRegionsDare(megaregion, token);
+      return response.data;
+    },
+    enabled
+  });
+};

src/modules/api/myDARE/queries/use-post-set-update-dare.tsx

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { dareQueryKeys } from '../dare-query-keys';
+import { type PostSetDARERegion, dareApi } from '../dare-api';
+
+import type { BaseAxiosError } from '../../../../types';
+import { ResponseType } from '@api/response-type';
+
+export const usePostSetDareRegionMutation = () => {
+  return useMutation<ResponseType, BaseAxiosError, PostSetDARERegion, ResponseType>({
+    mutationKey: dareQueryKeys.setDARERegion(),
+    mutationFn: async (data) => {
+      const response = await dareApi.setDARERegion(data);
+      return response.data;
+    }
+  });
+};

src/screens/InAppScreens/TravelsScreen/Components/CustomButton.tsx

@@ -7,19 +7,21 @@ export const CustomButton = ({
   title,
   icon,
   isActive,
-  disabled
+  disabled,
+  flex = 1
 }: {
   onPress: () => void;
   title?: string;
   icon?: JSX.Element;
   isActive?: boolean;
   disabled?: boolean;
+  flex?: number;
 }) => (
   <TouchableOpacity
     style={[
       styles.buttonStyle,
       isActive ? styles.buttonActive : styles.buttonInactive,
-      { flex: icon && title ? 0.7 : 1, opacity: disabled ? 0.5 : 1 }
+      { flex: icon && title ? 0.7 : flex, opacity: disabled ? 0.5 : 1 }
     ]}
     onPress={onPress}
     disabled={disabled}

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

@@ -0,0 +1,37 @@
+import ReactModal from 'react-native-modal';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { styles } from './styles';
+
+const MegaregionsModal = ({
+  isVisible,
+  onClose,
+  onSelect,
+  data
+}: {
+  isVisible: boolean;
+  onClose: () => void;
+  onSelect: (object: { id: number; name: string }) => void;
+  data: { id: number; name: string }[];
+}) => {
+  return (
+    <ReactModal
+      isVisible={isVisible}
+      onBackdropPress={onClose}
+      style={styles.modal}
+      statusBarTranslucent={true}
+      presentationStyle="overFullScreen"
+    >
+      <View style={styles.wrapper}>
+        <ScrollView style={{ paddingBottom: 16 }} showsVerticalScrollIndicator={false}>
+          {data?.map((item) => (
+            <TouchableOpacity key={item.id} style={styles.btnOption} onPress={() => onSelect(item)}>
+              <Text style={styles.btnOptionText}>{item.name}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+    </ReactModal>
+  );
+};
+
+export default MegaregionsModal;

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

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
+
+export const styles = StyleSheet.create({
+  btnOption: {
+    paddingHorizontal: 16,
+    paddingVertical: 9,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16
+  },
+  btnOptionText: { fontSize: 16, fontWeight: '600', color: Colors.DARK_BLUE },
+  wrapper: {
+    backgroundColor: Colors.WHITE,
+    padding: 16,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    height: '86%'
+  },
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0
+  }
+});

src/screens/InAppScreens/TravelsScreen/Components/MyRegionsItems/TccRegionItem.tsx → src/screens/InAppScreens/TravelsScreen/Components/MyRegionsItems/RegionItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 
-import { TCCRegion } from '../../utils/types';
+import { DareRegion, TCCRegion } from '../../utils/types';
 import { styles } from './styles';
 import { API_HOST } from 'src/constants';
 import useRegionData from '../../utils/useRegionData';
@@ -9,16 +9,18 @@ import formatNumber from '../../utils/formatNumber';
 
 import MarkIcon from 'assets/icons/mark.svg';
 
-export const TccRegionItem = React.memo(
+export const RegionItem = React.memo(
   ({
     item,
-    updateTCC
+    updateRegion,
+    dare = false
   }: {
-    item: TCCRegion;
-    updateTCC: (region: number, visits: 0 | 1) => void;
+    item: TCCRegion | DareRegion;
+    updateRegion: (region: number, visits: 0 | 1) => void;
+    dare?: boolean;
   }) => {
     const name = item.name.split(/ – | - /);
-    const { regionData, avatars } = useRegionData(item.id);
+    const { regionData, avatars } = useRegionData(item.id, dare);
 
     const regionImg = regionData ? JSON.parse(regionData?.region_photos)[0] : '';
     const formattedCount = regionData ? formatNumber(regionData?.visitors_count) : 0;
@@ -34,7 +36,10 @@ export const TccRegionItem = React.memo(
             <Text style={styles.regionItemSubname}>{name[1]}</Text>
           </View>
           <View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
-            <Image source={{ uri: `${API_HOST}/img/flags_new/${item.flag}` }} style={styles.flag} />
+            <Image
+              source={{ uri: `${API_HOST}/img/flags_new/${dare ? item.flag1 : item.flag}` }}
+              style={styles.flag}
+            />
             {item.flag2 && (
               <Image
                 source={{ uri: `${API_HOST}/img/flags_new/${item.flag2}` }}
@@ -64,11 +69,11 @@ export const TccRegionItem = React.memo(
             <TouchableOpacity
               style={[
                 styles.btn,
-                item.visited > 0 ? styles.visitedButton : styles.markVisitedButton
+                +item.visited > 0 ? styles.visitedButton : styles.markVisitedButton
               ]}
-              onPress={() => updateTCC(item.id, item.visited > 0 ? 0 : 1)}
+              onPress={() => updateRegion(item.id, +item.visited > 0 ? 0 : 1)}
             >
-              {item.visited > 0 ? (
+              {+item.visited > 0 ? (
                 <View style={styles.visitedContainer}>
                   <MarkIcon width={16} height={16} />
                   <Text style={styles.visitedButtonText}>Visited</Text>

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

@@ -0,0 +1,188 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, FlatList } from 'react-native';
+import * as Progress from 'react-native-progress';
+import { useFocusEffect } from '@react-navigation/native';
+
+import { Header, PageWrapper } from 'src/components';
+import { CustomButton } from '../Components';
+import MegaregionsModal from '../Components/MegaregionsModal';
+
+import { StoreType, storage } from 'src/storage';
+import { DareRegion } from '../utils/types';
+import { Colors } from 'src/theme';
+import { styles } from '../RegionsScreen/styles';
+import { RegionItem } from '../Components/MyRegionsItems/RegionItem';
+import {
+  useGetMegaregionsDareQuery,
+  useGetRegionDareQuery,
+  usePostSetDareRegionMutation
+} from '@api/myDARE';
+
+import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
+
+const DareScreen = () => {
+  const token = storage.get('token', StoreType.STRING) as string;
+  const { data: megaregions } = useGetMegaregionsDareQuery(token, true);
+  const [megaSelectorVisible, setMegaSelectorVisible] = useState(false);
+  const [selectedMega, setSelectedMega] = useState<{ name: string; id: number }>({
+    id: 1,
+    name: 'SOUTHERN EUROPE'
+  });
+  const { data: dareData } = useGetRegionDareQuery(selectedMega.id, token, true);
+  const [dareRegions, setDareRegions] = useState<DareRegion[] | null>(null);
+  const [filteredDareRegions, setFilteredDareRegions] = useState<DareRegion[] | null>(null);
+  const [total, setTotal] = useState(0);
+  const [contentIndex, setContentIndex] = useState(0);
+  const { mutate: updateDARE } = usePostSetDareRegionMutation();
+
+  useFocusEffect(
+    useCallback(() => {
+      if (megaregions && megaregions.result === 'OK') {
+        setSelectedMega(megaregions.data[1]);
+      }
+    }, [megaregions])
+  );
+
+  useEffect(() => {
+    if (dareRegions && dareRegions.length) {
+      calcTotalCountries();
+    }
+  }, [dareRegions]);
+
+  useEffect(() => {
+    if (dareData && dareData.result === 'OK') {
+      setDareRegions(dareData.data);
+    }
+  }, [dareData]);
+
+  useEffect(() => {
+    if (megaregions && megaregions.result === 'OK') {
+      setContentIndex(0);
+    }
+  }, [selectedMega]);
+
+  useEffect(() => {
+    switch (contentIndex) {
+      case 1:
+        setFilteredDareRegions(dareRegions?.filter((item) => +item.visited <= 0) || []);
+        break;
+      case 2:
+        setFilteredDareRegions(dareRegions?.filter((item) => +item.visited > 0) || []);
+        break;
+      case 3:
+        setFilteredDareRegions(dareRegions?.filter((item) => item.new === 1) || []);
+        break;
+      default:
+        setFilteredDareRegions(dareRegions);
+    }
+  }, [contentIndex, dareRegions]);
+
+  const calcTotalCountries = () => {
+    const visited = dareRegions?.filter((item) => +item.visited > 0).length || 0;
+    setTotal(visited);
+  };
+
+  const handleUpdateDare = useCallback(
+    (region: number, visits: 0 | 1) => {
+      const updatedDARE = dareRegions?.map((item) => {
+        if (item.id === region) {
+          return {
+            ...item,
+            visited: String(visits)
+          };
+        }
+
+        return item;
+      });
+
+      const updatedDareData = {
+        token,
+        region,
+        visits
+      };
+
+      updateDARE(updatedDareData);
+      updatedDARE && setDareRegions(updatedDARE);
+    },
+    [dareRegions]
+  );
+
+  const renderItem = ({ item }: { item: DareRegion }) => (
+    <RegionItem item={item} dare={true} updateRegion={handleUpdateDare} />
+  );
+
+  return (
+    <PageWrapper>
+      <Header label="DARE" />
+      <TouchableOpacity style={styles.megaSelector} onPress={() => setMegaSelectorVisible(true)}>
+        <Text style={styles.megaButtonText}>{selectedMega?.name}</Text>
+        <ChevronIcon width={18} height={18} />
+      </TouchableOpacity>
+
+      <View style={styles.buttonContainer}>
+        <CustomButton
+          title="All"
+          onPress={() => setContentIndex(0)}
+          isActive={contentIndex === 0}
+        />
+        <CustomButton
+          title="Not visited"
+          onPress={() => setContentIndex(1)}
+          isActive={contentIndex === 1}
+        />
+        <CustomButton
+          title="Visited"
+          onPress={() => setContentIndex(2)}
+          isActive={contentIndex === 2}
+        />
+        <CustomButton
+          title="New"
+          onPress={() => setContentIndex(3)}
+          isActive={contentIndex === 3}
+          flex={0.6}
+        />
+      </View>
+
+      <View style={styles.progressHeader}>
+        <Text style={styles.textSmall}>Visited places</Text>
+        <Text style={styles.textSmall}>
+          {dareRegions?.length
+            ? `${total}/${dareRegions.length} • ${((total * 100) / dareRegions.length).toFixed(2)}%`
+            : '0/0 • 100%'}
+        </Text>
+      </View>
+
+      <Progress.Bar
+        progress={dareRegions?.length ? total / dareRegions.length : 1}
+        width={null}
+        height={4}
+        color={Colors.DARK_BLUE}
+        borderWidth={0}
+        borderRadius={5}
+        unfilledColor={Colors.DARK_LIGHT}
+      />
+
+      {filteredDareRegions && (filteredDareRegions?.length || filteredDareRegions?.length) ? (
+        <FlatList
+          data={filteredDareRegions}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id.toString()}
+          showsVerticalScrollIndicator={false}
+          style={{ paddingTop: 8, marginBottom: 16 }}
+        />
+      ) : null}
+
+      <MegaregionsModal
+        isVisible={megaSelectorVisible}
+        onClose={() => setMegaSelectorVisible(false)}
+        onSelect={(object) => {
+          setMegaSelectorVisible(false);
+          setSelectedMega(object);
+        }}
+        data={megaregions?.data ?? []}
+      />
+    </PageWrapper>
+  );
+};
+
+export default DareScreen;

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { View, Text, TouchableOpacity, ScrollView, FlatList } from 'react-native';
+import { View, Text, TouchableOpacity, FlatList } from 'react-native';
 import ReactModal from 'react-native-modal';
 import * as Progress from 'react-native-progress';
 import { useFocusEffect } from '@react-navigation/native';
@@ -8,6 +8,9 @@ import moment from 'moment';
 
 import { Button, Header, PageWrapper } from 'src/components';
 import { CustomButton } from '../Components';
+import { NmRegionItem } from '../Components/MyRegionsItems/NmRegionItem';
+import { RegionItem } from '../Components/MyRegionsItems/RegionItem';
+import MegaregionsModal from '../Components/MegaregionsModal';
 
 import { StoreType, storage } from 'src/storage';
 import { NmRegion, TCCRegion } from '../utils/types';
@@ -24,8 +27,6 @@ import { noOfVisits, qualityOptions } from '../utils/constants';
 
 import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
 import AddImgSvg from 'assets/icons/travels-screens/add-img.svg';
-import { NmRegionItem } from '../Components/MyRegionsItems/NmRegionItem';
-import { TccRegionItem } from '../Components/MyRegionsItems/TccRegionItem';
 
 const RegionsScreen = () => {
   const token = storage.get('token', StoreType.STRING) as string;
@@ -242,7 +243,7 @@ const RegionsScreen = () => {
               <View style={{ marginTop: 8 }}>
                 <Text style={[styles.textMedium, { textAlign: 'center' }]}>TCC regions</Text>
                 {filteredTccRegions?.map((item) => (
-                  <TccRegionItem item={item} updateTCC={handleUpdateTCC} key={item.id} />
+                  <RegionItem item={item} updateRegion={handleUpdateTCC} key={item.id} />
                 ))}
               </View>
             ) : null
@@ -250,30 +251,15 @@ const RegionsScreen = () => {
         />
       ) : null}
 
-      <ReactModal
+      <MegaregionsModal
         isVisible={megaSelectorVisible}
-        onBackdropPress={() => setMegaSelectorVisible(false)}
-        style={styles.modal}
-        statusBarTranslucent={true}
-        presentationStyle="overFullScreen"
-      >
-        <View style={styles.wrapper}>
-          <ScrollView style={{ paddingBottom: 16 }} showsVerticalScrollIndicator={false}>
-            {megaregions?.data?.map((mega) => (
-              <TouchableOpacity
-                key={mega.id}
-                style={styles.btnOption}
-                onPress={() => {
-                  setMegaSelectorVisible(false);
-                  setSelectedMega(mega);
-                }}
-              >
-                <Text style={styles.btnOptionText}>{mega.name}</Text>
-              </TouchableOpacity>
-            ))}
-          </ScrollView>
-        </View>
-      </ReactModal>
+        onClose={() => setMegaSelectorVisible(false)}
+        onSelect={(object) => {
+          setMegaSelectorVisible(false);
+          setSelectedMega(object);
+        }}
+        data={megaregions?.data ?? []}
+      />
 
       <ReactModal
         isVisible={isEditModalVisible}

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

@@ -2,21 +2,6 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'src/theme';
 
 export const styles = StyleSheet.create({
-  btnOption: {
-    paddingHorizontal: 16,
-    paddingVertical: 9,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 16
-  },
-  btnOptionText: { fontSize: 16, fontWeight: '600', color: Colors.DARK_BLUE },
-  wrapper: {
-    backgroundColor: Colors.WHITE,
-    padding: 16,
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-    height: '86%'
-  },
   modal: {
     justifyContent: 'flex-end',
     margin: 0

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -44,7 +44,14 @@ const TravelsScreen = () => {
     },
     {
       label: 'DARE',
-      icon: <MapLocationIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+      icon: <MapLocationIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
+      buttonFn: (navigation) => {
+        if (!token) {
+          setIsModalVisible(true);
+        } else {
+          navigation.navigate(NAVIGATION_PAGES.DARE);
+        }
+      }
     },
     {
       label: 'Series',

src/screens/InAppScreens/TravelsScreen/utils/types.ts

@@ -108,6 +108,7 @@ export interface TCCRegion {
   flag2: string;
   name: string;
   visited: number;
+  flag1?: string;
 }
 
 export interface DbRegion {
@@ -116,3 +117,14 @@ export interface DbRegion {
   region_photos: string;
   visitors_count: number;
 }
+
+export interface DareRegion {
+  id: number;
+  name: string;
+  essential: 0 | 1;
+  flag1: string;
+  flag2: string | null;
+  visited: string;
+  new: 0 | 1;
+  flag?: string;
+}

src/screens/InAppScreens/TravelsScreen/utils/useRegionData.ts

@@ -1,18 +1,19 @@
 import { useState, useEffect } from 'react';
 
-import { getFirstDatabase, refreshDatabases } from 'src/db';
+import { getFirstDatabase, getSecondDatabase, refreshDatabases } from 'src/db';
 import { getData } from 'src/modules/map/regionData';
 import { DbRegion } from './types';
 
-const useRegionData = (regionId: number) => {
+const useRegionData = (regionId: number, dare: boolean = false) => {
   const [regionData, setRegionData] = useState<DbRegion | null>(null);
   const [avatars, setAvatars] = useState<string[] | null>(null);
 
   useEffect(() => {
     const fetchRegionData = async () => {
-      const db = getFirstDatabase();
+      const db = dare ? getSecondDatabase() : getFirstDatabase();
+      const tableName = dare ? 'places' : 'regions';
       try {
-        await getData(db, regionId, 'regions', (data, avatars) => {
+        await getData(db, regionId, tableName, (data, avatars) => {
           setRegionData(data);
           setAvatars(avatars);
         });

src/types/api.ts

@@ -65,7 +65,10 @@ export enum API_ENDPOINT {
   GET_MEGAREGIONS = 'get-megaregions',
   GET_REGIONS_QE = 'get-regions-qe',
   SET_NM_REGION = 'updateNM',
-  SET_TCC_REGION = 'updateTCC'
+  SET_TCC_REGION = 'updateTCC',
+  GET_MEGAREGIONS_DARE = 'get-megaregions-dare',
+  GET_REGIONS_DARE = 'get-regions-dare',
+  SET_DARE_REGION = 'updateDARE'
 }
 
 export enum API {
@@ -117,7 +120,10 @@ export enum API {
   GET_MEGAREGIONS = `${API_ROUTE.REGIONS}/${API_ENDPOINT.GET_MEGAREGIONS}`,
   GET_REGIONS_QE = `${API_ROUTE.REGIONS}/${API_ENDPOINT.GET_REGIONS_QE}`,
   SET_NM_REGION = `${API_ROUTE.QUICK_ENTER}/${API_ENDPOINT.SET_NM_REGION}`,
-  SET_TCC_REGION = `${API_ROUTE.QUICK_ENTER}/${API_ENDPOINT.SET_TCC_REGION}`
+  SET_TCC_REGION = `${API_ROUTE.QUICK_ENTER}/${API_ENDPOINT.SET_TCC_REGION}`,
+  GET_MEGAREGIONS_DARE = `${API_ROUTE.REGIONS}/${API_ENDPOINT.GET_MEGAREGIONS_DARE}`,
+  GET_REGIONS_DARE = `${API_ROUTE.REGIONS}/${API_ENDPOINT.GET_REGIONS_DARE}`,
+  SET_DARE_REGION = `${API_ROUTE.QUICK_ENTER}/${API_ENDPOINT.SET_DARE_REGION}`
 }
 
 export type BaseAxiosError = AxiosError;

src/types/navigation.ts

@@ -33,4 +33,5 @@ export enum NAVIGATION_PAGES {
   ADD_REGIONS = 'inAppAddRegions',
   COUNTRIES = 'inAppCountries',
   REGIONS = 'inAppRegions',
+  DARE = 'inAppDare',
 }