109 lines
4.1 KiB
TypeScript
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({})
|
|
|
|
|