diff --git a/App.js b/App.js index b230f2d..2cc02d3 100644 --- a/App.js +++ b/App.js @@ -21,7 +21,7 @@ import { Palette } from "./src/styles"; import { navigationRef, reset } from "./src/navigation/NavigationService"; import initialGlobalState from "./src/config/initialGlobalState"; -import { MenuProvider } from 'react-native-popup-menu'; +import { MenuProvider } from "react-native-popup-menu"; import firebase from "./src/config/firebase"; import Providers from "./src/providers"; @@ -34,6 +34,8 @@ import { Inter_700Bold, } from "@expo-google-fonts/inter"; +import "./src/utils/Sheet"; + console.disableYellowBox = true; console.reportErrorsAsExceptions = false; diff --git a/package.json b/package.json index 4e00061..af360da 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@react-navigation/stack": "^6.0.11", "@stripe/react-stripe-js": "^2.5.0", "@stripe/stripe-js": "^3.0.0", + "add": "^2.0.6", "deprecated-react-native-prop-types": "^3.0.1", "expo": "~52.0.17", "expo-av": "~15.0.1", @@ -66,6 +67,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.5", + "react-native-actions-sheet": "^0.9.7", "react-native-compressor": "^1.8.24", "react-native-country-picker-modal": "^2.0.0", "react-native-dialog": "^9.3.0", @@ -88,7 +90,8 @@ "react-native-web-linear-gradient": "^1.1.2", "react-native-webview": "13.12.5", "reactn": "^2.2.7", - "rxjs": "^7.6.0" + "rxjs": "^7.6.0", + "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.5", diff --git a/src/assets/UI/eye.png b/src/assets/UI/eye.png index 2bb4b3e..1a8ac4e 100644 Binary files a/src/assets/UI/eye.png and b/src/assets/UI/eye.png differ diff --git a/src/assets/UI/trash.png b/src/assets/UI/trash.png index d36aa1e..3663b97 100644 Binary files a/src/assets/UI/trash.png and b/src/assets/UI/trash.png differ diff --git a/src/assets/icons/share.png b/src/assets/icons/share.png new file mode 100644 index 0000000..2059d81 Binary files /dev/null and b/src/assets/icons/share.png differ diff --git a/src/assets/index.js b/src/assets/index.js index 9e8c0b4..701a9ed 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -81,6 +81,7 @@ import heartOutline from "./icons/heartOutline.png"; import more from "./icons/more.png"; import forward from "./icons/forward.png"; import pause from "./icons/pause.png"; +import share from "./icons/share.png"; export const icons = { bell, @@ -139,6 +140,7 @@ export const icons = { more, forward, pause, + share, }; import triangle from "./art/triangle.png"; diff --git a/src/components/AppActionSheet.js b/src/components/AppActionSheet.js new file mode 100644 index 0000000..e7d3bca --- /dev/null +++ b/src/components/AppActionSheet.js @@ -0,0 +1,37 @@ +import { View, Text } from "react-native"; +import React from "react"; +import ActionSheet from "react-native-actions-sheet"; +import { gutters, Palette } from "../styles"; +import { BlurView } from "expo-blur"; + +const AppActionSheet = ({ children, props }) => { + return ( + + + {children} + + + ); +}; + +export default AppActionSheet; diff --git a/src/components/BlurItemButton.js b/src/components/BlurItemButton.js new file mode 100644 index 0000000..8c17a34 --- /dev/null +++ b/src/components/BlurItemButton.js @@ -0,0 +1,43 @@ +import { View, Text, Pressable, StyleSheet, Image } from "react-native"; +import React from "react"; +import { BlurView } from "expo-blur"; +import { Palette, Style } from "../styles"; +import { FONT_FAMILY } from "../styles/Fonts"; +import { icons } from "../assets"; +import { size } from "../styles/Style"; + +const BlurItemButton = ({ onPress, title = "" }) => { + return ( + + + {title} + + + + ); +}; + +export default BlurItemButton; + +const styles = StyleSheet.create({ + buttonContainer: { + ...Style.containerSpaceBetween, + paddingHorizontal: 12, + height: 56, + borderRadius: 14, + overflow: "hidden", + backgroundColor: Palette.glass, + }, + buttonText: { + fontSize: 16, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, +}); diff --git a/src/components/BorderGradientButton.js b/src/components/BorderGradientButton.js index f775d60..5a82ab0 100644 --- a/src/components/BorderGradientButton.js +++ b/src/components/BorderGradientButton.js @@ -10,6 +10,7 @@ const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress, icon, + titleStyle, }) => { return ( @@ -54,6 +55,7 @@ const BorderGradientButton = ({ fontSize: 15, color: Palette.white, fontFamily: FONT_FAMILY.InterMedium, + ...titleStyle, }} > {title} diff --git a/src/components/NavigateHeader.js b/src/components/NavigateHeader.js index d3213a4..7d1987d 100644 --- a/src/components/NavigateHeader.js +++ b/src/components/NavigateHeader.js @@ -12,6 +12,7 @@ export default ({ onBackPressed = null, containerStyle = {}, headerTitleStyle = {}, + hideBackButton = false, }) => { return ( - onBackPressed?.() || goBack()}> - - + {!hideBackButton && ( + onBackPressed?.() || goBack()}> + + + )} { - const currentColor = value ? Palette.green : Palette.red; + const currentColor = value ? ["#F94697", "#7023F7"] : ["#8C8C8C", "#8C8C8C"]; const switchHeight = 28; - const borderWidth = 2; const internalMargin = 2; - const itemSize = switchHeight - borderWidth * 2 - internalMargin * 2; + const itemSize = switchHeight - internalMargin * 2; return ( - setValue(!value)} - style={{ - flexDirection: "row", - width: switchHeight * 2, - height: switchHeight, - borderColor: currentColor, - borderWidth: borderWidth, - borderRadius: 25, - ...containerStyle, - }} - > - setValue(!value)}> + + > + + ); }; diff --git a/src/components/modal/DeleteAccountModal.js b/src/components/modal/DeleteAccountModal.js new file mode 100644 index 0000000..0cdc4f1 --- /dev/null +++ b/src/components/modal/DeleteAccountModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { SheetManager } from "react-native-actions-sheet"; + +const DeleteAccountModal = () => { + const onClose = async () => { + await SheetManager.hide("DeleteAccount"); + }; + + return ( + + + + + Supprimer mon compte + + + Es-tu sur de vouloir supprimer ton compte?{"\n"}Attention, cette + action est irréversible! + + + + + + + + + ); +}; + +export default DeleteAccountModal; diff --git a/src/components/modal/DeleteAudioModal.js b/src/components/modal/DeleteAudioModal.js new file mode 100644 index 0000000..6731042 --- /dev/null +++ b/src/components/modal/DeleteAudioModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { SheetManager } from "react-native-actions-sheet"; + +const DeleteAudioModal = () => { + const onClose = () => { + SheetManager.hide("DeleteAudio"); + }; + + return ( + + + + + Supprimer mon audio + + + Es-tu sur de vouloir supprimer ton audio?{"\n"} + Attention, cette action est irréversible! + + + + + + + + + ); +}; + +export default DeleteAudioModal; diff --git a/src/components/modal/DeleteModal.js b/src/components/modal/DeleteModal.js new file mode 100644 index 0000000..563213e --- /dev/null +++ b/src/components/modal/DeleteModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import ActionSheet, { SheetManager } from "react-native-actions-sheet"; +import { gutters, Palette } from "../../styles"; +import { BlurView } from "expo-blur"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import AppActionSheet from "../AppActionSheet"; + +const DeleteModal = () => { + const onClose = () => { + SheetManager.hide("Delete"); + }; + + return ( + + + + + Supprimer ma playlist + + + Es-tu sur de vouloir supprimer ta playlist? + + + + + + + + + ); +}; + +export default DeleteModal; diff --git a/src/components/modal/DeletePlaybackModal.js b/src/components/modal/DeletePlaybackModal.js new file mode 100644 index 0000000..f754474 --- /dev/null +++ b/src/components/modal/DeletePlaybackModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { SheetManager } from "react-native-actions-sheet"; + +const DeletePlaybackModal = () => { + const onClose = () => { + SheetManager.hide("DeletePlayback"); + }; + + return ( + + + + + Supprimer mon playback + + + Es-tu sur de vouloir supprimer ton playback?{"\n"} + Attention, cette action est irréversible! + + + + + + + + + ); +}; + +export default DeletePlaybackModal; diff --git a/src/components/modal/ProfileSettingsModal.js b/src/components/modal/ProfileSettingsModal.js new file mode 100644 index 0000000..763c81b --- /dev/null +++ b/src/components/modal/ProfileSettingsModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BlurItemButton from "../BlurItemButton"; +import { SheetManager } from "react-native-actions-sheet"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; + +const ProfileSettingsModal = () => { + const onClose = async () => { + await SheetManager.hide("ProfileSettings"); + }; + + return ( + + + + Paramètres + + + { + onClose(); + navigate(Routes.EditProfile); + }} + /> + { + onClose(); + navigate(Routes.Settings); + }} + /> + + + + ); +}; + +export default ProfileSettingsModal; diff --git a/src/layouts/Page.js b/src/layouts/Page.js index eaad328..9366dd5 100644 --- a/src/layouts/Page.js +++ b/src/layouts/Page.js @@ -36,6 +36,7 @@ export default ({ onBackPressed = null, backgroundImg = background.writingBG, headerTitleStyle = {}, + hideBackButton = false, }) => { const { currentUID } = useUserData(); @@ -81,6 +82,7 @@ export default ({ rightComponent={rightComponent} onBackPressed={onBackPressed} headerTitleStyle={headerTitleStyle} + hideBackButton={hideBackButton} /> ) ) : null} diff --git a/src/navigation/BottomTab.js b/src/navigation/BottomTab.js index 2dfc1be..48a9beb 100644 --- a/src/navigation/BottomTab.js +++ b/src/navigation/BottomTab.js @@ -18,6 +18,7 @@ import HomeStack from "./HomeStack"; import ChatStack from "./ChatStack"; import SettingsStack from "./SettingsStack"; import Library from "../screens/Library/Library.js"; +import Profile from "../screens/Profile/Profile.js"; const bottomTabStyles = StyleSheet.create({ icon: { @@ -91,7 +92,7 @@ export const BottomTabScreen = () => { /> { const providers = [ @@ -19,6 +20,7 @@ const SharedProviders = ({ children }) => { [StripeEmbeddedProvider, {}], [PremiumProvider, {}], [UniversalLinkProvider, {}], + [SheetProvider, {}], ]; // Dynamically nest the providers using reduce diff --git a/src/screens/Library/AllMyLikedMusic.js b/src/screens/Library/AllMyLikedMusic.js index 4545e4a..b7b6a90 100644 --- a/src/screens/Library/AllMyLikedMusic.js +++ b/src/screens/Library/AllMyLikedMusic.js @@ -1,11 +1,18 @@ -import { View, Text } from "react-native"; -import React from "react"; +import { View, Text, Pressable } from "react-native"; +import React, { useState } from "react"; import Page from "../../layouts/Page"; import { background } from "../../assets"; -import { gutters } from "../../styles"; +import { gutters, Palette } from "../../styles"; import MusicCard from "./components/MusicCard"; +import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated"; +import { BlurView } from "expo-blur"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { SheetManager } from "react-native-actions-sheet"; const AllMyLikedMusic = () => { + const [top, setTop] = useState(0); + const [showMenu, setShowMenu] = useState(false); + return ( { {Array.from({ length: 3 }).map((_, index) => ( - + { + setTop(posTop); + if (showMenu) { + if (posTop === top) { + setShowMenu(false); + } else { + setShowMenu(false); + setTimeout(() => { + setShowMenu(true); + }, 300); + } + } else { + setShowMenu(true); + } + }} + /> ))} + {showMenu && ( + + { + setShowMenu(false); + SheetManager.show("Delete"); + }} + > + + + Supprimer de la playlist + + + + + )} diff --git a/src/screens/Library/MusicDetails.js b/src/screens/Library/MusicDetails.js index 74ff744..90ca6cf 100644 --- a/src/screens/Library/MusicDetails.js +++ b/src/screens/Library/MusicDetails.js @@ -13,15 +13,31 @@ import { Palette } from "../../styles"; import Style, { gutters, size } from "../../styles/Style"; import { FONT_FAMILY } from "../../styles/Fonts"; import Slider from "../../components/Slider"; +import { useRoute } from "@react-navigation/core"; +import { SheetManager } from "react-native-actions-sheet"; const MusicDetails = () => { + const params = useRoute().params; + const action = params?.action; const [fav, setFav] = useState(false); return ( ( + SheetManager.show("DeleteAudio")}> + + + ), + })} > { const [selected, setSelected] = useState(false); + const [open, setOpen] = useState(false); + const [layout, setLayout] = useState(null); + const [menuPos, setMenuPos] = useState(0); + + useEffect(() => { + if (layout) { + const top = layout?.y + 45; + setMenuPos(top); + } + }, [layout]); + + const onPressMenu = () => { + onPressMore?.(menuPos); + }; return ( - - - - - - Alors on danse - Stromae - - + setLayout(e.nativeEvent.layout)} + > + + + - setSelected(!selected)}> - - - - - - - - - + + Alors on danse + Stromae + + + setSelected(!selected)}> + + + + + + + + + + {/* {open && ( + + )} */} + ); }; @@ -76,4 +106,7 @@ const styles = StyleSheet.create({ color: Palette.white, fontFamily: FONT_FAMILY.InterRegular, }, + filterContainer: { + backgroundColor: Palette.tran, + }, }); diff --git a/src/screens/Notifications.js b/src/screens/Notifications.js deleted file mode 100644 index 3c30537..0000000 --- a/src/screens/Notifications.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { useEffect } from "reactn"; -import { Text, View, FlatList } from "react-native"; -import { useDataFromRef } from "react-native-minuit/src/hooks"; -import moment from "moment"; -import { Motion } from "@legendapp/motion"; - -import Page from "../layouts/Page"; - -import { Fonts, Style } from "../styles"; -import { notificationsRef } from "../config/firebase"; - -import { LoaderIndicator } from "../providers/LoadingProvider"; - -export default (props) => { - const baseNotificationRef = notificationsRef; - - useEffect(() => { - markAsRead(); - }, []); - - const markAsRead = async () => { - try { - } catch (error) { - console.error(error); - } - }; - - const { - data: notificationList, - loading, - loadMore, - } = useDataFromRef({ - ref: baseNotificationRef.orderBy("timestamp", "desc"), - usePagination: true, - batchSize: 40, - documentID: "notificationID", - }); - - return ( - - { - const { title = "", timestamp } = item; - - const randomDuration = Math.floor(Math.random() * 1000) + 500; - - return ( - {}} - > - - - {title} - - - - - {moment(timestamp.toDate()).format("[Le] DD/MM [à] HH:mm")} - - - ); - }} - keyExtractor={(item) => - `Notifications_${item.notificationID}_${item.projectID}` - } - ItemSeparatorComponent={() => ( - - )} - ListFooterComponent={loading ? : null} - onEndReached={loadMore} - onEndReachedThreshold={0.5} - /> - - ); -}; diff --git a/src/screens/Profile/ChangeEmailAddress.js b/src/screens/Profile/ChangeEmailAddress.js new file mode 100644 index 0000000..7fadb0e --- /dev/null +++ b/src/screens/Profile/ChangeEmailAddress.js @@ -0,0 +1,49 @@ +import { View } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import EditInput from "./components/EditInput"; +import GradientButton from "../../components/GradientButton"; + +const ChangeEmailAddress = () => { + return ( + + + + + + + + + ); +}; + +export default ChangeEmailAddress; diff --git a/src/screens/Profile/ChangePassword.js b/src/screens/Profile/ChangePassword.js new file mode 100644 index 0000000..ac9b6a0 --- /dev/null +++ b/src/screens/Profile/ChangePassword.js @@ -0,0 +1,66 @@ +import { View, Text, Pressable } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import EditInput from "./components/EditInput"; +import GradientButton from "../../components/GradientButton"; +import { FONT_FAMILY } from "../../styles/Fonts"; + +const ChangePassword = () => { + return ( + + + + + + + Mot de passe oublié? + + + + + + + ); +}; + +export default ChangePassword; diff --git a/src/screens/Profile/EditProfile.js b/src/screens/Profile/EditProfile.js new file mode 100644 index 0000000..5878aca --- /dev/null +++ b/src/screens/Profile/EditProfile.js @@ -0,0 +1,72 @@ +import { View, Text, Image, TextInput } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background, img } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { BlurView } from "expo-blur"; +import Style, { size } from "../../styles/Style"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import GradientButton from "../../components/GradientButton"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { goBack } from "../../navigation/NavigationService"; +import EditInput from "./components/EditInput"; + +const EditProfile = () => { + return ( + + + + + + + Modifier la photo + + + + + + + + + ); +}; + +export default EditProfile; diff --git a/src/screens/Profile/Language.js b/src/screens/Profile/Language.js new file mode 100644 index 0000000..7c8111a --- /dev/null +++ b/src/screens/Profile/Language.js @@ -0,0 +1,96 @@ +import { View, Text, Pressable } from "react-native"; +import React, { useState } from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import Style, { size } from "../../styles/Style"; + +const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"]; + +const Language = () => { + const [selected, setSelected] = useState("Français"); + + return ( + + + + + Langue + + + {LANGUAGE.map((item, index) => ( + setSelected(item)} + > + + {selected === item && ( + + )} + + + {item} + + + ))} + + + + + ); +}; + +export default Language; diff --git a/src/screens/Profile/Notifications.js b/src/screens/Profile/Notifications.js new file mode 100644 index 0000000..985db74 --- /dev/null +++ b/src/screens/Profile/Notifications.js @@ -0,0 +1,65 @@ +import React from "reactn"; +import Page from "../../layouts/Page"; +import { gutters, Palette, Style } from "../../styles"; +import { background } from "../../assets"; +import { Text, View } from "react-native"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import Switch from "../../components/Switch"; +import { useState } from "react"; +import { FONT_FAMILY } from "../../styles/Fonts"; + +export default (props) => { + const [isSwitch, setIsSwitch] = useState(false); + + return ( + + + + + + Notifications + + + + + Nous t’encourageons à activer les notifications pour découvrir les + derniers classements, les nouveaux sons et les meilleurs playbacks. + + + + + ); +}; diff --git a/src/screens/Profile/Profile.js b/src/screens/Profile/Profile.js index 7f40cca..a5302ab 100644 --- a/src/screens/Profile/Profile.js +++ b/src/screens/Profile/Profile.js @@ -1,12 +1,229 @@ -import { View, Text } from "react-native"; -import React from "react"; +import { + View, + Text, + Pressable, + Image, + FlatList, + StyleSheet, +} from "react-native"; +import React, { useState } from "react"; +import Page from "../../layouts/Page"; +import { background, icons, img } from "../../assets"; +import { BlurView } from "expo-blur"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import Style, { gutters, size } from "../../styles/Style"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import GradientButton from "../../components/GradientButton"; +import BorderGradient from "../../components/BorderGradient/BorderGradient"; +import MusicCard from "../Library/components/MusicCard"; +import { SheetManager } from "react-native-actions-sheet"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; const Profile = () => { + const [selected, setSelected] = useState("Chansons"); + + const onPressMenu = (item) => { + setSelected(item); + }; + return ( - - Profile - + ( + SheetManager.show("ProfileSettings")}> + + + )} + > + + + + + + + elia.mrn + + + + + 0 + playbacks + + + 880 + abonnés + + + 6 + abonnements + + + + + + + {["Chansons", "Playbacks", "Clips"].map((item, index) => ( + onPressMenu(item)} + style={{ flex: 1 }} + > + + + + {item} + + + + ))} + + {selected === "Playbacks" && ( + + ( + navigate(Routes.Reels)} + > + + + Pour Lili + + + )} + /> + + )} + {selected === "Chansons" && ( + + ( + + navigate(Routes.MusicDetails, { + action: "userProfile", + }) + } + /> + )} + /> + + )} + + ); }; export default Profile; + +const styles = StyleSheet.create({ + value: { + fontSize: 16, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + label: { + fontSize: 12, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + menu: { + fontSize: 12, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + borderGradient: { + borderWidth: 1, + borderRadius: 10, + height: 33, + position: "absolute", + zIndex: 1, + width: "100%", + }, + blurContainer: { + height: 33, + zIndex: -1, + borderRadius: 10, + overflow: "hidden", + backgroundColor: Palette.glass, + }, + blurView: { + width: "100%", + height: "100%", + paddingHorizontal: 10, + ...Style.containerCenter, + }, +}); diff --git a/src/screens/Profile/Reels.js b/src/screens/Profile/Reels.js new file mode 100644 index 0000000..8992bb7 --- /dev/null +++ b/src/screens/Profile/Reels.js @@ -0,0 +1,85 @@ +import { View, Text, Pressable, Image } from "react-native"; +import React, { useState } from "react"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { icons, img } from "../../assets"; +import Style, { gutters, size } from "../../styles/Style"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { goBack } from "../../navigation/NavigationService"; +import { SheetManager } from "react-native-actions-sheet"; + +const Reels = () => { + const { top } = useSafeAreaInsets(); + const [isFav, setIsFav] = useState(false); + + return ( + + + + + + + + + Mon Profile + + + SheetManager.show("DeletePlayback")}> + + + + + + + setIsFav(!isFav)}> + + + + + + + + ); +}; + +export default Reels; diff --git a/src/screens/Profile/Settings.js b/src/screens/Profile/Settings.js new file mode 100644 index 0000000..2535f69 --- /dev/null +++ b/src/screens/Profile/Settings.js @@ -0,0 +1,82 @@ +import { View, Text } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import BlurItemButton from "../../components/BlurItemButton"; +import BorderGradientButton from "../../components/BorderGradientButton"; +import { SheetManager } from "react-native-actions-sheet"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; + +const SETTINGS = [ + { + title: "Adresse mail", + action: () => { + navigate(Routes.ChangeEmailAddress); + }, + }, + { + title: "Modifier mon mot de passe", + action: () => { + navigate(Routes.ChangePassword); + }, + }, + { + title: "Notifications", + action: () => { + navigate(Routes.Notifications); + }, + }, + { + title: "Langue", + action: () => { + navigate(Routes.Language); + }, + }, + { + title: "Gérer mon abonnement", + action: () => {}, + }, +]; + +const Settings = () => { + return ( + + + + {SETTINGS.map((item, index) => ( + + ))} + + + + SheetManager.show("DeleteAccount")} + /> + + + + ); +}; + +export default Settings; diff --git a/src/screens/Profile/components/EditInput.js b/src/screens/Profile/components/EditInput.js new file mode 100644 index 0000000..5e63ebf --- /dev/null +++ b/src/screens/Profile/components/EditInput.js @@ -0,0 +1,72 @@ +import { View, Text, TextInput, Image, Pressable } from "react-native"; +import React, { useState } from "react"; +import { Palette, Style } from "../../../styles"; +import { FONT_FAMILY } from "../../../styles/Fonts"; +import { BlurView } from "expo-blur"; +import { icons } from "../../../assets"; + +const EditInput = ({ label = "", placeholder = "", type = "default" }) => { + const [showPassword, setShowPassword] = useState(false); + + return ( + + + + {label} + + + Modifier + + + + + {type === "password" && ( + setShowPassword(!showPassword)}> + + + )} + + + ); +}; + +export default EditInput; diff --git a/src/screens/Settings.js b/src/screens/Settings.js deleted file mode 100644 index ff10000..0000000 --- a/src/screens/Settings.js +++ /dev/null @@ -1,191 +0,0 @@ -import React, { useRef, useContext, useGlobal } from "reactn"; -import { Text, View } from "react-native"; - -import { WebViewContext } from "../providers/WebViewProvider"; -import { useUserData } from "../providers/UserDataProvider"; - -import Page from "../layouts/Page"; - -import { Routes } from "../navigation"; -import { responsiveHeight } from "../actions/responsiveSizes.js"; - -import ItemRowList from "../components/ItemRowList"; -import BottomSheetContainer from "../components/BottomSheetContainer.js"; -import IconSelector from "../components/IconSelector.js"; - -import useLayoutType from "../hooks/useLayoutType"; - -import { Fonts, Palette, Style, gutters } from "../styles"; -import { icons } from "../assets"; - -import { onStoreReview, openLinkInBrowser } from "../helpers"; -import { - agencyWhatsAppNumber, - calendlyUrl, - instagramUrl, - termsOfSalesUrl, -} from "../data"; -import IconContainer from "../components/IconContainer.js"; - -export default ({ navigation }) => { - const { isDesktop, isWeb, isNative } = useLayoutType(); - const { onSignOut } = useUserData(); - - const [currentProjectID] = useGlobal("currentProjectID"); - - const { setWebViewUrl } = useContext(WebViewContext); - - const appIconBottomSheetRef = useRef(null); - - const settingsList = [ - { - sectionTitle: "Projet", - icon: icons.tools, - optionList: [ - { - title: "Paramètres", - action: () => navigation.navigate(Routes.ProjectSettings), - }, - ], - condition: currentProjectID, - }, - { - sectionTitle: "Compte", - icon: icons.user, - optionList: [ - { - title: "Paramètres du compte", - action: () => navigation.navigate(Routes.AccountSettings), - }, - ], - }, - { - sectionTitle: "Support", - icon: icons.support, - optionList: [ - { - title: "Prendre rendez-vous", - action: () => setWebViewUrl(calendlyUrl), - }, - { - title: "Nous suivre sur Instagram", - action: () => setWebViewUrl(instagramUrl), - }, - { - title: "Nous contacter sur WhatsApp", - action: () => { - openLinkInBrowser({ - url: `http://api.whatsapp.com/send/?phone=${agencyWhatsAppNumber}&text&type=phone_number`, - }); - }, - }, - { - title: "Changer l'icône de l'application", - action: () => { - appIconBottomSheetRef.current?.expand(); - }, - condition: isNative, - }, - { - title: "Noter l'application", - action: () => { - onStoreReview(); - }, - condition: !isWeb, - }, - ], - }, - { - sectionTitle: "Légal", - icon: icons.law, - optionList: [ - { - title: "Conditions générales d'utilisation", - action: () => navigation.navigate(Routes.TermsOfUse), - }, - { - title: "Conditions générales de vente", - action: () => setWebViewUrl(termsOfSalesUrl), - }, - { - title: "Politique de confidentialité", - action: () => navigation.navigate(Routes.PrivacyPolicy), - }, - { - title: "Se déconnecter", - action: async () => { - await onSignOut(); - }, - textStyle: { color: Palette.red }, - addMarginTopFromPrevious: true, - }, - ], - }, - ] - .filter(({ condition = true }) => condition) - .filter( - ({ optionList }) => - optionList.filter(({ condition }) => !condition || condition).length > 0 - ); - - return ( - <> - - {settingsList.map( - ({ icon, sectionTitle = "", optionList = [] }, index) => ( - - - - - - {sectionTitle} - - - - {optionList - .filter(({ condition = true }) => condition) - .map((item, index) => ( - - ))} - - ) - )} - - - - appIconBottomSheetRef.current?.close()} /> - - - ); -}; diff --git a/src/styles/Palette.js b/src/styles/Palette.js index 3e882e2..3b980ca 100644 --- a/src/styles/Palette.js +++ b/src/styles/Palette.js @@ -19,7 +19,7 @@ const Palette = { firebaseYellow: "#FFCA28", transparentFirebaseYellow: "rgba(255, 202, 40, 0.1)", - red: "#E31A1A", + red: "#FF5558", transparentRed: "rgba(227, 26, 26, 0.1)", white: "#ffffff", diff --git a/src/utils/Sheet.js b/src/utils/Sheet.js new file mode 100644 index 0000000..3eb8c30 --- /dev/null +++ b/src/utils/Sheet.js @@ -0,0 +1,14 @@ +import { registerSheet } from "react-native-actions-sheet"; +import DeleteModal from "../components/modal/DeleteModal"; +import ProfileSettingsModal from "../components/modal/ProfileSettingsModal"; +import DeleteAccountModal from "../components/modal/DeleteAccountModal"; +import DeletePlaybackModal from "../components/modal/DeletePlaybackModal"; +import DeleteAudioModal from "../components/modal/DeleteAudioModal"; + +registerSheet("Delete", DeleteModal); +registerSheet("ProfileSettings", ProfileSettingsModal); +registerSheet("DeleteAccount", DeleteAccountModal); +registerSheet("DeletePlayback", DeletePlaybackModal); +registerSheet("DeleteAudio", DeleteAudioModal); + +export {}; diff --git a/yarn.lock b/yarn.lock index 43b6717..f039cbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2621,6 +2621,11 @@ acorn@^8.8.2: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0" integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA== +add@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235" + integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q== + aggregate-error@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a" @@ -7297,6 +7302,11 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-native-actions-sheet@^0.9.7: + version "0.9.7" + resolved "https://registry.yarnpkg.com/react-native-actions-sheet/-/react-native-actions-sheet-0.9.7.tgz#43ff2d9252f7af2da6dc051be5a5c375a844cdfb" + integrity sha512-rjUwxUr5dxbdSLDtLDUFAdSlFxpNSpJsbXLhHkBzEBMxEMPUhRT3zqbvKqsPj0JUkjwuRligxrhbIJZkg/6ZDw== + react-native-calendars@^1.1300.0: version "1.1307.0" resolved "https://registry.yarnpkg.com/react-native-calendars/-/react-native-calendars-1.1307.0.tgz#2cb8c5abd322037e9b3ef5605afa86f25347068f" @@ -9118,6 +9128,11 @@ yargs@^17.6.2, yargs@^17.7.2: y18n "^5.0.5" yargs-parser "^21.1.1" +yarn@^1.22.22: + version "1.22.22" + resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610" + integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg== + yauzl@^2.4.2: version "2.10.0" resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"