Improvement in ad banner and minor fixes

ApplicationRoot.js

@@ -23,7 +23,7 @@ import Entypo from 'react-native-vector-icons/Entypo';
 import { t } from 'i18next';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import useIAPConnection from './hooks/useIAPConnection';
-import { ROUTE_NAMES } from './libs/contants.js';
+import { ROUTE_NAMES } from './libs/constants.js';
 import AppAuthProvider from './components/AppAuthProvider.js';
 import UserProfile from './screens/UserProfileScreen.js';
 import useApplicationStore from './hooks/useApplicationStore.js';

components/AdBanner.js

@@ -0,0 +1,48 @@
+// AdBanner.js
+import React, { useEffect, useState } from 'react';
+import { View, Platform } from 'react-native';
+import mobileAds, { BannerAd, BannerAdSize, TestIds, AdsConsent } from 'react-native-google-mobile-ads';
+
+const AdBanner = ({ plan }) => {
+  const [mobileAdConsent, setMobileAdConsent] = useState(false);
+
+  useEffect(() => {
+    async function requestConsent() {
+      const consentInfo = await AdsConsent.requestInfoUpdate();
+      let canRequestAds = false;
+      if (consentInfo.status === 'REQUIRED') {
+        const adsConsentInfo = await AdsConsent.loadAndShowConsentFormIfRequired();
+        canRequestAds = adsConsentInfo.canRequestAds;
+      } else {
+        canRequestAds = consentInfo.canRequestAds;
+      }
+
+      if (canRequestAds) {
+        await mobileAds().initialize();
+      }
+
+      setMobileAdConsent(canRequestAds);
+    }
+
+    requestConsent();
+  }, []);
+
+  // Return null if ads shouldn't be displayed
+  if (plan === 'proPlus' || !mobileAdConsent || Platform.OS !== 'android') {
+    return null;
+  }
+
+  return (
+    <View style={{}}>
+      <BannerAd
+        unitId={__DEV__ ? TestIds.BANNER : 'ca-app-pub-6847037498271557/2834003395'}
+        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
+        requestOptions={{
+          requestNonPersonalizedAdsOnly: true,
+        }}
+      />
+    </View>
+  );
+};
+
+export default AdBanner;

components/AppAuthProvider.js

@@ -8,7 +8,7 @@ import SignUp from './SignUp';
 import useAuth from '../hooks/useAuth';
 import useUserData from '../hooks/useUserData';
 import { useNavigation } from '@react-navigation/native';
-import { PRIVATE_ROUTES } from '../libs/contants';
+import { PRIVATE_ROUTES } from '../libs/constants';
 import GoogleButton from './GoogleButton';
 import { storeUserSession } from '../libs/EncryptedStoreage';
 import { notifyMessage, sendClientError } from '../libs/Helpers';

components/GridActionButton.js

@@ -28,6 +28,7 @@ import PropTypes from 'prop-types';
 import ColorPickerModal from './ColorPickerModal';
 import useApplicationStore from '../hooks/useApplicationStore';
 import MultiColorView from './MultiColorView';
