created recepit page

donutshop/app/components/OrderReceiptCard.tsx

@@ -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({})

donutshop/app/components/OrderReceiptItem.tsx

@@ -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({})

donutshop/app/screen/OrderReceipt.tsx

@@ -1,10 +1,46 @@
-import { View, Text } from 'react-native'
+import { View, Text, ScrollView, Image } from 'react-native';
-import React from 'react'
+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 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>
-      <Text>OrderHistory</Text>
+              <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>
   )
 }

donutshop/app/screen/Payment.tsx

@@ -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>
   )