Obanana
/
Obanana_test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

latest

This commit is contained in:
mark H 2023-09-26 14:33:01 +08:00
parent 91da696e7e
commit a1f75139b9
58 changed files with 18231 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
App.js
View File

@ -1,20 +1,40 @@
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from 'react-native'; import {
Platform,
SafeAreaView,
StyleSheet,
Text,
View,
StatusBar as StatusBars,
Dimensions,
} from "react-native";
import Route from "./app/routes/route";
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;
export default function App() { export default function App() {
return ( return (
<View style={styles.container}> <SafeAreaView style={styles.container}>
<Text>Open up App.js to start working on your app!</Text> <View style={styles.wrapper}>
<StatusBar style="auto" /> <StatusBar style="auto" />
</View> <Route />
</View>
</SafeAreaView>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, // flex: 1,
backgroundColor: '#fff', backgroundColor: "#ffff",
alignItems: 'center', alignItems: "center",
justifyContent: 'center', // justifyContent: "center",
height: "100%",
paddingTop: Platform.OS === "android" ? StatusBars.currentHeight + 10 : "",
},
wrapper: {
height: "100%",
width: "100%",
// backgroundColor:"#333"
}, },
}); });

9
app.json
View File

@ -6,16 +6,17 @@
"orientation": "portrait", "orientation": "portrait",
"icon": "./assets/icon.png", "icon": "./assets/icon.png",
"userInterfaceStyle": "light", "userInterfaceStyle": "light",
"jsEngine": "hermes",
"splash": { "splash": {
"image": "./assets/splash.png", "image": "./assets/splash.png",
"resizeMode": "contain", "resizeMode": "contain",
"backgroundColor": "#ffffff" "backgroundColor": "#ffffff"
}, },
"assetBundlePatterns": [ "assetBundlePatterns": ["**/*"],
"**/*"
],
"ios": { "ios": {
"supportsTablet": true "supportsTablet": true,
"jsEngine": "jsc"
}, },
"android": { "android": {
"adaptiveIcon": { "adaptiveIcon": {

61
app/components/DeleteConfirmationModal.jsx Normal file
View File

@ -0,0 +1,61 @@
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Modal from "react-native-modal";
const DeleteConfirmationModal = ({ isVisible, onCancel, onConfirm }) => {
return (
<Modal isVisible={isVisible}>
<View
style={{
height: 200,
width: "100%",
backgroundColor: "#fff",
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
}}
>
<Text>Are you sure you want to delete? it cannot be undone</Text>
<View style={styles.buttons}>
<TouchableOpacity onPress={onCancel} style={styles.btnCancel}>
<Text style={styles.btnCancelText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity onPress={onConfirm} style={styles.btnConfirm}>
<Text style={styles.btnConfirmText}>Confirm</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
};
const styles = StyleSheet.create({
actions: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
},
buttons: {
position: "absolute",
flexDirection: "row",
bottom: 0,
},
btnCancel: {
color: "#ff0000",
padding: 10,
},
btnCancelText: {
color: "#ff0000",
padding: 10,
},
btnConfirm: {
color: "#ff0000",
padding: 10,
},
btnConfirmText: {
color: "#001aff",
padding: 10,
},
});
export default DeleteConfirmationModal;

53
app/components/cart/CartCard.jsx Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import CartSubCard from "./CartSubCard";
import MasonryList from "@react-native-seoul/masonry-list";
const CartCard = ({ cart }) => {
return (
<View style={styles.container}>
<Text style={styles.header}>{cart?.shopname}</Text>
<MasonryList
data={cart?.cartItems}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <CartSubCard cart={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
// width: "95%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
padding: 10,
backgroundColor:'#fafafa'
},
header: {
// position: "fixed",
fontWeight: "600",
width: "100%",
top: 0,
},
footer: {
// position: "absolute",
bottom: 0,
width: "100%",
},
wrapper: {
height: "85%",
},
});
export default CartCard;

106
app/components/cart/CartSubCard.jsx Normal file
View File

@ -0,0 +1,106 @@
import React from "react";
import { View, Text, StyleSheet, Image } from "react-native";
const CartSubCard = ({ cart }) => {
return (
<View style={styles.container}>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart.img }}
/>
</View>
<View style={styles.wrapper}>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{cart.name}
</Text>
<View style={styles.rateCon}>
{cart.price ? (
<>
<View style={styles.priceCon}>
<Text
style={
cart.promo ? styles.textPricePromo : styles.textPrice
}
>
₱{cart.price}
</Text>
{cart.promo ? (
<Text style={styles.textPrice}>
{" "}
{cart.price - cart.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>
(-{cart.promo}%)
</Text>
</Text>
) : null}
</View>
</>
) : (
<Text>No price </Text>
)}
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// width: "95%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
flexDirection: "row",
padding: 10,
backgroundColor:'#ffffff'
},
header: {
position: "fixed",
width: "100%",
top: 0,
},
footer: {
// position: "absolute",
bottom: 0,
width: "100%",
},
imgWrap:{
padding:10
},
wrapper: {
height: "85%",
width: "60%",
},
priceCon: {
flexDirection: "row",
paddingVertical: 10,
},
textPrice: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
details: {
// width: "50%",
},
text: {
fontSize: 13,
},
});
export default CartSubCard;

128
app/components/checkout/Accordion.jsx Normal file
View File

@ -0,0 +1,128 @@
import { faAngleDown, faCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import React, { useState } from "react";
import {
View,
Text,
TouchableOpacity,
Animated,
Easing,
StyleSheet,
} from "react-native";
const Accordion = ({ sections, selected,sel }) => {
const [activeSection, setActiveSection] = useState(-1);
const [animatedHeights] = useState(sections.map(() => new Animated.Value(0)));
const toggleSection = (sectionIndex) => {
const animations = animatedHeights.map((height, index) => {
if (index === sectionIndex) {
const contentHeight = sections[sectionIndex].methods.length * 60; // Adjust the height as needed
return Animated.timing(height, {
toValue: activeSection === sectionIndex ? 0 : contentHeight,
duration: 300,
easing: Easing.ease,
useNativeDriver: false,
});
} else if (index === activeSection) {
return Animated.timing(height, {
toValue: 0,
duration: 300,
easing: Easing.ease,
useNativeDriver: false,
});
}
return null;
});
Animated.parallel(animations).start();
setActiveSection(activeSection === sectionIndex ? -1 : sectionIndex);
};
return (
<View style={styles.container}>
{sections.map((section, index) => (
<View key={index} style={styles.section}>
<TouchableOpacity
style={styles.acc}
onPress={() => {
toggleSection(index);
}}
>
<Text style={styles.sectionTitle}>{section.type}</Text>
<FontAwesomeIcon icon={faAngleDown} color={"#ffaa00"} size={16} />
</TouchableOpacity>
<Animated.View
style={[
styles.sectionContent,
{
height: animatedHeights[index],
},
]}
>
{section?.methods.map((section, index) => (
<TouchableOpacity
style={styles.btnMethod}
key={index}
onPress={() => {
selected(section.methodName);
}}
>
<Text style={styles.btnMethodText}>{section.methodName}</Text>
{sel === section?.methodName ? (
<FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} />
) : null}
</TouchableOpacity>
))}
</Animated.View>
</View>
))}
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
// justifyContent:'center',
alignItems: "center",
},
section: {
width: "100%",
borderWidth: 1,
borderColor: "#ececec",
padding: 10,
},
sectionTitle: {
fontSize: 18,
fontWeight: "bold",
},
sectionContent: {
overflow: "hidden",
paddingHorizontal: 15,
height: 200,
},
acc: {
justifyContent: "space-between",
flexDirection: "row",
alignItems: "center",
padding: 10,
},
btnMethod: {
padding: 10,
borderWidth: 1,
borderColor: "#e9e7e7",
borderRadius: 5,
marginVertical: 1,
flexDirection:'row',
justifyContent : 'space-between',
alignItems: 'center'
},
btnMethodText: {
fontSize: 20,
},
});
export default Accordion;

108
app/components/main/BottomNav.js Normal file
View File

@ -0,0 +1,108 @@
import React, { useState } from "react";
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
import { faCartShopping, faStore } from "@fortawesome/free-solid-svg-icons";
import {
faBell,
faComment,
faComments,
faUserCircle,
} from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
const BottomNav = ({ settabActive, activeTab }) => {
const tabSwitch = (e) => {
settabActive(e);
};
return (
<View style={styles.container}>
<View style={styles.wrapper}>
<TouchableOpacity
style={styles.button}
onPress={() => tabSwitch("home")}
>
{activeTab === "home" ? (
<FontAwesomeIcon icon={faStore} color={"#FFAA00"} size={25} />
) : (
<FontAwesomeIcon icon={faStore} color={"#888888"} size={25} />
)}
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => tabSwitch("notif")}
>
{activeTab === "notif" ? (
<FontAwesomeIcon icon={faBell} color={"#FFAA00"} size={25} />
) : (
<FontAwesomeIcon icon={faBell} color={"#888888"} size={25} />
)}
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => tabSwitch("message")}
>
{activeTab === "message" ? (
<FontAwesomeIcon icon={faComments} color={"#FFAA00"} size={25} />
) : (
<FontAwesomeIcon icon={faComments} color={"#888888"} size={25} />
)}
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => tabSwitch("cart")}
>
{activeTab === "cart" ? (
<FontAwesomeIcon
icon={faCartShopping}
color={"#FFAA00"}
size={25}
/>
) : (
<FontAwesomeIcon
icon={faCartShopping}
color={"#888888"}
size={25}
/>
)}
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => tabSwitch("profile")}
>
{activeTab === "profile" ? (
<FontAwesomeIcon icon={faUserCircle} color={"#FFAA00"} size={25} />
) : (
<FontAwesomeIcon icon={faUserCircle} color={"#888888"} size={25} />
)}
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
bottom: 0,
// position: "fixed",
// paddingVertical: 15,
paddingBottom:5,
boxShadow: "0px 0px 3px 0px rgba(0, 0, 0, 0.25)",
},
wrapper: {
flexDirection: "row",
width: "100%",
alignItems: "center",
justifyContent: "space-around",
margin: "auto",
borderTopColor: "#ddd",
borderTopWidth: 1,
},
button: {
padding: 15,
// paddingBottom: 25,
},
});
export default BottomNav;

71
app/components/main/Header.jsx Normal file
View File

@ -0,0 +1,71 @@
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import { Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import obn from "../../../assets/obn.png";
const Header = () => {
const [searchKeyword, setsearchKeyword] = useState("");
const navigation = useNavigation()
console.log(searchKeyword);
const Search = (e) => {
setsearchKeyword(e);
};
return (
<View style={styles.container} onPress={() => navigation.navigate("Search")}>
<View style={styles.wrapper}>
<Image style={styles.imgLogo} source={obn} />
<TouchableOpacity
style={styles.input}
onPress={() => navigation.navigate("Search")}
// placeholder="Search product or vendorss"
// placeholderTextColor="#a5a5a5"
// onChangeText={(e) => Search(e)}
// // editable={false}
// onFocus={() => navigation.navigate("Search")}
// onPressIn={() => navigation.navigate("Search")}
>
<Text>Search...</Text>
</TouchableOpacity>
<FontAwesomeIcon icon={faSearch} color={"#888888"} size={25} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
top: 0,
// position: "fixed",
paddingVertical: 15,
paddingTop: 5,
// boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)'
},
wrapper: {
flexDirection: "row",
width: "95%",
alignItems: "center",
justifyContent: "space-around",
margin: "auto",
},
button: {
padding: 15,
},
imgLogo: {
height: 30,
width: 30,
},
input: {
backgroundColor: "#f5f5f5dd",
padding: 10,
paddingHorizontal: 20,
borderRadius: 10,
width: "70%",
},
});
export default Header;

9
app/components/main/footer.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
const footer = () => {
return (
<div>footer</div>
)
}
export default footer

144
app/components/main/home/ProductCard.jsx Normal file
View File