+import { ROUTE_NAMES } from '../libs/constants';
 
 
 const GridActionButton = ({ navigation}) => {
@@ -171,7 +172,10 @@ const GridActionButton = ({ navigation}) => {
         text2: t('HueHive ai'),
         onPress: async () => {
           logEvent('chat_session_action_button');
-          navigation.navigate('ChatSession');
+          props.navigation.reset({
+            index: 0,
+            routes: [{ name: ROUTE_NAMES.CHAT_SESSION }],
+          });
         }
       },
       Platform.OS == 'android' ? (

components/HamburgerMenu.js

@@ -20,7 +20,7 @@ import useUserData from '../hooks/useUserData';
 import useAuth from '../hooks/useAuth';
 import FontAwesome5Icon from 'react-native-vector-icons/FontAwesome5';
 import Colors from '../constants/Styles';
-import { ROUTE_NAMES } from '../libs/contants';
+import { ROUTE_NAMES } from '../libs/constants';
 
 const HamburgerMenu = (props) => {
   const { t } = useTranslation();

screens/ChatSessionScreen.js

@@ -8,7 +8,6 @@ import {
   ActivityIndicator,
   Text,
   ImageBackground,
-  Platform
 } from 'react-native';
 import Colors from '../constants/Styles';
 import React, { useState, useEffect, useRef } from 'react';
@@ -19,15 +18,14 @@ import CromaButton from '../components/CromaButton';
 import useChatSession from '../hooks/useChatSession';
 import useApplicationStore from '../hooks/useApplicationStore';
 import GridActionButton from '../components/GridActionButton';
-import mobileAds, { BannerAd, BannerAdSize, TestIds, AdsConsent } from 'react-native-google-mobile-ads';
+import AdBanner from '../components/AdBanner';  // Import the new AdBanner component
 
 const bgImage = require('../assets/images/colorful_background.jpg');
 
 const ChatSessionScreen = (props) => {
   const { route, navigation } = props;
   const [inputText, setInputText] = useState('');
   const scrollViewRef = useRef();
-  const [mobileAdConsent, setMobileAdConsent] = useState(false);
   const { pro } = useApplicationStore();
   const { messages, isLoading, isCreatingSession, error, createSession, followUpSession } =
     useChatSession(route.params?.messages);
@@ -36,27 +34,6 @@ const ChatSessionScreen = (props) => {
     logEvent('chat_session_screen');
   }, []);
 
-  // Request ads consent when the component mounts
-  useEffect(() => {
-    async function requestConsent() {
-      const consentInfo = await AdsConsent.requestInfoUpdate();
-      var canRequestAds = false;
-      if (consentInfo.status === 'REQUIRED') {
-        const adsConsentInfo = await AdsConsent.loadAndShowConsentFormIfRequired();
-        canRequestAds =  adsConsentInfo.canRequestAds;
-      } else {
-        canRequestAds = consentInfo.canRequestAds;
-      }
-      // Initialize ads only if consent is obtained
-      if (canRequestAds) {
-        await mobileAds().initialize();
-      }
-      setMobileAdConsent(canRequestAds);
-    }
-
-    requestConsent();
-  }, []);
-
   const handleSendMessage = async () => {
     const message = {
       chat_session: {
@@ -88,7 +65,7 @@ const ChatSessionScreen = (props) => {
   }, [messages]);
 
   function showUnlockPro() {
-    return pro.plan == 'starter' && messages.length >= 2;
+    return pro.plan === 'starter' && messages.length >= 2;
   }
 
   return (
@@ -184,20 +161,12 @@ const ChatSessionScreen = (props) => {
               )}
             </>
           )}
-          { pro.plan != 'proPlus' && mobileAdConsent && Platform.OS == 'android' && 
-            <View >
-              <BannerAd
-                unitId={__DEV__ ? TestIds.BANNER : 'ca-app-pub-6847037498271557/2834003395'}
-                size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
-                requestOptions={{
-                  requestNonPersonalizedAdsOnly: true,
-                }}
-              />
-            </View>
-          }
+
+          { messages.length < 2 && <AdBanner plan={pro.plan} />}
+
         </View>
       </ImageBackground>
-      {messages.length == 0 && <GridActionButton navigation={navigation} />}
+      <GridActionButton navigation={navigation} />
     </View>
   );
 };

screens/MyPalettesScreen.js

@@ -15,6 +15,7 @@ import { material } from 'react-native-typography';
 import Spacer from '../components/Spacer';
 import Colors from '../constants/Styles';
 import useApplicationStore from '../hooks/useApplicationStore';
+import AdBanner from '../components/AdBanner';
 
 const MyPalettesScreen = function ({ navigation, route }) {
   const { isLoading, allPalettes, pro } = useApplicationStore();
@@ -34,27 +35,31 @@ const MyPalettesScreen = function ({ navigation, route }) {
     );
   } else {
     return (
+
       <View style={styles.container}>
         <ScrollView showsVerticalScrollIndicator={false}>
           {allPalettes.length === 0 && (
             <Text style={styles.noColorPaletteMessage}>
-              No color palettes found. Tap the + button below to create a new one.
+              No color palettes found. Create new palettes from Home screen
             </Text>
           )}
           {allPalettes.map((palette) => {
             return (
-              <PaletteCard
-                key={palette.id}
-                colors={palette.colors.slice(0, pro.plan != 'starter' ? palette.colors.length : 4)}
-                name={palette.name}
-                navigation={navigation}
-                route={route}
-                paletteId={palette.id}
-              />
+              <View style={styles.paletteCardContainer}>
+                <PaletteCard
+                  key={palette.id}
+                  colors={palette.colors.slice(0, pro.plan != 'starter' ? palette.colors.length : 4)}
+                  name={palette.name}
+                  navigation={navigation}
+                  route={route}
+                  paletteId={palette.id}
+                />
+              </View>
             );
           })}
           <Spacer />
         </ScrollView>
+      <AdBanner plan={pro.plan} />
       </View>
     );
   }
@@ -72,14 +77,17 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexGrow: 1,
     height: 200,
-    padding: 8,
     justifyContent: 'center',
     position: 'relative'
   },
   noColorPaletteMessage: {
     ...material.headline,
     textAlign: 'center',
-    marginTop: 100
+    marginTop: 100,
+    padding: 8,
+  },
+  paletteCardContainer: {
+    paddingHorizontal: 8,
   },
   loadingContainer: {
     display: 'flex',

screens/SavePaletteScreen.js

@@ -8,6 +8,7 @@ import { TextDialog } from '../components/CommonDialogs';
 import { useTranslation } from 'react-i18next';
 import { logEvent, notifyMessage } from '../libs/Helpers';
 import useApplicationStore from '../hooks/useApplicationStore';
+import AdBanner from '../components/AdBanner';
 
 export default function SavePaletteScreen({ navigation, route }) {
   const { t } = useTranslation();
@@ -41,69 +42,75 @@ export default function SavePaletteScreen({ navigation, route }) {
   };
 
   return (
-    <ScrollView style={{ margin: 8 }} showsVerticalScrollIndicator={false}>
-      <PalettePreviewCard
-        colors={finalColors.slice(0, pro.plan != 'starter' ? finalColors.length : 4)}
-        name={paletteName}
-      />
-      <View style={styles.card}>
-        <View style={styles.inputContainer}>
-          <TextInput
-            ref={inputRef}
-            style={styles.input}
-            value={paletteName}
-            autoFocus
-            placeholder={t('Enter a name for the palette')}
-            onChangeText={(name) => setPaletteName(name)}
-          />
-          <CromaButton
-            style={styles.saveButton}
-            textStyle={styles.saveButtonText}
-            onPress={async () => {
-              if (allPalettes.findIndex((palette) => palette.name === paletteName) !== -1) {
-                setIsPaletteNameExist(true);
-                setTimeout(() => {
-                  setIsPaletteNameExist(false);
-                }, 3000);
-                return null;
-              }
-              const palette = {
-                name: paletteName,
-                colors: finalColors.slice(0, pro.plan != 'starter' ? finalColors.length : 4)
-              };
-              addPalette(palette);
-              notifyMessage("Successfully saved to Your Palettes");
-              navigation.popToTop();
-            }}
-          >
-            {t('Save')}
-          </CromaButton>
+    <View style={styles.container}>
+      <ScrollView style={{ margin: 8 }} showsVerticalScrollIndicator={false}>
+        <PalettePreviewCard
+          colors={finalColors.slice(0, pro.plan != 'starter' ? finalColors.length : 4)}
+          name={paletteName}
+        />
+        <View style={styles.card}>
+          <View style={styles.inputContainer}>
+            <TextInput
+              ref={inputRef}
+              style={styles.input}
+              value={paletteName}
+              autoFocus
+              placeholder={t('Enter a name for the palette')}
+              onChangeText={(name) => setPaletteName(name)}
+            />
+            <CromaButton
+              style={styles.saveButton}
+              textStyle={styles.saveButtonText}
+              onPress={async () => {
+                if (allPalettes.findIndex((palette) => palette.name === paletteName) !== -1) {
+                  setIsPaletteNameExist(true);
+                  setTimeout(() => {
+                    setIsPaletteNameExist(false);
+                  }, 3000);
+                  return null;
+                }
+                const palette = {
+                  name: paletteName,
+                  colors: finalColors.slice(0, pro.plan != 'starter' ? finalColors.length : 4)
+                };
+                addPalette(palette);
+                notifyMessage("Successfully saved to Your Palettes");
+                navigation.popToTop();
+              }}
+            >
+              {t('Save')}
+            </CromaButton>
+          </View>
         </View>
-      </View>
-      {pro.plan == 'starter' && finalColors.length > 4 && (
-        <View style={styles.proVersionContainer}>
-          <Text style={styles.proVersionText}>
-            {t(
-              'Upgrade to Pro to save unlimited colors in a palette. Starter Plan allows saving up to 4 colors.'
-            )}
-          </Text>
-          <CromaButton
-            style={styles.proVersionButton}
-            textStyle={{ color: Colors.white }}
-            onPress={handleUnlockPro}
-          >
-            {t('Upgrade to Pro')}
-          </CromaButton>
-        </View>
-      )}
-      {isPaletteNameExist && (
-        <TextDialog text={t('A palette with the same name already exists.')} />
-      )}
-    </ScrollView>
+        {pro.plan == 'starter' && finalColors.length > 4 && (
+          <View style={styles.proVersionContainer}>
+            <Text style={styles.proVersionText}>
+              {t(
+                'Upgrade to Pro to save unlimited colors in a palette. Starter Plan allows saving up to 4 colors.'
+              )}
+            </Text>
+            <CromaButton
+              style={styles.proVersionButton}
+              textStyle={{ color: Colors.white }}
+              onPress={handleUnlockPro}
+            >
+              {t('Upgrade to Pro')}
+            </CromaButton>
+          </View>
+        )}
+        {isPaletteNameExist && (
+          <TextDialog text={t('A palette with the same name already exists.')} />
+        )}
+      </ScrollView>
+      <AdBanner plan={pro.plan} />
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   card: {
     flex: 1,
     flexDirection: 'column',