crazycharge-app/component/chargingPage/paymentSummaryPageComponent.tsx

import { View, Text, ScrollView, StyleSheet, Pressable } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Path, Rect } from 'react-native-svg';
import NormalButton from '../global/normal_button';
import SlideInImage from '../global/slideInImage';
import { router } from 'expo-router';
import { RightArrowIconSvg, TickLogoSvg } from '../global/SVG';

const PaymentSummaryPageComponent = () => {
    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'left', 'right']}
        >
            <ScrollView
                className="flex-1 mx-[5%]"
                showsVerticalScrollIndicator={false}
            >
                <View style={{ marginTop: 25 }}>
                    <Text style={{ fontSize: 45 }}>付款概要</Text>
                    <View className="flex-column">
                        <View className="items-center pt-6 ">
                            <SlideInImage
                                source={require('../../assets/car.png')}
                            />
                        </View>

                        <Pressable onPress={() => console.log('優惠券')}>
                            <Text className="text-lg pb-4">優惠券</Text>
                            <View className="bg-[#e9f2f7] rounded-xl h-[9vh] items-center flex-row pl-6 justify-between">
                                <View className="flex-row ">
                                    <TickLogoSvg />
                                    <Text className="color-[#34667c] px-4 text-base">
                                        $20 迎新優惠券
                                    </Text>
                                </View>
                                <View className="pr-8">
                                    <RightArrowIconSvg />
                                </View>
                            </View>
                        </Pressable>
                    </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-3xl">HK$ 186</Text>
                        </View>
                        <View className="mt-4 ">
                            <NormalButton
                                title={
                                    <Text
                                        style={{
                                            color: 'white',
                                            fontSize: 16,
                                            fontWeight: '800'
                                        }}
                                    >
                                        前往付款
                                    </Text>
                                }
                                onPress={() =>
                                    router.push('/paymentFinishPage')
                                }
                                extendedStyle={{ padding: 24 }}
                            />
                        </View>
                        <View className="h-8" />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default PaymentSummaryPageComponent;

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