add revoke consent button

croma-app · Oct 18, 2024 · 8d19cde · 8d19cde
1 parent 2fccada
commit 8d19cde
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 22 deletions.
diff --git a/components/HamburgerMenu.js b/components/HamburgerMenu.js
@@ -100,7 +100,7 @@ const HamburgerMenu = (props) => {
               <Text style={styles.textAreaMenuItem}>{t('Explore Palettes')}</Text>
             </View>
           </TouchableOpacity>
-          <TouchableOpacity
+          {Platform.OS == 'ios' && <TouchableOpacity
             style={styles.menuItem}
             onPress={async () => {
               logEvent('hm_palette_library');
@@ -113,6 +113,7 @@ const HamburgerMenu = (props) => {
               <Text style={styles.textAreaMenuItem}>{t('Palette Library')}</Text>
             </View>
           </TouchableOpacity>
+          }
           {
             <MenuLink
               id={'rate-us'}
@@ -182,6 +183,22 @@ const HamburgerMenu = (props) => {
               </View>
             </TouchableOpacity>
           )}
+          {(Platform.OS == 'android') && (
+            <TouchableOpacity
+              style={styles.menuItem}
+              onPress={async () => {
+                logEvent('hm_setting');
+                navigate('UserProfile');
+                props.toggleSideMenu();
+              }}>
+              <View style={styles.menuItemView}>
+                <View style={{ ...styles.menuIcon }}>
+                  <MaterialIcons name="settings" style={styles.icon} />
+                </View>
+                <Text style={[styles.textAreaMenuItem]}>{t('Setting')}</Text>
+              </View>
+            </TouchableOpacity>
+          )}
         </View>
       </ScrollView>
     </SafeAreaView>

diff --git a/screens/ChatSessionScreen.js b/screens/ChatSessionScreen.js
@@ -19,7 +19,6 @@ import CromaButton from '../components/CromaButton';
 import useChatSession from '../hooks/useChatSession';
 import useApplicationStore from '../hooks/useApplicationStore';
 import GridActionButton from '../components/GridActionButton';
-import appConfig from '../app.json';
 import mobileAds, { BannerAd, BannerAdSize, TestIds, AdsConsent } from 'react-native-google-mobile-ads';
 
 const bgImage = require('../assets/images/colorful_background.jpg');
@@ -41,7 +40,6 @@ const ChatSessionScreen = (props) => {
   useEffect(() => {
     async function requestConsent() {
       const consentInfo = await AdsConsent.requestInfoUpdate();
-      // Check if consent is required
       if (consentInfo.status === AdsConsentStatus.REQUIRED) {
         const adsConsentInfo = await AdsConsent.loadAndShowConsentFormIfRequired();
         setMobileAdConsent(adsConsentInfo.canRequestAds);
@@ -188,7 +186,7 @@ const ChatSessionScreen = (props) => {
           { pro.plan == 'starter' && mobileAdConsent && Platform.OS == 'android' && 
             <View >
               <BannerAd
-                unitId={__DEV__ ? TestIds.BANNER : appConfig['react-native-google-mobile-ads']['android_app_id']}
+                unitId={__DEV__ ? TestIds.BANNER : 'ca-app-pub-6847037498271557/2834003395'}
                 size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
                 requestOptions={{
                   requestNonPersonalizedAdsOnly: true,

diff --git a/screens/UserProfileScreen.js b/screens/UserProfileScreen.js
@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
-import { ScrollView, StyleSheet, Text, Image } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { ScrollView, StyleSheet, Text, Image, TouchableOpacity } from 'react-native';
 import { View } from 'react-native-animatable';
 import CromaButton from '../components/CromaButton';
 import { useTranslation } from 'react-i18next';
@@ -12,25 +12,51 @@ import useApplicationStore from '../hooks/useApplicationStore';
 import { logout } from '../network/login-and-signup';
 import { logEvent } from '../libs/Helpers';
 import Colors from '../constants/Styles';
+import useAuth from '../hooks/useAuth';
+import { AdsConsent, AdsConsentStatus } from 'react-native-google-mobile-ads';
 
 function UserProfile(props) {
   const applicationState = useApplicationStore();
   const { loadInitPaletteFromStore } = applicationState;
   const { userData, loadUserData } = useUserData();
+  const { openAuthOverlay } = useAuth();
+  const [consentInfo, setConsentInfo] = useState(false);
 
   useEffect(() => {
     logEvent('user_profile_screen');
   }, []);
 
   const { t } = useTranslation();
+
   useEffect(() => {
     GoogleSignin.configure({
       webClientId: '865618605576-j2tb9toevqc7tonmbp01dim1ddvod7r0.apps.googleusercontent.com',
       forceCodeForRefreshToken: true,
       offlineAccess: false
     });
+
+    // Fetch current ad consent status
+    async function fetchConsentStatus() {
+      const consentInfo = await AdsConsent.requestInfoUpdate();
+      setConsentInfo(consentInfo);
+    }
+
+    fetchConsentStatus();
   }, []);
 
+  // Function to handle ad consent
+  const handleAdConsent = useCallback(async () => {
+    if (consentInfo.canRequestAds) {
+      // Withdraw consent
+      await AdsConsent.reset();
+      setConsentInfo(null);
+    } else {
+      // Request consent
+      const consentInfo = await AdsConsent.loadAndShowConsentFormIfRequired();
+      setAdConsent(consentInfo);
+    }
+  }, [consentInfo]);
+
   const onLogout = useCallback(async () => {
     await logout();
     await removeUserSession();
@@ -42,29 +68,50 @@ function UserProfile(props) {
     } catch (error) {
       console.error(error);
     }
-    // Google Account disconnected from your app.
-    // Perform clean-up actions, such as deleting data associated with the disconnected account.
   }, [loadInitPaletteFromStore, loadUserData, props.navigation]);
 
   return (
     <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
-      <View style={[styles.logoutContainer]}>
-        <Image style={styles.logo} source={{ uri: userData?.avatar_url }} />
-        <Text style={styles.intro}>
-          {t('Name: ')}
-          {userData?.fullName}
-        </Text>
-        <Text style={styles.intro}>
-          {t('Email: ')}
-          {userData?.email}
-        </Text>
+      {userData && 
+        <View style={[styles.logoutContainer]}>
+          <Image style={styles.logo} source={{ uri: userData?.avatar_url }} />
+          <Text style={styles.intro}>
+            {t('Name: ')}
+            {userData?.fullName}
+          </Text>
+          <Text style={styles.intro}>
+            {t('Email: ')}
+            {userData?.email}
+          </Text>
+          <CromaButton
+            style={{ backgroundColor: Colors.primary, width: '100%' }}
+            textStyle={{ color: Colors.white }}
+            onPressWithLoader={onLogout}>
+            {t('Logout')}
+          </CromaButton>
+        </View>
+      }
+
+      {!userData && 
         <CromaButton
           style={{ backgroundColor: Colors.primary, width: '100%' }}
           textStyle={{ color: Colors.white }}
-          onPressWithLoader={onLogout}>
-          {t('Logout')}
+          onPressWithLoader={() => {
+            openAuthOverlay();
+          }}>
+          {t('Sign In / Sign Up')}
         </CromaButton>
-      </View>
+      }
+
+      { consentInfo.status == AdsConsentStatus.REQUIRED && 
+      <TouchableOpacity
+        style={styles.consentButton}
+        onPress={handleAdConsent}>
+        <Text style={styles.consentText}>
+          {consentInfo.canRequestAds ? t('Withdraw Ad Consent') : t('Give Ad Consent')}
+        </Text>
+      </TouchableOpacity>
+      }
     </ScrollView>
   );
 }
@@ -73,7 +120,7 @@ UserProfile.propTypes = {
   navigation: PropTypes.any,
   hideWelcomeMessage: PropTypes.bool,
   reloadScreen: PropTypes.func,
-  signupMessage: PropTypes.string | undefined
+  signupMessage: PropTypes.string
 };
 
 const styles = StyleSheet.create({
@@ -94,6 +141,17 @@ const styles = StyleSheet.create({
     height: 50,
     width: 50,
     marginTop: 30
+  },
+  consentButton: {
+    marginTop: 20,
+    backgroundColor: Colors.lightGrey,
+    padding: 10,
+    borderRadius: 5,
+    alignItems: 'center'
+  },
+  consentText: {
+    color: Colors.white,
+    fontSize: 16
   }
 });