TheRealSwiftByte · tynanmatthews · May 21, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
diff --git a/app/AddCard.tsx b/app/AddCard.tsx
@@ -0,0 +1,53 @@
+import { SafeAreaView, StyleSheet, View } from "react-native";
+import React, { useState } from "react";
+import { SB_COLOR_SCHEME } from "@/constants";
+import { router } from "expo-router";
+import { Button } from "@swift-byte/switftbytecomponents";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import AddCardDetails from "@/components/AddCardDetails";
+
+export default function AddCard() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <KeyboardAwareScrollView style={styles.scrollView}>
+        <View style={styles.container}>
+          <View style={{ paddingBottom: 24 }}>
+            <AddCardDetails />
+          </View>
+
+          <Button
+            text={"Add"}
+            type={"primary"}
+            onPress={() => router.navigate("/PaymentMethod")}
+          ></Button>
+        </View>
+      </KeyboardAwareScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 32,
+    flex: 1,
+  },
+  scrollView: {
+    backgroundColor: "white",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: SB_COLOR_SCHEME.SB_PRIMARY,
+  },
+  dFlex: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  subtitle: {
+    fontSize: 15,
+    fontWeight: "bold",
+    color: SB_COLOR_SCHEME.SB_PRIMARY,
+  },
+});
diff --git a/app/PaymentMethod.tsx b/app/PaymentMethod.tsx
@@ -7,13 +7,13 @@ import {
   View,
   TouchableOpacity,
 } from "react-native";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { SB_COLOR_SCHEME } from "@/constants";
 import { Card, myCards } from "@/mock_data";
 import RadioOutline from "../assets/icons/icon-radio-outline.svg";
 import RadioFilled from "../assets/icons/icon-radio-filled.svg";
 import AddCard from "../assets/icons/logo-add-card.svg";
