|
|
@@ -0,0 +1,117 @@
|
|
|
+import React, { FC, ReactNode } from 'react';
|
|
|
+import { Text, TouchableOpacity, View } from 'react-native';
|
|
|
+
|
|
|
+import { NavigationProp, useNavigation } from '@react-navigation/native';
|
|
|
+
|
|
|
+import { styles } from './styles';
|
|
|
+
|
|
|
+import { Header, PageWrapper } from '../../../../components';
|
|
|
+import { NAVIGATION_PAGES } from '../../../../types';
|
|
|
+import { Colors } from '../../../../theme';
|
|
|
+
|
|
|
+import UserPenIcon from '../../../../../assets/icons/user-pen.svg';
|
|
|
+import UserPlusIcon from '../../../../../assets/icons/user-plus.svg';
|
|
|
+import BellIcon from '../../../../../assets/icons/bell.svg';
|
|
|
+import MailIcon from '../../../../../assets/icons/mail.svg';
|
|
|
+import FAQIcon from '../../../../../assets/icons/faq.svg';
|
|
|
+import DocumentIcon from '../../../../../assets/icons/document.svg';
|
|
|
+import ShieldIcon from '../../../../../assets/icons/shield.svg';
|
|
|
+import ExitIcon from '../../../../../assets/icons/exit.svg';
|
|
|
+import UserXMark from '../../../../../assets/icons/user-xmark.svg';
|
|
|
+
|
|
|
+import ArrowRightIcon from '../../../../../assets/icons/right-arrow.svg';
|
|
|
+
|
|
|
+type ButtonType = {
|
|
|
+ label: string;
|
|
|
+ icon: ReactNode;
|
|
|
+ red?: boolean;
|
|
|
+ buttonFn?: (navigationHook: NavigationProp<ReactNavigation.RootParamList>) => void;
|
|
|
+};
|
|
|
+
|
|
|
+const buttons: ButtonType[] = [
|
|
|
+ {
|
|
|
+ label: 'Edit Profile',
|
|
|
+ icon: <UserPenIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
|
|
|
+ buttonFn: (navigation) => {
|
|
|
+ navigation.navigate(NAVIGATION_PAGES.EDIT_PERSONAL_INFO);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Invite a Friend',
|
|
|
+ icon: <UserPlusIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Notification',
|
|
|
+ icon: <BellIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Contact Us',
|
|
|
+ icon: <MailIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'FAQs',
|
|
|
+ icon: <FAQIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Terms & Conditions',
|
|
|
+ icon: <DocumentIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Privacy Notice',
|
|
|
+ icon: <ShieldIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Logout',
|
|
|
+ icon: <ExitIcon fill={Colors.RED} width={20} height={20} />,
|
|
|
+ red: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Delete account',
|
|
|
+ icon: <UserXMark fill={Colors.RED} width={20} height={20} />,
|
|
|
+ red: true
|
|
|
+ }
|
|
|
+];
|
|
|
+
|
|
|
+const Settings = () => {
|
|
|
+ return (
|
|
|
+ <PageWrapper>
|
|
|
+ <Header label={'Settings'} />
|
|
|
+ {buttons.map((button) => (
|
|
|
+ <SettingsButton
|
|
|
+ label={button.label}
|
|
|
+ icon={button.icon}
|
|
|
+ red={button.red}
|
|
|
+ buttonFn={button.buttonFn}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </PageWrapper>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+type ButtonProps = {
|
|
|
+ label: string;
|
|
|
+ icon: ReactNode;
|
|
|
+ buttonFn?: (navigate: NavigationProp<ReactNavigation.RootParamList>) => void;
|
|
|
+ red?: boolean;
|
|
|
+};
|
|
|
+
|
|
|
+const SettingsButton: FC<ButtonProps> = ({ label, icon, buttonFn, red }) => {
|
|
|
+ const navigation = useNavigation();
|
|
|
+
|
|
|
+ return (
|
|
|
+ <TouchableOpacity
|
|
|
+ style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
|
|
|
+ onPress={() => (buttonFn ? buttonFn(navigation) : null)}
|
|
|
+ >
|
|
|
+ <View style={styles.alignStyle}>
|
|
|
+ {icon}
|
|
|
+ <Text style={[styles.buttonLabel, red ? { color: Colors.RED } : null]}>{label}</Text>
|
|
|
+ </View>
|
|
|
+ <View>
|
|
|
+ <ArrowRightIcon fill={red ? Colors.RED : Colors.LIGHT_GRAY} width={20} height={20} />
|
|
|
+ </View>
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default Settings;
|
Oleksandr Honcharov