@ -0,0 +1,144 @@
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
const ProductCard = ({ product }) => {
const navigation = useNavigation();
return (
<TouchableOpacity
activeOpacity={0.7}
style={styles.container}
onPress={() => navigation.navigate("Product", { product })}
>
<Image
style={{ width: "100%", height: 200, resizeMode: "cover" }}
source={{ uri: product.img }}
/>
<View style={{ padding: 10, backgroundColor: "#fff" }}>
<Text style={styles.text} numberOfLines={2}>
{product.name}
</Text>
<View style={styles.priceCon}>
<Text
style={product.promo ? styles.textPricePromo : styles.textPrice}
>
₱{product.price}
</Text>
{product.promo ? (
<Text style={styles.textPrice}>
{" "}
{product.price - product.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text>
</Text>
) : null}
</View>
<View style={styles.footer}>
<Text style={styles.textMin}>
min. order: {product.min} {product.per}
</Text>
<Text style={styles.textSold}>{product.sold} sold</Text>
</View>
{product.rate ? (
<View style={styles.rateCon}>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{product.rate} ({product.raterTotal})
</Text>
</View>
) : null}
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
// backgroundColor: "#ff3333",
width: "95%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
overflow: "hidden",
},
wrapper: {
width: "100%",
// height: 200,
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
text: {
fontSize: 13,
fontWeight: "600",
textTransform: "capitalize",
color: "#333",
letterSpacing: 0.5,
},
priceCon: {
flexDirection: "row",
paddingVertical: 4,
},
textPrice: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: {
fontSize: 11,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
textSold: {
fontSize: 11,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
rateCon: {
flexDirection: "row",
// justifyContent:'center',
alignItems: "center",
paddingVertical: 3,
},
textRate: {
fontSize: 12,
color: "#838383",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
});
export default ProductCard;

81
app/components/main/home/ProductList.js Normal file
View File

@ -0,0 +1,81 @@
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "./ProductCard";
import { products } from "../../../constants/product";
const ProductList = ({}) => {
return (
<View style={styles.container}>
<Text style={styles.header}>For You</Text>
<View style={styles.wrapper}>
<MasonryList
data={products}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={2}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ProductCard product={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
// refreshing={isLoadingNext}
// onRefresh={() => refetch({ first: itemCount })}
onEndReachedThreshold={0.1}
// onEndReached={() => loadNext(ITEM_CNT)}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
// height: "87%",
// paddingHorizontal: 10,
},
container1: {
// flex: 1,
// backgroundColor: "#333",
width: "100%",
// height: "87%",
// paddingHorizontal: 10,
},
wrapper: {
width: "100%",
height: "100%",
backgroundColor: "#F3F3F3",
padding: 10,
paddingHorizontal: 5,
marginTop: 10,
},
list: {
width: "100%",
// backgroundColor: "#fff",
},
content: {
width: "100%",
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
marginLeft: 10,
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
});
export default ProductList;

224
app/components/main/home/ShopCard.jsx Normal file
View File

@ -0,0 +1,224 @@
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
const ShopCard = ({ product }) => {
const navigation = useNavigation();
return (
<TouchableOpacity
activeOpacity={0.7}
style={styles.container}
onPress={() => navigation.navigate("Product", { product })}
>
<View style={styles.top}>
<View style={styles.imgWrap}>
<Image
style={{ width: 80, height: 80, resizeMode: "cover" }}
source={{ uri: product.logo }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={1}>
{product.name}
</Text>
<View style={styles.rateCon}>
{product.rate ? (
<>
<Text style={styles.textHead}>Rating: </Text>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{product.rate} ({product.raterTotal})
</Text>
</>
) : (
<Text>No rating </Text>
)}
</View>
<View style={styles.rateCon}>
{product.respoTime ? (
<>
<Text style={styles.textHead}>Average Response Time: </Text>
<Text style={styles.textRate}>{product.respoTime}hrs</Text>
</>
) : (
<Text>No rating </Text>
)}
</View>
<View style={styles.rateCon}>
{product.respoTime ? (
<>
<Text style={styles.textHead}>Main Products: </Text>
{product.tags.map((e, i) => (
<Text style={styles.textRate} key={i}>
{e},{" "}
</Text>
))}
</>
) : (
<Text>No rating </Text>
)}
</View>
</View>
<View style={styles.btnWrap}>
<TouchableOpacity style={styles.btnmess}>
<FontAwesomeIcon icon={faMessage} color={"#00C85C"} size={25} />
</TouchableOpacity>
</View>
</View>
<View style={styles.bot}>
<View style={styles.botWrap}>
{product.images.map((e, i) => (
<Image
key={i}
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 10,
}}
source={{ uri: e }}
/>
))}
</View>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
width: "98%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
overflow: "hidden",
},
wrapper: {
width: "100%",
alignItems: "center",
justifyContent: "center",
},
top: {
width: "100%",
justifyContent: "space-between",
alignItems: "center",
height: 150,
flexDirection: "row",
backgroundColor: "#FFFFFF",
},
imgWrap: {
width: 80,
height: 80,
alignItems: "center",
justifyContent: "center",
marginLeft: 10,
},
btnWrap: {
width: 80,
height: 80,
// backgroundColor: "#ffaa00",
alignItems: "center",
justifyContent: "center",
},
btnmess: {
backgroundColor: "#74fab2",
padding: 15,
borderRadius: 10,
},
details: {
height: "100%",
justifyContent: "center",
// alignItems:'center'
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
text: {
fontSize: 15,
fontWeight: "900",
textTransform: "uppercase",
color: "#333",
letterSpacing: 0.5,
},
priceCon: {
flexDirection: "row",
paddingVertical: 4,
},
textPrice: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: {
fontSize: 11,
fontWeight: "600",
color: "#bdbdbd",
},
textSold: {
fontSize: 11,
fontWeight: "600",
color: "#bdbdbd",
},
rateCon: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 3,
},
textHead: {
fontSize: 11,
color: "#292929",
},
textRate: {
fontSize: 12,
color: "#838383",
textTransform: "capitalize",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
},
bot: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
paddingVertical: 10,
},
botWrap: {
width: "100%",
flexDirection: "row",
justifyContent: "space-around",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
});
export default ShopCard;

119
app/components/main/home/ShopList.js Normal file
View File

@ -0,0 +1,119 @@
import React, { useState } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "./ProductCard";
import ShopCard from "./ShopCard";
const ShopList = () => {
const [itemCount, setitemCount] = useState(10);
const products = [
{
logo: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "TecNic Inc.",
price: 200,
min: 20,
per: "pieces",
verified: true,
respoTime: 2,
tags: ["bag", "Jar", "Clothings"],
rate: 4.2,
raterTotal: 200,
images: [
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
],
},
{
logo: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "TecNic Inc.",
price: 200,
min: 20,
per: "pieces",
verified: true,
respoTime: 2,
tags: ["bag", "Jar", "Clothings"],
rate: 4.2,
raterTotal: 200,
images: [
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
],
},
{
logo: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "TecNic Inc.",
price: 200,
min: 20,
per: "pieces",
verified: true,
respoTime: 2,
tags: ["bag", "Jar", "Clothings"],
rate: 4.2,
raterTotal: 200,
images: [
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
],
},
];
return (
<View style={styles.container}>
<Text style={styles.header}>For You</Text>
<View style={styles.wrapper}>
<MasonryList
data={products}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ShopCard key={item.id} product={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
width: "100%",
},
container1: {
width: "100%",
},
wrapper: {
width: "100%",
height: "100%",
backgroundColor: "#F3F3F3",
padding: 10,
paddingHorizontal: 5,
marginTop: 10,
},
list: {
width: "100%",
},
content: {
width: "100%",
alignItems: "center",
justifyContent: "center",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
marginLeft: 10,
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
});
export default ShopList;

52
app/components/main/home/Swiper.jsx Normal file
View File

@ -0,0 +1,52 @@
import React from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import Swiper from "react-native-swiper";
const SwiperCon = () => {
const slider = [
{
img: "https://obanana.com/wp-content/uploads/2023/04/banner-05.jpg",
},
{
img: "https://obanana.com/wp-content/uploads/2021/07/new-popup-2022-768x394.png",
},
{
img: "https://obanana.com/wp-content/uploads/2023/04/Banner-04_compressed-scaled-1.jpg",
},
];
return (
<View style={styles.container}>
<Swiper style={styles.wrapper} autoplay>
{slider.map((e, index) => (
<View style={styles.slide1} key={index}>
<Image source={{ uri: e.img }} style={styles.image} />
</View>
))}
</Swiper>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
height: 150,
borderRadius: 15,
overflow: 'hidden',
// marginHorizontal:10
},
container: {
height: 150,
},
slide1: { justifyContent: "center", alignItems: "center" },
slide2: { justifyContent: "center", alignItems: "center" },
text: {
color: "#0a0a0a",
fontSize: 25,
fontWeight: "bold",
},
image: {
width: "100%",
height: '100%', // You can adjust the resizeMode as needed
margin:'auto'
},
});
export default SwiperCon;

90
app/components/main/home/TopCategories.js Normal file
View File

@ -0,0 +1,90 @@
import React from "react";
import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
const TopCategories = () => {
const cat = [
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-57-885-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-00-222-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-03-056-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-689-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-02-255-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-06-540-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-05-217-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-59-121-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Ship-building-Logistics-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Aggregates-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-102-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Travel-Tours-150x150.png",
"https://obanana.com/wp-content/uploads/2022/08/health-vector-150x150.png",
];
return (
<View style={styles.container}>
<Text style={styles.header}>
{" "}
TOP CATEGORIES
</Text>
<View style={{ flexDirection: "row" }}>
<FlatList
// inverted
// style={styles.wrapper}
horizontal
data={cat ? cat : []}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={() => {}}>
<View style={styles.AddUser}>
<Image
style={styles.img}
source={{
uri: item,
}}
/>
<Text
style={{
color: "#000",
fontSize: 10,
flexWrap: "wrap",
}}
></Text>
</View>
</TouchableOpacity>
);
}}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
// marginHorizontal: 10,
padding: 10,
// height: "87%",
},
wrapper: {
width: "100%",
height: 200,
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
img: {
width: 80,
height: 80,
resizeMode: "cover",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
});
export default TopCategories;

92
app/components/main/home/TopShops.js Normal file
View File

@ -0,0 +1,92 @@
import React from "react";
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
const TopShops = () => {
const cat = [
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-57-885-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-00-222-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-03-056-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-689-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-02-255-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-06-540-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-05-217-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-59-121-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Ship-building-Logistics-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Aggregates-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-102-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Travel-Tours-150x150.png",
"https://obanana.com/wp-content/uploads/2022/08/health-vector-150x150.png",
];
return (
<View style={styles.container}>
<Text style={styles.header}> TOP SHOPS</Text>
<View style={{ flexDirection: "row" }}>
<FlatList
horizontal
data={cat ? cat : []}
showsHorizontalScrollIndicator={false}
renderItem={({ item, i }) => {
return (
<TouchableOpacity key={i} onPress={() => {}}>
<View style={styles.AddUser}>
<Image
style={styles.img}
source={{
uri: item,
}}
/>
<Text
style={{
color: "#000",
fontSize: 10,
flexWrap: "wrap",
}}
></Text>
</View>
</TouchableOpacity>
);
}}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
// marginHorizontal: 10,
padding: 10,
// height: "87%",
},
wrapper: {
width: "100%",
height: 200,
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
img: {
width: 80,
height: 80,
resizeMode: "cover",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
});
export default TopShops;

32
app/components/main/notification/NotifCard.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react'
import { View,Text,StyleSheet } from 'react-native'
const NotifCard = () => {
return (
<View style={styles.container}><Text>Search</Text></View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
height: "100%",
justifyContent: "center",
alignItems: "center",
},
header: {
position: "fixed",
width:'100%',
top: 0,
},
footer: {
// position: "absolute",
bottom: 0,
width:'100%',
},
wrapper: {
height: "85%",
},
});
export default NotifCard

93
app/components/product/BottomNav.js Normal file
View File

@ -0,0 +1,93 @@
import React, { useState } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { faCartShopping, faStore } from "@fortawesome/free-solid-svg-icons";
import {
faBell,
faComment,
faComments,
faUserCircle,
} from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
const BottomNav = ({ settabActive, activeTab, setcartList, cartList,product }) => {
const navigation = useNavigation();
const tabSwitch = (e) => {
settabActive(e);
};
const addToCart = () => {
// Create a copy of the current cartList and add the new product
const updatedCart = [...cartList, product];
// Update the cartList state with the new cart array
setcartList(updatedCart);
};
return (
<View style={styles.container}>
<View style={styles.wrapper}>
<TouchableOpacity style={styles.button} onPress={() => addToCart()}>
{activeTab === "cart" ? (
<FontAwesomeIcon
icon={faCartShopping}
color={"#FFAA00"}
size={25}
/>
) : (
<FontAwesomeIcon
icon={faCartShopping}
color={"#888888"}
size={25}
/>
)}
</TouchableOpacity>
<TouchableOpacity
style={styles.button1}
onPress={() => navigation.navigate("CheckOut",{product})}
>
<Text style={styles.button1text}>Buy Now</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
bottom: 0,
// position: "fixed",
// paddingVertical: 15,
paddingBottom: 5,
boxShadow: "0px 0px 3px 0px rgba(0, 0, 0, 0.25)",
},
wrapper: {
flexDirection: "row",
width: "100%",
alignItems: "center",
justifyContent: "space-around",
margin: "auto",
borderTopColor: "#ddd",
paddingVertical: 5,
paddingBottom: 10,
borderTopWidth: 1,
},
button: {
padding: 15,
// paddingBottom: 25,
},
button1: {
padding: 15,
paddingHorizontal: 50,
backgroundColor: "#ffaa00",
color: "#fff",
// paddingBottom: 25,
},
button1text: {
color: "#fff",
fontWeight: "600",
},
});
export default BottomNav;

100
app/components/product/Variation.jsx Normal file
View File

@ -0,0 +1,100 @@
import React from "react";
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
const Variation = () => {
const cat = [
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-57-885-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-00-222-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-03-056-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-689-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-02-255-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-06-540-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-05-217-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-59-121-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Ship-building-Logistics-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Aggregates-150x150.png",
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-102-150x150.png",
"https://obanana.com/wp-content/uploads/2022/04/Travel-Tours-150x150.png",
"https://obanana.com/wp-content/uploads/2022/08/health-vector-150x150.png",
];
return (
<View style={styles.container}>
<Text style={styles.header}>Variation</Text>
<View style={{ flexDirection: "row" }}>
<FlatList
// inverted
// style={styles.wrapper}
horizontal
data={cat ? cat : []}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => {
return (
<TouchableOpacity onPress={() => {}}>
<View style={styles.AddUser}>
<Image
style={styles.img}
source={{
uri: item,
}}
/>
<Text
style={{
color: "#000",
fontSize: 10,
flexWrap: "wrap",
}}
></Text>
</View>
</TouchableOpacity>
);
}}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
// marginHorizontal: 10,
padding: 10,
// height: "87%",
},
wrapper: {
width: "100%",
height: 200,
// backgroundColor: "#ffaa00",
padding: 10,
},
header: {
fontSize: 14,
fontWeight: "700",
// textTransform: "uppercase",
paddingHorizontal:5
},
img: {
width: 80,
height: 80,
resizeMode: "cover",
borderRadius: 10,
backgroundColor: "#ffefce",
padding: 10,
},
AddUser: {
padding: 10,
},
});
export default Variation;

43
app/components/profile/Card.jsx Normal file
View File

@ -0,0 +1,43 @@
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const Card = ({ cart }) => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.subContent}
onPress={() => navigation.navigate(cart.nav)}
>
{cart.icon}
<Text style={styles.subContentText}>{cart.label}</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
width: 120,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
},
subContent: {
borderRadius:10,
width: "80%",
height:140,
margin:'auto',
alignItems: "center",
paddingTop:30
},
subContentText:{
marginTop:15,
color:'#777777',
textAlign:'center',
}
});
export default Card;

162
app/components/profile/my-favorite/ProductCard.jsx Normal file
View File

@ -0,0 +1,162 @@
import { faHeart, faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import CheckBox from 'expo-checkbox';
const ProductCard = ({ product, like, index,liked,all }) => {
const navigation = useNavigation();
console.log(product + "ProductCard" + "index: " + index);
const [isChecked, setIsChecked] = useState(false);
return (
<TouchableOpacity
activeOpacity={0.7}
style={styles.container}
onPress={() => navigation.navigate("Product", { product })}
>
<View style={styles.upper}>
<Image
style={{ width: "100%", height: 200, resizeMode: "cover" }}
source={{ uri: product?.img }}
/>
<View style={styles.heart}>
<CheckBox
value={liked.includes(index)|| all===true}
onValueChange={() => like(index)}
/>
</View>
</View>
<View style={{ padding: 10, backgroundColor: "#fff" }}>
<Text style={styles.text} numberOfLines={2}>
{product?.name}
</Text>
<View style={styles.priceCon}>
<Text
style={product?.promo ? styles.textPricePromo : styles.textPrice}
>
₱{product?.price}
</Text>
{product?.promo ? (
<Text style={styles.textPrice}>
{" "}
{product?.price - product?.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>(-{product?.promo}%)</Text>
</Text>
) : null}
</View>
<View style={styles.footer}>
<Text style={styles.textMin}>
min. order: {product?.min} {product?.per}
</Text>
<Text style={styles.textSold}>{product?.sold} sold</Text>
</View>
{product?.rate ? (
<View style={styles.rateCon}>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{product.rate} ({product?.raterTotal})
</Text>
</View>
) : null}
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
// backgroundColor: "#ff3333",
width: "95%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
overflow: "hidden",
},
wrapper: {
width: "100%",
// height: 200,
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
upper: {},
heart: {
position: "absolute",
top: 10,
right: 10,
height:20,
width:20
},
text: {
fontSize: 13,
fontWeight: "600",
textTransform: "capitalize",
color: "#333",
letterSpacing: 0.5,
},
priceCon: {
flexDirection: "row",
paddingVertical: 4,
},
textPrice: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: {
fontSize: 11,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
textSold: {
fontSize: 11,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
rateCon: {
flexDirection: "row",
// justifyContent:'center',
alignItems: "center",
paddingVertical: 3,
},
textRate: {
fontSize: 12,
color: "#838383",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
});
export default ProductCard;

239
app/components/profile/my-favorite/ShopCard.jsx Normal file
View File

@ -0,0 +1,239 @@
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Checkbox from "expo-checkbox";
const ShopCard = ({ product , like, index,liked,all}) => {
const navigation = useNavigation();
return (
<TouchableOpacity
activeOpacity={0.7}
style={styles.container}
onPress={() => navigation.navigate("Product", { product })}
>
<View style={styles.top}>
<View style={styles.heart}>
<Checkbox
value={liked.includes(index)|| all===true}
onValueChange={() => like(index)}
/>
</View>
<View style={styles.imgWrap}>
<Image
style={{ width: 80, height: 80, resizeMode: "cover" }}
source={{ uri: product?.logo }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={1}>
{product?.name}
</Text>
<View style={styles.rateCon}>
{product?.rate ? (
<>
<Text style={styles.textHead}>Rating: </Text>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{product?.rate} ({product?.raterTotal})
</Text>
</>
) : (
<Text>No rating </Text>
)}
</View>
<View style={styles.rateCon}>
{product?.respoTime ? (
<>
<Text style={styles.textHead}>Average Response Time: </Text>
<Text style={styles.textRate}>{product?.respoTime}hrs</Text>
</>
) : (
<Text>No rating </Text>
)}
</View>
<View style={styles.rateCon}>
{product?.respoTime ? (
<>
<Text style={styles.textHead}>Main Products: </Text>
{product?.tags.map((e, i) => (
<Text style={styles.textRate} key={i}>
{e},{" "}
</Text>
))}
</>
) : (
<Text>No rating </Text>
)}
</View>
</View>
<View style={styles.btnWrap}>
<TouchableOpacity style={styles.btnmess}>
<FontAwesomeIcon icon={faMessage} color={"#00C85C"} size={25} />
</TouchableOpacity>
</View>
</View>
<View style={styles.bot}>
<View style={styles.botWrap}>
{product?.images.map((e, i) => (
<Image
key={i}
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 10,
}}
source={{ uri: e }}
/>
))}
</View>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
width: "98%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
overflow: "hidden",
},
wrapper: {
width: "100%",
alignItems: "center",
justifyContent: "center",
},
top: {
width: "100%",
justifyContent: "space-between",
alignItems: "center",
height: 150,
flexDirection: "row",
backgroundColor: "#FFFFFF",
},
imgWrap: {
width: 80,
height: 80,
alignItems: "center",
justifyContent: "center",
marginLeft: 10,
},
heart: {
position: "absolute",
top: 10,
right: 10,
height:20,
width:20
},
btnWrap: {
width: 80,
height: 80,
// backgroundColor: "#ffaa00",
alignItems: "center",
justifyContent: "center",
},
btnmess: {
backgroundColor: "#74fab2",
padding: 15,
borderRadius: 10,
},
details: {
height: "100%",
justifyContent: "center",
// alignItems:'center'
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
text: {
fontSize: 15,
fontWeight: "900",
textTransform: "uppercase",
color: "#333",
letterSpacing: 0.5,
},
priceCon: {
flexDirection: "row",
paddingVertical: 4,
},
textPrice: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: {
fontSize: 11,
fontWeight: "600",
color: "#bdbdbd",
},
textSold: {
fontSize: 11,
fontWeight: "600",
color: "#bdbdbd",
},
rateCon: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 3,
},
textHead: {
fontSize: 11,
color: "#292929",
},
textRate: {
fontSize: 12,
color: "#838383",
textTransform: "capitalize",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
},
bot: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
paddingVertical: 10,
},
botWrap: {
width: "100%",
flexDirection: "row",
justifyContent: "space-around",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
});
export default ShopCard;

245
app/components/profile/my_purchases/CompletedCard.jsx Normal file
View File

@ -0,0 +1,245 @@
import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
const CompletedCard = ({ cart }) => {
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const deliveryDate = new Date(cart.deliveryDate);
const month = deliveryDate.toLocaleString("en-US", { month: "short" });
const day = deliveryDate.getDate();
const options = {
year: "numeric",
month: "short",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
};
const time = deliveryDate.toLocaleString("en-US", {
timeZone: "Asia/Manila",
...options,
});
// Format the day with leading zeros if needed (e.g., "01" instead of "1")
const formattedDay = day < 10 ? `0${day}` : day;
// Create the final formatted date string "Sept. 25"
const philippinesTime = `${month}. ${formattedDay} `;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.prodwrapper}>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name}
</Text>
<Text style={styles.text1} numberOfLines={2}>
Variant: pink
</Text>
<View style={styles.rateCon}>
{cart?.products[0]?.price ? (
<>
<View style={styles.priceCon}>
<Text
style={
cart?.products[0]?.promo
? styles.textPricePromo
: styles.textPrice
}
>
₱{cart?.products[0]?.price}
</Text>
{cart?.products[0]?.promo ? (
<Text style={styles.textPrice}>
{" "}
{cart?.products[0]?.price -
cart?.products[0]?.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>
(-{cart?.products[0]?.promo}%)
</Text>
</Text>
) : null}
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.text1} numberOfLines={2}>
Quantity: 2
</Text>
</View>
</View>
</View>
<View style={styles.totalCon}>
<View style={styles.total}></View>
<View style={styles.total}>
<Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text>
</View>
</View>
</View>
<View style={styles.cStatus}>
<Text style={styles.textStatusHeader}> Status: </Text>
<Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View>
<View style={styles.footer}>
<Text style={styles.footerDate}> {time} </Text>
<TouchableOpacity style={styles.rateBtn}>
<Text style={styles.rateText}> Rate It </Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// width: "95%",
margin: 5,
borderRadius: 10,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
// flexDirection: "row",
// padding: 10,
backgroundColor: "#ffffff",
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
top: 0,
padding: 10,
},
headerText: {
fontSize: 14,
fontWeight: "600",
},
headerStatusText: {
fontSize: 14,
fontWeight: "600",
textTransform: "uppercase",
color: "#ffaa00",
},
footer: {
// position: "absolute",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
bottom: 0,
width: "100%",
},
imgWrap: {
padding: 10,
},
wrapper: {
margin: 10,
marginBottom: 10,
},
prodwrapper: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
overflow: "hidden",
borderColor: "#dddd",
borderRadius: 10,
padding: 10,
},
priceCon: {
flexDirection: "row",
paddingVertical: 10,
},
textPrice: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
details: {
width: "80%",
},
text: {
fontSize: 13,
},
text1: {
fontSize: 10,
color: "#b4b4b4",
},
totalCon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
position: "relative",
// right: 0,
paddingTop: 10,
},
total: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
width: "35%",
position: "relative",
right: 0,
},
totalText: {
textAlign: "right",
},
cStatus: {
backgroundColor: "#7EFFBA",
// height: 40,
padding: 10,
flexDirection: "row",
// justifyContent: "space-between",
alignItems: "flex-end",
},
textStatusHeader: {
fontSize: 12,
fontWeight: "600",
color: "#007938",
},
textStatus: {
fontSize: 14,
fontWeight: "400",
color: "#007938",
},
rateBtn: {
borderWidth: 2,
overflow: "hidden",
borderColor: "#ffaa00",
borderRadius: 10,
padding: 5,
paddingHorizontal: 15,
margin: 10,
marginRight: 20,
},
rateText: {
fontWeight: "600",
color: "#ff3c00",
},
footerDate: {
fontSize: 11,
paddingLeft: 15,
color: "#747474",
},
});
export default CompletedCard;

247
app/components/profile/my_purchases/ToPay.jsx Normal file
View File

@ -0,0 +1,247 @@
import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
const ToPayCard = ({ cart }) => {
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const deliveryDate = new Date(cart.deliveryDate);
const month = deliveryDate.toLocaleString("en-US", { month: "short" });
const day = deliveryDate.getDate();
const options = {
year: "numeric",
month: "short",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
};
const time = deliveryDate.toLocaleString("en-US", {
timeZone: "Asia/Manila",
...options,
});
// Format the day with leading zeros if needed (e.g., "01" instead of "1")
const formattedDay = day < 10 ? `0${day}` : day;
// Create the final formatted date string "Sept. 25"
const philippinesTime = `${month}. ${formattedDay} `;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.prodwrapper}>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name}
</Text>
<Text style={styles.text1} numberOfLines={2}>
Variant: pink
</Text>
<View style={styles.rateCon}>
{cart?.products[0]?.price ? (
<>
<View style={styles.priceCon}>
<Text
style={
cart?.products[0]?.promo
? styles.textPricePromo
: styles.textPrice
}
>
₱{cart?.products[0]?.price}
</Text>
{cart?.products[0]?.promo ? (
<Text style={styles.textPrice}>
{" "}
{cart?.products[0]?.price -
cart?.products[0]?.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>
(-{cart?.products[0]?.promo}%)
</Text>
</Text>
) : null}
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.text1} numberOfLines={2}>
Quantity: 2
</Text>
</View>
</View>
</View>
<View style={styles.totalCon}>
<View style={styles.total}></View>
<View style={styles.total}>
<Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text>
</View>
</View>
</View>
{/* <View style={styles.cStatus}>
<Text style={styles.textStatusHeader}> Status: </Text>
<Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View> */}
<View style={styles.footer}>
<Text style={styles.footerDate}> </Text>
<TouchableOpacity style={styles.rateBtn}>
<Text style={styles.rateText}> Pay Now </Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// width: "95%",
margin: 5,
borderRadius: 10,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
// flexDirection: "row",
// padding: 10,
backgroundColor: "#ffffff",
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
top: 0,
padding: 10,
},
headerText: {
fontSize: 14,
fontWeight: "600",
},
headerStatusText: {
fontSize: 14,
fontWeight: "600",
textTransform: "uppercase",
color: "#ffaa00",
},
footer: {
// position: "absolute",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
bottom: 0,
width: "100%",
},
imgWrap: {
padding: 10,
},
wrapper: {
margin: 10,
marginBottom: 10,
},
prodwrapper: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
overflow: "hidden",
borderColor: "#dddd",
borderRadius: 10,
padding: 10,
},
priceCon: {
flexDirection: "row",
paddingVertical: 10,
},
textPrice: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
details: {
width: "80%",
},
text: {
fontSize: 13,
},
text1: {
fontSize: 10,
color: "#b4b4b4",
},
totalCon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
position: "relative",
// right: 0,
paddingTop: 10,
},
total: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
width: "35%",
position: "relative",
right: 0,
},
totalText: {
textAlign: "right",
},
cStatus: {
backgroundColor: "#7EFFBA",
// height: 40,
padding: 10,
flexDirection: "row",
// justifyContent: "space-between",
alignItems: "flex-end",
},
textStatusHeader: {
fontSize: 12,
fontWeight: "600",
color: "#007938",
},
textStatus: {
fontSize: 14,
fontWeight: "400",
color: "#007938",
},
rateBtn: {
borderWidth: 2,
overflow: "hidden",
backgroundColor: "#ffaa00",
borderColor:'#ffaa00',
borderRadius: 10,
padding: 10,
paddingHorizontal: 15,
margin: 10,
marginRight: 20,
},
rateText: {
fontWeight: "600",
color: "#ffffff",
},
footerDate: {
fontSize: 11,
paddingLeft: 15,
color:'#747474'
},
});
export default ToPayCard;

258
app/components/profile/my_purchases/ToReceive.jsx Normal file
View File

@ -0,0 +1,258 @@
import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
const ToReceiveCard = ({ cart }) => {
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const expectedDeliveryDateMin = new Date(cart.expectedDeliveryDateMin);
const month = expectedDeliveryDateMin.toLocaleString("en-US", { month: "short" });
const day = expectedDeliveryDateMin.getDate();
const options = {
year: "numeric",
month: "short",
day: "2-digit",
};
const options2 = {
month: "short",
day: "2-digit",
};
const time = expectedDeliveryDateMin.toLocaleString("en-US", {
timeZone: "Asia/Manila",
...options2,
});
const expectedDeliveryDateMax = new Date(cart.expectedDeliveryDateMax);
const time2 = expectedDeliveryDateMax.toLocaleString("en-US", {
timeZone: "Asia/Manila",
...options,
});
// Format the day with leading zeros if needed (e.g., "01" instead of "1")
const formattedDay = day < 10 ? `0${day}` : day;
// Create the final formatted date string "Sept. 25"
const philippinesTime = `${month}. ${formattedDay} `;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.prodwrapper}>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name}
</Text>
<Text style={styles.text1} numberOfLines={2}>
Variant: pink
</Text>
<View style={styles.rateCon}>
{cart?.products[0]?.price ? (
<>
<View style={styles.priceCon}>
<Text
style={
cart?.products[0]?.promo
? styles.textPricePromo
: styles.textPrice
}
>
₱{cart?.products[0]?.price}
</Text>
{cart?.products[0]?.promo ? (
<Text style={styles.textPrice}>
{" "}
{cart?.products[0]?.price -
cart?.products[0]?.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>
(-{cart?.products[0]?.promo}%)
</Text>
</Text>
) : null}
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.text1} numberOfLines={2}>
Quantity: 2
</Text>
</View>
</View>
</View>
<View style={styles.totalCon}>
<View style={styles.total}></View>
<View style={styles.total}>
<Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text>
</View>
</View>
</View>
<View style={styles.cStatus}>
<Text style={styles.textStatusHeader}> Status: </Text>
<Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View>
<View style={styles.footer}>
<Text style={styles.footerDate}>Receive by: {time} - {time2} </Text>
<TouchableOpacity style={styles.rateBtn}>
<Text style={styles.rateText}></Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// width: "95%",
margin: 5,
borderRadius: 10,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
// flexDirection: "row",
// padding: 10,
backgroundColor: "#ffffff",
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
top: 0,
padding: 10,
},
headerText: {
fontSize: 14,
fontWeight: "600",
},
headerStatusText: {
fontSize: 14,
fontWeight: "600",
textTransform: "uppercase",
color: "#ffaa00",
},
footer: {
// position: "absolute",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
bottom: 0,
width: "100%",
},
imgWrap: {
padding: 10,
},
wrapper: {
margin: 10,
marginBottom: 10,
},
prodwrapper: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
overflow: "hidden",
borderColor: "#dddd",
borderRadius: 10,
padding: 10,
},
priceCon: {
flexDirection: "row",
paddingVertical: 10,
},
textPrice: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
details: {
width: "80%",
},
text: {
fontSize: 13,
},
text1: {
fontSize: 10,
color: "#b4b4b4",
},
totalCon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
position: "relative",
// right: 0,
paddingTop: 10,
},
total: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
width: "35%",
position: "relative",
right: 0,
},
totalText: {
textAlign: "right",
},
cStatus: {
backgroundColor: "#7EFFBA",
// height: 40,
padding: 10,
flexDirection: "row",
// justifyContent: "space-between",
alignItems: "flex-end",
},
textStatusHeader: {
fontSize: 12,
fontWeight: "600",
color: "#007938",
},
textStatus: {
fontSize: 14,
fontWeight: "400",
color: "#007938",
},
rateBtn: {
borderWidth: 2,
overflow: "hidden",
borderColor: "#ffffff",
borderRadius: 10,
padding: 5,
paddingHorizontal: 15,
margin: 10,
marginRight: 20,
},
rateText: {
fontWeight: "600",
color: "#ff3c00",
},
footerDate: {
fontSize: 11,
paddingLeft: 15,
color:'#747474'
},
});
export default ToReceiveCard;

