react_native/donutshop/app/screen/Payment.tsx

109 lines
4.1 KiB
TypeScript

import { View, Text, ScrollView, Pressable, StyleSheet, Image } from 'react-native'
import React, { useState } from 'react'
import { Ionicons } from '@expo/vector-icons';
import PaymentOption from "../components/PaymentOption";
import PaymentFooter from "../components/PaymentFooter";
import { LinearGradient } from 'expo-linear-gradient';
import { useStore } from '../store/store';
const PaymentOptionList = [
{
id: 1,
name: 'Debit/Credit ',
icon: require('../../assets/images/payment/debit_credit.png'),
iconStatus: true,
},
{
id: 2,
name: 'Apple Pay',
icon: require('../../assets/images/payment/apple_pay.png'),
iconStatus: false,
},
{
id: 3,
name: 'Google Pay',
icon: require('../../assets/images/payment/google_pay.png'),
iconStatus: false,
},
]
const Payment = ({navigation, route}: any) => {
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
const addToReceiptList = useStore(((state: any) => state.addToReceiptList));
const [paymentMethod, setPaymentMenthod] = useState('Credit card');
const [showApprove, setShowApprove] = useState(false);
const buttonPressHandler = () => {
setShowApprove(true);
addToReceiptList();
calculateCartPrice();
setTimeout(() => {
setShowApprove(false);
navigation.navigate('receipt')
}, 3000)
};
return (
<View style={{flex:1, backgroundColor: 'white'}}>
{showApprove ? (
<View style={{flex: 1, position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, zIndex: 1000, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../../assets/images/misc/check.png')} style={{width: 100, height: 100}} />
<Text style={{marginTop: 20, marginBottom: 10, fontSize: 26, color: '#88D66C'}}>Approved!</Text>
<Text style={{fontSize: 20, color: '#88D66C'}}>Thank you for your order!</Text>
</View>
) : (
<></>
)}
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
<View style={{marginTop: 20, paddingHorizontal: 20, paddingVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<Pressable onPress={() => {navigation.pop()}}>
<Ionicons name="chevron-back" size={24} color="gray" />
</Pressable>
<Text style={{fontSize: 28, fontWeight: 600}}>Payments</Text>
<View style={{padding: 10}}/>
</View>
<View style={{padding: 15, gap: 15}}>
<Pressable onPress={() => {setPaymentMenthod('Credit Card')}}>
<LinearGradient colors={['#B2B2B2', '#3C4048']} start={[0, 0.5]} end={[1, 0.5]} style={{padding: 10, borderRadius: 10}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View/>
<Image source={require('../../assets/images/payment/master.png')} style={{ width: 70, height: 70, resizeMode: "contain"}}/>
</View>
<View style={{marginTop: 20}}>
<Image source={require('../../assets/images/payment/chip.png')} style={{ width: 50, height: 50, resizeMode: "contain"}}/>
</View>
<View style={{marginTop: 50}}>
<Text style={{fontSize: 18, color: 'white'}}>Fakey McFaker</Text>
</View>
</LinearGradient>
</Pressable>
{PaymentOptionList.map((data: any) => (
<Pressable key={data.name} onPress={() => {setPaymentMenthod(data.name);}}>
<PaymentOption
paymentMethod={paymentMethod}
name={data.name}
icon={data.icon}
iconStatus={data.iconStatus}
/>
</Pressable>
))}
</View>
</ScrollView>
<PaymentFooter
buttonTitle={`Pay with ${paymentMethod}`}
price={{price: route.params.amount, currency: '$'}}
buttonPressHandler={buttonPressHandler}
/>
</View>
)
}
export default Payment
const styles = StyleSheet.create({})