1039 lines
34 KiB
JavaScript
1039 lines
34 KiB
JavaScript
import { faAngleRight, 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, useRoute } from "@react-navigation/native";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
TextInput,
|
|
Image,
|
|
// Modal,
|
|
Dimensions,
|
|
ActivityIndicator,
|
|
} from "react-native";
|
|
import { ScrollView } from "react-native-gesture-handler";
|
|
// 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";
|
|
const deviceWidth = Dimensions.get("window").width;
|
|
import Modal from "react-native-modal";
|
|
import { useToast } from "react-native-toast-notifications";
|
|
|
|
const CheckOutMultiple = () => {
|
|
//NOTE !!!! must pass the update product details to the shipping option and payment method page!!!! to prevent error
|
|
|
|
const [message, setmessage] = useState("");
|
|
const [paymessage, setpaymessage] = useState("");
|
|
const [pay_refno, setpay_refno] = useState("");
|
|
const [successCOD, setsuccessCOD] = useState(false);
|
|
const toast = useToast();
|
|
|
|
const [billingAdd, setbillingAdd] = useState("");
|
|
const [orderIdC, setorderIdC] = useState("");
|
|
const [descrip, setdescrip] = useState("");
|
|
const [codLoad, setcodLoad] = useState(false);
|
|
const [token, settoken] = useState("");
|
|
|
|
const [amount, setamount] = useState(0);
|
|
const [totalShipFee, settotalShipFee] = useState(0);
|
|
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [shippingMethod, setshippingMethod] = useState(
|
|
"select shipping method"
|
|
);
|
|
const [paymentMethod, setpaymentMethod] = useState("select shipping method");
|
|
const [recipientDetails, setrecipientDetails] = useState([]);
|
|
const [user, setuser] = useState([]);
|
|
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);
|
|
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 route = useRoute();
|
|
const { product, shipMethod, payMethod, address, orderId } = route.params;
|
|
console.log(orderId);
|
|
useEffect(() => {
|
|
setshippingMethod(shipMethod ?? "select shipping method");
|
|
}, [shipMethod]);
|
|
useEffect(() => {
|
|
setpaymentMethod(payMethod ?? "select payment method");
|
|
}, [payMethod]);
|
|
useEffect(() => {
|
|
setrecipientDetails(address ?? null);
|
|
}, [address]);
|
|
|
|
useEffect(() => {
|
|
const descr = product?.reduce((desc, d) => {
|
|
const dTotal = d.cartItems.reduce(
|
|
(subTotal, item) =>
|
|
item.items[0].product.name + ` (${item.items[0].quantity} qty)`,
|
|
0
|
|
);
|
|
const descrips = desc !== 0 ? desc : "";
|
|
return descrips !== "" ? descrips + ", " + dTotal : dTotal;
|
|
}, 0);
|
|
|
|
setdescrip(descr);
|
|
console.log("description: " + descr);
|
|
}, []);
|
|
console.log("descriptionsss: " + descrip);
|
|
|
|
useEffect(() => {}, []);
|
|
console.log(billingAdd);
|
|
const checkOutClicked = () => {
|
|
const amount = product.reduce((total, order) => {
|
|
const orderTotal = order.cartItems.reduce(
|
|
(subTotal, item) =>
|
|
subTotal +
|
|
parseFloat(item.total_amount) +
|
|
parseFloat(item.shipping_fee ?? 50),
|
|
0
|
|
);
|
|
return total + orderTotal;
|
|
}, 0);
|
|
// product.reduce((totalAmount, order) => {
|
|
// const itemPrice = parseFloat(order.items[0].product.price) * parseFloat(order.items[0].quantity);
|
|
// return totalAmount + itemPrice;
|
|
// }, 0) * 100;
|
|
console.log("amount: " + amount);
|
|
// const descriptions =
|
|
// product.map((order) => order.items[0].product.name).join(", ") +
|
|
// ", ordered from obanana e-commerce";
|
|
|
|
// console.log(descr);
|
|
if (recipientDetails) {
|
|
if (paymentMethod === "Obananapay") {
|
|
create_payment({
|
|
body: {
|
|
amount: amount * 100,
|
|
description:
|
|
descrip + " , ordered from Obanana e-commerce mobile app",
|
|
},
|
|
})
|
|
.then((result) => {
|
|
if (result.status === 200) {
|
|
const currentDate = new Date();
|
|
const iso8601String = currentDate.toISOString();
|
|
setpay_refno(result.data.attributes.reference_number);
|
|
console.log("I am here");
|
|
// Create an array to hold promises for updating orders
|
|
const updatePromises = [];
|
|
|
|
product.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 is " + order.cartItems
|
|
);
|
|
|
|
const orderId = cartItem._id;
|
|
// const orderName = cartItem.items[0].name;
|
|
const shipFee = cartItem.shipping_fee ?? 50;
|
|
|
|
const updatePromise = 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:
|
|
parseFloat(cartItem.total_amount) + parseFloat(shipFee),
|
|
},
|
|
});
|
|
|
|
updatePromises.push(updatePromise);
|
|
});
|
|
});
|
|
|
|
Promise.all(updatePromises)
|
|
.then((results) => {
|
|
// Handle results of updating orders
|
|
results.forEach((updateResult, index) => {
|
|
if (updateResult.status === 200) {
|
|
console.log();
|
|
const shipFee = updateResult.data.shipping_fee
|
|
? updateResult.data.shipping_fee * 100
|
|
: 500;
|
|
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);
|
|
});
|
|
} 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 = () => {
|
|
// if (result.status === 200) {
|
|
setcodLoad(true);
|
|
const currentDate = new Date();
|
|
const iso8601String = currentDate.toISOString();
|
|
// setpay_refno(result.data.attributes.reference_number);
|
|
const characters =
|
|
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
|
let refno = "";
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
const randomIndex = Math.floor(Math.random() * characters.length);
|
|
refno += characters.charAt(randomIndex);
|
|
}
|
|
|
|
console.log("I am here");
|
|
// Create an array to hold promises for updating orders
|
|
const updatePromises = [];
|
|
|
|
product.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 is " + order.cartItems);
|
|
|
|
const orderId = cartItem._id;
|
|
// const orderName = cartItem.items[0].name;
|
|
const shipFee = cartItem.shipping_fee ?? 50;
|
|
|
|
const updatePromise = update_order({
|
|
token: token,
|
|
|
|
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,
|
|
},
|
|
status: "TO PAY",
|
|
// total_amount: result.data.attributes.amount / 100,
|
|
total_amount:
|
|
parseFloat(cartItem.total_amount) + parseFloat(shipFee),
|
|
},
|
|
});
|
|
|
|
updatePromises.push(updatePromise);
|
|
});
|
|
});
|
|
|
|
Promise.all(updatePromises)
|
|
.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}`
|
|
"updated"
|
|
);
|
|
// setamount(result.data.attributes.amount);
|
|
// setpaymessage(result.data.attributes.description);
|
|
// setModalVisible(!modalVisible);
|
|
setsuccessCOD(true);
|
|
} else {
|
|
// console.log("Update order failed for order with ID:", product[index].cartItems[0]._id);
|
|
// ("failed");
|
|
setsuccessCOD("error");
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
// }
|
|
};
|
|
|
|
const calculateTotalPricePerShop = (cart) => {
|
|
let totalPrice = 0;
|
|
cart.forEach((order) => {
|
|
order.items.forEach((item) => {
|
|
const price = parseFloat(item.price);
|
|
const quantity = parseInt(item.quantity);
|
|
const shipFee = parseFloat(item.shipping_fee ?? 50);
|
|
|
|
const itemPrice = price * quantity;
|
|
totalPrice += itemPrice + shipFee;
|
|
console.log("item price: " + price * quantity);
|
|
});
|
|
});
|
|
|
|
console.log(cart[0].items);
|
|
return parseFloat(totalPrice).toLocaleString("en-US");
|
|
};
|
|
useEffect(() => {
|
|
let total = 0;
|
|
let shipTotal = 0;
|
|
|
|
// Iterate through the cartSort to calculate the total price
|
|
product.forEach((shop) => {
|
|
let shopHasSelectedProducts = false; // Flag to check if the shop has selected products
|
|
|
|
shop.cartItems.forEach((product1) => {
|
|
if (product1.selected) {
|
|
// Calculate the total price for the selected product
|
|
let productTotal = 0;
|
|
const shipFee = parseFloat(product1.shipping_fee ?? 50);
|
|
|
|
// Otherwise, calculate total without promo discount
|
|
productTotal =
|
|
parseFloat(product1.items[0].price) *
|
|
parseInt(product1.items[0].quantity, 10);
|
|
|
|
// Add the product total to the overall total
|
|
// const shipFee = parseFloat(item.shipping_fee??50);
|
|
total += parseFloat(productTotal) + shipFee;
|
|
shipTotal += shipFee;
|
|
// 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;
|
|
// }
|
|
});
|
|
settotalShipFee(shipTotal);
|
|
}, []);
|
|
|
|
const calculateTotalPrice = () => {
|
|
let total = 0;
|
|
let shipTotal = 0;
|
|
|
|
// Iterate through the cartSort to calculate the total price
|
|
product.forEach((shop) => {
|
|
let shopHasSelectedProducts = false; // Flag to check if the shop has selected products
|
|
|
|
shop.cartItems.forEach((product1) => {
|
|
if (product1.selected) {
|
|
// Calculate the total price for the selected product
|
|
let productTotal = 0;
|
|
const shipFee = parseFloat(product1.shipping_fee ?? 50);
|
|
|
|
// Otherwise, calculate total without promo discount
|
|
productTotal =
|
|
parseFloat(product1.items[0].price) *
|
|
parseInt(product1.items[0].quantity, 10);
|
|
|
|
// Add the product total to the overall total
|
|
// const shipFee = parseFloat(item.shipping_fee??50);
|
|
total += parseFloat(productTotal) + shipFee;
|
|
shipTotal += parseFloat(product1.items[0].quantity);
|
|
// 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;
|
|
// }
|
|
});
|
|
console.log(total);
|
|
|
|
return total?.toFixed(2);
|
|
};
|
|
const calculateTotalPriceW = () => {
|
|
let total = 0;
|
|
let shipTotal = 0;
|
|
|
|
// Iterate through the cartSort to calculate the total price
|
|
product.forEach((shop) => {
|
|
let shopHasSelectedProducts = false; // Flag to check if the shop has selected products
|
|
|
|
shop.cartItems.forEach((product1) => {
|
|
if (product1.selected) {
|
|
// Calculate the total price for the selected product
|
|
let productTotal = 0;
|
|
const shipFee = parseFloat(product1.shipping_fee ?? 50);
|
|
|
|
// Otherwise, calculate total without promo discount
|
|
productTotal =
|
|
parseFloat(product1.items[0].price) *
|
|
parseInt(product1.items[0].quantity, 10);
|
|
|
|
// Add the product total to the overall total
|
|
// const shipFee = parseFloat(item.shipping_fee??50);
|
|
total += parseFloat(productTotal);
|
|
shipTotal += parseFloat(product1.items[0].quantity);
|
|
// 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;
|
|
// }
|
|
});
|
|
console.log(total);
|
|
|
|
return total?.toFixed(2);
|
|
};
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("Home")}
|
|
style={styles.backIcon}
|
|
>
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerText}>Checkout</Text>
|
|
</View>
|
|
<View style={styles.wrapper}>
|
|
<View style={styles.content}>
|
|
<TouchableOpacity
|
|
style={styles.subContent}
|
|
onPress={() =>
|
|
navigation.navigate("AddressSelectionMulti", {
|
|
product,
|
|
shipMethod: shippingMethod,
|
|
payMethod: paymentMethod,
|
|
address: recipientDetails,
|
|
orderId: orderId,
|
|
address: user[0]?.address,
|
|
})
|
|
}
|
|
>
|
|
<Text style={styles.subContentText}>DELIVERY ADDRESS</Text>
|
|
<View style={styles.add}>
|
|
<Text style={styles.addText} numberOfLines={4}>
|
|
{recipientDetails !== null
|
|
? `${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"}
|
|
</Text>
|
|
</View>
|
|
<FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
|
|
</TouchableOpacity>
|
|
{product?.map((prod, i) => (
|
|
<View View style={styles.ordercard}>
|
|
<View style={styles.subContent1} key={i}>
|
|
<Text style={styles.shopNameText}>{prod.shopname}</Text>
|
|
{/* <Text style={styles.subContentText}>
|
|
<Text style={styles.subContentTexthead}>{product.shopId}</Text>
|
|
</Text> */}
|
|
{prod?.cartItems?.map((prodSub, i) => (
|
|
<>
|
|
<View style={styles.card}>
|
|
<View style={styles.imgWrap}>
|
|
<Image
|
|
style={{ width: 50, height: 50, resizeMode: "cover" }}
|
|
source={{
|
|
uri: `${
|
|
prodSub.items[0].product.product_image !== ""
|
|
? prodSub.items[0].product.product_image
|
|
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
|
|
}`,
|
|
}}
|
|
/>
|
|
</View>
|
|
<View style={styles.wrapper1}>
|
|
<View style={styles.details}>
|
|
<Text style={styles.text} numberOfLines={2}>
|
|
{prodSub.items[0].product.name}
|
|
</Text>
|
|
|
|
<View style={styles.rateCon}>
|
|
{prodSub.items[0].price ? (
|
|
<>
|
|
<View style={styles.priceCon}>
|
|
<Text
|
|
style={
|
|
prodSub.items[0].sale_price
|
|
? styles.textPricePromo
|
|
: styles.textPrice
|
|
}
|
|
>
|
|
₱
|
|
{parseFloat(
|
|
prodSub?.items[0]?.price
|
|
)?.toLocaleString("en-US")}
|
|
</Text>
|
|
{/* {prodSub.items[0].sale_price ? (
|
|
<Text style={styles.textPrice}> */}
|
|
{/* {" "}
|
|
{product.price - product.price * 0.3}{" "}
|
|
<Text style={{ fontWeight: "400" }}>
|
|
(-{product.sale_price}%)
|
|
</Text> */}
|
|
{/* {parseFloat(product?.items[0]?.sale_price)?.toLocaleString('en-US')} */}
|
|
{/* </Text>
|
|
) : null} */}
|
|
</View>
|
|
</>
|
|
) : (
|
|
<Text>No price </Text>
|
|
)}
|
|
<Text style={styles.qty}>
|
|
{prodSub.items[0].quantity} qty{" "}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity style={styles.subContent4}>
|
|
<Text style={styles.subContentText1}>Shipping Fee</Text>
|
|
<Text style={styles.addText}>
|
|
{/* ₱{calculateTotalPricePerShop(prodSub?.items[0].sale_price)}
|
|
*/}
|
|
₱{prodSub?.shipping_fee ?? 50.0}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
))}
|
|
</View>
|
|
|
|
<TouchableOpacity style={styles.subContent}>
|
|
<Text style={styles.subContentText}>ORDER TOTAL</Text>
|
|
<Text style={styles.addText}>
|
|
{/* ₱{calculateTotalPricePerShop(prodSub?.items[0].sale_price)}
|
|
*/}
|
|
₱{calculateTotalPricePerShop(prod?.cartItems)}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
{/* <TouchableOpacity
|
|
style={styles.subContent}
|
|
onPress={() =>
|
|
navigation.navigate("ShippingOptionMulti", {
|
|
product:product,
|
|
shipMethod: shippingMethod,
|
|
payMethod: paymentMethod,
|
|
address: recipientDetails,
|
|
orderId: orderId,
|
|
})
|
|
}
|
|
>
|
|
<Text style={styles.subContentText}>SHIPPING OPTION</Text>
|
|
<View style={styles.wallet}>
|
|
<Text style={styles.addText}>{shippingMethod}</Text>
|
|
</View>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
color={"#ffaa00"}
|
|
size={16}
|
|
/>
|
|
</TouchableOpacity> */}
|
|
</View>
|
|
))}
|
|
|
|
{/* <View style={styles.subContent}>
|
|
<Text style={styles.subContentText}>MESSAGE</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
onChangeText={() => setmessage()}
|
|
value={message}
|
|
numberOfLines={2}
|
|
placeholder="write a message"
|
|
/>
|
|
</View> */}
|
|
|
|
<TouchableOpacity
|
|
style={styles.subContent3}
|
|
onPress={() =>
|
|
navigation.navigate("PaymentoptionMulti", {
|
|
product: product ? product : [],
|
|
shipMethod: shippingMethod,
|
|
payMethod: paymentMethod,
|
|
address: recipientDetails,
|
|
orderId: orderId ? orderId : null,
|
|
})
|
|
}
|
|
>
|
|
<Text style={styles.subContentText}>PAYMENT OPTION</Text>
|
|
<View style={styles.wallet}>
|
|
<Text style={styles.addText}>{paymentMethod}</Text>
|
|
</View>
|
|
<FontAwesomeIcon icon={faAngleRight} color={"#ffaa00"} size={16} />
|
|
</TouchableOpacity>
|
|
<View style={styles.subContent1}>
|
|
<Text style={styles.subContentText}>PAYMENT DETAILS</Text>
|
|
<View style={styles.payCon}>
|
|
<View style={styles.subContent2}>
|
|
<Text style={styles.subContentText2}>
|
|
Merchandise Sub Total:
|
|
</Text>
|
|
<Text style={styles.subContentTexthead}>
|
|
₱{calculateTotalPriceW()}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.subContent2}>
|
|
<Text style={styles.subContentText2}>Shipping:</Text>
|
|
<Text style={styles.subContentTexthead}>
|
|
{/*{parseFloat(prodSub.shipping_fee ?? 50.0)} */}₱
|
|
{totalShipFee}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.subContent2}>
|
|
<Text style={styles.subContentText2}>Total: </Text>
|
|
<Text style={styles.subContentTexthead}>
|
|
₱{calculateTotalPrice()}
|
|
</Text>
|
|
</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
|
|
transparent={true}
|
|
animationIn={"slideInUp"}
|
|
isVisible={modalVisible}
|
|
onSwipeComplete={() => setModalVisible(!modalVisible)}
|
|
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}>
|
|
<TouchableOpacity
|
|
style={styles.footerBtn}
|
|
onPress={() => navigation.navigate("Home")}
|
|
>
|
|
<Text style={styles.footerBtnText}>Exit</Text>
|
|
</TouchableOpacity>
|
|
</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}
|
|
username={user[0]?.first_name}
|
|
email={user[0]?.user_email}
|
|
number={"+63" + user[0]?.phone_number}
|
|
setsuccessCOD={setsuccessCOD}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#fff",
|
|
height: "100%",
|
|
},
|
|
header: {
|
|
alignItems: "center",
|
|
width: "100%",
|
|
top: 0,
|
|
paddingLeft: 15,
|
|
flexDirection: "row",
|
|
borderColor: "#ddd",
|
|
paddingBottom: 15,
|
|
borderBottomWidth: 1,
|
|
},
|
|
headerText: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
marginLeft: 25,
|
|
},
|
|
shopNameText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
marginLeft: 5,
|
|
color: "#202020",
|
|
},
|
|
ordercard: {
|
|
marginVertical: 10,
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingHorizontal: 5,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
add: {
|
|
width: "50%",
|
|
},
|
|
input: {
|
|
width: "60%",
|
|
},
|
|
wallet: {
|
|
// width: '50%'
|
|
},
|
|
footer: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingVertical: 10,
|
|
},
|
|
footerBtn: {
|
|
backgroundColor: "#ff5e00",
|
|
width: "90%",
|
|
paddingVertical: 10,
|
|
justifyContent: "center",
|
|
borderRadius: 20,
|
|
alignItems: "center",
|
|
},
|
|
footerBtnText: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
},
|
|
footerBtnText2: {
|
|
color: "#353535",
|
|
fontSize: 16,
|
|
},
|
|
wrapper: {
|
|
// height: "85%",
|
|
backgroundColor: "#f3f3f3",
|
|
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
wrapper1: {
|
|
// height: "85%",
|
|
backgroundColor: "#ffffff",
|
|
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
content: {
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
subContent: {
|
|
width: "98%",
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: 10,
|
|
// height: 60,
|
|
borderColor: "#f0f0f0dd",
|
|
borderWidth: 1,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
subContent1: {
|
|
width: "98%",
|
|
justifyContent: "center",
|
|
// flexDirection: "row",
|
|
// alignItems: "center",
|
|
padding: 15,
|
|
// height: 60,
|
|
borderColor: "#f0f0f0dd",
|
|
borderWidth: 1,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
subContent2: {
|
|
width: "98%",
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
// alignItems: "center",
|
|
padding: 10,
|
|
// height: 60,
|
|
borderColor: "#f0f0f0dd",
|
|
// borderWidth: 1,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
subContent3: {
|
|
width: "98%",
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: 10,
|
|
// height: 60,
|
|
borderColor: "#f0f0f0dd",
|
|
borderWidth: 1,
|
|
marginTop: 20,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
subContent4: {
|
|
width: "98%",
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: 10,
|
|
// height: 60,
|
|
borderColor: "#f8f8f8dd",
|
|
borderWidth: 1,
|
|
// marginTop: 20,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
subContentText: {
|
|
fontWeight: "600",
|
|
color: "#494949",
|
|
},
|
|
subContentText2: {
|
|
width: "90%",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
// backgroundColor: "#b8141433",
|
|
},
|
|
subContentTexthead: {
|
|
fontWeight: "600",
|
|
color: "#000000",
|
|
},
|
|
addText: {
|
|
color: "#5f5f5f",
|
|
textAlign: "left",
|
|
},
|
|
imgWrap: {
|
|
padding: 10,
|
|
},
|
|
card: {
|
|
height: 80,
|
|
flexDirection: "row",
|
|
// justifyContent: "center",
|
|
alignItems: "center",
|
|
borderColor: "#f0f0f0dd",
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
marginTop: 10,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
payCon: {
|
|
width: "80%",
|
|
marginBottom: 70,
|
|
},
|
|
priceCon: {
|
|
flexDirection: "row",
|
|
paddingVertical: 10,
|
|
},
|
|
rateCon: {
|
|
width: "75%",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
qty: {
|
|
fontSize: 14,
|
|
color: "#5f5f5f",
|
|
},
|
|
textPrice: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
color: "#ffaa00",
|
|
},
|
|
textPricePromo: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
textDecorationLine: "line-through",
|
|
color: "#ffaa00",
|
|
},
|
|
details: {
|
|
// width: "50%",
|
|
},
|
|
text: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
width: "75%",
|
|
},
|
|
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",
|
|
},
|
|
});
|
|
|
|
export default CheckOutMultiple;
|