crazycharge-app/component/paymentSummaryPage.tsx

import {
    View,
    Text,
    ScrollView,
    StyleSheet,
    Pressable,
    Image,
    Dimensions
} from 'react-native';
import React from 'react';
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 {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp
} from 'react-native-responsive-screen';

const TickLogoSvg = () => (
    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <Rect width="24" height="24" rx="12" fill="#02677D" />
        <Path
            d="M9.5501 18L3.8501 12.3L5.2751 10.875L9.5501 15.15L18.7251 5.97498L20.1501 7.39998L9.5501 18Z"
            fill="#CEE6F0"
        />
    </Svg>
);

const RightArrowSvg = () => (
    <Svg width="7" height="12" viewBox="0 0 7 12" fill="none">
        <Path
            d="M6.70762 5.99998L1.05383 11.6538L-4.60642e-08 10.6L4.6 5.99998L-4.48209e-07 1.39998L1.05382 0.346158L6.70762 5.99998Z"
            fill="#02677D"
        />
    </Svg>
);

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const PaymentSummaryPage = () => {
    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/car1.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">
                                    <RightArrowSvg />
                                </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={() => console.log('前往付款')}
                                extendedStyle={{ padding: 24 }}
                            />
                        </View>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default PaymentSummaryPage;

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