-import { Link } from "expo-router";
+import { Link, router } from "expo-router";
 import { Button } from "@swift-byte/switftbytecomponents";
 import {
   NavigationProp,
@@ -30,15 +30,20 @@ interface PaymentProps {
 }
 
 export default function PaymentMethod({ route, navigation }: PaymentProps) {
+  const [cards, setCards] = useState<Card[]>(myCards);
   const [selectedCard, setSelectedCard] = useState<Card>(myCards[0]);
 
+  useEffect(() => {
+    setCards(myCards)
+  }, [])
+
   return (
     <SafeAreaView style={styles.container}>
       <ScrollView style={styles.scrollView}>
         <View style={styles.container}>
           <View style={{ paddingBottom: 24 }}>
             <View>
-              {myCards.map((card) => {
+              {cards.map((card: Card) => {
                 return (
                   <View
                     key={card.id}
@@ -56,7 +61,9 @@ export default function PaymentMethod({ route, navigation }: PaymentProps) {
                           <PaypalLogo />
                         )}
                       </View>
-                      <Text>**** {card.last3Digits}</Text>
+                      <Text>
+                        {card.cardNumber.toString().replace(/.(?=.{3})/g, "*")}
+                      </Text>
                     </View>
                     <TouchableOpacity onPress={() => setSelectedCard(card)}>
                       <RadioOutline
@@ -77,18 +84,21 @@ export default function PaymentMethod({ route, navigation }: PaymentProps) {
                 );
               })}
             </View>
-            <View style={[styles.dFlex, { justifyContent: "flex-start" }]}>
+            <TouchableOpacity
+              style={[styles.dFlex, { justifyContent: "flex-start" }]}
+              onPress={() => router.navigate("/AddCard")}
+            >
               <AddCard style={{ marginRight: 16 }} />
               <Text>New payment method</Text>
-            </View>
+            </TouchableOpacity>
           </View>
 
           <Link href="/success" asChild>
             <Button
               text={"Pay Now"}
               type={"primary"}
               onPress={function (): void {
-                console.log("pressed");
+                // router.navigate({ pathname: '/success', params: { type: ''}})
               }}
             ></Button>
           </Link>

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -54,17 +54,11 @@ function RootLayoutNav() {
 
   return (
     <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
+      <Stack initialRouteName="welcome">
         <Stack.Screen name="Reviews"/>
         <Stack.Screen name="welcome" options={{ headerShown: false }} />
-         <Stack.Screen
-          name="signIn"
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="signUp"
-          options={{ headerShown: false }}
-        />
+        <Stack.Screen name="signIn" options={{ headerShown: false }} />
+        <Stack.Screen name="signUp" options={{ headerShown: false }} />
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen
@@ -89,6 +83,7 @@ function RootLayoutNav() {
             },
           }}
         />
+
         <Stack.Screen
           name="delivery"
           options={{
@@ -112,7 +107,21 @@ function RootLayoutNav() {
             },
           }}
         />
-        <Stack.Screen name="notifications" options={{ presentation: "modal", headerTitle: 'Notifications' }} />
+        <Stack.Screen
+          name="AddCard"
+          options={{
+            title: "Add Card",
+            headerTintColor: SB_COLOR_SCHEME.SB_PRIMARY,
+            headerBackTitle: "Back",
+            contentStyle: {
+              backgroundColor: "white",
+            },
+          }}
+        />
+        <Stack.Screen
+          name="notifications"
+          options={{ presentation: "modal", headerTitle: "Notifications" }}
+        />
         <Stack.Screen
           name="success"
           options={{ presentation: "modal", headerShown: false }}

diff --git a/components/AddCardDetails.tsx b/components/AddCardDetails.tsx
@@ -0,0 +1,72 @@
+import { SB_COLOR_SCHEME } from "@/constants";
+import React from "react";
+import { View, Text, TextInput, StyleSheet } from "react-native";
+
+const AddCardDetails = () => {
+  return (
+    <View style={styles.card}>
+      <Text style={styles.label}>Name</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="e.g. John Smith"
+        // value={name}
+        // onChangeText={setName}
+      />
+      <Text style={styles.label}>Card Number</Text>
+      <TextInput
+        style={styles.input}
+        placeholder="XXXX XXXX XXXX XXXX"
+        // value={cardNumber.toString()}
+        keyboardType="numeric"
+        maxLength={16}
+        // onChangeText={(input) => setCardNumber(parseInt(input))}
+      />
+      <View style={styles.row}>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.label}>CVV</Text>
+          <TextInput style={styles.smallInput} placeholder="XXX" />
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.label}>Expiry Date</Text>
+          <TextInput style={styles.smallInput} placeholder="dd/mm/yyyy" />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    flex: 1,
+  },
+  label: {
+    fontSize: 15,
+    fontWeight: "bold",
+    color: SB_COLOR_SCHEME.SB_PRIMARY,
+    marginBottom: 10,
+  },
+  input: {
+    fontSize: 16,
+    padding: 15,
+    borderRadius: 10,
+    marginBottom: 20,
+    borderColor: "#BBC5C1",
+    borderWidth: 1,
+  },
+  row: {
+    flexDirection: "row",
+    gap: 10,
+    flex: 1,
+  },
+  smallInput: {
+    fontSize: 16,
+    padding: 15,
+    borderRadius: 10,
+    borderColor: "#BBC5C1",
+    borderWidth: 1,
+  },
+});
+
+export default AddCardDetails;
diff --git a/mock_data.ts b/mock_data.ts
@@ -46,6 +46,18 @@ export interface Customer {
   phone: string;
 }
 
+export interface User {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  address: string;
+  password: string;
+  isMember: string;
+  cards: Card[];
+}
+
 export interface Payment {
   id: string;
   amount: number;
@@ -64,9 +76,11 @@ export interface Cart {
 
 export interface Card {
   id: number,
-  type: string,
-  last3Digits: number,
-  title: string
+  name: string;
+  cardNumber: number;
+  cvv: number;
+  expiryDate: string; // dd/mm/yyyy
+  type: 'visa' | 'master' | 'paypal' // visa, master, or paypal
 }
 
 export interface Order {
@@ -286,23 +300,29 @@ export const promoCode = [
 export const myCards: Card[] = [
   {
     id: 1,
-    type: 'visa',
-    last3Digits: 4567,
-    title: ''
+    name: "John Doe",
+    cardNumber: 1234567890123456,
+    cvv: 123,
+    expiryDate: "12/25/2024",
+    type: "visa"
   },
   {
     id: 2,
-    type: 'master',
-    last3Digits: 7890,
-    title: 'Credit Card'
+    name: "Alice Smith",
+    cardNumber: 9876543210987654,
+    cvv: 456,
+    expiryDate: "06/27/2023",
+    type: "master"
   },
   {
     id: 3,
-    type: 'paypal',
-    last3Digits: 2345,
-    title: 'Paypal'
+    name: "Bob Johnson",
+    cardNumber: 4567890123456789,
+    cvv: 789,
+    expiryDate: "09/30/2025",
+    type: "paypal"
   }
-]
+];
 
 export const customers: Customer[] = [
   {
@@ -402,4 +422,8 @@ export const notifications = [
     isNew: true,
   },
 
-]
+]
+
+// export currentUser: User = {
+
+// }