crazycharge-app/component/accountPages/accountMainPageComponent.tsx

import { View, Text, ScrollView, Image, Switch, Pressable, Dimensions, Linking, Alert, AppState } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useFocusEffect } from 'expo-router';
import { useAuth } from '../../context/AuthProvider';
import * as Notifications from 'expo-notifications';
import { useColorScheme } from 'nativewind';
import Constants from 'expo-constants';
import { useState, useEffect, useCallback } from 'react';
import {
    AccountSettingIconSvg,
    ActivitySvg,
    MyCarSvg,
    DarkModeSvg,
    QuestionMarkIconSvg,
    SettingIconSvg,
    VipCodeIcoonSvg,
    WalletSvg,
    NotificationSvg,
    BookingIconSvg,
    UserTermsSvg,
    LanguageSvg
} from '../global/SVG';
import { usePushNotifications } from '../../app/hooks/usePushNotifications';
import useUserInfoStore from '../../providers/userinfo_store';
import { authenticationService } from '../../service/authService';
import { handleGoWhatsApp } from '../../util/index';
import { useTranslation } from '../../util/hooks/useTranslation';
import LanguageSwitcher from '../registrationMultiStepForm/formComponent/formPages/languageSwitcher';

const AccountMainPageComponent = () => {
    const { user, logout } = useAuth();
    const { colorScheme, toggleColorScheme } = useColorScheme();
    const screenWidth = Dimensions.get('window').width;
    const imageWidth = screenWidth * 0.9; // 90% of screen width
    const aspectRatio = 210 / 375;
    const [notificationsEnabled, setNotificationsEnabled] = useState(false);
    const { expoPushToken, notification } = usePushNotifications();
    const { notifySessionID } = useUserInfoStore();
    const { t } = useTranslation();

    //everytime i am on this screen, i check if permission is granted.
    useFocusEffect(
        useCallback(() => {
            const checkPermissionsAndToken = async () => {
                const { status } = await Notifications.getPermissionsAsync();
                setNotificationsEnabled(status === 'granted');
                if (status === 'granted') {
                    //if status is granted, then i will fetch latest expo token to see if it is the same as notify_session_id
                    const latestToken = await Notifications.getExpoPushTokenAsync({
                        projectId: Constants.expoConfig?.extra?.eas?.projectId
                    });
                    //TODO: if latestToken = notify_session_id, do nothing
                    if (latestToken.data === notifySessionID) {
                        return;
                    } else {
                        const res = await authenticationService.changeNotifySessionID(latestToken.data);
                        if (res) {
                            console.log('Change notifySessionID Successfully!');
                        } else {
                            Alert.alert(t('account.notification_update_failed'), t('common.try_again_later'));
                        }
                    }
                    //TODO: if latestToken != notify_session_id, update notify_session_id to latestToken
                }
            };
            checkPermissionsAndToken();
            const subscription = AppState.addEventListener('change', (nextAppState: string) => {
                if (nextAppState === 'active') {
                    checkPermissionsAndToken();
                }
            });

            return () => {
                subscription.remove();
            };
        }, [expoPushToken]) // Add expoPushToken as a dependency
    );
    const toggleNotifications = async () => {
        Alert.alert(t('account.notification_settings'), t('account.notification_settings_message'), [
            {
                text: t('common.cancel'),
                style: 'cancel'
            },
            {
                text: t('account.go_to_settings'),
                onPress: () => Linking.openSettings()
            }
        ]);
    };
    return (
        <SafeAreaView className="flex-1 bg-white dark:bg-[#05181C]" edges={['top', 'left', 'right']}>
            <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
                <View style={{ marginTop: 25 }}>
                    <Text style={{ fontSize: 48 }} className="text-black dark:text-white">
                        {user?.nickname}
                    </Text>
                </View>

                <View className="flex-row justify-between mt-4 ">
                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.push('/(account)/(wallet)/walletPage')}
                    >
                        <WalletSvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">{t('account.wallet')}</Text>
                    </Pressable>
                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.replace('vipQrPage')}
                    >
                        <VipCodeIcoonSvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">VIP Code</Text>
                    </Pressable>

                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.push('/activityRecordPage')}
                    >
                        <ActivitySvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black text-center dark:text-[#36DFFF]">{t('account.charging_history')}</Text>
                    </Pressable>
                </View>
                <View className="my-4">
                    {/* <Pressable onPress={() => router.push('uberVerificationPage')}>
                        <Image
                            resizeMode="contain"
                            source={require('../../assets/uber20008.png')}
                            style={{ width: imageWidth, height: imageWidth * aspectRatio, alignSelf: 'center' }}
                        />
                    </Pressable> */}
                </View>
                <View className="w-full h-1 bg-[#DBE4E8] dark:bg-[#253336]" />
                <View>
                    <View className="py-4">
                        <Pressable
                            onPress={() => router.push('/accountSettingPage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <AccountSettingIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">{t('account.account_management')}</Text>
                        </Pressable>
                    </View>

                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className="py-4">
                        <Pressable
                            onPress={() => handleGoWhatsApp()}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <QuestionMarkIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">WhatsApp</Text>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className=" py-4 ">
                        <Pressable
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <View className="flex flex-row justify-between w-full">
                                <View className="flex flex-row items-center">
                                    <NotificationSvg isDark={colorScheme == 'dark'} />
                                    <Text className="text-lg pl-2 text-black dark:text-white">{t('account.allow_notifications')}</Text>
                                </View>
                                <Switch className='mr-8' value={notificationsEnabled} onChange={toggleNotifications} />
                            </View>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className="py-4">
                        <Pressable
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <View className="flex flex-row justify-between w-full">
                                <View className="flex flex-row items-center">
                                    <LanguageSvg isDark={colorScheme == 'dark'} />
                                    <Text className="text-lg pl-2 text-black dark:text-white">{t('account.select_language')}</Text>
                                </View>
                                <LanguageSwitcher/>
                            </View>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className="py-4">
                        <Pressable
                            onPress={() => router.push('/accountUserTermsPage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <UserTermsSvg />
                            <Text className="text-lg pl-2 text-black dark:text-white">{t('account.user_terms')}</Text>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className="py-4">
                        <Pressable
                            onPress={logout}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <SettingIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">{t('account.logout')}</Text>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default AccountMainPageComponent;