changes of env toggle

app/components/Environment/Environment.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
+
+import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
+
+import { ENV_TYPE } from '../../environment';
+import HeaderV2 from '../Common/Header/HeaderV2';
+import { Colors, Typography } from '../../styles';
+import { IS_ANDROID, scaleSize } from '../../styles/mixins';
+import { SET_APP_ENVIRONMENT } from '../../redux/slices/envSlice';
+
+const { width, height } = Dimensions.get('screen');
+
+const Environment = () => {
+  const { currentEnv } = useSelector(state => state.envSlice);
+  const dispatch = useDispatch();
+  const insects = useSafeAreaInsets();
+
+  return (
+    <View style={styles.container}>
+      <HeaderV2
+        headingText="Environment"
+        containerStyle={{
+          paddingHorizontal: 25,
+          paddingTop: IS_ANDROID ? insects.top + 20 : insects.top,
+        }}
+      />
+      <View style={styles.btnCon}>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={() => dispatch(SET_APP_ENVIRONMENT(ENV_TYPE.STAGING))}>
+          <View
+            style={[
+              styles.btn,
+              currentEnv === ENV_TYPE.STAGING && {
+                backgroundColor: Colors.PRIMARY + '20',
+              },
+            ]}>
+            <View style={styles.iconCon}>
+              <FontAwesome5Icon name={'code'} size={30} color={Colors.PRIMARY} />
+            </View>
+            <Text style={styles.drawerItemLabel}>Development</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={() => dispatch(SET_APP_ENVIRONMENT(ENV_TYPE.PROD))}>
+          <View
+            style={[
+              styles.btn,
+              currentEnv === ENV_TYPE.PROD && { backgroundColor: Colors.PRIMARY + '20' },
+            ]}>
+            <View style={styles.iconCon}>
+              <FontAwesome5Icon name={'laptop-code'} size={30} color={Colors.PRIMARY} />
+            </View>
+            <Text style={styles.drawerItemLabel}>Production</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default Environment;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  btnCon: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+  },
+  btn: {
+    borderRadius: 8,
+    borderWidth: 2,
+    width: width / 2.5,
+    height: width / 2.5,
+    marginVertical: height / 30,
+    borderColor: Colors.PRIMARY,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconCon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.PRIMARY + '40',
+    borderRadius: 100,
+    width: 70,
+    height: 70,
+  },
+  drawerItemLabel: {
+    fontSize: Typography.FONT_SIZE_16,
+    fontFamily: Typography.FONT_FAMILY_BOLD,
+    marginTop: scaleSize(12),
+    color: Colors.PRIMARY,
+  },
+});

app/components/MainScreen/BottomBar.tsx

@@ -1,4 +1,4 @@
-import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { Text, View, StyleSheet, TouchableOpacity, Vibration } from 'react-native';
 import React, { useRef, useState } from 'react';
 import { SvgXml } from 'react-native-svg';
 import { add_icon, ListIcon, PlotIcon, MapExplore } from '../../assets';
@@ -30,6 +30,7 @@ const BottomBar = ({ state, descriptors, navigation }: IBottomBarProps) => {
   const _addOptionsRef = useRef();
 
   const onAddPress = () => {
+    Vibration.vibrate();
     setOpen(prev => !prev);
   };
 

app/components/MainScreen/NavDrawer/index.tsx

@@ -4,6 +4,7 @@ import React, { useContext } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Skeleton } from 'moti/skeleton/react-native-linear-gradient';
 import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
@@ -26,6 +27,7 @@ import { UserContext } from '../../../reducers/user';
 import { Colors, Spacing, Typography } from '../../../styles';
 import { InventoryContext } from '../../../reducers/inventory';
 import { auth0Login, auth0Logout } from '../../../actions/user';
+import { isPlantForThePlanetEmail } from '../../../utils';
 
 const { protocol, cdnUrl, webAppUrl } = APIConfig;
 
@@ -43,6 +45,12 @@ const getIcon = screenName => {
       return <OfflineMapIcon />;
     case 'Logs':
       return <OfflineMapIcon />;
+    case 'Environment':
+      return (
+        <View style={styles.iconCon}>
+          <MaterialIcons name={'settings'} size={16} color={Colors.WHITE} />
+        </View>
+      );
     default:
       return undefined;
   }
@@ -62,6 +70,8 @@ const getLabel = screenName => {
       return i18next.t('label.manage_offline');
     case 'Logs':
       return i18next.t('label.activity_logs');
+    case 'Environment':
+      return i18next.t('label.environment');
     default:
       return undefined;
   }
@@ -83,19 +93,10 @@ const NavDrawer = props => {
     const isLogout = await auth0Logout(userDispatch);
   };
 
