musicland/src/screens/Profile/ChangeEmailAddress.js

import { BlurView } from 'expo-blur'
import React, { useEffect, useState } from 'react'
import { Platform, Text, View } from 'react-native'
import { responsiveHeight } from 'react-native-responsive-dimensions'
import { useGlobal } from 'reactn'
import { checkIfEmailIsValid } from '../../actions/signupActions'
import { background } from '../../assets'
import GradientButton from '../../components/GradientButton'
import firebase, { usersRef } from '../../config/firebase'
import { isWeb } from '../../hooks/useLayoutType'
import Page from '../../layouts/Page'
import { goBack } from '../../navigation/NavigationService'
import { gutters, Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import EditInput from './components/EditInput'

const ChangeEmailAddress = () => {
  const [email, setEmail] = useState('')
  const [originalEmail, setOriginalEmail] = useState('')
  const [emailError, setEmailError] = useState('')
  const [, setTooltip] = useGlobal('_tooltip')
  const [currentUserData] = useGlobal('currentUserData')
  const [loading, setLoading] = useState(false)
  const [currentPassword, setCurrentPassword] = useState('')

  useEffect(() => {
    const authEmail = firebase.auth().currentUser?.email || ''
    const profileEmail = (currentUserData?.email || authEmail || '').trim()
    setEmail((prev) => (prev ? prev : profileEmail))
    setOriginalEmail(profileEmail)
  }, [currentUserData?.email])

  const onChangeEmail = (val) => {
    setEmail(val)
    const trimmed = (val || '').trim()
    if (trimmed.length === 0) {
      setEmailError('')
      return
    }
    if (!checkIfEmailIsValid({ email: trimmed })) {
      setEmailError('Adresse email invalide')
    } else {
      setEmailError('')
    }
  }

  const onSave = async () => {
    const val = (email || '').trim()
    if (!val) return
    try {
      setLoading(true)
      const user = firebase.auth().currentUser
      const uid = user?.uid
      if (!user || !uid) return

      try {
        const credential = firebase.auth.EmailAuthProvider.credential(user.email, currentPassword)
        await user.reauthenticateWithCredential(credential)
      } catch (reauthErr) {
        setTooltip({ type: 'error', text: 'Mot de passe actuel incorrect.' })
        return
      }

      // Use verifyBeforeUpdateEmail instead of updateEmail for newer Firebase projects
      // This sends a verification email to the new address and only changes it once verified.
      // However, for some projects, we might still need to update Firestore record if allowed.
      try {
        if (typeof user.verifyBeforeUpdateEmail === 'function') {
          await user.verifyBeforeUpdateEmail(val)
          setTooltip({
            type: 'success',
            text: 'Un email de vérification a été envoyé à votre nouvelle adresse.',
          })
        } else {
          await user.updateEmail(val)
          await usersRef.doc(uid).set({ email: val }, { merge: true })
          setTooltip({ type: 'success', text: 'Adresse email mise à jour' })
        }
        goBack()
      } catch (updateErr) {
        console.log('UpdateEmail error detail', updateErr)
        let msg = 'Mise à jour impossible'
        if (updateErr.code === 'auth/operation-not-allowed') {
          msg = "La modification d'email directe n'est pas autorisée. Contactez le support."
        } else if (updateErr.message?.includes('verify')) {
          msg = "Veuillez vérifier votre nouvel email avant d'effectuer le changement."
        } else {
          msg = updateErr.message || msg
        }
        setTooltip({ type: 'error', text: msg })
      }
    } catch (e) {
      console.log('ChangeEmailAddress error', e)
      setTooltip({ type: 'error', text: e?.message || 'Une erreur est survenue' })
    } finally {
      setLoading(false)
    }
  }
  return (
    <Page
      headerType="NAVIGATE"
      title="Modifier mon email"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 4,
      }}
      containerStyle={{
        backgroundColor: isWeb ? 'transparent' : '#0000004D',
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <BlurView
          intensity={Platform.OS !== 'ios' ? 10 : 20}
          style={{
            paddingHorizontal: 20,
            paddingVertical: 23,
            borderRadius: 20,
            overflow: 'hidden',
            backgroundColor: Palette.glass,
          }}
          // experimentalBlurMethod={
          //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
          // }
        >
          <EditInput
            placeholder="Adresse mail"
            label="Adresse mail"
            value={email}
            setValue={onChangeEmail}
            type="email-address"
          />
          <View style={{ height: 10 }} />
          <EditInput
            placeholder="Mot de passe actuel"
            label="Mot de passe actuel"
            value={currentPassword}
            setValue={setCurrentPassword}
            type="password"
          />
          {!!emailError && (
            <Text
              style={{
                fontSize: 12,
                color: Palette.red,
                fontFamily: FONT_FAMILY.InterRegular,
                marginTop: 6,
              }}
            >
              {emailError}
            </Text>
          )}
        </BlurView>
      </View>
      <GradientButton
        title={loading ? 'Chargement...' : 'Enregistrer les modifications'}
        containerStyle={{
          width: '80%',
          alignSelf: 'center',
        }}
        onPress={onSave}
        disabled={
          loading ||
          !email?.trim() ||
          !!emailError ||
          email.trim() === originalEmail.trim() ||
          !currentPassword?.trim()
        }
      />
    </Page>
  )
}

export default ChangeEmailAddress