updated index page

donutshop/app/components/HomeCardItem.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, Text, View, Pressable, Image} from 'react-native'
+import React from 'react'
+import { useNavigation } from '@react-navigation/native';
+
+
+
+const HomeCardItem = () => {
+  const navigation = useNavigation();
+
+  return (
+    <View style={{padding: 5}}>
+      <View style={{shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
+        <Pressable>
+          <View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
+            <Image source={require('../../assets/images/menu/coming_soon.png')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
+            <View style={{padding: 10}}>
+              <Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Pokémon Donuts<Text style={{fontSize: 12, color: '#DA7297'}}>(Coming soon)</Text></Text>
+              <Text>The limited-edition Pokémon Donuts is coming soon!</Text>
+            </View>
+          </View>
+        </Pressable>
+      </View>
+
+      <View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
+        <Pressable onPress={() => navigation.navigate('menu')}>
+          <View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
+            <Image source={require('../../assets/images/menu/new_special.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
+            <View style={{padding: 10}}>
+              <Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Mothers Day Box for your mama</Text>
+              <Text>Lets show our appreciation for our moms by treating them with the special Mothers Day Box!</Text>
+              <Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
+                <Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Pressable>
+      </View>
+
+      <View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
+        <Pressable onPress={() => navigation.navigate('menu')}>
+          <View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
+            <Image source={require('../../assets/images/menu/new_drink.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
+            <View style={{padding: 10}}>
+              <Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Colorful Smoothies are here</Text>
+              <Text>The colors are not due to artificial colorings, but rather from natural fruits and vegetables</Text>
+              <Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
+                <Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Pressable>
+      </View>
+    </View>
+  )
+}
+
+export default HomeCardItem
+
+const styles = StyleSheet.create({})

donutshop/app/components/OrderReceiptCard.tsx

@@ -18,16 +18,9 @@ const OrderReceiptCard: React.FC<OrderHistoryCardProps> = ({
 }) => {
 
   return (
-    <View style={{gap: 10, borderColor: 'gray', borderWidth:1, marginBottom: 10}}>
+    <View style={{borderColor: 'gray', borderWidth:1, marginBottom: 10}}>
-      <View style={{flexDirection: 'row', justifyContent: 'space-between', gap: 20, alignItems: 'center', padding: 10}}>
+      <View style={{justifyContent: 'flex-end', padding: 10, backgroundColor: '#EEEEEE'}}>
-        <View>
+        <Text style={{fontWeight: 600}}>{OrderDate}</Text>
-          <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}}>
@@ -51,6 +44,11 @@ const OrderReceiptCard: React.FC<OrderHistoryCardProps> = ({
           </Pressable>
         ))}
       </View>
+      <View style={{borderColor: 'black', borderWidth: 0.5, borderStyle: 'dashed'}}/>
+      <View style={{flexDirection: 'row', justifyContent: 'space-between', gap: 20, alignItems: 'center', padding: 10}}>
+          <Text style={{fontWeight: 600}}>Total Amount</Text>
+          <Text style={{fontWeight: 600}}>$ {CartListPrice}</Text>
+        </View>
     </View>
   )
 }

donutshop/app/components/OrderReceiptItem.tsx

@@ -27,7 +27,7 @@ const OrderReceiptItem: React.FC<OrderReceiptItemProps> = ({
           <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>
+                <Text style={{width: 200}}>{name || donutname} <Text style={{fontWeight: 600}}>{item.size}</Text></Text>
             </View>
           ))}
         </View>

donutshop/app/screen/Detail.tsx

@@ -10,7 +10,7 @@ import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 const Detail = ({navigation, route}: any) => {
   const ItemOfIndex = useStore((state: any) => 
-    route.params.type == 'Donut' ? state.AllDonutList2 : state.AllDrinkList2,
+    route.params.type == 'Donut' ? state.AllDonutMenu : state.AllDrinkMenu,
   )[route.params.index];
   
   const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);

donutshop/app/screen/DetailDrink.tsx

@@ -9,7 +9,7 @@ import PaymentFooter from "../components/PaymentFooter";
 
 const DetailDrink = ({navigation, route}: any) => {
     const ItemOfIndex = useStore((state: any) =>
-        route.params.type == 'Donut' ? state.AllDonutList2 : state.AllDrinkList2,
+        route.params.type == 'Donut' ? state.AllDonutMenu : state.AllDrinkMenu,
     )[route.params.index];
 
     const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);

donutshop/app/screen/Home.tsx

@@ -1,6 +1,7 @@
-import { View, Text, ScrollView, StyleSheet } from 'react-native'
+import { View, Text, ScrollView, StyleSheet, Image, Pressable } from 'react-native'
 import React from 'react'
 import HomeHeader from '../components/HomeHeader'
+import HomeCardItem from '../components/HomeCardItem'
 import { StatusBar } from 'expo-status-bar';
 
 const Home = () => {
@@ -10,6 +11,7 @@ const Home = () => {
       <StatusBar style="dark"/>
       <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.ScrollViewFlex}>
         <HomeHeader />
+        <HomeCardItem />
       </ScrollView>
     </View>
   )

donutshop/app/screen/Menu.tsx

@@ -1,4 +1,4 @@
-import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions, ToastAndroid} from 'react-native'
+import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions} from 'react-native'
 import React, { useState } from 'react'
 import { useStore } from '../store/store';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
@@ -32,8 +32,8 @@ const getDonutList = (category: string, data: any) => {
 
 
 const Menu = ({navigation}: any) => {
-  const DonutList = useStore((state: any) => state.AllDonutList2);
+  const DonutList = useStore((state: any) => state.AllDonutMenu);
-  const DrinkList = useStore((state: any) => state.AllDrinkList2);
+  const DrinkList = useStore((state: any) => state.AllDrinkMenu);
 
   const [categories, setCategories] = useState(getCategoriesFromData(DonutList));
   const [searchMenu, setSearchMenu] = useState('');

donutshop/app/store/store.ts

@@ -8,8 +8,8 @@ import DrinkData from "../data/DrinkData";
 export const useStore = create(
     persist(
         (set, get) => ({
-            AllDonutList1: DonutData,
+            AllDonutMenu: DonutData,
-            AllDrinkList: DrinkData,
+            AllDrinkMenu: DrinkData,
             CartPrice: 0,
             FavoriteList: [],
             CartList: [],
@@ -68,25 +68,25 @@ export const useStore = create(
                 set(
                     produce(state => {
                         if(type == 'Donut'){
-                            for(let i = 0; i < state.AllDonutList1.length; i++){
+                            for(let i = 0; i < state.AllDonutMenu.length; i++){
-                                if(state.AllDonutList1[i].id == id){
+                                if(state.AllDonutMenu[i].id == id){
-                                    if(state.AllDonutList1[i].favourite == false){
+                                    if(state.AllDonutMenu[i].favourite == false){
-                                        state.AllDonutList1[i].favourite = true;
+                                        state.AllDonutMenu[i].favourite = true;
-                                        state.FavoriteList.unshift(state.AllDonutList1[i]);
+                                        state.FavoriteList.unshift(state.AllDonutMenu[i]);
                                     } else{
-                                        state.AllDonutList1[i].favourite = false;
+                                        state.AllDonutMenu[i].favourite = false;
                                     }
                                     break;
                                 }
                             }
                         } else if(type == 'Drink'){
-                            for(let i = 0; i< state.AllDrinkList.length; i++){
+                            for(let i = 0; i < state.AllDrinkMenu.length; i++){
-                                if(state.AllDrinkList[i].id == id){
+                                if(state.AllDrinkMenu[i].id == id){
-                                    if(state.AllDrinkList[i].favourite == false){
+                                    if(state.AllDrinkMenu[i].favourite == false){
-                                        state.AllDrinkList[i].favourite = true;
+                                        state.AllDrinkMenu[i].favourite = true;
-                                        state.FavoriteList.unshift(state.AllDrinkList[i]);
+                                        state.FavoriteList.unshift(state.AllDrinkMenu[i]);
                                     } else{
-                                        state.AllDrinkList[i].favourite = false;
+                                        state.AllDrinkMenu[i].favourite = false;
                                     }
                                     break;
                                 }
@@ -98,23 +98,23 @@ export const useStore = create(
                 set(
                     produce(state => {
                         if(type = 'Donut'){
-                            for(let i = 0; i < state.AllDonutList1.length; i++){
+                            for(let i = 0; i < state.AllDonutMenu.length; i++){
-                                if(state.AllDonutList1[i].id == id){
+                                if(state.AllDonutMenu[i].id == id){
-                                    if(state.AllDonutList1[i].favourite == true){
+                                    if(state.AllDonutMenu[i].favourite == true){
-                                        state.AllDonutList1[i].favourite = false;
+                                        state.AllDonutMenu[i].favourite = false;
                                     } else{
-                                        state.AllDonutList1[i].favourite = true;
+                                        state.AllDonutMenu[i].favourite = true;
                                     }
                                     break;
                                 }
                             }
                         } else if(type = 'Drink'){
-                            for(let i = 0; i < state.AllDrinkList.length; i++){
+                            for(let i = 0; i < state.AllDrinkMenu.length; i++){
-                                if(state.AllDrinkList[i].id == id){
+                                if(state.AllDrinkMenu[i].id == id){
-                                    if(state.AllDrinkList[i].favourite == true){
+                                    if(state.AllDrinkMenu[i].favourite == true){
-                                        state.AllDrinkList[i].favourite = false;
+                                        state.AllDrinkMenu[i].favourite = false;
                                     } else{
-                                        state.AllDrinkList[i].favourite = true;
+                                        state.AllDrinkMenu[i].favourite = true;
                                     }
                                     break;
                                 }
@@ -130,6 +130,72 @@ export const useStore = create(
                         state.FavoriteList.splice(spliceIndex, 1);
                     }),
                 ),
+            addCartItemQuantity:(id: string, size: string) => 
+                set(
+                    produce(state => {
+                        for(let i = 0; i < state.CartList.length; i++){
+                            if(state.CartList[i].id == id){
+                                for (let j = 0; j < state.CartList[i].prices.length; j++) {
+                                    if (state.CartList[i].prices[j].size == size) {
+                                      state.CartList[i].prices[j].quantity++;
+                                      break;
+                                    }
+                                }
+                            }
+                        }
+                    }),
+                ),
+            removeCartItemQuantity:(id: string, size: string) => 
+                set(
+                    produce(state => {
+                        for (let i = 0; i < state.CartList.length; i++) {
+                            if(state.CartList[i].id == id){
+                                for (let j = 0; j < state.CartList[i].prices.length; j++) {
+                                    if (state.CartList[i].prices[j].size == size) {
+                                        if(state.CartList[i].prices.length > 1){
+                                            if (state.CartList[i].prices[j].quantity > 1) {
+                                                state.CartList[i].prices[j].quantity--;
+                                            } else{
+                                                state.CartList[i].prices.splice(j, 1);
+                                            }
+                                        } else{
+                                            if (state.CartList[i].prices[j].quantity > 1) {
+                                                state.CartList[i].prices[j].quantity--;
+                                            } else {
+                                                state.CartList.splice(i, 1);
+                                            }
+                                        }
+                                        break
+                                    }
+                                }
+                            }
+                        }
+                    }),
+                ),
+            addToReceiptList:() => 
+                set(
+                    produce(state => {
+                        let temp = state.CartList.reduce(
+                            (accumulator: number, currentValue: any) => 
+                                accumulator + parseFloat(currentValue.ItemPrice),
+                            0,
+                        );
+                        if(state.ReceiptList.length > 0){
+                            state.ReceiptList.unshift({
+                                OrderDate: new Date().toDateString() + ' ' + new Date().toLocaleTimeString(),
+                                CartList: state.CartList,
+                                CartListPrice: temp.toFixed(2).toString(),
+                            })
+                        } else{
+                            state.ReceiptList.push({
+                                OrderDate: new Date().toDateString() + ' ' + new Date().toLocaleTimeString(),
+                                CartList: state.CartList,
+                                CartListPrice: temp.toFixed(2).toString(),
+                            });
+                        }
+                        state.CartList = [];
+                    }),
+                ),
         }), 
         {
             name: 'donutshop',