-  const onPressImprint = () => {
-    openWebView(`https://pp.eco/legal/${i18next.language}/imprint`);
-  };
-  const onPressPolicy = () => {
-    openWebView(`https://pp.eco/legal/${i18next.language}/privacy`);
-  };
-  const onPressTerms = () => {
-    openWebView(`https://pp.eco/legal/${i18next.language}/terms`);
-  };
-
-  const onPressEdit = () => {
-    openWebView(`${protocol}://${webAppUrl}/login`);
-  };
+  const onPressImprint = () => openWebView(`https://pp.eco/legal/${i18next.language}/imprint`);
+  const onPressPolicy = () => openWebView(`https://pp.eco/legal/${i18next.language}/privacy`);
+  const onPressTerms = () => openWebView(`https://pp.eco/legal/${i18next.language}/terms`);
+  const onPressEdit = () => openWebView(`${protocol}://${webAppUrl}/login`);
 
   const onPressLogin = async () => {
     setLoading(true);
@@ -186,6 +187,20 @@ const NavDrawer = props => {
                   </View>
                 ),
             )}
+            {isPlantForThePlanetEmail(userState?.email) && (
+              <View style={{ paddingTop: scaleSize(12) }}>
+                <TouchableOpacity
+                  activeOpacity={0.7}
+                  style={styles.drawerItem}
+                  onPress={() => navigation.navigate('Environment')}>
+                  <View style={styles.drawerItemInfo}>
+                    {getIcon('Environment')}
+                    <Text style={styles.drawerItemLabel}>{getLabel('Environment')}</Text>
+                  </View>
+                  <Ionicons name={'chevron-forward-outline'} size={20} color={Colors.TEXT_COLOR} />
+                </TouchableOpacity>
+              </View>
+            )}
             {userState?.accessToken && (
               <View style={{ paddingTop: scaleSize(12) }}>
                 <TouchableOpacity
@@ -342,4 +357,12 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   version: { paddingBottom: 10 },
+  iconCon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.PRIMARY_DARK,
+    borderRadius: 100,
+    width: 24,
+    height: 24,
+  },
 });

app/components/Navigator/MainNavigator.tsx

@@ -33,6 +33,7 @@ import {
   RegisterSingleTree,
   SingleTreeOverview,
   CreateIntervention,
+  Environment,
 } from '../';
 import BottomTab from './BottomTab';
 import AdditionalData from '../AdditionalData';
@@ -178,6 +179,7 @@ export default function MainNavigator() {
         options={MyTransition}
       />
       <Stack.Screen name="ProjectConfig" component={ProjectConfig} options={MyTransition} />
+      <Stack.Screen name="Environment" component={Environment} options={MyTransition} />
     </Stack.Navigator>
   );
 }

app/components/Navigator/index.tsx

@@ -1,5 +1,6 @@
-import { StatusBar, Platform, View } from 'react-native';
+import { useDispatch } from 'react-redux';
 import React, { useEffect, useContext } from 'react';
+import { StatusBar, Platform, View } from 'react-native';
 import { useNetInfo } from '@react-native-community/netinfo';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
@@ -13,6 +14,7 @@ import { NavigationContext } from '../../reducers/navigation';
 import InitialLoadingNavigator from './InitialLoadingNavigator';
 import { checkLoginAndSync } from '../../utils/checkLoginAndSync';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SET_APP_ENVIRONMENT } from '../../redux/slices/envSlice';
 
 const Stack = createStackNavigator();
 const isAndroid = Platform.OS === 'android';
@@ -22,6 +24,7 @@ export default function AppNavigator() {
   const { showInitialStack } = useContext(NavigationContext);
   const netInfo = useNetInfo();
   const insets = useSafeAreaInsets();
+  const reduxDispatch = useDispatch();
   const { state: inventoryState, dispatch } = useContext(InventoryContext);
   const { state: userState, dispatch: userDispatch } = useContext(UserContext);
 
@@ -57,6 +60,12 @@ export default function AppNavigator() {
     userState.accessToken,
   ]);
 
