|
|
|
|
@ -181,7 +181,7 @@ export const OrderDetails = () => {
|
|
|
|
|
{ |
|
|
|
|
OrderDetails: { |
|
|
|
|
orderId: string; |
|
|
|
|
status:number |
|
|
|
|
status: number; |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
"OrderDetails" |
|
|
|
|
@ -189,7 +189,8 @@ export const OrderDetails = () => {
|
|
|
|
|
>(); |
|
|
|
|
const [orderDetails, setOrderDetails] = useState<OrderDetailsType>(); |
|
|
|
|
const [isLoading, setIsLoading] = useState(true); |
|
|
|
|
const { deleteOrder, changeOrder,updateOrderShippingInfo } = useOrderListStore(); |
|
|
|
|
const { deleteOrder, changeOrder, updateOrderShippingInfo } = |
|
|
|
|
useOrderListStore(); |
|
|
|
|
const [showPaymentModal, setShowPaymentModal] = useState(false); |
|
|
|
|
const [selectedPayment, setSelectedPayment] = useState<string | null>(null); |
|
|
|
|
const [currentTab, setCurrentTab] = useState("online"); |
|
|
|
|
@ -205,16 +206,22 @@ export const OrderDetails = () => {
|
|
|
|
|
label: t("order.payment.offline"), |
|
|
|
|
options: [ |
|
|
|
|
{ id: "cash", label: t("order.payment.cash") || "Cash", key: "cash" }, |
|
|
|
|
{ id: "bank", label: t("order.payment.bank") || "Bank Transfer", key: "bank" } |
|
|
|
|
{ |
|
|
|
|
id: "bank", |
|
|
|
|
label: t("order.payment.bank") || "Bank Transfer", |
|
|
|
|
key: "bank", |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
]); |
|
|
|
|
const [selectedCurrency, setSelectedCurrency] = useState("USD"); |
|
|
|
|
const [convertedAmount, setConvertedAmount] = useState<{ |
|
|
|
|
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); |
|
|
|
|
@ -247,22 +254,29 @@ export const OrderDetails = () => {
|
|
|
|
|
getOrderDetails(); |
|
|
|
|
|
|
|
|
|
// 获取支付方式
|
|
|
|
|
payApi.getCountryPaymentMethods().then((res) => { |
|
|
|
|
payApi |
|
|
|
|
.getCountryPaymentMethods() |
|
|
|
|
.then((res) => { |
|
|
|
|
if (res && res.current_country_methods) { |
|
|
|
|
setPaymentMethods(res.current_country_methods); |
|
|
|
|
|
|
|
|
|
// 更新在线支付选项
|
|
|
|
|
setTabs(prev => { |
|
|
|
|
setTabs((prev) => { |
|
|
|
|
const updatedTabs = [...prev]; |
|
|
|
|
const onlineTabIndex = updatedTabs.findIndex(tab => tab.id === "online"); |
|
|
|
|
const onlineTabIndex = updatedTabs.findIndex( |
|
|
|
|
(tab) => tab.id === "online" |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
if (onlineTabIndex !== -1) { |
|
|
|
|
// 将API返回的支付方式转换为选项格式
|
|
|
|
|
const options: PaymentOption[] = res.current_country_methods.map(method => ({ |
|
|
|
|
const options: PaymentOption[] = res.current_country_methods.map( |
|
|
|
|
(method) => ({ |
|
|
|
|
id: method.key, |
|
|
|
|
label: method.key.charAt(0).toUpperCase() + method.key.slice(1), // 首字母大写
|
|
|
|
|
key: method.key |
|
|
|
|
})); |
|
|
|
|
label: |
|
|
|
|
method.key.charAt(0).toUpperCase() + method.key.slice(1), // 首字母大写
|
|
|
|
|
key: method.key, |
|
|
|
|
}) |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
updatedTabs[onlineTabIndex].options = options; |
|
|
|
|
} |
|
|
|
|
@ -270,7 +284,8 @@ export const OrderDetails = () => {
|
|
|
|
|
return updatedTabs; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}).catch(error => { |
|
|
|
|
}) |
|
|
|
|
.catch((error) => { |
|
|
|
|
console.error("获取支付方式失败:", error); |
|
|
|
|
}); |
|
|
|
|
}, []); |
|
|
|
|
@ -372,34 +387,64 @@ export const OrderDetails = () => {
|
|
|
|
|
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) |
|
|
|
|
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) |
|
|
|
|
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 |
|
|
|
|
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 |
|
|
|
|
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) |
|
|
|
|
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 |
|
|
|
|
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) { |
|
|
|
|
if (selectedPayment === "balance") { |
|
|
|
|
setIsPaymentLoading(false); |
|
|
|
|
setShowPaymentModal(false); |
|
|
|
|
if (res.success) { |
|
|
|
|
navigation.navigate("PaymentSuccessScreen", res); |
|
|
|
|
return; |
|
|
|
|
} else { |
|
|
|
|
Alert.alert(t("order.preview.Insufficient_balance")); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setIsPaymentLoading(false); |
|
|
|
|
setShowPaymentModal(false); |
|
|
|
|
navigation.navigate("Pay", { |
|
|
|
|
@ -418,7 +463,6 @@ export const OrderDetails = () => {
|
|
|
|
|
.finally(() => { |
|
|
|
|
setIsPaymentLoading(false); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
Alert.alert(t("error"), t("order.error.payment_update")); |
|
|
|
|
setIsPaymentLoading(false); |
|
|
|
|
@ -433,10 +477,7 @@ export const OrderDetails = () => {
|
|
|
|
|
|
|
|
|
|
// 验证电话号码（添加更严格的验证）
|
|
|
|
|
if (!phoneNumber || phoneNumber.length < 8) { |
|
|
|
|
Alert.alert( |
|
|
|
|
t("error"), |
|
|
|
|
t("order.error.invalid_phone") |
|
|
|
|
); |
|
|
|
|
Alert.alert(t("error"), t("order.error.invalid_phone")); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -452,7 +493,7 @@ export const OrderDetails = () => {
|
|
|
|
|
actual_amount: paymentParams.amount, |
|
|
|
|
shipping_fee: 0, |
|
|
|
|
domestic_shipping_fee: 0, |
|
|
|
|
phone: phoneNumber |
|
|
|
|
phone: phoneNumber, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 更新订单支付方式
|
|
|
|
|
@ -464,7 +505,7 @@ export const OrderDetails = () => {
|
|
|
|
|
method: paymentParams.payment_method, |
|
|
|
|
currency: paymentParams.currency, |
|
|
|
|
amount: paymentParams.amount, |
|
|
|
|
phone: phoneNumber |
|
|
|
|
phone: phoneNumber, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const response = await payApi.getPayInfo(payData); |
|
|
|
|
@ -557,7 +598,9 @@ export const OrderDetails = () => {
|
|
|
|
|
<View style={styles.orderStatusContent}> |
|
|
|
|
<View style={styles.orderStatusTitle}> |
|
|
|
|
<OrderIcon size={20} color="#3D3D3D" /> |
|
|
|
|
<Text style={styles.orderStatusTitleText}>{t("order.status")}</Text> |
|
|
|
|
<Text style={styles.orderStatusTitleText}> |
|
|
|
|
{t("order.status")} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
|
|
@ -568,7 +611,7 @@ export const OrderDetails = () => {
|
|
|
|
|
t("order.status.waiting_shipment"), |
|
|
|
|
t("order.status.in_transit"), |
|
|
|
|
t("order.status.waiting_receipt"), |
|
|
|
|
t("order.status.completed") |
|
|
|
|
t("order.status.completed"), |
|
|
|
|
]} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
@ -579,7 +622,9 @@ export const OrderDetails = () => {
|
|
|
|
|
<View style={styles.orderStatusContent}> |
|
|
|
|
<View style={styles.orderStatusTitle}> |
|
|
|
|
<InfoIcon size={20} color="#3D3D3D" /> |
|
|
|
|
<Text style={styles.orderStatusTitleText}>{t("order.information")}</Text> |
|
|
|
|
<Text style={styles.orderStatusTitleText}> |
|
|
|
|
{t("order.information")} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
|
|
<View style={styles.orderId}> |
|
|
|
|
@ -589,15 +634,21 @@ export const OrderDetails = () => {
|
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
<View style={styles.orderId}> |
|
|
|
|
<Text style={styles.orderIdText}>{t("order.create_time")}</Text> |
|
|
|
|
<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.orderIdText}> |
|
|
|
|
{t("order.shipping_type")} |
|
|
|
|
</Text> |
|
|
|
|
<Text style={styles.orderIdText1}> |
|
|
|
|
{orderDetails.shipping_type === 0 ? t("order.shipping.sea") : t("order.shipping.air")} |
|
|
|
|
{orderDetails.shipping_type === 0 |
|
|
|
|
? t("order.shipping.sea") |
|
|
|
|
: t("order.shipping.air")} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
@ -608,7 +659,9 @@ export const OrderDetails = () => {
|
|
|
|
|
<View style={styles.orderStatusContent}> |
|
|
|
|
<View style={styles.orderStatusTitle}> |
|
|
|
|
<AddressIcon size={22} color={"#3D3D3D"} /> |
|
|
|
|
<Text style={styles.orderStatusTitleText}>{t("order.delivery_info")}</Text> |
|
|
|
|
<Text style={styles.orderStatusTitleText}> |
|
|
|
|
{t("order.delivery_info")} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
|
|
<View style={styles.orderStatusContentPreviewInformation}> |
|
|
|
|
@ -747,7 +800,9 @@ export const OrderDetails = () => {
|
|
|
|
|
<TouchableOpacity style={styles.addCard}> |
|
|
|
|
<View style={styles.addCardBox}> |
|
|
|
|
<CardIcon size={16} color="#0098ef" /> |
|
|
|
|
<Text style={styles.addCardText}>{t("order.add_to_cart")}</Text> |
|
|
|
|
<Text style={styles.addCardText}> |
|
|
|
|
{t("order.add_to_cart")} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
@ -758,7 +813,9 @@ export const OrderDetails = () => {
|
|
|
|
|
<View style={styles.orderStatusContent}> |
|
|
|
|
<View style={styles.orderStatusTitle}> |
|
|
|
|
<PowerIcon size={20} color="#3D3D3D" /> |
|
|
|
|
<Text style={styles.orderStatusTitleText}>{t("order.price_details")}</Text> |
|
|
|
|
<Text style={styles.orderStatusTitleText}> |
|
|
|
|
{t("order.price_details")} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
<View style={styles.orderStatusContentPreview}> |
|
|
|
|
{/* <View style={styles.orderId}> |
|
|
|
|
@ -791,7 +848,8 @@ export const OrderDetails = () => {
|
|
|
|
|
</View> |
|
|
|
|
<View> |
|
|
|
|
<Text style={styles.orderRemakeText}> |
|
|
|
|
+ ${orderDetails.shipping_fee} {t("order.estimated_shipping")} |
|
|
|
|
+ ${orderDetails.shipping_fee}{" "} |
|
|
|
|
{t("order.estimated_shipping")} |
|
|
|
|
(COD) |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
@ -806,7 +864,9 @@ export const OrderDetails = () => {
|
|
|
|
|
style={styles.bottomButton1} |
|
|
|
|
onPress={() => setShowCancelModal(true)} |
|
|
|
|
> |
|
|
|
|
<Text style={styles.bottomButtonText1}>{t("order.cancel")}</Text> |
|
|
|
|
<Text style={styles.bottomButtonText1}> |
|
|
|
|
{t("order.cancel")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={styles.bottomButton} |
|
|
|
|
@ -827,7 +887,9 @@ export const OrderDetails = () => {
|
|
|
|
|
callPhone("15903995548"); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Text style={styles.bottomButtonText1}>{t("order.contact_shipping")}</Text> |
|
|
|
|
<Text style={styles.bottomButtonText1}> |
|
|
|
|
{t("order.contact_shipping")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={styles.bottomButton} |
|
|
|
|
@ -836,15 +898,22 @@ export const OrderDetails = () => {
|
|
|
|
|
navigation.goBack(); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Text style={styles.bottomButtonText}>{t("order.cancel")}</Text> |
|
|
|
|
<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 |
|
|
|
|
style={styles.bottomButton1} |
|
|
|
|
onPress={() => {}} |
|
|
|
|
> |
|
|
|
|
<Text style={styles.bottomButtonText1}> |
|
|
|
|
{t("order.check_logistics")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={styles.bottomButton} |
|
|
|
|
@ -854,13 +923,15 @@ export const OrderDetails = () => {
|
|
|
|
|
shipping_info: { |
|
|
|
|
shipping_company: "string", |
|
|
|
|
shipping_no: "string", |
|
|
|
|
shipping_info: {} |
|
|
|
|
} |
|
|
|
|
shipping_info: {}, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
navigation.goBack(); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Text style={styles.bottomButtonText}>{t("order.confirm_receipt")}</Text> |
|
|
|
|
<Text style={styles.bottomButtonText}> |
|
|
|
|
{t("order.confirm_receipt")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
@ -874,21 +945,32 @@ export const OrderDetails = () => {
|
|
|
|
|
navigation.goBack(); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Text style={styles.bottomButtonText1}>{t("order.cancel")}</Text> |
|
|
|
|
<Text style={styles.bottomButtonText1}> |
|
|
|
|
{t("order.cancel")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
<TouchableOpacity style={styles.bottomButton}> |
|
|
|
|
<Text style={styles.bottomButtonText}>{t("order.pay_now")}</Text> |
|
|
|
|
<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 |
|
|
|
|
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> |
|
|
|
|
<Text style={styles.bottomButtonText}> |
|
|
|
|
{t("order.reorder")} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
@ -902,14 +984,16 @@ export const OrderDetails = () => {
|
|
|
|
|
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)} style={styles.closeButtonContainer}> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
onPress={() => setShowPaymentModal(false)} |
|
|
|
|
style={styles.closeButtonContainer} |
|
|
|
|
> |
|
|
|
|
<Text style={styles.closeButtonText}>×</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
@ -918,17 +1002,28 @@ export const OrderDetails = () => {
|
|
|
|
|
{tabs.map((tab) => ( |
|
|
|
|
<TouchableOpacity |
|
|
|
|
key={tab.id} |
|
|
|
|
style={[styles.tab, currentTab === tab.id && styles.tabActive]} |
|
|
|
|
style={[ |
|
|
|
|
styles.tab, |
|
|
|
|
currentTab === tab.id && styles.tabActive, |
|
|
|
|
]} |
|
|
|
|
onPress={() => setCurrentTab(tab.id)} |
|
|
|
|
> |
|
|
|
|
<Text style={[styles.tabText, currentTab === tab.id && styles.tabTextActive]}> |
|
|
|
|
<Text |
|
|
|
|
style={[ |
|
|
|
|
styles.tabText, |
|
|
|
|
currentTab === tab.id && styles.tabTextActive, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
{tab.label} |
|
|
|
|
</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
))} |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<ScrollView showsVerticalScrollIndicator={false} style={styles.paymentOptions}> |
|
|
|
|
<ScrollView |
|
|
|
|
showsVerticalScrollIndicator={false} |
|
|
|
|
style={styles.paymentOptions} |
|
|
|
|
> |
|
|
|
|
{currentTab === "online" ? ( |
|
|
|
|
<> |
|
|
|
|
{tabs |
|
|
|
|
@ -947,7 +1042,8 @@ export const OrderDetails = () => {
|
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
<Text style={styles.balanceText}> |
|
|
|
|
{t("order.balance_remaining") || "Balance remaining"} |
|
|
|
|
{t("order.balance_remaining") || |
|
|
|
|
"Balance remaining"} |
|
|
|
|
{"\n"} |
|
|
|
|
{user.balance} |
|
|
|
|
{user.currency} |
|
|
|
|
@ -960,39 +1056,74 @@ export const OrderDetails = () => {
|
|
|
|
|
style={{ width: 80, height: 30, resizeMode: 'contain', marginRight: 10 }} |
|
|
|
|
/> |
|
|
|
|
{option.key === "mobile_money" && ( |
|
|
|
|
<View style={styles.mobileMoneyTextContainer}> |
|
|
|
|
{paymentMethods.find(method => method.key === option.key)?.value &&
|
|
|
|
|
Array.isArray(paymentMethods.find(method => method.key === option.key)?.value) ? ( |
|
|
|
|
(paymentMethods.find(method => method.key === option.key)?.value as string[]).map((item, index) => ( |
|
|
|
|
<View key={index} style={styles.mobileMoneyImgContainer}> |
|
|
|
|
<View |
|
|
|
|
style={styles.mobileMoneyTextContainer} |
|
|
|
|
> |
|
|
|
|
{paymentMethods.find( |
|
|
|
|
(method) => method.key === option.key |
|
|
|
|
)?.value && |
|
|
|
|
Array.isArray( |
|
|
|
|
paymentMethods.find( |
|
|
|
|
(method) => method.key === option.key |
|
|
|
|
)?.value |
|
|
|
|
) ? ( |
|
|
|
|
( |
|
|
|
|
paymentMethods.find( |
|
|
|
|
(method) => |
|
|
|
|
method.key === option.key |
|
|
|
|
)?.value as string[] |
|
|
|
|
).map((item, index) => ( |
|
|
|
|
<View |
|
|
|
|
key={index} |
|
|
|
|
style={ |
|
|
|
|
styles.mobileMoneyImgContainer |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<Image |
|
|
|
|
source={payMap(item) as any} |
|
|
|
|
style={{ width: 60, height: 22, resizeMode: 'contain' }} |
|
|
|
|
style={styles.mobileMoneyImg} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
)) |
|
|
|
|
) : ( |
|
|
|
|
<Text style={styles.mobileMoneyText}> |
|
|
|
|
{paymentMethods.find(method => method.key === option.key)?.value as string} |
|
|
|
|
</Text> |
|
|
|
|
) |
|
|
|
|
{ |
|
|
|
|
paymentMethods.find( |
|
|
|
|
(method) => |
|
|
|
|
method.key === option.key |
|
|
|
|
)?.value as string |
|
|
|
|
} |
|
|
|
|
</Text> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
<TouchableOpacity onPress={() => onSelectPayment(option.id)}> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
onPress={() => onSelectPayment(option.id)} |
|
|
|
|
> |
|
|
|
|
<View style={styles.checkboxContainer}> |
|
|
|
|
<CircleOutlineIcon |
|
|
|
|
size={fontSize(24)} |
|
|
|
|
strokeColor={selectedPayment === option.id ? "#007efa" : "#C6C6C6"} |
|
|
|
|
fillColor={selectedPayment === option.id ? "#007efa" : "transparent"} |
|
|
|
|
strokeColor={ |
|
|
|
|
selectedPayment === option.id |
|
|
|
|
? "#007efa" |
|
|
|
|
: "#C6C6C6" |
|
|
|
|
} |
|
|
|
|
fillColor={ |
|
|
|
|
selectedPayment === option.id |
|
|
|
|
? "#007efa" |
|
|
|
|
: "transparent" |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
{selectedPayment === option.id && ( |
|
|
|
|
<View style={styles.checkmarkContainer}> |
|
|
|
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
|
|
|
<CheckIcon |
|
|
|
|
size={fontSize(12)} |
|
|
|
|
color="#FFFFFF" |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
@ -1000,24 +1131,29 @@ export const OrderDetails = () => {
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
{/* PayPal Currency Selection */} |
|
|
|
|
{selectedPayment === "paypal" && option.id === "paypal" && isPaypalExpanded && ( |
|
|
|
|
{selectedPayment === "paypal" && |
|
|
|
|
option.id === "paypal" && |
|
|
|
|
isPaypalExpanded && ( |
|
|
|
|
<View style={styles.paypalExpandedContainer}> |
|
|
|
|
<View style={styles.paypalCurrencyContainer}> |
|
|
|
|
<Text style={styles.currencyTitle}> |
|
|
|
|
{t("order.select_currency") || "Select Currency"} |
|
|
|
|
{t("order.select_currency") || |
|
|
|
|
"Select Currency"} |
|
|
|
|
</Text> |
|
|
|
|
<View style={styles.currencyButtonsContainer}> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={[ |
|
|
|
|
styles.currencyButton, |
|
|
|
|
selectedCurrency === "USD" && styles.currencyButtonActive, |
|
|
|
|
selectedCurrency === "USD" && |
|
|
|
|
styles.currencyButtonActive, |
|
|
|
|
]} |
|
|
|
|
onPress={() => onSelectCurrency("USD")} |
|
|
|
|
> |
|
|
|
|
<Text |
|
|
|
|
style={[ |
|
|
|
|
styles.currencyButtonText, |
|
|
|
|
selectedCurrency === "USD" && styles.currencyButtonTextActive, |
|
|
|
|
selectedCurrency === "USD" && |
|
|
|
|
styles.currencyButtonTextActive, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
USD |
|
|
|
|
@ -1026,14 +1162,16 @@ export const OrderDetails = () => {
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={[ |
|
|
|
|
styles.currencyButton, |
|
|
|
|
selectedCurrency === "EUR" && styles.currencyButtonActive, |
|
|
|
|
selectedCurrency === "EUR" && |
|
|
|
|
styles.currencyButtonActive, |
|
|
|
|
]} |
|
|
|
|
onPress={() => onSelectCurrency("EUR")} |
|
|
|
|
> |
|
|
|
|
<Text |
|
|
|
|
style={[ |
|
|
|
|
styles.currencyButtonText, |
|
|
|
|
selectedCurrency === "EUR" && styles.currencyButtonTextActive, |
|
|
|
|
selectedCurrency === "EUR" && |
|
|
|
|
styles.currencyButtonTextActive, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
EUR |
|
|
|
|
@ -1044,7 +1182,10 @@ export const OrderDetails = () => {
|
|
|
|
|
{/* 显示转换后的金额 */} |
|
|
|
|
{isConverting ? ( |
|
|
|
|
<View style={styles.convertingContainer}> |
|
|
|
|
<ActivityIndicator size="small" color="#007efa" /> |
|
|
|
|
<ActivityIndicator |
|
|
|
|
size="small" |
|
|
|
|
color="#007efa" |
|
|
|
|
/> |
|
|
|
|
<Text style={styles.convertingText}> |
|
|
|
|
{t("order.converting") || "Converting..."} |
|
|
|
|
</Text> |
|
|
|
|
@ -1052,11 +1193,15 @@ export const OrderDetails = () => {
|
|
|
|
|
) : convertedAmount.length > 0 ? ( |
|
|
|
|
<View style={styles.convertedAmountContainer}> |
|
|
|
|
<Text style={styles.convertedAmountLabel}> |
|
|
|
|
{t("order.equivalent_amount") || "Equivalent Amount:"} |
|
|
|
|
{t("order.equivalent_amount") || |
|
|
|
|
"Equivalent Amount:"} |
|
|
|
|
</Text> |
|
|
|
|
<Text style={styles.convertedAmountValue}> |
|
|
|
|
{convertedAmount |
|
|
|
|
.find((item) => item.item_key === "total_amount") |
|
|
|
|
.find( |
|
|
|
|
(item) => |
|
|
|
|
item.item_key === "total_amount" |
|
|
|
|
) |
|
|
|
|
?.converted_amount.toFixed(2)}{" "} |
|
|
|
|
{selectedCurrency} |
|
|
|
|
</Text> |
|
|
|
|
@ -1096,15 +1241,22 @@ export const OrderDetails = () => {
|
|
|
|
|
<CircleOutlineIcon |
|
|
|
|
size={fontSize(24)} |
|
|
|
|
strokeColor={ |
|
|
|
|
selectedPayment === option.id ? "#007efa" : undefined |
|
|
|
|
selectedPayment === option.id |
|
|
|
|
? "#007efa" |
|
|
|
|
: undefined |
|
|
|
|
} |
|
|
|
|
fillColor={ |
|
|
|
|
selectedPayment === option.id ? "#007efa" : undefined |
|
|
|
|
selectedPayment === option.id |
|
|
|
|
? "#007efa" |
|
|
|
|
: undefined |
|
|
|
|
} |
|
|
|
|
/> |
|
|
|
|
{selectedPayment === option.id && ( |
|
|
|
|
<View style={styles.checkmarkContainer}> |
|
|
|
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
|
|
|
<CheckIcon |
|
|
|
|
size={fontSize(12)} |
|
|
|
|
color="#FFFFFF" |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
@ -1128,7 +1280,8 @@ export const OrderDetails = () => {
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={[ |
|
|
|
|
styles.confirmButton, |
|
|
|
|
(isConfirmButtonDisabled() || isPaymentLoading) && styles.confirmButtonDisabled, |
|
|
|
|
(isConfirmButtonDisabled() || isPaymentLoading) && |
|
|
|
|
styles.confirmButtonDisabled, |
|
|
|
|
]} |
|
|
|
|
onPress={handlePaymentConfirm} |
|
|
|
|
disabled={isConfirmButtonDisabled() || isPaymentLoading} |
|
|
|
|
@ -1202,7 +1355,7 @@ export const OrderDetails = () => {
|
|
|
|
|
const styles = StyleSheet.create<Styles>({ |
|
|
|
|
safeArea: { |
|
|
|
|
flex: 1, |
|
|
|
|
backgroundColor: '#fff', |
|
|
|
|
backgroundColor: "#fff", |
|
|
|
|
}, |
|
|
|
|
safeAreaContent: { |
|
|
|
|
flex: 1, |
|
|
|
|
@ -1461,39 +1614,38 @@ const styles = StyleSheet.create<Styles>({
|
|
|
|
|
}, |
|
|
|
|
modalOverlay: { |
|
|
|
|
flex: 1, |
|
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)", |
|
|
|
|
justifyContent: "flex-end", |
|
|
|
|
}, |
|
|
|
|
modalContent: { |
|
|
|
|
backgroundColor: '#fff', |
|
|
|
|
backgroundColor: "#fff", |
|
|
|
|
borderTopLeftRadius: 20, |
|
|
|
|
borderTopRightRadius: 20, |
|
|
|
|
padding: 20, |
|
|
|
|
maxHeight: '80%', |
|
|
|
|
maxHeight: "80%", |
|
|
|
|
}, |
|
|
|
|
modalHeader: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
justifyContent: 'space-between', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
alignItems: "center", |
|
|
|
|
marginBottom: 20, |
|
|
|
|
}, |
|
|
|
|
modalTitle: { |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: '600', |
|
|
|
|
fontWeight: "600", |
|
|
|
|
}, |
|
|
|
|
closeButtonContainer: { |
|
|
|
|
padding: 5, |
|
|
|
|
}, |
|
|
|
|
closeButtonText: { |
|
|
|
|
fontSize: fontSize(24), |
|
|
|
|
color: '#999', |
|
|
|
|
color: "#999", |
|
|
|
|
}, |
|
|
|
|
tabContainer: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
marginBottom: 15, |
|
|
|
|
borderBottomWidth: 1, |
|
|
|
|
borderBottomColor: '#f5f5f5', |
|
|
|
|
borderBottomColor: "#f5f5f5", |
|
|
|
|
}, |
|
|
|
|
tab: { |
|
|
|
|
paddingVertical: 10, |
|
|
|
|
@ -1502,31 +1654,31 @@ const styles = StyleSheet.create<Styles>({
|
|
|
|
|
}, |
|
|
|
|
tabActive: { |
|
|
|
|
borderBottomWidth: 2, |
|
|
|
|
borderBottomColor: '#FF5100', |
|
|
|
|
borderBottomColor: "#FF5100", |
|
|
|
|
}, |
|
|
|
|
tabText: { |
|
|
|
|
fontSize: fontSize(16), |
|
|
|
|
color: '#666', |
|
|
|
|
color: "#666", |
|
|
|
|
}, |
|
|
|
|
tabTextActive: { |
|
|
|
|
color: '#FF5100', |
|
|
|
|
fontWeight: '500', |
|
|
|
|
color: "#FF5100", |
|
|
|
|
fontWeight: "500", |
|
|
|
|
}, |
|
|
|
|
paymentOptions: { |
|
|
|
|
maxHeight: 300, |
|
|
|
|
}, |
|
|
|
|
cardContainer: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
justifyContent: 'space-between', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
alignItems: "center", |
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
padding: 15, |
|
|
|
|
backgroundColor: '#F8F8F8', |
|
|
|
|
backgroundColor: "#F8F8F8", |
|
|
|
|
borderRadius: 8, |
|
|
|
|
marginBottom: 10, |
|
|
|
|
}, |
|
|
|
|
iconRow: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
alignItems: "center", |
|
|
|
|
flex: 1, |
|
|
|
|
}, |
|
|
|
|
imageContainer: { |
|
|
|
|
@ -1559,11 +1711,11 @@ const styles = StyleSheet.create<Styles>({
|
|
|
|
|
}, |
|
|
|
|
currencyTitle: { |
|
|
|
|
fontSize: fontSize(14), |
|
|
|
|
color: '#666', |
|
|
|
|
color: "#666", |
|
|
|
|
marginBottom: 10, |
|
|
|
|
}, |
|
|
|
|
paypalExpandedContainer: { |
|
|
|
|
backgroundColor: '#f8f8f8', |
|
|
|
|
backgroundColor: "#f8f8f8", |
|
|
|
|
borderRadius: 8, |
|
|
|
|
marginTop: -5, |
|
|
|
|
marginBottom: 10, |
|
|
|
|
@ -1574,7 +1726,7 @@ const styles = StyleSheet.create<Styles>({
|
|
|
|
|
padding: 10, |
|
|
|
|
}, |
|
|
|
|
currencyButtonsContainer: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
marginBottom: 10, |
|
|
|
|
}, |
|
|
|
|
currencyButton: { |
|
|
|
|
@ -1582,30 +1734,30 @@ const styles = StyleSheet.create<Styles>({
|
|
|
|
|
paddingHorizontal: 15, |
|
|
|
|
borderRadius: 20, |
|
|
|
|
borderWidth: 1, |
|
|
|
|
borderColor: '#ddd', |
|
|
|
|
borderColor: "#ddd", |
|
|
|
|
marginRight: 10, |
|
|
|
|
}, |
|
|
|
|
currencyButtonActive: { |
|
|
|
|
backgroundColor: '#FFF0E8', |
|
|
|
|
borderColor: '#FF5100', |
|
|
|
|
backgroundColor: "#FFF0E8", |
|
|
|
|
borderColor: "#FF5100", |
|
|
|
|
}, |
|
|
|
|
currencyButtonText: { |
|
|
|
|
fontSize: fontSize(14), |
|
|
|
|
color: '#333', |
|
|
|
|
color: "#333", |
|
|
|
|
}, |
|
|
|
|
currencyButtonTextActive: { |
|
|
|
|
color: '#FF5100', |
|
|
|
|
fontWeight: '600', |
|
|
|
|
color: "#FF5100", |
|
|
|
|
fontWeight: "600", |
|
|
|
|
}, |
|
|
|
|
convertingContainer: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
justifyContent: 'flex-end', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
alignItems: "center", |
|
|
|
|
justifyContent: "flex-end", |
|
|
|
|
marginTop: 10, |
|
|
|
|
}, |
|
|
|
|
convertingText: { |
|
|
|
|
fontSize: fontSize(14), |
|
|
|
|
color: '#999', |
|
|
|
|
color: "#999", |
|
|
|
|
marginLeft: 10, |
|
|
|
|
}, |
|
|
|
|
convertedAmountContainer: { |
|
|
|
|
@ -1613,23 +1765,23 @@ const styles = StyleSheet.create<Styles>({
|
|
|
|
|
}, |
|
|
|
|
convertedAmountLabel: { |
|
|
|
|
fontSize: fontSize(14), |
|
|
|
|
color: '#666', |
|
|
|
|
color: "#666", |
|
|
|
|
marginBottom: 5, |
|
|
|
|
}, |
|
|
|
|
convertedAmountValue: { |
|
|
|
|
fontSize: fontSize(16), |
|
|
|
|
fontWeight: '600', |
|
|
|
|
color: '#FF5100', |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#FF5100", |
|
|
|
|
}, |
|
|
|
|
actionButtonsContainer: { |
|
|
|
|
marginTop: 20, |
|
|
|
|
paddingTop: 20, |
|
|
|
|
borderTopWidth: 1, |
|
|
|
|
borderTopColor: '#f5f5f5', |
|
|
|
|
borderTopColor: "#f5f5f5", |
|
|
|
|
}, |
|
|
|
|
actionButtons: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
justifyContent: 'space-between', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
}, |
|
|
|
|
cancelButton: { |
|
|
|
|
flex: 1, |
|
|
|
|
@ -1637,28 +1789,28 @@ const styles = StyleSheet.create<Styles>({
|
|
|
|
|
marginRight: 10, |
|
|
|
|
borderRadius: 25, |
|
|
|
|
borderWidth: 1, |
|
|
|
|
borderColor: '#999', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
borderColor: "#999", |
|
|
|
|
alignItems: "center", |
|
|
|
|
}, |
|
|
|
|
confirmButton: { |
|
|
|
|
flex: 1, |
|
|
|
|
padding: 15, |
|
|
|
|
marginLeft: 10, |
|
|
|
|
borderRadius: 25, |
|
|
|
|
backgroundColor: '#FF5100', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
backgroundColor: "#FF5100", |
|
|
|
|
alignItems: "center", |
|
|
|
|
}, |
|
|
|
|
confirmButtonDisabled: { |
|
|
|
|
backgroundColor: '#ccc', |
|
|
|
|
backgroundColor: "#ccc", |
|
|
|
|
}, |
|
|
|
|
buttonTextDark: { |
|
|
|
|
fontSize: fontSize(16), |
|
|
|
|
color: '#666', |
|
|
|
|
color: "#666", |
|
|
|
|
}, |
|
|
|
|
buttonTextWhite: { |
|
|
|
|
fontSize: fontSize(16), |
|
|
|
|
color: '#fff', |
|
|
|
|
fontWeight: '600', |
|
|
|
|
color: "#fff", |
|
|
|
|
fontWeight: "600", |
|
|
|
|
}, |
|
|
|
|
operatorImage: { |
|
|
|
|
width: 80, |
|
|
|
|
|
unknown
2 weeks ago