From c43df21c148da85453948932902b8da3c6513dfa Mon Sep 17 00:00:00 2001
From: celine <amandaceline70@gmail.com>
Date: Thu, 2 May 2024 10:25:32 +1000
Subject: [PATCH 1/2] add card component

---
 app/AddCard.tsx               | 53 ++++++++++++++++++++++++++++++
 app/PaymentMethod.tsx         |  6 ++--
 app/_layout.tsx               | 29 +++++++++++------
 components/AddCardDetails.tsx | 61 +++++++++++++++++++++++++++++++++++
 4 files changed, 136 insertions(+), 13 deletions(-)
 create mode 100644 app/AddCard.tsx
 create mode 100644 components/AddCardDetails.tsx

diff --git a/app/AddCard.tsx b/app/AddCard.tsx
new file mode 100644
index 0000000..dbfea4c
--- /dev/null
+++ 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
index daf9539..717ddff 100644
--- a/app/PaymentMethod.tsx
+++ b/app/PaymentMethod.tsx
@@ -13,7 +13,7 @@ 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,
@@ -77,10 +77,10 @@ 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>
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 487f311..779c8d3 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -54,16 +54,10 @@ function RootLayoutNav() {
 
   return (
     <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
+      <Stack initialRouteName="welcome">
         <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
@@ -88,6 +82,7 @@ function RootLayoutNav() {
             },
           }}
         />
+
         <Stack.Screen
           name="delivery"
           options={{
@@ -111,7 +106,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
new file mode 100644
index 0000000..08618ed
--- /dev/null
+++ b/components/AddCardDetails.tsx
@@ -0,0 +1,61 @@
+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" />
+      <Text style={styles.label}>Card Number</Text>
+      <TextInput style={styles.input} placeholder="XXXX XXXX XXXX XXXX" />
+      <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;

From 33aa9d8cd3454c3ae33916db2c095e07eae1c091 Mon Sep 17 00:00:00 2001
From: celine <amandaceline70@gmail.com>
Date: Thu, 2 May 2024 13:56:48 +1000
Subject: [PATCH 2/2] add card details

---
 app/PaymentMethod.tsx         | 20 ++++++++++----
 components/AddCardDetails.tsx | 25 ++++++++++++-----
 mock_data.ts                  | 52 +++++++++++++++++++++++++----------
 3 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/app/PaymentMethod.tsx b/app/PaymentMethod.tsx
index 717ddff..196b273 100644
--- a/app/PaymentMethod.tsx
+++ b/app/PaymentMethod.tsx
@@ -7,7 +7,7 @@ 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";
@@ -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,7 +84,10 @@ export default function PaymentMethod({ route, navigation }: PaymentProps) {
                 );
               })}
             </View>
-            <TouchableOpacity style={[styles.dFlex, { justifyContent: "flex-start" }]} onPress={() => router.navigate("/AddCard")}>
+            <TouchableOpacity
+              style={[styles.dFlex, { justifyContent: "flex-start" }]}
+              onPress={() => router.navigate("/AddCard")}
+            >
               <AddCard style={{ marginRight: 16 }} />
               <Text>New payment method</Text>
             </TouchableOpacity>
@@ -88,7 +98,7 @@ export default function PaymentMethod({ route, navigation }: PaymentProps) {
               text={"Pay Now"}
               type={"primary"}
               onPress={function (): void {
-                console.log("pressed");
+                // router.navigate({ pathname: '/success', params: { type: ''}})
               }}
             ></Button>
           </Link>
diff --git a/components/AddCardDetails.tsx b/components/AddCardDetails.tsx
index 08618ed..961ae4d 100644
--- a/components/AddCardDetails.tsx
+++ b/components/AddCardDetails.tsx
@@ -3,19 +3,30 @@ 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" />
+      <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" />
+      <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}}>
+        <View style={{ flex: 1 }}>
           <Text style={styles.label}>CVV</Text>
           <TextInput style={styles.smallInput} placeholder="XXX" />
         </View>
-        <View style={{flex: 1}}>
+        <View style={{ flex: 1 }}>
           <Text style={styles.label}>Expiry Date</Text>
           <TextInput style={styles.smallInput} placeholder="dd/mm/yyyy" />
         </View>
@@ -34,7 +45,7 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: "bold",
     color: SB_COLOR_SCHEME.SB_PRIMARY,
-    marginBottom: 10
+    marginBottom: 10,
   },
   input: {
     fontSize: 16,
@@ -47,7 +58,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     gap: 10,
-    flex: 1
+    flex: 1,
   },
   smallInput: {
     fontSize: 16,
diff --git a/mock_data.ts b/mock_data.ts
index 4bc490d..d9668e5 100644
--- 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,
   },
 
-]
\ No newline at end of file
+]
+
+// export currentUser: User = {
+
+// }
\ No newline at end of file