created payment page and their functionality

2024-07-26 16:20:39 -05:00 · 2024-07-26 16:20:39 -05:00 · 6d485b374f
commit 6d485b374f
parent 5257fdedf4
8 changed files with 131 additions and 21 deletions
--- a/donutshop/app/components/PaymentFooter.tsx
+++ b/donutshop/app/components/PaymentFooter.tsx
@ -15,7 +15,7 @@ interface PaymentProps{
 }


-const Payment: React.FC<PaymentProps> = ({
+const PaymentFooter: React.FC<PaymentProps> = ({
  price,
  buttonPressHandler,
  buttonTitle,
@ -37,6 +37,6 @@ const Payment: React.FC<PaymentProps> = ({
  )
 }

-export default Payment
+export default PaymentFooter

 const styles = StyleSheet.create({})
--- a/donutshop/app/components/PaymentOption.tsx
+++ 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<PaymentOptionProps> = ({
+  paymentMethod,
+  name,
+  icon,
+  iconStatus,
+}) => {
+
+
+  return (
+    <View style={{borderRadius: 5, borderWidth: 1, backgroundColor: paymentMethod == name ? '#FFE6E6' : 'transparent', borderColor: paymentMethod == name ? '#DA7297' : '#A9A9A9'}}>
+      {iconStatus ? (
+        <View style={{padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
+          <Text style={{color: '#DA7297', fontWeight: 500, fontSize: 16}}>{name}</Text>
+          <Image source={icon} style={{height: 35, width: 200}}/>
+        </View>
+      ):(
+        <View style={{padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
+          <Text style={{color: '#DA7297', fontWeight: 500, fontSize: 16}}>{name}</Text>
+          <Image source={icon} style={{height: 35, width: 60}}/>
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default PaymentOption
+
+const styles = StyleSheet.create({})
--- 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) => {
            )}
          </View>
          {CartList.length != 0 ? (
-            <Payment buttonTitle='Pay' price={{price:CartPrice, currency: '$'}} buttonPressHandler={buttonPressHandler}/>
+            <PaymentFooter buttonTitle='Pay' price={{price:CartPrice, currency: '$'}} buttonPressHandler={buttonPressHandler}/>
            ) : (
            <></>
          )}
--- 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) => {
          </TouchableWithoutFeedback>
        )}
      </View>
-      <Payment 
+      <PaymentFooter 
        price={price} 
        buttonTitle = 'Add to cart' 
        buttonPressHandler={() => {
--- 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) => {
            </View>
        </View>

-        <Payment 
+        <PaymentFooter 
            price={price} 
            buttonTitle = 'Add to cart' 
            buttonPressHandler={() => {
--- 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 (
-    <View>
-      <Text>Payment</Text>
+    <View style={{flex:1, backgroundColor: 'white'}}>
+      <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={() => {}}
+      />
    </View>
  )
 }

-export default Payment
+export default Payment
+
+const styles = StyleSheet.create({})
+
+
--- 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",
--- 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",