From 6d485b374fe6975c2a61d7e7e5bab355c7a246e0 Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Fri, 26 Jul 2024 16:20:39 -0500 Subject: [PATCH] created payment page and their functionality --- .../{Payment.tsx => PaymentFooter.tsx} | 4 +- donutshop/app/components/PaymentOption.tsx | 40 ++++++++++ donutshop/app/screen/Cart.tsx | 6 +- donutshop/app/screen/Detail.tsx | 4 +- donutshop/app/screen/DetailDrink.tsx | 4 +- donutshop/app/screen/Payment.tsx | 73 ++++++++++++++++--- donutshop/package-lock.json | 19 +++++ donutshop/package.json | 2 + 8 files changed, 131 insertions(+), 21 deletions(-) rename donutshop/app/components/{Payment.tsx => PaymentFooter.tsx} (93%) create mode 100644 donutshop/app/components/PaymentOption.tsx diff --git a/donutshop/app/components/Payment.tsx b/donutshop/app/components/PaymentFooter.tsx similarity index 93% rename from donutshop/app/components/Payment.tsx rename to donutshop/app/components/PaymentFooter.tsx index f89913e..1828d04 100644 --- a/donutshop/app/components/Payment.tsx +++ b/donutshop/app/components/PaymentFooter.tsx @@ -15,7 +15,7 @@ interface PaymentProps{ } -const Payment: React.FC = ({ +const PaymentFooter: React.FC = ({ price, buttonPressHandler, buttonTitle, @@ -37,6 +37,6 @@ const Payment: React.FC = ({ ) } -export default Payment +export default PaymentFooter const styles = StyleSheet.create({}) \ No newline at end of file diff --git a/donutshop/app/components/PaymentOption.tsx b/donutshop/app/components/PaymentOption.tsx new file mode 100644 index 0000000..5849757 --- /dev/null +++ b/donutshop/app/components/PaymentOption.tsx @@ -0,0 +1,40 @@ +import { Image, StyleSheet, Text, View } from 'react-native' +import React from 'react' + + +interface PaymentOptionProps{ + paymentMethod: string; + name: string; + icon: any; + iconStatus: boolean; +} + + +const PaymentOption: React.FC = ({ + paymentMethod, + name, + icon, + iconStatus, +}) => { + + + return ( + + {iconStatus ? ( + + {name} + + + ):( + + {name} + + + )} + + ) +} + +export default PaymentOption + +const styles = StyleSheet.create({}) \ No newline at end of file diff --git a/donutshop/app/screen/Cart.tsx b/donutshop/app/screen/Cart.tsx index 4aee765..250b981 100644 --- a/donutshop/app/screen/Cart.tsx +++ b/donutshop/app/screen/Cart.tsx @@ -1,7 +1,7 @@ import { View, Text, ScrollView, Image, Pressable} from 'react-native' import React from 'react' import { useStore } from '../store/store'; -import Payment from '../components/Payment'; +import PaymentFooter from '../components/PaymentFooter'; import CartItem from '../components/CartItem'; @@ -17,7 +17,7 @@ const Cart = ({navigation, route}: any) => { //console.log("CartList =", CartList.length) const buttonPressHandler = () => { - navigation.push('payment'); + navigation.push('payment', {amount: CartPrice}); } //add to cart functionality const addCartItemQuantityHandler = (id: string, size: string) => { @@ -64,7 +64,7 @@ const Cart = ({navigation, route}: any) => { )} {CartList.length != 0 ? ( - + ) : ( <> )} diff --git a/donutshop/app/screen/Detail.tsx b/donutshop/app/screen/Detail.tsx index 035214e..d29543c 100644 --- a/donutshop/app/screen/Detail.tsx +++ b/donutshop/app/screen/Detail.tsx @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { useStore } from '../store/store'; import { StatusBar } from 'expo-status-bar'; import BackgroundInfo from "../components/BackgroundInfo"; -import Payment from "../components/Payment"; +import PaymentFooter from "../components/PaymentFooter"; import { TouchableWithoutFeedback } from 'react-native-gesture-handler'; @@ -85,7 +85,7 @@ const Detail = ({navigation, route}: any) => { )} - { diff --git a/donutshop/app/screen/DetailDrink.tsx b/donutshop/app/screen/DetailDrink.tsx index 01d1a4b..b15aace 100644 --- a/donutshop/app/screen/DetailDrink.tsx +++ b/donutshop/app/screen/DetailDrink.tsx @@ -4,7 +4,7 @@ import { useStore } from '../store/store' import { StatusBar } from 'expo-status-bar'; import { ScrollView, TouchableWithoutFeedback } from 'react-native-gesture-handler'; import BackgroundDrinkInfo from "../components/BackgroundDrinkInfo"; -import Payment from "../components/Payment"; +import PaymentFooter from "../components/PaymentFooter"; const DetailDrink = ({navigation, route}: any) => { @@ -98,7 +98,7 @@ const DetailDrink = ({navigation, route}: any) => { - { diff --git a/donutshop/app/screen/Payment.tsx b/donutshop/app/screen/Payment.tsx index 7c2b07e..5a8a9f0 100644 --- a/donutshop/app/screen/Payment.tsx +++ b/donutshop/app/screen/Payment.tsx @@ -1,35 +1,84 @@ -import { View, Text } from 'react-native' -import React from 'react' +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'; -const PaymentOption = [ +const PaymentOptionList = [ { id: 1, name: 'Debit/Credit ', - icon: '', + icon: require('../../assets/images/payment/debit_credit.png'), iconStatus: true, }, { id: 2, name: 'Apple Pay', - icon: '', + icon: require('../../assets/images/payment/apple_pay.png'), iconStatus: false, }, { id: 3, - name: 'PayPal', - icon: '', + name: 'Google Pay', + icon: require('../../assets/images/payment/google_pay.png'), iconStatus: false, - } + }, ] -const Payment = () => { +const Payment = ({navigation, route}: any) => { + const [paymentMethod, setPaymentMenthod] = useState('Credit card'); + return ( - - Payment + + + + {navigation.pop()}}> + + + Payments + + + + {setPaymentMenthod('Credit Card')}}> + + + + + + + + + + Fakey McFaker + + + + {PaymentOptionList.map((data: any) => ( + {setPaymentMenthod(data.name);}}> + + + ))} + + + {}} + /> ) } -export default Payment \ No newline at end of file +export default Payment + +const styles = StyleSheet.create({}) + + diff --git a/donutshop/package-lock.json b/donutshop/package-lock.json index df4b013..471ff79 100644 --- a/donutshop/package-lock.json +++ b/donutshop/package-lock.json @@ -17,6 +17,7 @@ "expo-blur": "^13.0.2", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", + "expo-linear-gradient": "~13.0.2", "expo-linking": "~6.3.1", "expo-router": "~3.5.18", "expo-splash-screen": "~0.27.5", @@ -28,6 +29,7 @@ "react-dom": "18.2.0", "react-native": "0.74.3", "react-native-gesture-handler": "~2.16.1", + "react-native-linear-gradient": "^2.8.3", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1", @@ -9314,6 +9316,14 @@ "expo": "*" } }, + "node_modules/expo-linear-gradient": { + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-13.0.2.tgz", + "integrity": "sha512-EDcILUjRKu4P1rtWcwciN6CSyGtH7Bq4ll3oTRV7h3h8oSzSilH1g6z7kTAMlacPBKvMnkkWOGzW6KtgMKEiTg==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-linking": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-6.3.1.tgz", @@ -15764,6 +15774,15 @@ "react": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-native-linear-gradient": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz", + "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-reanimated": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.10.1.tgz", diff --git a/donutshop/package.json b/donutshop/package.json index 0a8c571..1081287 100644 --- a/donutshop/package.json +++ b/donutshop/package.json @@ -24,6 +24,7 @@ "expo-blur": "^13.0.2", "expo-constants": "~16.0.2", "expo-font": "~12.0.9", + "expo-linear-gradient": "~13.0.2", "expo-linking": "~6.3.1", "expo-router": "~3.5.18", "expo-splash-screen": "~0.27.5", @@ -35,6 +36,7 @@ "react-dom": "18.2.0", "react-native": "0.74.3", "react-native-gesture-handler": "~2.16.1", + "react-native-linear-gradient": "^2.8.3", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1",