|
|
import React, { useEffect, useState } from "react"; |
|
|
import { |
|
|
View, |
|
|
Text, |
|
|
StyleSheet, |
|
|
TouchableOpacity, |
|
|
ActivityIndicator, |
|
|
ScrollView, |
|
|
Image, |
|
|
Alert, |
|
|
Linking, |
|
|
SafeAreaView, |
|
|
StatusBar, |
|
|
Platform, |
|
|
Modal, |
|
|
} from "react-native"; |
|
|
import { useTranslation } from "react-i18next"; |
|
|
import BackIcon from "../../components/BackIcon"; |
|
|
import MassageIcon from "../../components/MassageIcon"; |
|
|
import fontSize from "../../utils/fontsizeUtils"; |
|
|
import { useNavigation } from "@react-navigation/native"; |
|
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
|
import { useRoute, RouteProp } from "@react-navigation/native"; |
|
|
import { ordersApi, OrderDetailsType } from "../../services/api/orders"; |
|
|
import { payApi } from "../../services/api/payApi"; |
|
|
import useUserStore from "../../store/user"; |
|
|
import OrderIcon from "../../components/OrderIcon"; |
|
|
import InfoIcon from "../../components/InfoIcon"; |
|
|
import Progress from "./Progress"; |
|
|
import AddressIcon from "../../components/AddressIcon"; |
|
|
import EditIcon from "../../components/ColorfulEditIcon"; |
|
|
import BrightnessIcon from "../../components/BrightnessIcon"; |
|
|
import PhoneIcon from "../../components/PhoneIcon"; |
|
|
import ShoppingBagIcon from "../../components/ShoppingBagIcon"; |
|
|
import PowerIcon from "../../components/PowerIcon"; |
|
|
import CardIcon from "../../components/ShoppingCartIcon"; |
|
|
import WhatsAppIcon from "../../components/WatchAppIcon"; |
|
|
import { useOrderListStore } from "../../store/orderList"; |
|
|
|
|
|
export const OrderDetails = () => { |
|
|
const navigation = useNavigation<NativeStackNavigationProp<any>>(); |
|
|
const { t } = useTranslation(); |
|
|
const route = useRoute< |
|
|
RouteProp< |
|
|
{ |
|
|
OrderDetails: { |
|
|
orderId: string; |
|
|
}; |
|
|
}, |
|
|
"OrderDetails" |
|
|
> |
|
|
>(); |
|
|
const [orderDetails, setOrderDetails] = useState<OrderDetailsType>(); |
|
|
const [isLoading, setIsLoading] = useState(true); |
|
|
const { deleteOrder, changeOrder,updateOrderShippingInfo } = useOrderListStore(); |
|
|
const [showPaymentModal, setShowPaymentModal] = useState(false); |
|
|
const [selectedPayment, setSelectedPayment] = useState<string | null>(null); |
|
|
const [currentTab, setCurrentTab] = useState("online"); |
|
|
const [tabs, setTabs] = useState([ |
|
|
{ |
|
|
id: "online", |
|
|
label: t("order.payment.online"), |
|
|
options: [ |
|
|
{ id: "Brainnel Pay", label: "Brainnel Pay", icon: "💳" }, |
|
|
{ id: "Wave", label: "Wave", icon: "💸" }, |
|
|
{ id: "Paypal", label: "Paypal", icon: "🅿️" }, |
|
|
{ id: "Bank Card", label: t("order.payment.bank_card"), icon: "💳" }, |
|
|
], |
|
|
}, |
|
|
{ |
|
|
id: "offline", |
|
|
label: t("order.payment.offline"), |
|
|
options: [], |
|
|
}, |
|
|
]); |
|
|
const [selectedCurrency, setSelectedCurrency] = useState("USD"); |
|
|
const [convertedAmount, setConvertedAmount] = useState<{ |
|
|
converted_amount: number; |
|
|
item_key: string; |
|
|
original_amount: number; |
|
|
}[]>([]); |
|
|
const [isConverting, setIsConverting] = useState(false); |
|
|
const { user } = useUserStore(); |
|
|
const [isPaymentLoading, setIsPaymentLoading] = useState(false); |
|
|
|
|
|
const getOrderDetails = async () => { |
|
|
try { |
|
|
setIsLoading(true); |
|
|
const response = await ordersApi.getOrderDetails(route.params.orderId); |
|
|
setOrderDetails(response); |
|
|
} catch (error) { |
|
|
console.error("Error fetching order details:", error); |
|
|
} finally { |
|
|
setIsLoading(false); |
|
|
} |
|
|
}; |
|
|
|
|
|
useEffect(() => { |
|
|
getOrderDetails(); |
|
|
}, []); |
|
|
//拨打电话 |
|
|
const callPhone = async (phoneNumber: string) => { |
|
|
const url = `tel:${phoneNumber}`; |
|
|
|
|
|
try { |
|
|
await Linking.openURL(url); // 直接尝试打开拨号界面 |
|
|
} catch (error) { |
|
|
Alert.alert(t("error"), t("order.error.phone_open")); |
|
|
console.error("拨号失败:", error); |
|
|
} |
|
|
}; |
|
|
|
|
|
const onSelectPayment = (paymentId: string) => { |
|
|
if (paymentId === "Paypal") { |
|
|
setIsConverting(true); |
|
|
const data = { |
|
|
from_currency: orderDetails?.currency || "", |
|
|
to_currency: selectedCurrency, |
|
|
amounts: { |
|
|
total_amount: orderDetails?.total_amount || 0, |
|
|
domestic_shipping_fee: orderDetails?.domestic_shipping_fee || 0, |
|
|
shipping_fee: orderDetails?.shipping_fee || 0, |
|
|
}, |
|
|
}; |
|
|
payApi |
|
|
.convertCurrency(data) |
|
|
.then((res) => { |
|
|
setConvertedAmount(res.converted_amounts_list); |
|
|
setIsConverting(false); |
|
|
}) |
|
|
.catch((error) => { |
|
|
console.error("Currency conversion failed:", error); |
|
|
setIsConverting(false); |
|
|
}); |
|
|
} |
|
|
setSelectedPayment(paymentId); |
|
|
}; |
|
|
|
|
|
const onSelectCurrency = (currency: string) => { |
|
|
setSelectedCurrency(currency); |
|
|
setIsConverting(true); |
|
|
const data = { |
|
|
from_currency: orderDetails?.currency || "", |
|
|
to_currency: currency, |
|
|
amounts: { |
|
|
total_amount: orderDetails?.total_amount || 0, |
|
|
domestic_shipping_fee: orderDetails?.domestic_shipping_fee || 0, |
|
|
shipping_fee: orderDetails?.shipping_fee || 0, |
|
|
}, |
|
|
}; |
|
|
payApi |
|
|
.convertCurrency(data) |
|
|
.then((res) => { |
|
|
setConvertedAmount(res.converted_amounts_list); |
|
|
setIsConverting(false); |
|
|
}) |
|
|
.catch((error) => { |
|
|
console.error("Currency conversion failed:", error); |
|
|
setIsConverting(false); |
|
|
}); |
|
|
}; |
|
|
|
|
|
const handlePaymentConfirm = async () => { |
|
|
if (!selectedPayment || !orderDetails?.order_id) return; |
|
|
setIsPaymentLoading(true); |
|
|
|
|
|
const paymentData = { |
|
|
order_id: orderDetails.order_id, |
|
|
payment_method: selectedPayment, |
|
|
currency: selectedPayment === "Paypal" ? selectedCurrency : user.currency, |
|
|
total_amount: selectedPayment === "Paypal" |
|
|
? convertedAmount.reduce((acc, item) => acc + item.converted_amount, 0) |
|
|
: orderDetails?.total_amount || 0, |
|
|
actual_amount: selectedPayment === "Paypal" |
|
|
? convertedAmount.reduce((acc, item) => acc + item.converted_amount, 0) |
|
|
: orderDetails?.actual_amount || 0, |
|
|
shipping_fee: selectedPayment === "Paypal" |
|
|
? convertedAmount.find(item => item.item_key === "shipping_fee")?.converted_amount || 0 |
|
|
: orderDetails?.shipping_fee || 0, |
|
|
domestic_shipping_fee: selectedPayment === "Paypal" |
|
|
? convertedAmount.find(item => item.item_key === "domestic_shipping_fee")?.converted_amount || 0 |
|
|
: orderDetails?.domestic_shipping_fee || 0 |
|
|
}; |
|
|
try { |
|
|
await ordersApi.updateOrderPaymentMethod(paymentData) |
|
|
|
|
|
const payData = { |
|
|
order_id: orderDetails.order_id, |
|
|
method: selectedPayment, |
|
|
currency: selectedPayment === "Paypal" ? selectedCurrency : user.currency, |
|
|
amount: selectedPayment === "Paypal" |
|
|
? convertedAmount.reduce((acc, item) => acc + item.converted_amount, 0) |
|
|
: orderDetails?.total_amount || 0 |
|
|
}; |
|
|
payApi |
|
|
.getPayInfo(payData) |
|
|
.then((res) => { |
|
|
if (res.success) { |
|
|
setIsPaymentLoading(false); |
|
|
setShowPaymentModal(false); |
|
|
navigation.navigate("Pay", { |
|
|
payUrl: res.payment_url, |
|
|
}); |
|
|
} |
|
|
}) |
|
|
.catch((err) => { |
|
|
Alert.alert(t("error"), t("order.error.payment_update")); |
|
|
setIsPaymentLoading(false); |
|
|
}) |
|
|
.finally(() => { |
|
|
setIsPaymentLoading(false); |
|
|
}); |
|
|
|
|
|
} catch (error) { |
|
|
Alert.alert(t("error"), t("order.error.payment_update")); |
|
|
setIsPaymentLoading(false); |
|
|
} |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<SafeAreaView style={styles.safeArea}> |
|
|
<StatusBar barStyle="dark-content" backgroundColor="#fff" /> |
|
|
<View style={styles.safeAreaContent}> |
|
|
<View style={styles.header}> |
|
|
<TouchableOpacity onPress={() => navigation.goBack()}> |
|
|
<BackIcon /> |
|
|
</TouchableOpacity> |
|
|
<Text style={styles.title}>{t("order.details")}</Text> |
|
|
<MassageIcon size={22} /> |
|
|
</View> |
|
|
{isLoading ? ( |
|
|
<View style={styles.loadingContainer}> |
|
|
<ActivityIndicator size="large" color="#f77f3a" /> |
|
|
</View> |
|
|
) : orderDetails ? ( |
|
|
<View style={styles.container}> |
|
|
<ScrollView |
|
|
showsVerticalScrollIndicator={false} |
|
|
style={{ flex: 1 }} |
|
|
contentContainerStyle={{ paddingBottom: 70 }} |
|
|
> |
|
|
<View style={styles.orderStatus}> |
|
|
<View style={styles.orderStatusContent}> |
|
|
<View style={styles.orderStatusTitle}> |
|
|
<OrderIcon size={20} color="#3D3D3D" /> |
|
|
<Text style={styles.orderStatusTitleText}>{t("order.status")}</Text> |
|
|
</View> |
|
|
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
<Progress |
|
|
statuses={route.params.orderId} |
|
|
labels={[ |
|
|
t("order.status.waiting_payment"), |
|
|
t("order.status.waiting_shipment"), |
|
|
t("order.status.in_transit"), |
|
|
t("order.status.waiting_receipt"), |
|
|
t("order.status.completed") |
|
|
]} |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
{/* 订单信息 */} |
|
|
<View style={styles.orderStatus}> |
|
|
<View style={styles.orderStatusContent}> |
|
|
<View style={styles.orderStatusTitle}> |
|
|
<InfoIcon size={20} color="#3D3D3D" /> |
|
|
<Text style={styles.orderStatusTitleText}>{t("order.information")}</Text> |
|
|
</View> |
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
<View style={styles.orderId}> |
|
|
<Text style={styles.orderIdText}>{t("order.id")}</Text> |
|
|
<Text style={styles.orderIdText1}> |
|
|
{orderDetails.order_id} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.orderId}> |
|
|
<Text style={styles.orderIdText}>{t("order.create_time")}</Text> |
|
|
<Text style={styles.orderIdText1}> |
|
|
{orderDetails.create_time} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.orderId}> |
|
|
<Text style={styles.orderIdText}>{t("order.shipping_type")}</Text> |
|
|
<Text style={styles.orderIdText1}> |
|
|
{orderDetails.shipping_type === 0 ? t("order.shipping.sea") : t("order.shipping.air")} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
{/* 配送信息 */} |
|
|
<View style={styles.orderStatus}> |
|
|
<View style={styles.orderStatusContent}> |
|
|
<View style={styles.orderStatusTitle}> |
|
|
<AddressIcon size={22} color={"#3D3D3D"} /> |
|
|
<Text style={styles.orderStatusTitleText}>{t("order.delivery_info")}</Text> |
|
|
</View> |
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
<View style={styles.orderStatusContentPreviewInformation}> |
|
|
<View style={styles.warehouse}> |
|
|
<View style={styles.recipientTitle}> |
|
|
<Text |
|
|
style={ |
|
|
styles.orderStatusContentPreviewInformationText |
|
|
} |
|
|
> |
|
|
{t("order.warehouse")} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.recipientTitle}> |
|
|
<EditIcon size={22} /> |
|
|
</View> |
|
|
<View style={styles.recipientTitle}> |
|
|
<Text>{orderDetails.receiver_address}</Text> |
|
|
</View> |
|
|
<View style={styles.recipientTitle}> |
|
|
<View style={styles.warehousePhone}> |
|
|
<View style={styles.warehousePhoneTextContainer}> |
|
|
<BrightnessIcon size={16} color="#3D3D3D" /> |
|
|
</View> |
|
|
<View style={styles.warehousePhoneTextContainer}> |
|
|
<Text style={styles.warehousePhoneText}> |
|
|
{t("order.contact_after_payment")} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
<View style={styles.recipient}> |
|
|
<View style={styles.recipientTitle}> |
|
|
<Text |
|
|
style={ |
|
|
styles.orderStatusContentPreviewInformationText |
|
|
} |
|
|
> |
|
|
{t("order.recipient")} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.recipientTitle}> |
|
|
<EditIcon size={22} /> |
|
|
</View> |
|
|
{/* 姓名 */} |
|
|
<View style={styles.recipientTitle}> |
|
|
<Text style={styles.recipientName}> |
|
|
{orderDetails.receiver_name} |
|
|
</Text> |
|
|
</View> |
|
|
|
|
|
{/* 电话 */} |
|
|
<View style={styles.recipientTitle}> |
|
|
<View style={styles.recipientPhoneContainer}> |
|
|
<PhoneIcon size={16} color="#3D3D3D" /> |
|
|
<Text style={styles.recipientPhone}> |
|
|
{orderDetails.receiver_phone} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
{/* watchApp */} |
|
|
<View style={styles.recipientTitle}> |
|
|
<View style={styles.recipientPhoneContainer}> |
|
|
<WhatsAppIcon size={16} /> |
|
|
<Text style={styles.recipientPhone}>WhatsApp:</Text> |
|
|
<Text style={styles.recipientPhone}> |
|
|
{orderDetails.receiver_phone} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
{/* 商品信息 */} |
|
|
<View style={styles.orderStatus}> |
|
|
<View style={styles.orderStatusContent}> |
|
|
<View style={styles.orderStatusTitle}> |
|
|
<ShoppingBagIcon size={16} color="#3D3D3D" /> |
|
|
<Text style={styles.orderStatusTitleText}> |
|
|
{t("order.product_info")} ({orderDetails.items.length}) |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
{orderDetails.items.map((item, index) => ( |
|
|
<View style={styles.productItem} key={index}> |
|
|
<View style={styles.productItemImage}> |
|
|
<Image |
|
|
source={{ uri: item.sku_image }} |
|
|
style={{ width: "100%", height: "100%" }} |
|
|
/> |
|
|
</View> |
|
|
<View style={styles.productItemInfo}> |
|
|
<View style={styles.productItemInfoName}> |
|
|
<Text style={styles.productItemInfoNameText}> |
|
|
{item.product_name} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.productItemInfoSku}> |
|
|
{item.sku_attributes.map((sku, index) => ( |
|
|
<Text |
|
|
key={index} |
|
|
style={styles.productItemInfoSkuText} |
|
|
> |
|
|
{sku.attribute_name}:{sku.attribute_value} |
|
|
</Text> |
|
|
))} |
|
|
{/* <text>{item.product_name}</text> */} |
|
|
</View> |
|
|
<View style={styles.productItemInfoPrice}> |
|
|
<Text |
|
|
style={{ |
|
|
color: "#f77f3a", |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
}} |
|
|
> |
|
|
{item.total_price} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.productItemNum}> |
|
|
<Text style={styles.productItemNumText}> |
|
|
x{item.quantity} |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
))} |
|
|
</View> |
|
|
<View style={styles.dottedLine}></View> |
|
|
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
<TouchableOpacity style={styles.addCard}> |
|
|
<View style={styles.addCardBox}> |
|
|
<CardIcon size={16} color="#0098ef" /> |
|
|
<Text style={styles.addCardText}>{t("order.add_to_cart")}</Text> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
{/* 价格信息 */} |
|
|
<View style={styles.orderStatus}> |
|
|
<View style={styles.orderStatusContent}> |
|
|
<View style={styles.orderStatusTitle}> |
|
|
<PowerIcon size={20} color="#3D3D3D" /> |
|
|
<Text style={styles.orderStatusTitleText}>{t("order.price_details")}</Text> |
|
|
</View> |
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
<View style={styles.orderId}> |
|
|
<Text style={styles.orderIdText}>{t("order.subtotal")}</Text> |
|
|
<Text style={styles.orderIdText1}> |
|
|
{orderDetails.total_amount} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.orderId}> |
|
|
<Text style={styles.orderIdText}> |
|
|
{t("order.platform_shipping")} |
|
|
</Text> |
|
|
<Text style={styles.orderIdText1}> |
|
|
{orderDetails.domestic_shipping_fee} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.orderId}> |
|
|
<Text style={styles.orderIdText}> |
|
|
{t("order.international_shipping")} |
|
|
</Text> |
|
|
<Text style={styles.orderIdText1}> |
|
|
{orderDetails.shipping_fee} |
|
|
</Text> |
|
|
</View> |
|
|
<View style={styles.dottedLine}></View> |
|
|
<View style={styles.orderId}> |
|
|
<Text style={styles.TotalText}>{t("order.total")}</Text> |
|
|
<Text style={styles.TotalPrice}> |
|
|
{orderDetails.total_amount} |
|
|
</Text> |
|
|
</View> |
|
|
<View> |
|
|
<Text style={styles.orderRemakeText}> |
|
|
+ ${orderDetails.shipping_fee} {t("order.estimated_shipping")} |
|
|
(COD) |
|
|
</Text> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</ScrollView> |
|
|
{/* 代付款 */} |
|
|
{orderDetails.order_status === 0 && ( |
|
|
<View style={styles.bottomButtons}> |
|
|
<TouchableOpacity |
|
|
style={styles.bottomButton1} |
|
|
onPress={() => { |
|
|
deleteOrder(route.params.orderId); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.bottomButtonText1}>{t("order.cancel")}</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity |
|
|
style={styles.bottomButton} |
|
|
onPress={() => { |
|
|
setShowPaymentModal(true); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.bottomButtonText}>{t("order.pay")}</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
)} |
|
|
{/* 待发货 */} |
|
|
{orderDetails.order_status === 1 && ( |
|
|
<View style={styles.bottomButtons}> |
|
|
<TouchableOpacity |
|
|
style={styles.bottomButton1} |
|
|
onPress={() => { |
|
|
callPhone("15903995548"); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.bottomButtonText1}>{t("order.contact_shipping")}</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity |
|
|
style={styles.bottomButton} |
|
|
onPress={() => { |
|
|
changeOrder(route.params.orderId, 2); |
|
|
navigation.goBack(); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.bottomButtonText}>{t("order.cancel")}</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
)} |
|
|
{/* 代收货 */} |
|
|
{orderDetails.order_status === 2 && ( |
|
|
<View style={styles.bottomButtons}> |
|
|
<TouchableOpacity style={styles.bottomButton1} onPress={() => {}}> |
|
|
<Text style={styles.bottomButtonText1}>{t("order.check_logistics")}</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity |
|
|
style={styles.bottomButton} |
|
|
onPress={() => { |
|
|
updateOrderShippingInfo(route.params.orderId,{ |
|
|
shipping_status: 0, |
|
|
shipping_info: { |
|
|
shipping_company: "string", |
|
|
shipping_no: "string", |
|
|
shipping_info: {} |
|
|
} |
|
|
}); |
|
|
navigation.goBack(); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.bottomButtonText}>{t("order.confirm_receipt")}</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
)} |
|
|
{/* 已完成 */} |
|
|
{orderDetails.order_status === 3 && ( |
|
|
<View style={styles.bottomButtons}> |
|
|
<TouchableOpacity |
|
|
style={styles.bottomButton1} |
|
|
onPress={() => { |
|
|
deleteOrder(route.params.orderId); |
|
|
navigation.goBack(); |
|
|
}} |
|
|
> |
|
|
<Text style={styles.bottomButtonText1}>{t("order.cancel")}</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity style={styles.bottomButton}> |
|
|
<Text style={styles.bottomButtonText}>{t("order.pay_now")}</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
)} |
|
|
{/* 已取消 */} |
|
|
{orderDetails.order_status === 4 && ( |
|
|
<View style={styles.bottomButtons}> |
|
|
<TouchableOpacity style={styles.bottomButton1} onPress={() => {}}> |
|
|
<Text style={styles.bottomButtonText1}>{t("order.add_to_cart")}</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity style={styles.bottomButton}> |
|
|
<Text style={styles.bottomButtonText}>{t("order.reorder")}</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
) : ( |
|
|
<Text>{t("order.unable_to_load")}</Text> |
|
|
)} |
|
|
</View> |
|
|
|
|
|
<Modal |
|
|
visible={showPaymentModal} |
|
|
transparent={true} |
|
|
animationType="slide" |
|
|
onRequestClose={() => setShowPaymentModal(false)} |
|
|
> |
|
|
<View style={styles.modalOverlay}> |
|
|
<View style={styles.modalContent}> |
|
|
<View style={styles.modalHeader}> |
|
|
<Text style={styles.modalTitle}>{t("order.select_payment")}</Text> |
|
|
<TouchableOpacity onPress={() => setShowPaymentModal(false)}> |
|
|
<Text style={styles.closeButton}>×</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
|
|
|
<View style={styles.tabs}> |
|
|
{tabs.map((tab) => ( |
|
|
<TouchableOpacity |
|
|
key={tab.id} |
|
|
style={[styles.tab, currentTab === tab.id && styles.tabActive]} |
|
|
onPress={() => setCurrentTab(tab.id)} |
|
|
> |
|
|
<Text style={[styles.tabText, currentTab === tab.id && styles.tabTextActive]}> |
|
|
{tab.label} |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
))} |
|
|
</View> |
|
|
|
|
|
<ScrollView style={styles.paymentOptions}> |
|
|
{tabs |
|
|
.find((tab) => tab.id === currentTab) |
|
|
?.options.map((option) => ( |
|
|
<View key={option.id}> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.paymentOption, |
|
|
selectedPayment === option.id && styles.paymentSelected, |
|
|
]} |
|
|
onPress={() => onSelectPayment(option.id)} |
|
|
> |
|
|
<View style={styles.paymentContent}> |
|
|
<View style={styles.defaultPaymentContainer}> |
|
|
<Text style={styles.paymentIcon}>{option.icon}</Text> |
|
|
<Text style={styles.paymentLabel}>{option.label}</Text> |
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.radioButton}> |
|
|
<View |
|
|
style={[ |
|
|
styles.radioInner, |
|
|
selectedPayment === option.id && styles.radioInnerSelected, |
|
|
]} |
|
|
/> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
|
|
|
{/* PayPal Currency Selection */} |
|
|
{selectedPayment === "Paypal" && option.id === "Paypal" && ( |
|
|
<View style={styles.currencySelectorContainer}> |
|
|
<Text style={styles.currencySelectorTitle}>{t("order.select_currency")}</Text> |
|
|
<View style={styles.currencyOptions}> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.currencyOption, |
|
|
selectedCurrency === "USD" && styles.selectedCurrencyOption, |
|
|
]} |
|
|
onPress={() => onSelectCurrency("USD")} |
|
|
> |
|
|
<Text style={styles.currencyText}>USD</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity |
|
|
style={[ |
|
|
styles.currencyOption, |
|
|
selectedCurrency === "EUR" && styles.selectedCurrencyOption, |
|
|
]} |
|
|
onPress={() => onSelectCurrency("EUR")} |
|
|
> |
|
|
<Text style={styles.currencyText}>EUR</Text> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
|
|
|
<View style={styles.totalContainer}> |
|
|
{!isConverting && ( |
|
|
<Text style={styles.totalText}> |
|
|
{selectedCurrency === "USD" ? "$" : "€"} |
|
|
{convertedAmount |
|
|
.reduce((acc, item) => acc + item.converted_amount, 0) |
|
|
.toFixed(2)} |
|
|
</Text> |
|
|
)} |
|
|
{isConverting && ( |
|
|
<ActivityIndicator |
|
|
size="small" |
|
|
color="#ff6000" |
|
|
style={styles.loadingIndicator} |
|
|
/> |
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
</View> |
|
|
))} |
|
|
</ScrollView> |
|
|
|
|
|
<View style={styles.modalFooter}> |
|
|
<TouchableOpacity |
|
|
style={styles.cancelButton} |
|
|
onPress={() => setShowPaymentModal(false)} |
|
|
> |
|
|
<Text style={styles.cancelButtonText}>{t("cancel")}</Text> |
|
|
</TouchableOpacity> |
|
|
<TouchableOpacity |
|
|
style={[styles.confirmButton, (!selectedPayment || isPaymentLoading) && styles.disabledButton]} |
|
|
onPress={handlePaymentConfirm} |
|
|
disabled={!selectedPayment || isPaymentLoading} |
|
|
> |
|
|
{isPaymentLoading ? ( |
|
|
<ActivityIndicator size="small" color="#fff" /> |
|
|
) : ( |
|
|
<Text style={styles.confirmButtonText}>{t("order.confirm_payment")}</Text> |
|
|
)} |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</Modal> |
|
|
</SafeAreaView> |
|
|
); |
|
|
}; |
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
safeArea: { |
|
|
flex: 1, |
|
|
backgroundColor: '#fff', |
|
|
}, |
|
|
safeAreaContent: { |
|
|
flex: 1, |
|
|
paddingTop: 0, |
|
|
}, |
|
|
container: { |
|
|
flex: 1, |
|
|
backgroundColor: "#f8f9fa", |
|
|
}, |
|
|
header: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
alignItems: "center", |
|
|
padding: 16, |
|
|
backgroundColor: "#fff", |
|
|
shadowColor: "#000", |
|
|
shadowOffset: { |
|
|
width: 0, |
|
|
height: 2, |
|
|
}, |
|
|
shadowOpacity: 0.1, |
|
|
shadowRadius: 3, |
|
|
elevation: 3, |
|
|
}, |
|
|
title: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
}, |
|
|
orderStatus: { |
|
|
paddingInline: 16, |
|
|
marginTop: 10, |
|
|
}, |
|
|
orderStatusContent: { |
|
|
backgroundColor: "#fff", |
|
|
borderRadius: 16, |
|
|
}, |
|
|
orderStatusTitle: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
borderBottomWidth: 1, |
|
|
borderColor: "#f5f5f5", |
|
|
padding: 10, |
|
|
}, |
|
|
orderStatusTitleText: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
marginLeft: 10, |
|
|
}, |
|
|
orderStatusContentPreview: { |
|
|
padding: 10, |
|
|
justifyContent: "center", |
|
|
}, |
|
|
productItem: { |
|
|
flexDirection: "row", |
|
|
width: "100%", |
|
|
borderBottomWidth: 1, |
|
|
borderColor: "#f5f5f5", |
|
|
padding: 10, |
|
|
}, |
|
|
productItemImage: { |
|
|
width: "15%", |
|
|
height: 50, |
|
|
borderRadius: 10, |
|
|
}, |
|
|
productItemInfo: { |
|
|
width: "75%", |
|
|
justifyContent: "space-between", |
|
|
paddingLeft: 10, |
|
|
}, |
|
|
productItemNum: { |
|
|
width: "10%", |
|
|
alignItems: "center", |
|
|
justifyContent: "flex-end", |
|
|
}, |
|
|
productItemNumText: { |
|
|
fontSize: fontSize(16), |
|
|
color: "#999", |
|
|
}, |
|
|
productItemInfoName: { |
|
|
width: "100%", |
|
|
paddingVertical: 5, |
|
|
}, |
|
|
productItemInfoNameText: { |
|
|
fontSize: fontSize(13), |
|
|
fontWeight: "600", |
|
|
}, |
|
|
productItemInfoSkuText: { |
|
|
fontSize: fontSize(13), |
|
|
color: "#999", |
|
|
}, |
|
|
productItemInfoSku: { |
|
|
width: "100%", |
|
|
paddingVertical: 5, |
|
|
}, |
|
|
productItemInfoPrice: { |
|
|
width: "100%", |
|
|
paddingVertical: 5, |
|
|
}, |
|
|
orderStatusContentPreviewInformation: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
width: "100%", |
|
|
}, |
|
|
|
|
|
loadingContainer: { |
|
|
flex: 1, |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
orderId: { |
|
|
flexDirection: "row", |
|
|
justifyContent: "space-between", |
|
|
paddingVertical: 10, |
|
|
width: "100%", |
|
|
}, |
|
|
orderIdText: { |
|
|
color: "#999", |
|
|
width: "50%", |
|
|
fontSize: fontSize(14), |
|
|
}, |
|
|
orderIdText1: { |
|
|
width: "50%", |
|
|
textAlign: "right", |
|
|
fontSize: fontSize(14), |
|
|
}, |
|
|
TotalText: { |
|
|
color: "#f77f3a", |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
width: "50%", |
|
|
}, |
|
|
TotalPrice: { |
|
|
color: "#f77f3a", |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
width: "50%", |
|
|
textAlign: "right", |
|
|
}, |
|
|
warehouse: { |
|
|
width: "50%", |
|
|
}, |
|
|
recipientTitle: { |
|
|
paddingVertical: 5, |
|
|
}, |
|
|
recipientPhoneContainer: { |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
}, |
|
|
recipient: { |
|
|
width: "50%", |
|
|
}, |
|
|
orderStatusContentPreviewInformationText: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
}, |
|
|
warehousePhone: { |
|
|
padding: 5, |
|
|
backgroundColor: "#f9f9f9", |
|
|
borderRadius: 10, |
|
|
width: "90%", |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
}, |
|
|
warehousePhoneText: { |
|
|
fontSize: fontSize(14), |
|
|
fontWeight: "400", |
|
|
color: "#3D3D3D", |
|
|
}, |
|
|
warehousePhoneTextContainer: { |
|
|
paddingRight: 5, |
|
|
}, |
|
|
recipientName: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
}, |
|
|
recipientPhone: { |
|
|
fontSize: fontSize(14), |
|
|
fontWeight: "400", |
|
|
color: "#3D3D3D", |
|
|
}, |
|
|
dottedLine: { |
|
|
width: "100%", |
|
|
borderBottomWidth: 2, |
|
|
borderColor: "#f5f5f5", |
|
|
borderStyle: "dashed", |
|
|
}, |
|
|
orderRemakeText: { |
|
|
fontSize: fontSize(14), |
|
|
fontWeight: "400", |
|
|
color: "#999", |
|
|
}, |
|
|
addCard: { |
|
|
width: "100%", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
addCardBox: { |
|
|
padding: 10, |
|
|
borderWidth: 1, |
|
|
borderColor: "#0098ef", |
|
|
borderRadius: 10, |
|
|
backgroundColor: "#e2f2fd", |
|
|
opacity: 0.5, |
|
|
flexDirection: "row", |
|
|
alignItems: "center", |
|
|
}, |
|
|
addCardText: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: "600", |
|
|
color: "#0098ef", |
|
|
marginLeft: 5, |
|
|
}, |
|
|
bottomButtons: { |
|
|
position: "absolute", |
|
|
bottom: 0, |
|
|
width: "100%", |
|
|
flexDirection: "row", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
padding: 10, |
|
|
backgroundColor: "#fff", |
|
|
shadowColor: "#000", |
|
|
shadowOffset: { |
|
|
width: 0, |
|
|
height: -4, |
|
|
}, |
|
|
shadowOpacity: 0.1, |
|
|
shadowRadius: 3, |
|
|
elevation: 3, |
|
|
}, |
|
|
bottomButton1: { |
|
|
padding: 10, |
|
|
marginHorizontal: 10, |
|
|
alignItems: "center", |
|
|
backgroundColor: "#f0f0f0", |
|
|
borderRadius: 5, |
|
|
flex: 1, |
|
|
}, |
|
|
bottomButton: { |
|
|
padding: 10, |
|
|
marginHorizontal: 10, |
|
|
alignItems: "center", |
|
|
backgroundColor: "#fe7f42", |
|
|
borderRadius: 5, |
|
|
flex: 1, |
|
|
}, |
|
|
bottomButtonText: { |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#fff", |
|
|
}, |
|
|
bottomButtonText1: { |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: "600", |
|
|
color: "#999", |
|
|
}, |
|
|
modalOverlay: { |
|
|
flex: 1, |
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
|
justifyContent: 'flex-end', |
|
|
}, |
|
|
modalContent: { |
|
|
backgroundColor: '#fff', |
|
|
borderTopLeftRadius: 20, |
|
|
borderTopRightRadius: 20, |
|
|
padding: 20, |
|
|
maxHeight: '80%', |
|
|
}, |
|
|
modalHeader: { |
|
|
flexDirection: 'row', |
|
|
justifyContent: 'space-between', |
|
|
alignItems: 'center', |
|
|
marginBottom: 20, |
|
|
}, |
|
|
modalTitle: { |
|
|
fontSize: fontSize(18), |
|
|
fontWeight: '600', |
|
|
}, |
|
|
closeButton: { |
|
|
fontSize: fontSize(24), |
|
|
color: '#999', |
|
|
}, |
|
|
tabs: { |
|
|
flexDirection: 'row', |
|
|
marginBottom: 15, |
|
|
borderBottomWidth: 1, |
|
|
borderBottomColor: '#f5f5f5', |
|
|
}, |
|
|
tab: { |
|
|
paddingVertical: 10, |
|
|
paddingHorizontal: 15, |
|
|
marginRight: 10, |
|
|
}, |
|
|
tabActive: { |
|
|
borderBottomWidth: 2, |
|
|
borderBottomColor: '#FF5100', |
|
|
}, |
|
|
tabText: { |
|
|
fontSize: fontSize(16), |
|
|
color: '#666', |
|
|
}, |
|
|
tabTextActive: { |
|
|
color: '#FF5100', |
|
|
fontWeight: '500', |
|
|
}, |
|
|
paymentOptions: { |
|
|
maxHeight: 300, |
|
|
}, |
|
|
paymentOption: { |
|
|
flexDirection: 'row', |
|
|
alignItems: 'center', |
|
|
justifyContent: 'space-between', |
|
|
padding: 15, |
|
|
backgroundColor: '#F8F8F8', |
|
|
borderRadius: 8, |
|
|
marginBottom: 10, |
|
|
}, |
|
|
paymentSelected: { |
|
|
backgroundColor: '#FFF0E8', |
|
|
borderWidth: 1, |
|
|
borderColor: '#FF5100', |
|
|
}, |
|
|
paymentContent: { |
|
|
flex: 1, |
|
|
}, |
|
|
defaultPaymentContainer: { |
|
|
flexDirection: 'row', |
|
|
alignItems: 'center', |
|
|
}, |
|
|
paymentIcon: { |
|
|
fontSize: fontSize(24), |
|
|
marginRight: 8, |
|
|
}, |
|
|
paymentLabel: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: '500', |
|
|
}, |
|
|
radioButton: { |
|
|
width: 20, |
|
|
height: 20, |
|
|
borderRadius: 10, |
|
|
borderWidth: 2, |
|
|
borderColor: '#FF5100', |
|
|
alignItems: 'center', |
|
|
justifyContent: 'center', |
|
|
}, |
|
|
radioInner: { |
|
|
width: 10, |
|
|
height: 10, |
|
|
borderRadius: 5, |
|
|
backgroundColor: 'transparent', |
|
|
}, |
|
|
radioInnerSelected: { |
|
|
backgroundColor: '#FF5100', |
|
|
}, |
|
|
modalFooter: { |
|
|
flexDirection: 'row', |
|
|
justifyContent: 'space-between', |
|
|
marginTop: 20, |
|
|
paddingTop: 20, |
|
|
borderTopWidth: 1, |
|
|
borderTopColor: '#f5f5f5', |
|
|
}, |
|
|
cancelButton: { |
|
|
flex: 1, |
|
|
padding: 15, |
|
|
marginRight: 10, |
|
|
borderRadius: 25, |
|
|
borderWidth: 1, |
|
|
borderColor: '#999', |
|
|
alignItems: 'center', |
|
|
}, |
|
|
confirmButton: { |
|
|
flex: 1, |
|
|
padding: 15, |
|
|
marginLeft: 10, |
|
|
borderRadius: 25, |
|
|
backgroundColor: '#FF5100', |
|
|
alignItems: 'center', |
|
|
}, |
|
|
disabledButton: { |
|
|
backgroundColor: '#ccc', |
|
|
}, |
|
|
cancelButtonText: { |
|
|
fontSize: fontSize(16), |
|
|
color: '#666', |
|
|
}, |
|
|
confirmButtonText: { |
|
|
fontSize: fontSize(16), |
|
|
color: '#fff', |
|
|
fontWeight: '600', |
|
|
}, |
|
|
currencySelectorContainer: { |
|
|
padding: 15, |
|
|
backgroundColor: '#f8f8f8', |
|
|
borderRadius: 8, |
|
|
marginTop: 10, |
|
|
}, |
|
|
currencySelectorTitle: { |
|
|
fontSize: fontSize(14), |
|
|
color: '#666', |
|
|
marginBottom: 10, |
|
|
}, |
|
|
currencyOptions: { |
|
|
flexDirection: 'row', |
|
|
marginBottom: 10, |
|
|
}, |
|
|
currencyOption: { |
|
|
paddingVertical: 8, |
|
|
paddingHorizontal: 15, |
|
|
borderRadius: 20, |
|
|
borderWidth: 1, |
|
|
borderColor: '#ddd', |
|
|
marginRight: 10, |
|
|
}, |
|
|
selectedCurrencyOption: { |
|
|
backgroundColor: '#FFF0E8', |
|
|
borderColor: '#FF5100', |
|
|
}, |
|
|
currencyText: { |
|
|
fontSize: fontSize(14), |
|
|
color: '#333', |
|
|
}, |
|
|
totalContainer: { |
|
|
flexDirection: 'row', |
|
|
alignItems: 'center', |
|
|
justifyContent: 'flex-end', |
|
|
}, |
|
|
totalText: { |
|
|
fontSize: fontSize(16), |
|
|
fontWeight: '600', |
|
|
color: '#FF5100', |
|
|
}, |
|
|
loadingIndicator: { |
|
|
marginLeft: 10, |
|
|
}, |
|
|
});
|
|
|
|