255
app/components/profile/my_purchases/ToShip.jsx Normal file
View File

@ -0,0 +1,255 @@
import React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
const ToShipCard = ({ cart }) => {
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const expectedShippingStartDateMin = new Date(cart.expectedShippingStartDateMin);
const month = expectedShippingStartDateMin.toLocaleString("en-US", { month: "short" });
const day = expectedShippingStartDateMin.getDate();
const options = {
year: "numeric",
month: "short",
day: "2-digit",
};
const options2 = {
month: "short",
day: "2-digit",
};
const time = expectedShippingStartDateMin.toLocaleString("en-US", {
timeZone: "Asia/Manila",
...options2,
});
const expectedShippingStartDateMax = new Date(cart.expectedShippingStartDateMax);
const time2 = expectedShippingStartDateMax.toLocaleString("en-US", {
timeZone: "Asia/Manila",
...options,
});
// Format the day with leading zeros if needed (e.g., "01" instead of "1")
const formattedDay = day < 10 ? `0${day}` : day;
// Create the final formatted date string "Sept. 25"
const philippinesTime = `${month}. ${formattedDay} `;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.prodwrapper}>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name}
</Text>
<Text style={styles.text1} numberOfLines={2}>
Variant: pink
</Text>
<View style={styles.rateCon}>
{cart?.products[0]?.price ? (
<>
<View style={styles.priceCon}>
<Text
style={
cart?.products[0]?.promo
? styles.textPricePromo
: styles.textPrice
}
>
₱{cart?.products[0]?.price}
</Text>
{cart?.products[0]?.promo ? (
<Text style={styles.textPrice}>
{" "}
{cart?.products[0]?.price -
cart?.products[0]?.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>
(-{cart?.products[0]?.promo}%)
</Text>
</Text>
) : null}
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.text1} numberOfLines={2}>
Quantity: 2
</Text>
</View>
</View>
</View>
<View style={styles.totalCon}>
<View style={styles.total}></View>
<View style={styles.total}>
<Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text>
</View>
</View>
</View>
<View style={styles.cStatus}>
<Text style={styles.textStatusHeader}> Status: </Text>
<Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View>
<View style={styles.footer}>
<Text style={styles.footerDate}>Ship by: {time} - {time2} </Text>
<TouchableOpacity style={styles.rateBtn}>
<Text style={styles.rateText}> </Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// width: "95%",
margin: 5,
borderRadius: 10,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
// flexDirection: "row",
// padding: 10,
backgroundColor: "#ffffff",
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
top: 0,
padding: 10,
},
headerText: {
fontSize: 14,
fontWeight: "600",
},
headerStatusText: {
fontSize: 14,
fontWeight: "600",
textTransform: "uppercase",
color: "#ffaa00",
},
footer: {
// position: "absolute",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
bottom: 0,
width: "100%",
},
imgWrap: {
padding: 10,
},
wrapper: {
margin: 10,
marginBottom: 10,
},
prodwrapper: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
overflow: "hidden",
borderColor: "#dddd",
borderRadius: 10,
padding: 10,
},
priceCon: {
flexDirection: "row",
paddingVertical: 10,
},
textPrice: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
details: {
width: "80%",
},
text: {
fontSize: 13,
},
text1: {
fontSize: 10,
color: "#b4b4b4",
},
totalCon: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
position: "relative",
// right: 0,
paddingTop: 10,
},
total: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-end",
width: "35%",
position: "relative",
right: 0,
},
totalText: {
textAlign: "right",
},
cStatus: {
backgroundColor: "#7EFFBA",
// height: 40,
padding: 10,
flexDirection: "row",
// justifyContent: "space-between",
alignItems: "flex-end",
},
textStatusHeader: {
fontSize: 12,
fontWeight: "600",
color: "#007938",
},
textStatus: {
fontSize: 14,
fontWeight: "400",
color: "#007938",
},
rateBtn: {
borderWidth: 2,
overflow: "hidden",
borderColor: "#fffefd",
borderRadius: 10,
padding: 5,
paddingHorizontal: 15,
margin: 10,
marginRight: 20,
},
rateText: {
fontWeight: "600",
color: "#ff3c00",
},
footerDate: {
fontSize: 11,
paddingLeft: 15,
color:'#747474'
},
});
export default ToShipCard;

162
app/components/profile/view-history/ProductCard.jsx Normal file
View File

@ -0,0 +1,162 @@
import { faHeart, faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import CheckBox from 'expo-checkbox';
const ProductCard = ({ product, like, index,liked,all }) => {
const navigation = useNavigation();
console.log(product + "ProductCard" + "index: " + index);
const [isChecked, setIsChecked] = useState(false);
return (
<TouchableOpacity
activeOpacity={0.7}
style={styles.container}
onPress={() => navigation.navigate("Product", { product })}
>
<View style={styles.upper}>
<Image
style={{ width: "100%", height: 200, resizeMode: "cover" }}
source={{ uri: product?.img }}
/>
<View style={styles.heart}>
<CheckBox
value={liked.includes(index)|| all===true}
onValueChange={() => like(index)}
/>
</View>
</View>
<View style={{ padding: 10, backgroundColor: "#fff" }}>
<Text style={styles.text} numberOfLines={2}>
{product?.name}
</Text>
<View style={styles.priceCon}>
<Text
style={product?.promo ? styles.textPricePromo : styles.textPrice}
>
₱{product?.price}
</Text>
{product?.promo ? (
<Text style={styles.textPrice}>
{" "}
{product?.price - product?.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>(-{product?.promo}%)</Text>
</Text>
) : null}
</View>
<View style={styles.footer}>
<Text style={styles.textMin}>
min. order: {product?.min} {product?.per}
</Text>
<Text style={styles.textSold}>{product?.sold} sold</Text>
</View>
{product?.rate ? (
<View style={styles.rateCon}>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{product.rate} ({product?.raterTotal})
</Text>
</View>
) : null}
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
// backgroundColor: "#ff3333",
width: "95%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
overflow: "hidden",
},
wrapper: {
width: "100%",
// height: 200,
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
upper: {},
heart: {
position: "absolute",
top: 10,
right: 10,
height:20,
width:20
},
text: {
fontSize: 13,
fontWeight: "600",
textTransform: "capitalize",
color: "#333",
letterSpacing: 0.5,
},
priceCon: {
flexDirection: "row",
paddingVertical: 4,
},
textPrice: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: {
fontSize: 11,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
textSold: {
fontSize: 11,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
rateCon: {
flexDirection: "row",
// justifyContent:'center',
alignItems: "center",
paddingVertical: 3,
},
textRate: {
fontSize: 12,
color: "#838383",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
});
export default ProductCard;

239
app/components/profile/view-history/ShopCard.jsx Normal file
View File

@ -0,0 +1,239 @@
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Checkbox from "expo-checkbox";
const ShopCard = ({ product , like, index,liked,all}) => {
const navigation = useNavigation();
return (
<TouchableOpacity
activeOpacity={0.7}
style={styles.container}
onPress={() => navigation.navigate("Product", { product })}
>
<View style={styles.top}>
<View style={styles.heart}>
<Checkbox
value={liked.includes(index)|| all===true}
onValueChange={() => like(index)}
/>
</View>
<View style={styles.imgWrap}>
<Image
style={{ width: 80, height: 80, resizeMode: "cover" }}
source={{ uri: product?.logo }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={1}>
{product?.name}
</Text>
<View style={styles.rateCon}>
{product?.rate ? (
<>
<Text style={styles.textHead}>Rating: </Text>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{product?.rate} ({product?.raterTotal})
</Text>
</>
) : (
<Text>No rating </Text>
)}
</View>
<View style={styles.rateCon}>
{product?.respoTime ? (
<>
<Text style={styles.textHead}>Average Response Time: </Text>
<Text style={styles.textRate}>{product?.respoTime}hrs</Text>
</>
) : (
<Text>No rating </Text>
)}
</View>
<View style={styles.rateCon}>
{product?.respoTime ? (
<>
<Text style={styles.textHead}>Main Products: </Text>
{product?.tags.map((e, i) => (
<Text style={styles.textRate} key={i}>
{e},{" "}
</Text>
))}
</>
) : (
<Text>No rating </Text>
)}
</View>
</View>
<View style={styles.btnWrap}>
<TouchableOpacity style={styles.btnmess}>
<FontAwesomeIcon icon={faMessage} color={"#00C85C"} size={25} />
</TouchableOpacity>
</View>
</View>
<View style={styles.bot}>
<View style={styles.botWrap}>
{product?.images.map((e, i) => (
<Image
key={i}
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 10,
}}
source={{ uri: e }}
/>
))}
</View>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
width: "98%",
margin: 5,
borderRadius: 6,
borderColor: "#dddd",
overflow: "hidden",
},
wrapper: {
width: "100%",
alignItems: "center",
justifyContent: "center",
},
top: {
width: "100%",
justifyContent: "space-between",
alignItems: "center",
height: 150,
flexDirection: "row",
backgroundColor: "#FFFFFF",
},
imgWrap: {
width: 80,
height: 80,
alignItems: "center",
justifyContent: "center",
marginLeft: 10,
},
heart: {
position: "absolute",
top: 10,
right: 10,
height:20,
width:20
},
btnWrap: {
width: 80,
height: 80,
// backgroundColor: "#ffaa00",
alignItems: "center",
justifyContent: "center",
},
btnmess: {
backgroundColor: "#74fab2",
padding: 15,
borderRadius: 10,
},
details: {
height: "100%",
justifyContent: "center",
// alignItems:'center'
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
text: {
fontSize: 15,
fontWeight: "900",
textTransform: "uppercase",
color: "#333",
letterSpacing: 0.5,
},
priceCon: {
flexDirection: "row",
paddingVertical: 4,
},
textPrice: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: {
fontSize: 11,
fontWeight: "600",
color: "#bdbdbd",
},
textSold: {
fontSize: 11,
fontWeight: "600",
color: "#bdbdbd",
},
rateCon: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 3,
},
textHead: {
fontSize: 11,
color: "#292929",
},
textRate: {
fontSize: 12,
color: "#838383",
textTransform: "capitalize",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
},
bot: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
paddingVertical: 10,
},
botWrap: {
width: "100%",
flexDirection: "row",
justifyContent: "space-around",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
});
export default ShopCard;

99
app/components/search/Header.jsx Normal file
View File

@ -0,0 +1,99 @@
import { faArrowLeft, faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useRef, useState } from "react";
import {
Image,
KeyboardAvoidingView,
StyleSheet,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import obn from "../../../assets/obn.png";
const SearchHeader = ({ unfocus }) => {
const [searchKeyword, setsearchKeyword] = useState("");
const navigation = useNavigation();
console.log(searchKeyword);
const Search = (e) => {
setsearchKeyword(e);
};
const textInputRef = useRef(null);
useEffect(() => {
focusTextInput();
}, []);
useEffect(() => {
unfocusTextInput();
}, [unfocus]);
const focusTextInput = () => {
if (textInputRef.current) {
textInputRef.current.focus();
}
};
const unfocusTextInput = () => {
if (textInputRef.current) {
textInputRef.current.blur();
}
};
return (
<View style={styles.container}>
<View style={styles.wrapper}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<TextInput
style={styles.input}
ref={textInputRef}
autoFocus={true}
placeholder="Search product or vendorss"
placeholderTextColor="#a5a5a5"
onChangeText={(e) => Search(e)}
/>
<FontAwesomeIcon icon={faSearch} color={"#888888"} size={25} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
width: "100%",
// top: 0,
// position: "fixed",
paddingVertical: 15,
paddingTop: 5,
// height:80
// boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)'
},
wrapper: {
flexDirection: "row",
width: "95%",
alignItems: "center",
justifyContent: "space-around",
margin: "auto",
},
button: {
padding: 15,
},
imgLogo: {
height: 30,
width: 30,
},
input: {
backgroundColor: "#f5f5f5dd",
padding: 10,
paddingHorizontal: 20,
borderRadius: 10,
width: "70%",
},
});
export default SearchHeader;

181
app/constants/checkout.js Normal file
View File

@ -0,0 +1,181 @@
export const checkOut = [
{
shopname: "Tecnic Inc",
products: [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 30,
rate: 4.2,
raterTotal: 200,
shopId: "TecNic Inc.",
},
// Add more products here
],
status: "completed",
currentStatus: "the parcel has been delivered",
shippingFee: 50,
shippingStartDate: "2023-09-20T10:00:00Z", // Replace with the actual shipping start date and time in UTC
deliveryDate: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedShippingStartDateMin: "2023-09-19T10:00:00Z", // Replace with the actual shipping start date and time in UTC
expectedShippingStartDateMax: "2023-09-21T10:00:00Z",
expectedDeliveryDateMin: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedDeliveryDateMax: "2023-09-27T15:30:00Z", // Replace with the actual delivery date and time in UTC
},
{
shopname: "Tecnic Inc",
products: [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 30,
rate: 4.2,
raterTotal: 200,
shopId: "TecNic Inc.",
},
// Add more products here
],
status: "completed",
currentStatus: "the parcel has been delivered",
shippingFee: 50,
shippingStartDate: "2023-09-20T10:00:00Z", // Replace with the actual shipping start date and time in UTC
deliveryDate: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedShippingStartDateMin: "2023-09-19T10:00:00Z", // Replace with the actual shipping start date and time in UTC
expectedShippingStartDateMax: "2023-09-21T10:00:00Z",
expectedDeliveryDateMin: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedDeliveryDateMax: "2023-09-27T15:30:00Z", // Replace with the actual delivery date and time in UTC
},
{
shopname: "Tecnic Inc",
products: [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 30,
rate: 4.2,
raterTotal: 200,
shopId: "TecNic Inc.",
},
// Add more products here
],
status: "completed",
currentStatus: "the parcel has been delivered",
shippingFee: 50,
shippingStartDate: "2023-09-20T10:00:00Z", // Replace with the actual shipping start date and time in UTC
deliveryDate: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedShippingStartDateMin: "2023-09-19T10:00:00Z", // Replace with the actual shipping start date and time in UTC
expectedShippingStartDateMax: "2023-09-21T10:00:00Z",
expectedDeliveryDateMin: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedDeliveryDateMax: "2023-09-27T15:30:00Z", // Replace with the actual delivery date and time in UTC
},
{
shopname: "Tecnic Inc",
products: [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 30,
rate: 4.2,
raterTotal: 200,
shopId: "TecNic Inc.",
},
// Add more products here
],
status: "to receive",
currentStatus: "the parcel has been received by the delivery courier",
shippingFee: 50,
shippingStartDate: "2023-09-20T10:00:00Z", // Replace with the actual shipping start date and time in UTC
deliveryDate: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedShippingStartDateMin: "2023-09-19T10:00:00Z", // Replace with the actual shipping start date and time in UTC
expectedShippingStartDateMax: "2023-09-21T10:00:00Z",
expectedDeliveryDateMin: "2023-09-25T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedDeliveryDateMax: "2023-09-27T15:30:00Z", // Replace with the actual delivery date and time in UTC
},
{
shopname: "Shop B",
products: [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Product 1",
price: 150,
min: 10,
per: "pieces",
sold: 120,
promo: 15,
rate: 4.5,
raterTotal: 150,
shopId: "Shop B",
},
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Product 2",
price: 100,
min: 5,
per: "pieces",
sold: 80,
promo: 10,
rate: 4.0,
raterTotal: 100,
shopId: "Shop B",
},
// Add more products for Shop B here
],
status: "to pay",
currentStatus: "",
shippingFee: 80,
},
{
shopname: "Shop C",
products: [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Product 3",
price: 120,
min: 8,
per: "pieces",
sold: 90,
promo: 12,
rate: 4.3,
raterTotal: 110,
shopId: "Shop C",
},
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Product 4",
price: 90,
min: 5,
per: "pieces",
sold: 60,
promo: 8,
rate: 4.7,
raterTotal: 70,
shopId: "Shop C",
},
// Add more products for Shop C here
],
status: "to ship",
currentStatus: "the seller is preparing to ship the parcel",
shippingFee: 70,
shippingStartDate: "2023-09-22T14:45:00Z", // Replace with the actual shipping start date and time in UTC
expectedShippingStartDateMin: "2023-09-19T10:00:00Z", // Replace with the actual shipping start date and time in UTC
expectedShippingStartDateMax: "2023-09-21T10:00:00Z",
expectedDeliveryDateMin: "2023-09-22T15:30:00Z", // Replace with the actual delivery date and time in UTC
expectedDeliveryDateMax: "2023-09-27T15:30:00Z", // Replace with the actual delivery date and time in UTC
},
];

69
app/constants/favorites.js Normal file
View File

@ -0,0 +1,69 @@
export const favorite = [
{
type: "products",
contents: [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 30,
rate: 4.2,
raterTotal: 200,
shopId: "TecNic Inc.",
},
{
img: "https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
rate: 4.2,
raterTotal: 10,
shopId: "Obanana",
},
],
},
{
type: "vendors",
contents: [
{
logo: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "TecNic Inc.",
price: 200,
min: 20,
per: "pieces",
verified: true,
respoTime: 2,
tags: ["bag", "Jar", "Clothings"],
rate: 4.2,
raterTotal: 200,
images: [
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
],
},
{
logo: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "TecNic Inc.",
price: 200,
min: 20,
per: "pieces",
verified: true,
respoTime: 2,
tags: ["bag", "Jar", "Clothings"],
rate: 4.2,
raterTotal: 200,
images: [
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
],
},
],
},
];

123
app/constants/product.js Normal file
View File

@ -0,0 +1,123 @@
export const products = [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 30,
rate: 4.2,
raterTotal: 200,
shopId: "TecNic Inc.",
},
{
img: "https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
rate: 4.2,
raterTotal: 10,
shopId: "Obanana",
},
{
img: "https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
shopId: "TecNic Inc.",
},
{
img: "https://cf.shopee.ph/file/31526e8a4bec6cc3fab6ffb3b2d944a7",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
rate: 4.2,
raterTotal: 200,
shopId: "Gugol Corp.",
},
{
img: "https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 80,
rate: 4.8,
raterTotal: 20,
shopId: "TecNic Inc.",
},
{
img: "https://cdn.thewirecutter.com/wp-content/media/2022/09/backpacks-2048px.jpg",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
shopId: "Riz Shop",
},
{
img: "https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
name: "product 1 lorem ipsum d wem jbwugwb uwfiwdgdsufwbf",
price: 200,
min: 20,
per: "pieces",
sold: 340,
shopId: "Gugol Corp.",
},
{
img: "https://img.freepik.com/premium-psd/thumbler-mockup_419809-150.jpg",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
rate: 4.2,
raterTotal: 200,
shopId: "TecNic Inc.",
},
{
img: "https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
shopId: "San Gig Shop",
},
{
img: "https://cf.shopee.ph/file/38b14cd1219c7f3cd87fe386595b53cd",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
shopId: "TecNic Inc.",
},
{
img: "https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
shopId: "TecNic Inc.",
},
{
img: "https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
name: "product 1",
price: 200,
min: 20,
per: "pieces",
sold: 340,
shopId: "Riz Shop",
},
];

0
app/constants/sharedElements.js Normal file
View File

7
app/index.js Normal file
View File

@ -0,0 +1,7 @@
import { Redirect } from "expo-router";
import { useState, useEffect } from "react";
export default function Index() {
return <Redirect href="home" />;
}
// "react-native-svg": "13.4.0",

190
app/pages/checkout/AddressSelection.jsx Normal file
View File

@ -0,0 +1,190 @@
import { faArrowLeft, faCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native";
import React, { useState } from "react";
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Accordion from "../../components/checkout/Accordion";
const width = Dimensions.get("window").width;
const AddressSelection = () => {
const navigation = useNavigation();
const [selected, setselected] = useState(0);
const route = useRoute();
const { product, shipMethod, payMethod } = route.params;
const Address = [
{
address: "Blk 2 Wall St. Harang, Makati City",
recipient: "Juan Dela Cruz",
number: "09123456789",
},
{
address: "123 Wait St. Dahil, Makati City",
recipient: "San Dali Lang",
number: "09234567890",
},
];
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() =>
navigation.navigate("CheckOut", {
shipMethod: shipMethod,
product,
payMethod,
})
}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Select Address</Text>
</View>
<View style={styles.wrapper}>
{Address?.map((add, i) => (
<TouchableOpacity
key={i}
style={styles.listItem}
onPress={() => setselected(i)}
>
<View style={styles.listleft}>
<View style={styles.listtop}>
<Text style={styles.listItemText}>Recipient: </Text>
<Text style={styles.listItemTextPrice}>
{add.recipient}, {add.number}
</Text>
</View>
<Text style={styles.listItemText}>Address:</Text>
<Text style={styles.listItemTexteta} numberOfLines={4}>
{" "}
{add.address}
</Text>
</View>
{selected === i ? (
<FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} />
) : null}
</TouchableOpacity>
))}
</View>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() =>
navigation.navigate("CheckOut", {
shipMethod: selected ? selected : shipMethod,
product,
payMethod,
address: Address[selected],
})
}
>
<Text style={styles.footerBtnText}>Confirm</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fafafa",
height: "100%",
width: width,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
backgroundColor: "#ffffff",
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
headerWrap: {
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
// flexDirection: "row",
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
paddingVertical: 10,
justifyContent: "center",
alignItems: "center",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
},
wrapper: {
// height: "85%",
paddingTop: 25,
width: "100%",
// justifyContent: "center",
alignItems: "center",
// height: "100%",
},
content: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
listItem: {
backgroundColor: "#ffffff",
width: "100%",
borderWidth: 1,
borderColor: "#ececec",
padding: 15,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
listleft: {},
listtop: {
flexDirection: "row",
paddingBottom: 10,
},
listItemText: {
fontSize: 16,
fontWeight: "600",
},
listItemTextPrice: {
fontSize: 16,
fontWeight: "600",
color: "#696969",
marginLeft: 10,
},
listItemTexteta: {
fontSize: 14,
marginTop: 5,
fontWeight: "500",
color: "#818181",
marginLeft: 10,
},
});
export default AddressSelection;

366
app/pages/checkout/CheckOut.jsx Normal file
View File

@ -0,0 +1,366 @@
import { faAngleRight, faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
View,
Text,
StyleSheet,
TouchableOpacity,
TextInput,
Image,
} from "react-native";
const CheckOut = () => {
//NOTE !!!! must pass the update product details to the shipping option and payment method page!!!! to prevent error
const [message, setmessage] = useState("");
const [shippingMethod, setshippingMethod] = useState(
"select shipping method"
);
const [paymentMethod, setpaymentMethod] = useState("select shipping method");
const [recipientDetails, setrecipientDetails] = useState([]);
const navigation = useNavigation();
const route = useRoute();
const { product, shipMethod, payMethod, address } = route.params;
useEffect(() => {
setshippingMethod(shipMethod ?? "select shipping method");
}, [shipMethod]);
useEffect(() => {
setpaymentMethod(payMethod ?? "select payment method");
}, [payMethod]);
useEffect(() => {
setrecipientDetails(address ?? null);
}, [address]);
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>CheckOut</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.content}>
<View style={styles.subContent1}>
<Text style={styles.subContentText}>
<Text style={styles.subContentTexthead}>{product.shopId}</Text>
</Text>
<View style={styles.card}>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: product.img }}
/>
</View>
<View style={styles.wrapper}>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{product.name}
</Text>
<View style={styles.rateCon}>
{product.price ? (
<>
<View style={styles.priceCon}>
<Text
style={
product.promo
? styles.textPricePromo
: styles.textPrice
}
>
₱{product.price}
</Text>
{product.promo ? (
<Text style={styles.textPrice}>
{" "}
{product.price - product.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>
(-{product.promo}%)
</Text>
</Text>
) : null}
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.qty}>2 qty </Text>
</View>
</View>
</View>
</View>
</View>
<TouchableOpacity
style={styles.subContent}
onPress={() =>
navigation.navigate("AddressSelection", {
product,
shipMethod: shippingMethod,
payMethod: paymentMethod,
address: recipientDetails,
})
}
>
<Text style={styles.subContentText}>DELIVERY ADDRESS</Text>
<View style={styles.add}>
<Text style={styles.addText} numberOfLines={4}>
{recipientDetails !== null
? `${recipientDetails.recipient}, ${recipientDetails.number} ${recipientDetails.address}`
: "select address"}
</Text>
</View>
<FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
</TouchableOpacity>
<TouchableOpacity
style={styles.subContent}
onPress={() =>
navigation.navigate("ShippingOption", {
product,
shipMethod: shippingMethod,
payMethod: paymentMethod,
address: recipientDetails,
})
}
>
<Text style={styles.subContentText}>SHIPPING OPTION</Text>
<View style={styles.wallet}>
<Text style={styles.addText}>{shippingMethod}</Text>
</View>
<FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
</TouchableOpacity>
<View style={styles.subContent}>
<Text style={styles.subContentText}>MESSAGE</Text>
<TextInput
style={styles.input}
onChangeText={() => setmessage()}
value={message}
numberOfLines={2}
placeholder="write a message"
/>
</View>
<TouchableOpacity style={styles.subContent}>
<Text style={styles.subContentText}>ORDER TOTAL</Text>
<Text style={styles.addText}>₱{product.price}</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.subContent}
onPress={() =>
navigation.navigate("Paymentoption", {
product,
shipMethod: shippingMethod,
payMethod: paymentMethod,
address: recipientDetails,
})
}
>
<Text style={styles.subContentText}>PAYMENT OPTION</Text>
<View style={styles.wallet}>
<Text style={styles.addText}>{paymentMethod}</Text>
</View>
<FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
</TouchableOpacity>
<View style={styles.subContent1}>
<Text style={styles.subContentText}>PAYMENT DETAILS</Text>
<View style={styles.payCon}>
<View style={styles.subContent2}>
<Text style={styles.subContentText2}>
Merchandise Sub Total:
</Text>
<Text style={styles.subContentTexthead}>₱{product.price}</Text>
</View>
<View style={styles.subContent2}>
<Text style={styles.subContentText2}>Shipping:</Text>
<Text style={styles.subContentTexthead}>₱50</Text>
</View>
<View style={styles.subContent2}>
<Text style={styles.subContentText2}>Total: </Text>
<Text style={styles.subContentTexthead}>
₱{product.price + 50}
</Text>
</View>
</View>
</View>
</View>
</View>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() => navigation.navigate("Home")}
>
<Text style={styles.footerBtnText}>Order Now</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
height: "100%",
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
add: {
width: "50%",
},
input: {
width: "60%",
},
wallet: {
// width: '50%'
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
paddingVertical: 10,
justifyContent: "center",
alignItems: "center",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
},
wrapper: {
// height: "85%",
width: "100%",
height: "100%",
},
content: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
subContent: {
width: "98%",
justifyContent: "space-between",
flexDirection: "row",
alignItems: "center",
padding: 10,
// height: 60,
borderColor: "#f0f0f0dd",
borderWidth: 1,
},
subContent1: {
width: "98%",
justifyContent: "center",
// flexDirection: "row",
// alignItems: "center",
padding: 15,
// height: 60,
borderColor: "#f0f0f0dd",
borderWidth: 1,
},
subContent2: {
width: "98%",
justifyContent: "space-between",
flexDirection: "row",
// alignItems: "center",
padding: 10,
// height: 60,
borderColor: "#f0f0f0dd",
// borderWidth: 1,
},
subContentText: {
fontWeight: "600",
color: "#494949",
},
subContentText2: {
width: "90%",
flexDirection: "row",
justifyContent: "space-between",
// backgroundColor: "#b8141433",
},
subContentTexthead: {
fontWeight: "600",
color: "#000000",
},
addText: {
color: "#5f5f5f",
textAlign:'left'
},
imgWrap: {
padding: 10,
},
card: {
height: 80,
flexDirection: "row",
// justifyContent: "center",
alignItems: "center",
borderColor: "#f0f0f0dd",
borderWidth: 1,
padding: 10,
marginTop: 10,
},
payCon: {
width: "80%",
},
priceCon: {
flexDirection: "row",
paddingVertical: 10,
},
rateCon:{
width:'75%',
flexDirection: "row",
justifyContent:'space-between',
alignItems: "center",
},
qty:{
fontSize: 14,
color: "#5f5f5f",
},
textPrice: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
details: {
// width: "50%",
},
text: {
fontSize: 14,
fontWeight:'500',
width:'75%'
},
});
export default CheckOut;

167
app/pages/checkout/Paymentoption.jsx Normal file
View File

@ -0,0 +1,167 @@
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native";
import React from "react";
import { useState } from "react";
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Accordion from "../../components/checkout/Accordion";
const width = Dimensions.get("window").width;
const Paymentoption = () => {
const navigation = useNavigation();
const [selected, setselected] = useState("Visa");
const [selectedFinal, setselectedFinal] = useState("Visa");
const route = useRoute();
const { product, shipMethod, payMethod, address } = route.params;
const paymentMethods = [
{
type: "Credit Card",
methods: [
{
methodName: "Visa",
methodID: "visa123",
},
{
methodName: "MasterCard",
methodID: "mastercard456",
},
],
},
{
type: "Digital Wallet",
methods: [
{
methodName: "PayPal",
methodID: "paypal789",
},
{
methodName: "Apple Pay",
methodID: "applepay987",
},
],
},
{
type: "Bank Transfer",
methods: [
{
methodName: "Chase Bank",
methodID: "chase789",
},
],
},
// Add more payment method types and methods as needed
];
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() =>
navigation.navigate("CheckOut", {
shipMethod: shipMethod,
product,
payMethod: payMethod,
address,
})
}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Payment Options</Text>
</View>
<View style={styles.wrapper}>
<Accordion
sections={paymentMethods}
sel={selected}
selected={setselected}
/>
</View>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() =>
navigation.navigate("CheckOut", {
shipMethod: shipMethod,
product,
payMethod: selected ? selected : payMethod,
address,
})
}
>
<Text style={styles.footerBtnText}>Confirm</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
height: "100%",
width: width,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
headerWrap: {
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
// flexDirection: "row",
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
paddingVertical: 10,
justifyContent: "center",
alignItems: "center",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
},
wrapper: {
// height: "85%",
paddingTop: 25,
width: "100%",
// justifyContent: "center",
alignItems: "center",
height: "100%",
},
content: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
});
export default Paymentoption;

187
app/pages/checkout/ShippingOption.jsx Normal file
View File

@ -0,0 +1,187 @@
import { faArrowLeft, faCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native";
import React, { useState } from "react";
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Accordion from "../../components/checkout/Accordion";
const width = Dimensions.get("window").width;
const ShippingOption = () => {
const navigation = useNavigation();
const [selected, setselected] = useState("J&T Express");
const route = useRoute();
const { product, shipMethod, payMethod, address } = route.params;
const shippingMethods = [
{
type: "J&T Express",
eta: "Sept.22 - 23",
price: 55,
},
{
type: "Flash Express",
eta: "Sept.22 - 25",
price: 25,
},
];
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() =>
navigation.navigate("CheckOut", {
shipMethod: shipMethod,
product,
payMethod,
address,
})
}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Shipping Options</Text>
</View>
<View style={styles.wrapper}>
{shippingMethods?.map((shippingMethod, i) => (
<TouchableOpacity
key={i}
style={styles.listItem}
onPress={() => setselected(shippingMethod.type)}
>
<View style={styles.listleft}>
<View style={styles.listtop}>
<Text style={styles.listItemText}> {shippingMethod.type}</Text>
<Text style={styles.listItemTextPrice}>
{" "}
₱{shippingMethod.price}
</Text>
</View>
<Text style={styles.listItemTexteta}> {shippingMethod.eta}</Text>
</View>
{selected === shippingMethod.type ? (
<FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} />
) : null}
</TouchableOpacity>
))}
</View>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() =>
navigation.navigate("CheckOut", {
shipMethod: selected ? selected : shipMethod,
product,
payMethod,
address,
})
}
>
<Text style={styles.footerBtnText}>Confirm</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fafafa",
height: "100%",
width: width,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
backgroundColor: "#ffffff",
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
headerWrap: {
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
// flexDirection: "row",
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
paddingVertical: 10,
justifyContent: "center",
alignItems: "center",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
},
wrapper: {
// height: "85%",
paddingTop: 25,
width: "100%",
// justifyContent: "center",
alignItems: "center",
// height: "100%",
},
content: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
listItem: {
backgroundColor: "#ffffff",
width: "100%",
borderWidth: 1,
borderColor: "#ececec",
padding: 15,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
listleft: {},
listtop: {
flexDirection: "row",
},
listItemText: {
fontSize: 16,
fontWeight: "600",
},
listItemTextPrice: {
fontSize: 16,
fontWeight: "600",
color: "#ffaa00",
marginLeft: 10,
},
listItemTexteta: {
fontSize: 14,
marginTop: 5,
fontWeight: "500",
color: "#9c9c9c",
marginLeft: 10,
},
});
export default ShippingOption;

153
app/pages/home/Cart.jsx Normal file
View File

@ -0,0 +1,153 @@
import React, { useEffect, useState } from "react";
import { Dimensions, StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import CartCard from "../../components/cart/CartCard";
const width = Dimensions.get("window").width;
const cartList1 = [
{
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
min: 20,
name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
per: "pieces",
price: 200,
promo: 30,
rate: 4.2,
raterTotal: 200,
shopId: "1234",
sold: 340,
},
{
img: "https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
min: 20,
name: "product 1",
per: "pieces",
price: 200,
shopId: "1233",
sold: 340,
},
{
img: "https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
min: 20,
name: "product 1",
per: "pieces",
price: 200,
shopId: "1234",
sold: 340,
},
];
const Cart = ({ cartList }) => {
const [cartSort, setcartSort] = useState([]);
console.log(cartSort);
useEffect(() => {
const cartSorted = cartList.reduce((acc, item) => {
const shopId = item.shopId;
const existingShop = acc.find((shop) => shop.shopname === shopId);
if (existingShop) {
// Shop already exists, add the item to its cartItems array
existingShop.cartItems.push(item);
} else {
// Shop doesn't exist, create a new shop object
acc.push({ shopname: shopId, cartItems: [item] });
}
return acc;
}, []);
setcartSort(cartSorted);
}, []);
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>CART</Text>
</View>
<View style={styles.wrapper}>
<MasonryList
data={cartSort}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <CartCard cart={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
padding: 10,
height: "100%",
width: width,
},
header: {
width: "100%",
top: 0,
height: 50,
marginLeft:15
},
container1: {
width: "100%",
},
content: {
width: "100%",
alignItems: "center",
justifyContent: "center",
},
list: {
width: "100%",
},
headerText: {
textAlign: "left",
width: "100%",
fontWeight: "600",
fontSize: 16,
},
footer: {
bottom: 0,
width: "100%",
},
wrapper: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
list: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
card: {
width: "100%",
borderWidth: 1,
borderColor: "#dddd",
justifyContent: "center",
padding: 15,
paddingVertical: 10,
borderRadius: 10,
marginVertical: 2,
},
title: {
fontSize: 16,
fontWeight: "600",
},
body: {
fontSize: 16,
// fontWeight: "600",
marginTop: 5,
},
date: {
fontSize: 12,
// fontWeight: "600",
color: "#797979",
marginTop: 10,
},
});
export default Cart;

10
app/pages/home/Chat.jsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import { Text, View } from 'react-native'
const Chat = () => {
return (
<View><Text>Chat</Text></View>
)
}
export default Chat

80
app/pages/home/Home.jsx Normal file
View File

@ -0,0 +1,80 @@
import React from "react";
import {
StyleSheet,
AppRegistry,
Text,
View,
Image,
TouchableOpacity,
} from "react-native";
import ProductList from "../../components/main/home/ProductList";
import TopCategories from "../../components/main/home/TopCategories";
import SwiperCon from "../../components/main/home/Swiper";
import Header from "../../components/main/Header";
import { useNavigation } from "@react-navigation/native";
import TopShops from "../../components/main/home/TopShops";
import ShopList from "../../components/main/home/ShopList";
const Home = ({ tab }) => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={styles.header} onPress={() => navigation.navigate("Search")}>
<Header />
</View>
<View style={styles.wrapper}>
<SwiperCon />
</View>
{tab === "prod" ? (
<>
<TopCategories />
<ProductList />
</>
) : (
<>
<TopShops />
<ShopList />
</>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
// height: "87%",
// paddingTop:15
},
wrapper: {
width: "100%",
height: 150,
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
header: {
position: "fixed",
width: "100%",
top: 0,
marginBottom: 5,
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
tabs: {
height: 80,
width: "100%",
position: "absolute",
bottom: 100,
},
tab: {},
});
export default Home;

119
app/pages/home/Notification.jsx Normal file
View File

@ -0,0 +1,119 @@
import React from "react";
import {
View,
Text,
StyleSheet,
useWindowDimensions,
Dimensions,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
const width = Dimensions.get("window").width;
const Notification = () => {
const notif = [
{
title: "Update!",
body: "the app is updated! check it on google play",
date: "September 23, 2023 10:00pm",
},
{
title: "Update!",
body: "the app is updated! check it on google play",
date: "September 23, 2023 10:00pm",
},
{
title: "Update!",
body: "the app is updated! check it on google play",
date: "September 23, 2023 10:00pm",
},
];
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>NOTIFICATIONS</Text>
</View>
<View style={styles.wrapper}>
<MasonryList
data={notif}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => (
<View style={styles.card}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.body}>{item.body}</Text>
<Text style={styles.date}>{item.date}</Text>
</View>
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
padding: 10,
height: "100%",
width: width,
},
header: {
width: "100%",
top: 0,
height: 50,
// justifyContent: "space-between",
},
headerText: {
textAlign: "left",
width: "100%",
fontWeight: "600",
fontSize: 16,
},
footer: {
bottom: 0,
width: "100%",
},
wrapper: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
list: {
width: "100%",
justifyContent: "center",
alignItems: "center",
},
card: {
width: "100%",
borderWidth: 1,
borderColor: "#dddd",
justifyContent: "center",
padding: 15,
paddingVertical: 10,
borderRadius:10,
marginVertical:2
},
title: {
fontSize: 16,
fontWeight: "600",
},
body: {
fontSize: 16,
// fontWeight: "600",
marginTop:5
},
date: {
fontSize: 12,
// fontWeight: "600",
color:'#797979',
marginTop:10
},
});
export default Notification;

315
app/pages/home/Profile.jsx Normal file
View File

@ -0,0 +1,315 @@
import {
faAngleRight,
faArrowCircleRight,
faArrowRight,
faBagShopping,
faBox,
faCarSide,
faCircleQuestion,
faClock,
faHeart,
faRankingStar,
faTruck,
faUserGear,
faWallet,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
View,
Text,
StyleSheet,
Dimensions,
TouchableOpacity,
Image,
ScrollView,
FlatList,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import Card from "../../components/profile/Card";
import { faStar } from "@fortawesome/free-solid-svg-icons";
const width = Dimensions.get("window").width;
const settings = [
{
icon: <FontAwesomeIcon icon={faBagShopping} color={"#777777"} size={25} />,
label: "My Purchases",
nav: "MyPurchases",
},
{
icon: <FontAwesomeIcon icon={faWallet} color={"#777777"} size={25} />,
label: "My Wallet",
nav: "MyWallet",
},
{
icon: <FontAwesomeIcon icon={faHeart} color={"#777777"} size={25} />,
label: "My Favorites",
nav: "MyFavorites",
},
{
icon: <FontAwesomeIcon icon={faClock} color={"#777777"} size={25} />,
label: "View History",
nav: "MyPurchases",
},
{
icon: <FontAwesomeIcon icon={faUserGear} color={"#777777"} size={25} />,
label: "Account Settings",
nav: "AccountSettings",
},
{
icon: (
<FontAwesomeIcon icon={faCircleQuestion} color={"#777777"} size={25} />
),
label: "Help Center",
nav: "HelpCenter",
},
];
const Profile = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.titleText}>ACCOUNT</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.header}>
<View style={styles.headerWrap}>
<View style={styles.headerTop}>
<Image
style={{
width: 40,
height: 40,
resizeMode: "cover",
borderRadius: 100,
marginLeft: 20,
}}
source={{
uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
}}
/>
<View style={styles.headerTopLeft}>
<Text style={styles.headerTopText}>Username</Text>
<View style={styles.details}>
<Text style={styles.headerTopSubText}>Delivery Address:</Text>
<Text style={styles.headerTopSubTextP}>
Blk 2 Wall St. Harang, Makati City
</Text>
</View>
</View>
</View>
<View style={styles.headerBottom}>
<View style={styles.headerBottomTitle}>
<Text style={styles.headerBottomText}>My Orders</Text>
</View>
<View style={styles.headerBottomWrap}>
<View style={styles.headerBottomCard}>
<FontAwesomeIcon
icon={faWallet}
color={"#ffaa00"}
size={25}
/>
<Text style={styles.headerBottomCardText}>To Pay</Text>
</View>
<View style={styles.headerBottomCard}>
<FontAwesomeIcon icon={faBox} color={"#ffaa00"} size={25} />
<Text style={styles.headerBottomCardText}>To Ship</Text>
</View>
<View style={styles.headerBottomCard}>
<FontAwesomeIcon icon={faTruck} color={"#ffaa00"} size={25} />
<Text style={styles.headerBottomCardText}>To Receive</Text>
</View>
<View style={styles.headerBottomCard}>
<FontAwesomeIcon icon={faStar} color={"#ffaa00"} size={25} />
<Text style={styles.headerBottomCardText}>To Rate</Text>
</View>
</View>
</View>
</View>
</View>
{/* <ScrollView style={styles.content1} > */}
<View style={styles.content}>
<View style={styles.headerBottomTitle}>
<Text style={styles.contentTopText}>Settings</Text>
</View>
<FlatList
data={settings}
keyExtractor={(item) => item.label}
style={styles.list}
numColumns={3}
showsVerticalScrollIndicator={false}
renderItem={({ item,i }) => <Card key={i} cart={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
{/* </ScrollView> */}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
height: "100%",
width: width,
},
header: {
// position: "fixed",
width: "100%",
height: 180,
justifyContent: "center",
alignItems: "center",
borderColor: "#f0f0f0dd",
borderBottomWidth: 1,
// top: 0,
},
title: {
backgroundColor: "#ffaa00",
width: "100%",
// height: 30,
justifyContent: "center",
// alignItems: "center",
padding: 10,
paddingLeft: 20,
},
titleText: {
// padding:10,
color: "#fff",
fontWeight: "600",
},
headerWrap: {
justifyContent: "center",
alignItems: "center",
width: "90%",
// height: "100%",
// flexDirection: "row",
},
headerTop: {
justifyContent: "space-between",
alignItems: "center",
width: "100%",
flexDirection: "row",
},
headerTopText: {
// padding:10,
color: "#000000",
fontWeight: "600",
},
headerTopLeft: {
width: "80%",
padding: 10,
},
details: {
// justifyContent: "space-between",
alignItems: "center",
width: "100%",
flexDirection: "row",
},
headerTopSubText: {
color: "#666666",
fontWeight: "600",
fontSize: 9,
},
headerTopSubTextP: {
color: "#464646",
fontWeight: "400",
fontSize: 9,
margin: 5,
},
headerBottom: {
marginVertical: 15,
justifyContent: "space-between",
alignItems: "center",
width: "100%",
// flexDirection: "row",
},
headerBottomTitle: {
// justifyContent: "space-between",
// alignItems: "center",
width: "100%",
// flexDirection: "row",
},
headerBottomText: {
// padding:10,
color: "#333333",
fontWeight: "600",
fontSize: 10,
textAlign: "left",
marginLeft: 20,
},
headerBottomWrap: {
justifyContent: "space-between",
alignItems: "center",
width: "70%",
flexDirection: "row",
marginTop: 10,
},
headerBottomCard: {
justifyContent: "center",
alignItems: "center",
},
headerBottomCardText: {
color: "#5e5e5e",
fontWeight: "400",
fontSize: 9,
marginTop: 5,
},
footer: {
bottom: 0,
width: "100%",
},
list: {
width: "100%",
backgroundColor: "#ffffff",
borderColor: "#f0f0f0dd",
borderWidth: 1,
// justifyContent: "center",
// alignItems: "center",
},
container1: {
width: "100%",
backgroundColor: "#ffffff",
},
wrapper: {
width: "100%",
justifyContent: "center",
alignItems: "center",
height: "100%",
},
content: {
display: "flex",
width: "100%",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fffdf8",
},
content1: {
display: "flex",
width: "100%",
height: "100%",
backgroundColor: "#fffdf8",
},
contentTopText: {
// padding:10,
color: "#000000",
fontWeight: "600",
marginLeft: 10,
padding: 10,
},
subContent: {
width: "40%",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
height: 60,
borderColor: "#f0f0f0dd",
borderWidth: 1,
},
});
export default Profile;

199
app/pages/home/main.jsx Normal file
View File

@ -0,0 +1,199 @@
import React, { useRef, useState } from "react";
import {
Animated,
Dimensions,
LayoutAnimation,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import BottomNav from "../../components/main/BottomNav";
import Header from "../../components/main/Header";
import Cart from "./Cart";
import Chat from "./Chat";
import Home from "./Home";
import Notification from "./Notification";
import Profile from "./Profile";
const height = Dimensions.get("window").height;
const Main = ({ cartList }) => {
const [tabActive, settabActive] = useState("home");
// const [switchTab, setswitch] = useState("prod");
const [switchTab, setSwitchTab] = useState("prod");
const animatedValue = useRef(new Animated.Value(0)).current;
const handleTabPress = (tab) => {
// Determine the target value based on the selected tab
const targetValue = tab === 'prod' ? 0 : 1;
// Create a spring animation
Animated.spring(animatedValue, {
toValue: targetValue,
friction: 5, // Adjust the friction to control the bounce effect
tension: 10, // Adjust the tension to control the bounce effect
useNativeDriver: true,
}).start();
// Update the selected tab
setSwitchTab(tab);
};
// Interpolate the animated value to determine background color
const backgroundColor = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: ['#ffaa00', '#ffaa00'], // Adjust colors as needed
});
return (
<View style={styles.container}>
<ScrollView style={styles.wrapper}>
{tabActive === "home" ? (
<Home tab={switchTab} />
) : tabActive === "notif" ? (
<Notification />
) : tabActive === "message" ? (
<Chat />
) : tabActive === "cart" ? (
<Cart cartList={cartList} />
) : tabActive === "profile" ? (
<Profile />
) : (
<Home />
)}
</ScrollView>
<View style={styles.footer}>
{tabActive === "home" ? (
<View style={styles.tabsCon}>
<View style={styles.tabs}>
<TouchableOpacity
style={[
switchTab === 'ven'? styles.tab:styles.tabActive ,
{
backgroundColor: switchTab === 'prod' ? backgroundColor : 'transparent',
transform: [
{
translateX: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-5, 5], // Adjust the bounce distance
}),
},
],
},
]}
onPress={() => handleTabPress('prod')}
activeOpacity={0.8}
>
<Text
style={[
styles.tabText,
{
color: switchTab === 'prod' ? '#fff' : '#000',
},
]}
>
Products
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
switchTab === 'prod'? styles.tab:styles.tabActive ,
{
backgroundColor: switchTab === 'ven' ? backgroundColor : 'transparent',
transform: [
{
translateX: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-5, 5], // Adjust the bounce distance
}),
},
],
},
]}
onPress={() => handleTabPress('ven')}
activeOpacity={0.8}
>
<Text
style={[
styles.tabText,
{
color: switchTab === 'ven' ? '#fff' : '#000',
},
]}
>
Vendor
</Text>
</TouchableOpacity>
</View>
</View>
) : null}
<BottomNav settabActive={settabActive} activeTab={tabActive} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
},
header: {
position: "fixed",
width: "100%",
top: 0,
},
footer: {
// position: "absolute",
bottom: 0,
width: "100%",
},
wrapper: {
height: "100%",
},
tabsCon: {
height: 80,
width: "100%",
position: "absolute",
justifyContent: "center",
alignItems: "center",
bottom: 50,
},
tabs: {
// height: 30,
margin: "auto",
flexDirection: "row",
backgroundColor: "#fff",
borderRadius: 15,
overflow: "hidden",
borderWidth: 1,
borderColor: "#ddd",
// padding:10
},
tab: {
paddingVertical: 15,
paddingHorizontal: 25,
},
tabActive: {
backgroundColor: "#ffaa00",
paddingVertical: 15,
paddingHorizontal: 25,
borderRadius: 15,
},
tabText: {
textTransform: "uppercase",
color: "#383838",
fontWeight: "600",
},
tabTextActive: {
textTransform: "uppercase",
color: "#fff",
fontWeight: "600",
},
});
export default Main;

197
app/pages/product/ProductSinglePage.jsx Normal file
View File

@ -0,0 +1,197 @@
import { faArrowLeft, faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native";
import React from "react";
import {
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import BottomNav from "../../components/product/BottomNav";
import Variation from "../../components/product/Variation";
const ProductSinglePage = ({ setcartList, cartList }) => {
const route = useRoute();
const { product } = route.params;
const navigation = useNavigation();
return (
<View style={styles.container}>
<ScrollView>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
</View>
<View tyle={styles.wrapper}>
<Image
style={{ width: "100%", height: 400, resizeMode: "cover" }}
source={{ uri: product.img }}
/>
<View
style={{
width: "100%",
padding: 10,
backgroundColor: "#fff",
border: "none",
borderColor: "#f3f3f3",
borderWidth: 1,
}}
>
<Text style={styles.text}>{product.name}</Text>
<View style={styles.priceCon}>
<Text
style={product.promo ? styles.textPricePromo : styles.textPrice}
>
₱{product.price}
</Text>
{product.promo ? (
<Text style={styles.textPrice}>
{" "}
{product.price - product.price * 0.3}{" "}
<Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text>
</Text>
) : null}
</View>
<View style={styles.footer}>
<Text style={styles.textMin}>
min. order: {product.min} {product.per}
</Text>
<Text style={styles.textSold}>{product.sold} sold</Text>
</View>
{product.rate ? (
<View style={styles.rateCon}>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{product.rate} ({product.raterTotal})
</Text>
</View>
) : null}
</View>
</View>
<Variation />
<Text style={styles.header1}>Description</Text>
</ScrollView>
<View style={styles.footerButton}>
<BottomNav
product={product}
cartList={cartList}
setcartList={setcartList}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
},
header: {
position: "absolute",
width: "100%",
top: 0,
padding: 15,
},
header1: {
// position: "fixed",
width: "100%",
top: 0,
fontWeight: "bold",
paddingHorizontal: 15,
},
backIcon: {
marginLeft: 20,
backgroundColor: "#f1f1f1",
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
borderRadius: 50,
marginBottom: 10,
},
wrapper: {
width: "100%",
height: "100%",
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
},
text: {
fontSize: 16,
fontWeight: "600",
textTransform: "capitalize",
color: "#333",
letterSpacing: 0.5,
},
priceCon: {
flexDirection: "row",
paddingVertical: 10,
},
textPrice: {
fontSize: 21,
fontWeight: "600",
textTransform: "capitalize",
color: "#ffaa00",
},
textPricePromo: {
fontSize: 21,
fontWeight: "600",
textTransform: "capitalize",
textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: {
fontSize: 13,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
textSold: {
fontSize: 13,
fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd",
},
rateCon: {
flexDirection: "row",
// justifyContent:'center',
alignItems: "center",
paddingVertical: 10,
},
textRate: {
fontSize: 13,
color: "#838383",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
footerButton: {
// position: "absolute",
bottom: 0,
width: "100%",
},
});
export default ProductSinglePage;

139
app/pages/profile/AccountSettings.jsx Normal file
View File

@ -0,0 +1,139 @@
import {
faAngleLeft,
faAngleRight,
faArrowLeft,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const AccountSettings = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Account Settings</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.subHeaderWrap}>
<View style={styles.subHeader}>
<Text style={styles.subHeaderText}>My Account</Text>
</View>
<View style={styles.subContentsWrap}>
<TouchableOpacity
style={styles.subContent}
onPress={() => navigation.navigate("Home")}
>
<Text style={styles.subContentText}>Account & Security</Text>
<FontAwesomeIcon
icon={faAngleRight}
color={"#d4c600"}
size={20}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.subContent}
onPress={() => navigation.navigate("Home")}
>
<Text style={styles.subContentText}>My Addresses</Text>
<FontAwesomeIcon
icon={faAngleRight}
color={"#d4c600"}
size={20}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.subContent}
onPress={() => navigation.navigate("Home")}
>
<Text style={styles.subContentText}>Bank Accounts</Text>
<FontAwesomeIcon
icon={faAngleRight}
color={"#d4c600"}
size={20}
/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "100%",
width: "100%",
backgroundColor:"#fdfdfd",
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
subHeaderWrap: {
width: "100%",
top: 0,
borderColor: "#ddd",
paddingBottom: 15,
justifyContent: "center",
},
subHeader: {
width: "100%",
paddingLeft: 15,
borderColor: "#ddd",
justifyContent: "center",
},
subHeaderText: {
fontSize: 14,
fontWeight: "600",
padding: 10,
},
subContentsWrap: {
width: "100%",
borderColor: "#ddd",
justifyContent: "center",
},
subContent: {
width: "100%",
borderColor: "#ececec",
backgroundColor:"#fff",
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
borderWidth: 1,
padding: 15,
paddingLeft: 40,
},
subContentText: {
fontSize: 14,
fontWeight: "400",
},
});
export default AccountSettings;

57
app/pages/profile/HelpCentre.jsx Normal file
View File

@ -0,0 +1,57 @@
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const HelpCenter = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Help Center</Text>
</View>
<View style={styles.wrapper}>
<Text style={styles.text}>Content</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "100%",
width: "100%",
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
});
export default HelpCenter;

311
app/pages/profile/MyFavorites.jsx Normal file
View File

@ -0,0 +1,311 @@
import {
faArrowLeft,
faDeleteLeft,
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "../../components/profile/my-favorite/ProductCard";
import ShopCard from "../../components/profile/my-favorite/ShopCard";
import { favorite } from "../../constants/favorites";
import Checkbox from "expo-checkbox";
// import { products } from "../../constants/product";
const Tab = createMaterialTopTabNavigator();
import Modal from "react-native-modal";
import DeleteConfirmationModal from "../../components/DeleteConfirmationModal";
function Products({ route }) {
const { products } = route.params;
const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false);
const [product, setproduct] = useState(products ?? []);
console.log(prodLike);
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
const likeClick = (e) => {
setprodLike((prevLikes) => {
// Check if e is already included in prodLike
if (prevLikes.includes(e) && e != "all") {
// If e is already in the array, remove it
return prevLikes.filter((item) => item !== e);
} else {
// If e is not in the array, add it to the beginning
return [e, ...prevLikes];
}
});
};
const deleteItem = () => {
toggleModal();
if (all === true) {
setproduct([]);
setall(false)
} else {
setproduct((prevProduct) => {
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
const updatedProduct = prevProduct.filter(
(item, index) => !prodLike.includes(index)
);
return updatedProduct;
});
setprodLike([]);
}
};
return (
<View style={styles.tabCon}>
<View style={styles.actions}>
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
<TouchableOpacity
onPress={() => {
toggleModal();
}}
>
<FontAwesomeIcon icon={faTrash} />
</TouchableOpacity>
</View>
{products ? (
<MasonryList
data={product}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={2}
showsVerticalScrollIndicator={false}
renderItem={({ item, i }) => (
<ProductCard
like={likeClick}
liked={prodLike}
index={i}
product={item}
all={all}
/>
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
) : null}
<DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={deleteItem}
/>
</View>
);
}
function Vendors({ route }) {
const { shops } = route.params;
const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false);
const [product, setproduct] = useState(shops ?? []);
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
console.log(prodLike);
const likeClick = (e) => {
setprodLike((prevLikes) => {
// Check if e is already included in prodLike
if (prevLikes.includes(e) && e != "all") {
// If e is already in the array, remove it
return prevLikes.filter((item) => item !== e);
} else {
// If e is not in the array, add it to the beginning
return [e, ...prevLikes];
}
});
};
const deleteItem = () => {
toggleModal();
if (all === true) {
setproduct([]);
setall(false)
} else {
setproduct((prevProduct) => {
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
const updatedProduct = prevProduct.filter(
(item, index) => !prodLike.includes(index)
);
return updatedProduct;
});
setprodLike([]);
}
};
return (
<View style={styles.tabCon}>
<View style={styles.actions}>
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
<TouchableOpacity
onPress={() => {
toggleModal();
}}
>
<FontAwesomeIcon icon={faTrash} />
</TouchableOpacity>
</View>
{shops ? (
<MasonryList
data={product ?? null}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item, i }) => (
<ShopCard
product={item}
like={likeClick}
liked={prodLike}
index={i}
all={all}
/>
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
) : null}
<DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={deleteItem}
/>
</View>
);
}
const MyFavorites = () => {
const navigation = useNavigation();
const products = favorite?.find((item) => item.type === "products")?.contents;
const shops = favorite?.find((item) => item.type === "vendors")?.contents;
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>My Favorite</Text>
</View>
<View style={styles.wrapper}>
<Tab.Navigator
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{
tabBarScrollEnabled: true, // Make sure to set this to true as well
// Adjust the width of each tab as needed
tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
}}
>
<Tab.Screen
name="Products"
component={Products}
options={{ tabBarLabel: "Products" }}
initialParams={{ products: products }}
/>
<Tab.Screen
name="Vendors"
component={Vendors}
options={{ tabBarLabel: "Vendors" }}
initialParams={{ shops: shops }}
/>
</Tab.Navigator>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "95%",
width: "100%",
justifyContent: "center",
// alignItems:'center'
marginBottom: 20,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
tabCon: {
width: "100%",
height: "100%",
},
actions: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
},
list: {
width: "100%",
justifyContent: "center",
alignItems: "center",
padding: 5,
},
list: {
width: "100%",
// backgroundColor: "#fff",
},
content: {
width: "100%",
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
buttons: {
position: "absolute",
flexDirection: "row",
bottom:0
},
btnCancel: {
color: "#ff0000",
padding: 10,
},
btnCancelText: {
color: "#ff0000",
padding: 10,
},
btnConfirm: {
color: "#ff0000",
padding: 10,
},
btnConfirmText: {
color: "#001aff",
padding: 10,
},
});
export default MyFavorites;

181
app/pages/profile/MyPurchases.jsx Normal file
View File

@ -0,0 +1,181 @@
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import CompletedCard from "../../components/profile/my_purchases/CompletedCard";
import MasonryList from "@react-native-seoul/masonry-list";
import { checkOut } from "../../constants/checkout";
import ToPayCard from "../../components/profile/my_purchases/ToPay";
import ToShipCard from "../../components/profile/my_purchases/ToShip";
import ToReceiveCard from "../../components/profile/my_purchases/ToReceive";
const Tab = createMaterialTopTabNavigator();
function ToPay() {
return (
<View style={styles.tabCon}>
<MasonryList
data={checkOut.filter((item) => item.status === "to pay")}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ToPayCard cart={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
);
}
function ToShip() {
return (
<View style={styles.tabCon}>
<MasonryList
data={checkOut.filter((item) => item.status === "to ship")}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ToShipCard cart={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
);
}
function ToReceive() {
return (
<View style={styles.tabCon}>
<MasonryList
data={checkOut.filter((item) => item.status === "to receive")}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ToReceiveCard cart={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
);
}
function Completed() {
return (
<View style={styles.tabCon}>
<MasonryList
data={checkOut.filter((item) => item.status === "completed")}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <CompletedCard cart={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
);
}
const MyPurchases = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>My Purchases</Text>
</View>
<View style={styles.wrapper}>
<Tab.Navigator
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{
tabBarScrollEnabled: true, // Make sure to set this to true as well
// Adjust the width of each tab as needed
tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
}}
>
<Tab.Screen
name="ToPay"
component={ToPay}
options={{ tabBarLabel: "To Pay" }}
initialParams={{}}
/>
<Tab.Screen
name="ToShip"
component={ToShip}
options={{ tabBarLabel: "To Ship" }}
initialParams={{}}
/>
<Tab.Screen
name="ToReceive"
component={ToReceive}
options={{ tabBarLabel: "To Receive" }}
initialParams={{}}
/>
<Tab.Screen
name="Completed"
component={Completed}
options={{ tabBarLabel: "Completed" }}
initialParams={{}}
/>
</Tab.Navigator>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "95%",
width: "100%",
justifyContent: "center",
// alignItems:'center'
marginBottom: 20,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
tabCon: {
width: "100%",
height: "100%",
},
list: {
width: "100%",
justifyContent: "center",
alignItems: "center",
padding: 5,
},
});
export default MyPurchases;

57
app/pages/profile/MyWallet.jsx Normal file
View File

@ -0,0 +1,57 @@
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const MyWallet = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>My Wallet</Text>
</View>
<View style={styles.wrapper}>
<Text style={styles.text}>Content</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "100%",
width: "100%",
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
});
export default MyWallet;

309
app/pages/profile/ViewHistory.jsx Normal file
View File

@ -0,0 +1,309 @@
import {
faArrowLeft,
faDeleteLeft,
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "../../components/profile/view-history/ProductCard";
import ShopCard from "../../components/profile/view-history/ShopCard";
import { favorite } from "../../constants/favorites";
import Checkbox from "expo-checkbox";
import DeleteConfirmationModal from "../../components/DeleteConfirmationModal";
// import { products } from "../../constants/product";
const Tab = createMaterialTopTabNavigator();
function Products({ route }) {
const { products } = route.params;
const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false);
const [product, setproduct] = useState(products ?? []);
console.log(prodLike);
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
const likeClick = (e) => {
setprodLike((prevLikes) => {
// Check if e is already included in prodLike
if (prevLikes.includes(e) && e != "all") {
// If e is already in the array, remove it
return prevLikes.filter((item) => item !== e);
} else {
// If e is not in the array, add it to the beginning
return [e, ...prevLikes];
}
});
};
const deleteItem = () => {
toggleModal();
if (all === true) {
setproduct([]);
setall(false)
} else {
setproduct((prevProduct) => {
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
const updatedProduct = prevProduct.filter(
(item, index) => !prodLike.includes(index)
);
return updatedProduct;
});
setprodLike([]);
}
};
return (
<View style={styles.tabCon}>
<View style={styles.actions}>
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
<TouchableOpacity
onPress={() => {
toggleModal();
}}
>
<FontAwesomeIcon icon={faTrash} />
</TouchableOpacity>
</View>
{products ? (
<MasonryList
data={product}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={2}
showsVerticalScrollIndicator={false}
renderItem={({ item, i }) => (
<ProductCard
like={likeClick}
liked={prodLike}
index={i}
product={item}
all={all}
/>
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
) : null}
<DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={deleteItem}
/>
</View>
);
}
function Vendors({ route }) {
const { shops } = route.params;
const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false);
const [product, setproduct] = useState(shops ?? []);
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
console.log(prodLike);
const likeClick = (e) => {
setprodLike((prevLikes) => {
// Check if e is already included in prodLike
if (prevLikes.includes(e) && e != "all") {
// If e is already in the array, remove it
return prevLikes.filter((item) => item !== e);
} else {
// If e is not in the array, add it to the beginning
return [e, ...prevLikes];
}
});
};
const deleteItem = () => {
toggleModal();
if (all === true) {
setproduct([]);
setall(false)
} else {
setproduct((prevProduct) => {
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
const updatedProduct = prevProduct.filter(
(item, index) => !prodLike.includes(index)
);
return updatedProduct;
});
setprodLike([]);
}
};
return (
<View style={styles.tabCon}>
<View style={styles.actions}>
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
<TouchableOpacity
onPress={() => {
toggleModal();
}}
>
<FontAwesomeIcon icon={faTrash} />
</TouchableOpacity>
</View>
{shops ? (
<MasonryList
data={product ?? null}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item, i }) => (
<ShopCard
product={item}
like={likeClick}
liked={prodLike}
index={i}
all={all}
/>
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
) : null}
<DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={deleteItem}
/>
</View>
);
}
const ViewHistory = () => {
const navigation = useNavigation();
const products = favorite?.find((item) => item.type === "products")?.contents;
const shops = favorite?.find((item) => item.type === "vendors")?.contents;
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Recently Viewed</Text>
</View>
<View style={styles.wrapper}>
<Tab.Navigator
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{
tabBarScrollEnabled: true, // Make sure to set this to true as well
// Adjust the width of each tab as needed
tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
}}
>
<Tab.Screen
name="Products"
component={Products}
options={{ tabBarLabel: "Products" }}
initialParams={{ products: products }}
/>
<Tab.Screen
name="Vendors"
component={Vendors}
options={{ tabBarLabel: "Vendors" }}
initialParams={{ shops: shops }}
/>
</Tab.Navigator>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "95%",
width: "100%",
justifyContent: "center",
// alignItems:'center'
marginBottom: 20,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
tabCon: {
width: "100%",
height: "100%",
},
actions: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
},
list: {
width: "100%",
justifyContent: "center",
alignItems: "center",
padding: 5,
},
list: {
width: "100%",
// backgroundColor: "#fff",
},
content: {
width: "100%",
alignItems: "center",
justifyContent: "center",
// backgroundColor: "#ffaa00",
},
buttons: {
position: "absolute",
flexDirection: "row",
bottom:0
},
btnCancel: {
color: "#ff0000",
padding: 10,
},
btnCancelText: {
color: "#ff0000",
padding: 10,
},
btnConfirm: {
color: "#ff0000",
padding: 10,
},
btnConfirmText: {
color: "#001aff",
padding: 10,
},
});
export default ViewHistory;

53
app/pages/search/SearchPage.jsx Normal file
View File

@ -0,0 +1,53 @@
import React, { useState } from "react";
import {
View,
Text,
StyleSheet,
ScrollView,
KeyboardAvoidingView,
Platform,
TouchableWithoutFeedback,
} from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import SearchHeader from "../../components/search/Header";
const SearchPage = () => {
const [unfocus, setunfocus] = useState(false);
return (
<KeyboardAwareScrollView
// keyboardShouldPersistTaps="always"
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={true}
style={styles.container}
>
<View style={styles.wrapper}>
<View style={styles.header}>
<SearchHeader unfocus={unfocus} />
</View>
<View style={styles.wrapper}>
<Text>Searchingggg.........</Text>
</View>
</View>
</KeyboardAwareScrollView>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
},
header: {
left: 0,
right: 0,
},
footer: {
bottom: 0,
width: "100%",
},
wrapper: {
justifyContent: "center",
alignItems: "center",
},
});
export default SearchPage;

94
app/routes/route.jsx Normal file
View File

@ -0,0 +1,94 @@
import { NavigationContainer } from "@react-navigation/native";
import React, { useState } from "react";
import { useWindowDimensions, View } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import Main from "../pages/home/main";
import SearchPage from "../pages/search/SearchPage";
import SearchHeader from "../components/search/Header";
import ProductSinglePage from "../pages/product/ProductSinglePage";
import CheckOut from "../pages/checkout/CheckOut";
import Paymentoption from "../pages/checkout/Paymentoption";
import ShippingOption from "../pages/checkout/ShippingOption";
import AddressSelection from "../pages/checkout/AddressSelection";
import AccountSettings from "../pages/profile/AccountSettings";
import HelpCenter from "../pages/profile/HelpCentre";
import ViewHistory from "../pages/profile/ViewHistory";
import MyFavorites from "../pages/profile/MyFavorites";
import MyWallet from "../pages/profile/MyWallet";
import MyPurchases from "../pages/profile/MyPurchases";
const Stack = createStackNavigator();
const Route = () => {
const { height, width } = useWindowDimensions();
const [cartList, setcartList] = useState([]);
return (
<NavigationContainer>
<View
style={{
// flex: 1,
backgroundColor: "#fff",
opacity: 1,
width: "100%",
height: "100%",
// minHeight: height,
// paddingTop:15
}}
>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" options={{ headerShown: false }}>
{(props) => <Main {...props} cartList={cartList} />}
</Stack.Screen>
<Stack.Screen name="Search" options={{ headerShown: false }}>
{(props) => <SearchPage {...props} />}
</Stack.Screen>
<Stack.Screen name="Product" options={{ headerShown: false }}>
{(props) => (
<ProductSinglePage
{...props}
cartList={cartList}
setcartList={setcartList}
/>
)}
</Stack.Screen>
<Stack.Screen name="CheckOut" options={{ headerShown: false }}>
{(props) => <CheckOut {...props} />}
</Stack.Screen>
<Stack.Screen name="Paymentoption" options={{ headerShown: false }}>
{(props) => <Paymentoption {...props} />}
</Stack.Screen>
<Stack.Screen name="ShippingOption" options={{ headerShown: false }}>
{(props) => <ShippingOption {...props} />}
</Stack.Screen>
<Stack.Screen
name="AddressSelection"
options={{ headerShown: false }}
>
{(props) => <AddressSelection {...props} />}
</Stack.Screen>
<Stack.Screen name="MyPurchases" options={{ headerShown: false }}>
{(props) => <MyPurchases {...props} />}
</Stack.Screen>
<Stack.Screen name="MyWallet" options={{ headerShown: false }}>
{(props) => <MyWallet {...props} />}
</Stack.Screen>
<Stack.Screen name="MyFavorites" options={{ headerShown: false }}>
{(props) => <MyFavorites {...props} />}
</Stack.Screen>
<Stack.Screen name="ViewHistory" options={{ headerShown: false }}>
{(props) => <ViewHistory {...props} />}
</Stack.Screen>
<Stack.Screen name="HelpCenter" options={{ headerShown: false }}>
{(props) => <HelpCenter {...props} />}
</Stack.Screen>
<Stack.Screen name="AccountSettings" options={{ headerShown: false }}>
{(props) => <AccountSettings {...props} />}
</Stack.Screen>
</Stack.Navigator>
</View>
</NavigationContainer>
);
};
export default Route;

1
assets/bottomNavIcons/store-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M547.6 103.8L490.3 13.1C485.2 5 476.1 0 466.4 0H109.6C99.9 0 90.8 5 85.7 13.1L28.3 103.8c-29.6 46.8-3.4 111.9 51.9 119.4c4 .5 8.1 .8 12.1 .8c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.2 0 49.3-11.4 65.2-29c16 17.6 39.1 29 65.2 29c4.1 0 8.1-.3 12.1-.8c55.5-7.4 81.8-72.5 52.1-119.4zM499.7 254.9l-.1 0c-5.3 .7-10.7 1.1-16.2 1.1c-12.4 0-24.3-1.9-35.4-5.3V384H128V250.6c-11.2 3.5-23.2 5.4-35.6 5.4c-5.5 0-11-.4-16.3-1.1l-.1 0c-4.1-.6-8.1-1.3-12-2.3V384v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V384 252.6c-4 1-8 1.8-12.3 2.3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 838 B

BIN
assets/obn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

5
babel.config.js
View File

@ -2,5 +2,10 @@ module.exports = function(api) {
api.cache(true); api.cache(true);
return { return {
presets: ['babel-preset-expo'], presets: ['babel-preset-expo'],
plugins: [
'@babel/plugin-proposal-export-namespace-from',
'react-native-reanimated/plugin',
],
}; };
}; };

11536
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

49
package.json
View File

@ -9,10 +9,55 @@
"web": "expo start --web" "web": "expo start --web"
}, },
"dependencies": { "dependencies": {
"expo": "~49.0.10", "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@expo/config-plugins": "~6.0.0",
"@expo/webpack-config": "^18.1.3",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-native-fontawesome": "^0.3.0",
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-community/checkbox": "^0.5.15",
"@react-native-seoul/masonry-list": "^1.4.2",
"@react-navigation/material-top-tabs": "^6.6.3",
"@react-navigation/native": "^6.1.6",
"@react-navigation/stack": "^6.3.16",
"axios": "^1.4.0",
"expo": "^49.0.11",
"expo-barcode-scanner": "^12.3.2",
"expo-checkbox": "^2.5.0",
"expo-file-system": "^15.2.2",
"expo-font": "^11.1.1",
"expo-linear-gradient": "^12.1.2",
"expo-media-library": "^15.2.3",
"expo-notifications": "^0.18.1",
"expo-permissions": "^14.1.1",
"expo-status-bar": "~1.6.0", "expo-status-bar": "~1.6.0",
"expo-svg-uri": "^1.3.1",
"expo-system-ui": "^2.2.1",
"jwt-decode": "^3.1.2",
"react": "18.2.0", "react": "18.2.0",
"react-native": "0.72.4" "react-native": "0.72.4",
"react-native-css-vh-vw": "^1.0.5",
"react-native-elements": "^3.4.3",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "2.9.0",
"react-native-image-slider-box": "^2.0.7",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-modal": "^13.0.1",
"react-native-pager-view": "^6.2.0",
"react-native-push-notification": "^8.1.1",
"react-native-qrcode": "^0.2.7",
"react-native-qrcode-svg": "^6.2.0",
"react-native-reanimated": "^3.3.0",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.20.0",
"react-native-swiper": "^1.5.5",
"react-native-tab-view": "^3.5.1",
"react-native-torch": "^1.2.0",
"react-native-view-shot": "3.5.0",
"react-native-viewpager": "^0.2.13",
"react-native-viewport-units": "^0.0.5",
"react-native-web": "^0.18.12"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0" "@babel/core": "^7.20.0"