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

02-12-2023 version

Browse Source
This commit is contained in:
mark H 2024-02-12 08:58:57 +08:00
parent a1f75139b9
commit 45cc7e86e7
109 changed files with 25395 additions and 2143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
App.js
View File

@ -1,3 +1,9 @@
import {
faCheck,
faCheckCircle,
faExclamationCircle,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { StatusBar } from "expo-status-bar"; import { StatusBar } from "expo-status-bar";
import { import {
Platform, Platform,
@ -8,17 +14,90 @@ import {
StatusBar as StatusBars, StatusBar as StatusBars,
Dimensions, Dimensions,
} from "react-native"; } from "react-native";
import { ToastProvider } from "react-native-toast-notifications";
import Route from "./app/routes/route"; import Route from "./app/routes/route";
// import WebSocket from "ws";
// import { WebSocket } from 'react-native';
// const ws = new WebSocket('wss://192.168.50.15:4028/');
const height = Dimensions.get("window").height; const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
export default function App() { export default function App() {
// const ws = new WebSocket("ws://localhost:8080");
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ToastProvider
successColor="#98eb00"
dangerColor="red"
offsetTop={110}
// renderType={{
// custom_type: (toast) => (
// <View style={{padding: 15, backgroundColor: 'grey'}}>
// <Text>{toast.message}</Text>
// </View>
// )
// }}
renderToast={(toast) => (
<View
style={{
// padding: 15,
paddingHorizontal: 25,
paddingVertical: 10,
color:
toast.type === "success"
? "#98eb00"
: toast.type === "danger"
? "red"
: toast.type === "warning"
? "yellow"
: toast.type === "normal"
? "#98eb00"
: "red",
backgroundColor: "#ffff",
borderWidth: 1,
borderColor: "#eeee",
borderRadius: 25,
flexDirection: "row",
}}
>
<FontAwesomeIcon
icon={
toast.type === "success"
? faCheckCircle
: toast.type === "danger"
? faExclamationCircle
: toast.type === "warning"
? faExclamationCircle
: toast.type === "normal"
? faCheck
: "red"
}
color={
toast.type === "success"
? "#98eb00"
: toast.type === "danger"
? "red"
: toast.type === "warning"
? "yellow"
: toast.type === "normal"
? "#98eb00"
: "red"
}
size={20}
/>
<Text style={{ paddingLeft: 10 }}>{toast.message}</Text>
</View>
)}
>
<View style={styles.wrapper}> <View style={styles.wrapper}>
<StatusBar style="auto" /> <StatusBar style="auto" />
<Route /> <Route />
</View> </View>
</ToastProvider>
</SafeAreaView> </SafeAreaView>
); );
} }

51
app copy.json Normal file
View File

@ -0,0 +1,51 @@
{
"expo": {
"name": "obananaEcom",
"slug": "obananaecommobile",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"jsEngine": "hermes",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.kramblad.obananaecommobile",
"jsEngine": "jsc",
"infoPlist": {
"NSCameraUsageDescription": "This app requires access to your camera for uploading profile image on your account."
}
},
"android": {
"versionCode": 1,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"package": "com.kramblad.obananaecommobile"
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "132e1388-4932-42f0-a76d-86f51867ec29"
}
},
"plugins": [
[
"expo-notifications",
{
"icon": "./assets/icon.png"
}
]
],
"owner": "kramblad"
}
}

30
app.json
View File

@ -1,13 +1,12 @@
{ {
"expo": { "expo": {
"name": "obananaEcom", "name": "obananaEcom",
"slug": "obananaEcom", "slug": "obananaecommobile",
"version": "1.0.0", "version": "2.0.0",
"orientation": "portrait", "orientation": "portrait",
"icon": "./assets/icon.png", "icon": "./assets/icon.png",
"userInterfaceStyle": "light", "userInterfaceStyle": "light",
"jsEngine": "hermes", "jsEngine": "hermes",
"splash": { "splash": {
"image": "./assets/splash.png", "image": "./assets/splash.png",
"resizeMode": "contain", "resizeMode": "contain",
@ -16,16 +15,37 @@
"assetBundlePatterns": ["**/*"], "assetBundlePatterns": ["**/*"],
"ios": { "ios": {
"supportsTablet": true, "supportsTablet": true,
"jsEngine": "jsc" "bundleIdentifier": "com.coffye.oqebtj",
"jsEngine": "jsc",
"infoPlist": {
"NSCameraUsageDescription": "This app requires access to your camera for uploading profile image on your account."
}
}, },
"android": { "android": {
"versionCode": 38,
"adaptiveIcon": { "adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png", "foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff" "backgroundColor": "#ffffff"
} },
"package": "com.coffye.oqebtj"
}, },
"web": { "web": {
"favicon": "./assets/favicon.png" "favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "132e1388-4932-42f0-a76d-86f51867ec29"
} }
},
"plugins": [
[
"expo-notifications",
{
"icon": "./assets/icon.png"
}
]
],
"owner": "kramblad"
} }
} }

32
app/components/cart/CartCard.jsx
View File

@ -2,43 +2,63 @@ import React from "react";
import { View, Text, StyleSheet } from "react-native"; import { View, Text, StyleSheet } from "react-native";
import CartSubCard from "./CartSubCard"; import CartSubCard from "./CartSubCard";
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
import Checkbox from "expo-checkbox";
const CartCard = ({ cart }) => { const CartCard = ({ cart, shopLike, shopProdLike, index, quantityChange,q }) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.heart}>
<Checkbox
value={cart?.selected}
onValueChange={() => shopLike(index)}
/>
<Text style={styles.header}>{cart?.shopname}</Text> <Text style={styles.header}>{cart?.shopname}</Text>
</View>
{/* {cart ? ( */}
<MasonryList <MasonryList
data={cart?.cartItems} data={cart?.cartItems}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
style={styles.list} style={styles.list}
numColumns={1} numColumns={1}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
renderItem={({ item }) => <CartSubCard cart={item} />} renderItem={({ item, i }) => (
<CartSubCard
shopProdLike={shopProdLike}
shopIndex={index}
index={i}
cart={item ? item : []}
quantityChange={quantityChange}
q={q}
/>
)}
containerStyle={styles.container1} containerStyle={styles.container1}
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
{/* ) : null} */}
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// width: "95%",
margin: 5, margin: 5,
borderRadius: 6, borderRadius: 6,
borderColor: "#dddd", borderColor: "#dddd",
borderWidth: 1, borderWidth: 1,
overflow: "hidden", overflow: "hidden",
padding: 10, padding: 10,
backgroundColor:'#fafafa' backgroundColor: "#fafafa",
},
heart: {
width: "100%",
flexDirection: "row",
}, },
header: { header: {
// position: "fixed", // position: "fixed",
fontWeight: "600", fontWeight: "600",
width: "100%", width: "100%",
top: 0, top: 0,
marginLeft: 15,
}, },
footer: { footer: {
// position: "absolute", // position: "absolute",

436
app/components/cart/CartSubCard.jsx
View File

@ -1,39 +1,401 @@
import React from "react"; import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
import { View, Text, StyleSheet, Image } from "react-native"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native";
import Checkbox from "expo-checkbox";
import React, { useEffect, useState } from "react";
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
TextInput,
} from "react-native";
import { useToast } from "react-native-toast-notifications";
import {
update_order,
update_order_item,
} from "../../services/api/controllers/order";
import { get_product } from "../../services/api/controllers/product";
const CartSubCard = ({ cart }) => { const CartSubCard = ({
cart,
shopProdLike,
index,
shopIndex,
quantityChange,
q,
}) => {
const navigation = useNavigation();
console.log("prod" + cart?.selected);
const [inputValue, setInputValue] = useState(cart?.items[0].quantity, 10);
const [error, setError] = useState(false);
const [minLimit, setminLimit] = useState(null);
const [isminLimit, setisminLimit] = useState(false);
const toast = useToast();
const [maxLimit, setmaxLimit] = useState(null);
const [ismaxLimit, setismaxLimit] = useState(false);
const [token, settoken] = useState("");
// useEffect(() => {
// quantityChange(shopIndex, index, inputValue);
// }, [inputValue]);
// Function to handle text input change
useEffect(() => {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
settoken(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
get_product({
id: cart?.items[0]?.product?.product_id,
})
.then((result1) => {
// console.log("result" + result);
if (result1.error) {
setError(result1.error);
} else {
// setcart(result.data);
console.log(result1?.data);
setisminLimit(true);
setminLimit(
result1?.data?.minimum_order !== ""
? result1.data.minimum_order
: "1"
);
setismaxLimit(true);
setmaxLimit(result1?.data?.stock !== "" ? result1.data.stock : "");
// if (result1.data.minimum_order !== "") {
// setInputValue(parseInt(result1.data.minimum_order));
// }
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// set
});
}, []);
const handleTextChange = (text) => {
// Use a regular expression to allow only numeric characters
const numericValue = text.replace(/[^0-9]/g, "");
if (!isminLimit || !ismaxLimit) {
setInputValue(parseInt(numericValue));
} else {
if (parseInt(numericValue) < parseInt(minLimit)) {
toast.show(`The minimum order for this product is ${minLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
setInputValue(parseInt(minLimit));
} else if (parseInt(numericValue) > parseInt(maxLimit)) {
toast.show(`The maximum order for this product is ${maxLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
setInputValue(parseInt(maxLimit));
} else {
setInputValue(parseInt(numericValue));
}
}
};
const handleInputChange = (text) => {
quantityChange(!q);
if (text === "add") {
const quan = parseInt(inputValue) + 1;
if (!isminLimit) {
update_order_item({
token: token,
orderId: cart._id,
itemId: cart.items[0]._id,
body: {
quantity: quan.toString(),
},
})
.then((result) => {
console.log("successful transaction" + result.status);
if (result.status === 200) {
setInputValue(quan.toString()); // Parse to integer and convert back to string
update_order({
token: token,
id: cart._id,
body: {
total_amount: cart.items[0].price * quan,
},
})
.then((results) => {
if (results.status === 200) {
console.log("price: " + results.data.total_amount);
} else {
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
}
})
.catch((err) => {
console.error(err);
});
} else {
if (parseInt(quan) > parseInt(maxLimit)) {
toast.show(`The maximum order for this product is ${maxLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
} else {
update_order_item({
token: token,
orderId: cart._id,
itemId: cart.items[0]._id,
body: {
quantity: quan.toString(),
},
})
.then((result) => {
console.log("successful transaction" + result.status);
if (result.status === 200) {
setInputValue(quan.toString()); // Parse to integer and convert back to string
update_order({
token: token,
id: cart._id,
body: {
total_amount: cart.items[0].price * quan,
},
})
.then((results) => {
if (results.status === 200) {
console.log("price: " + results.data.total_amount);
} else {
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
}
})
.catch((err) => {
console.error(err);
});
}
}
} else if (text === "minus") {
const quan2 = parseInt(inputValue) - 1;
if (!isminLimit) {
update_order_item({
token: token,
orderId: cart._id,
itemId: cart.items[0]._id,
body: {
quantity: quan2.toString(),
},
})
.then((result) => {
console.log("successful transaction" + result.status);
if (result.status === 200) {
const newValue = quan2;
update_order({
token: token,
id: cart._id,
body: {
total_amount: cart.items[0].price * quan2,
},
})
.then((results) => {
if (results.status === 200) {
console.log("price: " + results.data.total_amount);
} else {
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
setInputValue(newValue >= 1 ? newValue.toString() : "1"); // Ensure it's not less than 1
}
})
.catch((err) => {
console.error(err);
});
} else {
if (parseInt(quan2) < parseInt(minLimit)) {
toast.show(`The minimum order for this product is ${minLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
} else {
update_order_item({
token: token,
orderId: cart._id,
itemId: cart.items[0]._id,
body: {
quantity: quan2.toString(),
},
})
.then((result) => {
console.log("successful transaction" + result.status);
if (result.status === 200) {
const newValue = quan2;
update_order({
token: token,
id: cart._id,
body: {
total_amount: cart.items[0].price * quan2,
},
})
.then((results) => {
if (results.status === 200) {
console.log("price: " + results.data.total_amount);
} else {
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
setInputValue(newValue >= 1 ? newValue.toString() : "1"); // Ensure it's not less than 1
}
})
.catch((err) => {
console.error(err);
});
}
}
}
};
const getProd = (idP) => {
console.log(idP);
get_product({
id: idP,
})
.then((result) => {
// console.log("result" + result);
if (result.data.product_type === "variation") {
get_product({
id: result.data.parent_id,
})
.then((result1) => {
// console.log("result" + result);
if (result1.error) {
setError(result1.error);
} else {
// setcart(result.data);
navigation.navigate("Product", { product: result1.data });
console.log(result1.data);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// set
});
} else {
if (result.error) {
setError(result.error);
} else {
// setcart(result.data);
navigation.navigate("Product", { product: result.data });
console.log(result.data);
}
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.imgWrap}> {cart ? (
<Image <>
style={{ width: 50, height: 50, resizeMode: "cover" }} <View style={styles.heart}>
source={{ uri: cart.img }} <Checkbox
value={cart?.selected}
onValueChange={() => shopProdLike(shopIndex, index)}
/> />
</View> </View>
<View style={styles.wrapper}>
<TouchableOpacity
onPress={() => getProd(cart.items[0].product.product_id)}
style={styles.imgWrap}
>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: `${cart.items[0].product?.product_image}` }}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => getProd(cart.items[0].product?.product_id)}
style={styles.wrapper}
>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{cart.name} {cart.items[0]?.product?.name}
</Text> </Text>
<View style={styles.rateCon}> <View style={styles.rateCon}>
{cart.price ? ( {cart.items[0].price ? (
<> <>
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={ style={
cart.promo ? styles.textPricePromo : styles.textPrice cart.sale_price
? styles.textPricePromo
: styles.textPrice
} }
> >
₱{cart.price} ₱
{parseFloat(cart.items[0].price).toLocaleString(
"en-US"
)}
</Text> </Text>
{cart.promo ? ( {cart.sale_price ? (
<Text style={styles.textPrice}> <Text style={styles.textPrice}>
{" "} {/* {" "}
{cart.price - cart.price * 0.3}{" "} {(cart.regular_price * (1 - cart.sale_price / 100)).toFixed(2) }{" "}
<Text style={{ fontWeight: "400" }}> <Text style={{ fontWeight: "400" }}>
(-{cart.promo}%) (-{cart.sale_price}%)
</Text> </Text> */}
{cart.sale_price}
</Text> </Text>
) : null} ) : null}
</View> </View>
@ -43,7 +405,29 @@ const CartSubCard = ({ cart }) => {
)} )}
</View> </View>
</View> </View>
</TouchableOpacity>
<View style={styles.quantity}>
<TouchableOpacity
style={styles.buttonQty}
onPress={() => handleInputChange("add")}
>
<FontAwesomeIcon icon={faPlus} color={"#888888"} size={10} />
</TouchableOpacity>
<TextInput
style={styles.input}
value={inputValue}
onChangeText={handleTextChange}
keyboardType="numeric" // This sets the keyboard to show numeric keys
/>
<TouchableOpacity
style={styles.buttonQty}
onPress={() => handleInputChange("minus")}
>
<FontAwesomeIcon icon={faMinus} color={"#888888"} size={10} />
</TouchableOpacity>
</View> </View>
</>
) : null}
</View> </View>
); );
}; };
@ -57,8 +441,8 @@ const styles = StyleSheet.create({
overflow: "hidden", overflow: "hidden",
flexDirection: "row", flexDirection: "row",
padding: 10, padding: 10,
backgroundColor:'#ffffff' backgroundColor: "#ffffff",
alignItems: "center",
}, },
header: { header: {
@ -71,8 +455,8 @@ const styles = StyleSheet.create({
bottom: 0, bottom: 0,
width: "100%", width: "100%",
}, },
imgWrap:{ imgWrap: {
padding:10 padding: 10,
}, },
wrapper: { wrapper: {
height: "85%", height: "85%",
@ -101,6 +485,16 @@ const styles = StyleSheet.create({
text: { text: {
fontSize: 13, fontSize: 13,
}, },
quantity: {
// flexDirection:'row',
justifyContent: "space-between",
alignItems: "center",
},
buttonQty: {
backgroundColor: "#eee",
padding: 5,
margin: 5,
},
}); });
export default CartSubCard; export default CartSubCard;

18
app/components/checkout/Accordion.jsx
View File

@ -43,13 +43,13 @@ const Accordion = ({ sections, selected,sel }) => {
<View style={styles.container}> <View style={styles.container}>
{sections.map((section, index) => ( {sections.map((section, index) => (
<View key={index} style={styles.section}> <View key={index} style={styles.section}>
<TouchableOpacity {/* <TouchableOpacity
style={styles.acc} style={styles.acc}
onPress={() => { onPress={() => {
toggleSection(index); toggleSection(index);
}} }}
> > */}
<Text style={styles.sectionTitle}>{section.type}</Text> {/* <Text style={styles.sectionTitle}>{section.type}</Text>
<FontAwesomeIcon icon={faAngleDown} color={"#ffaa00"} size={16} /> <FontAwesomeIcon icon={faAngleDown} color={"#ffaa00"} size={16} />
</TouchableOpacity> </TouchableOpacity>
<Animated.View <Animated.View
@ -59,8 +59,8 @@ const Accordion = ({ sections, selected,sel }) => {
height: animatedHeights[index], height: animatedHeights[index],
}, },
]} ]}
> > */}
{section?.methods.map((section, index) => ( {/* {section?.methods.map((section, index) => ( */}
<TouchableOpacity <TouchableOpacity
style={styles.btnMethod} style={styles.btnMethod}
key={index} key={index}
@ -73,8 +73,8 @@ const Accordion = ({ sections, selected,sel }) => {
<FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} /> <FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} />
) : null} ) : null}
</TouchableOpacity> </TouchableOpacity>
))} {/* ))} */}
</Animated.View> {/* </Animated.View> */}
</View> </View>
))} ))}
</View> </View>
@ -112,8 +112,8 @@ const styles = StyleSheet.create({
}, },
btnMethod: { btnMethod: {
padding: 10, padding: 10,
borderWidth: 1, // borderWidth: 1,
borderColor: "#e9e7e7", // borderColor: "#e9e7e7",
borderRadius: 5, borderRadius: 5,
marginVertical: 1, marginVertical: 1,
flexDirection:'row', flexDirection:'row',

4
app/components/main/BottomNav.js
View File

@ -26,7 +26,7 @@ const BottomNav = ({ settabActive, activeTab }) => {
<FontAwesomeIcon icon={faStore} color={"#888888"} size={25} /> <FontAwesomeIcon icon={faStore} color={"#888888"} size={25} />
)} )}
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity {/* <TouchableOpacity
style={styles.button} style={styles.button}
onPress={() => tabSwitch("notif")} onPress={() => tabSwitch("notif")}
> >
@ -35,7 +35,7 @@ const BottomNav = ({ settabActive, activeTab }) => {
) : ( ) : (
<FontAwesomeIcon icon={faBell} color={"#888888"} size={25} /> <FontAwesomeIcon icon={faBell} color={"#888888"} size={25} />
)} )}
</TouchableOpacity> </TouchableOpacity> */}
<TouchableOpacity <TouchableOpacity
style={styles.button} style={styles.button}
onPress={() => tabSwitch("message")} onPress={() => tabSwitch("message")}

18
app/components/main/Header.jsx
View File

@ -4,11 +4,11 @@ import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react"; import React, { useState } from "react";
import { Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native"; import { Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
import obn from "../../../assets/obn.png"; import obn from "../../../assets/obn.png";
const Header = () => { const Header = ({product}) => {
const [searchKeyword, setsearchKeyword] = useState(""); const [searchKeyword, setsearchKeyword] = useState("");
const navigation = useNavigation() const navigation = useNavigation()
console.log(searchKeyword); // console.log(product);
const Search = (e) => { const Search = (e) => {
setsearchKeyword(e); setsearchKeyword(e);
}; };
@ -28,7 +28,7 @@ const Header = () => {
> >
<Text>Search...</Text> <Text>Search...</Text>
</TouchableOpacity> </TouchableOpacity>
<FontAwesomeIcon icon={faSearch} color={"#888888"} size={25} /> {/* <FontAwesomeIcon icon={faSearch} color={"#888888"} size={25} /> */}
</View> </View>
</View> </View>
); );
@ -36,14 +36,14 @@ const Header = () => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// flex: 1, // flex: 1,
backgroundColor: "#fff", // backgroundColor: "#fff",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
width: "100%", width: "100%",
top: 0, top: 0,
// position: "fixed", // position: "fixed",
paddingVertical: 15, paddingVertical: 15,
paddingTop: 5, // paddingTop: 5,
// boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)' // boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)'
}, },
wrapper: { wrapper: {
@ -61,11 +61,11 @@ const styles = StyleSheet.create({
width: 30, width: 30,
}, },
input: { input: {
backgroundColor: "#f5f5f5dd", backgroundColor: "#f7f7f7",
padding: 10, padding: 12,
paddingHorizontal: 20, paddingHorizontal: 20,
borderRadius: 10, borderRadius: 5,
width: "70%", width: "85%",
}, },
}); });
export default Header; export default Header;

136
app/components/main/home/BestDeals.js Normal file
View File

@ -0,0 +1,136 @@
import React from "react";
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { products } from "../../../constants/product2";
import MasonryList from "@react-native-seoul/masonry-list";
import { useNavigation } from "@react-navigation/native";
const BestDeals = ({ product }) => {
const navigation = useNavigation();
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}>BEST DEALS!</Text>
<View style={{ flexDirection: "row" }}>
<FlatList
// inverted
// style={styles.wrapper}
horizontal
data={product ? product.slice(0, 10) : []}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => {
return (
<TouchableOpacity
style={styles.AddUser}
onPress={() =>
navigation.navigate("Product", { product: item })
}
>
<View style={styles.AddUserV}>
<Image
style={styles.img}
source={{
uri:
item.product_image !== ""
? item.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{
color: "#ffaa00",
fontSize: 13,
flexWrap: "wrap",
fontWeight: "600",
overflow: "hidden",
paddingHorizontal: 10,
// paddingBottom:10
}}
>
{
item.regular_price ? "₱"+ parseFloat(item.regular_price)?.toLocaleString('en-US'):"Inquire for price"
}
</Text>
</View>
</TouchableOpacity>
);
}}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "red",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
// marginHorizontal: 10,
marginBottom: 10,
padding: 10,
// height: "87%",
},
wrapper: {
width: "100%",
height: 200,
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
color: "#fff",
marginBottom: 10,
},
AddUserV: {
width: 110,
height: 140,
// padding: 10,
margin: 5,
backgroundColor: "#ffff",
alignItems: "center",
// borderRadius: 10,
// justifyContent: "center",
},
img: {
width: 110,
height: 110,
resizeMode: "cover",
// borderRadius: 10,
// marginVertical:10
marginBottom: 8,
// backgroundColor: "#ffaa00",
},
});
export default BestDeals;

112
app/components/main/home/FeaturedProducts.js Normal file
View File

@ -0,0 +1,112 @@
import React from "react";
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { products } from "../../../constants/product2";
import MasonryList from "@react-native-seoul/masonry-list";
import { useNavigation } from "@react-navigation/native";
const FeaturedProducts = ({ product }) => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Text style={styles.header}>FEATURED PRODUCTS</Text>
<View style={{ flexDirection: "row" }}>
<FlatList
// inverted
// style={styles.wrapper}
horizontal
data={product ? product.slice(0, 10) : []}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => {
return (
<TouchableOpacity style={styles.AddUser}
onPress={() => navigation.navigate("Product", { product:item })}
>
<View style={styles.AddUserV}>
<Image
style={styles.img}
source={{
uri:
item.product_image !== ""
? item.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{
color: "#000",
fontSize: 12,
flexWrap: "wrap",
overflow: "hidden",
paddingHorizontal:10
// paddingBottom:10
}}
>
{item.product_name}
</Text>
</View>
</TouchableOpacity>
);
}}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#ffaa00",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
// marginHorizontal: 10,
padding: 10,
marginBottom: 10,
// height: "87%",
},
wrapper: {
width: "100%",
height: 200,
// backgroundColor: "#ffaa00",
},
header: {
fontSize: 14,
fontWeight: "700",
textTransform: "uppercase",
color: "#fff",
marginBottom: 10,
},
AddUserV: {
width: 110,
height: 140,
// padding: 10,
margin: 5,
backgroundColor: "#ffff",
alignItems: "center",
// borderRadius: 10,
// justifyContent: "center",
},
img: {
width: 110,
height: 110,
resizeMode: "cover",
// borderRadius: 10,
// marginVertical:10
marginBottom: 8,
// backgroundColor: "#ffaa00",
},
});
export default FeaturedProducts;

132
app/components/main/home/ProductCard.jsx
View File

@ -1,8 +1,11 @@
import { faStar } from "@fortawesome/free-solid-svg-icons"; import { faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useIsFocused, useNavigation } from "@react-navigation/native";
import React from "react"; import React, { useEffect, useState } from "react";
import { import {
ActivityIndicator,
Button,
Dimensions,
Image, Image,
Platform, Platform,
StyleSheet, StyleSheet,
@ -10,42 +13,136 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import FastImage from "react-native-fast-image";
const ProductCard = ({ product }) => { import nobg from "../../../../assets/bg-no-img-big.jpg";
const width = Dimensions.get("window").width;
// import { LazyLoadImage } from 'react-native-lazyload';
const ProductCard = ({ product, productList }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const [variablePrice, setvariablePrice] = useState("");
const isFocused = useIsFocused();
const [imageLoaded, setImageLoaded] = useState(false);
const url = product?.product_image;
// const path = url.replace("https://obanana.com", "http://old.obanana.shop");
// console.log("old.obanana.shop"+path)
useEffect(() => {
// setactiveProduct(product);
const purch = productList?.filter(
(item) => item?.parent_id === product._id
);
// setvariations(purch);
function getLowestHighestPrice(variation) {
let lowestPrice = Infinity;
let highestPrice = -Infinity;
let hasPrice = false;
variation?.forEach((item) => {
let price = null;
// If sale_price is available and not an empty string, use it; otherwise, use regular_price
if (item?.sale_price && item?.sale_price !== "") {
price = parseFloat(item?.sale_price);
} else if (item?.regular_price && item?.regular_price !== "") {
price = parseFloat(item?.regular_price);
}
// Update lowest and highest prices
if (price !== null) {
hasPrice = true;
lowestPrice = Math.min(lowestPrice, price);
highestPrice = Math.max(highestPrice, price);
}
});
if (!hasPrice) {
return null;
}
// If lowest and highest prices are the same, return that price alone
if (lowestPrice === highestPrice) {
return `${lowestPrice}`;
}
// Return the range of lowest to highest prices
return `${lowestPrice}-${highestPrice}`;
}
const priceRange = getLowestHighestPrice(purch);
setvariablePrice(priceRange);
console.log("-----------------------Price Range:", priceRange);
}, [isFocused]);
return ( return (
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
style={styles.container} style={styles.container}
onPress={() => navigation.navigate("Product", { product })} onPress={() => navigation.navigate("Product", { product })}
> >
{/* {imageLoaded ? ( */}
<Image <Image
style={{ width: "100%", height: 200, resizeMode: "cover" }} style={{ width: "100%", height: width * 0.45, resizeMode: "cover" }}
source={{ uri: product.img }} source={{
uri:
product?.product_image !== ""
? // path
product?.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/> />
{/* ) : (
<ActivityIndicator size="large" color="#000" />
)} */}
<View style={{ padding: 10, backgroundColor: "#fff" }}> <View style={{ padding: 10, backgroundColor: "#fff" }}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{product.name} {product.product_name}
</Text> </Text>
{product.product_type === "variable" ? (
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={product.promo ? styles.textPricePromo : styles.textPrice} style={
product.sale_price ? styles.textPricePromo : styles.textPrice
}
> >
₱{product.price} {variablePrice ? (
" ₱" + variablePrice
) : (
<TouchableOpacity>
<Text style={styles.inquire}>Inquire for price</Text>
</TouchableOpacity>
)}
</Text> </Text>
{product.promo ? ( </View>
) : (
<View style={styles.priceCon}>
<Text
style={
product.sale_price ? styles.textPricePromo : styles.textPrice
}
>
{product?.regular_price && product?.regular_price !== null ? (
"₱" + parseFloat(product?.regular_price).toLocaleString("en-US")
) : (
<TouchableOpacity style={styles.inquire}>
<Text style={styles.inquire}>Inquire for price</Text>
</TouchableOpacity>
)}
</Text>
{product.sale_price ? (
<Text style={styles.textPrice}> <Text style={styles.textPrice}>
{" "} {" "}
{product.price - product.price * 0.3}{" "} {/* {(product.regular_price * (1 - product.promo / 100)).toFixed(2) }{" "} */}
<Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text> {parseFloat(product?.sale_price).toLocaleString("en-US")}
{/* <Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text> */}
</Text> </Text>
) : null} ) : null}
</View> </View>
)}
<View style={styles.footer}> <View style={styles.footer}>
<Text style={styles.textMin}> {/* <Text style={styles.textMin}>
min. order: {product.min} {product.per} min. order: {product.min} {product.per}
</Text> </Text> */}
<Text style={styles.textMin}>stock: {product.stock}</Text>
<Text style={styles.textSold}>{product.sold} sold</Text> <Text style={styles.textSold}>{product.sold} sold</Text>
</View> </View>
{product.rate ? ( {product.rate ? (
@ -106,6 +203,13 @@ const styles = StyleSheet.create({
textDecorationLine: "line-through", textDecorationLine: "line-through",
color: "#ffaa00", color: "#ffaa00",
}, },
inquire: {
fontSize: 16,
fontWeight: "600",
// textTransform: "capitalize",
// textDecorationLine: "line-through",
color: "#ffaa00",
},
textMin: { textMin: {
fontSize: 11, fontSize: 11,
fontWeight: "600", fontWeight: "600",

89
app/components/main/home/ProductList.js
View File

@ -1,59 +1,79 @@
import React, { useState } from "react"; import React, { useEffect, useState, memo } from "react";
import { StyleSheet, Text, View } from "react-native"; import { ScrollView, StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "./ProductCard"; import ProductCard from "./ProductCard";
import { products } from "../../../constants/product"; import { products } from "../../../constants/product2";
const ProductList = ({}) => { const ProductList = ({ product, isEndReach, item, refreshing }) => {
// console.log(product);
const [prod, setprod] = useState([]);
useEffect(() => {
setprod(product.splice(1, 20));
}, []);
useEffect(() => {
setprod(product.splice(1, 20));
}, [refreshing]);
useEffect(() => {
// if (isEndReach===true) {
// console.log("onEndReached event triggered");
// console.log("item:", item);
// console.log("product length:", product.length);
if (item <= product.length) {
// setprod(product.splice(1, item));
setprod([...prod, ...product.slice(item, item + 10)]);
// setitem(item + 10);
}
// }
}, [item]);
const handleEndReached = () => {};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.header}>For You</Text> <Text style={styles.header}>For You</Text>
<View style={styles.wrapper}> <View style={styles.wrapper}>
<MasonryList <MasonryList
data={products} data={prod}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
style={styles.list} style={styles.list}
numColumns={2} numColumns={2}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ProductCard product={item} />} renderItem={({ item }) => (
<ProductCard product={item} productList={product} />
)}
containerStyle={styles.container1} containerStyle={styles.container1}
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
// refreshing={isLoadingNext}
// onRefresh={() => refetch({ first: itemCount })}
onEndReachedThreshold={0.1}
// onEndReached={() => loadNext(ITEM_CNT)}
/> />
<Text style={styles.loadtext}>Loading...</Text>
</View> </View>
<View style={styles.load}>
<Text style={styles.loadtext}>Loading...</Text>
</View>
{/* <Text>Load</Text> */}
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// flex: 1,
backgroundColor: "#fff", backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
width: "100%", width: "100%",
// height: "87%",
// paddingHorizontal: 10,
}, },
container1: { container1: {
// flex: 1,
// backgroundColor: "#333",
width: "100%", width: "100%",
// height: "87%",
// paddingHorizontal: 10,
}, },
wrapper: { wrapper: {
width: "100%", width: "100%",
height: "100%", height: "100%",
backgroundColor: "#F3F3F3", backgroundColor: "#F3F3F3",
padding: 10, // padding: 10,
paddingHorizontal: 5, paddingHorizontal: 5,
marginTop: 10, marginTop: 10,
// marginBottom: 100,
}, },
list: { list: {
width: "100%", width: "100%",
height: "100%",
// backgroundColor: "#fff", // backgroundColor: "#fff",
}, },
content: { content: {
@ -69,6 +89,7 @@ const styles = StyleSheet.create({
textTransform: "uppercase", textTransform: "uppercase",
marginLeft: 10, marginLeft: 10,
}, },
img: { img: {
width: 400, width: 400,
height: 200, height: 200,
@ -77,5 +98,31 @@ const styles = StyleSheet.create({
borderRadius: 10, borderRadius: 10,
// backgroundColor: "#ffaa00", // backgroundColor: "#ffaa00",
}, },
load: {
height: 90,
width: "100%",
color: "#ff0000",
marginBottom: 100,
justifyContent: "center",
alignItems: "center",
zIndex: 99,
// padding: 20,
backgroundColor: "#ffaa00",
},
loadtext: {
fontSize: 45,
fontWeight: "600",
textTransform: "uppercase",
// marginLeft: 10,
// height: 90,
width: "100%",
color: "#ff0000",
// marginBottom: 100,
zIndex: 99,
padding: 20,
backgroundColor: "#ffaa00",
},
}); });
export default ProductList; // export default ProductList;
export default memo(ProductList);

48
app/components/main/home/ShopCard.jsx
View File

@ -3,7 +3,7 @@ import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import React from "react"; import React, { useEffect, useState } from "react";
import { import {
Image, Image,
Platform, Platform,
@ -13,25 +13,39 @@ import {
View, View,
} from "react-native"; } from "react-native";
const ShopCard = ({ product }) => { const ShopCard = ({ product, prod }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const [shopProd, setshopProd] = useState([]);
useEffect(() => {
const purch = prod?.filter((item) => item.vendor_api_id === product._id);
setshopProd(purch.slice(0, 3));
}, []);
return ( return (
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
style={styles.container} style={styles.container}
onPress={() => navigation.navigate("Product", { product })} onPress={() => navigation.navigate("Shop", { product })}
> >
<View style={styles.top}> <View style={styles.top}>
<View style={styles.imgWrap}> <View style={styles.imgWrap}>
<Image <Image
style={{ width: 80, height: 80, resizeMode: "cover" }} style={{
source={{ uri: product.logo }} width: 80,
height: 80,
marginRight: 10,
resizeMode: "cover",
}}
source={{
uri: product.vendor_image
? product.vendor_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/> />
</View> </View>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.text} numberOfLines={1}> <Text style={styles.text} numberOfLines={2}>
{product.name} {product.user_login}
</Text> </Text>
<View style={styles.rateCon}> <View style={styles.rateCon}>
{product.rate ? ( {product.rate ? (
@ -47,20 +61,19 @@ const ShopCard = ({ product }) => {
)} )}
</View> </View>
<View style={styles.rateCon}> <View style={styles.rateCon}>
<Text style={styles.textHead}>Average Response Time: </Text>
{product.respoTime ? ( {product.respoTime ? (
<> <>
<Text style={styles.textHead}>Average Response Time: </Text>
<Text style={styles.textRate}>{product.respoTime}hrs</Text> <Text style={styles.textRate}>{product.respoTime}hrs</Text>
</> </>
) : ( ) : (
<Text>No rating </Text> <Text> </Text>
)} )}
</View> </View>
<View style={styles.rateCon}> <View style={styles.rateCon}>
<Text style={styles.textHead}>Main Products: </Text>
{product.respoTime ? ( {product.respoTime ? (
<> <>
<Text style={styles.textHead}>Main Products: </Text>
{product.tags.map((e, i) => ( {product.tags.map((e, i) => (
<Text style={styles.textRate} key={i}> <Text style={styles.textRate} key={i}>
{e},{" "} {e},{" "}
@ -68,7 +81,7 @@ const ShopCard = ({ product }) => {
))} ))}
</> </>
) : ( ) : (
<Text>No rating </Text> <Text> </Text>
)} )}
</View> </View>
</View> </View>
@ -81,7 +94,7 @@ const ShopCard = ({ product }) => {
<View style={styles.bot}> <View style={styles.bot}>
<View style={styles.botWrap}> <View style={styles.botWrap}>
{product.images.map((e, i) => ( {shopProd?.map((e, i) => (
<Image <Image
key={i} key={i}
style={{ style={{
@ -92,7 +105,11 @@ const ShopCard = ({ product }) => {
borderColor: "#ddd", borderColor: "#ddd",
borderRadius: 10, borderRadius: 10,
}} }}
source={{ uri: e }} source={{
uri: e.product_image
? e.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/> />
))} ))}
</View> </View>
@ -122,7 +139,7 @@ const styles = StyleSheet.create({
backgroundColor: "#FFFFFF", backgroundColor: "#FFFFFF",
}, },
imgWrap: { imgWrap: {
width: 80, width: 100,
height: 80, height: 80,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
@ -142,6 +159,7 @@ const styles = StyleSheet.create({
}, },
details: { details: {
height: "100%", height: "100%",
width: "50%",
justifyContent: "center", justifyContent: "center",
// alignItems:'center' // alignItems:'center'
}, },

168
app/components/main/home/ShopList.js
View File

@ -1,74 +1,136 @@
import React, { useState } from "react"; import React, { useEffect, useState, memo } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native"; import { FlatList, StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "./ProductCard"; import ProductCard from "./ProductCard";
import ShopCard from "./ShopCard"; import ShopCard from "./ShopCard";
const ShopList = () => { const ShopList = ({ vendors, item, refreshing, product }) => {
const [itemCount, setitemCount] = useState(10); const [itemCount, setitemCount] = useState(10);
const info = `
<h3>Product Name</h3>
<p>Uploading your app to TestFlight and Google Play beta can be time-consuming (for example, waiting for the build to run through static analysis before becoming available to testers) and limiting (for example, TestFlight can only have one active build at a time). Both Android and iOS provide alternative mechanisms to distribute apps directly to testers, so they can download and install them to physical devices directly from a web browser as soon as the builds are completed.</p>
<p>EAS Build can help you with this by providing shareable URLs for your builds with instructions on how to get them running, so you can share a single URL with a teammate that'll include all of the information they need to test the app.</p>
<p></p>
<div>
<img src="https://i02.appmifile.com/mi-com-product/fly-birds/xiaomi-pad-6-keyboard/m/0406942d4fa798f7cba904800f2ef95a.jpg" style="margin:0!important; padding:0!important;position:relative;" alt="Xiaomi Pad 6 Camera Closeup" >
</div>
<h3 style="text-align: center;"><strong>Xiaomi Pad 6</strong>&nbsp;specs</h3>
<p style="text-align: center;">11-inch WQHD+ (2880 x 1800) IPS LCD<br>144Hz refresh rate, DCI-P3, 309 ppi, Dolby Vision<br>Corning Gorilla Glass 3<br>Snapdragon 870 chipset<br>8-cores, up to 3.2GHz frequency<br>6, 8GB RAM<br>128, 256GB storage<br>13MP f/2.2 rear<br>8MP f/2.2 selfie shooter<br>Wi-Fi 6<br>Bluetooth 5.2<br>USB Type-C<br>Quad speakers, Dolby Atmos<br>MIUI Pad 14<br>8840mAh battery<br>33W charging rate<br>490g<br>Gravity Gray, Gold, Mist Blue</p>
<table style="height: 179px; width: 100%; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="width: 9.1612%;">Minor</th>
<th style="width: 18.5122%;">Branch</th>
<th style="width: 37.5608%;">Documentation</th>
<th style="width: 32.3664%;">Latest</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 9.1612%;">next</td>
<td style="width: 18.5122%;">master</td>
<td style="width: 37.5608%;">-</td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/f3215ce1ad3f67dccd657027c0600388714fd781ef05b146dc906828186fd13b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f6e657874" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/next"></a></td>
</tr>
<tr>
<td style="width: 9.1612%;">6.3</td>
<td style="width: 18.5122%;"><a href="https://github.com/meliorence/react-native-render-html/tree/release/6.3">release/6.3</a></td>
<td style="width: 37.5608%;"><a href="https://meliorence.github.io/react-native-render-html/" rel="nofollow">Official Website</a></td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/1d647fdaa57a9ecbaabe231319ff37b900429af34c55393d2d348870a98f9215/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f362e33" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/release/6.3"></a></td>
</tr>
<tr>
<td style="width: 9.1612%;">5.1&nbsp;&nbsp;</td>
<td style="width: 18.5122%;"><a href="https://github.com/meliorence/react-native-render-html/tree/release/5.1">release/5.1</a>&nbsp;&nbsp;</td>
<td style="width: 37.5608%;"><a href="https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md">release/5.1/README.md</a></td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/e0f61d83694ea428d9b745480ccc1cd47eb788e679357b1ef8820d7c472c779a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f352e31" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/release/5.1"></a></td>
</tr>
<tr>
<td style="width: 9.1612%;">4.2&nbsp;&nbsp;</td>
<td style="width: 18.5122%;"><a href="https://github.com/meliorence/react-native-render-html/tree/release/4.2">release/4.2</a>&nbsp;&nbsp;</td>
<td style="width: 37.5608%;"><a href="https://github.com/meliorence/react-native-render-html/blob/release/4.2/README.md">release/4.2/README.md</a></td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/7dc5a29e35774c807232368fc2adcb280f21aa8cb0774edb06ed1fe03a50a13b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f342e32" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/release/4.2"></a></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">&nbsp;</p>
`;
const products = [ 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", _id: "6527b593f79b5deac5ad6c83",
name: "TecNic Inc.", user_login: "SUNWARD PHILIPPINES",
price: 200, user_email: "sales.sunwardphilippines@gmail.com",
min: 20, date_registered: "2/14/2022 9:00",
per: "pieces", first_name: "SUNWARD",
verified: true, last_name: "PHILIPPINES",
respoTime: 2, billing_company: "",
tags: ["bag", "Jar", "Clothings"], phone: "",
rate: 4.2, address_1: "",
raterTotal: 200, address_2: "",
images: [ city: "",
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg", shipping_address_1: "",
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp", shipping_address_2: "",
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d", shipping_city: "",
], attributes: [],
info: info,
createdAt: "2023-10-20T03:29:11.190Z",
updatedAt: "2023-10-20T03:29:11.190Z",
}, },
{ {
logo: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg", _id: "65153f9672c86c16be0afc34",
name: "TecNic Inc.", user_login: "8MGM TRADING INC",
price: 200, user_email: "mjsalvado@8mgmtrading.com.ph",
min: 20, date_registered: "12/6/2021 3:23:41 AM",
per: "pieces", first_name: "8MGM TRADING INC",
verified: true, last_name: "8MGM",
respoTime: 2, billing_company: "Taguig",
tags: ["bag", "Jar", "Clothings"], phone: "09102903101",
rate: 4.2, address_1: "PMI Tower",
raterTotal: 200, address_2: "PMI Tower",
images: [ city: "Taguig",
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg", shipping_address_1: "PMI Tower",
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp", shipping_address_2: "PMI Tower",
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d", shipping_city: "Taguig",
], file_path_image:
}, "storage/vendor_uploads/1695891350180-toyota-corolla-altis-hybrid-review-road-test-front-quarter-exterior-philippines-5de4a59f318b3.jpg",
{ __v: 0,
logo: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg", attributes: [],
name: "TecNic Inc.", createdAt: "2023-10-20T05:44:50.216Z",
price: 200, updatedAt: "2023-10-20T05:44:50.216Z",
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",
],
}, },
]; ];
const [prod, setprod] = useState([]);
useEffect(() => {
setprod(vendors.splice(1, 20));
}, []);
useEffect(() => {
setprod(vendors.splice(1, 20));
}, [refreshing]);
useEffect(() => {
// if (isEndReach===true) {
// console.log("onEndReached event triggered");
// console.log("item:", item);
// console.log("product length:", product.length);
if (item <= vendors.length) {
// setprod(product.splice(1, item));
setprod([...prod, ...vendors.slice(item, item + 10)]);
// setitem(item + 10);
}
// }
}, [item]);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.header}>For You</Text> <Text style={styles.header}>For You</Text>
<View style={styles.wrapper}> <View style={styles.wrapper}>
<MasonryList <MasonryList
data={products} data={prod}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
style={styles.list} style={styles.list}
numColumns={1} numColumns={1}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ShopCard key={item.id} product={item} />} renderItem={({ item }) => (
<ShopCard key={item.id} product={item} prod={product} />
)}
containerStyle={styles.container1} containerStyle={styles.container1}
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
@ -106,6 +168,7 @@ const styles = StyleSheet.create({
fontWeight: "700", fontWeight: "700",
textTransform: "uppercase", textTransform: "uppercase",
marginLeft: 10, marginLeft: 10,
marginTop: 15,
}, },
img: { img: {
width: 400, width: 400,
@ -116,4 +179,5 @@ const styles = StyleSheet.create({
// backgroundColor: "#ffaa00", // backgroundColor: "#ffaa00",
}, },
}); });
export default ShopList; // export default ShopList;
export default memo(ShopList);

17
app/components/main/home/Swiper.jsx
View File

@ -1,25 +1,28 @@
import React from "react"; import React from "react";
import { StyleSheet, View, Text, Image } from "react-native"; import { StyleSheet, View, Text, Image } from "react-native";
import Swiper from "react-native-swiper"; import Swiper from "react-native-swiper";
import obnBanner1 from"./../../../../assets/obnBanner1.png"
import obnBanner12 from"./../../../../assets/obnBanner12png.png"
const SwiperCon = () => { const SwiperCon = () => {
const slider = [ const slider = [
{ {
img: "https://obanana.com/wp-content/uploads/2023/04/banner-05.jpg", img: obnBanner1,
}, },
{ {
img: "https://obanana.com/wp-content/uploads/2021/07/new-popup-2022-768x394.png", img: obnBanner12,
},
{
img: "https://obanana.com/wp-content/uploads/2023/04/Banner-04_compressed-scaled-1.jpg",
}, },
// {
// img: "https://obanana.com/wp-content/uploads/2023/04/Banner-04_compressed-scaled-1.jpg",
// },
]; ];
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Swiper style={styles.wrapper} autoplay> <Swiper style={styles.wrapper} autoplay >
{slider.map((e, index) => ( {slider.map((e, index) => (
<View style={styles.slide1} key={index}> <View style={styles.slide1} key={index}>
<Image source={{ uri: e.img }} style={styles.image} /> <Image source={ e.img } style={styles.image} />
</View> </View>
))} ))}
</Swiper> </Swiper>

142
app/components/main/home/TopCategories.js
View File

@ -1,52 +1,114 @@
import React from "react"; import React from "react";
import { FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native"; import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import { useNavigation } from "@react-navigation/native";
import appliances from "../../../../assets/categories/Appliances.png";
import Home from "../../../../assets/categories/Home.png";
import EVehicle from "../../../../assets/categories/EVehicle.png";
import Ebike from "../../../../assets/categories/Ebike.png";
import Electronics from "../../../../assets/categories/Electonics.png";
import Solar from "../../../../assets/categories/Solar.png";
import HeavyEquipments from "../../../../assets/categories/HeavyEquipments.png";
const TopCategories = () => { const TopCategories = () => {
const navigation = useNavigation();
const cat = [ 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", img: Solar,
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-03-056-150x150.png", label: "Solar",
"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", img: Ebike,
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-05-217-150x150.png", label: "E-Bike",
"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", img: appliances,
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-102-150x150.png", label: "Appliance",
"https://obanana.com/wp-content/uploads/2022/04/Travel-Tours-150x150.png", },
"https://obanana.com/wp-content/uploads/2022/08/health-vector-150x150.png", {
img: EVehicle,
label: "E-Vehicle",
},
{
img: Electronics,
label: "Electronics",
},
// {
// img: "https://previews.123rf.com/images/sergiobarrios/sergiobarrios1305/sergiobarrios130500039/19499978-stethoscope-doctor-medical-material-detail-control-and-prevention-health.jpg",
// label: "Smart Home",
// },
{
img: HeavyEquipments,
label: "Heavy Equpment",
},
{
img: Home,
label: "Smart Home",
},
// {
// img: "https://static.vecteezy.com/system/resources/previews/023/477/419/non_2x/ai-generative-collection-of-sports-equipment-commonly-sold-at-a-supermarket-circle-label-for-a-sports-goods-free-png.png",
// label: "sports equipment",
// },
// {
// img: "https://www.automotivetrainingequipment.com/cdn/shop/files/AutoEDU-main-phone_800x.jpg?v=1633689905",
// label: "automotive training equipment",
// },
// Add the rest of the items here...
]; ];
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.header}> <Text style={styles.header}> TOP CATEGORIES</Text>
{" "} <View
TOP CATEGORIES style={{
</Text> flexDirection: "row",
<View style={{ flexDirection: "row" }}> width: "100%",
height: 150,
justifyContent: "center",
alignItems: "center",
}}
>
<FlatList <FlatList
// inverted // inverted
// style={styles.wrapper} // style={styles.wrapper}
// numColumns={4}
horizontal horizontal
data={cat ? cat : []} data={cat ? cat : []}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
renderItem={({ item }) => { renderItem={({ item }) => {
return ( return (
<TouchableOpacity onPress={() => {}}> <TouchableOpacity
onPress={() =>
navigation.navigate("Search", { cat: item.label })
}
>
<View style={styles.AddUser}> <View style={styles.AddUser}>
<Image <Image style={styles.img} source={item.img} />
style={styles.img}
source={{
uri: item,
}}
/>
<Text <Text
numberOfLines={2}
ellipsizeMode="tail"
style={{ style={{
color: "#000", color: "#000",
fontSize: 10, fontSize: 12,
flexWrap: "wrap", // flexWrap: "wrap",
fontWeight: "500",
textAlign: "center",
textTransform: "uppercase",
// overflow: "hidden",
// paddingBottom:10
}} }}
></Text> >
{item.label}
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
@ -70,21 +132,33 @@ const styles = StyleSheet.create({
}, },
wrapper: { wrapper: {
width: "100%", width: "100%",
height: 200, height: 90,
// backgroundColor: "#ffaa00", // backgroundColor: "#ffaa00",
}, },
header: { header: {
fontSize: 14, fontSize: 14,
fontWeight: "700", fontWeight: "700",
textTransform: "uppercase", textTransform: "uppercase",
marginBottom: 10,
},
AddUser: {
width: 90,
// height: 70,
// padding: 10,
margin: 5,
backgroundColor: "#ffff",
alignItems: "center",
// borderRadius: 10,
// justifyContent: "center",
}, },
img: { img: {
width: 80, width: 70,
height: 80, height: 70,
resizeMode: "cover", resizeMode: "cover",
borderRadius: 10, borderRadius: 100,
margin: 4,
// backgroundColor: "#ffaa00", // backgroundColor: "#ffaa00",
}, },
}); });
export default TopCategories; export default TopCategories;

52
app/components/main/home/TopShops.js
View File

@ -8,10 +8,14 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import { useNavigation } from "@react-navigation/native";
const TopShops = ({ vendors }) => {
const navigation = useNavigation();
const TopShops = () => {
const cat = [ const cat = [
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-57-885-150x150.png", "https://i.pinimg.com/564x/ca/8c/34/ca8c34e10eb890c49c3b6887064be2d8.jpg",
"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-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-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-01-689-150x150.png",
@ -28,28 +32,39 @@ const TopShops = () => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.header}> TOP SHOPS</Text> <Text style={styles.header}> TOP SHOPS</Text>
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row", marginTop: 15 }}>
<FlatList <MasonryList
horizontal horizontal
data={cat ? cat : []} data={vendors ? vendors.slice(-9, -1) : []}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
renderItem={({ item, i }) => { renderItem={({ item, i }) => {
return ( return (
<TouchableOpacity key={i} onPress={() => {}}> <TouchableOpacity
<View style={styles.AddUser}> key={i}
onPress={() => navigation.navigate("Shop", { product: item })}
>
<View style={styles.addUser}>
<Image <Image
style={styles.img} style={styles.img}
source={{ source={{
uri: item, uri: item.vendor_image
? item.vendor_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}} }}
/> />
<Text <Text
style={{ style={{
color: "#000", color: "#000",
fontSize: 10, fontSize: 13,
flexWrap: "wrap", fontWeight: "600",
textTransform: "uppercase",
textAlign: "center",
// flexWrap: "wrap",
}} }}
></Text> numberOfLines={2}
>
{item.user_login}
</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
@ -68,12 +83,22 @@ const styles = StyleSheet.create({
width: "100%", width: "100%",
// marginHorizontal: 10, // marginHorizontal: 10,
padding: 10, padding: 10,
// marginTop:25
// height: "87%", // height: "87%",
}, },
addUser: {
height: 150,
width: 150,
// justifyContent: "center",
alignItems: "center",
borderWidth: 1,
borderColor: "#eee",
margin: 5,
padding: 5,
},
wrapper: { wrapper: {
width: "100%", width: "100%",
height: 200, height: 250,
// backgroundColor: "#ffaa00", // backgroundColor: "#ffaa00",
}, },
header: { header: {
@ -86,6 +111,7 @@ const styles = StyleSheet.create({
height: 80, height: 80,
resizeMode: "cover", resizeMode: "cover",
borderRadius: 10, borderRadius: 10,
marginVertical: 10,
// backgroundColor: "#ffaa00", // backgroundColor: "#ffaa00",
}, },
}); });

295
app/components/obananapay/Login.jsx Normal file
View File

@ -0,0 +1,295 @@
import { faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import axios from "axios";
import React, { useState } from "react";
import {
Linking,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import {
send_email_api,
user_login,
} from "../../services/obananapayApi/user_api";
const Login = ({ setauth, setuserEmail, setuid, setotpSent, settoken }) => {
const [email, setemail] = useState("");
const [error, seterror] = useState("");
const [errorMessage, seterrorMessage] = useState("");
const [password, setpassword] = useState("");
const handleLogin = (e) => {
/* ---------------Login Function --------------- */
user_login({
users: email.replace(/\s/g, "").toLowerCase(),
password: password,
})
.then((result) => {
if (result.status == 200) {
setuserEmail(result.data.user.email);
settoken(result.data.token);
setuid(result.data.user._id);
send_email();
setauth(true);
console.log("login success");
} else if (result.status == 400) {
seterrorMessage("invalid credentials!");
} else {
seterror(result.message);
// seterrorMessage("an error occured please try again later!");
seterrorMessage("invalid credentials!");
console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
};
const send_email = () => {
const apiKey =
"ODA4MDc4ZThjMDA4NjVhYzU4MTcyNDJjNTMxY2JlZGU6MGQ4ODg3ZTdiZjY1ZWNkMmQ0NzdiOWJhZGIyYTJhY2Q="; // Replace with your Mailjet API key
const apiUrl = "https://api.mailjet.com/v3.1/send";
// const otp = generateOTP(6); // You should have a function to generate the OTP
// const email2 = "kramblooda@gmail.com";
const min = 100000; // Minimum 6-digit number
const max = 999999; // Maximum 6-digit number
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
const requestData = {
Messages: [
{
From: {
Email: "webdev@obanana.com",
Name: "Obanana B2B",
},
To: [
{
Email: email,
Name: "Subscriber",
},
],
Subject: "Obanana OTP",
TextPart: "Greetings from Obanana!",
HTMLPart: `This is your OTP - <b>${randomNumber}</b>. Do not share this with anyone.`,
},
],
};
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Basic ${apiKey}`,
},
};
axios
.post(apiUrl, requestData, config)
.then((response) => {
const status = response.data.Messages[0].Status;
console.log(response.data.Messages[0].Status);
console.log(randomNumber);
setotpSent(randomNumber);
return `${status},${randomNumber}`;
})
.catch((error) => {
console.error("Error sending OTP email:", error);
// Handle the error here
});
if (email) {
const min = 100000; // Minimum 6-digit number
const max = 999999; // Maximum 6-digit number
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
// You would need to implement the generateOTP function as well.
// send_email_api({
// email: email2.replace(/\s/g, "").toLowerCase(),
// html: `<p>your OTP code to continue your obanana pay transaction is ${randomNumber} </p>`,
// })
// .then((result) => {
// setotpSent(randomNumber);
// if (result.status == 200) {
// } else {
// seterror(result.message);
// }
// console.log(result);
// })
// .catch((err) => {
// seterror(err);
// console.error(err);
// console.log(err + "failed to send email");
// });
} else {
// setotpError(true);
}
};
const openStore = () => {
// console.log("u[pp");
if (Platform.OS === "ios") {
console.log("Running on iOS");
Linking.openURL("itms-apps://itunes.apple.com/app/com.coffye.oqebtj");
// Perform iOS-specific operations or rendering
} else if (Platform.OS === "android") {
console.log("Running on Android");
Linking.openURL("market://details?id=com.coffye.oqebtj");
// Perform Android-specific operations or rendering
} else {
console.log("Running on another platform");
// Handle other platforms if necessary
}
};
return (
<View style={styles.container}>
<View style={styles.wrap}>
<View style={styles.wrapTop}>
<Text style={styles.wrapTopHeader}>Obananapay</Text>
</View>
<View style={styles.wrapMiddle}>
<View style={styles.wrapMiddleForm}>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Email Address:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setemail(e);
}}
value={email}
placeholder=""
// keyboardType="numeric"
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Password:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setpassword(e);
}}
value={password}
placeholder=""
// keyboardType="numeric"
secureTextEntry={true}
/>
</View>
</View>
{errorMessage ? (
<Text style={{ color: "red" }}>{errorMessage}</Text>
) : null}
</View>
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
onPress={() => {
handleLogin();
}}
>
<Text style={styles.btnText}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.btn1}
onPress={() => {
openStore();
}}
>
<Text style={styles.btnText}>Download Obananapay</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: "100%",
width: "100%",
},
wrap: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
bottom: 0,
borderColor: "#bebebe",
borderRadius: 25,
},
wrapTop: {
justifyContent: "center",
alignItems: "center",
height: 130,
// backgroundColor:'#ffaa00',
marginVertical: 15,
},
wrapTopHeader: {
fontSize: 25,
fontWeight: "600",
color: "#ffaa00",
},
wrapMiddle: {
justifyContent: "center",
alignItems: "center",
width: "100%",
},
wrapBottom: {
justifyContent: "center",
alignItems: "center",
},
wrapMiddleForm: {},
wrapMiddleFormInput: {
marginVertical: 10,
},
input: {
height: 50,
width: 300,
margin: 12,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
},
inputText: {
marginLeft: 15,
fontSize: 16,
},
btn: {
backgroundColor: "#ffaa00",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btn1: {
// backgroundColor: "#ffaa00",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btnText: {
color: "#fff",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
btnText1: {
color: "#ffaa00",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
});
export default Login;

846
app/components/obananapay/OTP.jsx Normal file
View File

@ -0,0 +1,846 @@
import { useNavigation } from "@react-navigation/native";
import axios from "axios";
import React, { useEffect, useRef, useState } from "react";
import {
TextInput,
View,
Text,
StyleSheet,
TouchableOpacity,
} from "react-native";
import {
update_order_item_by_reference_number,
webhook,
} from "../../services/api/controllers/order";
import { create_transaction, get_user } from "../../services/obananapayApi/transaction_api";
import { update_payment } from "../../services/obananapayGatewayApi/controllers/payment_api";
const OTP = ({
setotpCheck,
otp,
token,
amount,
desc,
uid,
setsuccess,
setloading,
pay_refno,
username,
email,
number,
setsuccessCOD,
setlowBal,
}) => {
const et1 = useRef();
const et2 = useRef();
const et3 = useRef();
const et4 = useRef();
const et5 = useRef();
const et6 = useRef();
const [f1, setF1] = useState("");
const [f2, setF2] = useState("");
const [f3, setF3] = useState("");
const [f4, setF4] = useState("");
const [f5, setF5] = useState("");
const [f6, setF6] = useState("");
const [errorOTP, seterrorOTP] = useState(false);
const [count, setCount] = useState(20);
const [checkOTP, setcheckOTP] = useState(otp ?? "");
const [resend, setresend] = useState(false);
const [useResendOTP, setuseResendOTP] = useState(false);
console.log("token:" + token);
console.log("uid:" + uid);
const navigation = useNavigation();
useEffect(() => {
const interval = setInterval(() => {
if (count == 0) {
clearInterval(interval);
} else {
setCount(count - 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [count]);
useEffect(() => {
if (resend) {
setCount(20);
const interval = setInterval(() => {
if (count == 0) {
clearInterval(interval);
} else {
setCount(count - 1);
}
}, 1000);
setresend(false);
return () => {
clearInterval(interval);
};
}
}, [resend]);
/* ---------------check if the sent otp and the entered otp is the same--------------- */
const otpValidate = () => {
// seterrorOTP(false);
let enteredOtp = f1 + f2 + f3 + f4 + f5 + f6;
console.log(checkOTP);
console.log(enteredOtp + " " + checkOTP + " " + otp);
console.log("isresend: " + resend);
if (useResendOTP === true) {
console.log("checking resend otp");
if (enteredOtp.toString() == checkOTP.toString()) {
console.log("success otp");
setotpCheck(true);
SendTransaction();
} else {
seterrorOTP(true);
}
} else {
console.log("checking otp");
if (enteredOtp.toString() == otp.toString()) {
console.log("success otp");
setotpCheck(true);
SendTransaction();
} else {
seterrorOTP(true);
}
}
};
const SendTransaction = () => {
// Get the URL search params
// Get the 'amount' and 'description' values
const characters =
"0123456789abcdefghijklmnopqrstubwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
let refno = "";
for (let i = 0; i < 13; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
refno += characters.charAt(randomIndex);
}
const receiverId = "6458dd6066139b3fee29a9cf";
setloading(true);
/* ---------------Get User--------------- */
get_user({
id: uid,
token: token,
})
.then((res) => {
console.log(res.data);
if (parseFloat(amount) < parseFloat(res.data.balance)) {
create_transaction({
body: {
from_id: uid,
to_id: receiverId,
amount: parseFloat(amount),
type: "transfer",
notes: desc,
ref_no: refno,
},
token: token,
})
.then((result) => {
setloading(false);
if (result.status === 200) {
update_payment({
id: pay_refno,
body: {
status: "paid",
payments: {
attributes: {
amount: amount * 100,
billing: {
email: email,
name: username,
phone: number,
},
currency: "PHP",
description: desc,
disputed: false,
fee: 0,
livemode: false,
net_amount: amount * 100,
origin: "links",
payment_intent_id: null,
payout: null,
source: {
type: "obananapay",
},
statement_descriptor: "Obanana E-commerce Checkout",
status: "paid",
tax_amount: 0,
taxes: [],
available_at: null,
paid_at: null,
},
},
},
// token: token,
})
.then((results) => {
if (results.status === 200) {
console.log("successful update payment");
// update_order_item_by_reference_number({
// refId: pay_refno,
// body: {
// payment_status: "PAID",
// order_status: "TO SHIP",
// details: results.data,
// },
// // token: token,
// })
// .then(() => {
// if (result.status === 200) {
// console.log("successful update payment on obanana order");
// setsuccess(true);
// // navigation.reset({
// // index: 0,
// // routes: [{ name: 'Home' }],
// // });
// } else {
// console.log("failed update payment on obanana order");
// }
// })
// .catch((err) => {
// console.error(err);
// });
const characters =
"0123456789abcdefghijklmnopqrstubwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
let refno1 = "";
for (let i = 0; i < 16; i++) {
const randomIndex = Math.floor(
Math.random() * characters.length
);
refno1 += characters.charAt(randomIndex);
}
const refnoFinal = "obn_evt_id_" + refno1;
const currentDate = new Date();
const universalDate = currentDate.toISOString();
webhook({
body: {
data: {
id: refnoFinal,
type: "event",
attributes: {
type: "link.payment.paid",
livemode: false,
data: results.data,
previous_data: {},
created_at: universalDate,
updated_at: universalDate,
},
},
},
})
.then((res) => {
if (res.status === 200) {
console.log(
"successful update payment on obanana order"
);
setsuccessCOD(true);
setsuccess(true);
// navigation.reset({
// index: 0,
// routes: [{ name: 'Home' }],
// });
} else {
console.log(
"failed update payment on obanana order"
);
}
})
.catch((err) => {
console.error(err);
});
} else {
console.log("failed update payment");
}
})
.catch((err) => {
console.error(err);
});
// create_notification({
// body: {
// from_id: receiverId,
// to_id: receiverId,
// message: `you received ₱${amount} from Obanana E-commerce`,
// title: "Received Money fom Obanana",
// },
// token: token,
// })
// .then((result) => {})
// .catch((err) => {
// console.error(err);
// });
} else {
console.log("failed obanana payment transaction");
}
console.log(" transaction status: " + result.status);
})
.catch((err) => {
console.error(err);
});
} else {
setloading(false);
setlowBal(true);
}
})
.catch((err) => {
console.error(err);
console.log(err + "failed to get uset");
});
// create_transaction({
// body: {
// from_id: uid,
// to_id: receiverId,
// amount: parseFloat(amount),
// type: "transfer",
// notes: desc,
// ref_no: refno,
// },
// token: token,
// })
// .then((result) => {
// setloading(false);
// if (result.status === 200) {
// update_payment({
// id: pay_refno,
// body: {
// status: "paid",
// payments: {
// attributes: {
// amount: amount * 100,
// billing: {
// email: email,
// name: username,
// phone: number,
// },
// currency: "PHP",
// description: desc,
// disputed: false,
// fee: 0,
// livemode: false,
// net_amount: amount * 100,
// origin: "links",
// payment_intent_id: null,
// payout: null,
// source: {
// type: "obananapay",
// },
// statement_descriptor: "Obanana E-commerce Checkout",
// status: "paid",
// tax_amount: 0,
// taxes: [],
// available_at: null,
// paid_at: null,
// },
// },
// },
// // token: token,
// })
// .then((results) => {
// if (results.status === 200) {
// console.log("successful update payment");
// // update_order_item_by_reference_number({
// // refId: pay_refno,
// // body: {
// // payment_status: "PAID",
// // order_status: "TO SHIP",
// // details: results.data,
// // },
// // // token: token,
// // })
// // .then(() => {
// // if (result.status === 200) {
// // console.log("successful update payment on obanana order");
// // setsuccess(true);
// // // navigation.reset({
// // // index: 0,
// // // routes: [{ name: 'Home' }],
// // // });
// // } else {
// // console.log("failed update payment on obanana order");
// // }
// // })
// // .catch((err) => {
// // console.error(err);
// // });
// const characters =
// "0123456789abcdefghijklmnopqrstubwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
// let refno1 = "";
// for (let i = 0; i < 16; i++) {
// const randomIndex = Math.floor(
// Math.random() * characters.length
// );
// refno1 += characters.charAt(randomIndex);
// }
// const refnoFinal = "obn_evt_id_" + refno1;
// const currentDate = new Date();
// const universalDate = currentDate.toISOString();
// webhook({
// body: {
// data: {
// id: refnoFinal,
// type: "event",
// attributes: {
// type: "link.payment.paid",
// livemode: false,
// data: results.data,
// previous_data: {},
// created_at: universalDate,
// updated_at: universalDate,
// },
// },
// },
// })
// .then((res) => {
// if (res.status === 200) {
// console.log("successful update payment on obanana order");
// setsuccessCOD(true);
// setsuccess(true);
// // navigation.reset({
// // index: 0,
// // routes: [{ name: 'Home' }],
// // });
// } else {
// console.log("failed update payment on obanana order");
// }
// })
// .catch((err) => {
// console.error(err);
// });
// } else {
// console.log("failed update payment");
// }
// })
// .catch((err) => {
// console.error(err);
// });
// // create_notification({
// // body: {
// // from_id: receiverId,
// // to_id: receiverId,
// // message: `you received ₱${amount} from Obanana E-commerce`,
// // title: "Received Money fom Obanana",
// // },
// // token: token,
// // })
// // .then((result) => {})
// // .catch((err) => {
// // console.error(err);
// // });
// } else {
// console.log("failed obanana payment transaction");
// }
// console.log(" transaction status: " + result.status);
// })
// .catch((err) => {
// console.error(err);
// });
};
const send_email = () => {
setuseResendOTP(false);
const apiKey =
"ODA4MDc4ZThjMDA4NjVhYzU4MTcyNDJjNTMxY2JlZGU6MGQ4ODg3ZTdiZjY1ZWNkMmQ0NzdiOWJhZGIyYTJhY2Q="; // Replace with your Mailjet API key
const apiUrl = "https://api.mailjet.com/v3.1/send";
// const otp = generateOTP(6); // You should have a function to generate the OTP
// const email2 = "kramblooda@gmail.com";
const min = 100000; // Minimum 6-digit number
const max = 999999; // Maximum 6-digit number
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
const requestData = {
Messages: [
{
From: {
Email: "webdev@obanana.com",
Name: "Obanana B2B",
},
To: [
{
Email: email,
Name: "Subscriber",
},
],
Subject: "Obanana OTP",
TextPart: "Greetings from Obanana!",
HTMLPart: `This is your OTP - <b>${randomNumber}</b>. Do not share this with anyone.`,
},
],
};
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Basic ${apiKey}`,
},
};
axios
.post(apiUrl, requestData, config)
.then((response) => {
const status = response.data.Messages[0].Status;
console.log(response.data.Messages[0].Status);
console.log(randomNumber);
setcheckOTP(randomNumber);
setresend(true);
setuseResendOTP(true);
console.log("resending " + resend);
return `${status},${randomNumber}`;
})
.catch((error) => {
console.error("Error sending OTP email:", error);
// Handle the error here
});
if (email) {
const min = 100000; // Minimum 6-digit number
const max = 999999; // Maximum 6-digit number
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
// You would need to implement the generateOTP function as well.
// send_email_api({
// email: email2.replace(/\s/g, "").toLowerCase(),
// html: `<p>your OTP code to continue your obanana pay transaction is ${randomNumber} </p>`,
// })
// .then((result) => {
// setotpSent(randomNumber);
// if (result.status == 200) {
// } else {
// seterror(result.message);
// }
// console.log(result);
// })
// .catch((err) => {
// seterror(err);
// console.error(err);
// console.log(err + "failed to send email");
// });
} else {
// setotpError(true);
}
};
// attributes: {
// amount: amount,
// billing: {
// email: email,
// name: name,
// phone: contact,
// },
// currency: "PHP",
// description: `${product.product_name}, ordered from obanana e-commerce`,,
// disputed: false,
// fee: 0,
// livemode: false,
// net_amount: amount,
// origin: "links",
// payment_intent_id: null,
// payout: null,
// source: {
// type: "obananapay",
// },
// statement_descriptor: "Obanana E-commerce Checkout",
// status: "paid",
// tax_amount: 4,
// taxes: [
// ],
// available_at: null,
// paid_at: null,
// },
return (
<View style={styles.container}>
<View style={styles.wrap}>
<Text style={styles.title1}>OTP Verification</Text>
<Text style={styles.title}>
Please enter the verification code we just sent on your Phone Number .
</Text>
<View style={styles.otpView}>
<TextInput
ref={et1}
style={[
styles.inputView,
{ borderColor: f1.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f1}
onChangeText={(txt) => {
setF1(txt);
if (txt.length >= 1) {
et2.current.focus();
}
}}
/>
<TextInput
ref={et2}
style={[
styles.inputView,
{ borderColor: f2.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f2}
onChangeText={(txt) => {
setF2(txt);
if (txt.length >= 1) {
et3.current.focus();
} else if (txt.length < 1) {
et1.current.focus();
}
}}
/>
<TextInput
ref={et3}
style={[
styles.inputView,
{ borderColor: f3.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f3}
onChangeText={(txt) => {
setF3(txt);
if (txt.length >= 1) {
et4.current.focus();
} else if (txt.length < 1) {
et2.current.focus();
}
}}
/>
<TextInput
ref={et4}
style={[
styles.inputView,
{ borderColor: f4.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f4}
onChangeText={(txt) => {
setF4(txt);
if (txt.length >= 1) {
et5.current.focus();
} else if (txt.length < 1) {
et3.current.focus();
}
}}
/>
<TextInput
ref={et5}
style={[
styles.inputView,
{ borderColor: f5.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f5}
onChangeText={(txt) => {
setF5(txt);
if (txt.length >= 1) {
et6.current.focus();
} else if (txt.length < 1) {
et4.current.focus();
}
}}
/>
<TextInput
ref={et6}
style={[
styles.inputView,
{ borderColor: f6.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f6}
onChangeText={(txt) => {
setF6(txt);
if (txt.length >= 1) {
et6.current.focus();
} else if (txt.length < 1) {
et5.current.focus();
}
}}
/>
</View>
{errorOTP ? (
<View style={{ width: "100%", marginBottom: 10 }}>
<Text
style={{
fontSize: 20,
fontWeight: "500",
color: "#ed0000",
alignSelf: "center",
textAlign: "center",
paddingTop: 10,
paddingLeft: 10,
}}
>
Wrong OTP!!
</Text>
</View>
) : null}
<TouchableOpacity
disabled={
f1 !== "" &&
f2 !== "" &&
f3 !== "" &&
f4 !== "" &&
f5 !== "" &&
f6 !== ""
? false
: true
}
style={[
styles.verifyOtpBtn,
{
backgroundColor:
f1 !== "" &&
f2 !== "" &&
f3 !== "" &&
f4 !== "" &&
f5 !== "" &&
f6 !== ""
? "#4caf50"
: "orange",
},
]}
onPress={() => otpValidate()}
>
<Text style={styles.btntxt}>Next</Text>
</TouchableOpacity>
<View style={styles.resendView}>
<Text
style={{
fontSize: 18,
alignSelf: "flex-start",
fontWeight: "700",
color: count == 0 ? "orange" : "#7b7b7b",
}}
// disabled={f1 && f2 && f3 && f4 && f5 && f6 ? false : true}
onPress={() => {
send_email();
}}
>
Resend Code
</Text>
{count !== 0 && (
<Text style={{ marginLeft: 20, fontSize: 18 }}>
{count + " seconds"}
</Text>
)}
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: "100%",
bottom: 0,
},
wrap: {
backgroundColor: "#fff",
height: "86%",
bottom: 0,
marginTop: 30,
// borderWidth: 2,
// borderColor: "#eeeeee",
borderRadius: 25,
padding: 10,
},
wrapTop: {
height: "4%",
bottom: 0,
},
wrapHeader: {
justifyContent: "space-between",
flexDirection: "row",
},
wrapHeaderText: {
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
color: "#2e2e2e",
},
title: {
fontSize: 15,
fontWeight: "500",
marginTop: 5,
marginLeft: 35,
alignSelf: "flex-start",
textAlign: "center",
width: "83%",
color: "#969696",
},
title1: {
fontSize: 25,
fontWeight: "700",
marginTop: 10,
marginLeft: 25,
alignSelf: "center",
textAlign: "center",
width: "83%",
color: "#525252",
},
otpView: {
width: "100%",
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
marginTop: 50,
},
inputView: {
width: 50,
height: 50,
borderWidth: 0.5,
borderRadius: 15,
marginLeft: 10,
textAlign: "center",
fontSize: 18,
fontWeight: "700",
},
verifyOtpBtn: {
width: "40%",
height: 45,
backgroundColor: "orange",
borderRadius: 15,
alignSelf: "center",
marginTop: 20,
justifyContent: "center",
alignItems: "center",
},
btntxt: {
color: "#fff",
fontSize: 20,
fontWeight: "700",
},
resendView: {
flexDirection: "row",
alignSelf: "center",
marginTop: 10,
marginBottom: 30,
fontWeight: "200",
},
});
export default OTP;

93
app/components/obananapay/ProcessPayment.jsx Normal file
View File

@ -0,0 +1,93 @@
import { faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import React, { useState } from "react";
import {
ActivityIndicator,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
const ProcessPayment = ({ }) => {
const [email, setemail] = useState("");
const [password, setpassword] = useState("");
return (
<View style={styles.container}>
<View style={styles.wrap}>
<View style={styles.otpSuccess}>
<View style={styles.otpWrap}>
<ActivityIndicator size="large" color="#00ff00" />
<Text style={styles.otpWrapText}>Processing Payment</Text>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: "100%",
width: "100%",
},
wrap: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
bottom: 0,
borderColor: "#bebebe",
borderRadius: 25,
},
wrapTop: {
justifyContent: "center",
alignItems: "center",
height: 130,
// backgroundColor:'#ffaa00',
marginVertical: 15,
},
wrapTopHeader: {
fontSize: 25,
fontWeight: "600",
color: "#ffaa00",
},
wrapMiddle: {
justifyContent: "center",
alignItems: "center",
width: "100%",
},
wrapBottom: {
justifyContent: "center",
alignItems: "center",
},
otpSuccess: {
justifyContent: "center",
alignItems: "center",
},
otpWrap: {
height: 200,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
otpWrapText: {
fontWeight: "600",
letterSpacing: 1,
fontSize: 19,
color: "#2e2e2e",
marginLeft: 10,
},
btnText: {
color: "#fff",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
});
export default ProcessPayment;

771
app/components/product/BottomNav.js
View File

@ -1,32 +1,718 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"; import {
import { faCartShopping, faStore } from "@fortawesome/free-solid-svg-icons"; Dimensions,
Image,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import {
faCartShopping,
faMinus,
faPlus,
faStore,
} from "@fortawesome/free-solid-svg-icons";
import { import {
faBell, faBell,
faComment, faComment,
faComments, faComments,
faUserCircle, faUserCircle,
} from "@fortawesome/free-regular-svg-icons"; } from "@fortawesome/free-regular-svg-icons";
import Modal from "react-native-modal";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
const BottomNav = ({ settabActive, activeTab, setcartList, cartList,product }) => { import {
create_order,
get_order,
get_orders_by_customer,
update_order,
update_order_item,
} from "../../services/api/controllers/order";
// import { user } from "../../constants/user";
import { get_vendor } from "../../services/api/controllers/vendor";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useToast } from "react-native-toast-notifications";
import CheckOutModal from "./CheckOutModal";
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").width;
const BottomNav = ({
settabActive,
activeTab,
setcartList,
cartList,
product,
activeVar,
setModalVisible,
}) => {
const navigation = useNavigation(); const navigation = useNavigation();
const [inputValue, setInputValue] = useState("1");
const [orderId, setorderId] = useState("");
const [order, setorder] = useState([]);
const [orders, setorders] = useState([]);
const [orderExist, setorderExist] = useState(false);
const [orderIdE, setorderIdE] = useState(false);
const [orderE, setorderE] = useState(false);
const [token, settoken] = useState("");
const [itemId, setitemId] = useState(false);
const [refresh, setrefresh] = useState(false);
const [minLimit, setminLimit] = useState(null);
const [isminLimit, setisminLimit] = useState(false);
const [maxLimit, setmaxLimit] = useState(null);
const [ismaxLimit, setismaxLimit] = useState(false);
const [vendorName, setvendorName] = useState("");
const toast = useToast();
// console.log(product._id);
useEffect(() => {
if (product) {
console.log(" this product min order is" + product?.minimum_order);
if (product?.minimum_order) {
setisminLimit(true);
setminLimit(product?.minimum_order);
setInputValue(product?.minimum_order);
} else {
setisminLimit(false);
}
if (product?.stock) {
setismaxLimit(true);
setmaxLimit(product?.stock);
// setInputValue(product?.minimum_order);
} else {
setisminLimit(false);
}
}
}, [product]);
console.log("---------------" + orderExist + "-----" + orderIdE);
useEffect(() => {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
settoken(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
get_vendor({
id: product.vendor_api_id,
})
.then((result) => {
console.log("successful get vendor name" + result.data.user_login);
if (result.status === 200) {
setvendorName(result.data.user_login);
}
})
.catch((err) => {
console.error(err);
});
if (product) {
console.log(" this product min order is" + product?.minimum_order);
if (product?.minimum_order) {
setisminLimit(true);
setminLimit(product?.minimum_order);
setInputValue(product?.minimum_order);
}
if (product?.stock) {
setismaxLimit(true);
setmaxLimit(product?.stock);
// setInputValue(product?.minimum_order);
} else {
setisminLimit(false);
}
}
}, []);
useEffect(() => {
if (refresh === true) {
get_orders_by_customer({ id: user[0]._id })
.then((result) => {
console.log("successful get order" + result.status);
findOrderIdByProductId(result.data, product?._id);
setorders(result.data);
setrefresh(false);
})
.catch((err) => {
console.error(err);
});
}
}, [refresh]);
useEffect(() => {
// if (refresh === true) {
// get_orders_by_customer({ id: user[0]._id })
// .then((result) => {
// console.log("successful get order" + result.status);
console.log(product._id + "-------------------------");
findOrderIdByProductId(orders, product?._id);
// setorders(result.data);
// setrefresh(false);
// })
// .catch((err) => {
// console.error(err);
// });
// }
}, [product]);
const [user, setuser] = useState([]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_orders_by_customer({ id: userDataArray[0]._id })
.then((result) => {
console.log("successful get order" + result.status);
findOrderIdByProductId(result.data, product?._id);
setorders(result.data);
})
.catch((err) => {
console.error(err);
});
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
// Function to handle text input change
const handleTextChange = (text) => {
// Use a regular expression to allow only numeric characters
const numericValue = text.replace(/[^0-9]/g, "");
if (!isminLimit || !ismaxLimit) {
setInputValue(parseInt(numericValue));
} else {
if (parseInt(numericValue) < parseInt(minLimit)) {
toast.show(`The minimum order for this product is ${minLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
setInputValue(parseInt(minLimit));
} else if (parseInt(numericValue) > parseInt(maxLimit)) {
toast.show(`The maximum order for this product is ${maxLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
setInputValue(parseInt(minLimit));
} else {
setInputValue(parseInt(numericValue));
}
}
};
const handleInputChange = (text) => {
if (!isminLimit || !ismaxLimit) {
if (text === "add") {
setInputValue((parseInt(inputValue, 10) + 1).toString()); // Parse to integer and convert back to string
} else if (text === "minus") {
const newValue = parseInt(inputValue, 10) - 1;
setInputValue(newValue >= 1 ? newValue.toString() : 1); // Ensure it's not less than 1
}
} else {
if (text === "add") {
const newValue = parseInt(inputValue, 10) + 1;
if (parseInt(newValue) > parseInt(maxLimit)) {
toast.show(`The maximum order for this product is ${maxLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
} else {
setInputValue((parseInt(inputValue, 10) + 1).toString()); // Parse to integer and convert back to string
}
} else if (text === "minus") {
const newValue = parseInt(inputValue, 10) - 1;
if (parseInt(newValue) < parseInt(minLimit)) {
toast.show(`The minimum order for this product is ${minLimit}!`, {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
} else {
setInputValue(newValue >= 1 ? newValue.toString() : 1); // Ensure it's not less than 1
}
}
}
};
const tabSwitch = (e) => { const tabSwitch = (e) => {
settabActive(e); settabActive(e);
}; };
const addToCart = () => { function findOrderIdByProductId(orders, productIdToFind) {
// Create a copy of the current cartList and add the new product console.log("checking product on cart" + productIdToFind);
const updatedCart = [...cartList, product]; const sortOrder =
orders?.filter(
(item) => item.status === "CART" || item.status === "Cart"
) ?? [];
for (const order of sortOrder) {
console.log("orders checking");
const orderIdd = order._id;
const item = order.items.find(
(item) => item.product.product_id === productIdToFind
);
if (item) {
setitemId(item._id);
// console.log(order._id + "+" + item.product.product_id);
setorderE(order);
setorderIdE(orderIdd);
setorderExist(true);
console.log(
"---------------" + orderExist + "-----" + orderIdE + "--------2"
);
// Update the cartList state with the new cart array console.log("found it");
setcartList(updatedCart); }
}
return null; // Return null if the product_id is not found in any item
}
const addToCart = () => {
// Create a copy of the current cartList
// const updatedCart = [...cartList];
// // Modify the product object to include inputValue and variation
// const modifiedProduct = {
// ...product,
// quantity: parseInt(inputValue),
// variation: "blue",
// };
// // Add the modified product to the updatedCart array
// updatedCart.push(modifiedProduct);
// // Update the cartList state with the new cart array
// setcartList(updatedCart);
// console.log(orderExist + orderIdE + itemId);
console.log(product?.product_type);
if (product.product_type === "variable") {
console.log("variable");
if (!activeVar || activeVar === null) {
toast.show("Select variation first!", {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
}
} else if (product.product_type === "variation") {
console.log("variation");
// function checkVariantValue(variantsArray) {
// let variants = "";
// if (variantsArray.length > 0) {
// const variant = variantsArray[0]; // Accessing the first element in the variants array
// for (let key in variant) {
// // if (key !== "_id" && variant[key] !== null && variant[key] !== "") {
// // }
// variants === variants + "eyy";
// }
// }
// return variants; // Returning null if no non-empty value is found
// }
// const result = checkVariantValue(product.variants);
// console.log(
// result + "------------------------------------------------------------"
// );
// console.log(product.variants);
AsyncStorage.getItem("AccessToken")
.then((pass) => {
console.log(pass);
if (pass !== null) {
if (orderExist) {
const quan = orderE.items[0].quantity;
console.log(quan);
const quanti = parseInt(quan) + parseInt(inputValue);
console.log("final: " + quanti);
update_order_item({
token: token,
orderId: orderIdE,
itemId: itemId,
body: {
quantity: quanti.toString(),
},
})
.then((result) => {
// console.log("successful tran" + result);
if (result.status === 200) {
// setInputValue(quan.toString()); // Parse to integer and convert back to string
update_order({
token: token,
id: orderIdE,
body: {
total_amount: orderE.items[0].price * quanti,
},
})
.then((results) => {
if (results.status === 200) {
console.log("price: " + results.data.total_amount);
toast.show("Added to Cart!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
setrefresh(true);
} else {
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
}
})
.catch((err) => {
console.error(err);
});
} else if (orderExist === false) {
create_order({
token,
token,
body: {
customer: {
customer_id: user[0]?._id,
name: user[0]?.first_name + " " + user[0]?.last_name,
},
// order_date: "2023/09/27",
total_amount:
product.sale_price ??
product.regular_price * parseFloat(inputValue),
items: [
{
product: {
product_image: product.product_image,
product_id: product._id,
name: product.product_name,
},
price: product.sale_price ?? product.regular_price,
quantity: inputValue,
vendor_id: product.vendor_api_id,
vendor_name: vendorName,
},
],
status: "CART",
shipping_fee: product.shipping_fee
? product.shipping_fee
: 50,
},
})
.then((result) => {
console.log("successful add to cart" + result.status);
setrefresh(true);
toast.show("Added to Cart!", {
type: "success",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
})
.catch((err) => {
console.error(err);
});
}
} else {
navigation.navigate("Login");
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
} else {
console.log("simple");
AsyncStorage.getItem("AccessToken")
.then((pass) => {
console.log(pass);
if (pass !== null) {
if (orderExist) {
const quan = orderE.items[0].quantity;
console.log(quan);
const quanti = parseInt(quan) + parseInt(inputValue);
console.log("final: " + quanti);
update_order_item({
token: token,
orderId: orderIdE,
itemId: itemId,
body: {
quantity: quanti.toString(),
},
})
.then((result) => {
// console.log("successful tran" + result);
if (result.status === 200) {
// setInputValue(quan.toString()); // Parse to integer and convert back to string
update_order({
token: token,
id: orderIdE,
body: {
total_amount: orderE.items[0].price * quanti,
},
})
.then((results) => {
if (results.status === 200) {
console.log("price: " + results.data.total_amount);
toast.show("Added to Cart!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
setrefresh(true);
} else {
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
}
})
.catch((err) => {
console.error(err);
});
} else if (orderExist === false) {
create_order({
token,
token,
body: {
customer: {
customer_id: user[0]?._id,
name: user[0]?.first_name + " " + user[0]?.last_name,
},
// order_date: "2023/09/27",
total_amount:
product.sale_price ??
product.regular_price * parseFloat(inputValue),
items: [
{
product: {
product_image: product.product_image,
product_id: product._id,
name: product.product_name,
},
price: product.sale_price ?? product.regular_price,
quantity: inputValue,
vendor_id: product.vendor_api_id,
vendor_name: vendorName,
},
],
status: "CART",
shipping_fee: product.shipping_fee
? product.shipping_fee
: 50,
},
})
.then((result) => {
console.log("successful add to cart" + result.status);
setrefresh(true);
toast.show("Added to Cart!", {
type: "success",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
})
.catch((err) => {
console.error(err);
});
}
} else {
navigation.navigate("Login");
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}
};
const checkOut = () => {
/* ---------------Check for the user saved email--------------- */
if (product.product_type === "variable") {
if (!activeVar || activeVar === null) {
toast.show("Select variation first!", {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
} else {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
console.log("checkout " + pass);
if (pass === null) {
navigation.navigate("Login");
} else if (pass !== null) {
create_order({
token: token,
body: {
customer: {
customer_id: user[0]?._id,
name: user[0]?.first_name + " " + user[0]?.last_name,
product_image: product.product_image,
},
// order_date: "2023/09/27",
total_amount:
product.sale_price ??
product.regular_price * parseFloat(inputValue),
items: [
{
product: {
product_image: product.product_image,
product_id: product._id,
name: product.product_name,
},
price: product.sale_price ?? product.regular_price,
quantity: inputValue,
vendor_id: product.vendor_api_id,
vendor_name: vendorName,
},
],
status: "TO CHECKOUT",
shipping_fee: product.shipping_fee
? product.shipping_fee
: 50,
},
})
.then((result) => {
console.log("successful transaction" + result.status);
if (result.status === 201) {
// console.log(result.data)
setorder(result.data);
setorderId(result.data._id);
navigation.navigate("CheckOut", {
product: result.data,
orderId: result.data._id,
});
}
})
.catch((err) => {
console.error(err);
});
}
})
.catch((error) => {
console.log(error + "weeewwww");
navigation.navigate("Login");
});
}
} else {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
console.log("checkout " + pass);
if (pass === null) {
navigation.navigate("Login");
} else if (pass !== null) {
create_order({
token,
token,
body: {
customer: {
customer_id: user[0]?._id,
name: user[0]?.first_name + " " + user[0]?.last_name,
product_image: product.product_image,
},
// order_date: "2023/09/27",
total_amount:
product.sale_price ??
product.regular_price * parseFloat(inputValue),
items: [
{
product: {
product_image: product.product_image,
product_id: product._id,
name: product.product_name,
},
price: product.sale_price ?? product.regular_price,
quantity: inputValue,
vendor_id: product.vendor_api_id,
vendor_name: vendorName,
},
],
status: "TO CHECKOUT",
shipping_fee: product.shipping_fee ? product.shipping_fee : 50,
},
})
.then((result) => {
console.log("successful transaction" + result.status);
if (result.status === 201) {
// console.log(result.data)
setorder(result.data);
setorderId(result.data._id);
navigation.navigate("CheckOut", {
product: result.data,
orderId: result.data._id,
});
}
})
.catch((err) => {
console.error(err);
});
}
})
.catch((error) => {
console.log(error + "weeewwww");
navigation.navigate("Login");
});
}
}; };
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.wrapper}> <View style={styles.wrapper}>
<TouchableOpacity style={styles.button} onPress={() => addToCart()}> <TouchableOpacity
{activeTab === "cart" ? ( style={styles.button}
onPress={() =>
product.regular_price
? addToCart()
: toast.show(
`you need to inquire the seller for the price of this product!`,
{
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
}
)
}
>
{orderExist ? (
<FontAwesomeIcon <FontAwesomeIcon
icon={faCartShopping} icon={faCartShopping}
color={"#FFAA00"} color={"#FFAA00"}
@ -40,9 +726,57 @@ const BottomNav = ({ settabActive, activeTab, setcartList, cartList,product }) =
/> />
)} )}
</TouchableOpacity> </TouchableOpacity>
<View style={styles.quantity}>
<TouchableOpacity
style={styles.buttonQty}
onPress={() => handleInputChange("minus")}
>
<FontAwesomeIcon icon={faMinus} color={"#888888"} size={15} />
</TouchableOpacity>
<TextInput
style={styles.input}
value={inputValue}
onChangeText={handleTextChange}
keyboardType="numeric" // This sets the keyboard to show numeric keys
/>
<TouchableOpacity
style={styles.buttonQty}
onPress={() => handleInputChange("add")}
>
<FontAwesomeIcon icon={faPlus} color={"#888888"} size={15} />
</TouchableOpacity>
</View>
<TouchableOpacity <TouchableOpacity
style={styles.button1} style={styles.button1}
onPress={() => navigation.navigate("CheckOut",{product})} onPress={() => {
if (!isminLimit) {
product.regular_price
? checkOut()
: toast.show(
`you need to inquire the seller for the price of this product!`,
{
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
}
);
} else {
parseInt(inputValue) < parseInt(minLimit)
? toast.show(
`The minimum order for this product is ${minLimit}!`,
{
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
}
)
: checkOut();
}
}}
> >
<Text style={styles.button1text}>Buy Now</Text> <Text style={styles.button1text}>Buy Now</Text>
</TouchableOpacity> </TouchableOpacity>
@ -76,18 +810,27 @@ const styles = StyleSheet.create({
}, },
button: { button: {
padding: 15, padding: 15,
// paddingBottom: 25,
}, },
button1: { button1: {
padding: 15, padding: 15,
paddingHorizontal: 50, paddingHorizontal: 50,
backgroundColor: "#ffaa00", backgroundColor: "#ffaa00",
color: "#fff", color: "#fff",
// paddingBottom: 25, borderRadius: 30,
}, },
button1text: { button1text: {
color: "#fff", color: "#fff",
fontWeight: "600", fontWeight: "600",
}, },
quantity: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
buttonQty: {
backgroundColor: "#eee",
padding: 5,
margin: 5,
},
}); });
export default BottomNav; export default BottomNav;

88
app/components/product/CheckOutModal.jsx Normal file
View File

@ -0,0 +1,88 @@
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const CheckOutModal = ({ setModalVisible }) => {
return (
<View style={styles.container}>
<View
onPress={() => {
setModalVisible(false);
}}
style={styles.conWrap}
></View>
<View style={styles.conWrap2}>
<Text>Check</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// width: "95%",
// margin: 5,
// borderRadius: 10,
// borderColor: "#dddd",
// borderWidth: 1,
// overflow: "hidden",
height: "100%",
width: "100%",
bottom: 0,
overflow: "hidden",
// width: 100,
// bottom: 0,
// flexDirection: "row",
// padding: 10,
},
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",
},
conWrap: {
height: "40%",
width: "100%",
bottom: 0,
// backgroundColor: "#ffffff",
},
conWrap2: {
height: "60%",
width: "100%",
bottom: 0,
backgroundColor: "#ffffff",
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
padding: 10,
borderWidth: 1,
borderColor: "#eeee",
},
footer: {
// position: "absolute",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
bottom: 0,
width: "100%",
},
imgWrap: {
padding: 10,
},
wrapper: {
margin: 10,
marginBottom: 10,
},
});
export default CheckOutModal;

276
app/components/product/CustomerReview.jsx Normal file
View File

@ -0,0 +1,276 @@
import {
faArrowLeft,
faEllipsis,
faStar,
faThumbsUp,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
Dimensions,
Image,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import coming from "../.././../assets/comingsoon.png";
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;
const CustomerReview = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<View style={styles.wrapper}>
{/* <Text style={styles.text}>Content</Text> */}
{/* <Image
style={{ width: width, height: height - 30, resizeMode: "cover" }}
source={coming}
/> */}
<View style={styles.wrapCon}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.rateCon}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.rateWrapper}>
<Text style={styles.text}>Rating </Text>
<View style={styles.rateWrapperLeft}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.rateWrapperLeftWrap}>
<Text style={styles.rateText}>4.5</Text>
<Text style={styles.rateText2}>/5</Text>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
<FontAwesomeIcon icon={faStar} color={"#afaa66"} size={25} />
</View>
</View>
<View style={styles.rateWrapperRight}>
{/* <Text style={styles.text}>right</Text> */}
<View style={styles.rateWrapperRightWrap}>
<Text style={styles.text}> </Text>
</View>
</View>
</View>
</View>
<View style={styles.commentCon}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.commentConWrap}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.commentConCard}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.commentConCardWrap}>
<View style={styles.commentConCardLeft}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.commentConCardLeftWrap}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.commentConCardLeftWrapRow}>
<Image
style={{
width: 50,
height: 50,
resizeMode: "cover",
borderWidth: 1,
borderColor: "black",
borderRadius: 100,
}}
source={coming}
/>
<Text style={styles.commentUser}> M*** </Text>
<View style={styles.starRateWrap}>
<FontAwesomeIcon
icon={faStar}
color={"#eede00"}
size={15}
/>
<FontAwesomeIcon
icon={faStar}
color={"#eede00"}
size={15}
/>
<FontAwesomeIcon
icon={faStar}
color={"#eede00"}
size={15}
/>
<FontAwesomeIcon
icon={faStar}
color={"#eede00"}
size={15}
/>
<FontAwesomeIcon
icon={faStar}
color={"#faf6bf"}
size={15}
/>
</View>
</View>
<Text style={styles.commentText}>
Pagka deliver na pagka deliver ginamit ko agad hehe..
ganda niya.. thank you seller! kaso d working ung remote
control??
</Text>
</View>
</View>
<View style={styles.commentConCardRight}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.commentConCardRightWrap}>
{/* <Text style={styles.text}>Content</Text> */}
<FontAwesomeIcon
icon={faEllipsis}
color={"#faf6bf"}
size={25}
style={styles.ellipse}
/>
<FontAwesomeIcon
icon={faThumbsUp}
color={"#faf6bf"}
size={25}
style={styles.like}
/>
<Text style={styles.text}>reply</Text>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "100%",
width: "100%",
// padding: 15,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
wrapCon: {
borderColor: "#ddd",
paddingVertical: 15,
borderBottomWidth: 1,
borderTopWidth: 1,
backgroundColor: "#f8f8f8",
},
rateCon: {},
rateText: {
fontSize: 21,
fontWeight: "600",
},
rateText2: {
fontSize: 15,
paddingTop: 6,
paddingRight: 10,
},
rateWrapper: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
rateWrapperLeft: {},
rateWrapperLeftWrap: {
flexDirection: "row",
},
rateWrapperRight: {},
rateWrapperRightWrap: {},
commentCon: {},
commentText: {
color: "#3b3b3b",
marginTop: 15,
},
commentUser: {
color: "#3b3b3b",
marginLeft: 15,
},
commentConWrap: {},
commentConCard: {
backgroundColor: "#fff",
},
commentConCardWrap: {
flexDirection: "row",
padding: 10,
},
starRateWrap: {
flexDirection: "row",
padding: 10,
},
ellipse: {
// position: "absolute",
// top: 0,
marginTop: 15,
},
like: { marginVertical: 15 },
commentConCardLeft: {
width: "88%",
justifyContent: "center",
alignItems: "center",
},
commentConCardLeftWrap: {
alignItems: "center",
width: "100%",
top: 0,
// paddingLeft: 15,
flexDirection: "column",
borderColor: "#ddd",
// paddingBottom: 15,
// borderBottomWidth: 1,
},
commentConCardLeftWrapRow: {
alignItems: "center",
width: "100%",
top: 0,
// paddingLeft: 15,
flexDirection: "row",
// justifyContent: "space-between",
borderColor: "#ddd",
// paddingBottom: 15,
// borderBottomWidth: 1,
},
commentConCardRight: {
// justifyContent: "center",
alignItems: "center",
bottom: 10,
},
commentConCardRightWrap: {
// height: "100%",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
},
});
export default CustomerReview;

157
app/components/product/ShopPrev.jsx Normal file
View File

@ -0,0 +1,157 @@
import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { faLocationPin } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { get_vendor } from "../../services/api/controllers/vendor";
const ShopPrev = ({ shopId }) => {
const [vendor, setvendor] = useState();
const [error, seterror] = useState();
const navigation = useNavigation();
useEffect(() => {
get_vendor({ id: shopId })
.then((result) => {
if (result.error) {
seterror(result.error);
} else {
console.log("result" + result.data.user_login);
setvendor(result.data);
}
})
.catch((error) => {
seterror(error.message);
})
.finally(() => {
// setIsLoading(false); // Set loading to false when done loading
});
}, []);
return (
<View style={styles.container}>
{/* <Text style={styles.header}>ShopPrev</Text> */}
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 15,
}}
>
<Image
style={{
width: "100%",
height: 50,
width: 50,
resizeMode: "cover",
borderRadius: 90,
}}
source={{
uri: `${
vendor?.vendor_image ??
"https://coopbiz.ph/wp-content/plugins/yith-woocommerce-multi-vendor-premium/assets/images/shop-placeholder.jpg"
}`,
}}
/>
<View style={styles.shopDetails}>
<Text numberOfLines={2} style={styles.header}>
{vendor?.user_login}
</Text>
</View>
<TouchableOpacity
style={styles.messageBtn}
onPress={() => navigation.navigate("Shop", { product: vendor })}
>
<Text style={styles.btnText}>Visit Shop</Text>
</TouchableOpacity>
</View>
<Text style={styles.header2}>
{" "}
<FontAwesomeIcon
icon={faLocationPin}
color={"#c2c2c2"}
size={10}
/>{" "}
{vendor?.address[0]?.city ? vendor?.address[0]?.city : null}
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fafafa",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
marginVertical: 10,
padding: 10,
borderWidth: 1,
borderColor: "#eeee",
marginBottom: 15,
// height: "87%",
},
wrapper: {
width: "100%",
height: 200,
// backgroundColor: "#ffaa00",
padding: 10,
},
header: {
fontSize: 14,
fontWeight: "700",
// textTransform: "uppercase",
paddingHorizontal: 5,
},
header2: {
fontSize: 14,
fontWeight: "400",
// textTransform: "uppercase",
paddingHorizontal: 5,
marginTop: 15,
},
shopDetails: {
padding: 10,
width: "60%",
},
img: {
width: 80,
height: 80,
resizeMode: "cover",
borderRadius: 10,
backgroundColor: "#ffefce",
padding: 10,
},
AddUser: {
padding: 10,
},
messageBtn: {
// width: 80,
// height: 80,
flexDirection: "row",
resizeMode: "cover",
borderRadius: 10,
backgroundColor: "#dfff6c",
padding: 10,
},
btnText: {
fontSize: 14,
fontWeight: "600",
// textTransform: "uppercase",
paddingHorizontal: 5,
color: "#698600",
},
});
export default ShopPrev;

67
app/components/product/Variation.jsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useEffect, useState } from "react";
import { import {
FlatList, FlatList,
Image, Image,
@ -9,40 +9,49 @@ import {
View, View,
} from "react-native"; } from "react-native";
const Variation = () => { const Variation = ({ vars, prod, setactiveVar }) => {
const cat = [ 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-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-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-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",
]; ];
const [varss, setvarss] = useState([]);
useEffect(() => {
const variation = [prod];
setvarss([...vars]);
// console.log(vars+"----");
// console.log(vars)
}, [vars, prod]);
const [active, setactive] = useState(null);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.header}>Variation</Text> <Text style={styles.header}>Select Variation</Text>
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row" }}>
<FlatList <FlatList
// inverted // inverted
// style={styles.wrapper} // style={styles.wrapper}
horizontal horizontal
data={cat ? cat : []} data={varss ? varss : []}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
renderItem={({ item }) => { renderItem={({ item, index }) => {
return ( return (
<TouchableOpacity onPress={() => {}}> <TouchableOpacity
<View style={styles.AddUser}> onPress={() => {
setactive(index);
setactiveVar(index);
}}
>
<View
style={
index === active ? styles.AddUserActive : styles.AddUser
}
>
<Image <Image
style={styles.img} style={styles.img}
source={{ source={{
uri: item, uri: item.product_image,
}} }}
/> />
<Text <Text
@ -70,31 +79,43 @@ const styles = StyleSheet.create({
width: "100%", width: "100%",
// marginHorizontal: 10, // marginHorizontal: 10,
padding: 10, padding: 10,
paddingBottom: 0,
// height: "87%", // height: "87%",
}, },
wrapper: { wrapper: {
width: "100%", width: "100%",
height: 200, height: 200,
// backgroundColor: "#ffaa00", // backgroundColor: "#ffaa00",
padding: 10, // padding: 10,
}, },
header: { header: {
fontSize: 14, fontSize: 14,
fontWeight: "700", fontWeight: "700",
// textTransform: "uppercase", // textTransform: "uppercase",
paddingHorizontal:5 paddingHorizontal: 5,
marginBottom: 15,
}, },
img: { img: {
width: 80, width: 80,
height: 80, height: 80,
resizeMode: "cover", resizeMode: "cover",
borderRadius: 10, borderRadius: 10,
backgroundColor: "#ffefce", backgroundColor: "#f1f1f1",
padding: 10, // padding: 10,
}, },
AddUser: { AddUser: {
padding: 10, padding: 10,
paddingBottom: 0,
borderWidth: 2,
borderColor: "#eee",
},
AddUserActive: {
padding: 10,
paddingBottom: 0,
borderWidth: 2,
borderColor: "#ffaa00",
}, },
}); });
export default Variation; export default Variation;

50
app/components/profile/Card.jsx
View File

@ -1,18 +1,40 @@
import { faAngleRight } from "@fortawesome/free-solid-svg-icons"; import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import React from "react"; import React from "react";
import { Linking } from "react-native";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const Card = ({ cart }) => { const Card = ({ cart }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const navigate = () => {
if (
cart.nav === "MyPurchases" ||
cart.nav === "MyWallet" ||
cart.nav === "MyFavorites" ||
cart.nav === "ViewHistory" ||
cart.nav === "AccountSettings"
) {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
console.log(pass);
pass === null
? navigation.navigate("Login")
: navigation.navigate(cart.nav);
})
.catch((error) => {
console.log(error + "weeewwww");
});
} else if (cart.nav === "Privacy") {
Linking.openURL("https://www.obanana.com/privacy-policy.php");
} else {
navigation.navigate(cart.nav, { isrefresh: false });
}
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<TouchableOpacity <TouchableOpacity style={styles.subContent} onPress={() => navigate()}>
style={styles.subContent}
onPress={() => navigation.navigate(cart.nav)}
>
{cart.icon} {cart.icon}
<Text style={styles.subContentText}>{cart.label}</Text> <Text style={styles.subContentText}>{cart.label}</Text>
</TouchableOpacity> </TouchableOpacity>
@ -27,17 +49,17 @@ const styles = StyleSheet.create({
backgroundColor: "#fff", backgroundColor: "#fff",
}, },
subContent: { subContent: {
borderRadius:10, borderRadius: 10,
width: "80%", width: "80%",
height:140, height: 140,
margin:'auto', margin: "auto",
alignItems: "center", alignItems: "center",
paddingTop:30 paddingTop: 30,
},
subContentText: {
marginTop: 15,
color: "#777777",
textAlign: "center",
}, },
subContentText:{
marginTop:15,
color:'#777777',
textAlign:'center',
}
}); });
export default Card; export default Card;

149
app/components/profile/my-favorite/ProductCard.jsx
View File

@ -1,7 +1,7 @@
import { faHeart, faStar } from "@fortawesome/free-solid-svg-icons"; import { faHeart, faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
Image, Image,
Platform, Platform,
@ -10,25 +10,121 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import CheckBox from 'expo-checkbox'; import CheckBox from "expo-checkbox";
const ProductCard = ({ product, like, index,liked,all }) => { import { get_product } from "../../../services/api/controllers/product";
const ProductCard = ({ product, like, index, liked, all }) => {
const navigation = useNavigation(); const navigation = useNavigation();
console.log(product + "ProductCard" + "index: " + index); // console.log(product );
const [variablePrice, setvariablePrice] = useState("");
const [isChecked, setIsChecked] = useState(false); const [isChecked, setIsChecked] = useState(false);
const [error, setError] = useState(false);
const getProd = (idP) => {
console.log(idP);
get_product({
id: idP,
})
.then((result) => {
// console.log("result" + result);
if (result.data.product_type === "variation") {
get_product({
id: result.data.parent_id,
})
.then((result1) => {
// console.log("result" + result);
if (result1.error) {
setError(result1.error);
} else {
// setcart(result.data);
navigation.navigate("Product", { product: result1.data });
console.log(result1.data);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// set
});
} else {
if (result.error) {
setError(result.error);
} else {
// setcart(result.data);
navigation.navigate("Product", { product: result.data });
console.log(result.data);
}
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
// useEffect(() => {
// setactiveProduct(product);
// const purch = productList?.filter(
// (item) => item?.parent_id === product._id
// );
// // setvariations(purch);
// function getLowestHighestPrice(variation) {
// let lowestPrice = Infinity;
// let highestPrice = -Infinity;
// let hasPrice = false;
// variation?.forEach((item) => {
// let price = null;
// // If sale_price is available and not an empty string, use it; otherwise, use regular_price
// if (item?.sale_price && item?.sale_price !== "") {
// price = parseFloat(item?.sale_price);
// } else if (item?.regular_price && item?.regular_price !== "") {
// price = parseFloat(item?.regular_price);
// }
// // Update lowest and highest prices
// if (price !== null) {
// hasPrice = true;
// lowestPrice = Math.min(lowestPrice, price);
// highestPrice = Math.max(highestPrice, price);
// }
// });
// if (!hasPrice) {
// return null;
// }
// // If lowest and highest prices are the same, return that price alone
// if (lowestPrice === highestPrice) {
// return `${lowestPrice}`;
// }
// // Return the range of lowest to highest prices
// return `${lowestPrice}-${highestPrice}`;
// }
// const priceRange = getLowestHighestPrice(purch);
// setvariablePrice(priceRange);
// console.log("-----------------------Price Range:", priceRange);
// }, [isFocused]);
return ( return (
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
style={styles.container} style={styles.container}
onPress={() => navigation.navigate("Product", { product })} onPress={() => getProd(product._id)}
> >
<View style={styles.upper}> <View style={styles.upper}>
<Image <Image
style={{ width: "100%", height: 200, resizeMode: "cover" }} style={{ width: "100%", height: 200, resizeMode: "cover" }}
source={{ uri: product?.img }} source={{ uri: `${product.product_image}` }}
/> />
<View style={styles.heart}> <View style={styles.heart}>
<CheckBox <CheckBox
value={liked.includes(index)|| all===true} value={liked.includes(index) || all === true}
onValueChange={() => like(index)} onValueChange={() => like(index)}
/> />
</View> </View>
@ -36,26 +132,38 @@ const ProductCard = ({ product, like, index,liked,all }) => {
<View style={{ padding: 10, backgroundColor: "#fff" }}> <View style={{ padding: 10, backgroundColor: "#fff" }}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{product?.name} {product?.product_name}
</Text> </Text>
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={product?.promo ? styles.textPricePromo : styles.textPrice} style={
product.sale_price ? styles.textPricePromo : styles.textPrice
}
> >
₱{product?.price} {product?.regular_price && product?.regular_price !== null ? (
"₱" + parseFloat(product?.regular_price).toLocaleString("en-US")
) : (
<TouchableOpacity style={styles.inquire}>
<Text style={styles.inquire}>Inquire for price</Text>
</TouchableOpacity>
)}
</Text> </Text>
{product?.promo ? ( {product.sale_price ? (
<Text style={styles.textPrice}> <Text style={styles.textPrice}>
{" "} {" "}
{product?.price - product?.price * 0.3}{" "} {/* {(product.regular_price * (1 - product.promo / 100)).toFixed(2) }{" "} */}
<Text style={{ fontWeight: "400" }}>(-{product?.promo}%)</Text> {parseFloat(product?.sale_price).toLocaleString("en-US")}
{/* <Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text> */}
</Text> </Text>
) : null} ) : null}
</View> </View>
<View style={styles.footer}> <View style={styles.footer}>
<Text style={styles.textMin}> {/* <Text style={styles.textMin}>
min. order: {product?.min} {product?.per} min. order: {product?.min} {product?.per}
</Text> </Text> */}
<Text style={styles.textMin}>stock: {product.stock}</Text>
<Text style={styles.textSold}>{product?.sold} sold</Text> <Text style={styles.textSold}>{product?.sold} sold</Text>
</View> </View>
{product?.rate ? ( {product?.rate ? (
@ -97,8 +205,8 @@ const styles = StyleSheet.create({
position: "absolute", position: "absolute",
top: 10, top: 10,
right: 10, right: 10,
height:20, height: 20,
width:20 width: 20,
}, },
text: { text: {
fontSize: 13, fontSize: 13,
@ -107,6 +215,13 @@ const styles = StyleSheet.create({
color: "#333", color: "#333",
letterSpacing: 0.5, letterSpacing: 0.5,
}, },
inquire: {
fontSize: 16,
fontWeight: "600",
// textTransform: "capitalize",
// textDecorationLine: "line-through",
color: "#ffaa00",
},
priceCon: { priceCon: {
flexDirection: "row", flexDirection: "row",
paddingVertical: 4, paddingVertical: 4,

65
app/components/profile/my-favorite/ShopCard.jsx
View File

@ -3,7 +3,7 @@ import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import React from "react"; import React, { useEffect, useState } from "react";
import { import {
Image, Image,
Platform, Platform,
@ -14,71 +14,85 @@ import {
} from "react-native"; } from "react-native";
import Checkbox from "expo-checkbox"; import Checkbox from "expo-checkbox";
const ShopCard = ({ product , like, index,liked,all}) => { const ShopCard = ({ product, like, index, liked, all, prods }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const [shopProd, setshopProd] = useState([]);
useEffect(() => {
const purch = prods?.filter((item) => item.vendor_api_id === product._id);
setshopProd(purch.slice(0, 3));
}, []);
return ( return (
<TouchableOpacity <TouchableOpacity
activeOpacity={0.7} activeOpacity={0.7}
style={styles.container} style={styles.container}
onPress={() => navigation.navigate("Product", { product })} onPress={() => navigation.navigate("Shop", { product })}
> >
<View style={styles.top}> <View style={styles.top}>
<View style={styles.heart}> <View style={styles.heart}>
<Checkbox <Checkbox
value={liked.includes(index)|| all===true} value={liked.includes(index) || all === true}
onValueChange={() => like(index)} onValueChange={() => like(index)}
/> />
</View> </View>
<View style={styles.imgWrap}> <View style={styles.imgWrap}>
<Image <Image
style={{ width: 80, height: 80, resizeMode: "cover" }} style={{ width: 80, height: 80, resizeMode: "cover" }}
source={{ uri: product?.logo }} source={{
uri: product?.vendor_image
? product.vendor_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/> />
</View> </View>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.text} numberOfLines={1}> <Text style={styles.text} numberOfLines={2}>
{product?.name} {product?.user_login}
</Text> </Text>
{/* {product?.rate ? ( */}
<View style={styles.rateCon}> <View style={styles.rateCon}>
<Text style={styles.textHead}>Rating: </Text>
{product?.rate ? ( {product?.rate ? (
<> <>
<Text style={styles.textHead}>Rating: </Text>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} /> <FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}> <Text style={styles.textRate}>
{product?.rate} ({product?.raterTotal}) {product?.rate} ({product?.raterTotal})
</Text> </Text>
</> </>
) : ( ) : (
<Text>No rating </Text> <Text> </Text>
)} )}
</View> </View>
{/* ) : null} */}
{/* {product?.respoTime ? ( */}
<View style={styles.rateCon}> <View style={styles.rateCon}>
<Text style={styles.textHead}>Average Response Time: </Text>
{product?.respoTime ? ( {product?.respoTime ? (
<> <>
<Text style={styles.textHead}>Average Response Time: </Text>
<Text style={styles.textRate}>{product?.respoTime}hrs</Text> <Text style={styles.textRate}>{product?.respoTime}hrs</Text>
</> </>
) : ( ) : (
<Text>No rating </Text> <Text></Text>
)} )}
</View> </View>
{/* ) : null} */}
{product?.respoTime ? (
<View style={styles.rateCon}> <View style={styles.rateCon}>
<Text style={styles.textHead}>Main Products: </Text>
{product?.respoTime ? ( {product?.respoTime ? (
<> <>
<Text style={styles.textHead}>Main Products: </Text> {/* {product?.tags.map((e, i) => (
{product?.tags.map((e, i) => (
<Text style={styles.textRate} key={i}> <Text style={styles.textRate} key={i}>
{e},{" "} {e},{" "}
</Text> </Text>
))} ))} */}
</> </>
) : ( ) : (
<Text>No rating </Text> <Text> </Text>
)} )}
</View> </View>
) : null}
</View> </View>
<View style={styles.btnWrap}> <View style={styles.btnWrap}>
<TouchableOpacity style={styles.btnmess}> <TouchableOpacity style={styles.btnmess}>
@ -89,7 +103,7 @@ const ShopCard = ({ product , like, index,liked,all}) => {
<View style={styles.bot}> <View style={styles.bot}>
<View style={styles.botWrap}> <View style={styles.botWrap}>
{product?.images.map((e, i) => ( {shopProd?.map((e, i) => (
<Image <Image
key={i} key={i}
style={{ style={{
@ -100,7 +114,7 @@ const ShopCard = ({ product , like, index,liked,all}) => {
borderColor: "#ddd", borderColor: "#ddd",
borderRadius: 10, borderRadius: 10,
}} }}
source={{ uri: e }} source={{ uri: e.product_image }}
/> />
))} ))}
</View> </View>
@ -129,20 +143,16 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
backgroundColor: "#FFFFFF", backgroundColor: "#FFFFFF",
}, },
heart: {
marginLeft: 10,
},
imgWrap: { imgWrap: {
width: 80, width: 100,
height: 80, height: 80,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
marginLeft: 10, marginLeft: 10,
}, },
heart: {
position: "absolute",
top: 10,
right: 10,
height:20,
width:20
},
btnWrap: { btnWrap: {
width: 80, width: 80,
height: 80, height: 80,
@ -157,6 +167,7 @@ const styles = StyleSheet.create({
}, },
details: { details: {
height: "100%", height: "100%",
width: "45%",
justifyContent: "center", justifyContent: "center",
// alignItems:'center' // alignItems:'center'
}, },

154
app/components/profile/my_purchases/CompletedCard.jsx
View File

@ -1,9 +1,25 @@
import React from "react"; import React, { useState } from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native"; import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
Dimensions,
} from "react-native";
import ReceiptCard from "./Receipt";
import Modal from "react-native-modal";
import ReturnForm from "./ReturnForm";
const deviceWidth = Dimensions.get("window").width;
const CompletedCard = ({ cart }) => { const CompletedCard = ({ cart }) => {
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z" // Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const deliveryDate = new Date(cart.deliveryDate); const [modalVisible, setModalVisible] = useState(false);
const [modalVisible1, setModalVisible1] = useState(false);
const [isRefund, setisRefund] = useState(false);
console.log(cart);
const deliveryDate = new Date(cart?.shipping?.delivery_date);
const month = deliveryDate.toLocaleString("en-US", { month: "short" }); const month = deliveryDate.toLocaleString("en-US", { month: "short" });
const day = deliveryDate.getDate(); const day = deliveryDate.getDate();
const options = { const options = {
@ -17,6 +33,8 @@ const CompletedCard = ({ cart }) => {
timeZone: "Asia/Manila", timeZone: "Asia/Manila",
...options, ...options,
}); });
const total = parseFloat(cart?.total_amount);
console.log(cart?.return_order);
// Format the day with leading zeros if needed (e.g., "01" instead of "1") // Format the day with leading zeros if needed (e.g., "01" instead of "1")
const formattedDay = day < 10 ? `0${day}` : day; const formattedDay = day < 10 ? `0${day}` : day;
@ -25,9 +43,12 @@ const CompletedCard = ({ cart }) => {
const philippinesTime = `${month}. ${formattedDay} `; const philippinesTime = `${month}. ${formattedDay} `;
return ( return (
<View style={styles.container}> <TouchableOpacity
style={styles.container}
onPress={() => setModalVisible(true)}
>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text> <Text style={styles.headerText}>{cart.items[0].vendor_name}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text> <Text style={styles.headerStatusText}>{cart.status}</Text>
</View> </View>
<View style={styles.wrapper}> <View style={styles.wrapper}>
@ -35,46 +56,44 @@ const CompletedCard = ({ cart }) => {
<View style={styles.imgWrap}> <View style={styles.imgWrap}>
<Image <Image
style={{ width: 50, height: 50, resizeMode: "cover" }} style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }} // source={{ uri: `${cart?.items[0].product.product_image}` }}
source={{
uri: `${
cart?.items[0].product.product_image !== ""
? cart?.items[0].product.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
}`,
}}
/> />
</View> </View>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name} {cart?.items[0]?.product.name}
</Text> </Text>
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Variant: pink Variant:{cart?.items[0].variant}
</Text> </Text>
<View style={styles.rateCon}> <View style={styles.rateCon}>
{cart?.products[0]?.price ? ( {cart?.items[0].price ? (
<> <>
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={ style={
cart?.products[0]?.promo cart?.items[0]?.sale_price
? styles.textPricePromo ? styles.textPricePromo
: styles.textPrice : styles.textPrice
} }
> >
₱{cart?.products[0]?.price} ₱
{parseFloat(cart?.items[0].price).toLocaleString("en-US")}
</Text> </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> </View>
</> </>
) : ( ) : (
<Text>No price </Text> <Text>No price </Text>
)} )}
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Quantity: 2 Quantity: {cart?.items[0].quantity}
</Text> </Text>
</View> </View>
</View> </View>
@ -83,23 +102,90 @@ const CompletedCard = ({ cart }) => {
<View style={styles.total}></View> <View style={styles.total}></View>
<View style={styles.total}> <View style={styles.total}>
<Text style={styles.totalText}>Total: </Text> <Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text> <Text style={styles.textPrice}>
{" "}
₱
{parseFloat(total).toLocaleString("en-US") ??
parseFloat(cart?.total_amount).toLocaleString("en-US")}{" "}
</Text>
</View> </View>
</View> </View>
</View> </View>
<View style={styles.cStatus}> {/* <View style={styles.cStatus}>
<Text style={styles.textStatusHeader}> Status: </Text> <Text style={styles.textStatusHeader}> Status: </Text>
<Text style={styles.textStatus}> {cart?.currentStatus}</Text> <Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View> </View> */}
<View style={styles.footer}> <View style={styles.footer}>
<Text style={styles.footerDate}> {time} </Text> <Text style={styles.footerDate}> {time ?? ""} </Text>
{/* {
<TouchableOpacity style={styles.rateBtn}> cart?.return_order === null ? (
<Text style={styles.rateText}> Rate It </Text> <TouchableOpacity
style={styles.rateBtn}
onPress={() => setModalVisible1(true)}
>
<Text style={styles.rateText}> Return </Text>
</TouchableOpacity> </TouchableOpacity>
) : null
} */}
{isRefund === false ? (
<>
{cart?.return_order === undefined ? (
<TouchableOpacity
style={styles.rateBtn}
onPress={() => setModalVisible1(true)}
>
<Text style={styles.rateText}> Return </Text>
</TouchableOpacity>
) : (
<Text style={styles.rateText1}> Refund Requested </Text>
)}
</>
) : (
<Text style={styles.rateText1}>Refund Requested </Text>
)}
</View> </View>
</View> <Modal
animationType="slide"
animationIn={"zoomIn"}
transparent={true}
isVisible={modalVisible1}
onSwipeComplete={() => setModalVisible1(false)}
swipeDirection={["down", "up", "right", "left"]}
swipeThreshold="100"
backdropOpacity={0.2}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible1(!modalVisible1);
}}
>
<ReturnForm
onRequestClose={setModalVisible1}
cart={cart}
setisRefund={setisRefund}
/>
</Modal>
<Modal
animationType="slide"
animationIn={"zoomIn"}
transparent={true}
isVisible={modalVisible}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={["down", "up", "right", "left"]}
swipeThreshold="100"
backdropOpacity={0.2}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<ReceiptCard onRequestClose={setModalVisible} cart={cart} />
</Modal>
</TouchableOpacity>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -233,7 +319,13 @@ const styles = StyleSheet.create({
}, },
rateText: { rateText: {
fontWeight: "600", fontWeight: "600",
color: "#ff3c00", color: "#ffaa00",
},
rateText1: {
fontWeight: "600",
color: "#ffaa00",
marginVertical: 15,
marginRight: 15,
}, },
footerDate: { footerDate: {
fontSize: 11, fontSize: 11,

717
app/components/profile/my_purchases/Receipt.jsx Normal file
View File

@ -0,0 +1,717 @@
import { faArrowRight, faCopy } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import Clipboard from "@react-native-community/clipboard";
// import Clipboard from '@react-native-clipboard/clipboard';
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
Linking,
// Clipboard,
} from "react-native";
import { get_order } from "../../../services/api/controllers/order";
import { get_product } from "../../../services/api/controllers/product";
const ReceiptCard = ({ cart }) => {
const navigation = useNavigation();
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
// const cart = {
// billing_address: {
// billing_first_name: "Jun",
// billing_last_name: "Jihad",
// billing_company: "OBN",
// billing_email: "jun@example.com",
// billing_phone: "09876543211",
// billing_address_1: "123",
// billing_address_2: "San san st.",
// billing_city: "City of Makati",
// billing_state: "Metro Manila",
// billing_country: "PH",
// },
// shipping_address: {
// shipping_first_name: "San",
// shipping_last_name: "Di",
// shipping_company: "obn",
// shipping_email: "last@example.com",
// shipping_phone: "9876543211",
// shipping_address_1: "11",
// shipping_address_2: "San Man st.",
// shipping_city: "City of Makati",
// shipping_state: "Metro Manila",
// shipping_country: "PH",
// },
// payment: {
// details: [],
// status: "UNPAID",
// reference_number: "cDFQF1eO",
// },
// _id: "654d7aa65ce79c9883b5c2fc",
// customer: [
// {
// customer_id: "65379c946645ab5293b5d2e6",
// name: "mark sans",
// _id: "654d7aa65ce79c9883b5c2fd",
// },
// ],
// total_amount: "1500",
// items: [
// {
// product: {
// product_image:
// "https://api.obanana.shop/images/storage/product_uploads/watch.jpg",
// product_id: "65328abe915856458f05d9e4",
// name: "M7 ProMax Smart Watch",
// },
// price: "1500",
// quantity: "1",
// vendor_id: "6527b593f79b5deac5ad6cbc",
// vendor_name: "obanana.gadgetHub",
// _id: "654d7aa65ce79c9883b5c2fe",
// },
// ],
// status: "CART",
// createdAt: "2023-11-10T00:34:46.102Z",
// updatedAt: "2023-11-10T00:34:46.103Z",
// __v: 0,
// order_date: "2023-11-10T02:34:00.212Z",
// payment_method: "select payment method",
// };
const formatTime = (utcTimestamp) => {
// const utcTimestamp = "2023-11-10T06:00:47.789Z";
const utcDate = new Date(utcTimestamp);
// Convert to Philippine time (UTC+8)
const phTime = new Date(utcDate.getTime() + 8 * 60 * 60 * 1000);
// Format the output
const options = {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
hour12: false,
};
const formattedTime = phTime.toLocaleString("en-PH", options);
return formattedTime;
};
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 total = parseFloat(cart?.total_amount);
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} `;
function formatDate(input) {
let date;
// Check if the input is a Unix timestamp (number) or a string
if (
typeof input === "number" ||
(typeof input === "string" && !isNaN(Number(input)))
) {
date = new Date(Number(input) * 1000); // Convert string to number and then to milliseconds
} else if (typeof input === "string") {
date = new Date(input); // Try to create a Date object from the string
} else {
return "Invalid input";
}
// Check if the date is valid
if (isNaN(date.getTime())) {
return "Invalid date";
}
// Convert to local time
const localDate = date.toLocaleString("en-PH", {
timeZone: "Asia/Manila",
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
hour12: false,
});
return localDate;
// .replace(",", ""); // Removing the comma from the default format
}
// Test cases
console.log(
formatDate(
cart?.payment?.details[0]?.attributes?.updated_at ?? ""
// "2023-10-23T05:54:34.525Z"
)
); // Output: 10/23/2023, 13:55 (Philippines Time)
console.log(formatDate(1699934532)); // Output: 10/23/2023, 13:55 (Philippines Time)
console.log(formatDate("2023-10-23T05:54:34.525Z")); // Output: 10/23/2023, 13:54 (Philippines Time)
// const getProd = (idP) => {
// console.log(idP);
// get_product({
// id: idP,
// })
// .then((result) => {
// // console.log("result" + result);
// if (result.error) {
// setError(result.error);
// } else {
// // setcart(result.data);
// navigation.navigate("Product", { product: result.data });
// console.log(result.data);
// }
// })
// .catch((error) => {
// setError(error.message);
// })
// .finally(() => {
// // setprodIsLoading(false); // Set loading to false when done loading
// });
// };
const getProd = (idP) => {
console.log(idP);
get_product({
id: idP,
})
.then((result) => {
// console.log("result" + result);
if (result.error) {
// setError(result.error);
} else if (result.data.product_type === "variation") {
get_product({
id: result.data.parent_id,
})
.then((result1) => {
// console.log("result" + result);
if (result1.error) {
// setError(result1.error);
} else {
// setcart(result.data);
navigation.navigate("Product", { product: result1.data });
console.log(result1.data);
}
})
.catch((error) => {
// setError(error.message);
})
.finally(() => {
// set
});
} else {
// else {
// setcart(result.data);
navigation.navigate("Product", { product: result.data });
console.log(result.data);
// }
}
})
.catch((error) => {
// setError(error.message);
console.log("mm " + idP);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
const copyToClipboard = () => {
Clipboard.setString('text');
};
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>{cart.items[0].vendor_name}</Text>
<Text style={styles.headerStatusText}>{cart?.status}</Text>
</View>
<View style={styles.wrapper}>
<TouchableOpacity
style={styles.prodwrapper}
onPress={() => getProd(cart?.items[0]?.product?.product_id)}
>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: `${cart?.items[0].product.product_image}` }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{cart?.items[0]?.product.name}
</Text>
{/* <Text style={styles.text1} numberOfLines={2}>
Variant:{cart?.items[0].variant}
</Text> */}
<View style={styles.rateCon}>
{cart?.items[0].price ? (
<>
<View style={styles.priceCon}>
<Text
style={
cart?.items[0]?.sale_price
? styles.textPricePromo
: styles.textPrice
}
>
₱
{parseFloat(cart?.items[0].price).toLocaleString("en-US")}
</Text>
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.text1} numberOfLines={2}>
Quantity: {cart?.items[0].quantity}
</Text>
</View>
</View>
</TouchableOpacity>
<View style={styles.totalCon}>
<View style={styles.total}></View>
<View style={styles.total}>
{/* <Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}>
{" "}
₱{total.toFixed(2) ?? cart?.total_amount}{" "}
</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.tableCon}>
<View style={styles.tableWrap}>
<View style={styles.tableConRight}>
<Text style={styles.tableRightText}>Merch Total:</Text>
<Text style={styles.tableRightText}>Shipping Fee:</Text>
{/* <Text style={styles.tableRightText}>Handling Fee:</Text> */}
<Text style={styles.tableRightTextBold}>Order Total:</Text>
</View>
<View style={styles.tableConLeft}>
<Text style={styles.tableLeftText}>
₱
{parseFloat(cart?.items[0].price).toLocaleString("en-US") ??
parseFloat(cart?.items[0].price).toLocaleString("en-US")}{" "}
</Text>
<Text style={styles.tableLeftText}>
₱
{cart?.shipping_fee
? parseFloat(cart?.shipping_fee).toLocaleString("en-US")
: 50.0}
</Text>
{/* <Text style={styles.tableLeftText}>₱0.00</Text> */}
<Text style={styles.tableLeftTextBold}>
₱
{parseFloat(total).toLocaleString("en-US") ??
parseFloat(cart?.total_amount).toLocaleString("en-US")}{" "}
</Text>
</View>
</View>
</View>
<View style={styles.tableCon}>
<View style={styles.tableWrap}>
<View style={styles.tableConRight}>
<Text style={styles.tableRightText}>Payment Method:</Text>
{cart?.status === "TO RECEIVE" ||
cart?.status === "To Receive" ||
cart?.status === "COMPLETED" ||
cart?.status === "Completed" ? (
<>
<Text style={styles.tableRightText}>Shipping Courier:</Text>
<Text style={styles.tableRightText}>Tracking Number:</Text>
</>
) : null}
</View>
<View style={styles.tableConLeft}>
<Text style={styles.tableLeftText}>{cart?.payment_method}</Text>
{cart?.status === "TO RECEIVE" ||
cart?.status === "To Receive" ||
cart?.status === "COMPLETED" ||
cart?.status === "Completed" ? (
<>
<Text style={styles.tableLeftText1}>{cart?.courier_name}</Text>
<Text style={styles.tableLeftText1}>
{cart?.tracking_number}
{/* <TouchableOpacity
onPress={() => copyToClipboard()}
>
<FontAwesomeIcon
icon={faCopy}
color={"#ffaa00"}
size={18}
style={{
paddingHorizontal: 33,
}}
/>
</TouchableOpacity> */}
</Text>
</>
) : null}
</View>
</View>
</View>
{cart?.status === "TO RECEIVE" ||
cart?.status === "To Receive" ||
cart?.status === "COMPLETED" ||
cart?.status === "Completed" ? (
<TouchableOpacity
style={styles.cLink}
onPress={() => {
Linking.openURL(`${cart?.courier_url}`);
}}
>
<Text style={styles.textStatusHeader}>Track your parcel here</Text>
<FontAwesomeIcon
icon={faArrowRight}
color={"#ffaa00"}
size={18}
style={{
paddingHorizontal: 33,
}}
/>
</TouchableOpacity>
) : null}
<View style={styles.tableCon}>
<View style={styles.tableWrap}>
<View style={styles.tableConRight}>
<Text style={styles.tableRightText}>Order ID:</Text>
<Text style={styles.tableRightText}>Order Time:</Text>
{cart?.status === "TO SHIP" || cart?.status === "To Ship" ? (
<Text style={styles.tableRightText}>Payment Time:</Text>
) : null}
{cart?.status === "TO RECEIVE" || cart?.status === "To Receive" ? (
<Text style={styles.tableRightText}>Ship Time:</Text>
) : null}
{cart?.status === "COMPLETED" || cart?.status === "Completed" ? (
<Text style={styles.tableRightText}>Completed Time:</Text>
) : null}
</View>
<View style={styles.tableConLeft1}>
<Text style={styles.tableLeftText1}>{cart?._id} </Text>
<Text style={styles.tableLeftText1}>
{formatDate(cart?.order_date)}
</Text>
{cart?.status === "TO SHIP" || cart?.status === "To Ship" ? (
<Text style={styles.tableLeftText1}>
{cart?.payment_method !== "Cash On Delivery"
? formatDate(
cart?.payment?.details[0]?.attributes?.updated_at ?? ""
)
: "no date yet"}
</Text>
) : null}
{cart?.status === "TO RECEIVE" || cart?.status === "To Receive" ? (
<Text style={styles.tableLeftText1}>
{cart?.shipping?.shipping_date
? formatDate(cart?.shipping?.shipping_date ?? "")
: "no date yet"}
</Text>
) : null}
{cart?.status === "COMPLETED" || cart?.status === "Completed" ? (
<Text style={styles.tableLeftText1}>
{cart?.status === "COMPLETED"
? formatTime(cart?.shipping?.delivery_date)
: "no date yet"}
</Text>
) : null}
</View>
</View>
</View>
<View style={styles.tableCon}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
width: "95%",
}}
>
<Text style={styles.tableRightTextBold}>Shipping Address:</Text>
<Text style={styles.tableRightTextBold}></Text>
</View>
<Text style={styles.listItemTexteta} numberOfLines={4}>
{cart.shipping_address?.shipping_address_1 +
" " +
cart.shipping_address?.shipping_address_2 +
", " +
cart.shipping_address?.shipping_barangay +
", " +
cart.shipping_address?.shipping_city +
", " +
cart.shipping_address?.shipping_state +
" "}
{cart.shipping_address?.shipping_country === "PH"
? "Philippines"
: cart.shipping_address?.shipping_country}
</Text>
</View>
<View style={styles.footer}>
{/* <Text style={styles.footerDate}>
Ship by: {time} - {time2}{" "}
</Text> */}
<TouchableOpacity style={styles.rateBtn}>
{/* <Text style={styles.rateText}> Rate</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",
// backgroundColor: "#e6e6e6",
// height: 40,
padding: 10,
flexDirection: "row",
// justifyContent: "space-between",
alignItems: "flex-end",
},
cLink: {
// backgroundColor: "#7EFFBA",
backgroundColor: "#ffffff",
borderWidth: 1,
borderColor: "#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",
},
tableCon: {
justifyContent: "space-between",
alignItems: "center",
padding: 10,
borderBottomWidth: 1,
borderColor: "#dddd",
},
tableWrap: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
width: "95%",
},
tableConLeft: {
width: "40%",
},
tableConLeft1: {
width: "60%",
},
tableLeftText: {
textAlign: "left",
fontSize: 13,
padding: 10,
// fontWeight: "600",
color: "#ffaa00",
},
tableLeftText1: {
textAlign: "left",
fontSize: 13,
padding: 10,
// fontWeight: "600",
// color: "#ffaa00",
},
tableLeftTextBold: {
fontSize: 13,
fontWeight: "600",
color: "#ffaa00",
padding: 10,
},
tableConRight: {
width: "40%",
},
tableRightText: {
fontSize: 13,
textAlign: "left",
// fontWeight: "600",
color: "#8d8d8d",
padding: 10,
},
tableRightTextBold: {
fontSize: 13,
fontWeight: "600",
color: "#505050",
padding: 10,
},
footerDate: {
fontSize: 11,
paddingLeft: 15,
color: "#747474",
},
});
export default ReceiptCard;

621
app/components/profile/my_purchases/ReturnForm.jsx Normal file
View File

@ -0,0 +1,621 @@
import {
faArrowRight,
faCamera,
faEdit,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
Linking,
TextInput,
ActivityIndicator,
} from "react-native";
import {
get_order,
update_order,
} from "../../../services/api/controllers/order";
import { get_product } from "../../../services/api/controllers/product";
import * as ImagePicker from "expo-image-picker";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { uploadImage } from "../../../services/api/controllers/customers";
import { useToast } from "react-native-toast-notifications";
const ReturnForm = ({ cart, setisRefund }) => {
const [selectedImages, setselectedImages] = useState([]);
const [images, setImages] = useState([]);
const [reason, setreason] = useState("");
const [user, setuser] = useState([]);
const [count, setcount] = useState(1);
const [success, setsuccess] = useState(null);
const [error, seterror] = useState(null);
const [loading, setloading] = useState(false);
const [isAllField, setisAllField] = useState(null);
const [token, settoken] = useState("");
const toast = useToast();
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
settoken(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
const selectImage = async () => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
Alert.alert("Permission to access camera roll is required!");
return;
}
const pickerResult = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
// allowsEditing: true,
// aspect: [4, 3],
allowsMultipleSelection: true,
quality: 1,
multiple: true, // Enable multiple selection
});
if (!pickerResult.canceled) {
// Prepare image data for upload
const imageDataArray = pickerResult.assets.map((asset) => ({
image_id: user[0]._id + "_" + count,
category: "order",
imageFile: {
uri: asset.uri,
type: "image/jpeg", // Adjust the type if needed
name: "image.jpg", // Adjust the name if needed
},
}));
setcount(count + 1);
setselectedImages((prevImages) => [...prevImages, ...imageDataArray]);
// setImages(imageDataArray);
// Call your uploadImages function passing imageDataArray
// console.log(imageDataArray);
}
};
console.log(selectedImages);
const navigation = useNavigation();
const getProd = (idP) => {
console.log(idP);
get_product({
id: idP,
})
.then((result) => {
// console.log("result" + result);
if (result.error) {
// setError(result.error);
} else if (result.data.product_type === "variation") {
get_product({
id: result.data.parent_id,
})
.then((result1) => {
// console.log("result" + result);
if (result1.error) {
// setError(result1.error);
} else {
// setcart(result.data);
navigation.navigate("Product", { product: result1.data });
console.log(result1.data);
}
})
.catch((error) => {
// setError(error.message);
})
.finally(() => {
// set
});
} else {
// else {
// setcart(result.data);
navigation.navigate("Product", { product: result.data });
console.log(result.data);
// }
}
})
.catch((error) => {
// setError(error.message);
console.log("mm " + idP);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
const ReturnSubmit = async () => {
// try {
// // Use Promise.all to wait for all uploads to complete
// await Promise.all(
// selectedImages.map(async (imageData) => {
// const { category, imageFile, image_id } = imageData;
// try {
// // Call the uploadImage function for each image
// const result = await uploadImage(imageData)
// .then((result1) => {
// // console.log("result" + result);
// if (result1.error) {
// // setError(result1.error);
// } else {
// // setcart(result.data);
// setImages([result1.data.filename, ...images]);
// console.log(result1.data);
// }
// })
// .catch((error) => {
// // setError(error.message);
// });
// console.log(
// `Image uploaded successfully for category ${category} and image ID ${image_id}`,
// result
// );
// } catch (uploadError) {
// console.error(
// `Error uploading image for category ${category} and image ID ${image_id}:`,
// uploadError
// );
// // Handle individual upload error (e.g., show an error message)
// // Alert.alert('Error uploading image');
// }
// })
// );
// // All uploads completed successfully
// } catch (error) {
// console.error("Error uploading images:", error);
// // Handle general error (e.g., show an error message)
// // Alert.alert('Error uploading images');
// }
// for (const imageData of selectedImages) {
// const { category, imageFile, image_id } = imageData;
// try {
// const result = await uploadImage(imageData)
// .then((result1) => {
// // console.log("result" + result);
// if (result1.error) {
// // setError(result1.error);
// } else {
// // setcart(result.data);
// setImages((prevImages) => [...prevImages, result1?.data?.filename]);
// console.log(result1.data);
// }
// })
// .catch((error) => {
// // setError(error.message);
// });
// console.log(
// `Image uploaded successfully for category ${category} and image ID ${image_id}`,
// result
// );
// } catch (uploadError) {
// console.error(
// `Error uploading image for category ${category} and image ID ${image_id}:`,
// uploadError
// );
// // Handle individual upload error (e.g., show an error message)
// // Alert.alert('Error uploading image');
// }
// }
// update_order({
// id: cart._id,
// body: {},
// })
// .then((result1) => {
// // console.log("result" + result);
// if (result1.error) {
// // setError(result1.error);
// } else {
// // setcart(result.data);
// navigation.navigate("Product", { product: result1.data });
// console.log(result1.data);
// }
// })
// .catch((error) => {
// // setError(error.message);
// })
// .finally(() => {
// // set
// });
if (reason !== "" && selectedImages.length > 0) {
setloading(true);
let allUploadsSuccessful = true; // Variable to track the overall upload status
var images1 = "";
for (const imageData of selectedImages) {
const { category, imageFile, image_id } = imageData;
try {
const result1 = await uploadImage(imageData);
if (result1.error) {
// Handle individual upload error
console.error(
`Error uploading image for category ${category} and image ID ${image_id}:`,
result1.error
);
allUploadsSuccessful = false; // Set the status to false if any upload fails
} else {
// Image uploaded successfully
setImages((prevImages) => [...prevImages, result1?.data?.filename]);
images1 =
images1 !== ""
? images1 +
", " +
"https://api.obanana.shop/images/storage/order_uploads/" +
result1?.data?.filename
: "https://api.obanana.shop/images/storage/order_uploads/" +
result1?.data?.filename;
console.log(
`Image uploaded successfully for category ${category} and image ID ${image_id}`,
result1.data
);
}
} catch (uploadError) {
// Handle individual upload error
console.error(
`Error uploading image for category ${category} and image ID ${image_id}:`,
uploadError
);
allUploadsSuccessful = false; // Set the status to false if any upload throws an exception
}
}
if (allUploadsSuccessful) {
// All uploads completed successfully
console.log("All images uploaded successfully");
console.log(images1);
update_order({
token: token,
id: cart._id,
body: {
return_order: {
status: "To Approve",
reason: reason,
image: images1,
},
},
})
.then((result1) => {
// console.log("result" + result);
if (result1.error) {
// setError(result1.error);
} else {
// setcart(result.data);
// navigation.navigate("Product", { product: result1.data });
console.log(result1.data);
setsuccess(true);
toast.show("Successfully sent your refund request!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
}
setloading(false);
})
.catch((error) => {
// setError(error.message);
})
.finally(() => {
// set
});
} else {
// Handle the case where at least one upload failed
setsuccess(false);
console.error("Some images failed to upload");
}
setisRefund(true);
} else {
toast.show("Please fill in all fields!", {
type: "danger",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
}
};
console.log(images);
return (
<View style={styles.container}>
<Text style={styles.text4}>RETURN FORM</Text>
<View View style={styles.wrapper}>
<View
style={styles.prodwrapper}
// onPress={() => getProd(cart?.items[0]?.product?.product_id)}
>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: `${cart?.items[0].product.product_image}` }}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{cart?.items[0]?.product.name}
</Text>
{/* <Text style={styles.text1} numberOfLines={2}>
Variant:{cart?.items[0].variant}
</Text> */}
<View style={styles.rateCon}>
{cart?.items[0].price ? (
<>
<View style={styles.priceCon}>
<Text
style={
cart?.items[0]?.sale_price
? styles.textPricePromo
: styles.textPrice
}
>
₱
{parseFloat(cart?.items[0].price).toLocaleString("en-US")}
</Text>
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.text1} numberOfLines={2}>
Quantity: {cart?.items[0].quantity}
</Text>
</View>
</View>
</View>
<View style={styles.form}>
<Text style={styles.text2}>Reason for Returning:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setreason(e);
}}
// value={email}
multiline={true}
numberOfLines={4}
editable={success === true ? false : true}
// placeholder="reason for returning"
// keyboardType="numeric"
/>
</View>
<View style={styles.form}>
<Text style={styles.text2}>Supporting files:</Text>
<View style={styles.accountPrev}>
{selectedImages[0] ? (
<Image
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderWidth: 1,
borderColor: "#eee",
// borderRadius: 100,
marginHorizontal: 10,
}}
source={{
uri: selectedImages[0].imageFile.uri,
}}
/>
) : null}
{selectedImages[1] ? (
<Image
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderWidth: 1,
borderColor: "#eee",
// borderRadius: 100,
marginHorizontal: 10,
}}
source={{
uri: selectedImages[1].imageFile.uri,
}}
/>
) : null}
{selectedImages?.length > 2 ? (
<Text style={styles.text1}>
{selectedImages?.length - 2} more
</Text>
) : null}
<TouchableOpacity
style={styles.accountPrevWrap}
disabled={success === true ? true : false}
onPress={() => {
selectImage();
}}
>
{/* {selectedImage ? (
) : ( */}
<View style={styles.upBtn}>
<FontAwesomeIcon icon={faCamera} size={24} color={"#9c9c9c"} />
</View>
{/* )} */}
{/* <View style={styles.editprof}>
<FontAwesomeIcon icon={faEdit} size={24} color={"#333"} />
</View> */}
</TouchableOpacity>
</View>
</View>
{success === true ? (
<Text style={styles.btnTxt1}>
Successfully sent your refund request!
</Text>
) : success === false ? (
<Text style={styles.btnTxt1}>
Failed to submit, An error has occured, Please try again later!
</Text>
) : (
<TouchableOpacity style={styles.btn} onPress={() => ReturnSubmit()}>
{loading === true ? (
<ActivityIndicator size="large" color="#ececec" />
) : (
<Text style={styles.btnTxt}>Submit</Text>
)}
</TouchableOpacity>
)}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
margin: 5,
borderRadius: 10,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
// flexDirection: "row",
// padding: 10,
backgroundColor: "#ffffff",
// height: "60%",
},
wrapper: {
margin: 10,
marginBottom: 10,
justifyContent: "space-between",
alignItems: "center",
},
prodwrapper: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
overflow: "hidden",
borderColor: "#dddd",
borderRadius: 10,
padding: 10,
marginTop: 20,
},
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%",
},
btn: {
backgroundColor: "#ffaa00",
paddingHorizontal: 55,
width: "90%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
borderRadius: 15,
},
btnTxt: {
fontSize: 15,
color: "#fafafa",
fontWeight: "600",
},
btnTxt1: {
fontSize: 15,
color: "#1b1b1b",
fontWeight: "600",
marginBottom: 10,
},
text: {
fontSize: 13,
},
text1: {
fontSize: 10,
color: "#b4b4b4",
},
text2: {
fontSize: 13,
color: "#3b3b3b",
marginLeft: 11,
marginTop: 20,
},
text4: {
fontSize: 18,
color: "#3b3b3b",
marginLeft: 11,
marginTop: 20,
fontWeight: "600",
alignSelf: "center",
},
form: {
width: "100%",
},
input: {
maxHeight: 100,
width: "95%",
margin: 12,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
},
accountPrev: {
marginBottom: 25,
// width: 158,
width: "100%",
justifyContent: "center",
flexDirection: "row",
alignItems: "center",
padding: 10,
},
accountPrevWrap: {
borderWidth: 4,
borderStyle: "dashed",
borderColor: "#ffaa00c0",
padding: 10,
margin: 10,
},
upBtn: {
padding: 20,
},
});
export default ReturnForm;

99
app/components/profile/my_purchases/ToPay.jsx
View File

@ -1,9 +1,23 @@
import React from "react"; import React, { useState } from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native"; import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
Dimensions,
} from "react-native";
import ReceiptCard from "./Receipt";
import Modal from "react-native-modal";
const deviceWidth = Dimensions.get("window").width;
const ToPayCard = ({ cart }) => { const ToPayCard = ({ cart }) => {
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z" // Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const deliveryDate = new Date(cart.deliveryDate); const [modalVisible, setModalVisible] = useState(false);
const date = "2023-09-25T15:30:00Z";
const deliveryDate = new Date(date);
const month = deliveryDate.toLocaleString("en-US", { month: "short" }); const month = deliveryDate.toLocaleString("en-US", { month: "short" });
const day = deliveryDate.getDate(); const day = deliveryDate.getDate();
const options = { const options = {
@ -17,7 +31,8 @@ const ToPayCard = ({ cart }) => {
timeZone: "Asia/Manila", timeZone: "Asia/Manila",
...options, ...options,
}); });
const total = parseFloat(cart?.total_amount);
console.log(total.toFixed(2));
// Format the day with leading zeros if needed (e.g., "01" instead of "1") // Format the day with leading zeros if needed (e.g., "01" instead of "1")
const formattedDay = day < 10 ? `0${day}` : day; const formattedDay = day < 10 ? `0${day}` : day;
@ -25,9 +40,12 @@ const ToPayCard = ({ cart }) => {
const philippinesTime = `${month}. ${formattedDay} `; const philippinesTime = `${month}. ${formattedDay} `;
return ( return (
<View style={styles.container}> <TouchableOpacity
style={styles.container}
onPress={() => setModalVisible(true)}
>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text> <Text style={styles.headerText}>{cart.items[0].vendor_name}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text> <Text style={styles.headerStatusText}>{cart.status}</Text>
</View> </View>
<View style={styles.wrapper}> <View style={styles.wrapper}>
@ -35,46 +53,43 @@ const ToPayCard = ({ cart }) => {
<View style={styles.imgWrap}> <View style={styles.imgWrap}>
<Image <Image
style={{ width: 50, height: 50, resizeMode: "cover" }} style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }} source={{
uri: `${
cart?.items[0].product.product_image !== ""
? cart?.items[0].product.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
}`,
}}
/> />
</View> </View>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name} {cart?.items[0]?.product.name}
</Text> </Text>
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Variant: pink Variant:{cart?.items[0].variant}
</Text> </Text>
<View style={styles.rateCon}> <View style={styles.rateCon}>
{cart?.products[0]?.price ? ( {cart?.items[0].price ? (
<> <>
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={ style={
cart?.products[0]?.promo cart?.items[0]?.sale_price
? styles.textPricePromo ? styles.textPricePromo
: styles.textPrice : styles.textPrice
} }
> >
₱{cart?.products[0]?.price} ₱
{parseFloat(cart?.items[0].price).toLocaleString("en-US")}
</Text> </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> </View>
</> </>
) : ( ) : (
<Text>No price </Text> <Text>No price </Text>
)} )}
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Quantity: 2 Quantity: {cart?.items[0].quantity}
</Text> </Text>
</View> </View>
</View> </View>
@ -83,7 +98,12 @@ const ToPayCard = ({ cart }) => {
<View style={styles.total}></View> <View style={styles.total}></View>
<View style={styles.total}> <View style={styles.total}>
<Text style={styles.totalText}>Total: </Text> <Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text> <Text style={styles.textPrice}>
{" "}
₱
{parseFloat(total).toLocaleString("en-US") ??
parseFloat(cart?.total_amount).toLocaleString("en-US")}{" "}
</Text>
</View> </View>
</View> </View>
</View> </View>
@ -93,13 +113,37 @@ const ToPayCard = ({ cart }) => {
<Text style={styles.textStatus}> {cart?.currentStatus}</Text> <Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View> */} </View> */}
<View style={styles.footer}> <View style={styles.footer}>
{cart?.payment_method === "Cash On Delivery" ? (
<>{/* <Text style={styles.footerDate}> The seller </Text> */}</>
) : (
<>
<Text style={styles.footerDate}> </Text> <Text style={styles.footerDate}> </Text>
<TouchableOpacity style={styles.rateBtn}> <TouchableOpacity style={styles.rateBtn}>
<Text style={styles.rateText}> Pay Now </Text> <Text style={styles.rateText}> Pay Now </Text>
</TouchableOpacity> </TouchableOpacity>
</>
)}
</View> </View>
</View> <Modal
animationType="slide"
animationIn={"zoomIn"}
transparent={true}
isVisible={modalVisible}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={["down", "up", "right", "left"]}
swipeThreshold="400"
backdropOpacity={0.2}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<ReceiptCard onRequestClose={setModalVisible} cart={cart} />
</Modal>
</TouchableOpacity>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -225,7 +269,7 @@ const styles = StyleSheet.create({
borderWidth: 2, borderWidth: 2,
overflow: "hidden", overflow: "hidden",
backgroundColor: "#ffaa00", backgroundColor: "#ffaa00",
borderColor:'#ffaa00', borderColor: "#ffaa00",
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
paddingHorizontal: 15, paddingHorizontal: 15,
@ -239,8 +283,7 @@ const styles = StyleSheet.create({
footerDate: { footerDate: {
fontSize: 11, fontSize: 11,
paddingLeft: 15, paddingLeft: 15,
color:'#747474' color: "#747474",
}, },
}); });

276
app/components/profile/my_purchases/ToReceive.jsx
View File

@ -1,21 +1,40 @@
import React from "react"; import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native"; import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
Dimensions,
} from "react-native";
import ReceiptCard from "./Receipt";
import Modal from "react-native-modal";
import { update_order } from "../../../services/api/controllers/order";
import AsyncStorage from "@react-native-async-storage/async-storage";
const deviceWidth = Dimensions.get("window").width;
const ToReceiveCard = ({ cart }) => { const ToReceiveCard = ({ cart }) => {
const [modalVisible, setModalVisible] = useState(false);
const [modalVisible1, setModalVisible1] = useState(false);
const [token, settoken] = useState("");
const [estimatedDate, setestimatedDate] = useState("");
const [completed, setcompleted] = useState(false);
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z" // Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const expectedDeliveryDateMin = new Date(cart.expectedDeliveryDateMin); const expectedDeliveryDateMin = new Date(cart.expectedDeliveryDateMin);
const month = expectedDeliveryDateMin.toLocaleString("en-US", { month: "short" }); const month = expectedDeliveryDateMin.toLocaleString("en-US", {
month: "short",
});
const day = expectedDeliveryDateMin.getDate(); const day = expectedDeliveryDateMin.getDate();
const options = { const options = {
year: "numeric", year: "numeric",
month: "short", month: "short",
day: "2-digit", day: "2-digit",
}; };
const options2 = { const options2 = {
month: "short", month: "short",
day: "2-digit", day: "2-digit",
}; };
const time = expectedDeliveryDateMin.toLocaleString("en-US", { const time = expectedDeliveryDateMin.toLocaleString("en-US", {
timeZone: "Asia/Manila", timeZone: "Asia/Manila",
@ -28,17 +47,92 @@ const ToReceiveCard = ({ cart }) => {
...options, ...options,
}); });
const total = parseFloat(cart?.total_amount);
// Format the day with leading zeros if needed (e.g., "01" instead of "1") // Format the day with leading zeros if needed (e.g., "01" instead of "1")
const formattedDay = day < 10 ? `0${day}` : day; const formattedDay = day < 10 ? `0${day}` : day;
// Create the final formatted date string "Sept. 25" // Create the final formatted date string "Sept. 25"
const philippinesTime = `${month}. ${formattedDay} `; const philippinesTime = `${month}. ${formattedDay} `;
useEffect(() => {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
settoken(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
// Assuming cart?.updatedAt holds a string in MongoDB updatedAt format
let updatedAtString = cart?.updatedAt; // Replace cart?.updatedAt with your actual value
if (updatedAtString) {
// Convert the string to a JavaScript Date object
let updatedAtDate = new Date(updatedAtString);
// Calculate the 3rd day from the updatedAt date
let thirdDay = new Date(updatedAtDate.getTime());
thirdDay.setDate(updatedAtDate.getDate() + 3);
// Calculate the 7th day from the updatedAt date
let seventhDay = new Date(updatedAtDate.getTime());
seventhDay.setDate(updatedAtDate.getDate() + 7);
// Format the dates to local time in 'MM/DD/YYYY' format
let formattedThirdDay = thirdDay.toLocaleDateString("en-US");
let formattedSeventhDay = seventhDay.toLocaleDateString("en-US");
// Display or use the formatted dates as needed
console.log("3rd day from updatedAt:", formattedThirdDay);
console.log("7th day from updatedAt:", formattedSeventhDay);
setestimatedDate(formattedThirdDay + " - " + formattedSeventhDay);
} else {
console.log("Invalid updatedAt date");
}
}, []);
const OrderReceived = () => {
update_order({
token: token,
id: cart._id,
body: {
status: "COMPLETED",
// shipping_fee: product.shipping_fee ?? 50,
},
})
.then((results) => {
if (results.status === 200) {
// setamount(result.data.attributes.amount);
// setpaymessage(result.data.attributes.description);
// setModalVisible(!modalVisible);
// setsuccessCOD(true);
// console.log(
// "order update id: " +
// results.data +
// "orderId: " +
// orderId +
// "amount: " +
// result.data.attributes.amount
// );
setcompleted(true);
setModalVisible1(false);
} else {
setsuccessCOD("error");
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
};
return ( return (
<View style={styles.container}> <TouchableOpacity
style={styles.container}
onPress={() => setModalVisible(true)}
>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text> <Text style={styles.headerText}>{cart.items[0].vendor_name}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text> <Text style={styles.headerStatusText}>{cart.status}</Text>
</View> </View>
<View style={styles.wrapper}> <View style={styles.wrapper}>
@ -46,46 +140,44 @@ const ToReceiveCard = ({ cart }) => {
<View style={styles.imgWrap}> <View style={styles.imgWrap}>
<Image <Image
style={{ width: 50, height: 50, resizeMode: "cover" }} style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }} // source={{ uri: `${cart?.items[0].product.product_image}` }}
source={{
uri: `${
cart?.items[0].product.product_image !== ""
? cart?.items[0].product.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
}`,
}}
/> />
</View> </View>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name} {cart?.items[0]?.product.name}
</Text> </Text>
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Variant: pink Variant:{cart?.items[0].variant}
</Text> </Text>
<View style={styles.rateCon}> <View style={styles.rateCon}>
{cart?.products[0]?.price ? ( {cart?.items[0].price ? (
<> <>
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={ style={
cart?.products[0]?.promo cart?.items[0]?.sale_price
? styles.textPricePromo ? styles.textPricePromo
: styles.textPrice : styles.textPrice
} }
> >
₱{cart?.products[0]?.price} ₱
{parseFloat(cart?.items[0].price).toLocaleString("en-US")}
</Text> </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> </View>
</> </>
) : ( ) : (
<Text>No price </Text> <Text>No price </Text>
)} )}
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Quantity: 2 Quantity: {cart?.items[0].quantity}
</Text> </Text>
</View> </View>
</View> </View>
@ -94,24 +186,92 @@ const ToReceiveCard = ({ cart }) => {
<View style={styles.total}></View> <View style={styles.total}></View>
<View style={styles.total}> <View style={styles.total}>
<Text style={styles.totalText}>Total: </Text> <Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text> <Text style={styles.textPrice}>
{" "}
₱
{parseFloat(total).toLocaleString("en-US") ??
parseFloat(cart?.total_amount).toLocaleString("en-US")}{" "}
</Text>
</View> </View>
</View> </View>
</View> </View>
<View style={styles.cStatus}> {/* <View style={styles.cStatus}>
<Text style={styles.textStatusHeader}> Status: </Text> <Text style={styles.textStatusHeader}> Status: </Text>
<Text style={styles.textStatus}> {cart?.currentStatus}</Text> <Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View> </View> */}
<View style={styles.footer}> <View style={styles.footer}>
<Text style={styles.footerDate}>Receive by: {time} - {time2} </Text> <Text style={styles.footerDate}>Receive by:{estimatedDate} </Text>
{completed === false ? (
<TouchableOpacity
style={styles.rateBtn}
onPress={() => setModalVisible1(true)}
>
<Text style={styles.rateText}>Order Receive</Text>
</TouchableOpacity>
) : (
<Text style={styles.rateText1}>Order Received</Text>
)}
</View>
<Modal
animationType="slide"
animationIn={"zoomIn"}
transparent={true}
isVisible={modalVisible1}
onSwipeComplete={() => setModalVisible1(false)}
swipeDirection={["down", "up", "right", "left"]}
swipeThreshold="100"
backdropOpacity={0.2}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible1(!modalVisible1);
}}
>
{/* <ReceiptCard onRequestClose={setModalVisible} cart={cart} /> */}
<View style={styles.modalCon}>
<Text style={styles.modalSub}>
Note: This order will automatically be considered received 7 days
after it is received.
</Text>
<Text style={styles.modalHead}>Mark as Order Received?</Text>
<TouchableOpacity style={styles.rateBtn}> <View style={styles.footerBtnWrap}>
<Text style={styles.rateText}></Text> <TouchableOpacity
style={styles.footerBtn}
onPress={() => setModalVisible1(false)}
>
<Text style={styles.footerBtnC}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.footerBtn}
onPress={() => OrderReceived()}
>
<Text style={styles.footerBtnCo}>Confirm</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</Modal>
<Modal
animationType="slide"
animationIn={"zoomIn"}
transparent={true}
isVisible={modalVisible}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={["down", "up", "right", "left"]}
swipeThreshold="100"
backdropOpacity={0.2}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<ReceiptCard onRequestClose={setModalVisible} cart={cart} />
</Modal>
</TouchableOpacity>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -236,7 +396,7 @@ const styles = StyleSheet.create({
rateBtn: { rateBtn: {
borderWidth: 2, borderWidth: 2,
overflow: "hidden", overflow: "hidden",
borderColor: "#ffffff", borderColor: "#ffaa00",
borderRadius: 10, borderRadius: 10,
padding: 5, padding: 5,
paddingHorizontal: 15, paddingHorizontal: 15,
@ -245,13 +405,61 @@ const styles = StyleSheet.create({
}, },
rateText: { rateText: {
fontWeight: "600", fontWeight: "600",
color: "#ff3c00", color: "#ffaa00",
},
rateText1: {
fontWeight: "600",
color: "#ffaa00",
padding: 10,
}, },
footerDate: { footerDate: {
fontSize: 11, fontSize: 11,
paddingLeft: 15, paddingLeft: 15,
color:'#747474' color: "#747474",
},
modalCon: {
margin: 5,
borderRadius: 10,
borderColor: "#dddd",
borderWidth: 1,
overflow: "hidden",
// flexDirection: "row",
padding: 20,
backgroundColor: "#ffffff",
// height: "60%",
justifyContent: "center",
alignItems: "center",
},
footerBtnWrap: {
flexDirection: "row",
justifyContent: "space-between",
width: "50%",
marginTop: 10,
},
modalSub: {
fontSize: 13,
color: "#8f8f8f",
fontWeight: "400",
marginTop: 5,
},
modalHead: {
fontSize: 16,
color: "#141414",
fontWeight: "600",
marginVertical: 40,
},
footerBtn: {
paddingHorizontal: 20,
paddingVertical: 10,
},
footerBtnC: {
color: "#ff0000",
fontWeight: "600",
},
footerBtnCo: {
color: "#0400ff",
fontWeight: "600",
}, },
}); });

165
app/components/profile/my_purchases/ToShip.jsx
View File

@ -1,27 +1,45 @@
import React from "react"; import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native"; import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
Dimensions,
} from "react-native";
import ReceiptCard from "./Receipt";
import Modal from "react-native-modal";
const deviceWidth = Dimensions.get("window").width;
const ToShipCard = ({ cart }) => { const ToShipCard = ({ cart }) => {
const [modalVisible, setModalVisible] = useState(false);
const [estimatedDate, setestimatedDate] = useState("");
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z" // Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
const expectedShippingStartDateMin = new Date(cart.expectedShippingStartDateMin); const expectedShippingStartDateMin = new Date(
const month = expectedShippingStartDateMin.toLocaleString("en-US", { month: "short" }); cart.expectedShippingStartDateMin
);
const month = expectedShippingStartDateMin.toLocaleString("en-US", {
month: "short",
});
const day = expectedShippingStartDateMin.getDate(); const day = expectedShippingStartDateMin.getDate();
const options = { const options = {
year: "numeric", year: "numeric",
month: "short", month: "short",
day: "2-digit", day: "2-digit",
}; };
const options2 = { const options2 = {
month: "short", month: "short",
day: "2-digit", day: "2-digit",
}; };
const time = expectedShippingStartDateMin.toLocaleString("en-US", { const time = expectedShippingStartDateMin.toLocaleString("en-US", {
timeZone: "Asia/Manila", timeZone: "Asia/Manila",
...options2, ...options2,
}); });
const expectedShippingStartDateMax = new Date(cart.expectedShippingStartDateMax); const expectedShippingStartDateMax = new Date(
cart.expectedShippingStartDateMax
);
const total = parseFloat(cart?.total_amount);
const time2 = expectedShippingStartDateMax.toLocaleString("en-US", { const time2 = expectedShippingStartDateMax.toLocaleString("en-US", {
timeZone: "Asia/Manila", timeZone: "Asia/Manila",
@ -33,11 +51,75 @@ const ToShipCard = ({ cart }) => {
// Create the final formatted date string "Sept. 25" // Create the final formatted date string "Sept. 25"
const philippinesTime = `${month}. ${formattedDay} `; const philippinesTime = `${month}. ${formattedDay} `;
function formatDate(input) {
let date;
// Check if the input is a Unix timestamp (number) or a string
if (
typeof input === "number" ||
(typeof input === "string" && !isNaN(Number(input)))
) {
date = new Date(Number(input) * 1000); // Convert string to number and then to milliseconds
} else if (typeof input === "string") {
date = new Date(input); // Try to create a Date object from the string
} else {
return "Invalid input";
}
// Check if the date is valid
if (isNaN(date.getTime())) {
return "Invalid date";
}
// Convert to local time
const localDate = date.toLocaleString("en-PH", {
timeZone: "Asia/Manila",
year: "numeric",
month: "2-digit",
day: "2-digit",
// hour: "2-digit",
// minute: "2-digit",
// hour12: false,
});
return localDate;
// .replace(",", ""); // Removing the comma from the default format
}
useEffect(() => {
// Assuming cart?.updatedAt holds a string in MongoDB updatedAt format
let updatedAtString = cart?.updatedAt; // Replace cart?.updatedAt with your actual value
if (updatedAtString) {
// Convert the string to a JavaScript Date object
let updatedAtDate = new Date(updatedAtString);
// Calculate the 3rd day from the updatedAt date
let thirdDay = new Date(updatedAtDate.getTime());
thirdDay.setDate(updatedAtDate.getDate() + 3);
// Calculate the 7th day from the updatedAt date
let seventhDay = new Date(updatedAtDate.getTime());
seventhDay.setDate(updatedAtDate.getDate() + 7);
// Format the dates to local time in 'MM/DD/YYYY' format
let formattedThirdDay = thirdDay.toLocaleDateString('en-US');
let formattedSeventhDay = seventhDay.toLocaleDateString('en-US');
// Display or use the formatted dates as needed
console.log("3rd day from updatedAt:", formattedThirdDay);
console.log("7th day from updatedAt:", formattedSeventhDay);
setestimatedDate(formattedThirdDay+" - "+formattedSeventhDay )
} else {
console.log("Invalid updatedAt date");
}
}, [])
return ( return (
<View style={styles.container}> <TouchableOpacity style={styles.container} onPress={()=> setModalVisible(true)}>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerText}>{cart.shopname}</Text> <Text style={styles.headerText}>{cart.items[0].vendor_name}</Text>
<Text style={styles.headerStatusText}>{cart.status}</Text> <Text style={styles.headerStatusText}>{cart.status}</Text>
</View> </View>
<View style={styles.wrapper}> <View style={styles.wrapper}>
@ -45,46 +127,38 @@ const ToShipCard = ({ cart }) => {
<View style={styles.imgWrap}> <View style={styles.imgWrap}>
<Image <Image
style={{ width: 50, height: 50, resizeMode: "cover" }} style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{ uri: cart?.products[0]?.img }} // source={{ uri: `${cart?.items[0].product.product_image}` }}
source={{ uri: `${cart?.items[0].product.product_image !== ""?cart?.items[0].product.product_image:"https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"}` }}
/> />
</View> </View>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{cart?.products[0]?.name} {cart?.items[0]?.product.name}
</Text> </Text>
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Variant: pink Variant:{cart?.items[0].variant}
</Text> </Text>
<View style={styles.rateCon}> <View style={styles.rateCon}>
{cart?.products[0]?.price ? ( {cart?.items[0].price ? (
<> <>
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={ style={
cart?.products[0]?.promo cart?.items[0]?.sale_price
? styles.textPricePromo ? styles.textPricePromo
: styles.textPrice : styles.textPrice
} }
> >
₱{cart?.products[0]?.price} ₱{ parseFloat(cart?.items[0].price).toLocaleString('en-US')}
</Text> </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> </View>
</> </>
) : ( ) : (
<Text>No price </Text> <Text>No price </Text>
)} )}
<Text style={styles.text1} numberOfLines={2}> <Text style={styles.text1} numberOfLines={2}>
Quantity: 2 Quantity: {cart?.items[0].quantity}
</Text> </Text>
</View> </View>
</View> </View>
@ -93,23 +167,48 @@ const ToShipCard = ({ cart }) => {
<View style={styles.total}></View> <View style={styles.total}></View>
<View style={styles.total}> <View style={styles.total}>
<Text style={styles.totalText}>Total: </Text> <Text style={styles.totalText}>Total: </Text>
<Text style={styles.textPrice}> ₱180.00 </Text> <Text style={styles.textPrice}>
{" "}
₱
{parseFloat(total).toLocaleString("en-US") ??
parseFloat(cart?.total_amount).toLocaleString("en-US")}{" "}
</Text>
</View> </View>
</View> </View>
</View> </View>
<View style={styles.cStatus}> {/* <View style={styles.cStatus}>
<Text style={styles.textStatusHeader}> Status: </Text> <Text style={styles.textStatusHeader}> Status: </Text>
<Text style={styles.textStatus}> {cart?.currentStatus}</Text> <Text style={styles.textStatus}> {cart?.currentStatus}</Text>
</View> </View> */}
<View style={styles.footer}> <View style={styles.footer}>
<Text style={styles.footerDate}>Ship by: {time} - {time2} </Text> <Text style={styles.footerDate}>
Ship by: {estimatedDate}{" "}
</Text>
<TouchableOpacity style={styles.rateBtn}> <TouchableOpacity style={styles.rateBtn}>
<Text style={styles.rateText}> </Text> <Text style={styles.rateText}> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> <Modal
animationType="slide"
animationIn={"zoomIn"}
transparent={true}
isVisible={modalVisible}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={["down","up","right","left"]}
swipeThreshold="100"
backdropOpacity={0.2}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<ReceiptCard onRequestClose={setModalVisible} cart={cart} />
</Modal>
</TouchableOpacity>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -118,6 +217,8 @@ const styles = StyleSheet.create({
margin: 5, margin: 5,
borderRadius: 10, borderRadius: 10,
borderColor: "#dddd", borderColor: "#dddd",
// borderColor#1818186cddd",
//
borderWidth: 1, borderWidth: 1,
overflow: "hidden", overflow: "hidden",
// flexDirection: "row", // flexDirection: "row",
@ -248,7 +349,7 @@ const styles = StyleSheet.create({
footerDate: { footerDate: {
fontSize: 11, fontSize: 11,
paddingLeft: 15, paddingLeft: 15,
color:'#747474' color: "#747474",
}, },
}); });

33
app/components/profile/view-history/ProductCard.jsx
View File

@ -10,8 +10,8 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import CheckBox from 'expo-checkbox'; import CheckBox from "expo-checkbox";
const ProductCard = ({ product, like, index,liked,all }) => { const ProductCard = ({ product, like, index, liked, all }) => {
const navigation = useNavigation(); const navigation = useNavigation();
console.log(product + "ProductCard" + "index: " + index); console.log(product + "ProductCard" + "index: " + index);
const [isChecked, setIsChecked] = useState(false); const [isChecked, setIsChecked] = useState(false);
@ -24,11 +24,11 @@ const ProductCard = ({ product, like, index,liked,all }) => {
<View style={styles.upper}> <View style={styles.upper}>
<Image <Image
style={{ width: "100%", height: 200, resizeMode: "cover" }} style={{ width: "100%", height: 200, resizeMode: "cover" }}
source={{ uri: product?.img }} source={{ uri: `${product.file_path_image}` }}
/> />
<View style={styles.heart}> <View style={styles.heart}>
<CheckBox <CheckBox
value={liked.includes(index)|| all===true} value={liked.includes(index) || all === true}
onValueChange={() => like(index)} onValueChange={() => like(index)}
/> />
</View> </View>
@ -36,26 +36,31 @@ const ProductCard = ({ product, like, index,liked,all }) => {
<View style={{ padding: 10, backgroundColor: "#fff" }}> <View style={{ padding: 10, backgroundColor: "#fff" }}>
<Text style={styles.text} numberOfLines={2}> <Text style={styles.text} numberOfLines={2}>
{product?.name} {product?.product_name}
</Text> </Text>
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={product?.promo ? styles.textPricePromo : styles.textPrice} style={
product?.sale_price ? styles.textPricePromo : styles.textPrice
}
> >
₱{product?.price} ₱{product?.regular_price}
</Text> </Text>
{product?.promo ? ( {product?.sale_price ? (
<Text style={styles.textPrice}> <Text style={styles.textPrice}>
{/* {" "}
{(product.regular_price * (1 - product.sale_price / 100)).toFixed(2) }
{" "} {" "}
{product?.price - product?.price * 0.3}{" "} <Text style={{ fontWeight: "400" }}>(-{product?.sale_price}%)</Text> */}
<Text style={{ fontWeight: "400" }}>(-{product?.promo}%)</Text> {product.sale_price}
</Text> </Text>
) : null} ) : null}
</View> </View>
<View style={styles.footer}> <View style={styles.footer}>
<Text style={styles.textMin}> {/* <Text style={styles.textMin}>
min. order: {product?.min} {product?.per} min. order: {product?.min} {product?.per}
</Text> </Text> */}
<Text style={styles.textMin}>stock: {product.stock}</Text>
<Text style={styles.textSold}>{product?.sold} sold</Text> <Text style={styles.textSold}>{product?.sold} sold</Text>
</View> </View>
{product?.rate ? ( {product?.rate ? (
@ -97,8 +102,8 @@ const styles = StyleSheet.create({
position: "absolute", position: "absolute",
top: 10, top: 10,
right: 10, right: 10,
height:20, height: 20,
width:20 width: 20,
}, },
text: { text: {
fontSize: 13, fontSize: 13,

16
app/components/search/Header.jsx
View File

@ -1,6 +1,6 @@
import { faArrowLeft, faSearch } from "@fortawesome/free-solid-svg-icons"; import { faArrowLeft, faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useIsFocused, useNavigation } from "@react-navigation/native";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { import {
Image, Image,
@ -11,9 +11,14 @@ import {
View, View,
} from "react-native"; } from "react-native";
import obn from "../../../assets/obn.png"; import obn from "../../../assets/obn.png";
const SearchHeader = ({ unfocus }) => { const SearchHeader = ({ unfocus, searchProduct, cat }) => {
const [searchKeyword, setsearchKeyword] = useState(""); const [searchKeyword, setsearchKeyword] = useState("");
const navigation = useNavigation(); const navigation = useNavigation();
const isFocused = useIsFocused();
useEffect(() => {
setsearchKeyword(cat);
// searchProduct(searchKeyword);
}, [isFocused]);
console.log(searchKeyword); console.log(searchKeyword);
const Search = (e) => { const Search = (e) => {
@ -54,8 +59,15 @@ const SearchHeader = ({ unfocus }) => {
placeholder="Search product or vendorss" placeholder="Search product or vendorss"
placeholderTextColor="#a5a5a5" placeholderTextColor="#a5a5a5"
onChangeText={(e) => Search(e)} onChangeText={(e) => Search(e)}
defaultValue={cat ?? ""}
onSubmitEditing={() => searchProduct(searchKeyword)}
/> />
<TouchableOpacity
onPress={() => searchProduct(searchKeyword)}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faSearch} color={"#888888"} size={25} /> <FontAwesomeIcon icon={faSearch} color={"#888888"} size={25} />
</TouchableOpacity>
</View> </View>
</View> </View>
); );

282
app/components/search/ProductCard.jsx Normal file
View File

@ -0,0 +1,282 @@
import {
faHeart,
faLocation,
faLocationArrow,
faLocationPin,
faStar,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useIsFocused, useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import CheckBox from "expo-checkbox";
import nobg from "../../.././assets/bg-no-img-big.jpg";
const ProductCard = ({ product, vendor, index, productAll }) => {
const navigation = useNavigation();
// console.log(product + "ProductCard" + "index: " + index);
const [isChecked, setIsChecked] = useState(false);
const [variablePrice, setvariablePrice] = useState("");
// console.log(product+"hh")
const isFocused = useIsFocused();
// console.log(productAll)
useEffect(() => {
// setactiveProduct(product);
const purch = productAll?.filter((item) => item?.parent_id === product._id);
// setvariations(purch);asus
console.log(product._id);
function getLowestHighestPrice(variation) {
let lowestPrice = Infinity;
let highestPrice = -Infinity;
let hasPrice = false;
variation?.forEach((item) => {
let price = null;
// If sale_price is available and not an empty string, use it; otherwise, use regular_price
if (item?.sale_price && item?.sale_price !== "") {
price = parseFloat(item?.sale_price);
} else if (item?.regular_price && item?.regular_price !== "") {
price = parseFloat(item?.regular_price);
}
// Update lowest and highest prices
if (price !== null) {
hasPrice = true;
lowestPrice = Math.min(lowestPrice, price);
highestPrice = Math.max(highestPrice, price);
}
});
if (!hasPrice) {
return null;
}
// If lowest and highest prices are the same, return that price alone
if (lowestPrice === highestPrice) {
return `${lowestPrice}`;
}
// Return the range of lowest to highest prices
return `${lowestPrice}-${highestPrice}`;
}
const priceRange = getLowestHighestPrice(purch);
setvariablePrice(priceRange);
console.log("-----------------------Price Range:", priceRange);
}, [isFocused]);
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.product_image !== ""
? product.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
}`,
}}
/>
{/* <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?.product_name}
</Text>
{product.product_type === "variable" ? (
<View style={styles.priceCon}>
<Text
style={
product.sale_price ? styles.textPricePromo : styles.textPrice
}
>
{variablePrice ? (
" ₱" + parseFloat(variablePrice).toLocaleString('en-US')
) : (
<TouchableOpacity >
<Text style={styles.inquire}>Inquire for price</Text>
</TouchableOpacity>
)}
</Text>
</View>
) : (
<View style={styles.priceCon}>
<Text
style={
product.sale_price ? styles.textPricePromo : styles.textPrice
}
>
{product?.regular_price && product?.regular_price !== null ? (
"₱" + parseFloat(product?.regular_price).toLocaleString('en-US')
) : (
<TouchableOpacity style={styles.inquire}>
<Text style={styles.inquire}>Inquire for price</Text>
</TouchableOpacity>
)}
</Text>
{product.sale_price ? (
<Text style={styles.textPrice}>
{" "}
{/* {(product.regular_price * (1 - product.promo / 100)).toFixed(2) }{" "} */}
{parseFloat(product?.sale_price).toLocaleString('en-US')}
{/* <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.textMin}>stock: {product.stock}</Text>
<Text style={styles.textSold}>{product?.sold} sold</Text>
</View>
<View style={styles.footer1}>
{/* <Text style={styles.textMin}>
min. order: {product?.min} {product?.per}
</Text> */}
<Text style={styles.textMin1}>
<FontAwesomeIcon icon={faLocationPin} color={"#c2c2c2"} size={10} />
{vendor.shipping_city}
</Text>
<Text style={styles.textSold}></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",
},
textMin1: {
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,
},
inquire: {
fontSize: 16,
fontWeight: "600",
// textTransform: "capitalize",
// textDecorationLine: "line-through",
color: "#ffaa00",
},
textRate: {
fontSize: 12,
color: "#838383",
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
// backgroundColor: "#ffaa00",
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
},
footer1: {
marginTop: 10,
flexDirection: "row",
justifyContent: "space-between",
},
});
export default ProductCard;

256
app/components/search/ShopCard.jsx Normal file
View File

@ -0,0 +1,256 @@
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useIsFocused, useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
Image,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
const ShopCard = ({ shop, product }) => {
const [shopProd, setshopProd] = useState([]);
// console.log(product);
const navigation = useNavigation();
const isFocused = useIsFocused();
useEffect(() => {
const purch = product?.filter((item) => item.vendor_api_id === shop._id);
// console.log(purch);
setshopProd(purch.slice(0, 3));
}, [isFocused]);
return (
<TouchableOpacity
activeOpacity={0.7}
style={styles.container}
onPress={() => navigation.navigate("Shop", { product: shop })}
>
<View style={styles.top}>
<View style={styles.imgWrap}>
<Image
style={{
width: 80,
height: 80,
resizeMode: "cover",
marginRight: 10,
}}
source={{
uri: shop.vendor_image
? shop.vendor_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/>
</View>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{shop.user_login}
</Text>
<View style={styles.rateCon}>
{shop.rate ? (
<>
<Text style={styles.textHead}>Rating: </Text>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}>
{shop.rate} ({shop.raterTotal})
</Text>
</>
) : (
<Text>No rating </Text>
)}
</View>
<View style={styles.rateCon}>
<Text style={styles.textHead}>Average Response Time: </Text>
{shop.respoTime ? (
<>
<Text style={styles.textRate}>{shop.respoTime}hrs</Text>
</>
) : (
<Text></Text>
)}
</View>
<View style={styles.rateCon}>
<Text style={styles.textHead}>Main Products: </Text>
{shop.respoTime ? (
<>
{shop.tags.map((e, i) => (
<Text style={styles.textRate} key={i}>
{e},{" "}
</Text>
))}
</>
) : (
<Text></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}>
{isFocused === true ? (
<>
{shopProd?.map((e, i) => (
<Image
key={i}
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 10,
}}
source={{
uri:
e.product_image ??
"https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/>
))}
</>
) : null}
</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%",
width: "55%",
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;

95
app/components/shop/Products.jsx Normal file
View File

@ -0,0 +1,95 @@
import React, { useEffect, useRef } from "react";
import { StyleSheet, Text, View } from "react-native";
import ProductCard from "../main/home/ProductCard";
import MasonryList from "@react-native-seoul/masonry-list";
const Products = ({ prod, item,productList }) => {
// const [product, setproduct] = useState(ProductCard ?? []);
// const scrollViewRef = useRef(null);
// const [item, setitem] = useState(20);
// const [prods, setprod] = useState([]);
// useEffect(() => {
// setprod(product?.results?.splice(1, item) ?? []);
// console.log("length " + products?.results?.length + " item " + item);
// }, []);
// console.log("prod is " + products.results);
// const [isEndReached, setEndReached] = useState(false);
// useEffect(() => {
// if (item <= products?.results?.length) {
// setprod([...prod, ...product?.results?.slice(item, item + 10)]);
// }
// }, [item]);
// useEffect(() => {
// setitem(20);
// }, [products]);
// const handleScroll = (event) => {
// const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
// const isAtEnd =
// layoutMeasurement.height + contentOffset.y >= contentSize.height - 200;
// if (isAtEnd) {
// // You've reached the end of the ScrollView
// setEndReached(true);
// console.log("end here" + item);
// if (item <= products?.results?.length) {
// setitem(item + 10);
// }
// // setEndReached(false);
// // console.log("item" + item);
// }
// };
return (
<View style={styles.container}>
<View style={styles.wrapper}>
<MasonryList
data={prod}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={2}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => <ProductCard productList={productList} product={item} />}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
width: "100%",
},
wrapper: {
width: "100%",
alignItems: "center",
justifyContent: "center",
},
header: {
position: "fixed",
width: "100%",
top: 0,
marginBottom: 5,
marginLeft: 15,
},
img: {
width: 400,
height: 200,
resizeMode: "cover",
margin: "auto",
borderRadius: 10,
},
tabs: {
height: 80,
width: "100%",
position: "absolute",
bottom: 100,
},
tab: {},
});
export default Products;

96
app/components/shop/Shop.jsx Normal file
View File

@ -0,0 +1,96 @@
import React from "react";
import { Dimensions, ScrollView, StyleSheet, Text, View } from "react-native";
import RenderHtml from "react-native-render-html";
import HTMLView from "react-native-htmlview";
const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height;
const Shop = ({ info }) => {
// const { info } = route.params;
// const { width } = useWindowDimensions();
// const source = `<div> ${info}</div>`;
const source = {
html: `
${info}`
};
console.log(source);
return (
<View style={styles1.container}>
<View style={styles1.wrapper}>
<RenderHtml contentWidth={width} source={source} />
{/* <HTMLView value={source} stylesheet={styles1} /> */}
</View>
</View>
);
};
const styles1 = StyleSheet.create({
container: {
// flex: 1,
// backgroundColor: "#fff0f0",
width: "100%",
height: "100%",
},
wrapper: {
width: "100%",
alignItems: "center",
justifyContent: "center",
padding:15
},
div: {
// height: "auto",
// flexDirection: "row",
// minHeight: 1500,
// justifyContent: "center",
// alignItems: "center",
// padding: 10,
},
// img: {
// width: 400,
// // height: 200,
// // resizeMode: "cover",
// borderWidth: 1,
// margin: 0,
// // borderRadius: 500,
// },
// tabs: {
// height: 80,
// width: "100%",
// position: "absolute",
// bottom: 100,
// },
p: {
fontSize: 15,
padding: 10,
},
h3: {
fontSize: 20,
padding: 10,
fontWeight: "600",
margin: 0,
padding: 0,
},
tab: {},
table: {
width: "100%",
},
th: {
width: "100%",
},
td: {
width: "100%",
},
tr: {
width: "100%",
},
img: {
// height: 600,
},
});
export default Shop;

132
app/components/shop/Tab.jsx Normal file
View File

@ -0,0 +1,132 @@
import { faArrowLeft } 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 {
Dimensions,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { favorite } from "../../constants/favorites";
import ShopSinglePage from "../../pages/shop/ShopSinglePage";
// const Tabs = createMaterialTopTabNavigator();
const Tabs = createMaterialTopTabNavigator();
import Products from "./Products";
import Shop from "./Shop";
const Tab = ({ info,prod,item,productList }) => {
const navigation = useNavigation();
const [tab, settab] = useState("prod");
return (
<View style={styles.container}>
<View style={styles.wrapper}>
{/* <Tabs.Navigator
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{
// tabBarScrollEnabled: true, // Make sure to set this to true as well
// tabBarStyle: { width: "100%", height: 500 }, // Adjust the height as needed
tabBarItemStyle: { borderColor: "#dddd", borderLeftWidth: 1 }, // Divide the width evenly for each tab
tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
}}
// initialLayout={{ width: Dimensions.get('window').width,height: Dimensions.get('window').height}}
// style={{ height: '100%' }}
>
<Tabs.Screen
name="Products"
component={Products}
options={{ tabBarLabel: "Products" }}
// initialParams={{ products: products }}
/>
<Tabs.Screen
name="MoreInfo"
component={Shop}
options={{ tabBarLabel: "More Info" }}
initialParams={{ info: info }}
/>
</Tabs.Navigator> */}
<View style={styles.tab}>
<TouchableOpacity
style={tab === "prod" ? styles.tabBtnActive : styles.tabBtn}
onPress={() => settab("prod")}
>
<Text style={tab === "prod" ?styles.tabTxtActive:styles.tabTxt}>Products</Text>
</TouchableOpacity>
{/* <TouchableOpacity
style={tab === "more" ? styles.tabBtnActive : styles.tabBtn}
onPress={() => settab("more")}
>
<Text style={tab === "more" ?styles.tabTxtActive:styles.tabTxt}>More Info</Text>
</TouchableOpacity> */}
</View>
{tab === "prod" ? <Products productList={productList} prod={prod} item={item} /> : <Shop info={info} />}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// backgroundColor: "#ff3e3e",
width: "100%",
// height: "100%",
// flex:1
},
wrapper: {
// backgroundColor: "#ff3e3e",
height: "100%",
// width: "100%",
// justifyContent: "center",
marginBottom: 20,
},
tab: {
alignItems: "center",
width: "100%",
top: 0,
// paddingLeft: 15,
flexDirection: "row",
},
tabBtn: {
width: "50%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 15,
borderWidth: 1,
borderColor: "#e9e9e9",
},
tabBtnActive: {
width: "50%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 15,
// borderWidth: 1,
// borderColor: "#e9e9e9",
borderBottomColor: "#ffaa00",
borderBottomWidth: 3,
},
tabTxt:{color:"#8f8f8fed"},
tabTxtActive:{
color:"#161616"
},
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 Tab;

263
app/constants/cart.js Normal file
View File

@ -0,0 +1,263 @@
export const cart = [
{
payment: {
details: [],
},
_id: "652f918aea7f3ce011ec7d9d",
customer: [
{
customer_id: "651444143bf84bb9914a6964",
name: "Ms. Steffany Maala",
_id: "652f918aea7f3ce011ec7d9e",
},
],
total_amount: "2198",
items: [
{
product: {
product_image:
"https://obanana.com/wp-content/uploads/2023/08/W33-white.jpg",
product_id: "6526538c281305fed17881b9",
name: "Motivo W33 Wireless Stereo Bluetooth Headphones - Cream",
},
price: "2198",
quantity: "1",
shop_name: "Tecnic Inc",
shop_id: "65153f9672c86c16be0afc34",
_id: "652f918aea7f3ce011ec7d9f",
},
],
status: "Cart",
createdAt: "2023-10-18T08:04:26.234Z",
updatedAt: "2023-10-18T08:04:26.237Z",
__v: 0,
},
{
payment: {
details: [],
},
_id: "652f918fea7f3ce011ec7da1",
customer: [
{
customer_id: "651444143bf84bb9914a6964",
name: "Ms. Steffany Maala",
_id: "652f918fea7f3ce011ec7da2",
},
],
total_amount: "99",
items: [
{
product: {
product_image:
"https://obanana.com/wp-content/uploads/2022/06/Lacoste-Red_OK.jpg",
product_id: "65265389281305fed1787596",
name: "Authentic US tester Oil Based Perfume 20ml (Male) - Lacoste Red",
},
price: "99",
quantity: "1",
shop_name: "Tecnic Inc",
shop_id: "65153f9672c86c16be0afc34",
_id: "652f918fea7f3ce011ec7da3",
},
],
status: "Cart",
createdAt: "2023-10-18T08:04:31.677Z",
updatedAt: "2023-10-18T08:04:31.678Z",
__v: 0,
},
];
const vendor = [
{
"6527b593f79b5deac5ad6c74": {
_id: "6527b593f79b5deac5ad6c74",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "3/10/2022 1:31",
first_name: "Melanie",
last_name: "Amon",
phone: "",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "asher_mktg@yahoo.com",
user_login: "asher_mktg",
},
"6527b593f79b5deac5ad6c7a": {
_id: "6527b593f79b5deac5ad6c7a",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "6/22/2022 2:30",
first_name: "",
last_name: "",
phone: "",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "bcc.ccube@gmail.com",
user_login: "C-Cube",
},
"6527b593f79b5deac5ad6c8d": {
_id: "6527b593f79b5deac5ad6c8d",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "2/17/2023 4:34",
first_name: "Lester Jed",
last_name: "Olaso",
phone: "9664466271",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "enroutemarko21@gmail.com",
user_login: "en-route",
},
"6527b593f79b5deac5ad6c9c": {
_id: "6527b593f79b5deac5ad6c9c",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "6/7/2023 10:12",
first_name: "Jennifer",
last_name: "Salvador",
phone: "(02) 8260 6079",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "jensavador1984@gmail.com",
user_login: "Contrade Integrated Depot",
},
"6527b593f79b5deac5ad6ca6": {
_id: "6527b593f79b5deac5ad6ca6",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "8/16/2022 6:00",
first_name: "",
last_name: "",
phone: "",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "ladesmachona@gmail.com",
user_login: "Hop&Shop",
},
"6527b593f79b5deac5ad6cc0": {
_id: "6527b593f79b5deac5ad6cc0",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "11/23/2021 10:13",
first_name: "MER5322",
last_name: "",
phone: "",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "pmiprivatesales@obanana.com",
user_login: "Premium Megastructures Inc",
},
"6527b593f79b5deac5ad6cc3": {
_id: "6527b593f79b5deac5ad6cc3",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "3/23/2022 9:18",
first_name: "",
last_name: "",
phone: "",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "reddoorprinting@gmail.com",
user_login: "Red Door Printing",
},
"6527b593f79b5deac5ad6cd6": {
_id: "6527b593f79b5deac5ad6cd6",
address_1: "",
address_2: "",
attributes: [Array],
billing_company: "",
city: "",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "4/27/2022 7:28",
first_name: "",
last_name: "",
phone: "",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "moyco.celeste23@gmail.com",
user_login: "Think Graphics Design Services",
},
"6527b593f79b5deac5ad6cd7": {
_id: "6527b593f79b5deac5ad6cd7",
address_1:
"Office of Speaker Lord Allan Velasco House of Representatives, Batasang Pambansa Batasan Hills QC",
address_2: "",
attributes: [Array],
billing_company: "",
city: "Quezon City",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "12/4/2021 15:20",
first_name: "Marie Cris",
last_name: "Tolentino",
phone: "9178079176",
shipping_address_1: "",
shipping_address_2: "",
shipping_city: "",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "tolentino_mc15@yahoo.com",
user_login: "Crisee Lee's Boutique",
},
"6527b593f79b5deac5ad6cd8": {
_id: "6527b593f79b5deac5ad6cd8",
address_1: "Real street Ormoc City",
address_2: "1F AW square bldg.Real Street",
attributes: [Array],
billing_company: "Trail Sign Trading",
city: "Ormoc City",
createdAt: "2023-10-24T05:32:48.171Z",
date_registered: "1/19/2023 5:21",
first_name: "Simone peter king",
last_name: "Aviles",
phone: "9062466067",
shipping_address_1: "Real st.Ormoc City",
shipping_address_2: "1f AW square bldg.Real.street Ormoc City",
shipping_city: "Ormoc city",
updatedAt: "2023-10-24T05:32:48.171Z",
user_email: "trailsignormoc@gmail.com",
user_login: "Trailsign Trading",
},
},
];

199
app/constants/checkout.js
View File

@ -3,16 +3,28 @@ export const checkOut = [
shopname: "Tecnic Inc", shopname: "Tecnic Inc",
products: [ 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", file_path_image:
name: "Highly Fragrant Jasmine Green Tea No. 3 500g", "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
price: 200, product_name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
regular_price: 200,
min: 20, min: 20,
per: "pieces", per: "pieces",
sold: 340, sold: 340,
promo: 30, promo: 30,
rate: 4.2, rate: 4.2,
raterTotal: 200, raterTotal: 200,
shopId: "TecNic Inc.", vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
// Add more products here // Add more products here
], ],
@ -30,16 +42,27 @@ export const checkOut = [
shopname: "Tecnic Inc", shopname: "Tecnic Inc",
products: [ 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", file_path_image:
name: "Highly Fragrant Jasmine Green Tea No. 3 500g", "https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
price: 200, product_name: "product 1",
regular_price: 200,
min: 20, min: 20,
per: "pieces", per: "pieces",
sold: 340, sold: 340,
promo: 30,
rate: 4.2, rate: 4.2,
raterTotal: 200, raterTotal: 10,
shopId: "TecNic Inc.", vendor_id: "Obanana",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
// Add more products here // Add more products here
], ],
@ -57,16 +80,25 @@ export const checkOut = [
shopname: "Tecnic Inc", shopname: "Tecnic Inc",
products: [ 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", file_path_image:
name: "Highly Fragrant Jasmine Green Tea No. 3 500g", "https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
price: 200, product_name: "product 1",
regular_price: 200,
min: 20, min: 20,
per: "pieces", per: "pieces",
sold: 340, sold: 340,
promo: 30, vendor_id: "TecNic Inc.",
rate: 4.2, stock_status: "instock",
raterTotal: 200, stock: "9999",
shopId: "TecNic Inc.", sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
// Add more products here // Add more products here
], ],
@ -84,16 +116,27 @@ export const checkOut = [
shopname: "Tecnic Inc", shopname: "Tecnic Inc",
products: [ 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", file_path_image:
name: "Highly Fragrant Jasmine Green Tea No. 3 500g", "https://cf.shopee.ph/file/31526e8a4bec6cc3fab6ffb3b2d944a7",
price: 200, product_name: "product 1",
regular_price: 200,
min: 20, min: 20,
per: "pieces", per: "pieces",
sold: 340, sold: 340,
promo: 30,
rate: 4.2, rate: 4.2,
raterTotal: 200, raterTotal: 200,
shopId: "TecNic Inc.", vendor_id: "Gugol Corp.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
// Add more products here // Add more products here
], ],
@ -111,28 +154,48 @@ export const checkOut = [
shopname: "Shop B", shopname: "Shop B",
products: [ 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", file_path_image:
name: "Product 1", "https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
price: 150, product_name: "product 1",
min: 10, regular_price: 200,
min: 20,
per: "pieces", per: "pieces",
sold: 120, sold: 340,
promo: 15, promo: 80,
rate: 4.5, rate: 4.8,
raterTotal: 150, raterTotal: 20,
shopId: "Shop B", vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
{ {
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg", file_path_image:
name: "Product 2", "https://cdn.thewirecutter.com/wp-content/media/2022/09/backpacks-2048px.jpg",
price: 100, product_name: "product 1",
min: 5, regular_price: 200,
min: 20,
per: "pieces", per: "pieces",
sold: 80, sold: 340,
promo: 10, vendor_id: "Riz Shop",
rate: 4.0, stock: "9999",
raterTotal: 100, sale_price: "",
shopId: "Shop B", weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
// Add more products for Shop B here // Add more products for Shop B here
], ],
@ -144,28 +207,48 @@ export const checkOut = [
shopname: "Shop C", shopname: "Shop C",
products: [ 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", file_path_image:
name: "Product 3", "https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
price: 120, product_name: "product 1 lorem ipsum d wem jbwugwb uwfiwdgdsufwbf",
min: 8, regular_price: 200,
min: 20,
per: "pieces", per: "pieces",
sold: 90, sold: 340,
promo: 12, vendor_id: "Gugol Corp.",
rate: 4.3, stock_status: "instock",
raterTotal: 110, stock: "9999",
shopId: "Shop C", sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
{ {
img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg", file_path_image:
name: "Product 4", "https://img.freepik.com/premium-psd/thumbler-mockup_419809-150.jpg",
price: 90, product_name: "product 1",
min: 5, regular_price: 200,
min: 20,
per: "pieces", per: "pieces",
sold: 60, sold: 340,
promo: 8, rate: 4.2,
rate: 4.7, raterTotal: 200,
raterTotal: 70, vendor_id: "TecNic Inc.",
shopId: "Shop C", stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
// Add more products for Shop C here // Add more products for Shop C here
], ],

61
app/constants/favorites.js
View File

@ -3,27 +3,72 @@ export const favorite = [
type: "products", type: "products",
contents: [ 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", file_path_image:
name: "Highly Fragrant Jasmine Green Tea No. 3 500g", "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
price: 200, product_name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
regular_price: 200,
min: 20, min: 20,
per: "pieces", per: "pieces",
sold: 340, sold: 340,
promo: 30, promo: 30,
rate: 4.2, rate: 4.2,
raterTotal: 200, raterTotal: 200,
shopId: "TecNic Inc.", vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
{ {
img: "https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp", file_path_image:
name: "product 1", "https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
price: 200, product_name: "product 1",
regular_price: 200,
min: 20, min: 20,
per: "pieces", per: "pieces",
sold: 340, sold: 340,
rate: 4.2, rate: 4.2,
raterTotal: 10, raterTotal: 10,
shopId: "Obanana", vendor_id: "Obanana",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
}, },
], ],
}, },

266
app/constants/product2.js Normal file
View File

@ -0,0 +1,266 @@
export const products = [
{
file_path_image:
"https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
product_name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 30,
rate: 4.2,
raterTotal: 200,
vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
rate: 4.2,
raterTotal: 10,
vendor_id: "Obanana",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://cf.shopee.ph/file/f0775aeac92f8aecdf44dad06505694d",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://cf.shopee.ph/file/31526e8a4bec6cc3fab6ffb3b2d944a7",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
rate: 4.2,
raterTotal: 200,
vendor_id: "Gugol Corp.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
promo: 80,
rate: 4.8,
raterTotal: 20,
vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://cdn.thewirecutter.com/wp-content/media/2022/09/backpacks-2048px.jpg",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "Riz Shop",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
product_name: "product 1 lorem ipsum d wem jbwugwb uwfiwdgdsufwbf",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "Gugol Corp.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://img.freepik.com/premium-psd/thumbler-mockup_419809-150.jpg",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
rate: 4.2,
raterTotal: 200,
vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://i.ebayimg.com/images/g/SG0AAOSwLP1hEPrn/s-l1200.webp",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "San Gig Shop",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://cf.shopee.ph/file/38b14cd1219c7f3cd87fe386595b53cd",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "TecNic Inc.",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
{
file_path_image:
"https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
product_name: "product 1",
regular_price: 200,
min: 20,
per: "pieces",
sold: 340,
vendor_id: "Riz Shop",
stock_status: "instock",
stock: "9999",
sale_price: "",
weight: "",
length: "",
width: "",
height: "",
product_category:
"Gadgets & Electronics > Mobile > Charger & Accessories|Gadgets & Electronics > Mobile > Charger & Accessories > Charging & Data Cable|Gadgets & Electronics|Gadgets & Electronics > Mobile",
product_tag: "accessories|adapter",
shipping_class: "Champ Delivery",
},
];

187
app/constants/user.js Normal file
View File

@ -0,0 +1,187 @@
export const user = [
{
_id: "651444143bf84bb9914a6964",
customer_id: "589",
user_login: "_sheenalaine",
user_email: "sinsigne@industrymoverscorp.com",
phone_number: "9566629980",
user_registered_date: "5/18/2023 8:07:38 AM",
display_name: "_sheenalaine",
first_name: "Ms. Steffany",
last_name: "Maala",
role: "customer",
address: [
{
first_name: "Ms. Steffany",
last_name: "Maala",
company: "Smart",
email: "steffanymaala02@gmail.com",
phone: "9566629980",
address_1: "Bilaran",
address_2: "United Church of Polo",
city: "Valenzuela City",
state: "BTG",
country: "PH",
billing: true,
shipping: false,
},
{
first_name: "Ms. Steffany",
last_name: "Maala",
company: "Smart",
email: "steffanymaala02@gmail.com",
phone: "9566629980",
address_1: "Bilaran",
address_2: "United Church of Polo",
city: "Valenzuela City",
state: "BTG",
country: "PH",
billing: false,
shipping: true,
},
],
file_path_image: null,
__v: 0,
address_book: [
{
first_name: "Johnny3",
last_name: "Dela Cruz",
company: "JDC Inc.",
email: "johndelacruz@gmail.com",
phone: "09930910123",
address_1: "Taguig",
address_2: "Taguig",
city: "Taguig",
state: "Taguig",
country: "Philippines",
type: "Billing",
isDefault: false,
_id: "652549226864c7c1735d5560",
},
],
createdAt: "2023-10-12T08:53:32.692Z",
updatedAt: "2023-10-12T08:53:32.692Z",
},
];
export const region = [
{
code: "010000000",
name: "Ilocos Region",
regionName: "Region I",
islandGroupCode: "luzon",
psgc10DigitCode: "0100000000",
},
{
code: "020000000",
name: "Cagayan Valley",
regionName: "Region II",
islandGroupCode: "luzon",
psgc10DigitCode: "0200000000",
},
{
code: "030000000",
name: "Central Luzon",
regionName: "Region III",
islandGroupCode: "luzon",
psgc10DigitCode: "0300000000",
},
{
code: "040000000",
name: "CALABARZON",
regionName: "Region IV-A",
islandGroupCode: "luzon",
psgc10DigitCode: "0400000000",
},
{
code: "170000000",
name: "MIMAROPA Region",
regionName: "MIMAROPA Region",
islandGroupCode: "luzon",
psgc10DigitCode: "1700000000",
},
{
code: "050000000",
name: "Bicol Region",
regionName: "Region V",
islandGroupCode: "luzon",
psgc10DigitCode: "0500000000",
},
{
code: "060000000",
name: "Western Visayas",
regionName: "Region VI",
islandGroupCode: "visayas",
psgc10DigitCode: "0600000000",
},
{
code: "070000000",
name: "Central Visayas",
regionName: "Region VII",
islandGroupCode: "visayas",
psgc10DigitCode: "0700000000",
},
{
code: "080000000",
name: "Eastern Visayas",
regionName: "Region VIII",
islandGroupCode: "visayas",
psgc10DigitCode: "0800000000",
},
{
code: "090000000",
name: "Zamboanga Peninsula",
regionName: "Region IX",
islandGroupCode: "mindanao",
psgc10DigitCode: "0900000000",
},
{
code: "100000000",
name: "Northern Mindanao",
regionName: "Region X",
islandGroupCode: "mindanao",
psgc10DigitCode: "1000000000",
},
{
code: "110000000",
name: "Davao Region",
regionName: "Region XI",
islandGroupCode: "mindanao",
psgc10DigitCode: "1100000000",
},
{
code: "120000000",
name: "SOCCSKSARGEN",
regionName: "Region XII",
islandGroupCode: "mindanao",
psgc10DigitCode: "1200000000",
},
{
code: "130000000",
name: "NCR",
regionName: "National Capital Region",
islandGroupCode: "luzon",
psgc10DigitCode: "1300000000",
},
{
code: "140000000",
name: "CAR",
regionName: "Cordillera Administrative Region",
islandGroupCode: "luzon",
psgc10DigitCode: "1400000000",
},
{
code: "160000000",
name: "Caraga",
regionName: "Region XIII",
islandGroupCode: "mindanao",
psgc10DigitCode: "1600000000",
},
{
code: "150000000",
name: "BARMM",
regionName: "Bangsamoro Autonomous Region in Muslim Mindanao",
islandGroupCode: "mindanao",
psgc10DigitCode: "1900000000",
},
];

110
app/layout/skeleton/cardSkeleton.jsx Normal file
View File

@ -0,0 +1,110 @@
import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, Animated, ScrollView } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
const CardSkeletonLoading = () => {
const [animation, setAnimation] = useState(new Animated.Value(0));
useEffect(() => {
Animated.loop(
Animated.timing(animation, {
toValue: 1,
duration: 900,
useNativeDriver: true,
})
).start();
}, [animation]);
const opacity = animation.interpolate({
inputRange: [0, 1],
outputRange: [0.2, 1],
});
const product = [1, 2, 3, 4, 5, 6];
return (
<View style={styles.container}>
<View style={styles.container1}>
<Animated.View style={[styles.skeletonText, { opacity }]} />
</View>
<View style={styles.categories}>
<Animated.View style={[styles.skeletonRound, { opacity }]} />
<Animated.View style={[styles.skeletonRound, { opacity }]} />
<Animated.View style={[styles.skeletonRound, { opacity }]} />
<Animated.View style={[styles.skeletonRound, { opacity }]} />
<Animated.View style={[styles.skeletonRound, { opacity }]} />
</View>
<ScrollView style={styles.container2}>
<Animated.View style={[styles.skeletonText, { opacity }]} />
<MasonryList
data={product}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={2}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => (
<Animated.View style={[styles.skeleton, { opacity }]} />
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
// refreshing={isLoadingNext}
// onRefresh={() => refetch({ first: itemCount })}
onEndReachedThreshold={0.1}
// onEndReached={() => loadNext(ITEM_CNT)}
/>
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: "center",
justifyContent: "center",
flex: 1,
backgroundColor: "#fff",
},
container1: {
width: "100%",
marginTop: 0,
flex: 1,
backgroundColor: "#fff",
},
container2: {
width: "100%",
marginTop: 30,
flex: 1,
backgroundColor: "#fff",
},
categories: {
flexDirection: "row",
width: "100%",
justifyContent: "space-between",
},
skeleton: {
backgroundColor: "#f2f2f2",
borderRadius: 5,
width: "98%",
height: 250,
marginVertical: 5,
},
skeletonText: {
backgroundColor: "#f2f2f2",
borderRadius: 5,
width: "30%",
height: 30,
marginVertical: 5,
},
skeletonRound: {
backgroundColor: "#f2f2f2",
borderRadius: 5,
width: 60,
height: 60,
borderRadius: 80,
marginVertical: 5,
},
});
export default CardSkeletonLoading;

566
app/pages/address/Address.jsx Normal file
View File

@ -0,0 +1,566 @@
import {
faAngleDown,
faArrowLeft,
faPlus,
} 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 {
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import {
get_barangays,
get_cities,
get_manila_cities,
get_provinces,
} from "../../services/addressApi/address";
import SelectDropdown from "react-native-select-dropdown";
import { update_customer } from "../../services/api/controllers/customers";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useToast } from "react-native-toast-notifications";
const Address = () => {
const navigation = useNavigation();
const [unit, setunit] = useState("");
const toast = useToast();
const [street, setstreet] = useState("");
const [fName, setfName] = useState("");
const [lName, setlName] = useState("");
const [company, setcompany] = useState("");
const [email, setemail] = useState("");
const [phone, setphone] = useState("");
const [province, setprovince] = useState("");
const [provinceName, setprovinceName] = useState("");
const [provinceSelected, setprovinceSelected] = useState("");
const [city, setcity] = useState("");
const [cityName, setcityName] = useState("");
const [citySelected, setcitySelected] = useState("");
const [brgy, setbrgy] = useState("");
const [brgyName, setbrgyName] = useState("");
const [brgySelected, setbrgySelected] = useState("");
const [zip, setzip] = useState("");
const [landmark, setlandmark] = useState("");
const [error, seterror] = useState("");
const route = useRoute();
const { isrefresh, address } = route.params;
console.log("address " + address?.length);
const [user, setuser] = useState([]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
get_provinces()
.then((result) => {
if (result.status == 200) {
setprovince([
...result.data,
{
code: "130000000",
name: "Metro Manila",
regionName: "National Capital Region",
islandGroupCode: "luzon",
psgc10DigitCode: "1300000000",
},
]);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}, []);
useEffect(() => {
if (provinceName === "Metro Manila") {
get_manila_cities({
id: provinceSelected,
})
.then((result) => {
if (result.status == 200) {
setcity(result.data);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
} else {
get_cities({
id: provinceSelected,
})
.then((result) => {
if (result.status == 200) {
setcity(result.data);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}
}, [provinceSelected]);
useEffect(() => {
get_barangays({ id: citySelected })
.then((result) => {
if (result.status == 200) {
setbrgy(result.data);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}, [citySelected]);
console.log("addresss " + isrefresh);
const AddAddress = () => {
if ((!fName, !lName, !phone, !street, !cityName, !provinceName)) {
toast.show("Please fill in the required fields!", {
type: "danger",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
} else {
if (address.length > 0 && address !== undefined && address !== []) {
const add = address;
const newItem = {
first_name: fName,
last_name: lName,
company: company,
email: email,
phone: phone,
address_1: unit,
address_2: street,
city: cityName,
province: provinceName,
barangay: brgyName,
country: "PH",
billing: false,
shipping: false,
};
add.push(newItem);
update_customer({
id: user[0]._id,
body: {
address: add,
},
})
.then((result) => {
// console.log(result.data);
navigation.navigate("Address", {
isrefresh: isrefresh === true ? false : true,
});
if (result.error) {
seterror(result.error);
} else {
// setaddreses(result.data.address_book);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
update_customer({
id: user[0]._id,
body: {
address: {
first_name: fName,
last_name: lName,
company: company,
email: email,
phone: phone,
address_1: unit,
address_2: street,
city: cityName,
province: provinceName,
barangay: brgyName,
country: "PH",
billing: true,
shipping: true,
},
},
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
// setaddreses(result.data.addreses);
navigation.navigate("Address", {
isrefresh: isrefresh === true ? false : true,
});
console.log(result.data);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}
}
};
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() =>
navigation.navigate("Address", { isrefresh: { isrefresh } })
}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>My Address</Text>
</View>
<ScrollView style={styles.wrapper}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.wrap}>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>First Name:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setfName(e);
}}
value={fName}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Last Name:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setlName(e);
}}
value={lName}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Company: (optional)</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setcompany(e);
}}
value={company}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Phone Number:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
<View style={styles.inputNum}>
{/* <Text>+63 </Text> */}
<TextInput
style={styles.numInput}
onChangeText={(e) => {
setphone(e);
}}
value={phone}
// placeholder="9*********"
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Email:(optional)</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setemail(e);
}}
value={email}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Unit/Floor No.:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setunit(e);
}}
value={unit}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Street Address:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setstreet(e);
}}
value={street}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Province/Region:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
<SelectDropdown
data={province}
search={true}
defaultButtonText="Select Province"
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
searchPlaceHolder="search"
buttonStyle={styles.input}
buttonTextStyle={{ fontSize: 13 }}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
setprovinceName(selectedItem.name);
setprovinceSelected(selectedItem.code);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>City/Municipality:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
<SelectDropdown
data={city}
search={true}
defaultButtonText="Select City/Municipality"
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
searchPlaceHolder="search"
buttonStyle={styles.input}
buttonTextStyle={{ fontSize: 13 }}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
setcityName(selectedItem.name);
setcitySelected(selectedItem.code);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Barangay:</Text>
<SelectDropdown
data={brgy}
search={true}
defaultButtonText="Select Barangay"
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
searchPlaceHolder="search"
buttonStyle={styles.input}
buttonTextStyle={{ fontSize: 13 }}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
setbrgyName(selectedItem.name);
setbrgySelected(selectedItem.code);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Zip Code:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setzip(e);
}}
value={zip}
placeholder=""
keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Landmark:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setlandmark(e);
}}
value={landmark}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
</View>
</ScrollView>
<View style={styles.footer}>
<TouchableOpacity style={styles.footerBtn} onPress={() => AddAddress()}>
<Text style={styles.footerBtnText}>Save</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "100%",
width: "100%",
marginBottom: 60,
},
wrap: {
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingTop: 30,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
wrapMiddleFormInput: {
marginVertical: 6,
},
input: {
height: 50,
width: 300,
margin: 5,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
backgroundColor: "#fff",
},
inputNum: {
height: 50,
width: 300,
margin: 5,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
flexDirection: "row",
// justifyContent: "center",9
alignItems: "center",
backgroundColor: "#fff",
},
inputText: {
marginLeft: 15,
fontSize: 13,
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
paddingVertical: 10,
justifyContent: "center",
borderRadius: 20,
alignItems: "center",
flexDirection: "row",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
marginRight: 10,
},
selectBtnText: {
color: "#929292",
fontSize: 15,
marginRight: 10,
letterSpacing: 0.6,
},
});
export default Address;

583
app/pages/address/AddressCheckout.jsx Normal file
View File

@ -0,0 +1,583 @@
import {
faAngleDown,
faArrowLeft,
faPlus,
} 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 {
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import {
get_barangays,
get_cities,
get_manila_cities,
get_provinces,
} from "../../services/addressApi/address";
import SelectDropdown from "react-native-select-dropdown";
import { update_customer } from "../../services/api/controllers/customers";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useToast } from "react-native-toast-notifications";
const AddressCheckout = () => {
const navigation = useNavigation();
const [unit, setunit] = useState("");
const [street, setstreet] = useState("");
const [fName, setfName] = useState("");
const [lName, setlName] = useState("");
const [company, setcompany] = useState("");
const [email, setemail] = useState("");
const [phone, setphone] = useState("");
const [province, setprovince] = useState("");
const [provinceName, setprovinceName] = useState("");
const [provinceSelected, setprovinceSelected] = useState("");
const [city, setcity] = useState("");
const [cityName, setcityName] = useState("");
const [citySelected, setcitySelected] = useState("");
const [brgy, setbrgy] = useState("");
const [brgyName, setbrgyName] = useState("");
const [brgySelected, setbrgySelected] = useState("");
const toast = useToast();
const [zip, setzip] = useState("");
const [landmark, setlandmark] = useState("");
const [error, seterror] = useState("");
const route = useRoute();
const { product, shipMethod, payMethod, orderId, address, isrefresh } =
route.params;
console.log("address " + address?.length);
const [user, setuser] = useState([]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
get_provinces()
.then((result) => {
if (result.status == 200) {
setprovince([
...result.data,
{
code: "130000000",
name: "Metro Manila",
regionName: "National Capital Region",
islandGroupCode: "luzon",
psgc10DigitCode: "1300000000",
},
]);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}, []);
useEffect(() => {
if (provinceName === "Metro Manila") {
get_manila_cities({
id: provinceSelected,
})
.then((result) => {
if (result.status == 200) {
setcity(result.data);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
} else {
get_cities({
id: provinceSelected,
})
.then((result) => {
if (result.status == 200) {
setcity(result.data);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}
}, [provinceSelected]);
useEffect(() => {
get_barangays({ id: citySelected })
.then((result) => {
if (result.status == 200) {
setbrgy(result.data);
// console.log(result.data);
} else {
seterror(result.message);
// console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}, [citySelected]);
console.log("addresss " + isrefresh);
const AddAddress = () => {
if ((!fName, !lName, !phone, !street, !cityName, !provinceName)) {
toast.show("Please fill in the required fields!", {
type: "danger",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
} else {
if (address?.length > 0 && address !== undefined && address !== []) {
const add = address;
const newItem = {
first_name: fName,
last_name: lName,
company: company,
email: email,
phone: phone,
address_1: unit,
address_2: street,
city: cityName,
province: provinceName,
barangay: brgyName,
country: "PH",
billing: false,
shipping: false,
};
add.push(newItem);
update_customer({
id: user[0]._id,
body: {
address: add,
},
})
.then((result) => {
// console.log(result.data);
// navigation.navigate("Address", {
// isrefresh: isrefresh === true ? false : true,
// });
navigation.goBack();
if (result.error) {
seterror(result.error);
} else {
// setaddreses(result.data.address_book);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
update_customer({
id: user[0]._id,
body: {
address: {
first_name: fName,
last_name: lName,
company: company,
email: email,
phone: phone,
address_1: unit,
address_2: street,
city: cityName,
province: provinceName,
barangay: brgyName,
country: "PH",
billing: true,
shipping: true,
},
},
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
// setaddreses(result.data.addreses);
// navigation.navigate("Address", {
// isrefresh: isrefresh === true ? false : true,
// });
navigation.goBack();
console.log(result.data);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}
}
};
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.goBack()}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>My Address</Text>
</View>
<ScrollView style={styles.wrapper}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.wrap}>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
First Name:
<Text style={{ color: "red", fontWeight: "600" }}>*</Text>
</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setfName(e);
}}
value={fName}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
Last Name:
<Text style={{ color: "red", fontWeight: "600" }}>*</Text>
</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setlName(e);
}}
value={lName}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Company: (optional)</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setcompany(e);
}}
value={company}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
Phone Number:
<Text style={{ color: "red", fontWeight: "600" }}>*</Text>
</Text>
<View style={styles.inputNum}>
{/* <Text>+63 </Text> */}
<TextInput
style={styles.numInput}
onChangeText={(e) => {
setphone(e);
}}
value={phone}
// placeholder="9*********"
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Email:(optional)</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setemail(e);
}}
value={email}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Unit/Floor No.:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setunit(e);
}}
value={unit}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
Street Address:
<Text style={{ color: "red", fontWeight: "600" }}>*</Text>
</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setstreet(e);
}}
value={street}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Province/Region:</Text>
<SelectDropdown
data={province}
search={true}
defaultButtonText="Select Province"
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
searchPlaceHolder="search"
buttonStyle={styles.input}
buttonTextStyle={{ fontSize: 13 }}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
setprovinceName(selectedItem.name);
setprovinceSelected(selectedItem.code);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
City/Municipality:
<Text style={{ color: "red", fontWeight: "600" }}>*</Text>
</Text>
<SelectDropdown
data={city}
search={true}
defaultButtonText="Select City/Municipality"
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
searchPlaceHolder="search"
buttonStyle={styles.input}
buttonTextStyle={{ fontSize: 13 }}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
setcityName(selectedItem.name);
setcitySelected(selectedItem.code);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Barangay:</Text>
<SelectDropdown
data={brgy}
search={true}
defaultButtonText="Select Barangay"
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
searchPlaceHolder="search"
buttonStyle={styles.input}
buttonTextStyle={{ fontSize: 13 }}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index);
setbrgyName(selectedItem.name);
setbrgySelected(selectedItem.code);
}}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem.name;
}}
rowTextForSelection={(item, index) => {
return item.name;
}}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Zip Code:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setzip(e);
}}
value={zip}
placeholder=""
keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Landmark:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setlandmark(e);
}}
value={landmark}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
</View>
</ScrollView>
<View style={styles.footer}>
<TouchableOpacity style={styles.footerBtn} onPress={() => AddAddress()}>
<Text style={styles.footerBtnText}>Save</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "100%",
width: "100%",
marginBottom: 60,
},
wrap: {
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingTop: 30,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
wrapMiddleFormInput: {
marginVertical: 6,
},
input: {
height: 50,
width: 300,
margin: 5,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
backgroundColor: "#fff",
},
inputNum: {
height: 50,
width: 300,
margin: 5,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
flexDirection: "row",
// justifyContent: "center",9
alignItems: "center",
backgroundColor: "#fff",
},
inputText: {
marginLeft: 15,
fontSize: 13,
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
paddingVertical: 10,
justifyContent: "center",
borderRadius: 20,
alignItems: "center",
flexDirection: "row",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
marginRight: 10,
},
selectBtnText: {
color: "#929292",
fontSize: 15,
marginRight: 10,
letterSpacing: 0.6,
},
});
export default AddressCheckout;

505
app/pages/address/Addresses.jsx Normal file
View File

@ -0,0 +1,505 @@
import {
faAngleDown,
faArrowLeft,
faCheck,
faPlus,
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
useIsFocused,
useNavigation,
useRoute,
} from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import SelectDropdown from "react-native-select-dropdown";
import { useToast } from "react-native-toast-notifications";
import { user } from "../../constants/user";
import {
get_customer,
update_customer,
} from "../../services/api/controllers/customers";
const Addresses = () => {
const navigation = useNavigation();
const [selected, setselected] = useState(0);
const [error, seterror] = useState(0);
const [addreses, setaddreses] = useState([]);
const [addresesNew, setaddresesNew] = useState([]);
const [refresh, setrefresh] = useState(false);
const route = useRoute();
const toast = useToast();
const isFocused = useIsFocused();
const isrefresh = route.params.isrefresh ? route.params.isrefresh : null;
console.log("address " + addreses.length);
const [user, setuser] = useState([]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
}, []);
useEffect(() => {
setrefresh(isrefresh);
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setaddreses(result.data.address);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
// console.log("get cutomer add :" + user[0]?.login_id);
}, [isrefresh]);
useEffect(() => {
setrefresh(isrefresh);
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setaddreses(result.data.address);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
// console.log("get cutomer add :" + user[0]?.login_id);
}, [isFocused]);
const setBilling = (index) => {
const address = addreses;
for (let i = 0; i < address.length; i++) {
if (i === index) {
// If it's the index to update, toggle the billing value
address[i].billing = !address[i].billing;
} else {
// If it's not the index to update, set billing to false
address[i].billing = false;
}
}
update_customer({
id: user[0]._id,
body: {
address: address,
},
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setaddreses(result.data.address);
toast.show("Successfully changed the Billing Address!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
const setShipping = (index) => {
const address = addreses;
for (let i = 0; i < address.length; i++) {
if (i === index) {
// If it's the index to update, toggle the shipping value
address[i].shipping = !address[i].shipping;
} else {
// If it's not the index to update, set shipping to false
address[i].shipping = false;
}
}
update_customer({
id: user[0]._id,
body: {
address: address,
},
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setaddreses(result.data.address);
toast.show("Successfully changed the Shipping Address!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
const removeAddress = (indexToRemove) => {
let address = addreses;
if (indexToRemove >= 0 && indexToRemove < address.length) {
address.splice(indexToRemove, 1); // This will remove one element at the specified index
// If you want to remove more than one element, you can change the second argument (1 in this case) to the number of elements you want to remove.
}
update_customer({
id: user[0]._id,
body: {
address: address,
},
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setaddreses(result.data.address);
toast.show("Successfully deleted the address!", {
type: "danger",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
// useEffect(() => {
// get_customer({
// id: user[0]?._id,
// })
// .then((result) => {
// // console.log(result.data);
// if (result.error) {
// seterror(result.error);
// } else {
// setaddreses(result.data.address);
// // console.log("length on search " + result.data?.results.length);
// // setloading(false);
// }
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// })
// .finally(() => {
// // setprodIsLoading(false); // Set loading to false when done loading
// });
// }, []);
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.goBack()}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>My Address</Text>
</View>
<ScrollView>
<View style={styles.wrapper}>
{addreses?.map((add, i) => (
<View style={styles.add} key={i}>
<View
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.first_name} {add.last_name}, {add.phone}
</Text>
</View>
<Text style={styles.listItemText}>Address:</Text>
<Text style={styles.listItemTexteta} numberOfLines={4}>
{" "}
{add.address_1 +
" " +
add.address_2 +
", " +
add.barangay +
", " +
add.city +
", " +
add.province +
" "}
{add.country === "PH" ? "Philippines" : add.country}
</Text>
</View>
<TouchableOpacity onPress={() => removeAddress(i)}>
<FontAwesomeIcon icon={faTrash} color={"#696969"} size={18} />
</TouchableOpacity>
</View>
<View style={styles.btnBot}>
<TouchableOpacity
onPress={() => setBilling(i)}
style={
add.billing === false ? styles.select : styles.selectActive
}
>
<Text style={styles.selectBtnText}>Billing</Text>
{add.billing === true ? (
<FontAwesomeIcon
icon={faCheck}
color={"#d4c600"}
size={20}
/>
) : null}
</TouchableOpacity>
<TouchableOpacity
onPress={() => setShipping(i)}
style={
add.shipping === false ? styles.select : styles.selectActive
}
>
<Text style={styles.selectBtnText}>Shipping</Text>
{add.shipping === true ? (
<FontAwesomeIcon
icon={faCheck}
color={"#d4c600"}
size={20}
/>
) : null}
</TouchableOpacity>
</View>
</View>
))}
</View>
</ScrollView>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() =>
navigation.navigate("AddressCreate", {
isrefresh: !refresh,
address: addreses ?? [],
})
}
>
<Text style={styles.footerBtnText}>Add New Address</Text>
<FontAwesomeIcon icon={faPlus} color={"#ffff"} />
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
paddingBottom: 60,
},
wrapper: {
height: "90%",
width: "100%",
// marginBottom:80
},
wrap: {
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingTop: 30,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
wrapper: {
// height: "85%",
paddingTop: 25,
width: "100%",
// justifyContent: "center",
alignItems: "center",
// height: "100%",
},
add: {
margin: 5,
},
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: {
width: "93%",
},
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,
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
borderRadius: 20,
paddingVertical: 10,
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
marginRight: 10,
},
selectBtnText: {
color: "#929292",
fontSize: 15,
marginRight: 10,
letterSpacing: 0.6,
},
select: {
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
width: "49%",
paddingVertical: 10,
borderWidth: 2,
borderColor: "#dddddd",
backgroundColor: "#f0f0f0",
},
selectActive: {
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
width: "49%",
paddingVertical: 10,
borderWidth: 2,
borderColor: "#ffaa00",
fontWeight: "600",
},
btnBot: {
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
},
});
export default Addresses;

758
app/pages/auth/ForgotPassword.jsx Normal file
View File

@ -0,0 +1,758 @@
import { faEye, faEyeSlash } 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 {
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import {
change_password,
forgot_password,
} from "../../services/api/controllers/auth";
import { search_customer } from "../../services/api/controllers/customers";
import { send_email_api } from "../../services/obananapayApi/user_api";
const ForgotPassword = () => {
const [emailDupe, setemailDupe] = useState(false);
const [email, setemail] = useState("");
const [password, setPassword] = useState("");
const [passwordRepeat, setPasswordRepeat] = useState(null);
const [samepass, setsamepass] = useState("none");
const [seePassword, setSeePassword] = useState(false);
const [currPage, setcurrPage] = useState("Email");
const et1 = useRef();
const et2 = useRef();
const et3 = useRef();
const et4 = useRef();
const et5 = useRef();
const et6 = useRef();
const [f1, setF1] = useState("");
const [f2, setF2] = useState("");
const [f3, setF3] = useState("");
const [f4, setF4] = useState("");
const [f5, setF5] = useState("");
const [f6, setF6] = useState("");
const [errorOTP, seterrorOTP] = useState(false);
const [count, setCount] = useState(20);
const [error, seterror] = useState("");
const [tokenHere, settokenHere] = useState("");
const [otpSent, setotpSent] = useState("");
const [otpError, setotpError] = useState("");
const navigation = useNavigation();
useEffect(() => {
const interval = setInterval(() => {
if (count == 0) {
clearInterval(interval);
} else {
setCount(count - 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [count]);
/* ---------------check if the sent otp and the entered otp is the same--------------- */
const otpValidate = () => {
let enteredOtp = f1 + f2 + f3 + f4 + f5 + f6;
// if (enteredOtp == otpSent) {
// console.log(otp);
// setotpCheck(true);
change_password({
body: {
username: email,
otp: enteredOtp,
newPassword: password,
},
})
.then((result) => {
// console.log(result.data);
if (result.status === 200) {
setcurrPage("Success");
} else if (result.status === 400) {
setotpError(true);
console.log('error otp');
} else {
seterror(result.error+"....");
}
})
.catch((error) => {
// setError(error.message);
seterrorOTP(true);
console.log(error.message+'....');
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
// } else {
// setotpError(true);
// }
};
const handleChange = (e) => {
search_customer({
searchData: e,
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
if (result.data?.results.length < 1) {
setemailDupe(false);
} else {
setemail(e);
setemailDupe(true);
console.log(result.data?.results.length + " " + emailDupe);
}
// console.log("length on search " + result.data?.results.length);
// setloading(false);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
const send_email = () => {
if (email) {
const min = 100000; // Minimum 6-digit number
const max = 999999; // Maximum 6-digit number
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
// const email2 = "kramblooda@gmail.com";
// send_email_api({
// email: email.replace(/\s/g, "").toLowerCase(),
// html: `<p>your OTP code to continue changing your password is ${randomNumber} </p>`,
// })
// .then((result) => {
// setotpSent( );
// if (result.status == 200) {
// setcurrPage("OTP");
// } else {
// seterror(result.message);
// }
// console.log(result);
// })
// .catch((err) => {
// seterror(err);
// console.error(err);
// console.log(err + "failed to send email");
// });
forgot_password({
body: {
username: email,
},
})
.then((result) => {
// console.log(result.data);
if (result.status === 200) {
setcurrPage("OTP");
} else {
seterror(result.error);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
// setotpError(true);
}
};
return (
<View style={styles.container}>
{currPage === "Email" ? (
<View style={styles.wrap}>
<View style={styles.wrapTop}>
<Text style={styles.wrapTopHeader}>Forgot Password</Text>
</View>
<View style={styles.wrapMiddle}>
<View style={styles.wrapMiddleForm}>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
Email Address{" "}
{!emailDupe && email !== "" ? (
<Text style={{ color: "red" }}>Email does not exist</Text>
) : (
""
)}
</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
handleChange(e);
}}
// value={email}
placeholder=""
// keyboardType="numeric"
/>
</View>
</View>
</View>
{/* {error ? <Text>{error}</Text> : null} */}
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
disabled={emailDupe ? false : true}
onPress={() => {
send_email();
}}
>
<Text style={styles.btnText}>Continue</Text>
</TouchableOpacity>
</View>
</View>
) : currPage === "OTP" ? (
<View style={styles.wrap}>
<Text style={styles.title1}>OTP Verification</Text>
<Text style={styles.title}>
Please enter the verification code we just sent on your email{" "}
{email} together with your new password.
</Text>
<View style={styles.otpView}>
<TextInput
ref={et1}
style={[
styles.inputView,
{ borderColor: f1.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f1}
onChangeText={(txt) => {
setF1(txt);
if (txt.length >= 1) {
et2.current.focus();
}
}}
/>
<TextInput
ref={et2}
style={[
styles.inputView,
{ borderColor: f2.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f2}
onChangeText={(txt) => {
setF2(txt);
if (txt.length >= 1) {
et3.current.focus();
} else if (txt.length < 1) {
et1.current.focus();
}
}}
/>
<TextInput
ref={et3}
style={[
styles.inputView,
{ borderColor: f3.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f3}
onChangeText={(txt) => {
setF3(txt);
if (txt.length >= 1) {
et4.current.focus();
} else if (txt.length < 1) {
et2.current.focus();
}
}}
/>
<TextInput
ref={et4}
style={[
styles.inputView,
{ borderColor: f4.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f4}
onChangeText={(txt) => {
setF4(txt);
if (txt.length >= 1) {
et5.current.focus();
} else if (txt.length < 1) {
et3.current.focus();
}
}}
/>
<TextInput
ref={et5}
style={[
styles.inputView,
{ borderColor: f5.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f5}
onChangeText={(txt) => {
setF5(txt);
if (txt.length >= 1) {
et6.current.focus();
} else if (txt.length < 1) {
et4.current.focus();
}
}}
/>
<TextInput
ref={et6}
style={[
styles.inputView,
{ borderColor: f6.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f6}
onChangeText={(txt) => {
setF6(txt);
if (txt.length >= 1) {
et6.current.focus();
} else if (txt.length < 1) {
et5.current.focus();
}
}}
/>
</View>
<View style={styles.wrapMiddle}>
<View style={styles.wrapMiddleForm}>
<Text style={styles.inputText}>New Password:</Text>
<View style={styles.input2}>
<TextInput
style={styles.inputPass}
placeholderTextColor="#003f5c"
secureTextEntry={!seePassword}
autoCapitalize="none"
value={password}
onChangeText={(text) => setPassword(text)}
/>
<TouchableOpacity
style={{ color: "green", right: 10 }}
onPress={() => setSeePassword(!seePassword)}
>
<FontAwesomeIcon
icon={seePassword ? faEye : faEyeSlash}
size={18}
color="#003f5c"
/>
</TouchableOpacity>
</View>
</View>
<View style={styles.wrapMiddleForm}>
<Text style={styles.inputText}>Confirm New Password:</Text>
<View style={styles.input2}>
<TextInput
style={styles.inputPass}
placeholderTextColor="#003f5c"
secureTextEntry={!seePassword}
autoCapitalize="none"
value={passwordRepeat}
onChangeText={(text) => setPasswordRepeat(text)}
/>
<TouchableOpacity
style={{ color: "green", right: 10 }}
onPress={() => setSeePassword(!seePassword)}
>
<FontAwesomeIcon
icon={seePassword ? faEye : faEyeSlash}
size={18}
color="#003f5c"
/>
</TouchableOpacity>
</View>
</View>
</View>
{errorOTP ? (
<View style={{ width: "100%", marginBottom: 10 }}>
<Text
style={{
fontSize: 20,
fontWeight: "500",
color: "#ed0000",
alignSelf: "center",
textAlign: "center",
paddingTop: 10,
paddingLeft: 10,
}}
>
Wrong OTP!!
</Text>
</View>
) : null}
<TouchableOpacity
disabled={
f1 !== "" &&
f2 !== "" &&
f3 !== "" &&
f4 !== "" &&
f5 !== "" &&
f6 !== ""
? false
: true
}
style={[
styles.verifyOtpBtn,
{
backgroundColor:
f1 !== "" &&
f2 !== "" &&
f3 !== "" &&
f4 !== "" &&
f5 !== "" &&
f6 !== ""
? "#4caf50"
: "orange",
},
]}
onPress={() => otpValidate()}
>
<Text style={styles.btntxt}>Confirm</Text>
</TouchableOpacity>
<View style={styles.resendView}>
<Text
style={{
fontSize: 18,
alignSelf: "flex-start",
fontWeight: "700",
color: count == 0 ? "orange" : "#7b7b7b",
}}
onPress={() => {
send_email();
}}
>
Resend Code
</Text>
{count !== 0 && (
<Text style={{ marginLeft: 20, fontSize: 18 }}>
{count + " seconds"}
</Text>
)}
</View>
</View>
) : // ) : currPage === "ChangePassword" ? (
// <View style={styles.wrap}>
// <View style={styles.wrapTop}>
// <Text style={styles.wrapTopHeader}>Change Password</Text>
// </View>
// <View style={styles.wrapMiddle}>
// <View style={styles.wrapMiddleForm}>
// <Text style={styles.inputText}>Password:</Text>
// <View style={styles.input2}>
// <TextInput
// style={styles.inputPass}
// placeholderTextColor="#003f5c"
// secureTextEntry={!seePassword}
// autoCapitalize="none"
// value={password}
// onChangeText={(text) => setPassword(text)}
// />
// <TouchableOpacity
// style={{ color: "green", right: 10 }}
// onPress={() => setSeePassword(!seePassword)}
// >
// <FontAwesomeIcon
// icon={seePassword ? faEye : faEyeSlash}
// size={18}
// color="#003f5c"
// />
// </TouchableOpacity>
// </View>
// </View>
// <View style={styles.wrapMiddleForm}>
// <Text style={styles.inputText}>Confirm Password:</Text>
// <View style={styles.input2}>
// <TextInput
// style={styles.inputPass}
// placeholderTextColor="#003f5c"
// secureTextEntry={!seePassword}
// autoCapitalize="none"
// value={passwordRepeat}
// onChangeText={(text) => setPasswordRepeat(text)}
// />
// <TouchableOpacity
// style={{ color: "green", right: 10 }}
// onPress={() => setSeePassword(!seePassword)}
// >
// <FontAwesomeIcon
// icon={seePassword ? faEye : faEyeSlash}
// size={18}
// color="#003f5c"
// />
// </TouchableOpacity>
// </View>
// </View>
// </View>
// {/* {error ? <Text>{error}</Text> : null} */}
// <View style={styles.wrapBottom}>
// <TouchableOpacity
// style={styles.btn}
// // disabled={emailDupe ? false : true}
// onPress={() => {
// handleLogin();
// }}
// >
// <Text style={styles.btnText}>Continue</Text>
// </TouchableOpacity>
// </View>
// </View>
// )
currPage === "Success" ? (
<View style={styles.wrap}>
<Text style={styles.title1}>Change Password Successful</Text>
<Text style={styles.title}>
you may now login with your new password!
</Text>
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
// disabled={emailDupe ? false : true}
onPress={() => {
// handleLogin();
navigation.navigate("Login");
}}
>
<Text style={styles.btnText}>Continue to Login</Text>
</TouchableOpacity>
</View>
</View>
) : null}
</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,
},
wrap: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
bottom: 0,
borderColor: "#bebebe",
borderRadius: 25,
// justifyContent: "center",
alignItems: "center",
paddingTop: 100,
},
wrapTop: {
justifyContent: "center",
alignItems: "center",
height: 130,
// backgroundColor:'#ffaa00',
marginVertical: 15,
},
wrapTopHeader: {
fontSize: 25,
fontWeight: "600",
color: "#ffaa00",
},
wrapMiddle: {
justifyContent: "center",
alignItems: "center",
width: "100%",
marginTop: 20,
},
wrapBottom: {
justifyContent: "center",
alignItems: "center",
},
wrapMiddleForm: {
marginTop: 20,
},
wrapMiddleFormInput: {
marginVertical: 10,
},
input: {
height: 50,
width: 300,
margin: 12,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
},
input2: {
height: 50,
width: 300,
margin: 12,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
inputPass: {
height: 50,
width: 250,
// margin: 12,
// borderWidth: 1,
// padding: 10,
// borderColor: "#bebebe",
// borderRadius: 10,
},
inputreg: {
width: "100%",
// backgroundColor: "#FEF8C5",
shadowRadius: 0,
shadowColor: "orange",
borderRadius: 10,
height: "6%",
marginBottom: 5,
marginTop: 5,
justifyContent: "center",
alignItems: "center",
padding: 5,
borderWidth: 0,
paddingHorizontal: 10,
flexDirection: "row",
},
inputText: {
marginLeft: 15,
fontSize: 16,
},
btn: {
backgroundColor: "#ffaa00",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btnText: {
color: "#fff",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
btnReg: {
// backgroundColor: "#333",
width: "100%",
justifyContent: "center",
alignContent: "center",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btnTextReg: {
color: "#ffaa00",
textAlign: "center",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
title: {
fontSize: 15,
fontWeight: "500",
marginTop: 5,
marginLeft: 35,
alignSelf: "flex-start",
textAlign: "center",
width: "83%",
color: "#969696",
},
title1: {
fontSize: 25,
fontWeight: "700",
marginTop: 10,
marginLeft: 25,
alignSelf: "center",
textAlign: "center",
width: "83%",
color: "#525252",
},
otpView: {
width: "100%",
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
marginTop: 50,
},
inputView: {
width: 50,
height: 50,
borderWidth: 0.5,
borderRadius: 15,
marginLeft: 10,
textAlign: "center",
fontSize: 18,
fontWeight: "700",
},
verifyOtpBtn: {
width: "40%",
height: 45,
backgroundColor: "orange",
borderRadius: 15,
alignSelf: "center",
marginTop: 20,
justifyContent: "center",
alignItems: "center",
},
btntxt: {
color: "#fff",
fontSize: 20,
fontWeight: "700",
},
resendView: {
flexDirection: "row",
alignSelf: "center",
marginTop: 10,
marginBottom: 30,
fontWeight: "200",
},
});
export default ForgotPassword;

401
app/pages/auth/Login.jsx Normal file
View File

@ -0,0 +1,401 @@
import {
faArrowLeft,
faEye,
faEyeSlash,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import {
get_user_token,
register_user,
user_login,
} from "../../services/api/controllers/auth";
import {
create_customer,
get_customer_login_id,
search_customer,
} from "../../services/api/controllers/customers";
import OTPAuth from "./OTP";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useToast } from "react-native-toast-notifications";
// import CryptoJS from 'crypto-js'
// import crypto from 'react-native-crypto';
const Login = () => {
const navigation = useNavigation();
const [status, setstatus] = useState("register");
const [email, setemail] = useState("");
const [error, seterror] = useState("");
const [uid, setuid] = useState("");
const toast = useToast();
const [token, settoken] = useState("");
const [tokenHere, settokenHere] = useState("");
const [loading, setloading] = useState("");
const [loggedIn, setloggedIn] = useState(false);
const [seePassword, setSeePassword] = useState(false);
const [emailDupe, setemailDupe] = useState(false);
const [password, setpassword] = useState("");
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("AccessToken")
.then((pass) => {
console.log(pass);
pass !== null ? navigation.navigate("Home") : null;
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
const handleLogin = (e) => {
/* ---------------Login Function --------------- */
user_login({
username: email.replace(/\s/g, "").toLowerCase(),
password: password,
})
.then((result) => {
if (result.status == 200) {
// setuserEmail(result.data.user.email);
// settoken(result.data.token);
// setuid(result.data.user._id);
// send_email();
settoken(result.data.token);
settokenHere(result.data.token);
AsyncStorage.setItem("AccessToken", result.data.token);
AsyncStorage.setItem("email", email.replace(/\s/g, "").toLowerCase());
AsyncStorage.setItem("something", password);
get_user_token({
token: result.data.token,
})
.then((results) => {
if (results.status == 200) {
setuid(results.data.profile.userId);
AsyncStorage.setItem("userId", results.data.profile.userId);
get_customer_login_id({
id: results.data.profile.userId,
})
.then((result1) => {
// console.log(result1.data);
if (result1.error) {
seterror(result1.error);
} else {
AsyncStorage.setItem(
"userData",
JSON.stringify(result1.data)
);
navigation.navigate("Home", { userLoggedin: true });
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
// seterror(results.message);
console.log("login error" + results);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
// setauth(true);
console.log("login success " + result.data.token);
} else {
seterror(result.message);
toast.show("Invalid Credentials!", {
type: "danger",
placement: "top",
duration: 4000,
offset: 30,
animationType: "slide-in",
});
console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
};
const handleChange = (e) => {
search_customer({
searchData: e,
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
if (result.data?.results.length < 1) {
setemailDupe(false);
} else {
setemail(e);
setemailDupe(true);
console.log(result.data?.results.length + " " + emailDupe);
}
// console.log("length on search " + result.data?.results.length);
setloading(false);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
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}>Login</Text>
</View> */}
<View style={styles.wrapper}>
{status === "register" ? (
<View>
<View style={styles.wrap}>
<View style={styles.wrapTop}>
<Text style={styles.wrapTopHeader}>Login</Text>
</View>
<View style={styles.wrapMiddle}>
<View style={styles.wrapMiddleForm}>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
Email Address{" "}
{!emailDupe && email !== "" ? (
<Text style={{ color: "red" }}>
Email does not exist
</Text>
) : (
""
)}
</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
handleChange(e);
}}
// value={email}
placeholder=""
// keyboardType="numeric"
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Password:</Text>
<View style={styles.input2}>
<TextInput
style={styles.inputPass}
placeholderTextColor="#003f5c"
secureTextEntry={!seePassword}
autoCapitalize="none"
value={password}
onChangeText={(text) => setpassword(text)}
/>
<TouchableOpacity
style={{ color: "green", right: 10 }}
onPress={() => setSeePassword(!seePassword)}
>
<FontAwesomeIcon
icon={seePassword ? faEye : faEyeSlash}
size={18}
color="#003f5c"
/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
{/* {error ? <Text>{error}</Text> : null} */}
<TouchableOpacity
style={styles.btnReg}
// disabled={emailDupe ? false : true}
onPress={() => {
navigation.navigate("ForgotPassword");
}}
>
<Text style={styles.btnTextReg}>Forgot Password?</Text>
{/* <Text style={styles.btnTextReg}>Register here</Text> */}
</TouchableOpacity>
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
// disabled={emailDupe ? false : true}
onPress={() => {
handleLogin();
}}
>
<Text style={styles.btnText}>Login</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.btnReg}
// disabled={emailDupe ? false : true}
onPress={() => {
navigation.navigate("Register");
}}
>
<Text style={styles.btnTextReg}>No account yet?</Text>
<Text style={styles.btnTextReg}>Register here</Text>
</TouchableOpacity>
</View>
</View>
) : null}
</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,
},
wrap: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
bottom: 0,
borderColor: "#bebebe",
borderRadius: 25,
},
wrapTop: {
justifyContent: "center",
alignItems: "center",
height: 130,
// backgroundColor:'#ffaa00',
marginVertical: 15,
},
wrapTopHeader: {
fontSize: 25,
fontWeight: "600",
color: "#ffaa00",
},
wrapMiddle: {
justifyContent: "center",
alignItems: "center",
width: "100%",
},
wrapBottom: {
justifyContent: "center",
alignItems: "center",
},
wrapMiddleForm: {},
wrapMiddleFormInput: {
marginVertical: 10,
},
input: {
height: 50,
width: 300,
margin: 12,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
},
input2: {
height: 50,
width: 300,
margin: 12,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
inputPass: {
height: 50,
width: 250,
// margin: 12,
// borderWidth: 1,
// padding: 10,
// borderColor: "#bebebe",
// borderRadius: 10,
},
inputText: {
marginLeft: 15,
fontSize: 16,
},
btn: {
backgroundColor: "#ffaa00",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btnText: {
color: "#fff",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
btnReg: {
// backgroundColor: "#333",
width: "100%",
justifyContent: "center",
alignContent: "center",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btnTextReg: {
color: "#ffaa00",
textAlign: "center",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
});
export default Login;

477
app/pages/auth/OTP.jsx Normal file
View File

@ -0,0 +1,477 @@
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useRef, useState } from "react";
import {
TextInput,
View,
Text,
StyleSheet,
TouchableOpacity,
} from "react-native";
import {
get_user_token,
register_user,
user_login,
} from "../../services/api/controllers/auth";
import { get_customer_login_id } from "../../services/api/controllers/customers";
import { update_order_item_by_reference_number } from "../../services/api/controllers/order";
import { create_transaction } from "../../services/obananapayApi/transaction_api";
import { update_payment } from "../../services/obananapayGatewayApi/controllers/payment_api";
const OTPAuth = ({
setotpCheck,
otp,
setstatus,
setsuccess,
setloading,
email,
password,
settoken,
setuid,
}) => {
const et1 = useRef();
const et2 = useRef();
const et3 = useRef();
const et4 = useRef();
const et5 = useRef();
const et6 = useRef();
const [f1, setF1] = useState("");
const [f2, setF2] = useState("");
const [f3, setF3] = useState("");
const [f4, setF4] = useState("");
const [f5, setF5] = useState("");
const [f6, setF6] = useState("");
const [errorOTP, seterrorOTP] = useState(false);
const [count, setCount] = useState(20);
const [error, seterror] = useState("");
const [tokenHere, settokenHere] = useState("");
// console.log("token:" + token);
// console.log("uid:" + uid);
const navigation = useNavigation();
useEffect(() => {
const interval = setInterval(() => {
if (count == 0) {
clearInterval(interval);
} else {
setCount(count - 1);
}
}, 1000);
return () => {
clearInterval(interval);
};
}, [count]);
/* ---------------check if the sent otp and the entered otp is the same--------------- */
const otpValidate = () => {
let enteredOtp = f1 + f2 + f3 + f4 + f5 + f6;
if (enteredOtp == otp) {
console.log(otp);
setotpCheck(true);
register_user({
username: email.replace(/\s/g, "").toLowerCase(),
password: password,
})
.then((result) => {
if (result.status == 201) {
// setuserEmail(result.data.user.email);
// settoken(result.data.token);
// setuid(result.data.user._id);
// send_email();
user_login({
username: email.replace(/\s/g, "").toLowerCase(),
password: password,
})
.then((result) => {
if (result.status == 200) {
// setuserEmail(result.data.user.email);
// settoken(result.data.token);
// setuid(result.data.user._id);
// send_email();
settoken(result.data.token);
settokenHere(result.data.token);
get_user_token({
token: result.data.token,
})
.then((results) => {
if (results.status == 200) {
AsyncStorage.setItem(
"userId",
results.data.profile.userId
);
get_customer_login_id({
id: results.data.profile.userId,
})
.then((result1) => {
console.log(result1.data);
if (result1.error) {
seterror(result1.error);
} else {
AsyncStorage.setItem(
"userData",
JSON.stringify(result1.data)
);
setuid(results.data.profile.userId);
setstatus("customerCreate");
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
// setauth(true);
} else {
seterror(results.message);
console.log("login error" + results);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
// setauth(true);
console.log("login success");
} else {
seterror(result.message);
console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
// setauth(true);
console.log("login success");
} else {
seterror(result.message);
console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
} else {
setotpError(true);
}
};
const phoneOTP = () => {
if (email) {
const min = 100000; // Minimum 6-digit number
const max = 999999; // Maximum 6-digit number
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
// const email2 = "kramblooda@gmail.com";
send_email_api({
email: email.replace(/\s/g, "").toLowerCase(),
html: `<p>your OTP code to continue your obanana pay transaction is ${randomNumber} </p>`,
})
.then((result) => {
setotp(randomNumber);
if (result.status == 200) {
} else {
seterror(result.message);
}
console.log(result);
})
.catch((err) => {
seterror(err);
console.error(err);
console.log(err + "failed to send email");
});
} else {
// setotpError(true);
}
};
return (
<View style={styles.container}>
<View style={styles.wrap}>
<Text style={styles.title1}>OTP Verification</Text>
<Text style={styles.title}>
Please enter the verification code we just sent on your email address .
</Text>
<View style={styles.otpView}>
<TextInput
ref={et1}
style={[
styles.inputView,
{ borderColor: f1.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f1}
onChangeText={(txt) => {
setF1(txt);
if (txt.length >= 1) {
et2.current.focus();
}
}}
/>
<TextInput
ref={et2}
style={[
styles.inputView,
{ borderColor: f2.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f2}
onChangeText={(txt) => {
setF2(txt);
if (txt.length >= 1) {
et3.current.focus();
} else if (txt.length < 1) {
et1.current.focus();
}
}}
/>
<TextInput
ref={et3}
style={[
styles.inputView,
{ borderColor: f3.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f3}
onChangeText={(txt) => {
setF3(txt);
if (txt.length >= 1) {
et4.current.focus();
} else if (txt.length < 1) {
et2.current.focus();
}
}}
/>
<TextInput
ref={et4}
style={[
styles.inputView,
{ borderColor: f4.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f4}
onChangeText={(txt) => {
setF4(txt);
if (txt.length >= 1) {
et5.current.focus();
} else if (txt.length < 1) {
et3.current.focus();
}
}}
/>
<TextInput
ref={et5}
style={[
styles.inputView,
{ borderColor: f5.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f5}
onChangeText={(txt) => {
setF5(txt);
if (txt.length >= 1) {
et6.current.focus();
} else if (txt.length < 1) {
et4.current.focus();
}
}}
/>
<TextInput
ref={et6}
style={[
styles.inputView,
{ borderColor: f6.length >= 1 ? "green" : "#f57f17" },
]}
keyboardType="number-pad"
maxLength={1}
value={f6}
onChangeText={(txt) => {
setF6(txt);
if (txt.length >= 1) {
et6.current.focus();
} else if (txt.length < 1) {
et5.current.focus();
}
}}
/>
</View>
{errorOTP ? (
<View style={{ width: "100%", marginBottom: 10 }}>
<Text
style={{
fontSize: 20,
fontWeight: "500",
color: "#ed0000",
alignSelf: "center",
textAlign: "center",
paddingTop: 10,
paddingLeft: 10,
}}
>
Wrong OTP!!
</Text>
</View>
) : null}
<TouchableOpacity
disabled={
f1 !== "" &&
f2 !== "" &&
f3 !== "" &&
f4 !== "" &&
f5 !== "" &&
f6 !== ""
? false
: true
}
style={[
styles.verifyOtpBtn,
{
backgroundColor:
f1 !== "" &&
f2 !== "" &&
f3 !== "" &&
f4 !== "" &&
f5 !== "" &&
f6 !== ""
? "#4caf50"
: "orange",
},
]}
onPress={() => otpValidate()}
>
<Text style={styles.btntxt}>Next</Text>
</TouchableOpacity>
<View style={styles.resendView}>
<Text
style={{
fontSize: 18,
alignSelf: "flex-start",
fontWeight: "700",
color: count == 0 ? "orange" : "#7b7b7b",
}}
onPress={() => {
phoneOTP();
}}
>
Resend Code
</Text>
{count !== 0 && (
<Text style={{ marginLeft: 20, fontSize: 18 }}>
{count + " seconds"}
</Text>
)}
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: "100%",
bottom: 0,
},
wrap: {
backgroundColor: "#fff",
height: "86%",
bottom: 0,
marginTop: 30,
// borderWidth: 2,
// borderColor: "#eeeeee",
borderRadius: 25,
padding: 10,
},
wrapTop: {
height: "4%",
bottom: 0,
},
wrapHeader: {
justifyContent: "space-between",
flexDirection: "row",
},
wrapHeaderText: {
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
color: "#2e2e2e",
},
title: {
fontSize: 15,
fontWeight: "500",
marginTop: 5,
marginLeft: 35,
alignSelf: "flex-start",
textAlign: "center",
width: "83%",
color: "#969696",
},
title1: {
fontSize: 25,
fontWeight: "700",
marginTop: 10,
marginLeft: 25,
alignSelf: "center",
textAlign: "center",
width: "83%",
color: "#525252",
},
otpView: {
width: "100%",
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
marginTop: 50,
},
inputView: {
width: 50,
height: 50,
borderWidth: 0.5,
borderRadius: 15,
marginLeft: 10,
textAlign: "center",
fontSize: 18,
fontWeight: "700",
},
verifyOtpBtn: {
width: "40%",
height: 45,
backgroundColor: "orange",
borderRadius: 15,
alignSelf: "center",
marginTop: 20,
justifyContent: "center",
alignItems: "center",
},
btntxt: {
color: "#fff",
fontSize: 20,
fontWeight: "700",
},
resendView: {
flexDirection: "row",
alignSelf: "center",
marginTop: 10,
marginBottom: 30,
fontWeight: "200",
},
});
export default OTPAuth;

469
app/pages/auth/Register.jsx Normal file
View File

@ -0,0 +1,469 @@
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import { get_user_token, register_user, user_login } from "../../services/api/controllers/auth";
import {
create_customer,
get_customer_login_id,
search_customer,
} from "../../services/api/controllers/customers";
import { send_email_api } from "../../services/obananapayApi/user_api";
import OTPAuth from "./OTP";
const Register = () => {
const navigation = useNavigation();
const [status, setstatus] = useState("register");
const [email, setemail] = useState("");
const [error, seterror] = useState("");
const [otpSent, setotpSent] = useState("");
const [otpCheck, setotpCheck] = useState("");
const [success, setsuccess] = useState("");
const [token, settoken] = useState("");
const [fName, setfName] = useState("");
const [lName, setlName] = useState("");
const [phone, setphone] = useState("");
const [uid, setuid] = useState("");
const [loading, setloading] = useState("");
const [emailDupe, setemailDupe] = useState("");
const [password, setpassword] = useState("");
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("AccessToken")
.then((pass) => {
console.log(pass);
pass !== null ? navigation.navigate("Home") : null;
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
const handleRegister = (e) => {
/* ---------------Login Function --------------- */
send_email();
setstatus("otp");
};
const handleChange = (e) => {
search_customer({
searchData: e,
})
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
if (result.data?.results.length < 1 || undefined || [] || null) {
setemail(e);
setemailDupe(false);
} else {
setemailDupe(true);
}
// console.log("length on search " + result.data?.results.length);
setloading(false);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
const handleCreateCustomer = (e) => {
create_customer({
first_name: fName,
last_name: lName,
user_email: email,
phone_number: phone,
role: "customer",
login_id: uid,
})
.then((result) => {
// console.log(result.data);
if (result.status === 201) {
console.log("success create customer" + result.data);
user_login({
username: email.replace(/\s/g, "").toLowerCase(),
password: password,
})
.then((result) => {
if (result.status == 200) {
// setuserEmail(result.data.user.email);
// settoken(result.data.token);
// setuid(result.data.user._id);
// send_email();
// settoken(result.data.token);
// settokenHere(result.data.token);
AsyncStorage.setItem("AccessToken", result.data.token);
AsyncStorage.setItem("email", email.replace(/\s/g, "").toLowerCase());
AsyncStorage.setItem("something", password);
get_user_token({
token: result.data.token,
})
.then((results) => {
if (results.status == 200) {
setuid(results.data.profile.userId);
AsyncStorage.setItem("userId", results.data.profile.userId);
get_customer_login_id({
id: results.data.profile.userId,
})
.then((result1) => {
// console.log(result1.data);
if (result1.error) {
seterror(result1.error);
} else {
AsyncStorage.setItem(
"userData",
JSON.stringify(result1.data)
);
navigation.navigate("Home", { userLoggedin: true });
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
// seterror(results.message);
console.log("login error" + results);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
// setauth(true);
console.log("login success " + result.data.token);
} else {
seterror(result.message);
console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
navigation.navigate("Home");
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
const send_email = () => {
if (email) {
const min = 100000; // Minimum 6-digit number
const max = 999999; // Maximum 6-digit number
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
// const email2 = "kramblooda@gmail.com";
send_email_api({
email: email.replace(/\s/g, "").toLowerCase(),
html: `<p>your OTP code to continue your obanana pay transaction is ${randomNumber} </p>`,
})
.then((result) => {
setotpSent(randomNumber);
if (result.status == 200) {
} else {
seterror(result.message);
}
console.log(result);
})
.catch((err) => {
seterror(err);
console.error(err);
console.log(err + "failed to send email");
});
} else {
// setotpError(true);
}
};
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}>Register</Text>
</View> */}
<View style={styles.wrapper}>
{status === "register" ? (
<View>
<View style={styles.wrap}>
<View style={styles.wrapTop}>
<Text style={styles.wrapTopHeader}>Register</Text>
</View>
<View style={styles.wrapMiddle}>
<View style={styles.wrapMiddleForm}>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>
Email Address{" "}
{emailDupe ? (
<Text style={{ color: "red" }}>
Email already in used
</Text>
) : (
""
)}
</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
handleChange(e);
}}
// value={email}
placeholder=""
// keyboardType="numeric"
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Password:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setpassword(e);
}}
value={password}
placeholder=""
// keyboardType="numeric"
secureTextEntry={true}
/>
</View>
</View>
</View>
{error ? <Text>{error}</Text> : null}
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
disabled={emailDupe ? true : false}
onPress={() => {
handleRegister();
}}
>
<Text style={styles.btnText}>Register</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.btnReg}
// disabled={emailDupe ? false : true}
onPress={() => {
navigation.navigate("Login");
}}
>
<Text style={styles.btnTextReg}>Already have an account?</Text>
<Text style={styles.btnTextReg}>Login here</Text>
</TouchableOpacity>
</View>
</View>
) : status === "otp" ? (
<View>
<OTPAuth
otp={otpSent}
setotpCheck={setotpCheck}
setstatus={setstatus}
settoken={settoken}
email={email}
password={password}
setuid={setuid}
/>
</View>
) : status === "customerCreate" ? (
<View>
<View style={styles.wrap}>
<View style={styles.wrapTop}>
<Text style={styles.wrapTopHeader}>Obanana </Text>
</View>
<View style={styles.wrapMiddle}>
<View style={styles.wrapMiddleForm}>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>First Name </Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setfName(e);
}}
value={fName}
placeholder=""
// keyboardType="numeric"
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Last Name </Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setlName(e);
}}
value={lName}
placeholder=""
// keyboardType="numeric"
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Phone Number </Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setphone(e);
}}
value={phone}
placeholder=""
// keyboardType="numeric"
/>
</View>
</View>
</View>
{error ? <Text>{error}</Text> : null}
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
// disabled={emailDupe ? true : false}
onPress={() => {
handleCreateCustomer();
}}
>
<Text style={styles.btnText}>Register</Text>
</TouchableOpacity>
</View>
</View>
</View>
) : null}
</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,
},
wrap: {
backgroundColor: "#fff",
height: "100%",
width: "100%",
bottom: 0,
borderColor: "#bebebe",
borderRadius: 25,
},
wrapTop: {
justifyContent: "center",
alignItems: "center",
height: 130,
// backgroundColor:'#ffaa00',
marginVertical: 15,
},
wrapTopHeader: {
fontSize: 25,
fontWeight: "600",
color: "#ffaa00",
},
wrapMiddle: {
justifyContent: "center",
alignItems: "center",
width: "100%",
},
wrapBottom: {
justifyContent: "center",
alignItems: "center",
},
wrapMiddleForm: {},
wrapMiddleFormInput: {
marginVertical: 10,
},
input: {
height: 50,
width: 300,
margin: 12,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
},
inputText: {
marginLeft: 15,
fontSize: 16,
},
btn: {
backgroundColor: "#ffaa00",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btnText: {
color: "#fff",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
btnReg: {
// backgroundColor: "#333",
width: "100%",
justifyContent: "center",
alignContent: "center",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 30,
},
btnTextReg: {
color: "#ffaa00",
textAlign: "center",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
});
export default Register;

224
app/pages/cart/AddressSelection.jsx Normal file
View File

@ -0,0 +1,224 @@
import { faArrowLeft, faCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation, useRoute } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { useToast } from "react-native-toast-notifications";
import Accordion from "../../components/checkout/Accordion";
// import { user } from "../../constants/user";
const width = Dimensions.get("window").width;
const AddressSelectionMulti = () => {
const navigation = useNavigation();
const [selected, setselected] = useState(0);
const route = useRoute();
const { product, shipMethod, payMethod, orderId } = route.params;
const [user, setuser] = useState([]);
const [shippingAddress, setshippingAddress] = useState([]);
const toast = useToast();
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
const ship = userDataArray[0]?.address.find(
(address) => address?.shipping === true
);
setshippingAddress(ship);
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
console.log(shippingAddress);
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() =>
navigation.navigate("CheckOutMultiple", {
shipMethod: shipMethod,
product,
payMethod,
orderId: orderId,
})
}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Select Address</Text>
</View>
<View style={styles.wrapper}>
{user[0]?.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.first_name} {add.last_name}, {add.phone}
</Text>
</View>
<Text style={styles.listItemText}>Address:</Text>
<Text style={styles.listItemTexteta} numberOfLines={4}>
{" "}
{add.address_1 +
" " +
add.address_2 +
", " +
add.city +
" " +
add.province +
" "}
{add.country === "PH" ? "Philippines" : add.country}
</Text>
</View>
{selected === i ? (
<FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} />
) : null}
</TouchableOpacity>
))}
</View>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() => {
toast.show("Successfully Changed Address!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
navigation.navigate("CheckOutMultiple", {
shipMethod: selected ? selected : shipMethod,
product,
payMethod,
address: user[0].address[selected],
orderId: orderId,
});
}}
>
<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%",
borderRadius: 20,
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 AddressSelectionMulti;

1038
app/pages/cart/CheckOutMultiple.jsx Normal file
View File

File diff suppressed because it is too large Load Diff

184
app/pages/cart/Paymentoption.jsx Normal file
View File

@ -0,0 +1,184 @@
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 { useToast } from "react-native-toast-notifications";
import Accordion from "../../components/checkout/Accordion";
const width = Dimensions.get("window").width;
const PaymentoptionMulti = () => {
const navigation = useNavigation();
const [selected, setselected] = useState("Obananapay");
const [orderIdC, setorderIdC] = useState("Visa");
const toast = useToast();
const route = useRoute();
const { product, shipMethod, payMethod, address, orderId } = route.params;
console.log("paymentmethod " + product);
const paymentMethods = [
{
methodName: "Obananapay",
// methodID: "visa123",
},
{
methodName: "Cash On Delivery",
// methodID: "visa123",
},
// {
// type: "Obanana",
// methods: [
// {
// methodName: "Obananapay",
// // methodID: "visa123",
// },
// ],
// },
// {
// 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("CheckOutMultiple", {
shipMethod: shipMethod,
product: product,
payMethod: payMethod,
address: address,
orderId: orderId ? orderId : null,
})
}
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={() => {
toast.show("Successfully Changed Payment Method!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
navigation.navigate("CheckOutMultiple", {
shipMethod: shipMethod,
product: product,
payMethod: selected ? selected : payMethod,
address: address,
orderId: orderId,
});
}}
>
<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",
borderRadius: 20,
},
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 PaymentoptionMulti;

193
app/pages/cart/ShippingOption.jsx Normal file
View File

@ -0,0 +1,193 @@
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 ShippingOptionMulti = () => {
const navigation = useNavigation();
const [selected, setselected] = useState("J&T Express");
const route = useRoute();
const { product, shipMethod, payMethod, address,orderId } = 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("CheckOutMultiple", {
shipMethod: shipMethod,
product,
payMethod,
address,
orderId:orderId
})
}
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("CheckOutMultiple", {
shipMethod: selected ? selected : shipMethod,
product,
payMethod,
address,
orderId:orderId
})
}
>
<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",
borderRadius:20,
},
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 ShippingOptionMulti;

167
app/pages/checkout/AddressSelection.jsx
View File

@ -1,7 +1,12 @@
import { faArrowLeft, faCheck } from "@fortawesome/free-solid-svg-icons"; import { faArrowLeft, faCheck } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation, useRoute } from "@react-navigation/native"; import AsyncStorage from "@react-native-async-storage/async-storage";
import React, { useState } from "react"; import {
useIsFocused,
useNavigation,
useRoute,
} from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import { import {
Dimensions, Dimensions,
StyleSheet, StyleSheet,
@ -9,14 +14,92 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import { useToast } from "react-native-toast-notifications";
import Accordion from "../../components/checkout/Accordion"; import Accordion from "../../components/checkout/Accordion";
import { get_customer } from "../../services/api/controllers/customers";
// import { user } from "../../constants/user";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
const AddressSelection = () => { const AddressSelection = () => {
const navigation = useNavigation(); const navigation = useNavigation();
const [selected, setselected] = useState(0); const [selected, setselected] = useState(0);
const route = useRoute(); const route = useRoute();
const { product, shipMethod, payMethod } = route.params; const { product, shipMethod, payMethod, orderId } = route.params;
const [user, setuser] = useState([]);
const [shippingAddress, setshippingAddress] = useState([]);
const toast = useToast();
const isFocused = useIsFocused();
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
// setuser(userDataArray);
const ship = userDataArray[0]?.address.find(
(address) => address?.shipping === true
);
setshippingAddress(ship);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setuser(result.data);
console.log(result.data);
// setaddreses(result.data.address);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
const ship = userDataArray[0]?.address.find(
(address) => address?.shipping === true
);
setshippingAddress(ship);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setuser(result.data);
// setaddreses(result.data.address);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, [isFocused]);
const Address = [ const Address = [
{ {
address: "Blk 2 Wall St. Harang, Makati City", address: "Blk 2 Wall St. Harang, Makati City",
@ -29,6 +112,11 @@ const AddressSelection = () => {
number: "09234567890", number: "09234567890",
}, },
]; ];
// const shippingAddress = user[0].address.find(
// (address) => address.shipping === true
// );
// const billingAddress = user[0].address.find((address) => address.billing === true);
console.log(shippingAddress);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
@ -38,6 +126,7 @@ const AddressSelection = () => {
shipMethod: shipMethod, shipMethod: shipMethod,
product, product,
payMethod, payMethod,
orderId: orderId,
}) })
} }
style={styles.backIcon} style={styles.backIcon}
@ -47,7 +136,7 @@ const AddressSelection = () => {
<Text style={styles.headerText}>Select Address</Text> <Text style={styles.headerText}>Select Address</Text>
</View> </View>
<View style={styles.wrapper}> <View style={styles.wrapper}>
{Address?.map((add, i) => ( {user?.address?.map((add, i) => (
<TouchableOpacity <TouchableOpacity
key={i} key={i}
style={styles.listItem} style={styles.listItem}
@ -57,13 +146,21 @@ const AddressSelection = () => {
<View style={styles.listtop}> <View style={styles.listtop}>
<Text style={styles.listItemText}>Recipient: </Text> <Text style={styles.listItemText}>Recipient: </Text>
<Text style={styles.listItemTextPrice}> <Text style={styles.listItemTextPrice}>
{add.recipient}, {add.number} {add.first_name} {add.last_name}, {add.phone}
</Text> </Text>
</View> </View>
<Text style={styles.listItemText}>Address:</Text> <Text style={styles.listItemText}>Address:</Text>
<Text style={styles.listItemTexteta} numberOfLines={4}> <Text style={styles.listItemTexteta} numberOfLines={4}>
{" "} {" "}
{add.address} {add.address_1 +
" " +
add.address_2 +
", " +
add.city +
", " +
add.province +
" "}
{add.country === "PH" ? "Philippines" : add.country}
</Text> </Text>
</View> </View>
{selected === i ? ( {selected === i ? (
@ -71,18 +168,49 @@ const AddressSelection = () => {
) : null} ) : null}
</TouchableOpacity> </TouchableOpacity>
))} ))}
<TouchableOpacity
style={styles.footerBtn1}
onPress={() => {
// toast.show("Successfully Changed Address!", {
// type: "success",
// placement: "top",
// duration: 2000,
// offset: 30,
// animationType: "slide-in",
// });
navigation.navigate("AddressCreate1", {
// isrefresh: !refresh,
address: user?.address,
// shipMethod: shipMethod,
// product,
// payMethod,
// orderId: orderId,
});
}}
>
<Text style={styles.footerBtnText1}>Add New Address +</Text>
</TouchableOpacity>
</View> </View>
<View style={styles.footer}> <View style={styles.footer}>
<TouchableOpacity <TouchableOpacity
style={styles.footerBtn} style={styles.footerBtn}
onPress={() => onPress={() => {
toast.show("Successfully Changed Address!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
navigation.navigate("CheckOut", { navigation.navigate("CheckOut", {
shipMethod: selected ? selected : shipMethod, shipMethod: shipMethod,
product, product,
payMethod, payMethod,
address: Address[selected], address: user.address[selected],
}) orderId: orderId,
} });
}}
> >
<Text style={styles.footerBtnText}>Confirm</Text> <Text style={styles.footerBtnText}>Confirm</Text>
</TouchableOpacity> </TouchableOpacity>
@ -129,6 +257,8 @@ const styles = StyleSheet.create({
}, },
footerBtn: { footerBtn: {
backgroundColor: "#ff5e00", backgroundColor: "#ff5e00",
borderRadius: 20,
width: "90%", width: "90%",
paddingVertical: 10, paddingVertical: 10,
justifyContent: "center", justifyContent: "center",
@ -138,6 +268,21 @@ const styles = StyleSheet.create({
color: "#fff", color: "#fff",
fontSize: 16, fontSize: 16,
}, },
footerBtn1: {
// backgroundColor: "",
borderRadius: 10,
borderWidth: 1,
borderColor: "#ff5e00",
width: "90%",
paddingVertical: 15,
marginTop: 10,
justifyContent: "center",
alignItems: "center",
},
footerBtnText1: {
color: "#ff5e00",
fontSize: 16,
},
wrapper: { wrapper: {
// height: "85%", // height: "85%",
paddingTop: 25, paddingTop: 25,

546
app/pages/checkout/CheckOut.jsx
View File

@ -1,5 +1,6 @@
import { faAngleRight, faArrowLeft } from "@fortawesome/free-solid-svg-icons"; import { faAngleRight, faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation, useRoute } from "@react-navigation/native"; import { useNavigation, useRoute } from "@react-navigation/native";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
@ -9,21 +10,81 @@ import {
TouchableOpacity, TouchableOpacity,
TextInput, TextInput,
Image, Image,
Dimensions,
Platform,
ActivityIndicator,
// Modal,
} from "react-native"; } from "react-native";
// import { user } from "../../constants/user";
import { update_order } from "../../services/api/controllers/order";
import Auth from "../../services/obananapay/Auth";
import { create_payment } from "../../services/obananapayGatewayApi/controllers/payment_api";
import Modal from "react-native-modal";
import { useToast } from "react-native-toast-notifications";
const deviceWidth = Dimensions.get("window").width;
const CheckOut = () => { const CheckOut = () => {
//NOTE !!!! must pass the update product details to the shipping option and payment method page!!!! to prevent error //NOTE !!!! must pass the update product details to the shipping option and payment method page!!!! to prevent error
const [message, setmessage] = useState(""); const [message, setmessage] = useState("");
const [paymessage, setpaymessage] = useState("");
const [pay_refno, setpay_refno] = useState("");
const [codLoad, setcodLoad] = useState(false);
const [billingAdd, setbillingAdd] = useState("");
const [successCOD, setsuccessCOD] = useState(false);
const [orderIdC, setorderIdC] = useState("");
const [token, settoken] = useState("");
const [amount, setamount] = useState(0);
const toast = useToast();
const [modalVisible, setModalVisible] = useState(false);
const [shippingMethod, setshippingMethod] = useState( const [shippingMethod, setshippingMethod] = useState(
"select shipping method" "select shipping method"
); );
const [paymentMethod, setpaymentMethod] = useState("select shipping method"); const [paymentMethod, setpaymentMethod] = useState("select shipping method");
const [recipientDetails, setrecipientDetails] = useState([]); const [recipientDetails, setrecipientDetails] = useState([]);
const [user, setuser] = useState([]);
console.log(successCOD);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
// setsuccessCOD(false)
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
settoken(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
const ship = userDataArray[0]?.address.find(
(address) => address?.shipping === true
);
if (ship) {
setrecipientDetails(ship);
}
const bill = userDataArray[0]?.address?.find(
(address) => address.billing === true
);
setbillingAdd(bill);
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
// console.log(shippingAddress)
const navigation = useNavigation(); const navigation = useNavigation();
const route = useRoute(); const route = useRoute();
const { product, shipMethod, payMethod, address } = route.params; const { product, shipMethod, payMethod, address, orderId } = route.params;
console.log(orderId);
useEffect(() => { useEffect(() => {
setshippingMethod(shipMethod ?? "select shipping method"); setshippingMethod(shipMethod ?? "select shipping method");
}, [shipMethod]); }, [shipMethod]);
@ -33,6 +94,218 @@ const CheckOut = () => {
useEffect(() => { useEffect(() => {
setrecipientDetails(address ?? null); setrecipientDetails(address ?? null);
}, [address]); }, [address]);
console.log(product);
useEffect(() => {
const shippingAddress = user[0]?.address?.find(
(address) => address.shipping === true
);
if (shippingAddress) {
setrecipientDetails(shippingAddress);
}
const billingAddress = user[0]?.address?.find(
(address) => address.billing === true
);
setbillingAdd(billingAddress);
}, []);
console.log(billingAdd);
const checkOutClicked = () => {
setsuccessCOD(false);
console.log(
"he--------------------------------------------------------" +
paymentMethod
);
if (recipientDetails) {
if (paymentMethod === "Obananapay") {
const amount = parseFloat(product.total_amount) * 100;
create_payment({
body: {
amount: amount,
description: `${product.items[0].product.name} (${product.items[0].quantity} qty), ordered from obanana e-commerce`,
},
})
.then((result) => {
console.log(
"successful transaction" + result.data.attributes.reference_number
);
const currentDate = new Date();
const iso8601String = currentDate.toISOString();
if (result.status === 200) {
setpay_refno(result.data.attributes.reference_number);
const shipFee = product.shipping_fee ?? 50;
update_order({
token: token,
id: orderId,
body: {
payment_method: paymentMethod,
billing_address: {
billing_first_name: billingAdd?.first_name,
billing_last_name: billingAdd?.last_name,
billing_company: billingAdd?.company,
billing_email: billingAdd?.email,
billing_phone: billingAdd?.phone,
billing_address_1: billingAdd?.address_1,
billing_address_2: billingAdd?.address_2,
billing_city: billingAdd?.city,
billing_barangay: billingAdd?.barangay,
billing_state: billingAdd?.province,
billing_country: billingAdd?.country,
},
shipping_address: {
shipping_first_name: recipientDetails?.first_name,
shipping_last_name: recipientDetails?.last_name,
shipping_company: recipientDetails?.company,
shipping_email: recipientDetails?.email,
shipping_phone: recipientDetails?.phone,
shipping_address_1: recipientDetails?.address_1,
shipping_address_2: recipientDetails?.address_2,
shipping_city: recipientDetails?.city,
shipping_barangay: recipientDetails?.barangay,
shipping_state: recipientDetails?.province,
shipping_country: recipientDetails?.country,
},
order_date: iso8601String,
payment: {
status: "UNPAID",
reference_number: result.data.attributes.reference_number,
},
total_amount:
result.data.attributes.amount / 100 + parseFloat(shipFee),
},
})
.then((results) => {
if (results.status === 200) {
const shipFee = product.shipping_fee
? product.shipping_fee * 100
: 500;
setamount(
parseFloat(result.data.attributes.amount) +
parseFloat(shipFee)
);
setpaymessage(result.data.attributes.description);
setModalVisible(!modalVisible);
console.log(
"order update id: " +
results.data +
"orderId: " +
orderId +
"amount: " +
result.data.attributes.amount
);
} else {
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
} else {
console.log("create payment link failed");
}
})
.catch((err) => {
console.error(err);
});
} else if (paymentMethod === "Cash On Delivery") {
setModalVisible(!modalVisible);
} else {
toast.show("Please select payment method!", {
type: "danger",
placement: "top",
duration: 3000,
offset: 30,
animationType: "slide-in",
});
}
} else {
toast.show("Please select delivery address first!", {
type: "danger",
placement: "top",
duration: 3000,
offset: 30,
animationType: "slide-in",
});
}
};
const CODpay = () => {
setcodLoad(true);
const characters =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let refno = "";
for (let i = 0; i < 8; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
refno += characters.charAt(randomIndex);
}
const currentDate = new Date();
const iso8601String = currentDate.toISOString();
const shipFee = product.shipping_fee ?? 50;
update_order({
token: token,
id: orderId,
body: {
payment_method: paymentMethod,
billing_address: {
billing_first_name: billingAdd?.first_name,
billing_last_name: billingAdd?.last_name,
billing_company: billingAdd?.company,
billing_email: billingAdd?.email,
billing_phone: billingAdd?.phone,
billing_address_1: billingAdd?.address_1,
billing_address_2: billingAdd?.address_2,
billing_city: billingAdd?.city,
billing_barangay: billingAdd?.barangay,
billing_state: billingAdd?.province,
billing_country: billingAdd?.country,
},
shipping_address: {
shipping_first_name: recipientDetails?.first_name,
shipping_last_name: recipientDetails?.last_name,
shipping_company: recipientDetails?.company,
shipping_email: recipientDetails?.email,
shipping_phone: recipientDetails?.phone,
shipping_address_1: recipientDetails?.address_1,
shipping_address_2: recipientDetails?.address_2,
shipping_city: recipientDetails?.city,
shipping_barangay: recipientDetails?.barangay,
shipping_state: recipientDetails?.province,
shipping_country: recipientDetails?.country,
},
order_date: iso8601String,
payment: {
status: "UNPAID",
reference_number: refno,
},
total_amount: parseFloat(product.total_amount) + parseFloat(shipFee),
status: "TO PAY",
// shipping_fee: product.shipping_fee ?? 50,
},
})
.then((results) => {
if (results.status === 200) {
// setamount(result.data.attributes.amount);
// setpaymessage(result.data.attributes.description);
// setModalVisible(!modalVisible);
setsuccessCOD(true);
// console.log(
// "order update id: " +
// results.data +
// "orderId: " +
// orderId +
// "amount: " +
// result.data.attributes.amount
// );
} else {
setsuccessCOD("error");
console.log("update order failed");
}
})
.catch((err) => {
console.error(err);
});
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
@ -42,61 +315,10 @@ const CheckOut = () => {
> >
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} /> <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity> </TouchableOpacity>
<Text style={styles.headerText}>CheckOut</Text> <Text style={styles.headerText}>Checkout</Text>
</View> </View>
<View style={styles.wrapper}> <View style={styles.wrapper}>
<View style={styles.content}> <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 <TouchableOpacity
style={styles.subContent} style={styles.subContent}
onPress={() => onPress={() =>
@ -105,6 +327,8 @@ const CheckOut = () => {
shipMethod: shippingMethod, shipMethod: shippingMethod,
payMethod: paymentMethod, payMethod: paymentMethod,
address: recipientDetails, address: recipientDetails,
orderId: orderId,
address: user[0]?.address,
}) })
} }
> >
@ -112,13 +336,84 @@ const CheckOut = () => {
<View style={styles.add}> <View style={styles.add}>
<Text style={styles.addText} numberOfLines={4}> <Text style={styles.addText} numberOfLines={4}>
{recipientDetails !== null {recipientDetails !== null
? `${recipientDetails.recipient}, ${recipientDetails.number} ${recipientDetails.address}` ? `${recipientDetails?.first_name} ${
recipientDetails?.last_name
}, ${recipientDetails?.phone} ${
recipientDetails?.address_1 +
" " +
recipientDetails?.address_2 +
", " +
recipientDetails?.city +
" " +
recipientDetails?.province +
" "
}${
recipientDetails?.country === "PH"
? "Philippines"
: recipientDetails?.country
}`
: "select address"} : "select address"}
</Text> </Text>
</View> </View>
<FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} /> <FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
</TouchableOpacity> </TouchableOpacity>
<View style={styles.subContent1}>
<Text style={styles.subContentText}>
<Text style={styles.subContentTexthead}>
{product.items[0].vendor_name}
</Text>
</Text>
<View style={styles.card}>
<View style={styles.imgWrap}>
<Image
style={{ width: 50, height: 50, resizeMode: "cover" }}
source={{
uri: `${
product.items[0].product.product_image !== ""
? product.items[0].product.product_image
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
}`,
}}
/>
</View>
<View style={styles.wrapper}>
<View style={styles.details}>
<Text style={styles.text} numberOfLines={2}>
{product.items[0].product.name}
</Text>
<View style={styles.rateCon}>
{product.items[0].price ? (
<>
<View style={styles.priceCon}>
<Text
style={
product?.sale_price
? styles.textPricePromo
: styles.textPrice
}
>
₱
{parseFloat(product.items[0].price).toLocaleString(
"en-US"
)}
</Text>
</View>
</>
) : (
<Text>No price </Text>
)}
<Text style={styles.qty}>
{" "}
{product.items[0].quantity} qty{" "}
</Text>
</View>
</View>
</View>
</View>
</View>
{/*
<TouchableOpacity <TouchableOpacity
style={styles.subContent} style={styles.subContent}
onPress={() => onPress={() =>
@ -127,6 +422,7 @@ const CheckOut = () => {
shipMethod: shippingMethod, shipMethod: shippingMethod,
payMethod: paymentMethod, payMethod: paymentMethod,
address: recipientDetails, address: recipientDetails,
orderId: orderId,
}) })
} }
> >
@ -145,10 +441,14 @@ const CheckOut = () => {
numberOfLines={2} numberOfLines={2}
placeholder="write a message" placeholder="write a message"
/> />
</View> </View> */}
<TouchableOpacity style={styles.subContent}> <TouchableOpacity style={styles.subContent}>
<Text style={styles.subContentText}>ORDER TOTAL</Text> <Text style={styles.subContentText}>ORDER TOTAL</Text>
<Text style={styles.addText}>₱{product.price}</Text> <Text style={styles.addText}>
₱
{parseFloat(product.items[0].price) *
parseInt(product.items[0].quantity)}
</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={styles.subContent} style={styles.subContent}
@ -158,6 +458,7 @@ const CheckOut = () => {
shipMethod: shippingMethod, shipMethod: shippingMethod,
payMethod: paymentMethod, payMethod: paymentMethod,
address: recipientDetails, address: recipientDetails,
orderId: orderId ? orderId : null,
}) })
} }
> >
@ -174,32 +475,123 @@ const CheckOut = () => {
<Text style={styles.subContentText2}> <Text style={styles.subContentText2}>
Merchandise Sub Total: Merchandise Sub Total:
</Text> </Text>
<Text style={styles.subContentTexthead}>₱{product.price}</Text> <Text style={styles.subContentTexthead}>
₱{product.items[0].price}
</Text>
</View> </View>
<View style={styles.subContent2}> <View style={styles.subContent2}>
<Text style={styles.subContentText2}>Shipping:</Text> <Text style={styles.subContentText2}>Shipping:</Text>
<Text style={styles.subContentTexthead}>₱50</Text> <Text style={styles.subContentTexthead}>
₱{product.shipping_fee ?? 50.0}
</Text>
</View> </View>
<View style={styles.subContent2}> <View style={styles.subContent2}>
<Text style={styles.subContentText2}>Total: </Text> <Text style={styles.subContentText2}>Total: </Text>
<Text style={styles.subContentTexthead}> <Text style={styles.subContentTexthead}>
₱{product.price + 50} ₱
{parseFloat(product.total_amount, 10) +
parseFloat(product.shipping_fee ?? 50.0)}
</Text> </Text>
</View> </View>
</View> </View>
</View> </View>
</View> </View>
</View> </View>
<View style={styles.footer}>
{successCOD === true ? (
<>
<Text style={styles.footerBtnText2}>Completed Transaction</Text>
</>
) : (
<TouchableOpacity
style={styles.footerBtn}
onPress={() => checkOutClicked()}
>
<Text style={styles.footerBtnText}>Order Now</Text>
</TouchableOpacity>
)}
</View>
<Modal
animationType="slide"
animationIn={"slideInUp"}
transparent={true}
isVisible={modalVisible}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={["down"]}
swipeThreshold="100"
backdropOpacity={0.2}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
{paymentMethod === "Cash On Delivery" ? (
<View style={styles.CodWrap}>
{successCOD === true ? (
<>
<Text>Successful Order!</Text>
<View style={styles.footer}> <View style={styles.footer}>
<TouchableOpacity <TouchableOpacity
style={styles.footerBtn} style={styles.footerBtn}
onPress={() => navigation.navigate("Home")} onPress={() => navigation.navigate("Home")}
> >
<Text style={styles.footerBtnText}>Order Now</Text> <Text style={styles.footerBtnText}>Exit</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</>
) : successCOD === "error" ? (
<>
<Text>Failed Order! Please try again later</Text>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() => navigation.navigate("Home")}
>
<Text style={styles.footerBtnText}>Exit</Text>
</TouchableOpacity>
</View>
</>
) : (
<>
<Text>
Checkout order using Cash On Delivery payment method?
</Text>
<View style={styles.footer}>
<TouchableOpacity
style={styles.footerBtn}
onPress={() => CODpay()}
disabled={codLoad}
>
<Text style={styles.footerBtnText}>
{" "}
{codLoad ? (
<ActivityIndicator size="large" color="#ffffff" />
) : (
"Continue"
)}
</Text>
</TouchableOpacity>
</View>
</>
)}
</View>
) : (
<Auth
onRequestClose={setModalVisible}
amount={amount}
pay_refno={pay_refno}
desc={paymessage}
setsuccessCOD={setsuccessCOD}
username={user[0]?.first_name}
email={user[0]?.user_email}
number={"+63" + user[0]?.phone_number}
/>
)}
</Modal>
</View> </View>
); );
}; };
@ -244,6 +636,8 @@ const styles = StyleSheet.create({
backgroundColor: "#ff5e00", backgroundColor: "#ff5e00",
width: "90%", width: "90%",
paddingVertical: 10, paddingVertical: 10,
borderRadius: 20,
// borderColor:'#ffff',
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
@ -251,6 +645,10 @@ const styles = StyleSheet.create({
color: "#fff", color: "#fff",
fontSize: 16, fontSize: 16,
}, },
footerBtnText2: {
color: "#353535",
fontSize: 16,
},
wrapper: { wrapper: {
// height: "85%", // height: "85%",
@ -308,7 +706,7 @@ const styles = StyleSheet.create({
}, },
addText: { addText: {
color: "#5f5f5f", color: "#5f5f5f",
textAlign:'left' textAlign: "left",
}, },
imgWrap: { imgWrap: {
padding: 10, padding: 10,
@ -330,13 +728,13 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
paddingVertical: 10, paddingVertical: 10,
}, },
rateCon:{ rateCon: {
width:'75%', width: "75%",
flexDirection: "row", flexDirection: "row",
justifyContent:'space-between', justifyContent: "space-between",
alignItems: "center", alignItems: "center",
}, },
qty:{ qty: {
fontSize: 14, fontSize: 14,
color: "#5f5f5f", color: "#5f5f5f",
}, },
@ -358,8 +756,22 @@ const styles = StyleSheet.create({
}, },
text: { text: {
fontSize: 14, fontSize: 14,
fontWeight:'500', fontWeight: "500",
width:'75%' width: "75%",
},
CodWrap: {
backgroundColor: "#fff",
marginTop: 20,
height: "50%",
bottom: 0,
borderWidth: 2,
borderColor: "#eeeeee",
// borderTopRightRadius: 25,
borderRadius: 25,
borderTopLeftRadius: 25,
padding: 10,
justifyContent: "center",
alignItems: "center",
}, },
}); });

100
app/pages/checkout/Paymentoption.jsx
View File

@ -10,52 +10,59 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import { useToast } from "react-native-toast-notifications";
import Accordion from "../../components/checkout/Accordion"; import Accordion from "../../components/checkout/Accordion";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
const Paymentoption = () => { const Paymentoption = () => {
const navigation = useNavigation(); const navigation = useNavigation();
const [selected, setselected] = useState("Visa"); const [selected, setselected] = useState("Obananapay");
const [selectedFinal, setselectedFinal] = useState("Visa"); const [orderIdC, setorderIdC] = useState("Visa");
const toast = useToast();
const route = useRoute(); const route = useRoute();
const { product, shipMethod, payMethod, address } = route.params; const { product, shipMethod, payMethod, address, orderId } = route.params;
console.log("paymentmethod " + product);
const paymentMethods = [ const paymentMethods = [
{ {
type: "Credit Card", methodName: "Obananapay",
methods: [ // methodID: "visa123",
{
methodName: "Visa",
methodID: "visa123",
}, },
{ {
methodName: "MasterCard", methodName: "Cash On Delivery",
methodID: "mastercard456", // methodID: "visa123",
},
],
},
{
type: "Digital Wallet",
methods: [
{
methodName: "PayPal",
methodID: "paypal789",
},
{
methodName: "Apple Pay",
methodID: "applepay987",
},
],
},
{
type: "Bank Transfer",
methods: [
{
methodName: "Chase Bank",
methodID: "chase789",
},
],
}, },
// {
// type: "Obanana",
// methods: [
// {
// methodName: "Obananapay",
// // methodID: "visa123",
// },
// ],
// },
// {
// 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 // Add more payment method types and methods as needed
]; ];
return ( return (
@ -65,9 +72,10 @@ const Paymentoption = () => {
onPress={() => onPress={() =>
navigation.navigate("CheckOut", { navigation.navigate("CheckOut", {
shipMethod: shipMethod, shipMethod: shipMethod,
product, product: product,
payMethod: payMethod, payMethod: payMethod,
address, address: address,
orderId: orderId ? orderId : null,
}) })
} }
style={styles.backIcon} style={styles.backIcon}
@ -86,14 +94,22 @@ const Paymentoption = () => {
<View style={styles.footer}> <View style={styles.footer}>
<TouchableOpacity <TouchableOpacity
style={styles.footerBtn} style={styles.footerBtn}
onPress={() => onPress={() => {
toast.show("Successfully Changed Payment Method!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
navigation.navigate("CheckOut", { navigation.navigate("CheckOut", {
shipMethod: shipMethod, shipMethod: shipMethod,
product, product: product,
payMethod: selected ? selected : payMethod, payMethod: selected ? selected : payMethod,
address, address: address,
}) orderId: orderId,
} });
}}
> >
<Text style={styles.footerBtnText}>Confirm</Text> <Text style={styles.footerBtnText}>Confirm</Text>
</TouchableOpacity> </TouchableOpacity>
@ -142,6 +158,8 @@ const styles = StyleSheet.create({
backgroundColor: "#ff5e00", backgroundColor: "#ff5e00",
width: "90%", width: "90%",
paddingVertical: 10, paddingVertical: 10,
borderRadius: 20,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },

8
app/pages/checkout/ShippingOption.jsx
View File

@ -16,7 +16,7 @@ const ShippingOption = () => {
const navigation = useNavigation(); const navigation = useNavigation();
const [selected, setselected] = useState("J&T Express"); const [selected, setselected] = useState("J&T Express");
const route = useRoute(); const route = useRoute();
const { product, shipMethod, payMethod, address } = route.params; const { product, shipMethod, payMethod, address,orderId } = route.params;
const shippingMethods = [ const shippingMethods = [
{ {
type: "J&T Express", type: "J&T Express",
@ -39,6 +39,8 @@ const ShippingOption = () => {
product, product,
payMethod, payMethod,
address, address,
orderId:orderId
}) })
} }
style={styles.backIcon} style={styles.backIcon}
@ -79,6 +81,8 @@ const ShippingOption = () => {
product, product,
payMethod, payMethod,
address, address,
orderId:orderId
}) })
} }
> >
@ -130,6 +134,8 @@ const styles = StyleSheet.create({
width: "90%", width: "90%",
paddingVertical: 10, paddingVertical: 10,
justifyContent: "center", justifyContent: "center",
borderRadius:20,
alignItems: "center", alignItems: "center",
}, },
footerBtnText: { footerBtnText: {

604
app/pages/home/Cart.jsx
View File

@ -1,101 +1,556 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Dimensions, StyleSheet, Text, View } from "react-native"; import {
ActivityIndicator,
Dimensions,
RefreshControl,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
import CartCard from "../../components/cart/CartCard"; import CartCard from "../../components/cart/CartCard";
import Checkbox from "expo-checkbox";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import {
faArrowLeft,
faDeleteLeft,
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import DeleteConfirmationModal from "../../components/DeleteConfirmationModal";
// import { cart } from "../../constants/cart";
import { useIsFocused, useNavigation } from "@react-navigation/native";
import {
delete_order,
get_order,
get_orders_by_customer,
} from "../../services/api/controllers/order";
// import { user } from "../../constants/user";
import { ScrollView } from "react-native-gesture-handler";
import AsyncStorage from "@react-native-async-storage/async-storage";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height;
const cartList1 = [ const Cart = ({ cartList, refresh }) => {
{
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([]); const [cartSort, setcartSort] = useState([]);
const [all, setall] = useState(false);
const [shopSelected, setshopSelected] = useState([]);
const [quantityChange, setquantityChange] = useState([]);
const [load, setload] = useState(false);
const [cart, setcart] = useState([]);
const [totalPrice, settotalPrice] = useState(0);
const [error, setError] = useState(false);
const [checkoutItems, setCheckOutItems] = useState([]);
const [isModalVisible, setModalVisible] = useState(false);
const navigation = useNavigation();
const [refreshing, setRefreshing] = useState(true);
const [user, setuser] = useState([]);
const isFocused = useIsFocused();
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
if (pass !== null) {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(userDataArray[0]?._id);
get_orders_by_customer({
id: userDataArray[0]?._id,
})
.then((result) => {
if (result.error) {
setError(result.error);
} else {
setcart(result.data ?? []);
}
})
.catch((error) => {
setError(error.message);
setcart([]);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
// Simulate a delay for the purpose of this example
setload(true);
setTimeout(() => {
// After the refresh logic is complete, set refreshing state to false
setload(false);
}, 200); // 2000 milliseconds (2 seconds) delay for demonstration
}, []);
useEffect(() => {
if (quantityChange) {
setload(true);
get_orders_by_customer({
id: user[0]?._id,
})
.then((result) => {
// console.log("result" + result);
if (result.error) {
setError(result.error);
} else {
setcart(result.data);
setload(false);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}
}, [quantityChange]);
useEffect(() => {
console.log("focused on cart");
// setRefreshing(false);
if (isFocused) {
setload(true);
AsyncStorage.getItem("userData")
.then((pass) => {
if (pass !== null) {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(userDataArray[0]?._id);
get_orders_by_customer({
id: userDataArray[0]?._id,
})
.then((result) => {
if (result.error) {
// setRefreshing(true);
setload(false);
setError(result.error);
} else {
setcart(result.data ?? []);
setload(false);
}
})
.catch((error) => {
setError(error.message);
setcart([]);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
} else {
setcart([]);
setload(false);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}
}, [isFocused]);
const handleRefresh = () => {
setRefreshing(true);
setload(true);
console.log("refreshing");
// Simulate a delay for the purpose of this example
setTimeout(() => {
// After the refresh logic is complete, set refreshing state to false
setRefreshing(false);
setload(false);
}, 2000); // 2000 milliseconds (2 seconds) delay for demonstration
};
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
console.log(cartSort); console.log(cartSort);
// useEffect(() => {
// setcartSort(cartSort)
// }, [cartSort])
useEffect(() => { useEffect(() => {
const cartSorted = cartList.reduce((acc, item) => { // Fetch vendors and update the state
const shopId = item.shopId; }, []);
const existingShop = acc.find((shop) => shop.shopname === shopId); useEffect(() => {
// Fetch vendors and update the state
if (refreshing) {
setload(true);
get_orders_by_customer({
id: user[0]?._id,
})
.then((result) => {
// console.log("result" + result);
if (result.error) {
setError(result.error);
} else {
setcart(result.data);
setload(false);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}
}, [refreshing]);
const selectAll = () => {
setcartSort((prevCartList) => {
// Create a copy of the cartList to avoid mutating the original state
const newCartList = [...prevCartList];
// Set 'selected' property to true for all shops and products
newCartList.forEach((shop) => {
shop.selected = all;
shop.cartItems.forEach((product) => {
product.selected = all;
});
});
return newCartList;
});
};
// state variable 'all' triggers the useEffect
useEffect(() => {
selectAll();
}, [all]);
const shopLiked = (shopIndex) => {
setcartSort((prevCartList) => {
// copy of the cartList to avoid mutating the original state
const newCartList = [...prevCartList];
// Toggle the 'selected' property of the shop
newCartList[shopIndex].selected = !newCartList[shopIndex].selected;
// Toggle the 'selected' property of all products in the shop
newCartList[shopIndex].cartItems.forEach((product) => {
product.selected = newCartList[shopIndex].selected;
});
return newCartList;
});
};
const shopProdLike = (shopIndex, prodIndex) => {
setcartSort((prevCartList) => {
// Create a copy of the cartList to avoid mutating the original state
const newCartList = [...prevCartList];
// Toggle the 'selected' property of the product at the specified shopIndex and prodIndex
newCartList[shopIndex].cartItems[prodIndex].selected =
!newCartList[shopIndex].cartItems[prodIndex].selected;
// Set the shop's 'selected' property to false
newCartList[shopIndex].selected = false;
return newCartList;
});
};
const checkOut = () => {
// Create a new array 'checkOutItems' by filtering the cartSort
const checkOutItems = cartSort
?.map((shop) => {
const filteredCartItems = shop.cartItems.filter(
(item) => item.selected
);
return { ...shop, cartItems: filteredCartItems };
})
.filter((shop) => shop?.cartItems?.length > 0);
// Set the new state for 'checkOutItems'
setCheckOutItems(checkOutItems);
// Navigate only if there are items in the shops
if (checkOutItems?.length > 0) {
navigation.navigate("CheckOutMultiple", {
product: checkOutItems,
// orderId: result.data._id,
});
}
console.log(checkOutItems);
};
useEffect(() => {
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
const cartSorted = cart?.reverse()?.reduce((acc, item) => {
const shopId = item.items[0].vendor_id;
const shopName = item.items[0].vendor_name;
const existingShop = acc.find((shop) => shop.shopId === shopId);
console.log("shop: " + shopName);
if (item.status === "CART") {
if (existingShop) { if (existingShop) {
// Shop already exists, add the item to its cartItems array // Shop already exists, add the item to its cartItems array
existingShop.cartItems.push(item); existingShop.cartItems.push({ ...item, selected: false }); // Initialize selected to false
} else { } else {
// Shop doesn't exist, create a new shop object // Shop doesn't exist, create a new shop object with selected:false
acc.push({ shopname: shopId, cartItems: [item] }); acc.push({
shopname: shopName,
shopId: shopId,
cartItems: [{ ...item, selected: false }],
selected: false,
shippingFee: 0,
}); // Initialize selected to false
}
} }
return acc; return acc;
}, []); }, []);
setcartSort(cartSorted); setcartSort(cartSorted);
}, []); }, [cart]);
const calculateTotalPrice = () => {
let total = 0;
// Iterate through the cartSort to calculate the total price
cartSort?.forEach((shop) => {
let shopHasSelectedProducts = false; // Flag to check if the shop has selected products
shop.cartItems.forEach((product) => {
if (product.selected) {
// Calculate the total price for the selected product
let productTotal = 0;
if (product.promo > 0) {
// Apply promo discount if promo is greater than 0
productTotal =
product.regular_price *
(1 - product.promo / 100) *
product.quantity; // Assuming promo is in percentage (e.g., 30%)
} else {
// Otherwise, calculate total without promo discount
productTotal =
product.items[0].price * parseInt(product.items[0].quantity, 10);
}
// Add the product total to the overall total
total += productTotal;
// Set the flag to true if at least one product is selected in the shop
shopHasSelectedProducts = true;
}
});
if (shopHasSelectedProducts) {
// Add the shipping fee for the shop if it has selected products
total += shop.shippingFee;
}
});
return parseFloat(total)?.toLocaleString("en-US");
};
// const quantityChange = (shopIndex, prodIndex, qty) => {
// setcartSort((prevCartList) => {
// // Create a copy of the cartSort to avoid mutating the original state
// const newCartList = [...prevCartList];
// // Update the quantity of the product at the specified shopIndex and prodIndex
// newCartList[shopIndex].cartItems[prodIndex].quantity = qty;
// return newCartList;
// });
// };
const deleteItems = () => {
// setload(true);
setRefreshing(false);
toggleModal();
// setcartSort((prevCartList) => {
// // Filter out selected shops
// const newCartList = prevCartList.filter((shop) => !shop.selected);
// // Update cartItems for shops that are not selected
// newCartList.forEach((shop) => {
// shop.cartItems = shop.cartItems.filter((product) => !product.selected);
// });
// // Remove shops with no cartItems
// const finalCartList = newCartList.filter(
// (shop) => shop?.cartItems?.length > 0
// );
// return finalCartList;
// });
const deletePromises = [];
const newCartList = cartSort;
// Update cartItems for shops that are not selected
newCartList?.forEach((shop) => {
shop.cartItems = shop.cartItems.filter((product) => product.selected);
});
// Remove shops with no cartItems
// const finalCartList = newCartList.filter(
// (shop) => shop?.cartItems?.length > 0
// );
if (newCartList) {
newCartList.forEach((order) => {
// Loop through the items in each order's 'cartItems'
order.cartItems.forEach((cartItem) => {
// Construct the 'body' object for updating the order
console.log(
"I am here and the order cart items to delete is " + order.cartItems
);
// setload(true);
const orderId = cartItem._id;
// const orderName = cartItem.items[0].name;
const deletePromise = delete_order({
id: orderId,
});
deletePromises.push(deletePromise);
});
});
Promise.all(deletePromises)
.then((results) => {
// Handle results of updating orders
results.forEach((updateResult, index) => {
if (updateResult.status === 200) {
console.log(
// `Order update id: ${updateResult.data} orderName: ${product[index].cartItems[0].items[0].name} orderId: ${product[index].cartItems[0]._id} amount: ${result.data.attributes.amount}`
"deleted"
);
// setload(false);
// setamount(result.data.attributes.amount);
// setpaymessage(result.data.attributes.description);
// setModalVisible(!modalVisible);
} else {
// console.log("Update order failed for order with ID:", product[index].cartItems[0]._id);
("failed");
}
});
})
.catch((err) => {
console.error(err);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
console.log("heyyyy finally");
setRefreshing(true);
// setload(true);
// setload(false);
});
}
console.log(cartSort);
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerText}>CART</Text> <Text style={styles.headerText}>CART</Text>
</View> </View>
<View style={styles.actions}>
<View style={{ flexDirection: "row" }}>
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
<Text style={{ marginLeft: 10 }}>Select All</Text>
</View>
<TouchableOpacity
onPress={() => {
toggleModal();
}}
>
<FontAwesomeIcon icon={faTrash} />
</TouchableOpacity>
</View>
{!load ? (
<View style={styles.wrapper}> <View style={styles.wrapper}>
<MasonryList <MasonryList
data={cartSort} data={cartSort ?? []}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
style={styles.list} style={styles.list}
numColumns={1} numColumns={1}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
renderItem={({ item }) => <CartCard cart={item} />} onRefresh={() => handleRefresh()} // Add this line
// refreshing={refreshing} // Add this line
renderItem={({ item, i }) => (
<CartCard
all={all}
index={i}
shopLike={shopLiked}
shopProdLike={shopProdLike}
cart={item}
quantityChange={setquantityChange}
q={quantityChange}
/>
)}
containerStyle={styles.container1} containerStyle={styles.container1}
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
</View> </View>
) : (
<ActivityIndicator size="large" color="#ffaa00" />
)}
<View style={styles.bottom}>
<View style={styles.details}>
<View style={styles.detailsTop}>
<Text style={styles.detailsTopText}>Total Price : </Text>
<Text style={styles.detailsTopTextPrice}>
{" "}
₱{calculateTotalPrice()}
</Text>
</View>
</View>
<TouchableOpacity style={styles.checkout} onPress={() => checkOut()}>
<Text style={styles.checkoutText}>CHECKOUT</Text>
</TouchableOpacity>
</View>
<DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={deleteItems}
/>
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
padding: 10, paddingTop: 10,
height: "100%", height: "100%",
width: width, width: width,
// height:height -70
}, },
header: { header: {
width: "100%", width: "100%",
top: 0, top: 0,
height: 50, height: 40,
marginLeft:15 marginLeft: 15,
}, },
container1: { container1: {
width: "100%", width: "100%",
}, },
actions: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
paddingTop: 0,
},
content: { content: {
width: "100%", width: "100%",
alignItems: "center", alignItems: "center",
@ -116,13 +571,17 @@ const styles = StyleSheet.create({
}, },
wrapper: { wrapper: {
width: "100%", width: "100%",
justifyContent: "center", height: "90%",
alignItems: "center", // justifyContent: "center",
// alignItems: "center",
padding: 5,
paddingBottom: 60,
}, },
list: { list: {
width: "100%", width: "100%",
justifyContent: "center", height: "90%",
alignItems: "center", // justifyContent: "center",
// alignItems: "center",
}, },
card: { card: {
width: "100%", width: "100%",
@ -149,5 +608,48 @@ const styles = StyleSheet.create({
color: "#797979", color: "#797979",
marginTop: 10, marginTop: 10,
}, },
bottom: {
position: "absolute",
bottom: 0,
backgroundColor: "#fff",
width: "100%",
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
borderTopWidth: 1,
borderColor: "#dddd",
},
details: {
padding: 10,
},
detailsTop: {
// padding:10,
flexDirection: "row",
},
detailsTopText: {
color: "#363636",
fontWeight: "600",
fontSize: 14,
letterSpacing: 0.5,
},
detailsTopTextPrice: {
color: "#ffaa00",
fontWeight: "600",
fontSize: 16,
letterSpacing: 0.5,
},
checkout: {
backgroundColor: "#ffaa00",
width: 150,
justifyContent: "center",
alignItems: "center",
padding: 15,
},
checkoutText: {
color: "#fff",
fontWeight: "600",
fontSize: 16,
letterSpacing: 0.7,
},
}); });
export default Cart; export default Cart;

368
app/pages/home/Cart2.jsx Normal file
View File

@ -0,0 +1,368 @@
import React, { useEffect, useReducer, useState } from "react";
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import CartCard from "../../components/cart/CartCard";
import Checkbox from "expo-checkbox";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import {
faArrowLeft,
faDeleteLeft,
faTrash,
} from "@fortawesome/free-solid-svg-icons";
import DeleteConfirmationModal from "../../components/DeleteConfirmationModal";
const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height;
const Cart = ({ cartList }) => {
// Reducer function to handle cart actions
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
const cartReducer = (state, action) => {
switch (action.type) {
case "INITIALIZE_CART":
return action.payload;
case "TOGGLE_ALL":
const all = !state.all;
const updatedCart = state.cart.map((shop) => ({
...shop,
selected: all,
cartItems: shop.cartItems.map((item) => ({
...item,
selected: all,
})),
}));
return { ...state, all, cart: updatedCart };
case "TOGGLE_SHOP":
const { shopIndex1 } = action.payload;
const updatedCartWithShopToggle = [...state.cart];
updatedCartWithShopToggle[shopIndex1].selected =
!updatedCartWithShopToggle[shopIndex1].selected;
updatedCartWithShopToggle[shopIndex1].cartItems =
updatedCartWithShopToggle[shopIndex1].cartItems.map((item) => ({
...item,
selected: updatedCartWithShopToggle[shopIndex1].selected,
}));
return { ...state, cart: updatedCartWithShopToggle };
case "TOGGLE_PRODUCT":
const { shopIndex2, prodIndex } = action.payload;
const updatedCartWithProductToggle = [...state.cart];
updatedCartWithProductToggle[shopIndex2].cartItems[prodIndex].selected =
!updatedCartWithProductToggle[shopIndex2].cartItems[prodIndex]
.selected;
updatedCartWithProductToggle[shopIndex2].selected = false;
return { ...state, cart: updatedCartWithProductToggle };
case "UPDATE_QUANTITY":
const {
shopIndex: shopIdx,
prodIndex: productIdx,
qty,
} = action.payload;
const updatedCartWithQuantity = [...state.cart];
// updatedCartWithQuantity[shopIdx].cartItems[productIdx].quantity = qty;
return { ...state, cart: updatedCartWithQuantity };
case "DELETE_ITEMS":
const updatedCartAfterDelete = state.cart
.filter((shop) => !shop.selected)
.map((shop) => ({
...shop,
cartItems: shop.cartItems.filter((item) => !item.selected),
}));
toggleModal();
const finalCartList = updatedCartAfterDelete.filter(
(shop) => shop.cartItems.length > 0
);
return { ...state, cart: finalCartList };
default:
return state;
}
};
const initialState = {
all: false,
cart: [],
};
const [state, dispatch] = useReducer(cartReducer, initialState);
const calculateTotalPrice = () => {
let total = 0;
// Iterate through the cartSort to calculate the total price
// cartSort.forEach((shop) => {
// let shopHasSelectedProducts = false; // Flag to check if the shop has selected products
// shop.cartItems.forEach((product) => {
// if (product.selected) {
// // Calculate the total price for the selected product
// let productTotal = 0;
// if (product.promo > 0) {
// // Apply promo discount if promo is greater than 0
// productTotal =
// product.price * (1 - product.promo / 100) * product.quantity; // Assuming promo is in percentage (e.g., 30%)
// } else {
// // Otherwise, calculate total without promo discount
// productTotal = product.price * product.quantity;
// }
// // Add the product total to the overall total
// total += productTotal;
// // Set the flag to true if at least one product is selected in the shop
// shopHasSelectedProducts = true;
// }
// });
// if (shopHasSelectedProducts) {
// // Add the shipping fee for the shop if it has selected products
// total += shop.shippingFee;
// }
// });
return total.toFixed(2);
};
useEffect(() => {
// Initialize the cart state when cartList changes
const cartSorted = cartList.reduce((acc, item) => {
const shopId = item.shopId;
const existingShop = acc.find((shop) => shop.shopname === shopId);
if (existingShop) {
existingShop.cartItems.push({ ...item, selected: false });
} else {
acc.push({
shopname: shopId,
cartItems: [{ ...item, selected: false }],
selected: false,
shippingFee: 50,
});
}
return acc;
}, []);
dispatch({
type: "INITIALIZE_CART",
payload: { all: false, cart: cartSorted },
});
}, [cartList]);
// Rest of your component remains the same, but use 'state' instead of 'cartSort'
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>CART</Text>
</View>
<View style={styles.actions}>
<View style={{ flexDirection: "row" }}>
<Checkbox
value={state.all}
onValueChange={() => dispatch({ type: "TOGGLE_ALL" })}
/>
<Text style={{ marginLeft: 10 }}>Select All</Text>
</View>
<TouchableOpacity
onPress={() => {
toggleModal();
}}
>
<FontAwesomeIcon icon={faTrash} />
</TouchableOpacity>
</View>
<View style={styles.wrapper}>
<MasonryList
data={state.cart}
keyExtractor={(item) => item.shopname}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item, i }) => (
<CartCard
all={state.all}
index={i}
shopLike={() =>
dispatch({ type: "TOGGLE_SHOP", payload: { shopIndex1: i } })
}
shopProdLike={(prodIndex) =>
dispatch({
type: "TOGGLE_PRODUCT",
payload: { shopIndex2: i, prodIndex },
})
}
cart={item}
quantityChange={(qty) =>
dispatch({
type: "UPDATE_QUANTITY",
payload: { shopIndex: i, prodIndex: i, qty },
})
}
/>
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
</View>
<View style={styles.bottom}>
<View style={styles.details}>
<View style={styles.detailsTop}>
<Text style={styles.detailsTopText}>Total Price : </Text>
<Text style={styles.detailsTopTextPrice}>
{" "}
₱{calculateTotalPrice()}
</Text>
</View>
</View>
<TouchableOpacity style={styles.checkout} >
<Text style={styles.checkoutText}>CHECKOUT</Text>
</TouchableOpacity>
</View>
<DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={() => dispatch({ type: "DELETE_ITEMS" })}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
paddingTop: 10,
height: "100%",
width: width,
// height:height -70
},
header: {
width: "100%",
top: 0,
height: 40,
marginLeft: 15,
},
container1: {
width: "100%",
},
actions: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
paddingTop: 0,
},
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%",
height: "90%",
justifyContent: "center",
alignItems: "center",
padding: 5,
},
list: {
width: "100%",
height: "90%",
// 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,
},
bottom: {
position: "absolute",
bottom: 0,
backgroundColor: "#fff",
width: "100%",
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
borderTopWidth: 1,
borderColor: "#dddd",
},
details: {
padding: 10,
},
detailsTop: {
// padding:10,
flexDirection: "row",
},
detailsTopText: {
color: "#363636",
fontWeight: "600",
fontSize: 14,
letterSpacing: 0.5,
},
detailsTopTextPrice: {
color: "#ffaa00",
fontWeight: "600",
fontSize: 16,
letterSpacing: 0.5,
},
checkout: {
backgroundColor: "#ffaa00",
width: 150,
justifyContent: "center",
alignItems: "center",
padding: 15,
},
checkoutText: {
color: "#fff",
fontWeight: "600",
fontSize: 16,
letterSpacing: 0.7,
},
});
export default Cart;

20
app/pages/home/Chat.jsx
View File

@ -1,10 +1,18 @@
import React from 'react' import React from "react";
import { Text, View } from 'react-native' import { Dimensions, Image, Text, View } from "react-native";
import coming from "../.././../assets/comingsoon.png";
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;
const Chat = () => { const Chat = () => {
return ( return (
<View><Text>Chat</Text></View> <View>
) <Image
} style={{ width: width, height: height - 60, resizeMode: "cover" }}
source={coming}
/>
</View>
);
};
export default Chat export default Chat;

321
app/pages/home/Home.jsx
View File

@ -1,40 +1,276 @@
import React from "react"; import React, { useEffect, useRef, useState, memo } from "react";
import { import {
StyleSheet, StyleSheet,
AppRegistry,
Text,
View, View,
Image, ScrollView,
Text,
TouchableOpacity, TouchableOpacity,
Animated,
RefreshControl,
} from "react-native"; } from "react-native";
import ProductList from "../../components/main/home/ProductList"; import ProductList from "../../components/main/home/ProductList";
import TopCategories from "../../components/main/home/TopCategories"; import TopCategories from "../../components/main/home/TopCategories";
import SwiperCon from "../../components/main/home/Swiper"; import SwiperCon from "../../components/main/home/Swiper";
import Header from "../../components/main/Header"; import Header from "../../components/main/Header";
import { useNavigation } from "@react-navigation/native"; import { useIsFocused, useNavigation } from "@react-navigation/native";
import TopShops from "../../components/main/home/TopShops"; import TopShops from "../../components/main/home/TopShops";
import ShopList from "../../components/main/home/ShopList"; import ShopList from "../../components/main/home/ShopList";
const Home = ({ tab }) => { import CardSkeletonLoading from "../../layout/skeleton/cardSkeleton";
import FeaturedProducts from "../../components/main/home/FeaturedProducts";
import BestDeals from "../../components/main/home/BestDeals";
const Home = ({
product,
prodIsLoading,
vendors,
scrollTop,
refreshing,
setRefreshing,
}) => {
const navigation = useNavigation(); const navigation = useNavigation();
const scrollViewRef = useRef(null);
// const prodscrollViewRef = useRef(null);
const [tab, setSwitchTab] = useState("prod");
const [isLoadingLayout, setIsLoadingLayout] = useState(true);
const [focused, setfocused] = useState(false);
const [focused1, setfocused1] = useState(0);
const [item, setitem] = useState(20);
const [load, setload] = useState(false);
const [item1, setitem1] = useState(20);
const [isEndReached, setEndReached] = useState(false);
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 300;
if (isAtEnd) {
setEndReached(true);
console.log("end here");
if (tab === "prod") {
setitem(item + 15);
} else {
setitem1(item1 + 15);
}
} else {
setEndReached(false);
}
};
const isFocused = useIsFocused();
useEffect(() => {
if (isEndReached) {
setload(true);
const timer = setTimeout(() => {
setload(false);
}, 200);
// Cleanup the timer if the component unmounts
return () => clearTimeout(timer);
}
}, [isEndReached]);
useEffect(() => {
// Simulate a delay of 50 milliseconds
setfocused(false);
if (isLoadingLayout) {
const timer = setTimeout(() => {
setIsLoadingLayout(!isLoadingLayout);
setIsLoadingLayout(false); // Set isLoadingLayout to false after 50ms
// Set isLoadingLayout to false after 50ms
}, 500);
// Cleanup the timer if the component unmounts
return () => clearTimeout(timer);
}
}, []);
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);
};
const backgroundColor = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: ["#ffaa00", "#ffaa00"], // Adjust colors as needed
});
useEffect(() => {
setfocused(isFocused);
}, [isFocused]);
useEffect(() => {
if (focused) {
const unsubscribe = navigation.addListener("tabPress", (e) => {
if (scrollViewRef.current) {
scrollViewRef.current.scrollTo({
y: 0,
animated: true,
});
}
});
return unsubscribe;
}
}, [focused, navigation]);
const onRefresh = () => {
setRefreshing(true);
setitem(20);
setitem1(20);
// Simulating refresh delay, you can replace this with your actual refresh logic
// setTimeout(() => {
// setRefreshing(false);
// }, 1000);
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header} onPress={() => navigation.navigate("Search")}> {/* <View > */}
<Header /> <View
style={styles.header}
onPress={() =>
navigation.navigate("Search", { prodd: product ? product : null })
}
>
<Header product={product ?? null} />
</View> </View>
<ScrollView
ref={scrollViewRef}
onScroll={handleScroll}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
// Add additional props for styling or behavior if needed
/>
}
>
<View style={styles.wrapper}> <View style={styles.wrapper}>
<SwiperCon /> <SwiperCon />
</View> </View>
{tab === "prod" ? (
<> {prodIsLoading ? (
<TopCategories /> <View style={styles.skeletonCon}>
<ProductList /> <CardSkeletonLoading />
</> </View>
) : ( ) : (
<> <>
<TopShops /> {tab === "prod" ? (
<ShopList /> <View>
<TopCategories />
{/* <FeaturedProducts product={product ?? []} /> */}
{/* <BestDeals product={product ?? []} /> */}
<ProductList
refreshing={refreshing}
product={product ?? []}
isEndReached={isEndReached}
item={item}
/>
<Text>Load</Text>
</View>
) : (
<>
{/* <TopShops vendors={vendors ?? []} /> */}
<ShopList
product={product}
vendors={vendors ?? []}
item={item1}
refreshing={refreshing}
isEndReached={isEndReached}
/>
</> </>
)} )}
</>
)}
</ScrollView>
<View style={styles.tabsCon}>
<View style={styles.tabs}>
<TouchableOpacity
style={[
tab === "ven" ? styles.tab : styles.tabActive,
{
backgroundColor: tab === "prod" ? "#ffaa00" : "transparent",
transform: [
{
translateX: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-5, 5], // Adjust the bounce distance
}),
},
],
},
]}
onPress={() => handleTabPress("prod")}
activeOpacity={0.5}
>
<Text
style={[
styles.tabText,
{
color: tab === "prod" ? "#fff" : "#000",
},
]}
>
Products
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
tab === "prod" ? styles.tab : styles.tabActive,
{
backgroundColor: tab === "ven" ? "#ffaa00" : "transparent",
transform: [
{
translateX: animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-5, 5], // Adjust the bounce distance
}),
},
],
},
]}
onPress={() => {
handleTabPress("ven");
if (scrollViewRef.current) {
scrollViewRef.current.scrollTo({
y: 0,
animated: true,
});
}
}}
activeOpacity={0.5}
>
<Text
style={[
styles.tabText,
{
color: tab === "ven" ? "#fff" : "#000",
},
]}
>
Vendor
</Text>
</TouchableOpacity>
</View>
</View>
{/* </View> */}
{load ? <Text>loading...</Text> : null}
</View> </View>
); );
}; };
@ -42,25 +278,26 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: "#fff", backgroundColor: "#fff",
// alignItems: "center",
// justifyContent: "center",
width: "100%", width: "100%",
// height: "87%", },
// paddingTop:15 skeletonCon: {
marginLeft: 5,
justifyContent: "center",
}, },
wrapper: { wrapper: {
width: "100%", width: "100%",
height: 150, height: 150,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
// backgroundColor: "#ffaa00",
}, },
header: { header: {
position: "fixed", // position: "absolute",
width: "100%", width: "100%",
top: 0, top: 0,
marginBottom: 5, marginBottom: 5,
zIndex: 20,
}, },
img: { img: {
width: 400, width: 400,
height: 200, height: 200,
@ -73,8 +310,48 @@ const styles = StyleSheet.create({
height: 80, height: 80,
width: "100%", width: "100%",
position: "absolute", position: "absolute",
bottom: 100, bottom: 50,
}, },
tab: {}, tab: {},
tabsCon: {
height: 80,
width: "100%",
position: "absolute",
justifyContent: "center",
alignItems: "center",
bottom: 15,
},
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 Home; export default Home;
// export default memo(Home);

9
app/pages/home/Notification.jsx
View File

@ -5,6 +5,7 @@ import {
StyleSheet, StyleSheet,
useWindowDimensions, useWindowDimensions,
Dimensions, Dimensions,
ScrollView,
} from "react-native"; } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
@ -34,7 +35,7 @@ const Notification = () => {
<View style={styles.header}> <View style={styles.header}>
<Text style={styles.headerText}>NOTIFICATIONS</Text> <Text style={styles.headerText}>NOTIFICATIONS</Text>
</View> </View>
<View style={styles.wrapper}> <ScrollView style={styles.wrapper}>
<MasonryList <MasonryList
data={notif} data={notif}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
@ -52,7 +53,7 @@ const Notification = () => {
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
</View> </ScrollView>
</View> </View>
); );
}; };
@ -81,8 +82,8 @@ const styles = StyleSheet.create({
}, },
wrapper: { wrapper: {
width: "100%", width: "100%",
justifyContent: "center", // justifyContent: "center",
alignItems: "center", // alignItems: "center",
}, },
list: { list: {
width: "100%", width: "100%",

459
app/pages/home/Profile.jsx
View File

@ -1,21 +1,20 @@
import { import {
faAngleRight,
faArrowCircleRight,
faArrowRight,
faBagShopping, faBagShopping,
faBox, faBox,
faCarSide, faCarSide,
faCircleQuestion, faCircleQuestion,
faClock, faClock,
faHeart, faHeart,
faI,
faKey,
faRankingStar, faRankingStar,
faTruck, faTruck,
faUserGear, faUserGear,
faWallet, faWallet,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useIsFocused, useNavigation } from "@react-navigation/native";
import React from "react"; import React, { useEffect, useState } from "react";
import { import {
View, View,
Text, Text,
@ -29,7 +28,9 @@ import {
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
import Card from "../../components/profile/Card"; import Card from "../../components/profile/Card";
import { faStar } from "@fortawesome/free-solid-svg-icons"; import { faStar } from "@fortawesome/free-solid-svg-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";
import SelectDropdown from "react-native-select-dropdown";
import { get_orders_by_customer } from "../../services/api/controllers/order";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
const settings = [ const settings = [
@ -38,21 +39,21 @@ const settings = [
label: "My Purchases", label: "My Purchases",
nav: "MyPurchases", nav: "MyPurchases",
}, },
{ // {
icon: <FontAwesomeIcon icon={faWallet} color={"#777777"} size={25} />, // icon: <FontAwesomeIcon icon={faWallet} color={"#777777"} size={25} />,
label: "My Wallet", // label: "My Wallet",
nav: "MyWallet", // nav: "MyWallet",
}, // },
{ {
icon: <FontAwesomeIcon icon={faHeart} color={"#777777"} size={25} />, icon: <FontAwesomeIcon icon={faHeart} color={"#777777"} size={25} />,
label: "My Favorites", label: "My Favorites",
nav: "MyFavorites", nav: "MyFavorites",
}, },
{ // {
icon: <FontAwesomeIcon icon={faClock} color={"#777777"} size={25} />, // icon: <FontAwesomeIcon icon={faClock} color={"#777777"} size={25} />,
label: "View History", // label: "View History",
nav: "MyPurchases", // nav: "ViewHistory",
}, // },
{ {
icon: <FontAwesomeIcon icon={faUserGear} color={"#777777"} size={25} />, icon: <FontAwesomeIcon icon={faUserGear} color={"#777777"} size={25} />,
label: "Account Settings", label: "Account Settings",
@ -65,11 +66,264 @@ const settings = [
label: "Help Center", label: "Help Center",
nav: "HelpCenter", nav: "HelpCenter",
}, },
{
icon: <FontAwesomeIcon icon={faKey} color={"#777777"} size={25} />,
label: "Privacy Policy",
nav: "Privacy",
},
]; ];
const Profile = () => { const Profile = ({ userLoggedin }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const countries = ["Egypt", "Canada", "Australia", "Ireland"];
const [user, setuser] = useState([]);
const [purchase, setpurchase] = useState([]);
const [error, setError] = useState(null);
const [toShip, settoship] = useState(0);
const [toPay, settopay] = useState(0);
const [toReceive, settoreceived] = useState(0);
const [completed, setcomplete] = useState(0);
const [isLoggedin, setisLoggedin] = useState(false);
const isFocused = useIsFocused();
// AsyncStorage.getItem("userData")
// .then((pass) => {
// const userDataArray = JSON.parse(pass);
// setuser(userDataArray);
// })
// .catch((error) => {
// console.log(error + "weeewwww");
// });
useEffect(() => {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
setisLoggedin(true);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, [isFocused]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
if (pass !== null) {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_orders_by_customer({
id: userDataArray[0]?._id,
})
.then((result) => {
console.log("result" + result.data);
if (result.error) {
setError(result.error);
} else {
setpurchase(result.data);
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
setcomplete(
result.data?.filter(
(item) =>
item.status === "COMPLETED" || item.status === "Completed"
) ?? []
);
settoreceived(
result.data?.filter(
(item) =>
item.status === "TO RECEIVE" ||
item.status === "To Receive"
) ?? []
);
settopay(
result.data?.filter(
(item) =>
item.status === "TO PAY" || item.status === "To Pay"
) ?? []
);
settoship(
result.data?.filter(
(item) =>
item.status === "TO SHIP" || item.status === "To Ship"
) ?? []
);
console.log(purchaseSorted);
setload(false);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
if (userLoggedin == true) {
AsyncStorage.getItem("userData")
.then((pass) => {
if (pass !== null) {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_orders_by_customer({
id: userDataArray[0]?._id,
})
.then((result) => {
console.log("result" + result.data);
if (result.error) {
setError(result.error);
} else {
setpurchase(result.data);
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
setcomplete(
result.data?.filter(
(item) =>
item.status === "COMPLETED" ||
item.status === "Completed"
) ?? []
);
settoreceived(
result.data?.filter(
(item) =>
item.status === "TO RECEIVE" ||
item.status === "To Receive"
) ?? []
);
settopay(
result.data?.filter(
(item) =>
item.status === "TO PAY" || item.status === "To Pay"
) ?? []
);
settoship(
result.data?.filter(
(item) =>
item.status === "TO SHIP" || item.status === "To Ship"
) ?? []
);
console.log(purchaseSorted);
setload(false);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
} else if (userLoggedin == false) {
setpurchase([]);
setuser([]);
}
}, [userLoggedin]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
console.log("prof loaded" + userLoggedin);
if (user) {
console.log("prof loaded here");
AsyncStorage.getItem("userData")
.then((pass) => {
if (pass !== null) {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_orders_by_customer({
id: userDataArray[0]?._id,
})
.then((result) => {
console.log("result" + result.data);
if (result.error) {
setError(result.error);
} else {
setpurchase(result.data);
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
setcomplete(
result.data?.filter(
(item) =>
item.status === "COMPLETED" ||
item.status === "Completed"
) ?? []
);
settoreceived(
result.data?.filter(
(item) =>
item.status === "TO RECEIVE" ||
item.status === "To Receive"
) ?? []
);
settopay(
result.data?.filter(
(item) =>
item.status === "TO PAY" || item.status === "To Pay"
) ?? []
);
settoship(
result.data?.filter(
(item) =>
item.status === "TO SHIP" || item.status === "To Ship"
) ?? []
);
console.log(purchaseSorted);
setload(false);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
} else if (!user) {
setpurchase([]);
setuser([]);
}
}, [isFocused]);
const shippingAddress = user[0]?.address?.find(
(address) => address.shipping === true
);
// const toShip =
// purchase?.filter(
// (item) => item.status === "TO SHIP" || item.status === "To Ship"
// ) ?? [];
// const toReceive =
// purchase?.filter(
// (item) => item.status === "TO RECEIVE" || item.status === "To Receive"
// ) ?? [];
// const toPay =
// purchase?.filter(
// (item) => item.status === "TO PAY" || item.status === "To Pay"
// ) ?? [];
// const completed =
// purchase?.filter(
// (item) => item.status === "COMPLETED" || item.status === "Completed"
// ) ?? [];
console.log(user);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.title}> <View style={styles.title}>
@ -78,60 +332,143 @@ const Profile = () => {
<View style={styles.wrapper}> <View style={styles.wrapper}>
<View style={styles.header}> <View style={styles.header}>
<View style={styles.headerWrap}> <View style={styles.headerWrap}>
{user.length !== 0 ? (
<View style={styles.headerTop}> <View style={styles.headerTop}>
<Image <Image
style={{ style={{
width: 40, width: 60,
height: 40, height: 60,
resizeMode: "cover", resizeMode: "cover",
borderRadius: 100, borderRadius: 100,
marginLeft: 20, marginLeft: 20,
}} }}
source={{ source={{
uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU", uri:
user[0]?.customer_image ??
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
}} }}
/> />
<View style={styles.headerTopLeft}> <View style={styles.headerTopLeft}>
<Text style={styles.headerTopText}>Username</Text>
<View style={styles.details}> <View style={styles.details}>
<Text style={styles.headerTopSubText}>Delivery Address:</Text> <Text style={styles.headerTopSubText}>Username: </Text>
<Text style={styles.headerTopText}>
{user[0]?.first_name} {user[0]?.last_name}
</Text>
</View>
<View style={styles.details}>
<Text style={styles.headerTopSubText}>
Delivery Address:
</Text>
<Text style={styles.headerTopSubTextP}> <Text style={styles.headerTopSubTextP}>
Blk 2 Wall St. Harang, Makati City {shippingAddress !== null
? `${
shippingAddress?.address_1 +
" " +
shippingAddress?.address_2 +
", " +
shippingAddress?.city +
" " +
shippingAddress?.province +
" "
}${
shippingAddress?.country === "PH"
? "Philippines"
: shippingAddress?.country
}`
: "select address"}
</Text> </Text>
</View> </View>
</View> </View>
</View> </View>
) : (
<View style={styles.headerToplogin}>
<TouchableOpacity
style={styles.loginBtn}
onPress={() => navigation.navigate("Login")}
>
<Text style={styles.loginBtnTxt}>LOGIN</Text>
</TouchableOpacity>
</View>
)}
<View style={styles.headerBottom}> <View style={styles.headerBottom}>
<View style={styles.headerBottomTitle}> <View style={styles.headerBottomTitle}>
<Text style={styles.headerBottomText}>My Orders</Text> <Text style={styles.headerBottomText}>My Orders</Text>
</View> </View>
<View style={styles.headerBottomWrap}> <View style={styles.headerBottomWrap}>
<View style={styles.headerBottomCard}> <TouchableOpacity
style={styles.headerBottomCard}
disabled={isLoggedin ? false : true}
onPress={() => {
navigation.navigate("MyPurchases", { tab: "ToPay" });
}}
>
<View style={styles.badge}>
<Text style={{ color: "#fff", fontSize: 10 }}>
{toPay?.length > 99 ? "99+" : toPay?.length ?? 0}
</Text>
</View>
<FontAwesomeIcon <FontAwesomeIcon
icon={faWallet} icon={faWallet}
color={"#ffaa00"} color={"#ffaa00"}
size={25} size={28}
/> />
<Text style={styles.headerBottomCardText}>To Pay</Text> <Text style={styles.headerBottomCardText}>To Pay</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.headerBottomCard}
disabled={isLoggedin ? false : true}
onPress={() => {
navigation.navigate("MyPurchases", { tab: "ToShip" });
}}
>
<View style={styles.badge}>
<Text style={{ color: "#fff", fontSize: 10 }}>
{toShip?.length > 99 ? "99+" : toShip?.length ?? 0}
</Text>
</View> </View>
<View style={styles.headerBottomCard}> <FontAwesomeIcon icon={faBox} color={"#ffaa00"} size={28} />
<FontAwesomeIcon icon={faBox} color={"#ffaa00"} size={25} />
<Text style={styles.headerBottomCardText}>To Ship</Text> <Text style={styles.headerBottomCardText}>To Ship</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.headerBottomCard}
disabled={isLoggedin ? false : true}
onPress={() => {
navigation.navigate("MyPurchases", { tab: "ToReceive" });
}}
>
<View style={styles.badge}>
<Text style={{ color: "#fff", fontSize: 10 }}>
{toReceive?.length > 99 ? "99+" : toReceive?.length ?? 0}
</Text>
</View> </View>
<View style={styles.headerBottomCard}> <FontAwesomeIcon icon={faTruck} color={"#ffaa00"} size={28} />
<FontAwesomeIcon icon={faTruck} color={"#ffaa00"} size={25} />
<Text style={styles.headerBottomCardText}>To Receive</Text> <Text style={styles.headerBottomCardText}>To Receive</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.headerBottomCard}
disabled={isLoggedin ? false : true}
onPress={() => {
navigation.navigate("MyPurchases", { tab: "Completed" });
}}
>
<View style={styles.badge}>
<Text style={{ color: "#fff", fontSize: 10 }}>
{completed?.length > 99 ? "99+" : completed?.length ?? 0}
</Text>
</View> </View>
<View style={styles.headerBottomCard}> <FontAwesomeIcon icon={faStar} color={"#ffaa00"} size={28} />
<FontAwesomeIcon icon={faStar} color={"#ffaa00"} size={25} />
<Text style={styles.headerBottomCardText}>To Rate</Text> <Text style={styles.headerBottomCardText}>To Rate</Text>
</View> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</View> </View>
{/* <ScrollView style={styles.content1} > */} {/* <ScrollView style={styles.content1} > */}
<View style={styles.content}> <View style={styles.content}>
{user || user !== [] || user !== null || user !== "" ? (
<>
<View style={styles.headerBottomTitle}> <View style={styles.headerBottomTitle}>
<Text style={styles.contentTopText}>Settings</Text> <Text style={styles.contentTopText}>Settings</Text>
</View> </View>
@ -141,11 +478,17 @@ const Profile = () => {
style={styles.list} style={styles.list}
numColumns={3} numColumns={3}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
renderItem={({ item,i }) => <Card key={i} cart={item} />} renderItem={({ item, i }) => <Card key={i} cart={item} />}
containerStyle={styles.container1} containerStyle={styles.container1}
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
</>
) : (
<View style={styles.headerBottomTitle}>
<Text style={styles.contentTopText}>Settings</Text>
</View>
)}
</View> </View>
{/* </ScrollView> */} {/* </ScrollView> */}
</View> </View>
@ -161,7 +504,7 @@ const styles = StyleSheet.create({
header: { header: {
// position: "fixed", // position: "fixed",
width: "100%", width: "100%",
height: 180, height: 260,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
borderColor: "#f0f0f0dd", borderColor: "#f0f0f0dd",
@ -171,9 +514,8 @@ const styles = StyleSheet.create({
title: { title: {
backgroundColor: "#ffaa00", backgroundColor: "#ffaa00",
width: "100%", width: "100%",
// height: 30, top: 10,
justifyContent: "center", justifyContent: "center",
// alignItems: "center",
padding: 10, padding: 10,
paddingLeft: 20, paddingLeft: 20,
}, },
@ -182,13 +524,35 @@ const styles = StyleSheet.create({
color: "#fff", color: "#fff",
fontWeight: "600", fontWeight: "600",
}, },
loginBtn: {
backgroundColor: "#ffaa00",
paddingHorizontal: 35,
paddingVertical: 10,
},
loginBtnTxt: {
color: "#fff",
fontWeight: "600",
letterSpacing: 0.8,
},
badge: {
position: "absolute",
top: -10,
right: -10,
zIndex: 20,
height: 20,
justifyContent: "center",
alignItems: "center",
width: 20,
color: "#ff2626",
backgroundColor: "#ff2626",
borderRadius: 20,
},
headerWrap: { headerWrap: {
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
width: "90%", width: "90%",
// height: "100%",
// flexDirection: "row",
}, },
headerTop: { headerTop: {
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
@ -197,7 +561,9 @@ const styles = StyleSheet.create({
}, },
headerTopText: { headerTopText: {
// padding:10, // padding:10,
color: "#000000", textTransform: "capitalize",
letterSpacing: 0.7,
color: "#2c2c2c",
fontWeight: "600", fontWeight: "600",
}, },
headerTopLeft: { headerTopLeft: {
@ -213,13 +579,14 @@ const styles = StyleSheet.create({
headerTopSubText: { headerTopSubText: {
color: "#666666", color: "#666666",
fontWeight: "600", fontWeight: "600",
fontSize: 9, fontSize: 12,
}, },
headerTopSubTextP: { headerTopSubTextP: {
color: "#464646", color: "#464646",
fontWeight: "400", fontWeight: "400",
fontSize: 9, fontSize: 12,
margin: 5, margin: 5,
width: "65%",
}, },
headerBottom: { headerBottom: {
marginVertical: 15, marginVertical: 15,
@ -238,7 +605,7 @@ const styles = StyleSheet.create({
// padding:10, // padding:10,
color: "#333333", color: "#333333",
fontWeight: "600", fontWeight: "600",
fontSize: 10, fontSize: 13,
textAlign: "left", textAlign: "left",
marginLeft: 20, marginLeft: 20,
}, },
@ -247,7 +614,7 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
width: "70%", width: "70%",
flexDirection: "row", flexDirection: "row",
marginTop: 10, marginTop: 18,
}, },
headerBottomCard: { headerBottomCard: {
justifyContent: "center", justifyContent: "center",
@ -256,7 +623,7 @@ const styles = StyleSheet.create({
headerBottomCardText: { headerBottomCardText: {
color: "#5e5e5e", color: "#5e5e5e",
fontWeight: "400", fontWeight: "400",
fontSize: 9, fontSize: 11,
marginTop: 5, marginTop: 5,
}, },
footer: { footer: {
@ -277,8 +644,8 @@ const styles = StyleSheet.create({
}, },
wrapper: { wrapper: {
width: "100%", width: "100%",
justifyContent: "center", // justifyContent: "center",
alignItems: "center", // alignItems: "center",
height: "100%", height: "100%",
}, },
content: { content: {

658
app/pages/home/main.jsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { import {
Animated, Animated,
Dimensions, Dimensions,
@ -12,45 +12,458 @@ import {
} from "react-native"; } from "react-native";
import BottomNav from "../../components/main/BottomNav"; import BottomNav from "../../components/main/BottomNav";
import Header from "../../components/main/Header"; import Header from "../../components/main/Header";
import { get_all_vendors } from "../../services/api/controllers/vendor";
import Cart from "./Cart"; import Cart from "./Cart";
import Chat from "./Chat"; import Chat from "./Chat";
import Home from "./Home"; import Home from "./Home";
import Notification from "./Notification"; import Notification from "./Notification";
import Profile from "./Profile"; import Profile from "./Profile";
const height = Dimensions.get("window").height; import { get_all_products } from "../../services/api/controllers/product";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import FontAwesome, {
SolidIcons,
RegularIcons,
BrandIcons,
} from "react-native-fontawesome";
import {
faCartShopping,
faComments,
faStore,
faUserCircle,
} from "@fortawesome/free-solid-svg-icons";
import Icon from "react-native-vector-icons/FontAwesome5";
import { BottomNavigation, useTheme } from "react-native-paper";
import { FontAwesome5 } from "@expo/vector-icons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { useIsFocused, useNavigation } from "@react-navigation/native";
import { get_orders_by_customer } from "../../services/api/controllers/order";
import { user } from "../../constants/user";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { get_customer_login_id } from "../../services/api/controllers/customers";
import {
get_user_token,
user_login,
} from "../../services/api/controllers/auth";
import seedrandom from "seedrandom";
const Main = ({ cartList }) => { // import { user_login } from "../../services/obananapayApi/user_api";
const BottomTab = createBottomTabNavigator();
const height = Dimensions.get("window").height;
const BottomTab1 = createMaterialBottomTabNavigator();
const Main = ({ cartList, route }) => {
const [tabActive, settabActive] = useState("home"); const [tabActive, settabActive] = useState("home");
// const [switchTab, setswitch] = useState("prod"); // const [switchTab, setswitch] = useState("prod");
const [switchTab, setSwitchTab] = useState("prod"); const [switchTab, setSwitchTab] = useState("prod");
const animatedValue = useRef(new Animated.Value(0)).current; const animatedValue = useRef(new Animated.Value(0)).current;
const [vendors, setVendors] = useState([]);
const [product, setproduct] = useState([]);
const [cart, setcart] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const handleTabPress = (tab) => { const [index, setIndex] = useState(0);
// Determine the target value based on the selected tab const { colors } = useTheme();
const targetValue = tab === 'prod' ? 0 : 1; const [error, setError] = useState([]);
const [isLoading, setIsLoading] = useState(true); // Add a loading state
const [prodIsLoading, setprodIsLoading] = useState(true); // Add a loading state
const navigation = useNavigation();
const [loggedIn, setloggedIn] = useState(false);
const [emailSaved, setemailSaved] = useState("");
const [pass, setpass] = useState("");
const [errors, seterror] = useState("");
const { userLoggedin } = route.params ?? "";
const [refresh, setrefresh] = useState(false);
const [scrollTop, setscrollTop] = useState(false);
// Create a spring animation const [isLoadingLayout, setIsLoadingLayout] = useState(true); // Add a loading
Animated.spring(animatedValue, { const scrollViewRef = useRef(null);
toValue: targetValue, useEffect(() => {
friction: 5, // Adjust the friction to control the bounce effect // Simulate a delay of 300 milliseconds
tension: 10, // Adjust the tension to control the bounce effect const timer = setInterval(() => {
useNativeDriver: true, setrefresh(true);
}).start(); AsyncStorage.getItem("something")
.then((pass) => {
if (pass) {
// console.log("I am here sw well");
// Update the selected tab // let emailSaved = "";
setSwitchTab(tab); // let pass = "";
};
// Interpolate the animated value to determine background color AsyncStorage.getItem("something")
const backgroundColor = animatedValue.interpolate({ .then((passs) => {
inputRange: [0, 1], // pass = passs;
outputRange: ['#ffaa00', '#ffaa00'], // Adjust colors as needed setpass(passs);
console.log(passs);
AsyncStorage.getItem("email")
.then((emails) => {
setemailSaved(emails);
console.log(emails);
if (emailSaved && pass) {
user_login({
username: emailSaved.replace(/\s/g, "").toLowerCase(),
password: pass,
})
.then((result) => {
if (result.status == 200) {
// setuserEmail(result.data.user.email);
// settoken(result.data.token);
// setuid(result.data.user._id);
// send_email();
// settoken(result.data.token);
// settokenHere(result.data.token);
console.log("I am here.... logged in");
AsyncStorage.setItem(
"AccessToken",
result.data.token
);
AsyncStorage.setItem(
"email",
emailSaved.replace(/\s/g, "").toLowerCase()
);
AsyncStorage.setItem("something", pass);
get_user_token({
token: result.data.token,
})
.then((results) => {
if (results.status == 200) {
// setuid(results.data.profile.userId);
AsyncStorage.setItem(
"userId",
results.data.profile.userId
);
// AsyncStorage.setItem(
// "AccessToken",
// result.data.profile.token
// );
console.log("I am here....");
get_customer_login_id({
id: results.data.profile.userId,
})
.then((result1) => {
// console.log(result1.data);
if (result1.error) {
// seterror(result1.error);
} else {
AsyncStorage.setItem(
"userData",
JSON.stringify(result1.data)
);
AsyncStorage.getItem("userData")
.then((userData) => {
// setuser([userData]);
const userDataArray =
JSON.parse(userData);
console.log(userDataArray);
})
.catch((error) => {
console.log(error + "1weeewwww");
}); });
console.log(
"I am here as well we have userrrrrr" +
emailSaved +
pass
);
// console.log(result1.data);
navigation.navigate("Home");
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
// seterror(results.message);
console.log("login error" + results);
}
})
.catch((err) => {
// seterror(err);
console.log(err);
console.log(err + "failed to login");
});
// setauth(true);
console.log("login success " + result.data.token);
} else {
// seterror(result.message);
console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
setrefresh(!refresh);
}, 0.97 * 60 * 60 * 1000);
// Cleanup the timer if the component unmounts
return () => clearInterval(timer);
}, []);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
setrefresh(true);
AsyncStorage.getItem("something")
.then((pass) => {
if (pass) {
// console.log("I am here sw well");
// let emailSaved = "";
// let pass = "";
AsyncStorage.getItem("something")
.then((passs) => {
// pass = passs;
setpass(passs);
console.log(passs);
AsyncStorage.getItem("email")
.then((emails) => {
setemailSaved(emails);
console.log(emails);
if (emailSaved && pass) {
user_login({
username: emailSaved.replace(/\s/g, "").toLowerCase(),
password: pass,
})
.then((result) => {
if (result.status == 200) {
// setuserEmail(result.data.user.email);
// settoken(result.data.token);
// setuid(result.data.user._id);
// send_email();
// settoken(result.data.token);
// settokenHere(result.data.token);
console.log("I am here.... logged in");
AsyncStorage.setItem(
"AccessToken",
result.data.token
);
AsyncStorage.setItem(
"email",
emailSaved.replace(/\s/g, "").toLowerCase()
);
AsyncStorage.setItem("something", pass);
get_user_token({
token: result.data.token,
})
.then((results) => {
if (results.status == 200) {
// setuid(results.data.profile.userId);
AsyncStorage.setItem(
"userId",
results.data.profile.userId
);
// AsyncStorage.setItem(
// "AccessToken",
// result.data.profile.token
// );
console.log("I am here....");
get_customer_login_id({
id: results.data.profile.userId,
})
.then((result1) => {
// console.log(result1.data);
if (result1.error) {
// seterror(result1.error);
} else {
AsyncStorage.setItem(
"userData",
JSON.stringify(result1.data)
);
AsyncStorage.getItem("userData")
.then((userData) => {
// setuser([userData]);
const userDataArray =
JSON.parse(userData);
console.log(userDataArray);
})
.catch((error) => {
console.log(error + "1weeewwww");
});
console.log(
"I am here as well we have userrrrrr" +
emailSaved +
pass
);
// console.log(result1.data);
navigation.navigate("Home");
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
// seterror(results.message);
console.log("login error" + results);
}
})
.catch((err) => {
// seterror(err);
console.log(err);
console.log(err + "failed to login");
});
// setauth(true);
console.log("login success " + result.data.token);
} else {
// seterror(result.message);
console.log("login error" + result);
}
})
.catch((err) => {
seterror(err);
console.log(err);
console.log(err + "failed to login");
});
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
setrefresh(!refresh);
}, []);
// console.log("vendor" + vendors[1]?._id);
// function shuffleArray(array) {
// const shuffledArray = [...array];
// for (let i = shuffledArray.length - 1; i > 0; i--) {
// const j = Math.floor(Math.random() * (i + 1));
// [shuffledArray[i], shuffledArray[j]] = [
// shuffledArray[j],
// shuffledArray[i],
// ];
// }
// return shuffledArray;
// }
function shuffleArray(array, seed) {
const shuffledArray = [...array];
const rng = seedrandom(seed); // Seed the random number generator
for (let i = shuffledArray.length - 1; i > 0; i--) {
const j = Math.floor(rng() * (i + 1)); // Use the seeded random number generator
[shuffledArray[i], shuffledArray[j]] = [
shuffledArray[j],
shuffledArray[i],
];
}
return shuffledArray;
}
useEffect(() => {
// Simulate a delay of 300 milliseconds
const timer = setTimeout(() => {
setIsLoadingLayout(false); // Set isLoadingLayout to false after 300ms
}, 300);
// Cleanup the timer if the component unmounts
return () => clearTimeout(timer);
}, []);
useEffect(() => {
// Fetch vendors and update the state
get_all_products()
.then((result) => {
// console.log("result" + result);
if (result.error) {
setError(result.error);
} else {
const filtered = result.data.filter(
(item) =>
item.product_type !== "variation" &&
item.product_image !== "" &&
item.product_image !== null
);
setproduct(shuffleArray(filtered));
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
setprodIsLoading(false); // Set loading to false when done loading
});
get_all_vendors()
.then((result) => {
// console.log("result" + result);
if (result.error) {
setError(result.error);
} else {
setVendors(shuffleArray(result.data));
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
setIsLoading(false); // Set loading to false when done loading
});
get_orders_by_customer({
id: user[0]._id,
})
.then((result) => {
// console.log("result" + result);
if (result.error) {
setError(result.error);
} else {
setcart(result.data);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}, []);
useEffect(() => {
if (refreshing === true) {
console.log("isssssss");
const shufP = shuffleArray(product);
setproduct(shufP);
setRefreshing(false);
// Fetch vendors and update the state
}
}, [refreshing]);
return ( return (
<View style={styles.container}> <View style={styles.container} ref={scrollViewRef}>
<ScrollView style={styles.wrapper}> {/* <View style={styles.wrapper}>
{tabActive === "home" ? ( {tabActive === "home" ? (
<Home tab={switchTab} /> <Home prodIsLoading={prodIsLoading} product={product} tab={switchTab} />
) : tabActive === "notif" ? ( ) : tabActive === "notif" ? (
<Notification /> <Notification />
) : tabActive === "message" ? ( ) : tabActive === "message" ? (
@ -62,17 +475,18 @@ const Main = ({ cartList }) => {
) : ( ) : (
<Home /> <Home />
)} )}
</ScrollView> </View>
<View style={styles.footer}> <View style={styles.footer}>
{tabActive === "home" ? ( {tabActive === "home" ? (
<View style={styles.tabsCon}> <View style={styles.tabsCon}>
<View style={styles.tabs}> <View style={styles.tabs}>
<TouchableOpacity <TouchableOpacity
style={[ style={[
switchTab === 'ven'? styles.tab:styles.tabActive , switchTab === "ven" ? styles.tab : styles.tabActive,
{ {
backgroundColor: switchTab === 'prod' ? backgroundColor : 'transparent', backgroundColor:
switchTab === "prod" ? backgroundColor : "transparent",
transform: [ transform: [
{ {
translateX: animatedValue.interpolate({ translateX: animatedValue.interpolate({
@ -83,14 +497,14 @@ const Main = ({ cartList }) => {
], ],
}, },
]} ]}
onPress={() => handleTabPress('prod')} onPress={() => handleTabPress("prod")}
activeOpacity={0.8} activeOpacity={0.5}
> >
<Text <Text
style={[ style={[
styles.tabText, styles.tabText,
{ {
color: switchTab === 'prod' ? '#fff' : '#000', color: switchTab === "prod" ? "#fff" : "#000",
}, },
]} ]}
> >
@ -99,9 +513,10 @@ const Main = ({ cartList }) => {
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[ style={[
switchTab === 'prod'? styles.tab:styles.tabActive , switchTab === "prod" ? styles.tab : styles.tabActive,
{ {
backgroundColor: switchTab === 'ven' ? backgroundColor : 'transparent', backgroundColor:
switchTab === "ven" ? backgroundColor : "transparent",
transform: [ transform: [
{ {
translateX: animatedValue.interpolate({ translateX: animatedValue.interpolate({
@ -112,14 +527,14 @@ const Main = ({ cartList }) => {
], ],
}, },
]} ]}
onPress={() => handleTabPress('ven')} onPress={() => handleTabPress("ven")}
activeOpacity={0.8} activeOpacity={0.5}
> >
<Text <Text
style={[ style={[
styles.tabText, styles.tabText,
{ {
color: switchTab === 'ven' ? '#fff' : '#000', color: switchTab === "ven" ? "#fff" : "#000",
}, },
]} ]}
> >
@ -130,17 +545,173 @@ const Main = ({ cartList }) => {
</View> </View>
) : null} ) : null}
<BottomNav settabActive={settabActive} activeTab={tabActive} /> <BottomNav settabActive={settabActive} activeTab={tabActive} />
</View> </View> */}
<BottomTab.Navigator
initialRouteName="Home"
activeColor="#ffaa00"
inactiveColor="#b4b4b4"
sceneAnimationType="shifting"
style={{
padding: 0,
height: 10,
}}
screenOptions={{
tabBarStyle: {
backgroundColor: "#fff",
margin: 0,
padding: 0,
paddingVertical: 10,
borderWidth: 1,
borderColor: "#e7e7e7",
height: 60,
// paddingBottom:-25
},
}}
// shifting={true}
// labeled={false}
>
<BottomTab.Screen
name="Discover"
// component={()=><Home prodIsLoading={prodIsLoading} product={product} tab={switchTab} />}
options={{
tabBarButton: (props) => {
const isFocused = useIsFocused();
return (
<TouchableOpacity {...props} style={styles.botTab}>
{/* <TouchableOpacity
onPress={() => {
if (isFocused) {
console.log("scroll to top");
setscrollTop(true);
}
}}
> */}
<FontAwesomeIcon
icon={faStore}
color={isFocused ? "#ffaa00" : "#9c9c9c"}
size={25}
style={{
paddingHorizontal: 33,
}}
/>
<Text style={{ color: isFocused ? "#ffaa00" : "#9c9c9c" }}>
Home
</Text>
{/* </TouchableOpacity> */}
</TouchableOpacity>
);
},
headerShown: false,
// tabBarColor:"#fff",
}}
>
{(props) => (
<Home
{...props}
prodIsLoading={prodIsLoading}
product={product ?? []}
vendors={vendors ?? []}
tab={switchTab}
setRefreshing={setRefreshing}
refreshing={refreshing}
/>
)}
</BottomTab.Screen>
<BottomTab.Screen
name="Chat"
// component={()=><Chat prodIsLoading={prodIsLoading} product={product} tab={switchTab} />}
options={{
headerShown: false,
tabBarButton: (props) => {
const isFocused = useIsFocused();
return (
<TouchableOpacity {...props} style={styles.botTab}>
<FontAwesomeIcon
icon={faComments}
color={isFocused ? "#ffaa00" : "#9c9c9c"}
size={25}
style={{
paddingHorizontal: 33,
}}
/>
<Text style={{ color: isFocused ? "#ffaa00" : "#9c9c9c" }}>
Chat
</Text>
</TouchableOpacity>
);
},
}}
>
{(props) => <Chat {...props} />}
</BottomTab.Screen>
<BottomTab.Screen
name="Cart"
// component={()=><Cart prodIsLoading={prodIsLoading} product={product} tab={switchTab} />}
options={{
headerShown: false,
tabBarButton: (props) => {
const isFocused = useIsFocused();
return (
<TouchableOpacity {...props} style={styles.botTab}>
<FontAwesomeIcon
icon={faCartShopping}
color={isFocused ? "#ffaa00" : "#9c9c9c"}
size={25}
style={{
paddingHorizontal: 33,
}}
/>
<Text style={{ color: isFocused ? "#ffaa00" : "#9c9c9c" }}>
Cart
</Text>
</TouchableOpacity>
);
},
}}
>
{(props) => <Cart {...props} refresh={refresh} cartList={cart} />}
</BottomTab.Screen>
<BottomTab.Screen
name="Profile"
// component={()=><Profile prodIsLoading={prodIsLoading} product={product} tab={switchTab} />}
options={{
headerShown: false,
tabBarButton: (props) => {
const isFocused = useIsFocused();
return (
<TouchableOpacity {...props} style={styles.botTab}>
<FontAwesomeIcon
icon={faUserCircle}
color={isFocused ? "#ffaa00" : "#9c9c9c"}
size={25}
style={{
paddingHorizontal: 33,
}}
/>
<Text style={{ color: isFocused ? "#ffaa00" : "#9c9c9c" }}>
Profile
</Text>
</TouchableOpacity>
);
},
}}
>
{(props) => <Profile userLoggedin={userLoggedin} {...props} />}
</BottomTab.Screen>
</BottomTab.Navigator>
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: "#fff", backgroundColor: "#ffffff",
height: "100%", // height: height * 0.4,
width: "100%", width: "100%",
justifyContent: "center", // justifyContent: "center",
alignItems: "center", // alignItems: "center",
flex: 1,
}, },
header: { header: {
position: "fixed", position: "fixed",
@ -153,7 +724,7 @@ const styles = StyleSheet.create({
width: "100%", width: "100%",
}, },
wrapper: { wrapper: {
height: "100%", height: "93%",
}, },
tabsCon: { tabsCon: {
height: 80, height: 80,
@ -161,7 +732,7 @@ const styles = StyleSheet.create({
position: "absolute", position: "absolute",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
bottom: 50, bottom: 15,
}, },
tabs: { tabs: {
// height: 30, // height: 30,
@ -194,6 +765,11 @@ const styles = StyleSheet.create({
color: "#fff", color: "#fff",
fontWeight: "600", fontWeight: "600",
}, },
botTab: {
justifyContent: "center",
alignItems: "center",
width: "25%",
},
}); });
export default Main; export default Main;

0
app/pages/photoprev/PhotoPreview.jsx Normal file
View File

768
app/pages/product/ProductSinglePage.jsx
View File

@ -1,8 +1,21 @@
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 { import {
faArrowLeft,
faCartShopping,
faComment,
faHeart,
faMessage,
faStar,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import {
useIsFocused,
useNavigation,
useRoute,
} from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
Dimensions,
FlatList,
Image, Image,
ScrollView, ScrollView,
StyleSheet, StyleSheet,
@ -10,30 +23,465 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import BottomNav from "../../components/product/BottomNav"; import Modal from "react-native-modal";
import Variation from "../../components/product/Variation";
const ProductSinglePage = ({ setcartList, cartList }) => { import RenderHTML from "react-native-render-html";
import BottomNav from "../../components/product/BottomNav";
import ShopPrev from "../../components/product/ShopPrev";
import Variation from "../../components/product/Variation";
import {
get_customer,
update_customer,
} from "../../services/api/controllers/customers";
import { useToast } from "react-native-toast-notifications";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { get_orders_by_customer } from "../../services/api/controllers/order";
import CheckOutModal from "../../components/product/CheckOutModal";
import CustomerReview from "../../components/product/CustomerReview";
import Swiper from "react-native-swiper";
const width = Dimensions.get("window").width;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").width;
const ProductSinglePage = ({ setcartList, cartList, prod }) => {
const route = useRoute(); const route = useRoute();
const { product } = route.params; const { product } = route.params;
const navigation = useNavigation(); const [activeImg, setactiveImg] = useState(0);
const [imagesArray, setimagesArray] = useState([]);
const toast = useToast();
const [user, setuser] = useState([]);
const [error, seterror] = useState([]);
const [liked, setliked] = useState([]);
const [isLiked, setisLiked] = useState(false);
const [cartCount, setcartCount] = useState();
const [modalVisible, setModalVisible] = useState(false);
const [variations, setvariations] = useState([]);
const [activeVar, setactiveVar] = useState(null);
const [activeProduct, setactiveProduct] = useState(product ?? []);
const [isLoggedin, setisLoggedin] = useState(false);
const [variablePrice, setvariablePrice] = useState("");
const isFocused = useIsFocused();
useEffect(() => {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
setisLoggedin(true);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, [isFocused]);
useEffect(() => {
setactiveProduct(product);
const purch = prod?.filter((item) => item?.parent_id === product._id);
const newPurch = [product, ...purch];
setvariations(newPurch);
function getLowestHighestPrice(variation) {
let lowestPrice = Infinity;
let highestPrice = -Infinity;
let hasPrice = false;
variation.forEach((item) => {
let price = null;
// If sale_price is available and not an empty string, use it; otherwise, use regular_price
if (item.sale_price && item.sale_price !== "") {
price = parseFloat(item.sale_price);
} else if (item.regular_price && item.regular_price !== "") {
price = parseFloat(item.regular_price);
}
// Update lowest and highest prices
if (price !== null) {
hasPrice = true;
lowestPrice = Math.min(lowestPrice, price);
highestPrice = Math.max(highestPrice, price);
}
});
if (!hasPrice) {
return null;
}
// If lowest and highest prices are the same, return that price alone
if (lowestPrice === highestPrice) {
return `${lowestPrice}`;
}
// Return the range of lowest to highest prices
return `${lowestPrice}-${highestPrice}`;
}
const priceRange = getLowestHighestPrice(purch);
setvariablePrice(priceRange);
console.log("-----------------------Price Range:", priceRange);
}, [isFocused]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
if (liked) {
// console.log(liked?.products);
const exists = liked?.products?.some(
(prod) => prod._id === activeProduct?._id
);
// console.log("exist" + exists);
// console.log("product" + product?._id);
if (
// exists !== [] &&
// exists &&
// exists !== "" &&
// exists !== undefined &&
// exists !== exists?.length < 0 &&
// exists !== " "
exists
) {
// console.log("exx");
setisLiked(true);
}
}
}, [liked]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
// if (liked) {
// console.log(liked?.products);
const exists = liked?.products?.some(
(prod) => prod._id === activeProduct?._id
);
// console.log("exist" + exists);
// console.log("product" + product?._id);
if (
// exists !== [] &&
// exists &&
// exists !== "" &&
// exists !== undefined &&
// exists !== exists?.length < 0 &&
// exists !== " "
exists
) {
// console.log("exx");
setisLiked(true);
} else {
setisLiked(false);
}
// }
}, [activeProduct]);
useEffect(() => {
const actProd = [...variations];
setisLiked(false);
setactiveProduct(actProd[activeVar]);
}, [activeVar]);
useEffect(() => {
// setrefresh(isrefresh);
setactiveProduct(product);
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
// const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
// console.log( exists)
// if (exists) {
// console.log( "heyyyy")
// setisLiked(true);
// }
setliked(result?.data?.favorites);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
// console.log("get cutomer add :" + user[0]?.login_id);
const purch = prod?.filter((item) => item?.parent_id === product._id);
const newPurch = [product, ...purch];
setvariations(newPurch);
// console.log("var--------- " + purch);
}, []);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
if (pass !== null) {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(userDataArray[0]?._id);
get_orders_by_customer({
id: userDataArray[0]?._id,
})
.then((result) => {
if (result.error) {
// setError(result.error);
} else {
const purch = result.data?.filter(
(item) => item.status === "Cart" || item.status === "CART"
);
setcartCount(purch);
// console.log("purchhh" + purch);
}
})
.catch((error) => {
// setError(error.message);
setcartCount([]);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
console.log(pass);
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
console.log("act " + activeImg);
const navigation = useNavigation();
// Botto
const source = {
html: `
${activeProduct?.specifications}`,
};
// const imagesArray = activeProduct?.images
// ? activeProduct?.images?.split(",")
// : activeProduct?.product_image
// ?.split(",")
// .map((imageUrl) => ({ image: imageUrl.trim() }));
// console.log(imagesArray);
// console.log(
// "============================imagesArray==========================="
// );
useEffect(() => {
const imagesArray1 = activeProduct?.images
? activeProduct?.images?.split(",")
: activeProduct?.product_image
?.split(",")
.map((imageUrl) => ( imageUrl.trim() ));
setimagesArray(imagesArray1 ?? "");
console.log(
"============================imagesArray==========================="
);
console.log(imagesArray1);
console.log(
"============================imagesArray==========================="
);
// setactiveImg(0);
}, [activeProduct]);
// const likeProduct = (id) => {};
const images = [{ image: "" }];
const likeClicked = () => {
if (!isLiked) {
// if (liked?.length > 0 && liked !== undefined && liked !== []) {
const like = liked;
like?.products?.push(activeProduct);
update_customer({
id: user[0]._id,
body: {
favorites: like,
},
})
.then((result) => {
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
// console.log(result.data);
setisLiked(true);
// setaddreses(result.data.address);
// toast.show("Successfully changed the Billing Address!", {
// type: "success",
// placement: "top",
// duration: 2000,
// offset: 30,
// animationType: "slide-in",
// });
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
// const updatedFavorites = liked.map((favorite) => {
const updatedProduct = liked.products.filter(
(prod) => prod._id !== activeProduct?._id
);
// return { ...favorite, products: updatedProduct };
// });
const fave = {
products: updatedProduct,
vendors: liked.vendors,
};
update_customer({
id: user[0]._id,
body: {
favorites: fave,
},
})
.then((result) => {
console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
setisLiked(false);
// setaddreses(result.data.address);
// toast.show("Successfully changed the Billing Address!", {
// type: "success",
// placement: "top",
// duration: 2000,
// offset: 30,
// animationType: "slide-in",
// });
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}
};
const handleIndexChanged = (index) => {
// This function will be called whenever the active slide changes
setactiveImg(parseInt(index) - 1);
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView>
<View style={styles.header}> <View style={styles.headerCon}>
<TouchableOpacity <TouchableOpacity
onPress={() => navigation.navigate("Home")} onPress={() => navigation.goBack()}
style={styles.backIcon} style={styles.backIcon}
> >
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} /> <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate("Cart")}
style={styles.backIcon}
>
{/* <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} /> */}
<FontAwesomeIcon
icon={faCartShopping}
color={"#FFAA00"}
size={25}
/>
<Text style={styles.cartIconBadge}>
{cartCount?.length > 99 ? "99+" : cartCount?.length ?? 0}
</Text>
</TouchableOpacity>
</View> </View>
<View tyle={styles.wrapper}> <View tyle={styles.wrapper}>
<View tyle={styles.wrapperSwiper}>
<Swiper
style={styles.wrapperSwiper1}
// autoplay
loop={false}
index={activeImg} // Set the initial active slide index
showsPagination={false}
onIndexChanged={(index) => {
setactiveImg(index), console.log(index + " change");
}} // Callback when the active slide changes
>
{imagesArray?.map((e, index) => (
<Image <Image
style={{ width: "100%", height: 400, resizeMode: "cover" }} key={index}
source={{ uri: product.img }} style={{
width: width,
height: 450,
resizeMode: "contain",
}}
source={{
uri: `${
e !== ""
? e
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
}`,
}}
/> />
))}
</Swiper>
</View>
<View style={styles.imgPrevCon}>
<FlatList
// inverted
// style={styles.wrapper}
horizontal
data={imagesArray ? imagesArray : images}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => {
return (
<TouchableOpacity
onPress={() => {
setactiveImg(Math.abs(index));
}}
>
<View
style={
activeImg === Math.abs(index)
? styles.imgPrevCardActive
: styles.imgPrevCard
}
>
<Image
style={styles.imgPrev}
source={{
uri:
item !== ""
? item
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/>
<Text
style={{
color: "#000",
fontSize: 10,
flexWrap: "wrap",
}}
></Text>
</View>
</TouchableOpacity>
);
}}
/>
</View>
<View <View
style={{ style={{
width: "100%", width: "100%",
@ -44,47 +492,206 @@ const ProductSinglePage = ({ setcartList, cartList }) => {
borderWidth: 1, borderWidth: 1,
}} }}
> >
<Text style={styles.text}>{product.name}</Text> <Text style={styles.text}>{activeProduct.product_name}</Text>
{product.product_type === "variable" ? (
<>
{activeVar !== null ? (
<View style={styles.priceCon}> <View style={styles.priceCon}>
<Text <Text
style={product.promo ? styles.textPricePromo : styles.textPrice} style={
activeProduct.sale_price
? styles.textPricePromo
: styles.textPrice
}
> >
₱{product.price} {activeProduct?.regular_price &&
activeProduct?.regular_price !== null ? (
"₱" + activeProduct?.regular_price
) : (
<TouchableOpacity style={styles.inquire}>
<Text style={styles.inquire}>Inquire for price</Text>
</TouchableOpacity>
)}
</Text> </Text>
{product.promo ? ( {activeProduct.sale_price ? (
<Text style={styles.textPrice}> <Text style={styles.textPrice}>
{" "} {/* {" "}
{product.price - product.price * 0.3}{" "} {(activeProduct.regular_price * (1 - activeProduct.sale_price / 100)).toFixed(2)}{" "}
<Text style={{ fontWeight: "400" }}>(-{product.promo}%)</Text> <Text style={{ fontWeight: "400" }}>(-{product.sale_price}%)</Text> */}{" "}
{activeProduct?.sale_price}
</Text> </Text>
) : null} ) : null}
</View> </View>
<View style={styles.footer}> ) : (
<Text style={styles.textMin}> <View style={styles.priceCon}>
min. order: {product.min} {product.per} <Text style={styles.textPrice}>
{" "}
{variablePrice ? (
" ₱" + variablePrice
) : (
<TouchableOpacity>
<Text style={styles.inquire}>
Contact Seller for the price
</Text> </Text>
<Text style={styles.textSold}>{product.sold} sold</Text> </TouchableOpacity>
)}
</Text>
{/* {activeProduct.sale_price ? (
<Text style={styles.textPrice}>
{/* {" "}
{(activeProduct.regular_price * (1 - activeProduct.sale_price / 100)).toFixed(2)}{" "}
<Text style={{ fontWeight: "400" }}>(-{product.sale_price}%)</Text> */}
{/* {activeProduct?.sale_price}
</Text> */}
{/* ) : null} */}
</View> </View>
{product.rate ? ( )}
</>
) : (
<View style={styles.priceCon}>
<Text
style={
activeProduct.sale_price
? styles.textPricePromo
: styles.textPrice
}
>
{activeProduct?.regular_price &&
activeProduct?.regular_price !== null ? (
"₱" + activeProduct?.regular_price
) : (
<TouchableOpacity style={styles.inquire}>
<Text style={styles.inquire}>Inquire for price</Text>
</TouchableOpacity>
)}
</Text>
{activeProduct.sale_price ? (
<Text style={styles.textPrice}>
{/* {" "}
{(activeProduct.regular_price * (1 - activeProduct.sale_price / 100)).toFixed(2)}{" "}
<Text style={{ fontWeight: "400" }}>(-{product.sale_price}%)</Text> */}{" "}
{activeProduct?.sale_price}
</Text>
) : null}
</View>
)}
<View style={styles.footer}>
{product?.rate ? (
<View style={styles.rateCon}> <View style={styles.rateCon}>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} /> <FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
<Text style={styles.textRate}> <Text style={styles.textRate}>
{product.rate} ({product.raterTotal}) {product?.rate ?? 0} ({product?.raterTotal ?? 0})
</Text> </Text>
</View> </View>
) : (
<View style={styles.rateCon}>
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={20} />
<Text style={styles.textRate}> 0</Text>
</View>
)}
<View style={styles.rateCon}>
<TouchableOpacity
style={styles.messageBtn1}
onPress={() => {
isLoggedin
? likeClicked(activeProduct?._id)
: navigation.navigate("Login");
}}
>
<FontAwesomeIcon
icon={faHeart}
color={isLiked ? "#ff5c5c" : "#dbdbdb"}
size={35}
/>
</TouchableOpacity>
{/* <Text style={styles.textRate}> 0</Text> */}
<TouchableOpacity
onPress={() => navigation.navigate("Chat")}
style={styles.messageBtn}
>
<FontAwesomeIcon
icon={faComment}
size={25}
color={"#698600"}
/>
{/* <Text style={styles.btnText}>Chat</Text> */}
</TouchableOpacity>
</View>
</View>
<View style={styles.footer}>
<Text style={styles.textMin}>
{activeProduct?.minimum_order ? (
<>
{" "}
min. order:{" "}
{activeProduct?.minimum_order !== "" ||
activeProduct?.minimum_order !== null
? activeProduct?.minimum_order
: 1}{" "}
{activeProduct?.per ?? ""}
</>
) : null} ) : null}
</Text>
<Text style={styles.textSold}>
stock: {activeProduct?.stock ?? 0}
</Text>
<Text style={styles.textSold}>
{activeProduct?.sold ?? 0} sold
</Text>
</View> </View>
</View> </View>
<Variation /> </View>
{product.product_type === "variable" ? (
<Variation
prod={product}
vars={variations}
setactiveVar={setactiveVar}
/>
) : null}
<ShopPrev shopId={product?.vendor_api_id} />
<Text style={styles.header1}>Description</Text> <Text style={styles.header1}>Description</Text>
<View style={{ padding: 15 }}>
{activeProduct?.specifications ? (
<RenderHTML contentWidth={width} source={source} />
) : (
<>
<Text>{product.product_name}</Text>
</>
)}
</View>
{/* <CustomerReview /> */}
</ScrollView> </ScrollView>
<View style={styles.footerButton}> <View style={styles.footerButton}>
<BottomNav <BottomNav
product={product} product={activeProduct ? activeProduct : null}
cartList={cartList} cartList={cartList}
setcartList={setcartList} setcartList={setcartList}
setModalVisible={setModalVisible}
activeVar={activeVar}
/> />
</View> </View>
<Modal
animationType="slide"
animationIn={"bounceInUp"}
transparent={true}
isVisible={modalVisible}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={"down"}
// swipeThreshold="100"
backdropOpacity={0.1}
style={{ margin: 0 }}
propagateSwipe={true}
deviceWidth={deviceWidth}
// deviceHeight={deviceHeight}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
{/* <ReceiptCard onRequestClose={setModalVisible} cart={cart} /> */}
<CheckOutModal setModalVisible={setModalVisible} />
</Modal>
</View> </View>
); );
}; };
@ -94,11 +701,16 @@ const styles = StyleSheet.create({
height: "100%", height: "100%",
width: "100%", width: "100%",
}, },
header: { headerCon: {
position: "absolute", // position: "absolute",
// height: 90,
width: "100%", width: "100%",
display: "flex",
justifyContent: "space-between",
flexDirection: "row",
top: 0, top: 0,
padding: 15, padding: 15,
// backgroundColor: "#f75656",
}, },
header1: { header1: {
// position: "fixed", // position: "fixed",
@ -108,8 +720,10 @@ const styles = StyleSheet.create({
paddingHorizontal: 15, paddingHorizontal: 15,
}, },
backIcon: { backIcon: {
marginLeft: 20, // marginLeft: 20,
backgroundColor: "#f1f1f1", backgroundColor: "#f1f1f1",
// backgroundColor: "#98eb00",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
width: 50, width: 50,
@ -117,12 +731,50 @@ const styles = StyleSheet.create({
borderRadius: 50, borderRadius: 50,
marginBottom: 10, marginBottom: 10,
}, },
cartIconBadge: {
position: "absolute",
top: 0,
right: 0,
borderRadius: 50,
backgroundColor: "#f75656",
width: 18,
height: 18,
textAlign: "center",
justifyContent: "center",
alignItems: "center",
color: "#fff",
fontSize: 11,
// padding: 10,
},
inquire: {
fontSize: 16,
fontWeight: "600",
// textTransform: "capitalize",
// textDecorationLine: "line-through",
color: "#ffaa00",
},
wrapper: { wrapper: {
width: "100%", width: "100%",
height: "100%", height: "100%",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
// backgroundColor: "#ffaa00", },
wrapperSwiper: {
// width: width,
height: "100%",
// flex: 1,
// height: 450,
// zIndex: 1000,
},
wrapperSwiper1: {
// width: "100%",
// width: width,
height: 450,
// maxHeight: "60%",
// backgroundColor: "#f75656",
// height: 500,
// zIndex: 1000,
}, },
header: { header: {
fontSize: 14, fontSize: 14,
@ -136,6 +788,54 @@ const styles = StyleSheet.create({
color: "#333", color: "#333",
letterSpacing: 0.5, letterSpacing: 0.5,
}, },
imgPrevCon: {
borderWidth: 1,
borderColor: "#eeee",
},
imgPrevCard: {
borderWidth: 1,
borderColor: "#eeee",
width: 110,
height: 110,
justifyContent: "center",
alignItems: "center",
padding: 2,
},
imgPrevCardActive: {
borderWidth: 5,
borderColor: "#585858ed",
width: 110,
height: 110,
justifyContent: "center",
alignItems: "center",
padding: 2,
},
imgPrev: {
width: 100,
height: 100,
resizeMode: "cover",
// margin: "auto",
// borderRadius: 10,
top: 7,
// padding: 10,
},
messageBtn: {
// width: 80,
// height: 80,
marginLeft: 20,
flexDirection: "row",
resizeMode: "cover",
borderRadius: 10,
backgroundColor: "#dfff6c",
padding: 6,
},
btnText: {
fontSize: 14,
fontWeight: "600",
// textTransform: "uppercase",
paddingHorizontal: 5,
color: "#698600",
},
priceCon: { priceCon: {
flexDirection: "row", flexDirection: "row",
paddingVertical: 10, paddingVertical: 10,
@ -156,18 +856,15 @@ const styles = StyleSheet.create({
textMin: { textMin: {
fontSize: 13, fontSize: 13,
fontWeight: "600", fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd", color: "#bdbdbd",
}, },
textSold: { textSold: {
fontSize: 13, fontSize: 13,
fontWeight: "600", fontWeight: "600",
// textTransform: "capitalize",
color: "#bdbdbd", color: "#bdbdbd",
}, },
rateCon: { rateCon: {
flexDirection: "row", flexDirection: "row",
// justifyContent:'center',
alignItems: "center", alignItems: "center",
paddingVertical: 10, paddingVertical: 10,
}, },
@ -181,14 +878,13 @@ const styles = StyleSheet.create({
resizeMode: "cover", resizeMode: "cover",
margin: "auto", margin: "auto",
borderRadius: 10, borderRadius: 10,
// backgroundColor: "#ffaa00",
}, },
footer: { footer: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
}, },
footerButton: { footerButton: {
// position: "absolute",
bottom: 0, bottom: 0,
width: "100%", width: "100%",
}, },

545
app/pages/profile/AccountAndSecurity.jsx Normal file
View File

@ -0,0 +1,545 @@
import {
faAngleDown,
faArrowLeft,
faEdit,
faPlus,
} 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 {
Image,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import {
get_barangays,
get_cities,
get_manila_cities,
get_provinces,
} from "../../services/addressApi/address";
import SelectDropdown from "react-native-select-dropdown";
import {
update_customer,
uploadImage,
} from "../../services/api/controllers/customers";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useToast } from "react-native-toast-notifications";
const AccountAndSecurity = ({ route }) => {
const navigation = useNavigation();
const [unit, setunit] = useState("");
const { isrefresh, userData } = route.params ?? "";
const [street, setstreet] = useState("");
const [fName, setfName] = useState(userData.first_name ?? "");
const [lName, setlName] = useState(userData.last_name ?? "");
const [username, setusername] = useState(userData.user_login ?? "");
const [email, setemail] = useState(userData.user_email ?? "");
const [phone, setphone] = useState(userData.phone_number ?? "");
const [error, seterror] = useState("");
const [load, setload] = useState(false);
const toast = useToast();
const [selectedImage, setSelectedImage] = useState(null);
const [image, setimage] = useState(null);
// const route = useRoute();
// console.log("address " + address?.length);
const [user, setuser] = useState([]);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
console.log("addresss " + isrefresh);
const UpdateUser = () => {
console.log(userData._id);
setload(true);
if (image) {
uploadImage(image)
.then((result) => {
console.log("Image uploaded successfully:", result.data);
// Handle success (e.g., show success message)
// Alert.alert('Image uploaded successfully');
console.log(result.data.filename);
update_customer({
id: userData?._id ?? "",
body: {
first_name: fName,
last_name: lName,
user_login: username,
phone_number: phone,
customer_image: `https://api.obanana.shop/images/storage/customer_uploads/${result.data.filename}`,
},
})
.then((result3) => {
if (result3.error) {
seterror(result3.error);
} else {
// setaddreses(result3.data.addreses);
setload(false);
toast.show("Successfully updated user!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
navigation.navigate("AccountSettings", {
isrefresh: isrefresh === true ? false : true,
});
console.log(result3.data);
}
// update_customer({
// id: userData?._id ?? "",
// body: {
// last_name: lName,
// },
// })
// .then((result1) => {
// update_customer({
// id: userData?._id ?? "",
// body: {
// user_login: username,
// },
// })
// .then((result2) => {
// update_customer({
// id: userData?._id ?? "",
// body: {
// phone_number: phone,
// },
// })
// .then((result3) => {
// if (result3.error) {
// seterror(result3.error);
// } else {
// // setaddreses(result3.data.addreses);
// setload(false);
// navigation.navigate("AccountSettings", {
// isrefresh: isrefresh === true ? false : true,
// });
// console.log(result3.data);
// }
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// });
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// });
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// });
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
// console.log(result.data);
});
})
.catch((error) => {
console.error("Error uploading image:", error);
// Handle error (e.g., show error message)
// Alert.alert('Error uploading image');
});
} else {
update_customer({
id: userData?._id ?? "",
body: {
first_name: fName,
last_name: lName,
user_login: username,
phone_number: phone,
// customer_image: `https://api.obanana.shop/images/storage/vendor_uploads/${result.filename}`,
},
})
.then((result3) => {
if (result3.error) {
seterror(result3.error);
} else {
// setaddreses(result3.data.addreses);
setload(false);
toast.show("Successfully updated user!", {
type: "success",
placement: "top",
duration: 2000,
offset: 30,
animationType: "slide-in",
});
navigation.navigate("AccountSettings", {
isrefresh: isrefresh === true ? false : true,
});
console.log(result3.data);
}
// update_customer({
// id: userData?._id ?? "",
// body: {
// last_name: lName,
// },
// })
// .then((result1) => {
// update_customer({
// id: userData?._id ?? "",
// body: {
// user_login: username,
// },
// })
// .then((result2) => {
// update_customer({
// id: userData?._id ?? "",
// body: {
// phone_number: phone,
// },
// })
// .then((result3) => {
// if (result3.error) {
// seterror(result3.error);
// } else {
// // setaddreses(result3.data.addreses);
// setload(false);
// navigation.navigate("AccountSettings", {
// isrefresh: isrefresh === true ? false : true,
// });
// console.log(result3.data);
// }
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// });
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// });
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// });
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
// console.log(result.data);
});
}
};
const selectImage = async () => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
Alert.alert("Permission to access camera roll is required!");
return;
}
const pickerResult = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!pickerResult.canceled) {
setSelectedImage({ localUri: pickerResult.assets[0].uri });
// Prepare image data for upload
const imageData = {
image_id: userData._id,
category: "customer",
imageFile: {
uri: pickerResult.assets[0].uri,
type: "image/jpeg", // Adjust the type if needed
name: "image.jpg", // Adjust the name if needed
},
};
setimage(imageData);
// Call your uploadImage function
console.log(imageData);
}
};
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() =>
navigation.navigate("AccountSettings", { isrefresh: { isrefresh } })
}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
<Text style={styles.headerText}>Edit Profile</Text>
</View>
<ScrollView style={styles.wrapper}>
{/* <Text style={styles.text}>Content</Text> */}
<View style={styles.wrap}>
<View style={styles.accountPrev}>
<TouchableOpacity
style={styles.accountPrevWrap}
onPress={() => {
selectImage();
}}
>
{selectedImage ? (
<Image
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderRadius: 100,
// marginLeft: 20,
}}
source={{
uri: selectedImage.localUri,
}}
/>
) : (
<Image
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderRadius: 100,
// marginLeft: 20,
}}
source={{
uri:
userData.customer_image ??
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
}}
/>
)}
<View style={styles.editprof}>
<FontAwesomeIcon icon={faEdit} size={24} color={"#333"} />
</View>
</TouchableOpacity>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>First Name:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setfName(e);
}}
value={fName}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Last Name:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setlName(e);
}}
value={lName}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Username:</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setusername(e);
}}
value={username}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
<View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Phone Number:</Text>
{/* <View style={styles.inputNum}> */}
{/* <Text>+63 </Text> */}
<TextInput
style={styles.input}
onChangeText={(e) => {
setphone(e);
}}
value={phone}
// placeholder="9*********"
// keyboardType="numeric"
// secureTextEntry={true}
/>
{/* </View> */}
</View>
{/* <View style={styles.wrapMiddleFormInput}>
<Text style={styles.inputText}>Email:(optional)</Text>
<TextInput
style={styles.input}
onChangeText={(e) => {
setemail(e);
}}
value={email}
placeholder=""
// keyboardType="numeric"
// secureTextEntry={true}
/>
</View> */}
</View>
</ScrollView>
<View style={styles.footer}>
<TouchableOpacity style={styles.footerBtn} onPress={() => UpdateUser()}>
<Text style={styles.footerBtnText}>Save</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffff",
width: "100%",
height: "100%",
},
wrapper: {
height: "100%",
width: "100%",
marginBottom: 60,
},
wrap: {
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingTop: 30,
},
header: {
alignItems: "center",
width: "100%",
top: 0,
paddingLeft: 15,
flexDirection: "row",
borderColor: "#ddd",
paddingBottom: 15,
borderBottomWidth: 1,
},
headerText: {
fontSize: 16,
fontWeight: "600",
marginLeft: 25,
},
wrapMiddleFormInput: {
marginVertical: 6,
},
input: {
height: 50,
width: 300,
margin: 10,
borderWidth: 1,
padding: 15,
borderColor: "#bebebe",
borderRadius: 10,
backgroundColor: "#fff",
},
inputNum: {
height: 50,
width: 300,
margin: 5,
borderWidth: 1,
padding: 10,
borderColor: "#bebebe",
borderRadius: 10,
flexDirection: "row",
// justifyContent: "center",9
alignItems: "center",
backgroundColor: "#fff",
},
inputText: {
marginLeft: 15,
fontSize: 13,
fontWeight: "600",
},
footer: {
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
},
footerBtn: {
backgroundColor: "#ff5e00",
width: "90%",
paddingVertical: 10,
justifyContent: "center",
borderRadius: 20,
alignItems: "center",
flexDirection: "row",
},
footerBtnText: {
color: "#fff",
fontSize: 16,
marginRight: 10,
},
selectBtnText: {
color: "#929292",
fontSize: 15,
marginRight: 10,
letterSpacing: 0.6,
},
editprof: {
position: "absolute",
right: 0,
bottom: 5,
},
accountPrev: {
marginBottom: 25,
},
accountPrevWrap: {
borderWidth: 4,
borderStyle: "dashed",
borderColor: "#ffaa00c0",
padding: 10,
margin: 15,
},
});
export default AccountAndSecurity;

232
app/pages/profile/AccountSettings.jsx
View File

@ -4,12 +4,99 @@ import {
faArrowLeft, faArrowLeft,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import AsyncStorage from "@react-native-async-storage/async-storage";
import React from "react"; import { useIsFocused, useNavigation } from "@react-navigation/native";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import React, { useEffect, useState } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { get_customer } from "../../services/api/controllers/customers";
const AccountSettings = () => { const AccountSettings = ({ route }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const [user, setuser] = useState([]);
const { isrefresh } = route.params ?? "";
const [refresh, setrefresh] = useState(false);
const [error, seterror] = useState(false);
const isFocused = useIsFocused();
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(pass);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
setrefresh(!isrefresh);
if (isrefresh) {
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
// setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
console.log([result.data]);
let userr = [result.data];
AsyncStorage.setItem("userData", JSON.stringify(userr));
setuser([result.data]);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
}
// console.log("get cutomer add :" + user[0]?.login_id);
}, [isrefresh]);
useEffect(() => {
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
// setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
console.log([result.data]);
let userr = [result.data];
AsyncStorage.setItem("userData", JSON.stringify(userr));
setuser([result.data]);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, [isFocused])
return ( return (
<View style={styles.container}> <View style={styles.container}>
@ -28,12 +115,54 @@ const AccountSettings = () => {
<View style={styles.subHeader}> <View style={styles.subHeader}>
<Text style={styles.subHeaderText}>My Account</Text> <Text style={styles.subHeaderText}>My Account</Text>
</View> </View>
<View style={styles.accountPrev}>
<View style={styles.accountPrevWrap}>
<Image
style={{
width: 100,
height: 100,
resizeMode: "cover",
borderRadius: 100,
// marginLeft: 20,
}}
source={{
uri: user[0]?.customer_image??"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
}}
/>
<Text style={styles.accountPrevText}>
{user[0]?.first_name} {user[0]?.last_name}
</Text>
</View>
</View>
<View style={styles.subContent1}>
<Text style={styles.subContent1Text}>Username</Text>
<Text style={styles.accountPrevText2}>
{user[0]?.user_login ?? ""}
</Text>
</View>
<View style={styles.subContent1}>
<Text style={styles.subContent1Text}>Phone Number</Text>
<Text style={styles.accountPrevText2}>
{
// "+63" +
user[0]?.phone_number ?? ""}
</Text>
</View>
<View style={styles.subContent1}>
<Text style={styles.subContent1Text}>Email Address</Text>
<Text style={styles.accountPrevText2}>{user[0]?.user_email}</Text>
</View>
<View style={styles.subContentsWrap}> <View style={styles.subContentsWrap}>
<TouchableOpacity <TouchableOpacity
style={styles.subContent} style={styles.subContent}
onPress={() => navigation.navigate("Home")} onPress={() =>
navigation.navigate("AccountAndSecurity", {
isrefresh: false,
userData: user[0],
})
}
> >
<Text style={styles.subContentText}>Account & Security</Text> <Text style={styles.subContentText}>Edit profile</Text>
<FontAwesomeIcon <FontAwesomeIcon
icon={faAngleRight} icon={faAngleRight}
color={"#d4c600"} color={"#d4c600"}
@ -42,7 +171,9 @@ const AccountSettings = () => {
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={styles.subContent} style={styles.subContent}
onPress={() => navigation.navigate("Home")} onPress={() =>
navigation.navigate("Address", { isrefresh: !refresh })
}
> >
<Text style={styles.subContentText}>My Addresses</Text> <Text style={styles.subContentText}>My Addresses</Text>
<FontAwesomeIcon <FontAwesomeIcon
@ -51,7 +182,7 @@ const AccountSettings = () => {
size={20} size={20}
/> />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity {/* <TouchableOpacity
style={styles.subContent} style={styles.subContent}
onPress={() => navigation.navigate("Home")} onPress={() => navigation.navigate("Home")}
> >
@ -61,11 +192,47 @@ const AccountSettings = () => {
color={"#d4c600"} color={"#d4c600"}
size={20} size={20}
/> />
</TouchableOpacity> */}
</View>
</View>
<TouchableOpacity
onPress={() => {
AsyncStorage.removeItem("something")
.then(() => {
console.log("pass removed from AsyncStorage");
})
.catch((error) => {
console.error("Error removing item from AsyncStorage: ", error);
});
AsyncStorage.removeItem("AccessToken")
.then(() => {
console.log("token removed from AsyncStorage");
})
.catch((error) => {
console.error("Error removing item from AsyncStorage: ", error);
});
AsyncStorage.removeItem("email")
.then(() => {
console.log("email removed from AsyncStorage");
})
.catch((error) => {
console.error("Error removing item from AsyncStorage: ", error);
});
AsyncStorage.removeItem("userData")
.then(() => {
console.log("user data removed from AsyncStorage");
})
.catch((error) => {
console.error("Error removing item from AsyncStorage: ", error);
});
navigation.navigate("Home", { userLoggedin: false });
}}
style={styles.subContent}
>
<Text style={{ textAlign: "center" }}>Log Out</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View>
</View>
); );
}; };
@ -78,8 +245,7 @@ const styles = StyleSheet.create({
wrapper: { wrapper: {
height: "100%", height: "100%",
width: "100%", width: "100%",
backgroundColor:"#fdfdfd", backgroundColor: "#fdfdfd",
}, },
header: { header: {
alignItems: "center", alignItems: "center",
@ -114,26 +280,64 @@ const styles = StyleSheet.create({
fontWeight: "600", fontWeight: "600",
padding: 10, padding: 10,
}, },
accountPrev: {
width: "100%",
// paddingLeft: 15,
borderColor: "#ddd",
// backgroundColor:"#f5f5f5",
justifyContent: "center",
alignContent: "center",
},
accountPrevWrap: {
// width: 150,
// top: 0,
borderColor: "#ddd",
paddingBottom: 15,
justifyContent: "center",
alignItems: "center",
},
accountPrevText: {
fontSize: 14,
fontWeight: "600",
padding: 10,
textTransform: "capitalize",
},
subContentsWrap: { subContentsWrap: {
width: "100%", width: "100%",
borderColor: "#ddd", borderColor: "#ddd",
justifyContent: "center", justifyContent: "center",
marginTop: 10,
}, },
subContent: { subContent: {
width: "100%", width: "100%",
borderColor: "#ececec", borderColor: "#ececec",
backgroundColor:"#fff", backgroundColor: "#fcfcfc",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
flexDirection: "row", flexDirection: "row",
borderWidth: 1, borderWidth: 1,
padding: 15, padding: 15,
paddingLeft: 40, paddingLeft: 20,
}, },
subContentText: { subContentText: {
fontSize: 14, fontSize: 14,
fontWeight: "400", fontWeight: "400",
}, },
subContent1: {
width: "100%",
borderColor: "#f7f7f7",
backgroundColor: "#fff",
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
borderWidth: 1,
padding: 15,
paddingLeft: 20,
},
subContentText1: {
fontSize: 14,
fontWeight: "400",
},
}); });
export default AccountSettings; export default AccountSettings;

11
app/pages/profile/HelpCentre.jsx
View File

@ -2,7 +2,10 @@ import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import React from "react"; import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import coming from "../.././../assets/comingsoon.png";
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;
const HelpCenter = () => { const HelpCenter = () => {
const navigation = useNavigation(); const navigation = useNavigation();
@ -21,7 +24,11 @@ const HelpCenter = () => {
<View style={styles.wrapper}> <View style={styles.wrapper}>
<Text style={styles.text}>Content</Text> {/* <Text style={styles.text}>Content</Text> */}
<Image
style={{ width: width, height: height-30, resizeMode: "cover" }}
source={coming}
/>
</View> </View>
</View> </View>
); );

377
app/pages/profile/MyFavorites.jsx
View File

@ -5,9 +5,15 @@ import {
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"; import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { useNavigation } from "@react-navigation/native"; import { useIsFocused, useNavigation } from "@react-navigation/native";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "../../components/profile/my-favorite/ProductCard"; import ProductCard from "../../components/profile/my-favorite/ProductCard";
import ShopCard from "../../components/profile/my-favorite/ShopCard"; import ShopCard from "../../components/profile/my-favorite/ShopCard";
@ -17,18 +23,108 @@ import Checkbox from "expo-checkbox";
const Tab = createMaterialTopTabNavigator(); const Tab = createMaterialTopTabNavigator();
import Modal from "react-native-modal"; import Modal from "react-native-modal";
import DeleteConfirmationModal from "../../components/DeleteConfirmationModal"; import DeleteConfirmationModal from "../../components/DeleteConfirmationModal";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
get_customer,
update_customer,
} from "../../services/api/controllers/customers";
function Products({ route }) { function Products({ route }) {
const { products } = route.params; const { products } = route.params;
const [prodLike, setprodLike] = useState([]); const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false); const [all, setall] = useState(false);
const [product, setproduct] = useState(products ?? []); const [product, setproduct] = useState(products ?? []);
const isFocused = useIsFocused();
console.log(prodLike); console.log(products + "ey");
// console.log(prodLike);
const [isModalVisible, setModalVisible] = useState(false); const [isModalVisible, setModalVisible] = useState(false);
const [user, setuser] = useState([]);
const [error, seterror] = useState([]);
const [liked, setliked] = useState([]);
const [load, setload] = useState(false);
// useEffect(() => {
// // setrefresh(isrefresh);
// AsyncStorage.getItem("userData")
// .then((pass) => {
// // console.log("mm "+pass._id);
// const userDataArray = JSON.parse(pass);
// setuser(userDataArray);
// get_customer({ id: userDataArray[0]?._id })
// .then((result) => {
// // console.log(result.data);
// if (result.error) {
// seterror(result.error);
// } else {
// // const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
// // console.log( exists)
// // if (exists) {
// // console.log( "heyyyy")
// // setisLiked(true);
// // }
// setliked(result?.data?.favorites);
// setproduct(result?.data?.favorites.products);
// setload(true);
// }
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// })
// .finally(() => {
// // setprodIsLoading(false); // Set loading to false when done loading
// });
// })
// .catch((error) => {
// console.log(error + "weeewwww");
// });
// // console.log("get cutomer add :" + user[0]?.login_id);
// }, []);
useEffect(() => {
// setrefresh(isrefresh);
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
// const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
// console.log( exists)
// if (exists) {
// console.log( "heyyyy")
// setisLiked(true);
// }
setliked(result?.data?.favorites);
setproduct(result?.data?.favorites.products?.reverse());
setload(true);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
// console.log("get cutomer add :" + user[0]?.login_id);
}, [isFocused]);
const toggleModal = () => { const toggleModal = () => {
setModalVisible(!isModalVisible); setModalVisible(!isModalVisible);
}; };
@ -50,8 +146,68 @@ function Products({ route }) {
if (all === true) { if (all === true) {
setproduct([]); setproduct([]);
setall(false) // const updatedFavorites = liked.map((favorite) => {
// const updatedProduct = [];
// return { ...favorite, products: updatedProduct };
// });
update_customer({
id: user[0]._id,
body: {
favorites: {
products: [],
vendors: liked?.vendors,
},
},
})
.then((result) => {
console.log(result.data);
if (result.error) {
seterror(result.error);
} else { } else {
setliked(result?.data?.favorites);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
setall(false);
} else {
// const updatedFavorites = liked.map((favorite) => {
const updatedProduct = liked.products.filter(
(item, index) => !prodLike.includes(index)
);
// return { ...favorite, products: updatedProduct };
// });
update_customer({
id: user[0]._id,
body: {
favorites: {
products: updatedProduct,
vendors: liked.vendors,
},
},
})
.then((result) => {
console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
setproduct((prevProduct) => { setproduct((prevProduct) => {
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike' // Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
const updatedProduct = prevProduct.filter( const updatedProduct = prevProduct.filter(
@ -74,7 +230,7 @@ function Products({ route }) {
<FontAwesomeIcon icon={faTrash} /> <FontAwesomeIcon icon={faTrash} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{products ? ( {product ? (
<MasonryList <MasonryList
data={product} data={product}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
@ -104,16 +260,87 @@ function Products({ route }) {
); );
} }
function Vendors({ route }) { function Vendors({ route }) {
const { shops } = route.params; const { shops, prods } = route.params;
const [prodLike, setprodLike] = useState([]); const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false); const [all, setall] = useState(false);
const [shopProd, setshopProd] = useState([]);
const isFocused = useIsFocused();
const [product, setproduct] = useState(shops ?? []); const [product, setproduct] = useState(shops ?? []);
const [isModalVisible, setModalVisible] = useState(false); const [isModalVisible, setModalVisible] = useState(false);
const [user, setuser] = useState([]);
const [error, seterror] = useState([]);
const [liked, setliked] = useState([]);
const [load, setload] = useState(false);
const toggleModal = () => { const toggleModal = () => {
setModalVisible(!isModalVisible); setModalVisible(!isModalVisible);
}; };
console.log(prodLike); console.log(prodLike);
// useEffect(() => {
// // setrefresh(isrefresh);
// AsyncStorage.getItem("userData")
// .then((pass) => {
// // console.log("mm "+pass._id);
// const userDataArray = JSON.parse(pass);
// setuser(userDataArray);
// get_customer({ id: userDataArray[0]?._id })
// .then((result) => {
// // console.log(result.data);
// if (result.error) {
// seterror(result.error);
// } else {
// setliked(result?.data?.favorites);
// setload(true);
// }
// })
// .catch((error) => {
// // setError(error.message);
// console.log(error.message);
// })
// .finally(() => {
// // setprodIsLoading(false); // Set loading to false when done loading
// });
// })
// .catch((error) => {
// console.log(error + "weeewwww");
// });
// // console.log("get cutomer add :" + user[0]?.login_id);
// }, []);
useEffect(() => {
// setrefresh(isrefresh);
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
setproduct(result?.data?.favorites.vendors?.reverse());
setload(true);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
// console.log("get cutomer add :" + user[0]?.login_id);
}, [isFocused]);
const likeClick = (e) => { const likeClick = (e) => {
setprodLike((prevLikes) => { setprodLike((prevLikes) => {
// Check if e is already included in prodLike // Check if e is already included in prodLike
@ -131,9 +358,68 @@ function Vendors({ route }) {
if (all === true) { if (all === true) {
setproduct([]); setproduct([]);
setall(false) // const updatedFavorites = liked.map((favorite) => {
// const updatedProduct = [];
// return { ...favorite, vendors: updatedProduct };
// });
update_customer({
id: user[0]._id,
body: {
favorites: {
products: liked.products,
vendors: [],
},
},
})
.then((result) => {
console.log(result.data);
if (result.error) {
seterror(result.error);
} else { } else {
setliked(result?.data?.favorites);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
setall(false);
} else {
// const updatedFavorites = liked.map((favorite) => {
const updatedProduct = liked.vendors.filter(
(item, index) => !prodLike.includes(index)
);
// return { ...favorite, vendors: updatedProduct };
// });
update_customer({
id: user[0]._id,
body: {
favorites: {
products: liked.products,
vendors: updatedProduct,
},
},
})
.then((result) => {
console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
setproduct((prevProduct) => { setproduct((prevProduct) => {
// Filter the 'prevProduct' array to exclude items with indices in 'prodLike' // Filter the 'prevProduct' array to exclude items with indices in 'prodLike'
const updatedProduct = prevProduct.filter( const updatedProduct = prevProduct.filter(
@ -170,6 +456,7 @@ function Vendors({ route }) {
liked={prodLike} liked={prodLike}
index={i} index={i}
all={all} all={all}
prods={prods}
/> />
)} )}
containerStyle={styles.container1} containerStyle={styles.container1}
@ -185,11 +472,63 @@ function Vendors({ route }) {
</View> </View>
); );
} }
const MyFavorites = () => { const MyFavorites = ({ prod }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const products = favorite?.find((item) => item.type === "products")?.contents; const [shopProd, setshopProd] = useState([]);
// const products = favorite?.find((item) => item.type === "products")?.contents;
const shops = favorite?.find((item) => item.type === "vendors")?.contents; const shops = favorite?.find((item) => item.type === "vendors")?.contents;
const [user, setuser] = useState([]);
const [error, seterror] = useState([]);
const [liked, setliked] = useState([]);
const [load, setload] = useState(false);
useEffect(() => {
// setrefresh(isrefresh);
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
// console.log(pass)
setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
// const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
// console.log( exists)
// if (exists) {
// console.log( "heyyyy")
// setisLiked(true);
// }
setliked(result?.data?.favorites);
// console.log(result.data.favorites);
// console.log(result?.data?.favorites?.products);
setload(true);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
// console.log("get cutomer add :" + user[0]?.login_id);
}, []);
// console.log(liked[0]?.products+"added")
const revereseProd = liked?.products?.reverse();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
@ -202,13 +541,11 @@ const MyFavorites = () => {
<Text style={styles.headerText}>My Favorite</Text> <Text style={styles.headerText}>My Favorite</Text>
</View> </View>
{load ? (
<View style={styles.wrapper}> <View style={styles.wrapper}>
<Tab.Navigator <Tab.Navigator
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{ 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 tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
}} }}
> >
@ -216,16 +553,17 @@ const MyFavorites = () => {
name="Products" name="Products"
component={Products} component={Products}
options={{ tabBarLabel: "Products" }} options={{ tabBarLabel: "Products" }}
initialParams={{ products: products }} initialParams={{ products: revereseProd }}
/> />
<Tab.Screen <Tab.Screen
name="Vendors" name="Vendors"
component={Vendors} component={Vendors}
options={{ tabBarLabel: "Vendors" }} options={{ tabBarLabel: "Vendors" }}
initialParams={{ shops: shops }} initialParams={{ shops: liked?.vendors.reverse(), prods: prod }}
/> />
</Tab.Navigator> </Tab.Navigator>
</View> </View>
) : null}
</View> </View>
); );
}; };
@ -276,19 +614,16 @@ const styles = StyleSheet.create({
}, },
list: { list: {
width: "100%", width: "100%",
// backgroundColor: "#fff",
}, },
content: { content: {
width: "100%", width: "100%",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
// backgroundColor: "#ffaa00",
}, },
buttons: { buttons: {
position: "absolute", position: "absolute",
flexDirection: "row", flexDirection: "row",
bottom:0 bottom: 0,
}, },
btnCancel: { btnCancel: {
color: "#ff0000", color: "#ff0000",

356
app/pages/profile/MyPurchases.jsx
View File

@ -1,8 +1,15 @@
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import React from "react"; import React, { memo, useRef, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import {
Dimensions,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"; import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import CompletedCard from "../../components/profile/my_purchases/CompletedCard"; import CompletedCard from "../../components/profile/my_purchases/CompletedCard";
import MasonryList from "@react-native-seoul/masonry-list"; import MasonryList from "@react-native-seoul/masonry-list";
@ -10,15 +17,64 @@ import { checkOut } from "../../constants/checkout";
import ToPayCard from "../../components/profile/my_purchases/ToPay"; import ToPayCard from "../../components/profile/my_purchases/ToPay";
import ToShipCard from "../../components/profile/my_purchases/ToShip"; import ToShipCard from "../../components/profile/my_purchases/ToShip";
import ToReceiveCard from "../../components/profile/my_purchases/ToReceive"; import ToReceiveCard from "../../components/profile/my_purchases/ToReceive";
import { useEffect } from "react";
import { get_orders_by_customer } from "../../services/api/controllers/order";
// import { user } from "../../constants/user";
import AsyncStorage from "@react-native-async-storage/async-storage";
const Tab = createMaterialTopTabNavigator(); const Tab = createMaterialTopTabNavigator();
function ToPay() { function ToPay({ route }) {
const { purchase } = route.params;
// const cartPurchases = purchase.cartItems.filter(purchase => purchase.status === "CART");
// console.log(purchase?.filter((item) => item.status === "CART"));
const purch = purchase?.filter(
(item) => item.status === "TO PAY" || item.status === "To Pay"
// (item) => item.status === "Cart" || item.status === "CART"
);
const [product, setProduct] = useState(purch ?? []);
const [isEndReached, setEndReached] = useState(false);
const scrollViewRef = useRef(null);
const [item1, setItem1] = useState(20);
const [prod, setProd] = useState([]);
console.log(item1);
const initialProd = () => {
const init = product?.slice(0, item1) ?? [];
setProd(init);
};
useEffect(() => {
initialProd();
}, [product, item1]);
const addProd = () => {
if (item1 <= purch?.length) {
const newArrayProd = [...prod, ...product?.slice(item1, item1 + 10)];
setProd(newArrayProd);
setItem1(item1 + 10); // Update item1 for the next batch
setEndReached(false);
}
};
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
if (isAtEnd && !isEndReached) {
setEndReached(true);
addProd();
}
};
return ( return (
<View style={styles.tabCon}> <ScrollView
style={styles.tabCon}
ref={scrollViewRef}
onScroll={handleScroll}
>
<MasonryList <MasonryList
data={checkOut.filter((item) => item.status === "to pay")} data={prod ?? []}
keyExtractor={(item) => item.id} keyExtractor={(item, i) => item?._id ?? i}
style={styles.list} style={styles.list}
numColumns={1} numColumns={1}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
@ -27,14 +83,56 @@ function ToPay() {
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
</View> </ScrollView>
); );
} }
function ToShip() { function ToShip({ route }) {
const { purchase } = route.params;
const purch = purchase?.filter(
(item) => item.status === "TO SHIP" || item.status === "To Ship"
);
const [product, setProduct] = useState(purch ?? []);
const [isEndReached, setEndReached] = useState(false);
const scrollViewRef = useRef(null);
const [item1, setItem1] = useState(20);
const [prod, setProd] = useState([]);
console.log(item1);
const initialProd = () => {
const init = product?.slice(0, item1) ?? [];
setProd(init);
};
useEffect(() => {
initialProd();
}, [product, item1]);
const addProd = () => {
if (item1 <= purch?.length) {
const newArrayProd = [...prod, ...product?.slice(item1, item1 + 10)];
setProd(newArrayProd);
setItem1(item1 + 10); // Update item1 for the next batch
setEndReached(false);
}
};
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
if (isAtEnd && !isEndReached) {
setEndReached(true);
addProd();
}
};
return ( return (
<View style={styles.tabCon}> <ScrollView
style={styles.tabCon}
ref={scrollViewRef}
onScroll={handleScroll}
>
<MasonryList <MasonryList
data={checkOut.filter((item) => item.status === "to ship")} data={prod ?? []}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
style={styles.list} style={styles.list}
numColumns={1} numColumns={1}
@ -44,15 +142,56 @@ function ToShip() {
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
</View> </ScrollView>
); );
} }
function ToReceive() { function ToReceive({ route }) {
const { purchase } = route.params;
const purch = purchase?.filter(
(item) => item.status === "To Receive" || item.status === "TO RECEIVE"
);
const [product, setProduct] = useState(purch ?? []);
const [isEndReached, setEndReached] = useState(false);
const scrollViewRef = useRef(null);
const [item1, setItem1] = useState(20);
const [prod, setProd] = useState([]);
console.log(item1);
const initialProd = () => {
const init = product?.slice(0, item1) ?? [];
setProd(init);
};
useEffect(() => {
initialProd();
}, [product, item1]);
const addProd = () => {
if (item1 <= purch?.length) {
const newArrayProd = [...prod, ...product?.slice(item1, item1 + 10)];
setProd(newArrayProd);
setItem1(item1 + 10); // Update item1 for the next batch
setEndReached(false);
}
};
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
if (isAtEnd && !isEndReached) {
setEndReached(true);
addProd();
}
};
return ( return (
<View style={styles.tabCon}> <ScrollView
style={styles.tabCon}
ref={scrollViewRef}
onScroll={handleScroll}
>
<MasonryList <MasonryList
data={checkOut.filter((item) => item.status === "to receive")} data={prod ?? []}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
style={styles.list} style={styles.list}
numColumns={1} numColumns={1}
@ -62,15 +201,56 @@ function ToReceive() {
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
</View> </ScrollView>
); );
} }
function Completed() { function Completed({ route }) {
const { purchase } = route.params;
const purch = purchase?.filter(
(item) => item.status === "Completed" || item.status === "COMPLETED"
);
const [product, setProduct] = useState(purch ?? []);
const [isEndReached, setEndReached] = useState(false);
const scrollViewRef = useRef(null);
const [item1, setItem1] = useState(20);
const [prod, setProd] = useState([]);
console.log(item1);
const initialProd = () => {
const init = product?.slice(0, item1) ?? [];
setProd(init);
};
useEffect(() => {
initialProd();
}, [product, item1]);
const addProd = () => {
if (item1 <= purch?.length) {
const newArrayProd = [...prod, ...product?.slice(item1, item1 + 10)];
setProd(newArrayProd);
setItem1(item1 + 10); // Update item1 for the next batch
setEndReached(false);
}
};
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
if (isAtEnd && !isEndReached) {
setEndReached(true);
addProd();
}
};
return ( return (
<View style={styles.tabCon}> <ScrollView
style={styles.tabCon}
ref={scrollViewRef}
onScroll={handleScroll}
>
<MasonryList <MasonryList
data={checkOut.filter((item) => item.status === "completed")} data={prod ?? []}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
style={styles.list} style={styles.list}
numColumns={1} numColumns={1}
@ -80,11 +260,109 @@ function Completed() {
contentContainerStyle={styles.content} contentContainerStyle={styles.content}
onEndReachedThreshold={0.1} onEndReachedThreshold={0.1}
/> />
</View> </ScrollView>
); );
} }
const MyPurchases = () => { const MyPurchases = ({ route }) => {
const navigation = useNavigation(); const navigation = useNavigation();
const [purchase, setpurchase] = useState(null);
const [purchaseSort, setpurchaseSort] = useState(null);
const [load, setload] = useState(true);
const [user, setuser] = useState([]);
const { tab } = route.params ?? "ToPay";
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("userData")
.then((pass) => {
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
console.log(pass);
get_orders_by_customer({
id: userDataArray[0]?._id,
})
.then((result) => {
console.log("result" + result.data);
if (result.error) {
setError(result.error);
} else {
setpurchase(result.data);
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
const purchaseSorted = result.data?.reduce((acc, item) => {
const shopId = item.items[0].vendor_id;
const shopName = item.items[0].vendor_name;
// const existingShop = acc.find((shop) => shop.shopId === shopId);
// console.log("shop: " + shopName);
// // if (item.status === "CART") {
// if (existingShop) {
// // Shop already exists, add the item to its cartItems array
// existingShop.cartItems.push({ ...item, selected: false }); // Initialize selected to false
// } else {
// Shop doesn't exist, create a new shop object with selected:false
acc.push({
shopname: shopName,
shopId: shopId,
cartItems: [{ ...item, selected: false }],
selected: false,
shippingFee: 0,
}); // Initialize selected to false
// }
// }
// setload(false);
return acc;
}, []);
setpurchaseSort(purchaseSorted);
console.log(purchaseSorted);
setload(false);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
// Fetch vendors and update the state
// setload(true)
}, []);
useEffect(() => {
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
// const purchaseSorted = purchase?.reduce((acc, item) => {
// const shopId = item.items[0].vendor_id;
// const shopName = item.items[0].vendor_name;
// const existingShop = acc.find((shop) => shop.shopId === shopId);
// console.log("shop: " + shopName);
// // if (item.status === "CART") {
// if (existingShop) {
// // Shop already exists, add the item to its cartItems array
// existingShop.cartItems.push({ ...item, selected: false }); // Initialize selected to false
// } else {
// // Shop doesn't exist, create a new shop object with selected:false
// acc.push({
// shopname: shopName,
// shopId: shopId,
// cartItems: [{ ...item, selected: false }],
// selected: false,
// shippingFee: 0,
// }); // Initialize selected to false
// }
// // }
// return acc;
// }, []);
// setpurchaseSort(purchaseSorted);
}, [purchase]);
return ( return (
<View style={styles.container}> <View style={styles.container}>
@ -99,7 +377,9 @@ const MyPurchases = () => {
</View> </View>
<View style={styles.wrapper}> <View style={styles.wrapper}>
{load === false ? (
<Tab.Navigator <Tab.Navigator
initialRouteName={tab ?? "ToPay"}
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{ screenOptions={{
tabBarScrollEnabled: true, // Make sure to set this to true as well tabBarScrollEnabled: true, // Make sure to set this to true as well
@ -112,27 +392,52 @@ const MyPurchases = () => {
name="ToPay" name="ToPay"
component={ToPay} component={ToPay}
options={{ tabBarLabel: "To Pay" }} options={{ tabBarLabel: "To Pay" }}
initialParams={{}} initialParams={{
purchase: purchase.sort((a, b) => {
const dateA = new Date(a.updatedAt);
const dateB = new Date(b.updatedAt);
return dateB - dateA;
}),
}}
/> />
<Tab.Screen <Tab.Screen
name="ToShip" name="ToShip"
component={ToShip} component={ToShip}
options={{ tabBarLabel: "To Ship" }} options={{ tabBarLabel: "To Ship" }}
initialParams={{}} initialParams={{
purchase: purchase.sort((a, b) => {
const dateA = new Date(a.updatedAt);
const dateB = new Date(b.updatedAt);
return dateB - dateA;
}),
}}
/> />
<Tab.Screen <Tab.Screen
name="ToReceive" name="ToReceive"
component={ToReceive} component={ToReceive}
options={{ tabBarLabel: "To Receive" }} options={{ tabBarLabel: "To Receive" }}
initialParams={{}} initialParams={{
purchase: purchase.sort((a, b) => {
const dateA = new Date(a.updatedAt);
const dateB = new Date(b.updatedAt);
return dateB - dateA;
}),
}}
/> />
<Tab.Screen <Tab.Screen
name="Completed" name="Completed"
component={Completed} component={Completed}
options={{ tabBarLabel: "Completed" }} options={{ tabBarLabel: "Completed" }}
initialParams={{}} initialParams={{
purchase: purchase.sort((a, b) => {
const dateA = new Date(a.updatedAt);
const dateB = new Date(b.updatedAt);
return dateB - dateA;
}),
}}
/> />
</Tab.Navigator> </Tab.Navigator>
) : null}
</View> </View>
</View> </View>
); );
@ -178,4 +483,5 @@ const styles = StyleSheet.create({
}, },
}); });
export default MyPurchases; // export default MyPurchases;
export default memo(MyPurchases);

45
app/pages/profile/MyWallet.jsx
View File

@ -1,12 +1,38 @@
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import React from "react"; import React, { useEffect } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import HTMLView from "react-native-htmlview";
import ReceiptCard from "../../components/profile/my_purchases/Receipt";
const ws = new WebSocket("ws://testapi.obpay.online:8080");
const MyWallet = () => { const MyWallet = () => {
const navigation = useNavigation(); const navigation = useNavigation();
useEffect(() => {
ws.onopen = () => {
console.error("WebSocket connected------------------------------------------");
// You can send initial messages after the connection is established if needed
ws.send('Hello, server!');
ws.send(JSON.stringify({ type: "join", userId: "meeeeeeeeeeee" }));
ws.send(
JSON.stringify({
type: "message",
userId: userId,
content: "hi I'm sending notiff",
})
);
};
}, [])
const info = ` <p style='text-align: center;'>&nbsp;</p> <p class='css-1ittmm6' style='text-align: center;' data-text='true'>Uploading your app to TestFlight and Google Play beta can be time-consuming (for example, waiting for the build to run through static analysis before becoming available to testers) and limiting (for example, TestFlight can only have one active build at a time). Both Android and iOS provide alternative mechanisms to distribute apps directly to testers, so they can download and install them to physical devices directly from a web browser as soon as the builds are completed.</p><p class='css-1ittmm6' style='text-align: center;' data-text='true'>EAS Build can help you with this by providing shareable URLs for your builds with instructions on how to get them running, so you can share a single URL with a teammate that'll include all of the information they need to test the app.</p><p class='css-1ittmm6' style='text-align: center;' data-text='true'>&nbsp;</p><h3 style='text-align: center;'><strong>Xiaomi Pad 6</strong>&nbsp;specs</h3><p style='text-align: center;'>11-inch WQHD+ (2880 x 1800) IPS LCD<br>144Hz refresh rate, DCI-P3, 309 ppi, Dolby Vision<br>Corning Gorilla Glass 3<br>Snapdragon 870 chipset<br>8-cores, up to 3.2GHz frequency<br>6, 8GB RAM<br>128, 256GB storage<br>13MP f/2.2 rear<br>8MP f/2.2 selfie shooter<br>Wi-Fi 6<br>Bluetooth 5.2<br>USB Type-C<br>Quad speakers, Dolby Atmos<br>MIUI Pad 14<br>8840mAh battery<br>33W charging rate<br>490g<br>Gravity Gray, Gold, Mist Blue</p><p style='text-align: center;'><img src='https://www.yugatech.com/wp-content/uploads/2023/08/xiaomi-pad-6-camera-closeup.png' alt='Xiaomi Pad 6 Camera Closeup' width='438' height='384'></p><table style='height: 179px; width: 38.637%; margin-left: auto; margin-right: auto;'><thead><tr><th style='width: 9.1612%;'>Minor</th><th style='width: 18.5122%;'>Branch</th><th style='width: 37.5608%;'>Documentation</th><th style='width: 32.3664%;'>Latest</th></tr></thead><tbody><tr><td style='width: 9.1612%;'>next</td><td style='width: 18.5122%;'>master</td><td style='width: 37.5608%;'>-</td><td style='width: 32.3664%;'><a href='https://www.npmjs.com/package/react-native-render-html#'><img src='https://camo.githubusercontent.com/f3215ce1ad3f67dccd657027c0600388714fd781ef05b146dc906828186fd13b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f6e657874' alt='npm' data-canonical-src='https://img.shields.io/npm/v/react-native-render-html/next'></a></td></tr><tr><td style='width: 9.1612%;'>6.3</td><td style='width: 18.5122%;'><a href='https://github.com/meliorence/react-native-render-html/tree/release/6.3'>release/6.3</a></td><td style='width: 37.5608%;'><a href='https://meliorence.github.io/react-native-render-html/' rel='nofollow'>Official Website</a></td><td style='width: 32.3664%;'><a href='https://www.npmjs.com/package/react-native-render-html#'><img src='https://camo.githubusercontent.com/1d647fdaa57a9ecbaabe231319ff37b900429af34c55393d2d348870a98f9215/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f362e33' alt='npm' data-canonical-src='https://img.shields.io/npm/v/react-native-render-html/release/6.3'></a></td></tr><tr><td style='width: 9.1612%;'>5.1&nbsp;&nbsp;</td><td style='width: 18.5122%;'><a href='https://github.com/meliorence/react-native-render-html/tree/release/5.1'>release/5.1</a>&nbsp;&nbsp;</td><td style='width: 37.5608%;'><a href='https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md'>release/5.1/README.md</a></td><td style='width: 32.3664%;'><a href='https://www.npmjs.com/package/react-native-render-html#'><img src='https://camo.githubusercontent.com/e0f61d83694ea428d9b745480ccc1cd47eb788e679357b1ef8820d7c472c779a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f352e31' alt='npm' data-canonical-src='https://img.shields.io/npm/v/react-native-render-html/release/5.1'></a></td></tr><tr><td style='width: 9.1612%;'>4.2&nbsp;&nbsp;</td><td style='width: 18.5122%;'><a href='https://github.com/meliorence/react-native-render-html/tree/release/4.2'>release/4.2</a>&nbsp;&nbsp;</td><td style='width: 37.5608%;'><a href='https://github.com/meliorence/react-native-render-html/blob/release/4.2/README.md'>release/4.2/README.md</a></td><td style='width: 32.3664%;'><a href='https://www.npmjs.com/package/react-native-render-html#'><img src='https://camo.githubusercontent.com/7dc5a29e35774c807232368fc2adcb280f21aa8cb0774edb06ed1fe03a50a13b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f342e32' alt='npm' data-canonical-src='https://img.shields.io/npm/v/react-native-render-html/release/4.2'></a></td></tr></tbody></table><p style='text-align: center;'>&nbsp;</p>`;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
@ -19,10 +45,11 @@ const MyWallet = () => {
<Text style={styles.headerText}>My Wallet</Text> <Text style={styles.headerText}>My Wallet</Text>
</View> </View>
<ScrollView style={styles.wrapper}>
<View style={styles.wrapper}>
<Text style={styles.text}>Content</Text> <Text style={styles.text}>Content</Text>
</View> {/* <ReceiptCard cart={{}}/> */}
{/* <HTMLView value={info + info} stylesheet={styles} /> */}
</ScrollView>
</View> </View>
); );
}; };
@ -33,6 +60,14 @@ const styles = StyleSheet.create({
width: "100%", width: "100%",
height: "100%", height: "100%",
}, },
// img: {
// height: 500,
// width: 100,
// },
p: {
fontWeight: "600",
fontSize: 16,
},
wrapper: { wrapper: {
height: "100%", height: "100%",
width: "100%", width: "100%",

5
app/pages/profile/ViewHistory.jsx
View File

@ -24,7 +24,6 @@ function Products({ route }) {
const [all, setall] = useState(false); const [all, setall] = useState(false);
const [product, setproduct] = useState(products ?? []); const [product, setproduct] = useState(products ?? []);
console.log(prodLike);
const [isModalVisible, setModalVisible] = useState(false); const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => { const toggleModal = () => {
@ -124,9 +123,9 @@ function Vendors({ route }) {
} }
}); });
}; };
const deleteItem = () => { const deleteItem = () => {
toggleModal(); toggleModal();
if (all === true) { if (all === true) {
setproduct([]); setproduct([]);
setall(false) setall(false)
@ -204,9 +203,7 @@ const ViewHistory = () => {
<Tab.Navigator <Tab.Navigator
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{ 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 tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
}} }}
> >

740
app/pages/search/SearchPage.jsx
View File

@ -1,20 +1,531 @@
import React, { useState } from "react"; import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import React, { useEffect, useRef, useState } from "react";
import { import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
ScrollView, ScrollView,
KeyboardAvoidingView, Dimensions,
Platform, TouchableOpacity,
TouchableWithoutFeedback, TextInput,
} from "react-native"; } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import SearchHeader from "../../components/search/Header"; import SearchHeader from "../../components/search/Header";
import ProductCard from "../../components/search/ProductCard";
import ShopCard from "../../components/search/ShopCard";
import { favorite } from "../../constants/favorites";
import MasonryList from "@react-native-seoul/masonry-list";
import { search_product } from "../../services/api/controllers/product";
// import { TouchableOpacity } from "react-native-gesture-handler";
import { search_vendor } from "../../services/api/controllers/vendor";
const height = Dimensions.get("window").height;
import Modal from "react-native-modal";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faFilter } from "@fortawesome/free-solid-svg-icons";
import { useIsFocused, useRoute } from "@react-navigation/native";
const deviceWidth = Dimensions.get("window").width;
const Tab = createMaterialTopTabNavigator();
const SearchPage = () => { function Products({ route }) {
const [unfocus, setunfocus] = useState(false); const { productsU, productAll } = route.params;
const products = productsU?.results?.filter(
(item) => item?.product?.product_type !== "variation"
);
// console.log(products);
const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false);
const [product, setproduct] = useState(products ?? []);
const scrollViewRef = useRef(null);
const [item, setitem] = useState(20);
const [prod, setprod] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const [isFilter, setisFilter] = useState(false);
const [filterProd, setfilterProd] = useState([]);
const [filterData, setfilterData] = useState([]);
const [min, setmin] = useState(null);
const [max, setmax] = useState(null);
const [filtering, setfiltering] = useState(false);
const [filterStart, setfilterStart] = useState(false);
const [isEndReached, setEndReached] = useState(false);
// const initialProd = () => {
// const init = product?.slice(0, item) ?? [];
// setprod(init);
// };
// useEffect(() => {
// initialProd();
// }, [product, item]);
// const addProd = () => {
// if (item <= products?.length) {
// const newArrayProd = [...prod, ...product?.slice(item, item + 10)];
// setprod(newArrayProd);
// setitem(item + 10); // Update item1 for the next batch
// setEndReached(false);
// }
// };
// const handleScroll = (event) => {
// const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
// const isAtEnd =
// layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
// if (isAtEnd && !isEndReached) {
// setEndReached(true);
// addProd();
// }
// };
// const filterApply = () => {
// console.log("filtering");
// const filteredProduct = products; // Assuming products is an array
// let filteredProducts = [...filteredProduct]; // Create a copy of the products array
// if (min !== null || max !== null) {
// const minPrice = min ?? 0;
// const maxPrice = max ?? Number.MAX_VALUE;
// filteredProducts = filteredProducts.filter((product1) => {
// const regularPrice = parseInt(product1?.product?.regular_price) || 0;
// return (
// regularPrice >= parseInt(minPrice, 10) &&
// regularPrice <= parseInt(maxPrice, 10)
// );
// });
// }
// // Update state based on the filtered products
// if (filteredProducts.length > 0) {
// setproduct({ results: filteredProducts }); // Set filtered products (limiting to 20 items)
// console.log({ results: filteredProducts });
// setisFilter(true);
// setfiltering(true);
// } else {
// // setfiltering(true);
// setproduct(products ?? []); // Set original products if no filters applied (limiting to 20 items)
// setisFilter(false);
// // setfiltering(false);
// }
// setModalVisible(false);
// };
// useEffect(() => {
// if (filtering) {
// // console.log("Filtering Applied");
// setprod(product?.results?.slice(0, 20));
// // console.log("final prod" + prod);
// setfiltering(false);
// }
// }, [filtering]);
const initialProd = () => {
const init = product?.slice(0, item) ?? [];
setprod(init);
};
useEffect(() => {
initialProd();
}, [product, item]);
const addProd = () => {
if (item <= products?.length) {
const newArrayProd = [...prod, ...product?.slice(item, item + 10)];
setprod(newArrayProd);
setitem(item + 10);
setEndReached(false);
}
};
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
if (isAtEnd && !isEndReached) {
setEndReached(true);
addProd();
}
};
const filterApply = () => {
console.log("filtering");
let filteredProducts = [...products]; // Create a copy of the products array
const minPrice = min === "" ? null : min; // Treat empty string as null for min
const maxPrice = max === "" ? null : max; // Treat empty string as null for max
if (minPrice !== null || maxPrice !== null) {
filteredProducts = filteredProducts.filter((product1) => {
const regularPrice = parseInt(product1?.product?.regular_price) || 0;
return ( return (
<KeyboardAwareScrollView regularPrice >= parseInt(minPrice || 0, 10) && // Use 0 if minPrice is null
regularPrice <= parseInt(maxPrice || Number.MAX_VALUE, 10) // Use MAX_VALUE if maxPrice is null
);
});
}
// Update state based on the filtered products
if (filteredProducts.length > 0) {
setprod(filteredProducts.slice(0, 20)); // Display filtered products (limiting to 20 items)
setisFilter(true);
setfiltering(true);
} else {
// If no filters applied or no products match the filter, revert to initial product list
initialProd();
setisFilter(false);
setitem(0); // Reset 'item' count to the initial value
setfiltering(false);
}
setModalVisible(false);
};
useEffect(() => {
if (filtering) {
setfiltering(false);
}
}, [filtering]);
// ... other parts of your code
return (
<ScrollView
style={styles.tabCon}
ref={scrollViewRef}
onScroll={handleScroll}
>
<View style={styles.actions}>
{/* <Checkbox value={all} onValueChange={() => setall((prev) => !prev)} /> */}
<TouchableOpacity>
{/* <FontAwesomeIcon icon={faFilter} color={"#888888"} size={25} /> */}
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setModalVisible(!modalVisible);
}}
style={{ flexDirection: "row" }}
>
<FontAwesomeIcon icon={faFilter} color={"#888888"} size={25} />
<Text style={{ flexDirection: "row", paddingLeft: 10 }}>Filter</Text>
</TouchableOpacity>
</View>
{product ? (
<>
{product?.length > 0 ? (
<MasonryList
data={prod ?? []}
keyExtractor={(item) => item._id}
style={styles.list}
numColumns={2}
showsVerticalScrollIndicator={false}
renderItem={({ item, i }) => (
<ProductCard
// like={likeClick}
// liked={prodLike}
productAll={productAll}
index={i}
product={item.product}
vendor={item.vendor}
// all={all}
/>
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
) : (
<View style={{ height: "80%", alignItems: "center" }}>
<Text>No results found</Text>
</View>
)}
</>
) : (
<View style={{ height: "80%", alignItems: "center" }}>
<Text>Search a product</Text>
</View>
)}
{/* <DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={deleteItem}
/> */}
<Modal
// animationType="slide"
animationIn={"slideInRight"}
// transparent={true}
isVisible={modalVisible}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={["right"]}
swipeThreshold="100"
backdropOpacity={0.2}
style={{ margin: 0 }}
// propagateSwipe={true}
deviceWidth={deviceWidth}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.Modal}>
<View style={styles.rightModal}>
{/* <Text>Searchingggg.........</Text> */}
</View>
<View style={styles.leftModal}>
<Text style={{ fontWeight: "500", fontSize: 18 }}>
Search Filter
</Text>
<View style={styles.pricefilter}>
<Text style={styles.inputFilterTextHead}>Price:</Text>
<View style={styles.pricefilterWrap}>
<View style={styles.pricefilterInput}>
<Text style={styles.inputFilterText}>Min:</Text>
<TextInput
style={styles.inputFilterTextInput}
onChangeText={(e) => {
setmin(e);
// min !== "" || min !== " " || min !== null
// ? setfilterStart(false)
// : setfilterStart(true);
}}
value={min}
placeholder=""
keyboardType="numeric"
/>
</View>
<View style={styles.pricefilterInput}>
<Text style={styles.inputFilterText}>Max:</Text>
<TextInput
style={styles.inputFilterTextInput}
onChangeText={(e) => {
setmax(e);
// max !== "" || max !== " " || max !== null
// ? setfilterStart(false)
// : setfilterStart(true);
}}
value={max}
placeholder=""
keyboardType="numeric"
// secureTextEntry={true}
/>
</View>
</View>
</View>
<View style={styles.footerModal}>
<TouchableOpacity
onPress={() => filterApply()}
style={styles.footerModalBtn}
// disabled={filterStart?false:true}
>
<Text style={styles.footerModalBtnTxt}>Apply</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</ScrollView>
);
}
function Vendors({ route }) {
const { shops, product } = route.params;
const [prodLike, setprodLike] = useState([]);
const [all, setall] = useState(false);
const [shop, setshop] = useState(shops ?? []);
const scrollViewRef = useRef(null);
const [item, setitem] = useState(20);
const [isEndReached, setEndReached] = useState(false);
useEffect(() => {
setshop(shop?.splice(1, item) ?? []);
console.log("length " + shops?.length + " item " + item);
}, []);
console.log(shops);
const [isModalVisible, setModalVisible] = useState(false);
// console.log(product+"here is the prodductttsss----------------------------------------------------------------");
useEffect(() => {
if (item <= shops?.length) {
setshop([...shop, ...shop?.slice(item, item + 10)]);
}
}, [item]);
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 200;
if (isAtEnd) {
// You've reached the end of the ScrollView
setEndReached(true);
console.log("end here" + item);
if (item <= shops?.length) {
setitem(item + 10);
}
// setEndReached(false);
// console.log("item" + item);
}
};
return (
<ScrollView
ref={scrollViewRef}
onScroll={handleScroll}
style={styles.tabCon}
>
<View style={styles.actions}></View>
{shops ? (
<>
{shops.length > 0 ? (
<MasonryList
data={shop ?? null}
keyExtractor={(item) => item.id}
style={styles.list}
numColumns={1}
showsVerticalScrollIndicator={false}
renderItem={({ item, i }) => (
<ShopCard product={product} shop={item} index={i} />
)}
containerStyle={styles.container1}
contentContainerStyle={styles.content}
onEndReachedThreshold={0.1}
/>
) : (
<View style={{ height: "90%" }}>
<Text style={{ textAlign: "center" }}>No vendor found</Text>
</View>
)}
</>
) : (
<View style={{ height: "90%" }}>
<Text>Searchingggg.........</Text>
</View>
)}
{/* <DeleteConfirmationModal
isVisible={isModalVisible}
onCancel={toggleModal}
onConfirm={deleteItem}
/> */}
</ScrollView>
);
}
const SearchPage = ({ product, productAll }) => {
const route = useRoute();
const { cat } = route?.params?.cat ?route?.params: "";
// console.log(prodd)
const [unfocus, setunfocus] = useState(false);
const [loading, setloading] = useState(false);
const [products, setproducts] = useState([]);
const [vendors, setvendors] = useState([]);
const [vendorsearch, setvendorsearch] = useState([]);
const [isloaded, setisloaded] = useState(0);
const isFocused = useIsFocused();
const [search, setsearch] = useState(false);
// const products = favorite?.find((item) => item.type === "products")?.contents;
const shops = favorite?.find((item) => item.type === "vendors")?.contents;
useEffect(() => {
console.log('cat '+cat)
if (cat) {
searchProduct(cat);
}
}, [cat]);
const searchProduct = (search) => {
setloading(true);
search_vendor({
searchData: search,
})
.then((result) => {
// console.log(result.data);
if (result.error) {
setError(result.error);
setvendorsearch(["error occured"]);
} else {
if (result.data?.results.length < 1 || undefined) {
setvendorsearch([]);
} else {
setvendorsearch(result.data.results);
// setisloaded(isloaded + 1);
// console.log("vendor" + result.data.results);
}
// console.log("length on search vendor " + result.data?.results);
search_product({
searchData: search,
})
.then((resultProd) => {
// console.log(resultProd.data);
if (resultProd.error) {
setError(resultProd.error);
setproducts(["error occured"]);
} else {
if (resultProd.data?.results.length < 1 || undefined) {
setproducts([]);
} else {
setproducts(resultProd.data);
// console.log("prodd" + result.data.results);
}
setisloaded(true);
// console.log("length on search " + result.data?.results.length);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
// setloading(false);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
};
useEffect(() => {
// Initialize an empty object to keep track of unique vendors
const vendors1 = [];
console.log(isloaded);
// Iterate through the original array and add vendors to the array
if (isloaded === true) {
products?.results?.forEach((result) => {
const vendor = result.vendor;
const vendorId = vendor._id;
// Check if the vendor is not already in the vendors array
if (vendorsearch !== []) {
if (
!vendors1?.some((v) => v._id === vendorId) &&
!vendorsearch?.some((v) => v._id === vendorId)
) {
vendors1.push(vendor);
}
} else {
if (!vendors1?.some((v) => v._id === vendorId)) {
vendors1.push(vendor);
}
}
});
setvendors(vendors1);
// console.log([...vendorsearch,[vendors]])
setvendorsearch((prevVendorSearch) => [...prevVendorSearch, ...vendors1]);
setisloaded(false);
setloading(false);
}
}, [isloaded]);
return (
<View
// keyboardShouldPersistTaps="always" // keyboardShouldPersistTaps="always"
resetScrollToCoords={{ x: 0, y: 0 }} resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={true} scrollEnabled={true}
@ -22,19 +533,48 @@ const SearchPage = () => {
> >
<View style={styles.wrapper}> <View style={styles.wrapper}>
<View style={styles.header}> <View style={styles.header}>
<SearchHeader unfocus={unfocus} /> <SearchHeader
unfocus={unfocus}
searchProduct={searchProduct}
cat={cat ?? null}
/>
</View> </View>
<View style={styles.wrapper}> {/* <View style={styles.wrapper}> */}
<Text>Searchingggg.........</Text> {loading === true ? (
<View style={{ height: "90%" }}>
<Text>Searching.........</Text>
</View>
) : (
<Tab.Navigator
scrollEnabled={true} // Set scrollEnabled to true to enable horizontal scrolling
screenOptions={{
tabBarIndicatorStyle: { backgroundColor: "#ffaa00" }, // Customize the indicator style
}}
>
<Tab.Screen
name="Products"
component={Products}
options={{ tabBarLabel: "Products" }}
initialParams={{ productsU: products, productAll: productAll }}
/>
<Tab.Screen
name="Vendors"
component={Vendors}
options={{ tabBarLabel: "Vendors" }}
initialParams={{ shops: vendorsearch, product: product }}
/>
</Tab.Navigator>
)}
</View> </View>
</View> </View>
</KeyboardAwareScrollView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
width: "100%",
height: "100%",
}, },
header: { header: {
left: 0, left: 0,
@ -45,9 +585,187 @@ const styles = StyleSheet.create({
width: "100%", width: "100%",
}, },
wrapper: { wrapper: {
// justifyContent: "center",
// alignItems: "center",
height: "100%",
width: "100%",
marginBottom: 20,
},
list: {
width: "100%",
height: "100%",
justifyContent: "center",
padding: 5,
},
container1: {
width: "100%",
height: "100%",
},
tabCon: {
width: "100%",
height: "100%",
},
actions: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 10,
},
content: {
width: "100%",
alignItems: "center",
height: "100%",
justifyContent: "center",
},
Modal: {
width: "100%",
height: "100%",
// backgroundColor: "#ffffff",
flexDirection: "row",
// right:0
},
rightModal: {
width: "10%",
height: "100%",
backgroundColor: "#ffffff20",
// right:0
},
leftModal: {
width: "90%",
height: "100%",
backgroundColor: "#ffffff",
right: 0,
padding: 15,
},
pricefilter: {
width: "100%",
padding: 10,
marginTop: 20,
justifyContent: "center",
borderBottomWidth: 1,
// borderRadius:5,
borderColor: "#d6d6d6",
// alignItems: "center",
},
pricefilterWrap: {
flexDirection: "row",
width: "80%",
padding: 10,
justifyContent: "space-between",
},
pricefilterInput: {
flexDirection: "row",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
inputFilterTextInput: {
borderWidth: 1,
borderRadius: 5,
borderColor: "#d6d6d6",
backgroundColor: "#fafafa",
padding: 5,
width: "50%",
},
inputFilterText: {
paddingRight: 15,
},
inputFilterTextHead: {
paddingRight: 15,
fontWeight: "600",
},
footerModal: {
position: "absolute",
bottom: 10,
width: "100%",
justifyContent: "center",
alignItems: "center",
zIndex: 100,
},
footerModalBtn: {
// width: "80%",
borderRadius: 50,
padding: 10,
paddingHorizontal: 80,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#ffaa00",
},
footerModalBtnTxt: {
letterSpacing: 0.5,
textTransform: "uppercase",
color: "#fff",
fontWeight: "600",
fontSize: 16,
},
}); });
export default SearchPage; export default SearchPage;
// const filterApply = () => {
// console.log("filtering");
// const filters = {
// minPrice: min,
// maxPrice: max,
// };
// const filteredProduct = products?.results;
// // let filteredProduct = products;
// let filteredProducts = [];
// // console.log(filteredProduct);
// if (filters.minPrice !== null || filters.maxPrice !== null) {
// const minPrice = filters.minPrice ?? 0;
// const maxPrice = filters.maxPrice ?? 0;
// filteredProducts = filteredProduct?.filter(
// (product1) =>
// parseInt(product1.product.regular_price) >= parseInt(minPrice) &&
// parseFloat(product1.product.regular_price) <= parseInt(maxPrice)
// );
// console.log("filtered" + filteredProducts);
// // setfilterProd(filteredProducts);
// setproduct(filterProd);
// // setfilterProd(filteredProducts);
// setisFilter(true);
// setfiltering(true)
// setModalVisible(false);
// } else {
// setisFilter(false);
// setModalVisible(false);
// }
// // if (filters.category) {
// // filteredProducts = filteredProducts.filter(
// // (product) => product.category === filters.category
// // );
// // }
// // if (filters.shipping) {
// // filteredProducts = filteredProducts.filter(
// // (product) =>
// // product.shipping.toLowerCase() === filters.shipping.toLowerCase()
// // );
// // }
// // Add more conditions for other types of filters if needed
// };
// useEffect(() => {
// if (isFilter) {
// console.log("filtering new")
// console.log(product)
// setprod(product ?? []);
// // setisFilter(false)
// setfiltering(false)
// } else {
// setproduct(products);
// setfiltering(false)
// }
// }, [filtering]);

488
app/pages/shop/ShopSinglePage.jsx Normal file
View File

@ -0,0 +1,488 @@
import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { faArrowLeft, faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useRef, useState } from "react";
import {
Dimensions,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Tab from "../../components/shop/Tab";
import {
get_customer,
update_customer,
} from "../../services/api/controllers/customers";
import { get_products_by_vendor } from "../../services/api/controllers/product";
import { get_vendor } from "../../services/api/controllers/vendor";
const ShopSinglePage = ({ route,productList }) => {
const navigation = useNavigation();
const { product } = route.params;
const [prod, setprod] = useState([]);
const [products, setproducts] = useState([]);
const scrollViewRef = useRef(null);
const [isEndReached, setEndReached] = useState(false);
const [user, setuser] = useState([]);
const [error, seterror] = useState([]);
const [item, setitem] = useState(20);
const [liked, setliked] = useState([]);
const [isLiked, setisLiked] = useState(false);
console.log(product);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
if (liked) {
console.log(liked?.vendors);
const exists = liked?.vendors?.some(
(prod) => prod._id === product?._id
);
console.log("exist" + exists);
console.log("product" + product?._id);
if (
exists !== [] &&
exists &&
exists !== "" &&
exists !== undefined &&
exists !== exists?.length < 0 &&
exists !== " "
) {
console.log("exx");
setisLiked(true);
}
}
}, [liked]);
useEffect(() => {
// setrefresh(isrefresh);
AsyncStorage.getItem("userData")
.then((pass) => {
// console.log("mm "+pass._id);
const userDataArray = JSON.parse(pass);
setuser(userDataArray);
get_customer({ id: userDataArray[0]?._id })
.then((result) => {
// console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
})
.catch((error) => {
console.log(error + "weeewwww");
});
// console.log("get cutomer add :" + user[0]?.login_id);
}, []);
useEffect(() => {
get_products_by_vendor({
id: product._id,
})
.then((result) => {
if (result.status === 200) {
console.log("successful get vendor products: " + result.data);
// setvendorName(result.data.user_login);
setproducts(result.data.filter(
(item) => item.product_type !== "variation" &&
item.product_image !== "" &&
item.product_image !== null
));
}
})
.catch((err) => {
console.error(err);
});
}, []);
useEffect(() => {
setprod(products.splice(0, item ?? 0));
}, [products]);
useEffect(() => {
// if (isEndReach===true) {
// console.log("onEndReached event triggered");
// console.log("item:", item);
// console.log("product length:", product.length);
if (item <= products.length) {
// setprod(product.splice(1, item));
setprod([...prod, ...products.slice(item, item + 10)]);
// setitem(item + 10);
}
// }
}, [item]);
const handleScroll = (event) => {
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
const isAtEnd =
layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
if (isAtEnd) {
// You've reached the end of the ScrollView
setEndReached(true);
console.log("end here");
setitem(item + 15);
// setEndReached(false);
// console.log("item" + item);
}
};
const likeClicked = () => {
if (!isLiked) {
// if (liked?.length > 0 && liked !== undefined && liked !== []) {
const like = liked;
like?.vendors?.push(product);
update_customer({
id: user[0]._id,
body: {
favorites: like,
},
})
.then((result) => {
console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
setisLiked(true);
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
} else {
// const updatedFavorites = liked.map((favorite) => {
const updatedProduct = liked.vendors.filter(
(prod) => prod._id !== product?._id
);
// return { ...favorite, vendors: updatedProduct };
// });
const fave = {
products:liked?.products ,
vendors: updatedProduct,
};
update_customer({
id: user[0]._id,
body: {
favorites: fave,
},
})
.then((result) => {
console.log(result.data);
if (result.error) {
seterror(result.error);
} else {
setliked(result?.data?.favorites);
setisLiked(false);
// setaddreses(result.data.address);
// toast.show("Successfully changed the Billing Address!", {
// type: "success",
// placement: "top",
// duration: 2000,
// offset: 30,
// animationType: "slide-in",
// });
}
})
.catch((error) => {
// setError(error.message);
console.log(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}
};
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => navigation.goBack()}
style={styles.backIcon}
>
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
</TouchableOpacity>
</View>
<ScrollView
style={styles.wrapper}
ref={scrollViewRef}
onScroll={handleScroll}
>
<View style={styles.top}>
<View style={styles.topWrap}>
<View style={styles.topBanner}>
<Image
style={styles.imgs}
source={{
uri: product?.vendor_banner ?? product?.vendor_image ?? "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/>
</View>
<View style={styles.topDetails}>
<View style={styles.topDetailsMain}>
<View style={styles.topDetailsMainProfile}>
<Image
style={styles.topDetailsMainProfileImg}
source={{
uri: product?.vendor_image ?? "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
}}
/>
</View>
<View style={styles.topDetailsMainProfileDetails}>
<View style={styles.topDetailsMainProfileDetailsContents}>
<Text style={styles.text} numberOfLines={1}>
{product.user_login}
</Text>
<View style={styles.rateCon}>
<>
<Text style={styles.textHead}>Address: </Text>
<Text style={styles.textRate}>
{product?.address[0]?.city}, {product?.address[0]?.province}{" "}
</Text>
</>
</View>
<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??0} ({product.raterTotal??0})
</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??0}
</Text>
</>
{/* ) : (
<Text>No rating </Text>
)} */}
</View>
</View>
</View>
<TouchableOpacity
style={styles.topDetailsMainProfileDetailsFollow}
onPress={() => {
likeClicked();
}}
>
{isLiked ? (
<FontAwesomeIcon
icon={faHeart}
color={"#d40000"}
size={20}
/>
) : (
<FontAwesomeIcon
icon={faHeart}
color={"#c0c0c0"}
size={20}
/>
)}
{/* <Text style={styles.textFollow} numberOfLines={1}>
Follow
</Text> */}
</TouchableOpacity>
</View>
<View style={styles.bottomDetails}>
{/* <Text style={styles.textHead2}>Address: </Text> */}
<View style={styles.bottomDetailsCat}></View>
</View>
</View>
</View>
</View>
<View style={styles.bottom}>
<Tab info={product.info} prod={prod} item={item} productList={productList}/>
</View>
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#ffffff",
width: "100%",
height: "100%",
flex: 1,
},
wrapper: {
width: "100%",
height: "100%",
},
header: {
// position: "fixed",
width: "100%",
top: 0,
paddingVertical: 10,
marginBottom: 5,
marginLeft: 15,
zIndex: 10,
// backgroundColor: "#ff0909",
},
backIcon: {
// width:10
},
imgs: {
width: "100%",
height: 220,
resizeMode: "cover",
margin: "auto",
// borderRadius: 10,
},
tabs: {
height: 80,
width: "100%",
position: "absolute",
bottom: 100,
},
top: {
width: "100%",
// top:-20,
alignItems: "center",
justifyContent: "center",
},
topWrap: {
width: "100%",
alignItems: "center",
justifyContent: "center",
},
topBanner: {
width: "100%",
},
topDetails: {
width: "100%",
},
topDetailsMain: {
width: "100%",
flexDirection: "row",
justifyContent: "space-between",
paddingHorizontal: 10,
// backgroundColor: "#ff3131",
paddingTop: 10,
},
topDetailsMainProfile: {
width: 110,
height: 110,
borderRadius: 200,
top: -30,
borderColor: "#dddd",
borderWidth: 1,
backgroundColor: "#fff",
justifyContent: "center",
alignItems: "center",
},
topDetailsMainProfileImg: {
width: 97,
height: 97,
borderRadius: 200,
borderColor: "#dddd",
borderWidth: 1,
},
topDetailsMainProfileDetails: {
width: "55%",
},
topDetailsMainProfileDetailsContents: {
margin: 0,
},
topDetailsMainProfileDetailsFollow: {
borderColor: "#dddd",
borderWidth: 1,
padding: 0,
paddingHorizontal: 15,
flexDirection: "row",
borderRadius: 50,
height: 40,
justifyContent: "space-around",
alignItems: "center",
marginTop: 20,
},
text: {
fontSize: 15,
fontWeight: "900",
textTransform: "uppercase",
color: "#333",
letterSpacing: 0.5,
},
textFollow: {
fontSize: 10,
fontWeight: "900",
textTransform: "uppercase",
color: "#ff0000",
letterSpacing: 0.5,
marginLeft: 5,
},
rateCon: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 3,
},
textHead: {
fontSize: 10,
color: "#292929",
},
textRate: {
fontSize: 11,
color: "#838383",
textTransform: "capitalize",
},
bottom: {
// width: "100%",
// height:'100%',
borderColor: "#dddd",
borderWidth: 1,
},
bottomDetails: {
width: "100%",
paddingBottom: 10,
paddingHorizontal: 20,
},
textHead2: {
fontSize: 13,
color: "#292929",
fontWeight: "600",
},
});
export default ShopSinglePage;

127
app/routes/route.jsx
View File

@ -1,5 +1,5 @@
import { NavigationContainer } from "@react-navigation/native"; import { NavigationContainer, useNavigation } from "@react-navigation/native";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { useWindowDimensions, View } from "react-native"; import { useWindowDimensions, View } from "react-native";
import { createStackNavigator } from "@react-navigation/stack"; import { createStackNavigator } from "@react-navigation/stack";
import Main from "../pages/home/main"; import Main from "../pages/home/main";
@ -16,45 +16,125 @@ import ViewHistory from "../pages/profile/ViewHistory";
import MyFavorites from "../pages/profile/MyFavorites"; import MyFavorites from "../pages/profile/MyFavorites";
import MyWallet from "../pages/profile/MyWallet"; import MyWallet from "../pages/profile/MyWallet";
import MyPurchases from "../pages/profile/MyPurchases"; import MyPurchases from "../pages/profile/MyPurchases";
import ShopSinglePage from "../pages/shop/ShopSinglePage";
import CheckOutMultiple from "../pages/cart/CheckOutMultiple";
import PaymentoptionMulti from "../pages/cart/Paymentoption";
import ShippingOptionMulti from "../pages/cart/ShippingOption";
import AddressSelectionMulti from "../pages/cart/AddressSelection";
import Register from "../pages/auth/Register";
import Login from "../pages/auth/Login";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Address from "../pages/address/Address";
import Addresses from "../pages/address/Addresses";
import ForgotPassword from "../pages/auth/ForgotPassword";
import AccountAndSecurity from "../pages/profile/AccountAndSecurity";
import { get_all_vendors } from "../services/api/controllers/vendor";
import { get_all_products } from "../services/api/controllers/product";
import AddressCheckout from "../pages/address/AddressCheckout";
const Stack = createStackNavigator(); const Stack = createStackNavigator();
const Route = () => { const Route = () => {
const { height, width } = useWindowDimensions(); const { height, width } = useWindowDimensions();
const [cartList, setcartList] = useState([]); const [cartList, setcartList] = useState([]);
const [user, setuser] = useState(false);
const [product, setproduct] = useState([]);
const [products, setproducts] = useState([]);
// const navigation = useNavigation();
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
AsyncStorage.getItem("AccessToken")
.then((pass) => {
pass === null ? setuser(false) : setuser(true);
})
.catch((error) => {
console.log(error + "weeewwww");
});
}, []);
useEffect(() => {
/* ---------------Check for the user saved email--------------- */
get_all_products()
.then((result) => {
if (result.error) {
setError(result.error);
} else {
const filtered = result.data.filter(
(item) =>
item.product_type !== "variation" &&
item.product_image !== "" &&
item.product_image !== null
);
const filtered1 = result.data.filter(
(item) =>
item.product_type === "variation" &&
item.product_image !== "" &&
item.product_image !== null
);
setproduct(filtered);
setproducts(filtered1);
}
})
.catch((error) => {
setError(error.message);
})
.finally(() => {
// setprodIsLoading(false); // Set loading to false when done loading
});
}, []);
return ( return (
<NavigationContainer> <NavigationContainer>
<View <View
style={{ style={{
// flex: 1,
backgroundColor: "#fff", backgroundColor: "#fff",
opacity: 1, opacity: 1,
width: "100%", width: "100%",
height: "100%", height: "100%",
// minHeight: height,
// paddingTop:15
}} }}
> >
<Stack.Navigator initialRouteName="Home"> <Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Register" options={{ headerShown: false }}>
{(props) => <Register {...props} />}
</Stack.Screen>
<Stack.Screen name="Login" options={{ headerShown: false }}>
{(props) => <Login {...props} />}
</Stack.Screen>
<Stack.Screen name="ForgotPassword" options={{ headerShown: false }}>
{(props) => <ForgotPassword {...props} />}
</Stack.Screen>
<Stack.Screen name="Home" options={{ headerShown: false }}> <Stack.Screen name="Home" options={{ headerShown: false }}>
{(props) => <Main {...props} cartList={cartList} />} {(props) => <Main {...props} cartList={cartList} />}
</Stack.Screen> </Stack.Screen>
<Stack.Screen name="Search" options={{ headerShown: false }}> <Stack.Screen name="Search" options={{ headerShown: false }}>
{(props) => <SearchPage {...props} />} {(props) => (
<SearchPage product={product} productAll={products} {...props} />
)}
</Stack.Screen> </Stack.Screen>
<Stack.Screen name="Product" options={{ headerShown: false }}> <Stack.Screen name="Product" options={{ headerShown: false }}>
{(props) => ( {(props) => (
<ProductSinglePage <ProductSinglePage
{...props} {...props}
cartList={cartList} cartList={cartList}
prod={products}
setcartList={setcartList} setcartList={setcartList}
/> />
)} )}
</Stack.Screen> </Stack.Screen>
<Stack.Screen name="Shop" options={{ headerShown: false }}>
{(props) => <ShopSinglePage productList={products} {...props} />}
</Stack.Screen>
<Stack.Screen name="CheckOut" options={{ headerShown: false }}> <Stack.Screen name="CheckOut" options={{ headerShown: false }}>
{(props) => <CheckOut {...props} />} {(props) => <CheckOut {...props} />}
</Stack.Screen> </Stack.Screen>
<Stack.Screen
name="CheckOutMultiple"
options={{ headerShown: false }}
>
{(props) => <CheckOutMultiple {...props} />}
</Stack.Screen>
<Stack.Screen name="Paymentoption" options={{ headerShown: false }}> <Stack.Screen name="Paymentoption" options={{ headerShown: false }}>
{(props) => <Paymentoption {...props} />} {(props) => <Paymentoption {...props} />}
</Stack.Screen> </Stack.Screen>
@ -67,14 +147,41 @@ const Route = () => {
> >
{(props) => <AddressSelection {...props} />} {(props) => <AddressSelection {...props} />}
</Stack.Screen> </Stack.Screen>
<Stack.Screen
name="PaymentoptionMulti"
options={{ headerShown: false }}
>
{(props) => <PaymentoptionMulti {...props} />}
</Stack.Screen>
<Stack.Screen
name="ShippingOptionMulti"
options={{ headerShown: false }}
>
{(props) => <ShippingOptionMulti {...props} />}
</Stack.Screen>
<Stack.Screen
name="AddressSelectionMulti"
options={{ headerShown: false }}
>
{(props) => <AddressSelectionMulti {...props} />}
</Stack.Screen>
<Stack.Screen name="MyPurchases" options={{ headerShown: false }}> <Stack.Screen name="MyPurchases" options={{ headerShown: false }}>
{(props) => <MyPurchases {...props} />} {(props) => <MyPurchases {...props} />}
</Stack.Screen> </Stack.Screen>
<Stack.Screen name="Address" options={{ headerShown: false }}>
{(props) => <Addresses {...props} />}
</Stack.Screen>
<Stack.Screen name="AddressCreate" options={{ headerShown: false }}>
{(props) => <Address {...props} />}
</Stack.Screen>
<Stack.Screen name="AddressCreate1" options={{ headerShown: false }}>
{(props) => <AddressCheckout {...props} />}
</Stack.Screen>
<Stack.Screen name="MyWallet" options={{ headerShown: false }}> <Stack.Screen name="MyWallet" options={{ headerShown: false }}>
{(props) => <MyWallet {...props} />} {(props) => <MyWallet {...props} />}
</Stack.Screen> </Stack.Screen>
<Stack.Screen name="MyFavorites" options={{ headerShown: false }}> <Stack.Screen name="MyFavorites" options={{ headerShown: false }}>
{(props) => <MyFavorites {...props} />} {(props) => <MyFavorites prod={product} {...props} />}
</Stack.Screen> </Stack.Screen>
<Stack.Screen name="ViewHistory" options={{ headerShown: false }}> <Stack.Screen name="ViewHistory" options={{ headerShown: false }}>
{(props) => <ViewHistory {...props} />} {(props) => <ViewHistory {...props} />}
@ -85,6 +192,12 @@ const Route = () => {
<Stack.Screen name="AccountSettings" options={{ headerShown: false }}> <Stack.Screen name="AccountSettings" options={{ headerShown: false }}>
{(props) => <AccountSettings {...props} />} {(props) => <AccountSettings {...props} />}
</Stack.Screen> </Stack.Screen>
<Stack.Screen
name="AccountAndSecurity"
options={{ headerShown: false }}
>
{(props) => <AccountAndSecurity {...props} />}
</Stack.Screen>
</Stack.Navigator> </Stack.Navigator>
</View> </View>
</NavigationContainer> </NavigationContainer>

13
app/services/addressApi/ApiConfig.js Normal file
View File

@ -0,0 +1,13 @@
import axios from "axios";
/* --------Connecting to the endpoint server------- */
export const ApiConnect4 = axios.create({
// baseURL: "http://localhost:3000/api",
// baseURL: "https://gate.obananapay.com/api/",
baseURL: "https://psgc.gitlab.io/api/",
//
responseType: "json",
// withCredentials: true,
});
export default ApiConnect4;

114
app/services/addressApi/address.js Normal file
View File

@ -0,0 +1,114 @@
import ApiConnect4 from "./ApiConfig";
export const get_regions = async (data) => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect4(`regions/`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get address api");
return error;
}
};
export const get_provinces = async (data) => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect4(`provinces/`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get address api");
return error;
}
};
export const get_manila_cities = async (data) => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect4(`regions/${data.id}/cities/`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get address api");
return error;
}
};
export const get_cities = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect4(
`provinces/${data.id}/cities-municipalities/`,
{
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
}
);
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get address api");
return error;
}
};
export const get_barangays = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect4(
`/cities-municipalities/${data.id}/barangays/`,
{
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
}
);
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get address api");
return error;
}
};

14
app/services/api/ApiConfig.js Normal file
View File

@ -0,0 +1,14 @@
import axios from "axios";
/* --------Connecting to the endpoint server------- */
const ApiConnect = axios.create({
// baseURL: "http://143.42.66.33:8000/api/v1/",
// baseURL: "https://api.obanana.com/api/v1/",
baseURL: "https://api.obanana.shop/api/v1/",
// baseURL:'https://gate.obpay.online/api/',
responseType: "json",
withCredentials: true,
});
export default ApiConnect;

93
app/services/api/controllers/auth.js Normal file
View File

@ -0,0 +1,93 @@
import ApiConnect from "../ApiConfig";
export const user_login = async (data) => {
// console.log(data)
try {
const result = await ApiConnect("login", {
method: "POST",
data: data,
// withCredentials: true,
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed login api");
return error;
}
};
// export const user_login = async (data) => {
// try {
// const result = await axios.post("http://localhost:3000/api//login", data, { withCredentials: true });
// return result;
// } catch (error) {
// console.log(error);
// console.log(error + " failed login api");
// return error;
// }
// };
export const register_user = async (data) => {
try {
const result = await ApiConnect("register", {
method: "POST",
data: data,
// withCredentials: true,
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed register api");
return error;
}
};
export const get_user_token = async (data) => {
try {
const result = await ApiConnect("profile", {
method: "GET",
headers: {
Authorization: `Bearer ${data.token}`,
},
// withCredentials: true,
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed user api");
return error;
}
};
export const forgot_password = async (data) => {
// console.log(data)
try {
const result = await ApiConnect("forgot-password", {
method: "POST",
data: data.body,
// withCredentials: true,
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed forgot password email api");
return error;
}
};
export const change_password = async (data) => {
// console.log(data)
// try {
const result = await ApiConnect("change-password", {
method: "POST",
data: data.body,
// withCredentials: true,
});
return result;
// } catch (error) {
// console.log(error);
// console.log(error + "failed change password email api");
// return error;
// }
};

178
app/services/api/controllers/customers.js Normal file
View File

@ -0,0 +1,178 @@
import ApiConnect from "../ApiConfig";
//Get All vendors
export const get_all_customers = async () => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect(`customers`, {
method: "GET",
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get all customers api");
return error;
}
};
//Get a notification
export const get_customer = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`customers/${data.id}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get customer api");
return error;
}
};
export const get_customer_login_id = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`customers/login_id/${data.id}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get customer login api");
return error;
}
};
export const search_customer = async (data) => {
// console.log(data)
try {
if (!data.searchData) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`customers/search?q=${data.searchData}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get product api");
return error;
}
};
//CREATE customer
// export const create_customer = async (data) => {
// // console.log(data)
// try {
// const result = await ApiConnect(`customers`, {
// method: "POST",
// data: data.body,
// // headers: {
// // Authorization: `Bearer ${data.token}`,
// // },
// });
// console.log("created");
// return result;
// } catch (error) {
// console.log(error);
// console.log(error + "failed create customer api");
// return error;
// }
// };
export const create_customer = async (data) => {
try {
const formData = new FormData();
// Add your form data fields here
formData.append('first_name', data.first_name);
formData.append('last_name', data.last_name);
formData.append('user_email', data.user_email);
formData.append('phone_number', data.phone_number);
formData.append('role', data.role);
formData.append('login_id', data.login_id);
const result = await ApiConnect('customers', {
method: 'POST',
data: formData, // Use the FormData object as the body
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
console.log('Customer created successfully'+ result.status);
return result;
} catch (error) {
console.error('Error creating customer:', error);
return error;
}
};
export const update_customer = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
console.log(data.body);
const result = await ApiConnect(`customers/${data.id}`, {
method: "PATCH",
data: data.body,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error + "failed update customer api");
console.log(data);
return error;
}
};
export const uploadImage = async (imageData) => {
try {
const formData = new FormData();
// Add image data to FormData
formData.append('image_id', imageData.image_id);
formData.append('category', imageData.category);
formData.append('image', imageData.imageFile); // Assuming 'imageFile' contains the image file
const result = await ApiConnect('upload_image', {
method: 'POST',
data: formData,
// Add headers or authorization if required
});
console.log('Image uploaded successfully', result.status);
return result;
} catch (error) {
console.error('Error uploading image:', error);
return error;
}
};

223
app/services/api/controllers/order.js Normal file
View File

@ -0,0 +1,223 @@
import AsyncStorage from "@react-native-async-storage/async-storage";
import ApiConnect from "../ApiConfig";
var token = "";
//Get All vendors
function getToken() {
AsyncStorage.getItem("AccessToken")
.then((pass) => {
if (pass) {
token = pass;
}
})
.catch((error) => {
console.log(error + "weeewwww");
});
}
export const get_all_orders = async () => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect(`orders`, {
method: "GET",
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get all orders api");
return error;
}
};
//Get a notification
export const get_order = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`orders/${data.id}`, {
method: "GET",
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get order api");
return error;
}
};
export const get_orders_by_customer = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`orders/customer/${data.id}`, {
method: "GET",
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get order apii");
return error;
}
};
//CREATE order
export const create_order = async (data) => {
// console.log(data)
// getToken();
try {
// var token2 = "";
// AsyncStorage.getItem("AccessToken")
// .then((pass) => {
// if (pass) {
// token2 = pass;
// }
// })
// .catch((error) => {
// console.log(error + "weeewwww");
// });
// // if (token2) {
// console.log(token2 + "weeewwww===============");
const result = await ApiConnect(`orders`, {
method: "POST",
data: data.body,
headers: {
Authorization: `Bearer ${data.token}`,
},
});
console.log("created");
return result;
// }
} catch (error) {
console.log(token);
console.log(error);
console.log(error + "failed create order api");
return error;
}
};
export const update_order = async (data) => {
// console.log(data)
getToken();
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`orders/${data.id}`, {
method: "PATCH",
data: data.body,
headers: {
Authorization: `Bearer ${data.token}`,
},
});
return result;
} catch (error) {
console.log(error + "failed update order api");
return error;
}
};
export const update_order_item = async (data) => {
console.log(data.body.quantity);
getToken();
try {
if (!data.orderId && data.itemId) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(
`orders/${data.orderId}/items/${data.itemId}`,
{
method: "PUT",
data: data.body,
headers: {
Authorization: `Bearer ${data.token}`,
},
}
);
return result;
} catch (error) {
console.log(error + "failed update order api");
return error;
}
};
export const update_order_item_by_reference_number = async (data) => {
// console.log(data.body.quantity)
getToken();
try {
if (!data.refId) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(
`orders/updateBypaymentReference/${data.refId}`,
{
method: "PUT",
data: data.body,
headers: {
Authorization: `Bearer ${data. token}`,
},
}
);
return result;
} catch (error) {
console.log(error + "failed update order api");
return error;
}
};
export const webhook = async (data) => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect(`orders/paymongo`, {
method: "POST",
data: data.body,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error + "failed update order api");
return error;
}
};
export const delete_order = async (data) => {
getToken();
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`orders/${data.id}`, {
method: "DELETE",
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed delete order api");
return error;
}
};

125
app/services/api/controllers/product.js Normal file
View File

@ -0,0 +1,125 @@
import ApiConnect from "../ApiConfig";
//Get All vendors
export const get_all_products = async () => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect(`products`, {
method: "GET",
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get all products api");
return error;
}
};
//Get a notification
export const get_product = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`products/${data.id}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get product api");
return error;
}
};
export const get_products_by_vendor = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`products/vendor/${data.id}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get products by vendor api");
return error;
}
};
//Get a notification
export const search_product = async (data) => {
// console.log(data)
try {
if (!data.searchData) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`products/search?q=${data.searchData}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get product api");
return error;
}
};
//CREATE product
export const create_product = async (data) => {
// console.log(data)
try {
const result = await ApiConnect(`products`, {
method: "POST",
data: data.body,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
console.log("created");
return result;
} catch (error) {
console.log(error);
console.log(error + "failed create product api");
return error;
}
};
export const update_product = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`products/${data.id}`, {
method: "PATCH",
data: data.body,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error + "failed update product api");
return error;
}
};

103
app/services/api/controllers/vendor.js Normal file
View File

@ -0,0 +1,103 @@
import ApiConnect from "../ApiConfig";
//Get All vendors
export const get_all_vendors = async () => {
// console.log(data)
try {
// if (!data.id) {
// throw new Error("data.id is empty or undefined");
// }
const result = await ApiConnect(`vendors`, {
method: "GET",
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get all vendors api");
return error;
}
};
//Get a notification
export const get_vendor = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`vendors/${data.id}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get vendor api");
return error;
}
};
//CREATE vendor
export const create_vendor = async (data) => {
// console.log(data)
try {
const result = await ApiConnect(`vendors`, {
method: "POST",
data: data.body,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
console.log("created");
return result;
} catch (error) {
console.log(error);
console.log(error + "failed create vendor api");
return error;
}
};
export const search_vendor = async (data) => {
// console.log(data)
try {
if (!data.searchData) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`vendors/search?q=${data.searchData}`, {
method: "GET",
// data: data,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get vendor api");
return error;
}
};
export const update_vendor = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect(`vendors/${data.id}`, {
method: "PATCH",
data: data.body,
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error + "failed update vendor api");
return error;
}
};

230
app/services/obananapay/Auth.jsx Normal file
View File

@ -0,0 +1,230 @@
import { faClose } 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 {
ActivityIndicator,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Login from "../../components/obananapay/Login";
import OTP from "../../components/obananapay/OTP";
import ProcessPayment from "../../components/obananapay/ProcessPayment";
const Auth = ({
onRequestClose,
amount,
desc,
pay_refno,
username,
email,
number,
setsuccessCOD,
}) => {
const [auth, setauth] = useState(false);
const [otpCheck, setotpCheck] = useState(false);
const [loginfail, setloginfail] = useState(false);
const [loggedin, setloggedin] = useState(false);
const [userEmail, setuserEmail] = useState("");
const [token, settoken] = useState("");
const [otpError, setotpError] = useState("");
const [otpSent, setotpSent] = useState("");
const [uid, setuid] = useState("");
const [success, setsuccess] = useState(false);
const [loading, setloading] = useState(false);
const [lowBal, setlowBal] = useState(false);
useEffect(() => {}, [lowBal]);
const navigation = useNavigation();
const amountformatt = amount / 100;
const amountformatted = amountformatt;
return (
<View style={styles.container}>
<View style={styles.wrapTop}></View>
<View style={styles.wrap}>
<View style={styles.wrapHeader}>
<View style={{ width: 25 }}></View>
<Text style={styles.wrapHeaderText}>PAYMENT</Text>
{success === false ? (
<TouchableOpacity
onPress={() => {
onRequestClose(false);
}}
>
<FontAwesomeIcon icon={faClose} color={"#FFAA00"} size={25} />
</TouchableOpacity>
) : (
<TouchableOpacity></TouchableOpacity>
)}
</View>
{auth === false && otpCheck === false ? (
<Login
setauth={setauth}
setuserEmail={setuserEmail}
setuid={setuid}
setotpSent={setotpSent}
settoken={settoken}
/>
) : auth === true && otpCheck === false ? (
<OTP
setotpCheck={setotpCheck}
otp={otpSent}
uid={uid}
token={token}
amount={amountformatted}
desc={desc}
setloading={setloading}
setsuccess={setsuccess}
pay_refno={pay_refno}
username={username}
number={number}
email={email}
setsuccessCOD={setsuccessCOD}
setlowBal={setlowBal}
/>
) : auth === true && otpCheck === true && loading === true ? (
<ProcessPayment
setsuccessCOD={setsuccessCOD}
uid={uid}
token={token}
/>
) : success === true && loading === false ? (
<View style={styles.otpSuccess}>
<View style={styles.otpWrap}>
<Text style={styles.otpWrapText}>Successful Payment</Text>
</View>
{/* <View style={styles.paymentDetails}>
<Text>order ID : 2hdyjb44</Text>
</View> */}
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
onPress={() => {
navigation.navigate("Home");
}}
>
<Text style={styles.btnText}>GO BACK</Text>
</TouchableOpacity>
</View>
</View>
) : success === false && loading === false && lowBal === true ? (
<View style={styles.otpSuccess}>
<View style={styles.otpWrap2}>
<Text style={styles.otpWrapText}>Not Enough Balance!</Text>
<Text style={styles.otpWrapText1}>
Please load up your Obananapay balance before continuing
</Text>
</View>
{/* <View style={styles.paymentDetails}>
<Text>order ID : 2hdyjb44</Text>
</View> */}
<View style={styles.wrapBottom}>
<TouchableOpacity
style={styles.btn}
onPress={() => {
navigation.navigate("Home");
}}
>
<Text style={styles.btnText}>GO BACK</Text>
</TouchableOpacity>
</View>
</View>
) : null}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
// backgroundColor: "#",
// backgroundColor: "#4d4d4d",
height: "100%",
width: "100%",
bottom: 0,
},
wrap: {
backgroundColor: "#fff",
height: "96%",
bottom: 0,
borderWidth: 2,
borderColor: "#eeeeee",
borderTopRightRadius: 25,
borderTopLeftRadius: 25,
padding: 10,
},
wrapTop: {
height: "4%",
bottom: 0,
},
wrapHeader: {
justifyContent: "space-between",
flexDirection: "row",
},
wrapHeaderText: {
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
color: "#2e2e2e",
},
otpSuccess: {
justifyContent: "center",
alignItems: "center",
},
otpWrap: {
height: 200,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
otpWrap2: {
height: 200,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginTop: 50,
},
otpWrapText: {
fontWeight: "600",
letterSpacing: 1,
fontSize: 19,
color: "#2e2e2e",
marginLeft: 10,
},
otpWrapText1: {
fontWeight: "400",
letterSpacing: 1,
fontSize: 19,
color: "#ff2323",
marginLeft: 10,
marginTop: 40,
textAlign: "center",
},
wrapBottom: {
justifyContent: "center",
alignItems: "center",
},
paymentDetails: {
justifyContent: "center",
alignItems: "center",
height: 80,
},
btn: {
backgroundColor: "#ffaa00",
paddingVertical: 15,
paddingHorizontal: 55,
marginTop: 50,
},
btnText: {
color: "#fff",
fontWeight: "600",
letterSpacing: 1,
fontSize: 16,
},
});
export default Auth;

14
app/services/obananapayApi/ApiConfig2.js Normal file
View File

@ -0,0 +1,14 @@
import axios from "axios";
/* --------Connecting to the endpoint server------- */
export const ApiConnect2 = axios.create({
// baseURL: "https://gate.obananapay.com/api/",
// baseURL: "https://testapi.obananapay.com/api/",
// baseURL:'https://testapi.obpay.online/api/',
baseURL:'https://api.obpay.online/api/',
responseType: "json",
});
export default ApiConnect2;

122
app/services/obananapayApi/transaction_api.js Normal file
View File

@ -0,0 +1,122 @@
import ApiConnect2 from "./ApiConfig2";
//Get All User Transactions
export const get_user_transactions = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect2(`transactions/user/${data.id}`, {
method: "GET",
headers: {
Authorization: `Bearer ${data.token}`,
},
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get user transaction api");
return error;
}
};
export const get_user = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect2(`users/id/${data.id}`, {
method: "GET",
// data: data,
headers: {
Authorization: `Bearer ${data.token}`,
},
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get user api");
return error;
}
};
//Get a Transaction
export const get_transaction = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect2(`transactions/${data.id}`, {
method: "GET",
headers: {
Authorization: `Bearer ${data.token}`,
},
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get transaction api");
return error;
}
};
//CREATE TRANSACTION
export const create_transaction = async (data) => {
// console.log(data)
try {
const result = await ApiConnect2(`transactions/create`, {
method: "POST",
data: data.body,
headers: {
Authorization: `Bearer ${data.token}`,
},
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed create user transaction api");
return error;
}
};
// export const update_transaction = async (data) => {
// // console.log(data)
// try {
// const result = await ApiConnect2(`transactions/update/${data.id}`, {
// method: "POST",
// data: data.body,
// headers: {
// "Authorization": `Bearer ${data.token}`
// }
// });
// return result;
// } catch (error) {
// console.log(error)
// return error;
// }
// };
//CREATE notification
export const create_notification = async (data) => {
// console.log(data)
try {
const result = await ApiConnect2(`notifications/create`, {
method: "POST",
data: data.body,
headers: {
Authorization: `Bearer ${data.token}`,
},
});
console.log("created");
return result;
} catch (error) {
console.log(error);
console.log(error + "failed create user notification api");
return error;
}
};

34
app/services/obananapayApi/user_api.js Normal file
View File

@ -0,0 +1,34 @@
import ApiConnect2 from "./ApiConfig2";
export const user_login = async (data) => {
// console.log(data)
try {
const result = await ApiConnect2("auth/login", {
method: "POST",
data: data,
// withCredentials: true,
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed login api");
return error;
}
};
export const send_email_api = async (data) => {
try {
const result = await ApiConnect2("/send-email/", {
method: "POST",
data: data,
// withCredentials: true,
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed send email api");
return error;
}
};

13
app/services/obananapayGatewayApi/ApiConfig.js Normal file
View File

@ -0,0 +1,13 @@
import axios from "axios";
/* --------Connecting to the endpoint server------- */
export const ApiConnect3 = axios.create({
// baseURL: "http://localhost:3000/api",
// baseURL: "https://gate.obananapay.com/api/",
baseURL:'https://gate.obpay.online/api/',
//
responseType: "json",
// withCredentials: true,
});
export default ApiConnect3;

117
app/services/obananapayGatewayApi/controllers/payment_api.js Normal file
View File

@ -0,0 +1,117 @@
import ApiConnect3 from "../ApiConfig";
// import ApiConnect3 from "./ApiConfig";
import { encode as base64Encode } from 'base-64';
//Get All User payments
export const get_payments = async (data) => {
// console.log(data)
try {
if (!data.id) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect3(`payments/user/${data.id}`, {
method: "GET",
headers: {
Authorization: `Bearer ${data.token}`,
},
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get user payment api");
return error;
}
};
//Get a payment
export const get_payment = async (data) => {
// console.log(data)
try {
if (!data.ref) {
throw new Error("data.id is empty or undefined");
}
const result = await ApiConnect3(`payment/get/ref/${data.ref}`, {
method: "GET",
// headers: {
// Authorization: `Bearer ${data.token}`,
// },
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed get payment api");
return error;
}
};
//CREATE payment
export const create_payment = async (data) => {
// console.log(data)
try {
const username = "hey"; // Replace with your actual username
const password = "heytoo"; // Replace with your actual password
// Encode the credentials in Base64
const base64Credentials = base64Encode(`${username}:${password}`);
const result = await ApiConnect3(`payment/links`, {
method: "POST",
data: data.body,
headers: {
Authorization: `Basic ${base64Credentials}`,
},
});
return result;
} catch (error) {
console.log(error);
console.log(error + "failed create user payment link api");
return error;
}
};
export const update_payment = async (data) => {
try {
const username = "hey"; // Replace with your actual username
const password = "heytoo"; // Replace with your actual password
// Encode the credentials in Base64
const base64Credentials = base64Encode(`${username}:${password}`);
const result = await ApiConnect3(`/payment/links/update/${data.id}`, {
method: "PATCH",
data: data.body,
headers: {
Authorization: `Basic ${base64Credentials}`,
},
});
return result;
} catch (error) {
console.log(error);
return error;
}
};
export const update_payment_att = async (data) => {
try {
const username = "hey"; // Replace with your actual username
const password = "heytoo"; // Replace with your actual password
// Encode the credentials in Base64
const base64Credentials = base64Encode(`${username}:${password}`);
const result = await ApiConnect3(
`payment/links/update-payment/${data.refId}/${data.id}`,
{
method: "PATCH",
data: data.body,
headers: {
Authorization: `Basic ${base64Credentials}`,
},
}
);
return result;
} catch (error) {
console.log(error);
return error;
}
};

BIN
assets/bg-no-img-big.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
assets/categories/Appliances.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
assets/categories/EVehicle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 KiB

BIN
assets/categories/Ebike.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
assets/categories/Electonics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 761 KiB

Some files were not shown because too many files have changed in this diff Show More