crazycharge-app/component/chargingPage/paymentFinishPageComponent.tsx

import {
    View,
    Text,
    ScrollView,
    StyleSheet,
    Pressable
} from 'react-native';
import React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import SlideInImage from '../global/slideInImage';
import { router } from 'expo-router';
import { BatteryIconSvg, BatteryLogoSvg, DownArrowSvg, LightingLogoSvg, TemperatureIconSvg, TickLogoSvg, TimeClockLogoSvg, UpArrowSvg } from '../global/SVG';


const PaymentFinishPageComponent = () => {
    const [isMoreInfoButtonPressed, setIsMoreInfoButtonPressed] =
        React.useState<boolean>(false);

    return (
        <SafeAreaView className="flex-1 bg-white">
            <ScrollView
                className="flex-1 mx-[5%]"
                showsVerticalScrollIndicator={false}
            >
                <View style={{ marginTop: 25, flex: 1 }}>
                    <View className="flex-row items-center">
                        <TickLogoSvg />
                        <Text className="text-3xl pl-2">成功付款</Text>
                    </View>
                    <View className="items-center pt-4 justify-center">
                        <SlideInImage source={require('../../assets/car.png')} />

                        <Text className="text-2xl font-light pb-4">
                            TESLA Model 3
                        </Text>
                    </View>

                    <View
                        style={{ borderWidth: 1 }}
                        className="border-[#EEEEEE] rounded-2xl"
                    >
                        <View className="mx-[5%] flex-column p-4 ">
                            <View className="flex-row justify-evenly gap-6">
                                <View className="flex-row items-center space-x-4">
                                    <BatteryLogoSvg />
                                    <View className="flex-column ">
                                        <Text
                                            className="text-sm"
                                            style={styles.grayColor}
                                        >
                                            已充電
                                        </Text>
                                        <Text
                                            style={styles.greenColor}
                                            className="text-4xl font-light"
                                        >
                                            95%
                                        </Text>
                                    </View>
                                </View>
                                <View className="flex-row items-center space-x-4">
                                    <TimeClockLogoSvg />

                                    <View className="flex-column">
                                        <Text
                                            className="text-sm"
                                            style={styles.grayColor}
                                        >
                                            充電歷時
                                        </Text>
                                        <View className="flex-row items-end">
                                            <Text
                                                style={styles.greenColor}
                                                className="text-4xl font-light"
                                            >
                                                39
                                            </Text>
                                            <Text
                                                style={styles.greenColor}
                                                className="text-sm font-light"
                                            >
                                                mins
                                            </Text>
                                        </View>
                                    </View>
                                </View>
                            </View>
                            <View className="h-0.5 w-full my-4 bg-[#EEEEEE]" />
                            {isMoreInfoButtonPressed ? (
                                <>
                                    <View className="h-[100px] flex-row items-center">
                                        <View className="flex-1 flex-column items-center space-y-2">
                                            <LightingLogoSvg />
                                            <Text
                                                style={styles.grayColor}
                                                className="text-base"
                                            >
                                                充電功率
                                            </Text>
                                            <Text
                                                style={styles.greenColor}
                                                className="font-bold text-base"
                                            >
                                                22.1kW
                                            </Text>
                                        </View>
                                        <View className="flex-1 flex-column items-center space-y-2">
                                            <BatteryIconSvg />
                                            <Text
                                                style={styles.grayColor}
                                                className="text-base"
                                            >
                                                實際功率
                                            </Text>
                                            <Text
                                                style={styles.greenColor}
                                                className="font-bold text-base"
                                            >
                                                30.0kW
                                            </Text>
                                        </View>
                                        <View className="flex-1 flex-column items-center space-y-2">
                                            <TemperatureIconSvg />
                                            <Text
                                                style={styles.grayColor}
                                                className="text-base"
                                            >
                                                溫度
                                            </Text>
                                            <Text
                                                style={styles.greenColor}
                                                className="font-bold text-base"
                                            >
                                                36°c
                                            </Text>
                                        </View>
                                    </View>
                                    <Pressable
                                        onPress={() => {
                                            setIsMoreInfoButtonPressed(
                                                !isMoreInfoButtonPressed
                                            );
                                        }}
                                        style={{ padding: 2 }}
                                    >
                                        <View className="flex-row pt-4 items-center justify-center">
                                            <Text className="text-sm">
                                                收起{' '}
                                            </Text>
                                            <UpArrowSvg />
                                        </View>
                                    </Pressable>
                                </>
                            ) : (
                                <Pressable
                                    onPress={() => {
                                        setIsMoreInfoButtonPressed(
                                            !isMoreInfoButtonPressed
                                        );
                                    }}
                                    style={{ padding: 2 }}
                                >
                                    <View className="flex-row items-center justify-center">
                                        <Text className="text-sm">
                                            更多資訊{' '}
                                        </Text>
                                        <DownArrowSvg />
                                    </View>
                                </Pressable>
                            )}
                        </View>
                    </View>

                    <View
                        className="my-4"
                        style={{
                            borderWidth: 1,
                            borderColor: '#EEEEEE',
                            borderRadius: 12
                        }}
                    >
                        <View className="space-y-3   py-4 mx-[5%]">
                            <View className="flex-1 flex-row items-center ">
                                <View className="flex-1 flex-column">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs "
                                    >
                                        時間日期
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-4xl  pt-2 "
                                    >
                                        3月14 · 16:15
                                    </Text>
                                </View>
                            </View>
                            <View className="flex-1 flex-column justify-center">
                                <Text
                                    style={styles.grayColor}
                                    className="text-xs"
                                >
                                    充電地點
                                </Text>
                                <Text
                                    style={styles.greenColor}
                                    className="text-xl"
                                >
                                    上環街市充電站
                                </Text>
                                <Text
                                    style={styles.grayColor}
                                    className="text-base"
                                >
                                    香港上環皇后大道中345號
                                </Text>
                            </View>
                            <View className="flex-1 flex-row items-center ">
                                <View className="flex-column flex-1">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs"
                                    >
                                        方案
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-lg"
                                    >
                                        按每度電結算
                                    </Text>
                                    <Text
                                        style={styles.grayColor}
                                        className="text-sm"
                                    >
                                        度數: 50kWh
                                    </Text>
                                </View>
                                <View className="flex-column flex-1">
                                    <Text
                                        style={styles.grayColor}
                                        className="text-xs"
                                    >
                                        車輛
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-lg"
                                    >
                                        TESLA Model 3
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </View>

                    <View>
                        <Text className="text-xl py-4">收費概要</Text>
                        <View className="flex-row justify-between">
                            <Text className="text-base">充電費用</Text>
                            <Text className="text-base">HK$ 175</Text>
                        </View>
                        <Text style={styles.grayColor} className="text-base">
                            按每度電結算: 50 kWh
                        </Text>
                        <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                        <View className="flex-row justify-between">
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                小計
                            </Text>
                            <Text className="text-base">HK$ 175</Text>
                        </View>
                        <View className="flex-row justify-between">
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                其他費用
                            </Text>
                            <Text className="text-base">HK$ 11</Text>
                        </View>
                        <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                        <View className="flex-row justify-between ">
                            <Text className="text-xl">總計</Text>
                            <Text className="text-xl">HK$ 186</Text>
                        </View>
                        <View className="mt-4"></View>
                    </View>

                    <View className="w-full h-1 bg-[#DBE4E8]" />
                    <View className="space-y-4 my-4">
                        <Text className="text-xl ">付款資訊</Text>
                        <View>
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                訂單編號
                            </Text>
                            <Text className="text-base">CXZ-16336958</Text>
                        </View>
                        <View>
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                付款方式
                            </Text>
                            <Text className="text-base">預付銀包</Text>
                        </View>
                        <View>
                            <Text
                                className="text-base"
                                style={styles.grayColor}
                            >
                                電郵地址
                            </Text>
                            <Text className="text-base">
                                mikechan123@gmail.com
                            </Text>
                        </View>
                    </View>

                    <NormalButton
                        title={
                            <Text style={{ color: '#fff', fontSize: 18 }}>
                                返回主頁
                            </Text>
                        }
                        onPress={() => {
                            router.replace('(auth)/(tabs)/(home)/mainPage');
                        }}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default PaymentFinishPageComponent;

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    }
});