diff --git a/src/screens/LandingPage.js b/src/screens/LandingPage.js index ba5c0a1..35d1491 100644 --- a/src/screens/LandingPage.js +++ b/src/screens/LandingPage.js @@ -1,96 +1,108 @@ import AsyncStorage from '@react-native-async-storage/async-storage' -import { useNavigation } from '@react-navigation/native' -import { useCallback, useEffect, useState } from 'react' -import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native' +import { useCallback, useEffect, useRef, useState } from 'react' +import { + ActivityIndicator, + Image, + Platform, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native' import { background, icons } from '../assets' import EntryJingle from '../components/EntryJingle' import FullscreenIntroVideo from '../components/FullscreenIntroVideo' -import GradientButton from '../components/GradientButton' import { videosRef } from '../config/firebase' import useDataFromRef from '../hooks/useDataFromRef' import Page from '../layouts/Page' import { Routes } from '../navigation' +import { navigate, reset } from '../navigation/NavigationService' import { useUser } from '../providers/UserDataProvider' import { Palette } from '../styles' import { FONT_FAMILY } from '../styles/Fonts' -import { BlurView } from 'expo-blur' const LANGUAGE_STORAGE_KEY = 'preferredLanguage' export default function LandingPage() { - const navigation = useNavigation() const { currentUID } = useUser() const [videoUrl, setVideoUrl] = useState(null) const [selectedLanguage, setSelectedLanguage] = useState(null) - const [hasLoadedPreferredLanguage, setHasLoadedPreferredLanguage] = useState(false) - const [showFreeCreditsPopup, setShowFreeCreditsPopup] = useState(false) + const continuationHandledRef = useRef(false) const isAuthenticated = !!currentUID - const handleSelectLanguage = useCallback((language) => { - setSelectedLanguage(language) - AsyncStorage.setItem(LANGUAGE_STORAGE_KEY, language).catch((error) => { - console.warn('LandingPage: failed to persist language', error) - }) - }, []) - - const handleLaunchAdventure = useCallback(() => { - if (isAuthenticated) { - navigation.navigate(Routes.BottomTab, { - screen: Routes.HomeStack, - params: { screen: Routes.Home }, - }) - return - } - navigation.navigate(Routes.Register) - }, [isAuthenticated, navigation]) - - const handleOpenSubscriptions = useCallback(() => { - navigation.navigate(Routes.Payments) - }, [navigation]) - - const { data: video } = useDataFromRef({ - ref: videosRef.doc('fr'), + const { data: welcomeVideo, loading: welcomeVideoLoading } = useDataFromRef({ + ref: selectedLanguage ? videosRef.doc(selectedLanguage) : null, + initialState: null, simpleRef: true, + condition: !!selectedLanguage, + refreshArray: [selectedLanguage], }) - useEffect(() => { - let isMounted = true - AsyncStorage.getItem(LANGUAGE_STORAGE_KEY) - .then((storedLanguage) => { - if (storedLanguage && isMounted) { - setSelectedLanguage(storedLanguage) - } - }) - .catch((error) => { - console.warn('LandingPage: failed to load language', error) - }) - .finally(() => { - if (isMounted) { - setHasLoadedPreferredLanguage(true) - } - }) - - return () => { - isMounted = false - } + const openRegistration = useCallback(() => { + navigate(Routes.Register) }, []) + const handleSelectLanguage = useCallback(async (language) => { + try { + await AsyncStorage.setItem(LANGUAGE_STORAGE_KEY, language) + } catch (error) { + console.warn('LandingPage: failed to persist language', error) + } + continuationHandledRef.current = false + setSelectedLanguage(language) + }, []) + + const handleVideoClose = useCallback(() => { + setVideoUrl(null) + openRegistration() + }, [openRegistration]) + useEffect(() => { - if (currentUID) { - setShowFreeCreditsPopup(false) + if (!isAuthenticated) { return } - if (selectedLanguage) { - setShowFreeCreditsPopup(true) + reset({ + index: 0, + routes: [ + { + name: Routes.BottomTab, + params: { + screen: Routes.HomeStack, + params: { screen: Routes.Home }, + }, + }, + ], + }) + }, [isAuthenticated]) + + useEffect(() => { + if ( + !selectedLanguage || + welcomeVideoLoading || + continuationHandledRef.current || + isAuthenticated + ) { + return } - }, [currentUID, selectedLanguage]) + + continuationHandledRef.current = true + const nextVideoUrl = + Platform.OS === 'web' + ? welcomeVideo?.registrationIntroWeb + : welcomeVideo?.registrationIntro + + if (typeof nextVideoUrl === 'string' && nextVideoUrl.trim().length > 0) { + setVideoUrl(nextVideoUrl) + return + } + + openRegistration() + }, [isAuthenticated, openRegistration, selectedLanguage, welcomeVideo, welcomeVideoLoading]) return ( <> - + @@ -120,62 +132,13 @@ export default function LandingPage() { )} - {selectedLanguage && ( - - setVideoUrl(video?.introWeb)} - containerStyle={styles.actionButton} - /> - - setVideoUrl(Platform.OS === 'web' ? video?.landingWeb : video?.landing) - } - containerStyle={styles.actionButton} - /> - - {!isAuthenticated ? ( - - ) : null} - {showFreeCreditsPopup && ( - - - - 10 crédits offert - pour 1 parcours gratuit ! - - setShowFreeCreditsPopup(false)} - accessibilityRole="button" - accessibilityLabel="Fermer le message des crédits offerts" - style={styles.freeCreditsClose} - > - - - - - )} - - )} + {selectedLanguage && welcomeVideoLoading ? ( + + ) : null} - setVideoUrl(null)} /> + ) } @@ -213,47 +176,4 @@ const styles = StyleSheet.create({ color: Palette.white, fontFamily: FONT_FAMILY.InterSemiBold, }, - actions: { - width: '100%', - maxWidth: 320, - gap: 16, - }, - actionButton: { - width: '100%', - }, - freeCreditsCard: { - width: '100%', - borderRadius: 18, - paddingVertical: 14, - paddingHorizontal: 20, - overflow: 'hidden', - }, - freeCreditsContent: { - flexDirection: 'row', - alignItems: 'center', - gap: 12, - }, - freeCreditsTextContainer: { - flex: 1, - gap: 2, - }, - freeCreditsTitle: { - fontSize: 16, - color: Palette.white, - fontFamily: FONT_FAMILY.InterSemiBold, - }, - freeCreditsSubtitle: { - fontSize: 13, - color: Palette.white, - fontFamily: FONT_FAMILY.InterRegular, - }, - freeCreditsClose: { - padding: 6, - marginLeft: 6, - }, - freeCreditsCloseIcon: { - width: 14, - height: 14, - tintColor: Palette.grayMid, - }, }) diff --git a/src/screens/Splash.js b/src/screens/Splash.js index dfdb01b..8dbc4ce 100644 --- a/src/screens/Splash.js +++ b/src/screens/Splash.js @@ -6,7 +6,6 @@ import { Routes } from '../navigation' import { SplashAnimationContext } from '../providers/SplashAnimationProvider' import { UserDataContext } from '../providers/UserDataProvider' -import { getRouteAfterAuthentication } from '../utils/registrationFlow' export default ({ navigation }) => { const { setCurrentUserData } = useContext(UserDataContext) @@ -29,7 +28,11 @@ export default ({ navigation }) => { index: 0, routes: [ { - name: getRouteAfterAuthentication(user), + name: Routes.BottomTab, + params: { + screen: Routes.HomeStack, + params: { screen: Routes.Home }, + }, }, ], })