Hanoicomputer_App/screens/AccountHome.tsx

import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { TextInput } from 'react-native-gesture-handler';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';
import { ArticleItem } from '../components/article/ArticleItem';
import { ShowProductItemSave } from '../components/product/productItem';

export default function AccountHome() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.brecrumb}>
                    <Text style={styles.brecrumbText}>Trang chủ</Text>
                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
                    <Text style={styles.brecrumbTextLast}>Tài khoản của bạn</Text>
                </View>

                <View style={styles.accountBox}>
                    <View style={styles.accountBoxHeader}>
                        <View style={styles.accountBoxHeaderIcon}>
                            <FontAwesome style={styles.accountBoxHeaderIconFont} name="user" />
                        </View>
                        <View style={styles.accountBoxHeaderInfo}>
                            <Text style={styles.accountBoxHeaderInfoText}>Tài khoản</Text>
                            <Text style={styles.accountBoxHeaderInfoName}>Hurasoft test</Text>
                        </View>
                    </View>

                    <MenuAccount />

                    <View style={styles.accountBoxContent}>
                        <Text style={styles.accountBoxTextHome}>Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục.</Text>

                        <CustommerInfo />

                        <CustommerInfoChange />

                        <ProductSave />

                        <ProductFavorite />
                    </View>
                </View>
                <PolicyFooter />

                <Social />

                <ShowroomList />

                <FooterInfo />
            </ScrollView>
        </SafeAreaView>
    )
}

const MenuAccount = () => {
    const [showMenuAccount, setShowMenuAccount] = useState(true)
    return (
        <View style={styles.accountBoxSelec}>
            <TouchableOpacity style={styles.accountBoxSelecBox} onPress={() => setShowMenuAccount(!showMenuAccount)}>
                <Text style={styles.accountBoxSelecBoxText}>Xem thông tin</Text>
                <FontAwesome style={styles.accountBoxSelecBoxIcon} name="angle-down" />
            </TouchableOpacity>
            <View style={showMenuAccount ? styles.accountBoxSelecList : [styles.accountBoxSelecList, styles.active]}>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="user" />
                    <Text style={styles.accountNameTabText}>Thông tin tài khoản</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="list" />
                    <Text style={styles.accountNameTabText}>Quản lý đơn hàng</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="eye" />
                    <Text style={styles.accountNameTabText}>Sản phẩm đã xem</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="archive" />
                    <Text style={styles.accountNameTabText}>Sản phẩm đã lưu</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="comment" />
                    <Text style={styles.accountNameTabText}>Sản phẩm bạn đã đánh giá</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="heart" />
                    <Text style={styles.accountNameTabText}>Sản phẩm bạn đã thích</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="lock" />
                    <Text style={styles.accountNameTabText}>Thay đổi mật khẩu</Text>
                </Pressable>
                <Pressable style={styles.accountNameTab}>
                    <FontAwesome style={styles.accountNameTabIcon} name="power-off" />
                    <Text style={styles.accountNameTabText}>Logout</Text>
                </Pressable>
            </View>
        </View>
    )
}

const CustommerInfo = () => {
    return (
        <View style={styles.custommerInfo}>
            <Text style={styles.custommerInfoItemHeader}>Thông tin tài khoản</Text>
            <Text style={styles.custommerInfoItem}>Họ tên: Hurasoft Test</Text>
            <Text style={styles.custommerInfoItem}>Giới tính: Nữ</Text>
            <Text style={styles.custommerInfoItem}>Email: test@mail.com</Text>
            <Text style={styles.custommerInfoItem}>Địa chỉ: 30 Nguyên Hồng - Láng Hạ - Đống Đa - HN</Text>
            <Text style={styles.custommerInfoItem}>Tỉnh/Thành phố: Hà Nội</Text>
            <Text style={styles.custommerInfoItem}>Số điện thoại: 0912345678</Text>
            <TouchableOpacity>
                <Text style={styles.custommerInfoButtonText}>Chỉnh sửa thông tin cá nhân</Text>
            </TouchableOpacity>
        </View>
    )
}

