new register

2025-10-22 11:28:53 +02:00
parent 60e64fa892
commit 91163b8a75
5 changed files with 627 additions and 81 deletions
@@ -18,6 +18,10 @@ import { FONT_FAMILY } from "../styles/Fonts";
 const CreatePassword = () => {
  const route = useRoute();
  const email = route?.params?.email || "";
+  const firstName = route?.params?.firstName || "";
+  const lastName = route?.params?.lastName || "";
+  const country = route?.params?.country || null;
+  const preferredLanguage = route?.params?.preferredLanguage || null;
  const [password, setPassword] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [loading, setLoading] = useState(false);
@@ -62,9 +66,18 @@ const CreatePassword = () => {
        .createUserWithEmailAndPassword(email.trim(), password);
      const uid = cred?.user?.uid || firebase.auth().currentUser?.uid;
      if (!uid) throw new Error("Création de compte échouée");
+      const trimmedFirstName =
+        typeof firstName === "string" ? firstName.trim() : "";
+      const trimmedLastName =
+        typeof lastName === "string" ? lastName.trim() : "";
      await usersRef.doc(uid).set(
        {
          email: email.trim(),
+          ...(trimmedFirstName ? { firstName: trimmedFirstName } : {}),
+          ...(trimmedLastName ? { lastName: trimmedLastName } : {}),
+          ...(preferredLanguage ? { preferredLanguage } : {}),
+          ...(country?.code ? { countryCode: country.code } : {}),
+          ...(country?.name ? { countryName: country.name } : {}),
          createdAt: firebase.firestore.FieldValue.serverTimestamp(),
          updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
        },
@@ -1,6 +1,7 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useNavigation } from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import { useCallback, useEffect, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { background } from "../assets";
 import FullscreenIntroVideo from "../components/FullscreenIntroVideo";
 import GradientButton from "../components/GradientButton";
@@ -10,16 +11,36 @@ import { isWeb } from "../hooks/useLayoutType";
 import Page from "../layouts/Page";
 import { Routes } from "../navigation/Routes";
 import { useUser } from "../providers/UserDataProvider";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+
+const LANGUAGE_STORAGE_KEY = "preferredLanguage";

 export default function LandingPage() {
  const navigation = useNavigation();
  const { currentUID } = useUser();
  const [isVideoVisible, setIsVideoVisible] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState(null);

  const handleStartVisit = useCallback(() => {
    setIsVideoVisible(true);
  }, []);

+  const handleSelectLanguage = useCallback((language) => {
+    setSelectedLanguage(language);
+    AsyncStorage.setItem(LANGUAGE_STORAGE_KEY, language).catch((error) => {
+      console.warn("LandingPage: failed to persist language", error);
+    });
+  }, []);
+
+  const handleSashaHome = useCallback(() => {
+    // Placeholder handler until the Sasha experience is available.
+  }, []);
+
+  const handleLaunchAdventure = useCallback(() => {
+    navigation.navigate(Routes.Register);
+  }, [navigation]);
+
  const persistAdventureStarted = useCallback(async () => {
    if (!currentUID) {
      return;
@@ -44,11 +65,28 @@ export default function LandingPage() {
    simpleRef: true,
  });

+  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);
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
  return (
    <>
      <Page
        shareBtn
-        connect
+        // connect
        title="Landing Page"
        backgroundImg={background.homeBGWeb}
      >
@@ -59,10 +97,43 @@ export default function LandingPage() {
            alignItems: "center",
          }}
        >
-          <GradientButton
-            title="Commencer la visite"
-            onPress={handleStartVisit}
-          />
+          <View style={styles.content}>
+            {!selectedLanguage && (
+              <View style={styles.languageRow}>
+                <TouchableOpacity
+                  style={[styles.languageButton]}
+                  onPress={() => handleSelectLanguage("fr")}
+                >
+                  <Text style={styles.languageText}>🇫🇷 Français</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.languageButton]}
+                  onPress={() => handleSelectLanguage("en")}
+                >
+                  <Text style={styles.languageText}>🇬🇧 English</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+            {selectedLanguage && (
+              <View style={styles.actions}>
+                <GradientButton
+                  title="Découvrir Musicland"
+                  onPress={handleStartVisit}
+                  containerStyle={styles.actionButton}
+                />
+                <GradientButton
+                  title="Accueil avec Sasha"
+                  onPress={handleSashaHome}
+                  containerStyle={styles.actionButton}
+                />
+                <GradientButton
+                  title="Je me lance dans l'aventure"
+                  onPress={handleLaunchAdventure}
+                  containerStyle={styles.actionButton}
+                />
+              </View>
+            )}
+          </View>
        </View>
      </Page>
      <FullscreenIntroVideo
@@ -73,3 +144,40 @@ export default function LandingPage() {
    </>
  );
 }
+
+const styles = StyleSheet.create({
+  content: {
+    width: "100%",
+    maxWidth: 360,
+    alignItems: "center",
+    gap: 32,
+  },
+  languageRow: {
+    flexDirection: "row",
+    gap: 16,
+    justifyContent: "center",
+  },
+  languageButton: {
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: Palette.ultraLightWhite,
+    backgroundColor: Palette.ultraLightWhite,
+    paddingVertical: 12,
+    paddingHorizontal: 18,
+    minWidth: 140,
+    alignItems: "center",
+  },
+  languageText: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  actions: {
+    width: "100%",
+    maxWidth: 320,
+    gap: 16,
+  },
+  actionButton: {
+    width: "100%",
+  },
+});
@@ -1,9 +1,19 @@
-import React, { useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
 import { background } from "../assets";
 import BorderGradientButton from "../components/BorderGradientButton";
 import { Input } from "../components/Input";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
+import COUNTRIES from "../constants/countries";
 import { isWeb } from "../hooks/useLayoutType";
 import Page from "../layouts/Page";
 import { Routes } from "../navigation";
@@ -11,8 +21,55 @@ import { navigate } from "../navigation/NavigationService";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";

+const LANGUAGE_STORAGE_KEY = "preferredLanguage";
+
 const Register = () => {
  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [selectedCountry, setSelectedCountry] = useState(null);
+  const [countrySearch, setCountrySearch] = useState("");
+  const [isCountryModalVisible, setIsCountryModalVisible] = useState(false);
+  const [preferredLanguage, setPreferredLanguage] = useState(null);
+
+  useEffect(() => {
+    AsyncStorage.getItem(LANGUAGE_STORAGE_KEY)
+      .then((storedLanguage) => {
+        if (storedLanguage) {
+          setPreferredLanguage(storedLanguage);
+        }
+      })
+      .catch((error) => {
+        console.warn("Register: failed to load preferred language", error);
+      });
+  }, []);
+
+  const filteredCountries = useMemo(() => {
+    const query = countrySearch.trim().toLowerCase();
+    if (!query) {
+      return COUNTRIES;
+    }
+    return COUNTRIES.filter((country) =>
+      country.name.toLowerCase().includes(query)
+    );
+  }, [countrySearch]);
+
+  const isFormValid =
+    email.trim().length > 0 &&
+    firstName.trim().length > 0 &&
+    lastName.trim().length > 0 &&
+    selectedCountry;
+
+  const handleSelectCountry = (country) => {
+    setSelectedCountry(country);
+    setIsCountryModalVisible(false);
+    setCountrySearch("");
+  };
+
+  const handleCloseModal = () => {
+    setIsCountryModalVisible(false);
+    setCountrySearch("");
+  };

  return (
    <Page
@@ -21,82 +78,259 @@ const Register = () => {
      headerType="NAVIGATION"
      title="Inscription"
    >
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <ItemContainer height={360} disableKeyboardHeight>
-          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
-            <Text
-              style={{
-                fontSize: 22,
-                color: Palette.white,
-                fontFamily: FONT_FAMILY.InterSemiBold,
-              }}
-            >
-              Saisis ton adresse mail pour commencer
-            </Text>
-            <Input
-              placeholder="Adresse mail"
-              label="Adresse mail"
-              isBlur
-              type="email"
-              value={email}
-              setValue={setEmail}
-            />
+      <View style={styles.pageContent}>
+        <ItemContainer height={520} disableKeyboardHeight>
+          <View style={styles.formContent}>
+            <Text style={styles.title}>Renseigne tes informations</Text>
+            {preferredLanguage && (
+              <Text style={styles.languageInfo}>
+                Langue choisie :{" "}
+                <Text style={styles.languageInfoValue}>
+                  {preferredLanguage === "fr" ? "Français" : "English"}
+                </Text>
+              </Text>
+            )}
+            <View style={{ gap: 16 }}>
+              <View style={{ gap: 12 }}>
+                <Input
+                  placeholder="Prénom"
+                  label="Prénom"
+                  isBlur
+                  value={firstName}
+                  setValue={setFirstName}
+                />
+                <Input
+                  placeholder="Nom"
+                  label="Nom"
+                  isBlur
+                  value={lastName}
+                  setValue={setLastName}
+                />
+                <Pressable
+                  style={[
+                    styles.countryButton,
+                    selectedCountry ? styles.countryButtonFilled : null,
+                  ]}
+                  onPress={() => setIsCountryModalVisible(true)}
+                >
+                  <Text
+                    style={[
+                      styles.countryButtonText,
+                      !selectedCountry && styles.countryButtonPlaceholder,
+                    ]}
+                  >
+                    {selectedCountry
+                      ? selectedCountry.name
+                      : "Choisis ton pays"}
+                  </Text>
+                </Pressable>
+              </View>
+              <Input
+                placeholder="Adresse mail"
+                label="Adresse mail"
+                isBlur
+                type="email"
+                value={email}
+                setValue={setEmail}
+              />
+            </View>
            <BorderGradientButton
              title="Créer mon compte"
              containerStyle={{
                width: "80%",
                alignSelf: "center",
              }}
-              onPress={() => navigate(Routes.CreatePassword, { email })}
-              disabled={!email}
+              onPress={() =>
+                navigate(Routes.CreatePassword, {
+                  email: email.trim(),
+                  firstName: firstName.trim(),
+                  lastName: lastName.trim(),
+                  country: selectedCountry,
+                  preferredLanguage,
+                })
+              }
+              disabled={!isFormValid}
            />
-            <View
-              style={{
-                alignItems: "center",
-                gap: 4,
-              }}
-            >
-              <Text
-                style={{
-                  fontSize: 12,
-                  color: Palette.gray,
-                  fontFamily: FONT_FAMILY.HelveticaNeueRegular,
-                  textAlign: "center",
-                }}
-              >
+            <View style={styles.footer}>
+              <Text style={styles.terms}>
                En t’inscrivant, tu acceptes nos conditions générales{"\n"}
                d’utilisation et notre politique de confidentialité.
              </Text>
              <Pressable onPress={() => navigate(Routes.Login)}>
-                <Text
-                  style={{
-                    fontSize: 14,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
-                  }}
-                >
+                <Text style={styles.loginText}>
                  Tu as déjà un compte?{" "}
-                  <Text
-                    style={{
-                      fontFamily: FONT_FAMILY.InterSemiBold,
-                    }}
-                  >
-                    Se connecter
-                  </Text>
+                  <Text style={styles.loginLink}>Se connecter</Text>
                </Text>
              </Pressable>
            </View>
          </View>
        </ItemContainer>
      </View>
+      <Modal
+        transparent
+        visible={isCountryModalVisible}
+        animationType="fade"
+        onRequestClose={handleCloseModal}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Choisis ton pays</Text>
+              <Pressable onPress={handleCloseModal}>
+                <Text style={styles.closeText}>Fermer</Text>
+              </Pressable>
+            </View>
+            <TextInput
+              value={countrySearch}
+              onChangeText={setCountrySearch}
+              placeholder="Rechercher un pays"
+              placeholderTextColor={Palette.gray}
+              style={styles.searchInput}
+            />
+            <FlatList
+              data={filteredCountries}
+              keyExtractor={(item) => item.code}
+              renderItem={({ item }) => (
+                <Pressable
+                  style={styles.countryItem}
+                  onPress={() => handleSelectCountry(item)}
+                >
+                  <Text style={styles.countryItemText}>{item.name}</Text>
+                </Pressable>
+              )}
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+              ListEmptyComponent={
+                <Text style={styles.emptyListText}>Aucun pays trouvé</Text>
+              }
+            />
+          </View>
+        </View>
+      </Modal>
    </Page>
  );
 };

 export default Register;
+
+const styles = StyleSheet.create({
+  pageContent: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  formContent: {
+    gap: 32,
+    paddingTop: 5,
+    paddingHorizontal: 5,
+  },
+  title: {
+    fontSize: 22,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  languageInfo: {
+    fontSize: 14,
+    color: Palette.gray,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  languageInfoValue: {
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  countryButton: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: Palette.ultraLightWhite,
+    backgroundColor: Palette.glass,
+    minHeight: 50,
+    justifyContent: "center",
+    paddingHorizontal: 16,
+  },
+  countryButtonFilled: {
+    borderColor: Palette.primary,
+  },
+  countryButtonText: {
+    fontSize: 14,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  countryButtonPlaceholder: {
+    color: Palette.gray,
+  },
+  footer: {
+    alignItems: "center",
+    gap: 4,
+  },
+  terms: {
+    fontSize: 12,
+    color: Palette.gray,
+    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+    textAlign: "center",
+  },
+  loginText: {
+    fontSize: 14,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+  },
+  loginLink: {
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: Palette.transparentBlack,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
+  },
+  modalContainer: {
+    width: "100%",
+    maxWidth: 420,
+    maxHeight: "80%",
+    backgroundColor: Palette.darkPurple,
+    borderRadius: 20,
+    padding: 16,
+    gap: 12,
+  },
+  modalHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  modalTitle: {
+    fontSize: 18,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  closeText: {
+    fontSize: 14,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  searchInput: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: Palette.ultraLightWhite,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  countryItem: {
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: Palette.ultraLightWhite,
+  },
+  countryItemText: {
+    fontSize: 14,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  emptyListText: {
+    fontSize: 14,
+    color: Palette.gray,
+    fontFamily: FONT_FAMILY.InterRegular,
+    textAlign: "center",
+    paddingVertical: 20,
+  },
+});