feat: landing popup

src/screens/LandingPage.js

@@ -2,15 +2,17 @@ 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 { background } from "../assets";
+import { background, icons } from "../assets";
 import FullscreenIntroVideo from "../components/FullscreenIntroVideo";
 import GradientButton from "../components/GradientButton";
+import { LinearGradient } from "../components/LinearGradient/LinearGradient";
 import { videosRef } from "../config/firebase";
 import useDataFromRef from "../hooks/useDataFromRef";
 import Page from "../layouts/Page";
@@ -18,7 +20,6 @@ import { Routes } from "../navigation/Routes";
 import { useUser } from "../providers/UserDataProvider";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
-import { isMobile } from "../hooks/useLayoutType";
 
 const LANGUAGE_STORAGE_KEY = "preferredLanguage";
 
@@ -27,6 +28,7 @@ export default function LandingPage() {
   const { currentUID } = useUser();
   const [videoUrl, setVideoUrl] = useState(null);
   const [selectedLanguage, setSelectedLanguage] = useState(null);
+  const [showFreeCreditsPopup, setShowFreeCreditsPopup] = useState(false);
 
   const handleSelectLanguage = useCallback((language) => {
     setSelectedLanguage(language);
@@ -61,6 +63,16 @@ export default function LandingPage() {
     };
   }, []);
 
+  useEffect(() => {
+    if (currentUID) {
+      setShowFreeCreditsPopup(false);
+      return;
+    }
+    if (selectedLanguage) {
+      setShowFreeCreditsPopup(true);
+    }
+  }, [currentUID, selectedLanguage]);
+
   return (
     <>
       <Page
@@ -95,6 +107,36 @@ export default function LandingPage() {
             )}
             {selectedLanguage && (
               <View style={styles.actions}>
+                {showFreeCreditsPopup && (
+                  <LinearGradient
+                    colors={["#F94697", "#7023F7"]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 0 }}
+                    style={styles.freeCreditsCard}
+                  >
+                    <View style={styles.freeCreditsContent}>
+                      <View style={styles.freeCreditsTextContainer}>
+                        <Text style={styles.freeCreditsTitle}>
+                          Tu as 5 crédits gratuits
+                        </Text>
+                        <Text style={styles.freeCreditsSubtitle}>
+                          pour 1 parcours offert !
+                        </Text>
+                      </View>
+                      <TouchableOpacity
+                        onPress={() => setShowFreeCreditsPopup(false)}
+                        accessibilityRole="button"
+                        accessibilityLabel="Fermer le message des crédits offerts"
+                        style={styles.freeCreditsClose}
+                      >
+                        <Image
+                          source={icons.close}
+                          style={styles.freeCreditsCloseIcon}
+                        />
+                      </TouchableOpacity>
+                    </View>
+                  </LinearGradient>
+                )}
                 <GradientButton
                   title="Découvrir Musicland"
                   onPress={() => setVideoUrl(video?.introWeb)}
@@ -169,4 +211,38 @@ const styles = StyleSheet.create({
   actionButton: {
     width: "100%",
   },
+  freeCreditsCard: {
+    width: "100%",
+    borderRadius: 18,
+    paddingVertical: 14,
+    paddingHorizontal: 20,
+  },
+  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,
+  },
 });