+  useEffect(() => {
+    if (userState?.appEnvironment) {
+      reduxDispatch(SET_APP_ENVIRONMENT(userState.appEnvironment));
+    }
+  }, [userState?.appEnvironment]);
+
   useEffect(() => {
     if (!showInitialStack) {
       autoSync();

app/components/index.tsx

@@ -26,8 +26,10 @@ import ManageProjects from '../screens/ManageProjectsFlow/ManageProjects';
 import SelectProject from './Projects/SelectProject';
 import SpecieSampleTree from './SpecieSampleTree';
 import CreateIntervention from './CreateIntervention/CreateIntervention';
+import Environment from './Environment/Environment';
 
 export {
+  Environment,
   CreateIntervention,
   RegisterTree,
   TPOQuestion,

app/environment.tsx

@@ -0,0 +1,26 @@
+import Config from 'react-native-config';
+
+export enum ENV_TYPE {
+  STAGING = 'STAGING',
+  PROD = 'PRODUCTION',
+}
+
+export const ENVS = {
+  STAGING: {
+    BUGSNAP_CLIENT_KEY: Config.BUGSNAP_CLIENT_KEY,
+    AUTH0_DOMAIN: 'accounts.plant-for-the-planet.org',
+    AUTH0_CLIENT_ID: 'LiEqEef641Pzv8cBGn6i9Jt9jrnyLJEt',
+    API_ENDPOINT: 'app-staging.plant-for-the-planet.org',
+    CDN_URL: 'cdn.plant-for-the-planet.org/staging',
+    WEB_APP_URL: 'dev.pp.eco',
+  },
+  PRODUCTION: {
+    BUGSNAP_CLIENT_KEY: 'e1b5d94f16186f8c6a2169882998ebda',
+    AUTH0_DOMAIN: 'accounts.plant-for-the-planet.org',
+    AUTH0_CLIENT_ID: 'LiEqEef641Pzv8cBGn6i9Jt9jrnyLJEt',
+    API_ENDPOINT: 'app.plant-for-the-planet.org',
+    CDN_URL: 'cdn.plant-for-the-planet.org',
+    WEB_APP_URL: 'www1.plant-for-the-planet.org',
+    REALM_DISABLE_ANALYTICS: true,
+  },
+};

app/languages/en/user/editUserProfilelabels.json

@@ -20,5 +20,6 @@
   "manage_projects": "Manage Projects",
   "additional_data": "Additional Data",
   "project_config": "Project Configuration",
-  "login_signup": "Login / Signup"
+  "login_signup": "Login / Signup",
+  "environment": "Environment"
 }

app/reducers/provider.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Provider as ReduxProvider } from 'react-redux';
 import { InventoryContextProvider } from './inventory';
 import { LoadingContextProvider } from './loader';
 import { SpeciesContextProvider } from './species';
@@ -7,22 +8,25 @@ import { NavigationContextProvider } from './navigation';
 import { AdditionalDataContextProvider } from './additionalData';
 import { PlantLocationHistoryContextProvider } from './plantLocationHistory';
 import { ProjectContextProvider } from './project';
+import { store } from '../redux/store';
 
 export default function Provider({ children }) {
   return (
     <NavigationContextProvider>
       <UserContextProvider>
-        <ProjectContextProvider>
-          <InventoryContextProvider>
-            <PlantLocationHistoryContextProvider>
-              <LoadingContextProvider>
-                <SpeciesContextProvider>
-                  <AdditionalDataContextProvider>{children}</AdditionalDataContextProvider>
-                </SpeciesContextProvider>
-              </LoadingContextProvider>
-            </PlantLocationHistoryContextProvider>
-          </InventoryContextProvider>
-        </ProjectContextProvider>
+        <ReduxProvider store={store}>
+          <ProjectContextProvider>
+            <InventoryContextProvider>
+              <PlantLocationHistoryContextProvider>
+                <LoadingContextProvider>
+                  <SpeciesContextProvider>
+                    <AdditionalDataContextProvider>{children}</AdditionalDataContextProvider>
+                  </SpeciesContextProvider>
+                </LoadingContextProvider>
+              </PlantLocationHistoryContextProvider>
+            </InventoryContextProvider>
+          </ProjectContextProvider>
+        </ReduxProvider>
       </UserContextProvider>
     </NavigationContextProvider>
   );

app/redux/slices/envSlice.tsx

@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+import { ENV_TYPE } from '../../environment';
+import { modifyUserDetails } from '../../repositories/user';
+
+interface EnvState {
+  currentEnv: string;
+}
+
+const initialState: EnvState = {
+  currentEnv: ENV_TYPE.STAGING,
+};
+
+export const envSlice = createSlice({
+  name: 'envSlice',
+  initialState,
+  reducers: {
+    SET_APP_ENVIRONMENT: (state, action: PayloadAction<string>) => {
+      modifyUserDetails({
+        appEnvironment: action.payload,
+      });
+      state.currentEnv = action.payload;
+    },
+  },
+});
+
+export const { SET_APP_ENVIRONMENT } = envSlice.actions;
+export default envSlice.reducer;

app/redux/store.ts

@@ -0,0 +1,13 @@
+import { configureStore } from '@reduxjs/toolkit';
+import envSlice from './slices/envSlice';
+
+export const store = configureStore({
+  reducer: {
+    envSlice,
+  },
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;