const CustommerInfoChange = () => {
    const [selectedProvince, setSelectedProvince] = useState();
    const [checked, setChecked] = React.useState('male');
    return (
        <View style={styles.boxCustommerInfoChange}>
            <Text style={styles.boxCustommerInfoChangeTitle}>Cập nhật thông tin cá nhân</Text>
            <View style={styles.boxCustommerInfoChangeList}>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Họ tên</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Giới tính</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <View style={styles.registerItemSex}>
                            <View style={styles.registerItemSexItem}>
                                <Text style={styles.registerItemSexText}>Nam</Text>
                                <View style={styles.registerItemSexRadio}>
                                    <RadioButton color={'#243a76'} value={'male'} status={checked === 'male' ? 'checked' : 'unchecked'} onPress={() => setChecked('male')} />
                                </View>
                            </View>
                            <View style={styles.registerItemSexItem}>
                                <Text style={styles.registerItemSexText}>Nữ</Text>
                                <View style={styles.registerItemSexRadio}>
                                    <RadioButton color={'#243a76'} value={'female'} status={checked === 'female' ? 'checked' : 'unchecked'} onPress={() => setChecked('female')} />
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Địa chỉ email</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Địa chỉ nhà</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Tỉnh/TP</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <Picker
                            style={styles.picker}
                            itemStyle={styles.onePickerItem}
                            selectedValue={selectedProvince}
                            onValueChange={(itemValue, itemIndex) =>
                                setSelectedProvince(itemValue)
                            }
                        >
                            <Picker.Item label="Hà Nội" value="1" />
                            <Picker.Item label="Đà Nẵng" value="2" />
                            <Picker.Item label="Hải Phòng" value="3" />
                            <Picker.Item label="TP Hồ Chí Minh" value="4" />
                        </Picker>
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Điện thoại cố định</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <Text style={styles.custommerInfoChangeItemText}>Điện thoại  di động</Text>
                    <View style={styles.custommerInfoChangeItemContent}>
                        <TextInput style={styles.custommerInfoChangeItemInput} />
                    </View>
                </View>
                <View style={styles.custommerInfoChangeItem}>
                    <TouchableOpacity style={styles.boxCustommerInfoChangeSubmit}>
                        <Text style={styles.boxCustommerInfoChangeSubmitText}>Thay đổi</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const productData = [
    {
        id: 1,
        productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
        productSKU: 'TESTSKU',
        productImage: {
            small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
        },
        price: 30000000,
        marketPrice: 50000000,
        quantity: 1,
        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
    },
    {
        id: 2,
        productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
        productSKU: 'TESTSKU',
        productImage: {
            small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
        },
        price: 25000000,
        marketPrice: 50000000,
        quantity: 0,
        summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen'
    },
]

const ProductSave = () => {
    const itemProductStyle = {
        width: '100%',
        borderBottomWidth: 1,
        borderBottomColor: '#e8e8e8',
        position: 'relative',
    }
    return (
        <View style={styles.boxProductSave}>
            <Text style={styles.boxProductSaveTitle}>Sản phẩm mua sau</Text>
            <View style={styles.listProductSave}>
                {
                    productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
                    />)
                }
            </View>
        </View>
    )
}

const ProductFavorite = () => {
    const itemProductStyle = {
        width: '100%',
        borderBottomWidth: 1,
        borderBottomColor: '#e8e8e8',
        position: 'relative',
    }
    return (
        <View style={styles.boxProductSave}>
            <Text style={styles.boxProductSaveTitle}>Sản phẩm Bạn đã thích</Text>
            <View style={styles.listProductSave}>
                {
                    productData.map(item => <ShowProductItemSave key={item.id} id={item.id} productName={item.productName}
                        productSKU={item.productSKU} summary={item.summary} productImage={item.productImage} price={item.price} marketPrice={item.marketPrice} quantity={item.quantity} privateStyle={itemProductStyle}
                    />)
                }
            </View>
        </View>
    )
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
const halfWinWidth = winWidth / 2;
const ratio = winWidthP10 / 850; //541 is actual image width

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    brecrumb: {
        display: 'flex',
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
        height: 18,
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 10,
    },
    brecrumbText: {
        fontSize: 13,
        color: '#222',
    },
    brecrumbTextLast: {
        fontSize: 13,
        color: '#b7b7b7',
    },
    brecrumbIcon: {
        fontSize: 13,
        color: '#222',
        marginLeft: 6,
        marginRight: 6
    },
    accountBox: {
        marginBottom: 20,
        width: winWidth,
        paddingHorizontal: 10,
    },
    accountBoxHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 20,
    },
    accountBoxHeaderIcon: {
        width: 60,
        height: 60,
        borderRadius: 30,
        overflow: 'hidden',
        backgroundColor: '#008445',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 20,
    },
    accountBoxHeaderIconFont: {
        fontSize: 40,
        color: '#fff',
        lineHeight: 40,
    },
    accountBoxHeaderInfo: {
        width: winWidthP10 - 80,
    },
    accountBoxHeaderInfoText: {
        marginBottom: 10,
    },
    accountBoxHeaderInfoName: {
        fontSize: 16,
        textTransform: 'uppercase',
        fontWeight: 'bold'
    },
    accountBoxSelec: {
        marginBottom: 20,
    },
    accountBoxSelecBox: {
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#999',
        paddingHorizontal: 10,
        height: 40,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    accountBoxSelecBoxText: {
        textTransform: 'uppercase',
        fontWeight: 'bold',
    },
    accountBoxSelecBoxIcon: {},
    accountBoxSelecList: {
        width: '100%',
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#999',
        display: 'none',
    },
    active: {
        display: 'flex',
    },
    accountNameTab: {
        padding: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    accountNameTabIcon: {
        fontSize: 24,
        color: '#7b7b7b',
        marginRight: 8,
    },
    accountNameTabText: {},
    accountBoxContent: {},
    accountBoxTextHome: {},
    custommerInfo: {
    },
    custommerInfoItemHeader: {
        marginBottom: 10,
        fontWeight: 'bold',
    },
    custommerInfoItem: {
        marginBottom: 10,
    },
    custommerInfoButtonText: {
        color: '#ed1b24'
    },
    boxCustommerInfoChange: {},
    boxCustommerInfoChangeList: {
        padding: 10,
        borderColor: '#e1e1e1',
        borderWidth: 1,
        borderRadius: 5,
    },
    boxCustommerInfoChangeTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    custommerInfoChangeItem: {
        marginBottom: 15,
        flexDirection: 'row',
        alignItems: 'center'
    },
    custommerInfoChangeItemText: {
        width: 148,
    },
    custommerInfoChangeItemContent: {
        width: winWidthP10 - 170,
    },
    custommerInfoChangeItemInput: {
        width: '100%',
        height: 36,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        paddingHorizontal: 10,
    },
    registerItemSex: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    registerItemSexItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 20,
    },
    registerItemSexText: {
        marginRight: 5,
    },
    registerItemSexRadio: {
        width: 36,
        height: 36,
        borderColor: '#333',
        borderWidth: 1,
        borderRadius: 18,
    },
    picker: {
        height: 46,
        width: '100%',
    },
    onePickerItem: {
        height: 46,
        color: '#222',
        fontSize: 14,
        textAlign: 'center',
        width: '100%',
    },
    boxCustommerInfoChangeSubmit: {
        width: 150,
        height: 36,
        backgroundColor: 'red',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
    },
    boxCustommerInfoChangeSubmitText: {
        color: '#fff'
    },
    boxProductSave: {},
    boxProductSaveTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 15,
    },
    listProductSave: {},
})