@ -26,7 +26,12 @@ import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { eventBus } from "../../utils/eventBus" ;
import LocationPinIcon from "../../components/LocationPinIcon" ;
import fontSize from "../../utils/fontsizeUtils" ;
import { ordersApi , OrderData , AddressDataItem , DomesticShippingFeeData } from "../../services/api/orders" ;
import {
ordersApi ,
OrderData ,
AddressDataItem ,
DomesticShippingFeeData ,
} from "../../services/api/orders" ;
import AsyncStorage from "@react-native-async-storage/async-storage" ;
export function Recipient ( {
@ -52,8 +57,22 @@ export function Recipient({
const [ addressList , setAddressList ] = useState < AddressItem [ ] > ( ) ;
const [ defaultAddress , setDefaultAddress ] = useState < addressData > ( ) ;
const [ addressId , setAddressId ] = useState < number > ( ) ;
const [ freightForwarderAddress , setFreightForwarderAddress ] = useState < AddressDataItem > ( ) ;
const [ domesticShippingFee , setDomesticShippingFee ] = useState < DomesticShippingFeeData > ( ) ;
const [ freightForwarderAddress , setFreightForwarderAddress ] =
useState < AddressDataItem > ( ) ;
const [ domesticShippingFee , setDomesticShippingFee ] =
useState < DomesticShippingFeeData > ( ) ;
const [ tabs , setTabs ] = useState ( [
{
id : "Online Payment" ,
label : "Online Payment" ,
} ,
{
id : "Offline Payment" ,
label : "Offline Payment" ,
} ,
] ) ;
const [ currentTab , setCurrentTab ] = useState ( "Online Paymen" ) ;
const getAddress = async ( ) = > {
const response = await addressApi . addressesDefault ( ) ;
setAddressId ( response . address_id ) ;
@ -78,14 +97,14 @@ export function Recipient({
const getFreightForwarderAddress = async ( ) = > {
const response = await ordersApi . freightForwarderAddress ( 1 ) ;
setWarehouse ( response . current_country_address . country as number )
setWarehouse ( response . current_country_address . country as number ) ;
setFreightForwarderAddress ( response ) ;
} ;
const getDomesticShippingFee = async ( ) = > {
const data = {
items : route.params.items ,
}
} ;
const response = await ordersApi . calcDomesticShippingFee ( data ) ;
setDomesticShippingFee ( response ) ;
@ -95,8 +114,8 @@ export function Recipient({
getAddress ( ) ;
getAddressList ( ) ;
getOrders ( ) ;
getFreightForwarderAddress ( )
getDomesticShippingFee ( )
getFreightForwarderAddress ( ) ;
getDomesticShippingFee ( ) ;
const listener = ( data : any ) = > {
if ( data . type === "add" ) {
data . address_id = new Date ( ) . getTime ( ) ;
@ -207,22 +226,23 @@ export function Recipient({
) ;
addressApi . deleteAddress ( address_id ) ;
} ;
const changeCountryHandel = async ( value :number ) = > {
const changeCountryHandel = async ( value : number ) = > {
const data = {
items : route.params.items ,
country_code : value
}
country_code : value ,
} ;
const response = await ordersApi . calcShippingFee ( data ) ;
if ( orderData ) {
setOrderData ( {
. . . orderData ,
shipping_fee_sea : response?.total_shipping_fee_sea ,
shipping_fee_air : response?.total_shipping_fee_air
shipping_fee_air : response?.total_shipping_fee_air ,
} ) ;
}
}
} ;
return (
< View style = { styles . mainContainer } >
< ScrollView style = { styles . container } >
{ /* Header */ }
< View style = { styles . header } >
@ -260,7 +280,9 @@ export function Recipient({
) }
< TouchableOpacity style = { styles . addRecipient } onPress = { addRessHandel } >
< Text style = { styles . addRecipientIcon } > + < / Text >
< Text style = { styles . addRecipientText } > Add Recipient Information < / Text >
< Text style = { styles . addRecipientText } >
Add Recipient Information
< / Text >
< / TouchableOpacity >
< / View >
< View style = { styles . border } > < / View >
@ -279,7 +301,12 @@ export function Recipient({
icon : "🚢" ,
detail : "Economical" ,
} ,
{ id : "air" , label : "Air Shipping" , icon : "✈️ " , detail : "Express" } ,
{
id : "air" ,
label : "Air Shipping" ,
icon : "✈️ " ,
detail : "Express" ,
} ,
] . map ( ( option , index ) = > (
< TouchableOpacity
key = { option . id }
@ -311,7 +338,7 @@ export function Recipient({
< Text style = { styles . sectionIcon } > 🏭 < / Text >
< Text style = { styles . sectionTitle } > Delivery Warehouse < / Text >
< / View >
< View style = { { marginTop : 12 , } } >
< View style = { { marginTop : 12 } } >
< View style = { styles . selectBox } >
< Text style = { styles . selectLabel } > Select a warehouse : < / Text >
< View style = { styles . selectWrapper } >
@ -319,16 +346,18 @@ export function Recipient({
selectedValue = { warehouse }
onValueChange = { ( value ) = > {
setWarehouse ( value ) ;
changeCountryHandel ( value )
changeCountryHandel ( value ) ;
} }
>
{
freightForwarderAddress ? . other_addresses . map ( ( item , index ) = > (
< Picker.Item label = { item . country } value = { item . country_code } key = { index } / >
) )
}
{ freightForwarderAddress ? . other_addresses . map (
( item , index ) = > (
< Picker.Item
label = { item . country }
value = { item . country_code }
key = { index }
/ >
)
) }
< / Picker >
< / View >
< / View >
@ -338,9 +367,8 @@ export function Recipient({
< Text style = { styles . shippingInfoRow } >
< Text style = { styles . shippingInfoLabel } >
Estimated Arrival : { " " }
< / Text >
< Text style = { { flex :1 , textAlign : "left" , marginLeft :10 } } >
< Text style = { { flex : 1 , textAlign : "left" , marginLeft : 10 } } >
{ shippingMethod === "sea"
? orderData ? . shipping_fee_sea_time
: orderData ? . shipping_fee_air_time }
@ -350,12 +378,20 @@ export function Recipient({
< View style = { styles . shippingInfoRow } >
< Text style = { styles . shippingInfoLabel } >
International Fee : { " " }
< / Text >
< Text style = { { color : "#ff6000" , flex :1 , textAlign : "left" , marginLeft :10 , fontWeight : '600' } } >
< Text
style = { {
color : "#ff6000" ,
flex : 1 ,
textAlign : "left" ,
marginLeft : 10 ,
fontWeight : "600" ,
} }
>
{ shippingMethod === "sea"
? orderData ? . shipping_fee_sea
: orderData ? . shipping_fee_air } < / Text >
: orderData ? . shipping_fee_air }
< / Text >
< Text style = { { color : "#ff6000" } } > ( Cash on Delivery ) < / Text >
< / View >
@ -365,13 +401,20 @@ export function Recipient({
< / View >
< View style = { styles . border } > < / View >
< View style = { styles . section } >
< View >
< View style = { styles . sectionHeader } >
< Text style = { styles . sectionIcon } > 💳 < / Text >
< Text style = { styles . sectionTitle } > Payment Method < / Text >
< / View >
{ [
< View style = { styles . paymentOptions } >
< View style = { styles . paymentOption } >
< Text style = { styles . paymentLabel } > Online Payment < / Text >
< / View >
< View style = { styles . paymentOption } >
< Text style = { styles . paymentLabel } > Offline Payment < / Text >
< / View >
< / View >
< View >
{ / * { [
{ id : "balance" , icon : "💰" , label : "Account Balance" } ,
{ id : "mobile_money" , icon : "📱" , label : "Mobile Money" } ,
{ id : "paypal" , icon : "🅿️ " , label : "PayPal" } ,
@ -390,6 +433,18 @@ export function Recipient({
< Text style = { styles . paymentIcon } > { option . icon } < / Text >
< Text style = { styles . paymentLabel } > { option . label } < / Text >
< / TouchableOpacity >
) ) } * / }
{ tabs . map ( ( item , index ) = > (
< TouchableOpacity
key = { index }
onPress = { ( ) = > {
setCurrentTab ( item . id ) ;
} }
>
< View style = { styles . tabContainer } >
< Text style = { styles . paymentLabel } > { item . label } < / Text >
< / View >
< / TouchableOpacity >
) ) }
{ /* Mobile Money 表单 */ }
@ -496,7 +551,9 @@ export function Recipient({
{ attribute ? . attribute_name } : { attribute ? . value }
< / Text >
) ) }
< Text style = { styles . itemQuantity } > Qty : { item . quantity } < / Text >
< Text style = { styles . itemQuantity } >
Qty : { item . quantity }
< / Text >
< / View >
< View style = { styles . itemPrices } >
@ -529,7 +586,8 @@ export function Recipient({
< View style = { styles . sectionContent } >
{ appliedCoupons . length === 0 ? (
< Text style = { styles . noCouponsMessage } >
No coupons applied . Click "Select" to browse available coupons .
No coupons applied . Click "Select" to browse available
coupons .
< / Text >
) : null }
@ -557,20 +615,20 @@ export function Recipient({
< / View >
< View style = { styles . priceBox1 } >
< Text > Domestic Shipping < / Text >
{
domesticShippingFee ? . currency ? (
{ domesticShippingFee ? . currency ? (
< Text > { domesticShippingFee ? . total_shipping_fee } < / Text >
) : (
) : (
< Text > 报 价 中 . . . < / Text >
)
}
) }
< / View >
< View style = { styles . priceBox1 } >
< Text > Estimated International Shipping < / Text >
< Text > { shippingMethod === "sea"
< Text >
{ shippingMethod === "sea"
? orderData ? . shipping_fee_sea
: orderData ? . shipping_fee_air } < / Text >
: orderData ? . shipping_fee_air }
< / Text >
< / View >
< / View >
@ -593,13 +651,23 @@ export function Recipient({
color : "#ff6000" ,
} }
>
{ ( ( orderData ? . total_amount ? ? 0 ) + ( shippingMethod === "sea"
? ( orderData ? . shipping_fee_sea ? ? 0 )
: ( orderData ? . shipping_fee_air ? ? 0 ) ) + ( domesticShippingFee ? . total_shipping_fee ? ? 0 ) ) . toFixed ( 2 ) }
{ (
( orderData ? . total_amount ? ? 0 ) +
( shippingMethod === "sea"
? orderData ? . shipping_fee_sea ? ? 0
: orderData ? . shipping_fee_air ? ? 0 ) +
( domesticShippingFee ? . total_shipping_fee ? ? 0 )
) . toFixed ( 2 ) }
< / Text >
< / View >
< View style = { styles . remarks } >
< Text style = { styles . remarksText } > 1 < / Text >
< Text style = { styles . remarksText } >
+ $
{ shippingMethod === "sea"
? orderData ? . shipping_fee_sea
: orderData ? . shipping_fee_air } { " " }
Estimated International Shipping
< / Text >
< / View >
< / View >
@ -613,7 +681,9 @@ export function Recipient({
< View style = { styles . couponModal } >
< View style = { styles . couponModalContainer } >
< View style = { styles . couponModalHeader } >
< Text style = { styles . couponModalTitle } > Available Coupons < / Text >
< Text style = { styles . couponModalTitle } >
Available Coupons
< / Text >
< TouchableOpacity
onPress = { ( ) = > setCouponModalVisible ( false ) }
>
@ -636,7 +706,8 @@ export function Recipient({
< TouchableOpacity
style = { [
styles . couponUseBtn ,
isCouponApplied ( "WELCOME10" ) && styles . couponUsedBtn ,
isCouponApplied ( "WELCOME10" ) &&
styles . couponUsedBtn ,
] }
onPress = { ( ) = > addCoupon ( "WELCOME10" ) }
disabled = { isCouponApplied ( "WELCOME10" ) }
@ -703,7 +774,6 @@ export function Recipient({
< / Modal >
< / View >
< / View >
< View style = { styles . border } > < / View >
{ /* Modal 表单 */ }
< Modal visible = { showModal } animationType = "slide" transparent >
@ -744,8 +814,9 @@ export function Recipient({
numberOfLines = { 1 }
ellipsizeMode = "tail"
>
{ item . country } { item . receiver_first_name } { " " }
. { item . receiver_last_name }
{ item . country } { " " }
{ item . receiver_first_name } . { " " }
{ item . receiver_last_name }
< / Text >
< Text
style = { styles . userCardInfo1 }
@ -767,7 +838,9 @@ export function Recipient({
< / View >
{ item . is_default === 1 && (
< View style = { styles . centeredBoxWithText } >
< Text style = { styles . blueHeadingTextStyle } >
< Text
style = { styles . blueHeadingTextStyle }
>
默 认
< / Text >
< / View >
@ -839,12 +912,33 @@ export function Recipient({
< / View >
< / View >
< / Modal >
< View style = { styles . border } > < / View >
< TouchableOpacity
style = { styles . bottomButton }
disabled = { ! domesticShippingFee ? . currency }
onPress = { ( ) = > {
console . log ( 123 ) ;
} }
>
< View style = { styles . bottomButtonContent } >
< Text style = { styles . bottomButtonText } >
{ domesticShippingFee ? . currency ? "确认订单" : "报价中..." }
< / Text >
< / View >
< / TouchableOpacity >
< / ScrollView >
< / View >
) ;
}
const styles = StyleSheet . create ( {
container : { flex : 1 , backgroundColor : "#fff" } ,
mainContainer : {
flex : 1 ,
backgroundColor : "#fff" ,
} ,
container : { flex : 1 , backgroundColor : "#fff" } ,
header : {
flexDirection : "row" ,
alignItems : "center" ,
@ -865,7 +959,6 @@ const styles = StyleSheet.create({
borderRadius : 8 ,
paddingLeft : 16 ,
paddingRight : 16 ,
} ,
sectionHeader : {
flexDirection : "row" ,
@ -880,6 +973,12 @@ const styles = StyleSheet.create({
fontSize : fontSize ( 13 ) ,
fontWeight : "500" ,
} ,
paymentOptions : {
flexDirection : "row" ,
justifyContent : "space-between" ,
alignItems : "center" ,
width : "100%" ,
} ,
recipientInfo : {
backgroundColor : "#fff" ,
borderRadius : 8 ,
@ -1028,15 +1127,19 @@ const styles = StyleSheet.create({
borderColor : "#ddd" ,
padding : 12 ,
borderRadius : 6 ,
marginTop : 10 ,
width : "50%" ,
} ,
paymentSelected : {
borderColor : "#ff6000" ,
backgroundColor : "#fff8f3" ,
} ,
paymentIcon : { fontSize : fontSize ( 20 ) , marginRight : 10 } ,
paymentLabel : { fontSize : fontSize ( 14 ) , fontWeight : "500" } ,
tabContainer : {
width : 100 ,
flexDirection : "row" ,
} ,
mobileForm : { marginTop : 12 } ,
countryCode : {
paddingVertical : 12 ,
@ -1549,4 +1652,26 @@ const styles = StyleSheet.create({
backgroundColor : "#f5f5f5" ,
marginTop : 12 ,
} ,
bottomButton : {
width : "100%" ,
justifyContent : "center" ,
alignItems : "center" ,
marginTop : 12 ,
paddingHorizontal : 16 ,
marginBottom : 12 ,
backgroundColor : "#fff" ,
} ,
bottomButtonContent : {
backgroundColor : "#ff611a" ,
width : "100%" ,
justifyContent : "center" ,
alignItems : "center" ,
paddingVertical : 16 ,
borderRadius : 25 ,
} ,
bottomButtonText : {
color : "#fff" ,
fontSize : fontSize ( 16 ) ,
fontWeight : "500" ,
} ,
} ) ;