|
|
|
|
@ -9,7 +9,7 @@ import {
|
|
|
|
|
Alert, |
|
|
|
|
ActivityIndicator, |
|
|
|
|
StatusBar, |
|
|
|
|
SafeAreaView |
|
|
|
|
SafeAreaView, |
|
|
|
|
} from "react-native"; |
|
|
|
|
import { payApi, PaymentMethodsResponse } from "../../services/api/payApi"; |
|
|
|
|
import fontSize from "../../utils/fontsizeUtils"; |
|
|
|
|
@ -22,13 +22,14 @@ import { useRoute, RouteProp } from "@react-navigation/native";
|
|
|
|
|
import useUserStore from "../../store/user"; |
|
|
|
|
import { createOrderDataType } from "../../types/createOrder"; |
|
|
|
|
import useBurialPointStore from "../../store/burialPoint"; |
|
|
|
|
import {getBurialPointData} from "../../store/burialPoint"; |
|
|
|
|
import { getBurialPointData } from "../../store/burialPoint"; |
|
|
|
|
import { |
|
|
|
|
ordersApi, |
|
|
|
|
OrderData, CreateOrderRequest, Order, |
|
|
|
|
OrderData, |
|
|
|
|
CreateOrderRequest, |
|
|
|
|
Order, |
|
|
|
|
} from "../../services/api/orders"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Define route params type
|
|
|
|
|
type PaymentMethodRouteParams = { |
|
|
|
|
freight_forwarder_address_id?: number; |
|
|
|
|
@ -36,7 +37,12 @@ type PaymentMethodRouteParams = {
|
|
|
|
|
|
|
|
|
|
// Define the root navigation params
|
|
|
|
|
type RootStackParamList = { |
|
|
|
|
PreviewOrder: {data:Order,payMethod:string,currency:string,amount:number}; |
|
|
|
|
PreviewOrder: { |
|
|
|
|
data: Order; |
|
|
|
|
payMethod: string; |
|
|
|
|
currency: string; |
|
|
|
|
amount: number; |
|
|
|
|
}; |
|
|
|
|
Pay: { order_id: string }; |
|
|
|
|
ShippingFee: { freight_forwarder_address_id?: number }; |
|
|
|
|
PaymentMethod: { freight_forwarder_address_id?: number }; |
|
|
|
|
@ -79,7 +85,11 @@ const PaymentMethodItem = ({
|
|
|
|
|
eur: number; |
|
|
|
|
}; |
|
|
|
|
totalAmount?: number; |
|
|
|
|
convertedAmount?: number; |
|
|
|
|
convertedAmount?: { |
|
|
|
|
converted_amount: number; |
|
|
|
|
item_key: string; |
|
|
|
|
original_amount: number; |
|
|
|
|
}[]; |
|
|
|
|
isConverting?: boolean; |
|
|
|
|
}) => ( |
|
|
|
|
<View> |
|
|
|
|
@ -108,18 +118,23 @@ const PaymentMethodItem = ({
|
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Show currency selector directly under PayPal when selected */} |
|
|
|
|
{isSelected && option.label === "Paypal" && selectedCurrency && onSelectCurrency && exchangeRates && totalAmount && ( |
|
|
|
|
<CurrencySelector |
|
|
|
|
selectedCurrency={selectedCurrency} |
|
|
|
|
onSelectCurrency={onSelectCurrency} |
|
|
|
|
exchangeRates={exchangeRates} |
|
|
|
|
totalAmount={totalAmount} |
|
|
|
|
convertedAmount={convertedAmount} |
|
|
|
|
isConverting={isConverting} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{isSelected && |
|
|
|
|
option.label === "Paypal" && |
|
|
|
|
selectedCurrency && |
|
|
|
|
onSelectCurrency && |
|
|
|
|
exchangeRates && |
|
|
|
|
totalAmount && ( |
|
|
|
|
<CurrencySelector |
|
|
|
|
selectedCurrency={selectedCurrency} |
|
|
|
|
onSelectCurrency={onSelectCurrency} |
|
|
|
|
exchangeRates={exchangeRates} |
|
|
|
|
totalAmount={totalAmount} |
|
|
|
|
convertedAmount={convertedAmount} |
|
|
|
|
isConverting={isConverting} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
@ -132,7 +147,11 @@ interface CurrencySelectorProps {
|
|
|
|
|
eur: number; |
|
|
|
|
}; |
|
|
|
|
totalAmount: number; |
|
|
|
|
convertedAmount?: number; |
|
|
|
|
convertedAmount?: { |
|
|
|
|
converted_amount: number; |
|
|
|
|
item_key: string; |
|
|
|
|
original_amount: number; |
|
|
|
|
}[]; |
|
|
|
|
isConverting?: boolean; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -141,7 +160,7 @@ const CurrencySelector = ({
|
|
|
|
|
onSelectCurrency, |
|
|
|
|
exchangeRates, |
|
|
|
|
totalAmount, |
|
|
|
|
convertedAmount = 0, |
|
|
|
|
convertedAmount = [], |
|
|
|
|
isConverting = false, |
|
|
|
|
}: CurrencySelectorProps) => ( |
|
|
|
|
<View style={styles.currencySelectorContainer}> |
|
|
|
|
@ -166,15 +185,22 @@ const CurrencySelector = ({
|
|
|
|
|
<Text style={styles.currencyText}>EUR</Text> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<View style={styles.totalContainer}> |
|
|
|
|
{!isConverting && ( |
|
|
|
|
<Text style={styles.totalText}> |
|
|
|
|
{selectedCurrency === "USD" ? "$" : "€"}{convertedAmount} |
|
|
|
|
</Text> |
|
|
|
|
{!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} /> |
|
|
|
|
<ActivityIndicator |
|
|
|
|
size="small" |
|
|
|
|
color="#ff6000" |
|
|
|
|
style={styles.loadingIndicator} |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
@ -206,14 +232,16 @@ export const PaymentMethod = () => {
|
|
|
|
|
const [loading, setLoading] = useState(false); |
|
|
|
|
const { user } = useUserStore(); |
|
|
|
|
const [createOrderData, setCreateOrderData] = useState<createOrderDataType>(); |
|
|
|
|
const { items, orderData,setOrderData,resetOrder } = useCreateOrderStore(); |
|
|
|
|
const { items, orderData, setOrderData, resetOrder } = useCreateOrderStore(); |
|
|
|
|
const [selectedCurrency, setSelectedCurrency] = useState("USD"); |
|
|
|
|
const [convertedAmount, setConvertedAmount] = useState(0); |
|
|
|
|
const [convertedAmount, setConvertedAmount] = useState< |
|
|
|
|
{ converted_amount: number; item_key: string; original_amount: number }[] |
|
|
|
|
>([]); |
|
|
|
|
const [isConverting, setIsConverting] = useState(false); |
|
|
|
|
const [createLoading, setCreateLoading] = useState(false); |
|
|
|
|
const [exchangeRates] = useState({ |
|
|
|
|
usd: 580.00, |
|
|
|
|
eur: 655.96 |
|
|
|
|
usd: 580.0, |
|
|
|
|
eur: 655.96, |
|
|
|
|
}); |
|
|
|
|
const [totalAmount, setTotalAmount] = useState(121.97); |
|
|
|
|
const { logPaymentConfirm } = useBurialPointStore(); |
|
|
|
|
@ -222,56 +250,54 @@ export const PaymentMethod = () => {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onSelectPayment = (paymentId: string) => { |
|
|
|
|
if(paymentId === "Paypal"){ |
|
|
|
|
if (paymentId === "Paypal") { |
|
|
|
|
setIsConverting(true); |
|
|
|
|
const data = { |
|
|
|
|
from_currency: user.currency, |
|
|
|
|
to_currency: selectedCurrency, |
|
|
|
|
amounts:[ |
|
|
|
|
{ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
payApi.convertCurrency({ |
|
|
|
|
const data = { |
|
|
|
|
from_currency: user.currency, |
|
|
|
|
to_currency: selectedCurrency, |
|
|
|
|
amount: ( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(createOrderData?.shipping_fee || 0) |
|
|
|
|
), |
|
|
|
|
}).then((res) => { |
|
|
|
|
setConvertedAmount(res.converted_amount); |
|
|
|
|
setIsConverting(false); |
|
|
|
|
}).catch(error => { |
|
|
|
|
console.error("Currency conversion failed:", error); |
|
|
|
|
setIsConverting(false); |
|
|
|
|
}); |
|
|
|
|
amounts: { |
|
|
|
|
total_amount: previewOrder?.total_amount || 0, |
|
|
|
|
domestic_shipping_fee: createOrderData?.domestic_shipping_fee || 0, |
|
|
|
|
shipping_fee: createOrderData?.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) => {
|
|
|
|
|
const onSelectCurrency = (currency: string) => { |
|
|
|
|
setSelectedCurrency(currency); |
|
|
|
|
// Call the API to convert the currency
|
|
|
|
|
setIsConverting(true); |
|
|
|
|
payApi.convertCurrency({ |
|
|
|
|
const data = { |
|
|
|
|
from_currency: user.currency, |
|
|
|
|
to_currency: currency, |
|
|
|
|
amount: ( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(createOrderData?.shipping_fee || 0) |
|
|
|
|
), |
|
|
|
|
}).then((res) => { |
|
|
|
|
setConvertedAmount(res.converted_amount); |
|
|
|
|
setIsConverting(false); |
|
|
|
|
}).catch(error => { |
|
|
|
|
console.error("Currency conversion failed:", error); |
|
|
|
|
setIsConverting(false); |
|
|
|
|
}); |
|
|
|
|
amounts: { |
|
|
|
|
total_amount: previewOrder?.total_amount || 0, |
|
|
|
|
domestic_shipping_fee: createOrderData?.domestic_shipping_fee || 0, |
|
|
|
|
shipping_fee: createOrderData?.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 getPaymentMethods = async () => { |
|
|
|
|
@ -371,7 +397,7 @@ export const PaymentMethod = () => {
|
|
|
|
|
attribute_name: attr.attribute_name, |
|
|
|
|
attribute_value: attr.value, |
|
|
|
|
})), |
|
|
|
|
sku_image:item.sku_image_url, |
|
|
|
|
sku_image: item.sku_image_url, |
|
|
|
|
quantity: item.quantity, |
|
|
|
|
unit_price: item.unit_price, |
|
|
|
|
total_price: item.total_price, |
|
|
|
|
@ -379,67 +405,125 @@ export const PaymentMethod = () => {
|
|
|
|
|
if (createOrderData) { |
|
|
|
|
createOrderData.items = items; |
|
|
|
|
createOrderData.payment_method = selectedPayment; |
|
|
|
|
createOrderData.total_amount = selectedPayment === 'Paypal' ? convertedAmount : |
|
|
|
|
Number(((previewOrder?.total_amount || 0) + (orderData?.domestic_shipping_fee || 0) |
|
|
|
|
+ (orderData?.shipping_fee || 0)).toFixed(2)); |
|
|
|
|
createOrderData.actual_amount = selectedPayment === 'Paypal' ? convertedAmount : |
|
|
|
|
Number(((previewOrder?.total_amount || 0) + (orderData?.domestic_shipping_fee || 0) |
|
|
|
|
+ (orderData?.shipping_fee || 0)).toFixed(2)); |
|
|
|
|
createOrderData.currency = selectedPayment === 'Paypal' ? selectedCurrency : user.currency; |
|
|
|
|
createOrderData.total_amount = |
|
|
|
|
selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.reduce( |
|
|
|
|
(acc, item) => acc + item.converted_amount, |
|
|
|
|
0 |
|
|
|
|
) |
|
|
|
|
: Number( |
|
|
|
|
( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(orderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(orderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2) |
|
|
|
|
); |
|
|
|
|
createOrderData.actual_amount = |
|
|
|
|
selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.reduce( |
|
|
|
|
(acc, item) => acc + item.converted_amount, |
|
|
|
|
0 |
|
|
|
|
) |
|
|
|
|
: Number( |
|
|
|
|
( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(orderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(orderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2) |
|
|
|
|
); |
|
|
|
|
createOrderData.currency = |
|
|
|
|
selectedPayment === "Paypal" ? selectedCurrency : user.currency; |
|
|
|
|
|
|
|
|
|
createOrderData.domestic_shipping_fee = |
|
|
|
|
selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.find( |
|
|
|
|
(item) => item.item_key === "domestic_shipping_fee" |
|
|
|
|
)?.converted_amount || 0 |
|
|
|
|
: orderData?.domestic_shipping_fee; |
|
|
|
|
|
|
|
|
|
createOrderData.shipping_fee = |
|
|
|
|
selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.find( |
|
|
|
|
(item) => item.item_key === "shipping_fee" |
|
|
|
|
)?.converted_amount || 0 |
|
|
|
|
: orderData?.shipping_fee; |
|
|
|
|
} |
|
|
|
|
setOrderData(createOrderData || {}); |
|
|
|
|
const data = { |
|
|
|
|
pay_method: selectedPayment, |
|
|
|
|
offline_payment: currentTab === 'offline' ? 0 : 1, |
|
|
|
|
all_price: selectedPayment === 'Paypal' ? convertedAmount : |
|
|
|
|
Number(((previewOrder?.total_amount || 0) + (orderData?.domestic_shipping_fee || 0) |
|
|
|
|
+ (orderData?.shipping_fee || 0)).toFixed(2)), |
|
|
|
|
all_quantity:previewOrder?.items?.reduce((acc,item) => acc + item.quantity,0), |
|
|
|
|
offline_payment: currentTab === "offline" ? 0 : 1, |
|
|
|
|
all_price: |
|
|
|
|
selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.reduce( |
|
|
|
|
(acc, item) => acc + item.converted_amount, |
|
|
|
|
0 |
|
|
|
|
) |
|
|
|
|
: Number( |
|
|
|
|
( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(orderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(orderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2) |
|
|
|
|
), |
|
|
|
|
all_quantity: previewOrder?.items?.reduce( |
|
|
|
|
(acc, item) => acc + item.quantity, |
|
|
|
|
0 |
|
|
|
|
), |
|
|
|
|
currency: selectedCurrency, |
|
|
|
|
shipping_method: orderData?.transport_type || 0, |
|
|
|
|
shipping_price_outside: orderData?.shipping_fee || 0, |
|
|
|
|
shipping_price_within: orderData?.domestic_shipping_fee || 0, |
|
|
|
|
timestamp: new Date().toISOString(), |
|
|
|
|
pay_product:JSON.stringify(previewOrder?.items.map(item => { |
|
|
|
|
return { |
|
|
|
|
offer_id: item.offer_id, |
|
|
|
|
price: item.unit_price, |
|
|
|
|
all_price: previewOrder.total_amount, |
|
|
|
|
currency: previewOrder.currency, |
|
|
|
|
pay_product: JSON.stringify( |
|
|
|
|
previewOrder?.items.map((item) => { |
|
|
|
|
return { |
|
|
|
|
offer_id: item.offer_id, |
|
|
|
|
price: item.unit_price, |
|
|
|
|
all_price: |
|
|
|
|
convertedAmount.find((item) => item.item_key === "total_amount") |
|
|
|
|
?.converted_amount || 0, |
|
|
|
|
currency: previewOrder.currency, |
|
|
|
|
|
|
|
|
|
sku: item.attributes.map(sku => { |
|
|
|
|
return { |
|
|
|
|
sku_id: item.sku_id, |
|
|
|
|
value: sku.value |
|
|
|
|
}; |
|
|
|
|
}), |
|
|
|
|
quantity: item.quantity, |
|
|
|
|
product_name: item.product_name, |
|
|
|
|
timestamp: new Date(), |
|
|
|
|
product_img: item.sku_image_url |
|
|
|
|
}; |
|
|
|
|
})) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
logPaymentConfirm(data,navigation.getState().routes[navigation.getState().index - 1]?.name as string) |
|
|
|
|
sku: item.attributes.map((sku) => { |
|
|
|
|
return { |
|
|
|
|
sku_id: item.sku_id, |
|
|
|
|
value: sku.value, |
|
|
|
|
}; |
|
|
|
|
}), |
|
|
|
|
quantity: item.quantity, |
|
|
|
|
product_name: item.product_name, |
|
|
|
|
timestamp: new Date(), |
|
|
|
|
product_img: item.sku_image_url, |
|
|
|
|
}; |
|
|
|
|
}) |
|
|
|
|
), |
|
|
|
|
}; |
|
|
|
|
logPaymentConfirm( |
|
|
|
|
data, |
|
|
|
|
navigation.getState().routes[navigation.getState().index - 1] |
|
|
|
|
?.name as string |
|
|
|
|
); |
|
|
|
|
console.log(getBurialPointData()); |
|
|
|
|
|
|
|
|
|
setCreateLoading(true) |
|
|
|
|
|
|
|
|
|
setCreateLoading(true); |
|
|
|
|
try { |
|
|
|
|
const res = await ordersApi.createOrder(createOrderData as CreateOrderRequest) |
|
|
|
|
setCreateLoading(false) |
|
|
|
|
navigation.navigate("PreviewOrder",{data:res,payMethod:selectedPayment,currency:selectedCurrency,amount:convertedAmount}); |
|
|
|
|
resetOrder() |
|
|
|
|
}catch(e) { |
|
|
|
|
setCreateLoading(false) |
|
|
|
|
Alert.alert('Error', 'Failed to get preview order'); |
|
|
|
|
}finally { |
|
|
|
|
setCreateLoading(false) |
|
|
|
|
const res = await ordersApi.createOrder( |
|
|
|
|
createOrderData as CreateOrderRequest |
|
|
|
|
); |
|
|
|
|
setCreateLoading(false); |
|
|
|
|
navigation.navigate("PreviewOrder", { |
|
|
|
|
data: res, |
|
|
|
|
payMethod: selectedPayment, |
|
|
|
|
currency: selectedCurrency, |
|
|
|
|
amount: convertedAmount.find((item) => item.item_key === "total_amount")?.converted_amount || 0, |
|
|
|
|
}); |
|
|
|
|
resetOrder(); |
|
|
|
|
} catch (e) { |
|
|
|
|
setCreateLoading(false); |
|
|
|
|
Alert.alert("Error", "Failed to get preview order"); |
|
|
|
|
} finally { |
|
|
|
|
setCreateLoading(false); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
@ -454,7 +538,6 @@ export const PaymentMethod = () => {
|
|
|
|
|
<BackIcon size={22} /> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
<Text style={styles.headerTitle}>付款方式</Text> |
|
|
|
|
<View style={{ width: 20 }} /> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
{loading ? ( |
|
|
|
|
@ -476,8 +559,7 @@ export const PaymentMethod = () => {
|
|
|
|
|
currentTab === tab.id && styles.tabActive, |
|
|
|
|
]} |
|
|
|
|
onPress={() => { |
|
|
|
|
|
|
|
|
|
setCurrentTab(tab.id) |
|
|
|
|
setCurrentTab(tab.id); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Text |
|
|
|
|
@ -567,7 +649,9 @@ export const PaymentMethod = () => {
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View style={styles.itemPrices}> |
|
|
|
|
<Text style={styles.itemPrice}>${item?.total_price}</Text> |
|
|
|
|
<Text style={styles.itemPrice}> |
|
|
|
|
${item?.total_price} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
))} |
|
|
|
|
@ -580,7 +664,16 @@ export const PaymentMethod = () => {
|
|
|
|
|
<Text>商品总价</Text> |
|
|
|
|
<View> |
|
|
|
|
<Text> |
|
|
|
|
{previewOrder?.total_amount || 0} {previewOrder?.currency} |
|
|
|
|
{selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.find( |
|
|
|
|
(item) => item.item_key === "total_amount" |
|
|
|
|
)?.converted_amount || 0 |
|
|
|
|
: previewOrder?.total_amount || 0}{" "} |
|
|
|
|
{selectedPayment === "Paypal" |
|
|
|
|
? selectedCurrency === "USD" |
|
|
|
|
? "USD" |
|
|
|
|
: "EUR" |
|
|
|
|
: previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
@ -588,8 +681,16 @@ export const PaymentMethod = () => {
|
|
|
|
|
<Text>中国运费</Text> |
|
|
|
|
<View> |
|
|
|
|
<Text> |
|
|
|
|
{createOrderData?.domestic_shipping_fee || 0}{" "} |
|
|
|
|
{previewOrder?.currency} |
|
|
|
|
{selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.find( |
|
|
|
|
(item) => item.item_key === "domestic_shipping_fee" |
|
|
|
|
)?.converted_amount || 0 |
|
|
|
|
: orderData?.domestic_shipping_fee || 0}{" "} |
|
|
|
|
{selectedPayment === "Paypal" |
|
|
|
|
? selectedCurrency === "USD" |
|
|
|
|
? "USD" |
|
|
|
|
: "EUR" |
|
|
|
|
: previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
@ -598,7 +699,16 @@ export const PaymentMethod = () => {
|
|
|
|
|
<Text>预计国际运费</Text> |
|
|
|
|
<View> |
|
|
|
|
<Text> |
|
|
|
|
{createOrderData?.shipping_fee || 0} {previewOrder?.currency} |
|
|
|
|
{selectedPayment === "Paypal" |
|
|
|
|
? convertedAmount.find( |
|
|
|
|
(item) => item.item_key === "shipping_fee" |
|
|
|
|
)?.converted_amount || 0 |
|
|
|
|
: orderData?.shipping_fee || 0}{" "} |
|
|
|
|
{selectedPayment === "Paypal" |
|
|
|
|
? selectedCurrency === "USD" |
|
|
|
|
? "USD" |
|
|
|
|
: "EUR" |
|
|
|
|
: previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
@ -617,86 +727,81 @@ export const PaymentMethod = () => {
|
|
|
|
|
Total |
|
|
|
|
</Text> |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
selectedPayment === 'Paypal' && selectedCurrency !== user.currency && ( |
|
|
|
|
<View style={{flexDirection:'row'}}> |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#151515", |
|
|
|
|
textDecorationLine: 'line-through' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
{( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(createOrderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2)}{" "} |
|
|
|
|
{previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
|
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#ff6000", |
|
|
|
|
marginLeft:10 |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{convertedAmount}{selectedCurrency === "USD" ? "USD" : "EUR"} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
selectedPayment === 'Paypal' && selectedCurrency === user.currency && ( |
|
|
|
|
<View style={{flexDirection:'row'}}> |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#ff6000", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
{( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(createOrderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2)}{" "} |
|
|
|
|
{previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
{selectedPayment === "Paypal" && |
|
|
|
|
selectedCurrency !== user.currency && ( |
|
|
|
|
<View style={{ flexDirection: "row" }}> |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#151515", |
|
|
|
|
textDecorationLine: "line-through", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(createOrderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2)}{" "} |
|
|
|
|
{previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
selectedPayment !== 'Paypal'&& ( |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#ff6000", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#ff6000", |
|
|
|
|
marginLeft: 10, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{convertedAmount |
|
|
|
|
.reduce( |
|
|
|
|
(acc, item) => acc + item.converted_amount, |
|
|
|
|
0 |
|
|
|
|
) |
|
|
|
|
.toFixed(2)} |
|
|
|
|
{selectedCurrency === "USD" ? "USD" : "EUR"} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
{( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(createOrderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2)}{" "} |
|
|
|
|
{previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
{selectedPayment === "Paypal" && |
|
|
|
|
selectedCurrency === user.currency && ( |
|
|
|
|
<View style={{ flexDirection: "row" }}> |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#ff6000", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{convertedAmount |
|
|
|
|
.reduce( |
|
|
|
|
(acc, item) => acc + item.converted_amount, |
|
|
|
|
0 |
|
|
|
|
) |
|
|
|
|
.toFixed(2)} |
|
|
|
|
{selectedCurrency === "USD" ? "USD" : "EUR"} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
{selectedPayment !== "Paypal" && ( |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
color: "#ff6000", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{( |
|
|
|
|
(previewOrder?.total_amount || 0) + |
|
|
|
|
(createOrderData?.domestic_shipping_fee || 0) + |
|
|
|
|
(createOrderData?.shipping_fee || 0) |
|
|
|
|
).toFixed(2)}{" "} |
|
|
|
|
{previewOrder?.currency} |
|
|
|
|
</Text> |
|
|
|
|
)} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
@ -705,12 +810,17 @@ export const PaymentMethod = () => {
|
|
|
|
|
|
|
|
|
|
<View style={styles.bottomBar}> |
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={styles.submitButton} |
|
|
|
|
style={[ |
|
|
|
|
styles.submitButton, |
|
|
|
|
(!selectedPayment || createLoading || isConverting) && styles.disabledButton |
|
|
|
|
]} |
|
|
|
|
onPress={handleSubmit} |
|
|
|
|
disabled={!selectedPayment || createLoading} |
|
|
|
|
disabled={!selectedPayment || createLoading || isConverting} |
|
|
|
|
> |
|
|
|
|
{createLoading ? ( |
|
|
|
|
<ActivityIndicator size="small" color="#fff" /> |
|
|
|
|
) : isConverting ? ( |
|
|
|
|
<Text style={styles.submitButtonText}>转换中...</Text> |
|
|
|
|
) : ( |
|
|
|
|
<Text style={styles.submitButtonText}>提交订单</Text> |
|
|
|
|
)} |
|
|
|
|
@ -724,7 +834,7 @@ export const PaymentMethod = () => {
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
|
|
safeArea: { |
|
|
|
|
flex: 1, |
|
|
|
|
backgroundColor: '#fff', |
|
|
|
|
backgroundColor: "#fff", |
|
|
|
|
}, |
|
|
|
|
safeAreaContent: { |
|
|
|
|
flex: 1, |
|
|
|
|
@ -732,7 +842,7 @@ const styles = StyleSheet.create({
|
|
|
|
|
}, |
|
|
|
|
container: { |
|
|
|
|
flex: 1, |
|
|
|
|
backgroundColor: '#fff', |
|
|
|
|
backgroundColor: "#fff", |
|
|
|
|
}, |
|
|
|
|
sectionHeader: { |
|
|
|
|
flexDirection: "row", |
|
|
|
|
@ -818,7 +928,6 @@ const styles = StyleSheet.create({
|
|
|
|
|
borderRadius: 4, |
|
|
|
|
marginRight: 8, |
|
|
|
|
marginBottom: 4, |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
operatorText: { |
|
|
|
|
fontSize: fontSize(12), |
|
|
|
|
@ -850,13 +959,11 @@ const styles = StyleSheet.create({
|
|
|
|
|
justifyContent: "center", |
|
|
|
|
position: "relative", |
|
|
|
|
backgroundColor: "#fff", |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
backIconContainer: { |
|
|
|
|
position: "absolute", |
|
|
|
|
left: 15, |
|
|
|
|
backgroundColor: "#fff", |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
titleHeading: { |
|
|
|
|
fontWeight: "600", |
|
|
|
|
@ -864,7 +971,6 @@ const styles = StyleSheet.create({
|
|
|
|
|
lineHeight: 22, |
|
|
|
|
fontFamily: "PingFang SC", |
|
|
|
|
color: "black", |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
// Order Summary Styles
|
|
|
|
|
section: { |
|
|
|
|
@ -1096,8 +1202,8 @@ const styles = StyleSheet.create({
|
|
|
|
|
borderTopWidth: 1, |
|
|
|
|
borderTopColor: "#EEEEEE", |
|
|
|
|
paddingTop: 10, |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
alignItems: "center", |
|
|
|
|
}, |
|
|
|
|
totalText: { |
|
|
|
|
fontSize: fontSize(16), |
|
|
|
|
@ -1108,23 +1214,28 @@ const styles = StyleSheet.create({
|
|
|
|
|
marginLeft: 10, |
|
|
|
|
}, |
|
|
|
|
header: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
alignItems: "center", |
|
|
|
|
justifyContent: "center", |
|
|
|
|
padding: 10, |
|
|
|
|
position: "relative", |
|
|
|
|
}, |
|
|
|
|
backButton: { |
|
|
|
|
padding: 5, |
|
|
|
|
position: "absolute", |
|
|
|
|
left: 10, |
|
|
|
|
zIndex: 1, |
|
|
|
|
}, |
|
|
|
|
headerTitle: { |
|
|
|
|
fontSize: fontSize(18), |
|
|
|
|
fontWeight: '600', |
|
|
|
|
marginLeft: 10, |
|
|
|
|
fontSize: fontSize(20), |
|
|
|
|
fontWeight: "600", |
|
|
|
|
textAlign: "center", |
|
|
|
|
}, |
|
|
|
|
paymentContainer: { |
|
|
|
|
padding: 15, |
|
|
|
|
}, |
|
|
|
|
tabs: { |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
flexDirection: "row", |
|
|
|
|
marginBottom: 15, |
|
|
|
|
}, |
|
|
|
|
tab: { |
|
|
|
|
@ -1134,24 +1245,27 @@ const styles = StyleSheet.create({
|
|
|
|
|
}, |
|
|
|
|
tabActive: { |
|
|
|
|
borderBottomWidth: 2, |
|
|
|
|
borderBottomColor: '#FF5100', |
|
|
|
|
borderBottomColor: "#FF5100", |
|
|
|
|
}, |
|
|
|
|
bottomBar: { |
|
|
|
|
padding: 15, |
|
|
|
|
borderTopWidth: 1, |
|
|
|
|
borderTopColor: '#f5f5f5', |
|
|
|
|
borderTopColor: "#f5f5f5", |
|
|
|
|
}, |
|
|
|
|
submitButton: { |
|
|
|
|
width: '100%', |
|
|
|
|
width: "100%", |
|
|
|
|
height: 50, |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
backgroundColor: '#FF5100', |
|
|
|
|
justifyContent: "center", |
|
|
|
|
alignItems: "center", |
|
|
|
|
backgroundColor: "#FF5100", |
|
|
|
|
borderRadius: 25, |
|
|
|
|
}, |
|
|
|
|
submitButtonText: { |
|
|
|
|
color: 'white', |
|
|
|
|
color: "white", |
|
|
|
|
fontSize: fontSize(16), |
|
|
|
|
fontWeight: '600', |
|
|
|
|
fontWeight: "600", |
|
|
|
|
}, |
|
|
|
|
disabledButton: { |
|
|
|
|
backgroundColor: '#ccc', |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
Your Name
3 weeks ago