created recepit page
This commit is contained in:
parent
6d485b374f
commit
a179edeee5
4 changed files with 180 additions and 6 deletions
60
donutshop/app/components/OrderReceiptCard.tsx
Normal file
60
donutshop/app/components/OrderReceiptCard.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
||||
import React from 'react';
|
||||
import OrderReceiptItem from '../components/OrderReceiptItem';
|
||||
|
||||
|
||||
interface OrderHistoryCardProps {
|
||||
navigationHandler: any;
|
||||
CartList: any;
|
||||
CartListPrice: string;
|
||||
OrderDate: string;
|
||||
}
|
||||
|
||||
const OrderReceiptCard: React.FC<OrderHistoryCardProps> = ({
|
||||
navigationHandler,
|
||||
CartList,
|
||||
CartListPrice,
|
||||
OrderDate,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<View style={{gap: 10, borderColor: 'gray', borderWidth:1, marginBottom: 10}}>
|
||||
<View style={{flexDirection: 'row', justifyContent: 'space-between', gap: 20, alignItems: 'center', padding: 10}}>
|
||||
<View>
|
||||
<Text>Order Time</Text>
|
||||
<Text>{OrderDate}</Text>
|
||||
</View>
|
||||
<View style={{alignItems: 'flex-end'}}>
|
||||
<Text>Total Amount</Text>
|
||||
<Text>$ {CartListPrice}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={{gap: 10}}>
|
||||
<View style={{borderColor: 'black', borderWidth: 0.5, borderStyle: 'dashed'}}/>
|
||||
{CartList.map((data: any, index: any) => (
|
||||
<Pressable key={index.toString() + data.id} onPress={() => {
|
||||
navigationHandler({
|
||||
index: data.index,
|
||||
id: data.id,
|
||||
type: data.type,
|
||||
});
|
||||
}}>
|
||||
<OrderReceiptItem
|
||||
type={data.type}
|
||||
name={data.name}
|
||||
donutname={data.donutname}
|
||||
image_item={data.image_item}
|
||||
prices={data.prices}
|
||||
ItemPrice={data.ItemPrice}
|
||||
/>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderReceiptCard
|
||||
|
||||
const styles = StyleSheet.create({})
|
||||
53
donutshop/app/components/OrderReceiptItem.tsx
Normal file
53
donutshop/app/components/OrderReceiptItem.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { Image, ImageProps, StyleSheet, Text, View } from 'react-native'
|
||||
import React from 'react'
|
||||
|
||||
|
||||
interface OrderReceiptItemProps{
|
||||
type: string;
|
||||
name: string;
|
||||
donutname: string;
|
||||
image_item: ImageProps;
|
||||
prices: any;
|
||||
ItemPrice: string;
|
||||
}
|
||||
|
||||
|
||||
const OrderReceiptItem: React.FC<OrderReceiptItemProps> = ({
|
||||
type,
|
||||
name,
|
||||
donutname,
|
||||
image_item,
|
||||
prices,
|
||||
ItemPrice,
|
||||
}) => {
|
||||
return (
|
||||
<View style={{paddingHorizontal: 10, marginBottom: 10}}>
|
||||
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
|
||||
<View style={{flexDirection: 'row', gap: 10, alignItems: 'center'}}>
|
||||
<Image source={image_item} style={{width: 50, height: 50}} />
|
||||
{prices.map((item: any, index: any) => (
|
||||
<View key={index.toString()}>
|
||||
<Text style={{width: 200}}>{name || donutname} <Text style={{}}>{item.size}</Text></Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View>
|
||||
<Text>${ItemPrice}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{prices.map((data: any, index: any) => (
|
||||
<View key={index.toString()} style={{flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', marginTop: 10}}>
|
||||
<View style={{flex:1, flexDirection: 'row', gap: 10}}>
|
||||
<Text>${data.price}</Text>
|
||||
<Text>X {data.quantity}</Text>
|
||||
</View>
|
||||
<Text>${(data.quantity * data.price).toFixed(2).toString()}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderReceiptItem
|
||||
|
||||
const styles = StyleSheet.create({})
|
||||
|
|
@ -1,10 +1,46 @@
|
|||
import { View, Text } from 'react-native'
|
||||
import React from 'react'
|
||||
import { View, Text, ScrollView, Image } from 'react-native';
|
||||
import React from 'react';
|
||||
import { useStore } from '../store/store';
|
||||
import OrderReceiptCard from '../components/OrderReceiptCard';
|
||||
|
||||
|
||||
|
||||
|
||||
const OrderReceipt = ({navigation}: any) => {
|
||||
const ReceiptList = useStore((state: any) => state.ReceiptList);
|
||||
const navigationHandler = ({index, id, type}: any) => {
|
||||
navigation.push('detail', {
|
||||
index,
|
||||
id,
|
||||
type,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const OrderReceipt = () => {
|
||||
return (
|
||||
<View>
|
||||
<Text>OrderHistory</Text>
|
||||
<View style={{backgroundColor: 'white', flex: 1}}>
|
||||
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1, marginTop: 20, paddingHorizontal: 20, paddingVertical: 10}}>
|
||||
<View style={{flex: 1, justifyContent: 'space-between'}}>
|
||||
<Text style={{fontSize: 30, fontWeight: 500}}>Receipt</Text>
|
||||
{ReceiptList.length == 0 ? (
|
||||
<View>
|
||||
<Image source={require('../../assets/images/misc/receipt.png')} style={{ width: 200, height: 200, resizeMode: "contain"}} />
|
||||
</View>
|
||||
):(
|
||||
<View style={{marginTop: 20}}>
|
||||
{ReceiptList.map((data: any, index: any) => (
|
||||
<OrderReceiptCard
|
||||
key={index.toString()}
|
||||
navigationHandler={navigationHandler}
|
||||
CartList={data.CartList}
|
||||
CartListPrice={data.CartListPrice}
|
||||
OrderDate={data.OrderDate}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ 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 = [
|
||||
|
|
@ -29,10 +30,34 @@ const PaymentOptionList = [
|
|||
|
||||
|
||||
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()}}>
|
||||
|
|
@ -71,7 +96,7 @@ const Payment = ({navigation, route}: any) => {
|
|||
<PaymentFooter
|
||||
buttonTitle={`Pay with ${paymentMethod}`}
|
||||
price={{price: route.params.amount, currency: '$'}}
|
||||
buttonPressHandler={() => {}}
|
||||
buttonPressHandler={buttonPressHandler}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue