latest
This commit is contained in:
parent
91da696e7e
commit
a1f75139b9
36
App.js
36
App.js
|
|
@ -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" />
|
||||||
|
<Route />
|
||||||
</View>
|
</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
9
app.json
|
|
@ -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": {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const footer = () => {
|
||||||
|
return (
|
||||||
|
<div>footer</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default footer
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -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",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -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,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",
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 838 B |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -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',
|
||||||
|
],
|
||||||
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
49
package.json
49
package.json
|
|
@ -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"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue